Sha256: 0ec1ea033c4e2d7ee629bdf983912617fb3cb889e48f7c8e2fdbb71f8741a0db

Contents?: true

Size: 1.56 KB

Versions: 73

Compression:

Stored size: 1.56 KB

Contents

/* @flow */

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

import DateTime from '../pb_kit/dateTime.js'
import { buildCss, buildDataProps } from '../utilities/props'
import { deprecatedProps, globalProps } from '../utilities/globalProps.js'

import { Body, Caption } from '../'

type TimeStackedProps = {
  align?: 'left' | 'center' | 'right',
  className?: string | array<string>,
  dark?: boolean,
  data?: object,
  date?: string,
  id?: string,
  time: number | Date,
  timeZone?: string,
}

const TimeStackedDefault = (props: TimeStackedProps) => {
  if (props.date) deprecatedProps('Time Stacked', ['date']) //date prop is deprecated, use time instead

  const {
    align = 'left',
    className,
    dark,
    data = {},
    date,
    time,
    timeZone,
  } = props

  const classes = classnames(
    buildCss('pb_time_stacked_kit', align),
    globalProps(props),
    className
  )
  const dataProps = buildDataProps(data)

  const dateTimestamp = new DateTime({ value: date ? date : new Date(time), zone: timeZone })

  return (
    <div
        className={classes}
        {...dataProps}
    >
      <Body
          className={classnames('pb_time_stacked', 'time-spacing')}
          color="light"
          dark={dark}
      >
        <time>
          {dateTimestamp.toTimeWithMeridian()}
          <Caption
              className="pb_time_stacked"
              color="light"
              dark={dark}
              tag="span"
              text={dateTimestamp.toTimezone()}
          />
        </time>
      </Body>
    </div>
  )
}

export default TimeStackedDefault

Version data entries

73 entries across 73 versions & 1 rubygems

Version Path
playbook_ui-9.19.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.19.0.pre.alphafonts app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.18.0.flow.bin.alpha app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.18.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.17.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.17.0.pre.decouple.website2 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.16.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.15.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.15.0.pre.decouple.website1 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.14.1.alpha.radio.alignment app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.14.1.alpha.highcharts9 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.14.1 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.13.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.12.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.12.0.pre.text.addon app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.11.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.10.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.10.0.pre.date.time.stacked.1 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.10.0.pre.alpha2 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.10.0.pre.alpha1 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx