react-query-builder-semantic
Version:
354 lines (319 loc) • 14.1 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 _Rule = require('../Rule');
var _Rule2 = _interopRequireDefault(_Rule);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
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 QueryBuilder
*/
var RuleGroup = function (_React$Component) {
_inherits(RuleGroup, _React$Component);
function RuleGroup(props) {
_classCallCheck(this, RuleGroup);
var _this = _possibleConstructorReturn(this, (RuleGroup.__proto__ || Object.getPrototypeOf(RuleGroup)).call(this, props));
_this.onCombinatorChange = function (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);
};
return _this;
}
_createClass(RuleGroup, [{
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
combinator = _props.combinator,
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,
classNames = _props.classNames,
_props$schema = _props.schema,
combinators = _props$schema.combinators,
controls = _props$schema.controls;
return _react2.default.createElement(
'div',
{ className: '' + classNames.ruleGroupContainer },
_react2.default.createElement(
'div',
{ className: '' + classNames.ruleGroup },
_react2.default.createElement(
'div',
{ className: '' + classNames.ruleGroupHeader },
_react2.default.createElement(
'div',
{ className: '' + classNames.ruleGroupCombinators },
_react2.default.createElement(controls.combinatorSelector, {
options: combinators,
value: combinator,
title: translations.combinators.title,
className: '' + classNames.combinators,
handleOnChange: this.onCombinatorChange
})
),
_react2.default.createElement(
'div',
{ className: '' + classNames.ruleGroupActions },
_react2.default.createElement(controls.addRuleAction, {
label: translations.addRule.label,
title: translations.addRule.title,
className: '' + classNames.addRule,
handleOnClick: this.addRule
}),
_react2.default.createElement(controls.addGroupAction, {
label: translations.addGroup.label,
title: translations.addGroup.title,
className: '' + classNames.addGroup,
handleOnClick: this.addGroup
}),
this.hasParentGroup() ? _react2.default.createElement(controls.removeGroupAction, {
label: translations.removeGroup.label,
title: translations.removeGroup.title,
className: '' + classNames.removeGroup,
handleOnClick: this.removeGroup
}) : null
)
),
_react2.default.createElement(
'div',
{ className: 'group-or-rule__group-children' },
rules.map(function (rule) {
return isRuleGroup(rule) ? _react2.default.createElement(RuleGroup, { key: rule.id,
id: rule.id,
classNames: classNames,
schema: _this2.props.schema,
parentId: _this2.props.id,
onGroupAdd: onGroupAdd,
getLevel: getLevel,
isRuleGroup: isRuleGroup,
createRuleGroup: createRuleGroup,
onGroupRemove: onGroupRemove,
onPropChange: onPropChange,
onRuleAdd: onRuleAdd,
onRuleRemove: onRuleRemove,
createRule: createRule,
getOperators: getOperators,
combinator: rule.combinator,
translations: _this2.props.translations,
rules: rule.rules }) : _react2.default.createElement(_Rule2.default, {
key: rule.id,
id: rule.id,
classNames: classNames,
field: rule.field,
value: rule.value,
getOperators: getOperators,
onPropChange: onPropChange,
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 RuleGroup;
}(_react2.default.Component);
RuleGroup.propTypes = {
/**
* 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,
/**
* 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
})
}),
/**
* 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
})
};
RuleGroup.defaultProps = {
id: null,
parentId: null,
rules: [],
combinator: 'and',
schema: {}
};
exports.default = RuleGroup;