@bitrise/bitkit 10.34.0 → 10.35.0-alpha-datepicker-rewrite.2

package/src/utils/utils.ts

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 export const rem = (input: number | string): number | string => {
   const value = typeof input === 'string' ? parseInt(input, 10) : input;
   if (Number.isNaN(value)) {
@@ -6,3 +8,9 @@ export const rem = (input: number | string): number | string => {
   }
   return `${value / 16}rem`;
 };
+
+export function useObjectMemo<T extends object>(obj: T): T {
+  return useMemo(() => {
+    return obj;
+  }, Object.values(obj));
+}

package/src/Old/DatePicker/DatePicker.css

@@ -1,74 +0,0 @@
-.DatePicker__grid + .DatePicker__grid {
-  border-top: 0.0625rem solid var(--color-gray--2);
-}
-
-.DatePicker__day {
-  position: relative;
-  width: 3rem;
-  height: 3rem;
-  transition-property: color;
-  transition-duration: var(--transition-duration--fast);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.DatePicker__day::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  transform: scale(0);
-  opacity: 0;
-  border-radius: 50%;
-  background-color: var(--color-grape--4);
-  transition-property: transform, opacity, background-color;
-  transition-duration: var(--transition-duration--fast);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.DatePicker__day-inner {
-  position: relative;
-}
-
-.DatePicker__day--selectable {
-  cursor: pointer;
-}
-
-.DatePicker__day--selectable.DatePicker__day--unselected:hover {
-  color: var(--color-gray--1);
-}
-
-.DatePicker__day--selected::before {
-  transform: scale(calc(2.5 / 3));
-  opacity: 1;
-  background-color: var(--color-grape--4);
-  transform: scale(1);
-  background-color: var(--color-aqua--3);
-}
-
-.DatePicker__day--selectable.DatePicker__day--unselected:hover::before {
-  transform: scale(calc(2.5 / 3));
-  opacity: 1;
-  background-color: var(--color-grape--4);
-}
-
-.DatePicker__day--selected-from,
-.DatePicker__day--selected-between,
-.DatePicker__day--selected-to {
-  background-color: var(--color-aqua--2);
-}
-
-.DatePicker__day--selected-from {
-  border-top-left-radius: 50%;
-  border-bottom-left-radius: 50%;
-}
-
-.DatePicker__day--selected-to {
-  border-top-right-radius: 50%;
-  border-bottom-right-radius: 50%;
-}
-
-.DatePicker__day--unselectable {
-  color: var(--color-gray--5);
-}

package/src/Old/DatePicker/DatePicker.tsx

@@ -1,194 +0,0 @@
-/* eslint-disable react/destructuring-assignment */
-import * as React from 'react';
-import { DateTime } from 'luxon';
-import { ReferenceChildrenProps } from 'react-popper';
-import { useMediaQuery, useSyncedStateAndProps } from '../hooks';
-import Button from '../../Components/Button/Button';
-import ButtonGroup from '../../Components/ButtonGroup/ButtonGroup';
-import { Props as FlexProps } from '../Flex/Flex';
-import Placement from '../Placement/Placement';
-import PlacementArea from '../Placement/PlacementArea';
-import PlacementManager from '../Placement/PlacementManager';
-import PlacementReference from '../Placement/PlacementReference';
-import DatePickerMonth from './DatePickerMonth';
-import './DatePicker.css';
-
-const { useState } = React;
-
-export interface Props extends FlexProps {
-  /**
-   * PlacementReference children prop for passing down
-   * the ref of the target to be placed around.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  children: (props: ReferenceChildrenProps) => React.ReactNode;
-  /**
-   * The earliest date that can be selected.
-   * Should be given in millisecond form. For example 1558973847330
-   */
-  dateSelectableFrom?: number;
-  /**
-   * The latest date that can be selected.
-   * Should be given in millisecond form. For example 1558973847330
-   */
-  dateSelectableTo?: number;
-  /**
-   * The start date of the selected period.
-   * Should be given in millisecond form. For example 1558973847330
-   */
-  dateSelectedFrom?: number;
-  /**
-   * The end date of the selected period.
-   * Should be given in millisecond form. For example 1558973847330
-   */
-  dateSelectedTo?: number;
-  /** Handler for when the selected period is chosen. */
-  onApply?: (dateSelectedFrom?: number, dateSelectedTo?: number) => void;
-  /** Handler for when the date picker has been asked to be closed.  */
-  onClose: () => void;
-  /** Flag for when the date picker should be visible. */
-  visible: boolean;
-}
-
-/**
- * A simple date selection component, that supports a dual month view and
- * range selection.
- */
-const DatePicker: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, onApply, onClose, visible } = props;
-
-  const match = useMediaQuery(['56rem']);
-  const [dateSelectedFromMillis, setDateSelectedFromMillis] = useSyncedStateAndProps(props.dateSelectedFrom);
-  const [dateSelectedToMillis, setDateSelectedToMillis] = useSyncedStateAndProps(props.dateSelectedTo);
-  const [viewDateStartMillis, setViewDateStartMillis] = useState(dateSelectedFromMillis);
-  const [viewDateEndMillis, setViewDateEndMillis] = useState(dateSelectedToMillis);
-
-  const dateSelectableFrom =
-    props.dateSelectableFrom === undefined ? undefined : DateTime.fromMillis(props.dateSelectableFrom).startOf('day');
-  const dateSelectableTo =
-    props.dateSelectableTo === undefined ? undefined : DateTime.fromMillis(props.dateSelectableTo);
-  const dateSelectedFrom = dateSelectedFromMillis && DateTime.fromMillis(dateSelectedFromMillis).startOf('day');
-  const dateSelectedTo = dateSelectedToMillis && DateTime.fromMillis(dateSelectedToMillis).startOf('day');
-
-  const viewDateStart = viewDateStartMillis
-    ? DateTime.fromMillis(viewDateStartMillis).startOf('month')
-    : DateTime.local().startOf('month');
-
-  const viewDateEnd =
-    viewDateEndMillis && !DateTime.fromMillis(viewDateEndMillis).startOf('month').equals(viewDateStart)
-      ? DateTime.fromMillis(viewDateEndMillis).startOf('month')
-      : viewDateStart.plus({ months: 1 }).startOf('month');
-
-  const handleClose = () => {
-    onClose();
-    setDateSelectedFromMillis(undefined);
-    setDateSelectedToMillis(undefined);
-  };
-
-  const handleApply = () => {
-    if (onApply) {
-      onApply(dateSelectedFromMillis, dateSelectedToMillis);
-    }
-
-    handleClose();
-  };
-
-  const handlePreviousMonthStart = () => {
-    setViewDateStartMillis(+viewDateStart.minus({ months: 1 }));
-  };
-
-  const handleNextMonthStart = () => {
-    setViewDateStartMillis(+viewDateStart.plus({ months: 1 }));
-
-    if (viewDateStart.plus({ months: 1 }).equals(viewDateEnd)) {
-      setViewDateEndMillis(+viewDateEnd.plus({ months: 1 }));
-    }
-  };
-
-  const handlePreviousMonthEnd = () => {
-    setViewDateEndMillis(+viewDateEnd.minus({ months: 1 }));
-
-    if (viewDateEnd.minus({ months: 1 }).equals(viewDateStart)) {
-      setViewDateStartMillis(+viewDateStart.minus({ months: 1 }));
-    }
-  };
-
-  const handleNextMonthEnd = () => {
-    setViewDateEndMillis(+viewDateEnd.plus({ months: 1 }));
-  };
-
-  const handleSelect = (date: DateTime) => {
-    let nextDateSelectedFrom: undefined | DateTime = dateSelectedFrom;
-    let nextDateSelectedTo: undefined | DateTime = dateSelectedTo;
-
-    if (dateSelectedFrom && dateSelectedTo) {
-      nextDateSelectedFrom = date;
-      nextDateSelectedTo = undefined;
-    } else if (dateSelectedFrom) {
-      nextDateSelectedTo = date;
-    } else {
-      nextDateSelectedFrom = date;
-    }
-
-    if (nextDateSelectedFrom && nextDateSelectedTo && +nextDateSelectedFrom > +nextDateSelectedTo) {
-      [nextDateSelectedFrom, nextDateSelectedTo] = [nextDateSelectedTo, nextDateSelectedFrom];
-    }
-
-    setDateSelectedFromMillis(nextDateSelectedFrom && nextDateSelectedFrom.toMillis());
-    setDateSelectedToMillis(nextDateSelectedTo && nextDateSelectedTo.toMillis());
-  };
-
-  return (
-    <PlacementManager>
-      <PlacementReference>{children}</PlacementReference>
-
-      <Placement onClose={onClose} visible={visible}>
-        {() => (
-          <PlacementArea paddingVertical="x8">
-            <PlacementArea direction="horizontal">
-              <PlacementArea paddingHorizontal="x8">
-                <DatePickerMonth
-                  dateSelectableFrom={dateSelectableFrom}
-                  dateSelectableTo={dateSelectableTo}
-                  dateSelectedFrom={dateSelectedFrom}
-                  dateSelectedTo={dateSelectedTo}
-                  onNextMonth={handleNextMonthStart}
-                  onPreviousMonth={handlePreviousMonthStart}
-                  onSelect={handleSelect}
-                  viewDate={viewDateStart}
-                />
-              </PlacementArea>
-
-              {match('56rem') && (
-                <PlacementArea paddingHorizontal="x8">
-                  <DatePickerMonth
-                    dateSelectableFrom={dateSelectableFrom}
-                    dateSelectableTo={dateSelectableTo}
-                    dateSelectedFrom={dateSelectedFrom}
-                    dateSelectedTo={dateSelectedTo}
-                    onNextMonth={handleNextMonthEnd}
-                    onPreviousMonth={handlePreviousMonthEnd}
-                    onSelect={handleSelect}
-                    viewDate={viewDateEnd}
-                  />
-                </PlacementArea>
-              )}
-            </PlacementArea>
-
-            <ButtonGroup alignItems="flex-end" marginY="8" paddingX="32">
-              <Button variant="secondary" onClick={handleClose} size="small">
-                Cancel
-              </Button>
-
-              <Button onClick={handleApply} size="small">
-                Apply
-              </Button>
-            </ButtonGroup>
-          </PlacementArea>
-        )}
-      </Placement>
-    </PlacementManager>
-  );
-};
-
-export default DatePicker;

