amis 1.8.0-beta.5 → 1.8.0-beta.9

package/src/renderers/Nav.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
+import Overflow from 'rc-overflow';
 import {Renderer, RendererEnv, RendererProps} from '../factory';
 import getExprProperties from '../utils/filter-schema';
 import {filter, evalExpression} from '../utils/tpl';
@@ -7,32 +8,36 @@ import {
   guid,
   autobind,
   createObject,
-  findTree,
   isUnfolded,
   mapTree,
   someTree,
   spliceTree,
-  findTreeIndex
+  findTreeIndex,
+  isObject
 } from '../utils/helper';
-import {ScopedContext, IScopedContext} from '../Scoped';
+import {generateIcon} from '../utils/icon';
+import {isEffectiveApi} from '../utils/api';
 import {themeable, ThemeProps} from '../theme';
-import {Icon} from '../components/icons';
+import {Icon, getIcon} from '../components/icons';
+import {Badge, BadgeSchema} from '../components/Badge';
 import {
+  RemoteOptionsProps,
+  withRemoteConfig
+} from '../components/WithRemoteConfig';
+import Spinner from '../components/Spinner';
+import PopOverContainer from '../components/PopOverContainer';
+import {ScopedContext, IScopedContext} from '../Scoped';
+
+import type {Payload} from '../types';
+import type {
   BaseSchema,
+  SchemaObject,
   SchemaApi,
   SchemaIcon,
   SchemaUrlPath,
-  SchemaCollection
+  SchemaCollection,
+  SchemaClassName
 } from '../Schema';
-import {generateIcon} from '../utils/icon';
-import {
-  RemoteOptionsProps,
-  withRemoteConfig
-} 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 = {
   /**
@@ -58,6 +63,71 @@ export type NavItemSchema = {
   children?: Array<NavItemSchema>;
 } & Omit<BaseSchema, 'type'>;
 
+export interface NavOverflow {
+  /**
+   * 是否开启响应式收纳
+   */
+  enable: boolean;
+
+  /**
+   * 菜单触发按钮的文字
+   */
+  overflowLabel?: string | SchemaObject;
+
+  /**
+   * 菜单触发按钮的图标
+   * @default "fa fa-ellipsis"
+   */
+  overflowIndicator?: SchemaIcon;
+
+  /**
+   * 菜单触发按钮CSS类名
+   */
+  overflowClassName?: SchemaClassName;
+
+  /**
+   * Popover浮层CSS类名
+   */
+  overflowPopoverClassName?: SchemaClassName;
+
+  /**
+   * 菜单外层CSS类名
+   */
+  overflowListClassName?: SchemaClassName;
+
+  /**
+   * 导航横向布局时，开启开启响应式收纳后最大可显示数量，超出此数量的导航将被收纳到下拉菜单中
+   */
+  maxVisibleCount?: number;
+
+  /**
+   * 包裹导航的外层标签名，可以使用其他标签渲染
+   * @default "ul"
+   */
+  wrapperComponent?: string;
+
+  /**
+   * 导航项目宽度
+   * @default 160
+   */
+  itemWidth?: number;
+
+  /**
+   * 导航列表后缀节点
+   */
+  overflowSuffix?: SchemaCollection;
+
+  /**
+   * 自定义样式
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * 菜单DOM挂载点
+   */
+  popOverContainer?: any;
+}
+
 /**
  * Nav 导航渲染器
  * 文档：https://baidu.gitee.io/amis/docs/components/nav
@@ -117,6 +187,11 @@ export interface NavSchema extends BaseSchema {
    * 仅允许同层级拖拽
    */
   dragOnSameLevel?: boolean;
