@salutejs/plasma-new-hope 0.88.0-canary.1225.9348142616.0 → 0.88.0-canary.1225.9412763701.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Sheet/Sheet.css +9 -5
- package/cjs/components/Sheet/Sheet.js +30 -9
- package/cjs/components/Sheet/Sheet.js.map +1 -1
- package/cjs/components/Sheet/Sheet.styles.js +81 -16
- package/cjs/components/Sheet/Sheet.styles.js.map +1 -1
- package/cjs/components/Sheet/{Sheet.styles_1bm46e7.css → Sheet.styles_kdjr5m.css} +5 -3
- package/cjs/components/Sheet/Sheet.tokens.js +2 -1
- package/cjs/components/Sheet/Sheet.tokens.js.map +1 -1
- package/cjs/components/Sheet/utils/handleTransition.js +2 -3
- package/cjs/components/Sheet/utils/handleTransition.js.map +1 -1
- package/cjs/components/Sheet/utils/index.js +8 -0
- package/cjs/components/Sheet/utils/index.js.map +1 -0
- package/cjs/index.css +7 -5
- package/es/components/Sheet/Sheet.css +9 -5
- package/es/components/Sheet/Sheet.js +32 -11
- package/es/components/Sheet/Sheet.js.map +1 -1
- package/es/components/Sheet/Sheet.styles.js +79 -16
- package/es/components/Sheet/Sheet.styles.js.map +1 -1
- package/es/components/Sheet/{Sheet.styles_1bm46e7.css → Sheet.styles_kdjr5m.css} +5 -3
- package/es/components/Sheet/Sheet.tokens.js +2 -1
- package/es/components/Sheet/Sheet.tokens.js.map +1 -1
- package/es/components/Sheet/utils/handleTransition.js +2 -3
- package/es/components/Sheet/utils/handleTransition.js.map +1 -1
- package/es/components/Sheet/utils/index.js +4 -0
- package/es/components/Sheet/utils/index.js.map +1 -0
- package/es/index.css +7 -5
- package/package.json +2 -2
- package/styled-components/cjs/components/Sheet/Sheet.js +30 -8
- package/styled-components/cjs/components/Sheet/Sheet.styles.js +36 -9
- package/styled-components/cjs/components/Sheet/Sheet.tokens.js +2 -1
- package/styled-components/cjs/components/Sheet/hooks/index.js +0 -7
- package/styled-components/cjs/components/Sheet/utils/handleTransition.js +2 -3
- package/styled-components/cjs/components/Sheet/utils/index.js +3 -1
- package/styled-components/cjs/components/Sheet/variations/_view/tokens.json +4 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +170 -12
- package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx +162 -11
- package/styled-components/es/components/Sheet/Sheet.js +33 -11
- package/styled-components/es/components/Sheet/Sheet.styles.js +35 -8
- package/styled-components/es/components/Sheet/Sheet.tokens.js +2 -1
- package/styled-components/es/components/Sheet/hooks/index.js +0 -1
- package/styled-components/es/components/Sheet/utils/handleTransition.js +2 -3
- package/styled-components/es/components/Sheet/utils/index.js +2 -1
- package/styled-components/es/components/Sheet/variations/_view/tokens.json +4 -1
- package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +170 -12
- package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx +162 -11
- package/types/components/Sheet/Sheet.d.ts +1 -0
- package/types/components/Sheet/Sheet.d.ts.map +1 -1
- package/types/components/Sheet/Sheet.styles.d.ts +12 -8
- package/types/components/Sheet/Sheet.styles.d.ts.map +1 -1
- package/types/components/Sheet/Sheet.tokens.d.ts +2 -1
- package/types/components/Sheet/Sheet.tokens.d.ts.map +1 -1
- package/types/components/Sheet/Sheet.types.d.ts +25 -7
- package/types/components/Sheet/Sheet.types.d.ts.map +1 -1
- package/types/components/Sheet/hooks/index.d.ts +0 -1
- package/types/components/Sheet/hooks/index.d.ts.map +1 -1
- package/types/components/Sheet/utils/handleTransition.d.ts.map +1 -1
- package/types/components/Sheet/utils/index.d.ts +1 -0
- package/types/components/Sheet/utils/index.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Sheet/Sheet.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Sheet/Sheet.config.d.ts.map +1 -1
- package/cjs/components/Sheet/hooks/useThemeContext.js +0 -17
- package/cjs/components/Sheet/hooks/useThemeContext.js.map +0 -1
- package/es/components/Sheet/hooks/useThemeContext.js +0 -13
- package/es/components/Sheet/hooks/useThemeContext.js.map +0 -1
- package/styled-components/cjs/components/Sheet/hooks/useThemeContext.js +0 -15
- package/styled-components/es/components/Sheet/hooks/useThemeContext.js +0 -9
- package/types/components/Sheet/hooks/useThemeContext.d.ts +0 -7
- package/types/components/Sheet/hooks/useThemeContext.d.ts.map +0 -1
@@ -11,14 +11,33 @@ import { Sheet } from './Sheet';
|
|
11
11
|
const meta: Meta<typeof Sheet> = {
|
12
12
|
title: 'plasma_b2c/Sheet',
|
13
13
|
decorators: [WithTheme],
|
14
|
-
|
14
|
+
args: {
|
15
|
+
withBlur: false,
|
16
|
+
withOverlay: true,
|
17
|
+
withTransition: true,
|
18
|
+
hasHandle: true,
|
19
|
+
isHeaderFixed: false,
|
20
|
+
isFooterFixed: false,
|
21
|
+
},
|
15
22
|
};
|
16
23
|
|
17
24
|
export default meta;
|
18
25
|
|
19
|
-
type StorySheetProps = ComponentProps<typeof Sheet
|
26
|
+
type StorySheetProps = ComponentProps<typeof Sheet> & {
|
27
|
+
hasHeader: boolean;
|
28
|
+
hasFooter: boolean;
|
29
|
+
};
|
20
30
|
|
21
|
-
const StoryDefault = ({
|
31
|
+
const StoryDefault = ({
|
32
|
+
withOverlay,
|
33
|
+
withTransition,
|
34
|
+
hasFooter,
|
35
|
+
isFooterFixed,
|
36
|
+
hasHeader,
|
37
|
+
isHeaderFixed,
|
38
|
+
hasHandle,
|
39
|
+
withBlur,
|
40
|
+
}: StorySheetProps) => {
|
22
41
|
const [isOpen, setIsOpen] = useState(false);
|
23
42
|
|
24
43
|
return (
|
@@ -29,6 +48,33 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
|
|
29
48
|
withOverlay={withOverlay}
|
30
49
|
withTransition={withTransition}
|
31
50
|
onClose={() => setIsOpen(false)}
|
51
|
+
hasHandle={hasHandle}
|
52
|
+
withBlur={withBlur}
|
53
|
+
contentHeader={
|
54
|
+
hasHeader ? (
|
55
|
+
<div>
|
56
|
+
<h3>
|
57
|
+
Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
|
58
|
+
porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
|
59
|
+
nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
|
60
|
+
</h3>
|
61
|
+
</div>
|
62
|
+
) : undefined
|
63
|
+
}
|
64
|
+
isHeaderFixed={isHeaderFixed}
|
65
|
+
contentFooter={
|
66
|
+
hasFooter ? (
|
67
|
+
<div>
|
68
|
+
<p>
|
69
|
+
Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
|
70
|
+
laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
|
71
|
+
dicta rem quae vel illum ea fugit molestiae dolorem?
|
72
|
+
</p>
|
73
|
+
<Button>Кнопка в футере</Button>
|
74
|
+
</div>
|
75
|
+
) : undefined
|
76
|
+
}
|
77
|
+
isFooterFixed={isFooterFixed}
|
32
78
|
>
|
33
79
|
<p>Вложенные кнопки</p>
|
34
80
|
<div
|
@@ -63,8 +109,8 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
|
|
63
109
|
|
64
110
|
export const Default: StoryObj<StorySheetProps> = {
|
65
111
|
args: {
|
66
|
-
|
67
|
-
|
112
|
+
hasHeader: true,
|
113
|
+
hasFooter: true,
|
68
114
|
},
|
69
115
|
render: (args) => <StoryDefault {...args} />,
|
70
116
|
};
|
@@ -92,7 +138,16 @@ export const WithoutOverlay: StoryObj = {
|
|
92
138
|
render: () => <StoryWithoutOverlay />,
|
93
139
|
};
|
94
140
|
|
95
|
-
const StoryWithScroll = ({
|
141
|
+
const StoryWithScroll = ({
|
142
|
+
withOverlay,
|
143
|
+
withTransition,
|
144
|
+
hasFooter,
|
145
|
+
isFooterFixed,
|
146
|
+
hasHeader,
|
147
|
+
isHeaderFixed,
|
148
|
+
hasHandle,
|
149
|
+
withBlur,
|
150
|
+
}: StorySheetProps) => {
|
96
151
|
const [isOpen, setIsOpen] = useState(false);
|
97
152
|
|
98
153
|
return (
|
@@ -103,6 +158,33 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
|
|
103
158
|
withOverlay={withOverlay}
|
104
159
|
withTransition={withTransition}
|
105
160
|
onClose={() => setIsOpen(false)}
|
161
|
+
hasHandle={hasHandle}
|
162
|
+
withBlur={withBlur}
|
163
|
+
contentHeader={
|
164
|
+
hasHeader ? (
|
165
|
+
<div>
|
166
|
+
<h3>
|
167
|
+
Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
|
168
|
+
porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
|
169
|
+
nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
|
170
|
+
</h3>
|
171
|
+
</div>
|
172
|
+
) : undefined
|
173
|
+
}
|
174
|
+
isHeaderFixed={isHeaderFixed}
|
175
|
+
contentFooter={
|
176
|
+
hasFooter ? (
|
177
|
+
<div>
|
178
|
+
<p>
|
179
|
+
Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
|
180
|
+
laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
|
181
|
+
dicta rem quae vel illum ea fugit molestiae dolorem?
|
182
|
+
</p>
|
183
|
+
<Button>Кнопка в футере</Button>
|
184
|
+
</div>
|
185
|
+
) : undefined
|
186
|
+
}
|
187
|
+
isFooterFixed={isFooterFixed}
|
106
188
|
>
|
107
189
|
<Body1>
|
108
190
|
<Button onClick={() => setIsOpen(false)}>Закрыть</Button>
|
@@ -128,10 +210,23 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
|
|
128
210
|
};
|
129
211
|
|
130
212
|
export const WithScroll: StoryObj<StorySheetProps> = {
|
213
|
+
args: {
|
214
|
+
hasHeader: true,
|
215
|
+
hasFooter: true,
|
216
|
+
},
|
131
217
|
render: (args) => <StoryWithScroll {...args} />,
|
132
218
|
};
|
133
219
|
|
134
|
-
const StoryWithInsideScroll = ({
|
220
|
+
const StoryWithInsideScroll = ({
|
221
|
+
withOverlay,
|
222
|
+
withTransition,
|
223
|
+
hasFooter,
|
224
|
+
isFooterFixed,
|
225
|
+
hasHeader,
|
226
|
+
isHeaderFixed,
|
227
|
+
hasHandle,
|
228
|
+
withBlur,
|
229
|
+
}: StorySheetProps) => {
|
135
230
|
const [isOpen, setIsOpen] = useState(false);
|
136
231
|
|
137
232
|
return (
|
@@ -142,6 +237,33 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
|
|
142
237
|
withOverlay={withOverlay}
|
143
238
|
withTransition={withTransition}
|
144
239
|
onClose={() => setIsOpen(false)}
|
240
|
+
hasHandle={hasHandle}
|
241
|
+
withBlur={withBlur}
|
242
|
+
contentHeader={
|
243
|
+
hasHeader ? (
|
244
|
+
<div>
|
245
|
+
<h3>
|
246
|
+
Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
|
247
|
+
porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
|
248
|
+
nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
|
249
|
+
</h3>
|
250
|
+
</div>
|
251
|
+
) : undefined
|
252
|
+
}
|
253
|
+
isHeaderFixed={isHeaderFixed}
|
254
|
+
contentFooter={
|
255
|
+
hasFooter ? (
|
256
|
+
<div>
|
257
|
+
<p>
|
258
|
+
Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
|
259
|
+
laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
|
260
|
+
dicta rem quae vel illum ea fugit molestiae dolorem?
|
261
|
+
</p>
|
262
|
+
<Button>Кнопка в футере</Button>
|
263
|
+
</div>
|
264
|
+
) : undefined
|
265
|
+
}
|
266
|
+
isFooterFixed={isFooterFixed}
|
145
267
|
>
|
146
268
|
<p>Вложенные кнопки</p>
|
147
269
|
<div
|
@@ -170,13 +292,22 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
|
|
170
292
|
|
171
293
|
export const WithInsideScroll: StoryObj<StorySheetProps> = {
|
172
294
|
args: {
|
173
|
-
|
174
|
-
|
295
|
+
hasHeader: true,
|
296
|
+
hasFooter: true,
|
175
297
|
},
|
176
298
|
render: (args) => <StoryWithInsideScroll {...args} />,
|
177
299
|
};
|
178
300
|
|
179
|
-
const StoryWithDoubleScroll = ({
|
301
|
+
const StoryWithDoubleScroll = ({
|
302
|
+
withOverlay,
|
303
|
+
withTransition,
|
304
|
+
hasFooter,
|
305
|
+
isFooterFixed,
|
306
|
+
hasHeader,
|
307
|
+
isHeaderFixed,
|
308
|
+
hasHandle,
|
309
|
+
withBlur,
|
310
|
+
}: StorySheetProps) => {
|
180
311
|
const [isOpen, setIsOpen] = useState(false);
|
181
312
|
|
182
313
|
return (
|
@@ -187,6 +318,33 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
|
|
187
318
|
withOverlay={withOverlay}
|
188
319
|
withTransition={withTransition}
|
189
320
|
onClose={() => setIsOpen(false)}
|
321
|
+
hasHandle={hasHandle}
|
322
|
+
withBlur={withBlur}
|
323
|
+
contentHeader={
|
324
|
+
hasHeader ? (
|
325
|
+
<div>
|
326
|
+
<h3>
|
327
|
+
Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
|
328
|
+
porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
|
329
|
+
nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
|
330
|
+
</h3>
|
331
|
+
</div>
|
332
|
+
) : undefined
|
333
|
+
}
|
334
|
+
isHeaderFixed={isHeaderFixed}
|
335
|
+
contentFooter={
|
336
|
+
hasFooter ? (
|
337
|
+
<div>
|
338
|
+
<p>
|
339
|
+
Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
|
340
|
+
laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
|
341
|
+
dicta rem quae vel illum ea fugit molestiae dolorem?
|
342
|
+
</p>
|
343
|
+
<Button>Кнопка в футере</Button>
|
344
|
+
</div>
|
345
|
+
) : undefined
|
346
|
+
}
|
347
|
+
isFooterFixed={isFooterFixed}
|
190
348
|
>
|
191
349
|
<Body1>
|
192
350
|
<Button onClick={() => setIsOpen(false)}>Закрыть</Button>
|
@@ -232,8 +390,8 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
|
|
232
390
|
|
233
391
|
export const WithDoubleScroll: StoryObj<StorySheetProps> = {
|
234
392
|
args: {
|
235
|
-
|
236
|
-
|
393
|
+
hasHeader: true,
|
394
|
+
hasFooter: true,
|
237
395
|
},
|
238
396
|
render: (args) => <StoryWithDoubleScroll {...args} />,
|
239
397
|
};
|
@@ -12,7 +12,7 @@ var config = exports.config = {
|
|
12
12
|
},
|
13
13
|
variations: {
|
14
14
|
view: {
|
15
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--
|
15
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--overlay-soft);", ":var(--overlay-blur);", ":var(--surface-solid-card);", ":var(--surface-solid-tertiary);"], _Sheet.sheetTokens.sheetOverlayColor, _Sheet.sheetTokens.sheetOverlayWithBlurColor, _Sheet.sheetTokens.contentBackgroundColor, _Sheet.sheetTokens.handleColor)
|
16
16
|
}
|
17
17
|
}
|
18
18
|
};
|
@@ -16,9 +16,21 @@ const meta: Meta<typeof Sheet> = {
|
|
16
16
|
|
17
17
|
export default meta;
|
18
18
|
|
19
|
-
type StorySheetProps = ComponentProps<typeof Sheet
|
19
|
+
type StorySheetProps = ComponentProps<typeof Sheet> & {
|
20
|
+
hasHeader: boolean;
|
21
|
+
hasFooter: boolean;
|
22
|
+
};
|
20
23
|
|
21
|
-
const StoryDefault = ({
|
24
|
+
const StoryDefault = ({
|
25
|
+
withOverlay,
|
26
|
+
withTransition,
|
27
|
+
hasFooter,
|
28
|
+
isFooterFixed,
|
29
|
+
hasHeader,
|
30
|
+
isHeaderFixed,
|
31
|
+
hasHandle,
|
32
|
+
withBlur,
|
33
|
+
}: StorySheetProps) => {
|
22
34
|
const [isOpen, setIsOpen] = useState(false);
|
23
35
|
|
24
36
|
return (
|
@@ -29,6 +41,33 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
|
|
29
41
|
withOverlay={withOverlay}
|
30
42
|
withTransition={withTransition}
|
31
43
|
onClose={() => setIsOpen(false)}
|
44
|
+
hasHandle={hasHandle}
|
45
|
+
withBlur={withBlur}
|
46
|
+
contentHeader={
|
47
|
+
hasHeader ? (
|
48
|
+
<div>
|
49
|
+
<h3>
|
50
|
+
Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
|
51
|
+
porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
|
52
|
+
nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
|
53
|
+
</h3>
|
54
|
+
</div>
|
55
|
+
) : undefined
|
56
|
+
}
|
57
|
+
isHeaderFixed={isHeaderFixed}
|
58
|
+
contentFooter={
|
59
|
+
hasFooter ? (
|
60
|
+
<div>
|
61
|
+
<p>
|
62
|
+
Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
|
63
|
+
laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
|
64
|
+
dicta rem quae vel illum ea fugit molestiae dolorem?
|
65
|
+
</p>
|
66
|
+
<Button>Кнопка в футере</Button>
|
67
|
+
</div>
|
68
|
+
) : undefined
|
69
|
+
}
|
70
|
+
isFooterFixed={isFooterFixed}
|
32
71
|
>
|
33
72
|
<p>Вложенные кнопки</p>
|
34
73
|
<div
|
@@ -63,8 +102,8 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
|
|
63
102
|
|
64
103
|
export const Default: StoryObj<StorySheetProps> = {
|
65
104
|
args: {
|
66
|
-
|
67
|
-
|
105
|
+
hasHeader: true,
|
106
|
+
hasFooter: true,
|
68
107
|
},
|
69
108
|
render: (args) => <StoryDefault {...args} />,
|
70
109
|
};
|
@@ -92,7 +131,16 @@ export const WithoutOverlay: StoryObj = {
|
|
92
131
|
render: () => <StoryWithoutOverlay />,
|
93
132
|
};
|
94
133
|
|
95
|
-
const StoryWithScroll = ({
|
134
|
+
const StoryWithScroll = ({
|
135
|
+
withOverlay,
|
136
|
+
withTransition,
|
137
|
+
hasFooter,
|
138
|
+
isFooterFixed,
|
139
|
+
hasHeader,
|
140
|
+
isHeaderFixed,
|
141
|
+
hasHandle,
|
142
|
+
withBlur,
|
143
|
+
}: StorySheetProps) => {
|
96
144
|
const [isOpen, setIsOpen] = useState(false);
|
97
145
|
|
98
146
|
return (
|
@@ -103,6 +151,33 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
|
|
103
151
|
withOverlay={withOverlay}
|
104
152
|
withTransition={withTransition}
|
105
153
|
onClose={() => setIsOpen(false)}
|
154
|
+
hasHandle={hasHandle}
|
155
|
+
withBlur={withBlur}
|
156
|
+
contentHeader={
|
157
|
+
hasHeader ? (
|
158
|
+
<div>
|
159
|
+
<h3>
|
160
|
+
Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
|
161
|
+
porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
|
162
|
+
nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
|
163
|
+
</h3>
|
164
|
+
</div>
|
165
|
+
) : undefined
|
166
|
+
}
|
167
|
+
isHeaderFixed={isHeaderFixed}
|
168
|
+
contentFooter={
|
169
|
+
hasFooter ? (
|
170
|
+
<div>
|
171
|
+
<p>
|
172
|
+
Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
|
173
|
+
laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
|
174
|
+
dicta rem quae vel illum ea fugit molestiae dolorem?
|
175
|
+
</p>
|
176
|
+
<Button>Кнопка в футере</Button>
|
177
|
+
</div>
|
178
|
+
) : undefined
|
179
|
+
}
|
180
|
+
isFooterFixed={isFooterFixed}
|
106
181
|
>
|
107
182
|
<Body1>
|
108
183
|
<Button onClick={() => setIsOpen(false)}>Закрыть</Button>
|
@@ -128,10 +203,23 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
|
|
128
203
|
};
|
129
204
|
|
130
205
|
export const WithScroll: StoryObj<StorySheetProps> = {
|
206
|
+
args: {
|
207
|
+
hasHeader: true,
|
208
|
+
hasFooter: true,
|
209
|
+
},
|
131
210
|
render: (args) => <StoryWithScroll {...args} />,
|
132
211
|
};
|
133
212
|
|
134
|
-
const StoryWithInsideScroll = ({
|
213
|
+
const StoryWithInsideScroll = ({
|
214
|
+
withOverlay,
|
215
|
+
withTransition,
|
216
|
+
hasFooter,
|
217
|
+
isFooterFixed,
|
218
|
+
hasHeader,
|
219
|
+
isHeaderFixed,
|
220
|
+
hasHandle,
|
221
|
+
withBlur,
|
222
|
+
}: StorySheetProps) => {
|
135
223
|
const [isOpen, setIsOpen] = useState(false);
|
136
224
|
|
137
225
|
return (
|
@@ -142,6 +230,33 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
|
|
142
230
|
withOverlay={withOverlay}
|
143
231
|
withTransition={withTransition}
|
144
232
|
onClose={() => setIsOpen(false)}
|
233
|
+
hasHandle={hasHandle}
|
234
|
+
withBlur={withBlur}
|
235
|
+
contentHeader={
|
236
|
+
hasHeader ? (
|
237
|
+
<div>
|
238
|
+
<h3>
|
239
|
+
Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
|
240
|
+
porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
|
241
|
+
nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
|
242
|
+
</h3>
|
243
|
+
</div>
|
244
|
+
) : undefined
|
245
|
+
}
|
246
|
+
isHeaderFixed={isHeaderFixed}
|
247
|
+
contentFooter={
|
248
|
+
hasFooter ? (
|
249
|
+
<div>
|
250
|
+
<p>
|
251
|
+
Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
|
252
|
+
laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
|
253
|
+
dicta rem quae vel illum ea fugit molestiae dolorem?
|
254
|
+
</p>
|
255
|
+
<Button>Кнопка в футере</Button>
|
256
|
+
</div>
|
257
|
+
) : undefined
|
258
|
+
}
|
259
|
+
isFooterFixed={isFooterFixed}
|
145
260
|
>
|
146
261
|
<p>Вложенные кнопки</p>
|
147
262
|
<div
|
@@ -170,13 +285,22 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
|
|
170
285
|
|
171
286
|
export const WithInsideScroll: StoryObj<StorySheetProps> = {
|
172
287
|
args: {
|
173
|
-
|
174
|
-
|
288
|
+
hasHeader: true,
|
289
|
+
hasFooter: true,
|
175
290
|
},
|
176
291
|
render: (args) => <StoryWithInsideScroll {...args} />,
|
177
292
|
};
|
178
293
|
|
179
|
-
const StoryWithDoubleScroll = ({
|
294
|
+
const StoryWithDoubleScroll = ({
|
295
|
+
withOverlay,
|
296
|
+
withTransition,
|
297
|
+
hasFooter,
|
298
|
+
isFooterFixed,
|
299
|
+
hasHeader,
|
300
|
+
isHeaderFixed,
|
301
|
+
hasHandle,
|
302
|
+
withBlur,
|
303
|
+
}: StorySheetProps) => {
|
180
304
|
const [isOpen, setIsOpen] = useState(false);
|
181
305
|
|
182
306
|
return (
|
@@ -187,6 +311,33 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
|
|
187
311
|
withOverlay={withOverlay}
|
188
312
|
withTransition={withTransition}
|
189
313
|
onClose={() => setIsOpen(false)}
|
314
|
+
hasHandle={hasHandle}
|
315
|
+
withBlur={withBlur}
|
316
|
+
contentHeader={
|
317
|
+
hasHeader ? (
|
318
|
+
<div>
|
319
|
+
<h3>
|
320
|
+
Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
|
321
|
+
porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
|
322
|
+
nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
|
323
|
+
</h3>
|
324
|
+
</div>
|
325
|
+
) : undefined
|
326
|
+
}
|
327
|
+
isHeaderFixed={isHeaderFixed}
|
328
|
+
contentFooter={
|
329
|
+
hasFooter ? (
|
330
|
+
<div>
|
331
|
+
<p>
|
332
|
+
Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
|
333
|
+
laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
|
334
|
+
dicta rem quae vel illum ea fugit molestiae dolorem?
|
335
|
+
</p>
|
336
|
+
<Button>Кнопка в футере</Button>
|
337
|
+
</div>
|
338
|
+
) : undefined
|
339
|
+
}
|
340
|
+
isFooterFixed={isFooterFixed}
|
190
341
|
>
|
191
342
|
<Body1>
|
192
343
|
<Button onClick={() => setIsOpen(false)}>Закрыть</Button>
|
@@ -232,8 +383,8 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
|
|
232
383
|
|
233
384
|
export const WithDoubleScroll: StoryObj<StorySheetProps> = {
|
234
385
|
args: {
|
235
|
-
|
236
|
-
|
386
|
+
hasHeader: true,
|
387
|
+
hasFooter: true,
|
237
388
|
},
|
238
389
|
render: (args) => <StoryWithDoubleScroll {...args} />,
|
239
390
|
};
|
@@ -1,15 +1,18 @@
|
|
1
|
-
var _excluded = ["isOpen", "children", "onClose", "withOverlay", "withTransition", "throttleMs", "className", "view"];
|
1
|
+
var _excluded = ["isOpen", "children", "onClose", "hasHandle", "contentHeader", "isHeaderFixed", "contentFooter", "isFooterFixed", "withOverlay", "withBlur", "withTransition", "throttleMs", "className", "view"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
5
5
|
import React, { forwardRef } from 'react';
|
6
6
|
import { cx } from '../../utils';
|
7
|
-
import {
|
8
|
-
import {
|
9
|
-
import {
|
7
|
+
import { Overlay } from '../Overlay';
|
8
|
+
import { useSheet, useSheetSwipe } from './hooks';
|
9
|
+
import { classes, tokens } from './Sheet.tokens';
|
10
|
+
import { StyledContentWrapper, StyledSheetBody, StyledSheetContent, StyledSheetFooter, StyledSheetHandle, StyledSheetHeader, StyledWrapper } from './Sheet.styles';
|
10
11
|
import { base as viewCSS } from './variations/_view/base';
|
12
|
+
import { DEFAULT_Z_INDEX } from './utils';
|
11
13
|
|
12
14
|
/**
|
15
|
+
* Sheet
|
13
16
|
* Открывает окно-шторку поверх основного экрана.
|
14
17
|
*/
|
15
18
|
|
@@ -18,8 +21,18 @@ export var sheetRoot = function sheetRoot(Root) {
|
|
18
21
|
var isOpen = _ref.isOpen,
|
19
22
|
children = _ref.children,
|
20
23
|
onClose = _ref.onClose,
|
24
|
+
_ref$hasHandle = _ref.hasHandle,
|
25
|
+
hasHandle = _ref$hasHandle === void 0 ? true : _ref$hasHandle,
|
26
|
+
contentHeader = _ref.contentHeader,
|
27
|
+
_ref$isHeaderFixed = _ref.isHeaderFixed,
|
28
|
+
isHeaderFixed = _ref$isHeaderFixed === void 0 ? false : _ref$isHeaderFixed,
|
29
|
+
contentFooter = _ref.contentFooter,
|
30
|
+
_ref$isFooterFixed = _ref.isFooterFixed,
|
31
|
+
isFooterFixed = _ref$isFooterFixed === void 0 ? false : _ref$isFooterFixed,
|
21
32
|
_ref$withOverlay = _ref.withOverlay,
|
22
33
|
withOverlay = _ref$withOverlay === void 0 ? true : _ref$withOverlay,
|
34
|
+
_ref$withBlur = _ref.withBlur,
|
35
|
+
withBlur = _ref$withBlur === void 0 ? false : _ref$withBlur,
|
23
36
|
_ref$withTransition = _ref.withTransition,
|
24
37
|
withTransition = _ref$withTransition === void 0 ? true : _ref$withTransition,
|
25
38
|
throttleMs = _ref.throttleMs,
|
@@ -29,7 +42,6 @@ export var sheetRoot = function sheetRoot(Root) {
|
|
29
42
|
var contentWrapperRef = React.useRef(null);
|
30
43
|
var contentRef = React.useRef(null);
|
31
44
|
var handleRef = React.useRef(null);
|
32
|
-
var theme = useThemeContext();
|
33
45
|
useSheet({
|
34
46
|
isOpen: isOpen
|
35
47
|
});
|
@@ -40,9 +52,11 @@ export var sheetRoot = function sheetRoot(Root) {
|
|
40
52
|
throttleMs: throttleMs,
|
41
53
|
onClose: onClose
|
42
54
|
});
|
55
|
+
var hasHeader = !!contentHeader;
|
56
|
+
var hasFooter = !!contentFooter;
|
43
57
|
var isClosedClass = isOpen ? undefined : "".concat(classes.isClosed);
|
58
|
+
var overlayBackgroundToken = withBlur ? "var(".concat(tokens.sheetOverlayWithBlurColor, ")") : "var(".concat(tokens.sheetOverlayColor, ")");
|
44
59
|
return /*#__PURE__*/React.createElement(StyledWrapper, _extends({
|
45
|
-
theme: theme,
|
46
60
|
isOpen: isOpen,
|
47
61
|
withTransition: withTransition,
|
48
62
|
className: cx(isClosedClass, className)
|
@@ -52,17 +66,25 @@ export var sheetRoot = function sheetRoot(Root) {
|
|
52
66
|
view: view,
|
53
67
|
ref: rootRef
|
54
68
|
}, /*#__PURE__*/React.createElement(StyledContentWrapper, {
|
55
|
-
theme: theme,
|
56
69
|
isOpen: isOpen,
|
57
70
|
withTransition: withTransition,
|
58
71
|
ref: contentWrapperRef
|
59
|
-
}, /*#__PURE__*/React.createElement(StyledSheetHandle, {
|
72
|
+
}, hasHandle && /*#__PURE__*/React.createElement(StyledSheetHandle, {
|
60
73
|
ref: handleRef
|
61
74
|
}), /*#__PURE__*/React.createElement(StyledSheetContent, {
|
75
|
+
hasHeader: hasHeader,
|
76
|
+
hasFooter: hasFooter,
|
62
77
|
ref: contentRef
|
63
|
-
},
|
64
|
-
|
65
|
-
|
78
|
+
}, hasHeader && /*#__PURE__*/React.createElement(StyledSheetHeader, {
|
79
|
+
isHeaderFixed: isHeaderFixed
|
80
|
+
}, contentHeader), /*#__PURE__*/React.createElement(StyledSheetBody, null, children), hasFooter && /*#__PURE__*/React.createElement(StyledSheetFooter, {
|
81
|
+
isFooterFixed: isFooterFixed
|
82
|
+
}, contentFooter))), withOverlay && /*#__PURE__*/React.createElement(Overlay, {
|
83
|
+
zIndex: DEFAULT_Z_INDEX,
|
84
|
+
backgroundColorProperty: overlayBackgroundToken,
|
85
|
+
withBlur: withBlur,
|
86
|
+
isClickable: true,
|
87
|
+
onOverlayClick: onClose
|
66
88
|
})));
|
67
89
|
});
|
68
90
|
};
|
@@ -7,15 +7,42 @@ export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
7
7
|
export var StyledContentWrapper = /*#__PURE__*/styled.div.withConfig({
|
8
8
|
componentId: "plasma-new-hope__sc-1pj79gq-1"
|
9
9
|
})(["position:absolute;left:0;bottom:0;width:100%;max-height:100%;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;transition:", ";&.", "{transform:translateY(100%);}"], /*#__PURE__*/handleTransition('transform 0.5s'), /*#__PURE__*/String(classes.isClosed));
|
10
|
-
export var
|
10
|
+
export var StyledSheetHandle = /*#__PURE__*/styled.div.withConfig({
|
11
11
|
componentId: "plasma-new-hope__sc-1pj79gq-2"
|
12
|
-
})(["
|
13
|
-
var withOverlay = _ref.withOverlay;
|
14
|
-
return withOverlay ? "var(".concat(tokens.overlayBackgroundColor, ")") : 'transparent';
|
15
|
-
});
|
12
|
+
})(["width:4rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;align-self:center;&::before{content:'';display:block;border-radius:0.625rem;background-color:var(", ");height:0.25rem;}"], tokens.handleColor);
|
16
13
|
export var StyledSheetContent = /*#__PURE__*/styled.div.withConfig({
|
17
14
|
componentId: "plasma-new-hope__sc-1pj79gq-3"
|
18
|
-
})(["border-radius:1.5rem 1.5rem 0 0;background-color:var(", ");padding:1rem;max-height:100%;overflow:auto;overscroll-behavior:contain;&::-webkit-scrollbar{display:none;}"], tokens.contentBackgroundColor)
|
19
|
-
|
15
|
+
})(["border-radius:1.5rem 1.5rem 0 0;background-color:var(", ");padding-left:1rem;padding-right:1rem;padding-top:", ";padding-bottom:", ";max-height:100%;overflow:auto;overscroll-behavior:contain;&::-webkit-scrollbar{display:none;}"], tokens.contentBackgroundColor, function (_ref) {
|
16
|
+
var hasHeader = _ref.hasHeader;
|
17
|
+
return hasHeader ? 'unset' : '1rem';
|
18
|
+
}, function (_ref2) {
|
19
|
+
var hasFooter = _ref2.hasFooter;
|
20
|
+
return hasFooter ? 'unset' : '1rem';
|
21
|
+
});
|
22
|
+
export var StyledSheetHeader = /*#__PURE__*/styled.div.withConfig({
|
20
23
|
componentId: "plasma-new-hope__sc-1pj79gq-4"
|
21
|
-
})(["width:
|
24
|
+
})(["width:100%;z-index:1;padding-top:1rem;position:", ";top:", ";background-color:", ";"], function (_ref3) {
|
25
|
+
var isHeaderFixed = _ref3.isHeaderFixed;
|
26
|
+
return isHeaderFixed ? 'sticky' : 'static';
|
27
|
+
}, function (_ref4) {
|
28
|
+
var isHeaderFixed = _ref4.isHeaderFixed;
|
29
|
+
return isHeaderFixed ? '0' : 'unset';
|
30
|
+
}, function (_ref5) {
|
31
|
+
var isHeaderFixed = _ref5.isHeaderFixed;
|
32
|
+
return isHeaderFixed ? "var(".concat(tokens.contentBackgroundColor, ")") : 'transparent';
|
33
|
+
});
|
34
|
+
export var StyledSheetBody = /*#__PURE__*/styled.div.withConfig({
|
35
|
+
componentId: "plasma-new-hope__sc-1pj79gq-5"
|
36
|
+
})([""]);
|
37
|
+
export var StyledSheetFooter = /*#__PURE__*/styled.div.withConfig({
|
38
|
+
componentId: "plasma-new-hope__sc-1pj79gq-6"
|
39
|
+
})(["width:100%;z-index:1;padding-bottom:1rem;position:", ";bottom:", ";background-color:", ";"], function (_ref6) {
|
40
|
+
var isFooterFixed = _ref6.isFooterFixed;
|
41
|
+
return isFooterFixed ? 'sticky' : 'static';
|
42
|
+
}, function (_ref7) {
|
43
|
+
var isFooterFixed = _ref7.isFooterFixed;
|
44
|
+
return isFooterFixed ? '0' : 'unset';
|
45
|
+
}, function (_ref8) {
|
46
|
+
var isFooterFixed = _ref8.isFooterFixed;
|
47
|
+
return isFooterFixed ? "var(".concat(tokens.contentBackgroundColor, ")") : 'transparent';
|
48
|
+
});
|
@@ -2,7 +2,8 @@ export var classes = {
|
|
2
2
|
isClosed: 'is-closed'
|
3
3
|
};
|
4
4
|
export var tokens = {
|
5
|
-
|
5
|
+
sheetOverlayColor: '--plasma-sheet-overlay-color',
|
6
|
+
sheetOverlayWithBlurColor: '--plasma-sheet-overlay-with-blur-color',
|
6
7
|
contentBackgroundColor: '--plasma-sheet-content-background-color',
|
7
8
|
handleColor: '--plasma-sheet-handle-background-color'
|
8
9
|
};
|