Sha256: c984ceb5c37a09055111038ec1009d99faa0fe6a1cfd074a528411c4dcef2e06

Contents?: true

Size: 1.35 KB

Versions: 529

Compression:

Stored size: 1.35 KB

Contents

import React from 'react'
import classnames from 'classnames'

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

import Body from '../pb_body/_body'
import Icon from '../pb_icon/_icon'

type LoadingInlineProps = {
  align?: "left" | "center" | "right",
  aria?: { [key: string]: string },
  className?: string,
  data?: { [key: string]: string },
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
  id?: string,
  text?: string,
}

const LoadingInline = (props: LoadingInlineProps) => {
  const {
    align = 'left',
    aria = {},
    className,
    data = {},
    htmlOptions = {},
    id,
    text = ' Loading',
  } = props

  const ariaProps = buildAriaProps(aria)
  const dataProps = buildDataProps(data)
  const htmlProps = buildHtmlProps(htmlOptions)
  const classes = classnames(
    buildCss(`pb_loading_inline_kit_${align}`),
    globalProps(props),
    className
  )

  return (
    <div
        {...ariaProps}
        {...dataProps}
        {...htmlProps}
        className={classes}
        id={id}
    >
      <Body color="light">
        <Icon
            aria={{ label: 'loading icon' }}
            fixedWidth
            icon="spinner"
            pulse
        />
        {text}
      </Body>
    </div>
  )
}

export default LoadingInline

Version data entries

529 entries across 529 versions & 1 rubygems

Version Path
playbook_ui-14.11.1.pre.alpha.PBNTR7495495 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.12.0.pre.rc.11 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.12.0.pre.rc.10 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.12.0.pre.rc.9 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.12.0.pre.rc.8 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.12.0.pre.rc.7 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.11.1.pre.alpha.play1724darkmodeauditmap5437 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.11.1.pre.alpha.PBNTR719listdraggablesimple5432 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.11.1.pre.alpha.PBNTR768stickyrightcolumn5431 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.12.0.pre.rc.6 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5415 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.11.1.pre.alpha.play1724darkmodeauditmap5413 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.12.0.pre.rc.5 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.11.1.pre.alpha.play1724darkmodeauditmap5409 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5400 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5392 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.11.1.pre.alpha.PLAY1720phonenumberinputformatAsYouType5377 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.11.1.pre.alpha.play17725374 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.11.1.pre.alpha.play17725372 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-14.12.0.pre.rc.4 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx