@adiraku/react-native-ui 0.2.3 → 1.0.0

package/src/components/BottomSheet/BottomSheet.style.tsx

@@ -1,5 +1,5 @@
 import type { ViewStyle, TextStyle } from 'react-native';
-import { Dimensions, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { Palettes, Radius, Spacing } from '../../../src/themes';
 
@@ -31,16 +31,16 @@ export const getStyle = () => {
     flex: 1,
     justifyContent: 'flex-end',
   };
-  computedStyle.overlayColor = {
-    backgroundColor: 'rgba(0,0,0,0.2)',
-  };
 
   computedStyle.container = {
-    maxHeight: (Dimensions.get('window').height / 8) * 7,
-    borderTopRightRadius: Radius[16],
-    borderTopLeftRadius: Radius[16],
-    backgroundColor: Palettes.whiteDark[50],
+    backgroundColor: Palettes.white[50],
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    borderTopEndRadius: Spacing[16],
+    borderTopStartRadius: Spacing[16],
   };
+
   computedStyle.sliderIndicator = {
     height: 5,
     width: 100,
@@ -62,6 +62,7 @@ export const getStyle = () => {
 
   computedStyle.sheetHeaderWrapper = {
     paddingHorizontal: Spacing[16],
+    paddingBottom: Spacing[8],
   };
   computedStyle.sheetDismissIconWrapper = {
     padding: 4,

package/src/components/BottomSheet/BottomSheet.type.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 
 import type { TextProps, TouchableHighlightProps } from 'react-native';
+import type { ModalProps } from 'react-native-modal';
 
-export interface BottomSheetProps {
+export interface BottomSheetProps extends Omit<ModalProps, 'isVisible'> {
   onDismiss?: () => void;
 
   sheetHeader?: ReactNode;
@@ -27,9 +28,10 @@ export interface BottomSheetProps {
 
   largeIconContainerHeight?: number;
 
-  animationType?: 'slide' | 'none' | 'fade';
-
-  children?: ReactNode;
+  /**
+   * Decimal number between 0 - 1
+   */
+  maxSheetHeight?: number;
 }
 
 export type BottomSheetRefHandle = {

package/src/components/CheckBoxInput/CheckBoxInput.type.ts

@@ -46,7 +46,7 @@ export interface CheckboxInputProps {
 
   saveInputLabel: string;
 
-  saveInputProps?: ButtonProps;
+  saveInputProps: ButtonProps;
 
   bottomSheetOpt: Omit<BottomSheetProps, 'visibility' | 'onDismiss'>;
 

package/src/components/RadioInput/RadioInput.type.ts

@@ -46,7 +46,7 @@ export interface RadioInputProps {
 
   saveInputLabel: string;
 
-  saveInputProps?: ButtonProps;
+  saveInputProps: ButtonProps;
 
   bottomSheetOpt: Omit<BottomSheetProps, 'visibility' | 'onDismiss'>;
 

package/src/components/TextInput/TextInput.component.tsx

@@ -1,23 +1,15 @@
 import * as React from 'react';
-import { Animated, View } from 'react-native';
-import MaskInput from 'react-native-mask-input';
-
-import { Palettes } from '../../themes';
-import { Typography } from '../typography/typography.component';
+import { View } from 'react-native';
 import { getStyle } from './TextInput.style';
-
 import type { TextInputProps } from './TextInput.type';
-import type {
-  LayoutChangeEvent,
-  NativeSyntheticEvent,
-  TextInputFocusEventData,
-} from 'react-native';
+import { TextInput as RNTextInput } from 'react-native';
+import { Typography } from '../typography/typography.component';
+import { Animated } from 'react-native';
+import { Palettes } from '../../themes';
+import type { LayoutChangeEvent } from 'react-native';
+import type { NativeSyntheticEvent } from 'react-native';
+import type { TextInputFocusEventData } from 'react-native';
 
-/**
- * This component extend react-native-mask-input package
- * read, please read react-native-mask-input documentation
- * for further information
- */
 const TextInput: React.FunctionComponent<TextInputProps> = (props) => {
   const {
     value,
@@ -101,7 +93,7 @@ const TextInput: React.FunctionComponent<TextInputProps> = (props) => {
           </Typography>
         </Animated.View>
         <View style={computedStyle.inputWrapper}>
-          <MaskInput
+          <RNTextInput
             value={value}
             style={[computedStyle.textField]}
             onFocus={handleOnFocus}

package/src/components/TextInput/TextInput.type.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import type { MaskInputProps } from 'react-native-mask-input';
+import type { TextInput } from 'react-native';
 
-export interface TextInputProps extends MaskInputProps {
+export interface TextInputProps extends React.ComponentProps<typeof TextInput> {
   /**
    * A string that specifies the label text for the input field.
    */

package/src/components/index.ts

@@ -11,7 +11,10 @@ export { StepperCounter } from './StepperCounter/StepperCounter.component';
 export { Divider } from './Divider/Divider.component';
 export { Tabs } from './Tabs/Tabs.component';
 export { RadioButton } from './RadioButton/RadioButton.component';
-export { BottomSheet } from './BottomSheet/BottomSheet.component';
+export {
+  BottomSheet,
+  BottomSheetHandler,
+} from './BottomSheet/BottomSheet.component';
 export { RadioInput } from './RadioInput/RadioInput.component';
 export { CheckBoxInput } from './CheckBoxInput/CheckBoxInput.component';
 export { Checkbox } from './Checkbox/Checkbox.component';

package/src/components/rounded-tab/rounded-tab.component.tsx

@@ -8,6 +8,7 @@ import { TouchableWithoutFeedback } from 'react-native';
 import { Typography } from '../typography/typography.component';
 import { Animated } from 'react-native';
 import { FlatList } from 'react-native';
+import { GestureResponderEvent } from 'react-native';
 
 const RoundedTab: React.FunctionComponent<RoundedTabProps> = (props) => {
   const { data = [], selectedValue = '', onTabItemPress = () => null } = props;
@@ -19,16 +20,20 @@ const RoundedTab: React.FunctionComponent<RoundedTabProps> = (props) => {
       <FlatList
         horizontal={true}
         data={data}
-        renderItem={({ item }) => (
-          <TabItem
-            label={item.label}
-            value={item.value}
-            isSelected={selectedValue === item.value}
-            leading={item.leading}
-            trailing={item.trailing}
-            onPress={onTabItemPress}
-          />
-        )}
+        renderItem={({ item }) => {
+          const { label, value, leading, trailing, ...rest } = item;
+          return (
+            <TabItem
+              label={label}
+              value={value}
+              isSelected={selectedValue === value}
+              leading={leading}
+              trailing={trailing}
+              onPress={onTabItemPress}
+              {...rest}
+            />
+          );
+        }}
         // eslint-disable-next-line react/no-unstable-nested-components
         ItemSeparatorComponent={() => (
           <View style={[computedStyle.itemSeparator]} />
@@ -46,6 +51,7 @@ function TabItem(props: TabItemProps): JSX.Element {
     onPress = () => null,
     leading = null,
     trailing = null,
+    ...rest
   } = props;
 
   const computedStyle = getTabItemStyle(props);
@@ -76,7 +82,7 @@ function TabItem(props: TabItemProps): JSX.Element {
 
   const onTabItemPress = () => {
     if (!isSelected) {
-      onPress(value);
+      onPress(value as GestureResponderEvent);
     }
   };
 
@@ -85,6 +91,7 @@ function TabItem(props: TabItemProps): JSX.Element {
       onPress={onTabItemPress}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
+      {...rest}
     >
       <Animated.View style={[computedStyle.container, animatedScaleStyle]}>
         {leading && (

package/src/components/rounded-tab/rounded-tab.type.ts

@@ -1,21 +1,16 @@
 import { ReactNode } from 'react';
+import { TouchableWithoutFeedbackProps } from 'react-native';
 
 export interface RoundedTabProps {
-  data: {
-    label: string;
-    value: string;
-    leading?: ReactNode;
-    trailing?: ReactNode;
-  }[];
+  data: Omit<TabItemProps, 'isSelected'>[];
   selectedValue: string;
-  onTabItemPress: (value: string) => void;
+  onTabItemPress: (value: any) => void;
 }
 
-export type TabItemProps = {
+export type TabItemProps = TouchableWithoutFeedbackProps & {
   label: string;
-  value: string;
-  isSelected: boolean;
-  onPress: (value: string) => void;
+  value: any;
   leading?: ReactNode;
   trailing?: ReactNode;
+  isSelected: boolean;
 };