@zezosoft/zezo-ott-react-native-ui-kit 1.1.0 → 1.1.2

package/src/components/Auth/SignUp/SignUp.tsx

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Mon 16 Jun 2025 at 03:05 PM
  */
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   StyleSheet,
   View,
@@ -82,312 +82,331 @@ export interface SignupProps {
   renderTopBackBtn?: (props: { onPress: () => void }) => React.ReactNode;
 }
 
-const Signup: React.FC<SignupProps> = ({
-  title = 'Sign Up',
-  onSubmit,
-  onLogin,
-  onTopBackBtnPress,
-  containerStyle,
-  titleStyle,
-  formStyle,
-  inputStyle,
-  inputContainerStyle,
-  topBackBtnStyle,
-  minPasswordLength = 6,
-  loadingSubmitBtn,
-  backgroundImage,
-  logoUri,
-  theme: overrideTheme,
-  text,
-  loginTextProps,
-  loginLinkTextProps,
-  renderLogo,
-  renderSingUpHeader,
-  renderLoginPrompt,
-  renderSubmitButton,
-  renderTopBackBtn,
-}) => {
-  const {
-    control,
-    handleSubmit,
-    formState: { errors, isValid, touchedFields },
-    getValues,
-  } = useForm<FormValues>({
-    defaultValues: {
-      username: '',
-      email: '',
-      password: '',
-      confirmPassword: '',
-    },
-    mode: 'onChange',
-  });
-  const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
-  const { isKeyboardOpen } = useKeyboard();
-  const [isLoading, setIsLoading] = React.useState(false);
+const Signup: React.FC<SignupProps> = React.memo(
+  ({
+    title = 'Sign Up',
+    onSubmit,
+    onLogin,
+    onTopBackBtnPress,
+    containerStyle,
+    titleStyle,
+    formStyle,
+    inputStyle,
+    inputContainerStyle,
+    topBackBtnStyle,
+    minPasswordLength = 6,
+    loadingSubmitBtn,
+    backgroundImage,
+    logoUri,
+    theme: overrideTheme,
+    text,
+    loginTextProps,
+    loginLinkTextProps,
+    renderLogo,
+    renderSingUpHeader,
+    renderLoginPrompt,
+    renderSubmitButton,
+    renderTopBackBtn,
+  }) => {
+    const {
+      control,
+      handleSubmit,
+      formState: { errors, isValid, touchedFields },
+      getValues,
+    } = useForm<FormValues>({
+      defaultValues: {
+        username: '',
+        email: '',
+        password: '',
+        confirmPassword: '',
+      },
+      mode: 'onChange',
+    });
+    const { theme: resolvedTheme } = useInternalTheme(overrideTheme);
+    const { isKeyboardOpen } = useKeyboard();
+    const [isLoading, setIsLoading] = React.useState(false);
 
-  const handleFormSubmit = useCallback(
-    async (data: FormValues) => {
-      if (!onSubmit) return;
-      setIsLoading(true);
-      try {
-        await onSubmit(data);
-      } catch (error) {
-        console.error('Form submission error:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [onSubmit]
-  );
+    const handleFormSubmit = useCallback(
+      async (data: FormValues) => {
+        if (!onSubmit) return;
+        setIsLoading(true);
+        try {
+          await onSubmit(data);
+        } catch (error) {
+          console.error('Form submission error:', error);
+        } finally {
+          setIsLoading(false);
+        }
+      },
+      [onSubmit]
+    );
 
-  const shouldRender = (condition?: boolean | unknown): boolean =>
-    typeof condition === 'function' || !!condition;
+    const shouldRender = useMemo(
+      () =>
+        (condition?: boolean | unknown): boolean =>
+          typeof condition === 'function' || !!condition,
+      []
+    );
 
-  return (
-    <BackgroundLayout
-      theme={overrideTheme}
-      backgroundImage={backgroundImage?.source}
-      gradientSplitBackground={
-        isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3
-      }
-    >
-      <View style={[styles.container, containerStyle]}>
-        {/* Top Back Button */}
-        {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
-          <View style={styles.topBackBtnWrapper}>
-            {renderTopBackBtn ? (
-              renderTopBackBtn({
-                onPress: onTopBackBtnPress ?? (() => {}),
-              })
-            ) : (
-              <BackBtn
-                theme={overrideTheme}
-                style={topBackBtnStyle}
-                onPress={onTopBackBtnPress}
-              />
-            )}
-          </View>
-        )}
-        <HideKeyboard keyboardVerticalOffset={scale(-50)}>
-          <View style={styles.centerContent}>
-            {/* Logo */}
-            {renderLogo ? (
-              renderLogo()
-            ) : logoUri ? (
-              <Logo logoUri={logoUri} />
-            ) : null}
+    // Memoize gradient split background
+    const gradientSplitBackground = useMemo(
+      () => (isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3),
+      [isKeyboardOpen]
+    );
 
-            {/* Title */}
-            {renderSingUpHeader ? (
-              renderSingUpHeader()
-            ) : (
-              <Text style={[styles.title, titleStyle]}>{title}</Text>
-            )}
+    // Memoize disabled state
+    const isDisabled = useMemo(
+      () => loadingSubmitBtn || isLoading,
+      [loadingSubmitBtn, isLoading]
+    );
 
-            {/* Form */}
-            <View style={[styles.form, formStyle]}>
-              {/* Username */}
-              <Controller
-                control={control}
-                name="username"
-                rules={{
-                  required: 'Username is required',
-                  minLength: { value: 3, message: 'At least 3 characters' },
-                }}
-                render={({ field: { onChange, onBlur, value } }) => (
-                  <Input.One
-                    placeholder={text?.usernamePlaceholder || 'Username'}
-                    label={text?.usernameLabel || 'Username'}
-                    value={value}
-                    onChangeText={onChange}
-                    onBlur={onBlur}
-                    disabled={loadingSubmitBtn || isLoading}
-                    error={!!touchedFields.username && !!errors.username}
-                    errorMessage={errors.username?.message}
-                    inputStyle={inputStyle}
-                    containerStyle={inputContainerStyle}
-                    theme={overrideTheme}
-                  />
-                )}
-              />
+    return (
+      <BackgroundLayout
+        theme={overrideTheme}
+        backgroundImage={backgroundImage?.source}
+        gradientSplitBackground={gradientSplitBackground}
+      >
+        <View style={[styles.container, containerStyle]}>
+          {/* Top Back Button */}
+          {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
+            <View style={styles.topBackBtnWrapper}>
+              {renderTopBackBtn ? (
+                renderTopBackBtn({
+                  onPress: onTopBackBtnPress ?? (() => {}),
+                })
+              ) : (
+                <BackBtn
+                  theme={overrideTheme}
+                  style={topBackBtnStyle}
+                  onPress={onTopBackBtnPress}
+                />
+              )}
+            </View>
+          )}
+          <HideKeyboard keyboardVerticalOffset={scale(-50)}>
+            <View style={styles.centerContent}>
+              {/* Logo */}
+              {renderLogo ? (
+                renderLogo()
+              ) : logoUri ? (
+                <Logo logoUri={logoUri} />
+              ) : null}
 
-              {/* Email */}
-              <Controller
-                control={control}
-                name="email"
-                rules={{
-                  required: 'Email is required',
-                  pattern: {
-                    value: /^\S+@\S+\.\S+$/,
-                    message: 'Enter a valid email address',
-                  },
-                }}
-                render={({ field: { onChange, onBlur, value } }) => (
-                  <Input.One
-                    placeholder={text?.emailPlaceholder || 'Email'}
-                    label={text?.emailLabel || 'Email'}
-                    value={value}
-                    onChangeText={(inputText) => {
-                      const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
-                      onChange(sanitized);
-                    }}
-                    onBlur={onBlur}
-                    disabled={loadingSubmitBtn || isLoading}
-                    error={!!touchedFields.email && !!errors.email}
-                    errorMessage={errors.email?.message}
-                    inputStyle={inputStyle}
-                    containerStyle={inputContainerStyle}
-                    theme={overrideTheme}
-                    textContentType="emailAddress"
-                    autoCapitalize="none"
-                    keyboardType="email-address"
-                    autoCorrect={false}
-                  />
-                )}
-              />
+              {/* Title */}
+              {renderSingUpHeader ? (
+                renderSingUpHeader()
+              ) : (
+                <Text style={[styles.title, titleStyle]}>{title}</Text>
+              )}
 
-              {/* Password */}
-              <Controller
-                control={control}
-                name="password"
-                rules={{
-                  required: 'Password is required',
-                  minLength: {
-                    value: minPasswordLength,
-                    message: `Minimum ${minPasswordLength} characters`,
-                  },
-                }}
-                render={({ field: { onChange, onBlur, value } }) => (
-                  <Input.One
-                    placeholder={text?.passwordPlaceholder || 'Password'}
-                    label={text?.passwordLabel || 'Password'}
-                    value={value}
-                    secureTextEntry
-                    onChangeText={(inputText) => {
-                      const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
-                      onChange(sanitized);
-                    }}
-                    onBlur={onBlur}
-                    disabled={loadingSubmitBtn || isLoading}
-                    inputStyle={inputStyle}
-                    error={!!touchedFields.password && !!errors.password}
-                    errorMessage={errors.password?.message}
-                    containerStyle={inputContainerStyle}
-                    textContentType="none"
-                    autoCapitalize="none"
-                    spellCheck={false}
-                    autoCorrect={false}
-                    autoComplete="off"
-                    theme={overrideTheme}
-                  />
-                )}
-              />
+              {/* Form */}
+              <View style={[styles.form, formStyle]}>
+                {/* Username */}
+                <Controller
+                  control={control}
+                  name="username"
+                  rules={{
+                    required: 'Username is required',
+                    minLength: { value: 3, message: 'At least 3 characters' },
+                  }}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <Input.One
+                      placeholder={text?.usernamePlaceholder || 'Username'}
+                      label={text?.usernameLabel || 'Username'}
+                      value={value}
+                      onChangeText={onChange}
+                      onBlur={onBlur}
+                      disabled={isDisabled}
+                      error={!!touchedFields.username && !!errors.username}
+                      errorMessage={errors.username?.message}
+                      inputStyle={inputStyle}
+                      containerStyle={inputContainerStyle}
+                      theme={overrideTheme}
+                    />
+                  )}
+                />
 
-              {/* Confirm Password */}
-              <Controller
-                control={control}
-                name="confirmPassword"
-                rules={{
-                  required: 'Confirm password is required',
-                  validate: (value) =>
-                    value === getValues('password') || 'Passwords do not match',
-                }}
-                render={({ field: { onChange, onBlur, value } }) => (
-                  <Input.One
-                    placeholder={
-                      text?.confirmPasswordPlaceholder || 'Confirm Password'
-                    }
-                    label={text?.confirmPasswordLabel || 'Confirm Password'}
-                    value={value}
-                    secureTextEntry
-                    onChangeText={(inputText) => {
-                      const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
-                      onChange(sanitized);
-                    }}
-                    onBlur={onBlur}
-                    error={
-                      !!touchedFields.confirmPassword &&
-                      !!errors.confirmPassword
-                    }
-                    disabled={loadingSubmitBtn || isLoading}
-                    errorMessage={errors.confirmPassword?.message}
-                    inputStyle={inputStyle}
-                    containerStyle={inputContainerStyle}
-                    theme={overrideTheme}
-                    textContentType="none"
-                    autoCapitalize="none"
-                    spellCheck={false}
-                    autoCorrect={false}
-                    autoComplete="off"
-                  />
-                )}
-              />
+                {/* Email */}
+                <Controller
+                  control={control}
+                  name="email"
+                  rules={{
+                    required: 'Email is required',
+                    pattern: {
+                      value: /^\S+@\S+\.\S+$/,
+                      message: 'Enter a valid email address',
+                    },
+                  }}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <Input.One
+                      placeholder={text?.emailPlaceholder || 'Email'}
+                      label={text?.emailLabel || 'Email'}
+                      value={value}
+                      onChangeText={(inputText) => {
+                        const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
+                        onChange(sanitized);
+                      }}
+                      onBlur={onBlur}
+                      disabled={isDisabled}
+                      error={!!touchedFields.email && !!errors.email}
+                      errorMessage={errors.email?.message}
+                      inputStyle={inputStyle}
+                      containerStyle={inputContainerStyle}
+                      theme={overrideTheme}
+                      textContentType="emailAddress"
+                      autoCapitalize="none"
+                      keyboardType="email-address"
+                      autoCorrect={false}
+                    />
+                  )}
+                />
 
-              {/* Submit Button */}
-              {!isKeyboardOpen &&
-                (renderSubmitButton ? (
-                  renderSubmitButton({
-                    onPress: handleSubmit(handleFormSubmit),
-                    disabled: !isValid || loadingSubmitBtn || isLoading,
-                    loading: loadingSubmitBtn || isLoading,
-                  })
-                ) : (
-                  <Button.Primary
-                    title={text?.signupButton || 'Sign up'}
-                    disabled={!isValid}
-                    theme={overrideTheme}
-                    loading={loadingSubmitBtn || isLoading}
-                    loadingText={text?.loadingSubmitBtnText || 'Signing up...'}
-                    onPress={handleSubmit(handleFormSubmit)}
-                  />
-                ))}
-            </View>
-          </View>
+                {/* Password */}
+                <Controller
+                  control={control}
+                  name="password"
+                  rules={{
+                    required: 'Password is required',
+                    minLength: {
+                      value: minPasswordLength,
+                      message: `Minimum ${minPasswordLength} characters`,
+                    },
+                  }}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <Input.One
+                      placeholder={text?.passwordPlaceholder || 'Password'}
+                      label={text?.passwordLabel || 'Password'}
+                      value={value}
+                      secureTextEntry
+                      onChangeText={(inputText) => {
+                        const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
+                        onChange(sanitized);
+                      }}
+                      onBlur={onBlur}
+                      disabled={isDisabled}
+                      inputStyle={inputStyle}
+                      error={!!touchedFields.password && !!errors.password}
+                      errorMessage={errors.password?.message}
+                      containerStyle={inputContainerStyle}
+                      textContentType="none"
+                      autoCapitalize="none"
+                      spellCheck={false}
+                      autoCorrect={false}
+                      autoComplete="off"
+                      theme={overrideTheme}
+                    />
+                  )}
+                />
 
