@utilitywarehouse/hearth-react-native 0.23.0-test-list → 0.23.0
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/.turbo/turbo-build.log +4 -5
- package/.turbo/turbo-lint.log +72 -0
- package/build/components/List/List.js +2 -2
- package/package.json +2 -2
- package/src/components/List/List.tsx +4 -5
- package/build/components/ProgressBar/ProgressBar.d.ts +0 -6
- package/build/components/ProgressBar/ProgressBar.js +0 -35
- package/build/components/ProgressBar/ProgressBar.props.d.ts +0 -60
- package/build/components/ProgressBar/ProgressBar.props.js +0 -1
- package/build/components/ProgressBar/ProgressBarCircular.d.ts +0 -6
- package/build/components/ProgressBar/ProgressBarCircular.js +0 -115
- package/build/components/ProgressBar/ProgressBarLinear.d.ts +0 -6
- package/build/components/ProgressBar/ProgressBarLinear.js +0 -79
- package/build/components/ProgressBar/index.d.ts +0 -2
- package/build/components/ProgressBar/index.js +0 -1
- package/build/components/SegmentedControl/SegmentedControl.context.d.ts +0 -14
- package/build/components/SegmentedControl/SegmentedControl.context.js +0 -9
- package/build/components/SegmentedControl/SegmentedControl.d.ts +0 -6
- package/build/components/SegmentedControl/SegmentedControl.js +0 -199
- package/build/components/SegmentedControl/SegmentedControl.props.d.ts +0 -18
- package/build/components/SegmentedControl/SegmentedControl.props.js +0 -1
- package/build/components/SegmentedControl/SegmentedControlOption.d.ts +0 -18
- package/build/components/SegmentedControl/SegmentedControlOption.js +0 -144
- package/build/components/SegmentedControl/SegmentedControlOption.props.d.ts +0 -14
- package/build/components/SegmentedControl/SegmentedControlOption.props.js +0 -1
- package/build/components/SegmentedControl/index.d.ts +0 -4
- package/build/components/SegmentedControl/index.js +0 -2
- package/build/components/TimePicker/TimePicker.d.ts +0 -6
- package/build/components/TimePicker/TimePicker.js +0 -78
- package/build/components/TimePicker/TimePicker.props.d.ts +0 -45
- package/build/components/TimePicker/TimePicker.props.js +0 -1
- package/build/components/TimePicker/TimePickerView.d.ts +0 -12
- package/build/components/TimePicker/TimePickerView.js +0 -130
- package/build/components/TimePicker/TimePickerWheel.d.ts +0 -8
- package/build/components/TimePicker/TimePickerWheel.js +0 -86
- package/build/components/TimePicker/TimePickerWheel.web.d.ts +0 -8
- package/build/components/TimePicker/TimePickerWheel.web.js +0 -122
- package/build/components/TimePicker/index.d.ts +0 -6
- package/build/components/TimePicker/index.js +0 -3
- package/build/components/TimePickerInput/TimePickerInput.d.ts +0 -6
- package/build/components/TimePickerInput/TimePickerInput.js +0 -127
- package/build/components/TimePickerInput/TimePickerInput.props.d.ts +0 -52
- package/build/components/TimePickerInput/TimePickerInput.props.js +0 -1
- package/build/components/TimePickerInput/TimePickerInputDoneButton.d.ts +0 -8
- package/build/components/TimePickerInput/TimePickerInputDoneButton.js +0 -19
- package/build/components/TimePickerInput/TimePickerInputDoneButton.web.d.ts +0 -5
- package/build/components/TimePickerInput/TimePickerInputDoneButton.web.js +0 -5
- package/build/components/TimePickerInput/index.d.ts +0 -2
- package/build/components/TimePickerInput/index.js +0 -1
- package/build/components/VerificationInput/VerificationInput.utils.d.ts +0 -8
- package/build/components/VerificationInput/VerificationInput.utils.js +0 -17
- package/build/components/VerificationInput/VerificationInput.utils.test.d.ts +0 -1
- package/build/components/VerificationInput/VerificationInput.utils.test.js +0 -36
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
>
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
|
|
2
|
+
> @utilitywarehouse/hearth-react-native@0.23.0 build /home/runner/work/hearth/hearth/packages/react-native
|
|
3
|
+
> tsc
|
|
4
|
+
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
|
|
2
|
+
> @utilitywarehouse/hearth-react-native@0.23.0 lint /home/runner/work/hearth/hearth/packages/react-native
|
|
3
|
+
> TIMING=1 eslint .
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
|
|
7
|
+
6:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
|
|
8
|
+
|
|
9
|
+
/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
|
|
10
|
+
146:6 warning React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
11
|
+
|
|
12
|
+
/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
|
|
13
|
+
109:6 warning React Hook useCallback has an unnecessary dependency: 'modalRef.current'. Either exclude it or remove the dependency array. Mutable values like 'modalRef.current' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
|
|
14
|
+
259:6 warning React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
15
|
+
346:6 warning React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
16
|
+
468:5 warning React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
17
|
+
536:6 warning React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
18
|
+
542:6 warning React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
19
|
+
|
|
20
|
+
/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
|
|
21
|
+
76:6 warning React Hook useMemo has an unnecessary dependency: 'styles.rangeRoot'. Either exclude it or remove the dependency array. Outer scope values like 'styles.rangeRoot' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
|
|
22
|
+
84:6 warning React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
23
|
+
|
|
24
|
+
/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
|
|
25
|
+
179:6 warning React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array react-hooks/exhaustive-deps
|
|
26
|
+
|
|
27
|
+
/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
|
|
28
|
+
52:6 warning React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
|
|
29
|
+
|
|
30
|
+
/home/runner/work/hearth/hearth/packages/react-native/src/components/Input/Input.tsx
|
|
31
|
+
78:8 warning React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
32
|
+
|
|
33
|
+
/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
|
|
34
|
+
74:6 warning React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
|
|
35
|
+
274:5 warning React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
36
|
+
|
|
37
|
+
/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
|
|
38
|
+
66:6 warning React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
|
|
39
|
+
|
|
40
|
+
/home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
|
|
41
|
+
17:9 warning The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook react-hooks/exhaustive-deps
|
|
42
|
+
|
|
43
|
+
/home/runner/work/hearth/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
|
|
44
|
+
53:6 warning React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
45
|
+
53:7 warning React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked react-hooks/exhaustive-deps
|
|
46
|
+
104:5 warning React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array react-hooks/exhaustive-deps
|
|
47
|
+
127:62 warning React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked react-hooks/exhaustive-deps
|
|
48
|
+
|
|
49
|
+
/home/runner/work/hearth/hearth/packages/react-native/src/components/Textarea/Textarea.tsx
|
|
50
|
+
45:6 warning React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
51
|
+
|
|
52
|
+
/home/runner/work/hearth/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
|
|
53
|
+
14:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
|
|
54
|
+
106:14 warning Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components react-refresh/only-export-components
|
|
55
|
+
|
|
56
|
+
/home/runner/work/hearth/hearth/packages/react-native/src/components/VerificationInput/VerificationInput.tsx
|
|
57
|
+
174:7 warning React Hook useImperativeHandle has a missing dependency: 'updateValue'. Either include it or remove the dependency array react-hooks/exhaustive-deps
|
|
58
|
+
|
|
59
|
+
✖ 25 problems (0 errors, 25 warnings)
|
|
60
|
+
|
|
61
|
+
Rule | Time (ms) | Relative
|
|
62
|
+
:-----------------------------------------|----------:|--------:
|
|
63
|
+
@typescript-eslint/no-unused-vars | 2022.725 | 59.1%
|
|
64
|
+
react-hooks/exhaustive-deps | 192.308 | 5.6%
|
|
65
|
+
no-global-assign | 140.412 | 4.1%
|
|
66
|
+
react-hooks/rules-of-hooks | 101.894 | 3.0%
|
|
67
|
+
@typescript-eslint/ban-ts-comment | 78.579 | 2.3%
|
|
68
|
+
no-misleading-character-class | 64.143 | 1.9%
|
|
69
|
+
no-unexpected-multiline | 47.419 | 1.4%
|
|
70
|
+
@typescript-eslint/triple-slash-reference | 40.424 | 1.2%
|
|
71
|
+
no-loss-of-precision | 39.686 | 1.2%
|
|
72
|
+
no-regex-spaces | 38.266 | 1.1%
|
|
@@ -6,7 +6,7 @@ import { Card } from '../Card';
|
|
|
6
6
|
import { SectionHeader } from '../SectionHeader';
|
|
7
7
|
import { ListContext } from './List.context';
|
|
8
8
|
const List = ({ children, heading, helperText, headerTrailingContent, invalidText, ...props }) => {
|
|
9
|
-
const { loading, disabled, container = 'none'
|
|
9
|
+
const { loading, disabled, container = 'none' } = props;
|
|
10
10
|
const orderRef = useRef([]);
|
|
11
11
|
const [firstItemId, setFirstItemId] = useState(undefined);
|
|
12
12
|
const containerToCard = {
|
|
@@ -35,7 +35,7 @@ const List = ({ children, heading, helperText, headerTrailingContent, invalidTex
|
|
|
35
35
|
registerItem,
|
|
36
36
|
};
|
|
37
37
|
styles.useVariants({ disabled });
|
|
38
|
-
return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...
|
|
38
|
+
return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: children }) })))] }) }));
|
|
39
39
|
};
|
|
40
40
|
List.displayName = 'List';
|
|
41
41
|
const styles = StyleSheet.create(theme => ({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@utilitywarehouse/hearth-react-native",
|
|
3
|
-
"version": "0.23.0
|
|
3
|
+
"version": "0.23.0",
|
|
4
4
|
"description": "Utility Warehouse React Native UI library",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -55,9 +55,9 @@
|
|
|
55
55
|
"vite": "^7.1.3",
|
|
56
56
|
"vite-plugin-svgr": "^4.5.0",
|
|
57
57
|
"vitest": "^3.2.4",
|
|
58
|
-
"@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
|
|
59
58
|
"@utilitywarehouse/hearth-fonts": "^0.0.4",
|
|
60
59
|
"@utilitywarehouse/hearth-react-icons": "^0.8.0",
|
|
60
|
+
"@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
|
|
61
61
|
"@utilitywarehouse/hearth-svg-assets": "^0.5.0",
|
|
62
62
|
"@utilitywarehouse/hearth-tokens": "^0.2.3"
|
|
63
63
|
},
|
|
@@ -14,8 +14,7 @@ const List = ({
|
|
|
14
14
|
invalidText,
|
|
15
15
|
...props
|
|
16
16
|
}: ListProps) => {
|
|
17
|
-
const { loading, disabled, container = 'none'
|
|
18
|
-
|
|
17
|
+
const { loading, disabled, container = 'none' } = props;
|
|
19
18
|
const orderRef = useRef<string[]>([]);
|
|
20
19
|
const [firstItemId, setFirstItemId] = useState<string | undefined>(undefined);
|
|
21
20
|
const containerToCard: {
|
|
@@ -52,7 +51,7 @@ const List = ({
|
|
|
52
51
|
styles.useVariants({ disabled });
|
|
53
52
|
return (
|
|
54
53
|
<ListContext.Provider value={value}>
|
|
55
|
-
<View {...
|
|
54
|
+
<View {...props} style={[styles.container, props.style]}>
|
|
56
55
|
{heading ? (
|
|
57
56
|
<SectionHeader
|
|
58
57
|
heading={heading}
|
|
@@ -62,10 +61,10 @@ const List = ({
|
|
|
62
61
|
/>
|
|
63
62
|
) : null}
|
|
64
63
|
{container === 'none' ? (
|
|
65
|
-
<View
|
|
64
|
+
<View>{children}</View>
|
|
66
65
|
) : (
|
|
67
66
|
React.Children.count(children) > 0 && (
|
|
68
|
-
<Card {...containerToCard} noPadding style={styles.card}
|
|
67
|
+
<Card {...containerToCard} noPadding style={styles.card}>
|
|
69
68
|
<>{children}</>
|
|
70
69
|
</Card>
|
|
71
70
|
)
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type ProgressBarProps from './ProgressBar.props';
|
|
2
|
-
declare const ProgressBar: {
|
|
3
|
-
({ variant, colorScheme, size, value, min, max, label, hideLabel, formatValueText, "aria-valuetext": ariaValueText, accessibilityLabel, ...rest }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
displayName: string;
|
|
5
|
-
};
|
|
6
|
-
export default ProgressBar;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import ProgressBarCircular from './ProgressBarCircular';
|
|
4
|
-
import ProgressBarLinear from './ProgressBarLinear';
|
|
5
|
-
const clampValue = (value, min, max) => {
|
|
6
|
-
if (max <= min)
|
|
7
|
-
return min;
|
|
8
|
-
return Math.min(Math.max(value, min), max);
|
|
9
|
-
};
|
|
10
|
-
const valueToPercent = (value, min, max) => {
|
|
11
|
-
const range = max - min;
|
|
12
|
-
if (range <= 0)
|
|
13
|
-
return 0;
|
|
14
|
-
return ((value - min) / range) * 100;
|
|
15
|
-
};
|
|
16
|
-
const ProgressBar = ({ variant = 'linear', colorScheme = 'default', size = 'md', value, min = 0, max = 100, label, hideLabel, formatValueText, 'aria-valuetext': ariaValueText, accessibilityLabel, ...rest }) => {
|
|
17
|
-
const effectiveValue = colorScheme === 'success' && !formatValueText ? max : clampValue(value, min, max);
|
|
18
|
-
const percentValue = valueToPercent(effectiveValue, min, max);
|
|
19
|
-
const clampedPercent = Math.max(0, Math.min(100, percentValue));
|
|
20
|
-
const valueText = formatValueText
|
|
21
|
-
? formatValueText(effectiveValue, { min, max, percent: clampedPercent })
|
|
22
|
-
: `${Math.round(clampedPercent)}%`;
|
|
23
|
-
const valueTextForAria = ariaValueText ?? valueText;
|
|
24
|
-
const internalProps = {
|
|
25
|
-
percent: clampedPercent,
|
|
26
|
-
label,
|
|
27
|
-
valueText,
|
|
28
|
-
hideLabel,
|
|
29
|
-
colorScheme,
|
|
30
|
-
size,
|
|
31
|
-
};
|
|
32
|
-
return (_jsx(View, { ...rest, accessible: true, role: "progressbar", accessibilityRole: "progressbar", accessibilityLabel: accessibilityLabel ?? label, accessibilityValue: { min, max, now: effectiveValue, text: valueTextForAria }, "aria-valuenow": effectiveValue, "aria-valuemin": min, "aria-valuemax": max, "aria-valuetext": valueTextForAria, "data-colorscheme": colorScheme, children: variant === 'circular' ? (_jsx(ProgressBarCircular, { ...internalProps })) : (_jsx(ProgressBarLinear, { ...internalProps })) }));
|
|
33
|
-
};
|
|
34
|
-
ProgressBar.displayName = 'ProgressBar';
|
|
35
|
-
export default ProgressBar;
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { ViewProps } from 'react-native';
|
|
2
|
-
export type ProgressBarVariant = 'linear' | 'circular';
|
|
3
|
-
export type ProgressBarColorScheme = 'default' | 'success' | 'danger';
|
|
4
|
-
export type ProgressBarSize = 'sm' | 'md';
|
|
5
|
-
export interface ProgressBarProps extends ViewProps {
|
|
6
|
-
variant?: ProgressBarVariant;
|
|
7
|
-
/**
|
|
8
|
-
* Set the visual appearance.
|
|
9
|
-
* @default 'default'
|
|
10
|
-
*/
|
|
11
|
-
colorScheme?: ProgressBarColorScheme;
|
|
12
|
-
/**
|
|
13
|
-
* Sets the circular variant size. Does not affect the appearance of the linear variant.
|
|
14
|
-
* @default 'md'
|
|
15
|
-
*/
|
|
16
|
-
size?: ProgressBarSize;
|
|
17
|
-
/**
|
|
18
|
-
* The current progress value.
|
|
19
|
-
*/
|
|
20
|
-
value: number;
|
|
21
|
-
/**
|
|
22
|
-
* The minimum value.
|
|
23
|
-
* @default 0
|
|
24
|
-
*/
|
|
25
|
-
min?: number;
|
|
26
|
-
/**
|
|
27
|
-
* The maximum value.
|
|
28
|
-
* @default 100
|
|
29
|
-
*/
|
|
30
|
-
max?: number;
|
|
31
|
-
/**
|
|
32
|
-
* Required text label for the progress bar.
|
|
33
|
-
*/
|
|
34
|
-
label: string;
|
|
35
|
-
/**
|
|
36
|
-
* Visually hide the label and value text.
|
|
37
|
-
*/
|
|
38
|
-
hideLabel?: boolean;
|
|
39
|
-
/**
|
|
40
|
-
* Override the default percentage value label formatting.
|
|
41
|
-
*/
|
|
42
|
-
formatValueText?: (value: number, meta: {
|
|
43
|
-
min: number;
|
|
44
|
-
max: number;
|
|
45
|
-
percent: number;
|
|
46
|
-
}) => string;
|
|
47
|
-
/**
|
|
48
|
-
* A human-readable text alternative for the current value.
|
|
49
|
-
*/
|
|
50
|
-
'aria-valuetext'?: string;
|
|
51
|
-
}
|
|
52
|
-
export interface ProgressBarInternalProps {
|
|
53
|
-
percent: number;
|
|
54
|
-
label: string;
|
|
55
|
-
valueText: string;
|
|
56
|
-
hideLabel?: boolean;
|
|
57
|
-
colorScheme: ProgressBarColorScheme;
|
|
58
|
-
size: ProgressBarSize;
|
|
59
|
-
}
|
|
60
|
-
export default ProgressBarProps;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { ProgressBarInternalProps } from './ProgressBar.props';
|
|
2
|
-
declare const ProgressBarCircular: {
|
|
3
|
-
({ percent, label, valueText, hideLabel, colorScheme, size, }: ProgressBarInternalProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
displayName: string;
|
|
5
|
-
};
|
|
6
|
-
export default ProgressBarCircular;
|
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useRef } from 'react';
|
|
3
|
-
import { Text, View } from 'react-native';
|
|
4
|
-
import Animated, { Easing, useAnimatedProps, useReducedMotion, useSharedValue, withTiming, } from 'react-native-reanimated';
|
|
5
|
-
import { Circle, G, Svg } from 'react-native-svg';
|
|
6
|
-
import { StyleSheet } from 'react-native-unistyles';
|
|
7
|
-
import useTheme from '../../hooks/useTheme';
|
|
8
|
-
import { BodyText } from '../BodyText';
|
|
9
|
-
const AnimatedCircle = Animated.createAnimatedComponent(Circle);
|
|
10
|
-
const ProgressBarCircular = ({ percent, label, valueText, hideLabel, colorScheme, size, }) => {
|
|
11
|
-
const { components } = useTheme();
|
|
12
|
-
const isReducedMotion = useReducedMotion();
|
|
13
|
-
const progress = useSharedValue(0);
|
|
14
|
-
const hasMountedRef = useRef(false);
|
|
15
|
-
useEffect(() => {
|
|
16
|
-
const target = Math.max(0, Math.min(100, percent)) / 100;
|
|
17
|
-
if (isReducedMotion) {
|
|
18
|
-
progress.value = target;
|
|
19
|
-
hasMountedRef.current = true;
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
if (!hasMountedRef.current) {
|
|
23
|
-
progress.value = target;
|
|
24
|
-
hasMountedRef.current = true;
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
|
-
progress.value = withTiming(target, { duration: 300, easing: Easing.out(Easing.ease) });
|
|
28
|
-
}, [percent, isReducedMotion, progress]);
|
|
29
|
-
const circularTokens = components.progressBar.circular[size];
|
|
30
|
-
const barWidth = 'bar' in circularTokens ? circularTokens.bar.width : circularTokens.barWidth;
|
|
31
|
-
const diameter = circularTokens.height;
|
|
32
|
-
const radius = (diameter - barWidth) / 2;
|
|
33
|
-
const circumference = 2 * Math.PI * radius;
|
|
34
|
-
const animatedCircleProps = useAnimatedProps(() => ({
|
|
35
|
-
strokeDashoffset: circumference * (1 - progress.value),
|
|
36
|
-
}));
|
|
37
|
-
const indicatorColor = colorScheme === 'success'
|
|
38
|
-
? components.progressBar.progress.successColor
|
|
39
|
-
: colorScheme === 'danger'
|
|
40
|
-
? components.progressBar.progress.dangerColor
|
|
41
|
-
: components.progressBar.progress.defaultColor;
|
|
42
|
-
styles.useVariants({ size });
|
|
43
|
-
return (_jsxs(View, { style: styles.container, children: [_jsx(Svg, { width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}`, style: styles.svg, children: _jsxs(G, { origin: `${diameter / 2}, ${diameter / 2}`, rotation: -90, children: [_jsx(Circle, { cx: "50%", cy: "50%", r: radius, stroke: components.progressBar.barColor, strokeWidth: barWidth, fill: "transparent" }), _jsx(AnimatedCircle, { cx: "50%", cy: "50%", r: radius, stroke: indicatorColor, strokeWidth: barWidth, fill: "transparent", strokeLinecap: "round", strokeDasharray: circumference, animatedProps: animatedCircleProps })] }) }), _jsxs(View, { style: styles.content, children: [_jsx(Text, { style: styles.valueText, children: valueText }), !hideLabel && size === 'md' ? (_jsx(BodyText, { style: styles.label, size: "md", weight: "semibold", children: label })) : null] })] }));
|
|
44
|
-
};
|
|
45
|
-
ProgressBarCircular.displayName = 'ProgressBarCircular';
|
|
46
|
-
const styles = StyleSheet.create(theme => ({
|
|
47
|
-
container: {
|
|
48
|
-
alignItems: 'center',
|
|
49
|
-
justifyContent: 'center',
|
|
50
|
-
position: 'relative',
|
|
51
|
-
variants: {
|
|
52
|
-
size: {
|
|
53
|
-
md: {
|
|
54
|
-
width: theme.components.progressBar.circular.md.height,
|
|
55
|
-
height: theme.components.progressBar.circular.md.height,
|
|
56
|
-
},
|
|
57
|
-
sm: {
|
|
58
|
-
width: theme.components.progressBar.circular.sm.height,
|
|
59
|
-
height: theme.components.progressBar.circular.sm.height,
|
|
60
|
-
},
|
|
61
|
-
},
|
|
62
|
-
},
|
|
63
|
-
},
|
|
64
|
-
svg: {
|
|
65
|
-
position: 'absolute',
|
|
66
|
-
top: 0,
|
|
67
|
-
left: 0,
|
|
68
|
-
},
|
|
69
|
-
content: {
|
|
70
|
-
alignItems: 'center',
|
|
71
|
-
justifyContent: 'center',
|
|
72
|
-
_web: {
|
|
73
|
-
position: 'absolute',
|
|
74
|
-
top: 0,
|
|
75
|
-
left: 0,
|
|
76
|
-
width: '100%',
|
|
77
|
-
height: '100%',
|
|
78
|
-
},
|
|
79
|
-
variants: {
|
|
80
|
-
size: {
|
|
81
|
-
md: {
|
|
82
|
-
gap: theme.components.progressBar.circular.md.gap,
|
|
83
|
-
},
|
|
84
|
-
sm: {
|
|
85
|
-
gap: 0,
|
|
86
|
-
},
|
|
87
|
-
},
|
|
88
|
-
},
|
|
89
|
-
},
|
|
90
|
-
valueText: {
|
|
91
|
-
color: theme.color.text.primary,
|
|
92
|
-
textAlign: 'center',
|
|
93
|
-
variants: {
|
|
94
|
-
size: {
|
|
95
|
-
md: {
|
|
96
|
-
fontFamily: theme.components.progressBar.circular.md.label.fontFamily,
|
|
97
|
-
fontSize: theme.components.progressBar.circular.md.label.fontSize,
|
|
98
|
-
lineHeight: theme.components.progressBar.circular.md.label.lineHeight,
|
|
99
|
-
fontWeight: theme.components.progressBar.circular.md.label.fontWeight,
|
|
100
|
-
},
|
|
101
|
-
sm: {
|
|
102
|
-
fontFamily: theme.typography.mobile.bodyText.fontFamily,
|
|
103
|
-
fontSize: theme.typography.mobile.bodyText.md.fontSize,
|
|
104
|
-
lineHeight: theme.typography.mobile.bodyText.md.lineHeight,
|
|
105
|
-
fontWeight: theme.fontWeight.semibold,
|
|
106
|
-
},
|
|
107
|
-
},
|
|
108
|
-
},
|
|
109
|
-
},
|
|
110
|
-
label: {
|
|
111
|
-
textAlign: 'center',
|
|
112
|
-
maxWidth: 90,
|
|
113
|
-
},
|
|
114
|
-
}));
|
|
115
|
-
export default ProgressBarCircular;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { ProgressBarInternalProps } from './ProgressBar.props';
|
|
2
|
-
declare const ProgressBarLinear: {
|
|
3
|
-
({ percent, label, valueText, hideLabel, colorScheme, }: ProgressBarInternalProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
displayName: string;
|
|
5
|
-
};
|
|
6
|
-
export default ProgressBarLinear;
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useRef, useState } from 'react';
|
|
3
|
-
import { Platform, View } from 'react-native';
|
|
4
|
-
import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming, } from 'react-native-reanimated';
|
|
5
|
-
import { StyleSheet } from 'react-native-unistyles';
|
|
6
|
-
import useTheme from '../../hooks/useTheme';
|
|
7
|
-
import { BodyText } from '../BodyText';
|
|
8
|
-
const ProgressBarLinear = ({ percent, label, valueText, hideLabel, colorScheme, }) => {
|
|
9
|
-
const { components } = useTheme();
|
|
10
|
-
const isReducedMotion = useReducedMotion();
|
|
11
|
-
const progress = useSharedValue(0);
|
|
12
|
-
const hasMountedRef = useRef(false);
|
|
13
|
-
const [trackWidth, setTrackWidth] = useState(0);
|
|
14
|
-
useEffect(() => {
|
|
15
|
-
const target = Math.max(0, Math.min(100, percent)) / 100;
|
|
16
|
-
if (isReducedMotion) {
|
|
17
|
-
progress.value = target;
|
|
18
|
-
hasMountedRef.current = true;
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
|
-
if (!hasMountedRef.current) {
|
|
22
|
-
progress.value = target;
|
|
23
|
-
hasMountedRef.current = true;
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
progress.value = withTiming(target, { duration: 300, easing: Easing.out(Easing.ease) });
|
|
27
|
-
}, [percent, isReducedMotion, progress]);
|
|
28
|
-
const animatedStyle = useAnimatedStyle(() => ({
|
|
29
|
-
width: trackWidth * progress.value,
|
|
30
|
-
}));
|
|
31
|
-
const indicatorColor = colorScheme === 'success'
|
|
32
|
-
? components.progressBar.progress.successColor
|
|
33
|
-
: colorScheme === 'danger'
|
|
34
|
-
? components.progressBar.progress.dangerColor
|
|
35
|
-
: components.progressBar.progress.defaultColor;
|
|
36
|
-
const handleTrackLayout = (event) => {
|
|
37
|
-
setTrackWidth(event.nativeEvent.layout.width);
|
|
38
|
-
};
|
|
39
|
-
return (_jsxs(View, { style: styles.container, children: [!hideLabel && (_jsxs(View, { style: styles.header, children: [_jsx(BodyText, { size: "md", weight: "semibold", style: styles.label, children: label }), _jsx(BodyText, { size: "md", style: styles.value, children: valueText })] })), _jsx(View, { style: styles.track, onLayout: handleTrackLayout, children: Platform.OS === 'web' ? (_jsx(View, { style: [
|
|
40
|
-
styles.indicator,
|
|
41
|
-
{ width: `${Math.max(0, Math.min(100, percent))}%` },
|
|
42
|
-
{ backgroundColor: indicatorColor },
|
|
43
|
-
] })) : (_jsx(Animated.View, { style: [styles.indicator, animatedStyle, { backgroundColor: indicatorColor }] })) })] }));
|
|
44
|
-
};
|
|
45
|
-
ProgressBarLinear.displayName = 'ProgressBarLinear';
|
|
46
|
-
const styles = StyleSheet.create(theme => ({
|
|
47
|
-
container: {
|
|
48
|
-
width: '100%',
|
|
49
|
-
gap: theme.components.progressBar.linear.gap,
|
|
50
|
-
},
|
|
51
|
-
header: {
|
|
52
|
-
flexDirection: 'row',
|
|
53
|
-
alignItems: 'center',
|
|
54
|
-
justifyContent: 'space-between',
|
|
55
|
-
gap: theme.components.progressBar.linear.label.gap,
|
|
56
|
-
},
|
|
57
|
-
label: {
|
|
58
|
-
flex: 1,
|
|
59
|
-
},
|
|
60
|
-
value: {
|
|
61
|
-
flexShrink: 0,
|
|
62
|
-
textAlign: 'right',
|
|
63
|
-
},
|
|
64
|
-
track: {
|
|
65
|
-
width: '100%',
|
|
66
|
-
height: theme.components.progressBar.linear.bar.height,
|
|
67
|
-
backgroundColor: theme.components.progressBar.barColor,
|
|
68
|
-
borderRadius: theme.components.progressBar.linear.bar.borderRadius,
|
|
69
|
-
overflow: 'hidden',
|
|
70
|
-
},
|
|
71
|
-
indicator: {
|
|
72
|
-
height: '100%',
|
|
73
|
-
borderRadius: theme.components.progressBar.linear.bar.borderRadius,
|
|
74
|
-
_web: {
|
|
75
|
-
height: '100%',
|
|
76
|
-
},
|
|
77
|
-
},
|
|
78
|
-
}));
|
|
79
|
-
export default ProgressBarLinear;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as ProgressBar } from './ProgressBar';
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
export type SegmentedControlContextValue = {
|
|
2
|
-
value?: string;
|
|
3
|
-
select: (value: string) => void;
|
|
4
|
-
disabled?: boolean;
|
|
5
|
-
size: 'sm' | 'md';
|
|
6
|
-
registerOptionLayout: (value: string, layout: {
|
|
7
|
-
x: number;
|
|
8
|
-
y: number;
|
|
9
|
-
width: number;
|
|
10
|
-
height: number;
|
|
11
|
-
}) => void;
|
|
12
|
-
};
|
|
13
|
-
export declare const SegmentedControlContext: import("react").Context<SegmentedControlContextValue | null>;
|
|
14
|
-
export declare const useSegmentedControlContext: () => SegmentedControlContextValue;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { createContext, useContext } from 'react';
|
|
2
|
-
export const SegmentedControlContext = createContext(null);
|
|
3
|
-
export const useSegmentedControlContext = () => {
|
|
4
|
-
const context = useContext(SegmentedControlContext);
|
|
5
|
-
if (!context) {
|
|
6
|
-
throw new Error('SegmentedControlOption must be used within SegmentedControl');
|
|
7
|
-
}
|
|
8
|
-
return context;
|
|
9
|
-
};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type SegmentedControlProps from './SegmentedControl.props';
|
|
2
|
-
declare const SegmentedControl: {
|
|
3
|
-
({ value: controlledValue, defaultValue, onValueChange, size, disabled, children, style, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
displayName: string;
|
|
5
|
-
};
|
|
6
|
-
export default SegmentedControl;
|