ordering-ui-react-native 0.24.43-test → 0.25.1

package/themes/original/src/components/shared/OKeyButton.tsx

@@ -1,35 +1,35 @@
-import * as React from 'react'
-import { ViewStyle } from 'react-native'
-import styled from 'styled-components/native'
-import OText from './OText'
-
-const Wrapper = styled.TouchableOpacity`
-    background-color: white;
-    border-radius: 4px;
-    height: 50px;
-    align-items: center;
-    justify-content: center;
-`
-
-interface Props {
-    title?: string,
-    subTitle?: string,
-    onClick?: any,
-    style?: ViewStyle
-}
-
-const OKeyButton = (props: Props) => {
-    return (
-        <Wrapper 
-            style={props.style}
-            onPress={props.onClick}
-        >
-            <OText size={22}>{props.title}</OText>
-            {props.subTitle ? (
-                <OText>{props.subTitle}</OText>
-            ) : null}
-        </Wrapper>
-    )
-}
-
+import * as React from 'react'
+import { ViewStyle } from 'react-native'
+import styled from 'styled-components/native'
+import OText from './OText'
+
+const Wrapper = styled.TouchableOpacity`
+    background-color: white;
+    border-radius: 4px;
+    height: 50px;
+    align-items: center;
+    justify-content: center;
+`
+
+interface Props {
+    title?: string,
+    subTitle?: string,
+    onClick?: any,
+    style?: ViewStyle
+}
+
+const OKeyButton = (props: Props) => {
+    return (
+        <Wrapper 
+            style={props.style}
+            onPress={props.onClick}
+        >
+            <OText size={22}>{props.title}</OText>
+            {props.subTitle ? (
+                <OText>{props.subTitle}</OText>
+            ) : null}
+        </Wrapper>
+    )
+}
+
 export default OKeyButton

package/themes/original/src/components/shared/OModal.tsx

