@m4l/components 0.1.39 → 0.1.41

package/src/components/DataGrid/subcomponents/Table/subcomponents/DraggableHeaderRenderer.tsx

@@ -1,123 +0,0 @@
-// react
-import { useEffect, useState } from 'react';
-// m4l
-import { useModuleDictionary } from '@m4l/core';
-// mui
-import { InputBase } from '@mui/material';
-// librerias externas
-import { useDrag, useDrop } from 'react-dnd';
-import { HeaderRenderer, HeaderRendererProps } from 'react-data-grid';
-// sub components
-import { filterHeight } from './SelectColumn';
-
-// hooks
-import { useFocusRef } from '../hooks/useFocusRef';
-import { useFilters } from '../../../hooks/useFilters';
-
-interface DraggableHeaderRendererProps<TRow> extends HeaderRendererProps<TRow> {
-    onColumnsReorder: (sourceKey: string, targetKey: string) => void;
-}
-
-export function DraggableHeaderRenderer<TRow>(props: DraggableHeaderRendererProps<TRow>): any {
-    const { onColumnsReorder, column, isCellSelected, ...others } = props;
-
-    const { ref, tabIndex } = useFocusRef<HTMLInputElement>(isCellSelected);
-    const { getLabel } = useModuleDictionary();
-    const { activeFilters, filters, onChangeFilter } = useFilters();
-
-    const [filter, setFilter] = useState(filters?.get(column.key) || '');
-
-    const [{ isDragging }, drag] = useDrag({
-        type: 'COLUMN_DRAG',
-        item: { key: column.key },
-        collect: monitor => ({
-            isDragging: monitor.isDragging(),
-        }),
-    });
-
-    const [{ isOver }, drop] = useDrop({
-        accept: 'COLUMN_DRAG',
-        drop({ key }: { key: string }) {
-            onColumnsReorder(key, column.key);
-        },
-        collect: monitor => ({
-            isOver: monitor.isOver(),
-            canDrop: monitor.canDrop(),
-        }),
-    });
-    // const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    //   setName(event.target.value);
-    // };
-    // React.FormEvent<HTMLInputElement>
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (activeFilters) {
-            if (onChangeFilter) onChangeFilter(column, e.target.value);
-        }
-        setFilter(e.target.value);
-    };
-
-    useEffect(() => {
-        if (!activeFilters) setFilter('');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeFilters]);
-
-    const newColumn = { ...column };
-    if (newColumn.withinHeaderRenderer) {
-        newColumn.name = newColumn.withinHeaderRenderer(props) as any;
-    }
-    return (
-        <div
-            ref={newRef => {
-                drag(newRef);
-                drop(newRef);
-            }}
-            style={{
-                opacity: isDragging ? 0.5 : 1,
-                backgroundColor: isOver ? '#ececec' : undefined,
-                cursor: 'move',
-                display: 'flex',
-                flexDirection: 'column',
-                lineHeight: '1', // activeFilters && column.withFilter ? '30px' : '60px',
-                height: '100%',
-                justifyContent: 'center',
-                textAlign: 'center',
-                // alignItems: 'center',
-                // justifyContent: 'space-evenly'
-            }}
-        >
-            {/* {withinHeaderRenderer && withinHeaderRenderer(props)} */}
-
-            <HeaderRenderer column={newColumn} isCellSelected={isCellSelected} {...others} />
-
-            {activeFilters && (column?.withFilter === undefined || column.withFilter === true) && (
-                <div
-                    className="filter_cell_div"
-                    style={{
-                        borderTop: '1px solid var(--rdg-border-color)',
-                        width: '100%',
-                        display: 'flex',
-                        alignItems: 'center',
-                        // flexGrow: 1,
-                        height: `${filterHeight}px`,
-
-                        // paddingLeft: '2px', paddingRight: '2px'
-                    }}
-                >
-                    <InputBase
-                        inputRef={ref}
-                        placeholder={getLabel('data_grid.filter_holder')}
-                        style={{
-                            width: '100%',
-                            paddingBottom: '2px',
-                            border: '1px solid var(--rdg-border-color)',
-                        }}
-                        tabIndex={tabIndex}
-                        type="text"
-                        onChange={handleChange}
-                        value={filter}
-                    />
-                </div>
-            )}
-        </div>
-    );
-}

