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

Faceted search

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BadgeCheckboxes = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _facetedSearch = require("../../facetedSearch.propTypes");
var _BadgeFaceted = require("../BadgeFaceted");
var _BadgeCheckboxesForm = require("./BadgeCheckboxesForm.component");
var _reactComponents = require("@talend/react-components");
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const getSelectBadgeLabel = (value, t) => {
  const labelAll = t('FACETED_SEARCH_VALUE_ALL', {
    defaultValue: 'All'
  });
  if (value) {
    const checkedCheckboxes = value.filter(v => v.checked);
    if (checkedCheckboxes.length > 3) {
      return t('FACETED_SEARCH_VALUES_COUNT', {
        count: checkedCheckboxes.length,
        defaultValue: '{{count}} values'
      });
    } else if (!checkedCheckboxes.length) {
      return labelAll;
    }
    return checkedCheckboxes.map(val => val.label);
  }
  return labelAll;
};

// eslint-disable-next-line import/prefer-default-export
const BadgeCheckboxes = ({
  id,
  readOnly,
  removable,
  label,
  initialOperatorOpened,
  initialValueOpened,
  operator,
  operators,
  size,
  value,
  category,
  values,
  displayType,
  filterBarPlaceholder,
  allSelector,
  t,
  callbacks,
  ...rest
}) => {
  const [options, setOptions] = (0, _react.useState)(values || []);
  const [isLoading, setIsLoading] = (0, _react.useState)(true);
  const callback = callbacks && callbacks[rest.attribute];
  (0, _react.useEffect)(() => {
    if (values !== null && values !== void 0 && values.length || !callback || !callback.getOptions) {
      setIsLoading(false);
      return;
    }
    setIsLoading(true);
    callback.getOptions().then(data => {
      setOptions(data.map(item => {
        if ((0, _lodash.isObject)(item)) {
          return {
            id: item.id,
            label: item.label
          };
        }
        return {
          id: item,
          label: item
        };
      }));
    }).finally(() => {
      setIsLoading(false);
    });
  }, [callbacks]);
  const currentOperators = (0, _react.useMemo)(() => operators, [operators]);
  const currentOperator = operator || currentOperators && currentOperators[0];
  const badgeCheckboxesId = `${id}-badge-checkboxes`;
  const badgeLabel = (0, _react.useMemo)(() => getSelectBadgeLabel(value, t), [value, t]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeFaceted.BadgeFaceted, {
    badgeId: id,
    displayType: displayType,
    id: badgeCheckboxesId,
    initialOperatorOpened: initialOperatorOpened,
    initialValueOpened: initialValueOpened,
    labelCategory: label,
    labelValue: badgeLabel,
    operator: currentOperator,
    operators: currentOperators,
    readOnly: readOnly,
    removable: removable,
    size: size,
    t: t,
    value: value || [],
    children: ({
      onSubmitBadge,
      onChangeValue,
      badgeValue
    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeCheckboxesForm.BadgeCheckboxesForm, {
      id: badgeCheckboxesId,
      onChange: onChangeValue,
      onSubmit: onSubmitBadge,
      value: badgeValue,
      checkboxValues: options,
      feature: category || label,
      filterBarPlaceholder: filterBarPlaceholder,
      allSelector: allSelector,
      isLoading: isLoading,
      ...rest
    })
  });
};
exports.BadgeCheckboxes = BadgeCheckboxes;
BadgeCheckboxes.propTypes = {
  label: _propTypes.default.string.isRequired,
  id: _propTypes.default.string.isRequired,
  initialOperatorOpened: _propTypes.default.bool,
  initialValueOpened: _propTypes.default.bool,
  operator: _facetedSearch.operatorPropTypes,
  operators: _facetedSearch.operatorsPropTypes,
  size: _propTypes.default.oneOf(Object.values(_reactComponents.Badge.SIZES)),
  category: _propTypes.default.string,
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.shape({
    checked: _propTypes.default.bool,
    id: _propTypes.default.string.isRequired,
    label: _propTypes.default.string.isRequired
  }))]),
  readOnly: _propTypes.default.bool,
  removable: _propTypes.default.bool,
  values: _propTypes.default.array,
  t: _propTypes.default.func.isRequired,
  callbacks: _facetedSearch.callbacksPropTypes,
  displayType: _propTypes.default.oneOf(Object.values(_reactComponents.Badge.TYPES)),
  filterBarPlaceholder: _propTypes.default.string,
  allSelector: _propTypes.default.bool
};
//# sourceMappingURL=BadgeCheckboxes.component.js.map