From b0671dc88a51a5beb2b4edd1acc8ea9efd0983b9 Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Wed, 22 Jan 2020 15:18:28 -0500
Subject: [PATCH] styles react-select

---
 demo/collections/Category.js                  | 26 ++++++++++++--
 .../forms/field-types/Select/index.js         |  6 +++-
 .../forms/field-types/Select/index.scss       | 34 +++++++++++++++++++
 .../components/forms/useFieldType/index.js    |  2 +-
 src/client/scss/type.scss                     |  4 +--
 src/mongoose/schema/fieldToSchemaMap.js       |  5 +--
 6 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/demo/collections/Category.js b/demo/collections/Category.js
index 8c3a88c04d..4299c61f55 100644
--- a/demo/collections/Category.js
+++ b/demo/collections/Category.js
@@ -40,8 +40,8 @@ module.exports = {
     //   hasMany: false,
     // },
     {
-      name: 'role',
-      label: 'Role',
+      name: 'demo-select',
+      label: 'Demo Select',
       type: 'select',
       options: [{
         value: 'Option 1',
@@ -58,7 +58,27 @@ module.exports = {
       }],
       defaultValue: 'Option 1',
       required: true,
-      saveToJWT: true,
+    },
+    {
+      name: 'demo-select-many',
+      label: 'Demo Select w/ hasMany',
+      type: 'select',
+      options: [{
+        value: 'Option 1',
+        label: 'Here is a label for Option 1',
+      }, {
+        value: 'Option 2',
+        label: 'Option 2 Label',
+      }, {
+        value: 'Option 3',
+        label: 'Option 3 Label',
+      }, {
+        value: 'Option 4',
+        label: 'Option 4 Label',
+      }],
+      defaultValue: 'Option 1',
+      required: true,
+      hasMany: true,
     },
   ],
   timestamps: true,
diff --git a/src/client/components/forms/field-types/Select/index.js b/src/client/components/forms/field-types/Select/index.js
index 973ec356cc..86e6507491 100644
--- a/src/client/components/forms/field-types/Select/index.js
+++ b/src/client/components/forms/field-types/Select/index.js
@@ -23,6 +23,7 @@ const Select = (props) => {
     errorMessage,
     label,
     options,
+    hasMany,
   } = props;
 
   const {
@@ -56,11 +57,12 @@ const Select = (props) => {
       <Label htmlFor={name} label={label} required={required} />
       <ReactSelect
         value={options.find(option => option.value === value)}
-        onChange={selected => onFieldChange(selected.value)}
+        onChange={selected => onFieldChange(hasMany ? selected : selected.value)}
         disabled={formProcessing ? 'disabled' : undefined}
         components={{ DropdownIndicator: Arrow }}
         className="react-select"
         classNamePrefix="rs"
+        isMulti={hasMany}
         id={name}
         name={name}
         options={options.map((option, i) => {
@@ -94,6 +96,7 @@ Select.defaultProps = {
   id: null,
   name: 'select',
   defaultValue: null,
+  hasMany: false,
 };
 
 Select.propTypes = {
@@ -126,6 +129,7 @@ Select.propTypes = {
       }),
     ),
   ]).isRequired,
+  hasMany: PropTypes.bool,
 };
 
 export default Select;
diff --git a/src/client/components/forms/field-types/Select/index.scss b/src/client/components/forms/field-types/Select/index.scss
index 0476658dfe..c8e47177ec 100644
--- a/src/client/components/forms/field-types/Select/index.scss
+++ b/src/client/components/forms/field-types/Select/index.scss
@@ -20,6 +20,10 @@
         padding-top: 0;
         padding-bottom: 0;
       }
+
+      &--is-multi {
+        margin-left: - base(.25);
+      }
     }
 
     .rs__indicators {
@@ -35,6 +39,13 @@
       display: none;
     }
 
+    .rs__input {
+      input {
+        font-family: $font-brand;
+        width: 100% !important;
+      }
+    }
+
     .rs__menu {
       border-radius: 0;
       @extend %inputShadowActive;
@@ -54,6 +65,29 @@
         background-color: rgba($primary, .5);
       }
     }
+
+    .rs__multi-value {
+      padding: 0;
+      background: transparent;
+      border: $stroke-width solid $black;
+      line-height: base(.8);
+      margin: base(.475) base(.475) base(.475) 0;
+    }
+
+    .rs__multi-value__label {
+      @extend %uppercase-label;
+      padding: 0 base(.375);
+    }
+
+    .rs__multi-value__remove {
+      padding: 0 base(.25);
+      cursor: pointer;
+
+      &:hover {
+        color: $black;
+        background: rgba($error, .25);
+      }
+    }
   }
 
   &.error {
diff --git a/src/client/components/forms/useFieldType/index.js b/src/client/components/forms/useFieldType/index.js
index 1cc69af5c0..7f7fbf2e73 100644
--- a/src/client/components/forms/useFieldType/index.js
+++ b/src/client/components/forms/useFieldType/index.js
@@ -55,7 +55,7 @@ const useFieldType = (options) => {
     formSubmitted: submitted,
     formProcessing: processing,
     onFieldChange: (e) => {
-      if (e.target) {
+      if (e && e.target) {
         sendField(e.target.value);
       } else {
         sendField(e);
diff --git a/src/client/scss/type.scss b/src/client/scss/type.scss
index 7df365a2a2..ca953ea65e 100644
--- a/src/client/scss/type.scss
+++ b/src/client/scss/type.scss
@@ -78,8 +78,8 @@
 
 %uppercase-label {
   text-transform: uppercase;
-  letter-spacing: base(.1);
-  font-size: base(.3);
+  letter-spacing: base(.0875);
+  font-size: base(.325);
   font-family: $font-label;
   -webkit-font-smoothing: auto;
 
diff --git a/src/mongoose/schema/fieldToSchemaMap.js b/src/mongoose/schema/fieldToSchemaMap.js
index 0b96fdb0ba..337fb4b655 100644
--- a/src/mongoose/schema/fieldToSchemaMap.js
+++ b/src/mongoose/schema/fieldToSchemaMap.js
@@ -55,10 +55,7 @@ const fieldToSchemaMap = {
   },
   repeater: (field) => {
     const schema = {};
-    if (field.id === false) {
-      // eslint-disable-next-line no-underscore-dangle
-      schema._id = false;
-    }
+
     field.fields.forEach((subField) => {
       schema[subField.name] = fieldToSchemaMap[subField.type](subField);
     });