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) {
|
||||
super(props);
|
||||
this.close = this.close.bind(this);
|
||||
this.closeOnBackgroundClick = this.closeOnBackgroundClick.bind(this);
|
||||
|
||||
|
||||
(this.state as any) = {
|
||||
isOpen: props.isOpen ?? true,
|
||||
};
|
||||
@ -41,13 +40,13 @@ export default class Modal<P extends IModalProps, S extends IState = IState> ext
|
||||
|
||||
return (
|
||||
<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
|
||||
className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}
|
||||
onClick={this.props.hasContainerClosable && this.close}>
|
||||
{this.props.closeBtn && (
|
||||
<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 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() {
|
||||
this.setState({
|
||||
isOpen: false,
|
||||
|
@ -3,7 +3,7 @@
|
||||
|
||||
.root {
|
||||
color: $black;
|
||||
|
||||
font-family: 'Inter', sans-serif;
|
||||
&.H1-60 {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
|
@ -59,7 +59,17 @@ export default class DesignSystem extends BasePage<IProps, IState> {
|
||||
<Typography typo={ITypo.H3}>Modal components</Typography>
|
||||
</div>
|
||||
<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>
|
||||
@ -67,7 +77,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
|
||||
);
|
||||
}
|
||||
private openModal() {
|
||||
console.log("Modal Up")
|
||||
this.setState({
|
||||
isModalDisplayed: true
|
||||
})
|
||||
|
@ -1,6 +1 @@
|
||||
@font-face {
|
||||
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;
|
||||
}
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
|
Loading…
x
Reference in New Issue
Block a user