react-native-ui-lib 7.40.1-snapshot.6845 → 7.40.1-snapshot.6853
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 +1 -1
- package/src/components/WheelPicker/wheelPicker.api.json +85 -13
- package/src/components/chipsInput/chipsInput.api.json +41 -5
- package/src/components/drawer/drawer.api.json +112 -19
- package/src/components/image/image.api.json +82 -14
- package/src/components/numberInput/numberInput.api.json +50 -6
- package/src/components/pageControl/pageControl.api.json +43 -5
- package/src/components/pieChart/pieChart.api.json +43 -5
- package/src/components/sortableGridList/sortableGridList.api.json +31 -3
package/package.json
CHANGED
|
@@ -6,16 +6,58 @@
|
|
|
6
6
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/WheelPickerScreen.tsx",
|
|
7
7
|
"images": [],
|
|
8
8
|
"props": [
|
|
9
|
-
{
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
{
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
9
|
+
{
|
|
10
|
+
"name": "initialValue",
|
|
11
|
+
"type": "number | string",
|
|
12
|
+
"description": "Initial value (uncontrolled)"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"name": "items",
|
|
16
|
+
"type": "WheelPickerItemProps[]",
|
|
17
|
+
"description": "Data source for WheelPicker"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"name": "itemHeight",
|
|
21
|
+
"type": "number",
|
|
22
|
+
"description": "Height of each item in the WheelPicker",
|
|
23
|
+
"default": "44"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "numberOfVisibleRows",
|
|
27
|
+
"type": "number",
|
|
28
|
+
"description": "Number of rows visible",
|
|
29
|
+
"default": "5"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"name": "activeTextColor",
|
|
33
|
+
"type": "string",
|
|
34
|
+
"description": "Text color for the focused row"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "inactiveTextColor",
|
|
38
|
+
"type": "string",
|
|
39
|
+
"description": "Text color for other, non-focused rows"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"name": "textStyle",
|
|
43
|
+
"type": "TextStyle",
|
|
44
|
+
"description": "Row text custom style"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "label",
|
|
48
|
+
"type": "string",
|
|
49
|
+
"description": "Additional label to render next to the items text"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"name": "labelStyle",
|
|
53
|
+
"type": "TextStyle",
|
|
54
|
+
"description": "Additional label's style"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"name": "labelProps",
|
|
58
|
+
"type": "TextProps",
|
|
59
|
+
"description": "Additional label's props"
|
|
60
|
+
},
|
|
19
61
|
{
|
|
20
62
|
"name": "onChange",
|
|
21
63
|
"type": "(item: string | number, index: number) => void",
|
|
@@ -33,8 +75,16 @@
|
|
|
33
75
|
"description": "Align the content to center, right ot left",
|
|
34
76
|
"default": "center"
|
|
35
77
|
},
|
|
36
|
-
{
|
|
37
|
-
|
|
78
|
+
{
|
|
79
|
+
"name": "separatorsStyle",
|
|
80
|
+
"type": "ViewStyle",
|
|
81
|
+
"description": "Extra style for the separators"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"name": "testID",
|
|
85
|
+
"type": "string",
|
|
86
|
+
"description": "test identifier"
|
|
87
|
+
},
|
|
38
88
|
{
|
|
39
89
|
"name": "flatListProps",
|
|
40
90
|
"type": "FlatListProps",
|
|
@@ -47,5 +97,27 @@
|
|
|
47
97
|
" initialValue={'yes'$2}",
|
|
48
98
|
" onChange={() => console.log('changed')$3}",
|
|
49
99
|
"/>"
|
|
50
|
-
]
|
|
100
|
+
],
|
|
101
|
+
"docs": {
|
|
102
|
+
"hero": {
|
|
103
|
+
"title": "WheelPicker",
|
|
104
|
+
"description": "A customizable WheelPicker component"
|
|
105
|
+
},
|
|
106
|
+
"tabs": [
|
|
107
|
+
{
|
|
108
|
+
"title": "UX Guidelines",
|
|
109
|
+
"sections": [
|
|
110
|
+
{
|
|
111
|
+
"type": "section",
|
|
112
|
+
"content": [
|
|
113
|
+
{
|
|
114
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=13-134250&embed-host=share",
|
|
115
|
+
"height": 1600
|
|
116
|
+
}
|
|
117
|
+
]
|
|
118
|
+
}
|
|
119
|
+
]
|
|
120
|
+
}
|
|
121
|
+
]
|
|
122
|
+
}
|
|
51
123
|
}
|
|
@@ -2,12 +2,22 @@
|
|
|
2
2
|
"name": "ChipsInput",
|
|
3
3
|
"category": "form",
|
|
4
4
|
"description": "A chips input",
|
|
5
|
-
"extends": [
|
|
6
|
-
|
|
5
|
+
"extends": [
|
|
6
|
+
"form/TextField"
|
|
7
|
+
],
|
|
8
|
+
"modifiers": [
|
|
9
|
+
"margin",
|
|
10
|
+
"color",
|
|
11
|
+
"typography"
|
|
12
|
+
],
|
|
7
13
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ChipsInputScreen.tsx",
|
|
8
14
|
"images": [],
|
|
9
15
|
"props": [
|
|
10
|
-
{
|
|
16
|
+
{
|
|
17
|
+
"name": "chips",
|
|
18
|
+
"type": "ChipProps[]",
|
|
19
|
+
"description": "List of chips to render"
|
|
20
|
+
},
|
|
11
21
|
{
|
|
12
22
|
"name": "defaultChipProps",
|
|
13
23
|
"type": "ChipProps",
|
|
@@ -18,12 +28,38 @@
|
|
|
18
28
|
"type": "(newChips, changeReason, updatedChip) => void",
|
|
19
29
|
"description": "Callback for chips change (adding or removing chip)"
|
|
20
30
|
},
|
|
21
|
-
{
|
|
31
|
+
{
|
|
32
|
+
"name": "maxChips",
|
|
33
|
+
"type": "number",
|
|
34
|
+
"description": "The maximum chips to allow adding"
|
|
35
|
+
}
|
|
22
36
|
],
|
|
23
37
|
"snippet": [
|
|
24
38
|
"<ChipsInput",
|
|
25
39
|
" placeholder={'Placeholder'$1}",
|
|
26
40
|
" chips={[{label: 'Falcon 9'}, {label: 'Enterprise'}, {label: 'Challenger', borderRadius: 0}]$2}",
|
|
27
41
|
"/>"
|
|
28
|
-
]
|
|
42
|
+
],
|
|
43
|
+
"docs": {
|
|
44
|
+
"hero": {
|
|
45
|
+
"title": "ChipsInput",
|
|
46
|
+
"description": "A chips input"
|
|
47
|
+
},
|
|
48
|
+
"tabs": [
|
|
49
|
+
{
|
|
50
|
+
"title": "UX Guidelines",
|
|
51
|
+
"sections": [
|
|
52
|
+
{
|
|
53
|
+
"type": "section",
|
|
54
|
+
"content": [
|
|
55
|
+
{
|
|
56
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=13-114418&embed-host=share",
|
|
57
|
+
"height": 1600
|
|
58
|
+
}
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
]
|
|
64
|
+
}
|
|
29
65
|
}
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
"category": "lists",
|
|
4
4
|
"description": "Drawer Component",
|
|
5
5
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DrawerScreen.tsx",
|
|
6
|
-
"images": [
|
|
6
|
+
"images": [
|
|
7
|
+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Drawer/Drawer.gif?raw=true"
|
|
8
|
+
],
|
|
7
9
|
"props": [
|
|
8
10
|
{
|
|
9
11
|
"name": "rightItems",
|
|
@@ -15,20 +17,53 @@
|
|
|
15
17
|
"type": "ItemProps",
|
|
16
18
|
"description": "The bottom layer's item to appear when opened from the left (a single item)"
|
|
17
19
|
},
|
|
18
|
-
{
|
|
19
|
-
|
|
20
|
+
{
|
|
21
|
+
"name": "bounciness",
|
|
22
|
+
"type": "number",
|
|
23
|
+
"description": "The drawer animation bounciness"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "itemsMinWidth",
|
|
27
|
+
"type": "number",
|
|
28
|
+
"description": "Set a different minimum width"
|
|
29
|
+
},
|
|
20
30
|
{
|
|
21
31
|
"name": "itemsTintColor",
|
|
22
32
|
"type": "string",
|
|
23
33
|
"description": "The color for the text and icon tint of the items",
|
|
24
34
|
"default": "Colors.white"
|
|
25
35
|
},
|
|
26
|
-
{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
36
|
+
{
|
|
37
|
+
"name": "itemsIconSize",
|
|
38
|
+
"type": "number",
|
|
39
|
+
"description": "The items' icon size",
|
|
40
|
+
"default": "24"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"name": "itemsTextStyle",
|
|
44
|
+
"type": "TextStyle",
|
|
45
|
+
"description": "The items' text style"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "useNativeAnimations",
|
|
49
|
+
"type": "boolean",
|
|
50
|
+
"description": "Perform the animation in natively"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"name": "fullSwipeLeft",
|
|
54
|
+
"type": "boolean",
|
|
55
|
+
"description": "Whether to allow a full left swipe"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "fullLeftThreshold",
|
|
59
|
+
"type": "number",
|
|
60
|
+
"description": "Threshold for a left full swipe (0-1)"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"name": "onFullSwipeLeft",
|
|
64
|
+
"type": "() => void",
|
|
65
|
+
"description": "Callback for left item full swipe"
|
|
66
|
+
},
|
|
32
67
|
{
|
|
33
68
|
"name": "onWillFullSwipeLeft",
|
|
34
69
|
"type": "() => void",
|
|
@@ -39,24 +74,82 @@
|
|
|
39
74
|
"type": "() => {rowWidth, leftWidth, dragX, resetItemPosition}",
|
|
40
75
|
"description": "Callback for left item toggle swipe"
|
|
41
76
|
},
|
|
42
|
-
{
|
|
43
|
-
|
|
44
|
-
|
|
77
|
+
{
|
|
78
|
+
"name": "fullSwipeRight",
|
|
79
|
+
"type": "boolean",
|
|
80
|
+
"description": "Whether to allow a full right swipe"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"name": "fullRightThreshold",
|
|
84
|
+
"type": "number",
|
|
85
|
+
"description": "Threshold for a right full swipe (0-1)"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"name": "onFullSwipeRight",
|
|
89
|
+
"type": "() => void",
|
|
90
|
+
"description": "Callback for right item full swipe"
|
|
91
|
+
},
|
|
45
92
|
{
|
|
46
93
|
"name": "onWillFullSwipeRight",
|
|
47
94
|
"type": "() => void",
|
|
48
95
|
"description": "Callback for just before right item full swipe"
|
|
49
96
|
},
|
|
50
|
-
{
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
97
|
+
{
|
|
98
|
+
"name": "disableHaptic",
|
|
99
|
+
"type": "boolean",
|
|
100
|
+
"description": "Whether to disable the haptic"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"name": "onDragStart",
|
|
104
|
+
"type": "() => any",
|
|
105
|
+
"description": "Called when drag gesture starts"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"name": "onSwipeableWillOpen",
|
|
109
|
+
"type": "() => void",
|
|
110
|
+
"description": "Callback for open action"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"name": "onSwipeableWillClose",
|
|
114
|
+
"type": "() => void",
|
|
115
|
+
"description": "Callback for close action"
|
|
116
|
+
},
|
|
54
117
|
{
|
|
55
118
|
"name": "customValue",
|
|
56
119
|
"type": "any",
|
|
57
120
|
"description": "Custom value of any type to pass on to the component and receive back in the action callbacks"
|
|
58
121
|
},
|
|
59
|
-
{
|
|
60
|
-
|
|
61
|
-
|
|
122
|
+
{
|
|
123
|
+
"name": "style",
|
|
124
|
+
"type": "ViewStyle",
|
|
125
|
+
"description": "Component's style"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"name": "testID",
|
|
129
|
+
"type": "string",
|
|
130
|
+
"description": "The test id for e2e tests"
|
|
131
|
+
}
|
|
132
|
+
],
|
|
133
|
+
"docs": {
|
|
134
|
+
"hero": {
|
|
135
|
+
"title": "Drawer",
|
|
136
|
+
"description": "Drawer Component"
|
|
137
|
+
},
|
|
138
|
+
"tabs": [
|
|
139
|
+
{
|
|
140
|
+
"title": "UX Guidelines",
|
|
141
|
+
"sections": [
|
|
142
|
+
{
|
|
143
|
+
"type": "section",
|
|
144
|
+
"content": [
|
|
145
|
+
{
|
|
146
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=5958-379805&embed-host=share",
|
|
147
|
+
"height": 1600
|
|
148
|
+
}
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
]
|
|
152
|
+
}
|
|
153
|
+
]
|
|
154
|
+
}
|
|
62
155
|
}
|
|
@@ -2,10 +2,16 @@
|
|
|
2
2
|
"name": "Image",
|
|
3
3
|
"category": "media",
|
|
4
4
|
"description": "Image wrapper with extra functionality like source transform and assets support",
|
|
5
|
-
"extends": [
|
|
6
|
-
|
|
5
|
+
"extends": [
|
|
6
|
+
"Image"
|
|
7
|
+
],
|
|
8
|
+
"extendsLink": [
|
|
9
|
+
"https://reactnative.dev/docs/image"
|
|
10
|
+
],
|
|
7
11
|
"note": "please note that for SVG support you need to add both `react-native-svg` and `react-native-svg-transformer` and also configure them (see `metro.config.js`)",
|
|
8
|
-
"modifiers": [
|
|
12
|
+
"modifiers": [
|
|
13
|
+
"margin"
|
|
14
|
+
],
|
|
9
15
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ImageScreen.tsx",
|
|
10
16
|
"props": [
|
|
11
17
|
{
|
|
@@ -13,9 +19,21 @@
|
|
|
13
19
|
"type": "(props: any) => ImageSourcePropType",
|
|
14
20
|
"description": "custom source transform handler for manipulating the image source (great for size control)"
|
|
15
21
|
},
|
|
16
|
-
{
|
|
17
|
-
|
|
18
|
-
|
|
22
|
+
{
|
|
23
|
+
"name": "assetName",
|
|
24
|
+
"type": "string",
|
|
25
|
+
"description": "if provided image source will be driven from asset name"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "assetGroup",
|
|
29
|
+
"type": "string",
|
|
30
|
+
"description": "the asset group, default is icons"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"name": "tintColor",
|
|
34
|
+
"type": "string",
|
|
35
|
+
"description": "the asset tint"
|
|
36
|
+
},
|
|
19
37
|
{
|
|
20
38
|
"name": "supportRTL",
|
|
21
39
|
"type": "boolean",
|
|
@@ -26,7 +44,11 @@
|
|
|
26
44
|
"type": "boolean",
|
|
27
45
|
"description": "Show image as a cover, full width, image (according to aspect ratio, default: 16:8)"
|
|
28
46
|
},
|
|
29
|
-
{
|
|
47
|
+
{
|
|
48
|
+
"name": "aspectRatio",
|
|
49
|
+
"type": "number",
|
|
50
|
+
"description": "The aspect ratio for the image"
|
|
51
|
+
},
|
|
30
52
|
{
|
|
31
53
|
"name": "overlayType",
|
|
32
54
|
"type": "VERTICAL | TOP | BOTTOM | SOLID",
|
|
@@ -39,14 +61,60 @@
|
|
|
39
61
|
"description": "OverlayIntensityType",
|
|
40
62
|
"default": "Image.overlayIntensityType.LOW"
|
|
41
63
|
},
|
|
42
|
-
{
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
{
|
|
64
|
+
{
|
|
65
|
+
"name": "overlayColor",
|
|
66
|
+
"type": "string",
|
|
67
|
+
"description": "Pass a custom color for the overlay"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"name": "customOverlayContent",
|
|
71
|
+
"type": "JSX.Element",
|
|
72
|
+
"description": "Render an overlay with custom content"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"name": "errorSource",
|
|
76
|
+
"type": "ImageSourcePropType",
|
|
77
|
+
"description": "Default image source in case of an error"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "imageId",
|
|
81
|
+
"type": "string",
|
|
82
|
+
"description": "An imageId that can be used in sourceTransformer logic"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"name": "recorderTag",
|
|
86
|
+
"type": "'mask' | 'unmask'",
|
|
87
|
+
"description": "Recorder Tag"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "useBackgroundContainer",
|
|
91
|
+
"type": "boolean",
|
|
92
|
+
"description": "Use a container for the Image, this can solve issues on Android when animation needs to be performed on the same view; i.e. animation related crashes on Android."
|
|
93
|
+
}
|
|
48
94
|
],
|
|
49
95
|
"snippet": [
|
|
50
96
|
"<Image width={50} height={50} source={{uri: 'https://images.pexels.com/photos/748837/pexels-photo-748837.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}$1}/>"
|
|
51
|
-
]
|
|
97
|
+
],
|
|
98
|
+
"docs": {
|
|
99
|
+
"hero": {
|
|
100
|
+
"title": "Image",
|
|
101
|
+
"description": "Image wrapper with extra functionality like source transform and assets support"
|
|
102
|
+
},
|
|
103
|
+
"tabs": [
|
|
104
|
+
{
|
|
105
|
+
"title": "UX Guidelines",
|
|
106
|
+
"sections": [
|
|
107
|
+
{
|
|
108
|
+
"type": "section",
|
|
109
|
+
"content": [
|
|
110
|
+
{
|
|
111
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=10088-640358&embed-host=share",
|
|
112
|
+
"height": 1600
|
|
113
|
+
}
|
|
114
|
+
]
|
|
115
|
+
}
|
|
116
|
+
]
|
|
117
|
+
}
|
|
118
|
+
]
|
|
119
|
+
}
|
|
52
120
|
}
|
|
@@ -22,11 +22,31 @@
|
|
|
22
22
|
"description": "Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.",
|
|
23
23
|
"default": "2"
|
|
24
24
|
},
|
|
25
|
-
{
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
{
|
|
26
|
+
"name": "leadingText",
|
|
27
|
+
"type": "string",
|
|
28
|
+
"description": "A leading text"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "leadingTextStyle",
|
|
32
|
+
"type": "TextStyle",
|
|
33
|
+
"description": "The style of the leading text"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "trailingText",
|
|
37
|
+
"type": "string",
|
|
38
|
+
"description": "A trailing text"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"name": "trailingTextStyle",
|
|
42
|
+
"type": "TextStyle",
|
|
43
|
+
"description": "The style of the trailing text"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"name": "containerStyle",
|
|
47
|
+
"type": "ViewStyle",
|
|
48
|
+
"description": "Container style of the whole component"
|
|
49
|
+
},
|
|
30
50
|
{
|
|
31
51
|
"name": "contextMenuHidden",
|
|
32
52
|
"type": "boolean",
|
|
@@ -40,5 +60,29 @@
|
|
|
40
60
|
"description": "Most of TextField's props can be applied, except for ones that are passed directly via named props."
|
|
41
61
|
}
|
|
42
62
|
],
|
|
43
|
-
"snippet": [
|
|
63
|
+
"snippet": [
|
|
64
|
+
"<NumberInput initialValue={1506$1} onChange={onChange$2} placeholder={'Price$3'}/>"
|
|
65
|
+
],
|
|
66
|
+
"docs": {
|
|
67
|
+
"hero": {
|
|
68
|
+
"title": "NumberInput",
|
|
69
|
+
"description": "Number Input to create an input with a formatted number"
|
|
70
|
+
},
|
|
71
|
+
"tabs": [
|
|
72
|
+
{
|
|
73
|
+
"title": "UX Guidelines",
|
|
74
|
+
"sections": [
|
|
75
|
+
{
|
|
76
|
+
"type": "section",
|
|
77
|
+
"content": [
|
|
78
|
+
{
|
|
79
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=8539-460248&embed-host=share",
|
|
80
|
+
"height": 1600
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
]
|
|
87
|
+
}
|
|
44
88
|
}
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
"category": "navigation",
|
|
4
4
|
"description": "Page indicator, typically used in paged scroll-views",
|
|
5
5
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PageControlScreen.tsx",
|
|
6
|
-
"images": [
|
|
6
|
+
"images": [
|
|
7
|
+
"https://user-images.githubusercontent.com/1780255/107114259-2e278d00-686d-11eb-866c-59f3d410d6c3.gif"
|
|
8
|
+
],
|
|
7
9
|
"props": [
|
|
8
10
|
{
|
|
9
11
|
"name": "limitShownPages",
|
|
@@ -15,8 +17,18 @@
|
|
|
15
17
|
"type": "ViewStyle",
|
|
16
18
|
"description": "Additional styles for the top container"
|
|
17
19
|
},
|
|
18
|
-
{
|
|
19
|
-
|
|
20
|
+
{
|
|
21
|
+
"name": "numOfPages",
|
|
22
|
+
"required": true,
|
|
23
|
+
"type": "number",
|
|
24
|
+
"description": "Total number of pages"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "currentPage",
|
|
28
|
+
"required": true,
|
|
29
|
+
"type": "number",
|
|
30
|
+
"description": "Zero-based index of the current page"
|
|
31
|
+
},
|
|
20
32
|
{
|
|
21
33
|
"name": "onPagePress",
|
|
22
34
|
"type": "(index: number) => void",
|
|
@@ -51,9 +63,35 @@
|
|
|
51
63
|
"description": "The space between the siblings page indicators",
|
|
52
64
|
"default": "4"
|
|
53
65
|
},
|
|
54
|
-
{
|
|
66
|
+
{
|
|
67
|
+
"name": "testID",
|
|
68
|
+
"type": "string",
|
|
69
|
+
"description": "Used to identify the pageControl in tests"
|
|
70
|
+
}
|
|
55
71
|
],
|
|
56
72
|
"snippet": [
|
|
57
73
|
"<PageControl numOfPages={5$1} currentPage={0$2}/>"
|
|
58
|
-
]
|
|
74
|
+
],
|
|
75
|
+
"docs": {
|
|
76
|
+
"hero": {
|
|
77
|
+
"title": "PageControl",
|
|
78
|
+
"description": "Page indicator, typically used in paged scroll-views"
|
|
79
|
+
},
|
|
80
|
+
"tabs": [
|
|
81
|
+
{
|
|
82
|
+
"title": "UX Guidelines",
|
|
83
|
+
"sections": [
|
|
84
|
+
{
|
|
85
|
+
"type": "section",
|
|
86
|
+
"content": [
|
|
87
|
+
{
|
|
88
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=22898-649490&embed-host=share",
|
|
89
|
+
"height": 1600
|
|
90
|
+
}
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
]
|
|
96
|
+
}
|
|
59
97
|
}
|
|
@@ -4,12 +4,50 @@
|
|
|
4
4
|
"description": "Pie Chart",
|
|
5
5
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PieChartScreen.tsx",
|
|
6
6
|
"props": [
|
|
7
|
-
{
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
{
|
|
8
|
+
"name": "segments",
|
|
9
|
+
"type": "PieChartSegmentProps[]",
|
|
10
|
+
"description": "Pie chart segments array"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"name": "diameter",
|
|
14
|
+
"type": "number",
|
|
15
|
+
"description": "Pie chart diameter"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"name": "dividerWidth",
|
|
19
|
+
"type": "number",
|
|
20
|
+
"description": "The width of the divider between the segments"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "dividerColor",
|
|
24
|
+
"type": "ColorValue",
|
|
25
|
+
"description": "The color of the divider between the segments"
|
|
26
|
+
}
|
|
11
27
|
],
|
|
12
28
|
"snippet": [
|
|
13
29
|
"<PieChart segments={[{percentage: 50, color: Colors.blue30}, {percentage: 30, color: Colors.red30}, {percentage: 20, color: Colors.green30}]} diameter={144}/>"
|
|
14
|
-
]
|
|
30
|
+
],
|
|
31
|
+
"docs": {
|
|
32
|
+
"hero": {
|
|
33
|
+
"title": "PieChart",
|
|
34
|
+
"description": "Pie Chart"
|
|
35
|
+
},
|
|
36
|
+
"tabs": [
|
|
37
|
+
{
|
|
38
|
+
"title": "UX Guidelines",
|
|
39
|
+
"sections": [
|
|
40
|
+
{
|
|
41
|
+
"type": "section",
|
|
42
|
+
"content": [
|
|
43
|
+
{
|
|
44
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=22898-888932&embed-host=share",
|
|
45
|
+
"height": 1600
|
|
46
|
+
}
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
]
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
}
|
|
15
53
|
}
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
"category": "lists",
|
|
4
4
|
"description": "An sortable grid list (based on GridList component)",
|
|
5
5
|
"note": "This component supports square items only",
|
|
6
|
-
"extends": [
|
|
6
|
+
"extends": [
|
|
7
|
+
"lists/GridList"
|
|
8
|
+
],
|
|
7
9
|
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SortableGridListScreen.tsx",
|
|
8
10
|
"props": [
|
|
9
11
|
{
|
|
@@ -12,7 +14,11 @@
|
|
|
12
14
|
"note": "Do not update 'data' in 'onOrderChange' (i.e. for each order change); only update it when you change the items (i.g. adding and removing an item).",
|
|
13
15
|
"description": "Data of items with an id prop as unique identifier"
|
|
14
16
|
},
|
|
15
|
-
{
|
|
17
|
+
{
|
|
18
|
+
"name": "renderItem",
|
|
19
|
+
"type": "FlatListProps['renderItem']",
|
|
20
|
+
"description": "Custom render item callback"
|
|
21
|
+
},
|
|
16
22
|
{
|
|
17
23
|
"name": "onOrderChange",
|
|
18
24
|
"type": "(newData: T[], newOrder: ItemsOrder) => void",
|
|
@@ -73,5 +79,27 @@
|
|
|
73
79
|
" </View>",
|
|
74
80
|
" );",
|
|
75
81
|
"}"
|
|
76
|
-
]
|
|
82
|
+
],
|
|
83
|
+
"docs": {
|
|
84
|
+
"hero": {
|
|
85
|
+
"title": "SortableGridList",
|
|
86
|
+
"description": "An sortable grid list (based on GridList component)"
|
|
87
|
+
},
|
|
88
|
+
"tabs": [
|
|
89
|
+
{
|
|
90
|
+
"title": "UX Guidelines",
|
|
91
|
+
"sections": [
|
|
92
|
+
{
|
|
93
|
+
"type": "section",
|
|
94
|
+
"content": [
|
|
95
|
+
{
|
|
96
|
+
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=16685-543834&embed-host=share",
|
|
97
|
+
"height": 1600
|
|
98
|
+
}
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
}
|
|
77
105
|
}
|