Sha256: 60b07a85f672330c52288c52d5f5273476690f46b687595c06791d1b8baa4af9
Contents?: true
Size: 1.77 KB
Versions: 44
Compression:
Stored size: 1.77 KB
Contents
/* @flow */
import React from 'react'
import DateTime from '../pb_kit/dateTime.js'
import { Icon } from '../'
import classnames from 'classnames'
import { spacing } from '../utilities/spacing.js'
const defaultDateString = (value: DateTime) => {
const weekday = value.toWeekday().toUpperCase()
const month = value.toMonth().toUpperCase()
const day = value.toDay()
return `${weekday} ยท ${month} ${day}`
}
const largeDateString = (value: DateTime) => {
const month = value.toMonth().toUpperCase()
const day = value.toDay()
return `${month} ${day}`
}
type DateSubcomponent = {
value: DateTime,
}
const ExtraSmallDate = ({ value, ...props }: DateSubcomponent) => (
<h3 className={classnames('pb_title_kit_4', spacing(props))}>
{defaultDateString(value)}
</h3>
)
const SmallDate = ({ value, ...props }: DateSubcomponent) => (
<h3 className={classnames('pb_title_kit_4', spacing(props))}>
<Icon
fixedWidth
icon="calendar"
/>
{defaultDateString(value)}
</h3>
)
const LargeDate = ({ value, ...props }: DateSubcomponent) => (
<h3 className={classnames('pb_title_kit_3', spacing(props))}>
{largeDateString(value)}
</h3>
)
type PbDateProps = {
size?: "xs" | "sm" | "lg",
value?: String,
className?: String
}
const PbDate = ({ size, value, className, ...props }: PbDateProps) => {
const date = new DateTime({ value: value })
if (size == 'xs')
return (
<ExtraSmallDate
{...props}
className={className}
value={date}
/>
)
if (size == 'lg')
return (
<LargeDate
{...props}
className={className}
value={date}
/>
)
return (
<SmallDate
{...props}
className={className}
value={date}
/>
)
}
export default PbDate
Version data entries
44 entries across 44 versions & 1 rubygems