@m4l/components 7.2.0 → 7.2.2

package/src/components/DynamicSort/slots/DynamicSortSlots.ts

@@ -1,145 +0,0 @@
-import { styled } from '@mui/material/styles';
-import { MenuItem } from '@mui/material';
-
-import { Icon } from '../../Icon';
-import { IconButton } from '../../mui_extended/IconButton';
-import { Popover } from '../../mui_extended/Popover';
-import { Typography } from '../../mui_extended/Typography';
-import { Actions } from '../../CommonActions';
-import { DYNAMIC_SORT_KEY_COMPONENT } from '../constants';
-import { dynamicSortStyles } from '../DynamicSort.styles';
-import { DynamicSortSlots as Slots } from './SlotsEnum';
-
-export const RootStyled = styled('div', { name: DYNAMIC_SORT_KEY_COMPONENT, slot: Slots.root })(
-  dynamicSortStyles?.root,
-);
-
-export const InnerContainerStyled = styled('div', {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.innerContainer,
-})(dynamicSortStyles?.innerContainer);
-
-export const InputSortStyled = styled('div', {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.inputSort,
-})(dynamicSortStyles?.inputSort);
-
-export const InputSortInputStyled = styled('input', {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.inputSortInput,
-})(dynamicSortStyles?.inputSortInput);
-
-export const InputSortIconStyled = styled(Icon, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.inputSortIcon,
-})(dynamicSortStyles?.inputSortIcon);
-
-export const AppliedSortsStyled = styled('div', {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.appliedSorts,
-})(dynamicSortStyles?.appliedSorts);
-
-export const AppliedSortInnerContainerStyled = styled('div', {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.appliedSortInnerContainer,
-})(dynamicSortStyles?.appliedSortInnerContainer);
-
-export const AppliedSortChipStyled = styled('div', {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.appliedSortChip,
-})(dynamicSortStyles?.appliedSortChip);
-
-export const AppliedSortChipIconStyled = styled(IconButton, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.appliedSortChipIcon,
-})(dynamicSortStyles?.appliedSortChipIcon);
-
-export const AppliedSortChipInfoStyled = styled('button', {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.appliedSortChipInfo,
-})(dynamicSortStyles?.appliedSortChipInfo);
-
-export const AppliedSortChipInfoFieldNameStyled = styled('span', {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.appliedSortChipInfoFieldName,
-})(dynamicSortStyles?.appliedSortChipInfoFieldName);
-
-export const AppliedSortChipInfoOperatorStyled = styled('span', {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.appliedSortChipInfoOperator,
-})(dynamicSortStyles?.appliedSortChipInfoOperator);
-
-export const AppliedSortChipRemoveButtonStyled = styled(IconButton, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.appliedSortChipRemoveButton,
-})(dynamicSortStyles?.appliedSortChipRemoveButton);
-
-export const ActionsStyled = styled('div', {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.actions,
-})(dynamicSortStyles?.actions);
-
-export const ActionsSkeletonButtonStyled = styled('div', {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.actionsSkeletonButton,
-})(dynamicSortStyles?.actionsSkeletonButton);
-
-export const ActionsClearButtonStyled = styled(IconButton, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.actionsClearButton,
-})(dynamicSortStyles?.actionsClearButton);
-
-export const ActionsSubmitButtonStyled = styled(IconButton, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.actionsSubmitButton,
-})(dynamicSortStyles?.actionsSubmitButton);
-
-export const PopoverMenuStyled = styled(Popover, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.popoverMenu,
-})(dynamicSortStyles?.popoverMenu);
-
-export const PopoverMenuItemStyled = styled(MenuItem, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.popoverMenuItem,
-})(dynamicSortStyles?.popoverMenuItem);
-
-export const PopoverMenuItemIconStyled = styled(Icon, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.popoverMenuItemIcon,
-})(dynamicSortStyles?.popoverMenuItemIcon);
-
-export const PopoverMenuItemLabelStyled = styled('div', {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.popoverMenuItemLabel,
-})(dynamicSortStyles?.popoverMenuItemLabel);
-
-export const PopoverStyled = styled(Popover, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.popoverSort,
-})(dynamicSortStyles?.popoverSort);
-
-export const PopoverContainerFieldsStyled = styled('div', {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.popoverSortContainerFields,
-})(dynamicSortStyles?.popoverSortContainerFields);
-
-export const PopoverHeaderStyled = styled('div', {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.popoverSortHeader,
-})(dynamicSortStyles?.popoverSortHeader);
-
-export const PopoverHeaderIconStyled = styled(Icon, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.popoverSortHeaderIcon,
-})(dynamicSortStyles?.popoverSortHeaderIcon);
-
-export const PopoverHeaderTitleStyled = styled(Typography, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.popoverSortHeaderTitle,
-})(dynamicSortStyles?.popoverSortHeaderTitle);
-
-export const PopoverHeaderActionsStyled = styled(Actions, {
-  name: DYNAMIC_SORT_KEY_COMPONENT,
-  slot: Slots.popoverSortActions,
-})(dynamicSortStyles?.popoverSortActions);

package/src/components/DynamicSort/slots/SlotsEnum.ts

