migrate relation widget
This commit is contained in:
35
packages/netlify-cms-widget-relation/package.json
Normal file
35
packages/netlify-cms-widget-relation/package.json
Normal 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"
|
||||
}
|
||||
}
|
191
packages/netlify-cms-widget-relation/src/RelationControl.js
Normal file
191
packages/netlify-cms-widget-relation/src/RelationControl.js
Normal 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>
|
||||
);
|
||||
}
|
||||
};
|
13
packages/netlify-cms-widget-relation/src/RelationPreview.js
Normal file
13
packages/netlify-cms-widget-relation/src/RelationPreview.js
Normal 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;
|
2
packages/netlify-cms-widget-relation/src/index.js
Normal file
2
packages/netlify-cms-widget-relation/src/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
export RelationControl from './RelationControl';
|
||||
export RelationPreview from './RelationPreview';
|
3
packages/netlify-cms-widget-relation/webpack.config.js
Normal file
3
packages/netlify-cms-widget-relation/webpack.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
const { getConfig } = require('../../scripts/webpack.js');
|
||||
|
||||
module.exports = getConfig();
|
Reference in New Issue
Block a user