index.js
199 lines
| 1 | import classnames from 'classnames'; |
| 2 | import hexToRGBA from './hex-to-rgba'; |
| 3 | import getIcon from '../../utils/get-icon'; |
| 4 | |
| 5 | // Import CSS |
| 6 | import './editor.scss'; |
| 7 | |
| 8 | const { Component } = wp.element; |
| 9 | |
| 10 | const { __ } = wp.i18n; |
| 11 | |
| 12 | const { |
| 13 | Tooltip, |
| 14 | BaseControl, |
| 15 | Button, |
| 16 | ColorPicker, |
| 17 | RangeControl, |
| 18 | } = wp.components; |
| 19 | |
| 20 | const { |
| 21 | ColorPalette, |
| 22 | } = wp.blockEditor; |
| 23 | |
| 24 | export default class GenerateBlocksColorPicker extends Component { |
| 25 | constructor() { |
| 26 | super( ...arguments ); |
| 27 | |
| 28 | this.state = { |
| 29 | showPicker: false, |
| 30 | showPalette: false, |
| 31 | colorKey: false, |
| 32 | }; |
| 33 | } |
| 34 | |
| 35 | render() { |
| 36 | const { |
| 37 | value, |
| 38 | onChange, |
| 39 | onOpacityChange, |
| 40 | label, |
| 41 | alpha = false, |
| 42 | valueOpacity, |
| 43 | } = this.props; |
| 44 | |
| 45 | const { |
| 46 | showPicker, |
| 47 | showPalette, |
| 48 | colorKey, |
| 49 | } = this.state; |
| 50 | |
| 51 | return ( |
| 52 | <BaseControl className={ |
| 53 | classnames( { |
| 54 | 'gblocks-color-picker-container': true, |
| 55 | 'gblocks-color-picker-is-open': showPicker, |
| 56 | } ) |
| 57 | }> |
| 58 | <BaseControl |
| 59 | className="gblocks-component-color-picker-wrapper" |
| 60 | > |
| 61 | <span |
| 62 | className="components-base-control__label" |
| 63 | role="button" |
| 64 | tabIndex="0" |
| 65 | onClick={ () => { |
| 66 | this.setState( { |
| 67 | showPicker: ! showPicker, |
| 68 | } ); |
| 69 | } } |
| 70 | onKeyDown={ () => { |
| 71 | this.setState( { |
| 72 | showPicker: ! showPicker, |
| 73 | } ); |
| 74 | } } |
| 75 | >{ label }</span> |
| 76 | <div className={ classnames( 'components-color-palette__item-wrapper components-circular-option-picker__option-wrapper', value ? '' : 'components-color-palette__custom-color' ) }> |
| 77 | <Tooltip text={ __( 'Choose Color', 'generateblocks' ) }> |
| 78 | <button |
| 79 | type="button" |
| 80 | aria-expanded={ showPicker } |
| 81 | className="components-color-palette__item components-circular-option-picker__option" |
| 82 | onClick={ () => { |
| 83 | this.setState( { |
| 84 | showPicker: ! showPicker, |
| 85 | } ); |
| 86 | } } |
| 87 | aria-label={ __( 'Custom color picker', 'generateblocks' ) } |
| 88 | style={ { color: value ? hexToRGBA( value, valueOpacity ) : 'transparent' } } |
| 89 | > |
| 90 | <span className="components-color-palette__custom-color-gradient" /> |
| 91 | </button> |
| 92 | </Tooltip> |
| 93 | </div> |
| 94 | </BaseControl> |
| 95 | |
| 96 | { showPicker && |
| 97 | <div |
| 98 | className={ classnames( { |
| 99 | 'gblocks-component-color-picker': true, |
| 100 | } ) } |
| 101 | > |
| 102 | { ! showPalette && |
| 103 | <BaseControl key={ colorKey }> |
| 104 | <ColorPicker |
| 105 | key={ colorKey } |
| 106 | color={ value ? value : '' } |
| 107 | onChangeComplete={ ( color ) => { |
| 108 | onChange( color.hex ); |
| 109 | } } |
| 110 | disableAlpha |
| 111 | /> |
| 112 | |
| 113 | <div className="gblocks-color-controls"> |
| 114 | <Button |
| 115 | isSmall |
| 116 | isSecondary |
| 117 | className="components-color-clear-color" |
| 118 | onClick={ () => { |
| 119 | onChange( '' ); |
| 120 | } } |
| 121 | > |
| 122 | { __( 'Clear Color', 'generateblocks' ) } |
| 123 | </Button> |
| 124 | |
| 125 | <Button |
| 126 | isSmall |
| 127 | isSecondary |
| 128 | aria-expanded={ showPalette } |
| 129 | className="components-color-show-palette" |
| 130 | onClick={ () => { |
| 131 | this.setState( { |
| 132 | showPalette: ! showPalette, |
| 133 | } ); |
| 134 | } } |
| 135 | > |
| 136 | { __( 'Show Color Palette', 'generateblocks' ) } |
| 137 | </Button> |
| 138 | </div> |
| 139 | </BaseControl> |
| 140 | } |
| 141 | |
| 142 | { ! showPalette && alpha && |
| 143 | <div className="gblocks-component-color-opacity"> |
| 144 | <Tooltip text={ __( 'Opacity', 'generateblocks' ) }> |
| 145 | { getIcon( 'gradient' ) } |
| 146 | </Tooltip> |
| 147 | |
| 148 | <RangeControl |
| 149 | value={ valueOpacity ? valueOpacity : 0 } |
| 150 | onChange={ ( opacityValue ) => onOpacityChange( opacityValue ) } |
| 151 | min={ 0 } |
| 152 | max={ 1 } |
| 153 | step={ 0.01 } |
| 154 | initialPosition={ 1 } |
| 155 | /> |
| 156 | </div> |
| 157 | } |
| 158 | |
| 159 | { showPalette && |
| 160 | <div> |
| 161 | <Button |
| 162 | isSmall |
| 163 | isSecondary |
| 164 | aria-expanded={ showPalette } |
| 165 | className="components-color-show-palette" |
| 166 | onClick={ () => { |
| 167 | this.setState( { |
| 168 | showPalette: ! showPalette, |
| 169 | } ); |
| 170 | } } |
| 171 | > |
| 172 | { __( 'Hide Color Palette', 'generateblocks' ) } |
| 173 | </Button> |
| 174 | |
| 175 | <BaseControl |
| 176 | label={ false } |
| 177 | className="gblocks-component-color-picker-palette" |
| 178 | > |
| 179 | <ColorPalette |
| 180 | value={ value } |
| 181 | onChange={ ( color ) => { |
| 182 | onChange( color ); |
| 183 | |
| 184 | this.setState( { |
| 185 | colorKey: color, |
| 186 | } ); |
| 187 | } } |
| 188 | disableCustomColors={ true } |
| 189 | /> |
| 190 | </BaseControl> |
| 191 | </div> |
| 192 | } |
| 193 | </div> |
| 194 | } |
| 195 | </BaseControl> |
| 196 | ); |
| 197 | } |
| 198 | } |
| 199 |