@wordpress/components 19.0.4 → 19.0.5
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.
|
@@ -11,7 +11,7 @@ var _element = require("@wordpress/element");
|
|
|
11
11
|
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
13
|
|
|
14
|
-
var _lodash =
|
|
14
|
+
var _lodash = require("lodash");
|
|
15
15
|
|
|
16
16
|
var _i18n = require("@wordpress/i18n");
|
|
17
17
|
|
|
@@ -67,12 +67,14 @@ function ColorNameInput(_ref) {
|
|
|
67
67
|
|
|
68
68
|
function ColorOption(_ref2) {
|
|
69
69
|
let {
|
|
70
|
+
canOnlyChangeValues,
|
|
70
71
|
color,
|
|
71
72
|
onChange,
|
|
72
73
|
isEditing,
|
|
73
74
|
onStartEditing,
|
|
74
75
|
onRemove,
|
|
75
|
-
onStopEditing
|
|
76
|
+
onStopEditing,
|
|
77
|
+
slugPrefix
|
|
76
78
|
} = _ref2;
|
|
77
79
|
const focusOutsideProps = (0, _compose.__experimentalUseFocusOutside)(onStopEditing);
|
|
78
80
|
return (0, _element.createElement)(_styles.ColorItem, (0, _extends2.default)({
|
|
@@ -82,13 +84,13 @@ function ColorOption(_ref2) {
|
|
|
82
84
|
justify: "flex-start"
|
|
83
85
|
}, (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_styles.ColorIndicatorStyled, {
|
|
84
86
|
colorValue: color.color
|
|
85
|
-
})), (0, _element.createElement)(_flex.FlexItem, null, isEditing ? (0, _element.createElement)(ColorNameInput, {
|
|
87
|
+
})), (0, _element.createElement)(_flex.FlexItem, null, isEditing && !canOnlyChangeValues ? (0, _element.createElement)(ColorNameInput, {
|
|
86
88
|
value: color.name,
|
|
87
89
|
onChange: nextName => onChange({ ...color,
|
|
88
90
|
name: nextName,
|
|
89
|
-
slug: (0, _lodash.
|
|
91
|
+
slug: slugPrefix + (0, _lodash.kebabCase)(nextName)
|
|
90
92
|
})
|
|
91
|
-
}) : (0, _element.createElement)(_styles.ColorNameContainer, null, color.name)), isEditing && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_styles.RemoveButton, {
|
|
93
|
+
}) : (0, _element.createElement)(_styles.ColorNameContainer, null, color.name)), isEditing && !canOnlyChangeValues && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_styles.RemoveButton, {
|
|
92
94
|
isSmall: true,
|
|
93
95
|
icon: _icons.lineSolid,
|
|
94
96
|
label: (0, _i18n.__)('Remove color'),
|
|
@@ -109,7 +111,9 @@ function ColorPaletteEditListView(_ref3) {
|
|
|
109
111
|
colors,
|
|
110
112
|
onChange,
|
|
111
113
|
editingColor,
|
|
112
|
-
setEditingColor
|
|
114
|
+
setEditingColor,
|
|
115
|
+
canOnlyChangeValues,
|
|
116
|
+
slugPrefix
|
|
113
117
|
} = _ref3;
|
|
114
118
|
// When unmounting the component if there are empty colors (the user did not complete the insertion) clean them.
|
|
115
119
|
const colorReference = (0, _element.useRef)();
|
|
@@ -140,6 +144,7 @@ function ColorPaletteEditListView(_ref3) {
|
|
|
140
144
|
isBordered: true,
|
|
141
145
|
isSeparated: true
|
|
142
146
|
}, colors.map((color, index) => (0, _element.createElement)(ColorOption, {
|
|
147
|
+
canOnlyChangeValues: canOnlyChangeValues,
|
|
143
148
|
key: index,
|
|
144
149
|
color: color,
|
|
145
150
|
onStartEditing: () => {
|
|
@@ -172,7 +177,8 @@ function ColorPaletteEditListView(_ref3) {
|
|
|
172
177
|
if (index === editingColor) {
|
|
173
178
|
setEditingColor(null);
|
|
174
179
|
}
|
|
175
|
-
}
|
|
180
|
+
},
|
|
181
|
+
slugPrefix: slugPrefix
|
|
176
182
|
}))));
|
|
177
183
|
}
|
|
178
184
|
|
|
@@ -181,23 +187,28 @@ const EMPTY_ARRAY = [];
|
|
|
181
187
|
function ColorEdit(_ref6) {
|
|
182
188
|
let {
|
|
183
189
|
colors = EMPTY_ARRAY,
|
|
184
|
-
onChange
|
|
190
|
+
onChange,
|
|
191
|
+
paletteLabel,
|
|
192
|
+
emptyMessage,
|
|
193
|
+
canOnlyChangeValues,
|
|
194
|
+
canReset,
|
|
195
|
+
slugPrefix = ''
|
|
185
196
|
} = _ref6;
|
|
186
197
|
const [isEditing, setIsEditing] = (0, _element.useState)(false);
|
|
187
198
|
const [editingColor, setEditingColor] = (0, _element.useState)(null);
|
|
188
199
|
const isAdding = isEditing && editingColor && colors[editingColor] && !colors[editingColor].slug;
|
|
189
200
|
const hasColors = colors.length > 0;
|
|
190
|
-
return (0, _element.createElement)(_styles.ColorEditStyles, null, (0, _element.createElement)(_styles.ColorHStackHeader, null, (0, _element.createElement)(_styles.ColorHeading, null,
|
|
201
|
+
return (0, _element.createElement)(_styles.ColorEditStyles, null, (0, _element.createElement)(_styles.ColorHStackHeader, null, (0, _element.createElement)(_styles.ColorHeading, null, paletteLabel), (0, _element.createElement)(_styles.ColorActionsContainer, null, isEditing && (0, _element.createElement)(_styles.DoneButton, {
|
|
191
202
|
isSmall: true,
|
|
192
203
|
onClick: () => {
|
|
193
204
|
setIsEditing(false);
|
|
194
205
|
setEditingColor(null);
|
|
195
206
|
}
|
|
196
|
-
}, (0, _i18n.__)('Done')), (0, _element.createElement)(_button.default, {
|
|
207
|
+
}, (0, _i18n.__)('Done')), !canOnlyChangeValues && (0, _element.createElement)(_button.default, {
|
|
197
208
|
isSmall: true,
|
|
198
209
|
isPressed: isAdding,
|
|
199
210
|
icon: _icons.plus,
|
|
200
|
-
label: (0, _i18n.__)('Add
|
|
211
|
+
label: (0, _i18n.__)('Add color'),
|
|
201
212
|
onClick: () => {
|
|
202
213
|
onChange([...colors, {
|
|
203
214
|
color: '#000',
|
|
@@ -215,9 +226,9 @@ function ColorEdit(_ref6) {
|
|
|
215
226
|
onClick: () => {
|
|
216
227
|
setIsEditing(true);
|
|
217
228
|
}
|
|
218
|
-
}), isEditing && (0, _element.createElement)(_dropdownMenu.default, {
|
|
229
|
+
}), isEditing && (canReset || !canOnlyChangeValues) && (0, _element.createElement)(_dropdownMenu.default, {
|
|
219
230
|
icon: _icons.moreVertical,
|
|
220
|
-
label: (0, _i18n.__)('
|
|
231
|
+
label: (0, _i18n.__)('Color options'),
|
|
221
232
|
toggleProps: {
|
|
222
233
|
isSmall: true
|
|
223
234
|
}
|
|
@@ -227,7 +238,7 @@ function ColorEdit(_ref6) {
|
|
|
227
238
|
} = _ref7;
|
|
228
239
|
return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_navigableContainer.NavigableMenu, {
|
|
229
240
|
role: "menu"
|
|
230
|
-
}, (0, _element.createElement)(_button.default, {
|
|
241
|
+
}, !canOnlyChangeValues && (0, _element.createElement)(_button.default, {
|
|
231
242
|
variant: "tertiary",
|
|
232
243
|
onClick: () => {
|
|
233
244
|
setEditingColor(null);
|
|
@@ -235,17 +246,26 @@ function ColorEdit(_ref6) {
|
|
|
235
246
|
onChange();
|
|
236
247
|
onClose();
|
|
237
248
|
}
|
|
238
|
-
}, (0, _i18n.__)('Remove all
|
|
249
|
+
}, (0, _i18n.__)('Remove all colors')), canReset && (0, _element.createElement)(_button.default, {
|
|
250
|
+
variant: "tertiary",
|
|
251
|
+
onClick: () => {
|
|
252
|
+
setEditingColor(null);
|
|
253
|
+
onChange();
|
|
254
|
+
onClose();
|
|
255
|
+
}
|
|
256
|
+
}, (0, _i18n.__)('Reset colors'))));
|
|
239
257
|
}))), hasColors && (0, _element.createElement)(_element.Fragment, null, isEditing && (0, _element.createElement)(ColorPaletteEditListView, {
|
|
258
|
+
canOnlyChangeValues: canOnlyChangeValues,
|
|
240
259
|
colors: colors,
|
|
241
260
|
onChange: onChange,
|
|
242
261
|
editingColor: editingColor,
|
|
243
|
-
setEditingColor: setEditingColor
|
|
262
|
+
setEditingColor: setEditingColor,
|
|
263
|
+
slugPrefix: slugPrefix
|
|
244
264
|
}), !isEditing && (0, _element.createElement)(_colorPalette.default, {
|
|
245
265
|
colors: colors,
|
|
246
266
|
onChange: () => {},
|
|
247
267
|
clearable: false,
|
|
248
268
|
disableCustomColors: true
|
|
249
|
-
})), !hasColors &&
|
|
269
|
+
})), !hasColors && emptyMessage);
|
|
250
270
|
}
|
|
251
271
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/color-edit/index.js"],"names":["ColorNameInput","value","onChange","ColorOption","color","isEditing","onStartEditing","onRemove","onStopEditing","focusOutsideProps","name","nextName","slug","lineSolid","newColor","ColorPaletteEditListView","colors","editingColor","setEditingColor","colorReference","current","some","newColors","filter","length","undefined","map","index","currentColor","currentIndex","_currentColor","EMPTY_ARRAY","ColorEdit","setIsEditing","isAdding","hasColors","plus","moreVertical","isSmall","onClose"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport kebabCase from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport { __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tColorActionsContainer,\n\tColorEditStyles,\n\tColorHeading,\n\tColorHStackHeader,\n\tColorIndicatorStyled,\n\tColorItem,\n\tColorNameContainer,\n\tColorNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\n\nfunction ColorNameInput( { value, onChange } ) {\n\treturn (\n\t\t<ColorNameInputControl\n\t\t\tlabel={ __( 'Color name' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\nfunction ColorOption( {\n\tcolor,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n} ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\treturn (\n\t\t<ColorItem\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\t{ ...( isEditing ? focusOutsideProps : {} ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicatorStyled colorValue={ color.color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing ? (\n\t\t\t\t\t\t<ColorNameInput\n\t\t\t\t\t\t\tvalue={ color.name }\n\t\t\t\t\t\t\tonChange={ ( nextName ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...color,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug: kebabCase( nextName ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorNameContainer>{ color.name }</ColorNameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<Popover\n\t\t\t\t\tposition=\"bottom left\"\n\t\t\t\t\tclassName=\"components-color-edit__color-popover\"\n\t\t\t\t>\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tcolor={ color.color }\n\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...color,\n\t\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</ColorItem>\n\t);\n}\n\nfunction ColorPaletteEditListView( {\n\tcolors,\n\tonChange,\n\teditingColor,\n\tsetEditingColor,\n} ) {\n\t// When unmounting the component if there are empty colors (the user did not complete the insertion) clean them.\n\tconst colorReference = useRef();\n\tuseEffect( () => {\n\t\tcolorReference.current = colors;\n\t}, [ colors ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( colorReference.current.some( ( { slug } ) => ! slug ) ) {\n\t\t\t\tconst newColors = colorReference.current.filter(\n\t\t\t\t\t( { slug } ) => slug\n\t\t\t\t);\n\t\t\t\tonChange( newColors.length ? newColors : undefined );\n\t\t\t}\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t{ colors.map( ( color, index ) => (\n\t\t\t\t\t<ColorOption\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingColor !== index ) {\n\t\t\t\t\t\t\t\tsetEditingColor( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tcolors.map( ( currentColor, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn newColor;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn currentColor;\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\tconst newColors = colors.filter(\n\t\t\t\t\t\t\t\t( _currentColor, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewColors.length ? newColors : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingColor }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingColor ) {\n\t\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY = [];\n\nexport default function ColorEdit( { colors = EMPTY_ARRAY, onChange } ) {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingColor, setEditingColor ] = useState( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\teditingColor &&\n\t\tcolors[ editingColor ] &&\n\t\t! colors[ editingColor ].slug;\n\n\tconst hasColors = colors.length > 0;\n\n\treturn (\n\t\t<ColorEditStyles>\n\t\t\t<ColorHStackHeader>\n\t\t\t\t<ColorHeading>{ __( 'Custom' ) }</ColorHeading>\n\t\t\t\t<ColorActionsContainer>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\tlabel={ __( 'Add custom color' ) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tcolor: '#000',\n\t\t\t\t\t\t\t\t\tname: '',\n\t\t\t\t\t\t\t\t\tslug: '',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\tsetEditingColor( colors.length );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdisabled={ ! hasColors }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'Edit colors' ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'Custom color options' ) }\n\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Remove all custom colors' ) }\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t) }\n\t\t\t\t</ColorActionsContainer>\n\t\t\t</ColorHStackHeader>\n\t\t\t{ hasColors && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<ColorPaletteEditListView\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingColor={ editingColor }\n\t\t\t\t\t\t\tsetEditingColor={ setEditingColor }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasColors &&\n\t\t\t\t__(\n\t\t\t\t\t'Custom colors are empty! Add some colors to create your own color palette.'\n\t\t\t\t) }\n\t\t</ColorEditStyles>\n\t);\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/color-edit/index.js"],"names":["ColorNameInput","value","onChange","ColorOption","canOnlyChangeValues","color","isEditing","onStartEditing","onRemove","onStopEditing","slugPrefix","focusOutsideProps","name","nextName","slug","lineSolid","newColor","ColorPaletteEditListView","colors","editingColor","setEditingColor","colorReference","current","some","newColors","filter","length","undefined","map","index","currentColor","currentIndex","_currentColor","EMPTY_ARRAY","ColorEdit","paletteLabel","emptyMessage","canReset","setIsEditing","isAdding","hasColors","plus","moreVertical","isSmall","onClose"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport { __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tColorActionsContainer,\n\tColorEditStyles,\n\tColorHeading,\n\tColorHStackHeader,\n\tColorIndicatorStyled,\n\tColorItem,\n\tColorNameContainer,\n\tColorNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\n\nfunction ColorNameInput( { value, onChange } ) {\n\treturn (\n\t\t<ColorNameInputControl\n\t\t\tlabel={ __( 'Color name' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\nfunction ColorOption( {\n\tcanOnlyChangeValues,\n\tcolor,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tslugPrefix,\n} ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\treturn (\n\t\t<ColorItem\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\t{ ...( isEditing ? focusOutsideProps : {} ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicatorStyled colorValue={ color.color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<ColorNameInput\n\t\t\t\t\t\t\tvalue={ color.name }\n\t\t\t\t\t\t\tonChange={ ( nextName ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...color,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug: slugPrefix + kebabCase( nextName ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorNameContainer>{ color.name }</ColorNameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<Popover\n\t\t\t\t\tposition=\"bottom left\"\n\t\t\t\t\tclassName=\"components-color-edit__color-popover\"\n\t\t\t\t>\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tcolor={ color.color }\n\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...color,\n\t\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</ColorItem>\n\t);\n}\n\nfunction ColorPaletteEditListView( {\n\tcolors,\n\tonChange,\n\teditingColor,\n\tsetEditingColor,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n} ) {\n\t// When unmounting the component if there are empty colors (the user did not complete the insertion) clean them.\n\tconst colorReference = useRef();\n\tuseEffect( () => {\n\t\tcolorReference.current = colors;\n\t}, [ colors ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( colorReference.current.some( ( { slug } ) => ! slug ) ) {\n\t\t\t\tconst newColors = colorReference.current.filter(\n\t\t\t\t\t( { slug } ) => slug\n\t\t\t\t);\n\t\t\t\tonChange( newColors.length ? newColors : undefined );\n\t\t\t}\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t{ colors.map( ( color, index ) => (\n\t\t\t\t\t<ColorOption\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingColor !== index ) {\n\t\t\t\t\t\t\t\tsetEditingColor( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tcolors.map( ( currentColor, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn newColor;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn currentColor;\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\tconst newColors = colors.filter(\n\t\t\t\t\t\t\t\t( _currentColor, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewColors.length ? newColors : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingColor }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingColor ) {\n\t\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY = [];\n\nexport default function ColorEdit( {\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n} ) {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingColor, setEditingColor ] = useState( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\teditingColor &&\n\t\tcolors[ editingColor ] &&\n\t\t! colors[ editingColor ].slug;\n\n\tconst hasColors = colors.length > 0;\n\n\treturn (\n\t\t<ColorEditStyles>\n\t\t\t<ColorHStackHeader>\n\t\t\t\t<ColorHeading>{ paletteLabel }</ColorHeading>\n\t\t\t\t<ColorActionsContainer>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={ __( 'Add color' ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tcolor: '#000',\n\t\t\t\t\t\t\t\t\t\tname: '',\n\t\t\t\t\t\t\t\t\t\tslug: '',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingColor( colors.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdisabled={ ! hasColors }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'Edit colors' ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isEditing && ( canReset || ! canOnlyChangeValues ) && (\n\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'Color options' ) }\n\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Remove all colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t) }\n\t\t\t\t</ColorActionsContainer>\n\t\t\t</ColorHStackHeader>\n\t\t\t{ hasColors && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<ColorPaletteEditListView\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingColor={ editingColor }\n\t\t\t\t\t\t\tsetEditingColor={ setEditingColor }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasColors && emptyMessage }\n\t\t</ColorEditStyles>\n\t);\n}\n"]}
|
|
@@ -4,7 +4,7 @@ import { createElement, Fragment } from "@wordpress/element";
|
|
|
4
4
|
/**
|
|
5
5
|
* External dependencies
|
|
6
6
|
*/
|
|
7
|
-
import kebabCase from 'lodash';
|
|
7
|
+
import { kebabCase } from 'lodash';
|
|
8
8
|
/**
|
|
9
9
|
* WordPress dependencies
|
|
10
10
|
*/
|
|
@@ -44,12 +44,14 @@ function ColorNameInput(_ref) {
|
|
|
44
44
|
|
|
45
45
|
function ColorOption(_ref2) {
|
|
46
46
|
let {
|
|
47
|
+
canOnlyChangeValues,
|
|
47
48
|
color,
|
|
48
49
|
onChange,
|
|
49
50
|
isEditing,
|
|
50
51
|
onStartEditing,
|
|
51
52
|
onRemove,
|
|
52
|
-
onStopEditing
|
|
53
|
+
onStopEditing,
|
|
54
|
+
slugPrefix
|
|
53
55
|
} = _ref2;
|
|
54
56
|
const focusOutsideProps = useFocusOutside(onStopEditing);
|
|
55
57
|
return createElement(ColorItem, _extends({
|
|
@@ -59,13 +61,13 @@ function ColorOption(_ref2) {
|
|
|
59
61
|
justify: "flex-start"
|
|
60
62
|
}, createElement(FlexItem, null, createElement(ColorIndicatorStyled, {
|
|
61
63
|
colorValue: color.color
|
|
62
|
-
})), createElement(FlexItem, null, isEditing ? createElement(ColorNameInput, {
|
|
64
|
+
})), createElement(FlexItem, null, isEditing && !canOnlyChangeValues ? createElement(ColorNameInput, {
|
|
63
65
|
value: color.name,
|
|
64
66
|
onChange: nextName => onChange({ ...color,
|
|
65
67
|
name: nextName,
|
|
66
|
-
slug: kebabCase(nextName)
|
|
68
|
+
slug: slugPrefix + kebabCase(nextName)
|
|
67
69
|
})
|
|
68
|
-
}) : createElement(ColorNameContainer, null, color.name)), isEditing && createElement(FlexItem, null, createElement(RemoveButton, {
|
|
70
|
+
}) : createElement(ColorNameContainer, null, color.name)), isEditing && !canOnlyChangeValues && createElement(FlexItem, null, createElement(RemoveButton, {
|
|
69
71
|
isSmall: true,
|
|
70
72
|
icon: lineSolid,
|
|
71
73
|
label: __('Remove color'),
|
|
@@ -86,7 +88,9 @@ function ColorPaletteEditListView(_ref3) {
|
|
|
86
88
|
colors,
|
|
87
89
|
onChange,
|
|
88
90
|
editingColor,
|
|
89
|
-
setEditingColor
|
|
91
|
+
setEditingColor,
|
|
92
|
+
canOnlyChangeValues,
|
|
93
|
+
slugPrefix
|
|
90
94
|
} = _ref3;
|
|
91
95
|
// When unmounting the component if there are empty colors (the user did not complete the insertion) clean them.
|
|
92
96
|
const colorReference = useRef();
|
|
@@ -117,6 +121,7 @@ function ColorPaletteEditListView(_ref3) {
|
|
|
117
121
|
isBordered: true,
|
|
118
122
|
isSeparated: true
|
|
119
123
|
}, colors.map((color, index) => createElement(ColorOption, {
|
|
124
|
+
canOnlyChangeValues: canOnlyChangeValues,
|
|
120
125
|
key: index,
|
|
121
126
|
color: color,
|
|
122
127
|
onStartEditing: () => {
|
|
@@ -149,7 +154,8 @@ function ColorPaletteEditListView(_ref3) {
|
|
|
149
154
|
if (index === editingColor) {
|
|
150
155
|
setEditingColor(null);
|
|
151
156
|
}
|
|
152
|
-
}
|
|
157
|
+
},
|
|
158
|
+
slugPrefix: slugPrefix
|
|
153
159
|
}))));
|
|
154
160
|
}
|
|
155
161
|
|
|
@@ -157,23 +163,28 @@ const EMPTY_ARRAY = [];
|
|
|
157
163
|
export default function ColorEdit(_ref6) {
|
|
158
164
|
let {
|
|
159
165
|
colors = EMPTY_ARRAY,
|
|
160
|
-
onChange
|
|
166
|
+
onChange,
|
|
167
|
+
paletteLabel,
|
|
168
|
+
emptyMessage,
|
|
169
|
+
canOnlyChangeValues,
|
|
170
|
+
canReset,
|
|
171
|
+
slugPrefix = ''
|
|
161
172
|
} = _ref6;
|
|
162
173
|
const [isEditing, setIsEditing] = useState(false);
|
|
163
174
|
const [editingColor, setEditingColor] = useState(null);
|
|
164
175
|
const isAdding = isEditing && editingColor && colors[editingColor] && !colors[editingColor].slug;
|
|
165
176
|
const hasColors = colors.length > 0;
|
|
166
|
-
return createElement(ColorEditStyles, null, createElement(ColorHStackHeader, null, createElement(ColorHeading, null,
|
|
177
|
+
return createElement(ColorEditStyles, null, createElement(ColorHStackHeader, null, createElement(ColorHeading, null, paletteLabel), createElement(ColorActionsContainer, null, isEditing && createElement(DoneButton, {
|
|
167
178
|
isSmall: true,
|
|
168
179
|
onClick: () => {
|
|
169
180
|
setIsEditing(false);
|
|
170
181
|
setEditingColor(null);
|
|
171
182
|
}
|
|
172
|
-
}, __('Done')), createElement(Button, {
|
|
183
|
+
}, __('Done')), !canOnlyChangeValues && createElement(Button, {
|
|
173
184
|
isSmall: true,
|
|
174
185
|
isPressed: isAdding,
|
|
175
186
|
icon: plus,
|
|
176
|
-
label: __('Add
|
|
187
|
+
label: __('Add color'),
|
|
177
188
|
onClick: () => {
|
|
178
189
|
onChange([...colors, {
|
|
179
190
|
color: '#000',
|
|
@@ -191,9 +202,9 @@ export default function ColorEdit(_ref6) {
|
|
|
191
202
|
onClick: () => {
|
|
192
203
|
setIsEditing(true);
|
|
193
204
|
}
|
|
194
|
-
}), isEditing && createElement(DropdownMenu, {
|
|
205
|
+
}), isEditing && (canReset || !canOnlyChangeValues) && createElement(DropdownMenu, {
|
|
195
206
|
icon: moreVertical,
|
|
196
|
-
label: __('
|
|
207
|
+
label: __('Color options'),
|
|
197
208
|
toggleProps: {
|
|
198
209
|
isSmall: true
|
|
199
210
|
}
|
|
@@ -203,7 +214,7 @@ export default function ColorEdit(_ref6) {
|
|
|
203
214
|
} = _ref7;
|
|
204
215
|
return createElement(Fragment, null, createElement(NavigableMenu, {
|
|
205
216
|
role: "menu"
|
|
206
|
-
}, createElement(Button, {
|
|
217
|
+
}, !canOnlyChangeValues && createElement(Button, {
|
|
207
218
|
variant: "tertiary",
|
|
208
219
|
onClick: () => {
|
|
209
220
|
setEditingColor(null);
|
|
@@ -211,17 +222,26 @@ export default function ColorEdit(_ref6) {
|
|
|
211
222
|
onChange();
|
|
212
223
|
onClose();
|
|
213
224
|
}
|
|
214
|
-
}, __('Remove all
|
|
225
|
+
}, __('Remove all colors')), canReset && createElement(Button, {
|
|
226
|
+
variant: "tertiary",
|
|
227
|
+
onClick: () => {
|
|
228
|
+
setEditingColor(null);
|
|
229
|
+
onChange();
|
|
230
|
+
onClose();
|
|
231
|
+
}
|
|
232
|
+
}, __('Reset colors'))));
|
|
215
233
|
}))), hasColors && createElement(Fragment, null, isEditing && createElement(ColorPaletteEditListView, {
|
|
234
|
+
canOnlyChangeValues: canOnlyChangeValues,
|
|
216
235
|
colors: colors,
|
|
217
236
|
onChange: onChange,
|
|
218
237
|
editingColor: editingColor,
|
|
219
|
-
setEditingColor: setEditingColor
|
|
238
|
+
setEditingColor: setEditingColor,
|
|
239
|
+
slugPrefix: slugPrefix
|
|
220
240
|
}), !isEditing && createElement(ColorPalette, {
|
|
221
241
|
colors: colors,
|
|
222
242
|
onChange: () => {},
|
|
223
243
|
clearable: false,
|
|
224
244
|
disableCustomColors: true
|
|
225
|
-
})), !hasColors &&
|
|
245
|
+
})), !hasColors && emptyMessage);
|
|
226
246
|
}
|
|
227
247
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/color-edit/index.js"],"names":["kebabCase","useState","useRef","useEffect","__","lineSolid","moreVertical","plus","__experimentalUseFocusOutside","useFocusOutside","Button","ColorPicker","FlexItem","HStack","ItemGroup","VStack","ColorPalette","DropdownMenu","Popover","ColorActionsContainer","ColorEditStyles","ColorHeading","ColorHStackHeader","ColorIndicatorStyled","ColorItem","ColorNameContainer","ColorNameInputControl","DoneButton","RemoveButton","NavigableMenu","ColorNameInput","value","onChange","ColorOption","color","isEditing","onStartEditing","onRemove","onStopEditing","focusOutsideProps","name","nextName","slug","newColor","ColorPaletteEditListView","colors","editingColor","setEditingColor","colorReference","current","some","newColors","filter","length","undefined","map","index","currentColor","currentIndex","_currentColor","EMPTY_ARRAY","ColorEdit","setIsEditing","isAdding","hasColors","isSmall","onClose"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport kebabCase from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport { __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tColorActionsContainer,\n\tColorEditStyles,\n\tColorHeading,\n\tColorHStackHeader,\n\tColorIndicatorStyled,\n\tColorItem,\n\tColorNameContainer,\n\tColorNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\n\nfunction ColorNameInput( { value, onChange } ) {\n\treturn (\n\t\t<ColorNameInputControl\n\t\t\tlabel={ __( 'Color name' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\nfunction ColorOption( {\n\tcolor,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n} ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\treturn (\n\t\t<ColorItem\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\t{ ...( isEditing ? focusOutsideProps : {} ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicatorStyled colorValue={ color.color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing ? (\n\t\t\t\t\t\t<ColorNameInput\n\t\t\t\t\t\t\tvalue={ color.name }\n\t\t\t\t\t\t\tonChange={ ( nextName ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...color,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug: kebabCase( nextName ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorNameContainer>{ color.name }</ColorNameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<Popover\n\t\t\t\t\tposition=\"bottom left\"\n\t\t\t\t\tclassName=\"components-color-edit__color-popover\"\n\t\t\t\t>\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tcolor={ color.color }\n\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...color,\n\t\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</ColorItem>\n\t);\n}\n\nfunction ColorPaletteEditListView( {\n\tcolors,\n\tonChange,\n\teditingColor,\n\tsetEditingColor,\n} ) {\n\t// When unmounting the component if there are empty colors (the user did not complete the insertion) clean them.\n\tconst colorReference = useRef();\n\tuseEffect( () => {\n\t\tcolorReference.current = colors;\n\t}, [ colors ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( colorReference.current.some( ( { slug } ) => ! slug ) ) {\n\t\t\t\tconst newColors = colorReference.current.filter(\n\t\t\t\t\t( { slug } ) => slug\n\t\t\t\t);\n\t\t\t\tonChange( newColors.length ? newColors : undefined );\n\t\t\t}\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t{ colors.map( ( color, index ) => (\n\t\t\t\t\t<ColorOption\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingColor !== index ) {\n\t\t\t\t\t\t\t\tsetEditingColor( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tcolors.map( ( currentColor, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn newColor;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn currentColor;\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\tconst newColors = colors.filter(\n\t\t\t\t\t\t\t\t( _currentColor, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewColors.length ? newColors : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingColor }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingColor ) {\n\t\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY = [];\n\nexport default function ColorEdit( { colors = EMPTY_ARRAY, onChange } ) {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingColor, setEditingColor ] = useState( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\teditingColor &&\n\t\tcolors[ editingColor ] &&\n\t\t! colors[ editingColor ].slug;\n\n\tconst hasColors = colors.length > 0;\n\n\treturn (\n\t\t<ColorEditStyles>\n\t\t\t<ColorHStackHeader>\n\t\t\t\t<ColorHeading>{ __( 'Custom' ) }</ColorHeading>\n\t\t\t\t<ColorActionsContainer>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\tlabel={ __( 'Add custom color' ) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tcolor: '#000',\n\t\t\t\t\t\t\t\t\tname: '',\n\t\t\t\t\t\t\t\t\tslug: '',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\tsetEditingColor( colors.length );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdisabled={ ! hasColors }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'Edit colors' ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'Custom color options' ) }\n\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Remove all custom colors' ) }\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t) }\n\t\t\t\t</ColorActionsContainer>\n\t\t\t</ColorHStackHeader>\n\t\t\t{ hasColors && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<ColorPaletteEditListView\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingColor={ editingColor }\n\t\t\t\t\t\t\tsetEditingColor={ setEditingColor }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasColors &&\n\t\t\t\t__(\n\t\t\t\t\t'Custom colors are empty! Add some colors to create your own color palette.'\n\t\t\t\t) }\n\t\t</ColorEditStyles>\n\t);\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/color-edit/index.js"],"names":["kebabCase","useState","useRef","useEffect","__","lineSolid","moreVertical","plus","__experimentalUseFocusOutside","useFocusOutside","Button","ColorPicker","FlexItem","HStack","ItemGroup","VStack","ColorPalette","DropdownMenu","Popover","ColorActionsContainer","ColorEditStyles","ColorHeading","ColorHStackHeader","ColorIndicatorStyled","ColorItem","ColorNameContainer","ColorNameInputControl","DoneButton","RemoveButton","NavigableMenu","ColorNameInput","value","onChange","ColorOption","canOnlyChangeValues","color","isEditing","onStartEditing","onRemove","onStopEditing","slugPrefix","focusOutsideProps","name","nextName","slug","newColor","ColorPaletteEditListView","colors","editingColor","setEditingColor","colorReference","current","some","newColors","filter","length","undefined","map","index","currentColor","currentIndex","_currentColor","EMPTY_ARRAY","ColorEdit","paletteLabel","emptyMessage","canReset","setIsEditing","isAdding","hasColors","isSmall","onClose"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport { __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tColorActionsContainer,\n\tColorEditStyles,\n\tColorHeading,\n\tColorHStackHeader,\n\tColorIndicatorStyled,\n\tColorItem,\n\tColorNameContainer,\n\tColorNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\n\nfunction ColorNameInput( { value, onChange } ) {\n\treturn (\n\t\t<ColorNameInputControl\n\t\t\tlabel={ __( 'Color name' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\nfunction ColorOption( {\n\tcanOnlyChangeValues,\n\tcolor,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tslugPrefix,\n} ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\treturn (\n\t\t<ColorItem\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\t{ ...( isEditing ? focusOutsideProps : {} ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicatorStyled colorValue={ color.color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<ColorNameInput\n\t\t\t\t\t\t\tvalue={ color.name }\n\t\t\t\t\t\t\tonChange={ ( nextName ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...color,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug: slugPrefix + kebabCase( nextName ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorNameContainer>{ color.name }</ColorNameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<Popover\n\t\t\t\t\tposition=\"bottom left\"\n\t\t\t\t\tclassName=\"components-color-edit__color-popover\"\n\t\t\t\t>\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tcolor={ color.color }\n\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...color,\n\t\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</ColorItem>\n\t);\n}\n\nfunction ColorPaletteEditListView( {\n\tcolors,\n\tonChange,\n\teditingColor,\n\tsetEditingColor,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n} ) {\n\t// When unmounting the component if there are empty colors (the user did not complete the insertion) clean them.\n\tconst colorReference = useRef();\n\tuseEffect( () => {\n\t\tcolorReference.current = colors;\n\t}, [ colors ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( colorReference.current.some( ( { slug } ) => ! slug ) ) {\n\t\t\t\tconst newColors = colorReference.current.filter(\n\t\t\t\t\t( { slug } ) => slug\n\t\t\t\t);\n\t\t\t\tonChange( newColors.length ? newColors : undefined );\n\t\t\t}\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t{ colors.map( ( color, index ) => (\n\t\t\t\t\t<ColorOption\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingColor !== index ) {\n\t\t\t\t\t\t\t\tsetEditingColor( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tcolors.map( ( currentColor, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn newColor;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn currentColor;\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\tconst newColors = colors.filter(\n\t\t\t\t\t\t\t\t( _currentColor, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewColors.length ? newColors : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingColor }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingColor ) {\n\t\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY = [];\n\nexport default function ColorEdit( {\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n} ) {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingColor, setEditingColor ] = useState( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\teditingColor &&\n\t\tcolors[ editingColor ] &&\n\t\t! colors[ editingColor ].slug;\n\n\tconst hasColors = colors.length > 0;\n\n\treturn (\n\t\t<ColorEditStyles>\n\t\t\t<ColorHStackHeader>\n\t\t\t\t<ColorHeading>{ paletteLabel }</ColorHeading>\n\t\t\t\t<ColorActionsContainer>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={ __( 'Add color' ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tcolor: '#000',\n\t\t\t\t\t\t\t\t\t\tname: '',\n\t\t\t\t\t\t\t\t\t\tslug: '',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingColor( colors.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdisabled={ ! hasColors }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'Edit colors' ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isEditing && ( canReset || ! canOnlyChangeValues ) && (\n\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'Color options' ) }\n\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Remove all colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingColor( null );\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t) }\n\t\t\t\t</ColorActionsContainer>\n\t\t\t</ColorHStackHeader>\n\t\t\t{ hasColors && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<ColorPaletteEditListView\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingColor={ editingColor }\n\t\t\t\t\t\t\tsetEditingColor={ setEditingColor }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasColors && emptyMessage }\n\t\t</ColorEditStyles>\n\t);\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/components",
|
|
3
|
-
"version": "19.0.
|
|
3
|
+
"version": "19.0.5",
|
|
4
4
|
"description": "UI components for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"publishConfig": {
|
|
75
75
|
"access": "public"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "518e7a279a0f596612232c55c83a351460f8816d"
|
|
78
78
|
}
|
package/src/color-edit/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* External dependencies
|
|
3
3
|
*/
|
|
4
|
-
import kebabCase from 'lodash';
|
|
4
|
+
import { kebabCase } from 'lodash';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* WordPress dependencies
|
|
@@ -49,12 +49,14 @@ function ColorNameInput( { value, onChange } ) {
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
function ColorOption( {
|
|
52
|
+
canOnlyChangeValues,
|
|
52
53
|
color,
|
|
53
54
|
onChange,
|
|
54
55
|
isEditing,
|
|
55
56
|
onStartEditing,
|
|
56
57
|
onRemove,
|
|
57
58
|
onStopEditing,
|
|
59
|
+
slugPrefix,
|
|
58
60
|
} ) {
|
|
59
61
|
const focusOutsideProps = useFocusOutside( onStopEditing );
|
|
60
62
|
return (
|
|
@@ -68,14 +70,14 @@ function ColorOption( {
|
|
|
68
70
|
<ColorIndicatorStyled colorValue={ color.color } />
|
|
69
71
|
</FlexItem>
|
|
70
72
|
<FlexItem>
|
|
71
|
-
{ isEditing ? (
|
|
73
|
+
{ isEditing && ! canOnlyChangeValues ? (
|
|
72
74
|
<ColorNameInput
|
|
73
75
|
value={ color.name }
|
|
74
76
|
onChange={ ( nextName ) =>
|
|
75
77
|
onChange( {
|
|
76
78
|
...color,
|
|
77
79
|
name: nextName,
|
|
78
|
-
slug: kebabCase( nextName ),
|
|
80
|
+
slug: slugPrefix + kebabCase( nextName ),
|
|
79
81
|
} )
|
|
80
82
|
}
|
|
81
83
|
/>
|
|
@@ -83,7 +85,7 @@ function ColorOption( {
|
|
|
83
85
|
<ColorNameContainer>{ color.name }</ColorNameContainer>
|
|
84
86
|
) }
|
|
85
87
|
</FlexItem>
|
|
86
|
-
{ isEditing && (
|
|
88
|
+
{ isEditing && ! canOnlyChangeValues && (
|
|
87
89
|
<FlexItem>
|
|
88
90
|
<RemoveButton
|
|
89
91
|
isSmall
|
|
@@ -119,6 +121,8 @@ function ColorPaletteEditListView( {
|
|
|
119
121
|
onChange,
|
|
120
122
|
editingColor,
|
|
121
123
|
setEditingColor,
|
|
124
|
+
canOnlyChangeValues,
|
|
125
|
+
slugPrefix,
|
|
122
126
|
} ) {
|
|
123
127
|
// When unmounting the component if there are empty colors (the user did not complete the insertion) clean them.
|
|
124
128
|
const colorReference = useRef();
|
|
@@ -140,6 +144,7 @@ function ColorPaletteEditListView( {
|
|
|
140
144
|
<ItemGroup isBordered isSeparated>
|
|
141
145
|
{ colors.map( ( color, index ) => (
|
|
142
146
|
<ColorOption
|
|
147
|
+
canOnlyChangeValues={ canOnlyChangeValues }
|
|
143
148
|
key={ index }
|
|
144
149
|
color={ color }
|
|
145
150
|
onStartEditing={ () => {
|
|
@@ -177,6 +182,7 @@ function ColorPaletteEditListView( {
|
|
|
177
182
|
setEditingColor( null );
|
|
178
183
|
}
|
|
179
184
|
} }
|
|
185
|
+
slugPrefix={ slugPrefix }
|
|
180
186
|
/>
|
|
181
187
|
) ) }
|
|
182
188
|
</ItemGroup>
|
|
@@ -186,7 +192,15 @@ function ColorPaletteEditListView( {
|
|
|
186
192
|
|
|
187
193
|
const EMPTY_ARRAY = [];
|
|
188
194
|
|
|
189
|
-
export default function ColorEdit( {
|
|
195
|
+
export default function ColorEdit( {
|
|
196
|
+
colors = EMPTY_ARRAY,
|
|
197
|
+
onChange,
|
|
198
|
+
paletteLabel,
|
|
199
|
+
emptyMessage,
|
|
200
|
+
canOnlyChangeValues,
|
|
201
|
+
canReset,
|
|
202
|
+
slugPrefix = '',
|
|
203
|
+
} ) {
|
|
190
204
|
const [ isEditing, setIsEditing ] = useState( false );
|
|
191
205
|
const [ editingColor, setEditingColor ] = useState( null );
|
|
192
206
|
const isAdding =
|
|
@@ -200,7 +214,7 @@ export default function ColorEdit( { colors = EMPTY_ARRAY, onChange } ) {
|
|
|
200
214
|
return (
|
|
201
215
|
<ColorEditStyles>
|
|
202
216
|
<ColorHStackHeader>
|
|
203
|
-
<ColorHeading>{
|
|
217
|
+
<ColorHeading>{ paletteLabel }</ColorHeading>
|
|
204
218
|
<ColorActionsContainer>
|
|
205
219
|
{ isEditing && (
|
|
206
220
|
<DoneButton
|
|
@@ -213,24 +227,26 @@ export default function ColorEdit( { colors = EMPTY_ARRAY, onChange } ) {
|
|
|
213
227
|
{ __( 'Done' ) }
|
|
214
228
|
</DoneButton>
|
|
215
229
|
) }
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
230
|
+
{ ! canOnlyChangeValues && (
|
|
231
|
+
<Button
|
|
232
|
+
isSmall
|
|
233
|
+
isPressed={ isAdding }
|
|
234
|
+
icon={ plus }
|
|
235
|
+
label={ __( 'Add color' ) }
|
|
236
|
+
onClick={ () => {
|
|
237
|
+
onChange( [
|
|
238
|
+
...colors,
|
|
239
|
+
{
|
|
240
|
+
color: '#000',
|
|
241
|
+
name: '',
|
|
242
|
+
slug: '',
|
|
243
|
+
},
|
|
244
|
+
] );
|
|
245
|
+
setIsEditing( true );
|
|
246
|
+
setEditingColor( colors.length );
|
|
247
|
+
} }
|
|
248
|
+
/>
|
|
249
|
+
) }
|
|
234
250
|
{ ! isEditing && (
|
|
235
251
|
<Button
|
|
236
252
|
disabled={ ! hasColors }
|
|
@@ -242,10 +258,10 @@ export default function ColorEdit( { colors = EMPTY_ARRAY, onChange } ) {
|
|
|
242
258
|
} }
|
|
243
259
|
/>
|
|
244
260
|
) }
|
|
245
|
-
{ isEditing && (
|
|
261
|
+
{ isEditing && ( canReset || ! canOnlyChangeValues ) && (
|
|
246
262
|
<DropdownMenu
|
|
247
263
|
icon={ moreVertical }
|
|
248
|
-
label={ __( '
|
|
264
|
+
label={ __( 'Color options' ) }
|
|
249
265
|
toggleProps={ {
|
|
250
266
|
isSmall: true,
|
|
251
267
|
} }
|
|
@@ -253,17 +269,31 @@ export default function ColorEdit( { colors = EMPTY_ARRAY, onChange } ) {
|
|
|
253
269
|
{ ( { onClose } ) => (
|
|
254
270
|
<>
|
|
255
271
|
<NavigableMenu role="menu">
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
272
|
+
{ ! canOnlyChangeValues && (
|
|
273
|
+
<Button
|
|
274
|
+
variant="tertiary"
|
|
275
|
+
onClick={ () => {
|
|
276
|
+
setEditingColor( null );
|
|
277
|
+
setIsEditing( false );
|
|
278
|
+
onChange();
|
|
279
|
+
onClose();
|
|
280
|
+
} }
|
|
281
|
+
>
|
|
282
|
+
{ __( 'Remove all colors' ) }
|
|
283
|
+
</Button>
|
|
284
|
+
) }
|
|
285
|
+
{ canReset && (
|
|
286
|
+
<Button
|
|
287
|
+
variant="tertiary"
|
|
288
|
+
onClick={ () => {
|
|
289
|
+
setEditingColor( null );
|
|
290
|
+
onChange();
|
|
291
|
+
onClose();
|
|
292
|
+
} }
|
|
293
|
+
>
|
|
294
|
+
{ __( 'Reset colors' ) }
|
|
295
|
+
</Button>
|
|
296
|
+
) }
|
|
267
297
|
</NavigableMenu>
|
|
268
298
|
</>
|
|
269
299
|
) }
|
|
@@ -275,10 +305,12 @@ export default function ColorEdit( { colors = EMPTY_ARRAY, onChange } ) {
|
|
|
275
305
|
<>
|
|
276
306
|
{ isEditing && (
|
|
277
307
|
<ColorPaletteEditListView
|
|
308
|
+
canOnlyChangeValues={ canOnlyChangeValues }
|
|
278
309
|
colors={ colors }
|
|
279
310
|
onChange={ onChange }
|
|
280
311
|
editingColor={ editingColor }
|
|
281
312
|
setEditingColor={ setEditingColor }
|
|
313
|
+
slugPrefix={ slugPrefix }
|
|
282
314
|
/>
|
|
283
315
|
) }
|
|
284
316
|
{ ! isEditing && (
|
|
@@ -291,10 +323,7 @@ export default function ColorEdit( { colors = EMPTY_ARRAY, onChange } ) {
|
|
|
291
323
|
) }
|
|
292
324
|
</>
|
|
293
325
|
) }
|
|
294
|
-
{ ! hasColors &&
|
|
295
|
-
__(
|
|
296
|
-
'Custom colors are empty! Add some colors to create your own color palette.'
|
|
297
|
-
) }
|
|
326
|
+
{ ! hasColors && emptyMessage }
|
|
298
327
|
</ColorEditStyles>
|
|
299
328
|
);
|
|
300
329
|
}
|