+
+  /**
+   * 横向导航时自动收纳配置
+   */
+  overflow?: NavOverflow;
 }
 
 export interface Link {
@@ -162,6 +237,7 @@ export interface NavigationProps
   env: RendererEnv;
   data: Object;
   reload?: any;
+  overflow?: NavOverflow;
 }
 
 export interface IDropInfo {
@@ -177,7 +253,7 @@ export class Navigation extends React.Component<
   NavigationProps,
   NavigationState
 > {
-  static defaultProps = {
+  static defaultProps: Pick<NavigationProps, 'indentSize'> = {
     indentSize: 24
   };
 
@@ -369,6 +445,7 @@ export class Navigation extends React.Component<
     } = this.props;
     const hasSub =
       (link.defer && !link.loaded) || (link.children && link.children.length);
+
     return (
       <li
         key={link.__id}
@@ -389,6 +466,7 @@ export class Navigation extends React.Component<
           <a
             data-id={link.__id}
             data-depth={depth}
+            title={link?.label?.toString()}
             onClick={this.handleClick.bind(this, link)}
             style={{
               paddingLeft: depth * (parseInt(indentSize as any, 10) ?? 24)
@@ -452,27 +530,147 @@ export class Navigation extends React.Component<
     );
   }
 
+  renderOverflowNavs(overflowConfig: NavOverflow) {
+    const {render, classnames: cx, className, loading, links = []} = this.props;
+    const {
+      overflowClassName,
+      overflowPopoverClassName,
+      overflowListClassName,
+      overflowLabel,
+      overflowIndicator,
+      itemWidth = 160,
+      overflowSuffix,
+      popOverContainer,
+      style,
+      maxVisibleCount,
+      wrapperComponent = 'ul'
+    } = overflowConfig;
+
+    return (
+      <>
+        <Spinner show={!!loading} overlay icon="reload" />
+
+        <Overflow<Link>
+          className={cx('Nav-list--tabs', className)}
+          prefixCls={cx('Nav-list')}
+          itemWidth={itemWidth}
+          style={style}
+          component={wrapperComponent as any}
+          data={links}
+          suffix={
+            overflowSuffix
+              ? render('nav-overflow-suffix', overflowSuffix)
+              : null
+          }
+          renderRawItem={(item, index) =>
+            this.renderItem(item, index) as JSX.Element
+          }
+          renderRawRest={overFlowedItems => {
+            return (
+              <PopOverContainer
+                popOverContainer={popOverContainer}
+                popOverClassName={cx(
+                  'Nav-item-overflow-popover',
+                  overflowPopoverClassName
+                )}
+                popOverRender={({onClose}) => (
+                  <div
+                    className={cx(
+                      'Nav-list',
+                      'Nav-list--stacked', // 浮层菜单为垂直布局
+                      'Nav-list-overflow',
+                      overflowListClassName
+                    )}
+                  >
+                    {overFlowedItems.map((item, index) =>
+                      React.cloneElement(
+                        this.renderItem(item, index) as JSX.Element,
+                        {
+                          onClick: onClose
+                        }
+                      )
+                    )}
+                  </div>
+                )}
+              >
+                {({onClick, ref, isOpened}) => (
+                  <li
+                    ref={ref}
+                    className={cx(
+                      'Nav-item',
+                      'Nav-item-overflow',
+                      {
+                        'is-overflow-opened': isOpened
+                      },
+                      overflowClassName
+                    )}
+                    onClick={onClick}
+                  >
+                    <a data-id={guid()} data-depth={1}>
+                      {getIcon(overflowIndicator!) ? (
+                        <Icon icon={overflowIndicator} className="icon" />
+                      ) : (
+                        generateIcon(cx, overflowIndicator, 'Nav-itemIcon')
+                      )}
+                      {overflowLabel && isObject
+                        ? render('nav-overflow-label', overflowLabel)
+                        : overflowLabel}
+                    </a>
+                  </li>
+                )}
+              </PopOverContainer>
+            );
+          }}
+          maxCount={
+            maxVisibleCount && Number.isInteger(maxVisibleCount)
+              ? maxVisibleCount
+              : 'responsive'
+          }
+        />
+      </>
+    );
+  }
+
   render(): JSX.Element {
-    const {className, stacked, classnames: cx, links, loading} = this.props;
+    const {
+      className,
+      stacked,
+      classnames: cx,
+      links,
+      loading,
+      overflow
+    } = this.props;
     const {dropIndicator} = this.state;
+
     return (
       <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}
+        {overflow && isObject(overflow) && overflow.enable ? (
+          this.renderOverflowNavs({
+            overflowIndicator: 'fa fa-ellipsis',
+            wrapperComponent: 'ul',
+            itemWidth: 160,
+            ...overflow
+          })
+        ) : (
+          <>
+            <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>
     );
   }

package/src/renderers/Page.tsx

@@ -32,6 +32,7 @@ import {onAction} from 'mobx-state-tree';
 import mapValues from 'lodash/mapValues';
 import {resolveVariable} from '../utils/tpl-builtin';
 import {buildStyle} from '../utils/style';
+import PullRefresh from '../components/PullRefresh';
 
 /**
  * 样式属性名及值
@@ -91,6 +92,13 @@ export interface PageSchema extends BaseSchema {
    */
   asideResizor?: boolean;
 
+  /**
+   * 边栏内容是否粘住，即不跟随滚动。
+   *
+   * @default true
+   */
+  asideSticky?: boolean;
+
   /**
    * 边栏最小宽度
    */
@@ -200,6 +208,15 @@ export interface PageSchema extends BaseSchema {
   style?: {
     [propName: string]: any;
   };
+
+  /**
+   * 下拉刷新配置
+   */
+  pullRefresh?: {
+    disabled?: boolean;
+    pullingText?: string;
+    loosingText?: string;
+  };
 }
 
 export interface PageProps
@@ -218,6 +235,7 @@ export default class Page extends React.Component<PageProps> {
   startX: number;
   startWidth: number;
   codeWrap: HTMLElement;
+  asideInner = React.createRef<HTMLDivElement>();
 
   static defaultProps = {
     asideClassName: '',
@@ -226,7 +244,11 @@ export default class Page extends React.Component<PageProps> {
     initFetch: true,
     // primaryField: 'id',
     toolbarClassName: '',
-    messages: {}
+    messages: {},
+    asideSticky: true,
+    pullRefresh: {
+      disabled: true
+    }
   };
 
   static propsList: Array<keyof PageProps> = [
@@ -347,7 +369,8 @@ export default class Page extends React.Component<PageProps> {
   }
 
   componentDidMount() {
-    const {initApi, initFetch, initFetchOn, store, messages} = this.props;
+    const {initApi, initFetch, initFetchOn, store, messages, asideSticky} =
+      this.props;
 
     this.mounted = true;
 
@@ -359,6 +382,12 @@ export default class Page extends React.Component<PageProps> {
         })
         .then(this.initInterval);
     }
+
+    if (asideSticky && this.asideInner.current) {
+      const dom = this.asideInner.current!;
+      const rect = dom.getBoundingClientRect();
+      dom.style.cssText += `position: sticky; top: ${rect.top}px;`;
+    }
   }
 
   componentDidUpdate(prevProps: PageProps) {
@@ -603,6 +632,16 @@ export default class Page extends React.Component<PageProps> {
     return value;
   }
 
+  @autobind
+  async handleRefresh() {
+    const {dispatchEvent, data} = this.props;
+    const rendererEvent = await dispatchEvent('pullRefresh', data);
+    if (rendererEvent?.prevented) {
+      return;
+    }
+    this.reload();
+  }
+
   handleChange(
     value: any,
     name: string,
@@ -709,6 +748,7 @@ export default class Page extends React.Component<PageProps> {
       style,
       data,
       asideResizor,
+      pullRefresh,
       translate: __
     } = this.props;
 
@@ -725,6 +765,31 @@ export default class Page extends React.Component<PageProps> {
 
     const styleVar = buildStyle(style, data);
 
+    const pageContent = (
+      <div className={cx('Page-content')}>
+        <div className={cx('Page-main')}>
+          {this.renderHeader()}
+          <div className={cx(`Page-body`, bodyClassName)}>
+            <Spinner size="lg" overlay key="info" show={store.loading} />
+
+            {store.error && showErrorMsg !== false ? (
+              <Alert
+                level="danger"
+                showCloseButton
+                onClose={store.clearMessage}
+              >
+                {store.msg}
+              </Alert>
+            ) : null}
+
+            {(Array.isArray(regions) ? ~regions.indexOf('body') : body)
+              ? render('body', body || '', subProps)
+              : null}
+          </div>
+        </div>
+      </div>
+    );
+
     return (
       <div
         className={cx(`Page`, hasAside ? `Page--withSidebar` : '', className)}
@@ -739,15 +804,17 @@ export default class Page extends React.Component<PageProps> {
               asideClassName
             )}
           >
-            {render('aside', aside || '', {
-              ...subProps,
-              ...(typeof aside === 'string'
-                ? {
-                    inline: false,
-                    className: `Page-asideTplWrapper`
-                  }
-                : null)
-            })}
+            <div className={cx(`Page-asideInner`)} ref={this.asideInner}>
+              {render('aside', aside || '', {
+                ...subProps,
+                ...(typeof aside === 'string'
+                  ? {
+                      inline: false,
+                      className: `Page-asideTplWrapper`
+                    }
+                  : null)
+              })}
+            </div>
             {asideResizor ? (
               <div
                 onMouseDown={this.handleResizeMouseDown}
@@ -757,28 +824,17 @@ export default class Page extends React.Component<PageProps> {
           </div>
         ) : null}
 
-        <div className={cx('Page-content')}>
-          <div className={cx('Page-main')}>
-            {this.renderHeader()}
-            <div className={cx(`Page-body`, bodyClassName)}>
-              <Spinner size="lg" overlay key="info" show={store.loading} />
-
-              {store.error && showErrorMsg !== false ? (
-                <Alert
-                  level="danger"
-                  showCloseButton
-                  onClose={store.clearMessage}
-                >
-                  {store.msg}
-                </Alert>
-              ) : null}
-
-              {(Array.isArray(regions) ? ~regions.indexOf('body') : body)
-                ? render('body', body || '', subProps)
-                : null}
-            </div>
-          </div>
-        </div>
+        {pullRefresh && !pullRefresh.disabled ? (
+          <PullRefresh
+            {...pullRefresh}
+            translate={__}
+            onRefresh={this.handleRefresh}
+          >
+            {pageContent}
+          </PullRefresh>
+        ) : (
+          pageContent
+        )}
 
         {render(
           'dialog',

package/src/renderers/Service.tsx

@@ -251,12 +251,18 @@ export default class Service extends React.Component<ServiceProps> {
     let dataProviderFunc = dataProvider;
 
     if (typeof dataProvider === 'string' && dataProvider) {
-      dataProviderFunc = str2AsyncFunction(dataProvider, 'data', 'setData')!;
+      dataProviderFunc = str2AsyncFunction(
+        dataProvider,
+        'data',
+        'setData',
+        'env'
+      )!;
     }
     if (typeof dataProviderFunc === 'function') {
       const unsubscribe = await dataProviderFunc(
         store.data,
-        this.dataProviderSetData
+        this.dataProviderSetData,
+        this.props.env
       );
       if (typeof unsubscribe === 'function') {
         this.dataProviderUnsubscribe = unsubscribe;
@@ -363,6 +369,7 @@ export default class Service extends React.Component<ServiceProps> {
       initFetch,
       initFetchOn,
       store,
+      dataProvider,
       messages: {fetchSuccess, fetchFailed}
     } = this.props;
 
@@ -386,6 +393,10 @@ export default class Service extends React.Component<ServiceProps> {
         })
         .then(this.afterDataFetch);
     }
+
+    if (dataProvider) {
+      this.runDataProvider();
+    }
   }
 
   silentReload(target?: string, query?: any) {
@@ -411,22 +422,35 @@ export default class Service extends React.Component<ServiceProps> {
     // 会被覆写
   }
 
+  @autobind
+  handleDialogConfirm(
+    values: object[],
+    action: Action,
+    ctx: any,
+    targets: Array<any>
+  ) {
+    const {store} = this.props;
+    store.closeDialog(true);
+  }
+
+  @autobind
+  handleDialogClose(confirmed = false) {
+    const {store} = this.props;
+    store.closeDialog(confirmed);
+  }
+
   openFeedback(dialog: any, ctx: any) {
     return new Promise(resolve => {
       const {store} = this.props;
-      const parentStore = store.parentStore;
-
-      // 暂时自己不支持弹出 dialog
-      if (parentStore && parentStore.openDialog) {
-        store.setCurrentAction({
-          type: 'button',
-          actionType: 'dialog',
-          dialog: dialog
-        });
-        store.openDialog(ctx, undefined, confirmed => {
-          resolve(confirmed);
-        });
-      }
+
+      store.setCurrentAction({
+        type: 'button',
+        actionType: 'dialog',
+        dialog: dialog
+      });
+      store.openDialog(ctx, undefined, confirmed => {
+        resolve(confirmed);
+      });
     });
   }
 
@@ -486,18 +510,12 @@ export default class Service extends React.Component<ServiceProps> {
   renderBody() {
     const {render, store, body: schema, classnames: cx} = this.props;
 
-    return (
-      <div className={cx('Service-body')}>
-        {
-          render('body', store.schema || schema, {
-            key: store.schemaKey || 'body',
-            onQuery: this.handleQuery,
-            onAction: this.handleAction,
-            onChange: this.handleChange
-          }) as JSX.Element
-        }
-      </div>
-    );
+    return render('body', store.schema || schema, {
+      key: store.schemaKey || 'body',
+      onQuery: this.handleQuery,
+      onAction: this.handleAction,
+      onChange: this.handleChange
+    }) as JSX.Element;
   }
 
   render() {
@@ -527,6 +545,23 @@ export default class Service extends React.Component<ServiceProps> {
         {this.renderBody()}
 
         <Spinner size="lg" overlay key="info" show={store.loading} />
+
+        {render(
+          // 单独给 feedback 服务的，handleAction 里面先不要处理弹窗
+          'modal',
+          {
+            ...((store.action as Action) &&
+              ((store.action as Action).dialog as object)),
+            type: 'dialog'
+          },
+          {
+            key: 'dialog',
+            data: store.dialogData,
+            onConfirm: this.handleDialogConfirm,
+            onClose: this.handleDialogClose,
+            show: store.dialogOpen
+          }
+        )}
       </div>
     );
   }