@etsoo/materialui 1.2.53 → 1.2.54

package/lib/ListChooser.d.ts

@@ -1,6 +1,6 @@
-import { DataTypes, DelayedExecutorType, IdDefaultType } from '@etsoo/shared';
-import { ListItemButtonProps, ListProps } from '@mui/material';
-import React from 'react';
+import { DataTypes, DelayedExecutorType, IdDefaultType } from "@etsoo/shared";
+import { ListItemButtonProps, ListProps } from "@mui/material";
+import React from "react";
 type QueryData = {
     title?: string;
 };
@@ -46,6 +46,10 @@ export type ListChooserProps<T extends object, D extends DataTypes.Keys<T>, Q ex
      * Title
      */
     title: string;
+    /**
+     * Double click enabled
+     */
+    doubleClickEnabled?: boolean;
 };
 /**
  * List chooser

package/lib/ListChooser.js

@@ -1,7 +1,8 @@
-import { useDelayedExecutor } from '@etsoo/react';
-import { List, ListItem, ListItemButton, ListItemText, TextField } from '@mui/material';
-import React from 'react';
-import { VBox } from './FlexBox';
+import { useDelayedExecutor } from "@etsoo/react";
+import { List, ListItem, ListItemButton, ListItemText, TextField } from "@mui/material";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import React from "react";
+import { VBox } from "./FlexBox";
 /**
  * List chooser
  * @param props Props
@@ -29,19 +30,20 @@ export function ListChooser(props) {
     });
     // Destruct
     const { conditionRenderer = (rq, delayed) => (React.createElement(TextField, { autoFocus: true, margin: "dense", name: "title", label: title, fullWidth: true, variant: "standard", inputProps: { maxLength: 128 }, onChange: (event) => {
-            Reflect.set(rq, 'title', event.target.value);
+            Reflect.set(rq, "title", event.target.value);
             delayed.call();
         } })), itemRenderer = (item, selectProps) => {
         const id = item[idField];
-        const label = typeof labelField === 'function'
+        const sp = selectProps(id);
+        const label = typeof labelField === "function"
             ? labelField(item)
             : Reflect.get(item, labelField);
-        return (React.createElement(ListItem, { disableGutters: true, key: `${id}` },
-            React.createElement(ListItemButton, { ...selectProps(id) },
+        return (React.createElement(ListItem, { disableGutters: true, key: `${id}`, secondaryAction: sp.selected ? React.createElement(CheckBoxIcon, { fontSize: "small" }) : undefined },
+            React.createElement(ListItemButton, { ...sp },
                 React.createElement(ListItemText, { primary: label }))));
-    }, idField = 'id', labelField = 'label', loadData, multiple = false, onItemChange, title, ...rest } = props;
+    }, idField = "id", labelField = "label", loadData, multiple = false, onItemChange, title, doubleClickEnabled = false, onDoubleClick, ...rest } = props;
     // Default minimum height
-    (_a = rest.sx) !== null && _a !== void 0 ? _a : (rest.sx = { minHeight: '220px' });
+    (_a = rest.sx) !== null && _a !== void 0 ? _a : (rest.sx = { minHeight: "220px" });
     // State
     const [items, setItems] = React.useState([]);
     // Query request data
@@ -72,8 +74,20 @@ export function ListChooser(props) {
             delayed.clear();
         };
     }, [delayed]);
+    const onDoubleClickLocal = (event) => {
+        var _a;
+        if (onDoubleClick)
+            onDoubleClick(event);
+        if (doubleClickEnabled) {
+            const button = (_a = event.currentTarget
+                .closest("form")) === null || _a === void 0 ? void 0 : _a.elements.namedItem("okButton");
+            if (button) {
+                button.click();
+            }
+        }
+    };
     // Layout
     return (React.createElement(VBox, null,
         conditionRenderer(rq.current, delayed),
-        React.createElement(List, { disablePadding: true, dense: true, ...rest }, items.map((item) => itemRenderer(item, selectProps)))));
+        React.createElement(List, { onDoubleClick: onDoubleClickLocal, disablePadding: true, dense: true, ...rest }, items.map((item) => itemRenderer(item, selectProps)))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.53",
+  "version": "1.2.54",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/ListChooser.tsx

@@ -1,84 +1,90 @@
-import { useDelayedExecutor } from '@etsoo/react';
-import { DataTypes, DelayedExecutorType, IdDefaultType } from '@etsoo/shared';
+import { useDelayedExecutor } from "@etsoo/react";
+import { DataTypes, DelayedExecutorType, IdDefaultType } from "@etsoo/shared";
 import {
-    List,
-    ListItem,
-    ListItemButton,
-    ListItemButtonProps,
-    ListItemText,
-    ListProps,
-    TextField
-} from '@mui/material';
-import React from 'react';
-import { VBox } from './FlexBox';
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemButtonProps,
+  ListItemText,
+  ListProps,
+  TextField
+} from "@mui/material";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import React from "react";
+import { VBox } from "./FlexBox";
 
 type QueryData = {
-    title?: string;
+  title?: string;
 };
 
 /**
  * List chooser button props
  */
 export interface ListChooserButtonProps<
