@adiraku/react-native-ui 0.1.17 → 0.2.0

package/src/components/CheckBoxInput/CheckBoxInput.component.tsx

@@ -209,7 +209,6 @@ const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
           }}
           // eslint-disable-next-line react-native/no-inline-styles
           contentContainerStyle={{ padding: 16 }}
-          // eslint-disable-next-line react/no-unstable-nested-components
           ItemSeparatorComponent={() => customItemSeparator}
         />
         {/* eslint-disable-next-line react-native/no-inline-styles */}

package/src/components/RadioInput/RadioInput.component.tsx

@@ -182,7 +182,6 @@ const RadioInput: React.FunctionComponent<RadioInputProps> = (props) => {
           }}
           // eslint-disable-next-line react-native/no-inline-styles
           contentContainerStyle={{ padding: 16 }}
-          // eslint-disable-next-line react/no-unstable-nested-components
           ItemSeparatorComponent={() => customItemSeparator}
         />
         {/* eslint-disable-next-line react-native/no-inline-styles */}

package/src/components/Snackbar/Snackbar.component.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react';
 import { View } from 'react-native';
+import RNToast, {
+  ToastProps,
+  ToastShowParams,
+  ToastHideParams,
+} from 'react-native-toast-message';
 
 import { Typography } from '../typography/typography.component';
 import { getStyle } from './Snakbar.style';
 
 import type { SnackbarProps } from './Snackbar.type';
 
-const Snackbar: React.FunctionComponent<SnackbarProps> = (props) => {
+const SnackbarUI: React.FunctionComponent<SnackbarProps> = (props) => {
   const { message = '', action = null, containerStyle } = props;
 
   const computedStyle = getStyle();
@@ -25,4 +30,50 @@ const Snackbar: React.FunctionComponent<SnackbarProps> = (props) => {
   );
 };
 
-export { Snackbar };
+function SnackbarComponent(props: ToastProps) {
+  const computedStyle = getStyle();
+
+  return (
+    <RNToast
+      {...props}
+      config={{
+        ...props.config,
+        // eslint-disable-next-line react/no-unstable-nested-components
+        aleph_toast: ({ props: toastProps }: { props: SnackbarProps }) => {
+          const { message, action } = toastProps;
+
+          return (
+            <View style={[computedStyle.snackbarWrapper]}>
+              <SnackbarUI message={message} action={action} />
+            </View>
+          );
+        },
+      }}
+      type="aleph_toast"
+      position="bottom"
+    />
+  );
+}
+
+const Snackbar = {
+  show: (
+    params: Omit<ToastShowParams, 'props' | 'text1' | 'text2' | 'type'> & {
+      message: string;
+      action?: React.ReactNode;
+    }
+  ) => {
+    const { message = '', action } = params;
+    RNToast.show({
+      ...params,
+      props: {
+        message,
+        action,
+      },
+    });
+  },
+  hide: (params: ToastHideParams) => {
+    RNToast.hide(params);
+  },
+};
+
+export { Snackbar, SnackbarComponent };

package/src/components/Snackbar/Snakbar.style.tsx

@@ -6,6 +6,7 @@ import type { ViewStyle, TextStyle } from 'react-native';
 
 interface ComputedStyleProps {
   container?: ViewStyle;
+  snackbarWrapper?: ViewStyle;
   message?: TextStyle;
   actionWrapper?: ViewStyle;
 }
@@ -23,6 +24,11 @@ export const getStyle = () => {
     ...Shadow['shadow-elevation-1'],
   };
 
+  computedStyle.snackbarWrapper = {
+    width: '100%',
+    paddingHorizontal: Spacing[16],
+  };
+
   computedStyle.message = {
     flex: 1,
   };

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

@@ -50,27 +50,23 @@ const TextInput: React.FunctionComponent<TextInputProps> = (props) => {
     }).start();
 
   React.useEffect(() => {
-    if (value) {
+    if (focused || !!value) {
       animate(1);
     } else {
       animate(0);
     }
-  }, [value]);
+  }, [value, focused]);
 
   const handleOnFocus = (
     event: NativeSyntheticEvent<TextInputFocusEventData>
   ) => {
-    animate(1);
     setFocused(true);
     onBlur(event);
   };
   const handleOnBlur = (
     event: NativeSyntheticEvent<TextInputFocusEventData>
   ) => {
-    if (value === '') {
-      animate(0);
-      onFocus(event);
-    }
+    onFocus(event);
     setFocused(false);
   };
 

package/src/components/button/button.component.tsx

@@ -12,20 +12,25 @@ const Button: React.FC<ButtonProps> = (props) => {
     onPress = () => {},
     variant = 'primary',
     label = 'Default',
-    size = 'large',
+    size = 'small',
     containerStyles,
     textStyles,
     ...rest
   } = props;
 
