chore: CRUD 调整方便外围覆盖

baidu · Dec 18, 2024 · 6539f49 · 6539f49
1 parent 856539e
commit 6539f49
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 92 deletions.
diff --git a/packages/amis-ui/scss/_mixins.scss b/packages/amis-ui/scss/_mixins.scss
@@ -661,7 +661,8 @@
     line-height: calc(
       var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
     );
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     font-size: var(--Pick-base-value-fontSize);
     color: var(--Pick-base-value-color);
     font-weight: var(--Pick-base-value-fontWeight);
@@ -682,9 +683,6 @@
       var(--Pick-base-top-right-border-radius)
       var(--Pick-base-bottom-right-border-radius)
       var(--Pick-base-bottom-left-border-radius);
-    margin-right: var(--gap-xs);
-    margin-bottom: var(--gap-xs);
-    margin-top: var(--gap-xs);
     max-width: px2rem(150px);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -696,15 +694,18 @@
 
     &.is-disabled {
       pointer-events: none;
-      opacity: var(--Button-onDisabled-opacity);
+
+      .#{$ns}#{$component-prefix}-valueIcon {
+        opacity: var(--Button-onDisabled-opacity);
+      }
     }
   }
 
   .#{$ns}#{$component-prefix}-valueIcon {
     color: var(--Pick-base-value-icon-color);
     cursor: pointer;
     border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
-    padding: 1px 5px;
+    padding: 0 5px;
 
     &:hover {
       background: var(--Pick-base-value-hover-icon-color);

diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss
@@ -179,6 +179,7 @@ $Table-strip-bg: transparent;
   --ButtonGroup-divider-width: #{px2rem(1px)};
   --ButtonGroup-divider-color: #fff;
   --ButtonGroup-borderWidth: var(--borders-width-2);
+  --Button-onDisabled-opacity: 0.3;
 
   --Breadcrumb-item-fontSize: var(--fontSizeMd);
   --Breadcrumb-item-default-color: var(--colors-neutral-text-5);

diff --git a/packages/amis-ui/scss/components/_crud.scss b/packages/amis-ui/scss/components/_crud.scss
@@ -9,6 +9,10 @@
 
   &-selection {
     margin-bottom: var(--gap-base);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-xs);
+    line-height: 1;
 
     &-overflow {
       &-wrapper {
@@ -25,6 +29,7 @@
           (var(--Picker-tag-height) + var(--Picker-tag-marginBottom)) * 5
         );
 
+        gap: var(--gap-xs);
         @include tag-item(Crud);
       }
     }

diff --git a/packages/amis-ui/scss/components/form/_picker.scss b/packages/amis-ui/scss/components/form/_picker.scss
@@ -71,7 +71,8 @@
     font-size: var(--Pick-base-placeholder-fontSize);
     font-weight: var(--Pick-base-placeholder-fontWeight);
     user-select: none;
-    position: absolute;
+    flex: 1;
+    min-width: 0;
     // margin-top: 2 * var(--Form-input-borderWidth);
     line-height: var(--Form-input-lineHeight);
     padding: var(--Pick-base-paddingTop) var(--Pick-base-paddingRight)
@@ -95,15 +96,15 @@
       var(--Pick-base-left-border-color);
   }
 
-  .#{$ns}Picker-values {
-    display: inline;
+  // .#{$ns}Picker-values {
+  //   display: inline;
 
-    .#{$ns}OverflowTpl {
-      .#{$ns}Picker-valueLabel {
-        pointer-events: auto;
-      }
-    }
-  }
+  //   .#{$ns}OverflowTpl {
+  //     .#{$ns}Picker-valueLabel {
+  //       pointer-events: auto;
+  //     }
+  //   }
+  // }
 
   &-valueWrap {
     flex-grow: 1;
@@ -117,8 +118,9 @@
   }
 
   .#{$ns}Picker-valueWrap {
-    margin-bottom: calc(var(--gap-xs) * -1);
-    line-height: 1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-xs);
   }
 
   /* tag 样式 */
@@ -176,6 +178,7 @@
         (var(--Picker-tag-height) + var(--Picker-tag-marginBottom)) * 5
       );
 
