@strapi/plugin-color-picker 0.0.0-next.fab38a080023b0850fc7a8ec8605d1ee6970e3c9 → 0.0.0-next.fc1775f7731f8999840e56e298a216b9a6c5c4ad
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/_chunks/ColorPickerInput-BiwD6BEw.mjs +137 -0
- package/dist/_chunks/ColorPickerInput-gD_Mb6qe.js +155 -0
- package/dist/_chunks/cs-CKl0OyEH.js +15 -0
- package/dist/_chunks/{cs-70e06424.mjs → cs-DMmE6LK7.mjs} +2 -3
- package/dist/_chunks/{en-096b1095.mjs → en-BlDau3us.mjs} +2 -3
- package/dist/_chunks/en-Ct0C5cA2.js +18 -0
- package/dist/_chunks/index-CNTxZbMN.js +126 -0
- package/dist/_chunks/index-dnY2u5Dg.mjs +127 -0
- package/dist/_chunks/ru-Wrg-npZz.js +18 -0
- package/dist/_chunks/{ru-05c0aa5b.mjs → ru-aOnA-eym.mjs} +2 -3
- package/dist/_chunks/{sv-6ccbf5f0.mjs → sv-BaFDND79.mjs} +2 -3
- package/dist/_chunks/sv-CKY6es_6.js +15 -0
- package/dist/_chunks/{tr-34587a44.mjs → tr-CHHW_hYI.mjs} +2 -3
- package/dist/_chunks/tr-DcLzQS-J.js +15 -0
- package/dist/_chunks/{zh-667ba169.mjs → zh-DBH6uCXb.mjs} +2 -3
- package/dist/_chunks/zh-T5cJzhPD.js +15 -0
- package/dist/admin/index.js +3 -2
- package/dist/admin/index.mjs +2 -8
- package/dist/admin/src/components/ColorPickerInput.d.ts +7 -0
- package/dist/admin/{index.d.ts → src/index.d.ts} +3 -1
- package/dist/admin/src/utils/prefixPluginTranslations.d.ts +3 -0
- package/dist/server/index.js +12 -2
- package/dist/server/index.mjs +6 -6
- package/dist/server/{index.d.ts → src/index.d.ts} +1 -0
- package/dist/server/src/index.d.ts.map +1 -0
- package/dist/server/{register.d.ts → src/register.d.ts} +1 -0
- package/dist/server/src/register.d.ts.map +1 -0
- package/package.json +30 -37
- package/dist/_chunks/ColorPickerInput-1e9c7a15.js +0 -47
- package/dist/_chunks/ColorPickerInput-1e9c7a15.js.map +0 -1
- package/dist/_chunks/ColorPickerInput-3335ebf5.mjs +0 -168
- package/dist/_chunks/ColorPickerInput-3335ebf5.mjs.map +0 -1
- package/dist/_chunks/cs-67f98136.js +0 -2
- package/dist/_chunks/cs-67f98136.js.map +0 -1
- package/dist/_chunks/cs-70e06424.mjs.map +0 -1
- package/dist/_chunks/en-096b1095.mjs.map +0 -1
- package/dist/_chunks/en-32ea9fdb.js +0 -2
- package/dist/_chunks/en-32ea9fdb.js.map +0 -1
- package/dist/_chunks/index-3cecbc68.js +0 -37
- package/dist/_chunks/index-3cecbc68.js.map +0 -1
- package/dist/_chunks/index-e75c6fdb.mjs +0 -730
- package/dist/_chunks/index-e75c6fdb.mjs.map +0 -1
- package/dist/_chunks/ru-05c0aa5b.mjs.map +0 -1
- package/dist/_chunks/ru-c5a712be.js +0 -2
- package/dist/_chunks/ru-c5a712be.js.map +0 -1
- package/dist/_chunks/sv-6ccbf5f0.mjs.map +0 -1
- package/dist/_chunks/sv-e4ea8db8.js +0 -2
- package/dist/_chunks/sv-e4ea8db8.js.map +0 -1
- package/dist/_chunks/tr-34587a44.mjs.map +0 -1
- package/dist/_chunks/tr-fb5cfb93.js +0 -2
- package/dist/_chunks/tr-fb5cfb93.js.map +0 -1
- package/dist/_chunks/zh-667ba169.mjs.map +0 -1
- package/dist/_chunks/zh-b25c84c2.js +0 -2
- package/dist/_chunks/zh-b25c84c2.js.map +0 -1
- package/dist/admin/components/ColorPickerInput.d.ts +0 -32
- package/dist/admin/hooks/useComposeRefs.d.ts +0 -29
- package/dist/admin/index.js.map +0 -1
- package/dist/admin/index.mjs.map +0 -1
- package/dist/server/index.js.map +0 -1
- package/dist/server/index.mjs.map +0 -1
- package/strapi-server.js +0 -3
- /package/dist/admin/{components → src/components}/ColorPickerIcon.d.ts +0 -0
- /package/dist/admin/{pluginId.d.ts → src/pluginId.d.ts} +0 -0
- /package/dist/admin/{utils → src/utils}/getTrad.d.ts +0 -0
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const ru = {
|
|
4
|
+
"color-picker.description": "Выбирайте любые цвета",
|
|
5
|
+
"color-picker.input.aria-label": "Введите выбранный цвет",
|
|
6
|
+
"color-picker.input.format": "HEX",
|
|
7
|
+
"color-picker.label": "Цвет",
|
|
8
|
+
"color-picker.options.advanced.regex": "Шаблон регулярного выражения (RegExp)",
|
|
9
|
+
"color-picker.options.advanced.regex.description": "Обеспечивает проверку с помощью регулярного выражение для HEX (шестнадцатеричного) HEX значения цвета",
|
|
10
|
+
"color-picker.options.advanced.requiredField": "Обязательное поле",
|
|
11
|
+
"color-picker.options.advanced.requiredField.description": "Вы не сможете продолжить, если это поле пусто",
|
|
12
|
+
"color-picker.settings": "Настройки",
|
|
13
|
+
"color-picker.toggle.aria-label": "Переключатель средства выбора цвета",
|
|
14
|
+
"plugin.description.long": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi. Используйте ползунки насыщенности и оттенка, чтобы выбрать цвет и сохранить его HEX (шестнадцатеричное) значение.",
|
|
15
|
+
"plugin.description.short": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi.",
|
|
16
|
+
"plugin.name": "Выбор цвета"
|
|
17
|
+
};
|
|
18
|
+
exports.default = ru;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const ru = {
|
|
2
2
|
"color-picker.description": "Выбирайте любые цвета",
|
|
3
3
|
"color-picker.input.aria-label": "Введите выбранный цвет",
|
|
4
4
|
"color-picker.input.format": "HEX",
|
|
@@ -14,6 +14,5 @@ const o = {
|
|
|
14
14
|
"plugin.name": "Выбор цвета"
|
|
15
15
|
};
|
|
16
16
|
export {
|
|
17
|
-
|
|
17
|
+
ru as default
|
|
18
18
|
};
|
|
19
|
-
//# sourceMappingURL=ru-05c0aa5b.mjs.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const sv = {
|
|
2
2
|
"color-picker.description": "Välj färger",
|
|
3
3
|
"color-picker.input.aria-label": "Färgväljarinmatning",
|
|
4
4
|
"color-picker.input.format": "HEX",
|
|
@@ -11,6 +11,5 @@ const r = {
|
|
|
11
11
|
"color-picker.toggle.aria-label": "Växla färgväljare"
|
|
12
12
|
};
|
|
13
13
|
export {
|
|
14
|
-
|
|
14
|
+
sv as default
|
|
15
15
|
};
|
|
16
|
-
//# sourceMappingURL=sv-6ccbf5f0.mjs.map
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const sv = {
|
|
4
|
+
"color-picker.description": "Välj färger",
|
|
5
|
+
"color-picker.input.aria-label": "Färgväljarinmatning",
|
|
6
|
+
"color-picker.input.format": "HEX",
|
|
7
|
+
"color-picker.label": "Färgväljare",
|
|
8
|
+
"color-picker.options.advanced.regex": "RegEx-mönster",
|
|
9
|
+
"color-picker.options.advanced.regex.description": "Ange ett regex-mönster för att validera HEX-värdet",
|
|
10
|
+
"color-picker.options.advanced.requiredField": "Obligatoriskt fält",
|
|
11
|
+
"color-picker.options.advanced.requiredField.description": "Du kommer inte att kunna skapa en post om det här fältet är tomt",
|
|
12
|
+
"color-picker.settings": "Inställningar",
|
|
13
|
+
"color-picker.toggle.aria-label": "Växla färgväljare"
|
|
14
|
+
};
|
|
15
|
+
exports.default = sv;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const tr = {
|
|
2
2
|
"color-picker.description": "Herhangi bir renk seç",
|
|
3
3
|
"color-picker.input.aria-label": "Renk seçici girişi",
|
|
4
4
|
"color-picker.input.format": "HEX",
|
|
@@ -11,6 +11,5 @@ const i = {
|
|
|
11
11
|
"color-picker.toggle.aria-label": "Renk seçici anahtarı"
|
|
12
12
|
};
|
|
13
13
|
export {
|
|
14
|
-
|
|
14
|
+
tr as default
|
|
15
15
|
};
|
|
16
|
-
//# sourceMappingURL=tr-34587a44.mjs.map
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const tr = {
|
|
4
|
+
"color-picker.description": "Herhangi bir renk seç",
|
|
5
|
+
"color-picker.input.aria-label": "Renk seçici girişi",
|
|
6
|
+
"color-picker.input.format": "HEX",
|
|
7
|
+
"color-picker.label": "Renk",
|
|
8
|
+
"color-picker.options.advanced.regex": "RegExp ifadesi",
|
|
9
|
+
"color-picker.options.advanced.regex.description": "HEX değerini doğrulamak için bir RegExp ifadesi sağla",
|
|
10
|
+
"color-picker.options.advanced.requiredField": "Zorunlu alan",
|
|
11
|
+
"color-picker.options.advanced.requiredField.description": "Bu alan boş olursa yeni bir girdi oluşturamazsın",
|
|
12
|
+
"color-picker.settings": "Ayarlar",
|
|
13
|
+
"color-picker.toggle.aria-label": "Renk seçici anahtarı"
|
|
14
|
+
};
|
|
15
|
+
exports.default = tr;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const zh = {
|
|
2
2
|
"color-picker.description": "選擇任意顏色",
|
|
3
3
|
"color-picker.input.aria-label": "選色器輸入",
|
|
4
4
|
"color-picker.input.format": "HEX",
|
|
@@ -11,6 +11,5 @@ const o = {
|
|
|
11
11
|
"color-picker.toggle.aria-label": "選色器開關"
|
|
12
12
|
};
|
|
13
13
|
export {
|
|
14
|
-
|
|
14
|
+
zh as default
|
|
15
15
|
};
|
|
16
|
-
//# sourceMappingURL=zh-667ba169.mjs.map
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const zh = {
|
|
4
|
+
"color-picker.description": "選擇任意顏色",
|
|
5
|
+
"color-picker.input.aria-label": "選色器輸入",
|
|
6
|
+
"color-picker.input.format": "HEX",
|
|
7
|
+
"color-picker.label": "顏色",
|
|
8
|
+
"color-picker.options.advanced.regex": "正則表達模式",
|
|
9
|
+
"color-picker.options.advanced.regex.description": "提供正則表達式以驗證 HEX 值",
|
|
10
|
+
"color-picker.options.advanced.requiredField": "必填欄位",
|
|
11
|
+
"color-picker.options.advanced.requiredField.description": "若此欄位為空,您將無法建立項目",
|
|
12
|
+
"color-picker.settings": "設定",
|
|
13
|
+
"color-picker.toggle.aria-label": "選色器開關"
|
|
14
|
+
};
|
|
15
|
+
exports.default = zh;
|
package/dist/admin/index.js
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
const index = require("../_chunks/index-CNTxZbMN.js");
|
|
3
|
+
module.exports = index.index;
|
package/dist/admin/index.mjs
CHANGED
|
@@ -1,10 +1,4 @@
|
|
|
1
|
-
import { i
|
|
2
|
-
import "@strapi/helper-plugin";
|
|
3
|
-
import "react";
|
|
4
|
-
import "@strapi/design-system";
|
|
5
|
-
import "@strapi/icons";
|
|
6
|
-
import "styled-components";
|
|
1
|
+
import { i } from "../_chunks/index-dnY2u5Dg.mjs";
|
|
7
2
|
export {
|
|
8
|
-
|
|
3
|
+
i as default
|
|
9
4
|
};
|
|
10
|
-
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type InputProps } from '@strapi/strapi/admin';
|
|
3
|
+
type ColorPickerInputProps = InputProps & {
|
|
4
|
+
labelAction?: React.ReactNode;
|
|
5
|
+
};
|
|
6
|
+
export declare const ColorPickerInput: React.ForwardRefExoticComponent<ColorPickerInputProps & React.RefAttributes<HTMLButtonElement>>;
|
|
7
|
+
export {};
|
package/dist/server/index.js
CHANGED
|
@@ -1,2 +1,12 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
const register = ({ strapi }) => {
|
|
3
|
+
strapi.customFields.register({
|
|
4
|
+
name: "color",
|
|
5
|
+
plugin: "color-picker",
|
|
6
|
+
type: "string"
|
|
7
|
+
});
|
|
8
|
+
};
|
|
9
|
+
const index = {
|
|
10
|
+
register
|
|
11
|
+
};
|
|
12
|
+
module.exports = index;
|
package/dist/server/index.mjs
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
1
|
+
const register = ({ strapi }) => {
|
|
2
|
+
strapi.customFields.register({
|
|
3
3
|
name: "color",
|
|
4
4
|
plugin: "color-picker",
|
|
5
5
|
type: "string"
|
|
6
6
|
});
|
|
7
|
-
}
|
|
8
|
-
|
|
7
|
+
};
|
|
8
|
+
const index = {
|
|
9
|
+
register
|
|
9
10
|
};
|
|
10
11
|
export {
|
|
11
|
-
|
|
12
|
+
index as default
|
|
12
13
|
};
|
|
13
|
-
//# sourceMappingURL=index.mjs.map
|
|
@@ -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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/plugin-color-picker",
|
|
3
|
-
"version": "0.0.0-next.
|
|
3
|
+
"version": "0.0.0-next.fc1775f7731f8999840e56e298a216b9a6c5c4ad",
|
|
4
4
|
"description": "Strapi maintained Custom Fields",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -22,14 +22,14 @@
|
|
|
22
22
|
],
|
|
23
23
|
"exports": {
|
|
24
24
|
"./strapi-admin": {
|
|
25
|
-
"types": "./dist/admin/index.d.ts",
|
|
25
|
+
"types": "./dist/admin/src/index.d.ts",
|
|
26
26
|
"source": "./admin/src/index.ts",
|
|
27
27
|
"import": "./dist/admin/index.mjs",
|
|
28
28
|
"require": "./dist/admin/index.js",
|
|
29
29
|
"default": "./dist/admin/index.js"
|
|
30
30
|
},
|
|
31
31
|
"./strapi-server": {
|
|
32
|
-
"types": "./dist/server/index.d.ts",
|
|
32
|
+
"types": "./dist/server/src/index.d.ts",
|
|
33
33
|
"source": "./server/src/index.ts",
|
|
34
34
|
"import": "./dist/server/index.mjs",
|
|
35
35
|
"require": "./dist/server/index.js",
|
|
@@ -38,59 +38,52 @@
|
|
|
38
38
|
"./package.json": "./package.json"
|
|
39
39
|
},
|
|
40
40
|
"files": [
|
|
41
|
-
"
|
|
41
|
+
"dist/",
|
|
42
42
|
"strapi-server.js"
|
|
43
43
|
],
|
|
44
|
-
"strapi": {
|
|
45
|
-
"name": "color-picker",
|
|
46
|
-
"description": "Color picker custom field",
|
|
47
|
-
"kind": "plugin",
|
|
48
|
-
"displayName": "Color Picker"
|
|
49
|
-
},
|
|
50
44
|
"scripts": {
|
|
51
|
-
"build": "
|
|
52
|
-
"watch": "run -T tsc -w --preserveWatchOutput",
|
|
45
|
+
"build": "strapi-plugin build",
|
|
53
46
|
"clean": "run -T rimraf ./dist",
|
|
54
|
-
"
|
|
47
|
+
"lint": "run -T eslint .",
|
|
55
48
|
"test:front": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js",
|
|
56
|
-
"test:front:watch": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js --watchAll",
|
|
57
49
|
"test:front:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js",
|
|
50
|
+
"test:front:watch": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js --watchAll",
|
|
58
51
|
"test:front:watch:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll",
|
|
59
52
|
"test:ts:front": "run -T tsc -p admin/tsconfig.json",
|
|
60
|
-
"
|
|
61
|
-
"lint:project": "run -T eslint . -c ./.eslintrc.js",
|
|
62
|
-
"lint:back": "run -T eslint ./server -c ./server/.eslintrc.js",
|
|
63
|
-
"lint:front": "run -T eslint ./admin -c ./admin/.eslintrc.js"
|
|
53
|
+
"watch": "strapi-plugin watch"
|
|
64
54
|
},
|
|
65
55
|
"dependencies": {
|
|
66
|
-
"@strapi/design-system": "
|
|
67
|
-
"@strapi/
|
|
68
|
-
"@strapi/icons": "1.12.0",
|
|
69
|
-
"prop-types": "^15.8.1",
|
|
56
|
+
"@strapi/design-system": "2.0.0-rc.14",
|
|
57
|
+
"@strapi/icons": "2.0.0-rc.14",
|
|
70
58
|
"react-colorful": "5.6.1",
|
|
71
|
-
"react-intl": "6.
|
|
59
|
+
"react-intl": "6.6.2"
|
|
72
60
|
},
|
|
73
61
|
"devDependencies": {
|
|
74
|
-
"@strapi/
|
|
75
|
-
"@
|
|
76
|
-
"@testing-library/
|
|
77
|
-
"@
|
|
78
|
-
"react": "
|
|
79
|
-
"react-dom": "
|
|
80
|
-
"react-router-dom": "
|
|
81
|
-
"styled-components": "
|
|
82
|
-
"typescript": "5.
|
|
62
|
+
"@strapi/sdk-plugin": "^5.2.0",
|
|
63
|
+
"@strapi/strapi": "0.0.0-next.fc1775f7731f8999840e56e298a216b9a6c5c4ad",
|
|
64
|
+
"@testing-library/react": "15.0.7",
|
|
65
|
+
"@testing-library/user-event": "14.5.2",
|
|
66
|
+
"react": "18.3.1",
|
|
67
|
+
"react-dom": "18.3.1",
|
|
68
|
+
"react-router-dom": "6.22.3",
|
|
69
|
+
"styled-components": "6.1.8",
|
|
70
|
+
"typescript": "5.3.2"
|
|
83
71
|
},
|
|
84
72
|
"peerDependencies": {
|
|
85
|
-
"@strapi/strapi": "^
|
|
73
|
+
"@strapi/strapi": "^5.0.0",
|
|
86
74
|
"react": "^17.0.0 || ^18.0.0",
|
|
87
75
|
"react-dom": "^17.0.0 || ^18.0.0",
|
|
88
|
-
"react-router-dom": "
|
|
89
|
-
"styled-components": "
|
|
76
|
+
"react-router-dom": "^6.0.0",
|
|
77
|
+
"styled-components": "^6.0.0"
|
|
90
78
|
},
|
|
91
79
|
"engines": {
|
|
92
|
-
"node": ">=
|
|
80
|
+
"node": ">=18.0.0 <=22.x.x",
|
|
93
81
|
"npm": ">=6.0.0"
|
|
94
82
|
},
|
|
95
|
-
"
|
|
83
|
+
"strapi": {
|
|
84
|
+
"name": "color-picker",
|
|
85
|
+
"description": "Color picker custom field",
|
|
86
|
+
"kind": "plugin",
|
|
87
|
+
"displayName": "Color Picker"
|
|
88
|
+
}
|
|
96
89
|
}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-3cecbc68.js"),y=require("react"),r=require("@strapi/design-system"),C=require("@strapi/icons"),P=require("react-colorful"),T=require("react-intl"),c=require("styled-components");require("@strapi/helper-plugin");function v(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const a=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(o,s,a.get?a:{enumerable:!0,get:()=>e[s]})}}return o.default=e,Object.freeze(o)}const l=v(y);function w(e,o){typeof e=="function"?e(o):e!=null&&(e.current=o)}function $(...e){return o=>e.forEach(s=>w(s,o))}function F(...e){return l.useCallback($(...e),e)}const _=c.div`
|
|
2
|
-
border-radius: 50%;
|
|
3
|
-
width: 20px;
|
|
4
|
-
height: 20px;
|
|
5
|
-
margin-right: 10px;
|
|
6
|
-
background-color: ${e=>e.color};
|
|
7
|
-
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
8
|
-
`,q=c(P.HexColorPicker)`
|
|
9
|
-
&& {
|
|
10
|
-
width: 100%;
|
|
11
|
-
aspect-ratio: 1.5;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.react-colorful__pointer {
|
|
15
|
-
width: ${({theme:e})=>e.spaces[3]};
|
|
16
|
-
height: ${({theme:e})=>e.spaces[3]};
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.react-colorful__saturation {
|
|
20
|
-
border-radius: ${({theme:e})=>e.spaces[1]};
|
|
21
|
-
border-bottom: none;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.react-colorful__hue {
|
|
25
|
-
border-radius: 10px;
|
|
26
|
-
height: ${({theme:e})=>e.spaces[3]};
|
|
27
|
-
margin-top: ${({theme:e})=>e.spaces[2]};
|
|
28
|
-
}
|
|
29
|
-
`,S=c(r.BaseButton)`
|
|
30
|
-
display: flex;
|
|
31
|
-
justify-content: space-between;
|
|
32
|
-
align-items: center;
|
|
33
|
-
|
|
34
|
-
svg {
|
|
35
|
-
width: ${({theme:e})=>e.spaces[2]};
|
|
36
|
-
height: ${({theme:e})=>e.spaces[2]};
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
svg > path {
|
|
40
|
-
fill: ${({theme:e})=>e.colors.neutral500};
|
|
41
|
-
justify-self: flex-end;
|
|
42
|
-
}
|
|
43
|
-
`,B=c(r.Popover)`
|
|
44
|
-
padding: ${({theme:e})=>e.spaces[2]};
|
|
45
|
-
min-height: 270px;
|
|
46
|
-
`,I=l.forwardRef(({attribute:e,description:o,disabled:s=!1,error:a,intlLabel:h,labelAction:m,name:u,onChange:f,required:R=!1,value:p=""},b)=>{const[d,x]=l.useState(!1),j=l.useRef(null),{formatMessage:i}=T.useIntl(),g=p||"#000000",E=n=>{n.preventDefault(),n.currentTarget.contains(n.relatedTarget)||x(!1)},k=F(b,j);return t.jsxRuntimeExports.jsx(r.Field,{name:u,id:u,error:a,hint:o&&i(o),required:R,children:t.jsxRuntimeExports.jsxs(r.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsxRuntimeExports.jsx(r.FieldLabel,{action:m,children:i(h)}),t.jsxRuntimeExports.jsxs(S,{ref:k,"aria-label":i({id:t.getTrad("color-picker.toggle.aria-label"),defaultMessage:"Color picker toggle"}),"aria-controls":"color-picker-value","aria-haspopup":"dialog","aria-expanded":d,"aria-disabled":s,disabled:s,onClick:()=>x(!d),children:[t.jsxRuntimeExports.jsxs(r.Flex,{children:[t.jsxRuntimeExports.jsx(_,{color:g}),t.jsxRuntimeExports.jsx(r.Typography,{style:{textTransform:"uppercase"},textColor:p?void 0:"neutral600",variant:"omega",children:g})]}),t.jsxRuntimeExports.jsx(C.CarretDown,{"aria-hidden":!0})]}),d&&t.jsxRuntimeExports.jsx(B,{onBlur:E,role:"dialog",source:j,spacing:4,children:t.jsxRuntimeExports.jsxs(r.FocusTrap,{onEscape:()=>x(!1),children:[t.jsxRuntimeExports.jsx(q,{color:g,onChange:n=>f({target:{name:u,value:n,type:e.type}})}),t.jsxRuntimeExports.jsxs(r.Flex,{paddingTop:3,paddingLeft:4,justifyContent:"flex-end",children:[t.jsxRuntimeExports.jsx(r.Box,{paddingRight:2,children:t.jsxRuntimeExports.jsx(r.Typography,{variant:"omega",as:"label",textColor:"neutral600",children:i({id:t.getTrad("color-picker.input.format"),defaultMessage:"HEX"})})}),t.jsxRuntimeExports.jsx(r.FieldInput,{id:"color-picker-value","aria-label":i({id:t.getTrad("color-picker.input.aria-label"),defaultMessage:"Color picker input"}),style:{textTransform:"uppercase"},value:p,placeholder:"#000000",onChange:f})]})]})}),t.jsxRuntimeExports.jsx(r.FieldHint,{}),t.jsxRuntimeExports.jsx(r.FieldError,{})]})})});exports.ColorPickerInput=I;
|
|
47
|
-
//# sourceMappingURL=ColorPickerInput-1e9c7a15.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerInput-1e9c7a15.js","sources":["../../admin/src/hooks/useComposeRefs.ts","../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/**\n * Takes multiple React like refs either React.Ref or a callback:\n * (node: T) => void and returns a single function that can be\n * passed to a React component as a ref.\n *\n * Example:\n * ```tsx\n * import { useComposedRefs } from '../hooks/useComposedRefs';\n *\n * const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {\n * const ref = useComposedRefs(internalRef, forwardedRef);\n *\n * React.useEffect(() => {\n * ref.current.focus();\n * }, [ref]);\n *\n * return <input ref={ref} />\n * }\n * ```\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import * as React from 'react';\n\nimport {\n BaseButton,\n Box,\n Field,\n FieldError,\n FieldHint,\n FieldInput,\n FieldLabel,\n Flex,\n FocusTrap,\n Popover,\n Typography,\n} from '@strapi/design-system';\nimport { CarretDown } from '@strapi/icons';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport styled from 'styled-components';\n\nimport { useComposedRefs } from '../hooks/useComposeRefs';\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(BaseButton)`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\n/**\n * TODO: A lot of these props should extend `FieldProps`\n */\ninterface ColorPickerInputProps {\n intlLabel: MessageDescriptor;\n /**\n * TODO: this should be extended from `FieldInputProps['onChange']\n * but that conflicts with it's secondary usage in `HexColorPicker`\n */\n onChange: (event: { target: { name: string; value: string; type: string } }) => void;\n attribute: { type: string; [key: string]: unknown };\n name: string;\n description?: MessageDescriptor;\n disabled?: boolean;\n error?: string;\n labelAction?: React.ReactNode;\n required?: boolean;\n value?: string;\n}\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n (\n {\n attribute,\n description,\n disabled = false,\n error,\n intlLabel,\n labelAction,\n name,\n onChange,\n required = false,\n value = '',\n },\n forwardedRef\n ) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const color = value || '#000000';\n\n const handleBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n\n if (!e.currentTarget.contains(e.relatedTarget)) {\n setShowColorPicker(false);\n }\n };\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field\n name={name}\n id={name}\n // GenericInput calls formatMessage and returns a string for the error\n error={error}\n hint={description && formatMessage(description)}\n required={required}\n >\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n onClick={() => setShowColorPicker(!showColorPicker)}\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CarretDown aria-hidden />\n </ColorPickerToggle>\n {showColorPicker && (\n <ColorPickerPopover\n onBlur={handleBlur}\n role=\"dialog\"\n source={colorPickerButtonRef}\n spacing={4}\n >\n <FocusTrap onEscape={() => setShowColorPicker(false)}>\n <ColorPicker\n color={color}\n onChange={(hexValue) =>\n onChange({ target: { name, value: hexValue, type: attribute.type } })\n }\n />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" as=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <FieldInput\n id=\"color-picker-value\"\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n value={value}\n placeholder=\"#000000\"\n onChange={onChange}\n />\n </Flex>\n </FocusTrap>\n </ColorPickerPopover>\n )}\n <FieldHint />\n <FieldError />\n </Flex>\n </Field>\n );\n }\n);\n"],"names":["setRef","ref","value","composeRefs","refs","node","useComposedRefs","React","ColorPreview","styled","props","ColorPicker","HexColorPicker","theme","ColorPickerToggle","BaseButton","ColorPickerPopover","Popover","ColorPickerInput","attribute","description","disabled","error","intlLabel","labelAction","name","onChange","required","forwardedRef","showColorPicker","setShowColorPicker","colorPickerButtonRef","formatMessage","useIntl","color","handleBlur","e","composedRefs","jsx","Field","Flex","FieldLabel","jsxs","getTrad","Typography","CarretDown","FocusTrap","hexValue","Box","FieldInput","FieldHint","FieldError"],"mappings":"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"}
|
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
import { j as r, g as f } from "./index-e75c6fdb.mjs";
|
|
2
|
-
import * as a from "react";
|
|
3
|
-
import { BaseButton as w, Popover as R, Field as $, Flex as g, FieldLabel as T, Typography as m, FocusTrap as F, Box as B, FieldInput as _, FieldHint as E, FieldError as I } from "@strapi/design-system";
|
|
4
|
-
import { CarretDown as M } from "@strapi/icons";
|
|
5
|
-
import { HexColorPicker as H } from "react-colorful";
|
|
6
|
-
import { useIntl as D } from "react-intl";
|
|
7
|
-
import l from "styled-components";
|
|
8
|
-
import "@strapi/helper-plugin";
|
|
9
|
-
function L(e, o) {
|
|
10
|
-
typeof e == "function" ? e(o) : e != null && (e.current = o);
|
|
11
|
-
}
|
|
12
|
-
function S(...e) {
|
|
13
|
-
return (o) => e.forEach((i) => L(i, o));
|
|
14
|
-
}
|
|
15
|
-
function X(...e) {
|
|
16
|
-
return a.useCallback(S(...e), e);
|
|
17
|
-
}
|
|
18
|
-
const q = l.div`
|
|
19
|
-
border-radius: 50%;
|
|
20
|
-
width: 20px;
|
|
21
|
-
height: 20px;
|
|
22
|
-
margin-right: 10px;
|
|
23
|
-
background-color: ${(e) => e.color};
|
|
24
|
-
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
25
|
-
`, z = l(H)`
|
|
26
|
-
&& {
|
|
27
|
-
width: 100%;
|
|
28
|
-
aspect-ratio: 1.5;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.react-colorful__pointer {
|
|
32
|
-
width: ${({ theme: e }) => e.spaces[3]};
|
|
33
|
-
height: ${({ theme: e }) => e.spaces[3]};
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.react-colorful__saturation {
|
|
37
|
-
border-radius: ${({ theme: e }) => e.spaces[1]};
|
|
38
|
-
border-bottom: none;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.react-colorful__hue {
|
|
42
|
-
border-radius: 10px;
|
|
43
|
-
height: ${({ theme: e }) => e.spaces[3]};
|
|
44
|
-
margin-top: ${({ theme: e }) => e.spaces[2]};
|
|
45
|
-
}
|
|
46
|
-
`, A = l(w)`
|
|
47
|
-
display: flex;
|
|
48
|
-
justify-content: space-between;
|
|
49
|
-
align-items: center;
|
|
50
|
-
|
|
51
|
-
svg {
|
|
52
|
-
width: ${({ theme: e }) => e.spaces[2]};
|
|
53
|
-
height: ${({ theme: e }) => e.spaces[2]};
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
svg > path {
|
|
57
|
-
fill: ${({ theme: e }) => e.colors.neutral500};
|
|
58
|
-
justify-self: flex-end;
|
|
59
|
-
}
|
|
60
|
-
`, G = l(R)`
|
|
61
|
-
padding: ${({ theme: e }) => e.spaces[2]};
|
|
62
|
-
min-height: 270px;
|
|
63
|
-
`, W = a.forwardRef(
|
|
64
|
-
({
|
|
65
|
-
attribute: e,
|
|
66
|
-
description: o,
|
|
67
|
-
disabled: i = !1,
|
|
68
|
-
error: j,
|
|
69
|
-
intlLabel: k,
|
|
70
|
-
labelAction: C,
|
|
71
|
-
name: c,
|
|
72
|
-
onChange: h,
|
|
73
|
-
required: b = !1,
|
|
74
|
-
value: n = ""
|
|
75
|
-
}, y) => {
|
|
76
|
-
const [p, d] = a.useState(!1), x = a.useRef(null), { formatMessage: t } = D(), u = n || "#000000", v = (s) => {
|
|
77
|
-
s.preventDefault(), s.currentTarget.contains(s.relatedTarget) || d(!1);
|
|
78
|
-
}, P = X(y, x);
|
|
79
|
-
return /* @__PURE__ */ r.jsx(
|
|
80
|
-
$,
|
|
81
|
-
{
|
|
82
|
-
name: c,
|
|
83
|
-
id: c,
|
|
84
|
-
error: j,
|
|
85
|
-
hint: o && t(o),
|
|
86
|
-
required: b,
|
|
87
|
-
children: /* @__PURE__ */ r.jsxs(g, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
|
88
|
-
/* @__PURE__ */ r.jsx(T, { action: C, children: t(k) }),
|
|
89
|
-
/* @__PURE__ */ r.jsxs(
|
|
90
|
-
A,
|
|
91
|
-
{
|
|
92
|
-
ref: P,
|
|
93
|
-
"aria-label": t({
|
|
94
|
-
id: f("color-picker.toggle.aria-label"),
|
|
95
|
-
defaultMessage: "Color picker toggle"
|
|
96
|
-
}),
|
|
97
|
-
"aria-controls": "color-picker-value",
|
|
98
|
-
"aria-haspopup": "dialog",
|
|
99
|
-
"aria-expanded": p,
|
|
100
|
-
"aria-disabled": i,
|
|
101
|
-
disabled: i,
|
|
102
|
-
onClick: () => d(!p),
|
|
103
|
-
children: [
|
|
104
|
-
/* @__PURE__ */ r.jsxs(g, { children: [
|
|
105
|
-
/* @__PURE__ */ r.jsx(q, { color: u }),
|
|
106
|
-
/* @__PURE__ */ r.jsx(
|
|
107
|
-
m,
|
|
108
|
-
{
|
|
109
|
-
style: { textTransform: "uppercase" },
|
|
110
|
-
textColor: n ? void 0 : "neutral600",
|
|
111
|
-
variant: "omega",
|
|
112
|
-
children: u
|
|
113
|
-
}
|
|
114
|
-
)
|
|
115
|
-
] }),
|
|
116
|
-
/* @__PURE__ */ r.jsx(M, { "aria-hidden": !0 })
|
|
117
|
-
]
|
|
118
|
-
}
|
|
119
|
-
),
|
|
120
|
-
p && /* @__PURE__ */ r.jsx(
|
|
121
|
-
G,
|
|
122
|
-
{
|
|
123
|
-
onBlur: v,
|
|
124
|
-
role: "dialog",
|
|
125
|
-
source: x,
|
|
126
|
-
spacing: 4,
|
|
127
|
-
children: /* @__PURE__ */ r.jsxs(F, { onEscape: () => d(!1), children: [
|
|
128
|
-
/* @__PURE__ */ r.jsx(
|
|
129
|
-
z,
|
|
130
|
-
{
|
|
131
|
-
color: u,
|
|
132
|
-
onChange: (s) => h({ target: { name: c, value: s, type: e.type } })
|
|
133
|
-
}
|
|
134
|
-
),
|
|
135
|
-
/* @__PURE__ */ r.jsxs(g, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
|
|
136
|
-
/* @__PURE__ */ r.jsx(B, { paddingRight: 2, children: /* @__PURE__ */ r.jsx(m, { variant: "omega", as: "label", textColor: "neutral600", children: t({
|
|
137
|
-
id: f("color-picker.input.format"),
|
|
138
|
-
defaultMessage: "HEX"
|
|
139
|
-
}) }) }),
|
|
140
|
-
/* @__PURE__ */ r.jsx(
|
|
141
|
-
_,
|
|
142
|
-
{
|
|
143
|
-
id: "color-picker-value",
|
|
144
|
-
"aria-label": t({
|
|
145
|
-
id: f("color-picker.input.aria-label"),
|
|
146
|
-
defaultMessage: "Color picker input"
|
|
147
|
-
}),
|
|
148
|
-
style: { textTransform: "uppercase" },
|
|
149
|
-
value: n,
|
|
150
|
-
placeholder: "#000000",
|
|
151
|
-
onChange: h
|
|
152
|
-
}
|
|
153
|
-
)
|
|
154
|
-
] })
|
|
155
|
-
] })
|
|
156
|
-
}
|
|
157
|
-
),
|
|
158
|
-
/* @__PURE__ */ r.jsx(E, {}),
|
|
159
|
-
/* @__PURE__ */ r.jsx(I, {})
|
|
160
|
-
] })
|
|
161
|
-
}
|
|
162
|
-
);
|
|
163
|
-
}
|
|
164
|
-
);
|
|
165
|
-
export {
|
|
166
|
-
W as ColorPickerInput
|
|
167
|
-
};
|
|
168
|
-
//# sourceMappingURL=ColorPickerInput-3335ebf5.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerInput-3335ebf5.mjs","sources":["../../admin/src/hooks/useComposeRefs.ts","../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/**\n * Takes multiple React like refs either React.Ref or a callback:\n * (node: T) => void and returns a single function that can be\n * passed to a React component as a ref.\n *\n * Example:\n * ```tsx\n * import { useComposedRefs } from '../hooks/useComposedRefs';\n *\n * const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {\n * const ref = useComposedRefs(internalRef, forwardedRef);\n *\n * React.useEffect(() => {\n * ref.current.focus();\n * }, [ref]);\n *\n * return <input ref={ref} />\n * }\n * ```\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import * as React from 'react';\n\nimport {\n BaseButton,\n Box,\n Field,\n FieldError,\n FieldHint,\n FieldInput,\n FieldLabel,\n Flex,\n FocusTrap,\n Popover,\n Typography,\n} from '@strapi/design-system';\nimport { CarretDown } from '@strapi/icons';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport styled from 'styled-components';\n\nimport { useComposedRefs } from '../hooks/useComposeRefs';\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(BaseButton)`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\n/**\n * TODO: A lot of these props should extend `FieldProps`\n */\ninterface ColorPickerInputProps {\n intlLabel: MessageDescriptor;\n /**\n * TODO: this should be extended from `FieldInputProps['onChange']\n * but that conflicts with it's secondary usage in `HexColorPicker`\n */\n onChange: (event: { target: { name: string; value: string; type: string } }) => void;\n attribute: { type: string; [key: string]: unknown };\n name: string;\n description?: MessageDescriptor;\n disabled?: boolean;\n error?: string;\n labelAction?: React.ReactNode;\n required?: boolean;\n value?: string;\n}\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n (\n {\n attribute,\n description,\n disabled = false,\n error,\n intlLabel,\n labelAction,\n name,\n onChange,\n required = false,\n value = '',\n },\n forwardedRef\n ) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const color = value || '#000000';\n\n const handleBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n\n if (!e.currentTarget.contains(e.relatedTarget)) {\n setShowColorPicker(false);\n }\n };\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field\n name={name}\n id={name}\n // GenericInput calls formatMessage and returns a string for the error\n error={error}\n hint={description && formatMessage(description)}\n required={required}\n >\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n onClick={() => setShowColorPicker(!showColorPicker)}\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CarretDown aria-hidden />\n </ColorPickerToggle>\n {showColorPicker && (\n <ColorPickerPopover\n onBlur={handleBlur}\n role=\"dialog\"\n source={colorPickerButtonRef}\n spacing={4}\n >\n <FocusTrap onEscape={() => setShowColorPicker(false)}>\n <ColorPicker\n color={color}\n onChange={(hexValue) =>\n onChange({ target: { name, value: hexValue, type: attribute.type } })\n }\n />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" as=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <FieldInput\n id=\"color-picker-value\"\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n value={value}\n placeholder=\"#000000\"\n onChange={onChange}\n />\n </Flex>\n </FocusTrap>\n </ColorPickerPopover>\n )}\n <FieldHint />\n <FieldError />\n </Flex>\n </Field>\n );\n }\n);\n"],"names":["setRef","ref","value","composeRefs","refs","node","useComposedRefs","React","ColorPreview","styled","props","ColorPicker","HexColorPicker","theme","ColorPickerToggle","BaseButton","ColorPickerPopover","Popover","ColorPickerInput","attribute","description","disabled","error","intlLabel","labelAction","name","onChange","required","forwardedRef","showColorPicker","setShowColorPicker","colorPickerButtonRef","formatMessage","useIntl","color","handleBlur","e","composedRefs","jsx","Field","Flex","FieldLabel","jsxs","getTrad","Typography","CarretDown","FocusTrap","hexValue","Box","FieldInput","FieldHint","FieldError"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={"color-picker.description":"Vyberte libovolnou barvu","color-picker.input.aria-label":"Vstup pro výběr barvy","color-picker.input.format":"HEX","color-picker.label":"Barva","color-picker.options.advanced.regex":"RegExp vzor","color-picker.options.advanced.regex.description":"Zadejte regulární výraz pro ověření hodnoty HEX","color-picker.options.advanced.requiredField":"Povinné pole","color-picker.options.advanced.requiredField.description":"Pokud je toto pole prázdné, nebudete moci vytvořit záznam","color-picker.settings":"Nastavení","color-picker.toggle.aria-label":"Přepínač výběru barvy"};exports.default=e;
|
|
2
|
-
//# sourceMappingURL=cs-67f98136.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"cs-67f98136.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"cs-70e06424.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
|