Sha256: 30283bd4ce106d895e2b7cf82294a5db0dff322b11177a3560b92b5eb6c5649c

Contents?: true

Size: 1.58 KB

Versions: 644

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 | (() => void)},
  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

644 entries across 644 versions & 1 rubygems

Version Path
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5201 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.11.0.pre.rc.9 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5200 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.11.0.pre.rc.8 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.11.0.pre.rc.7 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.11.0.pre.rc.6 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.11.0.pre.rc.5 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5193 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.11.0.pre.rc.4 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.11.0.pre.rc.3 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.11.0.pre.rc.2 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.11.0.pre.rc.1 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.11.0.pre.rc.0 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.9.0.pre.alpha.PBNTR767advancedtablemultiheadercolumns5136 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.9.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5121 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.9.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5120 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.10.0 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
playbook_ui-14.10.0.pre.rc.24 app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx