native-pytech 1.0.189 → 1.0.191

package/dist/libs/editPage/index.d.ts

@@ -1,6 +1,6 @@
 import Wrapper from './src/components/Wrapper';
 import Item from './src/components/Item';
-import ItemDate from './src/components/ItemDate/DatePicker';
+import ItemDate from './src/components/ItemDate';
 type Component = typeof Wrapper & {
     Item: typeof Item;
     ItemDate: typeof ItemDate;

package/dist/libs/editPage/index.js

@@ -1,6 +1,6 @@
 import Wrapper from './src/components/Wrapper';
 import Item from './src/components/Item';
-import ItemDate from './src/components/ItemDate/DatePicker';
+import ItemDate from './src/components/ItemDate';
 const Screen = Wrapper;
 Screen.Item = Item;
 Screen.ItemDate = ItemDate;

package/dist/libs/editPage/src/components/ItemDate/Picker/Date/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/Picker/Date/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 → Picker/Date}/index.js

@@ -1,9 +1,9 @@
 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';
+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);

package/dist/libs/editPage/src/components/ItemDate/Picker/Time/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/Picker/Time/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/Picker/Time/index.ios.js

@@ -0,0 +1,4 @@
+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')]} displayedComponents={['hourAndMinute']}/>));

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

@@ -0,0 +1,36 @@
+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 [hours, minutes] = value_str.split(':').map(Number);
+        if (Number.isNaN(hours) || Number.isNaN(minutes))
+            return;
+        const value = new Date();
+        value.setHours(hours, minutes, 0, 0);
+        onValueChange?.(value);
+    }, []);
+    return (<Table.Option id={label ?? ''} colorScheme={colorScheme} childrenLeft={<Table.Option.Components.Text text={label ?? 'Seleccione una hora'}/>} childrenRight={(<>
+                    <Pressable onPress={() => inputRef.current?.showPicker()} style={[styles.container, { backgroundColor: Colors.especiales.azul }]}>
+                        <Table.Option.Components.Text text={Formats.dateToTextFormat(selection, 'HH:mm')} style={{ color: 'white', userSelect: 'none' }}/>
+                        <input ref={inputRef} type="date" value={Formats.dateToTextFormat(selection, 'HH:mm')} 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/index.d.ts

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

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

@@ -1,8 +1,9 @@
 import { memo, useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import { usePage } from '../../context/page';
 import Hooks from '../../../../../libs/constants/hooks';
-import DatePicker from './DatePicker';
-export default memo(({ itemKey, label, selection, defaultValue, minDate, maxDate, onValueChange, }) => {
+import DatePicker from './Picker/Date';
+import TimePicker from './Picker/Time';
+export default memo(({ itemKey, label, selection, defaultValue, minDate, maxDate, type = 'date', onValueChange, }) => {
     const { store, registerItem } = usePage();
     const [_selection, setSelection] = useState(selection);
     const currentDate = useMemo(() => _selection ?? defaultValue ?? new Date(), [_selection, defaultValue]);
@@ -34,5 +35,12 @@ export default memo(({ itemKey, label, selection, defaultValue, minDate, maxDate
         });
         onValueChange?.(value);
     }, []);
-    return (<DatePicker label={label} selection={currentDateRanged} onValueChange={_onValueChange} minDate={minDate} maxDate={maxDate}/>);
+    const props = {
+        label: label,
+        selection: currentDateRanged,
+        onValueChange: _onValueChange,
+        minDate: minDate,
+        maxDate: maxDate,
+    };
+    return (type === 'date' ? <DatePicker {...props}/> : <TimePicker {...props}/>);
 });

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

@@ -1,4 +1,4 @@
-import DatePickerProps from './DatePicker/types';
+import DatePickerProps from './Picker/types';
 type Props = Omit<DatePickerProps, 'selection'> & {
     /**
         identification key of the item.
@@ -13,5 +13,10 @@ type Props = Omit<DatePickerProps, 'selection'> & {
         Selection of the date picker.
     */
     selection?: Date;
+    /**
+        Type of the date picker.
+        @default 'date'
+    */
+    type?: 'date' | 'time';
 };
 export default Props;

package/dist/libs/editPage/src/components/ItemTime/TimePicker/index.ios.js

@@ -0,0 +1,4 @@
+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')]} displayedComponents={['hourAndMinute']}/>));

package/dist/libs/editPage/src/components/ItemTime/TimePicker/index.js

@@ -0,0 +1,36 @@
+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 [hours, minutes] = value_str.split(':').map(Number);
+        if (Number.isNaN(hours) || Number.isNaN(minutes))
+            return;
+        const value = new Date();
+        value.setHours(hours, minutes, 0, 0);
+        onValueChange?.(value);
+    }, []);
+    return (<Table.Option id={label ?? ''} colorScheme={colorScheme} childrenLeft={<Table.Option.Components.Text text={label ?? 'Seleccione una hora'}/>} childrenRight={(<>
+                    <Pressable onPress={() => inputRef.current?.showPicker()} style={[styles.container, { backgroundColor: Colors.especiales.azul }]}>
+                        <Table.Option.Components.Text text={Formats.dateToTextFormat(selection, 'HH:mm')} style={{ color: 'white', userSelect: 'none' }}/>
+                        <input ref={inputRef} type="date" value={Formats.dateToTextFormat(selection, 'HH:mm')} 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/ItemTime/TimePicker/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/ItemTime/TimePicker/types.js

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

package/dist/libs/editPage/src/components/ItemTime/index.d.ts

@@ -0,0 +1,3 @@
+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/ItemTime/index.js

@@ -0,0 +1,38 @@
+import { memo, useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import { usePage } from '../../context/page';
+import Hooks from '../../../../../libs/constants/hooks';
+import DatePicker from './TimePicker';
+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 label={label} selection={currentDateRanged} onValueChange={_onValueChange} minDate={minDate} maxDate={maxDate}/>);
+});

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

@@ -0,0 +1,17 @@
+import DatePickerProps from './TimePicker/types';
+type Props = Omit<DatePickerProps, 'selection'> & {
+    /**
+        identification key of the item.
+    */
+    itemKey?: string;
+    /**
+        The value that applies when selection is undefined.
+        @default Date()
+    */
+    defaultValue?: Date;
+    /**
+        Selection of the date picker.
+    */
+    selection?: Date;
+};
+export default Props;

package/dist/libs/editPage/src/components/ItemTime/types.js

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

package/package.json

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