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

package/src/components/slider-indicator/slider-indicator.component.tsx

@@ -1,81 +1,81 @@
-import React from 'react';
-import { FunctionComponent, useState, useEffect } from 'react';
-import { View } from 'react-native';
-import { getStyle } from './slider-indicator.style';
-import type {
-  SliderIndicatorProps,
-  SliderItemProps,
-} from './slider-indicator.type';
-import { Animated } from 'react-native';
-import { Easing } from 'react-native';
-import { TouchableOpacity } from 'react-native';
-
-const SliderIndicator: FunctionComponent<SliderIndicatorProps> = (props) => {
-  const {
-    sliderCount = 0,
-    activeItem = 0,
-    onIndicatorPress = () => null,
-  } = props;
-
-  const computedStyle = getStyle();
-
-  const getActiveIndex = () => {
-    if (activeItem < 0) {
-      return 0;
-    } else if (activeItem > sliderCount - 1) {
-      return sliderCount - 1;
-    }
-
-    return activeItem;
-  };
-
-  const renderSliderItem = () => {
-    const sliders = [...Array(sliderCount)];
-
-    return sliders.map((_, index) => (
-      <TouchableOpacity key={index} onPress={() => onIndicatorPress(index)}>
-        <SliderItem isActive={getActiveIndex() === index} />
-      </TouchableOpacity>
-    ));
-  };
-
-  return <View style={[computedStyle.container]}>{renderSliderItem()}</View>;
-};
-
-const SliderItem: FunctionComponent<SliderItemProps> = (props) => {
-  const { isActive = false } = props;
-
-  const computedStyle = getStyle();
-
-  const indicatorWidth = useState(new Animated.Value(4))[0];
-
-  useEffect(() => {
-    if (isActive) {
-      Animated.timing(indicatorWidth, {
-        toValue: 24,
-        easing: Easing.ease,
-        useNativeDriver: false,
-        duration: 300,
-      }).start();
-    } else {
-      Animated.timing(indicatorWidth, {
-        toValue: 4,
-        easing: Easing.ease,
-        useNativeDriver: false,
-        duration: 300,
-      }).start();
-    }
-  }, [isActive, indicatorWidth]);
-
-  return (
-    <Animated.View
-      style={[
-        computedStyle.sliderItem,
-        isActive && computedStyle.activeSlider,
-        { width: indicatorWidth },
-      ]}
-    />
-  );
-};
-
-export { SliderIndicator };
+import React from 'react';
+import { FunctionComponent, useState, useEffect } from 'react';
+import { View } from 'react-native';
+import { getStyle } from './slider-indicator.style';
+import type {
+  SliderIndicatorProps,
+  SliderItemProps,
+} from './slider-indicator.type';
+import { Animated } from 'react-native';
+import { Easing } from 'react-native';
+import { TouchableOpacity } from 'react-native';
+
+const SliderIndicator: FunctionComponent<SliderIndicatorProps> = (props) => {
+  const {
+    sliderCount = 0,
+    activeItem = 0,
+    onIndicatorPress = () => null,
+  } = props;
+
+  const computedStyle = getStyle();
+
+  const getActiveIndex = () => {
+    if (activeItem < 0) {
+      return 0;
+    } else if (activeItem > sliderCount - 1) {
+      return sliderCount - 1;
+    }
+
+    return activeItem;
+  };
+
+  const renderSliderItem = () => {
+    const sliders = [...Array(sliderCount)];
+
+    return sliders.map((_, index) => (
+      <TouchableOpacity key={index} onPress={() => onIndicatorPress(index)}>
+        <SliderItem isActive={getActiveIndex() === index} />
+      </TouchableOpacity>
+    ));
+  };
+
+  return <View style={[computedStyle.container]}>{renderSliderItem()}</View>;
+};
+
+const SliderItem: FunctionComponent<SliderItemProps> = (props) => {
+  const { isActive = false } = props;
+
+  const computedStyle = getStyle();
+
+  const indicatorWidth = useState(new Animated.Value(4))[0];
+
+  useEffect(() => {
+    if (isActive) {
+      Animated.timing(indicatorWidth, {
+        toValue: 24,
+        easing: Easing.ease,
+        useNativeDriver: false,
+        duration: 300,
+      }).start();
+    } else {
+      Animated.timing(indicatorWidth, {
+        toValue: 4,
+        easing: Easing.ease,
+        useNativeDriver: false,
+        duration: 300,
+      }).start();
+    }
+  }, [isActive, indicatorWidth]);
+
+  return (
+    <Animated.View
+      style={[
+        computedStyle.sliderItem,
+        isActive && computedStyle.activeSlider,
+        { width: indicatorWidth },
+      ]}
+    />
+  );
+};
+
+export { SliderIndicator };

