From f9302ade1b39a9f6c26075c41b220ac98b70e43e Mon Sep 17 00:00:00 2001 From: Zamp Date: Wed, 20 Jul 2022 10:41:20 -0700 Subject: [PATCH 1/4] Added Date Time Picker --- packages/fuselage-ui-kit/package.json | 1 + .../src/elements/DateTimePickerElement.tsx | 39 +++++++++++++++++++ .../src/stories/Banner.stories.tsx | 15 +++++++ .../src/stories/Message.stories.tsx | 8 ++++ .../src/stories/Modal.stories.tsx | 15 +++++++ .../src/stories/payloads/actions.ts | 32 +++++++++++++++ .../src/stories/payloads/input.ts | 23 +++++++++++ .../src/stories/payloads/section.ts | 23 +++++++++++ .../src/surfaces/FuselageSurfaceRenderer.tsx | 21 ++++++++++ .../ui-kit/src/blocks/ActionableElement.ts | 2 + packages/ui-kit/src/blocks/BlockElement.ts | 2 + .../ui-kit/src/blocks/BlockElementType.ts | 1 + packages/ui-kit/src/blocks/ElementType.ts | 1 + packages/ui-kit/src/blocks/InputElement.ts | 2 + packages/ui-kit/src/blocks/deprecations.ts | 3 ++ .../blocks/elements/DateTimePickerElement.ts | 8 ++++ .../src/blocks/isActionsBlockElement.ts | 1 + .../ui-kit/src/blocks/isInputBlockElement.ts | 1 + .../blocks/isSectionBlockAccessoryElement.ts | 1 + .../ui-kit/src/blocks/layout/ActionsBlock.ts | 2 + .../ui-kit/src/blocks/layout/InputBlock.ts | 2 + .../ui-kit/src/blocks/layout/SectionBlock.ts | 2 + packages/ui-kit/src/rendering/ActionOf.ts | 3 ++ .../ui-kit/src/rendering/BlockRenderers.ts | 4 ++ .../src/rendering/renderBlockElement.ts | 3 ++ .../surfaces/UiKitParserAttachment.spec.ts | 12 ++++++ .../surfaces/UiKitParserBanner.spec.ts | 12 ++++++ .../surfaces/UiKitParserMessage.spec.ts | 12 ++++++ .../surfaces/UiKitParserModal.spec.ts | 12 ++++++ 29 files changed, 263 insertions(+) create mode 100644 packages/fuselage-ui-kit/src/elements/DateTimePickerElement.tsx create mode 100644 packages/ui-kit/src/blocks/elements/DateTimePickerElement.ts diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json index 84321ec55c..8d665159ee 100644 --- a/packages/fuselage-ui-kit/package.json +++ b/packages/fuselage-ui-kit/package.json @@ -82,6 +82,7 @@ "write-version-module": "workspace:~" }, "dependencies": { + "@rocket.chat/fuselage-ui-kit": "~0.31.14", "@rocket.chat/ui-kit": "workspace:~", "tslib": "^2.3.1" } diff --git a/packages/fuselage-ui-kit/src/elements/DateTimePickerElement.tsx b/packages/fuselage-ui-kit/src/elements/DateTimePickerElement.tsx new file mode 100644 index 0000000000..abea6c4938 --- /dev/null +++ b/packages/fuselage-ui-kit/src/elements/DateTimePickerElement.tsx @@ -0,0 +1,39 @@ +import { InputBox } from '@rocket.chat/fuselage'; +import type * as UiKit from '@rocket.chat/ui-kit'; +import type { ReactElement } from 'react'; +import React from 'react'; + +import { useUiKitState } from '../hooks/useUiKitState'; +import type { BlockProps } from '../utils/BlockProps'; +import { fromTextObjectToString } from '../utils/fromTextObjectToString'; + +type DateTimePickerElementProps = BlockProps; + +const DateTimePickerElement = ({ + block, + context, + surfaceRenderer, +}: DateTimePickerElementProps): ReactElement => { + const [{ loading, value, error }, action] = useUiKitState(block, context); + const { actionId, placeholder } = block; + + return ( + + ); +}; + +export default DateTimePickerElement; diff --git a/packages/fuselage-ui-kit/src/stories/Banner.stories.tsx b/packages/fuselage-ui-kit/src/stories/Banner.stories.tsx index 956e29238b..023bb33df3 100644 --- a/packages/fuselage-ui-kit/src/stories/Banner.stories.tsx +++ b/packages/fuselage-ui-kit/src/stories/Banner.stories.tsx @@ -80,6 +80,10 @@ export const SectionWithDatePickerAccessory = createStory( payloads.sectionWithDatePickerAccessory ); +export const SectionWithDateTimePickerAccessory = createStory( + payloads.sectionWithDateTimePickerAccessory +); + export const ImageWithTitle = createStory(payloads.imageWithTitle); export const ImageWithoutTitle = createStory(payloads.imageWithoutTitle); @@ -106,6 +110,10 @@ export const ActionsWithDatePicker = createStory( payloads.actionsWithDatePicker ); +export const ActionsWithDateTimePicker = createStory( + payloads.actionsWithDateTimePicker +); + export const ContextWithPlainText = createStory(payloads.contextWithPlainText); export const ContextWithMrkdwn = createStory(payloads.contextWithMrkdwn); @@ -146,6 +154,13 @@ export const InputWithDatePicker = createStory(payloads.inputWithDatePicker, { 'input-0': 'Error', }); +export const InputWithDateTimePicker = createStory( + payloads.inputWithDateTimePicker, + { + 'input-0': 'Error', + } +); + export const InputWithLinearScale = createStory(payloads.inputWithLinearScale, { 'input-0': 'Error', }); diff --git a/packages/fuselage-ui-kit/src/stories/Message.stories.tsx b/packages/fuselage-ui-kit/src/stories/Message.stories.tsx index 28c28b1c63..08c3924094 100644 --- a/packages/fuselage-ui-kit/src/stories/Message.stories.tsx +++ b/packages/fuselage-ui-kit/src/stories/Message.stories.tsx @@ -104,6 +104,10 @@ export const SectionWithDatePickerAccessory = createStory( payloads.sectionWithDatePickerAccessory ); +export const SectionWithDateTimePickerAccessory = createStory( + payloads.sectionWithDateTimePickerAccessory +); + export const ImageWithTitle = createStory(payloads.imageWithTitle); export const ImageWithoutTitle = createStory(payloads.imageWithoutTitle); @@ -130,6 +134,10 @@ export const ActionsWithDatePicker = createStory( payloads.actionsWithDatePicker ); +export const ActionsWithDateTimePicker = createStory( + payloads.actionsWithDateTimePicker +); + export const ContextWithPlainText = createStory(payloads.contextWithPlainText); export const ContextWithMrkdwn = createStory(payloads.contextWithMrkdwn); diff --git a/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx b/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx index ab4f63d95e..62e643c322 100644 --- a/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx +++ b/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx @@ -121,6 +121,10 @@ export const SectionWithDatePickerAccessory = createStory( payloads.sectionWithDatePickerAccessory ); +export const SectionWithDateTimePickerAccessory = createStory( + payloads.sectionWithDateTimePickerAccessory +); + export const ImageWithTitle = createStory(payloads.imageWithTitle); export const ImageWithoutTitle = createStory(payloads.imageWithoutTitle); @@ -147,6 +151,10 @@ export const ActionsWithDatePicker = createStory( payloads.actionsWithDatePicker ); +export const ActionsWithDateTimePicker = createStory( + payloads.actionsWithDateTimePicker +); + export const ContextWithPlainText = createStory(payloads.contextWithPlainText); export const ContextWithMrkdwn = createStory(payloads.contextWithMrkdwn); @@ -187,6 +195,13 @@ export const InputWithDatePicker = createStory(payloads.inputWithDatePicker, { 'input-0': 'Error', }); +export const InputWithDateTimePicker = createStory( + payloads.inputWithDateTimePicker, + { + 'input-0': 'Error', + } +); + export const InputWithLinearScale = createStory(payloads.inputWithLinearScale, { 'input-0': 'Error', }); diff --git a/packages/fuselage-ui-kit/src/stories/payloads/actions.ts b/packages/fuselage-ui-kit/src/stories/payloads/actions.ts index 2b248412cc..6f90737426 100644 --- a/packages/fuselage-ui-kit/src/stories/payloads/actions.ts +++ b/packages/fuselage-ui-kit/src/stories/payloads/actions.ts @@ -217,3 +217,35 @@ export const actionsWithDatePicker: readonly UiKit.LayoutBlock[] = [ ], }, ] as const; + +export const actionsWithDateTimePicker: readonly UiKit.LayoutBlock[] = [ + { + type: 'actions', + elements: [ + { + appId: 'dummy-app-id', + blockId: 'dummy-block-id', + actionId: 'dummy-action-id', + type: 'datetimepicker', + initialDateTime: '2022-07-22T00:00', + placeholder: { + type: 'plain_text', + text: 'Select date-time', + emoji: true, + }, + }, + { + appId: 'dummy-app-id', + blockId: 'dummy-block-id', + actionId: 'dummy-action-id', + type: 'datetimepicker', + initialDateTime: '2022-07-22T00:00', + placeholder: { + type: 'plain_text', + text: 'Select date-time', + emoji: true, + }, + }, + ], + }, +] as const; diff --git a/packages/fuselage-ui-kit/src/stories/payloads/input.ts b/packages/fuselage-ui-kit/src/stories/payloads/input.ts index b52911d3b1..ea98af4532 100644 --- a/packages/fuselage-ui-kit/src/stories/payloads/input.ts +++ b/packages/fuselage-ui-kit/src/stories/payloads/input.ts @@ -128,6 +128,29 @@ export const inputWithDatePicker: readonly UiKit.LayoutBlock[] = [ }, ] as const; +export const inputWithDateTimePicker: readonly UiKit.LayoutBlock[] = [ + { + type: 'input', + element: { + appId: 'dummy-app-id', + blockId: 'dummy-block-id', + type: 'datetimepicker', + initialDate: '1990-04-28', + placeholder: { + type: 'plain_text', + text: 'Select date-time', + emoji: true, + }, + actionId: 'input-0', + }, + label: { + type: 'plain_text', + text: 'Label', + emoji: true, + }, + }, +] as const; + export const inputWithLinearScale: readonly UiKit.LayoutBlock[] = [ { type: 'input', diff --git a/packages/fuselage-ui-kit/src/stories/payloads/section.ts b/packages/fuselage-ui-kit/src/stories/payloads/section.ts index 8187ade0c3..f6b25f4291 100644 --- a/packages/fuselage-ui-kit/src/stories/payloads/section.ts +++ b/packages/fuselage-ui-kit/src/stories/payloads/section.ts @@ -171,3 +171,26 @@ export const sectionWithDatePickerAccessory: readonly UiKit.LayoutBlock[] = [ }, }, ] as const; + +export const sectionWithDateTimePickerAccessory: readonly UiKit.LayoutBlock[] = + [ + { + type: 'section', + text: { + type: 'mrkdwn', + text: 'Pick a date for the deadline.', + }, + accessory: { + appId: 'dummy-app-id', + blockId: 'dummy-block-id', + actionId: 'dummy-action-id', + type: 'datetimepicker', + initialDate: '1990-04-28', + placeholder: { + type: 'plain_text', + text: 'Select date-time', + emoji: true, + }, + }, + }, + ] as const; diff --git a/packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx b/packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx index f548f63ac6..fa452214e1 100644 --- a/packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx +++ b/packages/fuselage-ui-kit/src/surfaces/FuselageSurfaceRenderer.tsx @@ -11,6 +11,7 @@ import PreviewBlock from '../blocks/PreviewBlock'; import SectionBlock from '../blocks/SectionBlock'; import ButtonElement from '../elements/ButtonElement'; import DatePickerElement from '../elements/DatePickerElement'; +import DateTimePickerElement from '../elements/DateTimePickerElement'; import ImageElement from '../elements/ImageElement'; import LinearScaleElement from '../elements/LinearScaleElement'; import MultiStaticSelectElement from '../elements/MultiStaticSelectElement'; @@ -242,6 +243,26 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer ); } + datetimepicker( + block: UiKit.DateTimePickerElement, + context: UiKit.BlockContext, + index: number + ): ReactElement | null { + if (context === UiKit.BlockContext.BLOCK) { + return null; + } + + return ( + + ); + } + static_select( block: UiKit.StaticSelectElement, context: UiKit.BlockContext, diff --git a/packages/ui-kit/src/blocks/ActionableElement.ts b/packages/ui-kit/src/blocks/ActionableElement.ts index 20ac6506ae..256c6604c9 100644 --- a/packages/ui-kit/src/blocks/ActionableElement.ts +++ b/packages/ui-kit/src/blocks/ActionableElement.ts @@ -2,6 +2,7 @@ import type { ButtonElement } from './elements/ButtonElement'; import type { ChannelsSelectElement } from './elements/ChannelsSelectElement'; import type { ConversationsSelectElement } from './elements/ConversationsSelectElement'; import type { DatePickerElement } from './elements/DatePickerElement'; +import type { DateTimePickerElement } from './elements/DateTimePickerElement'; import type { LinearScaleElement } from './elements/LinearScaleElement'; import type { MultiChannelsSelectElement } from './elements/MultiChannelsSelectElement'; import type { MultiConversationsSelectElement } from './elements/MultiConversationsSelectElement'; @@ -17,6 +18,7 @@ export type ActionableElement = | ChannelsSelectElement | ConversationsSelectElement | DatePickerElement + | DateTimePickerElement | LinearScaleElement | MultiChannelsSelectElement | MultiConversationsSelectElement diff --git a/packages/ui-kit/src/blocks/BlockElement.ts b/packages/ui-kit/src/blocks/BlockElement.ts index 751dff66ff..29af470af1 100644 --- a/packages/ui-kit/src/blocks/BlockElement.ts +++ b/packages/ui-kit/src/blocks/BlockElement.ts @@ -2,6 +2,7 @@ import type { ButtonElement } from './elements/ButtonElement'; import type { ChannelsSelectElement } from './elements/ChannelsSelectElement'; import type { ConversationsSelectElement } from './elements/ConversationsSelectElement'; import type { DatePickerElement } from './elements/DatePickerElement'; +import type { DateTimePickerElement } from './elements/DateTimePickerElement'; import type { ImageElement } from './elements/ImageElement'; import type { LinearScaleElement } from './elements/LinearScaleElement'; import type { MultiChannelsSelectElement } from './elements/MultiChannelsSelectElement'; @@ -18,6 +19,7 @@ export type BlockElement = | ChannelsSelectElement | ConversationsSelectElement | DatePickerElement + | DateTimePickerElement | ImageElement | LinearScaleElement | MultiChannelsSelectElement diff --git a/packages/ui-kit/src/blocks/BlockElementType.ts b/packages/ui-kit/src/blocks/BlockElementType.ts index 981d7bcd42..c81b0d9505 100644 --- a/packages/ui-kit/src/blocks/BlockElementType.ts +++ b/packages/ui-kit/src/blocks/BlockElementType.ts @@ -19,6 +19,7 @@ export enum BlockElementType { CHANNELS_SELECT = 'channels_select', USERS_SELECT = 'users_select', DATEPICKER = 'datepicker', + DATETIMEPICKER = 'datetimepicker', LINEAR_SCALE = 'linear_scale', MULTI_CHANNELS_SELECT = 'multi_channels_select', MULTI_CONVERSATIONS_SELECT = 'multi_conversations_select', diff --git a/packages/ui-kit/src/blocks/ElementType.ts b/packages/ui-kit/src/blocks/ElementType.ts index d91973275b..c9ed155acf 100644 --- a/packages/ui-kit/src/blocks/ElementType.ts +++ b/packages/ui-kit/src/blocks/ElementType.ts @@ -18,5 +18,6 @@ export enum ElementType { STATIC_SELECT = 'static_select', MULTI_STATIC_SELECT = 'multi_static_select', DATEPICKER = 'datepicker', + DATETIMEPICKER = 'datetimepicker', LINEAR_SCALE = 'linear_scale', } diff --git a/packages/ui-kit/src/blocks/InputElement.ts b/packages/ui-kit/src/blocks/InputElement.ts index 509f5e5100..bce413cd91 100644 --- a/packages/ui-kit/src/blocks/InputElement.ts +++ b/packages/ui-kit/src/blocks/InputElement.ts @@ -1,8 +1,10 @@ import type { SelectElement } from './SelectElement'; import type { DatePickerElement } from './elements/DatePickerElement'; +import type { DateTimePickerElement } from './elements/DateTimePickerElement'; import type { PlainTextInputElement } from './elements/PlainTextInputElement'; export type InputElement = | DatePickerElement + | DateTimePickerElement | SelectElement | PlainTextInputElement; diff --git a/packages/ui-kit/src/blocks/deprecations.ts b/packages/ui-kit/src/blocks/deprecations.ts index cd60552068..29e05f2cbe 100644 --- a/packages/ui-kit/src/blocks/deprecations.ts +++ b/packages/ui-kit/src/blocks/deprecations.ts @@ -6,6 +6,7 @@ import type { Option } from './Option'; import type { TextObject } from './TextObject'; import type { ButtonElement } from './elements/ButtonElement'; import type { DatePickerElement } from './elements/DatePickerElement'; +import type { DateTimePickerElement } from './elements/DateTimePickerElement'; import type { ImageElement } from './elements/ImageElement'; import type { LinearScaleElement } from './elements/LinearScaleElement'; import type { MultiStaticSelectElement } from './elements/MultiStaticSelectElement'; @@ -35,6 +36,8 @@ export type IMultiStaticSelectElement = InterfaceOf; /** @deprecated */ export type IDatePickerElement = InterfaceOf; /** @deprecated */ +export type IDateTimePickerElement = InterfaceOf; +/** @deprecated */ export type IButtonElement = InterfaceOf; /** @deprecated */ export type IOverflowElement = InterfaceOf; diff --git a/packages/ui-kit/src/blocks/elements/DateTimePickerElement.ts b/packages/ui-kit/src/blocks/elements/DateTimePickerElement.ts new file mode 100644 index 0000000000..5bced0e245 --- /dev/null +++ b/packages/ui-kit/src/blocks/elements/DateTimePickerElement.ts @@ -0,0 +1,8 @@ +import type { Actionable } from '../Actionable'; +import type { TextObject } from '../TextObject'; + +export type DateTimePickerElement = Actionable<{ + type: 'datetimepicker'; + placeholder?: TextObject; + initialDateTime?: string; +}>; diff --git a/packages/ui-kit/src/blocks/isActionsBlockElement.ts b/packages/ui-kit/src/blocks/isActionsBlockElement.ts index e4915688f0..e29ea38f59 100644 --- a/packages/ui-kit/src/blocks/isActionsBlockElement.ts +++ b/packages/ui-kit/src/blocks/isActionsBlockElement.ts @@ -8,6 +8,7 @@ export const isActionsBlockElement = ( switch (block.type as ActionsBlock['elements'][number]['type']) { case BlockElementType.BUTTON: case BlockElementType.DATEPICKER: + case BlockElementType.DATETIMEPICKER: case BlockElementType.LINEAR_SCALE: case BlockElementType.MULTI_STATIC_SELECT: case BlockElementType.OVERFLOW: diff --git a/packages/ui-kit/src/blocks/isInputBlockElement.ts b/packages/ui-kit/src/blocks/isInputBlockElement.ts index 2bcce5bc6d..0561959d62 100644 --- a/packages/ui-kit/src/blocks/isInputBlockElement.ts +++ b/packages/ui-kit/src/blocks/isInputBlockElement.ts @@ -9,6 +9,7 @@ export const isInputBlockElement = ( case BlockElementType.CHANNELS_SELECT: case BlockElementType.CONVERSATIONS_SELECT: case BlockElementType.DATEPICKER: + case BlockElementType.DATETIMEPICKER: case BlockElementType.LINEAR_SCALE: case BlockElementType.MULTI_STATIC_SELECT: case BlockElementType.PLAIN_TEXT_INPUT: diff --git a/packages/ui-kit/src/blocks/isSectionBlockAccessoryElement.ts b/packages/ui-kit/src/blocks/isSectionBlockAccessoryElement.ts index c15929f838..95c54ddde2 100644 --- a/packages/ui-kit/src/blocks/isSectionBlockAccessoryElement.ts +++ b/packages/ui-kit/src/blocks/isSectionBlockAccessoryElement.ts @@ -8,6 +8,7 @@ export const isSectionBlockAccessoryElement = ( switch (block.type as Exclude['type']) { case BlockElementType.BUTTON: case BlockElementType.DATEPICKER: + case BlockElementType.DATETIMEPICKER: case BlockElementType.IMAGE: case BlockElementType.MULTI_STATIC_SELECT: case BlockElementType.OVERFLOW: diff --git a/packages/ui-kit/src/blocks/layout/ActionsBlock.ts b/packages/ui-kit/src/blocks/layout/ActionsBlock.ts index 436b009a3b..67a1a679e0 100644 --- a/packages/ui-kit/src/blocks/layout/ActionsBlock.ts +++ b/packages/ui-kit/src/blocks/layout/ActionsBlock.ts @@ -3,6 +3,7 @@ import type { ButtonElement } from '../elements/ButtonElement'; import type { ChannelsSelectElement } from '../elements/ChannelsSelectElement'; import type { ConversationsSelectElement } from '../elements/ConversationsSelectElement'; import type { DatePickerElement } from '../elements/DatePickerElement'; +import type { DateTimePickerElement } from '../elements/DateTimePickerElement'; import type { LinearScaleElement } from '../elements/LinearScaleElement'; import type { MultiChannelsSelectElement } from '../elements/MultiChannelsSelectElement'; import type { MultiConversationsSelectElement } from '../elements/MultiConversationsSelectElement'; @@ -19,6 +20,7 @@ export type ActionsBlock = LayoutBlockish<{ | ChannelsSelectElement | ConversationsSelectElement | DatePickerElement + | DateTimePickerElement | LinearScaleElement | MultiChannelsSelectElement | MultiConversationsSelectElement diff --git a/packages/ui-kit/src/blocks/layout/InputBlock.ts b/packages/ui-kit/src/blocks/layout/InputBlock.ts index 9b9de53b45..a16ead7904 100644 --- a/packages/ui-kit/src/blocks/layout/InputBlock.ts +++ b/packages/ui-kit/src/blocks/layout/InputBlock.ts @@ -2,6 +2,7 @@ import type { LayoutBlockish } from '../LayoutBlockish'; import type { ChannelsSelectElement } from '../elements/ChannelsSelectElement'; import type { ConversationsSelectElement } from '../elements/ConversationsSelectElement'; import type { DatePickerElement } from '../elements/DatePickerElement'; +import type { DateTimePickerElement } from '../elements/DateTimePickerElement'; import type { LinearScaleElement } from '../elements/LinearScaleElement'; import type { MultiChannelsSelectElement } from '../elements/MultiChannelsSelectElement'; import type { MultiConversationsSelectElement } from '../elements/MultiConversationsSelectElement'; @@ -19,6 +20,7 @@ export type InputBlock = LayoutBlockish<{ | ChannelsSelectElement | ConversationsSelectElement | DatePickerElement + | DateTimePickerElement | LinearScaleElement | MultiChannelsSelectElement | MultiConversationsSelectElement diff --git a/packages/ui-kit/src/blocks/layout/SectionBlock.ts b/packages/ui-kit/src/blocks/layout/SectionBlock.ts index 19b6879870..3656a2be37 100644 --- a/packages/ui-kit/src/blocks/layout/SectionBlock.ts +++ b/packages/ui-kit/src/blocks/layout/SectionBlock.ts @@ -2,6 +2,7 @@ import type { LayoutBlockish } from '../LayoutBlockish'; import type { TextObject } from '../TextObject'; import type { ButtonElement } from '../elements/ButtonElement'; import type { DatePickerElement } from '../elements/DatePickerElement'; +import type { DateTimePickerElement } from '../elements/DateTimePickerElement'; import type { ImageElement } from '../elements/ImageElement'; import type { MultiStaticSelectElement } from '../elements/MultiStaticSelectElement'; import type { OverflowElement } from '../elements/OverflowElement'; @@ -14,6 +15,7 @@ export type SectionBlock = LayoutBlockish<{ accessory?: | ButtonElement | DatePickerElement + | DateTimePickerElement | ImageElement | MultiStaticSelectElement | OverflowElement diff --git a/packages/ui-kit/src/rendering/ActionOf.ts b/packages/ui-kit/src/rendering/ActionOf.ts index 9d52239f93..78c8530f95 100644 --- a/packages/ui-kit/src/rendering/ActionOf.ts +++ b/packages/ui-kit/src/rendering/ActionOf.ts @@ -3,6 +3,7 @@ import type { ButtonElement } from '../blocks/elements/ButtonElement'; import type { ChannelsSelectElement } from '../blocks/elements/ChannelsSelectElement'; import type { ConversationsSelectElement } from '../blocks/elements/ConversationsSelectElement'; import type { DatePickerElement } from '../blocks/elements/DatePickerElement'; +import type { DateTimePickerElement } from '../blocks/elements/DateTimePickerElement'; import type { LinearScaleElement } from '../blocks/elements/LinearScaleElement'; import type { MultiChannelsSelectElement } from '../blocks/elements/MultiChannelsSelectElement'; import type { MultiConversationsSelectElement } from '../blocks/elements/MultiConversationsSelectElement'; @@ -22,6 +23,8 @@ export type ActionOf = ? unknown : TElement extends DatePickerElement ? DatePickerElement['initialDate'] + : TElement extends DateTimePickerElement + ? DateTimePickerElement['initialDateTime'] : TElement extends LinearScaleElement ? LinearScaleElement['initialValue'] : TElement extends MultiChannelsSelectElement diff --git a/packages/ui-kit/src/rendering/BlockRenderers.ts b/packages/ui-kit/src/rendering/BlockRenderers.ts index da5f11b7d7..6a16330900 100644 --- a/packages/ui-kit/src/rendering/BlockRenderers.ts +++ b/packages/ui-kit/src/rendering/BlockRenderers.ts @@ -2,6 +2,7 @@ import type { BlockElement } from '../blocks/BlockElement'; import type { RenderableLayoutBlock } from '../blocks/RenderableLayoutBlock'; import type { TextObject } from '../blocks/TextObject'; import type { DatePickerElement } from '../blocks/elements/DatePickerElement'; +import type { DateTimePickerElement } from '../blocks/elements/DateTimePickerElement'; import type { LinearScaleElement } from '../blocks/elements/LinearScaleElement'; import type { MultiStaticSelectElement } from '../blocks/elements/MultiStaticSelectElement'; import type { PlainTextInputElement } from '../blocks/elements/PlainTextInputElement'; @@ -27,6 +28,9 @@ export type BlockRenderers = { /** @deprecated */ datePicker?: BlockElementRenderer; + /** @deprecated */ + dateTimePicker?: BlockElementRenderer; + /** @deprecated */ staticSelect?: BlockElementRenderer; diff --git a/packages/ui-kit/src/rendering/renderBlockElement.ts b/packages/ui-kit/src/rendering/renderBlockElement.ts index 67d7017d27..b09bea7c98 100644 --- a/packages/ui-kit/src/rendering/renderBlockElement.ts +++ b/packages/ui-kit/src/rendering/renderBlockElement.ts @@ -17,6 +17,9 @@ const getBlockElementRenderer = ( case 'datepicker': return renderers.datePicker as BlockElementRenderer | undefined; + case 'datetimepicker': + return renderers.dateTimePicker as BlockElementRenderer | undefined; + case 'static_select': return renderers.staticSelect as BlockElementRenderer | undefined; diff --git a/packages/ui-kit/src/rendering/surfaces/UiKitParserAttachment.spec.ts b/packages/ui-kit/src/rendering/surfaces/UiKitParserAttachment.spec.ts index 3ffab15e33..42e11da81b 100644 --- a/packages/ui-kit/src/rendering/surfaces/UiKitParserAttachment.spec.ts +++ b/packages/ui-kit/src/rendering/surfaces/UiKitParserAttachment.spec.ts @@ -165,6 +165,18 @@ class TestParser extends UiKitParserAttachment { }, }); + dateTimePicker = (element: any, _context: any, index: any): any => ({ + component: 'input', + props: { + key: index, + type: 'datetime-local', + ...(element.placeholder && { + placeholder: this.text(element.placeholder, -1, 0), + }), + ...(element.initialDateTime && { defaultValue: element.initialDateTime }), + }, + }); + staticSelect = (element: any, _context: any, index: any): any => ({ component: 'select', props: { diff --git a/packages/ui-kit/src/rendering/surfaces/UiKitParserBanner.spec.ts b/packages/ui-kit/src/rendering/surfaces/UiKitParserBanner.spec.ts index c67dfeee0b..7cffaab1b9 100644 --- a/packages/ui-kit/src/rendering/surfaces/UiKitParserBanner.spec.ts +++ b/packages/ui-kit/src/rendering/surfaces/UiKitParserBanner.spec.ts @@ -181,6 +181,18 @@ class TestParser extends UiKitParserBanner { }, }); + dateTimePicker = (element: any, _context: any, index: any): any => ({ + component: 'input', + props: { + key: index, + type: 'datetime-local', + ...(element.placeholder && { + placeholder: this.text(element.placeholder, -1, 0), + }), + ...(element.initialDateTime && { defaultValue: element.initialDateTime }), + }, + }); + staticSelect = (element: any, _context: any, index: any): any => ({ component: 'select', props: { diff --git a/packages/ui-kit/src/rendering/surfaces/UiKitParserMessage.spec.ts b/packages/ui-kit/src/rendering/surfaces/UiKitParserMessage.spec.ts index 30049de1dc..4096fe3105 100644 --- a/packages/ui-kit/src/rendering/surfaces/UiKitParserMessage.spec.ts +++ b/packages/ui-kit/src/rendering/surfaces/UiKitParserMessage.spec.ts @@ -165,6 +165,18 @@ class TestParser extends UiKitParserMessage { }, }); + dateTimePicker = (element: any, _context: any, index: any): any => ({ + component: 'input', + props: { + key: index, + type: 'datetime-local', + ...(element.placeholder && { + placeholder: this.text(element.placeholder, -1, 0), + }), + ...(element.initialDateTime && { defaultValue: element.initialDateTime }), + }, + }); + staticSelect = (element: any, _context: any, index: any): any => ({ component: 'select', props: { diff --git a/packages/ui-kit/src/rendering/surfaces/UiKitParserModal.spec.ts b/packages/ui-kit/src/rendering/surfaces/UiKitParserModal.spec.ts index bbf9acb843..4892dd0678 100644 --- a/packages/ui-kit/src/rendering/surfaces/UiKitParserModal.spec.ts +++ b/packages/ui-kit/src/rendering/surfaces/UiKitParserModal.spec.ts @@ -181,6 +181,18 @@ class TestParser extends UiKitParserModal { }, }); + dateTimePicker = (element: any, _context: any, index: any): any => ({ + component: 'input', + props: { + key: index, + type: 'datetime-local', + ...(element.placeholder && { + placeholder: this.text(element.placeholder, -1, 0), + }), + ...(element.initialDateTime && { defaultValue: element.initialDateTime }), + }, + }); + staticSelect = (element: any, _context: any, index: any): any => ({ component: 'select', props: { From 00ccbd079385b4d1d9939db649add71c28de214e Mon Sep 17 00:00:00 2001 From: Zamp Date: Wed, 20 Jul 2022 10:51:34 -0700 Subject: [PATCH 2/4] Corrected initial date-time --- packages/fuselage-ui-kit/src/stories/payloads/input.ts | 2 +- packages/fuselage-ui-kit/src/stories/payloads/section.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fuselage-ui-kit/src/stories/payloads/input.ts b/packages/fuselage-ui-kit/src/stories/payloads/input.ts index ea98af4532..68fe45d57f 100644 --- a/packages/fuselage-ui-kit/src/stories/payloads/input.ts +++ b/packages/fuselage-ui-kit/src/stories/payloads/input.ts @@ -135,7 +135,7 @@ export const inputWithDateTimePicker: readonly UiKit.LayoutBlock[] = [ appId: 'dummy-app-id', blockId: 'dummy-block-id', type: 'datetimepicker', - initialDate: '1990-04-28', + initialDateTime: '2022-07-22T00:00', placeholder: { type: 'plain_text', text: 'Select date-time', diff --git a/packages/fuselage-ui-kit/src/stories/payloads/section.ts b/packages/fuselage-ui-kit/src/stories/payloads/section.ts index f6b25f4291..a9ac6bfb98 100644 --- a/packages/fuselage-ui-kit/src/stories/payloads/section.ts +++ b/packages/fuselage-ui-kit/src/stories/payloads/section.ts @@ -185,7 +185,7 @@ export const sectionWithDateTimePickerAccessory: readonly UiKit.LayoutBlock[] = blockId: 'dummy-block-id', actionId: 'dummy-action-id', type: 'datetimepicker', - initialDate: '1990-04-28', + initialDateTime: '2022-07-22T00:00', placeholder: { type: 'plain_text', text: 'Select date-time', From d189e421e1f188b7a16193db52cdbf3b966c587d Mon Sep 17 00:00:00 2001 From: Zamp Date: Wed, 20 Jul 2022 10:56:28 -0700 Subject: [PATCH 3/4] Corrected default text. --- packages/fuselage-ui-kit/src/stories/payloads/section.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fuselage-ui-kit/src/stories/payloads/section.ts b/packages/fuselage-ui-kit/src/stories/payloads/section.ts index a9ac6bfb98..d28cf312e8 100644 --- a/packages/fuselage-ui-kit/src/stories/payloads/section.ts +++ b/packages/fuselage-ui-kit/src/stories/payloads/section.ts @@ -178,7 +178,7 @@ export const sectionWithDateTimePickerAccessory: readonly UiKit.LayoutBlock[] = type: 'section', text: { type: 'mrkdwn', - text: 'Pick a date for the deadline.', + text: 'Pick date and time for the deadline.', }, accessory: { appId: 'dummy-app-id', From ce742c7d22832a7ed829973f89a24d88a8ae1063 Mon Sep 17 00:00:00 2001 From: Zamp Date: Wed, 20 Jul 2022 11:00:01 -0700 Subject: [PATCH 4/4] Removed unnecessary dependency. --- packages/fuselage-ui-kit/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json index 8d665159ee..84321ec55c 100644 --- a/packages/fuselage-ui-kit/package.json +++ b/packages/fuselage-ui-kit/package.json @@ -82,7 +82,6 @@ "write-version-module": "workspace:~" }, "dependencies": { - "@rocket.chat/fuselage-ui-kit": "~0.31.14", "@rocket.chat/ui-kit": "workspace:~", "tslib": "^2.3.1" }