@etsoo/materialui 1.1.27 → 1.1.29

package/lib/Tiplist.d.ts

@@ -8,7 +8,11 @@ export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<A
     /**
      * Load data callback
      */
-    loadData: (keyword?: string, id?: T[D]) => PromiseLike<T[] | null | undefined>;
+    loadData: (keyword: string | undefined, id: T[D] | undefined, maxItems: number) => PromiseLike<T[] | null | undefined>;
+    /**
+     * Max items to read and display
+     */
+    maxItems?: number;
 };
 /**
  * Tiplist

package/lib/Tiplist.js

@@ -12,9 +12,9 @@ import { SearchField } from "./SearchField";
  */
 export function Tiplist(props) {
     // Labels
-    const labels = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading");
+    const labels = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "more");
     // Destruct
-    const { search = false, idField = "id", idValue, inputAutoComplete = "new-password", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: "180px" }, noOptionsText = labels === null || labels === void 0 ? void 0 : labels.noOptions, loadingText = labels === null || labels === void 0 ? void 0 : labels.loading, ...rest } = props;
+    const { search = false, idField = "id", idValue, inputAutoComplete = "new-password", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, maxItems = 16, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: "180px" }, noOptionsText = labels === null || labels === void 0 ? void 0 : labels.noOptions, loadingText = labels === null || labels === void 0 ? void 0 : labels.loading, getOptionLabel, getOptionDisabled, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Local value
@@ -81,9 +81,12 @@ export function Tiplist(props) {
         if (!states.loading)
             stateUpdate({ loading: true });
         // Load list
-        loadData(keyword, id).then((options) => {
+        loadData(keyword, id, maxItems).then((options) => {
             if (!isMounted.current)
                 return;
+            if (options != null && options.length >= maxItems) {
+                options.push({ [idField]: "n/a" });
+            }
             // Indicates loading completed
             stateUpdate({
                 loading: false,
@@ -152,5 +155,20 @@ export function Tiplist(props) {
                     open: false,
                     ...(!states.value && { options: [] })
                 });
-            }, loading: states.loading, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], noOptionsText: noOptionsText, loadingText: loadingText, ...rest })));
+            }, loading: states.loading, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], noOptionsText: noOptionsText, loadingText: loadingText, getOptionDisabled: (item) => {
+                if (item[idField] === "n/a")
+                    return true;
+                return getOptionDisabled ? getOptionDisabled(item) : false;
+            }, getOptionLabel: (item) => {
+                var _a;
+                if (item[idField] === "n/a")
+                    return ((_a = labels.more) !== null && _a !== void 0 ? _a : "More") + "...";
+                return getOptionLabel
+                    ? getOptionLabel(item)
+                    : "label" in item
+                        ? `${item.label}`
+                        : "name" in item
+                            ? `${item.name}`
+                            : `${item}`;
+            }, ...rest })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.27",
+  "version": "1.1.29",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@etsoo/appscript": "^1.3.61",
+    "@etsoo/appscript": "^1.3.62",
     "@etsoo/notificationbase": "^1.1.23",
-    "@etsoo/react": "^1.6.45",
+    "@etsoo/react": "^1.6.46",
     "@etsoo/shared": "^1.1.88",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.7",

package/src/Tiplist.tsx

@@ -18,9 +18,15 @@ export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<
    * Load data callback
    */
   loadData: (
-    keyword?: string,
-    id?: T[D]
+    keyword: string | undefined,
+    id: T[D] | undefined,
+    maxItems: number
   ) => PromiseLike<T[] | null | undefined>;
+
+  /**
+   * Max items to read and display
+   */
+  maxItems?: number;
 };
 
 // Multiple states
@@ -41,7 +47,7 @@ export function Tiplist<
   D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: TiplistProps<T, D>) {
   // Labels
-  const labels = globalApp?.getLabels("noOptions", "loading");
+  const labels = globalApp?.getLabels("noOptions", "loading", "more");
 
   // Destruct
   const {
@@ -59,6 +65,7 @@ export function Tiplist<
     loadData,
     defaultValue,
     value,
+    maxItems = 16,
     name,
     readOnly,
     onChange,
@@ -66,6 +73,8 @@ export function Tiplist<
     sx = { minWidth: "180px" },
     noOptionsText = labels?.noOptions,
     loadingText = labels?.loading,
+    getOptionLabel,
+    getOptionDisabled,
     ...rest
   } = props;
 
@@ -161,9 +170,13 @@ export function Tiplist<
     if (!states.loading) stateUpdate({ loading: true });
 
     // Load list
-    loadData(keyword, id).then((options) => {
+    loadData(keyword, id, maxItems).then((options) => {
       if (!isMounted.current) return;
 
+      if (options != null && options.length >= maxItems) {
+        options.push({ [idField]: "n/a" } as T);
+      }
+
       // Indicates loading completed
       stateUpdate({
         loading: false,
@@ -299,6 +312,20 @@ export function Tiplist<
         }
         noOptionsText={noOptionsText}
         loadingText={loadingText}
+        getOptionDisabled={(item) => {
+          if (item[idField] === "n/a") return true;
+          return getOptionDisabled ? getOptionDisabled(item) : false;
+        }}
+        getOptionLabel={(item) => {
+          if (item[idField] === "n/a") return (labels.more ?? "More") + "...";
+          return getOptionLabel
+            ? getOptionLabel(item)
+            : "label" in item
+            ? `${item.label}`
+            : "name" in item
+            ? `${item.name}`
+            : `${item}`;
+        }}
         {...rest}
       />
     </div>