Sha256: 532b9c8dbd167b1dac5ef211e8f76858024026b9ac7a64a9c2871dabc69453a9
Contents?: true
Size: 1.82 KB
Versions: 15
Compression:
Stored size: 1.82 KB
Contents
/* @flow */
import React from 'react'
import classnames from 'classnames'
import DateTime from '../pb_kit/dateTime.js'
import { buildCss } from '../utilities/props'
import { globalProps } from '../utilities/globalProps.js'
import { Body, Caption, Icon } from '../'
type TimeProps = {
align?: 'left' | 'center' | 'right',
className?: string | array<string>,
data?: string,
date: string,
dark?: boolean,
id?: string,
showIcon?: boolean,
size?: 'md' | 'sm',
timeZone?: string,
}
const Time = (props: TimeProps) => {
const { align, className, date, showIcon, size, timeZone } = props
const classes = classnames(
buildCss('pb_time_kit', align, size),
globalProps(props),
className
)
const dateTimestamp = new DateTime({ value: date, zone: timeZone })
return (
<div className={classes}>
<span className="pb_body_kit">
<If condition={showIcon}>
<Body
color="light"
tag="span"
>
<Icon
fixedWidth
icon="clock"
size={size === 'md' ? 'lg' : 'sm'}
/>
</Body>
{' '}
</If>
<time dateTime={date}>
<span>
<If condition={size !== 'md'}>
<Body
color="light"
tag="span"
text={dateTimestamp.toTimeWithMeridian()}
/>
<Else />
<Caption
size="lg"
tag="span"
text={dateTimestamp.toTimeWithMeridian()}
/>
</If>
<If condition={timeZone !== undefined}>
<span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span>
</If>
</span>
</time>
</span>
</div>
)
}
export default Time
Version data entries
15 entries across 15 versions & 1 rubygems