From e975d9f6191daa62478ffff3a8d38e67fd107477 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=AD=D0=BB=D1=8C=D0=B4=D0=B0=D1=80?=
 <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Wed, 6 Nov 2024 16:02:03 +0300
Subject: [PATCH] patch: pr7736 (#7903)

* 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

(cherry picked from commit 5775640781504371c739f6c370bdbc903ebf0c86)

* fix(CalendarTime): run prettier
---
 .../Calendar/Calendar.e2e-playground.tsx      | 12 +++++++
 .../vkui/src/components/Calendar/Calendar.tsx | 14 +++++++--
 .../vkui/src/components/Calendar/Readme.md    |  9 ++++++
 .../calendar-android-chromium-dark-1-snap.png |  4 +--
 ...calendar-android-chromium-light-1-snap.png |  4 +--
 .../calendar-ios-webkit-dark-1-snap.png       |  4 +--
 .../calendar-ios-webkit-light-1-snap.png      |  4 +--
 .../calendar-vkcom-chromium-dark-1-snap.png   |  4 +--
 .../calendar-vkcom-chromium-light-1-snap.png  |  4 +--
 .../calendar-vkcom-firefox-dark-1-snap.png    |  4 +--
 .../calendar-vkcom-firefox-light-1-snap.png   |  4 +--
 .../calendar-vkcom-webkit-dark-1-snap.png     |  4 +--
 .../calendar-vkcom-webkit-light-1-snap.png    |  4 +--
 .../CalendarTime/CalendarTime.module.css      |  4 +++
 .../CalendarTime/CalendarTime.test.tsx        | 31 +++++++++++++++++++
 .../components/CalendarTime/CalendarTime.tsx  | 30 ++++++++++++------
 16 files changed, 109 insertions(+), 31 deletions(-)

diff --git a/packages/vkui/src/components/Calendar/Calendar.e2e-playground.tsx b/packages/vkui/src/components/Calendar/Calendar.e2e-playground.tsx
index 19f5be1a13..be08e6493f 100644
--- a/packages/vkui/src/components/Calendar/Calendar.e2e-playground.tsx
+++ b/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: [
diff --git a/packages/vkui/src/components/Calendar/Calendar.tsx b/packages/vkui/src/components/Calendar/Calendar.tsx
index 13bda74ae2..a3e95a5dfc 100644
--- a/packages/vkui/src/components/Calendar/Calendar.tsx
+++ b/packages/vkui/src/components/Calendar/Calendar.tsx
@@ -14,7 +14,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'
@@ -42,7 +49,6 @@ export interface CalendarProps
   disableFuture?: boolean;
   enableTime?: boolean;
   disablePickers?: boolean;
-  doneButtonText?: string;
   changeDayLabel?: string;
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   showNeighboringMonth?: boolean;
@@ -88,6 +94,8 @@ export const Calendar = ({
   onClose,
   enableTime = false,
   doneButtonText,
+  doneButtonDisabled,
+  doneButtonShow,
   weekStartsOn = 1,
   disablePickers,
   changeHoursLabel = 'Изменить час',
@@ -234,6 +242,8 @@ export const Calendar = ({
             onChange={onChange}
             onClose={onClose}
             doneButtonText={doneButtonText}
+            doneButtonDisabled={doneButtonDisabled}
+            doneButtonShow={doneButtonShow}
             changeHoursLabel={changeHoursLabel}
             changeMinutesLabel={changeMinutesLabel}
             isDayDisabled={minDateTime || maxDateTime ? isDayDisabled : undefined}
diff --git a/packages/vkui/src/components/Calendar/Readme.md b/packages/vkui/src/components/Calendar/Readme.md
index 423f0e6715..5974a06271 100644
--- a/packages/vkui/src/components/Calendar/Readme.md
+++ b/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}
diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-dark-1-snap.png
index 0b6b5f0710..7fdb3373ca 100644
--- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1155eb43cfdfea423913ddf7c865e5ded0964c9c0079ae4312a8dcad2ba1b04b
-size 277842
+oid sha256:6eeff61d415c76554a112bfa3da40ad0341553ed21e7efc6d4f8cc420e696038
+size 334663
diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-light-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-light-1-snap.png
index 9cafff3768..f08f80e924 100644
--- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:64d1d4dd24a3c0631f4a38e018c39266087b5193ee04021d53ab8deb3aa7f775
-size 276594
+oid sha256:2917437f2569cf833669c63a2fa7c37f0421992a2a5e6e15c209b8d589dae9a3
+size 333457
diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-dark-1-snap.png
index a95ef3dbd1..65ff46e18f 100644
--- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c0cf43b925816b9321629b267bbe90d4a6138432909a79037f78f7c05aa6123c
-size 287239
+oid sha256:ecff2df8922a801d7b84ebb97977e45865f647cf142591c414cfa29534446456
+size 345839
diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-light-1-snap.png
index 14ee3c9a8c..6133ab615d 100644
--- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7dac3cca25b0ebc8b4a6de016893879398b170cea3608682989626acda2a2e95
-size 286862
+oid sha256:4770daa46f1c5d5b671d5bc305a23206f062519e42783f01a2ad54cc6dd5e449
+size 345254
diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-dark-1-snap.png
index 2d2b439c4c..8d1099925b 100644
--- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f426a0595fe9be923f91857ff30d6c9edb8a64715b15b37081e0efa6757d26c3
-size 282916
+oid sha256:42e7cd83a6e874c2ba0e6d119d6db598be83329c86428ba17196962e2ea1342e
+size 340567
diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-light-1-snap.png
index 84cadf0f4a..e9cad78370 100644
--- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:df7fb9881e220d3230e93f5c115faf10d587d1a6ce37f9c1c371f5915be63147
-size 287223
+oid sha256:0a8c140cba16f518462a2802042c53e222363cbc1c645da04eafceeb7bdc7ee4
+size 345689
diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-dark-1-snap.png
index 2b79cb1ef2..b1ffab7125 100644
--- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f44612d85ca46dc0a53d1d1e7b6fb78b9e4598014abfa0913e68fc30536c049b
-size 459550
+oid sha256:cb944f7a8700c6531f7580ff8b5eeef998cb452b9d25befbde5761801266d720
+size 565230
diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-light-1-snap.png
index 0b835c70ed..83f23485c6 100644
--- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a165d1344c0686ba14afb72c8585901555ff8df747726c13f5f8ecd9b5aa7b5c
-size 461909
+oid sha256:c396327664babc017a814cc7760addbed946eb0a726db4952e42a67019fa3f11
+size 557669
diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-dark-1-snap.png
index f8a4bcf3ba..4a0ca527d1 100644
--- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2f3ea260825b575ac1c47f66d84a768273d4df6a860e646ab53e383f0d6cde67
-size 293375
+oid sha256:2ae69bc391238f7128ab25c3ab4f59ea82e6520da3a8009d33659449b8689b4a
+size 352849
diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-light-1-snap.png
index 8c2abfa63e..5cb789fcf0 100644
--- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9c9687f73d29913eec8b0a46d0e6232bdbd8a559f01d35a2d10fbf7b95b7ff44
-size 298504
+oid sha256:b06fcdcfecc15ab7c3fd03c2383cfc701220559a53fb9cd076604adf328acb82
+size 358772
diff --git a/packages/vkui/src/components/CalendarTime/CalendarTime.module.css b/packages/vkui/src/components/CalendarTime/CalendarTime.module.css
index ba6ff53615..d0a28e51f7 100644
--- a/packages/vkui/src/components/CalendarTime/CalendarTime.module.css
+++ b/packages/vkui/src/components/CalendarTime/CalendarTime.module.css
@@ -7,6 +7,10 @@
   inline-size: 77px;
 }
 
+.CalendarTime__withoutDone {
+  justify-content: center;
+}
+
 .CalendarTime__divider {
   margin-inline: 6px;
   color: var(--vkui--color_text_primary);
diff --git a/packages/vkui/src/components/CalendarTime/CalendarTime.test.tsx b/packages/vkui/src/components/CalendarTime/CalendarTime.test.tsx
index b0dd5d86c4..652d8fbd3b 100644
--- a/packages/vkui/src/components/CalendarTime/CalendarTime.test.tsx
+++ b/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();
+  });
 });
diff --git a/packages/vkui/src/components/CalendarTime/CalendarTime.tsx b/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
index 6199038101..0b8ca99158 100644
--- a/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
+++ b/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
@@ -1,4 +1,5 @@
 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';
@@ -8,6 +9,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;
@@ -33,12 +36,14 @@ for (let i = 0; i < 60; i += 1) {
 
 export const CalendarTime = ({
   value,
-  doneButtonText = 'Готово',
   onChange,
   onClose,
   changeHoursLabel,
   changeMinutesLabel,
   isDayDisabled,
+  doneButtonText = 'Готово',
+  doneButtonDisabled = false,
+  doneButtonShow = true,
 }: CalendarTimeProps): React.ReactNode => {
   const localHours = isDayDisabled
     ? hours.map((hour) => {
@@ -64,7 +69,12 @@ export const CalendarTime = ({
   );
 
   return (
-    <div className={styles['CalendarTime']}>
+    <div
+      className={classNames(
+        styles['CalendarTime'],
+        !doneButtonShow && styles['CalendarTime__withoutDone'],
+      )}
+    >
       <div className={styles['CalendarTime__picker']}>
         <AdaptivityProvider sizeY="compact">
           <CustomSelect
@@ -88,13 +98,15 @@ export const CalendarTime = ({
           />
         </AdaptivityProvider>
       </div>
-      <div className={styles['CalendarTime__button']}>
-        <AdaptivityProvider sizeY="compact">
-          <Button mode="secondary" onClick={onClose} size="l">
-            {doneButtonText}
-          </Button>
-        </AdaptivityProvider>
-      </div>
+      {doneButtonShow && (
+        <div className={styles['CalendarTime__button']}>
+          <AdaptivityProvider sizeY="compact">
+            <Button mode="secondary" onClick={onClose} size="l" disabled={doneButtonDisabled}>
+              {doneButtonText}
+            </Button>
+          </AdaptivityProvider>
+        </div>
+      )}
     </div>
   );
 };