@arcblock/ux 2.13.70 → 3.0.0

package/lib/Datatable/DatatableContext.js

@@ -1,37 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState } from 'react';
-const DatatableContext = /*#__PURE__*/createContext({});
-const {
-  Provider
-} = DatatableContext;
-
-// eslint-disable-next-line react/prop-types
-function DatatableProvider({
-  children
-}) {
-  const [customButtons, setCustomButtons] = useState([]);
-  const [customPreButtons, setCustomPreButtons] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [disabled, setDisabled] = useState(false);
-  const [filterLabel, setFilterLabel] = useState('Filter');
-  const value = {
-    customButtons,
-    setCustomButtons,
-    customPreButtons,
-    setCustomPreButtons,
-    filterLabel,
-    setFilterLabel,
-    loading,
-    setLoading,
-    disabled,
-    setDisabled
-  };
-  return /*#__PURE__*/_jsx(Provider, {
-    value: value,
-    children: children
-  });
+import { jsx as d } from "react/jsx-runtime";
+import { createContext as f, useState as t, use as x } from "react";
+const e = f({}), { Provider: C } = e;
+function P({ children: o }) {
+  const [s, n] = t([]), [a, r] = t([]), [u, l] = t(!1), [c, i] = t(!1), [m, b] = t("Filter");
+  return /* @__PURE__ */ d(C, { value: {
+    customButtons: s,
+    setCustomButtons: n,
+    customPreButtons: a,
+    setCustomPreButtons: r,
+    filterLabel: m,
+    setFilterLabel: b,
+    loading: u,
+    setLoading: l,
+    disabled: c,
+    setDisabled: i
+  }, children: o });
 }
-function useDatatableContext() {
-  return useContext(DatatableContext);
+function p() {
+  return x(e);
 }
-export { DatatableProvider, useDatatableContext };
+export {
+  P as DatatableProvider,
+  p as useDatatableContext
+};

package/lib/Datatable/TableSearch.d.ts

@@ -1,10 +1,11 @@
-declare function TableSearch({ search, options, searchText, searchTextUpdate, searchClose, onSearchOpen }: {
-    search: any;
+import { default as PropTypes } from 'prop-types';
+declare function TableSearch({ search, options, searchText, searchTextUpdate, searchClose, onSearchOpen, }: {
+    search?: string | undefined;
     options: any;
-    searchText: any;
+    searchText?: string | undefined;
     searchTextUpdate: any;
     searchClose: any;
-    onSearchOpen: any;
+    onSearchOpen?: ((...args: any[]) => void) | undefined;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace TableSearch {
     namespace propTypes {
@@ -15,14 +16,5 @@ declare namespace TableSearch {
         let searchTextUpdate: PropTypes.Validator<(...args: any[]) => any>;
         let searchClose: PropTypes.Validator<(...args: any[]) => any>;
     }
-    namespace defaultProps {
-        let search_1: string;
-        export { search_1 as search };
-        let searchText_1: string;
-        export { searchText_1 as searchText };
-        export { noop as onSearchOpen };
-    }
 }
 export default TableSearch;
-import PropTypes from 'prop-types';
-import noop from 'lodash/noop';

package/lib/Datatable/TableSearch.js

@@ -1,118 +1,83 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import SearchIcon from '@mui/icons-material/Search';
-import TextField from '@mui/material/TextField';
-import ClearIcon from '@mui/icons-material/Clear';
-import clsx from 'clsx';
-import noop from 'lodash/noop';
-import { useDatatableContext } from './DatatableContext';
-import { styled } from '../Theme';
-export default function TableSearch({
-  search,
-  options,
-  searchText,
-  searchTextUpdate,
-  searchClose,
-  onSearchOpen
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { useState as x, useRef as I } from "react";
+import o from "prop-types";
+import { Tooltip as N, IconButton as w, TextField as g } from "@mui/material";
+import { Search as v, Clear as R } from "@mui/icons-material";
+import q from "clsx";
+import E from "lodash/noop";
+import { useDatatableContext as B } from "./DatatableContext.js";
+import { styled as D } from "../Theme/index.js";
+function M({
+  search: t = "",
+  options: s,
+  searchText: a = "",
+  searchTextUpdate: c,
+  searchClose: C,
+  onSearchOpen: d = E
 }) {
-  const {
-    searchOpen,
-    searchPlaceholder,
-    searchAlwaysOpen
-  } = options;
-  const [inputExpand, setInputExpand] = useState(!!searchText || searchOpen || false);
-  const [innerSearchText, setInnerSearchText] = useState(searchText);
-  const inputTimer = useRef(null);
-  const {
-    loading
-  } = useDatatableContext();
-  const {
-    searchDebounceTime
-  } = options;
-  const searchExpand = searchAlwaysOpen || inputExpand;
-  const clickSearchIcon = () => {
-    setInputExpand(true);
-    onSearchOpen(true);
+  const { searchOpen: T, searchPlaceholder: y, searchAlwaysOpen: r } = s, [k, h] = x(!!a || T || !1), [p, m] = x(a), u = I(null), { loading: b } = B(), { searchDebounceTime: n } = s, i = r || k, S = () => {
+    h(!0), d(!0);
+  }, F = (j) => {
+    const { value: l } = j.currentTarget;
+    n ? (clearTimeout(u.current), m(l), u.current = setTimeout(() => {
+      c(l);
+    }, n)) : c(l);
+  }, $ = () => {
+    h(!1), C(), m(""), d(!1);
   };
-  const onChange = event => {
-    const {
-      value
-    } = event.currentTarget;
-    if (searchDebounceTime) {
-      clearTimeout(inputTimer.current);
-      setInnerSearchText(value);
-      inputTimer.current = setTimeout(() => {
-        searchTextUpdate(value);
-      }, searchDebounceTime);
-    } else {
-      searchTextUpdate(value);
+  return /* @__PURE__ */ f(
+    O,
+    {
+      className: q({
+        "search-always-open": r
+      }),
+      children: [
+        i ? /* @__PURE__ */ e("div", { className: "toolbar-search-icon-placeholder", children: /* @__PURE__ */ e(v, {}) }) : /* @__PURE__ */ e(N, { title: t, disableFocusListener: !0, children: /* @__PURE__ */ e(
+          w,
+          {
+            "aria-label": t,
+            "data-testid": `${t}-iconButton`,
+            disabled: s.search === "disabled",
+            onClick: S,
+            children: /* @__PURE__ */ e(v, {})
+          }
+        ) }),
+        /* @__PURE__ */ f("div", { className: `toolbar-search-area ${i ? "toolbar-btn-show" : ""}`, children: [
+          i && !b && /* @__PURE__ */ e(
+            g,
+            {
+              variant: "standard",
+              spacing: 2,
+              onChange: F,
+              value: n ? p : a,
+              placeholder: y || "",
+              autoFocus: !r
+            }
+          ),
+          b && /* @__PURE__ */ e(
+            g,
+            {
+              disabled: !0,
+              variant: "standard",
+              spacing: 2,
+              value: n ? p : a
+            }
+          )
+        ] }),
+        !r && /* @__PURE__ */ e("div", { className: `toolbar-search-close ${i ? "toolbar-btn-show" : ""}`, children: /* @__PURE__ */ e(w, { onClick: $, "aria-label": "click to close the search box", children: /* @__PURE__ */ e(R, {}) }) })
+      ]
     }
-  };
-  const clickClose = () => {
-    setInputExpand(false);
-    searchClose();
-    setInnerSearchText('');
-    onSearchOpen(false);
-  };
-  return /*#__PURE__*/_jsxs(Container, {
-    className: clsx({
-      'search-always-open': searchAlwaysOpen
-    }),
-    children: [searchExpand ? /*#__PURE__*/_jsx("div", {
-      className: "toolbar-search-icon-placeholder",
-      children: /*#__PURE__*/_jsx(SearchIcon, {})
-    }) : /*#__PURE__*/_jsx(Tooltip, {
-      title: search,
-      disableFocusListener: true,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        "aria-label": search,
-        "data-testid": `${search}-iconButton`,
-        disabled: options.search === 'disabled',
-        onClick: clickSearchIcon,
-        children: /*#__PURE__*/_jsx(SearchIcon, {})
-      })
-    }), /*#__PURE__*/_jsxs("div", {
-      className: `toolbar-search-area ${searchExpand ? 'toolbar-btn-show' : ''}`,
-      children: [searchExpand && !loading && /*#__PURE__*/_jsx(TextField, {
-        variant: "standard",
-        spacing: 2,
-        onChange: onChange,
-        value: searchDebounceTime ? innerSearchText : searchText,
-        placeholder: searchPlaceholder || '',
-        autoFocus: !searchAlwaysOpen
-      }), loading && /*#__PURE__*/_jsx(TextField, {
-        disabled: true,
-        variant: "standard",
-        spacing: 2,
-        value: searchDebounceTime ? innerSearchText : searchText
-      })]
-    }), !searchAlwaysOpen && /*#__PURE__*/_jsx("div", {
-      className: `toolbar-search-close ${searchExpand ? 'toolbar-btn-show' : ''}`,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        onClick: clickClose,
-        "aria-label": "click to close the search box",
-        children: /*#__PURE__*/_jsx(ClearIcon, {})
-      })
-    })]
-  });
+  );
 }
-TableSearch.propTypes = {
-  search: PropTypes.string,
-  searchText: PropTypes.string,
-  onSearchOpen: PropTypes.func,
-  options: PropTypes.object.isRequired,
-  searchTextUpdate: PropTypes.func.isRequired,
-  searchClose: PropTypes.func.isRequired
+M.propTypes = {
+  search: o.string,
+  searchText: o.string,
+  onSearchOpen: o.func,
+  options: o.object.isRequired,
+  searchTextUpdate: o.func.isRequired,
+  searchClose: o.func.isRequired
 };
-TableSearch.defaultProps = {
-  search: '',
-  searchText: '',
-  onSearchOpen: noop
-};
-const Container = styled('div')`
+const O = D("div")`
   display: flex;
   align-items: center;
   .toolbar-search-area {
@@ -127,11 +92,11 @@ const Container = styled('div')`
       width: 260px;
       padding-left: 8px;
 
-      ${props => props.theme.breakpoints.down('md')} {
+      ${(t) => t.theme.breakpoints.down("md")} {
         width: 200px;
       }
 
-      ${props => props.theme.breakpoints.down('sm')} {
+      ${(t) => t.theme.breakpoints.down("sm")} {
         width: 180px;
       }
       &.small-textfield {
@@ -162,4 +127,7 @@ const Container = styled('div')`
       padding-left: 0;
     }
   }
-`;
+`;
+export {
+  M as default
+};

package/lib/Datatable/index.d.ts

@@ -1,33 +1,34 @@
+import { TableFilterList, TableFooter } from 'mui-datatables';
 /**
  * @description
  * @export
  * @param {DataTableProps} props
  * @return {import('react').ReactComponentElement}
  */
-export default function DataTable(props: DataTableProps): import("react").ReactComponentElement<any, Pick<any, string | number | symbol>>;
+export default function DataTable(props: DataTableProps): import('react').ReactComponentElement<any, Pick<any, string | number | symbol>>;
 export function getDurableData(key: any): any;
 export type DataTableCustomButton = {
-    icon: import("react").ReactElement;
-    title: import("react").ReactElement | string;
+    icon: import('react').ReactElement;
+    title: import('react').ReactElement | string;
     onClick?: () => void;
 };
 export type DataTableColumn = {
     name: string;
     width?: number;
     align?: "left" | "center" | "right";
-} & import("mui-datatables").MUIDataTableColumnDef;
-export type DataTableState = Pick<import("mui-datatables").MUIDataTableState, "count" | "page" | "rowsPerPage" | "searchText" | "sortOrder" | "filterList">;
+} & import('mui-datatables').MUIDataTableColumnDef;
+export type DataTableState = Pick<import('mui-datatables').MUIDataTableState, "count" | "page" | "rowsPerPage" | "searchText" | "sortOrder" | "filterList">;
 export type ModifiedMUIDataTableProps = {
-    title?: import("react").ReactElement | string;
-} & Omit<import("mui-datatables").MUIDataTableProps, "title">;
+    title?: import('react').ReactElement | string;
+} & Omit<import('mui-datatables').MUIDataTableProps, "title">;
 export type DataTableProps = {
     data: Array<object | number[] | string[]>;
     columns: Array<DataTableColumn>;
-    locale?: import("../type").Locale;
+    locale?: import('../type').Locale;
     options?: {
         searchDebounceTime?: number;
-    } & import("mui-datatables").MUIDataTableOptions;
-    style?: import("react").CSSProperties;
+    } & import('mui-datatables').MUIDataTableOptions;
+    style?: import('react').CSSProperties;
     customButtons?: Array<DataTableCustomButton>;
     customPreButtons?: Array<DataTableCustomButton>;
     onChange?: (state: DataTableState, action: string) => void | Promise<void>;
@@ -37,13 +38,11 @@ export type DataTableProps = {
     verticalKeyWidth?: number | string;
     hideTableHeader?: false | true;
     components?: ModifiedMUIDataTableProps["components"];
-    emptyNode?: import("react").ReactNode;
+    emptyNode?: import('react').ReactNode;
     durable?: string;
     durableKeys?: "page" | "rowsPerPage" | "searchText" | "sortOrder";
     bgColor?: string;
     hoverColor?: string;
     stripColor?: string;
 } & ModifiedMUIDataTableProps;
-import { TableFilterList } from 'mui-datatables';
-import { TableFooter } from 'mui-datatables';
 export { TableFilterList, TableFooter };