@tamagui/progress 1.0.1-beta.56 → 1.0.1-beta.60
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 +12 -3
- package/dist/cjs/Progress.js.map +2 -2
- package/dist/esm/Progress.js +12 -3
- package/dist/esm/Progress.js.map +2 -2
- package/dist/jsx/Progress.js +9 -3
- package/package.json +7 -6
- package/src/Progress.tsx +215 -0
- package/src/index.ts +1 -0
- package/types/Progress.d.ts.map +1 -1
package/dist/cjs/Progress.js
CHANGED
|
@@ -72,12 +72,14 @@ const ProgressIndicatorFrame = (0, import_core.styled)(import_stacks.ThemeableSt
|
|
|
72
72
|
const ProgressIndicator = ProgressIndicatorFrame.extractable(React.forwardRef((props, forwardedRef) => {
|
|
73
73
|
const _a = props, { __scopeProgress } = _a, indicatorProps = __objRest(_a, ["__scopeProgress"]);
|
|
74
74
|
const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
|
75
|
-
const
|
|
75
|
+
const pct = context.max - (context.value ?? 0);
|
|
76
|
+
const x = -context.width * (pct / 100);
|
|
76
77
|
return /* @__PURE__ */ React.createElement(ProgressIndicatorFrame, __spreadProps(__spreadValues({
|
|
77
78
|
"data-state": getProgressState(context.value, context.max),
|
|
78
79
|
"data-value": context.value ?? void 0,
|
|
79
80
|
"data-max": context.max,
|
|
80
|
-
x
|
|
81
|
+
x,
|
|
82
|
+
width: context.width
|
|
81
83
|
}, indicatorProps), {
|
|
82
84
|
ref: forwardedRef
|
|
83
85
|
}));
|
|
@@ -152,10 +154,12 @@ const Progress = (0, import_core.withStaticProperties)(ProgressFrame.extractable
|
|
|
152
154
|
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
153
155
|
const value = isValidValueNumber(valueProp, max) ? valueProp : null;
|
|
154
156
|
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
157
|
+
const [width, setWidth] = React.useState(0);
|
|
155
158
|
return /* @__PURE__ */ React.createElement(ProgressProvider, {
|
|
156
159
|
scope: __scopeProgress,
|
|
157
160
|
value,
|
|
158
|
-
max
|
|
161
|
+
max,
|
|
162
|
+
width
|
|
159
163
|
}, /* @__PURE__ */ React.createElement(ProgressFrame, __spreadProps(__spreadValues({
|
|
160
164
|
size,
|
|
161
165
|
"aria-valuemax": max,
|
|
@@ -167,6 +171,11 @@ const Progress = (0, import_core.withStaticProperties)(ProgressFrame.extractable
|
|
|
167
171
|
"data-value": value ?? void 0,
|
|
168
172
|
"data-max": max
|
|
169
173
|
}, progressProps), {
|
|
174
|
+
onLayout: (e) => {
|
|
175
|
+
var _a2;
|
|
176
|
+
setWidth(e.nativeEvent.layout.width);
|
|
177
|
+
(_a2 = progressProps.onLayout) == null ? void 0 : _a2.call(progressProps, e);
|
|
178
|
+
},
|
|
170
179
|
ref: forwardedRef
|
|
171
180
|
})));
|
|
172
181
|
})), {
|
package/dist/cjs/Progress.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Progress.tsx"],
|
|
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 }\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\nconst 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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;AAKvB,MAAM,yBAAyB,wBAAO,8BAAgB;AAAA,EACpD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,cAAc;AAChB,CAAC;AAED,MAAM,oBAAoB,uBAAuB,YAC/C,MAAM,WACJ,CAAC,OAA4C,iBAAiB;AAC5D,QAA+C,YAAvC,sBAAuC,IAAnB,2BAAmB,IAAnB,CAApB;AACR,QAAM,UAAU,mBAAmB,gBAAgB,eAAe;AAClE,QAAM,
|
|
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\nconst 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\nconst 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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Progress.js
CHANGED
|
@@ -18,12 +18,14 @@ const ProgressIndicator = ProgressIndicatorFrame.extractable(React.forwardRef((p
|
|
|
18
18
|
var _a, _b;
|
|
19
19
|
const { __scopeProgress, ...indicatorProps } = props;
|
|
20
20
|
const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
|
21
|
-
const
|
|
21
|
+
const pct = context.max - ((_a = context.value) != null ? _a : 0);
|
|
22
|
+
const x = -context.width * (pct / 100);
|
|
22
23
|
return /* @__PURE__ */ React.createElement(ProgressIndicatorFrame, {
|
|
23
24
|
"data-state": getProgressState(context.value, context.max),
|
|
24
25
|
"data-value": (_b = context.value) != null ? _b : void 0,
|
|
25
26
|
"data-max": context.max,
|
|
26
|
-
x
|
|
27
|
+
x,
|
|
28
|
+
width: context.width,
|
|
27
29
|
...indicatorProps,
|
|
28
30
|
ref: forwardedRef
|
|
29
31
|
});
|
|
@@ -93,10 +95,12 @@ const Progress = withStaticProperties(ProgressFrame.extractable(React.forwardRef
|
|
|
93
95
|
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
94
96
|
const value = isValidValueNumber(valueProp, max) ? valueProp : null;
|
|
95
97
|
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
98
|
+
const [width, setWidth] = React.useState(0);
|
|
96
99
|
return /* @__PURE__ */ React.createElement(ProgressProvider, {
|
|
97
100
|
scope: __scopeProgress,
|
|
98
101
|
value,
|
|
99
|
-
max
|
|
102
|
+
max,
|
|
103
|
+
width
|
|
100
104
|
}, /* @__PURE__ */ React.createElement(ProgressFrame, {
|
|
101
105
|
size,
|
|
102
106
|
"aria-valuemax": max,
|
|
@@ -108,6 +112,11 @@ const Progress = withStaticProperties(ProgressFrame.extractable(React.forwardRef
|
|
|
108
112
|
"data-value": value != null ? value : void 0,
|
|
109
113
|
"data-max": max,
|
|
110
114
|
...progressProps,
|
|
115
|
+
onLayout: (e) => {
|
|
116
|
+
var _a;
|
|
117
|
+
setWidth(e.nativeEvent.layout.width);
|
|
118
|
+
(_a = progressProps.onLayout) == null ? void 0 : _a.call(progressProps, e);
|
|
119
|
+
},
|
|
111
120
|
ref: forwardedRef
|
|
112
121
|
}));
|
|
113
122
|
})), {
|
package/dist/esm/Progress.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Progress.tsx"],
|
|
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 }\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\nconst 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
|
|
5
|
-
"mappings": ";;AAGA;AACA;AACA;AACA;AAGA,MAAM,gBAAgB;AAEtB,MAAM,CAAC,uBAAuB,uBAAuB,mBAAmB,aAAa;AAErF,MAAM,CAAC,kBAAkB,sBACvB,sBAA4C,aAAa;AAM3D,MAAM,iBAAiB;AAKvB,MAAM,yBAAyB,OAAO,gBAAgB;AAAA,EACpD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,cAAc;AAChB,CAAC;AAED,MAAM,oBAAoB,uBAAuB,YAC/C,MAAM,WACJ,CAAC,OAA4C,iBAAiB;AAlClE;AAmCM,QAAM,EAAE,oBAAoB,mBAAmB;AAC/C,QAAM,UAAU,mBAAmB,gBAAgB,eAAe;AAClE,QAAM,
|
|
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\nconst 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\nconst 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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Progress.js
CHANGED
|
@@ -18,8 +18,9 @@ const ProgressIndicator = ProgressIndicatorFrame.extractable(React.forwardRef((p
|
|
|
18
18
|
var _a, _b;
|
|
19
19
|
const { __scopeProgress, ...indicatorProps } = props;
|
|
20
20
|
const context = useProgressContext(INDICATOR_NAME, __scopeProgress);
|
|
21
|
-
const
|
|
22
|
-
|
|
21
|
+
const pct = context.max - ((_a = context.value) != null ? _a : 0);
|
|
22
|
+
const x = -context.width * (pct / 100);
|
|
23
|
+
return <ProgressIndicatorFrame data-state={getProgressState(context.value, context.max)} data-value={(_b = context.value) != null ? _b : void 0} data-max={context.max} x={x} width={context.width} {...indicatorProps} ref={forwardedRef} />;
|
|
23
24
|
}));
|
|
24
25
|
ProgressIndicator.displayName = INDICATOR_NAME;
|
|
25
26
|
function defaultGetValueLabel(value, max) {
|
|
@@ -86,7 +87,12 @@ const Progress = withStaticProperties(ProgressFrame.extractable(React.forwardRef
|
|
|
86
87
|
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
|
|
87
88
|
const value = isValidValueNumber(valueProp, max) ? valueProp : null;
|
|
88
89
|
const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
|
|
89
|
-
|
|
90
|
+
const [width, setWidth] = React.useState(0);
|
|
91
|
+
return <ProgressProvider scope={__scopeProgress} value={value} max={max} width={width}><ProgressFrame size={size} aria-valuemax={max} aria-valuemin={0} aria-valuenow={isNumber(value) ? value : void 0} aria-valuetext={valueLabel} role="progressbar" data-state={getProgressState(value, max)} data-value={value != null ? value : void 0} data-max={max} {...progressProps} onLayout={(e) => {
|
|
92
|
+
var _a;
|
|
93
|
+
setWidth(e.nativeEvent.layout.width);
|
|
94
|
+
(_a = progressProps.onLayout) == null ? void 0 : _a.call(progressProps, e);
|
|
95
|
+
}} ref={forwardedRef} /></ProgressProvider>;
|
|
90
96
|
})), {
|
|
91
97
|
Indicator: ProgressIndicator
|
|
92
98
|
});
|
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.60",
|
|
4
4
|
"sideEffects": true,
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"module": "dist/esm",
|
|
9
9
|
"module:jsx": "dist/jsx",
|
|
10
10
|
"files": [
|
|
11
|
+
"src",
|
|
11
12
|
"types",
|
|
12
13
|
"dist"
|
|
13
14
|
],
|
|
@@ -18,10 +19,10 @@
|
|
|
18
19
|
"clean:build": "tamagui-build clean:build"
|
|
19
20
|
},
|
|
20
21
|
"dependencies": {
|
|
21
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
22
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
23
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
24
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
22
|
+
"@tamagui/compose-refs": "^1.0.1-beta.60",
|
|
23
|
+
"@tamagui/core": "^1.0.1-beta.60",
|
|
24
|
+
"@tamagui/create-context": "^1.0.1-beta.60",
|
|
25
|
+
"@tamagui/stacks": "^1.0.1-beta.60"
|
|
25
26
|
},
|
|
26
27
|
"peerDependencies": {
|
|
27
28
|
"react": "*",
|
|
@@ -29,7 +30,7 @@
|
|
|
29
30
|
"react-native": "*"
|
|
30
31
|
},
|
|
31
32
|
"devDependencies": {
|
|
32
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
33
|
+
"@tamagui/build": "^1.0.1-beta.60",
|
|
33
34
|
"@types/react-native": "^0.67.3",
|
|
34
35
|
"react": "*",
|
|
35
36
|
"react-dom": "*",
|
package/src/Progress.tsx
ADDED
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
// forked from Radix UI
|
|
2
|
+
// https://github.com/radix-ui/primitives/blob/main/packages/react/progress/src/Progress.tsx
|
|
3
|
+
|
|
4
|
+
import { GetProps, getSize, getVariableValue, styled, withStaticProperties } from '@tamagui/core'
|
|
5
|
+
import { Scope, createContextScope } from '@tamagui/create-context'
|
|
6
|
+
import { ThemeableStack, YStackProps } from '@tamagui/stacks'
|
|
7
|
+
import * as React from 'react'
|
|
8
|
+
import { View } from 'react-native'
|
|
9
|
+
|
|
10
|
+
const PROGRESS_NAME = 'Progress'
|
|
11
|
+
|
|
12
|
+
const [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME)
|
|
13
|
+
type ProgressContextValue = { value: number | null; max: number; width: number }
|
|
14
|
+
const [ProgressProvider, useProgressContext] =
|
|
15
|
+
createProgressContext<ProgressContextValue>(PROGRESS_NAME)
|
|
16
|
+
|
|
17
|
+
/* -------------------------------------------------------------------------------------------------
|
|
18
|
+
* ProgressIndicator
|
|
19
|
+
* -----------------------------------------------------------------------------------------------*/
|
|
20
|
+
|
|
21
|
+
const INDICATOR_NAME = 'ProgressIndicator'
|
|
22
|
+
|
|
23
|
+
type ProgressIndicatorElement = TamaguiElement
|
|
24
|
+
interface ProgressIndicatorProps extends YStackProps {}
|
|
25
|
+
|
|
26
|
+
const ProgressIndicatorFrame = styled(ThemeableStack, {
|
|
27
|
+
name: INDICATOR_NAME,
|
|
28
|
+
height: '100%',
|
|
29
|
+
width: '100%',
|
|
30
|
+
backgrounded: true,
|
|
31
|
+
})
|
|
32
|
+
|
|
33
|
+
const ProgressIndicator = ProgressIndicatorFrame.extractable(
|
|
34
|
+
React.forwardRef<ProgressIndicatorElement, ProgressIndicatorProps>(
|
|
35
|
+
(props: ScopedProps<ProgressIndicatorProps>, forwardedRef) => {
|
|
36
|
+
const { __scopeProgress, ...indicatorProps } = props
|
|
37
|
+
const context = useProgressContext(INDICATOR_NAME, __scopeProgress)
|
|
38
|
+
const pct = context.max - (context.value ?? 0)
|
|
39
|
+
const x = -context.width * (pct / 100)
|
|
40
|
+
return (
|
|
41
|
+
<ProgressIndicatorFrame
|
|
42
|
+
data-state={getProgressState(context.value, context.max)}
|
|
43
|
+
data-value={context.value ?? undefined}
|
|
44
|
+
data-max={context.max}
|
|
45
|
+
x={x}
|
|
46
|
+
width={context.width}
|
|
47
|
+
{...indicatorProps}
|
|
48
|
+
ref={forwardedRef}
|
|
49
|
+
/>
|
|
50
|
+
)
|
|
51
|
+
}
|
|
52
|
+
)
|
|
53
|
+
)
|
|
54
|
+
|
|
55
|
+
ProgressIndicator.displayName = INDICATOR_NAME
|
|
56
|
+
|
|
57
|
+
/* ---------------------------------------------------------------------------------------------- */
|
|
58
|
+
|
|
59
|
+
function defaultGetValueLabel(value: number, max: number) {
|
|
60
|
+
return `${Math.round((value / max) * 100)}%`
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function getProgressState(value: number | undefined | null, maxValue: number): ProgressState {
|
|
64
|
+
return value == null ? 'indeterminate' : value === maxValue ? 'complete' : 'loading'
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
function isNumber(value: any): value is number {
|
|
68
|
+
return typeof value === 'number'
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
function isValidMaxNumber(max: any): max is number {
|
|
72
|
+
// prettier-ignore
|
|
73
|
+
return (
|
|
74
|
+
isNumber(max) &&
|
|
75
|
+
!isNaN(max) &&
|
|
76
|
+
max > 0
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
function isValidValueNumber(value: any, max: number): value is number {
|
|
81
|
+
// prettier-ignore
|
|
82
|
+
return (
|
|
83
|
+
isNumber(value) &&
|
|
84
|
+
!isNaN(value) &&
|
|
85
|
+
value <= max &&
|
|
86
|
+
value >= 0
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// Split this out for clearer readability of the error message.
|
|
91
|
+
function getInvalidMaxError(propValue: string, componentName: string) {
|
|
92
|
+
return `Invalid prop \`max\` of value \`${propValue}\` supplied to \`${componentName}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${DEFAULT_MAX}\`.`
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
function getInvalidValueError(propValue: string, componentName: string) {
|
|
96
|
+
return `Invalid prop \`value\` of value \`${propValue}\` supplied to \`${componentName}\`. The \`value\` prop must be:
|
|
97
|
+
- a positive number
|
|
98
|
+
- less than the value passed to \`max\` (or ${DEFAULT_MAX} if no \`max\` prop is set)
|
|
99
|
+
- \`null\` if the progress is indeterminate.
|
|
100
|
+
|
|
101
|
+
Defaulting to \`null\`.`
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* -------------------------------------------------------------------------------------------------
|
|
105
|
+
* Progress
|
|
106
|
+
* -----------------------------------------------------------------------------------------------*/
|
|
107
|
+
|
|
108
|
+
const DEFAULT_MAX = 100
|
|
109
|
+
|
|
110
|
+
type ScopedProps<P> = P & { __scopeProgress?: Scope }
|
|
111
|
+
|
|
112
|
+
type ProgressState = 'indeterminate' | 'complete' | 'loading'
|
|
113
|
+
|
|
114
|
+
type TamaguiElement = HTMLElement | View
|
|
115
|
+
|
|
116
|
+
type ProgressElement = TamaguiElement
|
|
117
|
+
|
|
118
|
+
const ProgressFrame = styled(ThemeableStack, {
|
|
119
|
+
name: PROGRESS_NAME,
|
|
120
|
+
borderRadius: 100_000,
|
|
121
|
+
overflow: 'hidden',
|
|
122
|
+
backgrounded: true,
|
|
123
|
+
|
|
124
|
+
variants: {
|
|
125
|
+
size: {
|
|
126
|
+
'...size': (val) => {
|
|
127
|
+
const size = Math.round(getVariableValue(getSize(val)) * 0.25)
|
|
128
|
+
return {
|
|
129
|
+
height: size,
|
|
130
|
+
minWidth: getVariableValue(size) * 20,
|
|
131
|
+
width: '100%',
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
},
|
|
135
|
+
},
|
|
136
|
+
})
|
|
137
|
+
|
|
138
|
+
type ProgressProps = GetProps<typeof ProgressFrame> & {
|
|
139
|
+
value?: number | null | undefined
|
|
140
|
+
max?: number
|
|
141
|
+
getValueLabel?(value: number, max: number): string
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
const Progress = withStaticProperties(
|
|
145
|
+
ProgressFrame.extractable(
|
|
146
|
+
React.forwardRef<ProgressElement, ProgressProps>(
|
|
147
|
+
(props: ScopedProps<ProgressProps>, forwardedRef) => {
|
|
148
|
+
const {
|
|
149
|
+
__scopeProgress,
|
|
150
|
+
value: valueProp,
|
|
151
|
+
max: maxProp,
|
|
152
|
+
getValueLabel = defaultGetValueLabel,
|
|
153
|
+
size = '$4',
|
|
154
|
+
...progressProps
|
|
155
|
+
} = props
|
|
156
|
+
|
|
157
|
+
const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX
|
|
158
|
+
const value = isValidValueNumber(valueProp, max) ? valueProp : null
|
|
159
|
+
const valueLabel = isNumber(value) ? getValueLabel(value, max) : undefined
|
|
160
|
+
const [width, setWidth] = React.useState(0)
|
|
161
|
+
|
|
162
|
+
return (
|
|
163
|
+
<ProgressProvider scope={__scopeProgress} value={value} max={max} width={width}>
|
|
164
|
+
<ProgressFrame
|
|
165
|
+
size={size}
|
|
166
|
+
aria-valuemax={max}
|
|
167
|
+
aria-valuemin={0}
|
|
168
|
+
aria-valuenow={isNumber(value) ? value : undefined}
|
|
169
|
+
aria-valuetext={valueLabel}
|
|
170
|
+
// @ts-ignore
|
|
171
|
+
role="progressbar"
|
|
172
|
+
data-state={getProgressState(value, max)}
|
|
173
|
+
data-value={value ?? undefined}
|
|
174
|
+
data-max={max}
|
|
175
|
+
{...progressProps}
|
|
176
|
+
onLayout={(e) => {
|
|
177
|
+
setWidth(e.nativeEvent.layout.width)
|
|
178
|
+
progressProps.onLayout?.(e)
|
|
179
|
+
}}
|
|
180
|
+
ref={forwardedRef}
|
|
181
|
+
/>
|
|
182
|
+
</ProgressProvider>
|
|
183
|
+
)
|
|
184
|
+
}
|
|
185
|
+
)
|
|
186
|
+
),
|
|
187
|
+
{
|
|
188
|
+
Indicator: ProgressIndicator,
|
|
189
|
+
}
|
|
190
|
+
)
|
|
191
|
+
|
|
192
|
+
Progress.displayName = PROGRESS_NAME
|
|
193
|
+
|
|
194
|
+
Progress.propTypes = {
|
|
195
|
+
max(props, propName, componentName) {
|
|
196
|
+
const propValue = props[propName]
|
|
197
|
+
const strVal = String(propValue)
|
|
198
|
+
if (propValue && !isValidMaxNumber(propValue)) {
|
|
199
|
+
return new Error(getInvalidMaxError(strVal, componentName))
|
|
200
|
+
}
|
|
201
|
+
return null
|
|
202
|
+
},
|
|
203
|
+
value(props, propName, componentName) {
|
|
204
|
+
const valueProp = props[propName]
|
|
205
|
+
const strVal = String(valueProp)
|
|
206
|
+
const max = isValidMaxNumber(props.max) ? props.max : DEFAULT_MAX
|
|
207
|
+
if (valueProp != null && !isValidValueNumber(valueProp, max)) {
|
|
208
|
+
return new Error(getInvalidValueError(strVal, componentName))
|
|
209
|
+
}
|
|
210
|
+
return null
|
|
211
|
+
},
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
export { createProgressScope, Progress, ProgressIndicator }
|
|
215
|
+
export type { ProgressProps, ProgressIndicatorProps }
|
package/src/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Progress'
|
package/types/Progress.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../src/Progress.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAA2D,MAAM,eAAe,CAAA;AAEjG,OAAO,EAAkB,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAInC,QAAA,MAA8B,mBAAmB,+CAAqC,CAAA;AAYtF,UAAU,sBAAuB,SAAQ,WAAW;CAAG;AASvD,QAAA,MAAM,iBAAiB,+
|
|
1
|
+
{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../src/Progress.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAA2D,MAAM,eAAe,CAAA;AAEjG,OAAO,EAAkB,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAInC,QAAA,MAA8B,mBAAmB,+CAAqC,CAAA;AAYtF,UAAU,sBAAuB,SAAQ,WAAW;CAAG;AASvD,QAAA,MAAM,iBAAiB,+FAoBtB,CAAA;AA6DD,aAAK,cAAc,GAAG,WAAW,GAAG,IAAI,CAAA;AAIxC,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkBjB,CAAA;AAEF,aAAK,aAAa,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,GAAG;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IACjC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CACnD,CAAA;AAED,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YALJ,MAAM,GAAG,IAAI,GAAG,SAAS;;0BAEX,MAAM,OAAO,MAAM,GAAG,MAAM;;;CAiDnD,CAAA;AAwBD,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA;AAC3D,YAAY,EAAE,aAAa,EAAE,sBAAsB,EAAE,CAAA"}
|