Use select componsition to style pf3 select

Author: Hyperkid123

packages/common/package.json

@@ -4,8 +4,7 @@
   "description": "Common components, helpers and other pieces of code",
   "license": "Apache-2.0",
   "main": "index.js",
-  "scripts": {
-  },
+  "scripts": {},
   "repository": "[email protected]:data-driven-forms/react-forms.git",
   "devDependencies": {
     "@babel/core": "^7.2.2",
@@ -47,7 +46,8 @@
     "webpack-merge": "^4.1.4"
   },
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.1.0"
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "react-select": "^3.0.8"
   },
   "peerDependencies": {
     "react": "^16.6.0",

packages/common/src/select/index.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import ReactSelect from 'react-select';
+import PropTypes from 'prop-types';
+
+class Select extends Component {
+  render() {
+    return (
+      <ReactSelect className={ this.props.classNamePrefix } { ...this.props } />
+    );
+  }
+}
+
+Select.propTypes = {
+  options: PropTypes.array,
+  onChange: PropTypes.func,
+  classNamePrefix: PropTypes.string.isRequired,
+};
+
+Select.defaultProps = {
+  options: [],
+};
+
+const DataDrivenSelect = ({ multi, ...props }) => {
+  const isMulti = props.isMulti || multi;
+  const closeMenuOnSelect = !isMulti;
+  return (
+    <Select
+      hideSelectedOptions={ false }
+      isMulti={ isMulti }
+      { ...props }
+      closeMenuOnSelect={ closeMenuOnSelect }
+    />
+  );
+};
+
+DataDrivenSelect.propTypes = {
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  multi: PropTypes.bool,
+  placeholder: PropTypes.string,
+  isMulti: PropTypes.bool,
+  classNamePrefix: PropTypes.string.isRequired,
+};
+
+DataDrivenSelect.defaultProps = {
+  placeholder: 'Choose...',
+  isSearchable: false,
+  isClearable: false,
+};
+
+export default DataDrivenSelect;

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

@@ -10,6 +10,22 @@ import wizardSchema from './demo-schemas/wizard-schema';
 import sandbox from './demo-schemas/sandbox';
 import Switch from "../src/form-fields/switch-field";
 
+const selectSchema = {
+  fields: [{
+    component: 'select-field',
+    name: 'select',
+    label: 'Select',
+    menuIsOpen: true,
+    options: [{
+      label: 'foo',
+      value: 123
+    }, {
+      label: 'bar',
+      value: 231
+    }]
+  }]
+}
+
 class App extends React.Component {
   render() {
     const initialValues = {
@@ -26,7 +42,7 @@ class App extends React.Component {
             schemaType="default"
             formFieldsMapper={formFieldsMapper}
             layoutMapper={layoutMapper}
-            schema={sandbox}
+            schema={selectSchema}
             onCancel={() => console.log('cancel')}
           />
         </Row>

packages/pf3-component-mapper/package.json

@@ -88,6 +88,7 @@
     ]
   },
   "dependencies": {
+    "clsx": "^1.0.4",
     "react-day-picker": "^7.3.2",
     "react-select": "^2.1.2"
   },

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

@@ -7,10 +7,14 @@ import MultipleChoiceList from './multiple-choice-list';
 import RequiredLabel from './required-label';
 import Switch from './switch-field';
 import { DateTimePicker } from './date-time-picker/date-time-picker';
-import Select from './select';
+
 import RagioGroup from './radio';
 import PlainText from './plain-text';
 
+import Select from '@data-driven-forms/common/src/select';
+import './select/react-select.scss';
+import Option from './select/option';
+
 const selectComponent = ({
   componentType,
   input,
@@ -51,6 +55,10 @@ const selectComponent = ({
   ),
   [componentTypes.SELECT_COMPONENT]: () => <div>
     <Select
+      components={{
+        Option,
+      }}
+      classNamePrefix="ddorg__pf3-component-mapper__select"
       loadOptions={ loadOptions }
       options={ options }
       invalid={ invalid }

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { components } from 'react-select';
+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,
+      'ddorg__pf3-component-mapper__select__option--is-selected': props.isSelected,
+    }) }>
+      <components.Option { ...props } />
+      { props.isSelected && (props.selectProps && !props.selectProps.isCheckbox) && <i className="selected-indicator fa fa-check"></i> }
+    </div>
+  );
+};
+
+Option.propTypes = {
+  isFocused: PropTypes.bool,
+  isSelected: PropTypes.bool,
+  getStyles: PropTypes.func.isRequired,
+  selectOption: PropTypes.func,
+  cx: PropTypes.func.isRequired,
+  data: PropTypes.shape({
+    selected: PropTypes.bool,
+  }),
+  innerProps: PropTypes.shape({
+    id: PropTypes.string,
+  }),
+  selectProps: PropTypes.shape({
+    isCheckbox: PropTypes.bool,
+  }),
+};
+
+Option.defaultProps = {
+  isFocused: false,
+  isSelected: false,
+  selectOption: () => undefined,
+  selectProps: {
+    isCheckbox: false,
+  },
+  innerProps: {
+    id: 'some-classname',
+  },
+};
+
+export default Option;

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

@@ -21,4 +21,33 @@ div.field-group {
   overflow: hidden;
   position: relative;
   width: 100%;
+}
+
+.ddorg__pf3-component-mapper__select {
+  .ddorg__pf3-component-mapper__select__option {
+    background-color: #ffffff;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 1px 0;
+    padding: 1px 10px;
+    font-weight: 400;
+    cursor: pointer;
+    display: flex;
+    >*:first-child {
+      flex-grow: 1;
+    }
+  }
+  .ddorg__pf3-component-mapper__select__option--is-focused {
+    color: #4d5258;
+    background-color: #edf8ff;
+  }
+  .ddorg__pf3-component-mapper__select__option--is-selected {
+    background-color: #0088ce;
+    border-color: #0088ce;
+    color: #fff;
+    >.selected-indicator {
+      flex-grow: 0;
+      align-self: center;
+    }
+  }
 }

yarn.lock

@@ -5295,17 +5295,18 @@ 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]:
+[email protected], commander@~2.17.1:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
+  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
 [email protected]:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@^2.11.0, commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@^2.8.1, commander@~2.20.3:
