amis 1.8.0-beta.1 → 1.8.0-beta.13

package/src/renderers/Tabs.tsx

@@ -264,7 +264,11 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
 
   // 初始化 tabs 数组，当从 source 获取数据源时
   @autobind
-  initTabArray(tabs: Array<TabSource>, source?: string, data?: any): [Array<TabSource>, boolean] {
+  initTabArray(
+    tabs: Array<TabSource>,
+    source?: string,
+    data?: any
+  ): [Array<TabSource>, boolean] {
     if (!tabs) {
       return [[], false];
     }
@@ -325,16 +329,28 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
     let localTabs = this.state.localTabs;
 
     // 响应外部修改 tabs
-    const isTabsModified = isObjectShallowModified({
-      tabs: props.tabs,
-      source: resolveVariableAndFilter(props.source, props.data, '| raw')
-    }, {
-      tabs: preProps.tabs,
-      source: resolveVariableAndFilter(preProps.source, preProps.data, '| raw')
-    }, false);
+    const isTabsModified = isObjectShallowModified(
+      {
+        tabs: props.tabs,
+        source: resolveVariableAndFilter(props.source, props.data, '| raw')
+      },
+      {
+        tabs: preProps.tabs,
+        source: resolveVariableAndFilter(
+          preProps.source,
+          preProps.data,
+          '| raw'
+        )
+      },
+      false
+    );
 
     if (isTabsModified) {
-      const [newLocalTabs, isFromSource] = this.initTabArray(props.tabs, props.source, props.data);
+      const [newLocalTabs, isFromSource] = this.initTabArray(
+        props.tabs,
+        props.source,
+        props.data
+      );
 
       this.setState({
         localTabs: newLocalTabs,
@@ -343,7 +359,11 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       localTabs = newLocalTabs;
     }
 
-    if (props.location && preProps.location && props.location.hash !== preProps.location.hash) {
+    if (
+      props.location &&
+      preProps.location &&
+      props.location.hash !== preProps.location.hash
+    ) {
       const hash = props.location.hash.substring(1);
       if (!hash) {
         return;
@@ -464,7 +484,10 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       tab.hash ? tab.hash === key : index === key
     );
 
-    if (localTabs[tabIndex] && !isVisible(localTabs[tabIndex], this.props.data)) {
+    if (
+      localTabs[tabIndex] &&
+      !isVisible(localTabs[tabIndex], this.props.data)
+    ) {
       let len = localTabs.length;
       let i = tabIndex - 1 + len;
       let tries = len - 1;
@@ -491,11 +514,14 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       body: '新增tab 内容'
     } as TabSource);
 
-    this.setState({
-      localTabs: localTabs
-    }, () => {
-      this.switchTo(this.state.localTabs.length - 1);
-    });
+    this.setState(
+      {
+        localTabs: localTabs
+      },
+      () => {
+        this.switchTo(this.state.localTabs.length - 1);
+      }
+    );
   }
 
   @autobind
@@ -520,20 +546,23 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
   }
 
   @autobind
-  async handleDragChange(e: any){
+  async handleDragChange(e: any) {
     const activeTab = this.resolveTabByKey(this.activeKey);
     const originTabs: TabSource[] = this.state.localTabs.concat();
 
     originTabs.splice(e.newIndex, 0, originTabs.splice(e.oldIndex, 1)[0]);
 
-    this.setState({
-      localTabs: originTabs
-    }, () => {
-      if (activeTab) {
-        const newActiveTabIndex = originTabs.indexOf(activeTab);
-        this.switchTo(newActiveTabIndex);
+    this.setState(
+      {
+        localTabs: originTabs
+      },
+      () => {
+        if (activeTab) {
+          const newActiveTabIndex = originTabs.indexOf(activeTab);
+          this.switchTo(newActiveTabIndex);
+        }
       }
-    });
+    );
   }
 
   @autobind
@@ -571,9 +600,12 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
   @autobind
   async handleChange(key: any, name: any) {
     const {dispatchEvent, data, onChange} = this.props;
-    const rendererEvent = await dispatchEvent('change', createObject(data, {
-      value: key,
-    }));
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {
+        value: key
+      })
+    );
     if (rendererEvent?.prevented) {
       return;
     }
@@ -772,4 +804,19 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
 @Renderer({
   type: 'tabs'
 })
-export class TabsRenderer extends Tabs {}
+export class TabsRenderer extends Tabs {
+  static contextType = ScopedContext;
+
+  constructor(props: TabsProps, context: IScopedContext) {
+    super(props);
+
+    const scoped = context;
+    scoped.registerComponent(this);
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount?.();
+    const scoped = this.context as IScopedContext;
+    scoped.unRegisterComponent(this);
+  }
+}

package/src/renderers/TooltipWrapper.tsx

@@ -6,7 +6,7 @@ import {escapeHtml} from '../utils/tpl-builtin';
 import {buildStyle} from '../utils/style';
 import {TooltipWrapper as TooltipWrapperComp} from '../components';
 
-import type {Trigger} from '../components/TooltipWrapper';
+import type {Trigger, TooltipObject} from '../components/TooltipWrapper';
 
 export interface TooltipWrapperSchema extends BaseSchema {
   /**
@@ -20,7 +20,12 @@ export interface TooltipWrapperSchema extends BaseSchema {
   title?: string;
 
   /**
-   * 文字提示
+   * 文字提示内容，兼容 tooltip，但建议通过 content 来实现提示内容
+   */
+  content?: string;
+
+  /**
+   *  @deprecated 文字提示内容
    */
   tooltip?: string;
 
@@ -29,15 +34,35 @@ export interface TooltipWrapperSchema extends BaseSchema {
    */
   placement?: 'top' | 'right' | 'bottom' | 'left';
 
+  /**
+   * 浮层位置相对偏移量
+   */
+  offset?: [number, number];
+
+  /**
+   * 是否展示浮层指向箭头
+   */
+  showArrow?: boolean;
+
+  /**
+   * 是否禁用提示
+   */
+  disabled?: boolean;
+
   /**
    * 浮层触发方式，默认为hover
    */
   trigger?: Trigger | Array<Trigger>;
 
   /**
-   * 浮层隐藏延迟时间，单位ms，默认0
+   * 浮层延迟显示时间, 单位 ms
+   */
+
+  mouseEnterDelay?: number;
+  /**
+   * 浮层延迟隐藏时间, 单位 ms
    */
-  delay?: number;
+  mouseLeaveDelay?: number;
 
   /**
    * 是否点击非内容区域关闭提示，默认为true
@@ -60,7 +85,7 @@ export interface TooltipWrapperSchema extends BaseSchema {
   inline?: boolean;
 
   /**
-   * 浮层主题色，默认为light
+   * 主题样式， 默认为light
    */
   tooltipTheme?: 'light' | 'dark';
 
@@ -71,6 +96,11 @@ export interface TooltipWrapperSchema extends BaseSchema {
     [propName: string]: any;
   };
 
+  /**
+   * 是否可以移入浮层中, 默认true
+   */
+  enterable?: boolean;
+
   /**
    * 自定义提示浮层样式
    */
@@ -97,6 +127,7 @@ export interface TooltipWrapperProps extends RendererProps {
   /**
    * 文字提示
    */
+  content?: string;
   tooltip?: string;
   /**
    * 文字提示位置
@@ -105,7 +136,11 @@ export interface TooltipWrapperProps extends RendererProps {
   inline?: boolean;
   trigger: Trigger | Array<Trigger>;
   rootClose?: boolean;
-  delay?: number;
+  showArrow?: boolean;
+  offset?: [number, number];
+  disabled?: boolean;
+  mouseEnterDelay?: number;
+  mouseLeaveDelay?: number;
   container?: React.ReactNode;
   style?: React.CSSProperties;
   tooltipStyle?: React.CSSProperties;
@@ -124,7 +159,8 @@ export default class TooltipWrapper extends React.Component<
     | 'placement'
     | 'trigger'
     | 'rootClose'
-    | 'delay'
+    | 'mouseEnterDelay'
+    | 'mouseLeaveDelay'
     | 'inline'
     | 'wrap'
     | 'tooltipTheme'
@@ -132,7 +168,8 @@ export default class TooltipWrapper extends React.Component<
     placement: 'top',
     trigger: 'hover',
     rootClose: true,
-    delay: 0,
+    mouseEnterDelay: 0,
+    mouseLeaveDelay: 200,
     inline: false,
     wrap: false,
     tooltipTheme: 'light'
@@ -172,41 +209,47 @@ export default class TooltipWrapper extends React.Component<
 
   render() {
     const {
-      tooltipClassName,
       classPrefix: ns,
       classnames: cx,
+      tooltipClassName,
+      tooltipTheme,
       container,
       placement,
       rootClose,
       tooltipStyle,
       title,
+      content,
       tooltip,
-      delay,
+      mouseEnterDelay,
+      mouseLeaveDelay,
       trigger,
-      tooltipTheme,
+      offset,
+      showArrow,
+      disabled,
+      enterable,
       data
     } = this.props;
 
-    const tooltipObj = {
-      title: escapeHtml(filter(title, data)),
-      content: escapeHtml(filter(tooltip, data))
+    const tooltipObj: TooltipObject = {
+      title: filter(title, data),
+      content: filter(content || tooltip, data),
+      style: buildStyle(tooltipStyle, data),
+      placement,
+      trigger,
+      rootClose,
+      container,
+      tooltipTheme,
+      tooltipClassName,
+      mouseEnterDelay,
+      mouseLeaveDelay,
+      offset,
+      showArrow,
+      disabled,
+      enterable
     };
 
     return (
-      <TooltipWrapperComp
-        classPrefix={ns}
-        classnames={cx}
-        style={buildStyle(tooltipStyle, data)}
-        placement={placement}
-        tooltip={tooltipObj}
-        trigger={trigger}
-        rootClose={rootClose}
-        delay={delay}
-        container={container}
-        tooltipClassName={cx(tooltipClassName, {
-          'Tooltip--dark': tooltipTheme === 'dark'
-        })}
-      >
+      <TooltipWrapperComp classPrefix={ns} classnames={cx} tooltip={tooltipObj}>
         {this.renderBody()}
       </TooltipWrapperComp>
     );