package/src/Old/DatePicker/DatePickerDay.tsx

@@ -1,72 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import { DateTime } from 'luxon';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-
-interface Props extends FlexProps {
-  dateSelectableFrom?: DateTime;
-  dateSelectableTo?: DateTime;
-  dateSelectedFrom?: DateTime;
-  dateSelectedTo?: DateTime;
-  n: number;
-  onSelect: (date: DateTime) => void;
-  viewDate: DateTime;
-}
-
-const DatePickerDay: React.FunctionComponent<Props> = (props: Props) => {
-  const { dateSelectableFrom, dateSelectableTo, dateSelectedFrom, dateSelectedTo, n, onSelect, viewDate, ...rest } =
-    props;
-
-  const date = viewDate.plus({ days: n - viewDate.weekday });
-
-  const dayOfWeek = viewDate.weekday;
-  const { daysInMonth } = viewDate;
-  const daysInPreviousMonth = viewDate.minus({ month: 1 }).daysInMonth;
-
-  const isPreviousMonth = n < dayOfWeek;
-  const isNextMonth = n - dayOfWeek >= daysInMonth;
-  const isCurrentMonth = !isPreviousMonth && !isNextMonth;
-  const isAfterSelectableFromDate = !dateSelectableFrom || date.equals(dateSelectableFrom) || date > dateSelectableFrom;
-  const isBeforeSelectableToDate = !dateSelectableTo || date.equals(dateSelectableTo) || date < dateSelectableTo;
-  const isSelectable = isCurrentMonth && isAfterSelectableFromDate && isBeforeSelectableToDate;
-
-  const hasSelectionRange = dateSelectedFrom && dateSelectedTo && !dateSelectedFrom.equals(dateSelectedTo);
-
-  const isSelectedFrom = isCurrentMonth && dateSelectedFrom && date.equals(dateSelectedFrom);
-  const isSelectedTo = isCurrentMonth && dateSelectedTo && date.equals(dateSelectedTo);
-  const isSelectedBetween =
-    isCurrentMonth &&
-    dateSelectedFrom &&
-    dateSelectedTo &&
-    hasSelectionRange &&
-    +date > +dateSelectedFrom &&
-    +date < +dateSelectedTo;
-
-  const classes = classnames('DatePicker__day', {
-    'DatePicker__day--selected': isSelectedFrom || isSelectedTo,
-    'DatePicker__day--selected-between': isSelectedBetween,
-    'DatePicker__day--selected-from': hasSelectionRange && isSelectedFrom,
-    'DatePicker__day--selected-to': hasSelectionRange && isSelectedTo,
-    'DatePicker__day--selectable': isSelectable,
-    'DatePicker__day--unselected': !isSelectedFrom && !isSelectedTo && !isSelectedBetween,
-    'DatePicker__day--unselectable': !isSelectable,
-  });
-
-  return (
-    <Flex
-      {...rest}
-      alignChildren="middle"
-      className={classes}
-      direction="horizontal"
-      onClick={isSelectable ? () => onSelect(date) : undefined}
-    >
-      <Flex alignChildren="middle" className="DatePicker__day-inner" direction="horizontal">
-        {isPreviousMonth && daysInPreviousMonth - (dayOfWeek - n - 1)}
-        {isCurrentMonth && n - dayOfWeek + 1}
-        {isNextMonth && n - dayOfWeek - daysInMonth + 1}
-      </Flex>
-    </Flex>
-  );
-};
-
-export default DatePickerDay;

