@salutejs/plasma-new-hope 0.88.1-dev.0 → 0.89.0-canary.1225.9545827287.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (117) hide show
  1. package/cjs/components/Sheet/Sheet.css +8 -0
  2. package/cjs/components/Sheet/Sheet.js +108 -0
  3. package/cjs/components/Sheet/Sheet.js.map +1 -0
  4. package/cjs/components/Sheet/Sheet.styles.js +115 -0
  5. package/cjs/components/Sheet/Sheet.styles.js.map +1 -0
  6. package/cjs/components/Sheet/Sheet.styles_o73i75.css +6 -0
  7. package/cjs/components/Sheet/Sheet.tokens.js +17 -0
  8. package/cjs/components/Sheet/Sheet.tokens.js.map +1 -0
  9. package/cjs/components/Sheet/hooks/useOverflow.js +23 -0
  10. package/cjs/components/Sheet/hooks/useOverflow.js.map +1 -0
  11. package/cjs/components/Sheet/hooks/useSheetSwipe.js +98 -0
  12. package/cjs/components/Sheet/hooks/useSheetSwipe.js.map +1 -0
  13. package/cjs/components/Sheet/utils/handleTransition.js +13 -0
  14. package/cjs/components/Sheet/utils/handleTransition.js.map +1 -0
  15. package/cjs/components/Sheet/utils/index.js +8 -0
  16. package/cjs/components/Sheet/utils/index.js.map +1 -0
  17. package/cjs/components/Sheet/variations/_view/base.js +9 -0
  18. package/cjs/components/Sheet/variations/_view/base.js.map +1 -0
  19. package/cjs/components/Sheet/variations/_view/base_x642ct.css +1 -0
  20. package/cjs/index.css +7 -0
  21. package/cjs/index.js +6 -0
  22. package/cjs/index.js.map +1 -1
  23. package/es/components/Sheet/Sheet.css +8 -0
  24. package/es/components/Sheet/Sheet.js +103 -0
  25. package/es/components/Sheet/Sheet.js.map +1 -0
  26. package/es/components/Sheet/Sheet.styles.js +106 -0
  27. package/es/components/Sheet/Sheet.styles.js.map +1 -0
  28. package/es/components/Sheet/Sheet.styles_o73i75.css +6 -0
  29. package/es/components/Sheet/Sheet.tokens.js +12 -0
  30. package/es/components/Sheet/Sheet.tokens.js.map +1 -0
  31. package/es/components/Sheet/hooks/useOverflow.js +19 -0
  32. package/es/components/Sheet/hooks/useOverflow.js.map +1 -0
  33. package/es/components/Sheet/hooks/useSheetSwipe.js +94 -0
  34. package/es/components/Sheet/hooks/useSheetSwipe.js.map +1 -0
  35. package/es/components/Sheet/utils/handleTransition.js +9 -0
  36. package/es/components/Sheet/utils/handleTransition.js.map +1 -0
  37. package/es/components/Sheet/utils/index.js +4 -0
  38. package/es/components/Sheet/utils/index.js.map +1 -0
  39. package/es/components/Sheet/variations/_view/base.js +5 -0
  40. package/es/components/Sheet/variations/_view/base.js.map +1 -0
  41. package/es/components/Sheet/variations/_view/base_x642ct.css +1 -0
  42. package/es/index.css +7 -0
  43. package/es/index.js +2 -0
  44. package/es/index.js.map +1 -1
  45. package/package.json +4 -2
  46. package/styled-components/cjs/components/Sheet/Sheet.js +108 -0
  47. package/styled-components/cjs/components/Sheet/Sheet.styles.js +52 -0
  48. package/styled-components/cjs/components/Sheet/Sheet.template-doc.mdx +143 -0
  49. package/styled-components/cjs/components/Sheet/Sheet.tokens.js +15 -0
  50. package/styled-components/cjs/components/Sheet/Sheet.types.js +5 -0
  51. package/styled-components/cjs/components/Sheet/hooks/index.js +19 -0
  52. package/styled-components/cjs/components/Sheet/hooks/useOverflow.js +21 -0
  53. package/styled-components/cjs/components/Sheet/hooks/useSheetSwipe.js +102 -0
  54. package/styled-components/cjs/components/Sheet/index.js +31 -0
  55. package/styled-components/cjs/components/Sheet/utils/handleTransition.js +12 -0
  56. package/styled-components/cjs/components/Sheet/utils/index.js +14 -0
  57. package/styled-components/cjs/components/Sheet/variations/_view/base.js +8 -0
  58. package/styled-components/cjs/components/Sheet/variations/_view/tokens.json +6 -0
  59. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.config.js +18 -0
  60. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.js +17 -0
  61. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +341 -0
  62. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.config.js +18 -0
  63. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.js +17 -0
  64. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx +341 -0
  65. package/styled-components/cjs/index.js +11 -0
  66. package/styled-components/es/components/Sheet/Sheet.js +100 -0
  67. package/styled-components/es/components/Sheet/Sheet.styles.js +45 -0
  68. package/styled-components/es/components/Sheet/Sheet.template-doc.mdx +143 -0
  69. package/styled-components/es/components/Sheet/Sheet.tokens.js +9 -0
  70. package/styled-components/es/components/Sheet/Sheet.types.js +1 -0
  71. package/styled-components/es/components/Sheet/hooks/index.js +2 -0
  72. package/styled-components/es/components/Sheet/hooks/useOverflow.js +15 -0
  73. package/styled-components/es/components/Sheet/hooks/useSheetSwipe.js +95 -0
  74. package/styled-components/es/components/Sheet/index.js +2 -0
  75. package/styled-components/es/components/Sheet/utils/handleTransition.js +6 -0
  76. package/styled-components/es/components/Sheet/utils/index.js +2 -0
  77. package/styled-components/es/components/Sheet/variations/_view/base.js +2 -0
  78. package/styled-components/es/components/Sheet/variations/_view/tokens.json +6 -0
  79. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.config.js +12 -0
  80. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.js +6 -0
  81. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +341 -0
  82. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.config.js +12 -0
  83. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.js +6 -0
  84. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx +341 -0
  85. package/styled-components/es/index.js +1 -0
  86. package/types/components/Sheet/Sheet.d.ts +22 -0
  87. package/types/components/Sheet/Sheet.d.ts.map +1 -0
  88. package/types/components/Sheet/Sheet.styles.d.ts +16 -0
  89. package/types/components/Sheet/Sheet.styles.d.ts.map +1 -0
  90. package/types/components/Sheet/Sheet.tokens.d.ts +10 -0
  91. package/types/components/Sheet/Sheet.tokens.d.ts.map +1 -0
  92. package/types/components/Sheet/Sheet.types.d.ts +65 -0
  93. package/types/components/Sheet/Sheet.types.d.ts.map +1 -0
  94. package/types/components/Sheet/hooks/index.d.ts +3 -0
  95. package/types/components/Sheet/hooks/index.d.ts.map +1 -0
  96. package/types/components/Sheet/hooks/useOverflow.d.ts +3 -0
  97. package/types/components/Sheet/hooks/useOverflow.d.ts.map +1 -0
  98. package/types/components/Sheet/hooks/useSheetSwipe.d.ts +9 -0
  99. package/types/components/Sheet/hooks/useSheetSwipe.d.ts.map +1 -0
  100. package/types/components/Sheet/index.d.ts +4 -0
  101. package/types/components/Sheet/index.d.ts.map +1 -0
  102. package/types/components/Sheet/utils/handleTransition.d.ts +5 -0
  103. package/types/components/Sheet/utils/handleTransition.d.ts.map +1 -0
  104. package/types/components/Sheet/utils/index.d.ts +3 -0
  105. package/types/components/Sheet/utils/index.d.ts.map +1 -0
  106. package/types/components/Sheet/variations/_view/base.d.ts +2 -0
  107. package/types/components/Sheet/variations/_view/base.d.ts.map +1 -0
  108. package/types/examples/plasma_b2c/components/Sheet/Sheet.config.d.ts +11 -0
  109. package/types/examples/plasma_b2c/components/Sheet/Sheet.config.d.ts.map +1 -0
  110. package/types/examples/plasma_b2c/components/Sheet/Sheet.d.ts +8 -0
  111. package/types/examples/plasma_b2c/components/Sheet/Sheet.d.ts.map +1 -0
  112. package/types/examples/plasma_web/components/Sheet/Sheet.config.d.ts +11 -0
  113. package/types/examples/plasma_web/components/Sheet/Sheet.config.d.ts.map +1 -0
  114. package/types/examples/plasma_web/components/Sheet/Sheet.d.ts +8 -0
  115. package/types/examples/plasma_web/components/Sheet/Sheet.d.ts.map +1 -0
  116. package/types/index.d.ts +1 -0
  117. package/types/index.d.ts.map +1 -1
