amis 1.3.5-beta.7 → 1.4.2-beta.11

package/src/renderers/Nav.tsx

@@ -1,20 +1,29 @@
 import React from 'react';
+import {findDOMNode} from 'react-dom';
 import {Renderer, RendererEnv, RendererProps} from '../factory';
 import getExprProperties from '../utils/filter-schema';
 import {filter, evalExpression} from '../utils/tpl';
 import {
+  guid,
   autobind,
   createObject,
   findTree,
   isUnfolded,
   mapTree,
   someTree,
-  spliceTree
+  spliceTree,
+  findTreeIndex
 } from '../utils/helper';
 import {ScopedContext, IScopedContext} from '../Scoped';
 import {themeable, ThemeProps} from '../theme';
 import {Icon} from '../components/icons';
-import {BaseSchema, SchemaApi, SchemaIcon, SchemaUrlPath, SchemaCollection} from '../Schema';
+import {
+  BaseSchema,
+  SchemaApi,
+  SchemaIcon,
+  SchemaUrlPath,
+  SchemaCollection
+} from '../Schema';
 import {generateIcon} from '../utils/icon';
 import {
   RemoteOptionsProps,
@@ -22,6 +31,8 @@ import {
 } from '../components/WithRemoteConfig';
 import {Payload} from '../types';
 import Spinner from '../components/Spinner';
+import {isEffectiveApi} from '../utils/api';
+import {Badge, BadgeSchema} from '../components/Badge';
 
 export type NavItemSchema = {
   /**
@@ -81,6 +92,31 @@ export interface NavSchema extends BaseSchema {
    * true 为垂直排列，false 为水平排列类似如 tabs。
    */
   stacked?: boolean;
+
+  /**
+   * 更多操作菜单列表
+   */
+  itemActions?: SchemaCollection;
+
+  /**
+   * 可拖拽
+   */
+  draggable?: boolean;
+
+  /**
+   * 保存排序的 api
+   */
+  saveOrderApi?: SchemaApi;
+
+  /**
+   * 角标
+   */
+  itemBadge?: BadgeSchema;
+
+  /**
+   * 仅允许同层级拖拽
+   */
+  dragOnSameLevel?: boolean;
 }
 
 export interface Link {
@@ -97,23 +133,44 @@ export interface Link {
   loading?: boolean;
   loaded?: boolean;
   [propName: string]: any;
+  itemBadge?: BadgeSchema;
 }
 export interface Links extends Array<Link> {}
 
 export interface NavigationState {
-  links: Links;
+  links?: Links;
   error?: string;
+  dropIndicator?: {
+    top: number;
+    left: number;
+    width: number;
+    height?: number;
+    opacity?: number;
+  };
 }
 
 export interface NavigationProps
   extends ThemeProps,
     Omit<NavSchema, 'type' | 'className'> {
   onSelect?: (item: Link) => void | false;
-  onToggle?: (item: Link) => void;
+  onToggle?: (item: Link, forceFold?: boolean) => void;
+  onDragUpdate?: (dropInfo: IDropInfo) => void;
   togglerClassName?: string;
   links?: Array<Link>;
   loading?: boolean;
-  render: RendererProps['render']
+  render: RendererProps['render'];
+  env: RendererEnv;
+  data: Object;
+  reload?: any;
+}
+
+export interface IDropInfo {
+  dragLink: Link | null;
+  nodeId: string;
+  position: string;
+  rect: DOMRect;
+  height: number;
+  left: number;
 }
 
 export class Navigation extends React.Component<
@@ -124,14 +181,173 @@ export class Navigation extends React.Component<
     indentSize: 24
   };
 
+  dragNode: {
+    node: HTMLElement;
+    link: Link | null;
+  } | null;
+  dropInfo: IDropInfo | null;
+  startPoint: {
+    y: number;
+    x: number;
+  } = {
+    y: 0,
+    x: 0
+  };
+  state: NavigationState = {};
+
   @autobind
   handleClick(link: Link) {
-    this.props.onSelect?.(link);
+    const {env, onSelect} = this.props;
+    // 和 action 里命名一致方便分析
+    if (link && link.to) {
+      env?.tracker({
+        eventType: 'link',
+        eventData: {
+          label: link.label,
+          link: link.to
+        }
+      });
+    }
+
+    onSelect?.(link);
   }
 
   @autobind
-  toggleLink(target: Link) {
-    this.props.onToggle?.(target);
+  toggleLink(target: Link, forceFold?: boolean) {
+    this.props.onToggle?.(target, forceFold);
+  }
+
+  @autobind
+  getDropInfo(e: DragEvent, id: string, depth: number): IDropInfo {
+    const {dragOnSameLevel, indentSize} = this.props;
+    let rect = (e.target as HTMLElement).getBoundingClientRect();
+    const dragLink = this.dragNode?.link as Link;
+    const {top, height, width} = rect;
+    let {clientY, clientX} = e;
+    const left = depth * (parseInt(indentSize as any, 10) ?? 24);
+    const deltaX = left + width * 0.2;
+    let position;
+    if (clientY >= top + height / 2) {
+      position = 'bottom';
+    } else {
+      position = 'top';
+    }
+    if (
+      !dragOnSameLevel &&
+      position === 'bottom' &&
+      clientX >= this.startPoint.x + deltaX
+    ) {
+      position = 'self';
+    }
+    return {
+      nodeId: id,
+      dragLink,
+      position,
+      rect,
+      height,
+      left
+    };
+  }
+  @autobind
+  updateDropIndicator(e: DragEvent) {
+    const {dragOnSameLevel} = this.props;
+    const target = e.target as HTMLElement; // a标签
+    const targetId = target.getAttribute('data-id') as string;
+    const targetDepth = Number(target.getAttribute('data-depth'));
+    if (
+      dragOnSameLevel &&
+      this.dragNode?.node.parentElement !== target.parentElement?.parentElement
+    ) {
+      this.setState({dropIndicator: undefined});
+      this.dropInfo = null;
+      return;
+    }
+    this.dropInfo = this.getDropInfo(e, targetId, targetDepth);
+    let {position, rect, dragLink, height, left} = this.dropInfo;
+    if (targetId === dragLink?.__id) {
+      this.setState({dropIndicator: undefined});
+      this.dropInfo = null;
+      return;
+    }
+    const ul = (findDOMNode(this) as HTMLElement).firstChild as HTMLElement;
+    if (position === 'self') {
+      this.setState({
+        dropIndicator: {
+          top: rect.top - ul.getBoundingClientRect().top,
+          left,
+          width: ul.getBoundingClientRect().width - left,
+          height,
+          opacity: 0.2
+        }
+      });
+    } else {
+      this.setState({
+        dropIndicator: {
+          top:
+            (position === 'bottom' ? rect.top + rect.height : rect.top) -
+            ul.getBoundingClientRect().top,
+          left,
+          width: ul.getBoundingClientRect().width - left
+        }
+      });
+    }
+  }
+
+  @autobind
+  handleDragStart(link: Link) {
+    return (e: React.DragEvent) => {
+      e.stopPropagation();
+      const currentTarget = e.currentTarget as HTMLElement;
+      e.dataTransfer.effectAllowed = 'copyMove';
+      e.dataTransfer.setDragImage(currentTarget, 0, 0);
+      this.dragNode = {
+        node: currentTarget,
+        link: link
+      };
+      this.dropInfo = null;
+      this.startPoint = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      currentTarget.addEventListener('dragend', this.handleDragEnd);
+      document.body.addEventListener('dragover', this.handleDragOver);
+    };
+  }
+
+  @autobind
+  handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!this.dragNode) {
+      return;
+    }
+    const target = e.target as HTMLElement;
+    const id = target.getAttribute('data-id');
+    if (!id) {
+      return;
+    }
+    this.updateDropIndicator(e);
+  }
+
+  @autobind
+  handleDragEnd(e: DragEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.setState({
+      dropIndicator: undefined
+    });
+    const currentTarget = e.currentTarget as HTMLElement;
+    const id = currentTarget.getAttribute('data-id');
+    let nodeId = this.dropInfo?.nodeId;
+    if (!this.dropInfo || !nodeId || id === nodeId) {
+      return;
+    }
+    currentTarget.removeEventListener('dragend', this.handleDragEnd);
+    document.body.removeEventListener('dragover', this.handleDragOver);
+
+    this.props.onDragUpdate?.(this.dropInfo);
+    this.dragNode = null;
+    this.dropInfo = null;
   }
 
   renderItem(link: Link, index: number, depth = 1) {
@@ -139,72 +355,122 @@ export class Navigation extends React.Component<
       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,
+      itemBadge,
+      data: defaultData
+    } = this.props;
     const hasSub =
       (link.defer && !link.loaded) || (link.children && link.children.length);
