@m4l/components 0.1.35 → 0.1.37

package/src/components/formatters/dicctionary.ts

@@ -0,0 +1,14 @@
+import { Dictionary } from '@m4l/core';
+
+export function getFormattersComponentsDictionary() {
+    return ['formatters'];
+}
+
+export const defaultFormattersDictionary: Dictionary = {
+    pager: {
+        boolean_yes: 'Yes',
+        boolean_no: 'No',
+        boolean_true: 'True',
+        boolean_false: 'False',
+    },
+};

package/src/components/formatters/index.ts

@@ -0,0 +1,7 @@
+export { BooleanFormatter } from './BooleanFormatter';
+export { DateFormatter } from './DateFormatter';
+export { UncertaintyFormatter, getUncertaintyFormat } from './UncertaintyFormatter';
+export { PointsFormatter, getFormatPoints } from './PointsFormatter';
+export { PriceFormatter, getFormatPrice } from './PriceFormatter';
+
+export type { UncertaintyRange } from './UncertaintyFormatter/types';

package/src/components/formatters/types.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+
+export type ComponentForrmaterType =
+    | 'div'
+    | 'span'
+    | ((props: PropsWithChildren<any>) => JSX.Element);

package/src/components/hook-form/RHFAutocomplete/dictionary.ts

@@ -0,0 +1,12 @@
+import { Dictionary } from '@m4l/core';
+
+export function getRHFAutocompleteComponentsDictionary() {
+    return ['rhf_autocomplete'];
+}
+
+export const defaultRHFAutocompleteDictionary: Dictionary = {
+    rhf_autocomplete: {
+        loading_options: 'Loading…',
+        no_options: 'No options found',
+    },
+};

package/src/components/hook-form/RHFAutocomplete/index.tsx

