@mskcc/carbon-react/lib/components/DataTable/TableToolbarSearch.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var Search = require('../Search/Search.js');
require('../Search/Search.Skeleton.js');
var instanceId = require('./tools/instanceId.js');
var usePrefix = require('../../internal/usePrefix.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

const getInstanceId = instanceId["default"]();
const translationKeys = {
  'carbon.table.toolbar.search.label': 'Filter table',
  'carbon.table.toolbar.search.placeholder': 'Filter table'
};
const translateWithId = id => {
  return translationKeys[id];
};
const TableToolbarSearch = _ref => {
  let {
    className,
    searchContainerClass,
    onChange: onChangeProp,
    onClear,
    translateWithId: t,
    placeholder,
    labelText,
    expanded: expandedProp,
    defaultExpanded,
    defaultValue,
    disabled,
    onExpand,
    persistent,
    id,
    onBlur,
    onFocus,
    size = 'lg',
    ...rest
  } = _ref;
  const {
    current: controlled
  } = React.useRef(expandedProp !== undefined);
  const [expandedState, setExpandedState] = React.useState(defaultExpanded || defaultValue);
  const expanded = controlled ? expandedProp : expandedState;
  const [value, setValue] = React.useState(defaultValue || '');
  const uniqueId = React.useMemo(getInstanceId, []);
  const [focusTarget, setFocusTarget] = React.useState(null);
  const prefix = usePrefix.usePrefix();
  React.useEffect(() => {
    if (focusTarget) {
      focusTarget.current.querySelector('input').focus();
      setFocusTarget(null);
    }
  }, [focusTarget]);
  React.useEffect(() => {
    if (defaultValue) {
      onChangeProp('', defaultValue);
    }
  },
  //eslint-disable-next-line react-hooks/exhaustive-deps
  []);
  const searchClasses = cx__default["default"](className, {
    [searchContainerClass]: searchContainerClass,
    [`${prefix}--toolbar-search-container-active`]: expanded,
    [`${prefix}--toolbar-search-container-disabled`]: disabled,
    [`${prefix}--toolbar-search-container-expandable`]: !persistent,
    [`${prefix}--toolbar-search-container-persistent`]: persistent
  });
  const handleExpand = function (event) {
    let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
    if (!disabled) {
      if (!controlled && !persistent) {
        setExpandedState(value);
      }
      if (onExpand) {
        onExpand(event, value);
      }
    }
  };
  const onChange = e => {
    setValue(e.target.value);
    if (onChangeProp) {
      onChangeProp(e);
    }
  };
  const handleOnFocus = event => handleExpand(event, true);
  const handleOnBlur = event => !value && handleExpand(event, false);
  return /*#__PURE__*/React__default["default"].createElement(Search["default"], _rollupPluginBabelHelpers["extends"]({
    disabled: disabled,
    className: searchClasses,
    value: value,
    id: typeof id !== 'undefined' ? id : uniqueId.toString(),
    labelText: labelText || t('carbon.table.toolbar.search.label'),
    placeholder: placeholder || t('carbon.table.toolbar.search.placeholder'),
    onChange: onChange,
    onClear: onClear,
    onFocus: onFocus ? event => onFocus(event, handleExpand) : handleOnFocus,
    onBlur: onBlur ? event => onBlur(event, handleExpand) : handleOnBlur,
    size: size
  }, rest));
};
TableToolbarSearch.propTypes = {
  children: PropTypes__default["default"].node,
  /**
   * Provide an optional class name for the search container
   */
  className: PropTypes__default["default"].string,
  /**
   * Specifies if the search should initially render in an expanded state
   */
  defaultExpanded: PropTypes__default["default"].bool,
  /**
   * Provide an optional default value for the Search component
   */
  defaultValue: PropTypes__default["default"].string,
  /**
   * Specifies if the search should be disabled
   */
  disabled: PropTypes__default["default"].bool,
  /**
   * Specifies if the search should expand
   */
  expanded: PropTypes__default["default"].bool,
  /**
   * Provide an optional id for the search container
   */
  id: PropTypes__default["default"].string,
  /**
   * Provide an optional label text for the Search component icon
   */
  labelText: PropTypes__default["default"].string,
  /**
   * Provide an optional function to be called when the search input loses focus, this will be
   * passed the event as the first parameter and a function to handle the expanding of the search
   * input as the second
   */
  onBlur: PropTypes__default["default"].func,
  /**
   * Provide an optional hook that is called each time the input is updated
   */
  onChange: PropTypes__default["default"].func,
  /**
   * Optional callback called when the search value is cleared.
   */
  onClear: PropTypes__default["default"].func,
  /**
   * Provide an optional hook that is called each time the input is expanded
   */
  onExpand: PropTypes__default["default"].func,
  /**
   * Provide an optional function to be called when the search input gains focus, this will be
   * passed the event as the first parameter and a function to handle the expanding of the search
   * input as the second.
   */
  onFocus: PropTypes__default["default"].func,
  /**
   * Whether the search should be allowed to expand
   */
  persistent: PropTypes__default["default"].bool,
  /**
   * Provide an optional placeholder text for the Search component
   */
  placeholder: PropTypes__default["default"].string,
  /**
   * Provide an optional className for the overall container of the Search
   */
  searchContainerClass: PropTypes__default["default"].string,
  /**
   * Specify the size of the Search
   */
  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
  /**
   * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
   */
  tabIndex: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
  /**
   * Provide custom text for the component for each translation id
   */
  translateWithId: PropTypes__default["default"].func.isRequired
};
TableToolbarSearch.defaultProps = {
  tabIndex: '0',
  translateWithId,
  persistent: false,
  onClear: () => {}
};
var TableToolbarSearch$1 = TableToolbarSearch;

exports["default"] = TableToolbarSearch$1;