@lowdefy/blocks-color-selectors 4.0.0-alpha.6 → 4.0.0-alpha.9

package/README.md

@@ -1,3 +1,3 @@
 # Lowdefy Color Selector
 
-A Lowdefy Color Selector block based on react-color.
+A Lowdefy Color Selector block based on react-colorful.

package/dist/blocks/ColorSelector/ColorPicker.js

@@ -0,0 +1,69 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React, { useCallback, useRef, useState } from 'react';
+import { HexColorPicker, HexColorInput } from 'react-colorful';
+import classNames from 'classnames';
+import useClickOutside from './useClickOutside.js';
+const DEFAULT_COLOR = '#000000';
+export const ColorPicker = ({ className , disabled , hideInput , onChange , size , undefinedColor , value ,  })=>{
+    const popover = useRef();
+    const [isOpen, toggle] = useState(false);
+    const [color, setColor] = useState(value || undefinedColor || DEFAULT_COLOR);
+    const close = useCallback((newColor)=>{
+        toggle(false);
+        onChange(newColor);
+    }, []);
+    useClickOutside(popover, close, color);
+    return(/*#__PURE__*/ React.createElement("div", {
+        className: classNames({
+            'color-picker': true,
+            [className]: true
+        })
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: classNames({
+            'color-picker-swatch': true,
+            'color-picker-swatch-sm': size === 'small',
+            'color-picker-swatch-lg': size === 'large',
+            'color-picker-swatch-disabled': disabled
+        }),
+        style: {
+            backgroundColor: color
+        },
+        onClick: ()=>!disabled && toggle(true)
+    }), !hideInput && /*#__PURE__*/ React.createElement(HexColorInput, {
+        className: classNames({
+            'color-picker-input': true,
+            'color-picker-input-sm ': size === 'small',
+            'color-picker-input-lg': size === 'large',
+            'ant-input': true,
+            'ant-input-sm': size === 'small',
+            'ant-input-lg': size === 'large'
+        }),
+        color: color,
+        onChange: (newColor)=>{
+            setColor(newColor);
+            onChange(newColor);
+        },
+        prefixed: true,
+        disabled: disabled
+    }), isOpen && /*#__PURE__*/ React.createElement("div", {
+        className: "color-picker-popover",
+        ref: popover
+    }, /*#__PURE__*/ React.createElement(HexColorPicker, {
+        color: color,
+        onChange: setColor
+    }))));
+};
+export default ColorPicker;

package/dist/blocks/ColorSelector/ColorSelector.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  Copyright 2020-2022 Lowdefy, Inc
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -14,13 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { BlockPicker } from 'react-color';
 import { blockDefaultProps } from '@lowdefy/block-utils';
 import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
