xchain-components/src/components/XButton/index.js

Xchain Components

/* @flow */
/* eslint react/jsx-filename-extension: 0 */

import * as React from 'react';
import { Button, Icon } from 'semantic-ui-react';
import XDisplayText from 'components/XDisplayText';


type Props = {

  width?: string,
  height?: string,
  backgroundColor?: string,
  borderColor?: string,
  borderRadius?: string,
  text: string,
  fontSize?: string,
  iconName?: string,
  iconColor?: string,
  iconFontSize?: string,
  onButtonClick: ()=>{},
  textColor: string,
  iconMarginRight?: string,
  iconPosition?: string,
};

const XButton = (props: Props) => {
  const {fluid,
    width,
    height,
    backgroundColor,
    borderColor,
    borderRadius,
    text,
    fontSize, onButtonClick, iconName, iconColor, textColor, iconFontSize,
    iconMarginRight, iconPosition, ...rest,
  } = props;

  return (
    <Button
      {...rest}
      style={{
        width,
        height,
        backgroundColor,
        border: `1px solid ${borderColor}`,
        borderRadius,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 0,

      }}
      onClick={onButtonClick}
    >
      {
      iconName !== '' && iconPosition === 'left'
        ? (
          <Icon
            style={{
              margin: '0px',
              marginRight: iconMarginRight,
              color: iconColor,
              fontSize: iconFontSize,
            }}
            name={iconName}

          />
        ) : null
    }
      <XDisplayText displayText={text} fontSize={fontSize} color={textColor} />
    {
    iconName !== '' && iconPosition === 'right'
      ? (
        <Icon
          style={{
            margin: '0px',
            marginLeft: iconMarginRight,
            color: iconColor,
            fontSize: iconFontSize,
          }}
          name={iconName}
        />
      ) : null
    }

    </Button>
  );
};

XButton.defaultProps = {
  iconPosition: 'left',
  borderColor: 'transparent',
  borderRadius: '2px',
  width: '120px',
  height: '32px',
  fontSize: '16px',
  backgroundColor: '#ffffff',
  iconName: '',
  iconColor: '#b6c0cb',
  iconFontSize: '15px',
  iconMarginRight: '10px',
};

export default XButton;