storybook

.storybook/style.scss

@@ -15,4 +15,11 @@
   border: 0;
   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,79 +5,90 @@ import classnames from 'classnames'
 
 const re = /(https?|ftp):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/
 
-function ClosablePopup({
-                         title,
-                         content,
-                         className,
-                         closable = true,
-                         close = function () {
-                         },
-                         clickMaskClose = true,
-                         closeIcon = 'iconiconfront-2',
-                         afterClose = function () {
-                         },
-                         remove = function () {
-
-                         }
-                       } = {}) {
+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,
+    className,
+    closable = true,
+    close = function () {
+    },
+    clickMaskClose = true,
+    closeIcon = 'iconiconfront-2',
+    afterClose = function () {
+    },
+    remove = function () {
 
-  function unmountComponent() {
-    ReactDOM.unmountComponentAtNode(div)
-    if (div && div.parentNode) {
-      div.parentNode.removeChild(div)
     }
-  }
+}: Props  = {title: '标题', content: '内容'}) {
 
-  function _close() {
-    let _c = close()
-    if (_c && _c.then) {
-      _c.then(() => {
-        unmountComponent()
-        afterClose()
-      })
-    } else {
-      unmountComponent()
-      afterClose()
+    function unmountComponent() {
+        ReactDOM.unmountComponentAtNode(div)
+        if (div && div.parentNode) {
+            div.parentNode.removeChild(div)
+        }
     }
-  }
 
-  function clickMask() {
-    if (closable) {
-      return
+    function _close() {
+        let _c = close()
+        if (_c && _c.then) {
+            _c.then(() => {
+                unmountComponent()
+                afterClose()
+            })
+        } else {
+            unmountComponent()
+            afterClose()
+        }
     }
-    if (!clickMaskClose) {
-      return
+
+    function clickMask() {
+        if (closable) {
+            return
+        }
+        if (!clickMaskClose) {
+            return
+        }
+        _close()
     }
-    _close()
-  }
 
-  const closablePopup = (
-    <div className={'closable-popup-mask'} onClick={clickMask}>
-      <div className={classnames(['popup-container', className])}>
-        <div className="title">{title}</div>
-        <div className="content">
-          {content}
+    const closablePopup = (
+        <div className={'closable-popup-mask'} onClick={clickMask}>
+            <div className={classnames(['popup-container', className])}>
+                <div className="title">{title}</div>
+                <div className="content">
+                    {content}
+                </div>
+                {
+                    closable &&
+                    (re.test(closeIcon)
+                        ? <img src={closeIcon} alt="" className={'close-icon'} onClick={_close} />
+                        : <i className={`close iconfont ${closeIcon}`} onClick={_close} />)
+                }
+            </div>
         </div>
-        {
-          closable &&
-          (re.test(closeIcon)
-            ? <img src={closeIcon} alt="" className={'close-icon'} onClick={_close}/>
-            : <i className={`close iconfont ${closeIcon}`} onClick={_close}/>)
-        }
-      </div>
-    </div>
-  )
-  const div = document.createElement('div')
-  document.body.appendChild(div)
+    )
+    const div = document.createElement('div')
+    document.body.appendChild(div)
 
 
-  ReactDOM.render(closablePopup, div)
+    ReactDOM.render(closablePopup, div)
 
-  return {
-    close: _close,
-    remove: unmountComponent
-  }
+    return {
+        close: _close,
+        remove: unmountComponent
+    }
 }
 
-export default ClosablePopup
+export default ClosablePopup
\ No newline at end of file

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