@draftbit/core 46.7.3 → 46.7.4

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 (287) hide show
  1. package/lib/commonjs/components/Accordion/AccordionItem.js +4 -23
  2. package/lib/commonjs/components/AnimatedCircularProgress.js +1 -12
  3. package/lib/commonjs/components/AvatarEdit.js +4 -15
  4. package/lib/commonjs/components/Button.js +10 -33
  5. package/lib/commonjs/components/Checkbox/Checkbox.js +4 -22
  6. package/lib/commonjs/components/Container.js +4 -15
  7. package/lib/commonjs/components/DeprecatedButton.js +3 -20
  8. package/lib/commonjs/components/DeprecatedCardWrapper.js +1 -15
  9. package/lib/commonjs/components/Divider.js +1 -14
  10. package/lib/commonjs/components/Image.js +2 -17
  11. package/lib/commonjs/components/Justification.js +1 -5
  12. package/lib/commonjs/components/Picker/Picker.js +4 -9
  13. package/lib/commonjs/components/Portal/PortalHost.js +15 -44
  14. package/lib/commonjs/components/Portal/PortalManager.js +8 -34
  15. package/lib/commonjs/components/ProgressBar.js +7 -37
  16. package/lib/commonjs/components/ResizeMode.js +1 -5
  17. package/lib/commonjs/components/Slider.js +4 -21
  18. package/lib/commonjs/components/Surface.js +2 -14
  19. package/lib/commonjs/components/TextField.js +28 -76
  20. package/lib/commonjs/components/Touchable.js +2 -15
  21. package/lib/commonjs/hooks.js +2 -1
  22. package/lib/commonjs/index.js +0 -56
  23. package/lib/commonjs/mappings/StarRating.js +2 -6
  24. package/lib/commonjs/utilities.js +2 -1
  25. package/lib/module/components/Button.js +10 -33
  26. package/lib/module/components/Checkbox/CheckboxGroupRow.js +5 -24
  27. package/lib/module/components/Checkbox/context.js +1 -1
  28. package/lib/module/components/CircleImage.js +1 -16
  29. package/lib/module/components/DeprecatedCardWrapper.js +1 -18
  30. package/lib/module/components/Divider.js +1 -18
  31. package/lib/module/components/Elevation.js +2 -14
  32. package/lib/module/components/FieldSearchBarFull.js +2 -1
  33. package/lib/module/components/FormRow.js +2 -17
  34. package/lib/module/components/Image.js +2 -18
  35. package/lib/module/components/Justification.js +0 -1
  36. package/lib/module/components/Layout.js +21 -42
  37. package/lib/module/components/NumberInput.js +3 -12
  38. package/lib/module/components/Picker/PickerComponent.ios.js +11 -36
  39. package/lib/module/components/Portal/PortalConsumer.js +7 -22
  40. package/lib/module/components/RadioButton/RadioButton.js +1 -13
  41. package/lib/module/components/RadioButton/RadioButtonGroup.js +2 -16
  42. package/lib/module/components/RadioButton/RadioButtonRow.js +5 -24
  43. package/lib/module/components/ResizeMode.js +0 -1
  44. package/lib/module/components/Slider.js +4 -21
  45. package/lib/module/components/StepIndicator.js +18 -58
  46. package/lib/module/components/TextField.js +28 -78
  47. package/lib/module/components/ToggleButton.js +2 -16
  48. package/lib/module/components/Touchable.js +2 -15
  49. package/lib/module/constants.js +2 -1
  50. package/lib/module/index.js +0 -8
  51. package/lib/module/mappings/FieldSearchBarFull.js +1 -4
  52. package/lib/module/styles/overlay.js +3 -1
  53. package/lib/module/utilities.js +2 -1
  54. package/lib/typescript/src/index.d.ts +0 -8
  55. package/lib/typescript/src/index.d.ts.map +1 -1
  56. package/package.json +3 -3
  57. package/src/index.tsx +0 -8
  58. package/lib/commonjs/components/CardBlock.js +0 -115
  59. package/lib/commonjs/components/CardContainer.js +0 -138
  60. package/lib/commonjs/components/CardContainerRating.js +0 -133
  61. package/lib/commonjs/components/CardContainerShortImage.js +0 -84
  62. package/lib/commonjs/components/CardInline.js +0 -91
  63. package/lib/commonjs/components/Carousel.js +0 -130
  64. package/lib/commonjs/components/Header.js +0 -82
  65. package/lib/commonjs/components/HeaderLarge.js +0 -38
  66. package/lib/commonjs/components/HeaderMedium.js +0 -38
  67. package/lib/commonjs/components/HeaderOverline.js +0 -39
  68. package/lib/module/components/CardBlock.js +0 -108
  69. package/lib/module/components/CardContainer.js +0 -121
  70. package/lib/module/components/CardContainerRating.js +0 -135
  71. package/lib/module/components/CardContainerShortImage.js +0 -90
  72. package/lib/module/components/CardInline.js +0 -82
  73. package/lib/module/components/Carousel.js +0 -120
  74. package/lib/module/components/Header.js +0 -72
  75. package/lib/module/components/HeaderLarge.js +0 -28
  76. package/lib/module/components/HeaderMedium.js +0 -28
  77. package/lib/module/components/HeaderOverline.js +0 -29
  78. package/lib/typescript/src/components/CardBlock.d.ts +0 -21
  79. package/lib/typescript/src/components/CardBlock.d.ts.map +0 -1
  80. package/lib/typescript/src/components/CardContainer.d.ts +0 -23
  81. package/lib/typescript/src/components/CardContainer.d.ts.map +0 -1
  82. package/lib/typescript/src/components/CardContainerRating.d.ts +0 -24
  83. package/lib/typescript/src/components/CardContainerRating.d.ts.map +0 -1
  84. package/lib/typescript/src/components/CardContainerShortImage.d.ts +0 -19
  85. package/lib/typescript/src/components/CardContainerShortImage.d.ts.map +0 -1
  86. package/lib/typescript/src/components/CardInline.d.ts +0 -20
  87. package/lib/typescript/src/components/CardInline.d.ts.map +0 -1
  88. package/lib/typescript/src/components/Carousel.d.ts +0 -15
  89. package/lib/typescript/src/components/Carousel.d.ts.map +0 -1
  90. package/lib/typescript/src/components/Header.d.ts +0 -20
  91. package/lib/typescript/src/components/Header.d.ts.map +0 -1
  92. package/lib/typescript/src/components/HeaderLarge.d.ts +0 -17
  93. package/lib/typescript/src/components/HeaderLarge.d.ts.map +0 -1
  94. package/lib/typescript/src/components/HeaderMedium.d.ts +0 -17
  95. package/lib/typescript/src/components/HeaderMedium.d.ts.map +0 -1
  96. package/lib/typescript/src/components/HeaderOverline.d.ts +0 -17
  97. package/lib/typescript/src/components/HeaderOverline.d.ts.map +0 -1
  98. package/src/Provider.js +0 -9
  99. package/src/components/Accordion/AccordionGroup.js +0 -44
  100. package/src/components/Accordion/AccordionItem.js +0 -32
  101. package/src/components/Accordion/index.js +0 -2
  102. package/src/components/ActionSheet/ActionSheet.js +0 -45
  103. package/src/components/ActionSheet/ActionSheetCancel.js +0 -6
  104. package/src/components/ActionSheet/ActionSheetItem.js +0 -30
  105. package/src/components/ActionSheet/index.js +0 -3
  106. package/src/components/AnimatedCircularProgress.js +0 -43
  107. package/src/components/AspectRatio.js +0 -18
  108. package/src/components/AvatarEdit.js +0 -30
  109. package/src/components/Banner.js +0 -109
  110. package/src/components/Button.js +0 -114
  111. package/src/components/Card.js +0 -57
  112. package/src/components/CardBlock.js +0 -54
  113. package/src/components/CardBlock.tsx +0 -127
  114. package/src/components/CardContainer.js +0 -69
  115. package/src/components/CardContainer.tsx +0 -165
  116. package/src/components/CardContainerRating.js +0 -79
  117. package/src/components/CardContainerRating.tsx +0 -175
  118. package/src/components/CardContainerShortImage.js +0 -33
  119. package/src/components/CardContainerShortImage.tsx +0 -101
  120. package/src/components/CardInline.js +0 -36
  121. package/src/components/CardInline.tsx +0 -93
  122. package/src/components/Carousel.js +0 -68
  123. package/src/components/Carousel.tsx +0 -134
  124. package/src/components/Checkbox/Checkbox.js +0 -62
  125. package/src/components/Checkbox/CheckboxGroup.js +0 -21
  126. package/src/components/Checkbox/CheckboxGroupRow.js +0 -76
  127. package/src/components/Checkbox/CheckboxRow.js +0 -77
  128. package/src/components/Checkbox/context.js +0 -14
  129. package/src/components/Checkbox/index.js +0 -3
  130. package/src/components/CircleImage.js +0 -8
  131. package/src/components/CircularProgress.js +0 -81
  132. package/src/components/Config.js +0 -64
  133. package/src/components/Container.js +0 -43
  134. package/src/components/DatePicker/DatePicker.js +0 -377
  135. package/src/components/DatePicker/DatePickerComponent.js +0 -13
  136. package/src/components/DatePicker/DatePickerComponent.web.js +0 -30
  137. package/src/components/DatePicker/DatePickerComponentType.js +0 -1
  138. package/src/components/DeprecatedButton.js +0 -83
  139. package/src/components/DeprecatedCardWrapper.js +0 -18
  140. package/src/components/DeprecatedFAB.js +0 -114
  141. package/src/components/Divider.js +0 -13
  142. package/src/components/Elevation.js +0 -20
  143. package/src/components/FAB.js +0 -46
  144. package/src/components/FieldSearchBarFull.js +0 -53
  145. package/src/components/FormRow.js +0 -19
  146. package/src/components/Header.js +0 -44
  147. package/src/components/Header.tsx +0 -105
  148. package/src/components/HeaderLarge.js +0 -7
  149. package/src/components/HeaderLarge.tsx +0 -40
  150. package/src/components/HeaderMedium.js +0 -7
  151. package/src/components/HeaderMedium.tsx +0 -41
  152. package/src/components/HeaderOverline.js +0 -7
  153. package/src/components/HeaderOverline.tsx +0 -42
  154. package/src/components/IconButton.js +0 -35
  155. package/src/components/Image.js +0 -47
  156. package/src/components/Justification.js +0 -1
  157. package/src/components/Layout.js +0 -50
  158. package/src/components/NumberInput.js +0 -49
  159. package/src/components/Picker/Picker.js +0 -267
  160. package/src/components/Picker/PickerComponent.android.js +0 -69
  161. package/src/components/Picker/PickerComponent.ios.js +0 -79
  162. package/src/components/Picker/PickerComponent.web.js +0 -70
  163. package/src/components/Picker/PickerTypes.js +0 -1
  164. package/src/components/Portal/Portal.js +0 -35
  165. package/src/components/Portal/PortalConsumer.js +0 -27
  166. package/src/components/Portal/PortalHost.js +0 -107
  167. package/src/components/Portal/PortalManager.js +0 -32
  168. package/src/components/Pressable.js +0 -12
  169. package/src/components/ProgressBar.js +0 -118
  170. package/src/components/ProgressCircle.js +0 -13
  171. package/src/components/ProgressIndicator.js +0 -27
  172. package/src/components/RadioButton/RadioButton.js +0 -17
  173. package/src/components/RadioButton/RadioButtonFieldGroup.js +0 -17
  174. package/src/components/RadioButton/RadioButtonGroup.js +0 -43
  175. package/src/components/RadioButton/RadioButtonRow.js +0 -76
  176. package/src/components/RadioButton/context.js +0 -14
  177. package/src/components/RadioButton/index.js +0 -4
  178. package/src/components/ResizeMode.js +0 -1
  179. package/src/components/Row.js +0 -48
  180. package/src/components/RowBodyIcon.js +0 -8
  181. package/src/components/RowHeadlineImageCaption.js +0 -12
  182. package/src/components/RowHeadlineImageIcon.js +0 -14
  183. package/src/components/SVG.js +0 -13
  184. package/src/components/ScreenContainer.js +0 -34
  185. package/src/components/Slider.js +0 -63
  186. package/src/components/StarRating.js +0 -50
  187. package/src/components/StepIndicator.js +0 -346
  188. package/src/components/Stepper.js +0 -41
  189. package/src/components/Surface.js +0 -32
  190. package/src/components/Swiper/Swiper.js +0 -29
  191. package/src/components/Swiper/SwiperItem.js +0 -9
  192. package/src/components/Swiper/index.js +0 -2
  193. package/src/components/Switch.js +0 -56
  194. package/src/components/Text.js +0 -33
  195. package/src/components/TextField.js +0 -428
  196. package/src/components/ToggleButton.js +0 -39
  197. package/src/components/Touchable.js +0 -12
  198. package/src/components/Touchable.web.js +0 -2
  199. package/src/components/Typography.js +0 -36
  200. package/src/components/useAuthState.js +0 -31
  201. package/src/constants.js +0 -10
  202. package/src/hooks.js +0 -12
  203. package/src/index.js +0 -53
  204. package/src/interfaces/Icon.js +0 -8
  205. package/src/mappings/Accordion.js +0 -41
  206. package/src/mappings/AccordionItem.js +0 -16
  207. package/src/mappings/ActionSheet.js +0 -13
  208. package/src/mappings/ActionSheetCancel.js +0 -19
  209. package/src/mappings/ActionSheetItem.js +0 -23
  210. package/src/mappings/ActivityIndicator.js +0 -58
  211. package/src/mappings/AudioPlayer.js +0 -57
  212. package/src/mappings/AvatarEdit.js +0 -38
  213. package/src/mappings/Banner.js +0 -32
  214. package/src/mappings/BlurView.js +0 -42
  215. package/src/mappings/Button.js +0 -116
  216. package/src/mappings/Card.js +0 -52
  217. package/src/mappings/CardBlock.js +0 -123
  218. package/src/mappings/CardContainer.js +0 -104
  219. package/src/mappings/CardContainerRating.js +0 -126
  220. package/src/mappings/CardContainerShortImage.js +0 -120
  221. package/src/mappings/CardInline.js +0 -52
  222. package/src/mappings/Carousel.js +0 -19
  223. package/src/mappings/Checkbox.js +0 -46
  224. package/src/mappings/CheckboxGroup.js +0 -26
  225. package/src/mappings/CheckboxRow.js +0 -61
  226. package/src/mappings/CircleImage.js +0 -25
  227. package/src/mappings/Container.js +0 -30
  228. package/src/mappings/CustomCode.js +0 -8
  229. package/src/mappings/DatePicker.js +0 -176
  230. package/src/mappings/Divider.js +0 -27
  231. package/src/mappings/FAB.js +0 -37
  232. package/src/mappings/Fetch.js +0 -13
  233. package/src/mappings/FieldSearchBarFull.js +0 -50
  234. package/src/mappings/FlashList.js +0 -85
  235. package/src/mappings/FlatList.js +0 -37
  236. package/src/mappings/HeaderLarge.js +0 -29
  237. package/src/mappings/HeaderMedium.js +0 -55
  238. package/src/mappings/HeaderOverline.js +0 -55
  239. package/src/mappings/Icon.js +0 -32
  240. package/src/mappings/IconButton.js +0 -35
  241. package/src/mappings/Image.js +0 -35
  242. package/src/mappings/ImageBackground.js +0 -29
  243. package/src/mappings/KeyboardAvoidingView.js +0 -41
  244. package/src/mappings/KeyboardAwareScrollView.js +0 -50
  245. package/src/mappings/Layout.js +0 -200
  246. package/src/mappings/LinearGradient.js +0 -77
  247. package/src/mappings/MapCallout.js +0 -21
  248. package/src/mappings/MapMarker.js +0 -47
  249. package/src/mappings/MapView.js +0 -139
  250. package/src/mappings/Modal.js +0 -42
  251. package/src/mappings/NumberInput.js +0 -254
  252. package/src/mappings/Picker.js +0 -148
  253. package/src/mappings/ProgressBar.js +0 -101
  254. package/src/mappings/ProgressCircle.js +0 -109
  255. package/src/mappings/ProgressIndicator.js +0 -181
  256. package/src/mappings/RadioButton.js +0 -51
  257. package/src/mappings/RadioButtonGroup.js +0 -17
  258. package/src/mappings/RadioButtonRow.js +0 -42
  259. package/src/mappings/RowBodyIcon.js +0 -75
  260. package/src/mappings/RowHeadlineImageCaption.js +0 -167
  261. package/src/mappings/RowHeadlineImageIcon.js +0 -99
  262. package/src/mappings/SVG.js +0 -20
  263. package/src/mappings/SafeAreaView.js +0 -33
  264. package/src/mappings/ScrollView.js +0 -31
  265. package/src/mappings/Slider.js +0 -60
  266. package/src/mappings/StarRating.js +0 -43
  267. package/src/mappings/Stepper.js +0 -32
  268. package/src/mappings/Surface.js +0 -14
  269. package/src/mappings/Swiper.js +0 -62
  270. package/src/mappings/SwiperItem.js +0 -8
  271. package/src/mappings/Switch.js +0 -81
  272. package/src/mappings/Text.js +0 -251
  273. package/src/mappings/TextArea.js +0 -274
  274. package/src/mappings/TextField.js +0 -391
  275. package/src/mappings/TextInput.js +0 -402
  276. package/src/mappings/ToggleButton.js +0 -50
  277. package/src/mappings/Touchable.js +0 -60
  278. package/src/mappings/Video.js +0 -81
  279. package/src/mappings/View.js +0 -207
  280. package/src/mappings/WebView.js +0 -88
  281. package/src/styles/DarkTheme.js +0 -26
  282. package/src/styles/DefaultTheme.js +0 -111
  283. package/src/styles/fonts.js +0 -62
  284. package/src/styles/overlay.js +0 -60
  285. package/src/styles/shadow.js +0 -51
  286. package/src/theming.js +0 -3
  287. package/src/utilities.js +0 -102
