From fc47ca3d4a5255501172e5dd97a92f5788251eac Mon Sep 17 00:00:00 2001 From: Filip Maj Date: Fri, 28 Oct 2022 10:46:33 -0400 Subject: [PATCH 1/5] Add types for DateTimepicker, EmailInput, NumberInput and URLInput --- packages/types/src/index.ts | 40 +++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 3ac0f755e..dc55fa25d 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -288,6 +288,13 @@ export interface RadioButtons extends Action, Confirmable, Focusable { initial_option?: Option; options: Option[]; } +export interface DateTimepicker extends Action { + type: 'datetimepicker'; + initial_date_time?: number; + confirm?: Confirm; + focus_on_load?: boolean; + timezone?: string; +} export interface Checkboxes extends Action, Confirmable, Focusable { type: 'checkboxes'; @@ -301,6 +308,39 @@ export interface PlainTextInput extends Action, Dispatchable, Focusable, Placeho multiline?: boolean; min_length?: number; max_length?: number; + dispatch_action_config?: DispatchActionConfig; + focus_on_load?: boolean; +} + +export interface URLInput extends Action { + type: 'url_text_input'; + placeholder?: PlainTextElement; + initial_value?: string; + dispatch_action_config?: DispatchActionConfig; + focus_on_load?: boolean; +} + +export interface EmailInput extends Action { + type: 'email_text_input'; + placeholder?: PlainTextElement; + initial_value?: string; + dispatch_action_config?: DispatchActionConfig; + focus_on_load?: boolean; +} + +export interface NumberInput extends Action { + type: 'number_input'; + is_decimal_allowed: boolean; + placeholder?: PlainTextElement; + initial_value?: string; + min_value?: string; + max_value?: string; + dispatch_action_config?: DispatchActionConfig; + focus_on_load?: boolean; +} + +export interface DispatchActionConfig { + trigger_actions_on?: ('on_enter_pressed' | 'on_character_entered')[]; } /* From 2cb043936c5ce8d3e6c54733969b0a496bf322ef Mon Sep 17 00:00:00 2001 From: Filip Maj Date: Fri, 28 Oct 2022 11:44:27 -0400 Subject: [PATCH 2/5] Remove erroneous timezone property from datetimepicker, add JSdocs for new block element properties specific to those elements. --- packages/types/src/index.ts | 48 ++++++++++++++++++++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index dc55fa25d..5b8d190dd 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -288,12 +288,24 @@ export interface RadioButtons extends Action, Confirmable, Focusable { initial_option?: Option; options: Option[]; } + +/** + * @description An element that allows the selection of a time of day formatted as a UNIX timestamp. On desktop + * clients, this time picker will take the form of a dropdown list and the date picker will take the form of a dropdown + * calendar. Both options will have free-text entry for precise choices. On mobile clients, the time picker and date + * picker will use native UIs. + * {@link https://api.slack.com/reference/block-kit/block-elements#datetimepicker} + */ export interface DateTimepicker extends Action { type: 'datetimepicker'; + /** + * @description The initial date and time that is selected when the element is loaded, represented as a UNIX + * timestamp in seconds. This should be in the format of 10 digits, for example 1628633820 represents the date and + * time August 10th, 2021 at 03:17pm PST. + */ initial_date_time?: number; confirm?: Confirm; focus_on_load?: boolean; - timezone?: string; } export interface Checkboxes extends Action, Confirmable, Focusable { @@ -312,28 +324,62 @@ export interface PlainTextInput extends Action, Dispatchable, Focusable, Placeho focus_on_load?: boolean; } +/** + * @description A URL input element, similar to the {@see PlainTextInput} element, creates a single line field where + * a user can enter URL-encoded data. + * {@link https://api.slack.com/reference/block-kit/block-elements#url} + */ export interface URLInput extends Action { type: 'url_text_input'; placeholder?: PlainTextElement; + /** + * @description The initial value in the URL input when it is loaded. + */ initial_value?: string; dispatch_action_config?: DispatchActionConfig; focus_on_load?: boolean; } +/** + * @description An email input element, similar to the {@see PlainTextInput} element, creates a single line field where + * a user can enter an email address. + * {@link https://api.slack.com/reference/block-kit/block-elements#email} + */ export interface EmailInput extends Action { type: 'email_text_input'; placeholder?: PlainTextElement; + /** + * @description The initial value in the email input when it is loaded. + */ initial_value?: string; dispatch_action_config?: DispatchActionConfig; focus_on_load?: boolean; } +/** + * @description A number input element, similar to the {@see PlainTextInput} element, creates a single line field where + * a user can a number. This input elements accepts floating point numbers, for example, 0.25, 5.5, and -10 are all + * valid input values. Decimal numbers are only allowed when `is_decimal_allowed` is equal to `true`. + * {@link https://api.slack.com/reference/block-kit/block-elements#number} + */ export interface NumberInput extends Action { type: 'number_input'; + /** + * @description Decimal numbers are allowed if this property is `true`, set the value to `false` otherwise. + */ is_decimal_allowed: boolean; placeholder?: PlainTextElement; + /** + * @description The initial value in the input when it is loaded. + */ initial_value?: string; + /** + * @description The minimum value, cannot be greater than `max_value`. + */ min_value?: string; + /** + * @description The maximum value, cannot be less than `min_value`. + */ max_value?: string; dispatch_action_config?: DispatchActionConfig; focus_on_load?: boolean; From acad1298257d896f9c41b6113c491288b3b9d0a8 Mon Sep 17 00:00:00 2001 From: Filip Maj Date: Fri, 28 Oct 2022 12:11:40 -0400 Subject: [PATCH 3/5] Add new elements to Section, Input and Actions blocks --- packages/types/src/index.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 5b8d190dd..50c12e33e 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -415,7 +415,8 @@ export interface ContextBlock extends Block { export interface ActionsBlock extends Block { type: 'actions'; - elements: (Button | Overflow | Datepicker | Timepicker | Select | RadioButtons | Checkboxes | Action)[]; + elements: (Button | Overflow | Datepicker | Timepicker | DateTimepicker | Select | RadioButtons | Checkboxes + | Action)[]; } export interface DividerBlock extends Block { @@ -430,6 +431,7 @@ export interface SectionBlock extends Block { | Overflow | Datepicker | Timepicker + | DateTimepicker | Select | MultiSelect | Action @@ -454,7 +456,8 @@ export interface InputBlock extends Block { label: PlainTextElement; hint?: PlainTextElement; optional?: boolean; - element: Select | MultiSelect | Datepicker | Timepicker | PlainTextInput | RadioButtons | Checkboxes; + element: Select | MultiSelect | Datepicker | Timepicker | DateTimepicker | PlainTextInput | URLInput | EmailInput + | NumberInput | RadioButtons | Checkboxes; dispatch_action?: boolean; } From 450e3defcb9f8d3bda6f3d158c17f9724c5913f4 Mon Sep 17 00:00:00 2001 From: Filip Maj Date: Mon, 31 Oct 2022 15:13:03 -0400 Subject: [PATCH 4/5] Use new extendable focus/dispatch/confirm/placeholder interface mixins for new elements. --- packages/types/src/index.ts | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 50c12e33e..149b0318f 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -296,7 +296,7 @@ export interface RadioButtons extends Action, Confirmable, Focusable { * picker will use native UIs. * {@link https://api.slack.com/reference/block-kit/block-elements#datetimepicker} */ -export interface DateTimepicker extends Action { +export interface DateTimepicker extends Action, Confirmable, Focusable { type: 'datetimepicker'; /** * @description The initial date and time that is selected when the element is loaded, represented as a UNIX @@ -304,8 +304,6 @@ export interface DateTimepicker extends Action { * time August 10th, 2021 at 03:17pm PST. */ initial_date_time?: number; - confirm?: Confirm; - focus_on_load?: boolean; } export interface Checkboxes extends Action, Confirmable, Focusable { @@ -329,15 +327,12 @@ export interface PlainTextInput extends Action, Dispatchable, Focusable, Placeho * a user can enter URL-encoded data. * {@link https://api.slack.com/reference/block-kit/block-elements#url} */ -export interface URLInput extends Action { +export interface URLInput extends Action, Dispatchable, Focusable, Placeholdable { type: 'url_text_input'; - placeholder?: PlainTextElement; /** * @description The initial value in the URL input when it is loaded. */ initial_value?: string; - dispatch_action_config?: DispatchActionConfig; - focus_on_load?: boolean; } /** @@ -345,15 +340,12 @@ export interface URLInput extends Action { * a user can enter an email address. * {@link https://api.slack.com/reference/block-kit/block-elements#email} */ -export interface EmailInput extends Action { +export interface EmailInput extends Action, Dispatchable, Focusable, Placeholdable { type: 'email_text_input'; - placeholder?: PlainTextElement; /** * @description The initial value in the email input when it is loaded. */ initial_value?: string; - dispatch_action_config?: DispatchActionConfig; - focus_on_load?: boolean; } /** @@ -362,13 +354,12 @@ export interface EmailInput extends Action { * valid input values. Decimal numbers are only allowed when `is_decimal_allowed` is equal to `true`. * {@link https://api.slack.com/reference/block-kit/block-elements#number} */ -export interface NumberInput extends Action { +export interface NumberInput extends Action, Dispatchable, Focusable, Placeholdable { type: 'number_input'; /** * @description Decimal numbers are allowed if this property is `true`, set the value to `false` otherwise. */ is_decimal_allowed: boolean; - placeholder?: PlainTextElement; /** * @description The initial value in the input when it is loaded. */ @@ -381,8 +372,6 @@ export interface NumberInput extends Action { * @description The maximum value, cannot be less than `min_value`. */ max_value?: string; - dispatch_action_config?: DispatchActionConfig; - focus_on_load?: boolean; } export interface DispatchActionConfig { From 35c3cb53f6e0c8ae6073879a4b8a33e18b9326c1 Mon Sep 17 00:00:00 2001 From: Filip Maj Date: Mon, 31 Oct 2022 15:16:05 -0400 Subject: [PATCH 5/5] Remove duplicate DispatchACtionConfig, remove DateTimePicker from section blocks. --- packages/types/src/index.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 149b0318f..1fe59d25e 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -374,10 +374,6 @@ export interface NumberInput extends Action, Dispatchable, Focusable, Placeholda max_value?: string; } -export interface DispatchActionConfig { - trigger_actions_on?: ('on_enter_pressed' | 'on_character_entered')[]; -} - /* * Block Types */ @@ -420,7 +416,6 @@ export interface SectionBlock extends Block { | Overflow | Datepicker | Timepicker - | DateTimepicker | Select | MultiSelect | Action