react-native-ui-lib 7.38.1-snapshot.6360 → 7.38.1-snapshot.6367
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
|
@@ -8,8 +8,16 @@
|
|
|
8
8
|
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPalette/ColorPalette.gif?raw=true"
|
|
9
9
|
],
|
|
10
10
|
"props": [
|
|
11
|
-
{
|
|
12
|
-
|
|
11
|
+
{
|
|
12
|
+
"name": "colors",
|
|
13
|
+
"type": "string[]",
|
|
14
|
+
"description": "Array of colors to render in the palette"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"name": "value",
|
|
18
|
+
"type": "string",
|
|
19
|
+
"description": "The value of the selected swatch"
|
|
20
|
+
},
|
|
13
21
|
{
|
|
14
22
|
"name": "usePagination",
|
|
15
23
|
"type": "boolean",
|
|
@@ -22,7 +30,12 @@
|
|
|
22
30
|
"description": "Whether the colors pagination scrolls in a loop",
|
|
23
31
|
"default": "true"
|
|
24
32
|
},
|
|
25
|
-
{
|
|
33
|
+
{
|
|
34
|
+
"name": "numberOfRows",
|
|
35
|
+
"type": "number",
|
|
36
|
+
"description": "The number of color rows from 2 to 5",
|
|
37
|
+
"default": "3"
|
|
38
|
+
},
|
|
26
39
|
{
|
|
27
40
|
"name": "animatedIndex",
|
|
28
41
|
"type": "number",
|
|
@@ -34,12 +47,36 @@
|
|
|
34
47
|
"type": "(value: string, colorInfo: ColorInfo) => void",
|
|
35
48
|
"description": "Invoked once when value changes by selecting one of the swatches in the palette"
|
|
36
49
|
},
|
|
37
|
-
{
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
{
|
|
50
|
+
{
|
|
51
|
+
"name": "swatchStyle",
|
|
52
|
+
"type": "ViewStyle",
|
|
53
|
+
"description": "Style to pass all the ColorSwatches in the palette"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"name": "containerWidth",
|
|
57
|
+
"type": "number",
|
|
58
|
+
"description": "The container margins"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"name": "containerStyle",
|
|
62
|
+
"type": "ViewStyle",
|
|
63
|
+
"description": "Component's container style"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"name": "style",
|
|
67
|
+
"type": "ViewStyle",
|
|
68
|
+
"description": "Component's style"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"name": "testID",
|
|
72
|
+
"type": "string",
|
|
73
|
+
"description": "The test id for e2e tests"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"name": "backgroundColor",
|
|
77
|
+
"type": "string",
|
|
78
|
+
"description": "The ColorPalette's background color"
|
|
79
|
+
}
|
|
43
80
|
],
|
|
44
81
|
"snippet": [
|
|
45
82
|
"<ColorPalette",
|
|
@@ -47,5 +84,61 @@
|
|
|
47
84
|
" value={selectedColor$2}",
|
|
48
85
|
" onValueChange={() => console.log('value changed')$3}",
|
|
49
86
|
"/>"
|
|
50
|
-
]
|
|
87
|
+
],
|
|
88
|
+
"docs": {
|
|
89
|
+
"hero": {
|
|
90
|
+
"title": "ColorPalette",
|
|
91
|
+
"description": "markdown:Our Color Palette is basically an arrangement of Color Swatches representing various colors and styles. \nIn ColorPalette only a single color swatch can be selected.",
|
|
92
|
+
"type": "hero",
|
|
93
|
+
"layout": "horizontal",
|
|
94
|
+
"content": [
|
|
95
|
+
{
|
|
96
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_cover.png"
|
|
97
|
+
}
|
|
98
|
+
]
|
|
99
|
+
},
|
|
100
|
+
"tabs": [
|
|
101
|
+
{
|
|
102
|
+
"title": "Overview",
|
|
103
|
+
"sections": [
|
|
104
|
+
{
|
|
105
|
+
"type": "list",
|
|
106
|
+
"items": [
|
|
107
|
+
{
|
|
108
|
+
"title": "Color Palette large (multiple rows):",
|
|
109
|
+
"description": "markdown:In some cases, product or flow will benefit from a bigger palette. \nThis type of palette is navigated with pagination. \nMinimum number of rows is 2 and maximum is 5. \nThe palette adapts to the screen width, with a minimum spacing of S5 between colors swatches.",
|
|
110
|
+
"content": [
|
|
111
|
+
{
|
|
112
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_types_large.png"
|
|
113
|
+
}
|
|
114
|
+
]
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"title": "Color Palette small (single row):",
|
|
118
|
+
"description": "markdown:In screens with a limited space a smaller palette can be used. \nIf the amount of color swatches is larger than the screen width, the Color Palette becomes scrollable. \nTapping the “+” button will open the Color Picker dialog, allowing user to create a custom color. \nWhen Color Palette is scrollable, “add” button will be sticky to screen left. \nAfter the custom color is created, it’s added as a Color Swatch to the right of the “add” button, and selected as the main color. \nIf the selected color is outside of the view port when screen is loaded, the palette will be scrolled to the primary swatch. \nTransparent swatches are fixed to the left of other (regular) Color Swatches.",
|
|
119
|
+
"content": [
|
|
120
|
+
{
|
|
121
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_types_small.png"
|
|
122
|
+
}
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
],
|
|
126
|
+
"layout": "horizontal",
|
|
127
|
+
"title": "Palette Types",
|
|
128
|
+
"description": "Color Palette can be a single row of Color Swatches or have multiple rows:"
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"type": "section",
|
|
132
|
+
"layout": "horizontal",
|
|
133
|
+
"content": [
|
|
134
|
+
{
|
|
135
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_types_spec.png"
|
|
136
|
+
}
|
|
137
|
+
],
|
|
138
|
+
"title": "Spec"
|
|
139
|
+
}
|
|
140
|
+
]
|
|
141
|
+
}
|
|
142
|
+
]
|
|
143
|
+
}
|
|
51
144
|
}
|
|
@@ -4,7 +4,11 @@
|
|
|
4
4
|
"description": "A single grid view/list item component",
|
|
5
5
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx",
|
|
6
6
|
"props": [
|
|
7
|
-
{
|
|
7
|
+
{
|
|
8
|
+
"name": "imageProps",
|
|
9
|
+
"type": "ImageProps",
|
|
10
|
+
"description": "Image props object for rendering an image item"
|
|
11
|
+
},
|
|
8
12
|
{
|
|
9
13
|
"name": "containerProps",
|
|
10
14
|
"type": "TouchableOpacityProps | ViewProps",
|
|
@@ -16,19 +20,71 @@
|
|
|
16
20
|
"description": "Custom GridListItem to be rendered in the GridView",
|
|
17
21
|
"required": true
|
|
18
22
|
},
|
|
19
|
-
{
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
{
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
{
|
|
30
|
-
|
|
31
|
-
|
|
23
|
+
{
|
|
24
|
+
"name": "itemSize",
|
|
25
|
+
"type": "number | ImageSize",
|
|
26
|
+
"description": "The item size"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"name": "title",
|
|
30
|
+
"type": "string | React.ReactElement",
|
|
31
|
+
"description": "Title content text"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "titleTypography",
|
|
35
|
+
"type": "string",
|
|
36
|
+
"description": "Title content typography"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"name": "titleColor",
|
|
40
|
+
"type": "string",
|
|
41
|
+
"description": "Title content color"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "titleLines",
|
|
45
|
+
"type": "number",
|
|
46
|
+
"description": "Title content number of lines"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"name": "subtitle",
|
|
50
|
+
"type": "string | React.ReactElement",
|
|
51
|
+
"description": "Subtitle content text"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"name": "subtitleTypography",
|
|
55
|
+
"type": "string",
|
|
56
|
+
"description": "Subtitle content typography"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"name": "subtitleColor",
|
|
60
|
+
"type": "string",
|
|
61
|
+
"description": "Subtitle content color"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"name": "subtitleLines",
|
|
65
|
+
"type": "number",
|
|
66
|
+
"description": "Subtitle content number of lines"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"name": "description",
|
|
70
|
+
"type": "string | React.ReactElement",
|
|
71
|
+
"description": "Description content text"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"name": "descriptionTypography",
|
|
75
|
+
"type": "string",
|
|
76
|
+
"description": "Description content typography"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": "descriptionColor",
|
|
80
|
+
"type": "string",
|
|
81
|
+
"description": "Description content color"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"name": "descriptionLines",
|
|
85
|
+
"type": "number",
|
|
86
|
+
"description": "Description content number of lines"
|
|
87
|
+
},
|
|
32
88
|
{
|
|
33
89
|
"name": "overlayText",
|
|
34
90
|
"type": "boolean",
|
|
@@ -39,23 +95,103 @@
|
|
|
39
95
|
"type": "ViewStyle",
|
|
40
96
|
"description": "Custom container styling for inline text"
|
|
41
97
|
},
|
|
42
|
-
{
|
|
98
|
+
{
|
|
99
|
+
"name": "alignToStart",
|
|
100
|
+
"type": "boolean",
|
|
101
|
+
"description": "Should content be align to start",
|
|
102
|
+
"default": "center"
|
|
103
|
+
},
|
|
43
104
|
{
|
|
44
105
|
"name": "horizontalAlignment",
|
|
45
106
|
"type": "HorizontalAlignment",
|
|
46
107
|
"description": "Content horizontal alignment",
|
|
47
108
|
"default": "center"
|
|
48
109
|
},
|
|
49
|
-
{
|
|
50
|
-
|
|
110
|
+
{
|
|
111
|
+
"name": "containerStyle",
|
|
112
|
+
"type": "ViewStyle",
|
|
113
|
+
"description": "Custom container style"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"name": "onPress",
|
|
117
|
+
"type": "TouchableOpacityProps['onPress']",
|
|
118
|
+
"description": "The item's action handler"
|
|
119
|
+
},
|
|
51
120
|
{
|
|
52
121
|
"name": "renderOverlay",
|
|
53
122
|
"type": "() => React.ReactElement",
|
|
54
123
|
"description": "Renders an overlay on top of the image"
|
|
55
124
|
},
|
|
56
|
-
{
|
|
125
|
+
{
|
|
126
|
+
"name": "testID",
|
|
127
|
+
"type": "string",
|
|
128
|
+
"description": "Test ID for component"
|
|
129
|
+
}
|
|
57
130
|
],
|
|
58
131
|
"snippet": [
|
|
59
132
|
"<GridListItem key={index$1} title={'Title'$2} subtitle={'Subtitle'$3} description={'Description goes here'$4}/>"
|
|
60
|
-
]
|
|
133
|
+
],
|
|
134
|
+
"docs": {
|
|
135
|
+
"hero": {
|
|
136
|
+
"title": "GridListItem",
|
|
137
|
+
"description": "Grid list items represent individual items in a grid view.\nEach item can display optional text below or on top the image",
|
|
138
|
+
"type": "hero",
|
|
139
|
+
"layout": "horizontal",
|
|
140
|
+
"content": [
|
|
141
|
+
{
|
|
142
|
+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridListItem/gridListItem_cover.png"
|
|
143
|
+
}
|
|
144
|
+
]
|
|
145
|
+
},
|
|
146
|
+
"tabs": [
|
|
147
|
+
{
|
|
148
|
+
"title": "Overview",
|
|
149
|
+
"sections": [
|
|
150
|
+
{
|
|
151
|
+
"type": "table",
|
|
152
|
+
"columns": [
|
|
153
|
+
"Property",
|
|
154
|
+
"Preview"
|
|
155
|
+
],
|
|
156
|
+
"items": [
|
|
157
|
+
{
|
|
158
|
+
"title": "Media Item",
|
|
159
|
+
"content": [
|
|
160
|
+
{
|
|
161
|
+
"props": {
|
|
162
|
+
"itemSize": 124,
|
|
163
|
+
"title": "Title",
|
|
164
|
+
"subtitle": "Subtitle"
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
]
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"title": "Avatar",
|
|
171
|
+
"content": [
|
|
172
|
+
{
|
|
173
|
+
"props": {
|
|
174
|
+
"itemSize": 124,
|
|
175
|
+
"title": "Title",
|
|
176
|
+
"subtitle": "Subtitle",
|
|
177
|
+
"avatar": {
|
|
178
|
+
"source": {
|
|
179
|
+
"uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/avatar_1.jpg"
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
]
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
"title": "Custom component",
|
|
188
|
+
"description": "(renderCustomItem)"
|
|
189
|
+
}
|
|
190
|
+
],
|
|
191
|
+
"title": "Media Types"
|
|
192
|
+
}
|
|
193
|
+
]
|
|
194
|
+
}
|
|
195
|
+
]
|
|
196
|
+
}
|
|
61
197
|
}
|