adding sort method

Author: dev-javascript

README.md

@@ -60,6 +60,7 @@ React Dynamic Tabs with full API
   - [off](#off)
   - [getData](#getData)
   - [getPreviousData](#getPreviousData)
+  - [sort](#sort)
 - [tabData](#tabData)
 - [Lazy Loading](#lazy-loading)
 - [Styling](#styling)
@@ -167,9 +168,9 @@ export default () => {
 
 **NOTE :**
 
-- Tabs can't be manipulated safely before the first render, use ready() to access the instance object, ready accepts a function as its parameter and calls it when tabs are mounted.
+- Tabs can't be manipulated safely before the first render, use `ready()` to access the instance object, `ready` accepts a function as its parameter and calls it when tabs are mounted.
 
-- ready function and instance Object will not be changed after re-rendering multiple times.
+- `ready` function identity is stable and won’t change on re-renders.
 
 ## Options
 
@@ -976,6 +977,27 @@ const {selectedTabID, openTabIDs} = instance.getPreviousData();
 
 - getCopyPerviousData function is an older version of getPreviousData function and it is enabled by default so that existing users do not have to change their code. You are free to use both conventions.
 
+### sort
+
+Useful for sorting tabs manually.
+
+Triggers `onInit` event.
+
+Return value : Promise
+
+Parameters:
+
+- `Array of all tabs IDs`
+
+**Example**
+
+```js
+const {openTabIDs} = instance.getData();
+instance.sort(openTabIDs.reverse()).then(({currentData, instance}) => {
+  console.log('sorting tabs has finished');
+});
+```
+
 ## tabData
 
 <table>

src/index.test.js

@@ -439,6 +439,42 @@ describe('refresh method : ', () => {
     });
   });
 });
+describe('sort method : ', () => {
+  test('it should work correctly', () => {
+    expect.assertions(4);
+    renderApp();
+    const buttons = document.querySelectorAll('button.rc-dyn-tabs-title');
+    expect(buttons[0].id).toBe('rc-dyn-tabs-l-1');
+    expect(buttons[1].id).toBe('rc-dyn-tabs-l-2');
+    return act(() => {
+      return instance.sort(['2', '1']).then(() => {
+        const buttons = document.querySelectorAll('button.rc-dyn-tabs-title');
+        expect(buttons[0].id).toBe('rc-dyn-tabs-l-2');
+        expect(buttons[1].id).toBe('rc-dyn-tabs-l-1');
+      });
+    });
+  });
+  test('it should fire onInit event', () => {
+    renderApp();
+    act(() => {
+      instance.sort([]);
+    });
+    expect(op.onInit.mock.calls.length === 2).toBe(true);
+    expect(op.onChange.mock.calls.length === 0).toBe(true);
+  });
+  test('returned Promise from sort method is resolved with {currentData,instance} parameter after onInit event', () => {
+    expect.assertions(4);
+    renderApp();
+    return act(() => {
+      return instance.sort([]).then((result) => {
+        expect(result.currentData).toEqual(instance.getData());
+        expect(result.instance).toBe(instance);
+        expect(op.onInit.mock.calls.length === 2).toBe(true);
+        expect(op.onChange.mock.calls.length === 0).toBe(true);
+      });
+    });
+  });
+});
 describe('ready function : ', () => {
   // test('ready function and instance parameters always refer to same reference after re-rendering multiple times', () => {
   // });

src/utils/api/api.factory.js

@@ -1,5 +1,5 @@
 import Helper from '../helper.js';
-const {throwMissingParam: missingParamEr} = Helper;
+const {throwMissingParam: missingParamEr, isArray, thorwInvalidParam} = Helper;
 export const apiConstructor = function (getDeps, param = {options: {}}) {
   const {optionsManager, helper, activedTabsHistory} = getDeps.call(this, param.options);
   helper.setNoneEnumProps(this, {optionsManager, helper, activedTabsHistory, userProxy: {}});
@@ -152,6 +152,14 @@ const _apiProps = {
     this._open(newTabObj.id);
     return result;
   },
+  sort: function (tabIDs = missingParamEr('sort')) {
+    if (!isArray(tabIDs)) {
+      thorwInvalidParam('sort');
+    }
+    const result = this._getFlushEffectsPromise();
+    this._sort(tabIDs);
+    return result;
+  },
   __close: function (id) {
     const result = this._getFlushEffectsPromise();
     this._close(id);

src/utils/api/api.factory.test.js

@@ -253,6 +253,44 @@ describe('Api.prototype.select : ', () => {
     }
   });
 });
+describe('Api.prototype.sort : ', () => {
+  test('should be called with an array of all tabs IDs', () => {
+    expect.assertions(2);
+    const realSort = obj._sort;
+    obj._sort = () => Promise.resolve(null);
+    const {openTabIDs} = obj.getData();
+    try {
+      obj.sort();
+    } catch (er) {
+      expect(1 === 1).toBe(true);
+    }
+    try {
+      obj.sort({openTabIDs});
+    } catch (er) {
+      expect(1 === 1).toBe(true);
+    }
+    try {
+      const sortedTabIDs = [...openTabIDs];
+      sortedTabIDs.push('29');
+      obj.sort(sortedTabIDs);
+    } catch (er) {
+      expect(1 === 1).toBe(true);
+    }
+    try {
+      obj.sort([...openTabIDs].reverse());
+    } catch (er) {
+      expect(1 === 1).toBe(true);
+    }
+    obj._sort = realSort;
+  });
+  test('it should return a thenable object', () => {
+    const realSort = obj._sort;
+    obj._sort = () => {};
+    const result = obj.sort([]);
+    expect(typeof result.then).toBe('function');
+    obj._sort = realSort;
+  });
+});
 describe('Api.prototype.eventHandlerFactory : ', () => {
   test('eventHandlerFactory method calls select function with switching=true if beforeSelect callback returned true', () => {
     expect.assertions(7);

src/utils/api/api.test.js

@@ -20,6 +20,7 @@ describe('user api : ', () => {
       'select',
       'open',
       'close',
+      'sort',
       'refresh',
     ];
     expect(Object.keys(obj.userProxy).length === userApi.length).toBe(true);

src/utils/api/baseApi.js

@@ -29,6 +29,10 @@ BaseApi.prototype._refresh = function () {
   this._dispatch({type: actions.refresh});
   this.__flushEffects();
 };
+BaseApi.prototype._sort = function (tabId) {
+  this._dispatch({type: actions.sort, tabId});
+  this.__flushEffects();
+};
 BaseApi.prototype.__flushEffects = function () {
   this._setFlushState({});
 };

src/utils/helper.js

@@ -1,60 +1,65 @@
-const helper = {};
-helper.checkArrIndex = (index, arrLength) => index >= 0 && index < arrLength;
-helper.getInstance = function (Fn) {
-  new (Function.prototype.bind.apply(Fn, arguments))();
-};
-helper.resolve = (result) => Promise.resolve(result);
-helper.getCopyState = function (state) {
-  return {
-    selectedTabID: state.selectedTabID,
-    openTabIDs: (state.openTabIDs || []).slice(),
-  };
-};
-helper.assingAll = function (targetObj, ...sourcObjs) {
-  // copy all enumerable and not enumerable properties into the target
-  sourcObjs.map((sourcObj) => {
-    const enum_only = Object.keys(sourcObj);
-    Object.getOwnPropertyNames(sourcObj).map((prop) => {
-      if (enum_only.indexOf(prop) >= 0) targetObj[prop] = sourcObj[prop];
-      else
-        Object.defineProperty(targetObj, prop, {
-          value: sourcObj[prop],
-          writable: true,
-        });
-    });
-  });
-  return targetObj;
-};
-helper.setNoneEnumProps = function (obj, props) {
-  const noneEnum = {};
-  Object.keys(props).map((prop) => {
-    noneEnum[prop] = {
-      writable: true,
-      value: props[prop],
+const helper = {
+  checkArrIndex: (index, arrLength) => index >= 0 && index < arrLength,
+  getInstance: function (Fn) {
+    new (Function.prototype.bind.apply(Fn, arguments))();
+  },
+  resolve: (result) => Promise.resolve(result),
+  getCopyState: function (state) {
+    return {
+      selectedTabID: state.selectedTabID,
+      openTabIDs: (state.openTabIDs || []).slice(),
     };
-  });
-  return Object.defineProperties(obj, noneEnum);
-};
-helper.getArraysDiff = function (arr1, arr2) {
-  const arr1Copy = [...arr1],
-    arr2Copy = [...arr2];
-  arr1.map((item) => {
-    if (arr2.indexOf(item) >= 0) {
-      arr1Copy.splice(arr1Copy.indexOf(item), 1);
-      arr2Copy.splice(arr2Copy.indexOf(item), 1);
+  },
+  assingAll: function (targetObj, ...sourcObjs) {
+    // copy all enumerable and not enumerable properties into the target
+    sourcObjs.map((sourcObj) => {
+      const enum_only = Object.keys(sourcObj);
+      Object.getOwnPropertyNames(sourcObj).map((prop) => {
+        if (enum_only.indexOf(prop) >= 0) targetObj[prop] = sourcObj[prop];
+        else
+          Object.defineProperty(targetObj, prop, {
+            value: sourcObj[prop],
+            writable: true,
+          });
+      });
+    });
+    return targetObj;
+  },
+  setNoneEnumProps: function (obj, props) {
+    const noneEnum = {};
+    Object.keys(props).map((prop) => {
+      noneEnum[prop] = {
+        writable: true,
+        value: props[prop],
+      };
+    });
+    return Object.defineProperties(obj, noneEnum);
+  },
+  getArraysDiff: function (arr1, arr2) {
+    const arr1Copy = [...arr1],
+      arr2Copy = [...arr2];
+    arr1.map((item) => {
+      if (arr2.indexOf(item) >= 0) {
+        arr1Copy.splice(arr1Copy.indexOf(item), 1);
+        arr2Copy.splice(arr2Copy.indexOf(item), 1);
+      }
+    });
+    return [arr1Copy, arr2Copy];
+  },
+  filterArrayUntilFirstValue: (arr, callback, isRightToLeft) => {
+    isRightToLeft && arr.reverse();
+    for (let i = 0, l = arr.length; i < l; i++) {
+      if (callback(arr[i], i, arr)) return arr[i];
     }
-  });
-  return [arr1Copy, arr2Copy];
-};
-helper.filterArrayUntilFirstValue = (arr, callback, isRightToLeft) => {
-  isRightToLeft && arr.reverse();
-  for (let i = 0, l = arr.length; i < l; i++) {
-    if (callback(arr[i], i, arr)) return arr[i];
-  }
-  return null;
-};
-helper.throwMissingParam = (FnName) => {
-  throw `Missing parameter in "${FnName}" function`;
+    return null;
+  },
+  throwMissingParam: (FnName) => {
+    throw new Error(`Missing parameter in "${FnName}" function`);
+  },
+  thorwInvalidParam: (FnName) => {
+    throw new Error(`Invalid parameter values passed to ${FnName} function`);
+  },
+  isObj: (obj) => Object.prototype.toString.call(obj) === '[object Object]',
+  isArray: (arr) => typeof arr === 'object' && arr.constructor === Array,
 };
-helper.isObj = (obj) => Object.prototype.toString.call(obj) === '[object Object]';
 export default helper;

src/utils/stateManagement/actions.js

@@ -3,5 +3,6 @@ const actions = {
   close: 'close',
   active: 'active',
   refresh: 'refresh',
+  sort: 'sort',
 };
 export default actions;

src/utils/stateManagement/reducer.js

@@ -29,7 +29,16 @@ export default function reducer(state, action) {
       if (state.selectedTabID !== tabId) return {selectedTabID: tabId, openTabIDs: state.openTabIDs};
       return state;
     }
-
+    case actions.sort: {
+      const arr = state.openTabIDs,
+        newArr = action.tabId,
+        newArrCount = newArr.length;
+      if (arr.length !== newArrCount) return state;
+      for (let i = 0; i < newArrCount; i++) {
+        if (arr.indexOf(newArr[i]) === -1) return state;
+      }
+      return {selectedTabID: state.selectedTabID, openTabIDs: newArr};
+    }
     default:
       throw new Error(`Undefined action type '${action.type}'`);
   }