@true-engineering/true-react-common-ui-kit 4.0.0-alpha4 → 4.0.0-alpha40

package/src/components/DateInput/DateInput.tsx

@@ -1,90 +1,89 @@
-import { ChangeEvent, forwardRef, MouseEvent } from 'react';
-import clsx from 'clsx';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { IChangeInputEvent, IInputProps, Input } from '../Input';
-import { EMPTY_DATE_INPUT_VALUE, EMPTY_DATE_RANGE_INPUT_VALUE } from './constants';
-import { IDateInputStyles, useStyles } from './DateInput.styles';
-
-export interface IDateInputProps
-  extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange' | 'tweakStyles'>,
-    ICommonProps<IDateInputStyles> {
-  date?: string;
-  /** @default  '' */
-  startDate?: string;
-  /** @default '' */
-  endDate?: string;
-  className?: string;
-  /** @default false */
-  isRange?: boolean;
-  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-  // react-datepicker ожидает event первым аргументом
-  onChange?: (event: IChangeInputEvent, value: string) => void;
-}
-
-export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
-  (
-    {
-      date,
-      startDate = '',
-      endDate = '',
-      mask,
-      className,
-      placeholder,
-      data,
-      isRange = false,
-      tweakStyles,
-      onClick,
-      onChange,
-      ...inputProps
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const tweakInputStyles = useTweakStyles({
-      tweakStyles,
-      className: 'tweakInput',
-      currentComponentName: 'DateInput',
-    });
-
-    const beforeMaskedStateChange: IInputProps['beforeMaskedStateChange'] = ({ nextState }) => {
-      // Если в инпуте отсутствует введенное значение, то выставляем
-      // пустую строку для корректной работы react-datepicker
-      if (
-        nextState.value === EMPTY_DATE_INPUT_VALUE ||
-        nextState.value === EMPTY_DATE_RANGE_INPUT_VALUE
-      ) {
-        return { value: '', selection: { start: 0, end: 0 } };
-      }
-      return nextState;
-    };
-
-    const handleChange: IInputProps['onChange'] = (value, event) => {
-      // Событие click срабатывает только при нажатии на кнопку очистки
-      if (event.type === 'click') {
-        // react-datepicker ожидает пустую строку в event.target.value
-        (event as ChangeEvent<HTMLInputElement>).target.value = '';
-      }
-      onChange?.(event, value);
-    };
-
-    return (
-      <div className={clsx(classes.root, className)} onClick={onClick} {...addDataAttributes(data)}>
-        <Input
-          {...inputProps}
-          ref={ref}
-          value={isRange ? `${startDate}${endDate}` : date}
-          mask={mask ?? (isRange ? '99.99.9999 - 99.99.9999' : '99.99.9999')}
-          placeholder={
-            placeholder ?? (isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE)
-          }
-          tweakStyles={tweakInputStyles}
-          onChange={handleChange}
-          beforeMaskedStateChange={beforeMaskedStateChange}
-        />
-      </div>
-    );
-  },
-);
+import { ChangeEvent, forwardRef } from 'react';
+import clsx from 'clsx';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { IChangeInputEvent, IInputProps, Input } from '../Input';
+import { EMPTY_DATE_INPUT_VALUE, EMPTY_DATE_RANGE_INPUT_VALUE } from './constants';
+import { IDateInputStyles, useStyles } from './DateInput.styles';
+
+export interface IDateInputProps
+  extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange' | 'tweakStyles'>,
+    ICommonProps<IDateInputStyles> {
+  date?: string;
+  /** @default  '' */
+  startDate?: string;
+  /** @default '' */
+  endDate?: string;
+  className?: string;
+  /** @default false */
+  isRange?: boolean;
+  // react-datepicker ожидает event первым аргументом
+  onChange?: (event: IChangeInputEvent, value: string) => void;
+}
+
+export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
+  (
+    {
+      date,
+      startDate = '',
+      endDate = '',
+      mask,
+      className,
+      placeholder,
+      data,
+      isRange = false,
+      tweakStyles,
+      onClick,
+      onChange,
+      ...inputProps
+    },
+    ref,
+  ) => {
+    const classes = useStyles({ theme: tweakStyles });
+
+    const tweakInputStyles = useTweakStyles({
+      tweakStyles,
+      className: 'tweakInput',
+      currentComponentName: 'DateInput',
+    });
+
+    const beforeMaskedStateChange: IInputProps['beforeMaskedStateChange'] = ({ nextState }) => {
+      // Если в инпуте отсутствует введенное значение, то выставляем
+      // пустую строку для корректной работы react-datepicker
+      if (
+        nextState.value === EMPTY_DATE_INPUT_VALUE ||
+        nextState.value === EMPTY_DATE_RANGE_INPUT_VALUE
+      ) {
+        return { value: '', selection: { start: 0, end: 0 } };
+      }
+      return nextState;
+    };
+
+    const handleChange: IInputProps['onChange'] = (value, event) => {
+      // Событие click срабатывает только при нажатии на кнопку очистки
+      if (event.type === 'click') {
+        // react-datepicker ожидает пустую строку в event.target.value
+        (event as ChangeEvent<HTMLInputElement>).target.value = '';
+      }
+      onChange?.(event, value);
+    };
+
+    return (
+      <div className={clsx(classes.root, className)} {...addDataAttributes(data)} onClick={onClick}>
+        <Input
+          {...inputProps}
+          ref={ref}
+          value={isRange ? `${startDate}${endDate}` : date}
+          mask={mask ?? (isRange ? '99.99.9999 - 99.99.9999' : '99.99.9999')}
+          placeholder={
+            placeholder ?? (isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE)
+          }
+          tweakStyles={tweakInputStyles}
+          onChange={handleChange}
+          beforeMaskedStateChange={beforeMaskedStateChange}
+        />
+      </div>
+    );
+  },
+);

