ordering-ui-react-native 0.12.57 → 0.12.61

package/themes/franchises/src/components/shared/OButton.tsx

@@ -1,132 +0,0 @@
-import {
-	ActivityIndicator,
-	ImageSourcePropType,
-	ImageStyle,
-	TextStyle,
-	TouchableOpacity,
-	View,
-	ViewStyle,
-} from 'react-native';
-
-import * as React from 'react';
-import styled from 'styled-components/native';
-import { OIcon } from './';
-
-const StyledButton = styled.View<Props>`
-	background-color: ${(props: any) => props.theme.colors.primary};
-	border-radius: 26px;
-	border-width: 2px;
-	height: 52px;
-	border-color: ${(props: any) => props.theme.colors.primary};
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	box-shadow: 1px 1px 2px #00000020;
-	padding-left: 20px;
-	padding-right: 20px;
-	position: relative;
-`
-const StyledButtonDisabled = styled(StyledButton)`
-	background-color: ${(props: any) => props.theme.colors.disabled};
-	border-color: ${(props: any) => props.theme.colors.disabled};
-`
-
-const StyledText = styled.Text`
-	font-size: 16px;
-	color: ${(props: any) => props.theme.colors.btnFont};
-	margin-left: 10px;
-	margin-right: 10px;
-	font-family: 'Poppins-Regular';
-`
-
-const StyledTextDisabled = styled(StyledText)`
-	color: ${(props: any) => props.theme.colors.primary};
-`
-
-const StyledImage = styled.Image`
-	width: 20px;
-	height: 20px;
-	resize-mode: contain;
-`
-const EndImage = styled.Image`
-	width: 17px;
-	height: 15px;
-	resize-mode: contain;
-	right: 17.5px;
-	position: absolute;
-`;
-
-interface Props {
-	testID?: string;
-	isLoading?: boolean;
-	isDisabled?: boolean;
-	onClick?: () => void;
-	style?: ViewStyle;
-	parentStyle?: ViewStyle;
-	disabledStyle?: ViewStyle;
-	textStyle?: TextStyle;
-	imgLeftSrc?: ImageSourcePropType | string;
-	imgLeftStyle?: ImageStyle;
-	imgRightSrc?: any;
-	imgRightStyle?: ImageStyle;
-	indicatorColor?: string;
-	activeOpacity?: number;
-	text?: string;
-	isCircle?: boolean;
-	bgColor?: string;
-	borderColor?: string;
-	loadingStyle?: ViewStyle;
-}
-
-const OButton = (props: Props): React.ReactElement => {
-
-	if (props.isDisabled) {
-		return (
-			<View style={props.parentStyle}>
-				<StyledButtonDisabled style={props.style}>
-					<StyledTextDisabled style={props.textStyle}>
-						{props.text}
-					</StyledTextDisabled>
-				</StyledButtonDisabled>
-			</View>
-		);
-	}
-
-	if (props.isLoading) {
-		return (
-			<StyledButton style={props.style}>
-				<ActivityIndicator size="small" color={props.indicatorColor} style={props.loadingStyle} />
-			</StyledButton>
-		);
-	}
-
-	return (
-		<TouchableOpacity
-			testID={props.testID}
-			activeOpacity={props.activeOpacity}
-			onPress={props.onClick}
-			style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
-		>
-			<StyledButton style={props.bgColor ? { ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor } : props.style}>
-				{props.imgLeftSrc ? (
-					<OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} />
-				) : null}
-				{props.text ? (
-					<StyledText style={props.textStyle}>{props.text}</StyledText>
-				) : null}
-				{props.imgRightSrc ? (
-					<EndImage style={props.imgRightStyle} source={props.imgRightSrc} />
-				) : null}
-			</StyledButton>
-		</TouchableOpacity>
-	);
-}
-
-OButton.defaultProps = {
-	isLoading: false,
-	isDisabled: false,
-	indicatorColor: 'white',
-	activeOpacity: 0.5,
-};
-
-export default OButton;

package/themes/franchises/src/components/shared/ODropDown.tsx

