fix: fix the logical to set placeholder, changed the name of the even…

…ts (#52) * fix: fix the logical to set placeholder, changed the name of the events * rename the events, fix style sizes, change methods names and functions, add togle method * identation * add EOF
devhatt · Feb 1, 2024 · 5348d4b · 5348d4b
1 parent 5c56a95
commit 5348d4b
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 40 deletions.
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
@@ -2,11 +2,11 @@ import { Component } from 'pet-dex-utilities';
 import './index.scss';
 
 const events = [
-  'inputError',
-  'inputPlaceholderChanged',
-  'inputAssetChanged',
-  'inputDisabled',
-  'inputEnabled',
+  'error',
+  'placeholder:changed',
+  'asset:changed',
+  'disabled',
+  'enabled',
 ];
 
 const html = `
@@ -15,53 +15,61 @@ const html = `
     </div>
 `;
 
-export default function InputText({
+export default function TextInput({
   placeholder,
   assetUrl,
   assetPosition,
   variation,
 }) {
   Component.call(this, { html, events });
-  this.disabled = false;
+  const input = this.selected.get('input-text');
+  input.disabled = false;
 
-  this.placeholder = placeholder;
-  this.selected.get('input-text').classList.add(variation);
-  this.selected.get('input-text').backgroundImage = assetUrl;
-  this.selected.get('input-text').classList.add(assetPosition);
+  this.setPlaceholder(placeholder);
+  input.classList.add(variation);
+  input.style.backgroundImage = `url(${assetUrl})`;
+  input.classList.add(assetPosition);
 
-  this.selected.get('input-text').addEventListener('focus', () => {
-    if (this.disabled) return;
-    this.classList.remove('input-error');
+  input.addEventListener('focus', () => {
+    if (input.disabled) return;
+    input.classList.remove('input-error');
   });
 }
 
-InputText.prototype = Object.assign(InputText.prototype, Component.prototype, {
+TextInput.prototype = Object.assign(TextInput.prototype, Component.prototype, {
   setPlaceholder(placeholder) {
     this.selected.get('input-text').placeholder = placeholder;
-    this.emit('placeholderChanged', placeholder);
+    this.emit('placeholder:changed', placeholder);
   },
   setAsset(url) {
-    this.selected.get('input-text').backgroundImage = `url(${url})`;
-    this.emit('inputAssetChanged');
+    this.selected.get('input-text').style.backgroundImage = `url(${url})`;
+    this.emit('asset:changed');
   },
-  isStandard() {
-    this.selected.get('input-text').classList.add('standard');
-    this.selected.get('input-text').classList.remove('outlined');
+  setAssetPosition(position) {
+    this.selected.get('input-text').classList.remove('prefix', 'suffix');
+    this.selected.get('input-text').classList.add(position);
   },
-  isOutlined() {
-    this.selected.get('input-text').classList.add('outlined');
-    this.selected.get('input-text').classList.remove('standart');
+  setVariation(standardOrOutlined) {
+    this.selected.get('input-text').classList.remove('outlined', 'standard');
+    this.selected.get('input-text').classList.add(standardOrOutlined);
   },
   inputError() {
     this.selected.get('input-text').classList.add('input-error');
-    this.emit('inputError');
+    this.emit('error');
   },
   disable() {
-    this.disabled = true;
-    this.emit('inputDisabled');
+    this.selected.get('input-text').disabled = true;
+    this.emit('disabled');
   },
   enable() {
-    this.disabled = false;
-    this.emit('inputEnabled');
+    this.selected.get('input-text').disabled = false;
+    this.emit('enabled');
+  },
+  toggle() {
+    if (this.selected.get('input-text').disabled) {
+      this.enable();
+    } else {
+      this.disable();
+    }
   },
 });
diff --git a/src/components/TextInput/index.scss b/src/components/TextInput/index.scss
@@ -4,12 +4,16 @@
   &__input {
     width: 100%;
 
-    font-size: 1rem;
+    font-size: 1.5rem;
 
     background-repeat: no-repeat;
-    background-size: auto 50%;
+    background-size: auto 60%;
     filter: opacity(0.85);
 
+    &:disabled {
+      filter: opacity(0.55);
+    }
+
     &.standard {
       padding: 0.65rem 1rem;
       border: 1px solid rgb(163, 163, 163);
@@ -19,15 +23,15 @@
       transition: border-color 0.3s ease-in-out;
 
       &.prefix {
-        padding: 0.8rem 0.8rem 0.8rem 2.5rem;
+        padding: 0.8rem 1rem 0.8rem 3.5rem;
 
-        background-position: 0.5rem center;
+        background-position: 0.8rem center;
       }
 
       &.suffix {
-        padding: 0.8rem 2.5rem 0.8rem 0.8rem;
+        padding: 0.8rem 3.5rem 0.8rem 1rem;
 
-        background-position: calc(100% - 0.5rem) center;
+        background-position: calc(100% - 0.8rem) center;
       }
 
       &:focus {
@@ -48,8 +52,9 @@
 
     &.outlined {
       padding: 0.5rem 0.35rem;
-      border-bottom: 2px solid rgb(191, 191, 191);
+
       border-color: transparent;
+      border-bottom: 1px solid #b8b8b8;
 
       outline: none;
 
@@ -70,16 +75,17 @@
       }
 
       &.suffix {
-        padding: 0.5rem 2.5rem 0.5rem 0.3rem;
+        padding: 0.8rem 3.5rem 0.8rem 1rem;
 
-        background-position: calc(100% - 0.5rem) center;
+        background-position: calc(100% - 0.8rem) center;
       }
 
       &.prefix {
-        padding: 0.5rem 0.3rem 0.5rem 2.5rem;
+        padding: 0.8rem 1rem 0.8rem 3.5rem;
 
-        background-position: 0.5rem center;
+        background-position: 0.8rem center;
       }
     }
   }
+
 }