-const Selector = ({ blockId , loading , methods , properties , required , validation , value  })=>{
-    return(/*#__PURE__*/ _jsx(Label, {
+import ColorPicker from './ColorPicker.js';
+const ColorSelector = ({ blockId , components , events , loading , methods , properties , required , validation , value ,  })=>{
+    return(/*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
-        loading: loading,
+        components: components,
+        events: events,
         methods: methods,
         properties: {
             title: properties.title,
@@ -30,7 +30,7 @@ const Selector = ({ blockId , loading , methods , properties , required , valida
         required: required,
         validation: validation,
         content: {
-            content: ()=>/*#__PURE__*/ _jsx(BlockPicker, {
+            content: ()=>/*#__PURE__*/ React.createElement(ColorPicker, {
                     id: `${blockId}_input`,
                     className: methods.makeCssClass([
                         {
@@ -38,30 +38,26 @@ const Selector = ({ blockId , loading , methods , properties , required , valida
                         },
                         properties.inputStyle, 
                     ]),
-                    color: value || properties.defaultColor || '#000000',
-                    colors: properties.colors,
-                    triangle: properties.triangle || 'hide',
-                    width: properties.width || '100%',
-                    onChangeComplete: (color)=>{
-                        methods.setValue(color.hex ? color.hex : '#000000');
+                    onChange: (newColor)=>{
+                        methods.setValue(newColor);
                         methods.triggerEvent({
                             name: 'onChange'
                         });
-                    }
+                    },
+                    size: properties.size,
+                    undefinedColor: properties.undefinedColor,
+                    value: value,
+                    hideInput: properties.hideInput,
+                    disabled: properties.disabled || loading,
+                    methods: methods
                 })
         }
     }));
 };
-Selector.defaultProps = blockDefaultProps;
-Selector.meta = {
+ColorSelector.defaultProps = blockDefaultProps;
+ColorSelector.meta = {
     valueType: 'string',
     category: 'input',
-    loading: {
-        type: 'Skeleton',
-        properties: {
-            height: 216
-        }
-    },
     icons: [
         ...Label.meta.icons
     ],
@@ -69,4 +65,4 @@ Selector.meta = {
         'blocks/ColorSelector/style.less'
     ]
 };
-export default Selector;
+export default ColorSelector;

package/dist/blocks/ColorSelector/schema.json

@@ -7,28 +7,7 @@
         "type": "string",
         "description": "Title to describe the input component, if no title is specified the block id is displayed."
       },
-      "colors": {
-        "type": "array",
-        "description": "Colors to display.",
-        "default": [
-          "#D9E3F0",
-          "#F47373",
-          "#697689",
-          "#37D67A",
-          "#2CCCE4",
-          "#555555",
-          "#dce775",
-          "#ff8a65",
-          "#ba68c8"
-        ],
-        "items": {
-          "type": "string",
-          "docs": {
-            "displayType": "color"
-          }
-        }
-      },
-      "defaultColor": {
+      "undefinedColor": {
         "type": "string",
         "default": "#000000",
         "description": "Default color to display if input value is null.",
@@ -43,19 +22,15 @@
           "displayType": "yaml"
         }
       },
-      "triangle": {
+      "disabled": {
         "type": "boolean",
-        "enum": ["hide", "top"],
-        "default": "hide",
-        "description": "Show triangle on color selector border."
+        "default": false,
+        "description": "If true, the input is disabled."
       },
-      "width": {
-        "type": ["string", "number"],
-        "description": "Color selector width.",
-        "default": "100%",
-        "docs": {
-          "displayType": "string"
-        }
+      "hideInput": {
+        "type": "boolean",
+        "default": false,
+        "description": "If true, the input is hidden."
       },
       "label": {
         "type": "object",

package/dist/blocks/ColorSelector/style.less

@@ -1,5 +1,5 @@
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  Copyright 2020-2022 Lowdefy, Inc
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -14,4 +14,60 @@
   limitations under the License.
 */
 
-@import '@lowdefy/blocks-antd/blocks/Label/style.less'
+@import '@lowdefy/blocks-antd/blocks/Label/style.less';
+@import '@lowdefy/blocks-antd/blocks/TextInput/style.less';
+
+.color-picker {
+  position: relative;
+  display: flex;
+}
+
+.color-picker-swatch {
+  flex: 0 0 auto;
+  width: 34px;
+  height: 34px;
+  border-radius: 2px;
+  border: 3px solid #fff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+
+.color-picker-swatch-disabled {
+  cursor: disabled;
+}
+
+.color-picker-swatch-sm {
+  width: 24px;
+  height: 24px;
+}
+
+.color-picker-swatch-lg {
+  width: 40px;
+  height: 40px;
+}
+
+.small .react-colorful {
+  width: 120px;
+  height: 120px;
+}
+
+.color-picker-popover {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  border-radius: 3px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+}
+
+.color-picker-input {
+  margin-left: 8px;
+}
+
+.color-picker-input-sm {
+  margin-left: 0px;
+}
+
+.color-picker-input-lg {
+  margin-left: 12px;
+}

package/dist/blocks/ColorSelector/useClickOutside.js

@@ -0,0 +1,46 @@
+/*
+  Copyright 2020-2022 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { useEffect } from 'react';
+// Improved version of https://usehooks.com/useOnClickOutside/
+const useClickOutside = (ref, handler, value)=>{
+    useEffect(()=>{
+        let startedInside = false;
+        let startedWhenMounted = false;
+        const listener = (event)=>{
+            // Do nothing if `mousedown` or `touchstart` started inside ref element
+            if (startedInside || !startedWhenMounted) return;
+            // Do nothing if clicking ref's element or descendent elements
+            if (!ref.current || ref.current.contains(event.target)) return;
+            handler(value, event);
+        };
+        const validateEventStart = (event)=>{
+            startedWhenMounted = ref.current;
+            startedInside = ref.current && ref.current.contains(event.target);
+        };
+        document.addEventListener('mousedown', validateEventStart);
+        document.addEventListener('touchstart', validateEventStart);
+        document.addEventListener('click', listener);
+        return ()=>{
+            document.removeEventListener('mousedown', validateEventStart);
+            document.removeEventListener('touchstart', validateEventStart);
+            document.removeEventListener('click', listener);
+        };
+    }, [
+        ref,
+        handler,
+        value
+    ]);
+};
+export default useClickOutside;

package/dist/blocks.js

@@ -1,5 +1,5 @@
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  Copyright 2020-2022 Lowdefy, Inc
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -13,10 +13,3 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export { default as ColorSelector } from './blocks/ColorSelector/ColorSelector.js';
-export { default as ChromeColorSelector } from './blocks/ChromeColorSelector/ChromeColorSelector.js';
-export { default as CircleColorSelector } from './blocks/CircleColorSelector/CircleColorSelector.js';
-export { default as CompactColorSelector } from './blocks/CompactColorSelector/CompactColorSelector.js';
-export { default as GithubColorSelector } from './blocks/GithubColorSelector/GithubColorSelector.js';
-export { default as SliderColorSelector } from './blocks/SliderColorSelector/SliderColorSelector.js';
-export { default as SwatchesColorSelector } from './blocks/SwatchesColorSelector/SwatchesColorSelector.js';
-export { default as TwitterColorSelector } from './blocks/TwitterColorSelector/TwitterColorSelector.js';

package/dist/types.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/namespace */ /*
-  Copyright 2020-2021 Lowdefy, Inc
+  Copyright 2020-2022 Lowdefy, Inc
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-color-selectors",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-alpha.9",
   "license": "Apache-2.0",
   "description": "A Lowdefy color selector blocks based on react-color.",
   "homepage": "https://lowdefy.com",
@@ -8,7 +8,8 @@
     "lowdefy",
     "lowdefy blocks",
     "color picker",
-    "react-color"
+    "react-color",
+    "lowdefy plugin"
   ],
   "bugs": {
     "url": "https://github.com/lowdefy/lowdefy/issues"
@@ -50,30 +51,30 @@
     "test": "jest --coverage"
   },
   "dependencies": {
-    "@lowdefy/block-utils": "4.0.0-alpha.6",
-    "@lowdefy/blocks-antd": "4.0.0-alpha.6",
-    "react": "18.0.0-alpha-327d5c484-20211106",
-    "react-color": "2.19.3",
-    "react-dom": "18.0.0-alpha-327d5c484-20211106"
+    "@lowdefy/block-utils": "4.0.0-alpha.9",
+    "@lowdefy/blocks-antd": "4.0.0-alpha.9",
+    "classnames": "2.3.1",
+    "react": "17.0.2",
+    "react-colorful": "5.5.1",
+    "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "@babel/preset-react": "7.16.0",
-    "@emotion/jest": "11.5.0",
-    "@lowdefy/block-dev": "4.0.0-alpha.6",
+    "@emotion/jest": "11.7.1",
+    "@lowdefy/block-dev": "4.0.0-alpha.9",
     "@swc/cli": "0.1.55",
-    "@swc/core": "1.2.130",
+    "@swc/core": "1.2.135",
     "@swc/jest": "0.2.17",
-    "@testing-library/dom": "8.10.1",
+    "@testing-library/dom": "8.11.3",
     "@testing-library/react": "13.0.0-alpha.4",
     "@testing-library/user-event": "14.0.0-alpha.14",
     "copyfiles": "2.4.1",
-    "jest": "27.3.1",
+    "jest": "27.5.1",
     "jest-canvas-mock": "2.3.1",
     "jest-serializer-html": "7.1.0",
-    "jest-transform-yaml": "0.1.2"
+    "jest-transform-yaml": "1.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2530e31af795b6a3c75ac8f72c8dbe0ab5d1251b"
+  "gitHead": "98b544eca231bdcfca6c3a8601a891835d5ce571"
 }

package/dist/blocks/ChromeColorSelector/ChromeColorSelector.js

@@ -1,75 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/*
-  Copyright 2020-2021 Lowdefy, Inc
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-*/ import React, { useState } from 'react';
-import { ChromePicker } from 'react-color';
-import { blockDefaultProps } from '@lowdefy/block-utils';
-import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
-const Selector = ({ blockId , loading , methods , properties , required , validation , value  })=>{
-    const [color, setColor] = useState(value || properties.defaultColor || '#000000');
-    return(/*#__PURE__*/ _jsx(Label, {
-        blockId: blockId,
-        loading: loading,
-        methods: methods,
-        properties: {
-            title: properties.title,
-            size: properties.size,
-            ...properties.label
-        },
-        required: required,
-        validation: validation,
-        content: {
-            content: ()=>/*#__PURE__*/ _jsx(ChromePicker, {
-                    id: `${blockId}_input`,
-                    className: methods.makeCssClass([
-                        {
-                            marginBottom: '0px !important'
-                        },
-                        properties.inputStyle, 
-                    ]),
-                    color: color && color[color.source] || color || '#000000',
-                    disableAlpha: properties.disableAlpha,
-                    onChange: (clr)=>setColor(clr)
-                    ,
-                    onChangeComplete: (clr)=>{
-                        setColor(clr);
-                        methods.setValue(clr);
-                        methods.triggerEvent({
-                            name: 'onChange'
-                        });
-                    }
-                })
-        }
-    }));
-};
-Selector.defaultProps = blockDefaultProps;
-Selector.meta = {
-    valueType: 'object',
-    category: 'input',
-    loading: {
-        type: 'Skeleton',
-        properties: {
-            width: 225,
-            height: 240
-        }
-    },
-    icons: [
-        ...Label.meta.icons
-    ],
-    styles: [
-        'blocks/ChromeColorSelector/style.less'
-    ]
-};
-export default Selector;

package/dist/blocks/ChromeColorSelector/schema.json

@@ -1,99 +0,0 @@
-{
-  "type": "object",
-  "properties": {
-    "type": "object",
-    "properties": {
-      "defaultColor": {
-        "type": "string",
-        "description": "Default color to display if input value is null.",
-        "docs": {
-          "displayType": "color"
-        }
-      },
-      "disableAlpha": {
-        "type": "boolean",
-        "description": "Remove alpha slider and options from picker."
-      },
-      "inputStyle": {
-        "type": "object",
-        "description": "Css style to applied to input.",
-        "docs": {
-          "displayType": "yaml"
-        }
-      },
-      "label": {
-        "type": "object",
-        "description": "Label properties.",
-        "additionalProperties": false,
-        "properties": {
-          "align": {
-            "type": "string",
-            "enum": ["left", "right"],
-            "default": "left",
-            "description": "Align label left or right when inline."
-          },
-          "colon": {
-            "type": "boolean",
-            "default": true,
-            "description": "Append label with colon."
-          },
-          "extra": {
-            "type": "string",
-            "description": "Extra text to display beneath the content."
-          },
-          "title": {
-            "type": "string",
-            "description": "Label title."
-          },
-          "span": {
-            "type": "number",
-            "description": "Label inline span."
-          },
-          "disabled": {
-            "type": "boolean",
-            "default": false,
-            "description": "Hide input label."
-          },
-          "hasFeedback": {
-            "type": "boolean",
-            "default": true,
-            "description": "Display feedback extra from validation, this does not disable validation."
-          },
-          "inline": {
-            "type": "boolean",
-            "default": false,
-            "description": "Render input and label inline."
-          },
-          "extraStyle": {
-            "type": "object",
-            "description": "Css style to applied to label extra.",
-            "docs": {
-              "displayType": "yaml"
-            }
-          },
-          "feedbackStyle": {
-            "type": "object",
-            "description": "Css style to applied to label feedback.",
-            "docs": {
-              "displayType": "yaml"
-            }
-          }
-        }
-      },
-      "title": {
-        "type": "string",
-        "description": "Title to describe the input component, if no title is specified the block id is displayed."
-      }
-    }
-  },
-  "events": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {
-      "onChange": {
-        "type": "array",
-        "description": "Trigger actions when color is picked."
-      }
-    }
-  }
-}

package/dist/blocks/ChromeColorSelector/style.less

@@ -1,17 +0,0 @@
-/*
-  Copyright 2020-2021 Lowdefy, Inc
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-*/
-
-@import '@lowdefy/blocks-antd/blocks/Label/style.less'