@react-awesome-query-builder/antd
Version:
User-friendly query builder for React. AntDesign widgets
179 lines • 6.59 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
var _excluded = ["width"];
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import { Slider, InputNumber, Col } from "antd";
var RangeWidget = /*#__PURE__*/function (_PureComponent) {
function RangeWidget(props) {
var _this;
_classCallCheck(this, RangeWidget);
_this = _callSuper(this, RangeWidget, [props]);
_this.state = {};
_this.handleChange = function (value) {
_this.props.setValue(value);
};
_this.handleChangeFrom = function (valueFrom) {
var value = _this.props.value || [undefined, undefined];
if (valueFrom === "" || valueFrom == null) valueFrom = undefined; //value[0];
value = _toConsumableArray(value);
value[0] = valueFrom;
// if (value[1] == undefined)
// value[1] = valueFrom;
_this.props.setValue(value);
};
_this.handleChangeTo = function (valueTo) {
var value = _this.props.value || [undefined, undefined];
if (valueTo === "" || valueTo == null) valueTo = undefined; //value[1];
value = _toConsumableArray(value);
value[1] = valueTo;
// if (value[0] == undefined)
// value[0] = valueTo;
_this.props.setValue(value);
};
_this.tipFormatter = function (val) {
return val != undefined ? val.toString() : "";
};
var _ref = props.value || [null, null],
_ref2 = _slicedToArray(_ref, 2),
_valueFrom = _ref2[0],
_valueTo = _ref2[1];
if (props.value && (_valueFrom == undefined || _valueTo == undefined)) {
// happens if we changed op from '==' to 'between'
// (I know, timeout is dirty hack..)
// setTimeout(() => {
// const oneValue = valueFrom || valueTo;
// const value = [oneValue, oneValue];
// this.props.setValue(value);
// }, 1);
}
return _this;
}
_inherits(RangeWidget, _PureComponent);
return _createClass(RangeWidget, [{
key: "render",
value: function render() {
var _this$props = this.props,
config = _this$props.config,
placeholders = _this$props.placeholders,
customProps = _this$props.customProps,
value = _this$props.value,
min = _this$props.min,
max = _this$props.max,
step = _this$props.step,
marks = _this$props.marks,
textSeparators = _this$props.textSeparators,
readonly = _this$props.readonly;
var _config$settings = config.settings,
renderSize = _config$settings.renderSize,
defaultSliderWidth = _config$settings.defaultSliderWidth;
var _ref3 = customProps || {},
width = _ref3.width,
rest = _objectWithoutProperties(_ref3, _excluded);
var customInputProps = rest.input || {};
var customSliderProps = rest.slider || rest;
var aValue = value != undefined ? value : undefined;
var _ref4 = aValue || [null, null],
_ref5 = _slicedToArray(_ref4, 2),
valueFrom = _ref5[0],
valueTo = _ref5[1];
return /*#__PURE__*/React.createElement(Col, {
style: {
display: "inline-flex",
flexWrap: "wrap"
}
}, /*#__PURE__*/React.createElement(Col, {
style: {
"float": "left",
marginRight: "5px"
}
}, /*#__PURE__*/React.createElement(InputNumber, _extends({
disabled: readonly,
size: renderSize,
key: "numFrom",
value: valueFrom,
min: min,
max: max,
step: step,
placeholder: placeholders[0],
onChange: this.handleChangeFrom
}, customInputProps))), /*#__PURE__*/React.createElement(Col, {
style: {
"float": "left",
marginRight: "5px",
lineHeight: "20px"
}
}, /*#__PURE__*/React.createElement("span", null, textSeparators[1])), /*#__PURE__*/React.createElement(Col, {
style: {
"float": "left",
marginRight: "5px"
}
}, /*#__PURE__*/React.createElement(InputNumber, _extends({
disabled: readonly,
size: renderSize,
key: "numTo",
value: valueTo,
min: min,
max: max,
step: step,
placeholder: placeholders[1],
onChange: this.handleChangeTo
}, customInputProps))), /*#__PURE__*/React.createElement(Col, {
style: {
"float": "left",
width: width || defaultSliderWidth
}
}, /*#__PURE__*/React.createElement(Slider, _extends({
disabled: readonly,
value: aValue,
tooltip: {
formatter: this.tipFormatter
},
min: min,
max: max,
step: step,
marks: marks,
included: true,
range: true,
onChange: this.handleChange
}, customSliderProps))), /*#__PURE__*/React.createElement(Col, {
style: {
clear: "both"
}
}));
}
}]);
}(PureComponent);
RangeWidget.propTypes = {
setValue: PropTypes.func.isRequired,
placeholder: PropTypes.string,
placeholders: PropTypes.array,
textSeparators: PropTypes.array,
config: PropTypes.object.isRequired,
field: PropTypes.any,
value: PropTypes.array,
customProps: PropTypes.object,
fieldDefinition: PropTypes.object,
readonly: PropTypes.bool,
// from fieldSettings:
min: PropTypes.number,
max: PropTypes.number,
step: PropTypes.number,
marks: PropTypes.object
};
RangeWidget.defaultProps = {
min: 0,
max: 100,
step: 1,
marks: undefined
};
export { RangeWidget as default };