Merge pull request #919 from dimaip/crop2

BUGFIX: fix ImageCroper custom ratio controls
neos · Sep 9, 2017 · 7b42c78 · 7b42c78
2 parents 16231ce + 5de635a
commit 7b42c78
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 17 deletions.
diff --git a/packages/neos-ui-editors/src/Image/Components/Secondary/ImageCropper/index.js b/packages/neos-ui-editors/src/Image/Components/Secondary/ImageCropper/index.js
@@ -19,7 +19,8 @@ class AspectRatioItem extends PureComponent {
         key: PropTypes.any,
         width: PropTypes.number.isRequired,
         height: PropTypes.number.isRequired,
-        changeHandler: PropTypes.func.isRequired,
+        onChange: PropTypes.func.isRequired,
+        onFlipAspectRatio: PropTypes.func.isRequired,
         isLocked: PropTypes.bool
     };
 
@@ -28,6 +29,7 @@ class AspectRatioItem extends PureComponent {
 
         this.handleWidthInputChange = this.handleInputChange.bind(this, 'width');
         this.handleHeightInputChange = this.handleInputChange.bind(this, 'height');
+        this.handleFlipAspectRatio = this.props.onFlipAspectRatio.bind(this);
     }
 
     render() {
@@ -59,13 +61,10 @@ class AspectRatioItem extends PureComponent {
     }
 
     handleInputChange(type, val) {
-        const {width, height, changeHandler} = this.props;
+        const width = type === 'width' ? val : this.props.width;
+        const height = type === 'height' ? val : this.props.height;
 
-        changeHandler({
-            width,
-            height,
-            [type]: val
-        });
+        this.props.onChange(Number(width), Number(height));
     }
 }
 
@@ -89,6 +88,7 @@ export default class ImageCropper extends PureComponent {
         this.handleSetAspectRatio = this.setAspectRatio.bind(this);
         this.handleClearAspectRatio = this.clearAspectRatio.bind(this);
         this.handleFlipAspectRatio = this.flipAspectRatio.bind(this);
+        this.handleSetCustomAspectRatioDimensions = this.setCustomAspectRatioDimensions.bind(this);
     }
 
     componentWillReceiveProps(nextProps) {
@@ -101,7 +101,6 @@ export default class ImageCropper extends PureComponent {
 
     setAspectRatio(aspectRatioOption) {
         const {cropConfiguration} = this.state;
-
         this.setState({
             cropConfiguration: cropConfiguration.selectAspectRatioOption(aspectRatioOption)
         });
@@ -148,11 +147,13 @@ export default class ImageCropper extends PureComponent {
                 <div className={style.tools}>
                     <div className={style.aspectRatioIndicator}>
                         {
-                            cropConfiguration.aspectRatioReducedLabel.map((label, index) => [
-                                <Icon key={index} icon="crop"/>,
-                                <span key={index} title={label}>{label}</span>,
-                                <span key={index}>{aspectRatioLocked ? <Icon icon="lock"/> : null}</span>
-                            ]).orSome('')
+                            cropConfiguration.aspectRatioReducedLabel.map((label, index) => (
+                                <div key={index}>
+                                    <Icon key={index} icon="crop"/>,
+                                    <span key={index} title={label}>{label}</span>,
+                                    <span key={index}>{aspectRatioLocked ? <Icon icon="lock"/> : null}</span>
+                                </div>
+                            )).orSome('')
                         }
                     </div>
 
@@ -167,7 +168,13 @@ export default class ImageCropper extends PureComponent {
 
                     <div className={style.dimensions}>
                         {cropConfiguration.aspectRatioDimensions.map((props, index) => (
-                            <AspectRatioItem {...props} isLocked={aspectRatioLocked} key={index}/>
+                            <AspectRatioItem
+                                {...props}
+                                isLocked={aspectRatioLocked}
+                                onFlipAspectRatio={this.handleFlipAspectRatio}
+                                onChange={this.handleSetCustomAspectRatioDimensions}
+                                key={index}
+                                />
                         )).orSome('')}
                     </div>
                 </div>

diff --git a/packages/react-ui-components/src/DropDown/header.js b/packages/react-ui-components/src/DropDown/header.js
@@ -67,7 +67,7 @@ ShallowDropDownHeader.propTypes = {
      * These props control the visual state of the contents, and are passed
      * from the outside via the `ContextDropDownHeader` component.
      */
-    isOpen: PropTypes.bool.isRequired,
+    isOpen: PropTypes.bool,
     toggleDropDown: PropTypes.func.isRequired,
 
     /**

diff --git a/packages/react-ui-components/src/DropDown/wrapper.js b/packages/react-ui-components/src/DropDown/wrapper.js
@@ -106,7 +106,7 @@ class StatelessDropDownWrapperWithoutClickOutsideBehavior extends PureComponent
             <div {...rest} className={finalClassName}>
                 {React.Children.map(
                     children,
-                    child => child.type ? <child.type {...child.props} isDropdownOpen={this.props.isOpen}/> : child
+                    child => typeof child.type === 'string' ? child : <child.type {...child.props} isDropdownOpen={this.props.isOpen}/>
                 )}
             </div>
         );
@@ -151,7 +151,7 @@ export class ContextDropDownHeader extends PureComponent {
         /**
          * The propagated isOpen state from the dropDown
          */
-        isDropdownOpen: PropTypes.bool.isRequired
+        isDropdownOpen: PropTypes.bool
     };
 
     static contextTypes = {