@true-engineering/true-react-common-ui-kit 1.0.1

package/src/components/FiltersPane/FilterWithDates/FilterWithDates.tsx

@@ -0,0 +1,222 @@
+import { useState, useMemo, useRef, FC } from 'react';
+import { isAfter, isBefore } from 'date-fns';
+import ru from 'date-fns/locale/ru';
+import enUS from 'date-fns/locale/en-US';
+
+import { ICommonProps } from '../../../types';
+import { addDataAttributes } from '../../../helpers';
+import { useTheme, useTweakStyles } from '../../../hooks';
+import { DatePicker, IDatePickerProps } from '../../DatePicker';
+import { Button } from '../../Button';
+import { IFilterWithDatesValue } from '../types';
+import { getLocale, IFilterLocaleKey, IPartialFilterLocale } from '../locales';
+
+import { FilterWithDatesStyles, styles } from './FilterWithDates.styles';
+
+type PickerProps = Omit<
+  IDatePickerProps,
+  | 'onChange'
+  | 'value'
+  | 'isNeedClearSelectedDate'
+  | 'locale'
+  | 'months'
+  | 'selectedDate'
+>;
+
+const emptyPickerProps = {};
+
+export interface IFilterWithDatesProps extends ICommonProps {
+  tweakStyles?: FilterWithDatesStyles;
+  value?: IFilterWithDatesValue;
+  onChange: (val: IFilterWithDatesValue) => void;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  onStartBtnSubmit?: () => void;
+  onEndBtnSubmit: () => void;
+  testId?: string;
+  isClearable?: boolean;
+  startPickerProps?: PickerProps;
+  endPickerProps?: PickerProps;
+}
+
+export const DATE_FORMAT = 'dd.MM.yyyy';
+
+export const FilterWithDates: FC<IFilterWithDatesProps> = ({
+  value,
+  onChange,
+  localeKey,
+  locale,
+  onStartBtnSubmit,
+  onEndBtnSubmit,
+  data,
+  tweakStyles,
+  testId,
+  startPickerProps = emptyPickerProps,
+  endPickerProps = emptyPickerProps,
+  isClearable = true,
+}) => {
+  const { classes, componentStyles } = useTheme(
+    'FilterWithDates',
+    styles,
+    tweakStyles,
+  );
+
+  const [isOpenFrom, setOpenFrom] = useState(false);
+  const [isOpenTo, setOpenTo] = useState(false);
+  const dateLocale = localeKey === 'ru' ? ru : enUS;
+  const translates = useMemo(
+    () => getLocale(localeKey, locale),
+    [localeKey, locale],
+  );
+
+  const [isNeedClearSelectedDate, setNeedClearSelectedDate] = useState(false);
+
+  // When we don't have a buttons row, we need to decrease margin-top.
+  // 60(old margin) - 32(buttons row) = 28;
+  const topPosition = !isClearable && onStartBtnSubmit === undefined ? 28 : 60;
+
+  const handleClear = () => {
+    onEndBtnSubmit();
+    setNeedClearSelectedDate(!isNeedClearSelectedDate);
+  };
+
+  const ref = useRef<HTMLDivElement>(null);
+  const isOpenCalendar = isOpenFrom || isOpenTo;
+
+  const handleFromSelected = (val: Date | null) => {
+    onChange({ from: val, to: value?.to ?? null });
+    setOpenFrom(false);
+  };
+
+  const handleToSelected = (val: Date | null) => {
+    onChange({ from: value?.from ?? null, to: val });
+    setOpenTo(false);
+  };
+
+  const handleChangeFrom = (val: Date | null) => {
+    // на самом деле ситуации когда надо переворачивать даты, произойти не может
+    if (
+      val !== null &&
+      value !== undefined &&
+      value.to !== null &&
+      isAfter(val, value.to)
+    ) {
+      onChange({ from: value.to, to: val });
+    } else {
+      onChange({ from: val, to: value?.to ?? null });
+    }
+  };
+
+  const handleChangeTo = (val: Date | null) => {
+    // на самом деле ситуации когда надо переворачивать даты, произойти не может
+    if (
+      val !== null &&
+      value !== undefined &&
+      value.from !== null &&
+      isBefore(val, value.from)
+    ) {
+      onChange({ from: val, to: value.from });
+    } else {
+      onChange({ from: value?.from ?? null, to: val });
+    }
+  };
+
+  const tweakClearButtonStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakClearButton',
+  );
+
+  const tweakBackButtonStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakBackButton',
+  );
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data)}>
+      <div className={classes.container}>
+        <div className={classes.containerItem}>
+          <DatePicker
+            selectedDate={value?.from ?? null}
+            maxDate={value?.to}
+            label={translates.from}
+            months={translates.months}
+            locale={dateLocale}
+            onChangeDate={handleChangeFrom}
+            leftPosition={-20}
+            topPosition={topPosition}
+            isNeedClearSelectedDate={isNeedClearSelectedDate}
+            border="bottom"
+            testId={testId !== undefined ? `${testId}-from` : undefined}
+            isClearable={isClearable}
+            {...startPickerProps}
+          />
+        </div>
+        <div className={classes.containerItem}>
+          <DatePicker
+            selectedDate={value?.to ?? null}
+            label={translates.to}
+            months={translates.months}
+            minDate={value?.from}
+            locale={dateLocale}
+            onChangeDate={handleChangeTo}
+            topPosition={topPosition}
+            leftPosition={-170}
+            isNeedClearSelectedDate={isNeedClearSelectedDate}
+            border="bottom"
+            testId={testId !== undefined ? `${testId}-to` : undefined}
+            isClearable={isClearable}
+            {...endPickerProps}
+          />
+        </div>
+      </div>
+
+      <div className={classes.btnRow}>
+        {isClearable && (
+          <div>
+            <Button
+              onClick={handleClear}
+              size="s"
+              view="text"
+              testId={
+                testId !== undefined ? `${testId}-clear-button` : undefined
+              }
+              isFullWidth
+              tweakStyles={tweakClearButtonStyles}
+            >
+              {translates.clear}
+            </Button>
+          </div>
+        )}
+
+        {onStartBtnSubmit && (
+          <div>
+            <Button
+              onClick={onStartBtnSubmit}
+              size="s"
+              view="text"
+              isFullWidth
+              tweakStyles={tweakBackButtonStyles}
+            >
+              {translates.back}
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {isOpenCalendar && (
+        <div ref={ref} className={classes.datepicker}>
+          <DatePicker
+            selectedDate={(isOpenFrom ? value?.from : value?.to) ?? null}
+            label=""
+            locale={dateLocale}
+            months={translates.months}
+            isInline
+            onChangeDate={isOpenFrom ? handleFromSelected : handleToSelected}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/FiltersPane/FilterWithDates/index.ts

@@ -0,0 +1 @@
+export * from './FilterWithDates';

package/src/components/FiltersPane/FilterWithPeriod/FilterWithPeriod.styles.ts

@@ -0,0 +1,17 @@
+import { ComponentStyles } from '../../../types';
+
+export const styles = {
+  root: {},
+
+  main: {},
+
+  picker: {},
+
+  tweakSelect: {
+    options: {
+      maxHeight: 'auto',
+    },
+  },
+};
+
+export type FilterWithPeriodStyles = ComponentStyles<typeof styles>;

package/src/components/FiltersPane/FilterWithPeriod/FilterWithPeriod.tsx

@@ -0,0 +1,231 @@
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  endOfMonth,
+  endOfYear,
+  startOfMonth,
+  startOfYear,
+  sub,
+} from 'date-fns';
+
+import { FilterWithDates } from '../FilterWithDates';
+import { useTheme, useOnClickOutside, useTweakStyles } from '../../../hooks';
+import { ICommonProps } from '../../../types';
+import {
+  IDatePeriod,
+  IPeriod,
+  IPeriodGetter,
+  IPeriodsList,
+  PERIODS,
+} from '../types';
+import { FilterSelect } from '../FilterSelect';
+import { IFilterLocaleKey, getLocale, IPartialFilterLocale } from '../locales';
+
+import { FilterWithPeriodStyles, styles } from './FilterWithPeriod.styles';
+
+export interface IFilterWithPeriodProps extends ICommonProps {
+  tweakStyles?: FilterWithPeriodStyles;
+  value?: IPeriod;
+  onChange: (period?: IPeriod) => void;
+  onClose?: () => void;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  periods?: IPeriodsList;
+  testId?: string;
+}
+
+const PERIODS_GETTERS: Record<string, IPeriodGetter> = {
+  THIS_MONTH: () => {
+    const today = new Date();
+    return {
+      from: startOfMonth(today),
+      to: endOfMonth(today),
+    };
+  },
+  LAST_MONTH: () => {
+    const day = sub(new Date(), { months: 1 });
+    return {
+      from: startOfMonth(day),
+      to: endOfMonth(day),
+    };
+  },
+  THIS_YEAR: () => {
+    const today = new Date();
+    return {
+      from: startOfYear(today),
+      to: endOfYear(today),
+    };
+  },
+  LAST_YEAR: () => {
+    const day = sub(new Date(), { years: 1 });
+    return {
+      from: startOfYear(day),
+      to: endOfYear(day),
+    };
+  },
+};
+
+export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
+  value,
+  localeKey,
+  locale,
+  onChange,
+  onClose,
+  periods,
+  tweakStyles,
+  testId,
+}) => {
+  const { classes, componentStyles } = useTheme(
+    'FilterWithPeriod',
+    styles,
+    tweakStyles,
+  );
+
+  const translates = useMemo(
+    () => getLocale(localeKey, locale),
+    [localeKey, locale],
+  );
+
+  const [isPeriodPickerShown, setIsPeriodPickerShown] = useState(
+    value?.periodType !== 'CUSTOM',
+  );
+
+  const [isDatePickerShown, setIsDatePickerShown] = useState(
+    value?.periodType === 'CUSTOM',
+  );
+
+  const [period, setPeriod] = useState<IPeriod | undefined>(value);
+
+  const periodGetters = useMemo(() => {
+    const result: Record<string, IPeriodGetter> = { ...PERIODS_GETTERS };
+    periods?.forEach((p) => {
+      if (Array.isArray(p)) {
+        result[p[0]] = p[1];
+      }
+    });
+    return result;
+  }, [periods]);
+
+  const periodsList = useMemo(() => {
+    if (periods === undefined) {
+      return [...PERIODS];
+    }
+    return periods.map((p) => (Array.isArray(p) ? p[0] : p));
+  }, [periods]);
+
+  const getPeriodTranslate = useCallback(
+    (val: string) => translates.periods[val] ?? val,
+    [translates.periods],
+  );
+
+  const handlePeriodChange = (periodType: string) => {
+    let from = null;
+    let to = null;
+
+    if (periodType in periodGetters) {
+      const newPeriod = periodGetters[periodType]();
+      from = newPeriod.from;
+      to = newPeriod.to;
+    }
+
+    const p = { from, to, periodType };
+    setPeriod(p);
+
+    if (periodType === 'CUSTOM') {
+      setIsDatePickerShown(true);
+    } else {
+      if (onClose !== undefined) {
+        onClose();
+      }
+      onChange({ ...p, label: getPeriodTranslate(periodType) });
+    }
+
+    setIsPeriodPickerShown(false);
+  };
+
+  const refPeriodPicker = useRef<HTMLDivElement>(null);
+  const refDatePicker = useRef<HTMLDivElement>(null);
+
+  const onPeriodChange = (val?: string) => {
+    if (val !== undefined) {
+      handlePeriodChange(val);
+    } else {
+      onChange(undefined);
+      if (onClose !== undefined) {
+        onClose();
+      }
+    }
+  };
+
+  const handleCustomDateChange = (val: IDatePeriod): void => {
+    if (val.from || val.to) {
+      onChange({
+        ...val,
+        periodType: 'CUSTOM',
+      });
+    } else {
+      onChange(undefined);
+    }
+  };
+
+  useOnClickOutside(refDatePicker, () => {
+    if (!period?.from && !period?.to) {
+      setPeriod(undefined);
+    }
+    setIsDatePickerShown(false);
+  });
+
+  useEffect(() => {
+    setPeriod(value);
+  }, [value, value?.from, value?.to, value?.periodType]);
+
+  const tweakSelectStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakSelect',
+  );
+
+  return (
+    <div className={classes.root}>
+      {isPeriodPickerShown && (
+        <div className={classes.main} ref={refPeriodPicker}>
+          <FilterSelect
+            options={periodsList}
+            value={period?.periodType}
+            onChange={onPeriodChange}
+            localeKey={localeKey}
+            locale={translates}
+            tweakStyles={tweakSelectStyles}
+            getValueView={getPeriodTranslate}
+            testId={testId !== undefined ? `${testId}-select` : undefined}
+          />
+        </div>
+      )}
+      {isDatePickerShown && (
+        <div
+          className={classes.picker}
+          style={{ width: 320 }}
+          ref={refDatePicker}
+        >
+          <FilterWithDates
+            onStartBtnSubmit={() => {
+              setIsDatePickerShown(false);
+              setIsPeriodPickerShown(true);
+            }}
+            onEndBtnSubmit={() => {
+              onChange(undefined);
+              setIsDatePickerShown(false);
+              if (onClose !== undefined) {
+                onClose();
+              }
+            }}
+            value={period}
+            onChange={handleCustomDateChange}
+            localeKey={localeKey}
+            locale={translates}
+            testId={testId !== undefined ? `${testId}-dates` : undefined}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/FiltersPane/FilterWithPeriod/index.ts

@@ -0,0 +1 @@
+export * from './FilterWithPeriod';

package/src/components/FiltersPane/FilterWrapper/FilterWrapper.styles.ts

@@ -0,0 +1,110 @@
+import { colors } from '../../../theme';
+import { FILTER_HEIGHT } from '../FiltersPane.styles';
+import { ComponentStyles } from '../../../types';
+
+export const styles = {
+  root: {
+    position: 'relative',
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'background-color, border-color',
+    border: [1, 'solid', colors.BORDER_MAIN],
+    borderRadius: 18,
+    boxSizing: 'border-box',
+    height: FILTER_HEIGHT,
+    minWidth: 0,
+  },
+
+  item: {
+    display: 'flex',
+    padding: [0, 8, 0, 16],
+    cursor: 'pointer',
+  },
+
+  booleanItem: {
+    padding: 0,
+  },
+
+  name: {
+    fontSize: 14,
+    lineHeight: '34px',
+    whiteSpace: 'nowrap',
+  },
+
+  boolean: {
+    padding: [0, 16],
+  },
+
+  noValue: {},
+
+  openNoValue: {},
+
+  openWithValue: {},
+
+  disabled: {
+    '& > $item': {
+      cursor: 'default',
+    },
+  },
+
+  withValue: {},
+
+  iconContainer: {
+    width: 20,
+    height: 20,
+    transition: 'transform .2s ease-in-out',
+    alignSelf: 'center',
+    marginLeft: 6,
+    marginRight: 4,
+    flexShrink: 0,
+  },
+
+  open: {
+    transform: 'rotate(180deg)',
+  },
+
+  dropdown: {
+    position: 'absolute',
+    zIndex: 20,
+    marginTop: 6,
+    border: [1, colors.BORDER_MAIN, 'solid'],
+  },
+
+  left: {
+    left: 0,
+  },
+
+  right: {
+    right: 0,
+  },
+
+  value: {
+    alignSelf: 'center',
+    fontSize: 14,
+    lineHeight: '16px',
+    margin: [0, 2, 0, 8],
+    fontWeight: 'bold',
+    display: 'flex',
+    minWidth: 0,
+  },
+
+  animationEnd: {
+    opacity: 0,
+    transform: 'translateY(15px)',
+    transition: '0.15s ease-in-out',
+    transitionProperty: 'opacity, transform',
+  },
+
+  animationStart: {
+    opacity: 1,
+    transform: 'translateY(0)',
+    transition: '0.15s ease-in-out',
+    transitionProperty: 'opacity, transform',
+  },
+
+  'dropdown-enter': { extend: 'animationEnd' },
+  'dropdown-enter-active': { extend: 'animationStart' },
+  'dropdown-exit-active': { extend: 'animationStart' },
+  'dropdown-exit': { extend: 'animationEnd' },
+};
+
+export type FilterWrapperStyles = ComponentStyles<typeof styles>;