@draftbit/core 46.9.1-fe76aa.2 → 46.9.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.
Files changed (215) hide show
  1. package/lib/commonjs/components/Accordion/AccordionItem.js +4 -23
  2. package/lib/commonjs/components/DeprecatedFAB.js +3 -21
  3. package/lib/commonjs/components/Justification.js +1 -5
  4. package/lib/commonjs/components/Picker/Picker.js +13 -3
  5. package/lib/commonjs/components/ResizeMode.js +1 -5
  6. package/lib/commonjs/mappings/ActionSheet.js +1 -1
  7. package/lib/commonjs/mappings/ActionSheetCancel.js +1 -1
  8. package/lib/commonjs/mappings/ActionSheetItem.js +1 -1
  9. package/lib/commonjs/mappings/MapCallout.js +1 -1
  10. package/lib/commonjs/mappings/MapMarker.js +1 -1
  11. package/lib/module/components/Justification.js +0 -1
  12. package/lib/module/components/Picker/Picker.js +13 -3
  13. package/lib/module/components/ResizeMode.js +0 -1
  14. package/lib/module/mappings/ActionSheet.js +1 -1
  15. package/lib/module/mappings/ActionSheetCancel.js +1 -1
  16. package/lib/module/mappings/ActionSheetItem.js +1 -1
  17. package/lib/module/mappings/MapCallout.js +2 -2
  18. package/lib/module/mappings/MapMarker.js +2 -2
  19. package/lib/typescript/src/components/Picker/Picker.d.ts.map +1 -1
  20. package/lib/typescript/src/mappings/ActionSheet.d.ts.map +1 -1
  21. package/lib/typescript/src/mappings/ActionSheetCancel.d.ts.map +1 -1
  22. package/lib/typescript/src/mappings/ActionSheetItem.d.ts.map +1 -1
  23. package/lib/typescript/src/mappings/MapCallout.d.ts.map +1 -1
  24. package/lib/typescript/src/mappings/MapMarker.d.ts.map +1 -1
  25. package/package.json +3 -3
  26. package/src/components/Picker/Picker.tsx +12 -3
  27. package/src/mappings/ActionSheet.ts +1 -4
  28. package/src/mappings/ActionSheetCancel.ts +1 -4
  29. package/src/mappings/ActionSheetItem.ts +1 -4
  30. package/src/mappings/MapCallout.ts +2 -6
  31. package/src/mappings/MapMarker.ts +2 -6
  32. package/src/Provider.js +0 -9
  33. package/src/components/Accordion/AccordionGroup.js +0 -44
  34. package/src/components/Accordion/AccordionItem.js +0 -32
  35. package/src/components/Accordion/index.js +0 -2
  36. package/src/components/ActionSheet/ActionSheet.js +0 -45
  37. package/src/components/ActionSheet/ActionSheetCancel.js +0 -6
  38. package/src/components/ActionSheet/ActionSheetItem.js +0 -30
  39. package/src/components/ActionSheet/index.js +0 -3
  40. package/src/components/AnimatedCircularProgress.js +0 -43
  41. package/src/components/AspectRatio.js +0 -18
  42. package/src/components/AvatarEdit.js +0 -30
  43. package/src/components/Banner.js +0 -109
  44. package/src/components/Button.js +0 -114
  45. package/src/components/Card.js +0 -57
  46. package/src/components/Checkbox/Checkbox.js +0 -62
  47. package/src/components/Checkbox/CheckboxGroup.js +0 -21
  48. package/src/components/Checkbox/CheckboxGroupRow.js +0 -76
  49. package/src/components/Checkbox/CheckboxRow.js +0 -77
  50. package/src/components/Checkbox/context.js +0 -14
  51. package/src/components/Checkbox/index.js +0 -3
  52. package/src/components/CircleImage.js +0 -8
  53. package/src/components/CircularProgress.js +0 -81
  54. package/src/components/Config.js +0 -64
  55. package/src/components/Container.js +0 -43
  56. package/src/components/DatePicker/DatePicker.js +0 -382
  57. package/src/components/DatePicker/DatePickerComponent.js +0 -13
  58. package/src/components/DatePicker/DatePickerComponent.web.js +0 -30
  59. package/src/components/DatePicker/DatePickerComponentType.js +0 -1
  60. package/src/components/DeckSwiper/DeckSwiper.js +0 -65
  61. package/src/components/DeckSwiper/DeckSwiperCard.js +0 -21
  62. package/src/components/DeckSwiper/index.js +0 -2
  63. package/src/components/DeprecatedButton.js +0 -83
  64. package/src/components/DeprecatedCardWrapper.js +0 -18
  65. package/src/components/DeprecatedFAB.js +0 -114
  66. package/src/components/Divider.js +0 -13
  67. package/src/components/Elevation.js +0 -20
  68. package/src/components/FAB.js +0 -46
  69. package/src/components/FieldSearchBarFull.js +0 -53
  70. package/src/components/FormRow.js +0 -19
  71. package/src/components/IconButton.js +0 -35
  72. package/src/components/Image.js +0 -47
  73. package/src/components/Justification.js +0 -1
  74. package/src/components/Layout.js +0 -50
  75. package/src/components/Markdown.js +0 -10
  76. package/src/components/NumberInput.js +0 -49
  77. package/src/components/Picker/Picker.js +0 -266
  78. package/src/components/Picker/PickerComponent.android.js +0 -69
  79. package/src/components/Picker/PickerComponent.ios.js +0 -79
  80. package/src/components/Picker/PickerComponent.web.js +0 -70
  81. package/src/components/Picker/PickerTypes.js +0 -1
  82. package/src/components/Portal/Portal.js +0 -35
  83. package/src/components/Portal/PortalConsumer.js +0 -27
  84. package/src/components/Portal/PortalHost.js +0 -107
  85. package/src/components/Portal/PortalManager.js +0 -32
  86. package/src/components/Pressable.js +0 -12
  87. package/src/components/ProgressBar.js +0 -118
  88. package/src/components/ProgressCircle.js +0 -13
  89. package/src/components/ProgressIndicator.js +0 -27
  90. package/src/components/RadioButton/RadioButton.js +0 -17
  91. package/src/components/RadioButton/RadioButtonFieldGroup.js +0 -17
  92. package/src/components/RadioButton/RadioButtonGroup.js +0 -43
  93. package/src/components/RadioButton/RadioButtonRow.js +0 -76
  94. package/src/components/RadioButton/context.js +0 -14
  95. package/src/components/RadioButton/index.js +0 -4
  96. package/src/components/ResizeMode.js +0 -1
  97. package/src/components/Row.js +0 -48
  98. package/src/components/RowBodyIcon.js +0 -8
  99. package/src/components/RowHeadlineImageCaption.js +0 -12
  100. package/src/components/RowHeadlineImageIcon.js +0 -14
  101. package/src/components/SVG.js +0 -13
  102. package/src/components/ScreenContainer.js +0 -35
  103. package/src/components/Shadow.js +0 -16
  104. package/src/components/Slider.js +0 -63
  105. package/src/components/StarRating.js +0 -50
  106. package/src/components/StepIndicator.js +0 -346
  107. package/src/components/Stepper.js +0 -41
  108. package/src/components/Surface.js +0 -32
  109. package/src/components/Swiper/Swiper.js +0 -29
  110. package/src/components/Swiper/SwiperItem.js +0 -9
  111. package/src/components/Swiper/index.js +0 -2
  112. package/src/components/Switch.js +0 -56
  113. package/src/components/TabView/TabView.js +0 -54
  114. package/src/components/TabView/TabViewItem.js +0 -11
  115. package/src/components/TabView/index.js +0 -2
  116. package/src/components/Text.js +0 -33
  117. package/src/components/TextField.js +0 -428
  118. package/src/components/ToggleButton.js +0 -39
  119. package/src/components/Touchable.js +0 -12
  120. package/src/components/Touchable.web.js +0 -2
  121. package/src/components/Typography.js +0 -36
  122. package/src/components/useAuthState.js +0 -31
  123. package/src/constants.js +0 -10
  124. package/src/hooks.js +0 -12
  125. package/src/index.js +0 -49
  126. package/src/interfaces/Icon.js +0 -8
  127. package/src/mappings/Accordion.js +0 -50
  128. package/src/mappings/AccordionItem.js +0 -17
  129. package/src/mappings/ActionSheet.js +0 -17
  130. package/src/mappings/ActionSheetCancel.js +0 -23
  131. package/src/mappings/ActionSheetItem.js +0 -27
  132. package/src/mappings/ActivityIndicator.js +0 -58
  133. package/src/mappings/AudioPlayer.js +0 -57
  134. package/src/mappings/AvatarEdit.js +0 -38
  135. package/src/mappings/Banner.js +0 -32
  136. package/src/mappings/BlurView.js +0 -42
  137. package/src/mappings/Button.js +0 -116
  138. package/src/mappings/Card.js +0 -52
  139. package/src/mappings/CardBlock.js +0 -123
  140. package/src/mappings/CardContainer.js +0 -104
  141. package/src/mappings/CardContainerRating.js +0 -126
  142. package/src/mappings/CardContainerShortImage.js +0 -120
  143. package/src/mappings/CardInline.js +0 -52
  144. package/src/mappings/Carousel.js +0 -19
  145. package/src/mappings/Checkbox.js +0 -46
  146. package/src/mappings/CheckboxGroup.js +0 -26
  147. package/src/mappings/CheckboxRow.js +0 -61
  148. package/src/mappings/CircleImage.js +0 -25
  149. package/src/mappings/Container.js +0 -30
  150. package/src/mappings/CustomCode.js +0 -8
  151. package/src/mappings/DatePicker.js +0 -182
  152. package/src/mappings/DeckSwiper.js +0 -48
  153. package/src/mappings/DeckSwiperCard.js +0 -16
  154. package/src/mappings/Divider.js +0 -27
  155. package/src/mappings/FAB.js +0 -37
  156. package/src/mappings/Fetch.js +0 -13
  157. package/src/mappings/FieldSearchBarFull.js +0 -50
  158. package/src/mappings/FlashList.js +0 -113
  159. package/src/mappings/FlatList.js +0 -51
  160. package/src/mappings/HeaderLarge.js +0 -29
  161. package/src/mappings/HeaderMedium.js +0 -55
  162. package/src/mappings/HeaderOverline.js +0 -55
  163. package/src/mappings/Icon.js +0 -32
  164. package/src/mappings/IconButton.js +0 -33
  165. package/src/mappings/Image.js +0 -35
  166. package/src/mappings/ImageBackground.js +0 -29
  167. package/src/mappings/KeyboardAvoidingView.js +0 -41
  168. package/src/mappings/KeyboardAwareScrollView.js +0 -50
  169. package/src/mappings/Layout.js +0 -200
  170. package/src/mappings/LinearGradient.js +0 -82
  171. package/src/mappings/MapCallout.js +0 -26
  172. package/src/mappings/MapMarker.js +0 -52
  173. package/src/mappings/MapView.js +0 -142
  174. package/src/mappings/Markdown.js +0 -25
  175. package/src/mappings/Modal.js +0 -42
  176. package/src/mappings/NumberInput.js +0 -254
  177. package/src/mappings/Picker.js +0 -153
  178. package/src/mappings/ProgressBar.js +0 -101
  179. package/src/mappings/ProgressCircle.js +0 -109
  180. package/src/mappings/ProgressIndicator.js +0 -181
  181. package/src/mappings/RadioButton.js +0 -51
  182. package/src/mappings/RadioButtonGroup.js +0 -17
  183. package/src/mappings/RadioButtonRow.js +0 -42
  184. package/src/mappings/RowBodyIcon.js +0 -75
  185. package/src/mappings/RowHeadlineImageCaption.js +0 -167
  186. package/src/mappings/RowHeadlineImageIcon.js +0 -99
  187. package/src/mappings/SVG.js +0 -20
  188. package/src/mappings/SafeAreaView.js +0 -33
  189. package/src/mappings/ScrollView.js +0 -37
  190. package/src/mappings/Shadow.js +0 -95
  191. package/src/mappings/Slider.js +0 -60
  192. package/src/mappings/StarRating.js +0 -43
  193. package/src/mappings/Stepper.js +0 -32
  194. package/src/mappings/Surface.js +0 -14
  195. package/src/mappings/Swiper.js +0 -71
  196. package/src/mappings/SwiperItem.js +0 -9
  197. package/src/mappings/Switch.js +0 -81
  198. package/src/mappings/TabView.js +0 -75
  199. package/src/mappings/TabViewItem.js +0 -30
  200. package/src/mappings/Text.js +0 -251
  201. package/src/mappings/TextArea.js +0 -283
  202. package/src/mappings/TextField.js +0 -400
  203. package/src/mappings/TextInput.js +0 -402
  204. package/src/mappings/ToggleButton.js +0 -50
  205. package/src/mappings/Touchable.js +0 -67
  206. package/src/mappings/Video.js +0 -81
  207. package/src/mappings/View.js +0 -207
  208. package/src/mappings/WebView.js +0 -88
  209. package/src/styles/DarkTheme.js +0 -26
  210. package/src/styles/DefaultTheme.js +0 -111
  211. package/src/styles/fonts.js +0 -62
  212. package/src/styles/overlay.js +0 -60
  213. package/src/styles/shadow.js +0 -51
  214. package/src/theming.js +0 -3
  215. package/src/utilities.js +0 -102
