@m4l/components 0.1.39 → 0.1.41

package/src/components/formatters/dicctionary.ts

@@ -1,14 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,241 +0,0 @@
-// 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

@@ -1,12 +0,0 @@
-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

@@ -1,31 +0,0 @@
-// 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

@@ -1,7 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,118 +0,0 @@
-// 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

@@ -1,42 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,50 +0,0 @@
-// 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}
-        />
-    );
-}