last fix review
This commit is contained in:
parent
d9eb1478a6
commit
b6a60dff2c
@ -29,8 +29,7 @@ export default class Modal<P extends IModalProps, S extends IState = IState> ext
|
|||||||
constructor(props: P) {
|
constructor(props: P) {
|
||||||
super(props);
|
super(props);
|
||||||
this.close = this.close.bind(this);
|
this.close = this.close.bind(this);
|
||||||
this.closeOnBackgroundClick = this.closeOnBackgroundClick.bind(this);
|
|
||||||
|
|
||||||
(this.state as any) = {
|
(this.state as any) = {
|
||||||
isOpen: props.isOpen ?? true,
|
isOpen: props.isOpen ?? true,
|
||||||
};
|
};
|
||||||
@ -41,13 +40,13 @@ export default class Modal<P extends IModalProps, S extends IState = IState> ext
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classes["root"]} data-side-background={this.props.withSideBackground}>
|
<div className={classes["root"]} data-side-background={this.props.withSideBackground}>
|
||||||
<div className={classes["background"]} onClick={this.closeOnBackgroundClick} />
|
<div className={classes["background"]} onClick={this.close} />
|
||||||
<div
|
<div
|
||||||
className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}
|
className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}
|
||||||
onClick={this.props.hasContainerClosable && this.close}>
|
onClick={this.props.hasContainerClosable && this.close}>
|
||||||
{this.props.closeBtn && (
|
{this.props.closeBtn && (
|
||||||
<div className={classes["cross"]} >
|
<div className={classes["cross"]} >
|
||||||
<Image alt="Unplugged" height="50" src={CrossIcon} className={classes["close-icon"]} onClick={this.close}/>
|
<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close}/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className={classes["sub-container"]}>
|
<div className={classes["sub-container"]}>
|
||||||
@ -73,10 +72,6 @@ export default class Modal<P extends IModalProps, S extends IState = IState> ext
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private closeOnBackgroundClick() {
|
|
||||||
this.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
protected close() {
|
protected close() {
|
||||||
this.setState({
|
this.setState({
|
||||||
isOpen: false,
|
isOpen: false,
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
.root {
|
.root {
|
||||||
color: $black;
|
color: $black;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
&.H1-60 {
|
&.H1-60 {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
@ -59,7 +59,17 @@ export default class DesignSystem extends BasePage<IProps, IState> {
|
|||||||
<Typography typo={ITypo.H3}>Modal components</Typography>
|
<Typography typo={ITypo.H3}>Modal components</Typography>
|
||||||
</div>
|
</div>
|
||||||
<Button variant={EButtonVariant.PRIMARY} onClick={this.openModal}>Show Modal</Button>
|
<Button variant={EButtonVariant.PRIMARY} onClick={this.openModal}>Show Modal</Button>
|
||||||
<Confirm isOpen={this.state.isModalDisplayed} header={"Title"} onClose={this.closeModal} cancelText={"Cancel"} closeBtn confirmText={"Confirmer"}>Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat. Elementum malesuada at sit elit.</Confirm>
|
|
||||||
|
<Confirm
|
||||||
|
isOpen={this.state.isModalDisplayed}
|
||||||
|
onClose={this.closeModal}
|
||||||
|
closeBtn
|
||||||
|
header={"Title"}
|
||||||
|
cancelText={"Cancel"}
|
||||||
|
confirmText={"Confirmer"}>
|
||||||
|
Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat. Elementum malesuada at sit elit.
|
||||||
|
</Confirm>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -67,7 +77,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
private openModal() {
|
private openModal() {
|
||||||
console.log("Modal Up")
|
|
||||||
this.setState({
|
this.setState({
|
||||||
isModalDisplayed: true
|
isModalDisplayed: true
|
||||||
})
|
})
|
||||||
|
@ -1,6 +1 @@
|
|||||||
@font-face {
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
|
||||||
font-family: 'Proxima Nova';
|
|
||||||
src: url('/fonts/ProximaNova-Thin.woff2') format('woff2'), url('/fonts/ProximaNova-Thin.woff') format('woff');
|
|
||||||
font-weight: 100;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
Loading…
x
Reference in New Issue
Block a user