@true-engineering/true-react-common-ui-kit 2.0.1 → 2.1.1

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

@@ -1,210 +1,183 @@
-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, getTestId } 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' | '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],
-  );
-
-  // 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();
-  };
-
-  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}
-            maxDate={value?.to}
-            label={translates.from}
-            months={translates.months}
-            locale={dateLocale}
-            onChangeDate={handleChangeFrom}
-            leftPosition={-20}
-            topPosition={topPosition}
-            border="bottom"
-            testId={getTestId(testId, 'from')}
-            isClearable={isClearable}
-            {...startPickerProps}
-          />
-        </div>
-        <div className={classes.containerItem}>
-          <DatePicker
-            selectedDate={value?.to}
-            label={translates.to}
-            months={translates.months}
-            minDate={value?.from}
-            locale={dateLocale}
-            onChangeDate={handleChangeTo}
-            topPosition={topPosition}
-            leftPosition={-170}
-            border="bottom"
-            testId={getTestId(testId, 'to')}
-            isClearable={isClearable}
-            {...endPickerProps}
-          />
-        </div>
-      </div>
-
-      <div className={classes.btnRow}>
-        {isClearable && (
-          <div>
-            <Button
-              onClick={handleClear}
-              size="s"
-              view="text"
-              testId={getTestId(testId, 'clear-button')}
-              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>
-  );
-};
+import { useState, useMemo, useRef, FC } from 'react';
+import { isAfter, isBefore } from 'date-fns';
+import enUS from 'date-fns/locale/en-US';
+import ru from 'date-fns/locale/ru';
+import { addDataAttributes, getTestId } from '../../../helpers';
+import { useTheme, useTweakStyles } from '../../../hooks';
+import { ICommonProps } from '../../../types';
+import { Button } from '../../Button';
+import { DatePicker, IDatePickerProps } from '../../DatePicker';
+import { getLocale, IFilterLocaleKey, IPartialFilterLocale } from '../locales';
+import { IFilterWithDatesValue } from '../types';
+import { FilterWithDatesStyles, styles } from './FilterWithDates.styles';
+
+type PickerProps = Omit<
+  IDatePickerProps,
+  'onChange' | 'value' | '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]);
+
+  // 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();
+  };
+
+  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}
+            maxDate={value?.to}
+            label={translates.from}
+            months={translates.months}
+            locale={dateLocale}
+            onChangeDate={handleChangeFrom}
+            leftPosition={-20}
+            topPosition={topPosition}
+            border="bottom"
+            testId={getTestId(testId, 'from')}
+            isClearable={isClearable}
+            {...startPickerProps}
+          />
+        </div>
+        <div className={classes.containerItem}>
+          <DatePicker
+            selectedDate={value?.to}
+            label={translates.to}
+            months={translates.months}
+            minDate={value?.from}
+            locale={dateLocale}
+            onChangeDate={handleChangeTo}
+            topPosition={topPosition}
+            leftPosition={-170}
+            border="bottom"
+            testId={getTestId(testId, 'to')}
+            isClearable={isClearable}
+            {...endPickerProps}
+          />
+        </div>
+      </div>
+
+      <div className={classes.btnRow}>
+        {isClearable && (
+          <div>
+            <Button
+              onClick={handleClear}
+              size="s"
+              view="text"
+              testId={getTestId(testId, 'clear-button')}
+              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

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

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

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