sp-image-editor/lib/components/tools/Filters/FilterItem.js

React component version of filerobot image editor (FIE).

import React,{memo,useCallback,useEffect,useRef}from"react";import{Layer,Image}from"react-konva";import{StyledFilterItem,FilterItemPreview,FilterItemLabel}from"./Filters.styled";var MAX_FILTER_PREVIEW_WIDTH=60,MAX_FILTER_PREVIEW_HEIGHT=45,FilterItem=function(a){var b=a.filterLabel,c=a.filterFn,d=a.applyFilter,e=a.isActive,f=a.image,g=useRef(),h=useCallback(function(){d(c)},[c]),i=useCallback(function(){g.current?g.current.cache():setTimeout(i,0)},[]);useEffect(function(){return f&&i(),function(){var a;null===(a=g.current)||void 0===a||a.clearCache()}},[f]);var j=f.width/f.height,k=1>j,l=k?MAX_FILTER_PREVIEW_WIDTH:MAX_FILTER_PREVIEW_HEIGHT*j,m=k?MAX_FILTER_PREVIEW_WIDTH/j:MAX_FILTER_PREVIEW_HEIGHT;return React.createElement(StyledFilterItem,{className:"FIE_filters-item",onClick:h,"aria-selected":e},React.createElement(FilterItemPreview,{className:"FIE_filters-item-preview",width:MAX_FILTER_PREVIEW_WIDTH,height:MAX_FILTER_PREVIEW_HEIGHT},React.createElement(Layer,{onTap:h},React.createElement(Image,{image:f,filters:c?[c]:[],width:l,height:m,x:-(l-MAX_FILTER_PREVIEW_WIDTH)/2,y:-(m-MAX_FILTER_PREVIEW_HEIGHT)/2,ref:g}))),React.createElement(FilterItemLabel,{className:"FIE_filters-item-label"},b))};FilterItem.defaultProps={filterFn:void 0};export default memo(FilterItem);