修正SegmentControl解析Map格式的默认值。

This commit is contained in:
徐涛 2025-01-25 09:22:17 +08:00
parent 4b4428fd3b
commit 6dba92a2c5
2 changed files with 22 additions and 2 deletions

View File

@ -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>
); );
} }

View File

@ -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>
); );
} }