sync with react-script-antd

Author: WhatAKitty

config-overrides.js

@@ -6,12 +6,6 @@ module.exports = function override(config, env) {
   config = injectBabelPlugin('transform-decorators-legacy', config);
   config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
 
-  config.externals = {
-    "g2": "G2",
-    "g-cloud": "Cloud",
-    "g2-plugin-slider": "G2.Plugin.slider"
-  }
-
   return rewireLess.withLoaderOptions(
     `${env === 'production' ? 'app' : '[local]'}-[hash:base64:8]`,
     {

package.json

@@ -3,17 +3,21 @@
   "version": "0.3.1",
   "private": true,
   "dependencies": {
+    "@antv/data-set": "^0.8.3",
     "antd": "^3.0.3",
+    "bizcharts": "^3.1.0-beta.6",
+    "bizcharts-plugin-slider": "^2.0.1",
     "classnames": "^2.2.5",
     "dva": "^2.1.0",
     "enquire-js": "^0.1.1",
+    "fastclick": "^1.0.6",
     "history": "^4.7.2",
     "less": "^2.7.3",
     "lodash": "^4.17.4",
     "lodash-decorators": "^4.5.0",
-    "lodash.clonedeep": "^4.5.0",
     "moment": "^2.20.1",
     "numeral": "^2.0.6",
+    "omit.js": "^1.0.0",
     "postcss-less": "^1.1.3",
     "prop-types": "^15.6.0",
     "qs": "^6.5.1",
@@ -23,8 +27,7 @@
     "react-document-title": "^2.0.3",
     "react-dom": "^16.2.0",
     "react-fittext": "^1.0.0",
-    "react-scripts": "1.0.17",
-    "redbox-react": "^1.5.0"
+    "react-scripts": "1.0.17"
   },
   "scripts": {
     "start": "react-app-rewired start",

public/index.html

@@ -37,6 +37,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script src="https://gw.alipayobjects.com/as/g/??datavis/g2/2.3.12/index.js,datavis/g-cloud/1.0.2/index.js,datavis/g2-plugin-slider/1.2.1/slider.js"></script>
   </body>
 </html>

src/__mocks__/index.js

@@ -69,7 +69,7 @@ export default {
   'GET /api/tags': () => {
     return Mock.mock({
       'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }]
-    }).list;
+    });
   },
   'GET /api/fake_list': getFakeList,
   'GET /api/fake_chart_data': () => getFakeChartData,

src/common/menu.js

@@ -115,22 +115,16 @@ const menuData = [{
 }];
 
 function formatter(data, parentPath = '') {
-  const list = [];
-  data.forEach((item) => {
+  return data.map((item) => {
+    const result = {
+      ...item,
+      path: `${parentPath}${item.path}`,
+    };
     if (item.children) {
-      list.push({
-        ...item,
-        path: `${parentPath}${item.path}`,
-        children: formatter(item.children, `${parentPath}${item.path}/`),
-      });
-    } else {
-      list.push({
-        ...item,
-        path: `${parentPath}${item.path}`,
-      });
+      result.children = formatter(item.children, `${parentPath}${item.path}/`);
     }
+    return result;
   });
-  return list;
 }
 
 export const getMenuData = () => formatter(menuData);

src/common/router.js

@@ -9,12 +9,10 @@ const dynamicWrapper = (app, models, component) => dynamic({
   models: () => models.filter(m => !app._models.some(({ namespace }) => namespace === m)).map(m => import(`../models/${m}.js`)),
   // add routerData prop
   component: () => {
-    const p = component();
-    return new Promise((resolve, reject) => {
-      p.then((raw) => {
-        const Comp = raw.default || raw;
-        resolve(props => <Comp {...props} routerData={getRouterData(app)} />);
-      }).catch(err => reject(err));
+    const routerData = getRouterData(app);
+    return component().then((raw) => {
+      const Component = raw.default || raw;
+      return props => <Component {...props} routerData={routerData} />;
     });
   },
 });
@@ -54,6 +52,9 @@ export const getRouterData = (app) => {
     '/form/step-form': {
       component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm')),
     },
+    '/form/step-form/info': {
+      component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step1')),
+    },
     '/form/step-form/confirm': {
       component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step2')),
     },

src/components/ActiveChart/index.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 
 import { MiniArea } from '../Charts';
 import NumberInfo from '../NumberInfo';
@@ -14,16 +14,16 @@ function getActiveData() {
   for (let i = 0; i < 24; i += 1) {
     activeData.push({
       x: `${fixedZero(i)}:00`,
-      y: (i * 50) + (Math.floor(Math.random() * 200)),
+      y: Math.floor(Math.random() * 200) + (i * 50),
     });
   }
   return activeData;
 }
 
-export default class ActiveChart extends PureComponent {
+export default class ActiveChart extends Component {
   state = {
     activeData: getActiveData(),
-  }
+  };
 
   componentDidMount() {
     this.timer = setInterval(() => {
@@ -42,43 +42,40 @@ export default class ActiveChart extends PureComponent {
 
     return (
       <div className={styles.activeChart}>
-        <NumberInfo
-          subTitle="目标评估"
-          total="有望达到预期"
-        />
+        <NumberInfo subTitle="目标评估" total="有望达到预期" />
         <div style={{ marginTop: 32 }}>
           <MiniArea
             animate={false}
             line
             borderWidth={2}
             height={84}
+            scale={{
+              y: {
+                tickCount: 3,
+              },
+            }}
             yAxis={{
-              tickCount: 3,
               tickLine: false,
-              labels: false,
+              label: false,
               title: false,
               line: false,
             }}
             data={activeData}
           />
         </div>
-        {
-          activeData && (
-            <div className={styles.activeChartGrid}>
-              <p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p>
-              <p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p>
-            </div>
-          )
-        }
-        {
-          activeData && (
-            <div className={styles.activeChartLegend}>
-              <span>00:00</span>
-              <span>{activeData[Math.floor(activeData.length / 2)].x}</span>
-              <span>{activeData[activeData.length - 1].x}</span>
-            </div>
-          )
-        }
+        {activeData && (
+          <div className={styles.activeChartGrid}>
+            <p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p>
+            <p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p>
+          </div>
+        )}
+        {activeData && (
+          <div className={styles.activeChartLegend}>
+            <span>00:00</span>
+            <span>{activeData[Math.floor(activeData.length / 2)].x}</span>
+            <span>{activeData[activeData.length - 1].x}</span>
+          </div>
+        )}
       </div>
     );
   }

src/components/Charts/Bar/index.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 export interface BarProps {
   title: React.ReactNode;
   color?: string;
-  margin?: [number, number, number, number];
+  padding?: [number, number, number, number];
   height: number;
   data: Array<{
     x: string;