@strapi/plugin-color-picker 0.0.0-next.ce51df0e18404afc8a1aa7f504c1006a7a221459 → 0.0.0-next.ce5699024a72ea224891438d5bbe39f904ec6774

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.
Files changed (89) hide show
  1. package/LICENSE +34 -12
  2. package/dist/admin/components/ColorPickerIcon.js +31 -0
  3. package/dist/admin/components/ColorPickerIcon.js.map +1 -0
  4. package/dist/admin/components/ColorPickerIcon.mjs +29 -0
  5. package/dist/admin/components/ColorPickerIcon.mjs.map +1 -0
  6. package/dist/admin/components/ColorPickerInput.js +199 -0
  7. package/dist/admin/components/ColorPickerInput.js.map +1 -0
  8. package/dist/admin/components/ColorPickerInput.mjs +178 -0
  9. package/dist/admin/components/ColorPickerInput.mjs.map +1 -0
  10. package/dist/admin/index.js +108 -0
  11. package/dist/admin/index.js.map +1 -0
  12. package/dist/admin/index.mjs +104 -0
  13. package/dist/admin/index.mjs.map +1 -0
  14. package/dist/admin/pluginId.js +6 -0
  15. package/dist/admin/pluginId.js.map +1 -0
  16. package/dist/admin/pluginId.mjs +4 -0
  17. package/dist/admin/pluginId.mjs.map +1 -0
  18. package/dist/admin/src/components/ColorPickerIcon.d.ts +1 -0
  19. package/dist/admin/src/components/ColorPickerInput.d.ts +7 -0
  20. package/dist/admin/src/components/tests/ColorPickerInput.test.d.ts +1 -0
  21. package/dist/admin/src/index.d.ts +18 -0
  22. package/dist/admin/src/pluginId.d.ts +1 -0
  23. package/dist/admin/src/utils/getTrad.d.ts +1 -0
  24. package/dist/admin/src/utils/prefixPluginTranslations.d.ts +3 -0
  25. package/dist/admin/translations/cs.json.js +17 -0
  26. package/dist/admin/translations/cs.json.js.map +1 -0
  27. package/dist/admin/translations/cs.json.mjs +15 -0
  28. package/dist/admin/translations/cs.json.mjs.map +1 -0
  29. package/dist/admin/translations/en.json.js +20 -0
  30. package/dist/admin/translations/en.json.js.map +1 -0
  31. package/dist/admin/translations/en.json.mjs +18 -0
  32. package/dist/admin/translations/en.json.mjs.map +1 -0
  33. package/dist/admin/translations/ru.json.js +20 -0
  34. package/dist/admin/translations/ru.json.js.map +1 -0
  35. package/dist/admin/translations/ru.json.mjs +18 -0
  36. package/dist/admin/translations/ru.json.mjs.map +1 -0
  37. package/dist/admin/translations/sv.json.js +17 -0
  38. package/dist/admin/translations/sv.json.js.map +1 -0
  39. package/dist/admin/translations/sv.json.mjs +15 -0
  40. package/dist/admin/translations/sv.json.mjs.map +1 -0
  41. package/dist/admin/translations/tr.json.js +17 -0
  42. package/dist/admin/translations/tr.json.js.map +1 -0
  43. package/dist/admin/translations/tr.json.mjs +15 -0
  44. package/dist/admin/translations/tr.json.mjs.map +1 -0
  45. package/dist/admin/translations/uk.json.js +20 -0
  46. package/dist/admin/translations/uk.json.js.map +1 -0
  47. package/dist/admin/translations/uk.json.mjs +18 -0
  48. package/dist/admin/translations/uk.json.mjs.map +1 -0
  49. package/dist/admin/translations/zh.json.js +17 -0
  50. package/dist/admin/translations/zh.json.js.map +1 -0
  51. package/dist/admin/translations/zh.json.mjs +15 -0
  52. package/dist/admin/translations/zh.json.mjs.map +1 -0
  53. package/dist/admin/utils/getTrad.js +8 -0
  54. package/dist/admin/utils/getTrad.js.map +1 -0
  55. package/dist/admin/utils/getTrad.mjs +6 -0
  56. package/dist/admin/utils/getTrad.mjs.map +1 -0
  57. package/dist/admin/utils/prefixPluginTranslations.js +11 -0
  58. package/dist/admin/utils/prefixPluginTranslations.js.map +1 -0
  59. package/dist/admin/utils/prefixPluginTranslations.mjs +9 -0
  60. package/dist/admin/utils/prefixPluginTranslations.mjs.map +1 -0
  61. package/dist/server/index.js +9 -6
  62. package/dist/server/index.js.map +1 -1
  63. package/dist/server/index.mjs +8 -0
  64. package/dist/server/index.mjs.map +1 -0
  65. package/dist/server/register.js +6 -6
  66. package/dist/server/register.js.map +1 -1
  67. package/dist/server/register.mjs +10 -0
  68. package/dist/server/register.mjs.map +1 -0
  69. package/dist/server/{index.d.ts → src/index.d.ts} +1 -0
  70. package/dist/server/src/index.d.ts.map +1 -0
  71. package/dist/server/{register.d.ts → src/register.d.ts} +1 -0
  72. package/dist/server/src/register.d.ts.map +1 -0
  73. package/package.json +68 -49
  74. package/admin/src/components/ColorPicker/ColorPickerIcon/index.js +0 -26
  75. package/admin/src/components/ColorPicker/ColorPickerInput/index.js +0 -214
  76. package/admin/src/components/tests/__snapshots__/color-picker-input.test.js.snap +0 -238
  77. package/admin/src/components/tests/color-picker-input.test.js +0 -65
  78. package/admin/src/hooks/useComposeRefs.js +0 -48
  79. package/admin/src/index.js +0 -88
  80. package/admin/src/pluginId.js +0 -5
  81. package/admin/src/translations/cs.json +0 -12
  82. package/admin/src/translations/en.json +0 -15
  83. package/admin/src/translations/ru.json +0 -15
  84. package/admin/src/translations/sv.json +0 -12
  85. package/admin/src/translations/tr.json +0 -12
  86. package/admin/src/translations/zh.json +0 -12
  87. package/admin/src/utils/getTrad.js +0 -5
  88. package/strapi-admin.js +0 -3
  89. package/strapi-server.js +0 -3
