Sha256: 979301f9b70c4c5dc8334e34f808dea4b90e9ed11facef0061434e719a11d89b

Contents?: true

Size: 1.56 KB

Versions: 112

Compression:

Stored size: 1.56 KB

Contents

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

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

import Flex from '../pb_flex/_flex'
import Time from '../pb_time/_time'
import FormattedDate from '../pb_date/_date'

type DateTimeProps = {
  align?: "left" | "center" | "right",
  aria?: { [key: string]: string; },
  className?: string,
  data?: { [key: string]: string; },
  datetime: Date,
  id?: string,
  size?: "sm" | "md",
  showDayOfWeek: boolean,
  showIcon?: boolean,
  timeZone?: string
}

const DateTime = (props: DateTimeProps) => {
  const {
    align = 'left',
    aria = {},
    className,
    data = {},
    showDayOfWeek = false,
    datetime,
    id,
    showIcon = false,
    size = 'md',
    timeZone = 'America/New_York',
  } = props

  const ariaProps = buildAriaProps(aria)
  const dataProps = buildDataProps(data)
  const classes = classnames(
    buildCss('pb_date_time', size),
    globalProps(props),
    className
  )

  return (
    <div
        {...ariaProps}
        {...dataProps}
        className={classes}
        id={id}
    >
      <Flex
          horizontal={align}
          vertical="baseline"
      >
        <FormattedDate
            showDayOfWeek={showDayOfWeek}
            size={size}
            value={datetime}
        />
        <Time
            date={datetime}
            marginLeft="sm"
            showIcon={showIcon}
            size={size}
            timeZone={timeZone}
        />
      </Flex>
    </div>
  )
}

export default DateTime

Version data entries

112 entries across 112 versions & 1 rubygems

Version Path
playbook_ui-13.11.1.pre.alpha.play900startratingasinput1530 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.12.0 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.11.1 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.11.0 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.PLAY1051removinghighchartsdependency1465 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.webpackerregistercomponents1463 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.dependabotnpmandyarnfortawesomefontawesomepro6421439 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.play10561428 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.play1054tableheadersortconsolidation1416 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.play10561409 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.dependabotnpmandyarntiptapextensionlink21121407 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21365 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21358 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.play10481357 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.play845addswiftkitspage1332 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.PLAY978alphatesthighcharts41330 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21328 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21323 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0.pre.alpha.play978makehighchartsadevdependencypoc1322 app/pb_kits/playbook/pb_date_time/_date_time.tsx
playbook_ui-13.10.0 app/pb_kits/playbook/pb_date_time/_date_time.tsx