amis 1.4.2-beta.6 → 1.5.0

package/src/renderers/Nav.tsx

@@ -17,7 +17,13 @@ import {
 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,
@@ -90,27 +96,27 @@ export interface NavSchema extends BaseSchema {
   /**
    * 更多操作菜单列表
    */
-   itemActions?: SchemaCollection;
+  itemActions?: SchemaCollection;
 
   /**
    * 可拖拽
    */
-   draggable?: boolean;
+  draggable?: boolean;
 
-   /**
-    * 保存排序的 api
-    */
+  /**
+   * 保存排序的 api
+   */
   saveOrderApi?: SchemaApi;
 
   /**
    * 角标
    */
-   itemBadge?: BadgeSchema;
+  itemBadge?: BadgeSchema;
 
   /**
    * 仅允许同层级拖拽
    */
-   dragOnSameLevel?: boolean;
+  dragOnSameLevel?: boolean;
 }
 
 export interface Link {
@@ -191,7 +197,19 @@ export class Navigation extends React.Component<
 
   @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
@@ -207,14 +225,18 @@ export class Navigation extends React.Component<
     const {top, height, width} = rect;
     let {clientY, clientX} = e;
     const left = depth * (parseInt(indentSize as any, 10) ?? 24);
-    const deltaX = left + width * .2;
+    const deltaX = left + width * 0.2;
     let position;
-    if (clientY >= top + height / 2 ) {
+    if (clientY >= top + height / 2) {
       position = 'bottom';
     } else {
       position = 'top';
     }
-    if (!dragOnSameLevel && position === 'bottom' && clientX >= this.startPoint.x + deltaX) {
+    if (
+      !dragOnSameLevel &&
+      position === 'bottom' &&
+      clientX >= this.startPoint.x + deltaX
+    ) {
       position = 'self';
     }
     return {
@@ -232,8 +254,9 @@ export class Navigation extends React.Component<
     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
+    if (
+      dragOnSameLevel &&
+      this.dragNode?.node.parentElement !== target.parentElement?.parentElement
     ) {
       this.setState({dropIndicator: undefined});
       this.dropInfo = null;
@@ -254,13 +277,15 @@ export class Navigation extends React.Component<
           left,
           width: ul.getBoundingClientRect().width - left,
           height,
-          opacity: .2
+          opacity: 0.2
         }
       });
     } else {
       this.setState({
         dropIndicator: {
-          top: (position === 'bottom' ? rect.top + rect.height : rect.top) - ul.getBoundingClientRect().top,
+          top:
+            (position === 'bottom' ? rect.top + rect.height : rect.top) -
+            ul.getBoundingClientRect().top,
           left,
           width: ul.getBoundingClientRect().width - left
         }
@@ -356,21 +381,31 @@ export class Navigation extends React.Component<
         })}
         onDragStart={this.handleDragStart(link)}
       >
-        <Badge classnames={cx} badge={itemBadge} data={createObject(defaultData, 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 ? (
-            <div className={cx('Nav-itemDrager')}
-              draggable
-              onMouseDown={e => {this.toggleLink(link, true); e.stopPropagation()}}
-            >
-              <Icon icon="drag-bar" className="icon" />
-            </div>
-          ) : null}
+              <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"
@@ -387,20 +422,20 @@ 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: createObject(defaultData, 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')}>
@@ -419,17 +454,22 @@ export class Navigation extends React.Component<
     const {dropIndicator} = this.state;
     return (
       <div className={cx('Nav')}>
-        <ul className={cx('Nav-list', className, stacked ? 'Nav-list--stacked' : 'Nav-list--tabs')}>
+        <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
-        )}
+        {dropIndicator ? (
+          <div className={cx('Nav-dropIndicator')} style={dropIndicator} />
+        ) : null}
       </div>
     );
   }
@@ -444,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;
@@ -586,12 +626,15 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
       const {nodeId, dragLink, position} = dropInfo;
       if (dragLink) {
         // 删除原节点
-        const sourceIdx = findTreeIndex(links, link => link.__id === dragLink.__id) as number[];
+        const sourceIdx = findTreeIndex(
+          links,
+          link => link.__id === dragLink.__id
+        ) as number[];
         links = spliceTree(links, sourceIdx, 1);
 
         if (position === 'self') {
           // 插入到对应节点的children中
-          mapTree(links, (link) => {
+          mapTree(links, link => {
             if (link.__id === nodeId) {
               if (!link.children) {
                 link.children = [];
@@ -599,33 +642,39 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
               link.children.push(dragLink);
             }
             return link;
-          })
+          });
         } else {
           // 找到需要插入的节点
-          const idx = findTreeIndex(links, link => link.__id === nodeId) as number[];
+          const idx = findTreeIndex(
+            links,
+            link => link.__id === nodeId
+          ) as number[];
           // 插入节点之后
           if (position === 'bottom') {
-            idx.push(idx.pop() as number + 1);
+            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];
+      await this.saveOrder(
+        mapTree(links, (link: Link) => {
+          // 清除内部加的字段
+          for (let key in link) {
+            if (/^__.*$/.test(key)) {
+              delete link[key];
+            }
           }
-        }
-        return link;
-      }));
+          return link;
+        })
+      );
     }
 
     async saveOrder(links: Links) {
       const {saveOrderApi, env, data, reload} = this.props;
       if (saveOrderApi && isEffectiveApi(saveOrderApi)) {
-        await env.fetcher(saveOrderApi as SchemaApi,
+        await env.fetcher(
+          saveOrderApi as SchemaApi,
           createObject(data, {data: links}),
           {method: 'post'}
         );

package/src/renderers/Page.tsx

@@ -85,6 +85,21 @@ export interface PageSchema extends BaseSchema {
    */
   aside?: SchemaCollection;
 
+  /**
+   * 边栏是否允许拖动
+   */
+  asideResizor?: boolean;
+
+  /**
+   * 边栏最小宽度
+   */
+  asideMinWidth?: number;
+
+   /**
+   * 边栏最小宽度
+   */
+  asideMaxWidth?: number;
+
   /**
    * 边栏区 css 类名
    */
@@ -199,6 +214,9 @@ export default class Page extends React.Component<PageProps> {
   mounted: boolean;
   style: HTMLStyleElement;
   varStyle: HTMLStyleElement;
+  startX: number;
+  startWidth: number;
+  codeWrap: HTMLElement;
 
   static defaultProps = {
     asideClassName: '',
@@ -499,6 +517,37 @@ export default class Page extends React.Component<PageProps> {
     }
   }
 
+  @autobind
+  handleResizeMouseDown(e: React.MouseEvent) {
+    // todo 可能 ie 不正确
+    let isRightMB = e.nativeEvent.which == 3;
+
+    if (isRightMB) {
+      return;
+    }
+
+    this.codeWrap = e.currentTarget.parentElement as HTMLElement;
+    document.addEventListener('mousemove', this.handleResizeMouseMove);
+    document.addEventListener('mouseup', this.handleResizeMouseUp);
+    this.startX = e.clientX;
+    this.startWidth = this.codeWrap.offsetWidth;
+  }
+
+  @autobind
+  handleResizeMouseMove(e: MouseEvent) {
+    const {asideMinWidth = 160, asideMaxWidth = 350} = this.props;
+    const dx = e.clientX - this.startX;
+    const mx = this.startWidth + dx;
+    const width = Math.min(Math.max(mx, asideMinWidth), asideMaxWidth);
+    this.codeWrap.style.cssText += `width: ${width}px`;
+  }
+
+  @autobind
+  handleResizeMouseUp() {
+    document.removeEventListener('mousemove', this.handleResizeMouseMove);
+    document.removeEventListener('mouseup', this.handleResizeMouseUp);
+  }
+
   openFeedback(dialog: any, ctx: any) {
     return new Promise(resolve => {
       const {store} = this.props;
@@ -658,6 +707,7 @@ export default class Page extends React.Component<PageProps> {
       regions,
       style,
       data,
+      asideResizor,
       translate: __
     } = this.props;
 
@@ -684,7 +734,11 @@ export default class Page extends React.Component<PageProps> {
         style={styleVar}
       >
         {hasAside ? (
-          <div className={cx(`Page-aside`, asideClassName)}>
+          <div className={cx(
+            `Page-aside`,
+            asideResizor ? 'relative' : 'Page-aside--withWidth',
+            asideClassName
+          )}>
             {render('aside', aside || '', {
               ...subProps,
               ...(typeof aside === 'string'
@@ -694,6 +748,13 @@ export default class Page extends React.Component<PageProps> {
                   }
                 : null)
             })}
+            {asideResizor ? (
+              <div
+                onMouseDown={this.handleResizeMouseDown}
+                className={cx(`Page-asideResizor`)}
+              ></div>
+            ) : null}
+            
           </div>
         ) : null}