@@ -0,0 +1,241 @@
+// react
+
+// m4l
+import { useModuleDictionary, useModuleSkeleton } from '@m4l/core';
+// form
+import { Controller, useFormContext } from 'react-hook-form';
+// @mui
+import { Autocomplete, AutocompleteCloseReason, CircularProgress, TextField } from '@mui/material';
+
+//types
+import type { RHFAutocompleteProps } from './types';
+import { WrapperAutocomplete } from './styles';
+import { Image } from '../../Image';
+import { KeyboardEvent, useEffect, useMemo, useState } from 'react';
+import { withRenderOption } from './subcomponents/RenderOption';
+import { SkeletonRHFAutocomplete } from './subcomponents/Skeleton';
+
+export function RHFAutocomplete<T>(props: RHFAutocompleteProps<T>) {
+    const {
+        name,
+        getOptionLabel,
+        isOptionEqualToValue,
+        label,
+        skeletonWidth = 100,
+        skeletonHeight = '18px',
+        options,
+        disabled,
+        getOptionUrlImage,
+        imageWidth = '24px',
+        imageHeight = '24px',
+        onOpen,
+        onClose,
+        loading,
+
+        onChangeFilterParmsLocal,
+
+        ...other
+    } = props;
+    const { getLabel } = useModuleDictionary();
+    const isSkeleton = useModuleSkeleton();
+    // const {  }  = props;
+    const { control } = useFormContext();
+    const withImage = useMemo(() => getOptionUrlImage !== undefined, [getOptionUrlImage]);
+
+    const [open, setOpen] = useState(false);
+
+    // const initialValue = getValues(name);
+
+    const onCloseLocal = (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => {
+        setOpen(false);
+        if (onClose) onClose(event, reason);
+    };
+
+    const onOpenLocal = (event: React.SyntheticEvent) => {
+        setOpen(true);
+        if (onOpen) onOpen(event);
+    };
+
+    const getOptionLabelLocal = (option: T | null) => {
+        if (option === undefined || option === null) {
+            return '';
+        }
+        //
+        return getOptionLabel(option);
+    };
+
+    const getOptionUrlImageLocal = (option: T | null) => {
+        if (option === undefined || option === null || getOptionUrlImage === undefined) {
+            return '';
+        }
+        //
+        return getOptionUrlImage(option);
+    };
+
+    const isOptionEqualToValueLocal = (option: T, value: T | null) => {
+        if (value === undefined || value === null || option === null) {
+            return false;
+        }
+        //
+        return isOptionEqualToValue(option, value);
+    };
+
+    if (isSkeleton) {
+        return (
+            <SkeletonRHFAutocomplete
+                withImage={withImage}
+                skeletonWidth={skeletonWidth}
+                skeletonHeight={skeletonHeight}
+                imageWidth={imageWidth}
+                imageHeight={imageHeight}
+            />
+        );
+    }
+
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field: { onChange, value }, fieldState: { error } }) => {
+                //
+                const [inputValue, setInputValue] = useState(getOptionLabelLocal(value));
+
+                useEffect(() => {
+                    //Corrige un bug, cuando se estable en null programaticamente desde afuera, el input se queda pegado con el valor anterior
+                    if (!open && value === null && inputValue !== '') {
+                        setInputValue('');
+                    }
+
+                    if (
+                        !open &&
+                        value !== null &&
+                        options.length === 0 &&
+                        onChangeFilterParmsLocal
+                    ) {
+                        onChangeFilterParmsLocal(getOptionLabelLocal(value), 'reset');
+                    }
+                }, [value]);
+
+                const checkKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+                    if (e.code === 'Enter') e.preventDefault();
+                };
+
+                return (
+                    <WrapperAutocomplete className="m4l_rhf_autocomplete">
+                        <Autocomplete
+                            onKeyDown={checkKeyDown}
+                            autoComplete
+                            // *** autoComplete ***
+                            // If true, the portion of the selected suggestion that has not been typed by the user,
+                            // known as the completion string, appears inline after the input cursor in the textbox.
+                            // The inline completion string is visually highlighted and has a selected state.
+
+                            autoSelect={false}
+                            // *** autoSelect ***
+                            //If true, the selected option becomes the value of the input when the Autocomplete
+                            //loses focus unless the user chooses a different option or changes the character string in the input.
+                            //Si el usuario cambia con las flechas la seleccion, el componente selecciona el item al perder el focus
+                            //Activado: Si el usuario escribe algo que puede ser contenido en un item,
+                            //     o lo selecciona sin darle click, o mueve las flechas para cambiar de item
+                            //     al Blur selecciona el item, No es conveniente para el incremental
+                            //Desactivado solo cambia el item, cuando se da click en el item o enter
+                            options={options}
+                            getOptionLabel={getOptionLabelLocal}
+                            inputValue={inputValue}
+                            clearOnBlur={false}
+                            onInputChange={(_event, newValue, reason) => {
+                                if (reason === 'input') {
+                                    //Solo se actualiza el input si el usuario escribe , si es reset se descarta,
+                                    //porque no se recuerda el item anterior, debido a que puede salir de la lista de items
+                                    //Por eso se debe deshabilitar el autoselect, para que no que seleccionado un item, que no está en la lista
+                                    setInputValue(newValue);
+                                    if (onChangeFilterParmsLocal) {
+                                        onChangeFilterParmsLocal(newValue, reason);
+                                    }
+                                } else {
+                                    //con la propiedad autoselect = true
+                                    //           Se da reset cuando el usuario pasa por encima de una opcion tratando de seleccionar otra opcion y cierra el combo,
+                                    //           trata de dejar el opcion anteriormente seleccionada.
+                                    //con la propiedad autoselect = false
+                                    //           esta opcion se da cuando el selecciona una opcion con click o enter.
+                                }
+                                //Garantiza que despuees de escribir en el input o cuando se resetee, se ponga en null el value.
+                                //El componente MUI Autocomplete envia despues si el usuario seleccion una opcion, el eveento onChange que cambia de nuevo el value
+                                onChange(null);
+                            }}
+                            // freeSolo
+                            // defaultValue={initialValue}
+                            isOptionEqualToValue={isOptionEqualToValueLocal}
+                            disableClearable
+                            value={value || null} // Muy importante para que sea controlled
+                            onOpen={onOpenLocal}
+                            onClose={onCloseLocal}
+                            onChange={(_e, val) => {
+                                setInputValue(getOptionLabelLocal(val)); //Actualizar el input porque se desactivó actualizar el input en el reset
+                                onChange(val);
+                            }}
+                            filterOptions={onChangeFilterParmsLocal ? x => x : undefined}
+                            //Se desactiva el filtro del componente cuando la busqueda es basada en el backend
+
+                            loading={loading}
+                            loadingText={getLabel('rhf_autocomplete.loading_options')}
+                            disabled={disabled}
+                            noOptionsText={getLabel('rhf_autocomplete.no_options')}
+                            renderOption={
+                                withImage
+                                    ? withRenderOption(
+                                          getOptionUrlImageLocal,
+                                          imageWidth,
+                                          imageHeight,
+                                      )
+                                    : undefined
+                            }
+                            renderInput={params => {
+                                //const inputProps = { ...params.inputProps };
+                                //inputProps.value = inputValue;
+
+                                return (
+                                    <TextField
+                                        {...params}
+                                        //inputProps={inputProps}
+                                        label={label}
+                                        fullWidth
+                                        SelectProps={{ native: true }}
+                                        InputProps={{
+                                            ...params.InputProps,
+
+                                            startAdornment:
+                                                withImage && value ? (
+                                                    <Image
+                                                        key={'ImageTextField'}
+                                                        src={getOptionUrlImageLocal(value)}
+                                                        width={imageWidth}
+                                                        height={imageHeight}
+                                                    />
+                                                ) : null,
+                                            endAdornment: (
+                                                <>
+                                                    {loading ? (
+                                                        <CircularProgress
+                                                            color="inherit"
+                                                            size={20}
+                                                        />
+                                                    ) : null}
+                                                    {params.InputProps.endAdornment}
+                                                </>
+                                            ),
+                                        }}
+                                        autoComplete="off"
+                                        error={!!error}
+                                        helperText={error?.message}
+                                        {...other}
+                                    />
+                                );
+                            }}
+                        />
+                    </WrapperAutocomplete>
+                );
+            }}
+        />
+    );
+}

