From 74b673e58ce549e0c9c3d9bc5433c044a29d220b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Fri, 12 Apr 2019 11:23:29 +0800
Subject: [PATCH] fix type error

---
 .../src/components/FooterToolbar/index.less   | 33 ++++++++++++
 .../src/components/FooterToolbar/index.tsx    | 53 +++++++++++++++++++
 AdvancedForm/src/index.tsx                    | 39 +++++++++++---
 3 files changed, 118 insertions(+), 7 deletions(-)
 create mode 100644 AdvancedForm/src/components/FooterToolbar/index.less
 create mode 100644 AdvancedForm/src/components/FooterToolbar/index.tsx

diff --git a/AdvancedForm/src/components/FooterToolbar/index.less b/AdvancedForm/src/components/FooterToolbar/index.less
new file mode 100644
index 00000000..5073cff6
--- /dev/null
+++ b/AdvancedForm/src/components/FooterToolbar/index.less
@@ -0,0 +1,33 @@
+@import '~antd/lib/style/themes/default.less';
+
+.toolbar {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 9;
+  width: 100%;
+  height: 56px;
+  padding: 0 24px;
+  line-height: 56px;
+  background: #fff;
+  border-top: 1px solid @border-color-split;
+  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
+
+  &::after {
+    display: block;
+    clear: both;
+    content: '';
+  }
+
+  .left {
+    float: left;
+  }
+
+  .right {
+    float: right;
+  }
+
+  button + button {
+    margin-left: 8px;
+  }
+}
diff --git a/AdvancedForm/src/components/FooterToolbar/index.tsx b/AdvancedForm/src/components/FooterToolbar/index.tsx
new file mode 100644
index 00000000..389e4c28
--- /dev/null
+++ b/AdvancedForm/src/components/FooterToolbar/index.tsx
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './index.less';
+
+export interface FooterToolbarProps {
+  extra?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export default class FooterToolbar extends Component<FooterToolbarProps> {
+  static contextTypes = {
+    isMobile: PropTypes.bool,
+  };
+
+  state = {
+    width: undefined,
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resizeFooterToolbar);
+    this.resizeFooterToolbar();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resizeFooterToolbar);
+  }
+
+  resizeFooterToolbar = () => {
+    const sider = document.querySelector('.ant-layout-sider') as HTMLDivElement;
+    if (sider == null) {
+      return;
+    }
+    const { isMobile } = this.context;
+    const width = isMobile ? null : `calc(100% - ${sider.style.width})`;
+    const { width: stateWidth } = this.state;
+    if (stateWidth !== width) {
+      this.setState({ width });
+    }
+  };
+
+  render() {
+    const { children, className, extra, ...restProps } = this.props;
+    const { width } = this.state;
+    return (
+      <div className={classNames(className, styles.toolbar)} style={{ width }} {...restProps}>
+        <div className={styles.left}>{extra}</div>
+        <div className={styles.right}>{children}</div>
+      </div>
+    );
+  }
+}
diff --git a/AdvancedForm/src/index.tsx b/AdvancedForm/src/index.tsx
index 5af69450..64719f2a 100644
--- a/AdvancedForm/src/index.tsx
+++ b/AdvancedForm/src/index.tsx
@@ -1,10 +1,23 @@
 import React, { Component } from 'react';
-import { Card, Form, Icon, Col, Row, DatePicker, TimePicker, Input, Select, Popover } from 'antd';
+import {
+  Card,
+  Form,
+  Icon,
+  Button,
+  Col,
+  Row,
+  DatePicker,
+  TimePicker,
+  Input,
+  Select,
+  Popover,
+} from 'antd';
 import { connect } from 'dva';
 import TableForm from './components/TableForm';
 import styles from './style.less';
 import { FormComponentProps } from 'antd/lib/form';
 import { Dispatch } from 'redux';
+import FooterToolbar from './components/FooterToolbar';
 
 const { Option } = Select;
 const { RangePicker } = DatePicker;
@@ -47,9 +60,10 @@ const tableData = [
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
   dispatch: Dispatch;
+  submitting: boolean;
 }
 
-@connect(({ loading }: { loading: { effects: any } }) => ({
+@connect(({ loading }: { loading: { effects: { [key: string]: boolean } } }) => ({
   submitting: loading.effects['BLOCK_NAME_CAMEL_CASE/submitAdvancedForm'],
 }))
 class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> {
@@ -99,7 +113,12 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
           content={errorList}
           overlayClassName={styles.errorPopover}
           trigger="click"
-          getPopupContainer={trigger => trigger && trigger.parentNode}
+          getPopupContainer={(trigger: HTMLElement) => {
+            if (trigger && trigger.parentNode) {
+              return trigger.parentNode as HTMLElement;
+            }
+            return trigger;
+          }}
         >
           <Icon type="exclamation-circle" />
         </Popover>
@@ -140,8 +159,9 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
   render() {
     const {
       form: { getFieldDecorator },
+      submitting,
     } = this.props;
-
+    const { width } = this.state;
     return (
       <>
         <Card title="仓库管理" className={styles.card} bordered={false}>
@@ -269,7 +289,12 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                     <TimePicker
                       placeholder="提醒时间"
                       style={{ width: '100%' }}
-                      getPopupContainer={trigger => trigger.ParentNode}
+                      getPopupContainer={trigger => {
+                        if (trigger && trigger.parentNode) {
+                          return trigger.parentNode as HTMLElement;
+                        }
+                        return trigger;
+                      }}
                     />
                   )}
                 </Form.Item>
@@ -294,12 +319,12 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
             initialValue: tableData,
           })(<TableForm />)}
         </Card>
-        {/* <FooterToolbar style={{ width }}>
+        <FooterToolbar style={{ width }}>
           {this.getErrorInfo()}
           <Button type="primary" onClick={this.validate} loading={submitting}>
             提交
           </Button>
-        </FooterToolbar> */}
+        </FooterToolbar>
       </>
     );
   }
-- 
GitLab