+commander@^2.11.0, commander@^2.18.0, commander@^2.19.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"
 
@@ -14670,7 +14671,7 @@ react-select@^2.1.2, react-select@^2.2.0:
     react-input-autosize "^2.2.1"
     react-transition-group "^2.2.1"
 
-react-select@^3.0.4:
+react-select@^3.0.4, react-select@^3.0.8:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.0.8.tgz#06ff764e29db843bcec439ef13e196865242e0c1"
   dependencies:
@@ -16040,9 +16041,10 @@ source-map-support@^0.4.15:
   dependencies:
     source-map "^0.5.6"
 
-source-map-support@^0.5.6, source-map-support@~0.5.10, source-map-support@~0.5.12:
+source-map-support@^0.5.6, source-map-support@~0.5.6:
   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==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -16721,21 +16723,14 @@ terser-webpack-plugin@^2.2.1:
     terser "^4.3.9"
     webpack-sources "^1.4.3"
 
-[email protected]:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.0.0.tgz#ef356f6f359a963e2cc675517f21c1c382877374"
-  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.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.4.0.tgz#22c46b4817cf4c9565434bfe6ad47336af259ac3"
+[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==
   dependencies:
-    commander "^2.20.0"
+    commander "~2.17.1"
     source-map "~0.6.1"
-    source-map-support "~0.5.12"
+    source-map-support "~0.5.6"
 
 test-exclude@^4.2.1:
   version "4.2.3"