package/src/components/hook-form/RHFAutocomplete/styles.tsx

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material/styles';
+
+export const WrapperAutocomplete = styled('div')(({ theme }) => ({
+    display: 'flex',
+    width: '100%',
+    '& .MuiAutocomplete-root': {
+        width: '100%',
+    },
+    '& .m4l_image': {
+        marginLeft: theme.spacing(1.5),
+    },
+}));

package/src/components/hook-form/RHFAutocomplete/subcomponents/RenderOption/index.tsx

@@ -0,0 +1,31 @@
+// react
+import { HTMLAttributes } from 'react';
+// m4l
+
+// form
+
+// @mui
+
+// styled components
+import { WrapperOption } from './styles';
+// interna components
+import Image from '../../../../Image';
+
+//types
+
+import { GetOptionString } from '../../types';
+
+export function withRenderOption<T>(
+    getUrlImage: GetOptionString<T>,
+    imageWidth: string,
+    imageHeight: string,
+) {
+    return function RenderOption(optionProps: HTMLAttributes<HTMLLIElement>, option: T) {
+        return (
+            <WrapperOption {...optionProps}>
+                <Image src={getUrlImage(option)} width={imageWidth} height={imageHeight} />
+                {(optionProps as any).key}
+            </WrapperOption>
+        );
+    };
+}

package/src/components/hook-form/RHFAutocomplete/subcomponents/RenderOption/styles.tsx

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material/styles';
+
+export const WrapperOption = styled('li')(({ theme }) => ({
+    '& .m4l_image': {
+        marginRight: theme.spacing(1.5),
+    },
+}));

