@adiraku/react-native-ui 1.2.0 → 1.2.2

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

@@ -11,19 +11,28 @@ import { FlatList } from 'react-native';
 import { GestureResponderEvent } from 'react-native';
 
 const RoundedTab: React.FunctionComponent<RoundedTabProps> = (props) => {
-  const { data = [], selectedValue = '', onTabItemPress = () => null } = props;
+  const {
+    data = [],
+    selectedValue = '',
+    onTabItemPress = () => null,
+    containerStyle,
+    contentContainerStyle,
+  } = props;
 
   const computedStyle = getStyle(props);
 
   return (
-    <View style={[computedStyle.container]}>
+    <View style={[computedStyle.container, containerStyle]}>
       <FlatList
         horizontal={true}
         data={data}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={[contentContainerStyle]}
         renderItem={({ item }) => {
           const { label, value, leading, trailing, ...rest } = item;
           return (
             <TabItem
+              key={label}
               label={label}
               value={value}
               isSelected={selectedValue === value}

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

@@ -1,9 +1,11 @@
 import { ReactNode } from 'react';
-import { TouchableWithoutFeedbackProps } from 'react-native';
+import { TouchableWithoutFeedbackProps, ViewStyle } from 'react-native';
 
 export interface RoundedTabProps {
   data: Omit<TabItemProps, 'isSelected'>[];
   selectedValue: string;
+  containerStyle: ViewStyle;
+  contentContainerStyle: ViewStyle;
   onTabItemPress: (value: any) => void;
 }
 

package/src/components/search-input/search-input.component.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { TextInput } from 'react-native';
+import { View } from 'react-native';
+
+import { Palettes } from '../../themes';
+import { IconRoundClose, IconSearch } from '../../icons';
+import { getStyles } from './search-input.style';
+import { SearchInputProps } from './search-input.type';
+import { NativeSyntheticEvent } from 'react-native';
+import { TextInputFocusEventData } from 'react-native';
+import { TouchableWithoutFeedback } from 'react-native';
+
+export const SearchInput = (props: SearchInputProps) => {
+  const {
+    value = '',
+    onFocus = () => null,
+    onBlur = () => null,
+    trailingIcon,
+    onTraillingIconPress,
+    ...rest
+  } = props;
+
+  const computedStyle = getStyles();
+
+  const [focused, setFocused] = React.useState(false);
+
+  const handleOnFocus = (
+    event: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => {
+    setFocused(true);
+    onFocus(event);
+  };
+  const handleOnBlur = (
+    event: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => {
+    onBlur(event);
+    setFocused(false);
+  };
+  return (
+    <View
+      style={[
+        computedStyle.container,
+        { borderColor: focused ? Palettes.black[900] : Palettes.grey[300] },
+      ]}
+    >
+      <IconSearch width={24} height={24} />
+
+      <TextInput
+        style={[computedStyle.textInput]}
+        placeholderTextColor={Palettes.grey[400]}
+        onBlur={handleOnBlur}
+        onFocus={handleOnFocus}
+        value={value}
+        {...rest}
+      />
+
+      {value.length > 0 && (
+        <TouchableWithoutFeedback onPress={onTraillingIconPress}>
+          <View style={[computedStyle.trailingIconContainer]}>
+            {trailingIcon || <IconRoundClose width={16} height={16} />}
+          </View>
+        </TouchableWithoutFeedback>
+      )}
+    </View>
+  );
+};

package/src/components/search-input/search-input.style.ts

@@ -0,0 +1,38 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+import { Palettes, Radius, Spacing } from '../../themes';
+import { TextStyle } from 'react-native';
+
+type StyleType = {
+  container?: ViewStyle;
+  textInput?: TextStyle;
+  trailingIconContainer?: ViewStyle;
+};
+
+export const getStyles = () => {
+  const style: StyleType = {};
+
+  style.container = {
+    width: '100%',
+    maxHeight: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: Radius.full,
+    overflow: 'hidden',
+    borderWidth: 1.5,
+    paddingHorizontal: Spacing[12],
+  };
+
+  style.textInput = {
+    marginLeft: Spacing[8],
+    fontFamily: 'Montserrat-Regular',
+    flex: 1,
+    textAlignVertical: 'center',
+    color: Palettes.black[900],
+  };
+
+  style.trailingIconContainer = {
+    padding: Spacing[4],
+  };
+
+  return StyleSheet.create(style);
+};

package/src/components/search-input/search-input.type.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { TextInputProps } from 'react-native';
+
+export interface SearchInputProps extends TextInputProps {
+  trailingIcon?: ReactNode;
+  onTraillingIconPress: () => void;
+}

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

@@ -3,6 +3,7 @@ import type { TextLinkProps } from './textlink.type';
 import { Typography } from '../typography/typography.component';
 import { TouchableOpacity } from 'react-native';
 import { getStyle } from './textlink.style';
+import { Palettes } from '../../themes';
 
 export const TextLink: React.FunctionComponent<TextLinkProps> = (props) => {
   const {
@@ -12,6 +13,7 @@ export const TextLink: React.FunctionComponent<TextLinkProps> = (props) => {
     leading,
     containerStyles,
     numberOfLines,
+    disabled,
     ...rest
   } = props;
 
@@ -23,6 +25,7 @@ export const TextLink: React.FunctionComponent<TextLinkProps> = (props) => {
   return (
     <TouchableOpacity
       style={[computedStyle.container, containerStyles]}
+      disabled={disabled}
       {...rest}
     >
       {hasLeading && leading}
@@ -33,6 +36,9 @@ export const TextLink: React.FunctionComponent<TextLinkProps> = (props) => {
           hasLeading && computedStyle.hasLeading,
           hasTrailing && computedStyle.hasTrailing,
           textStyles,
+          {
+            color: disabled ? Palettes.grey[500] : Palettes.blueDark[700],
+          },
         ]}
         numberOfLines={numberOfLines}
       >