Search integration (React Version) (#84)
* algolia integration skeleton * Configuration Defaults * Implemented partial entries with lazy loading of complete file * Moved backend selection logic to actioncreators * basic pagination for entries * general search skeleton * Basic search result listing * Redo search for different search terms * search results pagination * Changing integration config & handling * Changing integration config & handling * new integration config model
This commit is contained in:
@ -6,11 +6,13 @@ export default class ControlPane extends React.Component {
|
||||
controlFor(field) {
|
||||
const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
|
||||
const widget = resolveWidget(field.get('widget'));
|
||||
const value = entry.getIn(['data', field.get('name')]);
|
||||
if (!value) return null;
|
||||
return <div className="cms-control">
|
||||
<label>{field.get('label')}</label>
|
||||
{React.createElement(widget.control, {
|
||||
field: field,
|
||||
value: entry.getIn(['data', field.get('name')]),
|
||||
value: value,
|
||||
onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)),
|
||||
onAddMedia: onAddMedia,
|
||||
onRemoveMedia: onRemoveMedia,
|
||||
|
@ -1,6 +1,8 @@
|
||||
import React from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { Map } from 'immutable';
|
||||
import Bricks from 'bricks.js';
|
||||
import Waypoint from 'react-waypoint';
|
||||
import history from '../routing/history';
|
||||
import Cards from './Cards';
|
||||
import _ from 'lodash';
|
||||
@ -23,6 +25,7 @@ export default class EntryListing extends React.Component {
|
||||
};
|
||||
|
||||
this.updateBricks = _.throttle(this.updateBricks.bind(this), 30);
|
||||
this.handleLoadMore = this.handleLoadMore.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@ -58,7 +61,6 @@ export default class EntryListing extends React.Component {
|
||||
}
|
||||
|
||||
cardFor(collection, entry, link) {
|
||||
//const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
|
||||
const cartType = collection.getIn(['card', 'type']) || 'alltype';
|
||||
const card = Cards[cartType] || Cards._unknown;
|
||||
return React.createElement(card, {
|
||||
@ -72,23 +74,47 @@ export default class EntryListing extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { collection, entries } = this.props;
|
||||
const name = collection.get('name');
|
||||
handleLoadMore() {
|
||||
this.props.onPaginate(this.props.page + 1);
|
||||
}
|
||||
|
||||
renderCards = () => {
|
||||
const { collections, entries } = this.props;
|
||||
if (Map.isMap(collections)) {
|
||||
const collectionName = collections.get('name');
|
||||
return entries.map((entry) => {
|
||||
const path = `/collections/${collectionName}/entries/${entry.get('slug')}`;
|
||||
return this.cardFor(collections, entry, path);
|
||||
});
|
||||
} else {
|
||||
return entries.map((entry) => {
|
||||
const collection = collections.filter(collection => collection.get('name') === entry.get('collection')).first();
|
||||
const path = `/collections/${collection.get('name')}/entries/${entry.get('slug')}`;
|
||||
return this.cardFor(collection, entry, path);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
const cards = this.renderCards();
|
||||
return <div>
|
||||
<h1>Listing {name}</h1>
|
||||
<h1>{children}</h1>
|
||||
<div ref={(c) => this._entries = c}>
|
||||
{entries.map((entry) => {
|
||||
const path = `/collections/${name}/entries/${entry.get('slug')}`;
|
||||
return this.cardFor(collection, entry, path);
|
||||
})}
|
||||
{cards}
|
||||
<Waypoint onEnter={this.handleLoadMore} />
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
EntryListing.propTypes = {
|
||||
collection: ImmutablePropTypes.map.isRequired,
|
||||
children: PropTypes.node.isRequired,
|
||||
collections: PropTypes.oneOfType([
|
||||
ImmutablePropTypes.map,
|
||||
ImmutablePropTypes.iterable
|
||||
]).isRequired,
|
||||
entries: ImmutablePropTypes.list,
|
||||
onPaginate: PropTypes.func.isRequired,
|
||||
page: PropTypes.number,
|
||||
};
|
||||
|
@ -2,8 +2,6 @@ import React, { PropTypes } from 'react';
|
||||
import { Editor, Plain, Mark } from 'slate';
|
||||
import Prism from 'prismjs';
|
||||
import marks from './prismMarkdown';
|
||||
import styles from './index.css';
|
||||
|
||||
|
||||
Prism.languages.markdown = Prism.languages.extend('markup', {});
|
||||
Prism.languages.insertBefore('markdown', 'prolog', marks);
|
||||
@ -75,7 +73,6 @@ const SCHEMA = {
|
||||
class RawEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const content = props.value ? Plain.deserialize(props.value) : Plain.deserialize('');
|
||||
|
||||
this.state = {
|
||||
|
@ -8,7 +8,7 @@ import { DEFAULT_NODE, SCHEMA } from './schema';
|
||||
import { getNodes, getSyntaxes, getPlugins } from '../../richText';
|
||||
import StylesMenu from './StylesMenu';
|
||||
import BlockTypesMenu from './BlockTypesMenu';
|
||||
import styles from './index.css';
|
||||
//import styles from './index.css';
|
||||
|
||||
/**
|
||||
* Slate Render Configuration
|
||||
|
@ -17,7 +17,7 @@ const EditorComponent = Record({
|
||||
});
|
||||
|
||||
|
||||
class Plugin extends Component {
|
||||
class Plugin extends Component { // eslint-disable-line
|
||||
static propTypes = {
|
||||
children: PropTypes.element.isRequired
|
||||
};
|
||||
|
Reference in New Issue
Block a user