gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

migrate object and list widgets

Browse Source
This commit is contained in:
Shawn Erquhart 2018-07-24 17:13:48 -04:00
parent 2efd09ba94
commit 3f47fe6dbf
29 changed files with 289 additions and 422 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/netlify-cms-core/scripts/load-extensions.js
View File

@ -8,13 +8,13 @@ import { DateControl, DatePreview } from 'netlify-cms-widget-date';
import { DateTimeControl, DateTimePreview } from 'netlify-cms-widget-datetime';
import { FileControl, FilePreview } from 'netlify-cms-widget-file';
import { ImageControl, ImagePreview } from 'netlify-cms-widget-image';
import { ListControl, ListPreview } from 'netlify-cms-widget-list';
import { ObjectControl, ObjectPreview } from 'netlify-cms-widget-object';
import { StringControl, StringPreview } from 'netlify-cms-widget-string';
// import { NumberControl, NumberPreview } from 'netlify-cms-widget-number';
// import { TextControl, TextPreview } from 'netlify-cms-widget-text';
// import { SelectControl, SelectPreview } from 'netlify-cms-widget-select';
// import { MarkdownControl, MarkdownPreview } from 'netlify-cms-widget-markdown';
// import { ListControl, ListPreview } from 'netlify-cms-widget-list';
// import { ObjectControl, ObjectPreview } from 'netlify-cms-widget-object';
// import { RelationControl, RelationPreview } from 'netlify-cms-widget-relation';
import image from 'netlify-cms-editor-component-image';
@ -27,12 +27,12 @@ registerWidget('date', DateControl, DatePreview);
registerWidget('datetime', DateTimeControl, DateTimePreview);
registerWidget('file', FileControl, FilePreview);
registerWidget('image', ImageControl, ImagePreview);
registerWidget('list', ListControl, ListPreview);
registerWidget('object', ObjectControl, ObjectPreview);
registerWidget('string', StringControl, StringPreview);
// registerWidget('text', TextControl, TextPreview);
// registerWidget('number', NumberControl, NumberPreview);
// registerWidget('list', ListControl, ListPreview);
// registerWidget('markdown', MarkdownControl, MarkdownPreview);
// registerWidget('select', SelectControl, SelectPreview);
// registerWidget('object', ObjectControl, ObjectPreview);
// registerWidget('relation', RelationControl, RelationPreview);
registerEditorComponent(image);

1
packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
View File

