migrate relation widget

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

View File

@ -0,0 +1,35 @@
{
"name": "netlify-cms-widget-relation",
"description": "Widget for linking related entries in Netlify CMS.",
"version": "2.0.0-alpha.0",
"main": "dist/netlify-cms-widget-relation.js",
"license": "MIT",
"keywords": [
"netlify",
"netlify-cms",
"widget",
"relation",
"link"
],
"sideEffects": false,
"scripts": {
"watch": "webpack -w",
"build": "webpack"
},
"dependencies": {
"react-autosuggest": "^9.3.2"
},
"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.5",
"uuid": "^3.1.0"
}
}

View File

@ -0,0 +1,191 @@
import React from 'react';
import PropTypes from 'prop-types';
import { css } from 'react-emotion';
import Autosuggest from 'react-autosuggest';
import uuid from 'uuid/v4';
import { List, Map } from 'immutable';
import { debounce } from 'lodash';
import { Loader, components } from 'netlify-cms-ui-default';
/**
* Create a classname for use as a descendant selector. This is generally
* discouraged in Emotion because composition will break the resulting
* classnames, but we won't be using composition here.
*/
const styles = {
suggestionsContainer: css`
display: none;
`,
};
/**
* react-autosuggest theme spec:
* https://github.com/moroshko/react-autosuggest#theme-optional
*/
const theme = {
container: css`
position: relative;
`,
containerOpen: css`
${styles.suggestionsContainer} {
${components.dropdownList}
position: absolute;
display: block;
top: 51px;
width: 100%;
z-index: 2;
}
`,
suggestion: css`
${components.drodpownItem};
cursor: pointer;
padding: 10px 20px;
`,
suggestionsList: css`
margin: 0;
padding: 0;
list-style-type: none;
`,
suggestionHighlighted: css`
background-color: #ddd;
`,
};
function escapeRegexCharacters(str) {
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
export default class RelationControl extends React.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) {
console.log(`receiving`);
console.log(nextProps.queryHits && nextProps.queryHits.get(this.controlID));
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]);
console.log(`accepting ${val}`);
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();
console.log(`querying ${value}`);
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}
theme={theme}
/>
<Loader active={isFetching === this.controlID} />
</div>
);
}
};

View File

@ -0,0 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
const RelationPreview = ({ value }) => (
<WidgetPreviewContainer>{ value }</WidgetPreviewContainer>
)
RelationPreview.propTypes = {
value: PropTypes.node,
};
export default RelationPreview;

View File

@ -0,0 +1,2 @@
export RelationControl from './RelationControl';
export RelationPreview from './RelationPreview';

View File

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