@tamagui/progress 2.7.7 → 3.0.0-beta.643.1
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/Progress.cjs +92 -139
- package/dist/cjs/Progress.native.cjs +136 -0
- package/dist/cjs/Progress.native.js +96 -143
- package/dist/cjs/Progress.native.js.map +1 -1
- package/dist/cjs/index.cjs +10 -11
- package/dist/cjs/index.native.cjs +21 -0
- package/dist/cjs/index.native.js +10 -10
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/esm/Progress.mjs +77 -121
- package/dist/esm/Progress.mjs.map +1 -1
- package/dist/esm/Progress.native.js +81 -126
- package/dist/esm/Progress.native.js.map +1 -1
- package/dist/esm/index.js +1 -2
- package/dist/esm/index.mjs +1 -2
- package/dist/esm/index.native.js +1 -2
- package/dist/jsx/Progress.mjs +77 -121
- package/dist/jsx/Progress.mjs.map +1 -1
- package/dist/jsx/Progress.native.cjs +136 -0
- package/dist/jsx/Progress.native.js +96 -143
- package/dist/jsx/Progress.native.js.map +1 -1
- package/dist/jsx/index.js +1 -2
- package/dist/jsx/index.mjs +1 -2
- package/dist/jsx/index.native.cjs +21 -0
- package/dist/jsx/index.native.js +10 -10
- package/dist/jsx/index.native.js.map +1 -1
- package/package.json +9 -9
- package/src/Progress.tsx +53 -78
- package/types/Progress.d.ts +82 -52
- package/types/Progress.d.ts.map +1 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js.map +0 -1
- package/dist/jsx/index.js.map +0 -1
- package/dist/jsx/index.mjs.map +0 -1
package/dist/esm/Progress.mjs
CHANGED
|
@@ -1,149 +1,105 @@
|
|
|
1
|
-
import { getVariableValue, isWeb, styled } from "@tamagui/core";
|
|
1
|
+
import { createStyledHOC, getVariableValue, isWeb, styled } from "@tamagui/core";
|
|
2
2
|
import { createContextScope } from "@tamagui/create-context";
|
|
3
3
|
import { getSize } from "@tamagui/get-token";
|
|
4
4
|
import { withStaticProperties } from "@tamagui/helpers";
|
|
5
5
|
import { YStack } from "@tamagui/stacks";
|
|
6
6
|
import { useState } from "react";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
|
+
|
|
8
9
|
const PROGRESS_NAME = "Progress";
|
|
9
10
|
const [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME);
|
|
10
11
|
const [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);
|
|
11
12
|
const INDICATOR_NAME = "ProgressIndicator";
|
|
12
13
|
const ProgressIndicatorFrame = styled(YStack, {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
false: {
|
|
17
|
-
height: "100%",
|
|
18
|
-
width: "100%",
|
|
19
|
-
backgroundColor: "$background"
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
defaultVariants: {
|
|
24
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
25
|
-
}
|
|
14
|
+
displayName: INDICATOR_NAME,
|
|
15
|
+
height: "100%",
|
|
16
|
+
width: "100%"
|
|
26
17
|
});
|
|
27
|
-
const ProgressIndicator = ProgressIndicatorFrame
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
// on native, hide until we have width measurement
|
|
51
|
-
...(!isWeb && context.width === 0 && {
|
|
52
|
-
opacity: 0
|
|
53
|
-
})
|
|
54
|
-
}),
|
|
55
|
-
...indicatorProps,
|
|
56
|
-
ref: forwardedRef,
|
|
57
|
-
transition: !isWeb && !context.width ? null : transition
|
|
58
|
-
});
|
|
18
|
+
const ProgressIndicator = createStyledHOC(ProgressIndicatorFrame, function ProgressIndicator2(props, forwardedRef) {
|
|
19
|
+
const { __scopeProgress, transition, ...indicatorProps } = props;
|
|
20
|
+
const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
|
21
|
+
const progressRatio = (context.value ?? 0) / context.max;
|
|
22
|
+
let x;
|
|
23
|
+
if (isWeb) {
|
|
24
|
+
x = `${-100 + progressRatio * 50}%`;
|
|
25
|
+
} else {
|
|
26
|
+
const baseWidth = context.width || 0;
|
|
27
|
+
x = Math.ceil(-baseWidth * (2 - progressRatio));
|
|
28
|
+
}
|
|
29
|
+
return /* @__PURE__ */ jsx(ProgressIndicatorFrame, {
|
|
30
|
+
"data-state": getProgressState(context.value, context.max),
|
|
31
|
+
"data-value": context.value ?? void 0,
|
|
32
|
+
"data-max": context.max,
|
|
33
|
+
x,
|
|
34
|
+
width: "200%",
|
|
35
|
+
animateOnly: ["transform"],
|
|
36
|
+
...!isWeb && context.width === 0 && { opacity: 0 },
|
|
37
|
+
...indicatorProps,
|
|
38
|
+
ref: forwardedRef,
|
|
39
|
+
transition: !isWeb && !context.width ? null : transition
|
|
40
|
+
});
|
|
59
41
|
});
|
|
60
42
|
function defaultGetValueLabel(value, max) {
|
|
61
|
-
|
|
43
|
+
return `${Math.round(value / max * 100)}%`;
|
|
62
44
|
}
|
|
63
45
|
function getProgressState(value, maxValue) {
|
|
64
|
-
|
|
46
|
+
return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
|
|
65
47
|
}
|
|
66
48
|
function isNumber(value) {
|
|
67
|
-
|
|
49
|
+
return typeof value === "number";
|
|
68
50
|
}
|
|
69
51
|
function isValidMaxNumber(max) {
|
|
70
|
-
|
|
52
|
+
return isNumber(max) && !Number.isNaN(max) && max > 0;
|
|
71
53
|
}
|
|
72
54
|
function isValidValueNumber(value, max) {
|
|
73
|
-
|
|
55
|
+
return isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;
|
|
74
56
|
}
|
|
75
57
|
const DEFAULT_MAX = 100;
|
|
76
58
|
const ProgressFrame = styled(YStack, {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
"...size": val => {
|
|
88
|
-
const size = Math.round(getVariableValue(getSize(val)) * 0.25);
|
|
89
|
-
return {
|
|
90
|
-
height: size,
|
|
91
|
-
minWidth: getVariableValue(size) * 20,
|
|
92
|
-
width: "100%"
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
},
|
|
97
|
-
defaultVariants: {
|
|
98
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
99
|
-
}
|
|
100
|
-
});
|
|
101
|
-
const Progress = withStaticProperties(ProgressFrame.styleable(function Progress2(props, forwardedRef) {
|
|
102
|
-
const {
|
|
103
|
-
// @ts-expect-error
|
|
104
|
-
__scopeProgress,
|
|
105
|
-
value: valueProp,
|
|
106
|
-
max: maxProp,
|
|
107
|
-
getValueLabel = defaultGetValueLabel,
|
|
108
|
-
size = "$true",
|
|
109
|
-
...progressProps
|
|
110
|
-
} = props;
|
|
111
|
-
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
112
|
-
const value = isValidValueNumber(valueProp, max) ? Math.round(valueProp) : null;
|
|
113
|
-
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
114
|
-
const [width, setWidth] = useState(0);
|
|
115
|
-
return /* @__PURE__ */jsx(ProgressProvider, {
|
|
116
|
-
scope: __scopeProgress,
|
|
117
|
-
value,
|
|
118
|
-
max,
|
|
119
|
-
width,
|
|
120
|
-
children: /* @__PURE__ */jsx(ProgressFrame, {
|
|
121
|
-
"aria-valuemax": max,
|
|
122
|
-
"aria-valuemin": 0,
|
|
123
|
-
"aria-valuenow": isNumber(value) ? value : void 0,
|
|
124
|
-
"aria-valuetext": valueLabel,
|
|
125
|
-
role: "progressbar",
|
|
126
|
-
"data-state": getProgressState(value, max),
|
|
127
|
-
"data-value": value ?? void 0,
|
|
128
|
-
"data-max": max,
|
|
129
|
-
...(progressProps.unstyled !== true && {
|
|
130
|
-
size
|
|
131
|
-
}),
|
|
132
|
-
...progressProps,
|
|
133
|
-
...(!isWeb && {
|
|
134
|
-
onLayout: e => {
|
|
135
|
-
const newWidth = Math.round(e.nativeEvent.layout.width);
|
|
136
|
-
if (newWidth !== width) {
|
|
137
|
-
setWidth(newWidth);
|
|
138
|
-
}
|
|
139
|
-
progressProps.onLayout?.(e);
|
|
140
|
-
}
|
|
141
|
-
}),
|
|
142
|
-
ref: forwardedRef
|
|
143
|
-
})
|
|
144
|
-
});
|
|
145
|
-
}), {
|
|
146
|
-
Indicator: ProgressIndicator
|
|
59
|
+
displayName: "Progress",
|
|
60
|
+
overflow: "hidden",
|
|
61
|
+
variants: { size: { Size: (val) => {
|
|
62
|
+
const size = Math.round(getVariableValue(getSize(val)) * .25);
|
|
63
|
+
return {
|
|
64
|
+
height: size,
|
|
65
|
+
minWidth: getVariableValue(size) * 20,
|
|
66
|
+
width: "100%"
|
|
67
|
+
};
|
|
68
|
+
} } }
|
|
147
69
|
});
|
|
70
|
+
const Progress = withStaticProperties(createStyledHOC(ProgressFrame, function Progress2(props, forwardedRef) {
|
|
71
|
+
const { __scopeProgress, value: valueProp, max: maxProp, getValueLabel = defaultGetValueLabel, size = true, ...progressProps } = props;
|
|
72
|
+
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
73
|
+
const value = isValidValueNumber(valueProp, max) ? Math.round(valueProp) : null;
|
|
74
|
+
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
75
|
+
const [width, setWidth] = useState(0);
|
|
76
|
+
return /* @__PURE__ */ jsx(ProgressProvider, {
|
|
77
|
+
scope: __scopeProgress,
|
|
78
|
+
value,
|
|
79
|
+
max,
|
|
80
|
+
width,
|
|
81
|
+
children: /* @__PURE__ */ jsx(ProgressFrame, {
|
|
82
|
+
"aria-valuemax": max,
|
|
83
|
+
"aria-valuemin": 0,
|
|
84
|
+
"aria-valuenow": isNumber(value) ? value : void 0,
|
|
85
|
+
"aria-valuetext": valueLabel,
|
|
86
|
+
role: "progressbar",
|
|
87
|
+
"data-state": getProgressState(value, max),
|
|
88
|
+
"data-value": value ?? void 0,
|
|
89
|
+
"data-max": max,
|
|
90
|
+
size,
|
|
91
|
+
...progressProps,
|
|
92
|
+
...!isWeb && { onLayout: (e) => {
|
|
93
|
+
const newWidth = Math.round(e.nativeEvent.layout.width);
|
|
94
|
+
if (newWidth !== width) {
|
|
95
|
+
setWidth(newWidth);
|
|
96
|
+
}
|
|
97
|
+
progressProps.onLayout?.(e);
|
|
98
|
+
} },
|
|
99
|
+
ref: forwardedRef
|
|
100
|
+
})
|
|
101
|
+
});
|
|
102
|
+
}), { Indicator: ProgressIndicator });
|
|
103
|
+
|
|
148
104
|
export { Progress, ProgressFrame, ProgressIndicator, ProgressIndicatorFrame, createProgressScope };
|
|
149
105
|
//# sourceMappingURL=Progress.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"file":"Progress.js","names":[],"sources":["esm/Progress.js"],"sourcesContent":["import { createStyledHOC, getVariableValue, isWeb, styled } from \"@tamagui/core\";\nimport { createContextScope } from \"@tamagui/create-context\";\nimport { getSize } from \"@tamagui/get-token\";\nimport { withStaticProperties } from \"@tamagui/helpers\";\nimport { YStack } from \"@tamagui/stacks\";\nimport { useState } from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nconst PROGRESS_NAME = \"Progress\";\nconst [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME);\nconst [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);\nconst INDICATOR_NAME = \"ProgressIndicator\";\nconst ProgressIndicatorFrame = styled(YStack, {\n displayName: INDICATOR_NAME,\n height: \"100%\",\n width: \"100%\"\n});\nconst ProgressIndicator = createStyledHOC(\n ProgressIndicatorFrame,\n function ProgressIndicator2(props, forwardedRef) {\n const { __scopeProgress, transition, ...indicatorProps } = props;\n const context = useProgressContext(INDICATOR_NAME, __scopeProgress);\n const progressRatio = (context.value ?? 0) / context.max;\n let x;\n if (isWeb) {\n x = `${-100 + progressRatio * 50}%`;\n } else {\n const baseWidth = context.width || 0;\n x = Math.ceil(-baseWidth * (2 - progressRatio));\n }\n return /* @__PURE__ */ jsx(\n ProgressIndicatorFrame,\n {\n \"data-state\": getProgressState(context.value, context.max),\n \"data-value\": context.value ?? void 0,\n \"data-max\": context.max,\n x,\n width: \"200%\",\n animateOnly: [\"transform\"],\n ...!isWeb && context.width === 0 && { opacity: 0 },\n ...indicatorProps,\n ref: forwardedRef,\n transition: !isWeb && !context.width ? null : transition\n }\n );\n }\n);\nfunction defaultGetValueLabel(value, max) {\n return `${Math.round(value / max * 100)}%`;\n}\nfunction getProgressState(value, maxValue) {\n return value == null ? \"indeterminate\" : value === maxValue ? \"complete\" : \"loading\";\n}\nfunction isNumber(value) {\n return typeof value === \"number\";\n}\nfunction isValidMaxNumber(max) {\n return isNumber(max) && !Number.isNaN(max) && max > 0;\n}\nfunction isValidValueNumber(value, max) {\n return isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\nconst DEFAULT_MAX = 100;\nconst ProgressFrame = styled(YStack, {\n displayName: \"Progress\",\n overflow: \"hidden\",\n variants: {\n size: {\n Size: (val) => {\n const size = Math.round(getVariableValue(getSize(val)) * 0.25);\n return {\n height: size,\n minWidth: getVariableValue(size) * 20,\n width: \"100%\"\n };\n }\n }\n }\n});\nconst Progress = withStaticProperties(\n createStyledHOC(ProgressFrame, function Progress2(props, forwardedRef) {\n const {\n // @ts-expect-error\n __scopeProgress,\n value: valueProp,\n max: maxProp,\n getValueLabel = defaultGetValueLabel,\n size = true,\n ...progressProps\n } = props;\n const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;\n const value = isValidValueNumber(valueProp, max) ? Math.round(valueProp) : null;\n const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;\n const [width, setWidth] = useState(0);\n return /* @__PURE__ */ jsx(ProgressProvider, { scope: __scopeProgress, value, max, width, children: /* @__PURE__ */ jsx(\n ProgressFrame,\n {\n \"aria-valuemax\": max,\n \"aria-valuemin\": 0,\n \"aria-valuenow\": isNumber(value) ? value : void 0,\n \"aria-valuetext\": valueLabel,\n role: \"progressbar\",\n \"data-state\": getProgressState(value, max),\n \"data-value\": value ?? void 0,\n \"data-max\": max,\n size,\n ...progressProps,\n ...!isWeb && {\n onLayout: (e) => {\n const newWidth = Math.round(e.nativeEvent.layout.width);\n if (newWidth !== width) {\n setWidth(newWidth);\n }\n progressProps.onLayout?.(e);\n }\n },\n ref: forwardedRef\n }\n ) });\n }),\n {\n Indicator: ProgressIndicator\n }\n);\nexport {\n Progress,\n ProgressFrame,\n ProgressIndicator,\n ProgressIndicatorFrame,\n createProgressScope\n};\n//# sourceMappingURL=Progress.js.map\n"],"mappings":"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"}
|
|
@@ -1,153 +1,108 @@
|
|
|
1
|
-
import { jsx
|
|
2
|
-
import { getVariableValue, isWeb, styled } from "@tamagui/core";
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createStyledHOC, getVariableValue, isWeb, styled } from "@tamagui/core";
|
|
3
3
|
import { createContextScope } from "@tamagui/create-context";
|
|
4
4
|
import { getSize } from "@tamagui/get-token";
|
|
5
5
|
import { withStaticProperties } from "@tamagui/helpers";
|
|
6
6
|
import { YStack } from "@tamagui/stacks";
|
|
7
7
|
import { useState } from "react";
|
|
8
|
+
|
|
8
9
|
var PROGRESS_NAME = "Progress";
|
|
9
10
|
var [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME);
|
|
10
11
|
var [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);
|
|
11
12
|
var INDICATOR_NAME = "ProgressIndicator";
|
|
12
13
|
var ProgressIndicatorFrame = styled(YStack, {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
false: {
|
|
17
|
-
height: "100%",
|
|
18
|
-
width: "100%",
|
|
19
|
-
backgroundColor: "$background"
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
defaultVariants: {
|
|
24
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
25
|
-
}
|
|
14
|
+
displayName: INDICATOR_NAME,
|
|
15
|
+
height: "100%",
|
|
16
|
+
width: "100%"
|
|
26
17
|
});
|
|
27
|
-
var ProgressIndicator = ProgressIndicatorFrame
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
// on native, hide until we have width measurement
|
|
53
|
-
...(!isWeb && context.width === 0 && {
|
|
54
|
-
opacity: 0
|
|
55
|
-
})
|
|
56
|
-
}),
|
|
57
|
-
...indicatorProps,
|
|
58
|
-
ref: forwardedRef,
|
|
59
|
-
transition: !isWeb && !context.width ? null : transition
|
|
60
|
-
});
|
|
18
|
+
var ProgressIndicator = createStyledHOC(ProgressIndicatorFrame, function ProgressIndicator2(props, forwardedRef) {
|
|
19
|
+
var { __scopeProgress, transition, ...indicatorProps } = props;
|
|
20
|
+
var context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
|
21
|
+
var _context_value;
|
|
22
|
+
var progressRatio = ((_context_value = context.value) !== null && _context_value !== void 0 ? _context_value : 0) / context.max;
|
|
23
|
+
var x;
|
|
24
|
+
if (isWeb) {
|
|
25
|
+
x = `${-100 + progressRatio * 50}%`;
|
|
26
|
+
} else {
|
|
27
|
+
var baseWidth = context.width || 0;
|
|
28
|
+
x = Math.ceil(-baseWidth * (2 - progressRatio));
|
|
29
|
+
}
|
|
30
|
+
var _context_value1;
|
|
31
|
+
return /* @__PURE__ */ jsx(ProgressIndicatorFrame, {
|
|
32
|
+
"data-state": getProgressState(context.value, context.max),
|
|
33
|
+
"data-value": (_context_value1 = context.value) !== null && _context_value1 !== void 0 ? _context_value1 : void 0,
|
|
34
|
+
"data-max": context.max,
|
|
35
|
+
x,
|
|
36
|
+
width: "200%",
|
|
37
|
+
animateOnly: ["transform"],
|
|
38
|
+
...!isWeb && context.width === 0 && { opacity: 0 },
|
|
39
|
+
...indicatorProps,
|
|
40
|
+
ref: forwardedRef,
|
|
41
|
+
transition: !isWeb && !context.width ? null : transition
|
|
42
|
+
});
|
|
61
43
|
});
|
|
62
44
|
function defaultGetValueLabel(value, max) {
|
|
63
|
-
|
|
45
|
+
return `${Math.round(value / max * 100)}%`;
|
|
64
46
|
}
|
|
65
47
|
function getProgressState(value, maxValue) {
|
|
66
|
-
|
|
48
|
+
return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
|
|
67
49
|
}
|
|
68
50
|
function isNumber(value) {
|
|
69
|
-
|
|
51
|
+
return typeof value === "number";
|
|
70
52
|
}
|
|
71
53
|
function isValidMaxNumber(max) {
|
|
72
|
-
|
|
54
|
+
return isNumber(max) && !Number.isNaN(max) && max > 0;
|
|
73
55
|
}
|
|
74
56
|
function isValidValueNumber(value, max) {
|
|
75
|
-
|
|
57
|
+
return isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;
|
|
76
58
|
}
|
|
77
59
|
var DEFAULT_MAX = 100;
|
|
78
60
|
var ProgressFrame = styled(YStack, {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
"...size": function (val) {
|
|
90
|
-
var size = Math.round(getVariableValue(getSize(val)) * 0.25);
|
|
91
|
-
return {
|
|
92
|
-
height: size,
|
|
93
|
-
minWidth: getVariableValue(size) * 20,
|
|
94
|
-
width: "100%"
|
|
95
|
-
};
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
|
-
defaultVariants: {
|
|
100
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
101
|
-
}
|
|
102
|
-
});
|
|
103
|
-
var Progress = withStaticProperties(ProgressFrame.styleable(function Progress2(props, forwardedRef) {
|
|
104
|
-
var {
|
|
105
|
-
// @ts-expect-error
|
|
106
|
-
__scopeProgress,
|
|
107
|
-
value: valueProp,
|
|
108
|
-
max: maxProp,
|
|
109
|
-
getValueLabel = defaultGetValueLabel,
|
|
110
|
-
size = "$true",
|
|
111
|
-
...progressProps
|
|
112
|
-
} = props;
|
|
113
|
-
var max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
114
|
-
var value = isValidValueNumber(valueProp, max) ? Math.round(valueProp) : null;
|
|
115
|
-
var valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
116
|
-
var [width, setWidth] = useState(0);
|
|
117
|
-
return /* @__PURE__ */_jsx(ProgressProvider, {
|
|
118
|
-
scope: __scopeProgress,
|
|
119
|
-
value,
|
|
120
|
-
max,
|
|
121
|
-
width,
|
|
122
|
-
children: /* @__PURE__ */_jsx(ProgressFrame, {
|
|
123
|
-
"aria-valuemax": max,
|
|
124
|
-
"aria-valuemin": 0,
|
|
125
|
-
"aria-valuenow": isNumber(value) ? value : void 0,
|
|
126
|
-
"aria-valuetext": valueLabel,
|
|
127
|
-
// @ts-ignore
|
|
128
|
-
role: "progressbar",
|
|
129
|
-
"data-state": getProgressState(value, max),
|
|
130
|
-
"data-value": value !== null && value !== void 0 ? value : void 0,
|
|
131
|
-
"data-max": max,
|
|
132
|
-
...(progressProps.unstyled !== true && {
|
|
133
|
-
size
|
|
134
|
-
}),
|
|
135
|
-
...progressProps,
|
|
136
|
-
...(!isWeb && {
|
|
137
|
-
onLayout: function (e) {
|
|
138
|
-
var _progressProps_onLayout;
|
|
139
|
-
var newWidth = Math.round(e.nativeEvent.layout.width);
|
|
140
|
-
if (newWidth !== width) {
|
|
141
|
-
setWidth(newWidth);
|
|
142
|
-
}
|
|
143
|
-
(_progressProps_onLayout = progressProps.onLayout) === null || _progressProps_onLayout === void 0 ? void 0 : _progressProps_onLayout.call(progressProps, e);
|
|
144
|
-
}
|
|
145
|
-
}),
|
|
146
|
-
ref: forwardedRef
|
|
147
|
-
})
|
|
148
|
-
});
|
|
149
|
-
}), {
|
|
150
|
-
Indicator: ProgressIndicator
|
|
61
|
+
displayName: "Progress",
|
|
62
|
+
overflow: "hidden",
|
|
63
|
+
variants: { size: { Size: function(val) {
|
|
64
|
+
var size = Math.round(getVariableValue(getSize(val)) * .25);
|
|
65
|
+
return {
|
|
66
|
+
height: size,
|
|
67
|
+
minWidth: getVariableValue(size) * 20,
|
|
68
|
+
width: "100%"
|
|
69
|
+
};
|
|
70
|
+
} } }
|
|
151
71
|
});
|
|
72
|
+
var Progress = withStaticProperties(createStyledHOC(ProgressFrame, function Progress2(props, forwardedRef) {
|
|
73
|
+
var { __scopeProgress, value: valueProp, max: maxProp, getValueLabel = defaultGetValueLabel, size = true, ...progressProps } = props;
|
|
74
|
+
var max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
75
|
+
var value = isValidValueNumber(valueProp, max) ? Math.round(valueProp) : null;
|
|
76
|
+
var valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
77
|
+
var [width, setWidth] = useState(0);
|
|
78
|
+
return /* @__PURE__ */ jsx(ProgressProvider, {
|
|
79
|
+
scope: __scopeProgress,
|
|
80
|
+
value,
|
|
81
|
+
max,
|
|
82
|
+
width,
|
|
83
|
+
children: /* @__PURE__ */ jsx(ProgressFrame, {
|
|
84
|
+
"aria-valuemax": max,
|
|
85
|
+
"aria-valuemin": 0,
|
|
86
|
+
"aria-valuenow": isNumber(value) ? value : void 0,
|
|
87
|
+
"aria-valuetext": valueLabel,
|
|
88
|
+
role: "progressbar",
|
|
89
|
+
"data-state": getProgressState(value, max),
|
|
90
|
+
"data-value": value !== null && value !== void 0 ? value : void 0,
|
|
91
|
+
"data-max": max,
|
|
92
|
+
size,
|
|
93
|
+
...progressProps,
|
|
94
|
+
...!isWeb && { onLayout: function(e) {
|
|
95
|
+
var _progressProps_onLayout;
|
|
96
|
+
var newWidth = Math.round(e.nativeEvent.layout.width);
|
|
97
|
+
if (newWidth !== width) {
|
|
98
|
+
setWidth(newWidth);
|
|
99
|
+
}
|
|
100
|
+
(_progressProps_onLayout = progressProps.onLayout) === null || _progressProps_onLayout === void 0 ? void 0 : _progressProps_onLayout.call(progressProps, e);
|
|
101
|
+
} },
|
|
102
|
+
ref: forwardedRef
|
|
103
|
+
})
|
|
104
|
+
});
|
|
105
|
+
}), { Indicator: ProgressIndicator });
|
|
106
|
+
|
|
152
107
|
export { Progress, ProgressFrame, ProgressIndicator, ProgressIndicatorFrame, createProgressScope };
|
|
153
108
|
//# sourceMappingURL=Progress.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"file":"Progress.native.js","names":[],"sources":["esm/Progress.native.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { createStyledHOC, getVariableValue, isWeb, styled } from \"@tamagui/core\";\nimport { createContextScope } from \"@tamagui/create-context\";\nimport { getSize } from \"@tamagui/get-token\";\nimport { withStaticProperties } from \"@tamagui/helpers\";\nimport { YStack } from \"@tamagui/stacks\";\nimport { useState } from \"react\";\nvar PROGRESS_NAME = \"Progress\";\nvar [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME);\nvar [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);\nvar INDICATOR_NAME = \"ProgressIndicator\";\nvar ProgressIndicatorFrame = styled(YStack, {\n displayName: INDICATOR_NAME,\n height: \"100%\",\n width: \"100%\"\n});\nvar ProgressIndicator = createStyledHOC(ProgressIndicatorFrame, function ProgressIndicator2(props, forwardedRef) {\n var { __scopeProgress, transition, ...indicatorProps } = props;\n var context = useProgressContext(INDICATOR_NAME, __scopeProgress);\n var _context_value;\n var progressRatio = ((_context_value = context.value) !== null && _context_value !== void 0 ? _context_value : 0) / context.max;\n var x;\n if (isWeb) {\n x = `${-100 + progressRatio * 50}%`;\n } else {\n var baseWidth = context.width || 0;\n x = Math.ceil(-baseWidth * (2 - progressRatio));\n }\n var _context_value1;\n return /* @__PURE__ */ _jsx(ProgressIndicatorFrame, {\n \"data-state\": getProgressState(context.value, context.max),\n \"data-value\": (_context_value1 = context.value) !== null && _context_value1 !== void 0 ? _context_value1 : void 0,\n \"data-max\": context.max,\n x,\n width: \"200%\",\n animateOnly: [\n \"transform\"\n ],\n ...!isWeb && context.width === 0 && {\n opacity: 0\n },\n ...indicatorProps,\n ref: forwardedRef,\n transition: !isWeb && !context.width ? null : transition\n });\n});\nfunction defaultGetValueLabel(value, max) {\n return `${Math.round(value / max * 100)}%`;\n}\nfunction getProgressState(value, maxValue) {\n return value == null ? \"indeterminate\" : value === maxValue ? \"complete\" : \"loading\";\n}\nfunction isNumber(value) {\n return typeof value === \"number\";\n}\nfunction isValidMaxNumber(max) {\n return isNumber(max) && !Number.isNaN(max) && max > 0;\n}\nfunction isValidValueNumber(value, max) {\n return isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\nvar DEFAULT_MAX = 100;\nvar ProgressFrame = styled(YStack, {\n displayName: \"Progress\",\n overflow: \"hidden\",\n variants: {\n size: {\n Size: function(val) {\n var size = Math.round(getVariableValue(getSize(val)) * 0.25);\n return {\n height: size,\n minWidth: getVariableValue(size) * 20,\n width: \"100%\"\n };\n }\n }\n }\n});\nvar Progress = withStaticProperties(createStyledHOC(ProgressFrame, function Progress2(props, forwardedRef) {\n var {\n // @ts-expect-error\n __scopeProgress,\n value: valueProp,\n max: maxProp,\n getValueLabel = defaultGetValueLabel,\n size = true,\n ...progressProps\n } = props;\n var max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;\n var value = isValidValueNumber(valueProp, max) ? Math.round(valueProp) : null;\n var valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;\n var [width, setWidth] = useState(0);\n return /* @__PURE__ */ _jsx(ProgressProvider, {\n scope: __scopeProgress,\n value,\n max,\n width,\n children: /* @__PURE__ */ _jsx(ProgressFrame, {\n \"aria-valuemax\": max,\n \"aria-valuemin\": 0,\n \"aria-valuenow\": isNumber(value) ? value : void 0,\n \"aria-valuetext\": valueLabel,\n // @ts-ignore\n role: \"progressbar\",\n \"data-state\": getProgressState(value, max),\n \"data-value\": value !== null && value !== void 0 ? value : void 0,\n \"data-max\": max,\n size,\n ...progressProps,\n ...!isWeb && {\n onLayout: function(e) {\n var _progressProps_onLayout;\n var newWidth = Math.round(e.nativeEvent.layout.width);\n if (newWidth !== width) {\n setWidth(newWidth);\n }\n (_progressProps_onLayout = progressProps.onLayout) === null || _progressProps_onLayout === void 0 ? void 0 : _progressProps_onLayout.call(progressProps, e);\n }\n },\n ref: forwardedRef\n })\n });\n}), {\n Indicator: ProgressIndicator\n});\nexport {\n Progress,\n ProgressFrame,\n ProgressIndicator,\n ProgressIndicatorFrame,\n createProgressScope\n};\n//# sourceMappingURL=Progress.js.map\n"],"mappings":"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"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export * from "./Progress.mjs"
|
|
2
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
export * from "./Progress.mjs"
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export * from "./Progress.mjs"
|
|
2
|
-
//# sourceMappingURL=index.mjs.map
|
|
1
|
+
export * from "./Progress.mjs"
|
package/dist/esm/index.native.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export * from "./Progress.native.js"
|
|
2
|
-
//# sourceMappingURL=index.native.js.map
|
|
1
|
+
export * from "./Progress.native.js"
|