amis 1.4.2-beta.6 → 1.5.0

package/src/renderers/Portlet.tsx

@@ -0,0 +1,423 @@
+import React from 'react';
+import mapValues from 'lodash/mapValues';
+
+import {Tabs as CTabs, Tab} from '../components/Tabs';
+import {Renderer, RendererProps} from '../factory';
+import {resolveVariable} from '../utils/tpl-builtin';
+import {str2AsyncFunction} from '../utils/api';
+import {
+  isVisible,
+  autobind,
+  isDisabled,
+  isObject,
+  createObject
+} from '../utils/helper';
+
+import {filter} from '../utils/tpl';
+import {
+  SchemaTpl,
+  SchemaClassName,
+  BaseSchema,
+  SchemaCollection,
+  SchemaIcon
+} from '../Schema';
+
+import {ActionSchema} from './Action';
+
+/**
+ * 栏目容器渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/portlet
+ */
+export interface PortletTabSchema extends Omit<BaseSchema, 'type'> {
+  /**
+   * Tab 标题
+   */
+  title?: string;
+
+  /**
+   * 内容
+   * @deprecated 用 body 属性
+   */
+  tab?: SchemaCollection;
+
+  /**
+   * 可以在右侧配置点其他功能按钮，随着tab切换而切换
+   */
+  toolbar?: Array<ActionSchema>;
+
+  /**
+   * 内容
+   */
+  body?: SchemaCollection;
+
+  /**
+   * 按钮图标
+   */
+  icon?: SchemaIcon;
+
+  iconPosition?: 'left' | 'right';
+
+  /**
+   * 设置以后内容每次都会重新渲染
+   */
+  reload?: boolean;
+
+  /**
+   * 点开时才加载卡片内容
+   */
+  mountOnEnter?: boolean;
+
+  /**
+   * 卡片隐藏就销毁卡片节点。
+   */
+  unmountOnExit?: boolean;
+}
+
+export interface PortletSchema extends Omit<BaseSchema, 'type'> {
+  /**
+   * 指定为 portlet 类型
+   */
+  type: 'portlet';
+
+  tabs: Array<PortletTabSchema>;
+
+  /**
+   * 关联已有数据，选项卡直接根据目标数据重复。
+   */
+  source?: string;
+
+  /**
+   * 类名
+   */
+  tabsClassName?: SchemaClassName;
+
+  /**
+   * 展示形式
+   */
+  tabsMode?: '' | 'line' | 'card' | 'radio' | 'vertical' | 'tiled';
+
+  /**
+   * 内容类名
+   */
+  contentClassName?: SchemaClassName;
+
+  /**
+   * 链接外层类名
+   */
+  linksClassName?: SchemaClassName;
+
+  /**
+   * 卡片是否只有在点开的时候加载？
+   */
+  mountOnEnter?: boolean;
+
+  /**
+   * 卡片隐藏的时候是否销毁卡片内容
+   */
+  unmountOnExit?: boolean;
+
+  /**
+   * 可以在右侧配置点其他功能按钮。不会随着tab切换
+   */
+  toolbar?: Array<ActionSchema>;
+
+  /**
+   * 是否支持溢出滚动
+   */
+  scrollable?: boolean;
+
+  /**
+   * header和内容是否展示分割线
+   */
+  divider?: boolean;
+
+  /**
+   * 标题右侧的描述
+   */
+  description?: SchemaTpl;
+
+  /**
+   * 隐藏头部
+   */
+  hideHeader?: boolean;
+
+  /**
+   * 自定义样式
+   */
+  style?:
+    | string
+    | {
+        [propName: string]: any;
+      };
+}
+
+export interface PortletProps
+  extends RendererProps,
+    Omit<PortletSchema, 'className' | 'contentClassName'> {
+  activeKey?: number;
+  tabRender?: (
+    tab: PortletTabSchema,
+    props: PortletProps,
+    index: number
+  ) => JSX.Element;
+}
+
+export interface PortletState {
+  activeKey?: number;
+}
+
+export class Portlet extends React.Component<PortletProps, PortletState> {
+  static defaultProps: Partial<PortletProps> = {
+    className: '',
+    mode: 'line',
+    divider: true
+  };
+  renderTab?: (
+    tab: PortletTabSchema,
+    props: PortletProps,
+    index: number
+  ) => JSX.Element;
+  constructor(props: PortletProps) {
+    super(props);
+
+    const activeKey = props.activeKey || 0;
+
+    this.state = {
+      activeKey
+    };
+  }
+
+  @autobind
+  handleSelect(key: number) {
+    const {onSelect, tabs} = this.props;
+    if (typeof key === 'number' && key < tabs.length) {
+      this.setState({
+        activeKey: key
+      });
+    }
+
+    if (typeof onSelect === 'string') {
+      const selectFunc = str2AsyncFunction(onSelect, 'key', 'props');
+      selectFunc && selectFunc(key, this.props);
+    } else if (typeof onSelect === 'function') {
+      onSelect(key, this.props);
+    }
+  }
+
+  renderToolbarItem(toolbar: Array<ActionSchema>) {
+    const {render} = this.props;
+    let actions: Array<JSX.Element> = [];
+    if (Array.isArray(toolbar)) {
+      toolbar.forEach((action, index) =>
+        actions.push(
+          render(
+            `toolbar/${index}`,
+            {
+              type: 'button',
+              level: 'link',
+              size: 'sm',
+              ...(action as any)
+            },
+            {
+              key: index
+            }
+          )
+        )
+      );
+    }
+    return actions;
+  }
+
+  renderToolbar() {
+    const {toolbar, classnames: cx, classPrefix: ns, tabs} = this.props;
+    const activeKey = this.state.activeKey;
+    let tabToolbar = null;
+    let tabToolbarTpl = null;
+    // tabs里的toolbar
+    const toolbarTpl = toolbar ? (
+      <div className={cx(`${ns}toolbar`)}>
+        {this.renderToolbarItem(toolbar)}
+      </div>
+    ) : null;
+
+    // tab里的toolbar
+    if (typeof activeKey !== 'undefined') {
+      tabToolbar = tabs[activeKey]!.toolbar;
+      tabToolbarTpl = tabToolbar ? (
+        <div className={cx(`${ns}tab-toolbar`)}>
+          {this.renderToolbarItem(tabToolbar)}
+        </div>
+      ) : null;
+    }
+
+    return toolbarTpl || tabToolbarTpl ? (
+      <div className={cx(`${ns}Portlet-toolbar`)}>
+        {toolbarTpl}
+        {tabToolbarTpl}
+      </div>
+    ) : null;
+  }
+
+  renderDesc() {
+    const {
+      description: descTpl,
+      render,
+      classnames: cx,
+      classPrefix: ns,
+      data
+    } = this.props;
+    const desc = filter(descTpl, data);
+    return desc ? (
+      <span className={cx(`${ns}Portlet-header-desc`)}>{desc}</span>
+    ) : null;
+  }
+
+  renderTabs() {
+    const {
+      classnames: cx,
+      classPrefix: ns,
+      tabsClassName,
+      contentClassName,
+      linksClassName,
+      tabRender,
+      render,
+      data,
+      mode: dMode,
+      tabsMode,
+      unmountOnExit,
+      source,
+      mountOnEnter,
+      scrollable,
+      divider
+    } = this.props;
+    const mode = tabsMode || dMode;
+    const arr = resolveVariable(source, data);
+
+    let tabs = this.props.tabs;
+    if (!tabs) {
+      return null;
+    }
+
+    tabs = Array.isArray(tabs) ? tabs : [tabs];
+    let children: Array<JSX.Element | null> = [];
+
+    const tabClassname = cx(`${ns}Portlet-tab`, tabsClassName, {
+      ['unactive-select']: tabs.length <= 1,
+      ['no-divider']: !divider
+    });
+    if (Array.isArray(arr)) {
+      arr.forEach((value, index) => {
+        const ctx = createObject(
+          data,
+          isObject(value) ? {index, ...value} : {item: value, index}
+        );
+
+        children.push(
+          ...tabs.map((tab, tabIndex) =>
+            isVisible(tab, ctx) ? (
+              <Tab
+                {...(tab as any)}
+                title={filter(tab.title, ctx)}
+                disabled={isDisabled(tab, ctx)}
+                key={`${index * 1000 + tabIndex}`}
+                eventKey={index * 1000 + tabIndex}
+                mountOnEnter={mountOnEnter}
+                unmountOnExit={
+                  typeof tab.reload === 'boolean'
+                    ? tab.reload
+                    : typeof tab.unmountOnExit === 'boolean'
+                    ? tab.unmountOnExit
+                    : unmountOnExit
+                }
+              >
+                {render(
+                  `item/${index}/${tabIndex}`,
+                  (tab as any)?.type ? (tab as any) : tab.tab || tab.body,
+                  {
+                    data: ctx
+                  }
+                )}
+              </Tab>
+            ) : null
+          )
+        );
+      });
+    } else {
+      children = tabs.map((tab, index) =>
+        isVisible(tab, data) ? (
+          <Tab
+            {...(tab as any)}
+            title={filter(tab.title, data)}
+            disabled={isDisabled(tab, data)}
+            key={index}
+            eventKey={index}
+            mountOnEnter={mountOnEnter}
+            unmountOnExit={
+              typeof tab.reload === 'boolean'
+                ? tab.reload
+                : typeof tab.unmountOnExit === 'boolean'
+                ? tab.unmountOnExit
+                : unmountOnExit
+            }
+          >
+            {this.renderTab
+              ? this.renderTab(tab, this.props, index)
+              : tabRender
+              ? tabRender(tab, this.props, index)
+              : render(
+                  `tab/${index}`,
+                  (tab as any)?.type ? (tab as any) : tab.tab || tab.body
+                )}
+          </Tab>
+        ) : null
+      );
+    }
+
+    return (
+      <CTabs
+        classPrefix={ns}
+        classnames={cx}
+        mode={mode}
+        className={tabClassname}
+        contentClassName={contentClassName}
+        linksClassName={linksClassName}
+        activeKey={this.state.activeKey}
+        onSelect={this.handleSelect}
+        toolbar={this.renderToolbar()}
+        additionBtns={this.renderDesc()}
+        scrollable={scrollable}
+      >
+        {children}
+      </CTabs>
+    );
+  }
+
+  render() {
+    const {
+      className,
+      data,
+      classnames: cx,
+      classPrefix: ns,
+      style,
+      hideHeader
+    } = this.props;
+    const portletClassname = cx(`${ns}Portlet`, className, {
+      ['no-header']: hideHeader
+    });
+    const styleVar =
+      typeof style === 'string'
+        ? resolveVariable(style, data) || {}
+        : mapValues(style, s => resolveVariable(s, data) || s);
+
+    return (
+      <div className={portletClassname} style={styleVar}>
+        {this.renderTabs()}
+      </div>
+    );
+  }
+}
+
+@Renderer({
+  type: 'portlet'
+})
+export class PortletRenderer extends Portlet {}

