Skip to content

GitLab

A
ant-design-pro
Commit 533c091b authored by 陈帅's avatar 陈帅
Browse files
Options

fix lint error

parent cfbf108b
Hide whitespace changes
Inline Side-by-side
Showing with 598 additions and 358 deletions
.eslintrc.js
View file @ 533c091b
......@@ -19,6 +19,7 @@ module.exports = {
'react/jsx-no-bind': [0],
'react/prop-types': [0],
'react/prefer-stateless-function': [0],
'react/jsx-one-expression-per-line': [0],
'react/jsx-wrap-multilines': [
'error',
{
......
src/components/ActiveChart/index.js
View file @ 533c091b
......@@ -32,6 +32,7 @@ export default class ActiveChart extends Component {
componentWillUnmount() {
clearTimeout(this.timer);
}
loopData = () => {
this.timer = setTimeout(() => {
this.setState(
......@@ -46,6 +47,7 @@ export default class ActiveChart extends Component {
);
}, 1000);
};
render() {
const { activeData = [] } = this.state;
......
src/components/Authorized/PromiseRender.js
View file @ 533c091b
......@@ -5,13 +5,16 @@ export default class PromiseRender extends React.PureComponent {
state = {
component: null,
};
componentDidMount() {
this.setRenderComponent(this.props);
}
componentDidUpdate(nextProps) {
// new Props enter
this.setRenderComponent(nextProps);
}
// set render Component : ok or error
setRenderComponent(props) {
const ok = this.checkIsInstantiation(props.ok);
......@@ -28,6 +31,7 @@ export default class PromiseRender extends React.PureComponent {
});
});
}
// Determine whether the incoming component has been instantiated
// AuthorizedRoute is already instantiated
// Authorized render is already instantiated, children is no instantiated
......@@ -38,10 +42,11 @@ export default class PromiseRender extends React.PureComponent {
}
return () => target;
};
render() {
const Component = this.state.component;
return Component ? (
<Component {...this.props} />
const { component } = this.state;
return component ? (
<component {...this.props} />
) : (
<div
style={{
......
src/components/Charts/Pie/index.js
View file @ 533c091b
......@@ -29,12 +29,14 @@ export default class Pie extends Component {
}
componentDidUpdate(preProps) {
if (this.props.data !== preProps.data) {
const { data } = this.props;
if (data !== preProps.data) {
// because of charts data create when rendered
// so there is a trick for get rendered time
this.getLegendData();
}
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
this.resize.cancel();
......@@ -68,28 +70,6 @@ export default class Pie extends Component {
});
};
// for window resize auto responsive legend
@Bind()
@Debounce(300)
resize() {
const { hasLegend } = this.props;
if (!hasLegend || !this.root) {
window.removeEventListener('resize', this.resize);
return;
}
if (this.root.parentNode.clientWidth <= 380) {
if (!this.state.legendBlock) {
this.setState({
legendBlock: true,
});
}
} else if (this.state.legendBlock) {
this.setState({
legendBlock: false,
});
}
}
handleRoot = n => {
this.root = n;
};
......@@ -112,6 +92,29 @@ export default class Pie extends Component {
});
};
// for window resize auto responsive legend
@Bind()
@Debounce(300)
resize() {
const { hasLegend } = this.props;
const { legendBlock } = this.state;
if (!hasLegend || !this.root) {
window.removeEventListener('resize', this.resize);
return;
}
if (this.root.parentNode.clientWidth <= 380) {
if (!legendBlock) {
this.setState({
legendBlock: true,
});
}
} else if (legendBlock) {
this.setState({
legendBlock: false,
});
}
}
render() {
const {
valueFormat,
......@@ -137,9 +140,10 @@ export default class Pie extends Component {
});
const defaultColors = colors;
let data = this.props.data || [];
let selected = this.props.selected || true;
let tooltip = this.props.tooltip || true;
let { data, selected, tooltip } = this.props;
data = data || [];
selected = selected || true;
tooltip = tooltip || true;
let formatColor;
const scale = {
......
src/components/CountDown/index.js
View file @ 533c091b
......@@ -23,32 +23,25 @@ const initTime = props => {
};
class CountDown extends Component {
timer = 0;
interval = 1000;
constructor(props) {
super(props);
const { lastTime } = initTime(props);
this.state = {
lastTime,
};
}
static getDerivedStateFromProps(nextProps, preState) {
const { lastTime } = initTime(nextProps);
if (preState.lastTime !== lastTime) {
return {
lastTime,
};
}
return null;
}
componentDidMount() {
this.tick();
}
componentDidUpdate(prevProps) {
if (this.props.target !== prevProps.target) {
const { target } = this.props;
if (target !== prevProps.target) {
clearTimeout(this.timer);
this.tick();
}
......@@ -58,8 +51,16 @@ class CountDown extends Component {
clearTimeout(this.timer);
}
timer = 0;
interval = 1000;
static getDerivedStateFromProps(nextProps, preState) {
const { lastTime } = initTime(nextProps);
if (preState.lastTime !== lastTime) {
return {
lastTime,
};
}
return null;
}
// defaultFormat = time => (
// <span>{moment(time).format('hh:mm:ss')}</span>
// );
......@@ -76,6 +77,7 @@ class CountDown extends Component {
</span>
);
};
tick = () => {
const { onEnd } = this.props;
let { lastTime } = this.state;
......
src/components/EditableItem/index.js
View file @ 533c091b
......@@ -3,23 +3,32 @@ import { Input, Icon } from 'antd';
import styles from './index.less';
export default class EditableItem extends PureComponent {
state = {
value: this.props.value,
editable: false,
};
constructor(props) {
super(props);
this.state = {
value: props.value,
editable: false,
};
}
handleChange = e => {
const { value } = e.target;
this.setState({ value });
};
check = () => {
this.setState({ editable: false });
if (this.props.onChange) {
this.props.onChange(this.state.value);
const { value } = this.state;
const { onChange } = this.state;
if (onChange) {
onChange(value);
}
};
edit = () => {
this.setState({ editable: true });
};
render() {
const { value, editable } = this.state;
return (
......
src/components/EditableLinkGroup/index.js
View file @ 533c091b
......@@ -17,6 +17,7 @@ class EditableLinkGroup extends PureComponent {
onAdd: () => {},
linkElement: 'a',
};
render() {
const { links, linkElement, onAdd } = this.props;
return (
......
src/components/GlobalHeader/RightContent.js
View file @ 533c091b
......@@ -38,6 +38,7 @@ export default class GlobalHeaderRight extends PureComponent {
});
return groupBy(newNotices, 'type');
}
render() {
const {
currentUser,
......@@ -45,6 +46,7 @@ export default class GlobalHeaderRight extends PureComponent {
onNoticeVisibleChange,
onMenuClick,
onNoticeClear,
theme,
} = this.props;
const menu = (
<Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
......@@ -65,7 +67,7 @@ export default class GlobalHeaderRight extends PureComponent {
);
const noticeData = this.getNoticeData();
let className = styles.right;
if (this.props.theme === 'dark') {
if (theme === 'dark') {
className = `${styles.right} ${styles.dark}`;
}
return (
......
src/components/HeaderSearch/index.js
View file @ 533c091b
......@@ -25,44 +25,58 @@ export default class HeaderSearch extends PureComponent {
defaultOpen: false,
};
state = {
searchMode: this.props.defaultOpen,
value: '',
};
constructor(props) {
super(props);
this.state = {
searchMode: props.defaultOpen,
value: '',
};
}
componentWillUnmount() {
clearTimeout(this.timeout);
}
onKeyDown = e => {
if (e.key === 'Enter') {
const { onPressEnter } = this.props;
const { value } = this.state;
this.timeout = setTimeout(() => {
this.props.onPressEnter(this.state.value); // Fix duplicate onPressEnter
onPressEnter(value); // Fix duplicate onPressEnter
}, 0);
}
};
onChange = value => {
const { onChange } = this.props;
this.setState({ value });
if (this.props.onChange) {
this.props.onChange();
if (onChange) {
onChange();
}
};
enterSearchMode = () => {
this.setState({ searchMode: true }, () => {
if (this.state.searchMode) {
const { searchMode } = this.state;
if (searchMode) {
this.input.focus();
}
});
};
leaveSearchMode = () => {
this.setState({
searchMode: false,
value: '',
});
};
render() {
const { className, placeholder, ...restProps } = this.props;
delete restProps.defaultOpen; // for rc-select not affected
const { searchMode, value } = this.state;
const inputClass = classNames(styles.input, {
[styles.show]: this.state.searchMode,
[styles.show]: searchMode,
});
return (
<span className={classNames(className, styles.headerSearch)} onClick={this.enterSearchMode}>
......@@ -71,7 +85,7 @@ export default class HeaderSearch extends PureComponent {
key="AutoComplete"
{...restProps}
className={inputClass}
value={this.state.value}
value={value}
onChange={this.onChange}
>
<Input
......
src/components/Login/LoginItem.js
View file @ 533c091b
......@@ -14,14 +14,18 @@ class WarpFormItem extends Component {
count: 0,
};
}
componentDidMount() {
if (this.props.updateActive) {
this.props.updateActive(this.props.name);
const { updateActive, name } = this.props;
if (updateActive) {
updateActive(name);
}
}
componentWillUnmount() {
clearInterval(this.interval);
}
onGetCaptcha = () => {
const { onGetCaptcha } = this.props;
const result = onGetCaptcha ? onGetCaptcha() : null;
......@@ -34,6 +38,7 @@ class WarpFormItem extends Component {
this.runGetCaptchaCountDown();
}
};
getFormItemOptions = ({ onChange, defaultValue, rules }) => {
const options = {
rules: rules || this.customprops.rules,
......@@ -46,8 +51,10 @@ class WarpFormItem extends Component {
}
return options;
};
runGetCaptchaCountDown = () => {
let count = this.props.countDown || 59;
const { countDown } = this.props;
let count = countDown || 59;
this.setState({ count });
this.interval = setInterval(() => {
count -= 1;
......@@ -57,10 +64,13 @@ class WarpFormItem extends Component {
}
}, 1000);
};
render() {
const { count } = this.state;
const { getFieldDecorator } = this.props.form;
const {
form: { getFieldDecorator },
} = this.props;
// 这么写是为了防止restProps中 带入 onChange, defaultValue, rules props
const {
......@@ -70,6 +80,7 @@ class WarpFormItem extends Component {
rules,
name,
updateActive,
type,
...restProps
} = this.props;
......@@ -77,15 +88,13 @@ class WarpFormItem extends Component {
const options = this.getFormItemOptions(this.props);
const otherProps = restProps || {};
if (this.props.type === 'Captcha') {
if (type === 'Captcha') {
const inputProps = omit(otherProps, ['onGetCaptcha']);
return (
<FormItem>
<Row gutter={8}>
<Col span={16}>
{getFieldDecorator(name, options)(
<Input {...this.props.customprops} {...inputProps} />
)}
{getFieldDecorator(name, options)(<Input {...customprops} {...inputProps} />)}
</Col>
<Col span={8}>
<Button
......@@ -103,7 +112,7 @@ class WarpFormItem extends Component {
}
return (
<FormItem>
{getFieldDecorator(name, options)(<Input {...this.props.customprops} {...otherProps} />)}
{getFieldDecorator(name, options)(<Input {...customprops} {...otherProps} />)}
</FormItem>
);
}
......
src/components/Login/LoginTab.js
View file @ 533c091b
......@@ -17,11 +17,15 @@ class LoginTab extends Component {
super(props);
this.uniqueId = generateId('login-tab-');
}
componentDidMount() {
this.props.tabUtil.addTab(this.uniqueId);
const { tabUtil } = this.props;
tabUtil.addTab(this.uniqueId);
}
render() {
return <TabPane {...this.props}>{this.props.children}</TabPane>;
const { children } = this.props;
return <TabPane {...this.props}>{children}</TabPane>;
}
}
......
src/components/Login/index.js
View file @ 533c091b
......@@ -23,32 +23,40 @@ class Login extends Component {
onSubmit: () => {},
};
state = {
type: this.props.defaultActiveKey,
tabs: [],
active: {},
};
constructor(props) {
super(props);
this.state = {
type: props.defaultActiveKey,
tabs: [],
active: {},
};
}
onSwitch = type => {
this.setState({
type,
});
this.props.onTabChange(type);
const { onTabChange } = this.props;
onTabChange(type);
};
getContext = () => {
const { tabs } = this.state;
const { form } = this.props;
return {
tabUtil: {
addTab: id => {
this.setState({
tabs: [...this.state.tabs, id],
tabs: [...tabs, id],
});
},
removeTab: id => {
this.setState({
tabs: this.state.tabs.filter(currentId => currentId !== id),
tabs: tabs.filter(currentId => currentId !== id),
});
},
},
form: this.props.form,
form,
updateActive: activeItem => {
const { type, active } = this.state;
if (active[type]) {
......@@ -62,14 +70,17 @@ class Login extends Component {
},
};
};
handleSubmit = e => {
e.preventDefault();
const { active, type } = this.state;
const activeFileds = active[type];
this.props.form.validateFields(activeFileds, { force: true }, (err, values) => {
this.props.onSubmit(err, values);
const { form, onSubmit } = this.props;
form.validateFields(activeFileds, { force: true }, (err, values) => {
onSubmit(err, values);
});
};
render() {
const { className, children } = this.props;
const { type, tabs } = this.state;
......
src/components/NoticeIcon/index.js
View file @ 533c091b
......@@ -21,23 +21,19 @@ export default class NoticeIcon extends PureComponent {
},
emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
};
constructor(props) {
super(props);
this.state = {};
if (props.children && props.children[0]) {
this.state.tabType = props.children[0].props.title;
}
}
onItemClick = (item, tabProps) => {
const { onItemClick } = this.props;
onItemClick(item, tabProps);
};
onTabChange = tabType => {
this.setState({ tabType });
this.props.onTabChange(tabType);
const onTabChange = this.props;
onTabChange(tabType);
};
getNotificationBox() {
const { children, loading, locale } = this.props;
const { children, loading, locale, onClear } = this.props;
if (!children) {
return null;
}
......@@ -52,7 +48,7 @@ export default class NoticeIcon extends PureComponent {
{...child.props}
data={child.props.list}
onClick={item => this.onItemClick(item, child.props)}
onClear={() => this.props.onClear(child.props.title)}
onClear={() => onClear(child.props.title)}
title={child.props.title}
locale={locale}
/>
......@@ -67,8 +63,9 @@ export default class NoticeIcon extends PureComponent {
</Spin>
);
}
render() {
const { className, count, popupAlign, onPopupVisibleChange } = this.props;
const { className, count, popupAlign, popupVisible, onPopupVisibleChange } = this.props;
const noticeButtonClass = classNames(className, styles.noticeButton);
const notificationBox = this.getNotificationBox();
const trigger = (
......@@ -83,7 +80,7 @@ export default class NoticeIcon extends PureComponent {
}
const popoverProps = {};
if ('popupVisible' in this.props) {
popoverProps.visible = this.props.popupVisible;
popoverProps.visible = popupVisible;
}
return (
<Popover
......
src/components/PageHeader/index.js
View file @ 533c091b
......@@ -27,29 +27,36 @@ export default class PageHeader extends PureComponent {
}
componentDidUpdate(preProps) {
if (preProps.tabActiveKey !== this.props.tabActiveKey) {
const { tabActiveKey } = this.props;
if (preProps.tabActiveKey !== tabActiveKey) {
this.getBreadcrumbDom();
}
}
onChange = key => {
if (this.props.onTabChange) {
this.props.onTabChange(key);
const { onTabChange } = this.props;
if (onTabChange) {
onTabChange(key);
}
};
getBreadcrumbProps = () => {
const { routes, params, location, breadcrumbNameMap } = this.props;
return {
routes: this.props.routes,
params: this.props.params,
routerLocation: this.props.location,
breadcrumbNameMap: this.props.breadcrumbNameMap,
routes,
params,
routerLocation: location,
breadcrumbNameMap,
};
};
getBreadcrumbDom = () => {
const breadcrumb = this.conversionBreadcrumbList();
this.setState({
breadcrumb,
});
};
// Generated according to props
conversionFromProps = () => {
const { breadcrumbList, breadcrumbSeparator, linkElement = 'a' } = this.props;
......@@ -71,6 +78,7 @@ export default class PageHeader extends PureComponent {
</Breadcrumb>
);
};
conversionFromLocation = (routerLocation, breadcrumbNameMap) => {
const { breadcrumbSeparator, linkElement = 'a' } = this.props;
// Convert the url to an array
......@@ -107,6 +115,7 @@ export default class PageHeader extends PureComponent {
</Breadcrumb>
);
};
/**
* 将参数转化为面包屑
* Convert parameters into breadcrumbs
......@@ -137,6 +146,7 @@ export default class PageHeader extends PureComponent {
}
return null;
};
// 渲染Breadcrumb 子节点
// Render the Breadcrumb child node
itemRender = (route, params, routes, paths) => {
......@@ -178,10 +188,10 @@ export default class PageHeader extends PureComponent {
if (tabActiveKey !== undefined) {
activeKeyProps.activeKey = tabActiveKey;
}
const { breadcrumb } = this.state;
return (
<div className={clsString}>
{this.state.breadcrumb}
{breadcrumb}
<div className={styles.detail}>
{logo && <div className={styles.logo}>{logo}</div>}
<div className={styles.main}>
......
src/components/SettingDarwer/index.js
View file @ 533c091b
......@@ -21,7 +21,9 @@ const Body = ({ children, title, style }) => (
@connect(({ setting }) => ({ setting }))
class SettingDarwer extends PureComponent {
componentDidMount() {
const { themeColor, colorWeak } = this.props.setting;
const {
setting: { themeColor, colorWeak },
} = this.props;
if (themeColor !== '#1890FF') {
window.less.refresh().then(() => {
this.colorChange(themeColor);
......@@ -31,8 +33,11 @@ class SettingDarwer extends PureComponent {
document.body.className = 'colorWeak';
}
}
getLayOutSetting = () => {
const { grid, fixedHeader, autoHideHeader, fixSiderbar } = this.props.setting;
const {
setting: { grid, fixedHeader, autoHideHeader, fixSiderbar },
} = this.props;
return [
{
title: '栅格模式',
......@@ -83,8 +88,10 @@ class SettingDarwer extends PureComponent {
return !item.hide;
});
};
changeSetting = (key, value) => {
const nextState = { ...this.props.setting };
const { setting } = this.props;
const nextState = { ...setting };
nextState[key] = value;
if (key === 'layout') {
if (value === 'topmenu') {
......@@ -106,15 +113,19 @@ class SettingDarwer extends PureComponent {
}
}
this.setState(nextState, () => {
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'setting/changeSetting',
payload: this.state,
});
});
};
togglerContent = () => {
this.changeSetting('collapse', !this.props.setting.collapse);
const { setting } = this.props;
this.changeSetting('collapse', !setting.collapse);
};
colorChange = color => {
this.changeSetting('themeColor', color);
const hideMessage = message.loading('正在编译主题！', 0);
......@@ -131,8 +142,11 @@ class SettingDarwer extends PureComponent {
});
}, 200);
};
render() {
const { collapse, silderTheme, themeColor, layout, colorWeak } = this.props.setting;
const {
setting: { collapse, silderTheme, themeColor, layout, colorWeak },
} = this.props;
return (
<div className={styles.settingDarwer}>
<DrawerMenu
......
src/components/SiderMenu/BaseMenu.js
View file @ 533c091b
......@@ -32,6 +32,7 @@ export default class BaseMenu extends PureComponent {
super(props);
this.flatMenuKeys = this.getFlatMenuKeys(props.menuData);
}
/**
* Recursively flatten the data
* [{path:string},{path:string}] => {path,path2}
......@@ -47,6 +48,7 @@ export default class BaseMenu extends PureComponent {
});
return keys;
}
/**
* 获得菜单子节点
* @memberof SiderMenu
......@@ -64,6 +66,7 @@ export default class BaseMenu extends PureComponent {
})
.filter(item => item);
};
// Get the currently selected menu
getSelectedMenuKeys = () => {
const {
......@@ -71,6 +74,7 @@ export default class BaseMenu extends PureComponent {
} = this.props;
return urlToList(pathname).map(itemPath => getMenuMatches(this.flatMenuKeys, itemPath).pop());
};
/**
* get SubMenu or Item
*/
......@@ -97,6 +101,7 @@ export default class BaseMenu extends PureComponent {
return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>;
}
};
/**
* 判断是否是http链接.返回 Link 或 a
* Judge whether it is http link.return a or Link
......@@ -115,15 +120,16 @@ export default class BaseMenu extends PureComponent {
</a>
);
}
const { location, isMobile, onCollapse } = this.props;
return (
<Link
to={itemPath}
target={target}
replace={itemPath === this.props.location.pathname}
replace={itemPath === location.pathname}
onClick={
this.props.isMobile
isMobile
? () => {
this.props.onCollapse(true);
onCollapse(true);
}
: undefined
}
......@@ -133,14 +139,17 @@ export default class BaseMenu extends PureComponent {
</Link>
);
};
// permission to check
checkPermissionItem = (authority, ItemDom) => {
if (this.props.Authorized && this.props.Authorized.check) {
const { check } = this.props.Authorized;
const { Authorized } = this.props;
if (Authorized && Authorized.check) {
const { check } = Authorized;
return check(authority, ItemDom);
}
return ItemDom;
};
conversionPath = path => {
if (path && path.indexOf('http') === 0) {
return path;
......@@ -148,6 +157,7 @@ export default class BaseMenu extends PureComponent {
return `/${path || ''}`.replace(/\/+/g, '/');
}
};
render() {
const { openKeys, theme, mode } = this.props;
// if pathname can't match, use the nearest parent's key
......@@ -161,17 +171,18 @@ export default class BaseMenu extends PureComponent {
openKeys,
};
}
const { handleOpenChange, style, menuData } = this.props;
return (
<Menu
key="Menu"
mode={mode}
theme={theme}
onOpenChange={this.props.handleOpenChange}
onOpenChange={handleOpenChange}
selectedKeys={selectedKeys}
style={this.props.style}
style={style}
{...props}
>
{this.getNavMenuItems(this.props.menuData)}
{this.getNavMenuItems(menuData)}
</Menu>
);
}
......
src/components/SiderMenu/SliderMenu.js
View file @ 533c091b
......@@ -16,10 +16,11 @@ const { SubMenu } = Menu;
const getDefaultCollapsedSubMenus = props => {
const {
location: { pathname },
flatMenuKeys,
} = props;
return urlToList(pathname)
.map(item => {
return getMenuMatches(props.flatMenuKeys, item)[0];
return getMenuMatches(flatMenuKeys, item)[0];
})
.filter(item => item);
};
......@@ -69,7 +70,6 @@ export default class SiderMenu extends PureComponent {
super(props);
this.flatMenuKeys = getFlatMenuKeys(props.menuData);
this.state = {
pathname: props.location.pathname,
openKeys: getDefaultCollapsedSubMenus(props),
};
}
......@@ -84,6 +84,7 @@ export default class SiderMenu extends PureComponent {
}
return null;
}
/**
* Convert pathname to openKeys
* /list/search/articles = > ['list','/list/search']
......@@ -96,6 +97,7 @@ export default class SiderMenu extends PureComponent {
props || this.props;
return getMenuMatchKeys(this.flatMenuKeys, urlToList(pathname));
}
/**
* 判断是否是http链接.返回 Link 或 a
* Judge whether it is http link.return a or Link
......@@ -114,15 +116,16 @@ export default class SiderMenu extends PureComponent {
</a>
);
}
const { pathname, isMobile, onCollapse } = this.props;
return (
<Link
to={itemPath}
target={target}
replace={itemPath === this.state.pathname}
replace={itemPath === pathname}
onClick={
this.props.isMobile
isMobile
? () => {
this.props.onCollapse(true);
onCollapse(true);
}
: undefined
}
......@@ -132,6 +135,7 @@ export default class SiderMenu extends PureComponent {
</Link>
);
};
/**
* get SubMenu or Item
*/
......@@ -163,6 +167,7 @@ export default class SiderMenu extends PureComponent {
return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>;
}
};
/**
* 获得菜单子节点
* @memberof SiderMenu
......@@ -180,6 +185,7 @@ export default class SiderMenu extends PureComponent {
})
.filter(item => item);
};
// Get the currently selected menu
getSelectedMenuKeys = () => {
const {
......@@ -187,6 +193,7 @@ export default class SiderMenu extends PureComponent {
} = this.props;
return getMenuMatchKeys(this.flatMenuKeys, urlToList(pathname));
};
// conversion Path
// 转化路径
conversionPath = path => {
......@@ -196,28 +203,34 @@ export default class SiderMenu extends PureComponent {
return `/${path || ''}`.replace(/\/+/g, '/');
}
};
// permission to check
checkPermissionItem = (authority, ItemDom) => {
if (this.props.Authorized && this.props.Authorized.check) {
const { check } = this.props.Authorized;
const { Authorized } = this.props;
if (Authorized && Authorized.check) {
const { check } = Authorized;
return check(authority, ItemDom);
}
return ItemDom;
};
isMainMenu = key => {
return this.props.menuData.some(item => {
const { menuData } = this.props;
return menuData.some(item => {
if (key) {
return item.key === key || item.path === key;
}
return false;
});
};
handleOpenChange = openKeys => {
const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1;
this.setState({
openKeys: moreThanOne ? [openKeys.pop()] : [...openKeys],
});
};
render() {
const { logo, collapsed, onCollapse, fixSiderbar, theme } = this.props;
const { openKeys } = this.state;
......
src/components/StandardTable/index.js
View file @ 533c091b
......@@ -23,6 +23,7 @@ class StandardTable extends PureComponent {
needTotalList,
};
}
static getDerivedStateFromProps(nextProps) {
// clean state
if (nextProps.selectedRows.length === 0) {
......@@ -34,8 +35,9 @@ class StandardTable extends PureComponent {
}
return null;
}
handleRowSelectChange = (selectedRowKeys, selectedRows) => {
let needTotalList = [...this.state.needTotalList];
let { needTotalList } = this.state;
needTotalList = needTotalList.map(item => {
return {
...item,
......@@ -44,16 +46,19 @@ class StandardTable extends PureComponent {
}, 0),
};
});
if (this.props.onSelectRow) {
this.props.onSelectRow(selectedRows);
const { onSelectRow } = this.props;
if (onSelectRow) {
onSelectRow(selectedRows);
}
this.setState({ selectedRowKeys, needTotalList });
};
handleTableChange = (pagination, filters, sorter) => {
this.props.onChange(pagination, filters, sorter);
const { onChange } = this.props;
if (onChange) {
onChange(pagination, filters, sorter);
}
};
cleanSelectedKeys = () => {
......
src/components/TagSelect/index.js
View file @ 533c091b
......@@ -15,17 +15,14 @@ const TagSelectOption = ({ children, checked, onChange, value }) => (
TagSelectOption.isTagSelectOption = true;
class TagSelect extends Component {
state = {
expand: false,
value: this.props.value || this.props.defaultValue || [],
};
static getDerivedStateFromProps(nextProps) {
if ('value' in nextProps && nextProps.value) {
return { value: nextProps.value };
}
return null;
constructor(props) {
super(props);
this.state = {
expand: false,
value: props.value || props.defaultValue || [],
};
}
onChange = value => {
const { onChange } = this.props;
if (!('value' in this.props)) {
......@@ -44,6 +41,13 @@ class TagSelect extends Component {
this.onChange(checkedTags);
};
static getDerivedStateFromProps(nextProps) {
if ('value' in nextProps && nextProps.value) {
return { value: nextProps.value };
}
return null;
}
getAllTags() {
let { children } = this.props;
children = React.Children.toArray(children);
......@@ -54,7 +58,8 @@ class TagSelect extends Component {
}
handleTagChange = (value, checked) => {
const checkedTags = [...this.state.value];
const { value: StateValue } = this.state;
const checkedTags = [...StateValue];
const index = checkedTags.indexOf(value);
if (checked && index === -1) {
......@@ -66,8 +71,9 @@ class TagSelect extends Component {
};
handleExpand = () => {
const { expand } = this.state;
this.setState({
expand: !this.state.expand,
expand: !expand,
});
};
......
src/layouts/BasicLayout.js
View file @ 533c091b
......@@ -67,6 +67,7 @@ class BasicLayout extends React.PureComponent {
breadcrumbNameMap: getBreadcrumbNameMap(menuData, routerData),
};
}
getPageTitle() {
const { routerData, location } = this.props;
const { pathname } = location;
......@@ -83,6 +84,7 @@ class BasicLayout extends React.PureComponent {
}
return title;
}
getLayoutStyle = () => {
const { fixSiderbar, collapsed, layout } = this.props;
if (fixSiderbar && layout !== 'topmenu') {
......@@ -92,6 +94,7 @@ class BasicLayout extends React.PureComponent {
}
return null;
};
getContentStyle = () => {
const { fixedHeader } = this.props;
return {
......@@ -99,6 +102,7 @@ class BasicLayout extends React.PureComponent {
paddingTop: fixedHeader ? 64 : 0,
};
};
getBashRedirect = () => {
// According to the url parameter to redirect
// 这里是重定向的,重定向到 url 的 redirect 参数所示地址
......@@ -119,16 +123,25 @@ class BasicLayout extends React.PureComponent {
}
return redirect;
};
handleMenuCollapse = collapsed => {
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'global/changeLayoutCollapsed',
payload: collapsed,
});
};
render() {
const { isMobile, redirectData, routerData, match } = this.props;
const isTop = this.props.layout === 'topmenu';
const {
isMobile,
redirectData,
routerData,
silderTheme,
layout: PropsLayout,
match,
} = this.props;
const isTop = PropsLayout === 'topmenu';
const bashRedirect = this.getBashRedirect();
const myRedirectData = redirectData || [];
const layout = (
......@@ -137,7 +150,7 @@ class BasicLayout extends React.PureComponent {
<SiderMenu
logo={logo}
Authorized={Authorized}
theme={this.props.silderTheme}
theme={silderTheme}
onCollapse={this.handleMenuCollapse}
{...this.props}
/>
......
src/layouts/Header.js
View file @ 533c091b
......@@ -14,12 +14,15 @@ class HeaderView extends PureComponent {
state = {
visible: true,
};
componentDidMount() {
document.getElementById('root').addEventListener('scroll', this.handScroll);
}
componentWillUnmount() {
document.getElementById('root').removeEventListener('scroll', this.handScroll);
}
getHeadWidth = () => {
const { isMobile, collapsed, setting } = this.props;
const { fixedHeader, layout } = setting;
......@@ -28,53 +31,62 @@ class HeaderView extends PureComponent {
}
return collapsed ? 'calc(100% - 80px)' : 'calc(100% - 256px)';
};
handleNoticeClear = type => {
message.success(`清空了${type}`);
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'global/clearNotices',
payload: type,
});
};
handleMenuClick = ({ key }) => {
const { dispatch } = this.props;
if (key === 'userCenter') {
this.props.dispatch(routerRedux.push('/account/center'));
dispatch(routerRedux.push('/account/center'));
return;
}
if (key === 'triggerError') {
this.props.dispatch(routerRedux.push('/exception/trigger'));
dispatch(routerRedux.push('/exception/trigger'));
return;
}
if (key === 'userinfo') {
this.props.dispatch(routerRedux.push('/account/settings/base'));
dispatch(routerRedux.push('/account/settings/base'));
return;
}
if (key === 'logout') {
this.props.dispatch({
dispatch({
type: 'login/logout',
});
}
};
handleNoticeVisibleChange = visible => {
if (visible) {
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'global/fetchNotices',
});
}
};
handScroll = () => {
if (!this.props.autoHideHeader) {
const { autoHideHeader } = this.props;
const { visible } = this.state;
if (!autoHideHeader) {
return;
}
const { scrollTop } = document.getElementById('root');
if (!this.ticking) {
this.ticking = false;
requestAnimationFrame(() => {
if (scrollTop > 400 && this.state.visible) {
if (scrollTop > 400 && visible) {
this.setState({
visible: false,
});
}
if (scrollTop < 400 && !this.state.visible) {
if (scrollTop < 400 && !visible) {
this.setState({
visible: true,
});
......@@ -83,11 +95,13 @@ class HeaderView extends PureComponent {
});
}
};
render() {
const { isMobile, handleMenuCollapse } = this.props;
const { silderTheme, layout, fixedHeader } = this.props.setting;
const { isMobile, handleMenuCollapse, setting } = this.props;
const { silderTheme, layout, fixedHeader } = setting;
const { visible } = this.state;
const isTop = layout === 'topmenu';
const HeaderDom = this.state.visible ? (
const HeaderDom = visible ? (
<Header
style={{ padding: 0, width: this.getHeadWidth() }}
className={fixedHeader ? styles.fixedHeader : ''}
......
src/layouts/UserLayout.js
View file @ 533c091b
......@@ -41,6 +41,7 @@ class UserLayout extends React.PureComponent {
}
return title;
}
render() {
const { routerData, match } = this.props;
return (
......
src/routes/Account/Center.js
View file @ 533c091b
......@@ -44,7 +44,7 @@ export default class Center extends PureComponent {
componentDidMount() {
const { dispatch } = this.props;
this.props.dispatch({
dispatch({
type: 'user/fetchCurrent',
});
dispatch({
......@@ -58,7 +58,7 @@ export default class Center extends PureComponent {
});
}
onTabChange = (key) => {
onTabChange = key => {
this.setState({ key });
};
......@@ -66,11 +66,11 @@ export default class Center extends PureComponent {
this.setState({ inputVisible: true }, () => this.input.focus());
};
saveInputRef = (input) => {
saveInputRef = input => {
this.input = input;
};
handleInputChange = (e) => {
handleInputChange = e => {
this.setState({ inputValue: e.target.value });
};
......@@ -78,14 +78,8 @@ export default class Center extends PureComponent {
const { state } = this;
const { inputValue } = state;
let { newTags } = state;
if (
inputValue &&
newTags.filter(tag => tag.label === inputValue).length === 0
) {
newTags = [
...newTags,
{ key: `new-${newTags.length}`, label: inputValue },
];
if (inputValue && newTags.filter(tag => tag.label === inputValue).length === 0) {
newTags = [...newTags, { key: `new-${newTags.length}`, label: inputValue }];
}
this.setState({
newTags,
......@@ -101,9 +95,7 @@ export default class Center extends PureComponent {
{text}
</span>
);
const ListContent = ({
data: { content, updatedAt, avatar, owner, href },
}) => (
const ListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
<div className={stylesArticles.listContent}>
<div className={stylesArticles.description}>{content}</div>
<div className={stylesArticles.extra}>
......@@ -132,10 +124,7 @@ export default class Center extends PureComponent {
>
<List.Item.Meta
title={
<a
className={stylesArticles.listItemMetaTitle}
href={item.href}
>
<a className={stylesArticles.listItemMetaTitle} href={item.href}>
{item.title}
</a>
}
......@@ -158,29 +147,17 @@ export default class Center extends PureComponent {
const itemMenu = (
<Menu>
<Menu.Item>
<a
target="_blank"
rel="noopener noreferrer"
href="http://www.alipay.com/"
>
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
1st menu item
</a>
</Menu.Item>
<Menu.Item>
<a
target="_blank"
rel="noopener noreferrer"
href="http://www.taobao.com/"
>
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
2nd menu item
</a>
</Menu.Item>
<Menu.Item>
<a
target="_blank"
rel="noopener noreferrer"
href="http://www.tmall.com/"
>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
3d menu item
</a>
</Menu.Item>
......@@ -225,10 +202,7 @@ export default class Center extends PureComponent {
</Dropdown>,
]}
>
<Card.Meta
avatar={<Avatar size="small" src={item.avatar} />}
title={item.title}
/>
<Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
<div className={stylesApplications.cardItemContent}>
<CardInfo
activeUser={formatWan(item.activeUser)}
......@@ -257,10 +231,7 @@ export default class Center extends PureComponent {
hoverable
cover={<img alt={item.title} src={item.cover} />}
>
<Card.Meta
title={<a href="#">{item.title}</a>}
description={item.subDescription}
/>
<Card.Meta title={<a href="#">{item.title}</a>} description={item.subDescription} />
<div className={stylesProjects.cardItemContent}>
<span>{moment(item.updatedAt).fromNow()}</span>
<div className={stylesProjects.avatarList}>
......@@ -281,6 +252,7 @@ export default class Center extends PureComponent {
/>
);
};
renderContent() {
const { newTags, inputVisible, inputValue } = this.state;
const {
......@@ -335,9 +307,7 @@ export default class Center extends PureComponent {
<Divider dashed />
<div className={styles.tags}>
<div className={styles.tagsTitle}>标签</div>
{currentUser.tags
.concat(newTags)
.map(item => <Tag key={item.key}>{item.label}</Tag>)}
{currentUser.tags.concat(newTags).map(item => <Tag key={item.key}>{item.label}</Tag>)}
{inputVisible && (
<Input
ref={this.saveInputRef}
......@@ -351,10 +321,7 @@ export default class Center extends PureComponent {
/>
)}
{!inputVisible && (
<Tag
onClick={this.showInput}
style={{ background: '#fff', borderStyle: 'dashed' }}
>
<Tag onClick={this.showInput} style={{ background: '#fff', borderStyle: 'dashed' }}>
<Icon type="plus" />
</Tag>
)}
......@@ -378,6 +345,7 @@ export default class Center extends PureComponent {
</div>
);
}
render() {
const {
list: { list },
......@@ -416,17 +384,13 @@ export default class Center extends PureComponent {
application: this.renderApplications(list, listLoading),
project: this.renderProjects(list, listLoading),
};
const { key } = this.state;
return (
<GridContent>
<div className={styles.userCenter}>
<Row gutter={24}>
<Col lg={7} md={24}>
<Card
bordered={false}
style={{ marginBottom: 24 }}
loading={currentUserLoading}
>
<Card bordered={false} style={{ marginBottom: 24 }} loading={currentUserLoading}>
{currentUser && Object.keys(currentUser).length
? this.renderContent()
: 'loading...'}
......@@ -439,7 +403,7 @@ export default class Center extends PureComponent {
tabList={operationTabList}
onTabChange={this.onTabChange}
>
{contentMap[this.state.key]}
{contentMap[key]}
</Card>
</Col>
</Row>
......
src/routes/Account/Center/Center.js
View file @ 533c091b
......@@ -22,7 +22,7 @@ export default class Center extends PureComponent {
componentDidMount() {
const { dispatch } = this.props;
this.props.dispatch({
dispatch({
type: 'user/fetchCurrent',
});
dispatch({
......
src/routes/Account/Settings/BaseView.js
View file @ 533c091b
......@@ -49,26 +49,33 @@ export default class BaseView extends Component {
componentDidMount() {
this.setBaseInfo();
}
setBaseInfo = () => {
const { currentUser } = this.props;
Object.keys(this.props.form.getFieldsValue()).forEach(key => {
const { currentUser, form } = this.props;
Object.keys(form.getFieldsValue()).forEach(key => {
const obj = {};
obj[key] = currentUser[key] || null;
this.props.form.setFieldsValue(obj);
form.setFieldsValue(obj);
});
};
getAvatarURL() {
if (this.props.currentUser.avatar) {
return this.props.currentUser.avatar;
const { currentUser } = this.props;
if (currentUser.avatar) {
return currentUser.avatar;
}
const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
return url;
}
getViewDom = ref => {
this.view = ref;
};
render() {
const { getFieldDecorator } = this.props.form;
const {
form: { getFieldDecorator },
} = this.props;
return (
<div className={styles.baseView} ref={this.getViewDom}>
<div className={styles.left}>
......
src/routes/Account/Settings/BindingView.js
View file @ 533c091b
......@@ -24,6 +24,7 @@ export default class BindingView extends Component {
},
];
};
render() {
return (
<Fragment>
......
src/routes/Account/Settings/GeographicView.js
View file @ 533c091b
......@@ -20,24 +20,33 @@ const nullSlectItem = {
})
export default class GeographicView extends PureComponent {
componentDidMount = () => {
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'geographic/fetchProvince',
});
};
componentDidUpdate(props) {
if (!props.value && !!this.props.value && !!this.props.value.province) {
this.props.dispatch({
const { dispatch, value } = this.props;
if (!props.value && !!value && !!value.province) {
dispatch({
type: 'geographic/fetchCity',
payload: this.props.value.province.key,
payload: value.province.key,
});
}
}
getProvinceOption() {
return this.getOption(this.props.province);
const { province } = this.props;
return this.getOption(province);
}
getCityOption = () => {
return this.getOption(this.props.city);
const { city } = this.props;
return this.getOption(city);
};
getOption = list => {
if (!list || list.length < 1) {
return (
......@@ -54,22 +63,27 @@ export default class GeographicView extends PureComponent {
);
});
};
selectProvinceItem = item => {
this.props.dispatch({
const { dispatch, onChange } = this.props;
dispatch({
type: 'geographic/fetchCity',
payload: item.key,
});
this.props.onChange({
onChange({
province: item,
city: nullSlectItem,
});
};
selectCityItem = item => {
this.props.onChange({
province: this.props.value.province,
const { value, onChange } = this.props;
onChange({
province: value.province,
city: item,
});
};
conversionObject() {
const { value } = this.props;
if (!value) {
......@@ -84,10 +98,12 @@ export default class GeographicView extends PureComponent {
city: city || nullSlectItem,
};
}
render() {
const { province, city } = this.conversionObject();
const { isLoading } = this.props;
return (
<Spin spinning={this.props.isLoading} wrapperClassName={styles.row}>
<Spin spinning={isLoading} wrapperClassName={styles.row}>
<Select
className={styles.item}
value={province}
......
src/routes/Account/Settings/Info.js
View file @ 533c091b
......@@ -29,6 +29,16 @@ export default class Info extends Component {
mode: 'inline',
};
}
componentDidMount() {
window.addEventListener('resize', this.resize);
this.resize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
}
static getDerivedStateFromProps(props, state) {
const { match, location } = props;
let selectKey = location.pathname.replace(`${match.path}/`, '');
......@@ -38,25 +48,24 @@ export default class Info extends Component {
}
return null;
}
componentDidMount() {
window.addEventListener('resize', this.resize);
this.resize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
}
getmenu = () => {
return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
};
getRightTitle = () => {
return menuMap[this.state.selectKey];
const { selectKey } = this.state;
return menuMap[selectKey];
};
selectKey = ({ key }) => {
this.props.dispatch(routerRedux.push(`/account/settings/${key}`));
const { dispatch } = this.props;
dispatch(routerRedux.push(`/account/settings/${key}`));
this.setState({
selectKey: key,
});
};
resize = () => {
if (!this.main) {
return;
......@@ -75,11 +84,13 @@ export default class Info extends Component {
});
});
};
render() {
const { match, routerData, currentUser } = this.props;
if (!currentUser.userid) {
return '';
}
const { mode, selectKey } = this.state;
return (
<GridContent>
<div
......@@ -89,11 +100,7 @@ export default class Info extends Component {
}}
>
<div className={styles.leftmenu}>
<Menu
mode={this.state.mode}
selectedKeys={[this.state.selectKey]}
onClick={this.selectKey}
>
<Menu mode={mode} selectedKeys={[selectKey]} onClick={this.selectKey}>
{this.getmenu()}
</Menu>
</div>
......
src/routes/Account/Settings/NotificationView.js
View file @ 533c091b
......@@ -23,6 +23,7 @@ export default class NotificationView extends Component {
},
];
};
render() {
return (
<Fragment>
......
src/routes/Account/Settings/SecurityView.js
View file @ 533c091b
......@@ -37,6 +37,7 @@ export default class SecurityView extends Component {
},
];
};
render() {
return (
<Fragment>
......
src/routes/Dashboard/Monitor.js
View file @ 533c091b
......@@ -27,7 +27,8 @@ const havePermissionAsync = new Promise(resolve => {
}))
export default class Monitor extends PureComponent {
componentDidMount() {
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'monitor/fetchTags',
});
}
......
src/routes/Exception/triggerException.js
View file @ 533c091b
......@@ -10,21 +10,25 @@ export default class TriggerException extends PureComponent {
state = {
isloading: false,
};
triggerError = code => {
this.setState({
isloading: true,
});
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'error/query',
payload: {
code,
},
});
};
render() {
const { isloading } = this.state;
return (
<Card>
<Spin spinning={this.state.isloading} wrapperClassName={styles.trigger}>
<Spin spinning={isloading} wrapperClassName={styles.trigger}>
<Button type="danger" onClick={() => this.triggerError(401)}>
触发401
</Button>
......
src/routes/Forms/AdvancedForm.js
View file @ 533c091b
......@@ -61,21 +61,26 @@ class AdvancedForm extends PureComponent {
state = {
width: '100%',
};
componentDidMount() {
window.addEventListener('resize', this.resizeFooterToolbar, { passive: true });
}
componentWillUnmount() {
window.removeEventListener('resize', this.resizeFooterToolbar);
}
resizeFooterToolbar = () => {
requestAnimationFrame(() => {
const sider = document.querySelectorAll('.ant-layout-sider')[0];
const width = `calc(100% - ${sider.style.width})`;
if (this.state.width !== width) {
const { width: stateWidth } = this.state;
if (stateWidth !== width) {
this.setState({ width });
}
});
};
render() {
const { form, dispatch, submitting } = this.props;
const { getFieldDecorator, validateFieldsAndScroll, getFieldsError } = form;
......@@ -129,6 +134,7 @@ class AdvancedForm extends PureComponent {
</span>
);
};
const { width } = this.state;
return (
<PageHeaderLayout
title="高级表单"
......@@ -285,7 +291,7 @@ class AdvancedForm extends PureComponent {
initialValue: tableData,
})(<TableForm />)}
</Card>
<FooterToolbar style={{ width: this.state.width }}>
<FooterToolbar style={{ width }}>
{getErrorInfo()}
<Button type="primary" onClick={validate} loading={submitting}>
提交
......
src/routes/Forms/BasicForm.js
View file @ 533c091b
......@@ -26,19 +26,23 @@ const { TextArea } = Input;
@Form.create()
export default class BasicForms extends PureComponent {
handleSubmit = e => {
const { dispatch, form } = this.props;
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
form.validateFieldsAndScroll((err, values) => {
if (!err) {
this.props.dispatch({
dispatch({
type: 'form/submitRegularForm',
payload: values,
});
}
});
};
render() {
const { submitting } = this.props;
const { getFieldDecorator, getFieldValue } = this.props.form;
const {
form: { getFieldDecorator, getFieldValue },
} = this.props;
const formItemLayout = {
labelCol: {
......
src/routes/Forms/StepForm/index.js
View file @ 533c091b
......@@ -23,6 +23,7 @@ export default class StepForm extends PureComponent {
return 0;
}
}
render() {
const { match, routerData, location } = this.props;
return (
......
src/routes/Forms/TableForm.js
View file @ 533c091b
......@@ -3,6 +3,10 @@ import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
import styles from './style.less';
export default class TableForm extends PureComponent {
index = 0;
cacheOriginData = {};
constructor(props) {
super(props);
......@@ -21,14 +25,16 @@ export default class TableForm extends PureComponent {
}
return null;
}
getRowByKey(key, newData) {
return (newData || this.state.data).filter(item => item.key === key)[0];
const { data } = this.state;
return (newData || data).filter(item => item.key === key)[0];
}
index = 0;
cacheOriginData = {};
toggleEditable = (e, key) => {
e.preventDefault();
const newData = this.state.data.map(item => ({ ...item }));
const { data } = this.state;
const newData = data.map(item => ({ ...item }));
const target = this.getRowByKey(key, newData);
if (target) {
// 进入编辑状态时保存原始数据
......@@ -39,13 +45,30 @@ export default class TableForm extends PureComponent {
this.setState({ data: newData });
}
};
newMember = () => {
this.index += 1;
this.setState({
editData: [
{
key: `NEW_TEMP_ID_${this.index}`,
workId: '',
name: '',
department: '',
editable: true,
isNew: true,
},
],
});
};
remove(key) {
const { editData } = this.state;
const { editData, data } = this.state;
const { onChange } = this.props;
const editItem = editData.find(item => item.key === key);
if (editItem && editItem.key) {
// 如果存在缓存
if (this.cacheOriginData[key]) {
const data = [...this.state.data];
data.push(this.cacheOriginData[key]);
this.setState(
{
......@@ -62,39 +85,24 @@ export default class TableForm extends PureComponent {
});
return;
}
const newData = this.state.data.filter(item => item.key !== key);
const newData = data.filter(item => item.key !== key);
this.setState({ data: newData });
this.props.onChange(newData);
}
newMember = () => {
this.index += 1;
this.setState({
editData: [
{
key: `NEW_TEMP_ID_${this.index}`,
workId: '',
name: '',
department: '',
editable: true,
isNew: true,
},
],
});
};
handleKeyPress(e, key) {
if (e.key === 'Enter') {
this.saveRow(e, key);
}
onChange(newData);
}
handleFieldChange(e, fieldName, key) {
const newData = this.state.data.map(item => ({ ...item }));
const { data } = this.state;
const newData = data.map(item => ({ ...item }));
const target = this.getRowByKey(key, newData);
if (target) {
target[fieldName] = e.target.value;
this.setState({ data: newData });
}
}
saveRow(e, key) {
const { data } = this.state;
const { onChange } = this.props;
e.persist();
this.setState({
loading: true,
......@@ -115,16 +123,18 @@ export default class TableForm extends PureComponent {
}
delete target.isNew;
this.toggleEditable(e, key);
this.props.onChange(this.state.data);
onChange(data);
this.setState({
loading: false,
});
}, 500);
}
cancel(e, key) {
const { data } = this.state;
this.clickedCancel = true;
e.preventDefault();
const newData = this.state.data.map(item => ({ ...item }));
const newData = data.map(item => ({ ...item }));
const target = this.getRowByKey(key, newData);
if (this.cacheOriginData[key]) {
Object.assign(target, this.cacheOriginData[key]);
......@@ -134,6 +144,7 @@ export default class TableForm extends PureComponent {
this.setState({ data: newData });
this.clickedCancel = false;
}
render() {
const columns = [
{
......@@ -198,7 +209,8 @@ export default class TableForm extends PureComponent {
title: '操作',
key: 'action',
render: (text, record) => {
if (!!record.editable && this.state.loading) {
const { loading } = this.state;
if (!!record.editable && loading) {
return null;
}
if (record.editable) {
......@@ -233,11 +245,12 @@ export default class TableForm extends PureComponent {
},
},
];
const dataSource = this.state.data.concat(this.state.editData);
const { data, editData, loading } = this.state;
const dataSource = data.concat(editData);
return (
<Fragment>
<Table
loading={this.state.loading}
loading={loading}
columns={columns}
dataSource={dataSource}
pagination={false}
......
src/routes/List/Applications.js
View file @ 533c091b
......@@ -19,7 +19,8 @@ const FormItem = Form.Item;
}))
export default class FilterCardList extends PureComponent {
componentDidMount() {
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'list/fetch',
payload: {
count: 8,
......@@ -46,7 +47,11 @@ export default class FilterCardList extends PureComponent {
};
render() {
const { list: { list }, loading, form } = this.props;
const {
list: { list },
loading,
form,
} = this.props;
const { getFieldDecorator } = form;
const CardInfo = ({ activeUser, newUser }) => (
......
src/routes/List/Articles.js
View file @ 533c091b
......@@ -30,7 +30,8 @@ export default class SearchList extends Component {
};
fetchMore = () => {
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'list/appendFetch',
payload: {
count: pageSize,
......@@ -39,7 +40,11 @@ export default class SearchList extends Component {
};
render() {
const { form, list: { list }, loading } = this.props;
const {
form,
list: { list },
loading,
} = this.props;
const { getFieldDecorator } = form;
const owners = [
......
src/routes/List/BasicList.js
View file @ 533c091b
......@@ -38,32 +38,37 @@ const { Search, TextArea } = Input;
}))
@Form.create()
export default class BasicList extends PureComponent {
formLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 13 },
};
state = { visible: false, done: false };
componentDidMount() {
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'list/fetch',
payload: {
count: 5,
},
});
}
formLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 13 },
};
showModal = () => {
this.setState({
visible: true,
current: undefined,
});
};
showEditModal = item => {
this.setState({
visible: true,
current: item,
});
};
handleDone = () => {
setTimeout(() => this.addBtn.blur(), 0);
this.setState({
......@@ -71,16 +76,19 @@ export default class BasicList extends PureComponent {
visible: false,
});
};
handleCancel = () => {
setTimeout(() => this.addBtn.blur(), 0);
this.setState({
visible: false,
});
};
handleSubmit = e => {
e.preventDefault();
const { dispatch, form } = this.props;
const id = this.state.current ? this.state.current.id : '';
const { current } = this.state;
const id = current ? current.id : '';
setTimeout(() => this.addBtn.blur(), 0);
form.validateFields((err, fieldsValue) => {
......@@ -94,16 +102,23 @@ export default class BasicList extends PureComponent {
});
});
};
deleteItem = id => {
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'list/submit',
payload: { id },
});
};
render() {
const { list: { list }, loading } = this.props;
const { getFieldDecorator } = this.props.form;
const {
list: { list },
loading,
} = this.props;
const {
form: { getFieldDecorator },
} = this.props;
const { visible, done, current = {} } = this.state;
const editAndDelete = (key, currentItem) => {
......@@ -237,7 +252,6 @@ export default class BasicList extends PureComponent {
</Form>
);
};
return (
<PageHeaderLayout>
<div className={styles.standardList}>
......@@ -308,7 +322,7 @@ export default class BasicList extends PureComponent {
</Card>
</div>
<Modal
title={done ? null : `任务${this.state.current ? '编辑' : '添加'}`}
title={done ? null : `任务${current ? '编辑' : '添加'}`}
className={styles.standardListForm}
width={640}
bodyStyle={done ? { padding: '72px 0' } : { padding: '28px 0 0' }}
......
src/routes/List/CardList.js
View file @ 533c091b
......@@ -13,7 +13,8 @@ import styles from './CardList.less';
}))
export default class CardList extends PureComponent {
componentDidMount() {
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'list/fetch',
payload: {
count: 8,
......@@ -22,7 +23,10 @@ export default class CardList extends PureComponent {
}
render() {
const { list: { list }, loading } = this.props;
const {
list: { list },
loading,
} = this.props;
const content = (
<div className={styles.pageHeaderContent}>
......
src/routes/List/Projects.js
View file @ 533c091b
......@@ -21,7 +21,8 @@ const FormItem = Form.Item;
}))
export default class CoverCardList extends PureComponent {
componentDidMount() {
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'list/fetch',
payload: {
count: 8,
......@@ -48,7 +49,11 @@ export default class CoverCardList extends PureComponent {
};
render() {
const { list: { list = [] }, loading, form } = this.props;
const {
list: { list = [] },
loading,
form,
} = this.props;
const { getFieldDecorator } = form;
const cardList = list ? (
......
src/routes/List/TableList.js
View file @ 533c091b
......@@ -88,11 +88,13 @@ class UpdateForm extends PureComponent {
wrapperCol: { span: 13 },
};
}
handleNext = currentStep => {
const { form, handleUpdate } = this.props;
const { formVals: oldValue } = this.state;
form.validateFields((err, fieldsValue) => {
if (err) return;
const formVals = { ...this.state.formVals, ...fieldsValue };
const formVals = { ...oldValue, ...fieldsValue };
this.setState(
{
formVals,
......@@ -101,22 +103,27 @@ class UpdateForm extends PureComponent {
if (currentStep < 2) {
this.forward();
} else {
handleUpdate(this.state.formVals);
handleUpdate(formVals);
}
}
);
});
};
backward = () => {
const { currentStep } = this.state;
this.setState({
currentStep: this.state.currentStep - 1,
currentStep: currentStep - 1,
});
};
forward = () => {
const { currentStep } = this.state;
this.setState({
currentStep: this.state.currentStep + 1,
currentStep: currentStep + 1,
});
};
renderContent = (currentStep, formVals) => {
const { form } = this.props;
if (currentStep === 1) {
......@@ -194,6 +201,7 @@ class UpdateForm extends PureComponent {
</FormItem>,
];
};
renderFooter = currentStep => {
const { handleUpdateModalVisible } = this.props;
if (currentStep === 1) {
......@@ -231,6 +239,7 @@ class UpdateForm extends PureComponent {
</Button>,
];
};
render() {
const { updateModalVisible, handleUpdateModalVisible } = this.props;
const { currentStep, formVals } = this.state;
......@@ -263,22 +272,6 @@ class UpdateForm extends PureComponent {
}))
@Form.create()
export default class TableList extends PureComponent {
state = {
modalVisible: false,
updateModalVisible: false,
expandForm: false,
selectedRows: [],
formValues: {},
stepFormValues: {},
};
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'rule/fetch',
});
}
columns = [
{
title: '规则名称',
......@@ -340,6 +333,22 @@ export default class TableList extends PureComponent {
},
];
state = {
modalVisible: false,
updateModalVisible: false,
expandForm: false,
selectedRows: [],
formValues: {},
stepFormValues: {},
};
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'rule/fetch',
});
}
handleStandardTableChange = (pagination, filtersArg, sorter) => {
const { dispatch } = this.props;
const { formValues } = this.state;
......@@ -379,8 +388,9 @@ export default class TableList extends PureComponent {
};
toggleForm = () => {
const { expandForm } = this.state;
this.setState({
expandForm: !this.state.expandForm,
expandForm: !expandForm,
});
};
......@@ -452,7 +462,8 @@ export default class TableList extends PureComponent {
};
handleAdd = fields => {
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'rule/add',
payload: {
desc: fields.desc,
......@@ -464,7 +475,8 @@ export default class TableList extends PureComponent {
};
handleUpdate = fields => {
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'rule/update',
payload: {
name: fields.name,
......@@ -478,7 +490,9 @@ export default class TableList extends PureComponent {
};
renderSimpleForm() {
const { getFieldDecorator } = this.props.form;
const {
form: { getFieldDecorator },
} = this.props;
return (
<Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
......@@ -516,7 +530,9 @@ export default class TableList extends PureComponent {
}
renderAdvancedForm() {
const { getFieldDecorator } = this.props.form;
const {
form: { getFieldDecorator },
} = this.props;
return (
<Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
......@@ -588,11 +604,15 @@ export default class TableList extends PureComponent {
}
renderForm() {
return this.state.expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
const { expandForm } = this.state;
return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
}
render() {
const { rule: { data }, loading } = this.props;
const {
rule: { data },
loading,
} = this.props;
const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state;
const menu = (
<Menu onClick={this.handleMenuClick} selectedKeys={[]}>
......
src/routes/User/Login.js
View file @ 533c091b
......@@ -27,22 +27,23 @@ export default class LoginPage extends Component {
if (err) {
reject(err);
} else {
this.props
.dispatch({
type: 'login/getCaptcha',
payload: values.mobile,
})
const { dispatch } = this.props;
dispatch({
type: 'login/getCaptcha',
payload: values.mobile,
})
.then(resolve)
.catch(reject);
}
});
});
};
loginForm;
handleSubmit = (err, values) => {
const { type } = this.state;
if (!err) {
this.props.dispatch({
const { dispatch } = this.props;
dispatch({
type: 'login/login',
payload: {
...values,
......@@ -58,13 +59,15 @@ export default class LoginPage extends Component {
});
};
loginForm;
renderMessage = content => {
return <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />;
};
render() {
const { login, submitting } = this.props;
const { type } = this.state;
const { type, autoLogin } = this.state;
return (
<div className={styles.main}>
<Login
......@@ -92,7 +95,7 @@ export default class LoginPage extends Component {
<Captcha name="captcha" countDown={120} onGetCaptcha={this.onGetCaptcha} />
</Tab>
<div>
<Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>
<Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
自动登录
</Checkbox>
<a style={{ float: 'right' }} href="">
......
src/routes/User/Register.js
View file @ 533c091b
......@@ -35,9 +35,10 @@ export default class Register extends Component {
};
componentDidUpdate() {
const account = this.props.form.getFieldValue('mail');
if (this.props.register.status === 'ok') {
this.props.dispatch(
const { form, register, dispatch } = this.props;
const account = form.getFieldValue('mail');
if (register.status === 'ok') {
dispatch(
routerRedux.push({
pathname: '/user/register-result',
state: {
......@@ -47,6 +48,7 @@ export default class Register extends Component {
);
}
}
componentWillUnmount() {
clearInterval(this.interval);
}
......@@ -77,13 +79,15 @@ export default class Register extends Component {
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields({ force: true }, (err, values) => {
const { form, dispatch } = this.props;
form.validateFields({ force: true }, (err, values) => {
if (!err) {
this.props.dispatch({
const { prefix } = this.state;
dispatch({
type: 'register/submit',
payload: {
...values,
prefix: this.state.prefix,
prefix,
},
});
}
......@@ -92,7 +96,8 @@ export default class Register extends Component {
handleConfirmBlur = e => {
const { value } = e.target;
this.setState({ confirmDirty: this.state.confirmDirty || !!value });
const { confirmDirty } = this.state;
this.setState({ confirmDirty: confirmDirty || !!value });
};
checkConfirm = (rule, value, callback) => {
......@@ -105,6 +110,7 @@ export default class Register extends Component {
};
checkPassword = (rule, value, callback) => {
const { visible, confirmDirty } = this.state;
if (!value) {
this.setState({
help: '请输入密码！',
......@@ -115,7 +121,7 @@ export default class Register extends Component {
this.setState({
help: '',
});
if (!this.state.visible) {
if (!visible) {
this.setState({
visible: !!value,
});
......@@ -124,7 +130,7 @@ export default class Register extends Component {
callback('error');
} else {
const { form } = this.props;
if (value && this.state.confirmDirty) {
if (value && confirmDirty) {
form.validateFields(['confirm'], { force: true });
}
callback();
......@@ -158,7 +164,7 @@ export default class Register extends Component {
render() {
const { form, submitting } = this.props;
const { getFieldDecorator } = form;
const { count, prefix } = this.state;
const { count, prefix, help, visible } = this.state;
return (
<div className={styles.main}>
<h3>注册</h3>
......@@ -177,7 +183,7 @@ export default class Register extends Component {
],
})(<Input size="large" placeholder="邮箱" />)}
</FormItem>
<FormItem help={this.state.help}>
<FormItem help={help}>
<Popover
content={
<div style={{ padding: '4px 0' }}>
......@@ -190,7 +196,7 @@ export default class Register extends Component {
}
overlayStyle={{ width: 240 }}
placement="right"
visible={this.state.visible}
visible={visible}
>
{getFieldDecorator('password', {
rules: [
......
src/utils/Yuan.js
View file @ 533c091b
......@@ -7,14 +7,18 @@ export default class Yuan extends React.PureComponent {
componentDidMount() {
this.rendertoHtml();
}
componentDidUpdate() {
this.rendertoHtml();
}
rendertoHtml = () => {
const { children } = this.props;
if (this.main) {
this.main.innerHTML = yuan(this.props.children);
this.main.innerHTML = yuan(children);
}
};
render() {
return (
<span
......
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