date-fns#differenceInCalendarYears TypeScript Examples

The following examples show how to use date-fns#differenceInCalendarYears. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: year.ts    From ngx-gantt with MIT License 6 votes vote down vote up 
getSecondaryDatePoints(): GanttDatePoint[] {
        const years = differenceInCalendarYears(this.end.value, this.start.value);
        const points: GanttDatePoint[] = [];
        const pointTop = 27;
        for (let i = 0; i <= years; i++) {
            const start = this.start.addYears(i);
            const point = new GanttDatePoint(
                start,
                `${start.format(this.options.dateFormat.year)}`,
                i * this.getCellWidth() + this.getCellWidth() / 2,
                pointTop
            );
            points.push(point);
        }
        return points;
    }
Example #2
Source File: NotificationTile.tsx    From atlas with GNU General Public License v3.0 4 votes vote down vote up 
NotificationTile: React.FC<NotificationProps> = ({
  notification,
  loading,
  onCheckboxChange,
  onClick,
  selected = false,
  variant = 'default',
  className,
}) => {
  const { date, video, member, read } = notification
  const { url: avatarUrl, isLoadingAsset: isLoadingAvatar } = useMemberAvatar(member)

  const formattedDate = useMemo(() => {
    const differenceDays = differenceInDays(new Date(), date)
    const differenceYears = differenceInCalendarYears(new Date(), date)
    if (differenceYears >= 1) {
      return format(date, 'dd LLL yyyy')
    }
    if (differenceDays > 3) {
      return format(date, 'LLL d')
    }
    return formatDateAgo(date)
  }, [date])

  if (variant === 'compact') {
    return (
      <StyledLink to={absoluteRoutes.viewer.video(notification.video.id)} onClick={onClick}>
        <StyledListItem
          loading={loading}
          read={read}
          variant="compact"
          nodeStart={
            member ? (
              <Avatar size="default" assetUrl={avatarUrl} loading={isLoadingAvatar || loading} />
            ) : (
              <NoActorNotificationAvatar size="small" />
            )
          }
          caption={!loading ? `${formattedDate} • ${video.title}` : <SkeletonLoader width="50%" height={19} />}
          label={
            !loading ? (
              <>
                {member && (
                  <Text as="span" variant="t200-strong" secondary>
                    {`${member.handle} `}
                  </Text>
                )}
                <Text as="span" variant="t200-strong">
                  {getNotificationText(notification)}
                </Text>
              </>
            ) : (
              <SkeletonLoader width="40%" height={20} bottomSpace={2} />
            )
          }
        />
      </StyledLink>
    )
  }

  return (
    <Wrapper
      to={absoluteRoutes.viewer.video(notification.video.id)}
      read={read}
      selected={selected}
      loading={loading}
      className={className}
      variant="default"
      onClick={onClick}
    >
      {!loading ? (
        <Checkbox onChange={onCheckboxChange} value={selected} />
      ) : (
        <CheckboxSkeleton width={16} height={16} />
      )}
      <AvatarWrapper>
        {member ? (
          <Avatar size="small" assetUrl={avatarUrl} loading={isLoadingAvatar || loading} />
        ) : (
          <NoActorNotificationAvatar size="regular" />
        )}
      </AvatarWrapper>
      {!loading ? (
        <Content>
          <Title>
            {member && (
              <Text as="span" variant="h300" secondary>
                {`${member.handle} `}
              </Text>
            )}
            <Text as="span" variant="h300">
              {getNotificationText(notification)}
            </Text>
          </Title>
          <Text variant="t200" secondary>
            {formattedDate} • {video.title}
          </Text>
        </Content>
      ) : (
        <Content>
          <SkeletonLoader width="40%" height={24} bottomSpace={2} />
          <SkeletonLoader width="50%" height={20} />
        </Content>
      )}
    </Wrapper>
  )
}