package/src/components/DataGrid/subcomponents/Table/subcomponents/SelectColumn.tsx

@@ -1,106 +0,0 @@
-import {
-    Column,
-    SELECT_COLUMN_KEY,
-    SelectCellFormatter,
-    FormatterProps,
-    useRowSelection,
-    GroupFormatterProps,
-    HeaderRendererProps,
-} from 'react-data-grid';
-import useDataGrid from '../../../hooks/useDataGrid';
-
-export const filterColumnClassName = 'filter-cell';
-export const filterHeight = 35;
-
-// export const getIsChecked = (props: FormatterProps<any>) => {
-//     if (mapRowsSelected.size > 0) {
-//         const iterator = mapRowsSelected.entries();
-//         for (let i = 0; i < mapRowsSelected.size; i++) {
-//             const entry = iterator.next().value;
-//             const key: Key = entry[1];
-//             const row = finalRows.find(frow => props.rowKeyGetter(frow) === key);
-//             if (row) {
-//                 rawRowsSelected.push(row);
-//             }
-//         }
-//     }
-// };
-
-function SelectGroupFormatter(props: GroupFormatterProps<unknown>) {
-    const [isRowSelected, onRowSelectionChange] = useRowSelection();
-
-    const onChange = (checked: boolean) => {
-        onRowSelectionChange({ row: props.row, checked, isShiftClick: false });
-    };
-
-    const cellFormater = SelectCellFormatter({
-        value: isRowSelected,
-        isCellSelected: props.isCellSelected,
-        onChange,
-        'aria-label': 'Select Group',
-    });
-
-    return cellFormater;
-}
-
-function SelectFormatter(props: FormatterProps<any, any>) {
-    const { checkedRows, onCheckedRowsChange, rowKeyGetter } = useDataGrid<any, any>();
-
-    const onChange = (checked: boolean, _isShiftClick: boolean) => {
-        const newCheckedRows = new Set(checkedRows);
-        if (checked) {
-            newCheckedRows.add(rowKeyGetter(props.row));
-        } else {
-            newCheckedRows.delete(rowKeyGetter(props.row));
-        }
-
-        onCheckedRowsChange && onCheckedRowsChange(newCheckedRows);
-    };
-
-    return (
-        <SelectCellFormatter
-            value={checkedRows?.has(rowKeyGetter(props.row)) || false}
-            isCellSelected={props.isCellSelected}
-            onChange={onChange}
-            aria-label={'Select'}
-        />
-    );
-}
-
-const SelectColumnHeaderRenderer = (props: HeaderRendererProps<any, any>) => {
-    const { rows, rowKeyGetter, onCheckedRowsChange, checkedRows } = useDataGrid<any, any>();
-
-    const onAllRowsCheckedChange = (checked: boolean) => {
-        if (!onCheckedRowsChange) return;
-
-        if (checked) {
-            onCheckedRowsChange(new Set(rows.map(r => rowKeyGetter(r))));
-        } else {
-            onCheckedRowsChange(new Set());
-        }
-    };
-
-    const allRowsChecked = rows.length === checkedRows?.size;
-
-    return SelectCellFormatter({
-        'aria-label': 'Select All',
-        isCellSelected: props.isCellSelected,
-        value: allRowsChecked,
-        onChange: onAllRowsCheckedChange,
-    });
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const SelectColumn: Column<any, any> = {
-    key: SELECT_COLUMN_KEY,
-    name: '',
-    width: 60,
-    maxWidth: 60,
-    resizable: false,
-    sortable: false,
-    frozen: true,
-    type: 'boolean',
-    headerRenderer: SelectColumnHeaderRenderer,
-    formatter: SelectFormatter,
-    groupFormatter: SelectGroupFormatter,
-};

package/src/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/index.tsx

@@ -1,13 +0,0 @@
-// mui
-import { Skeleton } from '@mui/material';
-import { WrapperSkeleton } from './styles';
-
-// types
-
-export function SkeletonFormatter() {
-    return (
-        <WrapperSkeleton>
-            <Skeleton variant="text" width="100%" height="12px" />
-        </WrapperSkeleton>
-    );
-}

package/src/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/styles.tsx

@@ -1,8 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperSkeleton = styled('div')(() => ({
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-    alignItems: 'center',
-}));

package/src/components/DataGrid/subcomponents/Table/subcomponents/SkeletonFormatter/types.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface SkeletonFormatterProps {}

package/src/components/DataGrid/subcomponents/editors/TextEditor/index.tsx

@@ -1,77 +0,0 @@
-import { EditorProps } from 'react-data-grid';
-
-import { styled } from '@mui/material/styles';
-
-export const Input = styled('input')(() => ({
-    appearance: 'none',
-    boxSizing: 'border-box',
-    inlineSize: '100%',
-    blockSize: '100%',
-    paddingBlock: '0',
-    /* padding-inline: 6px; */
-    /* border: 2px solid #ccc; */
-    verticalAlign: 'top',
-    textAlign: 'right',
-    color: 'var(--rdg-color)',
-    backgroundColor: 'var(--rdg-background-color)',
-
-    fontFamily: 'inherit',
-    // fontSize: 'var(--rdg-font-size)',
-
-    '&:focus': {
-        // borderColor: 'var(--rdg-selection-color)',
-        outline: 'none',
-    },
-
-    '&::placeholder': {
-        color: '#999',
-        opacity: '1',
-    },
-}));
-
-function autoFocusAndSelect(input: HTMLInputElement | null) {
-    input?.focus();
-    input?.select();
-}
-
-export function TextEditor<TRow, TSummaryRow>({
-    row,
-    column,
-    onRowChange,
-    onClose,
-}: EditorProps<TRow, TSummaryRow>) {
-    return (
-        <Input
-            className={'rdg-text-editor'}
-            ref={autoFocusAndSelect}
-            value={row[column.key as keyof TRow] as unknown as string}
-            onChange={event => onRowChange({ ...row, [column.key]: event.target.value })}
-            onBlur={() => onClose(true)}
-        />
-    );
-}
-
-export function NumberEditor<TRow, TSummaryRow>({
-    row,
-    column,
-    onRowChange,
-    onClose,
-}: EditorProps<TRow, TSummaryRow>) {
-    return (
-        <Input
-            className={'rdg-text-editor'}
-            ref={autoFocusAndSelect}
-            type="number"
-            value={row[column.key as keyof TRow] as unknown as string}
-            onChange={event =>
-                onRowChange({
-                    ...row,
-                    [column.key]: event.target.value !== '' ? Number(event.target.value) : '',
-                })
-            }
-            onBlur={() => onClose(true)}
-        />
-    );
-}
-
-export default TextEditor;

package/src/components/DataGrid/types.ts

@@ -1,104 +0,0 @@
-import { Maybe } from '@m4l/core';
-import type { Column, RowsChangeData, FormatterProps } from 'react-data-grid';
-
-import type { MenuAction } from '../mui_extended/MenuActions/types';
-
-import { ActionsProps } from './subcomponents/Actions/types';
-
-export type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
-
-export type {
-    columnUncertaintyFormatter,
-    columnPointsFormatter,
-    columnNestedValueFormatter,
-} from './formatters';
-
-export declare type ColumnType = 'string' | 'date' | 'number' | 'boolean' | 'custom';
-
-export declare type ColumnAlign = 'left' | 'center' | 'right';
-
-export declare interface GridRow {
-    id: number;
-}
-
-export declare type SortDirection = 'ASC' | 'DESC';
-
-export interface SortColumn {
-    readonly columnKey: string;
-    readonly direction: SortDirection;
-}
-
-declare module 'react-data-grid' {
-    // eslint-disable-next-line no-shadow
-    export interface Column<TRow, TSummaryRow = unknown> {
-        visible?: boolean; // visibilidad temporal
-        hidden?: boolean; // Invisible al usuario
-        fixed?: boolean;
-        type: ColumnType;
-        align?: ColumnAlign;
-        isDraggable?: boolean;
-        withFilter?: boolean;
-        withinHeaderRenderer?: React.FunctionComponent<HeaderRendererProps<TRow, TSummaryRow>>; // (props: HeaderRendererProps<R>) => JSX.Element;
-        customFilter?: (row: TRow, value: string) => boolean;
-        // isPrintable:?boolean;
-        // printRender:()
-        // (props: HeaderRendererProps<TRow, TSummaryRow>) => JSX.Element
-    }
-}
-
-export declare type RowKey = string | number;
-
-// export interface MenuAction {
-//     urlIcon: string;
-//     iconWidth?: number;
-//     iconHeight?: number;
-//     description: String;
-//     onClick: (props: any) => void;
-//     disabled: boolean;
-//     color?: string;
-// }
-
-export declare interface WithActionsProps {
-    withActions?: boolean;
-}
-
-export declare interface PagerState {
-    page: number;
-    rowsPerPage: number;
-    totalRecords: number;
-}
-
-export const initialPagerState: PagerState = {
-    page: 0,
-    rowsPerPage: 25,
-    totalRecords: 0,
-};
-export declare type RowHeightVariants = 'standard' | 'compact' | 'confortable';
-export declare type RowHeights = number | number[];
-export declare interface GridProps<TRow, TSummaryRow> {
-    id: RowKey;
-
-    withActions?: boolean;
-
-    columns: readonly Column<TRow, TSummaryRow>[];
-
-    rows: TRow[];
-    initialRowHeightVariant?: RowHeightVariants;
-    rowHeaderHeights?: RowHeights;
-    rowHeights?: RowHeights;
-    rowActionsGetter?: (row: TRow) => MenuAction[];
-    rowKeyGetter: (row: TRow) => RowKey;
-    //isMultipleSelect?: boolean;
-    selectedRows?: ReadonlySet<RowKey>;
-    onSelectedRowsChange?: (mapRowsSelected: ReadonlySet<RowKey>) => void;
-
-    checkedRows?: ReadonlySet<RowKey>;
-    onCheckedRowsChange?: (mapRowsSelected: ReadonlySet<RowKey>) => void;
-
-    onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, TSummaryRow>) => void>;
-}
-
-export declare interface DataGridProps<TRow, TSummaryRow> extends GridProps<TRow, TSummaryRow> {
-    actionsProps: ActionsProps;
-    // dictionary: Dictionary | undefined;
-}