@@ -1,169 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import styled, { css } from 'styled-components/native'
-import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
-import { ScrollView as CustomScrollView, TouchableOpacity as CustomTouchableOpacity } from 'react-native'
-import { useTheme } from 'styled-components/native';
-
-interface Props {
-	secondary?: boolean,
-	options?: any;
-	defaultValue?: any,
-	placeholder?: string,
-	onSelect?: any,
-	style?: any,
-	dropViewMaxHeight?: any,
-	isModal?: any,
-	bgcolor?: string,
-	textcolor?: string,
-}
-
-const Wrapper = styled.View`
-  position: relative;
-`
-
-const ODropDown = (props: Props) => {
-	const {
-		secondary,
-		options,
-		defaultValue,
-		placeholder,
-		onSelect,
-		dropViewMaxHeight,
-		isModal
-	} = props
-
-	const theme = useTheme();
-
-	const Selected = styled.TouchableOpacity`
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-between;
-		position: relative;
-		padding: 15px;
-		border-radius: 10px;
-		border-width: 1px;
-		border-color: ${(props: any) => props.bgcolor || (props.secondary ? theme.colors.lightGray : theme.colors.primary)};
-		background-color: ${(props: any) => props.bgcolor || (props.secondary ? theme.colors.white : theme.colors.primary)};
-	`
-	const SelectedLabel = styled.Text`
-		font-size: 16px;
-		color: ${(props: any) => props.textcolor || (props.secondary ? theme.colors.black : theme.colors.white)};
-	`
-	const DropIcon = styled.Image`
-		tint-color: ${(props: any) => props.textcolor || (props.secondary ? theme.colors.black : theme.colors.white)};
-		resize-mode: contain;
-		width: 7px;
-		height: 7px;
-		margin-left: 5px;
-	`
-	const DropView = styled.View`
-		position: absolute;
-		z-index: 9999;
-		top: 54px;
-		border-width: 1px;
-		border-color: ${theme.colors.lightGray};
-		background-color: ${theme.colors.white};
-		border-radius: 10px;
-		width: 100%;
-	`
-	const DropOption = styled.Text`
-		padding: 15px;
-		font-size: 16px;
-		border-bottom-width: 1px;
-		border-bottom-color: ${theme.colors.lightGray};
-		${(props: any) => props.selected && css`
-			color: ${theme.colors.primary};
-		`};
-	`
-
-	const [isOpen, setIsOpen] = useState(false)
-	const defaultOption = options?.find((option: any) => option.value === defaultValue)
-	const [selectedOption, setSelectedOption] = useState<any>(defaultOption)
-	const [value, setValue] = useState(defaultValue)
-
-	const onToggle = () => {
-		setIsOpen(!isOpen)
-	}
-
-	const onSelectOption = (option: any) => {
-		setSelectedOption(option)
-		setValue(option.value)
-		onSelect(option.value || option.name)
-		setIsOpen(false)
-	}
-
-	useEffect(() => {
-		const _defaultOption = options?.find((option: any) => option.value === defaultValue)
-		setSelectedOption(_defaultOption)
-		setValue(defaultValue)
-	}, [defaultValue, options])
-
-	return (
-		<Wrapper style={props.style}>
-			<Selected
-				secondary={secondary}
-				bgcolor={props.bgcolor}
-				onPress={() => onToggle()}
-			>
-				<SelectedLabel
-					secondary={secondary}
-					textcolor={props.textcolor}
-				>
-					{selectedOption?.content || selectedOption?.name || placeholder}
-				</SelectedLabel>
-				<DropIcon
-					textcolor={props.textcolor}
-					secondary={secondary}
-					source={theme.images.drop_down}
-				/>
-			</Selected>
-			{isOpen && options && (
-				<DropView
-					secondary={secondary}
-				>
-					{!isModal ? (
-						<ScrollView style={{
-							maxHeight: dropViewMaxHeight || null
-						}}
-						>
-							{options.map((option: any, index: number) => (
-								<TouchableOpacity
-									key={index}
-									onPress={() => onSelectOption(option)}
-								>
-									<DropOption
-										numberOfLines={1}
-										selected={value === option.value}
-									>
-										{option.content || option.name}
-									</DropOption>
-								</TouchableOpacity>
-							))}
-						</ScrollView>
-					) : (
-						<CustomScrollView style={{
-							maxHeight: dropViewMaxHeight || null
-						}}
-						>
-							{options.map((option: any, index: number) => (
-								<CustomTouchableOpacity
-									key={index}
-									onPress={() => onSelectOption(option)}
-								>
-									<DropOption
-										numberOfLines={1}
-										selected={value === option.value}
-									>
-										{option.content || option.name}
-									</DropOption>
-								</CustomTouchableOpacity>
-							))}
-						</CustomScrollView>
-					)}
-				</DropView>
-			)}
-		</Wrapper>
-	)
-}
-
-export default ODropDown

package/themes/franchises/src/components/shared/OIcon.tsx

