linkmore-design/lib/advanced-filter/widgets/InputNumberRangeRender.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _button = _interopRequireDefault(require("../../button"));
var _inputNumber = _interopRequireDefault(require("../../input-number"));
var _select = _interopRequireDefault(require("../../select"));
const NumberRange = /*#__PURE__*/(0, _react.forwardRef)(({
  value = [],
  onChange
}, ref) => {
  const handleChange = (val, type) => {
    const nValue = value.slice(0, 2);
    if (type === 'prev') {
      nValue[0] = val;
    }
    if (type === 'next') {
      nValue[1] = val;
    }
    onChange(nValue);
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "number_range"
  }, /*#__PURE__*/_react.default.createElement(_inputNumber.default, {
    ref: ref,
    size: "middle",
    min: 0,
    max: value?.[1] || 999999999,
    bordered: false,
    precision: 0,
    value: value?.[0],
    onChange: val => handleChange(val, 'prev')
  }), /*#__PURE__*/_react.default.createElement("span", null, "~"), /*#__PURE__*/_react.default.createElement(_inputNumber.default, {
    size: "middle",
    min: value?.[0] || 0,
    bordered: false,
    precision: 0,
    value: value?.[1],
    onChange: val => handleChange(val, 'next')
  }));
});

// 数字输入框触发blur使用内置校验
const InputNumberRangeRender = props => {
  const {
    value: defaultValue,
    onChange,
    options,
    locale = {}
  } = props;
  const inputRef = (0, _react.useRef)(null);
  const [value, setValue] = _react.default.useState(() => Array.isArray(defaultValue) ? defaultValue.slice(0, 2) : []);
  const [unit, setUnit] = _react.default.useState(() => defaultValue?.[2] || options?.[0]?.value);

  /** onChange([prev, next, unit]) */
  const handleClick = () => {
    const exitingValue = value?.filter(v => !!v || typeof v === 'number')?.length === 2;
    // const exitingValue = value.slice(0,2).length === 2
    const resetValue = exitingValue ? value.concat(unit) : [];
    onChange?.(resetValue);
  };
  (0, _react.useEffect)(() => {
    inputRef.current?.focus({
      cursor: 'all'
    });
  }, []);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_dropdown"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_body"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_body_range"
  }, /*#__PURE__*/_react.default.createElement(NumberRange, {
    ref: inputRef,
    value: value,
    onChange: setValue
  }), !!options?.length ? /*#__PURE__*/_react.default.createElement(_select.default, {
    options: options,
    defaultValue: unit,
    style: {
      width: 80
    },
    onChange: setUnit
  }) : null), /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_body_footer"
  }, /*#__PURE__*/_react.default.createElement(_button.default, {
    type: "primary",
    size: "small",
    onClick: handleClick
  }, locale.ok))));
};
var _default = InputNumberRangeRender;
exports.default = _default;