@talend/react-components

Version:
Set of react components.
github.com/Talend/ui/tree/master/packages/components
107 lines (104 loc) • 4.14 kB
JavaScript
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ColumnChooser;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _reactI18next = require("react-i18next");
var _constants = _interopRequireDefault(require("../../../../constants"));
var _FilterBar = _interopRequireDefault(require("../../../../FilterBar"));
var _theme = require("../../../../theme");
var _hooks = require("../hooks");
var _columnChooser = require("./columnChooser.context");
var _ColumnChooserModule = _interopRequireDefault(require("./ColumnChooser.module.scss"));
var _ColumnChooserBody = _interopRequireDefault(require("./ColumnChooserBody"));
var _ColumnChooserFooter = _interopRequireDefault(require("./ColumnChooserFooter"));
var _ColumnChooserHeader = _interopRequireDefault(require("./ColumnChooserHeader"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const theme = (0, _theme.getTheme)(_ColumnChooserModule.default);
const changeVisibleToHidden = column => ({
  hidden: !column.visible,
  label: column.label,
  order: column.order,
  key: column.key
});
const mapToColumnsList = columns => columns.map(changeVisibleToHidden);
function ColumnChooser({
  children,
  id,
  columnsFromList,
  initialFilterValue,
  nbLockedLeftItems = 0,
  onSubmit
}) {
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.default);
  const {
    columns,
    filteredColumns,
    onChangeVisibility,
    onSelectAll,
    selectAll,
    setTextFilter,
    textFilter
  } = (0, _hooks.useColumnChooserManager)(columnsFromList, nbLockedLeftItems, initialFilterValue);
  (0, _react.useEffect)(() => {
    // eslint-disable-next-line no-console
    console.warn('Guideline and development of the ColumnChooser component still in progress. It may have breaking change in the future');
  }, []);

  // We are transforming back the field visible to hidden, to be compliant with the list.
  const onSubmitForm = event => {
    event.preventDefault();
    onSubmit(event, mapToColumnsList(columns));
  };

  // Filter field callbacks
  const onFilter = (0, _react.useCallback)((_, value) => setTextFilter(value), [setTextFilter]);
  const resetFilter = (0, _react.useCallback)(() => setTextFilter(''), [setTextFilter]);
  const Default = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnChooserHeader.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterBar.default, {
      autoFocus: false,
      className: theme('tc-column-chooser-filter'),
      dockable: false,
      docked: false,
      iconAlwaysVisible: true,
      id: `${id}-filter`,
      placeholder: t('FIND_COLUMN_FILTER_PLACEHOLDER', {
        defaultValue: 'Find a column'
      }),
      onToggle: resetFilter,
      onFilter: onFilter,
      value: textFilter
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
      id: `${id}-form`,
      className: theme('tc-column-chooser'),
      onSubmit: onSubmitForm,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnChooserBody.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnChooserFooter.default, {})]
    })]
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnChooser.ColumnChooserProvider, {
    value: {
      columns: filteredColumns,
      id,
      onChangeVisibility,
      onSelectAll,
      selectAll,
      t
    },
    children: !children ? Default : children
  });
}
ColumnChooser.Header = _ColumnChooserHeader.default;
ColumnChooser.Body = _ColumnChooserBody.default;
ColumnChooser.Footer = _ColumnChooserFooter.default;
ColumnChooser.propTypes = {
  children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.arrayOf(_propTypes.default.element)]),
  columnsFromList: _propTypes.default.array.isRequired,
  id: _propTypes.default.string.isRequired,
  initialFilterValue: _propTypes.default.string,
  nbLockedLeftItems: _propTypes.default.number,
  onSubmit: _propTypes.default.func.isRequired
};
//# sourceMappingURL=ColumnChooser.component.js.map