SHARE
TWEET

Untitled

a guest Jul 21st, 2019 56 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import styled from 'styled-components';
  3. import * as palette from '../../theme/constants.js';
  4. import * as themes from '../../theme/theme.js';
  5. import PropTypes from 'prop-types';
  6. const buttonSize = {
  7.     xsmall:  {
  8.         padding: "4px 24px",
  9.         height: "auto",
  10.         'font-size': '14px',
  11.         iconSize: "12px",
  12.         paddingIcon: "4px 24px"
  13.     },
  14.     small: {
  15.         padding: "6px 24px",
  16.         'font-size': '16px',
  17.         height: "32px",
  18.         iconSize: "16px",
  19.         paddingIcon: "4px 24px"
  20.     },
  21.     medium: {
  22.         padding: "8px 24px",
  23.         'font-size': '16px',
  24.         height: "36px",
  25.         iconSize: "20px",
  26.         paddingIcon: "4px 24px"
  27.     },
  28.     large: {
  29.         padding: "12px 24px",
  30.         'font-size': '16px',
  31.         height: "44px",
  32.         iconSize: "20px",
  33.         paddingIcon: "4px 24px"
  34.     }
  35.  
  36. };
  37.  
  38. const Btn = styled.button`
  39.      ${palette.BASE_FONT_FAMILY};
  40.      width:             ${props => props.fullwidth  ? '100%' : 'auto'};
  41.      min-width: 48px;
  42.      height:            ${props => props.size ? buttonSize[props.size].height : buttonSize['small'].height };
  43.      padding:           ${props => props.size && props.icon ? buttonSize[props.size].paddingIcon : buttonSize[props.size].padding};
  44.      border-radius:     2px;
  45.      background:        ${props => props.nature ? themes[props.theme].buttons[props.nature].background : themes[props.theme].buttons['default'].background};
  46.      color:             ${props => props.nature ? themes[props.theme].buttons[props.nature].color : themes[props.theme].buttons['default'].color};
  47.      border:            none;
  48.      border:            ${props => props.nature ? themes[props.theme].buttons[props.nature].border : 'none'};
  49.      text-align:        center;
  50.      font-size:         ${props => props.size === 'xsmall' ? buttonSize[props.size]['font-size'] : '14px' };
  51.      line-height:       1;
  52.      box-sizing: border-box;
  53.      cursor: pointer;
  54.      transition: all .1s ease-in-out;
  55.      box-shadow:  ${props => props.nature && !props.group ? themes[props.theme].buttons[props.nature].boxShadow: themes[props.theme].buttons['default'].boxShadow};
  56.      &: hover {
  57.         box-shadow:  ${props => props.nature && !props.group ? themes[props.theme].buttons[props.nature].hover.boxShadow: themes[props.theme].buttons['default'].hover.boxShadow};
  58.         background: ${props => props.nature ? themes[props.theme].buttons[props.nature].hover.background : themes[props.theme].buttons['default'].hover.background};
  59.     }
  60.     &: focus {
  61.         outline: none;
  62.         box-shadow:  ${props => props.nature && !props.group ? themes[props.theme].buttons[props.nature].clicked.boxShadow: themes[props.theme].buttons['default'].clicked.boxShadow};
  63.         background: ${props => props.nature ? themes[props.theme].buttons[props.nature].clicked.background : themes[props.theme].buttons['default'].clicked.background};
  64.     }
  65.     &:disabled,
  66.     button[disabled]{
  67.         box-shadow:  ${props => props.nature && !props.group ? themes[props.theme].buttons[props.nature].disabled.boxShadow: themes[props.theme].buttons['default'].disabled.boxShadow};
  68.         background: ${props => props.nature ? themes[props.theme].buttons[props.nature].disabled.background : themes[props.theme].buttons['default'].disabled.background};
  69.         cursor: auto;
  70.         color:  ${props => props.nature ? themes[props.theme].buttons[props.nature].disabled.color : themes[props.theme].buttons['default'].disabled.color};
  71.  
  72.     }
  73.     & i {
  74.       font-size: ${props => props.size ? buttonSize[props.size].iconSize : buttonSize['small'].iconSize};
  75.       line-height: 1;
  76.     }
  77. `;
  78.  
  79. class Button extends Component {
  80.     constructor(props) {
  81.         super(props);
  82.         this.onClick = this.callAction.bind(this);
  83.  
  84.     }
  85.     callAction(params) {
  86.         if(this.props.action) this.props.action(params);
  87.     }
  88.     render() {
  89.         return (
  90.             <Btn size={this.props.size}
  91.                  icon={this.props.icon}
  92.                  nature={this.props.nature}
  93.                  fullwidth={this.props.fullwidth}
  94.                  ref={this.focusInput}
  95.                  theme={this.props.theme} onClick={this.props.action} group={this.props.group}  autoFocus={this.props.autoFocus}
  96.                  disabled= {this.props.isDisabled === true ? this.props.isDisabled : false}>
  97.                   {this.props.icon ?
  98.                   <i className={`icon-${this.props.icon}`} style={{display:'inline', marginRight: '8px', verticalAlign: 'middle' }}></i>
  99.                   : ''}
  100.                 {this.props.title}
  101.             </Btn>
  102.         );
  103.     }
  104. };
  105.  
  106. Button.propTypes = {
  107.     /** the title of the button */
  108.     title: PropTypes.string,
  109.     /** color/style of the button */
  110.     nature: PropTypes.oneOf(['primary', 'default', 'secondary']),
  111.     /** size of the button */
  112.     size: PropTypes.oneOf(['xsmall','small', 'medium', 'large']),
  113.     /** Callback function*/
  114.     action: PropTypes.func,
  115.     /** Theme of the button*/
  116.     theme: PropTypes.string,
  117.     /** Full button width according to parent container */
  118.     fullwidth: PropTypes.bool,
  119.     group: PropTypes.bool,
  120.     autoFocus: PropTypes.bool,
  121.     isDisabled: PropTypes.bool,
  122.     icon: PropTypes.string,
  123.  
  124. };
  125.  
  126. Button.defaultProps = {
  127.     nature: 'default',
  128.     theme:'themeLight',
  129.     size: 'small'
  130. };
  131.  
  132. export default Button;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top