há 6 anos atrás · 07e9b9488c
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,28 @@
 
				+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
			
 
				+
			
 
				+# dependencies
			
 
				+/node_modules
			
 
				+/.pnp
			
 
				+.pnp.js
			
 
				+
			
 
				+# testing
			
 
				+/coverage
			
 
				+
			
 
				+# production
			
 
				+/build
			
 
				+
			
 
				+# misc
			
 
				+.DS_Store
			
 
				+.env.local
			
 
				+.env.development.local
			
 
				+.env.test.local
			
 
				+.env.production.local
			
 
				+
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+
			
 
				+yarn.lock*
			
 
				+.idea/
			
 
				+
			
 
				+Unexpected end of JSON input
			
--- a/dist/index.html
+++ b/dist/index.html
@@ -0,0 +1,12 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
			
 
				+    <title>Document</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="app"></div>
			
 
				+  <script type="text/javascript" src="main.js"></script></body>
			
 
				+</html>
			
--- a/dist/main.js
+++ b/dist/main.js
--- a/package.json
+++ b/package.json
@@ -0,0 +1,39 @@
 
				+{
			
 
				+  "name": "7-react-other",
			
 
				+  "version": "1.0.0",
			
 
				+  "description": "",
			
 
				+  "main": "index.js",
			
 
				+  "scripts": {
			
 
				+    "start": "webpack-dev-server --mode development --open",
			
 
				+    "build": "webpack --mode production"
			
 
				+  },
			
 
				+  "keywords": [],
			
 
				+  "author": "",
			
 
				+  "license": "ISC",
			
 
				+  "dependencies": {
			
 
				+    "antd": "^3.18.2",
			
 
				+    "moment": "^2.24.0",
			
 
				+    "react": "^16.8.6",
			
 
				+    "react-dom": "^16.8.6",
			
 
				+    "react-router-dom": "^5.0.0"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "babel-core": "^6.26.3",
			
 
				+    "babel-loader": "^7.1.5",
			
 
				+    "babel-plugin-import": "^1.11.2",
			
 
				+    "babel-preset-env": "^1.7.0",
			
 
				+    "babel-preset-react": "^6.24.1",
			
 
				+    "css-loader": "^2.1.1",
			
 
				+    "html-webpack-plugin": "^3.2.0",
			
 
				+    "less": "^3.9.0",
			
 
				+    "less-loader": "^5.0.0",
			
 
				+    "node-sass": "^4.12.0",
			
 
				+    "postcss-loader": "^3.0.0",
			
 
				+    "sass-loader": "^7.1.0",
			
 
				+    "sass-resources-loader": "^2.0.0",
			
 
				+    "style-loader": "^0.23.1",
			
 
				+    "webpack": "^4.31.0",
			
 
				+    "webpack-cli": "^3.3.2",
			
 
				+    "webpack-dev-server": "^3.4.1"
			
 
				+  }
			
 
				+}
			
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,66 @@
 
				+import * as React from 'react';
			
 
				+import { BrowserRouter as Router, Switch, Redirect, Route, Link } from 'react-router-dom';
			
 
				+import { Button, Row, Col,Pagination } from 'antd';
			
 
				+import './App.scss';
			
 
				+export default class App extends React.Component {
			
 
				+	constructor(props) {
			
 
				+		super(props);
			
 
				+		this.state = {
			
 
				+			name: '飞鼠',
			
 
				+			age: 18
			
 
				+		};
			
 
				+	}
			
 
				+
			
 
				+	heandleClick() {
			
 
				+		this.setState({
			
 
				+			age: this.state.age + 1
			
 
				+		});
			
 
				+	}
			
 
				+
			
 
				+	onValueChange() {
			
 
				+		this.setState({
			
 
				+			age: this.state.age + 1
			
 
				+		});
			
 
				+	}
			
 
				+
			
 
				+	render() {
			
 
				+		return (
			
 
				+			<div>
			
 
				+				<Row>
			
 
				+					<Pagination defaultCurrent={1} total={50} showSizeChanger />
			
 
				+				</Row>
			
 
				+				<Row>
			
 
				+					<Col span={12}>
			
 
				+						<h2>I am {this.state.name}</h2>
			
 
				+						<p>I am {this.state.age}</p>
			
 
				+						<div className="context">i am {this.state.name}</div>
			
 
				+						<Button
			
 
				+							onClick={e => {
			
 
				+								this.heandleClick(e);
			
 
				+							}}
			
 
				+						>
			
 
				+							加一岁
			
 
				+						</Button>
			
 
				+						<input
			
 
				+							type="text"
			
 
				+							onChange={e => {
			
 
				+								this.onValueChange(e);
			
 
				+							}}
			
 
				+						/>
			
 
				+					</Col>
			
 
				+				</Row>
			
 
				+				<Row>
			
 
				+					<Col span={12}>
			
 
				+						<div>
			
 
				+							<Button type="primary">Primary</Button>
			
 
				+							<Button>Default</Button>
			
 
				+							<Button type="dashed">Dashed</Button>
			
 
				+							<Button type="danger">Danger</Button>
			
 
				+							<Button type="link">Link</Button>
			
 
				+						</div>
			
 
				+					</Col>
			
 
				+				</Row>
			
 
				+			</div>
			
 
				+		);
			
 
				+	}
			
 
				+}
			
