@talend/react-faceted-search/lib/components/Badges/BadgeMenu/BadgeMenuForm.component.js

Faceted search

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BadgeMenuForm = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _utils = require("@talend/utils");
var _BadgeMenuModule = _interopRequireDefault(require("./BadgeMenu.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* eslint-disable jsx-a11y/no-autofocus */

const createRowItemEntity = value => option => {
  return {
    id: option.id,
    label: option.label,
    checked: option.id === value.id
  };
};
const getRows = (values, value) => {
  return values.map(createRowItemEntity(value));
};
const getVisibleRows = (rows, filterValue, showAll) => {
  const formatFilterValue = filterValue.trim().toLocaleLowerCase();
  return rows.filter(option => (0, _lodash.get)(option, 'label', '').toLocaleLowerCase().includes(formatFilterValue)).filter(row => showAll ? true : row.checked);
};
const BadgeMenuForm = ({
  values,
  id,
  onChange,
  onSubmit,
  value,
  filterBarPlaceholder,
  t,
  ...rest
}) => {
  const [filter, setFilter] = (0, _react.useState)('');
  const [showAll, setShowAll] = (0, _react.useState)(true);
  const badgeMenuFormId = `${id}-menu-form`;
  const items = (0, _react.useMemo)(() => getRows(values, value), [values, value]);
  const visibleItems = (0, _react.useMemo)(() => getVisibleRows(items, filter, showAll), [items, filter, showAll]);
  const showSelectedToggleLabel = showAll ? t('SHOW_SELECTED_ITEMS', {
    defaultValue: 'Show selected'
  }) : t('SHOW_ALL_ITEMS', {
    defaultValue: 'Show all'
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.Form, {
    id: `${badgeMenuFormId}-form`,
    onSubmit: onSubmit,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Form.Search, {
      id: `${badgeMenuFormId}-filter`,
      placeholder: filterBarPlaceholder || t('FIND_COLUMN_FILTER_PLACEHOLDER', {
        defaultValue: 'Find a column'
      }),
      onChange: event => {
        var _event$target;
        setFilter((event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value) || '');
      },
      value: filter,
      "data-test": "badge-menu-filter",
      "data-testid": "badge-menu-filter"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _BadgeMenuModule.default['fs-badge-menu-form-items'],
      children: !rest.isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.StackVertical, {
        gap: "0",
        children: visibleItems.map(rowItem => {
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.DropdownButton, {
            onClick: event => {
              onChange(event, rowItem);
            },
            checked: rowItem.checked,
            "data-testid": `badge-menu-form-item-${rowItem.id}`,
            "data-test": `badge-menu-form-item-${rowItem.id}`,
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
              children: rowItem.label
            })
          }, rowItem.id);
        })
      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.StackVertical, {
        gap: "S",
        "data-testid": "badge-menu-form-skeleton-item",
        "data-test": "badge-menu-form-skeleton-item",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.SkeletonHeading, {
          size: "L",
          width: "100"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.SkeletonHeading, {
          size: "L",
          width: "100"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.SkeletonHeading, {
          size: "L",
          width: "100"
        })]
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.Form.Buttons, {
      padding: {
        x: 0,
        bottom: 0,
        top: 'M'
      },
      children: [!(0, _lodash.isEmpty)(value) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonTertiary, {
        type: "button",
        onClick: () => {
          setShowAll(!showAll);
          setFilter('');
        },
        children: showSelectedToggleLabel
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonPrimary, {
        type: "submit",
        disabled: rest.isLoading,
        ...(0, _utils.getDataAttrFromProps)(rest),
        children: t('APPLY', {
          defaultValue: 'Apply'
        })
      })]
    })]
  });
};
exports.BadgeMenuForm = BadgeMenuForm;
BadgeMenuForm.propTypes = {
  values: _propTypes.default.arrayOf(_propTypes.default.shape({
    id: _propTypes.default.string.isRequired,
    label: _propTypes.default.string.isRequired,
    checked: _propTypes.default.bool
  })),
  id: _propTypes.default.string.isRequired,
  onChange: _propTypes.default.func,
  onSubmit: _propTypes.default.func.isRequired,
  value: _propTypes.default.object,
  filterBarPlaceholder: _propTypes.default.string,
  t: _propTypes.default.func.isRequired
};
//# sourceMappingURL=BadgeMenuForm.component.js.map