double click style changes

Signed-off-by: Veena S <[email protected]>
veenas1 · Jun 25, 2024 · dd7ebdc · dd7ebdc
1 parent e77ce32
commit dd7ebdc
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 8 deletions.
diff --git a/..._modules/common-canvas/src/common-properties/components/flexible-table/flexible-table.jsx b/..._modules/common-canvas/src/common-properties/components/flexible-table/flexible-table.jsx
@@ -578,6 +578,7 @@ class FlexibleTable extends React.Component {
 									rowSelection={this.props.rowSelection}
 									disableHeader={!this.props.showHeader}
 									onRowDoubleClick={this.props.onRowDoubleClick}
+									doubleClickedRow = {this.props.doubleClickedRow}
 									rowsSelected={this.props.selectedRows}
 									checkedAll={this.state.checkedAllRows}
 									setRowsSelected={this.handleCheckedRow}
@@ -634,6 +635,7 @@ FlexibleTable.propTypes = {
 	messageInfo: PropTypes.object,
 	updateRowSelections: PropTypes.func,
 	onRowDoubleClick: PropTypes.func,
+	doubleClickedRow: PropTypes.array,
 	selectedRows: PropTypes.array,
 	rowSelection: PropTypes.string,
 	summaryTable: PropTypes.bool,

diff --git a/...es/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.jsx b/...es/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.jsx
@@ -73,6 +73,7 @@ class VirtualizedTable extends React.Component {
 		this.onRowClick = this.onRowClick.bind(this);
 		this.overSelectOption = this.overSelectOption.bind(this);
 		this.resizeColumn = this.resizeColumn.bind(this);
+		this.getDoubleClickedRow = this.getDoubleClickedRow.bind(this);
 		this.uuid = uuid4();
 	}
 
@@ -113,6 +114,10 @@ class VirtualizedTable extends React.Component {
 		}
 	}
 
+	getDoubleClickedRow() {
+		return this.props.doubleClickedRow;
+	}
+
 	getCheckboxLabelColumnIndex(columns) {
 		// If 1st column is Index, use the next column for labeling
 		for (let i = 0; i < columns.length; i++) {
@@ -439,6 +444,7 @@ class VirtualizedTable extends React.Component {
 				className={classNames(className,
 					{ "properties-vt-row-selected": selectedRow },
 					{ "properties-vt-row-disabled": rowDisabled },
+					{ "properties-vt-row-doubleClick": this.getDoubleClickedRow()?.indexOf(rowData.rowKey) > -1 },
 					{ "properties-vt-row-non-interactive": !this.props.selectable } // ReadonlyTable with single row selection is non-interactive.
 				)}
 				data-role="properties-data-row"
@@ -538,6 +544,7 @@ VirtualizedTable.propTypes = {
 		PropTypes.number.isRequired
 	]),
 	onRowDoubleClick: PropTypes.func,
+	doubleClickedRow: PropTypes.array,
 	rowsSelected: PropTypes.array, // Required if selectable is true
 	checkedAll: PropTypes.bool, // Required if selectable is true
 	setRowsSelected: PropTypes.func, // Required if selectable is true

diff --git a/...s/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss b/...s/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss
@@ -121,6 +121,14 @@
 		margin-right: $spacing-02;
 	}
 
+	.properties-vt-double-click:first-of-type {
+		.properties-vt-row-class {
+			border-top: 1px solid transparent;
+			&.properties-vt-row-selected {
+				border-top: 1px solid $layer-accent-hover-01;
+			}
+		}
+	}
 
 	.properties-vt-row-class {
 		line-height: 20px;
@@ -130,7 +138,12 @@
 			// ReadonlyTable with single row selection is non-interactive. Nothing should happen on hover
 			background-color: $layer-hover-01;
 		}
-
+		.properties-vt-row-doubleClick{
+			color: $button-primary;
+			border: 1px solid $button-primary;
+			background-color: $background-active;
+			border-left: 4px solid $button-primary;
+		}
 		.properties-table-cell-control {
 			// Required for numberfields within react-virtualized table cell
 			.properties-numberfield {
@@ -176,8 +189,6 @@
 	}
 
 	.properties-vt-row-selected {
-		color: $button-primary;
-		border: 1px solid $button-primary;
 		background-color: $layer-selected-01;
 		border-bottom: 1px solid $layer-accent-hover-01;
 		&:hover {
@@ -196,14 +207,18 @@
 			padding-left: 3px;
 		}
 		.properties-vt-row-selected {
-			color: $button-primary;
-			border: 1px solid $button-primary;
 			border-left: 4px solid $button-primary;
 			padding-left: 0;
 			&:not(.properties-vt-row-disabled):hover {
 				border-left: 4px solid $button-primary;
 			}
 		}
+		.properties-vt-row-doubleClick{
+			color: $button-primary;
+			border: 1px solid $button-primary;
+			border-left: 4px solid $button-primary;
+			background-color: $background-active;
+		}
 	}
 
 	.properties-vt-small-loading svg {

diff --git a/...on-properties/controls/expression/expression-builder/expression-select-field-function.jsx b/...on-properties/controls/expression/expression-builder/expression-select-field-function.jsx
@@ -56,6 +56,9 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		this.fields = this._makeDatasetFields(props.controller.getDatasetMetadataFields(), props.controller.getExpressionInfo().fields);
 		this.resources = get(props.controller.getExpressionInfo(), "resources", {});
 		this.state = {
+			doubleClickedFieldRow: [],
+			doubleClickedValueRow: [],
+			doubleClickedFunctionRow: [],
 			fieldSelected: 0,
 			valueSelected: 0,
 			functionSelected: 0,
@@ -120,7 +123,10 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 	onFieldTableClick(row, evt, rowKey) {
 		this.setState({
 			fieldSelected: rowKey,
-			valueSelected: 0
+			valueSelected: 0,
+			doubleClickedValueRow: [],
+			doubleClickedFieldRow: [],
+			doubleClickedFunctionRow: []
 		});
 
 	}
@@ -138,6 +144,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 			}
 			this.props.onChange(value);
 		}
+		this.setState({ doubleClickedFieldRow: [rowKey] });
 	}
 
 	onFieldFilter(filterString) {
@@ -146,7 +153,8 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 
 	onValueTableClick(row, evt, rowKey) {
 		this.setState({
-			valueSelected: rowKey
+			valueSelected: rowKey,
+			doubleClickedValueRow: []
 		});
 	}
 
@@ -166,7 +174,8 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 			}
 		}
 		this.setState({
-			valueSelected: rowKey
+			valueSelected: rowKey,
+			doubleClickedValueRow: [rowKey]
 		});
 	}
 
