chore: CRUD 调整方便外围覆盖

baidu · Dec 18, 2024 · 04ffb90 · 04ffb90
1 parent 856539e
commit 04ffb90
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 65 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/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> {}
diff --git a/packages/amis/src/renderers/Form/Picker.tsx b/packages/amis/src/renderers/Form/Picker.tsx
@@ -157,13 +157,13 @@ export default class PickerControl extends React.PureComponent<
         placement: 'top',
         trigger: 'hover',
         showArrow: false,
-        offset: [0, -10]
+        offset: [0, -5]
       },
       overflowTagPopoverInCRUD: {
         placement: 'bottom',
         trigger: 'hover',
         showArrow: false,
-        offset: [0, 10]
+        offset: [0, 0]
       }
     }
   };
@@ -641,7 +641,7 @@ export default class PickerControl extends React.PureComponent<
     }
 
     return (
-      <div className={`${ns}Picker-values`}>
+      <>
         {tags.map((item, index) => {
           if (enableOverflow && index === maxTagCount) {
             return (
@@ -697,7 +697,7 @@ export default class PickerControl extends React.PureComponent<
 
           return this.renderTag(item, index);
         })}
-      </div>
+      </>
     );
   }
 
@@ -804,24 +804,24 @@ export default class PickerControl extends React.PureComponent<
                 <div className={cx('Picker-placeholder')}>
                   {__(placeholder)}
                 </div>
-              ) : null}
-
-              <div
-                className={cx('Picker-valueWrap')}
-                {...testIdBuilder?.getTestId()}
-              >
-                {this.renderValues()}
-
-                <input
-                  onChange={noop}
-                  value={''}
-                  ref={this.input}
-                  onKeyDown={this.handleKeyDown}
-                  onClick={this.handleFocus}
-                  onBlur={this.handleBlur}
-                  readOnly={mobileUI}
-                />
-              </div>
+              ) : (
+                <div
+                  className={cx('Picker-valueWrap')}
+                  {...testIdBuilder?.getTestId()}
+                >
+                  {this.renderValues()}
+
+                  <input
+                    onChange={noop}
+                    value={''}
+                    ref={this.input}
+                    onKeyDown={this.handleKeyDown}
+                    onClick={this.handleFocus}
+                    onBlur={this.handleBlur}
+                    readOnly={mobileUI}
+                  />
+                </div>
+              )}
 
               {clearable && !disabled && selectedOptions.length ? (
                 <a onClick={this.clearValue} className={cx('Picker-clear')}>