refactor: adjusting field methods

devhatt · Jul 31, 2024 · de39c80 · de39c80
1 parent 4095cbc
commit de39c80
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 28 deletions.
diff --git a/src/components/Dropdown/index.scss b/src/components/Dropdown/index.scss
@@ -3,13 +3,12 @@
 
 .dropdown {
   width: 100%;
-  height: 100%;
 
   font-family: fonts.$primaryFont;
-  font-size: 1.4rem;
-  font-weight: fonts.$semiBold;
 
   color: colors.$gray800;
+  font-size: 1.4rem;
+  font-weight: fonts.$semiBold;
 
   position: relative;
 
@@ -59,12 +58,12 @@
 
     padding: 1.8rem 1.6rem;
 
+    border: 1px solid colors.$gray200;
+
     box-sizing: border-box;
 
     background-color: colors.$white;
 
-    border: 1px solid colors.$gray200;
-
     border-radius: 1.4rem;
 
     .dropdown__icon {

diff --git a/src/components/RegisterForm/components/Field.js b/src/components/RegisterForm/components/Field.js
@@ -19,7 +19,6 @@ const html = `
 
 export default function Field({ label = '', error = '', content } = {}) {
   Component.call(this, { html, events });
-  this.content = null;
   this.setLabel(label);
   this.setError(error);
   this.setContent(content);
@@ -45,12 +44,14 @@ Field.prototype = Object.assign(Field.prototype, Component.prototype, {
   },
 
   showError(error) {
-    this.selected.get('field-error').classList.add('show-error');
+    this.selected.get('field-error').classList.add('field__error--show-error');
     this.emit('error:visible', error);
   },
 
-  resError(error) {
-    this.selected.get('field-error').classList.remove('show-error');
+  resolveError(error) {
+    this.selected
+      .get('field-error')
+      .classList.remove('field__error--show-error');
     this.emit('error:resolved', error);
   },
 
@@ -59,9 +60,8 @@ Field.prototype = Object.assign(Field.prototype, Component.prototype, {
   },
 
   setContent(content) {
-    if (content?.mount == null) {
-      return;
-    }
+    if (content?.mount === null)
+      throw new Error('Esse método espera receber um componente');
 
     this.content = content;
     this.content.mount(this.selected.get('field-input'));

diff --git a/src/components/RegisterForm/components/index.scss b/src/components/RegisterForm/components/index.scss
@@ -7,11 +7,11 @@
   &__label {
     display: block;
 
+    color: colors.$gray800;
+
     font-size: fonts.$xs;
     font-weight: fonts.$medium;
 
-    color: colors.$gray800;
-
     padding: 0 0 0.5rem 0.5rem;
   }
 
@@ -24,7 +24,7 @@
 
     margin: 0.8rem 0 0 0.5rem;
 
-    &.show-error {
+    &--show-error {
       display: block;
     }
   }

diff --git a/src/components/RegisterForm/index.js b/src/components/RegisterForm/index.js
@@ -18,7 +18,7 @@ import './index.scss';
 const events = ['register'];
 
 const html = `
-    <div data-select="component" class="register-form">
+    <div class="register-form">
       <h1 class="register-form__title">Crie sua petconta</h1>
       <div class="register-form__socials">
         <button class="register-form__social">
@@ -229,35 +229,35 @@ export default function RegisterForm() {
     }
 
     if (nameValid) {
-      name.resError();
+      name.resolveError();
     }
 
     if (surnameValid) {
-      surname.resError();
+      surname.resolveError();
     }
 
     if (birthValid) {
-      birth.resError();
+      birth.resolveError();
     }
 
     if (localValid) {
-      local.resError();
+      local.resolveError();
     }
 
     if (emailValid) {
-      email.resError();
+      email.resolveError();
     }
 
     if (phoneValid) {
-      phone.resError();
+      phone.resolveError();
     }
 
     if (passwordValid) {
-      password.resError();
+      password.resolveError();
     }
 
     if (repeatPasswordValid) {
-      repeatPassword.resError();
+      repeatPassword.resolveError();
     }
 
     if (

diff --git a/src/components/RegisterForm/index.scss b/src/components/RegisterForm/index.scss
@@ -3,8 +3,7 @@
 @use '~styles/breakpoints.scss' as breakpoints;
 
 .register-form {
-  width: 80%;
-  height: 100%;
+  width: 100%;
 
   display: flex;
   flex-direction: column;
@@ -14,7 +13,6 @@
   font-family: fonts.$primaryFont;
 
   margin: 0 auto;
-  padding: 0 2rem;
 
   &__title {
     color: colors.$gray800;

diff --git a/src/styles/colors.scss b/src/styles/colors.scss
@@ -21,7 +21,7 @@ $success200: rgb(49, 138, 94);
 // error
 $error100: rgb(179, 38, 30);
 
-// white
+// White
 
 $white: rgb(255, 255, 255);