@draftbit/core 47.0.0-alpha.1 → 47.0.0-ba694d.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.
- package/lib/commonjs/components/Stepper.js +1 -0
- package/lib/commonjs/mappings/View.js.map +1 -1
- package/lib/commonjs/mappings/WebView.js.map +1 -1
- package/lib/module/components/Stepper.js +1 -0
- package/package.json +3 -3
- package/src/Provider.js +9 -0
- package/src/components/Accordion/AccordionGroup.js +44 -0
- package/src/components/Accordion/AccordionItem.js +32 -0
- package/src/components/Accordion/index.js +2 -0
- package/src/components/ActionSheet/ActionSheet.js +45 -0
- package/src/components/ActionSheet/ActionSheetCancel.js +6 -0
- package/src/components/ActionSheet/ActionSheetItem.js +30 -0
- package/src/components/ActionSheet/index.js +3 -0
- package/src/components/Banner.js +109 -0
- package/src/components/Button.js +114 -0
- package/src/components/Checkbox/Checkbox.js +63 -0
- package/src/components/Checkbox/CheckboxGroup.js +21 -0
- package/src/components/Checkbox/CheckboxGroupRow.js +77 -0
- package/src/components/Checkbox/CheckboxRow.js +78 -0
- package/src/components/Checkbox/context.js +14 -0
- package/src/components/Checkbox/index.js +3 -0
- package/src/components/Config.js +64 -0
- package/src/components/DatePicker/DatePicker.js +368 -0
- package/src/components/DatePicker/DatePickerComponent.js +13 -0
- package/src/components/DatePicker/DatePickerComponent.web.js +30 -0
- package/src/components/DatePicker/DatePickerComponentType.js +1 -0
- package/src/components/DeprecatedButton.js +95 -0
- package/src/components/Elevation.js +20 -0
- package/src/components/FormRow.js +19 -0
- package/src/components/IconButton.js +35 -0
- package/src/components/Layout.js +50 -0
- package/src/components/NumberInput.js +49 -0
- package/src/components/Picker/Picker.js +267 -0
- package/src/components/Picker/PickerComponent.android.js +69 -0
- package/src/components/Picker/PickerComponent.ios.js +79 -0
- package/src/components/Picker/PickerComponent.web.js +70 -0
- package/src/components/Picker/PickerTypes.js +1 -0
- package/src/components/Portal/Portal.js +35 -0
- package/src/components/Portal/PortalConsumer.js +27 -0
- package/src/components/Portal/PortalHost.js +107 -0
- package/src/components/Portal/PortalManager.js +32 -0
- package/src/components/RadioButton/RadioButton.js +17 -0
- package/src/components/RadioButton/RadioButtonFieldGroup.js +17 -0
- package/src/components/RadioButton/RadioButtonGroup.js +43 -0
- package/src/components/RadioButton/RadioButtonRow.js +76 -0
- package/src/components/RadioButton/context.js +14 -0
- package/src/components/RadioButton/index.js +4 -0
- package/src/components/SVG.js +13 -0
- package/src/components/ScreenContainer.js +34 -0
- package/src/components/Slider.js +63 -0
- package/src/components/StarRating.js +50 -0
- package/src/components/Stepper.js +39 -0
- package/src/components/Surface.js +32 -0
- package/src/components/Swiper/Swiper.js +29 -0
- package/src/components/Swiper/SwiperItem.js +9 -0
- package/src/components/Swiper/index.js +2 -0
- package/src/components/Switch.js +56 -0
- package/src/components/Text.js +33 -0
- package/src/components/TextField.js +428 -0
- package/src/components/Touchable.js +12 -0
- package/src/components/Touchable.web.js +2 -0
- package/src/constants.js +10 -0
- package/src/hooks.js +12 -0
- package/src/index.js +35 -0
- package/src/interfaces/Icon.js +8 -0
- package/src/mappings/Accordion.js +41 -0
- package/src/mappings/AccordionItem.js +16 -0
- package/src/mappings/ActionSheet.js +13 -0
- package/src/mappings/ActionSheetCancel.js +19 -0
- package/src/mappings/ActionSheetItem.js +23 -0
- package/src/mappings/ActivityIndicator.js +58 -0
- package/src/mappings/AudioPlayer.js +20 -0
- package/src/mappings/BlurView.js +42 -0
- package/src/mappings/Button.js +87 -0
- package/src/mappings/Checkbox.js +46 -0
- package/src/mappings/CheckboxGroup.js +26 -0
- package/src/mappings/CheckboxRow.js +61 -0
- package/src/mappings/CustomCode.js +8 -0
- package/src/mappings/DatePicker.js +157 -0
- package/src/mappings/Fetch.js +13 -0
- package/src/mappings/FlashList.js +33 -0
- package/src/mappings/FlatList.js +24 -0
- package/src/mappings/Icon.js +32 -0
- package/src/mappings/IconButton.js +35 -0
- package/src/mappings/Image.js +35 -0
- package/src/mappings/ImageBackground.js +29 -0
- package/src/mappings/KeyboardAvoidingView.js +41 -0
- package/src/mappings/KeyboardAwareScrollView.js +50 -0
- package/src/mappings/Layout.js +200 -0
- package/src/mappings/LinearGradient.js +77 -0
- package/src/mappings/MapCallout.js +21 -0
- package/src/mappings/MapMarker.js +47 -0
- package/src/mappings/MapView.js +139 -0
- package/src/mappings/Modal.js +42 -0
- package/src/mappings/NumberInput.js +254 -0
- package/src/mappings/Picker.js +148 -0
- package/src/mappings/RadioButton.js +51 -0
- package/src/mappings/RadioButtonGroup.js +17 -0
- package/src/mappings/RadioButtonRow.js +42 -0
- package/src/mappings/SVG.js +20 -0
- package/src/mappings/SafeAreaView.js +33 -0
- package/src/mappings/ScrollView.js +31 -0
- package/src/mappings/Slider.js +60 -0
- package/src/mappings/StarRating.js +43 -0
- package/src/mappings/Stepper.js +29 -0
- package/src/mappings/Surface.js +14 -0
- package/src/mappings/Swiper.js +60 -0
- package/src/mappings/SwiperItem.js +8 -0
- package/src/mappings/Switch.js +81 -0
- package/src/mappings/Text.js +251 -0
- package/src/mappings/TextArea.js +263 -0
- package/src/mappings/TextField.js +381 -0
- package/src/mappings/TextInput.js +391 -0
- package/src/mappings/Touchable.js +17 -0
- package/src/mappings/Video.js +81 -0
- package/src/mappings/View.js +207 -0
- package/src/mappings/WebView.js +88 -0
- package/src/styles/DarkTheme.js +26 -0
- package/src/styles/DefaultTheme.js +111 -0
- package/src/styles/fonts.js +62 -0
- package/src/styles/overlay.js +60 -0
- package/src/styles/shadow.js +51 -0
- package/src/theming.js +3 -0
- package/src/utilities.js +102 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","basic","stylesPanelSections","CONTAINER_COMPONENT_STYLES_SECTIONS","props","accessible","group","GROUPS","accessibility","label","editable","required","formType","FORM_TYPES","boolean","propType","PROP_TYPES","BOOLEAN","defaultValue","accessibilityLabel","string","STRING","accessibilityHint","accessibilityRole","options","flatArray","accessibilityElementsHidden","accessibilityIgnoresInvertColors","accessibilityLiveRegion","importantForAccessibility","hitSlop","advanced","position","OBJECT","pointerEvents","removeClippedSubviews","collapsable","needsOffscreenAlphaCompositing","renderToHardwareTextureAndroid","shouldRasterizeIOS"],"sourceRoot":"../../src","sources":["View.
|
|
1
|
+
{"version":3,"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","basic","stylesPanelSections","CONTAINER_COMPONENT_STYLES_SECTIONS","props","accessible","group","GROUPS","accessibility","label","editable","required","formType","FORM_TYPES","boolean","propType","PROP_TYPES","BOOLEAN","defaultValue","accessibilityLabel","string","STRING","accessibilityHint","accessibilityRole","options","flatArray","accessibilityElementsHidden","accessibilityIgnoresInvertColors","accessibilityLiveRegion","importantForAccessibility","hitSlop","advanced","position","OBJECT","pointerEvents","removeClippedSubviews","collapsable","needsOffscreenAlphaCompositing","renderToHardwareTextureAndroid","shouldRasterizeIOS"],"sourceRoot":"../../src","sources":["View.js"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","utility","stylesPanelSections","StylesPanelSections","Size","Margins","Borders","layout","flex","props","source","createSourceProp","defaultValue","optimizeVideoChat","createStaticBoolProp","label","javaScriptEnabled","group","GROUPS","advanced","javaScriptCanOpenWindowsAutomatically","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","mediaPlaybackRequiresUserAction","startInLoadingState","allowFileAccessFromFileURLs","allowUniversalAccessFromFileURLs","cacheEnabled","incognito","userAgent","createTextProp","applicationNameForUserAgent"],"sourceRoot":"../../src","sources":["WebView.
|
|
1
|
+
{"version":3,"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","utility","stylesPanelSections","StylesPanelSections","Size","Margins","Borders","layout","flex","props","source","createSourceProp","defaultValue","optimizeVideoChat","createStaticBoolProp","label","javaScriptEnabled","group","GROUPS","advanced","javaScriptCanOpenWindowsAutomatically","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","mediaPlaybackRequiresUserAction","startInLoadingState","allowFileAccessFromFileURLs","allowUniversalAccessFromFileURLs","cacheEnabled","incognito","userAgent","createTextProp","applicationNameForUserAgent"],"sourceRoot":"../../src","sources":["WebView.js"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "47.0.0-
|
|
3
|
+
"version": "47.0.0-ba694d.2+ba694d3",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@date-io/date-fns": "^1.3.13",
|
|
43
43
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
44
|
-
"@draftbit/types": "^47.0.0-
|
|
44
|
+
"@draftbit/types": "^47.0.0-ba694d.2+ba694d3",
|
|
45
45
|
"@material-ui/core": "^4.11.0",
|
|
46
46
|
"@material-ui/pickers": "^3.2.10",
|
|
47
47
|
"@react-native-community/slider": "4.2.3",
|
|
@@ -81,5 +81,5 @@
|
|
|
81
81
|
]
|
|
82
82
|
]
|
|
83
83
|
},
|
|
84
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "ba694d345a8232ab35e9ade4530dce5f24669916"
|
|
85
85
|
}
|
package/src/Provider.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
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);
|
|
@@ -0,0 +1,32 @@
|
|
|
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);
|
|
@@ -0,0 +1,45 @@
|
|
|
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;
|
|
@@ -0,0 +1,6 @@
|
|
|
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;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Text, StyleSheet, TouchableOpacity, } from "react-native";
|
|
3
|
+
import { extractStyles } from "../../utilities";
|
|
4
|
+
const ActionSheetItem = ({ label, style, color, onPress, }) => {
|
|
5
|
+
const { textStyles, viewStyles } = extractStyles(style);
|
|
6
|
+
return (React.createElement(TouchableOpacity, { activeOpacity: 0.7, style: [styles.wrapper, viewStyles], onPress: onPress },
|
|
7
|
+
React.createElement(Text, { style: [styles.label, textStyles, { color }] }, label)));
|
|
8
|
+
};
|
|
9
|
+
const styles = StyleSheet.create({
|
|
10
|
+
wrapper: {
|
|
11
|
+
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
12
|
+
borderBottomColor: "#CCCCCC",
|
|
13
|
+
backgroundColor: "#F1F1F1",
|
|
14
|
+
minHeight: 50,
|
|
15
|
+
overflow: "hidden",
|
|
16
|
+
display: "flex",
|
|
17
|
+
justifyContent: "center",
|
|
18
|
+
},
|
|
19
|
+
label: {
|
|
20
|
+
fontSize: 16,
|
|
21
|
+
textAlign: "center",
|
|
22
|
+
color: "#0A84FF",
|
|
23
|
+
fontWeight: "500",
|
|
24
|
+
overflow: "hidden",
|
|
25
|
+
paddingHorizontal: 20,
|
|
26
|
+
paddingVertical: 10,
|
|
27
|
+
alignSelf: "center",
|
|
28
|
+
},
|
|
29
|
+
});
|
|
30
|
+
export default ActionSheetItem;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Button, Text, View, StyleSheet, Animated, } from "react-native";
|
|
3
|
+
import Surface from "./Surface";
|
|
4
|
+
import shadow from "../styles/shadow";
|
|
5
|
+
import { withTheme } from "../theming";
|
|
6
|
+
const ELEVATION = 1;
|
|
7
|
+
const DEFAULT_MAX_WIDTH = 960;
|
|
8
|
+
const Banner = ({ initiallyVisible = true, dismissable = true, icon, buttonColor, content, contentStyle, style, theme, Icon, ...rest }) => {
|
|
9
|
+
const [visible, setVisible] = React.useState(initiallyVisible);
|
|
10
|
+
React.useEffect(() => {
|
|
11
|
+
if (initiallyVisible) {
|
|
12
|
+
setVisible(true);
|
|
13
|
+
}
|
|
14
|
+
}, [initiallyVisible]);
|
|
15
|
+
const { current: position } = React.useRef(new Animated.Value(visible ? 1 : 0));
|
|
16
|
+
const [layout, setLayout] = React.useState({
|
|
17
|
+
height: 0,
|
|
18
|
+
measured: false,
|
|
19
|
+
});
|
|
20
|
+
React.useEffect(() => {
|
|
21
|
+
if (visible) {
|
|
22
|
+
// show
|
|
23
|
+
Animated.timing(position, {
|
|
24
|
+
duration: 250,
|
|
25
|
+
toValue: 1,
|
|
26
|
+
useNativeDriver: false,
|
|
27
|
+
}).start();
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
// hide
|
|
31
|
+
Animated.timing(position, {
|
|
32
|
+
duration: 200,
|
|
33
|
+
toValue: 0,
|
|
34
|
+
useNativeDriver: false,
|
|
35
|
+
}).start();
|
|
36
|
+
}
|
|
37
|
+
}, [visible, position]);
|
|
38
|
+
const handleLayout = ({ nativeEvent }) => {
|
|
39
|
+
const { height } = nativeEvent.layout;
|
|
40
|
+
setLayout({ height, measured: true });
|
|
41
|
+
};
|
|
42
|
+
// The banner animation has 2 parts:
|
|
43
|
+
// 1. Blank spacer element which animates its height to move the content
|
|
44
|
+
// 2. Actual banner which animates its translateY
|
|
45
|
+
// In initial render, we position everything normally and measure the height of the banner
|
|
46
|
+
// Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
|
|
47
|
+
// We need this because we need to move the content below as if banner's height was being animated
|
|
48
|
+
// However we can't animated banner's height directly as it'll also resize the content inside
|
|
49
|
+
const height = Animated.multiply(position, layout.height);
|
|
50
|
+
const translateY = Animated.multiply(Animated.add(position, -1), layout.height);
|
|
51
|
+
return (React.createElement(Surface, { ...rest, style: [styles.container, shadow(ELEVATION), style] },
|
|
52
|
+
React.createElement(View, { style: [styles.wrapper, contentStyle] },
|
|
53
|
+
React.createElement(Animated.View, { style: { height } }),
|
|
54
|
+
React.createElement(Animated.View, { onLayout: handleLayout, style: [
|
|
55
|
+
layout.measured || !visible
|
|
56
|
+
? // If we have measured banner's height or it's invisible,
|
|
57
|
+
// Position it absolutely, the layout will be taken care of the spacer
|
|
58
|
+
[styles.absolute, { transform: [{ translateY }] }]
|
|
59
|
+
: // Otherwise position it normally
|
|
60
|
+
null,
|
|
61
|
+
!layout.measured && !visible
|
|
62
|
+
? // If we haven't measured banner's height yet and it's invisible,
|
|
63
|
+
// hide it with opacity: 0 so user doesn't see it
|
|
64
|
+
{ opacity: 0 }
|
|
65
|
+
: null,
|
|
66
|
+
] },
|
|
67
|
+
React.createElement(View, { style: [styles.content, { marginBottom: dismissable ? 0 : 16 }] },
|
|
68
|
+
icon ? (React.createElement(View, { style: styles.icon },
|
|
69
|
+
React.createElement(Icon, { name: icon, size: 40 }))) : null,
|
|
70
|
+
React.createElement(Text, { style: [styles.message, { color: theme.colors.text }], accessibilityLiveRegion: visible ? "polite" : "none", accessibilityRole: "alert" }, content)),
|
|
71
|
+
dismissable ? (React.createElement(View, { style: styles.actions },
|
|
72
|
+
React.createElement(Button, { color: buttonColor || theme.colors.primary, title: "Close", onPress: () => setVisible(false) }))) : null))));
|
|
73
|
+
};
|
|
74
|
+
const styles = StyleSheet.create({
|
|
75
|
+
container: {
|
|
76
|
+
elevation: ELEVATION,
|
|
77
|
+
},
|
|
78
|
+
wrapper: {
|
|
79
|
+
overflow: "hidden",
|
|
80
|
+
alignSelf: "center",
|
|
81
|
+
width: "100%",
|
|
82
|
+
maxWidth: DEFAULT_MAX_WIDTH,
|
|
83
|
+
},
|
|
84
|
+
absolute: {
|
|
85
|
+
position: "absolute",
|
|
86
|
+
top: 0,
|
|
87
|
+
width: "100%",
|
|
88
|
+
},
|
|
89
|
+
content: {
|
|
90
|
+
flexDirection: "row",
|
|
91
|
+
justifyContent: "flex-start",
|
|
92
|
+
marginHorizontal: 8,
|
|
93
|
+
marginTop: 16,
|
|
94
|
+
marginBottom: 0,
|
|
95
|
+
},
|
|
96
|
+
icon: {
|
|
97
|
+
margin: 8,
|
|
98
|
+
},
|
|
99
|
+
message: {
|
|
100
|
+
flex: 1,
|
|
101
|
+
margin: 8,
|
|
102
|
+
},
|
|
103
|
+
actions: {
|
|
104
|
+
flexDirection: "row",
|
|
105
|
+
justifyContent: "flex-end",
|
|
106
|
+
margin: 8,
|
|
107
|
+
},
|
|
108
|
+
});
|
|
109
|
+
export default withTheme(Banner);
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Text, Pressable, Platform, StyleSheet, ActivityIndicator, } from "react-native";
|
|
3
|
+
import { withTheme } from "../theming";
|
|
4
|
+
const CONSTANTS = {
|
|
5
|
+
baseHeight: 42,
|
|
6
|
+
borderRadius: 4,
|
|
7
|
+
padding: 8,
|
|
8
|
+
icon: 24,
|
|
9
|
+
};
|
|
10
|
+
function Base({ Icon, icon, title, onPress, loading, disabled, style, ...props }) {
|
|
11
|
+
const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...buttonStyles } = StyleSheet.flatten(style || {});
|
|
12
|
+
const titleStyles = {
|
|
13
|
+
color,
|
|
14
|
+
fontFamily,
|
|
15
|
+
fontWeight,
|
|
16
|
+
fontSize,
|
|
17
|
+
lineHeight,
|
|
18
|
+
letterSpacing,
|
|
19
|
+
textTransform,
|
|
20
|
+
textAlign,
|
|
21
|
+
textDecorationLine,
|
|
22
|
+
textDecorationColor,
|
|
23
|
+
textDecorationStyle,
|
|
24
|
+
};
|
|
25
|
+
if (textAlign === "left") {
|
|
26
|
+
buttonStyles.justifyContent = "flex-start";
|
|
27
|
+
}
|
|
28
|
+
if (textAlign === "right") {
|
|
29
|
+
buttonStyles.justifyContent = "flex-end";
|
|
30
|
+
}
|
|
31
|
+
return (React.createElement(Pressable, { onPress: onPress, disabled: disabled || loading, style: ({ pressed }) => {
|
|
32
|
+
return [
|
|
33
|
+
styles.base,
|
|
34
|
+
{
|
|
35
|
+
opacity: pressed || disabled ? 0.75 : 1,
|
|
36
|
+
},
|
|
37
|
+
buttonStyles,
|
|
38
|
+
];
|
|
39
|
+
}, ...props },
|
|
40
|
+
loading ? (React.createElement(ActivityIndicator, { size: "small", color: color, style: styles.loading })) : null,
|
|
41
|
+
icon && !loading ? (React.createElement(Icon, { name: icon, color: color, style: styles.icon, size: CONSTANTS.icon })) : null,
|
|
42
|
+
React.createElement(Text, { style: titleStyles }, title)));
|
|
43
|
+
}
|
|
44
|
+
const Solid = ({ style, theme, ...props }) => {
|
|
45
|
+
return (React.createElement(Base, { style: [
|
|
46
|
+
{
|
|
47
|
+
color: "#FFF",
|
|
48
|
+
borderRadius: theme.roundness,
|
|
49
|
+
backgroundColor: theme.colors.primary,
|
|
50
|
+
},
|
|
51
|
+
style,
|
|
52
|
+
], ...props }));
|
|
53
|
+
};
|
|
54
|
+
const ButtonSolid = withTheme(Solid);
|
|
55
|
+
export { ButtonSolid };
|
|
56
|
+
const Button = withTheme(Solid);
|
|
57
|
+
export { Button };
|
|
58
|
+
const Outline = ({ style, theme, ...props }) => {
|
|
59
|
+
return (React.createElement(Base, { style: [
|
|
60
|
+
styles.outline,
|
|
61
|
+
{
|
|
62
|
+
borderRadius: theme.roundness,
|
|
63
|
+
borderColor: theme.colors.primary,
|
|
64
|
+
color: theme.colors.primary,
|
|
65
|
+
},
|
|
66
|
+
style,
|
|
67
|
+
], ...props }));
|
|
68
|
+
};
|
|
69
|
+
const ButtonOutline = withTheme(Outline);
|
|
70
|
+
export { ButtonOutline };
|
|
71
|
+
const styles = StyleSheet.create({
|
|
72
|
+
base: {
|
|
73
|
+
position: "relative",
|
|
74
|
+
flexDirection: "row",
|
|
75
|
+
alignItems: "center",
|
|
76
|
+
justifyContent: "center",
|
|
77
|
+
minHeight: CONSTANTS.baseHeight,
|
|
78
|
+
paddingHorizontal: 12,
|
|
79
|
+
fontFamily: "System",
|
|
80
|
+
fontWeight: "700",
|
|
81
|
+
...Platform.select({
|
|
82
|
+
web: {
|
|
83
|
+
cursor: "pointer",
|
|
84
|
+
userSelect: "none",
|
|
85
|
+
},
|
|
86
|
+
}),
|
|
87
|
+
},
|
|
88
|
+
outline: {
|
|
89
|
+
backgroundColor: "transparent",
|
|
90
|
+
borderWidth: 1,
|
|
91
|
+
},
|
|
92
|
+
bare: {
|
|
93
|
+
backgroundColor: "transparent",
|
|
94
|
+
padding: 0,
|
|
95
|
+
minHeight: undefined,
|
|
96
|
+
},
|
|
97
|
+
loading: {
|
|
98
|
+
marginRight: 6,
|
|
99
|
+
},
|
|
100
|
+
icon: {
|
|
101
|
+
...Platform.select({
|
|
102
|
+
web: {
|
|
103
|
+
marginTop: 1,
|
|
104
|
+
marginRight: 4,
|
|
105
|
+
alignSelf: "center",
|
|
106
|
+
},
|
|
107
|
+
default: {
|
|
108
|
+
marginBottom: 2,
|
|
109
|
+
marginRight: 4,
|
|
110
|
+
alignSelf: "center",
|
|
111
|
+
},
|
|
112
|
+
}),
|
|
113
|
+
},
|
|
114
|
+
});
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { View, StyleSheet, } from "react-native";
|
|
3
|
+
import { useTheme } from "../../theming";
|
|
4
|
+
import Touchable from "../Touchable";
|
|
5
|
+
import { usePrevious } from "../../hooks";
|
|
6
|
+
const Checkbox = ({ Icon, status, disabled = false, onPress, onCheck, onUncheck, color, uncheckedColor, defaultValue, checkedIcon = "MaterialCommunityIcons/checkbox-marked", uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline", size = 24, style, ...rest }) => {
|
|
7
|
+
const [internalValue, setInternalValue] = React.useState(status || defaultValue || false);
|
|
8
|
+
React.useEffect(() => {
|
|
9
|
+
if (status != null) {
|
|
10
|
+
setInternalValue(status);
|
|
11
|
+
}
|
|
12
|
+
}, [status]);
|
|
13
|
+
// This special logic is to handle weird APIs like Airtable that return
|
|
14
|
+
// true or undefined for a boolean
|
|
15
|
+
const previousDefaultValue = usePrevious(defaultValue);
|
|
16
|
+
React.useEffect(() => {
|
|
17
|
+
if (defaultValue !== previousDefaultValue) {
|
|
18
|
+
setInternalValue(Boolean(defaultValue));
|
|
19
|
+
}
|
|
20
|
+
}, [defaultValue, previousDefaultValue]);
|
|
21
|
+
const { colors } = useTheme();
|
|
22
|
+
const checkboxColor = internalValue
|
|
23
|
+
? color || colors.primary
|
|
24
|
+
: uncheckedColor || colors.primary;
|
|
25
|
+
const handlePress = () => {
|
|
26
|
+
const newValue = !internalValue;
|
|
27
|
+
setInternalValue(newValue);
|
|
28
|
+
onPress === null || onPress === void 0 ? void 0 : onPress(newValue);
|
|
29
|
+
if (newValue) {
|
|
30
|
+
onCheck === null || onCheck === void 0 ? void 0 : onCheck();
|
|
31
|
+
}
|
|
32
|
+
if (!newValue) {
|
|
33
|
+
onUncheck === null || onUncheck === void 0 ? void 0 : onUncheck();
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
return (React.createElement(Touchable, { ...rest, onPress: handlePress, disabled: disabled, accessibilityState: { disabled }, accessibilityRole: "button", accessibilityLiveRegion: "polite", style: [styles.container, style, { width: size, height: size }] },
|
|
37
|
+
React.createElement(Icon, { style: styles.icon, name: internalValue ? checkedIcon : uncheckedIcon, size: size, color: checkboxColor }),
|
|
38
|
+
React.createElement(View, { style: [StyleSheet.absoluteFill, styles.fillContainer] },
|
|
39
|
+
React.createElement(View, { style: [
|
|
40
|
+
styles.fill,
|
|
41
|
+
{ opacity: disabled ? 0.5 : 1 },
|
|
42
|
+
{ borderColor: checkboxColor },
|
|
43
|
+
] }))));
|
|
44
|
+
};
|
|
45
|
+
const styles = StyleSheet.create({
|
|
46
|
+
container: {
|
|
47
|
+
borderRadius: 18,
|
|
48
|
+
},
|
|
49
|
+
fillContainer: {
|
|
50
|
+
alignItems: "center",
|
|
51
|
+
justifyContent: "center",
|
|
52
|
+
},
|
|
53
|
+
icon: {
|
|
54
|
+
alignSelf: "center",
|
|
55
|
+
},
|
|
56
|
+
fill: {
|
|
57
|
+
borderRadius: 5,
|
|
58
|
+
width: 30,
|
|
59
|
+
height: 30,
|
|
60
|
+
alignSelf: "center",
|
|
61
|
+
},
|
|
62
|
+
});
|
|
63
|
+
export default Checkbox;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { View } from "react-native";
|
|
3
|
+
import { checkboxGroupContext, Direction } from "./context";
|
|
4
|
+
const { Provider } = checkboxGroupContext;
|
|
5
|
+
const CheckboxGroup = ({ direction = Direction.Vertical, values, onValueChange = () => { }, style, children, ...rest }) => {
|
|
6
|
+
const _containerStyle = [
|
|
7
|
+
{
|
|
8
|
+
flexDirection: direction === Direction.Horizontal ? "row" : "column",
|
|
9
|
+
overflow: "hidden",
|
|
10
|
+
},
|
|
11
|
+
];
|
|
12
|
+
if (direction !== Direction.Vertical) {
|
|
13
|
+
_containerStyle.push({
|
|
14
|
+
alignItems: "center",
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
return (React.createElement(View, { style: [{ minHeight: 40 }, style], ...rest },
|
|
18
|
+
React.createElement(Provider, { value: { values, onValueChange, direction } },
|
|
19
|
+
React.createElement(View, { style: _containerStyle }, children))));
|
|
20
|
+
};
|
|
21
|
+
export default CheckboxGroup;
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StyleSheet, View, Platform, } from "react-native";
|
|
3
|
+
import Checkbox from "./Checkbox";
|
|
4
|
+
import Text from "../Text";
|
|
5
|
+
import { useCheckboxGroupContext } from "./context";
|
|
6
|
+
import { Direction as GroupDirection } from "./context";
|
|
7
|
+
import Touchable from "../Touchable";
|
|
8
|
+
import { extractStyles } from "../../utilities";
|
|
9
|
+
export var Direction;
|
|
10
|
+
(function (Direction) {
|
|
11
|
+
Direction["Row"] = "row";
|
|
12
|
+
Direction["RowReverse"] = "row-reverse";
|
|
13
|
+
})(Direction || (Direction = {}));
|
|
14
|
+
const getCheckboxAlignment = (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 CheckboxGroupRow = ({ Icon, label = "Label", status, value, onPress, labelContainerStyle, labelStyle, checkboxStyle, direction = Direction.Row, disabled, style, color, uncheckedColor, ...rest }) => {
|
|
34
|
+
const { values: selectedValues, onValueChange, direction: parentDirection, } = useCheckboxGroupContext();
|
|
35
|
+
const values = Array.isArray(selectedValues) ? selectedValues : [];
|
|
36
|
+
const isChecked = status || values.includes(value);
|
|
37
|
+
const handlePress = () => {
|
|
38
|
+
if (!disabled) {
|
|
39
|
+
onPress === null || onPress === void 0 ? void 0 : onPress(!isChecked);
|
|
40
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value, !isChecked);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
const { textStyles, viewStyles } = extractStyles(style);
|
|
44
|
+
return (React.createElement(Touchable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
|
|
45
|
+
React.createElement(View, { style: [
|
|
46
|
+
styles.label,
|
|
47
|
+
{
|
|
48
|
+
alignItems: direction === Direction.Row ? "flex-start" : "flex-end",
|
|
49
|
+
},
|
|
50
|
+
labelContainerStyle,
|
|
51
|
+
] }, renderLabel(label, labelStyle, textStyles)),
|
|
52
|
+
React.createElement(View, { style: {
|
|
53
|
+
flex: 1,
|
|
54
|
+
alignItems: getCheckboxAlignment(parentDirection, direction),
|
|
55
|
+
} },
|
|
56
|
+
React.createElement(Checkbox, { Icon: Icon, status: isChecked, onPress: handlePress, style: checkboxStyle, disabled: disabled, color: color, uncheckedColor: uncheckedColor }))));
|
|
57
|
+
};
|
|
58
|
+
const styles = StyleSheet.create({
|
|
59
|
+
mainParent: {
|
|
60
|
+
alignItems: "center",
|
|
61
|
+
justifyContent: "space-around",
|
|
62
|
+
paddingStart: 20,
|
|
63
|
+
minHeight: 50,
|
|
64
|
+
paddingEnd: 20,
|
|
65
|
+
display: "flex",
|
|
66
|
+
...Platform.select({
|
|
67
|
+
web: {
|
|
68
|
+
cursor: "pointer",
|
|
69
|
+
userSelect: "none",
|
|
70
|
+
},
|
|
71
|
+
}),
|
|
72
|
+
},
|
|
73
|
+
label: {
|
|
74
|
+
flex: 3,
|
|
75
|
+
},
|
|
76
|
+
});
|
|
77
|
+
export default CheckboxGroupRow;
|