amis 1.3.5-beta.6 → 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,15 +1,18 @@
 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';
@@ -22,6 +25,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 +86,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 +127,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 +175,154 @@ 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);
   }
 
   @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 * .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: .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 +330,107 @@ 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)}}
-        >
-          {generateIcon(cx, link.icon, 'Nav-itemIcon')}
+        <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')}
+              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>
     );
   }
 }
@@ -253,7 +479,8 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
                     link.hasOwnProperty('to') &&
                     env &&
                     env.isCurrentUrl(filter(link.to as string, data))
-                  ))
+                  )),
+            __id: guid()
           };
 
           item.unfolded =
@@ -310,12 +537,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 +561,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 +572,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
             target === link
               ? {
                   ...link,
-                  unfolded: !link.unfolded
+                  unfolded: forceFold ? false : !link.unfolded
                 }
               : link
           ),
@@ -352,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) {
@@ -372,7 +655,6 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
 
     render() {
       const {loading, config, deferLoad, updateConfig, ...rest} = this.props;
-
       return (
         <ThemedNavigation
           {...rest}
@@ -381,6 +663,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
           disabled={loading}
           onSelect={this.handleSelect}
           onToggle={this.toggleLink}
+          onDragUpdate={this.dragUpdate}
         />
       );
     }
@@ -442,6 +725,7 @@ export class NavigationRenderer extends React.Component<RendererProps> {
     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)