package/src/components/hook-form/RHFAutocomplete/subcomponents/Skeleton/index.tsx

@@ -0,0 +1,33 @@
+import { Skeleton } from '@mui/material';
+import { SkeletonContainerText, WrapperSkeletonRHFAutocomplete } from './styles';
+import { SkeletonRHFAutocompleteProps } from './types';
+
+export const SkeletonRHFAutocomplete = (props: SkeletonRHFAutocompleteProps) => {
+    const { withImage, skeletonWidth, skeletonHeight, imageWidth, imageHeight } = props;
+
+    if (withImage) {
+        return (
+            <WrapperSkeletonRHFAutocomplete>
+                <Skeleton
+                    variant={'circular'}
+                    width={imageWidth}
+                    height={imageHeight}
+                    sx={{ minWidth: imageWidth }}
+                />
+                <SkeletonContainerText>
+                    <Skeleton variant="text" width={skeletonWidth} height={skeletonHeight} />
+                </SkeletonContainerText>
+                <Skeleton variant="circular" width={16} height={16} sx={{ minWidth: '16px' }} />
+            </WrapperSkeletonRHFAutocomplete>
+        );
+    }
+
+    return (
+        <WrapperSkeletonRHFAutocomplete>
+            <SkeletonContainerText sx={{ marginLeft: '0px' }}>
+                <Skeleton variant="text" width={skeletonWidth} height={skeletonHeight} />
+            </SkeletonContainerText>
+            <Skeleton variant="circular" width={16} height={16} sx={{ minWidth: '16px' }} />
+        </WrapperSkeletonRHFAutocomplete>
+    );
+};

package/src/components/hook-form/RHFAutocomplete/subcomponents/Skeleton/styles.tsx

@@ -0,0 +1,23 @@
+import { styled } from '@mui/material';
+
+export const WrapperSkeletonRHFAutocomplete = styled('div')(({ theme }) => ({
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: `${theme.spacing(4.5)}`,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: `${theme.spacing(1)}`,
+    padding: `0 ${theme.spacing(2)}`,
+    overflow: 'hidden',
+    [theme.breakpoints.down('md')]: {
+        width: '100%',
+    },
+}));
+
+export const SkeletonContainerText = styled('div')(({ theme }) => ({
+    width: '100%',
+    height: 'auto',
+    overflow: 'hidden',
+    margin: theme.spacing(1.5),
+}));

package/src/components/hook-form/RHFAutocomplete/subcomponents/Skeleton/types.tsx

@@ -0,0 +1,9 @@
+import { RHFAutocompleteProps } from '../../types';
+
+export interface SkeletonRHFAutocompleteProps
+    extends Pick<
+        RHFAutocompleteProps<any>,
+        'skeletonWidth' | 'skeletonHeight' | 'imageWidth' | 'imageHeight'
+    > {
+    withImage: boolean;
+}

package/src/components/hook-form/RHFAutocomplete/types.ts

@@ -0,0 +1,24 @@
+import {
+    AutocompleteCloseReason,
+    AutocompleteInputChangeReason,
+    TextFieldProps,
+} from '@mui/material';
+
+export type GetOptionString<T> = (option: T | null) => string;
+
+export type RHFAutocompleteProps<T> = {
+    name: string;
+    options: Array<T>;
+    getOptionLabel: (option: T) => string;
+    getOptionUrlImage?: (option: T) => string;
+    isOptionEqualToValue: (option: T, value: T) => boolean;
+    skeletonWidth?: string | number;
+    skeletonHeight?: string | number;
+    label: string;
+    imageWidth?: string;
+    imageHeight?: string;
+    loading?: boolean;
+    onOpen?: (event: React.SyntheticEvent) => void;
+    onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
+    onChangeFilterParmsLocal?: (newValue: string, reason: AutocompleteInputChangeReason) => void;
+} & TextFieldProps;

