@tamagui/progress 1.0.1-beta.107 → 1.0.1-beta.110
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 +16 -49
- package/dist/cjs/Progress.js.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/Progress.js +15 -51
- package/dist/esm/Progress.js.map +1 -1
- package/package.json +6 -6
package/dist/cjs/Progress.js
CHANGED
|
@@ -1,38 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
9
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __objRest = (source, exclude) => {
|
|
25
|
-
var target = {};
|
|
26
|
-
for (var prop in source)
|
|
27
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
if (source != null && __getOwnPropSymbols)
|
|
30
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
-
target[prop] = source[prop];
|
|
33
|
-
}
|
|
34
|
-
return target;
|
|
35
|
-
};
|
|
36
8
|
var __export = (target, all) => {
|
|
37
9
|
for (var name in all)
|
|
38
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -71,19 +43,19 @@ const ProgressIndicatorFrame = (0, import_core.styled)(import_stacks.ThemeableSt
|
|
|
71
43
|
backgrounded: true
|
|
72
44
|
});
|
|
73
45
|
const ProgressIndicator = ProgressIndicatorFrame.extractable(React.forwardRef((props, forwardedRef) => {
|
|
74
|
-
const
|
|
46
|
+
const { __scopeProgress, ...indicatorProps } = props;
|
|
75
47
|
const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
|
76
48
|
const pct = context.max - (context.value ?? 0);
|
|
77
49
|
const x = -context.width * (pct / 100);
|
|
78
|
-
return /* @__PURE__ */ React.createElement(ProgressIndicatorFrame,
|
|
50
|
+
return /* @__PURE__ */ React.createElement(ProgressIndicatorFrame, {
|
|
79
51
|
"data-state": getProgressState(context.value, context.max),
|
|
80
52
|
"data-value": context.value ?? void 0,
|
|
81
53
|
"data-max": context.max,
|
|
82
54
|
x,
|
|
83
|
-
width: context.width
|
|
84
|
-
|
|
55
|
+
width: context.width,
|
|
56
|
+
...indicatorProps,
|
|
85
57
|
ref: forwardedRef
|
|
86
|
-
})
|
|
58
|
+
});
|
|
87
59
|
}));
|
|
88
60
|
ProgressIndicator.displayName = INDICATOR_NAME;
|
|
89
61
|
function defaultGetValueLabel(value, max) {
|
|
@@ -132,19 +104,14 @@ const ProgressFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
|
132
104
|
}
|
|
133
105
|
});
|
|
134
106
|
const Progress = (0, import_core.withStaticProperties)(ProgressFrame.extractable(React.forwardRef((props, forwardedRef) => {
|
|
135
|
-
const
|
|
107
|
+
const {
|
|
136
108
|
__scopeProgress,
|
|
137
109
|
value: valueProp,
|
|
138
110
|
max: maxProp,
|
|
139
111
|
getValueLabel = defaultGetValueLabel,
|
|
140
|
-
size = "$4"
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
"value",
|
|
144
|
-
"max",
|
|
145
|
-
"getValueLabel",
|
|
146
|
-
"size"
|
|
147
|
-
]);
|
|
112
|
+
size = "$4",
|
|
113
|
+
...progressProps
|
|
114
|
+
} = props;
|
|
148
115
|
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
149
116
|
const value = isValidValueNumber(valueProp, max) ? valueProp : null;
|
|
150
117
|
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
@@ -154,7 +121,7 @@ const Progress = (0, import_core.withStaticProperties)(ProgressFrame.extractable
|
|
|
154
121
|
value,
|
|
155
122
|
max,
|
|
156
123
|
width
|
|
157
|
-
}, /* @__PURE__ */ React.createElement(ProgressFrame,
|
|
124
|
+
}, /* @__PURE__ */ React.createElement(ProgressFrame, {
|
|
158
125
|
size,
|
|
159
126
|
"aria-valuemax": max,
|
|
160
127
|
"aria-valuemin": 0,
|
|
@@ -163,15 +130,15 @@ const Progress = (0, import_core.withStaticProperties)(ProgressFrame.extractable
|
|
|
163
130
|
role: "progressbar",
|
|
164
131
|
"data-state": getProgressState(value, max),
|
|
165
132
|
"data-value": value ?? void 0,
|
|
166
|
-
"data-max": max
|
|
167
|
-
|
|
133
|
+
"data-max": max,
|
|
134
|
+
...progressProps,
|
|
168
135
|
onLayout: (e) => {
|
|
169
|
-
var
|
|
136
|
+
var _a;
|
|
170
137
|
setWidth(e.nativeEvent.layout.width);
|
|
171
|
-
(
|
|
138
|
+
(_a = progressProps.onLayout) == null ? void 0 : _a.call(progressProps, e);
|
|
172
139
|
},
|
|
173
140
|
ref: forwardedRef
|
|
174
|
-
}))
|
|
141
|
+
}));
|
|
175
142
|
})), {
|
|
176
143
|
Indicator: ProgressIndicator
|
|
177
144
|
});
|
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": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAkF;AAClF,4BAA0C;AAC1C,oBAA4C;AAC5C,YAAuB;AAGvB,MAAM,gBAAgB;AAEtB,MAAM,CAAC,uBAAuB,uBAAuB,8CAAmB,aAAa;AAErF,MAAM,CAAC,kBAAkB,sBACvB,sBAA4C,aAAa;AAM3D,MAAM,iBAAiB;AAKhB,MAAM,yBAAyB,wBAAO,8BAAgB;AAAA,EAC3D,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,cAAc;AAChB,CAAC;AAED,MAAM,oBAAoB,uBAAuB,YAC/C,MAAM,WACJ,CAAC,OAA4C,iBAAiB;AAC5D,QAAM,EAAE,oBAAoB,mBAAmB;AAC/C,QAAM,UAAU,mBAAmB,gBAAgB,eAAe;AAClE,QAAM,MAAM,QAAQ,MAAO,SAAQ,SAAS;AAC5C,QAAM,IAAI,CAAC,QAAQ,QAAS,OAAM;AAClC,SACE,oCAAC;AAAA,IACC,cAAY,iBAAiB,QAAQ,OAAO,QAAQ,GAAG;AAAA,IACvD,cAAY,QAAQ,SAAS;AAAA,IAC7B,YAAU,QAAQ;AAAA,IAClB;AAAA,IACA,OAAO,QAAQ;AAAA,IACd,GAAG;AAAA,IACJ,KAAK;AAAA,GACP;AAEJ,CACF,CACF;AAEA,kBAAkB,cAAc;AAIhC,8BAA8B,OAAe,KAAa;AACxD,SAAO,GAAG,KAAK,MAAO,QAAQ,MAAO,GAAG;AAC1C;AAEA,0BAA0B,OAAkC,UAAiC;AAC3F,SAAO,SAAS,OAAO,kBAAkB,UAAU,WAAW,aAAa;AAC7E;AAEA,kBAAkB,OAA6B;AAC7C,SAAO,OAAO,UAAU;AAC1B;AAEA,0BAA0B,KAAyB;AAEjD,SACE,SAAS,GAAG,KACZ,CAAC,MAAM,GAAG,KACV,MAAM;AAEV;AAEA,4BAA4B,OAAY,KAA8B;AAEpE,SACE,SAAS,KAAK,KACd,CAAC,MAAM,KAAK,KACZ,SAAS,OACT,SAAS;AAEb;AAGA,4BAA4B,WAAmB,eAAuB;AACpE,SAAO,mCAAmC,6BAA6B,sFAAsF;AAC/J;AAEA,8BAA8B,WAAmB,eAAuB;AACtE,SAAO,qCAAqC,6BAA6B;AAAA;AAAA,gDAE3B;AAAA;AAAA;AAAA;AAIhD;AAMA,MAAM,cAAc;AAUb,MAAM,gBAAgB,wBAAO,8BAAgB;AAAA,EAClD,MAAM;AAAA,EACN,cAAc;AAAA,EACd,UAAU;AAAA,EACV,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,QAAQ;AAClB,cAAM,OAAO,KAAK,MAAM,kCAAiB,yBAAQ,GAAG,CAAC,IAAI,IAAI;AAC7D,eAAO;AAAA,UACL,QAAQ;AAAA,UACR,UAAU,kCAAiB,IAAI,IAAI;AAAA,UACnC,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAQD,MAAM,WAAW,sCACf,cAAc,YACZ,MAAM,WACJ,CAAC,OAAmC,iBAAiB;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,OAAO;AAAA,OACJ;AAAA,MACD;AAEJ,QAAM,MAAM,iBAAiB,OAAO,IAAI,UAAU;AAClD,QAAM,QAAQ,mBAAmB,WAAW,GAAG,IAAI,YAAY;AAC/D,QAAM,aAAa,SAAS,KAAK,IAAI,cAAc,OAAO,GAAG,IAAI;AACjE,QAAM,CAAC,OAAO,YAAY,MAAM,SAAS,CAAC;AAE1C,SACE,oCAAC;AAAA,IAAiB,OAAO;AAAA,IAAiB;AAAA,IAAc;AAAA,IAAU;AAAA,KAChE,oCAAC;AAAA,IACC;AAAA,IACA,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,iBAAe,SAAS,KAAK,IAAI,QAAQ;AAAA,IACzC,kBAAgB;AAAA,IAEhB,MAAK;AAAA,IACL,cAAY,iBAAiB,OAAO,GAAG;AAAA,IACvC,cAAY,SAAS;AAAA,IACrB,YAAU;AAAA,IACT,GAAG;AAAA,IACJ,UAAU,CAAC,MAAM;AA/K/B;AAgLgB,eAAS,EAAE,YAAY,OAAO,KAAK;AACnC,0BAAc,aAAd,uCAAyB;AAAA,IAC3B;AAAA,IACA,KAAK;AAAA,GACP,CACF;AAEJ,CACF,CACF,GACA;AAAA,EACE,WAAW;AACb,CACF;AAEA,SAAS,cAAc;AAEvB,SAAS,YAAY;AAAA,EACnB,IAAI,OAAO,UAAU,eAAe;AAClC,UAAM,YAAY,MAAM;AACxB,UAAM,SAAS,OAAO,SAAS;AAC/B,QAAI,aAAa,CAAC,iBAAiB,SAAS,GAAG;AAC7C,aAAO,IAAI,MAAM,mBAAmB,QAAQ,aAAa,CAAC;AAAA,IAC5D;AACA,WAAO;AAAA,EACT;AAAA,EACA,MAAM,OAAO,UAAU,eAAe;AACpC,UAAM,YAAY,MAAM;AACxB,UAAM,SAAS,OAAO,SAAS;AAC/B,UAAM,MAAM,iBAAiB,MAAM,GAAG,IAAI,MAAM,MAAM;AACtD,QAAI,aAAa,QAAQ,CAAC,mBAAmB,WAAW,GAAG,GAAG;AAC5D,aAAO,IAAI,MAAM,qBAAqB,QAAQ,aAAa,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACT;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
package/dist/cjs/index.js.map
CHANGED
package/dist/esm/Progress.js
CHANGED
|
@@ -1,34 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
32
1
|
import { getSize, getVariableValue, styled, withStaticProperties } from "@tamagui/core";
|
|
33
2
|
import { createContextScope } from "@tamagui/create-context";
|
|
34
3
|
import { ThemeableStack } from "@tamagui/stacks";
|
|
@@ -44,19 +13,19 @@ const ProgressIndicatorFrame = styled(ThemeableStack, {
|
|
|
44
13
|
backgrounded: true
|
|
45
14
|
});
|
|
46
15
|
const ProgressIndicator = ProgressIndicatorFrame.extractable(React.forwardRef((props, forwardedRef) => {
|
|
47
|
-
const
|
|
16
|
+
const { __scopeProgress, ...indicatorProps } = props;
|
|
48
17
|
const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
|
49
18
|
const pct = context.max - (context.value ?? 0);
|
|
50
19
|
const x = -context.width * (pct / 100);
|
|
51
|
-
return /* @__PURE__ */ React.createElement(ProgressIndicatorFrame,
|
|
20
|
+
return /* @__PURE__ */ React.createElement(ProgressIndicatorFrame, {
|
|
52
21
|
"data-state": getProgressState(context.value, context.max),
|
|
53
22
|
"data-value": context.value ?? void 0,
|
|
54
23
|
"data-max": context.max,
|
|
55
24
|
x,
|
|
56
|
-
width: context.width
|
|
57
|
-
|
|
25
|
+
width: context.width,
|
|
26
|
+
...indicatorProps,
|
|
58
27
|
ref: forwardedRef
|
|
59
|
-
})
|
|
28
|
+
});
|
|
60
29
|
}));
|
|
61
30
|
ProgressIndicator.displayName = INDICATOR_NAME;
|
|
62
31
|
function defaultGetValueLabel(value, max) {
|
|
@@ -105,19 +74,14 @@ const ProgressFrame = styled(ThemeableStack, {
|
|
|
105
74
|
}
|
|
106
75
|
});
|
|
107
76
|
const Progress = withStaticProperties(ProgressFrame.extractable(React.forwardRef((props, forwardedRef) => {
|
|
108
|
-
const
|
|
77
|
+
const {
|
|
109
78
|
__scopeProgress,
|
|
110
79
|
value: valueProp,
|
|
111
80
|
max: maxProp,
|
|
112
81
|
getValueLabel = defaultGetValueLabel,
|
|
113
|
-
size = "$4"
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
"value",
|
|
117
|
-
"max",
|
|
118
|
-
"getValueLabel",
|
|
119
|
-
"size"
|
|
120
|
-
]);
|
|
82
|
+
size = "$4",
|
|
83
|
+
...progressProps
|
|
84
|
+
} = props;
|
|
121
85
|
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
122
86
|
const value = isValidValueNumber(valueProp, max) ? valueProp : null;
|
|
123
87
|
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
@@ -127,7 +91,7 @@ const Progress = withStaticProperties(ProgressFrame.extractable(React.forwardRef
|
|
|
127
91
|
value,
|
|
128
92
|
max,
|
|
129
93
|
width
|
|
130
|
-
}, /* @__PURE__ */ React.createElement(ProgressFrame,
|
|
94
|
+
}, /* @__PURE__ */ React.createElement(ProgressFrame, {
|
|
131
95
|
size,
|
|
132
96
|
"aria-valuemax": max,
|
|
133
97
|
"aria-valuemin": 0,
|
|
@@ -136,15 +100,15 @@ const Progress = withStaticProperties(ProgressFrame.extractable(React.forwardRef
|
|
|
136
100
|
role: "progressbar",
|
|
137
101
|
"data-state": getProgressState(value, max),
|
|
138
102
|
"data-value": value ?? void 0,
|
|
139
|
-
"data-max": max
|
|
140
|
-
|
|
103
|
+
"data-max": max,
|
|
104
|
+
...progressProps,
|
|
141
105
|
onLayout: (e) => {
|
|
142
|
-
var
|
|
106
|
+
var _a;
|
|
143
107
|
setWidth(e.nativeEvent.layout.width);
|
|
144
|
-
(
|
|
108
|
+
(_a = progressProps.onLayout) == null ? void 0 : _a.call(progressProps, e);
|
|
145
109
|
},
|
|
146
110
|
ref: forwardedRef
|
|
147
|
-
}))
|
|
111
|
+
}));
|
|
148
112
|
})), {
|
|
149
113
|
Indicator: ProgressIndicator
|
|
150
114
|
});
|
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/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.110",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
"clean:build": "tamagui-build clean:build"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
25
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
26
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
24
|
+
"@tamagui/compose-refs": "^1.0.1-beta.110",
|
|
25
|
+
"@tamagui/core": "^1.0.1-beta.110",
|
|
26
|
+
"@tamagui/create-context": "^1.0.1-beta.110",
|
|
27
|
+
"@tamagui/stacks": "^1.0.1-beta.110"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"react": "*",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"react-native": "*"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
35
|
+
"@tamagui/build": "^1.0.1-beta.110",
|
|
36
36
|
"@types/react-native": "^0.69.2",
|
|
37
37
|
"react": "*",
|
|
38
38
|
"react-dom": "*",
|