@tamagui/slider 1.0.1-beta.100
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 +456 -0
- package/dist/cjs/Slider.js.map +7 -0
- package/dist/cjs/SliderImpl.js +163 -0
- package/dist/cjs/SliderImpl.js.map +7 -0
- package/dist/cjs/constants.js +62 -0
- package/dist/cjs/constants.js.map +7 -0
- package/dist/cjs/helpers.js +101 -0
- package/dist/cjs/helpers.js.map +7 -0
- package/dist/cjs/index.js +32 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/types.js +16 -0
- package/dist/cjs/types.js.map +7 -0
- package/dist/esm/Slider.js +448 -0
- package/dist/esm/Slider.js.map +7 -0
- package/dist/esm/SliderImpl.js +137 -0
- package/dist/esm/SliderImpl.js.map +7 -0
- package/dist/esm/constants.js +30 -0
- package/dist/esm/constants.js.map +7 -0
- package/dist/esm/helpers.js +70 -0
- package/dist/esm/helpers.js.map +7 -0
- package/dist/esm/index.js +7 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/types.js +1 -0
- package/dist/esm/types.js.map +7 -0
- package/dist/jsx/Slider.js +324 -0
- package/dist/jsx/Slider.js.map +7 -0
- package/dist/jsx/SliderImpl.js +84 -0
- package/dist/jsx/SliderImpl.js.map +7 -0
- package/dist/jsx/constants.js +30 -0
- package/dist/jsx/constants.js.map +7 -0
- package/dist/jsx/helpers.js +70 -0
- package/dist/jsx/helpers.js.map +7 -0
- package/dist/jsx/index.js +7 -0
- package/dist/jsx/index.js.map +7 -0
- package/dist/jsx/types.js +1 -0
- package/dist/jsx/types.js.map +7 -0
- package/package.json +46 -0
- package/src/Slider.tsx +592 -0
- package/src/SliderImpl.tsx +118 -0
- package/src/constants.tsx +32 -0
- package/src/helpers.tsx +100 -0
- package/src/index.ts +9 -0
- package/src/types.ts +75 -0
- package/types/Slider.d.ts +357 -0
- package/types/Slider.d.ts.map +1 -0
- package/types/SliderImpl.d.ts +55 -0
- package/types/SliderImpl.d.ts.map +1 -0
- package/types/constants.d.ts +52 -0
- package/types/constants.d.ts.map +1 -0
- package/types/helpers.d.ts +10 -0
- package/types/helpers.d.ts.map +1 -0
- package/types/index.d.ts +4 -0
- package/types/index.d.ts.map +1 -0
- package/types/types.d.ts +68 -0
- package/types/types.d.ts.map +1 -0
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { createContextScope } from "@tamagui/create-context";
|
|
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
|
+
};
|
|
30
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/constants.tsx"],
|
|
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] = createContextScope(SLIDER_NAME)\n\nexport const [SliderProvider, useSliderContext] =\n createSliderContext<SliderContextValue>(SLIDER_NAME)\n\nexport const [SliderOrientationProvider, useSliderOrientationContext] = 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;AAIO,MAAM,cAAc;AAEpB,MAAM,CAAC,qBAAqB,qBAAqB,mBAAmB,WAAW;AAE/E,MAAM,CAAC,gBAAgB,oBAC5B,oBAAwC,WAAW;AAE9C,MAAM,CAAC,2BAA2B,+BAA+B,oBAMrE,aAAa;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,WAAW;AACb,CAAC;AAEM,MAAM,YAAY,CAAC,UAAU,UAAU;AACvC,MAAM,aAAa,CAAC,WAAW,aAAa,aAAa,YAAY;AACrE,MAAM,YAAyC;AAAA,EACpD,KAAK,CAAC,aAAa,QAAQ,aAAa,UAAU;AAAA,EAClD,KAAK,CAAC,aAAa,QAAQ,cAAc,UAAU;AACrD;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
function getNextSortedValues(prevValues = [], nextValue, atIndex) {
|
|
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
|
+
};
|
|
70
|
+
//# sourceMappingURL=helpers.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/helpers.tsx"],
|
|
4
|
+
"sourcesContent": ["export function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\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(width: number, left: number, direction: number) {\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(values: number[], minStepsBetweenValues: number) {\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(input: readonly [number, number], output: readonly [number, number]) {\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,6BAA6B,aAAuB,CAAC,GAAG,WAAmB,SAAiB;AACjG,QAAM,aAAa,CAAC,GAAG,UAAU;AACjC,aAAW,WAAW;AACtB,SAAO,WAAW,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACxC;AAEO,kCAAkC,OAAe,KAAa,KAAa;AAChF,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,MAAM;AAC7B,SAAO,iBAAkB,SAAQ;AACnC;AAKO,kBAAkB,OAAe,aAAqB;AAC3D,MAAI,cAAc,GAAG;AACnB,WAAO,SAAS,QAAQ,QAAQ;AAAA,EAClC,WAAW,gBAAgB,GAAG;AAC5B,WAAO,CAAC,WAAW,SAAS,EAAE;AAAA,EAChC,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAUO,8BAA8B,QAAkB,WAAmB;AACxE,MAAI,OAAO,WAAW;AAAG,WAAO;AAChC,QAAM,YAAY,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,QAAQ,SAAS,CAAC;AACnE,QAAM,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAC7C,SAAO,UAAU,QAAQ,eAAe;AAC1C;AAMO,gCAAgC,OAAe,MAAc,WAAmB;AACrF,QAAM,YAAY,QAAQ;AAC1B,QAAM,cAAc;AACpB,QAAM,SAAS,YAAY,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,SAAS,CAAC;AAC3D,SAAQ,aAAY,OAAO,IAAI,IAAI,aAAa;AAClD;AASA,+BAA+B,QAAkB;AAC/C,SAAO,OAAO,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,OAAO,QAAQ,KAAK,KAAK;AAC5E;AAcO,kCAAkC,QAAkB,uBAA+B;AACxF,MAAI,wBAAwB,GAAG;AAC7B,UAAM,qBAAqB,sBAAsB,MAAM;AACvD,UAAM,8BAA8B,KAAK,IAAI,GAAG,kBAAkB;AAClE,WAAO,+BAA+B;AAAA,EACxC;AACA,SAAO;AACT;AAGO,qBAAqB,OAAkC,QAAmC;AAC/F,SAAO,CAAC,UAAkB;AACxB,QAAI,MAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO;AAAI,aAAO,OAAO;AACpE,UAAM,QAAS,QAAO,KAAK,OAAO,MAAO,OAAM,KAAK,MAAM;AAC1D,WAAO,OAAO,KAAK,QAAS,SAAQ,MAAM;AAAA,EAC5C;AACF;AAEO,yBAAyB,OAAe;AAC7C,SAAQ,QAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,IAAI;AAC7C;AAEO,oBAAoB,OAAe,cAAsB;AAC9D,QAAM,UAAU,KAAK,IAAI,IAAI,YAAY;AACzC,SAAO,KAAK,MAAM,QAAQ,OAAO,IAAI;AACvC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/index.ts"],
|
|
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;AAEA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=types.js.map
|
package/package.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@tamagui/slider",
|
|
3
|
+
"version": "1.0.1-beta.100",
|
|
4
|
+
"sideEffects": [
|
|
5
|
+
"*.css"
|
|
6
|
+
],
|
|
7
|
+
"source": "src/index.ts",
|
|
8
|
+
"types": "./types/index.d.ts",
|
|
9
|
+
"main": "dist/cjs",
|
|
10
|
+
"module": "dist/esm",
|
|
11
|
+
"module:jsx": "dist/jsx",
|
|
12
|
+
"files": [
|
|
13
|
+
"src",
|
|
14
|
+
"types",
|
|
15
|
+
"dist"
|
|
16
|
+
],
|
|
17
|
+
"scripts": {
|
|
18
|
+
"build": "tamagui-build",
|
|
19
|
+
"watch": "tamagui-build --watch",
|
|
20
|
+
"clean": "tamagui-build clean",
|
|
21
|
+
"clean:build": "tamagui-build clean:build"
|
|
22
|
+
},
|
|
23
|
+
"dependencies": {
|
|
24
|
+
"@tamagui/compose-refs": "^1.0.1-beta.100",
|
|
25
|
+
"@tamagui/core": "^1.0.1-beta.100",
|
|
26
|
+
"@tamagui/create-context": "^1.0.1-beta.100",
|
|
27
|
+
"@tamagui/stacks": "^1.0.1-beta.100",
|
|
28
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.100",
|
|
29
|
+
"@tamagui/use-direction": "^1.0.1-beta.100"
|
|
30
|
+
},
|
|
31
|
+
"peerDependencies": {
|
|
32
|
+
"react": "*",
|
|
33
|
+
"react-dom": "*",
|
|
34
|
+
"react-native": "*"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@tamagui/build": "^1.0.1-beta.100",
|
|
38
|
+
"@types/react-native": "^0.67.3",
|
|
39
|
+
"react": "*",
|
|
40
|
+
"react-dom": "*",
|
|
41
|
+
"react-native": "*"
|
|
42
|
+
},
|
|
43
|
+
"publishConfig": {
|
|
44
|
+
"access": "public"
|
|
45
|
+
}
|
|
46
|
+
}
|