linkmore-design
Version:
🌈 🚀lm组件库。🚀
108 lines (106 loc) • 4.12 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { forwardRef, useEffect, useRef } from 'react';
import Button from "../../button";
import InputNumber from "../../input-number";
import Select from "../../select";
var NumberRange = /*#__PURE__*/forwardRef(function (_ref, ref) {
var _ref$value = _ref.value,
value = _ref$value === void 0 ? ['', ''] : _ref$value,
onChange = _ref.onChange;
var handleChange = function handleChange(val, type) {
var nValue = value.slice(0, 2);
if (type === 'prev') {
nValue[0] = val;
}
if (type === 'next') {
nValue[1] = val;
}
onChange(nValue);
};
return /*#__PURE__*/React.createElement("div", {
className: "number_range"
}, /*#__PURE__*/React.createElement(InputNumber, {
ref: ref,
size: "middle",
min: 0,
max: (value === null || value === void 0 ? void 0 : value[1]) || 999999999,
bordered: false,
precision: 0,
value: value === null || value === void 0 ? void 0 : value[0],
onChange: function onChange(val) {
return handleChange(val, 'prev');
}
}), /*#__PURE__*/React.createElement("span", null, "~"), /*#__PURE__*/React.createElement(InputNumber, {
size: "middle",
min: (value === null || value === void 0 ? void 0 : value[0]) || 0,
bordered: false,
precision: 0,
value: value === null || value === void 0 ? void 0 : value[1],
onChange: function onChange(val) {
return handleChange(val, 'next');
}
}));
});
// 数字输入框触发blur使用内置校验
var InputNumberRangeRender = function InputNumberRangeRender(props) {
var defaultValue = props.value,
onCancel = props.onCancel,
onChange = props.onChange,
options = props.options,
_props$locale = props.locale,
locale = _props$locale === void 0 ? {} : _props$locale;
var inputRef = useRef(null);
var _React$useState = React.useState(function () {
return Array.isArray(defaultValue) ? defaultValue.slice(0, 2) : [];
}),
_React$useState2 = _slicedToArray(_React$useState, 2),
value = _React$useState2[0],
setValue = _React$useState2[1];
var _React$useState3 = React.useState(function () {
var _options$;
return (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[2]) || (options === null || options === void 0 ? void 0 : (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value);
}),
_React$useState4 = _slicedToArray(_React$useState3, 2),
unit = _React$useState4[0],
setUnit = _React$useState4[1];
/** onChange([prev, next, unit]) */
var handleClick = function handleClick() {
var _value$filter;
var exitingValue = (value === null || value === void 0 ? void 0 : (_value$filter = value.filter(function (v) {
return !!v || v === 0;
})) === null || _value$filter === void 0 ? void 0 : _value$filter.length) === 2;
var resetValue = exitingValue ? value.concat(unit) : [];
onChange === null || onChange === void 0 ? void 0 : onChange(resetValue);
};
useEffect(function () {
var _inputRef$current;
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus({
cursor: 'all'
});
}, []);
return /*#__PURE__*/React.createElement("div", {
className: "filter_dropdown"
}, /*#__PURE__*/React.createElement("div", {
className: "filter_body"
}, /*#__PURE__*/React.createElement("div", {
className: "filter_body_range"
}, /*#__PURE__*/React.createElement(NumberRange, {
ref: inputRef,
value: value,
onChange: setValue
}), !!(options !== null && options !== void 0 && options.length) ? /*#__PURE__*/React.createElement(Select, {
options: options,
defaultValue: unit,
style: {
width: 80
},
onChange: setUnit
}) : null), /*#__PURE__*/React.createElement("div", {
className: "filter_body_footer"
}, /*#__PURE__*/React.createElement(Button, {
type: "primary",
size: "small",
onClick: handleClick
}, locale.ok))));
};
export default InputNumberRangeRender;