@draftbit/core 46.8.2-feb14e.2 → 46.8.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 (186) hide show
  1. package/lib/commonjs/components/Justification.js +1 -5
  2. package/lib/commonjs/components/ResizeMode.js +1 -5
  3. package/lib/module/components/Justification.js +0 -1
  4. package/lib/module/components/ResizeMode.js +0 -1
  5. package/package.json +4 -5
  6. package/lib/commonjs/mappings/HtmlElements.js +0 -175
  7. package/lib/module/mappings/HtmlElements.js +0 -168
  8. package/lib/typescript/src/mappings/HtmlElements.d.ts +0 -73
  9. package/lib/typescript/src/mappings/HtmlElements.d.ts.map +0 -1
  10. package/src/Provider.js +0 -9
  11. package/src/components/Accordion/AccordionGroup.js +0 -44
  12. package/src/components/Accordion/AccordionItem.js +0 -32
  13. package/src/components/Accordion/index.js +0 -2
  14. package/src/components/ActionSheet/ActionSheet.js +0 -45
  15. package/src/components/ActionSheet/ActionSheetCancel.js +0 -6
  16. package/src/components/ActionSheet/ActionSheetItem.js +0 -30
  17. package/src/components/ActionSheet/index.js +0 -3
  18. package/src/components/AnimatedCircularProgress.js +0 -43
  19. package/src/components/AspectRatio.js +0 -18
  20. package/src/components/AvatarEdit.js +0 -30
  21. package/src/components/Banner.js +0 -109
  22. package/src/components/Button.js +0 -114
  23. package/src/components/Card.js +0 -57
  24. package/src/components/Checkbox/Checkbox.js +0 -62
  25. package/src/components/Checkbox/CheckboxGroup.js +0 -21
  26. package/src/components/Checkbox/CheckboxGroupRow.js +0 -76
  27. package/src/components/Checkbox/CheckboxRow.js +0 -77
  28. package/src/components/Checkbox/context.js +0 -14
  29. package/src/components/Checkbox/index.js +0 -3
  30. package/src/components/CircleImage.js +0 -8
  31. package/src/components/CircularProgress.js +0 -81
  32. package/src/components/Config.js +0 -64
  33. package/src/components/Container.js +0 -43
  34. package/src/components/DatePicker/DatePicker.js +0 -382
  35. package/src/components/DatePicker/DatePickerComponent.js +0 -13
  36. package/src/components/DatePicker/DatePickerComponent.web.js +0 -30
  37. package/src/components/DatePicker/DatePickerComponentType.js +0 -1
  38. package/src/components/DeckSwiper/DeckSwiper.js +0 -65
  39. package/src/components/DeckSwiper/DeckSwiperCard.js +0 -21
  40. package/src/components/DeckSwiper/index.js +0 -2
  41. package/src/components/DeprecatedButton.js +0 -83
  42. package/src/components/DeprecatedCardWrapper.js +0 -18
  43. package/src/components/DeprecatedFAB.js +0 -114
  44. package/src/components/Divider.js +0 -13
  45. package/src/components/Elevation.js +0 -20
  46. package/src/components/FAB.js +0 -46
  47. package/src/components/FieldSearchBarFull.js +0 -53
  48. package/src/components/FormRow.js +0 -19
  49. package/src/components/IconButton.js +0 -35
  50. package/src/components/Image.js +0 -47
  51. package/src/components/Justification.js +0 -1
  52. package/src/components/Layout.js +0 -50
  53. package/src/components/NumberInput.js +0 -49
  54. package/src/components/Picker/Picker.js +0 -266
  55. package/src/components/Picker/PickerComponent.android.js +0 -69
  56. package/src/components/Picker/PickerComponent.ios.js +0 -79
  57. package/src/components/Picker/PickerComponent.web.js +0 -70
  58. package/src/components/Picker/PickerTypes.js +0 -1
  59. package/src/components/Portal/Portal.js +0 -35
  60. package/src/components/Portal/PortalConsumer.js +0 -27
  61. package/src/components/Portal/PortalHost.js +0 -107
  62. package/src/components/Portal/PortalManager.js +0 -32
  63. package/src/components/Pressable.js +0 -12
  64. package/src/components/ProgressBar.js +0 -118
  65. package/src/components/ProgressCircle.js +0 -13
  66. package/src/components/ProgressIndicator.js +0 -27
  67. package/src/components/RadioButton/RadioButton.js +0 -17
  68. package/src/components/RadioButton/RadioButtonFieldGroup.js +0 -17
  69. package/src/components/RadioButton/RadioButtonGroup.js +0 -43
  70. package/src/components/RadioButton/RadioButtonRow.js +0 -76
  71. package/src/components/RadioButton/context.js +0 -14
  72. package/src/components/RadioButton/index.js +0 -4
  73. package/src/components/ResizeMode.js +0 -1
  74. package/src/components/Row.js +0 -48
  75. package/src/components/RowBodyIcon.js +0 -8
  76. package/src/components/RowHeadlineImageCaption.js +0 -12
  77. package/src/components/RowHeadlineImageIcon.js +0 -14
  78. package/src/components/SVG.js +0 -13
  79. package/src/components/ScreenContainer.js +0 -35
  80. package/src/components/Slider.js +0 -63
  81. package/src/components/StarRating.js +0 -50
  82. package/src/components/StepIndicator.js +0 -346
  83. package/src/components/Stepper.js +0 -41
  84. package/src/components/Surface.js +0 -32
  85. package/src/components/Swiper/Swiper.js +0 -29
  86. package/src/components/Swiper/SwiperItem.js +0 -9
  87. package/src/components/Swiper/index.js +0 -2
  88. package/src/components/Switch.js +0 -56
  89. package/src/components/Text.js +0 -33
  90. package/src/components/TextField.js +0 -428
  91. package/src/components/ToggleButton.js +0 -39
  92. package/src/components/Touchable.js +0 -12
  93. package/src/components/Touchable.web.js +0 -2
  94. package/src/components/Typography.js +0 -36
  95. package/src/components/useAuthState.js +0 -31
  96. package/src/constants.js +0 -10
  97. package/src/hooks.js +0 -12
  98. package/src/index.js +0 -46
  99. package/src/interfaces/Icon.js +0 -8
  100. package/src/mappings/Accordion.js +0 -50
  101. package/src/mappings/AccordionItem.js +0 -17
  102. package/src/mappings/ActionSheet.js +0 -14
  103. package/src/mappings/ActionSheetCancel.js +0 -20
  104. package/src/mappings/ActionSheetItem.js +0 -24
  105. package/src/mappings/ActivityIndicator.js +0 -58
  106. package/src/mappings/AudioPlayer.js +0 -57
  107. package/src/mappings/AvatarEdit.js +0 -38
  108. package/src/mappings/Banner.js +0 -32
  109. package/src/mappings/BlurView.js +0 -42
  110. package/src/mappings/Button.js +0 -116
  111. package/src/mappings/Card.js +0 -52
  112. package/src/mappings/CardBlock.js +0 -123
  113. package/src/mappings/CardContainer.js +0 -104
  114. package/src/mappings/CardContainerRating.js +0 -126
  115. package/src/mappings/CardContainerShortImage.js +0 -120
  116. package/src/mappings/CardInline.js +0 -52
  117. package/src/mappings/Carousel.js +0 -19
  118. package/src/mappings/Checkbox.js +0 -46
  119. package/src/mappings/CheckboxGroup.js +0 -26
  120. package/src/mappings/CheckboxRow.js +0 -61
  121. package/src/mappings/CircleImage.js +0 -25
  122. package/src/mappings/Container.js +0 -30
  123. package/src/mappings/CustomCode.js +0 -8
  124. package/src/mappings/DatePicker.js +0 -182
  125. package/src/mappings/DeckSwiper.js +0 -48
  126. package/src/mappings/DeckSwiperCard.js +0 -16
  127. package/src/mappings/Divider.js +0 -27
  128. package/src/mappings/FAB.js +0 -37
  129. package/src/mappings/Fetch.js +0 -13
  130. package/src/mappings/FieldSearchBarFull.js +0 -50
  131. package/src/mappings/FlashList.js +0 -113
  132. package/src/mappings/FlatList.js +0 -51
  133. package/src/mappings/HeaderLarge.js +0 -29
  134. package/src/mappings/HeaderMedium.js +0 -55
  135. package/src/mappings/HeaderOverline.js +0 -55
  136. package/src/mappings/HtmlElements.js +0 -191
  137. package/src/mappings/HtmlElements.ts +0 -204
  138. package/src/mappings/Icon.js +0 -32
  139. package/src/mappings/IconButton.js +0 -33
  140. package/src/mappings/Image.js +0 -35
  141. package/src/mappings/ImageBackground.js +0 -29
  142. package/src/mappings/KeyboardAvoidingView.js +0 -41
  143. package/src/mappings/KeyboardAwareScrollView.js +0 -50
  144. package/src/mappings/Layout.js +0 -200
  145. package/src/mappings/LinearGradient.js +0 -82
  146. package/src/mappings/MapCallout.js +0 -22
  147. package/src/mappings/MapMarker.js +0 -48
  148. package/src/mappings/MapView.js +0 -142
  149. package/src/mappings/Modal.js +0 -42
  150. package/src/mappings/NumberInput.js +0 -254
  151. package/src/mappings/Picker.js +0 -153
  152. package/src/mappings/ProgressBar.js +0 -101
  153. package/src/mappings/ProgressCircle.js +0 -109
  154. package/src/mappings/ProgressIndicator.js +0 -181
  155. package/src/mappings/RadioButton.js +0 -51
  156. package/src/mappings/RadioButtonGroup.js +0 -17
  157. package/src/mappings/RadioButtonRow.js +0 -42
  158. package/src/mappings/RowBodyIcon.js +0 -75
  159. package/src/mappings/RowHeadlineImageCaption.js +0 -167
  160. package/src/mappings/RowHeadlineImageIcon.js +0 -99
  161. package/src/mappings/SVG.js +0 -20
  162. package/src/mappings/SafeAreaView.js +0 -33
  163. package/src/mappings/ScrollView.js +0 -37
  164. package/src/mappings/Slider.js +0 -60
  165. package/src/mappings/StarRating.js +0 -43
  166. package/src/mappings/Stepper.js +0 -32
  167. package/src/mappings/Surface.js +0 -14
  168. package/src/mappings/Swiper.js +0 -71
  169. package/src/mappings/SwiperItem.js +0 -9
  170. package/src/mappings/Switch.js +0 -81
  171. package/src/mappings/Text.js +0 -251
  172. package/src/mappings/TextArea.js +0 -283
  173. package/src/mappings/TextField.js +0 -400
  174. package/src/mappings/TextInput.js +0 -402
  175. package/src/mappings/ToggleButton.js +0 -50
  176. package/src/mappings/Touchable.js +0 -67
  177. package/src/mappings/Video.js +0 -81
  178. package/src/mappings/View.js +0 -207
  179. package/src/mappings/WebView.js +0 -88
  180. package/src/styles/DarkTheme.js +0 -26
  181. package/src/styles/DefaultTheme.js +0 -111
  182. package/src/styles/fonts.js +0 -62
  183. package/src/styles/overlay.js +0 -60
  184. package/src/styles/shadow.js +0 -51
  185. package/src/theming.js +0 -3
  186. package/src/utilities.js +0 -102
