react-native-ui-lib 7.38.1-snapshot.6352 → 7.38.1-snapshot.6356
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
|
@@ -2,12 +2,24 @@
|
|
|
2
2
|
"name": "GridList",
|
|
3
3
|
"category": "lists",
|
|
4
4
|
"description": "An auto-generated grid list that calculate item size according to given props",
|
|
5
|
-
"extends": [
|
|
6
|
-
|
|
5
|
+
"extends": [
|
|
6
|
+
"FlatList"
|
|
7
|
+
],
|
|
8
|
+
"extendsLink": [
|
|
9
|
+
"https://reactnative.dev/docs/flatlist"
|
|
10
|
+
],
|
|
7
11
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridListScreen.tsx",
|
|
8
12
|
"props": [
|
|
9
|
-
{
|
|
10
|
-
|
|
13
|
+
{
|
|
14
|
+
"name": "numColumns",
|
|
15
|
+
"type": "number",
|
|
16
|
+
"description": "Number of items to show in a row (ignored when passing maxItemWidth)"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"name": "itemSpacing",
|
|
20
|
+
"type": "number",
|
|
21
|
+
"description": "Spacing between each item"
|
|
22
|
+
},
|
|
11
23
|
{
|
|
12
24
|
"name": "maxItemWidth",
|
|
13
25
|
"type": "number",
|
|
@@ -42,5 +54,83 @@
|
|
|
42
54
|
" itemSpacing={Spacings.s3$4}",
|
|
43
55
|
" listPadding={Spacings.s5$5}",
|
|
44
56
|
"/>"
|
|
45
|
-
]
|
|
57
|
+
],
|
|
58
|
+
"docs": {
|
|
59
|
+
"hero": {
|
|
60
|
+
"title": "GridList",
|
|
61
|
+
"description": "GridList display a collection of GridListItems organized in a repeated grid pattern. \n\nGridList allows users to scan content based on images and compare items within a collection.",
|
|
62
|
+
"type": "hero",
|
|
63
|
+
"layout": "horizontal",
|
|
64
|
+
"content": [
|
|
65
|
+
{
|
|
66
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_cover.png"
|
|
67
|
+
}
|
|
68
|
+
]
|
|
69
|
+
},
|
|
70
|
+
"tabs": [
|
|
71
|
+
{
|
|
72
|
+
"title": "Overview",
|
|
73
|
+
"sections": [
|
|
74
|
+
{
|
|
75
|
+
"type": "list",
|
|
76
|
+
"items": [
|
|
77
|
+
{
|
|
78
|
+
"title": "GridList with Avatars",
|
|
79
|
+
"content": [
|
|
80
|
+
{
|
|
81
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_usage_avatars.png"
|
|
82
|
+
}
|
|
83
|
+
]
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"title": "GridList with MediaItems",
|
|
87
|
+
"content": [
|
|
88
|
+
{
|
|
89
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_usage_mediaItems.png"
|
|
90
|
+
}
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
],
|
|
94
|
+
"layout": "horizontal",
|
|
95
|
+
"title": "Usage Examples"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"type": "list",
|
|
99
|
+
"items": [
|
|
100
|
+
{
|
|
101
|
+
"title": "Option 1 - Max Item Width",
|
|
102
|
+
"description": "Set maximum width of a single item, and amount of items in a row will be set automatically according to screen width.
Columns number will be dynamic according to how many items fit the screen.",
|
|
103
|
+
"content": [
|
|
104
|
+
{
|
|
105
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_columns_maxWidth.png"
|
|
106
|
+
}
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"title": "Option 2 - Column Number",
|
|
111
|
+
"description": "Set amount of columns, and items width will be automatic according to screen width. Columns number will be fixed.",
|
|
112
|
+
"content": [
|
|
113
|
+
{
|
|
114
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_columns_number.png"
|
|
115
|
+
}
|
|
116
|
+
]
|
|
117
|
+
}
|
|
118
|
+
],
|
|
119
|
+
"title": "Columns Options"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"type": "section",
|
|
123
|
+
"layout": "horizontal",
|
|
124
|
+
"title": "Spec",
|
|
125
|
+
"description": "markdown: \n### Spacing between items\nHorizontal gutter by default is minimum S4 and can be modified. \nVertical gutter is equal to horizontal gutter.\n### Last item counter\nOnce grid reaches Max of items, the last item should get an overlay color and number of remaining items. \nThe item content shouldn’t be displayed. \nThis state is available in the MediaItem and Avatar components.",
|
|
126
|
+
"content": [
|
|
127
|
+
{
|
|
128
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_spec.png"
|
|
129
|
+
}
|
|
130
|
+
]
|
|
131
|
+
}
|
|
132
|
+
]
|
|
133
|
+
}
|
|
134
|
+
]
|
|
135
|
+
}
|
|
46
136
|
}
|
|
@@ -5,113 +5,5 @@
|
|
|
5
5
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ToastsScreen.js",
|
|
6
6
|
"caution": "Please consider moving to our new Toast implementation and use Incubator.Toast instead",
|
|
7
7
|
"images": [],
|
|
8
|
-
"props": []
|
|
9
|
-
"docs": {
|
|
10
|
-
"hero": {
|
|
11
|
-
"title": "Toast",
|
|
12
|
-
"description": "Toasts give quick feedback or updates without interrupting the user. They’re used for non-critical messages, like success notifications, and disappear on their own. Toasts can include one action, but it shouldn’t be “Dismiss” or “Close.”",
|
|
13
|
-
"type": "hero",
|
|
14
|
-
"layout": "horizontal",
|
|
15
|
-
"content": [
|
|
16
|
-
{
|
|
17
|
-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_cover.png"
|
|
18
|
-
}
|
|
19
|
-
]
|
|
20
|
-
},
|
|
21
|
-
"tabs": [
|
|
22
|
-
{
|
|
23
|
-
"title": "Overview",
|
|
24
|
-
"sections": [
|
|
25
|
-
{
|
|
26
|
-
"type": "section",
|
|
27
|
-
"title": "Usage Examples",
|
|
28
|
-
"content": [
|
|
29
|
-
{
|
|
30
|
-
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4419-247566&embed-host=share"
|
|
31
|
-
}
|
|
32
|
-
]
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
"type": "table",
|
|
36
|
-
"columns": [
|
|
37
|
-
"Type of message",
|
|
38
|
-
"Preview"
|
|
39
|
-
],
|
|
40
|
-
"items": [
|
|
41
|
-
{
|
|
42
|
-
"title": "Generic",
|
|
43
|
-
"content": [
|
|
44
|
-
{
|
|
45
|
-
"props": {
|
|
46
|
-
"visible": true,
|
|
47
|
-
"message": "\"Mika Or\" was saved to contacts."
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
]
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
"title": "Success"
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
"title": "Validation"
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
"title": "Offline Error"
|
|
60
|
-
}
|
|
61
|
-
],
|
|
62
|
-
"title": "Types"
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
"type": "table",
|
|
66
|
-
"columns": [
|
|
67
|
-
"Prop",
|
|
68
|
-
"Preview"
|
|
69
|
-
],
|
|
70
|
-
"items": [
|
|
71
|
-
{
|
|
72
|
-
"title": "None"
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
"title": "With action"
|
|
76
|
-
},
|
|
77
|
-
{
|
|
78
|
-
"title": "With loader"
|
|
79
|
-
}
|
|
80
|
-
],
|
|
81
|
-
"title": "Accessories"
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
"type": "section",
|
|
85
|
-
"title": "Timing",
|
|
86
|
-
"description": "markdown:\nToast disappears automatically after 5-10 seconds. The **default** duration depends on text length: [word count / 2] = X secs to disappear \nExamples: \n[15 words / 2] = 7.5 secs\n[2 words / 2] = 1, but 5 secs is minimum >> 5 secs \nWhen using Toasts in your product, keep in mind that the default display time is preset but can be adjusted for messages that need more attention or reading time. However, the duration should never be less than 5 seconds."
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
"type": "section",
|
|
90
|
-
"layout": "horizontal",
|
|
91
|
-
"title": "Spec",
|
|
92
|
-
"description": "markdown:\n**Positioning**\nThe Toast appears at the bottom of the screen, while keeping a spacing of S4 from the bottom of the screen, or from the bottom bar. \nThe Toast can be placed above CTA’s in order to keep the CTA available for the user. \nToast can be dismissed manually by swiping it down.",
|
|
93
|
-
"content": [
|
|
94
|
-
{
|
|
95
|
-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_spec.png"
|
|
96
|
-
}
|
|
97
|
-
]
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
"type": "section",
|
|
101
|
-
"title": "Tablet Spec",
|
|
102
|
-
"description": "markdown:\nWhen displaying a Toast on a Tablet, the width of the component adjusts to the content. \n- Min-width: 200px \n- Max-width: 524px",
|
|
103
|
-
"content": [
|
|
104
|
-
{
|
|
105
|
-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_tablet.png"
|
|
106
|
-
}
|
|
107
|
-
]
|
|
108
|
-
}
|
|
109
|
-
]
|
|
110
|
-
},
|
|
111
|
-
{
|
|
112
|
-
"title": "UX Guidelines",
|
|
113
|
-
"sections": []
|
|
114
|
-
}
|
|
115
|
-
]
|
|
116
|
-
}
|
|
8
|
+
"props": []
|
|
117
9
|
}
|
|
@@ -68,5 +68,131 @@
|
|
|
68
68
|
" autoDismiss={5000$2}",
|
|
69
69
|
" onDismiss={onDismiss$3}",
|
|
70
70
|
">"
|
|
71
|
-
]
|
|
71
|
+
],
|
|
72
|
+
"docs": {
|
|
73
|
+
"hero": {
|
|
74
|
+
"title": "Toast",
|
|
75
|
+
"description": "Toasts give quick feedback or updates without interrupting the user. They’re used for non-critical messages, like success notifications, and disappear on their own. Toasts can include one action, but it shouldn’t be “Dismiss” or “Close.”",
|
|
76
|
+
"type": "hero",
|
|
77
|
+
"layout": "horizontal",
|
|
78
|
+
"content": [
|
|
79
|
+
{
|
|
80
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_cover.png"
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
"tabs": [
|
|
85
|
+
{
|
|
86
|
+
"title": "Overview",
|
|
87
|
+
"sections": [
|
|
88
|
+
{
|
|
89
|
+
"type": "section",
|
|
90
|
+
"title": "Usage Examples",
|
|
91
|
+
"content": [
|
|
92
|
+
{
|
|
93
|
+
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4419-247566&embed-host=share"
|
|
94
|
+
}
|
|
95
|
+
]
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"type": "table",
|
|
99
|
+
"columns": ["Type of message", "Preview"],
|
|
100
|
+
"items": [
|
|
101
|
+
{
|
|
102
|
+
"title": "Generic",
|
|
103
|
+
"content": [
|
|
104
|
+
{
|
|
105
|
+
"props": {
|
|
106
|
+
"visible": true,
|
|
107
|
+
"message": "\"Mika Or\" was saved to contacts."
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
]
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"title": "Success"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"title": "Validation"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"title": "Offline Error"
|
|
120
|
+
}
|
|
121
|
+
],
|
|
122
|
+
"title": "Types"
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"type": "table",
|
|
126
|
+
"columns": ["Prop", "Preview"],
|
|
127
|
+
"items": [
|
|
128
|
+
{
|
|
129
|
+
"title": "None"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"title": "With action"
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"title": "With loader"
|
|
136
|
+
}
|
|
137
|
+
],
|
|
138
|
+
"title": "Accessories"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"type": "section",
|
|
142
|
+
"title": "Timing",
|
|
143
|
+
"description": "markdown:\nToast disappears automatically after 5-10 seconds. The **default** duration depends on text length: [word count / 2] = X secs to disappear \nExamples: \n[15 words / 2] = 7.5 secs\n[2 words / 2] = 1, but 5 secs is minimum >> 5 secs \nWhen using Toasts in your product, keep in mind that the default display time is preset but can be adjusted for messages that need more attention or reading time. However, the duration should never be less than 5 seconds."
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"type": "section",
|
|
147
|
+
"layout": "horizontal",
|
|
148
|
+
"title": "Spec",
|
|
149
|
+
"description": "markdown:\n**Positioning**\nThe Toast appears at the bottom of the screen, while keeping a spacing of S4 from the bottom of the screen, or from the bottom bar. \nThe Toast can be placed above CTA’s in order to keep the CTA available for the user. \nToast can be dismissed manually by swiping it down.",
|
|
150
|
+
"content": [
|
|
151
|
+
{
|
|
152
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_spec.png"
|
|
153
|
+
}
|
|
154
|
+
]
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
"type": "section",
|
|
158
|
+
"title": "Tablet Spec",
|
|
159
|
+
"description": "markdown:\nWhen displaying a Toast on a Tablet, the width of the component adjusts to the content. \n- Min-width: 200px \n- Max-width: 524px",
|
|
160
|
+
"content": [
|
|
161
|
+
{
|
|
162
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_tablet.png"
|
|
163
|
+
}
|
|
164
|
+
]
|
|
165
|
+
}
|
|
166
|
+
]
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
"title": "UX Guidelines",
|
|
170
|
+
"sections": [
|
|
171
|
+
{
|
|
172
|
+
"type": "list",
|
|
173
|
+
"items": [
|
|
174
|
+
{
|
|
175
|
+
"title": "",
|
|
176
|
+
"content": [
|
|
177
|
+
{
|
|
178
|
+
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4419-247566&embed-host=share"
|
|
179
|
+
}
|
|
180
|
+
]
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
"title": "",
|
|
184
|
+
"content": [
|
|
185
|
+
{
|
|
186
|
+
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4419-247643&embed-host=share"
|
|
187
|
+
}
|
|
188
|
+
]
|
|
189
|
+
}
|
|
190
|
+
],
|
|
191
|
+
"title": "Do’s & Don’ts",
|
|
192
|
+
"description": "markdown:\n**Message Length**\nDo not display long messages in a Toast, keep the Toast message short and focused, yet informative. \nFurther information regarding the phrasing of toast messages can be found in UX Writers - Toast Guidelines."
|
|
193
|
+
}
|
|
194
|
+
]
|
|
195
|
+
}
|
|
196
|
+
]
|
|
197
|
+
}
|
|
72
198
|
}
|