package/src/Old/DatePicker/DatePickerGrid.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import Box, { BoxProps } from '../../Components/Box/Box';
-
-type Props = BoxProps;
-
-const DatePickerGrid: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Box display="grid" {...props} gridTemplateColumns="repeat(7, 3rem)" gridAutoRows="max-content" gridRowGap="4" />
-  );
-};
-
-export default DatePickerGrid;

package/src/Old/DatePicker/DatePickerMonth.tsx

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import { DateTime, Info } from 'luxon';
-import Base, { Props as BaseProps } from '../Base/Base';
-import Flex from '../Flex/Flex';
-import Icon from '../../Components/Icon/Icon';
-import Link from '../../Components/Link/Link';
-import Text from '../../Components/Text/Text';
-import DatePickerGrid from './DatePickerGrid';
-import DatePickerDay from './DatePickerDay';
-
-const daysOfTheWeek = Info.weekdays('short');
-const daysCount = 6 * 7;
-
-interface Props extends BaseProps {
-  dateSelectableFrom?: DateTime;
-  dateSelectableTo?: DateTime;
-  dateSelectedFrom?: DateTime;
-  dateSelectedTo?: DateTime;
-  onNextMonth: () => void;
-  onPreviousMonth: () => void;
-  onSelect: (date: DateTime) => void;
-  viewDate: DateTime;
-}
-
-const DatePickerMonth: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    dateSelectableFrom,
-    dateSelectableTo,
-    dateSelectedFrom,
-    dateSelectedTo,
-    onNextMonth,
-    onPreviousMonth,
-    onSelect,
-    viewDate,
-    ...rest
-  } = props;
-
-  return (
-    <Base {...rest}>
-      <Flex alignChildren="middle" direction="horizontal" gap="x4" margin="x4" paddingHorizontal="x12">
-        <Flex>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <Link as="button" onClick={onPreviousMonth}>
-            <Icon name="ChevronLeft" />
-          </Link>
-        </Flex>
-
-        <Flex grow>
-          <Text align="center">{viewDate.toFormat('MMMM yyyy')}</Text>
-        </Flex>
-
-        <Flex>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <Link as="button" onClick={onNextMonth}>
-            <Icon name="ChevronRight" />
-          </Link>
-        </Flex>
-      </Flex>
-
-      <DatePickerGrid marginY="4">
-        {daysOfTheWeek.map((day) => (
-          <Text textAlign="center" key={day} paddingY="16" size="2" color="neutral.70" textTransform="uppercase">
-            {day}
-          </Text>
-        ))}
-      </DatePickerGrid>
-
-      <DatePickerGrid borderTop="1px solid" borderTopColor="neutral.93" paddingY="8">
-        {Array.from({ length: daysCount }).map((_, i) => (
-          <DatePickerDay
-            dateSelectableFrom={dateSelectableFrom}
-            dateSelectableTo={dateSelectableTo}
-            dateSelectedFrom={dateSelectedFrom}
-            dateSelectedTo={dateSelectedTo}
-            // eslint-disable-next-line react/no-array-index-key
-            key={i}
-            n={i + 1}
-            onSelect={onSelect}
-            viewDate={viewDate}
-          />
-        ))}
-      </DatePickerGrid>
-    </Base>
-  );
-};
-
-export default DatePickerMonth;

