native-pytech 1.0.185 → 1.0.190

package/dist/libs/editPage/src/components/ItemDate/DatePicker/index.d.ts

@@ -0,0 +1,3 @@
+import type Props from './types';
+declare const _default: import("react").MemoExoticComponent<({ label, selection, minDate, maxDate, onValueChange, }: Props) => import("react").JSX.Element>;
+export default _default;

package/dist/libs/editPage/src/components/ItemDate/DatePicker/index.ios.d.ts

@@ -0,0 +1,3 @@
+import type Props from './types';
+declare const _default: import("react").MemoExoticComponent<({ label, selection, minDate, maxDate, onValueChange }: Props) => import("react").JSX.Element>;
+export default _default;

package/dist/libs/editPage/src/components/ItemDate/DatePicker/index.ios.js

@@ -0,0 +1,7 @@
+import { DatePicker } from '@expo/ui/swift-ui';
+import { memo } from 'react';
+import { environment } from '@expo/ui/swift-ui/modifiers';
+export default memo(({ label, selection, minDate, maxDate, onValueChange }) => (<DatePicker title={label} selection={selection} onDateChange={onValueChange} modifiers={[environment('locale', 'es_ES')]} range={{
+        start: minDate,
+        end: maxDate,
+    }}/>));

package/dist/libs/editPage/src/components/ItemDate/DatePicker/index.js

@@ -0,0 +1,33 @@
+import { memo, useCallback, useRef } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import Table from '../../../../../../libs/table';
+import { useApp } from '../../../../../../libs/providers/App';
+import Formats from '../../../../../../libs/constants/formats';
+import Colors from '../../../../../../libs/constants/colors';
+export default memo(({ label, selection, minDate, maxDate, onValueChange, }) => {
+    const { colorScheme } = useApp();
+    const inputRef = useRef(null);
+    const _onValueChange = useCallback((value_str) => {
+        const [year, month, day] = value_str.split('-').map(Number);
+        const value = new Date(year, month - 1, day);
+        onValueChange?.(value);
+    }, []);
+    return (<Table.Option id={label ?? ''} colorScheme={colorScheme} childrenLeft={<Table.Option.Components.Text text={label ?? 'Seleccione una fecha'}/>} childrenRight={(<>
+                    <Pressable onPress={() => inputRef.current?.showPicker()} style={[styles.container, { backgroundColor: Colors.especiales.azul }]}>
+                        <Table.Option.Components.Text text={Formats.dateToTextFormat(selection, 'dd/MM/yyyy')} style={{ color: 'white', userSelect: 'none' }}/>
+                        <input ref={inputRef} type="date" value={Formats.dateToTextFormat(selection, 'yyyy-MM-dd')} onChange={(e) => _onValueChange(e.target.value)} style={{
+                all: 'unset',
+                visibility: 'hidden',
+                width: 0,
+                position: 'absolute'
+            }}/>
+                    </Pressable>
+                </>)}/>);
+});
+const styles = StyleSheet.create({
+    container: {
+        padding: 7,
+        paddingHorizontal: 30,
+        borderRadius: 20
+    },
+});

package/dist/libs/editPage/src/components/ItemDate/DatePicker/types.d.ts

@@ -0,0 +1,23 @@
+type Props = {
+    /**
+        Title of the date picker.
+    */
+    label?: string;
+    /**
+        Selection of the date picker.
+    */
+    selection: Date;
+    /**
+        Minimum date allowed.
+    */
+    minDate?: Date;
+    /**
+        Maximum date allowed.
+    */
+    maxDate?: Date;
+    /**
+        Callback function to be called when the value changes.
+    */
+    onValueChange?: (value: Date) => void;
+};
+export default Props;

package/dist/libs/editPage/src/components/ItemDate/DatePicker/types.js

@@ -0,0 +1 @@
+export {};

package/dist/libs/editPage/src/components/ItemDate/index.js

