export default()

in src/setter/style-setter/components/number/index.tsx [33:144]
100 lines of code
22 McCabe index (conditional complexity)

export default (props: numberProps) => {
  const {
    styleData,
    styleKey,
    unit,
    onStyleChange,
    min,
    max,
    style = {},
    className = '',
    placeholderScale,
    onChangeFunction,
    multiProp,
    defaultPlaceholder,
  } = props;

  const [placeholder, setPlaceholder] = useState(defaultPlaceholder);
  const onNumberChange = (styleKey: string, value: number, unit?: string) => {
    onStyleChange([
      {
        styleKey,
        value: unit ? addUnit(value, unit) : String(value),
      },
    ]);
  };

  const initData = (props: numberProps) => {
    const { field, styleKey, useComputedStyle } = props;
    if (useComputedStyle) {
      const placeholder = getPlaceholderPropertyValue(field, styleKey);

      if (placeholder && !isNaN(placeholder)) {
        setPlaceholder(placeholder * (1 / placeholderScale));
      } else {
        setPlaceholder('auto');
      }
    }
  };

  useEffect(() => {
    initData(props);
  }, []);

  let value = unit ? removeUnit(styleData[styleKey]) : styleData[styleKey];
  let curUnit = unit ? getUnit(styleData[styleKey]) || 'px' : '';
  // 不加multiprop一样，加了单独处理
  if (typeof multiProp === 'number') {
    value = unifyStyle(styleData[styleKey])?.split(' ')?.[multiProp];
    if (value === null || value === undefined || value === 'auto') {
      value = null;
      curUnit = 'px';
    } else {
      curUnit = unit ? getUnit(value) || 'px' : '';
      value = unit ? removeUnit(value) : value;
    }
  }
  if (isNaN(value)) {
    value = 0;
  }
  const getInnerAfter = useMemo(() => {
    if (typeof unit === 'string') {
      return unit;
    }
    if (!unit) {
      return '';
    }
    const options = unit?.map((item) => {
      return {
        value: item,
        label: item,
      };
    });
    return (
        <Select
          defaultValue="px"
          style={{ width: '24px' }}
          value={curUnit || 'px'}
          autoWidth={false}
          hasBorder={false}
          hasArrow={false}
          onChange={(val) =>
            onChangeFunction
              ? onChangeFunction(styleKey, value, val)
              : onNumberChange(styleKey, value, val)
          }
          dataSource={options}
        />
    );
  }, [unit]);
  const originValue = styleData[styleKey]
  if (isCssVarBind(originValue)) {
    return <div className='ext-css-variable-ghost' title={originValue}>
      {originValue}
    </div>;
  }
  return (
    <NumberPicker
      style={style}
      className={className}
      value={value}
      min={isEmptyValue(min) ? Number.MIN_SAFE_INTEGER : min}
      max={isEmptyValue(max) ? Number.MAX_SAFE_INTEGER : max}
      onChange={(val) =>
        onChangeFunction
          ? onChangeFunction(styleKey, val, curUnit)
          : onNumberChange(styleKey, val, curUnit)
      }
      innerAfter={getInnerAfter}
      placeholder={placeholder}
     />
  );
};