@elyra/canvas 12.20.0 → 12.21.0

package/src/common-properties/panels/tearsheet/tearsheet.scss

@@ -0,0 +1,31 @@
+.properties-tearsheet-panel.bx--modal {
+	align-items: flex-end;
+	.bx--modal-container {
+		max-height: calc(100% - 88px);
+		height: 100%;
+		width: calc(100% - 128px);
+		transform: translate3d(0, 500px, 0);
+		transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
+		.bx--modal-header {
+			padding: $spacing-06 $spacing-07;
+			border-bottom: 1px solid $ui-03;
+			margin-bottom: 0;
+			h3 {
+				@include carbon--type-style("productive-heading-04");
+			}
+			p {
+				margin-top: $spacing-03;
+				@include carbon--type-style("body-short-01");
+			}
+		}
+		.bx--modal-content {
+			padding: $spacing-06 $spacing-07;
+			background-color: $ui-background;
+			margin-bottom: 0;
+			.react-codemirror2, .react-codemirror2 .CodeMirror {
+				background-color: $ui-01;
+			}
+		}	
+	}
+	
+}

package/src/common-properties/properties-controller.js

@@ -1302,6 +1302,15 @@ export default class PropertiesController {
 	getPanelStates() {
 		return this.propertiesStore.getPanelStates();
 	}
+	clearActiveTearsheet() {
+		this.propertiesStore.setActiveTearsheetId(null);
+	}
+	setActiveTearsheet(tearsheetId) {
+		this.propertiesStore.setActiveTearsheetId(tearsheetId);
+	}
+	getActiveTearsheet() {
+		return this.propertiesStore.getActiveTearsheetId() || null;
+	}
 
 
 	/**

package/src/common-properties/properties-store.js

@@ -16,7 +16,7 @@
 
 import { createStore, combineReducers } from "redux";
 import { has, get, isEqual, cloneDeep } from "lodash";
-
+import { setTearsheetState } from "./actions";
 import { setPropertyValues, updatePropertyValue, removePropertyValue } from "./actions";
 import { setControlStates, updateControlState } from "./actions";
 import { setPanelStates, updatePanelState } from "./actions";
@@ -40,6 +40,7 @@ import disableRowMoveButtonsReducer from "./reducers/disable-row-move-buttons";
 import saveButtonDisableReducer from "./reducers/save-button-disable";
 import wideFlyoutPrimaryButtonDisableReducer from "./reducers/wide-flyout-primary-button-disable";
 import propertiesSettingsReducer from "./reducers/properties-settings";
+import tearsheetStatesReducer from "./reducers/tearsheet-states";
 import * as PropertyUtils from "./util/property-utils.js";
 import { CONDITION_MESSAGE_TYPE, MESSAGE_KEYS } from "./constants/constants.js";
 
@@ -49,7 +50,8 @@ export default class PropertiesStore {
 	constructor() {
 		this.combinedReducer = combineReducers({ propertiesReducer, controlStatesReducer, panelStatesReducer,
 			errorMessagesReducer, datasetMetadataReducer, rowSelectionsReducer, componentMetadataReducer,
-			disableRowMoveButtonsReducer, actionStatesReducer, saveButtonDisableReducer, wideFlyoutPrimaryButtonDisableReducer, propertiesSettingsReducer, rowFreezeReducer });
+			disableRowMoveButtonsReducer, actionStatesReducer, wideFlyoutPrimaryButtonDisableReducer, tearsheetStatesReducer,
+			saveButtonDisableReducer, propertiesSettingsReducer, rowFreezeReducer });
 		let enableDevTools = false;
 		if (typeof window !== "undefined") {
 			enableDevTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
@@ -537,6 +539,19 @@ export default class PropertiesStore {
 		}
 		return defaultValue;
 	}
+
+	setActiveTearsheetId(tearsheetId) {
+		this.store.dispatch(setTearsheetState({ tearsheetId: tearsheetId }));
+	}
+
+	getActiveTearsheetId() {
+		const state = this.store.getState();
+		const tearsheetId = state.tearsheetStatesReducer.tearsheetId;
+		if (typeof tearsheetId !== "undefined") {
+			return tearsheetId;
+		}
+		return null;
+	}
 }
 
 function getNestedPropertySetting(propertyId, state, setting, defaultValue) {

package/src/common-properties/reducers/tearsheet-states.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2022 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SET_ACTIVE_TEARSHEET } from "../actions";
+
+function states(state = [], action) {
+	switch (action.type) {
+	case SET_ACTIVE_TEARSHEET: {
+		return Object.assign({}, state, action.tearsheetId);
+	}
+	default:
+		return state;
+	}
+}
+
+export default states;