@@ -1,30 +1,31 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { Pressable, StyleSheet } from 'react-native';
-import Table from '../../../../../libs/table';
-import { useApp } from '../../../../../libs/providers/App';
-import Formats from '../../../../../libs/constants/formats';
+import { memo, useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import { usePage } from '../../context/page';
-import Colors from '../../../../../libs/constants/colors';
+import Hooks from '../../../../../libs/constants/hooks';
+import DatePicker from './DatePicker';
 export default memo(({ itemKey, label, selection, defaultValue, minDate, maxDate, onValueChange, }) => {
-    const { colorScheme } = useApp();
     const { store, registerItem } = usePage();
-    const [_selection, setSelection] = useState(selection ?? defaultValue ?? new Date());
-    const inputRef = useRef(null);
+    const [_selection, setSelection] = useState(selection);
+    const currentDate = useMemo(() => _selection ?? defaultValue ?? new Date(), [_selection, defaultValue]);
+    const currentDateRanged = useMemo(() => {
+        if (maxDate && currentDate > maxDate)
+            return maxDate;
+        if (minDate && currentDate < minDate)
+            return minDate;
+        return currentDate;
+    }, [currentDate, minDate, maxDate]);
     // Key
     const keyRef = useRef(itemKey);
     useEffect(() => {
         keyRef.current = registerItem(itemKey);
-        _onValueChange(Formats.dateToTextFormat(_selection, 'yyyy-MM-dd'));
+        _onValueChange(currentDate);
     }, []);
     // Hooks
-    useEffect(() => {
-        setSelection(selection ?? defaultValue ?? new Date());
-        if (selection === undefined)
-            _onValueChange(Formats.dateToTextFormat(_selection, 'yyyy-MM-dd'));
-    }, [selection]);
-    const _onValueChange = useCallback((value_str) => {
-        const [year, month, day] = value_str.split('-').map(Number);
-        const value = new Date(year, month - 1, day);
+    useEffect(() => setSelection(selection), [selection]);
+    Hooks.useEffectWithoutFirstRender(() => {
+        setSelection(currentDateRanged);
+        _onValueChange(currentDateRanged);
+    }, [currentDateRanged]);
+    const _onValueChange = useCallback((value) => {
         setSelection(value);
         store.values[keyRef.current ?? 0].set({
             value: value,
@@ -33,22 +34,5 @@ export default memo(({ itemKey, label, selection, defaultValue, minDate, maxDate
         });
         onValueChange?.(value);
     }, []);
-    return (<Table.Option id={label ?? ''} colorScheme={colorScheme} childrenLeft={<Table.Option.Components.Text text={label ?? 'Seleccione una fecha'}/>} childrenRight={(<>
-                    <Pressable onPress={() => inputRef.current?.showPicker()} style={[styles.container, { backgroundColor: Colors.especiales.azul }]}>
-                        <Table.Option.Components.Text text={Formats.dateToTextFormat(_selection, 'dd/MM/yyyy')} style={{ color: 'white', userSelect: 'none' }}/>
-                        <input ref={inputRef} type="date" value={Formats.dateToTextFormat(_selection, 'yyyy-MM-dd')} onChange={(e) => _onValueChange(e.target.value)} style={{
-                all: 'unset',
-                visibility: 'hidden',
-                width: 0,
-                position: 'absolute'
-            }}/>
-                    </Pressable>
-                </>)}/>);
-});
-const styles = StyleSheet.create({
-    container: {
-        padding: 7,
-        paddingHorizontal: 30,
-        borderRadius: 20
-    },
+    return (<DatePicker label={label} selection={currentDateRanged} onValueChange={_onValueChange} minDate={minDate} maxDate={maxDate}/>);
 });

package/dist/libs/editPage/src/components/ItemDate/types.d.ts

@@ -1,32 +1,17 @@
-type Props = {
+import DatePickerProps from './DatePicker/types';
+type Props = Omit<DatePickerProps, 'selection'> & {
     /**
         identification key of the item.
     */
     itemKey?: string;
-    /**
-        Title of the date picker.
-    */
-    label?: string;
-    /**
-        Selection of the date picker.
-    */
-    selection?: Date;
     /**
         The value that applies when selection is undefined.
         @default Date()
     */
     defaultValue?: Date;
     /**
-        Minimum date allowed.
-    */
-    minDate?: Date;
-    /**
-        Maximum date allowed.
-    */
-    maxDate?: Date;
-    /**
-        Callback function to be called when the value changes.
+        Selection of the date picker.
     */
-    onValueChange?: (value: Date) => void;
+    selection?: Date;
 };
 export default Props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-pytech",
-  "version": "1.0.185",
+  "version": "1.0.190",
   "description": "Libreria de React Native Pytech",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/libs/editPage/src/components/ItemDate/index.ios.d.ts

@@ -1,3 +0,0 @@
-import type Props from './types';
-declare const _default: import("react").MemoExoticComponent<({ itemKey, label, selection, defaultValue, minDate, maxDate, onValueChange, }: Props) => import("react").JSX.Element>;
-export default _default;

package/dist/libs/editPage/src/components/ItemDate/index.ios.js

@@ -1,42 +0,0 @@
-import { DatePicker } from '@expo/ui/swift-ui';
-import { memo, useCallback, useEffect, useRef, useState, useMemo } from 'react';
-import { environment } from '@expo/ui/swift-ui/modifiers';
-import { usePage } from '../../context/page';
-import Hooks from '../../../../../libs/constants/hooks';
-export default memo(({ itemKey, label, selection, defaultValue, minDate, maxDate, onValueChange, }) => {
-    const { store, registerItem } = usePage();
-    const [_selection, setSelection] = useState(selection);
-    const currentDate = useMemo(() => _selection ?? defaultValue ?? new Date(), [_selection, defaultValue]);
-    const currentDateRanged = useMemo(() => {
-        if (maxDate && currentDate > maxDate)
-            return maxDate;
-        if (minDate && currentDate < minDate)
-            return minDate;
-        return currentDate;
-    }, [currentDate, minDate, maxDate]);
-    // Key
-    const keyRef = useRef(itemKey);
-    useEffect(() => {
-        keyRef.current = registerItem(itemKey);
-        _onValueChange(currentDate);
-    }, []);
-    // Hooks
-    useEffect(() => setSelection(selection), [selection]);
-    Hooks.useEffectWithoutFirstRender(() => {
-        setSelection(currentDateRanged);
-        _onValueChange(currentDateRanged);
-    }, [currentDateRanged]);
-    const _onValueChange = useCallback((value) => {
-        setSelection(value);
-        store.values[keyRef.current ?? 0].set({
-            value: value,
-            hasChanged: value.getTime() !== selection?.getTime(),
-            isValid: true,
-        });
-        onValueChange?.(value);
-    }, []);
-    return (<DatePicker title={label} selection={currentDate} onDateChange={_onValueChange} modifiers={[environment('locale', 'es_ES')]} range={{
-            start: minDate,
-            end: maxDate,
-        }}/>);
-});