@ -172,6 +172,7 @@ export default class EditorControl extends React.Component {
hasActiveStyle={this.state.styleActive}
setActiveStyle={() => this.setState({ styleActive: true })}
setInactiveStyle={() => this.setState({ styleActive: false })}
resolveWidget={resolveWidget}
ref={processControlRef && partial(processControlRef, fieldName)}
editorControl={EditorControl}
/>

5
packages/netlify-cms-core/src/components/Editor/EditorControlPane/Widget.js
View File

@ -39,6 +39,7 @@ export default class Widget extends Component {
onAddAsset: PropTypes.func.isRequired,
onRemoveInsertedMedia: PropTypes.func.isRequired,
getAsset: PropTypes.func.isRequired,
resolveWidget: PropTypes.func.isRequired,
};
shouldComponentUpdate(nextProps) {
@ -189,7 +190,8 @@ export default class Widget extends Component {
setInactiveStyle,
hasActiveStyle,
editorControl,
uniqueFieldId
uniqueFieldId,
resolveWidget,
} = this.props;
return React.createElement(controlComponent, {
field,
@ -213,6 +215,7 @@ export default class Widget extends Component {
setInactiveStyle,
hasActiveStyle,
editorControl,
resolveWidget,
});
}
}

7
packages/netlify-cms-core/src/components/EditorWidgets/File/FileControl.css
View File

@ -1,7 +0,0 @@
.nc-fileControl-input {
display: none !important;
}
.nc-fileControl-imageUpload {
cursor: pointer;
}

5
packages/netlify-cms-core/src/components/EditorWidgets/File/FileControl.js
View File

@ -1,5 +0,0 @@
import withMediaControl from 'EditorWidgets/withMedia/withMediaControl';
const FileControl = withMediaControl();
export default FileControl;

15
packages/netlify-cms-core/src/components/EditorWidgets/File/FilePreview.js
View File

@ -1,15 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
export default function FilePreview({ value, getAsset }) {
return (<div className="nc-widgetPreview">
{ value ?
<a href={getAsset(value)}>{ value }</a>
: null}
</div>);
}
FilePreview.propTypes = {
getAsset: PropTypes.func.isRequired,
value: PropTypes.node,
};

4
packages/netlify-cms-core/src/components/EditorWidgets/Image/Image.css
View File

@ -1,4 +0,0 @@
.nc-imagePreview-image {
max-width: 100%;
height: auto;
}

5
packages/netlify-cms-core/src/components/EditorWidgets/Image/ImageControl.js
View File

@ -1,5 +0,0 @@
import withMediaControl from 'EditorWidgets/withMedia/withMediaControl';
const ImageControl = withMediaControl(true);
export default ImageControl;

19
packages/netlify-cms-core/src/components/EditorWidgets/Image/ImagePreview.js
View File

@ -1,19 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
export default function ImagePreview({ value, getAsset }) {
return (<div className='nc-widgetPreview'>
{ value ?
<img
src={getAsset(value)}
className='nc-imageWidget-image'
role="presentation"
/>
: null}
</div>);
}
ImagePreview.propTypes = {
getAsset: PropTypes.func.isRequired,
value: PropTypes.node,
};

88
packages/netlify-cms-core/src/components/EditorWidgets/List/List.css
View File

@ -1,88 +0,0 @@
.nc-listControl {
padding: 0 14px 14px;
&.nc-listControl-collapsed {
padding-bottom: 0;
}
}
.list-item-dragging {
opacity: 0.5;
}
.nc-listControl-topBar {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 -14px;
background-color: var(--textFieldBorderColor);
padding: 13px;
}
.nc-listControl-addButton {
display: flex;
justify-content: center;
align-items: center;
padding: 2px 12px;
font-size: 12px;
font-weight: bold;
border-radius: 3px;
& .nc-icon {
padding-left: 6px;
}
}
.nc-listControl-listCollapseToggle {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
line-height: 1;
}
.nc-listControl-listCollapseToggleButton{
padding: 4px;
background-color: transparent;
color: inherit;
&:last-of-type {
margin-right: 4px;
}
}
.nc-listControl-item {
margin-top: 18px;
&:first-of-type {
margin-top: 26px;
}
}
.nc-listControl-itemTopBar {
background-color: var(--textFieldBorderColor);
}
.nc-listControl-objectLabel {
display: none;
border-top: 0;
background-color: var(--textFieldBorderColor);
padding: 13px;
border-radius: 0 0 var(--borderRadius) var(--borderRadius);
}
.nc-listControl-objectControl {
padding: 6px 14px 14px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.nc-listControl-collapsed {
& .nc-listControl-objectLabel {
display: block;
}
& .nc-listControl-objectControl {
display: none;
}
}

11
packages/netlify-cms-core/src/components/EditorWidgets/List/ListPreview.js
View File

@ -1,11 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import ObjectPreview from 'EditorWidgets/Object/ObjectPreview';
const ListPreview = ObjectPreview;
ListPreview.propTypes = {
field: PropTypes.node,
};
export default ListPreview;

12
packages/netlify-cms-core/src/components/EditorWidgets/Object/Object.css
View File

@ -1,12 +0,0 @@
.nc-objectControl-root {
padding: 0 14px 14px;
}
.nc-objectControl-topBar {
align-items: center;
background-color: #dfdfe3;
display: flex;
justify-content: space-between;
margin: 0 -14px;
padding: 13px;
}

12
packages/netlify-cms-core/src/components/EditorWidgets/Object/ObjectPreview.js
View File

@ -1,12 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
const ObjectPreview = ({ field }) => (
<div className="nc-widgetPreview">{(field && field.get('fields')) || null}</div>
);
ObjectPreview.propTypes = {
field: PropTypes.node,
};
export default ObjectPreview;

6
packages/netlify-cms-core/src/components/EditorWidgets/index.js
View File

@ -9,18 +9,12 @@ import SelectControl from './Select/SelectControl';
import SelectPreview from './Select/SelectPreview';
import MarkdownControl from './Markdown/MarkdownControl';
import MarkdownPreview from './Markdown/MarkdownPreview';
import ListControl from './List/ListControl';
import ListPreview from './List/ListPreview';
import ObjectControl from './Object/ObjectControl';
import ObjectPreview from './Object/ObjectPreview';
import RelationControl from './Relation/RelationControl';
import RelationPreview from './Relation/RelationPreview';
registerWidget('text', TextControl, TextPreview);
registerWidget('number', NumberControl, NumberPreview);
registerWidget('list', ListControl, ListPreview);
registerWidget('markdown', MarkdownControl, MarkdownPreview);
registerWidget('select', SelectControl, SelectPreview);
registerWidget('object', ObjectControl, ObjectPreview);
registerWidget('relation', RelationControl, RelationPreview);
registerWidget('unknown', UnknownControl, UnknownPreview);

34
packages/netlify-cms-core/src/components/EditorWidgets/withMedia/withMedia.css
View File

@ -1,34 +0,0 @@
.nc-imageControl-content {
display: flex;
}
.nc-imageControl-imageWrapper {
width: 155px;
height: 100px;
margin-right: 20px;
& img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--borderRadius);
}
}
.nc-imageControl-filename {
display: block;
font-size: 16px;
margin-bottom: 20px;
}
.nc-imageControl-chooseButton,
.nc-imageControl-changeButton {
@apply(--textBadge);
display: block;
}
.nc-imageControl-removeButton {
@apply(--textBadgeDanger);
display: block;
margin-top: 12px;
}

