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;
background: $white;
transform: translateY(35px);
transition: transform 0.3s ease-in-out;
}
&:focus {

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

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