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

🐛 Fixing multi select animation placeholder

Browse Source
This commit is contained in:
Maxime Lalo 2023-04-18 14:44:59 +02:00
parent 800ea9b654
commit 2632cd76f2
2 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/front/Components/DesignSystem/MultiSelect/classes.module.scss
View File

@ -10,6 +10,20 @@
border: 1px solid $grey-medium;
background-color: transparent;
.placeholder {
position: absolute;
top: 24px;
left: 24px;
pointer-events: none;
display: flex;
align-items: center;
transition: top 0.3s ease-in-out;
background-color: white;
padding: 0 4px;
&[data-selected="true"] {
top: -12px;
}
}
.label {
font-family: var(--font-primary);
font-style: normal;

34
src/front/Components/DesignSystem/MultiSelect/index.tsx
View File

@ -1,11 +1,11 @@
import classNames from "classnames";
import React from "react";
import ReactSelect, { ActionMeta, MultiValue, Options, PropsValue } from "react-select";
import { styles } from "./styles";
import classes from "./classes.module.scss";
import { IOption } from "../Select";
import Typography, { ITypo } from "../Typography";
import classNames from "classnames";
import classes from "./classes.module.scss";
import { styles } from "./styles";
type IProps = {
options: IOption[];
@ -20,6 +20,7 @@ type IProps = {
};
type IState = {
isSelectedOption: boolean;
isFocused: boolean;
};
export default class MultiSelect extends React.Component<IProps, IState> {
@ -31,25 +32,28 @@ export default class MultiSelect extends React.Component<IProps, IState> {
super(props);
this.state = {
isSelectedOption: this.props.defaultValue ? true : false,
isFocused: false,
};
this.onChange = this.onChange.bind(this);
this.onEmptyResearch = this.onEmptyResearch.bind(this);
this.onFocus = this.onFocus.bind(this);
this.onBlur = this.onBlur.bind(this);
}
public override render(): JSX.Element {
return (
<div className={classes["root"]}>
<div className={classNames(classes["label-container"], this.state.isSelectedOption && classes["active"])}>
{this.props.label && <div className={classes["label"]}>{this.props.label}</div>}
{this.state.isSelectedOption && (
<>
<Typography typo={ITypo.NAV_INPUT_16}>
<div className={classes["is-active-placeholder"]}>{this.props.placeholder}</div>
</Typography>
</>
{this.props.placeholder && (
<div
className={classes["placeholder"]}
data-selected={(this.state.isFocused || this.state.isSelectedOption).toString()}>
<Typography typo={ITypo.NAV_INPUT_16}>{this.props.placeholder}</Typography>
</div>
)}
<div className={classes["input-container"]}>
<ReactSelect
placeholder={this.props.placeholder}
placeholder={""}
options={this.props.options}
styles={styles}
onChange={this.onChange}
@ -59,6 +63,8 @@ export default class MultiSelect extends React.Component<IProps, IState> {
isMulti
isOptionDisabled={this.props.isOptionDisabled}
noOptionsMessage={this.onEmptyResearch}
onFocus={this.onFocus}
onBlur={this.onBlur}
/>
</div>
</div>
@ -66,6 +72,14 @@ export default class MultiSelect extends React.Component<IProps, IState> {
);
}
private onFocus() {
this.setState({ isFocused: true });
}
private onBlur() {
this.setState({ isFocused: false });
}
private onChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>) {
this.props.onChange && this.props.onChange(newValue, actionMeta);
this.setState({ isSelectedOption: newValue.length > 0 });