@chief-editor/ui/es/components/slider/SliderContent.js

UI Component for chief editor

var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var r,t=1,a=arguments.length;t<a;t++)for(var i in r=arguments[t])Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,r){var t={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(a=Object.getOwnPropertySymbols(e);i<a.length;i++)r.indexOf(a[i])<0&&Object.prototype.propertyIsEnumerable.call(e,a[i])&&(t[a[i]]=e[a[i]])}return t};import{useElementSize}from"@rc-hooks/dom";import{RcPopper}from"@rc-hooks/popper";import{useRegion,useRegionClick}from"@rc-hooks/region";import React,{memo,useCallback,useRef}from"react";import{useRefGetter}from"@rc-hooks/use";import{usePrefixCls}from"../../hooks";import{SliderDragger}from"./SliderDragger";import{SliderMark}from"./SliderMark";export var SliderContent=memo((function(e){var r=e.markList,t=void 0===r?[]:r,a=e.disabled,i=e.invalid,n=void 0!==i&&i,o=e.format,l=e.rangeStart,s=e.rangeEnd,c=e.showStart,m=__rest(e,["markList","disabled","invalid","format","rangeStart","rangeEnd","showStart"]),d=useRegion(),u=useRef(null),f=useRegionClick(u),p=useRefGetter(a),g=useCallback((function(e){p()||f(e)}),[]);useElementSize(u,(function(){return!0}),(function(e){d.updateRegionSize({width:e.width,height:0})}));var v=t.map((function(e){return React.createElement(SliderMark,{key:"number"==typeof e?e:e.value,value:"number"==typeof e?e:e.value,tooltip:"number"==typeof e?"":e.tooltip,placement:"number"==typeof e?"center":e.placement,format:o,invalid:n})})),b=usePrefixCls("slider-content"),h=usePrefixCls("slider-background",{disabled:a,invalid:n}),R=usePrefixCls("slider-selected",{disabled:a,invalid:n}),k=usePrefixCls("slider-click",{disabled:a});return React.createElement(RcPopper,null,React.createElement("div",__assign({ref:u,className:b},m),React.createElement("div",{className:h}),React.createElement("div",{className:R,style:{left:l+"px",right:s+"px"}}),v,React.createElement("div",{className:k,onClick:g}),c&&React.createElement(SliderDragger,{draggable:!a,name:"start",format:o,invalid:n}),React.createElement(SliderDragger,{draggable:!a,name:"end",format:o,invalid:n})))}));