()
| 47 | }; |
| 48 | |
| 49 | const initPickr = () => { |
| 50 | /* pickr does not have way to update options, need to |
| 51 | destroy and recreate pickr to reflect options */ |
| 52 | destroyPickr(); |
| 53 | |
| 54 | pickrObj.current = new Pickr({ |
| 55 | el: eleRef.current, |
| 56 | useAsButton: true, |
| 57 | theme: 'monolith', |
| 58 | swatches: [ |
| 59 | '#000', '#666', '#ccc', '#fff', '#f90', '#ff0', '#0f0', |
| 60 | '#f0f', '#f4cccc', '#fce5cd', '#d0e0e3', '#cfe2f3', '#ead1dc', '#ea9999', |
| 61 | '#b6d7a8', '#a2c4c9', '#d5a6bd', '#e06666', '#93c47d', '#76a5af', '#c27ba0', |
| 62 | '#f1c232', '#6aa84f', '#45818e', '#a64d79', '#bf9000', '#0c343d', '#4c1130', |
| 63 | ], |
| 64 | position: pickrOptions.position, |
| 65 | strings: { |
| 66 | clear: pickrOptions.clearText, |
| 67 | }, |
| 68 | components: { |
| 69 | palette: pickrOptions.showPalette, |
| 70 | preview: true, |
| 71 | hue: pickrOptions.showPalette, |
| 72 | interaction: { |
| 73 | clear: pickrOptions.allowEmpty, |
| 74 | defaultRepresentation: pickrOptions.colorFormat, |
| 75 | disabled: pickrOptions.disabled, |
| 76 | save: pickrOptions.allowSave, |
| 77 | input: pickrOptions.input, |
| 78 | }, |
| 79 | }, |
| 80 | }).on('init', instance => { |
| 81 | setColor(value, true); |
| 82 | pickrOptions.disabled && instance.disable(); |
| 83 | |
| 84 | const { lastColor } = instance.getRoot().preview; |
| 85 | const { clear } = instance.getRoot().interaction; |
| 86 | |
| 87 | /* Cycle the keyboard navigation within the color picker */ |
| 88 | clear.addEventListener('keydown', (e) => { |
| 89 | if (e.keyCode === 9) { |
| 90 | e.preventDefault(); |
| 91 | e.stopPropagation(); |
| 92 | lastColor.focus(); |
| 93 | } |
| 94 | }); |
| 95 | |
| 96 | lastColor.addEventListener('keydown', (e) => { |
| 97 | if (e.keyCode === 9 && e.shiftKey) { |
| 98 | e.preventDefault(); |
| 99 | e.stopPropagation(); |
| 100 | clear.focus(); |
| 101 | } |
| 102 | }); |
| 103 | }).on('clear', () => { |
| 104 | onChangeRef.current?.(''); |
| 105 | }).on('change', (color) => { |
| 106 | onChangeRef.current?.(color.toHEXA().toString()); |
no test coverage detected