Update button component

bokuweb · Jun 10, 2016 · 8e627e4 · 8e627e4
1 parent a6a9d15
commit 8e627e4
Show file tree

Hide file tree

Showing 6 changed files with 722 additions and 63 deletions.
diff --git a/example/src/example.js b/example/src/example.js
@@ -1,11 +1,15 @@
 import React, { Component } from 'react';
-import { Button, Columns, Column } from '../../src';
+import { Button, Columns, Column, initialize } from '../../src';
+
+initialize();
 
 export default class Example extends Component {
   render() {
     return (
       <div>
         <Button >test</Button>
+        <Button size="isLarge" states="isActive" icon="fa fa-github" className="button2">test</Button>
+        <Button size="isSmall" states="isActive" icon="fa fa-github">Github</Button>
         <Columns>
           <Column size="is2">aaaa</Column>
           <Column>bbbb</Column>

diff --git a/index.html b/index.html
@@ -1,10 +1,16 @@
 <html>
-  <head>
-    <title>Sample App</title>
-  </head>
-  <body>
-    <div id='root'>
-    </div>
-    <script src="/static/bundle.js"></script>
-  </body>
+    <head>
+        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
+        <style>
+         .button2 {
+             background: #333;
+             margin: 30px;
+         }
+        </style>
+        <title>Sample App</title>
+    </head>
+    <body>
+        <div id='root'></div>
+        <script src="/static/bundle.js"></script>
+    </body>
 </html>
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
+    "bulma": "0.0.28",
     "enzyme": "^2.0.0",
     "eslint": "^1.10.3",
     "eslint-config-airbnb": "^5.0.0",
@@ -53,6 +54,7 @@
     "react-addons-test-utils": "^0.14.3",
     "react-dom": "^0.14.7",
     "react-hot-loader": "^1.3.0",
+    "react-styleguidist": "^2.3.1",
     "sinon": "^1.17.2",
     "webpack": "^1.12.14",
     "webpack-dev-server": "^1.14.1"
@@ -65,6 +67,8 @@
   ],
   "dependencies": {
     "csjs": "^1.0.0",
-    "insert-css": "^0.2.0"
+    "insert-css": "^0.2.0",
+    "lodash.isequal": "^4.2.0",
+    "lodash.kebabcase": "^4.0.1"
   }
 }
diff --git a/src/button.js b/src/button.js
@@ -1,85 +1,103 @@
 import React, { Component, PropTypes } from 'react';
 import csjs from 'csjs';
+import styles from './styles/button';
 import insertCss from 'insert-css';
-
-const styles = csjs`
-  .button:hover {
-    z-index: 2;
-  }
-
-  .button:active,
-  .button:focus {
-    z-index: 3;
-  }
-
-  .button {
-    margin-right: -1px;
-    margin: 0;
-    width: auto;
-    overflow: visible;
-    cursor: pointer;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    background: white;
-    border: 1px solid #d3d6db;
-    border-radius: 3px;
-    color: #222324;
-    display: inline-block;
-    font-size: 14px;
-    height: 32px;
-    line-height: 24px;
-    padding: 3px 8px;
-    position: relative;
-    vertical-align: top;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    padding: 3px 10px;
-    text-align: center;
-    white-space: nowrap;
-  }
-
-  .button:hover {
-    border-color: #aeb1b5;
-  }
-
-  .button:active,
-  .button:focus {
-    border-color: #1fc8db;
-    outline: none;
-  }
-`;
+import kebabCase from 'lodash.kebabCase';
+import isEqual from 'lodash.isEqual';
 
 insertCss(csjs.getCss(styles), { prepend: true });
 
 export default class Button extends Component {
   static propTypes = {
     children: PropTypes.string.isRequired,
+    className: PropTypes.string,
     style: PropTypes.object,
     onClick: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
     onTouchStart: PropTypes.func,
     onDoubleClick: PropTypes.func,
+    icon: PropTypes.string,
+    size: PropTypes.oneOf([
+      'isSmall',
+      'isMedium',
+      'isLarge',
+    ]),
+    type: PropTypes.oneOf([
+      'isPrimary',
+      'isInfo',
+      'isSuccess',
+      'isWarning',
+      'isDanger',
+      'isLink',
+    ]),
+    styles: PropTypes.oneOf([
+      'isOutlined',
+      'isInverted',
+    ]),
+    states: PropTypes.oneOf([
+      'isLoading',
+      'isActive',
+      'isDisabled',
+    ]),
   };
 
   static defaultProps = {
     style: {},
     onClick: () => null,
+    onFocus: () => null,
+    onBlur: () => null,
     onTouchStart: () => null,
     onDoubleClick: () => null,
+    className: '',
+    isLoading: false,
+    isActive: false,
   };
 
+  shouldComponentUpdate(next) {
+    return isEqual(this.props, next);
+  }
+
+  createClassName() {
+    return [
+      styles.button,
+      styles[kebabCase(this.props.size)],
+      styles[kebabCase(this.props.type)],
+      styles[kebabCase(this.props.styles)],
+      styles[kebabCase(this.props.states)],
+      this.props.className,
+    ].join(' ');
+  }
+
+  createIconSize() {
+    if (this.props.size === 'isLarge') return 'is-medium';
+    if (this.props.size === 'isSmall') return 'is-small';
+    return '';
+  }
+
   render() {
     return (
       <button
         style={this.props.style}
-        className={[styles.button, this.props.className].join(' ')}
+        className={this.createClassName()}
         onClick={this.props.onClick}
+        onFocus={this.props.onFocus}
+        onBlur={this.props.onBlur}
         onTouchStart={this.props.onTouchStart}
         onDoubleClick={this.props.onDoubleClick}
       >
-        {this.props.children}
+        {
+          this.props.icon
+            ? (
+              <span>
+                <span className={[styles.icon, styles[this.createIconSize()]].join(' ')}>
+                  <i className={[styles.fa, this.props.icon].join(' ')} />
+                </span>
+                <span>{this.props.children}</span>
+              </span>
+            )
+            : this.props.children
+        }
       </button>
     );
   }

diff --git a/src/index.js b/src/index.js
@@ -2,9 +2,12 @@ import Button from './button';
 import Columns from './columns';
 import Column from './column';
 
+const initialize = () => console.log('initialize');
+
 export {
   Button,
   Columns,
-  Column
+  Column,
+  initialize,
 };