feat: support cuda.mem type

react/src/components/DynamicUnitInputNumberWithSlider.tsx

@@ -30,7 +30,12 @@ const DynamicUnitInputNumberWithSlider: React.FC<
   ...otherProps
 }) => {
   const [value, setValue] = useControllableValue<string | undefined | null>(
-    otherProps,
+    {
+      ...otherProps,
+      value: _.isNumber(otherProps.value)
+        ? String(otherProps.value) + units[0]
+        : otherProps.value,
+    },
     {
       defaultValue: '0g',
     },

react/src/components/InputNumberWithSlider.tsx

@@ -8,7 +8,7 @@ import React, { useEffect } from 'react';
 
 type OmitControlledProps<T> = Omit<T, 'value' | 'onChange'>;
 
-interface InputNumberWithSliderProps {
+export interface InputNumberWithSliderProps {
   min?: number;
   max?: number;
   step?: number | null;
@@ -29,7 +29,10 @@ const InputNumberWithSlider: React.FC<InputNumberWithSliderProps> = ({
   sliderProps,
   ...otherProps
 }) => {
-  const [value, setValue] = useControllableValue(otherProps);
+  const [value, setValue] = useControllableValue({
+    ...otherProps,
+    value: _.isNumber(otherProps.value) ? otherProps.value : min,
+  });
   const inputRef = React.useRef<HTMLInputElement>(null);
   useEffect(() => {
     // when step is 1, make sure the value is integer

react/src/components/MultipleTypeInputWithSlider.tsx

@@ -0,0 +1,53 @@
+// This is a draft version.
+// It doesn't seem to be a good idea to compare using two inputs with different units by composition on parent.
+import DynamicUnitInputNumberWithSlider from './DynamicUnitInputNumberWithSlider';
+import InputNumberWithSlider, {
+  InputNumberWithSliderProps,
+} from './InputNumberWithSlider';
+import { useControllableValue } from 'ahooks';
+import React from 'react';
+
+interface MultipleTypeInputWithSliderProps
+  extends Omit<InputNumberWithSliderProps, 'min' | 'max' | 'step'> {
+  type: 'number' | 'bytes';
+  min?: number;
+  max?: number;
+}
+
+const MultipleTypeInputWithSlider: React.FC<
+  MultipleTypeInputWithSliderProps
+> = ({
+  type,
+  inputNumberProps,
+  sliderProps,
+  min,
+  max,
+  value: _valueFromProps,
+  onChange: _onChangeFromProps,
+  ...props
+}) => {
+  const [value, setValue] = useControllableValue({
+    value: _valueFromProps,
+    onChange: _onChangeFromProps,
+  });
+  return type === 'bytes' ? (
+    <DynamicUnitInputNumberWithSlider
+      {...props}
+      value={value}
+      onChange={setValue}
+      extraMarks={sliderProps?.marks}
+    />
+  ) : (
+    <InputNumberWithSlider
+      {...props}
+      min={min}
+      max={max}
+      inputNumberProps={inputNumberProps}
+      sliderProps={sliderProps}
+      value={value}
+      onChange={setValue}
+    />
+  );
+};
+
+export default MultipleTypeInputWithSlider;