@fibery/ui-kit 1.35.0 → 1.36.0

package/src/date-picker/day-with-start-end-buttons.tsx

@@ -0,0 +1,171 @@
+import {KeyboardEventHandler, useContext, useRef} from "react";
+import {ActiveModifiers, Button, DayProps, useDayPicker, useDayRender, useFocusContext} from "react-day-picker";
+import cx from "classnames";
+import {isAfter, isBefore, isSameDay} from "date-fns";
+import {StartEndFocusContext} from "./contexts";
+import {
+  dayButtonsContainerClassName,
+  dayContentClassName,
+  dayWrapper,
+  endButtonClassName,
+  startButtonClassName,
+} from "./styles";
+
+export const copyTime = (prev: Date | null, next: Date) => {
+  if (!prev) {
+    return next;
+  }
+  next.setHours(prev.getHours());
+  next.setMinutes(prev.getMinutes());
+  next.setSeconds(prev.getSeconds());
+  next.setMilliseconds(prev.getMilliseconds());
+  return next;
+};
+
+type DayClickHandler = (
+  dates: {from: Date; to: Date},
+  modifiers: ActiveModifiers,
+  e: React.MouseEvent<HTMLButtonElement>
+) => void;
+
+export const DayWithStartEndButtons = (props: DayProps & {className?: string}) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
+
+  const {
+    focusDayAfter,
+    focusDayBefore,
+    focusWeekAfter,
+    focusWeekBefore,
+    focusMonthBefore,
+    focusMonthAfter,
+    focusYearBefore,
+    focusYearAfter,
+    focusStartOfWeek,
+    focusEndOfWeek,
+  } = useFocusContext();
+
+  const dayPicker = useDayPicker();
+  const {focusOnStart, setFocusOnStart} = useContext(StartEndFocusContext);
+  const onKeyDown: KeyboardEventHandler = (e) => {
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        e.stopPropagation();
+        if (focusOnStart) {
+          dayPicker.dir === "rtl" ? focusDayAfter() : focusDayBefore();
+        } else {
+          setFocusOnStart(true);
+        }
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        e.stopPropagation();
+        if (!focusOnStart) {
+          dayPicker.dir === "rtl" ? focusDayBefore() : focusDayAfter();
+        } else {
+          setFocusOnStart(false);
+        }
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        e.stopPropagation();
+        focusWeekAfter();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        e.stopPropagation();
+        focusWeekBefore();
+        break;
+      case "PageUp":
+        e.preventDefault();
+        e.stopPropagation();
+        e.shiftKey ? focusYearBefore() : focusMonthBefore();
+        break;
+      case "PageDown":
+        e.preventDefault();
+        e.stopPropagation();
+        e.shiftKey ? focusYearAfter() : focusMonthAfter();
+        break;
+      case "Home":
+        e.preventDefault();
+        e.stopPropagation();
+        focusStartOfWeek();
+        break;
+      case "End":
+        e.preventDefault();
+        e.stopPropagation();
+        focusEndOfWeek();
+        break;
+      default:
+        break;
+    }
+    dayPicker.onDayKeyDown?.(props.date, dayRender.activeModifiers, e);
+  };
+
+  if (dayRender.isHidden) {
+    return <></>;
+  }
+  if (!dayRender.isButton) {
+    return <div {...dayRender.divProps} />;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const onDayClick = dayPicker.onDayClick as DayClickHandler | undefined;
+
+  const selected = dayPicker?.selected as {from: Date; to: Date};
+
+  const from = selected?.from;
+  const to = selected?.to;
+  const current = props.date;
+
+  const handleClickStart: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (onDayClick) {
+      onDayClick({from: current, to}, dayRender.activeModifiers, e);
+      setFocusOnStart(true);
+    }
+  };
+
+  const handleClickEnd: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (onDayClick) {
+      onDayClick({from, to: current}, dayRender.activeModifiers, e);
+      setFocusOnStart(false);
+    }
+  };
+
+  const renderStart =
+    from === undefined ||
+    (to === undefined && isBefore(current, from)) ||
+    isAfter(to, current) ||
+    isSameDay(to, current);
+  const renderEnd = from !== undefined && (isBefore(from, current) || isSameDay(from, current));
+
+  return (
+    <div className={dayWrapper}>
+      <div {...dayRender.divProps} className={cx(props.className, dayRender.divProps.className, dayContentClassName)} />
+      <div className={cx(dayButtonsContainerClassName, dayRender.activeModifiers)}>
+        {renderStart && (
+          <Button
+            {...dayRender.buttonProps}
+            ref={!renderEnd || focusOnStart ? buttonRef : null}
+            className={startButtonClassName}
+            onClick={handleClickStart}
+            onKeyDown={onKeyDown}
+            children={null}
+          />
+        )}
+        {renderEnd && (
+          <Button
+            {...dayRender.buttonProps}
+            ref={!renderStart || !focusOnStart ? buttonRef : null}
+            className={endButtonClassName}
+            onClick={handleClickEnd}
+            onKeyDown={onKeyDown}
+            children={null}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,40 @@
+import cn from "classnames";
+import React, {forwardRef} from "react";
+import {activeClassName, disabledClassName, fakeDateInputStyle} from "./styles";
+import {css} from "@linaria/core";
+import {themeVars, transition} from "../design-system";
+import ArrowCollapseVertical from "../icons/react/ArrowCollapseVertical";
+
+type Props = {children: JSX.Element; disabled: boolean; isPickerOpen: boolean};
+
+const expanderExpandedStyle = css`
+  transform: rotate(180deg);
+`;
+
+const expanderStyle = css`
+  transition: transform ${transition};
+`;
+
+export const FakeDateInputWrapper = forwardRef<HTMLDivElement, Props>(function FakeDateInputWrapper(
+  {children, disabled, isPickerOpen},
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        fakeDateInputStyle,
+        css`
+          justify-content: space-between;
+        `,
+        disabled ? disabledClassName : activeClassName
+      )}
+      tabIndex={0}
+    >
+      <div>{children}</div>
+      <div className={cn(expanderStyle, isPickerOpen && expanderExpandedStyle)}>
+        <ArrowCollapseVertical color={themeVars.disabledTextColor} />
+      </div>
+    </div>
+  );
+});

