Merge pull request #1089 from 2betop/master

Collapse 调整

scss/components/_collapse.scss

@@ -47,6 +47,8 @@
   &--title-bottom &-header {
     text-align: center;
     color: $link-color;
+    border-left: none;
+    font-size: $fontSizeBase;
   }
 
   &--title-bottom &-arrow:before {

scss/components/form/_group.scss

@@ -12,9 +12,8 @@
 
     &--hor {
       display: flex;
-      flex-wrap: nowrap;
-      margin-left: -$Form-group-gutterWidth / 2;
-      margin-right: -$Form-group-gutterWidth / 2;
+      flex-wrap: wrap;
+      margin: -$Form-group-gutterWidth / 2;
       align-items: flex-start;
 
       &.v-middle {
@@ -26,8 +25,7 @@
       }
 
       > * {
-        padding-left: $Form-group-gutterWidth / 2;
-        padding-right: $Form-group-gutterWidth / 2;
+        padding: $Form-group-gutterWidth / 2;
       }
 
       > .#{$ns}Form-item--inline {
@@ -45,42 +43,34 @@
     }
 
     &--lg {
-      margin-left: -$Form-group--lg-gutterWidth / 2;
-      margin-right: -$Form-group--lg-gutterWidth / 2;
+      margin: -$Form-group--lg-gutterWidth / 2;
 
       > * {
-        padding-left: $Form-group--lg-gutterWidth / 2;
-        padding-right: $Form-group--lg-gutterWidth / 2;
+        padding: $Form-group--lg-gutterWidth / 2;
       }
     }
 
     &--md {
-      margin-left: -$Form-group--md-gutterWidth / 2;
-      margin-right: -$Form-group--md-gutterWidth / 2;
+      margin: -$Form-group--md-gutterWidth / 2;
 
       > * {
-        padding-left: $Form-group--md-gutterWidth / 2;
-        padding-right: $Form-group--md-gutterWidth / 2;
+        padding: $Form-group--md-gutterWidth / 2;
       }
     }
 
     &--sm {
-      margin-left: -$Form-group--sm-gutterWidth / 2;
-      margin-right: -$Form-group--sm-gutterWidth / 2;
+      margin: -$Form-group--sm-gutterWidth / 2;
 
       > * {
-        padding-left: $Form-group--sm-gutterWidth / 2;
-        padding-right: $Form-group--sm-gutterWidth / 2;
+        padding: $Form-group--sm-gutterWidth / 2;
       }
     }
 
     &--xs {
-      margin-left: -$Form-group--xs-gutterWidth / 2;
-      margin-right: -$Form-group--xs-gutterWidth / 2;
+      margin: -$Form-group--xs-gutterWidth / 2;
 
       > * {
-        padding-left: $Form-group--xs-gutterWidth / 2;
-        padding-right: $Form-group--xs-gutterWidth / 2;
+        padding: $Form-group--xs-gutterWidth / 2;
       }
     }
   }

src/renderers/Collapse.tsx

@@ -139,6 +139,7 @@ export default class Collapse extends React.Component<
       headingClassName,
       children,
       titlePosition,
+      title,
       collapseTitle,
       body,
       bodyClassName,
@@ -147,7 +148,41 @@ export default class Collapse extends React.Component<
       translate: __
     } = this.props;
     // 默认给个 title，不然没法点
-    const title = this.props.title || 'Collapse';
+    const finalTitle = this.state.collapsed ? title : collapseTitle || title;
+
+    let dom = [
+      finalTitle ? (
+        <HeadingComponent
+          key="title"
+          onClick={this.toggleCollapsed}
+          className={cx(`Collapse-header`, headingClassName)}
+        >
+          {render('heading', finalTitle)}
+          {collapsable && <span className={cx('Collapse-arrow')} />}
+        </HeadingComponent>
+      ) : null,
+
+      <BasicCollapse
+        show={collapsable ? !this.state.collapsed : true}
+        classnames={cx}
+        classPrefix={ns}
+        key="body"
+      >
+        <div className={cx(`Collapse-body`, bodyClassName)}>
+          {children
+            ? typeof children === 'function'
+              ? children(this.props)
+              : children
+            : body
+            ? render('body', body)
+            : null}
+        </div>
+      </BasicCollapse>
+    ];
+
+    if (titlePosition === 'bottom') {
+      dom.reverse();
+    }
 
     return (
       <WrapperComponent
@@ -162,45 +197,7 @@ export default class Collapse extends React.Component<
           className
         )}
       >
-        {titlePosition === 'top' ? (
-          <HeadingComponent
-            onClick={this.toggleCollapsed}
-            className={cx(`Collapse-header`, headingClassName)}
-          >
-            {this.state.collapsed
-              ? render('heading', title)
-              : render('heading', collapseTitle || title)}
-            {collapsable && <span className={cx('Collapse-arrow')} />}
-          </HeadingComponent>
-        ) : null}
-
-        <BasicCollapse
-          show={collapsable ? !this.state.collapsed : true}
-          classnames={cx}
-          classPrefix={ns}
-        >
-          <div className={cx(`Collapse-body`, bodyClassName)}>
-            {children
-              ? typeof children === 'function'
-                ? children(this.props)
-                : children
-              : body
-              ? render('body', body)
-              : null}
-          </div>
-        </BasicCollapse>
-
-        {titlePosition === 'bottom' ? (
-          <div
-            className={cx(`Collapse-header`, headingClassName)}
-            onClick={this.toggleCollapsed}
-          >
-            {this.state.collapsed
-              ? render('heading', title)
-              : render('heading', collapseTitle || title)}
-            {collapsable && <span className={cx('Collapse-arrow')} />}
-          </div>
-        ) : null}
+        {dom}
       </WrapperComponent>
     );
   }

src/renderers/Form/FieldSet.tsx

@@ -117,7 +117,7 @@ export default class FieldSetControl extends React.Component<
         className={className}
         children={this.renderBody}
         wrapperComponent="fieldset"
-        headingComponent="legend"
+        headingComponent={rest.titlePosition === 'bottom' ? 'div' : 'legend'}
       />
     );
   }