fix: small fixes

TERITORI · Jul 26, 2023 · dd3f01a · dd3f01a
1 parent 14fba80
commit dd3f01a
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 46 deletions.
diff --git a/assets/icons/lock.svg b/assets/icons/lock.svg
diff --git a/packages/components/inputs/SelectInput.tsx b/packages/components/inputs/SelectInput.tsx
@@ -10,6 +10,7 @@ import {
 import { Label } from "./TextInputCustom";
 import chevronDownSVG from "../../../assets/icons/chevron-down.svg";
 import chevronUpSVG from "../../../assets/icons/chevron-up.svg";
+import lockSVG from "../../../assets/icons/lock.svg";
 import {
   neutral00,
   neutral33,
@@ -39,6 +40,7 @@ type Props = {
   setData: (data: SelectInputData) => void;
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
+  boxStyle?: StyleProp<ViewStyle>;
   label?: string;
   isRequired?: boolean;
 };
@@ -50,6 +52,7 @@ export const SelectInput: React.FC<Props> = ({
   setData,
   disabled,
   style,
+ boxStyle,
   label,
   isRequired,
 }) => {
@@ -70,8 +73,9 @@ export const SelectInput: React.FC<Props> = ({
       onHoverIn={() => setHovered(true)}
       onHoverOut={() => setHovered(false)}
       onPress={() => {
-        if (!disabled) setOpenMenu((value) => !value);
+        if (!disabled || data.length) setOpenMenu((value) => !value);
       }}
+      disabled={disabled || !data.length}
     >
       {label && (
         <>
@@ -90,6 +94,7 @@ export const SelectInput: React.FC<Props> = ({
           style={[
             styles.selectInput,
             hovered && { borderColor: secondaryColor },
+            boxStyle,
           ]}
         >
           <View style={styles.iconLabel}>
@@ -110,22 +115,33 @@ export const SelectInput: React.FC<Props> = ({
             </BrandText>
           </View>
 
-          {!disabled &&
-            <SVG
-              source={openMenu ? chevronUpSVG : chevronDownSVG}
-              width={16}
-              height={16}
-              color={secondaryColor}
-            />
-          }
+          <SVG
+            source={
+              !data.length || disabled
+                ? lockSVG
+                : openMenu
+                ? chevronUpSVG
+                : chevronDownSVG
+            }
+            width={16}
+            height={16}
+            color={secondaryColor}
+          />
         </View>
 
+        {/*TODO: If the opened menu appears under other elements, you'll may need to set zIndex:-1 or something to these elements*/}
         {openMenu && (
           <ScrollView style={getScrollViewStyle()}>
             {data.map((item, index) => (
               <CustomPressable
-                onHoverIn={() => setHoveredIndex(index + 1)}
-                onHoverOut={() => setHoveredIndex(0)}
+                onHoverIn={() => {
+                  setHoveredIndex(index + 1);
+                  setHovered(true);
+                }}
+                onHoverOut={() => {
+                  setHoveredIndex(0);
+                  setHovered(false);
+                }}
                 onPress={() => {
                   setData(item);
                   setOpenMenu(false);
@@ -208,4 +224,9 @@ const styles = StyleSheet.create({
     borderRadius: 6,
     padding: layout.padding_x1,
   },
+  // dropdownMenuRow: {
+  //   backgroundColor: neutral00,
+  //   borderRadius: 6,
+  //   padding: layout.padding_x1,
+  // },
 });
diff --git a/packages/components/inputs/TextInputCustom.tsx b/packages/components/inputs/TextInputCustom.tsx
@@ -238,7 +238,7 @@ export const TextInputCustom = <T extends FieldValues>({
           <View style={styles.rowEnd}>
             <Label
               hovered={hovered}
-              style={[{ color: neutralA3 }, labelStyle]}
+              style={labelStyle}
               isRequired={!!rules?.required}
             >
               {label}
@@ -320,7 +320,7 @@ const styles = StyleSheet.create({
     paddingVertical: layout.padding_x1_5,
   },
   labelText: {
-    color: neutral77, //TODO: neutralA3 by default here ?
+    color: neutralA3,
   },
   textInput: {
     fontSize: 14,

diff --git a/packages/screens/FeedNewArticle/FeedNewArticleScreen.tsx b/packages/screens/FeedNewArticle/FeedNewArticleScreen.tsx
@@ -8,7 +8,6 @@ import { SVG } from "../../components/SVG";
 import { ScreenContainer } from "../../components/ScreenContainer";
 import { WalletStatusBox } from "../../components/WalletStatusBox";
 import { TertiaryBox } from "../../components/boxes/TertiaryBox";
-import { CustomPressable } from "../../components/buttons/CustomPressable";
 import { FileUploader } from "../../components/fileUploader";
 import {
   Label,
@@ -62,7 +61,6 @@ export const FeedNewArticleScreen: ScreenFC<"FeedNewArticle"> = () => {
   );
   const [isNotEnoughFundModal, setNotEnoughFundModal] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [contentHovered, setContentHovered] = useState(false);
 
   const { setToastSuccess, setToastError } = useFeedbacks();
   const navigation = useAppNavigation();
@@ -271,38 +269,30 @@ export const FeedNewArticleScreen: ScreenFC<"FeedNewArticle"> = () => {
           }}
         />
         <View>
-          <Label isRequired hovered={contentHovered}>
-            Article content
-          </Label>
+          <Label>Article content</Label>
           <SpacerColumn size={1} />
-          <CustomPressable
-            onHoverOut={() => setContentHovered(false)}
-            onHoverIn={() => setContentHovered(true)}
-          >
-            {/**@ts-ignore  error:TS2589: Type instantiation is excessively deep and possibly infinite. */}
-            <Controller
-              name="message"
-              control={control}
-              rules={{
-                required: true,
-              }}
-              render={({ field: { onChange, onBlur } }) => (
-                <RichText
-                  onChange={onChange}
-                  onBlur={onBlur}
-                  initialValue={formValues.message}
-                  loading={loading}
-                  publishDisabled={
-                    errors?.message?.type === "required" ||
-                    !formValues.message ||
-                    !formValues.title ||
-                    !wallet
-                  }
-                  onPublish={onPublish}
-                />
-              )}
-            />
-          </CustomPressable>
+          <Controller
+            name="message"
+            control={control}
+            rules={{
+              required: true,
+            }}
+            render={({ field: { onChange, onBlur } }) => (
+              <RichText
+                onChange={onChange}
+                onBlur={onBlur}
+                initialValue={formValues.message}
+                loading={loading}
+                publishDisabled={
+                  errors?.message?.type === "required" ||
+                  !formValues.message ||
+                  !formValues.title ||
+                  !wallet
+                }
+                onPublish={onPublish}
+              />
+            )}
+          />
         </View>
       </View>
     </ScreenContainer>