@fibery/ui-kit 1.34.8 → 1.36.0

package/src/date-picker/date-range-input.tsx

@@ -0,0 +1,346 @@
+import {css} from "@linaria/core";
+import cx from "classnames";
+import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from "react";
+import {MonthChangeEventHandler} from "react-day-picker";
+import {AntTransparentInput} from "../antd/input";
+import {AntTransparentTextArea} from "../antd/input";
+import {inputOverrides} from "../antd/styles";
+import {space} from "../design-system";
+import {IconButton} from "../button/icon-button";
+import RemoveIcon from "../icons/react/Remove";
+import {AutoComplete, OnChangeArgs} from "./autocomplete";
+import {datesSeparator} from "./constants";
+import {InputRef} from "./rc-input-types";
+import {disabledStyle, selectedStyle} from "./styles";
+import {
+  formatDateInputValue,
+  formatDateRangeInputValue,
+  getDateRangeIntervals,
+  getDateTimeRangeIntervals,
+  getLocaleSpecificChrono,
+  setTime,
+} from "./utils";
+
+export const DateRangeInput = forwardRef<
+  {setValue: (value: string) => void},
+  {
+    startValue: Date | null;
+    endValue: Date | null;
+    showTime: boolean;
+    dateFormat?: string;
+    timeFormat?: string;
+    dateTimeFormat?: string;
+    onMonthChange: MonthChangeEventHandler;
+    onChange: (value: [Date | null, Date | null]) => void;
+    initialInputValue: string;
+    allowClear: boolean;
+    disabled: boolean;
+    placeholder: string;
+    autoFocus: boolean;
+    onReset: () => void;
+  }
+>(
+  (
+    {
+      startValue,
+      endValue,
+      showTime,
+      dateFormat,
+      timeFormat,
+      dateTimeFormat,
+      onMonthChange,
+      onChange,
+      initialInputValue,
+      allowClear,
+      disabled,
+      placeholder,
+      autoFocus,
+      onReset,
+    },
+    ref
+  ) => {
+    const [prevInputValue, setPrevInputValue] = useState<string | null>(null);
+    const [inputValue, setInputValue] = useState(initialInputValue);
+
+    if (prevInputValue !== initialInputValue) {
+      setPrevInputValue(initialInputValue);
+      setInputValue(initialInputValue);
+    }
+
+    const [selected, setSelected] = useState(false);
+
+    const onChangeInput = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => {
+        setInputValue(e.target.value);
+      },
+      []
+    );
+
+    useImperativeHandle(ref, () => {
+      return {
+        setValue(v) {
+          setInputValue(v);
+        },
+      };
+    });
+
+    const [startTimeAutoComplete, setStartTimeAutoComplete] = useState(false);
+    const [endTimeAutoComplete, setEndTimeAutoComplete] = useState(false);
+
+    const onSetMonth = useCallback(
+      (start: Date, end: Date, input: HTMLInputElement | HTMLTextAreaElement) => {
+        if (input.selectionStart !== null) {
+          // assume the used a part of date, and navigate to it after submit
+          const {startDateInterval, endDateInterval} = getDateRangeIntervals(input.value);
+          if (
+            input.selectionStart >= startDateInterval[0] &&
+            input.selectionStart <= startDateInterval[1] &&
+            startValue
+          ) {
+            onMonthChange(start);
+            return;
+          }
+          if (input.selectionStart >= endDateInterval[0] && input.selectionStart <= endDateInterval[1] && endValue) {
+            onMonthChange(end);
+            return;
+          }
+        }
+        onMonthChange(end);
+      },
+      [endValue, onMonthChange, startValue]
+    );
+    const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>();
+
+    const onClick = useCallback(
+      (e: React.MouseEvent<HTMLInputElement> | React.MouseEvent<HTMLTextAreaElement>) => {
+        const input = e.target as HTMLInputElement | HTMLTextAreaElement;
+
+        if (showTime) {
+          // wait until click will be applied to input
+          timeoutIdRef.current = setTimeout(() => {
+            if (input.selectionStart !== null) {
+              const {startTimeInterval, endTimeInterval} = getDateTimeRangeIntervals(input.value);
+              if (!startTimeInterval || !endTimeInterval) {
+                return;
+              }
+              if (input.selectionStart >= startTimeInterval[0] && input.selectionStart <= startTimeInterval[1]) {
+                setStartTimeAutoComplete(true);
+              } else {
+                setStartTimeAutoComplete(false);
+              }
+              if (
+                endValue &&
+                input.selectionStart >= endTimeInterval[0] &&
+                input.selectionStart <= endTimeInterval[1]
+              ) {
+                setEndTimeAutoComplete(true);
+              } else {
+                setEndTimeAutoComplete(false);
+              }
+            }
+          }, 0);
+        }
+        if (startValue && endValue) {
+          onSetMonth(startValue, endValue, input);
+        }
+      },
+      [endValue, onSetMonth, showTime, startValue]
+    );
+
+    useEffect(() => {
+      return () => {
+        if (timeoutIdRef.current) {
+          clearTimeout(timeoutIdRef.current);
+        }
+      };
+    }, []);
+
+    const onTimeClick = useCallback(
+      (time: string, pos: "start" | "end") => {
+        let start = startValue;
+        let end = endValue;
+        if (pos === "start") {
+          setStartTimeAutoComplete(false);
+          start = setTime(startValue, time, timeFormat);
+        } else if (pos === "end") {
+          setEndTimeAutoComplete(false);
+          end = setTime(endValue, time, timeFormat);
+        }
+
+        if (pos === "start" && start && end && start > end) {
+          end.setHours(start.getHours() + 1);
+          end.setMinutes(start.getMinutes());
+        }
+
+        if (pos === "end" && start && end && start > end) {
+          start.setHours(end.getHours());
+          start.setMinutes(end.getMinutes());
+        }
+
+        onChange([start, end]);
+        setInputValue(formatDateRangeInputValue(start, end, {showTime, dateFormat, dateTimeFormat}));
+      },
+      [endValue, onChange, showTime, dateFormat, timeFormat, dateTimeFormat, startValue]
+    );
+
+    const onStartTimeSelect = useCallback(
+      (option: OnChangeArgs) => (option ? onTimeClick(option.value, "start") : null),
+      [onTimeClick]
+    );
+
+    const onEndTimeSelect = useCallback(
+      (option: OnChangeArgs) => (option && option?.value ? onTimeClick(option.value, "end") : null),
+      [onTimeClick]
+    );
+
+    const inputRef = useRef<InputRef>(null);
+
+    useEffect(() => {
+      if (autoFocus && inputRef.current) {
+        inputRef.current.focus({
+          cursor: "all",
+        });
+      }
+    }, [autoFocus]);
+
+    const onClear = useCallback(() => {
+      onReset();
+      inputRef.current?.focus();
+    }, [onReset]);
+
+    const onSaveValue = useCallback(
+      (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        if (inputValue === "") {
+          if (allowClear) {
+            onClear();
+          } else {
+            setInputValue(formatDateRangeInputValue(startValue, endValue, {showTime, dateFormat, dateTimeFormat}));
+          }
+        }
+
+        const [result] = getLocaleSpecificChrono().parse(inputValue.replace(datesSeparator, " - "));
+        let start;
+        let end;
+        if (result && result.start && result.end) {
+          start = result.start.date();
+          end = result.end.date();
+        } else if (result && result.start) {
+          start = result.start.date();
+          end = result.start.date();
+        }
+        if (start && end) {
+          onChange([start, end]);
+          setInputValue(formatDateRangeInputValue(start, end, {showTime, dateFormat, dateTimeFormat}));
+          const input = e.target as HTMLInputElement;
+
+          // onMonthChange(end);
+
+          // chrono can swap values when start is after end
+          if (
+            formatDateInputValue(start, {showTime}) === formatDateInputValue(startValue, {showTime}) ||
+            formatDateInputValue(end, {showTime}) === formatDateInputValue(endValue, {showTime})
+          ) {
+            onSetMonth(start, end, input);
+          } else {
+            onSetMonth(end, start, input);
+          }
+        } else {
+          setInputValue(prevInputValue || "");
+        }
+      },
+      [
+        allowClear,
+        endValue,
+        inputValue,
+        onChange,
+        onClear,
+        onSetMonth,
+        prevInputValue,
+        showTime,
+        dateFormat,
+        dateTimeFormat,
+        startValue,
+      ]
+    );
+
+    const onBlur: React.FocusEventHandler<HTMLTextAreaElement | HTMLInputElement> = useCallback(
+      (e) => {
+        if (e.target.value !== initialInputValue) {
+          onSaveValue(e);
+        }
+        setStartTimeAutoComplete(false);
+        setEndTimeAutoComplete(false);
+        setSelected(false);
+      },
+      [initialInputValue, onSaveValue]
+    );
+
+    const onFocus = useCallback(() => {
+      setSelected(true);
+    }, []);
+
+    const InputComponent = showTime ? AntTransparentTextArea : AntTransparentInput;
+
+    return (
+      <div
+        className={cx(
+          css`
+            ${inputOverrides.main};
+            flex-direction: column;
+            justify-content: center;
+            display: flex;
+            margin-bottom: ${space.s12 + space.s6}px;
+            padding-right: ${space.s12 - 2}px;
+          `,
+          {[selectedStyle]: selected, [disabledStyle]: disabled}
+        )}
+      >
+        <div
+          className={css`
+            display: grid;
+            grid-template-columns: 1fr auto;
+            align-items: center;
+            justify-content: center;
+            padding-top: ${space.s6}px;
+            padding-bottom: ${space.s6}px;
+          `}
+        >
+          <div>
+            <InputComponent
+              bypassedRef={inputRef}
+              autoFocus={autoFocus}
+              value={inputValue}
+              onChange={onChangeInput}
+              onPressEnter={onSaveValue}
+              onClick={onClick}
+              onBlur={onBlur}
+              onFocus={onFocus}
+              style={{width: "100%", minHeight: "auto"}}
+              placeholder={placeholder}
+            />
+            <AutoComplete
+              menuIsOpen={startTimeAutoComplete}
+              value={startValue}
+              timeFormat={timeFormat}
+              onChange={onStartTimeSelect}
+              position={-20}
+            />
+            <AutoComplete
+              menuIsOpen={endTimeAutoComplete}
+              value={endValue}
+              timeFormat={timeFormat}
+              onChange={onEndTimeSelect}
+              position={0}
+            />
+          </div>
+          {allowClear && inputValue !== "" && (
+            <IconButton onClick={onClear} size={"tiny"}>
+              <RemoveIcon />
+            </IconButton>
+          )}
+        </div>
+      </div>
+    );
+  }
+);

package/src/date-picker/date-range-picker-popup-content.tsx

@@ -0,0 +1,190 @@
+import {DatePickerCommonProps, NativeDateRangePickerProps} from "./types";
+import {copyTime, DayWithStartEndButtons} from "./day-with-start-end-buttons";
+import {forwardRef, useCallback, useMemo, useRef, useState} from "react";
+import {DateRange, DayPicker} from "react-day-picker";
+import {DateRangeInput} from "./date-range-input";
+import enGB from "date-fns/locale/en-GB";
+import {formatDuration, intervalToDuration, roundToNearestMinutes} from "date-fns";
+import {border, space, textStyles, themeVars} from "../design-system";
+import {css} from "@linaria/core";
+import {formatDateRangeInputValue, getRandomPlaceholder} from "./utils";
+import {StartEndFocusContext} from "./contexts";
+import {
+  datePickerStylesOverrideClassName,
+  endRangeClassName,
+  outsideClassName,
+  selectedClassName,
+  startRangeClassName,
+  todayClassName,
+  weekendClassName,
+} from "./styles";
+import {getWeekendsForMonth} from "./get-weekends-for-month";
+
+export const sortDates = ({from, to}: {from: Date; to: Date}) => {
+  const [sortedFrom, sortedTo] = [from, to].sort((a, b) => a.getTime() - b.getTime());
+  return {from: sortedFrom, to: sortedTo};
+};
+
+export const DateRangePickerPopupContent = forwardRef<
+  {setValue: (value: string) => void},
+  DatePickerCommonProps & NativeDateRangePickerProps
+>((props, ref) => {
+  const {
+    value,
+    onChange,
+    disabled = false,
+    showTime = false,
+    allowClear = true,
+    showInput = true,
+    dateFormat,
+    timeFormat,
+    dateTimeFormat,
+    header,
+    bypassedRef,
+    onKeyDown,
+    weekStartsOn,
+    weekends,
+  } = props;
+
+  const [startValue, endValue] = value;
+
+  const [month, setMonth] = useState(endValue || startValue || new Date());
+
+  const [prevStartValue, setPrevStartValue] = useState<Date | null>(null);
+  const [prevCurrentEndValue, setPrevEndValue] = useState<Date | null>(null);
+
+  const [currentStartValue, setCurrentStartValue] = useState<Date | null>(null);
+  const [currentEndValue, setCurrentEndValue] = useState<Date | null>(null);
+
+  if (prevStartValue !== startValue) {
+    setPrevStartValue(startValue);
+    setCurrentStartValue(startValue);
+  }
+
+  if (prevCurrentEndValue !== endValue) {
+    setPrevEndValue(endValue);
+    setCurrentEndValue(endValue);
+  }
+
+  const onReset = useCallback(() => {
+    onChange([null, null]);
+    setCurrentStartValue(null);
+    setPrevStartValue(null);
+    setPrevEndValue(null);
+    setCurrentEndValue(null);
+  }, [onChange]);
+
+  const onDayClick = useCallback(
+    ({from, to}: DateRange) => {
+      if (!to) {
+        setCurrentStartValue(from ?? null);
+      } else {
+        const {from: sortedFrom, to: sortedTo} = sortDates({
+          from: copyTime(currentStartValue, from as Date),
+          to: copyTime(currentEndValue, to as Date),
+        });
+        onChange([sortedFrom, sortedTo]);
+      }
+    },
+    [currentEndValue, currentStartValue, onChange]
+  );
+
+  const inputValue = formatDateRangeInputValue(currentStartValue, currentEndValue, {
+    showTime,
+    dateFormat,
+    dateTimeFormat,
+  });
+  const duration =
+    currentStartValue && currentEndValue
+      ? formatDuration(
+          intervalToDuration({
+            start: currentStartValue,
+            end: roundToNearestMinutes(currentEndValue),
+          }),
+          showTime
+            ? {format: ["years", "months", "weeks", "days", "hours", "minutes"]}
+            : {format: ["years", "months", "weeks", "days"]}
+        )
+      : null;
+
+  const footer = duration ? (
+    <div
+      className={css`
+        background-color: ${themeVars.inputDisabledBgColor};
+        border-radius: ${border.radius6}px;
+        padding: ${space.s4}px ${space.s8}px;
+        ${textStyles.small}
+        text-align: center;
+        color: ${themeVars.disabledTextColor};
+        margin-top: ${space.s12}px;
+      `}
+    >
+      {duration}
+    </div>
+  ) : null;
+
+  const placeholder = useRef<string>(`e.g. ${getRandomPlaceholder(showTime, true)}`);
+
+  const [focusOnStart, setFocusOnStart] = useState(true);
+
+  const weekendsForMonth = useMemo(() => getWeekendsForMonth(month, weekends), [month, weekends]);
+
+  return (
+    <div className={datePickerStylesOverrideClassName} ref={bypassedRef} onKeyDown={onKeyDown}>
+      {header}
+      {showInput && (
+        <DateRangeInput
+          ref={ref}
+          startValue={currentStartValue}
+          endValue={currentEndValue}
+          showTime={showTime}
+          dateFormat={dateFormat}
+          timeFormat={timeFormat}
+          dateTimeFormat={dateTimeFormat}
+          onMonthChange={setMonth}
+          onChange={onChange}
+          onReset={onReset}
+          initialInputValue={inputValue}
+          allowClear={allowClear}
+          disabled={disabled}
+          placeholder={placeholder.current}
+          autoFocus
+        />
+      )}
+      <StartEndFocusContext.Provider value={{focusOnStart, setFocusOnStart}}>
+        <DayPicker
+          mode={"default"}
+          numberOfMonths={1}
+          showOutsideDays
+          components={{Day: DayWithStartEndButtons}}
+          month={month}
+          onMonthChange={setMonth}
+          modifiers={{
+            range_start: currentStartValue || false,
+            range_end: currentEndValue || false,
+            weekend: weekendsForMonth,
+          }}
+          modifiersClassNames={{
+            selected: selectedClassName,
+            range_start: startRangeClassName,
+            range_end: endRangeClassName,
+            today: todayClassName,
+            outside: outsideClassName,
+            weekend: weekendClassName,
+          }}
+          selected={{from: currentStartValue || undefined, to: currentEndValue || undefined}}
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          onDayClick={onDayClick}
+          disabled={disabled}
+          locale={enGB}
+          weekStartsOn={weekStartsOn}
+          focusOnStart={focusOnStart}
+          setFocusOnStart={setFocusOnStart}
+          fixedWeeks
+        />
+      </StartEndFocusContext.Provider>
+      {footer}
+    </div>
+  );
+});

