From 35f141d8818aaf00fc45e6bff9197b975110ac80 Mon Sep 17 00:00:00 2001
From: liaoxuezhi <liaoxuezhi@baidu.com>
Date: Mon, 8 Jul 2019 20:16:09 +0800
Subject: [PATCH] =?UTF-8?q?collapse=20=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/components/Form/FieldSet.jsx | 1 +
 scss/components/_collapse.scss        | 3 ++-
 src/renderers/Collapse.tsx            | 6 +++---
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/examples/components/Form/FieldSet.jsx b/examples/components/Form/FieldSet.jsx
index 9e571387..b9990dd5 100644
--- a/examples/components/Form/FieldSet.jsx
+++ b/examples/components/Form/FieldSet.jsx
@@ -19,6 +19,7 @@ export default {
                 {
                     type: 'fieldSet',
                     title: '基本信息',
+                    collapsable: true,
                     controls: [
                         {
                             type: 'group',
diff --git a/scss/components/_collapse.scss b/scss/components/_collapse.scss
index bc068843..25dc1b4e 100644
--- a/scss/components/_collapse.scss
+++ b/scss/components/_collapse.scss
@@ -28,12 +28,13 @@
             border-style: solid;
             border-width: px2rem(1px) px2rem(1px) 0 0;
             transform: rotate(135deg);
-            transform-origin: center;
+            transform-origin: 50% 50%;
         }
     }
 
     &.is-collapsed &-arrow:before {
         transform: rotate(45deg);
+        transform-origin: 0% 50%;
     }
 
     &--collapsable &-header {
diff --git a/src/renderers/Collapse.tsx b/src/renderers/Collapse.tsx
index d9e551f4..a6de2cd4 100644
--- a/src/renderers/Collapse.tsx
+++ b/src/renderers/Collapse.tsx
@@ -59,7 +59,7 @@ export default class Collapse extends React.Component<CollapseProps, CollapseSta
     }
 
     toggleCollapsed() {
-        this.setState({
+        this.props.collapsable !== false && this.setState({
             collapsed: !this.state.collapsed,
         });
     }
@@ -96,9 +96,9 @@ export default class Collapse extends React.Component<CollapseProps, CollapseSta
                 )}
             >
                 {title ? (
-                    <HeadingComponent className={cx(`Collapse-header`, headingClassName)}>
+                    <HeadingComponent onClick={this.toggleCollapsed} className={cx(`Collapse-header`, headingClassName)}>
                         {render('heading', title)}
-                        {collapsable && <span onClick={this.toggleCollapsed} className={cx('Collapse-arrow')} />}
+                        {collapsable && <span className={cx('Collapse-arrow')} />}
                     </HeadingComponent>
                 ) : null}