feat: adjusted select component

b2wads · Aug 21, 2023 · 991c7ea · 991c7ea
1 parent a9e1e6a
commit 991c7ea
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 63 deletions.
diff --git a/source/components/select/elements/select-option.js b/source/components/select/elements/select-option.js
@@ -15,8 +15,11 @@ class SelectOption extends PureComponent {
             className={classNames(styles.option, { [styles.isSelected]: selected })}
             onClick={onSelect({ name: children, value })}
           >
-            {icon && <Icon className={styles.optionIcon} size="18" name={icon} />}
-            <span className={styles.optionContent}>{children}</span>
+            <div>
+              {icon && <Icon className={styles.optionIcon} size="18" name={icon} />}
+              <span className={styles.optionContent}>{children}</span>
+            </div>
+            {selected && <Icon className={styles.selectedIcon} size="18" name="check" />}
           </li>}
       </Fragment>
     );

diff --git a/source/components/select/select-component.js b/source/components/select/select-component.js
@@ -14,6 +14,7 @@ class Select extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      isFocus: false,
       selectedName: null,
       selectedValue: null,
       menuOpen: false,
@@ -25,6 +26,7 @@ class Select extends Component {
     this.verifyClickOutside = this.verifyClickOutside.bind(this);
     this.closeSelect = this.closeSelect.bind(this);
     this.selectWrap = null;
+    this.handleFocus = this.handleFocus.bind(this);
   }
 
   static propTypes = {
@@ -70,7 +72,8 @@ class Select extends Component {
       nextProps.value !== this.props.value ||
       nextProps.items.length !== this.props.items.length ||
       nextProps.open !== this.props.open ||
-      nextProps.disabled !== this.props.disabled
+      nextProps.disabled !== this.props.disabled ||
+      nextProps.isFocus !== this.props.isFocus
     );
   }
 
@@ -130,6 +133,7 @@ class Select extends Component {
     this.setState({
       menuOpen: false,
       activeLabel: selectedName ? true : false,
+      isFocus: false,
     });
   }
 
@@ -143,8 +147,9 @@ class Select extends Component {
         selectedState.activeLabel = true;
         selectedState.selectedName = name;
         selectedState.selectedValue = value;
+        this.setState({ isFocus: false });
       }
-
+      this.setState({ isFocus: false });
       this.setState(selectedState, this.props.onSelect({ name, value }, false));
     };
   }
@@ -183,26 +188,36 @@ class Select extends Component {
     }, []);
   }
 
