@talend/react-components/lib/FilterBar/FilterBar.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = FilterBar;
var _react = require("react");
var _reactDebounceInput = _interopRequireDefault(require("react-debounce-input"));
var _reactI18next = require("react-i18next");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactBootstrap = require("@talend/react-bootstrap");
var _Actions = require("../Actions");
var _constants = _interopRequireDefault(require("../constants"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _FilterBarModule = _interopRequireDefault(require("./FilterBar.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function forceBlur(event) {
  event.target.blur();
}
function onKeyDown(event, escAction, enterAction) {
  switch (event.key) {
    case 'Enter':
      if (enterAction) {
        enterAction(event);
      }
      break;
    case 'Esc':
    case 'Escape':
      if (escAction) {
        escAction(event);
      }
      break;
    default:
      break;
  }
}
function FilterInput(props) {
  const {
    id,
    debounceMinLength,
    debounceTimeout,
    onBlur,
    onClear,
    onFocus,
    onFilter,
    autoFocus,
    placeholder,
    value,
    disabled,
    ...rest
  } = props;
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.default);
  const placeholderLabel = placeholder || t('LIST_FILTER_LABEL', {
    defaultValue: 'Filter'
  });
  const inputProps = {
    'data-test': rest['data-test'],
    'data-feature': rest['data-feature'],
    id,
    name: 'search',
    type: 'search',
    value,
    placeholder: placeholderLabel,
    autoComplete: 'off',
    disabled,
    className: (0, _classnames.default)(_FilterBarModule.default.search),
    'aria-label': placeholderLabel,
    onBlur: onBlur && (event => {
      onBlur(event, event.target.value);
    }),
    onFocus: onFocus && (event => onFocus(event, event.target.value)),
    onChange: event => onFilter(event, event.target.value),
    onKeyDown: event => onKeyDown(event, onClear, forceBlur),
    autoFocus,
    role: 'searchbox'
  };
  if (debounceMinLength || debounceTimeout) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDebounceInput.default, {
      ...inputProps,
      element: _reactBootstrap.FormControl,
      minLength: debounceMinLength,
      debounceTimeout: debounceTimeout
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.FormControl, {
    ...inputProps
  });
}
FilterInput.propTypes = {
  autoFocus: _propTypes.default.bool,
  id: _propTypes.default.string,
  debounceMinLength: _propTypes.default.number,
  debounceTimeout: _propTypes.default.number,
  onBlur: _propTypes.default.func,
  onClear: _propTypes.default.func,
  onFocus: _propTypes.default.func,
  onFilter: _propTypes.default.func.isRequired,
  placeholder: _propTypes.default.string,
  value: _propTypes.default.string,
  'data-test': _propTypes.default.string,
  'data-feature': _propTypes.default.string,
  disabled: _propTypes.default.bool
};

/**
 * @param {object} props react props
 * @example
 <FilterBar id="my-filter" docked="false" onFilter="filter()"></Filter>
 */
function FilterBar(props) {
  const {
    onFocus,
    onBlur,
    onToggle,
    onFilter
  } = props;
  const [focus, setFocus] = (0, _react.useState)();
  const [value, setValue] = (0, _react.useState)();
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.default);
  (0, _react.useEffect)(() => {
    // in controlled mode, if the value changes, replace the current value
    setValue(props.value);
  }, [props.value]);
  const onFocusCallback = event => {
    setFocus(true);
    if (onFocus) {
      onFocus(event);
    }
  };
  const onBlurCallback = event => {
    setFocus(false);
    if (onBlur) {
      onBlur(event);
    }
    if (!value && onToggle) {
      onToggle(event);
    }
  };
  const onFilterCallback = event => {
    setValue(event.target.value);
    if (onFilter) {
      onFilter(event, event.target.value);
    }
  };
  const onClearCallback = event => {
    // needed to avoid blur of the input
    event.preventDefault();
    onFilterCallback({
      target: {
        value: ''
      }
    });
  };
  const onSubmit = event => {
    event.preventDefault();
    return onFilterCallback(event);
  };
  if (props.dockable && props.docked) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Action, {
      id: props.id,
      className: (0, _classnames.default)(props.className, _FilterBarModule.default['button-docked']),
      onClick: props.onToggle,
      label: t('LIST_FILTER_TOGGLE', {
        defaultValue: 'Toggle filter'
      }),
      hideLabel: true,
      icon: "talend-search",
      "data-feature": props['data-feature'],
      tooltipPlacement: props.tooltipPlacement,
      role: "search"
    });
  }
  const classes = (0, _classnames.default)(_FilterBarModule.default.filter, props.className, {
    [_FilterBarModule.default.highlight]: props.highlight,
    [_FilterBarModule.default.navbar]: props.navbar
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
    className: classes,
    role: "search",
    onSubmit: onSubmit,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: (0, _classnames.default)('form-group', {
        [_FilterBarModule.default.animate]: props.dockable
      }),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
        name: "talend-search",
        className: (0, _classnames.default)(_FilterBarModule.default['search-icon'], {
          [_FilterBarModule.default['search-focused']]: focus
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterInput, {
        disabled: props.disabled,
        "data-feature": props['data-feature'],
        "data-test": props['data-test']
        // eslint-disable-next-line jsx-a11y/no-autofocus
        ,
        autoFocus: props.autoFocus,
        id: props.id && `${props.id}-input`,
        debounceMinLength: props.debounceMinLength,
        debounceTimeout: props.debounceTimeout,
        onBlur: onBlurCallback,
        onClear: onClearCallback,
        onFocus: onFocusCallback,
        onFilter: onFilterCallback,
        onToggle: props.onToggle,
        placeholder: props.placeholder,
        value: value,
        dockable: props.dockable,
        t: t
      }), value ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Action, {
        className: _FilterBarModule.default.remove,
        id: props.id && `${props.id}-cross-icon`,
        "data-test": props['data-test'] && `${props['data-test']}-reset`,
        "data-feature": props['data-feature'] && `${props['data-feature']}-reset`,
        icon: "talend-cross",
        label: t('LIST_FILTER_REMOVE', {
          defaultValue: 'Remove filter'
        }),
        hideLabel: true,
        tooltipPlacement: props.tooltipPlacement,
        onMouseDown: onClearCallback
      }) : null]
    })
  });
}
FilterBar.propTypes = {
  autoFocus: _propTypes.default.bool,
  id: _propTypes.default.string,
  className: _propTypes.default.string,
  'data-test': _propTypes.default.string,
  'data-feature': _propTypes.default.string,
  debounceMinLength: _propTypes.default.number,
  debounceTimeout: _propTypes.default.number,
  docked: _propTypes.default.bool,
  dockable: _propTypes.default.bool,
  navbar: _propTypes.default.bool,
  onBlur: _propTypes.default.func,
  onFocus: _propTypes.default.func,
  onFilter: _propTypes.default.func.isRequired,
  onToggle: _propTypes.default.func,
  highlight: _propTypes.default.bool,
  placeholder: _propTypes.default.string,
  value: _propTypes.default.string,
  tooltipPlacement: _propTypes.default.string,
  disabled: _propTypes.default.bool
};
FilterBar.defaultProps = {
  autoFocus: true,
  dockable: true,
  docked: true,
  navbar: true,
  disabled: false,
  className: ''
};
//# sourceMappingURL=FilterBar.component.js.map