react-filerobot-image-editor/lib/components/common/ColorInput/index.js

React component version of filerobot image editor (FIE).

import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import React,{useEffect,useRef,useState}from"react";import{useStore}from"../../../hooks";import{SET_LATEST_COLOR}from"../../../actions";import ColorPickerModal from"../ColorPickerModal";import{StyledPickerTrigger}from"./ColorInput.styled";var pinnedColorsKey="FIE_pinnedColors",ColorInput=function(a){var b,c=a.onChange,d=a.color,e=a.colorFor,f=a.showTransparentColor,g=useStore(),h=g.config.annotationsCommon,i=void 0===h?{}:h,j=g.dispatch,k=g.latestColors,l=void 0===k?{}:k,m=l[e],n=useState(),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useState(function(){return m||d||i.fill}),s=_slicedToArray(r,2),t=s[0],u=s[1],v=useState(null!==(b=window)&&void 0!==b&&b.localStorage?JSON.parse(localStorage.getItem(pinnedColorsKey)||"[]"):[]),w=_slicedToArray(v,2),x=w[0],y=w[1],z=useRef(t),A=function(a){var b;if(null!==(b=window)&&void 0!==b&&b.localStorage){var c=window.localStorage.getItem(pinnedColorsKey);if(JSON.stringify(a)!==c){var d=a.slice(-9);window.localStorage.setItem(pinnedColorsKey,JSON.stringify(d)),y(d)}}},B=function(a){q(p?null:a.currentTarget)};return useEffect(function(){u(d)},[d]),React.createElement(React.Fragment,null,React.createElement(StyledPickerTrigger,{className:"FIE_color-picker-triggerer","data-testid":"FIE-color-picker-triggerer",onClick:B,$color:t,onChange:c}),React.createElement(ColorPickerModal,{hideModalTitle:!0,onChange:function(a,b,d){u(b),c(b),A(d),m!==b&&j({type:SET_LATEST_COLOR,payload:{latestColors:_defineProperty({},e,b)}})},defaultColor:t,pinnedColors:x,open:!!p,onClose:function(a){c(z.current||t),B(a)},onApply:B,showTransparentColor:f}))};export default ColorInput;