@strapi/plugin-color-picker 0.0.0-next.ff946d2c25a3e577b47132a357cac2932eb8e635 → 0.0.0-next.ffc36acb308febe288f1a31b62cbbb75b286585c
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.
- package/LICENSE +34 -12
- package/dist/admin/components/ColorPickerIcon.js +31 -0
- package/dist/admin/components/ColorPickerIcon.js.map +1 -0
- package/dist/admin/components/ColorPickerIcon.mjs +29 -0
- package/dist/admin/components/ColorPickerIcon.mjs.map +1 -0
- package/dist/admin/components/ColorPickerInput.js +199 -0
- package/dist/admin/components/ColorPickerInput.js.map +1 -0
- package/dist/admin/components/ColorPickerInput.mjs +178 -0
- package/dist/admin/components/ColorPickerInput.mjs.map +1 -0
- package/dist/admin/index.js +108 -0
- package/dist/admin/index.js.map +1 -0
- package/dist/admin/index.mjs +104 -0
- package/dist/admin/index.mjs.map +1 -0
- package/dist/admin/pluginId.js +6 -0
- package/dist/admin/pluginId.js.map +1 -0
- package/dist/admin/pluginId.mjs +4 -0
- package/dist/admin/pluginId.mjs.map +1 -0
- package/dist/admin/src/components/ColorPickerIcon.d.ts +1 -0
- package/dist/admin/src/components/ColorPickerInput.d.ts +7 -0
- package/dist/admin/src/components/tests/ColorPickerInput.test.d.ts +1 -0
- package/dist/admin/src/index.d.ts +18 -0
- package/dist/admin/src/pluginId.d.ts +1 -0
- package/dist/admin/src/utils/getTrad.d.ts +1 -0
- package/dist/admin/src/utils/prefixPluginTranslations.d.ts +3 -0
- package/dist/admin/translations/cs.json.js +17 -0
- package/dist/admin/translations/cs.json.js.map +1 -0
- package/dist/admin/translations/cs.json.mjs +15 -0
- package/dist/admin/translations/cs.json.mjs.map +1 -0
- package/dist/admin/translations/en.json.js +20 -0
- package/dist/admin/translations/en.json.js.map +1 -0
- package/dist/admin/translations/en.json.mjs +18 -0
- package/dist/admin/translations/en.json.mjs.map +1 -0
- package/dist/admin/translations/ru.json.js +20 -0
- package/dist/admin/translations/ru.json.js.map +1 -0
- package/dist/admin/translations/ru.json.mjs +18 -0
- package/dist/admin/translations/ru.json.mjs.map +1 -0
- package/dist/admin/translations/sv.json.js +17 -0
- package/dist/admin/translations/sv.json.js.map +1 -0
- package/dist/admin/translations/sv.json.mjs +15 -0
- package/dist/admin/translations/sv.json.mjs.map +1 -0
- package/dist/admin/translations/tr.json.js +17 -0
- package/dist/admin/translations/tr.json.js.map +1 -0
- package/dist/admin/translations/tr.json.mjs +15 -0
- package/dist/admin/translations/tr.json.mjs.map +1 -0
- package/dist/admin/translations/uk.json.js +20 -0
- package/dist/admin/translations/uk.json.js.map +1 -0
- package/dist/admin/translations/uk.json.mjs +18 -0
- package/dist/admin/translations/uk.json.mjs.map +1 -0
- package/dist/admin/translations/zh.json.js +17 -0
- package/dist/admin/translations/zh.json.js.map +1 -0
- package/dist/admin/translations/zh.json.mjs +15 -0
- package/dist/admin/translations/zh.json.mjs.map +1 -0
- package/dist/admin/utils/getTrad.js +8 -0
- package/dist/admin/utils/getTrad.js.map +1 -0
- package/dist/admin/utils/getTrad.mjs +6 -0
- package/dist/admin/utils/getTrad.mjs.map +1 -0
- package/dist/admin/utils/prefixPluginTranslations.js +11 -0
- package/dist/admin/utils/prefixPluginTranslations.js.map +1 -0
- package/dist/admin/utils/prefixPluginTranslations.mjs +9 -0
- package/dist/admin/utils/prefixPluginTranslations.mjs.map +1 -0
- package/dist/server/index.js +10 -0
- package/dist/server/index.js.map +1 -0
- package/dist/server/index.mjs +8 -0
- package/dist/server/index.mjs.map +1 -0
- package/dist/server/register.js +12 -0
- package/dist/server/register.js.map +1 -0
- package/dist/server/register.mjs +10 -0
- package/dist/server/register.mjs.map +1 -0
- package/dist/server/src/index.d.ts +5 -0
- package/dist/server/src/index.d.ts.map +1 -0
- package/dist/server/src/register.d.ts +2 -0
- package/dist/server/src/register.d.ts.map +1 -0
- package/package.json +67 -38
- package/.eslintignore +0 -2
- package/.eslintrc.js +0 -14
- package/admin/src/components/ColorPicker/ColorPickerIcon/index.js +0 -25
- package/admin/src/components/ColorPicker/ColorPickerInput/index.js +0 -205
- package/admin/src/components/tests/__snapshots__/color-picker-input.test.js.snap +0 -238
- package/admin/src/components/tests/color-picker-input.test.js +0 -63
- package/admin/src/index.js +0 -87
- package/admin/src/pluginId.js +0 -5
- package/admin/src/translations/cs.json +0 -12
- package/admin/src/translations/en.json +0 -15
- package/admin/src/translations/ru.json +0 -15
- package/admin/src/translations/sv.json +0 -12
- package/admin/src/translations/tr.json +0 -12
- package/admin/src/translations/zh.json +0 -12
- package/admin/src/utils/getTrad.js +0 -5
- package/color-picker.png +0 -0
- package/jest.config.front.js +0 -6
- package/server/index.js +0 -7
- package/server/register.js +0 -9
- package/strapi-admin.js +0 -3
- package/strapi-server.js +0 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"zh.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getTrad.js","sources":["../../../admin/src/utils/getTrad.ts"],"sourcesContent":["import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n"],"names":["getTrad","id","pluginId"],"mappings":";;;;AAEO,MAAMA,OAAU,GAAA,CAACC,EAAe,GAAA,CAAC,EAAEC,iBAAAA,CAAS,CAAC,EAAED,EAAG,CAAA;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getTrad.mjs","sources":["../../../admin/src/utils/getTrad.ts"],"sourcesContent":["import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n"],"names":["getTrad","id","pluginId"],"mappings":";;AAEO,MAAMA,OAAU,GAAA,CAACC,EAAe,GAAA,CAAC,EAAEC,QAAAA,CAAS,CAAC,EAAED,EAAG,CAAA;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const prefixPluginTranslations = (trad, pluginId)=>{
|
|
4
|
+
return Object.keys(trad).reduce((acc, current)=>{
|
|
5
|
+
acc[`${pluginId}.${current}`] = trad[current];
|
|
6
|
+
return acc;
|
|
7
|
+
}, {});
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
exports.prefixPluginTranslations = prefixPluginTranslations;
|
|
11
|
+
//# sourceMappingURL=prefixPluginTranslations.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prefixPluginTranslations.js","sources":["../../../admin/src/utils/prefixPluginTranslations.ts"],"sourcesContent":["type TradOptions = Record<string, string>;\n\nconst prefixPluginTranslations = (trad: TradOptions, pluginId: string): TradOptions => {\n if (!pluginId) {\n throw new TypeError(\"pluginId can't be empty\");\n }\n return Object.keys(trad).reduce((acc, current) => {\n acc[`${pluginId}.${current}`] = trad[current];\n return acc;\n }, {} as TradOptions);\n};\n\nexport { prefixPluginTranslations };\n"],"names":["prefixPluginTranslations","trad","pluginId","Object","keys","reduce","acc","current"],"mappings":";;AAEMA,MAAAA,wBAAAA,GAA2B,CAACC,IAAmBC,EAAAA,QAAAA,GAAAA;AAInD,IAAA,OAAOC,OAAOC,IAAI,CAACH,MAAMI,MAAM,CAAC,CAACC,GAAKC,EAAAA,OAAAA,GAAAA;AACpCD,QAAAA,GAAG,CAAC,CAAC,EAAEJ,QAAAA,CAAS,CAAC,EAAEK,OAAQ,CAAA,CAAC,CAAC,GAAGN,IAAI,CAACM,OAAQ,CAAA;QAC7C,OAAOD,GAAAA;AACT,KAAA,EAAG,EAAC,CAAA;AACN;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const prefixPluginTranslations = (trad, pluginId)=>{
|
|
2
|
+
return Object.keys(trad).reduce((acc, current)=>{
|
|
3
|
+
acc[`${pluginId}.${current}`] = trad[current];
|
|
4
|
+
return acc;
|
|
5
|
+
}, {});
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export { prefixPluginTranslations };
|
|
9
|
+
//# sourceMappingURL=prefixPluginTranslations.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prefixPluginTranslations.mjs","sources":["../../../admin/src/utils/prefixPluginTranslations.ts"],"sourcesContent":["type TradOptions = Record<string, string>;\n\nconst prefixPluginTranslations = (trad: TradOptions, pluginId: string): TradOptions => {\n if (!pluginId) {\n throw new TypeError(\"pluginId can't be empty\");\n }\n return Object.keys(trad).reduce((acc, current) => {\n acc[`${pluginId}.${current}`] = trad[current];\n return acc;\n }, {} as TradOptions);\n};\n\nexport { prefixPluginTranslations };\n"],"names":["prefixPluginTranslations","trad","pluginId","Object","keys","reduce","acc","current"],"mappings":"AAEMA,MAAAA,wBAAAA,GAA2B,CAACC,IAAmBC,EAAAA,QAAAA,GAAAA;AAInD,IAAA,OAAOC,OAAOC,IAAI,CAACH,MAAMI,MAAM,CAAC,CAACC,GAAKC,EAAAA,OAAAA,GAAAA;AACpCD,QAAAA,GAAG,CAAC,CAAC,EAAEJ,QAAAA,CAAS,CAAC,EAAEK,OAAQ,CAAA,CAAC,CAAC,GAAGN,IAAI,CAACM,OAAQ,CAAA;QAC7C,OAAOD,GAAAA;AACT,KAAA,EAAG,EAAC,CAAA;AACN;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../server/src/index.ts"],"sourcesContent":["import { register } from './register';\n\nexport default {\n register,\n};\n"],"names":["register"],"mappings":";;;;AAEA,YAAe;AACbA,cAAAA;AACF,CAAE;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../server/src/index.ts"],"sourcesContent":["import { register } from './register';\n\nexport default {\n register,\n};\n"],"names":["register"],"mappings":";;AAEA,YAAe;AACbA,IAAAA;AACF,CAAE;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"register.js","sources":["../../server/src/register.ts"],"sourcesContent":["export const register = ({ strapi }: any) => {\n strapi.customFields.register({\n name: 'color',\n plugin: 'color-picker',\n type: 'string',\n });\n};\n"],"names":["register","strapi","customFields","name","plugin","type"],"mappings":";;AAAaA,MAAAA,QAAAA,GAAW,CAAC,EAAEC,MAAM,EAAO,GAAA;IACtCA,MAAOC,CAAAA,YAAY,CAACF,QAAQ,CAAC;QAC3BG,IAAM,EAAA,OAAA;QACNC,MAAQ,EAAA,cAAA;QACRC,IAAM,EAAA;AACR,KAAA,CAAA;AACF;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"register.mjs","sources":["../../server/src/register.ts"],"sourcesContent":["export const register = ({ strapi }: any) => {\n strapi.customFields.register({\n name: 'color',\n plugin: 'color-picker',\n type: 'string',\n });\n};\n"],"names":["register","strapi","customFields","name","plugin","type"],"mappings":"AAAaA,MAAAA,QAAAA,GAAW,CAAC,EAAEC,MAAM,EAAO,GAAA;IACtCA,MAAOC,CAAAA,YAAY,CAACF,QAAQ,CAAC;QAC3BG,IAAM,EAAA,OAAA;QACNC,MAAQ,EAAA,cAAA;QACRC,IAAM,EAAA;AACR,KAAA,CAAA;AACF;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../server/src/index.ts"],"names":[],"mappings":";;;AAEA,wBAEE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../../../server/src/register.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,eAAgB,GAAG,SAMvC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,42 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/plugin-color-picker",
|
|
3
|
-
"version": "0.0.0-next.
|
|
3
|
+
"version": "0.0.0-next.ffc36acb308febe288f1a31b62cbbb75b286585c",
|
|
4
4
|
"description": "Strapi maintained Custom Fields",
|
|
5
|
-
"strapi": {
|
|
6
|
-
"name": "color-picker",
|
|
7
|
-
"description": "Color picker custom field",
|
|
8
|
-
"kind": "plugin",
|
|
9
|
-
"displayName": "Color Picker"
|
|
10
|
-
},
|
|
11
|
-
"dependencies": {
|
|
12
|
-
"@strapi/design-system": "1.7.7",
|
|
13
|
-
"@strapi/helper-plugin": "0.0.0-next.ff946d2c25a3e577b47132a357cac2932eb8e635",
|
|
14
|
-
"@strapi/icons": "1.7.7",
|
|
15
|
-
"prop-types": "^15.8.1",
|
|
16
|
-
"react-colorful": "5.6.1",
|
|
17
|
-
"react-intl": "6.4.1"
|
|
18
|
-
},
|
|
19
|
-
"devDependencies": {
|
|
20
|
-
"@testing-library/react": "12.1.4",
|
|
21
|
-
"react": "^17.0.2",
|
|
22
|
-
"react-dom": "^17.0.2",
|
|
23
|
-
"react-router-dom": "5.3.4",
|
|
24
|
-
"styled-components": "5.3.3"
|
|
25
|
-
},
|
|
26
|
-
"peerDependencies": {
|
|
27
|
-
"@strapi/strapi": "^4.4.0",
|
|
28
|
-
"react": "^17.0.2",
|
|
29
|
-
"react-dom": "^17.0.2",
|
|
30
|
-
"react-router-dom": "^5.3.4",
|
|
31
|
-
"styled-components": "^5.3.3"
|
|
32
|
-
},
|
|
33
|
-
"scripts": {
|
|
34
|
-
"test:front": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js",
|
|
35
|
-
"test:front:watch": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js --watchAll",
|
|
36
|
-
"test:front:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js",
|
|
37
|
-
"test:front:watch:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll",
|
|
38
|
-
"lint": "run -T eslint ."
|
|
39
|
-
},
|
|
40
5
|
"repository": {
|
|
41
6
|
"type": "git",
|
|
42
7
|
"url": "https://github.com/strapi/strapi.git",
|
|
@@ -55,9 +20,73 @@
|
|
|
55
20
|
"url": "https://strapi.io"
|
|
56
21
|
}
|
|
57
22
|
],
|
|
23
|
+
"exports": {
|
|
24
|
+
"./strapi-admin": {
|
|
25
|
+
"types": "./dist/admin/src/index.d.ts",
|
|
26
|
+
"source": "./admin/src/index.ts",
|
|
27
|
+
"import": "./dist/admin/index.mjs",
|
|
28
|
+
"require": "./dist/admin/index.js",
|
|
29
|
+
"default": "./dist/admin/index.js"
|
|
30
|
+
},
|
|
31
|
+
"./strapi-server": {
|
|
32
|
+
"types": "./dist/server/src/index.d.ts",
|
|
33
|
+
"source": "./server/src/index.ts",
|
|
34
|
+
"import": "./dist/server/index.mjs",
|
|
35
|
+
"require": "./dist/server/index.js",
|
|
36
|
+
"default": "./dist/server/index.js"
|
|
37
|
+
},
|
|
38
|
+
"./package.json": "./package.json"
|
|
39
|
+
},
|
|
40
|
+
"files": [
|
|
41
|
+
"dist/",
|
|
42
|
+
"strapi-server.js"
|
|
43
|
+
],
|
|
44
|
+
"scripts": {
|
|
45
|
+
"build": "run -T npm-run-all clean --parallel build:code build:types",
|
|
46
|
+
"build:code": "run -T rollup -c",
|
|
47
|
+
"build:types": "run -T run-p build:types:server build:types:admin",
|
|
48
|
+
"build:types:server": "run -T tsc -p server/tsconfig.build.json --emitDeclarationOnly",
|
|
49
|
+
"build:types:admin": "run -T tsc -p admin/tsconfig.build.json --emitDeclarationOnly",
|
|
50
|
+
"clean": "run -T rimraf ./dist",
|
|
51
|
+
"lint": "run -T eslint .",
|
|
52
|
+
"test:front": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js",
|
|
53
|
+
"test:front:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js",
|
|
54
|
+
"test:front:watch": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js --watchAll",
|
|
55
|
+
"test:front:watch:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll",
|
|
56
|
+
"test:ts:front": "run -T tsc -p admin/tsconfig.json",
|
|
57
|
+
"watch": "run -T rollup -c -w"
|
|
58
|
+
},
|
|
59
|
+
"dependencies": {
|
|
60
|
+
"@strapi/design-system": "2.0.0-rc.29",
|
|
61
|
+
"@strapi/icons": "2.0.0-rc.29",
|
|
62
|
+
"react-colorful": "5.6.1",
|
|
63
|
+
"react-intl": "6.6.2"
|
|
64
|
+
},
|
|
65
|
+
"devDependencies": {
|
|
66
|
+
"@strapi/strapi": "0.0.0-next.ffc36acb308febe288f1a31b62cbbb75b286585c",
|
|
67
|
+
"@testing-library/react": "15.0.7",
|
|
68
|
+
"@testing-library/user-event": "14.5.2",
|
|
69
|
+
"react": "18.3.1",
|
|
70
|
+
"react-dom": "18.3.1",
|
|
71
|
+
"react-router-dom": "6.22.3",
|
|
72
|
+
"styled-components": "6.1.8",
|
|
73
|
+
"typescript": "5.4.4"
|
|
74
|
+
},
|
|
75
|
+
"peerDependencies": {
|
|
76
|
+
"@strapi/strapi": "^5.0.0",
|
|
77
|
+
"react": "^17.0.0 || ^18.0.0",
|
|
78
|
+
"react-dom": "^17.0.0 || ^18.0.0",
|
|
79
|
+
"react-router-dom": "^6.0.0",
|
|
80
|
+
"styled-components": "^6.0.0"
|
|
81
|
+
},
|
|
58
82
|
"engines": {
|
|
59
|
-
"node": ">=
|
|
83
|
+
"node": ">=18.0.0 <=22.x.x",
|
|
60
84
|
"npm": ">=6.0.0"
|
|
61
85
|
},
|
|
62
|
-
"
|
|
86
|
+
"strapi": {
|
|
87
|
+
"name": "color-picker",
|
|
88
|
+
"description": "Color picker custom field",
|
|
89
|
+
"kind": "plugin",
|
|
90
|
+
"displayName": "Color Picker"
|
|
91
|
+
}
|
|
63
92
|
}
|
package/.eslintignore
DELETED
package/.eslintrc.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { Icon, Flex } from '@strapi/design-system';
|
|
4
|
-
import { Paint } from '@strapi/icons';
|
|
5
|
-
|
|
6
|
-
const IconBox = styled(Flex)`
|
|
7
|
-
/* Hard code color values */
|
|
8
|
-
/* to stay consistent between themes */
|
|
9
|
-
background-color: #f0f0ff; /* primary100 */
|
|
10
|
-
border: 1px solid #d9d8ff; /* primary200 */
|
|
11
|
-
|
|
12
|
-
svg > path {
|
|
13
|
-
fill: #4945ff; /* primary600 */
|
|
14
|
-
}
|
|
15
|
-
`;
|
|
16
|
-
|
|
17
|
-
const ColorPickerIcon = () => {
|
|
18
|
-
return (
|
|
19
|
-
<IconBox justifyContent="center" alignItems="center" width={7} height={6} hasRadius aria-hidden>
|
|
20
|
-
<Icon as={Paint} />
|
|
21
|
-
</IconBox>
|
|
22
|
-
);
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
export default ColorPickerIcon;
|
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
import React, { useState, useRef } from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import styled from 'styled-components';
|
|
4
|
-
import {
|
|
5
|
-
Typography,
|
|
6
|
-
Flex,
|
|
7
|
-
Box,
|
|
8
|
-
BaseButton,
|
|
9
|
-
FocusTrap,
|
|
10
|
-
Field,
|
|
11
|
-
FieldHint,
|
|
12
|
-
FieldError,
|
|
13
|
-
FieldLabel,
|
|
14
|
-
FieldInput,
|
|
15
|
-
Popover,
|
|
16
|
-
} from '@strapi/design-system';
|
|
17
|
-
import { CarretDown } from '@strapi/icons';
|
|
18
|
-
import { useIntl } from 'react-intl';
|
|
19
|
-
import { HexColorPicker } from 'react-colorful';
|
|
20
|
-
|
|
21
|
-
import getTrad from '../../../utils/getTrad';
|
|
22
|
-
|
|
23
|
-
const ColorPreview = styled.div`
|
|
24
|
-
border-radius: 50%;
|
|
25
|
-
width: 20px;
|
|
26
|
-
height: 20px;
|
|
27
|
-
margin-right: 10px;
|
|
28
|
-
background-color: ${(props) => props.color};
|
|
29
|
-
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
30
|
-
`;
|
|
31
|
-
|
|
32
|
-
const ColorPicker = styled(HexColorPicker)`
|
|
33
|
-
&& {
|
|
34
|
-
width: 100%;
|
|
35
|
-
aspect-ratio: 1.5;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.react-colorful__pointer {
|
|
39
|
-
width: ${({ theme }) => theme.spaces[3]};
|
|
40
|
-
height: ${({ theme }) => theme.spaces[3]};
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.react-colorful__saturation {
|
|
44
|
-
border-radius: ${({ theme }) => theme.spaces[1]};
|
|
45
|
-
border-bottom: none;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.react-colorful__hue {
|
|
49
|
-
border-radius: 10px;
|
|
50
|
-
height: ${({ theme }) => theme.spaces[3]};
|
|
51
|
-
margin-top: ${({ theme }) => theme.spaces[2]};
|
|
52
|
-
}
|
|
53
|
-
`;
|
|
54
|
-
|
|
55
|
-
const ColorPickerToggle = styled(BaseButton)`
|
|
56
|
-
display: flex;
|
|
57
|
-
justify-content: space-between;
|
|
58
|
-
align-items: center;
|
|
59
|
-
|
|
60
|
-
svg {
|
|
61
|
-
width: ${({ theme }) => theme.spaces[2]};
|
|
62
|
-
height: ${({ theme }) => theme.spaces[2]};
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
svg > path {
|
|
66
|
-
fill: ${({ theme }) => theme.colors.neutral500};
|
|
67
|
-
justify-self: flex-end;
|
|
68
|
-
}
|
|
69
|
-
`;
|
|
70
|
-
|
|
71
|
-
const ColorPickerPopover = styled(Popover)`
|
|
72
|
-
padding: ${({ theme }) => theme.spaces[2]};
|
|
73
|
-
min-height: 270px;
|
|
74
|
-
`;
|
|
75
|
-
|
|
76
|
-
const ColorPickerInput = ({
|
|
77
|
-
attribute,
|
|
78
|
-
description,
|
|
79
|
-
disabled,
|
|
80
|
-
error,
|
|
81
|
-
intlLabel,
|
|
82
|
-
labelAction,
|
|
83
|
-
name,
|
|
84
|
-
onChange,
|
|
85
|
-
required,
|
|
86
|
-
value,
|
|
87
|
-
}) => {
|
|
88
|
-
const [showColorPicker, setShowColorPicker] = useState(false);
|
|
89
|
-
const colorPickerButtonRef = useRef();
|
|
90
|
-
const { formatMessage } = useIntl();
|
|
91
|
-
const color = value || '#000000';
|
|
92
|
-
const styleUppercase = { textTransform: 'uppercase' };
|
|
93
|
-
|
|
94
|
-
const handleBlur = (e) => {
|
|
95
|
-
e.preventDefault();
|
|
96
|
-
|
|
97
|
-
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
98
|
-
setShowColorPicker(false);
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
return (
|
|
103
|
-
<Field
|
|
104
|
-
name={name}
|
|
105
|
-
id={name}
|
|
106
|
-
// GenericInput calls formatMessage and returns a string for the error
|
|
107
|
-
error={error}
|
|
108
|
-
hint={description && formatMessage(description)}
|
|
109
|
-
required={required}
|
|
110
|
-
>
|
|
111
|
-
<Flex direction="column" alignItems="stretch" gap={1}>
|
|
112
|
-
<FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>
|
|
113
|
-
<ColorPickerToggle
|
|
114
|
-
ref={colorPickerButtonRef}
|
|
115
|
-
aria-label={formatMessage({
|
|
116
|
-
id: getTrad('color-picker.toggle.aria-label'),
|
|
117
|
-
defaultMessage: 'Color picker toggle',
|
|
118
|
-
})}
|
|
119
|
-
aria-controls="color-picker-value"
|
|
120
|
-
aria-haspopup="dialog"
|
|
121
|
-
aria-expanded={showColorPicker}
|
|
122
|
-
aria-disabled={disabled}
|
|
123
|
-
disabled={disabled}
|
|
124
|
-
onClick={() => setShowColorPicker(!showColorPicker)}
|
|
125
|
-
>
|
|
126
|
-
<Flex>
|
|
127
|
-
<ColorPreview color={color} />
|
|
128
|
-
<Typography
|
|
129
|
-
style={styleUppercase}
|
|
130
|
-
textColor={value ? null : 'neutral600'}
|
|
131
|
-
variant="omega"
|
|
132
|
-
>
|
|
133
|
-
{color}
|
|
134
|
-
</Typography>
|
|
135
|
-
</Flex>
|
|
136
|
-
<CarretDown aria-hidden />
|
|
137
|
-
</ColorPickerToggle>
|
|
138
|
-
{showColorPicker && (
|
|
139
|
-
<ColorPickerPopover
|
|
140
|
-
onBlur={handleBlur}
|
|
141
|
-
role="dialog"
|
|
142
|
-
source={colorPickerButtonRef}
|
|
143
|
-
spacing={4}
|
|
144
|
-
>
|
|
145
|
-
<FocusTrap onEscape={() => setShowColorPicker(false)}>
|
|
146
|
-
<ColorPicker
|
|
147
|
-
color={color}
|
|
148
|
-
onChange={(hexValue) =>
|
|
149
|
-
onChange({ target: { name, value: hexValue, type: attribute.type } })
|
|
150
|
-
}
|
|
151
|
-
/>
|
|
152
|
-
<Flex paddingTop={3} paddingLeft={4} justifyContent="flex-end">
|
|
153
|
-
<Box paddingRight={2}>
|
|
154
|
-
<Typography variant="omega" as="label" textColor="neutral600">
|
|
155
|
-
{formatMessage({
|
|
156
|
-
id: getTrad('color-picker.input.format'),
|
|
157
|
-
defaultMessage: 'HEX',
|
|
158
|
-
})}
|
|
159
|
-
</Typography>
|
|
160
|
-
</Box>
|
|
161
|
-
<FieldInput
|
|
162
|
-
id="color-picker-value"
|
|
163
|
-
aria-label={formatMessage({
|
|
164
|
-
id: getTrad('color-picker.input.aria-label'),
|
|
165
|
-
defaultMessage: 'Color picker input',
|
|
166
|
-
})}
|
|
167
|
-
style={styleUppercase}
|
|
168
|
-
value={value}
|
|
169
|
-
placeholder="#000000"
|
|
170
|
-
onChange={onChange}
|
|
171
|
-
/>
|
|
172
|
-
</Flex>
|
|
173
|
-
</FocusTrap>
|
|
174
|
-
</ColorPickerPopover>
|
|
175
|
-
)}
|
|
176
|
-
<FieldHint />
|
|
177
|
-
<FieldError />
|
|
178
|
-
</Flex>
|
|
179
|
-
</Field>
|
|
180
|
-
);
|
|
181
|
-
};
|
|
182
|
-
|
|
183
|
-
ColorPickerInput.defaultProps = {
|
|
184
|
-
description: null,
|
|
185
|
-
disabled: false,
|
|
186
|
-
error: null,
|
|
187
|
-
labelAction: null,
|
|
188
|
-
required: false,
|
|
189
|
-
value: '',
|
|
190
|
-
};
|
|
191
|
-
|
|
192
|
-
ColorPickerInput.propTypes = {
|
|
193
|
-
intlLabel: PropTypes.object.isRequired,
|
|
194
|
-
onChange: PropTypes.func.isRequired,
|
|
195
|
-
attribute: PropTypes.object.isRequired,
|
|
196
|
-
name: PropTypes.string.isRequired,
|
|
197
|
-
description: PropTypes.object,
|
|
198
|
-
disabled: PropTypes.bool,
|
|
199
|
-
error: PropTypes.string,
|
|
200
|
-
labelAction: PropTypes.object,
|
|
201
|
-
required: PropTypes.bool,
|
|
202
|
-
value: PropTypes.string,
|
|
203
|
-
};
|
|
204
|
-
|
|
205
|
-
export default ColorPickerInput;
|