list 模式支持按钮在左侧 & 修复 multiple 透传问题 (#1543)

* list 模式支持按钮在左侧 & 修复 multiple 透传问题

* 补充属性表

docs/zh-CN/components/list.md

@@ -95,3 +95,4 @@ order: 56
 | listItem.desc            | [模板](../../docs/concepts/template) |                       | 描述                                                                         |
 | listItem.body            | `Array`                              |                       | 内容容器，主要用来放置非表单项组件                                           |
 | listItem.actions         | Array<[Action](./action)>            |                       | 按钮区域                                                                     |
+| listItem.actionsPosition | 'left' or 'right'                    | 默认在右侧            | 按钮位置                                                                     |

scss/components/_list.scss

@@ -165,6 +165,11 @@
     float: right;
   }
 
+  &--actions-at-left &-actions {
+    float: left;
+    margin-right: var(--gap-base);
+  }
+
   &-title {
     margin: 0;
     padding: 0;

src/renderers/Card.tsx

@@ -173,7 +173,6 @@ export class Card extends React.Component<CardProps> {
   };
 
   static propsList: Array<string> = [
-    'multiple',
     'avatarClassName',
     'bodyClassName',
     'actionsCount',
@@ -553,7 +552,9 @@ export class Card extends React.Component<CardProps> {
   test: /(^|\/)card$/,
   name: 'card'
 })
-export class CardRenderer extends Card {}
+export class CardRenderer extends Card {
+  static propsList = ['multiple', ...Card.propsList];
+}
 
 @Renderer({
   test: /(^|\/)card-item-field$/,

src/renderers/List.tsx

@@ -76,6 +76,11 @@ export type ListBodyField = SchemaObject & ListBodyFieldObject;
 export interface ListItemSchema extends Omit<BaseSchema, 'type'> {
   actions?: Array<ActionSchema>;
 
+  /**
+   * 操作位置，默认在右侧，可以设置成左侧。
+   */
+  actionsPosition?: 'left' | 'right';
+
   /**
    * 图片地址
    */
@@ -1240,7 +1245,8 @@ export class ListItem extends React.Component<ListItemProps> {
       checkOnItemClick,
       render,
       checkable,
-      classnames: cx
+      classnames: cx,
+      actionsPosition
     } = this.props;
 
     const avatar = filter(avatarTpl, data);
@@ -1251,7 +1257,10 @@ export class ListItem extends React.Component<ListItemProps> {
     return (
       <div
         onClick={checkOnItemClick && checkable ? this.handleClick : undefined}
-        className={cx('ListItem', className)}
+        className={cx(
+          `ListItem ListItem--actions-at-${actionsPosition || 'right'}`,
+          className
+        )}
       >
         {this.renderLeft()}
         {this.renderRight()}
@@ -1281,7 +1290,9 @@ export class ListItem extends React.Component<ListItemProps> {
   test: /(^|\/)(?:list|list-group)\/(?:.*\/)?list-item$/,
   name: 'list-item'
 })
-export class ListItemRenderer extends ListItem {}
+export class ListItemRenderer extends ListItem {
+  static propsList = ['multiple', ...ListItem.propsList];
+}
 
 @Renderer({
   test: /(^|\/)list-item-field$/,