@@ -193,6 +202,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 		if (this.props.onChange) {
 			this.props.onChange(value);
 		}
+		this.setState({ doubleClickedFunctionRow: [rowKey] });
 	}
 
 	onFunctionFilter(filterString) {
@@ -511,6 +521,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 						rowSelection={ROW_SELECTION.SINGLE}
 						updateRowSelections={this.onFieldTableClick}
 						onRowDoubleClick={this.onAddFieldClick}
+						doubleClickedRow = {this.state.doubleClickedFieldRow}
 						selectedRows={[selectedField]}
 						onSort={this.setSortColumn.bind(this, "fieldTable")}
 						light={this.props.controller.getLight()}
@@ -529,6 +540,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 						rowSelection={ROW_SELECTION.SINGLE}
 						updateRowSelections={this.onValueTableClick}
 						onRowDoubleClick={this.onAddValueClick}
+						doubleClickedRow = {this.state.doubleClickedValueRow}
 						selectedRows={[selectedValue]}
 						onSort={this.setSortColumn.bind(this, "valuesTable")}
 						light={this.props.controller.getLight()}
@@ -698,6 +710,7 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
 						rowSelection={ROW_SELECTION.SINGLE}
 						updateRowSelections={this.onFunctionTableClick}
 						onRowDoubleClick={this.onAddFunctionClick}
+						doubleClickedRow = {this.state.doubleClickedFunctionRow}
 						selectedRows={[selectedFunction]}
 						onSort={this.setSortColumn.bind(this, "functionTable")}
 						light={this.props.controller.getLight()}