@muvehealth/fixins/dist/elements/DisplayTextArea/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: 2,
})(styled('textarea', { shouldForwardProp })(
  {
    borderRadius: 6,
    border: 0,
    fontFamily: 'inherit',
    minHeight: 80,
    outline: 'none',
    resize: 'none',
    width: '100%',
    '@media print': {
      border: '1px solid',
    },
  },
  ({ height, width, ...rest }) => ({
    width: width || '100%',
    color: themeGet('colors.placeholderGray', '#9B9B9B')(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 Textarea 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,
      ...styles
    } = this.props
    return (
      // $FlowFixMe
      <Box maxWidth={[336, 'none']} {...styles}>
        <Label
          hidden={noLabel}
          htmlFor={prop('name', input)}
          fontWeight="bold"
        >
          {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 Textarea