skyquake/framework/widgets/button/sq-button.jsx

   1 import React from 'react';
   2
   3 import 'style/base.scss';
   4 import './button.scss';
   5
   6 const icons = {
   7     check: require("style/icons/svg-sprite-navigation-symbol.svg")  + "#ic_check_24px"
   8 }
   9
  10 export default class SqButton extends React.Component {
  11     constructor(props) {
  12         super(props);
  13     }
  14     render() {
  15         let {icon, primary, size, disabled, label, ...props} = this.props;
  16         let svgHTML = null;
  17         let Class = "SqButton";
  18         if(icon) {
  19             svgHTML = <svg className="svg-24px SqButton-icon">
  20             <use xlinkHref={icons[icon]}></use></svg>;
  21         }
  22         if(primary) {
  23             Class += " SqButton--primary";
  24         } else {
  25             Class += " SqButton--normal";
  26         }
  27         if(size && (
  28                 size == 'small'
  29                 || size == 'medium'
  30                 || size == 'large'
  31                 )
  32             ) {
  33             Class += " SqButton--" + size;
  34         }
  35         if(disabled) {
  36             Class += " is-disabled";
  37         }
  38         return (
  39         <div style={{display: 'flex'}} onClick={this.props.onClick}>
  40             <div className={Class} tabIndex="0">
  41                 {svgHTML}
  42                 <div className="SqButton-content">{label}</div>
  43             </div>
  44         </div>
  45         )
  46     }
  47 }
  48
  49 export class ButtonGroup extends React.Component {
  50     render() {
  51         let className = "sqButtonGroup";
  52         if (this.props.className) {
  53             className = `${className} ${this.props.className}`
  54         }
  55         return (
  56             <div className={className} style={this.props.style}>
  57                 {this.props.children}
  58             </div>
  59         )
  60     }
  61 }
  62
  63
  64 SqButton.defaultProps = {
  65     onClick: function(e) {
  66         console.log('Clicked')
  67     },
  68     icon: false,
  69     primary: false,
  70     disabled: false,
  71     size: false, // 'small', 'medium', 'large'
  72     label: 'Submit'
  73 }