-
     return (
       <li
-        key={index}
+        key={link.__id}
+        data-id={link.__id}
         className={cx('Nav-item', link.className, {
           'is-disabled': disabled || link.disabled || link.loading,
           'is-active': isActive,
           'is-unfolded': link.unfolded,
           'has-sub': hasSub
         })}
+        onDragStart={this.handleDragStart(link)}
       >
-        <a
-          onClick={this.handleClick.bind(this, link)}
-          style={{paddingLeft: depth * (parseInt(indentSize as any, 10) ?? 24)}}
+        <Badge
+          classnames={cx}
+          badge={itemBadge}
+          data={createObject(defaultData, link)}
         >
-          {generateIcon(cx, link.icon, 'Nav-itemIcon')}
+          <a
+            data-id={link.__id}
+            data-depth={depth}
+            onClick={this.handleClick.bind(this, link)}
+            style={{
+              paddingLeft: depth * (parseInt(indentSize as any, 10) ?? 24)
+            }}
+          >
+            {!disabled && draggable ? (
+              <div
+                className={cx('Nav-itemDrager')}
+                draggable
+                onMouseDown={e => {
+                  this.toggleLink(link, true);
+                  e.stopPropagation();
+                }}
+              >
+                <Icon icon="drag-bar" className="icon" />
+              </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: createObject(defaultData, 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')}>
+              {link.children.map((link, index) =>
+                this.renderItem(link, index, depth + 1)
+              )}
+            </ul>
+          ) : null}
+        </Badge>
       </li>
     );
   }
 
   render(): JSX.Element {
     const {className, stacked, classnames: cx, links, loading} = this.props;
-
+    const {dropIndicator} = this.state;
     return (
-      <ul
-        className={cx('Nav', className, stacked ? 'Nav--stacked' : 'Nav--tabs')}
-      >
-        {Array.isArray(links)
-          ? links.map((item, index) => this.renderItem(item, index))
-          : null}
-
-        <Spinner show={!!loading} overlay icon="reload" />
-      </ul>
+      <div className={cx('Nav')}>
+        <ul
+          className={cx(
+            'Nav-list',
+            className,
+            stacked ? 'Nav-list--stacked' : 'Nav-list--tabs'
+          )}
+        >
+          {Array.isArray(links)
+            ? links.map((item, index) => this.renderItem(item, index))
+            : null}
+
+          <Spinner show={!!loading} overlay icon="reload" />
+        </ul>
+        {dropIndicator ? (
+          <div className={cx('Nav-dropIndicator')} style={dropIndicator} />
+        ) : null}
+      </div>
     );
   }
 }