--- a/src/App.scss
+++ b/src/App.scss
@@ -0,0 +1,25 @@
 
				+* {
			
 
				+	padding: 0;
			
 
				+	margin: 0;
			
 
				+}
			
 
				+#app {
			
 
				+	padding: 0 15px;
			
 
				+	p {
			
 
				+		padding: 10px;
			
 
				+		// background-color: $h-font-color;
			
 
				+	}
			
 
				+
			
 
				+	.context {
			
 
				+		font-size: 40px;
			
 
				+		color: $h-font-color;
			
 
				+	}
			
 
				+
			
 
				+	button {
			
 
				+		// display: block;
			
 
				+		// margin: 0 auto;
			
 
				+		// font-size: 20px;
			
 
				+		// padding: 20px;
			
 
				+		// border-radius: 15px;
			
 
				+		// cursor: pointer;
			
 
				+	}
			
 
				+}
			
--- a/src/index.html
+++ b/src/index.html
@@ -0,0 +1,12 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
			
 
				+    <title>Document</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="app"></div>
			
 
				+  </body>
			
 
				+</html>
			
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -0,0 +1,16 @@
 
				+import React from 'react';
			
 
				+import ReactDOM from 'react-dom';
			
 
				+import { LocaleProvider } from 'antd';
			
 
				+import zh_CN from 'antd/lib/locale-provider/zh_CN';
			
 
				+import moment from 'moment';
			
 
				+// import 'moment/locale/en-us';
			
 
				+import App from './App.jsx';
			
 
				+
			
 
				+moment.locale('zh-cn');
			
 
				+
			
 
				+ReactDOM.render(
			
 
				+	<LocaleProvider locale={zh_CN}>
			
 
				+		<App />
			
 
				+	</LocaleProvider>,
			
 
				+	document.getElementById('app')
			
 
				+);
			
--- a/src/page/home/index.jsx
+++ b/src/page/home/index.jsx
@@ -0,0 +1,6 @@
 
				+import React from 'react';
			
 
				+export default class Home extends React.Component {
			
 
				+	render() {
			
 
				+		return <div>Home</div> ;
			
 
				+	}
			
 
				+}
			
