feat(Calendar): add doneButtonShow, doneButtonDisabled props flags (#…

…7736)

* feat(Calendar): add doneButtonShow, doneButtonDisabled props flags

* test(Calendar): add screenshots

* test(Calendar): update screenshots

* test(Calendar): update screenshots

* fix(CalendarTime): fix formatting

packages/vkui/src/components/Calendar/Calendar.e2e-playground.tsx

@@ -31,6 +31,18 @@ export const CalendarPlayground = (props: ComponentPlaygroundProps) => {
           enableTime: [true, false],
           doneButtonText: [undefined, 'Done'],
         },
+        {
+          value: [new Date('1970-05-05')],
+          enableTime: [true],
+          doneButtonText: ['Done'],
+          doneButtonShow: [true, false],
+        },
+        {
+          value: [new Date('1970-05-05')],
+          enableTime: [true],
+          doneButtonShow: [true],
+          doneButtonDisabled: [true],
+        },
         {
           value: [new Date('1970-05-05')],
           nextMonthIcon: [

packages/vkui/src/components/Calendar/Calendar.tsx

@@ -16,7 +16,14 @@ import styles from './Calendar.module.css';
 
 export interface CalendarProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,
-    Pick<CalendarTimeProps, 'changeHoursLabel' | 'changeMinutesLabel'>,
+    Pick<
+      CalendarTimeProps,
+      | 'changeHoursLabel'
+      | 'changeMinutesLabel'
+      | 'doneButtonText'
+      | 'doneButtonDisabled'
+      | 'doneButtonShow'
+    >,
     Pick<
       CalendarHeaderProps,
       | 'prevMonthLabel'
@@ -44,7 +51,6 @@ export interface CalendarProps
   disableFuture?: boolean;
   enableTime?: boolean;
   disablePickers?: boolean;
-  doneButtonText?: string;
   changeDayLabel?: string;
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   showNeighboringMonth?: boolean;
@@ -90,6 +96,8 @@ export const Calendar = ({
   onDoneButtonClick,
   enableTime = false,
   doneButtonText,
+  doneButtonDisabled,
+  doneButtonShow,
   weekStartsOn = 1,
   disablePickers,
   changeHoursLabel = 'Изменить час',
@@ -233,6 +241,8 @@ export const Calendar = ({
             onChange={onChange}
             onDoneButtonClick={onDoneButtonClick}
             doneButtonText={doneButtonText}
+            doneButtonDisabled={doneButtonDisabled}
+            doneButtonShow={doneButtonShow}
             changeHoursLabel={changeHoursLabel}
             changeMinutesLabel={changeMinutesLabel}
             isDayDisabled={minDateTime || maxDateTime ? isDayDisabled : undefined}

packages/vkui/src/components/Calendar/Readme.md

@@ -9,6 +9,7 @@ import { lightFormat } from 'date-fns';
 const Example = () => {
   const [value, setValue] = useState(() => new Date());
   const [enableTime, setEnableTime] = useState(false);
+  const [doneButtonShow, setDoneButtonShow] = useState(true);
   const [disablePast, setDisablePast] = useState(false);
   const [disableFuture, setDisableFuture] = useState(false);
   const [disablePickers, setDisablePickers] = useState(false);
@@ -25,6 +26,13 @@ const Example = () => {
           Включено
         </Checkbox>
       </FormItem>
+      {enableTime && (
+        <FormItem top="Показывать кнопку 'Готово'">
+          <Checkbox checked={doneButtonShow} onChange={(e) => setDoneButtonShow(e.target.checked)}>
+            Включено
+          </Checkbox>
+        </FormItem>
+      )}
       <FormItem top="Запрет выбора прошлых дат">
         <Checkbox checked={disablePast} onChange={(e) => setDisablePast(e.target.checked)}>
           Включено
@@ -107,6 +115,7 @@ const Example = () => {
             disablePast={disablePast}
             disableFuture={disableFuture}
             disablePickers={disablePickers}
+            doneButtonShow={doneButtonShow}
             showNeighboringMonth={showNeighboringMonth}
             size={size}
             listenDayChangesForUpdate={listenDayChangesForUpdate}

packages/vkui/src/components/CalendarTime/CalendarTime.module.css

@@ -3,6 +3,10 @@
   align-items: center;
 }
 
+.host__withoutDone {
+  justify-content: center;
+}
+
 .picker {
   inline-size: 79px;
 }

packages/vkui/src/components/CalendarTime/CalendarTime.test.tsx

@@ -52,4 +52,35 @@ describe('CalendarTime', () => {
 
     expect(onChange).toHaveBeenCalledTimes(0);
   });
+
+  it('should hide done button with doneButtonShow=false', () => {
+    const onChange = jest.fn();
+    const buttonText = 'Текст';
+    render(
+      <CalendarTime
+        onChange={onChange}
+        value={dayDate}
+        doneButtonShow={false}
+        doneButtonText={buttonText}
+      />,
+    );
+    expect(screen.queryByText(buttonText)).toBeFalsy();
+  });
+
+  it('should disable done button with doneButtonDisabled=false', () => {
+    const onChange = jest.fn();
+    const buttonText = 'Текст';
+    render(
+      <CalendarTime
+        onChange={onChange}
+        value={dayDate}
+        doneButtonText={buttonText}
+        doneButtonDisabled={true}
+      />,
+    );
+    const text = screen.queryByText(buttonText);
+    expect(text).toBeTruthy();
+    const button = text!.closest('button');
+    expect(button!.disabled).toBeTruthy();
+  });
 });

packages/vkui/src/components/CalendarTime/CalendarTime.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import { setHours, setMinutes } from 'date-fns';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { Button } from '../Button/Button';
@@ -10,6 +11,8 @@ import styles from './CalendarTime.module.css';
 export interface CalendarTimeProps {
   value: Date;
   doneButtonText?: string;
+  doneButtonShow?: boolean;
+  doneButtonDisabled?: boolean;
   changeHoursLabel?: string;
   changeMinutesLabel?: string;
   onChange?: (value: Date) => void;
@@ -35,12 +38,14 @@ for (let i = 0; i < 60; i += 1) {
 
 export const CalendarTime = ({
   value,
-  doneButtonText = 'Готово',
   onChange,
   onDoneButtonClick,
   changeHoursLabel,
   changeMinutesLabel,
   isDayDisabled,
+  doneButtonText = 'Готово',
+  doneButtonDisabled = false,
+  doneButtonShow = true,
 }: CalendarTimeProps): React.ReactNode => {
   const localHours = isDayDisabled
     ? hours.map((hour) => {
@@ -64,7 +69,7 @@ export const CalendarTime = ({
   );
 
   return (
-    <div className={styles.host}>
+    <div className={classNames(styles.host, !doneButtonShow && styles.host__withoutDone)}>
       <div className={styles.picker}>
         <AdaptivityProvider sizeY="compact">
           <CustomSelect
@@ -88,13 +93,20 @@ export const CalendarTime = ({
           />
         </AdaptivityProvider>
       </div>
-      <div className={styles.button}>
-        <AdaptivityProvider sizeY="compact">
-          <Button mode="secondary" onClick={onDoneButtonClick} size="l">
-            {doneButtonText}
-          </Button>
-        </AdaptivityProvider>
-      </div>
+      {doneButtonShow && (
+        <div className={styles.button}>
+          <AdaptivityProvider sizeY="compact">
+            <Button
+              mode="secondary"
+              onClick={onDoneButtonClick}
+              size="l"
+              disabled={doneButtonDisabled}
+            >
+              {doneButtonText}
+            </Button>
+          </AdaptivityProvider>
+        </div>
+      )}
     </div>
   );
 };