package/src/components/slider-indicator/slider-indicator.style.tsx

@@ -1,31 +1,31 @@
-import type { ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-import { Palettes, Radius } from '../../themes';
-
-interface ComputedStyleProps {
-  container?: ViewStyle;
-  sliderItem?: ViewStyle;
-  activeSlider?: ViewStyle;
-}
-
-export const getStyle = () => {
-  const computedStyle: ComputedStyleProps = {};
-
-  computedStyle.container = {
-    flexDirection: 'row',
-  };
-
-  computedStyle.sliderItem = {
-    height: 4,
-    width: 4,
-    borderRadius: Radius.full,
-    backgroundColor: Palettes.grey[500],
-    marginHorizontal: 2,
-  };
-
-  computedStyle.activeSlider = {
-    backgroundColor: Palettes.black[900],
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Palettes, Radius } from '../../themes';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  sliderItem?: ViewStyle;
+  activeSlider?: ViewStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    flexDirection: 'row',
+  };
+
+  computedStyle.sliderItem = {
+    height: 4,
+    width: 4,
+    borderRadius: Radius.full,
+    backgroundColor: Palettes.grey[500],
+    marginHorizontal: 2,
+  };
+
+  computedStyle.activeSlider = {
+    backgroundColor: Palettes.black[900],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/slider-indicator/slider-indicator.type.ts

@@ -1,23 +1,23 @@
-export interface SliderIndicatorProps {
-  /**
-   * The total item of slider to be displayed
-   */
-  sliderCount?: number;
-
-  /**
-   * Current active slider item
-   */
-  activeItem?: number;
-
-  /**
-   * Receive index as parameter, could be used for changing the slider index programatically
-   */
-  onIndicatorPress?: (index: number) => void;
-}
-
-export interface SliderItemProps {
-  /**
-   * Indicate if current slider item active or not
-   */
-  isActive?: boolean;
-}
+export interface SliderIndicatorProps {
+  /**
+   * The total item of slider to be displayed
+   */
+  sliderCount?: number;
+
+  /**
+   * Current active slider item
+   */
+  activeItem?: number;
+
+  /**
+   * Receive index as parameter, could be used for changing the slider index programatically
+   */
+  onIndicatorPress?: (index: number) => void;
+}
+
+export interface SliderItemProps {
+  /**
+   * Indicate if current slider item active or not
+   */
+  isActive?: boolean;
+}

package/src/components/switch/switch.component.tsx

@@ -1,53 +1,53 @@
-import * as React from 'react';
-import { Animated, View, TouchableWithoutFeedback } from 'react-native';
-import { getStyle } from './switch.style';
-import type { SwitchProps } from './switch.type';
-
-const Switch: React.FunctionComponent<SwitchProps> = (props) => {
-  const { value = false, onPress = () => {}, disabled = false } = props;
-
-  const computedStyle = getStyle(props);
-
-  const animatedCircle = React.useRef(new Animated.Value(value ? 1 : 0));
-
-  const position = animatedCircle.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 20],
-  });
-
-  React.useEffect(() => {
-    if (value) {
-      animate(1);
-    } else {
-      animate(0);
-    }
-  }, [value]);
-
-  const animate = (toValue: 0 | 1) =>
-    Animated.spring(animatedCircle.current, {
-      useNativeDriver: true,
-      toValue,
-    }).start();
-
-  const handleOnSwitchPress = () => {
-    if (!disabled) {
-      onPress();
-    }
-  };
-
-  return (
-    <TouchableWithoutFeedback onPress={handleOnSwitchPress}>
-      <View style={[computedStyle.container]}>
-        <View style={[computedStyle.slider]} />
-        <Animated.View
-          style={[
-            computedStyle.circle,
-            { transform: [{ translateX: position }] },
-          ]}
-        />
-      </View>
-    </TouchableWithoutFeedback>
-  );
-};
-
-export { Switch };
+import * as React from 'react';
+import { Animated, View, TouchableWithoutFeedback } from 'react-native';
+import { getStyle } from './switch.style';
+import type { SwitchProps } from './switch.type';
+
+const Switch: React.FunctionComponent<SwitchProps> = (props) => {
+  const { value = false, onPress = () => {}, disabled = false } = props;
+
+  const computedStyle = getStyle(props);
+
+  const animatedCircle = React.useRef(new Animated.Value(value ? 1 : 0));
+
+  const position = animatedCircle.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 20],
+  });
+
+  React.useEffect(() => {
+    if (value) {
+      animate(1);
+    } else {
+      animate(0);
+    }
+  }, [value]);
+
+  const animate = (toValue: 0 | 1) =>
+    Animated.spring(animatedCircle.current, {
+      useNativeDriver: true,
+      toValue,
+    }).start();
+
+  const handleOnSwitchPress = () => {
+    if (!disabled) {
+      onPress();
+    }
+  };
+
+  return (
+    <TouchableWithoutFeedback onPress={handleOnSwitchPress}>
+      <View style={[computedStyle.container]}>
+        <View style={[computedStyle.slider]} />
+        <Animated.View
+          style={[
+            computedStyle.circle,
+            { transform: [{ translateX: position }] },
+          ]}
+        />
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export { Switch };

package/src/components/switch/switch.style.tsx

@@ -1,52 +1,52 @@
-import type { ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-import type { SwitchProps } from './switch.type';
-import { Palettes, Radius, Shadow } from '../../themes';
-
-interface ComputedStyleProps {
-  container?: ViewStyle;
-  circle?: ViewStyle;
-  slider?: ViewStyle;
-}
-
-export const getStyle = (props: SwitchProps) => {
-  const { value = false, disabled = false } = props;
-
-  const computedStyle: ComputedStyleProps = {};
-
-  let itemColor = {
-    slider: Palettes.grey[500],
-    circle: Palettes.white[50],
-  };
-  if (disabled) {
-    itemColor.slider = Palettes.grey[100];
-    itemColor.circle = Palettes.grey[100];
-  } else if (value) {
-    itemColor.slider = '#ffcd1876';
-    itemColor.circle = Palettes.yellow[600];
-  }
-
-  computedStyle.container = {
-    justifyContent: 'center',
-    width: 36,
-  };
-
-  computedStyle.slider = {
-    height: 10,
-    width: 24,
-    marginHorizontal: 6,
-    borderRadius: Radius.full,
-    backgroundColor: itemColor.slider,
-    position: 'absolute',
-  };
-
-  computedStyle.circle = {
-    height: 16,
-    width: 16,
-    backgroundColor: itemColor.circle,
-    borderRadius: Radius.full,
-    ...Shadow['shadow-elevation-1'],
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import type { SwitchProps } from './switch.type';
+import { Palettes, Radius, Shadow } from '../../themes';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  circle?: ViewStyle;
+  slider?: ViewStyle;
+}
+
+export const getStyle = (props: SwitchProps) => {
+  const { value = false, disabled = false } = props;
+
+  const computedStyle: ComputedStyleProps = {};
+
+  let itemColor = {
+    slider: Palettes.grey[500],
+    circle: Palettes.white[50],
+  };
+  if (disabled) {
+    itemColor.slider = Palettes.grey[100];
+    itemColor.circle = Palettes.grey[100];
+  } else if (value) {
+    itemColor.slider = '#ffcd1876';
+    itemColor.circle = Palettes.yellow[600];
+  }
+
+  computedStyle.container = {
+    justifyContent: 'center',
+    width: 36,
+  };
+
+  computedStyle.slider = {
+    height: 10,
+    width: 24,
+    marginHorizontal: 6,
+    borderRadius: Radius.full,
+    backgroundColor: itemColor.slider,
+    position: 'absolute',
+  };
+
+  computedStyle.circle = {
+    height: 16,
+    width: 16,
+    backgroundColor: itemColor.circle,
+    borderRadius: Radius.full,
+    ...Shadow['shadow-elevation-1'],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/switch/switch.type.ts

@@ -1,7 +1,7 @@
-export interface SwitchProps {
-  value: boolean;
-
-  disabled?: boolean;
-
-  onPress: () => void;
-}
+export interface SwitchProps {
+  value: boolean;
+
+  disabled?: boolean;
+
+  onPress: () => void;
+}

package/src/components/textlink/textlink.component.tsx

@@ -1,44 +1,44 @@
-import React from 'react';
-import type { TextLinkProps } from './textlink.type';
-import { Typography } from '../typography/typography.component';
-import { TouchableOpacity } from 'react-native';
-import { getStyle } from './textlink.style';
-
-export const TextLink: React.FunctionComponent<TextLinkProps> = (props) => {
-  const {
-    label = '',
-    textStyles,
-    trailing,
-    leading,
-    containerStyles,
-    numberOfLines,
-    ...rest
-  } = props;
-
-  const hasTrailing = !!trailing;
-  const hasLeading = !!leading;
-
-  const computedStyle = getStyle();
-
-  return (
-    <TouchableOpacity
-      style={[computedStyle.container, containerStyles]}
-      {...rest}
-    >
-      {hasLeading && leading}
-      <Typography
-        variant="button"
-        style={[
-          computedStyle.label,
-          hasLeading && computedStyle.hasLeading,
-          hasTrailing && computedStyle.hasTrailing,
-          textStyles,
-        ]}
-        numberOfLines={numberOfLines}
-      >
-        {label}
-      </Typography>
-      {hasTrailing && trailing}
-    </TouchableOpacity>
-  );
-};
+import React from 'react';
+import type { TextLinkProps } from './textlink.type';
+import { Typography } from '../typography/typography.component';
+import { TouchableOpacity } from 'react-native';
+import { getStyle } from './textlink.style';
+
+export const TextLink: React.FunctionComponent<TextLinkProps> = (props) => {
+  const {
+    label = '',
+    textStyles,
+    trailing,
+    leading,
+    containerStyles,
+    numberOfLines,
+    ...rest
+  } = props;
+
+  const hasTrailing = !!trailing;
+  const hasLeading = !!leading;
+
+  const computedStyle = getStyle();
+
+  return (
+    <TouchableOpacity
+      style={[computedStyle.container, containerStyles]}
+      {...rest}
+    >
+      {hasLeading && leading}
+      <Typography
+        variant="button"
+        style={[
+          computedStyle.label,
+          hasLeading && computedStyle.hasLeading,
+          hasTrailing && computedStyle.hasTrailing,
+          textStyles,
+        ]}
+        numberOfLines={numberOfLines}
+      >
+        {label}
+      </Typography>
+      {hasTrailing && trailing}
+    </TouchableOpacity>
+  );
+};

package/src/components/textlink/textlink.style.tsx

@@ -1,36 +1,36 @@
-import type { ViewStyle } from 'react-native';
-import type { TextStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-import { Palettes, Spacing } from '../../themes';
-
-interface ComputedStyleProps {
-  container?: ViewStyle;
-  hasLeading?: TextStyle;
-  hasTrailing?: TextStyle;
-  label?: TextStyle;
-}
-
-export const getStyle = () => {
-  const computedStyle: ComputedStyleProps = {};
-
-  computedStyle.container = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-  };
-
-  computedStyle.label = {
-    color: Palettes.blueDark[600],
-    textDecorationLine: 'none',
-  };
-
-  computedStyle.hasLeading = {
-    marginLeft: Spacing[8],
-  };
-
-  computedStyle.hasTrailing = {
-    marginRight: Spacing[8],
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+import type { ViewStyle } from 'react-native';
+import type { TextStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Palettes, Spacing } from '../../themes';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  hasLeading?: TextStyle;
+  hasTrailing?: TextStyle;
+  label?: TextStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  };
+
+  computedStyle.label = {
+    color: Palettes.blueDark[600],
+    textDecorationLine: 'none',
+  };
+
+  computedStyle.hasLeading = {
+    marginLeft: Spacing[8],
+  };
+
+  computedStyle.hasTrailing = {
+    marginRight: Spacing[8],
+  };
+
+  return StyleSheet.create(computedStyle);
+};