orn-ui 0.1.0 → 0.2.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/README.md +9 -2
- package/lib/commonjs/atoms/Avatar.js +1 -1
- package/lib/commonjs/atoms/Avatar.js.map +1 -1
- package/lib/commonjs/atoms/Badge.js +10 -8
- package/lib/commonjs/atoms/Badge.js.map +1 -1
- package/lib/commonjs/atoms/Button.js +8 -6
- package/lib/commonjs/atoms/Button.js.map +1 -1
- package/lib/commonjs/atoms/Checkbox.js +4 -1
- package/lib/commonjs/atoms/Checkbox.js.map +1 -1
- package/lib/commonjs/atoms/Fab.js +1 -1
- package/lib/commonjs/atoms/Fab.js.map +1 -1
- package/lib/commonjs/atoms/Image.js +2 -2
- package/lib/commonjs/atoms/Image.js.map +1 -1
- package/lib/commonjs/atoms/Input.js +2 -2
- package/lib/commonjs/atoms/Input.js.map +1 -1
- package/lib/commonjs/atoms/PressableScale.js +9 -10
- package/lib/commonjs/atoms/PressableScale.js.map +1 -1
- package/lib/commonjs/atoms/Skeleton.js +96 -0
- package/lib/commonjs/atoms/Skeleton.js.map +1 -0
- package/lib/commonjs/atoms/Transition.js +171 -0
- package/lib/commonjs/atoms/Transition.js.map +1 -0
- package/lib/commonjs/atoms/index.js +20 -0
- package/lib/commonjs/atoms/index.js.map +1 -1
- package/lib/commonjs/molecules/AvatarHeader.js +2 -2
- package/lib/commonjs/molecules/AvatarHeader.js.map +1 -1
- package/lib/commonjs/molecules/OptionCard.js +57 -24
- package/lib/commonjs/molecules/OptionCard.js.map +1 -1
- package/lib/commonjs/molecules/{ThemeToggle.js → SegmentedControl.js} +37 -37
- package/lib/commonjs/molecules/SegmentedControl.js.map +1 -0
- package/lib/commonjs/molecules/Stepper.js +124 -47
- package/lib/commonjs/molecules/Stepper.js.map +1 -1
- package/lib/commonjs/molecules/Steps.js +2 -2
- package/lib/commonjs/molecules/Steps.js.map +1 -1
- package/lib/commonjs/molecules/index.js +9 -3
- package/lib/commonjs/molecules/index.js.map +1 -1
- package/lib/commonjs/organisms/Alert.js +6 -5
- package/lib/commonjs/organisms/Alert.js.map +1 -1
- package/lib/commonjs/organisms/AlertProvider.js +26 -0
- package/lib/commonjs/organisms/AlertProvider.js.map +1 -1
- package/lib/commonjs/organisms/BottomSheet.js +118 -39
- package/lib/commonjs/organisms/BottomSheet.js.map +1 -1
- package/lib/commonjs/organisms/DateField.js +2 -2
- package/lib/commonjs/organisms/DateField.js.map +1 -1
- package/lib/commonjs/organisms/DatePicker.js +3 -3
- package/lib/commonjs/organisms/DatePicker.js.map +1 -1
- package/lib/commonjs/organisms/List.js +66 -44
- package/lib/commonjs/organisms/List.js.map +1 -1
- package/lib/commonjs/organisms/Modal.js +42 -87
- package/lib/commonjs/organisms/Modal.js.map +1 -1
- package/lib/commonjs/organisms/NavigationBar.js +205 -0
- package/lib/commonjs/organisms/NavigationBar.js.map +1 -0
- package/lib/commonjs/organisms/Screen.js +9 -2
- package/lib/commonjs/organisms/Screen.js.map +1 -1
- package/lib/commonjs/organisms/SearchList.js +99 -30
- package/lib/commonjs/organisms/SearchList.js.map +1 -1
- package/lib/commonjs/organisms/Select.js +226 -54
- package/lib/commonjs/organisms/Select.js.map +1 -1
- package/lib/commonjs/organisms/ThemeToggle.js +52 -0
- package/lib/commonjs/organisms/ThemeToggle.js.map +1 -0
- package/lib/commonjs/organisms/Toast.js +20 -25
- package/lib/commonjs/organisms/Toast.js.map +1 -1
- package/lib/commonjs/organisms/ToastProvider.js +24 -0
- package/lib/commonjs/organisms/ToastProvider.js.map +1 -1
- package/lib/commonjs/organisms/Wizard.js +22 -2
- package/lib/commonjs/organisms/Wizard.js.map +1 -1
- package/lib/commonjs/organisms/imperativeBridge.js +28 -0
- package/lib/commonjs/organisms/imperativeBridge.js.map +1 -0
- package/lib/commonjs/organisms/index.js +50 -0
- package/lib/commonjs/organisms/index.js.map +1 -1
- package/lib/commonjs/safe-area/SafeAreaUIProvider.js +65 -0
- package/lib/commonjs/safe-area/SafeAreaUIProvider.js.map +1 -0
- package/lib/commonjs/safe-area/index.js +13 -0
- package/lib/commonjs/safe-area/index.js.map +1 -0
- package/lib/commonjs/theme/UIProvider.js +11 -0
- package/lib/commonjs/theme/UIProvider.js.map +1 -1
- package/lib/commonjs/theme/colors.js +207 -0
- package/lib/commonjs/theme/colors.js.map +1 -0
- package/lib/commonjs/theme/createTheme.js +25 -2
- package/lib/commonjs/theme/createTheme.js.map +1 -1
- package/lib/commonjs/theme/index.js +25 -0
- package/lib/commonjs/theme/index.js.map +1 -1
- package/lib/commonjs/theme/palettes.js +73 -11
- package/lib/commonjs/theme/palettes.js.map +1 -1
- package/lib/module/atoms/Avatar.js +1 -1
- package/lib/module/atoms/Avatar.js.map +1 -1
- package/lib/module/atoms/Badge.js +10 -8
- package/lib/module/atoms/Badge.js.map +1 -1
- package/lib/module/atoms/Button.js +8 -6
- package/lib/module/atoms/Button.js.map +1 -1
- package/lib/module/atoms/Checkbox.js +4 -1
- package/lib/module/atoms/Checkbox.js.map +1 -1
- package/lib/module/atoms/Fab.js +1 -1
- package/lib/module/atoms/Fab.js.map +1 -1
- package/lib/module/atoms/Image.js +2 -2
- package/lib/module/atoms/Image.js.map +1 -1
- package/lib/module/atoms/Input.js +2 -2
- package/lib/module/atoms/Input.js.map +1 -1
- package/lib/module/atoms/PressableScale.js +9 -10
- package/lib/module/atoms/PressableScale.js.map +1 -1
- package/lib/module/atoms/Skeleton.js +91 -0
- package/lib/module/atoms/Skeleton.js.map +1 -0
- package/lib/module/atoms/Transition.js +165 -0
- package/lib/module/atoms/Transition.js.map +1 -0
- package/lib/module/atoms/index.js +2 -0
- package/lib/module/atoms/index.js.map +1 -1
- package/lib/module/molecules/AvatarHeader.js +2 -2
- package/lib/module/molecules/AvatarHeader.js.map +1 -1
- package/lib/module/molecules/OptionCard.js +58 -25
- package/lib/module/molecules/OptionCard.js.map +1 -1
- package/lib/module/molecules/{ThemeToggle.js → SegmentedControl.js} +37 -37
- package/lib/module/molecules/SegmentedControl.js.map +1 -0
- package/lib/module/molecules/Stepper.js +125 -49
- package/lib/module/molecules/Stepper.js.map +1 -1
- package/lib/module/molecules/Steps.js +2 -2
- package/lib/module/molecules/Steps.js.map +1 -1
- package/lib/module/molecules/index.js +2 -2
- package/lib/module/molecules/index.js.map +1 -1
- package/lib/module/organisms/Alert.js +6 -5
- package/lib/module/organisms/Alert.js.map +1 -1
- package/lib/module/organisms/AlertProvider.js +24 -1
- package/lib/module/organisms/AlertProvider.js.map +1 -1
- package/lib/module/organisms/BottomSheet.js +120 -41
- package/lib/module/organisms/BottomSheet.js.map +1 -1
- package/lib/module/organisms/DateField.js +2 -2
- package/lib/module/organisms/DateField.js.map +1 -1
- package/lib/module/organisms/DatePicker.js +3 -3
- package/lib/module/organisms/DatePicker.js.map +1 -1
- package/lib/module/organisms/List.js +68 -46
- package/lib/module/organisms/List.js.map +1 -1
- package/lib/module/organisms/Modal.js +44 -89
- package/lib/module/organisms/Modal.js.map +1 -1
- package/lib/module/organisms/NavigationBar.js +200 -0
- package/lib/module/organisms/NavigationBar.js.map +1 -0
- package/lib/module/organisms/Screen.js +9 -2
- package/lib/module/organisms/Screen.js.map +1 -1
- package/lib/module/organisms/SearchList.js +100 -31
- package/lib/module/organisms/SearchList.js.map +1 -1
- package/lib/module/organisms/Select.js +228 -56
- package/lib/module/organisms/Select.js.map +1 -1
- package/lib/module/organisms/ThemeToggle.js +47 -0
- package/lib/module/organisms/ThemeToggle.js.map +1 -0
- package/lib/module/organisms/Toast.js +22 -27
- package/lib/module/organisms/Toast.js.map +1 -1
- package/lib/module/organisms/ToastProvider.js +21 -0
- package/lib/module/organisms/ToastProvider.js.map +1 -1
- package/lib/module/organisms/Wizard.js +23 -3
- package/lib/module/organisms/Wizard.js.map +1 -1
- package/lib/module/organisms/imperativeBridge.js +24 -0
- package/lib/module/organisms/imperativeBridge.js.map +1 -0
- package/lib/module/organisms/index.js +4 -2
- package/lib/module/organisms/index.js.map +1 -1
- package/lib/module/safe-area/SafeAreaUIProvider.js +60 -0
- package/lib/module/safe-area/SafeAreaUIProvider.js.map +1 -0
- package/lib/module/safe-area/index.js +4 -0
- package/lib/module/safe-area/index.js.map +1 -0
- package/lib/module/theme/UIProvider.js +11 -0
- package/lib/module/theme/UIProvider.js.map +1 -1
- package/lib/module/theme/colors.js +194 -0
- package/lib/module/theme/colors.js.map +1 -0
- package/lib/module/theme/createTheme.js +25 -2
- package/lib/module/theme/createTheme.js.map +1 -1
- package/lib/module/theme/index.js +1 -0
- package/lib/module/theme/index.js.map +1 -1
- package/lib/module/theme/palettes.js +73 -11
- package/lib/module/theme/palettes.js.map +1 -1
- package/lib/typescript/atoms/Badge.d.ts.map +1 -1
- package/lib/typescript/atoms/Button.d.ts.map +1 -1
- package/lib/typescript/atoms/Checkbox.d.ts.map +1 -1
- package/lib/typescript/atoms/PressableScale.d.ts +3 -2
- package/lib/typescript/atoms/PressableScale.d.ts.map +1 -1
- package/lib/typescript/atoms/Skeleton.d.ts +29 -0
- package/lib/typescript/atoms/Skeleton.d.ts.map +1 -0
- package/lib/typescript/atoms/Transition.d.ts +51 -0
- package/lib/typescript/atoms/Transition.d.ts.map +1 -0
- package/lib/typescript/atoms/index.d.ts +4 -0
- package/lib/typescript/atoms/index.d.ts.map +1 -1
- package/lib/typescript/molecules/OptionCard.d.ts +11 -6
- package/lib/typescript/molecules/OptionCard.d.ts.map +1 -1
- package/lib/typescript/molecules/SegmentedControl.d.ts +24 -0
- package/lib/typescript/molecules/SegmentedControl.d.ts.map +1 -0
- package/lib/typescript/molecules/Stepper.d.ts +35 -3
- package/lib/typescript/molecules/Stepper.d.ts.map +1 -1
- package/lib/typescript/molecules/index.d.ts +4 -4
- package/lib/typescript/molecules/index.d.ts.map +1 -1
- package/lib/typescript/organisms/Alert.d.ts.map +1 -1
- package/lib/typescript/organisms/AlertProvider.d.ts +9 -0
- package/lib/typescript/organisms/AlertProvider.d.ts.map +1 -1
- package/lib/typescript/organisms/BottomSheet.d.ts +26 -4
- package/lib/typescript/organisms/BottomSheet.d.ts.map +1 -1
- package/lib/typescript/organisms/List.d.ts +9 -2
- package/lib/typescript/organisms/List.d.ts.map +1 -1
- package/lib/typescript/organisms/Modal.d.ts +3 -5
- package/lib/typescript/organisms/Modal.d.ts.map +1 -1
- package/lib/typescript/organisms/NavigationBar.d.ts +32 -0
- package/lib/typescript/organisms/NavigationBar.d.ts.map +1 -0
- package/lib/typescript/organisms/Screen.d.ts +2 -1
- package/lib/typescript/organisms/Screen.d.ts.map +1 -1
- package/lib/typescript/organisms/SearchList.d.ts +21 -5
- package/lib/typescript/organisms/SearchList.d.ts.map +1 -1
- package/lib/typescript/organisms/Select.d.ts +19 -4
- package/lib/typescript/organisms/Select.d.ts.map +1 -1
- package/lib/typescript/{molecules → organisms}/ThemeToggle.d.ts +4 -4
- package/lib/typescript/organisms/ThemeToggle.d.ts.map +1 -0
- package/lib/typescript/organisms/Toast.d.ts.map +1 -1
- package/lib/typescript/organisms/ToastProvider.d.ts +8 -0
- package/lib/typescript/organisms/ToastProvider.d.ts.map +1 -1
- package/lib/typescript/organisms/Wizard.d.ts +7 -1
- package/lib/typescript/organisms/Wizard.d.ts.map +1 -1
- package/lib/typescript/organisms/imperativeBridge.d.ts +12 -0
- package/lib/typescript/organisms/imperativeBridge.d.ts.map +1 -0
- package/lib/typescript/organisms/index.d.ts +7 -3
- package/lib/typescript/organisms/index.d.ts.map +1 -1
- package/lib/typescript/safe-area/SafeAreaUIProvider.d.ts +46 -0
- package/lib/typescript/safe-area/SafeAreaUIProvider.d.ts.map +1 -0
- package/lib/typescript/safe-area/index.d.ts +3 -0
- package/lib/typescript/safe-area/index.d.ts.map +1 -0
- package/lib/typescript/theme/UIProvider.d.ts.map +1 -1
- package/lib/typescript/theme/colors.d.ts +44 -0
- package/lib/typescript/theme/colors.d.ts.map +1 -0
- package/lib/typescript/theme/createTheme.d.ts +3 -0
- package/lib/typescript/theme/createTheme.d.ts.map +1 -1
- package/lib/typescript/theme/index.d.ts +3 -1
- package/lib/typescript/theme/index.d.ts.map +1 -1
- package/lib/typescript/theme/palettes.d.ts +41 -3
- package/lib/typescript/theme/palettes.d.ts.map +1 -1
- package/lib/typescript/theme/types.d.ts +9 -0
- package/lib/typescript/theme/types.d.ts.map +1 -1
- package/package.json +101 -18
- package/registry/alert-provider.json +9 -2
- package/registry/alert.json +1 -1
- package/registry/avatar-header.json +1 -1
- package/registry/avatar.json +1 -1
- package/registry/badge.json +1 -1
- package/registry/bottom-sheet.json +6 -2
- package/registry/button.json +1 -1
- package/registry/checkbox.json +1 -1
- package/registry/core.json +9 -5
- package/registry/date-field.json +2 -1
- package/registry/date-picker.json +1 -1
- package/registry/fab.json +1 -1
- package/registry/image.json +1 -1
- package/registry/index.json +108 -39
- package/registry/input.json +1 -1
- package/registry/list.json +2 -1
- package/registry/manifest.json +44 -6
- package/registry/modal.json +3 -2
- package/registry/navigation-bar.json +18 -0
- package/registry/option-card.json +3 -2
- package/registry/pressable-scale.json +1 -1
- package/registry/screen.json +1 -1
- package/registry/search-list.json +2 -1
- package/registry/segmented-control.json +18 -0
- package/registry/select.json +1 -1
- package/registry/skeleton.json +18 -0
- package/registry/stepper.json +3 -2
- package/registry/steps.json +1 -1
- package/registry/theme-toggle.json +5 -4
- package/registry/toast-provider.json +11 -3
- package/registry/toast.json +3 -2
- package/registry/transition.json +19 -0
- package/registry/wizard.json +3 -2
- package/src/atoms/Avatar.tsx +1 -1
- package/src/atoms/Badge.tsx +6 -4
- package/src/atoms/Button.tsx +8 -6
- package/src/atoms/Checkbox.tsx +4 -1
- package/src/atoms/Fab.tsx +1 -1
- package/src/atoms/Image.tsx +2 -2
- package/src/atoms/Input.tsx +2 -2
- package/src/atoms/PressableScale.tsx +16 -6
- package/src/atoms/Skeleton.tsx +114 -0
- package/src/atoms/Transition.tsx +189 -0
- package/src/atoms/index.ts +4 -0
- package/src/molecules/AvatarHeader.tsx +2 -2
- package/src/molecules/OptionCard.tsx +64 -27
- package/src/molecules/SegmentedControl.tsx +84 -0
- package/src/molecules/Stepper.tsx +147 -32
- package/src/molecules/Steps.tsx +2 -2
- package/src/molecules/index.ts +4 -4
- package/src/organisms/Alert.tsx +6 -5
- package/src/organisms/AlertProvider.tsx +26 -1
- package/src/organisms/BottomSheet.tsx +214 -62
- package/src/organisms/DateField.tsx +2 -2
- package/src/organisms/DatePicker.tsx +3 -3
- package/src/organisms/List.tsx +73 -41
- package/src/organisms/Modal.tsx +49 -61
- package/src/organisms/NavigationBar.tsx +223 -0
- package/src/organisms/Screen.tsx +11 -3
- package/src/organisms/SearchList.tsx +134 -38
- package/src/organisms/Select.tsx +227 -49
- package/src/organisms/ThemeToggle.tsx +30 -0
- package/src/organisms/Toast.tsx +19 -24
- package/src/organisms/ToastProvider.tsx +24 -0
- package/src/organisms/Wizard.tsx +36 -3
- package/src/organisms/imperativeBridge.ts +28 -0
- package/src/organisms/index.ts +7 -3
- package/src/safe-area/SafeAreaUIProvider.tsx +67 -0
- package/src/safe-area/index.ts +2 -0
- package/src/theme/UIProvider.tsx +15 -0
- package/src/theme/colors.ts +175 -0
- package/src/theme/createTheme.ts +38 -4
- package/src/theme/index.ts +3 -1
- package/src/theme/palettes.ts +108 -11
- package/src/theme/types.ts +10 -0
- package/lib/commonjs/molecules/ThemeToggle.js.map +0 -1
- package/lib/module/molecules/ThemeToggle.js.map +0 -1
- package/lib/typescript/molecules/ThemeToggle.d.ts.map +0 -1
- package/src/molecules/ThemeToggle.tsx +0 -67
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Transition = void 0;
|
|
7
|
+
exports.useReduceMotion = useReduceMotion;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _reactNative = require("react-native");
|
|
10
|
+
var _UIProvider = require("../theme/UIProvider");
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
|
+
const SCALE_FROM = {
|
|
14
|
+
scale: 0.92,
|
|
15
|
+
pop: 0.8
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Sigue el ajuste de "reducir movimiento" del sistema: con él activo las
|
|
20
|
+
* animaciones saltan al estado final en vez de desactivarse, así que los
|
|
21
|
+
* callbacks y el desmontaje siguen ocurriendo igual.
|
|
22
|
+
*/
|
|
23
|
+
function useReduceMotion() {
|
|
24
|
+
const [reduceMotion, setReduceMotion] = (0, _react.useState)(false);
|
|
25
|
+
(0, _react.useEffect)(() => {
|
|
26
|
+
let alive = true;
|
|
27
|
+
// Sólo se actualiza el estado si el ajuste está activo: el valor inicial ya
|
|
28
|
+
// es `false` y un setState de false a false costaría un render por montaje.
|
|
29
|
+
_reactNative.AccessibilityInfo.isReduceMotionEnabled().then(enabled => {
|
|
30
|
+
if (alive && enabled) setReduceMotion(true);
|
|
31
|
+
});
|
|
32
|
+
const sub = _reactNative.AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion);
|
|
33
|
+
return () => {
|
|
34
|
+
alive = false;
|
|
35
|
+
sub.remove();
|
|
36
|
+
};
|
|
37
|
+
}, []);
|
|
38
|
+
return reduceMotion;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Transition
|
|
43
|
+
* Envuelve cualquier árbol y lo anima al entrar y al salir. Todos los presets
|
|
44
|
+
* se reducen a `opacity` y `transform` sobre un único Animated.Value, que es
|
|
45
|
+
* lo que `useNativeDriver` sabe mandar al hilo nativo: la animación corre ahí
|
|
46
|
+
* y el hilo de JS no participa de ningún frame — por eso no hay presets de
|
|
47
|
+
* alto, ancho o color, que obligarían a volver a JS en cada frame.
|
|
48
|
+
*
|
|
49
|
+
* El nodo se mantiene montado hasta que termina la animación de salida, y el
|
|
50
|
+
* comportamiento es idéntico en iOS y Android: no hay ninguna rama por
|
|
51
|
+
* plataforma.
|
|
52
|
+
*/
|
|
53
|
+
const Transition = exports.Transition = /*#__PURE__*/(0, _react.memo)(({
|
|
54
|
+
children,
|
|
55
|
+
visible = true,
|
|
56
|
+
preset = 'fade',
|
|
57
|
+
duration,
|
|
58
|
+
delay = 0,
|
|
59
|
+
distance = 24,
|
|
60
|
+
spring,
|
|
61
|
+
appear = true,
|
|
62
|
+
keepMounted = false,
|
|
63
|
+
value,
|
|
64
|
+
onEntered,
|
|
65
|
+
onExited,
|
|
66
|
+
style,
|
|
67
|
+
testID
|
|
68
|
+
}) => {
|
|
69
|
+
const theme = (0, _UIProvider.useTheme)();
|
|
70
|
+
const reduceMotion = useReduceMotion();
|
|
71
|
+
const internal = (0, _react.useRef)(new _reactNative.Animated.Value(visible && !appear ? 1 : 0)).current;
|
|
72
|
+
const progress = value ?? internal;
|
|
73
|
+
const driven = value === undefined;
|
|
74
|
+
const [mounted, setMounted] = (0, _react.useState)(visible || keepMounted);
|
|
75
|
+
|
|
76
|
+
// Los callbacks viven en un ref: pasados inline cambian de identidad en
|
|
77
|
+
// cada render y, como dependencias del efecto, reiniciarían la animación.
|
|
78
|
+
const callbacks = (0, _react.useRef)({
|
|
79
|
+
onEntered,
|
|
80
|
+
onExited
|
|
81
|
+
});
|
|
82
|
+
(0, _react.useEffect)(() => {
|
|
83
|
+
callbacks.current = {
|
|
84
|
+
onEntered,
|
|
85
|
+
onExited
|
|
86
|
+
};
|
|
87
|
+
});
|
|
88
|
+
const presetKey = Array.isArray(preset) ? preset.join(' ') : preset;
|
|
89
|
+
const presets = (0, _react.useMemo)(() => presetKey.split(' '), [presetKey]);
|
|
90
|
+
(0, _react.useEffect)(() => {
|
|
91
|
+
if (visible) setMounted(true);
|
|
92
|
+
}, [visible]);
|
|
93
|
+
(0, _react.useEffect)(() => {
|
|
94
|
+
if (!driven) return;
|
|
95
|
+
const toValue = visible ? 1 : 0;
|
|
96
|
+
const useSpring = spring ?? presets.includes('pop');
|
|
97
|
+
const animation = reduceMotion ? _reactNative.Animated.timing(progress, {
|
|
98
|
+
toValue,
|
|
99
|
+
duration: 0,
|
|
100
|
+
delay,
|
|
101
|
+
useNativeDriver: true
|
|
102
|
+
}) : useSpring ? _reactNative.Animated.spring(progress, {
|
|
103
|
+
toValue,
|
|
104
|
+
delay,
|
|
105
|
+
friction: 9,
|
|
106
|
+
tension: 90,
|
|
107
|
+
useNativeDriver: true
|
|
108
|
+
}) : _reactNative.Animated.timing(progress, {
|
|
109
|
+
toValue,
|
|
110
|
+
delay,
|
|
111
|
+
duration: duration ?? theme.tokens.duration.base,
|
|
112
|
+
easing: visible ? _reactNative.Easing.out(_reactNative.Easing.cubic) : _reactNative.Easing.in(_reactNative.Easing.cubic),
|
|
113
|
+
useNativeDriver: true
|
|
114
|
+
});
|
|
115
|
+
animation.start(({
|
|
116
|
+
finished
|
|
117
|
+
}) => {
|
|
118
|
+
if (!finished) return;
|
|
119
|
+
if (visible) {
|
|
120
|
+
callbacks.current.onEntered?.();
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
callbacks.current.onExited?.();
|
|
124
|
+
if (!keepMounted) setMounted(false);
|
|
125
|
+
});
|
|
126
|
+
return () => animation.stop();
|
|
127
|
+
}, [visible, driven, reduceMotion, spring, delay, duration, keepMounted, presets, progress, theme]);
|
|
128
|
+
const animatedStyle = (0, _react.useMemo)(() => {
|
|
129
|
+
const transform = [];
|
|
130
|
+
let opacity;
|
|
131
|
+
for (const item of presets) {
|
|
132
|
+
if (item === 'fade') {
|
|
133
|
+
opacity = progress;
|
|
134
|
+
continue;
|
|
135
|
+
}
|
|
136
|
+
if (item === 'scale' || item === 'pop') {
|
|
137
|
+
transform.push({
|
|
138
|
+
scale: progress.interpolate({
|
|
139
|
+
inputRange: [0, 1],
|
|
140
|
+
outputRange: [SCALE_FROM[item], 1]
|
|
141
|
+
})
|
|
142
|
+
});
|
|
143
|
+
continue;
|
|
144
|
+
}
|
|
145
|
+
const vertical = item === 'slide-up' || item === 'slide-down';
|
|
146
|
+
const from = item === 'slide-up' || item === 'slide-left' ? distance : -distance;
|
|
147
|
+
const offset = progress.interpolate({
|
|
148
|
+
inputRange: [0, 1],
|
|
149
|
+
outputRange: [from, 0]
|
|
150
|
+
});
|
|
151
|
+
transform.push(vertical ? {
|
|
152
|
+
translateY: offset
|
|
153
|
+
} : {
|
|
154
|
+
translateX: offset
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
return {
|
|
158
|
+
opacity,
|
|
159
|
+
transform
|
|
160
|
+
};
|
|
161
|
+
}, [presets, progress, distance]);
|
|
162
|
+
if (!mounted) return null;
|
|
163
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
|
|
164
|
+
testID: testID,
|
|
165
|
+
pointerEvents: visible ? undefined : 'none',
|
|
166
|
+
style: [style, animatedStyle],
|
|
167
|
+
children: children
|
|
168
|
+
});
|
|
169
|
+
});
|
|
170
|
+
Transition.displayName = 'Transition';
|
|
171
|
+
//# sourceMappingURL=Transition.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_UIProvider","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SCALE_FROM","scale","pop","useReduceMotion","reduceMotion","setReduceMotion","useState","useEffect","alive","AccessibilityInfo","isReduceMotionEnabled","then","enabled","sub","addEventListener","remove","Transition","exports","memo","children","visible","preset","duration","delay","distance","spring","appear","keepMounted","value","onEntered","onExited","style","testID","theme","useTheme","internal","useRef","Animated","Value","current","progress","driven","undefined","mounted","setMounted","callbacks","presetKey","Array","isArray","join","presets","useMemo","split","toValue","useSpring","includes","animation","timing","useNativeDriver","friction","tension","tokens","base","easing","Easing","out","cubic","in","start","finished","stop","animatedStyle","transform","opacity","item","push","interpolate","inputRange","outputRange","vertical","from","offset","translateY","translateX","jsx","View","pointerEvents","displayName"],"sourceRoot":"../../../src","sources":["atoms/Transition.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -93,6 +93,12 @@ Object.defineProperty(exports, "PressableScale", {
|
|
|
93
93
|
return _PressableScale.PressableScale;
|
|
94
94
|
}
|
|
95
95
|
});
|
|
96
|
+
Object.defineProperty(exports, "Skeleton", {
|
|
97
|
+
enumerable: true,
|
|
98
|
+
get: function () {
|
|
99
|
+
return _Skeleton.Skeleton;
|
|
100
|
+
}
|
|
101
|
+
});
|
|
96
102
|
Object.defineProperty(exports, "Spinner", {
|
|
97
103
|
enumerable: true,
|
|
98
104
|
get: function () {
|
|
@@ -111,12 +117,24 @@ Object.defineProperty(exports, "Title", {
|
|
|
111
117
|
return _Text.Title;
|
|
112
118
|
}
|
|
113
119
|
});
|
|
120
|
+
Object.defineProperty(exports, "Transition", {
|
|
121
|
+
enumerable: true,
|
|
122
|
+
get: function () {
|
|
123
|
+
return _Transition.Transition;
|
|
124
|
+
}
|
|
125
|
+
});
|
|
114
126
|
Object.defineProperty(exports, "prefetchImage", {
|
|
115
127
|
enumerable: true,
|
|
116
128
|
get: function () {
|
|
117
129
|
return _Image.prefetchImage;
|
|
118
130
|
}
|
|
119
131
|
});
|
|
132
|
+
Object.defineProperty(exports, "useReduceMotion", {
|
|
133
|
+
enumerable: true,
|
|
134
|
+
get: function () {
|
|
135
|
+
return _Transition.useReduceMotion;
|
|
136
|
+
}
|
|
137
|
+
});
|
|
120
138
|
var _Text = require("./Text");
|
|
121
139
|
var _Button = require("./Button");
|
|
122
140
|
var _IconButton = require("./IconButton");
|
|
@@ -128,6 +146,8 @@ var _Divider = require("./Divider");
|
|
|
128
146
|
var _Avatar = require("./Avatar");
|
|
129
147
|
var _Image = require("./Image");
|
|
130
148
|
var _Spinner = require("./Spinner");
|
|
149
|
+
var _Skeleton = require("./Skeleton");
|
|
150
|
+
var _Transition = require("./Transition");
|
|
131
151
|
var _EmptyState = require("./EmptyState");
|
|
132
152
|
var _KeyValueRow = require("./KeyValueRow");
|
|
133
153
|
var _Fab = require("./Fab");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_Text","require","_Button","_IconButton","_Input","_Checkbox","_Badge","_Card","_Divider","_Avatar","_Image","_Spinner","_EmptyState","_KeyValueRow","_Fab","_PressableScale"],"sourceRoot":"../../../src","sources":["atoms/index.ts"],"mappings":"
|
|
1
|
+
{"version":3,"names":["_Text","require","_Button","_IconButton","_Input","_Checkbox","_Badge","_Card","_Divider","_Avatar","_Image","_Spinner","_Skeleton","_Transition","_EmptyState","_KeyValueRow","_Fab","_PressableScale"],"sourceRoot":"../../../src","sources":["atoms/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAAI,SAAA,GAAAJ,OAAA;AAEA,IAAAK,MAAA,GAAAL,OAAA;AAEA,IAAAM,KAAA,GAAAN,OAAA;AAEA,IAAAO,QAAA,GAAAP,OAAA;AAEA,IAAAQ,OAAA,GAAAR,OAAA;AAEA,IAAAS,MAAA,GAAAT,OAAA;AAEA,IAAAU,QAAA,GAAAV,OAAA;AAEA,IAAAW,SAAA,GAAAX,OAAA;AAEA,IAAAY,WAAA,GAAAZ,OAAA;AAEA,IAAAa,WAAA,GAAAb,OAAA;AAEA,IAAAc,YAAA,GAAAd,OAAA;AAEA,IAAAe,IAAA,GAAAf,OAAA;AAEA,IAAAgB,eAAA,GAAAhB,OAAA","ignoreList":[]}
|
|
@@ -20,7 +20,7 @@ const useStyles = (0, _createStyles.createStyles)(theme => ({
|
|
|
20
20
|
width: 80,
|
|
21
21
|
height: 80,
|
|
22
22
|
borderRadius: 40,
|
|
23
|
-
backgroundColor: theme.colors.
|
|
23
|
+
backgroundColor: theme.colors.primarySoft,
|
|
24
24
|
justifyContent: 'center',
|
|
25
25
|
alignItems: 'center',
|
|
26
26
|
marginBottom: theme.tokens.spacing.md
|
|
@@ -28,7 +28,7 @@ const useStyles = (0, _createStyles.createStyles)(theme => ({
|
|
|
28
28
|
initials: {
|
|
29
29
|
fontSize: theme.tokens.fontSize.xxl,
|
|
30
30
|
fontWeight: theme.tokens.fontWeight.bold,
|
|
31
|
-
color: theme.colors.
|
|
31
|
+
color: theme.colors.primaryText
|
|
32
32
|
},
|
|
33
33
|
title: {
|
|
34
34
|
fontSize: theme.tokens.fontSize.xl,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_createStyles","_UIProvider","_Icon","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useStyles","createStyles","theme","container","alignItems","marginBottom","tokens","spacing","xl","avatar","width","height","borderRadius","backgroundColor","colors","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_createStyles","_UIProvider","_Icon","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useStyles","createStyles","theme","container","alignItems","marginBottom","tokens","spacing","xl","avatar","width","height","borderRadius","backgroundColor","colors","primarySoft","justifyContent","md","initials","fontSize","xxl","fontWeight","bold","color","primaryText","title","textAlign","text","xs","subtitle","textLight","AvatarHeader","exports","memo","iconName","iconColor","style","useColors","styles","allowFontScaling","useAllowFontScaling","jsxs","View","children","jsx","Icon","name","size","primary","Text","displayName"],"sourceRoot":"../../../src","sources":["molecules/AvatarHeader.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -9,10 +9,13 @@ var _reactNative = require("react-native");
|
|
|
9
9
|
var _createStyles = require("../theme/createStyles");
|
|
10
10
|
var _UIProvider = require("../theme/UIProvider");
|
|
11
11
|
var _Icon = require("../icons/Icon");
|
|
12
|
+
var _PressableScale = require("../atoms/PressableScale");
|
|
12
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
14
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
15
|
const useStyles = (0, _createStyles.createStyles)(theme => ({
|
|
15
16
|
card: {
|
|
17
|
+
// Las tarjetas se reparten la fila que las contenga, sean dos o cinco.
|
|
18
|
+
flex: 1,
|
|
16
19
|
alignItems: 'center',
|
|
17
20
|
justifyContent: 'center',
|
|
18
21
|
backgroundColor: theme.colors.surface,
|
|
@@ -22,24 +25,31 @@ const useStyles = (0, _createStyles.createStyles)(theme => ({
|
|
|
22
25
|
...theme.tokens.shadow.sm
|
|
23
26
|
},
|
|
24
27
|
cardHorizontal: {
|
|
25
|
-
flex: 1,
|
|
26
28
|
flexDirection: 'row',
|
|
27
29
|
padding: theme.tokens.spacing.md - 2,
|
|
28
30
|
gap: theme.tokens.spacing.sm
|
|
29
31
|
},
|
|
30
32
|
cardVertical: {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
gap: 5,
|
|
33
|
+
padding: theme.tokens.spacing.md - 2,
|
|
34
|
+
gap: 6,
|
|
34
35
|
minHeight: 100
|
|
35
36
|
},
|
|
36
37
|
cardSelected: {
|
|
37
38
|
borderColor: theme.colors.primary,
|
|
38
|
-
backgroundColor: theme.colors.
|
|
39
|
+
backgroundColor: theme.colors.primarySoft,
|
|
39
40
|
borderWidth: 1.5,
|
|
40
41
|
elevation: 0,
|
|
41
42
|
shadowOpacity: 0
|
|
42
43
|
},
|
|
44
|
+
cardDisabled: {
|
|
45
|
+
opacity: 0.5
|
|
46
|
+
},
|
|
47
|
+
text: {
|
|
48
|
+
flexShrink: 1
|
|
49
|
+
},
|
|
50
|
+
textVertical: {
|
|
51
|
+
alignItems: 'center'
|
|
52
|
+
},
|
|
43
53
|
label: {
|
|
44
54
|
color: theme.colors.textLight,
|
|
45
55
|
fontWeight: theme.tokens.fontWeight.medium
|
|
@@ -49,48 +59,71 @@ const useStyles = (0, _createStyles.createStyles)(theme => ({
|
|
|
49
59
|
textAlign: 'center'
|
|
50
60
|
},
|
|
51
61
|
labelSelected: {
|
|
52
|
-
color: theme.colors.
|
|
62
|
+
color: theme.colors.primaryText
|
|
63
|
+
},
|
|
64
|
+
description: {
|
|
65
|
+
fontSize: theme.tokens.fontSize.xs,
|
|
66
|
+
color: theme.colors.textLight,
|
|
67
|
+
marginTop: 2
|
|
68
|
+
},
|
|
69
|
+
descriptionVertical: {
|
|
70
|
+
textAlign: 'center'
|
|
53
71
|
}
|
|
54
72
|
}));
|
|
55
73
|
|
|
56
74
|
/**
|
|
57
75
|
* OptionCard
|
|
58
|
-
*
|
|
59
|
-
*
|
|
60
|
-
* de
|
|
76
|
+
* Opción excluyente con ícono y label que resalta cuando `isSelected`. Es un
|
|
77
|
+
* radio con cara de tarjeta, así que se anuncia como tal: envolver el grupo en
|
|
78
|
+
* una View con `accessibilityRole="radiogroup"` para que el lector de pantalla
|
|
79
|
+
* lea "1 de 3".
|
|
61
80
|
*/
|
|
62
81
|
const OptionCard = exports.OptionCard = /*#__PURE__*/(0, _react.memo)(({
|
|
63
82
|
label,
|
|
83
|
+
description,
|
|
64
84
|
iconName,
|
|
65
85
|
isSelected,
|
|
66
86
|
onPress,
|
|
87
|
+
disabled = false,
|
|
67
88
|
layout = 'horizontal',
|
|
68
|
-
style
|
|
89
|
+
style,
|
|
90
|
+
testID
|
|
69
91
|
}) => {
|
|
70
92
|
const colors = (0, _UIProvider.useColors)();
|
|
71
93
|
const styles = useStyles();
|
|
72
94
|
const allowFontScaling = (0, _UIProvider.useAllowFontScaling)();
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
//
|
|
76
|
-
// sombra como un borde oscuro
|
|
77
|
-
, {
|
|
78
|
-
|
|
79
|
-
style: [styles.card, layout === 'vertical' ? styles.cardVertical : styles.cardHorizontal, isSelected && styles.cardSelected, style],
|
|
95
|
+
const isVertical = layout === 'vertical';
|
|
96
|
+
|
|
97
|
+
// Feedback por transform y no por opacity: con elevation, animar la opacity
|
|
98
|
+
// dispara un bug de Android que redibuja la sombra como un borde oscuro.
|
|
99
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PressableScale.PressableScale, {
|
|
100
|
+
style: [styles.card, isVertical ? styles.cardVertical : styles.cardHorizontal, isSelected && styles.cardSelected, disabled && styles.cardDisabled, style],
|
|
80
101
|
onPress: onPress,
|
|
81
|
-
|
|
102
|
+
disabled: disabled,
|
|
103
|
+
accessibilityRole: "radio",
|
|
82
104
|
accessibilityState: {
|
|
83
|
-
selected: isSelected
|
|
105
|
+
selected: isSelected,
|
|
106
|
+
checked: isSelected,
|
|
107
|
+
disabled
|
|
84
108
|
},
|
|
85
109
|
accessibilityLabel: label,
|
|
86
|
-
|
|
110
|
+
accessibilityHint: description,
|
|
111
|
+
testID: testID,
|
|
112
|
+
children: [!!iconName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
|
|
87
113
|
name: iconName,
|
|
88
114
|
size: 24,
|
|
89
115
|
color: isSelected ? colors.primary : colors.textLight
|
|
90
|
-
}), /*#__PURE__*/(0, _jsxRuntime.
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
116
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
117
|
+
style: [styles.text, isVertical && styles.textVertical],
|
|
118
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
119
|
+
allowFontScaling: allowFontScaling,
|
|
120
|
+
style: [styles.label, isVertical && styles.labelVertical, isSelected && styles.labelSelected],
|
|
121
|
+
children: label
|
|
122
|
+
}), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
123
|
+
allowFontScaling: allowFontScaling,
|
|
124
|
+
style: [styles.description, isVertical && styles.descriptionVertical],
|
|
125
|
+
children: description
|
|
126
|
+
})]
|
|
94
127
|
})]
|
|
95
128
|
});
|
|
96
129
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_createStyles","_UIProvider","_Icon","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useStyles","createStyles","theme","card","alignItems","justifyContent","backgroundColor","colors","surface","borderRadius","tokens","radius","md","borderWidth","borderColor","border","shadow","sm","cardHorizontal","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_createStyles","_UIProvider","_Icon","_PressableScale","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useStyles","createStyles","theme","card","flex","alignItems","justifyContent","backgroundColor","colors","surface","borderRadius","tokens","radius","md","borderWidth","borderColor","border","shadow","sm","cardHorizontal","flexDirection","padding","spacing","gap","cardVertical","minHeight","cardSelected","primary","primarySoft","elevation","shadowOpacity","cardDisabled","opacity","text","flexShrink","textVertical","label","color","textLight","fontWeight","medium","labelVertical","fontSize","xs","textAlign","labelSelected","primaryText","description","marginTop","descriptionVertical","OptionCard","exports","memo","iconName","isSelected","onPress","disabled","layout","style","testID","useColors","styles","allowFontScaling","useAllowFontScaling","isVertical","jsxs","PressableScale","accessibilityRole","accessibilityState","selected","checked","accessibilityLabel","accessibilityHint","children","jsx","Icon","name","size","View","Text","displayName"],"sourceRoot":"../../../src","sources":["molecules/OptionCard.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,19 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.SegmentedControl = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
var _createStyles = require("../theme/createStyles");
|
|
10
10
|
var _UIProvider = require("../theme/UIProvider");
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
12
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
|
-
const MODES = ['system', 'light', 'dark'];
|
|
14
|
-
const DEFAULT_LABELS = {
|
|
15
|
-
system: 'Auto',
|
|
16
|
-
light: 'Light',
|
|
17
|
-
dark: 'Dark'
|
|
18
|
-
};
|
|
19
13
|
const useStyles = (0, _createStyles.createStyles)(theme => ({
|
|
20
14
|
track: {
|
|
21
15
|
flexDirection: 'row',
|
|
@@ -33,59 +27,65 @@ const useStyles = (0, _createStyles.createStyles)(theme => ({
|
|
|
33
27
|
backgroundColor: theme.colors.surface,
|
|
34
28
|
...theme.tokens.shadow.sm
|
|
35
29
|
},
|
|
30
|
+
segmentDisabled: {
|
|
31
|
+
opacity: 0.5
|
|
32
|
+
},
|
|
36
33
|
label: {
|
|
37
34
|
fontSize: theme.tokens.fontSize.sm,
|
|
38
35
|
fontWeight: theme.tokens.fontWeight.medium,
|
|
39
36
|
color: theme.colors.textLight
|
|
40
37
|
},
|
|
41
38
|
labelActive: {
|
|
42
|
-
color: theme.colors.
|
|
39
|
+
color: theme.colors.primaryText,
|
|
43
40
|
fontWeight: theme.tokens.fontWeight.semibold
|
|
44
41
|
}
|
|
45
42
|
}));
|
|
46
43
|
|
|
47
44
|
/**
|
|
48
|
-
*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
* onModeChange en <UIProvider>.
|
|
45
|
+
* SegmentedControl
|
|
46
|
+
* Elige una opción entre pocas, todas visibles. No conoce ningún estado
|
|
47
|
+
* global: recibe `value` y avisa por `onChange`.
|
|
52
48
|
*/
|
|
53
|
-
|
|
49
|
+
function SegmentedControlInner({
|
|
50
|
+
options,
|
|
51
|
+
value,
|
|
52
|
+
onChange,
|
|
53
|
+
disabled = false,
|
|
54
54
|
style,
|
|
55
|
-
|
|
56
|
-
})
|
|
57
|
-
const {
|
|
58
|
-
mode,
|
|
59
|
-
setMode
|
|
60
|
-
} = (0, _UIProvider.useThemeMode)();
|
|
61
|
-
const colors = (0, _UIProvider.useColors)();
|
|
55
|
+
testID
|
|
56
|
+
}) {
|
|
62
57
|
const styles = useStyles();
|
|
63
58
|
const allowFontScaling = (0, _UIProvider.useAllowFontScaling)();
|
|
64
|
-
const labels = {
|
|
65
|
-
...DEFAULT_LABELS,
|
|
66
|
-
...labelOverrides
|
|
67
|
-
};
|
|
68
59
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
69
60
|
style: [styles.track, style],
|
|
70
|
-
accessibilityRole: "
|
|
71
|
-
|
|
72
|
-
|
|
61
|
+
accessibilityRole: "radiogroup",
|
|
62
|
+
testID: testID,
|
|
63
|
+
children: options.map(option => {
|
|
64
|
+
const active = option.value === value;
|
|
65
|
+
const isDisabled = disabled || !!option.disabled;
|
|
73
66
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
74
|
-
style: [styles.segment, active && styles.segmentActive],
|
|
75
|
-
onPress: () =>
|
|
76
|
-
|
|
67
|
+
style: [styles.segment, active && styles.segmentActive, isDisabled && styles.segmentDisabled],
|
|
68
|
+
onPress: () => onChange(option.value),
|
|
69
|
+
disabled: isDisabled,
|
|
70
|
+
accessibilityRole: "radio",
|
|
77
71
|
accessibilityState: {
|
|
78
|
-
selected: active
|
|
72
|
+
selected: active,
|
|
73
|
+
checked: active,
|
|
74
|
+
disabled: isDisabled
|
|
79
75
|
},
|
|
80
|
-
accessibilityLabel:
|
|
76
|
+
accessibilityLabel: option.label,
|
|
77
|
+
testID: testID && `${testID}-${option.value}`,
|
|
81
78
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
82
79
|
allowFontScaling: allowFontScaling,
|
|
83
80
|
style: [styles.label, active && styles.labelActive],
|
|
84
|
-
children:
|
|
81
|
+
children: option.label
|
|
85
82
|
})
|
|
86
|
-
},
|
|
83
|
+
}, option.value);
|
|
87
84
|
})
|
|
88
85
|
});
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// memo() pierde los genéricos al envolver: el cast los devuelve para que
|
|
89
|
+
// `value` y `onChange` sigan atados al union de `options`.
|
|
90
|
+
const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.memo)(SegmentedControlInner);
|
|
91
|
+
//# sourceMappingURL=SegmentedControl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_createStyles","_UIProvider","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useStyles","createStyles","theme","track","flexDirection","backgroundColor","colors","inputBackground","borderRadius","tokens","radius","md","padding","segment","flex","paddingVertical","spacing","sm","alignItems","segmentActive","surface","shadow","segmentDisabled","opacity","label","fontSize","fontWeight","medium","color","textLight","labelActive","primaryText","semibold","SegmentedControlInner","options","value","onChange","disabled","style","testID","styles","allowFontScaling","useAllowFontScaling","jsx","View","accessibilityRole","children","map","option","active","isDisabled","TouchableOpacity","onPress","accessibilityState","selected","checked","accessibilityLabel","Text","SegmentedControl","exports","memo"],"sourceRoot":"../../../src","sources":["molecules/SegmentedControl.tsx"],"mappings":"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","ignoreList":[]}
|