@@ -0,0 +1 @@
1
+ {"version":3,"file":"zh.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ var pluginId = require('../pluginId.js');
4
+
5
+ const getTrad = (id)=>`${pluginId.pluginId}.${id}`;
6
+
7
+ exports.getTrad = getTrad;
8
+ //# sourceMappingURL=getTrad.js.map
@@ -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,6 @@
1
+ import { pluginId } from '../pluginId.mjs';
2
+
3
+ const getTrad = (id)=>`${pluginId}.${id}`;
4
+
5
+ export { getTrad };
6
+ //# sourceMappingURL=getTrad.mjs.map
@@ -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;;;;"}
@@ -1,7 +1,10 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const register_1 = require("./register");
4
- exports.default = {
5
- register: register_1.register,
1
+ 'use strict';
2
+
3
+ var register = require('./register.js');
4
+
5
+ var index = {
6
+ register: register.register
6
7
  };
7
- //# sourceMappingURL=index.js.map
8
+
9
+ module.exports = index;
10
+ //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../server/src/index.ts"],"names":[],"mappings":";;AAAA,yCAAsC;AAEtC,kBAAe;IACb,QAAQ,EAAR,mBAAQ;CACT,CAAC"}
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,8 @@
1
+ import { register } from './register.mjs';
2
+
3
+ var index = {
4
+ register
5
+ };
6
+
7
+ export { index as default };
8
+ //# sourceMappingURL=index.mjs.map
@@ -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;;;;"}
@@ -1,12 +1,12 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.register = void 0;
4
- const register = ({ strapi }) => {
1
+ 'use strict';
2
+
3
+ const register = ({ strapi })=>{
5
4
  strapi.customFields.register({
6
5
  name: 'color',
7
6
  plugin: 'color-picker',
8
- type: 'string',
7
+ type: 'string'
9
8
  });
10
9
  };
10
+
11
11
  exports.register = register;
12
- //# sourceMappingURL=register.js.map
12
+ //# sourceMappingURL=register.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"register.js","sourceRoot":"","sources":["../../server/src/register.ts"],"names":[],"mappings":";;;AAAO,MAAM,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAO,EAAE,EAAE;IAC1C,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC;QAC3B,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,QAAQ;KACf,CAAC,CAAC;AACL,CAAC,CAAC;AANW,QAAA,QAAQ,YAMnB"}
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,10 @@
1
+ const register = ({ strapi })=>{
2
+ strapi.customFields.register({
3
+ name: 'color',
4
+ plugin: 'color-picker',
5
+ type: 'string'
6
+ });
7
+ };
8
+
9
+ export { register };
10
+ //# sourceMappingURL=register.mjs.map
@@ -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;;;;"}
@@ -2,3 +2,4 @@ declare const _default: {
2
2
  register: ({ strapi }: any) => void;
3
3
  };
4
4
  export default _default;
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../server/src/index.ts"],"names":[],"mappings":";;;AAEA,wBAEE"}
@@ -1 +1,2 @@
1
1
  export declare const register: ({ strapi }: any) => void;
2
+ //# sourceMappingURL=register.d.ts.map
@@ -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,53 +1,7 @@
1
1
  {
2
2
  "name": "@strapi/plugin-color-picker",
3
- "version": "0.0.0-next.ce51df0e18404afc8a1aa7f504c1006a7a221459",
3
+ "version": "0.0.0-next.ce5699024a72ea224891438d5bbe39f904ec6774",
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.9.0",
13
- "@strapi/helper-plugin": "0.0.0-next.ce51df0e18404afc8a1aa7f504c1006a7a221459",
14
- "@strapi/icons": "1.9.0",
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": "14.0.0",
21
- "react": "^18.2.0",
22
- "react-dom": "^18.2.0",
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.0 || ^18.0.0",
29
- "react-dom": "^17.0.0 || ^18.0.0",
30
- "react-router-dom": "5.3.4",
31
- "styled-components": "5.3.3"
32
- },
33
- "files": [
34
- "./dist",
35
- "./admin",
36
- "strapi-admin.js",
37
- "strapi-server.js"
38
- ],
39
- "scripts": {
40
- "build": "run -T tsc -p server/tsconfig.json --outDir ./dist/server",
41
- "build:ts": "run build",
42
- "watch": "run -T tsc -w --preserveWatchOutput",
43
- "clean": "run -T rimraf ./dist",
44
- "prepublishOnly": "yarn clean && yarn build",
45
- "test:front": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js",
46
- "test:front:watch": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js --watchAll",
47
- "test:front:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js",
48
- "test:front:watch:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll",
49
- "lint": "run -T eslint ."
50
- },
51
5
  "repository": {
52
6
  "type": "git",
53
7
  "url": "https://github.com/strapi/strapi.git",
@@ -66,9 +20,74 @@
66
20
  "url": "https://strapi.io"
67
21
  }
68
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.21",
61
+ "@strapi/icons": "2.0.0-rc.21",
62
+ "react-colorful": "5.6.1",
63
+ "react-intl": "6.6.2"
64
+ },
65
+ "devDependencies": {
66
+ "@strapi/sdk-plugin": "^5.2.0",
67
+ "@strapi/strapi": "0.0.0-next.ce5699024a72ea224891438d5bbe39f904ec6774",
68
+ "@testing-library/react": "15.0.7",
69
+ "@testing-library/user-event": "14.5.2",
70
+ "react": "18.3.1",
71
+ "react-dom": "18.3.1",
72
+ "react-router-dom": "6.22.3",
73
+ "styled-components": "6.1.8",
74
+ "typescript": "5.4.4"
75
+ },
76
+ "peerDependencies": {
77
+ "@strapi/strapi": "^5.0.0",
78
+ "react": "^17.0.0 || ^18.0.0",
79
+ "react-dom": "^17.0.0 || ^18.0.0",
80
+ "react-router-dom": "^6.0.0",
81
+ "styled-components": "^6.0.0"
82
+ },
69
83
  "engines": {
70
- "node": ">=16.0.0 <=20.x.x",
84
+ "node": ">=18.0.0 <=22.x.x",
71
85
  "npm": ">=6.0.0"
72
86
  },
73
- "gitHead": "ce51df0e18404afc8a1aa7f504c1006a7a221459"
87
+ "strapi": {
88
+ "name": "color-picker",
89
+ "description": "Color picker custom field",
90
+ "kind": "plugin",
91
+ "displayName": "Color Picker"
92
+ }
74
93
  }
@@ -1,26 +0,0 @@
1
- import React from 'react';
2
-
3
- import { Flex, Icon } from '@strapi/design-system';
4
- import { Paint } from '@strapi/icons';
5
- import styled from 'styled-components';
6
-
7
- const IconBox = styled(Flex)`
8
- /* Hard code color values */
9
- /* to stay consistent between themes */
10
- background-color: #f0f0ff; /* primary100 */
11
- border: 1px solid #d9d8ff; /* primary200 */
12
-
13
- svg > path {
14
- fill: #4945ff; /* primary600 */
15
- }
16
- `;
17
-
18
- const ColorPickerIcon = () => {
19
- return (
20
- <IconBox justifyContent="center" alignItems="center" width={7} height={6} hasRadius aria-hidden>
21
- <Icon as={Paint} />
22
- </IconBox>
23
- );
24
- };
25
-
26
- export default ColorPickerIcon;
@@ -1,214 +0,0 @@
1
- import React, { forwardRef, useRef, useState } from 'react';
2
-
3
- import {
4
- BaseButton,
5
- Box,
6
- Field,
7
- FieldError,
8
- FieldHint,
9
- FieldInput,
10
- FieldLabel,
11
- Flex,
12
- FocusTrap,
13
- Popover,
14
- Typography,
15
- } from '@strapi/design-system';
16
- import { CarretDown } from '@strapi/icons';
17
- import PropTypes from 'prop-types';
18
- import { HexColorPicker } from 'react-colorful';
19
- import { useIntl } from 'react-intl';
20
- import styled from 'styled-components';
21
-
22
- import { useComposedRefs } from '../../../hooks/useComposeRefs';
23
- import getTrad from '../../../utils/getTrad';
24
-
25
- const ColorPreview = styled.div`
26
- border-radius: 50%;
27
- width: 20px;
28
- height: 20px;
29
- margin-right: 10px;
30
- background-color: ${(props) => props.color};
31
- border: 1px solid rgba(0, 0, 0, 0.1);
32
- `;
33
-
34
- const ColorPicker = styled(HexColorPicker)`
35
- && {
36
- width: 100%;
37
- aspect-ratio: 1.5;
38
- }
39
-
40
- .react-colorful__pointer {
41
- width: ${({ theme }) => theme.spaces[3]};
42
- height: ${({ theme }) => theme.spaces[3]};
43
- }
44
-
45
- .react-colorful__saturation {
46
- border-radius: ${({ theme }) => theme.spaces[1]};
47
- border-bottom: none;
48
- }
49
-
50
- .react-colorful__hue {
51
- border-radius: 10px;
52
- height: ${({ theme }) => theme.spaces[3]};
53
- margin-top: ${({ theme }) => theme.spaces[2]};
54
- }
55
- `;
56
-
57
- const ColorPickerToggle = styled(BaseButton)`
58
- display: flex;
59
- justify-content: space-between;
60
- align-items: center;
61
-
62
- svg {
63
- width: ${({ theme }) => theme.spaces[2]};
64
- height: ${({ theme }) => theme.spaces[2]};
65
- }
66
-
67
- svg > path {
68
- fill: ${({ theme }) => theme.colors.neutral500};
69
- justify-self: flex-end;
70
- }
71
- `;
72
-
73
- const ColorPickerPopover = styled(Popover)`
74
- padding: ${({ theme }) => theme.spaces[2]};
75
- min-height: 270px;
76
- `;
77
-
78
- const ColorPickerInput = forwardRef(
79
- (
80
- {
81
- attribute,
82
- description,
83
- disabled,
84
- error,
85
- intlLabel,
86
- labelAction,
87
- name,
88
- onChange,
89
- required,
90
- value,
91
- },
92
- forwardedRef
93
- ) => {
94
- const [showColorPicker, setShowColorPicker] = useState(false);
95
- const colorPickerButtonRef = useRef();
96
- const { formatMessage } = useIntl();
97
- const color = value || '#000000';
98
- const styleUppercase = { textTransform: 'uppercase' };
99
-
100
- const handleBlur = (e) => {
101
- e.preventDefault();
102
-
103
- if (!e.currentTarget.contains(e.relatedTarget)) {
104
- setShowColorPicker(false);
105
- }
106
- };
107
-
108
- const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
109
-
110
- return (
111
- <Field
112
- name={name}
113
- id={name}
114
- // GenericInput calls formatMessage and returns a string for the error
115
- error={error}
116
- hint={description && formatMessage(description)}
117
- required={required}
118
- >
119
- <Flex direction="column" alignItems="stretch" gap={1}>
120
- <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>
121
- <ColorPickerToggle
122
- ref={composedRefs}
123
- aria-label={formatMessage({
124
- id: getTrad('color-picker.toggle.aria-label'),
125
- defaultMessage: 'Color picker toggle',
126
- })}
127
- aria-controls="color-picker-value"
128
- aria-haspopup="dialog"
129
- aria-expanded={showColorPicker}
130
- aria-disabled={disabled}
131
- disabled={disabled}
132
- onClick={() => setShowColorPicker(!showColorPicker)}
133
- >
134
- <Flex>
135
- <ColorPreview color={color} />
136
- <Typography
137
- style={styleUppercase}
138
- textColor={value ? null : 'neutral600'}
139
- variant="omega"
140
- >
141
- {color}
142
- </Typography>
143
- </Flex>
144
- <CarretDown aria-hidden />
145
- </ColorPickerToggle>
146
- {showColorPicker && (
147
- <ColorPickerPopover
148
- onBlur={handleBlur}
149
- role="dialog"
150
- source={colorPickerButtonRef}
151
- spacing={4}
152
- >
153
- <FocusTrap onEscape={() => setShowColorPicker(false)}>
154
- <ColorPicker
155
- color={color}
156
- onChange={(hexValue) =>
157
- onChange({ target: { name, value: hexValue, type: attribute.type } })
158
- }
159
- />
160
- <Flex paddingTop={3} paddingLeft={4} justifyContent="flex-end">
161
- <Box paddingRight={2}>
162
- <Typography variant="omega" as="label" textColor="neutral600">
163
- {formatMessage({
164
- id: getTrad('color-picker.input.format'),
165
- defaultMessage: 'HEX',
166
- })}
167
- </Typography>
168
- </Box>
169
- <FieldInput
170
- id="color-picker-value"
171
- aria-label={formatMessage({
172
- id: getTrad('color-picker.input.aria-label'),
173
- defaultMessage: 'Color picker input',
174
- })}
175
- style={styleUppercase}
176
- value={value}
177
- placeholder="#000000"
178
- onChange={onChange}
179
- />
180
- </Flex>
181
- </FocusTrap>
182
- </ColorPickerPopover>
183
- )}
184
- <FieldHint />
185
- <FieldError />
186
- </Flex>
187
- </Field>
188
- );
189
- }
190
- );
191
-
192
- ColorPickerInput.defaultProps = {
193
- description: null,
194
- disabled: false,
195
- error: null,
196
- labelAction: null,
197
- required: false,
198
- value: '',
199
- };
200
-
201
- ColorPickerInput.propTypes = {
202
- intlLabel: PropTypes.object.isRequired,
203
- onChange: PropTypes.func.isRequired,
204
- attribute: PropTypes.object.isRequired,
205
- name: PropTypes.string.isRequired,
206
- description: PropTypes.object,
207
- disabled: PropTypes.bool,
208
- error: PropTypes.string,
209
- labelAction: PropTypes.object,
210
- required: PropTypes.bool,
211
- value: PropTypes.string,
212
- };
213
-
214
- export default ColorPickerInput;