+      gap: var(--gap-xs);
       @include tag-item(Picker);
     }
   }

diff --git a/packages/amis/__tests__/renderers/Picker.test.tsx b/packages/amis/__tests__/renderers/Picker.test.tsx
@@ -296,13 +296,15 @@ describe('5. Renderer:Picker with overflowConfig', () => {
 
     await wait(500);
 
-    const tags = container.querySelector('.cxd-Picker-values');
+    const tags = container.querySelector('.cxd-Picker-valueWrap');
 
     expect(tags).toBeInTheDocument();
     /** tag 元素数量正确 */
-    expect(tags?.childElementCount).toEqual(3);
+    expect(tags?.childElementCount).toEqual(4); // 还有个 input
     /** 收纳标签文案正确 */
-    expect(tags?.lastElementChild).toHaveTextContent('+ 1 ...');
+    expect(tags?.lastElementChild?.previousSibling).toHaveTextContent(
+      '+ 1 ...'
+    );
   });
 
   test('5-2. Renderer:Picker embeded', async () => {

diff --git a/packages/amis/__tests__/renderers/__snapshots__/Picker.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Picker.test.tsx.snap
@@ -38,16 +38,6 @@ exports[`1. Renderer:Picker base 1`] = `
             >
               picker-placeholder
             </div>
-            <div
-              class="cxd-Picker-valueWrap"
-            >
-              <div
-                class="cxd-Picker-values"
-              />
-              <input
-                value=""
-              />
-            </div>
             <span
               class="cxd-Picker-btn"
             >
@@ -267,22 +257,18 @@ exports[`1. Renderer:Picker base 2`] = `
             class="cxd-Picker-valueWrap"
           >
             <div
-              class="cxd-Picker-values"
+              class="cxd-OverflowTpl cxd-Picker-value"
             >
-              <div
-                class="cxd-OverflowTpl cxd-Picker-value"
+              <span
+                class="cxd-Picker-valueIcon"
               >
-                <span
-                  class="cxd-Picker-valueIcon"
-                >
-                  ×
-                </span>
-                <span
-                  class="cxd-Picker-valueLabel"
-                >
-                  B
-                </span>
-              </div>
+                ×
+              </span>
+              <span
+                class="cxd-Picker-valueLabel"
+              >
+                B
+              </span>
             </div>
             <input
               value=""

diff --git a/packages/amis/src/renderers/CRUD.tsx b/packages/amis/src/renderers/CRUD.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import isEqual from 'lodash/isEqual';
 import pickBy from 'lodash/pickBy';
 import omitBy from 'lodash/omitBy';
+import partition from 'lodash/partition';
 import {
   Renderer,
   RendererProps,
@@ -45,7 +46,8 @@ import {
   SchemaName,
   SchemaObject,
   SchemaTokenizeableString,
-  SchemaTpl
+  SchemaTpl,
+  SchemaCollection
 } from '../Schema';
 import {ActionSchema} from './Action';
 import {CardsSchema} from './Cards';
@@ -252,6 +254,13 @@ export interface CRUDCommonSchema extends BaseSchema, SpinnerExtraProps {
    */
   syncLocation?: boolean;
 
+  toolbar?: SchemaCollection;
+
+  /**
+   * 工具栏是否为 inline 模式
+   */
+  toolbarInline?: boolean;
+
   /**
    * 顶部工具栏
    */
@@ -435,7 +444,7 @@ const INNER_EVENTS: Array<CRUDRendererEvent> = [
   'selected'
 ];
 
-export default class CRUD extends React.Component<CRUDProps, any> {
+export default class CRUD<T extends CRUDProps> extends React.Component<T, any> {
   static propsList: Array<keyof CRUDProps> = [
     'bulkActions',
     'itemActions',
@@ -528,7 +537,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     omitBy(onEvent, (event, key: any) => !INNER_EVENTS.includes(key))
   );
 
-  constructor(props: CRUDProps) {
+  constructor(props: T) {
     super(props);
 
     this.controlRef = this.controlRef.bind(this);
@@ -811,6 +820,11 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       const redirect = action.redirect && filter(action.redirect, data);
       redirect && action.blank && env.jumpTo(redirect, action, data);
 
+      // 如果 api 无效，或者不满足发送条件，则直接返回
+      if (!isEffectiveApi(action.api, data)) {
+        return;
+      }
+
       return store
         .saveRemote(action.api!, data, {
           successMessage:
@@ -977,7 +991,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   handleFilterInit(values: object) {
     const {defaultParams, data, store, orderBy, orderDir, dispatchEvent} =
       this.props;
-    const params = {...defaultParams};
+    const params: any = {...defaultParams};
 
     if (orderBy) {
       params['orderBy'] = orderBy;
@@ -1967,11 +1981,14 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   }
 
   clearSelection() {
-    const {store} = this.props;
-    const selected = store.selectedItems.concat();
-    const unSelected = store.unSelectedItems.concat(selected);
+    const {store, itemCheckableOn} = this.props;
+    const [unchecked, checked] = partition(
+      store.selectedItems,
+      item => !itemCheckableOn || evalExpression(itemCheckableOn, item)
+    );
+    const unSelected = store.unSelectedItems.concat(unchecked);
 
-    store.setSelectedItems([]);
+    store.setSelectedItems(checked);
     store.setUnSelectedItems(unSelected);
   }
 
@@ -2468,12 +2485,12 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     if (toolbar) {
       if (Array.isArray(headerToolbar)) {
         headerToolbar = toolbarInline
-          ? headerToolbar.concat(toolbar)
-          : [headerToolbar, toolbar];
+          ? headerToolbar.concat(toolbar as any)
+          : ([headerToolbar, toolbar] as any);
       } else if (headerToolbar) {
-        headerToolbar = [headerToolbar, toolbar];
+        headerToolbar = [headerToolbar, toolbar] as any;
       } else {
-        headerToolbar = toolbar;
+        headerToolbar = toolbar as any;
       }
     }
 
@@ -2493,13 +2510,15 @@ export default class CRUD extends React.Component<CRUDProps, any> {
 
     if (toolbar) {
       if (Array.isArray(footerToolbar)) {
-        footerToolbar = toolbarInline
-          ? footerToolbar.concat(toolbar)
-          : [footerToolbar, toolbar];
+        footerToolbar = (
+          toolbarInline
+            ? footerToolbar.concat(toolbar as any)
+            : [footerToolbar, toolbar]
+        ) as any;
       } else if (footerToolbar) {
-        footerToolbar = [footerToolbar, toolbar];
+        footerToolbar = [footerToolbar, toolbar] as any;
       } else {
-        footerToolbar = toolbar;
+        footerToolbar = toolbar as any;
       }
     }
 
@@ -2514,11 +2533,19 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       primaryField,
       valueField,
       translate: __,
-      env
+      env,
+      itemCheckableOn
     } = this.props;
 
+    const checkable = itemCheckableOn
+      ? evalExpression(itemCheckableOn, item)
+      : true;
+
     return (
-      <div key={index} className={cx(`Crud-value`)}>
+      <div
+        key={index}
+        className={cx(`Crud-value`, checkable ? '' : 'is-disabled')}
+      >
         <span
           className={cx('Crud-valueIcon')}
           onClick={this.unSelectItem.bind(this, item, index)}
@@ -2804,15 +2831,10 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   }
 }
 
-@Renderer({
-  type: 'crud',
-  storeType: CRUDStore.name,
-  isolateScope: true
-})
-export class CRUDRenderer extends CRUD {
+export class CRUDRendererBase<T extends CRUDProps> extends CRUD<T> {
   static contextType = ScopedContext;
 
-  constructor(props: CRUDProps, context: IScopedContext) {
+  constructor(props: T, context: IScopedContext) {
     super(props);
 
     const scoped = context;
@@ -2908,3 +2930,10 @@ export class CRUDRenderer extends CRUD {
     return store.getData(data);
   }
 }
+
+@Renderer({
+  type: 'crud',
+  storeType: CRUDStore.name,
+  isolateScope: true
+})
+export class CRUDRenderer extends CRUDRendererBase<CRUDProps> {}