package/src/components/DataGrid/utils/getDataGridRowsFromSet.ts

@@ -1,23 +0,0 @@
-export const getDataGridRowsFromSet = <TRow, RowKey>(
-    set: ReadonlySet<RowKey>,
-    rows: TRow[],
-    rowKeyGetter: (row: TRow) => RowKey,
-) => {
-    const rowsFinded: TRow[] = [];
-
-    if (set) {
-        if (set.size > 0) {
-            const iterator = set.entries();
-            for (let i = 0; i < set.size; i++) {
-                const entry = iterator.next().value;
-                const key: RowKey = entry[1];
-                const row = rows.find(frow => rowKeyGetter(frow) === key);
-                if (row) {
-                    rowsFinded.push(row);
-                }
-            }
-        }
-    }
-
-    return rowsFinded;
-};

package/src/components/DraggableWindow/index.tsx

@@ -1,30 +0,0 @@
-import { useState } from 'react';
-import Drageable, { ControlPosition, DraggableData, DraggableEvent } from 'react-draggable';
-import { DraggableWindowProps } from './types';
-
-export const DraggableWindow = (props: DraggableWindowProps) => {
-    const {
-        children,
-        handle = 'm4l_draggable_handle',
-        cancel = '[class*="MuiDialogContent-root"]',
-        defaultPosition,
-        ...others
-    } = props;
-
-    const [position, setPosition] = useState<ControlPosition>(defaultPosition || { x: 0, y: 0 });
-
-    const onDrag = (_e: DraggableEvent, data: DraggableData) => {
-        const { x, y } = data;
-        const xPos = x < 0 ? 0 : Math.round(x);
-        const yPos = y < 0 ? 0 : Math.round(y);
-        setPosition({ x: xPos, y: yPos });
-    };
-
-    return (
-        <Drageable handle={handle} cancel={cancel} position={position} onDrag={onDrag} {...others}>
-            {children}
-        </Drageable>
-    );
-};
-
-export default DraggableWindow;

