amis 1.7.0 → 1.8.0-beta.13

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>
     );
   }
@@ -523,7 +721,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
                     env &&
                     env.isCurrentUrl(filter(link.to as string, data))
                   )),
-            __id: link.id ?? link.__id ?? guid()
+            __id: link.__id ?? guid()
           };
 
           item.unfolded =

package/src/renderers/Page.tsx

@@ -32,6 +32,9 @@ 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';
+import position from '../utils/position';
+import {scrollPosition} from '../utils/scrollPosition';
 
 /**
  * 样式属性名及值
@@ -91,6 +94,13 @@ export interface PageSchema extends BaseSchema {
    */
   asideResizor?: boolean;
 
+  /**
+   * 边栏内容是否粘住，即不跟随滚动。
+   *
+   * @default true
+   */
+  asideSticky?: boolean;
+
   /**
    * 边栏最小宽度
    */
@@ -200,6 +210,15 @@ export interface PageSchema extends BaseSchema {
   style?: {
     [propName: string]: any;
   };
+
+  /**
+   * 下拉刷新配置
+   */
+  pullRefresh?: {
+    disabled?: boolean;
+    pullingText?: string;
+    loosingText?: string;
+  };
 }
 
 export interface PageProps
@@ -218,6 +237,7 @@ export default class Page extends React.Component<PageProps> {
   startX: number;
   startWidth: number;
   codeWrap: HTMLElement;
+  asideInner = React.createRef<HTMLDivElement>();
 
   static defaultProps = {
     asideClassName: '',
@@ -226,7 +246,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 +371,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 +384,13 @@ export default class Page extends React.Component<PageProps> {
         })
         .then(this.initInterval);
     }
+
+    if (asideSticky && this.asideInner.current) {
+      const dom = this.asideInner.current!;
+      dom.style.cssText += `position: sticky; top: ${
+        scrollPosition(dom).top
+      }px;`;
+    }
   }
 
   componentDidUpdate(prevProps: PageProps) {
@@ -603,6 +635,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 +751,7 @@ export default class Page extends React.Component<PageProps> {
       style,
       data,
       asideResizor,
+      pullRefresh,
       translate: __
     } = this.props;
 
@@ -725,6 +768,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 +807,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 +827,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',
@@ -853,7 +912,7 @@ export class PageRenderer extends Page {
     throwErrors: boolean = false,
     delegate?: IScopedContext
   ) {
-    const scoped = this.context as IScopedContext;
+    const scoped = delegate || (this.context as IScopedContext);
 
     if (action.actionType === 'reload') {
       action.target && scoped.reload(action.target, ctx);
@@ -877,7 +936,6 @@ export class PageRenderer extends Page {
         action.reload &&
         ~['url', 'link', 'jump'].indexOf(action.actionType!)
       ) {
-        const scoped = delegate || (this.context as IScopedContext);
         scoped.reload(action.reload, ctx);
       }
     }
@@ -921,4 +979,8 @@ export class PageRenderer extends Page {
       }
     }, 300);
   }
+
+  setData(values: object) {
+    return this.props.store.updateData(values);
+  }
 }

package/src/renderers/Progress.tsx

@@ -6,6 +6,8 @@ import {autobind, getPropValue, createObject} from '../utils/helper';
 import {filter} from '../utils/tpl';
 
 import Progress from '../components/Progress';
+import {ColorMapType} from '../components/Progress';
+
 /**
  * 进度展示控件。
  * 文档：https://baidu.gitee.io/amis/docs/components/progress
@@ -29,14 +31,9 @@ export interface ProgressSchema extends BaseSchema {
   progressClassName?: SchemaClassName;
 
   /**
-   * 进度外层 CSS 类名
-   */
-  progressBarClassName?: SchemaClassName;
-
-  /**
-   * 配置不通的值段，用不通的样式提示用户
+   * 配置不同的值段，用不同的样式提示用户
    */
-  map?: Array<string>;
+  map?: ColorMapType;
 
   /**
    * 是否显示值
@@ -59,17 +56,20 @@ export interface ProgressSchema extends BaseSchema {
   animate?: boolean;
 
   /**
-   * 圆形进度条线的宽度
+   * 进度条线的宽度
    */
   strokeWidth?: number;
+
   /**
    * 仪表盘进度条缺口角度，可取值 0 ~ 295
    */
   gapDegree?: number;
+
   /**
    * 仪表盘进度条缺口位置
    */
   gapPosition?: 'top' | 'bottom' | 'left' | 'right';
+
   /**
    * 内容的模板函数
    */
@@ -95,7 +95,7 @@ export class ProgressField extends React.Component<ProgressProps, object> {
   @autobind
   format(value: number) {
     const {valueTpl, render, data} = this.props;
-    return render(`progress-value`, valueTpl + '', {
+    return render(`progress-value`, valueTpl || '${value}%', {
       data: createObject(data, {value})
     });
   }
@@ -106,7 +106,6 @@ export class ProgressField extends React.Component<ProgressProps, object> {
       className,
       placeholder,
       progressClassName,
-      progressBarClassName,
       map,
       stripe,
       animate,
@@ -137,7 +136,6 @@ export class ProgressField extends React.Component<ProgressProps, object> {
         gapPosition={gapPosition}
         className={className}
         progressClassName={progressClassName}
-        progressBarClassName={progressBarClassName}
       />
     );
   }