package/src/renderers/Progress.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
-import {ServiceStore, IServiceStore} from '../store/service';
-import {Api, SchemaNode, PlainObject} from '../types';
-import {filter} from '../utils/tpl';
 import cx from 'classnames';
 import {BaseSchema, SchemaClassName} from '../Schema';
-import {getPropValue} from '../utils/helper';
+import {autobind, getPropValue, createObject} from '../utils/helper';
+import {filter} from '../utils/tpl';
 
+import Progress from '../components/Progress';
 /**
  * 进度展示控件。
  * 文档：https://baidu.gitee.io/amis/docs/components/progress
@@ -19,6 +18,11 @@ export interface ProgressSchema extends BaseSchema {
    */
   name?: string;
 
+  /**
+   * 进度条类型。
+   */
+  mode: 'line' | 'circle' | 'dashboard';
+
   /**
    * 进度条 CSS 类名
    */
@@ -32,7 +36,7 @@ export interface ProgressSchema extends BaseSchema {
   /**
    * 配置不通的值段，用不通的样式提示用户
    */
-  map?: Array<SchemaClassName>;
+  map?: Array<string>;
 
   /**
    * 是否显示值
@@ -53,13 +57,28 @@ export interface ProgressSchema extends BaseSchema {
    * 是否显示动画（只有在开启的时候才能看出来）
    */
   animate?: boolean;
+
+  /**
+   * 圆形进度条线的宽度
+   */
+  strokeWidth?: number;
+  /**
+   * 仪表盘进度条缺口角度，可取值 0 ~ 295
+   */
+  gapDegree?: number;
+  /**
+   * 仪表盘进度条缺口位置
+   */
+  gapPosition?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * 内容的模板函数
+   */
+  valueTpl?: string;
 }
 
 export interface ProgressProps
   extends RendererProps,
