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