Permalink
Browse files

Moved the CSS style JSON expressions into a new separate file 'webpac…

…k_in/styles.es'.
  • Loading branch information...
maratbn committed Jul 2, 2018
1 parent edba721 commit 0155a626acfacc76cdb341ecab9b9f1f566cb79f
Showing with 22 additions and 16 deletions.
  1. +7 −16 webpack_in/entry.jsx
  2. +15 −0 webpack_in/styles.es
@@ -10,16 +10,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
const objStyleCommon = {
margin: '1em',
border: 'solid 2px green',
textAlign: 'center'
};
const objStyleContent = {
padding: '1em'
};
import Styles from './styles.es';
class ButtonWidget extends React.Component {
@@ -41,7 +32,7 @@ ButtonWidget.propTypes = {
class HelloWidget extends React.Component {
render() {
return (
<div style={{ ...objStyleCommon, ...objStyleContent }}>
<div style={{ ...Styles.common, ...Styles.content }}>
Hello! I'm a React app!!
</div>
);
@@ -59,8 +50,8 @@ class TextWidget extends React.Component {
render() {
return (
<div style={ objStyleCommon }>
<div style={ objStyleContent }>{ this.state.text }</div>
<div style={ Styles.common }>
<div style={ Styles.content }>{ this.state.text }</div>
<ButtonWidget caption="Change text..."
onClick={() => {
const strTextNew = prompt("Please enter text to display:",
@@ -163,8 +154,8 @@ class ListWidget extends React.Component {
"");
return (
<div style={ objStyleCommon }>
<div style={ objStyleContent }>
<div style={ Styles.common }>
<div style={ Styles.content }>
<ul style={{ display: 'inline-block', textAlign: 'left', listStyleType: 'none' }}>
{ this.state.items.map((objItem, index) => (
<ListItem key={ objItem.id }
@@ -387,7 +378,7 @@ class ColorSelector extends React.Component {
};
return (
<div style={ objStyleCommon }>
<div style={ Styles.common }>
<div style={{ margin: '1em auto',
width: '70%',
height: '3em',
@@ -0,0 +1,15 @@
// This file 'styles.es' is part of an example for building a multi-widget React front-end app
// step by step as outlined in the tutorial blog at
// http://maratbn.com/blogs/2018/07/02/react-multi-widget/
export default {
common: {
margin: '1em',
border: 'solid 2px green',
textAlign: 'center'
},
content: {
padding: '1em'
}
};

0 comments on commit 0155a62

Please sign in to comment.