1.6.0 • Published 3 months ago
@alicloud/console-base-rc-messenger-resource-group v1.6.0
@alicloud/console-base-rc-messenger-resource-group
ConsoleBase 组件 - 对 resource group messenger 的组件化封装,提升开发体验
让控制台应用项操作本地组件一样,控制顶栏中的全局资源组选择器组件。
INSTALL
npm i -S @alicloud/console-base-rc-messenger-resource-group
Usage
import React, {
useState
} from 'react';
import MessengerResourceGroup from '@alicloud/console-base-rc-messenger-resource-group';
export default function MyMessengerResourceGroup(): JSX.Element {
// 默认 resurceGroupId 可以为空,也可以设置应用下支持的某个值
// **注意**:
//
// 1. 你也可以把值记录在应用的顶层 state 中,不一定需要 useState,但一定要有个地方记它
// 2. 当路由中有 resurceGroupId 的话,需要设过来
// 3. 这里只是一个例子,根据应用自己的需要修改
const [stateResourceGroupId, setStateResourceGroupId] = useState<string>('');
const handleResourceGroupChange = useCallback(resurceGroupId => {
setStateResourceGroupId(resurceGroupId);
// 这里写跳转路由逻辑
}, [setStateResourceGroupId]);
return <MessengerResourceGroup {...{
// 数据
resurceGroupId: stateResourceGroupId, // string 「半」受控的 resurceGroupId,需要通过 onChange 进行回填
// resourceCount, // Record<string, number>
// 展示
// visible, // boolean
// disabled, // boolean
// noDefault, // boolean
// 事件
// onChange // (id: string, displayName: string, name: string) => void
}} />;
}
注意:
- 确保你页面同时只能有一个该组件的实例,否则可能引起奇怪的现象
- 如果你初始化了该组件,表示你需要全局 ResourceGroup 切换,所以只要初始化,且 visible 不是 false,则顶栏 ResourceGroup 将可见
- 该组件被销毁的时候,顶栏组件会隐藏
1.6.0
3 months ago
1.5.7
1 year ago
1.5.5
1 year ago
1.5.6
1 year ago
1.5.4
2 years ago
1.4.2
2 years ago
1.5.0
2 years ago
1.3.4
2 years ago
1.3.3
2 years ago
1.3.2
2 years ago
1.4.0
2 years ago
1.3.1
2 years ago
1.2.0
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.5-alpha.0
2 years ago
1.0.4
2 years ago
1.3.0
2 years ago
1.2.1-alpha.0
2 years ago
1.2.1-alpha.1
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago