@carbon/ibm-products/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var cx = require('classnames');
var index = require('../../../_virtual/index.js');
var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
var useTranslations = require('../utils/useTranslations.js');
var icons = require('@carbon/react/icons');
var util = require('../utils/util.js');

const ConditionPreview = _ref => {
  var _ConditionBuilderItem, _ConditionBuilderItem2, _ConditionBuilderItem3;
  let {
    previewType,
    group,
    colorIndex
  } = _ref;
  const [animate, setAnimate] = React.useState(false);
  const [propertyText, operatorText, valueText, ifText] = useTranslations.useTranslations(['valueText', 'operatorText', 'propertyText', 'ifText']);
  React.useEffect(() => {
    setAnimate(true);
  }, []);
  const getConditionSection = () => {
    return /*#__PURE__*/React.createElement("div", {
      className: `${util.blockClass}__preview-condition`
    }, _ConditionBuilderItem || (_ConditionBuilderItem = /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
      label: propertyText,
      renderIcon: icons.Bee
    })), _ConditionBuilderItem2 || (_ConditionBuilderItem2 = /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
      label: operatorText
    })), _ConditionBuilderItem3 || (_ConditionBuilderItem3 = /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
      label: valueText
    })));
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, previewType == 'newGroup' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: cx([`${util.blockClass}__group__row ${util.blockClass}__group-preview `, {
      [`${util.blockClass}__group-preview-animate`]: animate
    }])
  }, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
    className: `${util.blockClass}__statement-button`,
    label: group.groupOperator
  })), /*#__PURE__*/React.createElement("div", {
    "data-color-index": colorIndex,
    "aria-hidden": true,
    className: cx([`${util.blockClass}__group ${util.blockClass}__condition-wrapper ${util.blockClass}__group-preview ${util.blockClass}__group-wrapper `, {
      [`${util.blockClass}__group-preview-animate`]: animate
    }])
  }, /*#__PURE__*/React.createElement("div", {
    className: `${util.blockClass}__gap`
  }, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
    className: `${util.blockClass}__statement-button`,
    label: ifText
  })), getConditionSection())), previewType == 'subGroup' && /*#__PURE__*/React.createElement("div", {
    className: cx([`${util.blockClass}__group__row ${util.blockClass}__group-preview ${util.blockClass}__gap-bottom`, {
      [`${util.blockClass}__group-preview-animate`]: animate
    }])
  }, /*#__PURE__*/React.createElement("div", {
    className: `${util.blockClass}__condition-block  ${util.blockClass}__gap`
  }, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
    label: group.groupOperator,
    className: `${util.blockClass}__statement-button`,
    popOverClassName: `${util.blockClass}__gap`
  }), /*#__PURE__*/React.createElement("div", {
    className: `${util.blockClass}__group ${util.blockClass}__condition-wrapper`
  }, /*#__PURE__*/React.createElement(ConditionConnector.default, {
    className: `${util.blockClass}__gap ${util.blockClass}__groupConnector`,
    operator: ifText
  }), getConditionSection()))), previewType == 'condition' && /*#__PURE__*/React.createElement("div", {
    className: cx([`${util.blockClass}__group__row ${util.blockClass}__group-preview ${util.blockClass}__gap-bottom`, {
      [`${util.blockClass}__group-preview-animate`]: animate
    }])
  }, /*#__PURE__*/React.createElement("div", {
    className: `${util.blockClass}__condition-block  ${util.blockClass}__gap`
  }, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
    label: group.groupOperator,
    className: `${util.blockClass}__statement-button`,
    popOverClassName: `${util.blockClass}__gap`
  }), getConditionSection())));
};
ConditionPreview.propTypes = {
  /**
   * index of the color for next group
   */
  colorIndex: index.default.number,
  /**
   * current conditional group
   */
  group: index.default.object,
  /**
   * type of review to be displayed
   */
  previewType: index.default.oneOf(['condition', 'subGroup', 'newGroup'])
};

exports.default = ConditionPreview;