mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
Reorganize modules
This commit is contained in:
Nicolas Gallagher
@@ -2,7 +2,7 @@
|
||||
|
||||
**Experimental / Proof of concept**
|
||||
|
||||
A React SDK for creating web applications and toolkits. Inspired by `react-native`.
|
||||
A React SDK (~8KB gzipped) for creating web applications and toolkits. Inspired by `react-native`.
|
||||
|
||||
It includes the following components:
|
||||
|
||||
@@ -131,7 +131,7 @@ Returns an object with the specified props included.
|
||||
## Development
|
||||
|
||||
```
|
||||
npm run build
|
||||
npm run build:watch
|
||||
open index.html
|
||||
npm install
|
||||
npm run build:example:watch
|
||||
open example/index.html
|
||||
```
|
||||
|
||||
39
example.js
39
example.js
@@ -1,39 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Image, Text, View } from '.';
|
||||
|
||||
class Example extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<View style={style.root}>
|
||||
{[1,2,3,4,5,6].map((item) => {
|
||||
return (
|
||||
<View style={{ ...style.box, ...(item === 6 && style.boxFull) }}>
|
||||
<Text style={{ fontSize: '2rem' }}>{item}</Text>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const style = {
|
||||
root: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
height: '100px'
|
||||
},
|
||||
box: {
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'lightblue',
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
borderColor: 'blue',
|
||||
borderWidth: '5px'
|
||||
},
|
||||
boxFull: {
|
||||
width: '100%'
|
||||
}
|
||||
}
|
||||
|
||||
React.render(<Example />, document.getElementById('react-root'));
|
||||
50
example/example.js
Normal file
50
example/example.js
Normal file
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import { Image, Text, View } from '../dist/main';
|
||||
|
||||
class Example extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.grid}>
|
||||
{[1,2,3,4,5,6].map((item, i) => {
|
||||
return (
|
||||
<View key={i} style={{ ...styles.box, ...(item === 6 && styles.boxFull) }}>
|
||||
<Text style={{ fontSize: '2rem' }}>{item}</Text>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
<View style={{
|
||||
alignItems: 'center',
|
||||
borderWidth: '1px',
|
||||
justifyContent: 'center',
|
||||
marginTop: '10px',
|
||||
height: '200px'
|
||||
}}>
|
||||
<Text>This should be centered</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = {
|
||||
grid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap'
|
||||
},
|
||||
box: {
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'lightblue',
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
borderColor: 'blue',
|
||||
borderWidth: '5px'
|
||||
},
|
||||
boxFull: {
|
||||
width: '100%'
|
||||
}
|
||||
}
|
||||
|
||||
React.render(<Example />, document.getElementById('react-root'));
|
||||
@@ -1,6 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="dist/react-web-sdk.css">
|
||||
<link rel="stylesheet" href="../dist/react-web-sdk.css">
|
||||
<div id="react-root"></div>
|
||||
<script src="dist/example.js"></script>
|
||||
<script src="../dist/example.js"></script>
|
||||
19
example/webpack.config.js
Normal file
19
example/webpack.config.js
Normal file
@@ -0,0 +1,19 @@
|
||||
module.exports = {
|
||||
entry: {
|
||||
example: './example.js'
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'babel-loader',
|
||||
query: { cacheDirectory: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
output: {
|
||||
filename: 'example.js',
|
||||
path: '../dist'
|
||||
}
|
||||
};
|
||||
16
index.js
16
index.js
@@ -1,16 +0,0 @@
|
||||
import {getOtherProps, omitProps, pickProps} from './lib/filterObjectProps';
|
||||
import StylePropTypes from './lib/StylePropTypes';
|
||||
import Component from './lib/components/Component';
|
||||
import Image from './lib/components/Image';
|
||||
import Text from './lib/components/Text';
|
||||
import View from './lib/components/View';
|
||||
|
||||
export default {
|
||||
getOtherProps,
|
||||
pickProps,
|
||||
StylePropTypes,
|
||||
Component,
|
||||
Image,
|
||||
Text,
|
||||
View
|
||||
};
|
||||
29
package.json
29
package.json
@@ -2,18 +2,20 @@
|
||||
"name": "react-web-sdk",
|
||||
"version": "0.0.1",
|
||||
"description": "UI SDK based on react-native",
|
||||
"main": "index.js",
|
||||
"main": "dist/main.js",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"prebuild": "rm -rf ./dist",
|
||||
"build": "npm run build:package & npm run build:example",
|
||||
"build:example": "webpack index.js ./dist/main.js --config webpack.config.js",
|
||||
"build:example:watch": "npm run build:example -- --watch",
|
||||
"build:package": "webpack example.js ./dist/example.js --config webpack.config.js",
|
||||
"build:package:watch": "npm run build:package -- --watch",
|
||||
"build:watch": "npm run build:package:watch & npm run build:example:watch"
|
||||
"prebuild": "rm -rf ./dist && npm install",
|
||||
"build": "webpack --config webpack.config.js",
|
||||
"build:watch": "npm run build -- --watch",
|
||||
"build:example": "npm run build && cd example && webpack --config ./webpack.config.js",
|
||||
"build:example:watch": "npm run build:example -- --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^0.13.3"
|
||||
},
|
||||
"author": "Nicolas Gallagher",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"autoprefixer-core": "^5.2.0",
|
||||
"babel-core": "^5.5.6",
|
||||
@@ -26,7 +28,10 @@
|
||||
"style-loader": "^0.12.3",
|
||||
"webpack": "^1.9.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^0.13.3"
|
||||
"author": "Nicolas Gallagher",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/necolas/react-web-sdk.git"
|
||||
}
|
||||
}
|
||||
|
||||
17
src/index.js
Normal file
17
src/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import { getOtherProps, omitProps, pickProps } from './modules/filterObjectProps';
|
||||
import WebStyleComponent from './modules/WebStyleComponent';
|
||||
import StylePropTypes from './modules/StylePropTypes';
|
||||
import Image from './modules/Image';
|
||||
import Text from './modules/Text';
|
||||
import View from './modules/View';
|
||||
|
||||
export default {
|
||||
getOtherProps,
|
||||
omitProps,
|
||||
pickProps,
|
||||
StylePropTypes,
|
||||
WebStyleComponent,
|
||||
Image,
|
||||
Text,
|
||||
View
|
||||
};
|
||||
@@ -1,7 +1,7 @@
|
||||
import Component from './Component';
|
||||
import {pickProps} from '../filterObjectProps';
|
||||
import React, {PropTypes} from 'react';
|
||||
import { pickProps } from '../filterObjectProps';
|
||||
import StylePropTypes from '../StylePropTypes';
|
||||
import React, { PropTypes } from 'react';
|
||||
import WebStyleComponent from '../WebStyleComponent';
|
||||
|
||||
const ImageStyleDefaultProps = {
|
||||
backgroundColor: 'lightGray',
|
||||
@@ -43,7 +43,7 @@ class Image extends React.Component {
|
||||
const mergedStyle = { ...ImageStyleDefaultProps, ...filteredStyle };
|
||||
|
||||
return (
|
||||
<Component
|
||||
<WebStyleComponent
|
||||
{...other}
|
||||
alt={alt}
|
||||
className={`Image ${className}`}
|
||||
@@ -1,8 +1,8 @@
|
||||
import Component from './Component';
|
||||
import {pickProps} from '../filterObjectProps';
|
||||
import React, {PropTypes} from 'react';
|
||||
import { pickProps } from '../filterObjectProps';
|
||||
import { ViewStylePropTypes } from '../View';
|
||||
import StylePropTypes from '../StylePropTypes';
|
||||
import {ViewStylePropTypes} from './View';
|
||||
import React, { PropTypes } from 'react';
|
||||
import WebStyleComponent from '../WebStyleComponent';
|
||||
|
||||
const TextStyleDefaultProps = {
|
||||
alignItems: 'stretch', /* 1 */
|
||||
@@ -44,15 +44,14 @@ class Text extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className, element, style, ...other } = this.props;
|
||||
const { className, style, ...other } = this.props;
|
||||
const filteredStyle = pickProps(style, Object.keys(TextStylePropTypes));
|
||||
const mergedStyle = { ...TextStyleDefaultProps, ...filteredStyle };
|
||||
|
||||
return (
|
||||
<Component
|
||||
<WebStyleComponent
|
||||
{...other}
|
||||
className={`Text ${className}`}
|
||||
element={element}
|
||||
style={mergedStyle}
|
||||
/>
|
||||
);
|
||||
@@ -63,4 +62,4 @@ Text.propTypes = Text._getPropTypes();
|
||||
Text.defaultProps = Text._getDefaultProps();
|
||||
|
||||
export default Text;
|
||||
export {TextStylePropTypes};
|
||||
export { TextStylePropTypes };
|
||||
@@ -1,7 +1,7 @@
|
||||
import Component from './Component';
|
||||
import {pickProps} from '../filterObjectProps';
|
||||
import React, {PropTypes} from 'react';
|
||||
import { pickProps } from '../filterObjectProps';
|
||||
import StylePropTypes from '../StylePropTypes';
|
||||
import React, { PropTypes } from 'react';
|
||||
import WebStyleComponent from '../WebStyleComponent';
|
||||
|
||||
// https://github.com/facebook/css-layout#default-values
|
||||
const ViewStyleDefaultProps = {
|
||||
@@ -64,7 +64,7 @@ class View extends React.Component {
|
||||
};
|
||||
|
||||
return (
|
||||
<Component
|
||||
<WebStyleComponent
|
||||
{...other}
|
||||
className={`View ${className}`}
|
||||
element={element}
|
||||
@@ -78,4 +78,4 @@ View.propTypes = View._getPropTypes();
|
||||
View.defaultProps = View._getDefaultProps();
|
||||
|
||||
export default View;
|
||||
export {ViewStylePropTypes};
|
||||
export { ViewStylePropTypes };
|
||||
@@ -1,11 +1,8 @@
|
||||
import autoprefix from '../autoprefix';
|
||||
import {getOtherProps} from '../filterObjectProps';
|
||||
import autoprefix from './lib/autoprefix';
|
||||
import React, {PropTypes} from 'react';
|
||||
import styleMap from './lib/styleMap';
|
||||
|
||||
// styles
|
||||
import styleMap from '../styleMap';
|
||||
|
||||
class Component extends React.Component {
|
||||
class WebStyleComponent extends React.Component {
|
||||
static _getPropTypes() {
|
||||
return {
|
||||
className: PropTypes.string,
|
||||
@@ -24,12 +21,13 @@ class Component extends React.Component {
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const other = getOtherProps(this);
|
||||
const { element: Element, ...other } = this.props;
|
||||
const { classNames, inlineStyles } = this._separateClassNamesAndStyles();
|
||||
|
||||
return (
|
||||
<this.props.element
|
||||
<Element
|
||||
{...other}
|
||||
className={classNames.join(' ')}
|
||||
style={autoprefix(inlineStyles)}
|
||||
@@ -66,7 +64,7 @@ class Component extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
Component.propTypes = Component._getPropTypes();
|
||||
Component.defaultProps = Component._getDefaultProps();
|
||||
WebStyleComponent.propTypes = WebStyleComponent._getPropTypes();
|
||||
WebStyleComponent.defaultProps = WebStyleComponent._getDefaultProps();
|
||||
|
||||
export default Component;
|
||||
export default WebStyleComponent;
|
||||
@@ -1,8 +1,16 @@
|
||||
var autoprefixer = require('autoprefixer-core');
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
var localcss = require('postcss-modules-local-by-default');
|
||||
var webpack = require('webpack');
|
||||
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
main: './src/index'
|
||||
},
|
||||
externals: [{
|
||||
react: true
|
||||
}],
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
@@ -20,8 +28,22 @@ module.exports = {
|
||||
}
|
||||
]
|
||||
},
|
||||
output: {
|
||||
filename: 'main.js',
|
||||
library: 'ReactWebSDK',
|
||||
libraryTarget: 'commonjs2',
|
||||
path: './dist'
|
||||
},
|
||||
plugins: [
|
||||
new ExtractTextPlugin('react-web-sdk.css')
|
||||
new ExtractTextPlugin('react-web-sdk.css'),
|
||||
new UglifyJsPlugin({
|
||||
compress: {
|
||||
dead_code: true,
|
||||
drop_console: true,
|
||||
screw_ie8: true,
|
||||
warnings: true
|
||||
}
|
||||
})
|
||||
],
|
||||
postcss: [ autoprefixer ]
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user