Sha256: de5daeb3d35071b7b482c845d942e52719a04644e3f319fee546bc084c3a88e8

Contents?: true

Size: 1.59 KB

Versions: 40

Compression:

Stored size: 1.59 KB

Contents

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

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

import Body from '../pb_body/_body'
import Caption from '../pb_caption/_caption'

type TimeStackedProps = {
  align?: 'left' | 'center' | 'right',
  className?: string | string[],
  dark?: boolean,
  data?: { [key: string]: string },
  date?: Date,
  id?: string,
  time?: number | Date,
  timeZone?: string,
}

const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
  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)

  return (
    <div
        className={classes}
        {...dataProps}
    >
      <Body
          className={classnames('pb_time_stacked', 'time-spacing')}
          color="light"
          dark={dark}
      >
        <time>
          {DateTime.toTimeWithMeridiem(date ? date : new Date(time), timeZone)}
          <Caption
              className="pb_time_stacked"
              color="light"
              dark={dark}
              tag="span"
              text={DateTime.toTimeZone(date ? date : new Date(time), timeZone)}
          />
        </time>
      </Body>
    </div>
  )
}

export default TimeStackedDefault

Version data entries

40 entries across 40 versions & 1 rubygems

Version Path
playbook_ui-12.38.0.pre.alpha.PLAY966collapsiblenav41086 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.38.0.pre.alpha.audiencesalpha1083 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.38.0.pre.alpha.PLAY966collapsiblenav41082 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.38.0.pre.alpha.PLAYaddingdatapropselectkit1080 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.37.0.pre.alpha.PLAY951collapsiblenav31078 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.38.0.pre.alpha.playbook123801077 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.37.0.pre.alpha.PLAY951collapsiblenav31074 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.37.0.pre.alpha.PLAY951collapsiblenav31073 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.38.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.36.0.pre.alpha.PLAY936momentjs1058 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.36.0.pre.alpha.PLAY936momentjs1050 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.36.0.pre.alpha.PLAY936momentjs1047 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.33.0.pre.alpha.PLAY905reactionbuttons982 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.33.0.pre.alpha.PLAY905reactionbuttons979 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.33.0.pre.alpha.revert2650closedialogonoutsideclick977 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.33.0 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.31.0.pre.alpha.PLAY814removemomentjs935 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.31.0.pre.alpha.PLAY814removemomentjs933 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
playbook_ui-12.28.0.pre.alpha.PLAY814removemomentjs871 app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx