Feature/ai-adviosr (#13)

example/ios/NutritionUxExample.xcodeproj/xcshareddata/xcschemes/NutritionUxExample.xcscheme

@@ -50,6 +50,8 @@
             ReferencedContainer = "container:NutritionUxExample.xcodeproj">
          </BuildableReference>
       </MacroExpansion>
+      <Testables>
+      </Testables>
    </TestAction>
    <LaunchAction
       buildConfiguration = "Debug"

example/ios/Podfile.lock

@@ -898,7 +898,7 @@ PODS:
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
-  - react-native-nutrition-ux (3.1.0-alpha-2):
+  - react-native-nutrition-ux (3.1.0-alpha-3):
     - React-Core
   - react-native-pdf (6.7.4):
     - React-Core
@@ -1372,7 +1372,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 9ee041e1d7be96da6d76a251f92e72b711c651d6
   react-native-blob-util: d8fa1a7f726867907a8e43163fdd8b441d4489ea
   react-native-image-picker: 994a97b28e7f2c2197e21801569bb19f6e494e38
-  react-native-nutrition-ux: 382c5a846698e00fed5d3dfacd184e2d0e2165a9
+  react-native-nutrition-ux: 1612195e1617a41eb1f6dc0a18590e178306fe33
   react-native-pdf: 79aa75e39a80c1d45ffe58aa500f3cf08f267a2e
   react-native-safe-area-context: 0ee144a6170530ccc37a0fd9388e28d06f516a89
   react-native-slider: 7d387c7e8dd0b4c12bf49c975c8666435f082a33

src/assets/index.ts

@@ -78,6 +78,7 @@ export const ICONS = {
   RecordingStop: require('./icons/stop_white.png'),
   Mic: require('./icons/mic_blue.png'),
   AIAdvisor: require('./icons/ai_advisor.png'),
+  FoodEditImage: require('./icons/food_edit_image.png'),
   Tick: require('./icons/tick.png'),
   CloseRed: require('./icons/close_red.png'),
   CaptureIcon: require('./icons/capture.png'),

src/components/filed/FiledSelectionView.tsx

@@ -0,0 +1,120 @@
+import React, { useImperativeHandle, useState } from 'react';
+import { Text } from '..';
+import { StyleSheet, View } from 'react-native';
+import { Branding, useBranding } from '../../contexts';
+import { ListPicker } from '../listPickers';
+
+interface Props {
+  name: string;
+  value?: string;
+  label?: string;
+  error?: string;
+  lists?: string[];
+  labelList?: string[];
+  onChange?: (value: string) => void;
+  isColum?: boolean;
+  isCenter?: boolean;
+}
+export interface FiledSelectionViewRef {
+  value: () => string | undefined;
+  errorCheck: () => boolean | undefined;
+}
+
+export const FiledSelectionView = React.forwardRef<
+  FiledSelectionViewRef,
+  Props
+>(
+  (
+    {
+      name,
+      lists,
+      labelList,
+      label,
+      onChange,
+      value: defaultValue,
+      isColum = false,
+      isCenter = false,
+    }: Props,
+    ref: React.Ref<FiledSelectionViewRef>
+  ) => {
+    const branding = useBranding();
+
+    const styles = requireNutritionFactStyle(branding);
+    const [value, setValue] = useState<string | undefined>(defaultValue);
+    const [error, setError] = useState<string>();
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        value: () => {
+          return value;
+        },
+        errorCheck: () => {
+          if (value === undefined || value?.length === 0) {
+            setError('please enter value');
+          } else {
+            setError(undefined);
+          }
+          return value?.length === 0;
+        },
+      }),
+      [value]
+    );
+
+    const renderFiled = () => {
+      return (
+        <View style={[styles.formRow, isColum && styles.formColum]}>
+          <Text
+            weight="400"
+            size="_12px"
+            color="gray500"
+            style={[styles.label, styles.labelMargin]}
+          >
+            {name}
+          </Text>
+          <ListPicker
+            value={value ?? ''}
+            title={name}
+            isCenter={isCenter}
+            onChange={(item) => {
+              onChange?.(item);
+              setError(undefined);
+              setValue(item);
+            }}
+            lists={lists ?? []}
+            label={label}
+            labelList={labelList}
+            style={styles.pickerTextInput}
+            error={error ?? ''}
+          />
+        </View>
+      );
+    };
+
+    return <View>{renderFiled()}</View>;
+  }
+);
+
+const requireNutritionFactStyle = ({}: Branding) =>
+  StyleSheet.create({
+    formRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginBottom: 10,
+    },
+    formColum: {
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      marginBottom: 10,
+    },
+    label: {
+      flex: 1,
+    },
+    labelMargin: {
+      marginTop: 10,
+    },
+    pickerTextInput: {
+      flexWrap: 'wrap',
+      textAlign: 'right',
+    },
+  });

src/components/filed/FiledView.tsx

