@tamagui/demos 2.0.0-1768263318220 → 2.0.0-1768326993354
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/ProgressDemo.cjs +12 -14
- package/dist/cjs/ProgressDemo.js +21 -13
- package/dist/cjs/ProgressDemo.js.map +1 -1
- package/dist/cjs/ProgressDemo.native.js +12 -16
- package/dist/cjs/ProgressDemo.native.js.map +1 -1
- package/dist/esm/ProgressDemo.js +21 -13
- package/dist/esm/ProgressDemo.js.map +1 -1
- package/dist/esm/ProgressDemo.mjs +12 -14
- package/dist/esm/ProgressDemo.mjs.map +1 -1
- package/dist/esm/ProgressDemo.native.js +12 -16
- package/dist/esm/ProgressDemo.native.js.map +1 -1
- package/package.json +34 -34
- package/src/ProgressDemo.tsx +18 -15
|
@@ -40,15 +40,9 @@ var import_react = __toESM(require("react"), 1),
|
|
|
40
40
|
import_jsx_runtime = require("react/jsx-runtime");
|
|
41
41
|
function ProgressDemo() {
|
|
42
42
|
const [key, setKey] = import_react.default.useState(0),
|
|
43
|
-
[
|
|
44
|
-
[
|
|
45
|
-
|
|
46
|
-
return import_react.default.useEffect(() => {
|
|
47
|
-
const timer = setTimeout(() => setProgress(60), 1e3);
|
|
48
|
-
return () => {
|
|
49
|
-
clearTimeout(timer);
|
|
50
|
-
};
|
|
51
|
-
}, []), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
43
|
+
[progress, setProgress] = import_react.default.useState(60),
|
|
44
|
+
[slider, setSlider] = import_react.default.useState([60]);
|
|
45
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
52
46
|
children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
|
|
53
47
|
height: 60,
|
|
54
48
|
items: "center",
|
|
@@ -56,12 +50,16 @@ function ProgressDemo() {
|
|
|
56
50
|
children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Paragraph, {
|
|
57
51
|
height: 30,
|
|
58
52
|
opacity: 0.5,
|
|
59
|
-
children: ["
|
|
53
|
+
children: ["Progress: ", progress]
|
|
60
54
|
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Progress, {
|
|
61
|
-
size: sizeProp,
|
|
62
55
|
value: progress,
|
|
63
56
|
bg: "$color5",
|
|
64
57
|
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Progress.Indicator, {
|
|
58
|
+
transition: ["quicker", {
|
|
59
|
+
transform: {
|
|
60
|
+
overshootClamping: !0
|
|
61
|
+
}
|
|
62
|
+
}],
|
|
65
63
|
bg: "$background"
|
|
66
64
|
})
|
|
67
65
|
}, key)]
|
|
@@ -77,12 +75,12 @@ function ProgressDemo() {
|
|
|
77
75
|
children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Slider, {
|
|
78
76
|
size: "$2",
|
|
79
77
|
width: 130,
|
|
80
|
-
|
|
78
|
+
value: slider,
|
|
81
79
|
min: 0,
|
|
82
80
|
max: 100,
|
|
83
81
|
step: 1,
|
|
84
82
|
onValueChange: ([val]) => {
|
|
85
|
-
setProgress(val);
|
|
83
|
+
setProgress(val), setSlider([val]);
|
|
86
84
|
},
|
|
87
85
|
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, {
|
|
88
86
|
borderWidth: 1,
|
|
@@ -100,7 +98,7 @@ function ProgressDemo() {
|
|
|
100
98
|
size: "$2",
|
|
101
99
|
icon: import_lucide_icons.RotateCcw,
|
|
102
100
|
onPress: () => {
|
|
103
|
-
setKey(Math.random()), setProgress(0);
|
|
101
|
+
setKey(Math.random()), setProgress(0), setSlider([0]);
|
|
104
102
|
}
|
|
105
103
|
})]
|
|
106
104
|
})]
|
package/dist/cjs/ProgressDemo.js
CHANGED
|
@@ -27,19 +27,27 @@ __export(ProgressDemo_exports, {
|
|
|
27
27
|
module.exports = __toCommonJS(ProgressDemo_exports);
|
|
28
28
|
var import_react = __toESM(require("react"), 1), import_tamagui = require("tamagui"), import_lucide_icons = require("@tamagui/lucide-icons"), import_jsx_runtime = require("react/jsx-runtime");
|
|
29
29
|
function ProgressDemo() {
|
|
30
|
-
const [key, setKey] = import_react.default.useState(0), [
|
|
31
|
-
return
|
|
32
|
-
const timer = setTimeout(() => setProgress(60), 1e3);
|
|
33
|
-
return () => {
|
|
34
|
-
clearTimeout(timer);
|
|
35
|
-
};
|
|
36
|
-
}, []), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
30
|
+
const [key, setKey] = import_react.default.useState(0), [progress, setProgress] = import_react.default.useState(60), [slider, setSlider] = import_react.default.useState([60]);
|
|
31
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
37
32
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { height: 60, items: "center", gap: "$4", children: [
|
|
38
33
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Paragraph, { height: 30, opacity: 0.5, children: [
|
|
39
|
-
"
|
|
40
|
-
|
|
34
|
+
"Progress: ",
|
|
35
|
+
progress
|
|
41
36
|
] }),
|
|
42
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Progress, {
|
|
37
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Progress, { value: progress, bg: "$color5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
38
|
+
import_tamagui.Progress.Indicator,
|
|
39
|
+
{
|
|
40
|
+
transition: [
|
|
41
|
+
"quicker",
|
|
42
|
+
{
|
|
43
|
+
transform: {
|
|
44
|
+
overshootClamping: !0
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
],
|
|
48
|
+
bg: "$background"
|
|
49
|
+
}
|
|
50
|
+
) }, key)
|
|
43
51
|
] }),
|
|
44
52
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
45
53
|
import_tamagui.XStack,
|
|
@@ -56,12 +64,12 @@ function ProgressDemo() {
|
|
|
56
64
|
{
|
|
57
65
|
size: "$2",
|
|
58
66
|
width: 130,
|
|
59
|
-
|
|
67
|
+
value: slider,
|
|
60
68
|
min: 0,
|
|
61
69
|
max: 100,
|
|
62
70
|
step: 1,
|
|
63
71
|
onValueChange: ([val]) => {
|
|
64
|
-
setProgress(val);
|
|
72
|
+
setProgress(val), setSlider([val]);
|
|
65
73
|
},
|
|
66
74
|
children: [
|
|
67
75
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, { borderWidth: 1, borderColor: "$color5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Slider.TrackActive, {}) }),
|
|
@@ -83,7 +91,7 @@ function ProgressDemo() {
|
|
|
83
91
|
size: "$2",
|
|
84
92
|
icon: import_lucide_icons.RotateCcw,
|
|
85
93
|
onPress: () => {
|
|
86
|
-
setKey(Math.random()), setProgress(0);
|
|
94
|
+
setKey(Math.random()), setProgress(0), setSlider([0]);
|
|
87
95
|
}
|
|
88
96
|
}
|
|
89
97
|
)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ProgressDemo.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB,
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB,8BAClB,iBAAoE,oBACpE,sBAAgC,kCAQ5B;AANG,SAAS,eAAe;AAC7B,QAAM,CAAC,KAAK,MAAM,IAAI,aAAAA,QAAM,SAAS,CAAC,GAChC,CAAC,UAAU,WAAW,IAAI,aAAAA,QAAM,SAAS,EAAE,GAC3C,CAAC,QAAQ,SAAS,IAAI,aAAAA,QAAM,SAAmB,CAAC,EAAE,CAAC;AAEzD,SACE,4EACE;AAAA,iDAAC,yBAAO,QAAQ,IAAI,OAAM,UAAS,KAAI,MACrC;AAAA,mDAAC,4BAAU,QAAQ,IAAI,SAAS,KAAK;AAAA;AAAA,QACxB;AAAA,SACb;AAAA,MACA,4CAAC,2BAAmB,OAAO,UAAU,IAAG,WACtC;AAAA,QAAC,wBAAS;AAAA,QAAT;AAAA,UACC,YAAY;AAAA,YACV;AAAA,YACA;AAAA,cACE,WAAW;AAAA,gBACT,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,UACA,IAAG;AAAA;AAAA,MACL,KAXa,GAYf;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,KAAI;AAAA,QACJ,UAAS;AAAA,QACT,GAAE;AAAA,QACF,GAAE;AAAA,QACF,MAAM,EAAE,SAAS,OAAO;AAAA,QAExB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO;AAAA,cACP,OAAO;AAAA,cACP,KAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAM;AAAA,cACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,4BAAY,GAAG,GACf,UAAU,CAAC,GAAG,CAAC;AAAA,cACjB;AAAA,cAEA;AAAA,4DAAC,sBAAO,OAAP,EAAa,aAAa,GAAG,aAAY,WACxC,sDAAC,sBAAO,aAAP,EAAmB,GACtB;AAAA,gBACA,4CAAC,sBAAO,OAAP,EAAa,UAAQ,IAAC,OAAO,GAAG;AAAA;AAAA;AAAA,UACnC;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM;AAAA,cACN,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG;AAAA;AAAA,UACxD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM;AAAA,cACN,SAAS,MAAM;AACb,uBAAO,KAAK,OAAO,CAAC,GACpB,YAAY,CAAC,GACb,UAAU,CAAC,CAAC,CAAC;AAAA,cACf;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
|
|
5
5
|
"names": ["React"]
|
|
6
6
|
}
|
|
@@ -42,17 +42,9 @@ var import_jsx_runtime = require("react/jsx-runtime"),
|
|
|
42
42
|
import_lucide_icons = require("@tamagui/lucide-icons");
|
|
43
43
|
function ProgressDemo() {
|
|
44
44
|
var [key, setKey] = import_react.default.useState(0),
|
|
45
|
-
[
|
|
46
|
-
[
|
|
47
|
-
|
|
48
|
-
return import_react.default.useEffect(function () {
|
|
49
|
-
var timer = setTimeout(function () {
|
|
50
|
-
return setProgress(60);
|
|
51
|
-
}, 1e3);
|
|
52
|
-
return function () {
|
|
53
|
-
clearTimeout(timer);
|
|
54
|
-
};
|
|
55
|
-
}, []), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
45
|
+
[progress, setProgress] = import_react.default.useState(60),
|
|
46
|
+
[slider, setSlider] = import_react.default.useState([60]);
|
|
47
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
56
48
|
children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
|
|
57
49
|
height: 60,
|
|
58
50
|
items: "center",
|
|
@@ -60,12 +52,16 @@ function ProgressDemo() {
|
|
|
60
52
|
children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Paragraph, {
|
|
61
53
|
height: 30,
|
|
62
54
|
opacity: 0.5,
|
|
63
|
-
children: ["
|
|
55
|
+
children: ["Progress: ", progress]
|
|
64
56
|
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Progress, {
|
|
65
|
-
size: sizeProp,
|
|
66
57
|
value: progress,
|
|
67
58
|
bg: "$color5",
|
|
68
59
|
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Progress.Indicator, {
|
|
60
|
+
transition: ["quicker", {
|
|
61
|
+
transform: {
|
|
62
|
+
overshootClamping: !0
|
|
63
|
+
}
|
|
64
|
+
}],
|
|
69
65
|
bg: "$background"
|
|
70
66
|
})
|
|
71
67
|
}, key)]
|
|
@@ -81,13 +77,13 @@ function ProgressDemo() {
|
|
|
81
77
|
children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Slider, {
|
|
82
78
|
size: "$2",
|
|
83
79
|
width: 130,
|
|
84
|
-
|
|
80
|
+
value: slider,
|
|
85
81
|
min: 0,
|
|
86
82
|
max: 100,
|
|
87
83
|
step: 1,
|
|
88
84
|
onValueChange: function (param) {
|
|
89
85
|
var [val] = param;
|
|
90
|
-
setProgress(val);
|
|
86
|
+
setProgress(val), setSlider([val]);
|
|
91
87
|
},
|
|
92
88
|
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Slider.Track, {
|
|
93
89
|
borderWidth: 1,
|
|
@@ -109,7 +105,7 @@ function ProgressDemo() {
|
|
|
109
105
|
size: "$2",
|
|
110
106
|
icon: import_lucide_icons.RotateCcw,
|
|
111
107
|
onPress: function () {
|
|
112
|
-
setKey(Math.random()), setProgress(0);
|
|
108
|
+
setKey(Math.random()), setProgress(0), setSlider([0]);
|
|
113
109
|
}
|
|
114
110
|
})]
|
|
115
111
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ProgressDemo_exports","__export","ProgressDemo","module","exports","import_jsx_runtime","require","import_react","__toESM","import_tamagui","import_lucide_icons","key","setKey","default","useState","
|
|
1
|
+
{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ProgressDemo_exports","__export","ProgressDemo","module","exports","import_jsx_runtime","require","import_react","__toESM","import_tamagui","import_lucide_icons","key","setKey","default","useState","progress","setProgress","slider","setSlider","jsxs","Fragment","children","YStack","height","items","gap","Paragraph","opacity","jsx","Progress","bg","Indicator","transition","transform","overshootClamping","XStack","position","b","l","$xxs","display","Slider","size","width","min","max","step","onValueChange","param","val","Track","borderWidth","borderColor","TrackActive","Thumb","circular","index","Button"],"sources":["../../src/ProgressDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAA;EAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;IAAAC,KAAA;EAAA,IAAAH,GAAA;AAAA,IAAAI,oBAAA;AAAAC,QAAA,CAAAD,oBAAA;EAAAE,YAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAkB,CAAAK,oBAClB;AAGO,IAAAK,kBAAS,GAAeC,OAAA;EAAAC,YAAA,GAAAC,OAAA,CAAAF,OAAA;EAAAG,cAAA,GAAAH,OAAA;EAAAI,mBAAA,GAAAJ,OAAA;AAC7B,SAAOJ,YAAWA,CAAA,EAAI;EAItB,KAAAS,GACE,EAAAC,MAAA,IAAAL,YAAA,CAAAM,OAAA,CAAAC,QAAA;IAAA,CAAAC,QAAA,EAAAC,WAAA,IAAAT,YACE,CAAAM,OAAA,CAAAC,QAAA;IAAA,CAAAG,MAAA,EAAAC,SAAA,IAAAX,YAAA,CAAAM,OAAA,CAAAC,QAAA,KACE;EAAqC,0BAAAT,kBAAA,CAAAc,IAAA,EAAAd,kBAAA,CAAAe,QAAA;IAAAC,QACxB,kBACb,IAAAhB,kBAAA,CAAAc,IAAA,EAAAV,cAAA,CAAAa,MAAA;MACAC,MAAA;MACGC,KAAA;MAAAC,GAAA;MAAAJ,QACC,GAAY,eACV,IAAAhB,kBAAA,CAAAc,IAAA,EAAAV,cAAA,CAAAiB,SAAA;QACAH,MAAA;QAAAI,OACE;QAAWN,QACT,GACF,cACFN,QAAA;MAEF,IAAG,mBAAAV,kBAAA,CAAAuB,GAAA,EAAAnB,cAAA,CAAAoB,QAAA;QAVQ9B,KAYf,EAAAgB,QAAA;QACFe,EAAA;QAEAT,QAAA,qBAAAhB,kBAAA,CAAAuB,GAAA,EAAAnB,cAAA,CAAAoB,QAAA,CAAAE,SAAA;UAACC,UAAA,cACO;YACFC,SAAA;cACKC,iBAAA;YACP;UACA,EACI;UAENJ,EAAA;QAAA;MAAA,GAACnB,GAAA;IAAA,IACM,eACE,IAAAN,kBAAA,CAAAc,IAAA,EAAAV,cAAA,CAAA0B,MAAA;MAAAX,KAAA,EACP,QAAO;MAAAC,GAAA,MACP;MAAKW,QACL,YAAK;MAAAC,CAAA,MACL;MAAMC,CAAA,MACN;MACEC,IAAA;QACeC,OACjB;MAAA;MAEAnB,QAAA,GAEA,eACA,IAAAhB,kBAAA,CAAAc,IAAA,EAAAV,cAAC,CAAAgC,MAAA;QAAgCC,IAAA;QAAAC,KAAA;QACnC5C,KAAA,EAAAkB,MAAA;QAEA2B,GAAA;QAACC,GAAA;QAAAC,IAAA;QAAAC,aACM,WAAAA,CAAAC,KAAA;UACL,KAAAC,GAAM,IAAAD,KAAA;UACNhC,WAAS,CAAAiC,GAAM,GAAA/B,SAAY,CAAC,CAA0B+B,GAAA,CACxD;QACA;QAAC5B,QAAA,sBAAAhB,kBAAA,CAAAuB,GAAA,EAAAnB,cAAA,CAAAgC,MAAA,CAAAS,KAAA;UACCC,WAAK;UACLC,WAAM;UACN/B,QAAS,iBAAM,IAAAhB,kBAAA,CAAAuB,GAAA,EAAAnB,cAAA,CAAAgC,MAAA,CAAAY,WAAA;QACb,IAGF,mBAAAhD,kBAAA,CAAAuB,GAAA,EAAAnB,cAAA,CAAAgC,MAAA,CAAAa,KAAA;UAAAC,QAAA;UACFC,KAAA;QAAA;MACF,IACF,mBAAAnD,kBAAA,CAAAuB,GAAA,EAAAnB,cAAA,CAAAgD,MAAA;QAEJf,IAAA","ignoreList":[]}
|
package/dist/esm/ProgressDemo.js
CHANGED
|
@@ -3,19 +3,27 @@ import { Button, Paragraph, Progress, Slider, XStack, YStack } from "tamagui";
|
|
|
3
3
|
import { Play, RotateCcw } from "@tamagui/lucide-icons";
|
|
4
4
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
function ProgressDemo() {
|
|
6
|
-
const [key, setKey] = React.useState(0), [
|
|
7
|
-
return
|
|
8
|
-
const timer = setTimeout(() => setProgress(60), 1e3);
|
|
9
|
-
return () => {
|
|
10
|
-
clearTimeout(timer);
|
|
11
|
-
};
|
|
12
|
-
}, []), /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
6
|
+
const [key, setKey] = React.useState(0), [progress, setProgress] = React.useState(60), [slider, setSlider] = React.useState([60]);
|
|
7
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
13
8
|
/* @__PURE__ */ jsxs(YStack, { height: 60, items: "center", gap: "$4", children: [
|
|
14
9
|
/* @__PURE__ */ jsxs(Paragraph, { height: 30, opacity: 0.5, children: [
|
|
15
|
-
"
|
|
16
|
-
|
|
10
|
+
"Progress: ",
|
|
11
|
+
progress
|
|
17
12
|
] }),
|
|
18
|
-
/* @__PURE__ */ jsx(Progress, {
|
|
13
|
+
/* @__PURE__ */ jsx(Progress, { value: progress, bg: "$color5", children: /* @__PURE__ */ jsx(
|
|
14
|
+
Progress.Indicator,
|
|
15
|
+
{
|
|
16
|
+
transition: [
|
|
17
|
+
"quicker",
|
|
18
|
+
{
|
|
19
|
+
transform: {
|
|
20
|
+
overshootClamping: !0
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
],
|
|
24
|
+
bg: "$background"
|
|
25
|
+
}
|
|
26
|
+
) }, key)
|
|
19
27
|
] }),
|
|
20
28
|
/* @__PURE__ */ jsxs(
|
|
21
29
|
XStack,
|
|
@@ -32,12 +40,12 @@ function ProgressDemo() {
|
|
|
32
40
|
{
|
|
33
41
|
size: "$2",
|
|
34
42
|
width: 130,
|
|
35
|
-
|
|
43
|
+
value: slider,
|
|
36
44
|
min: 0,
|
|
37
45
|
max: 100,
|
|
38
46
|
step: 1,
|
|
39
47
|
onValueChange: ([val]) => {
|
|
40
|
-
setProgress(val);
|
|
48
|
+
setProgress(val), setSlider([val]);
|
|
41
49
|
},
|
|
42
50
|
children: [
|
|
43
51
|
/* @__PURE__ */ jsx(Slider.Track, { borderWidth: 1, borderColor: "$color5", children: /* @__PURE__ */ jsx(Slider.TrackActive, {}) }),
|
|
@@ -59,7 +67,7 @@ function ProgressDemo() {
|
|
|
59
67
|
size: "$2",
|
|
60
68
|
icon: RotateCcw,
|
|
61
69
|
onPress: () => {
|
|
62
|
-
setKey(Math.random()), setProgress(0);
|
|
70
|
+
setKey(Math.random()), setProgress(0), setSlider([0]);
|
|
63
71
|
}
|
|
64
72
|
}
|
|
65
73
|
)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ProgressDemo.tsx"],
|
|
4
|
-
"mappings": "AAAA,OAAO,WAAW;
|
|
4
|
+
"mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,QAAQ,WAAW,UAAU,QAAQ,QAAQ,cAAc;AACpE,SAAS,MAAM,iBAAiB;AAQ5B,mBAMM,KAJF,YAFJ;AANG,SAAS,eAAe;AAC7B,QAAM,CAAC,KAAK,MAAM,IAAI,MAAM,SAAS,CAAC,GAChC,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,EAAE,GAC3C,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAmB,CAAC,EAAE,CAAC;AAEzD,SACE,iCACE;AAAA,yBAAC,UAAO,QAAQ,IAAI,OAAM,UAAS,KAAI,MACrC;AAAA,2BAAC,aAAU,QAAQ,IAAI,SAAS,KAAK;AAAA;AAAA,QACxB;AAAA,SACb;AAAA,MACA,oBAAC,YAAmB,OAAO,UAAU,IAAG,WACtC;AAAA,QAAC,SAAS;AAAA,QAAT;AAAA,UACC,YAAY;AAAA,YACV;AAAA,YACA;AAAA,cACE,WAAW;AAAA,gBACT,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,UACA,IAAG;AAAA;AAAA,MACL,KAXa,GAYf;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,KAAI;AAAA,QACJ,UAAS;AAAA,QACT,GAAE;AAAA,QACF,GAAE;AAAA,QACF,MAAM,EAAE,SAAS,OAAO;AAAA,QAExB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO;AAAA,cACP,OAAO;AAAA,cACP,KAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAM;AAAA,cACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,4BAAY,GAAG,GACf,UAAU,CAAC,GAAG,CAAC;AAAA,cACjB;AAAA,cAEA;AAAA,oCAAC,OAAO,OAAP,EAAa,aAAa,GAAG,aAAY,WACxC,8BAAC,OAAO,aAAP,EAAmB,GACtB;AAAA,gBACA,oBAAC,OAAO,OAAP,EAAa,UAAQ,IAAC,OAAO,GAAG;AAAA;AAAA;AAAA,UACnC;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM;AAAA,cACN,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG;AAAA;AAAA,UACxD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM;AAAA,cACN,SAAS,MAAM;AACb,uBAAO,KAAK,OAAO,CAAC,GACpB,YAAY,CAAC,GACb,UAAU,CAAC,CAAC,CAAC;AAAA,cACf;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -4,15 +4,9 @@ import { Play, RotateCcw } from "@tamagui/lucide-icons";
|
|
|
4
4
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
function ProgressDemo() {
|
|
6
6
|
const [key, setKey] = React.useState(0),
|
|
7
|
-
[
|
|
8
|
-
[
|
|
9
|
-
|
|
10
|
-
return React.useEffect(() => {
|
|
11
|
-
const timer = setTimeout(() => setProgress(60), 1e3);
|
|
12
|
-
return () => {
|
|
13
|
-
clearTimeout(timer);
|
|
14
|
-
};
|
|
15
|
-
}, []), /* @__PURE__ */jsxs(Fragment, {
|
|
7
|
+
[progress, setProgress] = React.useState(60),
|
|
8
|
+
[slider, setSlider] = React.useState([60]);
|
|
9
|
+
return /* @__PURE__ */jsxs(Fragment, {
|
|
16
10
|
children: [/* @__PURE__ */jsxs(YStack, {
|
|
17
11
|
height: 60,
|
|
18
12
|
items: "center",
|
|
@@ -20,12 +14,16 @@ function ProgressDemo() {
|
|
|
20
14
|
children: [/* @__PURE__ */jsxs(Paragraph, {
|
|
21
15
|
height: 30,
|
|
22
16
|
opacity: 0.5,
|
|
23
|
-
children: ["
|
|
17
|
+
children: ["Progress: ", progress]
|
|
24
18
|
}), /* @__PURE__ */jsx(Progress, {
|
|
25
|
-
size: sizeProp,
|
|
26
19
|
value: progress,
|
|
27
20
|
bg: "$color5",
|
|
28
21
|
children: /* @__PURE__ */jsx(Progress.Indicator, {
|
|
22
|
+
transition: ["quicker", {
|
|
23
|
+
transform: {
|
|
24
|
+
overshootClamping: !0
|
|
25
|
+
}
|
|
26
|
+
}],
|
|
29
27
|
bg: "$background"
|
|
30
28
|
})
|
|
31
29
|
}, key)]
|
|
@@ -41,12 +39,12 @@ function ProgressDemo() {
|
|
|
41
39
|
children: [/* @__PURE__ */jsxs(Slider, {
|
|
42
40
|
size: "$2",
|
|
43
41
|
width: 130,
|
|
44
|
-
|
|
42
|
+
value: slider,
|
|
45
43
|
min: 0,
|
|
46
44
|
max: 100,
|
|
47
45
|
step: 1,
|
|
48
46
|
onValueChange: ([val]) => {
|
|
49
|
-
setProgress(val);
|
|
47
|
+
setProgress(val), setSlider([val]);
|
|
50
48
|
},
|
|
51
49
|
children: [/* @__PURE__ */jsx(Slider.Track, {
|
|
52
50
|
borderWidth: 1,
|
|
@@ -64,7 +62,7 @@ function ProgressDemo() {
|
|
|
64
62
|
size: "$2",
|
|
65
63
|
icon: RotateCcw,
|
|
66
64
|
onPress: () => {
|
|
67
|
-
setKey(Math.random()), setProgress(0);
|
|
65
|
+
setKey(Math.random()), setProgress(0), setSlider([0]);
|
|
68
66
|
}
|
|
69
67
|
})]
|
|
70
68
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Button","Paragraph","Progress","Slider","XStack","YStack","Play","RotateCcw","Fragment","jsx","jsxs","ProgressDemo","key","setKey","useState","
|
|
1
|
+
{"version":3,"names":["React","Button","Paragraph","Progress","Slider","XStack","YStack","Play","RotateCcw","Fragment","jsx","jsxs","ProgressDemo","key","setKey","useState","progress","setProgress","slider","setSlider","children","height","items","gap","opacity","value","bg","Indicator","transition","transform","overshootClamping","position","b","l","$xxs","display","size","width","min","max","step","onValueChange","val","Track","borderWidth","borderColor","TrackActive","Thumb","circular","index","icon","onPress","prev","Math","random"],"sources":["../../src/ProgressDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,OAAOA,KAAA,MAAW;AAClB,SAASC,MAAA,EAAQC,SAAA,EAAWC,QAAA,EAAUC,MAAA,EAAQC,MAAA,EAAQC,MAAA,QAAc;AACpE,SAASC,IAAA,EAAMC,SAAA,QAAiB;AAQ5B,SAAAC,QAAA,EAMMC,GAAA,EAJFC,IAAA,QAFJ;AANG,SAASC,aAAA,EAAe;EAC7B,MAAM,CAACC,GAAA,EAAKC,MAAM,IAAId,KAAA,CAAMe,QAAA,CAAS,CAAC;IAChC,CAACC,QAAA,EAAUC,WAAW,IAAIjB,KAAA,CAAMe,QAAA,CAAS,EAAE;IAC3C,CAACG,MAAA,EAAQC,SAAS,IAAInB,KAAA,CAAMe,QAAA,CAAmB,CAAC,EAAE,CAAC;EAEzD,OACE,eAAAJ,IAAA,CAAAF,QAAA;IACEW,QAAA,kBAAAT,IAAA,CAACL,MAAA;MAAOe,MAAA,EAAQ;MAAIC,KAAA,EAAM;MAASC,GAAA,EAAI;MACrCH,QAAA,kBAAAT,IAAA,CAACT,SAAA;QAAUmB,MAAA,EAAQ;QAAIG,OAAA,EAAS;QAAKJ,QAAA,iBACxBJ,QAAA;MAAA,CACb,GACA,eAAAN,GAAA,CAACP,QAAA;QAAmBsB,KAAA,EAAOT,QAAA;QAAUU,EAAA,EAAG;QACtCN,QAAA,iBAAAV,GAAA,CAACP,QAAA,CAASwB,SAAA,EAAT;UACCC,UAAA,EAAY,CACV,WACA;YACEC,SAAA,EAAW;cACTC,iBAAA,EAAmB;YACrB;UACF,EACF;UACAJ,EAAA,EAAG;QAAA,CACL;MAAA,GAXab,GAYf;IAAA,CACF,GAEA,eAAAF,IAAA,CAACN,MAAA;MACCiB,KAAA,EAAM;MACNC,GAAA,EAAI;MACJQ,QAAA,EAAS;MACTC,CAAA,EAAE;MACFC,CAAA,EAAE;MACFC,IAAA,EAAM;QAAEC,OAAA,EAAS;MAAO;MAExBf,QAAA,kBAAAT,IAAA,CAACP,MAAA;QACCgC,IAAA,EAAK;QACLC,KAAA,EAAO;QACPZ,KAAA,EAAOP,MAAA;QACPoB,GAAA,EAAK;QACLC,GAAA,EAAK;QACLC,IAAA,EAAM;QACNC,aAAA,EAAeA,CAAC,CAACC,GAAG,MAAM;UACxBzB,WAAA,CAAYyB,GAAG,GACfvB,SAAA,CAAU,CAACuB,GAAG,CAAC;QACjB;QAEAtB,QAAA,kBAAAV,GAAA,CAACN,MAAA,CAAOuC,KAAA,EAAP;UAAaC,WAAA,EAAa;UAAGC,WAAA,EAAY;UACxCzB,QAAA,iBAAAV,GAAA,CAACN,MAAA,CAAO0C,WAAA,EAAP,EAAmB;QAAA,CACtB,GACA,eAAApC,GAAA,CAACN,MAAA,CAAO2C,KAAA,EAAP;UAAaC,QAAA,EAAQ;UAACC,KAAA,EAAO;QAAA,CAAG;MAAA,CACnC,GAEA,eAAAvC,GAAA,CAACT,MAAA;QACCmC,IAAA,EAAK;QACLc,IAAA,EAAM3C,IAAA;QACN4C,OAAA,EAASA,CAAA,KAAMlC,WAAA,CAAamC,IAAA,KAAUA,IAAA,GAAO,MAAM,GAAG;MAAA,CACxD,GACA,eAAA1C,GAAA,CAACT,MAAA;QACCmC,IAAA,EAAK;QACLc,IAAA,EAAM1C,SAAA;QACN2C,OAAA,EAASA,CAAA,KAAM;UACbrC,MAAA,CAAOuC,IAAA,CAAKC,MAAA,CAAO,CAAC,GACpBrC,WAAA,CAAY,CAAC,GACbE,SAAA,CAAU,CAAC,CAAC,CAAC;QACf;MAAA,CACF;IAAA,CACF;EAAA,CACF;AAEJ","ignoreList":[]}
|
|
@@ -4,17 +4,9 @@ import { Button, Paragraph, Progress, Slider, XStack, YStack } from "tamagui";
|
|
|
4
4
|
import { Play, RotateCcw } from "@tamagui/lucide-icons";
|
|
5
5
|
function ProgressDemo() {
|
|
6
6
|
var [key, setKey] = React.useState(0),
|
|
7
|
-
[
|
|
8
|
-
[
|
|
9
|
-
|
|
10
|
-
return React.useEffect(function () {
|
|
11
|
-
var timer = setTimeout(function () {
|
|
12
|
-
return setProgress(60);
|
|
13
|
-
}, 1e3);
|
|
14
|
-
return function () {
|
|
15
|
-
clearTimeout(timer);
|
|
16
|
-
};
|
|
17
|
-
}, []), /* @__PURE__ */_jsxs(_Fragment, {
|
|
7
|
+
[progress, setProgress] = React.useState(60),
|
|
8
|
+
[slider, setSlider] = React.useState([60]);
|
|
9
|
+
return /* @__PURE__ */_jsxs(_Fragment, {
|
|
18
10
|
children: [/* @__PURE__ */_jsxs(YStack, {
|
|
19
11
|
height: 60,
|
|
20
12
|
items: "center",
|
|
@@ -22,12 +14,16 @@ function ProgressDemo() {
|
|
|
22
14
|
children: [/* @__PURE__ */_jsxs(Paragraph, {
|
|
23
15
|
height: 30,
|
|
24
16
|
opacity: 0.5,
|
|
25
|
-
children: ["
|
|
17
|
+
children: ["Progress: ", progress]
|
|
26
18
|
}), /* @__PURE__ */_jsx(Progress, {
|
|
27
|
-
size: sizeProp,
|
|
28
19
|
value: progress,
|
|
29
20
|
bg: "$color5",
|
|
30
21
|
children: /* @__PURE__ */_jsx(Progress.Indicator, {
|
|
22
|
+
transition: ["quicker", {
|
|
23
|
+
transform: {
|
|
24
|
+
overshootClamping: !0
|
|
25
|
+
}
|
|
26
|
+
}],
|
|
31
27
|
bg: "$background"
|
|
32
28
|
})
|
|
33
29
|
}, key)]
|
|
@@ -43,13 +39,13 @@ function ProgressDemo() {
|
|
|
43
39
|
children: [/* @__PURE__ */_jsxs(Slider, {
|
|
44
40
|
size: "$2",
|
|
45
41
|
width: 130,
|
|
46
|
-
|
|
42
|
+
value: slider,
|
|
47
43
|
min: 0,
|
|
48
44
|
max: 100,
|
|
49
45
|
step: 1,
|
|
50
46
|
onValueChange: function (param) {
|
|
51
47
|
var [val] = param;
|
|
52
|
-
setProgress(val);
|
|
48
|
+
setProgress(val), setSlider([val]);
|
|
53
49
|
},
|
|
54
50
|
children: [/* @__PURE__ */_jsx(Slider.Track, {
|
|
55
51
|
borderWidth: 1,
|
|
@@ -71,7 +67,7 @@ function ProgressDemo() {
|
|
|
71
67
|
size: "$2",
|
|
72
68
|
icon: RotateCcw,
|
|
73
69
|
onPress: function () {
|
|
74
|
-
setKey(Math.random()), setProgress(0);
|
|
70
|
+
setKey(Math.random()), setProgress(0), setSlider([0]);
|
|
75
71
|
}
|
|
76
72
|
})]
|
|
77
73
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","React","Button","Paragraph","Progress","Slider","XStack","YStack","Play","RotateCcw","ProgressDemo","key","setKey","useState","
|
|
1
|
+
{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","React","Button","Paragraph","Progress","Slider","XStack","YStack","Play","RotateCcw","ProgressDemo","key","setKey","useState","progress","setProgress","slider","setSlider","children","height","items","gap","opacity","value","bg","Indicator","transition","transform","overshootClamping","position","b","l","$xxs","display","size","width","min","max","step","onValueChange","param","val","Track","borderWidth","borderColor","TrackActive","Thumb","circular","index","icon"],"sources":["../../src/ProgressDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAOA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAClB,OAAAC,KAAS,MAAQ;AACjB,SAASC,MAAM,EAAAC,SAAA,EAAAC,QAAiB,EAAAC,MAAA,EAAAC,MAAA,EAAAC,MAAA;AAQ5B,SAAAC,IAAA,EAAAC,SAEI,+BAFJ;AANG,SAASC,aAAA,EAAe;EAC7B,KAAAC,GAAO,EAAAC,MAAK,IAAMX,KAAI,CAAAY,QAAM,GAAS;IAAC,CAAAC,QAC/B,EAAAC,WAAU,IAAWd,KAAI,CAAAY,QAAM,GAAS;IAAE,CAAAG,MAC1C,EAAAC,SAAQ,IAAShB,KAAI,CAAAY,QAAM,EAElC,GAEI;EACE,sBAAAf,KAAC,CAAAE,SAAU;IAA0BkB,QAAA,kBACxBpB,KAAA,CAAAS,MAAA;MAAAY,MACb;MACAC,KAAA;MACGC,GAAA,MAAS;MAATH,QAAA,GACC,eAAYpB,KAAA,CAAAK,SAAA;QACVgB,MAAA;QACAG,OAAA;QAAAJ,QACE,GAAW,YACT,EACFJ,QAAA;MAEJ,IACA,eAAGlB,IAAA,CAAAQ,QAAA;QAAAmB,KAAA,EAAAT,QAAA;QAVQU,EAYf;QACFN,QAAA,iBAAAtB,IAAA,CAAAQ,QAAA,CAAAqB,SAAA;UAEAC,UAAA,GAAC;YACOC,SAAA;cACFC,iBAAA;YACK;UACP,EACA;UACIJ,EAAE;QAER;MAAA,GAAAb,GAAA;IAAC,mBACMb,KAAA,CAAAQ,MAAA;MAAAc,KAAA,EACL,QAAO;MAAAC,GAAA,MACP;MAAOQ,QACP,YAAK;MAAAC,CAAA,MACL;MAAKC,CAAA,MACL;MAAMC,IAAA,EACN;QACEC,OAAA;MACe;MACjBf,QAEA,kBAAApB,KAAA,CAAAO,MAAC;QAED6B,IACA;QAAiCC,KAAA;QAAAZ,KAAA,EAAAP,MAAA;QACnCoB,GAAA;QAEAC,GAAA;QAACC,IAAA;QAAAC,aAAA,WAAAA,CAAAC,KAAA;UACC,KAAAC,GAAK,IAAAD,KAAA;UACLzB,WAAM,CAAA0B,GAAA,GAAAxB,SAAA,EACNwB,GAAA,CAAsD;QACxD;QACAvB,QAAA,GAAC,eAAAtB,IAAA,CAAAS,MAAA,CAAAqC,KAAA;UAAAC,WAAA;UACCC,WAAK;UACL1B,QAAM,iBAAAtB,IAAA,CAAAS,MAAA,CAAAwC,WAAA;QACN,IACE,eAAYjD,IAAA,CAAOS,MACnB,CAAAyC,KAAA;UAEFC,QAAA;UAAAC,KAAA;QACF;MAAA,IACF,eAAApD,IAAA,CAAAM,MAAA;QACFgC,IAAA;QAEJe,IAAA,EAAAzC,IAAA","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/demos",
|
|
3
|
-
"version": "2.0.0-
|
|
3
|
+
"version": "2.0.0-1768326993354",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"*.css"
|
|
@@ -50,45 +50,45 @@
|
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@tamagui/animate-presence": "2.0.0-
|
|
54
|
-
"@tamagui/avatar": "2.0.0-
|
|
55
|
-
"@tamagui/button": "2.0.0-
|
|
56
|
-
"@tamagui/checkbox": "2.0.0-
|
|
57
|
-
"@tamagui/checkbox-headless": "2.0.0-
|
|
58
|
-
"@tamagui/config": "2.0.0-
|
|
59
|
-
"@tamagui/context-menu": "2.0.0-
|
|
60
|
-
"@tamagui/core": "2.0.0-
|
|
61
|
-
"@tamagui/get-button-sized": "2.0.0-
|
|
62
|
-
"@tamagui/image": "2.0.0-
|
|
63
|
-
"@tamagui/input": "2.0.0-
|
|
64
|
-
"@tamagui/linear-gradient": "2.0.0-
|
|
65
|
-
"@tamagui/list-item": "2.0.0-
|
|
66
|
-
"@tamagui/logo": "2.0.0-
|
|
67
|
-
"@tamagui/lucide-icons": "2.0.0-
|
|
68
|
-
"@tamagui/menu": "2.0.0-
|
|
69
|
-
"@tamagui/popover": "2.0.0-
|
|
70
|
-
"@tamagui/progress": "2.0.0-
|
|
71
|
-
"@tamagui/radio-group": "2.0.0-
|
|
72
|
-
"@tamagui/radio-headless": "2.0.0-
|
|
73
|
-
"@tamagui/roving-focus": "2.0.0-
|
|
74
|
-
"@tamagui/select": "2.0.0-
|
|
75
|
-
"@tamagui/sheet": "2.0.0-
|
|
76
|
-
"@tamagui/slider": "2.0.0-
|
|
77
|
-
"@tamagui/stacks": "2.0.0-
|
|
78
|
-
"@tamagui/switch": "2.0.0-
|
|
79
|
-
"@tamagui/switch-headless": "2.0.0-
|
|
80
|
-
"@tamagui/tabs": "2.0.0-
|
|
81
|
-
"@tamagui/tamagui-dev-config": "2.0.0-
|
|
82
|
-
"@tamagui/theme": "2.0.0-
|
|
83
|
-
"@tamagui/toast": "2.0.0-
|
|
84
|
-
"tamagui": "2.0.0-
|
|
53
|
+
"@tamagui/animate-presence": "2.0.0-1768326993354",
|
|
54
|
+
"@tamagui/avatar": "2.0.0-1768326993354",
|
|
55
|
+
"@tamagui/button": "2.0.0-1768326993354",
|
|
56
|
+
"@tamagui/checkbox": "2.0.0-1768326993354",
|
|
57
|
+
"@tamagui/checkbox-headless": "2.0.0-1768326993354",
|
|
58
|
+
"@tamagui/config": "2.0.0-1768326993354",
|
|
59
|
+
"@tamagui/context-menu": "2.0.0-1768326993354",
|
|
60
|
+
"@tamagui/core": "2.0.0-1768326993354",
|
|
61
|
+
"@tamagui/get-button-sized": "2.0.0-1768326993354",
|
|
62
|
+
"@tamagui/image": "2.0.0-1768326993354",
|
|
63
|
+
"@tamagui/input": "2.0.0-1768326993354",
|
|
64
|
+
"@tamagui/linear-gradient": "2.0.0-1768326993354",
|
|
65
|
+
"@tamagui/list-item": "2.0.0-1768326993354",
|
|
66
|
+
"@tamagui/logo": "2.0.0-1768326993354",
|
|
67
|
+
"@tamagui/lucide-icons": "2.0.0-1768326993354",
|
|
68
|
+
"@tamagui/menu": "2.0.0-1768326993354",
|
|
69
|
+
"@tamagui/popover": "2.0.0-1768326993354",
|
|
70
|
+
"@tamagui/progress": "2.0.0-1768326993354",
|
|
71
|
+
"@tamagui/radio-group": "2.0.0-1768326993354",
|
|
72
|
+
"@tamagui/radio-headless": "2.0.0-1768326993354",
|
|
73
|
+
"@tamagui/roving-focus": "2.0.0-1768326993354",
|
|
74
|
+
"@tamagui/select": "2.0.0-1768326993354",
|
|
75
|
+
"@tamagui/sheet": "2.0.0-1768326993354",
|
|
76
|
+
"@tamagui/slider": "2.0.0-1768326993354",
|
|
77
|
+
"@tamagui/stacks": "2.0.0-1768326993354",
|
|
78
|
+
"@tamagui/switch": "2.0.0-1768326993354",
|
|
79
|
+
"@tamagui/switch-headless": "2.0.0-1768326993354",
|
|
80
|
+
"@tamagui/tabs": "2.0.0-1768326993354",
|
|
81
|
+
"@tamagui/tamagui-dev-config": "2.0.0-1768326993354",
|
|
82
|
+
"@tamagui/theme": "2.0.0-1768326993354",
|
|
83
|
+
"@tamagui/toast": "2.0.0-1768326993354",
|
|
84
|
+
"tamagui": "2.0.0-1768326993354"
|
|
85
85
|
},
|
|
86
86
|
"peerDependencies": {
|
|
87
87
|
"react": "*",
|
|
88
88
|
"react-native": "*"
|
|
89
89
|
},
|
|
90
90
|
"devDependencies": {
|
|
91
|
-
"@tamagui/build": "2.0.0-
|
|
91
|
+
"@tamagui/build": "2.0.0-1768326993354",
|
|
92
92
|
"react": "*",
|
|
93
93
|
"react-native": "0.81.5"
|
|
94
94
|
},
|
package/src/ProgressDemo.tsx
CHANGED
|
@@ -1,29 +1,30 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import type { SizeTokens } from 'tamagui'
|
|
3
2
|
import { Button, Paragraph, Progress, Slider, XStack, YStack } from 'tamagui'
|
|
4
3
|
import { Play, RotateCcw } from '@tamagui/lucide-icons'
|
|
5
4
|
|
|
6
5
|
export function ProgressDemo() {
|
|
7
6
|
const [key, setKey] = React.useState(0)
|
|
8
|
-
const [
|
|
9
|
-
const [
|
|
10
|
-
const sizeProp = `$${size}` as SizeTokens
|
|
11
|
-
|
|
12
|
-
React.useEffect(() => {
|
|
13
|
-
const timer = setTimeout(() => setProgress(60), 1000)
|
|
14
|
-
return () => {
|
|
15
|
-
clearTimeout(timer)
|
|
16
|
-
}
|
|
17
|
-
}, [])
|
|
7
|
+
const [progress, setProgress] = React.useState(60)
|
|
8
|
+
const [slider, setSlider] = React.useState<number[]>([60])
|
|
18
9
|
|
|
19
10
|
return (
|
|
20
11
|
<>
|
|
21
12
|
<YStack height={60} items="center" gap="$4">
|
|
22
13
|
<Paragraph height={30} opacity={0.5}>
|
|
23
|
-
|
|
14
|
+
Progress: {progress}
|
|
24
15
|
</Paragraph>
|
|
25
|
-
<Progress key={key}
|
|
26
|
-
<Progress.Indicator
|
|
16
|
+
<Progress key={key} value={progress} bg="$color5">
|
|
17
|
+
<Progress.Indicator
|
|
18
|
+
transition={[
|
|
19
|
+
'quicker',
|
|
20
|
+
{
|
|
21
|
+
transform: {
|
|
22
|
+
overshootClamping: true,
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
]}
|
|
26
|
+
bg="$background"
|
|
27
|
+
/>
|
|
27
28
|
</Progress>
|
|
28
29
|
</YStack>
|
|
29
30
|
|
|
@@ -38,12 +39,13 @@ export function ProgressDemo() {
|
|
|
38
39
|
<Slider
|
|
39
40
|
size="$2"
|
|
40
41
|
width={130}
|
|
41
|
-
|
|
42
|
+
value={slider}
|
|
42
43
|
min={0}
|
|
43
44
|
max={100}
|
|
44
45
|
step={1}
|
|
45
46
|
onValueChange={([val]) => {
|
|
46
47
|
setProgress(val)
|
|
48
|
+
setSlider([val])
|
|
47
49
|
}}
|
|
48
50
|
>
|
|
49
51
|
<Slider.Track borderWidth={1} borderColor="$color5">
|
|
@@ -63,6 +65,7 @@ export function ProgressDemo() {
|
|
|
63
65
|
onPress={() => {
|
|
64
66
|
setKey(Math.random())
|
|
65
67
|
setProgress(0)
|
|
68
|
+
setSlider([0])
|
|
66
69
|
}}
|
|
67
70
|
/>
|
|
68
71
|
</XStack>
|