@tamagui/slider 1.13.3 → 1.13.4
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.
- package/dist/cjs/Slider.js +1 -481
- package/dist/cjs/Slider.js.map +2 -2
- package/dist/cjs/SliderImpl.js +1 -139
- package/dist/cjs/SliderImpl.js.map +2 -2
- package/dist/cjs/constants.js +1 -62
- package/dist/cjs/constants.js.map +2 -2
- package/dist/cjs/helpers.js +1 -101
- package/dist/cjs/helpers.js.map +2 -2
- package/dist/cjs/index.js +1 -32
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/types.js +1 -16
- package/dist/cjs/types.js.map +2 -2
- package/dist/esm/Slider.js +1 -462
- package/dist/esm/Slider.js.map +2 -2
- package/dist/esm/Slider.mjs +1 -462
- package/dist/esm/Slider.mjs.map +2 -2
- package/dist/esm/SliderImpl.js +1 -103
- package/dist/esm/SliderImpl.js.map +2 -2
- package/dist/esm/SliderImpl.mjs +1 -103
- package/dist/esm/SliderImpl.mjs.map +2 -2
- package/dist/esm/constants.js +1 -29
- package/dist/esm/constants.js.map +2 -2
- package/dist/esm/constants.mjs +1 -29
- package/dist/esm/constants.mjs.map +2 -2
- package/dist/esm/helpers.js +1 -69
- package/dist/esm/helpers.js.map +2 -2
- package/dist/esm/helpers.mjs +1 -69
- package/dist/esm/helpers.mjs.map +2 -2
- package/dist/esm/index.js +1 -6
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/index.mjs +1 -6
- package/dist/esm/index.mjs.map +2 -2
- package/dist/jsx/Slider.js +1 -428
- package/dist/jsx/Slider.js.map +2 -2
- package/dist/jsx/Slider.mjs +1 -428
- package/dist/jsx/Slider.mjs.map +2 -2
- package/dist/jsx/SliderImpl.js +1 -99
- package/dist/jsx/SliderImpl.js.map +2 -2
- package/dist/jsx/SliderImpl.mjs +1 -99
- package/dist/jsx/SliderImpl.mjs.map +2 -2
- package/dist/jsx/constants.js +1 -29
- package/dist/jsx/constants.js.map +2 -2
- package/dist/jsx/constants.mjs +1 -29
- package/dist/jsx/constants.mjs.map +2 -2
- package/dist/jsx/helpers.js +1 -69
- package/dist/jsx/helpers.js.map +2 -2
- package/dist/jsx/helpers.mjs +1 -69
- package/dist/jsx/helpers.mjs.map +2 -2
- package/dist/jsx/index.js +1 -6
- package/dist/jsx/index.js.map +2 -2
- package/dist/jsx/index.mjs +1 -6
- package/dist/jsx/index.mjs.map +2 -2
- package/package.json +10 -10
package/dist/esm/SliderImpl.js
CHANGED
|
@@ -1,104 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { composeEventHandlers, getVariableValue, isWeb, styled } from "@tamagui/core";
|
|
3
|
-
import { getSize } from "@tamagui/get-size";
|
|
4
|
-
import { YStack } from "@tamagui/stacks";
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
import { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from "./constants";
|
|
7
|
-
const DirectionalYStack = styled(YStack, {
|
|
8
|
-
variants: {
|
|
9
|
-
orientation: {
|
|
10
|
-
horizontal: {},
|
|
11
|
-
vertical: {}
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
});
|
|
15
|
-
const SliderFrame = styled(DirectionalYStack, {
|
|
16
|
-
position: "relative",
|
|
17
|
-
variants: {
|
|
18
|
-
size: (val, extras) => {
|
|
19
|
-
const orientation = extras.props.orientation;
|
|
20
|
-
const size = Math.round(getVariableValue(getSize(val)) / 6);
|
|
21
|
-
if (orientation === "horizontal") {
|
|
22
|
-
return {
|
|
23
|
-
height: size,
|
|
24
|
-
borderRadius: size,
|
|
25
|
-
justifyContent: "center"
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
return {
|
|
29
|
-
width: size,
|
|
30
|
-
borderRadius: size,
|
|
31
|
-
alignItems: "center"
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
const SliderImpl = React.forwardRef(
|
|
37
|
-
(props, forwardedRef) => {
|
|
38
|
-
const {
|
|
39
|
-
__scopeSlider,
|
|
40
|
-
onSlideStart,
|
|
41
|
-
onSlideMove,
|
|
42
|
-
onSlideEnd,
|
|
43
|
-
onHomeKeyDown,
|
|
44
|
-
onEndKeyDown,
|
|
45
|
-
onStepKeyDown,
|
|
46
|
-
...sliderProps
|
|
47
|
-
} = props;
|
|
48
|
-
const context = useSliderContext(SLIDER_NAME, __scopeSlider);
|
|
49
|
-
return /* @__PURE__ */ jsx(
|
|
50
|
-
SliderFrame,
|
|
51
|
-
{
|
|
52
|
-
size: "$4",
|
|
53
|
-
...sliderProps,
|
|
54
|
-
"data-orientation": sliderProps.orientation,
|
|
55
|
-
ref: forwardedRef,
|
|
56
|
-
...isWeb && {
|
|
57
|
-
onKeyDown: (event) => {
|
|
58
|
-
if (event.key === "Home") {
|
|
59
|
-
onHomeKeyDown(event);
|
|
60
|
-
event.preventDefault();
|
|
61
|
-
} else if (event.key === "End") {
|
|
62
|
-
onEndKeyDown(event);
|
|
63
|
-
event.preventDefault();
|
|
64
|
-
} else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
|
|
65
|
-
onStepKeyDown(event);
|
|
66
|
-
event.preventDefault();
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
onMoveShouldSetResponderCapture: () => true,
|
|
71
|
-
onScrollShouldSetResponder: () => true,
|
|
72
|
-
onScrollShouldSetResponderCapture: () => true,
|
|
73
|
-
onMoveShouldSetResponder: () => true,
|
|
74
|
-
onStartShouldSetResponder: () => true,
|
|
75
|
-
onResponderTerminationRequest: () => {
|
|
76
|
-
return false;
|
|
77
|
-
},
|
|
78
|
-
onResponderGrant: composeEventHandlers(props.onResponderGrant, (event) => {
|
|
79
|
-
const target = event.target;
|
|
80
|
-
const isStartingOnThumb = context.thumbs.has(target);
|
|
81
|
-
if (isWeb && target instanceof HTMLElement) {
|
|
82
|
-
if (context.thumbs.has(target)) {
|
|
83
|
-
target.focus();
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
onSlideStart(event, isStartingOnThumb ? "thumb" : "track");
|
|
87
|
-
}),
|
|
88
|
-
onResponderMove: composeEventHandlers(props.onResponderMove, (event) => {
|
|
89
|
-
event.stopPropagation();
|
|
90
|
-
onSlideMove(event);
|
|
91
|
-
}),
|
|
92
|
-
onResponderRelease: composeEventHandlers(props.onResponderRelease, (event) => {
|
|
93
|
-
onSlideEnd(event);
|
|
94
|
-
})
|
|
95
|
-
}
|
|
96
|
-
);
|
|
97
|
-
}
|
|
98
|
-
);
|
|
99
|
-
export {
|
|
100
|
-
DirectionalYStack,
|
|
101
|
-
SliderFrame,
|
|
102
|
-
SliderImpl
|
|
103
|
-
};
|
|
1
|
+
import{jsx as z}from"react/jsx-runtime";import{composeEventHandlers as s,getVariableValue as h,isWeb as l,styled as p}from"@tamagui/core";import{getSize as E}from"@tamagui/get-size";import{YStack as b}from"@tamagui/stacks";import*as w from"react";import{ARROW_KEYS as y,PAGE_KEYS as D,SLIDER_NAME as M,useSliderContext as g}from"./constants";const P=p(b,{variants:{orientation:{horizontal:{},vertical:{}}}}),k=p(P,{position:"relative",variants:{size:(o,n)=>{const i=n.props.orientation,t=Math.round(h(E(o))/6);return i==="horizontal"?{height:t,borderRadius:t,justifyContent:"center"}:{width:t,borderRadius:t,alignItems:"center"}}}}),v=w.forwardRef((o,n)=>{const{__scopeSlider:i,onSlideStart:t,onSlideMove:S,onSlideEnd:u,onHomeKeyDown:c,onEndKeyDown:m,onStepKeyDown:f,...a}=o,d=g(M,i);return z(k,{size:"$4",...a,"data-orientation":a.orientation,ref:n,...l&&{onKeyDown:e=>{e.key==="Home"?(c(e),e.preventDefault()):e.key==="End"?(m(e),e.preventDefault()):D.concat(y).includes(e.key)&&(f(e),e.preventDefault())}},onMoveShouldSetResponderCapture:()=>!0,onScrollShouldSetResponder:()=>!0,onScrollShouldSetResponderCapture:()=>!0,onMoveShouldSetResponder:()=>!0,onStartShouldSetResponder:()=>!0,onResponderTerminationRequest:()=>!1,onResponderGrant:s(o.onResponderGrant,e=>{const r=e.target,R=d.thumbs.has(r);l&&r instanceof HTMLElement&&d.thumbs.has(r)&&r.focus(),t(e,R?"thumb":"track")}),onResponderMove:s(o.onResponderMove,e=>{e.stopPropagation(),S(e)}),onResponderRelease:s(o.onResponderRelease,e=>{u(e)})})});export{P as DirectionalYStack,k as SliderFrame,v as SliderImpl};
|
|
104
2
|
//# sourceMappingURL=SliderImpl.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SliderImpl.tsx"],
|
|
4
4
|
"sourcesContent": ["/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\nimport { composeEventHandlers, getVariableValue, isWeb, styled } from '@tamagui/core'\nimport { getSize } from '@tamagui/get-size'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from './constants'\nimport { ScopedProps, SliderImplProps } from './types'\n\nexport const DirectionalYStack = styled(YStack, {\n variants: {\n orientation: {\n horizontal: {},\n vertical: {},\n },\n } as const,\n})\n\nexport const SliderFrame = styled(DirectionalYStack, {\n position: 'relative',\n\n variants: {\n size: (val, extras) => {\n const orientation = extras.props.orientation\n const size = Math.round(getVariableValue(getSize(val)) / 6)\n if (orientation === 'horizontal') {\n return {\n height: size,\n borderRadius: size,\n justifyContent: 'center',\n }\n }\n return {\n width: size,\n borderRadius: size,\n alignItems: 'center',\n }\n },\n } as const,\n})\n\nexport const SliderImpl = React.forwardRef<View, SliderImplProps>(\n (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n const {\n __scopeSlider,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onHomeKeyDown,\n onEndKeyDown,\n onStepKeyDown,\n ...sliderProps\n } = props\n const context = useSliderContext(SLIDER_NAME, __scopeSlider)\n return (\n <SliderFrame\n size=\"$4\"\n {...sliderProps}\n data-orientation={sliderProps.orientation}\n ref={forwardedRef}\n {...(isWeb && {\n onKeyDown: (event) => {\n if (event.key === 'Home') {\n onHomeKeyDown(event)\n // Prevent scrolling to page start\n event.preventDefault()\n } else if (event.key === 'End') {\n onEndKeyDown(event)\n // Prevent scrolling to page end\n event.preventDefault()\n } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n onStepKeyDown(event)\n // Prevent scrolling for directional key presses\n event.preventDefault()\n }\n },\n })}\n onMoveShouldSetResponderCapture={() => true}\n onScrollShouldSetResponder={() => true}\n onScrollShouldSetResponderCapture={() => true}\n onMoveShouldSetResponder={() => true}\n onStartShouldSetResponder={() => true}\n // onStartShouldSetResponderCapture={() => true}\n onResponderTerminationRequest={() => {\n return false\n }}\n onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {\n const target = event.target as unknown as HTMLElement | number\n const isStartingOnThumb = context.thumbs.has(target)\n // // Prevent browser focus behaviour because we focus a thumb manually when values change.\n // Touch devices have a delay before focusing so won't focus if touch immediately moves\n // away from target (sliding). We want thumb to focus regardless.\n if (isWeb && target instanceof HTMLElement) {\n if (context.thumbs.has(target)) {\n target.focus()\n }\n }\n onSlideStart(event, isStartingOnThumb ? 'thumb' : 'track')\n })}\n onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {\n event.stopPropagation()\n // const target = event.target as HTMLElement\n onSlideMove(event)\n })}\n onResponderRelease={composeEventHandlers(props.onResponderRelease, (event) => {\n // const target = event.target as HTMLElement\n onSlideEnd(event)\n })}\n />\n )\n }\n)\n"],
|
|
5
|
-
"mappings": "AA2DM
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AA2DM,cAAAA,MAAA,oBAvDN,OAAS,wBAAAC,EAAsB,oBAAAC,EAAkB,SAAAC,EAAO,UAAAC,MAAc,gBACtE,OAAS,WAAAC,MAAe,oBACxB,OAAS,UAAAC,MAAc,kBACvB,UAAYC,MAAW,QAGvB,OAAS,cAAAC,EAAY,aAAAC,EAAW,eAAAC,EAAa,oBAAAC,MAAwB,cAG9D,MAAMC,EAAoBR,EAAOE,EAAQ,CAC9C,SAAU,CACR,YAAa,CACX,WAAY,CAAC,EACb,SAAU,CAAC,CACb,CACF,CACF,CAAC,EAEYO,EAAcT,EAAOQ,EAAmB,CACnD,SAAU,WAEV,SAAU,CACR,KAAM,CAACE,EAAKC,IAAW,CACrB,MAAMC,EAAcD,EAAO,MAAM,YAC3BE,EAAO,KAAK,MAAMf,EAAiBG,EAAQS,CAAG,CAAC,EAAI,CAAC,EAC1D,OAAIE,IAAgB,aACX,CACL,OAAQC,EACR,aAAcA,EACd,eAAgB,QAClB,EAEK,CACL,MAAOA,EACP,aAAcA,EACd,WAAY,QACd,CACF,CACF,CACF,CAAC,EAEYC,EAAaX,EAAM,WAC9B,CAACY,EAAqCC,IAAiB,CACrD,KAAM,CACJ,cAAAC,EACA,aAAAC,EACA,YAAAC,EACA,WAAAC,EACA,cAAAC,EACA,aAAAC,EACA,cAAAC,EACA,GAAGC,CACL,EAAIT,EACEU,EAAUlB,EAAiBD,EAAaW,CAAa,EAC3D,OACErB,EAACa,EAAA,CACC,KAAK,KACJ,GAAGe,EACJ,mBAAkBA,EAAY,YAC9B,IAAKR,EACJ,GAAIjB,GAAS,CACZ,UAAY2B,GAAU,CAChBA,EAAM,MAAQ,QAChBL,EAAcK,CAAK,EAEnBA,EAAM,eAAe,GACZA,EAAM,MAAQ,OACvBJ,EAAaI,CAAK,EAElBA,EAAM,eAAe,GACZrB,EAAU,OAAOD,CAAU,EAAE,SAASsB,EAAM,GAAG,IACxDH,EAAcG,CAAK,EAEnBA,EAAM,eAAe,EAEzB,CACF,EACA,gCAAiC,IAAM,GACvC,2BAA4B,IAAM,GAClC,kCAAmC,IAAM,GACzC,yBAA0B,IAAM,GAChC,0BAA2B,IAAM,GAEjC,8BAA+B,IACtB,GAET,iBAAkB7B,EAAqBkB,EAAM,iBAAmBW,GAAU,CACxE,MAAMC,EAASD,EAAM,OACfE,EAAoBH,EAAQ,OAAO,IAAIE,CAAM,EAI/C5B,GAAS4B,aAAkB,aACzBF,EAAQ,OAAO,IAAIE,CAAM,GAC3BA,EAAO,MAAM,EAGjBT,EAAaQ,EAAOE,EAAoB,QAAU,OAAO,CAC3D,CAAC,EACD,gBAAiB/B,EAAqBkB,EAAM,gBAAkBW,GAAU,CACtEA,EAAM,gBAAgB,EAEtBP,EAAYO,CAAK,CACnB,CAAC,EACD,mBAAoB7B,EAAqBkB,EAAM,mBAAqBW,GAAU,CAE5EN,EAAWM,CAAK,CAClB,CAAC,EACH,CAEJ,CACF",
|
|
6
|
+
"names": ["jsx", "composeEventHandlers", "getVariableValue", "isWeb", "styled", "getSize", "YStack", "React", "ARROW_KEYS", "PAGE_KEYS", "SLIDER_NAME", "useSliderContext", "DirectionalYStack", "SliderFrame", "val", "extras", "orientation", "size", "SliderImpl", "props", "forwardedRef", "__scopeSlider", "onSlideStart", "onSlideMove", "onSlideEnd", "onHomeKeyDown", "onEndKeyDown", "onStepKeyDown", "sliderProps", "context", "event", "target", "isStartingOnThumb"]
|
|
7
7
|
}
|
package/dist/esm/SliderImpl.mjs
CHANGED
|
@@ -1,104 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { composeEventHandlers, getVariableValue, isWeb, styled } from "@tamagui/core";
|
|
3
|
-
import { getSize } from "@tamagui/get-size";
|
|
4
|
-
import { YStack } from "@tamagui/stacks";
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
import { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from "./constants";
|
|
7
|
-
const DirectionalYStack = styled(YStack, {
|
|
8
|
-
variants: {
|
|
9
|
-
orientation: {
|
|
10
|
-
horizontal: {},
|
|
11
|
-
vertical: {}
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
});
|
|
15
|
-
const SliderFrame = styled(DirectionalYStack, {
|
|
16
|
-
position: "relative",
|
|
17
|
-
variants: {
|
|
18
|
-
size: (val, extras) => {
|
|
19
|
-
const orientation = extras.props.orientation;
|
|
20
|
-
const size = Math.round(getVariableValue(getSize(val)) / 6);
|
|
21
|
-
if (orientation === "horizontal") {
|
|
22
|
-
return {
|
|
23
|
-
height: size,
|
|
24
|
-
borderRadius: size,
|
|
25
|
-
justifyContent: "center"
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
return {
|
|
29
|
-
width: size,
|
|
30
|
-
borderRadius: size,
|
|
31
|
-
alignItems: "center"
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
const SliderImpl = React.forwardRef(
|
|
37
|
-
(props, forwardedRef) => {
|
|
38
|
-
const {
|
|
39
|
-
__scopeSlider,
|
|
40
|
-
onSlideStart,
|
|
41
|
-
onSlideMove,
|
|
42
|
-
onSlideEnd,
|
|
43
|
-
onHomeKeyDown,
|
|
44
|
-
onEndKeyDown,
|
|
45
|
-
onStepKeyDown,
|
|
46
|
-
...sliderProps
|
|
47
|
-
} = props;
|
|
48
|
-
const context = useSliderContext(SLIDER_NAME, __scopeSlider);
|
|
49
|
-
return /* @__PURE__ */ jsx(
|
|
50
|
-
SliderFrame,
|
|
51
|
-
{
|
|
52
|
-
size: "$4",
|
|
53
|
-
...sliderProps,
|
|
54
|
-
"data-orientation": sliderProps.orientation,
|
|
55
|
-
ref: forwardedRef,
|
|
56
|
-
...isWeb && {
|
|
57
|
-
onKeyDown: (event) => {
|
|
58
|
-
if (event.key === "Home") {
|
|
59
|
-
onHomeKeyDown(event);
|
|
60
|
-
event.preventDefault();
|
|
61
|
-
} else if (event.key === "End") {
|
|
62
|
-
onEndKeyDown(event);
|
|
63
|
-
event.preventDefault();
|
|
64
|
-
} else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
|
|
65
|
-
onStepKeyDown(event);
|
|
66
|
-
event.preventDefault();
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
onMoveShouldSetResponderCapture: () => true,
|
|
71
|
-
onScrollShouldSetResponder: () => true,
|
|
72
|
-
onScrollShouldSetResponderCapture: () => true,
|
|
73
|
-
onMoveShouldSetResponder: () => true,
|
|
74
|
-
onStartShouldSetResponder: () => true,
|
|
75
|
-
onResponderTerminationRequest: () => {
|
|
76
|
-
return false;
|
|
77
|
-
},
|
|
78
|
-
onResponderGrant: composeEventHandlers(props.onResponderGrant, (event) => {
|
|
79
|
-
const target = event.target;
|
|
80
|
-
const isStartingOnThumb = context.thumbs.has(target);
|
|
81
|
-
if (isWeb && target instanceof HTMLElement) {
|
|
82
|
-
if (context.thumbs.has(target)) {
|
|
83
|
-
target.focus();
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
onSlideStart(event, isStartingOnThumb ? "thumb" : "track");
|
|
87
|
-
}),
|
|
88
|
-
onResponderMove: composeEventHandlers(props.onResponderMove, (event) => {
|
|
89
|
-
event.stopPropagation();
|
|
90
|
-
onSlideMove(event);
|
|
91
|
-
}),
|
|
92
|
-
onResponderRelease: composeEventHandlers(props.onResponderRelease, (event) => {
|
|
93
|
-
onSlideEnd(event);
|
|
94
|
-
})
|
|
95
|
-
}
|
|
96
|
-
);
|
|
97
|
-
}
|
|
98
|
-
);
|
|
99
|
-
export {
|
|
100
|
-
DirectionalYStack,
|
|
101
|
-
SliderFrame,
|
|
102
|
-
SliderImpl
|
|
103
|
-
};
|
|
1
|
+
import{jsx as z}from"react/jsx-runtime";import{composeEventHandlers as s,getVariableValue as h,isWeb as l,styled as p}from"@tamagui/core";import{getSize as E}from"@tamagui/get-size";import{YStack as b}from"@tamagui/stacks";import*as w from"react";import{ARROW_KEYS as y,PAGE_KEYS as D,SLIDER_NAME as M,useSliderContext as g}from"./constants";const P=p(b,{variants:{orientation:{horizontal:{},vertical:{}}}}),k=p(P,{position:"relative",variants:{size:(o,n)=>{const i=n.props.orientation,t=Math.round(h(E(o))/6);return i==="horizontal"?{height:t,borderRadius:t,justifyContent:"center"}:{width:t,borderRadius:t,alignItems:"center"}}}}),v=w.forwardRef((o,n)=>{const{__scopeSlider:i,onSlideStart:t,onSlideMove:S,onSlideEnd:u,onHomeKeyDown:c,onEndKeyDown:m,onStepKeyDown:f,...a}=o,d=g(M,i);return z(k,{size:"$4",...a,"data-orientation":a.orientation,ref:n,...l&&{onKeyDown:e=>{e.key==="Home"?(c(e),e.preventDefault()):e.key==="End"?(m(e),e.preventDefault()):D.concat(y).includes(e.key)&&(f(e),e.preventDefault())}},onMoveShouldSetResponderCapture:()=>!0,onScrollShouldSetResponder:()=>!0,onScrollShouldSetResponderCapture:()=>!0,onMoveShouldSetResponder:()=>!0,onStartShouldSetResponder:()=>!0,onResponderTerminationRequest:()=>!1,onResponderGrant:s(o.onResponderGrant,e=>{const r=e.target,R=d.thumbs.has(r);l&&r instanceof HTMLElement&&d.thumbs.has(r)&&r.focus(),t(e,R?"thumb":"track")}),onResponderMove:s(o.onResponderMove,e=>{e.stopPropagation(),S(e)}),onResponderRelease:s(o.onResponderRelease,e=>{u(e)})})});export{P as DirectionalYStack,k as SliderFrame,v as SliderImpl};
|
|
104
2
|
//# sourceMappingURL=SliderImpl.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SliderImpl.tsx"],
|
|
4
4
|
"sourcesContent": ["/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\nimport { composeEventHandlers, getVariableValue, isWeb, styled } from '@tamagui/core'\nimport { getSize } from '@tamagui/get-size'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from './constants'\nimport { ScopedProps, SliderImplProps } from './types'\n\nexport const DirectionalYStack = styled(YStack, {\n variants: {\n orientation: {\n horizontal: {},\n vertical: {},\n },\n } as const,\n})\n\nexport const SliderFrame = styled(DirectionalYStack, {\n position: 'relative',\n\n variants: {\n size: (val, extras) => {\n const orientation = extras.props.orientation\n const size = Math.round(getVariableValue(getSize(val)) / 6)\n if (orientation === 'horizontal') {\n return {\n height: size,\n borderRadius: size,\n justifyContent: 'center',\n }\n }\n return {\n width: size,\n borderRadius: size,\n alignItems: 'center',\n }\n },\n } as const,\n})\n\nexport const SliderImpl = React.forwardRef<View, SliderImplProps>(\n (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n const {\n __scopeSlider,\n onSlideStart,\n onSlideMove,\n onSlideEnd,\n onHomeKeyDown,\n onEndKeyDown,\n onStepKeyDown,\n ...sliderProps\n } = props\n const context = useSliderContext(SLIDER_NAME, __scopeSlider)\n return (\n <SliderFrame\n size=\"$4\"\n {...sliderProps}\n data-orientation={sliderProps.orientation}\n ref={forwardedRef}\n {...(isWeb && {\n onKeyDown: (event) => {\n if (event.key === 'Home') {\n onHomeKeyDown(event)\n // Prevent scrolling to page start\n event.preventDefault()\n } else if (event.key === 'End') {\n onEndKeyDown(event)\n // Prevent scrolling to page end\n event.preventDefault()\n } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n onStepKeyDown(event)\n // Prevent scrolling for directional key presses\n event.preventDefault()\n }\n },\n })}\n onMoveShouldSetResponderCapture={() => true}\n onScrollShouldSetResponder={() => true}\n onScrollShouldSetResponderCapture={() => true}\n onMoveShouldSetResponder={() => true}\n onStartShouldSetResponder={() => true}\n // onStartShouldSetResponderCapture={() => true}\n onResponderTerminationRequest={() => {\n return false\n }}\n onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {\n const target = event.target as unknown as HTMLElement | number\n const isStartingOnThumb = context.thumbs.has(target)\n // // Prevent browser focus behaviour because we focus a thumb manually when values change.\n // Touch devices have a delay before focusing so won't focus if touch immediately moves\n // away from target (sliding). We want thumb to focus regardless.\n if (isWeb && target instanceof HTMLElement) {\n if (context.thumbs.has(target)) {\n target.focus()\n }\n }\n onSlideStart(event, isStartingOnThumb ? 'thumb' : 'track')\n })}\n onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {\n event.stopPropagation()\n // const target = event.target as HTMLElement\n onSlideMove(event)\n })}\n onResponderRelease={composeEventHandlers(props.onResponderRelease, (event) => {\n // const target = event.target as HTMLElement\n onSlideEnd(event)\n })}\n />\n )\n }\n)\n"],
|
|
5
|
-
"mappings": "AA2DM
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AA2DM,cAAAA,MAAA,oBAvDN,OAAS,wBAAAC,EAAsB,oBAAAC,EAAkB,SAAAC,EAAO,UAAAC,MAAc,gBACtE,OAAS,WAAAC,MAAe,oBACxB,OAAS,UAAAC,MAAc,kBACvB,UAAYC,MAAW,QAGvB,OAAS,cAAAC,EAAY,aAAAC,EAAW,eAAAC,EAAa,oBAAAC,MAAwB,cAG9D,MAAMC,EAAoBR,EAAOE,EAAQ,CAC9C,SAAU,CACR,YAAa,CACX,WAAY,CAAC,EACb,SAAU,CAAC,CACb,CACF,CACF,CAAC,EAEYO,EAAcT,EAAOQ,EAAmB,CACnD,SAAU,WAEV,SAAU,CACR,KAAM,CAACE,EAAKC,IAAW,CACrB,MAAMC,EAAcD,EAAO,MAAM,YAC3BE,EAAO,KAAK,MAAMf,EAAiBG,EAAQS,CAAG,CAAC,EAAI,CAAC,EAC1D,OAAIE,IAAgB,aACX,CACL,OAAQC,EACR,aAAcA,EACd,eAAgB,QAClB,EAEK,CACL,MAAOA,EACP,aAAcA,EACd,WAAY,QACd,CACF,CACF,CACF,CAAC,EAEYC,EAAaX,EAAM,WAC9B,CAACY,EAAqCC,IAAiB,CACrD,KAAM,CACJ,cAAAC,EACA,aAAAC,EACA,YAAAC,EACA,WAAAC,EACA,cAAAC,EACA,aAAAC,EACA,cAAAC,EACA,GAAGC,CACL,EAAIT,EACEU,EAAUlB,EAAiBD,EAAaW,CAAa,EAC3D,OACErB,EAACa,EAAA,CACC,KAAK,KACJ,GAAGe,EACJ,mBAAkBA,EAAY,YAC9B,IAAKR,EACJ,GAAIjB,GAAS,CACZ,UAAY2B,GAAU,CAChBA,EAAM,MAAQ,QAChBL,EAAcK,CAAK,EAEnBA,EAAM,eAAe,GACZA,EAAM,MAAQ,OACvBJ,EAAaI,CAAK,EAElBA,EAAM,eAAe,GACZrB,EAAU,OAAOD,CAAU,EAAE,SAASsB,EAAM,GAAG,IACxDH,EAAcG,CAAK,EAEnBA,EAAM,eAAe,EAEzB,CACF,EACA,gCAAiC,IAAM,GACvC,2BAA4B,IAAM,GAClC,kCAAmC,IAAM,GACzC,yBAA0B,IAAM,GAChC,0BAA2B,IAAM,GAEjC,8BAA+B,IACtB,GAET,iBAAkB7B,EAAqBkB,EAAM,iBAAmBW,GAAU,CACxE,MAAMC,EAASD,EAAM,OACfE,EAAoBH,EAAQ,OAAO,IAAIE,CAAM,EAI/C5B,GAAS4B,aAAkB,aACzBF,EAAQ,OAAO,IAAIE,CAAM,GAC3BA,EAAO,MAAM,EAGjBT,EAAaQ,EAAOE,EAAoB,QAAU,OAAO,CAC3D,CAAC,EACD,gBAAiB/B,EAAqBkB,EAAM,gBAAkBW,GAAU,CACtEA,EAAM,gBAAgB,EAEtBP,EAAYO,CAAK,CACnB,CAAC,EACD,mBAAoB7B,EAAqBkB,EAAM,mBAAqBW,GAAU,CAE5EN,EAAWM,CAAK,CAClB,CAAC,EACH,CAEJ,CACF",
|
|
6
|
+
"names": ["jsx", "composeEventHandlers", "getVariableValue", "isWeb", "styled", "getSize", "YStack", "React", "ARROW_KEYS", "PAGE_KEYS", "SLIDER_NAME", "useSliderContext", "DirectionalYStack", "SliderFrame", "val", "extras", "orientation", "size", "SliderImpl", "props", "forwardedRef", "__scopeSlider", "onSlideStart", "onSlideMove", "onSlideEnd", "onHomeKeyDown", "onEndKeyDown", "onStepKeyDown", "sliderProps", "context", "event", "target", "isStartingOnThumb"]
|
|
7
7
|
}
|
package/dist/esm/constants.js
CHANGED
|
@@ -1,30 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
const SLIDER_NAME = "Slider";
|
|
3
|
-
const [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME);
|
|
4
|
-
const [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME);
|
|
5
|
-
const [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext(SLIDER_NAME, {
|
|
6
|
-
startEdge: "left",
|
|
7
|
-
endEdge: "right",
|
|
8
|
-
sizeProp: "width",
|
|
9
|
-
size: 0,
|
|
10
|
-
direction: 1
|
|
11
|
-
});
|
|
12
|
-
const PAGE_KEYS = ["PageUp", "PageDown"];
|
|
13
|
-
const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
|
|
14
|
-
const BACK_KEYS = {
|
|
15
|
-
ltr: ["ArrowDown", "Home", "ArrowLeft", "PageDown"],
|
|
16
|
-
rtl: ["ArrowDown", "Home", "ArrowRight", "PageDown"]
|
|
17
|
-
};
|
|
18
|
-
export {
|
|
19
|
-
ARROW_KEYS,
|
|
20
|
-
BACK_KEYS,
|
|
21
|
-
PAGE_KEYS,
|
|
22
|
-
SLIDER_NAME,
|
|
23
|
-
SliderOrientationProvider,
|
|
24
|
-
SliderProvider,
|
|
25
|
-
createSliderContext,
|
|
26
|
-
createSliderScope,
|
|
27
|
-
useSliderContext,
|
|
28
|
-
useSliderOrientationContext
|
|
29
|
-
};
|
|
1
|
+
import{createContextScope as t}from"@tamagui/create-context";const e="Slider",[r,p]=t(e),[S,l]=r(e),[w,g]=r(e,{startEdge:"left",endEdge:"right",sizeProp:"width",size:0,direction:1}),a=["PageUp","PageDown"],x=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"],A={ltr:["ArrowDown","Home","ArrowLeft","PageDown"],rtl:["ArrowDown","Home","ArrowRight","PageDown"]};export{x as ARROW_KEYS,A as BACK_KEYS,a as PAGE_KEYS,e as SLIDER_NAME,w as SliderOrientationProvider,S as SliderProvider,r as createSliderContext,p as createSliderScope,l as useSliderContext,g as useSliderOrientationContext};
|
|
30
2
|
//# sourceMappingURL=constants.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/constants.tsx"],
|
|
4
4
|
"sourcesContent": ["import { SizeTokens } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\n\nimport { Direction, SliderContextValue } from './types'\n\nexport const SLIDER_NAME = 'Slider'\n\nexport const [createSliderContext, createSliderScope] =\n createContextScope(SLIDER_NAME)\n\nexport const [SliderProvider, useSliderContext] =\n createSliderContext<SliderContextValue>(SLIDER_NAME)\n\nexport const [SliderOrientationProvider, useSliderOrientationContext] =\n createSliderContext<{\n startEdge: 'bottom' | 'left' | 'right'\n endEdge: 'top' | 'right' | 'left'\n sizeProp: 'width' | 'height'\n size: number | SizeTokens\n direction: number\n }>(SLIDER_NAME, {\n startEdge: 'left',\n endEdge: 'right',\n sizeProp: 'width',\n size: 0,\n direction: 1,\n })\n\nexport const PAGE_KEYS = ['PageUp', 'PageDown']\nexport const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\nexport const BACK_KEYS: Record<Direction, string[]> = {\n ltr: ['ArrowDown', 'Home', 'ArrowLeft', 'PageDown'],\n rtl: ['ArrowDown', 'Home', 'ArrowRight', 'PageDown'],\n}\n"],
|
|
5
|
-
"mappings": "AACA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AACA,OAAS,sBAAAA,MAA0B,0BAI5B,MAAMC,EAAc,SAEd,CAACC,EAAqBC,CAAiB,EAClDH,EAAmBC,CAAW,EAEnB,CAACG,EAAgBC,CAAgB,EAC5CH,EAAwCD,CAAW,EAExC,CAACK,EAA2BC,CAA2B,EAClEL,EAMGD,EAAa,CACd,UAAW,OACX,QAAS,QACT,SAAU,QACV,KAAM,EACN,UAAW,CACb,CAAC,EAEUO,EAAY,CAAC,SAAU,UAAU,EACjCC,EAAa,CAAC,UAAW,YAAa,YAAa,YAAY,EAC/DC,EAAyC,CACpD,IAAK,CAAC,YAAa,OAAQ,YAAa,UAAU,EAClD,IAAK,CAAC,YAAa,OAAQ,aAAc,UAAU,CACrD",
|
|
6
|
+
"names": ["createContextScope", "SLIDER_NAME", "createSliderContext", "createSliderScope", "SliderProvider", "useSliderContext", "SliderOrientationProvider", "useSliderOrientationContext", "PAGE_KEYS", "ARROW_KEYS", "BACK_KEYS"]
|
|
7
7
|
}
|
package/dist/esm/constants.mjs
CHANGED
|
@@ -1,30 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
const SLIDER_NAME = "Slider";
|
|
3
|
-
const [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME);
|
|
4
|
-
const [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME);
|
|
5
|
-
const [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext(SLIDER_NAME, {
|
|
6
|
-
startEdge: "left",
|
|
7
|
-
endEdge: "right",
|
|
8
|
-
sizeProp: "width",
|
|
9
|
-
size: 0,
|
|
10
|
-
direction: 1
|
|
11
|
-
});
|
|
12
|
-
const PAGE_KEYS = ["PageUp", "PageDown"];
|
|
13
|
-
const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
|
|
14
|
-
const BACK_KEYS = {
|
|
15
|
-
ltr: ["ArrowDown", "Home", "ArrowLeft", "PageDown"],
|
|
16
|
-
rtl: ["ArrowDown", "Home", "ArrowRight", "PageDown"]
|
|
17
|
-
};
|
|
18
|
-
export {
|
|
19
|
-
ARROW_KEYS,
|
|
20
|
-
BACK_KEYS,
|
|
21
|
-
PAGE_KEYS,
|
|
22
|
-
SLIDER_NAME,
|
|
23
|
-
SliderOrientationProvider,
|
|
24
|
-
SliderProvider,
|
|
25
|
-
createSliderContext,
|
|
26
|
-
createSliderScope,
|
|
27
|
-
useSliderContext,
|
|
28
|
-
useSliderOrientationContext
|
|
29
|
-
};
|
|
1
|
+
import{createContextScope as t}from"@tamagui/create-context";const e="Slider",[r,p]=t(e),[S,l]=r(e),[w,g]=r(e,{startEdge:"left",endEdge:"right",sizeProp:"width",size:0,direction:1}),a=["PageUp","PageDown"],x=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"],A={ltr:["ArrowDown","Home","ArrowLeft","PageDown"],rtl:["ArrowDown","Home","ArrowRight","PageDown"]};export{x as ARROW_KEYS,A as BACK_KEYS,a as PAGE_KEYS,e as SLIDER_NAME,w as SliderOrientationProvider,S as SliderProvider,r as createSliderContext,p as createSliderScope,l as useSliderContext,g as useSliderOrientationContext};
|
|
30
2
|
//# sourceMappingURL=constants.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/constants.tsx"],
|
|
4
4
|
"sourcesContent": ["import { SizeTokens } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\n\nimport { Direction, SliderContextValue } from './types'\n\nexport const SLIDER_NAME = 'Slider'\n\nexport const [createSliderContext, createSliderScope] =\n createContextScope(SLIDER_NAME)\n\nexport const [SliderProvider, useSliderContext] =\n createSliderContext<SliderContextValue>(SLIDER_NAME)\n\nexport const [SliderOrientationProvider, useSliderOrientationContext] =\n createSliderContext<{\n startEdge: 'bottom' | 'left' | 'right'\n endEdge: 'top' | 'right' | 'left'\n sizeProp: 'width' | 'height'\n size: number | SizeTokens\n direction: number\n }>(SLIDER_NAME, {\n startEdge: 'left',\n endEdge: 'right',\n sizeProp: 'width',\n size: 0,\n direction: 1,\n })\n\nexport const PAGE_KEYS = ['PageUp', 'PageDown']\nexport const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\nexport const BACK_KEYS: Record<Direction, string[]> = {\n ltr: ['ArrowDown', 'Home', 'ArrowLeft', 'PageDown'],\n rtl: ['ArrowDown', 'Home', 'ArrowRight', 'PageDown'],\n}\n"],
|
|
5
|
-
"mappings": "AACA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AACA,OAAS,sBAAAA,MAA0B,0BAI5B,MAAMC,EAAc,SAEd,CAACC,EAAqBC,CAAiB,EAClDH,EAAmBC,CAAW,EAEnB,CAACG,EAAgBC,CAAgB,EAC5CH,EAAwCD,CAAW,EAExC,CAACK,EAA2BC,CAA2B,EAClEL,EAMGD,EAAa,CACd,UAAW,OACX,QAAS,QACT,SAAU,QACV,KAAM,EACN,UAAW,CACb,CAAC,EAEUO,EAAY,CAAC,SAAU,UAAU,EACjCC,EAAa,CAAC,UAAW,YAAa,YAAa,YAAY,EAC/DC,EAAyC,CACpD,IAAK,CAAC,YAAa,OAAQ,YAAa,UAAU,EAClD,IAAK,CAAC,YAAa,OAAQ,aAAc,UAAU,CACrD",
|
|
6
|
+
"names": ["createContextScope", "SLIDER_NAME", "createSliderContext", "createSliderScope", "SliderProvider", "useSliderContext", "SliderOrientationProvider", "useSliderOrientationContext", "PAGE_KEYS", "ARROW_KEYS", "BACK_KEYS"]
|
|
7
7
|
}
|
package/dist/esm/helpers.js
CHANGED
|
@@ -1,70 +1,2 @@
|
|
|
1
|
-
function
|
|
2
|
-
const nextValues = [...prevValues];
|
|
3
|
-
nextValues[atIndex] = nextValue;
|
|
4
|
-
return nextValues.sort((a, b) => a - b);
|
|
5
|
-
}
|
|
6
|
-
function convertValueToPercentage(value, min, max) {
|
|
7
|
-
const maxSteps = max - min;
|
|
8
|
-
const percentPerStep = 100 / maxSteps;
|
|
9
|
-
return percentPerStep * (value - min);
|
|
10
|
-
}
|
|
11
|
-
function getLabel(index, totalValues) {
|
|
12
|
-
if (totalValues > 2) {
|
|
13
|
-
return `Value ${index + 1} of ${totalValues}`;
|
|
14
|
-
} else if (totalValues === 2) {
|
|
15
|
-
return ["Minimum", "Maximum"][index];
|
|
16
|
-
} else {
|
|
17
|
-
return void 0;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
function getClosestValueIndex(values, nextValue) {
|
|
21
|
-
if (values.length === 1)
|
|
22
|
-
return 0;
|
|
23
|
-
const distances = values.map((value) => Math.abs(value - nextValue));
|
|
24
|
-
const closestDistance = Math.min(...distances);
|
|
25
|
-
return distances.indexOf(closestDistance);
|
|
26
|
-
}
|
|
27
|
-
function getThumbInBoundsOffset(width, left, direction) {
|
|
28
|
-
const halfWidth = width / 2;
|
|
29
|
-
const halfPercent = 50;
|
|
30
|
-
const offset = linearScale([0, halfPercent], [0, halfWidth]);
|
|
31
|
-
return (halfWidth - offset(left) * direction) * direction;
|
|
32
|
-
}
|
|
33
|
-
function getStepsBetweenValues(values) {
|
|
34
|
-
return values.slice(0, -1).map((value, index) => values[index + 1] - value);
|
|
35
|
-
}
|
|
36
|
-
function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
|
|
37
|
-
if (minStepsBetweenValues > 0) {
|
|
38
|
-
const stepsBetweenValues = getStepsBetweenValues(values);
|
|
39
|
-
const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
|
|
40
|
-
return actualMinStepsBetweenValues >= minStepsBetweenValues;
|
|
41
|
-
}
|
|
42
|
-
return true;
|
|
43
|
-
}
|
|
44
|
-
function linearScale(input, output) {
|
|
45
|
-
return (value) => {
|
|
46
|
-
if (input[0] === input[1] || output[0] === output[1])
|
|
47
|
-
return output[0];
|
|
48
|
-
const ratio = (output[1] - output[0]) / (input[1] - input[0]);
|
|
49
|
-
return output[0] + ratio * (value - input[0]);
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
function getDecimalCount(value) {
|
|
53
|
-
return (String(value).split(".")[1] || "").length;
|
|
54
|
-
}
|
|
55
|
-
function roundValue(value, decimalCount) {
|
|
56
|
-
const rounder = Math.pow(10, decimalCount);
|
|
57
|
-
return Math.round(value * rounder) / rounder;
|
|
58
|
-
}
|
|
59
|
-
export {
|
|
60
|
-
convertValueToPercentage,
|
|
61
|
-
getClosestValueIndex,
|
|
62
|
-
getDecimalCount,
|
|
63
|
-
getLabel,
|
|
64
|
-
getNextSortedValues,
|
|
65
|
-
getThumbInBoundsOffset,
|
|
66
|
-
hasMinStepsBetweenValues,
|
|
67
|
-
linearScale,
|
|
68
|
-
roundValue
|
|
69
|
-
};
|
|
1
|
+
function m(e=[],n,r){const t=[...e];return t[r]=n,t.sort((u,o)=>u-o)}function a(e,n,r){return 100/(r-n)*(e-n)}function b(e,n){return n>2?`Value ${e+1} of ${n}`:n===2?["Minimum","Maximum"][e]:void 0}function f(e,n){if(e.length===1)return 0;const r=e.map(u=>Math.abs(u-n)),t=Math.min(...r);return r.indexOf(t)}function i(e,n,r){const t=e/2,o=c([0,50],[0,t]);return(t-o(n)*r)*r}function s(e){return e.slice(0,-1).map((n,r)=>e[r+1]-n)}function l(e,n){if(n>0){const r=s(e);return Math.min(...r)>=n}return!0}function c(e,n){return r=>{if(e[0]===e[1]||n[0]===n[1])return n[0];const t=(n[1]-n[0])/(e[1]-e[0]);return n[0]+t*(r-e[0])}}function x(e){return(String(e).split(".")[1]||"").length}function p(e,n){const r=Math.pow(10,n);return Math.round(e*r)/r}export{a as convertValueToPercentage,f as getClosestValueIndex,x as getDecimalCount,b as getLabel,m as getNextSortedValues,i as getThumbInBoundsOffset,l as hasMinStepsBetweenValues,c as linearScale,p as roundValue};
|
|
70
2
|
//# sourceMappingURL=helpers.js.map
|
package/dist/esm/helpers.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/helpers.tsx"],
|
|
4
4
|
"sourcesContent": ["export function getNextSortedValues(\n prevValues: number[] = [],\n nextValue: number,\n atIndex: number,\n) {\n const nextValues = [...prevValues]\n nextValues[atIndex] = nextValue\n return nextValues.sort((a, b) => a - b)\n}\n\nexport function convertValueToPercentage(value: number, min: number, max: number) {\n const maxSteps = max - min\n const percentPerStep = 100 / maxSteps\n return percentPerStep * (value - min)\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nexport function getLabel(index: number, totalValues: number) {\n if (totalValues > 2) {\n return `Value ${index + 1} of ${totalValues}`\n } else if (totalValues === 2) {\n return ['Minimum', 'Maximum'][index]\n } else {\n return undefined\n }\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nexport function getClosestValueIndex(values: number[], nextValue: number) {\n if (values.length === 1) return 0\n const distances = values.map((value) => Math.abs(value - nextValue))\n const closestDistance = Math.min(...distances)\n return distances.indexOf(closestDistance)\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nexport function getThumbInBoundsOffset(\n width: number,\n left: number,\n direction: number,\n) {\n const halfWidth = width / 2\n const halfPercent = 50\n const offset = linearScale([0, halfPercent], [0, halfWidth])\n return (halfWidth - offset(left) * direction) * direction\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nfunction getStepsBetweenValues(values: number[]) {\n return values.slice(0, -1).map((value, index) => values[index + 1] - value)\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nexport function hasMinStepsBetweenValues(\n values: number[],\n minStepsBetweenValues: number,\n) {\n if (minStepsBetweenValues > 0) {\n const stepsBetweenValues = getStepsBetweenValues(values)\n const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)\n return actualMinStepsBetweenValues >= minStepsBetweenValues\n }\n return true\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nexport function linearScale(\n input: readonly [number, number],\n output: readonly [number, number],\n) {\n return (value: number) => {\n if (input[0] === input[1] || output[0] === output[1]) return output[0]\n const ratio = (output[1] - output[0]) / (input[1] - input[0])\n return output[0] + ratio * (value - input[0])\n }\n}\n\nexport function getDecimalCount(value: number) {\n return (String(value).split('.')[1] || '').length\n}\n\nexport function roundValue(value: number, decimalCount: number) {\n const rounder = Math.pow(10, decimalCount)\n return Math.round(value * rounder) / rounder\n}\n"],
|
|
5
|
-
"mappings": "AAAO,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAO,SAASA,EACdC,EAAuB,CAAC,EACxBC,EACAC,EACA,CACA,MAAMC,EAAa,CAAC,GAAGH,CAAU,EACjC,OAAAG,EAAWD,CAAO,EAAID,EACfE,EAAW,KAAK,CAACC,EAAGC,IAAMD,EAAIC,CAAC,CACxC,CAEO,SAASC,EAAyBC,EAAeC,EAAaC,EAAa,CAGhF,MADuB,MADNA,EAAMD,IAEED,EAAQC,EACnC,CAKO,SAASE,EAASC,EAAeC,EAAqB,CAC3D,OAAIA,EAAc,EACT,SAASD,EAAQ,QAAQC,IACvBA,IAAgB,EAClB,CAAC,UAAW,SAAS,EAAED,CAAK,EAEnC,MAEJ,CAUO,SAASE,EAAqBC,EAAkBb,EAAmB,CACxE,GAAIa,EAAO,SAAW,EAAG,MAAO,GAChC,MAAMC,EAAYD,EAAO,IAAKP,GAAU,KAAK,IAAIA,EAAQN,CAAS,CAAC,EAC7De,EAAkB,KAAK,IAAI,GAAGD,CAAS,EAC7C,OAAOA,EAAU,QAAQC,CAAe,CAC1C,CAMO,SAASC,EACdC,EACAC,EACAC,EACA,CACA,MAAMC,EAAYH,EAAQ,EAEpBI,EAASC,EAAY,CAAC,EADR,EACsB,EAAG,CAAC,EAAGF,CAAS,CAAC,EAC3D,OAAQA,EAAYC,EAAOH,CAAI,EAAIC,GAAaA,CAClD,CASA,SAASI,EAAsBV,EAAkB,CAC/C,OAAOA,EAAO,MAAM,EAAG,EAAE,EAAE,IAAI,CAACP,EAAOI,IAAUG,EAAOH,EAAQ,CAAC,EAAIJ,CAAK,CAC5E,CAcO,SAASkB,EACdX,EACAY,EACA,CACA,GAAIA,EAAwB,EAAG,CAC7B,MAAMC,EAAqBH,EAAsBV,CAAM,EAEvD,OADoC,KAAK,IAAI,GAAGa,CAAkB,GAC5BD,CACxC,CACA,MAAO,EACT,CAGO,SAASH,EACdK,EACAC,EACA,CACA,OAAQtB,GAAkB,CACxB,GAAIqB,EAAM,CAAC,IAAMA,EAAM,CAAC,GAAKC,EAAO,CAAC,IAAMA,EAAO,CAAC,EAAG,OAAOA,EAAO,CAAC,EACrE,MAAMC,GAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,IAAMD,EAAM,CAAC,EAAIA,EAAM,CAAC,GAC3D,OAAOC,EAAO,CAAC,EAAIC,GAASvB,EAAQqB,EAAM,CAAC,EAC7C,CACF,CAEO,SAASG,EAAgBxB,EAAe,CAC7C,OAAQ,OAAOA,CAAK,EAAE,MAAM,GAAG,EAAE,CAAC,GAAK,IAAI,MAC7C,CAEO,SAASyB,EAAWzB,EAAe0B,EAAsB,CAC9D,MAAMC,EAAU,KAAK,IAAI,GAAID,CAAY,EACzC,OAAO,KAAK,MAAM1B,EAAQ2B,CAAO,EAAIA,CACvC",
|
|
6
|
+
"names": ["getNextSortedValues", "prevValues", "nextValue", "atIndex", "nextValues", "a", "b", "convertValueToPercentage", "value", "min", "max", "getLabel", "index", "totalValues", "getClosestValueIndex", "values", "distances", "closestDistance", "getThumbInBoundsOffset", "width", "left", "direction", "halfWidth", "offset", "linearScale", "getStepsBetweenValues", "hasMinStepsBetweenValues", "minStepsBetweenValues", "stepsBetweenValues", "input", "output", "ratio", "getDecimalCount", "roundValue", "decimalCount", "rounder"]
|
|
7
7
|
}
|
package/dist/esm/helpers.mjs
CHANGED
|
@@ -1,70 +1,2 @@
|
|
|
1
|
-
function
|
|
2
|
-
const nextValues = [...prevValues];
|
|
3
|
-
nextValues[atIndex] = nextValue;
|
|
4
|
-
return nextValues.sort((a, b) => a - b);
|
|
5
|
-
}
|
|
6
|
-
function convertValueToPercentage(value, min, max) {
|
|
7
|
-
const maxSteps = max - min;
|
|
8
|
-
const percentPerStep = 100 / maxSteps;
|
|
9
|
-
return percentPerStep * (value - min);
|
|
10
|
-
}
|
|
11
|
-
function getLabel(index, totalValues) {
|
|
12
|
-
if (totalValues > 2) {
|
|
13
|
-
return `Value ${index + 1} of ${totalValues}`;
|
|
14
|
-
} else if (totalValues === 2) {
|
|
15
|
-
return ["Minimum", "Maximum"][index];
|
|
16
|
-
} else {
|
|
17
|
-
return void 0;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
function getClosestValueIndex(values, nextValue) {
|
|
21
|
-
if (values.length === 1)
|
|
22
|
-
return 0;
|
|
23
|
-
const distances = values.map((value) => Math.abs(value - nextValue));
|
|
24
|
-
const closestDistance = Math.min(...distances);
|
|
25
|
-
return distances.indexOf(closestDistance);
|
|
26
|
-
}
|
|
27
|
-
function getThumbInBoundsOffset(width, left, direction) {
|
|
28
|
-
const halfWidth = width / 2;
|
|
29
|
-
const halfPercent = 50;
|
|
30
|
-
const offset = linearScale([0, halfPercent], [0, halfWidth]);
|
|
31
|
-
return (halfWidth - offset(left) * direction) * direction;
|
|
32
|
-
}
|
|
33
|
-
function getStepsBetweenValues(values) {
|
|
34
|
-
return values.slice(0, -1).map((value, index) => values[index + 1] - value);
|
|
35
|
-
}
|
|
36
|
-
function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
|
|
37
|
-
if (minStepsBetweenValues > 0) {
|
|
38
|
-
const stepsBetweenValues = getStepsBetweenValues(values);
|
|
39
|
-
const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
|
|
40
|
-
return actualMinStepsBetweenValues >= minStepsBetweenValues;
|
|
41
|
-
}
|
|
42
|
-
return true;
|
|
43
|
-
}
|
|
44
|
-
function linearScale(input, output) {
|
|
45
|
-
return (value) => {
|
|
46
|
-
if (input[0] === input[1] || output[0] === output[1])
|
|
47
|
-
return output[0];
|
|
48
|
-
const ratio = (output[1] - output[0]) / (input[1] - input[0]);
|
|
49
|
-
return output[0] + ratio * (value - input[0]);
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
function getDecimalCount(value) {
|
|
53
|
-
return (String(value).split(".")[1] || "").length;
|
|
54
|
-
}
|
|
55
|
-
function roundValue(value, decimalCount) {
|
|
56
|
-
const rounder = Math.pow(10, decimalCount);
|
|
57
|
-
return Math.round(value * rounder) / rounder;
|
|
58
|
-
}
|
|
59
|
-
export {
|
|
60
|
-
convertValueToPercentage,
|
|
61
|
-
getClosestValueIndex,
|
|
62
|
-
getDecimalCount,
|
|
63
|
-
getLabel,
|
|
64
|
-
getNextSortedValues,
|
|
65
|
-
getThumbInBoundsOffset,
|
|
66
|
-
hasMinStepsBetweenValues,
|
|
67
|
-
linearScale,
|
|
68
|
-
roundValue
|
|
69
|
-
};
|
|
1
|
+
function m(e=[],n,r){const t=[...e];return t[r]=n,t.sort((u,o)=>u-o)}function a(e,n,r){return 100/(r-n)*(e-n)}function b(e,n){return n>2?`Value ${e+1} of ${n}`:n===2?["Minimum","Maximum"][e]:void 0}function f(e,n){if(e.length===1)return 0;const r=e.map(u=>Math.abs(u-n)),t=Math.min(...r);return r.indexOf(t)}function i(e,n,r){const t=e/2,o=c([0,50],[0,t]);return(t-o(n)*r)*r}function s(e){return e.slice(0,-1).map((n,r)=>e[r+1]-n)}function l(e,n){if(n>0){const r=s(e);return Math.min(...r)>=n}return!0}function c(e,n){return r=>{if(e[0]===e[1]||n[0]===n[1])return n[0];const t=(n[1]-n[0])/(e[1]-e[0]);return n[0]+t*(r-e[0])}}function x(e){return(String(e).split(".")[1]||"").length}function p(e,n){const r=Math.pow(10,n);return Math.round(e*r)/r}export{a as convertValueToPercentage,f as getClosestValueIndex,x as getDecimalCount,b as getLabel,m as getNextSortedValues,i as getThumbInBoundsOffset,l as hasMinStepsBetweenValues,c as linearScale,p as roundValue};
|
|
70
2
|
//# sourceMappingURL=helpers.mjs.map
|
package/dist/esm/helpers.mjs.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/helpers.tsx"],
|
|
4
4
|
"sourcesContent": ["export function getNextSortedValues(\n prevValues: number[] = [],\n nextValue: number,\n atIndex: number,\n) {\n const nextValues = [...prevValues]\n nextValues[atIndex] = nextValue\n return nextValues.sort((a, b) => a - b)\n}\n\nexport function convertValueToPercentage(value: number, min: number, max: number) {\n const maxSteps = max - min\n const percentPerStep = 100 / maxSteps\n return percentPerStep * (value - min)\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nexport function getLabel(index: number, totalValues: number) {\n if (totalValues > 2) {\n return `Value ${index + 1} of ${totalValues}`\n } else if (totalValues === 2) {\n return ['Minimum', 'Maximum'][index]\n } else {\n return undefined\n }\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nexport function getClosestValueIndex(values: number[], nextValue: number) {\n if (values.length === 1) return 0\n const distances = values.map((value) => Math.abs(value - nextValue))\n const closestDistance = Math.min(...distances)\n return distances.indexOf(closestDistance)\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nexport function getThumbInBoundsOffset(\n width: number,\n left: number,\n direction: number,\n) {\n const halfWidth = width / 2\n const halfPercent = 50\n const offset = linearScale([0, halfPercent], [0, halfWidth])\n return (halfWidth - offset(left) * direction) * direction\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nfunction getStepsBetweenValues(values: number[]) {\n return values.slice(0, -1).map((value, index) => values[index + 1] - value)\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nexport function hasMinStepsBetweenValues(\n values: number[],\n minStepsBetweenValues: number,\n) {\n if (minStepsBetweenValues > 0) {\n const stepsBetweenValues = getStepsBetweenValues(values)\n const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)\n return actualMinStepsBetweenValues >= minStepsBetweenValues\n }\n return true\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nexport function linearScale(\n input: readonly [number, number],\n output: readonly [number, number],\n) {\n return (value: number) => {\n if (input[0] === input[1] || output[0] === output[1]) return output[0]\n const ratio = (output[1] - output[0]) / (input[1] - input[0])\n return output[0] + ratio * (value - input[0])\n }\n}\n\nexport function getDecimalCount(value: number) {\n return (String(value).split('.')[1] || '').length\n}\n\nexport function roundValue(value: number, decimalCount: number) {\n const rounder = Math.pow(10, decimalCount)\n return Math.round(value * rounder) / rounder\n}\n"],
|
|
5
|
-
"mappings": "AAAO,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAO,SAASA,EACdC,EAAuB,CAAC,EACxBC,EACAC,EACA,CACA,MAAMC,EAAa,CAAC,GAAGH,CAAU,EACjC,OAAAG,EAAWD,CAAO,EAAID,EACfE,EAAW,KAAK,CAACC,EAAGC,IAAMD,EAAIC,CAAC,CACxC,CAEO,SAASC,EAAyBC,EAAeC,EAAaC,EAAa,CAGhF,MADuB,MADNA,EAAMD,IAEED,EAAQC,EACnC,CAKO,SAASE,EAASC,EAAeC,EAAqB,CAC3D,OAAIA,EAAc,EACT,SAASD,EAAQ,QAAQC,IACvBA,IAAgB,EAClB,CAAC,UAAW,SAAS,EAAED,CAAK,EAEnC,MAEJ,CAUO,SAASE,EAAqBC,EAAkBb,EAAmB,CACxE,GAAIa,EAAO,SAAW,EAAG,MAAO,GAChC,MAAMC,EAAYD,EAAO,IAAKP,GAAU,KAAK,IAAIA,EAAQN,CAAS,CAAC,EAC7De,EAAkB,KAAK,IAAI,GAAGD,CAAS,EAC7C,OAAOA,EAAU,QAAQC,CAAe,CAC1C,CAMO,SAASC,EACdC,EACAC,EACAC,EACA,CACA,MAAMC,EAAYH,EAAQ,EAEpBI,EAASC,EAAY,CAAC,EADR,EACsB,EAAG,CAAC,EAAGF,CAAS,CAAC,EAC3D,OAAQA,EAAYC,EAAOH,CAAI,EAAIC,GAAaA,CAClD,CASA,SAASI,EAAsBV,EAAkB,CAC/C,OAAOA,EAAO,MAAM,EAAG,EAAE,EAAE,IAAI,CAACP,EAAOI,IAAUG,EAAOH,EAAQ,CAAC,EAAIJ,CAAK,CAC5E,CAcO,SAASkB,EACdX,EACAY,EACA,CACA,GAAIA,EAAwB,EAAG,CAC7B,MAAMC,EAAqBH,EAAsBV,CAAM,EAEvD,OADoC,KAAK,IAAI,GAAGa,CAAkB,GAC5BD,CACxC,CACA,MAAO,EACT,CAGO,SAASH,EACdK,EACAC,EACA,CACA,OAAQtB,GAAkB,CACxB,GAAIqB,EAAM,CAAC,IAAMA,EAAM,CAAC,GAAKC,EAAO,CAAC,IAAMA,EAAO,CAAC,EAAG,OAAOA,EAAO,CAAC,EACrE,MAAMC,GAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,IAAMD,EAAM,CAAC,EAAIA,EAAM,CAAC,GAC3D,OAAOC,EAAO,CAAC,EAAIC,GAASvB,EAAQqB,EAAM,CAAC,EAC7C,CACF,CAEO,SAASG,EAAgBxB,EAAe,CAC7C,OAAQ,OAAOA,CAAK,EAAE,MAAM,GAAG,EAAE,CAAC,GAAK,IAAI,MAC7C,CAEO,SAASyB,EAAWzB,EAAe0B,EAAsB,CAC9D,MAAMC,EAAU,KAAK,IAAI,GAAID,CAAY,EACzC,OAAO,KAAK,MAAM1B,EAAQ2B,CAAO,EAAIA,CACvC",
|
|
6
|
+
"names": ["getNextSortedValues", "prevValues", "nextValue", "atIndex", "nextValues", "a", "b", "convertValueToPercentage", "value", "min", "max", "getLabel", "index", "totalValues", "getClosestValueIndex", "values", "distances", "closestDistance", "getThumbInBoundsOffset", "width", "left", "direction", "halfWidth", "offset", "linearScale", "getStepsBetweenValues", "hasMinStepsBetweenValues", "minStepsBetweenValues", "stepsBetweenValues", "input", "output", "ratio", "getDecimalCount", "roundValue", "decimalCount", "rounder"]
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,2 @@
|
|
|
1
|
-
export
|
|
2
|
-
import { SliderFrame, DirectionalYStack } from "./SliderImpl";
|
|
3
|
-
export {
|
|
4
|
-
DirectionalYStack,
|
|
5
|
-
SliderFrame
|
|
6
|
-
};
|
|
1
|
+
export*from"./Slider";import{SliderFrame as i,DirectionalYStack as p}from"./SliderImpl";export{p as DirectionalYStack,i as SliderFrame};
|
|
7
2
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts"],
|
|
4
4
|
"sourcesContent": ["export * from './Slider'\n// for static extract to find, must export\nexport { SliderFrame, DirectionalYStack } from './SliderImpl'\nexport type {\n SliderProps,\n SliderHorizontalProps,\n SliderVerticalProps,\n SliderTrackProps,\n} from './types'\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,WAAc,WAEd,OAAS,eAAAA,EAAa,qBAAAC,MAAyB",
|
|
6
|
+
"names": ["SliderFrame", "DirectionalYStack"]
|
|
7
7
|
}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,7 +1,2 @@
|
|
|
1
|
-
export
|
|
2
|
-
import { SliderFrame, DirectionalYStack } from "./SliderImpl";
|
|
3
|
-
export {
|
|
4
|
-
DirectionalYStack,
|
|
5
|
-
SliderFrame
|
|
6
|
-
};
|
|
1
|
+
export*from"./Slider";import{SliderFrame as i,DirectionalYStack as p}from"./SliderImpl";export{p as DirectionalYStack,i as SliderFrame};
|
|
7
2
|
//# sourceMappingURL=index.mjs.map
|