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

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import cx from 'classnames';
import PropTypes from 'prop-types';
import React__default, { useRef, useState, useMemo, useEffect } from 'react';
import Search from '../Search/Search.js';
import '../Search/Search.Skeleton.js';
import setupGetInstanceId from './tools/instanceId.js';
import { usePrefix } from '../../internal/usePrefix.js';

const getInstanceId = setupGetInstanceId();
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
  } = useRef(expandedProp !== undefined);
  const [expandedState, setExpandedState] = useState(defaultExpanded || defaultValue);
  const expanded = controlled ? expandedProp : expandedState;
  const [value, setValue] = useState(defaultValue || '');
  const uniqueId = useMemo(getInstanceId, []);
  const [focusTarget, setFocusTarget] = useState(null);
  const prefix = usePrefix();
  useEffect(() => {
    if (focusTarget) {
      focusTarget.current.querySelector('input').focus();
      setFocusTarget(null);
    }
  }, [focusTarget]);
  useEffect(() => {
    if (defaultValue) {
      onChangeProp('', defaultValue);
    }
  },
  //eslint-disable-next-line react-hooks/exhaustive-deps
  []);
  const searchClasses = cx(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.createElement(Search, _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.node,
  /**
   * Provide an optional class name for the search container
   */
  className: PropTypes.string,
  /**
   * Specifies if the search should initially render in an expanded state
   */
  defaultExpanded: PropTypes.bool,
  /**
   * Provide an optional default value for the Search component
   */
  defaultValue: PropTypes.string,
  /**
   * Specifies if the search should be disabled
   */
  disabled: PropTypes.bool,
  /**
   * Specifies if the search should expand
   */
  expanded: PropTypes.bool,
  /**
   * Provide an optional id for the search container
   */
  id: PropTypes.string,
  /**
   * Provide an optional label text for the Search component icon
   */
  labelText: PropTypes.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.func,
  /**
   * Provide an optional hook that is called each time the input is updated
   */
  onChange: PropTypes.func,
  /**
   * Optional callback called when the search value is cleared.
   */
  onClear: PropTypes.func,
  /**
   * Provide an optional hook that is called each time the input is expanded
   */
  onExpand: PropTypes.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.func,
  /**
   * Whether the search should be allowed to expand
   */
  persistent: PropTypes.bool,
  /**
   * Provide an optional placeholder text for the Search component
   */
  placeholder: PropTypes.string,
  /**
   * Provide an optional className for the overall container of the Search
   */
  searchContainerClass: PropTypes.string,
  /**
   * Specify the size of the Search
   */
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
  /**
   * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
   */
  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /**
   * Provide custom text for the component for each translation id
   */
  translateWithId: PropTypes.func.isRequired
};
TableToolbarSearch.defaultProps = {
  tabIndex: '0',
  translateWithId,
  persistent: false,
  onClear: () => {}
};
var TableToolbarSearch$1 = TableToolbarSearch;

export { TableToolbarSearch$1 as default };