Merge pull request #21 from jasontwong/feature-select-knob

Feature Select Knob

.gitignore

@@ -1,4 +1,4 @@
 node_modules
 *.log
 .idea
-dist
+.tern-port

README.md

@@ -125,3 +125,21 @@ const value = object(label, defaultValue);
 ```
 
 > Make sure to enter valid JSON syntax while editing values inside the knob.
+
+### select
+
+Allows you to get a value from a select box from the user.
+
+```js
+const label = 'Colors';
+const colors = {
+  red: 'Red',
+  blue: 'Blue',
+  yellow: 'Yellow',
+};
+const defaultValue = 'red';
+
+const value = select(label, colors, defaultValue);
+```
+
+> Also supports array syntax: ['red', 'blue', 'yellow']

dist/components/types/Select.js

@@ -0,0 +1,140 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _keys = require('babel-runtime/core-js/object/keys');
+
+var _keys2 = _interopRequireDefault(_keys);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactTextareaAutosize = require('react-textarea-autosize');
+
+var _reactTextareaAutosize2 = _interopRequireDefault(_reactTextareaAutosize);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {
+  display: 'table-cell',
+  boxSizing: 'border-box',
+  verticalAlign: 'middle',
+  height: '26px',
+  width: '100%',
+  outline: 'none',
+  border: '1px solid #f7f4f4',
+  borderRadius: 2,
+  fontSize: 11,
+  padding: '5px',
+  color: '#555'
+};
+
+var SelectType = function (_React$Component) {
+  (0, _inherits3.default)(SelectType, _React$Component);
+
+  function SelectType() {
+    (0, _classCallCheck3.default)(this, SelectType);
+    return (0, _possibleConstructorReturn3.default)(this, (SelectType.__proto__ || (0, _getPrototypeOf2.default)(SelectType)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(SelectType, [{
+    key: '_makeOpt',
+    value: function _makeOpt(key, val, selected) {
+      var opts = {
+        key: key,
+        selected: 'selected',
+        value: key
+      };
+      if (selected !== key) {
+        delete opts.selected;
+      }
+
+      return _react2.default.createElement(
+        'option',
+        opts,
+        val
+      );
+    }
+  }, {
+    key: '_options',
+    value: function _options(values) {
+      var _this2 = this;
+
+      var selected = arguments.length <= 1 || arguments[1] === undefined ? '' : arguments[1];
+
+      var data = [];
+      if (Array.isArray(values)) {
+        data = values.map(function (val) {
+          return _this2._makeOpt(val, val, selected);
+        });
+      } else {
+        data = (0, _keys2.default)(values).map(function (key) {
+          return _this2._makeOpt(key, values[key], selected);
+        });
+      }
+
+      return data;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props;
+      var knob = _props.knob;
+      var _onChange = _props.onChange;
+
+
+      return _react2.default.createElement(
+        'select',
+        {
+          id: knob.name,
+          ref: 'input',
+          style: styles,
+          value: knob.value,
+          onChange: function onChange(e) {
+            return _onChange(e.target.value);
+          }
+        },
+        this._options(knob.options)
+      );
+    }
+  }]);
+  return SelectType;
+}(_react2.default.Component);
+
+SelectType.propTypes = {
+  knob: _react2.default.PropTypes.object,
+  onChange: _react2.default.PropTypes.func
+};
+
+SelectType.serialize = function (value) {
+  return value;
+};
+
+SelectType.deserialize = function (value) {
+  return value;
+};
+
+exports.default = SelectType;

dist/components/types/index.js

@@ -20,11 +20,16 @@ var _Object = require('./Object');
 
 var _Object2 = _interopRequireDefault(_Object);
 
+var _Select = require('./Select');
+
+var _Select2 = _interopRequireDefault(_Select);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.default = {
   text: _Text2.default,
   number: _Number2.default,
   boolean: _Boolean2.default,
-  object: _Object2.default
+  object: _Object2.default,
+  select: _Select2.default
 };

dist/index.js

@@ -8,6 +8,7 @@ exports.text = text;
 exports.boolean = boolean;
 exports.number = number;
 exports.object = object;
+exports.select = select;
 exports.withKnobs = withKnobs;
 
 var _storybookAddons = require('@kadira/storybook-addons');
@@ -42,6 +43,10 @@ function object(name, value) {
   return manager.knob(name, { type: 'object', value: value });
 }
 
+function select(name, options, value) {
+  return manager.knob(name, { type: 'select', options: options, value: value });
+}
+
 function withKnobs(storyFn, context) {
   var channel = _storybookAddons2.default.getChannel();
   return manager.wrapStory(channel, storyFn, context);

example/stories/Button.js

@@ -11,7 +11,7 @@ const buttonStyles = {
 
 const Button = ({ onClick, style, color, width, children, disabled }) => (
   <button
-    style={{ ...buttonStyles, ...{ backgroundColor: color, width: `${width}px` }, ...style }}
+    style={{ ...buttonStyles, ...{ color, width: `${width}px` }, ...style }}
     onClick={onClick}
     disabled={disabled}
   >

example/stories/index.js

@@ -7,6 +7,7 @@ import {
   object,
   boolean,
   text,
+  select,
 } from '../../src';
 
 import Button from './Button';
@@ -17,6 +18,7 @@ storiesOf('Button', module)
     <Button
       onClick={ action('button clicked') }
       disabled={ boolean('Disabled', false) }
+      color={ select('Height', { red: 'Red', blue: 'Blue', yellow: 'Yellow' }, 'red') }
       width={ number('Width', 100) }
       style={ object('Style', { backgroundColor: '#FFF' }) }
     >

src/components/types/Select.js

@@ -0,0 +1,70 @@
+import React from 'react';
+
+const styles = {
+  display: 'table-cell',
+  boxSizing: 'border-box',
+  verticalAlign: 'middle',
+  height: '26px',
+  width: '100%',
+  outline: 'none',
+  border: '1px solid #f7f4f4',
+  borderRadius: 2,
+  fontSize: 11,
+  padding: '5px',
+  color: '#555',
+};
+
+class SelectType extends React.Component {
+  _makeOpt(key, val, selected) {
+    const opts = {
+      key,
+      selected: 'selected',
+      value: key,
+    };
+    if (selected !== key) {
+      delete(opts.selected);
+    }
+
+    return <option {...opts}>{val}</option>;
+  }
+  _options(values, selected = '') {
+    let data = [];
+    if (Array.isArray(values)) {
+      data = values.map(val => this._makeOpt(val, val, selected));
+    } else {
+      data = Object.keys(values).map(key => this._makeOpt(key, values[key], selected));
+    }
+
+    return data;
+  }
+  render() {
+    const { knob, onChange } = this.props;
+
+    return (
+      <select
+        id={knob.name}
+        ref="input"
+        style={styles}
+        value={knob.value}
+        onChange={(e) => onChange(e.target.value)}
+      >
+        {this._options(knob.options)}
+      </select>
+    );
+  }
+}
+
+SelectType.propTypes = {
+  knob: React.PropTypes.object,
+  onChange: React.PropTypes.func,
+};
+
+SelectType.serialize = function (value) {
+  return value;
+};
+
+SelectType.deserialize = function (value) {
+  return value;
+};
+
+export default SelectType;

src/components/types/index.js

@@ -2,10 +2,12 @@ import TextType from './Text';
 import NumberType from './Number';
 import BooleanType from './Boolean';
 import ObjectType from './Object';
+import SelectType from './Select';
 
 export default {
   text: TextType,
   number: NumberType,
   boolean: BooleanType,
   object: ObjectType,
+  select: SelectType,
 };

src/index.js

@@ -23,6 +23,10 @@ export function object(name, value) {
   return manager.knob(name, { type: 'object', value });
 }
 
+export function select(name, options, value) {
+  return manager.knob(name, { type: 'select', options, value });
+}
+
 export function withKnobs(storyFn, context) {
   const channel = addons.getChannel();
   return manager.wrapStory(channel, storyFn, context);