-    T extends object,
-    D extends DataTypes.Keys<T>
+  T extends object,
+  D extends DataTypes.Keys<T>
 > {
-    (id: T[D]): ListItemButtonProps;
+  (id: T[D]): ListItemButtonProps;
 }
 
 /**
  * List chooser props
  */
 export type ListChooserProps<
-    T extends object,
-    D extends DataTypes.Keys<T>,
-    Q extends object
+  T extends object,
+  D extends DataTypes.Keys<T>,
+  Q extends object
 > = ListProps & {
-    /**
-     * Condition renderer
-     */
-    conditionRenderer?: (
-        rq: Partial<Q>,
-        delayed: DelayedExecutorType
-    ) => React.ReactNode;
-
-    /**
-     * List item renderer
-     */
-    itemRenderer?: (
-        data: T,
-        props: ListChooserButtonProps<T, D>
-    ) => React.ReactNode;
-
-    /**
-     * Label field
-     */
-    labelField?: DataTypes.Keys<T, string> | ((data: T) => string);
-
-    /**
-     * Id field
-     */
-    idField?: D;
-
-    /**
-     * Load data callback
-     */
-    loadData: (rq: Partial<Q>) => PromiseLike<T[] | null | undefined>;
-
-    /**
-     * Multiple selected
-     */
-    multiple?: boolean;
-
-    /**
-     * Item onchange callback
-     */
-    onItemChange: (items: T[], ids: T[D][]) => void;
-
-    /**
-     * Title
-     */
-    title: string;
+  /**
+   * Condition renderer
+   */
+  conditionRenderer?: (
+    rq: Partial<Q>,
+    delayed: DelayedExecutorType
+  ) => React.ReactNode;
+
+  /**
+   * List item renderer
+   */
+  itemRenderer?: (
+    data: T,
+    props: ListChooserButtonProps<T, D>
+  ) => React.ReactNode;
+
+  /**
+   * Label field
+   */
+  labelField?: DataTypes.Keys<T, string> | ((data: T) => string);
+
+  /**
+   * Id field
+   */
+  idField?: D;
+
+  /**
+   * Load data callback
+   */
+  loadData: (rq: Partial<Q>) => PromiseLike<T[] | null | undefined>;
+
+  /**
+   * Multiple selected
+   */
+  multiple?: boolean;
+
+  /**
+   * Item onchange callback
+   */
+  onItemChange: (items: T[], ids: T[D][]) => void;
+
+  /**
+   * Title
+   */
+  title: string;
+
+  /**
+   * Double click enabled
+   */
+  doubleClickEnabled?: boolean;
 };
 
 /**
@@ -87,118 +93,139 @@ export type ListChooserProps<
  * @returns Component
  */
 export function ListChooser<
