react-query-builder-semantic
Version:
299 lines (271 loc) • 11.2 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 _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 represent a rule for a RuleGroup in the QueryBuilderSemantic
*/
var RuleSemantic = function (_React$Component) {
_inherits(RuleSemantic, _React$Component);
function RuleSemantic(props) {
_classCallCheck(this, RuleSemantic);
var _this = _possibleConstructorReturn(this, (RuleSemantic.__proto__ || Object.getPrototypeOf(RuleSemantic)).call(this, props));
_this.onFieldChanged = function (value) {
_this.onElementChanged('field', value);
};
_this.onOperatorChanged = function (value) {
_this.onElementChanged('operator', value);
};
_this.onValueChanged = function (value) {
_this.onElementChanged('value', value);
};
_this.onElementChanged = function (property, value) {
var _this$props = _this.props,
id = _this$props.id,
onPropChange = _this$props.onPropChange;
onPropChange(property, value, id);
};
_this.removeRule = function (event) {
event.preventDefault();
event.stopPropagation();
_this.props.onRuleRemove(_this.props.id, _this.props.parentId);
};
return _this;
}
_createClass(RuleSemantic, [{
key: 'render',
value: function render() {
var _props = this.props,
field = _props.field,
operator = _props.operator,
combinatorColor = _props.combinatorColor,
ruleSemanticProps = _props.ruleSemanticProps,
value = _props.value,
translations = _props.translations,
getOperators = _props.getOperators,
classNames = _props.classNames,
_props$schema = _props.schema,
fields = _props$schema.fields,
controls = _props$schema.controls,
values = _props$schema.values;
return _react2.default.createElement(
'div',
{ className: '' + classNames.ruleContainer },
_react2.default.createElement(
_semanticUiReact.Segment,
Object.assign({}, ruleSemanticProps.segment, { className: '' + classNames.rule,
color: combinatorColor }),
_react2.default.createElement(controls.fieldSelector, {
options: fields,
title: translations.fields.title,
value: field,
ruleSemanticProps: ruleSemanticProps,
className: '' + classNames.fields,
handleOnChange: this.onFieldChanged
}),
_react2.default.createElement(controls.operatorSelector, {
field: field,
title: translations.operators.title,
options: getOperators(field),
ruleSemanticProps: ruleSemanticProps,
value: operator,
className: '' + classNames.operators,
handleOnChange: this.onOperatorChanged
}),
_react2.default.createElement(controls.valueEditor, {
field: field,
title: translations.value.title,
operator: operator,
ruleSemanticProps: ruleSemanticProps,
values: values,
value: value,
className: '' + classNames.value,
handleOnChange: this.onValueChanged
}),
_react2.default.createElement(_semanticUiReact.Button, Object.assign({}, ruleSemanticProps.deleteRuleButton, {
onClick: this.removeRule
}))
)
);
}
}]);
return RuleSemantic;
}(_react2.default.Component);
RuleSemantic.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/
*/
operatorSelector: _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
}),
/**
* color for rule segment selected based on combinatorColors array for selected combinator
*/
combinatorColor: _propTypes2.default.string,
/**
* 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 remove this rule from the RuleGroup
*/
onRuleRemove: _propTypes2.default.func,
/**
* This is a callback function invoked notify this rule has made a property change for operator,value,field
*/
onPropChange: _propTypes2.default.func,
/**
* This is a callback function invoked to return the current level for this rule
*/
getLevel: _propTypes2.default.func,
/**
* Random generated id for rule
*/
id: _propTypes2.default.any,
/**
* Id for the RuleGroup this rule is nested in
*/
parentId: _propTypes2.default.any,
/**
* Selected field for rule
*/
field: _propTypes2.default.any,
/**
* Selected operator for rule
*/
operator: _propTypes2.default.any,
/**
* Selected value for rule
*/
value: _propTypes2.default.any,
/**
* Current schema from QueryBuilder
*/
schema: _propTypes2.default.object,
/**
* 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
}),
/**
* 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
})
})
};
RuleSemantic.defaultProps = {
id: null,
parentId: null,
field: null,
operator: null,
value: null,
schema: null
};
exports.default = RuleSemantic;