@jamadd/react-native-template-ui 0.6.2 → 0.7.0
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/lib/module/components/slider/ThemedSlider.js +25 -15
- package/lib/module/components/slider/ThemedSlider.js.map +1 -1
- package/lib/module/components/slider/ThemedSliderStepIndicator.js +22 -0
- package/lib/module/components/slider/ThemedSliderStepIndicator.js.map +1 -0
- package/lib/module/utils/slider/const.js +7 -5
- package/lib/module/utils/slider/const.js.map +1 -1
- package/lib/typescript/src/components/slider/ThemedSlider.d.ts.map +1 -1
- package/lib/typescript/src/components/slider/ThemedSliderStepIndicator.d.ts +4 -0
- package/lib/typescript/src/components/slider/ThemedSliderStepIndicator.d.ts.map +1 -0
- package/lib/typescript/src/types/slider.d.ts +10 -4
- package/lib/typescript/src/types/slider.d.ts.map +1 -1
- package/lib/typescript/src/utils/slider/const.d.ts +3 -1
- package/lib/typescript/src/utils/slider/const.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,20 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
import { useMappingHelper } from '@shopify/flash-list';
|
|
3
4
|
import { useDeferredValue, useLayoutEffect, useState } from 'react';
|
|
4
5
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
|
5
6
|
import { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
6
7
|
import { scheduleOnRN } from 'react-native-worklets';
|
|
7
8
|
import { useViewRef } from "../../hooks/view.js";
|
|
8
|
-
import {
|
|
9
|
+
import { sliderStepIndicatorDefaultWidth, SliderThumbSize, SliderTrackSize, SliderValueDisplayMode } from "../../utils/slider/const.js";
|
|
9
10
|
import AnimatedThemedView from "../view/AnimatedThemedView.js";
|
|
10
11
|
import ThemedView from "../view/ThemedView.js";
|
|
11
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
13
|
const ThemedText = require('../text/ThemedText').default;
|
|
14
|
+
const ThemedSliderStepIndicator = require('./ThemedSliderStepIndicator').default;
|
|
13
15
|
const ThemedSlider = ({
|
|
14
16
|
range,
|
|
15
17
|
steps = 1,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
defaultValue,
|
|
19
|
+
stepIndicator,
|
|
20
|
+
stepIndicatorProps,
|
|
21
|
+
snapToStepAnimated = true,
|
|
22
|
+
valueDisplayMode = SliderValueDisplayMode.None,
|
|
18
23
|
onValueChange,
|
|
19
24
|
trackSize = SliderTrackSize.M,
|
|
20
25
|
trackActiveColor = 'themePri',
|
|
@@ -31,12 +36,15 @@ const ThemedSlider = ({
|
|
|
31
36
|
const processedRange = isNumRange ? range.sort() : range;
|
|
32
37
|
const totalSteps = isNumRange ? Math.abs(processedRange[1] - processedRange[0]) / steps : processedRange.length - 1;
|
|
33
38
|
const thumbSizeHalf = thumbSize / 2;
|
|
39
|
+
const {
|
|
40
|
+
getMappingKey
|
|
41
|
+
} = useMappingHelper();
|
|
34
42
|
const sliderViewRef = useViewRef();
|
|
35
43
|
const trackViewRef = useViewRef();
|
|
36
44
|
const [sliderWidth, setSliderWidth] = useState();
|
|
37
45
|
const [trackWidth, setTrackWidth] = useState();
|
|
38
46
|
const [stepWidth, setStepWidth] = useState();
|
|
39
|
-
const [selectedVal, setSelectedVal] = useState(
|
|
47
|
+
const [selectedVal, setSelectedVal] = useState(defaultValue);
|
|
40
48
|
const deferredSelectedValue = useDeferredValue(selectedVal);
|
|
41
49
|
const xSharedVal = useSharedValue(-(trackWidth ?? 0));
|
|
42
50
|
const trackAnimatedStyle = useAnimatedStyle(() => ({
|
|
@@ -60,20 +68,19 @@ const ThemedSlider = ({
|
|
|
60
68
|
const tempStepWidth = tempWidth / totalSteps;
|
|
61
69
|
setTrackWidth(tempWidth);
|
|
62
70
|
setStepWidth(tempStepWidth);
|
|
63
|
-
setSelectedVal(currentValue);
|
|
64
71
|
let index = 0;
|
|
65
72
|
if (isNumRange) {
|
|
66
73
|
const numRange = processedRange;
|
|
67
|
-
const numCurrentValue =
|
|
74
|
+
const numCurrentValue = selectedVal;
|
|
68
75
|
index = numCurrentValue ? (numCurrentValue - numRange[0]) / steps : 0;
|
|
69
76
|
} else {
|
|
70
77
|
const strRange = processedRange;
|
|
71
|
-
const strCurrentValue =
|
|
78
|
+
const strCurrentValue = selectedVal;
|
|
72
79
|
index = strCurrentValue ? strRange.indexOf(strCurrentValue) : 0;
|
|
73
80
|
}
|
|
74
81
|
xSharedVal.set(-(totalSteps - index) * tempStepWidth);
|
|
75
82
|
});
|
|
76
|
-
}, [
|
|
83
|
+
}, [thumbSize, isNumRange, processedRange, totalSteps]);
|
|
77
84
|
const wrapStyle = {
|
|
78
85
|
marginHorizontal: thumbSizeHalf
|
|
79
86
|
};
|
|
@@ -115,7 +122,7 @@ const ThemedSlider = ({
|
|
|
115
122
|
const touch = allTouches[0];
|
|
116
123
|
if (touch && sliderWidth && stepWidth) {
|
|
117
124
|
const nearestStep = Math.round(-(sliderWidth - (touch.x + thumbSize + thumbSizeHalf)) / stepWidth);
|
|
118
|
-
updateXSharedVal(nearestStep * stepWidth,
|
|
125
|
+
updateXSharedVal(nearestStep * stepWidth, snapToStepAnimated);
|
|
119
126
|
}
|
|
120
127
|
}), Gesture.Pan().onChange(({
|
|
121
128
|
changeX
|
|
@@ -124,10 +131,10 @@ const ThemedSlider = ({
|
|
|
124
131
|
}).onEnd(() => {
|
|
125
132
|
if (stepWidth) {
|
|
126
133
|
const nearestStep = Math.round(xSharedVal.get() / stepWidth);
|
|
127
|
-
updateXSharedVal(nearestStep * stepWidth,
|
|
134
|
+
updateXSharedVal(nearestStep * stepWidth, snapToStepAnimated);
|
|
128
135
|
}
|
|
129
136
|
}));
|
|
130
|
-
const
|
|
137
|
+
const valueDisplayComponent = valueDisplayMode !== SliderValueDisplayMode.None && /*#__PURE__*/_jsx(ThemedText, {
|
|
131
138
|
marginTop: 's',
|
|
132
139
|
...props,
|
|
133
140
|
children: deferredSelectedValue
|
|
@@ -135,7 +142,7 @@ const ThemedSlider = ({
|
|
|
135
142
|
return /*#__PURE__*/_jsxs(ThemedView, {
|
|
136
143
|
ref: sliderViewRef,
|
|
137
144
|
alignItems: 'center',
|
|
138
|
-
children: [
|
|
145
|
+
children: [valueDisplayMode === SliderValueDisplayMode.Top && valueDisplayComponent, /*#__PURE__*/_jsx(GestureDetector, {
|
|
139
146
|
gesture: gesture,
|
|
140
147
|
children: /*#__PURE__*/_jsxs(ThemedView, {
|
|
141
148
|
ref: trackViewRef,
|
|
@@ -144,7 +151,6 @@ const ThemedSlider = ({
|
|
|
144
151
|
alignSelf: 'stretch',
|
|
145
152
|
height: thumbSize,
|
|
146
153
|
style: wrapStyle,
|
|
147
|
-
backgroundColor: 'themeSec',
|
|
148
154
|
...wrapProps,
|
|
149
155
|
children: [/*#__PURE__*/_jsx(ThemedView, {
|
|
150
156
|
position: 'absolute',
|
|
@@ -159,7 +165,11 @@ const ThemedSlider = ({
|
|
|
159
165
|
style: trackAnimatedStyle,
|
|
160
166
|
...trackInactiveProps
|
|
161
167
|
})
|
|
162
|
-
}), /*#__PURE__*/_jsx(
|
|
168
|
+
}), !!stepIndicator && processedRange.map((value, index) => /*#__PURE__*/_jsx(ThemedSliderStepIndicator, {
|
|
169
|
+
left: index * (stepWidth ?? 0) + thumbSizeHalf - sliderStepIndicatorDefaultWidth / 2,
|
|
170
|
+
height: thumbSize,
|
|
171
|
+
...stepIndicatorProps
|
|
172
|
+
}, getMappingKey(value, index))), /*#__PURE__*/_jsx(AnimatedThemedView, {
|
|
163
173
|
position: 'absolute',
|
|
164
174
|
right: -thumbSizeHalf,
|
|
165
175
|
width: thumbSize,
|
|
@@ -170,7 +180,7 @@ const ThemedSlider = ({
|
|
|
170
180
|
...thumbProps
|
|
171
181
|
})]
|
|
172
182
|
})
|
|
173
|
-
}),
|
|
183
|
+
}), valueDisplayMode === SliderValueDisplayMode.Bottom && valueDisplayComponent]
|
|
174
184
|
});
|
|
175
185
|
};
|
|
176
186
|
export default ThemedSlider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useDeferredValue","useLayoutEffect","useState","Gesture","GestureDetector","useAnimatedStyle","useSharedValue","withTiming","scheduleOnRN","useViewRef","
|
|
1
|
+
{"version":3,"names":["useMappingHelper","useDeferredValue","useLayoutEffect","useState","Gesture","GestureDetector","useAnimatedStyle","useSharedValue","withTiming","scheduleOnRN","useViewRef","sliderStepIndicatorDefaultWidth","SliderThumbSize","SliderTrackSize","SliderValueDisplayMode","AnimatedThemedView","ThemedView","jsx","_jsx","jsxs","_jsxs","ThemedText","require","default","ThemedSliderStepIndicator","ThemedSlider","range","steps","defaultValue","stepIndicator","stepIndicatorProps","snapToStepAnimated","valueDisplayMode","None","onValueChange","trackSize","M","trackActiveColor","trackActiveProps","trackInactiveColor","trackInactiveProps","thumbSize","thumbColor","thumbProps","wrapProps","props","isNumRange","processedRange","sort","totalSteps","Math","abs","length","thumbSizeHalf","getMappingKey","sliderViewRef","trackViewRef","sliderWidth","setSliderWidth","trackWidth","setTrackWidth","stepWidth","setStepWidth","selectedVal","setSelectedVal","deferredSelectedValue","xSharedVal","trackAnimatedStyle","transform","translateX","get","thumbAnimatedStyle","current","measure","_x","_y","w","tempWidth","tempStepWidth","index","numRange","numCurrentValue","strRange","strCurrentValue","indexOf","set","wrapStyle","marginHorizontal","updateSelectedVal","x","numIndex","round","tempSelectedVal","strIndex","updateXSharedVal","animated","tempX","min","max","gesture","Simultaneous","Tap","onTouchesDown","allTouches","touch","onTouchesUp","nearestStep","Pan","onChange","changeX","onEnd","valueDisplayComponent","marginTop","children","ref","alignItems","Top","justifyContent","alignSelf","height","style","position","width","overflow","backgroundColor","map","value","left","right","aspectRatio","opacity","Bottom"],"sourceRoot":"../../../../src","sources":["components/slider/ThemedSlider.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/** @internal */
|
|
4
|
+
|
|
5
|
+
import { sliderStepIndicatorDefaultWidth } from "../../utils/slider/const.js";
|
|
6
|
+
import ThemedView from "../view/ThemedView.js";
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
const ThemedSliderStepIndicator = ({
|
|
9
|
+
width = sliderStepIndicatorDefaultWidth,
|
|
10
|
+
height,
|
|
11
|
+
...props
|
|
12
|
+
}) => {
|
|
13
|
+
return /*#__PURE__*/_jsx(ThemedView, {
|
|
14
|
+
position: 'absolute',
|
|
15
|
+
width: width,
|
|
16
|
+
height: height,
|
|
17
|
+
backgroundColor: 'themePri',
|
|
18
|
+
...props
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
export default ThemedSliderStepIndicator;
|
|
22
|
+
//# sourceMappingURL=ThemedSliderStepIndicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sliderStepIndicatorDefaultWidth","ThemedView","jsx","_jsx","ThemedSliderStepIndicator","width","height","props","position","backgroundColor"],"sourceRoot":"../../../../src","sources":["components/slider/ThemedSliderStepIndicator.tsx"],"mappings":";;AAAA;;AAGA,SAASA,+BAA+B,QAAQ,6BAA0B;AAC1E,OAAOC,UAAU,MAAM,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5C,MAAMC,yBAA6D,GAAGA,CAAC;EACrEC,KAAK,GAAGL,+BAA+B;EACvCM,MAAM;EACN,GAAGC;AACL,CAAC,KAAK;EACJ,oBACEJ,IAAA,CAACF,UAAU;IACTO,QAAQ,EAAE,UAAW;IACrBH,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfG,eAAe,EAAE,UAAW;IAAA,GACxBF;EAAK,CACV,CAAC;AAEN,CAAC;AAED,eAAeH,yBAAyB","ignoreList":[]}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
import { BorderSize } from "../theme/const.js";
|
|
4
|
+
export let SliderValueDisplayMode = /*#__PURE__*/function (SliderValueDisplayMode) {
|
|
5
|
+
SliderValueDisplayMode["None"] = "none";
|
|
6
|
+
SliderValueDisplayMode["Top"] = "top";
|
|
7
|
+
SliderValueDisplayMode["Bottom"] = "bottom";
|
|
8
|
+
return SliderValueDisplayMode;
|
|
8
9
|
}({});
|
|
9
10
|
export let SliderTrackSize = /*#__PURE__*/function (SliderTrackSize) {
|
|
10
11
|
SliderTrackSize[SliderTrackSize["S"] = 8] = "S";
|
|
@@ -18,4 +19,5 @@ export let SliderThumbSize = /*#__PURE__*/function (SliderThumbSize) {
|
|
|
18
19
|
SliderThumbSize[SliderThumbSize["L"] = 28] = "L";
|
|
19
20
|
return SliderThumbSize;
|
|
20
21
|
}({});
|
|
22
|
+
export const sliderStepIndicatorDefaultWidth = BorderSize.M;
|
|
21
23
|
//# sourceMappingURL=const.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["BorderSize","SliderValueDisplayMode","SliderTrackSize","SliderThumbSize","sliderStepIndicatorDefaultWidth","M"],"sourceRoot":"../../../../src","sources":["utils/slider/const.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,mBAAgB;AAE3C,WAAYC,sBAAsB,0BAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAA,OAAtBA,sBAAsB;AAAA;AAMlC,WAAYC,eAAe,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA;AAM3B,WAAYC,eAAe,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA;AAM3B,OAAO,MAAMC,+BAA+B,GAAGJ,UAAU,CAACK,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemedSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/slider/ThemedSlider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ThemedSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/slider/ThemedSlider.tsx"],"names":[],"mappings":"AACA,OAAO,EAA+C,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAS7E,OAAO,KAAK,EAGV,iBAAiB,EAElB,MAAM,oBAAoB,CAAC;AAgB5B,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAmMvC,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemedSliderStepIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/slider/ThemedSliderStepIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,oBAAoB,CAAC;AAIzE,QAAA,MAAM,yBAAyB,EAAE,EAAE,CAAC,8BAA8B,CAcjE,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
|
|
@@ -1,19 +1,24 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { SliderThumbSize, SliderTrackSize, SliderValueDisplayMode } from '../utils/slider/const';
|
|
2
2
|
import type { CustomThemedTextProps } from './text';
|
|
3
3
|
import type { ThemeColors } from './theme';
|
|
4
4
|
import type { AnimatedThemedViewProps, ThemedViewProps } from './view';
|
|
5
5
|
export type NumberSlider = {
|
|
6
6
|
range: [number, number];
|
|
7
7
|
steps: number;
|
|
8
|
-
|
|
8
|
+
defaultValue?: number;
|
|
9
|
+
stepIndicator?: never;
|
|
10
|
+
stepIndicatorProps?: never;
|
|
9
11
|
};
|
|
10
12
|
export type StringSlider = {
|
|
11
13
|
range: string[];
|
|
12
14
|
steps?: never;
|
|
13
|
-
|
|
15
|
+
defaultValue?: string;
|
|
16
|
+
stepIndicator?: boolean;
|
|
17
|
+
stepIndicatorProps?: ThemedSliderStepIndicatorProps;
|
|
14
18
|
};
|
|
15
19
|
export type ThemedSliderProps = (NumberSlider | StringSlider) & Omit<CustomThemedTextProps, 'text'> & {
|
|
16
|
-
|
|
20
|
+
snapToStepAnimated?: boolean;
|
|
21
|
+
valueDisplayMode?: SliderValueDisplayMode;
|
|
17
22
|
onValueChange: (value: number | string) => void;
|
|
18
23
|
trackSize?: SliderTrackSize | number;
|
|
19
24
|
trackActiveColor?: ThemeColors;
|
|
@@ -25,4 +30,5 @@ export type ThemedSliderProps = (NumberSlider | StringSlider) & Omit<CustomTheme
|
|
|
25
30
|
thumbProps?: AnimatedThemedViewProps;
|
|
26
31
|
wrapProps?: ThemedViewProps;
|
|
27
32
|
};
|
|
33
|
+
export type ThemedSliderStepIndicatorProps = ThemedViewProps;
|
|
28
34
|
//# sourceMappingURL=slider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../src/types/slider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,
|
|
1
|
+
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../src/types/slider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EACf,sBAAsB,EACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAEvE,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,8BAA8B,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,CAAC,YAAY,GAAG,YAAY,CAAC,GAC3D,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,GAAG;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,sBAAsB,CAAC;IAC1C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IACrC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,gBAAgB,CAAC,EAAE,eAAe,CAAC;IACnC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,kBAAkB,CAAC,EAAE,uBAAuB,CAAC;IAC7C,SAAS,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,UAAU,CAAC,EAAE,uBAAuB,CAAC;IACrC,SAAS,CAAC,EAAE,eAAe,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,8BAA8B,GAAG,eAAe,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
import { BorderSize } from '../theme/const';
|
|
2
|
+
export declare enum SliderValueDisplayMode {
|
|
2
3
|
None = "none",
|
|
3
4
|
Top = "top",
|
|
4
5
|
Bottom = "bottom"
|
|
@@ -13,4 +14,5 @@ export declare enum SliderThumbSize {
|
|
|
13
14
|
M = 24,
|
|
14
15
|
L = 28
|
|
15
16
|
}
|
|
17
|
+
export declare const sliderStepIndicatorDefaultWidth = BorderSize.M;
|
|
16
18
|
//# sourceMappingURL=const.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../../src/utils/slider/const.ts"],"names":[],"mappings":"AAAA,oBAAY,
|
|
1
|
+
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../../src/utils/slider/const.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,oBAAY,sBAAsB;IAChC,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,oBAAY,eAAe;IACzB,CAAC,IAAI;IACL,CAAC,KAAK;IACN,CAAC,KAAK;CACP;AAED,oBAAY,eAAe;IACzB,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;CACP;AAED,eAAO,MAAM,+BAA+B,eAAe,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jamadd/react-native-template-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "React Native Template UI is a collection of UI components designed by JaMa D&D.",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|