amis 1.3.5-beta.7 → 1.4.2-beta.11

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/Property.tsx

@@ -6,7 +6,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 {resolveVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
 import {visibilityFilter} from '../utils/helper';
 
 export type PropertyItemProps = {
@@ -123,7 +123,8 @@ export default class Property extends React.Component<PropertyProps, object> {
     const propertyItems =
       (items
         ? items
-        : (resolveVariable(source, data) as Array<PropertyItem>)) || [];
+        : (resolveVariableAndFilter(source, data) as Array<PropertyItem>)) ||
+      [];
 
     const rows: PropertyContent[][] = [];
 

package/src/renderers/SearchBox.tsx

@@ -56,10 +56,17 @@ interface SearchBoxProps
   onQuery?: (query: {[propName: string]: string}) => void;
 }
 
+export interface SearchBoxState {
+  value: string;
+}
+
 @Renderer({
   type: 'search-box'
 })
-export class SearchBoxRenderer extends React.Component<SearchBoxProps> {
+export class SearchBoxRenderer extends React.Component<
+  SearchBoxProps,
+  SearchBoxState
+> {
   static defaultProps = {
     name: 'keywords',
     mini: false,
@@ -68,6 +75,18 @@ export class SearchBoxRenderer extends React.Component<SearchBoxProps> {
 
   static propsList: Array<string> = ['mini', 'searchImediately'];
 
+  constructor(props: SearchBoxProps) {
+    super(props);
+    this.state = {
+      value: getPropValue(props) || ''
+    };
+  }
+
+  @autobind
+  handleChange(value: string) {
+    this.setState({value});
+  }
+
   @autobind
   handleCancel() {
     const name = this.props.name;
@@ -100,7 +119,7 @@ export class SearchBoxRenderer extends React.Component<SearchBoxProps> {
       className
     } = this.props;
 
-    const value = getPropValue(this.props);
+    const value = this.state.value;
 
     return (
       <SearchBox
@@ -109,13 +128,13 @@ export class SearchBoxRenderer extends React.Component<SearchBoxProps> {
         disabled={!onQuery}
         defaultActive={!!value}
         defaultValue={onChange ? undefined : value}
-        value={onChange ? value : undefined}
+        value={value}
         mini={mini}
         searchImediately={searchImediately}
         onSearch={this.handleSearch}
         onCancel={this.handleCancel}
         placeholder={placeholder}
-        onChange={onChange}
+        onChange={this.handleChange}
       />
     );
   }

package/src/renderers/Service.tsx

@@ -7,7 +7,12 @@ import {filter, evalExpression} from '../utils/tpl';
 import cx from 'classnames';
 import Scoped, {ScopedContext, IScopedContext} from '../Scoped';
 import {observer} from 'mobx-react';
-import {isApiOutdated, isEffectiveApi} from '../utils/api';
+import {
+  buildApi,
+  isApiOutdated,
+  isEffectiveApi,
+  str2AsyncFunction
+} from '../utils/api';
 import {Spinner} from '../components';
 import {autobind, isEmpty, isVisible, qsstringify} from '../utils/helper';
 import {
@@ -40,6 +45,11 @@ export interface ServiceSchema extends BaseSchema {
    */
   ws?: string;
 
+  /**
+   * 通过调用外部函数来获取数据
+   */
+  dataProvider?: string | Function;
+
   /**
    * 内容区域
    */
@@ -111,6 +121,8 @@ export default class Service extends React.Component<ServiceProps> {
   // 主要是用于关闭 socket
   socket: any;
 
+  dataProviderUnsubscribe?: Function;
+
   static defaultProps: Partial<ServiceProps> = {
     messages: {
       fetchFailed: 'fetchFailed'
@@ -130,6 +142,8 @@ export default class Service extends React.Component<ServiceProps> {
     this.initInterval = this.initInterval.bind(this);
     this.afterDataFetch = this.afterDataFetch.bind(this);
     this.afterSchemaFetch = this.afterSchemaFetch.bind(this);
+    this.runDataProvider = this.runDataProvider.bind(this);
+    this.dataProviderSetData = this.dataProviderSetData.bind(this);
   }
 
   componentDidMount() {
@@ -168,12 +182,21 @@ export default class Service extends React.Component<ServiceProps> {
       if (this.socket) {
         this.socket.close();
       }
-      this.socket = store.fetchWSData(props.ws, this.afterDataFetch);
+      this.socket = this.fetchWSData(props.ws, store.data);
+    }
+
+    if (props.defaultData !== prevProps.defaultData) {
+      store.reInitData(props.defaultData);
+    }
+
+    if (props.dataProvider !== prevProps.dataProvider) {
+      this.runDataProvider();
     }
   }
 
   componentWillUnmount() {
     this.mounted = false;
+    this.runDataProviderUnsubscribe();
     clearTimeout(this.timer);
     if (this.socket && this.socket.close) {
       this.socket.close();
@@ -189,6 +212,7 @@ export default class Service extends React.Component<ServiceProps> {
       ws,
       initFetch,
       initFetchOn,
+      dataProvider,
       store,
       messages: {fetchSuccess, fetchFailed}
     } = this.props;
@@ -212,8 +236,82 @@ export default class Service extends React.Component<ServiceProps> {
     }
 
     if (ws) {
-      this.socket = store.fetchWSData(ws, this.afterDataFetch);
+      this.socket = this.fetchWSData(ws, store.data);
     }
+
+    if (dataProvider) {
+      this.runDataProvider();
+    }
+  }
+
+  // 使用外部函数获取数据
+  async runDataProvider() {
+    this.runDataProviderUnsubscribe();
+    const {dataProvider, store} = this.props;
+    let dataProviderFunc = dataProvider;
+
+    if (typeof dataProvider === 'string' && dataProvider) {
+      dataProviderFunc = str2AsyncFunction(dataProvider, 'data', 'setData')!;
+    }
+    if (typeof dataProviderFunc === 'function') {
+      const unsubscribe = await dataProviderFunc(
+        store.data,
+        this.dataProviderSetData
+      );
+      if (typeof unsubscribe === 'function') {
+        this.dataProviderUnsubscribe = unsubscribe;
+      }
+    }
+  }
+
+  // 运行销毁外部函数的方法
+  runDataProviderUnsubscribe() {
+    if (typeof this.dataProviderUnsubscribe === 'function') {
+      try {
+        this.dataProviderUnsubscribe();
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }
+
+  // 外部函数回调更新数据
+  dataProviderSetData(data: any) {
+    if (!this.mounted) {
+      return;
+    }
+    const {store} = this.props;
+    store.updateData(data, undefined, false);
+    store.setHasRemoteData();
+  }
+
+  // 使用 websocket 获取使用，因为有异步所以放这里而不是 store 实现
+  fetchWSData(ws: string | Api, data: any) {
+    const {env, store} = this.props;
+    const wsApi = buildApi(ws, data);
+
+    env.wsFetcher(
+      wsApi,
+      (data: any) => {
+        let returndata = data;
+        if ('status' in data && 'data' in data) {
+          returndata = data.data;
+          if (data.status !== 0) {
+            store.updateMessage(data.msg, true);
+            env.notify('error', data.msg);
+            return;
+          }
+        }
+        store.updateData(returndata, undefined, false);
+        store.setHasRemoteData();
+        // 因为 WebSocket 只会获取纯数据，所以没有 msg 之类的
+        this.afterDataFetch({ok: true, data: returndata});
+      },
+      (error: any) => {
+        store.updateMessage(error, true);
+        env.notify('error', error);
+      }
+    );
   }
 
   afterDataFetch(result: any) {

package/src/renderers/SparkLine.tsx

@@ -36,6 +36,11 @@ export interface SparkLineSchema extends BaseSchema {
    */
   clickAction?: ActionSchema;
 
+  /**
+   * 空数据时显示的内容
+   */
+  placeholder?: string;
+
   // /**
   //  * 线的转折是否要有圆角。默认为 2
   //  */