@m4l/components 7.2.0 → 7.2.2

package/src/components/DynamicSort/subcomponents/PopoverSort/usePopoverSort.ts

@@ -1,129 +0,0 @@
-import { KeyboardEvent, useCallback, useMemo, useRef } from 'react';
-import { FieldValues } from 'react-hook-form';
-
-import { useModuleDictionary } from '@m4l/core';
-
-import { useDynamicSortStore } from '../../store/useDynamicSortStore';
-import type { FormSortFieldApplied, Field, FormSortValue } from '../../types';
-import type { FormStatusLoad } from '../../../../contexts';
-import { PopoverSortData } from '../../store/DynamicSortStore';
-import { fieldFactory } from '../FieldTypes/fieldFactory';
-
-/**
- * TODO: Documentar
- */
-function usePopoverSort() {
-  let anchorEl: Element;
-  let field: Field;
-  let formSort: FormSortFieldApplied;
-  let sortFormValue: FormSortValue;
-  let popupValidationSchema;
-
-  const { getLabel } = useModuleDictionary();
-
-  const popoverSortData = useDynamicSortStore(state => state.popoverSortData);
-  const { hidePopoverSort, addSort, updateSort, getNewId } = useDynamicSortStore(
-    state => state.actions,
-  );
-
-  const refPreviousPopoverSortData = useRef<PopoverSortData | undefined>(popoverSortData);
-
-  /**
-   * Se usa para indicarle al componente RHFormProvider
-   * que debe recargar los values del form cuando se está emergiendo otro filtro y ya estaba en edición de otro
-   */
-  const statusLoad: FormStatusLoad = useMemo(() => {
-    let returnStatus: FormStatusLoad;
-
-    if (popoverSortData && refPreviousPopoverSortData.current === undefined) {
-      returnStatus = 'ready';
-    } else if (!popoverSortData) {
-      returnStatus = 'initial';
-    } else {
-      returnStatus = 'reload_values_provider';
-    }
-    refPreviousPopoverSortData.current = popoverSortData;
-
-    return returnStatus;
-  }, [popoverSortData]);
-
-  if (popoverSortData?.openFor === 'add') {
-    anchorEl = popoverSortData?.fnAnchorEl();
-    field = popoverSortData.field;
-    const helperField = fieldFactory(field.type);
-    popupValidationSchema = helperField.getSchema(getLabel);
-    sortFormValue = helperField.getFormValue(field, getLabel);
-    formSort = {
-      field,
-      id: getNewId(),
-      isSet: true,
-      fixed: false,
-      ...sortFormValue,
-    };
-  } else if (popoverSortData) {
-    anchorEl = popoverSortData?.fnAnchorEl();
-    field = popoverSortData?.sort.field;
-    const helperField = fieldFactory(field.type);
-    popupValidationSchema = helperField.getSchema(getLabel);
-    sortFormValue = helperField.getFormValue(field, getLabel, popoverSortData.sort);
-    formSort = { ...popoverSortData?.sort, ...sortFormValue };
-  } else {
-    sortFormValue = {} as FormSortValue;
-    field = {} as Field;
-    formSort = {} as FormSortFieldApplied;
-    anchorEl = {} as Element;
-  }
-
-  const onClose = useCallback(() => {
-    hidePopoverSort(false);
-  }, []);
-
-  const handleKeyDownPopper = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
-    if (event.key === 'Escape') {
-      onClose();
-    }
-  }, []);
-
-  function handleClosePopover() {
-    hidePopoverSort(false);
-  }
-
-  /**
-   * TODO: Documentar
-   */
-  async function onSubmit(dataFieldValues: FieldValues) {
-    const sortField = { ...sortFormValue, ...dataFieldValues };
-    const newSort = {
-      ...formSort,
-      // todo: mejorar el tipado que se le envía a getSortFromFormValue
-      ...fieldFactory(sortField.fieldType).getSortFromFormValue(sortField as any),
-      isSet: true,
-    };
-
-    if (popoverSortData?.openFor === 'add') {
-      addSort(newSort);
-    } else {
-      updateSort(newSort);
-    }
-    hidePopoverSort(false);
-  }
-
-  const labelField = field?.label ?? getLabel(field?.dictionaryId ?? '');
-
-  return {
-    field,
-    labelField,
-    canRender: Boolean(popoverSortData),
-    anchorEl,
-    handleKeyDownPopper,
-    handleClosePopover,
-    onSubmit,
-    onClose,
-    sortFormValue,
-    formSort,
-    popupValidationSchema,
-    statusLoad,
-  };
-}
-
-export default usePopoverSort;

