feat(UIKIT-1659,DatePicker): Добавлен пропс startAdornment (#1085)

kaluga-astral · Aug 8, 2024 · 2075a4b · 2075a4b
1 parent 1db3fb6
commit 2075a4b
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 19 deletions.
diff --git a/packages/components/src/DatePicker/DatePicker.stories.tsx b/packages/components/src/DatePicker/DatePicker.stories.tsx
@@ -53,6 +53,12 @@ export const Example = () => {
   );
 };
 
+export const StartAdornment = () => {
+  const [date, setDate] = useState<Date | null>();
+
+  return <DatePicker startAdornment="c" value={date} onChange={setDate} />;
+};
+
 const Template = (props: DatePickerProps) => {
   const [date, setDate] = useState<Date | null>();
 

diff --git a/packages/components/src/DatePicker/DatePicker.test.tsx b/packages/components/src/DatePicker/DatePicker.test.tsx
@@ -39,6 +39,32 @@ describe('DatePicker', () => {
     );
   });
 
+  it('StartAdornment отображается', () => {
+    renderWithTheme(<DatePicker startAdornment="по" />);
+
+    const startAdornment = screen.getByText('по');
+
+    expect(startAdornment).toBeVisible();
+  });
+
+  it('Placeholder по умолчанию отображается если не задан в inputProps', () => {
+    renderWithTheme(<DatePicker disabled />);
+
+    const placeholder = screen.getByPlaceholderText(DEFAULT_PLACEHOLDER);
+
+    expect(placeholder).toBeVisible();
+  });
+
+  it('Placeholder заданный в inputProps отображается', () => {
+    renderWithTheme(
+      <DatePicker disabled inputProps={{ placeholder: 'Введите дату' }} />,
+    );
+
+    const placeholder = screen.getByPlaceholderText('Введите дату');
+
+    expect(placeholder).toBeVisible();
+  });
+
   describe('Пикер не позволяет выбрать дату', () => {
     it('Меньше указанной в minDate', async () => {
       const user = userEvents.setup();
@@ -192,23 +218,5 @@ describe('DatePicker', () => {
 
       expect(popover).not.toBeInTheDocument();
     });
-
-    it('Placeholder по умолчанию отображается если не задан в inputProps', () => {
-      renderWithTheme(<DatePicker disabled />);
-
-      const placeholder = screen.getByPlaceholderText(DEFAULT_PLACEHOLDER);
-
-      expect(placeholder).toBeVisible();
-    });
-
-    it('Placeholder заданный в inputProps отображается', () => {
-      renderWithTheme(
-        <DatePicker disabled inputProps={{ placeholder: 'Введите дату' }} />,
-      );
-
-      const placeholder = screen.getByPlaceholderText('Введите дату');
-
-      expect(placeholder).toBeVisible();
-    });
   });
 });
diff --git a/packages/components/src/DatePicker/DatePicker.tsx b/packages/components/src/DatePicker/DatePicker.tsx
@@ -80,6 +80,11 @@ export type DatePickerProps = MondayFirst &
      * Вспомогательный текст под полем ввода
      */
     helperText?: ReactNode;
+
+    /**
+     * Элемент в начале инпута
+     */
+    startAdornment?: ReactNode;
   } & Pick<TextFieldProps, 'label' | 'required' | 'helperText'>;
 
 export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
@@ -102,6 +107,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       label,
       required,
       helperText,
+      startAdornment,
     },
     forwardedRef,
   ) => {
@@ -141,6 +147,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     return (
       <div ref={ref} className={className}>
         <DatePickerInput
+          startAdornment={startAdornment}
           label={label}
           required={required}
           helperText={helperText}

diff --git a/packages/components/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/components/src/DatePicker/DatePickerInput/DatePickerInput.tsx
@@ -34,6 +34,7 @@ export const DatePickerInput = forwardRef<
       onFocus,
       disabled,
       placeholder = DEFAULT_PLACEHOLDER,
+      startAdornment,
       ...props
     },
     ref,
@@ -86,6 +87,7 @@ export const DatePickerInput = forwardRef<
                 <CalendarOutlineMd />
               </InputAdornment>
             ),
+            startAdornment: startAdornment,
           }}
           inputProps={{
             ...props.inputProps,

diff --git a/packages/components/src/DateRangePicker/DateRangePicker.stories.tsx b/packages/components/src/DateRangePicker/DateRangePicker.stories.tsx
@@ -78,6 +78,19 @@ export const Example = () => (
   />
 );
 
+export const StartAdornment = () => (
+  <Template
+    startDateProps={{
+      startAdornment: 'c',
+      inputProps: { label: 'startAdornment' },
+    }}
+    endDateProps={{
+      startAdornment: 'по',
+      inputProps: { label: 'startAdornment' },
+    }}
+  />
+);
+
 export const Showcase = () => (
   <LegacyGrid container spacing={6} autoFlow="row">
     <Template />

diff --git a/packages/components/src/DateRangePicker/DateRangePicker.tsx b/packages/components/src/DateRangePicker/DateRangePicker.tsx
@@ -31,7 +31,7 @@ const DEFAULT_SPACING = 1;
 
 export type DateItemProps = Pick<
   DatePickerProps,
-  'onChange' | 'value' | 'inputProps'
+  'onChange' | 'value' | 'inputProps' | 'startAdornment'
 >;
 
 export type DateRangePickerProps = Omit<
@@ -219,6 +219,7 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
         <DatePickerInput
           {...startDateProps.inputProps}
           ref={startInputRef}
+          startAdornment={startDateProps.startAdornment}
           mask={mask}
           size={size}
           value={startMaskedValue}
@@ -228,6 +229,7 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
         />
         <DatePickerInput
           {...endDateProps.inputProps}
+          startAdornment={endDateProps.startAdornment}
           ref={endInputRef}
           size={size}
           mask={mask}