package/src/components/DateInput/constants.ts

@@ -1,2 +1,2 @@
-export const EMPTY_DATE_INPUT_VALUE = '__.__.____';
-export const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;
+export const EMPTY_DATE_INPUT_VALUE = '__.__.____';
+export const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;

package/src/components/DateInput/index.ts

@@ -1,3 +1,3 @@
-export * from './DateInput';
-export type { IDateInputStyles } from './DateInput.styles';
-export * from './constants';
+export * from './DateInput';
+export type { IDateInputStyles } from './DateInput.styles';
+export * from './constants';

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,88 +1,101 @@
-import { useState } from 'react';
-import ru from 'date-fns/locale/ru';
-import { ComponentStory } from '@storybook/react';
-import { DatePicker } from './DatePicker';
-
-const months = [
-  'Январь',
-  'Февраль',
-  'Март',
-  'Апрель',
-  'Май',
-  'Июнь',
-  'Июль',
-  'Август',
-  'Сентябрь',
-  'Октябрь',
-  'Ноябрь',
-  'Декабрь',
-];
-
-export default {
-  title: 'Inputs/DatePicker',
-  component: DatePicker,
-};
-
-const Template: ComponentStory<typeof DatePicker> = (args) => {
-  const [date, setDate] = useState<Date | null>(null);
-
-  const [startDate, setStartDate] = useState<Date | null>(
-    args.startDate ? new Date(args.startDate) : null,
-  );
-  const [endDate, setEndDate] = useState<Date | null>(args.endDate ? new Date(args.endDate) : null);
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: 600,
-        overflow: 'auto',
-        border: '1px dotted rgba(0,0,0,.2)',
-        width: 800,
-      }}
-    >
-      <div style={{ display: 'flex', height: 48 }}>
-        <DatePicker
-          {...args}
-          locale={ru}
-          testId="datepicker"
-          months={months}
-          selectedDate={date}
-          startDate={startDate}
-          endDate={endDate}
-          onChangeDate={setDate}
-          onChangeRange={(dates) => {
-            setStartDate(dates?.[0] ?? null);
-            setEndDate(dates?.[1] ?? null);
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Дата',
-  isRange: false,
-  isClearable: true,
-  shouldRenderPopperInBody: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'data',
-      'testId',
-      'tabIndex',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onIconClick',
-      'onKeyDown',
-    ],
-  },
-};
+import { useState } from 'react';
+import { ru } from 'date-fns/locale';
+import { ComponentStory } from '@storybook/react';
+import { DatePicker } from './DatePicker';
+
+const months = [
+  'Январь',
+  'Февраль',
+  'Март',
+  'Апрель',
+  'Май',
+  'Июнь',
+  'Июль',
+  'Август',
+  'Сентябрь',
+  'Октябрь',
+  'Ноябрь',
+  'Декабрь',
+];
+
+export default {
+  title: 'Inputs/DatePicker',
+  component: DatePicker,
+};
+
+const Template: ComponentStory<typeof DatePicker> = (args) => {
+  const [date, setDate] = useState<Date | null>(null);
+
+  const [startDate, setStartDate] = useState<Date | null>(
+    args.startDate ? new Date(args.startDate) : null,
+  );
+  const [endDate, setEndDate] = useState<Date | null>(args.endDate ? new Date(args.endDate) : null);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 600,
+        overflow: 'auto',
+        border: '1px dotted rgba(0,0,0,.2)',
+        width: 800,
+      }}
+    >
+      <div style={{ display: 'flex', height: 48 }}>
+        <DatePicker
+          {...args}
+          locale={ru}
+          testId="datepicker"
+          months={months}
+          selectedDate={date}
+          startDate={startDate}
+          endDate={endDate}
+          minDate={new Date()}
+          onChangeDate={setDate}
+          onChangeRange={(dates) => {
+            setStartDate(dates?.[0] ?? null);
+            setEndDate(dates?.[1] ?? null);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Дата',
+  isRange: false,
+  isClearable: true,
+  shouldRenderPopperInBody: false,
+  popperPlacement: 'bottom-start',
+};
+
+Default.argTypes = {
+  popperPlacement: {
+    options: [
+      'bottom-start',
+      'bottom',
+      'bottom-end',
+      'top-start',
+      'top',
+      'top-end',
+      'right-start',
+      'right',
+      'right-end',
+      'left-start',
+      'left',
+      'left-end',
+    ],
+    control: 'select',
+  },
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['data', 'testId', 'tabIndex', 'onFocus', 'onBlur', 'onPaste', 'onKeyDown'],
+  },
+};

