@janiscommerce/ui-native 1.0.2 → 1.0.4

package/dist/components/CheckBox/index.d.ts

@@ -9,6 +9,7 @@ interface CheckBoxProps {
     borderRadius?: number;
     disabled?: boolean;
     style?: ViewStyle;
+    onPress?: () => {};
 }
 declare const CheckBox: ({ checked, customSize, checkOnColor, checkOffColor, iconCheckColor, borderRadius, disabled, style, ...props }: CheckBoxProps) => React.JSX.Element;
 export default CheckBox;

package/dist/components/Loading/LoadingSvg/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Animated, ViewProps } from 'react-native';
+interface IanimatedView extends Animated.AnimatedProps<ViewProps> {
+    size?: number;
+    color?: string;
+}
+declare const LoadingSvg: ({ size, color, ...props }: IanimatedView) => React.JSX.Element;
+export default LoadingSvg;

package/dist/components/Loading/LoadingSvg/index.js

@@ -0,0 +1,13 @@
+import Svg, { Path } from 'react-native-svg';
+import React from 'react';
+import { Animated } from 'react-native';
+import { white } from '../../../theme/palette';
+const LoadingSvg = ({ size, color, ...props }) => {
+    return (<Animated.View {...props}>
+			<Svg x="0px" y="0px" width={size} height={size} viewBox="0 0 163 163">
+				<Path d="M134.1,136.4c-30.3,29.1-78.5,28-107.5-2.3c-29.1-30.3-28-78.5,2.3-107.5s78.5-28,107.5,2.3" fill="none" stroke={white.dark} strokeWidth="10.5546" strokeLinecap="round" strokeLinejoin="round"/>
+				<Path id="path-color" d="M78.4,5.5c42-1.7,77.4,30.9,79.1,72.9c1.7,42-30.9,77.4-72.9,79.1c-42,1.7-77.4-30.9-79.1-72.9" fill="none" stroke={color} strokeWidth="10.5546" strokeLinecap="round" strokeLinejoin="round"/>
+			</Svg>
+		</Animated.View>);
+};
+export default LoadingSvg;

package/dist/components/Loading/index.d.ts

@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
-import { ColorValue, ViewStyle } from 'react-native';
+import { ViewStyle } from 'react-native';
 interface Props {
     isLoading: boolean;
-    color?: ColorValue;
+    color?: string;
     size?: number;
     duration?: number;
     children?: React.ReactNode | null;

package/dist/components/Loading/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { StyleSheet, View, Animated, Easing } from 'react-native';
-import { primary, white } from '../../theme/palette';
+import LoadingSvg from './LoadingSvg';
+import { primary } from '../../theme/palette';
 const startRotationAnimation = ({ duration, rotationDegree, timingAnimation }) => Animated.loop(Animated.timing(rotationDegree, {
     duration,
     toValue: 360,
@@ -21,12 +22,8 @@ const Loading = ({ isLoading, color = primary.main, size = 64, duration = 1000,
             position: 'absolute',
             width: size,
             height: size,
-            borderTopColor: white.dark,
-            borderLeftColor: color,
-            borderRightColor: color,
-            borderBottomColor: color,
-            borderRadius: size / 2,
-            borderWidth: 3.5,
+            justifyContent: 'center',
+            alignItems: 'center',
         },
     });
     const animationSpinnerStyle = {
@@ -52,7 +49,7 @@ const Loading = ({ isLoading, color = primary.main, size = 64, duration = 1000,
         return <></>;
     }
     return (<View style={[styles.container, style]} {...props}>
-			<Animated.View style={{ ...styles.spinner, ...animationSpinnerStyle }}/>
+			<LoadingSvg style={[styles.spinner, { ...animationSpinnerStyle }]} size={size} color={color}/>
 			{children}
 		</View>);
 };

package/dist/components/RadioButton/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+declare const checkLocation: readonly ["left", "right"];
+type positions = (typeof checkLocation)[number];
+declare const CheckSizeValues: {
+    sm: number;
+    md: number;
+    lg: number;
+};
+type sizeType = typeof CheckSizeValues;
+type sizeKeys = keyof sizeType;
+interface RadioButtonProps {
+    children: React.ReactNode | string;
+    selected?: boolean;
+    onPress?: () => {};
+    checkPosition?: positions;
+    disabled?: boolean;
+    checkSize?: sizeKeys;
+    style?: ViewStyle;
+}
+declare const RadioButton: ({ children, onPress, selected, checkPosition, checkSize, disabled, style, ...props }: RadioButtonProps) => React.JSX.Element | null;
+export default RadioButton;

package/dist/components/RadioButton/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import Text from '../Text';
+import CheckBox from '../CheckBox';
+const checkLocation = ['left', 'right'];
+const CheckSizeValues = {
+    sm: 16,
+    md: 24,
+    lg: 32,
+};
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        marginVertical: 10,
+        height: 'auto',
+    },
+    row: {
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+    },
+    reverseRow: {
+        flexDirection: 'row-reverse',
+        justifyContent: 'space-between',
+    },
+    checkToLeft: {
+        marginLeft: 15,
+    },
+    checkToRight: {
+        marginRight: 15,
+    },
+});
+const RadioButton = ({ children, onPress, selected = false, checkPosition = 'left', checkSize = 'sm', disabled = false, style, ...props }) => {
+    if (!children) {
+        return null;
+    }
+    const { container, row, reverseRow, checkToLeft, checkToRight } = styles;
+    const isStringChild = typeof children === 'string';
+    const checkLeft = checkPosition === 'left';
+    const customSize = CheckSizeValues[checkSize];
+    return (<TouchableOpacity style={[container, checkLeft ? row : reverseRow, style]} disabled={disabled} onPress={onPress} {...props}>
+			<CheckBox checked={selected} disabled={disabled} customSize={customSize} borderRadius={customSize / 2}/>
+			<View style={checkLeft ? checkToLeft : checkToRight}>
+				{isStringChild ? <Text>{children}</Text> : children}
+			</View>
+		</TouchableOpacity>);
+};
+export default RadioButton;

package/dist/index.d.ts

@@ -8,4 +8,5 @@ import StatusChip from './components/StatusChip';
 import Input from './components/Input';
 import LoadingFullScreen from './components/LoadingFullScreen';
 import { palette } from './theme/palette';
-export { Text, Avatar, CheckBox, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen };
+import RadioButton from './components/RadioButton';
+export { Text, Avatar, CheckBox, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, };

package/dist/index.js

@@ -8,4 +8,5 @@ import StatusChip from './components/StatusChip';
 import Input from './components/Input';
 import LoadingFullScreen from './components/LoadingFullScreen';
 import { palette } from './theme/palette';
-export { Text, Avatar, CheckBox, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen };
+import RadioButton from './components/RadioButton';
+export { Text, Avatar, CheckBox, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -106,7 +106,7 @@
 			"npm run test:commit"
 		],
 		"*.{ts,tsx}": [
-			"tsc --noEmit"
+			"bash -c tsc --noEmit"
 		]
 	},
 	"dependencies": {