@lowdefy/blocks-color-selectors 4.0.0-alpha.29 → 4.0.0-alpha.30

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

@@ -0,0 +1,68 @@
+/*
+  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 from 'react';
+import { blockDefaultProps } from '@lowdefy/block-utils';
+import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
+import ColorPicker from './ColorPicker.js';
+const ColorSelector = ({ blockId , components , events , loading , methods , properties , required , validation , value ,  })=>{
+    return /*#__PURE__*/ React.createElement(Label, {
+        blockId: blockId,
+        components: components,
+        events: events,
+        methods: methods,
+        properties: {
+            title: properties.title,
+            size: properties.size,
+            ...properties.label
+        },
+        required: required,
+        validation: validation,
+        content: {
+            content: ()=>/*#__PURE__*/ React.createElement(ColorPicker, {
+                    id: `${blockId}_input`,
+                    className: methods.makeCssClass([
+                        {
+                            marginBottom: '0px !important'
+                        },
+                        properties.inputStyle, 
+                    ]),
+                    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
+                })
+        }
+    });
+};
+ColorSelector.defaultProps = blockDefaultProps;
+ColorSelector.meta = {
+    valueType: 'string',
+    category: 'input',
+    icons: [
+        ...Label.meta.icons
+    ],
+    styles: [
+        'blocks/ColorSelector/style.less'
+    ]
+};
+export default ColorSelector;

package/dist/blocks/ColorSelector/schema.json

@@ -0,0 +1,106 @@
+{
+  "type": "object",
+  "properties": {
+    "type": "object",
+    "properties": {
+      "title": {
+        "type": "string",
+        "description": "Title to describe the input component, if no title is specified the block id is displayed."
+      },
+      "undefinedColor": {
+        "type": "string",
+        "default": "#000000",
+        "description": "Default color to display if input value is null.",
+        "docs": {
+          "displayType": "color"
+        }
+      },
+      "inputStyle": {
+        "type": "object",
+        "description": "Css style to applied to input.",
+        "docs": {
+          "displayType": "yaml"
+        }
+      },
+      "disabled": {
+        "type": "boolean",
+        "default": false,
+        "description": "If true, the input is disabled."
+      },
+      "hideInput": {
+        "type": "boolean",
+        "default": false,
+        "description": "If true, the input is hidden."
+      },
+      "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"
+            }
+          }
+        }
+      }
+    }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onChange": {
+        "type": "array",
+        "description": "Trigger actions when color is picked."
+      }
+    }
+  }
+}

package/dist/blocks/ColorSelector/style.less

@@ -0,0 +1,73 @@
+/*
+  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 '@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

@@ -0,0 +1,15 @@
+/*
+  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.
+*/ export { default as ColorSelector } from './blocks/ColorSelector/ColorSelector.js';

package/dist/types.js

@@ -0,0 +1,29 @@
+/* eslint-disable import/namespace */ /*
+  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 * as blocks from './blocks.js';
+const icons = {};
+const styles = {};
+Object.keys(blocks).forEach((block)=>{
+    icons[block] = blocks[block].meta.icons || [];
+    styles[block] = blocks[block].meta.styles || [];
+});
+export default {
+    blocks: Object.keys(blocks),
+    icons,
+    styles: {
+        default: [],
+        ...styles
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-color-selectors",
-  "version": "4.0.0-alpha.29",
+  "version": "4.0.0-alpha.30",
   "license": "Apache-2.0",
   "description": "A Lowdefy color selector blocks based on react-color.",
   "homepage": "https://lowdefy.com",
@@ -50,8 +50,8 @@
     "test": "jest --coverage"
   },
   "dependencies": {
-    "@lowdefy/block-utils": "4.0.0-alpha.29",
-    "@lowdefy/blocks-antd": "4.0.0-alpha.29",
+    "@lowdefy/block-utils": "4.0.0-alpha.30",
+    "@lowdefy/blocks-antd": "4.0.0-alpha.30",
     "classnames": "2.3.1",
     "react": "18.1.0",
     "react-colorful": "5.5.1",
@@ -59,8 +59,8 @@
   },
   "devDependencies": {
     "@emotion/jest": "11.9.1",
-    "@lowdefy/block-dev": "4.0.0-alpha.29",
-    "@lowdefy/jest-yaml-transform": "4.0.0-alpha.29",
+    "@lowdefy/block-dev": "4.0.0-alpha.30",
+    "@lowdefy/jest-yaml-transform": "4.0.0-alpha.30",
     "@swc/cli": "0.1.57",
     "@swc/core": "1.2.194",
     "@swc/jest": "0.2.21",
@@ -76,5 +76,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "621a191ebc0a1569ee6669dc74c12f8be5a8c7f3"
+  "gitHead": "c30cc4e28e221d9b73385cca8d339397d60da0e1"
 }