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

Merge branch 'feature/ora-mt-262-create-folder' into dev

Browse Source
This commit is contained in:
Maxime Lalo 2023-04-18 11:19:24 +02:00
commit 2e941c32c2
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss
View File

@ -111,6 +111,7 @@
position: absolute; position: absolute;
background: $white; background: $white;
transform: translateY(35px); transform: translateY(35px);
transition: transform 0.3s ease-in-out;
} }
&:focus { &:focus {

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