slack-block-builder - npm Package Compare versions

Comparing version 1.6.1 to 1.7.0

CHANGELOG.md

 # Change Log
 
+## v1.7.0 – 2020-10-17
+
+* Add `TimePicker` input element.
+* Support `dispatch_action` parameter for input block (`dispatchAction` method in `Input` object).
+* Support `dispatch_action_config` for plain-text input (`dispatchActionOnCharacterEntered` and `dispatchActionOnEnterPressed` methods on `TextInput` object).
+* Add TypeScript definitions.
+
 ## v1.6.1 – 2020-10-13
@@ -4,0 +11,0 @@

package.json

 {
   "name": "slack-block-builder",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "Maintainable code for interactive Slack messages, modals and home tabs. A must-have for the Slack Block Kit framework.",
@@ -22,2 +22,3 @@ "author": {
   "main": "./src/index.js",
+  "types": "./src/types.d.ts",
   "license": "MIT",
@@ -24,0 +25,0 @@ "keywords": [

README.md

@@ -40,2 +40,3 @@ <p align="center">
 * Support for all current Slack Block Kit objects – Surfaces, Blocks, Elements, and Composition Objects ([View Support](#object-support-and-reference)).
+* TypeScript type definitions.
 * Super helpful JSDoc hints that include real-world explanations, Slack validation rules, and a direct link to the object's documentation on [Slack's API doc site](https://api.slack.com/block-kit).
@@ -48,3 +49,2 @@ * Output of the composed UI as either an object, JSON string, or array of blocks.
 
-* TypeScript type definitions.
 * Components, such as an Accordion module.
@@ -135,3 +135,4 @@ * Configurable option to check [Slack](https://slack.com) validation rules.
 | Checkboxes           | Element            | :white_check_mark:             | `Elements.Checkboxes()`           
-| Date Picker          | Element            | :white_check_mark:             | `Elements.DatePicker()`           
+| Date Picker          | Element            | :white_check_mark:             | `Elements.DatePicker()`
+| Time Picker          | Element            | :white_check_mark:             | `Elements.TimePicker()`           
 | Image                | Element            | :white_check_mark:             | `Elements.Img()`                  
@@ -138,0 +139,0 @@ | Overflow Menu        | Element            | :white_check_mark:             | `Elements.OverflowMenu()`

src/blocks/input.js

@@ -13,2 +13,3 @@ const { Block } = require('./base');
     this.element = params.element;
+    this.dispatch_action = params.dispatchAction;
     this.block_id = params.blockId;
@@ -97,2 +98,15 @@ this.hint = params.hint;
   /**
+   * Sets the 'dispatch_action' parameter to true, meaning an actions
+   * payload is sent upon interaction.
+   *
+   * {@link https://api.slack.com/reference/block-kit/blocks#input|View in Slack API Documentation}
+   *
+   * @return {this} The instance on which the method is called
+   */
+
+  dispatchAction() {
+    return this.set(true, props.dispatchAction);
+  }
+
+  /**
    * @private
@@ -99,0 +113,0 @@ */

src/elements/index.js

@@ -16,2 +16,3 @@ const { Button, ButtonDto } = require('./button');
 const { StaticMultiSelect, StaticMultiSelectDto } = require('./static-multiselect');
+const { TimePicker, TimePickerDto } = require('./time-picker');
 const { UserMultiSelect, UserMultiSelectDto } = require('./user-multiselect');
@@ -36,2 +37,3 @@ const { UserSelect, UserSelectDto } = require('./user-select');
   StaticSelectDto,
+  TimePickerDto,
   UserMultiSelectDto,
@@ -253,2 +255,16 @@ UserSelectDto,
     /**
+     * Creates and returns a TimePicker Element
+     *
+     * {@link https://api.slack.com/reference/block-kit/block-elements#timepicker|View in Slack API Documentation}
+     *
+     * @param {Object} [params] Constructor parameters
+     * @param {string} [params.actionId] Sets a string to be an identifier for the source of an action in interaction payloads
+     * @param {string} [params.placeholder] Adds the text in place of the input before selected or interacted with
+     * @param {string} [params.initialTime] Sets the default selected time in the menu
+     * @return {TimePicker} An instance of TimePicker
+     */
+
+    TimePicker: (params) => getInstance(TimePicker, params),
+
+    /**
      * Creates and returns a UserMultiSelect Element
@@ -299,2 +315,3 @@ *
   StaticSelect,
+  TimePicker,
   UserMultiSelect,
@@ -301,0 +318,0 @@ UserSelect,

src/elements/text-input.js

 const { ActionElement } = require('./base');
 const { SlackDto } = require('../utility/lib');
 const { BuilderHelper } = require('../utility/helpers');
-const { types, props } = require('../utility/constants');
+const { types, props, enumValues } = require('../utility/constants');
 
@@ -17,2 +17,3 @@ class TextInputDto extends SlackDto {
     this.max_length = params.maxLength;
+    this.dispatch_action_config = params.dispatchActionConfig;
 
@@ -111,2 +112,26 @@ this.pruneAndFreeze();
   /**
+   * Configures the text input to send an actions payload when Enter is pressed
+   *
+   * {@link https://api.slack.com/reference/block-kit/block-elements#input|View in Slack API Documentation}
+   *
+   * @return {this} The instance on which the method is called
+   */
+
+  dispatchActionOnEnterPressed() {
+    return this.set(enumValues.onEnterPressed, props.onEnterPressed);
+  }
+
+  /**
+   * Configures the text input to send an actions payload when a character is entered
+   *
+   * {@link https://api.slack.com/reference/block-kit/block-elements#input|View in Slack API Documentation}
+   *
+   * @return {this} The instance on which the method is called
+   */
+
+  dispatchActionOnCharacterEntered() {
+    return this.set(enumValues.onCharacterEntered, props.onCharacterEntered);
+  }
+
+  /**
    * @private
@@ -116,5 +141,8 @@ */
   build() {
-    this.props.placeholder = BuilderHelper.getPlainTextObject(this.props.placeholder);
+    const augmentedProps = {
+      placeholder: BuilderHelper.getPlainTextObject(this.props.placeholder),
+      dispatchActionConfig: BuilderHelper.getDispatchActionsConfigurationObject(this.props),
+    };
 
-    return this.getResult(TextInputDto);
+    return this.getResult(TextInputDto, augmentedProps);
   }
@@ -121,0 +149,0 @@ }

src/objects/index.js

 const FilterObject = require('./filter-object');
 const MarkdownObject = require('./markdown-object');
 const PlainTextObject = require('./plain-text-object');
+const DispatchActionsConfigurationObject = require('./dispatch-actions-configuration-object');
 
@@ -9,2 +10,3 @@ module.exports = {
   PlainTextObject,
+  DispatchActionsConfigurationObject,
 };

src/utility/constants/param-map.js

@@ -63,2 +63,5 @@ module.exports = {
   attachments: 'attachments',
+  dispatchAction: 'dispatch_action',
+  dispatchActionConfig: 'dispatch_action_config',
+  initialTime: 'initial_time',
 };

src/utility/constants/props.js

@@ -67,2 +67,9 @@ module.exports = {
   attachments: 'attachments',
+  dispatchAction: 'dispatchAction',
+  dispatchActionConfig: 'dispatchActionConfig',
+  onEnterPressed: 'onEnterPressed',
+  onCharacterEntered: 'onCharacterEntered',
+  dispatchActionOnEnterPressed: 'dispatchActionOnEnterPressed',
+  dispatchActionOnCharacterEntered: 'dispatchActionOnCharacterEntered',
+  initialTime: 'initialTime',
 };

src/utility/constants/types.js

@@ -20,2 +20,3 @@ module.exports = {
     datepicker: 'datepicker',
+    timepicker: 'timepicker',
     image: 'image',
@@ -22,0 +23,0 @@ overflow: 'overflow',

src/utility/constants/values.js

@@ -7,2 +7,4 @@ module.exports = {
   inChannel: 'in_channel',
+  onEnterPressed: 'on_enter_pressed',
+  onCharacterEntered: 'on_character_entered',
 };

src/utility/helpers/builder-helper.js

@@ -97,2 +97,12 @@ const Objects = require('../../objects');
 
+  static getDispatchActionsConfigurationObject(props) {
+    const { onEnterPressed, onCharacterEntered } = props;
+
+    if (this.areUndefined(onEnterPressed, onCharacterEntered)) {
+      return undefined;
+    }
+
+    return new Objects.DispatchActionsConfigurationObject({ triggerActionsOn: [onEnterPressed, onCharacterEntered].filter(Boolean) });
+  }
+
   static isUndefined(value) {
@@ -99,0 +109,0 @@ return typeof value === 'undefined';

src/utility/validators/default-type-rules.js

@@ -67,2 +67,6 @@ const types = require('./type-validators');
   attachments: types.areAttachments,
+  dispatchAction: types.isBool,
+  onEnterPressed: types.isDispatchConfigEnum,
+  onCharacterEntered: types.isDispatchConfigEnum,
+  initialTime: types.isHhMmTime,
 };

src/utility/validators/type-validators.js

@@ -104,2 +104,12 @@ const Validator = require('../lib/validator');
   }),
+
+  isDispatchConfigEnum: new Validator({
+    condition: (value) => [enumValues.onEnterPressed, enumValues.onCharacterEntered].includes(value),
+    message: 'String with value \'on_enter_pressed\' or \'on_character_entered\'',
+  }),
+
+  isHhMmTime: new Validator({
+    condition: (value) => new RegExp('([0-2][0-9]:[0-9][0-9])').test(value),
+    message: 'String in the \'HH:mm\' format, where \'HH\' is the 24-hour format of an hour, and \'mm\' is minutes with leading zero'
+  }),
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

182894

increased by12.99%

Number of package files

86

increased by3.61%

Lines of code

4427

increased by14.93%

Number of lines in readme file

310

increased by0.32%

No dependency changes