Sha256: 3644833486cb6f9737c777ef2ce876777ea61da845bdbdd87a6850b3df693b74

Contents?: true

Size: 1.58 KB

Versions: 10

Compression:

Stored size: 1.58 KB

Contents

import React from 'react'

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

import Flex from '../pb_flex/_flex'
import FlexItem from '../pb_flex/_flex_item'
import SectionSeparator from '../pb_section_separator/_section_separator'
import TimeStacked from '../pb_time_stacked/_time_stacked'
import DateStacked from '../pb_date_stacked/_date_stacked'

type DateTimeStackedProps = {
  htmlOptions?: {[key: string]: string | number | boolean | Function},
  id?: string,
  date: Date,
  datetime: Date,
  dark: boolean,
  timeZone?: string,
}

const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
  if (props.date) deprecatedProps()

  const {
    date,
    datetime,
    dark,
    htmlOptions = {},
    timeZone = 'America/New_York',
  } = props

  const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
  const htmlProps = buildHtmlProps(htmlOptions)

  return (
    <Flex
        inline={false}
        vertical="stretch"
        {...htmlProps}
        {...props}
    >
      <FlexItem>
        <DateStacked
            align="right"
            bold
            dark={dark}
            date={date || datetime}
        />
      </FlexItem>

      <SectionSeparator
          className="date-time-padding"
          orientation="vertical"
      />
      <FlexItem>
        <TimeStacked
            className={classes}
            dark={dark}
            date={date || datetime}
            timeZone={timeZone}
        />
      </FlexItem>
    </Flex>
  )
}

export default DateTimeStacked

Version data entries

10 entries across 10 versions & 1 rubygems

Version Path
playbook_ui-13.14.0.pre.alpha.PLAY1109bugdisplaypropblocksfontcolor1784 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-13.14.0.pre.alpha.play1106filter1751 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-13.14.0.pre.alpha.play1106filter1748 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-13.14.0 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-13.13.0.pre.alpha.PLAY1097linterenhancedelement1728 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-13.13.0.pre.alpha.play10221678 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-13.13.0.pre.alpha.PLAY1090csstokens1675 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-13.13.0.pre.alpha.play900startratingasinput1657 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-13.13.0 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-13.12.0.pre.alpha.play10281596 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx