@adiraku/react-native-ui 1.2.3-snapshot.2 → 1.2.3-snapshot.4

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

@@ -1,99 +1,99 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import { Typography } from '../typography/typography.component';
-
-import type { CountdownProps } from './countdown.type';
-
-import { getStyle } from './countdown.style';
-
-const Countdown: React.FunctionComponent<CountdownProps> = (props) => {
-  const {
-    targetDateTime,
-    formats = [
-      { type: 'd', trailingString: ' hari' },
-      { type: 'h' },
-      { type: 'm' },
-      { type: 's' },
-    ],
-  } = props;
-
-  const computedStyle = getStyle();
-
-  const [timeLeft, setTimeLeft] = React.useState(
-    calculateTimeRemaining(targetDateTime)
-  );
-
-  React.useEffect(() => {
-    const timer = setInterval(() => {
-      setTimeLeft(calculateTimeRemaining(targetDateTime));
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, [targetDateTime]);
-
-  const formatTime = (time: number) => {
-    if (time <= 0) {
-      return {
-        d: appendZero(0),
-        h: appendZero(0),
-        m: appendZero(0),
-        s: appendZero(0),
-      };
-    }
-
-    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]}>
-      {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>
-  );
-};
-
-const calculateTimeRemaining = (
-  targetDateTime: CountdownProps['targetDateTime']
-): number => {
-  const currentTime = new Date().getTime();
-  const targetTime = new Date(targetDateTime).getTime();
-  const difference = targetTime - currentTime;
-  return Math.max(0, difference);
-};
-
-const appendZero = (num: string | number) => {
-  if (Number(num) < 10) {
-    return `0${0}`;
-  }
-
-  return num;
-};
-
-export { Countdown };
+import * as React from 'react';
+import { View } from 'react-native';
+import { Typography } from '../typography/typography.component';
+
+import type { CountdownProps } from './countdown.type';
+
+import { getStyle } from './countdown.style';
+
+const Countdown: React.FunctionComponent<CountdownProps> = (props) => {
+  const {
+    targetDateTime,
+    formats = [
+      { type: 'd', trailingString: ' hari' },
+      { type: 'h' },
+      { type: 'm' },
+      { type: 's' },
+    ],
+  } = props;
+
+  const computedStyle = getStyle();
+
+  const [timeLeft, setTimeLeft] = React.useState(
+    calculateTimeRemaining(targetDateTime)
+  );
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeRemaining(targetDateTime));
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetDateTime]);
+
+  const formatTime = (time: number) => {
+    if (time <= 0) {
+      return {
+        d: appendZero(0),
+        h: appendZero(0),
+        m: appendZero(0),
+        s: appendZero(0),
+      };
+    }
+
+    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]}>
+      {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>
+  );
+};
+
+const calculateTimeRemaining = (
+  targetDateTime: CountdownProps['targetDateTime']
+): number => {
+  const currentTime = new Date().getTime();
+  const targetTime = new Date(targetDateTime).getTime();
+  const difference = targetTime - currentTime;
+  return Math.max(0, difference);
+};
+
+const appendZero = (num: string | number) => {
+  if (Number(num) < 10) {
+    return `0${0}`;
+  }
+
+  return num;
+};
+
+export { Countdown };

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

@@ -1,43 +1,43 @@
-import { StyleSheet } from 'react-native';
-
-import { Palettes, Radius, Spacing } from '../../themes';
-
-import type { TextStyle, ViewStyle } from 'react-native';
-
-interface ComputedStyleProps {
-  container?: ViewStyle;
-  textLabel?: TextStyle;
-  textContainer?: ViewStyle;
-  dividerContainer?: ViewStyle;
-}
-
-export const getStyle = () => {
-  const computedStyle: ComputedStyleProps = {};
-
-  computedStyle.container = {
-    flexDirection: 'row',
-    alignSelf: 'flex-start',
-  };
-
-  computedStyle.textLabel = {
-    color: Palettes.white[50],
-  };
-
-  computedStyle.textContainer = {
-    backgroundColor: Palettes.black[900],
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: Radius[4],
-    paddingHorizontal: Spacing[4],
-    minWidth: 22,
-    height: 18,
-  };
-
-  computedStyle.dividerContainer = {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 8,
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+import { StyleSheet } from 'react-native';
+
+import { Palettes, Radius, Spacing } from '../../themes';
+
+import type { TextStyle, ViewStyle } from 'react-native';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  textLabel?: TextStyle;
+  textContainer?: ViewStyle;
+  dividerContainer?: ViewStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    flexDirection: 'row',
+    alignSelf: 'flex-start',
+  };
+
+  computedStyle.textLabel = {
+    color: Palettes.white[50],
+  };
+
+  computedStyle.textContainer = {
+    backgroundColor: Palettes.black[900],
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: Radius[4],
+    paddingHorizontal: Spacing[4],
+    minWidth: 22,
+    height: 18,
+  };
+
+  computedStyle.dividerContainer = {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 8,
+  };
+
+  return StyleSheet.create(computedStyle);
+};

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

