@arcblock/ux 2.9.91 → 2.10.0

package/lib/Datatable/TableSearch.js

@@ -1,44 +1,35 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = TableSearch;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
-var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _noop = _interopRequireDefault(require("lodash/noop"));
-var _DatatableContext = require("./DatatableContext");
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function TableSearch(_ref) {
-  let {
-    search,
-    options,
-    searchText,
-    searchTextUpdate,
-    searchClose,
-    onSearchOpen
-  } = _ref;
+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';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function TableSearch({
+  search,
+  options,
+  searchText,
+  searchTextUpdate,
+  searchClose,
+  onSearchOpen
+}) {
   const {
     searchOpen,
     searchPlaceholder,
     searchAlwaysOpen
   } = options;
-  const [inputExpand, setInputExpand] = (0, _react.useState)(!!searchText || searchOpen || false);
-  const [innerSearchText, setInnerSearchText] = (0, _react.useState)(searchText);
-  const inputTimer = (0, _react.useRef)(null);
+  const [inputExpand, setInputExpand] = useState(!!searchText || searchOpen || false);
+  const [innerSearchText, setInnerSearchText] = useState(searchText);
+  const inputTimer = useRef(null);
   const {
     loading
-  } = (0, _DatatableContext.useDatatableContext)();
+  } = useDatatableContext();
   const {
     searchDebounceTime
   } = options;
@@ -67,59 +58,109 @@ function TableSearch(_ref) {
     setInnerSearchText('');
     onSearchOpen(false);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    className: (0, _clsx.default)({
+  return /*#__PURE__*/_jsxs(Container, {
+    className: clsx({
       'search-always-open': searchAlwaysOpen
     }),
-    children: [searchExpand ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [searchExpand ? /*#__PURE__*/_jsx("div", {
       className: "toolbar-search-icon-placeholder",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      children: /*#__PURE__*/_jsx(SearchIcon, {})
+    }) : /*#__PURE__*/_jsx(Tooltip, {
       title: search,
       disableFocusListener: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      children: /*#__PURE__*/_jsx(IconButton, {
         "aria-label": search,
-        "data-testid": "".concat(search, "-iconButton"),
+        "data-testid": `${search}-iconButton`,
         disabled: options.search === 'disabled',
         onClick: clickSearchIcon,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
+        children: /*#__PURE__*/_jsx(SearchIcon, {})
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "toolbar-search-area ".concat(searchExpand ? 'toolbar-btn-show' : ''),
-      children: [searchExpand && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+    }), /*#__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__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      }), loading && /*#__PURE__*/_jsx(TextField, {
         disabled: true,
         variant: "standard",
         spacing: 2,
         value: searchDebounceTime ? innerSearchText : searchText
       })]
-    }), !searchAlwaysOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "toolbar-search-close ".concat(searchExpand ? 'toolbar-btn-show' : ''),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    }), !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__*/(0, _jsxRuntime.jsx)(_Clear.default, {})
+        children: /*#__PURE__*/_jsx(ClearIcon, {})
       })
     })]
   });
 }
 TableSearch.propTypes = {
-  search: _propTypes.default.string,
-  searchText: _propTypes.default.string,
-  onSearchOpen: _propTypes.default.func,
-  options: _propTypes.default.object.isRequired,
-  searchTextUpdate: _propTypes.default.func.isRequired,
-  searchClose: _propTypes.default.func.isRequired
+  search: PropTypes.string,
+  searchText: PropTypes.string,
+  onSearchOpen: PropTypes.func,
+  options: PropTypes.object.isRequired,
+  searchTextUpdate: PropTypes.func.isRequired,
+  searchClose: PropTypes.func.isRequired
 };
 TableSearch.defaultProps = {
   search: '',
   searchText: '',
-  onSearchOpen: _noop.default
+  onSearchOpen: noop
 };
-const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .toolbar-search-area {\n    width: 0;\n    transition: all ease 0.3s;\n    overflow: hidden;\n    .MuiFormControl-root {\n      width: inherit;\n      margin: 0 12px;\n    }\n    &.toolbar-btn-show {\n      width: 260px;\n      padding-left: 8px;\n\n      ", " {\n        width: 200px;\n      }\n\n      ", " {\n        width: 180px;\n      }\n      &.small-textfield {\n        width: 200px;\n      }\n    }\n  }\n  .toolbar-search-close {\n    width: 0;\n    transition: all ease 0.3s;\n    overflow: hidden;\n    &.toolbar-btn-show {\n      width: 40px;\n    }\n  }\n  .toolbar-search-icon-placeholder {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 40px;\n    height: 40px;\n  }\n  &.search-always-open {\n    .MuiFormControl-root {\n      margin: 0 12px 0 0;\n    }\n    .toolbar-btn-show {\n      padding-left: 0;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('sm'));
+const Container = styled('div')`
+  display: flex;
+  align-items: center;
+  .toolbar-search-area {
+    width: 0;
+    transition: all ease 0.3s;
+    overflow: hidden;
+    .MuiFormControl-root {
+      width: inherit;
+      margin: 0 12px;
+    }
+    &.toolbar-btn-show {
+      width: 260px;
+      padding-left: 8px;
+
+      ${props => props.theme.breakpoints.down('md')} {
+        width: 200px;
+      }
+
+      ${props => props.theme.breakpoints.down('sm')} {
+        width: 180px;
+      }
+      &.small-textfield {
+        width: 200px;
+      }
+    }
+  }
+  .toolbar-search-close {
+    width: 0;
+    transition: all ease 0.3s;
+    overflow: hidden;
+    &.toolbar-btn-show {
+      width: 40px;
+    }
+  }
+  .toolbar-search-icon-placeholder {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+  }
+  &.search-always-open {
+    .MuiFormControl-root {
+      margin: 0 12px 0 0;
+    }
+    .toolbar-btn-show {
+      padding-left: 0;
+    }
+  }
+`;