All files / components/button index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react'
import PropTypes from 'prop-types'
import cx from 'classnames'
import ButtonStyled from './button.styled'
 
const Button = ({
  htmlType = 'button',
  type = 'default',
  className,
  width = '100%',
  height = '40px',
  onClick,
  disabled,
  icon,
  badge = null,
  badgeType = 'danger',
  children,
  ...rest
}) => (
    <ButtonStyled
      {...rest}
      className={cx(className, type)}
      width={width}
      height={height}
      onClick={onClick}
      disabled={disabled}
      type={htmlType}
    >
      {badge !== null && <div className={cx(badgeType, 'button-badge')}><span className='button-badge-label'>{badge}</span></div>}
      <div className='content-button'>
        {icon && <span className="icon">{icon}</span>}
        {children && <span>{children}</span>}
      </div>
    </ButtonStyled>
  )
 
Button.propTypes = {
  disabled: PropTypes.bool,
  onClick: PropTypes.func.isRequired,
  className: PropTypes.string,
  height: PropTypes.string,
  width: PropTypes.string,
  htmlType: PropTypes.string,
  children: PropTypes.node,
  type: PropTypes.oneOf([
    'primary',
    'secondary',
    'danger',
    'default'
  ]),
  icon: PropTypes.string
}
 
export { Button }