instantjob-recruiter-client/src/components/utils/button.jsx

a set of tools for creating an instantjob recruiter react client

import React, {Component} from 'react'
import styled, {css} from 'styled-components'
import {MdDone, MdArrowBack, MdArrowForward} from 'react-icons/lib/md'
import Spinner from 'react-spinjs'
import {color, link, disabled_link} from 'common/styles'

const Loading = ({dark_background}) => (
  <Spinner config={{color: dark_background ? 'white' : color('black', 'light'), length: 4, width: 2, radius: 5}} />
)
export default ({
  className, dark_background, submit, children, loading, disabled, done, discreet, onClick, icon: Icon,
  left_icon, right_icon, label, secondary, navigation, back,
}) => {
  const props = {
    onClick: !disabled && !loading && !done && onClick,
    disabled,
    discreet,
    dark_background,
    done,
    secondary,
    navigation: navigation || back,
  }
  if (!left_icon && Icon) {
    left_icon = <Icon />
  }
  if (done) {
    left_icon = <MdDone />
  }
  if (back) {
    left_icon = <MdArrowBack />
  }
  if (navigation) {
    right_icon = <MdArrowForward />
  }
  return (
    <Container className={className} loading={loading}>
      {loading ? (
        <Loading dark_background={dark_background}/>
      ) : submit ? (
        <Submit
          type="submit"
          value={children}
          {...props}
        />
      ) : (
        <Content {...props}>
          {left_icon ? (
            <IconContainer>
              {left_icon}
            </IconContainer>
          ) : null}
          {children}
          {label}
          {right_icon ? (
            <IconContainer right>
              {right_icon}
            </IconContainer>
          ) : null}
        </Content>
      )}
    </Container>
  )
}

const Container = styled.div`
  display: flex;
  ${({loading}) => loading ? css`
    position: relative;
    height: 40px;
    width: 40px;
  ` : ''}
`
const button_style = css`
  font-size: 16px;
  padding: 10px 14px 8px 14px;
  border-radius: 3px;
  border: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;

  ${({disabled, onClick}) => disabled ? disabled_link : onClick ? link : ''}
  ${({discreet, disabled, dark_background, secondary, done, navigation}) => discreet ? css`
    ${dark_background ? css`
      color: white;
    ` : css`
      color: ${color('black', 'light')};
      &:hover {
        opacity: 1;
        color: ${color('action')};
      }
    `};
    padding-left: 0;
    padding-right: 0;
  ` : secondary ? css`
    color: ${disabled ? (dark_background ? color('white', 'normal', 0.5) : color('black', 'pale')) : color('action')};
    ${disabled ? '' : css`
      &:hover {
        opacity: 1;
        background-color: ${dark_background ? color('white', 'normal', 0.25) : color('action', 'normal', 0.25)}
      }
    `}
  ` : navigation ? css`
    color: ${color('black', 'light')};
    &:hover {
      opacity: 1;
      background-color: ${color('black', 'light', 0.25)}
    }
  ` : done ? css`
    background-color: ${color('primary')};
    color: white;
  ` : css`
    background-color: ${disabled ? (dark_background ? color('white', 'normal', 0.3) : color('black', 'pale')) : color('action')};
    color: ${disabled ? (dark_background ? color('white', 'normal', 0.64) : color('black', 'bright')) : 'white'};
    ${disabled ? '' : css`box-shadow: 0 1px 2px 1px ${color('black', 'normal', 0.25)}`};
    margin-bottom: 2px;
  `}
`
const Content = styled.div`
  ${button_style}
`
const Submit = styled.input`
  ${button_style}
`
const IconContainer = styled.div`
  margin: -5px;
  font-size: 24px;
  padding-${({right}) => right ? `left` : `right`}: 10px;
  transform: translate(0, -2px);
`