package/src/components/DraggableWindow/types.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-import { DraggableProps } from 'react-draggable';
-// import type { DraggableEvent as DE, DraggableData as DD } from 'react-draggable';
-
-export interface DraggableWindowProps extends Partial<DraggableProps> {
-    children: ReactNode;
-}
-
-// export type DraggableEvent = DE;
-
-// export type DraggableData = DD;

package/src/components/DynamicFilter/components/ApplyedFilters/components/ApplyedFilter/index.tsx

@@ -1,96 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// react
-
-// m4l
-
-// mui
-
-// styled components
-import {
-    WrapperApplyedFilter,
-    AplyedFilterStyled,
-    ContainerField,
-    ContainerOperator,
-    ContainerOperands,
-} from './styles';
-// internal components
-import { IconButton } from '../../../../../mui_extended/IconButton';
-// sub components
-
-// styled components
-
-// types
-import type { FilterFieldApply } from '../../../../types';
-// hooks
-import { useBase } from '../../../../hooks/useFilter';
-import { useMemo } from 'react';
-import { useEnvironment } from '@m4l/core';
-
-// utils
-
-// constants
-
-export function ApplyedFilter(props: FilterFieldApply) {
-    const {
-        n: fieldName,
-        id,
-        isSetted,
-        fixed,
-        labelOperator: labelOperator,
-        labelOperands: labelOperands,
-    } = props;
-
-    const { removeFilter, showPopupForEditFilter, hidePopupEdit, getFieldByName } = useBase();
-    const { host_static_assets, environment_assets } = useEnvironment();
-
-    const field = useMemo(() => {
-        return getFieldByName(fieldName);
-    }, [getFieldByName]);
-
-    const urlIcon = useMemo(() => {
-        if (!field) return;
-
-        if (field && field.urlIcon !== '') {
-            return field.urlIcon;
-        }
-        return '';
-    }, [field]);
-
-    const onDelete = () => {
-        //
-        hidePopupEdit(false);
-        removeFilter(id);
-    };
-    const onClick = (event: any) => {
-        //
-        showPopupForEditFilter(event.currentTarget, props);
-    };
-
-    if (!field) {
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        return <></>;
-    }
-    return (
-        <WrapperApplyedFilter
-            id={'WrapperApplyedFilter'}
-            className={!isSetted ? 'waf_no_setted' : ''}
-        >
-            {urlIcon && <IconButton src={urlIcon} onClick={onClick} />}
-            <AplyedFilterStyled onClick={onClick}>
-                <ContainerField>{field.label}</ContainerField>
-                <ContainerOperator>{labelOperator}</ContainerOperator>
-                <ContainerOperands>{labelOperands}</ContainerOperands>
-            </AplyedFilterStyled>
-            {!fixed && (
-                <IconButton
-                    size="small"
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`}
-                    onClick={onDelete}
-                    dictionaryTooltip={'dynamic_filter.tooltip_clear_filter'}
-                />
-            )}
-        </WrapperApplyedFilter>
-    );
-}
-
-/* {`${field.label}\u00A0\u00A0${labelOperator}\u00A0\u00A0${labelOperands}`} */

package/src/components/DynamicFilter/components/ApplyedFilters/components/ApplyedFilter/styles.tsx

@@ -1,47 +0,0 @@
-import { styled } from '@mui/material/styles';
-import { alpha } from '@mui/material';
-
-export const WrapperApplyedFilter = styled('div')(({ theme }) => ({
-    width: 'auto',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100%',
-    minHeight: theme.spacing(3),
-    paddingLeft: theme.spacing(1),
-    backgroundColor: theme.palette.grid?.sectionHeader,
-    border: '1px solid',
-    borderColor: alpha(`${theme.palette.divider}`, 0.1),
-    overflow: 'visible',
-    borderRadius: theme.spacing(1),
-    '&.waf_no_setted': {
-        border: `1px solid ${theme.palette.error.main}`,
-    },
-}));
-
-export const AplyedFilterStyled = styled('div')(({ theme }) => ({
-    ...theme.typography.body2,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 'auto',
-    height: '100%',
-    marginRight: theme.spacing(1),
-    marginLeft: theme.spacing(1),
-    whiteSpace: 'nowrap',
-}));
-
-export const ContainerField = styled('span')(({ theme }) => ({
-    ...theme.typography.subtitle2,
-}));
-
-export const ContainerOperator = styled('span')(({ theme }) => ({
-    ...theme.typography.body2,
-    marginLeft: theme.spacing(1.5),
-    fontStyle: 'italic',
-}));
-
-export const ContainerOperands = styled('span')(({ theme }) => ({
-    ...theme.typography.body2,
-    marginLeft: theme.spacing(1.5),
-}));