+  handleFocus() {
+    const { isFocus } = this.state;
+
+    if (isFocus) return;
+    this.setState({ isFocus: true });
+  }
+
   renderInput() {
-    const { selectedName } = this.state;
+    const { selectedName, isFocus } = this.state;
     const { placeholder, disabled, inputClassName, active } = this.props;
     const fieldClasses = cx(styles.input, inputClassName, {
       [styles.isPlaceholder]: selectedName === null,
       [styles.isActive]: active,
       [styles.isDisabled]: disabled,
+      [styles.isFocus]: isFocus,
     });
 
     return (
-      <div onClick={this.toggleOptions()} className={fieldClasses}>
+      <div onClick={this.handleFocus} className={fieldClasses}>
         {selectedName || placeholder}
       </div>
     );
   }
 
   renderButton(type, label, menuButton) {
+    const { disabled } = this.props;
     const { activeLabel } = this.state;
     const labelClasses = cx(styles.label, {
       [styles.isActive]: activeLabel,
+      [styles.isDisabled]: disabled,
     });
 
     if (type === 'select' && label) {

diff --git a/source/components/select/select.styl b/source/components/select/select.styl
@@ -3,7 +3,8 @@
 ========================================================================== */
 $c-input = #333;
 $placeholder = #999;
-$c-border = #ccc;
+$c-grey-1 = #60605f;
+$c-hover = #3B3B3A;
 $c-label = #999;
 $c-disabled = #c7c7c7;
 $c-blue-1 = #00A0b2;
@@ -30,17 +31,22 @@ $menu {
 
 $field {
   border: 0;
-  border-bottom: 1px solid $c-border;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  color: inherit;
+  border-bottom: 1px solid $c-grey-1;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  color: $c-grey-1;
   display: block;
   font-size: inherit;
   height: 35px;
   outline: 0;
   text-indent: 5px;
   user-select: none;
   width: 100%;
+
+  &:hover {
+  border-color: $c-hover;
+  color: $c-hover;
+  }
 }
 
 /* ==========================================================================
@@ -62,7 +68,7 @@ $field {
 }
 
 .arrow {
-  color: $c-text;
+  color: $c-grey-1;
   position: absolute;
   right: 0;
   top: 8px;
@@ -80,6 +86,8 @@ $field {
   padding: 10px 16px 0 16px;
   font-size: 14px;
 
+  transition: all 0.25s ease;
+
   &.isPlaceholder {
     color: $placeholder;
   }
@@ -96,44 +104,24 @@ $field {
   }
 }
 
-.labelWrapper {
-  // position: relative;
-  // border: 1px solid pink;
-  // max-height: 48px;
-  // padding-bottom: -32px;
-  // z-index: 2;
-}
 
 .label {
-  // color: $c-label;
-  // font-size: 16px;
-  // font-weight: 400;
-  // left: 5px;
-  // line-height: 1;
-  // pointer-events: none;
-  // position: absolute;
-  // top: 10px;
-  // transition: all 0.25s ease;
-
-
-    // border: 1px solid red;
-    color: var(--c-active-input);
-    font-size: 12px;
-    // margin-bottom: -5px;
-    margin-left: 16px;
-    padding: 0 4px;
-    margin-top: -7px!important;
-    display: block;
-    z-index: 2;
-    background-color: white;
-    position: relative;
-    width: max-content;
-
-    // transition: all 0.125s ease;
+  color: var(--c-active-input);
+  font-size: 12px;
+  margin-left: 16px;
+  padding: 0 4px;
+  margin-top: -7px!important;
+  display: block;
+  z-index: 2;
+  background-color: white;
+  position: relative;
+  width: max-content;
 
-  &.isActive {
-    // padding: 0 16px;
-    // margin-left: 24px;
+  &.isDisabled {
+    background: white;
+    border-color: $c-disabled;
+    color: $c-disabled;
+    cursor: not-allowed;
   }
 }
 
@@ -158,6 +146,7 @@ $field {
     transform: scaleY(1);
     transition: opacity 0.5s ease;
     z-index: $z-upmax;
+    margin-top: 50px;
   }
 
   &.isMobile {
@@ -173,19 +162,23 @@ $field {
 }
 
 .option {
-  color: $c-text;
+  color: $c-grey-1;
+  font-size: 14px;
   cursor: pointer;
   padding: 10px 16px;
+  display: flex;
+  justify-content: space-between;
 
   &:hover {
-    background: $c-secondary-light;
+    background: $color-light-1;
   }
 
   &.isSelected {
-    background: $c-secondary;
-    border: 1px solid red;
     color: $c-blue-1;
+  }
 
+  .selectedIcon {
+    align-items: right;
   }
 }
 
@@ -205,31 +198,32 @@ $field {
 
 .isOutline {
   .input {
-    border: 1px solid $c-border;
-    border-radius: 3px;
+    border: 1px solid $c-grey-1;
+    color: $c-grey-1;
+    border-radius: 2px;
     line-height: 5px;
     padding: 24px 14px 22px;
+
+    &:hover {
+      border-color: $c-hover;
+    }
   }
 
   .arrow {
     right: 5px;
-    top: 16px;
+    top: 22px;
   }
 
   .label {
-    // padding-left: 10px;
     margin-bottom: -8px;
-
-
-    &.isActive {
-      background: $white;
-      // left: 10px;
-      // padding: 0 5px;
-      // top: -6px;
-    }
   }
 
   .menu {
     top: 10px;
   }
+
+  .isFocus {
+    border-color: $c-blue-1!important;
+    outline: 1px solid $c-blue-1;
+  }
 }