@@ -0,0 +1,341 @@
1
+ import React, { useState } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+ import type { ComponentProps } from 'react';
4
+ import styled from 'styled-components';
5
+
6
+ import { Button } from '../Button/Button';
7
+ import { WithTheme } from '../../../_helpers';
8
+ import { Body } from '../../../typograpy/components/Body/Body';
9
+
10
+ import { Sheet } from './Sheet';
11
+
12
+ const meta: Meta<typeof Sheet> = {
13
+ title: 'plasma_web/Sheet',
14
+ decorators: [WithTheme],
15
+ args: {
16
+ withBlur: false,
17
+ withOverlay: true,
18
+ withTransition: true,
19
+ hasHandle: true,
20
+ isHeaderFixed: false,
21
+ isFooterFixed: false,
22
+ },
23
+ };
24
+
25
+ export default meta;
26
+
27
+ type StorySheetProps = ComponentProps<typeof Sheet> & {
28
+ storyHasHeader: boolean;
29
+ storyHasFooter: boolean;
30
+ };
31
+
32
+ const StyledBody = styled(Body)`
33
+ padding-bottom: 300px;
34
+ `;
35
+
36
+ const StoryDefault = ({
37
+ withOverlay,
38
+ withTransition,
39
+ storyHasFooter,
40
+ isFooterFixed,
41
+ storyHasHeader,
42
+ isHeaderFixed,
43
+ hasHandle,
44
+ withBlur,
45
+ }: StorySheetProps) => {
46
+ const [opened, setOpened] = useState(false);
47
+
48
+ return (
49
+ <>
50
+ <Button onClick={() => setOpened(true)}>Открыть</Button>
51
+ <Sheet
52
+ opened={opened}
53
+ withOverlay={withOverlay}
54
+ withTransition={withTransition}
55
+ onClose={() => setOpened(false)}
56
+ hasHandle={hasHandle}
57
+ withBlur={withBlur}
58
+ contentHeader={
59
+ storyHasHeader ? (
60
+ <div>
61
+ <h4>header</h4>
62
+ </div>
63
+ ) : undefined
64
+ }
65
+ isHeaderFixed={isHeaderFixed}
66
+ contentFooter={
67
+ storyHasFooter ? (
68
+ <div>
69
+ <p>footer</p>
70
+ </div>
71
+ ) : undefined
72
+ }
73
+ isFooterFixed={isFooterFixed}
74
+ >
75
+ <StyledBody>body</StyledBody>
76
+ </Sheet>
77
+ </>
78
+ );
79
+ };
80
+
81
+ export const Default: StoryObj<StorySheetProps> = {
82
+ args: {
83
+ storyHasHeader: true,
84
+ storyHasFooter: true,
85
+ },
86
+ render: (args) => <StoryDefault {...args} />,
87
+ };
88
+
89
+ const StoryWithoutOverlay = () => {
90
+ const [opened, setOpened] = useState(false);
91
+
92
+ return (
93
+ <>
94
+ <Button onClick={() => setOpened(true)}>Открыть</Button>
95
+ <Sheet opened={opened} withOverlay={false} onClose={() => setOpened(false)}>
96
+ <StyledBody>
97
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
98
+ consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
99
+ fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
100
+ placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
101
+ dolorem labore quaerat vero maxime ab ipsa nihil.
102
+ </StyledBody>
103
+ </Sheet>
104
+ </>
105
+ );
106
+ };
107
+
108
+ export const WithoutOverlay: StoryObj = {
109
+ render: () => <StoryWithoutOverlay />,
110
+ };
111
+
112
+ const StoryWithScroll = ({
113
+ withOverlay,
114
+ withTransition,
115
+ storyHasFooter,
116
+ isFooterFixed,
117
+ storyHasHeader,
118
+ isHeaderFixed,
119
+ hasHandle,
120
+ withBlur,
121
+ }: StorySheetProps) => {
122
+ const [opened, setOpened] = useState(false);
123
+
124
+ return (
125
+ <>
126
+ <Button onClick={() => setOpened(true)}>Открыть</Button>
127
+ <Sheet
128
+ opened={opened}
129
+ withOverlay={withOverlay}
130
+ withTransition={withTransition}
131
+ onClose={() => setOpened(false)}
132
+ hasHandle={hasHandle}
133
+ withBlur={withBlur}
134
+ contentHeader={
135
+ storyHasHeader ? (
136
+ <div>
137
+ <h4>header</h4>
138
+ </div>
139
+ ) : undefined
140
+ }
141
+ isHeaderFixed={isHeaderFixed}
142
+ contentFooter={
143
+ storyHasFooter ? (
144
+ <div>
145
+ <p>footer</p>
146
+ </div>
147
+ ) : undefined
148
+ }
149
+ isFooterFixed={isFooterFixed}
150
+ >
151
+ <Body>
152
+ <Button onClick={() => setOpened(false)}>Закрыть</Button>
153
+ <p>
154
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
155
+ consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
156
+ illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
157
+ nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
158
+ ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
159
+ </p>
160
+ <Button onClick={() => setOpened(false)}>Закрыть</Button>
161
+ <p>
162
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
163
+ consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
164
+ illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
165
+ nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
166
+ ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
167
+ </p>
168
+ </Body>
169
+ </Sheet>
170
+ </>
171
+ );
172
+ };
173
+
174
+ export const WithScroll: StoryObj<StorySheetProps> = {
175
+ args: {
176
+ storyHasHeader: true,
177
+ storyHasFooter: true,
178
+ },
179
+ render: (args) => <StoryWithScroll {...args} />,
180
+ };
181
+
182
+ const StoryWithInsideScroll = ({
183
+ withOverlay,
184
+ withTransition,
185
+ storyHasFooter,
186
+ isFooterFixed,
187
+ storyHasHeader,
188
+ isHeaderFixed,
189
+ hasHandle,
190
+ withBlur,
191
+ }: StorySheetProps) => {
192
+ const [opened, setOpened] = useState(false);
193
+
194
+ return (
195
+ <>
196
+ <Button onClick={() => setOpened(true)}>Открыть</Button>
197
+ <Sheet
198
+ opened={opened}
199
+ withOverlay={withOverlay}
200
+ withTransition={withTransition}
201
+ onClose={() => setOpened(false)}
202
+ hasHandle={hasHandle}
203
+ withBlur={withBlur}
204
+ contentHeader={
205
+ storyHasHeader ? (
206
+ <div>
207
+ <h4>header</h4>
208
+ </div>
209
+ ) : undefined
210
+ }
211
+ isHeaderFixed={isHeaderFixed}
212
+ contentFooter={
213
+ storyHasFooter ? (
214
+ <div>
215
+ <p>footer</p>
216
+ </div>
217
+ ) : undefined
218
+ }
219
+ isFooterFixed={isFooterFixed}
220
+ >
221
+ <p>Вложенные кнопки</p>
222
+ <div
223
+ style={{
224
+ height: '150px',
225
+ overflow: 'scroll',
226
+ display: 'flex',
227
+ flexDirection: 'column',
228
+ gap: '1rem',
229
+ }}
230
+ >
231
+ <Button>Кнопка 1</Button>
232
+ <Button>Кнопка 2</Button>
233
+ <Button>Кнопка 3</Button>
234
+ <Button>Кнопка 4</Button>
235
+ <Button>Кнопка 5</Button>
236
+ <Button>Кнопка 6</Button>
237
+ <Button>Кнопка 7</Button>
238
+ <Button>Кнопка 8</Button>
239
+ </div>
240
+ <Body>Lorem ipsum dolor sit amet consectetur adipisicing elit.</Body>
241
+ </Sheet>
242
+ </>
243
+ );
244
+ };
245
+
246
+ export const WithInsideScroll: StoryObj<StorySheetProps> = {
247
+ args: {
248
+ storyHasHeader: true,
249
+ storyHasFooter: true,
250
+ },
251
+ render: (args) => <StoryWithInsideScroll {...args} />,
252
+ };
253
+
254
+ const StoryWithDoubleScroll = ({
255
+ withOverlay,
256
+ withTransition,
257
+ storyHasFooter,
258
+ isFooterFixed,
259
+ storyHasHeader,
260
+ isHeaderFixed,
261
+ hasHandle,
262
+ withBlur,
263
+ }: StorySheetProps) => {
264
+ const [opened, setOpened] = useState(false);
265
+
266
+ return (
267
+ <>
268
+ <Button onClick={() => setOpened(true)}>Открыть</Button>
269
+ <Sheet
270
+ opened={opened}
271
+ withOverlay={withOverlay}
272
+ withTransition={withTransition}
273
+ onClose={() => setOpened(false)}
274
+ hasHandle={hasHandle}
275
+ withBlur={withBlur}
276
+ contentHeader={
277
+ storyHasHeader ? (
278
+ <div>
279
+ <h4>header</h4>
280
+ </div>
281
+ ) : undefined
282
+ }
283
+ isHeaderFixed={isHeaderFixed}
284
+ contentFooter={
285
+ storyHasFooter ? (
286
+ <div>
287
+ <p>footer</p>
288
+ </div>
289
+ ) : undefined
290
+ }
291
+ isFooterFixed={isFooterFixed}
292
+ >
293
+ <Body>
294
+ <Button onClick={() => setOpened(false)}>Закрыть</Button>
295
+ <p>Вложенные кнопки</p>
296
+ <div
297
+ style={{
298
+ height: '150px',
299
+ overflow: 'scroll',
300
+ display: 'flex',
301
+ flexDirection: 'column',
302
+ gap: '1rem',
303
+ }}
304
+ >
305
+ <Button>Кнопка 1</Button>
306
+ <Button>Кнопка 2</Button>
307
+ <Button>Кнопка 3</Button>
308
+ <Button>Кнопка 4</Button>
309
+ <Button>Кнопка 5</Button>
310
+ <Button>Кнопка 6</Button>
311
+ <Button>Кнопка 7</Button>
312
+ <Button>Кнопка 8</Button>
313
+ </div>
314
+ <p>
315
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
316
+ consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
317
+ illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
318
+ nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
319
+ ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
320
+ </p>
321
+ <Button onClick={() => setOpened(false)}>Закрыть</Button>
322
+ <p>
323
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
324
+ consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
325
+ illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
326
+ nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
327
+ ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
328
+ </p>
329
+ </Body>
330
+ </Sheet>
331
+ </>
332
+ );
333
+ };
334
+
335
+ export const WithDoubleScroll: StoryObj<StorySheetProps> = {
336
+ args: {
337
+ storyHasHeader: true,
338
+ storyHasFooter: true,
339
+ },
340
+ render: (args) => <StoryWithDoubleScroll {...args} />,
341
+ };
@@ -509,6 +509,17 @@ Object.keys(_Toolbar).forEach(function (key) {
509
509
  }
510
510
  });