@@ -218,7 +484,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
       : config.links || config.options || config.items || config.rows;
 
     if (!Array.isArray(links)) {
-      throw new Error('payload.data.options is not array.');
+      throw new Error('payload.data.options is not array.');
     }
 
     return links;
@@ -253,7 +519,8 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
                     link.hasOwnProperty('to') &&
                     env &&
                     env.isCurrentUrl(filter(link.to as string, data))
-                  ))
+                  )),
+            __id: link.__id || guid()
           };
 
           item.unfolded =
@@ -310,12 +577,14 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
         data?: any;
         unfoldedField?: string;
         foldedField?: string;
+        reload?: any;
       }
   > {
     constructor(props: any) {
       super(props);
       this.toggleLink = this.toggleLink.bind(this);
       this.handleSelect = this.handleSelect.bind(this);
+      this.dragUpdate = this.dragUpdate.bind(this);
     }
 
     componentDidMount() {
@@ -332,7 +601,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
       }
     }
 
-    toggleLink(target: Link) {
+    toggleLink(target: Link, forceFold?: boolean) {
       const {config, updateConfig, deferLoad} = this.props;
 
       if (target.defer && !target.loaded) {
@@ -343,7 +612,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
             target === link
               ? {
                   ...link,
-                  unfolded: !link.unfolded
+                  unfolded: forceFold ? false : !link.unfolded
                 }
               : link
           ),
@@ -352,6 +621,69 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
       }
     }
 