--- a/src/page/home/localeProbider.jsx
+++ b/src/page/home/localeProbider.jsx
@@ -0,0 +1,151 @@
 
				+import {
			
 
				+  LocaleProvider,
			
 
				+  Pagination,
			
 
				+  DatePicker,
			
 
				+  TimePicker,
			
 
				+  Calendar,
			
 
				+  Popconfirm,
			
 
				+  Table,
			
 
				+  Modal,
			
 
				+  Button,
			
 
				+  Select,
			
 
				+  Transfer,
			
 
				+  Radio,
			
 
				+} from 'antd';
			
 
				+import zhCN from 'antd/lib/locale-provider/zh_CN';
			
 
				+import moment from 'moment';
			
 
				+import 'moment/locale/zh-cn';
			
 
				+
			
 
				+moment.locale('en');
			
 
				+
			
 
				+const Option = Select.Option;
			
 
				+const RangePicker = DatePicker.RangePicker;
			
 
				+
			
 
				+const columns = [
			
 
				+  {
			
 
				+    title: 'Name',
			
 
				+    dataIndex: 'name',
			
 
				+    filters: [
			
 
				+      {
			
 
				+        text: 'filter1',
			
 
				+        value: 'filter1',
			
 
				+      },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    title: 'Age',
			
 
				+    dataIndex: 'age',
			
 
				+  },
			
 
				+];
			
 
				+
			
 
				+class Page extends React.Component {
			
 
				+  state = {
			
 
				+    visible: false,
			
 
				+  };
			
 
				+
			
 
				+  showModal = () => {
			
 
				+    this.setState({ visible: true });
			
 
				+  };
			
 
				+
			
 
				+  hideModal = () => {
			
 
				+    this.setState({ visible: false });
			
 
				+  };
			
 
				+
			
 
				+  render() {
			
 
				+    const info = () => {
			
 
				+      Modal.info({
			
 
				+        title: 'some info',
			
 
				+        content: 'some info',
			
 
				+      });
			
 
				+    };
			
 
				+    const confirm = () => {
			
 
				+      Modal.confirm({
			
 
				+        title: 'some info',
			
 
				+        content: 'some info',
			
 
				+      });
			
 
				+    };
			
 
				+    return (
			
 
				+      <div className="locale-components">
			
 
				+        <div className="example">
			
 
				+          <Pagination defaultCurrent={1} total={50} showSizeChanger />
			
 
				+        </div>
			
 
				+        <div className="example">
			
 
				+          <Select showSearch style={{ width: 200 }}>
			
 
				+            <Option value="jack">jack</Option>
			
 
				+            <Option value="lucy">lucy</Option>
			
 
				+          </Select>
			
 
				+          <DatePicker />
			
 
				+          <TimePicker />
			
 
				+          <RangePicker style={{ width: 200 }} />
			
 
				+        </div>
			
 
				+        <div className="example">
			
 
				+          <Button type="primary" onClick={this.showModal}>
			
 
				+            Show Modal
			
 
				+          </Button>
			
 
				+          <Button onClick={info}>Show info</Button>
			
 
				+          <Button onClick={confirm}>Show confirm</Button>
			
 
				+          <Popconfirm title="Question?">
			
 
				+            <a href="#">Click to confirm</a>
			
 
				+          </Popconfirm>
			
 
				+        </div>
			
 
				+        <div className="example">
			
 
				+          <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
			
 
				+        </div>
			
 
				+        <div style={{ width: 319, border: '1px solid #d9d9d9', borderRadius: 4 }}>
			
 
				+          <Calendar fullscreen={false} value={moment()} />
			
 
				+        </div>
			
 
				+        <div className="example">
			
 
				+          <Table dataSource={[]} columns={columns} />
			
 
				+        </div>
			
 
				+        <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
			
 
				+          <p>Locale Modal</p>
			
 
				+        </Modal>
			
 
				+      </div>
			
 
				+    );
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+class App extends React.Component {
			
 
				+  constructor() {
			
 
				+    super();
			
 
				+    this.state = {
			
 
				+      locale: null,
			
 
				+    };
			
 
				+  }
			
 
				+
			
 
				+  changeLocale = e => {
			
 
				+    const localeValue = e.target.value;
			
 
				+    this.setState({ locale: localeValue });
			
 
				+    if (!localeValue) {
			
 
				+      moment.locale('en');
			
 
				+    } else {
			
 
				+      moment.locale('zh-cn');
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  render() {
			
 
				+    const { locale } = this.state;
			
 
				+    return (
			
 
				+      <div>
			
 
				+        <div className="change-locale">
			
 
				+          <span style={{ marginRight: 16 }}>Change locale of components: </span>
			
 
				+          <Radio.Group defaultValue={undefined} onChange={this.changeLocale}>
			
 
				+            <Radio.Button key="en" value={undefined}>
			
 
				+              English
			
 
				+            </Radio.Button>
			
 
				+            <Radio.Button key="cn" value={zhCN}>
			
 
				+              中文
			
 
				+            </Radio.Button>
			
 
				+          </Radio.Group>
			
 
				+        </div>
			
 
				+        <LocaleProvider locale={locale}>
			
 
				+          <Page
			
 
				+            key={locale ? locale.locale : 'en' /* Have to refresh for production environment */}
			
 
				+          />
			
 
				+        </LocaleProvider>
			
 
				+      </div>
			
 
				+    );
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+ReactDOM.render(<App />, mountNode);
			
--- a/src/style/resources.scss
+++ b/src/style/resources.scss
@@ -0,0 +1 @@
 
				+$h-font-color: red;
			
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,78 @@
 
				+const path = require('path');
			
 
				+const HtmlWebpackPlugin = require('html-webpack-plugin');
			
 
				+const htmlPlugin = new HtmlWebpackPlugin({
			
 
				+  template: './src/index.html',
			
 
				+  filename: './index.html'
			
 
				+});
			
 
				+module.exports = {
			
 
				+  entry: './src/index.jsx',
			
 
				+  resolve: {
			
 
				+    alias: {
			
 
				+      page: path.resolve(__dirname, 'src/page'),
			
 
				+      component: path.resolve(__dirname, 'src/component')
			
 
				+    }
			
 
				+  },
			
 
				+  module: {
			
 
				+    rules: [
			
 
				+      {
			
 
				+        test: /\.(js|jsx)$/,
			
 
				+        exclude: /node_module/,
			
 
				+        use: {
			
 
				+          loader: 'babel-loader',
			
 
				+          options: {
			
 
				+            presets: ['react', 'env'],
			
 
				+            cacheDirectory: true,
			
 
				+            plugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]]
			
 
				+          }
			
 
				+        }
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.css$/,
			
 
				+        loader: 'style-loader!css-loader'
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.(eot|woff|woff2|ttf)/,
			
 
				+        loader: 'url-loader?limit=30000&name=fonts/[hash:8].[name].[ext]'
			
 
				+      },
			
 
				+      // {
			
 
				+      //   test: /\.css$/,
			
 
				+      //   exclude: /node_module/,
			
 
				+      //   use: [
			
 
				+      //     {
			
 
				+      //       loader: 'style-loader'
			
 
				+      //     },
			
 
				+      //     {
			
 
				+      //       loader: 'css-loader',
			
 
				+      //       options: {
			
 
				+      //         modules: true,
			
 
				+      //         importLoaders: 1,
			
 
				+      //         sourceMap: true,
			
 
				+      //         localIdentName: '[path][name]__[local]--[hash:base64:5]'
			
 
				+      //       }
			
 
				+      //     }
			
 
				+      //   ]
			
 
				+      // },
			
 
				+      {
			
 
				+        test: /\.scss$/,
			
 
				+        use: [
			
 
				+          {
			
 
				+            loader: 'style-loader'
			
 
				+          },
			
 
				+          {
			
 
				+            loader: 'css-loader'
			
 
				+          },
			
 
				+          {
			
 
				+            loader: 'sass-loader'
			
 
				+          },
			
 
				+          {
			
 
				+            loader: 'sass-resources-loader',
			
 
				+            options: {
			
 
				+              resources: './src/style/resources.scss'
			
 
				+            }
			
 
				+          }
			
 
				+        ]
			
 
				+      }
			
 
				+    ]
			
 
				+  },
			
 
				+  plugins: [htmlPlugin]
			
 
				+};