amis 1.4.1 → 1.4.2-beta.1

package/src/renderers/Link.tsx

@@ -4,6 +4,7 @@ import {BaseSchema, SchemaTpl} from '../Schema';
 import {getPropValue} from '../utils/helper';
 import {filter} from '../utils/tpl';
 import {BadgeSchema, withBadge} from '../components/Badge';
+import Link from '../components/Link';
 
 /**
  * Link 链接展示控件。
@@ -29,16 +30,32 @@ export interface LinkSchema extends BaseSchema {
    * 角标
    */
   badge?: BadgeSchema;
+
+  /**
+   * a标签原生target属性
+   */
+  htmlTarget?: string;
+
+  /**
+   * 图标
+   */
+  icon?: string;
+
+  /**
+   * 图标位置
+   */
+  position?: string;
 }
 
 export interface LinkProps
   extends RendererProps,
     Omit<LinkSchema, 'type' | 'className'> {}
 
-export class LinkField extends React.Component<LinkProps, object> {
+export class LinkCmpt extends React.Component<LinkProps, object> {
   static defaultProps = {
-    className: '',
-    blank: false
+    blank: true,
+    disabled: false,
+    htmlTarget: '_self'
   };
 
   render() {
@@ -48,25 +65,33 @@ export class LinkField extends React.Component<LinkProps, object> {
       href,
       classnames: cx,
       blank,
+      disabled,
       htmlTarget,
       data,
       render,
       translate: __,
-      title
+      title,
+      icon,
+      position
     } = this.props;
 
     let value = getPropValue(this.props);
     const finnalHref = href ? filter(href, data, '| raw') : '';
+    const text = body ? render('body', body) : finnalHref || value || __('link');
 
     return (
-      <a
-        href={finnalHref || value}
-        target={htmlTarget || (blank ? '_blank' : '_self')}
-        className={cx('Link', className)}
+      <Link
+        className={className}
+        href={href}
+        body={text}
+        blank={blank}
+        disabled={disabled}
         title={title}
+        htmlTarget={htmlTarget}
+        icon={icon}
+        position={position}
       >
-        {body ? render('body', body) : finnalHref || value || __('link')}
-      </a>
+      </Link>
     );
   }
 }
@@ -76,4 +101,4 @@ export class LinkField extends React.Component<LinkProps, object> {
 })
 // @ts-ignore 类型没搞定
 @withBadge
-export class LinkFieldRenderer extends LinkField {}
+export class LinkFieldRenderer extends LinkCmpt {}

package/src/renderers/Log.tsx

@@ -6,7 +6,7 @@ import {Renderer, RendererProps} from '../factory';
 import {BaseSchema, SchemaTpl} from '../Schema';
 import Ansi from 'ansi-to-react';
 import {filter} from '../utils/tpl';
-import {buildApi} from '../utils/api';
+import {buildApi, isApiOutdated} from '../utils/api';
 
 /**
  * 日志展示组件
@@ -14,7 +14,7 @@ import {buildApi} from '../utils/api';
  */
 export interface LogSchema extends BaseSchema {
   /**
-   * 指定为 link 链接展示控件
+   * 指定为 log 链接展示控件
    */
   type: 'log';
 
@@ -100,10 +100,20 @@ export class Log extends React.Component<LogProps, LogState> {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: LogProps) {
     if (this.autoScroll && this.logRef && this.logRef.current) {
       this.logRef.current.scrollTop = this.logRef.current.scrollHeight;
     }
+    if (
+      isApiOutdated(
+        prevProps.source,
+        this.props.source,
+        prevProps.data,
+        this.props.data
+      )
+    ) {
+      this.loadLogs();
+    }
   }
 
   // 如果向上滚动就停止自动滚动，除非滚到底部
@@ -118,6 +128,9 @@ export class Log extends React.Component<LogProps, LogState> {
     const {source, data, env, translate: __, encoding} = this.props;
     // 因为这里返回结果是流式的，和普通 api 请求不一样，如果直接用 fetcher 经过 responseAdaptor 可能会导致出错，所以就直接 fetch 了
     const api = buildApi(source, data);
+    if (!api.url) {
+      return;
+    }
     const res = await fetch(api.url);
     if (res.status === 200) {
       const body = res.body;

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,7 +11,8 @@ import {
   isUnfolded,
   mapTree,
   someTree,
-  spliceTree
+  spliceTree,
+  findTreeIndex
 } from '../utils/helper';
 import {ScopedContext, IScopedContext} from '../Scoped';
 import {themeable, ThemeProps} from '../theme';
@@ -24,7 +25,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 +50,6 @@ export type NavItemSchema = {
   deferApi?: SchemaApi;
 
   children?: Array<NavItemSchema>;
-
-  /**
-   * 角标
-   */
-  badge?: BadgeSchema
 } & Omit<BaseSchema, 'type'>;
 
 /**
@@ -110,7 +105,12 @@ export interface NavSchema extends BaseSchema {
   /**
    * 角标
    */
-   badge?: BadgeSchema;
+   itemBadge?: BadgeSchema;
+
+  /**
+   * 仅允许同层级拖拽
+   */
+   dragOnSameLevel?: boolean;
 }
 
 export interface Link {
@@ -127,28 +127,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,9 +174,20 @@ 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) {
@@ -166,66 +195,134 @@ export class Navigation extends React.Component<
   }
 
   @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 * .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: .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,37 +339,36 @@ 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)}}
           >
             {!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 className={cx('Nav-itemDrager')}
+              draggable
+              onMouseDown={e => {this.toggleLink(link, true); e.stopPropagation()}}
+            >
+              <Icon icon="drag-bar" className="icon" />
             </div>
           ) : null}
             {link.loading ? (
@@ -302,12 +398,12 @@ export class Navigation extends React.Component<
             itemActions
             ? <div className={cx('Nav-item-atcions')}>
               {
-                render('inline', itemActions, {data: link})
+                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 +416,21 @@ 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>
     );
   }
 }
@@ -380,7 +479,8 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
                     link.hasOwnProperty('to') &&
                     env &&
                     env.isCurrentUrl(filter(link.to as string, data))
-                  ))
+                  )),
+            __id: guid()
           };
 
           item.unfolded =
@@ -444,6 +544,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 +561,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 +572,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
             target === link
               ? {
                   ...link,
-                  unfolded: !link.unfolded
+                  unfolded: forceFold ? false : !link.unfolded
                 }
               : link
           ),
@@ -480,6 +581,60 @@ 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,7 +655,6 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
 
     render() {
       const {loading, config, deferLoad, updateConfig, ...rest} = this.props;
-
       return (
         <ThemedNavigation
           {...rest}
@@ -509,6 +663,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
           disabled={loading}
           onSelect={this.handleSelect}
           onToggle={this.toggleLink}
+          onDragUpdate={this.dragUpdate}
         />
       );
     }

package/src/renderers/SparkLine.tsx

@@ -36,6 +36,11 @@ export interface SparkLineSchema extends BaseSchema {
    */
   clickAction?: ActionSchema;
 
+  /**
+   * 空数据时显示的内容
+   */
+  placeholder?: string;
+
   // /**
   //  * 线的转折是否要有圆角。默认为 2
   //  */