style multi select

olegstan · Sep 26, 2023 · 17124fa · 17124fa
1 parent cb8ffd7
commit 17124fa
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/src/components/Form/MultipleSelect/MultipleSelect.jsx b/src/components/Form/MultipleSelect/MultipleSelect.jsx
@@ -24,6 +24,7 @@ class MultipleSelect extends BaseInput
   {
     if (this.wrapperRef && !this.wrapperRef.contains(e.target))
     {
+      console.log(111)
       this.handleShowSelect(false);
 
       if(typeof this.props.onOutsideClick === 'function' && this.state.focused === true)
@@ -78,7 +79,7 @@ class MultipleSelect extends BaseInput
     {
 
     }
-    return require('../../assets/arrow.svg').default.default;
+    return require('../../assets/arrow.svg').default;
   }
 
   handleShowSelect(select)
@@ -114,17 +115,20 @@ class MultipleSelect extends BaseInput
     const { items, handle, selected } = this.props;
 
     let error = this.getError();
-    let focus = (this.state.hasError ? {'border': '1px solid #FF0000'} : {})
 
-    return <Container style={focus} className={this.props.className}>
+    return <Container
+      style={this.getContainerStyle()}
+      className={this.props.className + ' ' + (this.state.select ? 'select' : '')}
+    >
       <InputWrapper ref={this.setWrapperRef} className={'wrapper '  + (this.state.select ? 'select' : '')}>
-        <Selected id={this.props.id} className='selected' onClick={() => {
+        <Selected id={this.props.id} className={this.props.className + ' selected'} onClick={() => {
           this.handleShowSelect(true);
         }}><span>{this.renderSelected()}</span></Selected>
         <StyledSelect id={this.props.id + '-multi-select'} className={this.props.className + ' select'} select={this.state.select}>
           {this.renderSelectAll()}
           {items.map((item, key) => (
             <Checkbox
+              key={key}
               id={'item-' + item.id}
               text={item.name}
               checked={this.props.selected.indexOf(item.id) !== -1}

diff --git a/src/components/Form/MultipleSelect/styles.js b/src/components/Form/MultipleSelect/styles.js
@@ -3,13 +3,27 @@ import {sharedItemStyle, sharedSelectedStyle, sharedSelectStyle, sharedSelectWra
 
 export const InputWrapper = styled.div`
     ${sharedSelectWrapperStyle}
+  
+    & > div > span{
+      border: none;
+    }
 `
 export const Selected = styled.div`
     ${sharedSelectedStyle}
+
 `
 
 export const Select = styled.div`
   ${sharedSelectStyle}
+  
+  top: 0;
+  background-color: #353644;
+  color: #fff;
+  
+  div{
+    color: #fff;
+  }
+  
 `
 
 export const Item = styled.div`

diff --git a/src/components/Form/Select/Select.jsx b/src/components/Form/Select/Select.jsx
@@ -116,7 +116,6 @@ class Select extends BaseInput
     return <Container
       size={this.props.size}
       className={this.props.className + ' ' + (this.state.select ? 'select' : '')}
-      // style={this.props.style}
       style={this.getContainerStyle()}
     >
       <InputWrapper ref={this.setWrapperRef} className={'wrapper ' + (this.state.select ? 'select' : '')} style={focus} id={this.props.id + '-wrapper'}>

diff --git a/src/components/Form/newstyles.js b/src/components/Form/newstyles.js
@@ -665,6 +665,12 @@ export const sharedSelectedStyle = css`
     color: #4C89FE;
   }
   
+  &.style6
+  {
+    background-color: #333443;
+    color: #4C89FE;
+  }
+  
   span {
     display: block;
     text-align: left;