react-query-builder-semantic
Version:
443 lines (405 loc) • 18 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _RuleSemantic = require('../RuleSemantic');
var _RuleSemantic2 = _interopRequireDefault(_RuleSemantic);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _semanticUiReact = require('semantic-ui-react');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/**
* Default element to group rules for the QueryBuilderSemantic
*/
var RuleGroupSemantic = function (_React$Component) {
_inherits(RuleGroupSemantic, _React$Component);
function RuleGroupSemantic(props) {
_classCallCheck(this, RuleGroupSemantic);
var _this = _possibleConstructorReturn(this, (RuleGroupSemantic.__proto__ || Object.getPrototypeOf(RuleGroupSemantic)).call(this, props));
_this.onCombinatorChange = function (e, _ref) {
var value = _ref.value;
var onPropChange = _this.props.onPropChange;
onPropChange('combinator', value, _this.props.id);
};
_this.addRule = function (event) {
event.preventDefault();
event.stopPropagation();
var _this$props = _this.props,
createRule = _this$props.createRule,
onRuleAdd = _this$props.onRuleAdd;
var newRule = createRule();
onRuleAdd(newRule, _this.props.id);
};
_this.addGroup = function (event) {
event.preventDefault();
event.stopPropagation();
var _this$props2 = _this.props,
createRuleGroup = _this$props2.createRuleGroup,
onGroupAdd = _this$props2.onGroupAdd;
var newGroup = createRuleGroup();
onGroupAdd(newGroup, _this.props.id);
};
_this.removeGroup = function (event) {
event.preventDefault();
event.stopPropagation();
_this.props.onGroupRemove(_this.props.id, _this.props.parentId);
};
_this.getColorForCombinator = _this.getColorForCombinator.bind(_this);
return _this;
}
/**
* Based on the combinatorColors prop, will check the selected value of the combinator for the group
* and return the color for that combination
* @returns {String}
*/
_createClass(RuleGroupSemantic, [{
key: 'getColorForCombinator',
value: function getColorForCombinator(combinator) {
var combination = this.props.combinatorColors.filter(function (colorCombination) {
return colorCombination.combinator === combinator;
});
if (combination) {
return combination[0].color;
}
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
combinator = _props.combinator,
parentCombinator = _props.parentCombinator,
rules = _props.rules,
translations = _props.translations,
onRuleRemove = _props.onRuleRemove,
createRule = _props.createRule,
onRuleAdd = _props.onRuleAdd,
createRuleGroup = _props.createRuleGroup,
onGroupAdd = _props.onGroupAdd,
onGroupRemove = _props.onGroupRemove,
isRuleGroup = _props.isRuleGroup,
getLevel = _props.getLevel,
getOperators = _props.getOperators,
onPropChange = _props.onPropChange,
ruleSemanticProps = _props.ruleSemanticProps,
ruleGroupSemanticProps = _props.ruleGroupSemanticProps,
classNames = _props.classNames,
combinators = _props.schema.combinators;
return _react2.default.createElement(
'div',
{ className: '' + classNames.ruleGroupContainer },
_react2.default.createElement(
_semanticUiReact.Segment.Group,
Object.assign({}, ruleGroupSemanticProps.segment, { className: '' + classNames.ruleGroup }),
this.hasParentGroup() ? _react2.default.createElement(_semanticUiReact.Segment, { color: this.getColorForCombinator(parentCombinator), compact: true, style: { paddingTop: '0px', marginBottom: '-12px' } }) : null,
_react2.default.createElement(
'div',
{ className: classNames.ruleGroupHeader },
_react2.default.createElement(_semanticUiReact.Dropdown, Object.assign({}, ruleGroupSemanticProps.dropDown, {
onChange: this.onCombinatorChange,
options: combinators,
defaultValue: combinator
})),
_react2.default.createElement(_semanticUiReact.Button, Object.assign({}, ruleGroupSemanticProps.addRuleButton, {
className: classNames.addRule,
content: translations.addRule.title,
onClick: this.addRule
})),
_react2.default.createElement(_semanticUiReact.Button, Object.assign({}, ruleGroupSemanticProps.addGroupButton, {
className: classNames.addGroup,
content: translations.addGroup.title,
onClick: this.addGroup
})),
this.hasParentGroup() ? _react2.default.createElement(_semanticUiReact.Button, Object.assign({}, ruleGroupSemanticProps.removeGroupButton, {
className: classNames.removeGroup,
content: translations.removeGroup.title,
onClick: this.removeGroup
})) : null
),
_react2.default.createElement(
'div',
{ className: 'group-or-rule__group-children' },
rules.map(function (rule) {
return isRuleGroup(rule) ? _react2.default.createElement(RuleGroupSemantic, { key: rule.id,
id: rule.id,
classNames: classNames,
ruleGroupSemanticProps: ruleGroupSemanticProps,
ruleSemanticProps: ruleSemanticProps,
schema: _this2.props.schema,
parentId: _this2.props.id,
parentCombinator: _this2.props.combinator,
onGroupAdd: onGroupAdd,
getLevel: getLevel,
isRuleGroup: isRuleGroup,
createRuleGroup: createRuleGroup,
onGroupRemove: onGroupRemove,
onPropChange: onPropChange,
onRuleAdd: onRuleAdd,
onRuleRemove: onRuleRemove,
createRule: createRule,
getOperators: getOperators,
combinator: rule.combinator,
combinatorColors: _this2.props.combinatorColors,
translations: _this2.props.translations,
rules: rule.rules }) : _react2.default.createElement(_RuleSemantic2.default, {
key: rule.id,
id: rule.id,
classNames: classNames,
ruleSemanticProps: ruleSemanticProps,
field: rule.field,
value: rule.value,
getOperators: getOperators,
onPropChange: onPropChange,
combinator: combinator,
combinatorColor: _this2.getColorForCombinator(_this2.props.combinator),
getLevel: getLevel,
operator: rule.operator,
schema: _this2.props.schema,
parentId: _this2.props.id,
translations: _this2.props.translations,
onRuleRemove: onRuleRemove
});
})
)
)
);
}
}, {
key: 'hasParentGroup',
value: function hasParentGroup() {
return this.props.parentId;
}
}]);
return RuleGroupSemantic;
}(_react2.default.Component);
RuleGroupSemantic.propTypes = {
/**
* Semantic Props for valueEditor,fieldSelector,valueSelector,segment,deleteRuleButton on a rule
*/
ruleSemanticProps: _propTypes2.default.shape({
/**
* Semantic Input props on a rule
* https://react.semantic-ui.com/elements/input/
*/
valueEditor: _propTypes2.default.any,
/**
* Semantic Dropdown props on a rule
* https://react.semantic-ui.com/modules/dropdown/
*/
fieldSelector: _propTypes2.default.any,
/**
* Semantic Dropdown props on a rule
* https://react.semantic-ui.com/modules/dropdown/
*/
valueSelector: _propTypes2.default.any,
/**
* Semantic Segment props on a rule
* https://react.semantic-ui.com/elements/segment/
*/
segment: _propTypes2.default.any,
/**
* Semantic delete Button props on a rule
* https://react.semantic-ui.com/elements/button/
*/
deleteRuleButton: _propTypes2.default.any
}),
/**
* Semantic Props for dropDown,addGroupButton,removeGroupButton,segment,addRuleButton on a group
*/
ruleGroupSemanticProps: _propTypes2.default.shape({
/**
* Semantic combinator Dropdown props on a group
* https://react.semantic-ui.com/modules/dropdown/
*/
dropDown: _propTypes2.default.any,
/**
* Semantic Segment props on a group
* https://react.semantic-ui.com/elements/segment/
*/
segment: _propTypes2.default.any,
/**
* Semantic add group Button props on a group
* https://react.semantic-ui.com/elements/button/
*/
addGroupButton: _propTypes2.default.any,
/**
* Semantic remove group Button props on a group
* https://react.semantic-ui.com/elements/button/
*/
removeGroupButton: _propTypes2.default.any,
/**
* Semantic remove group Button props on a group
* https://react.semantic-ui.com/elements/button/
*/
addRuleButton: _propTypes2.default.any
}),
/**
* This is a callback function invoked to get the list of allowed operators for the given field
*/
getOperators: _propTypes2.default.func,
/**
* This is a callback function invoked to return the current level for this rule
*/
getLevel: _propTypes2.default.func,
/**
* This is a callback function invoked when a rule is removed
*/
onRuleRemove: _propTypes2.default.func,
/**
* This is a callback function invoked notify this ruleGroup has made a property change for combinator
*/
onPropChange: _propTypes2.default.func,
/**
* This is a callback function invoked when this RuleGroup is removed
*/
onGroupRemove: _propTypes2.default.func,
/**
* This is a callback function to return a new default RuleGroup
*/
createRuleGroup: _propTypes2.default.func,
/**
* This is a callback function invoked when clicking on creating a new RuleGroup
*/
onGroupAdd: _propTypes2.default.func,
/**
* This is a callback function to return a new default Rule
*/
createRule: _propTypes2.default.func,
/**
* This is a callback function invoked when clicking on creating a new Rule
*/
onRuleAdd: _propTypes2.default.func,
/**
* This is a callback function invoked to determine if the element is a RuleGroup
*/
isRuleGroup: _propTypes2.default.func,
/**
* Random generated id for rule
*/
id: _propTypes2.default.any.isRequired,
/**
* Id for the RuleGroup this RuleGroup is nested in
*/
parentId: _propTypes2.default.any,
/**
* The selected combinator for the RuleGroup this RuleGroup is nested in
*/
parentCombinator: _propTypes2.default.any,
/**
* Array of current Rules
*/
rules: _propTypes2.default.array,
/**
* Selected combinator value
*/
combinator: _propTypes2.default.string.isRequired,
/**
* Current schema from QueryBuilder
*/
schema: _propTypes2.default.object,
/**
* This can be used to override translatable texts created by the <QueryBuilderSemantic />
* https://react.semantic-ui.com/elements/icon/
*/
translations: _propTypes2.default.shape({
fields: _propTypes2.default.shape({
title: _propTypes2.default.string
}),
operators: _propTypes2.default.shape({
title: _propTypes2.default.string
}),
value: _propTypes2.default.shape({
title: _propTypes2.default.string
}),
removeRule: _propTypes2.default.shape({
icon: _propTypes2.default.string,
title: _propTypes2.default.string
}),
removeGroup: _propTypes2.default.shape({
icon: _propTypes2.default.string,
title: _propTypes2.default.string
}),
addRule: _propTypes2.default.shape({
icon: _propTypes2.default.string,
title: _propTypes2.default.string
}),
addGroup: _propTypes2.default.shape({
icon: _propTypes2.default.string,
title: _propTypes2.default.string
}),
combinators: _propTypes2.default.shape({
title: _propTypes2.default.string
})
}),
/**
* The array of colors to use for the selected combinator
* https://react.semantic-ui.com/elements/segment/#variations-colored
*/
combinatorColors: _propTypes2.default.arrayOf(_propTypes2.default.shape({
color: _propTypes2.default.string.isRequired,
combinator: _propTypes2.default.string.isRequired
})),
/**
* This can be used to assign specific CSS classes to various controls that are created by the QueryBuilderSemantic
*/
classNames: _propTypes2.default.shape({
/**
*Root <div> element
*/
queryBuilder: _propTypes2.default.string,
/**
*<div> containing the RuleGroup
*/
ruleGroup: _propTypes2.default.string,
/**
*<Dropdown> control for combinators
*/
combinators: _propTypes2.default.string,
/**
*<Button> to add a Rule
*/
addRule: _propTypes2.default.string,
/**
*<Button> to add a RuleGroup
*/
addGroup: _propTypes2.default.string,
/**
*<Button> to remove a RuleGroup
*/
removeGroup: _propTypes2.default.string,
/**
*<div> containing the Rule
*/
rule: _propTypes2.default.string,
/**
*<Dropdown> control for fields
*/
fields: _propTypes2.default.string,
/**
*<Dropdown> control for operators
*/
operators: _propTypes2.default.string,
/**
*<Input> for the field value
*/
value: _propTypes2.default.string,
/**
*<Button> to remove a Rule
*/
removeRule: _propTypes2.default.string
})
};
RuleGroupSemantic.defaultProps = {
id: null,
parentId: null,
rules: [],
combinator: 'and',
schema: {}
};
exports.default = RuleGroupSemantic;