storybook

.storybook/style.scss

@@ -16,3 +16,10 @@
   outline: 0;
   -webkit-appearance: none;
 }
+
+.screen {
+  position: relative;
+  width: 375px;
+  height: 667px;
+  background: #fff;
+}
\ No newline at end of file

package-lock.json

@@ -6322,6 +6322,11 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/classnames": {
+      "version": "2.2.10",
+      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.10.tgz",
+      "integrity": "sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ=="
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -8741,7 +8746,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": ""
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
         }
       }
     },
@@ -12196,7 +12202,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": ""
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
         }
       }
     },
@@ -21136,7 +21143,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": ""
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA=="
         }
       }
     },

package.json

@@ -11,6 +11,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "@types/classnames": "^2.2.10",
     "@types/jest": "^24.9.1",
     "@types/node": "^12.12.53",
     "@types/qs": "^6.9.4",

src/common/address/index.scss

+

src/common/address/index.tsx

+import React, {Component} from 'react'
+import './index.scss'
+import MaskCover from "../cover";
+
+interface PersonalInfo {
+    name: string
+    phone: string
+    address: string
+}
+
+interface Props extends PersonalInfo {
+    subtitle: string
+    title?: string
+    onSubmit?: () => PersonalInfo
+}
+
+class Address extends Component<Props> {
+    render() {
+        return <MaskCover>
+            <div className="address-container">
+                <div className="title"></div>
+                <div className="subtitle"></div>
+            </div>
+        </MaskCover>
+    }
+}
+
+export default Address

src/common/closable-popup/index.js → src/common/closable-popup/index.tsx

@@ -5,6 +5,18 @@ import classnames from 'classnames'
 
 const re = /(https?|ftp):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/
 
+interface Props {
+    title: string
+    content: React.ReactNode
+    closable?: boolean
+    className?: string
+    clickMaskClose?: boolean
+    close?: () => void | Promise<void>
+    closeIcon?: string
+    remove?: () => void
+    afterClose?: () => void
+}
+
 function ClosablePopup({
     title,
     content,
@@ -19,8 +31,7 @@ function ClosablePopup({
     remove = function () {
 
     }
-                       } = {}) {
-
+}: Props  = {title: '标题', content: '内容'}) {
 
     function unmountComponent() {
         ReactDOM.unmountComponentAtNode(div)
@@ -62,8 +73,8 @@ function ClosablePopup({
                 {
                     closable &&
                     (re.test(closeIcon)
-            ? <img src={closeIcon} alt="" className={'close-icon'} onClick={_close}/>
-            : <i className={`close iconfont ${closeIcon}`} onClick={_close}/>)
+                        ? <img src={closeIcon} alt="" className={'close-icon'} onClick={_close} />
+                        : <i className={`close iconfont ${closeIcon}`} onClick={_close} />)
                 }
             </div>
         </div>

src/common/cover/index.scss

+.mask-cover {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, .6);
+  z-index: 999;
+}
\ No newline at end of file

src/common/cover/index.tsx

+import React from 'react';
+import './index.scss'
+
+const MaskCover:React.FC = ({children}) => {
+    return (
+        <div className={'mask-cover'}>
+            {children}
+        </div>
+    );
+};
+
+export default MaskCover;
\ No newline at end of file