@adiraku/react-native-ui 1.2.7 → 1.2.8-canary-0

package/src/components/TextArea/TextArea.component.tsx

@@ -1,33 +1,73 @@
 import * as React from 'react';
 import { View } from 'react-native';
-import { TextInput } from 'react-native';
-
 import { getStyle } from './TextArea.style';
-import { Palettes } from '../../themes';
-import { Typography } from '../typography/typography.component';
-
 import type { TextAreaProps } from './TextArea.type';
+import MaskInput from 'react-native-mask-input';
+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';
 
 const TextArea: React.FunctionComponent<TextAreaProps> = (props) => {
   const {
-    label = '',
-    value = '',
-    helperMessage = '',
-    counter = 0,
+    value,
+    label,
+    onBlur = () => null,
+    onFocus = () => null,
     errorMessage,
+    helperMessage,
     helperMessageProps,
     isError,
-    onBlur = () => null,
-    onFocus = () => null,
+    counter = 0,
+    numberOfLines = 3,
     ...rest
   } = props;
 
+  const [labelWidth, setLabelWidth] = React.useState(0);
   const [focused, setFocused] = React.useState(false);
 
   const computedStyle = getStyle(props, focused);
 
+  const animation = React.useRef(new Animated.Value(0));
+  const scale = animation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0.8],
+  });
+  const translateY = animation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -30],
+  });
+  const translateX = animation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, labelWidth * -0.1],
+  });
+
+  const animate = (toValue: 0 | 1) =>
+    Animated.spring(animation.current, {
+      useNativeDriver: true,
+      toValue,
+    }).start();
+
+  React.useEffect(() => {
+    if (focused || !!value) {
+      animate(1);
+    } else {
+      animate(0);
+    }
+  }, [value, focused]);
+
+  const getNumberOfLines = React.useMemo(() => {
+    const defaultNumberOfLines = 3;
+    if (numberOfLines < 2) {
+      console.warn('numberOfLines should not be lower than 2, Please use TextInput instead')
+      return defaultNumberOfLines
+    }
+    
+    return numberOfLines
+  }, [numberOfLines])
+
   const handleOnFocus = (
     event: NativeSyntheticEvent<TextInputFocusEventData>
   ) => {
@@ -37,35 +77,56 @@ const TextArea: React.FunctionComponent<TextAreaProps> = (props) => {
   const handleOnBlur = (
     event: NativeSyntheticEvent<TextInputFocusEventData>
   ) => {
-    if (value === '') {
-      onBlur(event);
-    }
+    onBlur(event);
     setFocused(false);
   };
 
+  const getLabelWidth = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setLabelWidth(width + 24);
+  };
+
   return (
-    <View style={computedStyle.fieldContainer}>
-      <Typography variant="body2" style={computedStyle.label}>
-        {label}
-      </Typography>
-      <View style={computedStyle.fieldWrapper}>
-        <TextInput
-          numberOfLines={3}
-          multiline={true}
-          textAlignVertical="top"
-          style={computedStyle.TextInput}
-          value={value}
-          placeholderTextColor={Palettes.grey[500]}
-          onBlur={handleOnBlur}
-          onFocus={handleOnFocus}
-          {...rest}
-        />
-        {counter > 0 && (
-          <Typography
-            variant="caption"
-            style={computedStyle.counter}
-          >{`${value.length}/${counter}`}</Typography>
+    <View style={computedStyle.fieldWrapper}>
+      <View style={computedStyle.fieldContainer}>
+        {!!label && (
+          <View style={computedStyle.labelAnimationContainer}>
+            <Animated.View
+              style={[
+                computedStyle.labelContainer,
+                {
+                  transform: [{ scale }, { translateY }, { translateX }],
+                },
+              ]}
+              onLayout={getLabelWidth}
+              pointerEvents="none"
+            >
+              <Typography variant="body2" style={computedStyle.label}>
+                {label}
+              </Typography>
+            </Animated.View>
+          </View>
         )}
+        <View style={computedStyle.inputWrapper}>
+          <MaskInput
+            value={value}
+            style={[
+              computedStyle.textField,
+              { height: 11 + numberOfLines * 17 },
+            ]}
+            onFocus={handleOnFocus}
+            onBlur={handleOnBlur}
+            placeholderTextColor={focused ? Palettes.black[500] : 'transparent'}
+            numberOfLines={getNumberOfLines}
+            multiline
+            {...rest}
+          />
+          {counter > 0 && (
+            <Typography style={computedStyle.counter} variant="caption">
+              {`${value?.length}/${counter}`}
+            </Typography>
+          )}
+        </View>
       </View>
       {errorMessage || helperMessage ? (
         <Typography

package/src/components/TextArea/TextArea.style.tsx

@@ -5,11 +5,13 @@ import type { TextAreaProps } from './TextArea.type';
 import { Palettes, Radius, Spacing } from '../../themes';
 
 interface ComputedStyleProps {
+  fieldWrapper?: ViewStyle;
   fieldContainer?: ViewStyle;
-  container?: ViewStyle;
+  labelContainer?: ViewStyle;
+  labelAnimationContainer?: ViewStyle;
   label?: TextStyle;
-  fieldWrapper?: ViewStyle;
-  TextInput?: TextStyle;
+  inputWrapper?: ViewStyle;
+  textField?: TextStyle;
   messageHelper?: TextStyle;
   counter?: TextStyle;
   inputIconWrapper?: ViewStyle;
@@ -18,8 +20,6 @@ interface ComputedStyleProps {
 export const getStyle = (props: TextAreaProps, isFocused: boolean) => {
   const { editable = true, isError, errorMessage } = props;
 
-  const computedStyle: ComputedStyleProps = {};
-
   const stateColor =
     isError || errorMessage
       ? { text: Palettes.red[500], border: Palettes.red[500] }
@@ -28,40 +28,75 @@ export const getStyle = (props: TextAreaProps, isFocused: boolean) => {
           border: isFocused ? Palettes.grey[900] : Palettes.grey[200],
         };
 
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.fieldWrapper = {
+    width: '100%',
+  };
+
   computedStyle.fieldContainer = {
+    alignItems: 'flex-start',
+    justifyContent: 'center',
     width: '100%',
   };
 
+  computedStyle.labelAnimationContainer = {
+    height: 48,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: 99,
+  };
+
+  computedStyle.labelContainer = {
+    zIndex: 99,
+    position: 'absolute',
+  };
+
   computedStyle.label = {
-    color: Palettes.black[900],
+    color: editable ? Palettes.black[900] : Palettes.grey[500],
+    backgroundColor: !editable ? Palettes.grey[50] : Palettes.white[50],
+    paddingHorizontal: Spacing[4],
+    borderRadius: Radius[4],
+    marginLeft: Spacing[8],
   };
 
-  computedStyle.fieldWrapper = {
+  computedStyle.inputWrapper = {
     borderWidth: Radius.border,
-    borderRadius: Radius[8],
     borderColor: stateColor.border,
-    padding: Spacing[12],
-    backgroundColor: editable ? Palettes.white[50] : Palettes.grey[50],
-    marginVertical: Spacing[8],
+    backgroundColor: !editable ? Palettes.grey[50] : Palettes.white[50],
+    borderRadius: Radius[8],
+    padding: Spacing[8],
+    width: '100%',
   };
 
-  computedStyle.TextInput = {
-    height: 72,
+  computedStyle.textField = {
+    flex: 1,
+    color: editable ? Palettes.black[900] : Palettes.grey[500],
     padding: 0,
     margin: 0,
     overflow: 'visible',
     fontSize: 14,
     lineHeight: Platform.OS === 'ios' ? 0 : 21,
     fontFamily: 'Montserrat-Regular',
-    color: Palettes.black[900],
+    textAlignVertical: 'top',
+  };
+
+  computedStyle.messageHelper = {
+    alignSelf: 'flex-start',
+    marginTop: Spacing[8],
+    color: stateColor.text,
   };
 
   computedStyle.counter = {
+    color: isFocused ? Palettes.black[900] : Palettes.grey[500],
     textAlign: 'right',
   };
 
-  computedStyle.messageHelper = {
-    color: stateColor.text,
+  computedStyle.inputIconWrapper = {
+    marginLeft: Spacing[4],
   };
 
   return StyleSheet.create(computedStyle);

package/src/components/TextArea/TextArea.type.ts

@@ -1,7 +1,7 @@
-import type { TextInput } from 'react-native';
+import { MaskInputProps } from 'react-native-mask-input';
 import { TypographyProps } from '../typography/typography.type';
 
-export interface TextAreaProps extends React.ComponentProps<typeof TextInput> {
+export interface TextAreaProps extends MaskInputProps {
   /**
    * A string that specifies the label text for the input field.
    */
@@ -28,7 +28,7 @@ export interface TextAreaProps extends React.ComponentProps<typeof TextInput> {
   errorMessage?: string;
 
   /**
-   * A number that spesified tha max character to be input.
+   * A number that spesified tha max character to be input, hidden if inputIcon props available.
    */
   counter?: number;
 }

package/src/components/TextInput/TextInput.style.tsx

@@ -45,8 +45,8 @@ export const getStyle = (props: TextInputProps, isFocused: boolean) => {
   };
 
   computedStyle.label = {
-    color: stateColor.text,
-    backgroundColor: !editable ? Palettes.grey[50] : Palettes.whiteDark[50],
+    color: editable ? Palettes.black[900] : Palettes.grey[500],
+    backgroundColor: !editable ? Palettes.grey[50] : Palettes.white[50],
     paddingHorizontal: Spacing[4],
     borderRadius: Radius[4],
     marginLeft: Spacing[8],
@@ -59,7 +59,7 @@ export const getStyle = (props: TextInputProps, isFocused: boolean) => {
     alignItems: 'center',
     borderWidth: Radius.border,
     borderColor: stateColor.border,
-    backgroundColor: !editable ? Palettes.grey[50] : Palettes.whiteDark[50],
+    backgroundColor: !editable ? Palettes.grey[50] : Palettes.white[50],
     borderRadius: Radius[8],
     padding: Spacing[8],
     width: '100%',
@@ -67,7 +67,7 @@ export const getStyle = (props: TextInputProps, isFocused: boolean) => {
 
   computedStyle.textField = {
     flex: 1,
-    color: Palettes.black[900],
+    color: editable ? Palettes.black[900] : Palettes.grey[500],
     padding: 0,
     margin: 0,
     overflow: 'visible',
@@ -78,13 +78,13 @@ export const getStyle = (props: TextInputProps, isFocused: boolean) => {
 
   computedStyle.messageHelper = {
     alignSelf: 'flex-start',
-    marginLeft: 12,
+    marginTop: Spacing[8],
     color: stateColor.text,
   };
 
   computedStyle.counter = {
     marginLeft: Spacing[4],
-    color: Palettes.grey[500],
+    color: isFocused ? Palettes.black[900] : Palettes.grey[500],
   };
 
   computedStyle.inputIconWrapper = {

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export { ActionList } from './ActionList/ActionList.component';
 export { Button } from './button/button.component';
 export { Label } from './label/label.component';
 export { BaseComponent } from './base/base.component';
@@ -37,7 +38,9 @@ export {
   formatWithMask,
   useMaskedInputProps,
 } from 'react-native-mask-input';
+export { SelectionCard } from './selection-card/SelectionCard.component';
 
+export type { ActionListProps } from './ActionList/ActionList.type';
 export type { ButtonProps } from './button/button.type';
 export type { TextInputProps } from './TextInput/TextInput.type';
 export type { SliderIndicatorProps } from './slider-indicator/slider-indicator.type';
@@ -49,3 +52,4 @@ export type { StepperCounterProps } from './StepperCounter/StepperCounter.type';
 export type { DividerProps } from './Divider/Divider.type';
 export type { TabsProps } from './Tabs/Tabs.type';
 export type { SearchInputProps } from './search-input/search-input.type';
+export type { SelectionCardProps } from './selection-card/SelectionCard.type';

package/src/components/selection-card/SelectionCard.component.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { TouchableHighlight, View } from 'react-native';
+import { Typography } from '../typography/typography.component';
+import { SelectionCardProps } from './SelectionCard.type';
+import { getStyle } from './SelectionCard.styles';
+import { Palettes } from '../../themes';
+
+export function SelectionCard(props: SelectionCardProps) {
+  const {
+    state = 'default',
+    title,
+    subtitle,
+    leadingComponent,
+    trailingComponent,
+    ...rest
+  } = props;
+
+  const computedStyle = getStyle({
+    ...props,
+    state,
+  });
+
+  return (
+    <TouchableHighlight
+      style={{ borderRadius: 12 }}
+      underlayColor={Palettes.black[50]}
+      {...rest}
+    >
+      <View style={[computedStyle.container]}>
+        {!!leadingComponent && (
+          <View style={computedStyle.leadingWrapper}>{leadingComponent}</View>
+        )}
+
+        <View style={computedStyle.contentWrapper}>
+          {typeof title === 'string' ? (
+            <Typography variant="subtitle2">{title}</Typography>
+          ) : (
+            title
+          )}
+
+          {typeof subtitle === 'string' ? (
+            <Typography variant="body2">{subtitle}</Typography>
+          ) : (
+            subtitle
+          )}
+        </View>
+
+        {!!trailingComponent && (
+          <View style={computedStyle.trailingWrapper}>{trailingComponent}</View>
+        )}
+      </View>
+    </TouchableHighlight>
+  );
+}

package/src/components/selection-card/SelectionCard.styles.ts

@@ -0,0 +1,53 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+import { SelectionCardProps } from './SelectionCard.type';
+import { Palettes, Radius, Shadow, Spacing } from '../../themes';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  leadingWrapper?: ViewStyle;
+  trailingWrapper?: ViewStyle;
+  contentWrapper?: ViewStyle;
+}
+
+export const getStyle = (props: SelectionCardProps) => {
+  const { state, disabled } = props;
+
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    borderRadius: Radius[12],
+    borderWidth: 3,
+    borderColor:
+      state === 'error'
+        ? Palettes.red[600]
+        : state === 'selected'
+        ? Palettes.yellow[600]
+        : 'transparent',
+    backgroundColor: disabled ? Palettes.grey[50] : Palettes.white[50],
+    ...Shadow['shadow-elevation-1'],
+  };
+
+  computedStyle.contentWrapper = {
+    flex: 1,
+    paddingVertical: Spacing[16],
+  };
+
+  computedStyle.leadingWrapper = {
+    marginRight: Spacing[16],
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  computedStyle.trailingWrapper = {
+    marginLeft: Spacing[16],
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/selection-card/SelectionCard.type.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+
+import { TouchableWithoutFeedbackProps } from 'react-native';
+
+export type SelectionCardProps = {
+  /**
+   * Title of the component
+   */
+  title: ReactNode;
+
+  /**
+   * Subtitle of the component
+   */
+  subtitle?: ReactNode;
+
+  /**
+   * The state of the component, indicated by border color around the component
+   *  - default: no border
+   *  - selected: yellow border
+   *  - error: red border
+   *
+   * @default 'default'
+   */
+  state?: 'default' | 'selected' | 'error';
+
+  /**
+   * A slot placed on the left side of the component. Could be used to pass a custom Icon or component
+   */
+  leadingComponent?: ReactNode;
+
+  /**
+   * A slot placed on the right side of the component. Could be used to pass a custom Icon or component
+   */
+  trailingComponent?: ReactNode;
+} & Omit<TouchableWithoutFeedbackProps, 'style'>;