react-filerobot-video-editor/lib/components/common/ColorPickerModal/index.js

React component version of filerobot video editor (FVE).

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";var modalStyles={zIndex:1301},ColorPickerModal=function(a){var b=a.hideModalTitle,c=void 0!==b&&b,d=a.defaultColor,e=void 0===d?"":d,f=a.onChange,g=void 0===f?function(){}:f,h=a.open,i=void 0!==h&&h,j=a.pinnedColors,k=void 0===j?[]:j,l=a.onClose,m=void 0===l?function(){}:l,n=a.onApply,o=void 0===n?function(){}:n,p=a.showTransparentColor,q=useStore(),r=q.t;return i?React.createElement(Styled.ColorPickerModal,{"data-testid":"FIE-color-picker-modal",onClose:m,open:i,fullWidth:!0,modalStyles:modalStyles},!c&&React.createElement(ModalTitle,{onClose:m,primary:r("colorPickerModalTitleLabel","Pick color"),icon:React.createElement(ColorPickerIcon,{size:29}),iconShadow:!0,variant:"with-icon","data-testid":"FIE-color-picker-modal-title"}),React.createElement(ModalContent,null,React.createElement(Styled.ColorPickerWrap,{hideModalTitle:c,"data-testid":"FIE-color-picker-wrap"},React.createElement(ColorPicker,{onChange:g,pinnedColors:k,defaultColor:e,showTransparentColor:!(void 0!==p)||p,"data-testid":"FIE-color-picker"}))),React.createElement(Styled.ModalActions,{"data-testid":"FIE-color-picker-modal-actions"},React.createElement(Button,{color:"basic",onClick:m,"data-testid":"FIE-color-picker-modal-cancel-button"},r("cancel")),React.createElement(Button,{color:"primary",onClick:o,"data-testid":"FIE-color-picker-modal-apply-button"},r("apply")))):null};export default ColorPickerModal;