@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.
Files changed (94) 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 +10 -0
  62. package/dist/server/index.js.map +1 -0
  63. package/dist/server/index.mjs +8 -0
  64. package/dist/server/index.mjs.map +1 -0
  65. package/dist/server/register.js +12 -0
  66. package/dist/server/register.js.map +1 -0
  67. package/dist/server/register.mjs +10 -0
  68. package/dist/server/register.mjs.map +1 -0
  69. package/dist/server/src/index.d.ts +5 -0
  70. package/dist/server/src/index.d.ts.map +1 -0
  71. package/dist/server/src/register.d.ts +2 -0
  72. package/dist/server/src/register.d.ts.map +1 -0
  73. package/package.json +67 -38
  74. package/.eslintignore +0 -2
  75. package/.eslintrc.js +0 -14
  76. package/admin/src/components/ColorPicker/ColorPickerIcon/index.js +0 -25
  77. package/admin/src/components/ColorPicker/ColorPickerInput/index.js +0 -205
  78. package/admin/src/components/tests/__snapshots__/color-picker-input.test.js.snap +0 -238
  79. package/admin/src/components/tests/color-picker-input.test.js +0 -63
  80. package/admin/src/index.js +0 -87
  81. package/admin/src/pluginId.js +0 -5
  82. package/admin/src/translations/cs.json +0 -12
  83. package/admin/src/translations/en.json +0 -15
  84. package/admin/src/translations/ru.json +0 -15
  85. package/admin/src/translations/sv.json +0 -12
  86. package/admin/src/translations/tr.json +0 -12
  87. package/admin/src/translations/zh.json +0 -12
  88. package/admin/src/utils/getTrad.js +0 -5
  89. package/color-picker.png +0 -0
  90. package/jest.config.front.js +0 -6
  91. package/server/index.js +0 -7
  92. package/server/register.js +0 -9
  93. package/strapi-admin.js +0 -3
  94. 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;;;;"}
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ var register = require('./register.js');
4
+
5
+ var index = {
6
+ register: register.register
7
+ };
8
+
9
+ module.exports = index;
10
+ //# sourceMappingURL=index.js.map
@@ -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,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;;;;"}
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ const register = ({ strapi })=>{
4
+ strapi.customFields.register({
5
+ name: 'color',
6
+ plugin: 'color-picker',
7
+ type: 'string'
8
+ });
9
+ };
10
+
11
+ exports.register = register;
12
+ //# sourceMappingURL=register.js.map
@@ -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,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;;;;"}
@@ -0,0 +1,5 @@
1
+ declare const _default: {
2
+ register: ({ strapi }: any) => void;
3
+ };
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"}
@@ -0,0 +1,2 @@
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,42 +1,7 @@
1
1
  {
2
2
  "name": "@strapi/plugin-color-picker",
3
- "version": "0.0.0-next.ff946d2c25a3e577b47132a357cac2932eb8e635",
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": ">=14.19.1 <=18.x.x",
83
+ "node": ">=18.0.0 <=22.x.x",
60
84
  "npm": ">=6.0.0"
61
85
  },
62
- "gitHead": "ff946d2c25a3e577b47132a357cac2932eb8e635"
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
@@ -1,2 +0,0 @@
1
- node_modules/
2
- .eslintrc.js
package/.eslintrc.js DELETED
@@ -1,14 +0,0 @@
1
- module.exports = {
2
- root: true,
3
- overrides: [
4
- {
5
- files: ['admin/**/*'],
6
- extends: ['custom/front'],
7
- },
8
- {
9
- files: ['**/*'],
10
- excludedFiles: ['admin/**/*'],
11
- extends: ['custom/back'],
12
- },
13
- ],
14
- };
@@ -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;