@@ -1,346 +0,0 @@
1
- // @ts-nocheck
2
- import React, { Component } from "react";
3
- import { View, Text, StyleSheet, Animated, TouchableWithoutFeedback, } from "react-native";
4
- const STEP_STATUS = {
5
- CURRENT: "current",
6
- FINISHED: "finished",
7
- UNFINISHED: "unfinished",
8
- };
9
- export default class StepIndicator extends Component {
10
- constructor(props) {
11
- super(props);
12
- this.renderProgressBarBackground = () => {
13
- const { stepCount, direction } = this.props;
14
- let progressBarBackgroundStyle;
15
- if (direction === "vertical") {
16
- progressBarBackgroundStyle = {
17
- backgroundColor: this.state.customStyles.separatorUnFinishedColor,
18
- position: "absolute",
19
- left: (this.state.width - this.state.customStyles.separatorStrokeWidth) / 2,
20
- top: this.state.height / (2 * stepCount),
21
- bottom: this.state.height / (2 * stepCount),
22
- width: this.state.customStyles.separatorStrokeUnfinishedWidth === 0
23
- ? this.state.customStyles.separatorStrokeWidth
24
- : this.state.customStyles.separatorStrokeUnfinishedWidth,
25
- };
26
- }
27
- else {
28
- progressBarBackgroundStyle = {
29
- backgroundColor: this.state.customStyles.separatorUnFinishedColor,
30
- position: "absolute",
31
- top: (this.state.height - this.state.customStyles.separatorStrokeWidth) /
32
- 2,
33
- left: this.state.width / (2 * stepCount),
34
- right: this.state.width / (2 * stepCount),
35
- height: this.state.customStyles.separatorStrokeUnfinishedWidth === 0
36
- ? this.state.customStyles.separatorStrokeWidth
37
- : this.state.customStyles.separatorStrokeUnfinishedWidth,
38
- };
39
- }
40
- return (React.createElement(View, { onLayout: (event) => {
41
- if (direction === "vertical") {
42
- this.setState({ progressBarSize: event.nativeEvent.layout.height }, () => {
43
- this.onCurrentPositionChanged(this.props.currentPosition);
44
- });
45
- }
46
- else {
47
- this.setState({ progressBarSize: event.nativeEvent.layout.width }, () => {
48
- this.onCurrentPositionChanged(this.props.currentPosition);
49
- });
50
- }
51
- }, style: progressBarBackgroundStyle }));
52
- };
53
- this.renderProgressBar = () => {
54
- const { stepCount, direction } = this.props;
55
- let progressBarStyle;
56
- if (direction === "vertical") {
57
- progressBarStyle = {
58
- backgroundColor: this.state.customStyles.separatorFinishedColor,
59
- position: "absolute",
60
- left: (this.state.width - this.state.customStyles.separatorStrokeWidth) / 2,
61
- top: this.state.height / (2 * stepCount),
62
- bottom: this.state.height / (2 * stepCount),
63
- width: this.state.customStyles.separatorStrokeFinishedWidth === 0
64
- ? this.state.customStyles.separatorStrokeWidth
65
- : this.state.customStyles.separatorStrokeFinishedWidth,
66
- height: this.progressAnim,
67
- };
68
- }
69
- else {
70
- progressBarStyle = {
71
- backgroundColor: this.state.customStyles.separatorFinishedColor,
72
- position: "absolute",
73
- top: (this.state.height - this.state.customStyles.separatorStrokeWidth) /
74
- 2,
75
- left: this.state.width / (2 * stepCount),
76
- right: this.state.width / (2 * stepCount),
77
- height: this.state.customStyles.separatorStrokeFinishedWidth === 0
78
- ? this.state.customStyles.separatorStrokeWidth
79
- : this.state.customStyles.separatorStrokeFinishedWidth,
80
- width: this.progressAnim,
81
- };
82
- }
83
- return React.createElement(Animated.View, { style: progressBarStyle });
84
- };
85
- this.renderStepIndicator = () => {
86
- let steps = [];
87
- const { stepCount, direction } = this.props;
88
- for (let position = 0; position < stepCount; position++) {
89
- steps.push(React.createElement(TouchableWithoutFeedback, { key: position, onPress: () => this.stepPressed(position) },
90
- React.createElement(View, { style: [
91
- styles.stepContainer,
92
- direction === "vertical"
93
- ? { flexDirection: "column" }
94
- : { flexDirection: "row" },
95
- ] }, this.renderStep(position))));
96
- }
97
- return (React.createElement(View, { onLayout: (event) => this.setState({
98
- width: event.nativeEvent.layout.width,
99
- height: event.nativeEvent.layout.height,
100
- }), style: [
101
- styles.stepIndicatorContainer,
102
- direction === "vertical"
103
- ? {
104
- flexDirection: "column",
105
- width: this.state.customStyles.currentStepIndicatorSize,
106
- }
107
- : {
108
- flexDirection: "row",
109
- height: this.state.customStyles.currentStepIndicatorSize,
110
- },
111
- ] }, steps));
112
- };
113
- this.renderStepLabels = () => {
114
- const { labels, direction, currentPosition, renderLabel } = this.props;
115
- var labelViews = labels.map((label, index) => {
116
- const selectedStepLabelStyle = index === currentPosition
117
- ? { color: this.state.customStyles.currentStepLabelColor }
118
- : { color: this.state.customStyles.labelColor };
119
- return (React.createElement(TouchableWithoutFeedback, { style: styles.stepLabelItem, key: index, onPress: () => this.stepPressed(index) },
120
- React.createElement(View, { style: styles.stepLabelItem }, renderLabel ? (renderLabel({
121
- position: index,
122
- stepStatus: this.getStepStatus(index),
123
- label,
124
- currentPosition,
125
- })) : (React.createElement(Text, { style: [
126
- styles.stepLabel,
127
- selectedStepLabelStyle,
128
- {
129
- fontSize: this.state.customStyles.labelSize,
130
- fontFamily: this.state.customStyles.labelFontFamily,
131
- },
132
- ] }, label)))));
133
- });
134
- return (React.createElement(View, { style: [
135
- styles.stepLabelsContainer,
136
- direction === "vertical"
137
- ? { flexDirection: "column", paddingHorizontal: 4 }
138
- : { flexDirection: "row", paddingVertical: 4 },
139
- { alignItems: this.state.customStyles.labelAlign },
140
- ] }, labelViews));
141
- };
142
- this.renderStep = (position) => {
143
- const { renderStepIndicator } = this.props;
144
- let stepStyle;
145
- let indicatorLabelStyle;
146
- switch (this.getStepStatus(position)) {
147
- case STEP_STATUS.CURRENT: {
148
- stepStyle = {
149
- backgroundColor: this.state.customStyles.stepIndicatorCurrentColor,
150
- borderWidth: this.state.customStyles.currentStepStrokeWidth,
151
- borderColor: this.state.customStyles.stepStrokeCurrentColor,
152
- height: this.sizeAnim,
153
- width: this.sizeAnim,
154
- borderRadius: this.borderRadiusAnim,
155
- };
156
- indicatorLabelStyle = {
157
- fontSize: this.state.customStyles.currentStepIndicatorLabelFontSize,
158
- color: this.state.customStyles.stepIndicatorLabelCurrentColor,
159
- };
160
- break;
161
- }
162
- case STEP_STATUS.FINISHED: {
163
- stepStyle = {
164
- backgroundColor: this.state.customStyles.stepIndicatorFinishedColor,
165
- borderWidth: this.state.customStyles.stepStrokeWidth,
166
- borderColor: this.state.customStyles.stepStrokeFinishedColor,
167
- height: this.state.customStyles.stepIndicatorSize,
168
- width: this.state.customStyles.stepIndicatorSize,
169
- borderRadius: this.state.customStyles.stepIndicatorSize / 2,
170
- };
171
- indicatorLabelStyle = {
172
- fontSize: this.state.customStyles.stepIndicatorLabelFontSize,
173
- color: this.state.customStyles.stepIndicatorLabelFinishedColor,
174
- };
175
- break;
176
- }
177
- case STEP_STATUS.UNFINISHED: {
178
- stepStyle = {
179
- backgroundColor: this.state.customStyles.stepIndicatorUnFinishedColor,
180
- borderWidth: this.state.customStyles.stepStrokeWidth,
181
- borderColor: this.state.customStyles.stepStrokeUnFinishedColor,
182
- height: this.state.customStyles.stepIndicatorSize,
183
- width: this.state.customStyles.stepIndicatorSize,
184
- borderRadius: this.state.customStyles.stepIndicatorSize / 2,
185
- };
186
- indicatorLabelStyle = {
187
- overflow: "hidden",
188
- fontSize: this.state.customStyles.stepIndicatorLabelFontSize,
189
- color: this.state.customStyles.stepIndicatorLabelUnFinishedColor,
190
- };
191
- break;
192
- }
193
- default:
194
- }
195
- return (React.createElement(Animated.View, { key: "step-indicator", style: [styles.step, stepStyle] }, renderStepIndicator ? (renderStepIndicator({
196
- position,
197
- stepStatus: this.getStepStatus(position),
198
- })) : (React.createElement(Text, { style: indicatorLabelStyle }, `${position + 1}`))));
199
- };
200
- this.getStepStatus = (stepPosition) => {
201
- const { currentPosition } = this.props;
202
- if (stepPosition === currentPosition) {
203
- return STEP_STATUS.CURRENT;
204
- }
205
- else if (stepPosition < currentPosition) {
206
- return STEP_STATUS.FINISHED;
207
- }
208
- else {
209
- return STEP_STATUS.UNFINISHED;
210
- }
211
- };
212
- this.onCurrentPositionChanged = (position) => {
213
- let { stepCount } = this.props;
214
- if (position > stepCount - 1) {
215
- position = stepCount - 1;
216
- }
217
- const animateToPosition = (this.state.progressBarSize / (stepCount - 1)) * position;
218
- this.sizeAnim.setValue(this.state.customStyles.stepIndicatorSize);
219
- this.borderRadiusAnim.setValue(this.state.customStyles.stepIndicatorSize / 2);
220
- Animated.sequence([
221
- Animated.timing(this.progressAnim, {
222
- toValue: animateToPosition,
223
- duration: 200,
224
- }),
225
- Animated.parallel([
226
- Animated.timing(this.sizeAnim, {
227
- toValue: this.state.customStyles.currentStepIndicatorSize,
228
- duration: 100,
229
- }),
230
- Animated.timing(this.borderRadiusAnim, {
231
- toValue: this.state.customStyles.currentStepIndicatorSize / 2,
232
- duration: 100,
233
- }),
234
- ]),
235
- ]).start();
236
- };
237
- const defaultStyles = {
238
- stepIndicatorSize: 30,
239
- currentStepIndicatorSize: 40,
240
- separatorStrokeWidth: 3,
241
- separatorStrokeUnfinishedWidth: 0,
242
- separatorStrokeFinishedWidth: 0,
243
- currentStepStrokeWidth: 5,
244
- stepStrokeWidth: 0,
245
- stepStrokeCurrentColor: "#4aae4f",
246
- stepStrokeFinishedColor: "#4aae4f",
247
- stepStrokeUnFinishedColor: "#4aae4f",
248
- separatorFinishedColor: "#4aae4f",
249
- separatorUnFinishedColor: "#a4d4a5",
250
- stepIndicatorFinishedColor: "#4aae4f",
251
- stepIndicatorUnFinishedColor: "#a4d4a5",
252
- stepIndicatorCurrentColor: "#ffffff",
253
- stepIndicatorLabelFontSize: 15,
254
- currentStepIndicatorLabelFontSize: 15,
255
- stepIndicatorLabelCurrentColor: "#000000",
256
- stepIndicatorLabelFinishedColor: "#ffffff",
257
- stepIndicatorLabelUnFinishedColor: "rgba(255,255,255,0.5)",
258
- labelColor: "#000000",
259
- labelSize: 13,
260
- labelAlign: "center",
261
- currentStepLabelColor: "#4aae4f",
262
- };
263
- const customStyles = Object.assign(defaultStyles, props.customStyles);
264
- this.state = {
265
- width: 0,
266
- height: 1,
267
- progressBarSize: -2,
268
- customStyles,
269
- };
270
- this.progressAnim = new Animated.Value(0);
271
- this.sizeAnim = new Animated.Value(this.state.customStyles.stepIndicatorSize);
272
- this.borderRadiusAnim = new Animated.Value(this.state.customStyles.stepIndicatorSize / 2);
273
- }
274
- stepPressed(position) {
275
- if (this.props.onPress) {
276
- this.props.onPress(position);
277
- }
278
- }
279
- render() {
280
- const { labels, direction } = this.props;
281
- return (React.createElement(View, { style: [
282
- styles.container,
283
- direction === "vertical"
284
- ? { flexDirection: "row", flex: 1 }
285
- : { flexDirection: "column" },
286
- ] },
287
- this.state.width !== 0 && this.renderProgressBarBackground(),
288
- this.state.width !== 0 && this.renderProgressBar(),
289
- this.renderStepIndicator(),
290
- labels && this.renderStepLabels()));
291
- }
292
- componentDidUpdate(prevProps) {
293
- // if (prevProps.customStyles !== this.props.customStyles) {
294
- // this.setState((state) => ({
295
- // customStyles: Object.assign(
296
- // state.customStyles,
297
- // this.props.customStyles
298
- // ),
299
- // }));
300
- // }
301
- if (prevProps.currentPosition !== this.props.currentPosition) {
302
- this.onCurrentPositionChanged(this.props.currentPosition);
303
- }
304
- }
305
- }
306
- const styles = StyleSheet.create({
307
- container: {
308
- backgroundColor: "transparent",
309
- },
310
- stepIndicatorContainer: {
311
- flexDirection: "row",
312
- alignItems: "center",
313
- justifyContent: "space-around",
314
- backgroundColor: "transparent",
315
- },
316
- stepLabelsContainer: {
317
- justifyContent: "space-around",
318
- },
319
- step: {
320
- alignItems: "center",
321
- justifyContent: "center",
322
- zIndex: 2,
323
- },
324
- stepContainer: {
325
- flex: 1,
326
- flexDirection: "row",
327
- alignItems: "center",
328
- justifyContent: "center",
329
- },
330
- stepLabel: {
331
- fontSize: 12,
332
- textAlign: "center",
333
- fontWeight: "500",
334
- },
335
- stepLabelItem: {
336
- flex: 1,
337
- alignItems: "center",
338
- justifyContent: "center",
339
- },
340
- });
341
- StepIndicator.defaultProps = {
342
- currentPosition: 0,
343
- stepCount: 5,
344
- customStyles: {},
345
- direction: "horizontal",
346
- };
@@ -1,41 +0,0 @@
1
- import React, { useEffect, useState } from "react";
2
- import { View, Text } from "react-native";
3
- import { isNumber } from "lodash";
4
- import { withTheme } from "../theming";
5
- import IconButton from "./IconButton";
6
- import { extractStyles } from "../utilities";
7
- const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultValue, style, iconSize = 24, iconColor, onChange, theme: { colors, typography }, Icon, }) => {
8
- const { viewStyles, textStyles } = extractStyles(style);
9
- const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
10
- const isValidValue = (valueArg) => valueArg >= min && valueArg <= max;
11
- const handlePlusOrMinus = (type) => {
12
- const newValue = type === "plus" ? value + 1 : value - 1;
13
- if (isValidValue(newValue)) {
14
- setValue(newValue);
15
- onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
16
- }
17
- };
18
- useEffect(() => {
19
- if (valueProp != null &&
20
- isNumber(valueProp) &&
21
- valueProp !== value &&
22
- isValidValue(valueProp)) {
23
- setValue(valueProp);
24
- }
25
- // eslint-disable-next-line react-hooks/exhaustive-deps
26
- }, [valueProp]);
27
- return (React.createElement(View, { style: [{ flexDirection: "row" }, viewStyles] },
28
- React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: () => handlePlusOrMinus("minus"), size: iconSize, color: iconColor, disabled: value === min, style: { opacity: value === min ? 0.5 : 1 } }),
29
- React.createElement(Text, { style: [
30
- typography.body1,
31
- {
32
- textAlign: "center",
33
- alignSelf: "center",
34
- color: colors.medium,
35
- marginHorizontal: 8,
36
- },
37
- textStyles,
38
- ] }, value),
39
- React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: () => handlePlusOrMinus("plus"), size: iconSize, color: iconColor, disabled: value === max, style: { opacity: value === max ? 0.5 : 1 } })));
40
- };
41
- export default withTheme(Stepper);
@@ -1,32 +0,0 @@
1
- /* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */
2
- import * as React from "react";
3
- import { Animated, StyleSheet, } from "react-native";
4
- import shadow from "../styles/shadow";
5
- import overlay from "../styles/overlay";
6
- import { withTheme } from "../theming";
7
- const Surface = ({ elevation: propElevation, style, theme, children, ...rest }) => {
8
- const { elevation: styleElevation = 3, backgroundColor, ...restStyle } = (StyleSheet.flatten(style) || {});
9
- const { dark: isDarkTheme, mode, colors } = theme;
10
- const elevation = propElevation || styleElevation;
11
- const evalationStyles = elevation ? shadow(elevation) : {};
12
- const getBackgroundColor = () => {
13
- if (backgroundColor) {
14
- return backgroundColor;
15
- }
16
- else if (isDarkTheme && mode === "adaptive") {
17
- return overlay(elevation, colors.surface);
18
- }
19
- else {
20
- return colors.surface;
21
- }
22
- };
23
- return (React.createElement(Animated.View, { ...rest, style: [
24
- {
25
- backgroundColor: getBackgroundColor(),
26
- elevation,
27
- ...evalationStyles,
28
- ...restStyle,
29
- },
30
- ] }, children));
31
- };
32
- export default withTheme(Surface);
@@ -1,29 +0,0 @@
1
- import React from "react";
2
- import { View } from "react-native";
3
- import SwiperComponent from "react-native-web-swiper";
4
- const Swiper = ({ vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", prevTitleColor, nextTitleColor, dotsTouchable = true, dotColor, dotActiveColor, data, keyExtractor, renderItem, children, onIndexChanged, style, }) => (React.createElement(View, { style: style },
5
- React.createElement(SwiperComponent, { from: from, loop: loop, timeout: timeout, vertical: vertical, onIndexChanged: onIndexChanged, controlsProps: {
6
- prevTitle,
7
- nextTitle,
8
- prevTitleStyle: { color: prevTitleColor },
9
- nextTitleStyle: { color: nextTitleColor },
10
- dotsTouchable,
11
- ...(dotColor
12
- ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
13
- : {}),
14
- ...(dotActiveColor
15
- ? { dotActiveStyle: { backgroundColor: dotActiveColor } }
16
- : {}),
17
- } }, data && renderItem
18
- ? data.map((item, index) => {
19
- const component = renderItem({ item, index });
20
- if (!component) {
21
- return null;
22
- }
23
- const key = keyExtractor ? keyExtractor(item, index) : index;
24
- return React.cloneElement(component, {
25
- key,
26
- });
27
- })
28
- : children)));
29
- export default Swiper;
@@ -1,9 +0,0 @@
1
- import React from "react";
2
- import { View, StyleSheet } from "react-native";
3
- const styles = StyleSheet.create({
4
- wrapper: {
5
- flex: 1,
6
- },
7
- });
8
- const SwiperItem = ({ children, style }) => (React.createElement(View, { style: [styles.wrapper, style] }, children));
9
- export default SwiperItem;
@@ -1,2 +0,0 @@
1
- export { default as Swiper } from "./Swiper";
2
- export { default as SwiperItem } from "./SwiperItem";
@@ -1,56 +0,0 @@
1
- import * as React from "react";
2
- import { Switch as NativeSwitch, } from "react-native";
3
- import { withTheme } from "../theming";
4
- import FormRow from "./FormRow";
5
- import { RowDirection } from "@draftbit/types";
6
- import { usePrevious } from "../hooks";
7
- function Switch({ value, defaultValue, disabled, onValueChange, activeTrackColor, inactiveTrackColor, activeThumbColor, inactiveThumbColor, theme, style, ...rest }) {
8
- const activeTrackThemeColor = activeTrackColor || theme.colors.primary;
9
- const inactiveTrackThemeColor = inactiveTrackColor || "#EEE";
10
- const activeThumbThemeColor = activeThumbColor || "#FFF";
11
- const inactiveThumbThemeColor = inactiveThumbColor || "#FFF";
12
- const [checked, setChecked] = React.useState(value || defaultValue);
13
- React.useEffect(() => {
14
- if (value != null && value !== checked) {
15
- setChecked(value);
16
- }
17
- }, [value, checked]);
18
- // This special logic is to handle weird APIs like Airtable that return
19
- // true or undefined for a boolean
20
- const previousDefaultValue = usePrevious(defaultValue);
21
- React.useEffect(() => {
22
- if (defaultValue !== previousDefaultValue) {
23
- setChecked(Boolean(defaultValue));
24
- }
25
- }, [defaultValue, previousDefaultValue]);
26
- return (React.createElement(NativeSwitch, { value: checked, disabled: disabled, trackColor: {
27
- false: inactiveTrackThemeColor,
28
- true: activeTrackThemeColor,
29
- }, thumbColor: value ? activeThumbThemeColor : inactiveThumbThemeColor,
30
- // @ts-ignore react-native-web only
31
- activeThumbColor: activeThumbThemeColor, ios_backgroundColor: inactiveTrackThemeColor, style: style, onValueChange: (bool) => {
32
- setChecked(bool);
33
- onValueChange && onValueChange(bool);
34
- }, ...rest }));
35
- }
36
- function Row({ label = "Label", direction = RowDirection.Row, style, value, defaultValue, disabled, onValueChange, activeTrackColor, inactiveTrackColor, activeThumbColor, inactiveThumbColor, theme, ...rest }) {
37
- const [checked, setChecked] = React.useState(value != null ? value : defaultValue);
38
- React.useEffect(() => {
39
- if (value != null) {
40
- setChecked(value);
41
- }
42
- }, [value]);
43
- React.useEffect(() => {
44
- if (defaultValue != null) {
45
- setChecked(defaultValue);
46
- }
47
- }, [defaultValue]);
48
- return (React.createElement(FormRow, { disabled: disabled, onPress: () => {
49
- setChecked(!checked);
50
- onValueChange && onValueChange(!checked);
51
- }, label: label, direction: direction, style: style, ...rest },
52
- React.createElement(Switch, { theme: theme, value: checked, disabled: disabled, onValueChange: onValueChange, activeTrackColor: activeTrackColor, inactiveTrackColor: inactiveTrackColor, activeThumbColor: activeThumbColor, inactiveThumbColor: inactiveThumbColor })));
53
- }
54
- const SwitchRow = withTheme(Row);
55
- export { SwitchRow };
56
- export default withTheme(Switch);
@@ -1,54 +0,0 @@
1
- import * as React from "react";
2
- import { TabView, TabBar, SceneMap, } from "react-native-tab-view";
3
- import { withTheme } from "../../theming";
4
- import { extractStyles } from "../../utilities";
5
- const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, tabsBackgroundColor, style, theme, children, }) => {
6
- const [index, setIndex] = React.useState(0);
7
- const [routes, setRoutes] = React.useState([]);
8
- const [tabScenes, setTabScenes] = React.useState({});
9
- const { textStyles, viewStyles } = extractStyles(style);
10
- //Check type of child using props
11
- //Regular '.type' cannot work because Draftbit strips the type in Draft view
12
- const instanceOfTabViewItemProps = (object) => {
13
- return "title" in object;
14
- };
15
- //Populate routes and scenes based on children
16
- React.useEffect(() => {
17
- const newRoutes = [];
18
- const scenes = {};
19
- React.Children.toArray(children)
20
- .filter((child) => React.isValidElement(child) && instanceOfTabViewItemProps(child.props))
21
- .forEach((item, idx) => {
22
- const child = item;
23
- newRoutes.push({
24
- key: idx.toString(),
25
- title: child.props.title,
26
- icon: child.props.icon,
27
- accessibilityLabel: child.props.accessibilityLabel,
28
- });
29
- scenes[idx] = () => child;
30
- });
31
- setRoutes(newRoutes);
32
- setTabScenes(scenes);
33
- }, [children]);
34
- const indexChangeHandler = (i) => {
35
- setIndex(i);
36
- onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
37
- if (i === routes.length) {
38
- onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
39
- }
40
- };
41
- const renderTabBar = (props) => {
42
- return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || theme.colors.divider, pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
43
- backgroundColor: indicatorColor || theme.colors.primary,
44
- }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 16 })) : null, style: {
45
- backgroundColor: tabsBackgroundColor || theme.colors.background,
46
- } }));
47
- };
48
- //Cannot render TabView without at least one tab
49
- if (!routes.length) {
50
- return React.createElement(React.Fragment, null);
51
- }
52
- return (React.createElement(TabView, { style: [viewStyles], navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
53
- };
54
- export default withTheme(TabViewComponent);
@@ -1,11 +0,0 @@
1
- import React from "react";
2
- import { StyleSheet, View } from "react-native";
3
- const TabViewItem = ({ style, children, }) => {
4
- return React.createElement(View, { style: [styles.parentContainer, style] }, children);
5
- };
6
- const styles = StyleSheet.create({
7
- parentContainer: {
8
- flex: 1,
9
- },
10
- });
11
- export default TabViewItem;
@@ -1,2 +0,0 @@
1
- export { default as TabView } from "./TabView";
2
- export { default as TabViewItem } from "./TabViewItem";
@@ -1,33 +0,0 @@
1
- import * as React from "react";
2
- import { Text as NativeText, I18nManager } from "react-native";
3
- import { withTheme } from "../theming";
4
- class Text extends React.Component {
5
- constructor() {
6
- super(...arguments);
7
- this.state = {
8
- nativeProps: {},
9
- };
10
- }
11
- setNativeProps(args) {
12
- this.state.nativeProps = args || {};
13
- }
14
- render() {
15
- const { style, ...rest } = this.props;
16
- const writingDirection = I18nManager.isRTL ? "rtl" : "ltr";
17
- return (React.createElement(NativeText, { ...rest, ...this.state.nativeProps, ref: (c) => {
18
- this._root = c;
19
- }, style: [
20
- {
21
- textAlign: "left",
22
- writingDirection,
23
- },
24
- style,
25
- ] }));
26
- }
27
- }
28
- export const BaseLink = ({ style, theme, title, ...props }) => {
29
- return (React.createElement(Text, { hitSlop: 8, style: [{ color: theme.colors.primary }, style], theme: theme, ...props }, title));
30
- };
31
- const Link = withTheme(BaseLink);
32
- export { Link };
33
- export default withTheme(Text);