Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add collapse all/expand all to Listcontrol #912

Merged
merged 9 commits into from
Dec 22, 2017
Merged

Add collapse all/expand all to Listcontrol #912

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4109296
Add collapse/expand.
drlogout Dec 10, 2017
7ec561b
Hide button if collapsed
drlogout Dec 10, 2017
d32d938
Rename property
drlogout Dec 10, 2017
1fe53b7
Update button state.
drlogout Dec 11, 2017
3e86533
Renam collapsed to listCollapsed.
drlogout Dec 12, 2017
b1bb236
Fix handleCollapseToggle.
drlogout Dec 12, 2017
8d9a4c7
add chevron-double icon
erquhart Dec 15, 2017
017b491
Add expandItems & collapsed field.
drlogout Dec 16, 2017
af30171
remove outer list collapse
erquhart Dec 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/components/EditorWidgets/List/List.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,16 @@
align-items: center;
font-size: 14px;
font-weight: 500;
cursor: pointer;
line-height: 1;
}

& .nc-icon {
padding-right: 8px;
.nc-listControl-listCollapseToggleButton{
padding: 4px;
background-color: transparent;
color: inherit;

&:last-of-type {
margin-right: 4px;
}
}

Expand Down
63 changes: 51 additions & 12 deletions src/components/EditorWidgets/List/ListControl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,15 @@ function valueToString(value) {

const SortableListItem = SortableElement(ListItem);

const TopBar = ({ onAdd, listLabel, collapsed, onCollapseToggle, itemsCount }) => (
const TopBar = ({ onAdd, listLabel, listCollapsed, onCollapseToggle, onCollapseAllToggle, allItemsCollapsed, itemsCount }) => (
<div className="nc-listControl-topBar">
<div className="nc-listControl-listCollapseToggle" onClick={onCollapseToggle}>
<Icon type="caret" direction={collapsed ? 'up' : 'down'} size="small"/>
<div className="nc-listControl-listCollapseToggle">
<button className="nc-listControl-listCollapseToggleButton" onClick={onCollapseToggle}>
<Icon type="chevron" direction={listCollapsed ? 'up' : 'down'} size="small" />
</button>
<button className="nc-listControl-listCollapseToggleButton" onClick={onCollapseAllToggle}>
<Icon type="chevron-double" direction={allItemsCollapsed ? 'up' : 'down'} size="small" />
</button>
{itemsCount} {listLabel}
</div>
<button className="nc-listControl-addButton" onClick={onAdd}>
Expand Down Expand Up @@ -67,9 +72,10 @@ export default class ListControl extends Component {
constructor(props) {
super(props);
this.state = {
collapsed: false,
listCollapsed: false,
itemsCollapsed: List(),
value: valueToString(props.value),
allItemsCollapsed: false,
};
this.valueType = null;
}
Expand Down Expand Up @@ -131,7 +137,10 @@ export default class ListControl extends Component {
e.preventDefault();
const { value, onChange } = this.props;
const parsedValue = (this.valueType === valueTypes.SINGLE) ? null : Map();
this.setState({ collapsed: false });
this.setState({
listCollapsed: false,
allItemsCollapsed: false,
});
onChange((value || List()).push(parsedValue));
};

Expand All @@ -156,20 +165,48 @@ export default class ListControl extends Component {

handleRemove = (index, event) => {
event.preventDefault();
const { itemsCollapsed } = this.state;
const { value, metadata, onChange, forID } = this.props;
const parsedMetadata = metadata && { [forID]: metadata.removeIn(value.get(index).valueSeq()) };

this.setState({
itemsCollapsed: itemsCollapsed.delete(index),
});
onChange(value.remove(index), parsedMetadata);
}

handleCollapseToggle = () => {
this.setState({ collapsed: !this.state.collapsed });
this.setState({ listCollapsed: !this.state.listCollapsed });
}

handleItemCollapseToggle = (index, event) => {
event.preventDefault();
const { itemsCollapsed } = this.state;
const { value } = this.props;
let { itemsCollapsed } = this.state;

itemsCollapsed = itemsCollapsed.set(index, !itemsCollapsed.get(index, false));
const allCollapsed = itemsCollapsed.every((collapsed, i) => collapsed);

this.setState({
itemsCollapsed,
allItemsCollapsed: itemsCollapsed.size === value.size && allCollapsed,
});
}

handleCollapseAllToggle = (e) => {
e.preventDefault();
const { allItemsCollapsed } = this.state;
const { value } = this.props;
const itemsCount = value ? value.size : 0;
let { itemsCollapsed } = this.state;

for (let i = 0; i < itemsCount; i++) {
itemsCollapsed = itemsCollapsed.set(i, !allItemsCollapsed);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These last three lines can be replaced with something like

const newItemsCollapsed = Array(itemsCollapsed.length).fill(!allItemsCollapsed);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point! The button updates it's state accordingly now.

But I sticked with the forloop, because I couldn't find a more slick solution. With the loop I can simultaneously create and set the list elements.

Copy link
Contributor

@Benaiah Benaiah Dec 18, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can remain as-is - @erquhart pointed out that replacing this is more involved than I thought and the for-loop is a pretty simple solution here.


this.setState({
itemsCollapsed: itemsCollapsed.set(index, !itemsCollapsed.get(index, false)),
itemsCollapsed,
allItemsCollapsed: !allItemsCollapsed,
});
}

Expand Down Expand Up @@ -236,10 +273,10 @@ export default class ListControl extends Component {

renderListControl() {
const { value, forID, field, classNameWrapper } = this.props;
const { collapsed } = this.state;
const { listCollapsed } = this.state;
const items = value || List();
const className = c(classNameWrapper, 'nc-listControl', {
'nc-listControl-collapsed' : collapsed,
'nc-listControl-collapsed' : listCollapsed,
});

return (
Expand All @@ -248,11 +285,13 @@ export default class ListControl extends Component {
onAdd={this.handleAdd}
listLabel={field.get('label').toLowerCase()}
onCollapseToggle={this.handleCollapseToggle}
collapsed={collapsed}
onCollapseAllToggle={this.handleCollapseAllToggle}
allItemsCollapsed={this.state.allItemsCollapsed}
listCollapsed={listCollapsed}
itemsCount={items.size}
/>
{
collapsed ? null :
listCollapsed ? null :
<SortableList
items={items}
renderItem={this.renderItem}
Expand Down
2 changes: 1 addition & 1 deletion src/components/EditorWidgets/Object/ObjectControl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import EditorControl from 'Editor/EditorControlPane/EditorControl';
const TopBar = ({ collapsed, onCollapseToggle }) =>
<div className="nc-listControl-topBar">
<div className="nc-listControl-listCollapseToggle" onClick={onCollapseToggle}>
<Icon type="caret" direction={collapsed ? 'up' : 'down'} size="small"/>
<Icon type="chevron" direction={collapsed ? 'up' : 'down'} size="small"/>
{itemsCount} {listLabel}
</div>
</div>;
Expand Down
5 changes: 4 additions & 1 deletion src/components/UI/Icon/icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@ const config = {
'arrow': {
direction: 'left',
},
'caret': {
'chevron': {
direction: 'down',
},
'chevron-double': {
direction: 'down',
}
};
Expand Down
6 changes: 4 additions & 2 deletions src/components/UI/Icon/images/_index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import iconAdd from './add.svg';
import iconAddWith from './add-with.svg';
import iconArrow from './arrow.svg';
import iconBold from './bold.svg';
import iconCaret from './caret.svg';
import iconCheck from './check.svg';
import iconChevron from './chevron.svg';
import iconChevronDouble from './chevron-double.svg';
import iconCircle from './circle.svg';
import iconClose from './close.svg';
import iconCode from './code.svg';
Expand Down Expand Up @@ -43,8 +44,9 @@ const images = {
'add-with': iconAddWith,
'arrow': iconArrow,
'bold': iconBold,
'caret': iconCaret,
'check': iconCheck,
'chevron': iconChevron,
'chevron-double': iconChevronDouble,
'circle': iconCircle,
'close': iconClose,
'code': iconCode,
Expand Down
8 changes: 8 additions & 0 deletions src/components/UI/Icon/images/chevron-double.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 src/components/UI/Icon/images/caret.svg → src/components/UI/Icon/images/chevron.svg
View file
Open in desktop
File renamed without changes
2 changes: 1 addition & 1 deletion src/components/UI/ListItemTopBar/ListItemTopBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const ListItemTopBar = ({ collapsed, onCollapseToggle, onRemove, dragHand
{
onCollapseToggle
? <button className="nc-listItemTopBar-toggleButton" onClick={onCollapseToggle}>
<Icon type="caret" size="small" direction={collapsed ? 'up' : 'down'}/>
<Icon type="chevron" size="small" direction={collapsed ? 'up' : 'down'}/>
</button>
: null
}
Expand Down