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'}}>
  40             <div className={Class} tabIndex="0">
  41             {svgHTML}
  42               <div className="SqButton-content">{label}</div>
  43             </div>
  44             </div>
  45         )
  46     }
  47 }
  48
  49 SqButton.defaultProps = {
  50     icon: false,
  51     primary: false,
  52     disabled: false,
  53     size: false, // 'small', 'medium', 'large'
  54     label: 'Submit'
  55 }