package/src/components/hook-form/RHFAutocompleteAsync/dictionary.ts

@@ -0,0 +1,10 @@
+import { Dictionary } from '@m4l/core';
+import { getRHFAutocompleteComponentsDictionary } from '../RHFAutocomplete/dictionary';
+
+export function getRHFAutocompleteAsyncComponentsDictionary() {
+    return getRHFAutocompleteComponentsDictionary();
+}
+
+export const defaultRHFAutocompleteAsyncDictionary: Dictionary = {
+    rhf_autocomplete_async: {},
+};

package/src/components/hook-form/RHFAutocompleteAsync/index.tsx

@@ -0,0 +1,118 @@
+// react
+import { useCallback, useEffect, useState } from 'react';
+// m4l
+import { getPropertyByString, useNetwork } from '@m4l/core';
+// form
+
+// @mui
+// others
+import debounce from 'lodash/debounce';
+
+//types
+import type { RHFAutocompleteAsyncProps } from './types';
+import { RHFAutocomplete } from '../RHFAutocomplete';
+
+export function RHFAutocompleteAsync<T>(props: RHFAutocompleteAsyncProps<T>) {
+    const {
+        name,
+        endPoint,
+        timeout = 5000,
+        parms,
+        resultField = 'data',
+
+        isRemote = true,
+        onChangeFilterParms,
+        ...other
+    } = props;
+
+    const { networkOperation } = useNetwork();
+
+    const [options, setOptions] = useState<Array<T>>([]);
+
+    const [open, setOpen] = useState(false);
+    const [loading, setIsloading] = useState(false);
+    const [canLoadOptions, setCanLoadOptions] = useState(true);
+
+    const [filterParms, setFilterParms] = useState({});
+
+    const debouncedFilter = useCallback(
+        debounce(
+            newFilterParms => {
+                setCanLoadOptions(true);
+                //setValue(name, null);
+
+                setFilterParms(newFilterParms);
+            },
+
+            300,
+        ),
+        [],
+    );
+
+    const onChangeFilterParmsLocal = (newValue: string) => {
+        if (onChangeFilterParms) {
+            debouncedFilter(onChangeFilterParms(newValue));
+        }
+    };
+
+    useEffect(() => {
+        //Efecto para actualizar cuando cambian los parametros externamente
+        setCanLoadOptions(true);
+    }, [parms, endPoint]);
+
+    useEffect(() => {
+        if (!open || loading) {
+            return;
+        }
+
+        if (!canLoadOptions) {
+            //Solo se carga cuando es la primera vez o si cambian los parametros general o de filtrado.
+            return;
+        }
+
+        setIsloading(true);
+        setOptions([]); //Evita que salga un error de MUI cuando se tiene un value que no corresponde a las acciones cargadas.
+        setCanLoadOptions(false); //
+
+        networkOperation({
+            method: 'GET',
+            endPoint,
+            timeout,
+            parms: { ...parms, ...filterParms },
+            isRemote,
+        })
+            .then((response: any) => {
+                //Aunque haya un cleanUp se deben cargar las opciones, para que esten disponibles para el proximo open
+                const newOptions: Array<T> = getPropertyByString(response, resultField);
+                setOptions(newOptions);
+            })
+            .catch(() => {
+                setCanLoadOptions(true); //Si hubo un error, permitir que se vuelvan a cargar las opciones
+            })
+            .finally(() => {
+                setIsloading(false); //Solo termina de cargar cuando haya llegado la respuesta
+            });
+
+        return () => {
+            //Cancelar el estado de cargando, puede ser que se cerró el listado, quedarían en ba
+            //setIsloading(false);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, parms, filterParms, endPoint]);
+
+    return (
+        <RHFAutocomplete<T>
+            name={name}
+            loading={loading}
+            options={options}
+            onChangeFilterParmsLocal={onChangeFilterParms ? onChangeFilterParmsLocal : undefined}
+            onOpen={() => {
+                setOpen(true);
+            }}
+            onClose={() => {
+                setOpen(false);
+            }}
+            {...other}
+        />
+    );
+}

package/src/components/hook-form/RHFAutocompleteAsync/styles.tsx

@@ -0,0 +1,42 @@
+import { styled } from '@mui/material/styles';
+
+export const SKTRHFAutocompleteAsyncWrapper = styled('div')(() => ({
+    display: 'flex',
+    width: '100%',
+    flexDirection: 'column',
+}));
+
+// export const PropertieValue = styled('div')(({ theme }) => ({
+//     display: 'grid',
+//     gridTemplateColumns: '190px 1fr',
+//     alignItems: 'center',
+//     padding: `${theme.spacing(1.75)} 0`,
+//     [theme.breakpoints.down('md')]: {
+//         gridTemplateColumns: '1fr',
+//         gridGap: theme.spacing(1),
+//     },
+// }));
+
+export const PropertieValueLabel = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'flex-end',
+    paddingRight: `${theme.spacing(2)}`,
+    [theme.breakpoints.down('md')]: {
+        justifyContent: 'flex-start',
+    },
+}));
+
+export const SKTInputText = styled('div')(({ theme }) => ({
+    width: '100%',
+    display: 'grid',
+    gridTemplateColumns: '1fr auto',
+    gridGap: theme.spacing(2),
+    alignItems: 'center',
+    height: `${theme.spacing(4.5)}`,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: `${theme.spacing(1)}`,
+    padding: `0 ${theme.spacing(2)}`,
+    [theme.breakpoints.down('md')]: {
+        width: '100%',
+    },
+}));

