@bizhermit/react-sdk/elements/inputs/slider.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,n,t,r){void 0===r&&(r=t);var c=Object.getOwnPropertyDescriptor(n,t);c&&!("get"in c?!n.__esModule:c.writable||c.configurable)||(c={enumerable:!0,get:function(){return n[t]}}),Object.defineProperty(e,r,c)}:function(e,n,t,r){void 0===r&&(r=t),e[r]=n[t]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,n){Object.defineProperty(e,"default",{enumerable:!0,value:n})}:function(e,n){e.default=n}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var n={};if(null!=e)for(var t in e)"default"!==t&&Object.prototype.hasOwnProperty.call(e,t)&&__createBinding(n,e,t);return __setModuleDefault(n,e),n},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useSlider=void 0;const react_1=__importStar(require("react")),value_1=__importDefault(require("../../hooks/value")),css_var_1=__importStar(require("../../styles/css-var")),input_style_1=__importDefault(require("../../styles/input-style")),jsx_style_1=__importDefault(require("../../styles/jsx-style")),cursor_1=require("../../utils/cursor"),input_1=require("../../utils/input"),resizer_1=__importDefault(require("../resizer")),cn="bh-sld",Slider=react_1.default.forwardRef(((e,n)=>{const t=(0,react_1.useRef)(),r=(0,react_1.useRef)(),c=(0,react_1.useRef)(),a=(0,react_1.useRef)(e.$min??0),s=(0,react_1.useRef)(e.$max??100),o=(0,react_1.useRef)(e.$keydownInterval??1),d=(0,react_1.useCallback)((e=>{if(null==c.current)return;const n=e??a.current,o=(n-a.current)/(s.current-a.current);r.current.style.width=100*o+"%",c.current.style.left=(t.current.clientWidth-c.current.offsetWidth)*o+"px",c.current.textContent=String(n)}),[]),{val:i,set:l,buf:u}=(0,value_1.default)(e,{effect:d}),_=(n,r)=>{if(e.$disabled||e.$readOnly)return;const o=t.current.clientWidth-c.current.offsetWidth;let i=c.current.offsetLeft,_=n,$=u.current;const f=n=>{$=Math.round(a.current+(s.current-a.current)*(Math.min(Math.max(0,n-_+i),o)/o)),e.$changing?.($),d($)};if(r){const e=e=>f(e.touches[0].clientX),n=()=>{window.removeEventListener("touchmove",e),window.removeEventListener("touchend",n),l.current($)};window.addEventListener("touchend",n),window.addEventListener("touchmove",e)}else{(0,cursor_1.setCursor)("col-resize");const e=e=>f(e.clientX),n=()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",n),(0,cursor_1.releaseCursor)(),l.current($)};window.addEventListener("mouseup",n),window.addEventListener("mousemove",e)}};return(0,react_1.useEffect)((()=>{e.$hook?._set({focus:()=>t.current?.focus(),getValue:()=>u.current,setValue:e=>l.current(e)})}),[e.$hook?._set]),react_1.default.createElement("div",{...(0,input_1.inputAttributes)(e,cn),ref:n},react_1.default.createElement("div",{className:`${cn}-body`,ref:t,tabIndex:!0===e.$disabled?-1:e.tabIndex??0,onKeyDown:n=>{if(!e.$disabled&&!e.$readOnly)switch(n.key){case"ArrowLeft":n.ctrlKey?l.current(a.current):l.current(Math.max(a.current,(i??a.current)-o.current)),n.stopPropagation(),n.preventDefault();break;case"ArrowRight":n.ctrlKey?l.current(s.current):l.current(Math.min(s.current,(i??a.current)+o.current)),n.stopPropagation(),n.preventDefault()}}},react_1.default.createElement("div",{className:`${cn}-bar`},react_1.default.createElement("div",{className:`${cn}-rate`,ref:r})),react_1.default.createElement("div",{className:`${cn}-handle`,ref:c,onMouseDown:e=>_(e.clientX),onTouchStart:e=>_(e.touches[0].clientX,!0)})),e.$resize?react_1.default.createElement(resizer_1.default,{direction:"x",resizing:()=>d(i)}):react_1.default.createElement(react_1.default.Fragment,null),input_style_1.default,Style)})),useSlider=()=>{const e=(0,react_1.useRef)({});return{focus:(0,react_1.useCallback)((()=>{e.current.focus?.()}),[]),getValue:(0,react_1.useCallback)((()=>e.current.getValue?.()),[]),setValue:(0,react_1.useCallback)((n=>{e.current.setValue?.(n)}),[]),_set:(0,react_1.useCallback)((n=>{e.current=n}),[])}};exports.useSlider=useSlider;const Style=react_1.default.createElement(jsx_style_1.default,{id:cn,depsDesign:!0},(({design:e})=>`\n.${cn} {\n  overflow: hidden;\n  width: 200px;\n  overflow: visible;\n}\n.${cn}-body {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  overflow: visible;\n${(0,css_var_1.switchDesign)(e,{fm:`\n  padding-left: calc(${css_var_1.default.size} / 2);\n  padding-right: calc(${css_var_1.default.size} / 2);\n`,neumorphism:"padding: 2px;"})}\n}\n.${cn}[data-m="d"] > .${cn}-body {\n  ${css_var_1.CssPV.inactOpacity}\n}\n.${cn}-bar {\n  box-sizing: border-box;\n  width: 100%;\n  overflow: hidden;\n${(0,css_var_1.switchDesign)(e,{_:"height: 100%;",fm:"\n  border: 1px solid;\n  height: 8px;\n  border-radius: 4px;\n",neumorphism:`\n  height: 100%;\n  box-shadow: ${css_var_1.CssPV.ccvSd};\n  border-radius: calc(${css_var_1.default.size} / 2 - 1px);\n`})}\n}\n.${cn}-rate {\n  box-sizing: border-box;\n  height: 100%;\n  width: 0px;\n${(0,css_var_1.switchDesign)(e,{neumorphism:`\n  box-shadow: ${css_var_1.CssPV.ccvSd};\n  border-radius: calc(${css_var_1.default.size} / 2 - 1px) 0 0 calc(${css_var_1.default.size} / 2 - 1px);\n`})}\n}\n.${cn}-handle {\n  box-sizing: border-box;\n  position: absolute;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  flex: none;\n  height: ${css_var_1.default.size};\n  width: ${css_var_1.default.size};\n  top: 0px;\n  left: 0px;\n  font-size: calc(${css_var_1.default.fs} * 0.75);\n  padding-top: 1px;\n  z-index: 1;\n${(0,css_var_1.switchDesign)(e,{c:"transition: top 0.2s;"})}\n}\n.${cn}[data-m="e"] > .${cn}-body > .${cn}-handle {\n  user-select: none;\n}\n.${cn}-handle::before {\n  ${css_var_1.CssPV.ba}\n  z-index: -1;\n${(0,css_var_1.switchDesign)(e,{c:"border-radius: 50%;",fm:"\n  height: calc(100% - 4px);\n  width: calc(100% - 4px);\n  top: 2px;\n  left: 2px;\n  border-width: 1px;\n  border-style: solid;\n",flat:"transition: border-color 0.2s;",material:"transition: box-shadow 0.2s;",neumorphism:`\n  height: calc(100% - 6px);\n  width: calc(100% - 6px);\n  top: 3px;\n  left: 3px;\n  box-shadow: ${css_var_1.CssPV.cvxSd};\n  background: ${css_var_1.default.bgc};\n`})}\n}\n.${cn}[data-m="e"] > .${cn}-body > .${cn}-handle {\n  cursor: col-resize;\n}\n${(0,css_var_1.switchDesign)(e,{_:`\n.${cn}[data-m="e"] > .${cn}-body > .${cn}-handle:active {\n  top: -100%;\n}`,fm:`\n.${cn}[data-m="e"] > .${cn}-body:focus > .${cn}-handle::before {\n  border-width: 3px;\n  border-style: double;\n}\n${(0,css_var_1.signalIterator)(((e,n,t)=>`\n.${cn}${t} > .${cn}-body > .${cn}-bar {\n  border-color: ${n.ipt.bdc};\n  background: ${n.ipt.off};\n}\n.${cn}${t} > .${cn}-body > .${cn}-bar > .${cn}-rate {\n  background: ${n.ipt.on};\n}\n.${cn}${t} > .${cn}-body > .${cn}-handle::before {\n  border-color: ${n.ipt.bdc};\n  background: ${n.ipt.off};\n}\n.${cn}${t}[data-m="e"] > .${cn}-body > .${cn}-handle:active::after {\n  background: ${n.ipt.bdc};\n}`)).join("")}\n.${cn}[data-m="e"] > .${cn}-body > .${cn}-handle:active {\n  top: calc(${css_var_1.default.size} / 2 * -1 - 4px);\n}\n.${cn}[data-m="e"] > .${cn}-body > .${cn}-handle:active::before {\n  border-radius: ${css_var_1.default.bdr};\n  width: 120%;\n  left: -10%;\n}\n.${cn}[data-m="e"] > .${cn}-body > .${cn}-handle:active::after {\n  ${css_var_1.CssPV.ba}\n  bottom: -1px;\n  left: calc(50% - 2px);\n  height: 4px;\n  width: 4px;\n  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\n  z-index: 1;\n}`,material:`\n.${cn}[data-m="e"] > .${cn}-body > .${cn}-handle::before {\n  box-shadow: 0px 3px 4px -2px ${css_var_1.default.sdw.c};\n}\n.${cn}[data-m="e"] > .${cn}-body > .${cn}-handle:hover::before {\n  box-shadow: 0px 4px 4px -2px ${css_var_1.default.sdw.c};\n}`,neumorphism:`\n.${cn}[data-m="e"] > .${cn}-body > .${cn}-handle:active {\n  top: -100%;\n}\n.${cn}[data-m="e"] > .${cn}-body > .${cn}-handle:hover::before {\n  box-shadow: ${css_var_1.CssPV.cvxSdD};\n}\n.${cn}[data-m="e"] > .${cn}-body > .${cn}-handle:active::before {\n  border-radius: ${css_var_1.default.bdr};\n  width: 120%;\n  left: -10%;\n  box-shadow: ${css_var_1.CssPV.cvxSdD};\n}\n${(0,css_var_1.signalIterator)(((e,n,t)=>`\n.${cn}${t} > .${cn}-body > .${cn}-bar > .${cn}-rate {\n  background: ${n.ipt.on};\n}`)).join("")}\n.${cn}[data-m="r"] > .${cn}-body > .${cn}-bar,\n.${cn}[data-m="d"] > .${cn}-body > .${cn}-bar {\n  box-shadow: ${css_var_1.CssPV.ccvSdS};\n}\n.${cn}[data-m="r"] > .${cn}-body > .${cn}-handle::before,\n.${cn}[data-m="d"] > .${cn}-body > .${cn}-handle::before {\n  box-shadow: ${css_var_1.CssPV.cvxSdS};\n}`})}\n.${cn}[data-m="r"] > .${cn}-body > .${cn}-bar,\n.${cn}[data-m="d"] > .${cn}-body > .${cn}-bar {\n  background: transparent;\n}\n`));exports.default=Slider;