react-native-ui-lib 7.40.1-snapshot.6844 → 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/src/incubator/calendar/Agenda.js +25 -13
- package/src/incubator/calendar/Header.js +12 -2
- package/src/incubator/calendar/index.js +15 -16
- package/src/incubator/calendar/types.d.ts +0 -1
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
|
}
|
|
@@ -1,21 +1,19 @@
|
|
|
1
|
-
import React, { useContext, useCallback, useRef } from 'react';
|
|
1
|
+
import React, { useContext, useCallback, useRef, useState } from 'react';
|
|
2
2
|
import { ActivityIndicator, StyleSheet } from 'react-native';
|
|
3
3
|
import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
|
|
4
4
|
import { FlashListPackage } from "../../optionalDependencies";
|
|
5
5
|
import { BorderRadiuses, Colors } from "../../style";
|
|
6
|
+
import { useDidUpdate } from "../../hooks";
|
|
6
7
|
import View from "../../components/view";
|
|
7
8
|
import Text from "../../components/text";
|
|
8
9
|
import { isSameDay, isSameMonth } from "./helpers/DateUtils";
|
|
9
10
|
import { UpdateSource } from "./types";
|
|
10
11
|
import CalendarContext from "./CalendarContext";
|
|
11
12
|
const FlashList = FlashListPackage?.FlashList;
|
|
12
|
-
|
|
13
|
-
// TODO: Fix initial scrolling
|
|
14
13
|
function Agenda(props) {
|
|
15
14
|
const {
|
|
16
15
|
renderEvent,
|
|
17
16
|
renderHeader,
|
|
18
|
-
itemHeight = 50,
|
|
19
17
|
onEndReached,
|
|
20
18
|
showLoader
|
|
21
19
|
} = props;
|
|
@@ -28,18 +26,27 @@ function Agenda(props) {
|
|
|
28
26
|
const flashList = useRef(null);
|
|
29
27
|
const closestSectionHeader = useSharedValue(null);
|
|
30
28
|
const scrolledByUser = useSharedValue(false);
|
|
29
|
+
const [stickyHeaderIndices, setStickyHeaderIndices] = useState([]);
|
|
30
|
+
const lastDateBeforeLoadingNewEvents = useSharedValue(selectedDate.value);
|
|
31
31
|
|
|
32
32
|
/* const keyExtractor = useCallback((item: InternalEvent) => {
|
|
33
33
|
return item.type === 'Event' ? item.id : item.header;
|
|
34
34
|
}, []); */
|
|
35
35
|
|
|
36
|
+
useDidUpdate(() => {
|
|
37
|
+
const result = findClosestDateAfter(lastDateBeforeLoadingNewEvents.value);
|
|
38
|
+
if (result?.index) {
|
|
39
|
+
setTimeout(() => scrollToIndex(result?.index, false), 200);
|
|
40
|
+
}
|
|
41
|
+
const headerIndices = data.map((e, index) => e.type === 'Header' ? index : undefined).filter(i => i !== undefined);
|
|
42
|
+
// @ts-expect-error
|
|
43
|
+
setStickyHeaderIndices(headerIndices);
|
|
44
|
+
}, [data]);
|
|
36
45
|
const _renderEvent = useCallback(eventItem => {
|
|
37
46
|
if (renderEvent) {
|
|
38
|
-
return <View
|
|
39
|
-
{renderEvent(eventItem)}
|
|
40
|
-
</View>;
|
|
47
|
+
return <View style={styles.eventContainer}>{renderEvent(eventItem)}</View>;
|
|
41
48
|
}
|
|
42
|
-
return <View marginV-1 marginH-10 paddingH-10
|
|
49
|
+
return <View marginV-1 marginH-10 paddingH-10 centerV style={styles.event}>
|
|
43
50
|
<Text>
|
|
44
51
|
Item for
|
|
45
52
|
{new Date(eventItem.start).toLocaleString('en-GB', {
|
|
@@ -56,15 +63,15 @@ function Agenda(props) {
|
|
|
56
63
|
})}
|
|
57
64
|
</Text>
|
|
58
65
|
</View>;
|
|
59
|
-
}, [renderEvent
|
|
66
|
+
}, [renderEvent]);
|
|
60
67
|
const _renderHeader = useCallback(headerItem => {
|
|
61
68
|
if (renderHeader) {
|
|
62
|
-
return <View
|
|
69
|
+
return <View>{renderHeader(headerItem)}</View>;
|
|
63
70
|
}
|
|
64
|
-
return <View bottom marginB-5 marginH-20
|
|
71
|
+
return <View bg-$backgroundDefault bottom marginB-5 marginH-20>
|
|
65
72
|
<Text>{headerItem.header}</Text>
|
|
66
73
|
</View>;
|
|
67
|
-
}, [renderHeader
|
|
74
|
+
}, [renderHeader]);
|
|
68
75
|
const renderItem = useCallback(({
|
|
69
76
|
item
|
|
70
77
|
}) => {
|
|
@@ -116,6 +123,10 @@ function Agenda(props) {
|
|
|
116
123
|
const _isSameMonth = isSameMonth(selected, previous);
|
|
117
124
|
runOnJS(scrollToIndex)(index, _isSameMonth);
|
|
118
125
|
}
|
|
126
|
+
} else {
|
|
127
|
+
// Note: We got here because we are missing future agenda events to scroll to.
|
|
128
|
+
// therefor we should expect and new events data load
|
|
129
|
+
lastDateBeforeLoadingNewEvents.value = selectedDate.value;
|
|
119
130
|
}
|
|
120
131
|
}
|
|
121
132
|
}
|
|
@@ -148,6 +159,7 @@ function Agenda(props) {
|
|
|
148
159
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
149
160
|
}, []);
|
|
150
161
|
const _onEndReached = useCallback(() => {
|
|
162
|
+
lastDateBeforeLoadingNewEvents.value = selectedDate.value;
|
|
151
163
|
onEndReached?.(selectedDate.value);
|
|
152
164
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
153
165
|
}, [onEndReached]);
|
|
@@ -155,7 +167,7 @@ function Agenda(props) {
|
|
|
155
167
|
<FlashList ref={flashList} estimatedItemSize={52} data={data}
|
|
156
168
|
// TODO: Not sure we need key extractor in flash list
|
|
157
169
|
// keyExtractor={keyExtractor}
|
|
158
|
-
renderItem={renderItem} getItemType={getItemType} onViewableItemsChanged={onViewableItemsChanged} onMomentumScrollBegin={onMomentumScrollBegin} onScrollBeginDrag={onScrollBeginDrag} initialScrollIndex={findClosestDateAfter(selectedDate.value)?.index ?? 0} onEndReached={_onEndReached} />
|
|
170
|
+
renderItem={renderItem} getItemType={getItemType} stickyHeaderIndices={stickyHeaderIndices} onViewableItemsChanged={onViewableItemsChanged} onMomentumScrollBegin={onMomentumScrollBegin} onScrollBeginDrag={onScrollBeginDrag} initialScrollIndex={findClosestDateAfter(selectedDate.value)?.index ?? 0} onEndReached={_onEndReached} />
|
|
159
171
|
{showLoader && <View absF center style={{
|
|
160
172
|
backgroundColor: Colors.rgba(Colors.grey10, 0.2)
|
|
161
173
|
}}>
|
|
@@ -9,6 +9,16 @@ import { getDateObject, getMonthForIndex, addMonths } from "./helpers/DateUtils"
|
|
|
9
9
|
import { DayNamesFormat, UpdateSource } from "./types";
|
|
10
10
|
import CalendarContext from "./CalendarContext";
|
|
11
11
|
import WeekDaysNames from "./WeekDaysNames";
|
|
12
|
+
|
|
13
|
+
// Note: this fixes the updates on the header month title
|
|
14
|
+
Reanimated.addWhitelistedNativeProps({
|
|
15
|
+
text: true
|
|
16
|
+
});
|
|
17
|
+
const ARROWS_THROTTLE_TIME = 300;
|
|
18
|
+
const ARROWS_THROTTLE_OPTIONS = {
|
|
19
|
+
leading: true,
|
|
20
|
+
trailing: false
|
|
21
|
+
};
|
|
12
22
|
const WEEK_NUMBER_WIDTH = 32;
|
|
13
23
|
const ARROW_NEXT = require("./assets/arrowNext.png");
|
|
14
24
|
const ARROW_BACK = require("./assets/arrowBack.png");
|
|
@@ -31,10 +41,10 @@ const Header = props => {
|
|
|
31
41
|
}, []);
|
|
32
42
|
const onLeftArrowPress = useCallback(throttle(() => {
|
|
33
43
|
setDate(getNewDate(-1), UpdateSource.MONTH_ARROW);
|
|
34
|
-
},
|
|
44
|
+
}, ARROWS_THROTTLE_TIME, ARROWS_THROTTLE_OPTIONS), [setDate, getNewDate]);
|
|
35
45
|
const onRightArrowPress = useCallback(throttle(() => {
|
|
36
46
|
setDate(getNewDate(1), UpdateSource.MONTH_ARROW);
|
|
37
|
-
},
|
|
47
|
+
}, ARROWS_THROTTLE_TIME, ARROWS_THROTTLE_OPTIONS), [setDate, getNewDate]);
|
|
38
48
|
const getTitle = useCallback(date => {
|
|
39
49
|
'worklet';
|
|
40
50
|
|
|
@@ -15,12 +15,11 @@ import { useDidUpdate } from "../../hooks";
|
|
|
15
15
|
const FlashList = FlashListPackage?.FlashList;
|
|
16
16
|
const VIEWABILITY_CONFIG = {
|
|
17
17
|
itemVisiblePercentThreshold: 95,
|
|
18
|
-
minimumViewTime:
|
|
18
|
+
minimumViewTime: 1000
|
|
19
19
|
};
|
|
20
|
-
const YEARS_RANGE =
|
|
20
|
+
const YEARS_RANGE = 5;
|
|
21
21
|
const PAGE_RELOAD_THRESHOLD = 3;
|
|
22
|
-
const NOW = Date.
|
|
23
|
-
|
|
22
|
+
const NOW = new Date().setHours(0, 0, 0, 0);
|
|
24
23
|
function Calendar(props) {
|
|
25
24
|
const {
|
|
26
25
|
data,
|
|
@@ -31,20 +30,20 @@ function Calendar(props) {
|
|
|
31
30
|
staticHeader = false,
|
|
32
31
|
showExtraDays = true
|
|
33
32
|
} = props;
|
|
34
|
-
const [
|
|
33
|
+
const [monthItems] = useState(() => generateMonthItems(initialDate, YEARS_RANGE, YEARS_RANGE));
|
|
35
34
|
const getItemIndex = useCallback(date => {
|
|
36
35
|
'worklet';
|
|
37
36
|
|
|
38
37
|
const dateObject = getDateObject(date);
|
|
39
|
-
for (let i = 0; i <
|
|
40
|
-
if (
|
|
38
|
+
for (let i = 0; i < monthItems.length; i++) {
|
|
39
|
+
if (monthItems[i].month === dateObject.month && monthItems[i].year === dateObject.year) {
|
|
41
40
|
return i;
|
|
42
41
|
}
|
|
43
42
|
}
|
|
44
43
|
return -1;
|
|
45
|
-
}, [
|
|
44
|
+
}, [monthItems]);
|
|
46
45
|
const flashListRef = useRef();
|
|
47
|
-
const current = useSharedValue(initialDate);
|
|
46
|
+
const current = useSharedValue(new Date(initialDate).setHours(0, 0, 0, 0));
|
|
48
47
|
const initialMonthIndex = useRef(getItemIndex(current.value));
|
|
49
48
|
const lastUpdateSource = useSharedValue(UpdateSource.INIT);
|
|
50
49
|
const processedData = useMemo(() => addHeaders(data), [data]);
|
|
@@ -74,7 +73,7 @@ function Calendar(props) {
|
|
|
74
73
|
console.log('Update items');
|
|
75
74
|
const index = getItemIndex(current.value);
|
|
76
75
|
scrollToIndex(index);
|
|
77
|
-
}, [
|
|
76
|
+
}, [monthItems, getItemIndex]);
|
|
78
77
|
const setHeaderHeight = useCallback(height => {
|
|
79
78
|
headerHeight.value = height;
|
|
80
79
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -116,21 +115,21 @@ function Calendar(props) {
|
|
|
116
115
|
// const newDate = addYears(current.value, prepend ? -1 : 1);
|
|
117
116
|
// const newItems = generateMonthItems(newDate, pastRange, futureRange);
|
|
118
117
|
// const newArray = mergeArrays(prepend, items, newItems);
|
|
119
|
-
//
|
|
118
|
+
// setMonthItems(newArray);
|
|
120
119
|
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
121
|
-
}, [
|
|
120
|
+
}, [monthItems]);
|
|
122
121
|
const shouldAddPages = useCallback(index => {
|
|
123
122
|
'worklet';
|
|
124
123
|
|
|
125
|
-
return index !== -1 && (index < PAGE_RELOAD_THRESHOLD || index >
|
|
124
|
+
return index !== -1 && (index < PAGE_RELOAD_THRESHOLD || index > monthItems.length - PAGE_RELOAD_THRESHOLD);
|
|
126
125
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
127
|
-
}, [
|
|
126
|
+
}, [monthItems]);
|
|
128
127
|
useAnimatedReaction(() => {
|
|
129
128
|
return current.value;
|
|
130
129
|
}, (selected, previous) => {
|
|
131
130
|
const index = getItemIndex(selected);
|
|
132
131
|
if (shouldAddPages(index)) {
|
|
133
|
-
console.log('Add new pages: ', index,
|
|
132
|
+
console.log('Add new pages: ', index, monthItems.length);
|
|
134
133
|
runOnJS(addPages)(/* index */);
|
|
135
134
|
} else if (lastUpdateSource.value !== UpdateSource.MONTH_SCROLL) {
|
|
136
135
|
if (previous && !isSameMonth(selected, previous)) {
|
|
@@ -176,7 +175,7 @@ function Calendar(props) {
|
|
|
176
175
|
}, []);
|
|
177
176
|
return <CalendarContext.Provider value={contextValue}>
|
|
178
177
|
{staticHeader && <Header />}
|
|
179
|
-
<FlashList ref={flashListRef} estimatedItemSize={Constants.screenWidth} data={
|
|
178
|
+
<FlashList ref={flashListRef} estimatedItemSize={Constants.screenWidth} data={monthItems} initialScrollIndex={initialMonthIndex.current} estimatedFirstItemOffset={0} renderItem={renderCalendarItem} horizontal pagingEnabled showsHorizontalScrollIndicator={false}
|
|
180
179
|
// TODO: Consider moving this shared logic with Agenda to a hook
|
|
181
180
|
onViewableItemsChanged={onViewableItemsChanged} viewabilityConfig={VIEWABILITY_CONFIG} onMomentumScrollBegin={onMomentumScrollBegin} onScrollBeginDrag={onScrollBeginDrag} />
|
|
182
181
|
{children}
|
|
@@ -113,7 +113,6 @@ export interface CalendarProps {
|
|
|
113
113
|
export interface AgendaProps {
|
|
114
114
|
renderEvent?: (event: Event) => React.ReactElement | null;
|
|
115
115
|
renderHeader?: (header: DateSectionHeader) => React.ReactElement | null;
|
|
116
|
-
itemHeight?: number;
|
|
117
116
|
showLoader?: boolean;
|
|
118
117
|
onEndReached?: (date: number) => void;
|
|
119
118
|
}
|