@lanaco/lnc-react-ui/dist/RangeSlider.cjs

React component library

"use strict";const t=require("react/jsx-runtime"),y=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),n=require("./index-BPVoEhTF.cjs"),o=require("react"),a=require("./utils-NZLCh-J5.cjs"),U=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),_=require("./useUpdateEffect-BtMgpgIV.cjs"),L=({theme:e,size:i})=>{var c=a.getSizeValueWithUnits(e,i);return`
    min-height: ${c};
    max-height: ${c};
  `},b={small:"0.875rem",medium:"1.125rem",large:"1.375rem"},W=y.newStyled.div`
  position: relative;
  ${e=>L(e)};
  display: inline-flex;
  align-items: center;
`,I=y.newStyled.input`
  -webkit-appearance: none; /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 0.25rem; /* Specified height */
  border-radius: 3px;
  outline: none; /* Remove outline */
  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
  background: ${e=>e.rangeBackground};
  transition: background 450ms ease-in;
  -webkit-appearance: none;
  border-radius: ${e=>a.getBorderRadiusValueWithUnits(e.theme,"regular")};
  &::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: ${e=>b[e.size]}; /* Set a specific slider handle width */
    height: ${e=>b[e.size]}; /* Slider handle height */
    border-radius: 50%;
    background-color: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
    cursor: pointer; /* Cursor on hover */
    border: none;
  }
  &::-moz-range-thumb {
    width: ${e=>b[e.size]}; /* Set a specific slider handle width */
    height: ${e=>b[e.size]}; /* Slider handle height */
    border-radius: 50%;
    background-color: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
    cursor: pointer; /* Cursor on hover */
    border: none;
  }
`,X=y.newStyled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  ${e=>a.getComponentTypographyCss(e.theme,"Range",e.size,"enabled")};
  left: ${e=>`calc(${e.inputValue+"%"} + (${8-e.inputValue*.15}px))`};
  top: ${e=>"calc(-"+b[e.size]+")"};
  transform: translateX(-50%);
  & > .text-content {
    color: white;
    background-color: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
    border-radius: 3px;
    z-index: 2;
    padding: 2px 6px;
  }
  & > .arrow {
    & > .outer {
      height: 4px;
      position: relative;
      & > .inner {
        width: 8px;
        height: 8px;
        background: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
        transform: rotate(45deg);
        position: absolute;
        top: -6px;
        left: -4px;
        z-index: 1;
        border-radius: 1px;
      }
    }
  }
`,q=o.forwardRef((e,i)=>{const{defaultValue:c,value:l=null,min:g=0,max:h=100,disabled:d,tabIndex:v=0,onChange:R=()=>{},onInput:w=()=>{},color:u="primary",size:E="small",className:N="",style:O={},...$}=e,C=o.useRef(),p=U.useTheme(),m={theme:p,size:E,color:u,className:N,style:O},S=a.getColorRgbaValue(p,"Range",u,"enabled","unfilled"),[k,M]=o.useState(a.getColorRgbaValue(p,"Range",u,d?"disabled":"enabled","background")),[P,B]=o.useState(),[F,f]=o.useState(),x=o.useCallback(r=>Math.round((r-g)/(h-g)*100),[g,h]),[s,T]=o.useState(l||c);_.useUpdateEffect(()=>{T(l)},[l]),o.useEffect(()=>{z(s||0)},[s,x,d,u]),o.useEffect(()=>{M(a.getColorRgbaValue(p,"Range",u,d?"disabled":"enabled","background"))},[u,d]);const V=r=>{z(r.target.value),w&&w(r)},z=r=>{B(`linear-gradient(to right, ${k} 0%, ${k} ${x(r)}%, ${S} ${x(r)}%, ${S} 100%)`)},j=r=>{T(r.target.value),R&&R(r)};return t.jsxs(W,{...m,children:[F&&s&&t.jsx(t.Fragment,{children:t.jsxs(X,{...m,inputValue:x(s),children:[t.jsx("div",{className:"text-content",children:s}),t.jsx("div",{className:"arrow",children:t.jsx("div",{className:"outer",children:t.jsx("div",{className:"inner"})})})]})}),l==null||l=="undefined"?t.jsx(I,{ref:i||C,id:"fader",type:"range",min:g,max:h,defaultValue:c,disabled:d,tabIndex:v,onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!1)},rangeBackground:P,onInput:V,onChange:j,...m,...$}):t.jsx(I,{ref:i||C,id:"fader",type:"range",min:g,max:h,value:s,disabled:d,tabIndex:v,onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!1)},rangeBackground:P,onInput:V,onChange:j,...m,...$})]})});q.propTypes={value:n.PropTypes.number,defaultValue:n.PropTypes.number,min:n.PropTypes.number,max:n.PropTypes.number,disabled:n.PropTypes.bool,tabIndex:n.PropTypes.number,onChange:n.PropTypes.func,onInput:n.PropTypes.func,className:n.PropTypes.string,style:n.PropTypes.object,size:n.PropTypes.oneOf(["small","medium","large"]),color:n.PropTypes.oneOf(["primary","secondary","success","danger","warning","disabled","information","neutral","gray"])};module.exports=q;