@tamagui/progress 1.0.1-beta.151 → 1.0.1-beta.154
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.js +71 -55
- package/dist/cjs/Progress.js.map +1 -1
- package/dist/esm/Progress.js +67 -54
- package/dist/esm/Progress.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/jsx/Progress.js +38 -27
- package/dist/jsx/Progress.js.map +1 -1
- package/dist/jsx/index.js.map +1 -1
- package/package.json +6 -6
package/dist/cjs/Progress.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var Progress_exports = {};
|
|
23
26
|
__export(Progress_exports, {
|
|
@@ -28,6 +31,7 @@ __export(Progress_exports, {
|
|
|
28
31
|
createProgressScope: () => createProgressScope
|
|
29
32
|
});
|
|
30
33
|
module.exports = __toCommonJS(Progress_exports);
|
|
34
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
31
35
|
var import_core = require("@tamagui/core");
|
|
32
36
|
var import_create_context = require("@tamagui/create-context");
|
|
33
37
|
var import_stacks = require("@tamagui/stacks");
|
|
@@ -42,21 +46,25 @@ const ProgressIndicatorFrame = (0, import_core.styled)(import_stacks.ThemeableSt
|
|
|
42
46
|
width: "100%",
|
|
43
47
|
backgrounded: true
|
|
44
48
|
});
|
|
45
|
-
const ProgressIndicator = ProgressIndicatorFrame.extractable(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
49
|
+
const ProgressIndicator = ProgressIndicatorFrame.extractable(
|
|
50
|
+
React.forwardRef(
|
|
51
|
+
(props, forwardedRef) => {
|
|
52
|
+
const { __scopeProgress, ...indicatorProps } = props;
|
|
53
|
+
const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
|
54
|
+
const pct = context.max - (context.value ?? 0);
|
|
55
|
+
const x = -context.width * (pct / 100);
|
|
56
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressIndicatorFrame, {
|
|
57
|
+
"data-state": getProgressState(context.value, context.max),
|
|
58
|
+
"data-value": context.value ?? void 0,
|
|
59
|
+
"data-max": context.max,
|
|
60
|
+
x,
|
|
61
|
+
width: context.width,
|
|
62
|
+
...indicatorProps,
|
|
63
|
+
ref: forwardedRef
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
)
|
|
67
|
+
);
|
|
60
68
|
ProgressIndicator.displayName = INDICATOR_NAME;
|
|
61
69
|
function defaultGetValueLabel(value, max) {
|
|
62
70
|
return `${Math.round(value / max * 100)}%`;
|
|
@@ -103,45 +111,53 @@ const ProgressFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
|
103
111
|
}
|
|
104
112
|
}
|
|
105
113
|
});
|
|
106
|
-
const Progress = (0, import_core.withStaticProperties)(
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
})
|
|
114
|
+
const Progress = (0, import_core.withStaticProperties)(
|
|
115
|
+
ProgressFrame.extractable(
|
|
116
|
+
React.forwardRef(
|
|
117
|
+
(props, forwardedRef) => {
|
|
118
|
+
const {
|
|
119
|
+
__scopeProgress,
|
|
120
|
+
value: valueProp,
|
|
121
|
+
max: maxProp,
|
|
122
|
+
getValueLabel = defaultGetValueLabel,
|
|
123
|
+
size = "$4",
|
|
124
|
+
...progressProps
|
|
125
|
+
} = props;
|
|
126
|
+
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
127
|
+
const value = isValidValueNumber(valueProp, max) ? valueProp : null;
|
|
128
|
+
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
129
|
+
const [width, setWidth] = React.useState(0);
|
|
130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressProvider, {
|
|
131
|
+
scope: __scopeProgress,
|
|
132
|
+
value,
|
|
133
|
+
max,
|
|
134
|
+
width,
|
|
135
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressFrame, {
|
|
136
|
+
size,
|
|
137
|
+
"aria-valuemax": max,
|
|
138
|
+
"aria-valuemin": 0,
|
|
139
|
+
"aria-valuenow": isNumber(value) ? value : void 0,
|
|
140
|
+
"aria-valuetext": valueLabel,
|
|
141
|
+
role: "progressbar",
|
|
142
|
+
"data-state": getProgressState(value, max),
|
|
143
|
+
"data-value": value ?? void 0,
|
|
144
|
+
"data-max": max,
|
|
145
|
+
...progressProps,
|
|
146
|
+
onLayout: (e) => {
|
|
147
|
+
var _a;
|
|
148
|
+
setWidth(e.nativeEvent.layout.width);
|
|
149
|
+
(_a = progressProps.onLayout) == null ? void 0 : _a.call(progressProps, e);
|
|
150
|
+
},
|
|
151
|
+
ref: forwardedRef
|
|
152
|
+
})
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
)
|
|
156
|
+
),
|
|
157
|
+
{
|
|
158
|
+
Indicator: ProgressIndicator
|
|
159
|
+
}
|
|
160
|
+
);
|
|
145
161
|
Progress.displayName = PROGRESS_NAME;
|
|
146
162
|
Progress.propTypes = {
|
|
147
163
|
max(props, propName, componentName) {
|
package/dist/cjs/Progress.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Progress.tsx"],
|
|
4
4
|
"sourcesContent": ["// forked from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/react/progress/src/Progress.tsx\n\nimport { GetProps, getSize, getVariableValue, styled, withStaticProperties } from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst PROGRESS_NAME = 'Progress'\n\nconst [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME)\ntype ProgressContextValue = { value: number | null; max: number; width: number }\nconst [ProgressProvider, useProgressContext] =\n createProgressContext<ProgressContextValue>(PROGRESS_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * ProgressIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'ProgressIndicator'\n\ntype ProgressIndicatorElement = TamaguiElement\ninterface ProgressIndicatorProps extends YStackProps {}\n\nexport const ProgressIndicatorFrame = styled(ThemeableStack, {\n name: INDICATOR_NAME,\n height: '100%',\n width: '100%',\n backgrounded: true,\n})\n\nconst ProgressIndicator = ProgressIndicatorFrame.extractable(\n React.forwardRef<ProgressIndicatorElement, ProgressIndicatorProps>(\n (props: ScopedProps<ProgressIndicatorProps>, forwardedRef) => {\n const { __scopeProgress, ...indicatorProps } = props\n const context = useProgressContext(INDICATOR_NAME, __scopeProgress)\n const pct = context.max - (context.value ?? 0)\n const x = -context.width * (pct / 100)\n return (\n <ProgressIndicatorFrame\n data-state={getProgressState(context.value, context.max)}\n data-value={context.value ?? undefined}\n data-max={context.max}\n x={x}\n width={context.width}\n {...indicatorProps}\n ref={forwardedRef}\n />\n )\n }\n )\n)\n\nProgressIndicator.displayName = INDICATOR_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction defaultGetValueLabel(value: number, max: number) {\n return `${Math.round((value / max) * 100)}%`\n}\n\nfunction getProgressState(value: number | undefined | null, maxValue: number): ProgressState {\n return value == null ? 'indeterminate' : value === maxValue ? 'complete' : 'loading'\n}\n\nfunction isNumber(value: any): value is number {\n return typeof value === 'number'\n}\n\nfunction isValidMaxNumber(max: any): max is number {\n // prettier-ignore\n return (\n isNumber(max) &&\n !isNaN(max) &&\n max > 0\n );\n}\n\nfunction isValidValueNumber(value: any, max: number): value is number {\n // prettier-ignore\n return (\n isNumber(value) &&\n !isNaN(value) &&\n value <= max &&\n value >= 0\n );\n}\n\n// Split this out for clearer readability of the error message.\nfunction getInvalidMaxError(propValue: string, componentName: string) {\n return `Invalid prop \\`max\\` of value \\`${propValue}\\` supplied to \\`${componentName}\\`. Only numbers greater than 0 are valid max values. Defaulting to \\`${DEFAULT_MAX}\\`.`\n}\n\nfunction getInvalidValueError(propValue: string, componentName: string) {\n return `Invalid prop \\`value\\` of value \\`${propValue}\\` supplied to \\`${componentName}\\`. The \\`value\\` prop must be:\n - a positive number\n - less than the value passed to \\`max\\` (or ${DEFAULT_MAX} if no \\`max\\` prop is set)\n - \\`null\\` if the progress is indeterminate.\n\nDefaulting to \\`null\\`.`\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Progress\n * -----------------------------------------------------------------------------------------------*/\n\nconst DEFAULT_MAX = 100\n\ntype ScopedProps<P> = P & { __scopeProgress?: Scope }\n\ntype ProgressState = 'indeterminate' | 'complete' | 'loading'\n\ntype TamaguiElement = HTMLElement | View\n\ntype ProgressElement = TamaguiElement\n\nexport const ProgressFrame = styled(ThemeableStack, {\n name: PROGRESS_NAME,\n borderRadius: 100_000,\n overflow: 'hidden',\n backgrounded: true,\n\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})\n\ntype ProgressProps = GetProps<typeof ProgressFrame> & {\n value?: number | null | undefined\n max?: number\n getValueLabel?(value: number, max: number): string\n}\n\nconst Progress = withStaticProperties(\n ProgressFrame.extractable(\n React.forwardRef<ProgressElement, ProgressProps>(\n (props: ScopedProps<ProgressProps>, forwardedRef) => {\n const {\n __scopeProgress,\n value: valueProp,\n max: maxProp,\n getValueLabel = defaultGetValueLabel,\n size = '$4',\n ...progressProps\n } = props\n\n const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX\n const value = isValidValueNumber(valueProp, max) ? valueProp : null\n const valueLabel = isNumber(value) ? getValueLabel(value, max) : undefined\n const [width, setWidth] = React.useState(0)\n\n return (\n <ProgressProvider scope={__scopeProgress} value={value} max={max} width={width}>\n <ProgressFrame\n size={size}\n aria-valuemax={max}\n aria-valuemin={0}\n aria-valuenow={isNumber(value) ? value : undefined}\n aria-valuetext={valueLabel}\n // @ts-ignore\n role=\"progressbar\"\n data-state={getProgressState(value, max)}\n data-value={value ?? undefined}\n data-max={max}\n {...progressProps}\n onLayout={(e) => {\n setWidth(e.nativeEvent.layout.width)\n progressProps.onLayout?.(e)\n }}\n ref={forwardedRef}\n />\n </ProgressProvider>\n )\n }\n )\n ),\n {\n Indicator: ProgressIndicator,\n }\n)\n\nProgress.displayName = PROGRESS_NAME\n\nProgress.propTypes = {\n max(props, propName, componentName) {\n const propValue = props[propName]\n const strVal = String(propValue)\n if (propValue && !isValidMaxNumber(propValue)) {\n return new Error(getInvalidMaxError(strVal, componentName))\n }\n return null\n },\n value(props, propName, componentName) {\n const valueProp = props[propName]\n const strVal = String(valueProp)\n const max = isValidMaxNumber(props.max) ? props.max : DEFAULT_MAX\n if (valueProp != null && !isValidValueNumber(valueProp, max)) {\n return new Error(getInvalidValueError(strVal, componentName))\n }\n return null\n },\n}\n\nexport { createProgressScope, Progress, ProgressIndicator }\nexport type { ProgressProps, ProgressIndicatorProps }\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Progress.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
1
2
|
import { getSize, getVariableValue, styled, withStaticProperties } from "@tamagui/core";
|
|
2
3
|
import { createContextScope } from "@tamagui/create-context";
|
|
3
4
|
import { ThemeableStack } from "@tamagui/stacks";
|
|
@@ -12,21 +13,25 @@ const ProgressIndicatorFrame = styled(ThemeableStack, {
|
|
|
12
13
|
width: "100%",
|
|
13
14
|
backgrounded: true
|
|
14
15
|
});
|
|
15
|
-
const ProgressIndicator = ProgressIndicatorFrame.extractable(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
16
|
+
const ProgressIndicator = ProgressIndicatorFrame.extractable(
|
|
17
|
+
React.forwardRef(
|
|
18
|
+
(props, forwardedRef) => {
|
|
19
|
+
const { __scopeProgress, ...indicatorProps } = props;
|
|
20
|
+
const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
|
21
|
+
const pct = context.max - (context.value ?? 0);
|
|
22
|
+
const x = -context.width * (pct / 100);
|
|
23
|
+
return /* @__PURE__ */ jsx(ProgressIndicatorFrame, {
|
|
24
|
+
"data-state": getProgressState(context.value, context.max),
|
|
25
|
+
"data-value": context.value ?? void 0,
|
|
26
|
+
"data-max": context.max,
|
|
27
|
+
x,
|
|
28
|
+
width: context.width,
|
|
29
|
+
...indicatorProps,
|
|
30
|
+
ref: forwardedRef
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
)
|
|
34
|
+
);
|
|
30
35
|
ProgressIndicator.displayName = INDICATOR_NAME;
|
|
31
36
|
function defaultGetValueLabel(value, max) {
|
|
32
37
|
return `${Math.round(value / max * 100)}%`;
|
|
@@ -73,45 +78,53 @@ const ProgressFrame = styled(ThemeableStack, {
|
|
|
73
78
|
}
|
|
74
79
|
}
|
|
75
80
|
});
|
|
76
|
-
const Progress = withStaticProperties(
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
})
|
|
81
|
+
const Progress = withStaticProperties(
|
|
82
|
+
ProgressFrame.extractable(
|
|
83
|
+
React.forwardRef(
|
|
84
|
+
(props, forwardedRef) => {
|
|
85
|
+
const {
|
|
86
|
+
__scopeProgress,
|
|
87
|
+
value: valueProp,
|
|
88
|
+
max: maxProp,
|
|
89
|
+
getValueLabel = defaultGetValueLabel,
|
|
90
|
+
size = "$4",
|
|
91
|
+
...progressProps
|
|
92
|
+
} = props;
|
|
93
|
+
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
94
|
+
const value = isValidValueNumber(valueProp, max) ? valueProp : null;
|
|
95
|
+
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
96
|
+
const [width, setWidth] = React.useState(0);
|
|
97
|
+
return /* @__PURE__ */ jsx(ProgressProvider, {
|
|
98
|
+
scope: __scopeProgress,
|
|
99
|
+
value,
|
|
100
|
+
max,
|
|
101
|
+
width,
|
|
102
|
+
children: /* @__PURE__ */ jsx(ProgressFrame, {
|
|
103
|
+
size,
|
|
104
|
+
"aria-valuemax": max,
|
|
105
|
+
"aria-valuemin": 0,
|
|
106
|
+
"aria-valuenow": isNumber(value) ? value : void 0,
|
|
107
|
+
"aria-valuetext": valueLabel,
|
|
108
|
+
role: "progressbar",
|
|
109
|
+
"data-state": getProgressState(value, max),
|
|
110
|
+
"data-value": value ?? void 0,
|
|
111
|
+
"data-max": max,
|
|
112
|
+
...progressProps,
|
|
113
|
+
onLayout: (e) => {
|
|
114
|
+
var _a;
|
|
115
|
+
setWidth(e.nativeEvent.layout.width);
|
|
116
|
+
(_a = progressProps.onLayout) == null ? void 0 : _a.call(progressProps, e);
|
|
117
|
+
},
|
|
118
|
+
ref: forwardedRef
|
|
119
|
+
})
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
)
|
|
123
|
+
),
|
|
124
|
+
{
|
|
125
|
+
Indicator: ProgressIndicator
|
|
126
|
+
}
|
|
127
|
+
);
|
|
115
128
|
Progress.displayName = PROGRESS_NAME;
|
|
116
129
|
Progress.propTypes = {
|
|
117
130
|
max(props, propName, componentName) {
|
package/dist/esm/Progress.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Progress.tsx"],
|
|
4
4
|
"sourcesContent": ["// forked from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/react/progress/src/Progress.tsx\n\nimport { GetProps, getSize, getVariableValue, styled, withStaticProperties } from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst PROGRESS_NAME = 'Progress'\n\nconst [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME)\ntype ProgressContextValue = { value: number | null; max: number; width: number }\nconst [ProgressProvider, useProgressContext] =\n createProgressContext<ProgressContextValue>(PROGRESS_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * ProgressIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'ProgressIndicator'\n\ntype ProgressIndicatorElement = TamaguiElement\ninterface ProgressIndicatorProps extends YStackProps {}\n\nexport const ProgressIndicatorFrame = styled(ThemeableStack, {\n name: INDICATOR_NAME,\n height: '100%',\n width: '100%',\n backgrounded: true,\n})\n\nconst ProgressIndicator = ProgressIndicatorFrame.extractable(\n React.forwardRef<ProgressIndicatorElement, ProgressIndicatorProps>(\n (props: ScopedProps<ProgressIndicatorProps>, forwardedRef) => {\n const { __scopeProgress, ...indicatorProps } = props\n const context = useProgressContext(INDICATOR_NAME, __scopeProgress)\n const pct = context.max - (context.value ?? 0)\n const x = -context.width * (pct / 100)\n return (\n <ProgressIndicatorFrame\n data-state={getProgressState(context.value, context.max)}\n data-value={context.value ?? undefined}\n data-max={context.max}\n x={x}\n width={context.width}\n {...indicatorProps}\n ref={forwardedRef}\n />\n )\n }\n )\n)\n\nProgressIndicator.displayName = INDICATOR_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction defaultGetValueLabel(value: number, max: number) {\n return `${Math.round((value / max) * 100)}%`\n}\n\nfunction getProgressState(value: number | undefined | null, maxValue: number): ProgressState {\n return value == null ? 'indeterminate' : value === maxValue ? 'complete' : 'loading'\n}\n\nfunction isNumber(value: any): value is number {\n return typeof value === 'number'\n}\n\nfunction isValidMaxNumber(max: any): max is number {\n // prettier-ignore\n return (\n isNumber(max) &&\n !isNaN(max) &&\n max > 0\n );\n}\n\nfunction isValidValueNumber(value: any, max: number): value is number {\n // prettier-ignore\n return (\n isNumber(value) &&\n !isNaN(value) &&\n value <= max &&\n value >= 0\n );\n}\n\n// Split this out for clearer readability of the error message.\nfunction getInvalidMaxError(propValue: string, componentName: string) {\n return `Invalid prop \\`max\\` of value \\`${propValue}\\` supplied to \\`${componentName}\\`. Only numbers greater than 0 are valid max values. Defaulting to \\`${DEFAULT_MAX}\\`.`\n}\n\nfunction getInvalidValueError(propValue: string, componentName: string) {\n return `Invalid prop \\`value\\` of value \\`${propValue}\\` supplied to \\`${componentName}\\`. The \\`value\\` prop must be:\n - a positive number\n - less than the value passed to \\`max\\` (or ${DEFAULT_MAX} if no \\`max\\` prop is set)\n - \\`null\\` if the progress is indeterminate.\n\nDefaulting to \\`null\\`.`\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Progress\n * -----------------------------------------------------------------------------------------------*/\n\nconst DEFAULT_MAX = 100\n\ntype ScopedProps<P> = P & { __scopeProgress?: Scope }\n\ntype ProgressState = 'indeterminate' | 'complete' | 'loading'\n\ntype TamaguiElement = HTMLElement | View\n\ntype ProgressElement = TamaguiElement\n\nexport const ProgressFrame = styled(ThemeableStack, {\n name: PROGRESS_NAME,\n borderRadius: 100_000,\n overflow: 'hidden',\n backgrounded: true,\n\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})\n\ntype ProgressProps = GetProps<typeof ProgressFrame> & {\n value?: number | null | undefined\n max?: number\n getValueLabel?(value: number, max: number): string\n}\n\nconst Progress = withStaticProperties(\n ProgressFrame.extractable(\n React.forwardRef<ProgressElement, ProgressProps>(\n (props: ScopedProps<ProgressProps>, forwardedRef) => {\n const {\n __scopeProgress,\n value: valueProp,\n max: maxProp,\n getValueLabel = defaultGetValueLabel,\n size = '$4',\n ...progressProps\n } = props\n\n const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX\n const value = isValidValueNumber(valueProp, max) ? valueProp : null\n const valueLabel = isNumber(value) ? getValueLabel(value, max) : undefined\n const [width, setWidth] = React.useState(0)\n\n return (\n <ProgressProvider scope={__scopeProgress} value={value} max={max} width={width}>\n <ProgressFrame\n size={size}\n aria-valuemax={max}\n aria-valuemin={0}\n aria-valuenow={isNumber(value) ? value : undefined}\n aria-valuetext={valueLabel}\n // @ts-ignore\n role=\"progressbar\"\n data-state={getProgressState(value, max)}\n data-value={value ?? undefined}\n data-max={max}\n {...progressProps}\n onLayout={(e) => {\n setWidth(e.nativeEvent.layout.width)\n progressProps.onLayout?.(e)\n }}\n ref={forwardedRef}\n />\n </ProgressProvider>\n )\n }\n )\n ),\n {\n Indicator: ProgressIndicator,\n }\n)\n\nProgress.displayName = PROGRESS_NAME\n\nProgress.propTypes = {\n max(props, propName, componentName) {\n const propValue = props[propName]\n const strVal = String(propValue)\n if (propValue && !isValidMaxNumber(propValue)) {\n return new Error(getInvalidMaxError(strVal, componentName))\n }\n return null\n },\n value(props, propName, componentName) {\n const valueProp = props[propName]\n const strVal = String(valueProp)\n const max = isValidMaxNumber(props.max) ? props.max : DEFAULT_MAX\n if (valueProp != null && !isValidValueNumber(valueProp, max)) {\n return new Error(getInvalidValueError(strVal, componentName))\n }\n return null\n },\n}\n\nexport { createProgressScope, Progress, ProgressIndicator }\nexport type { ProgressProps, ProgressIndicatorProps }\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
package/dist/jsx/Progress.js
CHANGED
|
@@ -12,13 +12,17 @@ const ProgressIndicatorFrame = styled(ThemeableStack, {
|
|
|
12
12
|
width: "100%",
|
|
13
13
|
backgrounded: true
|
|
14
14
|
});
|
|
15
|
-
const ProgressIndicator = ProgressIndicatorFrame.extractable(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
15
|
+
const ProgressIndicator = ProgressIndicatorFrame.extractable(
|
|
16
|
+
React.forwardRef(
|
|
17
|
+
(props, forwardedRef) => {
|
|
18
|
+
const { __scopeProgress, ...indicatorProps } = props;
|
|
19
|
+
const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
|
20
|
+
const pct = context.max - (context.value ?? 0);
|
|
21
|
+
const x = -context.width * (pct / 100);
|
|
22
|
+
return <ProgressIndicatorFrame data-state={getProgressState(context.value, context.max)} data-value={context.value ?? void 0} data-max={context.max} x={x} width={context.width} {...indicatorProps} ref={forwardedRef} />;
|
|
23
|
+
}
|
|
24
|
+
)
|
|
25
|
+
);
|
|
22
26
|
ProgressIndicator.displayName = INDICATOR_NAME;
|
|
23
27
|
function defaultGetValueLabel(value, max) {
|
|
24
28
|
return `${Math.round(value / max * 100)}%`;
|
|
@@ -65,26 +69,33 @@ const ProgressFrame = styled(ThemeableStack, {
|
|
|
65
69
|
}
|
|
66
70
|
}
|
|
67
71
|
});
|
|
68
|
-
const Progress = withStaticProperties(
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}
|
|
72
|
+
const Progress = withStaticProperties(
|
|
73
|
+
ProgressFrame.extractable(
|
|
74
|
+
React.forwardRef(
|
|
75
|
+
(props, forwardedRef) => {
|
|
76
|
+
const {
|
|
77
|
+
__scopeProgress,
|
|
78
|
+
value: valueProp,
|
|
79
|
+
max: maxProp,
|
|
80
|
+
getValueLabel = defaultGetValueLabel,
|
|
81
|
+
size = "$4",
|
|
82
|
+
...progressProps
|
|
83
|
+
} = props;
|
|
84
|
+
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
85
|
+
const value = isValidValueNumber(valueProp, max) ? valueProp : null;
|
|
86
|
+
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
87
|
+
const [width, setWidth] = React.useState(0);
|
|
88
|
+
return <ProgressProvider scope={__scopeProgress} value={value} max={max} width={width}><ProgressFrame size={size} aria-valuemax={max} aria-valuemin={0} aria-valuenow={isNumber(value) ? value : void 0} aria-valuetext={valueLabel} role="progressbar" data-state={getProgressState(value, max)} data-value={value ?? void 0} data-max={max} {...progressProps} onLayout={(e) => {
|
|
89
|
+
setWidth(e.nativeEvent.layout.width);
|
|
90
|
+
progressProps.onLayout?.(e);
|
|
91
|
+
}} ref={forwardedRef} /></ProgressProvider>;
|
|
92
|
+
}
|
|
93
|
+
)
|
|
94
|
+
),
|
|
95
|
+
{
|
|
96
|
+
Indicator: ProgressIndicator
|
|
97
|
+
}
|
|
98
|
+
);
|
|
88
99
|
Progress.displayName = PROGRESS_NAME;
|
|
89
100
|
Progress.propTypes = {
|
|
90
101
|
max(props, propName, componentName) {
|
package/dist/jsx/Progress.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Progress.tsx"],
|
|
4
4
|
"sourcesContent": ["// forked from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/react/progress/src/Progress.tsx\n\nimport { GetProps, getSize, getVariableValue, styled, withStaticProperties } from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { ThemeableStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst PROGRESS_NAME = 'Progress'\n\nconst [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME)\ntype ProgressContextValue = { value: number | null; max: number; width: number }\nconst [ProgressProvider, useProgressContext] =\n createProgressContext<ProgressContextValue>(PROGRESS_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * ProgressIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'ProgressIndicator'\n\ntype ProgressIndicatorElement = TamaguiElement\ninterface ProgressIndicatorProps extends YStackProps {}\n\nexport const ProgressIndicatorFrame = styled(ThemeableStack, {\n name: INDICATOR_NAME,\n height: '100%',\n width: '100%',\n backgrounded: true,\n})\n\nconst ProgressIndicator = ProgressIndicatorFrame.extractable(\n React.forwardRef<ProgressIndicatorElement, ProgressIndicatorProps>(\n (props: ScopedProps<ProgressIndicatorProps>, forwardedRef) => {\n const { __scopeProgress, ...indicatorProps } = props\n const context = useProgressContext(INDICATOR_NAME, __scopeProgress)\n const pct = context.max - (context.value ?? 0)\n const x = -context.width * (pct / 100)\n return (\n <ProgressIndicatorFrame\n data-state={getProgressState(context.value, context.max)}\n data-value={context.value ?? undefined}\n data-max={context.max}\n x={x}\n width={context.width}\n {...indicatorProps}\n ref={forwardedRef}\n />\n )\n }\n )\n)\n\nProgressIndicator.displayName = INDICATOR_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction defaultGetValueLabel(value: number, max: number) {\n return `${Math.round((value / max) * 100)}%`\n}\n\nfunction getProgressState(value: number | undefined | null, maxValue: number): ProgressState {\n return value == null ? 'indeterminate' : value === maxValue ? 'complete' : 'loading'\n}\n\nfunction isNumber(value: any): value is number {\n return typeof value === 'number'\n}\n\nfunction isValidMaxNumber(max: any): max is number {\n // prettier-ignore\n return (\n isNumber(max) &&\n !isNaN(max) &&\n max > 0\n );\n}\n\nfunction isValidValueNumber(value: any, max: number): value is number {\n // prettier-ignore\n return (\n isNumber(value) &&\n !isNaN(value) &&\n value <= max &&\n value >= 0\n );\n}\n\n// Split this out for clearer readability of the error message.\nfunction getInvalidMaxError(propValue: string, componentName: string) {\n return `Invalid prop \\`max\\` of value \\`${propValue}\\` supplied to \\`${componentName}\\`. Only numbers greater than 0 are valid max values. Defaulting to \\`${DEFAULT_MAX}\\`.`\n}\n\nfunction getInvalidValueError(propValue: string, componentName: string) {\n return `Invalid prop \\`value\\` of value \\`${propValue}\\` supplied to \\`${componentName}\\`. The \\`value\\` prop must be:\n - a positive number\n - less than the value passed to \\`max\\` (or ${DEFAULT_MAX} if no \\`max\\` prop is set)\n - \\`null\\` if the progress is indeterminate.\n\nDefaulting to \\`null\\`.`\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Progress\n * -----------------------------------------------------------------------------------------------*/\n\nconst DEFAULT_MAX = 100\n\ntype ScopedProps<P> = P & { __scopeProgress?: Scope }\n\ntype ProgressState = 'indeterminate' | 'complete' | 'loading'\n\ntype TamaguiElement = HTMLElement | View\n\ntype ProgressElement = TamaguiElement\n\nexport const ProgressFrame = styled(ThemeableStack, {\n name: PROGRESS_NAME,\n borderRadius: 100_000,\n overflow: 'hidden',\n backgrounded: true,\n\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})\n\ntype ProgressProps = GetProps<typeof ProgressFrame> & {\n value?: number | null | undefined\n max?: number\n getValueLabel?(value: number, max: number): string\n}\n\nconst Progress = withStaticProperties(\n ProgressFrame.extractable(\n React.forwardRef<ProgressElement, ProgressProps>(\n (props: ScopedProps<ProgressProps>, forwardedRef) => {\n const {\n __scopeProgress,\n value: valueProp,\n max: maxProp,\n getValueLabel = defaultGetValueLabel,\n size = '$4',\n ...progressProps\n } = props\n\n const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX\n const value = isValidValueNumber(valueProp, max) ? valueProp : null\n const valueLabel = isNumber(value) ? getValueLabel(value, max) : undefined\n const [width, setWidth] = React.useState(0)\n\n return (\n <ProgressProvider scope={__scopeProgress} value={value} max={max} width={width}>\n <ProgressFrame\n size={size}\n aria-valuemax={max}\n aria-valuemin={0}\n aria-valuenow={isNumber(value) ? value : undefined}\n aria-valuetext={valueLabel}\n // @ts-ignore\n role=\"progressbar\"\n data-state={getProgressState(value, max)}\n data-value={value ?? undefined}\n data-max={max}\n {...progressProps}\n onLayout={(e) => {\n setWidth(e.nativeEvent.layout.width)\n progressProps.onLayout?.(e)\n }}\n ref={forwardedRef}\n />\n </ProgressProvider>\n )\n }\n )\n ),\n {\n Indicator: ProgressIndicator,\n }\n)\n\nProgress.displayName = PROGRESS_NAME\n\nProgress.propTypes = {\n max(props, propName, componentName) {\n const propValue = props[propName]\n const strVal = String(propValue)\n if (propValue && !isValidMaxNumber(propValue)) {\n return new Error(getInvalidMaxError(strVal, componentName))\n }\n return null\n },\n value(props, propName, componentName) {\n const valueProp = props[propName]\n const strVal = String(valueProp)\n const max = isValidMaxNumber(props.max) ? props.max : DEFAULT_MAX\n if (valueProp != null && !isValidValueNumber(valueProp, max)) {\n return new Error(getInvalidValueError(strVal, componentName))\n }\n return null\n },\n}\n\nexport { createProgressScope, Progress, ProgressIndicator }\nexport type { ProgressProps, ProgressIndicatorProps }\n"],
|
|
5
|
-
"mappings": "AAGA;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/index.js.map
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/progress",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.154",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -23,10 +23,10 @@
|
|
|
23
23
|
"clean:build": "tamagui-build clean:build"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
26
|
+
"@tamagui/compose-refs": "^1.0.1-beta.154",
|
|
27
|
+
"@tamagui/core": "^1.0.1-beta.154",
|
|
28
|
+
"@tamagui/create-context": "^1.0.1-beta.154",
|
|
29
|
+
"@tamagui/stacks": "^1.0.1-beta.154"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": "*",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"react-native": "*"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
37
|
+
"@tamagui/build": "^1.0.1-beta.154",
|
|
38
38
|
"@types/react-native": "^0.69.2",
|
|
39
39
|
"react": "*",
|
|
40
40
|
"react-dom": "*",
|