sunmao-sdk/src/component/InputInterval/index.js

榫卯-开箱即用赋能-sdk

"use strict";

import React, { useState, useEffect } from "react";
import { Input } from "antd";
import "./../index.css";

const displayName = "InputInterval";
const InputInterval = ({ onChange, name, value, readOnly, ...otherProps }) => {
  const [nums, setNums] = useState([]);
  useEffect(() => {
    if (value)
      setNums(Array.isArray(value) ? value : setNums(value.split(",")));
    else setNums([]);
  }, [value]);

  const handleChange = ({ target: { value, id } }) => {
    const num = parseInt(id);
    if (num === 1 && (nums.length === 0 || !nums[0])) nums[0] = 0;
    nums[num] = value;
    onChange(name, nums);
  };
  return (
    <div className="box-row center-a" style={{ width: "100%" }}>
      <Input
        id={"0"}
        value={nums[0]}
        disabled={readOnly}
        type="number"
        onChange={handleChange}
      />
      <div className="mgl10 mgr10">~</div>
      <Input
        id={"1"}
        value={nums[1]}
        disabled={readOnly}
        type="number"
        onChange={handleChange}
      />
    </div>
  );
};

export default InputInterval;