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 67f3e6b1bb..b7dc16aac6 100644 --- a/packages/vkui/src/components/Calendar/Calendar.tsx +++ b/packages/vkui/src/components/Calendar/Calendar.tsx @@ -16,7 +16,14 @@ import styles from './Calendar.module.css'; export interface CalendarProps extends Omit, 'onChange'>, - Pick, + 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} diff --git a/packages/vkui/src/components/Calendar/Readme.md b/packages/vkui/src/components/Calendar/Readme.md index 0b0ad69404..2a911ae733 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 = () => { Включено + {enableTime && ( + + setDoneButtonShow(e.target.checked)}> + Включено + + + )} 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 69a37b0f97..cc6719cfe7 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:229888482e06d53a3775b717ba81f3cf1f6d2c04df9f0e14e011c390b4b640ca -size 277954 +oid sha256:01741b02fb9782cc9d7c993d4c5fe51145ebec9d98cbf9c4781e94ddefad7c2a +size 334805 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 08c1d5ca4e..fcd24cc38a 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:4ec410338ad4c2f192c672fec781975ea957a93043ada846dbf88ef918120ab3 -size 276832 +oid sha256:52a1904f187cbd2220b81402bec5c5496b3d0c9d60716c961cf711d433e36619 +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 399675032b..0b67e971ae 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:0632bc18aa2f604cd0bf936b72781ab2c933f9afdf59c0de947eca7008cbb883 -size 289036 +oid sha256:50d8603a79a7a01314ecb0aaa598bcd510fb7759d1fcfb0b2969eae01bbbe48e +size 347982 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 5539694e2a..00e5e16d42 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:06ae7446bfa379b01af1379eb5ebde2b5a5d3a508dfc12511a6e1801a22e282b -size 286925 +oid sha256:93ce9c1d688de0565a90f96679f06047a4ae0948310553dacc90ae3d62955ecd +size 345334 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 aaa2b998b6..becc93e194 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:0783b793cae29a30e87fd4d0698a60c987886542dbb61253f7ec94f9bb85cf7c -size 282782 +oid sha256:65b8d73ace246872feb09e589915fc195ed0f8fb8acad40f45bfa9e86a4c5e53 +size 340475 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 7394a76acd..87e1ac2f7d 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:ded1d02f13da45e85a783beb00d95b7feb7a11fa2e1b4a541d90c97a522540ea -size 287378 +oid sha256:6b5f0ce3b68a4e0f8cf5e4559fc492386a587823bb285da8e5469ec20268d5b5 +size 345721 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 9267de1c5c..27f92cff0a 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:b18d52c0ed919daf17b5bcf788d9c70b5987876590997b0edcf8b0e0c603d63b -size 467531 +oid sha256:6d5d14c68f319f676ad481c4bb1396121de506d1ce8a9b10a861a5604540f7bc +size 564905 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 e152de59aa..2bc60a8474 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:17a7aa9817be19e7f0752deaef411bb019d23089518bb953d5b0bc5192fd213e -size 461650 +oid sha256:34d31d7f143eb57de538e8b054a7ed190145889e5074914220c325ac9df3f941 +size 557212 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 8a819d369e..85b45dc0b1 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:7ac03164ac54fc9089388d898badba320259612358972ad40fd6dd7d2024ec29 -size 293338 +oid sha256:84f1c2b1d61acca8b91466e8a50f4087668f9c49fc9ca3d0aa0e6664e4c329ee +size 352738 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 5e1d7e5f39..8d6f2743d2 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:fc51188bf46efdac54291c54e304d64c93f3eb1fa30b56053d7e551e76a8f004 -size 298522 +oid sha256:d9cebac55ddbca4994ffa359dfb6fada779cfe570670f10b28fbd33e098a6a43 +size 358763 diff --git a/packages/vkui/src/components/CalendarTime/CalendarTime.module.css b/packages/vkui/src/components/CalendarTime/CalendarTime.module.css index fa52c92975..abff99e3b9 100644 --- a/packages/vkui/src/components/CalendarTime/CalendarTime.module.css +++ b/packages/vkui/src/components/CalendarTime/CalendarTime.module.css @@ -3,6 +3,10 @@ align-items: center; } +.host__withoutDone { + justify-content: center; +} + .picker { inline-size: 79px; } diff --git a/packages/vkui/src/components/CalendarTime/CalendarTime.test.tsx b/packages/vkui/src/components/CalendarTime/CalendarTime.test.tsx index 15ce1e0be1..e840f63493 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( + , + ); + expect(screen.queryByText(buttonText)).toBeFalsy(); + }); + + it('should disable done button with doneButtonDisabled=false', () => { + const onChange = jest.fn(); + const buttonText = 'Текст'; + render( + , + ); + 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 1ca5f395a1..50c74af0a9 100644 --- a/packages/vkui/src/components/CalendarTime/CalendarTime.tsx +++ b/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 ( -
+
-
- - - -
+ {doneButtonShow && ( +
+ + + +
+ )}
); };