@tamagui/progress 1.13.3 → 1.13.4
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 +3 -190
- package/dist/cjs/Progress.js.map +2 -2
- package/dist/cjs/index.js +1 -18
- package/dist/cjs/index.js.map +2 -2
- package/dist/esm/Progress.js +3 -152
- package/dist/esm/Progress.js.map +2 -2
- package/dist/esm/Progress.mjs +3 -152
- package/dist/esm/Progress.mjs.map +2 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/index.mjs.map +1 -1
- package/dist/jsx/Progress.js +3 -144
- package/dist/jsx/Progress.js.map +2 -2
- package/dist/jsx/Progress.mjs +3 -144
- package/dist/jsx/Progress.mjs.map +2 -2
- package/dist/jsx/index.js +1 -1
- package/dist/jsx/index.js.map +1 -1
- package/dist/jsx/index.mjs +1 -1
- package/dist/jsx/index.mjs.map +1 -1
- package/package.json +7 -7
package/dist/cjs/Progress.js
CHANGED
|
@@ -1,194 +1,7 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var Progress_exports = {};
|
|
30
|
-
__export(Progress_exports, {
|
|
31
|
-
Progress: () => Progress,
|
|
32
|
-
ProgressFrame: () => ProgressFrame,
|
|
33
|
-
ProgressIndicator: () => ProgressIndicator,
|
|
34
|
-
ProgressIndicatorFrame: () => ProgressIndicatorFrame,
|
|
35
|
-
createProgressScope: () => createProgressScope
|
|
36
|
-
});
|
|
37
|
-
module.exports = __toCommonJS(Progress_exports);
|
|
38
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
39
|
-
var import_core = require("@tamagui/core");
|
|
40
|
-
var import_create_context = require("@tamagui/create-context");
|
|
41
|
-
var import_get_size = require("@tamagui/get-size");
|
|
42
|
-
var import_stacks = require("@tamagui/stacks");
|
|
43
|
-
var React = __toESM(require("react"));
|
|
44
|
-
const PROGRESS_NAME = "Progress";
|
|
45
|
-
const [createProgressContext, createProgressScope] = (0, import_create_context.createContextScope)(PROGRESS_NAME);
|
|
46
|
-
const [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);
|
|
47
|
-
const INDICATOR_NAME = "ProgressIndicator";
|
|
48
|
-
const ProgressIndicatorFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
49
|
-
name: INDICATOR_NAME,
|
|
50
|
-
height: "100%",
|
|
51
|
-
width: "100%",
|
|
52
|
-
backgrounded: true
|
|
53
|
-
});
|
|
54
|
-
const ProgressIndicator = ProgressIndicatorFrame.extractable(
|
|
55
|
-
React.forwardRef(
|
|
56
|
-
(props, forwardedRef) => {
|
|
57
|
-
const { __scopeProgress, ...indicatorProps } = props;
|
|
58
|
-
const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
|
59
|
-
const pct = context.max - (context.value ?? 0);
|
|
60
|
-
const x = -context.width * (pct / 100);
|
|
61
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
62
|
-
ProgressIndicatorFrame,
|
|
63
|
-
{
|
|
64
|
-
"data-state": getProgressState(context.value, context.max),
|
|
65
|
-
"data-value": context.value ?? void 0,
|
|
66
|
-
"data-max": context.max,
|
|
67
|
-
x,
|
|
68
|
-
width: context.width,
|
|
69
|
-
...indicatorProps,
|
|
70
|
-
ref: forwardedRef
|
|
71
|
-
}
|
|
72
|
-
);
|
|
73
|
-
}
|
|
74
|
-
)
|
|
75
|
-
);
|
|
76
|
-
ProgressIndicator.displayName = INDICATOR_NAME;
|
|
77
|
-
function defaultGetValueLabel(value, max) {
|
|
78
|
-
return `${Math.round(value / max * 100)}%`;
|
|
79
|
-
}
|
|
80
|
-
function getProgressState(value, maxValue) {
|
|
81
|
-
return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
|
|
82
|
-
}
|
|
83
|
-
function isNumber(value) {
|
|
84
|
-
return typeof value === "number";
|
|
85
|
-
}
|
|
86
|
-
function isValidMaxNumber(max) {
|
|
87
|
-
return isNumber(max) && !isNaN(max) && max > 0;
|
|
88
|
-
}
|
|
89
|
-
function isValidValueNumber(value, max) {
|
|
90
|
-
return isNumber(value) && !isNaN(value) && value <= max && value >= 0;
|
|
91
|
-
}
|
|
92
|
-
function getInvalidMaxError(propValue, componentName) {
|
|
93
|
-
return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${DEFAULT_MAX}\`.`;
|
|
94
|
-
}
|
|
95
|
-
function getInvalidValueError(propValue, componentName) {
|
|
96
|
-
return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be:
|
|
1
|
+
"use strict";var C=Object.create;var m=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var G=(e,r)=>{for(var o in r)m(e,o,{get:r[o],enumerable:!0})},V=(e,r,o,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of A(r))!F.call(e,t)&&t!==o&&m(e,t,{get:()=>r[t],enumerable:!(a=k(r,t))||a.enumerable});return e};var O=(e,r,o)=>(o=e!=null?C(D(e)):{},V(r||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e)),W=e=>V(m({},"__esModule",{value:!0}),e);var J={};G(J,{Progress:()=>P,ProgressFrame:()=>w,ProgressIndicator:()=>g,ProgressIndicatorFrame:()=>S,createProgressScope:()=>M});module.exports=W(J);var f=require("react/jsx-runtime"),n=require("@tamagui/core"),T=require("@tamagui/create-context"),L=require("@tamagui/get-size"),y=require("@tamagui/stacks"),v=O(require("react"));const d="Progress",[Y,M]=(0,T.createContextScope)(d),[H,U]=Y(d),b="ProgressIndicator",S=(0,n.styled)(y.ThemeableStack,{name:b,height:"100%",width:"100%",backgrounded:!0}),g=S.extractable(v.forwardRef((e,r)=>{const{__scopeProgress:o,...a}=e,t=U(b,o),u=t.max-(t.value??0),x=-t.width*(u/100);return(0,f.jsx)(S,{"data-state":N(t.value,t.max),"data-value":t.value??void 0,"data-max":t.max,x,width:t.width,...a,ref:r})}));g.displayName=b;function X(e,r){return`${Math.round(e/r*100)}%`}function N(e,r){return e==null?"indeterminate":e===r?"complete":"loading"}function p(e){return typeof e=="number"}function h(e){return p(e)&&!isNaN(e)&&e>0}function _(e,r){return p(e)&&!isNaN(e)&&e<=r&&e>=0}function q(e,r){return`Invalid prop \`max\` of value \`${e}\` supplied to \`${r}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${c}\`.`}function B(e,r){return`Invalid prop \`value\` of value \`${e}\` supplied to \`${r}\`. The \`value\` prop must be:
|
|
97
2
|
- a positive number
|
|
98
|
-
- less than the value passed to \`max\` (or ${
|
|
3
|
+
- less than the value passed to \`max\` (or ${c} if no \`max\` prop is set)
|
|
99
4
|
- \`null\` if the progress is indeterminate.
|
|
100
5
|
|
|
101
|
-
Defaulting to \`null
|
|
102
|
-
}
|
|
103
|
-
const DEFAULT_MAX = 100;
|
|
104
|
-
const ProgressFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
105
|
-
name: PROGRESS_NAME,
|
|
106
|
-
borderRadius: 1e5,
|
|
107
|
-
overflow: "hidden",
|
|
108
|
-
backgrounded: true,
|
|
109
|
-
variants: {
|
|
110
|
-
size: {
|
|
111
|
-
"...size": (val) => {
|
|
112
|
-
const size = Math.round((0, import_core.getVariableValue)((0, import_get_size.getSize)(val)) * 0.25);
|
|
113
|
-
return {
|
|
114
|
-
height: size,
|
|
115
|
-
minWidth: (0, import_core.getVariableValue)(size) * 20,
|
|
116
|
-
width: "100%"
|
|
117
|
-
};
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
});
|
|
122
|
-
const Progress = (0, import_core.withStaticProperties)(
|
|
123
|
-
ProgressFrame.extractable(
|
|
124
|
-
React.forwardRef(
|
|
125
|
-
(props, forwardedRef) => {
|
|
126
|
-
const {
|
|
127
|
-
__scopeProgress,
|
|
128
|
-
value: valueProp,
|
|
129
|
-
max: maxProp,
|
|
130
|
-
getValueLabel = defaultGetValueLabel,
|
|
131
|
-
size = "$true",
|
|
132
|
-
...progressProps
|
|
133
|
-
} = props;
|
|
134
|
-
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
135
|
-
const value = isValidValueNumber(valueProp, max) ? valueProp : null;
|
|
136
|
-
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
137
|
-
const [width, setWidth] = React.useState(0);
|
|
138
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressProvider, { scope: __scopeProgress, value, max, width, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
139
|
-
ProgressFrame,
|
|
140
|
-
{
|
|
141
|
-
size,
|
|
142
|
-
"aria-valuemax": max,
|
|
143
|
-
"aria-valuemin": 0,
|
|
144
|
-
"aria-valuenow": isNumber(value) ? value : void 0,
|
|
145
|
-
"aria-valuetext": valueLabel,
|
|
146
|
-
role: "progressbar",
|
|
147
|
-
"data-state": getProgressState(value, max),
|
|
148
|
-
"data-value": value ?? void 0,
|
|
149
|
-
"data-max": max,
|
|
150
|
-
...progressProps,
|
|
151
|
-
onLayout: (e) => {
|
|
152
|
-
var _a;
|
|
153
|
-
setWidth(e.nativeEvent.layout.width);
|
|
154
|
-
(_a = progressProps.onLayout) == null ? void 0 : _a.call(progressProps, e);
|
|
155
|
-
},
|
|
156
|
-
ref: forwardedRef
|
|
157
|
-
}
|
|
158
|
-
) });
|
|
159
|
-
}
|
|
160
|
-
)
|
|
161
|
-
),
|
|
162
|
-
{
|
|
163
|
-
Indicator: ProgressIndicator
|
|
164
|
-
}
|
|
165
|
-
);
|
|
166
|
-
Progress.displayName = PROGRESS_NAME;
|
|
167
|
-
Progress.propTypes = {
|
|
168
|
-
max(props, propName, componentName) {
|
|
169
|
-
const propValue = props[propName];
|
|
170
|
-
const strVal = String(propValue);
|
|
171
|
-
if (propValue && !isValidMaxNumber(propValue)) {
|
|
172
|
-
return new Error(getInvalidMaxError(strVal, componentName));
|
|
173
|
-
}
|
|
174
|
-
return null;
|
|
175
|
-
},
|
|
176
|
-
value(props, propName, componentName) {
|
|
177
|
-
const valueProp = props[propName];
|
|
178
|
-
const strVal = String(valueProp);
|
|
179
|
-
const max = isValidMaxNumber(props.max) ? props.max : DEFAULT_MAX;
|
|
180
|
-
if (valueProp != null && !isValidValueNumber(valueProp, max)) {
|
|
181
|
-
return new Error(getInvalidValueError(strVal, componentName));
|
|
182
|
-
}
|
|
183
|
-
return null;
|
|
184
|
-
}
|
|
185
|
-
};
|
|
186
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
187
|
-
0 && (module.exports = {
|
|
188
|
-
Progress,
|
|
189
|
-
ProgressFrame,
|
|
190
|
-
ProgressIndicator,
|
|
191
|
-
ProgressIndicatorFrame,
|
|
192
|
-
createProgressScope
|
|
193
|
-
});
|
|
6
|
+
Defaulting to \`null\`.`}const c=100,w=(0,n.styled)(y.ThemeableStack,{name:d,borderRadius:1e5,overflow:"hidden",backgrounded:!0,variants:{size:{"...size":e=>{const r=Math.round((0,n.getVariableValue)((0,L.getSize)(e))*.25);return{height:r,minWidth:(0,n.getVariableValue)(r)*20,width:"100%"}}}}}),P=(0,n.withStaticProperties)(w.extractable(v.forwardRef((e,r)=>{const{__scopeProgress:o,value:a,max:t,getValueLabel:u=X,size:x="$true",...l}=e,i=h(t)?t:c,s=_(a,i)?a:null,$=p(s)?u(s,i):void 0,[R,z]=v.useState(0);return(0,f.jsx)(H,{scope:o,value:s,max:i,width:R,children:(0,f.jsx)(w,{size:x,"aria-valuemax":i,"aria-valuemin":0,"aria-valuenow":p(s)?s:void 0,"aria-valuetext":$,role:"progressbar","data-state":N(s,i),"data-value":s??void 0,"data-max":i,...l,onLayout:E=>{var I;z(E.nativeEvent.layout.width),(I=l.onLayout)==null||I.call(l,E)},ref:r})})})),{Indicator:g});P.displayName=d,P.propTypes={max(e,r,o){const a=e[r],t=String(a);return a&&!h(a)?new Error(q(t,o)):null},value(e,r,o){const a=e[r],t=String(a),u=h(e.max)?e.max:c;return a!=null&&!_(a,u)?new Error(B(t,o)):null}};0&&(module.exports={Progress,ProgressFrame,ProgressIndicator,ProgressIndicatorFrame,createProgressScope});
|
|
194
7
|
//# sourceMappingURL=Progress.js.map
|
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, getVariableValue, styled, withStaticProperties } from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { getSize } from '@tamagui/get-size'\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(\n value: number | undefined | null,\n maxValue: number\n): 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 return isNumber(max) && !isNaN(max) && max > 0\n}\n\nfunction isValidValueNumber(value: any, max: number): value is number {\n return isNumber(value) && !isNaN(value) && value <= max && value >= 0\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 } as const,\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 = '$true',\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": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Progress_exports", "__export", "Progress", "ProgressFrame", "ProgressIndicator", "ProgressIndicatorFrame", "createProgressScope", "__toCommonJS", "import_jsx_runtime", "import_core", "import_create_context", "import_get_size", "import_stacks", "React", "PROGRESS_NAME", "createProgressContext", "ProgressProvider", "useProgressContext", "INDICATOR_NAME", "props", "forwardedRef", "__scopeProgress", "indicatorProps", "context", "pct", "getProgressState", "defaultGetValueLabel", "value", "max", "maxValue", "isNumber", "isValidMaxNumber", "isValidValueNumber", "getInvalidMaxError", "propValue", "componentName", "DEFAULT_MAX", "getInvalidValueError", "val", "size", "valueProp", "maxProp", "getValueLabel", "progressProps", "valueLabel", "width", "setWidth", "e", "_a", "propName", "strVal"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,19 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __copyProps = (to, from, except, desc) => {
|
|
7
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
-
for (let key of __getOwnPropNames(from))
|
|
9
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
-
}
|
|
12
|
-
return to;
|
|
13
|
-
};
|
|
14
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
16
|
-
var src_exports = {};
|
|
17
|
-
module.exports = __toCommonJS(src_exports);
|
|
18
|
-
__reExport(src_exports, require("./Progress"), module.exports);
|
|
1
|
+
"use strict";var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var p=(r,o,f,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of c(o))!d.call(r,e)&&e!==f&&a(r,e,{get:()=>o[e],enumerable:!(x=b(o,e))||x.enumerable});return r},t=(r,o,f)=>(p(r,o,"default"),f&&p(f,o,"default"));var g=r=>p(a({},"__esModule",{value:!0}),r);var m={};module.exports=g(m);t(m,require("./Progress"),module.exports);
|
|
19
2
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts"],
|
|
4
4
|
"sourcesContent": ["export * from './Progress'\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "iaAAA,IAAAA,EAAA,kBAAAC,EAAAD,GAAAE,EAAAF,EAAc,sBAAd",
|
|
6
|
+
"names": ["src_exports", "__toCommonJS", "__reExport"]
|
|
7
7
|
}
|
package/dist/esm/Progress.js
CHANGED
|
@@ -1,156 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { getVariableValue, styled, withStaticProperties } from "@tamagui/core";
|
|
3
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
4
|
-
import { getSize } from "@tamagui/get-size";
|
|
5
|
-
import { ThemeableStack } from "@tamagui/stacks";
|
|
6
|
-
import * as React from "react";
|
|
7
|
-
const PROGRESS_NAME = "Progress";
|
|
8
|
-
const [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME);
|
|
9
|
-
const [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);
|
|
10
|
-
const INDICATOR_NAME = "ProgressIndicator";
|
|
11
|
-
const ProgressIndicatorFrame = styled(ThemeableStack, {
|
|
12
|
-
name: INDICATOR_NAME,
|
|
13
|
-
height: "100%",
|
|
14
|
-
width: "100%",
|
|
15
|
-
backgrounded: true
|
|
16
|
-
});
|
|
17
|
-
const ProgressIndicator = ProgressIndicatorFrame.extractable(
|
|
18
|
-
React.forwardRef(
|
|
19
|
-
(props, forwardedRef) => {
|
|
20
|
-
const { __scopeProgress, ...indicatorProps } = props;
|
|
21
|
-
const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
|
22
|
-
const pct = context.max - (context.value ?? 0);
|
|
23
|
-
const x = -context.width * (pct / 100);
|
|
24
|
-
return /* @__PURE__ */ jsx(
|
|
25
|
-
ProgressIndicatorFrame,
|
|
26
|
-
{
|
|
27
|
-
"data-state": getProgressState(context.value, context.max),
|
|
28
|
-
"data-value": context.value ?? void 0,
|
|
29
|
-
"data-max": context.max,
|
|
30
|
-
x,
|
|
31
|
-
width: context.width,
|
|
32
|
-
...indicatorProps,
|
|
33
|
-
ref: forwardedRef
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
}
|
|
37
|
-
)
|
|
38
|
-
);
|
|
39
|
-
ProgressIndicator.displayName = INDICATOR_NAME;
|
|
40
|
-
function defaultGetValueLabel(value, max) {
|
|
41
|
-
return `${Math.round(value / max * 100)}%`;
|
|
42
|
-
}
|
|
43
|
-
function getProgressState(value, maxValue) {
|
|
44
|
-
return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
|
|
45
|
-
}
|
|
46
|
-
function isNumber(value) {
|
|
47
|
-
return typeof value === "number";
|
|
48
|
-
}
|
|
49
|
-
function isValidMaxNumber(max) {
|
|
50
|
-
return isNumber(max) && !isNaN(max) && max > 0;
|
|
51
|
-
}
|
|
52
|
-
function isValidValueNumber(value, max) {
|
|
53
|
-
return isNumber(value) && !isNaN(value) && value <= max && value >= 0;
|
|
54
|
-
}
|
|
55
|
-
function getInvalidMaxError(propValue, componentName) {
|
|
56
|
-
return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${DEFAULT_MAX}\`.`;
|
|
57
|
-
}
|
|
58
|
-
function getInvalidValueError(propValue, componentName) {
|
|
59
|
-
return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be:
|
|
1
|
+
import{jsx as v}from"react/jsx-runtime";import{getVariableValue as y,styled as S,withStaticProperties as M}from"@tamagui/core";import{createContextScope as $}from"@tamagui/create-context";import{getSize as R}from"@tamagui/get-size";import{ThemeableStack as w}from"@tamagui/stacks";import*as c from"react";const l="Progress",[z,C]=$(l),[k,A]=z(l),g="ProgressIndicator",E=S(w,{name:g,height:"100%",width:"100%",backgrounded:!0}),P=E.extractable(c.forwardRef((e,r)=>{const{__scopeProgress:a,...o}=e,t=A(g,a),i=t.max-(t.value??0),p=-t.width*(i/100);return v(E,{"data-state":I(t.value,t.max),"data-value":t.value??void 0,"data-max":t.max,x:p,width:t.width,...o,ref:r})}));P.displayName=g;function D(e,r){return`${Math.round(e/r*100)}%`}function I(e,r){return e==null?"indeterminate":e===r?"complete":"loading"}function m(e){return typeof e=="number"}function f(e){return m(e)&&!isNaN(e)&&e>0}function V(e,r){return m(e)&&!isNaN(e)&&e<=r&&e>=0}function F(e,r){return`Invalid prop \`max\` of value \`${e}\` supplied to \`${r}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${d}\`.`}function G(e,r){return`Invalid prop \`value\` of value \`${e}\` supplied to \`${r}\`. The \`value\` prop must be:
|
|
60
2
|
- a positive number
|
|
61
|
-
- less than the value passed to \`max\` (or ${
|
|
3
|
+
- less than the value passed to \`max\` (or ${d} if no \`max\` prop is set)
|
|
62
4
|
- \`null\` if the progress is indeterminate.
|
|
63
5
|
|
|
64
|
-
Defaulting to \`null
|
|
65
|
-
}
|
|
66
|
-
const DEFAULT_MAX = 100;
|
|
67
|
-
const ProgressFrame = styled(ThemeableStack, {
|
|
68
|
-
name: PROGRESS_NAME,
|
|
69
|
-
borderRadius: 1e5,
|
|
70
|
-
overflow: "hidden",
|
|
71
|
-
backgrounded: true,
|
|
72
|
-
variants: {
|
|
73
|
-
size: {
|
|
74
|
-
"...size": (val) => {
|
|
75
|
-
const size = Math.round(getVariableValue(getSize(val)) * 0.25);
|
|
76
|
-
return {
|
|
77
|
-
height: size,
|
|
78
|
-
minWidth: getVariableValue(size) * 20,
|
|
79
|
-
width: "100%"
|
|
80
|
-
};
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
const Progress = withStaticProperties(
|
|
86
|
-
ProgressFrame.extractable(
|
|
87
|
-
React.forwardRef(
|
|
88
|
-
(props, forwardedRef) => {
|
|
89
|
-
const {
|
|
90
|
-
__scopeProgress,
|
|
91
|
-
value: valueProp,
|
|
92
|
-
max: maxProp,
|
|
93
|
-
getValueLabel = defaultGetValueLabel,
|
|
94
|
-
size = "$true",
|
|
95
|
-
...progressProps
|
|
96
|
-
} = props;
|
|
97
|
-
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
98
|
-
const value = isValidValueNumber(valueProp, max) ? valueProp : null;
|
|
99
|
-
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
100
|
-
const [width, setWidth] = React.useState(0);
|
|
101
|
-
return /* @__PURE__ */ jsx(ProgressProvider, { scope: __scopeProgress, value, max, width, children: /* @__PURE__ */ jsx(
|
|
102
|
-
ProgressFrame,
|
|
103
|
-
{
|
|
104
|
-
size,
|
|
105
|
-
"aria-valuemax": max,
|
|
106
|
-
"aria-valuemin": 0,
|
|
107
|
-
"aria-valuenow": isNumber(value) ? value : void 0,
|
|
108
|
-
"aria-valuetext": valueLabel,
|
|
109
|
-
role: "progressbar",
|
|
110
|
-
"data-state": getProgressState(value, max),
|
|
111
|
-
"data-value": value ?? void 0,
|
|
112
|
-
"data-max": max,
|
|
113
|
-
...progressProps,
|
|
114
|
-
onLayout: (e) => {
|
|
115
|
-
var _a;
|
|
116
|
-
setWidth(e.nativeEvent.layout.width);
|
|
117
|
-
(_a = progressProps.onLayout) == null ? void 0 : _a.call(progressProps, e);
|
|
118
|
-
},
|
|
119
|
-
ref: forwardedRef
|
|
120
|
-
}
|
|
121
|
-
) });
|
|
122
|
-
}
|
|
123
|
-
)
|
|
124
|
-
),
|
|
125
|
-
{
|
|
126
|
-
Indicator: ProgressIndicator
|
|
127
|
-
}
|
|
128
|
-
);
|
|
129
|
-
Progress.displayName = PROGRESS_NAME;
|
|
130
|
-
Progress.propTypes = {
|
|
131
|
-
max(props, propName, componentName) {
|
|
132
|
-
const propValue = props[propName];
|
|
133
|
-
const strVal = String(propValue);
|
|
134
|
-
if (propValue && !isValidMaxNumber(propValue)) {
|
|
135
|
-
return new Error(getInvalidMaxError(strVal, componentName));
|
|
136
|
-
}
|
|
137
|
-
return null;
|
|
138
|
-
},
|
|
139
|
-
value(props, propName, componentName) {
|
|
140
|
-
const valueProp = props[propName];
|
|
141
|
-
const strVal = String(valueProp);
|
|
142
|
-
const max = isValidMaxNumber(props.max) ? props.max : DEFAULT_MAX;
|
|
143
|
-
if (valueProp != null && !isValidValueNumber(valueProp, max)) {
|
|
144
|
-
return new Error(getInvalidValueError(strVal, componentName));
|
|
145
|
-
}
|
|
146
|
-
return null;
|
|
147
|
-
}
|
|
148
|
-
};
|
|
149
|
-
export {
|
|
150
|
-
Progress,
|
|
151
|
-
ProgressFrame,
|
|
152
|
-
ProgressIndicator,
|
|
153
|
-
ProgressIndicatorFrame,
|
|
154
|
-
createProgressScope
|
|
155
|
-
};
|
|
6
|
+
Defaulting to \`null\`.`}const d=100,N=S(w,{name:l,borderRadius:1e5,overflow:"hidden",backgrounded:!0,variants:{size:{"...size":e=>{const r=Math.round(y(R(e))*.25);return{height:r,minWidth:y(r)*20,width:"100%"}}}}}),x=M(N.extractable(c.forwardRef((e,r)=>{const{__scopeProgress:a,value:o,max:t,getValueLabel:i=D,size:p="$true",...u}=e,s=f(t)?t:d,n=V(o,s)?o:null,_=m(n)?i(n,s):void 0,[T,L]=c.useState(0);return v(k,{scope:a,value:n,max:s,width:T,children:v(N,{size:p,"aria-valuemax":s,"aria-valuemin":0,"aria-valuenow":m(n)?n:void 0,"aria-valuetext":_,role:"progressbar","data-state":I(n,s),"data-value":n??void 0,"data-max":s,...u,onLayout:b=>{var h;L(b.nativeEvent.layout.width),(h=u.onLayout)==null||h.call(u,b)},ref:r})})})),{Indicator:P});x.displayName=l,x.propTypes={max(e,r,a){const o=e[r],t=String(o);return o&&!f(o)?new Error(F(t,a)):null},value(e,r,a){const o=e[r],t=String(o),i=f(e.max)?e.max:d;return o!=null&&!V(o,i)?new Error(G(t,a)):null}};export{x as Progress,N as ProgressFrame,P as ProgressIndicator,E as ProgressIndicatorFrame,C as createProgressScope};
|
|
156
7
|
//# sourceMappingURL=Progress.js.map
|
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, getVariableValue, styled, withStaticProperties } from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { getSize } from '@tamagui/get-size'\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(\n value: number | undefined | null,\n maxValue: number\n): 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 return isNumber(max) && !isNaN(max) && max > 0\n}\n\nfunction isValidValueNumber(value: any, max: number): value is number {\n return isNumber(value) && !isNaN(value) && value <= max && value >= 0\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 } as const,\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 = '$true',\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": "AAyCQ
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "getVariableValue", "styled", "withStaticProperties", "createContextScope", "getSize", "ThemeableStack", "React", "PROGRESS_NAME", "createProgressContext", "createProgressScope", "ProgressProvider", "useProgressContext", "INDICATOR_NAME", "ProgressIndicatorFrame", "ProgressIndicator", "props", "forwardedRef", "__scopeProgress", "indicatorProps", "context", "pct", "x", "getProgressState", "defaultGetValueLabel", "value", "max", "maxValue", "isNumber", "isValidMaxNumber", "isValidValueNumber", "getInvalidMaxError", "propValue", "componentName", "DEFAULT_MAX", "getInvalidValueError", "ProgressFrame", "val", "size", "Progress", "valueProp", "maxProp", "getValueLabel", "progressProps", "valueLabel", "width", "setWidth", "e", "_a", "propName", "strVal"]
|
|
7
7
|
}
|
package/dist/esm/Progress.mjs
CHANGED
|
@@ -1,156 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { getVariableValue, styled, withStaticProperties } from "@tamagui/core";
|
|
3
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
4
|
-
import { getSize } from "@tamagui/get-size";
|
|
5
|
-
import { ThemeableStack } from "@tamagui/stacks";
|
|
6
|
-
import * as React from "react";
|
|
7
|
-
const PROGRESS_NAME = "Progress";
|
|
8
|
-
const [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME);
|
|
9
|
-
const [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);
|
|
10
|
-
const INDICATOR_NAME = "ProgressIndicator";
|
|
11
|
-
const ProgressIndicatorFrame = styled(ThemeableStack, {
|
|
12
|
-
name: INDICATOR_NAME,
|
|
13
|
-
height: "100%",
|
|
14
|
-
width: "100%",
|
|
15
|
-
backgrounded: true
|
|
16
|
-
});
|
|
17
|
-
const ProgressIndicator = ProgressIndicatorFrame.extractable(
|
|
18
|
-
React.forwardRef(
|
|
19
|
-
(props, forwardedRef) => {
|
|
20
|
-
const { __scopeProgress, ...indicatorProps } = props;
|
|
21
|
-
const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
|
22
|
-
const pct = context.max - (context.value ?? 0);
|
|
23
|
-
const x = -context.width * (pct / 100);
|
|
24
|
-
return /* @__PURE__ */ jsx(
|
|
25
|
-
ProgressIndicatorFrame,
|
|
26
|
-
{
|
|
27
|
-
"data-state": getProgressState(context.value, context.max),
|
|
28
|
-
"data-value": context.value ?? void 0,
|
|
29
|
-
"data-max": context.max,
|
|
30
|
-
x,
|
|
31
|
-
width: context.width,
|
|
32
|
-
...indicatorProps,
|
|
33
|
-
ref: forwardedRef
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
}
|
|
37
|
-
)
|
|
38
|
-
);
|
|
39
|
-
ProgressIndicator.displayName = INDICATOR_NAME;
|
|
40
|
-
function defaultGetValueLabel(value, max) {
|
|
41
|
-
return `${Math.round(value / max * 100)}%`;
|
|
42
|
-
}
|
|
43
|
-
function getProgressState(value, maxValue) {
|
|
44
|
-
return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
|
|
45
|
-
}
|
|
46
|
-
function isNumber(value) {
|
|
47
|
-
return typeof value === "number";
|
|
48
|
-
}
|
|
49
|
-
function isValidMaxNumber(max) {
|
|
50
|
-
return isNumber(max) && !isNaN(max) && max > 0;
|
|
51
|
-
}
|
|
52
|
-
function isValidValueNumber(value, max) {
|
|
53
|
-
return isNumber(value) && !isNaN(value) && value <= max && value >= 0;
|
|
54
|
-
}
|
|
55
|
-
function getInvalidMaxError(propValue, componentName) {
|
|
56
|
-
return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${DEFAULT_MAX}\`.`;
|
|
57
|
-
}
|
|
58
|
-
function getInvalidValueError(propValue, componentName) {
|
|
59
|
-
return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be:
|
|
1
|
+
import{jsx as v}from"react/jsx-runtime";import{getVariableValue as y,styled as S,withStaticProperties as M}from"@tamagui/core";import{createContextScope as $}from"@tamagui/create-context";import{getSize as R}from"@tamagui/get-size";import{ThemeableStack as w}from"@tamagui/stacks";import*as c from"react";const l="Progress",[z,C]=$(l),[k,A]=z(l),g="ProgressIndicator",E=S(w,{name:g,height:"100%",width:"100%",backgrounded:!0}),P=E.extractable(c.forwardRef((e,r)=>{const{__scopeProgress:a,...o}=e,t=A(g,a),i=t.max-(t.value??0),p=-t.width*(i/100);return v(E,{"data-state":I(t.value,t.max),"data-value":t.value??void 0,"data-max":t.max,x:p,width:t.width,...o,ref:r})}));P.displayName=g;function D(e,r){return`${Math.round(e/r*100)}%`}function I(e,r){return e==null?"indeterminate":e===r?"complete":"loading"}function m(e){return typeof e=="number"}function f(e){return m(e)&&!isNaN(e)&&e>0}function V(e,r){return m(e)&&!isNaN(e)&&e<=r&&e>=0}function F(e,r){return`Invalid prop \`max\` of value \`${e}\` supplied to \`${r}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${d}\`.`}function G(e,r){return`Invalid prop \`value\` of value \`${e}\` supplied to \`${r}\`. The \`value\` prop must be:
|
|
60
2
|
- a positive number
|
|
61
|
-
- less than the value passed to \`max\` (or ${
|
|
3
|
+
- less than the value passed to \`max\` (or ${d} if no \`max\` prop is set)
|
|
62
4
|
- \`null\` if the progress is indeterminate.
|
|
63
5
|
|
|
64
|
-
Defaulting to \`null
|
|
65
|
-
}
|
|
66
|
-
const DEFAULT_MAX = 100;
|
|
67
|
-
const ProgressFrame = styled(ThemeableStack, {
|
|
68
|
-
name: PROGRESS_NAME,
|
|
69
|
-
borderRadius: 1e5,
|
|
70
|
-
overflow: "hidden",
|
|
71
|
-
backgrounded: true,
|
|
72
|
-
variants: {
|
|
73
|
-
size: {
|
|
74
|
-
"...size": (val) => {
|
|
75
|
-
const size = Math.round(getVariableValue(getSize(val)) * 0.25);
|
|
76
|
-
return {
|
|
77
|
-
height: size,
|
|
78
|
-
minWidth: getVariableValue(size) * 20,
|
|
79
|
-
width: "100%"
|
|
80
|
-
};
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
const Progress = withStaticProperties(
|
|
86
|
-
ProgressFrame.extractable(
|
|
87
|
-
React.forwardRef(
|
|
88
|
-
(props, forwardedRef) => {
|
|
89
|
-
const {
|
|
90
|
-
__scopeProgress,
|
|
91
|
-
value: valueProp,
|
|
92
|
-
max: maxProp,
|
|
93
|
-
getValueLabel = defaultGetValueLabel,
|
|
94
|
-
size = "$true",
|
|
95
|
-
...progressProps
|
|
96
|
-
} = props;
|
|
97
|
-
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
98
|
-
const value = isValidValueNumber(valueProp, max) ? valueProp : null;
|
|
99
|
-
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
100
|
-
const [width, setWidth] = React.useState(0);
|
|
101
|
-
return /* @__PURE__ */ jsx(ProgressProvider, { scope: __scopeProgress, value, max, width, children: /* @__PURE__ */ jsx(
|
|
102
|
-
ProgressFrame,
|
|
103
|
-
{
|
|
104
|
-
size,
|
|
105
|
-
"aria-valuemax": max,
|
|
106
|
-
"aria-valuemin": 0,
|
|
107
|
-
"aria-valuenow": isNumber(value) ? value : void 0,
|
|
108
|
-
"aria-valuetext": valueLabel,
|
|
109
|
-
role: "progressbar",
|
|
110
|
-
"data-state": getProgressState(value, max),
|
|
111
|
-
"data-value": value ?? void 0,
|
|
112
|
-
"data-max": max,
|
|
113
|
-
...progressProps,
|
|
114
|
-
onLayout: (e) => {
|
|
115
|
-
var _a;
|
|
116
|
-
setWidth(e.nativeEvent.layout.width);
|
|
117
|
-
(_a = progressProps.onLayout) == null ? void 0 : _a.call(progressProps, e);
|
|
118
|
-
},
|
|
119
|
-
ref: forwardedRef
|
|
120
|
-
}
|
|
121
|
-
) });
|
|
122
|
-
}
|
|
123
|
-
)
|
|
124
|
-
),
|
|
125
|
-
{
|
|
126
|
-
Indicator: ProgressIndicator
|
|
127
|
-
}
|
|
128
|
-
);
|
|
129
|
-
Progress.displayName = PROGRESS_NAME;
|
|
130
|
-
Progress.propTypes = {
|
|
131
|
-
max(props, propName, componentName) {
|
|
132
|
-
const propValue = props[propName];
|
|
133
|
-
const strVal = String(propValue);
|
|
134
|
-
if (propValue && !isValidMaxNumber(propValue)) {
|
|
135
|
-
return new Error(getInvalidMaxError(strVal, componentName));
|
|
136
|
-
}
|
|
137
|
-
return null;
|
|
138
|
-
},
|
|
139
|
-
value(props, propName, componentName) {
|
|
140
|
-
const valueProp = props[propName];
|
|
141
|
-
const strVal = String(valueProp);
|
|
142
|
-
const max = isValidMaxNumber(props.max) ? props.max : DEFAULT_MAX;
|
|
143
|
-
if (valueProp != null && !isValidValueNumber(valueProp, max)) {
|
|
144
|
-
return new Error(getInvalidValueError(strVal, componentName));
|
|
145
|
-
}
|
|
146
|
-
return null;
|
|
147
|
-
}
|
|
148
|
-
};
|
|
149
|
-
export {
|
|
150
|
-
Progress,
|
|
151
|
-
ProgressFrame,
|
|
152
|
-
ProgressIndicator,
|
|
153
|
-
ProgressIndicatorFrame,
|
|
154
|
-
createProgressScope
|
|
155
|
-
};
|
|
6
|
+
Defaulting to \`null\`.`}const d=100,N=S(w,{name:l,borderRadius:1e5,overflow:"hidden",backgrounded:!0,variants:{size:{"...size":e=>{const r=Math.round(y(R(e))*.25);return{height:r,minWidth:y(r)*20,width:"100%"}}}}}),x=M(N.extractable(c.forwardRef((e,r)=>{const{__scopeProgress:a,value:o,max:t,getValueLabel:i=D,size:p="$true",...u}=e,s=f(t)?t:d,n=V(o,s)?o:null,_=m(n)?i(n,s):void 0,[T,L]=c.useState(0);return v(k,{scope:a,value:n,max:s,width:T,children:v(N,{size:p,"aria-valuemax":s,"aria-valuemin":0,"aria-valuenow":m(n)?n:void 0,"aria-valuetext":_,role:"progressbar","data-state":I(n,s),"data-value":n??void 0,"data-max":s,...u,onLayout:b=>{var h;L(b.nativeEvent.layout.width),(h=u.onLayout)==null||h.call(u,b)},ref:r})})})),{Indicator:P});x.displayName=l,x.propTypes={max(e,r,a){const o=e[r],t=String(o);return o&&!f(o)?new Error(F(t,a)):null},value(e,r,a){const o=e[r],t=String(o),i=f(e.max)?e.max:d;return o!=null&&!V(o,i)?new Error(G(t,a)):null}};export{x as Progress,N as ProgressFrame,P as ProgressIndicator,E as ProgressIndicatorFrame,C as createProgressScope};
|
|
156
7
|
//# sourceMappingURL=Progress.mjs.map
|
|
@@ -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, getVariableValue, styled, withStaticProperties } from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { getSize } from '@tamagui/get-size'\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(\n value: number | undefined | null,\n maxValue: number\n): 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 return isNumber(max) && !isNaN(max) && max > 0\n}\n\nfunction isValidValueNumber(value: any, max: number): value is number {\n return isNumber(value) && !isNaN(value) && value <= max && value >= 0\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 } as const,\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 = '$true',\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": "AAyCQ
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAyCQ,cAAAA,MAAA,oBAtCR,OAAmB,oBAAAC,EAAkB,UAAAC,EAAQ,wBAAAC,MAA4B,gBACzE,OAAgB,sBAAAC,MAA0B,0BAC1C,OAAS,WAAAC,MAAe,oBACxB,OAAS,kBAAAC,MAAmC,kBAC5C,UAAYC,MAAW,QAGvB,MAAMC,EAAgB,WAEhB,CAACC,EAAuBC,CAAmB,EAAIN,EAAmBI,CAAa,EAE/E,CAACG,EAAkBC,CAAkB,EACzCH,EAA4CD,CAAa,EAMrDK,EAAiB,oBAKVC,EAAyBZ,EAAOI,EAAgB,CAC3D,KAAMO,EACN,OAAQ,OACR,MAAO,OACP,aAAc,EAChB,CAAC,EAEKE,EAAoBD,EAAuB,YAC/CP,EAAM,WACJ,CAACS,EAA4CC,IAAiB,CAC5D,KAAM,CAAE,gBAAAC,EAAiB,GAAGC,CAAe,EAAIH,EACzCI,EAAUR,EAAmBC,EAAgBK,CAAe,EAC5DG,EAAMD,EAAQ,KAAOA,EAAQ,OAAS,GACtCE,EAAI,CAACF,EAAQ,OAASC,EAAM,KAClC,OACErB,EAACc,EAAA,CACC,aAAYS,EAAiBH,EAAQ,MAAOA,EAAQ,GAAG,EACvD,aAAYA,EAAQ,OAAS,OAC7B,WAAUA,EAAQ,IAClB,EAAGE,EACH,MAAOF,EAAQ,MACd,GAAGD,EACJ,IAAKF,EACP,CAEJ,CACF,CACF,EAEAF,EAAkB,YAAcF,EAIhC,SAASW,EAAqBC,EAAeC,EAAa,CACxD,MAAO,GAAG,KAAK,MAAOD,EAAQC,EAAO,GAAG,IAC1C,CAEA,SAASH,EACPE,EACAE,EACe,CACf,OAAOF,GAAS,KAAO,gBAAkBA,IAAUE,EAAW,WAAa,SAC7E,CAEA,SAASC,EAASH,EAA6B,CAC7C,OAAO,OAAOA,GAAU,QAC1B,CAEA,SAASI,EAAiBH,EAAyB,CACjD,OAAOE,EAASF,CAAG,GAAK,CAAC,MAAMA,CAAG,GAAKA,EAAM,CAC/C,CAEA,SAASI,EAAmBL,EAAYC,EAA8B,CACpE,OAAOE,EAASH,CAAK,GAAK,CAAC,MAAMA,CAAK,GAAKA,GAASC,GAAOD,GAAS,CACtE,CAGA,SAASM,EAAmBC,EAAmBC,EAAuB,CACpE,MAAO,mCAAmCD,qBAA6BC,0EAAsFC,MAC/J,CAEA,SAASC,EAAqBH,EAAmBC,EAAuB,CACtE,MAAO,qCAAqCD,qBAA6BC;AAAA;AAAA,gDAE3BC;AAAA;AAAA;AAAA,wBAIhD,CAMA,MAAMA,EAAc,IAUPE,EAAgBlC,EAAOI,EAAgB,CAClD,KAAME,EACN,aAAc,IACd,SAAU,SACV,aAAc,GAEd,SAAU,CACR,KAAM,CACJ,UAAY6B,GAAQ,CAClB,MAAMC,EAAO,KAAK,MAAMrC,EAAiBI,EAAQgC,CAAG,CAAC,EAAI,GAAI,EAC7D,MAAO,CACL,OAAQC,EACR,SAAUrC,EAAiBqC,CAAI,EAAI,GACnC,MAAO,MACT,CACF,CACF,CACF,CACF,CAAC,EAQKC,EAAWpC,EACfiC,EAAc,YACZ7B,EAAM,WACJ,CAACS,EAAmCC,IAAiB,CACnD,KAAM,CACJ,gBAAAC,EACA,MAAOsB,EACP,IAAKC,EACL,cAAAC,EAAgBlB,EAChB,KAAAc,EAAO,QACP,GAAGK,CACL,EAAI3B,EAEEU,EAAMG,EAAiBY,CAAO,EAAIA,EAAUP,EAC5CT,EAAQK,EAAmBU,EAAWd,CAAG,EAAIc,EAAY,KACzDI,EAAahB,EAASH,CAAK,EAAIiB,EAAcjB,EAAOC,CAAG,EAAI,OAC3D,CAACmB,EAAOC,CAAQ,EAAIvC,EAAM,SAAS,CAAC,EAE1C,OACEP,EAACW,EAAA,CAAiB,MAAOO,EAAiB,MAAOO,EAAO,IAAKC,EAAK,MAAOmB,EACvE,SAAA7C,EAACoC,EAAA,CACC,KAAME,EACN,gBAAeZ,EACf,gBAAe,EACf,gBAAeE,EAASH,CAAK,EAAIA,EAAQ,OACzC,iBAAgBmB,EAEhB,KAAK,cACL,aAAYrB,EAAiBE,EAAOC,CAAG,EACvC,aAAYD,GAAS,OACrB,WAAUC,EACT,GAAGiB,EACJ,SAAWI,GAAM,CAxK/B,IAAAC,EAyKgBF,EAASC,EAAE,YAAY,OAAO,KAAK,GACnCC,EAAAL,EAAc,WAAd,MAAAK,EAAA,KAAAL,EAAyBI,EAC3B,EACA,IAAK9B,EACP,EACF,CAEJ,CACF,CACF,EACA,CACE,UAAWF,CACb,CACF,EAEAwB,EAAS,YAAc/B,EAEvB+B,EAAS,UAAY,CACnB,IAAIvB,EAAOiC,EAAUhB,EAAe,CAClC,MAAMD,EAAYhB,EAAMiC,CAAQ,EAC1BC,EAAS,OAAOlB,CAAS,EAC/B,OAAIA,GAAa,CAACH,EAAiBG,CAAS,EACnC,IAAI,MAAMD,EAAmBmB,EAAQjB,CAAa,CAAC,EAErD,IACT,EACA,MAAMjB,EAAOiC,EAAUhB,EAAe,CACpC,MAAMO,EAAYxB,EAAMiC,CAAQ,EAC1BC,EAAS,OAAOV,CAAS,EACzBd,EAAMG,EAAiBb,EAAM,GAAG,EAAIA,EAAM,IAAMkB,EACtD,OAAIM,GAAa,MAAQ,CAACV,EAAmBU,EAAWd,CAAG,EAClD,IAAI,MAAMS,EAAqBe,EAAQjB,CAAa,CAAC,EAEvD,IACT,CACF",
|
|
6
|
+
"names": ["jsx", "getVariableValue", "styled", "withStaticProperties", "createContextScope", "getSize", "ThemeableStack", "React", "PROGRESS_NAME", "createProgressContext", "createProgressScope", "ProgressProvider", "useProgressContext", "INDICATOR_NAME", "ProgressIndicatorFrame", "ProgressIndicator", "props", "forwardedRef", "__scopeProgress", "indicatorProps", "context", "pct", "x", "getProgressState", "defaultGetValueLabel", "value", "max", "maxValue", "isNumber", "isValidMaxNumber", "isValidValueNumber", "getInvalidMaxError", "propValue", "componentName", "DEFAULT_MAX", "getInvalidValueError", "ProgressFrame", "val", "size", "Progress", "valueProp", "maxProp", "getValueLabel", "progressProps", "valueLabel", "width", "setWidth", "e", "_a", "propName", "strVal"]
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export*from"./Progress";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
package/dist/esm/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export*from"./Progress";
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/esm/index.mjs.map
CHANGED
package/dist/jsx/Progress.js
CHANGED
|
@@ -1,148 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
3
|
-
import { getSize } from "@tamagui/get-size";
|
|
4
|
-
import { ThemeableStack } from "@tamagui/stacks";
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
const PROGRESS_NAME = "Progress";
|
|
7
|
-
const [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME);
|
|
8
|
-
const [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);
|
|
9
|
-
const INDICATOR_NAME = "ProgressIndicator";
|
|
10
|
-
const ProgressIndicatorFrame = styled(ThemeableStack, {
|
|
11
|
-
name: INDICATOR_NAME,
|
|
12
|
-
height: "100%",
|
|
13
|
-
width: "100%",
|
|
14
|
-
backgrounded: true
|
|
15
|
-
});
|
|
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 <ProgressIndicatorFrame
|
|
24
|
-
data-state={getProgressState(context.value, context.max)}
|
|
25
|
-
data-value={context.value ?? void 0}
|
|
26
|
-
data-max={context.max}
|
|
27
|
-
x={x}
|
|
28
|
-
width={context.width}
|
|
29
|
-
{...indicatorProps}
|
|
30
|
-
ref={forwardedRef}
|
|
31
|
-
/>;
|
|
32
|
-
}
|
|
33
|
-
)
|
|
34
|
-
);
|
|
35
|
-
ProgressIndicator.displayName = INDICATOR_NAME;
|
|
36
|
-
function defaultGetValueLabel(value, max) {
|
|
37
|
-
return `${Math.round(value / max * 100)}%`;
|
|
38
|
-
}
|
|
39
|
-
function getProgressState(value, maxValue) {
|
|
40
|
-
return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
|
|
41
|
-
}
|
|
42
|
-
function isNumber(value) {
|
|
43
|
-
return typeof value === "number";
|
|
44
|
-
}
|
|
45
|
-
function isValidMaxNumber(max) {
|
|
46
|
-
return isNumber(max) && !isNaN(max) && max > 0;
|
|
47
|
-
}
|
|
48
|
-
function isValidValueNumber(value, max) {
|
|
49
|
-
return isNumber(value) && !isNaN(value) && value <= max && value >= 0;
|
|
50
|
-
}
|
|
51
|
-
function getInvalidMaxError(propValue, componentName) {
|
|
52
|
-
return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${DEFAULT_MAX}\`.`;
|
|
53
|
-
}
|
|
54
|
-
function getInvalidValueError(propValue, componentName) {
|
|
55
|
-
return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be:
|
|
1
|
+
import{getVariableValue as b,styled as h,withStaticProperties as T}from"@tamagui/core";import{createContextScope as L}from"@tamagui/create-context";import{getSize as M}from"@tamagui/get-size";import{ThemeableStack as y}from"@tamagui/stacks";import*as p from"react";const u="Progress",[$,R]=L(u),[C,k]=$(u),c="ProgressIndicator",S=h(y,{name:c,height:"100%",width:"100%",backgrounded:!0}),g=S.extractable(p.forwardRef((e,r)=>{const{__scopeProgress:a,...o}=e,t=k(c,a),i=t.max-(t.value??0),d=-t.width*(i/100);return<S data-state={w(t.value,t.max)}data-value={t.value??void 0}data-max={t.max}x={d}width={t.width}{...o}ref={r}/>}));g.displayName=c;function A(e,r){return`${Math.round(e/r*100)}%`}function w(e,r){return e==null?"indeterminate":e===r?"complete":"loading"}function l(e){return typeof e=="number"}function P(e){return l(e)&&!isNaN(e)&&e>0}function E(e,r){return l(e)&&!isNaN(e)&&e<=r&&e>=0}function D(e,r){return`Invalid prop \`max\` of value \`${e}\` supplied to \`${r}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${m}\`.`}function F(e,r){return`Invalid prop \`value\` of value \`${e}\` supplied to \`${r}\`. The \`value\` prop must be:
|
|
56
2
|
- a positive number
|
|
57
|
-
- less than the value passed to \`max\` (or ${
|
|
3
|
+
- less than the value passed to \`max\` (or ${m} if no \`max\` prop is set)
|
|
58
4
|
- \`null\` if the progress is indeterminate.
|
|
59
5
|
|
|
60
|
-
Defaulting to \`null
|
|
61
|
-
}
|
|
62
|
-
const DEFAULT_MAX = 100;
|
|
63
|
-
const ProgressFrame = styled(ThemeableStack, {
|
|
64
|
-
name: PROGRESS_NAME,
|
|
65
|
-
borderRadius: 1e5,
|
|
66
|
-
overflow: "hidden",
|
|
67
|
-
backgrounded: true,
|
|
68
|
-
variants: {
|
|
69
|
-
size: {
|
|
70
|
-
"...size": (val) => {
|
|
71
|
-
const size = Math.round(getVariableValue(getSize(val)) * 0.25);
|
|
72
|
-
return {
|
|
73
|
-
height: size,
|
|
74
|
-
minWidth: getVariableValue(size) * 20,
|
|
75
|
-
width: "100%"
|
|
76
|
-
};
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
});
|
|
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 = "$true",
|
|
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 <ProgressProvider scope={__scopeProgress} value={value} max={max} width={width}><ProgressFrame
|
|
98
|
-
size={size}
|
|
99
|
-
aria-valuemax={max}
|
|
100
|
-
aria-valuemin={0}
|
|
101
|
-
aria-valuenow={isNumber(value) ? value : void 0}
|
|
102
|
-
aria-valuetext={valueLabel}
|
|
103
|
-
role="progressbar"
|
|
104
|
-
data-state={getProgressState(value, max)}
|
|
105
|
-
data-value={value ?? void 0}
|
|
106
|
-
data-max={max}
|
|
107
|
-
{...progressProps}
|
|
108
|
-
onLayout={(e) => {
|
|
109
|
-
setWidth(e.nativeEvent.layout.width);
|
|
110
|
-
progressProps.onLayout?.(e);
|
|
111
|
-
}}
|
|
112
|
-
ref={forwardedRef}
|
|
113
|
-
/></ProgressProvider>;
|
|
114
|
-
}
|
|
115
|
-
)
|
|
116
|
-
),
|
|
117
|
-
{
|
|
118
|
-
Indicator: ProgressIndicator
|
|
119
|
-
}
|
|
120
|
-
);
|
|
121
|
-
Progress.displayName = PROGRESS_NAME;
|
|
122
|
-
Progress.propTypes = {
|
|
123
|
-
max(props, propName, componentName) {
|
|
124
|
-
const propValue = props[propName];
|
|
125
|
-
const strVal = String(propValue);
|
|
126
|
-
if (propValue && !isValidMaxNumber(propValue)) {
|
|
127
|
-
return new Error(getInvalidMaxError(strVal, componentName));
|
|
128
|
-
}
|
|
129
|
-
return null;
|
|
130
|
-
},
|
|
131
|
-
value(props, propName, componentName) {
|
|
132
|
-
const valueProp = props[propName];
|
|
133
|
-
const strVal = String(valueProp);
|
|
134
|
-
const max = isValidMaxNumber(props.max) ? props.max : DEFAULT_MAX;
|
|
135
|
-
if (valueProp != null && !isValidValueNumber(valueProp, max)) {
|
|
136
|
-
return new Error(getInvalidValueError(strVal, componentName));
|
|
137
|
-
}
|
|
138
|
-
return null;
|
|
139
|
-
}
|
|
140
|
-
};
|
|
141
|
-
export {
|
|
142
|
-
Progress,
|
|
143
|
-
ProgressFrame,
|
|
144
|
-
ProgressIndicator,
|
|
145
|
-
ProgressIndicatorFrame,
|
|
146
|
-
createProgressScope
|
|
147
|
-
};
|
|
6
|
+
Defaulting to \`null\`.`}const m=100,I=h(y,{name:u,borderRadius:1e5,overflow:"hidden",backgrounded:!0,variants:{size:{"...size":e=>{const r=Math.round(b(M(e))*.25);return{height:r,minWidth:b(r)*20,width:"100%"}}}}}),f=T(I.extractable(p.forwardRef((e,r)=>{const{__scopeProgress:a,value:o,max:t,getValueLabel:i=A,size:d="$true",...x}=e,s=P(t)?t:m,n=E(o,s)?o:null,V=l(n)?i(n,s):void 0,[N,_]=p.useState(0);return<C scope={a}value={n}max={s}width={N}><I size={d}aria-valuemax={s}aria-valuemin={0}aria-valuenow={l(n)?n:void 0}aria-valuetext={V}role="progressbar"data-state={w(n,s)}data-value={n??void 0}data-max={s}{...x}onLayout={v=>{_(v.nativeEvent.layout.width),x.onLayout?.(v)}}ref={r}/></C>})),{Indicator:g});f.displayName=u,f.propTypes={max(e,r,a){const o=e[r],t=String(o);return o&&!P(o)?new Error(D(t,a)):null},value(e,r,a){const o=e[r],t=String(o),i=P(e.max)?e.max:m;return o!=null&&!E(o,i)?new Error(F(t,a)):null}};export{f as Progress,I as ProgressFrame,g as ProgressIndicator,S as ProgressIndicatorFrame,R as createProgressScope};
|
|
148
7
|
//# sourceMappingURL=Progress.js.map
|
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, getVariableValue, styled, withStaticProperties } from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { getSize } from '@tamagui/get-size'\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(\n value: number | undefined | null,\n maxValue: number\n): 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 return isNumber(max) && !isNaN(max) && max > 0\n}\n\nfunction isValidValueNumber(value: any, max: number): value is number {\n return isNumber(value) && !isNaN(value) && value <= max && value >= 0\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 } as const,\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 = '$true',\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,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["getVariableValue", "styled", "withStaticProperties", "createContextScope", "getSize", "ThemeableStack", "React", "PROGRESS_NAME", "createProgressContext", "createProgressScope", "ProgressProvider", "useProgressContext", "INDICATOR_NAME", "ProgressIndicatorFrame", "ProgressIndicator", "props", "forwardedRef", "__scopeProgress", "indicatorProps", "context", "pct", "x", "getProgressState", "defaultGetValueLabel", "value", "max", "maxValue", "isNumber", "isValidMaxNumber", "isValidValueNumber", "getInvalidMaxError", "propValue", "componentName", "DEFAULT_MAX", "getInvalidValueError", "ProgressFrame", "val", "size", "Progress", "valueProp", "maxProp", "getValueLabel", "progressProps", "valueLabel", "width", "setWidth", "e", "propName", "strVal"]
|
|
7
7
|
}
|
package/dist/jsx/Progress.mjs
CHANGED
|
@@ -1,148 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
3
|
-
import { getSize } from "@tamagui/get-size";
|
|
4
|
-
import { ThemeableStack } from "@tamagui/stacks";
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
const PROGRESS_NAME = "Progress";
|
|
7
|
-
const [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME);
|
|
8
|
-
const [ProgressProvider, useProgressContext] = createProgressContext(PROGRESS_NAME);
|
|
9
|
-
const INDICATOR_NAME = "ProgressIndicator";
|
|
10
|
-
const ProgressIndicatorFrame = styled(ThemeableStack, {
|
|
11
|
-
name: INDICATOR_NAME,
|
|
12
|
-
height: "100%",
|
|
13
|
-
width: "100%",
|
|
14
|
-
backgrounded: true
|
|
15
|
-
});
|
|
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 <ProgressIndicatorFrame
|
|
24
|
-
data-state={getProgressState(context.value, context.max)}
|
|
25
|
-
data-value={context.value ?? void 0}
|
|
26
|
-
data-max={context.max}
|
|
27
|
-
x={x}
|
|
28
|
-
width={context.width}
|
|
29
|
-
{...indicatorProps}
|
|
30
|
-
ref={forwardedRef}
|
|
31
|
-
/>;
|
|
32
|
-
}
|
|
33
|
-
)
|
|
34
|
-
);
|
|
35
|
-
ProgressIndicator.displayName = INDICATOR_NAME;
|
|
36
|
-
function defaultGetValueLabel(value, max) {
|
|
37
|
-
return `${Math.round(value / max * 100)}%`;
|
|
38
|
-
}
|
|
39
|
-
function getProgressState(value, maxValue) {
|
|
40
|
-
return value == null ? "indeterminate" : value === maxValue ? "complete" : "loading";
|
|
41
|
-
}
|
|
42
|
-
function isNumber(value) {
|
|
43
|
-
return typeof value === "number";
|
|
44
|
-
}
|
|
45
|
-
function isValidMaxNumber(max) {
|
|
46
|
-
return isNumber(max) && !isNaN(max) && max > 0;
|
|
47
|
-
}
|
|
48
|
-
function isValidValueNumber(value, max) {
|
|
49
|
-
return isNumber(value) && !isNaN(value) && value <= max && value >= 0;
|
|
50
|
-
}
|
|
51
|
-
function getInvalidMaxError(propValue, componentName) {
|
|
52
|
-
return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${DEFAULT_MAX}\`.`;
|
|
53
|
-
}
|
|
54
|
-
function getInvalidValueError(propValue, componentName) {
|
|
55
|
-
return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be:
|
|
1
|
+
import{getVariableValue as b,styled as h,withStaticProperties as T}from"@tamagui/core";import{createContextScope as L}from"@tamagui/create-context";import{getSize as M}from"@tamagui/get-size";import{ThemeableStack as y}from"@tamagui/stacks";import*as p from"react";const u="Progress",[$,R]=L(u),[C,k]=$(u),c="ProgressIndicator",S=h(y,{name:c,height:"100%",width:"100%",backgrounded:!0}),g=S.extractable(p.forwardRef((e,r)=>{const{__scopeProgress:a,...o}=e,t=k(c,a),i=t.max-(t.value??0),d=-t.width*(i/100);return<S data-state={w(t.value,t.max)}data-value={t.value??void 0}data-max={t.max}x={d}width={t.width}{...o}ref={r}/>}));g.displayName=c;function A(e,r){return`${Math.round(e/r*100)}%`}function w(e,r){return e==null?"indeterminate":e===r?"complete":"loading"}function l(e){return typeof e=="number"}function P(e){return l(e)&&!isNaN(e)&&e>0}function E(e,r){return l(e)&&!isNaN(e)&&e<=r&&e>=0}function D(e,r){return`Invalid prop \`max\` of value \`${e}\` supplied to \`${r}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${m}\`.`}function F(e,r){return`Invalid prop \`value\` of value \`${e}\` supplied to \`${r}\`. The \`value\` prop must be:
|
|
56
2
|
- a positive number
|
|
57
|
-
- less than the value passed to \`max\` (or ${
|
|
3
|
+
- less than the value passed to \`max\` (or ${m} if no \`max\` prop is set)
|
|
58
4
|
- \`null\` if the progress is indeterminate.
|
|
59
5
|
|
|
60
|
-
Defaulting to \`null
|
|
61
|
-
}
|
|
62
|
-
const DEFAULT_MAX = 100;
|
|
63
|
-
const ProgressFrame = styled(ThemeableStack, {
|
|
64
|
-
name: PROGRESS_NAME,
|
|
65
|
-
borderRadius: 1e5,
|
|
66
|
-
overflow: "hidden",
|
|
67
|
-
backgrounded: true,
|
|
68
|
-
variants: {
|
|
69
|
-
size: {
|
|
70
|
-
"...size": (val) => {
|
|
71
|
-
const size = Math.round(getVariableValue(getSize(val)) * 0.25);
|
|
72
|
-
return {
|
|
73
|
-
height: size,
|
|
74
|
-
minWidth: getVariableValue(size) * 20,
|
|
75
|
-
width: "100%"
|
|
76
|
-
};
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
});
|
|
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 = "$true",
|
|
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 <ProgressProvider scope={__scopeProgress} value={value} max={max} width={width}><ProgressFrame
|
|
98
|
-
size={size}
|
|
99
|
-
aria-valuemax={max}
|
|
100
|
-
aria-valuemin={0}
|
|
101
|
-
aria-valuenow={isNumber(value) ? value : void 0}
|
|
102
|
-
aria-valuetext={valueLabel}
|
|
103
|
-
role="progressbar"
|
|
104
|
-
data-state={getProgressState(value, max)}
|
|
105
|
-
data-value={value ?? void 0}
|
|
106
|
-
data-max={max}
|
|
107
|
-
{...progressProps}
|
|
108
|
-
onLayout={(e) => {
|
|
109
|
-
setWidth(e.nativeEvent.layout.width);
|
|
110
|
-
progressProps.onLayout?.(e);
|
|
111
|
-
}}
|
|
112
|
-
ref={forwardedRef}
|
|
113
|
-
/></ProgressProvider>;
|
|
114
|
-
}
|
|
115
|
-
)
|
|
116
|
-
),
|
|
117
|
-
{
|
|
118
|
-
Indicator: ProgressIndicator
|
|
119
|
-
}
|
|
120
|
-
);
|
|
121
|
-
Progress.displayName = PROGRESS_NAME;
|
|
122
|
-
Progress.propTypes = {
|
|
123
|
-
max(props, propName, componentName) {
|
|
124
|
-
const propValue = props[propName];
|
|
125
|
-
const strVal = String(propValue);
|
|
126
|
-
if (propValue && !isValidMaxNumber(propValue)) {
|
|
127
|
-
return new Error(getInvalidMaxError(strVal, componentName));
|
|
128
|
-
}
|
|
129
|
-
return null;
|
|
130
|
-
},
|
|
131
|
-
value(props, propName, componentName) {
|
|
132
|
-
const valueProp = props[propName];
|
|
133
|
-
const strVal = String(valueProp);
|
|
134
|
-
const max = isValidMaxNumber(props.max) ? props.max : DEFAULT_MAX;
|
|
135
|
-
if (valueProp != null && !isValidValueNumber(valueProp, max)) {
|
|
136
|
-
return new Error(getInvalidValueError(strVal, componentName));
|
|
137
|
-
}
|
|
138
|
-
return null;
|
|
139
|
-
}
|
|
140
|
-
};
|
|
141
|
-
export {
|
|
142
|
-
Progress,
|
|
143
|
-
ProgressFrame,
|
|
144
|
-
ProgressIndicator,
|
|
145
|
-
ProgressIndicatorFrame,
|
|
146
|
-
createProgressScope
|
|
147
|
-
};
|
|
6
|
+
Defaulting to \`null\`.`}const m=100,I=h(y,{name:u,borderRadius:1e5,overflow:"hidden",backgrounded:!0,variants:{size:{"...size":e=>{const r=Math.round(b(M(e))*.25);return{height:r,minWidth:b(r)*20,width:"100%"}}}}}),f=T(I.extractable(p.forwardRef((e,r)=>{const{__scopeProgress:a,value:o,max:t,getValueLabel:i=A,size:d="$true",...x}=e,s=P(t)?t:m,n=E(o,s)?o:null,V=l(n)?i(n,s):void 0,[N,_]=p.useState(0);return<C scope={a}value={n}max={s}width={N}><I size={d}aria-valuemax={s}aria-valuemin={0}aria-valuenow={l(n)?n:void 0}aria-valuetext={V}role="progressbar"data-state={w(n,s)}data-value={n??void 0}data-max={s}{...x}onLayout={v=>{_(v.nativeEvent.layout.width),x.onLayout?.(v)}}ref={r}/></C>})),{Indicator:g});f.displayName=u,f.propTypes={max(e,r,a){const o=e[r],t=String(o);return o&&!P(o)?new Error(D(t,a)):null},value(e,r,a){const o=e[r],t=String(o),i=P(e.max)?e.max:m;return o!=null&&!E(o,i)?new Error(F(t,a)):null}};export{f as Progress,I as ProgressFrame,g as ProgressIndicator,S as ProgressIndicatorFrame,R as createProgressScope};
|
|
148
7
|
//# sourceMappingURL=Progress.mjs.map
|
|
@@ -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, getVariableValue, styled, withStaticProperties } from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { getSize } from '@tamagui/get-size'\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(\n value: number | undefined | null,\n maxValue: number\n): 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 return isNumber(max) && !isNaN(max) && max > 0\n}\n\nfunction isValidValueNumber(value: any, max: number): value is number {\n return isNumber(value) && !isNaN(value) && value <= max && value >= 0\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 } as const,\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 = '$true',\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,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["getVariableValue", "styled", "withStaticProperties", "createContextScope", "getSize", "ThemeableStack", "React", "PROGRESS_NAME", "createProgressContext", "createProgressScope", "ProgressProvider", "useProgressContext", "INDICATOR_NAME", "ProgressIndicatorFrame", "ProgressIndicator", "props", "forwardedRef", "__scopeProgress", "indicatorProps", "context", "pct", "x", "getProgressState", "defaultGetValueLabel", "value", "max", "maxValue", "isNumber", "isValidMaxNumber", "isValidValueNumber", "getInvalidMaxError", "propValue", "componentName", "DEFAULT_MAX", "getInvalidValueError", "ProgressFrame", "val", "size", "Progress", "valueProp", "maxProp", "getValueLabel", "progressProps", "valueLabel", "width", "setWidth", "e", "propName", "strVal"]
|
|
7
7
|
}
|
package/dist/jsx/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export*from"./Progress";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/jsx/index.js.map
CHANGED
package/dist/jsx/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export*from"./Progress";
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/jsx/index.mjs.map
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/progress",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.4",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -31,18 +31,18 @@
|
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@tamagui/compose-refs": "1.13.
|
|
35
|
-
"@tamagui/core": "1.13.
|
|
36
|
-
"@tamagui/create-context": "1.13.
|
|
37
|
-
"@tamagui/get-size": "1.13.
|
|
38
|
-
"@tamagui/stacks": "1.13.
|
|
34
|
+
"@tamagui/compose-refs": "1.13.4",
|
|
35
|
+
"@tamagui/core": "1.13.4",
|
|
36
|
+
"@tamagui/create-context": "1.13.4",
|
|
37
|
+
"@tamagui/get-size": "1.13.4",
|
|
38
|
+
"@tamagui/stacks": "1.13.4"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": "*",
|
|
42
42
|
"react-native": "*"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@tamagui/build": "1.13.
|
|
45
|
+
"@tamagui/build": "1.13.4",
|
|
46
46
|
"react": "^18.2.0",
|
|
47
47
|
"react-native": "^0.71.4"
|
|
48
48
|
},
|