+    async dragUpdate(dropInfo: IDropInfo) {
+      let links = this.props.config;
+      const {nodeId, dragLink, position} = dropInfo;
+      if (dragLink) {
+        // 删除原节点
+        const sourceIdx = findTreeIndex(
+          links,
+          link => link.__id === dragLink.__id
+        ) as number[];
+        links = spliceTree(links, sourceIdx, 1);
+
+        if (position === 'self') {
+          // 插入到对应节点的children中
+          mapTree(links, link => {
+            if (link.__id === nodeId) {
+              if (!link.children) {
+                link.children = [];
+              }
+              link.children.push(dragLink);
+            }
+            return link;
+          });
+        } else {
+          // 找到需要插入的节点
+          const idx = findTreeIndex(
+            links,
+            link => link.__id === nodeId
+          ) as number[];
+          // 插入节点之后
+          if (position === 'bottom') {
+            idx.push((idx.pop() as number) + 1);
+          }
+          links = spliceTree(links, idx, 0, dragLink);
+        }
+      }
+      this.props.updateConfig(links, 'update');
+      await this.saveOrder(
+        mapTree(links, (link: Link) => {
+          // 清除内部加的字段
+          for (let key in link) {
+            if (/^__.*$/.test(key)) {
+              delete link[key];
+            }
+          }
+          return link;
+        })
+      );
+    }
+
+    async saveOrder(links: Links) {
+      const {saveOrderApi, env, data, reload} = this.props;
+      if (saveOrderApi && isEffectiveApi(saveOrderApi)) {
+        await env.fetcher(
+          saveOrderApi as SchemaApi,
+          createObject(data, {data: links}),
+          {method: 'post'}
+        );
+        reload();
+      } else {
+        env.alert('NAV saveOrderApi is required!');
+      }
+    }
+
     handleSelect(link: Link) {
       const {onSelect, env, data} = this.props;
       if (onSelect && onSelect(link) === false) {
@@ -372,15 +704,15 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
 
     render() {
       const {loading, config, deferLoad, updateConfig, ...rest} = this.props;
-
       return (
         <ThemedNavigation
           {...rest}
           loading={loading}
-          links={config || rest.links || []}
+          links={config || []}
           disabled={loading}
           onSelect={this.handleSelect}
           onToggle={this.toggleLink}
+          onDragUpdate={this.dragUpdate}
         />
       );
     }
@@ -438,10 +770,10 @@ export class NavigationRenderer extends React.Component<RendererProps> {
 
   render() {
     const {...rest} = this.props;
-
     return (
       <ConditionBuilderWithRemoteOptions
         {...rest}
+        reload={this.reload}
         remoteConfigRef={this.remoteConfigRef}
       />
     );

package/src/renderers/Page.tsx

@@ -371,6 +371,8 @@ export default class Page extends React.Component<PageProps> {
       JSON.stringify(props.cssVars) !== JSON.stringify(prevProps.cssVars)
     ) {
       this.updateVarStyle();
+    } else if (props.defaultData !== prevProps.defaultData) {
+      store.reInitData(props.defaultData);
     }
   }
 
@@ -663,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)