@@ -1,30 +0,0 @@
-export enum DynamicSortSlots {
-  root = 'root',
-  innerContainer = 'innerContainer',
-  inputSort = 'inputSort',
-  inputSortInput = 'inputSortInput',
-  inputSortIcon = 'inputSortIcon',
-  appliedSorts = 'appliedSorts',
-  appliedSortInnerContainer = 'appliedSortInnerContainer',
-  appliedSortChip = 'appliedSortChip',
-  appliedSortChipIcon = 'appliedSortChipIcon',
-  appliedSortChipInfo = 'appliedSortChipInfo',
-  appliedSortChipInfoFieldName = 'appliedSortChipInfoFieldName',
-  appliedSortChipInfoOperator = 'appliedSortChipInfoOperator',
-  appliedSortChipInfoOperands = 'appliedSortChipInfoOperands',
-  appliedSortChipRemoveButton = 'appliedSortChipRemoveButton',
-  actions = 'actions',
-  actionsSkeletonButton = 'actionsSkeletonButton',
-  actionsClearButton = 'actionsClearButton',
-  actionsSubmitButton = 'actionsSubmitButton',
-  popoverMenu = 'popoverMenu',
-  popoverMenuItem = 'popoverMenuItem',
-  popoverMenuItemIcon = 'popoverMenuItemIcon',
-  popoverMenuItemLabel = 'popoverMenuItemLabel',
-  popoverSort = 'popoverSort',
-  popoverSortContainerFields = 'popoverSortContainerFields',
-  popoverSortHeader = 'popoverSortHeader',
-  popoverSortHeaderIcon = 'popoverSortHeaderIcon',
-  popoverSortHeaderTitle = 'popoverSortHeaderTitle',
-  popoverSortActions = 'popoverSortActions',
-}

package/src/components/DynamicSort/slots/index.ts

@@ -1,2 +0,0 @@
-export * from './DynamicSortSlots';
-export { DynamicSortSlots } from './SlotsEnum';

package/src/components/DynamicSort/store/DynamicSortContext.tsx

@@ -1,120 +0,0 @@
-import { createContext, useEffect, useRef, type ReactNode } from 'react';
-import { useStore } from 'zustand';
-import { shallow } from 'zustand/shallow';
-
-import { useModuleDictionary, useModuleSkeleton } from '@m4l/core';
-import { useFirstRender, useResponsiveDesktop } from '@m4l/graphics';
-
-import { DynamicSortProps } from '../types';
-import { createAreaStore, type DynamicSortStore } from './DynamicSortStore';
-import { formatToInitialSorts } from '../helpers/formatToInitialSorts';
-import { formatToRowSort } from '../helpers/formatToRowSort';
-
-const DynamicSortContext = createContext<DynamicSortStore | null>(null);
-
-interface DynamicSortContextProps extends DynamicSortProps {
-  children: ReactNode;
-}
-
-/**
- * Contexto que crea y da alcance al Store (Zustand) para ser usado desde cualquier parte del componente.
- * @param props DynamicSortProps
- * @returns Proveedor de contexto, y el contexto
- */
-function DynamicSortProvider(props: DynamicSortContextProps) {
-  const {
-    automatic = true,
-    fields,
-    initialAppliedSorts = [],
-    onChangeSorts: onChangeSorts,
-    dataTestId = '',
-    children,
-  } = props;
-
-  const { getLabel } = useModuleDictionary();
-  const dynamicSortStoreRef = useRef<DynamicSortStore>();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const isFirstRender = useFirstRender([isDesktop, isSkeleton]);
-
-  /**
-   * Crear el store en la primera renderización
-   */
-  if (!dynamicSortStoreRef.current) {
-    dynamicSortStoreRef.current = createAreaStore({
-      fields,
-      automatic,
-      getLabel,
-      dataTestId,
-      ownerState: {
-        isSkeleton,
-        isDirty: !automatic,
-        inEdition: false,
-        isValid: true,
-        isMobile: !isDesktop,
-        isEmpty: true,
-      },
-    });
-
-    /**
-     * Inicializar el Store con los sorts iniciales
-     */
-    dynamicSortStoreRef.current.getState().actions.init(initialAppliedSorts);
-  }
-
-  const countOnChangeSortsApplyed = useStore(
-    dynamicSortStoreRef.current,
-    state => state.countOnChangeSortsApplyed,
-    shallow,
-  );
-
-  /**
-   * Efecto para lanzar el fire onChangeSort, basado en el cambio del contador countOnChangeSortApplyed
-   */
-  useEffect(() => {
-    if (countOnChangeSortsApplyed === 0) {
-      return;
-    }
-    const state = dynamicSortStoreRef.current?.getState();
-    if (state) {
-      onChangeSorts?.(
-        formatToInitialSorts(state.appliedSorts),
-        formatToRowSort(state.appliedSorts),
-      );
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [countOnChangeSortsApplyed]);
-
-  /**
-   * Efecto para actualizar el estado externos al Store (IsMobile, isSkeleton)
-   */
-  useEffect(() => {
-    if (isFirstRender) {
-      return;
-    }
-
-    dynamicSortStoreRef.current
-      ?.getState()
-      .actions.setExternalState({ isMobile: !isDesktop, isSkeleton });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isDesktop, isSkeleton]);
-
-  /**
-   * Efecto para lanzar el sort si es automático despues de renderizar
-   */
-  useEffect(() => {
-    if (automatic) {
-      dynamicSortStoreRef.current?.getState().actions.fireOnChangeSorts();
-      return;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <DynamicSortContext.Provider value={dynamicSortStoreRef.current}>
-      {children}
-    </DynamicSortContext.Provider>
-  );
-}
-
-export { DynamicSortProvider, DynamicSortContext };