collapse 样式优化

examples/components/Form/FieldSet.jsx

@@ -19,6 +19,7 @@ export default {
                 {
                     type: 'fieldSet',
                     title: '基本信息',
+                    collapsable: true,
                     controls: [
                         {
                             type: 'group',

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 {

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}