@@ -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);
@@ -1,428 +0,0 @@
1
- import * as React from "react";
2
- import { View, Animated, TextInput as NativeTextInput, StyleSheet, Text, I18nManager, } from "react-native";
3
- import { withTheme } from "../theming";
4
- import { applyStyles, extractStyles } from "../utilities";
5
- const AnimatedText = Animated.createAnimatedComponent(Text);
6
- const FOCUS_ANIMATION_DURATION = 150;
7
- const BLUR_ANIMATION_DURATION = 180;
8
- const ICON_SIZE = 24;
9
- class TextField extends React.Component {
10
- constructor() {
11
- super(...arguments);
12
- this.state = {
13
- nativeProps: {},
14
- labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
15
- focused: false,
16
- placeholder: this.props.error ? this.props.placeholder : "",
17
- labelLayout: {
18
- measured: false,
19
- width: 0,
20
- },
21
- };
22
- this._timer = setTimeout(() => { }, 0);
23
- this._showPlaceholder = () => {
24
- clearTimeout(this._timer);
25
- // Set the placeholder in a delay to offset the label animation
26
- // If we show it immediately, they'll overlap and look ugly
27
- this._timer = setTimeout(() => this.setState({
28
- placeholder: this.props.placeholder,
29
- }), 50);
30
- };
31
- this._hidePlaceholder = () => this.setState({
32
- placeholder: "",
33
- });
34
- this._restoreLabel = () => Animated.timing(this.state.labeled, {
35
- toValue: 1,
36
- duration: FOCUS_ANIMATION_DURATION,
37
- useNativeDriver: true,
38
- }).start();
39
- this._minmizeLabel = () => Animated.timing(this.state.labeled, {
40
- toValue: 0,
41
- duration: BLUR_ANIMATION_DURATION,
42
- useNativeDriver: true,
43
- }).start();
44
- this._handleFocus = () => {
45
- if (this.props.disabled) {
46
- return;
47
- }
48
- this.setState({ focused: true });
49
- };
50
- this._handleBlur = () => {
51
- if (this.props.disabled) {
52
- return;
53
- }
54
- this.setState({ focused: false });
55
- };
56
- this._handleChangeText = (value) => {
57
- if (this.props.disabled) {
58
- return;
59
- }
60
- if (typeof value === "string") {
61
- this.setState({ value });
62
- this.props.onChangeText && this.props.onChangeText(value);
63
- }
64
- else {
65
- this.setState({ value: value.nativeEvent.text });
66
- this.props.onChangeText &&
67
- this.props.onChangeText(value.nativeEvent.text);
68
- }
69
- };
70
- this._root = undefined;
71
- }
72
- static getDerivedStateFromProps(nextProps, prevState) {
73
- return {
74
- value: typeof nextProps.value !== "undefined"
75
- ? nextProps.value
76
- : prevState.value,
77
- };
78
- }
79
- componentDidMount() {
80
- if (this.props.defaultValue) {
81
- this._handleChangeText(this.props.defaultValue);
82
- }
83
- if (this.props.placeholder) {
84
- this._minmizeLabel();
85
- }
86
- }
87
- componentDidUpdate(prevProps, prevState) {
88
- if (prevState.focused !== this.state.focused ||
89
- prevState.value !== this.state.value) {
90
- // The label should be minimized if the text input is focused, or has text
91
- // In minimized mode, the label moves up and becomes small
92
- if (this.state.value ||
93
- this.state.focused ||
94
- this.props.error ||
95
- this.props.placeholder) {
96
- this._minmizeLabel();
97
- }
98
- else {
99
- this._restoreLabel();
100
- }
101
- }
102
- if (prevState.focused !== this.state.focused ||
103
- prevProps.label !== this.props.label) {
104
- // Show placeholder text only if the input is focused, or has error, or there's no label
105
- // We don't show placeholder if there's a label because the label acts as placeholder
106
- // When focused, the label moves up, so we can show a placeholder
107
- if (this.state.focused || this.props.error || !this.props.label) {
108
- this._showPlaceholder();
109
- }
110
- else {
111
- this._hidePlaceholder();
112
- }
113
- }
114
- }
115
- componentWillUnmount() {
116
- clearTimeout(this._timer);
117
- }
118
- toggleFocus() {
119
- this.setState((prevState) => ({ focused: !prevState.focused }));
120
- }
121
- /**
122
- * @internal
123
- */
124
- setNativeProps(args) {
125
- this.setState((state) => ({
126
- ...state,
127
- nativeState: args || {},
128
- }));
129
- }
130
- isFocused() {
131
- return this._root && this._root.isFocused();
132
- }
133
- clear() {
134
- return this._root && this._root.clear();
135
- }
136
- focus() {
137
- return this._root && this._root.focus();
138
- }
139
- blur() {
140
- return this._root && this._root.blur();
141
- }
142
- render() {
143
- const { Icon, type = "underline", disabled = false, label, error = false, leftIconName, leftIconMode, rightIconName, assistiveText, underlineColor: underlineColorProp, activeBorderColor: activeBorderColorProp, multiline = false, numberOfLines = 4, style, theme: { colors, typography, roundness, disabledOpacity }, render = (props) => React.createElement(NativeTextInput, { ...props }), ...rest } = this.props;
144
- const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
145
- const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
146
- const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
147
- const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
148
- const hasActiveOutline = this.state.focused || error;
149
- let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
150
- inputTextColor = colors.strong;
151
- if (disabled) {
152
- activeColor = colors.light;
153
- placeholderColor = colors.light;
154
- borderColor = "transparent";
155
- underlineColor = "transparent";
156
- backgroundColor = colors.divider;
157
- }
158
- else {
159
- activeColor = error ? colors.error : activeBorderColorProp;
160
- placeholderColor = borderColor = colors.light;
161
- underlineColor = underlineColorProp;
162
- backgroundColor = colors.background;
163
- }
164
- if (rest.placeholderTextColor) {
165
- placeholderColor = rest.placeholderTextColor;
166
- }
167
- const { lineHeight, ...subtitle1 } = typography.subtitle1;
168
- inputStyle = {
169
- paddingVertical: 0,
170
- color: inputTextColor,
171
- paddingLeft: leftIconName && leftIconMode === "inset"
172
- ? ICON_SIZE + 12 + (type === "solid" ? 16 : 0)
173
- : 0,
174
- paddingRight: rightIconName ? ICON_SIZE + 16 + 4 : 12,
175
- ...subtitle1,
176
- };
177
- if (!multiline) {
178
- inputStyle.height = lineHeight;
179
- }
180
- let assistiveTextLeftMargin;
181
- if (type === "underline") {
182
- containerStyle = {
183
- borderTopLeftRadius: roundness,
184
- borderTopRightRadius: roundness,
185
- paddingBottom: 12,
186
- marginTop: 16,
187
- };
188
- if (leftIconName && leftIconMode === "outset") {
189
- assistiveTextLeftMargin = ICON_SIZE + 8;
190
- }
191
- else {
192
- assistiveTextLeftMargin = 0;
193
- }
194
- }
195
- else {
196
- containerStyle = {
197
- borderRadius: roundness,
198
- borderColor: hasActiveOutline ? activeColor : borderColor,
199
- borderWidth: 1,
200
- paddingTop: label ? 16 * 1.5 : 16,
201
- paddingBottom: label ? 16 * 0.5 : 16,
202
- opacity: disabled ? disabledOpacity : 1,
203
- backgroundColor,
204
- };
205
- if (leftIconName && leftIconMode === "inset") {
206
- assistiveTextLeftMargin = 16 + 4;
207
- }
208
- else if (leftIconName && leftIconMode === "outset") {
209
- assistiveTextLeftMargin = ICON_SIZE + 8 + 12;
210
- }
211
- else {
212
- assistiveTextLeftMargin = 12;
213
- }
214
- inputStyle.paddingHorizontal = 12;
215
- }
216
- if (leftIconName && leftIconMode === "outset") {
217
- containerStyle.marginLeft = ICON_SIZE + 8;
218
- }
219
- let leftIconColor;
220
- if (error) {
221
- leftIconColor = colors.error;
222
- }
223
- else if (this.state.focused) {
224
- leftIconColor = colors.primary;
225
- }
226
- else {
227
- leftIconColor = colors.light;
228
- }
229
- const leftIconProps = {
230
- size: 24,
231
- color: leftIconColor,
232
- name: leftIconName || "",
233
- };
234
- const leftIconStyle = {
235
- position: "absolute",
236
- marginTop: type === "solid"
237
- ? MINIMIZED_LABEL_FONT_SIZE + 4
238
- : leftIconMode === "outset"
239
- ? 16
240
- : 0,
241
- marginLeft: leftIconMode === "inset" && type === "solid" ? 16 : 0,
242
- };
243
- const labelStyle = {
244
- ...typography.subtitle1,
245
- top: type === "solid" ? 16 : 0,
246
- left: leftIconName && leftIconMode === "inset"
247
- ? ICON_SIZE + (type === "solid" ? 16 : 12)
248
- : 0,
249
- transform: [
250
- {
251
- // Move label to top
252
- translateY: this.state.labeled.interpolate({
253
- inputRange: [0, 1],
254
- outputRange: [
255
- type === "solid"
256
- ? OUTLINE_MINIMIZED_LABEL_Y_OFFSET
257
- : MINIMIZED_LABEL_Y_OFFSET,
258
- 0,
259
- ],
260
- }),
261
- },
262
- {
263
- // Make label smaller
264
- scale: this.state.labeled.interpolate({
265
- inputRange: [0, 1],
266
- outputRange: [
267
- MINIMIZED_LABEL_FONT_SIZE / MAXIMIZED_LABEL_FONT_SIZE,
268
- 1,
269
- ],
270
- }),
271
- },
272
- {
273
- // Offset label scale since RN doesn't support transform origin
274
- translateX: this.state.labeled.interpolate({
275
- inputRange: [0, 1],
276
- outputRange: [
277
- -(1 - MINIMIZED_LABEL_FONT_SIZE / MAXIMIZED_LABEL_FONT_SIZE) *
278
- (this.state.labelLayout.width / 2),
279
- 0,
280
- ],
281
- }),
282
- },
283
- ],
284
- };
285
- const { textStyles } = extractStyles(style);
286
- const inputStyles = applyStyles([
287
- styles.input,
288
- inputStyle,
289
- type === "solid" ? { marginHorizontal: 12 } : {},
290
- ], textStyles);
291
- const { backgroundColor: bgColor, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, borderRadius, borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderColor: borderCol, ...styleProp } = StyleSheet.flatten(style || {});
292
- return (React.createElement(View, { style: [styles.container, styleProp] },
293
- leftIconName && leftIconMode === "outset" ? (React.createElement(Icon, { ...leftIconProps, style: leftIconStyle })) : null,
294
- React.createElement(View, { style: applyStyles([containerStyle], {
295
- height: style === null || style === void 0 ? void 0 : style.height,
296
- backgroundColor: bgColor,
297
- padding,
298
- paddingTop,
299
- paddingBottom,
300
- paddingLeft,
301
- paddingRight,
302
- borderRadius,
303
- borderWidth,
304
- borderTopWidth,
305
- borderRightWidth,
306
- borderBottomWidth,
307
- borderLeftWidth,
308
- borderColor: borderCol,
309
- }) },
310
- type === "underline" ? (
311
- // When type === 'flat', render an underline
312
- React.createElement(Animated.View, { style: [
313
- styles.underline,
314
- {
315
- backgroundColor: bgColor ||
316
- (error
317
- ? colors.error
318
- : this.state.focused
319
- ? activeColor
320
- : underlineColor),
321
- // Underlines is thinner when input is not focused
322
- transform: [{ scaleY: this.state.focused ? 1 : 0.5 }],
323
- },
324
- ] })) : null,
325
- label ? (
326
- // Position colored placeholder and gray placeholder on top of each other and crossfade them
327
- // This gives the effect of animating the color, but allows us to use native driver
328
- React.createElement(View, { pointerEvents: "none", style: [
329
- StyleSheet.absoluteFill,
330
- {
331
- opacity:
332
- // Hide the label in minimized state until we measure its width
333
- this.state.value || this.state.focused
334
- ? this.state.labelLayout.measured
335
- ? 1
336
- : 0
337
- : 1,
338
- },
339
- ] },
340
- React.createElement(AnimatedText, { onLayout: (e) => this.setState({
341
- labelLayout: {
342
- width: e.nativeEvent.layout.width,
343
- measured: true,
344
- },
345
- }), style: [
346
- styles.placeholder,
347
- type === "solid" ? { paddingHorizontal: 12 } : {},
348
- labelStyle,
349
- {
350
- color: placeholderColor,
351
- opacity: this.state.labeled.interpolate({
352
- inputRange: [0, 1],
353
- outputRange: [hasActiveOutline ? 1 : 0, 0],
354
- }),
355
- },
356
- ], numberOfLines: 1 }, label),
357
- React.createElement(AnimatedText, { style: [
358
- styles.placeholder,
359
- type === "solid" ? { paddingHorizontal: 12 } : {},
360
- labelStyle,
361
- {
362
- color: placeholderColor,
363
- opacity: hasActiveOutline ? this.state.labeled : 1,
364
- },
365
- ], numberOfLines: 1 }, label))) : null,
366
- leftIconName && leftIconMode === "inset" ? (React.createElement(View, { style: {
367
- justifyContent: type === "solid" ? "center" : undefined,
368
- } },
369
- React.createElement(Icon, { ...leftIconProps, style: leftIconStyle }))) : null,
370
- render({
371
- ref: (c) => {
372
- this._root = c;
373
- },
374
- onChange: this._handleChangeText,
375
- placeholder: label
376
- ? this.state.placeholder
377
- : this.props.placeholder,
378
- placeholderTextColor: placeholderColor,
379
- editable: !disabled,
380
- selectionColor: activeColor,
381
- multiline,
382
- numberOfLines,
383
- onFocus: this._handleFocus,
384
- onBlur: this._handleBlur,
385
- underlineColorAndroid: "transparent",
386
- style: inputStyles,
387
- ...rest,
388
- ...this.state.nativeProps,
389
- value: this.state.value,
390
- })),
391
- rightIconName ? (React.createElement(Icon, { name: rightIconName, size: ICON_SIZE, color: colors.light, style: {
392
- position: "absolute",
393
- right: 16,
394
- marginTop: type === "solid" ? MINIMIZED_LABEL_FONT_SIZE + 4 : 16,
395
- } })) : null,
396
- assistiveText ? (React.createElement(Text, { style: [
397
- {
398
- color: error ? colors.error : colors.light,
399
- marginTop: 8,
400
- marginLeft: assistiveTextLeftMargin,
401
- },
402
- ] }, assistiveText)) : null));
403
- }
404
- }
405
- export default withTheme(TextField);
406
- const styles = StyleSheet.create({
407
- container: {
408
- alignSelf: "stretch",
409
- },
410
- placeholder: {
411
- position: "absolute",
412
- left: 0,
413
- },
414
- underline: {
415
- position: "absolute",
416
- left: 0,
417
- right: 0,
418
- bottom: 0,
419
- height: 2,
420
- },
421
- input: {
422
- flexGrow: 1,
423
- justifyContent: "center",
424
- textAlignVertical: "center",
425
- margin: 0,
426
- textAlign: I18nManager.isRTL ? "right" : "left",
427
- },
428
- });
@@ -1,39 +0,0 @@
1
- import * as React from "react";
2
- import { withTheme } from "../theming";
3
- import { StyleSheet } from "react-native";
4
- import IconButton from "./IconButton";
5
- const ToggleButton = ({ Icon, icon, toggled = false, onPress = () => { }, defaultValue, disabled = false, color = "primary", colorSecondary = "surface", borderColor = "divider", iconSize = 25, width = 50, height = 50, theme: { colors }, style, ...rest }) => {
6
- const [internalValue, setInternalValue] = React.useState(toggled || defaultValue || false);
7
- React.useEffect(() => {
8
- if (toggled != null) {
9
- setInternalValue(toggled);
10
- }
11
- }, [toggled]);
12
- React.useEffect(() => {
13
- if (defaultValue != null) {
14
- setInternalValue(defaultValue);
15
- }
16
- }, [defaultValue]);
17
- const handlePress = () => {
18
- setInternalValue(!internalValue);
19
- onPress(!internalValue);
20
- };
21
- return (React.createElement(IconButton, { Icon: Icon, icon: icon, size: iconSize, color: internalValue ? colors[color] : colors[colorSecondary], onPress: handlePress, disabled: disabled, style: [
22
- styles.mainContainer,
23
- {
24
- width,
25
- height,
26
- backgroundColor: internalValue
27
- ? colors[colorSecondary]
28
- : colors[color],
29
- borderColor: colors[borderColor],
30
- },
31
- style,
32
- ], ...rest }));
33
- };
34
- const styles = StyleSheet.create({
35
- mainContainer: {
36
- borderWidth: 1,
37
- },
38
- });
39
- export default withTheme(ToggleButton);
@@ -1,12 +0,0 @@
1
- import React from "react";
2
- import { Pressable } from "react-native";
3
- export default function Touchable({ children, disabled, onPress, activeOpacity, disabledOpacity, delayLongPress, hitSlop, style, ...props }) {
4
- return (React.createElement(Pressable, { disabled: disabled, onPress: onPress, delayLongPress: delayLongPress ? delayLongPress : 500, hitSlop: hitSlop ? hitSlop : 8, style: ({ pressed }) => {
5
- return [
6
- {
7
- opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
8
- },
9
- style,
10
- ];
11
- }, ...props }, children));
12
- }
@@ -1,2 +0,0 @@
1
- import { TouchableOpacity } from "react-native";
2
- export default TouchableOpacity;
@@ -1,36 +0,0 @@
1
- import React from "react";
2
- import { Text } from "react-native";
3
- import { withTheme } from "../theming";
4
- export const Title = withTheme(({ text, theme, style }) => {
5
- return (React.createElement(Text, { style: [
6
- {
7
- fontSize: 20,
8
- letterSpacing: 0,
9
- lineHeight: 26,
10
- color: theme.colors.text,
11
- },
12
- style,
13
- ] }, text));
14
- });
15
- export const Subtitle = withTheme(({ text, theme, style }) => {
16
- return (React.createElement(Text, { style: [
17
- {
18
- fontSize: 14,
19
- letterSpacing: 0,
20
- lineHeight: 16,
21
- color: theme.colors.medium,
22
- },
23
- style,
24
- ] }, text));
25
- });
26
- export const Caption = withTheme(({ text, theme, style }) => {
27
- return (React.createElement(Text, { style: [
28
- {
29
- fontSize: 12,
30
- letterSpacing: 0,
31
- lineHeight: 14,
32
- color: theme.colors.light,
33
- },
34
- style,
35
- ] }, text));
36
- });
@@ -1,31 +0,0 @@
1
- import * as React from "react";
2
- export const useAuthState = (auth) => {
3
- const [error, setError] = React.useState();
4
- const [value, setValue] = React.useState(auth.currentUser);
5
- React.useEffect(() => {
6
- const list = auth.onAuthStateChanged(setValue, setError);
7
- return () => {
8
- list();
9
- };
10
- }, [auth]);
11
- const signInWithEmailAndPassword = (user, password) => {
12
- auth
13
- .signInWithEmailAndPassword(user, password)
14
- .then(setValue)
15
- .catch(setError);
16
- };
17
- const createUserWithEmailAndPassword = (user, password) => {
18
- auth
19
- .signInWithEmailAndPassword(user, password)
20
- .then(setValue)
21
- .catch(setError);
22
- };
23
- const signOut = () => auth.signOut();
24
- return [
25
- value,
26
- error,
27
- signInWithEmailAndPassword,
28
- signOut,
29
- createUserWithEmailAndPassword,
30
- ];
31
- };
package/src/constants.js DELETED
@@ -1,10 +0,0 @@
1
- import { Platform } from "react-native";
2
- // @ts-ignore
3
- const expo = global.__expo;
4
- const DEFAULT_STATUSBAR_HEIGHT_EXPO = (expo === null || expo === void 0 ? void 0 : expo.Constants)
5
- ? expo.Constants.statusBarHeight
6
- : 0;
7
- export const APPROX_STATUSBAR_HEIGHT = Platform.select({
8
- android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
9
- ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0,
10
- });
package/src/hooks.js DELETED
@@ -1,12 +0,0 @@
1
- import React from "react";
2
- export function usePrevious(value) {
3
- // The ref object is a generic container whose current property is mutable
4
- // and can hold any value, similar to an instance property on a class
5
- const ref = React.useRef();
6
- // Store current value in ref
7
- React.useEffect(() => {
8
- ref.current = value;
9
- }, [value]);
10
- // Return previous value (happens before update in useEffect above)
11
- return ref.current;
12
- }
package/src/index.js DELETED
@@ -1,53 +0,0 @@
1
- export { injectIcon } from "./interfaces/Icon";
2
- export { withTheme, ThemeProvider } from "./theming";
3
- export { default as Provider } from "./Provider";
4
- export { default as DefaultTheme } from "./styles/DefaultTheme";
5
- export { Link } from "./components/Text";
6
- export { default as Banner } from "./components/Banner";
7
- export { Button, ButtonSolid, ButtonOutline } from "./components/Button";
8
- export { default as Avatar } from "./components/CircleImage";
9
- export { default as AvatarEdit } from "./components/AvatarEdit";
10
- export { default as Card } from "./components/Card";
11
- export { default as Carousel } from "./components/Carousel";
12
- export { Checkbox, CheckboxGroup, CheckboxRow } from "./components/Checkbox";
13
- export { default as CircleImage } from "./components/CircleImage";
14
- export { default as Container } from "./components/Container";
15
- export { default as Divider } from "./components/Divider";
16
- export { default as FAB } from "./components/FAB";
17
- export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
18
- export { default as IconButton } from "./components/IconButton";
19
- export { default as Image } from "./components/Image";
20
- export { default as SVG } from "./components/SVG";
21
- export { default as NumberInput } from "./components/NumberInput";
22
- export { default as ScreenContainer } from "./components/ScreenContainer";
23
- export { default as StarRating } from "./components/StarRating";
24
- export { default as Surface } from "./components/Surface";
25
- export { default as Switch, SwitchRow } from "./components/Switch";
26
- export { default as TextField } from "./components/TextField";
27
- export { default as ToggleButton } from "./components/ToggleButton";
28
- export { default as Touchable } from "./components/Touchable";
29
- export { default as Pressable } from "./components/Pressable";
30
- export { AccordionGroup, AccordionItem } from "./components/Accordion";
31
- export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
32
- export { Swiper, SwiperItem } from "./components/Swiper";
33
- export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
34
- export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
35
- /* Deprecated: Fix or Delete! */
36
- export { default as CardBlock } from "./components/CardBlock";
37
- export { default as CardContainer } from "./components/CardContainer";
38
- export { default as CardContainerRating } from "./components/CardContainerRating";
39
- export { default as CardInline } from "./components/CardInline";
40
- export { default as DatePicker } from "./components/DatePicker/DatePicker";
41
- export { default as HeaderLarge } from "./components/HeaderLarge";
42
- export { default as HeaderMedium } from "./components/HeaderMedium";
43
- export { default as HeaderOverline } from "./components/HeaderOverline";
44
- export { default as Picker } from "./components/Picker/Picker";
45
- export { default as ProgressBar } from "./components/ProgressBar";
46
- export { default as ProgressCircle } from "./components/ProgressCircle";
47
- export { default as RowBodyIcon } from "./components/RowBodyIcon";
48
- export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImageCaption";
49
- export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
50
- export { default as Slider } from "./components/Slider";
51
- export { default as Stepper } from "./components/Stepper";
52
- export { useAuthState } from "./components/useAuthState";
53
- // a comment to fix sourcemap comment issue
@@ -1,8 +0,0 @@
1
- /**
2
- * This is an interface for a hybrid component.
3
- *
4
- * Its public implementation is `@draftbit/native`, and it is injected inside
5
- * `@draftbit/ui`.
6
- */
7
- import React from "react";
8
- export const injectIcon = (Component, Icon) => (props) => React.createElement(Component, { ...props, Icon });