@studio-piot/native-ui 0.2.3 → 0.2.5
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/README.md +2 -1
- package/dist/components/ErrorBanner/ErrorBanner.d.ts +8 -0
- package/dist/components/ErrorBanner/ErrorBanner.d.ts.map +1 -0
- package/dist/components/ErrorBanner/ErrorBanner.js +136 -0
- package/dist/components/ErrorBanner/ErrorBanner.js.map +1 -0
- package/dist/components/ErrorBanner/errorBannerContext.d.ts +36 -0
- package/dist/components/ErrorBanner/errorBannerContext.d.ts.map +1 -0
- package/dist/components/ErrorBanner/errorBannerContext.js +78 -0
- package/dist/components/ErrorBanner/errorBannerContext.js.map +1 -0
- package/dist/components/ErrorBanner/errorBannerCopy.d.ts +7 -0
- package/dist/components/ErrorBanner/errorBannerCopy.d.ts.map +1 -0
- package/dist/components/ErrorBanner/errorBannerCopy.js +22 -0
- package/dist/components/ErrorBanner/errorBannerCopy.js.map +1 -0
- package/dist/components/ErrorBanner/errorBannerThemeRoles.d.ts +9 -0
- package/dist/components/ErrorBanner/errorBannerThemeRoles.d.ts.map +1 -0
- package/dist/components/ErrorBanner/errorBannerThemeRoles.js +11 -0
- package/dist/components/ErrorBanner/errorBannerThemeRoles.js.map +1 -0
- package/dist/components/ErrorBanner/icons.d.ts +7 -0
- package/dist/components/ErrorBanner/icons.d.ts.map +1 -0
- package/dist/components/ErrorBanner/icons.js +46 -0
- package/dist/components/ErrorBanner/icons.js.map +1 -0
- package/dist/components/ErrorBanner/index.d.ts +6 -0
- package/dist/components/ErrorBanner/index.d.ts.map +1 -0
- package/dist/components/ErrorBanner/index.js +16 -0
- package/dist/components/ErrorBanner/index.js.map +1 -0
- package/dist/components/ErrorBanner/types.d.ts +31 -0
- package/dist/components/ErrorBanner/types.d.ts.map +1 -0
- package/dist/components/ErrorBanner/types.js +3 -0
- package/dist/components/ErrorBanner/types.js.map +1 -0
- package/dist/components/ErrorBanner/useErrorBanner.d.ts +13 -0
- package/dist/components/ErrorBanner/useErrorBanner.d.ts.map +1 -0
- package/dist/components/ErrorBanner/useErrorBanner.js +31 -0
- package/dist/components/ErrorBanner/useErrorBanner.js.map +1 -0
- package/dist/components/Field/fieldChrome.d.ts +1 -1
- package/dist/components/Field/fieldChrome.d.ts.map +1 -1
- package/dist/components/Field/fieldChrome.js +20 -4
- package/dist/components/Field/fieldChrome.js.map +1 -1
- package/dist/components/Field/types.d.ts +2 -0
- package/dist/components/Field/types.d.ts.map +1 -1
- package/dist/components/Form/Form.d.ts +1 -1
- package/dist/components/Form/Form.d.ts.map +1 -1
- package/dist/components/Form/Form.js +36 -23
- package/dist/components/Form/Form.js.map +1 -1
- package/dist/components/Form/types.d.ts +7 -0
- package/dist/components/Form/types.d.ts.map +1 -1
- package/dist/components/RadioField/RadioField.d.ts.map +1 -1
- package/dist/components/RadioField/RadioField.js +6 -1
- package/dist/components/RadioField/RadioField.js.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.d.ts +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.js +8 -8
- package/dist/components/SegmentedControl/SegmentedControl.js.map +1 -1
- package/dist/components/SegmentedControl/segmentThemeRoles.d.ts +5 -6
- package/dist/components/SegmentedControl/segmentThemeRoles.d.ts.map +1 -1
- package/dist/components/SegmentedControl/segmentThemeRoles.js +5 -6
- package/dist/components/SegmentedControl/segmentThemeRoles.js.map +1 -1
- package/dist/components/SegmentedControl/types.d.ts +0 -1
- package/dist/components/SegmentedControl/types.d.ts.map +1 -1
- package/dist/components/Select/Select.d.ts +1 -1
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.js +11 -4
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Select/types.d.ts +2 -0
- package/dist/components/Select/types.d.ts.map +1 -1
- package/dist/components/Slider/Slider.d.ts.map +1 -1
- package/dist/components/Slider/Slider.js +6 -1
- package/dist/components/Slider/Slider.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +10 -1
- package/dist/components/index.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +11 -2
- package/dist/index.js.map +1 -1
- package/docs/components/error-banner.md +85 -0
- package/docs/components/form.md +2 -1
- package/docs/components/segmented-control.md +23 -13
- package/package.json +4 -2
- package/src/components/ErrorBanner/ErrorBanner.tsx +232 -0
- package/src/components/ErrorBanner/errorBannerContext.tsx +140 -0
- package/src/components/ErrorBanner/errorBannerCopy.test.ts +41 -0
- package/src/components/ErrorBanner/errorBannerCopy.ts +22 -0
- package/src/components/ErrorBanner/errorBannerThemeRoles.test.ts +19 -0
- package/src/components/ErrorBanner/errorBannerThemeRoles.ts +9 -0
- package/src/components/ErrorBanner/icons.tsx +38 -0
- package/src/components/ErrorBanner/index.ts +14 -0
- package/src/components/ErrorBanner/types.ts +31 -0
- package/src/components/ErrorBanner/useErrorBanner.ts +33 -0
- package/src/components/Field/fieldChrome.tsx +33 -7
- package/src/components/Field/types.ts +2 -0
- package/src/components/Form/Form.tsx +56 -2
- package/src/components/Form/types.ts +7 -0
- package/src/components/RadioField/RadioField.tsx +6 -1
- package/src/components/SegmentedControl/SegmentedControl.tsx +7 -11
- package/src/components/SegmentedControl/segmentThemeRoles.test.ts +9 -7
- package/src/components/SegmentedControl/segmentThemeRoles.ts +5 -6
- package/src/components/SegmentedControl/types.ts +0 -1
- package/src/components/Select/Select.tsx +20 -5
- package/src/components/Select/types.ts +2 -0
- package/src/components/Slider/Slider.tsx +6 -1
- package/src/components/index.ts +13 -0
- package/src/index.ts +14 -1
|
@@ -5,10 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const react_native_1 = require("react-native");
|
|
7
7
|
const buttonRadius_1 = require("../Button/buttonRadius");
|
|
8
|
+
const ErrorBanner_1 = require("../ErrorBanner");
|
|
8
9
|
const fieldThemeRoles_1 = require("./fieldThemeRoles");
|
|
9
10
|
const resolveFieldBorder_1 = require("./resolveFieldBorder");
|
|
10
11
|
const useResolvedFieldColor_1 = require("./useResolvedFieldColor");
|
|
11
|
-
function FieldChrome({ value, onChangeText, borderColor: borderColorProp, focusedBorderColor: focusedBorderColorProp, errorColor: errorColorProp, textColor: textColorProp, labelColor: labelColorProp, placeholderColor: placeholderColorProp, backgroundColor: backgroundColorProp, label, description, error, placeholder, radius = "xl", editable = true, clearIcon, onClear, style, inputStyle, multiline = false, numberOfLines, minHeight = 48, textAlignVertical, secureTextEntry, keyboardType, autoCapitalize, autoComplete, textContentType, onFocus, onBlur, ref, }) {
|
|
12
|
+
function FieldChrome({ name, value, onChangeText, borderColor: borderColorProp, focusedBorderColor: focusedBorderColorProp, errorColor: errorColorProp, textColor: textColorProp, labelColor: labelColorProp, placeholderColor: placeholderColorProp, backgroundColor: backgroundColorProp, label, description, error, placeholder, radius = "xl", editable = true, clearIcon, onClear, style, inputStyle, multiline = false, numberOfLines, minHeight = 48, textAlignVertical, secureTextEntry, keyboardType, autoCapitalize, autoComplete, textContentType, onFocus, onBlur, ref, }) {
|
|
12
13
|
const borderColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(borderColorProp, fieldThemeRoles_1.FIELD_THEME_ROLES.borderColor);
|
|
13
14
|
const focusedBorderColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(focusedBorderColorProp, fieldThemeRoles_1.FIELD_THEME_ROLES.focusedBorderColor);
|
|
14
15
|
const errorColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(errorColorProp, fieldThemeRoles_1.FIELD_THEME_ROLES.errorColor);
|
|
@@ -17,8 +18,12 @@ function FieldChrome({ value, onChangeText, borderColor: borderColorProp, focuse
|
|
|
17
18
|
const placeholderColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(placeholderColorProp, fieldThemeRoles_1.FIELD_THEME_ROLES.placeholderColor);
|
|
18
19
|
const backgroundColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(backgroundColorProp, fieldThemeRoles_1.FIELD_THEME_ROLES.backgroundColor);
|
|
19
20
|
const descriptionColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(undefined, fieldThemeRoles_1.FIELD_THEME_ROLES.descriptionColor);
|
|
21
|
+
const inputRef = (0, react_1.useRef)(null);
|
|
22
|
+
const dismissBanner = (0, ErrorBanner_1.useErrorBannerDismiss)();
|
|
23
|
+
const { viewRef, listed } = (0, ErrorBanner_1.useErrorBannerField)(name, () => inputRef.current?.focus());
|
|
20
24
|
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
|
|
21
|
-
const hasError = Boolean(error);
|
|
25
|
+
const hasError = Boolean(error) || Boolean(listed);
|
|
26
|
+
const inlineError = listed ? undefined : error;
|
|
22
27
|
const showClear = (0, resolveFieldBorder_1.shouldShowFieldClear)(value, clearIcon != null, editable);
|
|
23
28
|
const border = (0, resolveFieldBorder_1.resolveFieldBorder)({
|
|
24
29
|
isFocused,
|
|
@@ -34,7 +39,18 @@ function FieldChrome({ value, onChangeText, borderColor: borderColorProp, focuse
|
|
|
34
39
|
else
|
|
35
40
|
onChangeText("");
|
|
36
41
|
};
|
|
37
|
-
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.column, !editable && styles.blocked, style], children: [label ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: labelColor }], children: label })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.inputWrapper, children: [(0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ref:
|
|
42
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: viewRef, collapsable: false, style: [styles.column, !editable && styles.blocked, style], children: [label ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: labelColor }], children: label })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.inputWrapper, children: [(0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ref: (node) => {
|
|
43
|
+
inputRef.current = node;
|
|
44
|
+
if (typeof ref === "function") {
|
|
45
|
+
ref(node);
|
|
46
|
+
}
|
|
47
|
+
else if (ref) {
|
|
48
|
+
ref.current = node;
|
|
49
|
+
}
|
|
50
|
+
}, value: value, onChangeText: (text) => {
|
|
51
|
+
onChangeText(text);
|
|
52
|
+
dismissBanner();
|
|
53
|
+
}, placeholder: placeholder, placeholderTextColor: placeholderColor, editable: editable, multiline: multiline, numberOfLines: numberOfLines, textAlignVertical: textAlignVertical, secureTextEntry: secureTextEntry, keyboardType: keyboardType, autoCapitalize: autoCapitalize, autoComplete: autoComplete, textContentType: textContentType, accessibilityHint: listed?.message, accessibilityLabel: label, accessibilityState: { disabled: !editable }, onFocus: (e) => {
|
|
38
54
|
setIsFocused(true);
|
|
39
55
|
onFocus?.(e);
|
|
40
56
|
}, onBlur: (e) => {
|
|
@@ -56,7 +72,7 @@ function FieldChrome({ value, onChangeText, borderColor: borderColorProp, focuse
|
|
|
56
72
|
},
|
|
57
73
|
multiline && styles.multiline,
|
|
58
74
|
inputStyle,
|
|
59
|
-
] }), showClear ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { accessibilityLabel: "Clear", accessibilityRole: "button", hitSlop: { top: 10, bottom: 10, left: 10, right: 10 }, onPress: handleClear, style: styles.clearButton, children: clearIcon })) : null] }),
|
|
75
|
+
] }), showClear ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { accessibilityLabel: "Clear", accessibilityRole: "button", hitSlop: { top: 10, bottom: 10, left: 10, right: 10 }, onPress: handleClear, style: styles.clearButton, children: clearIcon })) : null] }), inlineError ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.helper, { color: errorColor }], children: inlineError })) : description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.helper, { color: descriptionColor }], children: description })) : null] }));
|
|
60
76
|
}
|
|
61
77
|
const styles = react_native_1.StyleSheet.create({
|
|
62
78
|
column: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fieldChrome.js","sourceRoot":"","sources":["../../../src/components/Field/fieldChrome.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"fieldChrome.js","sourceRoot":"","sources":["../../../src/components/Field/fieldChrome.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,8 @@ import type { ReactNode, Ref } from "react";
|
|
|
2
2
|
import type { StyleProp, TextInputProps, TextStyle, ViewStyle } from "react-native";
|
|
3
3
|
import type { ButtonRadius } from "../Button/buttonRadius";
|
|
4
4
|
export type FieldSharedProps = {
|
|
5
|
+
/** Registers the field with `Form` / `ErrorBannerProvider` for banner rows. */
|
|
6
|
+
name?: string;
|
|
5
7
|
value: string;
|
|
6
8
|
onChangeText: (text: string) => void;
|
|
7
9
|
/** Defaults to theme role `fieldBorder`. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,6CAA6C;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACpD,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,cAAc,EAAE,SAAS,CAAC,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,gBAAgB,CAAC;AAE9C,MAAM,MAAM,kBAAkB,GAAG,gBAAgB,GAAG;IAClD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,6CAA6C;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACpD,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,cAAc,EAAE,SAAS,CAAC,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,gBAAgB,CAAC;AAE9C,MAAM,MAAM,kBAAkB,GAAG,gBAAgB,GAAG;IAClD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { FormProps } from "./types";
|
|
2
|
-
export declare function Form({ title, children, onClose, onSubmit, submitLabel, submitting, submitDisabled, closeButton, submitRadius, paddingHorizontal, backgroundColor: backgroundColorProp, titleColor: titleColorProp, footerBackgroundColor: footerBackgroundColorProp, buttonBackgroundColor: buttonBackgroundColorProp, buttonLabelColor: buttonLabelColorProp, }: FormProps): import("react").JSX.Element;
|
|
2
|
+
export declare function Form({ title, children, onClose, onSubmit, errors, submitLabel, submitting, submitDisabled, closeButton, submitRadius, paddingHorizontal, backgroundColor: backgroundColorProp, titleColor: titleColorProp, footerBackgroundColor: footerBackgroundColorProp, buttonBackgroundColor: buttonBackgroundColorProp, buttonLabelColor: buttonLabelColorProp, }: FormProps): import("react").JSX.Element;
|
|
3
3
|
//# sourceMappingURL=Form.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAuCzC,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,MAAW,EACX,WAAoB,EACpB,UAAkB,EAClB,cAAsB,EACtB,WAAW,EACX,YAAmB,EACnB,iBAA2C,EAC3C,eAAe,EAAE,mBAAmB,EACpC,UAAU,EAAE,cAAc,EAC1B,qBAAqB,EAAE,yBAAyB,EAChD,qBAAqB,EAAE,yBAAyB,EAChD,gBAAgB,EAAE,oBAAoB,GACvC,EAAE,SAAS,+BA4IX"}
|
|
@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const react_native_1 = require("react-native");
|
|
7
7
|
const react_native_keyboard_controller_1 = require("react-native-keyboard-controller");
|
|
8
|
+
const ErrorBanner_1 = require("../ErrorBanner");
|
|
8
9
|
const react_native_safe_area_context_1 = require("react-native-safe-area-context");
|
|
9
10
|
const screenPadding_1 = require("../../layout/screenPadding");
|
|
10
11
|
const Button_1 = require("../Button/Button");
|
|
@@ -13,6 +14,10 @@ const useResolvedThemeColor_1 = require("./useResolvedThemeColor");
|
|
|
13
14
|
const withAlpha_1 = require("./withAlpha");
|
|
14
15
|
/** How far the header wash continues below the buttons. */
|
|
15
16
|
const FADE_TAIL = 32;
|
|
17
|
+
function FormErrorBanner({ open, errors, onDismiss, onHeightChange, }) {
|
|
18
|
+
const ctx = (0, ErrorBanner_1.useErrorBannerContext)();
|
|
19
|
+
return ((0, jsx_runtime_1.jsx)(ErrorBanner_1.ErrorBanner, { errors: errors, onDismiss: onDismiss, onHeightChange: onHeightChange, onJump: (field) => ctx?.jump(field), open: open }));
|
|
20
|
+
}
|
|
16
21
|
/** Space kept between the focused field and the top of the footer. */
|
|
17
22
|
const FIELD_GAP = 12;
|
|
18
23
|
/**
|
|
@@ -20,13 +25,16 @@ const FIELD_GAP = 12;
|
|
|
20
25
|
* the rest of the control below the caret so the rounded bottom stays visible.
|
|
21
26
|
*/
|
|
22
27
|
const FIELD_BELOW_CARET = 36;
|
|
23
|
-
function Form({ title, children, onClose, onSubmit, submitLabel = "Save", submitting = false, submitDisabled = false, closeButton, submitRadius = "lg", paddingHorizontal = screenPadding_1.screenPaddingHorizontal, backgroundColor: backgroundColorProp, titleColor: titleColorProp, footerBackgroundColor: footerBackgroundColorProp, buttonBackgroundColor: buttonBackgroundColorProp, buttonLabelColor: buttonLabelColorProp, }) {
|
|
28
|
+
function Form({ title, children, onClose, onSubmit, errors = [], submitLabel = "Save", submitting = false, submitDisabled = false, closeButton, submitRadius = "lg", paddingHorizontal = screenPadding_1.screenPaddingHorizontal, backgroundColor: backgroundColorProp, titleColor: titleColorProp, footerBackgroundColor: footerBackgroundColorProp, buttonBackgroundColor: buttonBackgroundColorProp, buttonLabelColor: buttonLabelColorProp, }) {
|
|
24
29
|
const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
|
|
25
30
|
const background = (0, useResolvedThemeColor_1.useResolvedThemeColor)(backgroundColorProp, "background");
|
|
26
31
|
const titleColor = (0, useResolvedThemeColor_1.useResolvedThemeColor)(titleColorProp, "text");
|
|
27
32
|
const footerBackground = (0, useResolvedThemeColor_1.useResolvedThemeColor)(footerBackgroundColorProp, "surface");
|
|
28
33
|
const buttonBackground = (0, useResolvedThemeColor_1.useResolvedThemeColor)(buttonBackgroundColorProp, "buttonBackground");
|
|
29
34
|
const buttonLabel = (0, useResolvedThemeColor_1.useResolvedThemeColor)(buttonLabelColorProp, "buttonLabel");
|
|
35
|
+
const scrollRef = (0, react_1.useRef)(null);
|
|
36
|
+
const bannerHeightRef = (0, react_1.useRef)(0);
|
|
37
|
+
const banner = (0, ErrorBanner_1.useErrorBanner)(errors);
|
|
30
38
|
const [footerHeight, setFooterHeight] = (0, react_1.useState)(0);
|
|
31
39
|
const [cancelWidth, setCancelWidth] = (0, react_1.useState)(0);
|
|
32
40
|
const [barHeight, setBarHeight] = (0, react_1.useState)(0);
|
|
@@ -36,28 +44,33 @@ function Form({ title, children, onClose, onSubmit, submitLabel = "Save", submit
|
|
|
36
44
|
setFooterHeight((current) => (current === next ? current : next));
|
|
37
45
|
};
|
|
38
46
|
const resolvedClose = closeButton ?? ((0, jsx_runtime_1.jsx)(FormCloseButton_1.FormCloseButton, { onPress: onClose }));
|
|
39
|
-
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.screen, { backgroundColor: background }], children: [(0, jsx_runtime_1.jsx)(react_native_keyboard_controller_1.KeyboardAwareScrollView, { automaticallyAdjustKeyboardInsets: false, bottomOffset: footerHeight + FIELD_GAP + FIELD_BELOW_CARET, contentContainerStyle: [
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
47
|
+
return ((0, jsx_runtime_1.jsx)(ErrorBanner_1.ErrorBannerProvider, { bannerHeightRef: bannerHeightRef, errors: errors, onDismiss: banner.dismiss, scrollRef: scrollRef, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.screen, { backgroundColor: background }], children: [(0, jsx_runtime_1.jsx)(react_native_keyboard_controller_1.KeyboardAwareScrollView, { ref: scrollRef, automaticallyAdjustKeyboardInsets: false, bottomOffset: footerHeight + FIELD_GAP + FIELD_BELOW_CARET, contentContainerStyle: [
|
|
48
|
+
styles.content,
|
|
49
|
+
{
|
|
50
|
+
paddingTop: resolvedBar + FADE_TAIL,
|
|
51
|
+
paddingHorizontal,
|
|
52
|
+
},
|
|
53
|
+
], contentInsetAdjustmentBehavior: "never", keyboardDismissMode: "interactive", keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, style: styles.scroll, children: children }), (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", style: [
|
|
54
|
+
styles.fade,
|
|
55
|
+
{
|
|
56
|
+
height: resolvedBar + FADE_TAIL,
|
|
57
|
+
experimental_backgroundImage: `linear-gradient(to bottom, ${(0, withAlpha_1.withAlpha)(background, 0.98)} 0%, ${(0, withAlpha_1.withAlpha)(background, 0.92)} 55%, ${(0, withAlpha_1.withAlpha)(background, 0)} 100%)`,
|
|
58
|
+
},
|
|
59
|
+
], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { onLayout: (event) => {
|
|
60
|
+
const next = Math.round(event.nativeEvent.layout.height);
|
|
61
|
+
setBarHeight((current) => (current === next ? current : next));
|
|
62
|
+
}, pointerEvents: "box-none", style: [
|
|
63
|
+
styles.header,
|
|
64
|
+
{ paddingTop: insets.top, paddingHorizontal },
|
|
65
|
+
], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { onLayout: (event) => {
|
|
66
|
+
const next = Math.round(event.nativeEvent.layout.width);
|
|
67
|
+
setCancelWidth((current) => (current === next ? current : next));
|
|
68
|
+
}, children: resolvedClose }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityRole: "header", numberOfLines: 1, pointerEvents: "none", style: [styles.title, { flex: 1, color: titleColor }], children: title }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: cancelWidth } })] }) }), (0, jsx_runtime_1.jsx)(react_native_keyboard_controller_1.KeyboardStickyView, { offset: { closed: 0, opened: insets.bottom }, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.footerShell, { backgroundColor: footerBackground }], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { onLayout: onFooterLayout, style: [styles.footer, { paddingHorizontal }], children: (0, jsx_runtime_1.jsx)(Button_1.Button, { backgroundColor: buttonBackground, disabled: submitDisabled, label: submitLabel, labelColor: buttonLabel, loading: submitting, onPress: () => {
|
|
69
|
+
banner.present();
|
|
70
|
+
onSubmit();
|
|
71
|
+
}, radius: submitRadius }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { height: insets.bottom } })] }) }), (0, jsx_runtime_1.jsx)(FormErrorBanner, { errors: errors, onDismiss: banner.dismiss, onHeightChange: (height) => {
|
|
72
|
+
bannerHeightRef.current = height;
|
|
73
|
+
}, open: banner.open })] }) }));
|
|
61
74
|
}
|
|
62
75
|
const styles = react_native_1.StyleSheet.create({
|
|
63
76
|
screen: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
2
|
import type { ButtonRadius } from "../Button/buttonRadius";
|
|
3
|
+
import type { FieldError } from "../ErrorBanner/types";
|
|
3
4
|
export type FormProps = {
|
|
4
5
|
title: string;
|
|
5
6
|
children: ReactNode;
|
|
6
7
|
onClose: () => void;
|
|
7
8
|
onSubmit: () => void;
|
|
9
|
+
/**
|
|
10
|
+
* Field errors for the screen banner. Empty hides it.
|
|
11
|
+
* Set these when submit fails. Editing a field dismisses the banner;
|
|
12
|
+
* the next submit shows it again.
|
|
13
|
+
*/
|
|
14
|
+
errors?: readonly FieldError[];
|
|
8
15
|
submitLabel?: string;
|
|
9
16
|
submitting?: boolean;
|
|
10
17
|
submitDisabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Form/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Form/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oEAAoE;IACpE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iDAAiD;IACjD,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioField.d.ts","sourceRoot":"","sources":["../../../src/components/RadioField/RadioField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioField.d.ts","sourceRoot":"","sources":["../../../src/components/RadioField/RadioField.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI/C,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACpD,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAa,EACb,eAAe,EAAE,mBAAmB,EACpC,UAAU,EAAE,cAAc,EAC1B,gBAAgB,EAAE,oBAAoB,EACtC,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,cAAc,EAC1B,aAAa,EAAE,iBAAiB,EAChC,UAAU,EAAE,cAAc,EAC1B,KAAK,GACN,EAAE,eAAe,CAAC,CAAC,CAAC,sCAuGpB"}
|
|
@@ -4,6 +4,7 @@ exports.RadioField = RadioField;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_native_1 = require("react-native");
|
|
6
6
|
const buttonRadius_1 = require("../Button/buttonRadius");
|
|
7
|
+
const ErrorBanner_1 = require("../ErrorBanner");
|
|
7
8
|
const useResolvedFieldColor_1 = require("../Field/useResolvedFieldColor");
|
|
8
9
|
const RadioMark_1 = require("./RadioMark");
|
|
9
10
|
const radioThemeRoles_1 = require("./radioThemeRoles");
|
|
@@ -16,6 +17,7 @@ function RadioField({ value, onChange, options, label, radius = "xl", background
|
|
|
16
17
|
const radioColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(radioColorProp, radioThemeRoles_1.RADIO_THEME_ROLES.radioColor);
|
|
17
18
|
const selectedColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(selectedColorProp, radioThemeRoles_1.RADIO_THEME_ROLES.selectedColor);
|
|
18
19
|
const titleColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(titleColorProp, radioThemeRoles_1.RADIO_THEME_ROLES.titleColor);
|
|
20
|
+
const dismissBanner = (0, ErrorBanner_1.useErrorBannerDismiss)();
|
|
19
21
|
const borderRadius = (0, buttonRadius_1.buttonRadiusValue)(radius);
|
|
20
22
|
if (options.length === 0) {
|
|
21
23
|
return null;
|
|
@@ -31,7 +33,10 @@ function RadioField({ value, onChange, options, label, radius = "xl", background
|
|
|
31
33
|
selected,
|
|
32
34
|
checked: selected,
|
|
33
35
|
disabled: !!option.disabled,
|
|
34
|
-
}, activeOpacity: 0.75, disabled: option.disabled, onPress: () =>
|
|
36
|
+
}, activeOpacity: 0.75, disabled: option.disabled, onPress: () => {
|
|
37
|
+
onChange(option.value);
|
|
38
|
+
dismissBanner();
|
|
39
|
+
}, style: [styles.row, option.disabled && styles.blocked], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.textCol, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: labelColor }], children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.description, { color: descriptionColor }], children: option.description })) : null] }), (0, jsx_runtime_1.jsx)(RadioMark_1.RadioMark, { holeColor: backgroundColor, radioColor: radioColor, selected: selected, selectedColor: selectedColor })] })] }, option.value));
|
|
35
40
|
}) })] }));
|
|
36
41
|
}
|
|
37
42
|
const styles = react_native_1.StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioField.js","sourceRoot":"","sources":["../../../src/components/RadioField/RadioField.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"RadioField.js","sourceRoot":"","sources":["../../../src/components/RadioField/RadioField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { SegmentedControlProps } from "./types";
|
|
2
|
-
export declare function SegmentedControl<T extends string = string>({ value, onChange, options, label, radius, disabled, backgroundColor: backgroundColorProp,
|
|
2
|
+
export declare function SegmentedControl<T extends string = string>({ value, onChange, options, label, radius, disabled, backgroundColor: backgroundColorProp, selectedBackgroundColor: selectedBackgroundColorProp, labelColor: labelColorProp, selectedLabelColor: selectedLabelColorProp, titleColor: titleColorProp, style, }: SegmentedControlProps<T>): import("react").JSX.Element | null;
|
|
3
3
|
//# sourceMappingURL=SegmentedControl.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAIrD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC1D,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAa,EACb,QAAgB,EAChB,eAAe,EAAE,mBAAmB,EACpC,uBAAuB,EAAE,2BAA2B,EACpD,UAAU,EAAE,cAAc,EAC1B,kBAAkB,EAAE,sBAAsB,EAC1C,UAAU,EAAE,cAAc,EAC1B,KAAK,GACN,EAAE,qBAAqB,CAAC,CAAC,CAAC,sCAoJ1B"}
|
|
@@ -39,13 +39,13 @@ const react_1 = require("react");
|
|
|
39
39
|
const react_native_1 = require("react-native");
|
|
40
40
|
const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
|
|
41
41
|
const buttonRadius_1 = require("../Button/buttonRadius");
|
|
42
|
+
const ErrorBanner_1 = require("../ErrorBanner");
|
|
42
43
|
const useResolvedFieldColor_1 = require("../Field/useResolvedFieldColor");
|
|
43
44
|
const segmentIndicatorFrame_1 = require("./segmentIndicatorFrame");
|
|
44
45
|
const segmentThemeRoles_1 = require("./segmentThemeRoles");
|
|
45
46
|
const SLIDE_MS = 220;
|
|
46
|
-
function SegmentedControl({ value, onChange, options, label, radius = "lg", disabled = false, backgroundColor: backgroundColorProp,
|
|
47
|
+
function SegmentedControl({ value, onChange, options, label, radius = "lg", disabled = false, backgroundColor: backgroundColorProp, selectedBackgroundColor: selectedBackgroundColorProp, labelColor: labelColorProp, selectedLabelColor: selectedLabelColorProp, titleColor: titleColorProp, style, }) {
|
|
47
48
|
const backgroundColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(backgroundColorProp, segmentThemeRoles_1.SEGMENTED_THEME_ROLES.backgroundColor);
|
|
48
|
-
const borderColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(borderColorProp, segmentThemeRoles_1.SEGMENTED_THEME_ROLES.borderColor);
|
|
49
49
|
const selectedBackgroundColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(selectedBackgroundColorProp, segmentThemeRoles_1.SEGMENTED_THEME_ROLES.selectedBackgroundColor);
|
|
50
50
|
const labelColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(labelColorProp, segmentThemeRoles_1.SEGMENTED_THEME_ROLES.labelColor);
|
|
51
51
|
const selectedLabelColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(selectedLabelColorProp, segmentThemeRoles_1.SEGMENTED_THEME_ROLES.selectedLabelColor);
|
|
@@ -56,6 +56,7 @@ function SegmentedControl({ value, onChange, options, label, radius = "lg", disa
|
|
|
56
56
|
const indexSV = (0, react_native_reanimated_1.useSharedValue)(0);
|
|
57
57
|
const widthSV = (0, react_native_reanimated_1.useSharedValue)(0);
|
|
58
58
|
const opacitySV = (0, react_native_reanimated_1.useSharedValue)(0);
|
|
59
|
+
const dismissBanner = (0, ErrorBanner_1.useErrorBannerDismiss)();
|
|
59
60
|
const borderRadius = (0, buttonRadius_1.buttonRadiusValue)(radius);
|
|
60
61
|
const pillRadius = Math.max(0, borderRadius - segmentIndicatorFrame_1.SEGMENT_INSET);
|
|
61
62
|
const applyTrackWidth = (nextWidth, count) => {
|
|
@@ -90,10 +91,7 @@ function SegmentedControl({ value, onChange, options, label, radius = "lg", disa
|
|
|
90
91
|
if (options.length === 0) {
|
|
91
92
|
return null;
|
|
92
93
|
}
|
|
93
|
-
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.group, disabled && styles.blocked, style], children: [label ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, { color: titleColor }], children: label })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityLabel: label, accessibilityRole: "radiogroup", style: [
|
|
94
|
-
styles.track,
|
|
95
|
-
{ backgroundColor, borderColor, borderRadius },
|
|
96
|
-
], children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [
|
|
94
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.group, disabled && styles.blocked, style], children: [label ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, { color: titleColor }], children: label })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityLabel: label, accessibilityRole: "radiogroup", style: [styles.track, { backgroundColor, borderRadius }], children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [
|
|
97
95
|
styles.indicator,
|
|
98
96
|
indicatorStyle,
|
|
99
97
|
{
|
|
@@ -118,7 +116,10 @@ function SegmentedControl({ value, onChange, options, label, radius = "lg", disa
|
|
|
118
116
|
selected,
|
|
119
117
|
checked: selected,
|
|
120
118
|
disabled: blocked,
|
|
121
|
-
}, disabled: blocked, onPress: () =>
|
|
119
|
+
}, disabled: blocked, onPress: () => {
|
|
120
|
+
onChange(option.value);
|
|
121
|
+
dismissBanner();
|
|
122
|
+
}, style: ({ pressed }) => [
|
|
122
123
|
styles.segment,
|
|
123
124
|
pressed && !blocked && styles.pressed,
|
|
124
125
|
option.disabled && styles.segmentBlocked,
|
|
@@ -146,7 +147,6 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
146
147
|
},
|
|
147
148
|
track: {
|
|
148
149
|
width: "100%",
|
|
149
|
-
borderWidth: 1,
|
|
150
150
|
padding: segmentIndicatorFrame_1.SEGMENT_INSET,
|
|
151
151
|
overflow: "hidden",
|
|
152
152
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
export declare const SEGMENTED_THEME_ROLES: {
|
|
2
|
-
readonly backgroundColor: "
|
|
3
|
-
readonly
|
|
4
|
-
readonly
|
|
5
|
-
readonly
|
|
6
|
-
readonly
|
|
7
|
-
readonly titleColor: "fieldLabel";
|
|
2
|
+
readonly backgroundColor: "segmentBackground";
|
|
3
|
+
readonly selectedBackgroundColor: "segmentSelectedBackground";
|
|
4
|
+
readonly labelColor: "segmentLabel";
|
|
5
|
+
readonly selectedLabelColor: "segmentSelectedLabel";
|
|
6
|
+
readonly titleColor: "segmentTitle";
|
|
8
7
|
};
|
|
9
8
|
export type SegmentedThemeColorProp = keyof typeof SEGMENTED_THEME_ROLES;
|
|
10
9
|
//# sourceMappingURL=segmentThemeRoles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmentThemeRoles.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmentThemeRoles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB
|
|
1
|
+
{"version":3,"file":"segmentThemeRoles.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmentThemeRoles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB;;;;;;CAMxB,CAAC;AAEX,MAAM,MAAM,uBAAuB,GAAG,MAAM,OAAO,qBAAqB,CAAC"}
|
|
@@ -2,11 +2,10 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.SEGMENTED_THEME_ROLES = void 0;
|
|
4
4
|
exports.SEGMENTED_THEME_ROLES = {
|
|
5
|
-
backgroundColor: "
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
titleColor: "fieldLabel",
|
|
5
|
+
backgroundColor: "segmentBackground",
|
|
6
|
+
selectedBackgroundColor: "segmentSelectedBackground",
|
|
7
|
+
labelColor: "segmentLabel",
|
|
8
|
+
selectedLabelColor: "segmentSelectedLabel",
|
|
9
|
+
titleColor: "segmentTitle",
|
|
11
10
|
};
|
|
12
11
|
//# sourceMappingURL=segmentThemeRoles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmentThemeRoles.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmentThemeRoles.ts"],"names":[],"mappings":";;;AAAa,QAAA,qBAAqB,GAAG;IACnC,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"segmentThemeRoles.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmentThemeRoles.ts"],"names":[],"mappings":";;;AAAa,QAAA,qBAAqB,GAAG;IACnC,eAAe,EAAE,mBAAmB;IACpC,uBAAuB,EAAE,2BAA2B;IACpD,UAAU,EAAE,cAAc;IAC1B,kBAAkB,EAAE,sBAAsB;IAC1C,UAAU,EAAE,cAAc;CAClB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACvD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC7D,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACvD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC7D,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { SelectProps } from "./types";
|
|
2
|
-
export declare function Select({ value, onChange, options, placeholder, label, description, error, sheetTitle, closeButton,
|
|
2
|
+
export declare function Select({ name, value, onChange, options, placeholder, label, description, error, sheetTitle, closeButton,
|
|
3
3
|
/** Max sheet height as a fraction of the window (largest value wins). Default `[0.25, 0.5, 0.75]` → 75%. */
|
|
4
4
|
detents, initialDetent: _initialDetent, radius, editable, backgroundColor: backgroundColorProp, textColor: textColorProp, placeholderColor: placeholderColorProp, labelColor: labelColorProp, descriptionColor: descriptionColorProp, borderColor: borderColorProp, errorColor: errorColorProp, selectedColor: selectedColorProp, style, }: SelectProps): import("react").JSX.Element;
|
|
5
5
|
//# sourceMappingURL=Select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,SAAS,CAAC;AAazD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAgC,EAChC,KAAK,EACL,WAAW,EACX,KAAK,EACL,UAAU,EACV,WAAW;AACX,4GAA4G;AAC5G,OAAqC,EACrC,aAAa,EAAE,cAAc,EAC7B,MAAa,EACb,QAAe,EACf,eAAe,EAAE,mBAAmB,EACpC,SAAS,EAAE,aAAa,EACxB,gBAAgB,EAAE,oBAAoB,EACtC,UAAU,EAAE,cAAc,EAC1B,gBAAgB,EAAE,oBAAoB,EACtC,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,aAAa,EAAE,iBAAiB,EAChC,KAAK,GACN,EAAE,WAAW,+BA4Pb"}
|
|
@@ -7,6 +7,7 @@ const react_native_1 = require("react-native");
|
|
|
7
7
|
const bottom_sheet_1 = require("@gorhom/bottom-sheet");
|
|
8
8
|
const react_native_screens_1 = require("react-native-screens");
|
|
9
9
|
const buttonRadius_1 = require("../Button/buttonRadius");
|
|
10
|
+
const ErrorBanner_1 = require("../ErrorBanner");
|
|
10
11
|
const useResolvedFieldColor_1 = require("../Field/useResolvedFieldColor");
|
|
11
12
|
const useThemeColor_1 = require("../../theme/useThemeColor");
|
|
12
13
|
const resolveSelectDetentIndex_1 = require("./resolveSelectDetentIndex");
|
|
@@ -21,7 +22,7 @@ function SheetContainer({ children }) {
|
|
|
21
22
|
}
|
|
22
23
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
|
|
23
24
|
}
|
|
24
|
-
function Select({ value, onChange, options, placeholder = "Select an option", label, description, error, sheetTitle, closeButton,
|
|
25
|
+
function Select({ name, value, onChange, options, placeholder = "Select an option", label, description, error, sheetTitle, closeButton,
|
|
25
26
|
/** Max sheet height as a fraction of the window (largest value wins). Default `[0.25, 0.5, 0.75]` → 75%. */
|
|
26
27
|
detents = [...resolveSelectDetentIndex_1.DEFAULT_SELECT_DETENTS], initialDetent: _initialDetent, radius = "xl", editable = true, backgroundColor: backgroundColorProp, textColor: textColorProp, placeholderColor: placeholderColorProp, labelColor: labelColorProp, descriptionColor: descriptionColorProp, borderColor: borderColorProp, errorColor: errorColorProp, selectedColor: selectedColorProp, style, }) {
|
|
27
28
|
const modalRef = (0, react_1.useRef)(null);
|
|
@@ -37,7 +38,12 @@ detents = [...resolveSelectDetentIndex_1.DEFAULT_SELECT_DETENTS], initialDetent:
|
|
|
37
38
|
// Resolved on the trigger tree (has ThemeProvider), then passed into the portal.
|
|
38
39
|
const closeDiscColor = (0, useThemeColor_1.useThemeColor)("text");
|
|
39
40
|
const closeIconColor = (0, useThemeColor_1.useThemeColor)("background");
|
|
40
|
-
const
|
|
41
|
+
const dismissBanner = (0, ErrorBanner_1.useErrorBannerDismiss)();
|
|
42
|
+
const { viewRef, listed } = (0, ErrorBanner_1.useErrorBannerField)(name, () => {
|
|
43
|
+
modalRef.current?.present();
|
|
44
|
+
});
|
|
45
|
+
const hasError = Boolean(error) || Boolean(listed);
|
|
46
|
+
const inlineError = listed ? undefined : error;
|
|
41
47
|
const selected = options.find((option) => option.value === value);
|
|
42
48
|
const display = selected?.label ?? placeholder;
|
|
43
49
|
const isPlaceholder = selected == null;
|
|
@@ -82,9 +88,10 @@ detents = [...resolveSelectDetentIndex_1.DEFAULT_SELECT_DETENTS], initialDetent:
|
|
|
82
88
|
if (option.disabled)
|
|
83
89
|
return;
|
|
84
90
|
onChange(option.value);
|
|
91
|
+
dismissBanner();
|
|
85
92
|
dismiss();
|
|
86
93
|
};
|
|
87
|
-
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.column, !editable && styles.blocked, style], children: [label ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: labelColor }], children: label })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityHint: "Opens a list of options", accessibilityLabel: label ? `${label}. ${display}` : display, accessibilityRole: "button", accessibilityState: { disabled: !editable }, disabled: !editable, onPress: present, style: [
|
|
94
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: viewRef, collapsable: false, style: [styles.column, !editable && styles.blocked, style], children: [label ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: labelColor }], children: label })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityHint: listed?.message ?? "Opens a list of options", accessibilityLabel: label ? `${label}. ${display}` : display, accessibilityRole: "button", accessibilityState: { disabled: !editable }, disabled: !editable, onPress: present, style: [
|
|
88
95
|
styles.trigger,
|
|
89
96
|
{
|
|
90
97
|
backgroundColor,
|
|
@@ -94,7 +101,7 @@ detents = [...resolveSelectDetentIndex_1.DEFAULT_SELECT_DETENTS], initialDetent:
|
|
|
94
101
|
], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [
|
|
95
102
|
styles.triggerText,
|
|
96
103
|
{ color: isPlaceholder ? placeholderColor : textColor, flex: 1 },
|
|
97
|
-
], children: display }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: [styles.chevron, { color: placeholderColor }], children: "\u203A" })] }),
|
|
104
|
+
], children: display }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: [styles.chevron, { color: placeholderColor }], children: "\u203A" })] }), inlineError ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.helper, { color: errorColor }], children: inlineError })) : description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.helper, { color: descriptionColor }], children: description })) : null, (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetModal, { ref: modalRef, backdropComponent: renderBackdrop, backgroundStyle: {
|
|
98
105
|
backgroundColor,
|
|
99
106
|
borderTopLeftRadius: SHEET_TOP_RADIUS,
|
|
100
107
|
borderTopRightRadius: SHEET_TOP_RADIUS,
|