image-20221011173932728.png

  1. import React, { useState, useEffect } from "react";
  2. import {
  3.   func,
  4.   array,
  5.   object,
  6.   bool,
  7.   string,
  8.   number,
  9.   oneOfType,
  10.   oneOf
  11. } from "prop-types";
  12. import { Space, InputNumber, Input } from "antd";
  13. import { isFunction, isObject, isEqual } from "lodash-es";
  15. const defaultOptions = [
  16.   { label: "室", key: "bedroom" },
  17.   { label: "厅", key: "livingroom" },
  18.   { label: "厨", key: "kitchen" },
  19.   { label: "卫", key: "bathroom" }
  20. ];
  21. const allowComponent = ["Input", "InputNumber"];
  22. const defaultComponent = allowComponent.at(-1);
  24. InputDimension.propTypes = {
  25.   value: oneOfType([bool, number, string]),
  26.   onChange: func,
  27.   options: array,
  28.   component: oneOf(allowComponent),
  29.   componentProps: object,
  30.   labelInValue: bool,
  31. };
  32. InputDimension.defaultProps = {
  33.   options: defaultOptions,
  34.   component: defaultComponent,
  35.   labelInValue: false,
  36. };
  38. function InputDimension(props) {
  39.   const {
  40.     value,
  41.     onChange,
  42.     options,
  43.     component,
  44.     componentProps,
  45.     labelInValue
  46.   } = props;
  47.   const [state, setState] = useState({});
  49.   useEffect(() => {
  50.     if (isObject(value) && !isEqual(value, state)) {
  51.       setState(value);
  52.     }
  53.   }, [value]);
  55.   function handleChange({label, key}) {
  56.     return (e) => {
  57.       const _value = isObject(e) ? e.target.value : e;
  58.       setState(prevState => {
  59.         const newState = { ...prevState, [key]: _value };
  60.         if (labelInValue) {
  61.           newState.label = label
  62.         }
  63.         if (isFunction(onChange)) {
  64.           onChange(newState);
  65.         }
  66.         return newState;
  67.       });
  68.     };
  69.   }
  71.   return (
  72.     <Space>
  73.       {
  74.         options.map(it => {
  75.           const { label, key } = it;
  76.           return (
  77.             <RenderChild
  78.               key={key}
  79.               label={label}
  80.               value={state[key]}
  81.               component={component}
  82.               componentProps={componentProps}
  83.               onChange={handleChange(it)}
  84.             />
  85.           );
  86.         })
  87.       }
  88.     </Space>
  89.   );
  90. }
  92. export default InputDimension;
  95. function RenderChild(props) {
  96.   const { 
  97.     label,
  98.     component,
  99.     componentProps, 
  100.     ...restProps
  101.   } = props;
  103.   if (isEqual(component, defaultComponent)) {
  104.     return (
  105.       <InputNumber
  106.         addonAfter={label}
  107.         {...componentProps}
  108.         {...restProps}
  109.       />
  110.     );
  111.   }
  113.   return (
  114.     <Input
  115.       suffix={label}
  116.       {...componentProps}
  117.       {...restProps}
  118.     />
  119.   );
  120. }

维度数据

  1. const options = [
  2.   { label: "长", value: "length" },
  3.   { label: "宽", value: "width" },
  4.   { label: "高", value: "height" },
  5. ];
  7. // 两个后面都是 itude
  8. const optionsLat = [
  9.   { label: "经度", value: "longitude" },
  10.   { label: "维度", value: "latitude" },
  11. ]