Merge branch 'react-pr' of https://github.com/netlify/netlify-cms into react-pr

This commit is contained in:
Cássio Zen
2016-09-13 14:31:26 -03:00
24 changed files with 193 additions and 124 deletions

View File

@ -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);

View File

@ -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 });
};
}

View File

@ -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() {

View File

@ -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

View File

@ -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);

View File

@ -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} />;
}

View File

@ -60,7 +60,7 @@ class MarkdownControl extends React.Component {
return (
<div>
{ this.renderEditor() }
{this.renderEditor()}
</div>
);
}

View File

@ -62,4 +62,4 @@ export const SCHEMA = {
borderRadius: '4px'
}
}
}
};

View File

@ -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>
);

View File

@ -39,4 +39,4 @@ storiesOf('Card', module)
<p>header and footer elements are also not subject to margin</p>
<footer style={styles.footer}>&copy; Thousand Cats Corp</footer>
</Card>
))
));

View File

@ -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>;
}

View File

@ -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,

View File

@ -41,6 +41,6 @@ export default class YAML {
}
toFile(data) {
return yaml.safeDump(data, {schema: OutputSchema});
return yaml.safeDump(data, { schema: OutputSchema });
}
}

View File

@ -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 {

View File

@ -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) {

View File

@ -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: {},

View 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
View 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;

View File

@ -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;
}