Skip to content

Commit 76485b4

Browse files
Bogdan-LyashenkoBogdan-Lyashenko
committed
Add close buttons
1 parent cec89ca commit 76485b4

13 files changed

Lines changed: 811 additions & 152 deletions

File tree

‎src/public/dist/bundle.js‎

Lines changed: 647 additions & 97 deletions
Large diffs are not rendered by default.

‎src/public/dist/bundle.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/public/js/components/controls/ViewSwitches/ViewSwitchesContainer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
33
import { toggleSwitch } from './store/actions';
44

55
const mapStateToProps = state => {
6-
const { defaultChecked, switches, checkedState } = state.viewSwitches;
7-
return { defaultChecked, switches, checkedState };
6+
const { switches, checkedState } = state.viewSwitches;
7+
return { switches, checkedState };
88
};
99

1010
const mapDispatchToProps = {

‎src/public/js/components/controls/ViewSwitches/component/ViewSwitchList.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,7 @@
3030
.ViewSwitchList-small-item {
3131
margin-right: 10px;
3232
}
33+
34+
.ViewSwitchList-small-item .anticon {
35+
padding: 2px 8px 0 0px;
36+
}

‎src/public/js/components/controls/ViewSwitches/component/ViewsSwitchList.js‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import React from 'react';
2-
import { Switch, Checkbox, Icon } from 'antd';
2+
import { Switch, Checkbox, Button } from 'antd';
33
import './ViewSwitchList.css';
4+
import { VIEW_TYPES } from '../store/constants';
45

5-
const ViewsSwitchList = ({
6-
switches,
7-
toggleSwitch,
8-
defaultChecked,
9-
checkedState
10-
}) => {
6+
const ViewsSwitchList = ({ switches, toggleSwitch, checkedState }) => {
117
return (
128
<div className="ViewSwitchList-container">
139
{switches.map((item, i) => (
@@ -16,7 +12,7 @@ const ViewsSwitchList = ({
1612
<span>{item.name + ' '}</span>
1713
<Switch
1814
size="small"
19-
defaultChecked={item.key === defaultChecked}
15+
checked={checkedState[item.key]}
2016
onChange={checked =>
2117
toggleSwitch(item.key, checked)
2218
}
@@ -31,18 +27,33 @@ const ViewsSwitchList = ({
3127
key={item.key}
3228
className="ViewSwitchList-small-item"
3329
>
34-
<Checkbox
35-
onChange={e =>
36-
toggleSwitch(
37-
item.key,
38-
e.target.checked
39-
)
40-
}
41-
>
42-
<span title={item.title || ''}>
43-
{item.name}
44-
</span>
45-
</Checkbox>
30+
{item.type === VIEW_TYPES.BUTTON ? (
31+
<Button
32+
title={item.title}
33+
size={'small'}
34+
onClick={() =>
35+
toggleSwitch(item.key, true)
36+
}
37+
>
38+
<span title={item.title}>
39+
{item.name}{' '}
40+
</span>
41+
</Button>
42+
) : (
43+
<Checkbox
44+
checked={checkedState[item.key]}
45+
onChange={e =>
46+
toggleSwitch(
47+
item.key,
48+
e.target.checked
49+
)
50+
}
51+
>
52+
<span title={item.title}>
53+
{item.name}
54+
</span>
55+
</Checkbox>
56+
)}
4657
</div>
4758
))}
4859
</div>

‎src/public/js/components/controls/ViewSwitches/store/constants.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,14 @@ export const ACTIONS = {
44

55
export const SWITCH_KEYS = {
66
SOURCE: 'source',
7+
SOURCE_COLLAPSE_TO_MIN: 'sourceCollapseToMin',
8+
SOURCE_EXPAND_ALL: 'sourceExpandAll',
79
DEPENDENCIES: 'dependencies',
810
CODE_CRUMBS: 'codeCrumbs',
911
CODE_CRUMBS_MINIMIZE: 'codeCrumbsMinimize',
10-
CODE_CRUMBS_DETAILS: 'codeCrumbsDetails',
12+
CODE_CRUMBS_DETAILS: 'codeCrumbsDetails'
13+
};
14+
15+
export const VIEW_TYPES = {
16+
BUTTON: 'icon'
1117
};

‎src/public/js/components/controls/ViewSwitches/store/reducer.js‎

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
1-
import { ACTIONS, SWITCH_KEYS } from './constants';
1+
import { ACTIONS, SWITCH_KEYS, VIEW_TYPES } from './constants';
22

33
const DefaultState = {
4-
defaultChecked: SWITCH_KEYS.SOURCE,
54
switches: [
6-
{ name: 'Source', key: SWITCH_KEYS.SOURCE, checkBoxes: [] },
5+
{
6+
name: 'Source',
7+
key: SWITCH_KEYS.SOURCE,
8+
checkBoxes: [
9+
{
10+
name: 'C',
11+
title: 'Collapse to 2nd Level',
12+
key: SWITCH_KEYS.SOURCE_COLLAPSE_TO_MIN,
13+
type: VIEW_TYPES.BUTTON
14+
},
15+
{
16+
name: 'E',
17+
title: 'Expand all',
18+
key: SWITCH_KEYS.SOURCE_EXPAND_ALL,
19+
type: VIEW_TYPES.BUTTON
20+
}
21+
]
22+
},
723
{ name: 'Dependencies', key: SWITCH_KEYS.DEPENDENCIES, checkBoxes: [] },
824
{
925
name: 'CodeCrumbs',
@@ -23,11 +39,7 @@ const DefaultState = {
2339
}
2440
],
2541
checkedState: {
26-
[SWITCH_KEYS.SOURCE]: true,
27-
[SWITCH_KEYS.DEPENDENCIES]: false,
28-
[SWITCH_KEYS.CODE_CRUMBS]: false,
29-
[SWITCH_KEYS.CODE_CRUMBS_MINIMIZE]: false,
30-
[SWITCH_KEYS.CODE_CRUMBS_DETAILS]: false
42+
[SWITCH_KEYS.SOURCE]: true
3143
}
3244
};
3345

@@ -36,12 +48,22 @@ export default (state = DefaultState, action) => {
3648
case ACTIONS.TOGGLE_SWITCH:
3749
const { switchKey, checked } = action.payload;
3850

51+
const checkedState = {
52+
...state.checkedState,
53+
[switchKey]: checked
54+
};
55+
56+
if (switchKey === SWITCH_KEYS.SOURCE_COLLAPSE_TO_MIN && checked) {
57+
checkedState[SWITCH_KEYS.SOURCE_EXPAND_ALL] = false;
58+
}
59+
60+
if (switchKey === SWITCH_KEYS.SOURCE_EXPAND_ALL && checked) {
61+
checkedState[SWITCH_KEYS.SOURCE_COLLAPSE_TO_MIN] = false;
62+
}
63+
3964
return {
4065
...state,
41-
checkedState: {
42-
...state.checkedState,
43-
[switchKey]: checked
44-
}
66+
checkedState
4567
};
4668
break;
4769

‎src/public/js/components/data-bus/store/actions.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,14 @@ export const toggleFolder = folderNode => ({
3232
payload: folderNode
3333
});
3434

35+
export const openAllFolders = () => ({
36+
type: ACTIONS.OPEN_ALL_FOLDERS
37+
});
38+
39+
export const closeAllFolders = () => ({
40+
type: ACTIONS.CLOSE_ALL_FOLDERS
41+
});
42+
3543
export const selectCodeCrumb = (fileNode, codeCrumb) => ({
3644
type: ACTIONS.SELECT_CODE_CRUMB,
3745
payload: { fileNode, codeCrumb }

‎src/public/js/components/data-bus/store/constants.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1+
import { SWITCH_KEYS } from '../../controls/ViewSwitches/store/constants';
2+
13
export const ACTIONS = {
24
SET_INITIAL_SOURCE_DATA: 'DATA_BUS.SET_INITIAL_SOURCE_DATA',
35
UPDATE_FILES_TREE_LAYOUT_NODES: 'DATA_BUS.UPDATE_FILES_TREE_LAYOUT_NODES',
46
SELECT_FILE: 'DATA_BUS.SELECT_FILE',
57
TOGGLE_FOLDER: 'DATA_BUS.TOGGLE_FOLDER',
8+
OPEN_ALL_FOLDERS: 'DATA_BUS.OPEN_ALL_FOLDERS',
9+
CLOSE_ALL_FOLDERS: 'DATA_BUS.CLOSE_ALL_FOLDERS',
610
SELECT_CODE_CRUMB: 'DATA_BUS.SELECT_CODE_CRUMB'
711
};

‎src/public/js/components/data-bus/store/reducer.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { DIR_NODE_TYPE } from '../../../../../shared/constants';
12
import { ACTIONS } from './constants';
23

34
const DefaultState = {
@@ -45,6 +46,26 @@ export default (state = DefaultState, action) => {
4546
};
4647
break;
4748

49+
case ACTIONS.OPEN_ALL_FOLDERS:
50+
return {
51+
...state,
52+
closedFolders: {}
53+
};
54+
55+
case ACTIONS.CLOSE_ALL_FOLDERS:
56+
if (!state.filesTree) return state;
57+
const rootFolderChildren = state.filesTree.children.filter(
58+
item => item.type === DIR_NODE_TYPE
59+
);
60+
61+
return {
62+
...state,
63+
closedFolders: rootFolderChildren.reduce((res, folder) => {
64+
res[folder.path] = folder;
65+
return res;
66+
}, {})
67+
};
68+
4869
case ACTIONS.SELECT_CODE_CRUMB:
4970
const { fileNode, codeCrumb } = action.payload;
5071
return {

0 commit comments

Comments
 (0)