@carbon/ibm-products
Version:
Carbon for IBM Products
102 lines (98 loc) • 4.65 kB
JavaScript
/**
* 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.
*/
import React__default, { useState, useEffect } from 'react';
import cx from 'classnames';
import PropTypes from '../../../_virtual/index.js';
import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
import ConditionConnector from '../ConditionBuilderConnector/ConditionConnector.js';
import { useTranslations } from '../utils/useTranslations.js';
import { Bee } from '@carbon/react/icons';
import { blockClass } from '../utils/util.js';
const ConditionPreview = _ref => {
var _ConditionBuilderItem, _ConditionBuilderItem2, _ConditionBuilderItem3;
let {
previewType,
group,
colorIndex
} = _ref;
const [animate, setAnimate] = useState(false);
const [propertyText, operatorText, valueText, ifText] = useTranslations(['valueText', 'operatorText', 'propertyText', 'ifText']);
useEffect(() => {
setAnimate(true);
}, []);
const getConditionSection = () => {
return /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}__preview-condition`
}, _ConditionBuilderItem || (_ConditionBuilderItem = /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
label: propertyText,
renderIcon: Bee
})), _ConditionBuilderItem2 || (_ConditionBuilderItem2 = /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
label: operatorText
})), _ConditionBuilderItem3 || (_ConditionBuilderItem3 = /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
label: valueText
})));
};
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, previewType == 'newGroup' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
className: cx([`${blockClass}__group__row ${blockClass}__group-preview `, {
[`${blockClass}__group-preview-animate`]: animate
}])
}, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
className: `${blockClass}__statement-button`,
label: group.groupOperator
})), /*#__PURE__*/React__default.createElement("div", {
"data-color-index": colorIndex,
"aria-hidden": true,
className: cx([`${blockClass}__group ${blockClass}__condition-wrapper ${blockClass}__group-preview ${blockClass}__group-wrapper `, {
[`${blockClass}__group-preview-animate`]: animate
}])
}, /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}__gap`
}, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
className: `${blockClass}__statement-button`,
label: ifText
})), getConditionSection())), previewType == 'subGroup' && /*#__PURE__*/React__default.createElement("div", {
className: cx([`${blockClass}__group__row ${blockClass}__group-preview ${blockClass}__gap-bottom`, {
[`${blockClass}__group-preview-animate`]: animate
}])
}, /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}__condition-block ${blockClass}__gap`
}, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
label: group.groupOperator,
className: `${blockClass}__statement-button`,
popOverClassName: `${blockClass}__gap`
}), /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}__group ${blockClass}__condition-wrapper`
}, /*#__PURE__*/React__default.createElement(ConditionConnector, {
className: `${blockClass}__gap ${blockClass}__groupConnector`,
operator: ifText
}), getConditionSection()))), previewType == 'condition' && /*#__PURE__*/React__default.createElement("div", {
className: cx([`${blockClass}__group__row ${blockClass}__group-preview ${blockClass}__gap-bottom`, {
[`${blockClass}__group-preview-animate`]: animate
}])
}, /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}__condition-block ${blockClass}__gap`
}, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
label: group.groupOperator,
className: `${blockClass}__statement-button`,
popOverClassName: `${blockClass}__gap`
}), getConditionSection())));
};
ConditionPreview.propTypes = {
/**
* index of the color for next group
*/
colorIndex: PropTypes.number,
/**
* current conditional group
*/
group: PropTypes.object,
/**
* type of review to be displayed
*/
previewType: PropTypes.oneOf(['condition', 'subGroup', 'newGroup'])
};
export { ConditionPreview as default };