Allow adding items to be disabled for list widget (#1102)
This commit is contained in:
Sam
Shawn Erquhart
parent
2c697b08d9
commit
a2d4267500
@ -806,6 +806,15 @@
|
||||
"contributions": [
|
||||
"design"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "gazebosx3",
|
||||
"name": "Sam",
|
||||
"avatar_url": "https://avatars3.githubusercontent.com/u/27162255?v=4",
|
||||
"profile": "https://github.com/gazebosx3",
|
||||
"contributions": [
|
||||
"code"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# Netlify CMS
|
||||
[](#contributors)
|
||||
[](#contributors)
|
||||
[](https://www.codetriage.com/netlify/netlify-cms)
|
||||
[](https://gitter.im/netlify/netlifycms)
|
||||
|
||||
@ -63,7 +63,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
|
||||
| [<img src="https://avatars1.githubusercontent.com/u/3818?v=4" width="100px;"/><br /><sub><b>Edward Betts</b></sub>](http://edwardbetts.com/)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=EdwardBetts "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/8771435?v=4" width="100px;"/><br /><sub><b>Josh Hardman</b></sub>](https://github.com/jhardman0830)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=jhardman0830 "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/11616378?v=4" width="100px;"/><br /><sub><b>Mantas</b></sub>](https://behance.net/mistermantas)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=mistermantas "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/5244986?v=4" width="100px;"/><br /><sub><b>Marco Biedermann</b></sub>](https://www.marcobiedermann.com)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=marcobiedermann "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/7525670?v=4" width="100px;"/><br /><sub><b>Max Stoiber</b></sub>](https://mxstbr.blog/newsletter)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=mxstbr "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/89368?v=4" width="100px;"/><br /><sub><b>Vyacheslav Matyukhin</b></sub>](http://berekuk.ru)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=berekuk "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/9059048?v=4" width="100px;"/><br /><sub><b>jimmaaay</b></sub>](https://jimmythompson.me)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=jimmaaay "Code") |
|
||||
| [<img src="https://avatars3.githubusercontent.com/u/802086?v=4" width="100px;"/><br /><sub><b>Luís Miguel</b></sub>](https://github.com/Quicksaver)<br />[🐛](https://github.com/netlify/netlify-cms/issues?q=author%3AQuicksaver "Bug reports") [💻](https://github.com/netlify/netlify-cms/commits?author=Quicksaver "Code") | [<img src="https://avatars2.githubusercontent.com/u/357379?v=4" width="100px;"/><br /><sub><b>Chris Swithinbank</b></sub>](http://chrisswithinbank.net/)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=delucis "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/1262221?v=4" width="100px;"/><br /><sub><b>remmah</b></sub>](https://github.com/remmah)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=remmah "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/29388?v=4" width="100px;"/><br /><sub><b>Sumeet Jain</b></sub>](http://sumeetjain.com)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=sumeetjain "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/26816046?v=4" width="100px;"/><br /><sub><b>Sagar Khatri</b></sub>](https://github.com/ragasirtahk)<br />[📖](https://github.com/netlify/netlify-cms/commits?author=ragasirtahk "Documentation") [💡](#example-ragasirtahk "Examples") | [<img src="https://avatars0.githubusercontent.com/u/8182932?v=4" width="100px;"/><br /><sub><b>Kevin Doocey</b></sub>](https://www.dooceykev.in)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=Doocey "Code") | [<img src="https://avatars0.githubusercontent.com/u/31023010?v=4" width="100px;"/><br /><sub><b>Swieckowski</b></sub>](https://www.linkedin.com/in/arthur-swieckowski/)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=Swieckowski "Code") [📖](https://github.com/netlify/netlify-cms/commits?author=Swieckowski "Documentation") [⚠️](https://github.com/netlify/netlify-cms/commits?author=Swieckowski "Tests") |
|
||||
| [<img src="https://avatars2.githubusercontent.com/u/283419?v=4" width="100px;"/><br /><sub><b>Tim Carry</b></sub>](http://www.pixelastic.com/)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=pixelastic "Code") [🎨](#design-pixelastic "Design") [📖](https://github.com/netlify/netlify-cms/commits?author=pixelastic "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/30510616?v=4" width="100px;"/><br /><sub><b>Sol Park</b></sub>](https://github.com/solpark)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=solpark "Code") | [<img src="https://avatars0.githubusercontent.com/u/29218846?v=4" width="100px;"/><br /><sub><b>Michael Romani</b></sub>](https://github.com/michaelromani)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=michaelromani "Code") | [<img src="https://avatars1.githubusercontent.com/u/15175868?v=4" width="100px;"/><br /><sub><b>Xifeng Jin</b></sub>](http://linkedin/in/xifengjin88)<br />[🐛](https://github.com/netlify/netlify-cms/issues?q=author%3Axifengjin88 "Bug reports") [💻](https://github.com/netlify/netlify-cms/commits?author=xifengjin88 "Code") | [<img src="https://avatars1.githubusercontent.com/u/372831?v=4" width="100px;"/><br /><sub><b>Pedro Duarte</b></sub>](http://pedroduarte.me)<br />[🐛](https://github.com/netlify/netlify-cms/issues?q=author%3Apeduarte "Bug reports") [💻](https://github.com/netlify/netlify-cms/commits?author=peduarte "Code") [📖](https://github.com/netlify/netlify-cms/commits?author=peduarte "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/6064830?v=4" width="100px;"/><br /><sub><b>Antonio Argote</b></sub>](http://antonioargote.com)<br />[🎨](#design-Strangehill "Design") | [<img src="https://avatars3.githubusercontent.com/u/1479451?v=4" width="100px;"/><br /><sub><b>Kristaps Taube</b></sub>](https://www.ktaube.com)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=ktaube "Code") |
|
||||
| [<img src="https://avatars3.githubusercontent.com/u/26639499?v=4" width="100px;"/><br /><sub><b>David Ko</b></sub>](https://github.com/daveyko)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=daveyko "Code") | [<img src="https://avatars3.githubusercontent.com/u/440562?v=4" width="100px;"/><br /><sub><b>Iñaki García</b></sub>](http://www.txorua.com)<br />[🎨](#design-igarbla "Design") |
|
||||
| [<img src="https://avatars3.githubusercontent.com/u/26639499?v=4" width="100px;"/><br /><sub><b>David Ko</b></sub>](https://github.com/daveyko)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=daveyko "Code") | [<img src="https://avatars3.githubusercontent.com/u/440562?v=4" width="100px;"/><br /><sub><b>Iñaki García</b></sub>](http://www.txorua.com)<br />[🎨](#design-igarbla "Design") | [<img src="https://avatars3.githubusercontent.com/u/27162255?v=4" width="100px;"/><br /><sub><b>Sam</b></sub>](https://github.com/gazebosx3)<br />[💻](https://github.com/netlify/netlify-cms/commits?author=gazebosx3 "Code") |
|
||||
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
||||
|
||||
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
|
||||
|
||||
18779
package-lock.json
generated
Normal file
18779
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -23,7 +23,7 @@ function valueToString(value) {
|
||||
|
||||
const SortableListItem = SortableElement(ListItem);
|
||||
|
||||
const TopBar = ({ onAdd, listLabel, onCollapseAllToggle, allItemsCollapsed, itemsCount }) => (
|
||||
const TopBar = ({ allowAdd, onAdd, listLabel, onCollapseAllToggle, allItemsCollapsed, itemsCount }) => (
|
||||
<div className="nc-listControl-topBar">
|
||||
<div className="nc-listControl-listCollapseToggle">
|
||||
<button className="nc-listControl-listCollapseToggleButton" onClick={onCollapseAllToggle}>
|
||||
@ -31,9 +31,15 @@ const TopBar = ({ onAdd, listLabel, onCollapseAllToggle, allItemsCollapsed, item
|
||||
</button>
|
||||
{itemsCount} {listLabel}
|
||||
</div>
|
||||
|
||||
{
|
||||
allowAdd ?
|
||||
<button className="nc-listControl-addButton" onClick={onAdd}>
|
||||
Add {listLabel} <Icon type="add" size="xsmall" />
|
||||
</button>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -133,7 +139,7 @@ export default class ListControl extends Component {
|
||||
const listValue = e.target.value.split(',').map(el => el.trim()).filter(el => el);
|
||||
this.setState({ value: valueToString(listValue) });
|
||||
this.props.setInactiveStyle();
|
||||
};
|
||||
}
|
||||
|
||||
handleAdd = (e) => {
|
||||
e.preventDefault();
|
||||
@ -141,7 +147,7 @@ export default class ListControl extends Component {
|
||||
const parsedValue = (this.valueType === valueTypes.SINGLE) ? null : Map();
|
||||
this.setState({ itemsCollapsed: this.state.itemsCollapsed.push(false) });
|
||||
onChange((value || List()).push(parsedValue));
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* In case the `onChangeObject` function is frozen by a child widget implementation,
|
||||
@ -171,14 +177,14 @@ export default class ListControl extends Component {
|
||||
this.setState({ itemsCollapsed: itemsCollapsed.delete(index) });
|
||||
|
||||
onChange(value.remove(index), parsedMetadata);
|
||||
}
|
||||
};
|
||||
|
||||
handleItemCollapseToggle = (index, event) => {
|
||||
event.preventDefault();
|
||||
const { itemsCollapsed } = this.state;
|
||||
const collapsed = itemsCollapsed.get(index);
|
||||
this.setState({ itemsCollapsed: itemsCollapsed.set(index, !collapsed) });
|
||||
}
|
||||
};
|
||||
|
||||
handleCollapseAllToggle = (e) => {
|
||||
e.preventDefault();
|
||||
@ -186,7 +192,7 @@ export default class ListControl extends Component {
|
||||
const { itemsCollapsed } = this.state;
|
||||
const allItemsCollapsed = itemsCollapsed.every(val => val === true);
|
||||
this.setState({ itemsCollapsed: List(Array(value.size).fill(!allItemsCollapsed)) });
|
||||
}
|
||||
};
|
||||
|
||||
objectLabel(item) {
|
||||
const { field } = this.props;
|
||||
@ -259,6 +265,7 @@ export default class ListControl extends Component {
|
||||
return (
|
||||
<div id={forID} className={c(classNameWrapper, 'nc-listControl')}>
|
||||
<TopBar
|
||||
allowAdd={field.get('allow_add', true)}
|
||||
onAdd={this.handleAdd}
|
||||
listLabel={label.toLowerCase()}
|
||||
onCollapseAllToggle={this.handleCollapseAllToggle}
|
||||
|
||||
@ -13,6 +13,7 @@ The list widget allows you to create a repeatable item in the UI which saves as
|
||||
- **Data type:** list of widget values
|
||||
- **Options:**
|
||||
- `default`: if `fields` is specified, declare defaults on the child widgets; if not, you may specify a list of strings to populate the text field
|
||||
- `allow_add`: if added and labeled `false`, button to add additional widgets disapears
|
||||
- `field`: a single widget field to be repeated
|
||||
- `fields`: a nested list of multiple widget fields to be included in each repeatable iteration
|
||||
- **Example** (`field`/`fields` not specified):
|
||||
@ -24,6 +25,16 @@ The list widget allows you to create a repeatable item in the UI which saves as
|
||||
default: ["news"]
|
||||
```
|
||||
|
||||
- **Example** (`allow_add` marked `false`):
|
||||
|
||||
```yaml
|
||||
- label: "Tags"
|
||||
name: "tags"
|
||||
widget: "list"
|
||||
allow_add: false
|
||||
default: ["news"]
|
||||
```
|
||||
|
||||
- **Example** (with `field`):
|
||||
|
||||
```yaml
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user