package/src/components/DatePicker/DatePicker.styles.ts

@@ -1,38 +1,40 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
-import { IDateInputStyles } from '../DateInput';
-
-export const useStyles = createThemedStyles('DatePicker', {
-  root: {
-    width: '100%',
-    height: '100%',
-  },
-
-  day: {},
-
-  datepicker: {},
-
-  popper: {
-    zIndex: 10,
-
-    '&[data-placement^="bottom"]': {
-      paddingTop: 6,
-    },
-
-    '&[data-placement^="top"]': {
-      paddingBottom: 6,
-    },
-
-    '&[data-placement^="left"]': {
-      paddingRight: 6,
-    },
-
-    '&[data-placement^="right"]': {
-      paddingLeft: 6,
-    },
-  },
-});
-
-export type IDatePickerStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakDateInput: IDateInputStyles }
->;
+import { createThemedStyles, ITweakStyles } from '../../theme';
+import { IDateInputStyles } from '../DateInput';
+
+export const useStyles = createThemedStyles('DatePicker', {
+  root: {
+    width: '100%',
+    height: '100%',
+  },
+
+  day: {},
+
+  dayInner: {},
+
+  datepicker: {},
+
+  popper: {
+    zIndex: 10,
+
+    '&[data-placement^="bottom"]': {
+      paddingTop: 6,
+    },
+
+    '&[data-placement^="top"]': {
+      paddingBottom: 6,
+    },
+
+    '&[data-placement^="left"]': {
+      paddingRight: 6,
+    },
+
+    '&[data-placement^="right"]': {
+      paddingLeft: 6,
+    },
+  },
+});
+
+export type IDatePickerStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakDateInput: IDateInputStyles }
+>;