Create dashboard with Icon Picker

client/src/components/Home/IconPicker.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import Autocomplete from 'react-md/lib/Autocompletes';
+import FontIcon from 'react-md/lib/FontIcons';
+
+import icons from '../../constants/icons';
+
+const styles = {
+  list: {
+    height: '136px',
+  } as React.CSSProperties
+};
+
+interface IIconPickerProps {
+  defaultIcon?: string;
+  defaultLabel?: string;
+}
+
+interface IIconPickerState {
+  label: string;
+  icon: string;
+  filterType: any;
+}
+
+export default class IconPicker extends React.Component<IIconPickerProps, IIconPickerState> {
+
+  static defaultProps = {
+    defaultLabel: 'Search icons',
+    defaultIcon: 'dashboard',
+  };
+
+  static listItems: any = [];
+
+  constructor(props: any) {
+    super(props);
+
+    const { defaultLabel, defaultIcon } = props;
+
+    this.state = {
+      label: defaultLabel,
+      icon: defaultIcon,
+      filterType: Autocomplete.caseInsensitiveFilter,
+    };
+
+    this.onChange = this.onChange.bind(this);
+  }
+
+  getIcon() {
+    const { icon } = this.state;
+    // check icon value is valid
+    if ( icons.findIndex(i => i === icon) > 0 ) {
+      return icon;
+    }
+    return 'dashboard';
+  }
+
+  componentWillMount() {
+    if (IconPicker.listItems.length === 0) {
+      IconPicker.listItems = icons.map((icon, i) => ({ icon, leftIcon: <FontIcon key="icon">{icon}</FontIcon> }));
+    }
+  }
+
+  render() {
+    const { label, filterType, icon } = this.state;
+    return (
+      <Autocomplete
+        id="icon"
+        label={label}
+        className="md-cell--stretch"
+        data={IconPicker.listItems}
+        dataLabel={'icon'}
+        listStyle={styles.list}
+        value={icon}
+        onChange={this.onChange}
+        onAutocomplete={this.onChange}
+      />
+    );
+  }
+
+  private onChange(icon: string) {
+    this.setState({ icon });
+  }
+}

client/src/components/Home/index.tsx

@@ -16,6 +16,7 @@ import ConfigurationStore from '../../stores/ConfigurationsStore';
 import ConfigurationsActions from '../../actions/ConfigurationsActions';
 import utils from '../../utils';
 
+import IconPicker from './IconPicker';
 import { downloadBlob } from '../Dashboard/DownloadFile';
 
 const renderHTML = require('react-render-html');
@@ -187,7 +188,7 @@ export default class Home extends React.Component<any, IHomeState> {
     let createParams = {
       id: this._fieldId.getField().value,
       name: this._fieldName.getField().value,
-      icon: this._fieldIcon.getField().value,
+      icon: this._fieldIcon.getIcon(),
       url: this._fieldId.getField().value
     };
 
@@ -419,6 +420,10 @@ export default class Home extends React.Component<any, IHomeState> {
             { onClick: this.onNewTemplateSave, primary: true, label: 'Create', },
           ]}
         >
+          <IconPicker 
+            ref={field => this._fieldIcon = field}
+            defaultLabel="Dashboard Icon" 
+            defaultIcon={template && template.icon || 'dashboard'} />
           <TextField
             id="id"
             ref={field => this._fieldId = field}
@@ -437,14 +442,6 @@ export default class Home extends React.Component<any, IHomeState> {
             lineDirection="center"
             placeholder="Choose name for the dashboard (will be used in navigation)"
           />
-          <TextField
-            id="icon"
-            ref={field => this._fieldIcon = field}
-            label="Dashboard Icon"
-            defaultValue={template && template.icon || 'dashboard'}
-            lineDirection="center"
-            placeholder="Choose icon for the dashboard (will be used in navigation)"
-          />
         </Dialog>
       </div>
     );