package/src/Old/hooks/useMediaQuery.ts

@@ -1,91 +0,0 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useRef, useState } from 'react';
-
-interface MatchPatternConfig {
-  [key: string]: any;
-}
-
-interface Listener {
-  listener: MediaQueryList;
-  media: string;
-  query: string;
-}
-
-type Handler = (e: MediaQueryListEvent) => void;
-
-const getListeners = (queries: string[], handler: Handler) => queries.map((query) => {
-  const media = `(min-width: ${query})`;
-  const listener = window.matchMedia(media);
-
-  listener.addListener(handler);
-
-  return { listener, media, query };
-});
-
-const getMatchQueryIndex = (queries: string[], listeners: Listener[]) => {
-  for (let i = queries.length; i--;) {
-    if (listeners[i].listener.matches) {
-      return queries.indexOf(listeners[i].query);
-    }
-  }
-
-  return -1;
-};
-
-const removeListeners = (listeners: Listener[], handler: Handler) => {
-  listeners.forEach(({ listener }) => {
-    listener.removeListener(handler);
-  });
-};
-
-export default (queries: string[]) => {
-  const handleQueryChange = (event: MediaQueryListEvent) => {
-    const listener = listeners.current.find(({ media }) => media === event.media);
-
-    if (listener && hasMounted.current) {
-      setHitIndex(getMatchQueryIndex(queries, listeners.current));
-    }
-  };
-
-  const hasMounted = useRef(false);
-  const listeners = useRef<Listener[]>(getListeners(queries, handleQueryChange));
-  const [hitIndex, setHitIndex] = useState(getMatchQueryIndex(queries, listeners.current));
-
-  useEffect(() => {
-    if (!hasMounted.current) {
-      hasMounted.current = true;
-    } else {
-      removeListeners(listeners.current, handleQueryChange);
-      listeners.current = getListeners(queries, handleQueryChange);
-      setHitIndex(getMatchQueryIndex(queries, listeners.current));
-    }
-
-    return () => {
-      removeListeners(listeners.current, handleQueryChange);
-    };
-  }, [...queries]);
-
-  useEffect(() => () => {
-    hasMounted.current = false;
-  }, []);
-
-  function match(pattern: string, fallback?: never): boolean;
-  function match(pattern: MatchPatternConfig, fallback?: string): any;
-  function match(pattern: string | MatchPatternConfig, fallback?: string): any {
-    if (typeof pattern === 'string') {
-      const patternIndex = queries.indexOf(pattern);
-      return patternIndex >= 0 && patternIndex <= hitIndex;
-    }
-
-    for (let i = hitIndex + 1; i--;) {
-      if (queries[i] in pattern) {
-        return pattern[queries[i]];
-      }
-    }
-
-    return fallback;
-  }
-
-  return match;
-};