package/src/components/DynamicSort/subcomponents/SortActions/SortActions.tsx

@@ -1,50 +0,0 @@
-import { ActionsClearButtonStyled, ActionsStyled, ActionsSubmitButtonStyled } from '../../slots';
-import useSortActions from './useSortActions';
-import SortActionsSkeleton from './SortActionsSkeleton';
-import { getDynamicSortDictionary, DICCTIONARY } from '../../dictionary';
-
-/**
- * TODO: Documentar
- */
-function SortActions() {
-  const {
-    isSkeleton,
-    sortIconUrl,
-    clearIconUrl,
-    canShowRemoveAction,
-    onClickClearSorts,
-    onClickSort,
-    sortButtonDictionaryTooltip,
-    ownerState,
-  } = useSortActions();
-
-  if (isSkeleton) {
-    return (
-      <ActionsStyled ownerState={{}}>
-        <SortActionsSkeleton />
-      </ActionsStyled>
-    );
-  }
-
-  return (
-    <ActionsStyled ownerState={{}}>
-      {canShowRemoveAction && (
-        <ActionsClearButtonStyled
-          src={clearIconUrl}
-          onClick={onClickClearSorts}
-          dictionaryTooltipId={getDynamicSortDictionary(DICCTIONARY.tooltip_clear_sort)}
-          ownerState={{}}
-        />
-      )}
-      <ActionsSubmitButtonStyled
-        src={sortIconUrl}
-        aria-label="settings"
-        dictionaryTooltipId={sortButtonDictionaryTooltip}
-        onClick={onClickSort}
-        ownerState={{ ...ownerState }}
-      />
-    </ActionsStyled>
-  );
-}
-
-export default SortActions;

package/src/components/DynamicSort/subcomponents/SortActions/SortActionsSkeleton.tsx

@@ -1,21 +0,0 @@
-import { Skeleton } from '@mui/material';
-
-import { ActionsSkeletonButtonStyled } from '../../slots';
-
-/**
- * TODO: Documentar
- */
-function SortActionsSkeleton() {
-  return (
-    <>
-      <ActionsSkeletonButtonStyled ownerState={{}}>
-        <Skeleton variant="circular" width={'16px'} height={'16px'} />
-      </ActionsSkeletonButtonStyled>
-      <ActionsSkeletonButtonStyled ownerState={{}}>
-        <Skeleton variant="circular" width={'16px'} height={'16px'} />
-      </ActionsSkeletonButtonStyled>
-    </>
-  );
-}
-
-export default SortActionsSkeleton;

package/src/components/DynamicSort/subcomponents/SortActions/index.ts

@@ -1 +0,0 @@
-export { default } from './SortActions';

package/src/components/DynamicSort/subcomponents/SortActions/useSortActions.ts

