amis 1.7.0 → 1.8.0-beta.13

package/src/renderers/Tabs.tsx

@@ -89,9 +89,9 @@ export interface TabSchema extends Omit<BaseSchema, 'type'> {
    */
   horizontal?: FormSchemaHorizontal;
   /**
-   * 是否可关闭，优先级高于 tabs 的 closeable
+   * 是否可关闭，优先级高于 tabs 的 closable
    */
-  closeable?: boolean;
+  closable?: boolean;
   /**
    * 是否禁用
    */
@@ -186,6 +186,14 @@ export interface TabsSchema extends BaseSchema {
    * 是否导航支持内容溢出滚动。属性废弃，为了兼容暂且保留
    */
   scrollable?: boolean;
+  /**
+   * 编辑器模式，侧边的位置
+   */
+  sidePosition?: 'left' | 'right';
+  /**
+   * 自定义增加按钮文案
+   */
+  addBtnText?: string;
 }
 
 export interface TabsProps
@@ -256,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];
     }
@@ -317,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,
@@ -335,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;
@@ -456,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;
@@ -483,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
@@ -512,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
@@ -563,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;
     }
@@ -643,7 +683,9 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       draggable,
       showTip,
       showTipClassName,
-      editable
+      editable,
+      sidePosition,
+      addBtnText
     } = this.props;
 
     const mode = tabsMode || dMode;
@@ -747,6 +789,8 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
         showTipClassName={showTipClassName}
         editable={editable}
         onEdit={this.handleEdit}
+        sidePosition={sidePosition}
+        addBtnText={addBtnText}
       >
         {children}
       </CTabs>
@@ -760,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

@@ -0,0 +1,262 @@
+import React from 'react';
+import {Renderer, RendererProps} from '../factory';
+import {BaseSchema, SchemaCollection} from '../Schema';
+import {filter} from '../utils/tpl';
+import {escapeHtml} from '../utils/tpl-builtin';
+import {buildStyle} from '../utils/style';
+import {TooltipWrapper as TooltipWrapperComp} from '../components';
+
+import type {Trigger, TooltipObject} from '../components/TooltipWrapper';
+
+export interface TooltipWrapperSchema extends BaseSchema {
+  /**
+   * 文字提示容器
+   */
+  type: 'tooltip-wrapper';
+
+  /**
+   * 文字提示标题
+   */
+  title?: string;
+
+  /**
+   * 文字提示内容，兼容 tooltip，但建议通过 content 来实现提示内容
+   */
+  content?: string;
+
+  /**
+   *  @deprecated 文字提示内容
+   */
+  tooltip?: string;
+
+  /**
+   * 文字提示浮层出现位置，默认为top
+   */
+  placement?: 'top' | 'right' | 'bottom' | 'left';
+
+  /**
+   * 浮层位置相对偏移量
+   */
+  offset?: [number, number];
+
+  /**
+   * 是否展示浮层指向箭头
+   */
+  showArrow?: boolean;
+
+  /**
+   * 是否禁用提示
+   */
+  disabled?: boolean;
+
+  /**
+   * 浮层触发方式，默认为hover
+   */
+  trigger?: Trigger | Array<Trigger>;
+
+  /**
+   * 浮层延迟显示时间, 单位 ms
+   */
+
+  mouseEnterDelay?: number;
+  /**
+   * 浮层延迟隐藏时间, 单位 ms
+   */
+  mouseLeaveDelay?: number;
+
+  /**
+   * 是否点击非内容区域关闭提示，默认为true
+   */
+  rootClose?: boolean;
+
+  /**
+   * 内容区域
+   */
+  body?: SchemaCollection;
+
+  /**
+   * 内容区包裹标签
+   */
+  wrapperComponent: string;
+
+  /**
+   * 内容区是否内联显示，默认为false
+   */
+  inline?: boolean;
+
+  /**
+   * 主题样式， 默认为light
+   */
+  tooltipTheme?: 'light' | 'dark';
+
+  /**
+   * 内容区自定义样式
+   */
+  style?: {
+    [propName: string]: any;
+  };
+
+  /**
+   * 是否可以移入浮层中, 默认true
+   */
+  enterable?: boolean;
+
+  /**
+   * 自定义提示浮层样式
+   */
+  tooltipStyle?: {
+    [propName: string]: any;
+  };
+
+  /**
+   * 内容区CSS类名
+   */
+  className?: string;
+
+  /**
+   * 文字提示浮层CSS类名
+   */
+  tooltipClassName?: string;
+}
+
+export interface TooltipWrapperProps extends RendererProps {
+  /**
+   * 文字提示标题
+   */
+  title?: string;
+  /**
+   * 文字提示
+   */
+  content?: string;
+  tooltip?: string;
+  /**
+   * 文字提示位置
+   */
+  placement: 'top' | 'right' | 'bottom' | 'left';
+  inline?: boolean;
+  trigger: Trigger | Array<Trigger>;
+  rootClose?: boolean;
+  showArrow?: boolean;
+  offset?: [number, number];
+  disabled?: boolean;
+  mouseEnterDelay?: number;
+  mouseLeaveDelay?: number;
+  container?: React.ReactNode;
+  style?: React.CSSProperties;
+  tooltipStyle?: React.CSSProperties;
+  wrapperComponent?: string;
+  tooltipTheme?: 'light' | 'dark';
+}
+
+interface TooltipWrapperState {}
+
+export default class TooltipWrapper extends React.Component<
+  TooltipWrapperProps,
+  TooltipWrapperState
+> {
+  static defaultProps: Pick<
+    TooltipWrapperProps,
+    | 'placement'
+    | 'trigger'
+    | 'rootClose'
+    | 'mouseEnterDelay'
+    | 'mouseLeaveDelay'
+    | 'inline'
+    | 'wrap'
+    | 'tooltipTheme'
+  > = {
+    placement: 'top',
+    trigger: 'hover',
+    rootClose: true,
+    mouseEnterDelay: 0,
+    mouseLeaveDelay: 200,
+    inline: false,
+    wrap: false,
+    tooltipTheme: 'light'
+  };
+
+  constructor(props: TooltipWrapperProps) {
+    super(props);
+  }
+
+  renderBody() {
+    const {
+      render,
+      classnames: cx,
+      body,
+      className,
+      wrapperComponent,
+      inline,
+      style,
+      data,
+      wrap
+    } = this.props;
+    const Comp =
+      (wrapperComponent as keyof JSX.IntrinsicElements) ||
+      (inline ? 'span' : 'div');
+
+    return (
+      <Comp
+        className={cx('TooltipWrapper', className, {
+          'TooltipWrapper--inline': inline
+        })}
+        style={buildStyle(style, data)}
+      >
+        {render('body', body)}
+      </Comp>
+    );
+  }
+
+  render() {
+    const {
+      classPrefix: ns,
+      classnames: cx,
+      tooltipClassName,
+      tooltipTheme,
+      container,
+      placement,
+      rootClose,
+      tooltipStyle,
+      title,
+      content,
+      tooltip,
+      mouseEnterDelay,
+      mouseLeaveDelay,
+      trigger,
+      offset,
+      showArrow,
+      disabled,
+      enterable,
+      data
+    } = this.props;
+
+    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} tooltip={tooltipObj}>
+        {this.renderBody()}
+      </TooltipWrapperComp>
+    );
+  }
+}
+
+@Renderer({
+  type: 'tooltip-wrapper'
+})
+export class TooltipWrapperRenderer extends TooltipWrapper {}