dev pull

Author: AhsanKhan7

src/ui/components/forms/index.tsx

@@ -36,6 +36,7 @@ export type FieldError = {
 };
 
 export const FormTextField = (props: {
+  autoFocus?: any;
   label: string;
   labelColor?: any;
   placeholder: string;
@@ -195,9 +196,11 @@ export const EditField = (
             />
           }
         />
-        <Box style={{ position: 'absolute', right: '10px', top: '35px' }}>
-          <icons.pen color={iconColors.grey} />
-        </Box>
+        {!props.disabled && (
+          <Box style={{ position: 'absolute', right: '10px', top: '35px' }}>
+            <icons.pen color={iconColors.grey} />
+          </Box>
+        )}
       </FlexBox>
     </FlexBox.Column>
   );

src/ui/components/inputs/index.tsx

@@ -37,7 +37,6 @@ export const InputWithLabel = ({
 export const BaseInput = ({
   onChange,
   value,
-  defaultValue,
   placeholder,
   type,
   hasError,
@@ -46,8 +45,7 @@ export const BaseInput = ({
   ...props
 }: {
   onChange: any;
-  value: string;
-  defaultValue?: any;
+  value?: string;
   placeholder?: string;
   type: string;
   hasError?: boolean;
@@ -58,7 +56,6 @@ export const BaseInput = ({
     {...props}
     onChange={onChange}
     value={value}
-    defaultValue={defaultValue}
     placeholder={placeholder}
     className={cn(styles.input, hasError ? styles.error : null, className)}
     type={type}
@@ -123,16 +120,14 @@ export const EmailInput = ({
 export const TextInput = ({
   onChangeText,
   value,
-  defaultValue,
   placeholder,
   hasError,
   style,
   type = 'text',
   ...props
 }: {
   onChangeText: any;
-  value: string;
-  defaultValue?: string;
+  value?: string;
   placeholder?: string;
   hasError?: boolean;
   type?: string;
@@ -144,7 +139,6 @@ export const TextInput = ({
     onChange={(e: any): void => {
       onChangeText(e.target.value);
     }}
-    defaultValue={defaultValue}
     value={value}
     placeholder={placeholder}
     type={type}

src/ui/layouts/common/CustomStackBox/index.tsx

@@ -12,14 +12,18 @@ export const CustomStackBox: React.FC<{
   value?: any;
   onCheck: any;
 }> = ({ image, stackName, stackDesc, value, onCheck }) => {
-
   return (
     <Box
-      paddingHorizontal="sm2" 
+      paddingHorizontal="sm2"
       paddingVertical="sm2"
-      className={styles.stackBox} 
+      className={styles.stackBox}
     >
-    <input type='checkbox' className={styles.checkbox} checked={value} onClick={onCheck} />
+      <input
+        type="radio"
+        className={styles.checkbox}
+        checked={value}
+        onClick={onCheck}
+      />
       <Box className={styles.imageWrapper}>
         <Box className={styles.imageContainer}>
           <img src={image} alt="by Zenml" />
@@ -28,7 +32,13 @@ export const CustomStackBox: React.FC<{
 
       <Box style={{ marginTop: '8px' }}>
         <div data-tip data-for={stackName}>
-          <Paragraph className={styles.stackName}>{stackName?.length > 14 ? <>{stackName?.slice(0, 15)}...</> : stackName}</Paragraph>
+          <Paragraph className={styles.stackName}>
+            {stackName?.length > 14 ? (
+              <>{stackName?.slice(0, 15)}...</>
+            ) : (
+              stackName
+            )}
+          </Paragraph>
         </div>
         <ReactTooltip id={stackName} place="top" effect="solid">
           <Paragraph color="white">{stackName}</Paragraph>
@@ -37,7 +47,13 @@ export const CustomStackBox: React.FC<{
 
       <Box marginTop="xs">
         <div data-tip data-for={stackDesc}>
-          <Paragraph className={styles.stackDesc}>{stackDesc?.length > 14 ? <>{titleCase(stackDesc?.slice(0, 15))}...</> : stackDesc}</Paragraph>
+          <Paragraph className={styles.stackDesc}>
+            {stackDesc?.length > 14 ? (
+              <>{titleCase(stackDesc?.slice(0, 15))}...</>
+            ) : (
+              stackDesc
+            )}
+          </Paragraph>
         </div>
         <ReactTooltip id={stackDesc} place="top" effect="solid">
           <Paragraph color="white">{titleCase(stackDesc)}</Paragraph>

src/ui/layouts/common/FormElement/index.tsx

@@ -54,7 +54,7 @@ export function ToggleField(props: any) {
   const { name, value, onHandleChange, label, disabled } = props;
   return (
     <Box style={{ height: '68px' }}>
-      <FlexBox.Row justifyContent="space-between" flexDirection='column'>
+      <FlexBox.Row justifyContent="space-between" flexDirection="column">
         <Box>
           <Paragraph size="body" style={{ color: '#000' }}>
             {label}
@@ -65,6 +65,7 @@ export function ToggleField(props: any) {
           <label className={styles.switch}>
             <input
               type="checkbox"
+              defaultChecked={value}
               onChange={(event) => onHandleChange(name, event.target.checked)}
               disabled={disabled}
             />