120
packages/netlify-cms-core/src/components/EditorWidgets/withMedia/withMediaControl.js
View File

@ -1,120 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from "react-immutable-proptypes";
import uuid from 'uuid/v4';
import { truncateMiddle } from 'Lib/textHelper';
const MAX_DISPLAY_LENGTH = 50;
export default function withMediaControl(forImage) {
return class extends React.Component {
static propTypes = {
field: PropTypes.object.isRequired,
getAsset: PropTypes.func.isRequired,
mediaPaths: ImmutablePropTypes.map.isRequired,
onAddAsset: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
onRemoveInsertedMedia: PropTypes.func.isRequired,
onOpenMediaLibrary: PropTypes.func.isRequired,
classNameWrapper: PropTypes.string.isRequired,
value: PropTypes.node,
};
static defaultProps = {
value: '',
};
constructor(props) {
super(props);
this.controlID = uuid();
}
shouldComponentUpdate(nextProps) {
/**
* Always update if the value changes.
*/
if (this.props.value !== nextProps.value) {
return true;
}
/**
* If there is a media path for this control in the state object, and that
* path is different than the value in `nextProps`, update.
*/
const mediaPath = nextProps.mediaPaths.get(this.controlID);
if (mediaPath && (nextProps.value !== mediaPath)) {
return true;
}
return false;
}
componentWillReceiveProps(nextProps) {
const { mediaPaths, value, onRemoveInsertedMedia, onChange } = nextProps;
const mediaPath = mediaPaths.get(this.controlID);
if (mediaPath && mediaPath !== value) {
onChange(mediaPath);
} else if (mediaPath && mediaPath === value) {
onRemoveInsertedMedia(this.controlID);
}
}
handleChange = e => {
const { field, onOpenMediaLibrary} = this.props;
e.preventDefault();
return onOpenMediaLibrary({
controlID: this.controlID,
forImage,
privateUpload: field.get('private'),
});
};
handleRemove = e => {
e.preventDefault();
return this.props.onChange('');
};
renderFileName = () => {
const { value, classNameWrapper } = this.props;
return value ? truncateMiddle(value, MAX_DISPLAY_LENGTH) : null;
};
render() {
const { value, getAsset, onRemoveAsset, classNameWrapper } = this.props;
const fileName = this.renderFileName();
const subject = forImage ? 'image' : 'file';
const article = forImage ? 'an' : 'a';
return (
<div className={`${classNameWrapper} nc-imageControl-imageUpload`}>
<span className="nc-imageControl-message">
{
fileName
? <div className="nc-imageControl-content">
{
forImage
? <div className="nc-imageControl-imageWrapper">
<img src={getAsset(value)}/>
</div>
: null
}
<div>
<span className="nc-imageControl-filename">{fileName}</span>
<button className="nc-imageControl-changeButton" onClick={this.handleChange}>
Choose different {subject}
</button>
<button className="nc-imageControl-removeButton" onClick={this.handleRemove}>
Remove {subject}
</button>
</div>
</div>
: <button className="nc-imageControl-chooseButton" onClick={this.handleChange}>
Choose {article} {subject}
</button>
}
</span>
</div>
);
}
};
};

