修正SegmentControl解析Map格式的默认值。
This commit is contained in:
		| @@ -5,6 +5,8 @@ import type { Option } from '../models'; | |||||||
| import styles from './HSegmentedControl.module.css'; | import styles from './HSegmentedControl.module.css'; | ||||||
|  |  | ||||||
| type HSegmentedControlProps = { | type HSegmentedControlProps = { | ||||||
|  |   name?: string; | ||||||
|  |   defaultValue?: Option['value']; | ||||||
|   options?: Option[]; |   options?: Option[]; | ||||||
|   value?: Option['value']; |   value?: Option['value']; | ||||||
|   onChange?: (value: Option['value']) => void; |   onChange?: (value: Option['value']) => void; | ||||||
| @@ -12,12 +14,19 @@ type HSegmentedControlProps = { | |||||||
| }; | }; | ||||||
|  |  | ||||||
| export function HSegmentedControl({ | export function HSegmentedControl({ | ||||||
|  |   name, | ||||||
|  |   defaultValue, | ||||||
|   options = [], |   options = [], | ||||||
|   value, |   value, | ||||||
|   onChange, |   onChange, | ||||||
|   extendClassName, |   extendClassName, | ||||||
| }: HSegmentedControlProps) { | }: HSegmentedControlProps) { | ||||||
|   const [selected, setSelected] = useState(value ?? options[0].value ?? null); |   const [selected, setSelected] = useState( | ||||||
|  |     value ?? | ||||||
|  |       defaultValue ?? | ||||||
|  |       (isMap(options[0]) ? options[0].get('value') : options[0].value) ?? | ||||||
|  |       null, | ||||||
|  |   ); | ||||||
|   const [sliderPosition, setSliderPosition] = useState(0); |   const [sliderPosition, setSliderPosition] = useState(0); | ||||||
|   const [sliderWidth, setSliderWidth] = useState(0); |   const [sliderWidth, setSliderWidth] = useState(0); | ||||||
|   const sliderRef = useRef<HTMLDivElement>(null); |   const sliderRef = useRef<HTMLDivElement>(null); | ||||||
| @@ -57,6 +66,7 @@ export function HSegmentedControl({ | |||||||
|           /> |           /> | ||||||
|         )} |         )} | ||||||
|       </div> |       </div> | ||||||
|  |       {!isNil(name) && <input type="hidden" name={name} value={selected} />} | ||||||
|     </div> |     </div> | ||||||
|   ); |   ); | ||||||
| } | } | ||||||
|   | |||||||
| @@ -5,6 +5,8 @@ import type { Option } from '../models'; | |||||||
| import styles from './VSegmentedControl.module.css'; | import styles from './VSegmentedControl.module.css'; | ||||||
|  |  | ||||||
| type VSegmentedControlProps = { | type VSegmentedControlProps = { | ||||||
|  |   name?: string; | ||||||
|  |   defaultValue?: Option['value']; | ||||||
|   options?: Option[]; |   options?: Option[]; | ||||||
|   value?: Option['value']; |   value?: Option['value']; | ||||||
|   onChange?: (value: Option['value']) => void; |   onChange?: (value: Option['value']) => void; | ||||||
| @@ -12,12 +14,19 @@ type VSegmentedControlProps = { | |||||||
| }; | }; | ||||||
|  |  | ||||||
| export function VSegmentedControl({ | export function VSegmentedControl({ | ||||||
|  |   name, | ||||||
|  |   defaultValue, | ||||||
|   options = [], |   options = [], | ||||||
|   value, |   value, | ||||||
|   onChange, |   onChange, | ||||||
|   extendClassName, |   extendClassName, | ||||||
| }: VSegmentedControlProps) { | }: VSegmentedControlProps) { | ||||||
|   const [selected, setSelected] = useState(value ?? options[0].value ?? null); |   const [selected, setSelected] = useState( | ||||||
|  |     value ?? | ||||||
|  |       defaultValue ?? | ||||||
|  |       (isMap(options[0]) ? options[0].get('value') : options[0].value) ?? | ||||||
|  |       null, | ||||||
|  |   ); | ||||||
|   const [sliderPosition, setSliderPosition] = useState(0); |   const [sliderPosition, setSliderPosition] = useState(0); | ||||||
|   const [sliderHeight, setSliderHeight] = useState(0); |   const [sliderHeight, setSliderHeight] = useState(0); | ||||||
|   const sliderRef = useRef<HTMLDivElement>(null); |   const sliderRef = useRef<HTMLDivElement>(null); | ||||||
| @@ -57,6 +66,7 @@ export function VSegmentedControl({ | |||||||
|           /> |           /> | ||||||
|         )} |         )} | ||||||
|       </div> |       </div> | ||||||
|  |       {!isNil(name) && <input type="hidden" name={name} value={selected} />} | ||||||
|     </div> |     </div> | ||||||
|   ); |   ); | ||||||
| } | } | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user