@talend/react-components/lib/List/Toolbar/ColumnChooserButton/ColumnChooserButton.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ColumnChooserButton;
var _designSystem = require("@talend/design-system");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _reactBootstrap = require("@talend/react-bootstrap");
var _reactI18next = require("react-i18next");
var _constants = _interopRequireDefault(require("../../../constants"));
var _ColumnChooser = _interopRequireDefault(require("./ColumnChooser"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ColumnChooserButton({
  children,
  columns,
  initialFilterValue,
  id,
  initialOpenedPopover,
  placement = 'left',
  nbLockedLeftItems,
  onSubmit,
  buttonRenderer
}) {
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.default);
  const [opened, setOpened] = (0, _react.useState)(initialOpenedPopover || false);
  const [buttonRef, setButtonRef] = (0, _react.useState)(null);
  const changeOpened = () => setOpened(!opened);
  const closePopover = () => setOpened(false);
  const onSubmitColumnChooser = (event, columnsFromColumnChooser) => {
    onSubmit(event, columnsFromColumnChooser);
    closePopover();
  };
  const ActionButtonRenderer = buttonRenderer || _designSystem.ButtonIcon;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButtonRenderer, {
      icon: "talend-column-chooser",
      ref: setButtonRef,
      "data-feature": "column-chooser.open",
      id: `${id}-button`,
      onClick: changeOpened,
      size: "S",
      children: t('COLUMN_CHOOSER_OVERLAY_BUTTON', 'Open the column chooser')
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Overlay, {
      id: `${id}-overlay`,
      onHide: closePopover,
      placement: placement,
      rootClose: true,
      show: opened,
      target: buttonRef,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Popover, {
        id: `${id}-popover`,
        children: !children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnChooser.default, {
          columnsFromList: columns,
          initialFilterValue: initialFilterValue,
          id: id,
          nbLockedLeftItems: nbLockedLeftItems,
          onSubmit: onSubmitColumnChooser,
          t: t
        }) : children
      })
    })]
  });
}
ColumnChooserButton.propTypes = {
  children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.arrayOf(_propTypes.default.element)]),
  columns: _propTypes.default.array.isRequired,
  id: _propTypes.default.string.isRequired,
  initialFilterValue: _propTypes.default.string,
  initialOpenedPopover: _propTypes.default.bool,
  nbLockedLeftItems: _propTypes.default.number,
  placement: _propTypes.default.oneOf(['top', 'bottom', 'right', 'left']),
  onSubmit: _propTypes.default.func.isRequired,
  buttonRenderer: _propTypes.default.func
};
//# sourceMappingURL=ColumnChooserButton.component.js.map