@m4l/components 0.1.35 → 0.1.37

package/src/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.ts

@@ -0,0 +1,323 @@
+// react
+import { useEffect, useMemo, useState } from 'react';
+// External components
+import { Column, SELECT_COLUMN_KEY, SortColumn } from 'react-data-grid';
+// sub components
+import { getDragHeaderRenderer } from './getDragHeaderRenderer';
+import { ActionsColumn } from '../subcomponents/ActionsColumn';
+import { filterColumnClassName, SelectColumn } from '../subcomponents/SelectColumn';
+
+// types
+import type { ColumnAlign, ColumnType } from '../../../types';
+import { getPropertyByString, Maybe, useModuleSkeleton } from '@m4l/core';
+import type { IConfigColumn } from '../../../contexts/DataGridContext/types';
+import type { MenuAction } from '../../../../mui_extended/MenuActions/types';
+
+// hooks
+import { useFilters } from '../../../hooks/useFilters';
+import { useDataGrid } from '../../../hooks/useDataGrid';
+import { SkeletonFormatter } from '../subcomponents/SkeletonFormatter';
+import { ColumnFilter } from '../../../contexts/FilterContext/types';
+
+type Comparator = <TRow>(a: TRow, b: TRow) => number;
+
+function getComparator<TRow, TSummaryRow>(
+    columns: readonly Column<TRow, TSummaryRow>[],
+    sortColumn: string,
+): Comparator {
+    const column = columns.find(d => d.key === sortColumn);
+
+    let typeOrder: ColumnType = 'string';
+
+    if (column) {
+        typeOrder = column.type || 'string';
+    }
+
+    switch (typeOrder) {
+        case 'number':
+            return (a, b) => {
+                try {
+                    return Number((a as any)[sortColumn]) - Number((b as any)[sortColumn]);
+                } catch (error) {
+                    return -1;
+                }
+            };
+        default:
+            return (a, b) => {
+                try {
+                    return (a as any)[sortColumn]
+                        .toString()
+                        .localeCompare((b as any)[sortColumn].toString());
+                } catch (error) {
+                    return -1;
+                }
+            };
+    }
+}
+
+const getColumIndex = (key: string, columnsConfig: IConfigColumn[]) =>
+    columnsConfig.findIndex(columnConfig => columnConfig.key === key);
+const getInOrderColumns = <TRow, TSummaryRow>(
+    columns: readonly Column<TRow, TSummaryRow>[],
+    hasCheckedRows: boolean,
+    columnsConfig: IConfigColumn[],
+    columnsWidths: Map<string, Maybe<string | number>>,
+    rowActionsGetter: ((row: TRow) => MenuAction[]) | undefined,
+): readonly Column<TRow, TSummaryRow>[] => {
+    // Filtras las ocultas y las no visibles.
+    // Organizarlas por el index en que se guardó la configuraciion
+    // Aplicar la configuración de frozen y otras que puedan aparacer de la columna
+
+    let filteredSortedColumns = columns
+        .filter(column => {
+            const columnConfigIndex = getColumIndex(column.key, columnsConfig);
+
+            const visible =
+                columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
+
+            return !column.hidden && visible;
+        })
+        .sort(
+            (a, b) =>
+                // Sort for index
+                getColumIndex(a.key, columnsConfig) - getColumIndex(b.key, columnsConfig),
+        )
+        .map(columnSorted => {
+            const columnConfigIndex = getColumIndex(columnSorted.key, columnsConfig);
+
+            return {
+                ...columnSorted,
+                frozen: columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].frozen : true,
+                width:
+                    typeof columnsWidths.get(columnSorted.key) === 'number'
+                        ? columnsWidths.get(columnSorted.key)
+                        : columnSorted.width,
+            };
+        })
+        .sort((a, b) => {
+            // Sort for frozen
+            const order =
+                (a.frozen === undefined || a.frozen === false) ===
+                (b.frozen === undefined || b.frozen === false)
+                    ? 0
+                    : a.frozen
+                    ? -1
+                    : 1;
+            /// /////
+            return order;
+        });
+
+    // ////
+    if (rowActionsGetter) {
+        filteredSortedColumns = [ActionsColumn as any, ...filteredSortedColumns];
+    }
+
+    if (hasCheckedRows) {
+        filteredSortedColumns = [SelectColumn as any, ...filteredSortedColumns];
+    }
+
+    return filteredSortedColumns;
+};
+
+const getAligByType = (columnType: ColumnType): ColumnAlign => {
+    switch (columnType) {
+        case 'string':
+            return 'left';
+        case 'date':
+        case 'boolean':
+        case 'custom':
+            return 'center';
+        case 'number':
+            return 'right';
+        default:
+            break;
+    }
+
+    return 'left';
+};
+
+export const useSortColumnsRows = <TRow, TSummaryRow>(
+    sourceColumns: readonly Column<TRow, TSummaryRow>[],
+    sourceRows: readonly TRow[],
+) => {
+    const {
+        columnsConfig,
+        columnsWidths,
+        onChangeColumnsOrder,
+        rowActionsGetter,
+        checkedRows,
+        onCheckedRowsChange,
+    } = useDataGrid<TRow, TSummaryRow>();
+
+    const [columns, setColumns] = useState<readonly Column<TRow, TSummaryRow>[]>(() => []);
+    const [sortColumns, setSortColumns] = useState<readonly SortColumn[]>([]);
+
+    const isSkeleton = useModuleSkeleton();
+    const { activeFilters, filters } = useFilters();
+
+    /// ///
+
+    // const [filters, setFilters] = useState<Map<Key, string>>(new Map());
+    /// /////
+
+    const findKeyInColumns = (key: string, cols: readonly Column<TRow, TSummaryRow>[]) => {
+        const index = cols.findIndex(column => key === column.key && column.hidden === false);
+        return index !== -1;
+    };
+
+    useEffect(() => {
+        setColumns(
+            getInOrderColumns<TRow, TSummaryRow>(
+                sourceColumns,
+                !!checkedRows && !!onCheckedRowsChange, //Si están seteados se habilita el múltipe
+                columnsConfig,
+                columnsWidths,
+                rowActionsGetter,
+            ),
+        );
+
+        /// /////
+
+        const finalSortedColumns = sortColumns.filter(sortColumn =>
+            findKeyInColumns(sortColumn.columnKey, sourceColumns),
+        );
+
+        if (JSON.stringify(finalSortedColumns) !== JSON.stringify(sortColumns)) {
+            setSortColumns(finalSortedColumns);
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sourceColumns, columnsConfig, rowActionsGetter]);
+
+    const finalColumns: readonly Column<TRow, TSummaryRow>[] = useMemo(() => {
+        const DragAndDropHeaderRenderer = getDragHeaderRenderer(onChangeColumnsOrder);
+
+        return columns.map(c => {
+            const newColumn = {
+                ...c,
+                cellClass:
+                    c.align !== undefined
+                        ? `rdg-cell-align-${c.align}`
+                        : `rdg-cell-align-${getAligByType(c.type)}`,
+            };
+
+            if (
+                newColumn.key === SELECT_COLUMN_KEY ||
+                (newColumn.isDraggable !== undefined && newColumn.isDraggable === false)
+            )
+                return newColumn;
+
+            if (isSkeleton) {
+                newColumn.headerRenderer = SkeletonFormatter;
+                newColumn.formatter = SkeletonFormatter;
+            }
+            /// ///
+            if (newColumn.headerRenderer) {
+                newColumn.withinHeaderRenderer = newColumn.headerRenderer as any;
+            }
+            // ComponentType<HeaderRendererProps<TRow, TSummaryRow>
+            if (
+                (newColumn?.withFilter === undefined || newColumn.withFilter === true) &&
+                activeFilters
+            ) {
+                newColumn.headerCellClass = filterColumnClassName;
+            }
+            newColumn.headerRenderer = DragAndDropHeaderRenderer as any;
+
+            return newColumn;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isSkeleton, columns, activeFilters, onChangeColumnsOrder]);
+
+    /// ///////
+    const finalRows = useMemo((): readonly TRow[] => {
+        /// /////
+        const nextRows = sourceRows.filter(r => {
+            if (!filters || filters.size === 0) return true;
+
+            const iterator = filters.entries();
+            let valReturn = true;
+
+            /// /////
+
+            for (let i = 0; i < filters.size; i++) {
+                const entry = iterator.next().value;
+
+                const columnKey: string = entry[0];
+                const columnFilter: ColumnFilter = entry[1];
+                let valCell: string;
+                try {
+                    if (columnFilter.customFilter) {
+                        valReturn = valReturn && columnFilter.customFilter(r, columnFilter.value);
+                    } else {
+                        valCell = getPropertyByString(r as any, columnKey) || '';
+                        valReturn = valReturn && valCell.includes(columnFilter.value);
+                    }
+                } catch (error) {
+                    continue;
+                }
+
+                if (!valReturn) break;
+            }
+
+            return valReturn;
+        });
+
+        if (sortColumns.length === 0) {
+            return nextRows;
+        }
+
+        nextRows.sort((a, b) => {
+            for (const sort of sortColumns) {
+                const comparator = getComparator(columns, sort.columnKey);
+                const compResult = comparator(a, b);
+                if (compResult !== 0) {
+                    return sort.direction === 'ASC' ? compResult : -compResult;
+                }
+            }
+            return 0;
+        });
+
+        return nextRows;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sourceRows, sortColumns, filters]);
+
+    return { finalColumns, sortColumns, setSortColumns, finalRows };
+};
+
+/*
+import { useState, useMemo, useCallback } from 'react';
+import { Column } from 'react-data-grid';
+//types
+import { ColumnType } from '../types';
+
+const order = (type: ColumnType, a: any, b: any) => {
+    if (type === 'number') {
+        // order number
+        try {
+            return Number(a) - Number(b);
+        } catch (error) {
+            return -1;
+        }
+    }
+
+    if (type === 'date') {
+        try {
+            if (isNaN(Date.parse(a))) {
+                return 1;
+            }
+
+            if (isNaN(Date.parse(b))) {
+                return -1;
+            }
+
+            const date1: number = new Date(a).getMilliseconds();
+            const date2: number = new Date(b).getMilliseconds();
+            return date2 - date1;
+        } catch (error) {
+            return -1;
+        }
+    }
+
+    return a.toString().localeCompare(b.toString());
+}; */

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

@@ -0,0 +1,139 @@
+// react
+import { Key, useEffect, useRef } from 'react';
+
+// External components
+import DataGrid, { DataGridHandle, SortColumn } from 'react-data-grid';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+// Styled components
+import { OriginalDataGridWrapperStyled } from '../../styles';
+import { WrapperTable } from './styles';
+// Sub components
+import { CheckboxFormatter } from './subcomponents/CheckboxFormatter';
+
+// types
+import { GridProps } from '../../types';
+import { filterHeight } from './subcomponents/SelectColumn';
+
+// hooks
+import { useSortColumnsRows } from './hooks/useSortColumnsRows';
+import { useFilters } from '../../hooks/useFilters';
+import { useDataGrid } from '../../hooks/useDataGrid';
+
+// eslint-disable-next-line no-empty-pattern
+export function Table<TRow, TSummaryRow>(props: GridProps<TRow, TSummaryRow>) {
+    const {
+        columns,
+        rows,
+        withActions,
+        onRowsChange,
+        rowKeyGetter,
+        selectedRows,
+        onSelectedRowsChange,
+    } = props;
+    const { finalColumns, sortColumns, setSortColumns, finalRows } = useSortColumnsRows(
+        columns,
+        rows,
+    );
+    const { activeFilters } = useFilters();
+    const { onChangeColumnWidth, setRowsCount, currentRowHeight, currentRowHeaderHeight } =
+        useDataGrid();
+
+    // const [finalSelectedRows, setFinalSelectedRows] = useState<ReadonlySet<Key>>(
+    //     () => new Set(props.selectedRows),
+    // );
+
+    // Actualizar las filas que externamente se seleccionan
+    // useEffect(() => {
+    //     setFinalSelectedRows(new Set(selectedRows));
+    // }, [selectedRows]);
+
+    const ref_data_grid = useRef<DataGridHandle>(null);
+
+    //Esta función permite seleccionar la fila a la que se le dió click.
+    const onRowClick = (row: TRow) => {
+        if (selectedRows && onSelectedRowsChange) {
+            if (selectedRows.entries().next().value) {
+                // no repetir el click
+                if (selectedRows.entries().next().value[1] === rowKeyGetter(row)) {
+                    return;
+                }
+            }
+
+            const mySet: ReadonlySet<Key> = new Set([rowKeyGetter(row)]);
+
+            onSelectedRowsChange(mySet);
+        }
+    };
+
+    useEffect(() => {
+        // Use efect para poner un atributo de organización, ya que el grid lo pierde cuando se organiza el grid por varias columnas
+
+        let columnIndice = 0;
+        for (const column of finalColumns) {
+            const index = sortColumns.findIndex(sortColumn => column.key === sortColumn.columnKey);
+            if (index !== -1) {
+                ref_data_grid.current?.element
+                    ?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)
+                    ?.setAttribute('aria-columnsort', `${sortColumns[index].direction}`);
+            } else {
+                ref_data_grid.current?.element
+                    ?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)
+                    ?.removeAttribute('aria-columnsort');
+            }
+            columnIndice++;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sortColumns, finalColumns]);
+
+    useEffect(() => {
+        setRowsCount(finalRows.length); // Actualizar la filas filtradas
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [finalRows]);
+
+    const onColumnResize = (idx: number, width: number) => {
+        // informa el del ancho de las columnas
+        onChangeColumnWidth(finalColumns[idx].key, width);
+    };
+
+    const onChangeSort = (newSortColumns: SortColumn[]) => {
+        setSortColumns(newSortColumns);
+    };
+
+    return (
+        <WrapperTable id="WrapperTable" withActions={withActions}>
+            <OriginalDataGridWrapperStyled id="OriginalGridWrapperStyled">
+                <DndProvider backend={HTML5Backend} context={window}>
+                    <DataGrid
+                        className="fill-grid rdg-light"
+                        ref={ref_data_grid}
+                        // header
+                        headerRowHeight={
+                            activeFilters
+                                ? currentRowHeaderHeight + filterHeight
+                                : currentRowHeaderHeight
+                        }
+                        // columnas
+                        columns={finalColumns}
+                        sortColumns={sortColumns}
+                        onSortColumnsChange={onChangeSort}
+                        onColumnResize={onColumnResize}
+                        // filas
+                        rows={finalRows}
+                        onRowsChange={onRowsChange}
+                        selectedRows={selectedRows}
+                        onSelectedRowsChange={onSelectedRowsChange}
+                        onRowClick={onRowClick}
+                        rowHeight={currentRowHeight}
+                        rowKeyGetter={rowKeyGetter}
+                        // celdas
+                        cellNavigationMode="LOOP_OVER_ROW"
+                        components={{ checkboxFormatter: CheckboxFormatter }}
+                        defaultColumnOptions={{ resizable: true, sortable: true }}
+                    />
+                </DndProvider>
+            </OriginalDataGridWrapperStyled>
+        </WrapperTable>
+    );
+}

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

@@ -0,0 +1,15 @@
+import { styled } from '@mui/material/styles';
+import { WithActionsProps } from '../../types';
+
+export const WrapperTable = styled('div', {
+    shouldForwardProp: prop => prop !== 'withActions',
+})<WithActionsProps>(({ withActions, theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'absolute',
+    top: withActions ? theme.spacing(5.5) : '0px',
+    bottom: '0px',
+    left: '0px',
+    right: '0px',
+    overflow: 'hidden',
+}));

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

@@ -0,0 +1,44 @@
+import { Column, FormatterProps } from 'react-data-grid';
+import { MenuActions } from '../../../../mui_extended/MenuActions';
+
+// hooks
+import { useDataGrid } from '../../../hooks/useDataGrid';
+
+export const ACTIONS_COLUMN_KEY = 'actions-row';
+
+export const filterHeight = 35;
+
+function ActionsFormatter(props: FormatterProps<any, any>) {
+    const { rowActionsGetter } = useDataGrid();
+
+    if (rowActionsGetter === undefined) {
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return <></>;
+    }
+
+    return (
+        <MenuActions
+            arrowType="top-left"
+            objItem={props.row}
+            menuActions={rowActionsGetter}
+            marginTop={1}
+            marginLeft="-11px" // Se calcula a ojo, por el arrow que esta desplazado
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+            transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        />
+    );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ActionsColumn: Column<any, any> = {
+    key: ACTIONS_COLUMN_KEY,
+    name: 'Actions',
+    width: 60,
+    // maxWidth: 40,
+    withFilter: false,
+    resizable: true,
+    sortable: false,
+    frozen: true,
+    type: 'custom',
+    formatter: ActionsFormatter,
+};

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

@@ -0,0 +1,26 @@
+import { Checkbox } from '@mui/material';
+import { forwardRef } from 'react';
+import { CheckboxFormatterProps } from 'react-data-grid';
+import { CheckboxCheckedIcon, CheckboxIcon, CheckboxIndeterminateIcon } from './CustomIcons';
+
+export const CheckboxFormatter = forwardRef<HTMLInputElement, CheckboxFormatterProps>(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function CheckboxFormatter({ onChange, checked, ...props }, _ref) {
+        function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+            onChange(e.target.checked, (e.nativeEvent as MouseEvent).shiftKey);
+        }
+        return (
+            <Checkbox
+                checked={checked}
+                size="small"
+                icon={<CheckboxIcon />}
+                checkedIcon={<CheckboxCheckedIcon />}
+                indeterminateIcon={<CheckboxIndeterminateIcon />}
+                onChange={handleChange}
+                {...props}
+            />
+        );
+
+        // return <input  type="checkbox" ref={ref} {...props} onChange={handleChange} />;
+    },
+);

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

@@ -0,0 +1,122 @@
+// @mui
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+// CloseIcon
+export function CloseIcon(props: SvgIconProps) {
+    return (
+        <SvgIcon {...props}>
+            <path d="M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,9.3478351 20.9464316,6.80429597 19.0710678,4.92893219 C17.195704,3.0535684 14.6521649,2 12,2 Z M14.71,13.29 C14.8993127,13.4777666 15.0057983,13.7333625 15.0057983,14 C15.0057983,14.2666375 14.8993127,14.5222334 14.71,14.71 C14.5222334,14.8993127 14.2666375,15.0057983 14,15.0057983 C13.7333625,15.0057983 13.4777666,14.8993127 13.29,14.71 L12,13.41 L10.71,14.71 C10.5222334,14.8993127 10.2666375,15.0057983 10,15.0057983 C9.73336246,15.0057983 9.4777666,14.8993127 9.29,14.71 C9.10068735,14.5222334 8.99420168,14.2666375 8.99420168,14 C8.99420168,13.7333625 9.10068735,13.4777666 9.29,13.29 L10.59,12 L9.29,10.71 C8.89787783,10.3178778 8.89787783,9.68212217 9.29,9.29 C9.68212217,8.89787783 10.3178778,8.89787783 10.71,9.29 L12,10.59 L13.29,9.29 C13.6821222,8.89787783 14.3178778,8.89787783 14.71,9.29 C15.1021222,9.68212217 15.1021222,10.3178778 14.71,10.71 L13.41,12 L14.71,13.29 Z" />
+        </SvgIcon>
+    );
+}
+
+// StarIcon
+export function StarIcon(props: SvgIconProps) {
+    return (
+        <SvgIcon {...props}>
+            <path d="M17.56,21 C17.4000767,21.0006435 17.2423316,20.9629218 17.1,20.89 L12,18.22 L6.9,20.89 C6.56213339,21.067663 6.15259539,21.0374771 5.8444287,20.8121966 C5.53626201,20.5869161 5.38323252,20.2058459 5.45,19.83 L6.45,14.2 L2.33,10.2 C2.06805623,9.93860108 1.9718844,9.55391377 2.08,9.2 C2.19824414,8.83742187 2.51242293,8.57366684 2.89,8.52 L8.59,7.69 L11.1,2.56 C11.2670864,2.21500967 11.6166774,1.99588989 12,1.99588989 C12.3833226,1.99588989 12.7329136,2.21500967 12.9,2.56 L15.44,7.68 L21.14,8.51 C21.5175771,8.56366684 21.8317559,8.82742187 21.95,9.19 C22.0581156,9.54391377 21.9619438,9.92860108 21.7,10.19 L17.58,14.19 L18.58,19.82 C18.652893,20.2027971 18.4967826,20.5930731 18.18,20.82 C17.9989179,20.9468967 17.7808835,21.010197 17.56,21 L17.56,21 Z" />
+        </SvgIcon>
+    );
+}
+
+// Using for Alert
+export function InfoIcon(props: SvgIconProps) {
+    return (
+        <SvgIcon {...props}>
+            <path d="M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,9.3478351 20.9464316,6.80429597 19.0710678,4.92893219 C17.195704,3.0535684 14.6521649,2 12,2 Z M13,16 C13,16.5522847 12.5522847,17 12,17 C11.4477153,17 11,16.5522847 11,16 L11,11 C11,10.4477153 11.4477153,10 12,10 C12.5522847,10 13,10.4477153 13,11 L13,16 Z M12,9 C11.4477153,9 11,8.55228475 11,8 C11,7.44771525 11.4477153,7 12,7 C12.5522847,7 13,7.44771525 13,8 C13,8.55228475 12.5522847,9 12,9 Z" />
+        </SvgIcon>
+    );
+}
+
+export function WarningIcon(props: SvgIconProps) {
+    return (
+        <SvgIcon {...props}>
+            <path d="M22.56,16.3 L14.89,3.58 C14.2597186,2.59400001 13.1702353,1.99737652 12,1.99737652 C10.8297647,1.99737652 9.74028139,2.59400001 9.11,3.58 L1.44,16.3 C0.888546003,17.2192471 0.869485343,18.3628867 1.39,19.3 C1.99197363,20.3551378 3.11522982,21.0046397 4.33,21 L19.67,21 C20.8765042,21.0128744 21.9978314,20.3797441 22.61,19.34 C23.146086,18.3926382 23.1269508,17.2292197 22.56,16.3 L22.56,16.3 Z M12,17 C11.4477153,17 11,16.5522847 11,16 C11,15.4477153 11.4477153,15 12,15 C12.5522847,15 13,15.4477153 13,16 C13,16.5522847 12.5522847,17 12,17 Z M13,13 C13,13.5522847 12.5522847,14 12,14 C11.4477153,14 11,13.5522847 11,13 L11,9 C11,8.44771525 11.4477153,8 12,8 C12.5522847,8 13,8.44771525 13,9 L13,13 Z" />
+        </SvgIcon>
+    );
+}
+
+export function SuccessIcon(props: SvgIconProps) {
+    return (
+        <SvgIcon {...props}>
+            <path d="M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,9.3478351 20.9464316,6.80429597 19.0710678,4.92893219 C17.195704,3.0535684 14.6521649,2 12,2 Z M16.3,9.61 L11.73,15.61 C11.5412074,15.855247 11.2494966,15.9992561 10.94,16.0000145 C10.6322197,16.001658 10.3408221,15.861492 10.15,15.62 L7.71,12.51 C7.49028166,12.2277602 7.43782669,11.8497415 7.57239438,11.5183399 C7.70696206,11.1869384 8.00810836,10.9525017 8.36239438,10.9033399 C8.7166804,10.8541782 9.07028166,10.9977602 9.29,11.28 L10.92,13.36 L14.7,8.36 C14.917932,8.07418751 15.2717886,7.92635122 15.6282755,7.97217964 C15.9847624,8.01800806 16.2897207,8.25053875 16.4282755,8.58217966 C16.5668304,8.91382056 16.517932,9.29418753 16.3,9.58 L16.3,9.61 Z" />
+        </SvgIcon>
+    );
+}
+
+export function ErrorIcon(props: SvgIconProps) {
+    return (
+        <SvgIcon {...props}>
+            <path d="M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,9.3478351 20.9464316,6.80429597 19.0710678,4.92893219 C17.195704,3.0535684 14.6521649,2 12,2 Z M12,17 C11.4477153,17 11,16.5522847 11,16 C11,15.4477153 11.4477153,15 12,15 C12.5522847,15 13,15.4477153 13,16 C13,16.5522847 12.5522847,17 12,17 Z M13,13 C13,13.5522847 12.5522847,14 12,14 C11.4477153,14 11,13.5522847 11,13 L11,8 C11,7.44771525 11.4477153,7 12,7 C12.5522847,7 13,7.44771525 13,8 L13,13 Z" />
+        </SvgIcon>
+    );
+}
+
+// Using for Checkbox
+export function CheckboxIcon(props: SvgIconProps) {
+    return (
+        <SvgIcon {...props}>
+            <path d="M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm0 2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2z" />
+        </SvgIcon>
+    );
+}
+
+export function CheckboxCheckedIcon(props: SvgIconProps) {
+    return (
+        <SvgIcon {...props}>
+            <path d="M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.372 4.972a1.006 1.006 0 00-.928.388l-3.78 5-1.63-2.08a1.001 1.001 0 00-1.58 1.23l2.44 3.11a1 1 0 001.58-.01l4.57-6v-.03a1.006 1.006 0 00-.672-1.608z" />
+        </SvgIcon>
+    );
+}
+
+export function CheckboxIndeterminateIcon(props: SvgIconProps) {
+    return (
+        <SvgIcon {...props}>
+            <path d="M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.75 8h-6.5a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.5a.75.75 0 00-.75-.75z" />
+        </SvgIcon>
+    );
+}
+
+// Using for Select Input
+export function InputSelectIcon(props: SvgIconProps) {
+    return (
+        <SvgIcon
+            {...props}
+            sx={{
+                right: 12,
+                fontSize: 16,
+                position: 'absolute',
+                pointerEvents: 'none',
+            }}
+        >
+            <path d="M12,16 C11.7663478,16.0004565 11.5399121,15.9190812 11.36,15.77 L5.36,10.77 C4.93474074,10.4165378 4.87653776,9.78525926 5.23,9.36 C5.58346224,8.93474074 6.21474074,8.87653776 6.64,9.23 L12,13.71 L17.36,9.39 C17.5665934,9.2222295 17.8315409,9.14373108 18.0961825,9.17188444 C18.3608241,9.2000378 18.6033268,9.33252029 18.77,9.54 C18.9551341,9.74785947 19.0452548,10.0234772 19.0186853,10.3005589 C18.9921158,10.5776405 18.8512608,10.8311099 18.63,11 L12.63,15.83 C12.444916,15.955516 12.2231011,16.0153708 12,16 Z" />
+        </SvgIcon>
+    );
+}
+
+//  Using for TreeView
+export function TreeViewCollapseIcon(props: SvgIconProps) {
+    return (
+        <SvgIcon {...props}>
+            <path d="M18,3 C19.6568542,3 21,4.34314575 21,6 L21,6 L21,18 C21,19.6568542 19.6568542,21 18,21 L18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,18 L3,6 C3,4.34314575 4.34314575,3 6,3 L6,3 Z M18,5 L6,5 C5.44771525,5 5,5.44771525 5,6 L5,6 L5,18 C5,18.5522847 5.44771525,19 6,19 L6,19 L18,19 C18.5522847,19 19,18.5522847 19,18 L19,18 L19,6 C19,5.44771525 18.5522847,5 18,5 L18,5 Z M12,8 C12.5522847,8 13,8.44771525 13,9 L13,9 L13,11 L15,11 C15.5522847,11 16,11.4477153 16,12 C16,12.5522847 15.5522847,13 15,13 L15,13 L13,13 L13,15 C13,15.5522847 12.5522847,16 12,16 C11.4477153,16 11,15.5522847 11,15 L11,15 L11,13 L9,13 C8.44771525,13 8,12.5522847 8,12 C8,11.4477153 8.44771525,11 9,11 L9,11 L11,11 L11,9 C11,8.44771525 11.4477153,8 12,8 Z" />
+        </SvgIcon>
+    );
+}
+
+export function TreeViewExpandIcon(props: SvgIconProps) {
+    return (
+        <SvgIcon {...props}>
+            <path d="M18,3 C19.6568542,3 21,4.34314575 21,6 L21,6 L21,18 C21,19.6568542 19.6568542,21 18,21 L18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,18 L3,6 C3,4.34314575 4.34314575,3 6,3 L6,3 Z M18,5 L6,5 C5.44771525,5 5,5.44771525 5,6 L5,6 L5,18 C5,18.5522847 5.44771525,19 6,19 L6,19 L18,19 C18.5522847,19 19,18.5522847 19,18 L19,18 L19,6 C19,5.44771525 18.5522847,5 18,5 L18,5 Z M15,11 C15.5522847,11 16,11.4477153 16,12 C16,12.5522847 15.5522847,13 15,13 L15,13 L9,13 C8.44771525,13 8,12.5522847 8,12 C8,11.4477153 8.44771525,11 9,11 L9,11 Z" />
+        </SvgIcon>
+    );
+}
+
+export function TreeViewEndIcon(props: SvgIconProps) {
+    return (
+        <SvgIcon {...props}>
+            <path d="M18,3 C19.6568542,3 21,4.34314575 21,6 L21,6 L21,18 C21,19.6568542 19.6568542,21 18,21 L18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,18 L3,6 C3,4.34314575 4.34314575,3 6,3 L6,3 Z M18,5 L6,5 C5.44771525,5 5,5.44771525 5,6 L5,6 L5,18 C5,18.5522847 5.44771525,19 6,19 L6,19 L18,19 C18.5522847,19 19,18.5522847 19,18 L19,18 L19,6 C19,5.44771525 18.5522847,5 18,5 L18,5 Z M14,8.99420168 C14.2666375,8.99420168 14.5222334,9.10068735 14.71,9.29 C14.8993127,9.4777666 15.0057983,9.73336246 15.0057983,10 C15.0057983,10.2666375 14.8993127,10.5222334 14.71,10.71 L14.71,10.71 L13.41,12 L14.71,13.29 C14.8993127,13.4777666 15.0057983,13.7333625 15.0057983,14 C15.0057983,14.2666375 14.8993127,14.5222334 14.71,14.71 C14.5222334,14.8993127 14.2666375,15.0057983 14,15.0057983 C13.7333625,15.0057983 13.4777666,14.8993127 13.29,14.71 L13.29,14.71 L12,13.41 L10.71,14.71 C10.5222334,14.8993127 10.2666375,15.0057983 10,15.0057983 C9.73336246,15.0057983 9.4777666,14.8993127 9.29,14.71 C9.10068735,14.5222334 8.99420168,14.2666375 8.99420168,14 C8.99420168,13.7333625 9.10068735,13.4777666 9.29,13.29 L9.29,13.29 L10.59,12 L9.29,10.71 C8.89787783,10.3178778 8.89787783,9.68212217 9.29,9.29 C9.68212217,8.89787783 10.3178778,8.89787783 10.71,9.29 L10.71,9.29 L12,10.59 L13.29,9.29 C13.4777666,9.10068735 13.7333625,8.99420168 14,8.99420168 Z" />
+        </SvgIcon>
+    );
+}