Sha256: 763ad06e16d340ed5679d9a8d5f2c3cf38b4190111d1845e9a6fd239ecee4163

Contents?: true

Size: 1.46 KB

Versions: 166

Compression:

Stored size: 1.46 KB

Contents

// @flow

import React from 'react'
import classnames from 'classnames'
import type { InputCallback } from '../types'

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

import { globalProps } from '../utilities/globalProps'

type Props = {
  aria?: object,
  checked?: boolean,
  children?: React.Node,
  className?: string,
  data?: object,
  id?: string,
  name?: string,
  onChange?: InputCallback<HTMLInputElement>,
  size?: "sm" | "md",
  value?: string,
}

const Toggle = ({
  aria = {},
  checked = false,
  children,
  className,
  data = {},
  id,
  name,
  onChange = () => {},
  size = 'sm',
  value,
  ...props
}: Props) => {
  const ariaProps = buildAriaProps(aria)
  const dataProps = buildDataProps(data)
  const css = classnames(
    buildCss('pb_toggle_kit',
      size,
      {
        on: checked,
        off: !checked,
      }
    ))

  return (
    <div
        {...ariaProps}
        {...dataProps}
        className={classnames(css, globalProps(props), className)}
        id={id}
    >
      <label className="pb_toggle_wrapper">
        <If condition={children}>
          {children}
          <Else />
          <input
              {...props}
              defaultChecked={checked}
              name={name}
              onChange={onChange}
              type="checkbox"
              value={value}
          />
        </If>
        <div className="pb_toggle_control" />
      </label>
    </div>
  )
}

export default Toggle

Version data entries

166 entries across 166 versions & 1 rubygems

Version Path
playbook_ui-12.17.1 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.17.0.pre.alpha.lightboxcurrentPhotoIndex582 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.17.0 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.16.0.pre.alpha.tooltippositionprop566 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.16.0.pre.alpha.PLAY693tooltipwrongbg558 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.16.0.pre.alpha.PLAY693tooltipwrongbg547 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.16.0.pre.alpha.PLAY693tooltipwrongbg532 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.16.0.pre.alpha.lightboxcurrentphotoprop531 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.16.0.pre.alpha.tiptaptestingpart1528 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.16.0 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.15.0 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.14.0.pre.alpha.lightboxcurrentphotoprop460 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown457 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.14.0 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.13.0.pre.alpha.PLAY693tooltipwrongbg440 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.13.0.pre.alpha.addingProductTokens439 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.13.0.pre.alpha.PLAY705phonenumberkit438 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.13.0 app/pb_kits/playbook/pb_toggle/_toggle.jsx
playbook_ui-12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413 app/pb_kits/playbook/pb_toggle/_toggle.jsx