@chief-editor/ui/es/components/color-panel/Saturation.js

UI Component for chief editor

var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var r,o=1,t=arguments.length;o<t;o++)for(var n in r=arguments[o])Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,r){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)r.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(o[t[n]]=e[t[n]])}return o};import{RcRegionProvider,useTwoDimensionRegion}from"@rc-hooks/region";import{useRefCallback}from"@rc-hooks/use";import React,{memo,useCallback}from"react";import{ColorLayer}from"./components/ColorLayer";import{ColorSlider}from"./components/ColorSlider";export var Saturation=memo((function(e){var r=e.changeOnEnd,o=e.disabled,t=e.onSLChange,n=e.hsl,a=__rest(e,["changeOnEnd","disabled","onSLChange","hsl"]),i=useRefCallback(t),s=useCallback((function(e){i({s:e.x,l:(100-e.x/2)*(1-e.y/100)})}),[]),l=useTwoDimensionRegion({value:{x:n.s,y:100-200*n.l/(200-n.s)},xAxis:{strict:!0,step:1,min:0,max:100,precision:0},yAxis:{strict:!0,step:1,min:0,max:100,precision:0},changeOnEnd:r},s)[0],c="hsl("+n.h+", 100%, 50%)";return React.createElement(RcRegionProvider,{region:l},React.createElement(ColorSlider,__assign({disabled:o,dimension:"two"},a),React.createElement(ColorLayer,{type:c}),React.createElement(ColorLayer,{type:"saturation"}),React.createElement(ColorLayer,{type:"light"})))}));