Skip to content

Commit 830d553

Browse files
dev-javascriptdev-javascript
committed
code cleanup
1 parent ad1c42a commit 830d553

File tree

6 files changed

+240
-227
lines changed

6 files changed

+240
-227
lines changed

‎src/utils/api/activedTabsHistory.js‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
const HistoryActiveTabs = function () {
22
this.tabsId = [];
33
};
4-
HistoryActiveTabs.prototype.reset = function () {
5-
this.tabsId = [];
6-
};
7-
HistoryActiveTabs.prototype.add = function (id) {
8-
if (id) this.tabsId.push(id);
9-
};
10-
HistoryActiveTabs.prototype.remove = function (id) {
11-
const tabIDs = this.tabsId;
12-
while (tabIDs.indexOf(id) >= 0) {
13-
tabIDs.splice(tabIDs.indexOf(id), 1);
14-
}
15-
return this;
16-
};
4+
Object.assign(HistoryActiveTabs.prototype, {
5+
reset: function () {
6+
this.tabsId = [];
7+
},
8+
add: function (id) {
9+
if (id) this.tabsId.push(id);
10+
},
11+
remove: function (id) {
12+
const tabIDs = this.tabsId;
13+
while (tabIDs.indexOf(id) >= 0) {
14+
tabIDs.splice(tabIDs.indexOf(id), 1);
15+
}
16+
return this;
17+
},
18+
});
1719
export default HistoryActiveTabs;