package/src/date-picker/get-weekends-for-month.ts

@@ -0,0 +1,7 @@
+import {eachDayOfInterval, endOfMonth, getISODay, startOfMonth} from "date-fns";
+
+export const getWeekendsForMonth = (date: Date, weekends: number[]) => {
+  const start = startOfMonth(date);
+  const end = endOfMonth(date);
+  return eachDayOfInterval({start, end}).filter((date) => weekends.includes(getISODay(date)));
+};

package/src/date-picker/rc-input-types.ts

@@ -0,0 +1,11 @@
+export interface InputFocusOptions extends FocusOptions {
+  cursor?: "start" | "end" | "all";
+}
+
+export interface InputRef {
+  focus: (options?: InputFocusOptions) => void;
+  blur: () => void;
+  setSelectionRange: (start: number, end: number, direction?: "forward" | "backward" | "none") => void;
+  select: () => void;
+  input: HTMLInputElement | null;
+}

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

@@ -0,0 +1,141 @@
+import {css} from "@linaria/core";
+import {space, textStyles, themeVars} from "../design-system";
+import {SingleRowSelect as SingleRowReactSelect, SingleValue} from "../select";
+import {AlwaysVisibleDropdownIndicator} from "../select/custom-select-partials/drop-down-indicator";
+import {RelativeDateValue} from "./types";
+import {useCallback, useMemo, useState} from "react";
+import {$TSFixMe} from "../tsfixme";
+import {AntInputNumber} from "../antd/input-number";
+
+type RelativeDatePickerProps = {
+  value: RelativeDateValue | null;
+  onChange: (value: RelativeDateValue) => void;
+  relativeDateToExactDate?: (value: RelativeDateValue) => string;
+};
+
+const unitOptions = [
+  {value: "day", label: "days"},
+  {value: "week", label: "weeks"},
+  {value: "month", label: "months"},
+  {value: "year", label: "years"},
+];
+
+const isBeforeNowOptions = [
+  {value: "ago", label: "ago"},
+  {value: "from now", label: "from now"},
+];
+
+const blurOnEnter = (e: $TSFixMe) => {
+  if (e.key === "Enter") {
+    e.target.blur();
+  }
+};
+
+export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
+  const {value, onChange, relativeDateToExactDate} = props;
+
+  const valueWithDefault = useMemo(() => value ?? {unit: "day", isBeforeNow: true, amount: 0}, [value]);
+
+  const onUnitChange = useCallback(
+    (newUnit: SingleValue<{value: string}>) => {
+      onChange({...valueWithDefault, unit: newUnit!.value});
+    },
+    [valueWithDefault, onChange]
+  );
+
+  const [amount, setAmount] = useState(valueWithDefault.amount);
+  const onAmountChange = useCallback((newAmount: $TSFixMe) => {
+    if (newAmount === null || newAmount < 0) {
+      setAmount(0);
+    } else {
+      setAmount(Math.floor(newAmount));
+    }
+  }, []);
+  const handleBlur = useCallback(() => {
+    onChange({...valueWithDefault, amount});
+  }, [onChange, amount, valueWithDefault]);
+
+  const onIsBeforeNowChange = useCallback(
+    (newValue: SingleValue<{value: string}>) => {
+      onChange({...valueWithDefault, isBeforeNow: newValue!.value === "ago"});
+    },
+    [valueWithDefault, onChange]
+  );
+
+  return (
+    <div
+      className={css`
+        padding: ${space.s12}px;
+        display: flex;
+        flex-direction: column;
+        gap: ${space.s12}px;
+      `}
+    >
+      <div
+        className={css`
+          display: flex;
+          gap: ${space.s8}px;
+        `}
+      >
+        <div>
+          <AntInputNumber
+            autoFocus={true}
+            value={valueWithDefault.amount}
+            controls={false}
+            style={{width: "56px"}}
+            onBlur={handleBlur}
+            onChange={onAmountChange}
+            onKeyDown={blurOnEnter}
+          />
+        </div>
+        <div
+          className={css`
+            flex: 1;
+          `}
+        >
+          <SingleRowReactSelect
+            value={unitOptions.find((option) => option.value === valueWithDefault.unit)}
+            components={{
+              DropdownIndicator: AlwaysVisibleDropdownIndicator,
+            }}
+            isCollectionMode={false}
+            options={unitOptions}
+            onChange={onUnitChange}
+            isSearchable={true}
+            virtualized={false}
+            menuShouldBlockScroll
+          />
+        </div>
+        <div
+          className={css`
+            flex: 1;
+          `}
+        >
+          <SingleRowReactSelect
+            value={isBeforeNowOptions.find(
+              (option) => option.value === (valueWithDefault.isBeforeNow ? "ago" : "from now")
+            )}
+            components={{
+              DropdownIndicator: AlwaysVisibleDropdownIndicator,
+            }}
+            isCollectionMode={false}
+            options={isBeforeNowOptions}
+            onChange={onIsBeforeNowChange}
+            isSearchable={true}
+            virtualized={false}
+            menuShouldBlockScroll
+          />
+        </div>
+      </div>
+      <div
+        className={css`
+          padding: ${space.s4}px;
+          ${{...textStyles.heading6}}
+          color: ${themeVars.accentTextColor};
+        `}
+      >
+        {relativeDateToExactDate?.(valueWithDefault)}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,239 @@
+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 {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 {InputRef} from "./rc-input-types";
+import {disabledStyle, selectedStyle} from "./styles";
+import {formatDateInputValue, getLocaleSpecificChrono, getTimeIntervals, setTime} from "./utils";
+
+export const SingleDateInput = forwardRef<
+  {setValue: (value: string) => void},
+  {
+    value: Date | null;
+    showTime: boolean;
+    dateFormat?: string;
+    timeFormat?: string;
+    dateTimeFormat?: string;
+    onMonthChange: MonthChangeEventHandler;
+    onChange: (value: Date | null) => void;
+    initialInputValue: string;
+    allowClear: boolean;
+    disabled: boolean;
+    placeholder: string;
+    autoFocus: boolean;
+  }
+>(
+  (
+    {
+      value,
+      showTime,
+      dateFormat,
+      timeFormat,
+      dateTimeFormat,
+      onMonthChange,
+      onChange,
+      initialInputValue,
+      allowClear,
+      disabled,
+      placeholder,
+      autoFocus,
+    },
+    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 inputRef = useRef<InputRef>(null);
+    useImperativeHandle(ref, () => {
+      return {
+        setValue(v) {
+          setInputValue(v);
+        },
+      };
+    });
+    useEffect(() => {
+      if (inputRef.current && autoFocus) {
+        inputRef.current.focus({
+          cursor: "all",
+        });
+      }
+    }, [autoFocus]);
+
+    const onChangeInput = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => {
+        setInputValue(e.target.value);
+      },
+      []
+    );
+
+    const [timeAutoComplete, setTimeAutoComplete] = useState(false);
+
+    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 && value) {
+          // wait until click will be applied to input
+          timeoutIdRef.current = setTimeout(() => {
+            if (input.selectionStart !== null) {
+              const timeInterval = getTimeIntervals(input.value);
+
+              if (input.selectionStart >= timeInterval[0] && input.selectionStart <= timeInterval[1]) {
+                setTimeAutoComplete(true);
+              } else {
+                setTimeAutoComplete(false);
+              }
+            }
+          }, 0);
+        }
+      },
+      [showTime, value]
+    );
+
+    useEffect(() => {
+      return () => {
+        if (timeoutIdRef.current) {
+          clearTimeout(timeoutIdRef.current);
+        }
+      };
+    }, []);
+
+    const onTimeClick = useCallback(
+      (time: string) => {
+        setTimeAutoComplete(false);
+        const newValue = setTime(value, time, timeFormat);
+        onChange(newValue);
+        setInputValue(formatDateInputValue(newValue, {showTime, dateFormat, dateTimeFormat}));
+      },
+      [onChange, showTime, dateFormat, timeFormat, dateTimeFormat, value]
+    );
+
+    const onTimeSelect = useCallback(
+      (option: OnChangeArgs) => (option ? onTimeClick(option.value) : null),
+      [onTimeClick]
+    );
+
+    const onClear = useCallback(() => {
+      onChange(null);
+      inputRef.current?.focus();
+    }, [onChange]);
+
+    const onSaveValue = useCallback(
+      (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        if (inputValue === "") {
+          if (allowClear) {
+            onClear();
+          } else {
+            setInputValue(formatDateInputValue(value, {showTime, dateFormat, dateTimeFormat}));
+          }
+        }
+
+        const [result] = getLocaleSpecificChrono().parse(inputValue);
+        if (result && result.start) {
+          const newValue = result.start.date();
+          onChange(newValue);
+          setInputValue(formatDateInputValue(newValue, {showTime, dateFormat, dateTimeFormat}));
+          onMonthChange(newValue);
+        } else {
+          setInputValue(prevInputValue || "");
+        }
+      },
+      [
+        allowClear,
+        inputValue,
+        onChange,
+        onClear,
+        onMonthChange,
+        prevInputValue,
+        showTime,
+        dateFormat,
+        dateTimeFormat,
+        value,
+      ]
+    );
+
+    const onBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(
+      (e) => {
+        if (e.target.value !== initialInputValue) {
+          onSaveValue(e);
+        }
+        setTimeAutoComplete(false);
+        setSelected(false);
+      },
+      [initialInputValue, onSaveValue]
+    );
+
+    const onFocus = useCallback(() => {
+      setSelected(true);
+    }, []);
+
+    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>
+            <AntTransparentInput
+              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={timeAutoComplete}
+              value={value}
+              timeFormat={timeFormat}
+              onChange={onTimeSelect}
+              position={0}
+            />
+          </div>
+          {allowClear && inputValue !== "" && (
+            <IconButton onClick={onClear} size={"tiny"}>
+              <RemoveIcon />
+            </IconButton>
+          )}
+        </div>
+      </div>
+    );
+  }
+);

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

