@adiraku/react-native-ui 1.2.1 → 1.2.2

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}
       >