amis 1.4.0 → 1.4.1-echarts-5.3.1

package/src/renderers/Action.tsx

@@ -35,6 +35,10 @@ export interface ButtonSchema extends BaseSchema {
    * 右侧 icon 上的 css 类名
    */
   rightIconClassName?: SchemaClassName;
+  /**
+   * loading 上的css 类名
+   */
+  loadingClassName?: SchemaClassName;
 
   /**
    * 按钮文字
@@ -131,6 +135,10 @@ export interface ButtonSchema extends BaseSchema {
    * 键盘快捷键
    */
   hotKey?: string;
+  /**
+   * 是否显示loading效果
+   */
+  loadingOn?: string;
 }
 
 export interface AjaxActionSchema extends ButtonSchema {
@@ -416,44 +424,80 @@ export const createSyntheticEvent = <T extends Element, E extends Event>(
 export interface ActionProps
   extends Omit<
       ButtonSchema,
-      'className' | 'iconClassName' | 'rightIconClassName'
+      'className' | 'iconClassName' | 'rightIconClassName' | 'loadingClassName'
     >,
     ThemeProps,
     Omit<
       AjaxActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       UrlActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       LinkActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       DialogActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       DrawerActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       CopyActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       ReloadActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       EmailActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       OtherActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     > {
   actionType: any;
   onAction?: (
@@ -619,6 +663,7 @@ export class Action extends React.Component<ActionProps, ActionState> {
       iconClassName,
       rightIcon,
       rightIconClassName,
+      loadingClassName,
       primary,
       size,
       level,
@@ -638,7 +683,10 @@ export class Action extends React.Component<ActionProps, ActionState> {
       isMenuItem,
       active,
       activeLevel,
+      tooltipTrigger,
       tooltipContainer,
+      tooltipRootClose,
+      loading,
       classnames: cx
     } = this.props;
 
@@ -678,6 +726,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
             ? activeLevel
             : level || (primary ? 'primary' : undefined)
         }
+        loadingClassName={loadingClassName}
+        loading={loading}
         onClick={this.handleAction}
         type={type && ~allowedType.indexOf(type) ? type : 'button'}
         disabled={disabled}
@@ -685,12 +735,14 @@ export class Action extends React.Component<ActionProps, ActionState> {
         overrideClassName={isMenuItem}
         tooltip={filterContents(tooltip, data)}
         disabledTip={filterContents(disabledTip, data)}
-        placement={tooltipPlacement}
+        tooltipPlacement={tooltipPlacement}
         tooltipContainer={tooltipContainer}
+        tooltipTrigger={tooltipTrigger}
+        tooltipRootClose={tooltipRootClose}
         block={block}
         iconOnly={!!(icon && !label && level !== 'link')}
       >
-        {iconElement}
+        {!loading ? iconElement : ''}
         {label ? <span>{filter(String(label), data)}</span> : null}
         {rightIconElement}
       </Button>
@@ -736,13 +788,14 @@ export class ActionRenderer extends React.Component<
   }
 
   render() {
-    const {env, disabled, btnDisabled, ...rest} = this.props;
+    const {env, disabled, btnDisabled, loading, ...rest} = this.props;
 
     return (
       <Action
         {...(rest as any)}
         disabled={disabled || btnDisabled}
         onAction={this.handleAction}
+        loading={loading}
         isCurrentUrl={this.isCurrentAction}
         tooltipContainer={
           env.getModalContainer ? env.getModalContainer : undefined

package/src/renderers/DropDownButton.tsx

@@ -81,6 +81,10 @@ export interface DropdownButtonSchema extends BaseSchema {
    * 触发条件，默认是 click
    */
   trigger?: 'click' | 'hover';
+  /**
+   * 是否显示下拉按钮
+   */
+  hideCaret?: boolean;
 }
 
 export interface DropDownButtonProps
@@ -272,7 +276,8 @@ export default class DropDownButton extends React.Component<
       icon,
       isActived,
       trigger,
-      data
+      data,
+      hideCaret
     } = this.props;
 
     return (
@@ -325,9 +330,13 @@ export default class DropDownButton extends React.Component<
               )
             ) : null}
             {typeof label === 'string' ? filter(label, data) : label}
-            <span className={cx('DropDown-caret')}>
-              <Icon icon="caret" className="icon" />
-            </span>
+            {
+              !hideCaret
+              ? <span className={cx('DropDown-caret')} >
+                <Icon icon="caret" className="icon" />
+              </span>
+              : null
+            }
           </button>
         </TooltipWrapper>
         {this.state.isOpened ? this.renderOuter() : null}

package/src/renderers/Nav.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
+import Sortable from 'sortablejs';
 import {Renderer, RendererEnv, RendererProps} from '../factory';
 import getExprProperties from '../utils/filter-schema';
 import {filter, evalExpression} from '../utils/tpl';
 import {
+  guid,
   autobind,
   createObject,
   findTree,
@@ -22,6 +24,9 @@ import {
 } from '../components/WithRemoteConfig';
 import {Payload} from '../types';
 import Spinner from '../components/Spinner';
+import cloneDeep from 'lodash/cloneDeep';
+import {isEffectiveApi} from '../utils/api';
+import {Badge, BadgeSchema} from '../components/Badge';
 
 export type NavItemSchema = {
   /**
@@ -45,6 +50,11 @@ export type NavItemSchema = {
   deferApi?: SchemaApi;
 
   children?: Array<NavItemSchema>;
+
+  /**
+   * 角标
+   */
+  badge?: BadgeSchema
 } & Omit<BaseSchema, 'type'>;
 
 /**
@@ -81,6 +91,26 @@ export interface NavSchema extends BaseSchema {
    * true 为垂直排列，false 为水平排列类似如 tabs。
    */
   stacked?: boolean;
+
+  /**
+   * 更多操作菜单列表
+   */
+   itemActions?: SchemaCollection;
+
+  /**
+   * 可拖拽
+   */
+   draggable?: boolean;
+
+   /**
+    * 保存排序的 api
+    */
+  saveOrderApi?: SchemaApi;
+
+  /**
+   * 角标
+   */
+   badge?: BadgeSchema;
 }
 
 export interface Link {
@@ -97,6 +127,7 @@ export interface Link {
   loading?: boolean;
   loaded?: boolean;
   [propName: string]: any;
+  badge?: BadgeSchema
 }
 export interface Links extends Array<Link> {}
 
@@ -113,7 +144,9 @@ export interface NavigationProps
   togglerClassName?: string;
   links?: Array<Link>;
   loading?: boolean;
-  render: RendererProps['render']
+  render: RendererProps['render'];
+  env: RendererEnv;
+  reload?: any;
 }
 
 export class Navigation extends React.Component<
@@ -123,6 +156,9 @@ export class Navigation extends React.Component<
   static defaultProps = {
     indentSize: 24
   };
+  sortable: Sortable[] = [];
+  id: string;
+  dragRef?: HTMLElement;
 
   @autobind
   handleClick(link: Link) {
@@ -134,15 +170,85 @@ export class Navigation extends React.Component<
     this.props.onToggle?.(target);
   }
 
+  @autobind
+  dragRefFn(ref: any) {
+    const {draggable} = this.props;
+    if (ref && draggable) {
+      this.id = guid();
+      this.initDragging(ref);
+    }
+  }
+
+  initDragging(ref: HTMLElement) {
+    const ns = this.props.classPrefix;
+    this.sortable.push(new Sortable(
+      ref,
+      {
+        group: `nav-${this.id}`,
+        animation: 150,
+        handle: `.${ns}Nav-itemDrager`,
+        ghostClass: `${ns}Nav-item--dragging`,
+        onEnd: async (e: any) => {
+          // 没有移动
+          if (e.newIndex === e.oldIndex) {
+            return;
+          }
+          const id = e.item.getAttribute('data-id');
+          const parentNode = e.to
+          if (
+            e.newIndex < e.oldIndex &&
+            e.oldIndex < parentNode.childNodes.length - 1
+          ) {
+            parentNode.insertBefore(e.item, parentNode.childNodes[e.oldIndex + 1]);
+          } else if (e.oldIndex < parentNode.childNodes.length - 1) {
+            parentNode.insertBefore(e.item, parentNode.childNodes[e.oldIndex]);
+          } else {
+            parentNode.appendChild(e.item);
+          }
+          const links = cloneDeep(this.props.links) as Link[];
+          let parent = links;
+          someTree(links, (item: Link, key, level, paths: Link[]) => {
+            if (item.id === id) {
+              const len = paths.length - 1;
+              parent = (~len ? paths[len].children : links) as Link[];
+              return true;
+            }
+            return false;
+          });
+          parent.splice(e.newIndex, 0, parent.splice(e.oldIndex, 1)[0]);
+          const {saveOrderApi, env} = this.props;
+          if (saveOrderApi && isEffectiveApi(saveOrderApi)) {
+            await env.fetcher(saveOrderApi as SchemaApi, {data: links}, {method: 'post'});
+            this.props.reload();
+          } else {
+            console.warn('请配置saveOrderApi');
+          }
+        }
+      }
+    ));
+  }
+
   renderItem(link: Link, index: number, depth = 1) {
     if (link.hidden === true || link.visible === false) {
       return null;
     }
     const isActive: boolean = !!link.active;
-    const {disabled, togglerClassName, classnames: cx, indentSize} = this.props;
+    const {
+      disabled,
+      togglerClassName,
+      classnames: cx,
+      indentSize,
+      render,
+      itemActions,
+      draggable,
+      links,
+      badge: defaultBadge
+    } = this.props;
     const hasSub =
       (link.defer && !link.loaded) || (link.children && link.children.length);
-
+    const id = guid();
+    link.id = id;
+    const badge = defaultBadge ? Object.assign(defaultBadge, link.badge) : link.badge;
     return (
       <li
         key={index}
@@ -152,42 +258,62 @@ export class Navigation extends React.Component<
           'is-unfolded': link.unfolded,
           'has-sub': hasSub
         })}
+        data-id={id}
       >
-        <a
-          onClick={this.handleClick.bind(this, link)}
-          style={{paddingLeft: depth * (parseInt(indentSize as any, 10) ?? 24)}}
-        >
-          {generateIcon(cx, link.icon, 'Nav-itemIcon')}
+        <Badge classnames={cx} badge={badge} data={link}>
+          <a
+            onClick={this.handleClick.bind(this, link)}
+            style={{paddingLeft: depth * (parseInt(indentSize as any, 10) ?? 24)}}
+          >
+            {!disabled && draggable && links && links.length > 1 ? (
+            <div className={cx('Nav-itemDrager')} >
+              <a
+                key="drag"
+                data-position="bottom"
+              >
+                <Icon icon="drag-bar" className="icon" />
+              </a>
+            </div>
+          ) : null}
+            {link.loading ? (
+              <Spinner
+                size="sm"
+                show
+                icon="reload"
+                spinnerClassName={cx('Nav-spinner')}
+              />
+            ) : hasSub ? (
+              <span
+                onClick={() => this.toggleLink(link)}
+                className={cx('Nav-itemToggler', togglerClassName)}
+              >
+                <Icon icon="caret" className="icon" />
+              </span>
+            ) : null}
+            {generateIcon(cx, link.icon, 'Nav-itemIcon')}
+            {
+              link.label && (typeof link.label === 'string'
+              ? link.label
+              : render('inline', link.label as SchemaCollection))
+            }
+          </a>
           {
-            link.label && (typeof link.label === 'string'
-            ? link.label
-            : this.props.render('inline', link.label as SchemaCollection))
+            // 更多操作
+            itemActions
+            ? <div className={cx('Nav-item-atcions')}>
+              {
+                render('inline', itemActions, {data: link})
+              }
+            </div> : null
           }
-        </a>
-
-        {link.loading ? (
-          <Spinner
-            size="sm"
-            show
-            icon="reload"
-            spinnerClassName={cx('Nav-spinner')}
-          />
-        ) : hasSub ? (
-          <span
-            onClick={() => this.toggleLink(link)}
-            className={cx('Nav-itemToggler', togglerClassName)}
-          >
-            <Icon icon="caret" className="icon" />
-          </span>
-        ) : null}
-
-        {Array.isArray(link.children) && link.children.length ? (
-          <ul className={cx('Nav-subItems')}>
-            {link.children.map((link, index) =>
-              this.renderItem(link, index, depth + 1)
-            )}
-          </ul>
-        ) : null}
+          {Array.isArray(link.children) && link.children.length ? (
+            <ul className={cx('Nav-subItems')} ref={this.dragRefFn}>
+              {link.children.map((link, index) =>
+                this.renderItem(link, index, depth + 1)
+              )}
+            </ul>
+          ) : null}
+        </Badge>
       </li>
     );
   }
@@ -198,6 +324,7 @@ export class Navigation extends React.Component<
     return (
       <ul
         className={cx('Nav', className, stacked ? 'Nav--stacked' : 'Nav--tabs')}
+        ref={this.dragRefFn}
       >
         {Array.isArray(links)
           ? links.map((item, index) => this.renderItem(item, index))
@@ -310,6 +437,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
         data?: any;
         unfoldedField?: string;
         foldedField?: string;
+        reload?: any;
       }
   > {
     constructor(props: any) {
@@ -442,6 +570,7 @@ export class NavigationRenderer extends React.Component<RendererProps> {
     return (
       <ConditionBuilderWithRemoteOptions
         {...rest}
+        reload={this.reload}
         remoteConfigRef={this.remoteConfigRef}
       />
     );

package/src/renderers/Page.tsx

@@ -665,7 +665,7 @@ export default class Page extends React.Component<PageProps> {
       onAction: this.handleAction,
       onQuery: initApi ? this.handleQuery : undefined,
       onChange: this.handleChange,
-      loading: store.loading
+      pageLoading: store.loading
     };
 
     const hasAside = Array.isArray(regions)

package/src/utils/helper.ts

@@ -507,6 +507,7 @@ export function isDisabled(
   );
 }
 
+
 export function hasAbility(
   schema: any,
   ability: string,