@@ -1,53 +0,0 @@
-
-import * as React from 'react'
-import { ImageStyle } from 'react-native'
-import styled from 'styled-components/native'
-
-const Wrapper = styled.View``
-
-interface Props {
-	src?: any,
-	url?: string,
-	dummy?: any,
-	color?: string,
-	width?: number,
-	height?: number,
-	style?: ImageStyle,
-	isWrap?: boolean,
-	cover?: boolean,
-	children?: any,
-	borderRadius?: number,
-}
-const SImage = styled.Image`
-	tint-color: ${(props: any) => props.theme.colors.primary};
-`
-
-const OImage = (props: Props): React.ReactElement => {
-
-	return (
-		<Wrapper style={{ borderRadius: props.style?.borderRadius, overflow: 'hidden', marginHorizontal: props.style?.marginHorizontal }}>
-			<SImage
-				source={props.src ? props.src : props.url ? { uri: props.url } : props.dummy}
-				style={{
-					tintColor: props.color,
-					flex: props.isWrap ? 1 : 0,
-					width: props.width,
-					height: props.height,
-					marginHorizontal: 0,
-					borderRadius: props.borderRadius,
-					...props.style,
-				}}
-				resizeMode={props.cover ? 'cover' : 'contain'}
-			>
-				{props.children}
-			</SImage>
-		</Wrapper>
-	)
-}
-
-OImage.defaultProps = {
-	width: 26,
-	height: 26
-}
-
-export default OImage;

package/themes/franchises/src/components/shared/OIconButton.tsx

@@ -1,127 +0,0 @@
-import * as React from 'react'
-import { ImageStyle, TextStyle, ViewStyle } from 'react-native'
-import styled, { useTheme } from 'styled-components/native'
-
-const Wrapper = styled.TouchableOpacity`
-    height: 40px;
-    border-radius: 20px;
-    flex-direction: row;
-    border: 1px solid white;
-    padding-horizontal: 20px;
-    align-items: center;
-    justify-content: center;
-`
-const DisabledWrapper = styled.View`
-    height: 40px;
-    border-radius: 20px;
-    flex-direction: row;
-    border: 1px solid white;
-    padding-horizontal: 20px;
-    align-items: center;
-    justify-content: center;
-`
-const Icon = styled.Image`
-    width: 22px;
-    height: 22px;
-`
-const Title = styled.Text`
-    font-size: 16px;
-    margin-horizontal: 7px;
-`
-
-interface Props {
-	icon?: any,
-	title?: string,
-	onClick?: any,
-	height?: number,
-	isOutline?: boolean,
-	disabled?: boolean,
-	color?: string,
-	bgColor?: string,
-	borderColor?: string,
-	textColor?: string,
-	iconColor?: string
-	style?: ViewStyle,
-	iconStyle?: ImageStyle,
-	textStyle?: TextStyle,
-	disabledColor?: string,
-	iconCover?: boolean,
-	urlIcon?: any,
-	cover?: any,
-}
-
-const OIconButton = (props: Props) => {
-	const theme = useTheme();
-
-	return (
-		<>
-			{!props.disabled ? (
-				<Wrapper
-					onPress={props.onClick}
-					style={{
-						borderColor: props.borderColor || props.color,
-						backgroundColor: props.isOutline ? 'white' : props.bgColor || props.color,
-						height: props.height || 40,
-						borderRadius: props.height ? props.height * 0.5 : 20,
-						...props.style
-					}}
-				>
-					{props.icon ? (
-						<Icon
-							source={props.icon}
-							style={{
-								tintColor: props.iconColor,
-								...props.iconStyle
-							}}
-						/>
-					) : null}
-					{props.title ? (
-						<Title style={{
-							color: props.textColor || props.color,
-							...props.textStyle
-						}}
-						>
-							{props.title}
-						</Title>
-					) : null}
-				</Wrapper>
-			) : (
-				<DisabledWrapper
-					style={{
-						borderColor: theme.colors.backgroundDark,
-						backgroundColor: props.disabledColor ? props.disabledColor : theme.colors.backgroundDark,
-						height: props.height || 40,
-						borderRadius: props.height ? props.height * 0.5 : 20,
-						...props.style
-					}}
-				>
-					{props.icon ? (
-						<Icon
-							source={props.urlIcon ? { uri: props.icon } : props.icon}
-							resizeMode={props.cover ? 'cover' : 'contain'}
-							style={{
-								tintColor: props.iconColor,
-								...props.iconStyle
-							}}
-						/>
-					) : null}
-					{props.title ? (
-						<Title style={{
-							color: props.textColor || props.color,
-							...props.textStyle
-						}}
-						>
-							{props.title}
-						</Title>
-					) : null}
-				</DisabledWrapper>
-			)}
-		</>
-	)
-}
-
-OIconButton.defaultProps = {
-
-}
-
-export default OIconButton;

