Add a MagicSelect

asset-manifest.json

@@ -0,0 +1,5 @@
+{
+  "http://localhost:3000/main.js": "http://localhost:3000/static/js/bundle.js",
+  "http://localhost:3000/main.js.map": "http://localhost:3000/static/js/bundle.js.map",
+  "http://localhost:3000/static/media/logo.svg": "http://localhost:3000/static/media/logo.83748054.svg"
+}

package.json

@@ -1,10 +1,11 @@
 {
   "name": "@caldera-labs/components",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "dependencies": {
     "@helpdotcom/is": "^3.0.4",
     "classnames": "^2.2.6",
-    "downshift": "^1.31.16"
+    "downshift": "^1.31.16",
+    "react-autocomplete": "^1.8.1"
   },
   "license": "GPL-2.0",
   "scripts": {

src/App.js

@@ -4,6 +4,7 @@ import './App.css';
 import {FieldGroup} from "./components/fields/FieldGroup";
 import {fieldSetFactory} from "./components/fields/factories/fieldSetFactory";
 import {RenderGroup} from "./components/RenderGroup";
+import {MagicSelect} from "./components/fields/magic-select/MagicSelect";
 
 let textFieldValue = 'Roy,Mike';
 const textFieldConfig = {
@@ -98,7 +99,8 @@ const configFields = [
 	textFieldConfig,
 	hiddenFieldConfig,
 	selectFieldConfig,
-	fieldSetField
+	fieldSetField,
+	numberFieldConfig
 ];
 const configFieldEls = fieldSetFactory(configFields);
 
@@ -141,6 +143,25 @@ class App extends Component {
 					})}
 				</div>
 
+				<div>
+					<h2>Magic Select</h2>
+					<MagicSelect
+						id={'magic-3'}
+						fieldClassName={'magic'}
+						onValueChange={() => {}}
+						options={[
+							{
+								label: 'HTML',
+								value: 'html'
+							},
+							{
+								label: 'Plain Text',
+								value: 'plain'
+							}
+						]}
+					/>
+				</div>
+
 				<div>
 					<h2>Inputs</h2>
 					<FieldGroup

src/components/fields/FieldInner.js

@@ -40,6 +40,7 @@ export const FieldInner = (props) => {
 	switch( props.type ){
 	case 'select':
 	case 'dropdown':
+		const options = Array.isArray(props.options) ? props.options : [];
 		return (
 			<SelectField
 				id={props.id}
@@ -48,7 +49,7 @@ export const FieldInner = (props) => {
 				value={props.value}
 				onValueChange={props.onValueChange}
 				inputType={props.inputType}
-				options={props.options}
+				options={options}
 				disabled={props.disabled}
 				onBlur={props.onBlur}
 				onFocus={props.onFocus}

src/components/fields/factories/__snapshots__/fieldFactory.test.js.snap

@@ -47,8 +47,10 @@ exports[`Factories Field set factory Renders with elements 1`] = `
       >
         <option
           className="caldera-config-option"
-          value={undefined}
-        />
+          value={null}
+        >
+          -- Select --
+        </option>
       </select>
     </div>
   </div>

src/components/fields/factories/fieldFactory.test.js

@@ -35,7 +35,10 @@ const configFields = [
 		'id': 'pid-1',
 		'label': 'Sequence',
 		'type': 'dropdown',
-		'options': ['-- Select A ConvertKit Sequence --'],
+		'options': [{
+			value: null,
+			label:'-- Select --'
+		}],
 		'desc': 'ConvertKit sequence to add subscriber to. Sequences are also referred to as courses.',
 		'description': false,
 		'extra_classes': 'field-Something is wrong',
@@ -368,7 +371,6 @@ describe('Factories', () => {
 			);
 			expect(wrapper.children()).toHaveLength(configFields.length);
 			expect(wrapper.find('.f-1')).toHaveLength(1);
-			expect(wrapper.find('.f-1').text()).toBe('Sequence');
 		});
 
 

src/components/fields/magic-select/MagicItem.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+	optionShape
+} from '../propTypes';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+/**
+ * Create magic item for option of magic selects
+ *
+ * This can not be a functional component
+ * https://github.com/reactjs/react-autocomplete/pull/293#issuecomment-371617758
+ *
+ *
+ * @param {Object} props
+ * @return {*}
+ * @constructor
+ */
+export class MagicItem extends React.PureComponent {
+
+	render() {
+		return React.createElement(
+			this.props.elementType,
+			{
+				style: {background: this.props.isHighlighted ? this.props.highlightColor : this.props.notHighlighterColor},
+				className: classNames(this.props.className, 'magic-input-option'),
+
+			},
+			(
+				<React.Fragment>
+					<span
+						className={classNames('magic-item-label', 'magic-item-left')}
+
+					>
+						{this.props.item.value}
+					</span>
+
+					<span
+						className={classNames('magic-item-value', 'magic-item-right')}
+					>
+						{this.props.item.label}
+					</span>
+				</React.Fragment>
+			)
+		);
+	}
+};
+
+/**
+ * Prop definition for allowed element types
+ * @type {shim}
+ */
+const elemenetTypesProp = PropTypes.oneOf(['div', 'span']);
+/**
+ * Prop definitions for MagicItem component
+ *
+ * @type {{item: shim, isHighlighted: shim, className: shim, highlightColor: shim, notHighlighterColor: shim}}
+ */
+MagicItem.propTypes = {
+	elementType: elemenetTypesProp,
+	innerElementType: elemenetTypesProp,
+	item: PropTypes.shape(optionShape),
+	isHighlighted: PropTypes.bool,
+	className: PropTypes.string,
+	highlightColor: PropTypes.string,
+	notHighlighterColor: PropTypes.string
+};
+
+/**
+ * Default props for the MagicItem component
+ *
+ * @type {{isHighlighted: boolean, highlightColor: string, notHighlightedColor: string}}
+ */
+MagicItem.defaultProps = {
+	elementType: 'div',
+	innerElementType: 'div',
+	isHighlighted: false,
+	highlightColor: 'lightgray',
+	notHighlightedColor: 'white',
+};

src/components/fields/magic-select/MagicItem.test.js

@@ -0,0 +1,38 @@
+import renderer from 'react-test-renderer';
+import React from 'react';
+import {MagicItem} from './MagicItem';
+
+
+describe('MagicSelect component', () => {
+
+	it('Matches snapshot', () => {
+		const component = renderer.create(
+			<MagicItem
+				item={{
+					label: 'HTML',
+					value: 'html'
+				}}
+				highlightColor={'#fff00'}
+				notHighlighterColor={'white'}
+				isHighlighted={true}
+			/>
+		);
+		expect(component.toJSON()).toMatchSnapshot();
+	});
+
+	it('Can render as span', () => {
+		const component = renderer.create(
+			<MagicItem
+				item={{
+					label: 'HTML',
+					value: 'html'
+				}}
+				highlightColor={'#fff00'}
+				notHighlighterColor={'white'}
+				isHighlighted={true}
+				elementType={'span'}
+			/>
+		);
+		expect(component.toJSON()).toMatchSnapshot();
+	});
+});