Added pf3 select indicators styling

Author: Hyperkid123

packages/common/package.json

@@ -47,6 +47,7 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "clsx": "^1.0.4",
     "react-select": "^3.0.8"
   },
   "peerDependencies": {

packages/common/src/select/index.js

@@ -1,11 +1,15 @@
 import React, { Component } from 'react';
 import ReactSelect from 'react-select';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 
 class Select extends Component {
   render() {
+    console.log(this.props.invalid)
     return (
-      <ReactSelect className={ this.props.classNamePrefix } { ...this.props } />
+      <ReactSelect className={ clsx(this.props.classNamePrefix, {
+        'has-error': this.props.invalid,
+      }) } { ...this.props } />
     );
   }
 }
@@ -14,10 +18,12 @@ Select.propTypes = {
   options: PropTypes.array,
   onChange: PropTypes.func,
   classNamePrefix: PropTypes.string.isRequired,
+  invalid: PropTypes.bool,
 };
 
 Select.defaultProps = {
   options: [],
+  invalid: false,
 };
 
 const DataDrivenSelect = ({ multi, ...props }) => {

packages/pf3-component-mapper/demo/index.js

@@ -15,7 +15,13 @@ const selectSchema = {
     component: 'select-field',
     name: 'select',
     label: 'Select',
+    isRequired: true,
+    validateOnMount: true,
     menuIsOpen: true,
+    isClearable: true,
+    validate: [{
+      type: 'required-validator'
+    }],
     options: [{
       label: 'foo',
       value: 123

packages/pf3-component-mapper/src/form-fields/form-fields.js

@@ -14,6 +14,8 @@ import PlainText from './plain-text';
 import Select from '@data-driven-forms/common/src/select';
 import './select/react-select.scss';
 import Option from './select/option';
+import DropdownIndicator from './select/dropdown-indicator';
+import ClearIndicator from './select/clear-indicator';
 
 const selectComponent = ({
   componentType,
@@ -56,12 +58,14 @@ const selectComponent = ({
   [componentTypes.SELECT_COMPONENT]: () => <div>
     <Select
       components={{
+        ClearIndicator,
         Option,
+        DropdownIndicator,
       }}
       classNamePrefix="ddorg__pf3-component-mapper__select"
       loadOptions={ loadOptions }
       options={ options }
-      invalid={ invalid }
+      invalid={ !!invalid }
       input={ input }
       placeholder={ placeholder }
       isSearchable={ isSearchable }

packages/pf3-component-mapper/src/form-fields/select/clear-indicator.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ClearIndicator = ({
+  clearValue,
+  innerProps: { ref, ...restInnerProps },
+}) => (
+  <button { ...restInnerProps } onClick={ clearValue } className="ddorg__pf3-component-mapper__select__close-indicator">
+    <i className="fa fa-times" />
+  </button>
+);
+
+ClearIndicator.propTypes = {
+  innerProps: PropTypes.object.isRequired,
+  clearValue: PropTypes.func,
+};
+
+ClearIndicator.defaultProps = {
+  clearValue: () => undefined,
+};
+
+export default ClearIndicator;

packages/pf3-component-mapper/src/form-fields/select/dropdown-indicator.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// TODO find icon for loading spinner
+
+const DropdownIndicator = ({ selectProps: { isFetching }}) => isFetching
+  ? <i className="ddorg__pf3-component-mapper__select__dropdown-indicator fa fa-angle-down" />
+  : <i className="ddorg__pf3-component-mapper__select__dropdown-indicator fa fa-angle-down"/>;
+
+DropdownIndicator.propTypes = {
+  selectProps: PropTypes.shape({
+    isFetching: PropTypes.bool,
+  }).isRequired,
+};
+
+export default DropdownIndicator;

packages/pf3-component-mapper/src/form-fields/select/option.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
 const Option = (props) => {
-  console.log(props);
   return (
     <div className={ clsx('ddorg__pf3-component-mapper__select__option', {
       'ddorg__pf3-component-mapper__select__option--is-focused': props.isFocused,

packages/pf3-component-mapper/src/form-fields/select/react-select.scss

@@ -24,6 +24,49 @@ div.field-group {
 }
 
 .ddorg__pf3-component-mapper__select {
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
+  padding: 0;
+  border: 1px solid transparent;
+  border-color: rgb(187, 187, 187);
+  display: inline-flex;
+  min-width: 250px;
+  max-width: calc(100% - 2px);
+  &.has-error {
+    border: 1px solid;
+    border-color: #cc0000;
+  }
+  .ddorg__pf3-component-mapper__select__control {
+    border: none;
+    width: 100%;
+    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    box-shadow: 0 2px 3px rgba(3, 3, 3, 0.1);
+    padding: 0;
+    min-height: initial;
+    background-color: #f1f1f1;
+    color: #4d5258;
+    background-image: linear-gradient(to bottom, #fafafa 0%, #ededed 100%);
+    background-repeat: repeat-x;
+    cursor: pointer;
+    white-space: nowrap;
+    font-size: 12px;
+    border-radius: 1px;
+    font-weight: 600;
+    &:hover {
+      background-color: #f1f1f1;
+      background-image: none;
+      border-color: #bbbbbb;
+      color: #4d5258;
+    }
+  }
+  .ddorg__pf3-component-mapper__select__menu {
+    background: #fff;
+    margin: 0;
+    margin-top: 8px;
+    border-radius: 0;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
   .ddorg__pf3-component-mapper__select__option {
     background-color: #ffffff;
     border-color: transparent;
@@ -50,4 +93,21 @@ div.field-group {
       align-self: center;
     }
   }
+  .ddorg__pf3-component-mapper__select__indicator-separator {
+    display: none;
+  }
+  .ddorg__pf3-component-mapper__select__indicators {
+    padding: 0;
+    padding-right: 8px;
+    &:hover {
+      color: rgb(77, 82, 88),
+    };
+  }
+  .ddorg__pf3-component-mapper__select__close-indicator {
+    margin-right: 4px;
+    padding: 0;
+    color: #4d5258;
+    background: none;
+    border: none;
+  }
 }

yarn.lock

@@ -5295,7 +5295,7 @@ comma-separated-tokens@^1.0.0:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.7.tgz#419cd7fb3258b1ed838dc0953167a25e152f5b59"
 
-[email protected], commander@~2.17.1:
+[email protected]:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
@@ -5306,7 +5306,7 @@ [email protected]:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@^2.11.0, commander@^2.18.0, commander@^2.19.0, commander@^2.8.1, commander@~2.20.3:
+commander@^2.11.0, commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@^2.8.1, commander@~2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
 
@@ -16041,7 +16041,7 @@ source-map-support@^0.4.15:
   dependencies:
     source-map "^0.5.6"
 
-source-map-support@^0.5.6, source-map-support@~0.5.6:
+source-map-support@^0.5.6, source-map-support@~0.5.10, source-map-support@~0.5.12:
   version "0.5.16"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
   integrity sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==
@@ -16723,14 +16723,23 @@ terser-webpack-plugin@^2.2.1:
     terser "^4.3.9"
     webpack-sources "^1.4.3"
 
-[email protected], [email protected], terser@^4.1.0, terser@^4.1.2, terser@^4.3.9:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-3.14.1.tgz#cc4764014af570bc79c79742358bd46926018a32"
-  integrity sha512-NSo3E99QDbYSMeJaEk9YW2lTg3qS9V0aKGlb+PlOrei1X02r1wSBHCNX/O+yeTRFSWPKPIGj6MqvvdqV4rnVGw==
+[email protected]:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.0.0.tgz#ef356f6f359a963e2cc675517f21c1c382877374"
+  integrity sha512-dOapGTU0hETFl1tCo4t56FN+2jffoKyER9qBGoUFyZ6y7WLoKT0bF+lAYi6B6YsILcGF3q1C2FBh8QcKSCgkgA==
+  dependencies:
+    commander "^2.19.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.10"
+
+terser@^4.1.0, terser@^4.1.2, terser@^4.3.9:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.4.3.tgz#401abc52b88869cf904412503b1eb7da093ae2f0"
+  integrity sha512-0ikKraVtRDKGzHrzkCv5rUNDzqlhmhowOBqC0XqUHFpW+vJ45+20/IFBcebwKfiS2Z9fJin6Eo+F1zLZsxi8RA==
   dependencies:
-    commander "~2.17.1"
+    commander "^2.20.0"
     source-map "~0.6.1"
-    source-map-support "~0.5.6"
+    source-map-support "~0.5.12"
 
 test-exclude@^4.2.1:
   version "4.2.3"