Sha256: c3ec1b8576894200098618210f3871e7f7ce0f619c7e138bc244ba009e3706c4
Contents?: true
Size: 1.9 KB
Versions: 101
Compression:
Stored size: 1.9 KB
Contents
/* @flow */
import React from 'react'
import classnames from 'classnames'
import { globalProps } from '../utilities/globalProps'
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
import Caption from '../pb_caption/_caption'
import Title from '../pb_title/_title'
import DateTime from '../pb_kit/dateTime'
type WeekdayStackedProps = {
align?: "left" | "center" | "right",
aria?: {[key:string]:string },
className?: string,
dark?: boolean,
data?: object,
date: Date,
id?: string,
variant?: "day_only" | "month_day" | "expanded",
compact?: boolean,
}
const getDayOfWeek = (value: Date | string, compact: boolean) => {
const dateTime = new DateTime({ value })
if (compact) {
return dateTime.toDayAbbr()
} else {
return dateTime.toWeekday()
}
}
const getFormattedDate = (value: Date | string, variant: "day_only" | "month_day" | "expanded") => {
const dateTime = new DateTime({ value })
if (variant === 'day_only') {
return dateTime.toDay()
} else {
const format = variant === 'expanded' ? '%b %-d' : '%-m/%-d'
return dateTime.toCustomFormat(format)
}
}
const WeekdayStacked = (props: WeekdayStackedProps) => {
const {
align = 'left',
aria = {},
className,
dark = false,
data = {},
date = new Date(),
id,
variant = 'month_day',
compact = false,
} = props
const ariaProps = buildAriaProps(aria)
const dataProps = buildDataProps(data)
const classes = classnames(
buildCss('pb_weekday_stacked_kit', align),
globalProps(props),
className
)
return (
<div
{...ariaProps}
{...dataProps}
className={classes}
id={id}
>
<Caption dark={dark}>{getDayOfWeek(date, compact)}</Caption>
<Title
dark={dark}
size={4}
tag="span"
text={getFormattedDate(date, variant)}
/>
</div>
)
}
export default WeekdayStacked
Version data entries
101 entries across 101 versions & 1 rubygems