17
packages/netlify-cms-ui-default/src/ListItemTopBar.js
View File

@ -1,9 +1,18 @@
import React from 'react';
import styled from 'react-emotion';
import Icon from './Icon';
import { colors, lengths } from './styles';
import { colors, lengths, buttons } from './styles';
const TopBar = styled.div`
display: flex;
justify-content: space-between;
height: 26px;
border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
position: relative;
`
const TopBarButton = styled.button`
${buttons.button};
color: ${colors.controlLabel};
background: transparent;
font-size: 16px;
@ -24,8 +33,8 @@ const DragIcon = styled(TopBarButtonSpan)`
cursor: move;
`
const ListItemTopBar = ({ collapsed, onCollapseToggle, onRemove, dragHandleHOC }) => (
<div>
const ListItemTopBar = ({ className, collapsed, onCollapseToggle, onRemove, dragHandleHOC }) => (
<TopBar className={className}>
{
onCollapseToggle
? <TopBarButton onClick={onCollapseToggle}>
@ -47,7 +56,7 @@ const ListItemTopBar = ({ collapsed, onCollapseToggle, onRemove, dragHandleHOC }
</TopBarButton>
: null
}
</div>
</TopBar>
);
const StyledListItemTopBar = styled(ListItemTopBar)`

67
packages/netlify-cms-ui-default/src/ObjectWidgetTopBar.js Normal file
View File

@ -0,0 +1,67 @@
import React from 'react';
import styled, { css }from 'react-emotion';
import Icon from './Icon';
import { colors, buttons } from './styles';
const TopBarContainer = styled.div`
align-items: center;
background-color: ${colors.textFieldBorder};
display: flex;
justify-content: space-between;
margin: 0 -14px;
padding: 13px;
`
const ExpandButtonContainer = styled.div`
${props => props.hasHeading && css`
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
line-height: 1;
`}
`
const ExpandButton = styled.button`
${buttons.button};
padding: 4px;
background-color: transparent;
color: inherit;
&:last-of-type {
margin-right: 4px;
}
`
const AddButton = styled.button`
${buttons.button};
display: flex;
justify-content: center;
align-items: center;
padding: 2px 12px;
font-size: 12px;
font-weight: bold;
border-radius: 3px;
${Icon} {
margin-left: 6px;
}
`
const ObjectWidgetTopBar = ({ allowAdd, onAdd, onCollapseToggle, collapsed, heading = null, label }) => (
<TopBarContainer>
<ExpandButtonContainer hasHeading={!!heading}>
<ExpandButton onClick={onCollapseToggle}>
<Icon type="chevron" direction={collapsed ? 'right' : 'down'} size="small" />
</ExpandButton>
{heading}
</ExpandButtonContainer>
{!allowAdd ? null :
<AddButton onClick={onAdd}>
Add {label} <Icon type="add" size="xsmall" />
</AddButton>
}
</TopBarContainer>
);
export default ObjectWidgetTopBar;

1
packages/netlify-cms-ui-default/src/index.js
View File