-          {/* Login Prompt */}
-          {!isKeyboardOpen &&
-            shouldRender(renderLoginPrompt || onLogin) &&
-            (renderLoginPrompt ? (
-              renderLoginPrompt()
-            ) : (
-              <View
-                style={[
-                  styles.loginContainerWrapper,
-                  {
-                    bottom: getResponsiveBottomSpacing(35),
-                  },
-                ]}
-              >
-                <View style={styles.loginContainer}>
-                  <View style={styles.loginRow}>
-                    <Text
-                      style={[styles.loginPrompt, loginTextProps]}
-                      color={resolvedTheme?.colors?.textPrimary}
-                    >
-                      {text?.loginPrompt || `Already have an account?`}
-                    </Text>
-                    <TextButton
-                      title={text?.loginLink || 'Login'}
-                      onPress={() => {
-                        Keyboard.dismiss();
-                        requestAnimationFrame(() => {
-                          onLogin?.();
-                        });
+                {/* Confirm Password */}
+                <Controller
+                  control={control}
+                  name="confirmPassword"
+                  rules={{
+                    required: 'Confirm password is required',
+                    validate: (value) =>
+                      value === getValues('password') ||
+                      'Passwords do not match',
+                  }}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <Input.One
+                      placeholder={
+                        text?.confirmPasswordPlaceholder || 'Confirm Password'
+                      }
+                      label={text?.confirmPasswordLabel || 'Confirm Password'}
+                      value={value}
+                      secureTextEntry
+                      onChangeText={(inputText) => {
+                        const sanitized = inputText.replace(/[^\w@.\-+]/g, '');
+                        onChange(sanitized);
                       }}
-                      bold
-                      underline
-                      color={resolvedTheme?.colors?.button}
-                      style={loginLinkTextProps}
+                      onBlur={onBlur}
+                      error={
+                        !!touchedFields.confirmPassword &&
+                        !!errors.confirmPassword
+                      }
+                      disabled={isDisabled}
+                      errorMessage={errors.confirmPassword?.message}
+                      inputStyle={inputStyle}
+                      containerStyle={inputContainerStyle}
+                      theme={overrideTheme}
+                      textContentType="none"
+                      autoCapitalize="none"
+                      spellCheck={false}
+                      autoCorrect={false}
+                      autoComplete="off"
                     />
+                  )}
+                />
+
+                {/* Submit Button */}
+                {!isKeyboardOpen &&
+                  (renderSubmitButton ? (
+                    renderSubmitButton({
+                      onPress: handleSubmit(handleFormSubmit),
+                      disabled: !isValid || isDisabled,
+                      loading: isDisabled,
+                    })
+                  ) : (
+                    <Button.Primary
+                      title={text?.signupButton || 'Sign up'}
+                      disabled={!isValid || isDisabled}
+                      theme={overrideTheme}
+                      loading={isDisabled}
+                      loadingText={
+                        text?.loadingSubmitBtnText || 'Signing up...'
+                      }
+                      onPress={handleSubmit(handleFormSubmit)}
+                    />
+                  ))}
+              </View>
+            </View>
+
+            {/* Login Prompt */}
+            {!isKeyboardOpen &&
+              shouldRender(renderLoginPrompt || onLogin) &&
+              (renderLoginPrompt ? (
+                renderLoginPrompt()
+              ) : (
+                <View
+                  style={[
+                    styles.loginContainerWrapper,
+                    {
+                      bottom: getResponsiveBottomSpacing(35),
+                    },
+                  ]}
+                >
+                  <View style={styles.loginContainer}>
+                    <View style={styles.loginRow}>
+                      <Text
+                        style={[styles.loginPrompt, loginTextProps]}
+                        color={resolvedTheme?.colors?.textPrimary}
+                      >
+                        {text?.loginPrompt || `Already have an account?`}
+                      </Text>
+                      <TextButton
+                        title={text?.loginLink || 'Login'}
+                        onPress={() => {
+                          Keyboard.dismiss();
+                          requestAnimationFrame(() => {
+                            onLogin?.();
+                          });
+                        }}
+                        bold
+                        underline
+                        color={resolvedTheme?.colors?.button}
+                        style={loginLinkTextProps}
+                      />
+                    </View>
                   </View>
                 </View>
-              </View>
-            ))}
-        </HideKeyboard>
-      </View>
-    </BackgroundLayout>
-  );
-};
+              ))}
+          </HideKeyboard>
+        </View>
+      </BackgroundLayout>
+    );
+  }
+);
 
 export default Signup;