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

migrate relation widget

Browse Source
This commit is contained in:
Shawn Erquhart
2018-07-24 23:35:59 -04:00
parent c54605be85
commit 3e8a6e5091
15 changed files with 174 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/netlify-cms-core/package.json
View File

@ -41,7 +41,6 @@
"prop-types": "^15.5.10",
"react": "^16.4.1",
"react-aria-menubutton": "^5.1.0",
"react-autosuggest": "^9.3.2",
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.5.4",
"react-dom": "^16.0.0",
@ -70,7 +69,6 @@
"toml-j0.4": "^1.1.1",
"tomlify-j0.4": "^3.0.0-alpha.0",
"url": "^0.11.0",
"uuid": "^3.1.0",
"what-input": "^5.0.3"
},
"devDependencies": {

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

@ -12,7 +12,7 @@ import { ListControl, ListPreview } from 'netlify-cms-widget-list';
import { ObjectControl, ObjectPreview } from 'netlify-cms-widget-object';
import { MarkdownControl, MarkdownPreview } from 'netlify-cms-widget-markdown';
import { NumberControl, NumberPreview } from 'netlify-cms-widget-number';
// import { RelationControl, RelationPreview } from 'netlify-cms-widget-relation';
import { RelationControl, RelationPreview } from 'netlify-cms-widget-relation';
import { StringControl, StringPreview } from 'netlify-cms-widget-string';
import { SelectControl, SelectPreview } from 'netlify-cms-widget-select';
import { TextControl, TextPreview } from 'netlify-cms-widget-text';
@ -31,7 +31,7 @@ registerWidget('list', ListControl, ListPreview);
registerWidget('markdown', MarkdownControl, MarkdownPreview);
registerWidget('number', NumberControl, NumberPreview);
registerWidget('object', ObjectControl, ObjectPreview);
// registerWidget('relation', RelationControl, RelationPreview);
registerWidget('relation', RelationControl, RelationPreview);
registerWidget('string', StringControl, StringPreview);
registerWidget('text', TextControl, TextPreview);
registerWidget('select', SelectControl, SelectPreview);

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

@ -5,6 +5,7 @@ import { connect } from 'react-redux';
import { colors, colorsRaw, transitions, lengths, borders } from 'netlify-cms-ui-default';
import { resolveWidget, getEditorComponents } from 'Lib/registry';
import { addAsset } from 'Actions/media';
import { query, clearSearch } from 'Actions/search';
import { openMediaLibrary, removeInsertedMedia } from 'Actions/mediaLibrary';
import { getAsset } from 'Reducers';
import Widget from './Widget';
@ -123,6 +124,10 @@ class EditorControl extends React.Component {
removeInsertedMedia,
onValidate,
processControlRef,
query,
queryHits,
isFetching,
clearSearch,
} = this.props;
const widgetName = field.get('widget');
const widget = resolveWidget(widgetName);
@ -180,6 +185,10 @@ class EditorControl extends React.Component {
getEditorComponents={getEditorComponents}
ref={processControlRef && partial(processControlRef, fieldName)}
editorControl={ConnectedEditorControl}
query={query}
queryHits={queryHits}
clearSearch={clearSearch}
isFetching={isFetching}
/>
</ControlContainer>
);
@ -189,14 +198,23 @@ class EditorControl extends React.Component {
const mapStateToProps = (state, ownProps) => ({
mediaPaths: state.mediaLibrary.get('controlMedia'),
boundGetAsset: getAsset.bind(null, state),
isFetching: state.search.get('isFetching'),
queryHits: state.search.get('queryHits'),
});
const mapDispatchToProps = {
openMediaLibrary,
removeInsertedMedia,
addAsset,
query,
clearSearch,
};
const ConnectedEditorControl = connect(mapStateToProps, mapDispatchToProps)(EditorControl);
const ConnectedEditorControl = connect(
mapStateToProps,
mapDispatchToProps,
null,
{ withRef: true },
)(EditorControl);
export default ConnectedEditorControl;

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

@ -41,6 +41,13 @@ export default class Widget extends Component {
getAsset: PropTypes.func.isRequired,
resolveWidget: PropTypes.func.isRequired,
getEditorComponents: PropTypes.func.isRequired,
isFetching: PropTypes.node,
query: PropTypes.func.isRequired,
clearSearch: PropTypes.func.isRequired,
queryHits: PropTypes.oneOfType([
PropTypes.array,
PropTypes.object,
]),
};
shouldComponentUpdate(nextProps) {
@ -194,6 +201,10 @@ export default class Widget extends Component {
uniqueFieldId,
resolveWidget,
getEditorComponents,
query,
queryHits,
clearSearch,
isFetching,
} = this.props;
return React.createElement(controlComponent, {
field,
@ -219,6 +230,10 @@ export default class Widget extends Component {
editorControl,
resolveWidget,
getEditorComponents,
query,
queryHits,
clearSearch,
isFetching,
});
}
}

35
packages/netlify-cms-core/src/components/EditorWidgets/Relation/ReactAutosuggest.css
View File

@ -1,35 +0,0 @@
.react-autosuggest__container {
position: relative;
}
.react-autosuggest__suggestions-container {
display: none;
}
.react-autosuggest__container--open .react-autosuggest__suggestions-container {
@apply(--dropdownList);
position: absolute;
display: block;
top: 51px;
width: 100%;
z-index: 2;
}
.react-autosuggest__suggestion {
@apply(--dropdownItem);
}
.react-autosuggest__suggestions-list {
margin: 0;
padding: 0;
list-style-type: none;
}
.react-autosuggest__suggestion {
cursor: pointer;
padding: 10px 20px;
}
.react-autosuggest__suggestion--focused {
background-color: #ddd;
}

1
packages/netlify-cms-core/src/components/EditorWidgets/Relation/Relation.css
View File

@ -1 +0,0 @@
@import "./ReactAutosuggest.css";

162
packages/netlify-cms-core/src/components/EditorWidgets/Relation/RelationControl.js
View File

@ -1,162 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Autosuggest from 'react-autosuggest';
import uuid from 'uuid/v4';
import { List, Map } from 'immutable';
import { connect } from 'react-redux';
import { debounce } from 'lodash';
import { query, clearSearch } from 'Actions/search';
import { Loader } from 'netlify-cms-ui-default';
function escapeRegexCharacters(str) {
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
class RelationControl extends Component {
static propTypes = {
onChange: PropTypes.func.isRequired,
forID: PropTypes.string.isRequired,
value: PropTypes.node,
field: PropTypes.node,
isFetching: PropTypes.node,
query: PropTypes.func.isRequired,
clearSearch: PropTypes.func.isRequired,
queryHits: PropTypes.oneOfType([
PropTypes.array,
PropTypes.object,
]),
classNameWrapper: PropTypes.string.isRequired,
setActiveStyle: PropTypes.func.isRequired,
setInactiveStyle: PropTypes.func.isRequired,
};
static defaultProps = {
value: '',
};
constructor(props, ctx) {
super(props, ctx);
this.controlID = uuid();
this.didInitialSearch = false;
}
componentDidMount() {
const { value, field } = this.props;
if (value) {
const collection = field.get('collection');
const searchFields = field.get('searchFields').toJS();
this.props.query(this.controlID, collection, searchFields, value);
}
}
componentWillReceiveProps(nextProps) {
if (this.didInitialSearch) return;
if (nextProps.queryHits !== this.props.queryHits && nextProps.queryHits.get && nextProps.queryHits.get(this.controlID)) {
this.didInitialSearch = true;
const suggestion = nextProps.queryHits.get(this.controlID);
if (suggestion && suggestion.length === 1) {
const val = this.getSuggestionValue(suggestion[0]);
this.props.onChange(val, { [nextProps.field.get('collection')]: { [val]: suggestion[0].data } });
}
}
}
onChange = (event, { newValue }) => {
this.props.onChange(newValue);
};
onSuggestionSelected = (event, { suggestion }) => {
const value = this.getSuggestionValue(suggestion);
this.props.onChange(value, { [this.props.field.get('collection')]: { [value]: suggestion.data } });
};
onSuggestionsFetchRequested = debounce(({ value }) => {
if (value.length < 2) return;
const { field } = this.props;
const collection = field.get('collection');
const searchFields = field.get('searchFields').toJS();
this.props.query(this.controlID, collection, searchFields, value);
}, 500);
onSuggestionsClearRequested = () => {
this.props.clearSearch();
};
getSuggestionValue = (suggestion) => {
const { field } = this.props;
const valueField = field.get('valueField');
return suggestion.data[valueField];
};
renderSuggestion = (suggestion) => {
const { field } = this.props;
const valueField = field.get('displayFields') || field.get('valueField');
if (List.isList(valueField)) {
return (
<span>
{valueField.toJS().map(key => <span key={key}>{new String(suggestion.data[key])}{' '}</span>)}
</span>
);
}
return <span>{new String(suggestion.data[valueField])}</span>;
};
render() {
const {
value,
isFetching,
forID,
queryHits,
classNameWrapper,
setActiveStyle,
setInactiveStyle
} = this.props;
const inputProps = {
placeholder: '',
value: value || '',
onChange: this.onChange,
id: forID,
className: classNameWrapper,
onFocus: setActiveStyle,
onBlur: setInactiveStyle,
};
const suggestions = (queryHits.get) ? queryHits.get(this.controlID, []) : [];
return (
<div>
<Autosuggest
suggestions={suggestions}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
onSuggestionSelected={this.onSuggestionSelected}
getSuggestionValue={this.getSuggestionValue}
renderSuggestion={this.renderSuggestion}
inputProps={inputProps}
focusInputOnSuggestionClick={false}
/>
<Loader active={isFetching === this.controlID} />
</div>
);
}
}
function mapStateToProps(state, ownProps) {
const { className } = ownProps;
const isFetching = state.search.get('isFetching');
const queryHits = state.search.get('queryHits');
return { isFetching, queryHits, className };
}
export default connect(
mapStateToProps,
{
query,
clearSearch,
},
null,
{
withRef: true,
}
)(RelationControl);

10
packages/netlify-cms-core/src/components/EditorWidgets/Relation/RelationPreview.js
View File

@ -1,10 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
export default function RelationPreview({ value }) {
return <div className="nc-widgetPreview">{ value }</div>;
}
RelationPreview.propTypes = {
value: PropTypes.node,
};

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

@ -1,8 +1,5 @@
import { registerWidget } from 'Lib/registry';
import UnknownControl from './Unknown/UnknownControl';
import UnknownPreview from './Unknown/UnknownPreview';
import RelationControl from './Relation/RelationControl';
import RelationPreview from './Relation/RelationPreview';
registerWidget('relation', RelationControl, RelationPreview);
registerWidget('unknown', UnknownControl, UnknownPreview);