/
duotone-picker.js
109 lines (102 loc) · 2.56 KB
/
duotone-picker.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/**
* External dependencies
*/
import { isEqual } from 'lodash';
/**
* WordPress dependencies
*/
import { useMemo } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import ColorListPicker from '../color-list-picker';
import CircularOptionPicker from '../circular-option-picker';
import CustomDuotoneBar from './custom-duotone-bar';
import { getDefaultColors, getGradientFromCSSColors } from './utils';
function DuotonePicker( {
clearable = true,
colorPalette,
duotonePalette,
disableCustomColors,
disableCustomDuotone,
value,
onChange,
} ) {
const [ defaultDark, defaultLight ] = useMemo(
() => getDefaultColors( colorPalette ),
[ colorPalette ]
);
return (
<CircularOptionPicker
options={ duotonePalette.map( ( { colors, slug, name } ) => {
const style = {
background: getGradientFromCSSColors( colors, '135deg' ),
color: 'transparent',
};
const tooltipText =
name ??
sprintf(
// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
__( 'Duotone code: %s' ),
slug
);
const label = name
? sprintf(
// translators: %s: The name of the option e.g: "Dark grayscale".
__( 'Duotone: %s' ),
name
)
: tooltipText;
const isSelected = isEqual( colors, value );
return (
<CircularOptionPicker.Option
key={ slug }
value={ colors }
isSelected={ isSelected }
aria-label={ label }
tooltipText={ tooltipText }
style={ style }
onClick={ () => {
onChange( isSelected ? undefined : colors );
} }
/>
);
} ) }
actions={
!! clearable && (
<CircularOptionPicker.ButtonAction
onClick={ () => onChange( undefined ) }
>
{ __( 'Clear' ) }
</CircularOptionPicker.ButtonAction>
)
}
>
{ ! disableCustomColors && ! disableCustomDuotone && (
<CustomDuotoneBar value={ value } onChange={ onChange } />
) }
{ ! disableCustomDuotone && (
<ColorListPicker
labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
colors={ colorPalette }
value={ value }
disableCustomColors={ disableCustomColors }
enableAlpha
onChange={ ( newColors ) => {
if ( ! newColors[ 0 ] ) {
newColors[ 0 ] = defaultDark;
}
if ( ! newColors[ 1 ] ) {
newColors[ 1 ] = defaultLight;
}
const newValue =
newColors.length >= 2 ? newColors : undefined;
onChange( newValue );
} }
/>
) }
</CircularOptionPicker>
);
}
export default DuotonePicker;