@tamagui/progress 1.0.1-beta.55 → 1.0.1-beta.59

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.
@@ -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 progress = context.max - (context.value ?? 0);
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: `${-progress}%`
81
+ x,
82
+ width: context.width
81
83
  }, indicatorProps), {
82
84
  ref: forwardedRef
83
85
  }));
@@ -125,10 +127,11 @@ const ProgressFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
125
127
  variants: {
126
128
  size: {
127
129
  "...size": (val) => {
128
- const size = (0, import_core.getSize)(val, -2);
130
+ const size = Math.round((0, import_core.getVariableValue)((0, import_core.getSize)(val)) * 0.25);
129
131
  return {
130
132
  height: size,
131
- width: (0, import_core.getVariableValue)(size) * 10
133
+ minWidth: (0, import_core.getVariableValue)(size) * 20,
134
+ width: "100%"
132
135
  };
133
136
  }
134
137
  }
@@ -151,10 +154,12 @@ const Progress = (0, import_core.withStaticProperties)(ProgressFrame.extractable
151
154
  const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
152
155
  const value = isValidValueNumber(valueProp, max) ? valueProp : null;
153
156
  const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
157
+ const [width, setWidth] = React.useState(0);
154
158
  return /* @__PURE__ */ React.createElement(ProgressProvider, {
155
159
  scope: __scopeProgress,
156
160
  value,
157
- max
161
+ max,
162
+ width
158
163
  }, /* @__PURE__ */ React.createElement(ProgressFrame, __spreadProps(__spreadValues({
159
164
  size,
160
165
  "aria-valuemax": max,
@@ -166,6 +171,11 @@ const Progress = (0, import_core.withStaticProperties)(ProgressFrame.extractable
166
171
  "data-value": value ?? void 0,
167
172
  "data-max": max
168
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
+ },
169
179
  ref: forwardedRef
170
180
  })));
171
181
  })), {
@@ -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 progress = context.max - (context.value ?? 0)\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={`${-progress}%`}\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 = getSize(val, -2)\n return {\n height: size,\n width: getVariableValue(size) * 10,\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\n return (\n <ProgressProvider scope={__scopeProgress} value={value} max={max}>\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 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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",
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
  }
@@ -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 progress = context.max - ((_a = context.value) != null ? _a : 0);
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: `${-progress}%`,
27
+ x,
28
+ width: context.width,
27
29
  ...indicatorProps,
28
30
  ref: forwardedRef
29
31
  });
@@ -71,10 +73,11 @@ const ProgressFrame = styled(ThemeableStack, {
71
73
  variants: {
72
74
  size: {
73
75
  "...size": (val) => {
74
- const size = getSize(val, -2);
76
+ const size = Math.round(getVariableValue(getSize(val)) * 0.25);
75
77
  return {
76
78
  height: size,
77
- width: getVariableValue(size) * 10
79
+ minWidth: getVariableValue(size) * 20,
80
+ width: "100%"
78
81
  };
79
82
  }
80
83
  }
@@ -92,10 +95,12 @@ const Progress = withStaticProperties(ProgressFrame.extractable(React.forwardRef
92
95
  const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
93
96
  const value = isValidValueNumber(valueProp, max) ? valueProp : null;
94
97
  const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
98
+ const [width, setWidth] = React.useState(0);
95
99
  return /* @__PURE__ */ React.createElement(ProgressProvider, {
96
100
  scope: __scopeProgress,
97
101
  value,
98
- max
102
+ max,
103
+ width
99
104
  }, /* @__PURE__ */ React.createElement(ProgressFrame, {
100
105
  size,
101
106
  "aria-valuemax": max,
@@ -107,6 +112,11 @@ const Progress = withStaticProperties(ProgressFrame.extractable(React.forwardRef
107
112
  "data-value": value != null ? value : void 0,
108
113
  "data-max": max,
109
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
+ },
110
120
  ref: forwardedRef
111
121
  }));
112
122
  })), {
@@ -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 progress = context.max - (context.value ?? 0)\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={`${-progress}%`}\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 = getSize(val, -2)\n return {\n height: size,\n width: getVariableValue(size) * 10,\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\n return (\n <ProgressProvider scope={__scopeProgress} value={value} max={max}>\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 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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",
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
  }
@@ -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 progress = context.max - ((_a = context.value) != null ? _a : 0);
22
- return <ProgressIndicatorFrame data-state={getProgressState(context.value, context.max)} data-value={(_b = context.value) != null ? _b : void 0} data-max={context.max} x={`${-progress}%`} {...indicatorProps} ref={forwardedRef} />;
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) {
@@ -64,10 +65,11 @@ const ProgressFrame = styled(ThemeableStack, {
64
65
  variants: {
65
66
  size: {
66
67
  "...size": (val) => {
67
- const size = getSize(val, -2);
68
+ const size = Math.round(getVariableValue(getSize(val)) * 0.25);
68
69
  return {
69
70
  height: size,
70
- width: getVariableValue(size) * 10
71
+ minWidth: getVariableValue(size) * 20,
72
+ width: "100%"
71
73
  };
72
74
  }
73
75
  }
@@ -85,7 +87,12 @@ const Progress = withStaticProperties(ProgressFrame.extractable(React.forwardRef
85
87
  const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;
86
88
  const value = isValidValueNumber(valueProp, max) ? valueProp : null;
87
89
  const valueLabel = isNumber(value) ? getValueLabel(value, max) : void 0;
88
- return <ProgressProvider scope={__scopeProgress} value={value} max={max}><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} ref={forwardedRef} /></ProgressProvider>;
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>;
89
96
  })), {
90
97
  Indicator: ProgressIndicator
91
98
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/progress",
3
- "version": "1.0.1-beta.55",
3
+ "version": "1.0.1-beta.59",
4
4
  "sideEffects": true,
5
5
  "source": "src/index.ts",
6
6
  "types": "./types/index.d.ts",
@@ -18,10 +18,10 @@
18
18
  "clean:build": "tamagui-build clean:build"
19
19
  },
20
20
  "dependencies": {
21
- "@tamagui/compose-refs": "^1.0.1-beta.55",
22
- "@tamagui/core": "^1.0.1-beta.55",
23
- "@tamagui/create-context": "^1.0.1-beta.55",
24
- "@tamagui/stacks": "^1.0.1-beta.55"
21
+ "@tamagui/compose-refs": "^1.0.1-beta.59",
22
+ "@tamagui/core": "^1.0.1-beta.59",
23
+ "@tamagui/create-context": "^1.0.1-beta.59",
24
+ "@tamagui/stacks": "^1.0.1-beta.59"
25
25
  },
26
26
  "peerDependencies": {
27
27
  "react": "*",
@@ -29,7 +29,7 @@
29
29
  "react-native": "*"
30
30
  },
31
31
  "devDependencies": {
32
- "@tamagui/build": "^1.0.1-beta.55",
32
+ "@tamagui/build": "^1.0.1-beta.59",
33
33
  "@types/react-native": "^0.67.3",
34
34
  "react": "*",
35
35
  "react-dom": "*",
@@ -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,+FAkBtB,CAAA;AA6DD,aAAK,cAAc,GAAG,WAAW,GAAG,IAAI,CAAA;AAIxC,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBjB,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;;;CA4CnD,CAAA;AAwBD,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA;AAC3D,YAAY,EAAE,aAAa,EAAE,sBAAsB,EAAE,CAAA"}
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"}