4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ Fixing select

Browse Source
This commit is contained in:
Maxime Lalo 2023-04-18 11:19:20 +02:00
parent f078a1aa3b
commit d766113f69
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/front/Components/DesignSystem/Select/index.tsx
View File

@ -26,6 +26,7 @@ type IState = {
isOpen: boolean; isOpen: boolean;
listWidth: number; listWidth: number;
listHeight: number; listHeight: number;
selectedOption: IOption | null;
}; };
export default class Select extends React.Component<IProps, IState> { export default class Select extends React.Component<IProps, IState> {
@ -39,13 +40,14 @@ export default class Select extends React.Component<IProps, IState> {
isOpen: false, isOpen: false,
listHeight: 0, listHeight: 0,
listWidth: 0, listWidth: 0,
selectedOption: null,
}; };
this.toggle = this.toggle.bind(this); this.toggle = this.toggle.bind(this);
this.onSelect = this.onSelect.bind(this); this.onSelect = this.onSelect.bind(this);
} }
public override render(): JSX.Element { public override render(): JSX.Element {
const selectedOption = this.props.selectedOption; const selectedOption = this.state.selectedOption ?? this.props.selectedOption;
return ( return (
<div className={classNames(classes["root"], this.props.className)} ref={this.rootRef}> <div className={classNames(classes["root"], this.props.className)} ref={this.rootRef}>
<label <label
@ -54,19 +56,21 @@ export default class Select extends React.Component<IProps, IState> {
onClick={this.toggle} onClick={this.toggle}
data-border-right-collapsed={this.props.hasBorderRightCollapsed}> data-border-right-collapsed={this.props.hasBorderRightCollapsed}>
<div className={classNames(classes["container-input"])}> <div className={classNames(classes["container-input"])}>
<> {selectedOption && (
{selectedOption?.icon && ( <>
<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span> <span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span>
)} <Typography typo={ITypo.P_18}>
<Typography typo={ITypo.P_18}> <span className={classes["text"]}>{selectedOption?.label}</span>
<span className={classes["text"]}>{selectedOption?.label}</span> </Typography>
</Typography> </>
<div className={classes["placeholder"]} data-open={selectedOption && true}> )}
{!selectedOption && (
<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
<Typography typo={ITypo.NAV_INPUT_16}> <Typography typo={ITypo.NAV_INPUT_16}>
<span className={classes["text"]}>{this.props.placeholder ?? ""}</span> <span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
</Typography> </Typography>
</div> </div>
</> )}
</div> </div>
<Image className={classes["chevron-icon"]} data-open={this.state.isOpen} src={ChevronIcon} alt="chevron icon" /> <Image className={classes["chevron-icon"]} data-open={this.state.isOpen} src={ChevronIcon} alt="chevron icon" />
</label> </label>
@ -135,6 +139,9 @@ export default class Select extends React.Component<IProps, IState> {
private onSelect(option: IOption, e: React.MouseEvent<HTMLLIElement, MouseEvent>) { private onSelect(option: IOption, e: React.MouseEvent<HTMLLIElement, MouseEvent>) {
this.props.onChange && this.props.onChange(option); this.props.onChange && this.props.onChange(option);
this.setState({
selectedOption: option,
});
this.toggle(e); this.toggle(e);
} }
} }