@@ -1,191 +1,194 @@
-import * as React from 'react';
-import { Modal, StyleSheet, Text, SafeAreaView, View, TouchableOpacity, Platform } from "react-native";
-import { OIcon } from '.';
-import styled, { useTheme } from 'styled-components/native';
-
-interface Props {
-	open?: boolean;
-	title?: string;
-	children?: any;
-	onAccept?: any;
-	onCancel?: any;
-	onClose?: any;
-	style?: any;
-	acceptText?: string;
-	cancelText?: string;
-	isTransparent?: boolean;
-	hideCloseDefault?: boolean;
-	entireModal?: boolean;
-	customClose?: boolean;
-	titleSectionStyle?: any;
-	isNotDecoration?: boolean;
-	styleCloseButton?: any,
-	isAvoidKeyBoardView?: boolean;
-	styleContainerCloseButton?: any;
-}
-const KeyboardView = styled.KeyboardAvoidingView`
-  flex-grow: 1;
-  flex-shrink: 1;
-`;
-
-const OModal = (props: Props): React.ReactElement => {
-	const {
-		open,
-		title,
-		children,
-		onAccept,
-		onCancel,
-		onClose,
-		acceptText,
-		cancelText,
-		isTransparent,
-		hideCloseDefault,
-		entireModal,
-		customClose,
-		titleSectionStyle,
-		isNotDecoration,
-		style,
-		styleCloseButton,
-		styleContainerCloseButton,
-		isAvoidKeyBoardView
-	} = props
-
-	const theme = useTheme();
-
-	const renderSafeAreaView = () => (
-		<SafeAreaView style={styles.container}>
-			{!entireModal ? (
-				<View style={styles.centeredView}>
-					<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
-						<TouchableOpacity style={{...styles.wrapperIcon, ...styleContainerCloseButton}} onPress={onClose}>
-							<OIcon
-								src={theme.images.general.close}
-								width={16}
-								style={isNotDecoration && (styleCloseButton || styles.cancelBtn)}
-							/>
-						</TouchableOpacity>
-						<Text style={styles.modalText}>{title || ''}</Text>
-					</View>
-					{children}
-				</View>
-			) :
-				<View>
-					{!customClose && (
-						<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
-							<TouchableOpacity style={styles.wrapperIcon} onPress={onClose}>
-								<OIcon
-									src={theme.images.general.close}
-									width={16}
-									style={styleCloseButton || styles.cancelBtn}
-								/>
-							</TouchableOpacity>
-							<Text style={styles.modalText}>{title || ''}</Text>
-						</View>
-					)}
-					{children}
-				</View>
-			}
-		</SafeAreaView>
-	)
-
-	return (
-		<Modal
-			animationType="slide"
-			transparent={isTransparent}
-			visible={open}
-			onRequestClose={() =>  onClose && onClose()}
-			style={{ height: '100%', flex: 1, position: 'absolute', ...style, zIndex: 9999 }}
-		>
-			{isAvoidKeyBoardView ? (
-				<KeyboardView
-					enabled
-					behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-				>
-					{renderSafeAreaView()}
-				</KeyboardView>
-			) : (
-				renderSafeAreaView()
-			)}
-		</Modal>
-	);
-};
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-	},
-	centeredView: {
-		justifyContent: "center",
-		alignItems: 'flex-start',
-		position: 'relative',
-		width: '100%',
-	},
-	titleSection: {
-		width: '100%',
-		flex: 1,
-		justifyContent: 'space-between',
-		alignItems: 'flex-start',
-		paddingLeft: 40,
-		paddingRight: 40,
-		marginBottom: 40
-	},
-	cancelBtn: {
-		//  position: 'absolute',
-		//  left: 0,
-		//  margin: 15,
-		// zIndex: 10000
-	},
-	modalText: {
-		marginTop: 15,
-		fontSize: 20,
-		lineHeight: 30,
-		fontWeight: '600',
-		textAlign: "center",
-		zIndex: 10
-	},
-	wrapperIcon: {
-		overflow: 'hidden',
-		backgroundColor: 'transparent',
-		width: 35,
-		height: 35,
-		marginStart: -9,
-		marginTop: 12,
-		alignItems: 'center',
-		justifyContent: 'center',
-		zIndex: 99999
-	},
-
-	modalView: {
-		margin: 20,
-		backgroundColor: "white",
-		borderRadius: 20,
-		padding: 35,
-		alignItems: "center",
-		shadowColor: "#000",
-		shadowOffset: {
-			width: 0,
-			height: 2
-		},
-		shadowOpacity: 0.25,
-		shadowRadius: 4,
-		elevation: 5
-	},
-	button: {
-		borderRadius: 20,
-		padding: 10,
-		elevation: 2
-	},
-	buttonOpen: {
-		backgroundColor: "#F194FF",
-	},
-	buttonClose: {
-		backgroundColor: "#2196F3",
-	},
-	textStyle: {
-		color: "white",
-		fontWeight: "bold",
-		textAlign: "center"
-	},
-});
-
-export default OModal;
+import * as React from 'react';
+import { Modal, StyleSheet, Text, SafeAreaView, View, TouchableOpacity, Platform } from "react-native";
+import styled from 'styled-components/native';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import { Toast } from '../../../../../src/components/shared/OToast'
+interface Props {
+	open?: boolean;
+	title?: string;
+	children?: any;
+	onAccept?: any;
+	onCancel?: any;
+	onClose?: any;
+	style?: any;
+	acceptText?: string;
+	cancelText?: string;
+	isTransparent?: boolean;
+	hideCloseDefault?: boolean;
+	entireModal?: boolean;
+	customClose?: boolean;
+	titleSectionStyle?: any;
+	isNotDecoration?: boolean;
+	styleCloseButton?: any,
+	isAvoidKeyBoardView?: boolean;
+	styleContainerCloseButton?: any;
+	showToastInsideModal?: boolean;
+}
+const KeyboardView = styled.KeyboardAvoidingView`
+  flex-grow: 1;
+  flex-shrink: 1;
+`;
+
+const OModal = (props: Props): React.ReactElement => {
+	const {
+		open,
+		title,
+		children,
+		onAccept,
+		onCancel,
+		onClose,
+		acceptText,
+		cancelText,
+		isTransparent,
+		hideCloseDefault,
+		entireModal,
+		customClose,
+		titleSectionStyle,
+		isNotDecoration,
+		style,
+		styleCloseButton,
+		styleContainerCloseButton,
+		isAvoidKeyBoardView,
+		showToastInsideModal
+	} = props
+
+	const renderSafeAreaView = () => (
+		<SafeAreaView style={styles.container}>
+			{!entireModal ? (
+				<View style={styles.centeredView}>
+					<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
+						<TouchableOpacity style={{ ...styles.wrapperIcon, ...styleContainerCloseButton }} onPress={onClose}>
+							<AntDesignIcon
+								name='close'
+								size={26}
+								style={isNotDecoration && (styleCloseButton || styles.cancelBtn)}
+							/>
+						</TouchableOpacity>
+						<Text style={styles.modalText}>{title || ''}</Text>
+					</View>
+					{children}
+				</View>
+			) :
+				<View>
+					{!customClose && (
+						<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
+							<TouchableOpacity style={styles.wrapperIcon} onPress={onClose}>
+								<AntDesignIcon
+									name='close'
+									size={26}
+									style={styleCloseButton || styles.cancelBtn}
+								/>
+							</TouchableOpacity>
+							<Text style={styles.modalText}>{title || ''}</Text>
+						</View>
+					)}
+					{children}
+				</View>
+			}
+		</SafeAreaView>
+	)
+
+	return (
+		<Modal
+			animationType="slide"
+			transparent={isTransparent}
+			visible={open}
+			onRequestClose={() => onClose && onClose()}
+			style={{ height: '100%', flex: 1, position: 'absolute', ...style, zIndex: 9999 }}
+		>
+			{showToastInsideModal && (
+				<Toast />
+			)}
+			{isAvoidKeyBoardView ? (
+				<KeyboardView
+					enabled
+					behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+				>
+					{renderSafeAreaView()}
+				</KeyboardView>
+			) : (
+				renderSafeAreaView()
+			)}
+		</Modal>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+	centeredView: {
+		justifyContent: "center",
+		alignItems: 'flex-start',
+		position: 'relative',
+		width: '100%',
+	},
+	titleSection: {
+		width: '100%',
+		flex: 1,
+		justifyContent: 'space-between',
+		alignItems: 'flex-start',
+		paddingLeft: 20,
+		paddingRight: 20,
+		marginBottom: 40
+	},
+	cancelBtn: {
+		//  position: 'absolute',
+		//  left: 0,
+		//  margin: 15,
+		// zIndex: 10000
+	},
+	modalText: {
+		marginTop: 15,
+		fontSize: 20,
+		lineHeight: 30,
+		fontWeight: '600',
+		textAlign: "center",
+		zIndex: 10
+	},
+	wrapperIcon: {
+		overflow: 'hidden',
+		backgroundColor: 'transparent',
+		width: 35,
+		height: 35,
+		marginStart: -9,
+		marginTop: 12,
+		alignItems: 'center',
+		justifyContent: 'center',
+		zIndex: 99999
+	},
+
+	modalView: {
+		margin: 20,
+		backgroundColor: "white",
+		borderRadius: 20,
+		padding: 35,
+		alignItems: "center",
+		shadowColor: "#000",
+		shadowOffset: {
+			width: 0,
+			height: 2
+		},
+		shadowOpacity: 0.25,
+		shadowRadius: 4,
+		elevation: 5
+	},
+	button: {
+		borderRadius: 20,
+		padding: 10,
+		elevation: 2
+	},
+	buttonOpen: {
+		backgroundColor: "#F194FF",
+	},
+	buttonClose: {
+		backgroundColor: "#2196F3",
+	},
+	textStyle: {
+		color: "white",
+		fontWeight: "bold",
+		textAlign: "center"
+	},
+});
+
+export default OModal;

