@zergo0/react-filerobot-image-editor/lib/components/common/ColorPickerModal/index.js

React component version of filerobot image editor (FIE).

import React from"react";import{Button,ColorPicker,ModalContent,ModalTitle}from"@scaleflex/ui/core";import ColorPickerIcon from"@scaleflex/icons/color-picker";import{useStore}from"../../../hooks";import Styled from"./ColorPickerModal.styled";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";var modalStyles={zIndex:1301},ColorPickerModal=function(a){var b=a.hideModalTitle,c=a.defaultColor,d=void 0===c?"":c,e=a.onChange,f=a.open,g=a.pinnedColors,h=a.onClose,i=a.onApply,j=useStore(),k=j.t;return f?_jsxs(Styled.ColorPickerModal,{onClose:h,open:f,fullWidth:!0,modalStyles:modalStyles,children:[!b&&_jsx(ModalTitle,{onClose:h,primary:k("colorPickerModalTitleLabel","Pick color"),icon:_jsx(ColorPickerIcon,{size:29}),iconShadow:!0,variant:"with-icon"}),_jsx(ModalContent,{children:_jsx(Styled.ColorPickerWrap,{hideModalTitle:b,children:_jsx(ColorPicker,{onChange:e,pinnedColors:g,defaultColor:d,showTransparentColor:!0})})}),_jsxs(Styled.ModalActions,{children:[_jsx(Button,{color:"basic",onClick:h,children:k("cancel")}),_jsx(Button,{color:"primary",onClick:i,children:k("apply")})]})]}):null};ColorPickerModal.defaultProps={defaultColor:"",pinnedColors:[],onChange:function onChange(){},open:!1,hideModalTitle:!1,onClose:function onClose(){},onApply:function onApply(){}};export default ColorPickerModal;