@@ -1,58 +0,0 @@
-import { useEnvironment } from '@m4l/core';
-
-import { useDynamicSortStore } from '../../store/useDynamicSortStore';
-import { DICCTIONARY, getDynamicSortDictionary } from '../../dictionary';
-import { ASSETS_URL, ASSETS } from '../../constants';
-
-/**
- * TODO: Documentar
- */
-function useSortActions() {
-  const { host_static_assets, environment_assets } = useEnvironment();
-
-  const automatic = useDynamicSortStore(state => state.automatic);
-  const isSkeleton = useDynamicSortStore(state => state.ownerState.isSkeleton);
-  const isValid = useDynamicSortStore(state => state.ownerState.isValid);
-  const isDirty = useDynamicSortStore(state => state.ownerState.isDirty);
-  const appliedSorts = useDynamicSortStore(state => state.appliedSorts);
-  const { hidePopoverSort, clearSorts, fireOnChangeSorts } = useDynamicSortStore(
-    state => state.actions,
-  );
-
-  /**
-   * TODO: Documentar
-   */
-  function onClickClearSorts() {
-    hidePopoverSort(false);
-    clearSorts();
-    fireOnChangeSorts();
-  }
-
-  const sortIconUrl = `${host_static_assets}/${environment_assets}/${ASSETS_URL}/${automatic ? ASSETS.refresh : ASSETS.sort
-    }`;
-
-  const clearIconUrl = `${host_static_assets}/${environment_assets}/${ASSETS_URL}/${ASSETS.clean}`;
-
-  const canShowRemoveAction = appliedSorts.findIndex(f => !f.fixed) > -1;
-
-  const sortButtonDictionaryTooltip = getDynamicSortDictionary(
-    isValid
-      ? isDirty
-        ? DICCTIONARY.sort_tooltip_dirty
-        : DICCTIONARY.sort_tooltip_refresh
-      : DICCTIONARY.sort_tooltip_invalid,
-  );
-
-  return {
-    isSkeleton,
-    sortIconUrl,
-    clearIconUrl,
-    canShowRemoveAction,
-    onClickClearSorts,
-    onClickSort: fireOnChangeSorts,
-    sortButtonDictionaryTooltip,
-    ownerState: { isValid },
-  };
-}
-
-export default useSortActions;

package/src/components/DynamicSort/types.ts