@@ -1,12 +1,12 @@
-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;
-  }[];
-}
+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/dot/dot.component.tsx

@@ -1,23 +1,23 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import { getStyle } from './dot.style';
-import type { DotProps } from './dot.type';
-import { Typography } from '../typography/typography.component';
-
-const Dot: React.FunctionComponent<DotProps> = (props) => {
-  const { label = '', containerStyle = {} } = props;
-
-  const computedStyle = getStyle(props);
-
-  return (
-    <View style={[computedStyle.container, containerStyle]}>
-      {label ? (
-        <Typography variant="caption2" style={[computedStyle.label]}>
-          {label}
-        </Typography>
-      ) : null}
-    </View>
-  );
-};
-
-export { Dot };
+import * as React from 'react';
+import { View } from 'react-native';
+import { getStyle } from './dot.style';
+import type { DotProps } from './dot.type';
+import { Typography } from '../typography/typography.component';
+
+const Dot: React.FunctionComponent<DotProps> = (props) => {
+  const { label = '', containerStyle = {} } = props;
+
+  const computedStyle = getStyle(props);
+
+  return (
+    <View style={[computedStyle.container, containerStyle]}>
+      {label ? (
+        <Typography variant="caption2" style={[computedStyle.label]}>
+          {label}
+        </Typography>
+      ) : null}
+    </View>
+  );
+};
+
+export { Dot };

package/src/components/dot/dot.style.tsx

@@ -1,33 +1,33 @@
-import { StyleSheet } from 'react-native';
-
-import { Palettes, Radius } from '../../themes';
-
-import type { DotProps } from './dot.type';
-import type { TextStyle, ViewStyle } from 'react-native';
-
-interface ComputedStyleProps {
-  container?: ViewStyle;
-  label?: TextStyle;
-}
-
-export const getStyle = (props: DotProps) => {
-  const { label = '' } = props;
-
-  const computedStyle: ComputedStyleProps = {};
-
-  computedStyle.container = {
-    minWidth: label ? 18 : 8,
-    height: label ? 18 : 8,
-    paddingHorizontal: 4,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: Radius.full,
-    backgroundColor: Palettes.red[500],
-  };
-
-  computedStyle.label = {
-    color: Palettes.white[50],
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+import { StyleSheet } from 'react-native';
+
+import { Palettes, Radius } from '../../themes';
+
+import type { DotProps } from './dot.type';
+import type { TextStyle, ViewStyle } from 'react-native';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  label?: TextStyle;
+}
+
+export const getStyle = (props: DotProps) => {
+  const { label = '' } = props;
+
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    minWidth: label ? 18 : 8,
+    height: label ? 18 : 8,
+    paddingHorizontal: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: Radius.full,
+    backgroundColor: Palettes.red[500],
+  };
+
+  computedStyle.label = {
+    color: Palettes.white[50],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/dot/dot.type.ts

@@ -1,6 +1,6 @@
-import type { ViewStyle } from 'react-native';
-
-export interface DotProps {
-  label?: string;
-  containerStyle?: ViewStyle;
-}
+import type { ViewStyle } from 'react-native';
+
+export interface DotProps {
+  label?: string;
+  containerStyle?: ViewStyle;
+}

package/src/components/index.ts

@@ -1,49 +1,49 @@
-export { Button } from './button/button.component';
-export { Label } from './label/label.component';
-export { BaseComponent } from './base/base.component';
-export { Typography } from './typography/typography.component';
-export { Coachmark } from './coachmark/coachmark.component';
-export { TextLink } from './textlink/textlink.component';
-export { SliderIndicator } from './slider-indicator/slider-indicator.component';
-export { TextInput } from './TextInput/TextInput.component';
-export { TextArea } from './TextArea/TextArea.component';
-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,
-  BottomSheetHandler,
-} from './BottomSheet/BottomSheet.component';
-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, 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';
-export { RoundedTab } from './rounded-tab/rounded-tab.component';
-export { Countdown } from './countdown/countdown.component';
-export {
-  Mask,
-  MaskArray,
-  MaskInputProps,
-  MaskItem,
-  Masks,
-  UseMaskedInputProps,
-  createNumberMask,
-  formatWithMask,
-  useMaskedInputProps,
-} from 'react-native-mask-input';
-
-export type { ButtonProps } from './button/button.type';
-export type { TextInputProps } from './TextInput/TextInput.type';
-export type { SliderIndicatorProps } from './slider-indicator/slider-indicator.type';
-export type { TextLinkProps } from './textlink/textlink.type';
-export type { TypographyProps } from './typography/typography.type';
-export type { CoachmarkProps } from './coachmark/coachmark.type';
-export type { TextAreaProps } from './TextArea/TextArea.type';
-export type { StepperCounterProps } from './StepperCounter/StepperCounter.type';
-export type { DividerProps } from './Divider/Divider.type';
-export type { TabsProps } from './Tabs/Tabs.type';
+export { Button } from './button/button.component';
+export { Label } from './label/label.component';
+export { BaseComponent } from './base/base.component';
+export { Typography } from './typography/typography.component';
+export { Coachmark } from './coachmark/coachmark.component';
+export { TextLink } from './textlink/textlink.component';
+export { SliderIndicator } from './slider-indicator/slider-indicator.component';
+export { TextInput } from './TextInput/TextInput.component';
+export { TextArea } from './TextArea/TextArea.component';
+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,
+  BottomSheetHandler,
+} from './BottomSheet/BottomSheet.component';
+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, 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';
+export { RoundedTab } from './rounded-tab/rounded-tab.component';
+export { Countdown } from './countdown/countdown.component';
+export {
+  Mask,
+  MaskArray,
+  MaskInputProps,
+  MaskItem,
+  Masks,
+  UseMaskedInputProps,
+  createNumberMask,
+  formatWithMask,
+  useMaskedInputProps,
+} from 'react-native-mask-input';
+
+export type { ButtonProps } from './button/button.type';
+export type { TextInputProps } from './TextInput/TextInput.type';
+export type { SliderIndicatorProps } from './slider-indicator/slider-indicator.type';
+export type { TextLinkProps } from './textlink/textlink.type';
+export type { TypographyProps } from './typography/typography.type';
+export type { CoachmarkProps } from './coachmark/coachmark.type';
+export type { TextAreaProps } from './TextArea/TextArea.type';
+export type { StepperCounterProps } from './StepperCounter/StepperCounter.type';
+export type { DividerProps } from './Divider/Divider.type';
+export type { TabsProps } from './Tabs/Tabs.type';

