@draftbit/core 47.0.1-ed6e56.2 → 47.1.0

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 (277) hide show
  1. package/lib/commonjs/components/Button.js +3 -3
  2. package/lib/commonjs/components/Checkbox/Checkbox.js +1 -3
  3. package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +1 -2
  4. package/lib/commonjs/components/Checkbox/CheckboxRow.js +1 -2
  5. package/lib/commonjs/components/DatePicker/DatePicker.js +0 -1
  6. package/lib/commonjs/components/DatePicker/DatePickerComponent.js +9 -3
  7. package/lib/commonjs/components/DatePicker/DatePickerComponent.web.js +1 -0
  8. package/lib/commonjs/components/DeprecatedButton.js +3 -27
  9. package/lib/commonjs/components/DeprecatedFAB.js +1 -2
  10. package/lib/commonjs/components/Justification.js +1 -5
  11. package/lib/commonjs/components/Pressable.js +37 -0
  12. package/lib/commonjs/components/ResizeMode.js +1 -5
  13. package/lib/commonjs/components/Swiper/Swiper.js +2 -0
  14. package/lib/commonjs/components/Touchable.js +8 -3
  15. package/lib/commonjs/index.js +7 -0
  16. package/lib/commonjs/mappings/Button.js +39 -10
  17. package/lib/commonjs/mappings/FlashList.js +45 -2
  18. package/lib/commonjs/mappings/FlatList.js +12 -0
  19. package/lib/commonjs/mappings/Swiper.js +2 -0
  20. package/lib/commonjs/mappings/Touchable.js +47 -7
  21. package/lib/module/components/Button.js +3 -3
  22. package/lib/module/components/Checkbox/Checkbox.js +2 -3
  23. package/lib/module/components/Checkbox/CheckboxGroupRow.js +2 -3
  24. package/lib/module/components/Checkbox/CheckboxRow.js +2 -3
  25. package/lib/module/components/DatePicker/DatePicker.js +0 -1
  26. package/lib/module/components/DatePicker/DatePickerComponent.js +9 -3
  27. package/lib/module/components/DatePicker/DatePickerComponent.web.js +1 -0
  28. package/lib/module/components/DeprecatedButton.js +4 -28
  29. package/lib/module/components/DeprecatedFAB.js +2 -3
  30. package/lib/module/components/Justification.js +0 -1
  31. package/lib/module/components/Pressable.js +30 -0
  32. package/lib/module/components/ResizeMode.js +0 -1
  33. package/lib/module/components/Swiper/Swiper.js +2 -0
  34. package/lib/module/components/Touchable.js +8 -3
  35. package/lib/module/index.js +1 -0
  36. package/lib/module/mappings/Button.js +40 -11
  37. package/lib/module/mappings/FlashList.js +46 -3
  38. package/lib/module/mappings/FlatList.js +13 -1
  39. package/lib/module/mappings/Swiper.js +3 -1
  40. package/lib/module/mappings/Touchable.js +49 -9
  41. package/lib/typescript/src/components/Button.d.ts.map +1 -1
  42. package/lib/typescript/src/components/Checkbox/Checkbox.d.ts +2 -2
  43. package/lib/typescript/src/components/Checkbox/Checkbox.d.ts.map +1 -1
  44. package/lib/typescript/src/components/Checkbox/CheckboxGroupRow.d.ts.map +1 -1
  45. package/lib/typescript/src/components/Checkbox/CheckboxRow.d.ts.map +1 -1
  46. package/lib/typescript/src/components/DatePicker/DatePicker.d.ts.map +1 -1
  47. package/lib/typescript/src/components/DatePicker/DatePickerComponent.d.ts.map +1 -1
  48. package/lib/typescript/src/components/DatePicker/DatePickerComponent.web.d.ts.map +1 -1
  49. package/lib/typescript/src/components/DatePicker/DatePickerComponentType.d.ts +0 -2
  50. package/lib/typescript/src/components/DatePicker/DatePickerComponentType.d.ts.map +1 -1
  51. package/lib/typescript/src/components/DeprecatedButton.d.ts +2 -2
  52. package/lib/typescript/src/components/DeprecatedButton.d.ts.map +1 -1
  53. package/lib/typescript/src/components/DeprecatedFAB.d.ts +2 -2
  54. package/lib/typescript/src/components/DeprecatedFAB.d.ts.map +1 -1
  55. package/lib/typescript/src/components/Pressable.d.ts +10 -0
  56. package/lib/typescript/src/components/Pressable.d.ts.map +1 -0
  57. package/lib/typescript/src/components/Swiper/Swiper.d.ts +2 -1
  58. package/lib/typescript/src/components/Swiper/Swiper.d.ts.map +1 -1
  59. package/lib/typescript/src/components/Touchable.d.ts +5 -6
  60. package/lib/typescript/src/components/Touchable.d.ts.map +1 -1
  61. package/lib/typescript/src/index.d.ts +1 -0
  62. package/lib/typescript/src/index.d.ts.map +1 -1
  63. package/lib/typescript/src/mappings/Button.d.ts +113 -4
  64. package/lib/typescript/src/mappings/Button.d.ts.map +1 -1
  65. package/lib/typescript/src/mappings/FlashList.d.ts +112 -2
  66. package/lib/typescript/src/mappings/FlashList.d.ts.map +1 -1
  67. package/lib/typescript/src/mappings/FlatList.d.ts +42 -0
  68. package/lib/typescript/src/mappings/FlatList.d.ts.map +1 -1
  69. package/lib/typescript/src/mappings/Swiper.d.ts +11 -0
  70. package/lib/typescript/src/mappings/Swiper.d.ts.map +1 -1
  71. package/lib/typescript/src/mappings/Touchable.d.ts +59 -5
  72. package/lib/typescript/src/mappings/Touchable.d.ts.map +1 -1
  73. package/package.json +6 -6
  74. package/src/components/Button.tsx +14 -4
  75. package/src/components/Checkbox/Checkbox.tsx +5 -7
  76. package/src/components/Checkbox/CheckboxGroupRow.tsx +3 -3
  77. package/src/components/Checkbox/CheckboxRow.tsx +3 -3
  78. package/src/components/DatePicker/DatePicker.tsx +0 -1
  79. package/src/components/DatePicker/DatePickerComponent.tsx +11 -3
  80. package/src/components/DatePicker/DatePickerComponent.web.tsx +1 -0
  81. package/src/components/DatePicker/DatePickerComponentType.ts +0 -9
  82. package/src/components/DeprecatedButton.tsx +7 -31
  83. package/src/components/DeprecatedFAB.tsx +5 -5
  84. package/src/components/Pressable.tsx +44 -0
  85. package/src/components/Swiper/Swiper.tsx +3 -0
  86. package/src/components/Touchable.tsx +11 -7
  87. package/src/index.tsx +1 -0
  88. package/src/mappings/Button.ts +41 -10
  89. package/src/mappings/FlashList.ts +82 -30
  90. package/src/mappings/FlatList.ts +16 -0
  91. package/src/mappings/Swiper.ts +4 -0
  92. package/src/mappings/Touchable.ts +53 -6
  93. package/lib/commonjs/components/DatePicker/DatePickerInput.js +0 -133
  94. package/lib/module/components/DatePicker/DatePickerInput.js +0 -123
  95. package/lib/typescript/src/components/DatePicker/DatePickerInput.d.ts +0 -18
  96. package/lib/typescript/src/components/DatePicker/DatePickerInput.d.ts.map +0 -1
  97. package/src/Provider.js +0 -9
  98. package/src/components/Accordion/AccordionGroup.js +0 -44
  99. package/src/components/Accordion/AccordionItem.js +0 -32
  100. package/src/components/Accordion/index.js +0 -2
  101. package/src/components/ActionSheet/ActionSheet.js +0 -45
  102. package/src/components/ActionSheet/ActionSheetCancel.js +0 -6
  103. package/src/components/ActionSheet/ActionSheetItem.js +0 -30
  104. package/src/components/ActionSheet/index.js +0 -3
  105. package/src/components/AnimatedCircularProgress.js +0 -43
  106. package/src/components/AspectRatio.js +0 -18
  107. package/src/components/AvatarEdit.js +0 -30
  108. package/src/components/Banner.js +0 -109
  109. package/src/components/Button.js +0 -114
  110. package/src/components/Card.js +0 -57
  111. package/src/components/CardBlock.js +0 -54
  112. package/src/components/CardContainer.js +0 -69
  113. package/src/components/CardContainerRating.js +0 -79
  114. package/src/components/CardContainerShortImage.js +0 -33
  115. package/src/components/CardInline.js +0 -36
  116. package/src/components/Carousel.js +0 -68
  117. package/src/components/Checkbox/Checkbox.js +0 -63
  118. package/src/components/Checkbox/CheckboxGroup.js +0 -21
  119. package/src/components/Checkbox/CheckboxGroupRow.js +0 -77
  120. package/src/components/Checkbox/CheckboxRow.js +0 -78
  121. package/src/components/Checkbox/context.js +0 -14
  122. package/src/components/Checkbox/index.js +0 -3
  123. package/src/components/CircleImage.js +0 -8
  124. package/src/components/CircularProgress.js +0 -81
  125. package/src/components/Config.js +0 -64
  126. package/src/components/Container.js +0 -43
  127. package/src/components/DatePicker/DatePicker.js +0 -377
  128. package/src/components/DatePicker/DatePickerComponent.js +0 -11
  129. package/src/components/DatePicker/DatePickerComponent.web.js +0 -30
  130. package/src/components/DatePicker/DatePickerComponentType.js +0 -1
  131. package/src/components/DatePicker/DatePickerInput.js +0 -97
  132. package/src/components/DatePicker/DatePickerInput.tsx +0 -195
  133. package/src/components/DeprecatedButton.js +0 -95
  134. package/src/components/DeprecatedCardWrapper.js +0 -18
  135. package/src/components/DeprecatedFAB.js +0 -115
  136. package/src/components/Divider.js +0 -13
  137. package/src/components/Elevation.js +0 -20
  138. package/src/components/FAB.js +0 -46
  139. package/src/components/FieldSearchBarFull.js +0 -53
  140. package/src/components/FormRow.js +0 -19
  141. package/src/components/Header.js +0 -44
  142. package/src/components/HeaderLarge.js +0 -7
  143. package/src/components/HeaderMedium.js +0 -7
  144. package/src/components/HeaderOverline.js +0 -7
  145. package/src/components/IconButton.js +0 -35
  146. package/src/components/Image.js +0 -47
  147. package/src/components/Justification.js +0 -1
  148. package/src/components/Layout.js +0 -50
  149. package/src/components/NumberInput.js +0 -49
  150. package/src/components/Picker/Picker.js +0 -267
  151. package/src/components/Picker/PickerComponent.android.js +0 -69
  152. package/src/components/Picker/PickerComponent.ios.js +0 -79
  153. package/src/components/Picker/PickerComponent.web.js +0 -70
  154. package/src/components/Picker/PickerTypes.js +0 -1
  155. package/src/components/Portal/Portal.js +0 -35
  156. package/src/components/Portal/PortalConsumer.js +0 -27
  157. package/src/components/Portal/PortalHost.js +0 -107
  158. package/src/components/Portal/PortalManager.js +0 -32
  159. package/src/components/ProgressBar.js +0 -118
  160. package/src/components/ProgressCircle.js +0 -13
  161. package/src/components/ProgressIndicator.js +0 -27
  162. package/src/components/RadioButton/RadioButton.js +0 -17
  163. package/src/components/RadioButton/RadioButtonFieldGroup.js +0 -17
  164. package/src/components/RadioButton/RadioButtonGroup.js +0 -43
  165. package/src/components/RadioButton/RadioButtonRow.js +0 -76
  166. package/src/components/RadioButton/context.js +0 -14
  167. package/src/components/RadioButton/index.js +0 -4
  168. package/src/components/ResizeMode.js +0 -1
  169. package/src/components/Row.js +0 -48
  170. package/src/components/RowBodyIcon.js +0 -8
  171. package/src/components/RowHeadlineImageCaption.js +0 -12
  172. package/src/components/RowHeadlineImageIcon.js +0 -14
  173. package/src/components/SVG.js +0 -13
  174. package/src/components/ScreenContainer.js +0 -34
  175. package/src/components/Slider.js +0 -63
  176. package/src/components/StarRating.js +0 -50
  177. package/src/components/StepIndicator.js +0 -346
  178. package/src/components/Stepper.js +0 -41
  179. package/src/components/Surface.js +0 -32
  180. package/src/components/Swiper/Swiper.js +0 -29
  181. package/src/components/Swiper/SwiperItem.js +0 -9
  182. package/src/components/Swiper/index.js +0 -2
  183. package/src/components/Switch.js +0 -56
  184. package/src/components/Text.js +0 -33
  185. package/src/components/TextField.js +0 -428
  186. package/src/components/ToggleButton.js +0 -39
  187. package/src/components/Touchable.js +0 -12
  188. package/src/components/Touchable.web.js +0 -2
  189. package/src/components/Typography.js +0 -36
  190. package/src/components/useAuthState.js +0 -31
  191. package/src/constants.js +0 -10
  192. package/src/hooks.js +0 -12
  193. package/src/index.js +0 -52
  194. package/src/interfaces/Icon.js +0 -8
  195. package/src/mappings/Accordion.js +0 -41
  196. package/src/mappings/AccordionItem.js +0 -16
  197. package/src/mappings/ActionSheet.js +0 -13
  198. package/src/mappings/ActionSheetCancel.js +0 -19
  199. package/src/mappings/ActionSheetItem.js +0 -23
  200. package/src/mappings/ActivityIndicator.js +0 -58
  201. package/src/mappings/AudioPlayer.js +0 -57
  202. package/src/mappings/AvatarEdit.js +0 -38
  203. package/src/mappings/Banner.js +0 -32
  204. package/src/mappings/BlurView.js +0 -42
  205. package/src/mappings/Button.js +0 -87
  206. package/src/mappings/Card.js +0 -52
  207. package/src/mappings/CardBlock.js +0 -123
  208. package/src/mappings/CardContainer.js +0 -104
  209. package/src/mappings/CardContainerRating.js +0 -126
  210. package/src/mappings/CardContainerShortImage.js +0 -120
  211. package/src/mappings/CardInline.js +0 -52
  212. package/src/mappings/Carousel.js +0 -19
  213. package/src/mappings/Checkbox.js +0 -46
  214. package/src/mappings/CheckboxGroup.js +0 -26
  215. package/src/mappings/CheckboxRow.js +0 -61
  216. package/src/mappings/CircleImage.js +0 -25
  217. package/src/mappings/Container.js +0 -30
  218. package/src/mappings/CustomCode.js +0 -8
  219. package/src/mappings/DatePicker.js +0 -176
  220. package/src/mappings/Divider.js +0 -27
  221. package/src/mappings/FAB.js +0 -37
  222. package/src/mappings/Fetch.js +0 -13
  223. package/src/mappings/FieldSearchBarFull.js +0 -50
  224. package/src/mappings/FlashList.js +0 -33
  225. package/src/mappings/FlatList.js +0 -24
  226. package/src/mappings/HeaderLarge.js +0 -29
  227. package/src/mappings/HeaderMedium.js +0 -55
  228. package/src/mappings/HeaderOverline.js +0 -55
  229. package/src/mappings/Icon.js +0 -32
  230. package/src/mappings/IconButton.js +0 -35
  231. package/src/mappings/Image.js +0 -35
  232. package/src/mappings/ImageBackground.js +0 -29
  233. package/src/mappings/KeyboardAvoidingView.js +0 -41
  234. package/src/mappings/KeyboardAwareScrollView.js +0 -50
  235. package/src/mappings/Layout.js +0 -200
  236. package/src/mappings/LinearGradient.js +0 -77
  237. package/src/mappings/MapCallout.js +0 -21
  238. package/src/mappings/MapMarker.js +0 -47
  239. package/src/mappings/MapView.js +0 -139
  240. package/src/mappings/Modal.js +0 -42
  241. package/src/mappings/NumberInput.js +0 -254
  242. package/src/mappings/Picker.js +0 -148
  243. package/src/mappings/ProgressBar.js +0 -101
  244. package/src/mappings/ProgressCircle.js +0 -109
  245. package/src/mappings/ProgressIndicator.js +0 -181
  246. package/src/mappings/RadioButton.js +0 -51
  247. package/src/mappings/RadioButtonGroup.js +0 -17
  248. package/src/mappings/RadioButtonRow.js +0 -42
  249. package/src/mappings/RowBodyIcon.js +0 -75
  250. package/src/mappings/RowHeadlineImageCaption.js +0 -167
  251. package/src/mappings/RowHeadlineImageIcon.js +0 -99
  252. package/src/mappings/SVG.js +0 -20
  253. package/src/mappings/SafeAreaView.js +0 -33
  254. package/src/mappings/ScrollView.js +0 -31
  255. package/src/mappings/Slider.js +0 -60
  256. package/src/mappings/StarRating.js +0 -43
  257. package/src/mappings/Stepper.js +0 -32
  258. package/src/mappings/Surface.js +0 -14
  259. package/src/mappings/Swiper.js +0 -60
  260. package/src/mappings/SwiperItem.js +0 -8
  261. package/src/mappings/Switch.js +0 -81
  262. package/src/mappings/Text.js +0 -251
  263. package/src/mappings/TextArea.js +0 -274
  264. package/src/mappings/TextField.js +0 -391
  265. package/src/mappings/TextInput.js +0 -402
  266. package/src/mappings/ToggleButton.js +0 -50
  267. package/src/mappings/Touchable.js +0 -17
  268. package/src/mappings/Video.js +0 -81
  269. package/src/mappings/View.js +0 -207
  270. package/src/mappings/WebView.js +0 -88
  271. package/src/styles/DarkTheme.js +0 -26
  272. package/src/styles/DefaultTheme.js +0 -111
  273. package/src/styles/fonts.js +0 -62
  274. package/src/styles/overlay.js +0 -60
  275. package/src/styles/shadow.js +0 -51
  276. package/src/theming.js +0 -3
  277. package/src/utilities.js +0 -102
