@vtex/styleguide
Version:
> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))
255 lines (215 loc) • 9.53 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
var _index = require("../ButtonWithIcon/index");
var _index2 = _interopRequireDefault(_index);
var _index3 = require("../icon/Plus/index");
var _index4 = _interopRequireDefault(_index3);
var _index5 = require("../icon/Close/index");
var _index6 = _interopRequireDefault(_index5);
var _Separator = require("./Separator");
var _Separator2 = _interopRequireDefault(_Separator);
var _StrategySelector = require("./StrategySelector");
var _StrategySelector2 = _interopRequireDefault(_StrategySelector);
var _index7 = require("../Statement/index");
var _index8 = _interopRequireDefault(_index7);
var _constants = require("./constants");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var Conditions = function Conditions(_ref) {
var canDelete = _ref.canDelete,
statements = _ref.statements,
options = _ref.options,
subjectPlaceholder = _ref.subjectPlaceholder,
isFullWidth = _ref.isFullWidth,
isRtl = _ref.isRtl,
_ref$labels = _ref.labels,
labels = _ref$labels === void 0 ? {} : _ref$labels,
hideOperator = _ref.hideOperator,
operator = _ref.operator,
_onChangeOperator = _ref.onChangeOperator,
onChangeStatements = _ref.onChangeStatements;
var objectIsEmpty = function objectIsEmpty(object) {
if (object === undefined) return true;
if (object === null) return true;
if (object === '') return true;
if (Array.isArray(object) && object.length === 0) return true;
return false;
};
var canAddNewCondition = function canAddNewCondition() {
if (statements.length === 0) return false;
var hasIncompleteCondition = statements.some(function (condition) {
return condition.subject === '' || condition.verb === '' || objectIsEmpty(condition.object);
});
return !hasIncompleteCondition;
};
var handleAddNewCondition = function handleAddNewCondition() {
var emptyStatement = {
subject: '',
verb: '',
object: null
};
onChangeStatements([].concat(statements, [emptyStatement]));
};
var handleRemoveStatement = function handleRemoveStatement(index) {
var updatedStatements = statements.slice(0, index).concat(statements.slice(index + 1));
onChangeStatements(updatedStatements);
};
var handleUpdatestatement = function handleUpdatestatement(newStatement, statementIndex) {
var newStatements = statements.map(function (statement, idx) {
return idx === statementIndex ? newStatement : statement;
});
onChangeStatements(newStatements);
};
return _react2.default.createElement("div", {
className: "t-body c-on-base"
}, !hideOperator && _react2.default.createElement("div", {
className: "mh6 " + (isRtl ? 'flex justify-end' : '')
}, _react2.default.createElement(_StrategySelector2.default, {
isRtl: isRtl,
operator: operator,
labels: labels,
onChangeOperator: function onChangeOperator(operator) {
return _onChangeOperator(operator);
}
})), _react2.default.createElement("div", {
className: "ph5 pt3 mt4 br3 b--muted-4 ba"
}, statements.length === 0 ? _react2.default.createElement("div", {
className: "flex-grow-1 mv6"
}, _react2.default.createElement(_index8.default, {
isRtl: isRtl,
isFullWidth: isFullWidth,
onChangeStatement: function onChangeStatement(newStatement) {
return onChangeStatements([newStatement]);
},
options: options,
subjectPlaceholder: subjectPlaceholder
})) : _react2.default.createElement("div", {
className: "mv5"
}, statements.map(function (statement, statementIndex) {
// if statement is configured as unique we should filter subject
// options that were already selected in other statements.
var uniqueBasedSubjects = Object.keys(options).filter(function (subject) {
return !options[subject].unique || !statements.some(function (stmt, idx) {
return stmt.subject === subject && idx !== statementIndex;
});
});
var uniqueBasedOptions = uniqueBasedSubjects.reduce(function (uniqueOptions, subject) {
var _extends2;
return _extends({}, uniqueOptions, (_extends2 = {}, _extends2[subject] = options[subject], _extends2));
}, {});
var statementContent = [_react2.default.createElement("div", {
key: "1",
className: "flex-grow-1"
}, _react2.default.createElement(_index8.default, {
isRtl: isRtl,
isFullWidth: isFullWidth,
onChangeStatement: function onChangeStatement(newStatement) {
handleUpdatestatement(newStatement, statementIndex);
},
options: uniqueBasedOptions,
subjectPlaceholder: subjectPlaceholder,
statement: statement
})), canDelete && (!isFullWidth ? _react2.default.createElement("div", {
key: "2",
className: "mh3 pb3 c-muted-2 pointer hover-c-danger",
onClick: function onClick() {
return handleRemoveStatement(statementIndex);
}
}, _react2.default.createElement(_index6.default, {
size: 25
})) : _react2.default.createElement("div", {
key: "3",
className: "tr mh3"
}, _react2.default.createElement(_index2.default, {
variation: "tertiary",
collapseRight: true,
size: "small",
icon: _react2.default.createElement(_index6.default, {
className: "c-on-action-primary"
}),
onClick: function onClick() {
return handleRemoveStatement(statementIndex);
}
}, labels.delete || _constants.DEFAULT_LABELS.delete)))];
return _react2.default.createElement("div", {
className: "flex flex-column w-100 mv3",
key: statementIndex
}, _react2.default.createElement("div", {
className: "flex " + (isFullWidth ? 'flex-column items-strech' : 'flex-row items-center')
}, isRtl ? statementContent.reverse() : statementContent), statementIndex !== statements.length - 1 && _react2.default.createElement(_Separator2.default, {
label: operator === 'all' ? labels.operatorAnd || _constants.DEFAULT_LABELS.operatorAnd : labels.operatorOr || _constants.DEFAULT_LABELS.operatorOr
}));
})), _react2.default.createElement(_Separator2.default, null), _react2.default.createElement("div", {
className: "mv5 mh3 " + (isRtl ? 'flex justify-end' : '')
}, _react2.default.createElement(_index2.default, {
variation: "tertiary",
collapseLeft: true,
size: "small",
icon: _react2.default.createElement(_index4.default, {
solid: true,
size: _constants.MEDIUM_ICON_SIZE
}),
iconPosition: isRtl ? 'right' : 'left',
disabled: !canAddNewCondition(),
onClick: handleAddNewCondition
}, labels.addNewCondition || _constants.DEFAULT_LABELS.addNewCondition))));
}; // this is so styleguidist can pick the prop types reference
Conditions.propTypes = {
/** Shows or hides the delete button */
canDelete: _propTypes2.default.bool,
/** Wether to show this component stretched to the width */
isFullWidth: _propTypes2.default.bool,
/** Whether the order of elements and text if right to left */
isRtl: _propTypes2.default.bool,
/** Labels for the controls and texts, default is english */
labels: _propTypes2.default.shape({
addNewCondition: _propTypes2.default.string,
addConditionBtn: _propTypes2.default.string,
delete: _propTypes2.default.string,
noConditions: _propTypes2.default.string,
operatorAll: _propTypes2.default.string,
operatorAnd: _propTypes2.default.string,
operatorAny: _propTypes2.default.string,
operatorOr: _propTypes2.default.string,
headerPrefix: _propTypes2.default.string,
headerSufix: _propTypes2.default.string
}),
/** Conditions change callback: array of statement definitions */
onChangeStatements: _propTypes2.default.func.isRequired,
/** Operator (any, all) change callback */
onChangeOperator: _propTypes2.default.func,
/** Operator indicates whether all the statements should be met or any of them */
operator: _propTypes2.default.oneOf(['all', 'any']),
/** Possible options and respective data types, verb options */
options: _propTypes2.default.any.isRequired,
/** Show or hide the header that selects the operator (any vs all) */
hideOperator: _propTypes2.default.bool,
/** one statement = {subject: string, verb: string, object: unknown, error: string} */
statements: _propTypes2.default.array,
/** Placeholder for subject dropdown */
subjectPlaceholder: _propTypes2.default.string.isRequired
};
Conditions.defaultProps = {
operator: 'any',
hideOperator: false,
statements: [],
onChangeOperator: function onChangeOperator() {},
onChangeStatements: function onChangeStatements() {},
labels: {
addNewCondition: 'add new condition',
delete: 'Remove',
headerPrefix: 'Matching',
headerSufix: 'following conditions:',
operatorAll: 'all',
operatorAnd: 'and',
operatorAny: 'any',
operatorOr: 'or'
}
};
exports.default = Conditions;