package/src/components/hook-form/RHFAutocompleteAsync/types.ts

@@ -0,0 +1,11 @@
+import { RHFAutocompleteProps } from '../RHFAutocomplete/types';
+
+export type RHFAutocompleteAsyncProps<T> = {
+    endPoint: string;
+    timeout?: number;
+    parms?: Record<string, any>;
+    resultField?: string;
+    isRemote?: boolean;
+    onChangeFilterParms?: (newValue: string) => Record<string, any>;
+    // onChangeSearchTextInput?: (event: React.SyntheticEvent) => void;
+} & Omit<RHFAutocompleteProps<T>, 'options' | 'onChangeSearchInput'>;

package/src/components/hook-form/RHFCheckbox/index.tsx

@@ -0,0 +1,50 @@
+// form
+import { useFormContext, Controller } from 'react-hook-form';
+// @mui
+import { styled } from '@mui/material/styles';
+import { Checkbox, FormControlLabel } from '@mui/material';
+import { RHFCheckboxProps } from './types';
+import { useModuleSkeleton } from '@m4l/core';
+import { SkeletonCheckBox } from './subcomponents/Skeleton';
+
+// ----------------------------------------------------------------------
+export const ErrorLabel = styled('p')(({ theme }) => ({
+    ...theme.typography.caption,
+
+    color: theme.palette.error.main,
+    marginRight: 14,
+    marginLeft: 14,
+}));
+
+export function RHFCheckbox({
+    name,
+    sizeCheck = 'small',
+
+    ...other
+}: RHFCheckboxProps) {
+    const { control } = useFormContext();
+    const isSkeleton = useModuleSkeleton();
+    return (
+        <FormControlLabel
+            control={
+                <Controller
+                    name={name}
+                    control={control}
+                    render={({ field, fieldState: { error } }) => {
+                        if (isSkeleton) {
+                            return <SkeletonCheckBox />;
+                        }
+
+                        return (
+                            <>
+                                <Checkbox size={sizeCheck} {...field} checked={field.value} />
+                                {error?.message && <ErrorLabel>{error?.message + ''}</ErrorLabel>}
+                            </>
+                        );
+                    }}
+                />
+            }
+            {...other}
+        />
+    );
+}