From b5eb92e8ad1b53b27e0bea0509fe70379fedfb51 Mon Sep 17 00:00:00 2001 From: lushengnan Date: Tue, 4 Dec 2018 10:18:13 +0800 Subject: [PATCH 1/5] =?UTF-8?q?U=20=E4=BC=98=E5=8C=96collapse=E5=8A=A8?= =?UTF-8?q?=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Collapse/Collapse.js | 1 + .../components/CollapseBody/CollapseBody.js | 55 +++++++++++++------ .../components/CollapseTitle/CollapseTitle.js | 1 + .../src/components/SidebarBody/SidebarBody.js | 10 ++-- .../src/styles/modules/_animation.scss | 19 ------- .../src/styles/modules/_collapse.scss | 7 +-- .../src/styles/variables/_collapse.scss | 2 +- 7 files changed, 48 insertions(+), 47 deletions(-) diff --git a/packages/react-impression/src/components/Collapse/Collapse.js b/packages/react-impression/src/components/Collapse/Collapse.js index 371b110ac..310e8568a 100644 --- a/packages/react-impression/src/components/Collapse/Collapse.js +++ b/packages/react-impression/src/components/Collapse/Collapse.js @@ -53,6 +53,7 @@ export default class Collapse extends React.PureComponent { return React.cloneElement(child, { onClick: this.toggleItemsHandle, + active, }) }) diff --git a/packages/react-impression/src/components/CollapseBody/CollapseBody.js b/packages/react-impression/src/components/CollapseBody/CollapseBody.js index ffc8ef6f4..c9388bb6b 100644 --- a/packages/react-impression/src/components/CollapseBody/CollapseBody.js +++ b/packages/react-impression/src/components/CollapseBody/CollapseBody.js @@ -2,26 +2,47 @@ import classnames from 'classnames' import React from 'react' import PropTypes from 'prop-types' -const CollapseBody = ({ className, children, ...others }) => { - delete others.onClick +class CollapseBody extends React.PureComponent { + static propTypes = { + /** + * 子组件 + */ + children: PropTypes.node, - return ( -
- {children} -
- ) -} + /** + * 自定义样式 + */ + className: PropTypes.string, + /** + * 是否展开状态 + */ + active: PropTypes.bool, + } + + get childHeight() { + if (this.container) { + const child = this.container.children[0] + return child ? child.offsetHeight : 0 + } + return 0 + } -CollapseBody.propTypes = { - /** - * 子组件 - */ - children: PropTypes.node, + setContainerRef = element => (this.container = element) - /** - * 自定义样式 - */ - className: PropTypes.string, + render() { + const { className, children, active, ...others } = this.props + delete others.onClick + return ( +
+ {children} +
+ ) + } } export default CollapseBody diff --git a/packages/react-impression/src/components/CollapseTitle/CollapseTitle.js b/packages/react-impression/src/components/CollapseTitle/CollapseTitle.js index 763bd1098..6d9511dea 100644 --- a/packages/react-impression/src/components/CollapseTitle/CollapseTitle.js +++ b/packages/react-impression/src/components/CollapseTitle/CollapseTitle.js @@ -3,6 +3,7 @@ import React from 'react' import PropTypes from 'prop-types' const CollapseTitle = ({ onClick, children, className, ...others }) => { + delete others.active return (
{ + window.requestAnimationFrame(() => { this.scrollbar = new PerfectScrollbar(this.container, { suppressScrollX: true, }) - }, 1000) + this.handleUpdateScroll() + }) } componentWillUnmount() { @@ -35,9 +36,10 @@ export default class SidebarBody extends React.PureComponent { handleUpdateScroll = () => { // 延迟更新滚动条 - window.requestAnimationFrame(() => { + // Collapse组件增加动画效果后，便不能用requestAnimationFrame更新滚动条了 2018-12-03 + setTimeout(() => { this.scrollbar.update() - }) + }, 400) } setContainerRef = element => (this.container = element) diff --git a/packages/react-impression/src/styles/modules/_animation.scss b/packages/react-impression/src/styles/modules/_animation.scss index 59940ed3e..205645732 100755 --- a/packages/react-impression/src/styles/modules/_animation.scss +++ b/packages/react-impression/src/styles/modules/_animation.scss @@ -7,25 +7,6 @@ } } -// .collapse { -// display: none; - -// &.in { -// display: block; -// } -// tr&.in { display: table-row; } -// tbody&.in { display: table-row-group; } -// } - -.collapsing { - position: relative; - height: 0; - overflow: hidden; - transition-timing-function: ease; - transition-duration: 0.35s; - transition-property: height; -} - @keyframes spin { 0% { transform: rotate(0deg); diff --git a/packages/react-impression/src/styles/modules/_collapse.scss b/packages/react-impression/src/styles/modules/_collapse.scss index f86e60a0d..64ca4ebdb 100644 --- a/packages/react-impression/src/styles/modules/_collapse.scss +++ b/packages/react-impression/src/styles/modules/_collapse.scss @@ -6,11 +6,6 @@ transform-origin: center center; transform: rotate(90deg); } - - .collapse-body { - height: auto; - animation: $collapse-animation; - } } .nav-item { @@ -29,9 +24,9 @@ } .collapse-body { - height: 0; overflow: hidden; text-indent: $collapse-text-indent; transform-origin: center 0; font-size: $collapse-font-size; + transition: $collapse-animation; } diff --git a/packages/react-impression/src/styles/variables/_collapse.scss b/packages/react-impression/src/styles/variables/_collapse.scss index 88fdcbffa..cf89f22d5 100644 --- a/packages/react-impression/src/styles/variables/_collapse.scss +++ b/packages/react-impression/src/styles/variables/_collapse.scss @@ -1,5 +1,5 @@ // Collapse $collapse-transition: all 0.18s ease-in-out !default; -$collapse-animation: scaleIn 0.36s ease-in-out !default; +$collapse-animation: max-height .35s ease !default; $collapse-font-size: 0.8em !default; $collapse-text-indent: 1.5rem !default; From 67614b8e7f9f979dce1e82bf7db7a8698a7107c9 Mon Sep 17 00:00:00 2001 From: lushengnan Date: Mon, 10 Dec 2018 15:08:28 +0800 Subject: [PATCH 2/5] U const->let --- .../src/components/CollapseBody/CollapseBody.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-impression/src/components/CollapseBody/CollapseBody.js b/packages/react-impression/src/components/CollapseBody/CollapseBody.js index c9388bb6b..484bca23e 100644 --- a/packages/react-impression/src/components/CollapseBody/CollapseBody.js +++ b/packages/react-impression/src/components/CollapseBody/CollapseBody.js @@ -30,7 +30,7 @@ class CollapseBody extends React.PureComponent { setContainerRef = element => (this.container = element) render() { - const { className, children, active, ...others } = this.props + let { className, children, active, ...others } = this.props delete others.onClick return (
Date: Mon, 10 Dec 2018 15:41:56 +0800 Subject: [PATCH 3/5] Bump version to 2.0.6-alpha.0 --- packages/react-impression/package.json | 2 +- yarn.lock | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/react-impression/package.json b/packages/react-impression/package.json index cf0737d39..d61cfcafe 100644 --- a/packages/react-impression/package.json +++ b/packages/react-impression/package.json @@ -1,6 +1,6 @@ { "name": "react-impression", - "version": "2.0.5-alpha.3", + "version": "2.0.6-alpha.0", "author": "NewDadaFE", "description": "UI Components with React.", "sideEffects": false, diff --git a/yarn.lock b/yarn.lock index 2899f9fcc..5b95fabd4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7460,6 +7460,22 @@ react-icons@^2.2.7: dependencies: react-icon-base "2.1.0" +react-impression@^2.0.0-alpha.4: + version "2.0.5" + resolved "https://registry.npmjs.org/react-impression/-/react-impression-2.0.5.tgz#aeb7e9ecba6b36c657c7f0b37bfa4de70d11a087" + integrity sha512-snCBqCK9X03hhynpaYnGSw5bVlC5SrbRKCcIxMoBy4+iMSxdAAMydqpvZIScPeNFPBMMN5yeBVxYa2JU8681Og== + dependencies: + "@babel/runtime" "^7.0.0" + classnames "^2.2.0" + perfect-scrollbar "^1.4.0" + popper.js "^1.14.4" + prop-types "15.6.2" + ramda "^0.26.0" + react-addons-css-transition-group "15.6.2" + react-debounce-input "^3.2.0" + react-portal "^4.1.5" + sass-rem "^2.0.1" + react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" From 509359f998c6126bfe8b264dacae16e51f627c05 Mon Sep 17 00:00:00 2001 From: lushengnan Date: Tue, 11 Dec 2018 10:15:16 +0800 Subject: [PATCH 4/5] =?UTF-8?q?F=20=E4=BF=AE=E5=A4=8D=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E6=9D=A1=E5=B1=85=E5=B7=A6=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/SidebarBody/SidebarBody.js | 11 +++-------- .../react-impression/src/styles/modules/_sidebar.scss | 5 +++++ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-impression/src/components/SidebarBody/SidebarBody.js b/packages/react-impression/src/components/SidebarBody/SidebarBody.js index e7d54f3d1..cef6bfbdd 100644 --- a/packages/react-impression/src/components/SidebarBody/SidebarBody.js +++ b/packages/react-impression/src/components/SidebarBody/SidebarBody.js @@ -18,15 +18,10 @@ export default class SidebarBody extends React.PureComponent { componentDidMount() { // 初始化滚动条 - // PerfectScrollbar插件bug - // 若不延迟初始化滚动条，滚动条ps__rail-y的right值初始状态为'auto'，导致滚动条错误地居左侧显示 - // https://github.com/utatti/perfect-scrollbar/issues/715 - window.requestAnimationFrame(() => { - this.scrollbar = new PerfectScrollbar(this.container, { - suppressScrollX: true, - }) - this.handleUpdateScroll() + this.scrollbar = new PerfectScrollbar(this.container, { + suppressScrollX: true, }) + this.handleUpdateScroll() } componentWillUnmount() { diff --git a/packages/react-impression/src/styles/modules/_sidebar.scss b/packages/react-impression/src/styles/modules/_sidebar.scss index 3de9ea2f8..bdcc01123 100644 --- a/packages/react-impression/src/styles/modules/_sidebar.scss +++ b/packages/react-impression/src/styles/modules/_sidebar.scss @@ -28,6 +28,11 @@ flex: 1; color: $sidebar-nav-item-color; + & > .ps__rail-y { + right: 0 !important; + left: unset !important; + } + .nav-item > a, .nav-link > a, .collapse-title { From 4f9953d57480102d6a900ea120640b5bdae9949e Mon Sep 17 00:00:00 2001 From: biped Date: Tue, 11 Dec 2018 14:42:10 +0800 Subject: [PATCH 5/5] Bump version to 2.0.6-alpha.1 --- packages/react-impression/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-impression/package.json b/packages/react-impression/package.json index d61cfcafe..75ca600e6 100644 --- a/packages/react-impression/package.json +++ b/packages/react-impression/package.json @@ -1,6 +1,6 @@ { "name": "react-impression", - "version": "2.0.6-alpha.0", + "version": "2.0.6-alpha.1", "author": "NewDadaFE", "description": "UI Components with React.", "sideEffects": false,