rename js to jsx,fix prt

prt.js

@@ -15,7 +15,8 @@ function mapAndFormat(filePath) {
     const stat = fs.statSync(fullFIleName);
 
     const isDirectory = stat.isDirectory(fullFIleName);
-    const isJSFile = stat.isFile(fullFIleName) && (path.extname(fileName) === '.js');
+    const isJSFile = stat.isFile(fullFIleName) && 
+    (path.extname(fileName) === '.js' || path.extname(fileName) === '.jsx');
 
     if (isDirectory) {
       mapAndFormat(fullFIleName);

src/components/TabTItle.jsx

+import React from 'react';
+import styles from './TableTitle.module.scss';
+
+class TabTitle extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selected: false
+    };
+  }
+  toggleCurrentTab = () => {
+    this.setState({ selected: !this.state.selected });
+  };
+  render() {
+    const { title } = this.props;
+    return (
+      <div
+        className={this.state.selected ? styles.titleContentSelected : styles.titleContent}
+        onClick={this.toggleCurrentTab}
+      >
+        <span>{title}</span>
+      </div>
+    );
+  }
+}
+
+export default TabTitle;

src/components/TouchOpacity.jsx

+import * as React from 'react';
+
+// interface IProps {
+//   className?: string;
+//   onClick?: (ev: React.MouseEvent<HTMLDivElement>) => any;
+// }
+
+// type IState = Readonly<{
+//   style: React.CSSProperties;
+// }>;
+
+class TouchOpacity extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      style: {
+        opacity: 1
+      }
+    };
+    this.timer = null;
+  }
+
+  onClick = (ev) => {
+    const { onClick } = this.props;
+
+    ev.stopPropagation();
+
+    this.setState(
+      {
+        style: {
+          opacity: 0.5
+        }
+      },
+      () => {
+        this.timer = setTimeout(() => {
+          this.setState({
+            style: {
+              opacity: 1
+            }
+          });
+        }, 50);
+      }
+    );
+
+    if (onClick) {
+      onClick(ev);
+    }
+  };
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
+  render() {
+    const { children, onClick, ...otherProps } = this.props;
+    return (
+      <div {...otherProps} style={this.state.style} onClick={this.onClick}>
+        {children}
+      </div>
+    );
+  }
+}
+
+export default TouchOpacity;

src/pages/DoubleRecord.jsx

+import React from 'react';
+import { connect } from 'react-redux';
+
+const DoubleRecord = (props) => <div>双录页面</div>;
+
+const mapState = (state) => ({
+  count: state.count
+});
+const mapDispatch = ({ count: { add, double, addAsync, doubleAsync, addThenDoubleAsync } }) => ({
+  add: () => add(1),
+  double,
+  addAsync: () => addAsync(1),
+  doubleAsync,
+  addThenDoubleAsync: () => addThenDoubleAsync(1)
+});
+export default connect(mapState, mapDispatch)(DoubleRecord);

src/pages/InsuredInfo.jsx

+import React from 'react';
+import { Table, Divider } from 'antd';
+import 'antd/dist/antd.css';
+
+import styles from './InsuredInfo.module.scss';
+import TabTitle from '../components/TabTItle';
+import IconAIA from '../assets/aia-icon.jpg';
+
+import TouchOpacity from '../components/TouchOpacity'
+
+const data = [
+  {
+    key: '1',
+    plan: '天佑一生”五合一”疾病保险',
+    insured: '16516007',
+    invalidDate: '2020-02-01',
+    status: '付费期间',
+    amount: '18000'
+  },
+  {
+    key: '2',
+    plan: '附加惠添益恶性肿瘤疾病保险',
+    insured: '16516007',
+    invalidDate: '2020-02-01',
+    status: '付费期间',
+    amount: '9000'
+  }
+];
+
+const columns = [
+  {
+    title: '保险计划',
+    dataIndex: 'plan',
+    key: 'plan',
+    render: (text) => <span>{text}</span>
+  },
+  {
+    title: '被保险人',
+    dataIndex: 'insured',
+    key: 'insured'
+  },
+  {
+    title: '合同生效日',
+    dataIndex: 'invalidDate',
+    key: 'invalidDate'
+  },
+  {
+    title: '合同状态',
+    dataIndex: 'status',
+    key: 'status'
+  },
+  {
+    title: '基本保额',
+    dataIndex: 'amount',
+    key: 'amount'
+  },
+  {
+    title: '操作',
+    key: 'action',
+    render: (text, record) => (
+      <span className={styles.actText}>
+        <span>修改保额</span>
+        <Divider type="vertical" />
+        <span>删除</span>
+      </span>
+    )
+  }
+];
+
+export default function() {
+  return (
+    <div className={styles.page}>
+      <div className={styles.header}>
+        <img alt="logo" src={IconAIA} className={styles.headerImg} />
+        <TabTitle title={'客户信息'} />
+        <TabTitle title={'保单信息'} />
+        <TabTitle title={'借/领/退款'} />
+        <div>C161361507</div>
+      </div>
+      <div className={styles.headerExt}></div>
+      <div className={styles.main}>
+        <div className={styles.leftMenu}>
+          <div className={styles.leftMenuItem}>保障计划</div>
+          <div className={styles.leftMenuItem}>合同权益</div>
+          <div className={styles.leftMenuItem}>银行账户</div>
+        </div>
+        <div className={styles.content}>
+          <div>
+            <span className={styles.descText}>保费到期日: 2020年10月31日</span>
+            <span className={styles.descText}>支付方式:月付</span>
+          </div>
+          <div className={styles.btns}>
+            <TouchOpacity className={styles.btn}>增加附加合同</TouchOpacity>
+            <TouchOpacity className={styles.btn}>变更支付方式</TouchOpacity>
+            <TouchOpacity className={styles.btn}>复效/垫缴不足一期还款</TouchOpacity>
+            <TouchOpacity className={styles.btn}>智选康康产品转换</TouchOpacity>
+          </div>
+          <div className={styles.tableBox}>
+            <Table
+              columns={columns}
+              dataSource={data}
+              pagination={false}
+              rowClassName={styles.tableBox}
+            />
+          </div>
+        </div>
+      </div>
+      <div className={styles.footer}>
+        <TouchOpacity className={styles.footerBtn}>提交</TouchOpacity>
+      </div>
+    </div>
+  );
+}

src/pages/PolicyList.jsx

+import React from 'react';
+import { connect } from 'react-redux';
+
+const PolicyList = (props) => <div>保单信息</div>;
+
+const mapState = (state) => ({
+  count: state.count
+});
+const mapDispatch = ({ count: { add, double, addAsync, doubleAsync, addThenDoubleAsync } }) => ({
+  add: () => add(1),
+  double,
+  addAsync: () => addAsync(1),
+  doubleAsync,
+  addThenDoubleAsync: () => addThenDoubleAsync(1)
+});
+export default connect(mapState, mapDispatch)(PolicyList);