@hzblj/kara-components 0.17.0 → 0.18.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/CHANGELOG.md +49 -0
- package/lib/module/atoms/badge/badge.android.js +5 -0
- package/lib/module/atoms/badge/badge.android.js.map +1 -1
- package/lib/module/atoms/badge/badge.ios.js +2 -0
- package/lib/module/atoms/badge/badge.ios.js.map +1 -1
- package/lib/module/atoms/button/button-tokens.js +8 -0
- package/lib/module/atoms/button/button-tokens.js.map +1 -1
- package/lib/module/atoms/button/button.android.js +43 -15
- package/lib/module/atoms/button/button.android.js.map +1 -1
- package/lib/module/atoms/button/button.ios.js +66 -10
- package/lib/module/atoms/button/button.ios.js.map +1 -1
- package/lib/module/atoms/checkbox/checkbox.android.js +5 -1
- package/lib/module/atoms/checkbox/checkbox.android.js.map +1 -1
- package/lib/module/atoms/checkbox/checkbox.ios.js +3 -1
- package/lib/module/atoms/checkbox/checkbox.ios.js.map +1 -1
- package/lib/module/atoms/color-picker/color-picker.android.js +4 -0
- package/lib/module/atoms/color-picker/color-picker.android.js.map +1 -1
- package/lib/module/atoms/color-picker/color-picker.ios.js +24 -2
- package/lib/module/atoms/color-picker/color-picker.ios.js.map +1 -1
- package/lib/module/atoms/date-picker/date-picker.android.js +85 -10
- package/lib/module/atoms/date-picker/date-picker.android.js.map +1 -1
- package/lib/module/atoms/date-picker/date-picker.ios.js +9 -7
- package/lib/module/atoms/date-picker/date-picker.ios.js.map +1 -1
- package/lib/module/atoms/divider/divider.android.js +17 -4
- package/lib/module/atoms/divider/divider.android.js.map +1 -1
- package/lib/module/atoms/divider/divider.ios.js +4 -0
- package/lib/module/atoms/divider/divider.ios.js.map +1 -1
- package/lib/module/atoms/fab/fab.android.js +64 -8
- package/lib/module/atoms/fab/fab.android.js.map +1 -1
- package/lib/module/atoms/fab/fab.ios.js +68 -12
- package/lib/module/atoms/fab/fab.ios.js.map +1 -1
- package/lib/module/atoms/icon-button/icon-button.android.js +48 -5
- package/lib/module/atoms/icon-button/icon-button.android.js.map +1 -1
- package/lib/module/atoms/icon-button/icon-button.ios.js +60 -10
- package/lib/module/atoms/icon-button/icon-button.ios.js.map +1 -1
- package/lib/module/atoms/list/list.android.js +32 -4
- package/lib/module/atoms/list/list.android.js.map +1 -1
- package/lib/module/atoms/list/list.ios.js +15 -5
- package/lib/module/atoms/list/list.ios.js.map +1 -1
- package/lib/module/atoms/progress/progress.android.js +21 -7
- package/lib/module/atoms/progress/progress.android.js.map +1 -1
- package/lib/module/atoms/progress/progress.ios.js +5 -1
- package/lib/module/atoms/progress/progress.ios.js.map +1 -1
- package/lib/module/atoms/slider/slider.android.js +16 -2
- package/lib/module/atoms/slider/slider.android.js.map +1 -1
- package/lib/module/atoms/slider/slider.ios.js +22 -2
- package/lib/module/atoms/slider/slider.ios.js.map +1 -1
- package/lib/module/atoms/switch/switch.android.js +5 -1
- package/lib/module/atoms/switch/switch.android.js.map +1 -1
- package/lib/module/atoms/switch/switch.ios.js +3 -1
- package/lib/module/atoms/switch/switch.ios.js.map +1 -1
- package/lib/module/atoms/text/spans.js +2 -1
- package/lib/module/atoms/text/spans.js.map +1 -1
- package/lib/module/atoms/text/text.android.js +18 -6
- package/lib/module/atoms/text/text.android.js.map +1 -1
- package/lib/module/atoms/text/text.ios.js +6 -2
- package/lib/module/atoms/text/text.ios.js.map +1 -1
- package/lib/module/atoms/text-field/text-field-input.js +14 -0
- package/lib/module/atoms/text-field/text-field-input.js.map +1 -0
- package/lib/module/atoms/text-field/text-field.android.js +113 -6
- package/lib/module/atoms/text-field/text-field.android.js.map +1 -1
- package/lib/module/atoms/text-field/text-field.ios.js +75 -3
- package/lib/module/atoms/text-field/text-field.ios.js.map +1 -1
- package/lib/module/molecules/collapsible/collapsible.android.js +4 -3
- package/lib/module/molecules/collapsible/collapsible.android.js.map +1 -1
- package/lib/module/molecules/collapsible/collapsible.ios.js +3 -1
- package/lib/module/molecules/collapsible/collapsible.ios.js.map +1 -1
- package/lib/module/molecules/radio-group/radio-group.android.js +10 -2
- package/lib/module/molecules/radio-group/radio-group.android.js.map +1 -1
- package/lib/module/molecules/radio-group/radio-group.ios.js +6 -2
- package/lib/module/molecules/radio-group/radio-group.ios.js.map +1 -1
- package/lib/module/molecules/search-bar/search-bar.js +9 -0
- package/lib/module/molecules/search-bar/search-bar.js.map +1 -1
- package/lib/module/molecules/stepper/stepper.android.js +25 -13
- package/lib/module/molecules/stepper/stepper.android.js.map +1 -1
- package/lib/module/molecules/stepper/stepper.ios.js +12 -6
- package/lib/module/molecules/stepper/stepper.ios.js.map +1 -1
- package/lib/module/organisms/action-sheet/action-sheet.android.js +16 -8
- package/lib/module/organisms/action-sheet/action-sheet.android.js.map +1 -1
- package/lib/module/organisms/action-sheet/action-sheet.ios.js +16 -3
- package/lib/module/organisms/action-sheet/action-sheet.ios.js.map +1 -1
- package/lib/module/organisms/alert/alert.android.js +4 -3
- package/lib/module/organisms/alert/alert.android.js.map +1 -1
- package/lib/module/organisms/alert/alert.ios.js +3 -2
- package/lib/module/organisms/alert/alert.ios.js.map +1 -1
- package/lib/module/organisms/context-menu/context-menu.android.js +3 -1
- package/lib/module/organisms/context-menu/context-menu.android.js.map +1 -1
- package/lib/module/organisms/context-menu/context-menu.ios.js +1 -0
- package/lib/module/organisms/context-menu/context-menu.ios.js.map +1 -1
- package/lib/module/organisms/fab-menu/fab-menu.android.js +3 -0
- package/lib/module/organisms/fab-menu/fab-menu.android.js.map +1 -1
- package/lib/module/organisms/fab-menu/fab-menu.ios.js +3 -0
- package/lib/module/organisms/fab-menu/fab-menu.ios.js.map +1 -1
- package/lib/module/organisms/menu/menu-parts.js +20 -0
- package/lib/module/organisms/menu/menu-parts.js.map +1 -0
- package/lib/module/organisms/menu/menu.android.js +51 -19
- package/lib/module/organisms/menu/menu.android.js.map +1 -1
- package/lib/module/organisms/menu/menu.ios.js +71 -8
- package/lib/module/organisms/menu/menu.ios.js.map +1 -1
- package/lib/module/organisms/sheet/sheet.js +2 -1
- package/lib/module/organisms/sheet/sheet.js.map +1 -1
- package/lib/typescript/atoms/badge/badge.types.d.ts +2 -0
- package/lib/typescript/atoms/button/button-tokens.d.ts +6 -2
- package/lib/typescript/atoms/button/button.types.d.ts +19 -5
- package/lib/typescript/atoms/checkbox/checkbox.types.d.ts +2 -0
- package/lib/typescript/atoms/color-picker/color-picker.types.d.ts +2 -0
- package/lib/typescript/atoms/date-picker/date-picker.ios.d.ts +5 -5
- package/lib/typescript/atoms/date-picker/date-picker.types.d.ts +30 -7
- package/lib/typescript/atoms/divider/divider.ios.d.ts +4 -0
- package/lib/typescript/atoms/divider/divider.types.d.ts +13 -2
- package/lib/typescript/atoms/fab/fab.types.d.ts +21 -4
- package/lib/typescript/atoms/icon-button/icon-button.types.d.ts +23 -4
- package/lib/typescript/atoms/list/list.types.d.ts +15 -1
- package/lib/typescript/atoms/progress/progress.types.d.ts +13 -2
- package/lib/typescript/atoms/slider/slider.ios.d.ts +4 -0
- package/lib/typescript/atoms/slider/slider.types.d.ts +7 -0
- package/lib/typescript/atoms/switch/switch.types.d.ts +2 -0
- package/lib/typescript/atoms/text/spans.d.ts +2 -0
- package/lib/typescript/atoms/text/text.types.d.ts +9 -1
- package/lib/typescript/atoms/text-field/text-field-input.d.ts +7 -0
- package/lib/typescript/atoms/text-field/text-field.types.d.ts +77 -4
- package/lib/typescript/molecules/collapsible/collapsible.types.d.ts +2 -0
- package/lib/typescript/molecules/radio-group/radio-group.types.d.ts +4 -0
- package/lib/typescript/molecules/search-bar/search-bar.types.d.ts +11 -1
- package/lib/typescript/molecules/stepper/stepper.ios.d.ts +2 -1
- package/lib/typescript/molecules/stepper/stepper.types.d.ts +17 -0
- package/lib/typescript/organisms/action-sheet/action-sheet.ios.d.ts +4 -0
- package/lib/typescript/organisms/action-sheet/action-sheet.types.d.ts +8 -3
- package/lib/typescript/organisms/alert/alert.types.d.ts +8 -3
- package/lib/typescript/organisms/menu/menu-parts.d.ts +14 -0
- package/lib/typescript/organisms/menu/menu.types.d.ts +35 -7
- package/lib/typescript/organisms/sheet/sheet.types.d.ts +7 -1
- package/package.json +4 -4
- package/src/atoms/badge/badge.android.tsx +9 -2
- package/src/atoms/badge/badge.ios.tsx +2 -2
- package/src/atoms/badge/badge.types.ts +2 -0
- package/src/atoms/button/button-tokens.ts +6 -3
- package/src/atoms/button/button.android.tsx +35 -11
- package/src/atoms/button/button.ios.tsx +72 -8
- package/src/atoms/button/button.types.ts +20 -5
- package/src/atoms/checkbox/checkbox.android.tsx +5 -2
- package/src/atoms/checkbox/checkbox.ios.tsx +2 -2
- package/src/atoms/checkbox/checkbox.types.ts +2 -0
- package/src/atoms/color-picker/color-picker.android.tsx +10 -2
- package/src/atoms/color-picker/color-picker.ios.tsx +24 -1
- package/src/atoms/color-picker/color-picker.types.ts +2 -0
- package/src/atoms/date-picker/date-picker.android.tsx +86 -16
- package/src/atoms/date-picker/date-picker.ios.tsx +20 -8
- package/src/atoms/date-picker/date-picker.types.ts +31 -7
- package/src/atoms/divider/divider.android.tsx +14 -3
- package/src/atoms/divider/divider.ios.tsx +4 -0
- package/src/atoms/divider/divider.types.ts +14 -2
- package/src/atoms/fab/fab.android.tsx +61 -11
- package/src/atoms/fab/fab.ios.tsx +48 -13
- package/src/atoms/fab/fab.types.ts +22 -4
- package/src/atoms/icon-button/icon-button.android.tsx +60 -10
- package/src/atoms/icon-button/icon-button.ios.tsx +77 -8
- package/src/atoms/icon-button/icon-button.types.ts +24 -4
- package/src/atoms/list/list.android.tsx +26 -4
- package/src/atoms/list/list.ios.tsx +20 -5
- package/src/atoms/list/list.types.ts +16 -1
- package/src/atoms/progress/progress.android.tsx +32 -6
- package/src/atoms/progress/progress.ios.tsx +11 -5
- package/src/atoms/progress/progress.types.ts +13 -2
- package/src/atoms/slider/slider.android.tsx +18 -2
- package/src/atoms/slider/slider.ios.tsx +38 -2
- package/src/atoms/slider/slider.types.ts +7 -0
- package/src/atoms/switch/switch.android.tsx +5 -2
- package/src/atoms/switch/switch.ios.tsx +2 -2
- package/src/atoms/switch/switch.types.ts +2 -0
- package/src/atoms/text/spans.ts +2 -1
- package/src/atoms/text/text.android.tsx +20 -7
- package/src/atoms/text/text.ios.tsx +7 -0
- package/src/atoms/text/text.types.ts +10 -1
- package/src/atoms/text-field/text-field-input.ts +17 -0
- package/src/atoms/text-field/text-field.android.tsx +132 -9
- package/src/atoms/text-field/text-field.ios.tsx +110 -6
- package/src/atoms/text-field/text-field.types.ts +98 -4
- package/src/molecules/collapsible/collapsible.android.tsx +10 -2
- package/src/molecules/collapsible/collapsible.ios.tsx +8 -2
- package/src/molecules/collapsible/collapsible.types.ts +2 -0
- package/src/molecules/radio-group/radio-group.android.tsx +18 -4
- package/src/molecules/radio-group/radio-group.ios.tsx +19 -5
- package/src/molecules/radio-group/radio-group.types.ts +4 -0
- package/src/molecules/search-bar/search-bar.tsx +9 -0
- package/src/molecules/search-bar/search-bar.types.ts +12 -1
- package/src/molecules/stepper/stepper.android.tsx +24 -4
- package/src/molecules/stepper/stepper.ios.tsx +23 -8
- package/src/molecules/stepper/stepper.types.ts +17 -0
- package/src/organisms/action-sheet/action-sheet.android.tsx +23 -11
- package/src/organisms/action-sheet/action-sheet.ios.tsx +20 -3
- package/src/organisms/action-sheet/action-sheet.types.ts +8 -3
- package/src/organisms/alert/alert.android.tsx +11 -8
- package/src/organisms/alert/alert.ios.tsx +2 -1
- package/src/organisms/alert/alert.types.ts +8 -3
- package/src/organisms/context-menu/context-menu.android.tsx +3 -2
- package/src/organisms/context-menu/context-menu.ios.tsx +1 -0
- package/src/organisms/fab-menu/fab-menu.android.tsx +3 -0
- package/src/organisms/fab-menu/fab-menu.ios.tsx +9 -1
- package/src/organisms/menu/menu-parts.ts +21 -0
- package/src/organisms/menu/menu.android.tsx +39 -10
- package/src/organisms/menu/menu.ios.tsx +55 -5
- package/src/organisms/menu/menu.types.ts +30 -7
- package/src/organisms/sheet/sheet.tsx +2 -1
- package/src/organisms/sheet/sheet.types.ts +7 -1
|
@@ -1,52 +1,102 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { Button } from '@expo/ui/swift-ui';
|
|
4
|
-
import { buttonStyle, contentShape, disabled as disabledModifier, shapes } from '@expo/ui/swift-ui/modifiers';
|
|
4
|
+
import { buttonBorderShape, buttonStyle, contentShape, disabled as disabledModifier, shapes, tint as tintModifier } from '@expo/ui/swift-ui/modifiers';
|
|
5
|
+
import { isLiquidGlassAvailable } from '@hzblj/kara-native';
|
|
5
6
|
import { useAccessibilityModifiers } from '@hzblj/kara-sx';
|
|
7
|
+
import { useAppTheme } from '@hzblj/kara-theme';
|
|
6
8
|
import { useMemo } from 'react';
|
|
7
9
|
import { useHostGuard } from "../../host-context.js";
|
|
10
|
+
import { contentOnTint } from "../button/button-tokens.js";
|
|
8
11
|
import { Icon } from "../icon/index.js";
|
|
9
12
|
import { ZStack } from "../z-stack/index.js";
|
|
10
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
14
|
/** Apple's least tap target. Android's `IconButton` is Material's 48dp; this is the same idea in points. */
|
|
12
15
|
const TARGET = 44;
|
|
13
16
|
|
|
17
|
+
/** Material's 40dp container, the ring an `outlined` button draws inside its tap target. */
|
|
18
|
+
const RING = 40;
|
|
19
|
+
|
|
14
20
|
/** The whole square takes the tap, not only the glyph's own pixels. */
|
|
15
21
|
const WHOLE_TARGET = {
|
|
16
22
|
modifiers: [contentShape(shapes.circle())]
|
|
17
23
|
};
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* The SwiftUI style behind each variant. `outlined` has none (SwiftUI draws no ring around a button), so it is a plain
|
|
27
|
+
* button whose label draws the ring.
|
|
28
|
+
*/
|
|
29
|
+
const STYLE_BY_VARIANT = {
|
|
30
|
+
filled: 'borderedProminent',
|
|
31
|
+
glass: 'glass',
|
|
32
|
+
outlined: 'plain',
|
|
33
|
+
plain: 'plain',
|
|
34
|
+
tonal: 'bordered'
|
|
35
|
+
};
|
|
18
36
|
export const IconButton = ({
|
|
19
37
|
accessibilityHint,
|
|
20
38
|
accessibilityLabel,
|
|
39
|
+
color,
|
|
21
40
|
disabled = false,
|
|
22
41
|
name,
|
|
23
42
|
onPress,
|
|
24
|
-
testID
|
|
43
|
+
testID,
|
|
44
|
+
variant = 'plain'
|
|
25
45
|
}) => {
|
|
26
46
|
useHostGuard('IconButton');
|
|
47
|
+
const theme = useAppTheme();
|
|
27
48
|
const accessibilityModifiers = useAccessibilityModifiers({
|
|
28
49
|
accessibilityHint
|
|
29
50
|
});
|
|
51
|
+
// Below iOS 26 `@expo/ui` turns `.glass` into `.automatic`, a bare icon; the tonal circle is what Android draws too.
|
|
52
|
+
const style = variant === 'glass' && !isLiquidGlassAvailable() ? 'bordered' : STYLE_BY_VARIANT[variant];
|
|
53
|
+
const bezel = style !== 'plain';
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* `filled` takes the colour as its fill, and the icon a colour that reads on it. `tonal` passes it as the tint too,
|
|
57
|
+
* which SwiftUI's bordered style draws its pale circle in. SwiftUI dims a disabled button's label itself, and greys a
|
|
58
|
+
* prominent one's fill, so a disabled filled icon goes back to the primary content colour rather than white on grey.
|
|
59
|
+
*/
|
|
60
|
+
const fill = variant === 'filled' ? color ?? 'fill.accent.primary' : undefined;
|
|
61
|
+
const tint = fill ?? (variant === 'tonal' ? color : undefined);
|
|
62
|
+
const iconColor = fill ? disabled ? 'content.primary' : color ? contentOnTint(color, theme) : 'content.on.accent' : color ?? 'content.primary';
|
|
30
63
|
const modifiers = useMemo(() => {
|
|
31
|
-
const list = [buttonStyle(
|
|
64
|
+
const list = [buttonStyle(style)];
|
|
65
|
+
if (bezel) {
|
|
66
|
+
list.push(buttonBorderShape('circle'));
|
|
67
|
+
}
|
|
68
|
+
if (tint) {
|
|
69
|
+
list.push(tintModifier(theme.color(tint)));
|
|
70
|
+
}
|
|
71
|
+
list.push(...accessibilityModifiers);
|
|
32
72
|
if (disabled) {
|
|
33
73
|
list.push(disabledModifier(true));
|
|
34
74
|
}
|
|
35
75
|
return list;
|
|
36
|
-
}, [accessibilityModifiers, disabled]);
|
|
76
|
+
}, [accessibilityModifiers, bezel, disabled, style, theme, tint]);
|
|
77
|
+
|
|
78
|
+
// A bezel style sizes its circle around the icon itself; a plain button's label is the whole target.
|
|
79
|
+
const icon = /*#__PURE__*/_jsx(Icon, {
|
|
80
|
+
accessibilityLabel: accessibilityLabel,
|
|
81
|
+
color: iconColor,
|
|
82
|
+
name: name
|
|
83
|
+
});
|
|
37
84
|
return /*#__PURE__*/_jsx(Button, {
|
|
38
85
|
modifiers: modifiers,
|
|
39
86
|
onPress: onPress,
|
|
40
87
|
testID: testID,
|
|
41
|
-
children: /*#__PURE__*/_jsx(ZStack, {
|
|
88
|
+
children: bezel ? icon : /*#__PURE__*/_jsx(ZStack, {
|
|
42
89
|
h: TARGET,
|
|
43
90
|
ios: WHOLE_TARGET,
|
|
44
91
|
w: TARGET,
|
|
45
|
-
children: /*#__PURE__*/_jsx(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
92
|
+
children: variant === 'outlined' ? /*#__PURE__*/_jsx(ZStack, {
|
|
93
|
+
borderColor: "border.secondary.base",
|
|
94
|
+
borderRadius: "full",
|
|
95
|
+
borderWidth: 1,
|
|
96
|
+
h: RING,
|
|
97
|
+
w: RING,
|
|
98
|
+
children: icon
|
|
99
|
+
}) : icon
|
|
50
100
|
})
|
|
51
101
|
});
|
|
52
102
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Button","buttonStyle","contentShape","disabled","disabledModifier","shapes","useAccessibilityModifiers","useMemo","useHostGuard","Icon","ZStack","jsx","_jsx","TARGET","WHOLE_TARGET","modifiers","circle","IconButton","accessibilityHint","accessibilityLabel","name","onPress","testID","accessibilityModifiers","list","push","children","h","ios","w","
|
|
1
|
+
{"version":3,"names":["Button","buttonBorderShape","buttonStyle","contentShape","disabled","disabledModifier","shapes","tint","tintModifier","isLiquidGlassAvailable","useAccessibilityModifiers","useAppTheme","useMemo","useHostGuard","contentOnTint","Icon","ZStack","jsx","_jsx","TARGET","RING","WHOLE_TARGET","modifiers","circle","STYLE_BY_VARIANT","filled","glass","outlined","plain","tonal","IconButton","accessibilityHint","accessibilityLabel","color","name","onPress","testID","variant","theme","accessibilityModifiers","style","bezel","fill","undefined","iconColor","list","push","icon","children","h","ios","w","borderColor","borderRadius","borderWidth"],"sourceRoot":"../../../../src","sources":["atoms/icon-button/icon-button.ios.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,31 +1,59 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { LazyColumn, PullToRefreshBox } from '@expo/ui/jetpack-compose';
|
|
4
|
+
import { testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
|
|
4
5
|
import { useSxModifiers } from '@hzblj/kara-sx';
|
|
5
|
-
import {
|
|
6
|
+
import { spacing } from '@hzblj/kara-theme';
|
|
7
|
+
import { Children, Fragment, isValidElement, useMemo } from 'react';
|
|
6
8
|
import { useHostGuard } from "../../host-context.js";
|
|
7
9
|
import { useRefreshState } from "../../use-refresh-state.js";
|
|
10
|
+
import { Card } from "../card/index.js";
|
|
8
11
|
import { Divider } from "../divider/index.js";
|
|
9
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
13
|
/** A divider between rows, the separator SwiftUI's `List` draws on its own — so rows are written the same for both. */
|
|
11
14
|
const withSeparators = children => Children.toArray(children).map((child, index) => /*#__PURE__*/_jsxs(Fragment, {
|
|
12
15
|
children: [index > 0 ? /*#__PURE__*/_jsx(Divider, {}) : null, child]
|
|
13
16
|
}, /*#__PURE__*/isValidElement(child) && child.key !== null ? child.key : index));
|
|
17
|
+
|
|
18
|
+
/** The card's inset from the column's edges, as `Form` keeps its cards off the screen's. */
|
|
19
|
+
const INSET = {
|
|
20
|
+
bottom: spacing.s16,
|
|
21
|
+
end: spacing.s16,
|
|
22
|
+
start: spacing.s16,
|
|
23
|
+
top: spacing.s16
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* `plain` is the column as it always was. `insetGrouped` sets the rows in one `Card`, the way `Form` draws a section,
|
|
28
|
+
* inset by the column's content padding: the card is a single item of the column, so its rows are composed together
|
|
29
|
+
* rather than as they scroll in. A long list that wants laziness stays `plain`.
|
|
30
|
+
*/
|
|
14
31
|
export const List = ({
|
|
15
32
|
children,
|
|
16
|
-
onRefresh
|
|
33
|
+
onRefresh,
|
|
34
|
+
separators = true,
|
|
35
|
+
testID,
|
|
36
|
+
variant = 'plain'
|
|
17
37
|
}) => {
|
|
18
38
|
useHostGuard('List');
|
|
19
|
-
const
|
|
39
|
+
const sxModifiers = useSxModifiers({
|
|
20
40
|
wide: true
|
|
21
41
|
});
|
|
42
|
+
// On the column, not the refresh box around it: the column is what scrolls.
|
|
43
|
+
const modifiers = useMemo(() => testID ? [...sxModifiers, testIdModifier(testID)] : sxModifiers, [sxModifiers, testID]);
|
|
22
44
|
const {
|
|
23
45
|
isRefreshing,
|
|
24
46
|
refresh
|
|
25
47
|
} = useRefreshState(onRefresh);
|
|
48
|
+
const rows = separators ? withSeparators(children) : children;
|
|
49
|
+
const grouped = variant === 'insetGrouped';
|
|
26
50
|
const column = /*#__PURE__*/_jsx(LazyColumn, {
|
|
51
|
+
contentPadding: grouped ? INSET : undefined,
|
|
27
52
|
modifiers: modifiers,
|
|
28
|
-
children:
|
|
53
|
+
children: grouped && Children.toArray(children).length > 0 ? /*#__PURE__*/_jsx(Card, {
|
|
54
|
+
wide: true,
|
|
55
|
+
children: rows
|
|
56
|
+
}) : rows
|
|
29
57
|
});
|
|
30
58
|
if (!onRefresh) {
|
|
31
59
|
return column;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["LazyColumn","PullToRefreshBox","useSxModifiers","Children","Fragment","isValidElement","useHostGuard","useRefreshState","Divider","jsx","_jsx","jsxs","_jsxs","withSeparators","children","toArray","map","child","index","key","List","onRefresh","
|
|
1
|
+
{"version":3,"names":["LazyColumn","PullToRefreshBox","testID","testIdModifier","useSxModifiers","spacing","Children","Fragment","isValidElement","useMemo","useHostGuard","useRefreshState","Card","Divider","jsx","_jsx","jsxs","_jsxs","withSeparators","children","toArray","map","child","index","key","INSET","bottom","s16","end","start","top","List","onRefresh","separators","variant","sxModifiers","wide","modifiers","isRefreshing","refresh","rows","grouped","column","contentPadding","undefined","length"],"sourceRoot":"../../../../src","sources":["atoms/list/list.android.tsx"],"mappings":";;AAAA,SAAQA,UAAU,EAAEC,gBAAgB,QAAO,0BAA0B;AACrE,SAAQC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3E,SAAQC,cAAc,QAAO,gBAAgB;AAC7C,SAAQC,OAAO,QAAO,mBAAmB;AACzC,SAAQC,QAAQ,EAAEC,QAAQ,EAAEC,cAAc,EAAEC,OAAO,QAAO,OAAO;AACjE,SAAQC,YAAY,QAAO,uBAAoB;AAC/C,SAAQC,eAAe,QAAO,4BAAyB;AACvD,SAAQC,IAAI,QAAO,kBAAS;AAC5B,SAAQC,OAAO,QAAO,qBAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGlC;AACA,MAAMC,cAAc,GAAIC,QAA+B,IACrDb,QAAQ,CAACc,OAAO,CAACD,QAAQ,CAAC,CAACE,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,kBAC1CN,KAAA,CAACV,QAAQ;EAAAY,QAAA,GACNI,KAAK,GAAG,CAAC,gBAAGR,IAAA,CAACF,OAAO,IAAE,CAAC,GAAG,IAAI,EAC9BS,KAAK;AAAA,GAFO,aAAAd,cAAc,CAACc,KAAK,CAAC,IAAIA,KAAK,CAACE,GAAG,KAAK,IAAI,GAAGF,KAAK,CAACE,GAAG,GAAGD,KAG/D,CACX,CAAC;;AAEJ;AACA,MAAME,KAAK,GAAG;EAACC,MAAM,EAAErB,OAAO,CAACsB,GAAG;EAAEC,GAAG,EAAEvB,OAAO,CAACsB,GAAG;EAAEE,KAAK,EAAExB,OAAO,CAACsB,GAAG;EAAEG,GAAG,EAAEzB,OAAO,CAACsB;AAAG,CAAC;;AAE3F;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,IAAmB,GAAGA,CAAC;EAACZ,QAAQ;EAAEa,SAAS;EAAEC,UAAU,GAAG,IAAI;EAAE/B,MAAM;EAAEgC,OAAO,GAAG;AAAkB,CAAC,KAAK;EACrHxB,YAAY,CAAC,MAAM,CAAC;EACpB,MAAMyB,WAAW,GAAG/B,cAAc,CAAC;IAACgC,IAAI,EAAE;EAAI,CAAC,CAAC;EAChD;EACA,MAAMC,SAAS,GAAG5B,OAAO,CACvB,MAAOP,MAAM,GAAG,CAAC,GAAGiC,WAAW,EAAEhC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAGiC,WAAY,EACvE,CAACA,WAAW,EAAEjC,MAAM,CACtB,CAAC;EACD,MAAM;IAACoC,YAAY;IAAEC;EAAO,CAAC,GAAG5B,eAAe,CAACqB,SAAS,CAAC;EAC1D,MAAMQ,IAAI,GAAGP,UAAU,GAAGf,cAAc,CAACC,QAAQ,CAAC,GAAGA,QAAQ;EAC7D,MAAMsB,OAAO,GAAGP,OAAO,KAAK,cAAc;EAE1C,MAAMQ,MAAM,gBACV3B,IAAA,CAACf,UAAU;IAAC2C,cAAc,EAAEF,OAAO,GAAGhB,KAAK,GAAGmB,SAAU;IAACP,SAAS,EAAEA,SAAU;IAAAlB,QAAA,EAC3EsB,OAAO,IAAInC,QAAQ,CAACc,OAAO,CAACD,QAAQ,CAAC,CAAC0B,MAAM,GAAG,CAAC,gBAAG9B,IAAA,CAACH,IAAI;MAACwB,IAAI;MAAAjB,QAAA,EAAEqB;IAAI,CAAO,CAAC,GAAGA;EAAI,CACzE,CACb;EAED,IAAI,CAACR,SAAS,EAAE;IACd,OAAOU,MAAM;EACf;EAEA,oBACE3B,IAAA,CAACd,gBAAgB;IAACqC,YAAY,EAAEA,YAAa;IAACN,SAAS,EAAEO,OAAQ;IAAApB,QAAA,EAC9DuB;EAAM,CACS,CAAC;AAEvB,CAAC","ignoreList":[]}
|
|
@@ -1,21 +1,31 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { List as SwiftUIList } from '@expo/ui/swift-ui';
|
|
4
|
-
import { refreshable } from '@expo/ui/swift-ui/modifiers';
|
|
3
|
+
import { Group, List as SwiftUIList } from '@expo/ui/swift-ui';
|
|
4
|
+
import { listRowSeparator, listStyle, refreshable } from '@expo/ui/swift-ui/modifiers';
|
|
5
5
|
import { useMemo } from 'react';
|
|
6
6
|
import { useHostGuard } from "../../host-context.js";
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
/**
|
|
9
|
+
* `listRowSeparator` is a row's preference, not the list's: set on the `List` it reaches no row. A `Group` hands a
|
|
10
|
+
* modifier to each of its children, so the rows go in one, and each of them hides its own separator.
|
|
11
|
+
*/
|
|
12
|
+
const NO_SEPARATORS = [listRowSeparator('hidden')];
|
|
8
13
|
export const List = ({
|
|
9
14
|
children,
|
|
10
15
|
onRefresh,
|
|
11
|
-
|
|
16
|
+
separators = true,
|
|
17
|
+
testID,
|
|
18
|
+
variant = 'insetGrouped'
|
|
12
19
|
}) => {
|
|
13
20
|
useHostGuard('List');
|
|
14
|
-
const modifiers = useMemo(() => onRefresh ? [refreshable(onRefresh)] : [], [onRefresh]);
|
|
21
|
+
const modifiers = useMemo(() => [listStyle(variant), ...(onRefresh ? [refreshable(onRefresh)] : [])], [onRefresh, variant]);
|
|
15
22
|
return /*#__PURE__*/_jsx(SwiftUIList, {
|
|
16
23
|
modifiers: modifiers,
|
|
17
24
|
testID: testID,
|
|
18
|
-
children: children
|
|
25
|
+
children: separators ? children : /*#__PURE__*/_jsx(Group, {
|
|
26
|
+
modifiers: NO_SEPARATORS,
|
|
27
|
+
children: children
|
|
28
|
+
})
|
|
19
29
|
});
|
|
20
30
|
};
|
|
21
31
|
//# sourceMappingURL=list.ios.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["List","SwiftUIList","refreshable","useMemo","useHostGuard","jsx","_jsx","children","onRefresh","testID","modifiers"],"sourceRoot":"../../../../src","sources":["atoms/list/list.ios.tsx"],"mappings":";;AAAA,SAAQA,IAAI,IAAIC,WAAW,QAAO,mBAAmB;
|
|
1
|
+
{"version":3,"names":["Group","List","SwiftUIList","listRowSeparator","listStyle","refreshable","useMemo","useHostGuard","jsx","_jsx","NO_SEPARATORS","children","onRefresh","separators","testID","variant","modifiers"],"sourceRoot":"../../../../src","sources":["atoms/list/list.ios.tsx"],"mappings":";;AAAA,SAAQA,KAAK,EAAEC,IAAI,IAAIC,WAAW,QAAO,mBAAmB;AAC5D,SAAQC,gBAAgB,EAAEC,SAAS,EAAuBC,WAAW,QAAO,6BAA6B;AACzG,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAG,CAACP,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAElD,OAAO,MAAMF,IAAmB,GAAGA,CAAC;EAClCU,QAAQ;EACRC,SAAS;EACTC,UAAU,GAAG,IAAI;EACjBC,MAAM;EACNC,OAAO,GAAG;AACD,CAAC,KAAK;EACfR,YAAY,CAAC,MAAM,CAAC;EAEpB,MAAMS,SAAS,GAAGV,OAAO,CACvB,MAAM,CAACF,SAAS,CAACW,OAAO,CAAC,EAAE,IAAIH,SAAS,GAAG,CAACP,WAAW,CAACO,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAC1E,CAACA,SAAS,EAAEG,OAAO,CACrB,CAAC;EAED,oBACEN,IAAA,CAACP,WAAW;IAACc,SAAS,EAAEA,SAAU;IAACF,MAAM,EAAEA,MAAO;IAAAH,QAAA,EAC/CE,UAAU,GAAGF,QAAQ,gBAAGF,IAAA,CAACT,KAAK;MAACgB,SAAS,EAAEN,aAAc;MAAAC,QAAA,EAAEA;IAAQ,CAAQ;EAAC,CACjE,CAAC;AAElB,CAAC","ignoreList":[]}
|
|
@@ -1,32 +1,46 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { CircularProgressIndicator, LinearProgressIndicator } from '@expo/ui/jetpack-compose';
|
|
4
|
+
import { testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
|
|
4
5
|
import { useAccessibilityModifiers } from '@hzblj/kara-sx';
|
|
5
|
-
import { useAppTheme } from '@hzblj/kara-theme';
|
|
6
|
+
import { useAppTheme, withOpacity } from '@hzblj/kara-theme';
|
|
7
|
+
import { useMemo } from 'react';
|
|
6
8
|
import { useHostGuard } from "../../host-context.js";
|
|
7
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
/**
|
|
11
|
+
* Material draws the track in the seeded scheme's `secondaryContainer`, a pale accent: under a red or a green bar it
|
|
12
|
+
* would read as a second colour. Any other colour gets its own faded track instead, the way the accent's is pale; the
|
|
13
|
+
* accent keeps Material's. An indeterminate ring has no track in Material, so it is left without one.
|
|
14
|
+
*/
|
|
8
15
|
export const Progress = ({
|
|
9
16
|
accessibilityLabel,
|
|
10
17
|
circular = false,
|
|
18
|
+
color = 'fill.accent.primary',
|
|
19
|
+
testID,
|
|
11
20
|
value
|
|
12
21
|
}) => {
|
|
13
22
|
useHostGuard('Progress');
|
|
14
23
|
const theme = useAppTheme();
|
|
15
|
-
const
|
|
16
|
-
|
|
24
|
+
const indicator = theme.color(color);
|
|
25
|
+
// The website reads the default above from the source, so it stays a literal rather than a shared constant.
|
|
26
|
+
const track = color === 'fill.accent.primary' ? undefined : withOpacity(String(indicator), 'o20');
|
|
27
|
+
const accessibilityModifiers = useAccessibilityModifiers({
|
|
17
28
|
accessibilityLabel
|
|
18
29
|
});
|
|
30
|
+
const modifiers = useMemo(() => testID ? [testIdModifier(testID), ...accessibilityModifiers] : accessibilityModifiers, [accessibilityModifiers, testID]);
|
|
19
31
|
if (circular) {
|
|
20
32
|
return /*#__PURE__*/_jsx(CircularProgressIndicator, {
|
|
21
|
-
color:
|
|
33
|
+
color: indicator,
|
|
22
34
|
modifiers: modifiers,
|
|
23
|
-
progress: value
|
|
35
|
+
progress: value,
|
|
36
|
+
trackColor: value === undefined ? undefined : track
|
|
24
37
|
});
|
|
25
38
|
}
|
|
26
39
|
return /*#__PURE__*/_jsx(LinearProgressIndicator, {
|
|
27
|
-
color:
|
|
40
|
+
color: indicator,
|
|
28
41
|
modifiers: modifiers,
|
|
29
|
-
progress: value
|
|
42
|
+
progress: value,
|
|
43
|
+
trackColor: track
|
|
30
44
|
});
|
|
31
45
|
};
|
|
32
46
|
//# sourceMappingURL=progress.android.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["CircularProgressIndicator","LinearProgressIndicator","useAccessibilityModifiers","useAppTheme","useHostGuard","jsx","_jsx","Progress","accessibilityLabel","circular","value","theme","
|
|
1
|
+
{"version":3,"names":["CircularProgressIndicator","LinearProgressIndicator","testID","testIdModifier","useAccessibilityModifiers","useAppTheme","withOpacity","useMemo","useHostGuard","jsx","_jsx","Progress","accessibilityLabel","circular","color","value","theme","indicator","track","undefined","String","accessibilityModifiers","modifiers","progress","trackColor"],"sourceRoot":"../../../../src","sources":["atoms/progress/progress.android.tsx"],"mappings":";;AAAA,SAAQA,yBAAyB,EAAEC,uBAAuB,QAAO,0BAA0B;AAC3F,SAAQC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AAC3E,SAAQC,yBAAyB,QAAO,gBAAgB;AACxD,SAAQC,WAAW,EAAEC,WAAW,QAAO,mBAAmB;AAC1D,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAA2B,GAAGA,CAAC;EAC1CC,kBAAkB;EAClBC,QAAQ,GAAG,KAAK;EAChBC,KAAK,GAAG,qBAAqB;EAC7BZ,MAAM;EACNa;AACa,CAAC,KAAK;EACnBP,YAAY,CAAC,UAAU,CAAC;EACxB,MAAMQ,KAAK,GAAGX,WAAW,CAAC,CAAC;EAC3B,MAAMY,SAAS,GAAGD,KAAK,CAACF,KAAK,CAACA,KAAK,CAAC;EACpC;EACA,MAAMI,KAAK,GAAGJ,KAAK,KAAK,qBAAqB,GAAGK,SAAS,GAAGb,WAAW,CAACc,MAAM,CAACH,SAAS,CAAC,EAAE,KAAK,CAAC;EACjG,MAAMI,sBAAsB,GAAGjB,yBAAyB,CAAC;IAACQ;EAAkB,CAAC,CAAC;EAC9E,MAAMU,SAAS,GAAGf,OAAO,CACvB,MAAOL,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,EAAE,GAAGmB,sBAAsB,CAAC,GAAGA,sBAAuB,EAC7F,CAACA,sBAAsB,EAAEnB,MAAM,CACjC,CAAC;EAED,IAAIW,QAAQ,EAAE;IACZ,oBACEH,IAAA,CAACV,yBAAyB;MACxBc,KAAK,EAAEG,SAAU;MACjBK,SAAS,EAAEA,SAAU;MACrBC,QAAQ,EAAER,KAAM;MAChBS,UAAU,EAAET,KAAK,KAAKI,SAAS,GAAGA,SAAS,GAAGD;IAAM,CACrD,CAAC;EAEN;EAEA,oBAAOR,IAAA,CAACT,uBAAuB;IAACa,KAAK,EAAEG,SAAU;IAACK,SAAS,EAAEA,SAAU;IAACC,QAAQ,EAAER,KAAM;IAACS,UAAU,EAAEN;EAAM,CAAE,CAAC;AAChH,CAAC","ignoreList":[]}
|
|
@@ -10,6 +10,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
10
10
|
export const Progress = ({
|
|
11
11
|
accessibilityLabel,
|
|
12
12
|
circular = false,
|
|
13
|
+
color = 'fill.accent.primary',
|
|
14
|
+
testID,
|
|
13
15
|
value
|
|
14
16
|
}) => {
|
|
15
17
|
useHostGuard('Progress');
|
|
@@ -18,14 +20,16 @@ export const Progress = ({
|
|
|
18
20
|
accessibilityLabel
|
|
19
21
|
});
|
|
20
22
|
const ring = circular && value !== undefined;
|
|
21
|
-
const modifiers = useMemo(() => [ring ? gaugeStyle('circularCapacity') : progressViewStyle(circular ? 'circular' : 'linear'), tint(theme.color(
|
|
23
|
+
const modifiers = useMemo(() => [ring ? gaugeStyle('circularCapacity') : progressViewStyle(circular ? 'circular' : 'linear'), tint(theme.color(color)), ...accessibilityModifiers], [accessibilityModifiers, circular, color, ring, theme]);
|
|
22
24
|
|
|
23
25
|
// SwiftUI's circular `ProgressView` ignores its value on iOS and spins; a ring that fills is a capacity `Gauge`.
|
|
24
26
|
return ring ? /*#__PURE__*/_jsx(Gauge, {
|
|
25
27
|
modifiers: modifiers,
|
|
28
|
+
testID: testID,
|
|
26
29
|
value: value
|
|
27
30
|
}) : /*#__PURE__*/_jsx(ProgressView, {
|
|
28
31
|
modifiers: modifiers,
|
|
32
|
+
testID: testID,
|
|
29
33
|
value: value ?? null
|
|
30
34
|
});
|
|
31
35
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Gauge","ProgressView","gaugeStyle","progressViewStyle","tint","useAccessibilityModifiers","useAppTheme","useMemo","useHostGuard","jsx","_jsx","Progress","accessibilityLabel","circular","value","theme","accessibilityModifiers","ring","undefined","modifiers"
|
|
1
|
+
{"version":3,"names":["Gauge","ProgressView","gaugeStyle","progressViewStyle","tint","useAccessibilityModifiers","useAppTheme","useMemo","useHostGuard","jsx","_jsx","Progress","accessibilityLabel","circular","color","testID","value","theme","accessibilityModifiers","ring","undefined","modifiers"],"sourceRoot":"../../../../src","sources":["atoms/progress/progress.ios.tsx"],"mappings":";;AAAA,SAAQA,KAAK,EAAEC,YAAY,QAAO,mBAAmB;AACrD,SAAQC,UAAU,EAAEC,iBAAiB,EAAEC,IAAI,QAAO,6BAA6B;AAC/E,SAAQC,yBAAyB,QAAO,gBAAgB;AACxD,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,QAA2B,GAAGA,CAAC;EAC1CC,kBAAkB;EAClBC,QAAQ,GAAG,KAAK;EAChBC,KAAK,GAAG,qBAAqB;EAC7BC,MAAM;EACNC;AACa,CAAC,KAAK;EACnBR,YAAY,CAAC,UAAU,CAAC;EACxB,MAAMS,KAAK,GAAGX,WAAW,CAAC,CAAC;EAC3B,MAAMY,sBAAsB,GAAGb,yBAAyB,CAAC;IAACO;EAAkB,CAAC,CAAC;EAE9E,MAAMO,IAAI,GAAGN,QAAQ,IAAIG,KAAK,KAAKI,SAAS;EAC5C,MAAMC,SAAS,GAAGd,OAAO,CACvB,MAAM,CACJY,IAAI,GAAGjB,UAAU,CAAC,kBAAkB,CAAC,GAAGC,iBAAiB,CAACU,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC,EAC3FT,IAAI,CAACa,KAAK,CAACH,KAAK,CAACA,KAAK,CAAC,CAAC,EACxB,GAAGI,sBAAsB,CAC1B,EACD,CAACA,sBAAsB,EAAEL,QAAQ,EAAEC,KAAK,EAAEK,IAAI,EAAEF,KAAK,CACvD,CAAC;;EAED;EACA,OAAOE,IAAI,gBACTT,IAAA,CAACV,KAAK;IAACqB,SAAS,EAAEA,SAAU;IAACN,MAAM,EAAEA,MAAO;IAACC,KAAK,EAAEA;EAAM,CAAE,CAAC,gBAE7DN,IAAA,CAACT,YAAY;IAACoB,SAAS,EAAEA,SAAU;IAACN,MAAM,EAAEA,MAAO;IAACC,KAAK,EAAEA,KAAK,IAAI;EAAK,CAAE,CAC5E;AACH,CAAC","ignoreList":[]}
|
|
@@ -1,22 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { Slider as ComposeSlider } from '@expo/ui/jetpack-compose';
|
|
4
|
+
import { testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
|
|
4
5
|
import { haptics } from '@hzblj/expo-rich-haptics';
|
|
5
6
|
import { useAppTheme } from '@hzblj/kara-theme';
|
|
6
|
-
import { useCallback, useEffect, useRef } from 'react';
|
|
7
|
+
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
7
8
|
import { useHostGuard } from "../../host-context.js";
|
|
8
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
10
|
/**
|
|
10
11
|
* Material's slider. `step` is the increment, as SwiftUI takes it; Compose counts the stops between the two ends
|
|
11
12
|
* instead, so it is converted. A stepped slider ticks at every stop the thumb reaches — Compose's Material slider
|
|
12
|
-
* plays nothing of its own, where iOS 26's slider already does.
|
|
13
|
+
* plays nothing of its own, where iOS 26's slider already does. `onValueChangeEnd` is Material's
|
|
14
|
+
* `onValueChangeFinished`, which reports no value: it gets the last one the drag reported.
|
|
13
15
|
*/
|
|
14
16
|
export const Slider = ({
|
|
15
17
|
disabled = false,
|
|
16
18
|
max = 1,
|
|
17
19
|
min = 0,
|
|
18
20
|
onValueChange,
|
|
21
|
+
onValueChangeEnd,
|
|
19
22
|
step,
|
|
23
|
+
testID,
|
|
20
24
|
value
|
|
21
25
|
}) => {
|
|
22
26
|
useHostGuard('Slider');
|
|
@@ -27,6 +31,7 @@ export const Slider = ({
|
|
|
27
31
|
// Compose reports faster than React re-renders the controlled value.
|
|
28
32
|
const stopOf = useCallback(at => step ? Math.round((at - min) / step) : 0, [min, step]);
|
|
29
33
|
const stop = useRef(stopOf(value));
|
|
34
|
+
const dragged = useRef(undefined);
|
|
30
35
|
useEffect(() => {
|
|
31
36
|
stop.current = stopOf(value);
|
|
32
37
|
}, [stopOf, value]);
|
|
@@ -36,8 +41,15 @@ export const Slider = ({
|
|
|
36
41
|
haptics.tick();
|
|
37
42
|
}
|
|
38
43
|
stop.current = reached;
|
|
44
|
+
dragged.current = next;
|
|
39
45
|
onValueChange?.(next);
|
|
40
46
|
}, [onValueChange, stopOf, steps]);
|
|
47
|
+
const onFinished = useCallback(() => {
|
|
48
|
+
const final = dragged.current ?? value;
|
|
49
|
+
dragged.current = undefined;
|
|
50
|
+
onValueChangeEnd?.(final);
|
|
51
|
+
}, [onValueChangeEnd, value]);
|
|
52
|
+
const modifiers = useMemo(() => testID ? [testIdModifier(testID)] : undefined, [testID]);
|
|
41
53
|
return /*#__PURE__*/_jsx(ComposeSlider, {
|
|
42
54
|
colors: {
|
|
43
55
|
activeTrackColor: theme.color('fill.accent.primary'),
|
|
@@ -46,7 +58,9 @@ export const Slider = ({
|
|
|
46
58
|
enabled: !disabled,
|
|
47
59
|
max: max,
|
|
48
60
|
min: min,
|
|
61
|
+
modifiers: modifiers,
|
|
49
62
|
onValueChange: onChange,
|
|
63
|
+
onValueChangeFinished: onValueChangeEnd ? onFinished : undefined,
|
|
50
64
|
steps: steps,
|
|
51
65
|
value: value
|
|
52
66
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Slider","ComposeSlider","haptics","useAppTheme","useCallback","useEffect","useRef","useHostGuard","jsx","_jsx","disabled","max","min","onValueChange","step","value","theme","steps","Math","round","stopOf","at","stop","current","onChange","next","reached","tick","colors","activeTrackColor","color","thumbColor","enabled"],"sourceRoot":"../../../../src","sources":["atoms/slider/slider.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,aAAa,QAAO,0BAA0B;AAChE,SAAQC,OAAO,QAAO,0BAA0B;AAChD,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAO,OAAO;
|
|
1
|
+
{"version":3,"names":["Slider","ComposeSlider","testID","testIdModifier","haptics","useAppTheme","useCallback","useEffect","useMemo","useRef","useHostGuard","jsx","_jsx","disabled","max","min","onValueChange","onValueChangeEnd","step","value","theme","steps","Math","round","stopOf","at","stop","dragged","undefined","current","onChange","next","reached","tick","onFinished","final","modifiers","colors","activeTrackColor","color","thumbColor","enabled","onValueChangeFinished"],"sourceRoot":"../../../../src","sources":["atoms/slider/slider.android.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,19 +3,26 @@
|
|
|
3
3
|
import { Slider as SwiftUISlider } from '@expo/ui/swift-ui';
|
|
4
4
|
import { disabled as disabledModifier, tint } from '@expo/ui/swift-ui/modifiers';
|
|
5
5
|
import { useAppTheme } from '@hzblj/kara-theme';
|
|
6
|
-
import { useMemo } from 'react';
|
|
6
|
+
import { useCallback, useMemo, useRef } from 'react';
|
|
7
7
|
import { useHostGuard } from "../../host-context.js";
|
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
/**
|
|
10
|
+
* SwiftUI's slider. `onValueChangeEnd` is its `onEditingChanged(false)`, with the last value the drag reported: the
|
|
11
|
+
* controlled `value` can still be a render behind when the finger lifts.
|
|
12
|
+
*/
|
|
9
13
|
export const Slider = ({
|
|
10
14
|
disabled = false,
|
|
11
15
|
max = 1,
|
|
12
16
|
min = 0,
|
|
13
17
|
onValueChange,
|
|
18
|
+
onValueChangeEnd,
|
|
14
19
|
step,
|
|
20
|
+
testID,
|
|
15
21
|
value
|
|
16
22
|
}) => {
|
|
17
23
|
useHostGuard('Slider');
|
|
18
24
|
const theme = useAppTheme();
|
|
25
|
+
const dragged = useRef(undefined);
|
|
19
26
|
const modifiers = useMemo(() => {
|
|
20
27
|
const list = [tint(theme.color('fill.accent.primary'))];
|
|
21
28
|
if (disabled) {
|
|
@@ -23,12 +30,25 @@ export const Slider = ({
|
|
|
23
30
|
}
|
|
24
31
|
return list;
|
|
25
32
|
}, [disabled, theme]);
|
|
33
|
+
const onChange = useCallback(next => {
|
|
34
|
+
dragged.current = next;
|
|
35
|
+
onValueChange?.(next);
|
|
36
|
+
}, [onValueChange]);
|
|
37
|
+
const onEditingChanged = useCallback(editing => {
|
|
38
|
+
const final = dragged.current ?? value;
|
|
39
|
+
dragged.current = undefined;
|
|
40
|
+
if (!editing) {
|
|
41
|
+
onValueChangeEnd?.(final);
|
|
42
|
+
}
|
|
43
|
+
}, [onValueChangeEnd, value]);
|
|
26
44
|
return /*#__PURE__*/_jsx(SwiftUISlider, {
|
|
27
45
|
max: max,
|
|
28
46
|
min: min,
|
|
29
47
|
modifiers: modifiers,
|
|
30
|
-
|
|
48
|
+
onEditingChanged: onValueChangeEnd ? onEditingChanged : undefined,
|
|
49
|
+
onValueChange: onChange,
|
|
31
50
|
step: step,
|
|
51
|
+
testID: testID,
|
|
32
52
|
value: value
|
|
33
53
|
});
|
|
34
54
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Slider","SwiftUISlider","disabled","disabledModifier","tint","useAppTheme","useMemo","useHostGuard","jsx","_jsx","max","min","onValueChange","step","value","theme","modifiers","list","color","push"],"sourceRoot":"../../../../src","sources":["atoms/slider/slider.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,aAAa,QAAO,mBAAmB;AACzD,SAAQC,QAAQ,IAAIC,gBAAgB,EAAEC,IAAI,QAAO,6BAA6B;AAC9E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;
|
|
1
|
+
{"version":3,"names":["Slider","SwiftUISlider","disabled","disabledModifier","tint","useAppTheme","useCallback","useMemo","useRef","useHostGuard","jsx","_jsx","max","min","onValueChange","onValueChangeEnd","step","testID","value","theme","dragged","undefined","modifiers","list","color","push","onChange","next","current","onEditingChanged","editing","final"],"sourceRoot":"../../../../src","sources":["atoms/slider/slider.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,aAAa,QAAO,mBAAmB;AACzD,SAAQC,QAAQ,IAAIC,gBAAgB,EAAEC,IAAI,QAAO,6BAA6B;AAC9E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,OAAO,EAAEC,MAAM,QAAO,OAAO;AAElD,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C;AACA;AACA;AACA;AACA,OAAO,MAAMX,MAAuB,GAAGA,CAAC;EACtCE,QAAQ,GAAG,KAAK;EAChBU,GAAG,GAAG,CAAC;EACPC,GAAG,GAAG,CAAC;EACPC,aAAa;EACbC,gBAAgB;EAChBC,IAAI;EACJC,MAAM;EACNC;AACW,CAAC,KAAK;EACjBT,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMU,KAAK,GAAGd,WAAW,CAAC,CAAC;EAC3B,MAAMe,OAAO,GAAGZ,MAAM,CAAqBa,SAAS,CAAC;EAErD,MAAMC,SAAS,GAAGf,OAAO,CAAC,MAAM;IAC9B,MAAMgB,IAAI,GAAG,CAACnB,IAAI,CAACe,KAAK,CAACK,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAEvD,IAAItB,QAAQ,EAAE;MACZqB,IAAI,CAACE,IAAI,CAACtB,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC;IAEA,OAAOoB,IAAI;EACb,CAAC,EAAE,CAACrB,QAAQ,EAAEiB,KAAK,CAAC,CAAC;EAErB,MAAMO,QAAQ,GAAGpB,WAAW,CACzBqB,IAAY,IAAK;IAChBP,OAAO,CAACQ,OAAO,GAAGD,IAAI;IACtBb,aAAa,GAAGa,IAAI,CAAC;EACvB,CAAC,EACD,CAACb,aAAa,CAChB,CAAC;EAED,MAAMe,gBAAgB,GAAGvB,WAAW,CACjCwB,OAAgB,IAAK;IACpB,MAAMC,KAAK,GAAGX,OAAO,CAACQ,OAAO,IAAIV,KAAK;IACtCE,OAAO,CAACQ,OAAO,GAAGP,SAAS;IAE3B,IAAI,CAACS,OAAO,EAAE;MACZf,gBAAgB,GAAGgB,KAAK,CAAC;IAC3B;EACF,CAAC,EACD,CAAChB,gBAAgB,EAAEG,KAAK,CAC1B,CAAC;EAED,oBACEP,IAAA,CAACV,aAAa;IACZW,GAAG,EAAEA,GAAI;IACTC,GAAG,EAAEA,GAAI;IACTS,SAAS,EAAEA,SAAU;IACrBO,gBAAgB,EAAEd,gBAAgB,GAAGc,gBAAgB,GAAGR,SAAU;IAClEP,aAAa,EAAEY,QAAS;IACxBV,IAAI,EAAEA,IAAK;IACXC,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { Switch as ComposeSwitch, Row, Text } from '@expo/ui/jetpack-compose';
|
|
4
|
-
import { clickable, fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';
|
|
4
|
+
import { clickable, fillMaxWidth, testID as testIdModifier } from '@expo/ui/jetpack-compose/modifiers';
|
|
5
5
|
import { haptics } from '@hzblj/expo-rich-haptics';
|
|
6
6
|
import { useAppTheme } from '@hzblj/kara-theme';
|
|
7
7
|
import { useCallback, useMemo } from 'react';
|
|
@@ -20,6 +20,7 @@ export const Switch = ({
|
|
|
20
20
|
disabled = false,
|
|
21
21
|
label,
|
|
22
22
|
onValueChange,
|
|
23
|
+
testID,
|
|
23
24
|
value
|
|
24
25
|
}) => {
|
|
25
26
|
useHostGuard('Switch');
|
|
@@ -29,6 +30,8 @@ export const Switch = ({
|
|
|
29
30
|
onValueChange?.(next);
|
|
30
31
|
}, [onValueChange]);
|
|
31
32
|
const rowModifiers = useMemo(() => disabled || !onValueChange ? [fillMaxWidth()] : [fillMaxWidth(), clickable(() => toggle(!value))], [disabled, onValueChange, toggle, value]);
|
|
33
|
+
// On the switch, not the row: the switch is its own toggleable node inside the row, and the one a test reads.
|
|
34
|
+
const controlModifiers = useMemo(() => testID ? [testIdModifier(testID)] : undefined, [testID]);
|
|
32
35
|
const control = /*#__PURE__*/_jsx(ComposeSwitch, {
|
|
33
36
|
colors: {
|
|
34
37
|
checkedBorderColor: theme.color('fill.accent.primary'),
|
|
@@ -36,6 +39,7 @@ export const Switch = ({
|
|
|
36
39
|
checkedTrackColor: theme.color('fill.accent.primary')
|
|
37
40
|
},
|
|
38
41
|
enabled: !disabled,
|
|
42
|
+
modifiers: controlModifiers,
|
|
39
43
|
onCheckedChange: onValueChange ? toggle : NOOP,
|
|
40
44
|
value: value
|
|
41
45
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Switch","ComposeSwitch","Row","Text","clickable","fillMaxWidth","haptics","useAppTheme","useCallback","useMemo","useHostGuard","jsx","_jsx","jsxs","_jsxs","NOOP","undefined","disabled","label","onValueChange","value","theme","toggle","next","play","rowModifiers","control","colors","checkedBorderColor","color","checkedThumbColor","checkedTrackColor","enabled","
|
|
1
|
+
{"version":3,"names":["Switch","ComposeSwitch","Row","Text","clickable","fillMaxWidth","testID","testIdModifier","haptics","useAppTheme","useCallback","useMemo","useHostGuard","jsx","_jsx","jsxs","_jsxs","NOOP","undefined","disabled","label","onValueChange","value","theme","toggle","next","play","rowModifiers","controlModifiers","control","colors","checkedBorderColor","color","checkedThumbColor","checkedTrackColor","enabled","modifiers","onCheckedChange","horizontalArrangement","verticalAlignment","children","colorString","style","typography","body"],"sourceRoot":"../../../../src","sources":["atoms/switch/switch.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,IAAIC,aAAa,EAAEC,GAAG,EAAEC,IAAI,QAAO,0BAA0B;AAC3E,SAAQC,SAAS,EAAEC,YAAY,EAAEC,MAAM,IAAIC,cAAc,QAAO,oCAAoC;AACpG,SAAQC,OAAO,QAAO,0BAA0B;AAChD,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAE1C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C;AACA,MAAMC,IAAI,GAAGA,CAAA,KAAMC,SAAS;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMlB,MAAuB,GAAGA,CAAC;EAACmB,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,aAAa;EAAEf,MAAM;EAAEgB;AAAkB,CAAC,KAAK;EAC/GV,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMW,KAAK,GAAGd,WAAW,CAAC,CAAC;EAC3B,MAAMe,MAAM,GAAGd,WAAW,CACvBe,IAAa,IAAK;IACjBjB,OAAO,CAACkB,IAAI,CAACD,IAAI,GAAG,UAAU,GAAG,WAAW,CAAC;IAC7CJ,aAAa,GAAGI,IAAI,CAAC;EACvB,CAAC,EACD,CAACJ,aAAa,CAChB,CAAC;EACD,MAAMM,YAAY,GAAGhB,OAAO,CAC1B,MAAOQ,QAAQ,IAAI,CAACE,aAAa,GAAG,CAAChB,YAAY,CAAC,CAAC,CAAC,GAAG,CAACA,YAAY,CAAC,CAAC,EAAED,SAAS,CAAC,MAAMoB,MAAM,CAAC,CAACF,KAAK,CAAC,CAAC,CAAE,EACzG,CAACH,QAAQ,EAAEE,aAAa,EAAEG,MAAM,EAAEF,KAAK,CACzC,CAAC;EACD;EACA,MAAMM,gBAAgB,GAAGjB,OAAO,CAAC,MAAOL,MAAM,GAAG,CAACC,cAAc,CAACD,MAAM,CAAC,CAAC,GAAGY,SAAU,EAAE,CAACZ,MAAM,CAAC,CAAC;EACjG,MAAMuB,OAAO,gBACXf,IAAA,CAACb,aAAa;IACZ6B,MAAM,EAAE;MACNC,kBAAkB,EAAER,KAAK,CAACS,KAAK,CAAC,qBAAqB,CAAC;MACtDC,iBAAiB,EAAEV,KAAK,CAACS,KAAK,CAAC,mBAAmB,CAAC;MACnDE,iBAAiB,EAAEX,KAAK,CAACS,KAAK,CAAC,qBAAqB;IACtD,CAAE;IACFG,OAAO,EAAE,CAAChB,QAAS;IACnBiB,SAAS,EAAER,gBAAiB;IAC5BS,eAAe,EAAEhB,aAAa,GAAGG,MAAM,GAAGP,IAAK;IAC/CK,KAAK,EAAEA;EAAM,CACd,CACF;EAED,IAAI,CAACF,KAAK,EAAE;IACV,OAAOS,OAAO;EAChB;EAEA,oBACEb,KAAA,CAACd,GAAG;IAACoC,qBAAqB,EAAC,cAAc;IAACF,SAAS,EAAET,YAAa;IAACY,iBAAiB,EAAC,QAAQ;IAAAC,QAAA,gBAC3F1B,IAAA,CAACX,IAAI;MAAC6B,KAAK,EAAET,KAAK,CAACkB,WAAW,CAACtB,QAAQ,GAAG,kBAAkB,GAAG,iBAAiB,CAAE;MAACuB,KAAK,EAAEnB,KAAK,CAACoB,UAAU,CAACC,IAAK;MAAAJ,QAAA,EAC7GpB;IAAK,CACF,CAAC,EACNS,OAAO;EAAA,CACL,CAAC;AAEV,CAAC","ignoreList":[]}
|
|
@@ -10,6 +10,7 @@ export const Switch = ({
|
|
|
10
10
|
disabled = false,
|
|
11
11
|
label,
|
|
12
12
|
onValueChange,
|
|
13
|
+
testID,
|
|
13
14
|
value
|
|
14
15
|
}) => {
|
|
15
16
|
useHostGuard('Switch');
|
|
@@ -25,7 +26,8 @@ export const Switch = ({
|
|
|
25
26
|
isOn: value,
|
|
26
27
|
label: label,
|
|
27
28
|
modifiers: modifiers,
|
|
28
|
-
onIsOnChange: onValueChange
|
|
29
|
+
onIsOnChange: onValueChange,
|
|
30
|
+
testID: testID
|
|
29
31
|
});
|
|
30
32
|
};
|
|
31
33
|
//# sourceMappingURL=switch.ios.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Toggle","disabled","disabledModifier","tint","useAppTheme","useMemo","useHostGuard","jsx","_jsx","Switch","label","onValueChange","value","theme","modifiers","list","color","push","isOn","onIsOnChange"],"sourceRoot":"../../../../src","sources":["atoms/switch/switch.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,mBAAmB;AACxC,SAAQC,QAAQ,IAAIC,gBAAgB,EAAEC,IAAI,QAAO,6BAA6B;AAC9E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,MAAuB,GAAGA,CAAC;EAACR,QAAQ,GAAG,KAAK;EAAES,KAAK;EAAEC,aAAa;EAAEC;AAAkB,CAAC,KAAK;
|
|
1
|
+
{"version":3,"names":["Toggle","disabled","disabledModifier","tint","useAppTheme","useMemo","useHostGuard","jsx","_jsx","Switch","label","onValueChange","testID","value","theme","modifiers","list","color","push","isOn","onIsOnChange"],"sourceRoot":"../../../../src","sources":["atoms/switch/switch.ios.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,mBAAmB;AACxC,SAAQC,QAAQ,IAAIC,gBAAgB,EAAEC,IAAI,QAAO,6BAA6B;AAC9E,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,MAAuB,GAAGA,CAAC;EAACR,QAAQ,GAAG,KAAK;EAAES,KAAK;EAAEC,aAAa;EAAEC,MAAM;EAAEC;AAAkB,CAAC,KAAK;EAC/GP,YAAY,CAAC,QAAQ,CAAC;EACtB,MAAMQ,KAAK,GAAGV,WAAW,CAAC,CAAC;EAE3B,MAAMW,SAAS,GAAGV,OAAO,CAAC,MAAM;IAC9B,MAAMW,IAAI,GAAG,CAACb,IAAI,CAACW,KAAK,CAACG,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAEvD,IAAIhB,QAAQ,EAAE;MACZe,IAAI,CAACE,IAAI,CAAChB,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC;IAEA,OAAOc,IAAI;EACb,CAAC,EAAE,CAACf,QAAQ,EAAEa,KAAK,CAAC,CAAC;EAErB,oBAAON,IAAA,CAACR,MAAM;IAACmB,IAAI,EAAEN,KAAM;IAACH,KAAK,EAAEA,KAAM;IAACK,SAAS,EAAEA,SAAU;IAACK,YAAY,EAAET,aAAc;IAACC,MAAM,EAAEA;EAAO,CAAE,CAAC;AACjH,CAAC","ignoreList":[]}
|
|
@@ -4,7 +4,8 @@ import { Children, isValidElement } from 'react';
|
|
|
4
4
|
|
|
5
5
|
/** A run of the text: a string child, or a nested `Text` with a colour of its own. */
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
/** The string and number children, joined: the text of a `Text` without spans, however JSX split it. */
|
|
8
|
+
export const textOf = children => Children.toArray(children).map(child => typeof child === 'string' || typeof child === 'number' ? String(child) : '').join('');
|
|
8
9
|
|
|
9
10
|
/**
|
|
10
11
|
* The children as runs when any of them is a nested `Text` (`type`, the platform's own component), `null` when they
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Children","isValidElement","textOf","children","toArray","map","child","String","join","spansOf","type","items","some","flatMap","text","color","props","spansKey","spans","hash","value","span","character","charCodeAt","Math","imul"],"sourceRoot":"../../../../src","sources":["atoms/text/spans.ts"],"mappings":";;AACA,SAAQA,QAAQ,EAAEC,cAAc,QAAuB,OAAO;;AAE9D;;AAGA,MAAMC,MAAM,GAAIC,QAAmB,
|
|
1
|
+
{"version":3,"names":["Children","isValidElement","textOf","children","toArray","map","child","String","join","spansOf","type","items","some","flatMap","text","color","props","spansKey","spans","hash","value","span","character","charCodeAt","Math","imul"],"sourceRoot":"../../../../src","sources":["atoms/text/spans.ts"],"mappings":";;AACA,SAAQA,QAAQ,EAAEC,cAAc,QAAuB,OAAO;;AAE9D;;AAGA;AACA,OAAO,MAAMC,MAAM,GAAIC,QAAmB,IACxCH,QAAQ,CAACI,OAAO,CAACD,QAAQ,CAAC,CACvBE,GAAG,CAACC,KAAK,IAAK,OAAOA,KAAK,KAAK,QAAQ,IAAI,OAAOA,KAAK,KAAK,QAAQ,GAAGC,MAAM,CAACD,KAAK,CAAC,GAAG,EAAG,CAAC,CAC3FE,IAAI,CAAC,EAAE,CAAC;;AAEb;AACA;AACA;AACA;AACA,OAAO,MAAMC,OAAO,GAAGA,CAACN,QAAmB,EAAEO,IAAa,KAAwB;EAChF,MAAMC,KAAK,GAAGX,QAAQ,CAACI,OAAO,CAACD,QAAQ,CAAC;EAExC,IAAI,CAACQ,KAAK,CAACC,IAAI,CAACN,KAAK,IAAI,aAAAL,cAAc,CAACK,KAAK,CAAC,IAAIA,KAAK,CAACI,IAAI,KAAKA,IAAI,CAAC,EAAE;IACtE,OAAO,IAAI;EACb;EAEA,OAAOC,KAAK,CAACE,OAAO,CAAWP,KAAK,IAAI;IACtC,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;MAC1D,OAAO,CAAC;QAACQ,IAAI,EAAEP,MAAM,CAACD,KAAK;MAAC,CAAC,CAAC;IAChC;IACA,IAAI,aAAAL,cAAc,CAA6CK,KAAK,CAAC,IAAIA,KAAK,CAACI,IAAI,KAAKA,IAAI,EAAE;MAC5F,OAAO,CAAC;QAACK,KAAK,EAAET,KAAK,CAACU,KAAK,CAACD,KAAK;QAAED,IAAI,EAAEZ,MAAM,CAACI,KAAK,CAACU,KAAK,CAACb,QAAQ;MAAC,CAAC,CAAC;IACzE;IACA,OAAO,EAAE;EACX,CAAC,CAAC;AACJ,CAAC;;AAED;AACA,OAAO,MAAMc,QAAQ,GAAGA,CAACF,KAAiB,EAAEG,KAAiC,EAAEJ,IAAY,KAAa;EACtG,IAAIK,IAAI,GAAG,UAAU;EACrB,MAAMC,KAAK,GAAGF,KAAK,GAAGA,KAAK,CAACb,GAAG,CAACgB,IAAI,IAAI,GAAGA,IAAI,CAACN,KAAK,IAAI,EAAE,IAAIM,IAAI,CAACP,IAAI,EAAE,CAAC,CAACN,IAAI,CAAC,GAAG,CAAC,GAAGM,IAAI;EAE5F,KAAK,MAAMQ,SAAS,IAAI,GAAGP,KAAK,IAAIK,KAAK,EAAE,EAAE;IAC3CD,IAAI,IAAIG,SAAS,CAACC,UAAU,CAAC,CAAC,CAAC;IAC/BJ,IAAI,GAAGK,IAAI,CAACC,IAAI,CAACN,IAAI,EAAE,UAAU,CAAC;EACpC;EAEA,OAAOA,IAAI,KAAK,CAAC;AACnB,CAAC","ignoreList":[]}
|