package/themes/franchises/src/components/shared/OIconText.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react'
-import { ImageStyle, TextStyle, ViewStyle } from 'react-native'
-import styled from 'styled-components/native'
-
-const Wrapper = styled.View`
-    flex-direction: row;
-`
-const Icon = styled.Image`
-    resize-mode: contain;
-    tint-color: black;
-    margin-right: 3px;
-`
-const Label = styled.Text`
-    flex-wrap: wrap;
-    color: black;
-    font-size: 14px;
-    font-family: 'Poppins-Regular';
-`
-
-interface Props {
-    icon?: any,
-    text?: string,
-    size?: number,
-    color?: string,
-    style?: ViewStyle,
-    imgStyle?: ImageStyle,
-    textStyle?: TextStyle
-}
-
-const OIconText = (props: Props) => {
-    return (
-        <Wrapper style={props.style}>
-            {props.icon ? (
-                <Icon 
-                    source={props.icon} 
-                    style={{ 
-                        width: props.size ? props.size : 18, 
-                        height: props.size ? props.size : 18, 
-                        tintColor: props.color,
-                        ...props.imgStyle}}></Icon>
-            ) : null}
-            <Label style={{
-                fontSize: props.size? props.size : 14,
-                color: props.color,
-                ...props.textStyle}}>{props.text}</Label>
-        </Wrapper>
-    )
-}
-
-OIconText.defaultProps = {
-
-}
-
-export default OIconText

package/themes/franchises/src/components/shared/OInput.tsx

@@ -1,113 +0,0 @@
-import * as React from 'react';
-import { ImageSourcePropType, ImageStyle, ViewStyle, TextInputProps, TextStyle } from 'react-native';
-import styled from 'styled-components/native';
-import OIcon from './OIcon';
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
-
-const Input = styled.TextInput`
-  flex-grow: 1;
-  flex: 1;
-  min-height: 30px;
-  font-size: 15px;
-  font-family: 'Poppins-Regular';
-	padding: 0;
-`;
-
-interface Props extends TextInputProps {
-	bgColor?: string;
-	borderColor?: string;
-	isRequired?: boolean;
-	requiredMsg?: string;
-	isDisabled?: boolean;
-	isSecured?: boolean;
-	style?: ViewStyle;
-	placeholder?: string;
-	icon?: ImageSourcePropType | string;
-	iconRight?: ImageSourcePropType;
-	iconColor?: string;
-	iconRightColor?: string;
-	iconStyle?: ImageStyle;
-	iconRightStyle?: ImageStyle;
-	iconCustomRight?: any;
-	value?: string;
-	onChange?: any;
-	name?: string;
-	type?: string;
-	multiline?: boolean;
-	vertorIcon?: string;
-	vectorIconColor?: string;
-	forwardRef?: any;
-	inputStyle?: TextStyle;
-}
-
-const Wrapper = styled.View`
-	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	border-radius: 25px;
-	border-width: 1px;
-	padding-horizontal: 16px;
-	height: 50px;
-	flex-direction: row;
-	align-items: center;
-	flex: 1;
-	justify-content: center;
-`;
-
-const OInput = (props: Props): React.ReactElement => {
-	return (
-		<Wrapper
-			style={{
-				backgroundColor: props.bgColor,
-				borderColor: props.borderColor,
-				...props.style,
-			}}>
-			{props.icon ? (
-				<OIcon
-					src={props.icon}
-					color={props.iconColor}
-					width={20}
-					style={{ marginRight: 10, ...props.iconStyle }}
-				/>
-			) : null}
-			{props.vertorIcon && (
-				<MaterialIcon name={props?.vertorIcon} size={20} color={props?.vectorIconColor} style={{ marginHorizontal: 10 }} />
-			)}
-			<Input
-				name={props.name}
-				secureTextEntry={props.isSecured}
-				onChangeText={(txt: any) => props.name ? props.onChange({ target: { name: props.name, value: txt } }) : props.onChange(txt)}
-				defaultValue={props.value}
-				placeholder={props.placeholder ? props.placeholder : ''}
-				keyboardType={props.type || 'default'}
-				multiline={props.multiline}
-				scrollEnabled={props.multiline}
-				editable={!props.isDisabled}
-				autoCapitalize={props.autoCapitalize}
-				autoCompleteType={props.autoCompleteType}
-				autoCorrect={props.autoCorrect}
-				returnKeyType={props.returnKeyType}
-				onSubmitEditing={props.onSubmitEditing}
-				blurOnSubmit={props.blurOnSubmit}
-				ref={props.forwardRef}
-				style={props?.inputStyle}
-			/>
-			{props.iconRight && (
-				<OIcon
-					src={props.iconRight}
-					color={props.iconRightColor}
-					width={16}
-					height={16}
-					style={{ ...props.iconRightStyle }}
-				/>
-			)}
-			{props.iconCustomRight}
-		</Wrapper>
-	);
-};
-
-OInput.defaultProps = {
-	iconColor: '#959595',
-	bgColor: 'white',
-	borderColor: 'white',
-};
-
-export default OInput;

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

@@ -1,35 +0,0 @@
-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