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.3.0.alpha.inline2 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.3.0.alpha.inline1 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.3.0.pre.alpha.password.strength.1 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.3.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.2.2.pre.alpha.margin app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.2.2 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.2.1 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.2.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.1.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-9.0.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-8.3.0.alpha.select.pre.margin app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-8.3.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-8.2.1.pre.alpha5 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-8.2.1.pre.alpha4 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-8.2.1.alpha.iconacc app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-8.2.1.pre.alpha3 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-8.2.1.pre.alpha2 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-8.3.0.deps2 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-8.3.0.pre.alpha1 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
playbook_ui-8.2.1.pre.alpha1 app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx