amis 1.6.5-beta.3 → 1.8.0-beta.0

package/src/renderers/Tabs.tsx

@@ -8,10 +8,11 @@ import {
   isDisabled,
   isObject,
   createObject,
-  getVariable
+  getVariable,
+  isObjectShallowModified
 } from '../utils/helper';
 import findIndex from 'lodash/findIndex';
-import {Tabs as CTabs, Tab} from '../components/Tabs';
+import {Tabs as CTabs, Tab, TabsMode} from '../components/Tabs';
 import {ClassNamesFn} from '../theme';
 import {
   BaseSchema,
@@ -87,6 +88,14 @@ export interface TabSchema extends Omit<BaseSchema, 'type'> {
    * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
    */
   horizontal?: FormSchemaHorizontal;
+  /**
+   * 是否可关闭，优先级高于 tabs 的 closable
+   */
+  closable?: boolean;
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
 }
 
 /**
@@ -114,7 +123,7 @@ export interface TabsSchema extends BaseSchema {
   /**
    * 展示形式
    */
-  tabsMode?: '' | 'line' | 'card' | 'radio' | 'vertical' | 'tiled';
+  tabsMode?: TabsMode;
 
   /**
    * 内容类名
@@ -150,9 +159,41 @@ export interface TabsSchema extends BaseSchema {
    */
   subFormHorizontal?: FormSchemaHorizontal;
   /**
-   * 是否支持溢出滚动
+   * 是否支持新增
+   */
+  addable?: boolean;
+  /**
+   * 是否支持删除
+   */
+  closable?: boolean;
+  /**
+   * 是否支持拖拽
+   */
+  draggable?: boolean;
+  /**
+   * 是否显示提示
+   */
+  showTip?: boolean;
+  /**
+   * tooltip 提示的类名
+   */
+  showTipClassName?: string;
+  /**
+   * 是否可编辑标签名
+   */
+  editable?: boolean;
+  /**
+   * 是否导航支持内容溢出滚动。属性废弃，为了兼容暂且保留
    */
   scrollable?: boolean;
+  /**
+   * 编辑器模式，侧边的位置
+   */
+  sidePosition?: 'left' | 'right';
+  /**
+   * 自定义增加按钮文案
+   */
+  addBtnText?: string;
 }
 
 export interface TabsProps
@@ -163,9 +204,15 @@ export interface TabsProps
   tabRender?: (tab: TabSchema, props: TabsProps, index: number) => JSX.Element;
 }
 
+interface TabSource extends TabSchema {
+  ctx?: any;
+}
+
 export interface TabsState {
   activeKey: any;
   prevKey: any;
+  localTabs: Array<TabSource>;
+  isFromSource: boolean;
 }
 
 export type TabsRendererEvent = 'change';
@@ -181,19 +228,20 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
 
   renderTab?: (tab: TabSchema, props: TabsProps, index: number) => JSX.Element;
   activeKey: any;
