@woosmap/ui 3.179.0 → 3.181.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -81,7 +81,16 @@ class Modal extends Component {
|
|
|
81
81
|
};
|
|
82
82
|
|
|
83
83
|
renderFooter = () => {
|
|
84
|
-
const {
|
|
84
|
+
const {
|
|
85
|
+
footer,
|
|
86
|
+
labelValidate,
|
|
87
|
+
errorLabel,
|
|
88
|
+
validateCb,
|
|
89
|
+
validateBtnProps,
|
|
90
|
+
mainButtonType,
|
|
91
|
+
testId,
|
|
92
|
+
loadingLayer,
|
|
93
|
+
} = this.props;
|
|
85
94
|
const { isLoading } = this.state;
|
|
86
95
|
|
|
87
96
|
if (footer === false) {
|
|
@@ -105,7 +114,8 @@ class Modal extends Component {
|
|
|
105
114
|
testId={`${testId}-validate-button`}
|
|
106
115
|
label={labelValidate || tr('Validate')}
|
|
107
116
|
onClick={this.validate}
|
|
108
|
-
isLoading={isLoading}
|
|
117
|
+
isLoading={!loadingLayer && isLoading}
|
|
118
|
+
disabled={loadingLayer && isLoading}
|
|
109
119
|
{...validateBtnProps}
|
|
110
120
|
/>
|
|
111
121
|
</>
|
|
@@ -124,11 +134,22 @@ class Modal extends Component {
|
|
|
124
134
|
return this.modalRef;
|
|
125
135
|
};
|
|
126
136
|
|
|
137
|
+
renderLoadingLayer = () => {
|
|
138
|
+
const { loadingLayerMessage } = this.props;
|
|
139
|
+
return (
|
|
140
|
+
<div className="modal__body__loading-layer">
|
|
141
|
+
<Icon icon="load" size={60} />
|
|
142
|
+
<span>{loadingLayerMessage}</span>
|
|
143
|
+
</div>
|
|
144
|
+
);
|
|
145
|
+
};
|
|
146
|
+
|
|
127
147
|
render() {
|
|
128
|
-
const { open } = this.state;
|
|
148
|
+
const { open, isLoading } = this.state;
|
|
129
149
|
|
|
130
|
-
const { title, children, className, isFull, header, testId, noHeader } = this.props;
|
|
150
|
+
const { title, children, className, isFull, header, testId, noHeader, loadingLayer } = this.props;
|
|
131
151
|
const tit = open && title;
|
|
152
|
+
const onLoadingLayer = isLoading && loadingLayer;
|
|
132
153
|
return ReactDOM.createPortal(
|
|
133
154
|
<AnimatePresence>
|
|
134
155
|
{open && (
|
|
@@ -148,7 +169,10 @@ class Modal extends Component {
|
|
|
148
169
|
{!noHeader && (
|
|
149
170
|
<div className="modal__header">{header || <h1 className="title">{tit}</h1>}</div>
|
|
150
171
|
)}
|
|
151
|
-
<div className=
|
|
172
|
+
<div className={cl('modal__body', { 'modal__body--blur': onLoadingLayer })}>
|
|
173
|
+
{onLoadingLayer && this.renderLoadingLayer()}
|
|
174
|
+
{children}
|
|
175
|
+
</div>
|
|
152
176
|
{this.renderFooter()}
|
|
153
177
|
</div>
|
|
154
178
|
</Animate>
|
|
@@ -179,6 +203,8 @@ Modal.defaultProps = {
|
|
|
179
203
|
closesWithEscape: false,
|
|
180
204
|
displayCloseButtonOutside: false,
|
|
181
205
|
noHeader: false,
|
|
206
|
+
loadingLayerMessage: '',
|
|
207
|
+
loadingLayer: false,
|
|
182
208
|
};
|
|
183
209
|
|
|
184
210
|
Modal.propTypes = {
|
|
@@ -201,6 +227,8 @@ Modal.propTypes = {
|
|
|
201
227
|
closesWithEscape: PropTypes.bool,
|
|
202
228
|
displayCloseButtonOutside: PropTypes.bool,
|
|
203
229
|
noHeader: PropTypes.bool,
|
|
230
|
+
loadingLayerMessage: PropTypes.string,
|
|
231
|
+
loadingLayer: PropTypes.bool,
|
|
204
232
|
};
|
|
205
233
|
|
|
206
234
|
export default withClickOutside(Modal, '.ignore-click-outside-modal');
|
|
@@ -44,7 +44,7 @@ const TemplateFull = () => {
|
|
|
44
44
|
return (
|
|
45
45
|
<div style={{ paddingLeft: '50px' }}>
|
|
46
46
|
<Button onClick={() => modalRef.current.open()} label="Open modal" />
|
|
47
|
-
<Modal ref={modalRef} isFull title="My modal">
|
|
47
|
+
<Modal ref={modalRef} isFull title="My modal" validateCb={() => null}>
|
|
48
48
|
content
|
|
49
49
|
</Modal>
|
|
50
50
|
</div>
|
|
@@ -111,3 +111,48 @@ const TemplateClickOutsideModal = () => {
|
|
|
111
111
|
};
|
|
112
112
|
export const ModalClickOutside = TemplateClickOutsideModal.bind({});
|
|
113
113
|
Default.args = {};
|
|
114
|
+
|
|
115
|
+
const TemplateLoadingLayerModal = () => {
|
|
116
|
+
const modalRef = React.createRef();
|
|
117
|
+
return (
|
|
118
|
+
<div style={{ paddingLeft: '50px' }}>
|
|
119
|
+
<Button onClick={() => modalRef.current.open()} label="Open loading layer modal" />
|
|
120
|
+
<Modal
|
|
121
|
+
ref={modalRef}
|
|
122
|
+
title="My loading layer modal"
|
|
123
|
+
loadingLayer
|
|
124
|
+
loadingLayerMessage="Loading message..."
|
|
125
|
+
validateCb={() => null}
|
|
126
|
+
isFull
|
|
127
|
+
>
|
|
128
|
+
<div>
|
|
129
|
+
content <div>CONTENTNKJDJHABSDKVASKDGVAKHSDGVAKSHDGVASKHGDVAKSHDGVAKSHGDVKASDVKASDjASHDk</div>
|
|
130
|
+
</div>
|
|
131
|
+
<div>CONRDAHSDAHDiabIKBD</div>
|
|
132
|
+
<div>
|
|
133
|
+
content <div>CONTENTNKJDJHABSDKVASKDGVAKHSDGVAKSHDGVASKHGDVAKSHDGVAKSHGDVKASDVKASDjASHDk</div>
|
|
134
|
+
</div>
|
|
135
|
+
<div>CONRDAHSDAHDiabIKBD</div>
|
|
136
|
+
<div>
|
|
137
|
+
content <div>CONTENTNKJDJHABSDKVASKDGVAKHSDGVAKSHDGVASKHGDVAKSHDGVAKSHGDVKASDVKASDjASHDk</div>
|
|
138
|
+
</div>
|
|
139
|
+
<div>CONRDAHSDAHDiabIKBD</div>
|
|
140
|
+
<div>
|
|
141
|
+
content <div>CONTENTNKJDJHABSDKVASKDGVAKHSDGVAKSHDGVASKHGDVAKSHDGVAKSHGDVKASDVKASDjASHDk</div>
|
|
142
|
+
</div>
|
|
143
|
+
<div>CONRDAHSDAHDiabIKBD</div>
|
|
144
|
+
<div>
|
|
145
|
+
content <div>CONTENTNKJDJHABSDKVASKDGVAKHSDGVAKSHDGVASKHGDVAKSHDGVAKSHGDVKASDVKASDjASHDk</div>
|
|
146
|
+
</div>
|
|
147
|
+
<div>CONRDAHSDAHDiabIKBD</div>
|
|
148
|
+
<div>
|
|
149
|
+
content <div>CONTENTNKJDJHABSDKVASKDGVAKHSDGVAKSHDGVASKHGDVAKSHDGVAKSHGDVKASDVKASDjASHDk</div>
|
|
150
|
+
</div>
|
|
151
|
+
<div>CONRDAHSDAHDiabIKBD</div>
|
|
152
|
+
<Button label="Second close button" onClick={() => modalRef.current.close()} />
|
|
153
|
+
</Modal>
|
|
154
|
+
</div>
|
|
155
|
+
);
|
|
156
|
+
};
|
|
157
|
+
export const ModalLoadingLayer = TemplateLoadingLayerModal.bind({});
|
|
158
|
+
Default.args = {};
|
|
@@ -33,10 +33,22 @@
|
|
|
33
33
|
max-width 100%
|
|
34
34
|
&__body
|
|
35
35
|
fullwh()
|
|
36
|
+
position relative
|
|
36
37
|
padding 0 2.4rem
|
|
37
38
|
overflow-y auto
|
|
38
39
|
.modal--full &
|
|
39
40
|
padding 0
|
|
41
|
+
&--blur>*
|
|
42
|
+
filter blur(1.8rem)
|
|
43
|
+
pointer-events none
|
|
44
|
+
&__loading-layer
|
|
45
|
+
fullwh()
|
|
46
|
+
position absolute
|
|
47
|
+
display flex
|
|
48
|
+
flex-direction column
|
|
49
|
+
align-items center
|
|
50
|
+
justify-content center
|
|
51
|
+
filter blur(0)
|
|
40
52
|
&__close
|
|
41
53
|
&--outside
|
|
42
54
|
position fixed
|