package/themes/original/src/components/shared/OText.tsx

@@ -1,52 +1,52 @@
-import * as React from 'react';
-import {TextStyle} from 'react-native';
-import styled, {css} from 'styled-components/native';
-
-const SText = styled.Text`
-  color: ${(props: any) => props.color || 'black'};
-  font-family: 'Poppins-Regular';
-  font-size: ${(props: any) => (props.size ? `${props.size}px` : '14px')};
-  flex-wrap: wrap;
-  margin-bottom: ${(props: any) =>
-    props.hasBottom ? '10px' : props.mBottom ? `${props.mBottom}px` : 0};
-  margin-right: ${(props: any) =>
-    props.hasBottom ? '10px' : props.mRight ? `${props.mRight}px` : 0};
-  margin-left: ${(props: any) =>
-    props.hasBottom ? '10px' : props.mLeft ? `${props.mLeft}px` : 0};
-  ${(props: any) =>
-    props.weight &&
-    css`
-      font-weight: ${props.weight};
-    `};
-  ${(props: any) =>
-    props.isWrap &&
-    css`
-      flex: ${props.weight ? 1 : 0};
-    `};
-`;
-interface Props {
-  color?: string;
-  size?: number;
-  weight?: any;
-  style?: TextStyle;
-  children?: JSX.Element | JSX.Element[] | string;
-  isWrap?: boolean;
-  hasBottom?: boolean;
-  mBottom?: any;
-  space?: any;
-  mRight?: number;
-  mLeft?: number;
-  numberOfLines?: number;
-  ellipsizeMode?: string;
-  lineHeight?: number;
-}
-
-const OText = (props: Props): React.ReactElement => {
-  return (
-    <SText {...props} style={[props.style, {lineHeight: props.lineHeight}]}>
-      {props.children}{props.space && ' '}
-    </SText>
-  );
-};
-
-export default OText;
+import * as React from 'react';
+import {TextStyle} from 'react-native';
+import styled, {css} from 'styled-components/native';
+
+const SText = styled.Text`
+  color: ${(props: any) => props.color || 'black'};
+  font-family: 'Poppins-Regular';
+  font-size: ${(props: any) => (props.size ? `${props.size}px` : '14px')};
+  flex-wrap: wrap;
+  margin-bottom: ${(props: any) =>
+    props.hasBottom ? '10px' : props.mBottom ? `${props.mBottom}px` : 0};
+  margin-right: ${(props: any) =>
+    props.hasBottom ? '10px' : props.mRight ? `${props.mRight}px` : 0};
+  margin-left: ${(props: any) =>
+    props.hasBottom ? '10px' : props.mLeft ? `${props.mLeft}px` : 0};
+  ${(props: any) =>
+    props.weight &&
+    css`
+      font-weight: ${props.weight};
+    `};
+  ${(props: any) =>
+    props.isWrap &&
+    css`
+      flex: ${props.weight ? 1 : 0};
+    `};
+`;
+interface Props {
+  color?: string;
+  size?: number;
+  weight?: any;
+  style?: TextStyle;
+  children?: JSX.Element | JSX.Element[] | string;
+  isWrap?: boolean;
+  hasBottom?: boolean;
+  mBottom?: any;
+  space?: any;
+  mRight?: number;
+  mLeft?: number;
+  numberOfLines?: number;
+  ellipsizeMode?: string;
+  lineHeight?: number;
+}
+
+const OText = (props: Props): React.ReactElement => {
+  return (
+    <SText {...props} style={[props.style, {lineHeight: props.lineHeight}]}>
+      {props.children}{props.space && ' '}
+    </SText>
+  );
+};
+
+export default OText;