@@ -0,0 +1,138 @@
+import React, { useImperativeHandle, useState } from 'react';
+import { Text, TextInput } from '..';
+import {
+  Image,
+  KeyboardTypeOptions,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { Branding, useBranding } from '../../contexts';
+import { scaleHeight } from '../../utils';
+import { ICONS } from '../../assets';
+
+interface Props {
+  name: string;
+  value?: string;
+  label?: string;
+  keyboardType?: KeyboardTypeOptions;
+  isColum?: boolean;
+  onDelete?: () => void;
+}
+
+export interface FiledViewRef {
+  value: () => string | undefined;
+  errorCheck: () => boolean | undefined;
+}
+
+export const FiledView = React.forwardRef<FiledViewRef, Props>(
+  (
+    {
+      name,
+      value: defaultValue,
+      keyboardType = 'decimal-pad',
+      label = 'value',
+      isColum = false,
+      onDelete,
+    }: Props,
+    ref: React.Ref<FiledViewRef>
+  ) => {
+    const branding = useBranding();
+    const [value, setValue] = useState<string | undefined>(defaultValue);
+    const [error, setError] = useState<string>();
+
+    const styles = requireNutritionFactStyle(branding);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        value: () => {
+          return value;
+        },
+        errorCheck: () => {
+          if (value === undefined || value?.length === 0) {
+            setError('please enter value');
+          } else {
+            setError(undefined);
+          }
+          return value?.length === 0;
+        },
+      }),
+      [value]
+    );
+
+    const renderFiled = () => {
+      return (
+        <View style={[!isColum && styles.formRow, isColum && styles.formColum]}>
+          <Text
+            weight="400"
+            size="_12px"
+            color="gray500"
+            style={[styles.label, styles.labelMargin]}
+          >
+            {name}
+          </Text>
+          <TextInput
+            style={styles.textInput}
+            onChangeText={(text) => {
+              setValue(text);
+              setError(undefined);
+            }}
+            value={defaultValue}
+            containerStyle={styles.containerTextInput}
+            placeholder={label}
+            error={error}
+            enterKeyHint="next"
+            keyboardType={keyboardType}
+          />
+          {onDelete && (
+            <TouchableOpacity onPress={onDelete}>
+              <Image source={ICONS.delete} style={styles.delete} />
+            </TouchableOpacity>
+          )}
+        </View>
+      );
+    };
+
+    return <View>{renderFiled()}</View>;
+  }
+);
+
+const requireNutritionFactStyle = ({ white, gray300 }: Branding) =>
+  StyleSheet.create({
+    formRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: 10,
+    },
+    formColum: {
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      marginBottom: 10,
+    },
+    label: {
+      flex: 1,
+    },
+    labelMargin: {
+      marginTop: 10,
+    },
+    delete: {
+      height: 24,
+      width: 24,
+      marginHorizontal: 6,
+    },
+    textInput: {
+      textAlign: 'left',
+      flex: 1,
+      fontWeight: '400',
+      fontSize: 14,
+      backgroundColor: white,
+      borderColor: gray300,
+      paddingVertical: scaleHeight(8),
+      borderRadius: scaleHeight(4),
+    },
+    containerTextInput: {
+      flex: 1,
+    },
+  });

src/components/filed/index.ts

@@ -0,0 +1,2 @@
+export * from './FiledSelectionView';
+export * from './FiledView';

src/components/index.ts

@@ -41,6 +41,8 @@ export * from './weeklyAddhernce';
 export * from './progressBard';
 export * from './timeStamp';
 export * from './mealPlan';
+export * from './tab';
+export * from './filed';
 
 import ActionSheet from './actionSheets/ActionSheet';
 export { ActionSheet };

src/components/listPickers/ListPicker.tsx

@@ -18,11 +18,12 @@ interface Props<T> {
   labelList?: string[];
   value: string;
   title: string;
-  error: string;
+  error?: string;
   style: StyleProp<ViewStyle>;
   label?: string;
   extraWidth?: number;
   onChange: (size: T) => void;
+  isCenter?: boolean;
 }
 
 export const ListPicker: React.FC<Props<any>> = ({
@@ -32,6 +33,8 @@ export const ListPicker: React.FC<Props<any>> = ({
   extraWidth,
   value,
   onChange,
+  isCenter,
+  error,
 }) => {
   const branding = useBranding();
   const styles = menuStyle(branding);
@@ -49,6 +52,8 @@ export const ListPicker: React.FC<Props<any>> = ({
         }}
       >
         <Text
+          weight="400"
+          size="_12px"
           style={[
             styles.optionTitle,
             {
@@ -68,6 +73,7 @@ export const ListPicker: React.FC<Props<any>> = ({
     return (
       <Picker
         ref={pickerRef}
+        isCenter={isCenter}
         extraWidth={extraWidth ?? 0}
         options={
           <FlatList
@@ -80,9 +86,16 @@ export const ListPicker: React.FC<Props<any>> = ({
         }
       >
         <View style={styles.main}>
-          <Text style={styles.mainTitle}>{label ?? value}</Text>
+          <Text weight="400" size="_12px" style={styles.mainTitle}>
+            {label ?? value}
+          </Text>
           <Image source={ICONS.down} style={styles.icon} />
         </View>
+        {error && (
+          <Text weight="400" size="_12px" style={[styles.error]}>
+            {error}
+          </Text>
+        )}
       </Picker>
     );
   };