@@ -0,0 +1,90 @@
+import {DatePickerCommonProps, NativeSingleDatePickerProps} from "./types";
+import {forwardRef, useCallback, useMemo, useRef, useState} from "react";
+import {DayPicker} from "react-day-picker";
+import enGB from "date-fns/locale/en-GB";
+import {SingleDateInput} from "./single-date-input";
+import {copyTime} from "./day-with-start-end-buttons";
+import {formatDateInputValue, getRandomPlaceholder} from "./utils";
+import {
+  datePickerStylesOverrideClassName,
+  outsideClassName,
+  selectedSingleDateClassName,
+  todayClassName,
+  weekendClassName,
+} from "./styles";
+import {getWeekendsForMonth} from "./get-weekends-for-month";
+
+export const SingleDatePickerPopupContent = forwardRef<
+  {setValue: (value: string) => void},
+  DatePickerCommonProps & NativeSingleDatePickerProps
+>(function SingleDatePickerPopupContent(props, ref) {
+  const {
+    value,
+    onChange,
+    disabled = false,
+    showTime = false,
+    allowClear = true,
+    dateFormat,
+    timeFormat,
+    dateTimeFormat,
+    onKeyDown,
+    bypassedRef,
+    weekStartsOn,
+    weekends,
+  } = props;
+  const [month, setMonth] = useState(value || new Date());
+  const dateValue = value;
+  const onDayClick = useCallback(
+    (date: Date) => {
+      onChange(copyTime(dateValue, date));
+    },
+    [dateValue, onChange]
+  );
+
+  const inputValue = formatDateInputValue(value, {showTime, dateFormat, dateTimeFormat});
+  const placeholder = useRef<string>(`e.g. ${getRandomPlaceholder(showTime, false)}`);
+
+  const weekendsForMonth = useMemo(() => getWeekendsForMonth(month, weekends), [month, weekends]);
+
+  return (
+    <div className={datePickerStylesOverrideClassName} ref={bypassedRef} onKeyDown={onKeyDown}>
+      <SingleDateInput
+        ref={ref}
+        value={dateValue}
+        showTime={showTime}
+        dateFormat={dateFormat}
+        timeFormat={timeFormat}
+        dateTimeFormat={dateTimeFormat}
+        onMonthChange={setMonth}
+        onChange={onChange}
+        initialInputValue={inputValue}
+        allowClear={allowClear}
+        disabled={disabled}
+        placeholder={placeholder.current}
+        autoFocus
+      />
+      <DayPicker
+        mode={"single"}
+        numberOfMonths={1}
+        showOutsideDays
+        month={month}
+        onMonthChange={setMonth}
+        modifiers={{
+          weekend: weekendsForMonth,
+        }}
+        modifiersClassNames={{
+          selected: selectedSingleDateClassName,
+          today: todayClassName,
+          outside: outsideClassName,
+          weekend: weekendClassName,
+        }}
+        selected={dateValue || undefined}
+        onDayClick={onDayClick}
+        disabled={disabled}
+        locale={enGB}
+        weekStartsOn={weekStartsOn}
+        fixedWeeks
+      />
+    </div>
+  );
+});