欧美日韩精品久久免费,国产性色AV网址,国产成人国产在线观看入口

Lifecycle

自定義菜單本質(zhì)上是一個(gè)生命周期(Lifecycle)對(duì)象, 其接口為：

interface Lifecycle {
  bootstrap?: LifecycleBootstrap;
  mount?: LifecycleMount;
  unmount?: LifecycleUnmount;
  update?: LifecycleUpdate;
}

例子

// 這是一個(gè)自定義菜單
const CustomMenu = {
	bootstrap: (props) => {},
  mount: (props) => {},
  unmount: (props) => {},
  update: (props) => {},
}

在 Quick BI 中, 自定義菜單與自定義組件的生命周期完全相同, 具體詳情請(qǐng)參考自定義組件生命周期。

說(shuō)明

在大多數(shù)情況下，你并不需要關(guān)心自定義菜單的生命周期，bi-open-Menu-sdk提供了創(chuàng)建自定義菜單的createBIComponent函數(shù)，直接調(diào)用即可。

LifecycleProps

LifecycleProps 描述的是傳入自定義菜單各個(gè)生命周期的 props 參數(shù)類型. 包含了 customProps 兩個(gè)屬性, 其接口為：

interface LifecycleProps {
  customProps?: MenuComponentProps;
}

例子

class MyComponent {
	mount(props: LifecycleProps) {...}// props 是 LifecycleProps 類型
  update(props: LifecycleProps) {...}
  unmount(props: LifecycleProps) {...}
}

const MyReactComponent: React.FC<LifecycleProps> = (props) => <div>...<div/> // props 是 LifecycleProps 類型

在 Quick BI 中, 自定義菜單與自定義組件的生命周期屬性完全相同, 具體詳情請(qǐng)參考自定義菜單生命周期屬性。

bi-open-Menu-sdk 提供了創(chuàng)建自定義菜單的 createBIComponent 函數(shù), 并對(duì)LifecycleProps進(jìn)行了封裝，并通過(guò) React 的 props 傳入，以下統(tǒng)一稱其為 menuComponentProps。

menuComponentProps

menuComponentProps 是自定義菜單運(yùn)行時(shí)的一些信息，其接口為：

/**
 * 自定義菜單 props 接口
 */
export interface MenuComponentProps {
  /** 頁(yè)面信息 */
  pageConfig: MenuPageConfig;
   /** 操作 */
  dispatch?: MenuComponentPropsDispatch;
  /** 自定義菜單展示模式 */
  menuMode?: CustomMenuMode;
}

menuComponentProps.menuMode
自定義菜單展示模式, 可能有以下幾種取值：
- 1 - 平鋪，直接展示在界面上
- 2 - 收起，隱藏至更多下拉框中

在 Quick BI 中, 所有的自定義菜單均會(huì)繼承 MenuComponentProps

圖標(biāo)自定義菜單屬性
電子表格自定義菜單屬性

menuComponentProps.pageConfig

代表自定義菜單當(dāng)前頁(yè)面信息配置, 其接口為：

interface MenuPageConfig {
  /** 工作空間id */
  workspaceId: string;
  /** 頁(yè)面id */
  id: string;
  /** 當(dāng)前頁(yè)面展示模式 */
  mode: DashboardDisplayMode;
  /** 端設(shè)備（默認(rèn)pc） */
  device?: 'pc' | 'mobile';
}

workspaceId：當(dāng)前工作空間id
id：當(dāng)前頁(yè)面id
mode：當(dāng)前頁(yè)面的模式

preview：查看態(tài), 例如儀表板的查看態(tài)
edit：編輯態(tài), 例如儀表板的編輯頁(yè)

pageType：字段類型, 可能有以下幾種取值：

REPORT：電子表格
PAGE：儀表板

menuComponentProps.dispatch

自定義菜單修改屬性或觸發(fā)行為的函數(shù)

(param: {
  type: 'openModal' | 'closeModal'
 	paylpad: any
}) => void

參數(shù)

param

行為類型參數(shù), param.type 共有以下類型：

openModal

自定義菜單的打開(kāi)彈窗操作，調(diào)用后會(huì)喚起彈窗。

此時(shí) =payload的類型為payload: MenuModalFuncProps，其中MenuModalFuncProps接口定義為：

export interface MenuModalFuncProps {
  /** PC端彈窗寬度 */
  width?: string | number;
  /** PC端和移動(dòng)端點(diǎn)擊取消按鈕時(shí)的回調(diào) */
  onCancel?: (...args: any[]) => any;
  /** 內(nèi)容 */
  content?: React.ReactNode;
  /** 標(biāo)題 */
  title?: string;
  /** PC端點(diǎn)擊確定回調(diào)，返回 promise 可以延遲關(guān)閉。 */
  onOk?: (...args: any[]) => any;
  /** PC端確認(rèn)按鈕文字 */
  okText?: React.ReactNode;
  /** PC端取消按鈕文字 */
  cancelText?: React.ReactNode;
  /** PC端確認(rèn)按鈕屬性 */
  okButtonProps?: {
    style?: React.CSSProperties;
    disabled?: boolean | undefined;
  };
  /** PC端取消按鈕屬性 */
  cancelButtonProps?: {
    style?: React.CSSProperties;
    disabled?: boolean | undefined;
  };
}

closeModal
自定義菜單的手動(dòng)關(guān)閉彈窗操作. 調(diào)用后會(huì)關(guān)閉最近一次喚起的彈窗。
此時(shí)無(wú)需傳入payload。

menuComponentProps.chart

chart 屬性只有在圖表卡片下的菜單才會(huì)傳入，圖表的數(shù)據(jù)字段配置, 其接口為：

