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

Faceted search

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BadgeFaceted = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _constants = require("../../../constants");
var _badgeOverlayFlow = require("../../../hooks/badgeOverlayFlow.hook");
var _facetedBadges = require("../../../hooks/facetedBadges.hook");
var _badgeFaceted = require("../../context/badgeFaceted.context");
var _facetedSearch = require("../../facetedSearch.propTypes");
var _BadgeOperator = require("../BadgeOperator");
var _BadgeOverlay = require("../BadgeOverlay");
var _BadgeFacetedModule = _interopRequireDefault(require("./BadgeFaceted.module.scss"));
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 findOperatorByName = name => operator => name === operator.name;
const BadgeFaceted = ({
  badgeId,
  displayType,
  children,
  id,
  labelCategory,
  labelValue,
  initialOperatorOpened,
  initialValueOpened,
  operator,
  operators,
  readOnly,
  removable = true,
  value,
  size = _reactComponents.Badge.SIZES.large,
  type,
  t
}) => {
  const openValueJustAfterSelectionOfType = operators.length < 2 && initialOperatorOpened;
  const [overlayState, overlayDispatch, onChangeOperatorOverlay, onChangeValueOverlay] = (0, _badgeOverlayFlow.useBadgeOverlayFlow)(openValueJustAfterSelectionOfType ? false : initialOperatorOpened, openValueJustAfterSelectionOfType ? true : initialValueOpened);
  const {
    dispatch
  } = (0, _badgeFaceted.useBadgeFacetedContext)();
  const [badgeOperator, setBadgeOperator] = (0, _react.useState)(operator);
  const [badgeValue, setBadgeValue] = (0, _react.useState)(value);
  (0, _react.useEffect)(() => {
    if (!(0, _lodash.isEqual)(value, badgeValue)) {
      setBadgeValue(value);
    }
    if (!(0, _lodash.isEqual)(operator, badgeOperator)) {
      setBadgeOperator(operator);
    }
  }, [value, operator]);
  const onChangeOperator = (_, operatorName) => {
    const foundOperator = operators.find(findOperatorByName(operatorName));
    if (foundOperator) {
      setBadgeOperator(foundOperator);
    }
    dispatch(_facetedBadges.BADGES_ACTIONS.update(badgeId, {
      operator: foundOperator
    }));
    overlayDispatch(_badgeOverlayFlow.OVERLAY_FLOW_ACTIONS.openValue);
    dispatch(_facetedBadges.BADGES_ACTIONS.closeInitialOpened(badgeId));
  };
  const onChangeValue = (_, entityValue) => {
    setBadgeValue(entityValue);
  };
  const onSubmitBadge = () => {
    var _event;
    overlayDispatch(_badgeOverlayFlow.OVERLAY_FLOW_ACTIONS.closeAll);
    (_event = event) === null || _event === void 0 ? void 0 : _event.preventDefault();
    dispatch(_facetedBadges.BADGES_ACTIONS.update(badgeId, {
      value: badgeValue,
      operator: badgeOperator,
      initialOperatorOpened: false,
      initialValueOpened: false
    }, {
      isInCreation: false
    }));
  };
  const onDeleteBadge = () => {
    dispatch(_facetedBadges.BADGES_ACTIONS.delete(badgeId));
  };
  const onHideOverlayOperator = () => {
    overlayDispatch(_badgeOverlayFlow.OVERLAY_FLOW_ACTIONS.closeAll);
    dispatch(_facetedBadges.BADGES_ACTIONS.closeInitialOpened(badgeId));
  };
  const onHideSubmitBadge = (...args) => {
    dispatch(_facetedBadges.BADGES_ACTIONS.closeInitialOpened(badgeId));
    onSubmitBadge(...args);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactComponents.Badge, {
    id: id,
    className: (0, _classnames.default)(_BadgeFacetedModule.default['tc-badge-faceted'], type),
    display: size,
    type: displayType,
    children: [labelCategory && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactComponents.Badge.Category, {
        category: labelCategory,
        label: labelCategory
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeOperator.BadgeOperatorOverlay, {
        id: id,
        onChangeOverlay: onChangeOperatorOverlay,
        onHideOverlay: onHideOverlayOperator,
        operatorLabel: badgeOperator.label,
        operatorIconName: badgeOperator.iconName,
        opened: overlayState.operatorOpened,
        onClick: onChangeOperator,
        operators: operators,
        readOnly: readOnly,
        size: size
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeOverlay.BadgeOverlay, {
      id: id,
      className: _BadgeFacetedModule.default['tc-badge-faceted-overlay'],
      showSpecialChars: !!displayType,
      label: labelValue,
      onHide: onHideSubmitBadge,
      opened: overlayState.valueOpened,
      onChange: onChangeValueOverlay,
      readOnly: readOnly,
      children: children({
        onSubmitBadge,
        onChangeValue,
        badgeValue
      })
    }), removable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactComponents.Badge.DeleteAction, {
      id: id,
      label: t('DELETE_BADGE_ACTION', {
        defaultValue: 'Remove filter'
      }),
      dataFeature: _constants.USAGE_TRACKING_TAGS.BADGE_REMOVE,
      onClick: onDeleteBadge,
      t: t
    })]
  });
};
exports.BadgeFaceted = BadgeFaceted;
BadgeFaceted.propTypes = {
  badgeId: _propTypes.default.string.isRequired,
  displayType: _propTypes.default.oneOf(Object.values(_reactComponents.Badge.TYPES)),
  labelCategory: _propTypes.default.string.isRequired,
  children: _propTypes.default.func.isRequired,
  id: _propTypes.default.string.isRequired,
  initialOperatorOpened: _propTypes.default.bool,
  initialValueOpened: _propTypes.default.bool,
  labelValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
  operator: _facetedSearch.operatorPropTypes.isRequired,
  operators: _facetedSearch.operatorsPropTypes.isRequired,
  size: _propTypes.default.oneOf(Object.values(_reactComponents.Badge.SIZES)),
  value: _propTypes.default.any,
  readOnly: _propTypes.default.bool,
  removable: _propTypes.default.bool,
  type: _propTypes.default.string,
  t: _propTypes.default.func.isRequired
};

// eslint-disable-next-line import/prefer-default-export
//# sourceMappingURL=BadgeFaceted.component.js.map