Merge branch 'react-pr' of https://github.com/netlify/netlify-cms into react-pr
This commit is contained in:
@ -21,9 +21,9 @@ export default class AuthenticationPage extends React.Component {
|
||||
auth = new Authenticator();
|
||||
}
|
||||
|
||||
auth.authenticate({provider: 'github', scope: 'repo'}, (err, data) => {
|
||||
auth.authenticate({ provider: 'github', scope: 'repo' }, (err, data) => {
|
||||
if (err) {
|
||||
this.setState({loginError: err.toString()});
|
||||
this.setState({ loginError: err.toString() });
|
||||
return;
|
||||
}
|
||||
this.props.onLogin(data);
|
||||
|
@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import Authenticator from '../../lib/netlify-auth';
|
||||
|
||||
export default class AuthenticationPage extends React.Component {
|
||||
static propTypes = {
|
||||
@ -14,8 +13,8 @@ export default class AuthenticationPage extends React.Component {
|
||||
|
||||
handleLogin(e) {
|
||||
e.preventDefault();
|
||||
const {email, password} = this.state;
|
||||
this.setState({authenticating: true});
|
||||
const { email, password } = this.state;
|
||||
this.setState({ authenticating: true });
|
||||
fetch(`${AuthenticationPage.url}/token`, {
|
||||
method: 'POST',
|
||||
body: 'grant_type=client_credentials',
|
||||
@ -27,18 +26,18 @@ export default class AuthenticationPage extends React.Component {
|
||||
console.log(response);
|
||||
if (response.ok) {
|
||||
return response.json().then((data) => {
|
||||
this.props.onLogin(Object.assign({email}, data));
|
||||
this.props.onLogin(Object.assign({ email }, data));
|
||||
});
|
||||
}
|
||||
response.json().then((data) => {
|
||||
this.setState({loginError: data.msg});
|
||||
})
|
||||
})
|
||||
this.setState({ loginError: data.msg });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
handleChange(key) {
|
||||
return (e) => {
|
||||
this.setState({[key]: e.target.value});
|
||||
this.setState({ [key]: e.target.value });
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -7,7 +7,7 @@ export default class AuthenticationPage extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {email: ''};
|
||||
this.state = { email: '' };
|
||||
this.handleLogin = this.handleLogin.bind(this);
|
||||
this.handleEmailChange = this.handleEmailChange.bind(this);
|
||||
}
|
||||
@ -18,7 +18,7 @@ export default class AuthenticationPage extends React.Component {
|
||||
}
|
||||
|
||||
handleEmailChange(e) {
|
||||
this.setState({email: e.target.value});
|
||||
this.setState({ email: e.target.value });
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -27,14 +27,14 @@ export default class EntryEditor extends React.Component {
|
||||
calculateHeight() {
|
||||
const height = window.innerHeight - 54;
|
||||
console.log('setting height to %s', height);
|
||||
this.setState({height});
|
||||
this.setState({ height });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist } = this.props;
|
||||
const {height} = this.state;
|
||||
const { height } = this.state;
|
||||
|
||||
return <div className={styles.entryEditor} style={{height}}>
|
||||
return <div className={styles.entryEditor} style={{ height }}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.controlPane}>
|
||||
<ControlPane
|
||||
|
@ -55,7 +55,7 @@ export default class PreviewPane extends React.Component {
|
||||
}
|
||||
|
||||
renderPreview() {
|
||||
const props = Object.assign({}, this.props, {widgetFor: this.widgetFor});
|
||||
const props = Object.assign({}, this.props, { widgetFor: this.widgetFor });
|
||||
const component = registry.getPreviewTemplate(props.collection.get('name')) || Preview;
|
||||
|
||||
render(React.createElement(component, props), this.previewEl);
|
||||
|
@ -6,7 +6,7 @@ const availableIcons = [
|
||||
'bold', 'italic', 'list', 'font', 'text-height', 'text-width', 'align-left', 'align-center', 'align-right',
|
||||
'align-justify', 'indent-left', 'indent-right', 'list-bullet', 'list-numbered', 'strike', 'underline', 'table',
|
||||
'superscript', 'subscript', 'header', 'h1', 'h2', 'paragraph', 'link', 'unlink', 'quote-left', 'quote-right', 'code',
|
||||
'picture','video',
|
||||
'picture', 'video',
|
||||
// Entypo
|
||||
'note', 'note-beamed',
|
||||
'music',
|
||||
@ -199,7 +199,7 @@ const iconPropType = (props, propName) => {
|
||||
|
||||
const noop = function() {};
|
||||
|
||||
export default function Icon({ style, className = '', type, onClick = noop}) {
|
||||
export default function Icon({ style, className = '', type, onClick = noop }) {
|
||||
return <span className={`${styles.root} ${styles[type]} ${className}`} style={style} onClick={onClick} />;
|
||||
}
|
||||
|
||||
|
@ -60,7 +60,7 @@ class MarkdownControl extends React.Component {
|
||||
return (
|
||||
<div>
|
||||
|
||||
{ this.renderEditor() }
|
||||
{this.renderEditor()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -62,4 +62,4 @@ export const SCHEMA = {
|
||||
borderRadius: '4px'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -46,7 +46,7 @@ function processEditorPlugins(plugins) {
|
||||
<div {...props.attributes} className={className}>
|
||||
<div className="plugin_icon" contentEditable={false}><Icon type={plugin.icon}/></div>
|
||||
<div className="plugin_fields" contentEditable={false}>
|
||||
{ plugin.fields.map(field => `${field.label}: “${node.data.get(field.name)}”`) }
|
||||
{plugin.fields.map(field => `${field.label}: “${node.data.get(field.name)}”`)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -39,4 +39,4 @@ storiesOf('Card', module)
|
||||
<p>header and footer elements are also not subject to margin</p>
|
||||
<footer style={styles.footer}>© Thousand Cats Corp</footer>
|
||||
</Card>
|
||||
))
|
||||
));
|
||||
|
@ -57,7 +57,7 @@ class EntryPage extends React.Component {
|
||||
const {
|
||||
entry, entryDraft, boundGetMedia, collection, changeDraft, addMedia, removeMedia
|
||||
} = this.props;
|
||||
|
||||
|
||||
if (entryDraft == null || entryDraft.get('entry') == undefined || entry && entry.get('isFetching')) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
@ -13,7 +13,12 @@ class FindBar extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this._compiledCommands = [];
|
||||
this._searchCommand = { search: true, regexp:`(?:${SEARCH})?(.*)`, param:{ name:'searchTerm', display:'' }, token: SEARCH };
|
||||
this._searchCommand = {
|
||||
search: true,
|
||||
regexp: `(?:${SEARCH})?(.*)`,
|
||||
param: { name: 'searchTerm', display: '' },
|
||||
token: SEARCH
|
||||
};
|
||||
this.state = {
|
||||
value: '',
|
||||
placeholder: PLACEHOLDER,
|
||||
@ -68,7 +73,7 @@ class FindBar extends Component {
|
||||
|
||||
if (match && match[1]) {
|
||||
regexp += '(.*)';
|
||||
param = { name:match[1], display:match[2] || this._camelCaseToSpace(match[1]) };
|
||||
param = { name: match[1], display: match[2] || this._camelCaseToSpace(match[1]) };
|
||||
}
|
||||
|
||||
return Object.assign({}, command, {
|
||||
@ -144,6 +149,7 @@ class FindBar extends Component {
|
||||
getSuggestions() {
|
||||
return this._getSuggestions(this.state.value, this.state.activeScope, this._compiledCommands, this.props.defaultCommands);
|
||||
}
|
||||
|
||||
// Memoized version
|
||||
_getSuggestions(value, scope, commands, defaultCommands) {
|
||||
if (scope) return []; // No autocomplete for scoped input
|
||||
@ -152,7 +158,7 @@ class FindBar extends Component {
|
||||
.filter(command => defaultCommands.indexOf(command.id) !== -1)
|
||||
.map(result => (
|
||||
Object.assign({}, result, { string: result.token }
|
||||
)));
|
||||
)));
|
||||
}
|
||||
|
||||
const results = fuzzy.filter(value, commands, {
|
||||
@ -162,8 +168,8 @@ class FindBar extends Component {
|
||||
});
|
||||
|
||||
const returnResults = results.slice(0, 4).map(result => (
|
||||
Object.assign({}, result.original, { string:result.string }
|
||||
)));
|
||||
Object.assign({}, result.original, { string: result.string }
|
||||
)));
|
||||
returnResults.push(this._searchCommand);
|
||||
|
||||
return returnResults;
|
||||
@ -178,7 +184,7 @@ class FindBar extends Component {
|
||||
index = (
|
||||
highlightedIndex === this.getSuggestions().length - 1 ||
|
||||
this.state.isOpen === false
|
||||
) ? 0 : highlightedIndex + 1;
|
||||
) ? 0 : highlightedIndex + 1;
|
||||
this.setState({
|
||||
highlightedIndex: index,
|
||||
isOpen: true,
|
||||
@ -290,7 +296,7 @@ class FindBar extends Component {
|
||||
let children;
|
||||
if (!command.search) {
|
||||
children = (
|
||||
<span><span dangerouslySetInnerHTML={{__html: command.string}} /></span>
|
||||
<span><span dangerouslySetInnerHTML={{ __html: command.string }}/></span>
|
||||
);
|
||||
} else {
|
||||
children = (
|
||||
@ -299,7 +305,8 @@ class FindBar extends Component {
|
||||
<span><Icon type="search"/>Search... </span> :
|
||||
<span className={styles.faded}><Icon type="search"/>Search for: </span>
|
||||
}
|
||||
<strong>{this.state.value}</strong></span>
|
||||
<strong>{this.state.value}</strong>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
@ -317,7 +324,7 @@ class FindBar extends Component {
|
||||
return commands.length === 0 ? null : (
|
||||
<div className={styles.menu}>
|
||||
<div className={styles.suggestions}>
|
||||
{ commands }
|
||||
{commands}
|
||||
</div>
|
||||
<div className={styles.history}>
|
||||
Your past searches and commands
|
||||
@ -328,7 +335,7 @@ class FindBar extends Component {
|
||||
|
||||
renderActiveScope() {
|
||||
if (this.state.activeScope === SEARCH) {
|
||||
return <div className={styles.inputScope}><Icon type="search"/> </div>;
|
||||
return <div className={styles.inputScope}><Icon type="search"/></div>;
|
||||
} else {
|
||||
return <div className={styles.inputScope}>{this.state.activeScope}</div>;
|
||||
}
|
||||
@ -358,6 +365,7 @@ class FindBar extends Component {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
FindBar.propTypes = {
|
||||
commands: PropTypes.arrayOf(PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
|
@ -41,6 +41,6 @@ export default class YAML {
|
||||
}
|
||||
|
||||
toFile(data) {
|
||||
return yaml.safeDump(data, {schema: OutputSchema});
|
||||
return yaml.safeDump(data, { schema: OutputSchema });
|
||||
}
|
||||
}
|
||||
|
@ -3,8 +3,9 @@ html {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
margin: 0;
|
||||
font-family: Roboto,"Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif;
|
||||
font-family: Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
@ -13,15 +14,15 @@ body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
height: 100%;
|
||||
background-color: #f2f5f4;
|
||||
color:#7c8382;
|
||||
color: #7c8382;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #272e30;
|
||||
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
|
||||
height: 54px;
|
||||
border-bottom:2px solid #3ab7a5;
|
||||
border-bottom: 2px solid #3ab7a5;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
@ -35,23 +36,24 @@ h1, h2, h3, h4, h5, h6, p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1{
|
||||
color: #3ab7a5;
|
||||
border-bottom: 1px solid #3ab7a5;
|
||||
margin: 30px auto 25px;
|
||||
padding-bottom: 15px;
|
||||
font-size: 25px;
|
||||
h1 {
|
||||
color: #3ab7a5;
|
||||
border-bottom: 1px solid #3ab7a5;
|
||||
margin: 30px auto 25px;
|
||||
padding-bottom: 15px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
header input{
|
||||
margin-bottom:0;
|
||||
header input {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
button{
|
||||
|
||||
button {
|
||||
border: 1px solid #3ab7a5;
|
||||
padding: 3px 20px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
background-color:#fff;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -120,7 +122,7 @@ button{
|
||||
margin-top: 1px;
|
||||
z-index: 99999 !important;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.1);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
|
||||
border: 1px solid #f9f9f9;
|
||||
}
|
||||
& .rdtOpen .rdtPicker {
|
||||
@ -217,10 +219,10 @@ button{
|
||||
& .rdtNext span {
|
||||
display: block;
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@ -293,10 +295,10 @@ button{
|
||||
display: block;
|
||||
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
}
|
||||
& .rdtCounter .rdtBtn:hover {
|
||||
|
32
src/index.js
32
src/index.js
@ -1,31 +1,33 @@
|
||||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import { Provider } from 'react-redux';
|
||||
import { Router } from 'react-router';
|
||||
import { AppContainer } from 'react-hot-loader'
|
||||
import Root from './root'
|
||||
import registry from './lib/registry';
|
||||
import configureStore from './store/configureStore';
|
||||
import routes from './routing/routes';
|
||||
import history, { syncHistory } from './routing/history';
|
||||
import 'file?name=index.html!../example/index.html';
|
||||
import './index.css';
|
||||
|
||||
const store = configureStore();
|
||||
|
||||
// Create an enhanced history that syncs navigation events with the store
|
||||
syncHistory(store);
|
||||
|
||||
// Create mount element dynamically
|
||||
const el = document.createElement('div');
|
||||
el.id = 'root';
|
||||
document.body.appendChild(el);
|
||||
|
||||
render((
|
||||
<Provider store={store}>
|
||||
<Router history={history}>
|
||||
{routes}
|
||||
</Router>
|
||||
</Provider>
|
||||
<AppContainer>
|
||||
<Root />
|
||||
</AppContainer>
|
||||
), el);
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept('./root', () => {
|
||||
const NextRoot = require('./root').default;
|
||||
render((
|
||||
<AppContainer>
|
||||
<NextRoot />
|
||||
</AppContainer>
|
||||
), el);
|
||||
});
|
||||
}
|
||||
|
||||
window.CMS = {};
|
||||
console.log('reg: ', registry);
|
||||
for (const method in registry) {
|
||||
|
@ -1,5 +1,5 @@
|
||||
import {List} from 'immutable';
|
||||
import {newEditorPlugin} from '../components/Widgets/MarkdownControlElements/plugins';
|
||||
import { List } from 'immutable';
|
||||
import { newEditorPlugin } from '../components/Widgets/MarkdownControlElements/plugins';
|
||||
|
||||
const _registry = {
|
||||
templates: {},
|
||||
|
8
src/reducers/combinedReducer.js
Normal file
8
src/reducers/combinedReducer.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { combineReducers } from 'redux';
|
||||
import { routerReducer } from 'react-router-redux';
|
||||
import reducers from '.';
|
||||
|
||||
export default combineReducers({
|
||||
...reducers,
|
||||
routing: routerReducer
|
||||
});
|
21
src/root.js
Normal file
21
src/root.js
Normal file
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { Router } from 'react-router';
|
||||
import routes from './routing/routes';
|
||||
import history, { syncHistory } from './routing/history';
|
||||
import configureStore from './store/configureStore';
|
||||
|
||||
const store = configureStore();
|
||||
|
||||
// Create an enhanced history that syncs navigation events with the store
|
||||
syncHistory(store);
|
||||
|
||||
const Root = () => (
|
||||
<Provider store={store}>
|
||||
<Router history={history}>
|
||||
{routes}
|
||||
</Router>
|
||||
</Provider>
|
||||
);
|
||||
|
||||
export default Root;
|
@ -1,18 +1,20 @@
|
||||
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
|
||||
import { createStore, applyMiddleware, compose } from 'redux';
|
||||
import thunkMiddleware from 'redux-thunk';
|
||||
import { routerReducer } from 'react-router-redux';
|
||||
import reducers from '../reducers';
|
||||
import reducer from '../reducers/combinedReducer';
|
||||
|
||||
const reducer = combineReducers({
|
||||
...reducers,
|
||||
routing: routerReducer
|
||||
});
|
||||
export default function configureStore(initialState) {
|
||||
const store = createStore(reducer, initialState, compose(
|
||||
applyMiddleware(thunkMiddleware),
|
||||
window.devToolsExtension ? window.devToolsExtension() : f => f
|
||||
));
|
||||
|
||||
const createStoreWithMiddleware = compose(
|
||||
applyMiddleware(thunkMiddleware),
|
||||
window.devToolsExtension ? window.devToolsExtension() : (f) => f
|
||||
)(createStore);
|
||||
if (module.hot) {
|
||||
// Enable Webpack hot module replacement for reducers
|
||||
module.hot.accept('../reducers/combinedReducer', () => {
|
||||
const nextReducer = require('../reducers/combinedReducer') // eslint-disable-line
|
||||
store.replaceReducer(nextReducer);
|
||||
});
|
||||
}
|
||||
|
||||
export default (initialState) => (
|
||||
createStoreWithMiddleware(reducer, initialState)
|
||||
);
|
||||
return store;
|
||||
}
|
||||
|
Reference in New Issue
Block a user