Skip to content

P
pro-layout
Commit 2f9d0e8d authored by Sendya's avatar Sendya Committed by 言肆
Browse files
Options

fix: remove route-context-provider in user used

parent cdfcebd2
Hide whitespace changes
Inline Side-by-side
Showing with 237 additions and 194 deletions
examples/index.tsx
View file @ 2f9d0e8d
import 'ant-design-vue/dist/antd.less'; import 'ant-design-vue/dist/antd.less';
import { createApp, defineComponent, watch, ref, watchEffect, onMounted } from 'vue'; import { createApp, defineComponent, watch, ref, watchEffect, onMounted, reactive } from 'vue';
import { createRouter, createWebHashHistory, useRoute, useRouter, RouteRecord } from 'vue-router'; import { createRouter, createWebHashHistory, useRoute, useRouter, RouteRecord } from 'vue-router';
import { Avatar } from 'ant-design-vue'; import { Avatar } from 'ant-design-vue';
import { UserOutlined } from '@ant-design/icons-vue'; import { UserOutlined } from '@ant-design/icons-vue';
import { default as ProLayout } from '../src/'; import { default as ProLayout } from '../src/';
import { createRouteContext } from '../src/RouteContext'; import { globalState as state } from './state';
import { globalState, globalState as state } from './state';
import registerIcons from './_util/icons'; import registerIcons from './_util/icons';
...@@ -26,12 +25,11 @@ const BasicLayout = defineComponent({ ...@@ -26,12 +25,11 @@ const BasicLayout = defineComponent({
setup() { setup() {
const { getRoutes } = useRouter(); const { getRoutes } = useRouter();
const route = useRoute(); const route = useRoute();
const [RouteContextProvider] = createRouteContext();
const menuData = getMenuData(getRoutes()); const menuData = getMenuData(getRoutes());
state.menuData = menuData;
const updateSelectedMenu = () => { const updateSelectedMenu = () => {
console.log('updateSelectedMenu', state.selectedKeys);
const matched = route.matched.concat().map(item => item.path); const matched = route.matched.concat().map(item => item.path);
matched.shift(); matched.shift();
state.selectedKeys = matched; state.selectedKeys = matched;
...@@ -63,41 +61,43 @@ const BasicLayout = defineComponent({ ...@@ -63,41 +61,43 @@ const BasicLayout = defineComponent({
}); });
return () => ( return () => (
<RouteContextProvider value={state}> <ProLayout
<ProLayout layout={state.layout}
i18n={(key: string) => key} navTheme={state.navTheme}
layout={state.layout} i18n={(key: string) => key}
navTheme={state.navTheme} isMobile={state.isMobile}
contentWidth={'Fixed'} fixSiderbar={state.fixSiderbar}
primaryColor={'#1890ff'} fixedHeader={state.fixedHeader}
contentStyle={{ minHeight: '300px' }} contentWidth={'Fixed'}
siderWidth={state.sideWidth} primaryColor={'#1890ff'}
splitMenus={state.splitMenus} contentStyle={{ minHeight: '300px' }}
collapsed={state.collapsed} siderWidth={state.sideWidth}
openKeys={state.openKeys} splitMenus={state.splitMenus}
selectedKeys={state.selectedKeys} menuData={menuData}
{...{ collapsed={state.collapsed}
'onUpdate:collapsed': $event => (state.collapsed = $event), openKeys={state.openKeys}
'onUpdate:openKeys': $event => (state.openKeys = $event), selectedKeys={state.selectedKeys}
'onUpdate:selectedKeys': updateSelectedMenu, {...{
}} 'onUpdate:collapsed': $event => (state.collapsed = $event),
v-slots={{ 'onUpdate:openKeys': $event => (state.openKeys = $event),
rightContentRender: () => ( 'onUpdate:selectedKeys': updateSelectedMenu,
<div style={{ marginRight: '16px' }}> }}
<Avatar icon={<UserOutlined />} /> Sendya v-slots={{
</div> rightContentRender: () => (
), <div style={{ marginRight: '16px' }}>
menuHeaderRender: () => ( <Avatar icon={<UserOutlined />} /> Sendya
<a> </div>
<img src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg" /> ),
{state.collapsed && state.layout !== 'mix' ? null : <h1>Pro Preview</h1>} menuHeaderRender: () => (
</a> <a>
), <img src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg" />
}} {state.collapsed && state.layout !== 'mix' ? null : <h1>Pro Preview</h1>}
> </a>
<router-view /> ),
</ProLayout> }}
</RouteContextProvider> >
<router-view />
</ProLayout>
); );
}, },
}); });
......
src/BasicLayout.tsx
View file @ 2f9d0e8d
import { computed, FunctionalComponent, CSSProperties, unref } from 'vue'; import {
computed,
FunctionalComponent,
CSSProperties,
reactive,
unref,
provide,
defineComponent,
} from 'vue';
import 'ant-design-vue/es/layout/style'; import 'ant-design-vue/es/layout/style';
import Layout from 'ant-design-vue/es/layout'; import Layout from 'ant-design-vue/es/layout';
import { withInstall } from 'ant-design-vue/es/_util/type'; import { withInstall } from 'ant-design-vue/es/_util/type';
import { default as ProProvider, ProProviderData } from './ProProvider'; import RouteContext, { RouteContextProps } from './RouteContext';
import { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu'; import { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu';
import { WrapContent } from './WrapContent'; import { WrapContent } from './WrapContent';
import { default as Header, HeaderViewProps } from './Header'; import { default as Header, HeaderViewProps } from './Header';
...@@ -11,6 +19,8 @@ import { getCustomRender, PropRenderType, PropTypes } from './utils'; ...@@ -11,6 +19,8 @@ import { getCustomRender, PropRenderType, PropTypes } from './utils';
import useMediaQuery from './hooks/useMediaQuery'; import useMediaQuery from './hooks/useMediaQuery';
import './BasicLayout.less'; import './BasicLayout.less';
export const defaultPrefixCls = 'ant-pro';
const defaultI18nRender = (key: string) => key; const defaultI18nRender = (key: string) => key;
export type BasicLayoutProps = SiderMenuWrapperProps & export type BasicLayoutProps = SiderMenuWrapperProps &
...@@ -23,7 +33,7 @@ export type BasicLayoutProps = SiderMenuWrapperProps & ...@@ -23,7 +33,7 @@ export type BasicLayoutProps = SiderMenuWrapperProps &
loading?: boolean; loading?: boolean;
i18n?: ProProviderData['i18n']; i18n?: RouteContextProps['i18n'];
defaultCollapsed?: boolean; defaultCollapsed?: boolean;
...@@ -48,134 +58,153 @@ export type BasicLayoutProps = SiderMenuWrapperProps & ...@@ -48,134 +58,153 @@ export type BasicLayoutProps = SiderMenuWrapperProps &
disableContentMargin?: boolean; disableContentMargin?: boolean;
}; };
const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }) => { const ProLayout = defineComponent({
const { setup(props: BasicLayoutProps, { emit, slots }) {
onCollapse: propsOnCollapse, const {
onOpenKeys: propsOnOpenKeys, onCollapse: propsOnCollapse,
onSelect: propsOnSelect, onOpenKeys: propsOnOpenKeys,
contentStyle, onSelect: propsOnSelect,
disableContentMargin, contentStyle,
isChildrenLayout: propsIsChildrenLayout, disableContentMargin,
// loading, isChildrenLayout: propsIsChildrenLayout,
layout, // loading,
matchMenuKeys, layout,
navTheme, matchMenuKeys,
menuData, navTheme,
// defaultCollapsed, menuData,
} = props; // defaultCollapsed,
const isTop = computed(() => layout === 'top'); } = props;
// const isSide = computed(() => layout === 'side'); const isTop = computed(() => layout === 'top');
// const isMix = computed(() => layout === 'mix'); // const isSide = computed(() => layout === 'side');
// if on event and @event // const isMix = computed(() => layout === 'mix');
const onCollapse = const pure = computed(() => props.pure);
(propsOnCollapse && propsOnCollapse) || // if on event and @event
((collapsed: boolean) => emit('update:collapsed', collapsed)); const onCollapse =
const onOpenKeys = (propsOnCollapse && propsOnCollapse) ||
(propsOnOpenKeys && propsOnOpenKeys) || ((collapsed: boolean) => emit('update:collapsed', collapsed));
((openKeys: string[] | false) => emit('update:open-keys', openKeys)); const onOpenKeys =
const onSelect = (propsOnOpenKeys && propsOnOpenKeys) ||
(propsOnSelect && propsOnSelect) || ((openKeys: string[] | false) => emit('update:open-keys', openKeys));
((selectedKeys: string[] | false) => emit('update:selected-keys', selectedKeys)); const onSelect =
const colSize = useMediaQuery(); (propsOnSelect && propsOnSelect) ||
const isMobile = computed( ((selectedKeys: string[] | false) => emit('update:selected-keys', selectedKeys));
() => (colSize.value === 'sm' || colSize.value === 'xs') && !props.disableMobile, const colSize = useMediaQuery();
); const isMobile = computed(
const baseClassName = computed(() => `${props.prefixCls}-basicLayout`); () => (colSize.value === 'sm' || colSize.value === 'xs') && !props.disableMobile,
// gen className );
const className = computed(() => { const baseClassName = computed(() => `${props.prefixCls}-basicLayout`);
return { // gen className
[baseClassName.value]: true, const className = computed(() => {
[`screen-${colSize.value}`]: colSize.value, return {
[`${baseClassName.value}-top-menu`]: isTop.value, [baseClassName.value]: true,
[`${baseClassName.value}-is-children`]: props.isChildrenLayout, [`screen-${colSize.value}`]: colSize.value,
[`${baseClassName.value}-fix-siderbar`]: props.fixSiderbar, [`${baseClassName.value}-top-menu`]: isTop.value,
[`${baseClassName.value}-${props.layout}`]: props.layout, [`${baseClassName.value}-is-children`]: props.isChildrenLayout,
[`${baseClassName.value}-fix-siderbar`]: props.fixSiderbar,
[`${baseClassName.value}-${props.layout}`]: props.layout,
};
});
// siderMenuDom 为空的时候，不需要 padding
const genLayoutStyle: CSSProperties = {
position: 'relative',
}; };
});
// siderMenuDom 为空的时候，不需要 padding // if is some layout children, don't need min height
const genLayoutStyle: CSSProperties = { if (propsIsChildrenLayout || (contentStyle && contentStyle.minHeight)) {
position: 'relative', genLayoutStyle.minHeight = 0;
}; }
// if is some layout children, don't need min height // const [collapsed, onCollapse] = useMergedState<boolean>(defaultCollapsed || false, {
if (propsIsChildrenLayout || (contentStyle && contentStyle.minHeight)) { // value: props.collapsed,
genLayoutStyle.minHeight = 0; // onChange: propsOnCollapse,
} // });
const headerRender = (
props: BasicLayoutProps & {
hasSiderMenu: boolean;
customHeaderRender: WithFalse<CustomRender>;
rightContentRender: WithFalse<CustomRender>;
},
matchMenuKeys: string[],
): VNodeType => {
if (props.headerRender === false || props.pure) {
return null;
}
return <Header matchMenuKeys={matchMenuKeys} {...props} headerHeight={48} />;
};
const rightContentRender = getCustomRender(props, slots, 'rightContentRender');
const customHeaderRender = getCustomRender(props, slots, 'headerRender');
const menuHeaderRender = getCustomRender(props, slots, 'menuHeaderRender');
const footerRender = getCustomRender(props, slots, 'footerRender');
// const menuRender = getCustomRender(props, slots, 'menuRender');
// const [collapsed, onCollapse] = useMergedState<boolean>(defaultCollapsed || false, { const headerDom = headerRender(
// value: props.collapsed, {
// onChange: propsOnCollapse, ...props,
// }); hasSiderMenu: !isTop.value,
const headerRender = ( menuData,
props: BasicLayoutProps & { isMobile: unref(isMobile),
hasSiderMenu: boolean; onCollapse,
customHeaderRender: WithFalse<CustomRender>; onOpenKeys,
rightContentRender: WithFalse<CustomRender>; onSelect,
}, customHeaderRender,
matchMenuKeys: string[], rightContentRender,
): VNodeType => { headerTitleRender: menuHeaderRender,
if (props.headerRender === false || props.pure) { theme: (navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light',
return null; },
} matchMenuKeys,
return <Header matchMenuKeys={matchMenuKeys} {...props} headerHeight={48} />; );
};
const rightContentRender = getCustomRender(props, slots, 'rightContentRender');
const customHeaderRender = getCustomRender(props, slots, 'headerRender');
const menuHeaderRender = getCustomRender(props, slots, 'menuHeaderRender');
const footerRender = getCustomRender(props, slots, 'footerRender');
// const menuRender = getCustomRender(props, slots, 'menuRender');
const headerDom = headerRender( const routeContext: RouteContextProps = {
{ getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
...props, if (customizePrefixCls) return customizePrefixCls;
hasSiderMenu: !isTop.value, return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls;
},
i18n: (t: string): string => t,
contentWidth: 'Fluid',
menuData, menuData,
isMobile: unref(isMobile), selectedKeys: props.selectedKeys || [],
onCollapse, openKeys: props.openKeys || [],
onOpenKeys, };
onSelect,
customHeaderRender,
rightContentRender,
headerTitleRender: menuHeaderRender,
theme: (navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light',
},
matchMenuKeys,
);
return ( console.log('BasicLayout.routeContext', routeContext);
<ProProvider i18n={defaultI18nRender}> console.log('pure', pure.value);
{props.pure ? ( provide('route-context', routeContext);
slots.default?.()
) : ( return () => (
<div class={className.value}> <>
<Layout class={baseClassName.value}> {pure.value ? (
{!isTop.value && ( slots.default?.()
<SiderMenuWrapper ) : (
{...props} <div class={className.value}>
isMobile={isMobile.value} <Layout class={baseClassName.value}>
menuHeaderRender={menuHeaderRender} {!isTop.value && (
onCollapse={onCollapse} <SiderMenuWrapper
onSelect={onSelect} {...props}
onOpenKeys={onOpenKeys} isMobile={isMobile.value}
/> menuHeaderRender={menuHeaderRender}
)} onCollapse={onCollapse}
<Layout style={genLayoutStyle}> onSelect={onSelect}
{headerDom} onOpenKeys={onOpenKeys}
<WrapContent />
isChildrenLayout={propsIsChildrenLayout} )}
style={disableContentMargin ? null : contentStyle} <Layout style={genLayoutStyle}>
> {headerDom}
{slots.default?.()} <WrapContent
</WrapContent> isChildrenLayout={propsIsChildrenLayout}
{footerRender && footerRender(props)} style={disableContentMargin ? null : contentStyle}
>
{slots.default?.()}
</WrapContent>
{footerRender && footerRender(props)}
</Layout>
</Layout> </Layout>
</Layout> </div>
</div> )}
)} </>
</ProProvider> );
); },
}; });
ProLayout.inheritAttrs = false; ProLayout.inheritAttrs = false;
ProLayout.displayName = 'ProLayout'; ProLayout.displayName = 'ProLayout';
...@@ -237,10 +266,6 @@ ProLayout.props = { ...@@ -237,10 +266,6 @@ ProLayout.props = {
fixedHeader: PropTypes.bool, fixedHeader: PropTypes.bool,
/* 触发响应式布局的断点 https://ant.design/components/grid-cn/#Col */ /* 触发响应式布局的断点 https://ant.design/components/grid-cn/#Col */
breakpoint: PropTypes.string.def('lg'), breakpoint: PropTypes.string.def('lg'),
/* 关于 menu 的配置，暂时只有 locale,locale 可以关闭 menu 的自带的全球化 */
menu: PropTypes.object,
/* 传递到 antd menu 组件的 props */
menuProps: PropTypes.object,
/* 使用 IconFont 的图标配置 */ /* 使用 IconFont 的图标配置 */
iconfontUrl: PropTypes.string, iconfontUrl: PropTypes.string,
/* 当前 layout 的语言设置 */ /* 当前 layout 的语言设置 */
...@@ -250,8 +275,16 @@ ProLayout.props = { ...@@ -250,8 +275,16 @@ ProLayout.props = {
siderWidth: PropTypes.number.def(208), siderWidth: PropTypes.number.def(208),
/* 侧边栏收起宽度 */ /* 侧边栏收起宽度 */
collapsedWidth: PropTypes.number.def(48), collapsedWidth: PropTypes.number.def(48),
/* 关于 menu 的配置，暂时只有 locale,locale 可以关闭 menu 的自带的全球化 */
menu: PropTypes.object,
/* 传递到 antd menu 组件的 props */
menuProps: PropTypes.object,
/* 菜单数组 */
menuData: PropTypes.object,
/* 是否分割菜单 (仅 mix 模式有效) */ /* 是否分割菜单 (仅 mix 模式有效) */
splitMenus: PropTypes.bool, splitMenus: PropTypes.bool,
selectedKeys: PropTypes.array,
openKeys: PropTypes.array,
/* 控制菜单的收起和展开 */ /* 控制菜单的收起和展开 */
collapsed: PropTypes.bool, collapsed: PropTypes.bool,
/* 菜单的折叠收起事件 (collapsed: boolean) => void */ /* 菜单的折叠收起事件 (collapsed: boolean) => void */
......
src/RouteContext.tsx
View file @ 2f9d0e8d
...@@ -34,6 +34,9 @@ export interface MenuState { ...@@ -34,6 +34,9 @@ export interface MenuState {
} }
export interface RouteContextProps extends Partial<PureSettings>, MenuState { export interface RouteContextProps extends Partial<PureSettings>, MenuState {
getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
i18n: (t: string) => string;
breadcrumb?: BreadcrumbListReturn; breadcrumb?: BreadcrumbListReturn;
menuData?: MenuDataItem[]; menuData?: MenuDataItem[];
isMobile?: boolean; isMobile?: boolean;
...@@ -49,8 +52,16 @@ export interface RouteContextProps extends Partial<PureSettings>, MenuState { ...@@ -49,8 +52,16 @@ export interface RouteContextProps extends Partial<PureSettings>, MenuState {
[key: string]: any; [key: string]: any;
} }
const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol(); const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-context');
export const createRouteContext = () =>
createContext<RouteContextProps>(routeContextInjectKey, 'RouteContext.Provider');
export const useRouteContext = () =>
useContext<RouteContextProps>('route-context' /* routeContextInjectKey */);
export const createRouteContext = () => createContext<RouteContextProps>(routeContextInjectKey); const Provider = createRouteContext();
export const useRouteContext = () => useContext<RouteContextProps>(routeContextInjectKey); export default {
Provider,
};
src/SiderMenu/SiderMenu.tsx
View file @ 2f9d0e8d
import { FunctionalComponent, computed } from 'vue'; import { FunctionalComponent, computed, watch } from 'vue';
import 'ant-design-vue/es/layout/style'; import 'ant-design-vue/es/layout/style';
import Layout from 'ant-design-vue/es/layout'; import Layout from 'ant-design-vue/es/layout';
import 'ant-design-vue/es/menu/style'; import 'ant-design-vue/es/menu/style';
...@@ -7,7 +7,6 @@ import BaseMenu, { BaseMenuProps } from './BaseMenu'; ...@@ -7,7 +7,6 @@ import BaseMenu, { BaseMenuProps } from './BaseMenu';
import { WithFalse, VNodeType } from '../typings'; import { WithFalse, VNodeType } from '../typings';
import { SiderProps } from './typings'; import { SiderProps } from './typings';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'; import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import { useProProvider } from '../ProProvider';
import { useRouteContext } from '../RouteContext'; import { useRouteContext } from '../RouteContext';
import { getMenuFirstChildren } from '../utils'; import { getMenuFirstChildren } from '../utils';
import './index.less'; import './index.less';
...@@ -98,9 +97,10 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) = ...@@ -98,9 +97,10 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
onOpenKeys, onOpenKeys,
onSelect, onSelect,
} = props; } = props;
const { getPrefixCls } = useProProvider();
const context = useRouteContext(); const context = useRouteContext();
const { getPrefixCls } = context;
const baseClassName = getPrefixCls('sider'); const baseClassName = getPrefixCls('sider');
console.log('useRouteContext', context);
// const isMix = computed(() => props.layout === 'mix'); // const isMix = computed(() => props.layout === 'mix');
// const fixed = computed(() => context.fixSiderbar); // const fixed = computed(() => context.fixSiderbar);
const runtimeTheme = computed(() => (props.layout === 'mix' && 'light') || props.navTheme); const runtimeTheme = computed(() => (props.layout === 'mix' && 'light') || props.navTheme);
...@@ -125,6 +125,12 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) = ...@@ -125,6 +125,12 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
if (hasSide.value && flatMenuData.value.length === 0) { if (hasSide.value && flatMenuData.value.length === 0) {
return null; return null;
} }
watch(
() => context.selectedKeys,
n => {
console.log('watch:context', n);
},
);
const defaultMenuDom = ( const defaultMenuDom = (
<BaseMenu <BaseMenu
prefixCls={getPrefixCls()} prefixCls={getPrefixCls()}
......
src/WrapContent.tsx
View file @ 2f9d0e8d
import { FunctionalComponent, computed, toRefs, CSSProperties } from 'vue'; import { FunctionalComponent, computed, toRefs, CSSProperties } from 'vue';
import 'ant-design-vue/es/layout/style'; import 'ant-design-vue/es/layout/style';
import Layout from 'ant-design-vue/es/layout'; import Layout from 'ant-design-vue/es/layout';
import { useProProvider } from './ProProvider'; import { useRouteContext } from './RouteContext';
import { ContentWidth } from './typings'; import type { ContentWidth } from './typings';
const { Content } = Layout; const { Content } = Layout;
...@@ -16,7 +16,7 @@ export interface WrapContentProps { ...@@ -16,7 +16,7 @@ export interface WrapContentProps {
} }
export const WrapContent: FunctionalComponent<WrapContentProps> = (props, { slots, attrs }) => { export const WrapContent: FunctionalComponent<WrapContentProps> = (props, { slots, attrs }) => {
const { getPrefixCls } = toRefs(useProProvider()); const { getPrefixCls } = toRefs(useRouteContext());
const prefixCls = getPrefixCls.value('basicLayout'); const prefixCls = getPrefixCls.value('basicLayout');
const classNames = computed(() => { const classNames = computed(() => {
return { return {
......
src/hooks/context/index.ts
View file @ 2f9d0e8d
...@@ -12,21 +12,14 @@ import { ...@@ -12,21 +12,14 @@ import {
export type ContextType<T> = any; export type ContextType<T> = any;
export type CreateContext<T> = [ export type CreateContext<T> = DefineComponent<{}, () => VNode | VNode[] | undefined, any>;
// UnwrapRef<T> | T,
DefineComponent<{}, () => VNode | VNode[] | undefined, any>,
];
export const createContext = <T>( export const createContext = <T>(
// context: ContextType<T>,
contextInjectKey: InjectionKey<ContextType<T>> = Symbol(), contextInjectKey: InjectionKey<ContextType<T>> = Symbol(),
injectCompName: string = 'Context.Provider',
): CreateContext<T> => { ): CreateContext<T> => {
// const state = reactive<ContextType<T>>({
// ...toRaw(context),
// });
const ContextProvider = defineComponent({ const ContextProvider = defineComponent({
name: 'ContextProvider', name: injectCompName,
props: { props: {
value: { value: {
type: Object as PropType<ContextType<T>>, type: Object as PropType<ContextType<T>>,
...@@ -39,11 +32,11 @@ export const createContext = <T>( ...@@ -39,11 +32,11 @@ export const createContext = <T>(
}, },
}); });
return [ContextProvider]; return ContextProvider;
}; };
export const useContext = <T>( export const useContext = <T>(
contextInjectKey: InjectionKey<ContextType<T>> = Symbol(), contextInjectKey: string | InjectionKey<ContextType<T>> = Symbol(),
defaultValue?: ContextType<T>, defaultValue?: ContextType<T>,
): T => { ): T => {
return inject(contextInjectKey, defaultValue || ({} as T)); return inject(contextInjectKey, defaultValue || ({} as T));
......
src/index.ts
View file @ 2f9d0e8d
...@@ -4,12 +4,12 @@ export { default as FooterToolbar } from './FooterToolbar'; ...@@ -4,12 +4,12 @@ export { default as FooterToolbar } from './FooterToolbar';
export { default as GlobalFooter } from './GlobalFooter'; export { default as GlobalFooter } from './GlobalFooter';
export { default as GridContent } from './GridContent'; export { default as GridContent } from './GridContent';
export { WrapContent } from './WrapContent'; export { WrapContent } from './WrapContent';
export { // export {
default as ProProvider, // default as ProProvider,
defaultProProviderProps, // defaultProProviderProps,
useProProvider, // useProProvider,
ProProviderData, // ProProviderData,
} from './ProProvider'; // } from './ProProvider';
export { PageContainer } from './PageContainer'; export { PageContainer } from './PageContainer';
export { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu/index'; export { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu/index';
export { export {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment