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, 'onChange'>, - Pick, + 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 = () => { Включено + {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 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( + , + ); + 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 6199038101..57298003fb 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,7 @@ export const CalendarTime = ({ ); return ( -
+
-
- - - -
+ {doneButtonShow && ( +
+ + + +
+ )}
); };