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

UI Component for chief editor

"use strict";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},__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)Object.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r.default=e,r};Object.defineProperty(exports,"__esModule",{value:!0});var dom_1=require("@rc-hooks/dom"),popper_1=require("@rc-hooks/popper"),region_1=require("@rc-hooks/region"),react_1=__importStar(require("react")),use_1=require("@rc-hooks/use"),hooks_1=require("../../hooks"),SliderDragger_1=require("./SliderDragger"),SliderMark_1=require("./SliderMark");exports.SliderContent=react_1.memo((function(e){var r=e.markList,t=void 0===r?[]:r,a=e.disabled,i=e.invalid,n=void 0!==i&&i,l=e.format,o=e.rangeStart,s=e.rangeEnd,u=e.showStart,d=__rest(e,["markList","disabled","invalid","format","rangeStart","rangeEnd","showStart"]),c=region_1.useRegion(),_=react_1.useRef(null),f=region_1.useRegionClick(_),p=use_1.useRefGetter(a),m=react_1.useCallback((function(e){p()||f(e)}),[]);dom_1.useElementSize(_,(function(){return!0}),(function(e){c.updateRegionSize({width:e.width,height:0})}));var g=t.map((function(e){return react_1.default.createElement(SliderMark_1.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:l,invalid:n})})),h=hooks_1.usePrefixCls("slider-content"),v=hooks_1.usePrefixCls("slider-background",{disabled:a,invalid:n}),b=hooks_1.usePrefixCls("slider-selected",{disabled:a,invalid:n}),k=hooks_1.usePrefixCls("slider-click",{disabled:a});return react_1.default.createElement(popper_1.RcPopper,null,react_1.default.createElement("div",__assign({ref:_,className:h},d),react_1.default.createElement("div",{className:v}),react_1.default.createElement("div",{className:b,style:{left:o+"px",right:s+"px"}}),g,react_1.default.createElement("div",{className:k,onClick:m}),u&&react_1.default.createElement(SliderDragger_1.SliderDragger,{draggable:!a,name:"start",format:l,invalid:n}),react_1.default.createElement(SliderDragger_1.SliderDragger,{draggable:!a,name:"end",format:l,invalid:n})))}));