package/src/date-picker/date-range-picker.tsx

@@ -0,0 +1,124 @@
+import {ControlledDatePickerProps, DatePickerCommonProps, MomentDateRangeProps} from "./types";
+import {Popup} from "../popup";
+import {space} from "../design-system";
+import {withPopupControl} from "./with-popup-control";
+import {DateRangePickerPopupContent} from "./date-range-picker-popup-content";
+import {css} from "@linaria/core";
+import "react-day-picker/dist/style.css";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {forwardRef, useCallback, useRef} from "react";
+import _ from "lodash";
+import moment from "moment";
+import {FakeDateInputWrapper} from "./fake-date-input";
+import {formatDateRangeInputValue} from "./utils";
+import {EmptyValue} from "../empty-value";
+import {focusable} from "tabbable";
+
+export const DateRangePicker = forwardRef<
+  {setValue: (value: string) => void},
+  DatePickerCommonProps & ControlledDatePickerProps & MomentDateRangeProps
+>((props, ref) => {
+  const {
+    open,
+    onOpen,
+    onClose,
+    children,
+    bypassedRef,
+    value,
+    disabled = false,
+    renderInPortal = true,
+    onChange,
+    showTime = false,
+    dateFormat,
+    timeFormat,
+    dateTimeFormat,
+    placeholder,
+    onKeyDown,
+  } = props;
+
+  const dateValue = [value[0] ? value[0].toDate() : null, value[1] ? value[1].toDate() : null] as [
+    Date | null,
+    Date | null
+  ];
+  const onDatesChange = useCallback(
+    (value: [Date | null, Date | null]) => {
+      onChange([value[0] ? moment(value[0]) : null, value[1] ? moment(value[1]) : null]);
+    },
+    [onChange]
+  );
+
+  const fakeWrapperRef = useRef<HTMLDivElement>(null);
+
+  const pickerValue = children || (
+    <FakeDateInputWrapper ref={fakeWrapperRef} disabled={disabled} isPickerOpen={open}>
+      {!dateValue[0] && !dateValue[1] ? (
+        <EmptyValue>{placeholder}</EmptyValue>
+      ) : (
+        <>
+          {formatDateRangeInputValue(dateValue[0], dateValue[1], {
+            showTime,
+            short: true,
+            dateFormat,
+            timeFormat,
+            dateTimeFormat,
+          })}
+        </>
+      )}
+    </FakeDateInputWrapper>
+  );
+
+  const onDatePickerKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Tab" || e.key === "Enter") {
+        e.stopPropagation();
+      } else if (e.key === "Escape") {
+        if (fakeWrapperRef.current) {
+          const focusableElements = focusable(fakeWrapperRef.current);
+          if (focusableElements && focusableElements[0]) {
+            focusableElements[0].focus();
+          }
+        }
+      }
+      onKeyDown?.(e);
+    },
+    [onKeyDown]
+  );
+
+  if (disabled) {
+    return pickerValue;
+  }
+
+  return (
+    <div ref={bypassedRef}>
+      <Popup
+        offset={[0, space.s6]}
+        trigger={
+          <div ref={fakeWrapperRef} onClick={stopPropagation}>
+            {pickerValue}
+          </div>
+        }
+        placement="bottom-start"
+        open={open}
+        onOpen={onOpen}
+        onClose={onClose}
+        popupContainerClassName={css`
+          z-index: 10001;
+        `}
+        renderInPortal={renderInPortal}
+        preventOverflowOptions={{
+          altAxis: true,
+        }}
+      >
+        <DateRangePickerPopupContent
+          ref={ref}
+          {..._.omit(props, ["onChange", "value"])}
+          onChange={onDatesChange}
+          value={dateValue}
+          onKeyDown={onDatePickerKeyDown}
+        />
+      </Popup>
+    </div>
+  );
+});
+
+export const ControlledDateRangePicker = withPopupControl(DateRangePicker);