From cbe7f0189272b34e4d27497695a69e8d40b86e19 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Fri, 13 Mar 2020 09:35:25 +0800
Subject: [PATCH 01/28] =?UTF-8?q?chore:packaga=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json |   3 +-
 yarn.lock    | 155 +++------------------------------------------------
 2 files changed, 9 insertions(+), 149 deletions(-)

diff --git a/package.json b/package.json
index 3c6d831c..2187bbb7 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,6 @@
     "@sinoui/ripple": "^1.0.10",
     "@sinoui/theme": "^1.0.0-beta.7",
     "classnames": "^2.2.6",
-    "jest-styled-components": "^7.0.0",
     "polished": "^3.4.4",
     "styled-components": "^4.4.1",
     "react-icons": "^3.9.0"
@@ -81,7 +80,7 @@
     "babel-loader": "^8.0.6",
     "husky": "^3.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest-styled-components": "^6.3.3",
+    "jest-styled-components": "^7.0.0",
     "lint-staged": "^9.5.0",
     "prettier": "^1.19.1",
     "react": "^16.12.0",
diff --git a/yarn.lock b/yarn.lock
index 7cc46192..6c2c6c00 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2393,11 +2393,6 @@ abab@^2.0.0:
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
   integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==
 
-abbrev@1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
-
 accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -4558,7 +4553,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.
   dependencies:
     ms "2.0.0"
 
-debug@^3.0.0, debug@^3.2.5, debug@^3.2.6:
+debug@^3.0.0, debug@^3.2.5:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -4599,11 +4594,6 @@ deep-equal@^1.1.1:
     object-keys "^1.1.1"
     regexp.prototype.flags "^1.2.0"
 
-deep-extend@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
-  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
-
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -4702,11 +4692,6 @@ destroy@~1.0.4:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
-detect-libc@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
-
 detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
@@ -5960,13 +5945,6 @@ fs-extra@^8.0.1, fs-extra@^8.1.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-minipass@^1.2.5:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
-  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
-  dependencies:
-    minipass "^2.6.0"
-
 fs-minipass@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
@@ -6576,7 +6554,7 @@ husky@^3.1.0:
     run-node "^1.0.0"
     slash "^3.0.0"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -6619,13 +6597,6 @@ iferr@^0.1.5:
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
   integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
 
-ignore-walk@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
-  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
-  dependencies:
-    minimatch "^3.0.4"
-
 ignore@^3.3.5:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
@@ -6737,7 +6708,7 @@ inherits@2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
-ini@^1.3.5, ini@~1.3.0:
+ini@^1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
   integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
@@ -8498,14 +8469,6 @@ minipass-pipeline@^1.2.2:
   dependencies:
     minipass "^3.0.0"
 
-minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
-  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
 minipass@^3.0.0, minipass@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.1.tgz#7607ce778472a185ad6d89082aa2070f79cedcd5"
@@ -8513,13 +8476,6 @@ minipass@^3.0.0, minipass@^3.1.1:
   dependencies:
     yallist "^4.0.0"
 
-minizlib@^1.2.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
-  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
-  dependencies:
-    minipass "^2.9.0"
-
 mississippi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
@@ -8623,15 +8579,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-needle@^2.2.1:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.3.3.tgz#a041ad1d04a871b0ebb666f40baaf1fb47867117"
-  integrity sha512-EkY0GeSq87rWp1hoq/sH/wnTWgFVhYlnIkbJ0YJFfRgEFlz2RraCjBpFQ+vrEgEdp0ThfyHADmkChEhcb7PKyw==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -8722,22 +8669,6 @@ node-notifier@^5.4.2:
     shellwords "^0.1.1"
     which "^1.3.0"
 
-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-releases@^1.1.29, node-releases@^1.1.50:
   version "1.1.51"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.51.tgz#70d0e054221343d2966006bfbd4d98622cc00bd0"
@@ -8745,14 +8676,6 @@ node-releases@^1.1.29, node-releases@^1.1.50:
   dependencies:
     semver "^6.3.0"
 
-nopt@^4.0.1:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
-  integrity sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==
-  dependencies:
-    abbrev "1"
-    osenv "^0.1.4"
-
 normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -8795,27 +8718,6 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
-npm-bundled@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
-  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
-  dependencies:
-    npm-normalize-package-bin "^1.0.1"
-
-npm-normalize-package-bin@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
-  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
-
-npm-packlist@^1.1.6:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
-  integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
-  dependencies:
-    ignore-walk "^3.0.1"
-    npm-bundled "^1.0.1"
-    npm-normalize-package-bin "^1.0.1"
-
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -8837,7 +8739,7 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
-npmlog@^4.0.2, npmlog@^4.1.2:
+npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -9049,24 +8951,11 @@ os-browserify@^0.3.0:
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
   integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
 
-os-homedir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
-  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
-
-os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
+os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-osenv@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
-  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
-  dependencies:
-    os-homedir "^1.0.0"
-    os-tmpdir "^1.0.0"
-
 p-each-series@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
@@ -10159,16 +10048,6 @@ raw-loader@^3.1.0:
     loader-utils "^1.1.0"
     schema-utils "^2.0.1"
 
-rc@^1.2.7:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
-  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
-  dependencies:
-    deep-extend "^0.6.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
 react-clientside-effect@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"
@@ -10788,7 +10667,7 @@ rimraf@2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3, rimraf@^2.7.1:
+rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.3, rimraf@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -11014,7 +10893,7 @@ semver-compare@^1.0.0:
   resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
   integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w=
 
-"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -11668,11 +11547,6 @@ strip-json-comments@^3.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
   integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
 
-strip-json-comments@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
-  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
-
 style-inject@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-inject/-/style-inject-0.3.0.tgz#d21c477affec91811cc82355832a700d22bf8dd3"
@@ -11814,19 +11688,6 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
-tar@^4.4.2:
-  version "4.4.13"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
-  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
-  dependencies:
-    chownr "^1.1.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.8.6"
-    minizlib "^1.2.1"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.3"
-
 telejson@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/telejson/-/telejson-3.3.0.tgz#6d814f3c0d254d5c4770085aad063e266b56ad03"
@@ -12757,7 +12618,7 @@ y18n@^4.0.0:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
   integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
-yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
+yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==

From efb822e3e83d8d1deaad9b17f2ca1b01b80ba69c Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Mon, 16 Mar 2020 17:27:38 +0800
Subject: [PATCH 02/28] =?UTF-8?q?chore:Dialog=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                        |   7 +-
 src/Dialog/Dialog.tsx               | 101 ++++++++++++
 src/Dialog/DialogWrapper.tsx        |  68 ++++++++
 src/Dialog/Iframe.tsx               |  22 +++
 src/Dialog/index.ts                 |   3 +
 src/DialogActions/DialogActions.tsx |  73 +++++++++
 src/DialogActions/index.ts          |   3 +
 src/DialogContent/DialogContent.tsx |  21 +++
 src/DialogContent/index.ts          |   3 +
 src/DialogTitle/DialogTitle.tsx     |  26 +++
 src/DialogTitle/index.ts            |   3 +
 src/Modal/Backdrop.tsx              |  60 +++++++
 src/Modal/Modal.tsx                 | 241 ++++++++++++++++++++++++++++
 src/Modal/ModalLayout.tsx           |  34 ++++
 src/Modal/index.ts                  |   3 +
 src/utils/createChainFunction.ts    |   9 ++
 stories/Dialog.stories.tsx          |  47 ++++++
 17 files changed, 722 insertions(+), 2 deletions(-)
 create mode 100644 src/Dialog/Dialog.tsx
 create mode 100644 src/Dialog/DialogWrapper.tsx
 create mode 100644 src/Dialog/Iframe.tsx
 create mode 100644 src/Dialog/index.ts
 create mode 100644 src/DialogActions/DialogActions.tsx
 create mode 100644 src/DialogActions/index.ts
 create mode 100644 src/DialogContent/DialogContent.tsx
 create mode 100644 src/DialogContent/index.ts
 create mode 100644 src/DialogTitle/DialogTitle.tsx
 create mode 100644 src/DialogTitle/index.ts
 create mode 100644 src/Modal/Backdrop.tsx
 create mode 100644 src/Modal/Modal.tsx
 create mode 100644 src/Modal/ModalLayout.tsx
 create mode 100644 src/Modal/index.ts
 create mode 100644 src/utils/createChainFunction.ts
 create mode 100644 stories/Dialog.stories.tsx

diff --git a/package.json b/package.json
index 2187bbb7..766b2aaa 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,9 @@
     "classnames": "^2.2.6",
     "polished": "^3.4.4",
     "styled-components": "^4.4.1",
-    "react-icons": "^3.9.0"
+    "react-icons": "^3.9.0",
+    "lodash": "^4.17.15",
+    "lodash-es": "^4.17.15"
   },
   "devDependencies": {
     "@babel/core": "^7.7.5",
@@ -89,7 +91,8 @@
     "react-test-renderer": "^16.12.0",
     "ts-lib-tools": "^0.10.1",
     "typescript": "^3.8.3",
-    "yarn-deduplicate": "^2.0.0"
+    "yarn-deduplicate": "^2.0.0",
+    "@types/lodash": "^4.14.149"
   },
   "publishConfig": {
     "access": "public"
diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
new file mode 100644
index 00000000..b0deb886
--- /dev/null
+++ b/src/Dialog/Dialog.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import styled from 'styled-components';
+import classNames from 'classnames';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogActions from '@sinoui/core/DialogActions';
+import Modal from '@sinoui/core/Modal';
+import DialogWrapper from './DialogWrapper';
+import Iframe from './Iframe';
+
+const ModalWrapper = styled(Modal)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export interface DialogProps {
+  /**
+   * iframe的定位方式
+   */
+  absolute?: boolean;
+  /**
+   * 子元素
+   */
+  children?: React.ReactNode;
+  /**
+   * 是否全屏显示
+   */
+  fullScreen?: boolean;
+  /**
+   * 对话框将根据 maxWidth 的值进行自我调整
+   */
+  fullWidth?: boolean;
+  /**
+   * 添加自定义类名
+   */
+  className?: string;
+  /**
+   * 最大宽度
+   */
+  autoWidth?: boolean;
+}
+
+/**
+ * 弹窗的根组件
+ */
+function Dialog(props: DialogProps) {
+  const {
+    children,
+    absolute,
+    fullScreen,
+    fullWidth,
+    className,
+    autoWidth,
+    backdropClick = true,
+    ...rest
+  } = props;
+
+  /**
+   * 获取Dialog子组件的排序号
+   *
+   * @param {Node} node
+   */
+  const getDialogNodeOrderNode = (node: React.ReactElement<any>) => {
+    switch (node.type) {
+      case DialogTitle:
+        return 0;
+      case DialogActions:
+        return 2;
+      default:
+        return 1;
+    }
+  };
+
+  const sortDialogChildren = (
+    node1: React.ReactElement<any>,
+    node2: React.ReactElement<any>,
+  ) => {
+    return getDialogNodeOrderNode(node1) - getDialogNodeOrderNode(node2);
+  };
+
+  const nodes = React.Children.toArray(children)
+    .filter(Boolean)
+    .sort(sortDialogChildren);
+
+  return (
+    <ModalWrapper {...rest} backdropClick={backdropClick}>
+      <DialogWrapper
+        fullScreen={fullScreen}
+        fullWidth={fullWidth}
+        className={classNames('sinoui-dialog', className)}
+        autoWidth={autoWidth}
+        {...props}
+      >
+        {nodes}
+        <Iframe frameBorder={0} scrolling="false" absolute={absolute} />
+      </DialogWrapper>
+    </ModalWrapper>
+  );
+}
+
+export default Dialog;
diff --git a/src/Dialog/DialogWrapper.tsx b/src/Dialog/DialogWrapper.tsx
new file mode 100644
index 00000000..b969df20
--- /dev/null
+++ b/src/Dialog/DialogWrapper.tsx
@@ -0,0 +1,68 @@
+import styled, { css } from 'styled-components';
+import { shadows } from '@sinoui/theme';
+
+export interface DialogWrapperProps {
+  /**
+   * 是否全屏显示
+   */
+  fullScreen?: boolean;
+  /**
+   * 对话框将根据 maxWidth 的值进行自我调整
+   */
+  fullWidth?: boolean;
+  autoWidth?: boolean;
+}
+
+/**
+ * 全屏模式
+ */
+const fullScreenStyle = css`
+  width: 100%;
+  height: 100%;
+  border-radius: 0px;
+`;
+
+/**
+ * 宽屏模式设置的宽度
+ */
+const fullWidthStyle = css`
+  width: 600px;
+`;
+
+/**
+ * 默认模式最大宽度
+ */
+const maxWidthStyle = css`
+  max-width: ${(props: DialogWrapperProps) =>
+    props.autoWidth ? '100%' : '600px'};
+`;
+
+/**
+ * 默认最大模式尺寸
+ */
+const defaultBigSizeStyle = css`
+  min-width: 300px;
+  ${(props: DialogWrapperProps) =>
+    props.fullWidth ? fullWidthStyle : maxWidthStyle};
+  max-height: 90vh;
+  min-height: 100px;
+  border-radius: 5px;
+`;
+
+/**
+ * 包裹整个弹窗的根组件
+ */
+const DialogWrapper = styled.div<DialogWrapperProps>`
+  background: ${(props) => props.theme.palette.background.paper};
+  padding: 0;
+  box-shadow: ${shadows[5]};
+  position: relative;
+  z-index: ${(props) => props.theme.zIndex.dialog};
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow-y: auto;
+  ${(props) => (props.fullScreen ? fullScreenStyle : defaultBigSizeStyle)};
+`;
+
+export default DialogWrapper;
diff --git a/src/Dialog/Iframe.tsx b/src/Dialog/Iframe.tsx
new file mode 100644
index 00000000..1d509322
--- /dev/null
+++ b/src/Dialog/Iframe.tsx
@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export interface Props {
+  absolute?: boolean;
+  scrolling?: any;
+}
+const Iframe = styled.iframe<Props>`
+  position: ${(props: Props) => (props.absolute ? 'absolute' : 'fixed')};
+  visibility: inherit;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  margin: 0px;
+  padding: 0px;
+  z-index: -1;
+  border-width: 0px;
+  /* height:2000px; */
+  filter: 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=70)';
+`;
+
+export default Iframe;
diff --git a/src/Dialog/index.ts b/src/Dialog/index.ts
new file mode 100644
index 00000000..d0a54d2e
--- /dev/null
+++ b/src/Dialog/index.ts
@@ -0,0 +1,3 @@
+import Dialog from './Dialog';
+
+export default Dialog;
diff --git a/src/DialogActions/DialogActions.tsx b/src/DialogActions/DialogActions.tsx
new file mode 100644
index 00000000..248c4b13
--- /dev/null
+++ b/src/DialogActions/DialogActions.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import classNames from 'classnames';
+
+const columnLayout = css`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin: 0px 8px 8px 0px;
+  & .sinoui-button {
+    margin: 0;
+  }
+`;
+
+const defaultLayout = css`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  & .sinoui-button {
+    margin: 8px 0;
+    margin-right: 8px;
+  }
+`;
+
+const DialogActionsWrapper = styled.div.attrs((className) => ({
+  className: classNames('sinoui-dialog-actions', className),
+}))<{ column?: boolean }>`
+  min-height: 52px;
+  flex: 0 0 auto;
+  ${(props) => (props.column ? columnLayout : defaultLayout)};
+  & .sinoui-button {
+    min-width: auto;
+    padding: 0px 8px;
+  }
+`;
+
+export interface Props {
+  /**
+   * 是否垂直显示
+   */
+  column?: boolean;
+  /**
+   * 子元素
+   */
+  children?: React.ReactNode | any;
+  /**
+   * 添加自定义类名
+   */
+  className?: string;
+}
+
+/**
+ * 弹窗按钮组件
+ */
+function DialogActions(props: Props) {
+  const { children } = props;
+  return (
+    <DialogActionsWrapper>
+      {React.Children.map(
+        children,
+        (child: React.ReactElement<{ color?: string }>) => {
+          return React.isValidElement(child)
+            ? React.cloneElement(child, {
+                color: child.props.color || 'primary',
+              })
+            : child;
+        },
+      )}
+    </DialogActionsWrapper>
+  );
+}
+
+export default DialogActions;
diff --git a/src/DialogActions/index.ts b/src/DialogActions/index.ts
new file mode 100644
index 00000000..79d9ed24
--- /dev/null
+++ b/src/DialogActions/index.ts
@@ -0,0 +1,3 @@
+import DialogActions from './DialogActions';
+
+export default DialogActions;
diff --git a/src/DialogContent/DialogContent.tsx b/src/DialogContent/DialogContent.tsx
new file mode 100644
index 00000000..0e30f30c
--- /dev/null
+++ b/src/DialogContent/DialogContent.tsx
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import classNames from 'classnames';
+import Typography from '@sinoui/core/Typography';
+import getColorFromTheme from '@sinoui/core/utils/getColorFromTheme';
+import DialogTitle from '@sinoui/core/DialogTitle';
+
+const DialogContent = styled(Typography).attrs((className) => ({
+  type: 'subtitle1',
+  className: classNames('sinoui-dialog-content', className),
+  color: 'textSecondary',
+}))`
+  padding: 24px 24px 24px 24px;
+  color: ${(props) => getColorFromTheme(props.theme, props.color)};
+  overflow-y: auto;
+  flex: 1 1 auto;
+  ${DialogTitle} ~ & {
+    padding-top: 0;
+  }
+`;
+
+export default DialogContent;
diff --git a/src/DialogContent/index.ts b/src/DialogContent/index.ts
new file mode 100644
index 00000000..4944657d
--- /dev/null
+++ b/src/DialogContent/index.ts
@@ -0,0 +1,3 @@
+import DialogContent from './DialogContent';
+
+export default DialogContent;
diff --git a/src/DialogTitle/DialogTitle.tsx b/src/DialogTitle/DialogTitle.tsx
new file mode 100644
index 00000000..298a9156
--- /dev/null
+++ b/src/DialogTitle/DialogTitle.tsx
@@ -0,0 +1,26 @@
+import styled, { css } from 'styled-components';
+import classNames from 'classnames';
+import Typography from '@sinoui/core/Typography';
+
+const flexStyle = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 16px;
+`;
+
+/**
+ * 弹窗标题组件
+ */
+const DialogTitle = styled(Typography).attrs(({ className }) => ({
+  type: 'H6',
+  className: classNames('sinoui-dialog-title', className),
+}))<{ showCloseIcon?: boolean }>`
+  margin: 0;
+  padding: 24px 24px 20px 24px;
+  flex: 0 0 auto;
+  user-select: none;
+  ${(props) => props.showCloseIcon && flexStyle};
+`;
+
+export default DialogTitle;
diff --git a/src/DialogTitle/index.ts b/src/DialogTitle/index.ts
new file mode 100644
index 00000000..e6eca932
--- /dev/null
+++ b/src/DialogTitle/index.ts
@@ -0,0 +1,3 @@
+import DialogTitle from './DialogTitle';
+
+export default DialogTitle;
diff --git a/src/Modal/Backdrop.tsx b/src/Modal/Backdrop.tsx
new file mode 100644
index 00000000..6d1fd74c
--- /dev/null
+++ b/src/Modal/Backdrop.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+// import Fade from '../transitions/Fade';
+
+export interface BackdropProps {
+  /**
+   * 是否显示
+   */
+  visible?: boolean;
+  /**
+   * 是否有open属性
+   */
+  open?: boolean;
+  /**
+   * transitionDuration
+   */
+  transitionDuration?: 'auto' | number;
+  /**
+   * 点击事件
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * 指定组件样式
+   */
+  style?: React.CSSProperties;
+  /**
+   * 指定组件样式类名
+   */
+  className?: string;
+}
+
+export interface StyledBackdropProps {
+  /**
+   * 是否显示
+   */
+  visible?: boolean;
+}
+
+const StyledBackdrop = styled.div.attrs({
+  'aria-hidden': true,
+  'data-testid': 'Backdrop',
+})<StyledBackdropProps>`
+  position: fixed;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: ${(props) =>
+    props.visible === false ? 'transparent' : 'rgba(0, 0, 0, 0.5)'};
+`;
+
+export default function Backdrop(props: BackdropProps) {
+  const { open, transitionDuration } = props;
+  return (
+    // <Fade appear in={open} timeout={transitionDuration} {...props}>
+    <StyledBackdrop />
+    // </Fade>
+  );
+}
diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx
new file mode 100644
index 00000000..a383a3ec
--- /dev/null
+++ b/src/Modal/Modal.tsx
@@ -0,0 +1,241 @@
+import React, {
+  useEffect,
+  useState,
+  useRef,
+  useCallback,
+  useMemo,
+} from 'react';
+import ReactDOM from 'react-dom';
+// import omit from 'lodash/omit';
+import Backdrop, { BackdropProps } from './Backdrop';
+import { createChainFunction } from '../utils/createChainFunction';
+import ModalLayout from './ModalLayout';
+
+let modalRoot: null | HTMLElement;
+
+/**
+ * 获取模态框的根元素
+ *
+ * @returns {HTMLElement} 返回模态框的根元素
+ */
+export function getModalRoot() {
+  if (!modalRoot) {
+    modalRoot = document.getElementById('SinouiModalRoot');
+    if (!modalRoot) {
+      modalRoot = document.createElement('div');
+      modalRoot.classList.add('sinoui-modal-root');
+      document.body.appendChild(modalRoot);
+    }
+  }
+  return modalRoot;
+}
+
+function getHasTransition(props: ModalPropsType) {
+  /* eslint no-prototype-builtins: 0 */
+  return props.children
+    ? React.Children.only(props.children).props.hasOwnProperty('in')
+    : false;
+}
+
+export interface ModalPropsType
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
+  /**
+   * 弹框显示的内容
+   *
+   * @type {React.Node}
+   */
+  children?: React.ReactElement;
+  /**
+   * 为true时打开Modal
+   *
+   * @type {boolean}
+   */
+  open?: boolean;
+  /**
+   * 为true时显示backdrop，为false时不显示backdrop。默认为true。
+   *
+   * @type {boolean}
+   */
+  backdrop?: boolean;
+  /**
+   * 为true时可以响应backdrop点击事件。
+   * 为false时表示不可响应backdrop点击事件，也就是说点击backdrop时不会引起modal的关闭。
+   * 默认为true。
+   *
+   * @type {boolean}
+   */
+  backdropClick?: boolean;
+  /**
+   * 给Backdrop指定的属性
+   */
+  BackdropProps?: BackdropProps;
+  /**
+   * backdrop被点击时的回调函数
+   *
+   * @type {(SyntheticMouseEvent<*>) => void}
+   */
+  onBackdropClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * Modal组件请求关闭时的回调函数。
+   *
+   * 回调函数签名：
+   *
+   * `function(event: object, reason: string) => void`
+   *
+   * * **event**: 事件源
+   * * **reason**: 引起关闭的原因。
+   * 'escapeKeyDown'表示按ESC键引起关闭，
+   * 'backdropClick'表示点击backdrop引起关闭。
+   *
+   */
+  onRequestClose?: (
+    event: React.MouseEvent<HTMLButtonElement>,
+    reason: string,
+  ) => void;
+  /**
+   * 监听动画变换结束事件
+   */
+  onTransitionExited?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * 是否启用固定布局
+   */
+  fixed?: boolean;
+  /**
+   * 是否全屏显示。`fixed=true`时有效
+   */
+  fullScreen?: boolean;
+  /**
+   * 指定css的z-index
+   */
+  zIndex?: number;
+  // 指定modal根节点容器
+  container?: HTMLElement;
+
+  innerRef?: React.Ref<HTMLDivElement>;
+}
+
+export interface ModalStateType {
+  exited?: boolean;
+}
+
+/**
+ * 模态框
+ */
+function Modal(props: ModalPropsType): any {
+  const {
+    open = true,
+    fixed = true,
+    BackdropProps: backdropProps = {},
+    backdrop = true,
+    backdropClick = true,
+    container = getModalRoot(),
+    onRequestClose,
+    onTransitionExited: onTransitionExitedProp,
+    children,
+    onBackdropClick: onBackdropClickProp,
+    ...rest
+  } = props;
+
+  const element = useMemo(() => document.createElement('div'), []);
+
+  const [exited, setExited] = useState(!open);
+  const elRef = useRef<HTMLDivElement>(element);
+  const openRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (elRef.current) {
+      container.appendChild(elRef.current);
+      elRef.current = element;
+    }
+
+    openRef.current = open;
+
+    return () => container.removeChild(elRef.current) as any;
+  }, [container, element, open]);
+
+  useEffect(() => {
+    if (open !== openRef.current) {
+      if (open) {
+        setExited(false);
+        openRef.current = open;
+      } else if (!getHasTransition(props)) {
+        setExited(true);
+      }
+    }
+  }, [open, props]);
+
+  const onBackdropClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+
+      if (!backdropClick) {
+        return;
+      }
+
+      if (onBackdropClickProp) {
+        onBackdropClickProp(event);
+      }
+
+      if (onRequestClose) {
+        onRequestClose(event, 'backdropClick');
+      }
+    },
+    [backdropClick, onBackdropClickProp, onRequestClose],
+  );
+
+  const onTransitionExited = useCallback(() => {
+    setExited(true);
+  }, []);
+
+  const onContainerClick = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      event.stopPropagation();
+    },
+    [],
+  );
+
+  const hasTransition = getHasTransition(props);
+  if (open === false && (!hasTransition || exited)) {
+    return null;
+  }
+  const childProps: {
+    onExited?: () => void;
+    in?: boolean;
+  } = {};
+
+  if (hasTransition) {
+    childProps.onExited = createChainFunction(
+      React.Children.only(children)?.props.onExited,
+      onTransitionExited,
+    );
+    if (!open) {
+      childProps.in = false;
+    }
+  }
+
+  const Container = fixed ? ModalLayout : 'div';
+
+  // const containerProps = fixed ? rest : omit(rest, ['fullScreen', 'zIndex']);
+  const containerProps = rest;
+
+  return ReactDOM.createPortal(
+    <Container
+      {...containerProps}
+      ref={props.innerRef}
+      onClick={onContainerClick}
+    >
+      {backdrop && (
+        <Backdrop {...backdropProps} onClick={onBackdropClick} open={open} />
+      )}
+      {React.cloneElement(React.Children.only(children) as any, childProps)}
+    </Container>,
+    elRef.current,
+  );
+}
+
+export default Modal;
diff --git a/src/Modal/ModalLayout.tsx b/src/Modal/ModalLayout.tsx
new file mode 100644
index 00000000..4aad6ff4
--- /dev/null
+++ b/src/Modal/ModalLayout.tsx
@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components';
+
+export interface ModalLayoutProps {
+  /**
+   * 是否全屏显示
+   */
+  fullScreen?: boolean;
+  /**
+   * 自定义zIndex值
+   */
+  zIndex?: number;
+}
+
+const fullScreenCss = css`
+  width: 100%;
+  height: 100%;
+`;
+
+/**
+ * Modal布局组件
+ */
+const ModalLayout = styled.div<ModalLayoutProps>`
+  ${(props) => props.fullScreen && fullScreenCss};
+  position: fixed;
+  display: flex;
+  top: 0;
+  left: 0;
+  z-index: ${(props) =>
+    typeof props.zIndex === 'number' ? props.zIndex : props.theme.zIndex.modal};
+  justify-content: center;
+  align-items: center;
+`;
+
+export default ModalLayout;
diff --git a/src/Modal/index.ts b/src/Modal/index.ts
new file mode 100644
index 00000000..8144af51
--- /dev/null
+++ b/src/Modal/index.ts
@@ -0,0 +1,3 @@
+import Modal from './Modal';
+
+export default Modal;
diff --git a/src/utils/createChainFunction.ts b/src/utils/createChainFunction.ts
new file mode 100644
index 00000000..f2f586a9
--- /dev/null
+++ b/src/utils/createChainFunction.ts
@@ -0,0 +1,9 @@
+/**
+ * 创建链式调用的函数
+ */
+export type FunctionType = (...args: any[]) => any;
+
+export function createChainFunction<T>(...funs: FunctionType[]) {
+  const filteredFuns = funs.filter((fun) => typeof fun === 'function');
+  return (...args: any[]) => filteredFuns.forEach((fun) => fun(...args));
+}
diff --git a/stories/Dialog.stories.tsx b/stories/Dialog.stories.tsx
new file mode 100644
index 00000000..c6fd15c3
--- /dev/null
+++ b/stories/Dialog.stories.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import Dialog from '@sinoui/core/Dialog';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogContent from '@sinoui/core/DialogContent';
+import DialogActions from '@sinoui/core/DialogActions';
+import Button from '@sinoui/core/Button';
+import StoryLayout from './StoryLayout';
+
+export default {
+  title: 'Dialog',
+};
+
+export const 弹窗 = () => (
+  <StoryLayout>
+    <Dialog>
+      <DialogTitle>标题</DialogTitle>
+      <DialogContent>内容</DialogContent>
+      <DialogActions>
+        <Button>取消</Button>
+        <Button>确定</Button>
+      </DialogActions>
+    </Dialog>
+  </StoryLayout>
+);
+
+function DialogDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>点击</Button>
+      <Dialog open={open} onBackdropClick={() => setOpen(false)}>
+        <DialogTitle>标题</DialogTitle>
+        <DialogContent>内容</DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>取消</Button>
+          <Button onClick={() => setOpen(false)}>确定</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+
+export const 弹窗2 = () => (
+  <StoryLayout>
+    <DialogDemo />
+  </StoryLayout>
+);

From 033a8f46ff4946728d00eff6c3a056f342862746 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Tue, 17 Mar 2020 09:24:05 +0800
Subject: [PATCH 03/28] =?UTF-8?q?chore:Dialog=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                              |  13 +-
 src/Dialog/Dialog.tsx                     |   6 +-
 src/DialogActions/DialogActions.tsx       |   6 +-
 src/Modal/Backdrop.tsx                    |   8 +-
 src/Modal/Modal.tsx                       |   5 +-
 src/Modal/index.ts                        |   3 +-
 src/transitions/Fade.tsx                  |  37 +++
 src/transitions/createStyleTransition.tsx | 298 ++++++++++++++++++++++
 src/transitions/transitionUtils.ts        |  59 +++++
 stories/Dialog.stories.tsx                |  28 +-
 yarn.lock                                 |  30 ++-
 11 files changed, 473 insertions(+), 20 deletions(-)
 create mode 100644 src/transitions/Fade.tsx
 create mode 100644 src/transitions/createStyleTransition.tsx
 create mode 100644 src/transitions/transitionUtils.ts

diff --git a/package.json b/package.json
index 766b2aaa..d7f78248 100644
--- a/package.json
+++ b/package.json
@@ -58,14 +58,16 @@
     "@sinoui/ripple": "^1.0.10",
     "@sinoui/theme": "^1.0.0-beta.7",
     "classnames": "^2.2.6",
+    "lodash": "^4.17.15",
+    "lodash-es": "^4.17.15",
     "polished": "^3.4.4",
-    "styled-components": "^4.4.1",
     "react-icons": "^3.9.0",
-    "lodash": "^4.17.15",
-    "lodash-es": "^4.17.15"
+    "react-transition-group": "^4.3.0",
+    "styled-components": "^4.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.7.5",
+    "@sinoui/icons": "^1.0.0-beta.1",
     "@storybook/addon-actions": "^5.2.8",
     "@storybook/addon-links": "^5.2.8",
     "@storybook/addons": "^5.2.8",
@@ -75,10 +77,10 @@
     "@testing-library/react-hooks": "^3.2.1",
     "@types/classnames": "^2.2.9",
     "@types/color": "^3.0.1",
+    "@types/lodash": "^4.14.149",
     "@types/react": "^16.9.15",
     "@types/react-dom": "^16.9.4",
     "@types/styled-components": "^4.4.0",
-    "@sinoui/icons": "^1.0.0-beta.1",
     "babel-loader": "^8.0.6",
     "husky": "^3.1.0",
     "identity-obj-proxy": "^3.0.0",
@@ -91,8 +93,7 @@
     "react-test-renderer": "^16.12.0",
     "ts-lib-tools": "^0.10.1",
     "typescript": "^3.8.3",
-    "yarn-deduplicate": "^2.0.0",
-    "@types/lodash": "^4.14.149"
+    "yarn-deduplicate": "^2.0.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index b0deb886..08b00d38 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import classNames from 'classnames';
 import DialogTitle from '@sinoui/core/DialogTitle';
 import DialogActions from '@sinoui/core/DialogActions';
-import Modal from '@sinoui/core/Modal';
+import Modal, { ModalPropsType } from '@sinoui/core/Modal';
 import DialogWrapper from './DialogWrapper';
 import Iframe from './Iframe';
 
@@ -38,6 +38,10 @@ export interface DialogProps {
    * 最大宽度
    */
   autoWidth?: boolean;
+  /**
+   * 为true时可以响应backdrop点击事件。
+   */
+  backdropClick?: boolean;
 }
 
 /**
diff --git a/src/DialogActions/DialogActions.tsx b/src/DialogActions/DialogActions.tsx
index 248c4b13..9d9fe0fb 100644
--- a/src/DialogActions/DialogActions.tsx
+++ b/src/DialogActions/DialogActions.tsx
@@ -22,7 +22,7 @@ const defaultLayout = css`
   }
 `;
 
-const DialogActionsWrapper = styled.div.attrs((className) => ({
+const DialogActionsWrapper = styled.div.attrs(({ className }) => ({
   className: classNames('sinoui-dialog-actions', className),
 }))<{ column?: boolean }>`
   min-height: 52px;
@@ -53,9 +53,9 @@ export interface Props {
  * 弹窗按钮组件
  */
 function DialogActions(props: Props) {
-  const { children } = props;
+  const { children, column } = props;
   return (
-    <DialogActionsWrapper>
+    <DialogActionsWrapper column={column}>
       {React.Children.map(
         children,
         (child: React.ReactElement<{ color?: string }>) => {
diff --git a/src/Modal/Backdrop.tsx b/src/Modal/Backdrop.tsx
index 6d1fd74c..a33996b2 100644
--- a/src/Modal/Backdrop.tsx
+++ b/src/Modal/Backdrop.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-// import Fade from '../transitions/Fade';
+import Fade from '../transitions/Fade';
 
 export interface BackdropProps {
   /**
@@ -53,8 +53,8 @@ const StyledBackdrop = styled.div.attrs({
 export default function Backdrop(props: BackdropProps) {
   const { open, transitionDuration } = props;
   return (
-    // <Fade appear in={open} timeout={transitionDuration} {...props}>
-    <StyledBackdrop />
-    // </Fade>
+    <Fade appear in={open} timeout={transitionDuration} {...props}>
+      <StyledBackdrop />
+    </Fade>
   );
 }
diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx
index a383a3ec..95888636 100644
--- a/src/Modal/Modal.tsx
+++ b/src/Modal/Modal.tsx
@@ -6,7 +6,7 @@ import React, {
   useMemo,
 } from 'react';
 import ReactDOM from 'react-dom';
-// import omit from 'lodash/omit';
+import omit from 'lodash/omit';
 import Backdrop, { BackdropProps } from './Backdrop';
 import { createChainFunction } from '../utils/createChainFunction';
 import ModalLayout from './ModalLayout';
@@ -220,8 +220,7 @@ function Modal(props: ModalPropsType): any {
 
   const Container = fixed ? ModalLayout : 'div';
 
-  // const containerProps = fixed ? rest : omit(rest, ['fullScreen', 'zIndex']);
-  const containerProps = rest;
+  const containerProps = fixed ? rest : omit(rest, ['fullScreen', 'zIndex']);
 
   return ReactDOM.createPortal(
     <Container
diff --git a/src/Modal/index.ts b/src/Modal/index.ts
index 8144af51..2c4973ce 100644
--- a/src/Modal/index.ts
+++ b/src/Modal/index.ts
@@ -1,3 +1,4 @@
-import Modal from './Modal';
+import Modal, { ModalPropsType } from './Modal';
 
+export { ModalPropsType };
 export default Modal;
diff --git a/src/transitions/Fade.tsx b/src/transitions/Fade.tsx
new file mode 100644
index 00000000..0576ec30
--- /dev/null
+++ b/src/transitions/Fade.tsx
@@ -0,0 +1,37 @@
+import createStyleTransition from './createStyleTransition';
+import { transitions } from '@sinoui/theme';
+
+const { duration, easing } = transitions;
+
+// 默认的过渡时长
+const TRANSITION_DURATION = {
+  enter: duration.enteringScreen,
+  exit: duration.leavingScreen,
+};
+
+/**
+ * 淡入淡出效果。内部使用
+ * [react-transition-group/CSSTransition](https://reactcommunity.org/react-transition-group/#CSSTransition)实现过渡效果。
+ */
+const Fade = createStyleTransition({
+  enterStyle: () => ({
+    opacity: 0,
+  }),
+  enterToStyle: () => ({
+    opacity: 1,
+  }),
+  exitStyle: () => ({
+    opacity: 1,
+  }),
+  exitToStyle: () => ({
+    opacity: 0,
+  }),
+  transitionProps: ['opacity'],
+  duration: TRANSITION_DURATION,
+  easing: {
+    enter: easing.easeInOut,
+    exit: easing.easeInOut,
+  },
+});
+
+export default Fade;
diff --git a/src/transitions/createStyleTransition.tsx b/src/transitions/createStyleTransition.tsx
new file mode 100644
index 00000000..6348f389
--- /dev/null
+++ b/src/transitions/createStyleTransition.tsx
@@ -0,0 +1,298 @@
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { transitions } from '@sinoui/theme';
+import { getDuration, getEasing } from './transitionUtils';
+
+export interface StyleTransitionPropsType {
+  appear?: boolean;
+  in?: boolean;
+  /**
+   * 过渡效果的方向
+   *
+   * @type {('left' | 'right')}
+   */
+  direction?: 'left' | 'right' | 'up' | 'down';
+  /**
+   * 子节点
+   *
+   * @type {Node}
+   */
+  children?: React.ReactNode;
+  /**
+   * 过渡时长。'auto'表示会根据元素高度自动计算过渡时长
+   *
+   * @type {(number
+   *     | {
+   *         enter: number,
+   *         exit: number,
+   *       })}
+   */
+  timeout?:
+    | 'auto'
+    | number
+    | {
+        enter: number;
+        exit: number;
+      };
+  /**
+   * 指定过渡时应用的css类名。
+   */
+  transitionClasses?:
+    | string
+    | {
+        appear?: string;
+        appearActive?: string;
+        enter?: string;
+        enterActive?: string;
+        exit?: string;
+        exitActive?: string;
+      };
+  easing?: string;
+  onEnter?: (node: HTMLElement, isAccept: boolean) => void;
+  onEntering?: (node: HTMLElement, isAccept: boolean) => void;
+  onEntered?: (node: HTMLElement, isAccept: boolean) => void;
+  onExit?: (node: HTMLElement) => void;
+  onExiting?: (node: HTMLElement) => void;
+  onExited?: (node: HTMLElement) => void;
+}
+
+export interface StyleTransitionOptions {
+  enterStyle: (
+    transition: TransitionInterface,
+    node: HTMLElement,
+    isAppearing: boolean,
+  ) => React.CSSProperties;
+  enterActiveStyle?: (
+    transition: TransitionInterface,
+    node: HTMLElement,
+    isAppearing: boolean,
+  ) => React.CSSProperties;
+  enterToStyle: (
+    transition: TransitionInterface,
+    node: HTMLElement,
+    isAppearing: boolean,
+  ) => React.CSSProperties;
+  exitStyle: (
+    transition: TransitionInterface,
+    node: HTMLElement,
+  ) => React.CSSProperties;
+  exitActiveStyle?: (
+    transition: TransitionInterface,
+    node: HTMLElement,
+  ) => React.CSSProperties;
+  exitToStyle: (
+    transition: TransitionInterface,
+    node: HTMLElement,
+  ) => React.CSSProperties;
+  transitionProps?: string[];
+  duration?: {
+    enter: number;
+    exit: number;
+  };
+  easing?: {
+    enter: string;
+    exit: string;
+  };
+}
+
+export interface TransitionInterface {
+  props: StyleTransitionPropsType;
+  getTimeout: (
+    e: HTMLElement,
+  ) => {
+    enter: number;
+    exit: number;
+  };
+}
+
+/**
+ * 创建通过css样式定义过渡效果的过渡组件。
+ *
+ * 元素入场过渡： 先应用`enterStyle`，一帧（16ms）之后，应用`enterActiveStyle`和`enterToStyle`。
+ *
+ * 元素出场过渡： 先应用`exitStyle`，一帧（16ms）之后，应用`exitActiveStyle`和`enterToStyle`。
+ *
+ */
+export default function createStyleTransition<Props extends {}>(
+  options: StyleTransitionOptions,
+  defaultProps?: Props & StyleTransitionPropsType,
+): React.ComponentType<Props & StyleTransitionPropsType> {
+  return class StyleTransition
+    extends React.Component<Props & StyleTransitionPropsType>
+    implements TransitionInterface {
+    public static defaultProps = defaultProps;
+
+    constructor(props: Props & StyleTransitionPropsType) {
+      super(props);
+
+      this.handleEnter = this.handleEnter.bind(this);
+      this.handleEntering = this.handleEntering.bind(this);
+      this.handleExit = this.handleExit.bind(this);
+      this.handleExiting = this.handleExiting.bind(this);
+      this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+    }
+
+    get easing(): {
+      enter: string;
+      exit: string;
+    } {
+      return getEasing(this.props.easing, options.easing);
+    }
+
+    public getTimeout(
+      node: HTMLElement,
+    ): {
+      enter: number;
+      exit: number;
+    } {
+      const timeout:
+        | 'auto'
+        | number
+        | {
+            enter: number;
+            exit: number;
+          } = this.props.timeout || options.duration;
+      if (timeout === 'auto') {
+        const duration = transitions.getAutoHeightDuration(node.clientHeight);
+        return {
+          enter: duration,
+          exit: duration,
+        };
+      }
+      return getDuration(timeout, options.duration);
+    }
+
+    /**
+     * 处理过渡的enter事件
+     *
+     * @param {HTMLElement} node 应用过渡效果的节点
+     * @param {boolean} isAppearing 表示是否是刚创建节点时机。
+     *  如果`HorizontalSlide`组件设置了`appear`属性，则会在刚创建节点时，
+     *  调用此方法，且isAppearing为true；否则不会调用此方法。
+     */
+    public handleEnter(node: HTMLElement, isAppearing: boolean) {
+      if (this.props.onEnter) {
+        this.props.onEnter(node, isAppearing);
+      }
+
+      const enterStyle = {
+        transition: 'none',
+        ...options.enterStyle(this, node, isAppearing),
+      };
+      Object.assign(node.style, enterStyle);
+    }
+
+    /**
+     * 处理过渡的entering事件
+     *
+     * @param {HTMLElement} node 应用过渡效果的节点
+     * @param {boolean} isAppearing 表示是否是刚创建节点时机。
+     *  如果`HorizontalSlide`组件设置了`appear`属性，则会在刚创建节点时，
+     *  调用此方法，且isAppearing为true；否则不会调用此方法。
+     */
+    public handleEntering(node: HTMLElement, isAppearing: boolean) {
+      const activeStyle = options.enterActiveStyle
+        ? options.enterActiveStyle(this, node, isAppearing)
+        : {};
+      if (!activeStyle.transition) {
+        activeStyle.transition = transitions.create(options.transitionProps, {
+          duration: this.getTimeout(node).enter,
+          easing: this.easing.enter,
+        });
+      }
+
+      const enterActiveStyle = {
+        ...activeStyle,
+        ...options.enterToStyle(this, node, isAppearing),
+      };
+
+      Object.assign(node.style, enterActiveStyle);
+
+      if (this.props.onEntering) {
+        this.props.onEntering(node, isAppearing);
+      }
+    }
+
+    /**
+     * 处理过渡的exit事件
+     *
+     * @param {HTMLElement} node 应用过渡效果的节点
+     * @param {boolean} isAppearing 表示是否是刚创建节点时机。
+     *  如果`HorizontalSlide`组件设置了`appear`属性，则会在刚创建节点时，
+     *  调用此方法，且isAppearing为true；否则不会调用此方法。
+     */
+    public handleExit(node: HTMLElement) {
+      const exitStyle = {
+        transition: 'none',
+        ...options.exitStyle(this, node),
+      };
+
+      Object.assign(node.style, exitStyle);
+
+      if (this.props.onExit) {
+        this.props.onExit(node);
+      }
+    }
+
+    /**
+     * 处理过渡的exiting事件
+     *
+     * @param {HTMLElement} node 应用过渡效果的节点
+     */
+    public handleExiting(node: HTMLElement) {
+      const exitActiveStyle = options.exitActiveStyle
+        ? options.exitActiveStyle(this, node)
+        : {};
+      if (!exitActiveStyle.transition) {
+        exitActiveStyle.transition = transitions.create(
+          options.transitionProps,
+          {
+            duration: this.getTimeout(node).exit,
+            easing: this.easing.exit,
+          },
+        );
+      }
+      const style = {
+        ...exitActiveStyle,
+        ...options.exitToStyle(this, node),
+      };
+
+      Object.assign(node.style, style);
+
+      if (this.props.onExiting) {
+        this.props.onExiting(node);
+      }
+    }
+
+    /**
+     * 过渡结束监听器。
+     *
+     * @param {HTMLElement} node 过渡元素
+     * @param {() => void} next 通知`Transition`组件过渡结束的方法。
+     */
+    public handleTransitionEnd(node: HTMLElement, next: () => void) {
+      if (this.props.timeout === 'auto') {
+        setTimeout(next, this.getTimeout(node).enter);
+      }
+    }
+
+    public render() {
+      const { transitionClasses, direction, timeout, ...props } = this
+        .props as StyleTransitionPropsType;
+      return (
+        <CSSTransition
+          {...props}
+          onEnter={this.handleEnter}
+          onEntering={this.handleEntering}
+          onExit={this.handleExit}
+          onExiting={this.handleExiting}
+          timeout={
+            timeout === 'auto' ? null : getDuration(timeout, options.duration)
+          }
+          classNames={transitionClasses || ''}
+          addEndListener={this.handleTransitionEnd}
+        />
+      );
+    }
+  };
+}
diff --git a/src/transitions/transitionUtils.ts b/src/transitions/transitionUtils.ts
new file mode 100644
index 00000000..4e036c95
--- /dev/null
+++ b/src/transitions/transitionUtils.ts
@@ -0,0 +1,59 @@
+export interface TransitionTimeout {
+  enter: number;
+  exit: number;
+}
+
+export interface TransitionEasing {
+  enter: string;
+  exit: string;
+}
+
+/**
+ * 获取过渡时长
+ *
+ * @param {(number | {
+ *  enter: number,
+ *   exit: number,
+ * })} timeout
+ * @param {({
+ *   enter: number,
+ *   exit: number,
+ * })} defaultTimeout
+ */
+export function getDuration(
+  timeout?: number | TransitionTimeout,
+  defaultTimeout?: TransitionTimeout,
+): TransitionTimeout {
+  if (!timeout) {
+    return defaultTimeout;
+  }
+  if (typeof timeout === 'number') {
+    return {
+      enter: timeout,
+      exit: timeout,
+    };
+  }
+  return timeout;
+}
+
+/**
+ * 获取过渡效果的缓动函数
+ *
+ * @param {(string | TransitionEasing)} easing
+ * @param {TransitionEasing} defaultEasing
+ */
+export function getEasing(
+  easing?: string | TransitionEasing,
+  defaultEasing?: TransitionEasing,
+): TransitionEasing {
+  if (!easing) {
+    return defaultEasing;
+  }
+  if (typeof easing === 'string') {
+    return {
+      enter: easing,
+      exit: easing,
+    };
+  }
+  return easing;
+}
diff --git a/stories/Dialog.stories.tsx b/stories/Dialog.stories.tsx
index c6fd15c3..f7c17744 100644
--- a/stories/Dialog.stories.tsx
+++ b/stories/Dialog.stories.tsx
@@ -28,7 +28,7 @@ function DialogDemo() {
   return (
     <>
       <Button onClick={() => setOpen(true)}>点击</Button>
-      <Dialog open={open} onBackdropClick={() => setOpen(false)}>
+      <Dialog open={open} onBackdropClick={() => console.log(1)}>
         <DialogTitle>标题</DialogTitle>
         <DialogContent>内容</DialogContent>
         <DialogActions>
@@ -45,3 +45,29 @@ export const 弹窗2 = () => (
     <DialogDemo />
   </StoryLayout>
 );
+
+export const 不显示遮罩层 = () => (
+  <StoryLayout>
+    <Dialog backdrop={false}>
+      <DialogTitle>标题</DialogTitle>
+      <DialogContent>内容</DialogContent>
+      <DialogActions>
+        <Button>取消</Button>
+        <Button>确定</Button>
+      </DialogActions>
+    </Dialog>
+  </StoryLayout>
+);
+
+export const 按钮垂直显示 = () => (
+  <StoryLayout>
+    <Dialog>
+      <DialogTitle>标题</DialogTitle>
+      <DialogContent>内容</DialogContent>
+      <DialogActions column>
+        <Button>取消</Button>
+        <Button>确定</Button>
+      </DialogActions>
+    </Dialog>
+  </StoryLayout>
+);
diff --git a/yarn.lock b/yarn.lock
index 6c2c6c00..750dd895 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2016,6 +2016,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash@^4.14.149":
+  version "4.14.149"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.149.tgz#1342d63d948c6062838fbf961012f74d4e638440"
+  integrity sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -4502,7 +4507,7 @@ cssstyle@^1.0.0:
   dependencies:
     cssom "0.3.x"
 
-csstype@^2.2.0, csstype@^2.5.7:
+csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.7:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
   integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==
@@ -4788,6 +4793,14 @@ dom-helpers@^3.4.0:
   dependencies:
     "@babel/runtime" "^7.1.2"
 
+dom-helpers@^5.0.1:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.3.tgz#7233248eb3a2d1f74aafca31e52c5299cc8ce821"
+  integrity sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    csstype "^2.6.7"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -8069,6 +8082,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
+
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
@@ -10258,6 +10276,16 @@ react-textarea-autosize@^7.1.0:
     "@babel/runtime" "^7.1.2"
     prop-types "^15.6.0"
 
+react-transition-group@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
+  integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^16.12.0, react@^16.8.3:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"

From 02e5d71bdba9f44a18cd297d992fa599e32dad17 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Wed, 18 Mar 2020 18:42:34 +0800
Subject: [PATCH 04/28] =?UTF-8?q?chore:Dialog=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                         |   5 +-
 docs/docs/components-apis/dialog.mdx          |  88 ++++++
 .../components/dialog-demos/DialogDemo.tsx    |  31 +++
 docs/docs/components/dialog.mdx               | 253 ++++++++++++++++++
 docs/sidebars.js                              |  32 +--
 package.json                                  |   5 +-
 src/Dialog/CloseIcon.tsx                      |  42 +++
 src/Dialog/Dialog.test.tsx                    | 200 ++++++++++++++
 src/Dialog/Dialog.tsx                         | 103 +++----
 src/Dialog/DialogContainer.tsx                | 147 ++++++++++
 src/Dialog/DialogWrapper.tsx                  |   4 +-
 src/Dialog/__snapshots__/Dialog.test.tsx.snap |  62 +++++
 src/Dialog/utils/Draggable.ts                 | 213 +++++++++++++++
 src/DialogActions/DialogActions.test.tsx      |  39 +++
 .../__snapshots__/DialogActions.test.tsx.snap |  47 ++++
 src/DialogContent/DialogContent.test.tsx      |  23 ++
 .../__snapshots__/DialogContent.test.tsx.snap |  11 +
 src/DialogTitle/DialogTitle.test.tsx          |  20 ++
 .../__snapshots__/DialogTitle.test.tsx.snap   |  11 +
 src/Modal/Backdrop.tsx                        |  43 ++-
 src/Modal/Modal.tsx                           |  56 ++--
 src/Modal/ModalLayout.tsx                     |   9 -
 src/Modal/index.ts                            |   3 +-
 src/transitions/Fade.tsx                      |   2 +-
 src/transitions/createStyleTransition.tsx     | 123 ++++-----
 stories/Dialog.stories.tsx                    | 133 ++++++---
 yarn.lock                                     |   9 +-
 27 files changed, 1457 insertions(+), 257 deletions(-)
 create mode 100644 docs/docs/components-apis/dialog.mdx
 create mode 100644 docs/docs/components/dialog-demos/DialogDemo.tsx
 create mode 100644 docs/docs/components/dialog.mdx
 create mode 100644 src/Dialog/CloseIcon.tsx
 create mode 100644 src/Dialog/Dialog.test.tsx
 create mode 100644 src/Dialog/DialogContainer.tsx
 create mode 100644 src/Dialog/__snapshots__/Dialog.test.tsx.snap
 create mode 100644 src/Dialog/utils/Draggable.ts
 create mode 100644 src/DialogActions/DialogActions.test.tsx
 create mode 100644 src/DialogActions/__snapshots__/DialogActions.test.tsx.snap
 create mode 100644 src/DialogContent/DialogContent.test.tsx
 create mode 100644 src/DialogContent/__snapshots__/DialogContent.test.tsx.snap
 create mode 100644 src/DialogTitle/DialogTitle.test.tsx
 create mode 100644 src/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9cce5011..eb2d25a0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -18,5 +18,8 @@
   "javascript.preferences.quoteStyle": "single",
   "typescript.preferences.quoteStyle": "single",
   "typescript.implementationsCodeLens.enabled": true,
-  "typescript.tsdk": "node_modules\\typescript\\lib"
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }
diff --git a/docs/docs/components-apis/dialog.mdx b/docs/docs/components-apis/dialog.mdx
new file mode 100644
index 00000000..43aaf0bf
--- /dev/null
+++ b/docs/docs/components-apis/dialog.mdx
@@ -0,0 +1,88 @@
+---
+id: dialog
+title: Dialog
+---
+
+弹窗。
+
+## Dialog
+
+包裹整个弹窗的根组件。
+
+引用方式：
+
+```tsx
+import Dialog from '@sinoui/core/Dialog';
+```
+
+Dialog组件属性：
+
+| 参数名称    | 参数类型      |默认值  | 说明                                                         |
+| ----------- | --------------- |--------------- | ------------------------------------------------------------ |
+| children    | React.ReactNode | |子元素  |
+| open    | boolean|false | 是否显示Dialog  |
+| backdrop    | boolean |true | 是否显示遮罩层  |
+| showCloseIcon | boolean | false | 是否显示关闭图标 |
+| onRequestClose    | ()=>void | | 点击关闭按钮的回调函数  |
+| draggable | boolean | true | 是否弹窗可以拖拽 |
+| backdropClick | boolean | false | 是否开启遮罩层的点击事件 |
+| onBackdropClick | ()=>void |  | 点击遮罩层的回调函数 |
+| absolute |boolean  |false  | 布局方式 |
+| fullScreen |boolean  |false  | 设置全屏显示 |
+| fullWidth |boolean  |false  | 设置最大宽度显示 |
+| autoWidth |boolean  |false  | 设置宽度自适应 |
+| className   | string        |  | 自定义类名 |  
+
+## DialogTitle
+
+弹窗标题组件。
+
+引用方式：
+
+```tsx
+import DialogTitle from '@sinoui/core/DialogTitle';
+```
+
+DialogTitle组件属性：
+
+| 参数名称    | 参数类型      |默认值  | 说明                                                         |
+| ----------- | --------------- |--------------- | ------------------------------------------------------------ |
+| children    | React.ReactNode | |子元素  |
+| className   | string        |  | 自定义类名 | 
+
+## DialogContent
+
+弹窗内容组件。
+
+引用方式：
+
+```tsx
+import DialogContent from '@sinoui/core/DialogContent';
+```
+
+DialogContent组件属性：
+
+| 参数名称    | 参数类型      |默认值  | 说明                                                         |
+| ----------- | --------------- |--------------- | ------------------------------------------------------------ |
+| children    | React.ReactNode | |子元素  |
+| className   | string        |  | 自定义类名 |  
+
+## DialogActions
+
+弹窗按钮组件。
+
+引用方式：
+
+```tsx
+import DialogActions from '@sinoui/core/DialogActions';
+```
+
+DialogActions组件属性：
+
+| 参数名称    | 参数类型      |默认值  | 说明                                                         |
+| ----------- | --------------- |--------------- | ------------------------------------------------------------ |
+| children    | React.ReactNode | |子元素  |
+| column    | boolean|false | 是否垂直显示  |
+| className   | string        |  | 自定义类名 |  
+
+更多示例，请参考[Dialog Demos](/docs/components/Dialog)
diff --git a/docs/docs/components/dialog-demos/DialogDemo.tsx b/docs/docs/components/dialog-demos/DialogDemo.tsx
new file mode 100644
index 00000000..d95fddb6
--- /dev/null
+++ b/docs/docs/components/dialog-demos/DialogDemo.tsx
@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import Dialog from '@sinoui/core/Dialog';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogContent from '@sinoui/core/DialogContent';
+import DialogActions from '@sinoui/core/DialogActions';
+import Button from '@sinoui/core/Button';
+
+export default function DialogDemo(props: any) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>CLICK</Button>
+      <Dialog
+        open={open}
+        {...props}
+        onRequestClose={() => props.onRequestClose && setOpen(false)}
+        onBackdropClick={() => props.onBackdropClick && setOpen(false)}
+      >
+        <DialogTitle>Use Google location service</DialogTitle>
+        <DialogContent>
+          Let Google help apps determine location. This means sending anonymous
+          location data to Google, even when no apps are running.
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>DISAGREE</Button>
+          <Button onClick={() => setOpen(false)}>AGREE</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
diff --git a/docs/docs/components/dialog.mdx b/docs/docs/components/dialog.mdx
new file mode 100644
index 00000000..52f613a9
--- /dev/null
+++ b/docs/docs/components/dialog.mdx
@@ -0,0 +1,253 @@
+---
+id: dialog
+title: Dialog 对话框
+---
+
+对话框将一个任务告知给用户，它包含了一些关键信息，需要用户进行确认，或者包含了多个任务。
+
+对话框是 modal 窗体的一种类型，它通常在应用程序内容之前呈现，来提供一些关键信息，或者要求用户做出决策。 对话框出现的时候会禁用应用程序的所有功能，只有被确认、被取消或已采取其他必要的操作时，对话框才不会留在屏幕上。
+
+import Dialog from '@sinoui/core/Dialog';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogContent from '@sinoui/core/DialogContent';
+import DialogActions from '@sinoui/core/DialogActions';
+import Button from '@sinoui/core/Button';
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@sinoui/theme';
+import DialogDemo from './dialog-demos/DialogDemo';
+
+## 基本使用
+
+```tsx
+import Dialog from '@sinoui/core/Dialog';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogContent from '@sinoui/core/DialogContent';
+import DialogActions from '@sinoui/core/DialogActions';
+import Button from '@sinoui/core/Button';
+
+function DialogDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>CLICK</Button>
+      <Dialog open={open}>
+        <DialogTitle>Use Google location service</DialogTitle>
+        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>DISAGREE</Button>
+          <Button onClick={() => setOpen(false)}>AGREE</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+```
+
+效果如下：
+
+<ThemeProvider theme={defaultTheme}>
+  <DialogDemo />
+</ThemeProvider>
+
+## 不显示遮罩层
+
+```tsx
+import Dialog from '@sinoui/core/Dialog';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogContent from '@sinoui/core/DialogContent';
+import DialogActions from '@sinoui/core/DialogActions';
+import Button from '@sinoui/core/Button';
+
+function DialogDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>点击</Button>
+      <Dialog open={open} backdrop={false}>
+        <DialogTitle>Use Google location service</DialogTitle>
+        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>DISAGREE</Button>
+          <Button onClick={() => setOpen(false)}>AGREE</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+```
+
+效果如下：
+
+<ThemeProvider theme={defaultTheme}>
+  <DialogDemo backdrop={false} />
+</ThemeProvider>
+
+## 显示关闭图标
+
+```tsx
+import Dialog from '@sinoui/core/Dialog';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogContent from '@sinoui/core/DialogContent';
+import DialogActions from '@sinoui/core/DialogActions';
+import Button from '@sinoui/core/Button';
+
+function DialogDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>点击</Button>
+      <Dialog open={open} showCloseIcon onRequestClose={() => setOpen(false)}>
+        <DialogTitle>Use Google location service</DialogTitle>
+        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>DISAGREE</Button>
+          <Button onClick={() => setOpen(false)}>AGREE</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+```
+
+效果如下：
+
+<ThemeProvider theme={defaultTheme}>
+  <DialogDemo showCloseIcon onRequestClose />
+</ThemeProvider>
+
+## 设置点击遮罩层的回调函数
+
+```tsx
+import Dialog from '@sinoui/core/Dialog';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogContent from '@sinoui/core/DialogContent';
+import DialogActions from '@sinoui/core/DialogActions';
+import Button from '@sinoui/core/Button';
+
+function DialogDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>点击</Button>
+      <Dialog
+        open={open}
+        onBackdropClick={() => setOpen(false)}
+        backdropClick
+        absolute
+      >
+        <DialogTitle>Use Google location service</DialogTitle>
+        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>DISAGREE</Button>
+          <Button onClick={() => setOpen(false)}>AGREE</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+```
+
+效果如下：
+
+<ThemeProvider theme={defaultTheme}>
+  <DialogDemo onBackdropClick backdropClick absolute />
+</ThemeProvider>
+
+## 设置全屏显示
+
+```tsx
+import Dialog from '@sinoui/core/Dialog';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogContent from '@sinoui/core/DialogContent';
+import DialogActions from '@sinoui/core/DialogActions';
+import Button from '@sinoui/core/Button';
+
+function DialogDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>点击</Button>
+      <Dialog fullScreen>
+        <DialogTitle>Use Google location service</DialogTitle>
+        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>DISAGREE</Button>
+          <Button onClick={() => setOpen(false)}>AGREE</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+```
+
+效果如下：
+
+<ThemeProvider theme={defaultTheme}>
+  <DialogDemo fullScreen />
+</ThemeProvider>
+
+## 设置最大宽度显示
+
+```tsx
+import Dialog from '@sinoui/core/Dialog';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogContent from '@sinoui/core/DialogContent';
+import DialogActions from '@sinoui/core/DialogActions';
+import Button from '@sinoui/core/Button';
+
+function DialogDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>点击</Button>
+      <Dialog fullWidth>
+        <DialogTitle>Use Google location service</DialogTitle>
+        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>DISAGREE</Button>
+          <Button onClick={() => setOpen(false)}>AGREE</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+```
+
+效果如下：
+
+<ThemeProvider theme={defaultTheme}>
+  <DialogDemo fullWidth />
+</ThemeProvider>
+
+## 设置宽度自适应
+
+```tsx
+import Dialog from '@sinoui/core/Dialog';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogContent from '@sinoui/core/DialogContent';
+import DialogActions from '@sinoui/core/DialogActions';
+import Button from '@sinoui/core/Button';
+
+function DialogDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>点击</Button>
+      <Dialog autoWidth>
+        <DialogTitle>Use Google location service</DialogTitle>
+        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>DISAGREE</Button>
+          <Button onClick={() => setOpen(false)}>AGREE</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+```
+
+效果如下：
+
+<ThemeProvider theme={defaultTheme}>
+  <DialogDemo autoWidth />
+</ThemeProvider>
diff --git a/docs/sidebars.js b/docs/sidebars.js
index 755e919d..acfc03ad 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -7,22 +7,21 @@
 
 module.exports = {
   docs: {
-    组件: [
-      {
-        type: 'category',
-        label: '通用',
-        items: [
-          'components/button',
-          'components/divider',
-          'components/typography',
-          'components/card',
-          'components/svg-icon',
-          'components/fab', 
-          'components/switch',
-          'components/avatar',
-        ],
-      },
-    ],
+    组件: [{
+      type: 'category',
+      label: '通用',
+      items: [
+        'components/button',
+        'components/divider',
+        'components/typography',
+        'components/card',
+        'components/svg-icon',
+        'components/fab',
+        'components/switch',
+        'components/avatar',
+        'components/dialog',
+      ],
+    }, ],
     组件API: [
       'components-apis/base-button',
       'components-apis/button',
@@ -33,6 +32,7 @@ module.exports = {
       'components-apis/svg-icon',
       'components-apis/fab',
       'components-apis/avatar',
+      'components-apis/dialog',
     ],
   },
 };
diff --git a/package.json b/package.json
index d7f78248..d102e09d 100644
--- a/package.json
+++ b/package.json
@@ -57,13 +57,15 @@
     "@babel/runtime": "^7.7.6",
     "@sinoui/ripple": "^1.0.10",
     "@sinoui/theme": "^1.0.0-beta.7",
+    "@types/react-transition-group": "^4.2.4",
     "classnames": "^2.2.6",
     "lodash": "^4.17.15",
     "lodash-es": "^4.17.15",
     "polished": "^3.4.4",
     "react-icons": "^3.9.0",
     "react-transition-group": "^4.3.0",
-    "styled-components": "^4.4.1"
+    "styled-components": "^4.4.1",
+    "react-dom": "^16.13.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.5",
@@ -89,7 +91,6 @@
     "prettier": "^1.19.1",
     "react": "^16.12.0",
     "react-docgen-typescript-loader": "^3.6.0",
-    "react-dom": "^16.12.0",
     "react-test-renderer": "^16.12.0",
     "ts-lib-tools": "^0.10.1",
     "typescript": "^3.8.3",
diff --git a/src/Dialog/CloseIcon.tsx b/src/Dialog/CloseIcon.tsx
new file mode 100644
index 00000000..e0a18644
--- /dev/null
+++ b/src/Dialog/CloseIcon.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import IconButton from '@sinoui/core/IconButton';
+import SvgIcon from '@sinoui/core/SvgIcon';
+import { MdClose } from 'react-icons/md';
+import styled from 'styled-components';
+import classNames from 'classnames';
+
+export interface CloseIconProps {
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const IconButtonWrapper = styled(IconButton)`
+  color: currentColor;
+  position: absolute !important;
+  top: 0;
+  right: 0;
+
+  :hover {
+    color: white;
+    transition: color 300ms;
+    transition: background 300ms;
+  }
+`;
+
+/**
+ * 关闭按钮组件
+ *
+ * @export
+ * @param {CloseIconProps} props
+ * @returns
+ */
+export default function CloseIcon(props: CloseIconProps) {
+  const { onClick } = props;
+  return (
+    <IconButtonWrapper
+      onClick={onClick}
+      className={classNames('sinoui-dialog-title__icon')}
+    >
+      <SvgIcon as={MdClose} />
+    </IconButtonWrapper>
+  );
+}
diff --git a/src/Dialog/Dialog.test.tsx b/src/Dialog/Dialog.test.tsx
new file mode 100644
index 00000000..e35adda8
--- /dev/null
+++ b/src/Dialog/Dialog.test.tsx
@@ -0,0 +1,200 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@sinoui/theme';
+import Dialog from '@sinoui/core/Dialog';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogContent from '@sinoui/core/DialogContent';
+import DialogActions from '@sinoui/core/DialogActions';
+import Button from '@sinoui/core/Button';
+
+describe('Dialog组件 单元测试', () => {
+  test('测试显示关闭按钮', () => {
+    const { getByTestId } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <Dialog showCloseIcon>
+          <DialogTitle data-testid="dialogTitle">
+            Use Google location service?
+          </DialogTitle>
+          <DialogContent>
+            Let Google help apps determine location. This means sending
+            anonymous location data toGoogle, even when no apps are running.
+          </DialogContent>
+          <DialogActions>
+            <Button>Disagree</Button>
+            <Button>Agree</Button>
+          </DialogActions>
+        </Dialog>
+      </ThemeProvider>,
+    );
+
+    const title = getByTestId('dialogTitle');
+    expect(title.firstElementChild).toHaveClass('sinoui-dialog-title__icon');
+  });
+
+  test('测试全屏显示', () => {
+    const { getAllByTestId } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <Dialog fullScreen data-testid="dialog">
+          <DialogTitle>Use Google location service?</DialogTitle>
+          <DialogContent>
+            Let Google help apps determine location. This means sending
+            anonymous location data toGoogle, even when no apps are running.
+          </DialogContent>
+          <DialogActions>
+            <Button>Disagree</Button>
+            <Button>Agree</Button>
+          </DialogActions>
+        </Dialog>
+      </ThemeProvider>,
+    );
+
+    const test = getAllByTestId('dialog')[0];
+    expect(test).toHaveStyle('width:100%;height:100%');
+  });
+});
+
+describe('Dialog组件 快照测试', () => {
+  // it('基本使用', () => {
+  //   const tree = renderer
+  //     .create(
+  //       <ThemeProvider theme={defaultTheme}>
+  //         <Dialog>
+  //           <DialogTitle>Use Google location service?</DialogTitle>
+  //           <DialogContent>
+  //             Let Google help apps determine location. This means sending
+  //             anonymous location data toGoogle, even when no apps are running.
+  //           </DialogContent>
+  //           <DialogActions>
+  //             <Button>Disagree</Button>
+  //             <Button>Agree</Button>
+  //           </DialogActions>
+  //         </Dialog>
+  //       </ThemeProvider>,
+  //     )
+  //     .toJSON();
+  //   expect(tree).toMatchSnapshot();
+  // });
+  // it('不显示遮罩层', () => {
+  //   const tree = renderer
+  //     .create(
+  //       <ThemeProvider theme={defaultTheme}>
+  //         <Dialog backdrop={false}>
+  //           <DialogTitle>Use Google location service?</DialogTitle>
+  //           <DialogContent>
+  //             Let Google help apps determine location. This means sending
+  //             anonymous location data toGoogle, even when no apps are running.
+  //           </DialogContent>
+  //           <DialogActions>
+  //             <Button>Disagree</Button>
+  //             <Button>Agree</Button>
+  //           </DialogActions>
+  //         </Dialog>
+  //       </ThemeProvider>,
+  //     )
+  //     .toJSON();
+  //   expect(tree).toMatchSnapshot();
+  // });
+  // it('显示关闭图标', () => {
+  //   const tree = renderer
+  //     .create(
+  //       <ThemeProvider theme={defaultTheme}>
+  //         <Dialog showCloseIcon>
+  //           <DialogTitle>Use Google location service?</DialogTitle>
+  //           <DialogContent>
+  //             Let Google help apps determine location. This means sending
+  //             anonymous location data toGoogle, even when no apps are running.
+  //           </DialogContent>
+  //           <DialogActions>
+  //             <Button>Disagree</Button>
+  //             <Button>Agree</Button>
+  //           </DialogActions>
+  //         </Dialog>
+  //       </ThemeProvider>,
+  //     )
+  //     .toJSON();
+  //   expect(tree).toMatchSnapshot();
+  // });
+  // it('设置弹窗不可以拖拽', () => {
+  //   const tree = renderer
+  //     .create(
+  //       <ThemeProvider theme={defaultTheme}>
+  //         <Dialog draggable={false}>
+  //           <DialogTitle>Use Google location service?</DialogTitle>
+  //           <DialogContent>
+  //             Let Google help apps determine location. This means sending
+  //             anonymous location data toGoogle, even when no apps are running.
+  //           </DialogContent>
+  //           <DialogActions>
+  //             <Button>Disagree</Button>
+  //             <Button>Agree</Button>
+  //           </DialogActions>
+  //         </Dialog>
+  //       </ThemeProvider>,
+  //     )
+  //     .toJSON();
+  //   expect(tree).toMatchSnapshot();
+  // });
+  // it('设置全屏显示', () => {
+  //   const tree = renderer
+  //     .create(
+  //       <ThemeProvider theme={defaultTheme}>
+  //         <Dialog fullScreen>
+  //           <DialogTitle>Use Google location service?</DialogTitle>
+  //           <DialogContent>
+  //             Let Google help apps determine location. This means sending
+  //             anonymous location data toGoogle, even when no apps are running.
+  //           </DialogContent>
+  //           <DialogActions>
+  //             <Button>Disagree</Button>
+  //             <Button>Agree</Button>
+  //           </DialogActions>
+  //         </Dialog>
+  //       </ThemeProvider>,
+  //     )
+  //     .toJSON();
+  //   expect(tree).toMatchSnapshot();
+  // });
+  // it('对话框将根据maxWidth的值进行自我调整', () => {
+  //   const tree = renderer
+  //     .create(
+  //       <ThemeProvider theme={defaultTheme}>
+  //         <Dialog fullWidth>
+  //           <DialogTitle>Use Google location service?</DialogTitle>
+  //           <DialogContent>
+  //             Let Google help apps determine location. This means sending
+  //             anonymous location data toGoogle, even when no apps are running.
+  //           </DialogContent>
+  //           <DialogActions>
+  //             <Button>Disagree</Button>
+  //             <Button>Agree</Button>
+  //           </DialogActions>
+  //         </Dialog>
+  //       </ThemeProvider>,
+  //     )
+  //     .toJSON();
+  //   expect(tree).toMatchSnapshot();
+  // });
+  // it('宽度自适应', () => {
+  //   const tree = renderer
+  //     .create(
+  //       <ThemeProvider theme={defaultTheme}>
+  //         <Dialog autoWidth>
+  //           <DialogTitle>Use Google location service?</DialogTitle>
+  //           <DialogContent>
+  //             Let Google help apps determine location. This means sending
+  //             anonymous location data toGoogle, even when no apps are running.
+  //           </DialogContent>
+  //           <DialogActions>
+  //             <Button>Disagree</Button>
+  //             <Button>Agree</Button>
+  //           </DialogActions>
+  //         </Dialog>
+  //       </ThemeProvider>,
+  //     )
+  //     .toJSON();
+  //   expect(tree).toMatchSnapshot();
+  // });
+});
diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index 08b00d38..ce0d4fb9 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -1,11 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import classNames from 'classnames';
-import DialogTitle from '@sinoui/core/DialogTitle';
-import DialogActions from '@sinoui/core/DialogActions';
-import Modal, { ModalPropsType } from '@sinoui/core/Modal';
-import DialogWrapper from './DialogWrapper';
-import Iframe from './Iframe';
+import Modal from '@sinoui/core/Modal';
+import Fade from '../transitions/Fade';
+import DialogContainer, { DialogContainerProps } from './DialogContainer';
 
 const ModalWrapper = styled(Modal)`
   display: flex;
@@ -13,91 +10,51 @@ const ModalWrapper = styled(Modal)`
   align-items: center;
 `;
 
-export interface DialogProps {
+export interface DialogProps extends DialogContainerProps {
   /**
-   * iframe的定位方式
-   */
-  absolute?: boolean;
-  /**
-   * 子元素
-   */
-  children?: React.ReactNode;
-  /**
-   * 是否全屏显示
+   * 为true时打开Modal
+   *
+   * @type {boolean}
    */
-  fullScreen?: boolean;
+  open?: boolean;
   /**
-   * 对话框将根据 maxWidth 的值进行自我调整
+   * 为true时可以响应backdrop点击事件。
    */
-  fullWidth?: boolean;
+  backdropClick?: boolean;
   /**
-   * 添加自定义类名
+   * 展现过渡动画。默认为Fade。
    */
-  className?: string;
+  transition?: React.ReactType;
   /**
-   * 最大宽度
+   * 过渡动画时长
    */
-  autoWidth?: boolean;
+  transitionDuration?:
+    | number
+    | {
+        enter: number;
+        exit: number;
+      };
   /**
-   * 为true时可以响应backdrop点击事件。
+   * backdrop被点击时的回调函数
+   *
+   * @type {(SyntheticMouseEvent<*>) => void}
    */
-  backdropClick?: boolean;
+  onBackdropClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-/**
- * 弹窗的根组件
- */
 function Dialog(props: DialogProps) {
   const {
-    children,
-    absolute,
-    fullScreen,
-    fullWidth,
-    className,
-    autoWidth,
     backdropClick = true,
+    transition: Transition = Fade,
+    transitionDuration,
+    open,
     ...rest
   } = props;
-
-  /**
-   * 获取Dialog子组件的排序号
-   *
-   * @param {Node} node
-   */
-  const getDialogNodeOrderNode = (node: React.ReactElement<any>) => {
-    switch (node.type) {
-      case DialogTitle:
-        return 0;
-      case DialogActions:
-        return 2;
-      default:
-        return 1;
-    }
-  };
-
-  const sortDialogChildren = (
-    node1: React.ReactElement<any>,
-    node2: React.ReactElement<any>,
-  ) => {
-    return getDialogNodeOrderNode(node1) - getDialogNodeOrderNode(node2);
-  };
-
-  const nodes = React.Children.toArray(children)
-    .filter(Boolean)
-    .sort(sortDialogChildren);
-
   return (
-    <ModalWrapper {...rest} backdropClick={backdropClick}>
-      <DialogWrapper
-        fullScreen={fullScreen}
-        fullWidth={fullWidth}
-        className={classNames('sinoui-dialog', className)}
-        autoWidth={autoWidth}
-        {...props}
-      >
-        {nodes}
-        <Iframe frameBorder={0} scrolling="false" absolute={absolute} />
-      </DialogWrapper>
+    <ModalWrapper {...rest} backdropClick={backdropClick} open={open}>
+      <Transition timeout={transitionDuration} appear in={open}>
+        <DialogContainer {...props} />
+      </Transition>
     </ModalWrapper>
   );
 }
diff --git a/src/Dialog/DialogContainer.tsx b/src/Dialog/DialogContainer.tsx
new file mode 100644
index 00000000..d3c8f71a
--- /dev/null
+++ b/src/Dialog/DialogContainer.tsx
@@ -0,0 +1,147 @@
+import React, { useEffect } from 'react';
+import classNames from 'classnames';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogActions from '@sinoui/core/DialogActions';
+import Draggable from './utils/Draggable';
+import DialogWrapper from './DialogWrapper';
+import Iframe from './Iframe';
+import CloseIcon from './CloseIcon';
+
+export interface DialogContainerProps {
+  /**
+   * 布局方式
+   */
+  absolute?: boolean;
+  /**
+   * 子元素
+   */
+  children?: React.ReactNode;
+  /**
+   * 是否全屏显示
+   */
+  fullScreen?: boolean;
+  /**
+   * 最大宽度显示,对话框将根据 maxWidth 的值进行自我调整
+   */
+  fullWidth?: boolean;
+  /**
+   * 添加自定义类名
+   */
+  className?: string;
+  /**
+   * 宽度自适应
+   */
+  autoWidth?: boolean;
+  /**
+   * 是否可拖拽
+   */
+  draggable?: boolean;
+  /**
+   * 是否显示嵌套层
+   */
+  containsIframe?: boolean;
+  /**
+   * 是否显示关闭按钮
+   */
+  showCloseIcon?: boolean;
+  /**
+   * 点击关闭按钮的回调函数
+   */
+  onRequestClose?: () => void;
+}
+
+/**
+ * 弹窗的根组件
+ */
+function DialogContainer(props: DialogContainerProps) {
+  const {
+    children,
+    absolute,
+    fullScreen,
+    fullWidth,
+    autoWidth,
+    className,
+    draggable = true,
+    containsIframe = true,
+    showCloseIcon,
+    onRequestClose,
+    ...rest
+  } = props;
+
+  const dialogContainerRef = React.createRef<HTMLElement | any>();
+
+  useEffect(() => {
+    let drag: Draggable;
+    if (draggable) {
+      drag = new Draggable({
+        container: dialogContainerRef.current,
+        handler: '.sinoui-dialog-title',
+        bounds: true,
+      });
+    }
+
+    return () => {
+      drag.teardown();
+    };
+  }, [dialogContainerRef, draggable]);
+
+  /**
+   * 获取Dialog子组件的排序号
+   *
+   * @param {Node} node
+   */
+  const getDialogNodeOrderNode = (node: React.ReactElement<any>) => {
+    switch (node.type) {
+      case DialogTitle:
+        return 0;
+      case DialogActions:
+        return 2;
+      default:
+        return 1;
+    }
+  };
+
+  const sortDialogChildren = (
+    node1: React.ReactElement<any>,
+    node2: React.ReactElement<any>,
+  ) => {
+    return getDialogNodeOrderNode(node1) - getDialogNodeOrderNode(node2);
+  };
+
+  const nodes = React.Children.toArray(children)
+    .map((node: any) => {
+      if (node.type === DialogTitle) {
+        return (
+          <DialogTitle
+            key="dialogTitle"
+            {...node.props}
+            showCloseIcon={showCloseIcon}
+          >
+            {node.props.children}
+            {showCloseIcon && <CloseIcon onClick={onRequestClose} />}
+          </DialogTitle>
+        );
+      }
+      return node;
+    })
+    .filter(Boolean)
+    .sort(sortDialogChildren);
+
+  return (
+    <DialogWrapper
+      fullScreen={fullScreen}
+      fullWidth={fullWidth}
+      className={classNames('sinoui-dialog', className)}
+      autoWidth={autoWidth}
+      {...rest}
+      ref={dialogContainerRef}
+    >
+      {nodes}
+      {containsIframe && (
+        <Iframe frameBorder={0} scrolling="false" absolute={absolute} />
+      )}
+    </DialogWrapper>
+  );
+}
+
+export default DialogContainer;
diff --git a/src/Dialog/DialogWrapper.tsx b/src/Dialog/DialogWrapper.tsx
index b969df20..d8ce9909 100644
--- a/src/Dialog/DialogWrapper.tsx
+++ b/src/Dialog/DialogWrapper.tsx
@@ -26,7 +26,7 @@ const fullScreenStyle = css`
  * 宽屏模式设置的宽度
  */
 const fullWidthStyle = css`
-  width: 600px;
+  width: 560px;
 `;
 
 /**
@@ -34,7 +34,7 @@ const fullWidthStyle = css`
  */
 const maxWidthStyle = css`
   max-width: ${(props: DialogWrapperProps) =>
-    props.autoWidth ? '100%' : '600px'};
+    props.autoWidth ? '100%' : '560px'};
 `;
 
 /**
diff --git a/src/Dialog/__snapshots__/Dialog.test.tsx.snap b/src/Dialog/__snapshots__/Dialog.test.tsx.snap
new file mode 100644
index 00000000..26289940
--- /dev/null
+++ b/src/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dialog组件 快照测试 基本使用 1`] = `
+Array [
+  "ReactDOM.createPortal(",
+  <div
+    className="ModalLayout-g5nr25-0 jNRojG Dialog__ModalWrapper-sc-10h8ou0-0 ieHqTo"
+    onClick={[Function]}
+  >
+    <div
+      aria-hidden={true}
+      className="Backdrop__BackdropWrapper-sc-15mv4hm-0 dYcqsh"
+      data-sinoui-test="Backdrop"
+      onClick={[Function]}
+    />
+    <div
+      className="DialogWrapper-otdr06-0 hSmHOF sinoui-dialog"
+    >
+      <div
+        className="Typography__TypographyWrapper-sc-12agh80-0 imjgCm sinoui-typography sinoui-typography--H6 DialogTitle-sc-1z056jx-0 joiqub sinoui-dialog-title"
+        color="textPrimary"
+        type="H6"
+      >
+        Use Google location service?
+      </div>
+      <h6
+        className="Typography__TypographyWrapper-sc-12agh80-0 juBaHC sinoui-typography sinoui-typography--subtitle1 DialogContent-rvt14v-0 coPUFm sinoui-dialog-content children forwardedComponent theme"
+        color="textSecondary"
+        type="subtitle1"
+      >
+        Let Google help apps determine location. This means sending anonymous location data toGoogle, even when no apps are running.
+      </h6>
+      <div
+        className="DialogActions__DialogActionsWrapper-ibc7so-0 kTvEtc sinoui-dialog-actions"
+      >
+        <button
+          className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button-sc-15sa99-0 euJRxB sinoui-button"
+          color="primary"
+          role="button"
+          type="button"
+        >
+          Disagree
+        </button>
+        <button
+          className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button-sc-15sa99-0 euJRxB sinoui-button"
+          color="primary"
+          role="button"
+          type="button"
+        >
+          Agree
+        </button>
+      </div>
+      <iframe
+        className="Iframe-fna49j-0 IJdcU"
+        frameBorder={0}
+        scrolling="false"
+      />
+    </div>
+  </div>,
+  ", elRef.current, );",
+]
+`;
diff --git a/src/Dialog/utils/Draggable.ts b/src/Dialog/utils/Draggable.ts
new file mode 100644
index 00000000..014f0467
--- /dev/null
+++ b/src/Dialog/utils/Draggable.ts
@@ -0,0 +1,213 @@
+export interface DragConfig {
+  container: string | HTMLElement;
+  handler?: string;
+  bounds?: boolean;
+}
+
+export interface Position {
+  x: number;
+  y: number;
+}
+
+export interface DeltaBounds {
+  x: [number, number];
+  y: [number, number];
+}
+
+export default class Draggable {
+  private container$: HTMLElement;
+
+  private handler$: HTMLElement;
+
+  private pos: Position;
+
+  private delta: Position = { x: 0, y: 0 };
+
+  private startX: number;
+
+  private startY: number;
+
+  private deltaBounds: DeltaBounds;
+
+  private dragging: boolean;
+
+  constructor(private dragConfig: DragConfig) {
+    this.onContainerMouseDown = this.onContainerMouseDown.bind(this);
+    this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this);
+    this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this);
+
+    this.init();
+  }
+
+  /**
+   * 清除
+   *
+   * @memberof Draggable
+   */
+  public teardown() {
+    if (!this.handler$) {
+      return;
+    }
+    this.handler$.removeEventListener(
+      'mousedown',
+      this.onContainerMouseDown,
+      false,
+    );
+
+    this.clearDragEvents();
+  }
+
+  private clearDragEvents() {
+    if (this.handler$.ownerDocument) {
+      this.handler$.ownerDocument.removeEventListener(
+        'mouseup',
+        this.onDocumentMouseUp,
+        false,
+      );
+      this.handler$.ownerDocument.removeEventListener(
+        'mousemove',
+        this.onDocumentMouseMove,
+        false,
+      );
+    }
+  }
+
+  /**
+   * 初始化
+   *
+   * @private
+   * @memberof Draggable
+   */
+  private init() {
+    this.container$ =
+      typeof this.dragConfig.container === 'string'
+        ? document.querySelector(this.dragConfig.container)
+        : this.dragConfig.container;
+    this.handler$ = this.dragConfig.handler
+      ? this.container$.querySelector(this.dragConfig.handler)
+      : this.container$;
+    this.pos = { x: 0, y: 0 };
+    this.delta = { x: 0, y: 0 };
+
+    if (!this.handler$) {
+      return;
+    }
+    this.handler$.addEventListener(
+      'mousedown',
+      this.onContainerMouseDown,
+      false,
+    );
+  }
+
+  /**
+   * 监听容器的鼠标按下事件
+   *
+   * 此时开始做拖拽的初始化动作。
+   *
+   * @param {MouseEvent} event
+   */
+  private onContainerMouseDown(event: MouseEvent) {
+    this.dragging = true;
+
+    this.startX = event.pageX;
+    this.startY = event.pageY;
+    this.pos = { x: this.pos.x + this.delta.x, y: this.pos.y + this.delta.y };
+    this.delta = { x: 0, y: 0 };
+
+    if (this.dragConfig.bounds) {
+      this.calcBounds();
+    }
+
+    if (this.handler$.ownerDocument) {
+      this.handler$.ownerDocument.addEventListener(
+        'mouseup',
+        this.onDocumentMouseUp,
+        false,
+      );
+      this.handler$.ownerDocument.addEventListener(
+        'mousemove',
+        this.onDocumentMouseMove,
+        false,
+      );
+    }
+  }
+
+  /**
+   * 计算偏移量边界值
+   *
+   * @memberof Draggable
+   */
+  private calcBounds() {
+    const documentWidth = document.documentElement.clientWidth;
+    const documentHeight = document.documentElement.clientHeight;
+
+    const containerRect = this.container$.getBoundingClientRect();
+
+    this.deltaBounds = {
+      x: [
+        -containerRect.left,
+        documentWidth - containerRect.width - containerRect.left,
+      ],
+      y: [
+        -containerRect.top,
+        documentHeight - containerRect.height - containerRect.top,
+      ],
+    };
+  }
+
+  /**
+   * 监听页面的鼠标释放事件，以结束拖拽
+   */
+  private onDocumentMouseUp() {
+    this.dragging = false;
+
+    this.clearDragEvents();
+  }
+
+  /**
+   * 获取偏移位置
+   *
+   * @param {number} pageX
+   * @param {number} pageY
+   * @returns
+   * @memberof Draggable
+   */
+  private getDelta(pageX: number, pageY: number) {
+    const deltaX = this.dragConfig.bounds
+      ? Math.min(
+          this.deltaBounds.x[1],
+          Math.max(this.deltaBounds.x[0], pageX - this.startX),
+        )
+      : pageX - this.startX;
+    const deltaY = this.dragConfig.bounds
+      ? Math.min(
+          this.deltaBounds.y[1],
+          Math.max(this.deltaBounds.y[0], pageY - this.startY),
+        )
+      : pageY - this.startY;
+
+    return {
+      x: deltaX,
+      y: deltaY,
+    };
+  }
+
+  /**
+   * 监听页面中的鼠标移动事件
+   *
+   * @param {*} event
+   * @memberof Draggable
+   */
+  private onDocumentMouseMove(event: MouseEvent) {
+    if (!this.dragging) {
+      return;
+    }
+    const { x: deltaX, y: deltaY } = this.getDelta(event.pageX, event.pageY);
+    const x = this.pos.x + deltaX;
+    const y = this.pos.y + deltaY;
+
+    this.delta = { x: deltaX, y: deltaY };
+
+    this.container$.style.transform = `translate(${x}px, ${y}px)`;
+  }
+}
diff --git a/src/DialogActions/DialogActions.test.tsx b/src/DialogActions/DialogActions.test.tsx
new file mode 100644
index 00000000..03410708
--- /dev/null
+++ b/src/DialogActions/DialogActions.test.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@sinoui/theme';
+import DialogActions from '@sinoui/core/DialogActions';
+import Button from '@sinoui/core/Button';
+
+describe('DialogActions组件 快照测试', () => {
+  it('基本使用', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <DialogActions>
+            <Button>Disagree</Button>
+            <Button>Agree</Button>
+          </DialogActions>
+        </ThemeProvider>,
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('按钮垂直显示', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <DialogActions column>
+            <Button>Disagree</Button>
+            <Button>Agree</Button>
+          </DialogActions>
+        </ThemeProvider>,
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/DialogActions/__snapshots__/DialogActions.test.tsx.snap b/src/DialogActions/__snapshots__/DialogActions.test.tsx.snap
new file mode 100644
index 00000000..b46f54d3
--- /dev/null
+++ b/src/DialogActions/__snapshots__/DialogActions.test.tsx.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogActions组件 快照测试 基本使用 1`] = `
+<div
+  className="DialogActions__DialogActionsWrapper-ibc7so-0 kTvEtc sinoui-dialog-actions"
+>
+  <button
+    className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button-sc-15sa99-0 euJRxB sinoui-button"
+    color="primary"
+    role="button"
+    type="button"
+  >
+    Disagree
+  </button>
+  <button
+    className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button-sc-15sa99-0 euJRxB sinoui-button"
+    color="primary"
+    role="button"
+    type="button"
+  >
+    Agree
+  </button>
+</div>
+`;
+
+exports[`DialogActions组件 快照测试 按钮垂直显示 1`] = `
+<div
+  className="DialogActions__DialogActionsWrapper-ibc7so-0 bfxQEv sinoui-dialog-actions"
+>
+  <button
+    className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button-sc-15sa99-0 euJRxB sinoui-button"
+    color="primary"
+    role="button"
+    type="button"
+  >
+    Disagree
+  </button>
+  <button
+    className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button-sc-15sa99-0 euJRxB sinoui-button"
+    color="primary"
+    role="button"
+    type="button"
+  >
+    Agree
+  </button>
+</div>
+`;
diff --git a/src/DialogContent/DialogContent.test.tsx b/src/DialogContent/DialogContent.test.tsx
new file mode 100644
index 00000000..8beab8c2
--- /dev/null
+++ b/src/DialogContent/DialogContent.test.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@sinoui/theme';
+import DialogContent from '@sinoui/core/DialogContent';
+
+describe('DialogContent组件 快照测试', () => {
+  it('基本使用', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <DialogContent>
+            Let Google help apps determine location. This means sending
+            anonymous location data toGoogle, even when no apps are running.
+          </DialogContent>
+        </ThemeProvider>,
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/DialogContent/__snapshots__/DialogContent.test.tsx.snap b/src/DialogContent/__snapshots__/DialogContent.test.tsx.snap
new file mode 100644
index 00000000..a3cf9ed5
--- /dev/null
+++ b/src/DialogContent/__snapshots__/DialogContent.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogContent组件 快照测试 基本使用 1`] = `
+<h6
+  className="Typography__TypographyWrapper-sc-12agh80-0 juBaHC sinoui-typography sinoui-typography--subtitle1 DialogContent-rvt14v-0 coPUFm sinoui-dialog-content children forwardedComponent theme"
+  color="textSecondary"
+  type="subtitle1"
+>
+  Let Google help apps determine location. This means sending anonymous location data toGoogle, even when no apps are running.
+</h6>
+`;
diff --git a/src/DialogTitle/DialogTitle.test.tsx b/src/DialogTitle/DialogTitle.test.tsx
new file mode 100644
index 00000000..41f4d4de
--- /dev/null
+++ b/src/DialogTitle/DialogTitle.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@sinoui/theme';
+import DialogTitle from '@sinoui/core/DialogTitle';
+
+describe('DialogTitle组件 快照测试', () => {
+  it('基本使用', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <DialogTitle>标题</DialogTitle>
+        </ThemeProvider>,
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap b/src/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap
new file mode 100644
index 00000000..16a9645a
--- /dev/null
+++ b/src/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogTitle组件 快照测试 基本使用 1`] = `
+<div
+  className="Typography__TypographyWrapper-sc-12agh80-0 imjgCm sinoui-typography sinoui-typography--H6 DialogTitle-sc-1z056jx-0 joiqub sinoui-dialog-title"
+  color="textPrimary"
+  type="H6"
+>
+  标题
+</div>
+`;
diff --git a/src/Modal/Backdrop.tsx b/src/Modal/Backdrop.tsx
index a33996b2..a20035ad 100644
--- a/src/Modal/Backdrop.tsx
+++ b/src/Modal/Backdrop.tsx
@@ -2,6 +2,20 @@ import React from 'react';
 import styled from 'styled-components';
 import Fade from '../transitions/Fade';
 
+const BackdropWrapper = styled.div.attrs({
+  'aria-hidden': true,
+  'data-sinoui-test': 'Backdrop',
+})<BackdropProps>`
+  position: fixed;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: ${(props) =>
+    props.visible === false ? 'transparent' : 'rgba(0, 0, 0, 0.5)'};
+`;
+
 export interface BackdropProps {
   /**
    * 是否显示
@@ -20,41 +34,16 @@ export interface BackdropProps {
    */
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /**
-   * 指定组件样式
-   */
-  style?: React.CSSProperties;
-  /**
-   * 指定组件样式类名
+   * 添加自定义类名
    */
   className?: string;
 }
 
-export interface StyledBackdropProps {
-  /**
-   * 是否显示
-   */
-  visible?: boolean;
-}
-
-const StyledBackdrop = styled.div.attrs({
-  'aria-hidden': true,
-  'data-testid': 'Backdrop',
-})<StyledBackdropProps>`
-  position: fixed;
-  z-index: -1;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: ${(props) =>
-    props.visible === false ? 'transparent' : 'rgba(0, 0, 0, 0.5)'};
-`;
-
 export default function Backdrop(props: BackdropProps) {
   const { open, transitionDuration } = props;
   return (
     <Fade appear in={open} timeout={transitionDuration} {...props}>
-      <StyledBackdrop />
+      <BackdropWrapper />
     </Fade>
   );
 }
diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx
index 95888636..5c63f21e 100644
--- a/src/Modal/Modal.tsx
+++ b/src/Modal/Modal.tsx
@@ -1,9 +1,9 @@
 import React, {
-  useEffect,
   useState,
+  useEffect,
+  useMemo,
   useRef,
   useCallback,
-  useMemo,
 } from 'react';
 import ReactDOM from 'react-dom';
 import omit from 'lodash/omit';
@@ -13,6 +13,9 @@ import ModalLayout from './ModalLayout';
 
 let modalRoot: null | HTMLElement;
 
+const MODAL_ROOT_CLASSNAME = 'sinoui-modal-root';
+export { MODAL_ROOT_CLASSNAME };
+
 /**
  * 获取模态框的根元素
  *
@@ -23,7 +26,7 @@ export function getModalRoot() {
     modalRoot = document.getElementById('SinouiModalRoot');
     if (!modalRoot) {
       modalRoot = document.createElement('div');
-      modalRoot.classList.add('sinoui-modal-root');
+      modalRoot.classList.add(MODAL_ROOT_CLASSNAME);
       document.body.appendChild(modalRoot);
     }
   }
@@ -113,29 +116,28 @@ export interface ModalPropsType
   zIndex?: number;
   // 指定modal根节点容器
   container?: HTMLElement;
-
+  /**
+   * Modal根元素
+   */
   innerRef?: React.Ref<HTMLDivElement>;
 }
 
-export interface ModalStateType {
-  exited?: boolean;
-}
-
 /**
  * 模态框
  */
-function Modal(props: ModalPropsType): any {
+function Modal(props: ModalPropsType) {
   const {
     open = true,
-    fixed = true,
-    BackdropProps: backdropProps = {},
+    children,
+    BackdropProps: backdropProps,
     backdrop = true,
     backdropClick = true,
+    onBackdropClick: onBackdropClickProp,
     container = getModalRoot(),
-    onRequestClose,
     onTransitionExited: onTransitionExitedProp,
-    children,
-    onBackdropClick: onBackdropClickProp,
+    onRequestClose,
+    fixed = true,
+    fullScreen = true,
     ...rest
   } = props;
 
@@ -151,7 +153,9 @@ function Modal(props: ModalPropsType): any {
       elRef.current = element;
     }
 
-    openRef.current = open;
+    if (openRef.current) {
+      openRef.current = open;
+    }
 
     return () => container.removeChild(elRef.current) as any;
   }, [container, element, open]);
@@ -167,6 +171,9 @@ function Modal(props: ModalPropsType): any {
     }
   }, [open, props]);
 
+  /**
+   * 点击遮罩层
+   */
   const onBackdropClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
       if (event.target !== event.currentTarget) {
@@ -176,7 +183,6 @@ function Modal(props: ModalPropsType): any {
       if (!backdropClick) {
         return;
       }
-
       if (onBackdropClickProp) {
         onBackdropClickProp(event);
       }
@@ -185,13 +191,16 @@ function Modal(props: ModalPropsType): any {
         onRequestClose(event, 'backdropClick');
       }
     },
-    [backdropClick, onBackdropClickProp, onRequestClose],
+    [onBackdropClickProp, onRequestClose, backdropClick],
   );
 
   const onTransitionExited = useCallback(() => {
     setExited(true);
   }, []);
 
+  /**
+   * 点击Modal整体
+   */
   const onContainerClick = useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
       event.stopPropagation();
@@ -209,8 +218,9 @@ function Modal(props: ModalPropsType): any {
   } = {};
 
   if (hasTransition) {
+    const child = React.Children.only(children);
     childProps.onExited = createChainFunction(
-      React.Children.only(children)?.props.onExited,
+      child && child.props.onExited,
       onTransitionExited,
     );
     if (!open) {
@@ -220,7 +230,9 @@ function Modal(props: ModalPropsType): any {
 
   const Container = fixed ? ModalLayout : 'div';
 
-  const containerProps = fixed ? rest : omit(rest, ['fullScreen', 'zIndex']);
+  const containerProps = fixed
+    ? { ...rest, fullScreen }
+    : omit(rest, ['fullScreen', 'zIndex']);
 
   return ReactDOM.createPortal(
     <Container
@@ -229,7 +241,11 @@ function Modal(props: ModalPropsType): any {
       onClick={onContainerClick}
     >
       {backdrop && (
-        <Backdrop {...backdropProps} onClick={onBackdropClick} open={open} />
+        <Backdrop
+          {...backdropProps}
+          onClick={onBackdropClick}
+          open={props.open}
+        />
       )}
       {React.cloneElement(React.Children.only(children) as any, childProps)}
     </Container>,
diff --git a/src/Modal/ModalLayout.tsx b/src/Modal/ModalLayout.tsx
index 4aad6ff4..b41d35a6 100644
--- a/src/Modal/ModalLayout.tsx
+++ b/src/Modal/ModalLayout.tsx
@@ -1,13 +1,7 @@
 import styled, { css } from 'styled-components';
 
 export interface ModalLayoutProps {
-  /**
-   * 是否全屏显示
-   */
   fullScreen?: boolean;
-  /**
-   * 自定义zIndex值
-   */
   zIndex?: number;
 }
 
@@ -16,9 +10,6 @@ const fullScreenCss = css`
   height: 100%;
 `;
 
-/**
- * Modal布局组件
- */
 const ModalLayout = styled.div<ModalLayoutProps>`
   ${(props) => props.fullScreen && fullScreenCss};
   position: fixed;
diff --git a/src/Modal/index.ts b/src/Modal/index.ts
index 2c4973ce..04b9d38c 100644
--- a/src/Modal/index.ts
+++ b/src/Modal/index.ts
@@ -1,4 +1,5 @@
 import Modal, { ModalPropsType } from './Modal';
 
-export { ModalPropsType };
+export { ModalPropsType as ModalProps };
+
 export default Modal;
diff --git a/src/transitions/Fade.tsx b/src/transitions/Fade.tsx
index 0576ec30..2109e831 100644
--- a/src/transitions/Fade.tsx
+++ b/src/transitions/Fade.tsx
@@ -1,5 +1,5 @@
-import createStyleTransition from './createStyleTransition';
 import { transitions } from '@sinoui/theme';
+import createStyleTransition from './createStyleTransition';
 
 const { duration, easing } = transitions;
 
diff --git a/src/transitions/createStyleTransition.tsx b/src/transitions/createStyleTransition.tsx
index 6348f389..fb765d02 100644
--- a/src/transitions/createStyleTransition.tsx
+++ b/src/transitions/createStyleTransition.tsx
@@ -117,41 +117,20 @@ export default function createStyleTransition<Props extends {}>(
   options: StyleTransitionOptions,
   defaultProps?: Props & StyleTransitionPropsType,
 ): React.ComponentType<Props & StyleTransitionPropsType> {
-  return class StyleTransition
-    extends React.Component<Props & StyleTransitionPropsType>
-    implements TransitionInterface {
-    public static defaultProps = defaultProps;
+  return function StyleTransition(props) {
+    const easing = () => {
+      return getEasing(props.easing, options.easing);
+    };
 
-    constructor(props: Props & StyleTransitionPropsType) {
-      super(props);
-
-      this.handleEnter = this.handleEnter.bind(this);
-      this.handleEntering = this.handleEntering.bind(this);
-      this.handleExit = this.handleExit.bind(this);
-      this.handleExiting = this.handleExiting.bind(this);
-      this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
-    }
-
-    get easing(): {
-      enter: string;
-      exit: string;
-    } {
-      return getEasing(this.props.easing, options.easing);
-    }
-
-    public getTimeout(
-      node: HTMLElement,
-    ): {
-      enter: number;
-      exit: number;
-    } {
+    const getTimeout = (node: HTMLElement) => {
       const timeout:
         | 'auto'
         | number
         | {
             enter: number;
             exit: number;
-          } = this.props.timeout || options.duration;
+          }
+        | undefined = props.timeout || options.duration;
       if (timeout === 'auto') {
         const duration = transitions.getAutoHeightDuration(node.clientHeight);
         return {
@@ -160,7 +139,7 @@ export default function createStyleTransition<Props extends {}>(
         };
       }
       return getDuration(timeout, options.duration);
-    }
+    };
 
     /**
      * 处理过渡的enter事件
@@ -170,9 +149,9 @@ export default function createStyleTransition<Props extends {}>(
      *  如果`HorizontalSlide`组件设置了`appear`属性，则会在刚创建节点时，
      *  调用此方法，且isAppearing为true；否则不会调用此方法。
      */
-    public handleEnter(node: HTMLElement, isAppearing: boolean) {
-      if (this.props.onEnter) {
-        this.props.onEnter(node, isAppearing);
+    const handleEnter = (node: HTMLElement, isAppearing: boolean) => {
+      if (props.onEnter) {
+        props.onEnter(node, isAppearing);
       }
 
       const enterStyle = {
@@ -180,7 +159,7 @@ export default function createStyleTransition<Props extends {}>(
         ...options.enterStyle(this, node, isAppearing),
       };
       Object.assign(node.style, enterStyle);
-    }
+    };
 
     /**
      * 处理过渡的entering事件
@@ -190,14 +169,14 @@ export default function createStyleTransition<Props extends {}>(
      *  如果`HorizontalSlide`组件设置了`appear`属性，则会在刚创建节点时，
      *  调用此方法，且isAppearing为true；否则不会调用此方法。
      */
-    public handleEntering(node: HTMLElement, isAppearing: boolean) {
+    const handleEntering = (node: HTMLElement, isAppearing: boolean) => {
       const activeStyle = options.enterActiveStyle
         ? options.enterActiveStyle(this, node, isAppearing)
         : {};
       if (!activeStyle.transition) {
         activeStyle.transition = transitions.create(options.transitionProps, {
-          duration: this.getTimeout(node).enter,
-          easing: this.easing.enter,
+          duration: getTimeout(node).enter,
+          easing: easing().enter,
         });
       }
 
@@ -208,10 +187,10 @@ export default function createStyleTransition<Props extends {}>(
 
       Object.assign(node.style, enterActiveStyle);
 
-      if (this.props.onEntering) {
-        this.props.onEntering(node, isAppearing);
+      if (props.onEntering) {
+        props.onEntering(node, isAppearing);
       }
-    }
+    };
 
     /**
      * 处理过渡的exit事件
@@ -221,7 +200,7 @@ export default function createStyleTransition<Props extends {}>(
      *  如果`HorizontalSlide`组件设置了`appear`属性，则会在刚创建节点时，
      *  调用此方法，且isAppearing为true；否则不会调用此方法。
      */
-    public handleExit(node: HTMLElement) {
+    const handleExit = (node: HTMLElement) => {
       const exitStyle = {
         transition: 'none',
         ...options.exitStyle(this, node),
@@ -229,17 +208,17 @@ export default function createStyleTransition<Props extends {}>(
 
       Object.assign(node.style, exitStyle);
 
-      if (this.props.onExit) {
-        this.props.onExit(node);
+      if (props.onExit) {
+        props.onExit(node);
       }
-    }
+    };
 
     /**
      * 处理过渡的exiting事件
      *
      * @param {HTMLElement} node 应用过渡效果的节点
      */
-    public handleExiting(node: HTMLElement) {
+    const handleExiting = (node: HTMLElement) => {
       const exitActiveStyle = options.exitActiveStyle
         ? options.exitActiveStyle(this, node)
         : {};
@@ -247,8 +226,8 @@ export default function createStyleTransition<Props extends {}>(
         exitActiveStyle.transition = transitions.create(
           options.transitionProps,
           {
-            duration: this.getTimeout(node).exit,
-            easing: this.easing.exit,
+            duration: getTimeout(node).exit,
+            easing: easing().exit,
           },
         );
       }
@@ -259,10 +238,10 @@ export default function createStyleTransition<Props extends {}>(
 
       Object.assign(node.style, style);
 
-      if (this.props.onExiting) {
-        this.props.onExiting(node);
+      if (props.onExiting) {
+        props.onExiting(node);
       }
-    }
+    };
 
     /**
      * 过渡结束监听器。
@@ -270,29 +249,31 @@ export default function createStyleTransition<Props extends {}>(
      * @param {HTMLElement} node 过渡元素
      * @param {() => void} next 通知`Transition`组件过渡结束的方法。
      */
-    public handleTransitionEnd(node: HTMLElement, next: () => void) {
-      if (this.props.timeout === 'auto') {
-        setTimeout(next, this.getTimeout(node).enter);
+    const handleTransitionEnd = (node: HTMLElement, next: () => void) => {
+      if (props.timeout === 'auto') {
+        setTimeout(next, getTimeout(node).enter);
       }
-    }
+    };
 
-    public render() {
-      const { transitionClasses, direction, timeout, ...props } = this
-        .props as StyleTransitionPropsType;
-      return (
-        <CSSTransition
-          {...props}
-          onEnter={this.handleEnter}
-          onEntering={this.handleEntering}
-          onExit={this.handleExit}
-          onExiting={this.handleExiting}
-          timeout={
-            timeout === 'auto' ? null : getDuration(timeout, options.duration)
-          }
-          classNames={transitionClasses || ''}
-          addEndListener={this.handleTransitionEnd}
-        />
-      );
-    }
+    const {
+      transitionClasses,
+      direction,
+      timeout = defaultProps && defaultProps.timeout,
+      ...rest
+    } = props as StyleTransitionPropsType;
+    return (
+      <CSSTransition
+        {...rest}
+        onEnter={handleEnter}
+        onEntering={handleEntering}
+        onExit={handleExit}
+        onExiting={handleExiting}
+        timeout={
+          timeout === 'auto' ? null : getDuration(timeout, options.duration)
+        }
+        classNames={transitionClasses || ''}
+        addEndListener={handleTransitionEnd}
+      />
+    );
   };
 }
diff --git a/stories/Dialog.stories.tsx b/stories/Dialog.stories.tsx
index f7c17744..8d0befc7 100644
--- a/stories/Dialog.stories.tsx
+++ b/stories/Dialog.stories.tsx
@@ -10,37 +10,27 @@ export default {
   title: 'Dialog',
 };
 
-export const 弹窗 = () => (
-  <StoryLayout>
-    <Dialog>
-      <DialogTitle>标题</DialogTitle>
-      <DialogContent>内容</DialogContent>
-      <DialogActions>
-        <Button>取消</Button>
-        <Button>确定</Button>
-      </DialogActions>
-    </Dialog>
-  </StoryLayout>
-);
-
-function DialogDemo() {
+function DialogDemo(props: any) {
   const [open, setOpen] = useState(false);
   return (
     <>
-      <Button onClick={() => setOpen(true)}>点击</Button>
-      <Dialog open={open} onBackdropClick={() => console.log(1)}>
-        <DialogTitle>标题</DialogTitle>
-        <DialogContent>内容</DialogContent>
+      <Button onClick={() => setOpen(true)}>CLICK</Button>
+      <Dialog open={open} onBackdropClick={() => console.log(1)} {...props}>
+        <DialogTitle>Use Google location service</DialogTitle>
+        <DialogContent>
+          Let Google help apps determine location. This means sending anonymous
+          location data to Google, even when no apps are running.
+        </DialogContent>
         <DialogActions>
-          <Button onClick={() => setOpen(false)}>取消</Button>
-          <Button onClick={() => setOpen(false)}>确定</Button>
+          <Button onClick={() => setOpen(false)}>DISAGREE</Button>
+          <Button onClick={() => setOpen(false)}>AGREE</Button>
         </DialogActions>
       </Dialog>
     </>
   );
 }
 
-export const 弹窗2 = () => (
+export const 基本使用 = () => (
   <StoryLayout>
     <DialogDemo />
   </StoryLayout>
@@ -48,26 +38,103 @@ export const 弹窗2 = () => (
 
 export const 不显示遮罩层 = () => (
   <StoryLayout>
-    <Dialog backdrop={false}>
-      <DialogTitle>标题</DialogTitle>
-      <DialogContent>内容</DialogContent>
-      <DialogActions>
-        <Button>取消</Button>
-        <Button>确定</Button>
-      </DialogActions>
-    </Dialog>
+    <DialogDemo backdrop={false} />
   </StoryLayout>
 );
 
 export const 按钮垂直显示 = () => (
   <StoryLayout>
     <Dialog>
-      <DialogTitle>标题</DialogTitle>
-      <DialogContent>内容</DialogContent>
+      <DialogTitle>Use Google location service</DialogTitle>
+      <DialogContent>
+        Let Google help apps determine location. This means sending anonymous
+        location data to Google, even when no apps are running.
+      </DialogContent>
       <DialogActions column>
-        <Button>取消</Button>
-        <Button>确定</Button>
+        <Button>DISAGREE</Button>
+        <Button>AGREE</Button>
       </DialogActions>
     </Dialog>
   </StoryLayout>
 );
+
+function DialogCloseDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>CLICK</Button>
+      <Dialog open={open} showCloseIcon onRequestClose={() => setOpen(false)}>
+        <DialogTitle>Use Google location service</DialogTitle>
+        <DialogContent>
+          Let Google help apps determine location. This means sending anonymous
+          location data to Google, even when no apps are running.
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>DISAGREE</Button>
+          <Button onClick={() => setOpen(false)}>AGREE</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+
+export const 显示关闭图标 = () => (
+  <StoryLayout>
+    <DialogCloseDemo />
+  </StoryLayout>
+);
+
+export const 设置弹窗不可以拖拽 = () => (
+  <StoryLayout>
+    <DialogDemo draggable={false} />
+  </StoryLayout>
+);
+
+function DialogBackDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>CLICK</Button>
+      <Dialog
+        open={open}
+        onBackdropClick={() => setOpen(false)}
+        backdropClick
+        absolute
+      >
+        <DialogTitle>Use Google location service</DialogTitle>
+        <DialogContent>
+          Let Google help apps determine location. This means sending anonymous
+          location data to Google, even when no apps are running.
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>DISAGREE</Button>
+          <Button onClick={() => setOpen(false)}>AGREE</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+
+export const 设置点击遮罩层的回调函数 = () => (
+  <StoryLayout>
+    <DialogBackDemo />
+  </StoryLayout>
+);
+
+export const 设置全屏显示 = () => (
+  <StoryLayout>
+    <DialogDemo fullScreen />
+  </StoryLayout>
+);
+
+export const 设置最大宽度显示 = () => (
+  <StoryLayout>
+    <DialogDemo fullWidth />
+  </StoryLayout>
+);
+
+export const 设置宽度自适应 = () => (
+  <StoryLayout>
+    <DialogDemo autoWidth />
+  </StoryLayout>
+);
diff --git a/yarn.lock b/yarn.lock
index 750dd895..0e700a88 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2099,6 +2099,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.2.4":
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.4.tgz#c7416225987ccdb719262766c1483da8f826838d"
+  integrity sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.9.15":
   version "16.9.23"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.23.tgz#1a66c6d468ba11a8943ad958a8cb3e737568271c"
@@ -10132,7 +10139,7 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^16.12.0, react-dom@^16.8.3:
+react-dom@^16.13.0, react-dom@^16.8.3:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.0.tgz#cdde54b48eb9e8a0ca1b3dc9943d9bb409b81866"
   integrity sha512-y09d2c4cG220DzdlFkPTnVvGTszVvNpC73v+AaLGLHbkpy3SSgvYq8x0rNwPJ/Rk/CicTNgk0hbHNw1gMEZAXg==

From 546f12a1c60e9e5803a795f637bcdee2a3bc0bf6 Mon Sep 17 00:00:00 2001
From: tianyanqiu <745916729@qq.com>
Date: Thu, 19 Mar 2020 22:26:47 +0800
Subject: [PATCH 05/28] =?UTF-8?q?chore(Dialog):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=8A=A5=E9=94=99=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Dialog/Dialog.test.tsx     | 1 -
 src/Dialog/DialogContainer.tsx | 8 +++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/Dialog/Dialog.test.tsx b/src/Dialog/Dialog.test.tsx
index e35adda8..98244591 100644
--- a/src/Dialog/Dialog.test.tsx
+++ b/src/Dialog/Dialog.test.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import renderer from 'react-test-renderer';
 import '@testing-library/jest-dom/extend-expect';
 import { ThemeProvider } from 'styled-components';
 import { defaultTheme } from '@sinoui/theme';
diff --git a/src/Dialog/DialogContainer.tsx b/src/Dialog/DialogContainer.tsx
index d3c8f71a..f84845a8 100644
--- a/src/Dialog/DialogContainer.tsx
+++ b/src/Dialog/DialogContainer.tsx
@@ -78,11 +78,13 @@ function DialogContainer(props: DialogContainerProps) {
         handler: '.sinoui-dialog-title',
         bounds: true,
       });
+
+      return () => {
+        drag.teardown();
+      };
     }
 
-    return () => {
-      drag.teardown();
-    };
+    return () => null;
   }, [dialogContainerRef, draggable]);
 
   /**

From 9bd7a2fece0b7c88a9a58a8ad5da4b407a920278 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Fri, 20 Mar 2020 09:59:05 +0800
Subject: [PATCH 06/28] =?UTF-8?q?chore:dialog=E6=96=87=E6=A1=A3=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E4=B8=8D=E5=8F=AF=E6=8B=96=E6=8B=BD=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/components/dialog.mdx | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/docs/docs/components/dialog.mdx b/docs/docs/components/dialog.mdx
index 52f613a9..c575508f 100644
--- a/docs/docs/components/dialog.mdx
+++ b/docs/docs/components/dialog.mdx
@@ -115,6 +115,39 @@ function DialogDemo() {
   <DialogDemo showCloseIcon onRequestClose />
 </ThemeProvider>
 
+## 设置弹窗不可以拖拽
+
+```tsx
+import Dialog from '@sinoui/core/Dialog';
+import DialogTitle from '@sinoui/core/DialogTitle';
+import DialogContent from '@sinoui/core/DialogContent';
+import DialogActions from '@sinoui/core/DialogActions';
+import Button from '@sinoui/core/Button';
+
+function DialogDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>点击</Button>
+      <Dialog open={open} draggable={false}>
+        <DialogTitle>Use Google location service</DialogTitle>
+        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>DISAGREE</Button>
+          <Button onClick={() => setOpen(false)}>AGREE</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+```
+
+效果如下：
+
+<ThemeProvider theme={defaultTheme}>
+  <DialogDemo draggable={false} />
+</ThemeProvider>
+
 ## 设置点击遮罩层的回调函数
 
 ```tsx

From 1b9e8f94b7a2289e011c8587ebc2953bb9397b91 Mon Sep 17 00:00:00 2001
From: tianyanqiu <745916729@qq.com>
Date: Fri, 20 Mar 2020 10:45:31 +0800
Subject: [PATCH 07/28] =?UTF-8?q?chore(Dialog):=20=E5=A4=84=E7=90=86ts?=
 =?UTF-8?q?=E8=AD=A6=E5=91=8A=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Dialog/__snapshots__/Dialog.test.tsx.snap | 62 -------------------
 src/Dialog/utils/Draggable.ts                 | 54 +++++++---------
 2 files changed, 22 insertions(+), 94 deletions(-)
 delete mode 100644 src/Dialog/__snapshots__/Dialog.test.tsx.snap

diff --git a/src/Dialog/__snapshots__/Dialog.test.tsx.snap b/src/Dialog/__snapshots__/Dialog.test.tsx.snap
deleted file mode 100644
index 26289940..00000000
--- a/src/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ /dev/null
@@ -1,62 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Dialog组件 快照测试 基本使用 1`] = `
-Array [
-  "ReactDOM.createPortal(",
-  <div
-    className="ModalLayout-g5nr25-0 jNRojG Dialog__ModalWrapper-sc-10h8ou0-0 ieHqTo"
-    onClick={[Function]}
-  >
-    <div
-      aria-hidden={true}
-      className="Backdrop__BackdropWrapper-sc-15mv4hm-0 dYcqsh"
-      data-sinoui-test="Backdrop"
-      onClick={[Function]}
-    />
-    <div
-      className="DialogWrapper-otdr06-0 hSmHOF sinoui-dialog"
-    >
-      <div
-        className="Typography__TypographyWrapper-sc-12agh80-0 imjgCm sinoui-typography sinoui-typography--H6 DialogTitle-sc-1z056jx-0 joiqub sinoui-dialog-title"
-        color="textPrimary"
-        type="H6"
-      >
-        Use Google location service?
-      </div>
-      <h6
-        className="Typography__TypographyWrapper-sc-12agh80-0 juBaHC sinoui-typography sinoui-typography--subtitle1 DialogContent-rvt14v-0 coPUFm sinoui-dialog-content children forwardedComponent theme"
-        color="textSecondary"
-        type="subtitle1"
-      >
-        Let Google help apps determine location. This means sending anonymous location data toGoogle, even when no apps are running.
-      </h6>
-      <div
-        className="DialogActions__DialogActionsWrapper-ibc7so-0 kTvEtc sinoui-dialog-actions"
-      >
-        <button
-          className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button-sc-15sa99-0 euJRxB sinoui-button"
-          color="primary"
-          role="button"
-          type="button"
-        >
-          Disagree
-        </button>
-        <button
-          className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button-sc-15sa99-0 euJRxB sinoui-button"
-          color="primary"
-          role="button"
-          type="button"
-        >
-          Agree
-        </button>
-      </div>
-      <iframe
-        className="Iframe-fna49j-0 IJdcU"
-        frameBorder={0}
-        scrolling="false"
-      />
-    </div>
-  </div>,
-  ", elRef.current, );",
-]
-`;
diff --git a/src/Dialog/utils/Draggable.ts b/src/Dialog/utils/Draggable.ts
index 014f0467..812084cd 100644
--- a/src/Dialog/utils/Draggable.ts
+++ b/src/Dialog/utils/Draggable.ts
@@ -23,20 +23,37 @@ export default class Draggable {
 
   private delta: Position = { x: 0, y: 0 };
 
-  private startX: number;
+  private startX = 0;
 
-  private startY: number;
+  private startY = 0;
 
-  private deltaBounds: DeltaBounds;
+  private deltaBounds: DeltaBounds = { x: [0, 0], y: [0, 0] };
 
-  private dragging: boolean;
+  private dragging = false;
 
   constructor(private dragConfig: DragConfig) {
     this.onContainerMouseDown = this.onContainerMouseDown.bind(this);
     this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this);
     this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this);
 
-    this.init();
+    this.container$ =
+      typeof this.dragConfig.container === 'string'
+        ? (document.querySelector(this.dragConfig.container) as HTMLElement)
+        : this.dragConfig.container;
+    this.handler$ = this.dragConfig.handler
+      ? (this.container$.querySelector(this.dragConfig.handler) as HTMLElement)
+      : this.container$;
+    this.pos = { x: 0, y: 0 };
+    this.delta = { x: 0, y: 0 };
+
+    if (!this.handler$) {
+      return;
+    }
+    this.handler$.addEventListener(
+      'mousedown',
+      this.onContainerMouseDown,
+      false,
+    );
   }
 
   /**
@@ -72,33 +89,6 @@ export default class Draggable {
     }
   }
 
-  /**
-   * 初始化
-   *
-   * @private
-   * @memberof Draggable
-   */
-  private init() {
-    this.container$ =
-      typeof this.dragConfig.container === 'string'
-        ? document.querySelector(this.dragConfig.container)
-        : this.dragConfig.container;
-    this.handler$ = this.dragConfig.handler
-      ? this.container$.querySelector(this.dragConfig.handler)
-      : this.container$;
-    this.pos = { x: 0, y: 0 };
-    this.delta = { x: 0, y: 0 };
-
-    if (!this.handler$) {
-      return;
-    }
-    this.handler$.addEventListener(
-      'mousedown',
-      this.onContainerMouseDown,
-      false,
-    );
-  }
-
   /**
    * 监听容器的鼠标按下事件
    *

From a976778d1ea73e12154280b1a50f02ea0af41cdc Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Fri, 20 Mar 2020 11:29:35 +0800
Subject: [PATCH 08/28] =?UTF-8?q?chore:=E8=B0=83=E6=95=B4closeIcon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Dialog/CloseIcon.tsx                      | 13 +++--
 src/Dialog/DialogContainer.tsx                | 55 +++++--------------
 src/Dialog/DialogWrapper.tsx                  |  2 +-
 src/DialogTitle/DialogTitle.tsx               |  7 ++-
 .../__snapshots__/DialogTitle.test.tsx.snap   |  8 +--
 5 files changed, 32 insertions(+), 53 deletions(-)

diff --git a/src/Dialog/CloseIcon.tsx b/src/Dialog/CloseIcon.tsx
index e0a18644..a12f3fe2 100644
--- a/src/Dialog/CloseIcon.tsx
+++ b/src/Dialog/CloseIcon.tsx
@@ -4,21 +4,26 @@ import SvgIcon from '@sinoui/core/SvgIcon';
 import { MdClose } from 'react-icons/md';
 import styled from 'styled-components';
 import classNames from 'classnames';
+import colorCss from '@sinoui/core/colorCss';
 
 export interface CloseIconProps {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const IconButtonWrapper = styled(IconButton)`
-  color: currentColor;
   position: absolute !important;
-  top: 0;
-  right: 0;
+  top: 8px;
+  right: 8px;
+  color: ${(props) => props.theme.palette.action.disabled};
+  padding: 12px;
 
   :hover {
-    color: white;
     transition: color 300ms;
     transition: background 300ms;
+
+    @media (hover: none) {
+      background-color: transparent;
+    }
   }
 `;
 
diff --git a/src/Dialog/DialogContainer.tsx b/src/Dialog/DialogContainer.tsx
index f84845a8..e49cd19a 100644
--- a/src/Dialog/DialogContainer.tsx
+++ b/src/Dialog/DialogContainer.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import DialogTitle from '@sinoui/core/DialogTitle';
-import DialogActions from '@sinoui/core/DialogActions';
 import Draggable from './utils/Draggable';
 import DialogWrapper from './DialogWrapper';
 import Iframe from './Iframe';
@@ -87,47 +86,21 @@ function DialogContainer(props: DialogContainerProps) {
     return () => null;
   }, [dialogContainerRef, draggable]);
 
-  /**
-   * 获取Dialog子组件的排序号
-   *
-   * @param {Node} node
-   */
-  const getDialogNodeOrderNode = (node: React.ReactElement<any>) => {
-    switch (node.type) {
-      case DialogTitle:
-        return 0;
-      case DialogActions:
-        return 2;
-      default:
-        return 1;
+  const nodes = React.Children.toArray(children).map((node: any) => {
+    if (node.type === DialogTitle) {
+      return (
+        <DialogTitle
+          key="dialogTitle"
+          {...node.props}
+          showCloseIcon={showCloseIcon}
+        >
+          {node.props.children}
+          {showCloseIcon && <CloseIcon onClick={onRequestClose} />}
+        </DialogTitle>
+      );
     }
-  };
-
-  const sortDialogChildren = (
-    node1: React.ReactElement<any>,
-    node2: React.ReactElement<any>,
-  ) => {
-    return getDialogNodeOrderNode(node1) - getDialogNodeOrderNode(node2);
-  };
-
-  const nodes = React.Children.toArray(children)
-    .map((node: any) => {
-      if (node.type === DialogTitle) {
-        return (
-          <DialogTitle
-            key="dialogTitle"
-            {...node.props}
-            showCloseIcon={showCloseIcon}
-          >
-            {node.props.children}
-            {showCloseIcon && <CloseIcon onClick={onRequestClose} />}
-          </DialogTitle>
-        );
-      }
-      return node;
-    })
-    .filter(Boolean)
-    .sort(sortDialogChildren);
+    return node;
+  });
 
   return (
     <DialogWrapper
diff --git a/src/Dialog/DialogWrapper.tsx b/src/Dialog/DialogWrapper.tsx
index d8ce9909..c5928a37 100644
--- a/src/Dialog/DialogWrapper.tsx
+++ b/src/Dialog/DialogWrapper.tsx
@@ -55,7 +55,7 @@ const defaultBigSizeStyle = css`
 const DialogWrapper = styled.div<DialogWrapperProps>`
   background: ${(props) => props.theme.palette.background.paper};
   padding: 0;
-  box-shadow: ${shadows[5]};
+  box-shadow: ${shadows[24]};
   position: relative;
   z-index: ${(props) => props.theme.zIndex.dialog};
   display: flex;
diff --git a/src/DialogTitle/DialogTitle.tsx b/src/DialogTitle/DialogTitle.tsx
index 298a9156..80eaa35c 100644
--- a/src/DialogTitle/DialogTitle.tsx
+++ b/src/DialogTitle/DialogTitle.tsx
@@ -6,19 +6,20 @@ const flexStyle = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-top: 16px;
+  padding: 16px;
 `;
 
 /**
  * 弹窗标题组件
  */
 const DialogTitle = styled(Typography).attrs(({ className }) => ({
-  type: 'H6',
+  type: 'h6',
   className: classNames('sinoui-dialog-title', className),
 }))<{ showCloseIcon?: boolean }>`
   margin: 0;
-  padding: 24px 24px 20px 24px;
+  padding: 16px 24px;
   flex: 0 0 auto;
+  cursor: move;
   user-select: none;
   ${(props) => props.showCloseIcon && flexStyle};
 `;
diff --git a/src/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap b/src/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap
index 16a9645a..1ab5bf5d 100644
--- a/src/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap
+++ b/src/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DialogTitle组件 快照测试 基本使用 1`] = `
-<div
-  className="Typography__TypographyWrapper-sc-12agh80-0 imjgCm sinoui-typography sinoui-typography--H6 DialogTitle-sc-1z056jx-0 joiqub sinoui-dialog-title"
+<h6
+  className="Typography__TypographyWrapper-sc-12agh80-0 bKkQU sinoui-typography sinoui-typography--h6 DialogTitle-sc-1z056jx-0 bkFOVa sinoui-dialog-title"
   color="textPrimary"
-  type="H6"
+  type="h6"
 >
   标题
-</div>
+</h6>
 `;

From bd0d5923e91d0b63023724988038117479d6f8a7 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Fri, 20 Mar 2020 14:17:24 +0800
Subject: [PATCH 09/28] =?UTF-8?q?chore:=E7=BB=84=E4=BB=B6=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Dialog/CloseIcon.tsx                      |  1 -
 src/Dialog/Dialog.test.tsx                    | 38 ++++++++++++++-----
 src/Dialog/Dialog.tsx                         |  4 ++
 src/Dialog/DialogContainer.tsx                |  5 ++-
 src/DialogActions/DialogActions.test.tsx      | 17 +++++++++
 src/DialogTitle/DialogTitle.tsx               |  4 +-
 .../__snapshots__/DialogTitle.test.tsx.snap   |  2 +-
 src/Modal/Modal.tsx                           |  1 +
 stories/Dialog.stories.tsx                    |  2 +-
 9 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/src/Dialog/CloseIcon.tsx b/src/Dialog/CloseIcon.tsx
index a12f3fe2..09c3df80 100644
--- a/src/Dialog/CloseIcon.tsx
+++ b/src/Dialog/CloseIcon.tsx
@@ -4,7 +4,6 @@ import SvgIcon from '@sinoui/core/SvgIcon';
 import { MdClose } from 'react-icons/md';
 import styled from 'styled-components';
 import classNames from 'classnames';
-import colorCss from '@sinoui/core/colorCss';
 
 export interface CloseIconProps {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
diff --git a/src/Dialog/Dialog.test.tsx b/src/Dialog/Dialog.test.tsx
index 98244591..96ddeae9 100644
--- a/src/Dialog/Dialog.test.tsx
+++ b/src/Dialog/Dialog.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import renderer, { act } from 'react-test-renderer';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { ThemeProvider } from 'styled-components';
 import { defaultTheme } from '@sinoui/theme';
@@ -10,6 +11,7 @@ import DialogActions from '@sinoui/core/DialogActions';
 import Button from '@sinoui/core/Button';
 
 describe('Dialog组件 单元测试', () => {
+  afterEach(cleanup);
   test('测试显示关闭按钮', () => {
     const { getByTestId } = render(
       <ThemeProvider theme={defaultTheme}>
@@ -38,14 +40,6 @@ describe('Dialog组件 单元测试', () => {
       <ThemeProvider theme={defaultTheme}>
         <Dialog fullScreen data-testid="dialog">
           <DialogTitle>Use Google location service?</DialogTitle>
-          <DialogContent>
-            Let Google help apps determine location. This means sending
-            anonymous location data toGoogle, even when no apps are running.
-          </DialogContent>
-          <DialogActions>
-            <Button>Disagree</Button>
-            <Button>Agree</Button>
-          </DialogActions>
         </Dialog>
       </ThemeProvider>,
     );
@@ -53,6 +47,32 @@ describe('Dialog组件 单元测试', () => {
     const test = getAllByTestId('dialog')[0];
     expect(test).toHaveStyle('width:100%;height:100%');
   });
+
+  test('不显示遮罩层', () => {
+    const { container } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <Dialog backdrop={false} data-testid="dialog">
+          <DialogTitle>Use Google location service?</DialogTitle>
+        </Dialog>
+      </ThemeProvider>,
+    );
+
+    const test = container.querySelector('.sinoui-modal--backdrop');
+    expect(test).toBeFalsy();
+  });
+
+  test('弹窗不可以拖拽', () => {
+    const { container } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <Dialog draggable={false} data-testid="dialog">
+          <DialogTitle>Use Google location service?</DialogTitle>
+        </Dialog>
+      </ThemeProvider>,
+    );
+
+    const test = container.querySelector('.sinoui-modal--draggable');
+    expect(test).toBeFalsy();
+  });
 });
 
 describe('Dialog组件 快照测试', () => {
diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index ce0d4fb9..18c0d0a7 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -40,6 +40,10 @@ export interface DialogProps extends DialogContainerProps {
    * @type {(SyntheticMouseEvent<*>) => void}
    */
   onBackdropClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * 是否显示遮罩层
+   */
+  backdrop?: boolean;
 }
 
 function Dialog(props: DialogProps) {
diff --git a/src/Dialog/DialogContainer.tsx b/src/Dialog/DialogContainer.tsx
index e49cd19a..25ac79a1 100644
--- a/src/Dialog/DialogContainer.tsx
+++ b/src/Dialog/DialogContainer.tsx
@@ -93,6 +93,7 @@ function DialogContainer(props: DialogContainerProps) {
           key="dialogTitle"
           {...node.props}
           showCloseIcon={showCloseIcon}
+          draggable={draggable}
         >
           {node.props.children}
           {showCloseIcon && <CloseIcon onClick={onRequestClose} />}
@@ -106,7 +107,9 @@ function DialogContainer(props: DialogContainerProps) {
     <DialogWrapper
       fullScreen={fullScreen}
       fullWidth={fullWidth}
-      className={classNames('sinoui-dialog', className)}
+      className={classNames('sinoui-dialog', className, {
+        'sinoui-dialog--draggable': draggable,
+      })}
       autoWidth={autoWidth}
       {...rest}
       ref={dialogContainerRef}
diff --git a/src/DialogActions/DialogActions.test.tsx b/src/DialogActions/DialogActions.test.tsx
index 03410708..c7f46b4a 100644
--- a/src/DialogActions/DialogActions.test.tsx
+++ b/src/DialogActions/DialogActions.test.tsx
@@ -1,11 +1,28 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { ThemeProvider } from 'styled-components';
 import { defaultTheme } from '@sinoui/theme';
 import DialogActions from '@sinoui/core/DialogActions';
 import Button from '@sinoui/core/Button';
 
+describe('DialogActions组件 单元测试', () => {
+  afterEach(cleanup);
+  test('测试按钮垂直显示', () => {
+    const { container } = render(
+      <ThemeProvider theme={defaultTheme}>
+        <DialogActions column>
+          <Button>Disagree</Button>
+          <Button>Agree</Button>
+        </DialogActions>
+      </ThemeProvider>,
+    );
+    const test = container.querySelector('.sinoui-dialog-actions');
+    expect(test).toHaveStyle('flex-direction:column');
+  });
+});
+
 describe('DialogActions组件 快照测试', () => {
   it('基本使用', () => {
     const tree = renderer
diff --git a/src/DialogTitle/DialogTitle.tsx b/src/DialogTitle/DialogTitle.tsx
index 80eaa35c..03266f5a 100644
--- a/src/DialogTitle/DialogTitle.tsx
+++ b/src/DialogTitle/DialogTitle.tsx
@@ -15,11 +15,11 @@ const flexStyle = css`
 const DialogTitle = styled(Typography).attrs(({ className }) => ({
   type: 'h6',
   className: classNames('sinoui-dialog-title', className),
-}))<{ showCloseIcon?: boolean }>`
+}))<{ showCloseIcon?: boolean; draggable?: boolean }>`
   margin: 0;
   padding: 16px 24px;
   flex: 0 0 auto;
-  cursor: move;
+  cursor: ${(props) => props.draggable && 'move'};
   user-select: none;
   ${(props) => props.showCloseIcon && flexStyle};
 `;
diff --git a/src/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap b/src/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap
index 1ab5bf5d..33f3372a 100644
--- a/src/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap
+++ b/src/DialogTitle/__snapshots__/DialogTitle.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`DialogTitle组件 快照测试 基本使用 1`] = `
 <h6
-  className="Typography__TypographyWrapper-sc-12agh80-0 bKkQU sinoui-typography sinoui-typography--h6 DialogTitle-sc-1z056jx-0 bkFOVa sinoui-dialog-title"
+  className="Typography__TypographyWrapper-sc-12agh80-0 bKkQU sinoui-typography sinoui-typography--h6 DialogTitle-sc-1z056jx-0 pDzwY sinoui-dialog-title"
   color="textPrimary"
   type="h6"
 >
diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx
index 5c63f21e..df0b05bd 100644
--- a/src/Modal/Modal.tsx
+++ b/src/Modal/Modal.tsx
@@ -245,6 +245,7 @@ function Modal(props: ModalPropsType) {
           {...backdropProps}
           onClick={onBackdropClick}
           open={props.open}
+          className="sinoui-modal--backdrop"
         />
       )}
       {React.cloneElement(React.Children.only(children) as any, childProps)}
diff --git a/stories/Dialog.stories.tsx b/stories/Dialog.stories.tsx
index 8d0befc7..9c4024f9 100644
--- a/stories/Dialog.stories.tsx
+++ b/stories/Dialog.stories.tsx
@@ -15,7 +15,7 @@ function DialogDemo(props: any) {
   return (
     <>
       <Button onClick={() => setOpen(true)}>CLICK</Button>
-      <Dialog open={open} onBackdropClick={() => console.log(1)} {...props}>
+      <Dialog open={open} {...props}>
         <DialogTitle>Use Google location service</DialogTitle>
         <DialogContent>
           Let Google help apps determine location. This means sending anonymous

From 3c6e39f5c1481d3797439f441131af1cafadd926 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Fri, 20 Mar 2020 17:23:39 +0800
Subject: [PATCH 10/28] =?UTF-8?q?chore:=E5=8A=A8=E7=94=BB=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Dialog/Dialog.tsx                     |  42 +++-
 src/Dialog/DialogContainer.tsx            |   2 +-
 src/Modal/Backdrop.tsx                    |  44 +++-
 src/transitions/Fade.tsx                  |  37 ---
 src/transitions/createStyleTransition.tsx | 279 ----------------------
 src/transitions/transitionUtils.ts        |  59 -----
 6 files changed, 73 insertions(+), 390 deletions(-)
 delete mode 100644 src/transitions/Fade.tsx
 delete mode 100644 src/transitions/createStyleTransition.tsx
 delete mode 100644 src/transitions/transitionUtils.ts

diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index 18c0d0a7..57d5def8 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -1,9 +1,29 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import Modal from '@sinoui/core/Modal';
-import Fade from '../transitions/Fade';
+import { CSSTransition } from 'react-transition-group';
 import DialogContainer, { DialogContainerProps } from './DialogContainer';
 
+const GlobalStyle = createGlobalStyle`
+.sinoui-dialog-enter {
+   opacity: 0;
+}
+
+.sinoui-dialog-enter-active {
+  opacity: 1;
+  transition: opacity 200ms;
+}
+
+.sinoui-dialog-exit { 
+  opacity: 1;
+}
+
+.sinoui-dialog-exit-active { 
+   opacity: 0;
+  transition: opacity 200ms;
+}
+`;
+
 const ModalWrapper = styled(Modal)`
   display: flex;
   justify-content: center;
@@ -49,16 +69,24 @@ export interface DialogProps extends DialogContainerProps {
 function Dialog(props: DialogProps) {
   const {
     backdropClick = true,
-    transition: Transition = Fade,
-    transitionDuration,
+    transitionDuration = 300,
     open,
     ...rest
   } = props;
   return (
     <ModalWrapper {...rest} backdropClick={backdropClick} open={open}>
-      <Transition timeout={transitionDuration} appear in={open}>
-        <DialogContainer {...props} />
-      </Transition>
+      <CSSTransition
+        timeout={transitionDuration}
+        appear
+        in={open}
+        classNames="sinoui-dialog"
+        unmountOnExit
+      >
+        <>
+          <DialogContainer {...props} />
+          <GlobalStyle />
+        </>
+      </CSSTransition>
     </ModalWrapper>
   );
 }
diff --git a/src/Dialog/DialogContainer.tsx b/src/Dialog/DialogContainer.tsx
index 25ac79a1..cf399859 100644
--- a/src/Dialog/DialogContainer.tsx
+++ b/src/Dialog/DialogContainer.tsx
@@ -107,7 +107,7 @@ function DialogContainer(props: DialogContainerProps) {
     <DialogWrapper
       fullScreen={fullScreen}
       fullWidth={fullWidth}
-      className={classNames('sinoui-dialog', className, {
+      className={classNames(className, {
         'sinoui-dialog--draggable': draggable,
       })}
       autoWidth={autoWidth}
diff --git a/src/Modal/Backdrop.tsx b/src/Modal/Backdrop.tsx
index a20035ad..e8dd7d0d 100644
--- a/src/Modal/Backdrop.tsx
+++ b/src/Modal/Backdrop.tsx
@@ -1,6 +1,26 @@
 import React from 'react';
-import styled from 'styled-components';
-import Fade from '../transitions/Fade';
+import styled, { createGlobalStyle } from 'styled-components';
+import { CSSTransition } from 'react-transition-group';
+
+const GlobalStyle = createGlobalStyle`
+.sinoui-dialog-back-enter {
+   opacity: 0;
+}
+
+.sinoui-dialog-back-enter-active {
+  opacity: 1;
+  transition: opacity 200ms;
+}
+
+.sinoui-dialog-back-exit { 
+  opacity: 1;
+}
+
+.sinoui-dialog-back-exit-active { 
+   opacity: 0;
+  transition: opacity 200ms;
+}
+`;
 
 const BackdropWrapper = styled.div.attrs({
   'aria-hidden': true,
@@ -28,7 +48,7 @@ export interface BackdropProps {
   /**
    * transitionDuration
    */
-  transitionDuration?: 'auto' | number;
+  transitionDuration?: number;
   /**
    * 点击事件
    */
@@ -40,10 +60,20 @@ export interface BackdropProps {
 }
 
 export default function Backdrop(props: BackdropProps) {
-  const { open, transitionDuration } = props;
+  const { open, transitionDuration = 300 } = props;
   return (
-    <Fade appear in={open} timeout={transitionDuration} {...props}>
-      <BackdropWrapper />
-    </Fade>
+    <>
+      <CSSTransition
+        appear
+        in={open}
+        timeout={transitionDuration}
+        {...props}
+        classNames="sinoui-dialog-back"
+        unmountOnExit
+      >
+        <BackdropWrapper />
+      </CSSTransition>
+      <GlobalStyle />
+    </>
   );
 }
diff --git a/src/transitions/Fade.tsx b/src/transitions/Fade.tsx
deleted file mode 100644
index 2109e831..00000000
--- a/src/transitions/Fade.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { transitions } from '@sinoui/theme';
-import createStyleTransition from './createStyleTransition';
-
-const { duration, easing } = transitions;
-
-// 默认的过渡时长
-const TRANSITION_DURATION = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen,
-};
-
-/**
- * 淡入淡出效果。内部使用
- * [react-transition-group/CSSTransition](https://reactcommunity.org/react-transition-group/#CSSTransition)实现过渡效果。
- */
-const Fade = createStyleTransition({
-  enterStyle: () => ({
-    opacity: 0,
-  }),
-  enterToStyle: () => ({
-    opacity: 1,
-  }),
-  exitStyle: () => ({
-    opacity: 1,
-  }),
-  exitToStyle: () => ({
-    opacity: 0,
-  }),
-  transitionProps: ['opacity'],
-  duration: TRANSITION_DURATION,
-  easing: {
-    enter: easing.easeInOut,
-    exit: easing.easeInOut,
-  },
-});
-
-export default Fade;
diff --git a/src/transitions/createStyleTransition.tsx b/src/transitions/createStyleTransition.tsx
deleted file mode 100644
index fb765d02..00000000
--- a/src/transitions/createStyleTransition.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import React from 'react';
-import { CSSTransition } from 'react-transition-group';
-import { transitions } from '@sinoui/theme';
-import { getDuration, getEasing } from './transitionUtils';
-
-export interface StyleTransitionPropsType {
-  appear?: boolean;
-  in?: boolean;
-  /**
-   * 过渡效果的方向
-   *
-   * @type {('left' | 'right')}
-   */
-  direction?: 'left' | 'right' | 'up' | 'down';
-  /**
-   * 子节点
-   *
-   * @type {Node}
-   */
-  children?: React.ReactNode;
-  /**
-   * 过渡时长。'auto'表示会根据元素高度自动计算过渡时长
-   *
-   * @type {(number
-   *     | {
-   *         enter: number,
-   *         exit: number,
-   *       })}
-   */
-  timeout?:
-    | 'auto'
-    | number
-    | {
-        enter: number;
-        exit: number;
-      };
-  /**
-   * 指定过渡时应用的css类名。
-   */
-  transitionClasses?:
-    | string
-    | {
-        appear?: string;
-        appearActive?: string;
-        enter?: string;
-        enterActive?: string;
-        exit?: string;
-        exitActive?: string;
-      };
-  easing?: string;
-  onEnter?: (node: HTMLElement, isAccept: boolean) => void;
-  onEntering?: (node: HTMLElement, isAccept: boolean) => void;
-  onEntered?: (node: HTMLElement, isAccept: boolean) => void;
-  onExit?: (node: HTMLElement) => void;
-  onExiting?: (node: HTMLElement) => void;
-  onExited?: (node: HTMLElement) => void;
-}
-
-export interface StyleTransitionOptions {
-  enterStyle: (
-    transition: TransitionInterface,
-    node: HTMLElement,
-    isAppearing: boolean,
-  ) => React.CSSProperties;
-  enterActiveStyle?: (
-    transition: TransitionInterface,
-    node: HTMLElement,
-    isAppearing: boolean,
-  ) => React.CSSProperties;
-  enterToStyle: (
-    transition: TransitionInterface,
-    node: HTMLElement,
-    isAppearing: boolean,
-  ) => React.CSSProperties;
-  exitStyle: (
-    transition: TransitionInterface,
-    node: HTMLElement,
-  ) => React.CSSProperties;
-  exitActiveStyle?: (
-    transition: TransitionInterface,
-    node: HTMLElement,
-  ) => React.CSSProperties;
-  exitToStyle: (
-    transition: TransitionInterface,
-    node: HTMLElement,
-  ) => React.CSSProperties;
-  transitionProps?: string[];
-  duration?: {
-    enter: number;
-    exit: number;
-  };
-  easing?: {
-    enter: string;
-    exit: string;
-  };
-}
-
-export interface TransitionInterface {
-  props: StyleTransitionPropsType;
-  getTimeout: (
-    e: HTMLElement,
-  ) => {
-    enter: number;
-    exit: number;
-  };
-}
-
-/**
- * 创建通过css样式定义过渡效果的过渡组件。
- *
- * 元素入场过渡： 先应用`enterStyle`，一帧（16ms）之后，应用`enterActiveStyle`和`enterToStyle`。
- *
- * 元素出场过渡： 先应用`exitStyle`，一帧（16ms）之后，应用`exitActiveStyle`和`enterToStyle`。
- *
- */
-export default function createStyleTransition<Props extends {}>(
-  options: StyleTransitionOptions,
-  defaultProps?: Props & StyleTransitionPropsType,
-): React.ComponentType<Props & StyleTransitionPropsType> {
-  return function StyleTransition(props) {
-    const easing = () => {
-      return getEasing(props.easing, options.easing);
-    };
-
-    const getTimeout = (node: HTMLElement) => {
-      const timeout:
-        | 'auto'
-        | number
-        | {
-            enter: number;
-            exit: number;
-          }
-        | undefined = props.timeout || options.duration;
-      if (timeout === 'auto') {
-        const duration = transitions.getAutoHeightDuration(node.clientHeight);
-        return {
-          enter: duration,
-          exit: duration,
-        };
-      }
-      return getDuration(timeout, options.duration);
-    };
-
-    /**
-     * 处理过渡的enter事件
-     *
-     * @param {HTMLElement} node 应用过渡效果的节点
-     * @param {boolean} isAppearing 表示是否是刚创建节点时机。
-     *  如果`HorizontalSlide`组件设置了`appear`属性，则会在刚创建节点时，
-     *  调用此方法，且isAppearing为true；否则不会调用此方法。
-     */
-    const handleEnter = (node: HTMLElement, isAppearing: boolean) => {
-      if (props.onEnter) {
-        props.onEnter(node, isAppearing);
-      }
-
-      const enterStyle = {
-        transition: 'none',
-        ...options.enterStyle(this, node, isAppearing),
-      };
-      Object.assign(node.style, enterStyle);
-    };
-
-    /**
-     * 处理过渡的entering事件
-     *
-     * @param {HTMLElement} node 应用过渡效果的节点
-     * @param {boolean} isAppearing 表示是否是刚创建节点时机。
-     *  如果`HorizontalSlide`组件设置了`appear`属性，则会在刚创建节点时，
-     *  调用此方法，且isAppearing为true；否则不会调用此方法。
-     */
-    const handleEntering = (node: HTMLElement, isAppearing: boolean) => {
-      const activeStyle = options.enterActiveStyle
-        ? options.enterActiveStyle(this, node, isAppearing)
-        : {};
-      if (!activeStyle.transition) {
-        activeStyle.transition = transitions.create(options.transitionProps, {
-          duration: getTimeout(node).enter,
-          easing: easing().enter,
-        });
-      }
-
-      const enterActiveStyle = {
-        ...activeStyle,
-        ...options.enterToStyle(this, node, isAppearing),
-      };
-
-      Object.assign(node.style, enterActiveStyle);
-
-      if (props.onEntering) {
-        props.onEntering(node, isAppearing);
-      }
-    };
-
-    /**
-     * 处理过渡的exit事件
-     *
-     * @param {HTMLElement} node 应用过渡效果的节点
-     * @param {boolean} isAppearing 表示是否是刚创建节点时机。
-     *  如果`HorizontalSlide`组件设置了`appear`属性，则会在刚创建节点时，
-     *  调用此方法，且isAppearing为true；否则不会调用此方法。
-     */
-    const handleExit = (node: HTMLElement) => {
-      const exitStyle = {
-        transition: 'none',
-        ...options.exitStyle(this, node),
-      };
-
-      Object.assign(node.style, exitStyle);
-
-      if (props.onExit) {
-        props.onExit(node);
-      }
-    };
-
-    /**
-     * 处理过渡的exiting事件
-     *
-     * @param {HTMLElement} node 应用过渡效果的节点
-     */
-    const handleExiting = (node: HTMLElement) => {
-      const exitActiveStyle = options.exitActiveStyle
-        ? options.exitActiveStyle(this, node)
-        : {};
-      if (!exitActiveStyle.transition) {
-        exitActiveStyle.transition = transitions.create(
-          options.transitionProps,
-          {
-            duration: getTimeout(node).exit,
-            easing: easing().exit,
-          },
-        );
-      }
-      const style = {
-        ...exitActiveStyle,
-        ...options.exitToStyle(this, node),
-      };
-
-      Object.assign(node.style, style);
-
-      if (props.onExiting) {
-        props.onExiting(node);
-      }
-    };
-
-    /**
-     * 过渡结束监听器。
-     *
-     * @param {HTMLElement} node 过渡元素
-     * @param {() => void} next 通知`Transition`组件过渡结束的方法。
-     */
-    const handleTransitionEnd = (node: HTMLElement, next: () => void) => {
-      if (props.timeout === 'auto') {
-        setTimeout(next, getTimeout(node).enter);
-      }
-    };
-
-    const {
-      transitionClasses,
-      direction,
-      timeout = defaultProps && defaultProps.timeout,
-      ...rest
-    } = props as StyleTransitionPropsType;
-    return (
-      <CSSTransition
-        {...rest}
-        onEnter={handleEnter}
-        onEntering={handleEntering}
-        onExit={handleExit}
-        onExiting={handleExiting}
-        timeout={
-          timeout === 'auto' ? null : getDuration(timeout, options.duration)
-        }
-        classNames={transitionClasses || ''}
-        addEndListener={handleTransitionEnd}
-      />
-    );
-  };
-}
diff --git a/src/transitions/transitionUtils.ts b/src/transitions/transitionUtils.ts
deleted file mode 100644
index 4e036c95..00000000
--- a/src/transitions/transitionUtils.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-export interface TransitionTimeout {
-  enter: number;
-  exit: number;
-}
-
-export interface TransitionEasing {
-  enter: string;
-  exit: string;
-}
-
-/**
- * 获取过渡时长
- *
- * @param {(number | {
- *  enter: number,
- *   exit: number,
- * })} timeout
- * @param {({
- *   enter: number,
- *   exit: number,
- * })} defaultTimeout
- */
-export function getDuration(
-  timeout?: number | TransitionTimeout,
-  defaultTimeout?: TransitionTimeout,
-): TransitionTimeout {
-  if (!timeout) {
-    return defaultTimeout;
-  }
-  if (typeof timeout === 'number') {
-    return {
-      enter: timeout,
-      exit: timeout,
-    };
-  }
-  return timeout;
-}
-
-/**
- * 获取过渡效果的缓动函数
- *
- * @param {(string | TransitionEasing)} easing
- * @param {TransitionEasing} defaultEasing
- */
-export function getEasing(
-  easing?: string | TransitionEasing,
-  defaultEasing?: TransitionEasing,
-): TransitionEasing {
-  if (!easing) {
-    return defaultEasing;
-  }
-  if (typeof easing === 'string') {
-    return {
-      enter: easing,
-      exit: easing,
-    };
-  }
-  return easing;
-}

From eff9233403458d8d33f22c45b8c77e3f96cd8435 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Mon, 23 Mar 2020 18:07:16 +0800
Subject: [PATCH 11/28] =?UTF-8?q?chore:dialog=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Dialog/Dialog.tsx  | 24 ++++++++++++++----------
 src/Modal/Backdrop.tsx | 42 +++++++++++++++++++++++++-----------------
 2 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index 57d5def8..e2c10d9b 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
+import { transitions } from '@sinoui/theme';
 import Modal from '@sinoui/core/Modal';
 import { CSSTransition } from 'react-transition-group';
 import DialogContainer, { DialogContainerProps } from './DialogContainer';
 
+const { duration, easing } = transitions;
+
 const GlobalStyle = createGlobalStyle`
 .sinoui-dialog-enter {
    opacity: 0;
@@ -11,7 +14,7 @@ const GlobalStyle = createGlobalStyle`
 
 .sinoui-dialog-enter-active {
   opacity: 1;
-  transition: opacity 200ms;
+  transition: opacity ${duration.enteringScreen} ${easing.easeInOut};
 }
 
 .sinoui-dialog-exit { 
@@ -19,8 +22,8 @@ const GlobalStyle = createGlobalStyle`
 }
 
 .sinoui-dialog-exit-active { 
-   opacity: 0;
-  transition: opacity 200ms;
+  opacity: 0;
+  transition: opacity ${duration.leavingScreen} ${easing.easeInOut};
 }
 `;
 
@@ -48,12 +51,7 @@ export interface DialogProps extends DialogContainerProps {
   /**
    * 过渡动画时长
    */
-  transitionDuration?:
-    | number
-    | {
-        enter: number;
-        exit: number;
-      };
+  transitionDuration?: number;
   /**
    * backdrop被点击时的回调函数
    *
@@ -64,13 +62,18 @@ export interface DialogProps extends DialogContainerProps {
    * 是否显示遮罩层
    */
   backdrop?: boolean;
+  /**
+   * 过渡结束监听器
+   */
+  addEndListener?: any;
 }
 
 function Dialog(props: DialogProps) {
   const {
     backdropClick = true,
-    transitionDuration = 300,
+    transitionDuration,
     open,
+    addEndListener,
     ...rest
   } = props;
   return (
@@ -81,6 +84,7 @@ function Dialog(props: DialogProps) {
         in={open}
         classNames="sinoui-dialog"
         unmountOnExit
+        addEndListener={addEndListener}
       >
         <>
           <DialogContainer {...props} />
diff --git a/src/Modal/Backdrop.tsx b/src/Modal/Backdrop.tsx
index e8dd7d0d..71955709 100644
--- a/src/Modal/Backdrop.tsx
+++ b/src/Modal/Backdrop.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import { CSSTransition } from 'react-transition-group';
+import { transitions } from '@sinoui/theme';
+
+const { duration, easing } = transitions;
 
 const GlobalStyle = createGlobalStyle`
 .sinoui-dialog-back-enter {
-   opacity: 0;
+  opacity: 0;
 }
 
 .sinoui-dialog-back-enter-active {
   opacity: 1;
-  transition: opacity 200ms;
+  transition: opacity ${duration.enteringScreen} ${easing.easeInOut};
 }
 
 .sinoui-dialog-back-exit { 
@@ -17,8 +20,8 @@ const GlobalStyle = createGlobalStyle`
 }
 
 .sinoui-dialog-back-exit-active { 
-   opacity: 0;
-  transition: opacity 200ms;
+  opacity: 0;
+  transition: opacity ${duration.leavingScreen} ${easing.easeInOut};
 }
 `;
 
@@ -57,23 +60,28 @@ export interface BackdropProps {
    * 添加自定义类名
    */
   className?: string;
+  /**
+   * 过渡结束监听器
+   */
+  addEndListener?: any;
 }
 
 export default function Backdrop(props: BackdropProps) {
-  const { open, transitionDuration = 300 } = props;
+  const { open, transitionDuration, addEndListener } = props;
   return (
-    <>
-      <CSSTransition
-        appear
-        in={open}
-        timeout={transitionDuration}
-        {...props}
-        classNames="sinoui-dialog-back"
-        unmountOnExit
-      >
+    <CSSTransition
+      appear
+      in={open}
+      timeout={transitionDuration}
+      {...props}
+      classNames="sinoui-dialog-back"
+      unmountOnExit
+      addEndListener={addEndListener}
+    >
+      <>
         <BackdropWrapper />
-      </CSSTransition>
-      <GlobalStyle />
-    </>
+        <GlobalStyle />
+      </>
+    </CSSTransition>
   );
 }

From 54d9da66dcdc597a75e21e4c0f3480bf6cd1f7c7 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Tue, 24 Mar 2020 17:01:32 +0800
Subject: [PATCH 12/28] =?UTF-8?q?chore:BottomSheet=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BottomSheet/BottomSheet.tsx | 132 ++++++++++++++++++++++++++++++++
 src/BottomSheet/index.ts        |   3 +
 src/Modal/Backdrop.tsx          |   5 +-
 src/Modal/Modal.tsx             |   1 +
 stories/BottomSheet.stories.tsx |  43 +++++++++++
 5 files changed, 181 insertions(+), 3 deletions(-)
 create mode 100644 src/BottomSheet/BottomSheet.tsx
 create mode 100644 src/BottomSheet/index.ts
 create mode 100644 stories/BottomSheet.stories.tsx

diff --git a/src/BottomSheet/BottomSheet.tsx b/src/BottomSheet/BottomSheet.tsx
new file mode 100644
index 00000000..29e079fd
--- /dev/null
+++ b/src/BottomSheet/BottomSheet.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+import classNames from 'classnames';
+import Modal from '@sinoui/core/Modal';
+import { CSSTransition } from 'react-transition-group';
+
+const ModalWrapper = styled(Modal)`
+  display: flex;
+  align-items: center;
+`;
+
+const BottomSheetWrapper = styled.div`
+  box-shadow: ${(props) => props.theme.shadows[5]};
+  background: #fff;
+  width: 100%;
+  height: 50%;
+  align-self: flex-end;
+  transform: translate3d(0, 0, 0);
+`;
+
+const timeout = 300;
+
+const GlobalStyle = createGlobalStyle`
+.sinoui-bottom-sheet__css-appear {
+  opacity: 0;
+  transform: translate3d(0,100%,0);
+}
+
+.sinoui-bottom-sheet__css-appear-active {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+  transition: opacity ${timeout}ms, transform ${timeout}ms, height ${timeout}ms;
+}
+
+.sinoui-bottom-sheet__css-enter {
+  opacity: 0;
+  transform: translate3d(0, 100%, 0); 
+
+}
+
+.sinoui-bottom-sheet__css-enter-active {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+  transition: opacity ${timeout}ms, transform ${timeout}ms, height ${timeout}ms;
+}
+
+.sinoui-bottom-sheet__css-exit { 
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+ ;
+}
+
+.sinoui-bottom-sheet__css-exit-active { 
+  opacity: 0;
+  transform: translate3d(0, 100%, 0);
+  transition: opacity ${timeout}ms, transform ${timeout}ms, height ${timeout}ms
+}
+`;
+export interface BottomSheetProps {
+  /**
+   * 是否显示
+   */
+  open?: boolean;
+  /**
+   * 是否响应点击遮罩层事件
+   */
+  backdropClick?: boolean;
+  /**
+   * 点击遮罩层触发的回调函数
+   */
+  onBackdropClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * 添加自定义样式
+   */
+  className?: string;
+  /**
+   * 子元素
+   */
+  children?: React.ReactNode;
+  /**
+   * 动画延长时间
+   */
+  transitionDuration?: number;
+  /**
+   * 过渡结束监听器
+   */
+  addEndListener?: any;
+}
+
+/**
+ * 底部滑出组件
+ */
+function BottomSheet(props: BottomSheetProps) {
+  const {
+    open = false,
+    backdropClick = true,
+    onBackdropClick,
+    className,
+    children,
+    transitionDuration = 300,
+    addEndListener,
+    ...rest
+  } = props;
+  return (
+    <ModalWrapper
+      {...rest}
+      open={open}
+      backdropClick={backdropClick}
+      onBackdropClick={onBackdropClick}
+    >
+      <CSSTransition
+        classNames="sinoui-bottom-sheet__css"
+        timeout={transitionDuration}
+        in={open}
+        appear
+        unmountOnExit
+        addEndListener={addEndListener}
+      >
+        <>
+          <BottomSheetWrapper
+            className={classNames('sinoui-bottom-sheet', className)}
+          >
+            {children}
+          </BottomSheetWrapper>
+          <GlobalStyle />
+        </>
+      </CSSTransition>
+    </ModalWrapper>
+  );
+}
+
+export default BottomSheet;
diff --git a/src/BottomSheet/index.ts b/src/BottomSheet/index.ts
new file mode 100644
index 00000000..0402fcad
--- /dev/null
+++ b/src/BottomSheet/index.ts
@@ -0,0 +1,3 @@
+import BottomSheet from './BottomSheet';
+
+export default BottomSheet;
diff --git a/src/Modal/Backdrop.tsx b/src/Modal/Backdrop.tsx
index 71955709..a49fc348 100644
--- a/src/Modal/Backdrop.tsx
+++ b/src/Modal/Backdrop.tsx
@@ -67,19 +67,18 @@ export interface BackdropProps {
 }
 
 export default function Backdrop(props: BackdropProps) {
-  const { open, transitionDuration, addEndListener } = props;
+  const { open, transitionDuration, addEndListener, ...rest } = props;
   return (
     <CSSTransition
       appear
       in={open}
       timeout={transitionDuration}
-      {...props}
       classNames="sinoui-dialog-back"
       unmountOnExit
       addEndListener={addEndListener}
     >
       <>
-        <BackdropWrapper />
+        <BackdropWrapper {...rest} />
         <GlobalStyle />
       </>
     </CSSTransition>
diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx
index df0b05bd..e8cedce5 100644
--- a/src/Modal/Modal.tsx
+++ b/src/Modal/Modal.tsx
@@ -223,6 +223,7 @@ function Modal(props: ModalPropsType) {
       child && child.props.onExited,
       onTransitionExited,
     );
+
     if (!open) {
       childProps.in = false;
     }
diff --git a/stories/BottomSheet.stories.tsx b/stories/BottomSheet.stories.tsx
new file mode 100644
index 00000000..2d3be2d7
--- /dev/null
+++ b/stories/BottomSheet.stories.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@sinoui/theme';
+import Button from '@sinoui/core/Button';
+import BottomSheet from '@sinoui/core/BottomSheet';
+import List from '@sinoui/core/List';
+import ListItem from '@sinoui/core/ListItem';
+
+export default {
+  title: 'BottomSheet',
+};
+
+export const 基本使用 = () => (
+  <ThemeProvider theme={defaultTheme}>
+    <BottomSheet>内容</BottomSheet>
+  </ThemeProvider>
+);
+
+function BottomSheetDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onBackdropClick = () => {
+    setOpen(false);
+  };
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheet open={open} onBackdropClick={onBackdropClick}>
+        11111
+      </BottomSheet>
+    </>
+  );
+}
+
+export const 点击遮罩层隐藏 = () => (
+  <ThemeProvider theme={defaultTheme}>
+    <BottomSheetDemo />
+  </ThemeProvider>
+);

From 31b6eba3014d29763806bc77975898c76a3dee34 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Tue, 24 Mar 2020 18:29:47 +0800
Subject: [PATCH 13/28] =?UTF-8?q?chore:=E5=90=88=E5=B9=B6master=E5=88=86?=
 =?UTF-8?q?=E6=94=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json       | 4 +++-
 src/Modal/index.ts | 2 +-
 yarn.lock          | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 7fda9555..1cca4cf1 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,9 @@
     "polished": "^3.4.4",
     "react-icons": "^3.9.0",
     "react-transition-group": "^4.3.0",
-    "styled-components": "^4.4.1"
+    "styled-components": "^4.4.1",
+    "lodash": "^4.17.15",
+    "lodash-es": "^4.17.15"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
diff --git a/src/Modal/index.ts b/src/Modal/index.ts
index 04b9d38c..a7d1d7a4 100644
--- a/src/Modal/index.ts
+++ b/src/Modal/index.ts
@@ -1,5 +1,5 @@
 import Modal, { ModalPropsType } from './Modal';
 
-export { ModalPropsType as ModalProps };
+export type { ModalPropsType as ModalProps };
 
 export default Modal;
diff --git a/yarn.lock b/yarn.lock
index cbaa1acb..88ca5222 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10525,7 +10525,7 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^16.13.0, react-dom@^16.8.3:
+react-dom@^16.8.3:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.0.tgz#cdde54b48eb9e8a0ca1b3dc9943d9bb409b81866"
   integrity sha512-y09d2c4cG220DzdlFkPTnVvGTszVvNpC73v+AaLGLHbkpy3SSgvYq8x0rNwPJ/Rk/CicTNgk0hbHNw1gMEZAXg==

From a1e0ffb9db262c286cf240f18886a5d99259b103 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Tue, 24 Mar 2020 21:02:20 +0800
Subject: [PATCH 14/28] =?UTF-8?q?chore:BottomSheet=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/components-apis/bottomSheet.mdx     |  28 +
 .../bottomSheet-demos/BottomSheetDemo.tsx     |  62 ++
 docs/docs/components/bottomSheet.mdx          | 144 +++
 docs/sidebars.js                              |   2 +
 docs/yarn.lock                                | 823 ++++++++++++------
 src/BottomSheet/BottomSheet.test.tsx          |  95 ++
 src/BottomSheet/BottomSheet.tsx               |   8 +-
 stories/BottomSheet.stories.tsx               |  36 +-
 8 files changed, 905 insertions(+), 293 deletions(-)
 create mode 100644 docs/docs/components-apis/bottomSheet.mdx
 create mode 100644 docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
 create mode 100644 docs/docs/components/bottomSheet.mdx
 create mode 100644 src/BottomSheet/BottomSheet.test.tsx

diff --git a/docs/docs/components-apis/bottomSheet.mdx b/docs/docs/components-apis/bottomSheet.mdx
new file mode 100644
index 00000000..61970ae3
--- /dev/null
+++ b/docs/docs/components-apis/bottomSheet.mdx
@@ -0,0 +1,28 @@
+---
+id: bottomSheet
+title:BottomSheet
+---
+
+BottomSheet 底部滑出组件。
+
+## 引用方式
+
+```tsx
+import BottomSheet from '@sinoui/core/BottomSheet';
+```
+
+## API
+
+Avatar组件属性：
+
+| 参数名称    | 参数类型   | 默认值        | 说明                                                         |
+| ----------- | --------------- | ------------------------ | ----------------------------------- |
+| open       | boolean         |  false         |    是否显示   |
+| backdrop       | boolean          | true | 是否显示遮罩层          |
+| backdropClick       | boolean          | true | 是否响应点击遮罩层事件          |
+| onBackdropClick       | ()=>void          | true | 是否响应点击遮罩层事件          |
+| transitionDuration       | number         | 300 | 动画延长时间          |
+| children    | React.ReactNode |                | 点击遮罩层触发的回调函数        |
+| className   | string          |                | 添加自定义类名      |   
+
+更多使用示例，请参考[BottomSheet Demos](/docs/components/bottomSheet)
diff --git a/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx b/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
new file mode 100644
index 00000000..958a3578
--- /dev/null
+++ b/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@sinoui/theme';
+import Button from '@sinoui/core/Button';
+import BottomSheet from '@sinoui/core/BottomSheet';
+import List from '@sinoui/core/List';
+import ListItem from '@sinoui/core/ListItem';
+import ListItemText from '@sinoui/core/ListItemText';
+import ListItemPrimaryAction from '@sinoui/core/ListItemPrimaryAction';
+import Divider from '@sinoui/core/Divider';
+import IconButton from '@sinoui/core/IconButton';
+import BookmarkBorder from '@sinoui/icons/BookmarkBorder';
+
+function BottomSheetDemo(props: any) {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onBackdropClick = () => {
+    setOpen(false);
+  };
+  const listData = [1, 2, 3];
+  const content = (
+    <List>
+      {listData.map((item) => (
+        <>
+          <ListItem>
+            <ListItemPrimaryAction>
+              <IconButton color="primary">
+                <BookmarkBorder />
+              </IconButton>
+            </ListItemPrimaryAction>
+            <ListItemText>item{item}</ListItemText>
+          </ListItem>
+          <Divider />
+        </>
+      ))}
+    </List>
+  );
+
+  const {
+    onBackdropClick: onBackdropClickProps,
+    backdrop: backdropProps,
+  } = props;
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      {onBackdropClickProps && <Button>CLICK</Button>}
+      <BottomSheet
+        open={open}
+        onBackdropClick={onBackdropClickProps && onBackdropClick}
+        backdrop={backdropProps}
+        {...props}
+      >
+        {content}
+      </BottomSheet>
+    </ThemeProvider>
+  );
+}
+
+export default BottomSheetDemo;
diff --git a/docs/docs/components/bottomSheet.mdx b/docs/docs/components/bottomSheet.mdx
new file mode 100644
index 00000000..4436261f
--- /dev/null
+++ b/docs/docs/components/bottomSheet.mdx
@@ -0,0 +1,144 @@
+---
+id: bottomSheet
+title: bottomSheet 底部滑出
+---
+
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@sinoui/theme';
+import BottomSheet from '@sinoui/core/BottomSheet';
+import BottomSheetDemo from './bottomSheet-demos/BottomSheetDemo';
+
+## 基本使用
+
+```tsx
+import BottomSheet from '@sinoui/core/BottomSheet';
+
+function BottomSheetDemo() {
+  const listData = [1, 2, 3];
+  const content = (
+    <List>
+      {listData.map((item) => (
+        <>
+          <ListItem>
+            <ListItemPrimaryAction>
+              <IconButton color="primary">
+                <BookmarkBorder />
+              </IconButton>
+            </ListItemPrimaryAction>
+            <ListItemText>item{item}</ListItemText>
+          </ListItem>
+          <Divider />
+        </>
+      ))}
+    </List>
+  );
+
+  return <BottomSheet>{content}</BottomSheet>
+}
+```
+
+效果如下：
+
+<BottomSheetDemo />
+
+## 点击遮罩层事件
+
+```tsx
+import BottomSheet from '@sinoui/core/BottomSheet';
+
+function BottomSheetDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onBackdropClick = () => {
+    setOpen(false);
+  };
+
+  const listData = [1, 2, 3];
+
+  const content = (
+    <List>
+      {listData.map((item) => (
+        <>
+          <ListItem>
+            <ListItemPrimaryAction>
+              <IconButton color="primary">
+                <BookmarkBorder />
+              </IconButton>
+            </ListItemPrimaryAction>
+            <ListItemText>item{item}</ListItemText>
+          </ListItem>
+          <Divider />
+        </>
+      ))}
+    </List>
+  );
+
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheet open={open} onBackdropClick={onBackdropClick}>
+        {content}
+      </BottomSheet>
+    </>
+  );
+}
+```
+
+效果如下：
+
+<BottomSheetDemo onBackdropClick />
+
+## 设置不显示遮罩层
+
+```tsx
+import BottomSheet from '@sinoui/core/BottomSheet';
+
+function BottomSheetDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const listData = [1, 2, 3];
+
+  const content = (
+    <List>
+      {listData.map((item) => (
+        <>
+          <ListItem>
+            <ListItemPrimaryAction>
+              <IconButton color="primary">
+                <BookmarkBorder />
+              </IconButton>
+            </ListItemPrimaryAction>
+            <ListItemText>item{item}</ListItemText>
+          </ListItem>
+          <Divider />
+        </>
+      ))}
+    </List>
+  );
+
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheet open={open} backdrop={false}>
+        {content}
+      </BottomSheet>
+    </>
+  );
+}
+```
+
+效果如下：
+
+<BottomSheetDemo onBackdropClick backdrop={false} />
+
+## API
+
+查看[BottomSheet 组件 API](/docs/components-apis/bottomSheet)
diff --git a/docs/sidebars.js b/docs/sidebars.js
index 26a2129d..34d3b6e2 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -28,6 +28,7 @@ module.exports = {
         'components/snackbar',
         'components/badge',
         'components/dialog',
+        'components/bottomSheet',
       ],
     }, ],
     组件API: [
@@ -50,6 +51,7 @@ module.exports = {
       'components-apis/snackbar',
       'components-apis/badge',
       'components-apis/dialog',
+      'components-apis/bottomSheet',
     ],
   },
 };
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 90fe0baa..5de63c81 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -9,7 +9,7 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
-"@babel/code-frame@^7.8.3":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
   integrity sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==
@@ -25,6 +25,15 @@
     invariant "^2.2.4"
     semver "^5.5.0"
 
+"@babel/compat-data@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.9.0.tgz#04815556fc90b0c174abd2c0c1bb966faa036a6c"
+  integrity sha512-zeFQrr+284Ekvd9e7KAX954LkapWiOmQtsfHirhxqfdlX6MEC32iRE+pqUGlYIBchdevaCwvzxWGSy/YBNI85g==
+  dependencies:
+    browserslist "^4.9.1"
+    invariant "^2.2.4"
+    semver "^5.5.0"
+
 "@babel/core@7.6.2":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.2.tgz#069a776e8d5e9eefff76236bc8845566bd31dd91"
@@ -66,7 +75,7 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.5.5", "@babel/core@^7.7.4":
+"@babel/core@^7.7.4":
   version "7.7.5"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.5.tgz#ae1323cd035b5160293307f50647e83f8ba62f7e"
   integrity sha512-M42+ScN4+1S9iB6f+TL7QBpoQETxbclx+KNoKJABghnKYE+fMzSGqst0BZJc8CpI625bwPwYgUyRvxZ+0mZzpw==
@@ -80,14 +89,13 @@
     "@babel/types" "^7.7.4"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
-    gensync "^1.0.0-beta.1"
     json5 "^2.1.0"
     lodash "^4.17.13"
     resolve "^1.3.2"
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.6.2", "@babel/generator@^7.8.3":
+"@babel/generator@^7.6.2":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.3.tgz#0e22c005b0a94c1c74eafe19ef78ce53a4d45c03"
   integrity sha512-WjoPk8hRpDRqqzRpvaR8/gDUPkrnOOeuT2m8cNICJtZH6mwaCo3v0OKMI7Y6SM1pBtyijnLtAL0HDi41pf41ug==
@@ -97,6 +105,16 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/generator@^7.7.4", "@babel/generator@^7.9.0":
+  version "7.9.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.4.tgz#12441e90c3b3c4159cdecf312075bf1a8ce2dbce"
+  integrity sha512-rjP8ahaDy/ouhrvCoU1E5mqaitWrxwuNGU+dy1EpaoK48jZay4MdkskKGIMHLZNewg8sAsqpGSREJwP0zH3YQA==
+  dependencies:
+    "@babel/types" "^7.9.0"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.8.6":
   version "7.8.6"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.6.tgz#57adf96d370c9a63c241cd719f9111468578537a"
@@ -112,7 +130,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz#bb3faf1e74b74bd547e867e48f551fa6b098b6ce"
   integrity sha512-2BQmQgECKzYKFPpiycoF9tlb5HA4lrVyAmLLVK177EcQAqjVLciUb2/R+n1boQ9y5ENV3uz2ZqiNw7QMBBw1Og==
   dependencies:
-    "@babel/types" "^7.8.3"
+    "@babel/types" "^7.7.4"
 
 "@babel/helper-annotate-as-pure@^7.8.3":
   version "7.8.3"
@@ -121,14 +139,6 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.7.4.tgz#5f73f2b28580e224b5b9bd03146a4015d6217f5f"
-  integrity sha512-Biq/d/WtvfftWZ9Uf39hbPBYDUo986m5Bb4zhkeYDGUllF43D+nUe5M6Vuo6/8JDK/0YX/uBdeoQpyaNhNugZQ==
-  dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.8.3.tgz#c84097a427a061ac56a1c30ebf54b7b22d241503"
@@ -137,6 +147,15 @@
     "@babel/helper-explode-assignable-expression" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helper-builder-react-jsx-experimental@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.9.0.tgz#066d80262ade488f9c1b1823ce5db88a4cedaa43"
+  integrity sha512-3xJEiyuYU4Q/Ar9BsHisgdxZsRlsShMe90URZ0e6przL26CCs8NJbDoxH94kKT17PcxlMhsCAwZd90evCo26VQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/types" "^7.9.0"
+
 "@babel/helper-builder-react-jsx@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.7.4.tgz#da188d247508b65375b2c30cf59de187be6b0c66"
@@ -145,14 +164,13 @@
     "@babel/types" "^7.7.4"
     esutils "^2.0.0"
 
-"@babel/helper-call-delegate@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.8.3.tgz#de82619898aa605d409c42be6ffb8d7204579692"
-  integrity sha512-6Q05px0Eb+N4/GTyKPPvnkig7Lylw+QzihMpws9iiZQv7ZImf84ZsZpQH7QoWN4n4tm81SnSzPgHw2qtO0Zf3A==
+"@babel/helper-builder-react-jsx@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.9.0.tgz#16bf391990b57732700a3278d4d9a81231ea8d32"
+  integrity sha512-weiIo4gaoGgnhff54GQ3P5wsUQmnSwpkvU0r6ZHq6TzoSzKy4JxHEgnxNytaKbov2a9z/CVNyzliuCOUPEX3Jw==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.8.3"
-    "@babel/traverse" "^7.8.3"
-    "@babel/types" "^7.8.3"
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/types" "^7.9.0"
 
 "@babel/helper-call-delegate@^7.8.3":
   version "7.8.3"
@@ -174,15 +192,15 @@
     levenary "^1.1.1"
     semver "^5.5.0"
 
-"@babel/helper-create-class-features-plugin@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.7.4.tgz#fce60939fd50618610942320a8d951b3b639da2d"
-  integrity sha512-l+OnKACG4uiDHQ/aJT8dwpR+LhCJALxL0mJ6nzjB25e5IPwqV1VOsY7ah6UB1DG+VOXAIMtuC54rFJGiHkxjgA==
+"@babel/helper-compilation-targets@^7.8.7":
+  version "7.8.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.8.7.tgz#dac1eea159c0e4bd46e309b5a1b04a66b53c1dde"
+  integrity sha512-4mWm8DCK2LugIS+p1yArqvG1Pf162upsIsjE7cNBjez+NjliQpVhj20obE520nao0o14DaTnFJv+Fw5a0JpoUw==
   dependencies:
-    "@babel/compat-data" "^7.8.1"
-    browserslist "^4.8.2"
+    "@babel/compat-data" "^7.8.6"
+    browserslist "^4.9.1"
     invariant "^2.2.4"
-    levenary "^1.1.0"
+    levenary "^1.1.1"
     semver "^5.5.0"
 
 "@babel/helper-create-class-features-plugin@^7.7.4", "@babel/helper-create-class-features-plugin@^7.8.3":
@@ -197,14 +215,6 @@
     "@babel/helper-replace-supers" "^7.8.3"
     "@babel/helper-split-export-declaration" "^7.8.3"
 
-"@babel/helper-create-regexp-features-plugin@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.3.tgz#c774268c95ec07ee92476a3862b75cc2839beb79"
-  integrity sha512-Gcsm1OHCUr9o9TcJln57xhWHtdXbA2pgQ58S0Lxlks0WMGNXuki4+GLfX0p+L2ZkINUGZvfkz8rzoqJQSthI+Q==
-  dependencies:
-    "@babel/helper-regex" "^7.8.3"
-    regexpu-core "^4.6.0"
-
 "@babel/helper-create-regexp-features-plugin@^7.8.3":
   version "7.8.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.6.tgz#7fa040c97fb8aebe1247a5c645330c32d083066b"
@@ -214,13 +224,22 @@
     "@babel/helper-regex" "^7.8.3"
     regexpu-core "^4.6.0"
 
+"@babel/helper-create-regexp-features-plugin@^7.8.8":
+  version "7.8.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz#5d84180b588f560b7864efaeea89243e58312087"
+  integrity sha512-LYVPdwkrQEiX9+1R29Ld/wTrmQu1SSKYnuOk3g0CkcZMA1p0gsNxJFj/3gBdaJ7Cg0Fnek5z0DsMULePP7Lrqg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-regex" "^7.8.3"
+    regexpu-core "^4.7.0"
+
 "@babel/helper-define-map@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.7.4.tgz#2841bf92eb8bd9c906851546fe6b9d45e162f176"
   integrity sha512-v5LorqOa0nVQUvAUTUF3KPastvUt/HzByXNamKQ6RdJRTV7j8rLL+WB5C/MzzWAwOomxDhYFb1wLLxHqox86lg==
   dependencies:
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/types" "^7.8.3"
+    "@babel/helper-function-name" "^7.7.4"
+    "@babel/types" "^7.7.4"
     lodash "^4.17.13"
 
 "@babel/helper-define-map@^7.8.3":
@@ -232,14 +251,6 @@
     "@babel/types" "^7.8.3"
     lodash "^4.17.13"
 
-"@babel/helper-explode-assignable-expression@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.7.4.tgz#fa700878e008d85dc51ba43e9fb835cddfe05c84"
-  integrity sha512-2/SicuFrNSXsZNBxe5UGdLr+HZg+raWBLE9vC98bdYOKX/U6PY0mdGlYUJdtTDPSU0Lw0PNbKKDpwYHJLn2jLg==
-  dependencies:
-    "@babel/traverse" "^7.8.3"
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-explode-assignable-expression@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.8.3.tgz#a728dc5b4e89e30fc2dfc7d04fa28a930653f982"
@@ -253,9 +264,9 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz#ab6e041e7135d436d8f0a3eca15de5b67a341a2e"
   integrity sha512-AnkGIdiBhEuiwdoMnKm7jfPfqItZhgRaZfMg1XX3bS25INOnLPjPG1Ppnajh8eqgt5kPJnfqrRHqFqmjKDZLzQ==
   dependencies:
-    "@babel/helper-get-function-arity" "^7.8.3"
-    "@babel/template" "^7.8.3"
-    "@babel/types" "^7.8.3"
+    "@babel/helper-get-function-arity" "^7.7.4"
+    "@babel/template" "^7.7.4"
+    "@babel/types" "^7.7.4"
 
 "@babel/helper-function-name@^7.8.3":
   version "7.8.3"
@@ -266,13 +277,6 @@
     "@babel/template" "^7.8.3"
     "@babel/types" "^7.8.3"
 
-"@babel/helper-get-function-arity@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0"
-  integrity sha512-QTGKEdCkjgzgfJ3bAyRwF4yyT3pg+vDgan8DSivq1eS0gwi+KGKE5x8kRcbeFTb/673mkO5SN1IZfmCfA5o+EA==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-get-function-arity@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
@@ -280,13 +284,6 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
-"@babel/helper-hoist-variables@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.7.4.tgz#612384e3d823fdfaaf9fce31550fe5d4db0f3d12"
-  integrity sha512-wQC4xyvc1Jo/FnLirL6CEgPgPCa8M74tOdjWpRhQYapz5JC7u3NYU1zCVoVAGCE3EaIP9T1A3iW0WLJ+reZlpQ==
-  dependencies:
-    "@babel/types" "^7.8.3"
-
 "@babel/helper-hoist-variables@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.8.3.tgz#1dbe9b6b55d78c9b4183fc8cdc6e30ceb83b7134"
@@ -299,7 +296,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.7.4.tgz#356438e2569df7321a8326644d4b790d2122cb74"
   integrity sha512-9KcA1X2E3OjXl/ykfMMInBK+uVdfIVakVe7W7Lg3wfXUNyS3Q1HWLFRwZIjhqiCGbslummPDnmb7vIekS0C1vw==
   dependencies:
-    "@babel/types" "^7.8.3"
+    "@babel/types" "^7.7.4"
 
 "@babel/helper-member-expression-to-functions@^7.8.3":
   version "7.8.3"
@@ -313,7 +310,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz#e5a92529f8888bf319a6376abfbd1cebc491ad91"
   integrity sha512-dGcrX6K9l8258WFjyDLJwuVKxR4XZfU0/vTUgOQYWEnRD8mgr+p4d6fCUMq/ys0h4CCt/S5JhbvtyErjWouAUQ==
   dependencies:
-    "@babel/types" "^7.8.3"
+    "@babel/types" "^7.7.4"
 
 "@babel/helper-module-imports@^7.8.3":
   version "7.8.3"
@@ -322,29 +319,30 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
-"@babel/helper-module-transforms@^7.7.4", "@babel/helper-module-transforms@^7.7.5":
-  version "7.7.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.7.5.tgz#d044da7ffd91ec967db25cd6748f704b6b244835"
-  integrity sha512-A7pSxyJf1gN5qXVcidwLWydjftUN878VkalhXX5iQDuGyiGK3sOrrKKHF4/A4fwHtnsotv/NipwAeLzY4KQPvw==
+"@babel/helper-module-transforms@^7.8.3":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.8.6.tgz#6a13b5eecadc35692047073a64e42977b97654a4"
+  integrity sha512-RDnGJSR5EFBJjG3deY0NiL0K9TO8SXxS9n/MPsbPK/s9LbQymuLNtlzvDiNS7IpecuL45cMeLVkA+HfmlrnkRg==
   dependencies:
     "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-replace-supers" "^7.8.6"
     "@babel/helper-simple-access" "^7.8.3"
     "@babel/helper-split-export-declaration" "^7.8.3"
-    "@babel/template" "^7.8.3"
-    "@babel/types" "^7.8.3"
+    "@babel/template" "^7.8.6"
+    "@babel/types" "^7.8.6"
     lodash "^4.17.13"
 
-"@babel/helper-module-transforms@^7.8.3":
-  version "7.8.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.8.6.tgz#6a13b5eecadc35692047073a64e42977b97654a4"
-  integrity sha512-RDnGJSR5EFBJjG3deY0NiL0K9TO8SXxS9n/MPsbPK/s9LbQymuLNtlzvDiNS7IpecuL45cMeLVkA+HfmlrnkRg==
+"@babel/helper-module-transforms@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz#43b34dfe15961918707d247327431388e9fe96e5"
+  integrity sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==
   dependencies:
     "@babel/helper-module-imports" "^7.8.3"
     "@babel/helper-replace-supers" "^7.8.6"
     "@babel/helper-simple-access" "^7.8.3"
     "@babel/helper-split-export-declaration" "^7.8.3"
     "@babel/template" "^7.8.6"
-    "@babel/types" "^7.8.6"
+    "@babel/types" "^7.9.0"
     lodash "^4.17.13"
 
 "@babel/helper-optimise-call-expression@^7.7.4":
@@ -352,7 +350,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.7.4.tgz#034af31370d2995242aa4df402c3b7794b2dcdf2"
   integrity sha512-VB7gWZ2fDkSuqW6b1AKXkJWO5NyNI3bFL/kK79/30moK57blr6NbH8xcl2XcKCwOmJosftWunZqfO84IGq3ZZg==
   dependencies:
-    "@babel/types" "^7.8.3"
+    "@babel/types" "^7.7.4"
 
 "@babel/helper-optimise-call-expression@^7.8.3":
   version "7.8.3"
@@ -371,13 +369,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
   integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
 
-"@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
-  integrity sha512-CkCYQLkfkiugbRDO8eZn6lRuR8kzZoGXCg3149iTk5se7g6qykSpy3+hELSwquhu+TgHn8nkLiBwHvNX8Hofcw==
-  dependencies:
-    lodash "^4.17.13"
-
 "@babel/helper-regex@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.8.3.tgz#139772607d51b93f23effe72105b319d2a4c6965"
@@ -385,17 +376,6 @@
   dependencies:
     lodash "^4.17.13"
 
-"@babel/helper-remap-async-to-generator@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.7.4.tgz#c68c2407350d9af0e061ed6726afb4fff16d0234"
-  integrity sha512-Sk4xmtVdM9sA/jCI80f+KS+Md+ZHIpjuqmYPk1M7F/upHou5e4ReYmExAiu6PVe65BhJPZA2CY9x9k4BqE5klw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.7.4"
-    "@babel/helper-wrap-function" "^7.7.4"
-    "@babel/template" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
-
 "@babel/helper-remap-async-to-generator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.8.3.tgz#273c600d8b9bf5006142c1e35887d555c12edd86"
@@ -427,14 +407,6 @@
     "@babel/traverse" "^7.8.6"
     "@babel/types" "^7.8.6"
 
-"@babel/helper-simple-access@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.7.4.tgz#a169a0adb1b5f418cfc19f22586b2ebf58a9a294"
-  integrity sha512-zK7THeEXfan7UlWsG2A6CI/L9jVnI5+xxKZOdej39Y0YtDYKx9raHk5F2EtK9K8DHRTihYwg20ADt9S36GR78A==
-  dependencies:
-    "@babel/template" "^7.7.4"
-    "@babel/types" "^7.7.4"
-
 "@babel/helper-simple-access@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
@@ -457,15 +429,10 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
-"@babel/helper-wrap-function@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz#37ab7fed5150e22d9d7266e830072c0cdd8baace"
-  integrity sha512-VsfzZt6wmsocOaVU0OokwrIytHND55yvyT4BPB9AIIgwr8+x7617hetdJTsuGwygN5RC6mxA9EJztTjuwm2ofg==
-  dependencies:
-    "@babel/helper-function-name" "^7.7.4"
-    "@babel/template" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
+"@babel/helper-validator-identifier@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.0.tgz#ad53562a7fc29b3b9a91bbf7d10397fd146346ed"
+  integrity sha512-6G8bQKjOh+of4PV/ThDm/rRqlU7+IGoJuofpagU5GlEl29Vv0RGqqt86ZGRV8ZuSOY3o+8yXl5y782SMcG7SHw==
 
 "@babel/helper-wrap-function@^7.8.3":
   version "7.8.3"
@@ -482,7 +449,9 @@
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.7.4.tgz#62c215b9e6c712dadc15a9a0dcab76c92a940302"
   integrity sha512-ak5NGZGJ6LV85Q1Zc9gn2n+ayXOizryhjSUBTdu5ih1tlVCJeuQENzc4ItyCVhINVXvIT/ZQ4mheGIsfBkpskg==
   dependencies:
-    lodash "^4.17.13"
+    "@babel/template" "^7.7.4"
+    "@babel/traverse" "^7.7.4"
+    "@babel/types" "^7.7.4"
 
 "@babel/helpers@^7.8.4":
   version "7.8.4"
@@ -521,14 +490,19 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.6.tgz#ba5c9910cddb77685a008e3c587af8d27b67962c"
   integrity sha512-trGNYSfwq5s0SgM1BMEB8hX3NDmO7EP2wsDGDexiaKMB92BaRpS+qZfpkMqUBhcsOTBwNy9B/jieo4ad/t/z2g==
 
+"@babel/parser@^7.9.0":
+  version "7.9.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
+  integrity sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==
+
 "@babel/plugin-proposal-async-generator-functions@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.4.tgz#0351c5ac0a9e927845fffd5b82af476947b7ce6d"
   integrity sha512-1ypyZvGRXriY/QP668+s8sFr2mqinhkRDMPSQLNghCQE+GAkFtp+wkHVvg2+Hdki8gwP+NFzJBJ/N1BfzCCDEw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-remap-async-to-generator" "^7.8.3"
-    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-remap-async-to-generator" "^7.7.4"
+    "@babel/plugin-syntax-async-generators" "^7.7.4"
 
 "@babel/plugin-proposal-async-generator-functions@^7.8.3":
   version "7.8.3"
@@ -539,10 +513,10 @@
     "@babel/helper-remap-async-to-generator" "^7.8.3"
     "@babel/plugin-syntax-async-generators" "^7.8.0"
 
-"@babel/plugin-proposal-class-properties@^7.5.5":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.7.4.tgz#2f964f0cb18b948450362742e33e15211e77c2ba"
-  integrity sha512-EcuXeV4Hv1X3+Q1TsuOmyyxeTRiSqurGJ26+I/FW1WbymmRRapVORm6x1Zl3iDIHyRxEs+VXWp6qnlcfcJSbbw==
+"@babel/plugin-proposal-class-properties@^7.7.4":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz#5e06654af5cd04b608915aada9b2a6788004464e"
+  integrity sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==
   dependencies:
     "@babel/helper-create-class-features-plugin" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
@@ -556,15 +530,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-decorators" "^7.7.4"
 
-"@babel/plugin-proposal-dynamic-import@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.3.tgz#38c4fe555744826e97e2ae930b0fb4cc07e66054"
-  integrity sha512-NyaBbyLFXFLT9FP+zk0kYlUlA8XtCUbehs67F0nnEg7KICgMc2mNkIeu9TYhKzyXMkrapZFwAhXLdnt4IYHy1w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
-
-"@babel/plugin-proposal-dynamic-import@^7.8.3":
+"@babel/plugin-proposal-dynamic-import@^7.7.4", "@babel/plugin-proposal-dynamic-import@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.3.tgz#38c4fe555744826e97e2ae930b0fb4cc07e66054"
   integrity sha512-NyaBbyLFXFLT9FP+zk0kYlUlA8XtCUbehs67F0nnEg7KICgMc2mNkIeu9TYhKzyXMkrapZFwAhXLdnt4IYHy1w==
@@ -577,16 +543,8 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.7.4.tgz#7700a6bfda771d8dc81973249eac416c6b4c697d"
   integrity sha512-wQvt3akcBTfLU/wYoqm/ws7YOAQKu8EVJEvHip/mzkNtjaclQoCCIqKXFP5/eyfnfbQCDV3OLRIK3mIVyXuZlw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-json-strings" "^7.8.0"
-
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.7.4", "@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz#e4572253fdeed65cddeecfdab3f928afeb2fd5d2"
-  integrity sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-json-strings" "^7.7.4"
 
 "@babel/plugin-proposal-json-strings@^7.8.3":
   version "7.8.3"
@@ -596,7 +554,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-json-strings" "^7.8.0"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.7.4", "@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz#e4572253fdeed65cddeecfdab3f928afeb2fd5d2"
   integrity sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==
@@ -604,6 +562,14 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
 
+"@babel/plugin-proposal-numeric-separator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.8.3.tgz#5d6769409699ec9b3b68684cd8116cedff93bad8"
+  integrity sha512-jWioO1s6R/R+wEHizfaScNsAx+xKgwTLNXSh7tTC4Usj3ItsPEhYkEpU4h+lpnBwq7NBVOJXfO6cRFYcX69JUQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
+
 "@babel/plugin-proposal-object-rest-spread@7.6.2":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.6.2.tgz#8ffccc8f3a6545e9f78988b6bf4fe881b88e8096"
@@ -620,10 +586,10 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
 
-"@babel/plugin-proposal-object-rest-spread@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.8.3.tgz#eb5ae366118ddca67bed583b53d7554cad9951bb"
-  integrity sha512-8qvuPwU/xxUCt78HocNlv0mXXo0wdh9VT1R04WU8HGOfaOob26pF+9P5/lYjN/q7DHOX1bvX60hnhOvuQUJdbA==
+"@babel/plugin-proposal-object-rest-spread@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.9.0.tgz#a28993699fc13df165995362693962ba6b061d6f"
+  integrity sha512-UgqBv6bjq4fDb8uku9f+wcm1J7YxJ5nT7WO/jBr0cl0PLKb7t1O6RNR1kZbjgx2LQtsDI9hwoQVmn0yhXeQyow==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
@@ -633,8 +599,8 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.7.4.tgz#ec21e8aeb09ec6711bc0a39ca49520abee1de379"
   integrity sha512-DyM7U2bnsQerCQ+sejcTNZh8KQEUuC3ufzdnVnSiUv/qoGJp2Z3hanKL18KDhsBT5Wj6a7CMT5mdyCNJsEaA9w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.7.4"
 
 "@babel/plugin-proposal-optional-catch-binding@^7.8.3":
   version "7.8.3"
@@ -644,6 +610,14 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
 
+"@babel/plugin-proposal-optional-chaining@^7.7.5", "@babel/plugin-proposal-optional-chaining@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz#31db16b154c39d6b8a645292472b98394c292a58"
+  integrity sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
 "@babel/plugin-proposal-optional-chaining@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.8.3.tgz#ae10b3214cb25f7adb1f3bc87ba42ca10b7e2543"
@@ -652,13 +626,21 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-optional-chaining" "^7.8.0"
 
+"@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.8.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.8.8.tgz#ee3a95e90cdc04fe8cd92ec3279fa017d68a0d1d"
+  integrity sha512-EVhjVsMpbhLw9ZfHWSx2iy13Q8Z/eg8e8ccVWt23sWQK5l1UdkoLJPN5w69UA4uITGBnEZD2JOe4QOHycYKv8A==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.8.8"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.4.tgz#7c239ccaf09470dbe1d453d50057460e84517ebb"
   integrity sha512-cHgqHgYvffluZk85dJ02vloErm3Y6xtH+2noOBOJ2kXOJH3aVCDnj5eR/lVNlTnYu4hndAPJD3rTFjW3qee0PA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/helper-create-regexp-features-plugin" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-proposal-unicode-property-regex@^7.8.3":
   version "7.8.3"
@@ -673,15 +655,7 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.7.4.tgz#331aaf310a10c80c44a66b238b6e49132bd3c889"
   integrity sha512-Li4+EjSpBgxcsmeEF8IFcfV/+yJGxHXDirDkEoyFjumuwbmfCVHUt0HuowD/iGM7OhIRyXJH9YXxqiH6N815+g==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-syntax-async-generators@^7.8.0":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
-  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-syntax-async-generators@^7.8.0":
   version "7.8.4"
@@ -704,19 +678,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-dynamic-import@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
-  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
 "@babel/plugin-syntax-json-strings@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.7.4.tgz#86e63f7d2e22f9e27129ac4e83ea989a382e86cc"
   integrity sha512-QpGupahTQW1mHRXddMG5srgpHWqRLwJnJZKXTigB9RPFCCGbDGCgBeM/iC82ICXp414WeYx/tD54w7M2qRqTMg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-syntax-json-strings@^7.8.0":
   version "7.8.3"
@@ -739,6 +706,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-jsx@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz#521b06c83c40480f1e58b4fd33b92eceb1d6ea94"
+  integrity sha512-WxdW9xyLgBdefoo0Ynn3MRSkhe5tFVxxKNVdnZSh318WrG2e2jH+E9wd/++JsqcLJZPfz87njQJ8j2Upjm0M0A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
@@ -746,6 +720,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-numeric-separator@^7.8.0", "@babel/plugin-syntax-numeric-separator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.8.3.tgz#0e3fb63e09bea1b11e96467271c8308007e7c41f"
+  integrity sha512-H7dCMAdN83PcCmqmkHB5dtp+Xa9a6LKSvA2hiFBC/5alSHxM5VgWZXFqDi0YFe8XNGT6iCa+z4V4zSt/PdZ7Dw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-syntax-object-rest-spread@7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
@@ -753,14 +734,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-object-rest-spread@^7.2.0", "@babel/plugin-syntax-object-rest-spread@^7.8.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
-  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-object-rest-spread@^7.8.0":
+"@babel/plugin-syntax-object-rest-spread@^7.2.0", "@babel/plugin-syntax-object-rest-spread@^7.7.4", "@babel/plugin-syntax-object-rest-spread@^7.8.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
   integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
@@ -772,7 +746,7 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.7.4.tgz#a3e38f59f4b6233867b4a92dcb0ee05b2c334aa6"
   integrity sha512-4ZSuzWgFxqHRE31Glu+fEr/MirNZOMYmD/0BhBWyLyOOQz/gTAl7QmWm2hX1QxEIXsr2vkdlwxIzTyiYRC4xcQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-syntax-optional-catch-binding@^7.8.0":
   version "7.8.3"
@@ -793,14 +767,7 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.7.4.tgz#bd7d8fa7b9fee793a36e4027fd6dd1aa32f946da"
   integrity sha512-wdsOw0MvkL1UIgiQ/IFr3ETcfv1xb8RMM0H9wbiDyLaJFyiDg5oZvDLCXosIXmFeIlweML5iOBXAkqddkYNizg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-top-level-await@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.8.3.tgz#3acdece695e6b13aaf57fc291d1a800950c71391"
-  integrity sha512-kwj1j9lL/6Wd0hROD3b/OZZ7MSrZLqqn9RAZ5+cYYsflQ9HZBIKCUkr3+uL1MEJ1NePiUbf98jjiMQSv0NMR9g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-syntax-top-level-await@^7.8.3":
   version "7.8.3"
@@ -816,14 +783,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-arrow-functions@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz#82776c2ed0cd9e1a49956daeb896024c9473b8b6"
-  integrity sha512-0MRF+KC8EqH4dbuITCWwPSzsyO3HIWWlm30v8BbbpOrS1B++isGxPnnuq/IZvOX5J2D/p7DQalQm+/2PnlKGxg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-arrow-functions@^7.8.3":
+"@babel/plugin-transform-arrow-functions@^7.7.4", "@babel/plugin-transform-arrow-functions@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz#82776c2ed0cd9e1a49956daeb896024c9473b8b6"
   integrity sha512-0MRF+KC8EqH4dbuITCWwPSzsyO3HIWWlm30v8BbbpOrS1B++isGxPnnuq/IZvOX5J2D/p7DQalQm+/2PnlKGxg==
@@ -835,9 +795,9 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.7.4.tgz#694cbeae6d613a34ef0292713fa42fb45c4470ba"
   integrity sha512-zpUTZphp5nHokuy8yLlyafxCJ0rSlFoSHypTUWgpdwoDXWQcseaect7cJ8Ppk6nunOM6+5rPMkod4OYKPR5MUg==
   dependencies:
-    "@babel/helper-module-imports" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-remap-async-to-generator" "^7.8.3"
+    "@babel/helper-module-imports" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-remap-async-to-generator" "^7.7.4"
 
 "@babel/plugin-transform-async-to-generator@^7.8.3":
   version "7.8.3"
@@ -853,7 +813,7 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.7.4.tgz#d0d9d5c269c78eaea76227ace214b8d01e4d837b"
   integrity sha512-kqtQzwtKcpPclHYjLK//3lH8OFsCDuDJBaFhVwf8kqdnF6MN4l618UDlcA7TfRs3FayrHj+svYnSX8MC9zmUyQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-block-scoped-functions@^7.8.3":
   version "7.8.3"
@@ -867,7 +827,7 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.7.4.tgz#200aad0dcd6bb80372f94d9e628ea062c58bf224"
   integrity sha512-2VBe9u0G+fDt9B5OV5DQH4KBf5DoiNkwFKOz0TCvBWvdAN2rOykCTkrL+jTLxfCAm76l9Qo5OqL7HBOx2dWggg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
     lodash "^4.17.13"
 
 "@babel/plugin-transform-block-scoping@^7.8.3":
@@ -906,12 +866,26 @@
     "@babel/helper-split-export-declaration" "^7.8.3"
     globals "^11.1.0"
 
+"@babel/plugin-transform-classes@^7.9.0":
+  version "7.9.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.9.2.tgz#8603fc3cc449e31fdbdbc257f67717536a11af8d"
+  integrity sha512-TC2p3bPzsfvSsqBZo0kJnuelnoK9O3welkUpqSqBQuBF6R5MN2rysopri8kNvtlGIb2jmUO7i15IooAZJjZuMQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-define-map" "^7.8.3"
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/helper-optimise-call-expression" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-replace-supers" "^7.8.6"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    globals "^11.1.0"
+
 "@babel/plugin-transform-computed-properties@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.7.4.tgz#e856c1628d3238ffe12d668eb42559f79a81910d"
   integrity sha512-bSNsOsZnlpLLyQew35rl4Fma3yKWqK3ImWMSC/Nc+6nGjC9s5NFWAer1YQ899/6s9HxO2zQC1WoFNfkOqRkqRQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-computed-properties@^7.8.3":
   version "7.8.3"
@@ -925,7 +899,7 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.7.4.tgz#2b713729e5054a1135097b6a67da1b6fe8789267"
   integrity sha512-4jFMXI1Cu2aXbcXXl8Lr6YubCn6Oc7k9lLsu8v61TZh+1jny2BWmdtvY9zSUlLdGUvcy9DMAWyZEOqjsbeg/wA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-destructuring@^7.8.3":
   version "7.8.3"
@@ -934,15 +908,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-dotall-regex@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.4.tgz#f7ccda61118c5b7a2599a72d5e3210884a021e96"
-  integrity sha512-mk0cH1zyMa/XHeb6LOTXTbG7uIJ8Rrjlzu91pUx/KS3JpcgaTDwMS8kM+ar8SLOvlL2Lofi4CGBAjCo3a2x+lw==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-dotall-regex@^7.8.3":
+"@babel/plugin-transform-dotall-regex@^7.4.4", "@babel/plugin-transform-dotall-regex@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.8.3.tgz#c3c6ec5ee6125c6993c5cbca20dc8621a9ea7a6e"
   integrity sha512-kLs1j9Nn4MQoBYdRXH6AeaXMbEJFaFu/v1nQkvib6QzTj8MZI5OQzqmD83/2jEM1z0DLilra5aWO5YpyC0ALIw==
@@ -950,12 +916,20 @@
     "@babel/helper-create-regexp-features-plugin" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
 
+"@babel/plugin-transform-dotall-regex@^7.7.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.4.tgz#f7ccda61118c5b7a2599a72d5e3210884a021e96"
+  integrity sha512-mk0cH1zyMa/XHeb6LOTXTbG7uIJ8Rrjlzu91pUx/KS3JpcgaTDwMS8kM+ar8SLOvlL2Lofi4CGBAjCo3a2x+lw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-transform-duplicate-keys@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.7.4.tgz#3d21731a42e3f598a73835299dd0169c3b90ac91"
   integrity sha512-g1y4/G6xGWMD85Tlft5XedGaZBCIVN+/P0bs6eabmcPP9egFleMAo65OOjlhcz1njpwagyY3t0nsQC9oTFegJA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-duplicate-keys@^7.8.3":
   version "7.8.3"
@@ -969,8 +943,8 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.7.4.tgz#dd30c0191e3a1ba19bcc7e389bdfddc0729d5db9"
   integrity sha512-MCqiLfCKm6KEA1dglf6Uqq1ElDIZwFuzz1WH5mTf8k2uQSxEJMbOIEh7IZv7uichr7PMfi5YVSrr1vz+ipp7AQ==
   dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-exponentiation-operator@^7.8.3":
   version "7.8.3"
@@ -985,7 +959,7 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.7.4.tgz#248800e3a5e507b1f103d8b4ca998e77c63932bc"
   integrity sha512-zZ1fD1B8keYtEcKF+M1TROfeHTKnijcVQm0yO/Yu1f7qoDoxEIc/+GX6Go430Bg84eM/xwPFp0+h4EbZg7epAA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-for-of@^7.8.6":
   version "7.8.6"
@@ -994,13 +968,20 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
+"@babel/plugin-transform-for-of@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.9.0.tgz#0f260e27d3e29cd1bb3128da5e76c761aa6c108e"
+  integrity sha512-lTAnWOpMwOXpyDx06N+ywmF3jNbafZEqZ96CGYabxHrxNX8l5ny7dt4bK/rGwAh9utyP2b2Hv7PlZh1AAS54FQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-function-name@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.7.4.tgz#75a6d3303d50db638ff8b5385d12451c865025b1"
   integrity sha512-E/x09TvjHNhsULs2IusN+aJNRV5zKwxu1cpirZyRPw+FyyIKEHPXTsadj48bVpc1R5Qq1B5ZkzumuFLytnbT6g==
   dependencies:
-    "@babel/helper-function-name" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-function-name" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-function-name@^7.8.3":
   version "7.8.3"
@@ -1015,7 +996,7 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.7.4.tgz#27fe87d2b5017a2a5a34d1c41a6b9f6a6262643e"
   integrity sha512-X2MSV7LfJFm4aZfxd0yLVFrEXAgPqYoDG53Br/tCKiKYfX0MjVjQeWPIhPHHsCqzwQANq+FLN786fF5rgLS+gw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-literals@^7.8.3":
   version "7.8.3"
@@ -1029,7 +1010,7 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.7.4.tgz#aee127f2f3339fc34ce5e3055d7ffbf7aa26f19a"
   integrity sha512-9VMwMO7i69LHTesL0RdGy93JU6a+qOPuvB4F4d0kR0zyVjJRVJRaoaGjhtki6SzQUu8yen/vxPKN6CWnCUw6bA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-member-expression-literals@^7.8.3":
   version "7.8.3"
@@ -1043,8 +1024,8 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.7.5.tgz#39e0fb717224b59475b306402bb8eedab01e729c"
   integrity sha512-CT57FG4A2ZUNU1v+HdvDSDrjNWBrtCmSH6YbbgN3Lrf0Di/q/lWRxZrE72p3+HCCz9UjfZOEBdphgC0nzOS6DQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-module-transforms" "^7.7.5"
+    "@babel/helper-plugin-utils" "^7.0.0"
     babel-plugin-dynamic-import-node "^2.3.0"
 
 "@babel/plugin-transform-modules-amd@^7.8.3":
@@ -1056,14 +1037,23 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     babel-plugin-dynamic-import-node "^2.3.0"
 
+"@babel/plugin-transform-modules-amd@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.9.0.tgz#19755ee721912cf5bb04c07d50280af3484efef4"
+  integrity sha512-vZgDDF003B14O8zJy0XXLnPH4sg+9X5hFBBGN1V+B2rgrB+J2xIypSN6Rk9imB2hSTHQi5OHLrFWsZab1GMk+Q==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
 "@babel/plugin-transform-modules-commonjs@^7.7.5":
   version "7.7.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.7.5.tgz#1d27f5eb0bcf7543e774950e5b2fa782e637b345"
   integrity sha512-9Cq4zTFExwFhQI6MT1aFxgqhIsMWQWDVwOgLzl7PTWJHsNaqFvklAU+Oz6AQLAS0dJKTwZSOCo20INwktxpi3Q==
   dependencies:
-    "@babel/helper-module-transforms" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-simple-access" "^7.8.3"
+    "@babel/helper-module-transforms" "^7.7.5"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-simple-access" "^7.7.4"
     babel-plugin-dynamic-import-node "^2.3.0"
 
 "@babel/plugin-transform-modules-commonjs@^7.8.3":
@@ -1076,14 +1066,23 @@
     "@babel/helper-simple-access" "^7.8.3"
     babel-plugin-dynamic-import-node "^2.3.0"
 
+"@babel/plugin-transform-modules-commonjs@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.9.0.tgz#e3e72f4cbc9b4a260e30be0ea59bdf5a39748940"
+  integrity sha512-qzlCrLnKqio4SlgJ6FMMLBe4bySNis8DFn1VkGmOcxG9gqEyPIOzeQrA//u0HAKrWpJlpZbZMPB1n/OPa4+n8g==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-simple-access" "^7.8.3"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
 "@babel/plugin-transform-modules-systemjs@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.7.4.tgz#cd98152339d3e763dfe838b7d4273edaf520bb30"
   integrity sha512-y2c96hmcsUi6LrMqvmNDPBBiGCiQu0aYqpHatVVu6kD4mFEXKjyNxd/drc18XXAf9dv7UXjrZwBVmTTGaGP8iw==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.8.3"
-    "@babel/helper-module-transforms" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-hoist-variables" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
     babel-plugin-dynamic-import-node "^2.3.0"
 
 "@babel/plugin-transform-modules-systemjs@^7.8.3":
@@ -1096,13 +1095,23 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     babel-plugin-dynamic-import-node "^2.3.0"
 
+"@babel/plugin-transform-modules-systemjs@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.9.0.tgz#e9fd46a296fc91e009b64e07ddaa86d6f0edeb90"
+  integrity sha512-FsiAv/nao/ud2ZWy4wFacoLOm5uxl0ExSQ7ErvP7jpoihLR6Cq90ilOFyX9UXct3rbtKsAiZ9kFt5XGfPe/5SQ==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.8.3"
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
 "@babel/plugin-transform-modules-umd@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.7.4.tgz#1027c355a118de0aae9fee00ad7813c584d9061f"
   integrity sha512-u2B8TIi0qZI4j8q4C51ktfO7E3cQ0qnaXFI1/OXITordD40tt17g/sXqgNNCcMTcBFKrUPcGDx+TBJuZxLx7tw==
   dependencies:
-    "@babel/helper-module-transforms" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-module-transforms" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-modules-umd@^7.8.3":
   version "7.8.3"
@@ -1112,12 +1121,20 @@
     "@babel/helper-module-transforms" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
 
+"@babel/plugin-transform-modules-umd@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.9.0.tgz#e909acae276fec280f9b821a5f38e1f08b480697"
+  integrity sha512-uTWkXkIVtg/JGRSIABdBoMsoIeoHQHPTL0Y2E7xf5Oj7sLqwVsNXOkNk0VJc7vF0IMBsPeikHxFjGe+qmwPtTQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-named-capturing-groups-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.7.4.tgz#fb3bcc4ee4198e7385805007373d6b6f42c98220"
   integrity sha512-jBUkiqLKvUWpv9GLSuHUFYdmHg0ujC1JEYoZUfeOOfNydZXp1sXObgyPatpcwjWgsdBGsagWW0cdJpX/DO2jMw==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
+    "@babel/helper-create-regexp-features-plugin" "^7.7.4"
 
 "@babel/plugin-transform-named-capturing-groups-regex@^7.8.3":
   version "7.8.3"
@@ -1131,7 +1148,7 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.7.4.tgz#4a0753d2d60639437be07b592a9e58ee00720167"
   integrity sha512-CnPRiNtOG1vRodnsyGX37bHQleHE14B9dnnlgSeEs3ek3fHN1A1SScglTCg1sfbe7sRQ2BUcpgpTpWSfMKz3gg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-new-target@^7.8.3":
   version "7.8.3"
@@ -1145,8 +1162,8 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.7.4.tgz#48488937a2d586c0148451bf51af9d7dda567262"
   integrity sha512-ho+dAEhC2aRnff2JCA0SAK7V2R62zJd/7dmtoe7MHcso4C2mS+vZjn1Pb1pCVZvJs1mgsvv5+7sT+m3Bysb6eg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-replace-supers" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.7.4"
 
 "@babel/plugin-transform-object-super@^7.8.3":
   version "7.8.3"
@@ -1161,9 +1178,9 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.7.4.tgz#da4555c97f39b51ac089d31c7380f03bca4075ce"
   integrity sha512-VJwhVePWPa0DqE9vcfptaJSzNDKrWU/4FbYCjZERtmqEs05g3UMXnYMZoXja7JAJ7Y7sPZipwm/pGApZt7wHlw==
   dependencies:
-    "@babel/helper-call-delegate" "^7.8.3"
-    "@babel/helper-get-function-arity" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-call-delegate" "^7.7.4"
+    "@babel/helper-get-function-arity" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-parameters@^7.8.4":
   version "7.8.4"
@@ -1174,12 +1191,20 @@
     "@babel/helper-get-function-arity" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
 
+"@babel/plugin-transform-parameters@^7.8.7":
+  version "7.9.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.9.3.tgz#3028d0cc20ddc733166c6e9c8534559cee09f54a"
+  integrity sha512-fzrQFQhp7mIhOzmOtPiKffvCYQSK10NR8t6BBz2yPbeUHb9OLW8RZGtgDRBn8z2hGcwvKDL3vC7ojPTLNxmqEg==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-property-literals@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.7.4.tgz#2388d6505ef89b266103f450f9167e6bd73f98c2"
   integrity sha512-MatJhlC4iHsIskWYyawl53KuHrt+kALSADLQQ/HkhTjX954fkxIEh4q5slL4oRAnsm/eDoZ4q0CIZpcqBuxhJQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-property-literals@^7.8.3":
   version "7.8.3"
@@ -1203,6 +1228,22 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-react-display-name@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.8.3.tgz#70ded987c91609f78353dd76d2fb2a0bb991e8e5"
+  integrity sha512-3Jy/PCw8Fe6uBKtEgz3M82ljt+lTg+xJaM4og+eyu83qLT87ZUSckn0wy7r31jflURWLO83TW6Ylf7lyXj3m5A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-transform-react-jsx-development@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.9.0.tgz#3c2a130727caf00c2a293f0aed24520825dbf754"
+  integrity sha512-tK8hWKrQncVvrhvtOiPpKrQjfNX3DtkNLSX4ObuGcpS9p0QrGetKmlySIGR07y48Zft8WVgPakqd/bk46JrMSw==
+  dependencies:
+    "@babel/helper-builder-react-jsx-experimental" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
+
 "@babel/plugin-transform-react-jsx-self@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.7.4.tgz#81b8fbfd14b2215e8f1c2c3adfba266127b0231c"
@@ -1211,6 +1252,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.7.4"
 
+"@babel/plugin-transform-react-jsx-self@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.9.0.tgz#f4f26a325820205239bb915bad8e06fcadabb49b"
+  integrity sha512-K2ObbWPKT7KUTAoyjCsFilOkEgMvFG+y0FqOl6Lezd0/13kMkkjHskVsZvblRPj1PHA44PrToaZANrryppzTvQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
+
 "@babel/plugin-transform-react-jsx-source@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.7.4.tgz#8994b1bf6014b133f5a46d3b7d1ee5f5e3e72c10"
@@ -1219,6 +1268,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.7.4"
 
+"@babel/plugin-transform-react-jsx-source@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.9.0.tgz#89ef93025240dd5d17d3122294a093e5e0183de0"
+  integrity sha512-K6m3LlSnTSfRkM6FcRk8saNEeaeyG5k7AVkBU2bZK3+1zdkSED3qNdsWrUgQBeTVD2Tp3VMmerxVO2yM5iITmw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
+
 "@babel/plugin-transform-react-jsx@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.7.4.tgz#d91205717fae4e2f84d020cd3057ec02a10f11da"
@@ -1228,12 +1285,22 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.7.4"
 
-"@babel/plugin-transform-regenerator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.3.tgz#b31031e8059c07495bf23614c97f3d9698bc6ec8"
-  integrity sha512-qt/kcur/FxrQrzFR432FGZznkVAjiyFtCOANjkAKwCbt465L6ZCiUQh2oMYGU3Wo8LRFJxNDFwWn106S5wVUNA==
+"@babel/plugin-transform-react-jsx@^7.9.4":
+  version "7.9.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.9.4.tgz#86f576c8540bd06d0e95e0b61ea76d55f6cbd03f"
+  integrity sha512-Mjqf3pZBNLt854CK0C/kRuXAnE6H/bo7xYojP+WGtX8glDGSibcwnsWwhwoSuRg0+EBnxPC1ouVnuetUIlPSAw==
   dependencies:
-    regenerator-transform "^0.14.0"
+    "@babel/helper-builder-react-jsx" "^7.9.0"
+    "@babel/helper-builder-react-jsx-experimental" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
+
+"@babel/plugin-transform-regenerator@^7.7.5", "@babel/plugin-transform-regenerator@^7.8.7":
+  version "7.8.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.7.tgz#5e46a0dca2bee1ad8285eb0527e6abc9c37672f8"
+  integrity sha512-TIg+gAl4Z0a3WmD3mbYSk+J9ZUH6n/Yc57rtKRnlA/7rcCvpekHXe0CMZHP1gYp7/KLe9GHTuIba0vXmls6drA==
+  dependencies:
+    regenerator-transform "^0.14.2"
 
 "@babel/plugin-transform-regenerator@^7.8.3":
   version "7.8.3"
@@ -1247,7 +1314,7 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.7.4.tgz#6a7cf123ad175bb5c69aec8f6f0770387ed3f1eb"
   integrity sha512-OrPiUB5s5XvkCO1lS7D8ZtHcswIC57j62acAnJZKqGGnHP+TIc/ljQSrgdX/QyOTdEK5COAhuc820Hi1q2UgLQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-reserved-words@^7.8.3":
   version "7.8.3"
@@ -1256,7 +1323,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-runtime@^7.5.5", "@babel/plugin-transform-runtime@^7.7.4", "@babel/plugin-transform-runtime@^7.7.6":
+"@babel/plugin-transform-runtime@^7.7.4", "@babel/plugin-transform-runtime@^7.7.6":
   version "7.7.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.7.6.tgz#4f2b548c88922fb98ec1c242afd4733ee3e12f61"
   integrity sha512-tajQY+YmXR7JjTwRvwL4HePqoL3DYxpYXIHKVvrOIvJmeHe2y1w4tz5qz9ObUDC9m76rCzIMPyn4eERuwA4a4A==
@@ -1266,14 +1333,7 @@
     resolve "^1.8.1"
     semver "^5.5.1"
 
-"@babel/plugin-transform-shorthand-properties@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.8.3.tgz#28545216e023a832d4d3a1185ed492bcfeac08c8"
-  integrity sha512-I9DI6Odg0JJwxCHzbzW08ggMdCezoWcuQRz3ptdudgwaHxTjxw5HgdFJmZIkIMlRymL6YiZcped4TTCB0JcC8w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-shorthand-properties@^7.8.3":
+"@babel/plugin-transform-shorthand-properties@^7.7.4", "@babel/plugin-transform-shorthand-properties@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.8.3.tgz#28545216e023a832d4d3a1185ed492bcfeac08c8"
   integrity sha512-I9DI6Odg0JJwxCHzbzW08ggMdCezoWcuQRz3ptdudgwaHxTjxw5HgdFJmZIkIMlRymL6YiZcped4TTCB0JcC8w==
@@ -1285,7 +1345,7 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.7.4.tgz#aa673b356fe6b7e70d69b6e33a17fef641008578"
   integrity sha512-8OSs0FLe5/80cndziPlg4R0K6HcWSM0zyNhHhLsmw/Nc5MaA49cAsnoJ/t/YZf8qkG7fD+UjTRaApVDB526d7Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-spread@^7.8.3":
   version "7.8.3"
@@ -1299,8 +1359,8 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.7.4.tgz#ffb68c05090c30732076b1285dc1401b404a123c"
   integrity sha512-Ls2NASyL6qtVe1H1hXts9yuEeONV2TJZmplLONkMPUG158CtmnrzW5Q5teibM5UVOFjG0D3IC5mzXR6pPpUY7A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-regex" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-regex" "^7.0.0"
 
 "@babel/plugin-transform-sticky-regex@^7.8.3":
   version "7.8.3"
@@ -1315,8 +1375,8 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.7.4.tgz#1eb6411736dd3fe87dbd20cc6668e5121c17d604"
   integrity sha512-sA+KxLwF3QwGj5abMHkHgshp9+rRz+oY9uoRil4CyLtgEuE/88dpkeWgNk5qKVsJE9iSfly3nvHapdRiIS2wnQ==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-annotate-as-pure" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-template-literals@^7.8.3":
   version "7.8.3"
@@ -1331,7 +1391,7 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.7.4.tgz#3174626214f2d6de322882e498a38e8371b2140e"
   integrity sha512-KQPUQ/7mqe2m0B8VecdyaW5XcQYaePyl9R7IsKd+irzj6jvbhoGnRE+M0aNkyAzI07VfUQ9266L5xMARitV3wg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-typeof-symbol@^7.8.4":
   version "7.8.4"
@@ -1349,15 +1409,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-typescript" "^7.7.4"
 
-"@babel/plugin-transform-unicode-regex@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.8.3.tgz#0cef36e3ba73e5c57273effb182f46b91a1ecaad"
-  integrity sha512-+ufgJjYdmWfSQ+6NS9VGUR2ns8cjJjYbrbi11mZBTaWm+Fui/ncTLFF28Ei1okavY+xkojGr1eJxNsWYeA5aZw==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-unicode-regex@^7.8.3":
+"@babel/plugin-transform-unicode-regex@^7.7.4", "@babel/plugin-transform-unicode-regex@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.8.3.tgz#0cef36e3ba73e5c57273effb182f46b91a1ecaad"
   integrity sha512-+ufgJjYdmWfSQ+6NS9VGUR2ns8cjJjYbrbi11mZBTaWm+Fui/ncTLFF28Ei1okavY+xkojGr1eJxNsWYeA5aZw==
@@ -1365,13 +1417,13 @@
     "@babel/helper-create-regexp-features-plugin" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/polyfill@^7.4.4":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.7.0.tgz#e1066e251e17606ec7908b05617f9b7f8180d8f3"
-  integrity sha512-/TS23MVvo34dFmf8mwCisCbWGrfhbiWZSwBo6HkADTBhUa2Q/jWltyY/tpofz/b6/RIhqaqQcquptCirqIhOaQ==
+"@babel/polyfill@^7.7.0":
+  version "7.8.7"
+  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.8.7.tgz#151ec24c7135481336168c3bd8b8bf0cf91c032f"
+  integrity sha512-LeSfP9bNZH2UOZgcGcZ0PIHUt1ZuHub1L3CVmEyqLxCeDLm4C5Gi8jRH8ZX2PNpDhQCo0z6y/+DIs2JlliXW8w==
   dependencies:
     core-js "^2.6.5"
-    regenerator-runtime "^0.13.2"
+    regenerator-runtime "^0.13.4"
 
 "@babel/preset-env@^7.4.5":
   version "7.8.6"
@@ -1436,7 +1488,7 @@
     levenary "^1.1.1"
     semver "^5.5.0"
 
-"@babel/preset-env@^7.5.5", "@babel/preset-env@^7.7.4":
+"@babel/preset-env@^7.7.4":
   version "7.7.6"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.6.tgz#39ac600427bbb94eec6b27953f1dfa1d64d457b2"
   integrity sha512-k5hO17iF/Q7tR9Jv8PdNBZWYW6RofxhnxKjBMc0nG4JTaWvOTiPoO/RLFwAKcA4FpmuBFm6jkoqaRJLGi0zdaQ==
@@ -1490,9 +1542,98 @@
     browserslist "^4.6.0"
     core-js-compat "^3.4.7"
     invariant "^2.2.2"
-    levenary "^1.1.0"
+    js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
+"@babel/preset-env@^7.7.6":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.9.0.tgz#a5fc42480e950ae8f5d9f8f2bbc03f52722df3a8"
+  integrity sha512-712DeRXT6dyKAM/FMbQTV/FvRCms2hPCx+3weRjZ8iQVQWZejWWk1wwG6ViWMyqb/ouBbGOl5b6aCk0+j1NmsQ==
+  dependencies:
+    "@babel/compat-data" "^7.9.0"
+    "@babel/helper-compilation-targets" "^7.8.7"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-proposal-async-generator-functions" "^7.8.3"
+    "@babel/plugin-proposal-dynamic-import" "^7.8.3"
+    "@babel/plugin-proposal-json-strings" "^7.8.3"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-proposal-numeric-separator" "^7.8.3"
+    "@babel/plugin-proposal-object-rest-spread" "^7.9.0"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-proposal-optional-chaining" "^7.9.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.8.3"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+    "@babel/plugin-transform-arrow-functions" "^7.8.3"
+    "@babel/plugin-transform-async-to-generator" "^7.8.3"
+    "@babel/plugin-transform-block-scoped-functions" "^7.8.3"
+    "@babel/plugin-transform-block-scoping" "^7.8.3"
+    "@babel/plugin-transform-classes" "^7.9.0"
+    "@babel/plugin-transform-computed-properties" "^7.8.3"
+    "@babel/plugin-transform-destructuring" "^7.8.3"
+    "@babel/plugin-transform-dotall-regex" "^7.8.3"
+    "@babel/plugin-transform-duplicate-keys" "^7.8.3"
+    "@babel/plugin-transform-exponentiation-operator" "^7.8.3"
+    "@babel/plugin-transform-for-of" "^7.9.0"
+    "@babel/plugin-transform-function-name" "^7.8.3"
+    "@babel/plugin-transform-literals" "^7.8.3"
+    "@babel/plugin-transform-member-expression-literals" "^7.8.3"
+    "@babel/plugin-transform-modules-amd" "^7.9.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.9.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.9.0"
+    "@babel/plugin-transform-modules-umd" "^7.9.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.8.3"
+    "@babel/plugin-transform-new-target" "^7.8.3"
+    "@babel/plugin-transform-object-super" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.8.7"
+    "@babel/plugin-transform-property-literals" "^7.8.3"
+    "@babel/plugin-transform-regenerator" "^7.8.7"
+    "@babel/plugin-transform-reserved-words" "^7.8.3"
+    "@babel/plugin-transform-shorthand-properties" "^7.8.3"
+    "@babel/plugin-transform-spread" "^7.8.3"
+    "@babel/plugin-transform-sticky-regex" "^7.8.3"
+    "@babel/plugin-transform-template-literals" "^7.8.3"
+    "@babel/plugin-transform-typeof-symbol" "^7.8.4"
+    "@babel/plugin-transform-unicode-regex" "^7.8.3"
+    "@babel/preset-modules" "^0.1.3"
+    "@babel/types" "^7.9.0"
+    browserslist "^4.9.1"
+    core-js-compat "^3.6.2"
+    invariant "^2.2.2"
+    levenary "^1.1.1"
+    semver "^5.5.0"
+
+"@babel/preset-modules@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.3.tgz#13242b53b5ef8c883c3cf7dddd55b36ce80fbc72"
+  integrity sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/preset-react@^7.0.0":
+  version "7.9.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.9.4.tgz#c6c97693ac65b6b9c0b4f25b948a8f665463014d"
+  integrity sha512-AxylVB3FXeOTQXNXyiuAQJSvss62FEotbX2Pzx3K/7c+MKJMdSg6Ose6QYllkdCFA8EInCJVw7M/o5QbLuA4ZQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-transform-react-display-name" "^7.8.3"
+    "@babel/plugin-transform-react-jsx" "^7.9.4"
+    "@babel/plugin-transform-react-jsx-development" "^7.9.0"
+    "@babel/plugin-transform-react-jsx-self" "^7.9.0"
+    "@babel/plugin-transform-react-jsx-source" "^7.9.0"
+
 "@babel/preset-react@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.7.4.tgz#3fe2ea698d8fb536d8e7881a592c3c1ee8bf5707"
@@ -1519,6 +1660,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.8.4":
+  version "7.9.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
+  integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.6.0", "@babel/template@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
@@ -1537,6 +1685,21 @@
     "@babel/parser" "^7.8.6"
     "@babel/types" "^7.8.6"
 
+"@babel/traverse@^7.0.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.0.tgz#d3882c2830e513f4fe4cec9fe76ea1cc78747892"
+  integrity sha512-jAZQj0+kn4WTHO5dUZkZKhbFrqZE7K5LAQ5JysMnmvGij+wOdr+8lWqPeW0BcF4wFwrEXXtdGO7wcV6YPJcf3w==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.9.0"
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    "@babel/parser" "^7.9.0"
+    "@babel/types" "^7.9.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
 "@babel/traverse@^7.6.2", "@babel/traverse@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558"
@@ -1585,6 +1748,15 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.0.tgz#00b064c3df83ad32b2dbf5ff07312b15c7f1efb5"
+  integrity sha512-BS9JKfXkzzJl8RluW4JGknzpiUV7ZrvTayM6yfqLTVBEnFtyowVIOu6rqxRd5cVO6yGoWf4T8u8dgK9oB+GCng==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.9.0"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
@@ -3172,7 +3344,7 @@ browserslist@4.7.0:
     electron-to-chromium "^1.3.247"
     node-releases "^1.1.29"
 
-browserslist@^4.0.0, browserslist@^4.6.4, browserslist@^4.8.0, browserslist@^4.8.2, browserslist@^4.8.3:
+browserslist@^4.0.0, browserslist@^4.6.4, browserslist@^4.8.0:
   version "4.8.3"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.3.tgz#65802fcd77177c878e015f0e3189f2c4f627ba44"
   integrity sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==
@@ -3181,6 +3353,16 @@ browserslist@^4.0.0, browserslist@^4.6.4, browserslist@^4.8.0, browserslist@^4.8
     electron-to-chromium "^1.3.322"
     node-releases "^1.1.44"
 
+browserslist@^4.6.0, browserslist@^4.9.1:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.11.0.tgz#aef4357b10a8abda00f97aac7cd587b2082ba1ad"
+  integrity sha512-WqEC7Yr5wUH5sg6ruR++v2SGOQYpyUdYYd4tZoAq1F7y+QXoLoYGXVbxhtaIqWmAJjtNTRjVD3HuJc1OXTel2A==
+  dependencies:
+    caniuse-lite "^1.0.30001035"
+    electron-to-chromium "^1.3.380"
+    node-releases "^1.1.52"
+    pkg-up "^3.1.0"
+
 browserslist@^4.8.3, browserslist@^4.8.5:
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.9.1.tgz#01ffb9ca31a1aef7678128fc6a2253316aa7287c"
@@ -3447,6 +3629,11 @@ caniuse-lite@^1.0.30001030:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001031.tgz#76f1bdd39e19567b855302f65102d9a8aaad5930"
   integrity sha512-DpAP5a1NGRLgYfaNCaXIRyGARi+3tJA2quZXNNA1Du26VyVkqvy2tznNu5ANyN1Y5aX44QDotZSVSUSi2uMGjg==
 
+caniuse-lite@^1.0.30001035:
+  version "1.0.30001036"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001036.tgz#930ea5272010d8bf190d859159d757c0b398caf0"
+  integrity sha512-jU8CIFIj2oR7r4W+5AKcsvWNVIb6Q6OZE3UsrXrZBHFtreT4YgTeOJtTucp+zSedEpTi3L5wASSP0LYIE3if6w==
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -3929,15 +4116,7 @@ copy-webpack-plugin@^5.0.5:
     serialize-javascript "^2.1.0"
     webpack-log "^2.0.0"
 
-core-js-compat@^3.6.2:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.4.tgz#938476569ebb6cda80d339bcf199fae4f16fff17"
-  integrity sha512-zAa3IZPvsJ0slViBQ2z+vgyyTuhd3MFn1rBQjZSKVEgB0UMYhUkCj9jJUVPgGTGqWvsBVmfnruXgTcNyTlEiSA==
-  dependencies:
-    browserslist "^4.8.3"
-    semver "7.0.0"
-
-core-js-compat@^3.6.2:
+core-js-compat@^3.4.7, core-js-compat@^3.6.2:
   version "3.6.4"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.4.tgz#938476569ebb6cda80d339bcf199fae4f16fff17"
   integrity sha512-zAa3IZPvsJ0slViBQ2z+vgyyTuhd3MFn1rBQjZSKVEgB0UMYhUkCj9jJUVPgGTGqWvsBVmfnruXgTcNyTlEiSA==
@@ -4762,6 +4941,11 @@ electron-to-chromium@^1.3.363:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.365.tgz#fa3d77ed454e18eeacd3611a1f5d33f09dc85706"
   integrity sha512-LQGbIvLWEOQ1xblY2pXxVoaAYd5T5h5f8m3h3hTEYonWY3Zrec0gy8TVz2tXdaUz+4qXwVThIbLvl/Dll3CdLQ==
 
+electron-to-chromium@^1.3.380:
+  version "1.3.382"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.382.tgz#cad02da655c33f7a3d6ca7525bd35c17e90f3a8f"
+  integrity sha512-gJfxOcgnBlXhfnUUObsq3n3ReU8CT6S8je97HndYRkKsNZMJJ38zO/pI5aqO7L3Myfq+E3pqPyKK/ynyLEQfBA==
+
 elliptic@^6.0.0:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"
@@ -6948,6 +7132,11 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
+is-what@^3.3.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.7.1.tgz#a3f810a99f88e9122cf17bf2be7709688970db1a"
+  integrity sha512-IAoapxlqyLSqt0Zr/7ZMT/fjEw9nwxxmz/TlBH+TJjvcXxmmAdRvo41W74uw3XJMGFpbeft97cpkPmLK89lJWw==
+
 is-whitespace-character@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.3.tgz#b3ad9546d916d7d3ffa78204bca0c26b56257fac"
@@ -7206,7 +7395,7 @@ leven@^3.1.0:
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
   integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
 
-levenary@^1.1.1:
+levenary@^1.1.0, levenary@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
   integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
@@ -7628,6 +7817,13 @@ meow@^3.3.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
+merge-anything@^2.2.4:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.4.tgz#6226b2ac3d3d3fc5fb9e8d23aa400df25f98fdf0"
+  integrity sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==
+  dependencies:
+    is-what "^3.3.1"
+
 merge-deep@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
@@ -8065,6 +8261,13 @@ node-releases@^1.1.50:
   dependencies:
     semver "^6.3.0"
 
+node-releases@^1.1.52:
+  version "1.1.52"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.52.tgz#bcffee3e0a758e92e44ecfaecd0a47554b0bcba9"
+  integrity sha512-snSiT1UypkgGt2wxPqS6ImEUICbNCMb31yaxWrOLXjhlt2z2/IBpaOxzONExqSm4y5oLnAqjjRWu+wsDzK5yNQ==
+  dependencies:
+    semver "^6.3.0"
+
 nopt@1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
@@ -8809,6 +9012,13 @@ pkg-up@2.0.0, pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
+pkg-up@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
+  integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
+  dependencies:
+    find-up "^3.0.0"
+
 pngquant-bin@^5.0.0:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/pngquant-bin/-/pngquant-bin-5.0.2.tgz#6f34f3e89c9722a72bbc509062b40f1b17cda460"
@@ -9482,7 +9692,7 @@ prism-react-renderer@^1.0.1, prism-react-renderer@^1.0.2:
   resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.0.2.tgz#3bb9a6a42f76fc049b03266298c7068fdd4b7ea9"
   integrity sha512-0++pJyRfu4v2OxI/Us/5RLui9ESDkTiLkVCtKuPZYdpB8UQWJpnJQhPrWab053XtsKW3oM0sD69uJ6N9exm1Ag==
 
-private@^0.1.6:
+private@^0.1.6, private@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
   integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
@@ -9952,6 +10162,13 @@ regenerate-unicode-properties@^8.1.0:
   dependencies:
     regenerate "^1.4.0"
 
+regenerate-unicode-properties@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
+  integrity sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==
+  dependencies:
+    regenerate "^1.4.0"
+
 regenerate@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
@@ -9967,6 +10184,11 @@ regenerator-runtime@^0.13.2:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
   integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
 
+regenerator-runtime@^0.13.4:
+  version "0.13.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
+  integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
+
 regenerator-transform@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
@@ -9974,6 +10196,14 @@ regenerator-transform@^0.14.0:
   dependencies:
     private "^0.1.6"
 
+regenerator-transform@^0.14.2:
+  version "0.14.4"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.4.tgz#5266857896518d1616a78a0479337a30ea974cc7"
+  integrity sha512-EaJaKPBI9GvKpvUz2mz4fhx7WPgvwRLY9v3hlNHWmAuJHI13T4nwKnNvm5RWJzEdnI5g5UwtOww+S8IdoUC2bw==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+    private "^0.1.8"
+
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
@@ -10001,7 +10231,19 @@ regexpu-core@^4.2.0, regexpu-core@^4.5.4, regexpu-core@^4.6.0:
     unicode-match-property-ecmascript "^1.0.4"
     unicode-match-property-value-ecmascript "^1.1.0"
 
-regjsgen@^0.5.0:
+regexpu-core@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
+  integrity sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==
+  dependencies:
+    regenerate "^1.4.0"
+    regenerate-unicode-properties "^8.2.0"
+    regjsgen "^0.5.1"
+    regjsparser "^0.6.4"
+    unicode-match-property-ecmascript "^1.0.4"
+    unicode-match-property-value-ecmascript "^1.2.0"
+
+regjsgen@^0.5.0, regjsgen@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.1.tgz#48f0bf1a5ea205196929c0d9798b42d1ed98443c"
   integrity sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg==
@@ -10013,6 +10255,13 @@ regjsparser@^0.6.0:
   dependencies:
     jsesc "~0.5.0"
 
+regjsparser@^0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.4.tgz#a769f8684308401a66e9b529d2436ff4d0666272"
+  integrity sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==
+  dependencies:
+    jsesc "~0.5.0"
+
 relateurl@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
@@ -11466,6 +11715,11 @@ unicode-match-property-value-ecmascript@^1.1.0:
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz#5b4b426e08d13a80365e0d657ac7a6c1ec46a277"
   integrity sha512-hDTHvaBk3RmFzvSl0UVrUmC3PuW9wKVnpoUDYH0JDkSIovzw+J5viQmeYHxVSBptubnr7PbH2e0fnpDRQnQl5g==
 
+unicode-match-property-value-ecmascript@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
+  integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
+
 unicode-property-aliases-ecmascript@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz#a9cc6cc7ce63a0a3023fc99e341b94431d405a57"
@@ -11806,13 +12060,6 @@ wait-file@^1.0.5:
     fs-extra "^8.1.0"
     rx "^4.1.0"
 
-warning@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
-  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
-  dependencies:
-    loose-envify "^1.0.0"
-
 watchpack@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
diff --git a/src/BottomSheet/BottomSheet.test.tsx b/src/BottomSheet/BottomSheet.test.tsx
new file mode 100644
index 00000000..ba23fba7
--- /dev/null
+++ b/src/BottomSheet/BottomSheet.test.tsx
@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@sinoui/theme';
+import Button from '@sinoui/core/Button';
+import BottomSheet from '@sinoui/core/BottomSheet';
+import List from '@sinoui/core/List';
+import ListItem from '@sinoui/core/ListItem';
+import ListItemText from '@sinoui/core/ListItemText';
+import ListItemPrimaryAction from '@sinoui/core/ListItemPrimaryAction';
+import Divider from '@sinoui/core/Divider';
+import IconButton from '@sinoui/core/IconButton';
+import BookmarkBorder from '@sinoui/icons/BookmarkBorder';
+
+/**
+ * BottomSheet组件 测试
+ */
+
+const listData = [1, 2, 3];
+const content = (
+  <List>
+    {listData.map((item) => (
+      <>
+        <ListItem>
+          <ListItemPrimaryAction>
+            <IconButton color="primary">
+              <BookmarkBorder />
+            </IconButton>
+          </ListItemPrimaryAction>
+          <ListItemText>item{item}</ListItemText>
+        </ListItem>
+        <Divider />
+      </>
+    ))}
+  </List>
+);
+
+function BottomSheetDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onBackdropClick = () => {
+    setOpen(false);
+  };
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheet open={open} onBackdropClick={onBackdropClick}>
+        {content}
+      </BottomSheet>
+    </>
+  );
+}
+
+// describe('BottomSheet组件 快照测试', () => {
+//   it('基本使用', () => {
+//     const tree = renderer
+//       .create(
+//         <ThemeProvider theme={defaultTheme}>
+//           <BottomSheet>{content}</BottomSheet>
+//         </ThemeProvider>,
+//       )
+//       .toJSON();
+
+//     expect(tree).toMatchSnapshot();
+//   });
+
+//   it('点击遮罩层事件', () => {
+//     const tree = renderer
+//       .create(
+//         <ThemeProvider theme={defaultTheme}>
+//           <BottomSheetDemo />
+//         </ThemeProvider>,
+//       )
+//       .toJSON();
+
+//     expect(tree).toMatchSnapshot();
+//   });
+
+//   it('设置不显示遮罩层', () => {
+//     const tree = renderer
+//       .create(
+//         <ThemeProvider theme={defaultTheme}>
+//           <BottomSheet backdrop={false}>{content}</BottomSheet>
+//         </ThemeProvider>,
+//       )
+//       .toJSON();
+
+//     expect(tree).toMatchSnapshot();
+//   });
+// });
diff --git a/src/BottomSheet/BottomSheet.tsx b/src/BottomSheet/BottomSheet.tsx
index 29e079fd..c706db51 100644
--- a/src/BottomSheet/BottomSheet.tsx
+++ b/src/BottomSheet/BottomSheet.tsx
@@ -61,6 +61,10 @@ export interface BottomSheetProps {
    * 是否显示
    */
   open?: boolean;
+  /**
+   * 是否显示遮罩层
+   */
+  backdrop?: boolean;
   /**
    * 是否响应点击遮罩层事件
    */
@@ -70,7 +74,7 @@ export interface BottomSheetProps {
    */
   onBackdropClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /**
-   * 添加自定义样式
+   * 添加自定义类名
    */
   className?: string;
   /**
@@ -92,7 +96,7 @@ export interface BottomSheetProps {
  */
 function BottomSheet(props: BottomSheetProps) {
   const {
-    open = false,
+    open = true,
     backdropClick = true,
     onBackdropClick,
     className,
diff --git a/stories/BottomSheet.stories.tsx b/stories/BottomSheet.stories.tsx
index 2d3be2d7..805b4557 100644
--- a/stories/BottomSheet.stories.tsx
+++ b/stories/BottomSheet.stories.tsx
@@ -5,14 +5,38 @@ import Button from '@sinoui/core/Button';
 import BottomSheet from '@sinoui/core/BottomSheet';
 import List from '@sinoui/core/List';
 import ListItem from '@sinoui/core/ListItem';
+import ListItemText from '@sinoui/core/ListItemText';
+import ListItemPrimaryAction from '@sinoui/core/ListItemPrimaryAction';
+import Divider from '@sinoui/core/Divider';
+import IconButton from '@sinoui/core/IconButton';
+import BookmarkBorder from '@sinoui/icons/BookmarkBorder';
 
 export default {
   title: 'BottomSheet',
 };
 
+const listData = [1, 2, 3];
+const content = (
+  <List>
+    {listData.map((item) => (
+      <>
+        <ListItem>
+          <ListItemPrimaryAction>
+            <IconButton color="primary">
+              <BookmarkBorder />
+            </IconButton>
+          </ListItemPrimaryAction>
+          <ListItemText>item{item}</ListItemText>
+        </ListItem>
+        <Divider />
+      </>
+    ))}
+  </List>
+);
+
 export const 基本使用 = () => (
   <ThemeProvider theme={defaultTheme}>
-    <BottomSheet>内容</BottomSheet>
+    <BottomSheet>{content}</BottomSheet>
   </ThemeProvider>
 );
 
@@ -30,14 +54,20 @@ function BottomSheetDemo() {
     <>
       <Button onClick={onClick}>CLICK</Button>
       <BottomSheet open={open} onBackdropClick={onBackdropClick}>
-        11111
+        {content}
       </BottomSheet>
     </>
   );
 }
 
-export const 点击遮罩层隐藏 = () => (
+export const 点击遮罩层事件 = () => (
   <ThemeProvider theme={defaultTheme}>
     <BottomSheetDemo />
   </ThemeProvider>
 );
+
+export const 设置不显示遮罩层 = () => (
+  <ThemeProvider theme={defaultTheme}>
+    <BottomSheet backdrop={false}>{content}</BottomSheet>
+  </ThemeProvider>
+);

From 915d630d7d88caa430d45dec252bd79a2688dcda Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Wed, 25 Mar 2020 09:21:37 +0800
Subject: [PATCH 15/28] =?UTF-8?q?chore:=E7=BB=84=E4=BB=B6=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/components-apis/bottomSheet.mdx |   4 +-
 docs/yarn.lock                            | 128 +++++++++++++++++-----
 2 files changed, 103 insertions(+), 29 deletions(-)

diff --git a/docs/docs/components-apis/bottomSheet.mdx b/docs/docs/components-apis/bottomSheet.mdx
index 61970ae3..6ad64035 100644
--- a/docs/docs/components-apis/bottomSheet.mdx
+++ b/docs/docs/components-apis/bottomSheet.mdx
@@ -1,6 +1,6 @@
 ---
 id: bottomSheet
-title:BottomSheet
+title: BottomSheet
 ---
 
 BottomSheet 底部滑出组件。
@@ -13,7 +13,7 @@ import BottomSheet from '@sinoui/core/BottomSheet';
 
 ## API
 
-Avatar组件属性：
+BottomSheet组件属性：
 
 | 参数名称    | 参数类型   | 默认值        | 说明                                                         |
 | ----------- | --------------- | ------------------------ | ----------------------------------- |
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 5de63c81..d74b4cf1 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -139,7 +139,7 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.8.3":
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.7.4", "@babel/helper-builder-binary-assignment-operator-visitor@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.8.3.tgz#c84097a427a061ac56a1c30ebf54b7b22d241503"
   integrity sha512-5eFOm2SyFPK4Rh3XMMRDjN7lBH0orh3ss0g3rTYZnBQ+r6YPj7lgDyCvPphynHvUrobJmeMignBr6Acw9mAPlw==
@@ -172,6 +172,15 @@
     "@babel/helper-annotate-as-pure" "^7.8.3"
     "@babel/types" "^7.9.0"
 
+"@babel/helper-call-delegate@^7.7.4":
+  version "7.8.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.8.7.tgz#28a279c2e6c622a6233da548127f980751324cab"
+  integrity sha512-doAA5LAKhsFCR0LAFIf+r2RSMmC+m8f/oQ+URnUET/rWeEzC0yTRmAGyWkD4sSu3xwbS7MYQ2u+xlt1V5R56KQ==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.8.3"
+    "@babel/traverse" "^7.8.3"
+    "@babel/types" "^7.8.7"
+
 "@babel/helper-call-delegate@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.8.3.tgz#de82619898aa605d409c42be6ffb8d7204579692"
@@ -215,6 +224,15 @@
     "@babel/helper-replace-supers" "^7.8.3"
     "@babel/helper-split-export-declaration" "^7.8.3"
 
+"@babel/helper-create-regexp-features-plugin@^7.7.4", "@babel/helper-create-regexp-features-plugin@^7.8.8":
+  version "7.8.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz#5d84180b588f560b7864efaeea89243e58312087"
+  integrity sha512-LYVPdwkrQEiX9+1R29Ld/wTrmQu1SSKYnuOk3g0CkcZMA1p0gsNxJFj/3gBdaJ7Cg0Fnek5z0DsMULePP7Lrqg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-regex" "^7.8.3"
+    regexpu-core "^4.7.0"
+
 "@babel/helper-create-regexp-features-plugin@^7.8.3":
   version "7.8.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.6.tgz#7fa040c97fb8aebe1247a5c645330c32d083066b"
@@ -224,15 +242,6 @@
     "@babel/helper-regex" "^7.8.3"
     regexpu-core "^4.6.0"
 
-"@babel/helper-create-regexp-features-plugin@^7.8.8":
-  version "7.8.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz#5d84180b588f560b7864efaeea89243e58312087"
-  integrity sha512-LYVPdwkrQEiX9+1R29Ld/wTrmQu1SSKYnuOk3g0CkcZMA1p0gsNxJFj/3gBdaJ7Cg0Fnek5z0DsMULePP7Lrqg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.8.3"
-    "@babel/helper-regex" "^7.8.3"
-    regexpu-core "^4.7.0"
-
 "@babel/helper-define-map@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.7.4.tgz#2841bf92eb8bd9c906851546fe6b9d45e162f176"
@@ -277,14 +286,14 @@
     "@babel/template" "^7.8.3"
     "@babel/types" "^7.8.3"
 
-"@babel/helper-get-function-arity@^7.8.3":
+"@babel/helper-get-function-arity@^7.7.4", "@babel/helper-get-function-arity@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
   integrity sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==
   dependencies:
     "@babel/types" "^7.8.3"
 
-"@babel/helper-hoist-variables@^7.8.3":
+"@babel/helper-hoist-variables@^7.7.4", "@babel/helper-hoist-variables@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.8.3.tgz#1dbe9b6b55d78c9b4183fc8cdc6e30ceb83b7134"
   integrity sha512-ky1JLOjcDUtSc+xkt0xhYff7Z6ILTAHKmZLHPxAhOP0Nd77O+3nCsd6uSVYur6nJnCI029CrNbYlc0LoPfAPQg==
@@ -319,30 +328,30 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
-"@babel/helper-module-transforms@^7.8.3":
-  version "7.8.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.8.6.tgz#6a13b5eecadc35692047073a64e42977b97654a4"
-  integrity sha512-RDnGJSR5EFBJjG3deY0NiL0K9TO8SXxS9n/MPsbPK/s9LbQymuLNtlzvDiNS7IpecuL45cMeLVkA+HfmlrnkRg==
+"@babel/helper-module-transforms@^7.7.4", "@babel/helper-module-transforms@^7.7.5", "@babel/helper-module-transforms@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz#43b34dfe15961918707d247327431388e9fe96e5"
+  integrity sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==
   dependencies:
     "@babel/helper-module-imports" "^7.8.3"
     "@babel/helper-replace-supers" "^7.8.6"
     "@babel/helper-simple-access" "^7.8.3"
     "@babel/helper-split-export-declaration" "^7.8.3"
     "@babel/template" "^7.8.6"
-    "@babel/types" "^7.8.6"
+    "@babel/types" "^7.9.0"
     lodash "^4.17.13"
 
-"@babel/helper-module-transforms@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz#43b34dfe15961918707d247327431388e9fe96e5"
-  integrity sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==
+"@babel/helper-module-transforms@^7.8.3":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.8.6.tgz#6a13b5eecadc35692047073a64e42977b97654a4"
+  integrity sha512-RDnGJSR5EFBJjG3deY0NiL0K9TO8SXxS9n/MPsbPK/s9LbQymuLNtlzvDiNS7IpecuL45cMeLVkA+HfmlrnkRg==
   dependencies:
     "@babel/helper-module-imports" "^7.8.3"
     "@babel/helper-replace-supers" "^7.8.6"
     "@babel/helper-simple-access" "^7.8.3"
     "@babel/helper-split-export-declaration" "^7.8.3"
     "@babel/template" "^7.8.6"
-    "@babel/types" "^7.9.0"
+    "@babel/types" "^7.8.6"
     lodash "^4.17.13"
 
 "@babel/helper-optimise-call-expression@^7.7.4":
@@ -369,14 +378,14 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
   integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
 
-"@babel/helper-regex@^7.8.3":
+"@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.8.3.tgz#139772607d51b93f23effe72105b319d2a4c6965"
   integrity sha512-BWt0QtYv/cg/NecOAZMdcn/waj/5P26DR4mVLXfFtDokSR6fyuG0Pj+e2FqtSME+MqED1khnSMulkmGl8qWiUQ==
   dependencies:
     lodash "^4.17.13"
 
-"@babel/helper-remap-async-to-generator@^7.8.3":
+"@babel/helper-remap-async-to-generator@^7.7.4", "@babel/helper-remap-async-to-generator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.8.3.tgz#273c600d8b9bf5006142c1e35887d555c12edd86"
   integrity sha512-kgwDmw4fCg7AVgS4DukQR/roGp+jP+XluJE5hsRZwxCYGg+Rv9wSGErDWhlI90FODdYfd4xG4AQRiMDjjN0GzA==
@@ -407,7 +416,7 @@
     "@babel/traverse" "^7.8.6"
     "@babel/types" "^7.8.6"
 
-"@babel/helper-simple-access@^7.8.3":
+"@babel/helper-simple-access@^7.7.4", "@babel/helper-simple-access@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
   integrity sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==
@@ -1748,7 +1757,7 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.9.0":
+"@babel/types@^7.8.7", "@babel/types@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.0.tgz#00b064c3df83ad32b2dbf5ff07312b15c7f1efb5"
   integrity sha512-BS9JKfXkzzJl8RluW4JGknzpiUV7ZrvTayM6yfqLTVBEnFtyowVIOu6rqxRd5cVO6yGoWf4T8u8dgK9oB+GCng==
@@ -2609,6 +2618,16 @@ ajv@^6.1.0, ajv@^6.10.2, ajv@^6.5.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^6.12.0:
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.0.tgz#06d60b96d87b8454a5adaba86e7854da629db4b7"
+  integrity sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
 algoliasearch@^3.24.5:
   version "3.35.1"
   resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.35.1.tgz#297d15f534a3507cab2f5dfb996019cac7568f0c"
@@ -2917,6 +2936,17 @@ babel-loader@^8.0.6:
     mkdirp "^0.5.1"
     pify "^4.0.1"
 
+babel-loader@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
+  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
+  dependencies:
+    find-cache-dir "^2.1.0"
+    loader-utils "^1.4.0"
+    mkdirp "^0.5.3"
+    pify "^4.0.1"
+    schema-utils "^2.6.5"
+
 babel-messages@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
@@ -4974,6 +5004,11 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -5346,6 +5381,11 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
+fast-deep-equal@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
+  integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
+
 fast-glob@^2.0.2:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -7218,6 +7258,11 @@ jest-worker@^24.9.0:
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
+js-levenshtein@^1.1.3:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
+  integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -7395,7 +7440,7 @@ leven@^3.1.0:
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
   integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
 
-levenary@^1.1.0, levenary@^1.1.1:
+levenary@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
   integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
@@ -7437,6 +7482,15 @@ loader-utils@1.2.3, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
+loader-utils@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -7988,6 +8042,11 @@ minimist@^1.1.3, minimist@^1.2.0:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
+minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
 minipass-collect@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
@@ -8075,6 +8134,13 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
+mkdirp@^0.5.3:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.4.tgz#fd01504a6797ec5c9be81ff43d204961ed64a512"
+  integrity sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==
+  dependencies:
+    minimist "^1.2.5"
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -10601,6 +10667,14 @@ schema-utils@^2.0.0, schema-utils@^2.0.1, schema-utils@^2.6.0, schema-utils@^2.6
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
 
+schema-utils@^2.6.5:
+  version "2.6.5"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.5.tgz#c758f0a7e624263073d396e29cd40aa101152d8a"
+  integrity sha512-5KXuwKziQrTVHh8j/Uxz+QUbxkaLW9X/86NBlx/gnKgtsZA2GIVMUn17qWhRFwF8jdYb3Dig5hRO/W5mZqy6SQ==
+  dependencies:
+    ajv "^6.12.0"
+    ajv-keywords "^3.4.1"
+
 section-matter@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"

From 5e420921526840506f0c8929e8761cb98e4dc576 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Wed, 25 Mar 2020 09:51:44 +0800
Subject: [PATCH 16/28] =?UTF-8?q?chore:=E7=BB=84=E4=BB=B6=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bottomSheet-demos/BottomSheetDemo.tsx     |  4 +-
 docs/docs/components/bottomSheet.mdx          | 12 ++--
 docs/yarn.lock                                | 60 -------------------
 src/Dialog/DialogWrapper.tsx                  |  1 -
 src/Modal/Backdrop.tsx                        | 10 ++--
 stories/BottomSheet.stories.tsx               |  4 +-
 6 files changed, 16 insertions(+), 75 deletions(-)

diff --git a/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx b/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
index 958a3578..11f2a898 100644
--- a/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
+++ b/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
@@ -25,7 +25,7 @@ function BottomSheetDemo(props: any) {
   const content = (
     <List>
       {listData.map((item) => (
-        <>
+        <React.Fragment key={item}>
           <ListItem>
             <ListItemPrimaryAction>
               <IconButton color="primary">
@@ -35,7 +35,7 @@ function BottomSheetDemo(props: any) {
             <ListItemText>item{item}</ListItemText>
           </ListItem>
           <Divider />
-        </>
+        </React.Fragment>
       ))}
     </List>
   );
diff --git a/docs/docs/components/bottomSheet.mdx b/docs/docs/components/bottomSheet.mdx
index 4436261f..f02a9599 100644
--- a/docs/docs/components/bottomSheet.mdx
+++ b/docs/docs/components/bottomSheet.mdx
@@ -18,7 +18,7 @@ function BottomSheetDemo() {
   const content = (
     <List>
       {listData.map((item) => (
-        <>
+        <React.Fragment key={item}>
           <ListItem>
             <ListItemPrimaryAction>
               <IconButton color="primary">
@@ -28,7 +28,7 @@ function BottomSheetDemo() {
             <ListItemText>item{item}</ListItemText>
           </ListItem>
           <Divider />
-        </>
+        </React.Fragment>
       ))}
     </List>
   );
@@ -62,7 +62,7 @@ function BottomSheetDemo() {
   const content = (
     <List>
       {listData.map((item) => (
-        <>
+        <React.Fragment key={item}>
           <ListItem>
             <ListItemPrimaryAction>
               <IconButton color="primary">
@@ -72,7 +72,7 @@ function BottomSheetDemo() {
             <ListItemText>item{item}</ListItemText>
           </ListItem>
           <Divider />
-        </>
+        </React.Fragment>
       ))}
     </List>
   );
@@ -109,7 +109,7 @@ function BottomSheetDemo() {
   const content = (
     <List>
       {listData.map((item) => (
-        <>
+        <React.Fragment key={item}>
           <ListItem>
             <ListItemPrimaryAction>
               <IconButton color="primary">
@@ -119,7 +119,7 @@ function BottomSheetDemo() {
             <ListItemText>item{item}</ListItemText>
           </ListItem>
           <Divider />
-        </>
+        </React.Fragment>
       ))}
     </List>
   );
diff --git a/docs/yarn.lock b/docs/yarn.lock
index d74b4cf1..355cf574 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -2618,16 +2618,6 @@ ajv@^6.1.0, ajv@^6.10.2, ajv@^6.5.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^6.12.0:
-  version "6.12.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.0.tgz#06d60b96d87b8454a5adaba86e7854da629db4b7"
-  integrity sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
-
 algoliasearch@^3.24.5:
   version "3.35.1"
   resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.35.1.tgz#297d15f534a3507cab2f5dfb996019cac7568f0c"
@@ -2936,17 +2926,6 @@ babel-loader@^8.0.6:
     mkdirp "^0.5.1"
     pify "^4.0.1"
 
-babel-loader@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
-  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
-  dependencies:
-    find-cache-dir "^2.1.0"
-    loader-utils "^1.4.0"
-    mkdirp "^0.5.3"
-    pify "^4.0.1"
-    schema-utils "^2.6.5"
-
 babel-messages@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
@@ -5004,11 +4983,6 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
-emojis-list@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
-  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
-
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -5381,11 +5355,6 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
-fast-deep-equal@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
-  integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
-
 fast-glob@^2.0.2:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -7482,15 +7451,6 @@ loader-utils@1.2.3, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
-loader-utils@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
-  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^1.0.1"
-
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -8042,11 +8002,6 @@ minimist@^1.1.3, minimist@^1.2.0:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
-minimist@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
-
 minipass-collect@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
@@ -8134,13 +8089,6 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
-mkdirp@^0.5.3:
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.4.tgz#fd01504a6797ec5c9be81ff43d204961ed64a512"
-  integrity sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==
-  dependencies:
-    minimist "^1.2.5"
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -10667,14 +10615,6 @@ schema-utils@^2.0.0, schema-utils@^2.0.1, schema-utils@^2.6.0, schema-utils@^2.6
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
 
-schema-utils@^2.6.5:
-  version "2.6.5"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.5.tgz#c758f0a7e624263073d396e29cd40aa101152d8a"
-  integrity sha512-5KXuwKziQrTVHh8j/Uxz+QUbxkaLW9X/86NBlx/gnKgtsZA2GIVMUn17qWhRFwF8jdYb3Dig5hRO/W5mZqy6SQ==
-  dependencies:
-    ajv "^6.12.0"
-    ajv-keywords "^3.4.1"
-
 section-matter@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
diff --git a/src/Dialog/DialogWrapper.tsx b/src/Dialog/DialogWrapper.tsx
index c5928a37..bda292b0 100644
--- a/src/Dialog/DialogWrapper.tsx
+++ b/src/Dialog/DialogWrapper.tsx
@@ -60,7 +60,6 @@ const DialogWrapper = styled.div<DialogWrapperProps>`
   z-index: ${(props) => props.theme.zIndex.dialog};
   display: flex;
   flex-direction: column;
-  position: relative;
   overflow-y: auto;
   ${(props) => (props.fullScreen ? fullScreenStyle : defaultBigSizeStyle)};
 `;
diff --git a/src/Modal/Backdrop.tsx b/src/Modal/Backdrop.tsx
index a49fc348..f72212f5 100644
--- a/src/Modal/Backdrop.tsx
+++ b/src/Modal/Backdrop.tsx
@@ -49,13 +49,15 @@ export interface BackdropProps {
    */
   open?: boolean;
   /**
-   * transitionDuration
+   * 动画延长时间
    */
   transitionDuration?: number;
   /**
-   * 点击事件
+   * backdrop被点击时的回调函数
+   *
+   * @type {(SyntheticMouseEvent<*>) => void}
    */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onBackdropClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /**
    * 添加自定义类名
    */
@@ -67,7 +69,7 @@ export interface BackdropProps {
 }
 
 export default function Backdrop(props: BackdropProps) {
-  const { open, transitionDuration, addEndListener, ...rest } = props;
+  const { open, transitionDuration = 300, addEndListener, ...rest } = props;
   return (
     <CSSTransition
       appear
diff --git a/stories/BottomSheet.stories.tsx b/stories/BottomSheet.stories.tsx
index 805b4557..0bb0ebc9 100644
--- a/stories/BottomSheet.stories.tsx
+++ b/stories/BottomSheet.stories.tsx
@@ -19,7 +19,7 @@ const listData = [1, 2, 3];
 const content = (
   <List>
     {listData.map((item) => (
-      <>
+      <React.Fragment key={item}>
         <ListItem>
           <ListItemPrimaryAction>
             <IconButton color="primary">
@@ -29,7 +29,7 @@ const content = (
           <ListItemText>item{item}</ListItemText>
         </ListItem>
         <Divider />
-      </>
+      </React.Fragment>
     ))}
   </List>
 );

From 45d9aaf4f69d0db0729aa1257594b27dd72660e2 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Wed, 25 Mar 2020 09:55:33 +0800
Subject: [PATCH 17/28] =?UTF-8?q?chore:=E7=BB=84=E4=BB=B6=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx b/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
index 11f2a898..4b8aa4a4 100644
--- a/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
+++ b/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
@@ -46,7 +46,7 @@ function BottomSheetDemo(props: any) {
   } = props;
   return (
     <ThemeProvider theme={defaultTheme}>
-      {onBackdropClickProps && <Button>CLICK</Button>}
+      {onBackdropClickProps && <Button onClick={onClick}>CLICK</Button>}
       <BottomSheet
         open={open}
         onBackdropClick={onBackdropClickProps && onBackdropClick}

From 37379e8a45ed284d39a7fb8db229ea4a685b1ce7 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Wed, 25 Mar 2020 11:51:58 +0800
Subject: [PATCH 18/28] =?UTF-8?q?chore:BottomSheet=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/components-apis/bottomSheet.mdx     |  1 -
 .../bottomSheet-demos/BottomSheetDemo.tsx     | 24 ++---
 docs/docs/components/bottomSheet.mdx          | 89 ++++++-------------
 src/BottomSheet/BottomSheet.test.tsx          | 63 +++++--------
 src/BottomSheet/BottomSheet.tsx               |  2 +-
 src/Dialog/Dialog.test.tsx                    | 22 -----
 src/Dialog/Dialog.tsx                         |  2 +-
 .../__snapshots__/DialogActions.test.tsx.snap |  8 +-
 stories/BottomSheet.stories.tsx               | 30 +++----
 9 files changed, 81 insertions(+), 160 deletions(-)

diff --git a/docs/docs/components-apis/bottomSheet.mdx b/docs/docs/components-apis/bottomSheet.mdx
index 6ad64035..f7d491bf 100644
--- a/docs/docs/components-apis/bottomSheet.mdx
+++ b/docs/docs/components-apis/bottomSheet.mdx
@@ -18,7 +18,6 @@ BottomSheet组件属性：
 | 参数名称    | 参数类型   | 默认值        | 说明                                                         |
 | ----------- | --------------- | ------------------------ | ----------------------------------- |
 | open       | boolean         |  false         |    是否显示   |
-| backdrop       | boolean          | true | 是否显示遮罩层          |
 | backdropClick       | boolean          | true | 是否响应点击遮罩层事件          |
 | onBackdropClick       | ()=>void          | true | 是否响应点击遮罩层事件          |
 | transitionDuration       | number         | 300 | 动画延长时间          |
diff --git a/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx b/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
index 4b8aa4a4..c963dfb1 100644
--- a/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
+++ b/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
@@ -7,9 +7,8 @@ import List from '@sinoui/core/List';
 import ListItem from '@sinoui/core/ListItem';
 import ListItemText from '@sinoui/core/ListItemText';
 import ListItemPrimaryAction from '@sinoui/core/ListItemPrimaryAction';
-import Divider from '@sinoui/core/Divider';
-import IconButton from '@sinoui/core/IconButton';
-import BookmarkBorder from '@sinoui/icons/BookmarkBorder';
+import SvgIcon from '@sinoui/core/SvgIcon';
+import { MdShare, MdInsertLink, MdModeEdit, MdDelete } from 'react-icons/md';
 
 function BottomSheetDemo(props: any) {
   const [open, setOpen] = useState(false);
@@ -21,20 +20,23 @@ function BottomSheetDemo(props: any) {
   const onBackdropClick = () => {
     setOpen(false);
   };
-  const listData = [1, 2, 3];
+  const listData = [
+    { icon: MdShare, text: 'Share' },
+    { icon: MdInsertLink, text: 'Get link' },
+    { icon: MdShare, text: 'Share' },
+    { icon: MdModeEdit, text: 'Edit name' },
+    { icon: MdDelete, text: 'Delete collection' },
+  ];
   const content = (
     <List>
-      {listData.map((item) => (
-        <React.Fragment key={item}>
+      {listData.map((item: any, index) => (
+        <React.Fragment key={index.toString()}>
           <ListItem>
             <ListItemPrimaryAction>
-              <IconButton color="primary">
-                <BookmarkBorder />
-              </IconButton>
+              <SvgIcon as={item.icon} color="textSecondary" />
             </ListItemPrimaryAction>
-            <ListItemText>item{item}</ListItemText>
+            <ListItemText>{item.text}</ListItemText>
           </ListItem>
-          <Divider />
         </React.Fragment>
       ))}
     </List>
diff --git a/docs/docs/components/bottomSheet.mdx b/docs/docs/components/bottomSheet.mdx
index f02a9599..ac13cf40 100644
--- a/docs/docs/components/bottomSheet.mdx
+++ b/docs/docs/components/bottomSheet.mdx
@@ -14,20 +14,25 @@ import BottomSheetDemo from './bottomSheet-demos/BottomSheetDemo';
 import BottomSheet from '@sinoui/core/BottomSheet';
 
 function BottomSheetDemo() {
-  const listData = [1, 2, 3];
+
+  const listData = [
+    { icon: MdShare, text: 'Share' },
+    { icon: MdInsertLink, text: 'Get link' },
+    { icon: MdShare, text: 'Share' },
+    { icon: MdModeEdit, text: 'Edit name' },
+    { icon: MdDelete, text: 'Delete collection' },
+  ];
+
   const content = (
     <List>
-      {listData.map((item) => (
-        <React.Fragment key={item}>
+      {listData.map((item: any, index) => (
+        <React.Fragment key={index.toString()}>
           <ListItem>
             <ListItemPrimaryAction>
-              <IconButton color="primary">
-                <BookmarkBorder />
-              </IconButton>
+              <SvgIcon as={item.icon} color="textSecondary" />
             </ListItemPrimaryAction>
-            <ListItemText>item{item}</ListItemText>
+            <ListItemText>{item.text}</ListItemText>
           </ListItem>
-          <Divider />
         </React.Fragment>
       ))}
     </List>
@@ -57,21 +62,24 @@ function BottomSheetDemo() {
     setOpen(false);
   };
 
-  const listData = [1, 2, 3];
-
+  const listData = [
+    { icon: MdShare, text: 'Share' },
+    { icon: MdInsertLink, text: 'Get link' },
+    { icon: MdShare, text: 'Share' },
+    { icon: MdModeEdit, text: 'Edit name' },
+    { icon: MdDelete, text: 'Delete collection' },
+  ];
+  
   const content = (
     <List>
-      {listData.map((item) => (
-        <React.Fragment key={item}>
+      {listData.map((item: any, index) => (
+        <React.Fragment key={index.toString()}>
           <ListItem>
             <ListItemPrimaryAction>
-              <IconButton color="primary">
-                <BookmarkBorder />
-              </IconButton>
+              <SvgIcon as={item.icon} color="textSecondary" />
             </ListItemPrimaryAction>
-            <ListItemText>item{item}</ListItemText>
+            <ListItemText>{item.text}</ListItemText>
           </ListItem>
-          <Divider />
         </React.Fragment>
       ))}
     </List>
@@ -92,53 +100,6 @@ function BottomSheetDemo() {
 
 <BottomSheetDemo onBackdropClick />
 
-## 设置不显示遮罩层
-
-```tsx
-import BottomSheet from '@sinoui/core/BottomSheet';
-
-function BottomSheetDemo() {
-  const [open, setOpen] = useState(false);
-
-  const onClick = () => {
-    setOpen(!open);
-  };
-
-  const listData = [1, 2, 3];
-
-  const content = (
-    <List>
-      {listData.map((item) => (
-        <React.Fragment key={item}>
-          <ListItem>
-            <ListItemPrimaryAction>
-              <IconButton color="primary">
-                <BookmarkBorder />
-              </IconButton>
-            </ListItemPrimaryAction>
-            <ListItemText>item{item}</ListItemText>
-          </ListItem>
-          <Divider />
-        </React.Fragment>
-      ))}
-    </List>
-  );
-
-  return (
-    <>
-      <Button onClick={onClick}>CLICK</Button>
-      <BottomSheet open={open} backdrop={false}>
-        {content}
-      </BottomSheet>
-    </>
-  );
-}
-```
-
-效果如下：
-
-<BottomSheetDemo onBackdropClick backdrop={false} />
-
 ## API
 
 查看[BottomSheet 组件 API](/docs/components-apis/bottomSheet)
diff --git a/src/BottomSheet/BottomSheet.test.tsx b/src/BottomSheet/BottomSheet.test.tsx
index ba23fba7..59b70ae0 100644
--- a/src/BottomSheet/BottomSheet.test.tsx
+++ b/src/BottomSheet/BottomSheet.test.tsx
@@ -21,7 +21,7 @@ const listData = [1, 2, 3];
 const content = (
   <List>
     {listData.map((item) => (
-      <>
+      <React.Fragment key={item}>
         <ListItem>
           <ListItemPrimaryAction>
             <IconButton color="primary">
@@ -31,7 +31,7 @@ const content = (
           <ListItemText>item{item}</ListItemText>
         </ListItem>
         <Divider />
-      </>
+      </React.Fragment>
     ))}
   </List>
 );
@@ -56,40 +56,25 @@ function BottomSheetDemo() {
   );
 }
 
-// describe('BottomSheet组件 快照测试', () => {
-//   it('基本使用', () => {
-//     const tree = renderer
-//       .create(
-//         <ThemeProvider theme={defaultTheme}>
-//           <BottomSheet>{content}</BottomSheet>
-//         </ThemeProvider>,
-//       )
-//       .toJSON();
-
-//     expect(tree).toMatchSnapshot();
-//   });
-
-//   it('点击遮罩层事件', () => {
-//     const tree = renderer
-//       .create(
-//         <ThemeProvider theme={defaultTheme}>
-//           <BottomSheetDemo />
-//         </ThemeProvider>,
-//       )
-//       .toJSON();
-
-//     expect(tree).toMatchSnapshot();
-//   });
-
-//   it('设置不显示遮罩层', () => {
-//     const tree = renderer
-//       .create(
-//         <ThemeProvider theme={defaultTheme}>
-//           <BottomSheet backdrop={false}>{content}</BottomSheet>
-//         </ThemeProvider>,
-//       )
-//       .toJSON();
-
-//     expect(tree).toMatchSnapshot();
-//   });
-// });
+describe('BottomSheet组件 快照测试', () => {
+  // it('基本使用', () => {
+  //   const tree = renderer
+  //     .create(
+  //       <ThemeProvider theme={defaultTheme}>
+  //         <BottomSheet>{content}</BottomSheet>
+  //       </ThemeProvider>,
+  //     )
+  //     .toJSON();
+  //   expect(tree).toMatchSnapshot();
+  // });
+  // it('点击遮罩层事件', () => {
+  //   const tree = renderer
+  //     .create(
+  //       <ThemeProvider theme={defaultTheme}>
+  //         <BottomSheetDemo />
+  //       </ThemeProvider>,
+  //     )
+  //     .toJSON();
+  //   expect(tree).toMatchSnapshot();
+  // });
+});
diff --git a/src/BottomSheet/BottomSheet.tsx b/src/BottomSheet/BottomSheet.tsx
index c706db51..5ae48eda 100644
--- a/src/BottomSheet/BottomSheet.tsx
+++ b/src/BottomSheet/BottomSheet.tsx
@@ -23,7 +23,7 @@ const timeout = 300;
 const GlobalStyle = createGlobalStyle`
 .sinoui-bottom-sheet__css-appear {
   opacity: 0;
-  transform: translate3d(0,100%,0);
+  transform: translate3d(0, 100%, 0);
 }
 
 .sinoui-bottom-sheet__css-appear-active {
diff --git a/src/Dialog/Dialog.test.tsx b/src/Dialog/Dialog.test.tsx
index 96ddeae9..22ccc43b 100644
--- a/src/Dialog/Dialog.test.tsx
+++ b/src/Dialog/Dialog.test.tsx
@@ -12,28 +12,6 @@ import Button from '@sinoui/core/Button';
 
 describe('Dialog组件 单元测试', () => {
   afterEach(cleanup);
-  test('测试显示关闭按钮', () => {
-    const { getByTestId } = render(
-      <ThemeProvider theme={defaultTheme}>
-        <Dialog showCloseIcon>
-          <DialogTitle data-testid="dialogTitle">
-            Use Google location service?
-          </DialogTitle>
-          <DialogContent>
-            Let Google help apps determine location. This means sending
-            anonymous location data toGoogle, even when no apps are running.
-          </DialogContent>
-          <DialogActions>
-            <Button>Disagree</Button>
-            <Button>Agree</Button>
-          </DialogActions>
-        </Dialog>
-      </ThemeProvider>,
-    );
-
-    const title = getByTestId('dialogTitle');
-    expect(title.firstElementChild).toHaveClass('sinoui-dialog-title__icon');
-  });
 
   test('测试全屏显示', () => {
     const { getAllByTestId } = render(
diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index e2c10d9b..8f9507cb 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -71,7 +71,7 @@ export interface DialogProps extends DialogContainerProps {
 function Dialog(props: DialogProps) {
   const {
     backdropClick = true,
-    transitionDuration,
+    transitionDuration = 300,
     open,
     addEndListener,
     ...rest
diff --git a/src/DialogActions/__snapshots__/DialogActions.test.tsx.snap b/src/DialogActions/__snapshots__/DialogActions.test.tsx.snap
index b46f54d3..4565bb88 100644
--- a/src/DialogActions/__snapshots__/DialogActions.test.tsx.snap
+++ b/src/DialogActions/__snapshots__/DialogActions.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`DialogActions组件 快照测试 基本使用 1`] = `
   className="DialogActions__DialogActionsWrapper-ibc7so-0 kTvEtc sinoui-dialog-actions"
 >
   <button
-    className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button-sc-15sa99-0 euJRxB sinoui-button"
+    className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
     color="primary"
     role="button"
     type="button"
@@ -13,7 +13,7 @@ exports[`DialogActions组件 快照测试 基本使用 1`] = `
     Disagree
   </button>
   <button
-    className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button-sc-15sa99-0 euJRxB sinoui-button"
+    className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
     color="primary"
     role="button"
     type="button"
@@ -28,7 +28,7 @@ exports[`DialogActions组件 快照测试 按钮垂直显示 1`] = `
   className="DialogActions__DialogActionsWrapper-ibc7so-0 bfxQEv sinoui-dialog-actions"
 >
   <button
-    className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button-sc-15sa99-0 euJRxB sinoui-button"
+    className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
     color="primary"
     role="button"
     type="button"
@@ -36,7 +36,7 @@ exports[`DialogActions组件 快照测试 按钮垂直显示 1`] = `
     Disagree
   </button>
   <button
-    className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button-sc-15sa99-0 euJRxB sinoui-button"
+    className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
     color="primary"
     role="button"
     type="button"
diff --git a/stories/BottomSheet.stories.tsx b/stories/BottomSheet.stories.tsx
index 0bb0ebc9..e41e4848 100644
--- a/stories/BottomSheet.stories.tsx
+++ b/stories/BottomSheet.stories.tsx
@@ -7,28 +7,30 @@ import List from '@sinoui/core/List';
 import ListItem from '@sinoui/core/ListItem';
 import ListItemText from '@sinoui/core/ListItemText';
 import ListItemPrimaryAction from '@sinoui/core/ListItemPrimaryAction';
-import Divider from '@sinoui/core/Divider';
-import IconButton from '@sinoui/core/IconButton';
-import BookmarkBorder from '@sinoui/icons/BookmarkBorder';
+import SvgIcon from '@sinoui/core/SvgIcon';
+import { MdShare, MdInsertLink, MdModeEdit, MdDelete } from 'react-icons/md';
 
 export default {
   title: 'BottomSheet',
 };
 
-const listData = [1, 2, 3];
+const listData = [
+  { icon: MdShare, text: 'Share' },
+  { icon: MdInsertLink, text: 'Get link' },
+  { icon: MdShare, text: 'Share' },
+  { icon: MdModeEdit, text: 'Edit name' },
+  { icon: MdDelete, text: 'Delete collection' },
+];
 const content = (
   <List>
-    {listData.map((item) => (
-      <React.Fragment key={item}>
+    {listData.map((item: any, index) => (
+      <React.Fragment key={index.toString()}>
         <ListItem>
           <ListItemPrimaryAction>
-            <IconButton color="primary">
-              <BookmarkBorder />
-            </IconButton>
+            <SvgIcon as={item.icon} color="textSecondary" />
           </ListItemPrimaryAction>
-          <ListItemText>item{item}</ListItemText>
+          <ListItemText>{item.text}</ListItemText>
         </ListItem>
-        <Divider />
       </React.Fragment>
     ))}
   </List>
@@ -65,9 +67,3 @@ export const 点击遮罩层事件 = () => (
     <BottomSheetDemo />
   </ThemeProvider>
 );
-
-export const 设置不显示遮罩层 = () => (
-  <ThemeProvider theme={defaultTheme}>
-    <BottomSheet backdrop={false}>{content}</BottomSheet>
-  </ThemeProvider>
-);

From 766b5b593d4ef8f5b359faf09b03b2eaca82516a Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Wed, 25 Mar 2020 15:37:22 +0800
Subject: [PATCH 19/28] =?UTF-8?q?chore:=E5=8E=BB=E6=8E=89=E6=98=AF?=
 =?UTF-8?q?=E5=90=A6=E6=98=BE=E7=A4=BA=E9=81=AE=E7=BD=A9=E5=B1=82=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BottomSheet/BottomSheet.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/BottomSheet/BottomSheet.tsx b/src/BottomSheet/BottomSheet.tsx
index 5ae48eda..cab0f72d 100644
--- a/src/BottomSheet/BottomSheet.tsx
+++ b/src/BottomSheet/BottomSheet.tsx
@@ -61,10 +61,6 @@ export interface BottomSheetProps {
    * 是否显示
    */
   open?: boolean;
-  /**
-   * 是否显示遮罩层
-   */
-  backdrop?: boolean;
   /**
    * 是否响应点击遮罩层事件
    */

From cf3544ef5e537787b5cd706f03a8b152883a504b Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Tue, 7 Apr 2020 11:54:14 +0800
Subject: [PATCH 20/28] =?UTF-8?q?chore:=E6=B7=BB=E5=8A=A0=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BottomSheet/BottomSheet.test.tsx      |  80 ------
 src/Dialog/Dialog.tsx                     |  56 ++--
 src/Modal/Backdrop.tsx                    |  55 +---
 src/transitions/Fade.tsx                  |  37 +++
 src/transitions/Grow.tsx                  | 120 +++++++++
 src/transitions/HorizontalSlide.tsx       |  77 ++++++
 src/transitions/SingleTransitionGroup.tsx |  76 ++++++
 src/transitions/Slide.tsx                 |  98 +++++++
 src/transitions/createStyleTransition.tsx | 300 ++++++++++++++++++++++
 src/transitions/transitionUtils.ts        |  59 +++++
 src/transitions/type.ts                   |  62 +++++
 stories/Dialog.stories.tsx                |   2 +-
 12 files changed, 858 insertions(+), 164 deletions(-)
 delete mode 100644 src/BottomSheet/BottomSheet.test.tsx
 create mode 100644 src/transitions/Fade.tsx
 create mode 100644 src/transitions/Grow.tsx
 create mode 100644 src/transitions/HorizontalSlide.tsx
 create mode 100644 src/transitions/SingleTransitionGroup.tsx
 create mode 100644 src/transitions/Slide.tsx
 create mode 100644 src/transitions/createStyleTransition.tsx
 create mode 100644 src/transitions/transitionUtils.ts
 create mode 100644 src/transitions/type.ts

diff --git a/src/BottomSheet/BottomSheet.test.tsx b/src/BottomSheet/BottomSheet.test.tsx
deleted file mode 100644
index 59b70ae0..00000000
--- a/src/BottomSheet/BottomSheet.test.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { useState } from 'react';
-import renderer from 'react-test-renderer';
-import '@testing-library/jest-dom/extend-expect';
-import { ThemeProvider } from 'styled-components';
-import { defaultTheme } from '@sinoui/theme';
-import Button from '@sinoui/core/Button';
-import BottomSheet from '@sinoui/core/BottomSheet';
-import List from '@sinoui/core/List';
-import ListItem from '@sinoui/core/ListItem';
-import ListItemText from '@sinoui/core/ListItemText';
-import ListItemPrimaryAction from '@sinoui/core/ListItemPrimaryAction';
-import Divider from '@sinoui/core/Divider';
-import IconButton from '@sinoui/core/IconButton';
-import BookmarkBorder from '@sinoui/icons/BookmarkBorder';
-
-/**
- * BottomSheet组件 测试
- */
-
-const listData = [1, 2, 3];
-const content = (
-  <List>
-    {listData.map((item) => (
-      <React.Fragment key={item}>
-        <ListItem>
-          <ListItemPrimaryAction>
-            <IconButton color="primary">
-              <BookmarkBorder />
-            </IconButton>
-          </ListItemPrimaryAction>
-          <ListItemText>item{item}</ListItemText>
-        </ListItem>
-        <Divider />
-      </React.Fragment>
-    ))}
-  </List>
-);
-
-function BottomSheetDemo() {
-  const [open, setOpen] = useState(false);
-
-  const onClick = () => {
-    setOpen(!open);
-  };
-
-  const onBackdropClick = () => {
-    setOpen(false);
-  };
-  return (
-    <>
-      <Button onClick={onClick}>CLICK</Button>
-      <BottomSheet open={open} onBackdropClick={onBackdropClick}>
-        {content}
-      </BottomSheet>
-    </>
-  );
-}
-
-describe('BottomSheet组件 快照测试', () => {
-  // it('基本使用', () => {
-  //   const tree = renderer
-  //     .create(
-  //       <ThemeProvider theme={defaultTheme}>
-  //         <BottomSheet>{content}</BottomSheet>
-  //       </ThemeProvider>,
-  //     )
-  //     .toJSON();
-  //   expect(tree).toMatchSnapshot();
-  // });
-  // it('点击遮罩层事件', () => {
-  //   const tree = renderer
-  //     .create(
-  //       <ThemeProvider theme={defaultTheme}>
-  //         <BottomSheetDemo />
-  //       </ThemeProvider>,
-  //     )
-  //     .toJSON();
-  //   expect(tree).toMatchSnapshot();
-  // });
-});
diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index 8f9507cb..e9896cc0 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -1,32 +1,9 @@
 import React from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
-import { transitions } from '@sinoui/theme';
+import styled from 'styled-components';
 import Modal from '@sinoui/core/Modal';
-import { CSSTransition } from 'react-transition-group';
+import Fade from '../transitions/Fade';
 import DialogContainer, { DialogContainerProps } from './DialogContainer';
 
-const { duration, easing } = transitions;
-
-const GlobalStyle = createGlobalStyle`
-.sinoui-dialog-enter {
-   opacity: 0;
-}
-
-.sinoui-dialog-enter-active {
-  opacity: 1;
-  transition: opacity ${duration.enteringScreen} ${easing.easeInOut};
-}
-
-.sinoui-dialog-exit { 
-  opacity: 1;
-}
-
-.sinoui-dialog-exit-active { 
-  opacity: 0;
-  transition: opacity ${duration.leavingScreen} ${easing.easeInOut};
-}
-`;
-
 const ModalWrapper = styled(Modal)`
   display: flex;
   justify-content: center;
@@ -45,13 +22,21 @@ export interface DialogProps extends DialogContainerProps {
    */
   backdropClick?: boolean;
   /**
-   * 展现过渡动画。默认为Fade。
+   * Dialog展现过渡动画。默认为Fade。
+   *
+   * @type {(string | ())}
    */
   transition?: React.ReactType;
   /**
-   * 过渡动画时长
+   * 过渡动画时长。
+   *
    */
-  transitionDuration?: number;
+  transitionDuration?:
+    | number
+    | {
+        enter: number;
+        exit: number;
+      };
   /**
    * backdrop被点击时的回调函数
    *
@@ -71,26 +56,19 @@ export interface DialogProps extends DialogContainerProps {
 function Dialog(props: DialogProps) {
   const {
     backdropClick = true,
-    transitionDuration = 300,
     open,
     addEndListener,
+    transition: Transition = Fade,
+    transitionDuration,
     ...rest
   } = props;
   return (
     <ModalWrapper {...rest} backdropClick={backdropClick} open={open}>
-      <CSSTransition
-        timeout={transitionDuration}
-        appear
-        in={open}
-        classNames="sinoui-dialog"
-        unmountOnExit
-        addEndListener={addEndListener}
-      >
+      <Transition timeout={transitionDuration} appear in={open}>
         <>
           <DialogContainer {...props} />
-          <GlobalStyle />
         </>
-      </CSSTransition>
+      </Transition>
     </ModalWrapper>
   );
 }
diff --git a/src/Modal/Backdrop.tsx b/src/Modal/Backdrop.tsx
index f72212f5..c38472e7 100644
--- a/src/Modal/Backdrop.tsx
+++ b/src/Modal/Backdrop.tsx
@@ -1,29 +1,6 @@
 import React from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
-import { CSSTransition } from 'react-transition-group';
-import { transitions } from '@sinoui/theme';
-
-const { duration, easing } = transitions;
-
-const GlobalStyle = createGlobalStyle`
-.sinoui-dialog-back-enter {
-  opacity: 0;
-}
-
-.sinoui-dialog-back-enter-active {
-  opacity: 1;
-  transition: opacity ${duration.enteringScreen} ${easing.easeInOut};
-}
-
-.sinoui-dialog-back-exit { 
-  opacity: 1;
-}
-
-.sinoui-dialog-back-exit-active { 
-  opacity: 0;
-  transition: opacity ${duration.leavingScreen} ${easing.easeInOut};
-}
-`;
+import styled from 'styled-components';
+import Fade from '../transitions/Fade';
 
 const BackdropWrapper = styled.div.attrs({
   'aria-hidden': true,
@@ -51,7 +28,7 @@ export interface BackdropProps {
   /**
    * 动画延长时间
    */
-  transitionDuration?: number;
+  transitionDuration?: 'auto' | number;
   /**
    * backdrop被点击时的回调函数
    *
@@ -59,30 +36,20 @@ export interface BackdropProps {
    */
   onBackdropClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /**
-   * 添加自定义类名
+   * 点击事件
    */
-  className?: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /**
-   * 过渡结束监听器
+   * 添加自定义类名
    */
-  addEndListener?: any;
+  className?: string;
 }
 
 export default function Backdrop(props: BackdropProps) {
-  const { open, transitionDuration = 300, addEndListener, ...rest } = props;
+  const { open, transitionDuration } = props;
   return (
-    <CSSTransition
-      appear
-      in={open}
-      timeout={transitionDuration}
-      classNames="sinoui-dialog-back"
-      unmountOnExit
-      addEndListener={addEndListener}
-    >
-      <>
-        <BackdropWrapper {...rest} />
-        <GlobalStyle />
-      </>
-    </CSSTransition>
+    <Fade appear in={open} timeout={transitionDuration} {...props}>
+      <BackdropWrapper />
+    </Fade>
   );
 }
diff --git a/src/transitions/Fade.tsx b/src/transitions/Fade.tsx
new file mode 100644
index 00000000..2109e831
--- /dev/null
+++ b/src/transitions/Fade.tsx
@@ -0,0 +1,37 @@
+import { transitions } from '@sinoui/theme';
+import createStyleTransition from './createStyleTransition';
+
+const { duration, easing } = transitions;
+
+// 默认的过渡时长
+const TRANSITION_DURATION = {
+  enter: duration.enteringScreen,
+  exit: duration.leavingScreen,
+};
+
+/**
+ * 淡入淡出效果。内部使用
+ * [react-transition-group/CSSTransition](https://reactcommunity.org/react-transition-group/#CSSTransition)实现过渡效果。
+ */
+const Fade = createStyleTransition({
+  enterStyle: () => ({
+    opacity: 0,
+  }),
+  enterToStyle: () => ({
+    opacity: 1,
+  }),
+  exitStyle: () => ({
+    opacity: 1,
+  }),
+  exitToStyle: () => ({
+    opacity: 0,
+  }),
+  transitionProps: ['opacity'],
+  duration: TRANSITION_DURATION,
+  easing: {
+    enter: easing.easeInOut,
+    exit: easing.easeInOut,
+  },
+});
+
+export default Fade;
diff --git a/src/transitions/Grow.tsx b/src/transitions/Grow.tsx
new file mode 100644
index 00000000..509ea1dc
--- /dev/null
+++ b/src/transitions/Grow.tsx
@@ -0,0 +1,120 @@
+import { transitions } from '@sinoui/theme';
+import createStyleTransition, {
+  TransitionInterface,
+} from './createStyleTransition';
+
+function getScale(value: number) {
+  return `scale(${value}, ${value ** 2})`;
+}
+
+export function getEnterTransition(
+  instance: TransitionInterface,
+  node: HTMLElement,
+) {
+  const duration = instance.getTimeout(node);
+  const enterDuration = duration ? duration.enter : 300;
+  return [
+    transitions.create('opacity', {
+      duration: enterDuration,
+    }),
+    transitions.create('transform', {
+      duration: enterDuration * 0.666,
+    }),
+  ].join(',');
+}
+
+export function getExitTransition(
+  instance: TransitionInterface,
+  node: HTMLElement,
+) {
+  const duration = instance.getTimeout(node);
+  const exitDuration = duration ? duration.exit : 300;
+
+  return [
+    transitions.create('opacity', {
+      duration: exitDuration,
+    }),
+    transitions.create('transform', {
+      duration: exitDuration * 0.666,
+      delay: exitDuration * 0.333,
+    }),
+  ].join(',');
+}
+
+const defaultProps: {
+  timeout?:
+    | 'auto'
+    | number
+    | {
+        enter: number;
+        exit: number;
+      };
+} = {
+  timeout: 'auto',
+};
+
+/**
+ * 增大、缩小的过渡效果。
+ *
+ * ```javascript
+ * import React from 'react';
+ * import Grow from 'sinoui-components/transitions/Grow';
+ * import { TransitionInterface } from './createStyleTransition';
+ *
+ * class GrowDemo extends React.Component {
+ *  state: {
+ *    in: false,
+ *  };
+ *
+ *  handleButtonClick = () => this.setState(prevState => ({ !prevState.in}));
+ *
+ *  render() {
+ *    return <div>
+ *      <button onClick={this.handleButtonClick}>切换Grow动画</button>
+ *      <Grow in={this.state.in}>这是应用动画的内容</Grow>
+ *    </div>
+ *  }
+ * }
+ * ```
+ *
+ * 增大：
+ *
+ * * opacity: 0 -> 1
+ * * scaleX: 0.75 -> 1
+ * * scaleY: 0.5625 -> 1
+ *
+ * 缩小：
+ *
+ * * opacity: 1 -> 0
+ * * scaleX: 1 -> 0.75
+ * * scaleY: 1 -> 0.5625
+ */
+const Grow = createStyleTransition(
+  {
+    enterStyle: () => ({
+      opacity: 0,
+      transform: getScale(0.75),
+    }),
+    enterActiveStyle: (instance, node) => ({
+      transition: getEnterTransition(instance, node),
+    }),
+    enterToStyle: () => ({
+      opacity: 1,
+      transform: getScale(1),
+    }),
+    exitStyle: () => ({
+      opacity: 1,
+      transform: getScale(1),
+    }),
+    exitActiveStyle: (instance, node) => ({
+      transition: getExitTransition(instance, node),
+    }),
+    exitToStyle: () => ({
+      opacity: 0,
+      transform: getScale(0.75),
+    }),
+  },
+  defaultProps,
+);
+
+export default Grow;
diff --git a/src/transitions/HorizontalSlide.tsx b/src/transitions/HorizontalSlide.tsx
new file mode 100644
index 00000000..d5aafe4c
--- /dev/null
+++ b/src/transitions/HorizontalSlide.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { transitions } from '@sinoui/theme';
+import createStyleTransition from './createStyleTransition';
+import { BaseTransitionCompProps } from './type';
+
+const { duration } = transitions;
+
+export interface HorizontalSlidePropsType extends BaseTransitionCompProps {
+  /**
+   * 过渡效果的方向
+   */
+  direction: 'left' | 'right';
+  /**
+   * 过渡时长。
+   */
+  timeout?:
+    | number
+    | {
+        enter: number;
+        exit: number;
+      };
+  /**
+   * 过渡效果的缓动函数
+   */
+  easing?:
+    | string
+    | {
+        enter: string;
+        exit: string;
+      };
+}
+
+// Slide效果默认的缓动函数
+const SLIDE_EASING = {
+  enter: 'cubic-bezier(0.23, 1, 0.32, 1)',
+  exit: 'cubic-bezier(0.23, 1, 0.32, 1)',
+};
+
+// Slide效果默认的过渡时长
+const TRANSITION_DURATION = {
+  enter: duration.enteringScreen,
+  exit: duration.leavingScreen,
+};
+
+/**
+ * 水平滑动效果。内部使用
+ * [react-transition-group/CSSTransition](https://reactcommunity.org/react-transition-group/#CSSTransition)实现过渡效果。
+ */
+const HorizontalSlide: React.ComponentType<
+  HorizontalSlidePropsType | any
+> = createStyleTransition({
+  enterStyle: (transition) => ({
+    transform: `translate(${
+      transition.props.direction === 'right' ? '-' : ''
+    }100%, 0px)`,
+    opacity: 0.01,
+  }),
+  enterToStyle: () => ({
+    transform: 'translateX(0px)',
+    opacity: 1,
+  }),
+  exitStyle: () => ({
+    opacity: 1,
+    transform: 'translate3d(0px, 0px, 0px)',
+  }),
+  exitToStyle: (transition) => ({
+    transform: `translate(${
+      transition.props.direction === 'right' ? '-' : ''
+    }100%, 0px)`,
+    opacity: 0.01,
+  }),
+  transitionProps: ['transform', 'opacity'],
+  easing: SLIDE_EASING,
+  duration: TRANSITION_DURATION,
+});
+
+export default HorizontalSlide;
diff --git a/src/transitions/SingleTransitionGroup.tsx b/src/transitions/SingleTransitionGroup.tsx
new file mode 100644
index 00000000..466b59f0
--- /dev/null
+++ b/src/transitions/SingleTransitionGroup.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { TransitionGroup } from 'react-transition-group';
+
+export interface SingleTransitionGroupPropsType {
+  children: any;
+}
+
+const KEY_NAME = 'tkey';
+
+/**
+ * 获取子元素的唯一码
+ *
+ * @param {*} props 元素的属性
+ */
+function getChildKey(props: SingleTransitionGroupPropsType): React.Key {
+  const child = props.children ? React.Children.only(props.children) : null;
+  return (child && child.key) || -1;
+}
+
+/**
+ * 应用于同时只出现一个元素的过渡动画组。`SingleTransitionGroup`确保在过渡过程中最多出现两个正在过渡的元素。
+ *
+ */
+export default class SingleTransitionGroup extends React.Component<
+  SingleTransitionGroupPropsType
+> {
+  constructor(props: SingleTransitionGroupPropsType) {
+    super(props);
+
+    this.currentKey = getChildKey(props);
+    this.children = [this.currentKey];
+  }
+
+  // eslint-disable-next-line react/no-deprecated
+  public componentWillReceiveProps(nextProps: SingleTransitionGroupPropsType) {
+    const nextKey = getChildKey(nextProps);
+    if (nextKey !== -1 && nextKey !== this.currentKey) {
+      this.children = [this.currentKey, nextKey];
+      this.currentKey = nextKey;
+    }
+  }
+
+  // eslint-disable-next-line react/sort-comp
+  public children: React.ReactNode[];
+
+  public currentKey: React.Key;
+
+  /**
+   * TransitionGroup组件的childFactory属性实现。
+   * 这个方法是整个组件的核心，用于实现**在过渡过程中最多出现两个正在过渡的元素**的效果。
+   *
+   * @memberof SingleTransitionGroup
+   */
+  public childFactory: any = (child: React.ReactElement<HTMLElement | any>) => {
+    if (this.children.indexOf(child.props[KEY_NAME]) !== -1) {
+      return React.cloneElement(React.Children.only(child), {
+        [KEY_NAME]: undefined,
+      } as any);
+    }
+    return null;
+  };
+
+  public render() {
+    const { children } = this.props;
+    const child = children
+      ? React.cloneElement(React.Children.only(children), {
+          [KEY_NAME]: this.currentKey,
+        })
+      : null;
+    return (
+      <TransitionGroup {...this.props} childFactory={this.childFactory}>
+        {child}
+      </TransitionGroup>
+    );
+  }
+}
diff --git a/src/transitions/Slide.tsx b/src/transitions/Slide.tsx
new file mode 100644
index 00000000..129aba14
--- /dev/null
+++ b/src/transitions/Slide.tsx
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { transitions } from '@sinoui/theme';
+import createStyleTransition from './createStyleTransition';
+import { BaseTransitionCompProps } from './type';
+
+const { duration } = transitions;
+
+export interface SlidePropsType extends BaseTransitionCompProps {
+  appear?: boolean;
+  in?: boolean;
+  /**
+   * 过渡效果的方向
+   */
+  direction?: 'up' | 'down';
+  /**
+   * 子节点
+   */
+  children?: React.ReactNode;
+  /**
+   * 过渡时长。
+   */
+  timeout?:
+    | number
+    | {
+        enter: number;
+        exit: number;
+      };
+  /**
+   * 指定过渡时应用的css类名。
+   */
+  transitionClasses?:
+    | string
+    | {
+        appear?: string;
+        appearActive?: string;
+        enter?: string;
+        enterActive?: string;
+        exit?: string;
+        exitActive?: string;
+      };
+  /**
+   * 过渡效果的缓动函数
+   */
+  easing?:
+    | string
+    | {
+        enter: string;
+        exit: string;
+      };
+}
+
+// Slide效果默认的缓动函数
+const SLIDE_EASING = {
+  enter: 'cubic-bezier(0.23, 1, 0.32, 1)',
+  exit: 'cubic-bezier(0.23, 1, 0.32, 1)',
+};
+
+// Slide效果默认的过渡时长
+const TRANSITION_DURATION = {
+  enter: duration.enteringScreen,
+  exit: duration.leavingScreen,
+};
+
+/**
+ * 水平滑动效果。内部使用
+ * [react-transition-group/CSSTransition](https://reactcommunity.org/react-transition-group/#CSSTransition)实现过渡效果。
+ */
+const Slide: React.ComponentType<SlidePropsType | any> = createStyleTransition({
+  enterStyle: ({ props }) => ({
+    transform:
+      props.direction === 'up' ? 'translate(0px, 100%)' : 'translateY(0px)',
+    opacity: 0.01,
+  }),
+  enterToStyle: ({ props }) => ({
+    transform:
+      props.direction === 'down' ? 'translate(0px, 100%)' : 'translateY(0px)',
+    opacity: 1,
+  }),
+  exitStyle: ({ props }) => ({
+    opacity: 1,
+    transform:
+      props.direction === 'up'
+        ? 'translate3d(0px, 0px, 0px)'
+        : 'translate(0px, 100%)',
+  }),
+  exitToStyle: ({ props }) => ({
+    transform:
+      props.direction === 'down'
+        ? 'translate3d(0px, 0px, 0px)'
+        : 'translate(0px, 100%)',
+    opacity: 0.01,
+  }),
+  transitionProps: ['transform', 'opacity'],
+  easing: SLIDE_EASING,
+  duration: TRANSITION_DURATION,
+});
+
+export default Slide;
diff --git a/src/transitions/createStyleTransition.tsx b/src/transitions/createStyleTransition.tsx
new file mode 100644
index 00000000..6bcccad4
--- /dev/null
+++ b/src/transitions/createStyleTransition.tsx
@@ -0,0 +1,300 @@
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { transitions } from '@sinoui/theme';
+import { getDuration, getEasing } from './transitionUtils';
+
+export interface StyleTransitionPropsType {
+  appear?: boolean;
+  in?: boolean;
+  /**
+   * 过渡效果的方向
+   *
+   * @type {('left' | 'right')}
+   */
+  direction?: 'left' | 'right' | 'up' | 'down';
+  /**
+   * 子节点
+   *
+   * @type {Node}
+   */
+  children?: React.ReactNode;
+  /**
+   * 过渡时长。'auto'表示会根据元素高度自动计算过渡时长
+   *
+   * @type {(number
+   *     | {
+   *         enter: number,
+   *         exit: number,
+   *       })}
+   */
+  timeout?:
+    | 'auto'
+    | number
+    | {
+        enter: number;
+        exit: number;
+      };
+  /**
+   * 指定过渡时应用的css类名。
+   */
+  transitionClasses?:
+    | string
+    | {
+        appear?: string;
+        appearActive?: string;
+        enter?: string;
+        enterActive?: string;
+        exit?: string;
+        exitActive?: string;
+      };
+  easing?: string;
+  onEnter?: (node: HTMLElement, isAccept: boolean) => void;
+  onEntering?: (node: HTMLElement, isAccept: boolean) => void;
+  onEntered?: (node: HTMLElement, isAccept: boolean) => void;
+  onExit?: (node: HTMLElement) => void;
+  onExiting?: (node: HTMLElement) => void;
+  onExited?: (node: HTMLElement) => void;
+}
+
+export interface StyleTransitionOptions {
+  enterStyle: (
+    transition: TransitionInterface,
+    node: HTMLElement,
+    isAppearing: boolean,
+  ) => React.CSSProperties;
+  enterActiveStyle?: (
+    transition: TransitionInterface,
+    node: HTMLElement,
+    isAppearing: boolean,
+  ) => React.CSSProperties;
+  enterToStyle: (
+    transition: TransitionInterface,
+    node: HTMLElement,
+    isAppearing: boolean,
+  ) => React.CSSProperties;
+  exitStyle: (
+    transition: TransitionInterface,
+    node: HTMLElement,
+  ) => React.CSSProperties;
+  exitActiveStyle?: (
+    transition: TransitionInterface,
+    node: HTMLElement,
+  ) => React.CSSProperties;
+  exitToStyle: (
+    transition: TransitionInterface,
+    node: HTMLElement,
+  ) => React.CSSProperties;
+  transitionProps?: string[];
+  duration?: {
+    enter: number;
+    exit: number;
+  };
+  easing?: {
+    enter: string;
+    exit: string;
+  };
+}
+
+export interface TransitionInterface {
+  props: StyleTransitionPropsType;
+  getTimeout: (
+    e: HTMLElement,
+  ) => {
+    enter: number;
+    exit: number;
+  };
+}
+
+/**
+ * 创建通过css样式定义过渡效果的过渡组件。
+ *
+ * 元素入场过渡： 先应用`enterStyle`，一帧（16ms）之后，应用`enterActiveStyle`和`enterToStyle`。
+ *
+ * 元素出场过渡： 先应用`exitStyle`，一帧（16ms）之后，应用`exitActiveStyle`和`enterToStyle`。
+ *
+ */
+export default function createStyleTransition<Props extends {}>(
+  options: StyleTransitionOptions,
+  defaultProps?: Props & StyleTransitionPropsType,
+): React.ComponentType<Props & StyleTransitionPropsType> {
+  return class StyleTransition
+    extends React.Component<Props & StyleTransitionPropsType>
+    implements TransitionInterface {
+    // eslint-disable-next-line react/static-property-placement
+    public static defaultProps = defaultProps;
+
+    constructor(props: Props & StyleTransitionPropsType) {
+      super(props);
+
+      this.handleEnter = this.handleEnter.bind(this);
+      this.handleEntering = this.handleEntering.bind(this);
+      this.handleExit = this.handleExit.bind(this);
+      this.handleExiting = this.handleExiting.bind(this);
+      this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+    }
+
+    get easing():
+      | {
+          enter: string;
+          exit: string;
+        }
+      | any {
+      const { easing } = this.props;
+      return getEasing(easing, options.easing);
+    }
+
+    public getTimeout(node: HTMLElement): any {
+      const { timeout = options.duration } = this.props;
+      if (timeout === 'auto') {
+        const duration = transitions.getAutoHeightDuration(node.clientHeight);
+        return {
+          enter: duration,
+          exit: duration,
+        };
+      }
+      return getDuration(timeout, options.duration);
+    }
+
+    /**
+     * 处理过渡的enter事件
+     *
+     * @param {HTMLElement} node 应用过渡效果的节点
+     * @param {boolean} isAppearing 表示是否是刚创建节点时机。
+     *  如果`HorizontalSlide`组件设置了`appear`属性，则会在刚创建节点时，
+     *  调用此方法，且isAppearing为true；否则不会调用此方法。
+     */
+    public handleEnter(node: HTMLElement, isAppearing: boolean) {
+      const { onEnter } = this.props;
+      if (onEnter) {
+        onEnter(node, isAppearing);
+      }
+
+      const enterStyle = {
+        transition: 'none',
+        ...options.enterStyle(this, node, isAppearing),
+      };
+      Object.assign(node.style, enterStyle);
+    }
+
+    /**
+     * 处理过渡的entering事件
+     *
+     * @param {HTMLElement} node 应用过渡效果的节点
+     * @param {boolean} isAppearing 表示是否是刚创建节点时机。
+     *  如果`HorizontalSlide`组件设置了`appear`属性，则会在刚创建节点时，
+     *  调用此方法，且isAppearing为true；否则不会调用此方法。
+     */
+    public handleEntering(node: HTMLElement, isAppearing: boolean) {
+      const activeStyle = options.enterActiveStyle
+        ? options.enterActiveStyle(this, node, isAppearing)
+        : {};
+      const { onEntering } = this.props;
+      if (!activeStyle.transition) {
+        activeStyle.transition = transitions.create(options.transitionProps, {
+          duration: this.getTimeout(node).enter,
+          easing: this.easing.enter,
+        });
+      }
+
+      const enterActiveStyle = {
+        ...activeStyle,
+        ...options.enterToStyle(this, node, isAppearing),
+      };
+
+      Object.assign(node.style, enterActiveStyle);
+
+      if (onEntering) {
+        onEntering(node, isAppearing);
+      }
+    }
+
+    /**
+     * 处理过渡的exit事件
+     *
+     * @param {HTMLElement} node 应用过渡效果的节点
+     * @param {boolean} isAppearing 表示是否是刚创建节点时机。
+     *  如果`HorizontalSlide`组件设置了`appear`属性，则会在刚创建节点时，
+     *  调用此方法，且isAppearing为true；否则不会调用此方法。
+     */
+    public handleExit(node: HTMLElement) {
+      const exitStyle = {
+        transition: 'none',
+        ...options.exitStyle(this, node),
+      };
+
+      const { onExit } = this.props;
+
+      Object.assign(node.style, exitStyle);
+
+      if (onExit) {
+        onExit(node);
+      }
+    }
+
+    /**
+     * 处理过渡的exiting事件
+     *
+     * @param {HTMLElement} node 应用过渡效果的节点
+     */
+    public handleExiting(node: HTMLElement) {
+      const exitActiveStyle = options.exitActiveStyle
+        ? options.exitActiveStyle(this, node)
+        : {};
+      if (!exitActiveStyle.transition) {
+        exitActiveStyle.transition = transitions.create(
+          options.transitionProps,
+          {
+            duration: this.getTimeout(node).exit,
+            easing: this.easing.exit,
+          },
+        );
+      }
+      const style = {
+        ...exitActiveStyle,
+        ...options.exitToStyle(this, node),
+      };
+
+      const { onExiting } = this.props;
+
+      Object.assign(node.style, style);
+
+      if (onExiting) {
+        onExiting(node);
+      }
+    }
+
+    /**
+     * 过渡结束监听器。
+     *
+     * @param {HTMLElement} node 过渡元素
+     * @param {() => void} next 通知`Transition`组件过渡结束的方法。
+     */
+    public handleTransitionEnd(node: HTMLElement, next: () => void) {
+      const { timeout } = this.props;
+      if (timeout === 'auto') {
+        setTimeout(next, this.getTimeout(node).enter);
+      }
+    }
+
+    public render() {
+      const { transitionClasses, direction, timeout, ...props } = this
+        .props as StyleTransitionPropsType;
+      return (
+        <CSSTransition
+          {...props}
+          onEnter={this.handleEnter}
+          onEntering={this.handleEntering}
+          onExit={this.handleExit}
+          onExiting={this.handleExiting}
+          timeout={
+            (timeout === 'auto'
+              ? 250
+              : getDuration(timeout, options.duration)) as any
+          }
+          classNames={transitionClasses || ''}
+          addEndListener={this.handleTransitionEnd}
+        />
+      );
+    }
+  };
+}
diff --git a/src/transitions/transitionUtils.ts b/src/transitions/transitionUtils.ts
new file mode 100644
index 00000000..d80619e8
--- /dev/null
+++ b/src/transitions/transitionUtils.ts
@@ -0,0 +1,59 @@
+export interface TransitionTimeout {
+  enter: number;
+  exit: number;
+}
+
+export interface TransitionEasing {
+  enter: string;
+  exit: string;
+}
+
+/**
+ * 获取过渡时长
+ *
+ * @param {(number | {
+ *  enter: number,
+ *   exit: number,
+ * })} timeout
+ * @param {({
+ *   enter: number,
+ *   exit: number,
+ * })} defaultTimeout
+ */
+export function getDuration(
+  timeout?: number | TransitionTimeout,
+  defaultTimeout?: TransitionTimeout,
+): TransitionTimeout | undefined {
+  if (!timeout) {
+    return defaultTimeout;
+  }
+  if (typeof timeout === 'number') {
+    return {
+      enter: timeout,
+      exit: timeout,
+    };
+  }
+  return timeout;
+}
+
+/**
+ * 获取过渡效果的缓动函数
+ *
+ * @param {(string | TransitionEasing)} easing
+ * @param {TransitionEasing} defaultEasing
+ */
+export function getEasing(
+  easing?: string | TransitionEasing,
+  defaultEasing?: TransitionEasing,
+): TransitionEasing | undefined {
+  if (!easing) {
+    return defaultEasing;
+  }
+  if (typeof easing === 'string') {
+    return {
+      enter: easing,
+      exit: easing,
+    };
+  }
+  return easing;
+}
diff --git a/src/transitions/type.ts b/src/transitions/type.ts
new file mode 100644
index 00000000..c26d39e2
--- /dev/null
+++ b/src/transitions/type.ts
@@ -0,0 +1,62 @@
+export interface BaseTransitionCompProps {
+  appear?: boolean;
+  in?: boolean;
+  /**
+   * 指定过渡时应用的css类名。
+   */
+  transitionClasses?:
+    | string
+    | {
+        appear?: string;
+        appearActive?: string;
+        enter?: string;
+        enterActive?: string;
+        exit?: string;
+        exitActive?: string;
+      };
+  onEnter?: (node: HTMLElement, isAccept: boolean) => void;
+  onEntering?: (node: HTMLElement, isAccept: boolean) => void;
+  onEntered?: (node: HTMLElement, isAccept: boolean) => void;
+  onExit?: (node: HTMLElement) => void;
+  onExiting?: (node: HTMLElement) => void;
+  onExited?: (node: HTMLElement) => void;
+}
+
+export interface TransitionHandlers {
+  /**
+   * 在进入'entering'阶段之前调用的回调函数。
+   *
+   * @type {(node: HTMLElement, isAppearing: boolean) => void}
+   */
+  onEnter?: (node: HTMLElement, isAppearing: boolean) => void;
+  /**
+   * 在设置'entered'状态之后调用的回调函数。
+   *
+   * @type {(node: HTMLElement, isAppearing: boolean) => void}
+   */
+  onEntered?: (node: HTMLElement, isAppearing: boolean) => void;
+  /**
+   * 在设置'entering'状态之后调用的回调函数。
+   *
+   * @type {(node: HTMLElement, isAppearing: boolean) => void}
+   */
+  onEntering?: (node: HTMLElement, isAppearing: boolean) => void;
+  /**
+   * 在设置'exiting'状态之前调用的回调函数。
+   *
+   * @type {(node: HTMLElement) => void}
+   */
+  onExit?: (node: HTMLElement) => void;
+  /**
+   * 在设置'exited'状态之后调用的回调函数。
+   *
+   * @type {(node: HTMLElement) => void}
+   */
+  onExited?: (node: HTMLElement) => void;
+  /**
+   * 在设置'exiting'状态之后调用的回调函数。
+   *
+   * @type {(node: HTMLElement) => void}
+   */
+  onExiting?: (node: HTMLElement) => void;
+}
diff --git a/stories/Dialog.stories.tsx b/stories/Dialog.stories.tsx
index 9c4024f9..14601c80 100644
--- a/stories/Dialog.stories.tsx
+++ b/stories/Dialog.stories.tsx
@@ -44,7 +44,7 @@ export const 不显示遮罩层 = () => (
 
 export const 按钮垂直显示 = () => (
   <StoryLayout>
-    <Dialog>
+    <Dialog open>
       <DialogTitle>Use Google location service</DialogTitle>
       <DialogContent>
         Let Google help apps determine location. This means sending anonymous

From 9913e5e2a9c317e77cf4c24703101ef332dac278 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Wed, 8 Apr 2020 18:20:21 +0800
Subject: [PATCH 21/28] =?UTF-8?q?chore:BottomSheet=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/components-apis/bottomSheet.mdx     |   2 +-
 .../bottomSheet-demos/BottomSheetDemo.tsx     |  57 +++++----
 docs/docs/components/bottomSheet.mdx          |  92 ++++++++++++--
 src/BottomSheet/BottomSheet.tsx               |  96 ++++++++-------
 stories/BottomSheet.stories.tsx               | 112 ++++++++++++++----
 5 files changed, 255 insertions(+), 104 deletions(-)

diff --git a/docs/docs/components-apis/bottomSheet.mdx b/docs/docs/components-apis/bottomSheet.mdx
index 5d0ed59a..5d55adda 100644
--- a/docs/docs/components-apis/bottomSheet.mdx
+++ b/docs/docs/components-apis/bottomSheet.mdx
@@ -19,7 +19,7 @@ BottomSheet组件属性：
 | ----------- | --------------- | ------------------------ | ----------------------------------- |
 | open       | boolean         |  false         |    是否显示   |
 | backdropClick       | boolean          | true | 是否响应点击遮罩层事件          |
-| onBackdropClick       | ()=>void          | true | 点击遮罩层事件触发的回调函数          |
+| onBackdropClick       | ()=>void          |  | 点击遮罩层事件触发的回调函数          |
 | transitionDuration       | number         | 300 | 动画延长时间          |
 | children    | React.ReactNode |                | 子元素        |
 | className   | string          |                | 添加自定义类名      |   
diff --git a/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx b/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
index d96c173b..7d5b65e7 100644
--- a/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
+++ b/docs/docs/components/bottomSheet-demos/BottomSheetDemo.tsx
@@ -10,28 +10,23 @@ import ListItemPrimaryAction from '@sinoui/core/ListItemPrimaryAction';
 import SvgIcon from '@sinoui/core/SvgIcon';
 import { MdShare, MdInsertLink, MdModeEdit, MdDelete } from 'react-icons/md';
 
-function BottomSheetDemo(props: any) {
-  const [open, setOpen] = useState(false);
+const listData = [
+  { icon: MdShare, text: 'Share' },
+  { icon: MdInsertLink, text: 'Get link' },
+  { icon: MdShare, text: 'Share' },
+  { icon: MdModeEdit, text: 'Edit name' },
+  { icon: MdDelete, text: 'Delete collection' },
+];
 
-  const onClick = () => {
-    setOpen(!open);
-  };
+const listScrollData = listData.concat(listData, listData);
 
-  const onBackdropClick = () => {
-    setOpen(false);
-  };
-  const listData = [
-    { icon: MdShare, text: 'Share' },
-    { icon: MdInsertLink, text: 'Get link' },
-    { icon: MdShare, text: 'Share' },
-    { icon: MdModeEdit, text: 'Edit name' },
-    { icon: MdDelete, text: 'Delete collection' },
-  ];
-  const content = (
+const Content = (props: any) => {
+  const { data, onClick } = props;
+  return (
     <List>
-      {listData.map((item: any, index) => (
+      {data.map((item: any, index: number) => (
         <React.Fragment key={index.toString()}>
-          <ListItem>
+          <ListItem onClick={onClick}>
             <ListItemPrimaryAction>
               <SvgIcon as={item.icon} color="textSecondary" />
             </ListItemPrimaryAction>
@@ -41,11 +36,24 @@ function BottomSheetDemo(props: any) {
       ))}
     </List>
   );
+};
+
+function BottomSheetDemo(props: any) {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onBackdropClick = () => {
+    setOpen(false);
+  };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
 
-  const {
-    // onBackdropClick: onBackdropClickNew,
-    backdrop: backdropProps,
-  } = props;
+  const { backdrop: backdropProps, listScroll } = props;
   return (
     <ThemeProvider theme={defaultTheme}>
       <div style={{ width: '300px' }}>
@@ -56,7 +64,10 @@ function BottomSheetDemo(props: any) {
           backdrop={backdropProps}
           {...props}
         >
-          {content}
+          <Content
+            onClick={onItemClick}
+            data={listScroll ? listScrollData : listData}
+          />
         </BottomSheet>
       </div>
     </ThemeProvider>
diff --git a/docs/docs/components/bottomSheet.mdx b/docs/docs/components/bottomSheet.mdx
index 733aeed0..b44e27df 100644
--- a/docs/docs/components/bottomSheet.mdx
+++ b/docs/docs/components/bottomSheet.mdx
@@ -13,6 +13,31 @@ import BottomSheetDemo from './bottomSheet-demos/BottomSheetDemo';
 ```tsx
 import BottomSheet from '@sinoui/core/BottomSheet';
 
+const listData = [
+  { icon: MdShare, text: 'Share' },
+  { icon: MdInsertLink, text: 'Get link' },
+  { icon: MdShare, text: 'Share' },
+  { icon: MdModeEdit, text: 'Edit name' },
+  { icon: MdDelete, text: 'Delete collection' },
+];
+
+const Content = (props: any) => {
+  return (
+    <List>
+      {listData.map((item: any, index) => (
+        <React.Fragment key={index.toString()}>
+          <ListItem onClick={props.onClick}>
+            <ListItemPrimaryAction>
+              <SvgIcon as={item.icon} color="textSecondary" />
+            </ListItemPrimaryAction>
+            <ListItemText>{item.text}</ListItemText>
+          </ListItem>
+        </React.Fragment>
+      ))}
+    </List>
+  );
+};
+
 function BottomSheetDemo() {
   const [open, setOpen] = useState(false);
 
@@ -24,19 +49,46 @@ function BottomSheetDemo() {
     setOpen(false);
   };
 
-  const listData = [
-    { icon: MdShare, text: 'Share' },
-    { icon: MdInsertLink, text: 'Get link' },
-    { icon: MdShare, text: 'Share' },
-    { icon: MdModeEdit, text: 'Edit name' },
-    { icon: MdDelete, text: 'Delete collection' },
-  ];
+  const onItemClick = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheet open={open} onBackdropClick={onBackdropClick}>
+        <Content onClick={onItemClick} />
+      </BottomSheet>
+    </>
+  );
+}
+```
+
+效果如下：
+
+<BottomSheetDemo />
+
+## 内容超出屏幕一半显示滚动条
+
+```tsx
+import BottomSheet from '@sinoui/core/BottomSheet';
+
+const listData = [
+  { icon: MdShare, text: 'Share' },
+  { icon: MdInsertLink, text: 'Get link' },
+  { icon: MdShare, text: 'Share' },
+  { icon: MdModeEdit, text: 'Edit name' },
+  { icon: MdDelete, text: 'Delete collection' },
+];
 
-  const content = (
+const listScrollData = listData.concat(listData, listData);
+
+const Content = (props: any) => {
+  return (
     <List>
-      {listData.map((item: any, index) => (
+      {listScrollData.map((item: any, index) => (
         <React.Fragment key={index.toString()}>
-          <ListItem>
+          <ListItem onClick={props.onClick}>
             <ListItemPrimaryAction>
               <SvgIcon as={item.icon} color="textSecondary" />
             </ListItemPrimaryAction>
@@ -46,12 +98,28 @@ function BottomSheetDemo() {
       ))}
     </List>
   );
+};
+
+function BottomSheetDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onBackdropClick = () => {
+    setOpen(false);
+  };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
 
   return (
     <>
       <Button onClick={onClick}>CLICK</Button>
       <BottomSheet open={open} onBackdropClick={onBackdropClick}>
-        {content}
+        <Content onClick={onItemClick} />
       </BottomSheet>
     </>
   );
@@ -60,7 +128,7 @@ function BottomSheetDemo() {
 
 效果如下：
 
-<BottomSheetDemo />
+<BottomSheetDemo listScroll />
 
 ## API
 
diff --git a/src/BottomSheet/BottomSheet.tsx b/src/BottomSheet/BottomSheet.tsx
index cab0f72d..b1b8700e 100644
--- a/src/BottomSheet/BottomSheet.tsx
+++ b/src/BottomSheet/BottomSheet.tsx
@@ -10,47 +10,48 @@ const ModalWrapper = styled(Modal)`
 `;
 
 const BottomSheetWrapper = styled.div`
-  box-shadow: ${(props) => props.theme.shadows[5]};
-  background: #fff;
+  box-shadow: ${(props) => props.theme.shadows[16]};
+  background: ${(props) => props.theme.palette.common.white};
   width: 100%;
-  height: 50%;
+  max-height: calc(50%);
   align-self: flex-end;
   transform: translate3d(0, 0, 0);
+  overflow-y: auto;
 `;
 
 const timeout = 300;
 
 const GlobalStyle = createGlobalStyle`
-.sinoui-bottom-sheet__css-appear {
+.sinoui-bottom-sheet-appear {
   opacity: 0;
   transform: translate3d(0, 100%, 0);
 }
 
-.sinoui-bottom-sheet__css-appear-active {
+.sinoui-bottom-sheet-appear-active {
   opacity: 1;
   transform: translate3d(0, 0, 0);
   transition: opacity ${timeout}ms, transform ${timeout}ms, height ${timeout}ms;
 }
 
-.sinoui-bottom-sheet__css-enter {
+.sinoui-bottom-sheet-enter {
   opacity: 0;
   transform: translate3d(0, 100%, 0); 
 
 }
 
-.sinoui-bottom-sheet__css-enter-active {
+.sinoui-bottom-sheet-enter-active {
   opacity: 1;
   transform: translate3d(0, 0, 0);
   transition: opacity ${timeout}ms, transform ${timeout}ms, height ${timeout}ms;
 }
 
-.sinoui-bottom-sheet__css-exit { 
+.sinoui-bottom-sheet-exit { 
   opacity: 1;
   transform: translate3d(0, 0, 0);
  ;
 }
 
-.sinoui-bottom-sheet__css-exit-active { 
+.sinoui-bottom-sheet-exit-active { 
   opacity: 0;
   transform: translate3d(0, 100%, 0);
   transition: opacity ${timeout}ms, transform ${timeout}ms, height ${timeout}ms
@@ -90,43 +91,46 @@ export interface BottomSheetProps {
 /**
  * 底部滑出组件
  */
-function BottomSheet(props: BottomSheetProps) {
-  const {
-    open = true,
-    backdropClick = true,
-    onBackdropClick,
-    className,
-    children,
-    transitionDuration = 300,
-    addEndListener,
-    ...rest
-  } = props;
-  return (
-    <ModalWrapper
-      {...rest}
-      open={open}
-      backdropClick={backdropClick}
-      onBackdropClick={onBackdropClick}
-    >
-      <CSSTransition
-        classNames="sinoui-bottom-sheet__css"
-        timeout={transitionDuration}
-        in={open}
-        appear
-        unmountOnExit
-        addEndListener={addEndListener}
+const BottomSheet = React.forwardRef(
+  (props: BottomSheetProps, ref: React.Ref<HTMLInputElement>) => {
+    const {
+      open,
+      backdropClick = true,
+      onBackdropClick,
+      className,
+      children,
+      transitionDuration = 300,
+      addEndListener,
+      ...rest
+    } = props;
+    return (
+      <ModalWrapper
+        {...rest}
+        open={open}
+        backdropClick={backdropClick}
+        onBackdropClick={onBackdropClick}
+        ref={ref}
       >
-        <>
-          <BottomSheetWrapper
-            className={classNames('sinoui-bottom-sheet', className)}
-          >
-            {children}
-          </BottomSheetWrapper>
-          <GlobalStyle />
-        </>
-      </CSSTransition>
-    </ModalWrapper>
-  );
-}
+        <CSSTransition
+          classNames="sinoui-bottom-sheet"
+          timeout={transitionDuration}
+          in={open}
+          appear
+          unmountOnExit
+          addEndListener={addEndListener}
+        >
+          <>
+            <BottomSheetWrapper
+              className={classNames('sinoui-bottom-sheet', className)}
+            >
+              {children}
+            </BottomSheetWrapper>
+            <GlobalStyle />
+          </>
+        </CSSTransition>
+      </ModalWrapper>
+    );
+  },
+);
 
 export default BottomSheet;
diff --git a/stories/BottomSheet.stories.tsx b/stories/BottomSheet.stories.tsx
index e41e4848..83912907 100644
--- a/stories/BottomSheet.stories.tsx
+++ b/stories/BottomSheet.stories.tsx
@@ -18,29 +18,57 @@ const listData = [
   { icon: MdShare, text: 'Share' },
   { icon: MdInsertLink, text: 'Get link' },
   { icon: MdShare, text: 'Share' },
-  { icon: MdModeEdit, text: 'Edit name' },
-  { icon: MdDelete, text: 'Delete collection' },
 ];
-const content = (
-  <List>
-    {listData.map((item: any, index) => (
-      <React.Fragment key={index.toString()}>
-        <ListItem>
-          <ListItemPrimaryAction>
-            <SvgIcon as={item.icon} color="textSecondary" />
-          </ListItemPrimaryAction>
-          <ListItemText>{item.text}</ListItemText>
-        </ListItem>
-      </React.Fragment>
-    ))}
-  </List>
-);
 
-export const 基本使用 = () => (
-  <ThemeProvider theme={defaultTheme}>
-    <BottomSheet>{content}</BottomSheet>
-  </ThemeProvider>
-);
+const listScrollData = [
+  ...listData,
+  ...[
+    { icon: MdModeEdit, text: 'Edit name' },
+    { icon: MdDelete, text: 'Delete collection' },
+    { icon: MdShare, text: 'Share' },
+    { icon: MdInsertLink, text: 'Get link' },
+    { icon: MdShare, text: 'Share' },
+  ],
+];
+
+const Content = (props: any) => {
+  const { data, onClick } = props;
+  return (
+    <List>
+      {data.map((item: any, index: number) => (
+        <React.Fragment key={index.toString()}>
+          <ListItem onClick={onClick}>
+            <ListItemPrimaryAction>
+              <SvgIcon as={item.icon} color="textSecondary" />
+            </ListItemPrimaryAction>
+            <ListItemText>{item.text}</ListItemText>
+          </ListItem>
+        </React.Fragment>
+      ))}
+    </List>
+  );
+};
+
+function BottomSheetBasicDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheet open={open}>
+        <Content data={listData} onClick={onItemClick} />
+      </BottomSheet>
+    </>
+  );
+}
 
 function BottomSheetDemo() {
   const [open, setOpen] = useState(false);
@@ -52,18 +80,58 @@ function BottomSheetDemo() {
   const onBackdropClick = () => {
     setOpen(false);
   };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheet open={open} onBackdropClick={onBackdropClick}>
+        <Content data={listData} onClick={onItemClick} />
+      </BottomSheet>
+    </>
+  );
+}
+
+function BottomSheetScrollDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onBackdropClick = () => {
+    setOpen(false);
+  };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
   return (
     <>
       <Button onClick={onClick}>CLICK</Button>
       <BottomSheet open={open} onBackdropClick={onBackdropClick}>
-        {content}
+        <Content data={listScrollData} onClick={onItemClick} />
       </BottomSheet>
     </>
   );
 }
 
+export const 基本使用 = () => (
+  <ThemeProvider theme={defaultTheme}>
+    <BottomSheetBasicDemo />
+  </ThemeProvider>
+);
+
 export const 点击遮罩层事件 = () => (
   <ThemeProvider theme={defaultTheme}>
     <BottomSheetDemo />
   </ThemeProvider>
 );
+
+export const 内容超出屏幕一半显示滚动条 = () => (
+  <ThemeProvider theme={defaultTheme}>
+    <BottomSheetScrollDemo />
+  </ThemeProvider>
+);

From 0f1f6ddf3dd9e4e4d133a3b9320cc1fac9895501 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Wed, 8 Apr 2020 19:12:34 +0800
Subject: [PATCH 22/28] =?UTF-8?q?chore:Dialog=E7=BB=84=E4=BB=B6=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Dialog/CloseIcon.tsx       |  4 ++--
 src/Dialog/DialogContainer.tsx | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/Dialog/CloseIcon.tsx b/src/Dialog/CloseIcon.tsx
index 09c3df80..b86a950b 100644
--- a/src/Dialog/CloseIcon.tsx
+++ b/src/Dialog/CloseIcon.tsx
@@ -13,10 +13,10 @@ const IconButtonWrapper = styled(IconButton)`
   position: absolute !important;
   top: 8px;
   right: 8px;
-  color: ${(props) => props.theme.palette.action.disabled};
+  color: ${(props) => props.theme.palette.text.secondary};
   padding: 12px;
 
-  :hover {
+  &:hover {
     transition: color 300ms;
     transition: background 300ms;
 
diff --git a/src/Dialog/DialogContainer.tsx b/src/Dialog/DialogContainer.tsx
index cf399859..6375ec52 100644
--- a/src/Dialog/DialogContainer.tsx
+++ b/src/Dialog/DialogContainer.tsx
@@ -77,13 +77,13 @@ function DialogContainer(props: DialogContainerProps) {
         handler: '.sinoui-dialog-title',
         bounds: true,
       });
-
-      return () => {
-        drag.teardown();
-      };
     }
 
-    return () => null;
+    return () => {
+      if (draggable) {
+        drag.teardown();
+      }
+    };
   }, [dialogContainerRef, draggable]);
 
   const nodes = React.Children.toArray(children).map((node: any) => {

From 8a8911bf2734b5a8bf251450e326b87861255a31 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Thu, 9 Apr 2020 14:18:22 +0800
Subject: [PATCH 23/28] =?UTF-8?q?chore:BottomSheet=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/components-apis/bottomSheet.mdx     |  18 +-
 docs/docs/components-apis/dialog.mdx          |  66 ++++----
 docs/docs/components/dialog.mdx               |  40 ++++-
 src/BottomSheet/BottomSheet.test.tsx          | 154 ++++++++++++++++++
 .../__snapshots__/BottomSheet.test.tsx.snap   |  37 +++++
 5 files changed, 265 insertions(+), 50 deletions(-)
 create mode 100644 src/BottomSheet/BottomSheet.test.tsx
 create mode 100644 src/BottomSheet/__snapshots__/BottomSheet.test.tsx.snap

diff --git a/docs/docs/components-apis/bottomSheet.mdx b/docs/docs/components-apis/bottomSheet.mdx
index 5d55adda..0f7bf54e 100644
--- a/docs/docs/components-apis/bottomSheet.mdx
+++ b/docs/docs/components-apis/bottomSheet.mdx
@@ -13,15 +13,15 @@ import BottomSheet from '@sinoui/core/BottomSheet';
 
 ## API
 
-BottomSheet组件属性：
+BottomSheet 组件属性：
 
-| 参数名称    | 参数类型   | 默认值        | 说明                                                         |
-| ----------- | --------------- | ------------------------ | ----------------------------------- |
-| open       | boolean         |  false         |    是否显示   |
-| backdropClick       | boolean          | true | 是否响应点击遮罩层事件          |
-| onBackdropClick       | ()=>void          |  | 点击遮罩层事件触发的回调函数          |
-| transitionDuration       | number         | 300 | 动画延长时间          |
-| children    | React.ReactNode |                | 子元素        |
-| className   | string          |                | 添加自定义类名      |   
+| 参数名称           | 参数类型        | 默认值 | 说明                         |
+| ------------------ | --------------- | ------ | ---------------------------- |
+| open               | boolean         | false  | 是否显示                     |
+| backdropClick      | boolean         | true   | 是否响应点击遮罩层事件       |
+| onBackdropClick    | ()=>void        |        | 点击遮罩层事件触发的回调函数 |
+| transitionDuration | number          | 300    | 动画延长时间                 |
+| children           | React.ReactNode |        | 子元素                       |
+| className          | string          |        | 添加自定义类名               |
 
 更多使用示例，请参考[BottomSheet Demos](/docs/components/bottomSheet)
diff --git a/docs/docs/components-apis/dialog.mdx b/docs/docs/components-apis/dialog.mdx
index 43aaf0bf..fe5b1436 100644
--- a/docs/docs/components-apis/dialog.mdx
+++ b/docs/docs/components-apis/dialog.mdx
@@ -15,23 +15,23 @@ title: Dialog
 import Dialog from '@sinoui/core/Dialog';
 ```
 
-Dialog组件属性：
-
-| 参数名称    | 参数类型      |默认值  | 说明                                                         |
-| ----------- | --------------- |--------------- | ------------------------------------------------------------ |
-| children    | React.ReactNode | |子元素  |
-| open    | boolean|false | 是否显示Dialog  |
-| backdrop    | boolean |true | 是否显示遮罩层  |
-| showCloseIcon | boolean | false | 是否显示关闭图标 |
-| onRequestClose    | ()=>void | | 点击关闭按钮的回调函数  |
-| draggable | boolean | true | 是否弹窗可以拖拽 |
-| backdropClick | boolean | false | 是否开启遮罩层的点击事件 |
-| onBackdropClick | ()=>void |  | 点击遮罩层的回调函数 |
-| absolute |boolean  |false  | 布局方式 |
-| fullScreen |boolean  |false  | 设置全屏显示 |
-| fullWidth |boolean  |false  | 设置最大宽度显示 |
-| autoWidth |boolean  |false  | 设置宽度自适应 |
-| className   | string        |  | 自定义类名 |  
+Dialog 组件属性：
+
+| 参数名称        | 参数类型        | 默认值 | 说明                     |
+| --------------- | --------------- | ------ | ------------------------ |
+| children        | React.ReactNode |        | 子元素                   |
+| open            | boolean         | false  | 是否显示 Dialog          |
+| backdrop        | boolean         | true   | 是否显示遮罩层           |
+| showCloseIcon   | boolean         | false  | 是否显示关闭图标         |
+| onRequestClose  | ()=>void        |        | 点击关闭按钮的回调函数   |
+| draggable       | boolean         | true   | 是否弹窗可以拖拽         |
+| backdropClick   | boolean         | false  | 是否开启遮罩层的点击事件 |
+| onBackdropClick | ()=>void        |        | 点击遮罩层的回调函数     |
+| absolute        | boolean         | false  | 布局方式                 |
+| fullScreen      | boolean         | false  | 设置全屏显示             |
+| fullWidth       | boolean         | false  | 设置最大宽度显示         |
+| autoWidth       | boolean         | false  | 设置宽度自适应           |
+| className       | string          |        | 自定义类名               |
 
 ## DialogTitle
 
@@ -43,12 +43,12 @@ Dialog组件属性：
 import DialogTitle from '@sinoui/core/DialogTitle';
 ```
 
-DialogTitle组件属性：
+DialogTitle 组件属性：
 
-| 参数名称    | 参数类型      |默认值  | 说明                                                         |
-| ----------- | --------------- |--------------- | ------------------------------------------------------------ |
-| children    | React.ReactNode | |子元素  |
-| className   | string        |  | 自定义类名 | 
+| 参数名称  | 参数类型        | 默认值 | 说明       |
+| --------- | --------------- | ------ | ---------- |
+| children  | React.ReactNode |        | 子元素     |
+| className | string          |        | 自定义类名 |
 
 ## DialogContent
 
@@ -60,12 +60,12 @@ DialogTitle组件属性：
 import DialogContent from '@sinoui/core/DialogContent';
 ```
 
-DialogContent组件属性：
+DialogContent 组件属性：
 
-| 参数名称    | 参数类型      |默认值  | 说明                                                         |
-| ----------- | --------------- |--------------- | ------------------------------------------------------------ |
-| children    | React.ReactNode | |子元素  |
-| className   | string        |  | 自定义类名 |  
+| 参数名称  | 参数类型        | 默认值 | 说明       |
+| --------- | --------------- | ------ | ---------- |
+| children  | React.ReactNode |        | 子元素     |
+| className | string          |        | 自定义类名 |
 
 ## DialogActions
 
@@ -77,12 +77,12 @@ DialogContent组件属性：
 import DialogActions from '@sinoui/core/DialogActions';
 ```
 
-DialogActions组件属性：
+DialogActions 组件属性：
 
-| 参数名称    | 参数类型      |默认值  | 说明                                                         |
-| ----------- | --------------- |--------------- | ------------------------------------------------------------ |
-| children    | React.ReactNode | |子元素  |
-| column    | boolean|false | 是否垂直显示  |
-| className   | string        |  | 自定义类名 |  
+| 参数名称  | 参数类型        | 默认值 | 说明         |
+| --------- | --------------- | ------ | ------------ |
+| children  | React.ReactNode |        | 子元素       |
+| column    | boolean         | false  | 是否垂直显示 |
+| className | string          |        | 自定义类名   |
 
 更多示例，请参考[Dialog Demos](/docs/components/Dialog)
diff --git a/docs/docs/components/dialog.mdx b/docs/docs/components/dialog.mdx
index c575508f..4e5321a7 100644
--- a/docs/docs/components/dialog.mdx
+++ b/docs/docs/components/dialog.mdx
@@ -32,7 +32,10 @@ function DialogDemo() {
       <Button onClick={() => setOpen(true)}>CLICK</Button>
       <Dialog open={open}>
         <DialogTitle>Use Google location service</DialogTitle>
-        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogContent>
+          Let Google help apps determine location. This means sending anonymous
+          location data to Google, even when no apps are running.
+        </DialogContent>
         <DialogActions>
           <Button onClick={() => setOpen(false)}>DISAGREE</Button>
           <Button onClick={() => setOpen(false)}>AGREE</Button>
@@ -65,7 +68,10 @@ function DialogDemo() {
       <Button onClick={() => setOpen(true)}>点击</Button>
       <Dialog open={open} backdrop={false}>
         <DialogTitle>Use Google location service</DialogTitle>
-        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogContent>
+          Let Google help apps determine location. This means sending anonymous
+          location data to Google, even when no apps are running.
+        </DialogContent>
         <DialogActions>
           <Button onClick={() => setOpen(false)}>DISAGREE</Button>
           <Button onClick={() => setOpen(false)}>AGREE</Button>
@@ -98,7 +104,10 @@ function DialogDemo() {
       <Button onClick={() => setOpen(true)}>点击</Button>
       <Dialog open={open} showCloseIcon onRequestClose={() => setOpen(false)}>
         <DialogTitle>Use Google location service</DialogTitle>
-        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogContent>
+          Let Google help apps determine location. This means sending anonymous
+          location data to Google, even when no apps are running.
+        </DialogContent>
         <DialogActions>
           <Button onClick={() => setOpen(false)}>DISAGREE</Button>
           <Button onClick={() => setOpen(false)}>AGREE</Button>
@@ -131,7 +140,10 @@ function DialogDemo() {
       <Button onClick={() => setOpen(true)}>点击</Button>
       <Dialog open={open} draggable={false}>
         <DialogTitle>Use Google location service</DialogTitle>
-        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogContent>
+          Let Google help apps determine location. This means sending anonymous
+          location data to Google, even when no apps are running.
+        </DialogContent>
         <DialogActions>
           <Button onClick={() => setOpen(false)}>DISAGREE</Button>
           <Button onClick={() => setOpen(false)}>AGREE</Button>
@@ -169,7 +181,10 @@ function DialogDemo() {
         absolute
       >
         <DialogTitle>Use Google location service</DialogTitle>
-        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogContent>
+          Let Google help apps determine location. This means sending anonymous
+          location data to Google, even when no apps are running.
+        </DialogContent>
         <DialogActions>
           <Button onClick={() => setOpen(false)}>DISAGREE</Button>
           <Button onClick={() => setOpen(false)}>AGREE</Button>
@@ -202,7 +217,10 @@ function DialogDemo() {
       <Button onClick={() => setOpen(true)}>点击</Button>
       <Dialog fullScreen>
         <DialogTitle>Use Google location service</DialogTitle>
-        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogContent>
+          Let Google help apps determine location. This means sending anonymous
+          location data to Google, even when no apps are running.
+        </DialogContent>
         <DialogActions>
           <Button onClick={() => setOpen(false)}>DISAGREE</Button>
           <Button onClick={() => setOpen(false)}>AGREE</Button>
@@ -235,7 +253,10 @@ function DialogDemo() {
       <Button onClick={() => setOpen(true)}>点击</Button>
       <Dialog fullWidth>
         <DialogTitle>Use Google location service</DialogTitle>
-        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogContent>
+          Let Google help apps determine location. This means sending anonymous
+          location data to Google, even when no apps are running.
+        </DialogContent>
         <DialogActions>
           <Button onClick={() => setOpen(false)}>DISAGREE</Button>
           <Button onClick={() => setOpen(false)}>AGREE</Button>
@@ -268,7 +289,10 @@ function DialogDemo() {
       <Button onClick={() => setOpen(true)}>点击</Button>
       <Dialog autoWidth>
         <DialogTitle>Use Google location service</DialogTitle>
-        <DialogContent>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</DialogContent>
+        <DialogContent>
+          Let Google help apps determine location. This means sending anonymous
+          location data to Google, even when no apps are running.
+        </DialogContent>
         <DialogActions>
           <Button onClick={() => setOpen(false)}>DISAGREE</Button>
           <Button onClick={() => setOpen(false)}>AGREE</Button>
diff --git a/src/BottomSheet/BottomSheet.test.tsx b/src/BottomSheet/BottomSheet.test.tsx
new file mode 100644
index 00000000..ee1d4cf4
--- /dev/null
+++ b/src/BottomSheet/BottomSheet.test.tsx
@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@sinoui/theme';
+import Button from '@sinoui/core/Button';
+import BottomSheet from '@sinoui/core/BottomSheet';
+import List from '@sinoui/core/List';
+import ListItem from '@sinoui/core/ListItem';
+import ListItemText from '@sinoui/core/ListItemText';
+import ListItemPrimaryAction from '@sinoui/core/ListItemPrimaryAction';
+import SvgIcon from '@sinoui/core/SvgIcon';
+import { MdShare, MdInsertLink, MdModeEdit, MdDelete } from 'react-icons/md';
+
+/**
+ * BottomSheet组件 测试
+ */
+
+const listData = [
+  { icon: MdShare, text: 'Share' },
+  { icon: MdInsertLink, text: 'Get link' },
+  { icon: MdShare, text: 'Share' },
+];
+
+const listScrollData = [
+  ...listData,
+  ...[
+    { icon: MdModeEdit, text: 'Edit name' },
+    { icon: MdDelete, text: 'Delete collection' },
+    { icon: MdShare, text: 'Share' },
+    { icon: MdInsertLink, text: 'Get link' },
+    { icon: MdShare, text: 'Share' },
+  ],
+];
+
+const Content = (props: any) => {
+  const { data, onClick } = props;
+  return (
+    <List>
+      {data.map((item: any, index: number) => (
+        <React.Fragment key={index.toString()}>
+          <ListItem onClick={onClick}>
+            <ListItemPrimaryAction>
+              <SvgIcon as={item.icon} color="textSecondary" />
+            </ListItemPrimaryAction>
+            <ListItemText>{item.text}</ListItemText>
+          </ListItem>
+        </React.Fragment>
+      ))}
+    </List>
+  );
+};
+
+function BottomSheetBasicDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheet open={open}>
+        <Content data={listData} onClick={onItemClick} />
+      </BottomSheet>
+    </>
+  );
+}
+
+function BottomSheetDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onBackdropClick = () => {
+    setOpen(false);
+  };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheet open={open} onBackdropClick={onBackdropClick}>
+        <Content data={listData} onClick={onItemClick} />
+      </BottomSheet>
+    </>
+  );
+}
+
+function BottomSheetScrollDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onBackdropClick = () => {
+    setOpen(false);
+  };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheet open={open} onBackdropClick={onBackdropClick}>
+        <Content data={listScrollData} onClick={onItemClick} />
+      </BottomSheet>
+    </>
+  );
+}
+
+describe('BottomSheet组件 快照测试', () => {
+  it('基本使用', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <BottomSheetBasicDemo />
+        </ThemeProvider>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('点击遮罩层事件', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <BottomSheetDemo />
+        </ThemeProvider>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('内容超出屏幕一半显示滚动条', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <BottomSheetScrollDemo />
+        </ThemeProvider>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/BottomSheet/__snapshots__/BottomSheet.test.tsx.snap b/src/BottomSheet/__snapshots__/BottomSheet.test.tsx.snap
new file mode 100644
index 00000000..ea2e68a8
--- /dev/null
+++ b/src/BottomSheet/__snapshots__/BottomSheet.test.tsx.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BottomSheet组件 快照测试 内容超出屏幕一半显示滚动条 1`] = `
+<button
+  className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+  color="primary"
+  onClick={[Function]}
+  role="button"
+  type="button"
+>
+  CLICK
+</button>
+`;
+
+exports[`BottomSheet组件 快照测试 基本使用 1`] = `
+<button
+  className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+  color="primary"
+  onClick={[Function]}
+  role="button"
+  type="button"
+>
+  CLICK
+</button>
+`;
+
+exports[`BottomSheet组件 快照测试 点击遮罩层事件 1`] = `
+<button
+  className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+  color="primary"
+  onClick={[Function]}
+  role="button"
+  type="button"
+>
+  CLICK
+</button>
+`;

From 1e67a02a07fd61c44230004fb8bf4b5cd88dfdc3 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Thu, 9 Apr 2020 23:04:24 +0800
Subject: [PATCH 24/28] =?UTF-8?q?chore:BottomSheet=E5=92=8CDialog=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/components-apis/bottomSheet.mdx     |  1 +
 .../BottomSheetBasicColorDemo.tsx             | 89 +++++++++++++++++++
 docs/docs/components/bottomSheet.mdx          | 79 ++++++++++++++++
 src/BottomSheet/BottomSheet.test.tsx          | 44 ++++++++-
 src/BottomSheet/BottomSheet.tsx               | 14 ++-
 .../__snapshots__/BottomSheet.test.tsx.snap   | 12 +++
 src/Dialog/DialogContainer.tsx                |  2 +-
 src/Dialog/utils/Draggable.ts                 |  6 ++
 stories/BottomSheet.stories.tsx               | 40 ++++++++-
 9 files changed, 281 insertions(+), 6 deletions(-)
 create mode 100644 docs/docs/components/bottomSheet-demos/BottomSheetBasicColorDemo.tsx

diff --git a/docs/docs/components-apis/bottomSheet.mdx b/docs/docs/components-apis/bottomSheet.mdx
index 0f7bf54e..1c6e2287 100644
--- a/docs/docs/components-apis/bottomSheet.mdx
+++ b/docs/docs/components-apis/bottomSheet.mdx
@@ -21,6 +21,7 @@ BottomSheet 组件属性：
 | backdropClick      | boolean         | true   | 是否响应点击遮罩层事件       |
 | onBackdropClick    | ()=>void        |        | 点击遮罩层事件触发的回调函数 |
 | transitionDuration | number          | 300    | 动画延长时间                 |
+| color              | string          |        | 指定背景颜色                 |
 | children           | React.ReactNode |        | 子元素                       |
 | className          | string          |        | 添加自定义类名               |
 
diff --git a/docs/docs/components/bottomSheet-demos/BottomSheetBasicColorDemo.tsx b/docs/docs/components/bottomSheet-demos/BottomSheetBasicColorDemo.tsx
new file mode 100644
index 00000000..99ce8f07
--- /dev/null
+++ b/docs/docs/components/bottomSheet-demos/BottomSheetBasicColorDemo.tsx
@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { ThemeProvider } from 'styled-components';
+import styled, { defaultTheme } from '@sinoui/theme';
+import Button from '@sinoui/core/Button';
+import BottomSheet from '@sinoui/core/BottomSheet';
+import List from '@sinoui/core/List';
+import ListItem from '@sinoui/core/ListItem';
+import ListItemText from '@sinoui/core/ListItemText';
+import ListItemPrimaryAction from '@sinoui/core/ListItemPrimaryAction';
+import SvgIcon from '@sinoui/core/SvgIcon';
+import { MdShare, MdInsertLink, MdModeEdit, MdDelete } from 'react-icons/md';
+import getColorFromTheme from '@sinoui/core/utils/getColorFromTheme';
+
+const BottomSheetColor = styled(BottomSheet)<{ color?: string }>`
+  > ul li {
+    background-color: ${({ theme, color }) => getColorFromTheme(theme, color)};
+    color: #fff;
+  }
+  > ul li svg {
+    color: #fff;
+  }
+`;
+
+const listData = [
+  { icon: MdShare, text: 'Share' },
+  { icon: MdInsertLink, text: 'Get link' },
+  { icon: MdShare, text: 'Share' },
+  { icon: MdModeEdit, text: 'Edit name' },
+  { icon: MdDelete, text: 'Delete collection' },
+];
+
+const listScrollData = listData.concat(listData, listData);
+
+const Content = (props: any) => {
+  const { data, onClick } = props;
+  return (
+    <List>
+      {data.map((item: any, index: number) => (
+        <React.Fragment key={index.toString()}>
+          <ListItem onClick={onClick}>
+            <ListItemPrimaryAction>
+              <SvgIcon as={item.icon} color="textSecondary" />
+            </ListItemPrimaryAction>
+            <ListItemText>{item.text}</ListItemText>
+          </ListItem>
+        </React.Fragment>
+      ))}
+    </List>
+  );
+};
+
+function BottomSheetBasicColorDemo(props: any) {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onBackdropClick = () => {
+    setOpen(false);
+  };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
+
+  const { backdrop: backdropProps, listScroll } = props;
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <div style={{ width: '300px' }}>
+        <Button onClick={onClick}>CLICK</Button>
+        <BottomSheetColor
+          open={open}
+          onBackdropClick={onBackdropClick}
+          backdrop={backdropProps}
+          {...props}
+          color="success"
+        >
+          <Content
+            onClick={onItemClick}
+            data={listScroll ? listScrollData : listData}
+          />
+        </BottomSheetColor>
+      </div>
+    </ThemeProvider>
+  );
+}
+
+export default BottomSheetBasicColorDemo;
diff --git a/docs/docs/components/bottomSheet.mdx b/docs/docs/components/bottomSheet.mdx
index b44e27df..fa507e82 100644
--- a/docs/docs/components/bottomSheet.mdx
+++ b/docs/docs/components/bottomSheet.mdx
@@ -7,6 +7,7 @@ import { ThemeProvider } from 'styled-components';
 import { defaultTheme } from '@sinoui/theme';
 import BottomSheet from '@sinoui/core/BottomSheet';
 import BottomSheetDemo from './bottomSheet-demos/BottomSheetDemo';
+import BottomSheetBasicColorDemo from './bottomSheet-demos/BottomSheetBasicColorDemo';
 
 ## 基本使用
 
@@ -130,6 +131,84 @@ function BottomSheetDemo() {
 
 <BottomSheetDemo listScroll />
 
+## 指定背景颜色
+
+指定背景颜色为 success：
+
+```tsx
+import BottomSheet from '@sinoui/core/BottomSheet';
+
+const BottomSheetColor = styled(BottomSheet)<{ color?: string }>`
+  > ul li {
+    background-color: ${({ theme, color }) => getColorFromTheme(theme, color)};
+    color: #fff;
+  }
+  > ul li svg {
+    color: #fff;
+  }
+`;
+
+const listData = [
+  { icon: MdShare, text: 'Share' },
+  { icon: MdInsertLink, text: 'Get link' },
+  { icon: MdShare, text: 'Share' },
+  { icon: MdModeEdit, text: 'Edit name' },
+  { icon: MdDelete, text: 'Delete collection' },
+];
+
+const listScrollData = listData.concat(listData, listData);
+
+const Content = (props: any) => {
+  return (
+    <List>
+      {listScrollData.map((item: any, index) => (
+        <React.Fragment key={index.toString()}>
+          <ListItem onClick={props.onClick}>
+            <ListItemPrimaryAction>
+              <SvgIcon as={item.icon} color="textSecondary" />
+            </ListItemPrimaryAction>
+            <ListItemText>{item.text}</ListItemText>
+          </ListItem>
+        </React.Fragment>
+      ))}
+    </List>
+  );
+};
+
+function BottomSheetDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onBackdropClick = () => {
+    setOpen(false);
+  };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheetColor
+        open={open}
+        onBackdropClick={onBackdropClick}
+        color="success"
+      >
+        <Content onClick={onItemClick} />
+      </BottomSheetColor>
+    </>
+  );
+}
+```
+
+效果如下：
+
+<BottomSheetBasicColorDemo />
+
 ## API
 
 查看[BottomSheet 组件 API](/docs/components-apis/bottomSheet)
diff --git a/src/BottomSheet/BottomSheet.test.tsx b/src/BottomSheet/BottomSheet.test.tsx
index ee1d4cf4..ea35165c 100644
--- a/src/BottomSheet/BottomSheet.test.tsx
+++ b/src/BottomSheet/BottomSheet.test.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import renderer from 'react-test-renderer';
 import '@testing-library/jest-dom/extend-expect';
-import { ThemeProvider } from 'styled-components';
+import styled, { ThemeProvider } from 'styled-components';
 import { defaultTheme } from '@sinoui/theme';
 import Button from '@sinoui/core/Button';
 import BottomSheet from '@sinoui/core/BottomSheet';
@@ -11,6 +11,7 @@ import ListItemText from '@sinoui/core/ListItemText';
 import ListItemPrimaryAction from '@sinoui/core/ListItemPrimaryAction';
 import SvgIcon from '@sinoui/core/SvgIcon';
 import { MdShare, MdInsertLink, MdModeEdit, MdDelete } from 'react-icons/md';
+import getColorFromTheme from '@sinoui/core/utils/getColorFromTheme';
 
 /**
  * BottomSheet组件 测试
@@ -120,6 +121,37 @@ function BottomSheetScrollDemo() {
   );
 }
 
+const BottomSheetColor = styled(BottomSheet)<{ color?: string }>`
+  > ul li {
+    background-color: ${({ theme, color }) => getColorFromTheme(theme, color)};
+    color: #fff;
+  }
+  > ul li svg {
+    color: #fff;
+  }
+`;
+
+function BottomSheetBasicColorDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheetColor open={open} color="success">
+        <Content data={listData} onClick={onItemClick} />
+      </BottomSheetColor>
+    </>
+  );
+}
+
 describe('BottomSheet组件 快照测试', () => {
   it('基本使用', () => {
     const tree = renderer
@@ -151,4 +183,14 @@ describe('BottomSheet组件 快照测试', () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  it('指定背景颜色', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <BottomSheetBasicColorDemo />
+        </ThemeProvider>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/src/BottomSheet/BottomSheet.tsx b/src/BottomSheet/BottomSheet.tsx
index b1b8700e..7466cbdf 100644
--- a/src/BottomSheet/BottomSheet.tsx
+++ b/src/BottomSheet/BottomSheet.tsx
@@ -3,17 +3,19 @@ import styled, { createGlobalStyle } from 'styled-components';
 import classNames from 'classnames';
 import Modal from '@sinoui/core/Modal';
 import { CSSTransition } from 'react-transition-group';
+import getColorFromTheme from '@sinoui/core/utils/getColorFromTheme';
 
 const ModalWrapper = styled(Modal)`
   display: flex;
   align-items: center;
 `;
 
-const BottomSheetWrapper = styled.div`
+const BottomSheetWrapper = styled.div<{ color?: string }>`
   box-shadow: ${(props) => props.theme.shadows[16]};
-  background: ${(props) => props.theme.palette.common.white};
+  background: ${({ theme, color }) =>
+    color ? getColorFromTheme(theme, color) : theme.palette.common.white};
   width: 100%;
-  max-height: calc(50%);
+  max-height: 50%;
   align-self: flex-end;
   transform: translate3d(0, 0, 0);
   overflow-y: auto;
@@ -86,6 +88,10 @@ export interface BottomSheetProps {
    * 过渡结束监听器
    */
   addEndListener?: any;
+  /**
+   * 指定背景颜色
+   */
+  color?: string;
 }
 
 /**
@@ -101,6 +107,7 @@ const BottomSheet = React.forwardRef(
       children,
       transitionDuration = 300,
       addEndListener,
+      color,
       ...rest
     } = props;
     return (
@@ -122,6 +129,7 @@ const BottomSheet = React.forwardRef(
           <>
             <BottomSheetWrapper
               className={classNames('sinoui-bottom-sheet', className)}
+              color={color}
             >
               {children}
             </BottomSheetWrapper>
diff --git a/src/BottomSheet/__snapshots__/BottomSheet.test.tsx.snap b/src/BottomSheet/__snapshots__/BottomSheet.test.tsx.snap
index ea2e68a8..05998985 100644
--- a/src/BottomSheet/__snapshots__/BottomSheet.test.tsx.snap
+++ b/src/BottomSheet/__snapshots__/BottomSheet.test.tsx.snap
@@ -24,6 +24,18 @@ exports[`BottomSheet组件 快照测试 基本使用 1`] = `
 </button>
 `;
 
+exports[`BottomSheet组件 快照测试 指定背景颜色 1`] = `
+<button
+  className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+  color="primary"
+  onClick={[Function]}
+  role="button"
+  type="button"
+>
+  CLICK
+</button>
+`;
+
 exports[`BottomSheet组件 快照测试 点击遮罩层事件 1`] = `
 <button
   className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
diff --git a/src/Dialog/DialogContainer.tsx b/src/Dialog/DialogContainer.tsx
index 6375ec52..65526c59 100644
--- a/src/Dialog/DialogContainer.tsx
+++ b/src/Dialog/DialogContainer.tsx
@@ -84,7 +84,7 @@ function DialogContainer(props: DialogContainerProps) {
         drag.teardown();
       }
     };
-  }, [dialogContainerRef, draggable]);
+  });
 
   const nodes = React.Children.toArray(children).map((node: any) => {
     if (node.type === DialogTitle) {
diff --git a/src/Dialog/utils/Draggable.ts b/src/Dialog/utils/Draggable.ts
index 812084cd..1b01ebe8 100644
--- a/src/Dialog/utils/Draggable.ts
+++ b/src/Dialog/utils/Draggable.ts
@@ -109,6 +109,12 @@ export default class Draggable {
     }
 
     if (this.handler$.ownerDocument) {
+      this.handler$.ownerDocument.ondragstart = (e: MouseEvent) => {
+        e.preventDefault();
+      };
+      this.handler$.ownerDocument.ondragend = (e: MouseEvent) => {
+        e.preventDefault();
+      };
       this.handler$.ownerDocument.addEventListener(
         'mouseup',
         this.onDocumentMouseUp,
diff --git a/stories/BottomSheet.stories.tsx b/stories/BottomSheet.stories.tsx
index 83912907..c6026877 100644
--- a/stories/BottomSheet.stories.tsx
+++ b/stories/BottomSheet.stories.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ThemeProvider } from 'styled-components';
+import styled, { ThemeProvider } from 'styled-components';
 import { defaultTheme } from '@sinoui/theme';
 import Button from '@sinoui/core/Button';
 import BottomSheet from '@sinoui/core/BottomSheet';
@@ -9,11 +9,22 @@ import ListItemText from '@sinoui/core/ListItemText';
 import ListItemPrimaryAction from '@sinoui/core/ListItemPrimaryAction';
 import SvgIcon from '@sinoui/core/SvgIcon';
 import { MdShare, MdInsertLink, MdModeEdit, MdDelete } from 'react-icons/md';
+import getColorFromTheme from '@sinoui/core/utils/getColorFromTheme';
 
 export default {
   title: 'BottomSheet',
 };
 
+const BottomSheetColor = styled(BottomSheet)<{ color?: string }>`
+  > ul li {
+    background-color: ${({ theme, color }) => getColorFromTheme(theme, color)};
+    color: #fff;
+  }
+  > ul li svg {
+    color: #fff;
+  }
+`;
+
 const listData = [
   { icon: MdShare, text: 'Share' },
   { icon: MdInsertLink, text: 'Get link' },
@@ -118,6 +129,27 @@ function BottomSheetScrollDemo() {
   );
 }
 
+function BottomSheetBasicColorDemo() {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(!open);
+  };
+
+  const onItemClick = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={onClick}>CLICK</Button>
+      <BottomSheetColor open={open} color="success">
+        <Content data={listData} onClick={onItemClick} />
+      </BottomSheetColor>
+    </>
+  );
+}
+
 export const 基本使用 = () => (
   <ThemeProvider theme={defaultTheme}>
     <BottomSheetBasicDemo />
@@ -135,3 +167,9 @@ export const 内容超出屏幕一半显示滚动条 = () => (
     <BottomSheetScrollDemo />
   </ThemeProvider>
 );
+
+export const 指定背景颜色 = () => (
+  <ThemeProvider theme={defaultTheme}>
+    <BottomSheetBasicColorDemo />
+  </ThemeProvider>
+);

From c51311efea75cd3bc319ead90cc763a16be81068 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Fri, 10 Apr 2020 09:47:33 +0800
Subject: [PATCH 25/28] =?UTF-8?q?chore:BottomSheet=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BottomSheetBasicColorDemo.tsx             | 89 -------------------
 docs/docs/components/bottomSheet.mdx          | 79 ----------------
 src/BottomSheet/BottomSheet.tsx               | 26 ++----
 stories/BottomSheet.stories.tsx               | 38 --------
 4 files changed, 9 insertions(+), 223 deletions(-)
 delete mode 100644 docs/docs/components/bottomSheet-demos/BottomSheetBasicColorDemo.tsx

diff --git a/docs/docs/components/bottomSheet-demos/BottomSheetBasicColorDemo.tsx b/docs/docs/components/bottomSheet-demos/BottomSheetBasicColorDemo.tsx
deleted file mode 100644
index 99ce8f07..00000000
--- a/docs/docs/components/bottomSheet-demos/BottomSheetBasicColorDemo.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { useState } from 'react';
-import { ThemeProvider } from 'styled-components';
-import styled, { defaultTheme } from '@sinoui/theme';
-import Button from '@sinoui/core/Button';
-import BottomSheet from '@sinoui/core/BottomSheet';
-import List from '@sinoui/core/List';
-import ListItem from '@sinoui/core/ListItem';
-import ListItemText from '@sinoui/core/ListItemText';
-import ListItemPrimaryAction from '@sinoui/core/ListItemPrimaryAction';
-import SvgIcon from '@sinoui/core/SvgIcon';
-import { MdShare, MdInsertLink, MdModeEdit, MdDelete } from 'react-icons/md';
-import getColorFromTheme from '@sinoui/core/utils/getColorFromTheme';
-
-const BottomSheetColor = styled(BottomSheet)<{ color?: string }>`
-  > ul li {
-    background-color: ${({ theme, color }) => getColorFromTheme(theme, color)};
-    color: #fff;
-  }
-  > ul li svg {
-    color: #fff;
-  }
-`;
-
-const listData = [
-  { icon: MdShare, text: 'Share' },
-  { icon: MdInsertLink, text: 'Get link' },
-  { icon: MdShare, text: 'Share' },
-  { icon: MdModeEdit, text: 'Edit name' },
-  { icon: MdDelete, text: 'Delete collection' },
-];
-
-const listScrollData = listData.concat(listData, listData);
-
-const Content = (props: any) => {
-  const { data, onClick } = props;
-  return (
-    <List>
-      {data.map((item: any, index: number) => (
-        <React.Fragment key={index.toString()}>
-          <ListItem onClick={onClick}>
-            <ListItemPrimaryAction>
-              <SvgIcon as={item.icon} color="textSecondary" />
-            </ListItemPrimaryAction>
-            <ListItemText>{item.text}</ListItemText>
-          </ListItem>
-        </React.Fragment>
-      ))}
-    </List>
-  );
-};
-
-function BottomSheetBasicColorDemo(props: any) {
-  const [open, setOpen] = useState(false);
-
-  const onClick = () => {
-    setOpen(!open);
-  };
-
-  const onBackdropClick = () => {
-    setOpen(false);
-  };
-
-  const onItemClick = () => {
-    setOpen(false);
-  };
-
-  const { backdrop: backdropProps, listScroll } = props;
-  return (
-    <ThemeProvider theme={defaultTheme}>
-      <div style={{ width: '300px' }}>
-        <Button onClick={onClick}>CLICK</Button>
-        <BottomSheetColor
-          open={open}
-          onBackdropClick={onBackdropClick}
-          backdrop={backdropProps}
-          {...props}
-          color="success"
-        >
-          <Content
-            onClick={onItemClick}
-            data={listScroll ? listScrollData : listData}
-          />
-        </BottomSheetColor>
-      </div>
-    </ThemeProvider>
-  );
-}
-
-export default BottomSheetBasicColorDemo;
diff --git a/docs/docs/components/bottomSheet.mdx b/docs/docs/components/bottomSheet.mdx
index fa507e82..b44e27df 100644
--- a/docs/docs/components/bottomSheet.mdx
+++ b/docs/docs/components/bottomSheet.mdx
@@ -7,7 +7,6 @@ import { ThemeProvider } from 'styled-components';
 import { defaultTheme } from '@sinoui/theme';
 import BottomSheet from '@sinoui/core/BottomSheet';
 import BottomSheetDemo from './bottomSheet-demos/BottomSheetDemo';
-import BottomSheetBasicColorDemo from './bottomSheet-demos/BottomSheetBasicColorDemo';
 
 ## 基本使用
 
@@ -131,84 +130,6 @@ function BottomSheetDemo() {
 
 <BottomSheetDemo listScroll />
 
-## 指定背景颜色
-
-指定背景颜色为 success：
-
-```tsx
-import BottomSheet from '@sinoui/core/BottomSheet';
-
-const BottomSheetColor = styled(BottomSheet)<{ color?: string }>`
-  > ul li {
-    background-color: ${({ theme, color }) => getColorFromTheme(theme, color)};
-    color: #fff;
-  }
-  > ul li svg {
-    color: #fff;
-  }
-`;
-
-const listData = [
-  { icon: MdShare, text: 'Share' },
-  { icon: MdInsertLink, text: 'Get link' },
-  { icon: MdShare, text: 'Share' },
-  { icon: MdModeEdit, text: 'Edit name' },
-  { icon: MdDelete, text: 'Delete collection' },
-];
-
-const listScrollData = listData.concat(listData, listData);
-
-const Content = (props: any) => {
-  return (
-    <List>
-      {listScrollData.map((item: any, index) => (
-        <React.Fragment key={index.toString()}>
-          <ListItem onClick={props.onClick}>
-            <ListItemPrimaryAction>
-              <SvgIcon as={item.icon} color="textSecondary" />
-            </ListItemPrimaryAction>
-            <ListItemText>{item.text}</ListItemText>
-          </ListItem>
-        </React.Fragment>
-      ))}
-    </List>
-  );
-};
-
-function BottomSheetDemo() {
-  const [open, setOpen] = useState(false);
-
-  const onClick = () => {
-    setOpen(!open);
-  };
-
-  const onBackdropClick = () => {
-    setOpen(false);
-  };
-
-  const onItemClick = () => {
-    setOpen(false);
-  };
-
-  return (
-    <>
-      <Button onClick={onClick}>CLICK</Button>
-      <BottomSheetColor
-        open={open}
-        onBackdropClick={onBackdropClick}
-        color="success"
-      >
-        <Content onClick={onItemClick} />
-      </BottomSheetColor>
-    </>
-  );
-}
-```
-
-效果如下：
-
-<BottomSheetBasicColorDemo />
-
 ## API
 
 查看[BottomSheet 组件 API](/docs/components-apis/bottomSheet)
diff --git a/src/BottomSheet/BottomSheet.tsx b/src/BottomSheet/BottomSheet.tsx
index 7466cbdf..b3c3bea2 100644
--- a/src/BottomSheet/BottomSheet.tsx
+++ b/src/BottomSheet/BottomSheet.tsx
@@ -3,17 +3,15 @@ import styled, { createGlobalStyle } from 'styled-components';
 import classNames from 'classnames';
 import Modal from '@sinoui/core/Modal';
 import { CSSTransition } from 'react-transition-group';
-import getColorFromTheme from '@sinoui/core/utils/getColorFromTheme';
 
 const ModalWrapper = styled(Modal)`
   display: flex;
   align-items: center;
 `;
 
-const BottomSheetWrapper = styled.div<{ color?: string }>`
+const BottomSheetWrapper = styled.div`
   box-shadow: ${(props) => props.theme.shadows[16]};
-  background: ${({ theme, color }) =>
-    color ? getColorFromTheme(theme, color) : theme.palette.common.white};
+  background: ${({ theme }) => theme.palette.background.paper};
   width: 100%;
   max-height: 50%;
   align-self: flex-end;
@@ -24,36 +22,36 @@ const BottomSheetWrapper = styled.div<{ color?: string }>`
 const timeout = 300;
 
 const GlobalStyle = createGlobalStyle`
-.sinoui-bottom-sheet-appear {
+.sinoui-bottom-sheet__translate-appear {
   opacity: 0;
   transform: translate3d(0, 100%, 0);
 }
 
-.sinoui-bottom-sheet-appear-active {
+.sinoui-bottom-sheet__translate-appear-active {
   opacity: 1;
   transform: translate3d(0, 0, 0);
   transition: opacity ${timeout}ms, transform ${timeout}ms, height ${timeout}ms;
 }
 
-.sinoui-bottom-sheet-enter {
+.sinoui-bottom-sheet__translate-enter {
   opacity: 0;
   transform: translate3d(0, 100%, 0); 
 
 }
 
-.sinoui-bottom-sheet-enter-active {
+.sinoui-bottom-sheet__translate-enter-active {
   opacity: 1;
   transform: translate3d(0, 0, 0);
   transition: opacity ${timeout}ms, transform ${timeout}ms, height ${timeout}ms;
 }
 
-.sinoui-bottom-sheet-exit { 
+.sinoui-bottom-sheet__translate-exit { 
   opacity: 1;
   transform: translate3d(0, 0, 0);
  ;
 }
 
-.sinoui-bottom-sheet-exit-active { 
+.sinoui-bottom-sheet__translate-exit-active { 
   opacity: 0;
   transform: translate3d(0, 100%, 0);
   transition: opacity ${timeout}ms, transform ${timeout}ms, height ${timeout}ms
@@ -88,10 +86,6 @@ export interface BottomSheetProps {
    * 过渡结束监听器
    */
   addEndListener?: any;
-  /**
-   * 指定背景颜色
-   */
-  color?: string;
 }
 
 /**
@@ -107,7 +101,6 @@ const BottomSheet = React.forwardRef(
       children,
       transitionDuration = 300,
       addEndListener,
-      color,
       ...rest
     } = props;
     return (
@@ -119,7 +112,7 @@ const BottomSheet = React.forwardRef(
         ref={ref}
       >
         <CSSTransition
-          classNames="sinoui-bottom-sheet"
+          classNames="sinoui-bottom-sheet__translate"
           timeout={transitionDuration}
           in={open}
           appear
@@ -129,7 +122,6 @@ const BottomSheet = React.forwardRef(
           <>
             <BottomSheetWrapper
               className={classNames('sinoui-bottom-sheet', className)}
-              color={color}
             >
               {children}
             </BottomSheetWrapper>
diff --git a/stories/BottomSheet.stories.tsx b/stories/BottomSheet.stories.tsx
index c6026877..1e319323 100644
--- a/stories/BottomSheet.stories.tsx
+++ b/stories/BottomSheet.stories.tsx
@@ -9,22 +9,11 @@ import ListItemText from '@sinoui/core/ListItemText';
 import ListItemPrimaryAction from '@sinoui/core/ListItemPrimaryAction';
 import SvgIcon from '@sinoui/core/SvgIcon';
 import { MdShare, MdInsertLink, MdModeEdit, MdDelete } from 'react-icons/md';
-import getColorFromTheme from '@sinoui/core/utils/getColorFromTheme';
 
 export default {
   title: 'BottomSheet',
 };
 
-const BottomSheetColor = styled(BottomSheet)<{ color?: string }>`
-  > ul li {
-    background-color: ${({ theme, color }) => getColorFromTheme(theme, color)};
-    color: #fff;
-  }
-  > ul li svg {
-    color: #fff;
-  }
-`;
-
 const listData = [
   { icon: MdShare, text: 'Share' },
   { icon: MdInsertLink, text: 'Get link' },
@@ -129,27 +118,6 @@ function BottomSheetScrollDemo() {
   );
 }
 
-function BottomSheetBasicColorDemo() {
-  const [open, setOpen] = useState(false);
-
-  const onClick = () => {
-    setOpen(!open);
-  };
-
-  const onItemClick = () => {
-    setOpen(false);
-  };
-
-  return (
-    <>
-      <Button onClick={onClick}>CLICK</Button>
-      <BottomSheetColor open={open} color="success">
-        <Content data={listData} onClick={onItemClick} />
-      </BottomSheetColor>
-    </>
-  );
-}
-
 export const 基本使用 = () => (
   <ThemeProvider theme={defaultTheme}>
     <BottomSheetBasicDemo />
@@ -167,9 +135,3 @@ export const 内容超出屏幕一半显示滚动条 = () => (
     <BottomSheetScrollDemo />
   </ThemeProvider>
 );
-
-export const 指定背景颜色 = () => (
-  <ThemeProvider theme={defaultTheme}>
-    <BottomSheetBasicColorDemo />
-  </ThemeProvider>
-);

From 3a7912d018c599bf218336231f9fc185c30a0613 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Fri, 10 Apr 2020 15:24:07 +0800
Subject: [PATCH 26/28] =?UTF-8?q?chore:Dialog=E6=96=87=E6=A1=A3=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/components-apis/dialog.mdx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/docs/docs/components-apis/dialog.mdx b/docs/docs/components-apis/dialog.mdx
index fe5b1436..d60acca0 100644
--- a/docs/docs/components-apis/dialog.mdx
+++ b/docs/docs/components-apis/dialog.mdx
@@ -3,10 +3,6 @@ id: dialog
 title: Dialog
 ---
 
-弹窗。
-
-## Dialog
-
 包裹整个弹窗的根组件。
 
 引用方式：

From 5beb30ff9f83de793cd73f955524f73f73add3b3 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Fri, 10 Apr 2020 15:58:30 +0800
Subject: [PATCH 27/28] =?UTF-8?q?chore:Dialog=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Dialog/Dialog.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index e9896cc0..26b94af5 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -65,9 +65,7 @@ function Dialog(props: DialogProps) {
   return (
     <ModalWrapper {...rest} backdropClick={backdropClick} open={open}>
       <Transition timeout={transitionDuration} appear in={open}>
-        <>
-          <DialogContainer {...props} />
-        </>
+        <DialogContainer {...props} />
       </Transition>
     </ModalWrapper>
   );

From e7c74380bd55fe92051eac1107d9d5cf371d85b5 Mon Sep 17 00:00:00 2001
From: chenaihua <1690133293@qq.com>
Date: Fri, 10 Apr 2020 22:50:21 +0800
Subject: [PATCH 28/28] =?UTF-8?q?chore:Dialog=E6=B7=BB=E5=8A=A0=E5=BF=AB?=
 =?UTF-8?q?=E7=85=A7=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Dialog/Dialog.test.tsx                    | 297 ++++++------
 src/Dialog/__snapshots__/Dialog.test.tsx.snap | 432 ++++++++++++++++++
 src/Dialog/utils/Draggable.ts                 |   9 +-
 3 files changed, 593 insertions(+), 145 deletions(-)
 create mode 100644 src/Dialog/__snapshots__/Dialog.test.tsx.snap

diff --git a/src/Dialog/Dialog.test.tsx b/src/Dialog/Dialog.test.tsx
index 22ccc43b..7aa95019 100644
--- a/src/Dialog/Dialog.test.tsx
+++ b/src/Dialog/Dialog.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import renderer, { act } from 'react-test-renderer';
-import { render, cleanup, fireEvent } from '@testing-library/react';
+import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
+import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { ThemeProvider } from 'styled-components';
 import { defaultTheme } from '@sinoui/theme';
@@ -54,144 +55,156 @@ describe('Dialog组件 单元测试', () => {
 });
 
 describe('Dialog组件 快照测试', () => {
-  // it('基本使用', () => {
-  //   const tree = renderer
-  //     .create(
-  //       <ThemeProvider theme={defaultTheme}>
-  //         <Dialog>
-  //           <DialogTitle>Use Google location service?</DialogTitle>
-  //           <DialogContent>
-  //             Let Google help apps determine location. This means sending
-  //             anonymous location data toGoogle, even when no apps are running.
-  //           </DialogContent>
-  //           <DialogActions>
-  //             <Button>Disagree</Button>
-  //             <Button>Agree</Button>
-  //           </DialogActions>
-  //         </Dialog>
-  //       </ThemeProvider>,
-  //     )
-  //     .toJSON();
-  //   expect(tree).toMatchSnapshot();
-  // });
-  // it('不显示遮罩层', () => {
-  //   const tree = renderer
-  //     .create(
-  //       <ThemeProvider theme={defaultTheme}>
-  //         <Dialog backdrop={false}>
-  //           <DialogTitle>Use Google location service?</DialogTitle>
-  //           <DialogContent>
-  //             Let Google help apps determine location. This means sending
-  //             anonymous location data toGoogle, even when no apps are running.
-  //           </DialogContent>
-  //           <DialogActions>
-  //             <Button>Disagree</Button>
-  //             <Button>Agree</Button>
-  //           </DialogActions>
-  //         </Dialog>
-  //       </ThemeProvider>,
-  //     )
-  //     .toJSON();
-  //   expect(tree).toMatchSnapshot();
-  // });
-  // it('显示关闭图标', () => {
-  //   const tree = renderer
-  //     .create(
-  //       <ThemeProvider theme={defaultTheme}>
-  //         <Dialog showCloseIcon>
-  //           <DialogTitle>Use Google location service?</DialogTitle>
-  //           <DialogContent>
-  //             Let Google help apps determine location. This means sending
-  //             anonymous location data toGoogle, even when no apps are running.
-  //           </DialogContent>
-  //           <DialogActions>
-  //             <Button>Disagree</Button>
-  //             <Button>Agree</Button>
-  //           </DialogActions>
-  //         </Dialog>
-  //       </ThemeProvider>,
-  //     )
-  //     .toJSON();
-  //   expect(tree).toMatchSnapshot();
-  // });
-  // it('设置弹窗不可以拖拽', () => {
-  //   const tree = renderer
-  //     .create(
-  //       <ThemeProvider theme={defaultTheme}>
-  //         <Dialog draggable={false}>
-  //           <DialogTitle>Use Google location service?</DialogTitle>
-  //           <DialogContent>
-  //             Let Google help apps determine location. This means sending
-  //             anonymous location data toGoogle, even when no apps are running.
-  //           </DialogContent>
-  //           <DialogActions>
-  //             <Button>Disagree</Button>
-  //             <Button>Agree</Button>
-  //           </DialogActions>
-  //         </Dialog>
-  //       </ThemeProvider>,
-  //     )
-  //     .toJSON();
-  //   expect(tree).toMatchSnapshot();
-  // });
-  // it('设置全屏显示', () => {
-  //   const tree = renderer
-  //     .create(
-  //       <ThemeProvider theme={defaultTheme}>
-  //         <Dialog fullScreen>
-  //           <DialogTitle>Use Google location service?</DialogTitle>
-  //           <DialogContent>
-  //             Let Google help apps determine location. This means sending
-  //             anonymous location data toGoogle, even when no apps are running.
-  //           </DialogContent>
-  //           <DialogActions>
-  //             <Button>Disagree</Button>
-  //             <Button>Agree</Button>
-  //           </DialogActions>
-  //         </Dialog>
-  //       </ThemeProvider>,
-  //     )
-  //     .toJSON();
-  //   expect(tree).toMatchSnapshot();
-  // });
-  // it('对话框将根据maxWidth的值进行自我调整', () => {
-  //   const tree = renderer
-  //     .create(
-  //       <ThemeProvider theme={defaultTheme}>
-  //         <Dialog fullWidth>
-  //           <DialogTitle>Use Google location service?</DialogTitle>
-  //           <DialogContent>
-  //             Let Google help apps determine location. This means sending
-  //             anonymous location data toGoogle, even when no apps are running.
-  //           </DialogContent>
-  //           <DialogActions>
-  //             <Button>Disagree</Button>
-  //             <Button>Agree</Button>
-  //           </DialogActions>
-  //         </Dialog>
-  //       </ThemeProvider>,
-  //     )
-  //     .toJSON();
-  //   expect(tree).toMatchSnapshot();
-  // });
-  // it('宽度自适应', () => {
-  //   const tree = renderer
-  //     .create(
-  //       <ThemeProvider theme={defaultTheme}>
-  //         <Dialog autoWidth>
-  //           <DialogTitle>Use Google location service?</DialogTitle>
-  //           <DialogContent>
-  //             Let Google help apps determine location. This means sending
-  //             anonymous location data toGoogle, even when no apps are running.
-  //           </DialogContent>
-  //           <DialogActions>
-  //             <Button>Disagree</Button>
-  //             <Button>Agree</Button>
-  //           </DialogActions>
-  //         </Dialog>
-  //       </ThemeProvider>,
-  //     )
-  //     .toJSON();
-  //   expect(tree).toMatchSnapshot();
-  // });
+  afterEach(cleanup);
+
+  beforeAll(() => {
+    (ReactDOM as any).createPortal = jest.fn((element, _node: any) => {
+      return element;
+    });
+  });
+
+  afterEach(() => {
+    (ReactDOM as any).createPortal.mockClear();
+  });
+
+  it('基本使用', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <Dialog>
+            <DialogTitle>Use Google location service?</DialogTitle>
+            <DialogContent>
+              Let Google help apps determine location. This means sending
+              anonymous location data toGoogle, even when no apps are running.
+            </DialogContent>
+            <DialogActions>
+              <Button>Disagree</Button>
+              <Button>Agree</Button>
+            </DialogActions>
+          </Dialog>
+        </ThemeProvider>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('不显示遮罩层', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <Dialog backdrop={false}>
+            <DialogTitle>Use Google location service?</DialogTitle>
+            <DialogContent>
+              Let Google help apps determine location. This means sending
+              anonymous location data toGoogle, even when no apps are running.
+            </DialogContent>
+            <DialogActions>
+              <Button>Disagree</Button>
+              <Button>Agree</Button>
+            </DialogActions>
+          </Dialog>
+        </ThemeProvider>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('显示关闭图标', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <Dialog showCloseIcon>
+            <DialogTitle>Use Google location service?</DialogTitle>
+            <DialogContent>
+              Let Google help apps determine location. This means sending
+              anonymous location data toGoogle, even when no apps are running.
+            </DialogContent>
+            <DialogActions>
+              <Button>Disagree</Button>
+              <Button>Agree</Button>
+            </DialogActions>
+          </Dialog>
+        </ThemeProvider>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('设置弹窗不可以拖拽', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <Dialog draggable={false}>
+            <DialogTitle>Use Google location service?</DialogTitle>
+            <DialogContent>
+              Let Google help apps determine location. This means sending
+              anonymous location data toGoogle, even when no apps are running.
+            </DialogContent>
+            <DialogActions>
+              <Button>Disagree</Button>
+              <Button>Agree</Button>
+            </DialogActions>
+          </Dialog>
+        </ThemeProvider>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('设置全屏显示', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <Dialog fullScreen>
+            <DialogTitle>Use Google location service?</DialogTitle>
+            <DialogContent>
+              Let Google help apps determine location. This means sending
+              anonymous location data toGoogle, even when no apps are running.
+            </DialogContent>
+            <DialogActions>
+              <Button>Disagree</Button>
+              <Button>Agree</Button>
+            </DialogActions>
+          </Dialog>
+        </ThemeProvider>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('对话框将根据maxWidth的值进行自我调整', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <Dialog fullWidth>
+            <DialogTitle>Use Google location service?</DialogTitle>
+            <DialogContent>
+              Let Google help apps determine location. This means sending
+              anonymous location data toGoogle, even when no apps are running.
+            </DialogContent>
+            <DialogActions>
+              <Button>Disagree</Button>
+              <Button>Agree</Button>
+            </DialogActions>
+          </Dialog>
+        </ThemeProvider>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('宽度自适应', () => {
+    const tree = renderer
+      .create(
+        <ThemeProvider theme={defaultTheme}>
+          <Dialog autoWidth>
+            <DialogTitle>Use Google location service?</DialogTitle>
+            <DialogContent>
+              Let Google help apps determine location. This means sending
+              anonymous location data toGoogle, even when no apps are running.
+            </DialogContent>
+            <DialogActions>
+              <Button>Disagree</Button>
+              <Button>Agree</Button>
+            </DialogActions>
+          </Dialog>
+        </ThemeProvider>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/src/Dialog/__snapshots__/Dialog.test.tsx.snap b/src/Dialog/__snapshots__/Dialog.test.tsx.snap
new file mode 100644
index 00000000..61741335
--- /dev/null
+++ b/src/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -0,0 +1,432 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dialog组件 快照测试 不显示遮罩层 1`] = `
+<div
+  className="ModalLayout-g5nr25-0 jNRojG Dialog__ModalWrapper-sc-10h8ou0-0 ieHqTo"
+  onClick={[Function]}
+>
+  <div
+    className="DialogWrapper-otdr06-0 cDqcGd sinoui-dialog--draggable"
+  >
+    <h6
+      className="Typography__TypographyWrapper-sc-12agh80-0 bKkQU sinoui-typography sinoui-typography--h6 DialogTitle-sc-1z056jx-0 bkFOVa sinoui-dialog-title"
+      color="textPrimary"
+      draggable={true}
+      type="h6"
+    >
+      Use Google location service?
+    </h6>
+    <h6
+      className="Typography__TypographyWrapper-sc-12agh80-0 juBaHC sinoui-typography sinoui-typography--subtitle1 DialogContent-rvt14v-0 coPUFm sinoui-dialog-content children forwardedComponent theme"
+      color="textSecondary"
+      type="subtitle1"
+    >
+      Let Google help apps determine location. This means sending anonymous location data toGoogle, even when no apps are running.
+    </h6>
+    <div
+      className="DialogActions__DialogActionsWrapper-ibc7so-0 kTvEtc sinoui-dialog-actions"
+    >
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+        color="primary"
+        role="button"
+        type="button"
+      >
+        Disagree
+      </button>
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+        color="primary"
+        role="button"
+        type="button"
+      >
+        Agree
+      </button>
+    </div>
+    <iframe
+      className="Iframe-fna49j-0 IJdcU"
+      frameBorder={0}
+      scrolling="false"
+    />
+  </div>
+</div>
+`;
+
+exports[`Dialog组件 快照测试 基本使用 1`] = `
+<div
+  className="ModalLayout-g5nr25-0 jNRojG Dialog__ModalWrapper-sc-10h8ou0-0 ieHqTo"
+  onClick={[Function]}
+>
+  <div
+    aria-hidden={true}
+    className="Backdrop__BackdropWrapper-sc-15mv4hm-0 dYcqsh sinoui-modal--backdrop"
+    data-sinoui-test="Backdrop"
+    onClick={[Function]}
+  />
+  <div
+    className="DialogWrapper-otdr06-0 cDqcGd sinoui-dialog--draggable"
+  >
+    <h6
+      className="Typography__TypographyWrapper-sc-12agh80-0 bKkQU sinoui-typography sinoui-typography--h6 DialogTitle-sc-1z056jx-0 bkFOVa sinoui-dialog-title"
+      color="textPrimary"
+      draggable={true}
+      type="h6"
+    >
+      Use Google location service?
+    </h6>
+    <h6
+      className="Typography__TypographyWrapper-sc-12agh80-0 juBaHC sinoui-typography sinoui-typography--subtitle1 DialogContent-rvt14v-0 coPUFm sinoui-dialog-content children forwardedComponent theme"
+      color="textSecondary"
+      type="subtitle1"
+    >
+      Let Google help apps determine location. This means sending anonymous location data toGoogle, even when no apps are running.
+    </h6>
+    <div
+      className="DialogActions__DialogActionsWrapper-ibc7so-0 kTvEtc sinoui-dialog-actions"
+    >
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+        color="primary"
+        role="button"
+        type="button"
+      >
+        Disagree
+      </button>
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+        color="primary"
+        role="button"
+        type="button"
+      >
+        Agree
+      </button>
+    </div>
+    <iframe
+      className="Iframe-fna49j-0 IJdcU"
+      frameBorder={0}
+      scrolling="false"
+    />
+  </div>
+</div>
+`;
+
+exports[`Dialog组件 快照测试 宽度自适应 1`] = `
+<div
+  className="ModalLayout-g5nr25-0 jNRojG Dialog__ModalWrapper-sc-10h8ou0-0 ieHqTo"
+  onClick={[Function]}
+>
+  <div
+    aria-hidden={true}
+    className="Backdrop__BackdropWrapper-sc-15mv4hm-0 dYcqsh sinoui-modal--backdrop"
+    data-sinoui-test="Backdrop"
+    onClick={[Function]}
+  />
+  <div
+    className="DialogWrapper-otdr06-0 itSnar sinoui-dialog--draggable"
+  >
+    <h6
+      className="Typography__TypographyWrapper-sc-12agh80-0 bKkQU sinoui-typography sinoui-typography--h6 DialogTitle-sc-1z056jx-0 bkFOVa sinoui-dialog-title"
+      color="textPrimary"
+      draggable={true}
+      type="h6"
+    >
+      Use Google location service?
+    </h6>
+    <h6
+      className="Typography__TypographyWrapper-sc-12agh80-0 juBaHC sinoui-typography sinoui-typography--subtitle1 DialogContent-rvt14v-0 coPUFm sinoui-dialog-content children forwardedComponent theme"
+      color="textSecondary"
+      type="subtitle1"
+    >
+      Let Google help apps determine location. This means sending anonymous location data toGoogle, even when no apps are running.
+    </h6>
+    <div
+      className="DialogActions__DialogActionsWrapper-ibc7so-0 kTvEtc sinoui-dialog-actions"
+    >
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+        color="primary"
+        role="button"
+        type="button"
+      >
+        Disagree
+      </button>
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+        color="primary"
+        role="button"
+        type="button"
+      >
+        Agree
+      </button>
+    </div>
+    <iframe
+      className="Iframe-fna49j-0 IJdcU"
+      frameBorder={0}
+      scrolling="false"
+    />
+  </div>
+</div>
+`;
+
+exports[`Dialog组件 快照测试 对话框将根据maxWidth的值进行自我调整 1`] = `
+<div
+  className="ModalLayout-g5nr25-0 jNRojG Dialog__ModalWrapper-sc-10h8ou0-0 ieHqTo"
+  onClick={[Function]}
+>
+  <div
+    aria-hidden={true}
+    className="Backdrop__BackdropWrapper-sc-15mv4hm-0 dYcqsh sinoui-modal--backdrop"
+    data-sinoui-test="Backdrop"
+    onClick={[Function]}
+  />
+  <div
+    className="DialogWrapper-otdr06-0 bNEukK sinoui-dialog--draggable"
+  >
+    <h6
+      className="Typography__TypographyWrapper-sc-12agh80-0 bKkQU sinoui-typography sinoui-typography--h6 DialogTitle-sc-1z056jx-0 bkFOVa sinoui-dialog-title"
+      color="textPrimary"
+      draggable={true}
+      type="h6"
+    >
+      Use Google location service?
+    </h6>
+    <h6
+      className="Typography__TypographyWrapper-sc-12agh80-0 juBaHC sinoui-typography sinoui-typography--subtitle1 DialogContent-rvt14v-0 coPUFm sinoui-dialog-content children forwardedComponent theme"
+      color="textSecondary"
+      type="subtitle1"
+    >
+      Let Google help apps determine location. This means sending anonymous location data toGoogle, even when no apps are running.
+    </h6>
+    <div
+      className="DialogActions__DialogActionsWrapper-ibc7so-0 kTvEtc sinoui-dialog-actions"
+    >
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+        color="primary"
+        role="button"
+        type="button"
+      >
+        Disagree
+      </button>
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+        color="primary"
+        role="button"
+        type="button"
+      >
+        Agree
+      </button>
+    </div>
+    <iframe
+      className="Iframe-fna49j-0 IJdcU"
+      frameBorder={0}
+      scrolling="false"
+    />
+  </div>
+</div>
+`;
+
+exports[`Dialog组件 快照测试 显示关闭图标 1`] = `
+<div
+  className="ModalLayout-g5nr25-0 jNRojG Dialog__ModalWrapper-sc-10h8ou0-0 ieHqTo"
+  onClick={[Function]}
+>
+  <div
+    aria-hidden={true}
+    className="Backdrop__BackdropWrapper-sc-15mv4hm-0 dYcqsh sinoui-modal--backdrop"
+    data-sinoui-test="Backdrop"
+    onClick={[Function]}
+  />
+  <div
+    className="DialogWrapper-otdr06-0 cDqcGd sinoui-dialog--draggable"
+  >
+    <h6
+      className="Typography__TypographyWrapper-sc-12agh80-0 bKkQU sinoui-typography sinoui-typography--h6 DialogTitle-sc-1z056jx-0 ctkIjy sinoui-dialog-title"
+      color="textPrimary"
+      draggable={true}
+      type="h6"
+    >
+      Use Google location service?
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button IconButton__IconButtonLayout-sc-11batye-0 sLtAY CloseIcon__IconButtonWrapper-tgx290-0 dUKtJz sinoui-dialog-title__icon sinoui-icon-button CloseIcon__IconButtonWrapper-tgx290-0 dUKtJz sinoui-dialog-title__icon"
+        color="textPrimary"
+        role="button"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          className="SvgIcon-sc-1015m7s-0 fCQqNT sinoui-svg-icon"
+          fill="currentColor"
+          focusable="false"
+          height={24}
+          role="presentation"
+          size={24}
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            Object {
+              "color": undefined,
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+          />
+        </svg>
+      </button>
+    </h6>
+    <h6
+      className="Typography__TypographyWrapper-sc-12agh80-0 juBaHC sinoui-typography sinoui-typography--subtitle1 DialogContent-rvt14v-0 coPUFm sinoui-dialog-content children forwardedComponent theme"
+      color="textSecondary"
+      type="subtitle1"
+    >
+      Let Google help apps determine location. This means sending anonymous location data toGoogle, even when no apps are running.
+    </h6>
+    <div
+      className="DialogActions__DialogActionsWrapper-ibc7so-0 kTvEtc sinoui-dialog-actions"
+    >
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+        color="primary"
+        role="button"
+        type="button"
+      >
+        Disagree
+      </button>
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+        color="primary"
+        role="button"
+        type="button"
+      >
+        Agree
+      </button>
+    </div>
+    <iframe
+      className="Iframe-fna49j-0 IJdcU"
+      frameBorder={0}
+      scrolling="false"
+    />
+  </div>
+</div>
+`;
+
+exports[`Dialog组件 快照测试 设置全屏显示 1`] = `
+<div
+  className="ModalLayout-g5nr25-0 jNRojG Dialog__ModalWrapper-sc-10h8ou0-0 ieHqTo"
+  onClick={[Function]}
+>
+  <div
+    aria-hidden={true}
+    className="Backdrop__BackdropWrapper-sc-15mv4hm-0 dYcqsh sinoui-modal--backdrop"
+    data-sinoui-test="Backdrop"
+    onClick={[Function]}
+  />
+  <div
+    className="DialogWrapper-otdr06-0 cIHicm sinoui-dialog--draggable"
+  >
+    <h6
+      className="Typography__TypographyWrapper-sc-12agh80-0 bKkQU sinoui-typography sinoui-typography--h6 DialogTitle-sc-1z056jx-0 bkFOVa sinoui-dialog-title"
+      color="textPrimary"
+      draggable={true}
+      type="h6"
+    >
+      Use Google location service?
+    </h6>
+    <h6
+      className="Typography__TypographyWrapper-sc-12agh80-0 juBaHC sinoui-typography sinoui-typography--subtitle1 DialogContent-rvt14v-0 coPUFm sinoui-dialog-content children forwardedComponent theme"
+      color="textSecondary"
+      type="subtitle1"
+    >
+      Let Google help apps determine location. This means sending anonymous location data toGoogle, even when no apps are running.
+    </h6>
+    <div
+      className="DialogActions__DialogActionsWrapper-ibc7so-0 kTvEtc sinoui-dialog-actions"
+    >
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+        color="primary"
+        role="button"
+        type="button"
+      >
+        Disagree
+      </button>
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+        color="primary"
+        role="button"
+        type="button"
+      >
+        Agree
+      </button>
+    </div>
+    <iframe
+      className="Iframe-fna49j-0 IJdcU"
+      frameBorder={0}
+      scrolling="false"
+    />
+  </div>
+</div>
+`;
+
+exports[`Dialog组件 快照测试 设置弹窗不可以拖拽 1`] = `
+<div
+  className="ModalLayout-g5nr25-0 jNRojG Dialog__ModalWrapper-sc-10h8ou0-0 ieHqTo"
+  draggable={false}
+  onClick={[Function]}
+>
+  <div
+    aria-hidden={true}
+    className="Backdrop__BackdropWrapper-sc-15mv4hm-0 dYcqsh sinoui-modal--backdrop"
+    data-sinoui-test="Backdrop"
+    onClick={[Function]}
+  />
+  <div
+    className="DialogWrapper-otdr06-0 cDqcGd"
+  >
+    <h6
+      className="Typography__TypographyWrapper-sc-12agh80-0 bKkQU sinoui-typography sinoui-typography--h6 DialogTitle-sc-1z056jx-0 pDzwY sinoui-dialog-title"
+      color="textPrimary"
+      draggable={false}
+      type="h6"
+    >
+      Use Google location service?
+    </h6>
+    <h6
+      className="Typography__TypographyWrapper-sc-12agh80-0 juBaHC sinoui-typography sinoui-typography--subtitle1 DialogContent-rvt14v-0 coPUFm sinoui-dialog-content children forwardedComponent theme"
+      color="textSecondary"
+      type="subtitle1"
+    >
+      Let Google help apps determine location. This means sending anonymous location data toGoogle, even when no apps are running.
+    </h6>
+    <div
+      className="DialogActions__DialogActionsWrapper-ibc7so-0 kTvEtc sinoui-dialog-actions"
+    >
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+        color="primary"
+        role="button"
+        type="button"
+      >
+        Disagree
+      </button>
+      <button
+        className="BaseButton__BaseButtonLayout-wk8p17-0 gJsqSy sinoui-base-button Button__ButtonLayout-sc-15sa99-0 duCArv sinoui-button"
+        color="primary"
+        role="button"
+        type="button"
+      >
+        Agree
+      </button>
+    </div>
+    <iframe
+      className="Iframe-fna49j-0 IJdcU"
+      frameBorder={0}
+      scrolling="false"
+    />
+  </div>
+</div>
+`;
diff --git a/src/Dialog/utils/Draggable.ts b/src/Dialog/utils/Draggable.ts
index 1b01ebe8..09b51cc5 100644
--- a/src/Dialog/utils/Draggable.ts
+++ b/src/Dialog/utils/Draggable.ts
@@ -40,9 +40,12 @@ export default class Draggable {
       typeof this.dragConfig.container === 'string'
         ? (document.querySelector(this.dragConfig.container) as HTMLElement)
         : this.dragConfig.container;
-    this.handler$ = this.dragConfig.handler
-      ? (this.container$.querySelector(this.dragConfig.handler) as HTMLElement)
-      : this.container$;
+    this.handler$ =
+      this.dragConfig.handler && this.container$
+        ? (this.container$.querySelector(
+            this.dragConfig.handler,
+          ) as HTMLElement)
+        : this.container$;
     this.pos = { x: 0, y: 0 };
     this.delta = { x: 0, y: 0 };