amis 1.4.1 → 1.4.2-beta.13

package/src/renderers/Nav.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Sortable from 'sortablejs';
+import {findDOMNode} from 'react-dom';
 import {Renderer, RendererEnv, RendererProps} from '../factory';
 import getExprProperties from '../utils/filter-schema';
 import {filter, evalExpression} from '../utils/tpl';
@@ -11,12 +11,19 @@ import {
   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,
@@ -24,7 +31,6 @@ 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';
 
@@ -50,11 +56,6 @@ export type NavItemSchema = {
   deferApi?: SchemaApi;
 
   children?: Array<NavItemSchema>;
-
-  /**
-   * 角标
-   */
-  badge?: BadgeSchema
 } & Omit<BaseSchema, 'type'>;
 
 /**
@@ -95,22 +96,27 @@ export interface NavSchema extends BaseSchema {
   /**
    * 更多操作菜单列表
    */
-   itemActions?: SchemaCollection;
+  itemActions?: SchemaCollection;
 
   /**
    * 可拖拽
    */
-   draggable?: boolean;
+  draggable?: boolean;
 
-   /**
-    * 保存排序的 api
-    */
+  /**
+   * 保存排序的 api
+   */
   saveOrderApi?: SchemaApi;
 
   /**
    * 角标
    */
-   badge?: BadgeSchema;
+  itemBadge?: BadgeSchema;
+
+  /**
+   * 仅允许同层级拖拽
+   */
+  dragOnSameLevel?: boolean;
 }
 
 export interface Link {
@@ -127,28 +133,46 @@ export interface Link {
   loading?: boolean;
   loaded?: boolean;
   [propName: string]: any;
-  badge?: BadgeSchema
+  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'];
   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<
   NavigationProps,
   NavigationState
@@ -156,76 +180,174 @@ export class Navigation extends React.Component<
   static defaultProps = {
     indentSize: 24
   };
-  sortable: Sortable[] = [];
-  id: string;
-  dragRef?: HTMLElement;
+
+  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
-  dragRefFn(ref: any) {
-    const {draggable} = this.props;
-    if (ref && draggable) {
-      this.id = guid();
-      this.initDragging(ref);
+  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
+    };
   }
-
-  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');
-          }
+  @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) {
@@ -242,39 +364,48 @@ export class Navigation extends React.Component<
       itemActions,
       draggable,
       links,
-      badge: defaultBadge
+      itemBadge,
+      data: defaultData
     } = 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}
+        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
         })}
-        data-id={id}
+        onDragStart={this.handleDragStart(link)}
       >
-        <Badge classnames={cx} badge={badge} data={link}>
+        <Badge
+          classnames={cx}
+          badge={itemBadge}
+          data={createObject(defaultData, link)}
+        >
           <a
+            data-id={link.__id}
+            data-depth={depth}
             onClick={this.handleClick.bind(this, link)}
-            style={{paddingLeft: depth * (parseInt(indentSize as any, 10) ?? 24)}}
+            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"
+            {!disabled && draggable ? (
+              <div
+                className={cx('Nav-itemDrager')}
+                draggable
+                onMouseDown={e => {
+                  this.toggleLink(link, true);
+                  e.stopPropagation();
+                }}
               >
                 <Icon icon="drag-bar" className="icon" />
-              </a>
-            </div>
-          ) : null}
+              </div>
+            ) : null}
             {link.loading ? (
               <Spinner
                 size="sm"
@@ -291,23 +422,23 @@ export class Navigation extends React.Component<
               </span>
             ) : null}
             {generateIcon(cx, link.icon, 'Nav-itemIcon')}
-            {
-              link.label && (typeof link.label === 'string'
-              ? link.label
-              : render('inline', link.label as SchemaCollection))
-            }
+            {link.label &&
+              (typeof link.label === 'string'
+                ? link.label
+                : render('inline', link.label as SchemaCollection))}
           </a>
           {
             // 更多操作
-            itemActions
-            ? <div className={cx('Nav-item-atcions')}>
-              {
-                render('inline', itemActions, {data: link})
-              }
-            </div> : null
+            itemActions ? (
+              <div className={cx('Nav-item-atcions')}>
+                {render('inline', itemActions, {
+                  data: createObject(defaultData, link)
+                })}
+              </div>
+            ) : null
           }
           {Array.isArray(link.children) && link.children.length ? (
-            <ul className={cx('Nav-subItems')} ref={this.dragRefFn}>
+            <ul className={cx('Nav-subItems')}>
               {link.children.map((link, index) =>
                 this.renderItem(link, index, depth + 1)
               )}
@@ -320,18 +451,26 @@ export class Navigation extends React.Component<
 
   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')}
-        ref={this.dragRefFn}
-      >
-        {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>
     );
   }
 }
@@ -345,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;
@@ -380,7 +519,8 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
                     link.hasOwnProperty('to') &&
                     env &&
                     env.isCurrentUrl(filter(link.to as string, data))
-                  ))
+                  )),
+            __id: link.__id || guid()
           };
 
           item.unfolded =
@@ -444,6 +584,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
       super(props);
       this.toggleLink = this.toggleLink.bind(this);
       this.handleSelect = this.handleSelect.bind(this);
+      this.dragUpdate = this.dragUpdate.bind(this);
     }
 
     componentDidMount() {
@@ -460,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) {
@@ -471,7 +612,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
             target === link
               ? {
                   ...link,
-                  unfolded: !link.unfolded
+                  unfolded: forceFold ? false : !link.unfolded
                 }
               : link
           ),
@@ -480,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) {
@@ -500,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}
         />
       );
     }
@@ -566,7 +770,6 @@ export class NavigationRenderer extends React.Component<RendererProps> {
 
   render() {
     const {...rest} = this.props;
-
     return (
       <ConditionBuilderWithRemoteOptions
         {...rest}