@bikdotai/bik-component-library 0.0.740-beta.0 → 0.0.740-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("../../constants/Theme.js");exports.BikSlider=n=>{let{min:r=0,max:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("../../constants/Theme.js");exports.BikSlider=n=>{let{min:r=0,max:o=100,defaultValue:s,onChange:i,step:l=1,disabled:u=!1}=n;const b=void 0!==s?s:r,[c,d]=t.useState(b),[g,h]=t.useState(!1),[m,p]=t.useState(!1),[x,f]=t.useState(!1),v=t.useRef(null),k=t.useRef(null),w=t.useMemo((()=>(e=>({container:{position:"relative",marginTop:"30px",height:"8px",width:"100%",cursor:e?"not-allowed":"pointer",opacity:e?.5:1},track:{position:"absolute",top:0,left:0,right:0,height:"8px",backgroundColor:"#E0E0E0",borderRadius:"4px"},filledTrack:{position:"absolute",top:0,left:0,height:"8px",backgroundColor:a.COLORS.background.brand,borderRadius:"4px",transition:"width 0.1s ease"},filledTrackDragging:{position:"absolute",top:0,left:0,height:"8px",backgroundColor:a.COLORS.background.brand,borderRadius:"4px",transition:"none"},thumb:{position:"absolute",top:"50%",width:"24px",height:"24px",backgroundColor:a.COLORS.background.brand,border:`2px solid ${a.COLORS.background.brand}`,borderRadius:"50%",transform:"translate(-50%, -50%)",cursor:e?"not-allowed":"grab",transition:"box-shadow 0.2s ease",outline:"none",zIndex:1},thumbDisabled:{cursor:"not-allowed"},valueLabel:{position:"absolute",bottom:"100%",left:"50%",marginBottom:"16px",width:"32px",height:"32px",backgroundColor:a.COLORS.background.brand,borderRadius:"50% 50% 50% 0",transform:"translate(0, 0) rotate(-45deg) scale(0)",transformOrigin:"bottom left",transition:"transform 0.2s ease",pointerEvents:"none",display:"flex",alignItems:"center",justifyContent:"center"},valueLabelVisible:{transform:"translate(0, 0) rotate(-45deg) scale(1)"},valueLabelText:{transform:"rotate(45deg)",color:"white",fontSize:"12px",lineHeight:1.2,fontWeight:500}}))(u)),[u]);t.useEffect((()=>{d(void 0!==s?s:r)}),[s,r]);const O=t.useCallback((e=>{if(!v.current)return r;const t=v.current.getBoundingClientRect(),a=Math.max(0,Math.min(1,(e-t.left)/t.width)),n=r+a*(o-r),s=Math.round(n/l)*l;return Math.max(r,Math.min(o,s))}),[r,o,l]),j=t.useCallback((e=>{if(u)return;e.preventDefault(),h(!0),f(!0);const t=O(e.clientX);d(t);const a=new Event("change",{bubbles:!0});i(a,t)}),[u,O,i]),L=t.useCallback((e=>{if(!g||u)return;const t=O(e.clientX);d(t);const a=new Event("change",{bubbles:!0});i(a,t)}),[g,u,O,i]),C=t.useCallback((()=>{h(!1),f(!1)}),[]),M=t.useCallback((e=>{if(u)return;let t=c;switch(e.key){case"ArrowLeft":case"ArrowDown":t=Math.max(r,c-l);break;case"ArrowRight":case"ArrowUp":t=Math.min(o,c+l);break;case"Home":t=r;break;case"End":t=o;break;default:return}e.preventDefault(),d(t);const a=new Event("change",{bubbles:!0});i(a,t)}),[u,c,r,o,l,i]);t.useEffect((()=>{if(g)return document.addEventListener("mousemove",L),document.addEventListener("mouseup",C),()=>{document.removeEventListener("mousemove",L),document.removeEventListener("mouseup",C)}}),[g,L,C]);const E=(c-r)/(o-r)*100,R=isNaN(E)?0:Math.max(0,Math.min(100,E)),S=t.useMemo((()=>{const e=Object.assign({},w.thumb);return u?Object.assign(Object.assign({},e),w.thumbDisabled):(g?(e.boxShadow="0px 0px 0px 8px rgba(115, 29, 207, 0.5)",e.cursor="grabbing"):m&&(e.boxShadow="0px 0px 0px 8px rgba(115, 29, 207, 0.08)"),e.left=`${R}%`,e)}),[w.thumb,w.thumbDisabled,u,g,m,R]),y=t.useMemo((()=>{const e=Object.assign({},w.valueLabel);return x||m?Object.assign(Object.assign({},e),w.valueLabelVisible):e}),[w.valueLabel,w.valueLabelVisible,x,m]);return e.jsxs("div",Object.assign({ref:v,style:w.container,onMouseDown:j,role:"slider","aria-label":"bik slider","aria-valuemin":r,"aria-valuemax":o,"aria-valuenow":c,tabIndex:u?-1:0,onKeyDown:M},{children:[e.jsx("div",{style:w.track}),e.jsx("div",{style:Object.assign(Object.assign({},g?w.filledTrackDragging:w.filledTrack),{width:`${R}%`})}),e.jsx("div",Object.assign({ref:k,style:S,onMouseEnter:()=>!u&&p(!0),onMouseLeave:()=>!u&&p(!1),onFocus:()=>!u&&f(!0),onBlur:()=>!u&&f(!1)},{children:e.jsx("div",Object.assign({style:y},{children:e.jsx("span",Object.assign({style:w.valueLabelText},{children:c}))}))}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n,useRef as a,
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n,useRef as a,useMemo as r,useEffect as o,useCallback as i}from"react";import{COLORS as s}from"../../constants/Theme.js";const l=l=>{let{min:b=0,max:u=100,defaultValue:d,onChange:c,step:g=1,disabled:h=!1}=l;const m=void 0!==d?d:b,[p,x]=n(m),[f,v]=n(!1),[w,k]=n(!1),[j,L]=n(!1),E=a(null),O=a(null),M=r((()=>(e=>({container:{position:"relative",marginTop:"30px",height:"8px",width:"100%",cursor:e?"not-allowed":"pointer",opacity:e?.5:1},track:{position:"absolute",top:0,left:0,right:0,height:"8px",backgroundColor:"#E0E0E0",borderRadius:"4px"},filledTrack:{position:"absolute",top:0,left:0,height:"8px",backgroundColor:s.background.brand,borderRadius:"4px",transition:"width 0.1s ease"},filledTrackDragging:{position:"absolute",top:0,left:0,height:"8px",backgroundColor:s.background.brand,borderRadius:"4px",transition:"none"},thumb:{position:"absolute",top:"50%",width:"24px",height:"24px",backgroundColor:s.background.brand,border:`2px solid ${s.background.brand}`,borderRadius:"50%",transform:"translate(-50%, -50%)",cursor:e?"not-allowed":"grab",transition:"box-shadow 0.2s ease",outline:"none",zIndex:1},thumbDisabled:{cursor:"not-allowed"},valueLabel:{position:"absolute",bottom:"100%",left:"50%",marginBottom:"16px",width:"32px",height:"32px",backgroundColor:s.background.brand,borderRadius:"50% 50% 50% 0",transform:"translate(0, 0) rotate(-45deg) scale(0)",transformOrigin:"bottom left",transition:"transform 0.2s ease",pointerEvents:"none",display:"flex",alignItems:"center",justifyContent:"center"},valueLabelVisible:{transform:"translate(0, 0) rotate(-45deg) scale(1)"},valueLabelText:{transform:"rotate(45deg)",color:"white",fontSize:"12px",lineHeight:1.2,fontWeight:500}}))(h)),[h]);o((()=>{x(void 0!==d?d:b)}),[d,b]);const y=i((e=>{if(!E.current)return b;const t=E.current.getBoundingClientRect(),n=Math.max(0,Math.min(1,(e-t.left)/t.width)),a=b+n*(u-b),r=Math.round(a/g)*g;return Math.max(b,Math.min(u,r))}),[b,u,g]),D=i((e=>{if(h)return;e.preventDefault(),v(!0),L(!0);const t=y(e.clientX);x(t);const n=new Event("change",{bubbles:!0});c(n,t)}),[h,y,c]),C=i((e=>{if(!f||h)return;const t=y(e.clientX);x(t);const n=new Event("change",{bubbles:!0});c(n,t)}),[f,h,y,c]),T=i((()=>{v(!1),L(!1)}),[]),R=i((e=>{if(h)return;let t=p;switch(e.key){case"ArrowLeft":case"ArrowDown":t=Math.max(b,p-g);break;case"ArrowRight":case"ArrowUp":t=Math.min(u,p+g);break;case"Home":t=b;break;case"End":t=u;break;default:return}e.preventDefault(),x(t);const n=new Event("change",{bubbles:!0});c(n,t)}),[h,p,b,u,g,c]);o((()=>{if(f)return document.addEventListener("mousemove",C),document.addEventListener("mouseup",T),()=>{document.removeEventListener("mousemove",C),document.removeEventListener("mouseup",T)}}),[f,C,T]);const A=(p-b)/(u-b)*100,V=isNaN(A)?0:Math.max(0,Math.min(100,A)),B=r((()=>{const e=Object.assign({},M.thumb);return h?Object.assign(Object.assign({},e),M.thumbDisabled):(f?(e.boxShadow="0px 0px 0px 8px rgba(115, 29, 207, 0.5)",e.cursor="grabbing"):w&&(e.boxShadow="0px 0px 0px 8px rgba(115, 29, 207, 0.08)"),e.left=`${V}%`,e)}),[M.thumb,M.thumbDisabled,h,f,w,V]),I=r((()=>{const e=Object.assign({},M.valueLabel);return j||w?Object.assign(Object.assign({},e),M.valueLabelVisible):e}),[M.valueLabel,M.valueLabelVisible,j,w]);return e("div",Object.assign({ref:E,style:M.container,onMouseDown:D,role:"slider","aria-label":"bik slider","aria-valuemin":b,"aria-valuemax":u,"aria-valuenow":p,tabIndex:h?-1:0,onKeyDown:R},{children:[t("div",{style:M.track}),t("div",{style:Object.assign(Object.assign({},f?M.filledTrackDragging:M.filledTrack),{width:`${V}%`})}),t("div",Object.assign({ref:O,style:B,onMouseEnter:()=>!h&&k(!0),onMouseLeave:()=>!h&&k(!1),onFocus:()=>!h&&L(!0),onBlur:()=>!h&&L(!1)},{children:t("div",Object.assign({style:I},{children:t("span",Object.assign({style:M.valueLabelText},{children:p}))}))}))]}))};export{l as BikSlider};
|