Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Refactor Menu related components life cycle methods #15868

Merged
merged 9 commits into from Apr 5, 2019
Merged
Changes from 3 commits
Commits
File filter...
Filter file types
Jump to鈥
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -1,4 +1,6 @@
import createContext, { Context } from 'create-react-context';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { LayoutContext, LayoutContextProps } from './layout';

// matchMedia polyfill for
// https://github.com/WickyNilliams/enquire.js/issues/82
@@ -18,7 +20,6 @@ import * as React from 'react';
import { polyfill } from 'react-lifecycles-compat';
import classNames from 'classnames';
import omit from 'omit.js';
import * as PropTypes from 'prop-types';
import Icon from '../icon';
import isNumeric from '../_util/isNumeric';

@@ -31,6 +32,15 @@ const dimensionMap = {
xxl: '1600px',
};

export interface SiderContextProps {
siderCollapsed: boolean;
collapsedWidth?: string | number;
}

export const SiderContext: Context<SiderContextProps> = createContext({
siderCollapsed: false,
});

export type CollapseType = 'clickTrigger' | 'responsive';

export type SiderTheme = 'light' | 'dark';
@@ -50,16 +60,14 @@ export interface SiderProps extends React.HTMLAttributes<HTMLDivElement> {
onBreakpoint?: (broken: boolean) => void;
}

type InternalSideProps = SiderProps & LayoutContextProps;

export interface SiderState {
collapsed?: boolean;

This comment has been minimized.

Copy link
@orzyyyy

orzyyyy Apr 4, 2019

Contributor

杩欓噷鐨勬敼鍔ㄨ矊浼兼病鍟ュソ澶勶紝鍙嶈岄渶瑕佸湪鏋勯犲櫒閲屽缁欎釜鍊硷紵

This comment has been minimized.

Copy link
@zombieJ

zombieJ Apr 4, 2019

Author Member

鍡紝鏄簲璇ラ粯璁ゅ彲閫夈傛敼鎴愬繀椤诲弽鑰屽嚭浜 BUG銆

collapsed: boolean;
below: boolean;
belowShow?: boolean;
}

export interface SiderContext {
siderCollapsed: boolean;
}

const generateId = (() => {
let i = 0;
return (prefix: string = '') => {
@@ -68,9 +76,7 @@ const generateId = (() => {
};
})();

class Sider extends React.Component<SiderProps, SiderState> {
static __ANT_LAYOUT_SIDER: any = true;

This comment has been minimized.

Copy link
@orzyyyy

orzyyyy Apr 4, 2019

Contributor

杩欑帺鎰忔槸鏈璁╂垜璐硅В鐨勶紝涓嶇煡閬撳湪鍝敤鍒帮紝浣嗗垹浜嗗ソ鍍忓氨璺戜笉杩囨祴璇曪紝灏卞緢鎬

This comment has been minimized.

Copy link
@zombieJ

zombieJ Apr 4, 2019

Author Member

鐪嬭捣鏉ュソ鍍忔槸娌$敤浜嗭紝鎴戝垹浜嗚瘯璇曘

This comment has been minimized.

Copy link
@afc163

afc163 Apr 4, 2019

Member

瀵癸紝涓嶉渶瑕佷簡 cad769a


class InternalSider extends React.Component<InternalSideProps, SiderState> {
static defaultProps = {

This comment has been minimized.

Copy link
@orzyyyy

orzyyyy Apr 4, 2019

Contributor

杩 defaultProps 杩樻槸鍒犱簡鍚э紝鐗瑰埆鏄 getDerivedStateFromProps 閲屼細鎺ユ敹 collapsed锛屽緢鎬曞嚭闂鍙堟壘涓嶇潃鍘熷洜

This comment has been minimized.

Copy link
@zombieJ

zombieJ Apr 4, 2019

Author Member

defaultProps 鍙湁涓 defaultCollapsed锛屼笉鎷呭績鍝垀

collapsible: false,
defaultCollapsed: false,
@@ -81,16 +87,7 @@ class Sider extends React.Component<SiderProps, SiderState> {
theme: 'dark' as SiderTheme,
};

static childContextTypes = {
siderCollapsed: PropTypes.bool,
collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
};

static contextTypes = {
siderHook: PropTypes.object,
};

static getDerivedStateFromProps(nextProps: SiderProps) {
static getDerivedStateFromProps(nextProps: InternalSideProps) {
if ('collapsed' in nextProps) {
return {
collapsed: nextProps.collapsed,
@@ -99,12 +96,10 @@ class Sider extends React.Component<SiderProps, SiderState> {
return null;
}

context: any;

private mql: MediaQueryList;
private uniqueId: string;

constructor(props: SiderProps) {
constructor(props: InternalSideProps) {
super(props);
this.uniqueId = generateId('ant-sider-');
let matchMedia;
@@ -121,26 +116,19 @@ class Sider extends React.Component<SiderProps, SiderState> {
collapsed = props.defaultCollapsed;
}
this.state = {
collapsed,
collapsed: collapsed || false,
below: false,
};
}

getChildContext() {
return {
siderCollapsed: this.state.collapsed,
collapsedWidth: this.props.collapsedWidth,
};
}

componentDidMount() {
if (this.mql) {
this.mql.addListener(this.responsiveHandler);
this.responsiveHandler(this.mql);
}

if (this.context.siderHook) {
this.context.siderHook.addSider(this.uniqueId);
if (this.props.siderHook) {
this.props.siderHook.addSider(this.uniqueId);
}
}

@@ -149,8 +137,8 @@ class Sider extends React.Component<SiderProps, SiderState> {
this.mql.removeListener(this.responsiveHandler as any);
}

if (this.context.siderHook) {
this.context.siderHook.removeSider(this.uniqueId);
if (this.props.siderHook) {
this.props.siderHook.removeSider(this.uniqueId);
}
}

@@ -206,6 +194,7 @@ class Sider extends React.Component<SiderProps, SiderState> {
'onCollapse',
'breakpoint',
'onBreakpoint',
'siderHook',
]);
const rawWidth = this.state.collapsed ? collapsedWidth : width;
// use "px" as fallback unit for width
@@ -262,10 +251,31 @@ class Sider extends React.Component<SiderProps, SiderState> {
};

render() {
return <ConfigConsumer>{this.renderSider}</ConfigConsumer>;
const { collapsed } = this.state;
const { collapsedWidth } = this.props;
return (
<SiderContext.Provider
value={{
siderCollapsed: collapsed,
collapsedWidth,
}}
>
<ConfigConsumer>{this.renderSider}</ConfigConsumer>
</SiderContext.Provider>
);
}
}

polyfill(Sider);
polyfill(InternalSider);

export default Sider;
export default class Sider extends React.Component {
static __ANT_LAYOUT_SIDER: any = true;

render() {
return (
<LayoutContext.Consumer>
{(context: LayoutContextProps) => <InternalSider {...context} {...this.props} />}
</LayoutContext.Consumer>
);
}
}
ProTip! Use n and p to navigate between commits in a pull request.
You can鈥檛 perform that action at this time.