@@ -5,37 +5,89 @@ import {
5
5
  createNumberProp,
6
6
  CONTAINER_COMPONENT_STYLES_SECTIONS,
7
7
  GROUPS,
8
+ Triggers,
9
+ createActionProp,
10
+ createStaticNumberProp,
8
11
  } from "@draftbit/types";
9
12
 
10
- export const SEED_DATA = {
11
- name: "FlashList",
12
- tag: "FlashList",
13
- description: "Flashlist by Shopify",
14
- packageName: "@shopify/flash-list",
15
- category: COMPONENT_TYPES.data,
16
- stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
17
- layout: {
18
- flex: 1,
13
+ export const SEED_DATA = [
14
+ {
15
+ name: "Masonry List",
16
+ tag: "MasonryFlashList",
17
+ description: "Masonry Flashlist by Shopify",
18
+ packageName: "@shopify/flash-list",
19
+ category: COMPONENT_TYPES.data,
20
+ stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
21
+ layout: {
22
+ flex: 1,
23
+ },
24
+ triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
25
+ props: {
26
+ onRefresh: createActionProp(),
27
+ onEndReached: createActionProp(),
28
+ numColumns: createNumColumnsType({
29
+ editable: true,
30
+ }),
31
+ estimatedItemSize: createNumberProp({
32
+ group: GROUPS.basic,
33
+ label: "Est. Item Size",
34
+ description: "Approximate size of the items before rendering.",
35
+ defaultValue: 50,
36
+ step: 1,
37
+ precision: 0,
38
+ }),
39
+ optimizeItemArrangement: createStaticBoolProp({
40
+ label: "Optimize Item Arrangement",
41
+ description:
42
+ "If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false.",
43
+ }),
44
+ onEndReachedThreshold: createStaticNumberProp({
45
+ label: "End Reached Threshold",
46
+ description:
47
+ "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
48
+ defaultValue: 0.5,
49
+ }),
50
+ },
19
51
  },
20
- props: {
21
- estimatedItemSize: createNumberProp({
22
- group: GROUPS.basic,
23
- label: "Est. Item Size",
24
- description: "Approximate size of the items before rendering.",
25
- defaultValue: 50,
26
- step: 1,
27
- precision: 0,
28
- }),
29
- horizontal: createStaticBoolProp({
30
- label: "Horizontal",
31
- description: "Render list horizontally",
32
- }),
33
- inverted: createStaticBoolProp({
34
- label: "Inverted",
35
- description: "If true, reverses the direction.",
36
- }),
37
- numColumns: createNumColumnsType({
38
- editable: true,
39
- }),
52
+ {
53
+ name: "FlashList",
54
+ tag: "FlashList",
55
+ description: "Flashlist by Shopify",
56
+ packageName: "@shopify/flash-list",
57
+ category: COMPONENT_TYPES.data,
58
+ stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
59
+ layout: {
60
+ flex: 1,
61
+ },
62
+ triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
63
+ props: {
64
+ onRefresh: createActionProp(),
65
+ onEndReached: createActionProp(),
66
+ estimatedItemSize: createNumberProp({
67
+ group: GROUPS.basic,
68
+ label: "Est. Item Size",
69
+ description: "Approximate size of the items before rendering.",
70
+ defaultValue: 50,
71
+ step: 1,
72
+ precision: 0,
73
+ }),
74
+ horizontal: createStaticBoolProp({
75
+ label: "Horizontal",
76
+ description: "Render list horizontally",
77
+ }),
78
+ inverted: createStaticBoolProp({
79
+ label: "Inverted",
80
+ description: "If true, reverses the direction.",
81
+ }),
82
+ numColumns: createNumColumnsType({
83
+ editable: true,
84
+ }),
85
+ onEndReachedThreshold: createStaticNumberProp({
86
+ label: "End Reached Threshold",
87
+ description:
88
+ "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
89
+ defaultValue: 0.5,
90
+ }),
91
+ },
40
92
  },
41
- };
93
+ ];
@@ -3,6 +3,9 @@ import {
3
3
  createNumColumnsType,
4
4
  createStaticBoolProp,
5
5
  CONTAINER_COMPONENT_STYLES_SECTIONS,
6
+ Triggers,
7
+ createActionProp,
8
+ createStaticNumberProp,
6
9
  } from "@draftbit/types";
7
10
 
8
11
  export const SEED_DATA = {
@@ -14,7 +17,10 @@ export const SEED_DATA = {
14
17
  layout: {
15
18
  flex: 1,
16
19
  },
20
+ triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
17
21
  props: {
22
+ onRefresh: createActionProp(),
23
+ onEndReached: createActionProp(),
18
24
  horizontal: createStaticBoolProp({
19
25
  label: "Horizontal",
20
26
  description: "Render list horizontally",
@@ -26,5 +32,15 @@ export const SEED_DATA = {
26
32
  numColumns: createNumColumnsType({
27
33
  editable: true,
28
34
  }),
35
+ initialNumToRender: createStaticBoolProp({
36
+ label: "Initial Num To Render",
37
+ descriprion: "How many items to render in the initial batch",
38
+ }),
39
+ onEndReachedThreshold: createStaticNumberProp({
40
+ label: "End Reached Threshold",
41
+ description:
42
+ "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
43
+ defaultValue: 0.5,
44
+ }),
29
45
  },
30
46
  };
@@ -5,6 +5,8 @@ import {
5
5
  createTextProp,
6
6
  createColorProp,
7
7
  GROUPS,
8
+ Triggers,
9
+ createActionProp,
8
10
  } from "@draftbit/types";
9
11
 
10
12
  export const SEED_DATA = {
@@ -16,7 +18,9 @@ export const SEED_DATA = {
16
18
  height: 300,
17
19
  width: "100%",
18
20
  },
21
+ triggers: [Triggers.OnIndexChanged],
19
22
  props: {
23
+ onIndexChanged: createActionProp(),
20
24
  from: createNumberProp({
21
25
  group: GROUPS.basic,
22
26
  label: "Initial Slide",
@@ -2,22 +2,69 @@ import {
2
2
  COMPONENT_TYPES,
3
3
  createActionProp,
4
4
  Triggers,
5
+ createStaticNumberProp,
5
6
  StylesPanelSections,
6
7
  } from "@draftbit/types";
7
8
 
8
- export const SEED_DATA = {
9
- name: "Touchable",
10
- tag: "Touchable",
11
- description: "Simple button with no styles",
12
- category: COMPONENT_TYPES.button,
9
+ const SEED_DATA_PROPS = {
13
10
  stylesPanelSections: [
14
11
  StylesPanelSections.Size,
15
12
  StylesPanelSections.Margins,
16
13
  StylesPanelSections.Borders,
17
14
  ],
18
15
  layout: {},
19
- triggers: [Triggers.OnPress],
16
+ triggers: [Triggers.OnPress, Triggers.OnLongPress],
20
17
  props: {
21
18
  onPress: createActionProp(),
19
+ onLongPress: createActionProp(),
20
+ activeOpacity: createStaticNumberProp({
21
+ label: "Active Opacity",
22
+ description: "The opacity when the button is pressed.",
23
+ defaultValue: 0.8,
24
+ min: 0,
25
+ max: 1,
26
+ step: 0.01,
27
+ precision: 2,
28
+ required: false,
29
+ }),
30
+ disabledOpacity: createStaticNumberProp({
31
+ label: "Disabled Opacity",
32
+ description: "The opacity when the button is disabled.",
33
+ defaultValue: 0.8,
34
+ min: 0,
35
+ max: 1,
36
+ step: 0.01,
37
+ precision: 2,
38
+ required: false,
39
+ }),
40
+ delayLongPress: createStaticNumberProp({
41
+ label: "Delay Long Press",
42
+ description:
43
+ "Duration (in milliseconds) from onPressIn before onLongPress is called.",
44
+ required: false,
45
+ }),
46
+ hitSlop: createStaticNumberProp({
47
+ label: "Hit Slop",
48
+ description:
49
+ "Sets additional distance outside of element in which a press can be detected.",
50
+ required: false,
51
+ }),
22
52
  },
23
53
  };
54
+
55
+ export const SEED_DATA = [
56
+ {
57
+ name: "Touchable",
58
+ tag: "Touchable",
59
+ description: "An interactive view with no styles",
60
+ category: COMPONENT_TYPES.button,
61
+ ...SEED_DATA_PROPS,
62
+ },
63
+ {
64
+ name: "Pressable",
65
+ tag: "Pressable",
66
+ description: "An interactive view with no styles",
67
+ category: COMPONENT_TYPES.button,
68
+ ...SEED_DATA_PROPS,
69
+ },
70
+ ];
@@ -1,133 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var React = _interopRequireWildcard(require("react"));
8
- var _reactNative = require("react-native");
9
- var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
10
- var _dateformat = _interopRequireDefault(require("dateformat"));
11
- var _Portal = _interopRequireDefault(require("../Portal/Portal"));
12
- var _Touchable = _interopRequireDefault(require("../Touchable"));
13
- var _DatePickerComponent = _interopRequireDefault(require("./DatePickerComponent"));
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
16
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
18
- const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
19
- const DatePickerInput = _ref => {
20
- let {
21
- style,
22
- date,
23
- onDateChange = () => {},
24
- defaultValue,
25
- disabled = false,
26
- mode = "date",
27
- format,
28
- androidDisplay = "default",
29
- iosDisplay = "default",
30
- webDisplay = "dialog",
31
- placeholder,
32
- ...props
33
- } = _ref;
34
- const [value, setValue] = React.useState(date || defaultValue);
35
- React.useEffect(() => {
36
- if (defaultValue != null) {
37
- setValue(defaultValue);
38
- }
39
- }, [defaultValue]);
40
- const [pickerVisible, setPickerVisible] = React.useState(false);
41
- const [focused, setFocused] = React.useState(false);
42
- const getValidDate = () => {
43
- if (!value) {
44
- return new Date();
45
- }
46
- return typeof (value === null || value === void 0 ? void 0 : value.getMonth) === "function" ? value : new Date();
47
- };
48
- const formatDate = () => {
49
- if (!value) return "";
50
- let newDate = getValidDate();
51
- if (format) return (0, _dateformat.default)(newDate, format);
52
- if (mode === "time") {
53
- return "".concat(newDate.toLocaleTimeString());
54
- }
55
- if (mode === "datetime") {
56
- return "".concat(newDate.toLocaleString());
57
- }
58
- return "".concat(MONTHS[newDate.getMonth()], " ").concat(newDate.getDate(), ", ").concat(newDate.getFullYear());
59
- };
60
- const toggleVisibility = async () => {
61
- setPickerVisible(!pickerVisible);
62
- focused ? _handleBlur() : _handleFocus();
63
- };
64
- const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
65
- React.useEffect(() => {
66
- setValue(date);
67
- }, [date]);
68
- const _handleFocus = () => {
69
- if (disabled) {
70
- return;
71
- }
72
- setFocused(true);
73
- };
74
- const _handleBlur = () => {
75
- if (disabled) {
76
- return;
77
- }
78
- setFocused(false);
79
- };
80
- return /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_Touchable.default, {
81
- disabled: disabled,
82
- onPress: toggleVisibility
83
- }, /*#__PURE__*/React.createElement(_reactNative.TextInput, _extends({
84
- value: formatDate(),
85
- placeholder: placeholder,
86
- editable: !disabled,
87
- onFocus: _handleFocus,
88
- onBlur: _handleBlur,
89
- style: style
90
- }, props))), pickerVisible && /*#__PURE__*/React.createElement(_Portal.default, null, /*#__PURE__*/React.createElement(_reactNative.View, {
91
- style: {
92
- paddingTop: insets.top,
93
- paddingBottom: insets.bottom,
94
- paddingLeft: insets.left,
95
- paddingRight: insets.right
96
- }
97
- }, _reactNative.Platform.OS === "web" && /*#__PURE__*/React.createElement(_DatePickerComponent.default, {
98
- value: getValidDate(),
99
- mode: mode,
100
- isVisible: pickerVisible,
101
- toggleVisibility: toggleVisibility,
102
- onChange: (_event, data) => {
103
- toggleVisibility();
104
- setValue(data);
105
- onDateChange(data);
106
- }
107
- }), _reactNative.Platform.OS === "ios" && /*#__PURE__*/React.createElement(_DatePickerComponent.default, {
108
- value: getValidDate(),
109
- mode: mode,
110
- displayMode: iosDisplay,
111
- isVisible: pickerVisible,
112
- toggleVisibility: toggleVisibility,
113
- onChange: (_event, data) => {
114
- toggleVisibility();
115
- setValue(data);
116
- onDateChange(data);
117
- }
118
- }), _reactNative.Platform.OS === "android" && /*#__PURE__*/React.createElement(_DatePickerComponent.default, {
119
- value: getValidDate(),
120
- mode: mode,
121
- variant: webDisplay,
122
- displayMode: androidDisplay,
123
- isVisible: pickerVisible,
124
- toggleVisibility: toggleVisibility,
125
- onChange: (_event, data) => {
126
- toggleVisibility();
127
- setValue(data);
128
- onDateChange(data);
129
- }
130
- }))));
131
- };
132
- var _default = DatePickerInput;
133
- exports.default = _default;
@@ -1,123 +0,0 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
- import * as React from "react";
3
- import { View, TextInput, Platform } from "react-native";
4
- import { useSafeAreaInsets } from "react-native-safe-area-context";
5
- import dateFormat from "dateformat";
6
- import Portal from "../Portal/Portal";
7
- import Touchable from "../Touchable";
8
- import DateTimePicker from "./DatePickerComponent";
9
- const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
10
- const DatePickerInput = _ref => {
11
- let {
12
- style,
13
- date,
14
- onDateChange = () => {},
15
- defaultValue,
16
- disabled = false,
17
- mode = "date",
18
- format,
19
- androidDisplay = "default",
20
- iosDisplay = "default",
21
- webDisplay = "dialog",
22
- placeholder,
23
- ...props
24
- } = _ref;
25
- const [value, setValue] = React.useState(date || defaultValue);
26
- React.useEffect(() => {
27
- if (defaultValue != null) {
28
- setValue(defaultValue);
29
- }
30
- }, [defaultValue]);
31
- const [pickerVisible, setPickerVisible] = React.useState(false);
32
- const [focused, setFocused] = React.useState(false);
33
- const getValidDate = () => {
34
- if (!value) {
35
- return new Date();
36
- }
37
- return typeof (value === null || value === void 0 ? void 0 : value.getMonth) === "function" ? value : new Date();
38
- };
39
- const formatDate = () => {
40
- if (!value) return "";
41
- let newDate = getValidDate();
42
- if (format) return dateFormat(newDate, format);
43
- if (mode === "time") {
44
- return "".concat(newDate.toLocaleTimeString());
45
- }
46
- if (mode === "datetime") {
47
- return "".concat(newDate.toLocaleString());
48
- }
49
- return "".concat(MONTHS[newDate.getMonth()], " ").concat(newDate.getDate(), ", ").concat(newDate.getFullYear());
50
- };
51
- const toggleVisibility = async () => {
52
- setPickerVisible(!pickerVisible);
53
- focused ? _handleBlur() : _handleFocus();
54
- };
55
- const insets = useSafeAreaInsets();
56
- React.useEffect(() => {
57
- setValue(date);
58
- }, [date]);
59
- const _handleFocus = () => {
60
- if (disabled) {
61
- return;
62
- }
63
- setFocused(true);
64
- };
65
- const _handleBlur = () => {
66
- if (disabled) {
67
- return;
68
- }
69
- setFocused(false);
70
- };
71
- return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Touchable, {
72
- disabled: disabled,
73
- onPress: toggleVisibility
74
- }, /*#__PURE__*/React.createElement(TextInput, _extends({
75
- value: formatDate(),
76
- placeholder: placeholder,
77
- editable: !disabled,
78
- onFocus: _handleFocus,
79
- onBlur: _handleBlur,
80
- style: style
81
- }, props))), pickerVisible && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
82
- style: {
83
- paddingTop: insets.top,
84
- paddingBottom: insets.bottom,
85
- paddingLeft: insets.left,
86
- paddingRight: insets.right
87
- }
88
- }, Platform.OS === "web" && /*#__PURE__*/React.createElement(DateTimePicker, {
89
- value: getValidDate(),
90
- mode: mode,
91
- isVisible: pickerVisible,
92
- toggleVisibility: toggleVisibility,
93
- onChange: (_event, data) => {
94
- toggleVisibility();
95
- setValue(data);
96
- onDateChange(data);
97
- }
98
- }), Platform.OS === "ios" && /*#__PURE__*/React.createElement(DateTimePicker, {
99
- value: getValidDate(),
100
- mode: mode,
101
- displayMode: iosDisplay,
102
- isVisible: pickerVisible,
103
- toggleVisibility: toggleVisibility,
104
- onChange: (_event, data) => {
105
- toggleVisibility();
106
- setValue(data);
107
- onDateChange(data);
108
- }
109
- }), Platform.OS === "android" && /*#__PURE__*/React.createElement(DateTimePicker, {
110
- value: getValidDate(),
111
- mode: mode,
112
- variant: webDisplay,
113
- displayMode: androidDisplay,
114
- isVisible: pickerVisible,
115
- toggleVisibility: toggleVisibility,
116
- onChange: (_event, data) => {
117
- toggleVisibility();
118
- setValue(data);
119
- onDateChange(data);
120
- }
121
- }))));
122
- };
123
- export default DatePickerInput;
@@ -1,18 +0,0 @@
1
- import * as React from "react";
2
- import { StyleProp, ViewStyle, TextInputProps } from "react-native";
3
- declare type Props = {
4
- style?: StyleProp<ViewStyle>;
5
- date?: Date;
6
- format?: string;
7
- onDateChange?: (data?: Date) => void;
8
- defaultValue?: Date;
9
- disabled?: boolean;
10
- mode?: "date" | "time" | "datetime";
11
- androidDisplay: "default" | "spinner" | "calendar" | "clock";
12
- iosDisplay: "default" | "spinner" | "compact" | "inline";
13
- webDisplay: "dialog" | "inline";
14
- placeholder?: string;
15
- } & TextInputProps;
16
- declare const DatePickerInput: React.FC<React.PropsWithChildren<Props>>;
17
- export default DatePickerInput;
18
- //# sourceMappingURL=DatePickerInput.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DatePickerInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePickerInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,SAAS,EACT,SAAS,EACT,cAAc,EAGf,MAAM,cAAc,CAAC;AAQtB,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,cAAc,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC7D,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACzD,UAAU,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,cAAc,CAAC;AAiBnB,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAmJ7D,CAAC;AAEF,eAAe,eAAe,CAAC"}
package/src/Provider.js DELETED
@@ -1,9 +0,0 @@
1
- import * as React from "react";
2
- import { ThemeProvider } from "./theming";
3
- import PortalHost from "./components/Portal/PortalHost";
4
- export default class Provider extends React.Component {
5
- render() {
6
- return (React.createElement(PortalHost, null,
7
- React.createElement(ThemeProvider, { theme: this.props.theme }, this.props.children)));
8
- }
9
- }
@@ -1,44 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, Pressable, } from "react-native";
3
- import Text from "../Text";
4
- import { withTheme } from "../../theming";
5
- import { extractStyles } from "../../utilities";
6
- const AccordionGroup = ({ label, expanded: expandedProp = false, openColor, closedColor, caretColor: caretColorProp, caretSize = 24, icon, iconSize = 24, style, children, theme, Icon, }) => {
7
- const [expanded, setExpanded] = React.useState(expandedProp);
8
- const { textStyles, viewStyles } = extractStyles(style);
9
- const expandedColor = openColor || theme.colors.primary;
10
- const collapsedColor = closedColor || theme.colors.primary;
11
- const labelColor = expanded ? expandedColor : collapsedColor;
12
- const caretColor = caretColorProp || labelColor;
13
- const handlePressAction = () => {
14
- setExpanded(!expanded);
15
- };
16
- return (React.createElement(React.Fragment, null,
17
- React.createElement(Pressable, { style: [styles.row, viewStyles], onPress: handlePressAction, accessibilityRole: "button" },
18
- icon ? (React.createElement(Icon, { name: icon, size: iconSize, color: labelColor, style: styles.icon })) : null,
19
- React.createElement(View, { style: styles.content },
20
- React.createElement(Text, { selectable: false, style: [
21
- textStyles,
22
- {
23
- color: labelColor,
24
- },
25
- ] }, label)),
26
- React.createElement(Icon, { name: expanded
27
- ? "MaterialIcons/keyboard-arrow-up"
28
- : "MaterialIcons/keyboard-arrow-down", color: caretColor, size: caretSize })),
29
- expanded ? children : null));
30
- };
31
- const styles = StyleSheet.create({
32
- row: {
33
- flexDirection: "row",
34
- alignItems: "center",
35
- },
36
- content: {
37
- flex: 1,
38
- justifyContent: "center",
39
- },
40
- icon: {
41
- marginRight: 8,
42
- },
43
- });
44
- export default withTheme(AccordionGroup);
@@ -1,32 +0,0 @@
1
- import * as React from "react";
2
- import { Pressable, StyleSheet, View, } from "react-native";
3
- import Text from "../Text";
4
- import { extractStyles } from "../../utilities";
5
- import { withTheme } from "../../theming";
6
- const AccordionItem = ({ Icon, icon, label, style, iconColor, theme, ...rest }) => {
7
- const { textStyles, viewStyles } = extractStyles(style);
8
- return (React.createElement(Pressable, { style: [styles.container, viewStyles], ...rest },
9
- React.createElement(View, { style: styles.row },
10
- icon ? (React.createElement(Icon, { name: icon, size: 24, color: iconColor || theme.colors.primary })) : null,
11
- React.createElement(View, { style: [styles.item, styles.content] },
12
- React.createElement(Text, { selectable: false, style: textStyles }, label)))));
13
- };
14
- const styles = StyleSheet.create({
15
- container: {
16
- padding: 8,
17
- },
18
- row: {
19
- flexDirection: "row",
20
- alignItems: "center",
21
- paddingLeft: 8,
22
- },
23
- item: {
24
- marginVertical: 6,
25
- paddingLeft: 8,
26
- },
27
- content: {
28
- flex: 1,
29
- justifyContent: "center",
30
- },
31
- });
32
- export default withTheme(AccordionItem);
@@ -1,2 +0,0 @@
1
- export { default as AccordionGroup } from "./AccordionGroup";
2
- export { default as AccordionItem } from "./AccordionItem";
@@ -1,45 +0,0 @@
1
- import React from "react";
2
- import { View, StyleSheet } from "react-native";
3
- import Portal from "../Portal/Portal";
4
- import Touchable from "../Touchable";
5
- import ActionSheetCancel from "./ActionSheetCancel";
6
- const ActionSheet = ({ visible = false, onClose, children }) => {
7
- return visible ? (React.createElement(Portal, null,
8
- React.createElement(Touchable, { style: styles.wrapper, onPress: onClose },
9
- React.createElement(View, { style: styles.overlay }),
10
- React.createElement(View, { style: styles.groupWrapper },
11
- React.createElement(View, { style: styles.group }, React.Children.toArray(children).filter((child) => (child === null || child === void 0 ? void 0 : child.type) !== ActionSheetCancel)),
12
- React.createElement(View, { style: styles.group }, React.Children.toArray(children).filter((child) => child.type === ActionSheetCancel)))))) : (React.createElement(React.Fragment, null));
13
- };
14
- const styles = StyleSheet.create({
15
- wrapper: {
16
- flex: 1,
17
- display: "flex",
18
- flexDirection: "column",
19
- },
20
- overlay: {
21
- position: "absolute",
22
- top: 0,
23
- left: 0,
24
- right: 0,
25
- bottom: 0,
26
- backgroundColor: "#000000",
27
- opacity: 0.3,
28
- },
29
- groupWrapper: {
30
- flex: 1,
31
- flexDirection: "column",
32
- justifyContent: "flex-end",
33
- display: "flex",
34
- marginBottom: 25,
35
- },
36
- group: {
37
- display: "flex",
38
- flexDirection: "column",
39
- borderRadius: 10,
40
- marginHorizontal: 7,
41
- marginVertical: 2.5,
42
- overflow: "hidden",
43
- },
44
- });
45
- export default ActionSheet;
@@ -1,6 +0,0 @@
1
- import React from "react";
2
- import ActionSheetItem from "./ActionSheetItem";
3
- const ActionSheetCancel = ({ label = "Cancel", color, style, onPress, }) => {
4
- return (React.createElement(ActionSheetItem, { label: label, color: color || "#FF453A", style: [style], onPress: onPress }));
5
- };
6
- export default ActionSheetCancel;