@ -5,6 +5,7 @@ export Loader from './Loader';
export Toggle, { ToggleContainer, ToggleBackground, ToggleHandle } from './Toggle';
export AuthenticationPage from './AuthenticationPage';
export WidgetPreviewContainer from './WidgetPreviewContainer';
export ObjectWidgetTopBar from './ObjectWidgetTopBar';
export {
fonts,
colorsRaw,

3
packages/netlify-cms-ui-default/src/styles.js
View File

@ -253,6 +253,9 @@ const components = {
font-size: 14px;
margin-top: 8px;
`,
objectWidgetTopBarContainer: css`
padding: 0 14px 14px;
`,
}
injectGlobal`

39
packages/netlify-cms-widget-list/package.json Normal file
View File

@ -0,0 +1,39 @@
{
"name": "netlify-cms-widget-list",
"description": "Widget for editing lists in Netlify CMS.",
"version": "2.0.0-alpha.0",
"main": "dist/netlify-cms-widget-list.js",
"license": "MIT",
"keywords": [
"netlify",
"netlify-cms",
"widget",
"list",
"object"
],
"sideEffects": false,
"scripts": {
"watch": "webpack -w",
"build": "webpack"
},
"dependencies": {
"netlify-cms-widget-object": "^2.0.0-alpha.0",
"react-sortable-hoc": "^0.6.8"
},
"devDependencies": {
"webpack": "^4.16.1",
"webpack-cli": "^3.1.0"
},
"peerDependencies": {
"immutable": "^3.7.6",
"lodash": "^4.17.10",
"netlify-cms-ui-default": "^2.0.0-alpha.0",
"prop-types": "^15.5.10",
"react": "^16.4.1",
"react-emotion": "^9.2.6",
"react-immutable-proptypes": "^2.1.0"
},
"localExternals": [
"netlify-cms-widget-object"
]
}

140
packages/netlify-cms-core/src/components/EditorWidgets/List/ListControl.js → packages/netlify-cms-widget-list/src/ListControl.js
View File

@ -1,47 +1,55 @@
import React, { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import styled, { cx, css } from 'react-emotion';
import { List, Map } from 'immutable';
import { partial } from 'lodash';
import c from 'classnames';
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
import { Icon, ListItemTopBar } from 'netlify-cms-ui-default';
import ObjectControl from 'EditorWidgets/Object/ObjectControl';
function ListItem(props) {
return <div {...props} className={`list-item ${ props.className || '' }`}>{props.children}</div>;
}
ListItem.propTypes = {
className: PropTypes.string,
children: PropTypes.node,
};
ListItem.displayName = 'list-item';
import { ObjectControl } from 'netlify-cms-widget-object';
import {
Icon,
ListItemTopBar,
ObjectWidgetTopBar,
colors,
lengths,
components,
} from 'netlify-cms-ui-default';
function valueToString(value) {
return value ? value.join(',').replace(/,([^\s]|$)/g, ', $1') : '';
}
const ListItem = styled.div();
const SortableListItem = SortableElement(ListItem);
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}>
<Icon type="chevron" direction={allItemsCollapsed ? 'right' : 'down'} size="small" />
</button>
{itemsCount} {listLabel}
</div>
const StyledListItemTopBar = styled(ListItemTopBar)`
background-color: ${colors.textFieldBorder};
`
{
allowAdd ?
<button className="nc-listControl-addButton" onClick={onAdd}>
Add {listLabel} <Icon type="add" size="xsmall" />
</button>
:
null
const NestedObjectLabel = styled.div`
display: ${props => props.collapsed ? 'block' : 'none'};
border-top: 0;
background-color: ${colors.textFieldBorder};
padding: 13px;
border-radius: 0 0 ${lengths.borderRadius} ${lengths.borderRadius};
`
const styles = {
collapsedObjectControl: css`
display: none;
`,
listControlItem: css`
margin-top: 18px;
&:first-of-type {
margin-top: 26px;
}
</div>
);
`,
listControlItemCollapsed: css`
padding-bottom: 0;
`,
};
const SortableList = SortableContainer(({ items, renderItem }) => {
return <div>{items.map(renderItem)}</div>;
@ -52,7 +60,7 @@ const valueTypes = {
MULTIPLE: 'MULTIPLE',
};
export default class ListControl extends Component {
export default class ListControl extends React.Component {
static propTypes = {
onChange: PropTypes.func.isRequired,
onChangeObject: PropTypes.func.isRequired,
@ -229,33 +237,44 @@ export default class ListControl extends Component {
onAddAsset,
onRemoveInsertedMedia,
classNameWrapper,
editorControl,
resolveWidget,
} = this.props;
const { itemsCollapsed } = this.state;
const collapsed = itemsCollapsed.get(index);
const classNames = ['nc-listControl-item', collapsed ? 'nc-listControl-collapsed' : ''];
return (<SortableListItem className={classNames.join(' ')} index={index} key={`item-${ index }`}>
<ListItemTopBar
className="nc-listControl-itemTopBar"
collapsed={collapsed}
onCollapseToggle={partial(this.handleItemCollapseToggle, index)}
onRemove={partial(this.handleRemove, index)}
dragHandleHOC={SortableHandle}
/>
<div className="nc-listControl-objectLabel">{this.objectLabel(item)}</div>
<ObjectControl
value={item}
field={field}
onChangeObject={this.handleChangeFor(index)}
getAsset={getAsset}
onOpenMediaLibrary={onOpenMediaLibrary}
mediaPaths={mediaPaths}
onAddAsset={onAddAsset}
onRemoveInsertedMedia={onRemoveInsertedMedia}
classNameWrapper={`${ classNameWrapper } nc-listControl-objectControl`}
forList
/>
</SortableListItem>);
return (
<SortableListItem
className={cx(styles.listControlItem, { [styles.listControlItemCollapsed]: collapsed })}
index={index}
key={`item-${ index }`}
>
<StyledListItemTopBar
collapsed={collapsed}
onCollapseToggle={partial(this.handleItemCollapseToggle, index)}
onRemove={partial(this.handleRemove, index)}
dragHandleHOC={SortableHandle}
/>
<NestedObjectLabel collapsed={collapsed}>{this.objectLabel(item)}</NestedObjectLabel>
<ObjectControl
value={item}
field={field}
onChangeObject={this.handleChangeFor(index)}
getAsset={getAsset}
onOpenMediaLibrary={onOpenMediaLibrary}
mediaPaths={mediaPaths}
onAddAsset={onAddAsset}
onRemoveInsertedMedia={onRemoveInsertedMedia}
classNameWrapper={cx(
classNameWrapper,
{ [styles.collapsedObjectControl]: collapsed },
)}
editorControl={editorControl}
resolveWidget={resolveWidget}
forList
/>
</SortableListItem>
);
};
renderListControl() {
@ -264,16 +283,17 @@ export default class ListControl extends Component {
const items = value || List();
const label = field.get('label');
const labelSingular = field.get('label_singular') || field.get('label');
const listLabel = items.size === 1 ? labelSingular.toLowerCase() : label.toLowerCase();
return (
<div id={forID} className={c(classNameWrapper, 'nc-listControl')}>
<TopBar
<div id={forID} className={cx(classNameWrapper, components.objectWidgetTopBarContainer)}>
<ObjectWidgetTopBar
allowAdd={field.get('allow_add', true)}
onAdd={this.handleAdd}
listLabel={items.size === 1 ? labelSingular.toLowerCase() : label.toLowerCase()}
onCollapseAllToggle={this.handleCollapseAllToggle}
allItemsCollapsed={itemsCollapsed.every(val => val === true)}
itemsCount={items.size}
heading={`${items.size} ${listLabel}`}
label={listLabel}
onCollapseToggle={this.handleCollapseAllToggle}
collapsed={itemsCollapsed.every(val => val === true)}
/>
<SortableList
items={items}

2
packages/netlify-cms-widget-list/src/index.js Normal file
View File

@ -0,0 +1,2 @@
export ListControl from './ListControl';
export { ObjectPreview as ListPreview } from 'netlify-cms-widget-object';

3
packages/netlify-cms-widget-list/webpack.config.js Normal file
View File

@ -0,0 +1,3 @@
const { getConfig } = require('../../scripts/webpack.js');
module.exports = getConfig();

33
packages/netlify-cms-widget-object/package.json Normal file
View File

@ -0,0 +1,33 @@
{
"name": "netlify-cms-widget-object",
"description": "Widget for displaying an object of fields for Netlify CMS.",
"version": "2.0.0-alpha.0",
"main": "dist/netlify-cms-widget-object.js",
"license": "MIT",
"keywords": [
"netlify",
"netlify-cms",
"widget",
"fields",
"object",
"nested"
],
"sideEffects": false,
"scripts": {
"watch": "webpack -w",
"build": "webpack"
},
"devDependencies": {
"webpack": "^4.16.1",
"webpack-cli": "^3.1.0"
},
"peerDependencies": {
"immutable": "^3.7.6",
"lodash": "^4.17.10",
"netlify-cms-ui-default": "^2.0.0-alpha.0",
"prop-types": "^15.5.10",
"react": "^16.4.1",
"react-emotion": "^9.2.6",
"react-immutable-proptypes": "^2.1.0"
}
}

36
packages/netlify-cms-core/src/components/EditorWidgets/Object/ObjectControl.js → packages/netlify-cms-widget-object/src/ObjectControl.js
View File

@ -1,21 +1,19 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import styled, { css, cx } from 'react-emotion';
import { Map } from 'immutable';
import { partial } from 'lodash';
import c from 'classnames';
import { Icon } from 'netlify-cms-ui-default';
import { resolveWidget } from 'Lib/registry';
import { ObjectWidgetTopBar, Icon, colors, components } from 'netlify-cms-ui-default';
const TopBar = ({ collapsed, onCollapseToggle }) => (
<div className="nc-objectControl-topBar">
<div className="nc-objectControl-objectCollapseToggle">
<button className="nc-listControl-listCollapseToggleButton" onClick={onCollapseToggle}>
<Icon type="chevron" direction={collapsed ? 'right' : 'down'} size="small" />
</button>
</div>
</div>
);
const styles = {
nestedObjectControl: css`
padding: 6px 14px 14px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
`,
};
export default class ObjectControl extends Component {
static propTypes = {
@ -35,6 +33,7 @@ export default class ObjectControl extends Component {
classNameWrapper: PropTypes.string.isRequired,
forList: PropTypes.bool,
editorControl: PropTypes.func.isRequired,
resolveWidget: PropTypes.func.isRequired,
};
static defaultProps = {
@ -68,6 +67,7 @@ export default class ObjectControl extends Component {
value,
onChangeObject,
editorControl: EditorControl,
resolveWidget,
} = this.props;
if (field.get('widget') === 'hidden') {
@ -105,9 +105,15 @@ export default class ObjectControl extends Component {
if (multiFields) {
return (
<div id={forID} className={c(classNameWrapper, 'nc-objectControl-root')}>
{ forList ? null : <TopBar collapsed={collapsed} onCollapseToggle={this.handleCollapseToggle} /> }
{ collapsed ? null : multiFields.map((f, idx) => this.controlFor(f, idx)) }
<div id={forID} className={cx(
classNameWrapper,
components.objectWidgetTopBarContainer,
{ [styles.nestedObjectControl]: forList },
)}>
{forList ? null :
<ObjectWidgetTopBar collapsed={collapsed} onCollapseToggle={this.handleCollapseToggle} />
}
{collapsed ? null : multiFields.map((f, idx) => this.controlFor(f, idx))}
</div>
);
} else if (singleField) {

13
packages/netlify-cms-widget-object/src/ObjectPreview.js Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
const ObjectPreview = ({ field }) => (
<WidgetPreviewContainer>{(field && field.get('fields')) || null}</WidgetPreviewContainer>
);
ObjectPreview.propTypes = {
field: PropTypes.node,
};
export default ObjectPreview;

2
packages/netlify-cms-widget-object/src/index.js Normal file
View File

@ -0,0 +1,2 @@
export ObjectControl from './ObjectControl';
export ObjectPreview from './ObjectPreview';

3
packages/netlify-cms-widget-object/webpack.config.js Normal file
View File

@ -0,0 +1,3 @@
const { getConfig } = require('../../scripts/webpack.js');
module.exports = getConfig();