wip

stipsan · Aug 7, 2016 · 0076b3f · 0076b3f
1 parent 7857328
commit 0076b3f
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 39 deletions.
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -21,9 +21,12 @@ module.exports = {
   },
   module: {
     loaders: [
-      { test: /\.scss$/, loader: ExtractTextPlugin.extract(
-        'style-loader', 'css!postcss!sass?sourceMap'
-      ) },
+      {
+        test: /\.scss$/,
+        loader: ExtractTextPlugin.extract(
+          'style-loader', 'css!postcss!sass?sourceMap'
+        ),
+      },
       { test: /\.css$/, loaders: ['style', 'css'] },
       { test: /\.svg$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
       {

diff --git a/package.json b/package.json
@@ -46,8 +46,8 @@
   },
   "homepage": "https://github.com/stipsan/uikit-react",
   "devDependencies": {
-    "@kadira/react-storybook-addon-info": "3.1.1",
-    "@kadira/storybook": "2.1.1",
+    "@kadira/react-storybook-addon-info": "3.1.2",
+    "@kadira/storybook": "2.2.0",
     "@kadira/storybook-deployer": "1.0.0",
     "autoprefixer": "6.4.0",
     "babel-cli": "6.11.4",

diff --git a/src/Select/CreateOption.js b/src/Select/CreateOption.js
@@ -0,0 +1,21 @@
+import classNames from 'classnames'
+import { PropTypes } from 'react'
+
+const CreateOption = ({ isFocused, addLabelText, children }) => (
+  <li className={classNames({ 'uk-active': isFocused })}>
+    <a>
+      {addLabelText}&nbsp;
+      <span className="uk-text-bold">
+        {children}
+      </span>
+    </a>
+  </li>
+)
+
+CreateOption.propTypes = {
+  isFocused: PropTypes.bool.isRequired,
+  addLabelText: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+}
+
+export default CreateOption
diff --git a/src/Select/Value.js b/src/Select/Value.js
@@ -91,7 +91,7 @@ export default class Value extends Component {
   render() {
     return (
       <div
-        className={classNames('uk-component-select__values', this.props.value.className)}
+        className={classNames('uk-component-select__value', this.props.value.className)}
         style={this.props.value.style}
         title={this.props.value.title}
       >

diff --git a/src/Select/index.js b/src/Select/index.js
@@ -1,8 +1,9 @@
 import classNames from 'classnames'
 import Input from 'react-input-autosize'
 import ReactDOM from 'react-dom'
-import React, { Component, PropTypes } from 'react'
+import { Component, PropTypes } from 'react'
 
+import CreateOption from './CreateOption'
 import Option from './Option'
 import Value from './Value'
 
@@ -24,7 +25,7 @@ export default class Select extends Component {
 
   static propTypes = {
     addItemOnKeyCode: PropTypes.number,   // The key code number that should trigger adding
-    addLabelText: PropTypes.string,       // placeholder displayed when you want to add a
+    addLabelText: PropTypes.string.isRequired,       // placeholder displayed when you want to add a
     allowCreate: PropTypes.bool,          // whether to allow creation of new entries
     'aria-label': PropTypes.string,       // Aria label (for assistive tech)
     'aria-labelledby': PropTypes.string,  // HTML ID of an element that should be used as
@@ -90,7 +91,7 @@ export default class Select extends Component {
   }
 
   static defaultProps = {
-    addLabelText: 'Add "{label}"?',
+    addLabelText: 'Create:',
     addItemOnKeyCode: null,
     autosize: true,
     allowCreate: false,
@@ -120,7 +121,7 @@ export default class Select extends Component {
     pageSize: 5,
     placeholder: 'Select...',
     required: false,
-    resetValue: null,
+    resetValue: { value: null, label: null },
     scrollMenuIntoView: true,
     searchable: true,
     simpleValue: false,
@@ -673,7 +674,9 @@ export default class Select extends Component {
   }
 
   renderLoading() {
-    if (!this.props.isLoading) return
+    if (!this.props.isLoading) {
+      return false
+    }
     return (
       <span className="Select-loading-zone" aria-hidden="true">
         <span className="Select-loading" />
@@ -792,15 +795,13 @@ export default class Select extends Component {
   renderClear() {
     if (!this.props.clearable || !this.props.value || (this.props.multi && !this.props.value.length) || this.props.disabled || this.props.isLoading) return
     return (
-      <span className="Select-clear-zone" title={this.props.multi ? this.props.clearAllText : this.props.clearValueText}
+      <span className="uk-close" title={this.props.multi ? this.props.clearAllText : this.props.clearValueText}
         aria-label={this.props.multi ? this.props.clearAllText : this.props.clearValueText}
         onMouseDown={this.clearValue}
         onTouchStart={this.handleTouchStart}
         onTouchMove={this.handleTouchMove}
         onTouchEnd={this.handleTouchEndClearValue}
-      >
-        <span className="Select-clear" dangerouslySetInnerHTML={{ __html: '&times;' }} />
-      </span>
+      />
     )
   }
 
@@ -853,6 +854,9 @@ export default class Select extends Component {
           addNewOption = false
         }
       })
+      if (addNewOption) {
+        filteredOptions.unshift(this.createNewOption(originalFilterValue))
+      }
     }
     return filteredOptions
   }
@@ -869,10 +873,13 @@ export default class Select extends Component {
           valueArray,
         })
       } else {
-        let Option = this.props.optionComponent
+        let OptionComponent = this.props.optionComponent
         const renderLabel = this.props.optionRenderer || this.getOptionLabel
 
         return options.map((option, i) => {
+          if (option.create) {
+            return false
+          }
           let isSelected = valueArray && valueArray.indexOf(option) > -1
           let isFocused = option === focusedOption
           let optionRef = isFocused ? 'focused' : null
@@ -884,7 +891,7 @@ export default class Select extends Component {
           })
 
           return (
-            <Option
+            <OptionComponent
               instancePrefix={this._instancePrefix}
               optionIndex={i}
               className={optionClass}
@@ -899,7 +906,7 @@ export default class Select extends Component {
               ref={optionRef}
             >
               {renderLabel(option)}
-            </Option>
+            </OptionComponent>
           )
         })
       }
@@ -963,7 +970,9 @@ export default class Select extends Component {
       return null
     }
 
-    const allowCreate = this.props.allowCreate && this.state.inputValue.trim()
+    const createOption = options && options[0] && options[0].create && options[0]
+
+    const allowCreate = this.props.allowCreate && this.state.inputValue.trim() && createOption
 
     return (
       <div ref="menuContainer" className="uk-dropdown">
@@ -976,13 +985,14 @@ export default class Select extends Component {
           onScroll={this.handleMenuScroll}
           onMouseDown={this.handleMouseDownOnMenu}
         >
-          {allowCreate && <li className="uk-skip">
-            <a>
-              Create: <span className="uk-button uk-button-small uk-button-primary uk-margin-bottom-remove">
-                {this.state.inputValue}
-              </span>
-            </a>
-          </li>}
+          {allowCreate && (
+            <CreateOption
+              isFocused={focusedOption && focusedOption.create}
+              addLabelText={this.props.addLabelText}
+            >
+              {createOption.label}
+            </CreateOption>
+          )}
           {allowCreate && options.length > 0 && <li className="uk-nav-divider uk-skip" />}
           {menu}
         </ul>

diff --git a/src/scss/Select.scss b/src/scss/Select.scss
@@ -7,6 +7,13 @@
   * {
     box-sizing: border-box;
   }
+
+  .uk-close {
+    position: absolute;
+    top: $form-border-width;
+    right: $form-border-width;
+    padding: $form-padding;
+  }
 }
 
 .uk-component-select__control {
@@ -57,19 +64,38 @@
       color: $form-disabled-color;
       @include hook-form-disabled();
   }
+
+  // Selected value state
+  .has-value & {
+    padding-right: 5px;
+  }
 }
 
 .uk-component-select__values,
 .uk-component-select__value {
   display: inline-block;
 }
 
+.uk-component-select__values {
+  position: relative;
+  padding: $form-padding;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.uk-component-select__value {
+  padding: $form-padding;
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .uk-component-select__placeholder {
   color: $form-placeholder-color;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
+  padding: $form-padding;
 }
 
 .uk-component-select__input {
@@ -79,6 +105,8 @@
   > input {
     /* stylelint-disable no-important */
     height: initial !important;
+    border-width: 0px !important;
+    padding-left: 0px !important;
     /* stylelint-enable */
 
     border-color: transparent !important;

diff --git a/src/stories/Select.js b/src/stories/Select.js
@@ -6,17 +6,20 @@ import { cloneElement, Component } from 'react'
 import { Select } from 'uikit-react'
 
 class Form extends Component {
+  static props = {
+    defaultValue: null,
+  }
   state = {
-    value: '',
+    value: this.props.defaultValue,
   }
   logChange = action('onChange')
-  handleChange = ({ value }) => {
+  handleChange = value => {
     this.setState({ value })
     this.logChange(value)
   }
   render() {
     return (
-      <form className="uk-form">
+      <form className="uk-form uk-width-1-2">
         {cloneElement(this.props.children, {
           value: this.state.value,
           onChange: this.handleChange,
@@ -33,16 +36,29 @@ storiesOf('Select', module)
       This is the basic usage examples
     `,
     () => (
-      <Form>
-        <Select
-          allowCreate
-          options={[
-            { value: 1, label: 'Color' },
-            { value: 2, label: 'Size' },
-            { value: 3, label: 'Material' },
-          ]}
-        />
-      </Form>
+      <div className="uk-grid">
+        <Form>
+          <Select
+            allowCreate
+            options={[
+              { value: 1, label: 'Color' },
+              { value: 2, label: 'Size' },
+              { value: 3, label: 'Material' },
+            ]}
+          />
+        </Form>
+        <Form defaultValue={[]}>
+          <Select
+            allowCreate
+            multi
+            options={[
+              { value: 1, label: 'Red' },
+              { value: 2, label: 'Green' },
+              { value: 3, label: 'Blue' },
+            ]}
+          />
+        </Form>
+      </div>
   ),
   { inline: true, propTables: [/* Value, Option, */Select] }
 )