@dashadmin/dash-components 1.3.25 → 1.3.28

package/dist/components/SearchableSelects/RASearchableSelect.js

@@ -1 +1,236 @@
-import{Fragment as I,jsx as i,jsxs as K}from"react/jsx-runtime";import{Autocomplete as B,Box as M,CircularProgress as Q,TextField as W}from"@mui/material";import{useEffect as z,useState as g}from"react";import{useController as G}from"react-hook-form";import{useGetList as H}from"react-admin";import{useRecordContext as _}from"react-admin";import{isArray as j}from"lodash";const A=({method:u,attribute:o,isMultiple:d=!1,searchResults:N=50,minSearch:k=3,timerSearch:D=500,resource:L,selectLabel:P,renderText:c,transformData:v,queryFilter:x="q",defaultValues:U=void 0,isEmpty:F=!1,filter:V,isOptionEqualToValue:h=void 0,viewAttribute:f=null,elementKeyId:O="id"})=>{const[S,C]=g(!0),[l,y]=g(null),[b,w]=g(""),a=_(),s=G({name:o.attribute,defaultValue:a?a[o.attribute]:null}),E=a&&a[o.attribute]&&j(a[o.attribute])?a[o.attribute].map(e=>e.hasOwnProperty(O)?e[O]:e):a[o.attribute],{data:p,total:X,isLoading:m,error:Y}=H(L,{filter:{[x]:b,...V,includes:E}},{refetchOnWindowFocus:!1});z(()=>(p&&!m&&(l&&y([...l,...p.map(e=>({...e,key:"option"+e.id}))]),y(p.map(e=>({...e,key:"option"+e.id})))),()=>y([])),[p,m]);const[R,T]=g(void 0),q=(e,t=500)=>{clearTimeout(R),T(setTimeout(()=>{e()},t))};return i(I,{children:l&&i(B,{multiple:d,loading:m&&S,fullWidth:!0,freeSolo:!0,options:l,open:S,onOpen:()=>C(!0),onClose:()=>C(!1),defaultValue:s.field?.value,isOptionEqualToValue:h,autoHighlight:!0,getOptionLabel:e=>{const t=Array.isArray(e)?e:l&&l.find(r=>h(r,s.field.value));if(!t)return b;const n=f&&!c?t[f]:c(t);return console.log("getOptionLabel",l.find(r=>h(r,s.field.value)),n),n||b},renderOption:(e,t)=>{const{key:n,...r}=e;return i(M,{component:"li",sx:{"& > img":{mr:2,flexShrink:0}},...r,children:f&&!c?t[f]:c(t)},t.key)},onChange:(e,t)=>{console.log("onChange",e,t);let n=t;Array.isArray(t)&&(n=F?[...t,...s.field.value]:[...new Map(n.map(r=>[r.id,r])).values()]),v?s.field.onChange(v(n)):s.field.onChange(n)},renderInput:e=>(console.log("renderInput",e.id),i(W,{...e,label:P,variant:"outlined",onChange:t=>{let n=t.target.value;n&&n!==""&&n.length>=k&&q(()=>w(n),D)},InputProps:{...e.InputProps,autoComplete:"new-password",endAdornment:K(I,{children:[m?i(Q,{color:"inherit",size:20}):null,e.InputProps.endAdornment]})}},e.id))},"autocomplete-"+o.attribute)})},J=({method:u,attribute:o,...d})=>{switch(u){case"edit":case"create":return i(A,{attribute:o,method:u,...d});case"view":return i(A,{attribute:o,method:u,...d})}};var de=J;export{de as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Autocomplete,
+  Box,
+  CircularProgress,
+  TextField
+} from "@mui/material";
+import { useEffect, useState } from "react";
+import { useController } from "react-hook-form";
+import { useGetList } from "react-admin";
+import { useRecordContext } from "react-admin";
+import { isArray } from "lodash";
+const SearchableSelect = ({
+  method,
+  attribute,
+  isMultiple = false,
+  //pagination = true,
+  searchResults = 50,
+  minSearch = 3,
+  timerSearch = 500,
+  resource,
+  selectLabel,
+  renderText,
+  transformData,
+  queryFilter = "q",
+  defaultValues = void 0,
+  isEmpty = false,
+  filter,
+  isOptionEqualToValue = void 0,
+  viewAttribute = null,
+  elementKeyId = "id"
+}) => {
+  var _a;
+  const [open, setOpen] = useState(true);
+  const [parsedOptions, setParsedOptions] = useState(null);
+  const [q, setQ] = useState("");
+  const record = useRecordContext();
+  const field = useController({
+    name: attribute.attribute,
+    defaultValue: record ? record[attribute.attribute] : null
+  });
+  const includes = record && record[attribute.attribute] && isArray(record[attribute.attribute]) ? record[attribute.attribute].map(
+    (element) => element.hasOwnProperty(elementKeyId) ? element[elementKeyId] : element
+  ) : record[attribute.attribute];
+  const {
+    data: resourceData,
+    total,
+    isLoading,
+    error
+  } = useGetList(
+    resource,
+    {
+      filter: __spreadProps(__spreadValues({ [queryFilter]: q }, filter), { includes })
+    },
+    { refetchOnWindowFocus: false }
+  );
+  useEffect(() => {
+    if (resourceData && !isLoading) {
+      if (parsedOptions)
+        setParsedOptions([
+          ...parsedOptions,
+          ...resourceData.map((ele) => {
+            return __spreadProps(__spreadValues({}, ele), { key: "option" + ele.id });
+          })
+        ]);
+      setParsedOptions(
+        resourceData.map((ele) => {
+          return __spreadProps(__spreadValues({}, ele), { key: "option" + ele.id });
+        })
+      );
+    }
+    return () => setParsedOptions([]);
+  }, [resourceData, isLoading]);
+  const [timeOutSearch, setTimeOutSearch] = useState(void 0);
+  const debounce = (fn, delay = 500) => {
+    clearTimeout(timeOutSearch);
+    setTimeOutSearch(
+      setTimeout(() => {
+        fn();
+      }, delay)
+    );
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: parsedOptions && /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      multiple: isMultiple,
+      loading: isLoading && open,
+      fullWidth: true,
+      freeSolo: true,
+      options: parsedOptions,
+      open,
+      onOpen: () => setOpen(true),
+      onClose: () => setOpen(false),
+      defaultValue: (_a = field.field) == null ? void 0 : _a.value,
+      isOptionEqualToValue,
+      autoHighlight: true,
+      getOptionLabel: (option) => {
+        const _option = !Array.isArray(option) ? parsedOptions && parsedOptions.find(
+          (ele) => isOptionEqualToValue(ele, field.field.value)
+        ) : option;
+        if (!_option) return q;
+        const r = viewAttribute && !renderText ? _option[viewAttribute] : renderText(_option);
+        console.log(
+          "getOptionLabel",
+          parsedOptions.find(
+            (ele) => isOptionEqualToValue(ele, field.field.value)
+          ),
+          r
+        );
+        if (!r) return q;
+        return r;
+      },
+      renderOption: (props, option) => {
+        const _a2 = props, { key } = _a2, newProps = __objRest(_a2, ["key"]);
+        return /* @__PURE__ */ jsx(
+          Box,
+          __spreadProps(__spreadValues({
+            component: "li",
+            sx: { "& > img": { mr: 2, flexShrink: 0 } }
+          }, newProps), {
+            children: viewAttribute && !renderText ? option[viewAttribute] : renderText(option)
+          }),
+          option.key
+        );
+      },
+      onChange: (event, rawValue) => {
+        console.log("onChange", event, rawValue);
+        let newValue = rawValue;
+        if (Array.isArray(rawValue)) {
+          newValue = isEmpty ? [...rawValue, ...field.field.value] : [
+            ...new Map(
+              newValue.map((v) => [v.id, v])
+            ).values()
+          ];
+        }
+        transformData ? field.field.onChange(transformData(newValue)) : field.field.onChange(newValue);
+      },
+      renderInput: (params) => {
+        console.log("renderInput", params.id);
+        return /* @__PURE__ */ jsx(
+          TextField,
+          __spreadProps(__spreadValues({}, params), {
+            label: selectLabel,
+            variant: "outlined",
+            onChange: (ev) => {
+              let searchValue = ev.target.value;
+              if (searchValue && searchValue !== "" && searchValue.length >= minSearch)
+                debounce(
+                  () => setQ(searchValue),
+                  timerSearch
+                );
+            },
+            InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
+              autoComplete: "new-password",
+              endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+                isLoading ? /* @__PURE__ */ jsx(
+                  CircularProgress,
+                  {
+                    color: "inherit",
+                    size: 20
+                  }
+                ) : null,
+                params.InputProps.endAdornment
+              ] })
+            })
+          }),
+          params.id
+        );
+      }
+    },
+    "autocomplete-" + attribute.attribute
+  ) });
+};
+const RASearchableSelect = (_a) => {
+  var _b = _a, {
+    method,
+    attribute
+  } = _b, props = __objRest(_b, [
+    "method",
+    "attribute"
+  ]);
+  switch (method) {
+    case "edit":
+    case "create":
+      return /* @__PURE__ */ jsx(
+        SearchableSelect,
+        __spreadValues({
+          attribute,
+          method
+        }, props)
+      );
+    case "view":
+      return /* @__PURE__ */ jsx(
+        SearchableSelect,
+        __spreadValues({
+          attribute,
+          method
+        }, props)
+      );
+  }
+};
+var RASearchableSelect_default = RASearchableSelect;
+export {
+  RASearchableSelect_default as default
+};