511
511
  });
512
+ var _Sheet = /*#__PURE__*/require("./components/Sheet");
513
+ Object.keys(_Sheet).forEach(function (key) {
514
+ if (key === "default" || key === "__esModule") return;
515
+ if (key in exports && exports[key] === _Sheet[key]) return;
516
+ Object.defineProperty(exports, key, {
517
+ enumerable: true,
518
+ get: function get() {
519
+ return _Sheet[key];
520
+ }
521
+ });
522
+ });
512
523
  var _Slider = /*#__PURE__*/require("./components/Slider");
513
524
  Object.keys(_Slider).forEach(function (key) {
514
525
  if (key === "default" || key === "__esModule") return;
@@ -0,0 +1,100 @@
1
+ var _excluded = ["opened", "children", "onClose", "hasHandle", "contentHeader", "isHeaderFixed", "contentFooter", "isFooterFixed", "withOverlay", "withBlur", "withTransition", "throttleMs", "className", "view"];
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
+ 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
+ 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
+ import React, { forwardRef } from 'react';
6
+ import { Overlay } from '../Overlay';
7
+ import { cx } from '../../utils';
8
+ import { useOverflow, useSheetSwipe } from './hooks';
9
+ import { classes, tokens } from './Sheet.tokens';
10
+ import { StyledContentWrapper, StyledSheetBody, StyledSheetContent, StyledSheetFooter, StyledSheetHandle, StyledSheetHeader } from './Sheet.styles';
11
+ import { base as viewCSS } from './variations/_view/base';
12
+ import { DEFAULT_Z_INDEX } from './utils';
13
+
14
+ /**
15
+ * Открывает окно-шторку поверх основного экрана.
16
+ */
17
+
18
+ export var sheetRoot = function sheetRoot(Root) {
19
+ return /*#__PURE__*/forwardRef(function (_ref, rootRef) {
20
+ var opened = _ref.opened,
21
+ children = _ref.children,
22
+ onClose = _ref.onClose,
23
+ _ref$hasHandle = _ref.hasHandle,
24
+ hasHandle = _ref$hasHandle === void 0 ? true : _ref$hasHandle,
25
+ contentHeader = _ref.contentHeader,
26
+ _ref$isHeaderFixed = _ref.isHeaderFixed,
27
+ isHeaderFixed = _ref$isHeaderFixed === void 0 ? false : _ref$isHeaderFixed,
28
+ contentFooter = _ref.contentFooter,
29
+ _ref$isFooterFixed = _ref.isFooterFixed,
30
+ isFooterFixed = _ref$isFooterFixed === void 0 ? false : _ref$isFooterFixed,
31
+ _ref$withOverlay = _ref.withOverlay,
32
+ withOverlay = _ref$withOverlay === void 0 ? true : _ref$withOverlay,
33
+ _ref$withBlur = _ref.withBlur,
34
+ withBlur = _ref$withBlur === void 0 ? false : _ref$withBlur,
35
+ _ref$withTransition = _ref.withTransition,
36
+ withTransition = _ref$withTransition === void 0 ? true : _ref$withTransition,
37
+ throttleMs = _ref.throttleMs,
38
+ className = _ref.className,
39
+ view = _ref.view,
40
+ restProps = _objectWithoutProperties(_ref, _excluded);
41
+ var contentWrapperRef = React.useRef(null);
42
+ var contentRef = React.useRef(null);
43
+ var handleRef = React.useRef(null);
44
+ useOverflow({
45
+ opened: opened
46
+ });
47
+ useSheetSwipe({
48
+ contentWrapperRef: contentWrapperRef,
49
+ contentRef: contentRef,
50
+ handleRef: handleRef,
51
+ throttleMs: throttleMs,
52
+ onClose: onClose
53
+ });
54
+ var hasHeader = Boolean(contentHeader);
55
+ var hasFooter = Boolean(contentFooter);
56
+ var closedClass = opened ? undefined : "".concat(classes.closed);
57
+ var overlayBackgroundToken = withBlur ? "var(".concat(tokens.sheetOverlayWithBlurColor, ")") : "var(".concat(tokens.sheetOverlayColor, ")");
58
+ return /*#__PURE__*/React.createElement(Root, {
59
+ opened: opened,
60
+ onClose: onClose,
61
+ view: view,
62
+ ref: rootRef
63
+ }, /*#__PURE__*/React.createElement(StyledContentWrapper, _extends({
64
+ opened: opened,
65
+ withTransition: withTransition,
66
+ className: cx(closedClass, className),
67
+ ref: contentWrapperRef
68
+ }, restProps), hasHandle && /*#__PURE__*/React.createElement(StyledSheetHandle, {
69
+ ref: handleRef
70
+ }), /*#__PURE__*/React.createElement(StyledSheetContent, {
71
+ hasHeader: hasHeader,
72
+ hasFooter: hasFooter,
73
+ ref: contentRef
74
+ }, hasHeader && /*#__PURE__*/React.createElement(StyledSheetHeader, {
75
+ isHeaderFixed: isHeaderFixed
76
+ }, contentHeader), /*#__PURE__*/React.createElement(StyledSheetBody, null, children), hasFooter && /*#__PURE__*/React.createElement(StyledSheetFooter, {
77
+ isFooterFixed: isFooterFixed
78
+ }, contentFooter))), withOverlay && opened && /*#__PURE__*/React.createElement(Overlay, {
79
+ zIndex: DEFAULT_Z_INDEX,
80
+ backgroundColorProperty: overlayBackgroundToken,
81
+ withBlur: withBlur,
82
+ isClickable: true,
83
+ onOverlayClick: onClose
84
+ }));
85
+ });
86
+ };
87
+ export var sheetConfig = {
88
+ name: 'Sheet',
89
+ tag: 'div',
90
+ layout: sheetRoot,
91
+ base: '',
92
+ variations: {
93
+ view: {
94
+ css: viewCSS
95
+ }
96
+ },
97
+ defaults: {
98
+ view: 'default'
99
+ }
100
+ };
@@ -0,0 +1,45 @@
1
+ import styled from 'styled-components';
2
+ import { tokens, classes } from './Sheet.tokens';
3
+ import { handleTransition } from './utils/handleTransition';
4
+ export var StyledContentWrapper = /*#__PURE__*/styled.div.withConfig({
5
+ componentId: "plasma-new-hope__sc-1pj79gq-0"
6
+ })(["position:fixed;left:0;bottom:0;width:100%;max-height:100%;z-index:1000;opacity:1;display:flex;flex-direction:column;justify-content:flex-end;transition:", ";&.", "{opacity:0;visibility:hidden;transform:translateY(100%);}"], /*#__PURE__*/handleTransition('all 0.5s 0.1s'), /*#__PURE__*/String(classes.closed));
7
+ export var StyledSheetHandle = /*#__PURE__*/styled.div.withConfig({
8
+ componentId: "plasma-new-hope__sc-1pj79gq-1"
9
+ })(["width:3rem;padding:1.75rem 0;margin:-1.375rem 0;opacity:0.65;align-self:center;&::before{content:'';display:block;border-radius:0.625rem;background-color:var(", ");height:0.25rem;}"], tokens.handleBackgroundColor);
10
+ export var StyledSheetContent = /*#__PURE__*/styled.div.withConfig({
11
+ componentId: "plasma-new-hope__sc-1pj79gq-2"
12
+ })(["border-radius:1.25rem 1.25rem 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) {
13
+ var hasHeader = _ref.hasHeader;
14
+ return hasHeader ? 'unset' : '1rem';
15
+ }, function (_ref2) {
16
+ var hasFooter = _ref2.hasFooter;
17
+ return hasFooter ? 'unset' : '1rem';
18
+ });
19
+ export var StyledSheetHeader = /*#__PURE__*/styled.div.withConfig({
20
+ componentId: "plasma-new-hope__sc-1pj79gq-3"
21
+ })(["width:100%;z-index:1;padding-top:1rem;position:", ";top:", ";background-color:", ";"], function (_ref3) {
22
+ var isHeaderFixed = _ref3.isHeaderFixed;
23
+ return isHeaderFixed ? 'sticky' : 'static';
24
+ }, function (_ref4) {
25
+ var isHeaderFixed = _ref4.isHeaderFixed;
26
+ return isHeaderFixed ? '0' : 'unset';
27
+ }, function (_ref5) {
28
+ var isHeaderFixed = _ref5.isHeaderFixed;
29
+ return isHeaderFixed ? "var(".concat(tokens.contentBackgroundColor, ")") : 'transparent';
30
+ });
31
+ export var StyledSheetBody = /*#__PURE__*/styled.div.withConfig({
32
+ componentId: "plasma-new-hope__sc-1pj79gq-4"
33
+ })([""]);
34
+ export var StyledSheetFooter = /*#__PURE__*/styled.div.withConfig({
35
+ componentId: "plasma-new-hope__sc-1pj79gq-5"
36
+ })(["width:100%;z-index:1;padding-bottom:1rem;position:", ";bottom:", ";background-color:", ";"], function (_ref6) {
37
+ var isFooterFixed = _ref6.isFooterFixed;
38
+ return isFooterFixed ? 'sticky' : 'static';
39
+ }, function (_ref7) {
40
+ var isFooterFixed = _ref7.isFooterFixed;
41
+ return isFooterFixed ? '0' : 'unset';
42
+ }, function (_ref8) {
43
+ var isFooterFixed = _ref8.isFooterFixed;
44
+ return isFooterFixed ? "var(".concat(tokens.contentBackgroundColor, ")") : 'transparent';
45
+ });
@@ -0,0 +1,143 @@
1
+ ---
2
+ id: sheet
3
+ title: Sheet
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ # Sheet
9
+ <Description name="Sheet" />
10
+ <PropsTable name="Sheet" />
11
+
12
+ ## Использование
13
+ Компонент `Sheet` может содержать любой контент напрямую через `children`.
14
+
15
+ Также есть возможность добавить любой контент в заголовок и футер с помощью свойств `contentHeader` и `contentFooter`.
16
+
17
+ ```tsx live
18
+ import React, { useState } from 'react';
19
+ import { Sheet } from '@salutejs/{{ package }}';
20
+ import { Button } from '@salutejs/{{ package }}';
21
+
22
+ export function App() {
23
+ const [opened, setOpened] = useState(false);
24
+
25
+ return (
26
+ <>
27
+ <Button onClick={() => setOpened(true)}>Открыть</Button>
28
+
29
+ <Sheet opened={opened}
30
+ onClose={() => setOpened(false)}
31
+ contentHeader={
32
+ <div>
33
+ <h4>header</h4>
34
+ </div>
35
+ }
36
+ contentFooter={
37
+ <div>
38
+ <p>footer</p>
39
+ </div>
40
+ }
41
+ >
42
+ <div style=\{{ 'padding-bottom': '300px' }}>body</div>
43
+ </Sheet>
44
+ </>
45
+ );
46
+ }
47
+ ```
48
+
49
+ ## Примеры
50
+
51
+ ### Закрепление заголовка и футера
52
+
53
+ С помощью свойств `isHeaderFixed` и `isFooterFixed` можно закрепить заголовок и футер.
54
+ В этом случае при появлении прокрутки контент будет скроллиться под них.
55
+
56
+ ```tsx live
57
+ import React, { useState } from 'react';
58
+ import { Sheet } from '@salutejs/{{ package }}';
59
+ import { Button } from '@salutejs/{{ package }}';
60
+
61
+ export function App() {
62
+ const [opened, setOpened] = useState(false);
63
+
64
+ return (
65
+ <>
66
+ <Button onClick={() => setOpened(true)}>Открыть</Button>
67
+ <Sheet opened={opened}
68
+ onClose={() => setOpened(false)}
69
+ contentHeader={
70
+ <div>
71
+ <h4>header</h4>
72
+ </div>
73
+ }
74
+ contentFooter={
75
+ <div>
76
+ <p>footer</p>
77
+ </div>
78
+ }
79
+ isFooterFixed
80
+ isHeaderFixed
81
+ >
82
+ <div style=\{{ 'padding-bottom': '300px' }}>body</div>
83
+ </Sheet>
84
+ </>
85
+ );
86
+ }
87
+ ```
88
+
89
+ ### Подложка
90
+
91
+ Наличие или отсутствие подложки задается с помощью свойства `withOverlay`.
92
+
93
+ В случае, когда подложка отсутствует, у пользователя появляется возможность взаимодействовать с контентом вне шторки.
94
+
95
+ ```tsx live
96
+ import React, { useState } from 'react';
97
+ import { Sheet } from '@salutejs/{{ package }}';
98
+ import { Button } from '@salutejs/{{ package }}';
99
+
100
+ export function App() {
101
+ const [opened, setOpened] = useState(false);
102
+
103
+ return (
104
+ <>
105
+ <Button onClick={() => setOpened(!opened)}>
106
+ {opened ? 'Закрыть' : 'Открыть'}
107
+ </Button>
108
+ <Sheet opened={opened}
109
+ onClose={() => setOpened(false)}
110
+ withOverlay={false}
111
+ >
112
+ <div style=\{{ 'padding-bottom': '300px' }}>body</div>
113
+ </Sheet>
114
+ </>
115
+ );
116
+ }
117
+ ```
118
+
119
+ К подложке можно добавить эффект размытия при помощи свойства `withBlur`.
120
+
121
+ ```tsx live
122
+ import React, { useState } from 'react';
123
+ import { Sheet } from '@salutejs/{{ package }}';
124
+ import { Button } from '@salutejs/{{ package }}';
125
+
126
+ export function App() {
127
+ const [opened, setOpened] = useState(false);
128
+
129
+ return (
130
+ <>
131
+ <Button onClick={() => setOpened(!opened)}>
132
+ {opened ? 'Закрыть' : 'Открыть'}
133
+ </Button>
134
+ <Sheet opened={opened}
135
+ onClose={() => setOpened(false)}
136
+ withBlur
137
+ >
138
+ <div style=\{{ 'padding-bottom': '300px' }}>body</div>
139
+ </Sheet>
140
+ </>
141
+ );
142
+ }
143
+ ```
@@ -0,0 +1,9 @@
1
+ export var classes = {
2
+ closed: 'closed'
3
+ };
4
+ export var tokens = {
5
+ sheetOverlayColor: '--plasma-sheet-overlay-color',
6
+ sheetOverlayWithBlurColor: '--plasma-sheet-overlay-with-blur-color',
7
+ contentBackgroundColor: '--plasma-sheet-content-background-color',
8
+ handleBackgroundColor: '--plasma-sheet-handle-background-color'
9
+ };
@@ -0,0 +1,2 @@
1
+ export { useSheetSwipe } from './useSheetSwipe';
2
+ export { useOverflow } from './useOverflow';
@@ -0,0 +1,15 @@
1
+ import { useEffect, useRef } from 'react';
2
+ export var useOverflow = function useOverflow(_ref) {
3
+ var opened = _ref.opened;
4
+ var overflow = useRef(document.body.style.overflowY);
5
+
6
+ // linaria не поддерживает динамический global
7
+ useEffect(function () {
8
+ if (opened) {
9
+ overflow.current = document.body.style.overflowY;
10
+ document.body.style.overflowY = 'hidden';
11
+ return;
12
+ }
13
+ document.body.style.overflowY = overflow.current;
14
+ }, [opened]);
15
+ };