@muvehealth/fixins/dist/elements/DisplayInput/index.js.flow

Component library for Muvehealth

// @flow
import React, { PureComponent } from 'react'
import styled from 'react-emotion'
import withProps from 'recompose/withProps'
import { color, fontSize, space, themeGet } from 'styled-system'
import { prop } from 'ramda'
import Box from '../Box'
import Label from '../Label'
import { shouldForwardProp } from '../../utils'
import { type InputType, type MetaType } from '../../types'

const TextInput = withProps({ fontSize: 1 })(styled('input', { shouldForwardProp })(
  {
    border: 0,
    fontFamily: 'inherit',
    outline: 'none',
    minWidth: 48,
  },
  ({ height, width, ...rest }) => ({
    height: height || 40,
    width: width || '100%',
    color: themeGet('colors.black', '#000000')(rest),
    backgroundColor: themeGet('colors.white', '#FFFFFF')(rest),
    position: 'relative',
  }),
  fontSize,
  space,
  color,
))

type Props = {
  input?: InputType,
  meta?: MetaType,
  label?: ?string,
  noLabel?: boolean,
  placeholder?: ?string,
  readOnly?: boolean,
  type?: string,
}

class Input extends PureComponent<Props> {
  static defaultProps = {
    input: undefined,
    label: null,
    meta: undefined,
    noLabel: false,
    placeholder: '--',
    readOnly: true,
    type: 'text',
  }

  render() {
    const {
      input,
      label,
      noLabel,
      placeholder,
      readOnly,
      type,
      meta,
      ...styles
    } = this.props

    return (
      <Box {...styles} width="100%">
        <Label
          hidden={noLabel}
          htmlFor={prop('name', input)}
        >
          {label}
        </Label>
        <TextInput
          id={prop('name', input)}
          name={prop('name', input)}
          onBlur={prop('onBlur', input)}
          onChange={prop('onChange', input)}
          onFocus={prop('onFocus', input)}
          placeholder={placeholder}
          readOnly
          type={type}
          value={prop('value', input)}
        />
      </Box>
    )
  }
}

export default Input