-  const computedStyle = getStyle(props);
+  const computedStyle = getStyle({
+    ...props,
+    variant,
+    label,
+    size,
+  });
 
   return (
     <TouchableHighlight
       onPress={onPress}
       style={[computedStyle.container, containerStyles]}
       underlayColor={
-        variant === 'primary' ? Palettes.black[800] : Palettes.blue[50]
+        variant !== 'primary' ? Palettes.blue[50] : Palettes.black[800]
       }
       {...rest}
     >

package/src/components/countdown/countdown.component.tsx

@@ -7,7 +7,15 @@ import type { CountdownProps } from './countdown.type';
 import { getStyle } from './countdown.style';
 
 const Countdown: React.FunctionComponent<CountdownProps> = (props) => {
-  const { targetDateTime } = props;
+  const {
+    targetDateTime,
+    formats = [
+      { type: 'd', trailingString: ' hari' },
+      { type: 'h' },
+      { type: 'm' },
+      { type: 's' },
+    ],
+  } = props;
 
   const computedStyle = getStyle();
 
@@ -21,59 +29,52 @@ const Countdown: React.FunctionComponent<CountdownProps> = (props) => {
     }, 1000);
 
     return () => clearInterval(timer);
-  }, []);
+  }, [targetDateTime]);
 
   const formatTime = (time: number) => {
     if (time <= 0) {
       return {
-        days: `0 hari`,
-        hours: appendZero(0),
-        minutes: appendZero(0),
-        seconds: appendZero(0),
+        d: appendZero(0),
+        h: appendZero(0),
+        m: appendZero(0),
+        s: appendZero(0),
       };
     }
 
-    const days = Math.floor(time / (1000 * 60 * 60 * 24));
-    const hours = appendZero(Math.floor((time / (1000 * 60 * 60)) % 24));
-    const minutes = appendZero(Math.floor((time / 1000 / 60) % 60));
-    const seconds = appendZero(Math.floor((time / 1000) % 60));
-
-    return { days: `${days} hari`, hours, minutes, seconds };
+    time /= 1000;
+    let day = Math.floor(time / (24 * 3600));
+    let remainingSeconds = time % (24 * 3600);
+    let hour = Math.floor(remainingSeconds / 3600);
+    remainingSeconds %= 3600;
+    let minute = Math.floor(remainingSeconds / 60);
+    let second = remainingSeconds % 60;
+
+    return {
+      d: Math.floor(day),
+      h: Math.floor(hour),
+      m: Math.floor(minute),
+      s: Math.floor(second),
+    };
   };
 
   return (
     <View style={[computedStyle.container]}>
-      <View style={[computedStyle.textContainer]}>
-        <Typography variant="overline" style={[computedStyle.textLabel]}>
-          {formatTime(timeLeft).days}
-        </Typography>
-      </View>
-
-      <View style={[computedStyle.dividerContainer]}>
-        <Typography variant="overline">:</Typography>
-      </View>
-
-      <View style={[computedStyle.textContainer]}>
-        <Typography variant="overline" style={[computedStyle.textLabel]}>
-          {formatTime(timeLeft).hours}
-        </Typography>
-      </View>
-      <View style={[computedStyle.dividerContainer]}>
-        <Typography variant="overline">:</Typography>
-      </View>
-      <View style={[computedStyle.textContainer]}>
-        <Typography variant="overline" style={[computedStyle.textLabel]}>
-          {formatTime(timeLeft).minutes}
-        </Typography>
-      </View>
-      <View style={[computedStyle.dividerContainer]}>
-        <Typography variant="overline">:</Typography>
-      </View>
-      <View style={[computedStyle.textContainer]}>
-        <Typography variant="overline" style={[computedStyle.textLabel]}>
-          {formatTime(timeLeft).seconds}
-        </Typography>
-      </View>
+      {formats.map(({ type, leadingString = '', trailingString = '' }, idx) => {
+        return (
+          <>
+            <View style={[computedStyle.textContainer]}>
+              <Typography variant="overline" style={[computedStyle.textLabel]}>
+                {leadingString + formatTime(timeLeft)?.[type] + trailingString}
+              </Typography>
+            </View>
+            {idx !== formats.length - 1 ? (
+              <View style={[computedStyle.dividerContainer]}>
+                <Typography variant="overline">:</Typography>
+              </View>
+            ) : null}
+          </>
+        );
+      })}
     </View>
   );
 };

package/src/components/countdown/countdown.style.tsx

@@ -16,6 +16,7 @@ export const getStyle = () => {
 
   computedStyle.container = {
     flexDirection: 'row',
+    alignSelf: 'flex-start',
   };
 
   computedStyle.textLabel = {

package/src/components/countdown/countdown.type.ts

@@ -3,4 +3,10 @@ export interface CountdownProps {
    * The target time in Date format, ex: 'YYYY-MM-DD hh:mm:ss'
    */
   targetDateTime: string | number | Date;
+
+  formats?: {
+    type: 'd' | 'h' | 'm' | 's';
+    trailingString?: string;
+    leadingString?: string;
+  }[];
 }

package/src/components/index.ts

@@ -16,7 +16,7 @@ export { RadioInput } from './RadioInput/RadioInput.component';
 export { CheckBoxInput } from './CheckBoxInput/CheckBoxInput.component';
 export { Checkbox } from './Checkbox/Checkbox.component';
 export { Appbar } from './Appbar/Appbar.component';
-export { Snackbar } from './Snackbar/Snackbar.component';
+export { Snackbar, SnackbarComponent } from './Snackbar/Snackbar.component';
 export { Switch } from './switch/switch.component';
 export { Dot } from './dot/dot.component';
 export { InformationBox } from './information-box/information-box.component';