#2259 Common Properties Resize Button is not shown (#2260)

Signed-off-by: srikant <[email protected]>
Co-authored-by: Matt Howard <[email protected]>

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
 					>
 						<div className="properties-right-flyout-container">
 							<aside

canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@import "./properties-main-widths.module.scss";
+@import "./properties-main-widths.scss";
 $properties-modal-buttons-height: $spacing-10;
 $properties-resize-button-size: $spacing-06;