diff --git a/AccountSettings/src/components/base.tsx b/AccountSettings/src/components/base.tsx index f9e663b8b06a49cc0f3c87e62515db51c34bcd49..da55cc64437893482a75fd6f777cd01d8b7a68b7 100644 --- a/AccountSettings/src/components/base.tsx +++ b/AccountSettings/src/components/base.tsx @@ -63,7 +63,7 @@ const validatorPhone = (rule: any, value: string, callback: (message?: string) = }; interface BaseViewProps extends FormComponentProps { - currentUser: CurrentUser; + currentUser?: CurrentUser; } @connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: { currentUser: CurrentUser } }) => ({ @@ -76,20 +76,25 @@ class BaseView extends Component { setBaseInfo = () => { const { currentUser, form } = this.props; - Object.keys(form.getFieldsValue()).forEach(key => { - const obj = {}; - obj[key] = currentUser[key] || null; - form.setFieldsValue(obj); - }); + if (currentUser) { + Object.keys(form.getFieldsValue()).forEach(key => { + const obj = {}; + obj[key] = currentUser[key] || null; + form.setFieldsValue(obj); + }); + } }; getAvatarURL() { const { currentUser } = this.props; - if (currentUser.avatar) { - return currentUser.avatar; + if (currentUser) { + if (currentUser.avatar) { + return currentUser.avatar; + } + const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'; + return url; } - const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'; - return url; + return ''; } view: HTMLDivElement | undefined; diff --git a/AccountSettings/src/index.tsx b/AccountSettings/src/index.tsx index 52e91652b8903a5e3ef0ca667aeb014091600ac7..3763520b6ff48c9f6b084fc248c71f6ddfa374c7 100644 --- a/AccountSettings/src/index.tsx +++ b/AccountSettings/src/index.tsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import { connect } from 'dva'; +import { Dispatch } from 'redux'; import { FormattedMessage } from 'umi-plugin-react/locale'; import { Menu } from 'antd'; import styles from './style.less'; @@ -7,14 +8,31 @@ import BaseView from './components/base'; import SecurityView from './components/security'; import BindingView from './components/binding'; import NotificationView from './components/notification'; +import { CurrentUser } from './data'; const { Item } = Menu; -@connect(({ BLOCK_NAME_CAMEL_CASE }) => ({ +interface PAGE_NAME_UPPER_CAMEL_CASEProps { + dispatch: Dispatch; + currentUser: CurrentUser; +} + +type PAGE_NAME_UPPER_CAMEL_CASEStateKeys = 'base' | 'security' | 'binding' | 'notification'; +interface PAGE_NAME_UPPER_CAMEL_CASEState { + mode: 'inline' | 'horizontal'; + menuMap: { + [key: string]: React.ReactNode; + }; + selectKey: PAGE_NAME_UPPER_CAMEL_CASEStateKeys; +} +@connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: { currentUser: CurrentUser } }) => ({ currentUser: BLOCK_NAME_CAMEL_CASE.currentUser, })) -class PAGE_NAME_UPPER_CAMEL_CASE extends Component { - constructor(props) { +class PAGE_NAME_UPPER_CAMEL_CASE extends Component< + PAGE_NAME_UPPER_CAMEL_CASEProps, + PAGE_NAME_UPPER_CAMEL_CASEState +> { + constructor(props: PAGE_NAME_UPPER_CAMEL_CASEProps) { super(props); const menuMap = { base: , @@ -38,6 +56,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component { }; } + main: HTMLDivElement | undefined; + componentDidMount() { const { dispatch } = this.props; dispatch({ @@ -51,7 +71,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component { window.removeEventListener('resize', this.resize); } - getmenu = () => { + getMenu = () => { const { menuMap } = this.state; return Object.keys(menuMap).map(item => {menuMap[item]}); }; @@ -61,7 +81,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component { return menuMap[selectKey]; }; - selectKey = ({ key }) => { + selectKey = (key: PAGE_NAME_UPPER_CAMEL_CASEStateKeys) => { this.setState({ selectKey: key, }); @@ -75,7 +95,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component { if (!this.main) { return; } - let mode = 'inline'; + let mode: 'inline' | 'horizontal' = 'inline'; const { offsetWidth } = this.main; if (this.main.offsetWidth < 641 && offsetWidth > 400) { mode = 'horizontal'; @@ -117,12 +137,18 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
{ - this.main = ref; + if (ref) { + this.main = ref; + } }} > -
- - {this.getmenu()} +
+ this.selectKey(key as PAGE_NAME_UPPER_CAMEL_CASEStateKeys)} + > + {this.getMenu()}
diff --git a/AccountSettings/src/style.less b/AccountSettings/src/style.less index b7a59fba3e2b0a39c7404d1fdc4d12d7ee803021..ce4266574deb9f3a36a5cdb353d2da098dcd0b06 100644 --- a/AccountSettings/src/style.less +++ b/AccountSettings/src/style.less @@ -8,7 +8,7 @@ padding-top: 16px; padding-bottom: 16px; overflow: auto; - .leftmenu { + .leftMenu { width: 224px; border-right: @border-width-base @border-style-base @border-color-split; :global { @@ -86,7 +86,7 @@ @media screen and (max-width: @screen-md) { .main { flex-direction: column; - .leftmenu { + .leftMenu { width: 100%; border: none; } diff --git a/AdvancedForm/src/_mock.js b/AdvancedForm/src/_mock.ts similarity index 100% rename from AdvancedForm/src/_mock.js rename to AdvancedForm/src/_mock.ts diff --git a/AdvancedForm/src/components/PageHeaderWrapper/index.js b/AdvancedForm/src/components/PageHeaderWrapper/index.js deleted file mode 100644 index 1a40e25dfdc97a4e69407cbf1516e15ad65bd00b..0000000000000000000000000000000000000000 --- a/AdvancedForm/src/components/PageHeaderWrapper/index.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { FormattedMessage } from 'umi-plugin-react/locale'; -import Link from 'umi/link'; -import { PageHeader } from 'ant-design-pro'; -import styles from './index.less'; - -const PageHeaderWrapper = ({ children, wrapperClassName, ...restProps }) => ( -
- } - key="pageheader" - {...restProps} - linkElement={Link} - itemRender={item => { - if (item.locale) { - return ; - } - return item.title; - }} - /> - {children ?
{children}
: null} -
-); - -export default PageHeaderWrapper; diff --git a/AdvancedForm/src/components/PageHeaderWrapper/index.less b/AdvancedForm/src/components/PageHeaderWrapper/index.less deleted file mode 100644 index 39a449657a98b039c29e6654fd117267cbb5283a..0000000000000000000000000000000000000000 --- a/AdvancedForm/src/components/PageHeaderWrapper/index.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.content { - margin: 24px 24px 0; -} - -@media screen and (max-width: @screen-sm) { - .content { - margin: 24px 0 0; - } -} diff --git a/AdvancedForm/src/components/TableForm.js b/AdvancedForm/src/components/TableForm.tsx similarity index 100% rename from AdvancedForm/src/components/TableForm.js rename to AdvancedForm/src/components/TableForm.tsx diff --git a/AdvancedForm/src/index.js b/AdvancedForm/src/index.tsx similarity index 92% rename from AdvancedForm/src/index.js rename to AdvancedForm/src/index.tsx index e2045c2699f32ca3d69ffb032587aec34595dfcf..ba8b99eefbde794063ccbaa9ff485ef518db6363 100644 --- a/AdvancedForm/src/index.js +++ b/AdvancedForm/src/index.tsx @@ -1,22 +1,10 @@ -import React, { PureComponent } from 'react'; -import { - Card, - Button, - Form, - Icon, - Col, - Row, - DatePicker, - TimePicker, - Input, - Select, - Popover, -} from 'antd'; +import React, { Component } from 'react'; +import { Card, Form, Icon, Col, Row, DatePicker, TimePicker, Input, Select, Popover } from 'antd'; import { connect } from 'dva'; -import { FooterToolbar } from 'ant-design-pro'; -import PageHeaderWrapper from './components/PageHeaderWrapper'; import TableForm from './components/TableForm'; import styles from './style.less'; +import { FormComponentProps } from 'antd/lib/form'; +import { Dispatch } from 'redux'; const { Option } = Select; const { RangePicker } = DatePicker; @@ -57,11 +45,14 @@ const tableData = [ }, ]; -@connect(({ loading }) => ({ +interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps { + dispatch: Dispatch; +} + +@connect(({ loading }: { loading: { effects: any } }) => ({ submitting: loading.effects['BLOCK_NAME_CAMEL_CASE/submitAdvancedForm'], })) -@Form.create() -class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent { +class PAGE_NAME_UPPER_CAMEL_CASE extends Component { state = { width: '100%', }; @@ -83,7 +74,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent { if (!errors || errorCount === 0) { return null; } - const scrollToField = fieldKey => { + const scrollToField = (fieldKey: string) => { const labelNode = document.querySelector(`label[for="${fieldKey}"]`); if (labelNode) { labelNode.scrollIntoView(true); @@ -119,7 +110,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent { resizeFooterToolbar = () => { requestAnimationFrame(() => { - const sider = document.querySelectorAll('.ant-layout-sider')[0]; + const sider = document.querySelectorAll('.ant-layout-sider')[0] as HTMLDivElement; if (sider) { const width = `calc(100% - ${sider.style.width})`; const { width: stateWidth } = this.state; @@ -149,16 +140,10 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent { render() { const { form: { getFieldDecorator }, - submitting, } = this.props; - const { width } = this.state; return ( - + <>
@@ -309,15 +294,15 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent { initialValue: tableData, })()} - + {/* {this.getErrorInfo()} - - + */} + ); } } -export default PAGE_NAME_UPPER_CAMEL_CASE; +export default Form.create()(PAGE_NAME_UPPER_CAMEL_CASE); diff --git a/AdvancedForm/src/model.js b/AdvancedForm/src/model.ts similarity index 100% rename from AdvancedForm/src/model.js rename to AdvancedForm/src/model.ts diff --git a/AdvancedForm/src/service.js b/AdvancedForm/src/service.ts similarity index 100% rename from AdvancedForm/src/service.js rename to AdvancedForm/src/service.ts diff --git a/package.json b/package.json index 6613ef52a20250c96c020f16db083e4f59663b55..500c3244adaba4e2002f46a7c08258c997fd2c8d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "scripts": { - "dev": "PAGES_PATH='AccountCenter/src' umi dev", + "dev": "PAGES_PATH='AdvancedForm/src' umi dev", "lint:style": "stylelint \"src/**/*.less\" --syntax less", "lint": "eslint --ext .js src mock tests && npm run lint:style", "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",