@dashadmin/dash-components 1.3.24 → 1.3.26

package/src/components/SearchableSelects/SearchableSelectCheckboxes.tsx

@@ -0,0 +1,355 @@
+/**
+ * React Auto Admin - SearchableSelect
+ *
+ * @author  Franisco Aranda <francisco.aranda@dash.cl> <faranda@gmail.com>
+ */
+
+import {
+	Autocomplete,
+	AutocompleteProps,
+	Box,
+	Checkbox,
+	CircularProgress,
+	TextField,
+} from '@mui/material';
+import React, { JSX, useEffect, useState } from 'react';
+import { isArray } from 'lodash';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import { useAxios } from 'dash-axios-hook';
+
+export interface ISearchableSelect<
+	T,
+	//Multiple extends boolean | undefined = false,
+	//DisableClearable extends boolean | undefined = false,
+	//FreeSolo extends boolean | undefined = false,
+> extends Omit<
+	AutocompleteProps<T | string, boolean, boolean, boolean>,
+	| 'renderInput'
+	| 'options'
+	| 'isOptionEqualToValue'
+	| 'getOptionLabel'
+	| 'renderOption'
+	> {
+	/** Options are ingored because they are calculated within this component */
+	/** renderInput is ignored because is implemented privately within this component */
+
+	name: string;
+	/** url path to the resource, a getList or getForSelect e.g: 'system/user'  */
+	resource: string;
+	/** label for the select */
+	selectLabel: string;
+	/** Optional function to parse the item and return a string or JSX.Element to show in the selector list*/
+	renderText?: (object: any) => string | JSX.Element;
+	/** @deprecated Optional function will transform the item at the moment of field.onChange */
+	transformData?: (val: any) => any;
+	/** Optional defaultValue, or defaultValues array */
+	defaultValues?: T | T[];
+
+	/** @deprecated pagination, must be sent on filters */
+	pagination?: boolean,
+	/** Min character input to perform search */
+	minSearch?: number;
+	/** @deprecated searchResults, must be sent on filters as perPage */
+	searchResults?: number;
+	/** Search after x ms */
+	timerSearch?: number;
+	/** isEmpty - TODO: this flow is not tested. */
+	isEmpty?: boolean;
+	/** filter - optional parameters for the axios query */
+	filter?: { [x: string]: any };
+	/** name of the query parameter, usually just 'q' or 'search' */
+	queryFilter?: string;
+	/**
+	 * The default function will compare the raw values equality
+	 * the edge case is when a transformData is implemented, then the isOptionEqualToValue will have to compare to the transformation output.
+	 * e.g: isOptionEqualToValue={(option, value) => value === option.id }
+            transformData={(data) => data?.id || null}
+	 */
+	isOptionEqualToValue?: (option: T, value: T) => boolean;
+	/**
+	 * if not specified it will render the raw value for options
+	 * if the response is not just a string or number array, you will have to specify which attribute from the option object you want to render
+	 */
+	renderAttribute?: string;
+	/** elementKeyID, Advanced usage, by default id, specify the attribute from the option object representing the key or id */
+	elementKeyId?: string;
+	/** onChange */
+	//onChange?: (value: T | T[]) => void;
+	/* renderInputTextFieldProps - Partial<TextFieldProps> */
+	renderInputTextFieldProps?: any; // It should be: Partial<TextFieldProps>
+	checkboxes?: boolean;
+	/**
+	 * if its not possible to pass the default values according to the option interface, then set selectedIds, only works when multiple.
+	 * once fetched the options and parsedOptions are available.
+	 */
+	selectedIds?: number[];
+	useDefaultSearch?: boolean;
+}
+
+const icon = <CheckBoxOutlineBlankIcon fontSize='small' />;
+const checkedIcon = <CheckBoxIcon fontSize='small' />;
+
+const SearchableSelectCheckboxes = function WrappedAutoComplete<
+	T,
+>({ ...props }: ISearchableSelect<T>) {
+	const {
+		multiple,
+		freeSolo,
+		minSearch = 3,
+		timerSearch = 500,
+		checkboxes = false,
+		resource,
+		selectLabel,
+		renderText,
+		queryFilter = 'q',
+		defaultValues = null,
+		elementKeyId = 'id',
+		isEmpty = false,
+		filter,
+		isOptionEqualToValue = (option, value) => value === option,
+		renderAttribute = null,
+		name,
+		onChange,
+		renderInputTextFieldProps,
+		selectedIds,
+		useDefaultSearch = false,
+		...rest
+	} = props;
+
+	const [open, setOpen] = useState(false);
+	const [parsedOptions, setParsedOptions] = useState<T[]>(null);
+	const [q, setQ] = useState(null);
+
+	const [resourceData, setResourceData] = useState(null);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const [initialSelectedIds, setInitalSelectedIds] = useState(null);
+
+	const initialIncludes =
+	defaultValues && Array.isArray(defaultValues)
+		? defaultValues.map((element: any) =>
+			element[elementKeyId]
+				? element[elementKeyId]
+				: element)
+		: multiple && initialSelectedIds
+			? initialSelectedIds
+			: defaultValues;
+
+
+	const [includes, setIncludes] = useState(initialIncludes);
+
+	const [controlledValue, setControlledValue] = useState<T | T[]>(null);
+	const axios = useAxios();
+
+	useEffect(() => {
+		setInitalSelectedIds(selectedIds);
+	}, []);
+
+	const updateControlledValue = (val: T | T[], origin?: string) => {
+		if (Array.isArray(val)) {
+			setControlledValue(val as T[]);
+			if ( origin === 'onChange') { setIncludes(val.map((v: any) => v[elementKeyId])); }
+		} else {
+			setControlledValue(val as T);
+			if ( origin === 'onChange') { setIncludes((val as any)[elementKeyId]); }
+		}
+	};
+
+	const search = async () => {
+		setIsLoading(true);
+
+		try {
+			const params = { [queryFilter]: q, ...filter, includes: includes };
+
+			const { data } = await axios.get(resource, {
+				params,
+			});
+
+			setResourceData(data.data);
+		} catch (e: any) {
+			console.error(e);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	useEffect(() => {
+		search();
+	}, []);
+
+	useEffect(() => {
+		if (q && q !== '' && !useDefaultSearch) {
+			search();
+		}
+	}, [q]);
+
+	useEffect(() => {
+		if (resourceData && !isLoading) {
+			if (parsedOptions)
+				setParsedOptions([
+					...parsedOptions,
+					...resourceData.map((ele: any) => {
+						return { ...ele, key: 'option' + ele.id };
+					}),
+				]);
+			setParsedOptions(
+				resourceData.map((ele: any) => {
+					return { ...ele, key: 'option' + ele.id };
+				}),
+			);
+		}
+		return () => setParsedOptions([]);
+	}, [resourceData, isLoading]);
+
+	const [timeOutSearch, setTimeOutSearch] = useState(undefined);
+
+	const debounce = (fn: Function, delay = 500) => {
+		clearTimeout(timeOutSearch);
+		setTimeOutSearch(
+			setTimeout(() => {
+				fn();
+			}, delay),
+		);
+	};
+
+	const checkboxRenderOptions = (p, option, { selected }) => {
+		const { key, ...r } = p as any;
+		return (
+			<li key={option.key} {...r}>
+				<Checkbox
+					icon={icon}
+					checkedIcon={checkedIcon}
+					style={{ marginRight: 8 }}
+					checked={selected}
+				/>
+
+				{renderAttribute && !renderText
+					? option[renderAttribute]
+					: renderText(option)}
+			</li>
+		);
+	};
+
+	const boxRenderOptions = (p, option: any) => {
+		const { key, ...newProps } = p as any;
+		return (
+			<Box
+				key={option.key}
+				component='li'
+				sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+				{...newProps}
+			>
+				{renderAttribute && !renderText
+					? option[renderAttribute]
+					: renderText(option)}
+			</Box>
+		);
+	};
+
+	const _renderOption = checkboxes ? checkboxRenderOptions : boxRenderOptions;
+
+	useEffect(() => {
+		if (multiple && parsedOptions && initialSelectedIds) {
+			const values = parsedOptions.filter((option: any) =>
+				initialSelectedIds.includes(option[elementKeyId]),
+			);
+			updateControlledValue(values, 'selectedIds');
+		}
+	}, [parsedOptions, initialSelectedIds, multiple]);
+
+	useEffect(() => {
+		if (onChange &&
+			controlledValue) {
+			onChange(null, controlledValue as T | T[], null);
+		}
+	}, [controlledValue]);
+	return (
+		<>
+			{isLoading && !parsedOptions ? (
+				<CircularProgress color='inherit' size={20} />
+			) : (
+				<></>
+			)}
+			{parsedOptions && (
+				<Autocomplete
+					key={'autocomplete-' + name}
+					multiple={multiple}
+					freeSolo={freeSolo}
+					loading={isLoading && open}
+					{...(checkboxes && { disableCloseOnSelect: true })}
+					options={parsedOptions}
+					open={open}
+					onOpen={() => setOpen(true)}
+					onClose={() => setOpen(false)}
+					value={controlledValue ? controlledValue : multiple ? [] : null}
+					
+                    
+                    /* @ts-ignore */
+                    isOptionEqualToValue={isOptionEqualToValue}
+					
+                    autoHighlight
+					getOptionLabel={(option: any) => {
+						return renderAttribute && !renderText
+							? option[renderAttribute]
+							: (renderText ? renderText(option) : option)
+					}
+					}
+					renderOption={_renderOption}
+					onChange={(event: any, rawValue, _reason) => {
+						updateControlledValue(rawValue as T | T[], 'onChange');
+					}}
+					renderInput={(params) => {
+						return (
+							<TextField
+								key={params.id}
+								{...params}
+								label={selectLabel}
+								variant='outlined'
+								onChange={(ev) => {
+
+									if(useDefaultSearch !== true) {
+									const searchValue = ev.target.value;
+
+									if (
+										searchValue &&
+										searchValue !== '' &&
+										searchValue.length >= minSearch
+									) {
+									
+										debounce(() => setQ(searchValue), timerSearch);
+									}
+								
+									}
+								}}
+								InputProps={{
+									...params.InputProps,
+									autoComplete: 'new-password',
+									endAdornment: (
+										<>
+											{isLoading ? (
+												<CircularProgress color='inherit' size={20} />
+											) : null}
+											{params.InputProps.endAdornment}
+										</>
+									),
+								}}
+								{...renderInputTextFieldProps}
+							/>
+						);
+					}}
+					{...rest}
+				/>
+			)}
+		</>
+	);
+};
+export const MemoizedSearchableSelectCheckboxes = React.memo(
+	SearchableSelectCheckboxes,
+	() => {
+		// never refresh
+		return true;
+	},
+) as typeof SearchableSelectCheckboxes;
+
+export default SearchableSelectCheckboxes;

package/src/components/SortableDataGrid/SortableDataGrid.tsx

@@ -0,0 +1,56 @@
+import {
+	FC,
+	PropsWithChildren,
+	memo,
+	useRef,
+} from 'react';
+
+import { Datagrid } from 'react-admin';
+import { DatagridProps } from 'react-admin';
+import SortableDatagridBody from './SortableDataGridBody';
+import { SortableDatagridHeader } from './SortableDataGridHeader';
+import SortableDatagridRow from './SortableDataGridRow';
+import React from 'react';
+
+interface ISortableDatagrid extends DatagridProps, PropsWithChildren {
+	onOrderUpdate?: (data: any) => void;
+}
+
+const SortableDatagrid: FC<ISortableDatagrid> = (props) => {
+	const { children, onOrderUpdate, ...rest } = props;
+	const bodyRef = React.useRef(null);
+	//const [tableEl, setTableEl] = useState(null);
+
+	const _onOrderUpdate = (d: any[]) => {
+		if (onOrderUpdate) { onOrderUpdate(d); }
+	};
+
+	const SortableRootDatagrid = (p) => (
+		<Datagrid
+			{...p}
+			header={<SortableDatagridHeader />}
+			body={
+				<SortableDatagridBody
+					/* @ts-ignore : Expected */
+					onOrderUpdate={_onOrderUpdate}
+					ref={bodyRef}
+					//{...props}
+					row={<SortableDatagridRow />}
+				/>
+			}
+		/>
+	);
+
+	const SortableRootDatagridPure = memo(
+		SortableRootDatagrid,
+		() => true,
+	);
+
+	return (
+		<div id='sortable-list'>
+			<SortableRootDatagridPure {...rest}>{children}</SortableRootDatagridPure>
+		</div>
+	);
+};
+
+export default SortableDatagrid;

package/src/components/SortableDataGrid/SortableDataGridBody.tsx

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import { cloneElement, memo, FC, forwardRef } from 'react';
+import { TableBody } from '@mui/material';
+
+import {
+    DatagridBody,
+    DatagridBodyProps,
+    DatagridRow,
+    PureDatagridRow,
+} from 'react-admin';
+
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
+
+export interface ISortableDatagridBodyProps extends DatagridBodyProps {
+    onOrderUpdate?: (data: any[]) => void;
+}
+
+const defaultChildren = <DatagridRow />;
+const defaultData = [];
+
+
+const SortableDatagridBody: FC<ISortableDatagridBodyProps> = forwardRef(
+    (
+        {
+            children,
+            className,
+            data = defaultData,
+            expand,
+            hasBulkActions = false,
+            hover,
+            onToggleItem,
+            resource,
+            row = defaultChildren,
+            rowClick,
+            rowStyle,
+            selectedIds,
+            isRowSelectable,
+            onOrderUpdate,
+            ...rest
+        },
+        _ref,
+    ) => {
+        React.useEffect(() => {
+            console.log('data has been updated');
+        }, [data]);
+
+        const [orderedData, setOrderedData] = React.useState(data);
+
+        /*const updateOrderedData = (data) => {
+      onOrderUpdate && onOrderUpdate(orderedData);
+      setOrderedData(data);
+    };*/
+
+        const reorder = (list, startIndex, endIndex) => {
+            const result = Array.from(list);
+            const [removed] = result.splice(startIndex, 1);
+            result.splice(endIndex, 0, removed);
+
+            return result;
+        };
+
+        const getItemStyle = (isDragging, draggableStyle) => ({
+            border: isDragging ? '1px dashed #ccc' : 'none',
+            ...draggableStyle,
+        });
+
+        const onDragEnd = (result) => {
+            if (!result.destination) {
+                return;
+            }
+
+            const movedItems = reorder(
+                orderedData,
+                result.source.index,
+                result.destination.index,
+            );
+            setOrderedData(movedItems);
+            if (onOrderUpdate) { onOrderUpdate(movedItems); }
+        };
+
+        return (
+         (<DragDropContext onDragEnd={onDragEnd}>
+          <Droppable droppableId='droppable'>
+              {(provided) => (
+                  /* @ts-ignore Expected KnownIssue1 */
+                  (<TableBody
+                      ref={provided.innerRef}
+                      className={'datagrid-body'}
+                      {...rest}
+                  >
+                   {orderedData.map((record, rowIndex) => {
+                       return (
+                           <Draggable
+                               key={record.id}
+                               draggableId={'q-' + record.id}
+                               index={rowIndex}
+                           >
+                               {(p, snapshot) => {
+                                   const defaultStyles = rowStyle
+                                       ? rowStyle(record, rowIndex)
+                                       : {};
+                                   return cloneElement(
+                                       row,
+                                       {
+                                           ref: p.innerRef,
+                                           ...p.draggableProps,
+                                           ...p.dragHandleProps,
+
+                                           /*className: clsx(DatagridClasses.row, {
+                   [DatagridClasses.rowEven]: rowIndex % 2 === 0,
+                   [DatagridClasses.rowOdd]: rowIndex % 2 !== 0,
+                 }),*/
+                                           expand,
+                                           hasBulkActions: hasBulkActions && !!selectedIds,
+                                           hover,
+                                           id: record.id ?? `row${rowIndex}`,
+                                           key: record.id ?? `row${rowIndex}`,
+                                           onToggleItem,
+                                           record,
+                                           resource,
+                                           rowClick,
+                                           selectable:
+                                               !isRowSelectable || isRowSelectable(record),
+                                           selected: selectedIds?.includes(record.id),
+                                           style: {
+                                               ...defaultStyles,
+                                               ...getItemStyle(
+                                                   snapshot.isDragging,
+                                                   p.draggableProps.style,
+                                               ),
+                                           },
+                                       },
+                                       children,
+                                   );
+                               }}
+                           </Draggable>
+                       );
+                   })}
+                  </TableBody>)
+              )}
+          </Droppable>
+         </DragDropContext>)
+        );
+    },
+);
+
+
+
+// @ts-ignore Trick Material UI Table into thinking this is one of the child type it supports.
+SortableDatagridBody.muiName = 'TableBody';
+
+export const PureSortableDatagridBody = memo(
+    (props) => <SortableDatagridBody row={<PureDatagridRow />} {...props} />,
+    () => true,
+); // Memo the sortable table, to avoid data updates.
+
+// @ts-ignore Trick Material UI Table into thinking this is one of the child type it supports
+PureSortableDatagridBody.muiName = 'TableBody';
+
+export default PureSortableDatagridBody;
+
+
+/* KnownIssue1 = No overload matches this call.
+  Overload 1 of 2, '(props: { component: ElementType<any>; } & TableBodyOwnProps & CommonProps & Omit<any, "className" | "style" | "classes" | "children" | "sx">): Element', gave the following error.
+    Type '{ children: Element[]; record?: RaRecord<Identifier>; rowSx?: (record: RaRecord<Identifier>, index: number) => SxProps; ... 262 more ...; className: string; }' is not assignable to type '{ component: ElementType<any>; }'.
+      Property 'component' is optional in type '{ children: Element[]; record?: RaRecord<Identifier>; rowSx?: (record: RaRecord<Identifier>, index: number) => SxProps; ... 262 more ...; className: string; }' but required in type '{ component: ElementType<any>; }'.
+  Overload 2 of 2, '(props: DefaultComponentProps<TableBodyTypeMap<{}, "tbody">>): Element', gave the following error.
+    Types of property 'sx' are incompatible.
+      Type 'import("/node_modules/@mui/system/styleFunctionSx/styleFunctionSx").SxProps<import("/node_modules/react-admin/node_modules/@mui/material/styles/createTheme").Theme>' is not assignable to type 'import("/node_modules/@mui/system/styleFunctionSx/styleFunctionSx").SxProps<import("/node_modules/@mui/material/styles/createTheme").Theme>'.
+        Type 'SystemCssProperties<Theme>' is not assignable to type 'SxProps<Theme>'.
+          Type 'SystemCssProperties<Theme>' is not assignable to type 'CSSSelectorObjectOrCssVariables<Theme>'.
+            Property 'clipPath' is incompatible with index signature.
+              Type 'SystemStyleObject<Theme> | ResponsiveStyleValue<ClipPath | string[]> | ((theme: Theme) => ResponsiveStyleValue<ClipPath | string[]>)' is not assignable to type 'CssVariableType | SystemStyleObject<Theme> | ((theme: Theme) => string | number | SystemStyleObject<Theme>)'.
+                Type 'SystemCssProperties<Theme>' is not assignable to type 'CssVariableType | SystemStyleObject<Theme> | ((theme: Theme) => string | number | SystemStyleObject<Theme>)'.ts(2769)
+*/