@true-engineering/true-react-common-ui-kit 2.7.0 → 3.0.0-alpha.1

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

@@ -1,181 +1,210 @@
-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 { getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
-import { useTheme, useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
-import { Button } from '../../../Button';
-import { DatePicker } from '../../../DatePicker';
-import { DEFAULT_PICKER_PROPS } from '../../constants';
-import { getLocale } from '../../helpers';
-import {
-  IFilterWithDateDatePickerProps,
-  IFilterLocaleKey,
-  IFilterWithDatesValue,
-  IPartialFilterLocale,
-} from '../../types';
-import { FilterWithDatesStyles, styles } from './FilterWithDates.styles';
-
-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?: IFilterWithDateDatePickerProps;
-  endPickerProps?: IFilterWithDateDatePickerProps;
-}
-
-export const FilterWithDates: FC<IFilterWithDatesProps> = ({
-  value,
-  onChange,
-  localeKey,
-  locale,
-  onStartBtnSubmit,
-  onEndBtnSubmit,
-  data,
-  tweakStyles,
-  testId,
-  startPickerProps = DEFAULT_PICKER_PROPS,
-  endPickerProps = DEFAULT_PICKER_PROPS,
-  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 { getTestId, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../../helpers';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Button } from '../../../Button';
+import { DatePicker } from '../../../DatePicker';
+import { DEFAULT_PICKER_PROPS } from '../../constants';
+import { getLocale } from '../../helpers';
+import {
+  IFilterWithDateDatePickerProps,
+  IFilterLocaleKey,
+  IFilterWithDatesValue,
+  IPartialFilterLocale,
+} from '../../types';
+import {
+  useStyles,
+  IFilterWithDatesStyles,
+  clearButtonStyles,
+  backButtonStyles,
+  startDatePickerWithButtonStyles,
+  startDatePickerStyles,
+  endDatePickerStyles,
+  endDatePickerWithButtonStyles,
+} from './FilterWithDates.styles';
+
+export interface IFilterWithDatesProps extends ICommonProps<IFilterWithDatesStyles> {
+  value?: IFilterWithDatesValue;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  isClearable?: boolean;
+  startPickerProps?: IFilterWithDateDatePickerProps;
+  endPickerProps?: IFilterWithDateDatePickerProps;
+  onChange(val: IFilterWithDatesValue): void;
+  onStartBtnSubmit?(): void;
+  onEndBtnSubmit(): void;
+}
+
+export const FilterWithDates: FC<IFilterWithDatesProps> = ({
+  value,
+  onChange,
+  localeKey,
+  locale,
+  onStartBtnSubmit,
+  onEndBtnSubmit,
+  data,
+  tweakStyles,
+  testId,
+  startPickerProps = DEFAULT_PICKER_PROPS,
+  endPickerProps = DEFAULT_PICKER_PROPS,
+  isClearable = true,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles,
+    tweakStyles,
+    className: 'tweakClearButton',
+    currentComponentName: 'FilterWithDates',
+  });
+
+  const tweakBackButtonStyles = useTweakStyles({
+    innerStyles: backButtonStyles,
+    tweakStyles,
+    className: 'tweakBackButton',
+    currentComponentName: 'FilterWithDates',
+  });
+
+  const hasButtonsRow = isClearable || isNotEmpty(onStartBtnSubmit);
+
+  const tweakStartDatePickerStyles = useTweakStyles({
+    innerStyles: hasButtonsRow ? startDatePickerWithButtonStyles : startDatePickerStyles,
+    tweakStyles,
+    className: 'tweakStartDatePicker',
+    currentComponentName: 'FilterWithDates',
+  });
+
+  const tweakEndDatePickerStyles = useTweakStyles({
+    innerStyles: hasButtonsRow ? endDatePickerWithButtonStyles : endDatePickerStyles,
+    tweakStyles,
+    className: 'tweakEndDatePicker',
+    currentComponentName: 'FilterWithDates',
+  });
+
+  const [isOpenFrom, setOpenFrom] = useState(false);
+  const [isOpenTo, setOpenTo] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const dateLocale = localeKey === 'ru' ? ru : enUS;
+
+  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+
+  const handleClear = () => {
+    onEndBtnSubmit();
+  };
+  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 });
+    }
+  };
+
+  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}
+            tweakStyles={tweakStartDatePickerStyles}
+            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}
+            tweakStyles={tweakEndDatePickerStyles}
+            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/components/FilterWithDates/index.ts

@@ -1,2 +1,2 @@
-export * from './FilterWithDates';
-export type { FilterWithDatesStyles } from './FilterWithDates.styles';
+export * from './FilterWithDates';
+export type { IFilterWithDatesStyles } from './FilterWithDates.styles';

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

@@ -1,17 +1,21 @@
-import { ComponentStyles } from '../../../../types';
-
-export const styles = {
-  root: {},
-
-  main: {},
-
-  picker: {},
-
-  tweakSelect: {
-    options: {
-      maxHeight: 'auto',
-    },
-  },
-};
-
-export type FilterWithPeriodStyles = ComponentStyles<typeof styles>;
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
+import { IFilterSelectStyles } from '../FilterSelect';
+
+export const useStyles = createThemedStyles('FilterWithPeriod', {
+  root: {},
+
+  main: {},
+
+  picker: {},
+});
+
+export const filterSelectStyles: IFilterSelectStyles = {
+  list: {
+    maxHeight: 'auto',
+  },
+};
+
+export type IFilterWithPeriodStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakFilterSelect: IFilterSelectStyles }
+>;