@lowdefy/blocks-color-selectors 4.0.0-alpha.9 → 4.0.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -17,16 +17,15 @@ import { HexColorPicker, HexColorInput } from 'react-colorful';
|
|
|
17
17
|
import classNames from 'classnames';
|
|
18
18
|
import useClickOutside from './useClickOutside.js';
|
|
19
19
|
const DEFAULT_COLOR = '#000000';
|
|
20
|
-
export const ColorPicker = ({ className , disabled , hideInput , onChange , size ,
|
|
20
|
+
export const ColorPicker = ({ className , disabled , hideInput , onChange , size , value =DEFAULT_COLOR , })=>{
|
|
21
21
|
const popover = useRef();
|
|
22
22
|
const [isOpen, toggle] = useState(false);
|
|
23
|
-
const [color, setColor] = useState(value || undefinedColor || DEFAULT_COLOR);
|
|
24
23
|
const close = useCallback((newColor)=>{
|
|
25
24
|
toggle(false);
|
|
26
25
|
onChange(newColor);
|
|
27
26
|
}, []);
|
|
28
|
-
useClickOutside(popover, close,
|
|
29
|
-
return
|
|
27
|
+
useClickOutside(popover, close, value);
|
|
28
|
+
return /*#__PURE__*/ React.createElement("div", {
|
|
30
29
|
className: classNames({
|
|
31
30
|
'color-picker': true,
|
|
32
31
|
[className]: true
|
|
@@ -39,7 +38,7 @@ export const ColorPicker = ({ className , disabled , hideInput , onChange , size
|
|
|
39
38
|
'color-picker-swatch-disabled': disabled
|
|
40
39
|
}),
|
|
41
40
|
style: {
|
|
42
|
-
backgroundColor:
|
|
41
|
+
backgroundColor: value
|
|
43
42
|
},
|
|
44
43
|
onClick: ()=>!disabled && toggle(true)
|
|
45
44
|
}), !hideInput && /*#__PURE__*/ React.createElement(HexColorInput, {
|
|
@@ -51,9 +50,8 @@ export const ColorPicker = ({ className , disabled , hideInput , onChange , size
|
|
|
51
50
|
'ant-input-sm': size === 'small',
|
|
52
51
|
'ant-input-lg': size === 'large'
|
|
53
52
|
}),
|
|
54
|
-
color:
|
|
53
|
+
color: value || '',
|
|
55
54
|
onChange: (newColor)=>{
|
|
56
|
-
setColor(newColor);
|
|
57
55
|
onChange(newColor);
|
|
58
56
|
},
|
|
59
57
|
prefixed: true,
|
|
@@ -62,8 +60,8 @@ export const ColorPicker = ({ className , disabled , hideInput , onChange , size
|
|
|
62
60
|
className: "color-picker-popover",
|
|
63
61
|
ref: popover
|
|
64
62
|
}, /*#__PURE__*/ React.createElement(HexColorPicker, {
|
|
65
|
-
color:
|
|
66
|
-
onChange:
|
|
67
|
-
})))
|
|
63
|
+
color: value || DEFAULT_COLOR,
|
|
64
|
+
onChange: onChange
|
|
65
|
+
})));
|
|
68
66
|
};
|
|
69
67
|
export default ColorPicker;
|
|
@@ -17,7 +17,7 @@ import { blockDefaultProps } from '@lowdefy/block-utils';
|
|
|
17
17
|
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
|
18
18
|
import ColorPicker from './ColorPicker.js';
|
|
19
19
|
const ColorSelector = ({ blockId , components , events , loading , methods , properties , required , validation , value , })=>{
|
|
20
|
-
return
|
|
20
|
+
return /*#__PURE__*/ React.createElement(Label, {
|
|
21
21
|
blockId: blockId,
|
|
22
22
|
components: components,
|
|
23
23
|
events: events,
|
|
@@ -45,14 +45,13 @@ const ColorSelector = ({ blockId , components , events , loading , methods , pro
|
|
|
45
45
|
});
|
|
46
46
|
},
|
|
47
47
|
size: properties.size,
|
|
48
|
-
undefinedColor: properties.undefinedColor,
|
|
49
48
|
value: value,
|
|
50
49
|
hideInput: properties.hideInput,
|
|
51
50
|
disabled: properties.disabled || loading,
|
|
52
51
|
methods: methods
|
|
53
52
|
})
|
|
54
53
|
}
|
|
55
|
-
})
|
|
54
|
+
});
|
|
56
55
|
};
|
|
57
56
|
ColorSelector.defaultProps = blockDefaultProps;
|
|
58
57
|
ColorSelector.meta = {
|
|
@@ -7,14 +7,6 @@
|
|
|
7
7
|
"type": "string",
|
|
8
8
|
"description": "Title to describe the input component, if no title is specified the block id is displayed."
|
|
9
9
|
},
|
|
10
|
-
"undefinedColor": {
|
|
11
|
-
"type": "string",
|
|
12
|
-
"default": "#000000",
|
|
13
|
-
"description": "Default color to display if input value is null.",
|
|
14
|
-
"docs": {
|
|
15
|
-
"displayType": "color"
|
|
16
|
-
}
|
|
17
|
-
},
|
|
18
10
|
"inputStyle": {
|
|
19
11
|
"type": "object",
|
|
20
12
|
"description": "Css style to applied to input.",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lowdefy/blocks-color-selectors",
|
|
3
|
-
"version": "4.0.0-
|
|
3
|
+
"version": "4.0.0-rc.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "A Lowdefy color selector blocks based on react-color.",
|
|
6
6
|
"homepage": "https://lowdefy.com",
|
|
@@ -42,39 +42,39 @@
|
|
|
42
42
|
"dist/*"
|
|
43
43
|
],
|
|
44
44
|
"scripts": {
|
|
45
|
-
"build": "
|
|
45
|
+
"build": "swc src --out-dir dist --config-file ../../../../.swcrc --delete-dir-on-start && pnpm copyfiles",
|
|
46
46
|
"clean": "rm -rf dist",
|
|
47
47
|
"copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.yaml\" -e \"./src/**/*.snap\"",
|
|
48
|
-
"
|
|
49
|
-
"swc": "swc src --out-dir dist --config-file ../../../../.swcrc --delete-dir-on-start && yarn copyfiles",
|
|
48
|
+
"prepublishOnly": "pnpm build",
|
|
50
49
|
"test:watch": "jest --coverage --watch",
|
|
51
50
|
"test": "jest --coverage"
|
|
52
51
|
},
|
|
53
52
|
"dependencies": {
|
|
54
|
-
"@lowdefy/block-utils": "4.0.0-
|
|
55
|
-
"@lowdefy/blocks-antd": "4.0.0-
|
|
53
|
+
"@lowdefy/block-utils": "4.0.0-rc.0",
|
|
54
|
+
"@lowdefy/blocks-antd": "4.0.0-rc.0",
|
|
56
55
|
"classnames": "2.3.1",
|
|
57
|
-
"react": "
|
|
56
|
+
"react": "18.2.0",
|
|
58
57
|
"react-colorful": "5.5.1",
|
|
59
|
-
"react-dom": "
|
|
58
|
+
"react-dom": "18.2.0"
|
|
60
59
|
},
|
|
61
60
|
"devDependencies": {
|
|
62
|
-
"@emotion/jest": "11.
|
|
63
|
-
"@lowdefy/block-dev": "4.0.0-
|
|
64
|
-
"@
|
|
65
|
-
"@swc/
|
|
66
|
-
"@swc/
|
|
67
|
-
"@
|
|
68
|
-
"@testing-library/
|
|
69
|
-
"@testing-library/
|
|
61
|
+
"@emotion/jest": "11.9.1",
|
|
62
|
+
"@lowdefy/block-dev": "4.0.0-rc.0",
|
|
63
|
+
"@lowdefy/jest-yaml-transform": "4.0.0-rc.0",
|
|
64
|
+
"@swc/cli": "0.1.57",
|
|
65
|
+
"@swc/core": "1.2.194",
|
|
66
|
+
"@swc/jest": "0.2.21",
|
|
67
|
+
"@testing-library/dom": "8.13.0",
|
|
68
|
+
"@testing-library/react": "13.3.0",
|
|
69
|
+
"@testing-library/user-event": "14.2.0",
|
|
70
70
|
"copyfiles": "2.4.1",
|
|
71
|
-
"jest": "
|
|
72
|
-
"jest-canvas-mock": "2.
|
|
73
|
-
"jest-
|
|
74
|
-
"jest-
|
|
71
|
+
"jest": "28.1.0",
|
|
72
|
+
"jest-canvas-mock": "2.4.0",
|
|
73
|
+
"jest-environment-jsdom": "28.1.0",
|
|
74
|
+
"jest-serializer-html": "7.1.0"
|
|
75
75
|
},
|
|
76
76
|
"publishConfig": {
|
|
77
77
|
"access": "public"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "f6872d7ff6da421710096536fce7b2016ef8f35c"
|
|
80
80
|
}
|