‎src/utils/api/baseApi.js‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,32 @@ function BaseApi({helper, initialState}) {
1212
stateRef: {}, // have a same reference with state . It will be updated in each execution of useDynamicTabs.js
1313
});
1414
}
15-
BaseApi.prototype._select = function (tabId) {
16-
this._dispatch({type: actions.active, tabId});
17-
this.__flushEffects();
18-
};
19-
BaseApi.prototype._close = function (tabId) {
20-
this._dispatch({type: actions.close, tabId});
21-
this.__flushEffects();
22-
};
23-
BaseApi.prototype._open = function (tabId) {
24-
this._dispatch({type: actions.open, tabId});
25-
this.__flushEffects();
26-
};
27-
BaseApi.prototype._refresh = function () {
28-
this.forceUpdateState = {};
29-
this._dispatch({type: actions.refresh});
30-
this.__flushEffects();
31-
};
32-
BaseApi.prototype._sort = function (tabId) {
33-
this._dispatch({type: actions.sort, tabId});
34-
this.__flushEffects();
35-
};
36-
BaseApi.prototype.__flushEffects = function () {
37-
this._setFlushState({});
38-
};
15+
Object.assign(BaseApi.prototype, {
16+
_select: function (tabId) {
17+
this._dispatch({type: actions.active, tabId});
18+
this.__flushEffects();
19+
},
20+
_close: function (tabId) {
21+
this._dispatch({type: actions.close, tabId});
22+
this.__flushEffects();
23+
},
24+
_open: function (tabId) {
25+
this._dispatch({type: actions.open, tabId});
26+
this.__flushEffects();
27+
},
28+
_refresh: function () {
29+
this.forceUpdateState = {};
30+
this._dispatch({type: actions.refresh});
31+
this.__flushEffects();
32+
},
33+
_sort: function (tabId) {
34+
this._dispatch({type: actions.sort, tabId});
35+
this.__flushEffects();
36+
},
37+
__flushEffects: function () {
38+
this._setFlushState({});
39+
},
40+
});
3941
Helper.setNoneEnumProps(BaseApi.prototype, {
4042
updateStateRef: function (state, dispatch) {
4143
this.stateRef = state;

‎src/utils/api/optionManager/defaultOptions.js‎

Lines changed: 53 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -4,59 +4,61 @@ const DefaultOptions = function (DefaulTabInnerComponent = null) {
44
this._DefaulTabInnerComponent = DefaulTabInnerComponent;
55
this.directionsRange = ['ltr', 'rtl'];
66
};
7-
DefaultOptions.prototype.getOptions = function () {
8-
return this._getOptions();
9-
};
10-
DefaultOptions.prototype._getOptions = function () {
11-
const _options = {
12-
tabs: [],
13-
selectedTabID: '',
14-
beforeSelect: function () {
15-
return true;
16-
},
17-
beforeClose: function () {
18-
return true;
19-
},
20-
onOpen: function () {},
21-
onClose: function () {},
22-
onFirstSelect: function () {},
23-
onSelect: function () {},
24-
onChange: function () {},
25-
onLoad: function () {},
26-
onDestroy: function () {},
27-
onInit: function () {},
28-
accessibility: true,
29-
isVertical: false,
30-
defaultPanelComponent: function defaultPanelComponent() {
31-
return <div></div>;
32-
},
33-
};
34-
let _direction = this.defaultDirection,
35-
_tabComponent = this._DefaulTabInnerComponent;
36-
const that = this;
37-
Object.defineProperties(_options, {
38-
direction: {
39-
get() {
40-
return _direction;
7+
Object.assign(DefaultOptions.prototype, {
8+
getOptions: function () {
9+
return this._getOptions();
10+
},
11+
_getOptions: function () {
12+
const _options = {
13+
tabs: [],
14+
selectedTabID: '',
15+
beforeSelect: function () {
16+
return true;
4117
},
42-
set(value) {
43-
if (that.directionsRange.indexOf(value) === -1)
44-
throw 'Invalid direction value! it can be eather of "ltr" or "rtl" ';
45-
_direction = value;
18+
beforeClose: function () {
19+
return true;
4620
},
47-
enumerable: true,
48-
},
49-
tabComponent: {
50-
get() {
51-
return _tabComponent;
21+
onOpen: function () {},
22+
onClose: function () {},
23+
onFirstSelect: function () {},
24+
onSelect: function () {},
25+
onChange: function () {},
26+
onLoad: function () {},
27+
onDestroy: function () {},
28+
onInit: function () {},
29+
accessibility: true,
30+
isVertical: false,
31+
defaultPanelComponent: function defaultPanelComponent() {
32+
return <div></div>;
5233
},
53-
set(fn) {
54-
if (fn && typeof fn !== 'function') throw 'tabComponent property must be type of a function.';
55-
_tabComponent = fn ? fn : that._DefaulTabInnerComponent;
34+
};
35+
let _direction = this.defaultDirection,
36+
_tabComponent = this._DefaulTabInnerComponent;
37+
const that = this;
38+
Object.defineProperties(_options, {
39+
direction: {
40+
get() {
41+
return _direction;
42+
},
43+
set(value) {
44+
if (that.directionsRange.indexOf(value) === -1)
45+
throw 'Invalid direction value! it can be eather of "ltr" or "rtl" ';
46+
_direction = value;
47+
},
48+
enumerable: true,
5649
},
57-
enumerable: true,
58-
},
59-
});
60-
return _options;
61-
};
50+
tabComponent: {
51+
get() {
52+
return _tabComponent;
53+
},
54+
set(fn) {
55+
if (fn && typeof fn !== 'function') throw 'tabComponent property must be type of a function.';
56+
_tabComponent = fn ? fn : that._DefaulTabInnerComponent;
57+
},
58+
enumerable: true,
59+
},
60+
});
61+
return _options;
62+
},
63+
});
6264
export default DefaultOptions;

‎src/utils/api/optionManager/optionManager.factory.js‎

Lines changed: 93 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -11,96 +11,99 @@ function OptionManager(getDeps, {options}) {
1111
this.initialTabs = [];
1212
this._setSetting()._setInitialData();
1313
}
14-
OptionManager.prototype.getOption = function (optionName) {
15-
if (optionName === 'tabs') {
16-
// returned result should be immutable
17-
let arr = [];
18-
for (let i = 0, tabs = this.options.tabs, l = tabs.length; i < l; i++) {
19-
arr.push({...tabs[i]});
14+
Object.assign(OptionManager.prototype, {
15+
getOption: function (optionName) {
16+
if (optionName === 'tabs') {
17+
// returned result should be immutable
18+
let arr = [];
19+
for (let i = 0, tabs = this.options.tabs, l = tabs.length; i < l; i++) {
20+
arr.push({...tabs[i]});
21+
}
22+
return arr;
2023
}
21-
return arr;
22-
}
23-
return this.options[optionName];
24-
};
25-
OptionManager.prototype.setOption = function (name = missingParamEr('setOption'), value = missingParamEr('setOption')) {
26-
if (['SELECTEDTABID', 'TABS'].indexOf(name.toUpperCase()) >= 0) return this;
27-
if (Object.prototype.hasOwnProperty.call(this._defaultOptions, name)) this.options[name] = value;
28-
return this;
29-
};
30-
OptionManager.prototype.validatePanelComponent = function (tabData) {
31-
// convert panel element into a function component.
32-
if (
33-
tabData.panelComponent &&
34-
typeof tabData.panelComponent !== 'function' &&
35-
React.isValidElement(tabData.panelComponent)
36-
) {
37-
const PanelElement = tabData.panelComponent;
38-
tabData.panelComponent = function () {
39-
return PanelElement;
40-
};
41-
}
42-
return this;
43-
};
44-
OptionManager.prototype.validateObjectiveTabData = function (tabData) {
45-
if (Object.prototype.toString.call(tabData) !== '[object Object]') throw new Error('tabData must be type of Object');
46-
return this;
47-
};
48-
OptionManager.prototype.validateTabData = function (tabData) {
49-
this.validateObjectiveTabData(tabData).validatePanelComponent(tabData);
50-
tabData = Object.assign(this.setting.getDefaultTabData(), tabData);
51-
tabData.id = tabData.id + ''; //make sure id is string
52-
return tabData;
53-
};
54-
OptionManager.prototype._validateOptions = function (options) {
55-
if (Object.prototype.toString.call(options) !== '[object Object]')
56-
throw 'Invalid argument in "useDynamicTabs" function. Argument must be type of an object';
57-
return this;
58-
};
59-
OptionManager.prototype._setInitialData = function () {
60-
// set this.initialTabs and this.initialState
61-
const {selectedTabID, tabs} = this.options,
62-
openTabIDs = [];
63-
tabs.map((tab) => {
64-
const newTab = this.validateTabData(tab);
65-
this.initialTabs.push(newTab);
66-
openTabIDs.push(newTab.id);
67-
});
68-
this.initialState = {
69-
selectedTabID: selectedTabID + '', //make sure it is type of string
70-
openTabIDs,
71-
};
72-
return this;
73-
};
74-
OptionManager.prototype._setSetting = function () {
75-
this.setting = {
76-
tabClass: 'rc-dyn-tabs-tab',
77-
titleClass: 'rc-dyn-tabs-title',
78-
iconClass: 'rc-dyn-tabs-icon',
79-
selectedClass: 'rc-dyn-tabs-selected',
80-
hoverClass: 'rc-dyn-tabs-hover',
81-
tablistClass: 'rc-dyn-tabs-tablist',
82-
closeClass: 'rc-dyn-tabs-close',
83-
panelClass: 'rc-dyn-tabs-panel',
84-
panellistClass: 'rc-dyn-tabs-panellist',
85-
disableClass: 'rc-dyn-tabs-disable',
86-
ltrClass: 'rc-dyn-tabs-ltr',
87-
rtlClass: 'rc-dyn-tabs-rtl',
88-
verticalClass: 'rc-dyn-tabs-vertical',
89-
panelIdTemplate: (id) => `rc-dyn-tabs-p-${id}`,
90-
ariaLabelledbyIdTemplate: (id) => `rc-dyn-tabs-l-${id}`,
91-
getDefaultTabData: () => {
92-
return {
93-
title: '',
94-
tooltip: '',
95-
panelComponent: this.options.defaultPanelComponent,
96-
closable: true,
97-
iconClass: '',
98-
disable: false,
99-
lazy: false,
100-
id: `tab_${new Date().getTime()}`,
24+
return this.options[optionName];
25+
},
26+
setOption: function (name = missingParamEr('setOption'), value = missingParamEr('setOption')) {
27+
if (['SELECTEDTABID', 'TABS'].indexOf(name.toUpperCase()) >= 0) return this;
28+
if (Object.prototype.hasOwnProperty.call(this._defaultOptions, name)) this.options[name] = value;
29+
return this;
30+
},
31+
validatePanelComponent: function (tabData) {
32+
// convert panel element into a function component.
33+
if (
34+
tabData.panelComponent &&
35+
typeof tabData.panelComponent !== 'function' &&
36+
React.isValidElement(tabData.panelComponent)
37+
) {
38+
const PanelElement = tabData.panelComponent;
39+
tabData.panelComponent = function () {
40+
return PanelElement;
10141
};
102-
},
103-
};
104-
return this;
105-
};
42+
}
43+
return this;
44+
},
45+
validateObjectiveTabData: function (tabData) {
46+
if (Object.prototype.toString.call(tabData) !== '[object Object]')
47+
throw new Error('tabData must be type of Object');
48+
return this;
49+
},
50+
validateTabData: function (tabData) {
51+
this.validateObjectiveTabData(tabData).validatePanelComponent(tabData);
52+
tabData = Object.assign(this.setting.getDefaultTabData(), tabData);
53+
tabData.id = tabData.id + ''; //make sure id is string
54+
return tabData;
55+
},
56+
_validateOptions: function (options) {
57+
if (Object.prototype.toString.call(options) !== '[object Object]')
58+
throw 'Invalid argument in "useDynamicTabs" function. Argument must be type of an object';
59+
return this;
60+
},
61+
_setInitialData: function () {
62+
// set this.initialTabs and this.initialState
63+
const {selectedTabID, tabs} = this.options,
64+
openTabIDs = [];
65+
tabs.map((tab) => {
66+
const newTab = this.validateTabData(tab);
67+
this.initialTabs.push(newTab);
68+
openTabIDs.push(newTab.id);
69+
});
70+
this.initialState = {
71+
selectedTabID: selectedTabID + '', //make sure it is type of string
72+
openTabIDs,
73+
};
74+
return this;
75+
},
76+
_setSetting: function () {
77+
this.setting = {
78+
tabClass: 'rc-dyn-tabs-tab',
79+
titleClass: 'rc-dyn-tabs-title',
80+
iconClass: 'rc-dyn-tabs-icon',
81+
selectedClass: 'rc-dyn-tabs-selected',
82+
hoverClass: 'rc-dyn-tabs-hover',
83+
tablistClass: 'rc-dyn-tabs-tablist',
84+
closeClass: 'rc-dyn-tabs-close',
85+
panelClass: 'rc-dyn-tabs-panel',
86+
panellistClass: 'rc-dyn-tabs-panellist',
87+
disableClass: 'rc-dyn-tabs-disable',
88+
ltrClass: 'rc-dyn-tabs-ltr',
89+
rtlClass: 'rc-dyn-tabs-rtl',
90+
verticalClass: 'rc-dyn-tabs-vertical',
91+
panelIdTemplate: (id) => `rc-dyn-tabs-p-${id}`,
92+
ariaLabelledbyIdTemplate: (id) => `rc-dyn-tabs-l-${id}`,
93+
getDefaultTabData: () => {
94+
return {
95+
title: '',
96+
tooltip: '',
97+
panelComponent: this.options.defaultPanelComponent,
98+
closable: true,
99+
iconClass: '',
100+
disable: false,
101+
lazy: false,
102+
id: `tab_${new Date().getTime()}`,
103+
};
104+
},
105+
};
106+
return this;
107+
},
108+
});
106109
export default OptionManager;

0 commit comments

Comments
 (0)