Skip to content

P
pro-layout
Commit 86e775e5 authored by Sendya's avatar Sendya
Browse files
Options

fix: some typo

parent d84a09d5
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 64 deletions
examples/index.tsx
View file @ 86e775e5
import { createApp, reactive } from 'vue';
import { Button, message } from 'ant-design-vue';
import BasicLayout from '../src/BasicLayout';
import { default as BasicLayout } from '../src/BasicLayout';
import 'ant-design-vue/dist/antd.less';
import { menus } from './menus';
import BaseMenu, { useMenuState } from '../src/SiderMenu/BaseMenu';
import * as Icon from '@ant-design/icons-vue';
const SimpleDemo = {
setup() {
const state = reactive({
const { state: menuState } = useMenuState({
collapsed: false,
});
openKeys: [],
selectedKeys: [],
})
return () => (
<div className="components">
<div class="components">
<h2># BasicLayout</h2>
<BasicLayout
collapsed={state.collapsed}
onCollapsed={collapsed => {
state.collapsed = collapsed;
menus={menus}
collapsed={menuState.collapsed}
openKeys={menuState.openKeys}
selectedKeys={menuState.selectedKeys}
{...{
'onUpdate:collapsed': $event => {
menuState.collapsed = $event;
},
'onUpdate:openKeys': $event => {
menuState.openKeys = $event
},
'onUpdate:selectedKeys': $event => {
menuState.selectedKeys = $event
}
}}
>
<Button
......@@ -33,4 +50,11 @@ const SimpleDemo = {
const app = createApp(SimpleDemo);
const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor']
Object.keys(Icon)
.filter(k => !filterIcons.includes(k))
.forEach(k => {
app.component(Icon[k].displayName, Icon[k])
})
app.use(BasicLayout).mount('#__vue-content>div');
examples/pro-provider.tsx
View file @ 86e775e5
......@@ -53,12 +53,13 @@ const ProProviderDemo = defineComponent({
const TestChildComponent = defineComponent({
setup () {
const config = inject(injectProConfigKey, defaultProProviderProps)
const config = inject(injectProConfigKey, defaultProProviderProps);
const prefixCls = config.getPrefixCls('child-component');
return () => {
const { i18n, contentWidth } = config
return (
<div class="test-child-component">
<div class={prefixCls}>
<p>TestChildComponent:</p>
<div>
i18n: {i18n.toString()}
......
package.json
View file @ 86e775e5
......@@ -60,13 +60,14 @@
"dependencies": {
"@babel/runtime": "^7.10.4",
"ant-design-vue": "^2.0.0-beta.10",
"lodash": "^4.17.15"
"lodash-es": "^4.17.15",
"vue-types": "^3.0.1"
},
"config": {
"port": 9528,
"entry": {
"@ant-design-vue/pro-layout": [
"./src/index.jsx"
"./index.tsx"
]
},
"loaders": [
......
src/BasicLayout.tsx
View file @ 86e775e5
......@@ -4,44 +4,49 @@ import { h, App } from 'vue';
import { Layout, Menu } from 'ant-design-vue';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import ProProvider from './ProProvider';
import { default as ProProvider } from './ProProvider';
import { default as SiderMenu } from './SiderMenu/SiderMenu';
import { createContext } from './RouteContext';
const defaultI18nRender = (key: string) => key
const { state, provider: RouteContextProvider } = createContext({
isMobile: false,
menuData: [],
hasSiderMenu: true,
hasHeader: true,
siderWidth: 208,
})
const BasicLayout = (props, { emit, slots }) => {
const handleClick = () => {
emit('collapsed', !props.collapsed)
emit('update:collapsed', !props.collapsed)
}
const handleOpenChange = (openKeys): void => {
emit('update:openKeys', openKeys)
}
const handleSelect = (selectedKeys: string[]): void => {
emit('update:selectedKeys', selectedKeys)
}
return (
<ProProvider {...props} i18n={defaultI18nRender}>
<Layout class="ant-pro-basicLayout">
<Layout.Sider collapsed={props.collapsed} trigger={null} collapsible>
<div class="logo" />
<Menu theme="dark" mode="inline" selectedKeys={props.selectedKeys}>
<Menu.Item key="1">
<span>nav 1</span>
</Menu.Item>
<Menu.Item key="2">
<span>nav 2</span>
</Menu.Item>
<Menu.Item key="3">
<span>nav 3</span>
</Menu.Item>
</Menu>
</Layout.Sider>
<Layout>
<Layout.Header style="background: #fff; padding: 0">
{
props.collapsed
? <MenuUnfoldOutlined class="trigger" onClick={handleClick} />
: <MenuFoldOutlined class="trigger" onClick={handleClick} />
}
</Layout.Header>
<Layout.Content style={{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }}>
{slots.default && slots.default()}
</Layout.Content>
<RouteContextProvider>
<Layout class="ant-pro-basicLayout">
<SiderMenu {...props} />
<Layout>
<Layout.Header style="background: #fff; padding: 0">
{
props.collapsed
? <MenuUnfoldOutlined class="trigger" onClick={handleClick} />
: <MenuFoldOutlined class="trigger" onClick={handleClick} />
}
</Layout.Header>
<Layout.Content style={{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }}>
{slots.default && slots.default()}
</Layout.Content>
</Layout>
</Layout>
</Layout>
</RouteContextProvider>
</ProProvider>
)
};
......
src/ProProvider/index.tsx
View file @ 86e775e5
......@@ -2,13 +2,13 @@ import { defineComponent, reactive, toRefs, Ref, InjectionKey, provide, SetupCon
import { ContentWidth } from '../typings';
export interface ProProviderData {
getPrefixCls?: (suffixCls: string, customizePrefixCls: string) => string;
getPrefixCls?: (suffixCls?: string, customizePrefixCls?: string) => string;
i18n?: (t: string) => string;
contentWidth?: ContentWidth;
}
export const defaultProProviderProps: ProProviderData = {
getPrefixCls: (suffixCls: string, customizePrefixCls: string) => {
getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
if (customizePrefixCls) return customizePrefixCls;
return `ant-pro-${suffixCls}`;
},
......@@ -36,7 +36,7 @@ const ProProvider = defineComponent({
},
setup (props, { slots }: SetupContext) {
const { prefixCls, i18n, contentWidth } = toRefs(props)
const getPrefixCls = (suffixCls: string, customizePrefixCls: string): string => {
const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string): string => {
if (customizePrefixCls) return customizePrefixCls;
return suffixCls ? `${prefixCls.value}-${suffixCls}` : prefixCls.value;
}
......
src/RouteContext.tsx
View file @ 86e775e5
import { defineComponent, h, reactive, provide, inject, toRefs, UnwrapRef, PropType, SetupContext, InjectionKey, VNode, RendererNode, RendererElement } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { RouteProps } from './typings';
import { PureSettings } from './defaultSettings';
......
src/SiderMenu/BaseMenu.tsx
View file @ 86e775e5
......@@ -68,6 +68,7 @@ export interface BaseMenuProps extends Partial<PureSettings> {
mode?: MenuMode;
onCollapse?: (collapsed: boolean) => void;
openKeys?: WithFalse<string[]> | undefined;
selectedKeys?: WithFalse<string[]> | undefined;
handleOpenChange?: (openKeys: string[]) => void;
theme?: MenuTheme | 'realDark';
i18n?: (t: string) => string | VNodeChild;
......@@ -91,15 +92,11 @@ export const VueBaseMenuProps = {
default: false,
},
openKeys: {
type: Array as PropType<string[]>,
type: Array as PropType<WithFalse<string[]>>,
required: true,
},
handleOpenChange: {
type: Function as PropType<(openKeys: WithFalse<string[]>) => void>,
default: () => undefined,
},
selectedKeys: {
type: Array as PropType<string[]>,
type: Array as PropType<WithFalse<string[]>>,
required: true,
},
}
......@@ -217,8 +214,8 @@ export default defineComponent({
}, VueBaseMenuProps),
emits: ['update:openKeys', 'update:selectedKeys'],
setup (props, { emit } ) {
console.log('props.mode', props.mode)
const isInline = computed(() => props.mode === 'inline')
const { mode } = toRefs(props);
const isInline = computed(() => mode.value === 'inline')
const handleOpenChange: OpenEventHandler = (openKeys): void => {
emit('update:openKeys', openKeys)
}
......
src/SiderMenu/SiderMenu.tsx
View file @ 86e775e5
import './index.less';
import { VNodeChild, SetupContext } from 'vue';
import { VNodeChild, SetupContext, inject } from 'vue';
import 'ant-design-vue/es/layout/style';
import Layout from 'ant-design-vue/es/layout';
......@@ -8,6 +8,8 @@ import BaseMenu, { BaseMenuProps } from './BaseMenu';
import { WithFalse } from '../typings';
import { SiderProps } from './typings';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import { menus } from '../../examples/menus';
import { defaultProProviderProps, injectProConfigKey } from '../ProProvider';
const { Sider } = Layout;
......@@ -25,6 +27,7 @@ export interface SiderMenuProps extends Pick<BaseMenuProps, Exclude<keyof BaseMe
onMenuHeaderClick?: (e: MouseEvent) => void;
hide?: boolean;
onOpenChange?: (openKeys: WithFalse<string[]>) => void;
onSelect?: (selectedKeys: WithFalse<string[]>) => void;
}
export const defaultRenderLogo = (logo: VNodeChild | JSX.Element): VNodeChild | JSX.Element => {
......@@ -87,9 +90,13 @@ const SiderMenu = (props: SiderMenuProps, context: SetupContext) => {
menuContentRender,
prefixCls,
onOpenChange,
onSelect,
headerHeight,
} = props;
const baseClassName = `${props.prefixCls}-sider`;
console.log('props', props)
const config = inject(injectProConfigKey, defaultProProviderProps)
const baseClassName = config.getPrefixCls('sider');
const siderClassName = {
[baseClassName]: true,
[`${baseClassName}-fixed`]: fixSiderbar,
......@@ -101,15 +108,26 @@ const SiderMenu = (props: SiderMenuProps, context: SetupContext) => {
const extraDom = menuExtraRender && menuExtraRender(props);
const menuDom = menuContentRender !== false && (
<BaseMenu
{...props}
mode="inline"
handleOpenChange={onOpenChange}
style={{
width: '100%',
}}
class={`${baseClassName}-menu`}
/>
return (
<Sider
class={siderClassName}
collapsed={collapsed}
>
<BaseMenu
{...props}
menus={menus}
theme={props.theme}
mode={props.mode}
collapsed={props.collapsed}
openKeys={props.openKeys}
selectedKeys={props.selectedKeys}
style={{
width: '100%',
}}
class={`${baseClassName}-menu`}
/>
</Sider>
);
};
export default SiderMenu;
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