/
palette.js
81 lines (74 loc) · 2.01 KB
/
palette.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
/**
* WordPress dependencies
*/
import {
__experimentalItemGroup as ItemGroup,
FlexItem,
__experimentalHStack as HStack,
__experimentalZStack as ZStack,
__experimentalVStack as VStack,
FlexBlock,
ColorIndicator,
} from '@wordpress/components';
import { __, _n, sprintf } from '@wordpress/i18n';
import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
import Subtitle from './subtitle';
import NavigationButton from './navigation-button';
import { useSetting } from './hooks';
const EMPTY_COLORS = [];
function Palette( { name } ) {
const [ customColors ] = useSetting( 'color.palette.custom' );
const [ themeColors ] = useSetting( 'color.palette.theme' );
const [ defaultColors ] = useSetting( 'color.palette.default' );
const [ defaultPaletteEnabled ] = useSetting(
'color.defaultPalette',
name
);
const colors = useMemo(
() => [
...( customColors || EMPTY_COLORS ),
...( themeColors || EMPTY_COLORS ),
...( defaultColors && defaultPaletteEnabled
? defaultColors
: EMPTY_COLORS ),
],
[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]
);
const screenPath = ! name
? '/colors/palette'
: '/blocks/' + name + '/colors/palette';
const paletteButtonText =
colors.length > 0
? sprintf(
// Translators: %d: Number of palette colors.
_n( '%d color', '%d colors', colors.length ),
colors.length
)
: __( 'Add custom colors' );
return (
<VStack spacing={ 3 }>
<Subtitle>{ __( 'Palette' ) }</Subtitle>
<ItemGroup isBordered isSeparated>
<NavigationButton path={ screenPath }>
<HStack isReversed={ colors.length === 0 }>
<FlexBlock>
<ZStack isLayered={ false } offset={ -8 }>
{ colors.slice( 0, 5 ).map( ( { color } ) => (
<ColorIndicator
key={ color }
colorValue={ color }
/>
) ) }
</ZStack>
</FlexBlock>
<FlexItem>{ paletteButtonText }</FlexItem>
</HStack>
</NavigationButton>
</ItemGroup>
</VStack>
);
}
export default Palette;