package/src/components/information-box/information-box.component.tsx

@@ -1,55 +1,55 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { getStyle } from './information-box.style';
-import { Typography } from '../typography/typography.component';
-import { IconInfo } from '../../icons';
-
-import type { InformationBoxProps } from './information-box.type';
-
-const InformationBox: React.FunctionComponent<
-  React.PropsWithChildren<InformationBoxProps>
-> = (props) => {
-  const {
-    text = '',
-    showIcon = true,
-    informationIcon = null,
-    actionComponent = null,
-  } = props;
-
-  const computedStyle = getStyle(props);
-
-  const renderInformationText = () => {
-    if (typeof text === 'string') {
-      return (
-        <Typography
-          variant="caption"
-          numberOfLines={3}
-          style={[computedStyle.text]}
-        >
-          {text}
-        </Typography>
-      );
-    }
-
-    return text;
-  };
-
-  return (
-    <View style={computedStyle.container}>
-      <View style={[computedStyle.informationContainer]}>
-        {showIcon && (
-          <View style={[computedStyle.iconWrapper]}>
-            {informationIcon || <IconInfo width={16} height={16} />}
-          </View>
-        )}
-        {renderInformationText()}
-      </View>
-      {actionComponent && (
-        <View style={[computedStyle.actionWrapper]}>{actionComponent}</View>
-      )}
-    </View>
-  );
-};
-
-export { InformationBox };
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { getStyle } from './information-box.style';
+import { Typography } from '../typography/typography.component';
+import { IconInfo } from '../../icons';
+
+import type { InformationBoxProps } from './information-box.type';
+
+const InformationBox: React.FunctionComponent<
+  React.PropsWithChildren<InformationBoxProps>
+> = (props) => {
+  const {
+    text = '',
+    showIcon = true,
+    informationIcon = null,
+    actionComponent = null,
+  } = props;
+
+  const computedStyle = getStyle(props);
+
+  const renderInformationText = () => {
+    if (typeof text === 'string') {
+      return (
+        <Typography
+          variant="caption"
+          numberOfLines={3}
+          style={[computedStyle.text]}
+        >
+          {text}
+        </Typography>
+      );
+    }
+
+    return text;
+  };
+
+  return (
+    <View style={computedStyle.container}>
+      <View style={[computedStyle.informationContainer]}>
+        {showIcon && (
+          <View style={[computedStyle.iconWrapper]}>
+            {informationIcon || <IconInfo width={16} height={16} />}
+          </View>
+        )}
+        {renderInformationText()}
+      </View>
+      {actionComponent && (
+        <View style={[computedStyle.actionWrapper]}>{actionComponent}</View>
+      )}
+    </View>
+  );
+};
+
+export { InformationBox };