@arcblock/ux 2.9.91 → 2.10.0

package/es/Datatable/TableSearch.js

@@ -1,166 +0,0 @@
-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] = 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 onChange = event => {
-    const {
-      value
-    } = event.currentTarget;
-    if (searchDebounceTime) {
-      clearTimeout(inputTimer.current);
-      setInnerSearchText(value);
-      inputTimer.current = setTimeout(() => {
-        searchTextUpdate(value);
-      }, searchDebounceTime);
-    } else {
-      searchTextUpdate(value);
-    }
-  };
-  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
-};
-TableSearch.defaultProps = {
-  search: '',
-  searchText: '',
-  onSearchOpen: noop
-};
-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;
-    }
-  }
-`;