release/v0.5.0 (#32)

* Add direction prop and open/close event. * Readme fix. Co-authored-by: Dmitry Zhuravkov <[email protected]>
dipson88 · Sep 30, 2022 · 23b645d · 23b645d
1 parent 3737244
commit 23b645d
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -123,13 +123,18 @@ Name  | Type (default) | Description
 **isSingleSelect** | Boolean (false) | Converts multi-select to the single value select. Checkboxes will be removed. You should pass only one id instead of array of values. Also you can set **showTags** to false. It helps to show treeselect as a dropdown.
 **isGroupedValue** | Boolean (false) | Return groups if they selected instead of separate ids. Treeselect returns only leaves ids by default.
 **disabledBranchNode** | Boolean (false) | It is impossible to select groups. You can select only leaves.
+**direction** | String (auto) | A force direction for the list. Supported values: `auto`, `top`, `bottom`.
 **iconElements** | Object({ arrowUp, ... }) | Object contains all svg icons. You can use HTMLElement or a String to reset values from the default Object. Object: ```iconElements: { arrowUp, arrowDown, arrowRight, attention, clear, cross, check, partialCheck }```. After reset of icon you have to update styles if it is necessary, use `alwaysOpen` prop for more comfortable work with styles changes.
 **inputCallback** | (value) => void (undefined) | Callback method for `input` if you don't what use eventListener.
+**openCallback** | (value) => void (undefined) | Callback method for `open` if you don't what use eventListener.
+**closeCallback** | (value) => void (undefined) | Callback method for `close` if you don't what use eventListener.
 
 ### Emits
 Name  | Return Type | Description
 ------------- | ------------- | -------------
-**input**  | Array[String \| Number] | Returns selected ids without groups, only leafs. Add `eventListener` or use `inputCallback` prop to get value.
+**input**  | Array[String \| Number] | Returns selected ids, action is triggered on change the list value. Add `eventListener` or use `inputCallback` prop to get value.
+**open**  | Array[String \| Number] | Returns selected ids, action is triggered on opening the list. Add `eventListener` or use `openCallback` prop to get value.
+**close**  | Array[String \| Number] | Returns selected ids, action is triggered on closing the list. Add `eventListener` or use `closeCallback` prop to get value.
 
 ### Methods
 Name  | Params | Description

diff --git a/dist/treeselectjs.cjs.js b/dist/treeselectjs.cjs.js
diff --git a/dist/treeselectjs.d.ts b/dist/treeselectjs.d.ts
@@ -4,6 +4,7 @@ type OptionType = {
     name: string;
     children: OptionType[];
 };
+type DirectionType = 'auto' | 'top' | 'bottom';
 interface ITreeselect {
     parentHtmlContainer: HTMLElement;
     value: ValueOptionType[] | ValueOptionType;
@@ -26,11 +27,14 @@ interface ITreeselect {
     isSingleSelect: boolean;
     showCount: boolean;
     disabledBranchNode: boolean;
+    direction: DirectionType;
     iconElements: IconsType;
     groupedValue: ValueOptionType[];
     isListOpened: boolean;
     srcElement: HTMLElement | null;
     inputCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined;
+    openCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined;
+    closeCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined;
     mount: () => void;
     updateValue: (newValue: ValueOptionType[] | ValueOptionType) => void;
     destroy: () => void;
@@ -59,8 +63,11 @@ interface ITreeselectParams {
     isSingleSelect?: boolean;
     showCount?: boolean;
     disabledBranchNode?: boolean;
+    direction?: DirectionType;
     iconElements?: Partial<IconsType>;
     inputCallback?: (value: ValueOptionType[] | ValueOptionType) => void;
+    openCallback?: (value: ValueOptionType[] | ValueOptionType) => void;
+    closeCallback?: (value: ValueOptionType[] | ValueOptionType) => void;
 }
 type IconsType = {
     arrowUp: string | HTMLElement;
@@ -95,12 +102,15 @@ export class Treeselect implements ITreeselect {
     isSingleSelect: boolean;
     showCount: boolean;
     disabledBranchNode: boolean;
+    direction: DirectionType;
     iconElements: IconsType;
     inputCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined;
+    openCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined;
+    closeCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined;
     groupedValue: ValueOptionType[];
     isListOpened: boolean;
     srcElement: HTMLElement | null;
-    constructor({ parentHtmlContainer, value, options, openLevel, appendToBody, alwaysOpen, showTags, tagsCountText, clearable, searchable, placeholder, grouped, isGroupedValue, listSlotHtmlComponent, disabled, emptyText, staticList, id, isSingleSelect, showCount, disabledBranchNode, iconElements, inputCallback }: ITreeselectParams);
+    constructor({ parentHtmlContainer, value, options, openLevel, appendToBody, alwaysOpen, showTags, tagsCountText, clearable, searchable, placeholder, grouped, isGroupedValue, listSlotHtmlComponent, disabled, emptyText, staticList, id, isSingleSelect, showCount, disabledBranchNode, direction, iconElements, inputCallback, openCallback, closeCallback }: ITreeselectParams);
     mount(): void;
     updateValue(newValue: ValueOptionType[] | ValueOptionType): void;
     destroy(): void;

diff --git a/dist/treeselectjs.mjs.js b/dist/treeselectjs.mjs.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "treeselectjs",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "Treeselect JS",
   "main": "dist/treeselectjs.cjs.js",
   "module": "dist/treeselectjs.mjs.js",

diff --git a/src/treeselectTypes.ts b/src/treeselectTypes.ts
@@ -6,6 +6,8 @@ export type OptionType = {
   children: OptionType[]
 }
 
+export type DirectionType = 'auto' | 'top' | 'bottom'
+
 export interface ITreeselect {
   parentHtmlContainer: HTMLElement
   value: ValueOptionType[] | ValueOptionType
@@ -28,11 +30,14 @@ export interface ITreeselect {
   isSingleSelect: boolean
   showCount: boolean
   disabledBranchNode: boolean
+  direction: DirectionType
   iconElements: IconsType
   groupedValue: ValueOptionType[]
   isListOpened: boolean
   srcElement: HTMLElement | null
   inputCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined
+  openCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined
+  closeCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined
   mount: () => void
   updateValue: (newValue: ValueOptionType[] | ValueOptionType) => void
   destroy: () => void
@@ -62,8 +67,11 @@ export interface ITreeselectParams {
   isSingleSelect?: boolean
   showCount?: boolean
   disabledBranchNode?: boolean
+  direction?: DirectionType
   iconElements?: Partial<IconsType>
   inputCallback?: (value: ValueOptionType[] | ValueOptionType) => void
+  openCallback?: (value: ValueOptionType[] | ValueOptionType) => void
+  closeCallback?: (value: ValueOptionType[] | ValueOptionType) => void
 }
 
 export type FlattedOptionType = {

diff --git a/src/treeselectjs.ts b/src/treeselectjs.ts
@@ -9,7 +9,8 @@ import {
   ValueOptionType,
   FlattedOptionType,
   IconsType,
-  SelectedNodesType
+  SelectedNodesType,
+  DirectionType
 } from './treeselectTypes'
 import { getDefaultIcons } from './svgIcons'
 
@@ -18,7 +19,8 @@ const validateProps = ({
   staticList,
   appendToBody,
   isSingleSelect,
-  value
+  value,
+  direction
 }: Partial<ITreeselectParams>) => {
   if (!parentHtmlContainer) {
     console.error('Validation: parentHtmlContainer prop is required!')
@@ -35,6 +37,10 @@ const validateProps = ({
   if (!isSingleSelect && !Array.isArray(value)) {
     console.error('Validation: you should pass an array as a value!')
   }
+
+  if (direction !== 'auto' && direction !== 'bottom' && direction !== 'top') {
+    console.error('Validation: you should pass (auto | top | bottom | undefined) as a value for the direction prop!')
+  }
 }
 
 const getOnlyIds = (nodes: FlattedOptionType[]) => nodes.map((node) => node.id)
@@ -80,8 +86,11 @@ export class Treeselect implements ITreeselect {
   isSingleSelect: boolean
   showCount: boolean
   disabledBranchNode: boolean
+  direction: DirectionType
   iconElements: IconsType
   inputCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined
+  openCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined
+  closeCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined
 
   // InnerState
   groupedValue: ValueOptionType[]
@@ -123,8 +132,11 @@ export class Treeselect implements ITreeselect {
     isSingleSelect,
     showCount,
     disabledBranchNode,
+    direction,
     iconElements,
-    inputCallback
+    inputCallback,
+    openCallback,
+    closeCallback
   }: ITreeselectParams) {
     validateProps({
       parentHtmlContainer,
@@ -155,8 +167,11 @@ export class Treeselect implements ITreeselect {
     this.isSingleSelect = isSingleSelect ?? false
     this.showCount = showCount ?? false
     this.disabledBranchNode = disabledBranchNode ?? false
+    this.direction = direction ?? 'auto'
     this.iconElements = getDefaultIcons(iconElements)
     this.inputCallback = inputCallback
+    this.openCallback = openCallback
+    this.closeCallback = closeCallback
 
     this.groupedValue = []
     this.isListOpened = false
@@ -361,6 +376,8 @@ export class Treeselect implements ITreeselect {
     this.updateListPosition()
     this.#updateOpenCloseClasses(true)
     this.#treeselectList.focusFirstListElement()
+
+    this.#emitOpen()
   }
 
   #closeList() {
@@ -395,6 +412,7 @@ export class Treeselect implements ITreeselect {
     }
 
     this.#updateOpenCloseClasses(false)
+    this.#emitClose()
   }
 
   #updateDirectionClasses(isTop: boolean, appendToBody: boolean) {
@@ -507,7 +525,11 @@ export class Treeselect implements ITreeselect {
 
     const spaceTop = containerY
     const spaceBottom = windowHeight - containerY - containerHeight
-    const isTopDirection = spaceTop > spaceBottom && spaceTop >= listHeight && spaceBottom < listHeight
+    let isTopDirection = spaceTop > spaceBottom && spaceTop >= listHeight && spaceBottom < listHeight
+
+    if (this.direction !== 'auto') {
+      isTopDirection = this.direction === 'top'
+    }
 
     if (this.appendToBody) {
       list.style.transform = isTopDirection
@@ -527,13 +549,37 @@ export class Treeselect implements ITreeselect {
   }
 
   // Emits
-  #emitInput() {
+  #getEmitValue() {
     const typedValue = this.isGroupedValue || this.isSingleSelect ? this.groupedValue : this.value
     const value = getResultValue(typedValue, this.isSingleSelect)
+
+    return value
+  }
+
+  #emitInput() {
+    const value = this.#getEmitValue()
     this.srcElement?.dispatchEvent(new CustomEvent('input', { detail: value }))
 
     if (this.inputCallback) {
       this.inputCallback(value)
     }
   }
+
+  #emitOpen() {
+    const value = this.#getEmitValue()
+    this.srcElement?.dispatchEvent(new CustomEvent('open', { detail: value }))
+
+    if (this.openCallback) {
+      this.openCallback(value)
+    }
+  }
+
+  #emitClose() {
+    const value = this.#getEmitValue()
+    this.srcElement?.dispatchEvent(new CustomEvent('close', { detail: value }))
+
+    if (this.closeCallback) {
+      this.closeCallback(value)
+    }
+  }
 }