@strapi/plugin-color-picker 4.13.0-alpha.2 → 4.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/LICENSE +0 -15
- package/admin/src/components/ColorPicker/ColorPickerIcon/index.js +0 -26
- package/admin/src/components/ColorPicker/ColorPickerInput/index.js +0 -214
- 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 -65
- package/admin/src/hooks/useComposeRefs.js +0 -48
- package/admin/src/index.js +0 -88
- 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/dist/server/index.d.ts +0 -4
- package/dist/server/index.js +0 -7
- package/dist/server/index.js.map +0 -1
- package/dist/server/register.d.ts +0 -1
- package/dist/server/register.js +0 -12
- package/dist/server/register.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/plugin-color-picker",
|
|
3
|
-
"version": "4.13.0
|
|
3
|
+
"version": "4.13.0",
|
|
4
4
|
"description": "Strapi maintained Custom Fields",
|
|
5
5
|
"strapi": {
|
|
6
6
|
"name": "color-picker",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@strapi/design-system": "1.9.0",
|
|
13
|
-
"@strapi/helper-plugin": "4.13.0
|
|
13
|
+
"@strapi/helper-plugin": "4.13.0",
|
|
14
14
|
"@strapi/icons": "1.9.0",
|
|
15
15
|
"prop-types": "^15.8.1",
|
|
16
16
|
"react-colorful": "5.6.1",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"node": ">=16.0.0 <=20.x.x",
|
|
71
71
|
"npm": ">=6.0.0"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "cc7c99b8c74d829e98d6d4bc5a2ba364587a3be9"
|
|
74
74
|
}
|
package/LICENSE
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
Copyright (c) 2015-present Strapi Solutions SAS
|
|
2
|
-
|
|
3
|
-
Portions of the Strapi software are licensed as follows:
|
|
4
|
-
|
|
5
|
-
* If you are accessing or using any component of the software that resides under an "ee/" directory, then you are deemed to be using our “Enterprise Edition” of the software and you understand and agree that the software is not licensed under the "MIT Expat" license as set forth below but instead, all the software you access is licensed under the license defined in "strapi/packages/core/admin/ee/LICENSE" and located at https://github.com/strapi/strapi/blob/a76b557047e9ef1c168dbf1b6cf879bcc3022de6/packages/core/admin/ee/LICENSE, unless (a) you or the company you represent has signed an alternative agreement referencing this code, then such signed agreement applies or (b) you are using the software in connection with a subscription to our cloud offering, then the terms of the agreement relevant to the cloud offering which you have assented to apply and the software licenses included in that agreement shall apply.
|
|
6
|
-
|
|
7
|
-
* If (a) you are not accessing or using the software that resides under an “ee/” directory and therefore you are only accessing or using our “Community Edition” of the Software and (b) you have no registered account on our cloud offering, then we are providing you the software under the "MIT Expat" license as set forth below.
|
|
8
|
-
|
|
9
|
-
MIT Expat License
|
|
10
|
-
|
|
11
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
12
|
-
|
|
13
|
-
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
@@ -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;
|
|
@@ -1,238 +0,0 @@
|
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
-
|
|
3
|
-
exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
|
|
4
|
-
.c9 {
|
|
5
|
-
border: 0;
|
|
6
|
-
-webkit-clip: rect(0 0 0 0);
|
|
7
|
-
clip: rect(0 0 0 0);
|
|
8
|
-
height: 1px;
|
|
9
|
-
margin: -1px;
|
|
10
|
-
overflow: hidden;
|
|
11
|
-
padding: 0;
|
|
12
|
-
position: absolute;
|
|
13
|
-
width: 1px;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.c1 {
|
|
17
|
-
font-size: 0.75rem;
|
|
18
|
-
line-height: 1.33;
|
|
19
|
-
font-weight: 600;
|
|
20
|
-
color: #32324d;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.c8 {
|
|
24
|
-
font-size: 0.875rem;
|
|
25
|
-
line-height: 1.43;
|
|
26
|
-
color: #666687;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.c3 {
|
|
30
|
-
background: #ffffff;
|
|
31
|
-
padding: 8px;
|
|
32
|
-
border-radius: 4px;
|
|
33
|
-
border-color: #dcdce4;
|
|
34
|
-
border: 1px solid #dcdce4;
|
|
35
|
-
cursor: pointer;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.c0 {
|
|
39
|
-
-webkit-align-items: stretch;
|
|
40
|
-
-webkit-box-align: stretch;
|
|
41
|
-
-ms-flex-align: stretch;
|
|
42
|
-
align-items: stretch;
|
|
43
|
-
display: -webkit-box;
|
|
44
|
-
display: -webkit-flex;
|
|
45
|
-
display: -ms-flexbox;
|
|
46
|
-
display: flex;
|
|
47
|
-
-webkit-flex-direction: column;
|
|
48
|
-
-ms-flex-direction: column;
|
|
49
|
-
flex-direction: column;
|
|
50
|
-
gap: 4px;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.c4 {
|
|
54
|
-
-webkit-align-items: center;
|
|
55
|
-
-webkit-box-align: center;
|
|
56
|
-
-ms-flex-align: center;
|
|
57
|
-
align-items: center;
|
|
58
|
-
display: -webkit-box;
|
|
59
|
-
display: -webkit-flex;
|
|
60
|
-
display: -ms-flexbox;
|
|
61
|
-
display: flex;
|
|
62
|
-
-webkit-flex-direction: row;
|
|
63
|
-
-ms-flex-direction: row;
|
|
64
|
-
flex-direction: row;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.c5 {
|
|
68
|
-
position: relative;
|
|
69
|
-
outline: none;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.c5 > svg {
|
|
73
|
-
height: 12px;
|
|
74
|
-
width: 12px;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.c5 > svg > g,
|
|
78
|
-
.c5 > svg path {
|
|
79
|
-
fill: #ffffff;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.c5[aria-disabled='true'] {
|
|
83
|
-
pointer-events: none;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.c5:after {
|
|
87
|
-
-webkit-transition-property: all;
|
|
88
|
-
transition-property: all;
|
|
89
|
-
-webkit-transition-duration: 0.2s;
|
|
90
|
-
transition-duration: 0.2s;
|
|
91
|
-
border-radius: 8px;
|
|
92
|
-
content: '';
|
|
93
|
-
position: absolute;
|
|
94
|
-
top: -4px;
|
|
95
|
-
bottom: -4px;
|
|
96
|
-
left: -4px;
|
|
97
|
-
right: -4px;
|
|
98
|
-
border: 2px solid transparent;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.c5:focus-visible {
|
|
102
|
-
outline: none;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.c5:focus-visible:after {
|
|
106
|
-
border-radius: 8px;
|
|
107
|
-
content: '';
|
|
108
|
-
position: absolute;
|
|
109
|
-
top: -5px;
|
|
110
|
-
bottom: -5px;
|
|
111
|
-
left: -5px;
|
|
112
|
-
right: -5px;
|
|
113
|
-
border: 2px solid #4945ff;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.c2 {
|
|
117
|
-
display: -webkit-box;
|
|
118
|
-
display: -webkit-flex;
|
|
119
|
-
display: -ms-flexbox;
|
|
120
|
-
display: flex;
|
|
121
|
-
-webkit-align-items: center;
|
|
122
|
-
-webkit-box-align: center;
|
|
123
|
-
-ms-flex-align: center;
|
|
124
|
-
align-items: center;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.c7 {
|
|
128
|
-
border-radius: 50%;
|
|
129
|
-
width: 20px;
|
|
130
|
-
height: 20px;
|
|
131
|
-
margin-right: 10px;
|
|
132
|
-
background-color: #000000;
|
|
133
|
-
border: 1px solid rgba(0,0,0,0.1);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.c6 {
|
|
137
|
-
display: -webkit-box;
|
|
138
|
-
display: -webkit-flex;
|
|
139
|
-
display: -ms-flexbox;
|
|
140
|
-
display: flex;
|
|
141
|
-
-webkit-box-pack: justify;
|
|
142
|
-
-webkit-justify-content: space-between;
|
|
143
|
-
-ms-flex-pack: justify;
|
|
144
|
-
justify-content: space-between;
|
|
145
|
-
-webkit-align-items: center;
|
|
146
|
-
-webkit-box-align: center;
|
|
147
|
-
-ms-flex-align: center;
|
|
148
|
-
align-items: center;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.c6 svg {
|
|
152
|
-
width: 8px;
|
|
153
|
-
height: 8px;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.c6 svg > path {
|
|
157
|
-
fill: #8e8ea9;
|
|
158
|
-
justify-self: flex-end;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
<div>
|
|
162
|
-
<div
|
|
163
|
-
class=""
|
|
164
|
-
>
|
|
165
|
-
<div
|
|
166
|
-
class="c0"
|
|
167
|
-
>
|
|
168
|
-
<label
|
|
169
|
-
class="c1 c2"
|
|
170
|
-
for="color"
|
|
171
|
-
>
|
|
172
|
-
color-picker
|
|
173
|
-
</label>
|
|
174
|
-
<button
|
|
175
|
-
aria-controls="color-picker-value"
|
|
176
|
-
aria-disabled="false"
|
|
177
|
-
aria-expanded="false"
|
|
178
|
-
aria-haspopup="dialog"
|
|
179
|
-
aria-label="Color picker toggle"
|
|
180
|
-
class="c3 c4 c5 c6"
|
|
181
|
-
type="button"
|
|
182
|
-
>
|
|
183
|
-
<div
|
|
184
|
-
class="c4"
|
|
185
|
-
>
|
|
186
|
-
<div
|
|
187
|
-
class="c7"
|
|
188
|
-
color="#000000"
|
|
189
|
-
/>
|
|
190
|
-
<span
|
|
191
|
-
class="c8"
|
|
192
|
-
style="text-transform: uppercase;"
|
|
193
|
-
>
|
|
194
|
-
#000000
|
|
195
|
-
</span>
|
|
196
|
-
</div>
|
|
197
|
-
<svg
|
|
198
|
-
aria-hidden="true"
|
|
199
|
-
fill="none"
|
|
200
|
-
height="1rem"
|
|
201
|
-
viewBox="0 0 14 8"
|
|
202
|
-
width="1rem"
|
|
203
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
204
|
-
>
|
|
205
|
-
<path
|
|
206
|
-
clip-rule="evenodd"
|
|
207
|
-
d="M14 .889a.86.86 0 0 1-.26.625L7.615 7.736A.834.834 0 0 1 7 8a.834.834 0 0 1-.615-.264L.26 1.514A.861.861 0 0 1 0 .889c0-.24.087-.45.26-.625A.834.834 0 0 1 .875 0h12.25c.237 0 .442.088.615.264a.86.86 0 0 1 .26.625Z"
|
|
208
|
-
fill="#32324D"
|
|
209
|
-
fill-rule="evenodd"
|
|
210
|
-
/>
|
|
211
|
-
</svg>
|
|
212
|
-
</button>
|
|
213
|
-
</div>
|
|
214
|
-
</div>
|
|
215
|
-
<div
|
|
216
|
-
class="c9"
|
|
217
|
-
>
|
|
218
|
-
<p
|
|
219
|
-
aria-live="polite"
|
|
220
|
-
aria-relevant="all"
|
|
221
|
-
id="live-region-log"
|
|
222
|
-
role="log"
|
|
223
|
-
/>
|
|
224
|
-
<p
|
|
225
|
-
aria-live="polite"
|
|
226
|
-
aria-relevant="all"
|
|
227
|
-
id="live-region-status"
|
|
228
|
-
role="status"
|
|
229
|
-
/>
|
|
230
|
-
<p
|
|
231
|
-
aria-live="assertive"
|
|
232
|
-
aria-relevant="all"
|
|
233
|
-
id="live-region-alert"
|
|
234
|
-
role="alert"
|
|
235
|
-
/>
|
|
236
|
-
</div>
|
|
237
|
-
</div>
|
|
238
|
-
`;
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import { lightTheme, ThemeProvider } from '@strapi/design-system';
|
|
4
|
-
import { fireEvent, render, screen } from '@testing-library/react';
|
|
5
|
-
import { IntlProvider } from 'react-intl';
|
|
6
|
-
|
|
7
|
-
import ColorPickerInput from '../ColorPicker/ColorPickerInput';
|
|
8
|
-
|
|
9
|
-
const mockAttribute = {
|
|
10
|
-
customField: 'plugin::color-picker.color',
|
|
11
|
-
pluginOptions: { i18n: { localized: true } },
|
|
12
|
-
type: 'string',
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
const App = (
|
|
16
|
-
<IntlProvider locale="en" messages={{}} textComponent="span">
|
|
17
|
-
<ThemeProvider theme={lightTheme}>
|
|
18
|
-
<ColorPickerInput
|
|
19
|
-
name="color"
|
|
20
|
-
value=""
|
|
21
|
-
onChange={jest.fn()}
|
|
22
|
-
attribute={mockAttribute}
|
|
23
|
-
intlLabel={{ id: 'color-picker', defaultMessage: 'color-picker' }}
|
|
24
|
-
/>
|
|
25
|
-
</ThemeProvider>
|
|
26
|
-
</IntlProvider>
|
|
27
|
-
);
|
|
28
|
-
|
|
29
|
-
describe('<ColorPickerInput />', () => {
|
|
30
|
-
/**
|
|
31
|
-
* We do this because –
|
|
32
|
-
* https://github.com/facebook/jest/issues/12670
|
|
33
|
-
*/
|
|
34
|
-
beforeAll(() => {
|
|
35
|
-
jest.setTimeout(30000);
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Reset timeout to what is expected
|
|
40
|
-
*/
|
|
41
|
-
afterAll(() => {
|
|
42
|
-
jest.setTimeout(5000);
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
it('renders and matches the snapshot', () => {
|
|
46
|
-
const { container } = render(App);
|
|
47
|
-
|
|
48
|
-
expect(container).toMatchSnapshot();
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
it('toggles the popover', () => {
|
|
52
|
-
render(App);
|
|
53
|
-
const colorPickerToggle = screen.getByRole('button', { name: 'Color picker toggle' });
|
|
54
|
-
fireEvent.click(colorPickerToggle);
|
|
55
|
-
|
|
56
|
-
const popover = screen.getByRole('dialog');
|
|
57
|
-
const saturation = screen.getByRole('slider', { name: 'Color' });
|
|
58
|
-
const hue = screen.getByRole('slider', { name: 'Hue' });
|
|
59
|
-
const input = screen.getByRole('textbox', { name: 'Color picker input' });
|
|
60
|
-
expect(popover).toBeVisible();
|
|
61
|
-
expect(saturation).toBeVisible();
|
|
62
|
-
expect(hue).toBeVisible();
|
|
63
|
-
expect(input).toBeVisible();
|
|
64
|
-
});
|
|
65
|
-
});
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Set a given ref to a given value
|
|
5
|
-
* This utility takes care of different types of refs: callback refs and RefObject(s)
|
|
6
|
-
*/
|
|
7
|
-
function setRef(ref, value) {
|
|
8
|
-
if (typeof ref === 'function') {
|
|
9
|
-
ref(value);
|
|
10
|
-
} else if (ref !== null && ref !== undefined) {
|
|
11
|
-
ref.current = value;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* A utility to compose multiple refs together
|
|
17
|
-
* Accepts callback refs and RefObject(s)
|
|
18
|
-
*/
|
|
19
|
-
function composeRefs(...refs) {
|
|
20
|
-
return (node) => refs.forEach((ref) => setRef(ref, node));
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* Takes multiple React like refs either React.Ref or a callback:
|
|
25
|
-
* (node: T) => void and returns a single function that can be
|
|
26
|
-
* passed to a React component as a ref.
|
|
27
|
-
*
|
|
28
|
-
* Example:
|
|
29
|
-
* ```tsx
|
|
30
|
-
* import { useComposedRefs } from '../hooks/useComposedRefs';
|
|
31
|
-
*
|
|
32
|
-
* const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {
|
|
33
|
-
* const ref = useComposedRefs(internalRef, forwardedRef);
|
|
34
|
-
*
|
|
35
|
-
* React.useEffect(() => {
|
|
36
|
-
* ref.current.focus();
|
|
37
|
-
* }, [ref]);
|
|
38
|
-
*
|
|
39
|
-
* return <input ref={ref} />
|
|
40
|
-
* }
|
|
41
|
-
* ```
|
|
42
|
-
*/
|
|
43
|
-
function useComposedRefs(...refs) {
|
|
44
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
45
|
-
return React.useCallback(composeRefs(...refs), refs);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
export { composeRefs, useComposedRefs };
|
package/admin/src/index.js
DELETED
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import { prefixPluginTranslations } from '@strapi/helper-plugin';
|
|
2
|
-
|
|
3
|
-
import ColorPickerIcon from './components/ColorPicker/ColorPickerIcon';
|
|
4
|
-
import pluginId from './pluginId';
|
|
5
|
-
import getTrad from './utils/getTrad';
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
register(app) {
|
|
9
|
-
app.customFields.register({
|
|
10
|
-
name: 'color',
|
|
11
|
-
pluginId: 'color-picker',
|
|
12
|
-
type: 'string',
|
|
13
|
-
icon: ColorPickerIcon,
|
|
14
|
-
intlLabel: {
|
|
15
|
-
id: getTrad('color-picker.label'),
|
|
16
|
-
defaultMessage: 'Color',
|
|
17
|
-
},
|
|
18
|
-
intlDescription: {
|
|
19
|
-
id: getTrad('color-picker.description'),
|
|
20
|
-
defaultMessage: 'Select any color',
|
|
21
|
-
},
|
|
22
|
-
components: {
|
|
23
|
-
Input: async () =>
|
|
24
|
-
import(
|
|
25
|
-
/* webpackChunkName: "color-picker-input-component" */ './components/ColorPicker/ColorPickerInput'
|
|
26
|
-
),
|
|
27
|
-
},
|
|
28
|
-
options: {
|
|
29
|
-
advanced: [
|
|
30
|
-
{
|
|
31
|
-
intlLabel: {
|
|
32
|
-
id: getTrad('color-picker.options.advanced.regex'),
|
|
33
|
-
defaultMessage: 'RegExp pattern',
|
|
34
|
-
},
|
|
35
|
-
name: 'regex',
|
|
36
|
-
type: 'text',
|
|
37
|
-
defaultValue: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$',
|
|
38
|
-
description: {
|
|
39
|
-
id: getTrad('color-picker.options.advanced.regex.description'),
|
|
40
|
-
defaultMessage: 'The text of the regular expression',
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
sectionTitle: {
|
|
45
|
-
id: 'global.settings',
|
|
46
|
-
defaultMessage: 'Settings',
|
|
47
|
-
},
|
|
48
|
-
items: [
|
|
49
|
-
{
|
|
50
|
-
name: 'required',
|
|
51
|
-
type: 'checkbox',
|
|
52
|
-
intlLabel: {
|
|
53
|
-
id: getTrad('color-picker.options.advanced.requiredField'),
|
|
54
|
-
defaultMessage: 'Required field',
|
|
55
|
-
},
|
|
56
|
-
description: {
|
|
57
|
-
id: getTrad('color-picker.options.advanced.requiredField.description'),
|
|
58
|
-
defaultMessage: "You won't be able to create an entry if this field is empty",
|
|
59
|
-
},
|
|
60
|
-
},
|
|
61
|
-
],
|
|
62
|
-
},
|
|
63
|
-
],
|
|
64
|
-
},
|
|
65
|
-
});
|
|
66
|
-
},
|
|
67
|
-
async registerTrads({ locales }) {
|
|
68
|
-
const importedTrads = await Promise.all(
|
|
69
|
-
locales.map((locale) => {
|
|
70
|
-
return import(`./translations/${locale}.json`)
|
|
71
|
-
.then(({ default: data }) => {
|
|
72
|
-
return {
|
|
73
|
-
data: prefixPluginTranslations(data, pluginId),
|
|
74
|
-
locale,
|
|
75
|
-
};
|
|
76
|
-
})
|
|
77
|
-
.catch(() => {
|
|
78
|
-
return {
|
|
79
|
-
data: {},
|
|
80
|
-
locale,
|
|
81
|
-
};
|
|
82
|
-
});
|
|
83
|
-
})
|
|
84
|
-
);
|
|
85
|
-
|
|
86
|
-
return Promise.resolve(importedTrads);
|
|
87
|
-
},
|
|
88
|
-
};
|
package/admin/src/pluginId.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"color-picker.description": "Vyberte libovolnou barvu",
|
|
3
|
-
"color-picker.input.aria-label": "Vstup pro výběr barvy",
|
|
4
|
-
"color-picker.input.format": "HEX",
|
|
5
|
-
"color-picker.label": "Barva",
|
|
6
|
-
"color-picker.options.advanced.regex": "RegExp vzor",
|
|
7
|
-
"color-picker.options.advanced.regex.description": "Zadejte regulární výraz pro ověření hodnoty HEX",
|
|
8
|
-
"color-picker.options.advanced.requiredField": "Povinné pole",
|
|
9
|
-
"color-picker.options.advanced.requiredField.description": "Pokud je toto pole prázdné, nebudete moci vytvořit záznam",
|
|
10
|
-
"color-picker.settings": "Nastavení",
|
|
11
|
-
"color-picker.toggle.aria-label": "Přepínač výběru barvy"
|
|
12
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"color-picker.description": "Select any color",
|
|
3
|
-
"color-picker.input.aria-label": "Color picker input",
|
|
4
|
-
"color-picker.input.format": "HEX",
|
|
5
|
-
"color-picker.label": "Color",
|
|
6
|
-
"color-picker.options.advanced.regex": "RegExp pattern",
|
|
7
|
-
"color-picker.options.advanced.regex.description": "Provide a regular expression to validate the HEX value",
|
|
8
|
-
"color-picker.options.advanced.requiredField": "Required field",
|
|
9
|
-
"color-picker.options.advanced.requiredField.description": "You won't be able to create an entry if this field is empty",
|
|
10
|
-
"color-picker.settings": "Settings",
|
|
11
|
-
"color-picker.toggle.aria-label": "Color picker toggle",
|
|
12
|
-
"plugin.description.long": "A Strapi-maintained color picker custom field. Use saturation and hue sliders to select a color and save the value as a HEX string.",
|
|
13
|
-
"plugin.description.short": "A Strapi-maintained color picker custom field.",
|
|
14
|
-
"plugin.name": "Color picker"
|
|
15
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"color-picker.description": "Выбирайте любые цвета",
|
|
3
|
-
"color-picker.input.aria-label": "Введите выбранный цвет",
|
|
4
|
-
"color-picker.input.format": "HEX",
|
|
5
|
-
"color-picker.label": "Цвет",
|
|
6
|
-
"color-picker.options.advanced.regex": "Шаблон регулярного выражения (RegExp)",
|
|
7
|
-
"color-picker.options.advanced.regex.description": "Обеспечивает проверку с помощью регулярного выражение для HEX (шестнадцатеричного) HEX значения цвета",
|
|
8
|
-
"color-picker.options.advanced.requiredField": "Обязательное поле",
|
|
9
|
-
"color-picker.options.advanced.requiredField.description": "Вы не сможете продолжить, если это поле пусто",
|
|
10
|
-
"color-picker.settings": "Настройки",
|
|
11
|
-
"color-picker.toggle.aria-label": "Переключатель средства выбора цвета",
|
|
12
|
-
"plugin.description.long": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi. Используйте ползунки насыщенности и оттенка, чтобы выбрать цвет и сохранить его HEX (шестнадцатеричное) значение.",
|
|
13
|
-
"plugin.description.short": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi.",
|
|
14
|
-
"plugin.name": "Выбор цвета"
|
|
15
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"color-picker.description": "Välj färger",
|
|
3
|
-
"color-picker.input.aria-label": "Färgväljarinmatning",
|
|
4
|
-
"color-picker.input.format": "HEX",
|
|
5
|
-
"color-picker.label": "Färgväljare",
|
|
6
|
-
"color-picker.options.advanced.regex": "RegEx-mönster",
|
|
7
|
-
"color-picker.options.advanced.regex.description": "Ange ett regex-mönster för att validera HEX-värdet",
|
|
8
|
-
"color-picker.options.advanced.requiredField": "Obligatoriskt fält",
|
|
9
|
-
"color-picker.options.advanced.requiredField.description": "Du kommer inte att kunna skapa en post om det här fältet är tomt",
|
|
10
|
-
"color-picker.settings": "Inställningar",
|
|
11
|
-
"color-picker.toggle.aria-label": "Växla färgväljare"
|
|
12
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"color-picker.description": "Herhangi bir renk seç",
|
|
3
|
-
"color-picker.input.aria-label": "Renk seçici girişi",
|
|
4
|
-
"color-picker.input.format": "HEX",
|
|
5
|
-
"color-picker.label": "Renk",
|
|
6
|
-
"color-picker.options.advanced.regex": "RegExp ifadesi",
|
|
7
|
-
"color-picker.options.advanced.regex.description": "HEX değerini doğrulamak için bir RegExp ifadesi sağla",
|
|
8
|
-
"color-picker.options.advanced.requiredField": "Zorunlu alan",
|
|
9
|
-
"color-picker.options.advanced.requiredField.description": "Bu alan boş olursa yeni bir girdi oluşturamazsın",
|
|
10
|
-
"color-picker.settings": "Ayarlar",
|
|
11
|
-
"color-picker.toggle.aria-label": "Renk seçici anahtarı"
|
|
12
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"color-picker.description": "選擇任意顏色",
|
|
3
|
-
"color-picker.input.aria-label": "選色器輸入",
|
|
4
|
-
"color-picker.input.format": "HEX",
|
|
5
|
-
"color-picker.label": "顏色",
|
|
6
|
-
"color-picker.options.advanced.regex": "正則表達模式",
|
|
7
|
-
"color-picker.options.advanced.regex.description": "提供正則表達式以驗證 HEX 值",
|
|
8
|
-
"color-picker.options.advanced.requiredField": "必填欄位",
|
|
9
|
-
"color-picker.options.advanced.requiredField.description": "若此欄位為空,您將無法建立項目",
|
|
10
|
-
"color-picker.settings": "設定",
|
|
11
|
-
"color-picker.toggle.aria-label": "選色器開關"
|
|
12
|
-
}
|
package/dist/server/index.d.ts
DELETED
package/dist/server/index.js
DELETED
package/dist/server/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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 +0,0 @@
|
|
|
1
|
-
export declare const register: ({ strapi }: any) => void;
|
package/dist/server/register.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.register = void 0;
|
|
4
|
-
const register = ({ strapi }) => {
|
|
5
|
-
strapi.customFields.register({
|
|
6
|
-
name: 'color',
|
|
7
|
-
plugin: 'color-picker',
|
|
8
|
-
type: 'string',
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
|
-
exports.register = register;
|
|
12
|
-
//# sourceMappingURL=register.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|