@spaced-out/ui-design-system/lib/components/DateRangePicker/Day.js.flow

Sense UI components library

// @flow strict
import * as React from 'react';
// $FlowFixMe[untyped-import]
import moment from 'moment';

// $FlowFixMe[untyped-import]
import classify from '../../utils/classify';
import {UnstyledButton} from '../Button';
import {BodyMedium, TEXT_COLORS} from '../Text';

import css from './Day.module.css';


type DayProps = {
  date: string,
  value: string,
  filled: boolean,
  hoverDay: string,
  outlined: boolean,
  disabled: boolean,
  endOfRange: boolean,
  highlighted: boolean,
  startOfRange: boolean,
  onClick: () => void,
  onHover: () => void,
};

const getTextColor = (disabled: boolean, filled: boolean) => {
  if (disabled) {
    return TEXT_COLORS.disabled;
  } else if (filled) {
    return TEXT_COLORS.inversePrimary;
  } else {
    return TEXT_COLORS.secondary;
  }
};

export const Day = ({
  date,
  value,
  filled,
  onHover,
  onClick,
  disabled,
  hoverDay,
  outlined,
  endOfRange,
  highlighted,
  startOfRange,
}: DayProps): React.Node => (
  <UnstyledButton
    tabIndex={disabled ? -1 : 0}
    className={classify(css.calendarItemButton, {
      [css.calendarRowItemDisabled]: disabled,
      [css.calendarRowItemHighlighted]:
        !disabled && (highlighted || startOfRange || endOfRange),
    })}
    onMouseOver={onHover}
    onClick={onClick}
    onKeyUp={onHover}
  >
    <BodyMedium
      type="ghost"
      color={getTextColor(disabled, filled)}
      className={classify(css.calendarRowItem, {
        [css.calendarRowItemHover]:
          !disabled && moment.utc(date).isSame(hoverDay),
        [css.calendarRowItemFilled]: !disabled && filled,
        [css.calendarRowItemOutlined]: outlined,
      })}
    >
      {value}
    </BodyMedium>
  </UnstyledButton>
);