From d3a80ca529da14ff0552b1a5b2e61307d4a06ccd Mon Sep 17 00:00:00 2001 From: srikant Date: Thu, 5 Dec 2024 18:11:05 +0530 Subject: [PATCH 1/3] #2259 Common Properties Resize Button is not shown (#2260) Signed-off-by: srikant Co-authored-by: Matt Howard --- ...odule.scss => properties-main-widths.scss} | 0 .../properties-main/properties-main.jsx | 27 +++++++++++-------- .../properties-main/properties-main.scss | 2 +- 3 files changed, 17 insertions(+), 12 deletions(-) rename canvas_modules/common-canvas/src/common-properties/properties-main/{properties-main-widths.module.scss => properties-main-widths.scss} (100%) diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main-widths.module.scss b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main-widths.scss similarity index 100% rename from canvas_modules/common-canvas/src/common-properties/properties-main/properties-main-widths.module.scss rename to canvas_modules/common-canvas/src/common-properties/properties-main/properties-main-widths.scss diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx index 1ddf7bfeac..e16128334d 100644 --- a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx +++ b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx @@ -38,7 +38,7 @@ import TitleEditor from "./../components/title-editor"; import classNames from "classnames"; import { injectIntl } from "react-intl"; -import styles from "./properties-main-widths.module.scss"; +import styles from "./properties-main-widths.scss"; const FLYOUT_WIDTH_SMALL = parseInt(styles.flyoutWidthSmall, 10); const FLYOUT_WIDTH_MEDIUM = parseInt(styles.flyoutWidthMedium, 10); @@ -72,7 +72,6 @@ class PropertiesMain extends React.Component { }); this.setForm(props.propertiesInfo, false); this.previousErrorMessages = {}; - this.flyoutWidths = [FLYOUT_WIDTH_SMALL, FLYOUT_WIDTH_MEDIUM, FLYOUT_WIDTH_LARGE, FLYOUT_WIDTH_MAX]; // this has to be after setForm because setForm clears all error messages. // Validate all validationDefinitions but show warning messages for "colDoesExists" condition only this.propertiesController.validatePropertiesValues(false); @@ -89,7 +88,7 @@ class PropertiesMain extends React.Component { this.state = { showPropertiesButtons: true, editorSize: editorSize, - containerWidth: FLYOUT_WIDTH_SMALL + showResizeBtn: true }; this.applyPropertiesEditing = this.applyPropertiesEditing.bind(this); this.showPropertiesButtons = this.showPropertiesButtons.bind(this); @@ -99,6 +98,9 @@ class PropertiesMain extends React.Component { this._getResizeButton = this._getResizeButton.bind(this); this._isResizeButtonRequired = this._isResizeButtonRequired.bind(this); this.onBlur = this.onBlur.bind(this); + this.detectResize = this.detectResize.bind(this); + // used to tracked when the resize button is clicked and ignore detectResize + this.resizeClicked = false; } componentDidMount() { @@ -431,6 +433,7 @@ class PropertiesMain extends React.Component { } resize() { + this.resizeClicked = true; if (this.propertiesController.getForm().editorSize === Size.SMALL) { if (this.state.editorSize === Size.SMALL) { this.updateEditorSize(Size.MEDIUM); @@ -452,8 +455,12 @@ class PropertiesMain extends React.Component { } } - detectResize(width) { - this.setState({ containerWidth: width }); + detectResize() { + // only hide resize button if resize wasn't from clicking resize button + if (!this.resizeClicked) { + this.setState({ showResizeBtn: false }); + } + this.resizeClicked = false; } render() { @@ -502,11 +509,8 @@ class PropertiesMain extends React.Component { />); // Show Resize Button only under below conditions // 1. Flyout is not dragged to resize its width. - // 2. If Flyout is dragged back to its smallest width. - // If pixel_width is set include that to test if button should be shown. - const widthArr = [...this.flyoutWidths, this._getOverrideSize()]; - const allowedWidth = widthArr.includes(this.state.containerWidth); - if (this._isResizeButtonRequired() && allowedWidth) { + // 2. If pixel_width is set include that to test if button should be shown. + if (this._isResizeButtonRequired() && this.state.showResizeBtn) { const resizeIcon = this._getResizeButton(); // Resize button label can be "Expand" or "Contract" const resizeBtnLabel = (resizeIcon.props && resizeIcon.props.className === "properties-resize-caret-left") @@ -608,8 +612,9 @@ class PropertiesMain extends React.Component { handleWidth refreshMode="debounce" refreshRate={500} - onResize={(width) => this.detectResize(width)} + onResize={this.detectResize} targetRef={this.commonProperties} + skipOnMount >