+  newTabDefaultId: number = 3;
 
   constructor(props: TabsProps) {
     super(props);
 
     const location = props.location || window.location;
-    const tabs = props.tabs;
+    const {tabs, source, data} = props;
     let activeKey: any = 0;
 
     if (typeof props.activeKey !== 'undefined') {
       activeKey = props.activeKey;
     } else if (location && Array.isArray(tabs)) {
       const hash = location.hash.substring(1);
-      const tab: TabSchema = find(tabs, tab => tab.hash === hash) as TabSchema;
+      const tab: TabSource = find(tabs, tab => tab.hash === hash) as TabSource;
 
       if (tab) {
         activeKey = tab.hash;
@@ -204,17 +252,50 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       activeKey = activeKey || (tabs[0] && tabs[0].hash) || 0;
     }
 
+    const [localTabs, isFromSource] = this.initTabArray(tabs, source, data);
+
     this.state = {
       prevKey: undefined,
-      activeKey: (this.activeKey = activeKey)
+      activeKey: (this.activeKey = activeKey),
+      localTabs,
+      isFromSource
     };
   }
 
+  // 初始化 tabs 数组，当从 source 获取数据源时
+  @autobind
+  initTabArray(tabs: Array<TabSource>, source?: string, data?: any): [Array<TabSource>, boolean] {
+    if (!tabs) {
+      return [[], false];
+    }
+
+    const arr = resolveVariableAndFilter(source, data, '| raw');
+    if (!Array.isArray(arr)) {
+      return [tabs, false];
+    }
+
+    tabs = Array.isArray(tabs) ? tabs : [tabs];
+
+    const sourceTabs: Array<TabSource> = [];
+    arr.forEach((value, index) => {
+      const ctx = createObject(
+        data,
+        isObject(value) ? {index, ...value} : {item: value, index}
+      );
+
+      sourceTabs.push(...tabs.map((tab: TabSource) => ({...tab, ctx})));
+    });
+
+    return [sourceTabs, true];
+  }
+
   componentDidMount() {
     this.autoJumpToNeighbour(this.activeKey);
 
     let {name, value, onChange, source, tabs, data} = this.props;
 
+    const localTabs = this.state.localTabs;
+
     // 如果没有配置 name ，说明不需要同步表单值
     if (
       !name ||
@@ -228,7 +309,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
     value = value ?? getVariable(data, name);
 
     //  如果有值，切到对应的 tab
-    if (value && Array.isArray(tabs)) {
+    if (value && Array.isArray(localTabs)) {
       const key = this.resolveKeyByValue(value);
       key !== undefined && this.handleSelect(key);
     } else {
@@ -241,17 +322,37 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
 
   componentDidUpdate(preProps: TabsProps, prevState: any) {
     const props = this.props;
+    let localTabs = this.state.localTabs;
 
-    if (props.location && props.location.hash !== preProps.location.hash) {
+    // 响应外部修改 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);
+
+    if (isTabsModified) {
+      const [newLocalTabs, isFromSource] = this.initTabArray(props.tabs, props.source, props.data);
+
+      this.setState({
+        localTabs: newLocalTabs,
+        isFromSource
+      });
+      localTabs = newLocalTabs;
+    }
+
+    if (props.location && preProps.location && props.location.hash !== preProps.location.hash) {
       const hash = props.location.hash.substring(1);
       if (!hash) {
         return;
       }
 
-      const tab: TabSchema = find(
-        props.tabs,
+      const tab: TabSource = find(
+        localTabs,
         tab => tab.hash === hash
-      ) as TabSchema;
+      ) as TabSource;
       if (tab && tab.hash && tab.hash !== this.state.activeKey) {
         this.setState({
           activeKey: (this.activeKey = tab.hash),
@@ -259,29 +360,29 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
         });
       }
     } else if (
-      Array.isArray(props.tabs) &&
-      Array.isArray(preProps.tabs) &&
-      JSON.stringify(props.tabs.map(item => item.hash)) !==
-        JSON.stringify(preProps.tabs.map(item => item.hash))
+      Array.isArray(localTabs) &&
+      Array.isArray(prevState.localTabs) &&
+      JSON.stringify(localTabs.map(item => item.hash)) !==
+        JSON.stringify(prevState.localTabs.map((item: TabSource) => item.hash))
     ) {
       let activeKey: any = this.state.activeKey;
       const location = props.location;
-      let tab: TabSchema | null = null;
+      let tab: TabSource | null = null;
 
-      if (location && Array.isArray(props.tabs)) {
+      if (location && Array.isArray(localTabs)) {
         const hash = location.hash.substring(1);
-        tab = find(props.tabs, tab => tab.hash === hash) as TabSchema;
+        tab = find(localTabs, tab => tab.hash === hash) as TabSource;
       }
 
       if (tab) {
         activeKey = tab.hash;
       } else if (
-        !props.tabs ||
-        !props.tabs.some((item, index) =>
+        !localTabs ||
+        !localTabs.some((item, index) =>
           item.hash ? item.hash === activeKey : index === activeKey
         )
       ) {
-        activeKey = (props.tabs && props.tabs[0] && props.tabs[0].hash) || 0;
+        activeKey = (localTabs && localTabs[0] && localTabs[0].hash) || 0;
       }
 
       this.setState({
@@ -323,54 +424,55 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
   }
 
   resolveTabByKey(key: any) {
-    const tabs = this.props.tabs;
+    const localTabs = this.state.localTabs;
 
-    if (!Array.isArray(tabs)) {
+    if (!Array.isArray(localTabs)) {
       return;
     }
 
-    return find(tabs, (tab: TabSchema, index) =>
+    return find(localTabs, (tab: TabSource, index) =>
       tab.hash ? tab.hash === key : index === key
     );
   }
 
   resolveKeyByValue(value: any) {
-    const tabs = this.props.tabs;
+    const localTabs = this.state.localTabs;
 
-    if (!Array.isArray(tabs)) {
+    if (!Array.isArray(localTabs)) {
       return;
     }
 
-    const tab: TabSchema = find(
-      tabs,
+    const tab: TabSource = find(
+      localTabs,
       tab => ((tab as any).value ?? tab.title) === value
-    ) as TabSchema;
+    ) as TabSource;
 
-    return tab && tab.hash ? tab.hash : tabs.indexOf(tab);
+    return tab && tab.hash ? tab.hash : localTabs.indexOf(tab);
   }
 
   @autobind
   autoJumpToNeighbour(key: any) {
     const {tabs, data} = this.props;
+    const localTabs = this.state.localTabs;
 
-    if (!Array.isArray(tabs)) {
+    if (!Array.isArray(localTabs)) {
       return;
     }
 
     // 当前 tab 可能不可见，所以需要自动切到一个可见的 tab, 向前找，找一圈
-    const tabIndex = findIndex(tabs, (tab: TabSchema, index) =>
+    const tabIndex = findIndex(localTabs, (tab: TabSource, index) =>
       tab.hash ? tab.hash === key : index === key
     );
 
-    if (tabs[tabIndex] && !isVisible(tabs[tabIndex], this.props.data)) {
-      let len = tabs.length;
+    if (localTabs[tabIndex] && !isVisible(localTabs[tabIndex], this.props.data)) {
+      let len = localTabs.length;
       let i = tabIndex - 1 + len;
       let tries = len - 1;
 
       while (tries--) {
         const index = i-- % len;
-        if (isVisible(tabs[index], data)) {
-          let activeKey = tabs[index].hash || index;
+        if (isVisible(localTabs[index], data)) {
+          let activeKey = localTabs[index].hash || index;
           this.setState({
             activeKey: (this.activeKey = activeKey)
           });
@@ -380,6 +482,60 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
     }
   }
 
+  @autobind
+  handleAdd() {
+    const localTabs = this.state.localTabs.concat();
+
+    localTabs.push({
+      title: `新增tab${this.newTabDefaultId++}`,
+      body: '新增tab 内容'
+    } as TabSource);
+
+    this.setState({
+      localTabs: localTabs
+    }, () => {
+      this.switchTo(this.state.localTabs.length - 1);
+    });
+  }
+
+  @autobind
+  handleClose(index: number, key: string | number) {
+    const originTabs = this.state.localTabs.concat();
+
+    originTabs.splice(index, 1);
+
+    this.setState({
+      localTabs: originTabs
+    });
+  }
+
+  @autobind
+  handleEdit(index: number, text: string) {
+    const originTabs = this.state.localTabs.concat();
+    originTabs[index].title = text;
+
+    this.setState({
+      localTabs: originTabs
+    });
+  }
+
+  @autobind
+  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);
+      }
+    });
+  }
+
   @autobind
   handleSelect(key: any) {
     const {env, onSelect, id} = this.props;
@@ -438,21 +594,22 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
 
   @autobind
   switchTo(index: number) {
-    const {tabs} = this.props;
+    const localTabs = this.state.localTabs;
 
-    Array.isArray(tabs) &&
-      tabs[index] &&
+    Array.isArray(localTabs) &&
+      localTabs[index] &&
       this.setState({
-        activeKey: (this.activeKey = tabs[index].hash || index)
+        activeKey: (this.activeKey = localTabs[index].hash || index)
       });
   }
 
   @autobind
   currentIndex(): number {
-    const {tabs} = this.props;
+    // const {tabs} = this.props;
+    const localTabs = this.state.localTabs;
 
-    return Array.isArray(tabs)
-      ? findIndex(tabs, (tab: TabSchema, index) =>
+    return Array.isArray(localTabs)
+      ? findIndex(localTabs, (tab: TabSource, index) =>
           tab.hash
             ? tab.hash === this.state.activeKey
             : index === this.state.activeKey
@@ -489,11 +646,17 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       formHorizontal,
       subFormMode,
       subFormHorizontal,
-      scrollable
+      addable,
+      closable,
+      draggable,
+      showTip,
+      showTipClassName,
+      editable,
+      sidePosition,
+      addBtnText
     } = this.props;
 
     const mode = tabsMode || dMode;
-    const arr = resolveVariableAndFilter(source, data, '| raw');
     let mountOnEnter = this.props.mountOnEnter;
 
     // 如果在form下面，其他tabs默认需要渲染出来
@@ -502,54 +665,41 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       mountOnEnter = false;
     }
 
-    let tabs = this.props.tabs;
-    if (!tabs) {
-      return null;
-    }
-
-    tabs = Array.isArray(tabs) ? tabs : [tabs];
+    const {localTabs: tabs, isFromSource} = this.state;
     let children: Array<JSX.Element | null> = [];
 
-    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,
-                    formMode: tab.mode || subFormMode || formMode,
-                    formHorizontal:
-                      tab.horizontal || subFormHorizontal || formHorizontal
-                  }
-                )}
-              </Tab>
-            ) : null
-          )
-        );
-      });
+    // 是否从 source 数据中生成
+    if (isFromSource) {
+      children = tabs.map((tab: TabSource, index: number) =>
+        isVisible(tab, tab.ctx) ? (
+          <Tab
+            {...(tab as any)}
+            title={filter(tab.title, tab.ctx)}
+            disabled={isDisabled(tab, tab.ctx)}
+            key={index}
+            eventKey={index}
+            mountOnEnter={mountOnEnter}
+            unmountOnExit={
+              typeof tab.reload === 'boolean'
+                ? tab.reload
+                : typeof tab.unmountOnExit === 'boolean'
+                ? tab.unmountOnExit
+                : unmountOnExit
+            }
+          >
+            {render(
+              `item/${index}`,
+              (tab as any)?.type ? (tab as any) : tab.tab || tab.body,
+              {
+                data: tab.ctx,
+                formMode: tab.mode || subFormMode || formMode,
+                formHorizontal:
+                  tab.horizontal || subFormHorizontal || formHorizontal
+              }
+            )}
+          </Tab>
+        ) : null
+      );
     } else {
       children = tabs.map((tab, index) =>
         isVisible(tab, data) ? (
@@ -591,13 +741,24 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
         classPrefix={ns}
         classnames={cx}
         mode={mode}
+        closable={closable}
         className={className}
         contentClassName={contentClassName}
         linksClassName={linksClassName}
         onSelect={this.handleSelect}
         activeKey={this.state.activeKey}
         toolbar={this.renderToolbar()}
-        scrollable={scrollable}
+        addable={addable}
+        onAdd={this.handleAdd}
+        onClose={this.handleClose}
+        draggable={draggable}
+        onDragChange={this.handleDragChange}
+        showTip={showTip}
+        showTipClassName={showTipClassName}
+        editable={editable}
+        onEdit={this.handleEdit}
+        sidePosition={sidePosition}
+        addBtnText={addBtnText}
       >
         {children}
       </CTabs>