export interface MenuComponentChartProps extends MenuComponentProps {
  /** 圖表信息 */
  chart: MenuChart;
}

其中 MenuChart 與自定義組件的 customProps 完全相同, 具體請(qǐng)參考customProps。

menuComponentProps.sheets

sheets 屬性只有在電子表格的菜單才會(huì)傳入，圖表的數(shù)據(jù)字段配置, 其接口為：

export interface MenuComponentExcelProps extends MenuComponentProps {
  sheets: MenuSheet[];
}

其中MenuSheet是電子表格數(shù)據(jù)，其數(shù)據(jù)結(jié)構(gòu)是一個(gè)數(shù)組。

interface MenuSheet {
   /** 標(biāo)簽 id */
  sheetId: string;
  /** 標(biāo)簽名稱 */
  sheetName: string;
  /** 標(biāo)簽順序 */
  sheetOrder: number;
}

bi-open-menu-sdk API

`createBIComponent`

創(chuàng)建 Quick BI 自定義菜單的函數(shù)，返回一個(gè)自定義組件對(duì)象。

(option: IOption) => Lifecycle

參數(shù)

option

配置參數(shù)

interface IBiComponent {
  mount?: Interfaces.LifecycleMount<Interfaces.ComponentProps>;
  umount?: Interfaces.LifecycleUnmount<Interfaces.ComponentProps>;
  update?: Interfaces.LifecycleUpdate<Interfaces.ComponentProps>;
}

interface IBiComponentConstructor {
  new (): IBiComponent;
}

interface IOption {
	element: IBiComponentConstructor | React.ComponentType
}

element
element 的類型為React 組件React.ComponentType。

例子

import { createBIComponent } from 'bi-open-menu-sdk'

const MyComponent = (props) => <div>...</div>

const { bootstrap, mount, unmount, update } = createBIComponent({
  element: MyComponent,
})

`MenuItem`

bi-open-menu-sdk 提供了一個(gè)名為 MenuItem 的 React 組件, 方便開(kāi)發(fā)者開(kāi)箱即用。

例子

import { Interfaces, MenuItem, createBIComponent } from 'bi-open-menu-sdk';

// 自定義菜單
const MyCardMenu: React.FC<Interfaces.MenuComponentChartProps> = React.memo(props => {

  // 點(diǎn)擊事件
  const handleClick = React.useCallback(() => {
    console.log('click');
    console.log('props', props);
    props.dispatch({
      type: 'openModal',
      payload: {
        title: '我是標(biāo)題',
        content: <iframe src="https://www.yuque.com/u2227425/ia1pn8/nvg5q6" width="100%"></iframe>,
        onCancel: () => {
          console.log('關(guān)閉事件');
        },
        onOk: () => {
          console.log('確認(rèn)事件');
          return new Promise((resolve, reject) => {
            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
          }).catch(() => console.log('Oops errors!'));
        },
        cancelText: '點(diǎn)我取消',
        okText: '前往',
        cancelButtonProps: {
          style: { display: 'none' },
        },
        okButtonProps: {
          disabled: true,
        },
      },
    });
  }, [props]);

  return (
    <MenuItem
      title="自定義菜單"
      onClick={handleClick}
    />
  );
});

// 導(dǎo)出自定義菜單
export const { bootstrap, mount, unmount, update } = createBIComponent<Interfaces.MenuComponentChartProps>({
  element: MyCardMenu,
});

其接收屬性如下：

interface MenuItemProps {
  /** 根元素 className */
  className?: string;

  /** 根元素 style */
  style?: React.StyleHTMLAttributes<HTMLDivElement>['style'];

  /** 菜單標(biāo)題 */
  title?: string | React.ReactNode;

  /** 菜單禁用 */
  disabled?: boolean;

  /** hover 提示 */
  hoverTip?: string;

  /** 是否加載中 */
  loading?: boolean;

  /** 點(diǎn)擊事件 */
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
  
}

`MenuItem.title`

自定義菜單標(biāo)題

例子

// ...
<MenuItem
	title="自定義菜單"
/>

效果如下

`MenuItem.disabled`

自定義菜單是否禁用

例子

// ...
<MenuItem
	title="自定義菜單"
	disabled={true}
/>

效果如下

`MenuItem.loading`

自定義菜單是否在 loading 狀態(tài)

例子

// ...
<MenuItem
	title="自定義菜單"
	loading={true}
/>

效果如下

`MenuItem.hoverTip`

自定義菜單hover文本信息提示

例子

// ...
<MenuItem
	title="自定義菜單"
	disabled={true}
	hoverTip="鼠標(biāo) hover 提示"
/>

`MenuSchemaItem.onClick`

自定義菜單點(diǎn)擊時(shí)觸發(fā)事件

例子

// ...
<MenuItem
	title="自定義菜單"
	onClick={() => {}}
/>

`MenuItem.showTitle`

自定義菜單標(biāo)題是否展示

例子

// ...
<MenuItem
	showTitle={false}
/>

`MenuItem.showIcon`

自定義菜單圖標(biāo)是否展示

例子

// ...
<MenuItem
	showIcon={false}
/>

日本熟妇hd丰满老熟妇,中文字幕一区二区三区在线不卡 ,亚洲成片在线观看,免费女同在线一区二区

自定義菜單API

Lifecycle

LifecycleProps

menuComponentProps

menuComponentProps.pageConfig

menuComponentProps.dispatch

menuComponentProps.chart

menuComponentProps.sheets

bi-open-menu-sdk API

`createBIComponent`

`MenuItem`

`MenuItem.title`

`MenuItem.disabled`

`MenuItem.loading`

`MenuItem.hoverTip`

`MenuSchemaItem.onClick`

`MenuItem.showTitle`

`MenuItem.showIcon`