-    T extends object,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>,
-    Q extends object = QueryData
+  T extends object,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>,
+  Q extends object = QueryData
 >(props: ListChooserProps<T, D, Q>) {
-    // Selected ids state
-    const [selectedIds, setSelectedIds] = React.useState<T[D][]>([]);
-
-    const selectProps: ListChooserButtonProps<T, D> = (id: T[D]) => ({
-        selected: selectedIds.includes(id),
-        onClick: () => {
-            if (multiple) {
-                const index = selectedIds.indexOf(id);
-                if (index === -1) selectedIds.push(id);
-                else selectedIds.splice(index, 1);
-                setSelectedIds([...selectedIds]);
-            } else {
-                setSelectedIds([id]);
-            }
-        }
-    });
-
-    // Destruct
-    const {
-        conditionRenderer = (rq: Partial<Q>, delayed: DelayedExecutorType) => (
-            <TextField
-                autoFocus
-                margin="dense"
-                name="title"
-                label={title}
-                fullWidth
-                variant="standard"
-                inputProps={{ maxLength: 128 }}
-                onChange={(event) => {
-                    Reflect.set(rq, 'title', event.target.value);
-                    delayed.call();
-                }}
-            />
-        ),
-        itemRenderer = (item, selectProps) => {
-            const id = item[idField];
-            const label =
-                typeof labelField === 'function'
-                    ? labelField(item)
-                    : (Reflect.get(item, labelField) as React.ReactNode);
-
-            return (
-                <ListItem disableGutters key={`${id}`}>
-                    <ListItemButton {...selectProps(id)}>
-                        <ListItemText primary={label} />
-                    </ListItemButton>
-                </ListItem>
-            );
-        },
-        idField = 'id' as D,
-        labelField = 'label',
-        loadData,
-        multiple = false,
-        onItemChange,
-        title,
-        ...rest
-    } = props;
-
-    // Default minimum height
-    rest.sx ??= { minHeight: '220px' };
-
-    // State
-    const [items, setItems] = React.useState<T[]>([]);
-
-    // Query request data
-    const mounted = React.useRef<boolean>(false);
-    const rq = React.useRef<Partial<Q>>({});
-
-    // Delayed execution
-    const delayed = useDelayedExecutor(async () => {
-        const result = await loadData(rq.current);
-        if (result == null || !mounted.current) return;
-
-        if (
-            !multiple &&
-            selectedIds.length > 0 &&
-            !result.some((item) => selectedIds.includes(item[idField]))
-        ) {
-            setSelectedIds([]);
-        }
-
-        setItems(result);
-    }, 480);
-
-    React.useEffect(() => {
-        if (!mounted.current) return;
-        onItemChange(
-            items.filter((item) => selectedIds.includes(item[idField])),
-            selectedIds
-        );
-    }, [selectedIds]);
-
-    React.useEffect(() => {
-        mounted.current = true;
-        delayed.call(0);
-        return () => {
-            mounted.current = false;
-            delayed.clear();
-        };
-    }, [delayed]);
-
-    // Layout
-    return (
-        <VBox>
-            {conditionRenderer(rq.current, delayed)}
-            <List disablePadding dense {...rest}>
-                {items.map((item) => itemRenderer(item, selectProps))}
-            </List>
-        </VBox>
+  // Selected ids state
+  const [selectedIds, setSelectedIds] = React.useState<T[D][]>([]);
+
+  const selectProps: ListChooserButtonProps<T, D> = (id: T[D]) => ({
+    selected: selectedIds.includes(id),
+    onClick: () => {
+      if (multiple) {
+        const index = selectedIds.indexOf(id);
+        if (index === -1) selectedIds.push(id);
+        else selectedIds.splice(index, 1);
+        setSelectedIds([...selectedIds]);
+      } else {
+        setSelectedIds([id]);
+      }
+    }
+  });
+
+  // Destruct
+  const {
+    conditionRenderer = (rq: Partial<Q>, delayed: DelayedExecutorType) => (
+      <TextField
+        autoFocus
+        margin="dense"
+        name="title"
+        label={title}
+        fullWidth
+        variant="standard"
+        inputProps={{ maxLength: 128 }}
+        onChange={(event) => {
+          Reflect.set(rq, "title", event.target.value);
+          delayed.call();
+        }}
+      />
+    ),
+    itemRenderer = (item, selectProps) => {
+      const id = item[idField];
+      const sp = selectProps(id);
+      const label =
+        typeof labelField === "function"
+          ? labelField(item)
+          : (Reflect.get(item, labelField) as React.ReactNode);
+
+      return (
+        <ListItem
+          disableGutters
+          key={`${id}`}
+          secondaryAction={
+            sp.selected ? <CheckBoxIcon fontSize="small" /> : undefined
+          }
+        >
+          <ListItemButton {...sp}>
+            <ListItemText primary={label} />
+          </ListItemButton>
+        </ListItem>
+      );
+    },
+    idField = "id" as D,
+    labelField = "label",
+    loadData,
+    multiple = false,
+    onItemChange,
+    title,
+    doubleClickEnabled = false,
+    onDoubleClick,
+    ...rest
+  } = props;
+
+  // Default minimum height
+  rest.sx ??= { minHeight: "220px" };
+
+  // State
+  const [items, setItems] = React.useState<T[]>([]);
+
+  // Query request data
+  const mounted = React.useRef<boolean>(false);
+  const rq = React.useRef<Partial<Q>>({});
+
+  // Delayed execution
+  const delayed = useDelayedExecutor(async () => {
+    const result = await loadData(rq.current);
+    if (result == null || !mounted.current) return;
+
+    if (
+      !multiple &&
+      selectedIds.length > 0 &&
+      !result.some((item) => selectedIds.includes(item[idField]))
+    ) {
+      setSelectedIds([]);
+    }
+
+    setItems(result);
+  }, 480);
+
+  React.useEffect(() => {
+    if (!mounted.current) return;
+    onItemChange(
+      items.filter((item) => selectedIds.includes(item[idField])),
+      selectedIds
     );
+  }, [selectedIds]);
+
+  React.useEffect(() => {
+    mounted.current = true;
+    delayed.call(0);
+    return () => {
+      mounted.current = false;
+      delayed.clear();
+    };
+  }, [delayed]);
+
+  const onDoubleClickLocal = (event: React.MouseEvent<HTMLUListElement>) => {
+    if (onDoubleClick) onDoubleClick(event);
+    if (doubleClickEnabled) {
+      const button = event.currentTarget
+        .closest("form")
+        ?.elements.namedItem("okButton") as HTMLButtonElement | undefined;
+      if (button) {
+        button.click();
+      }
+    }
+  };
+
+  // Layout
+  return (
+    <VBox>
+      {conditionRenderer(rq.current, delayed)}
+      <List onDoubleClick={onDoubleClickLocal} disablePadding dense {...rest}>
+        {items.map((item) => itemRenderer(item, selectProps))}
+      </List>
+    </VBox>
+  );
 }