- {React.cloneElement(layout.LocalNavigation, {}, [
+ {React.cloneElement(layout.LocalNavigation as ReactElement, {}, [
- {layout.LocalNavigation.props.children}
+ {(layout.LocalNavigation as ReactElement).props.children}
,
trigger,
])}
@@ -523,9 +596,10 @@ export default function ShellBase(props) {
}
if (layout.Ancillary) {
- let { trigger, collapse } = layout.Ancillary.props;
+ const collapse = (layout.Ancillary as ReactElement).props.collapse;
+ let trigger = (layout.Ancillary as ReactElement).props.trigger;
- if ('trigger' in layout.Ancillary.props) {
+ if ('trigger' in (layout.Ancillary as ReactElement).props) {
trigger =
(trigger &&
React.cloneElement(trigger, {
@@ -534,13 +608,16 @@ export default function ShellBase(props) {
})) ||
trigger;
} else {
+ const aria = {
+ 'aria-expanded': !collapse,
+ 'aria-label': 'toggle',
+ };
trigger = (
- {React.cloneElement(layout.Ancillary, {}, [
+ {React.cloneElement(layout.Ancillary as ReactElement, {}, [
- {layout.Ancillary.props.children}
+ {(layout.Ancillary as ReactElement).props.children}
,
trigger,
])}
@@ -589,8 +666,11 @@ export default function ShellBase(props) {
layout.Navigation &&
contentArr.push(
);
@@ -613,8 +693,11 @@ export default function ShellBase(props) {
layout.ToolDock &&
contentArr.push(
@@ -624,7 +707,7 @@ export default function ShellBase(props) {
[`${prefix}shell`]: true,
[`${prefix}shell-${device}`]: true,
[`${prefix}shell-${type}`]: true,
- [className]: !!className,
+ [className!]: !!className,
});
if (componentName === 'Page') {
diff --git a/components/shell/types.ts b/components/shell/types.ts
index cd4d9cc021..6306b7e144 100644
--- a/components/shell/types.ts
+++ b/components/shell/types.ts
@@ -1,53 +1,193 @@
-import { HTMLAttributes, ElementType, Component, ComponentType } from 'react';
-import { CommonProps } from '../util';
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { CommonProps } from '../util';
+/**
+ * @api Shell
+ */
export interface ShellProps extends HTMLAttributes
, CommonProps {
/**
- * 设备类型，针对不同的设备类型组件做出对应的响应式变化
+ * 预设屏幕宽度，会影响Navigation LocalNavigation Ancillary等是否占据空间
+ * @en Preset screen width, tt determines whether Navigation LocalNavigation Ancillarytake space or not
+ * @defaultValue 'desktop'
+ * @remarks
+ * 可选值：
+ * **phone** 手机，
+ * **tablet** 平板，
+ * **desktop** PC电脑。
+ * -
+ * options:
+ * **phone** phone,
+ * **tablet** tablet,
+ * **desktop** desktop.
*/
device?: 'tablet' | 'desktop' | 'phone';
+ /**
+ * 样式类型，分浅色主题、深色主题、主题色主题
+ * @en type of Shell
+ * @remarks
+ * 可选值：
+ * **light** 浅色，
+ * **dark** 深色，
+ * **brand** 主题色。
+ * -
+ * options:
+ * **light** light,
+ * **dark** dark,
+ * **brand** brand.
+ * @defaultValue 'light'
+ */
type?: 'light' | 'dark' | 'brand';
+ /**
+ * 是否固定Header，采用sticky布局，不支持 IE11
+ * @en fixed header or not. Doesn't work under IE11
+ * @defaultValue false
+ */
fixedHeader?: boolean;
}
-export interface ShellCommonProps extends HTMLAttributes, CommonProps {}
-
-export interface ShellNavigationProps extends ShellCommonProps {
- collapse?: boolean;
+/**
+ * @api Shell.Navigation
+ */
+export interface ShellNavigationProps extends HTMLAttributes, CommonProps {
+ /**
+ * 方向
+ * @en header or asider
+ * @remarks
+ * 可选值：
+ * **hoz** hoz，
+ * **ver** ver。
+ * -
+ * options:
+ * **hoz** hoz,
+ * **ver** ver.
+ * @defaultValue 'hoz'
+ */
direction?: 'hoz' | 'ver';
+ /**
+ * 是否折叠(折叠成只有icon状态)
+ * @en collapse or not
+ * @defaultValue false
+ */
+ collapse?: boolean;
+ /**
+ * 横向模式下，导航排布的位置
+ * @en Arrangement of Navigation when direction is hoz
+ * @remarks
+ * 可选值：
+ * **left** left，
+ * **right** right，
+ * **center** center。
+ * -
+ * options:
+ * **left** left,
+ * **right** right,
+ * **center** center.
+ * @defaultValue 'right'
+ */
align?: 'left' | 'right' | 'center';
- fixed?: boolean;
- trigger?: any;
+ /**
+ * 默认按钮触发的展开收起状态
+ * @en this will be triggered when collapse changed by inner icon
+ * @defaultValue func.noop
+ */
onCollapseChange?: (collapse?: boolean) => void;
+ /**
+ * 菜单展开、收起的触发元素，默认在左上角，不想要可以设置 null 来去掉
+ * @en trigger of Shell.Navigation, it placed on top and left of the page, you can set null to remove it
+ */
+ trigger?: ReactNode;
+ /**
+ * 是否固定，且需要在在 Shell fixedHeader时生效
+ * @en fixed or not, only worked when Shell fixedHeader is true
+ * @defaultValue false
+ */
+ fixed?: boolean;
}
-export interface ShellLocalNavigationProps extends ShellCommonProps {
+/**
+ * @api Shell.LocalNavigation
+ */
+export interface ShellLocalNavigationProps extends HTMLAttributes, CommonProps {
+ /**
+ * 是否折叠（完全收起）
+ * @en collapse or not
+ * @defaultValue false
+ */
collapse?: boolean;
+ /**
+ * 默认按钮触发的展开收起状态
+ * @en this will be triggered when collapse changed by inner icon
+ * @defaultValue func.noop
+ */
onCollapseChange?: (collapse?: boolean) => void;
}
-export interface ShellToolDockProps extends ShellCommonProps {
+/**
+ * @api Shell.ToolDock
+ */
+export interface ShellToolDockProps extends HTMLAttributes, CommonProps {
+ /**
+ * 是否折叠（完全收起）
+ * @en collapse or not
+ * @defaultValue false
+ */
collapse?: boolean;
- fixed?: boolean;
+ /**
+ * 默认按钮触发的展开收起状态
+ * @en this will be triggered when collapse changed by inner icon
+ * @defaultValue func.noop
+ */
onCollapseChange?: (collapse?: boolean) => void;
+ /**
+ * 是否固定，且需要在在 Shell fixedHeader时生效
+ * @en fixed or not, only worked when Shell fixedHeader is true
+ * @defaultValue false
+ */
+ fixed?: boolean;
}
-export interface ShellAncillaryProps extends ShellCommonProps {
+/**
+ * @api Shell.Ancillary
+ */
+export interface ShellAncillaryProps extends HTMLAttributes, CommonProps {
+ /**
+ * 是否折叠（完全收起）
+ * @en collapse or not
+ * @defaultValue false
+ */
collapse?: boolean;
+ /**
+ * 默认按钮触发的展开收起状态
+ * @en this will be triggered when collapse changed by inner icon
+ * @defaultValue func.noop
+ */
onCollapseChange?: (collapse?: boolean) => void;
}
-export default class Shell extends Component {
- static Branding: ComponentType;
- static Action: ComponentType;
- static MultiTask: ComponentType;
- static AppBar: ComponentType;
- static Content: ComponentType;
- static Footer: ComponentType;
- static ToolDockItem: ComponentType;
+export interface ShellBaseProps extends ShellProps {
+ componentName?: string;
+ triggerProps?: object;
+ fixed?: boolean;
+ component?: ReactElement | unknown;
+ children?: Array;
+ collapse?: boolean;
+ miniable?: boolean;
+ onCollapseChange?: (collapsed: boolean) => void;
+ direction?: 'hoz' | 'ver';
+ align?: 'left' | 'right' | 'center';
+}
- static Navigation: ComponentType;
- static LocalNavigation: ComponentType;
- static Ancillary: ComponentType;
- static ToolDock: ComponentType;
+export interface LayoutItem {
+ [key: string]: ReactElement | Array;
+}
+
+export interface ShellState {
+ controll: boolean;
+ collapseMap: {
+ Navigation: boolean;
+ LocalNavigation: boolean;
+ Ancillary: boolean;
+ ToolDock: boolean;
+ };
+ device?: 'tablet' | 'desktop' | 'phone';
}
diff --git a/components/shell/util.ts b/components/shell/util.ts
index 9271b868b4..0b32a6cfde 100644
--- a/components/shell/util.ts
+++ b/components/shell/util.ts
@@ -1,13 +1,18 @@
/**
* 判断是否为布尔类型
- * @param {any} val 例：'str' / undefined / null / true / false / 0
- * @return {bool} 例： false / false / false / true / false / false
+ * @param val - 要判断的值，例如 'str', undefined, null, true, false, 0 等
+ * @returns boolean
*/
-export function isBoolean(val) {
+export function isBoolean(val?: string | boolean | 0 | null) {
return typeof val === 'boolean';
}
-export function getCollapseMap(device) {
+export function getCollapseMap(device?: string): {
+ Navigation: boolean;
+ LocalNavigation: boolean;
+ Ancillary: boolean;
+ ToolDock: boolean;
+} {
// by default all of them are collapsed
const origin = {
Navigation: true,
@@ -16,7 +21,7 @@ export function getCollapseMap(device) {
ToolDock: true,
};
- let map = [];
+ let map: string[] = [];
switch (device) {
case 'phone':
@@ -32,11 +37,13 @@ export function getCollapseMap(device) {
break;
}
- Object.keys(origin).forEach(key => {
- if (map.indexOf(key) > -1) {
- origin[key] = false;
+ Object.keys(origin).forEach(
+ (key: 'Navigation' | 'LocalNavigation' | 'Ancillary' | 'ToolDock') => {
+ if (map.indexOf(key) > -1) {
+ origin[key] = false;
+ }
}
- });
+ );
return origin;
}