✨ Add onBlur to colorPicker

TobitSoftware · Mar 20, 2020 · f97bf74 · f97bf74
1 parent d0c55f3
commit f97bf74
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/examples/react-chayns-color_picker/Example.jsx b/examples/react-chayns-color_picker/Example.jsx
@@ -30,6 +30,7 @@ export default class ColorPickerExample extends PureComponent {
                         console.log(hsvToHexString(c));
                         this.setState({ color: c });
                     }}
+                    onBlur={console.log}
                     transparency
                     style={{
                         marginBottom: '30px',

diff --git a/src/react-chayns-color_picker/README.md b/src/react-chayns-color_picker/README.md
@@ -29,6 +29,7 @@ You can set the following props on a ColorPicker element:
 | parent        | Node the bubble will be rendered into                                                   | DOM-Element|
 | onChange      | onChange - Callback                                                                     | function   |
 | onChangeEnd   | onChange - Callback                                                                     | function   |
+| onBlur        | onBlur - Callback                                                                       | function   |
 | transparency  | Adds the transparency slider                                                            | bool       |
 | input         | Adds an input to type colors                                                            | bool       |
 | defaultColorModel | Default used color model                                                            | number (from ColorPicker.colorModels) |

diff --git a/src/react-chayns-color_picker/component/ColorPicker.jsx b/src/react-chayns-color_picker/component/ColorPicker.jsx
@@ -73,6 +73,9 @@ const ColorPicker = forwardRef((props, reference) => {
             document.removeEventListener('click', closeBubble);
             window.removeEventListener('blur', closeBubble);
             bubbleRef.current.hide();
+            if (props.onBlur) {
+                props.onBlur(color);
+            }
             if (chayns.env.isApp || chayns.env.isMyChaynsApp) {
                 chayns.allowRefreshScroll();
             }
@@ -205,6 +208,7 @@ ColorPicker.propTypes = {
     bubblePosition: PropTypes.number,
     onChange: PropTypes.func,
     onChangeEnd: PropTypes.func,
+    onBlur: PropTypes.func,
     transparency: PropTypes.bool,
     parent: PropTypes.instanceOf(Element),
     className: PropTypes.string,
@@ -220,6 +224,7 @@ ColorPicker.defaultProps = {
     bubblePosition: Bubble.position.BOTTOM_CENTER,
     onChange: null,
     onChangeEnd: null,
+    onBlur: null,
     transparency: false,
     parent: null,
     className: null,