orn-ui 0.2.0 → 0.2.2
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 +16 -5
- package/lib/commonjs/molecules/Steps.js +36 -6
- package/lib/commonjs/molecules/Steps.js.map +1 -1
- package/lib/commonjs/organisms/DateField.js +46 -15
- package/lib/commonjs/organisms/DateField.js.map +1 -1
- package/lib/commonjs/organisms/DatePicker.js +129 -50
- package/lib/commonjs/organisms/DatePicker.js.map +1 -1
- package/lib/commonjs/organisms/NavigationBar.js +6 -1
- package/lib/commonjs/organisms/NavigationBar.js.map +1 -1
- package/lib/commonjs/organisms/SearchList.js +1 -2
- package/lib/commonjs/organisms/SearchList.js.map +1 -1
- package/lib/commonjs/organisms/Wizard.js +1 -0
- package/lib/commonjs/organisms/Wizard.js.map +1 -1
- package/lib/commonjs/theme/labels.js +5 -1
- package/lib/commonjs/theme/labels.js.map +1 -1
- package/lib/module/molecules/Steps.js +37 -7
- package/lib/module/molecules/Steps.js.map +1 -1
- package/lib/module/organisms/DateField.js +49 -18
- package/lib/module/organisms/DateField.js.map +1 -1
- package/lib/module/organisms/DatePicker.js +131 -52
- package/lib/module/organisms/DatePicker.js.map +1 -1
- package/lib/module/organisms/NavigationBar.js +6 -1
- package/lib/module/organisms/NavigationBar.js.map +1 -1
- package/lib/module/organisms/SearchList.js +1 -2
- package/lib/module/organisms/SearchList.js.map +1 -1
- package/lib/module/organisms/Wizard.js +1 -0
- package/lib/module/organisms/Wizard.js.map +1 -1
- package/lib/module/theme/labels.js +5 -1
- package/lib/module/theme/labels.js.map +1 -1
- package/lib/typescript/molecules/Steps.d.ts.map +1 -1
- package/lib/typescript/organisms/DateField.d.ts +23 -5
- package/lib/typescript/organisms/DateField.d.ts.map +1 -1
- package/lib/typescript/organisms/DatePicker.d.ts +5 -1
- package/lib/typescript/organisms/DatePicker.d.ts.map +1 -1
- package/lib/typescript/organisms/NavigationBar.d.ts.map +1 -1
- package/lib/typescript/organisms/Wizard.d.ts.map +1 -1
- package/lib/typescript/theme/labels.d.ts +6 -0
- package/lib/typescript/theme/labels.d.ts.map +1 -1
- package/package.json +1 -1
- package/registry/core.json +1 -1
- package/registry/date-field.json +1 -1
- package/registry/date-picker.json +1 -1
- package/registry/index.json +7 -7
- package/registry/navigation-bar.json +1 -1
- package/registry/search-list.json +1 -1
- package/registry/steps.json +1 -1
- package/registry/wizard.json +1 -1
- package/src/molecules/Steps.tsx +27 -8
- package/src/organisms/DateField.tsx +79 -19
- package/src/organisms/DatePicker.tsx +198 -80
- package/src/organisms/NavigationBar.tsx +3 -0
- package/src/organisms/SearchList.tsx +1 -1
- package/src/organisms/Wizard.tsx +1 -0
- package/src/theme/labels.ts +13 -0
package/README.md
CHANGED
|
@@ -95,11 +95,22 @@ const insets = useSafeAreaInsets();
|
|
|
95
95
|
Every component's full prop table lives on [orn-ui-docs.vercel.app](https://orn-ui-docs.vercel.app/).
|
|
96
96
|
|
|
97
97
|
### SearchList & List Features
|
|
98
|
-
- **Search &
|
|
99
|
-
- **
|
|
100
|
-
- **Pull-to-
|
|
101
|
-
- **
|
|
102
|
-
- **
|
|
98
|
+
- **Search & scan**: built-in search bar with an optional scan action and an extra slot for your own controls.
|
|
99
|
+
- **Skeleton first load**: `skeletonCount` and `renderSkeletonItem` draw placeholders shaped like the real rows.
|
|
100
|
+
- **Pull-to-refresh**: native, through `onRefresh` and `isRefreshing`.
|
|
101
|
+
- **Pagination & headers/footers**: `ListHeaderComponent` and `ListFooterComponent` coexist with the `isLoadingMore` indicator and `noMoreText`.
|
|
102
|
+
- **Non-destructive empty state**: `ListEmptyComponent` keeps the header, the footer and the scroll/refresh gestures.
|
|
103
|
+
|
|
104
|
+
### Worth knowing
|
|
105
|
+
|
|
106
|
+
- **Safe area, once.** A screen above a `NavigationBar` or tab bar takes
|
|
107
|
+
`edges={['top']}` — applying the bottom inset on both counts the gesture bar
|
|
108
|
+
twice and leaves an empty band.
|
|
109
|
+
- **Dates.** `DatePicker`/`DateField` both take `mode="range"`; `onClear` is
|
|
110
|
+
what renders the clear button; month/weekday names, the modal title and the
|
|
111
|
+
clear label come from `labels`.
|
|
112
|
+
- **`Steps`** scrolls its horizontal row rather than squeezing columns until
|
|
113
|
+
React Native breaks labels mid-word.
|
|
103
114
|
|
|
104
115
|
## Why zero dependencies
|
|
105
116
|
|
|
@@ -12,6 +12,8 @@ var _Icon = require("../icons/Icon");
|
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
13
|
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
14
|
const CIRCLE = 32;
|
|
15
|
+
/** Ancho mínimo de una columna horizontal: por debajo, las etiquetas se parten. */
|
|
16
|
+
const STEP_MIN_WIDTH = 76;
|
|
15
17
|
const useStyles = (0, _createStyles.createStyles)(theme => ({
|
|
16
18
|
rowContainer: {
|
|
17
19
|
flexDirection: 'row',
|
|
@@ -21,8 +23,23 @@ const useStyles = (0, _createStyles.createStyles)(theme => ({
|
|
|
21
23
|
flexDirection: 'column'
|
|
22
24
|
},
|
|
23
25
|
// horizontal
|
|
26
|
+
// ScrollView trae flexGrow: 1 de fábrica y se comía todo el alto disponible
|
|
27
|
+
// del contenedor, dejando los pasos pegados arriba de una caja enorme.
|
|
28
|
+
hScrollView: {
|
|
29
|
+
flexGrow: 0,
|
|
30
|
+
flexShrink: 0
|
|
31
|
+
},
|
|
32
|
+
hScroll: {
|
|
33
|
+
flexGrow: 1,
|
|
34
|
+
flexDirection: 'row',
|
|
35
|
+
alignItems: 'flex-start'
|
|
36
|
+
},
|
|
37
|
+
// `minWidth` es lo que evita que RN parta palabras a la mitad
|
|
38
|
+
// ("Almacé / n"): antes que apretar la columna por debajo de una palabra
|
|
39
|
+
// corriente, la fila se vuelve scrollable.
|
|
24
40
|
hStep: {
|
|
25
41
|
flex: 1,
|
|
42
|
+
minWidth: STEP_MIN_WIDTH,
|
|
26
43
|
alignItems: 'center',
|
|
27
44
|
gap: theme.tokens.spacing.sm
|
|
28
45
|
},
|
|
@@ -33,13 +50,19 @@ const useStyles = (0, _createStyles.createStyles)(theme => ({
|
|
|
33
50
|
},
|
|
34
51
|
// El conector toma una fracción chica del ancho: compitiendo de igual a
|
|
35
52
|
// igual con los pasos (flex: 1) cada etiqueta se quedaba con 1/(2n-1) del
|
|
36
|
-
// total
|
|
37
|
-
// 4 pasos deja ~68px por etiqueta, suficiente para una palabra corriente.
|
|
53
|
+
// total.
|
|
38
54
|
hConnector: {
|
|
39
55
|
height: 2,
|
|
40
56
|
flex: 0.3,
|
|
57
|
+
minWidth: 12,
|
|
41
58
|
marginTop: CIRCLE / 2 - 1
|
|
42
59
|
},
|
|
60
|
+
hLabel: {
|
|
61
|
+
fontSize: theme.tokens.fontSize.sm
|
|
62
|
+
},
|
|
63
|
+
hDescription: {
|
|
64
|
+
fontSize: theme.tokens.fontSize.xs
|
|
65
|
+
},
|
|
43
66
|
// vertical
|
|
44
67
|
vStep: {
|
|
45
68
|
flexDirection: 'row',
|
|
@@ -152,13 +175,13 @@ const Steps = exports.Steps = /*#__PURE__*/(0, _react.memo)(({
|
|
|
152
175
|
style: centered ? styles.hLabels : styles.vLabels,
|
|
153
176
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
154
177
|
allowFontScaling: allowFontScaling,
|
|
155
|
-
style: [styles.label, centered && styles.labelCentered, status === 'pending' && {
|
|
178
|
+
style: [styles.label, centered && styles.labelCentered, centered && styles.hLabel, status === 'pending' && {
|
|
156
179
|
color: colors.textLight
|
|
157
180
|
}],
|
|
158
181
|
children: step.label
|
|
159
182
|
}), !!step.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
160
183
|
allowFontScaling: allowFontScaling,
|
|
161
|
-
style: [styles.description, centered && styles.descriptionCentered],
|
|
184
|
+
style: [styles.description, centered && styles.descriptionCentered, centered && styles.hDescription],
|
|
162
185
|
children: step.description
|
|
163
186
|
})]
|
|
164
187
|
});
|
|
@@ -194,8 +217,15 @@ const Steps = exports.Steps = /*#__PURE__*/(0, _react.memo)(({
|
|
|
194
217
|
})
|
|
195
218
|
});
|
|
196
219
|
}
|
|
197
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.
|
|
198
|
-
|
|
220
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
|
|
221
|
+
testID: "steps-row",
|
|
222
|
+
horizontal: true,
|
|
223
|
+
showsHorizontalScrollIndicator: false
|
|
224
|
+
// Con espacio de sobra los pasos se reparten la fila igual que antes
|
|
225
|
+
// (flexGrow); cuando no entran, se desplaza en vez de apretar el texto.
|
|
226
|
+
,
|
|
227
|
+
style: [styles.hScrollView, style],
|
|
228
|
+
contentContainerStyle: styles.hScroll,
|
|
199
229
|
children: steps.map((step, index) => {
|
|
200
230
|
const status = statusOf(index, current);
|
|
201
231
|
const isLast = index === steps.length - 1;
|
|
@@ -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","CIRCLE","useStyles","createStyles","theme","rowContainer","flexDirection","alignItems","columnContainer","hStep","flex","gap","tokens","spacing","sm","hLabels","paddingHorizontal","hConnector","height","marginTop","vStep","md","vIndicatorColumn","vConnector","width","minHeight","marginVertical","vLabels","paddingBottom","lg","circle","borderRadius","borderWidth","justifyContent","circleNumber","
|
|
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","CIRCLE","STEP_MIN_WIDTH","useStyles","createStyles","theme","rowContainer","flexDirection","alignItems","columnContainer","hScrollView","flexGrow","flexShrink","hScroll","hStep","flex","minWidth","gap","tokens","spacing","sm","hLabels","paddingHorizontal","hConnector","height","marginTop","hLabel","fontSize","hDescription","xs","vStep","md","vIndicatorColumn","vConnector","width","minHeight","marginVertical","vLabels","paddingBottom","lg","circle","borderRadius","borderWidth","justifyContent","circleNumber","fontWeight","semibold","label","color","colors","text","labelCentered","textAlign","description","textLight","descriptionCentered","statusOf","index","current","Steps","exports","memo","steps","orientation","completedIndicator","onStepPress","style","useColors","styles","allowFontScaling","useAllowFontScaling","isVertical","colorsFor","status","bg","primary","border","fg","onPrimary","primaryText","renderCircle","c","showCheck","jsx","View","backgroundColor","borderColor","children","Icon","name","size","Text","renderLabels","step","centered","jsxs","stepAccessibility","accessibilityRole","accessibilityLabel","accessibilityState","selected","disabled","map","isLast","length","Wrapper","TouchableOpacity","onPress","undefined","activeOpacity","ScrollView","testID","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","Fragment","displayName"],"sourceRoot":"../../../src","sources":["molecules/Steps.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -66,25 +66,56 @@ const useStyles = (0, _createStyles.createStyles)(theme => ({
|
|
|
66
66
|
const DateField = exports.DateField = /*#__PURE__*/(0, _react.memo)(({
|
|
67
67
|
label,
|
|
68
68
|
required = false,
|
|
69
|
+
mode = 'single',
|
|
69
70
|
value,
|
|
70
71
|
onChange,
|
|
72
|
+
range,
|
|
73
|
+
onRangeChange,
|
|
71
74
|
placeholder = 'Select a date',
|
|
72
75
|
error,
|
|
73
76
|
disabled = false,
|
|
74
77
|
format,
|
|
75
|
-
modalTitle
|
|
76
|
-
|
|
78
|
+
modalTitle,
|
|
79
|
+
onClear,
|
|
80
|
+
clearLabel,
|
|
77
81
|
containerStyle,
|
|
78
|
-
monthNames
|
|
82
|
+
monthNames,
|
|
83
|
+
testID,
|
|
79
84
|
...pickerProps
|
|
80
85
|
}) => {
|
|
81
86
|
const colors = (0, _UIProvider.useColors)();
|
|
82
87
|
const styles = useStyles();
|
|
88
|
+
const labels = (0, _UIProvider.useLabels)();
|
|
83
89
|
const allowFontScaling = (0, _UIProvider.useAllowFontScaling)();
|
|
84
90
|
const [open, setOpen] = (0, _react.useState)(false);
|
|
85
|
-
const
|
|
91
|
+
const months = monthNames ?? labels.months;
|
|
92
|
+
const isRange = mode === 'range';
|
|
93
|
+
const formatDate = date => format ? format(date) : defaultFormat(date, months);
|
|
94
|
+
|
|
95
|
+
// El calendario se cierra solo cuando ya no falta nada por elegir: en
|
|
96
|
+
// rango, recién cuando el segundo toque cierra el intervalo.
|
|
97
|
+
const handleChange = (0, _react.useCallback)(date => {
|
|
98
|
+
onChange?.(date);
|
|
99
|
+
setOpen(false);
|
|
100
|
+
}, [onChange]);
|
|
101
|
+
const handleRangeChange = (0, _react.useCallback)(next => {
|
|
102
|
+
onRangeChange?.(next);
|
|
103
|
+
if (next.end) setOpen(false);
|
|
104
|
+
}, [onRangeChange]);
|
|
105
|
+
const handleClear = (0, _react.useCallback)(() => {
|
|
106
|
+
onClear?.();
|
|
107
|
+
setOpen(false);
|
|
108
|
+
}, [onClear]);
|
|
109
|
+
const hasValue = isRange ? !!range?.start : !!value;
|
|
110
|
+
let display = placeholder;
|
|
111
|
+
if (isRange && range?.start) {
|
|
112
|
+
display = range.end ? `${formatDate(range.start)} — ${formatDate(range.end)}` : formatDate(range.start);
|
|
113
|
+
} else if (!isRange && value) {
|
|
114
|
+
display = formatDate(value);
|
|
115
|
+
}
|
|
86
116
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
87
117
|
style: [styles.container, containerStyle],
|
|
118
|
+
testID: testID,
|
|
88
119
|
children: [!!label && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
89
120
|
allowFontScaling: allowFontScaling,
|
|
90
121
|
style: styles.label,
|
|
@@ -107,7 +138,7 @@ const DateField = exports.DateField = /*#__PURE__*/(0, _react.memo)(({
|
|
|
107
138
|
},
|
|
108
139
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
109
140
|
allowFontScaling: allowFontScaling,
|
|
110
|
-
style: [styles.fieldText, !
|
|
141
|
+
style: [styles.fieldText, !hasValue && styles.placeholder],
|
|
111
142
|
children: display
|
|
112
143
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
113
144
|
allowFontScaling: allowFontScaling,
|
|
@@ -123,22 +154,22 @@ const DateField = exports.DateField = /*#__PURE__*/(0, _react.memo)(({
|
|
|
123
154
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
|
|
124
155
|
visible: open,
|
|
125
156
|
onClose: () => setOpen(false),
|
|
126
|
-
title: modalTitle,
|
|
157
|
+
title: modalTitle ?? labels.selectDate,
|
|
127
158
|
variant: "overlay",
|
|
128
159
|
scrollable: false,
|
|
129
|
-
footer: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
|
|
130
|
-
title: clearLabel,
|
|
160
|
+
footer: onClear ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
|
|
161
|
+
title: clearLabel ?? labels.clear,
|
|
131
162
|
variant: "ghost",
|
|
132
|
-
onPress:
|
|
133
|
-
}),
|
|
163
|
+
onPress: handleClear
|
|
164
|
+
}) : undefined,
|
|
134
165
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, {
|
|
166
|
+
mode: mode,
|
|
135
167
|
value: value,
|
|
136
|
-
|
|
168
|
+
range: range,
|
|
169
|
+
monthNames: months,
|
|
137
170
|
...pickerProps,
|
|
138
|
-
onChange:
|
|
139
|
-
|
|
140
|
-
setOpen(false);
|
|
141
|
-
}
|
|
171
|
+
onChange: handleChange,
|
|
172
|
+
onRangeChange: handleRangeChange
|
|
142
173
|
})
|
|
143
174
|
})]
|
|
144
175
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_createStyles","_UIProvider","_Modal","_DatePicker","_Button","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","defaultFormat","date","monthNames","getMonth","getDate","getFullYear","useStyles","createStyles","theme","container","marginBottom","tokens","spacing","lg","width","gap","sm","label","fontSize","md","fontWeight","medium","color","colors","text","required","errorText","field","flexDirection","alignItems","justifyContent","backgroundColor","inputBackground","borderRadius","radius","borderWidth","borderColor","border","minHeight","paddingHorizontal","fieldError","error","fieldText","placeholder","textLight","DateField","exports","memo","value","onChange","disabled","format","modalTitle","clearLabel","containerStyle","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_createStyles","_UIProvider","_Modal","_DatePicker","_Button","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","defaultFormat","date","monthNames","getMonth","getDate","getFullYear","useStyles","createStyles","theme","container","marginBottom","tokens","spacing","lg","width","gap","sm","label","fontSize","md","fontWeight","medium","color","colors","text","required","errorText","field","flexDirection","alignItems","justifyContent","backgroundColor","inputBackground","borderRadius","radius","borderWidth","borderColor","border","minHeight","paddingHorizontal","fieldError","error","fieldText","placeholder","textLight","DateField","exports","memo","mode","value","onChange","range","onRangeChange","disabled","format","modalTitle","onClear","clearLabel","containerStyle","testID","pickerProps","useColors","styles","labels","useLabels","allowFontScaling","useAllowFontScaling","open","setOpen","useState","months","isRange","formatDate","handleChange","useCallback","handleRangeChange","next","end","handleClear","hasValue","start","display","jsxs","View","style","children","Text","jsx","TouchableOpacity","opacity","onPress","activeOpacity","accessibilityRole","accessibilityLabel","accessibilityState","expanded","Modal","visible","onClose","title","selectDate","variant","scrollable","footer","Button","clear","undefined","DatePicker","displayName"],"sourceRoot":"../../../src","sources":["organisms/DateField.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -16,24 +16,27 @@ const DEFAULT_MONTH_NAMES = exports.DEFAULT_MONTH_NAMES = ['January', 'February'
|
|
|
16
16
|
|
|
17
17
|
/** Índice 0 = domingo, para alinear con Date.getDay(). */
|
|
18
18
|
const DEFAULT_WEEKDAY_NAMES = exports.DEFAULT_WEEKDAY_NAMES = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
|
|
19
|
-
/** Compara sólo año/mes/día, ignorando hora — dos Date del mismo día son "iguales". */
|
|
20
|
-
function isSameDay(a, b) {
|
|
21
|
-
return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
22
|
-
}
|
|
23
19
|
function startOfDay(d) {
|
|
24
20
|
return new Date(d.getFullYear(), d.getMonth(), d.getDate());
|
|
25
21
|
}
|
|
26
22
|
|
|
27
|
-
/**
|
|
28
|
-
function
|
|
29
|
-
|
|
30
|
-
|
|
23
|
+
/** Timestamp del día, para comparar sin volver a crear Date en cada celda. */
|
|
24
|
+
function dayTime(d) {
|
|
25
|
+
return startOfDay(d).getTime();
|
|
26
|
+
}
|
|
27
|
+
function dayTimeOf(d) {
|
|
28
|
+
return d ? dayTime(d) : undefined;
|
|
31
29
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
return
|
|
30
|
+
|
|
31
|
+
/** Milisegundos que faltan para la próxima medianoche local. */
|
|
32
|
+
function msUntilNextMidnight(from) {
|
|
33
|
+
const next = new Date(from.getFullYear(), from.getMonth(), from.getDate() + 1);
|
|
34
|
+
return next.getTime() - from.getTime();
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/** Número de mes absoluto (año * 12 + mes), para comparar meses con un `<`. */
|
|
38
|
+
function monthIndex(d) {
|
|
39
|
+
return d.getFullYear() * 12 + d.getMonth();
|
|
37
40
|
}
|
|
38
41
|
|
|
39
42
|
/**
|
|
@@ -136,6 +139,43 @@ const useStyles = (0, _createStyles.createStyles)(theme => ({
|
|
|
136
139
|
opacity: 0.4
|
|
137
140
|
}
|
|
138
141
|
}));
|
|
142
|
+
/**
|
|
143
|
+
* Una celda del calendario. Va memoizada aparte porque el mes entero son 42
|
|
144
|
+
* celdas: sin esto, cualquier render del padre reconcilia las 42.
|
|
145
|
+
*/
|
|
146
|
+
const DayCell = /*#__PURE__*/(0, _react.memo)(({
|
|
147
|
+
day,
|
|
148
|
+
label,
|
|
149
|
+
selected,
|
|
150
|
+
inRange,
|
|
151
|
+
isRangeStart,
|
|
152
|
+
isRangeEnd,
|
|
153
|
+
isToday,
|
|
154
|
+
disabled,
|
|
155
|
+
allowFontScaling,
|
|
156
|
+
styles,
|
|
157
|
+
onPress
|
|
158
|
+
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
159
|
+
style: [styles.cell, (inRange || isRangeStart || isRangeEnd) && styles.cellInRange, isRangeStart && styles.cellRangeStart, isRangeEnd && styles.cellRangeEnd],
|
|
160
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
161
|
+
style: [styles.dayButton, selected && styles.daySelected, !selected && isToday && styles.dayToday],
|
|
162
|
+
onPress: () => onPress(day),
|
|
163
|
+
disabled: disabled,
|
|
164
|
+
activeOpacity: 0.7,
|
|
165
|
+
accessibilityRole: "button",
|
|
166
|
+
accessibilityLabel: label,
|
|
167
|
+
accessibilityState: {
|
|
168
|
+
selected,
|
|
169
|
+
disabled
|
|
170
|
+
},
|
|
171
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
172
|
+
allowFontScaling: allowFontScaling,
|
|
173
|
+
style: [styles.dayText, inRange && styles.dayTextInRange, selected && styles.dayTextSelected, disabled && styles.dayTextDisabled],
|
|
174
|
+
children: day.getDate()
|
|
175
|
+
})
|
|
176
|
+
})
|
|
177
|
+
}));
|
|
178
|
+
DayCell.displayName = 'DayCell';
|
|
139
179
|
|
|
140
180
|
/**
|
|
141
181
|
* DatePicker
|
|
@@ -152,24 +192,27 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.memo)(({
|
|
|
152
192
|
minDate,
|
|
153
193
|
maxDate,
|
|
154
194
|
defaultMonth,
|
|
155
|
-
monthNames
|
|
156
|
-
weekdayNames
|
|
195
|
+
monthNames,
|
|
196
|
+
weekdayNames,
|
|
157
197
|
firstDayOfWeek = 0,
|
|
198
|
+
onVisibleMonthChange,
|
|
158
199
|
style,
|
|
159
200
|
testID
|
|
160
201
|
}) => {
|
|
161
|
-
const colors = (0, _UIProvider.useColors)();
|
|
162
202
|
const styles = useStyles();
|
|
203
|
+
const labels = (0, _UIProvider.useLabels)();
|
|
163
204
|
const allowFontScaling = (0, _UIProvider.useAllowFontScaling)();
|
|
164
205
|
const isRange = mode === 'range';
|
|
165
|
-
const
|
|
206
|
+
const months = monthNames ?? labels.months;
|
|
207
|
+
const weekdays = weekdayNames ?? labels.weekdaysShort;
|
|
208
|
+
const handlePress = (0, _react.useCallback)(day => {
|
|
166
209
|
if (!isRange) {
|
|
167
210
|
onChange?.(day);
|
|
168
211
|
return;
|
|
169
212
|
}
|
|
170
213
|
// Primer toque (o rango ya cerrado, o toque antes del inicio): arranca
|
|
171
214
|
// un rango nuevo. Segundo toque en adelante: lo cierra.
|
|
172
|
-
if (!range?.start || range.end ||
|
|
215
|
+
if (!range?.start || range.end || dayTime(day) < dayTime(range.start)) {
|
|
173
216
|
onRangeChange?.({
|
|
174
217
|
start: day
|
|
175
218
|
});
|
|
@@ -179,14 +222,51 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.memo)(({
|
|
|
179
222
|
end: day
|
|
180
223
|
});
|
|
181
224
|
}
|
|
182
|
-
};
|
|
183
|
-
const
|
|
184
|
-
const [visibleMonth, setVisibleMonth] = (0, _react.useState)(() => new Date(
|
|
185
|
-
|
|
225
|
+
}, [isRange, onChange, onRangeChange, range?.start, range?.end]);
|
|
226
|
+
const anchor = value ?? range?.start ?? defaultMonth;
|
|
227
|
+
const [visibleMonth, setVisibleMonth] = (0, _react.useState)(() => new Date((anchor ?? new Date()).getFullYear(), (anchor ?? new Date()).getMonth(), 1));
|
|
228
|
+
|
|
229
|
+
// La fecha elegida puede cambiar desde afuera (uso controlado): sin esto,
|
|
230
|
+
// el calendario se quedaba clavado en el mes con el que montó.
|
|
231
|
+
const anchorMonth = anchor ? monthIndex(anchor) : undefined;
|
|
232
|
+
const lastAnchorMonth = (0, _react.useRef)(anchorMonth);
|
|
233
|
+
(0, _react.useEffect)(() => {
|
|
234
|
+
if (anchorMonth === undefined || anchorMonth === lastAnchorMonth.current) return;
|
|
235
|
+
lastAnchorMonth.current = anchorMonth;
|
|
236
|
+
setVisibleMonth(new Date(Math.floor(anchorMonth / 12), anchorMonth % 12, 1));
|
|
237
|
+
}, [anchorMonth]);
|
|
238
|
+
|
|
239
|
+
// "Hoy" se recalcula en la próxima medianoche: una app que queda abierta
|
|
240
|
+
// toda la noche marcaba el día anterior.
|
|
241
|
+
const [todayTs, setTodayTs] = (0, _react.useState)(() => dayTime(new Date()));
|
|
242
|
+
(0, _react.useEffect)(() => {
|
|
243
|
+
const timer = setTimeout(() => setTodayTs(dayTime(new Date())), msUntilNextMidnight(new Date()));
|
|
244
|
+
return () => clearTimeout(timer);
|
|
245
|
+
}, [todayTs]);
|
|
186
246
|
const grid = (0, _react.useMemo)(() => buildMonthGrid(visibleMonth.getFullYear(), visibleMonth.getMonth(), firstDayOfWeek), [visibleMonth, firstDayOfWeek]);
|
|
187
|
-
const orderedWeekdays = (0, _react.useMemo)(() => firstDayOfWeek === 0 ?
|
|
188
|
-
|
|
189
|
-
|
|
247
|
+
const orderedWeekdays = (0, _react.useMemo)(() => firstDayOfWeek === 0 ? weekdays : [...weekdays.slice(1), weekdays[0]], [weekdays, firstDayOfWeek]);
|
|
248
|
+
|
|
249
|
+
// Los límites se resuelven una vez y no 42 veces por render: comparar
|
|
250
|
+
// timestamps sale gratis, crear un Date por celda no.
|
|
251
|
+
const bounds = (0, _react.useMemo)(() => ({
|
|
252
|
+
min: dayTimeOf(minDate),
|
|
253
|
+
max: dayTimeOf(maxDate),
|
|
254
|
+
start: dayTimeOf(range?.start),
|
|
255
|
+
end: dayTimeOf(range?.end),
|
|
256
|
+
selected: dayTimeOf(value)
|
|
257
|
+
}), [minDate, maxDate, range?.start, range?.end, value]);
|
|
258
|
+
const shiftMonth = delta => setVisibleMonth(m => {
|
|
259
|
+
const next = new Date(m.getFullYear(), m.getMonth() + delta, 1);
|
|
260
|
+
onVisibleMonthChange?.(next);
|
|
261
|
+
return next;
|
|
262
|
+
});
|
|
263
|
+
|
|
264
|
+
// Un mes entero fuera de los límites no tiene nada que elegir: la flecha
|
|
265
|
+
// que lleva ahí se apaga en vez de dejar navegar al vacío.
|
|
266
|
+
const visibleIndex = monthIndex(visibleMonth);
|
|
267
|
+
const canGoBack = !minDate || visibleIndex > monthIndex(minDate);
|
|
268
|
+
const canGoForward = !maxDate || visibleIndex < monthIndex(maxDate);
|
|
269
|
+
const monthLabel = `${months[visibleMonth.getMonth()]} ${visibleMonth.getFullYear()}`;
|
|
190
270
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
191
271
|
style: [styles.container, style],
|
|
192
272
|
testID: testID,
|
|
@@ -195,6 +275,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.memo)(({
|
|
|
195
275
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
|
|
196
276
|
iconName: "chevron-left",
|
|
197
277
|
accessibilityLabel: "Previous month",
|
|
278
|
+
disabled: !canGoBack,
|
|
198
279
|
onPress: () => shiftMonth(-1)
|
|
199
280
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
200
281
|
allowFontScaling: allowFontScaling,
|
|
@@ -204,6 +285,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.memo)(({
|
|
|
204
285
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
|
|
205
286
|
iconName: "chevron-right",
|
|
206
287
|
accessibilityLabel: "Next month",
|
|
288
|
+
disabled: !canGoForward,
|
|
207
289
|
onPress: () => shiftMonth(1)
|
|
208
290
|
})]
|
|
209
291
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
@@ -219,31 +301,28 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.memo)(({
|
|
|
219
301
|
if (!day) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
220
302
|
style: styles.cell
|
|
221
303
|
}, cellIndex);
|
|
222
|
-
const
|
|
223
|
-
const
|
|
224
|
-
const
|
|
225
|
-
const
|
|
226
|
-
const
|
|
227
|
-
const
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
children: day.getDate()
|
|
245
|
-
})
|
|
246
|
-
})
|
|
304
|
+
const t = dayTime(day);
|
|
305
|
+
const disabled = bounds.min !== undefined && t < bounds.min || bounds.max !== undefined && t > bounds.max;
|
|
306
|
+
const isStart = isRange && bounds.start === t;
|
|
307
|
+
const isEnd = isRange && bounds.end === t;
|
|
308
|
+
const closed = isRange && bounds.start !== undefined && bounds.end !== undefined;
|
|
309
|
+
const between = closed && t > bounds.start && t < bounds.end;
|
|
310
|
+
const selected = isRange ? isStart || isEnd : bounds.selected === t;
|
|
311
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(DayCell, {
|
|
312
|
+
day: day,
|
|
313
|
+
label: `${months[day.getMonth()]} ${day.getDate()}, ${day.getFullYear()}`,
|
|
314
|
+
selected: selected
|
|
315
|
+
// Un día fuera de los límites no se pinta como parte del
|
|
316
|
+
// rango: se ve deshabilitado, y eso es lo que es.
|
|
317
|
+
,
|
|
318
|
+
inRange: between && !disabled,
|
|
319
|
+
isRangeStart: !!closed && isStart && !disabled,
|
|
320
|
+
isRangeEnd: isEnd && !disabled,
|
|
321
|
+
isToday: t === todayTs,
|
|
322
|
+
disabled: disabled,
|
|
323
|
+
allowFontScaling: allowFontScaling,
|
|
324
|
+
styles: styles,
|
|
325
|
+
onPress: handlePress
|
|
247
326
|
}, cellIndex);
|
|
248
327
|
})
|
|
249
328
|
}, rowIndex))]
|