「update」update demo

chinesetian · Jul 5, 2017 · 31328bc · 31328bc
1 parent f223d8a
commit 31328bc
Show file tree

Hide file tree

Showing 16 changed files with 193 additions and 1,956 deletions.
diff --git a/README.md b/README.md
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
@@ -85,7 +85,7 @@ module.exports = {
     // https://github.com/facebookincubator/create-react-app/issues/290
     extensions: ['.ts', '.tsx', '.js', '.json', '.jsx'],
     alias: {
-      
+
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
@@ -141,6 +141,7 @@ module.exports = {
           /\.(js|jsx)(\?.*)?$/,
           /\.(ts|tsx)(\?.*)?$/,
           /\.css$/,
+          /\.less$/,
           /\.json$/,
           /\.bmp$/,
           /\.gif$/,
@@ -168,6 +169,42 @@ module.exports = {
         test: /\.(ts|tsx)$/,
         include: paths.appSrc,
         loader: require.resolve('ts-loader'),
+        options: {
+          plugins: [
+            ['import', [{ libraryName: 'antd', style: true }]],  // import less
+          ],
+        }
+      },
+      {
+        test: /\.less$/,
+        use: [
+          require.resolve('style-loader'),
+          require.resolve('css-loader'),
+          {
+            loader: require.resolve('postcss-loader'),
+            options: {
+              ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+              plugins: () => [
+                require('postcss-flexbugs-fixes'),
+                autoprefixer({
+                  browsers: [
+                    '>1%',
+                    'last 4 versions',
+                    'Firefox ESR',
+                    'not ie < 9', // React doesn't support IE8 anyway
+                  ],
+                  flexbox: 'no-2009',
+                }),
+              ],
+            },
+          },
+          {
+            loader: require.resolve('less-loader'),
+            options: {
+              modifyVars: { "@primary-color": "#000000" },
+            },
+          },
+        ],
       },
       // "postcss" loader applies autoprefixer to our CSS.
       // "css" loader resolves paths in CSS and adds assets as dependencies.
@@ -179,7 +216,7 @@ module.exports = {
         use: [
           require.resolve('style-loader'),
           {
-            loader: require.resolve('css-loader'),
+            loader: 'css-loader',
             options: {
               importLoaders: 1,
             },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-project",
-  "version": "0.1.0",
+  "name": "typescript_react_demo_2017",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@types/antd": "^1.0.0",
@@ -27,6 +27,7 @@
   "devDependencies": {
     "app-root-path": "^2.0.1",
     "autoprefixer": "7.1.0",
+    "babel-plugin-import": "^1.2.1",
     "case-sensitive-paths-webpack-plugin": "2.0.0",
     "chalk": "1.1.3",
     "cli-highlight": "1.1.4",

diff --git a/src/components/breadCrumb.tsx b/src/components/breadCrumb.tsx
@@ -30,9 +30,13 @@ function getList() {
             item.route.forEach((subitem: any, n: number) => {
                 if (window.location.pathname.indexOf(subitem.path) >= 0) {
                     arr.push(<Breadcrumb.Item key={i}>{item.name}</Breadcrumb.Item>);
-                    arr.push(<Breadcrumb.Item key={`${i}-${n}`}>
-                        <Link to={subitem.path} >{subitem.name}</Link>
-                    </Breadcrumb.Item>);
+                    arr.push(
+                        (
+                            <Breadcrumb.Item key={`${i}-${n}`}>
+                                <Link to={subitem.path} >{subitem.name}</Link>
+                            </Breadcrumb.Item>
+                        )
+                    );
                 }
             });
         }

diff --git a/src/enum/bannerManagerEnum.ts b/src/enum/bannerManagerEnum.ts
@@ -0,0 +1,5 @@
+// 刚升2.4新特性字符串枚举、编辑器报错但是其实是对的
+export enum publishText {
+    unpublish = '未发布',
+    publish = '已发布',
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -3,13 +3,11 @@ import {
     Route,
 } from 'react-router-dom';
 import App from './view/App';
-import Login from './view/Login';
 export default class Main extends React.Component<{}, {}> {
     render() {
         return (
             <div className="layout">
                 <Route path="/" component={App as any} />
-                <Route path="/login" component={Login} />
             </div>
         );
     }

diff --git a/src/moduleCss/common.css b/src/moduleCss/common.css
@@ -0,0 +1,6 @@
+.cr-red{
+    color: red;
+}
+.cr-blue{
+    color: blue;
+}
diff --git a/src/route/all.tsx b/src/route/all.tsx
@@ -7,5 +7,5 @@ const allRoutes = routes.reduce((acc: Array<object>, cur: any) => {
   } else {
     return acc.concat(cur);
   }
-}, [] as Array<object>);
+}, []);
 export default allRoutes;
diff --git a/src/route/index.tsx b/src/route/index.tsx
@@ -6,7 +6,7 @@ import Home from '../view/home';
 
 export class About extends React.Component<{}, null> {
     render() {
-        return <div><div>评分</div><Rate allowHalf defaultValue={2.5} /></div>;
+        return <div><div>评分</div><Rate allowHalf={true} defaultValue={2.5} /></div>;
     }
 }
 

diff --git a/src/view/App.tsx b/src/view/App.tsx
@@ -15,7 +15,7 @@ import { Layout } from 'antd';
 const { Content, Sider } = Layout;
 
 interface Mode {
-  mode: any;
+  mode: string;
   collapsed: boolean;
 }
 class App extends React.Component<any, Mode> {
@@ -58,7 +58,7 @@ class App extends React.Component<any, Mode> {
           <MenuComponent mode={this.state.mode} />
         </Sider>
         <Layout className="bg-white">
-          <HeaderComponent toggle={this.toggle.bind(this)} collapsed={this.state.collapsed} />
+          <HeaderComponent toggle={this.toggle} collapsed={this.state.collapsed} />
           <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: '100%' }}>
             <BreadCrumbComponent />
             <Switch>

diff --git a/src/view/FristStep.tsx b/src/view/FristStep.tsx
@@ -3,21 +3,21 @@ import { Radio } from 'antd';
 const RadioGroup = Radio.Group;
 
 interface FristStepProps {
-    changeFunc:any;
+    changeFunc: any;
 }
 
-export default class FristStep extends React.Component<FristStepProps, any>{
+export default class FristStep extends React.Component<FristStepProps, {}> {
     constructor(props: any) {
         super(props);
     }
     state = {
         value: 1,
-    }
-    onChange = (e:any) => {
+    };
+    onChange = (e: any) => {
         this.setState({
             value: e.target.value,
         });
-        this.props.changeFunc(e.target.value)
+        this.props.changeFunc(e.target.value);
     }
     render() {
         return (
@@ -35,6 +35,6 @@ export default class FristStep extends React.Component<FristStepProps, any>{
                     <Radio value={4}>楼盘四</Radio>
                 </div>
             </RadioGroup>
-        )
+        );
     }
 }
diff --git a/src/view/LastStep.tsx b/src/view/LastStep.tsx
@@ -1,27 +1,26 @@
 import * as React from 'react';
 import { Icon } from 'antd';
 
-export default class SecondStep extends React.Component<any, any>{
+export default class SecondStep extends React.Component<any, {}> {
     constructor(props: any) {
         super(props);
     }
-    render(){
-        console.log(this.props.estate.content)
+    render() {
         return (
             <div>
-                <div style={{fontSize:30,color:'red'}}><Icon type="check-circle" />推荐成功</div>
+                <div style={{ fontSize: 30, color: 'red' }}><Icon type="check-circle" />推荐成功</div>
                 <div>
                     推荐的楼盘为
-                    <span style={{fontSize:30,fontWeight:'bold'}}>{this.props.estate.id}</span>
+                    <span style={{ fontSize: 30, fontWeight: 'bold' }}>{this.props.estate.id}</span>
                     号楼盘
                     <div>
                         备注的内容:
-                        <div style={{fontSize:30,fontWeight:'bold'}}>
-                            {typeof this.props.estate.content === 'undefined'?'空':this.props.estate.content}
+                        <div style={{ fontSize: 30, fontWeight: 'bold' }}>
+                            {typeof this.props.estate.content === 'undefined' ? '空' : this.props.estate.content}
                         </div>
                     </div>
                 </div>
             </div>
-        )
+        );
     }
 }
diff --git a/src/view/SecondStep.tsx b/src/view/SecondStep.tsx
@@ -1,19 +1,29 @@
 import * as React from 'react';
 import { Input } from 'antd';
 
-export default class SecondStep extends React.Component<any, any>{
+export default class SecondStep extends React.Component<any, {}> {
     constructor(props: any) {
         super(props);
     }
-    render(){
+    render() {
         return (
             <div>
-                <div>{`您选择的是第`}<span style={{fontSize:30,fontWeight:'bold',}}>{this.props.estate.id}</span>{`个楼盘`}</div>
+                <div>
+                    {`您选择的是第`}
+                    <span style={{ fontSize: 30, fontWeight: 'bold', }}>{this.props.estate.id}</span>
+                    {`个楼盘`}
+                </div>
                 请填写备注信息：
                 <div>
-                    <Input type="textarea" onChange={this.props.setValue} style={{ maxWidth: '200px' }} placeholder="请输入备注信息" autosize />
+                    <Input
+                        type="textarea"
+                        onChange={this.props.setValue}
+                        style={{ maxWidth: '200px' }}
+                        placeholder="请输入备注信息"
+                        autosize={true}
+                    />
                 </div>
             </div>
-        )
+        );
     }
 }
diff --git a/src/view/bannerManager.tsx b/src/view/bannerManager.tsx
@@ -1,7 +1,11 @@
 import * as React from 'react';
-import { Table, Button, DatePicker, Select } from 'antd';
+import { Table, Button, DatePicker, Select, message } from 'antd';
 const { RangePicker } = DatePicker;
 const { Option } = Select;
+
+// 引入枚举
+import { publishText } from '../enum/bannerManagerEnum';
+
 import '../css/bannerManager.css';
 
 const columns = [{
@@ -26,6 +30,7 @@ for (let i = 0; i < 15; i++) {
 
 class BannerManager extends React.Component<{}, {}> {
     state = {
+        data: data,
         selectedRowKeys: [],  // Check here to configure the default column
         loading: false,
     };
@@ -43,45 +48,73 @@ class BannerManager extends React.Component<{}, {}> {
         console.log('selectedRowKeys changed: ', selectedRowKeys);
         this.setState({ selectedRowKeys });
     }
-
+    onPublish = (text: string) => {
+        this.setState({ loading: true });
+        let arr = this.state.selectedRowKeys;
+        arr.forEach(item => {
+            data.forEach((i: any) => {
+                if (i.key == item) {
+                    i.state = text
+                }
+            });
+        });
+        setTimeout(() => {
+            this.setState({ loading: false, data: data, selectedRowKeys: [] });
+            message.success(`操作成功`)
+        }, 1000);
+    }
+    handleAdd = () => {
+        const { data } = this.state;
+        let i = data.length + 1;
+        const newData = {
+            key: i,
+            sort: `${i}`,
+            state: '未发布',
+            title: `新数据的标题`,
+        };
+        this.setState({
+            data: [...data, newData],
+        });
+        message.success('新增成功')
+    }
     render() {
         const { selectedRowKeys } = this.state;
         const rowSelection = {
             selectedRowKeys,
             onChange: this.onSelectChange,
         };
         const onChange = (date: any, dateString: any) => {
-            console.log(date, dateString)
-        }
-        function handleChange(value:any) {
+            console.log(date, dateString);
+        };
+        function handleChange(value: any) {
             console.log(`selected ${value}`);
         }
         return (
             <div>
                 <div className="btn-group">
-                    <Button type="primary">新增</Button>
-                    <Button type="primary">发布</Button>
-                    <Button type="primary">撤销发布</Button>
+                    <Button type="primary" onClick={this.handleAdd}>新增</Button>
+                    <Button type="primary" onClick={this.onPublish.bind(this, publishText.publish)}>发布</Button>
+                    <Button type="primary" onClick={this.onPublish.bind(this, publishText.unpublish)}>撤销发布</Button>
                 </div>
                 <div className="margin-bottom">
                     <span className="filter-title">生效日期</span>
-                    <RangePicker style={{marginRight:10}} onChange={onChange} />
+                    <RangePicker style={{ marginRight: 10 }} onChange={onChange} />
                     <span className="filter-title">发布状态</span>
-                    <Select defaultValue="" style={{ width: 120,marginRight:10 }} onChange={handleChange}>
+                    <Select defaultValue="" style={{ width: 120, marginRight: 10 }} onChange={handleChange}>
                         <Option value="">全部</Option>
                         <Option value="0">未发布</Option>
                         <Option value="1">已发布</Option>
                     </Select>
                     <span className="filter-title">广告位</span>
-                    <Select defaultValue="" style={{ width: 120,marginRight:10 }} onChange={handleChange}>
+                    <Select defaultValue="" style={{ width: 120, marginRight: 10 }} onChange={handleChange}>
                         <Option value="">全部</Option>
                         <Option value="0">顶部</Option>
                         <Option value="1">底部</Option>
                     </Select>
                     <Button type="primary" icon="search">搜索</Button>
                 </div>
                 <div>
-                    <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
+                    <Table rowSelection={rowSelection} columns={columns} dataSource={this.state.data} loading={this.state.loading} />
                 </div>
             </div>
         );