package/themes/original/src/components/shared/OTextarea.tsx

@@ -1,36 +1,36 @@
-import * as React from 'react'
-import styled, { useTheme } from 'styled-components/native'
-
-const Inner = styled.TextInput`
-    height: 150px;
-`
-
-interface Props {
-	lines?: number,
-	value?: string,
-	placeholder?: string
-}
-
-const OTextarea = (props: Props) => {
-
-	const theme = useTheme();
-	const Wrapper = styled.View`
-		padding: 10px;
-		border-radius: 10px;
-		border: 1px solid ${theme.colors.lightGray};
-	`
-	return (
-		<Wrapper>
-			<Inner
-				placeholder={props.placeholder}
-				placeholderTextColor={theme.colors.lightGray}
-				numberOfLines={props.lines}
-				underlineColorAndroid={'transparent'}
-				value={props.value}
-				multiline={true}
-			/>
-		</Wrapper>
-	)
-}
-
-export default OTextarea;
+import * as React from 'react'
+import styled, { useTheme } from 'styled-components/native'
+
+const Inner = styled.TextInput`
+    height: 150px;
+`
+
+interface Props {
+	lines?: number,
+	value?: string,
+	placeholder?: string
+}
+
+const OTextarea = (props: Props) => {
+
+	const theme = useTheme();
+	const Wrapper = styled.View`
+		padding: 10px;
+		border-radius: 10px;
+		border: 1px solid ${theme.colors.lightGray};
+	`
+	return (
+		<Wrapper>
+			<Inner
+				placeholder={props.placeholder}
+				placeholderTextColor={theme.colors.lightGray}
+				numberOfLines={props.lines}
+				underlineColorAndroid={'transparent'}
+				value={props.value}
+				multiline={true}
+			/>
+		</Wrapper>
+	)
+}
+
+export default OTextarea;