-    Omit<ProgressSchema, 'type' | 'className'> {
-  map: Array<SchemaClassName>;
-}
+    Omit<ProgressSchema, 'type' | 'className'> {}
 
 export class ProgressField extends React.Component<ProgressProps, object> {
   static defaultProps = {
@@ -67,20 +86,23 @@ export class ProgressField extends React.Component<ProgressProps, object> {
     progressClassName: '',
     progressBarClassName: '',
     map: ['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success'],
+    valueTpl: '${value}%',
     showLabel: true,
     stripe: false,
     animate: false
   };
 
-  autoClassName(value: number) {
-    const map = this.props.map;
-    let index = Math.floor((value * map.length) / 100);
-    index = Math.max(0, Math.min(map.length - 1, index));
-    return map[index];
+  @autobind
+  format(value: number) {
+    const {valueTpl, render, data} = this.props;
+    return render(`progress-value`, valueTpl + '', {
+      data: createObject(data, {value})
+    });
   }
 
   render() {
     const {
+      mode,
       className,
       placeholder,
       progressClassName,
@@ -89,39 +111,35 @@ export class ProgressField extends React.Component<ProgressProps, object> {
       stripe,
       animate,
       showLabel,
+      strokeWidth,
+      gapDegree,
+      gapPosition,
       classnames: cx
     } = this.props;
 
     let value = getPropValue(this.props);
-    let viewValue: React.ReactNode = (
-      <span className="text-muted">{placeholder}</span>
-    );
 
     if (/^\d*\.?\d+$/.test(value)) {
       value = parseFloat(value);
     }
-
-    if (typeof value === 'number') {
-      viewValue = [
-        <div key="progress" className={cx('Progress', progressClassName)}>
-          <div
-            className={cx(
-              'Progress-bar',
-              progressBarClassName || this.autoClassName(value),
-              {'Progress-bar--stripe': stripe},
-              {'Progress-bar--animate': animate}
-            )}
-            title={`${value}%`}
-            style={{
-              width: `${value}%`
-            }}
-          />
-        </div>,
-        showLabel ? <div key="value">{value}%</div> : null
-      ];
-    }
-
-    return <span className={cx('ProgressField', className)}>{viewValue}</span>;
+    return (
+      <Progress
+        value={value}
+        type={mode}
+        map={map}
+        stripe={stripe}
+        animate={animate}
+        showLabel={showLabel}
+        placeholder={placeholder}
+        format={this.format}
+        strokeWidth={strokeWidth}
+        gapDegree={gapDegree}
+        gapPosition={gapPosition}
+        className={className}
+        progressClassName={progressClassName}
+        progressBarClassName={progressBarClassName}
+      />
+    );
   }
 }
 

package/src/renderers/Property.tsx

@@ -5,8 +5,7 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {BaseSchema, SchemaExpression, SchemaObject, SchemaTpl} from '../Schema';
-import PopOver from './PopOver';
-import {resolveVariable} from '../utils/tpl-builtin';
+import {resolveVariableAndFilter} from '../utils/tpl-builtin';
 import {visibilityFilter} from '../utils/helper';
 
 export type PropertyItemProps = {
@@ -119,11 +118,14 @@ export default class Property extends React.Component<PropertyProps, object> {
    */
   prepareRows() {
     const {column = 3, items, source, data} = this.props;
-
     const propertyItems =
       (items
         ? items
-        : (resolveVariable(source, data) as Array<PropertyItem>)) || [];
+        : (resolveVariableAndFilter(
+            source,
+            data,
+            '| raw'
+          ) as Array<PropertyItem>)) || [];
 
     const rows: PropertyContent[][] = [];
 

package/src/renderers/Table/ColumnToggler.tsx

@@ -360,7 +360,7 @@ export default class ColumnToggler extends React.Component<
                     tooltipClassName={cx('ColumnToggler-tooltip')}
                     placement="top"
                     tooltip={column.label || ''}
-                    trigger={enableSorting ? 'click' : 'hover'}
+                    trigger={enableSorting ? [] : 'hover'}
                     key={column.index}
                   >
                     <li

package/src/renderers/Table/TableContent.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import {ClassNamesFn} from '../../theme';
-import {IColumn, IRow} from '../../store/table';
+import {IColumn, IRow, ITableStore} from '../../store/table';
 import {SchemaNode, Action} from '../../types';
 import {TableBody} from './TableBody';
 import {LocaleProps} from '../../locale';
 import {observer} from 'mobx-react';
 import {ActionSchema} from '../Action';
+import ItemActionsWrapper from './ItemActionsWrapper';
 
 export interface TableContentProps extends LocaleProps {
   className?: string;
@@ -50,10 +51,45 @@ export interface TableContentProps extends LocaleProps {
   prefixRow?: Array<any>;
   affixRow?: Array<any>;
   itemAction?: ActionSchema;
+  itemActions?: Array<Action>;
+  store: ITableStore;
 }
 
 @observer
 export class TableContent extends React.Component<TableContentProps> {
+  renderItemActions() {
+    const {itemActions, render, store, classnames: cx} = this.props;
+    const finalActions = Array.isArray(itemActions)
+      ? itemActions.filter(action => !action.hiddenOnHover)
+      : [];
+
+    if (!finalActions.length) {
+      return null;
+    }
+
+    return (
+      <ItemActionsWrapper store={store} classnames={cx}>
+        <div className={cx('Table-itemActions')}>
+          {finalActions.map((action, index) =>
+            render(
+              `itemAction/${index}`,
+              {
+                ...(action as any),
+                isMenuItem: true
+              },
+              {
+                key: index,
+                item: store.hoverRow,
+                data: store.hoverRow!.locals,
+                rowIndex: store.hoverRow!.index
+              }
+            )
+          )}
+        </div>
+      </ItemActionsWrapper>
+    );
+  }
+
   render() {
     const {
       placeholder,
@@ -82,7 +118,8 @@ export class TableContent extends React.Component<TableContentProps> {
       locale,
       translate,
       itemAction,
-      affixRow
+      affixRow,
+      store
     } = this.props;
 
     const tableClassName = cx('Table-table', this.props.tableClassName);
@@ -94,6 +131,7 @@ export class TableContent extends React.Component<TableContentProps> {
         className={cx('Table-content', className)}
         onScroll={onScroll}
       >
+        {store.hoverRow ? this.renderItemActions() : null}
         <table ref={tableRef} className={tableClassName}>
           <thead>
             {columnsGroup.length ? (