migrate relation widget
This commit is contained in:
@ -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": {
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -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 +0,0 @@
|
||||
@import "./ReactAutosuggest.css";
|
@ -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);
|
@ -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,
|
||||
};
|
@ -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);
|
||||
|
Reference in New Issue
Block a user