react-side-sheet-pro 0.1.0 â 0.1.2
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/README.md +13 -2
- package/dist/index.css +111 -111
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.d.ts +1 -1
- package/dist/index.esm.js +1203 -901
- package/dist/index.js +1203 -901
- package/dist/index.umd.d.ts +1 -1
- package/dist/index.umd.js +1203 -901
- package/dist/index.umd.min.d.ts +1 -1
- package/dist/index.umd.min.js +5 -5
- package/package.json +3 -3
- package/src/components/SideSheetProvider.tsx +2 -2
- package/dist/index.html +0 -102
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ This panel can slide in from either the left or right side of the screen and is
|
|
|
6
6
|
|
|
7
7
|
## đ Live Preview
|
|
8
8
|
|
|
9
|
-
-
|
|
9
|
+
[](https://codesandbox.io/p/sandbox/9mxzqg)
|
|
10
10
|
|
|
11
11
|
## đĄ Use cases
|
|
12
12
|
- Viewing a user's profile or related details
|
|
@@ -16,8 +16,18 @@ This panel can slide in from either the left or right side of the screen and is
|
|
|
16
16
|
|
|
17
17
|
## âšī¸ Compatibility
|
|
18
18
|
|
|
19
|
-
React 0.14.0 -
|
|
19
|
+
React 0.14.0 - 19.x.x
|
|
20
20
|
|
|
21
|
+
## ⨠Key Features
|
|
22
|
+
|
|
23
|
+
- đ **Easy Integration**: Get started with minimal setup.
|
|
24
|
+
- đą **Responsive Design**: Optimized for all screen sizes.
|
|
25
|
+
- đĒ **TypeScript Compatibility**: Fully typed for a seamless developer experience.
|
|
26
|
+
- đ **Nested Sheets**: Support for opening multiple side sheets in a nested manner.
|
|
27
|
+
- đ¨ **Customizable**: Easily adjust width, styles, and behavior to fit your needs.
|
|
28
|
+
- đ **State Management Included**: Built-in hooks for managing the state of the side sheet.
|
|
29
|
+
- ⥠**Lightweight and Fast**: Minimal dependencies for a quick and smooth user experience.
|
|
30
|
+
- 𧊠**Modular Components**: Use only the parts you need, like header, content, and footer.
|
|
21
31
|
|
|
22
32
|
## đĻ Installation
|
|
23
33
|
|
|
@@ -33,6 +43,7 @@ yarn add react-side-sheet-pro
|
|
|
33
43
|
```typescript jsx
|
|
34
44
|
import React from 'react'
|
|
35
45
|
import { SideSheet, useSideSheet, SideElementProps } from 'react-side-sheet-pro'
|
|
46
|
+
import 'react-side-sheet-pro/dist/index.css'
|
|
36
47
|
|
|
37
48
|
const UserDetails: React.FC<SideElementProps & { user: any }> = ({
|
|
38
49
|
user,
|
package/dist/index.css
CHANGED
|
@@ -1,191 +1,191 @@
|
|
|
1
1
|
.sidesheet-overlay {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
opacity: 0.3;
|
|
3
|
+
transition: all 0.4s;
|
|
4
|
+
background: #000;
|
|
5
|
+
bottom: 0;
|
|
6
|
+
left: 0;
|
|
7
|
+
position: fixed;
|
|
8
|
+
right: 0;
|
|
9
|
+
top: 0;
|
|
10
|
+
visibility: visible;
|
|
11
|
+
z-index: 10000;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.sidesheet-right {
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
right: 0;
|
|
16
|
+
transform: translateX(100%);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
.sidesheet-left {
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
left: 0;
|
|
21
|
+
transform: translateX(-100%);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
.sidesheet-right.sidesheet-animation-open {
|
|
25
|
-
|
|
25
|
+
animation: sidesheet-open-right 240ms cubic-bezier(0, 0, 0.3, 1);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.sidesheet-left.sidesheet-animation-open {
|
|
29
|
-
|
|
29
|
+
animation: sidesheet-open-left 240ms cubic-bezier(0, 0, 0.3, 1);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.sidesheet.sidesheet-animation-open {
|
|
33
|
-
|
|
33
|
+
transform: translateX(0);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
.sidesheet-right.sidesheet-animation-closing {
|
|
37
|
-
|
|
37
|
+
animation: sidesheet-close-right 240ms cubic-bezier(0, 0, 0.3, 1);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.sidesheet-left.sidesheet-animation-closing {
|
|
41
|
-
|
|
41
|
+
animation: sidesheet-close-left 240ms cubic-bezier(0, 0, 0.3, 1);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
@keyframes sidesheet-open-right {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
45
|
+
from {
|
|
46
|
+
transform: translateX(100%);
|
|
47
|
+
}
|
|
48
|
+
to {
|
|
49
|
+
transform: translateX(0);
|
|
50
|
+
}
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
@keyframes sidesheet-close-right {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
54
|
+
from {
|
|
55
|
+
transform: translateX(0);
|
|
56
|
+
}
|
|
57
|
+
to {
|
|
58
|
+
transform: translateX(100%);
|
|
59
|
+
}
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
@keyframes sidesheet-open-left {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
63
|
+
from {
|
|
64
|
+
transform: translateX(-100%);
|
|
65
|
+
}
|
|
66
|
+
to {
|
|
67
|
+
transform: translateX(0);
|
|
68
|
+
}
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
@keyframes sidesheet-close-left {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
72
|
+
from {
|
|
73
|
+
transform: translateX(0);
|
|
74
|
+
}
|
|
75
|
+
to {
|
|
76
|
+
transform: translateX(-100%);
|
|
77
|
+
}
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
.sidesheet {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
0 0
|
|
96
|
-
|
|
81
|
+
flex-direction: column;
|
|
82
|
+
display: flex;
|
|
83
|
+
flex-wrap: nowrap;
|
|
84
|
+
background: #f1f3f4;
|
|
85
|
+
bottom: 0;
|
|
86
|
+
right: 0;
|
|
87
|
+
max-width: 100%;
|
|
88
|
+
overflow-x: hidden;
|
|
89
|
+
overflow-y: auto;
|
|
90
|
+
position: fixed;
|
|
91
|
+
z-index: 10000;
|
|
92
|
+
top: 0;
|
|
93
|
+
width: 100%;
|
|
94
|
+
box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.2), 0 0 24px 2px rgba(0, 0, 0, 0.14),
|
|
95
|
+
0 0 30px 5px rgba(0, 0, 0, 0.12);
|
|
96
|
+
transition: transform 0.3s ease, width 0.3s ease;
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
.sheet-white {
|
|
100
|
-
|
|
100
|
+
background: #fff;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
.sidesheet-header .sidesheet-header-btn {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
104
|
+
background: transparent;
|
|
105
|
+
border: none;
|
|
106
|
+
cursor: pointer;
|
|
107
|
+
padding: 7px;
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
.sidesheet-header {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
111
|
+
padding: 12px;
|
|
112
|
+
gap: 16px;
|
|
113
|
+
border-bottom: 1px solid #dadce0;
|
|
114
|
+
background: #fff;
|
|
115
|
+
display: flex;
|
|
116
|
+
justify-content: space-between;
|
|
117
|
+
align-items: center;
|
|
118
118
|
}
|
|
119
119
|
|
|
120
120
|
.sidesheet-header svg {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
121
|
+
width: 24px;
|
|
122
|
+
height: 24px;
|
|
123
|
+
display: block;
|
|
124
124
|
}
|
|
125
125
|
|
|
126
126
|
.sidesheet-header .sidesheet-header-btn {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
127
|
+
border-radius: 50%;
|
|
128
|
+
height: 40px;
|
|
129
|
+
line-height: 40px;
|
|
130
|
+
align-items: center;
|
|
131
|
+
width: 40px;
|
|
132
|
+
justify-content: center;
|
|
133
|
+
display: flex;
|
|
134
|
+
opacity: 0.8;
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
.sidesheet-header .sidesheet-header-btn:hover {
|
|
138
|
-
|
|
138
|
+
opacity: 1;
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
.sidesheet-header .sidesheet-header-btn:focus {
|
|
142
|
-
|
|
142
|
+
background-color: rgba(64, 64, 64, 0.12);
|
|
143
143
|
}
|
|
144
144
|
|
|
145
145
|
.sidesheet-header-close:hover {
|
|
146
|
-
|
|
146
|
+
cursor: pointer;
|
|
147
147
|
}
|
|
148
148
|
|
|
149
149
|
.sidesheet-header-title {
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
150
|
+
font-size: 20px;
|
|
151
|
+
font-weight: 400;
|
|
152
|
+
align-items: center;
|
|
153
|
+
display: flex;
|
|
154
|
+
flex: 1 1 auto;
|
|
155
|
+
overflow: hidden;
|
|
156
|
+
text-overflow: ellipsis;
|
|
157
|
+
white-space: nowrap;
|
|
158
|
+
padding: 6px 0;
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
.sidesheet-content.sidesheet-centered {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
162
|
+
margin: 0 auto;
|
|
163
|
+
max-width: 768px;
|
|
164
|
+
width: 100%;
|
|
165
165
|
}
|
|
166
166
|
|
|
167
167
|
.sidesheet-content {
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
168
|
+
flex: 1 1 auto;
|
|
169
|
+
overflow-y: auto;
|
|
170
|
+
position: relative;
|
|
171
171
|
}
|
|
172
172
|
|
|
173
173
|
.sidesheet-content.sidesheet-padding {
|
|
174
|
-
|
|
174
|
+
padding: 24px;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
.sidesheet-card {
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
178
|
+
background: #fff;
|
|
179
|
+
border-radius: 8px;
|
|
180
|
+
padding: 24px;
|
|
181
|
+
box-shadow: 0 0 0 1px #dadce0;
|
|
182
182
|
}
|
|
183
183
|
|
|
184
184
|
.sidesheet-footer {
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
185
|
+
padding: 16px;
|
|
186
|
+
border-top: 1px solid #dadce0;
|
|
187
|
+
background: #fff;
|
|
188
|
+
display: flex;
|
|
189
|
+
justify-content: space-between;
|
|
190
|
+
align-items: center;
|
|
191
191
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -41,7 +41,7 @@ declare const useSideSheet: () => SideSheetContextValue;
|
|
|
41
41
|
declare const SideSheet: {
|
|
42
42
|
Provider: import("react").FC<{
|
|
43
43
|
children: import("react").ReactNode;
|
|
44
|
-
configuration
|
|
44
|
+
configuration?: Partial<SideSheetOptions> | undefined;
|
|
45
45
|
}>;
|
|
46
46
|
Header: import("react").FC<{
|
|
47
47
|
title: string;
|
package/dist/index.esm.d.ts
CHANGED
|
@@ -41,7 +41,7 @@ declare const useSideSheet: () => SideSheetContextValue;
|
|
|
41
41
|
declare const SideSheet: {
|
|
42
42
|
Provider: import("react").FC<{
|
|
43
43
|
children: import("react").ReactNode;
|
|
44
|
-
configuration
|
|
44
|
+
configuration?: Partial<SideSheetOptions> | undefined;
|
|
45
45
|
}>;
|
|
46
46
|
Header: import("react").FC<{
|
|
47
47
|
title: string;
|