Sha256: dca6b55474003ef02e8cfa38fb82c97d0507a3fac5711918425f0bcf78f44a60

Contents?: true

Size: 1.79 KB

Versions: 1

Compression:

Stored size: 1.79 KB

Contents

/* @flow */
import React from 'react'
import classnames from 'classnames'
import { Body, Caption } from '../'
import { globalProps } from '../utilities/globalProps.js'

import {
  buildAriaProps,
  buildDataProps,
} from '../utilities/props'

type TextInputProps = {
  aria?: object,
  className: string,
  dark: boolean,
  data?: object,
  error?: string,
  id?: string,
  name: string,
  label: string,
  onChange: (String) => void,
  placeholder: string,
  type: string,
  value: string | number,
  children: Node,
}

const TextInput = ({
  aria = {},
  className,
  dark = false,
  data = {},
  error,
  id,
  name,
  label,
  onChange = () => {},
  placeholder,
  type = 'text',
  value,
  children = null,
  ...props
}: TextInputProps) => {
  const ariaProps = buildAriaProps(aria)
  const dataProps = buildDataProps(data)
  const css = classnames([
    `pb_text_input_kit${dark === true ? '_dark' : ''}`,
    className,
    error ? 'error' : null,
  ])

  return (
    <div
        {...ariaProps}
        {...dataProps}
        className={css}
    >
      <Caption
          className="pb_text_input_kit_label"
          dark={dark}
          text={label}
      />
      <div className={classnames('text_input_wrapper', globalProps(props))}>
        <If condition={children}>
          {children}
          <Else />
          <input
              {...props}
              className="text_input"
              id={id}
              name={name}
              onChange={onChange}
              placeholder={placeholder}
              type={type}
              value={value}
          />
          <If condition={error}>
            <Body
                dark={dark}
                status="negative"
                text={error}
            />
          </If>
        </If>
      </div>
    </div>
  )
}

export default TextInput

Version data entries

1 entries across 1 versions & 1 rubygems

Version Path
playbook_ui-7.0.0.pre.alpha1 app/pb_kits/playbook/pb_text_input/_text_input.jsx