@@ -1,214 +0,0 @@
-import { Theme } from '@mui/material/styles';
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
-
-import { Maybe } from '@m4l/core';
-
-import { DYNAMIC_SORT_KEY_COMPONENT } from './constants';
-import { DynamicSortSlots } from './slots';
-
-export type FieldType = 'string';
-
-export type OperandType = string;
-
-export type OperandInitialSortType = string;
-
-export type Operator = 'asc' | 'desc';
-
-export type StringOperator = 'asc' | 'desc';
-
-export type FieldPresence = 'initialized' | 'fixed' | 'optional';
-
-export type FieldTypeOperator<T extends FieldType> = T extends 'string' ? StringOperator : T;
-
-export interface FieldBase<T extends FieldType = FieldType> {
-  name: string;
-  type: T;
-  multiple?: boolean;
-  presence?: FieldPresence;
-  urlIcon: string;
-  defaultOperator?: Maybe<FieldTypeOperator<T>>;
-}
-
-export interface FieldDictionaryId<T extends FieldType = FieldType> extends FieldBase<T> {
-  dictionaryId: string;
-  label?: undefined;
-}
-
-export interface Label<T extends FieldType = FieldType> extends FieldBase<T> {
-  label: string;
-  dictionaryId?: undefined;
-}
-
-export type Field<T extends FieldType = FieldType> = FieldDictionaryId<T> | Label<T>;
-
-/*----------------------------------------------------------------*/
-
-export interface BaseApplySort<T extends FieldType = FieldType> {
-  id: number;
-  field: Field<T>;
-  isSet: boolean;
-  fixed: boolean;
-}
-
-/*----------------------------------------------------------------*/
-
-/**
- * Base para el tipado de overloading de los valores de un sort
- */
-export interface SortValueBase {
-  fieldType: FieldType;
-  operator: Operator;
-}
-
-//String
-export interface SortValueOperator extends SortValueBase {
-  fieldType: 'string';
-  operator: Operator;
-}
-
-/**
- * Valor de un filtro sobrecargado para cada tipo de dato
- */
-export type SortValue = SortValueOperator;
-
-/**
- * Estado del Filtro + Valor valor del filtro.
- */
-export type SortFieldApplied<T extends FieldType = FieldType> = BaseApplySort<T> & SortValue;
-
-/**
- * RawSortFieldApply Formato para enviar los sorts a las APIs.
- */
-export interface RawSortFieldApply {
-  f: string; //fieldname
-  o: Operator; //operator
-}
-
-export type SortToEditApply = SortFieldApplied;
-
-export interface DataTypeFilerLabels {
-  labelField: string;
-  labelOperator: string;
-}
-
-/**
- * Tipado de los sorts a inicializar el componente DynamicSort
- */
-export type InitialSortApplied = {
-  name: string;
-  operator: Operator;
-};
-
-export type FormOperator<T extends Operator = Operator> = {
-  operator: T;
-  name: string;
-};
-
-export type FormOperandString = {
-  operator: string;
-  name: string;
-};
-
-/* export type FormOperandString = string; */
-
-export type FormOperand = FormOperandString;
-
-/**
- * Base para el tipado de overloading de los valor de un filtro
- */
-export interface FormSortValueBase {
-  fieldType: FieldType;
-  formValueOperator: FormOperator;
-}
-
-export interface FormSortValueString extends FormSortValueBase {
-  fieldType: 'string';
-  formValueOperator: FormOperator<StringOperator>;
-}
-
-/**
- * Valor de un filtro sobrecargado para cada tipo de dato
- */
-export type FormSortValue = FormSortValueString;
-
-/**
- * Estado del Filtro + Valor valor del filtro.
- */
-export type FormSortFieldApplied<T extends FieldType = FieldType> = BaseApplySort<T> &
-  FormSortValue;
-
-/**
- * Tipado del handler cuando se ejecuta el filtro
- */
-export type OnChangeSorts = (
-  /**
-   *  "Sorts" Vector de sorts aplicados, los cuales pueden servir como entrada del campo "i"nitialappliedSorts" en un refresh,
-   */
-  Sorts: Array<InitialSortApplied>,
-  /**
-   *  "rawSorts" Vector de sorts aplicados, en el formato que puede ser llevado a un endpoint.
-   *   ver:  https://www.notion.so/made4labs/Filtrado-de-listas-55afdd8ac92e483abd34e5365b74ee29
-   */
-  rawSorts: Array<RawSortFieldApply>,
-) => void;
-
-/**
- * Propiedades que recibe el componente DynamicSort
- */
-export interface DynamicSortProps {
-  /**
-   *  Define si el filtro se ejecuta automáticamente cuando se agrega o se modifica un filtro.
-   *  @default true
-   */
-  automatic?: boolean;
-
-  /** Array con la configuración de cada campo por el que se podrá filtrar. */
-  fields: Array<Field>;
-  /** Array con la configuración de cada campo por el que se podrá hacer  Sort.*/
-  initialAppliedSorts?: Array<InitialSortApplied>;
-  /** Handler que se dispara cuando el filtro cambia en automatico, o cuando es manual y se presion el boton de filtrar */
-  onChangeSorts?: OnChangeSorts;
-  /** Key único para necesario para las pruebas del componente. */
-  dataTestId?: string;
-}
-
-/**
- * Interface que define la variables que se van a usar en clases del componente
- */
-export interface OwnerState {
-  /**
-   *  "isSkeleton" indica si el componente está estado skeleton.
-   */
-  isSkeleton: boolean;
-  /**
-   *  "inEdition" se establece cuando se está en edición.
-   */
-  inEdition: boolean;
-  /**
-   *  "isDirty" cuando el componente tiene sorts por aplicar
-   */
-  isDirty: boolean;
-  /**
-   *  "isValid" cuando el comnponente está en un estado invalido
-   */
-  isValid: boolean;
-  /**
-   *  "isMobile" cuando el navegador está en modo celular
-   */
-  isMobile: boolean;
-  /**
-   *  "isEmpty" Define si existen sorts aplicados
-   */
-  isEmpty: boolean;
-}
-
-export interface DynamicSortOwnerState extends DynamicSortProps, OwnerState {}
-
-export type DynamicSortSlotsType = keyof typeof DynamicSortSlots;
-
-export type DynamicSortStyles =
-  | Partial<
-      | OverridesStyleRules<DynamicSortSlotsType, typeof DYNAMIC_SORT_KEY_COMPONENT, Theme>
-      | undefined
-    >
-  | undefined;