@@ -1,32 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet } from "react-native";
3
- /**
4
- * Portal host is the component which actually renders all Portals.
5
- */
6
- export default class PortalManager extends React.PureComponent {
7
- constructor() {
8
- super(...arguments);
9
- this.state = {
10
- portals: [],
11
- };
12
- this.mount = (key, children) => {
13
- this.setState((state) => ({
14
- portals: [...state.portals, { key, children }],
15
- }));
16
- };
17
- this.update = (key, children) => this.setState((state) => ({
18
- portals: state.portals.map((item) => {
19
- if (item.key === key) {
20
- return { ...item, children };
21
- }
22
- return item;
23
- }),
24
- }));
25
- this.unmount = (key) => this.setState((state) => ({
26
- portals: state.portals.filter((item) => item.key !== key),
27
- }));
28
- }
29
- render() {
30
- return this.state.portals.map(({ key, children }) => (React.createElement(View, { key: key, collapsable: false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */, pointerEvents: "box-none", style: StyleSheet.absoluteFill }, children)));
31
- }
32
- }
@@ -1,12 +0,0 @@
1
- import React from "react";
2
- import { Pressable as NativePressable, } from "react-native";
3
- export default function Pressable({ children, disabled, onPress, activeOpacity = 0.8, disabledOpacity = 0.8, delayLongPress, hitSlop, style, ...props }) {
4
- return (React.createElement(NativePressable, { onPress: onPress, disabled: disabled, 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,118 +0,0 @@
1
- import React, { Component } from "react";
2
- import { Animated, Easing, View, I18nManager, } from "react-native";
3
- const INDETERMINATE_WIDTH_FACTOR = 0.3;
4
- const BAR_WIDTH_ZERO_POSITION = INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR);
5
- export default class ProgressBar extends Component {
6
- constructor(props) {
7
- super(props);
8
- this.handleLayout = (event) => {
9
- const { width = 150, onLayout } = this.props;
10
- if (!width) {
11
- this.setState({ width: event.nativeEvent.layout.width });
12
- }
13
- if (onLayout) {
14
- onLayout(event);
15
- }
16
- };
17
- const { progress: progressP = 0, indeterminate = false } = props;
18
- const progress = Math.min(Math.max(progressP, 0), 1);
19
- this.state = {
20
- width: 0,
21
- progress: new Animated.Value(indeterminate ? INDETERMINATE_WIDTH_FACTOR : progress),
22
- animationValue: new Animated.Value(BAR_WIDTH_ZERO_POSITION),
23
- };
24
- }
25
- componentDidMount() {
26
- const { indeterminate = false } = this.props;
27
- if (indeterminate) {
28
- this.animate();
29
- }
30
- }
31
- componentDidUpdate(prevProps) {
32
- const { indeterminate = false, useNativeDriver = false, progress: progressP = 0, animationType = "spring", animationConfig = { bounciness: 0 }, animated = true, } = this.props;
33
- if (prevProps.indeterminate !== indeterminate) {
34
- if (indeterminate) {
35
- this.animate();
36
- }
37
- else {
38
- Animated.spring(this.state.animationValue, {
39
- toValue: BAR_WIDTH_ZERO_POSITION,
40
- useNativeDriver,
41
- }).start();
42
- }
43
- }
44
- if (prevProps.indeterminate !== indeterminate ||
45
- prevProps.progress !== progressP) {
46
- const progress = this.props.indeterminate
47
- ? INDETERMINATE_WIDTH_FACTOR
48
- : Math.min(Math.max(progressP, 0), 1);
49
- if (animated) {
50
- Animated[animationType](this.state.progress, {
51
- ...animationConfig,
52
- toValue: progress,
53
- velocity: 0,
54
- useNativeDriver,
55
- }).start();
56
- }
57
- else {
58
- this.state.progress.setValue(progress);
59
- }
60
- }
61
- }
62
- animate() {
63
- const { useNativeDriver = false, indeterminateAnimationDuration = 1000 } = this.props;
64
- this.state.animationValue.setValue(0);
65
- Animated.timing(this.state.animationValue, {
66
- toValue: 1,
67
- duration: indeterminateAnimationDuration,
68
- easing: Easing.linear,
69
- isInteraction: false,
70
- useNativeDriver,
71
- }).start((endState) => {
72
- if (endState.finished) {
73
- this.animate();
74
- }
75
- });
76
- }
77
- render() {
78
- const { borderColor, borderRadius = 4, borderWidth = 1, children, color = "rgba(0, 122, 255, 1)", style, unfilledColor, width = 150, ...restProps } = this.props;
79
- const innerWidth = Math.max(0, width || this.state.width) - borderWidth * 2;
80
- const containerStyle = {
81
- width,
82
- borderWidth,
83
- borderColor: borderColor || color,
84
- borderRadius,
85
- overflow: "hidden",
86
- backgroundColor: unfilledColor,
87
- };
88
- const progressStyle = {
89
- backgroundColor: color,
90
- // Always take up full height of container.
91
- height: "100%",
92
- transform: [
93
- {
94
- translateX: this.state.animationValue.interpolate({
95
- inputRange: [0, 1],
96
- outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth],
97
- }),
98
- },
99
- {
100
- translateX: this.state.progress.interpolate({
101
- inputRange: [0, 1],
102
- outputRange: [innerWidth / (I18nManager.isRTL ? 2 : -2), 0],
103
- }),
104
- },
105
- {
106
- // Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
107
- scaleX: this.state.progress.interpolate({
108
- inputRange: [0, 1],
109
- outputRange: [0.0001, 1],
110
- }),
111
- },
112
- ],
113
- };
114
- return (React.createElement(View, { style: [containerStyle, style], onLayout: this.handleLayout, ...restProps },
115
- React.createElement(Animated.View, { style: progressStyle }),
116
- children));
117
- }
118
- }
@@ -1,13 +0,0 @@
1
- import * as React from "react";
2
- import { Text } from "react-native";
3
- import AnimatedCircularProgress from "./AnimatedCircularProgress";
4
- import { withTheme } from "../theming";
5
- const ProgressCircle = ({ progress = 0.5, style, color = "primary", size = 100, showsText = true, unfilledColor, strokeCap = "butt", textStyle, thickness = 1, theme, }) => {
6
- const progressNum = Math.round(progress * 100);
7
- const tintColor = color || theme.colors.primary;
8
- const backgroundColor = unfilledColor || theme.colors.secondary;
9
- return (React.createElement(AnimatedCircularProgress, { size: size, width: thickness, backgroundWidth: thickness, fill: progressNum, tintColor: tintColor, backgroundColor: backgroundColor, rotation: 0, lineCap: strokeCap, style: style }, (fill) => showsText ? (React.createElement(Text, { style: [{ fontSize: size * 0.275, color: tintColor }, textStyle] },
10
- Math.round(fill),
11
- "%")) : null));
12
- };
13
- export default withTheme(ProgressCircle);
@@ -1,27 +0,0 @@
1
- import * as React from "react";
2
- import StepIndicator from "./StepIndicator";
3
- import { withTheme } from "../theming";
4
- const ProgressIndicator = ({ numberOfSteps, currentStep, currentStepStrokeWidth = 3, stepStrokeCurrentColor = "primary", stepIndicatorSize, currentStepIndicatorSize, stepIndicatorCurrentColor, stepIndicatorLabelCurrentColor, stepIndicatorLabelFontSize = 12, stepNumberFinishedColor = "strongInverse", stepNumberUnfinishedColor = "primary", unfinishedColor = "light", finishedColor = "primary", theme, }) => {
5
- const currentPosition = currentStep - 1;
6
- return (React.createElement(StepIndicator, { stepCount: numberOfSteps, currentPosition: currentPosition, customStyles: {
7
- stepIndicatorSize,
8
- currentStepIndicatorSize: currentStepIndicatorSize
9
- ? currentStepIndicatorSize
10
- : stepIndicatorSize,
11
- stepStrokeFinishedColor: finishedColor,
12
- stepStrokeUnFinishedColor: unfinishedColor,
13
- separatorFinishedColor: finishedColor,
14
- separatorUnFinishedColor: unfinishedColor,
15
- stepIndicatorFinishedColor: finishedColor,
16
- stepIndicatorUnFinishedColor: unfinishedColor,
17
- currentStepStrokeWidth,
18
- stepStrokeCurrentColor: stepStrokeCurrentColor || stepIndicatorCurrentColor,
19
- stepIndicatorLabelUnFinishedColor: stepNumberUnfinishedColor,
20
- stepIndicatorLabelFinishedColor: stepNumberFinishedColor,
21
- stepIndicatorCurrentColor: stepIndicatorCurrentColor || unfinishedColor,
22
- stepIndicatorLabelCurrentColor: stepIndicatorLabelCurrentColor || stepNumberUnfinishedColor,
23
- stepIndicatorLabelFontSize,
24
- labelFontFamily: theme.typography.body1.fontFamily,
25
- } }));
26
- };
27
- export default withTheme(ProgressIndicator);
@@ -1,17 +0,0 @@
1
- import * as React from "react";
2
- import Config from "../Config";
3
- import IconButton from "../IconButton";
4
- import { getValueForRadioButton } from "../../utilities";
5
- import { useRadioButtonGroupContext } from "./context";
6
- const RadioButton = ({ Icon, disabled = false, color, value = "", selected, unselectedColor, onPress, size = Config.radioButtonSize, selectedIcon = "MaterialIcons/radio-button-checked", unselectedIcon = "MaterialIcons/radio-button-unchecked", style, ...rest }) => {
7
- const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
8
- const realValue = getValueForRadioButton(value);
9
- const realContextValue = getValueForRadioButton(contextValue);
10
- const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue === realValue;
11
- const handlePress = () => {
12
- onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
13
- onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
14
- };
15
- return (React.createElement(IconButton, { Icon: Icon, icon: isSelected ? selectedIcon : unselectedIcon, color: isSelected ? color : unselectedColor, disabled: disabled, onPress: handlePress, size: size, style: style, ...rest }));
16
- };
17
- export default RadioButton;
@@ -1,17 +0,0 @@
1
- import React from "react";
2
- import { View } from "react-native";
3
- import Text from "../Text";
4
- import { withTheme } from "../../theming";
5
- import RadioButtonGroup from "./RadioButtonGroup";
6
- const RadioButtonFieldGroup = ({ label, children, theme, labelStyle, style, ...rest }) => {
7
- return (React.createElement(View, { style: style },
8
- React.createElement(Text, { style: [
9
- {
10
- fontSize: theme.typography.headline4.fontSize,
11
- color: theme.typography.headline4.color,
12
- },
13
- labelStyle,
14
- ] }, label),
15
- React.createElement(RadioButtonGroup, { theme: theme, ...rest }, children)));
16
- };
17
- export default withTheme(RadioButtonFieldGroup);
@@ -1,43 +0,0 @@
1
- import * as React from "react";
2
- import { View } from "react-native";
3
- import { getValueForRadioButton } from "../../utilities";
4
- import { radioButtonGroupContext, Direction } from "./context";
5
- const { Provider } = radioButtonGroupContext;
6
- const RadioButtonGroup = ({ direction = Direction.Vertical, value = "", onValueChange, defaultValue, style, children, ...rest }) => {
7
- const [internalValue, setInternalValue] = React.useState("");
8
- React.useEffect(() => {
9
- if (value != null) {
10
- const realValue = getValueForRadioButton(value);
11
- setInternalValue(realValue);
12
- }
13
- }, [value]);
14
- React.useEffect(() => {
15
- if (defaultValue != null) {
16
- const realDefaultValue = getValueForRadioButton(defaultValue);
17
- setInternalValue(realDefaultValue);
18
- }
19
- }, [defaultValue]);
20
- const handleValueChange = (newValue) => {
21
- const realNewValue = getValueForRadioButton(newValue);
22
- setInternalValue(realNewValue);
23
- onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realNewValue);
24
- };
25
- const _containerStyle = [
26
- {
27
- flexDirection: direction === Direction.Horizontal ? "row" : "column",
28
- },
29
- ];
30
- if (direction !== Direction.Vertical) {
31
- _containerStyle.push({
32
- alignItems: "center",
33
- });
34
- }
35
- return (React.createElement(View, { style: [{ minHeight: 40 }, style], ...rest },
36
- React.createElement(Provider, { value: {
37
- value: internalValue,
38
- onValueChange: handleValueChange,
39
- direction,
40
- } },
41
- React.createElement(View, { style: _containerStyle }, children))));
42
- };
43
- export default RadioButtonGroup;
@@ -1,76 +0,0 @@
1
- import * as React from "react";
2
- import { StyleSheet, View, Platform, } from "react-native";
3
- import RadioButton from "./RadioButton";
4
- import Text from "../Text";
5
- import { useRadioButtonGroupContext } from "./context";
6
- import { Direction as GroupDirection } from "./context";
7
- import Touchable from "../Touchable";
8
- import { extractStyles, getValueForRadioButton } from "../../utilities";
9
- export var Direction;
10
- (function (Direction) {
11
- Direction["Row"] = "row";
12
- Direction["RowReverse"] = "row-reverse";
13
- })(Direction || (Direction = {}));
14
- const getRadioButtonAlignment = (parentDirection, direction) => {
15
- if (parentDirection === GroupDirection.Horizontal) {
16
- return direction === Direction.Row ? "flex-start" : "flex-end";
17
- }
18
- else if (direction === Direction.RowReverse) {
19
- return "flex-start";
20
- }
21
- else {
22
- return "flex-end";
23
- }
24
- };
25
- const renderLabel = (value, labelStyle, textStyle) => {
26
- if (typeof value === "string") {
27
- return React.createElement(Text, { style: [labelStyle, textStyle] }, value);
28
- }
29
- else {
30
- return React.createElement(React.Fragment, null, value);
31
- }
32
- };
33
- const RadioButtonRow = ({ Icon, label, value = "", color, unselectedColor, onPress, labelContainerStyle, labelStyle, radioButtonStyle, direction = Direction.Row, selected, disabled, style, ...rest }) => {
34
- const { value: contextValue, onValueChange, direction: parentDirection, } = useRadioButtonGroupContext();
35
- const realValue = getValueForRadioButton(value);
36
- const realContextValue = getValueForRadioButton(contextValue);
37
- const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue === realValue;
38
- const handlePress = () => {
39
- onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
40
- onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
41
- };
42
- const { textStyles, viewStyles } = extractStyles(style);
43
- return (React.createElement(Touchable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
44
- React.createElement(View, { style: [
45
- styles.label,
46
- {
47
- alignItems: direction === Direction.Row ? "flex-start" : "flex-end",
48
- },
49
- labelContainerStyle,
50
- ] }, renderLabel(label, labelStyle, textStyles)),
51
- React.createElement(View, { style: {
52
- flex: 1,
53
- alignItems: getRadioButtonAlignment(parentDirection, direction),
54
- } },
55
- React.createElement(RadioButton, { Icon: Icon, selected: isSelected, value: realValue, color: color, unselectedColor: unselectedColor, style: radioButtonStyle }))));
56
- };
57
- const styles = StyleSheet.create({
58
- mainParent: {
59
- alignItems: "center",
60
- justifyContent: "space-around",
61
- paddingStart: 20,
62
- minHeight: 50,
63
- paddingEnd: 20,
64
- display: "flex",
65
- ...Platform.select({
66
- web: {
67
- cursor: "pointer",
68
- userSelect: "none",
69
- },
70
- }),
71
- },
72
- label: {
73
- flex: 3,
74
- },
75
- });
76
- export default RadioButtonRow;
@@ -1,14 +0,0 @@
1
- import { createContext, useContext } from "react";
2
- export var Direction;
3
- (function (Direction) {
4
- Direction["Horizontal"] = "horizontal";
5
- Direction["Vertical"] = "vertical";
6
- })(Direction || (Direction = {}));
7
- export const radioButtonGroupContext = createContext({
8
- onValueChange: () => { },
9
- value: "",
10
- direction: undefined,
11
- });
12
- export function useRadioButtonGroupContext() {
13
- return useContext(radioButtonGroupContext);
14
- }
@@ -1,4 +0,0 @@
1
- export { default as RadioButton } from "./RadioButton";
2
- export { default as RadioButtonGroup } from "./RadioButtonGroup";
3
- export { default as RadioButtonRow } from "./RadioButtonRow";
4
- export { default as RadioButtonFieldGroup } from "./RadioButtonFieldGroup";
@@ -1 +0,0 @@
1
- export {};
@@ -1,48 +0,0 @@
1
- import * as React from "react";
2
- import { View, Text, Image, StyleSheet, } from "react-native";
3
- import { withTheme } from "../theming";
4
- import Config from "./Config";
5
- const Row = ({ titleTypeStyle, titleColor, subtitleTypeStyle, subtitleColor, title, subtitle, multilineSubtitle, image, right, style, }) => {
6
- return (React.createElement(View, { style: [styles.container, { padding: 16 }, style] },
7
- React.createElement(View, { style: styles.leftContainer },
8
- image && (React.createElement(Image, { source: typeof image === "string" ? { uri: image } : image, style: {
9
- marginRight: 12,
10
- width: subtitle
11
- ? Config.rowMultiLineImageSize
12
- : Config.rowSingleLineImageSize,
13
- height: subtitle
14
- ? Config.rowMultiLineImageSize
15
- : Config.rowSingleLineImageSize,
16
- } })),
17
- React.createElement(View, { style: styles.textContainer },
18
- React.createElement(Text, { style: [
19
- titleTypeStyle,
20
- {
21
- color: titleColor,
22
- },
23
- ], numberOfLines: 1 }, title),
24
- subtitle ? (React.createElement(Text, { style: [
25
- subtitleTypeStyle,
26
- {
27
- color: subtitleColor,
28
- marginTop: 4,
29
- },
30
- ], numberOfLines: multilineSubtitle ? undefined : 1 }, subtitle)) : null)),
31
- right && right()));
32
- };
33
- const styles = StyleSheet.create({
34
- leftContainer: {
35
- flexDirection: "row",
36
- flex: 1,
37
- },
38
- container: {
39
- flexDirection: "row",
40
- justifyContent: "space-between",
41
- alignItems: "center",
42
- },
43
- textContainer: {
44
- flex: 1,
45
- justifyContent: "center",
46
- },
47
- });
48
- export default withTheme(Row);
@@ -1,8 +0,0 @@
1
- import * as React from "react";
2
- import { withTheme } from "../theming";
3
- import Row from "./Row";
4
- import Config from "./Config";
5
- const RowBodyIcon = ({ Icon, title, subtitle, icon, style, theme: { colors, typography }, }) => {
6
- return (React.createElement(Row, { titleTypeStyle: typography.body1, titleColor: colors.medium, subtitleTypeStyle: typography.subtitle2, subtitleColor: colors.light, title: title, subtitle: subtitle, right: () => (React.createElement(Icon, { name: icon, size: Config.rowSingleLineIconSize, color: colors.light, style: { marginLeft: 16 } })), style: style }));
7
- };
8
- export default withTheme(RowBodyIcon);
@@ -1,12 +0,0 @@
1
- import * as React from "react";
2
- import { Text } from "react-native";
3
- import { withTheme } from "../theming";
4
- import Row from "./Row";
5
- const RowHeadlineImageCaption = ({ title, subtitle, caption, image, style, theme: { colors, typography }, }) => {
6
- return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, image: image, right: () => (React.createElement(Text, { style: {
7
- ...typography.caption,
8
- color: colors.strong,
9
- marginLeft: 16,
10
- } }, caption)), style: style }));
11
- };
12
- export default withTheme(RowHeadlineImageCaption);
@@ -1,14 +0,0 @@
1
- import * as React from "react";
2
- import { withTheme } from "../theming";
3
- import Row from "./Row";
4
- import Config from "./Config";
5
- const RowHeadlineImageIcon = ({ Icon, icon, title, image, subtitle, multilineSubtitle = false, style, theme: { colors, typography }, }) => {
6
- return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, multilineSubtitle: multilineSubtitle, image: image, right: () => (React.createElement(Icon, { name: icon, size: multilineSubtitle
7
- ? Config.rowMultiLineIconSize
8
- : Config.rowSingleLineIconSize, color: colors.light, style: {
9
- marginLeft: 16,
10
- alignSelf: multilineSubtitle ? "flex-start" : "center",
11
- marginTop: multilineSubtitle ? 4 : 0,
12
- } })), style: style }));
13
- };
14
- export default withTheme(RowHeadlineImageIcon);
@@ -1,13 +0,0 @@
1
- import * as React from "react";
2
- import { View, Platform, Image } from "react-native";
3
- import { SvgUri } from "react-native-svg";
4
- import Config from "./Config";
5
- const SVG = ({ source = Config.placeholderSvgURL, style, }) => {
6
- return (React.createElement(React.Fragment, null,
7
- Platform.OS === "ios" && (React.createElement(View, { style: style },
8
- React.createElement(SvgUri, { width: "100%", height: "100%", uri: source }))),
9
- Platform.OS === "android" && (React.createElement(View, { style: style },
10
- React.createElement(SvgUri, { width: "100%", height: "100%", uri: source }))),
11
- Platform.OS === "web" && (React.createElement(Image, { style: style, source: { uri: source } }))));
12
- };
13
- export default SVG;
@@ -1,35 +0,0 @@
1
- import * as React from "react";
2
- import { StyleSheet, ScrollView, View, } from "react-native";
3
- import { SafeAreaView } from "react-native-safe-area-context";
4
- import { withTheme } from "../theming";
5
- function ScreenContainer({ scrollable = false, hasSafeArea = false, hasBottomSafeArea = false, hasTopSafeArea = false, theme, style, children, ...rest }) {
6
- var _a;
7
- const backgroundColor = ((_a = StyleSheet.flatten(style)) === null || _a === void 0 ? void 0 : _a.backgroundColor) || theme.colors.background;
8
- const edges = ["left", "right"];
9
- if (hasSafeArea || hasTopSafeArea) {
10
- edges.push("top");
11
- }
12
- if (hasSafeArea || hasBottomSafeArea) {
13
- edges.push("bottom");
14
- }
15
- return (React.createElement(SafeAreaView, { edges: edges, style: [
16
- styles.container,
17
- {
18
- backgroundColor,
19
- },
20
- ], ...rest }, scrollable ? (React.createElement(ScrollView, { contentContainerStyle: [
21
- styles.scrollViewContainer,
22
- { backgroundColor },
23
- style,
24
- ] }, children)) : (React.createElement(View, { style: [styles.container, { backgroundColor }, style] }, children))));
25
- }
26
- const styles = StyleSheet.create({
27
- container: {
28
- flex: 1,
29
- },
30
- scrollViewContainer: {
31
- flexGrow: 1,
32
- flex: undefined,
33
- },
34
- });
35
- export default withTheme(ScreenContainer);
@@ -1,63 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet } from "react-native";
3
- import NativeSlider from "@react-native-community/slider";
4
- import isNumber from "lodash.isnumber";
5
- import toNumber from "lodash.tonumber";
6
- import { withTheme } from "../theming";
7
- function maybeParseValue(value) {
8
- if (value === undefined) {
9
- return undefined;
10
- }
11
- if (isNumber(value)) {
12
- return value;
13
- }
14
- try {
15
- const maybe = toNumber(value);
16
- if (isNumber(maybe)) {
17
- return maybe;
18
- }
19
- }
20
- catch {
21
- return undefined;
22
- }
23
- return undefined;
24
- }
25
- function Slider({ Icon, leftIcon, rightIcon, leftIconColor, rightIconColor, value, defaultValue, minimumTrackTintColor, maximumTrackTintColor, thumbTintColor, minimumValue = 0, maximumValue = 100, tapToSeek, step = 1, onValueChange = () => { }, style, theme, ...rest }) {
26
- const [internalValue, setInternalValue] = React.useState(value || defaultValue);
27
- React.useEffect(() => {
28
- if (value != null) {
29
- setInternalValue(value);
30
- }
31
- }, [value]);
32
- React.useEffect(() => {
33
- if (defaultValue != null) {
34
- setInternalValue(defaultValue);
35
- }
36
- }, [defaultValue]);
37
- const minTrackColor = minimumTrackTintColor || theme.colors.primary;
38
- const maxTrackColor = maximumTrackTintColor || theme.colors.light;
39
- const thumbColor = thumbTintColor || theme.colors.primary;
40
- const leftIconThemeColor = leftIconColor || theme.colors.light;
41
- const rightIconThemeColor = rightIconColor || theme.colors.light;
42
- const parsedValue = maybeParseValue(internalValue);
43
- const handleSlidingComplete = (newValue) => {
44
- setInternalValue(newValue);
45
- onValueChange(newValue);
46
- };
47
- return (React.createElement(View, { style: [styles.container, style], ...rest },
48
- leftIcon ? (React.createElement(Icon, { color: leftIconThemeColor, name: leftIcon, size: 24 })) : null,
49
- React.createElement(NativeSlider, { value: parsedValue, step: step, minimumValue: minimumValue, maximumValue: maximumValue, tapToSeek: tapToSeek, minimumTrackTintColor: minTrackColor, maximumTrackTintColor: maxTrackColor, thumbTintColor: thumbColor, onSlidingComplete: handleSlidingComplete, style: styles.slider }),
50
- rightIcon ? (React.createElement(Icon, { color: rightIconThemeColor, name: rightIcon, size: 24 })) : null));
51
- }
52
- const styles = StyleSheet.create({
53
- container: {
54
- height: 40,
55
- flexDirection: "row",
56
- alignItems: "center",
57
- },
58
- slider: {
59
- flex: 1,
60
- marginHorizontal: 12,
61
- },
62
- });
63
- export default withTheme(Slider);
@@ -1,50 +0,0 @@
1
- import * as React from "react";
2
- import { View, StyleSheet, Pressable, } from "react-native";
3
- import { withTheme } from "../theming";
4
- const StarRating = ({ Icon, starSize = 16, maxStars = 5, rating = 0, defaultValue, isEditable = false, activeColor, inactiveColor, style, onPress, ...rest }) => {
5
- const [localRating, setLocalRating] = React.useState(rating || defaultValue || 0);
6
- React.useEffect(() => {
7
- if (rating != null) {
8
- setLocalRating(rating);
9
- }
10
- }, [rating]);
11
- React.useEffect(() => {
12
- if (defaultValue != null) {
13
- setLocalRating(defaultValue);
14
- }
15
- }, [defaultValue]);
16
- const ratingHandler = React.useCallback((r) => {
17
- setLocalRating(r);
18
- !!onPress && onPress(r);
19
- }, [onPress]);
20
- const ratingRounded = Math.round(localRating * 2) / 2;
21
- return (React.createElement(View, { style: [styles.container, style], ...rest }, [...Array(maxStars)].map((_, i) => (React.createElement(View, { key: i, style: { display: "flex" } },
22
- React.createElement(Icon, { name: ratingRounded - i === 0.5
23
- ? "MaterialIcons/star-half"
24
- : "MaterialIcons/star", size: starSize, color: ratingRounded > i ? activeColor : inactiveColor }),
25
- isEditable && (React.createElement(View, { style: styles.touchContainer },
26
- React.createElement(Pressable, { style: styles.pressable, onPress: () => ratingHandler(i + 0.5) }),
27
- React.createElement(Pressable, { style: styles.pressable, onPress: () => ratingHandler(i + 1) }))))))));
28
- };
29
- const styles = StyleSheet.create({
30
- container: {
31
- flexDirection: "row",
32
- alignItems: "center",
33
- },
34
- touchContainer: {
35
- display: "flex",
36
- flexDirection: "row",
37
- position: "absolute",
38
- top: 0,
39
- right: 0,
40
- left: 0,
41
- bottom: 0,
42
- zIndex: 1,
43
- },
44
- pressable: {
45
- flex: 1,
46
- height: "100%",
47
- width: "50%",
48
- },
49
- });
50
- export default withTheme(StarRating);