Skip to content

GitLab

P
pro-blocks
Commit ded1590a authored by 陈帅's avatar 陈帅
Browse files
Options

fix some warning

parent 190aec4c
Expand all Show whitespace changes
Inline Side-by-side
Showing with 777 additions and 855 deletions
.eslintcache deleted 100644 → 0
View file @ 190aec4c
This diff is collapsed.
.eslintrc.js
View file @ ded1590a
...@@ -4,6 +4,8 @@ module.exports = { ...@@ -4,6 +4,8 @@ module.exports = {
...fabric.default, ...fabric.default,
rules: { rules: {
...fabric.default.rules, ...fabric.default.rules,
'@typescript-eslint/camelcase': 0,
'@typescript-eslint/class-name-casing': 0,
}, },
globals: { globals: {
ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true, ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
......
AccountCenter/package.json
View file @ ded1590a
...@@ -11,16 +11,21 @@ ...@@ -11,16 +11,21 @@
"url": "https://github.com/umijs/umi-blocks/ant-design-pro/accountcenter" "url": "https://github.com/umijs/umi-blocks/ant-design-pro/accountcenter"
}, },
"dependencies": { "dependencies": {
"@ant-design/pro-layout": "^4.5.5",
"antd": "^3.16.3", "antd": "^3.16.3",
"classnames": "^2.2.6",
"dva": "^2.4.0", "dva": "^2.4.0",
"moment": "^2.24.0",
"numeral": "^2.0.6", "numeral": "^2.0.6",
"react": "^16.6.3", "react": "^16.6.3",
"react-router": "^5.0.1",
"redux": "^4.0.1",
"umi-request": "^1.0.0" "umi-request": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"umi": "^2.6.9", "umi": "^2.6.9",
"umi-plugin-react": "^1.7.2", "umi-plugin-block-dev": "^1.0.0",
"umi-plugin-block-dev": "^1.0.0" "umi-plugin-react": "^1.7.2"
}, },
"license": "ISC", "license": "ISC",
"blockConfig": { "blockConfig": {
......
AccountCenter/src/components/Articles/index.tsx
View file @ ded1590a
...@@ -3,7 +3,7 @@ import React, { Component } from 'react'; ...@@ -3,7 +3,7 @@ import React, { Component } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import ArticleListContent from '../ArticleListContent'; import ArticleListContent from '../ArticleListContent';
import { ListItemDataType } from '../../data'; import { ListItemDataType } from '../../data.d';
import { ModalState } from '../../model'; import { ModalState } from '../../model';
import styles from './index.less'; import styles from './index.less';
......
AccountCenter/src/components/AvatarList/index.tsx
View file @ ded1590a
...@@ -23,7 +23,7 @@ export interface AvatarListProps { ...@@ -23,7 +23,7 @@ export interface AvatarListProps {
children: React.ReactElement<AvatarItemProps> | React.ReactElement<AvatarItemProps>[]; children: React.ReactElement<AvatarItemProps> | React.ReactElement<AvatarItemProps>[];
} }
const avatarSizeToClassName = (size?: SizeType) => const avatarSizeToClassName = (size?: SizeType | 'mini') =>
classNames(styles.avatarItem, { classNames(styles.avatarItem, {
[styles.avatarItemLarge]: size === 'large', [styles.avatarItemLarge]: size === 'large',
[styles.avatarItemSmall]: size === 'small', [styles.avatarItemSmall]: size === 'small',
......
AccountCenter/src/data.d.ts
View file @ ded1590a
export interface ITag { export interface TagType {
key: string; key: string;
label: string; label: string;
} }
export interface IProvince { export interface ProvinceType {
label: string; label: string;
key: string; key: string;
} }
export interface ICity { export interface CityType {
label: string; label: string;
key: string; key: string;
} }
export interface IGeographic { export interface GeographicType {
province: IProvince; province: ProvinceType;
city: ICity; city: CityType;
} }
export interface INotice { export interface NoticeType {
id: string; id: string;
title: string; title: string;
logo: string; logo: string;
...@@ -33,16 +33,16 @@ export interface CurrentUser { ...@@ -33,16 +33,16 @@ export interface CurrentUser {
name: string; name: string;
avatar: string; avatar: string;
userid: string; userid: string;
notice: INotice[]; notice: NoticeType[];
email: string; email: string;
signature: string; signature: string;
title: string; title: string;
group: string; group: string;
tags: ITag[]; tags: TagType[];
notifyCount: number; notifyCount: number;
unreadCount: number; unreadCount: number;
country: string; country: string;
geographic: IGeographic; geographic: GeographicType;
address: string; address: string;
phone: string; phone: string;
} }
......
AccountCenter/src/index.tsx
View file @ ded1590a
...@@ -10,7 +10,7 @@ import { ModalState } from './model'; ...@@ -10,7 +10,7 @@ import { ModalState } from './model';
import Projects from './components/Projects'; import Projects from './components/Projects';
import Articles from './components/Articles'; import Articles from './components/Articles';
import Applications from './components/Applications'; import Applications from './components/Applications';
import { CurrentUser, ITag } from './data'; import { CurrentUser, TagType } from './data.d';
import styles from './Center.less'; import styles from './Center.less';
const operationTabList = [ const operationTabList = [
...@@ -46,7 +46,7 @@ interface BLOCK_NAME_CAMEL_CASEProps extends RouteChildrenProps { ...@@ -46,7 +46,7 @@ interface BLOCK_NAME_CAMEL_CASEProps extends RouteChildrenProps {
currentUserLoading: boolean; currentUserLoading: boolean;
} }
interface BLOCK_NAME_CAMEL_CASEState { interface BLOCK_NAME_CAMEL_CASEState {
newTags: ITag[]; newTags: TagType[];
tabKey: 'articles' | 'applications' | 'projects'; tabKey: 'articles' | 'applications' | 'projects';
inputVisible: boolean; inputVisible: boolean;
inputValue: string; inputValue: string;
...@@ -57,7 +57,7 @@ interface BLOCK_NAME_CAMEL_CASEState { ...@@ -57,7 +57,7 @@ interface BLOCK_NAME_CAMEL_CASEState {
loading, loading,
BLOCK_NAME_CAMEL_CASE, BLOCK_NAME_CAMEL_CASE,
}: { }: {
loading: { effects: any }; loading: { effects: { [key: string]: boolean } };
BLOCK_NAME_CAMEL_CASE: ModalState; BLOCK_NAME_CAMEL_CASE: ModalState;
}) => ({ }) => ({
currentUser: BLOCK_NAME_CAMEL_CASE.currentUser, currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
...@@ -93,8 +93,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent< ...@@ -93,8 +93,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
tabKey: 'articles', tabKey: 'articles',
}; };
input: Input | null | undefined;
componentDidMount() { componentDidMount() {
const { dispatch } = this.props; const { dispatch } = this.props;
dispatch({ dispatch({
...@@ -140,6 +138,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent< ...@@ -140,6 +138,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
}); });
}; };
public input: Input | null | undefined;
renderChildrenByTabKey = (tabKey: BLOCK_NAME_CAMEL_CASEState['tabKey']) => { renderChildrenByTabKey = (tabKey: BLOCK_NAME_CAMEL_CASEState['tabKey']) => {
if (tabKey === 'projects') { if (tabKey === 'projects') {
return <Projects />; return <Projects />;
......
AccountCenter/src/model.ts
View file @ ded1590a
import { AnyAction, Reducer } from 'redux'; import { AnyAction, Reducer } from 'redux';
import { EffectsCommandMap } from 'dva'; import { EffectsCommandMap } from 'dva';
import { CurrentUser, ListItemDataType } from './data'; import { CurrentUser, ListItemDataType } from './data.d';
import { queryCurrent, queryFakeList } from './service'; import { queryCurrent, queryFakeList } from './service';
export interface ModalState { export interface ModalState {
...@@ -54,13 +54,13 @@ const Model: ModelType = { ...@@ -54,13 +54,13 @@ const Model: ModelType = {
reducers: { reducers: {
saveCurrentUser(state, action) { saveCurrentUser(state, action) {
return { return {
...state!, ...(state as ModalState),
currentUser: action.payload || {}, currentUser: action.payload || {},
}; };
}, },
queryList(state, action) { queryList(state, action) {
return { return {
...state!, ...(state as ModalState),
list: action.payload, list: action.payload,
}; };
}, },
......
AccountSettings/package.json
View file @ ded1590a
...@@ -12,15 +12,18 @@ ...@@ -12,15 +12,18 @@
"dev": "umi dev" "dev": "umi dev"
}, },
"dependencies": { "dependencies": {
"@ant-design/pro-layout": "^4.5.5",
"antd": "^3.16.3", "antd": "^3.16.3",
"dva": "^2.4.0", "dva": "^2.4.0",
"react": "^16.6.3", "react": "^16.6.3",
"umi-request": "^1.0.0" "redux": "^4.0.1",
"umi-request": "^1.0.0",
"umi-plugin-react": "^1.8.4",
"umi": "^2.6.9"
}, },
"devDependencies": { "devDependencies": {
"umi": "^2.6.9", "umi-plugin-block-dev": "^1.0.0"
"umi-plugin-block-dev": "^1.0.0",
"umi-plugin-react": "^1.3.0-beta.1"
}, },
"blockConfig": { "blockConfig": {
"specVersion": "0.1" "specVersion": "0.1"
......
AccountSettings/src/components/GeographicView.tsx
View file @ ded1590a
...@@ -3,7 +3,7 @@ import { Select, Spin } from 'antd'; ...@@ -3,7 +3,7 @@ import { Select, Spin } from 'antd';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { connect } from 'dva'; import { connect } from 'dva';
import { CityData, ProvinceData } from '../data'; import { CityType, ProvinceType } from '../data.d';
import styles from './GeographicView.less'; import styles from './GeographicView.less';
const { Option } = Select; const { Option } = Select;
...@@ -12,15 +12,15 @@ interface SelectItem { ...@@ -12,15 +12,15 @@ interface SelectItem {
label: string; label: string;
key: string; key: string;
} }
const nullSlectItem: SelectItem = { const nullSelectItem: SelectItem = {
label: '', label: '',
key: '', key: '',
}; };
interface GeographicViewProps { interface GeographicViewProps {
dispatch?: Dispatch<any>; dispatch?: Dispatch<any>;
province?: ProvinceData[]; province?: ProvinceType[];
city?: CityData[]; city?: CityType[];
value?: { value?: {
province: SelectItem; province: SelectItem;
city: SelectItem; city: SelectItem;
...@@ -35,8 +35,8 @@ interface GeographicViewProps { ...@@ -35,8 +35,8 @@ interface GeographicViewProps {
loading, loading,
}: { }: {
BLOCK_NAME_CAMEL_CASE: { BLOCK_NAME_CAMEL_CASE: {
province: ProvinceData[]; province: ProvinceType[];
city: CityData[]; city: CityType[];
}; };
loading: any; loading: any;
}) => { }) => {
...@@ -87,7 +87,7 @@ class GeographicView extends Component<GeographicViewProps> { ...@@ -87,7 +87,7 @@ class GeographicView extends Component<GeographicViewProps> {
return []; return [];
}; };
getOption = (list: CityData[] | ProvinceData[]) => { getOption = (list: CityType[] | ProvinceType[]) => {
if (!list || list.length < 1) { if (!list || list.length < 1) {
return ( return (
<Option key={0} value={0}> <Option key={0} value={0}>
...@@ -95,9 +95,9 @@ class GeographicView extends Component<GeographicViewProps> { ...@@ -95,9 +95,9 @@ class GeographicView extends Component<GeographicViewProps> {
</Option> </Option>
); );
} }
return (list as CityData[]).map(item => ( return (list as CityType[]).map(item => (
<Option key={item.id} value={item.id}> <Option key={item.key} value={item.key}>
{item.name} {item.label}
</Option> </Option>
)); ));
}; };
...@@ -114,7 +114,7 @@ class GeographicView extends Component<GeographicViewProps> { ...@@ -114,7 +114,7 @@ class GeographicView extends Component<GeographicViewProps> {
if (onChange) { if (onChange) {
onChange({ onChange({
province: item, province: item,
city: nullSlectItem, city: nullSelectItem,
}); });
} }
}; };
...@@ -133,14 +133,14 @@ class GeographicView extends Component<GeographicViewProps> { ...@@ -133,14 +133,14 @@ class GeographicView extends Component<GeographicViewProps> {
const { value } = this.props; const { value } = this.props;
if (!value) { if (!value) {
return { return {
province: nullSlectItem, province: nullSelectItem,
city: nullSlectItem, city: nullSelectItem,
}; };
} }
const { province, city } = value; const { province, city } = value;
return { return {
province: province || nullSlectItem, province: province || nullSelectItem,
city: city || nullSlectItem, city: city || nullSelectItem,
}; };
} }
......
AccountSettings/src/components/PhoneView.tsx
View file @ ded1590a
...@@ -21,15 +21,17 @@ class PhoneView extends PureComponent<PhoneViewProps> { ...@@ -21,15 +21,17 @@ class PhoneView extends PureComponent<PhoneViewProps> {
className={styles.area_code} className={styles.area_code}
value={values[0]} value={values[0]}
onChange={e => { onChange={e => {
// tslint:disable-next-line: no-unused-expression if (onChange) {
onChange && onChange(`${e.target.value}-${values[1]}`); onChange(`${e.target.value}-${values[1]}`);
}
}} }}
/> />
<Input <Input
className={styles.phone_number} className={styles.phone_number}
onChange={e => { onChange={e => {
// tslint:disable-next-line: no-unused-expression if (onChange) {
onChange && onChange(`${values[0]}-${e.target.value}`); onChange(`${values[0]}-${e.target.value}`);
}
}} }}
value={values[1]} value={values[1]}
/> />
......
AccountSettings/src/components/base.tsx
View file @ ded1590a
...@@ -4,7 +4,7 @@ import React, { Component, Fragment } from 'react'; ...@@ -4,7 +4,7 @@ import React, { Component, Fragment } from 'react';
import { FormComponentProps } from 'antd/es/form'; import { FormComponentProps } from 'antd/es/form';
import { connect } from 'dva'; import { connect } from 'dva';
import { CurrentUser } from '../data'; import { CurrentUser } from '../data.d';
import GeographicView from './GeographicView'; import GeographicView from './GeographicView';
import PhoneView from './PhoneView'; import PhoneView from './PhoneView';
import styles from './BaseView.less'; import styles from './BaseView.less';
...@@ -72,8 +72,6 @@ interface BaseViewProps extends FormComponentProps { ...@@ -72,8 +72,6 @@ interface BaseViewProps extends FormComponentProps {
currentUser: BLOCK_NAME_CAMEL_CASE.currentUser, currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
})) }))
class BaseView extends Component<BaseViewProps> { class BaseView extends Component<BaseViewProps> {
view: HTMLDivElement | undefined;
componentDidMount() { componentDidMount() {
this.setBaseInfo(); this.setBaseInfo();
} }
...@@ -105,16 +103,18 @@ class BaseView extends Component<BaseViewProps> { ...@@ -105,16 +103,18 @@ class BaseView extends Component<BaseViewProps> {
this.view = ref; this.view = ref;
}; };
handlerSubmit = (event: Event) => { handlerSubmit = (event: React.MouseEvent) => {
event.preventDefault(); event.preventDefault();
const { form } = this.props; const { form } = this.props;
form.validateFields((err, values) => { form.validateFields(err => {
if (!err) { if (!err) {
message.success(formatMessage({ id: 'BLOCK_NAME.basic.update.success' })); message.success(formatMessage({ id: 'BLOCK_NAME.basic.update.success' }));
} }
}); });
}; };
view: HTMLDivElement | undefined;
render() { render() {
const { const {
form: { getFieldDecorator }, form: { getFieldDecorator },
......
AccountSettings/src/data.d.ts
View file @ ded1590a
export interface ITag { export interface TagType {
key: string; key: string;
label: string; label: string;
} }
export interface IProvince { export interface ProvinceType {
label: string; label: string;
key: string; key: string;
} }
export interface ICity { export interface CityType {
label: string; label: string;
key: string; key: string;
} }
export interface IGeographic { export interface GeographicType {
province: IProvince; province: ProvinceType;
city: ICity; city: CityType;
} }
export interface INotice { export interface NoticeType {
id: string; id: string;
title: string; title: string;
logo: string; logo: string;
...@@ -33,16 +33,16 @@ export interface CurrentUser { ...@@ -33,16 +33,16 @@ export interface CurrentUser {
name: string; name: string;
avatar: string; avatar: string;
userid: string; userid: string;
notice: INotice[]; notice: NoticeType[];
email: string; email: string;
signature: string; signature: string;
title: string; title: string;
group: string; group: string;
tags: ITag[]; tags: TagType[];
notifyCount: number; notifyCount: number;
unreadCount: number; unreadCount: number;
country: string; country: string;
geographic: IGeographic; geographic: GeographicType;
address: string; address: string;
phone: string; phone: string;
} }
AccountSettings/src/index.tsx
View file @ ded1590a
...@@ -7,7 +7,7 @@ import { Menu } from 'antd'; ...@@ -7,7 +7,7 @@ import { Menu } from 'antd';
import { connect } from 'dva'; import { connect } from 'dva';
import BaseView from './components/base'; import BaseView from './components/base';
import BindingView from './components/binding'; import BindingView from './components/binding';
import { CurrentUser } from './data'; import { CurrentUser } from './data.d';
import NotificationView from './components/notification'; import NotificationView from './components/notification';
import SecurityView from './components/security'; import SecurityView from './components/security';
import styles from './style.less'; import styles from './style.less';
...@@ -34,8 +34,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component< ...@@ -34,8 +34,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
PAGE_NAME_UPPER_CAMEL_CASEProps, PAGE_NAME_UPPER_CAMEL_CASEProps,
PAGE_NAME_UPPER_CAMEL_CASEState PAGE_NAME_UPPER_CAMEL_CASEState
> { > {
main: HTMLDivElement | undefined;
constructor(props: PAGE_NAME_UPPER_CAMEL_CASEProps) { constructor(props: PAGE_NAME_UPPER_CAMEL_CASEProps) {
super(props); super(props);
const menuMap = { const menuMap = {
...@@ -111,6 +109,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component< ...@@ -111,6 +109,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
}); });
}; };
main: HTMLDivElement | undefined;
renderChildren = () => { renderChildren = () => {
const { selectKey } = this.state; const { selectKey } = this.state;
switch (selectKey) { switch (selectKey) {
......
DashboardMonitor/package.json
View file @ ded1590a
...@@ -13,21 +13,25 @@ ...@@ -13,21 +13,25 @@
"dependencies": { "dependencies": {
"@ant-design/pro-layout": "^4.5.2", "@ant-design/pro-layout": "^4.5.2",
"@antv/data-set": "^0.10.2", "@antv/data-set": "^0.10.2",
"@types/lodash.debounce": "^4.0.6",
"antd": "^3.16.3", "antd": "^3.16.3",
"bizcharts": "^3.5.3-beta.0", "bizcharts": "^3.5.3-beta.0",
"bizcharts-plugin-slider": "^2.1.1-beta.1", "bizcharts-plugin-slider": "^2.1.1-beta.1",
"classnames": "^2.2.6",
"dva": "^2.4.0", "dva": "^2.4.0",
"lodash.debounce": "^4.0.8",
"numeral": "^2.0.6", "numeral": "^2.0.6",
"react": "^16.8.6", "react": "^16.8.6",
"react-fittext": "^1.0.0", "react-fittext": "^1.0.0",
"redux": "^4.0.1",
"umi": "^2.6.9",
"umi-plugin-block-dev": "^1.0.0",
"umi-plugin-react": "^1.7.2",
"umi-request": "^1.0.0" "umi-request": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"@types/numeral": "^0.0.25", "@types/numeral": "^0.0.25",
"mockjs": "^1.0.1-beta3", "mockjs": "^1.0.1-beta3"
"umi": "^2.6.9",
"umi-plugin-block-dev": "^1.0.0",
"umi-plugin-react": "^1.7.2"
}, },
"license": "ISC", "license": "ISC",
"blockConfig": { "blockConfig": {
......
DashboardMonitor/src/components/ActiveChart/index.tsx
View file @ ded1590a
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Statistic } from 'antd'; import { Statistic } from 'antd';
import Charts from '../Charts'; import { MiniArea } from '../Charts';
import styles from './index.less'; import styles from './index.less';
const { MiniArea } = Charts;
function fixedZero(val: number) { function fixedZero(val: number) {
return val * 1 < 10 ? `0${val}` : val; return val * 1 < 10 ? `0${val}` : val;
} }
...@@ -26,10 +24,6 @@ export default class ActiveChart extends Component { ...@@ -26,10 +24,6 @@ export default class ActiveChart extends Component {
activeData: getActiveData(), activeData: getActiveData(),
}; };
timer: number | undefined;
requestRef: number | undefined;
componentDidMount() { componentDidMount() {
this.loopData(); this.loopData();
} }
...@@ -56,6 +50,10 @@ export default class ActiveChart extends Component { ...@@ -56,6 +50,10 @@ export default class ActiveChart extends Component {
}); });
}; };
timer: number | undefined;
requestRef: number | undefined;
render() { render() {
const { activeData = [] } = this.state; const { activeData = [] } = this.state;
......
DashboardMonitor/src/components/Charts/Gauge/index.tsx
View file @ ded1590a
...@@ -5,7 +5,7 @@ import autoHeight from '../autoHeight'; ...@@ -5,7 +5,7 @@ import autoHeight from '../autoHeight';
const { Arc, Html, Line } = Guide; const { Arc, Html, Line } = Guide;
export interface IGaugeProps { export interface GaugeProps {
title: React.ReactNode; title: React.ReactNode;
color?: string; color?: string;
height?: number; height?: number;
...@@ -31,7 +31,8 @@ const defaultFormatter = (val: string): string => { ...@@ -31,7 +31,8 @@ const defaultFormatter = (val: string): string => {
} }
}; };
Shape.registerShape!('point', 'pointer', { if (Shape.registerShape) {
Shape.registerShape('point', 'pointer', {
drawShape(cfg: any, group: any) { drawShape(cfg: any, group: any) {
let point = cfg.points[0]; let point = cfg.points[0];
point = (this as any).parsePoint(point); point = (this as any).parsePoint(point);
...@@ -61,10 +62,10 @@ Shape.registerShape!('point', 'pointer', { ...@@ -61,10 +62,10 @@ Shape.registerShape!('point', 'pointer', {
}, },
}); });
}, },
}); });
}
class Gauge extends React.Component<IGaugeProps> { const Gauge: React.FC<GaugeProps> = props => {
render() {
const { const {
title, title,
height = 1, height = 1,
...@@ -73,7 +74,7 @@ class Gauge extends React.Component<IGaugeProps> { ...@@ -73,7 +74,7 @@ class Gauge extends React.Component<IGaugeProps> {
formatter = defaultFormatter, formatter = defaultFormatter,
color = '#2F9CFF', color = '#2F9CFF',
bgColor = '#F0F2F5', bgColor = '#F0F2F5',
} = this.props; } = props;
const cols = { const cols = {
value: { value: {
type: 'linear', type: 'linear',
...@@ -83,6 +84,8 @@ class Gauge extends React.Component<IGaugeProps> { ...@@ -83,6 +84,8 @@ class Gauge extends React.Component<IGaugeProps> {
nice: true, nice: true,
}, },
}; };
const data = [{ value: percent / 10 }];
const renderHtml = () => ` const renderHtml = () => `
<div style="width: 300px;text-align: center;font-size: 12px!important;"> <div style="width: 300px;text-align: center;font-size: 12px!important;">
<p style="font-size: 14px; color: rgba(0,0,0,0.43);margin: 0;">${title}</p> <p style="font-size: 14px; color: rgba(0,0,0,0.43);margin: 0;">${title}</p>
...@@ -90,7 +93,6 @@ class Gauge extends React.Component<IGaugeProps> { ...@@ -90,7 +93,6 @@ class Gauge extends React.Component<IGaugeProps> {
${(data[0].value * 10).toFixed(2)}% ${(data[0].value * 10).toFixed(2)}%
</p> </p>
</div>`; </div>`;
const data = [{ value: percent / 10 }];
const textStyle: { const textStyle: {
fontSize: number; fontSize: number;
fill: string; fill: string;
...@@ -172,7 +174,6 @@ class Gauge extends React.Component<IGaugeProps> { ...@@ -172,7 +174,6 @@ class Gauge extends React.Component<IGaugeProps> {
/> />
</Chart> </Chart>
); );
} };
}
export default autoHeight()(Gauge); export default autoHeight()(Gauge);
DashboardMonitor/src/components/Charts/MiniArea/index.tsx
View file @ ded1590a
import { Axis, Chart, Geom, Tooltip } from 'bizcharts'; import { Axis, AxisProps, Chart, Geom, Tooltip } from 'bizcharts';
import React from 'react'; import React from 'react';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
import styles from '../index.less'; import styles from '../index.less';
export interface IAxis { export interface MiniAreaProps {
title: any;
line: any;
gridAlign: any;
labels: any;
tickLine: any;
grid: any;
label: any;
}
export interface IMiniAreaProps {
color?: string; color?: string;
height?: number; height?: number;
borderColor?: string; borderColor?: string;
line?: boolean; line?: boolean;
animate?: boolean; animate?: boolean;
xAxis?: IAxis; xAxis?: AxisProps;
forceFit?: boolean; forceFit?: boolean;
scale?: { x?: any; y?: any }; scale?: {
yAxis?: Partial<IAxis>; x?: {
tickCount: number;
};
y?: {
tickCount: number;
};
};
yAxis?: Partial<AxisProps>;
borderWidth?: number; borderWidth?: number;
data: { data: {
x: number | string; x: number | string;
...@@ -31,8 +28,7 @@ export interface IMiniAreaProps { ...@@ -31,8 +28,7 @@ export interface IMiniAreaProps {
}[]; }[];
} }
class MiniArea extends React.Component<IMiniAreaProps> { const MiniArea: React.FC<MiniAreaProps> = props => {
render() {
const { const {
height = 1, height = 1,
data = [], data = [],
...@@ -45,7 +41,9 @@ class MiniArea extends React.Component<IMiniAreaProps> { ...@@ -45,7 +41,9 @@ class MiniArea extends React.Component<IMiniAreaProps> {
xAxis, xAxis,
yAxis, yAxis,
animate = true, animate = true,
} = this.props; } = props;
console.log(props);
const padding: [number, number, number, number] = [36, 5, 30, 5]; const padding: [number, number, number, number] = [36, 5, 30, 5];
...@@ -53,11 +51,11 @@ class MiniArea extends React.Component<IMiniAreaProps> { ...@@ -53,11 +51,11 @@ class MiniArea extends React.Component<IMiniAreaProps> {
x: { x: {
type: 'cat', type: 'cat',
range: [0, 1], range: [0, 1],
...scale!.x, ...scale.x,
}, },
y: { y: {
min: 0, min: 0,
...scale!.y, ...scale.y,
}, },
}; };
...@@ -86,19 +84,19 @@ class MiniArea extends React.Component<IMiniAreaProps> { ...@@ -86,19 +84,19 @@ class MiniArea extends React.Component<IMiniAreaProps> {
<Axis <Axis
key="axis-x" key="axis-x"
name="x" name="x"
label={false} label={null}
line={false} line={null}
tickLine={false} tickLine={null}
grid={false} grid={null}
{...xAxis} {...xAxis}
/> />
<Axis <Axis
key="axis-y" key="axis-y"
name="y" name="y"
label={false} label={null}
line={false} line={null}
tickLine={false} tickLine={null}
grid={false} grid={null}
{...yAxis} {...yAxis}
/> />
<Tooltip showTitle={false} crosshairs={false} /> <Tooltip showTitle={false} crosshairs={false} />
...@@ -129,7 +127,6 @@ class MiniArea extends React.Component<IMiniAreaProps> { ...@@ -129,7 +127,6 @@ class MiniArea extends React.Component<IMiniAreaProps> {
</div> </div>
</div> </div>
); );
} };
}
export default autoHeight()(MiniArea); export default autoHeight()(MiniArea);
DashboardMonitor/src/components/Charts/Pie/index.tsx
View file @ ded1590a
import { Chart, Coord, Geom, Tooltip } from 'bizcharts'; import { Chart, Coord, Geom, Tooltip } from 'bizcharts';
import React, { Component } from 'react'; import React, { Component } from 'react';
import Bind from 'lodash-decorators/bind';
import { DataView } from '@antv/data-set'; import { DataView } from '@antv/data-set';
import Debounce from 'lodash-decorators/debounce'; import Debounce from 'lodash.debounce';
import { Divider } from 'antd'; import { Divider } from 'antd';
import ReactFitText from 'react-fittext'; import ReactFitText from 'react-fittext';
import classNames from 'classnames'; import classNames from 'classnames';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
import styles from './index.less'; import styles from './index.less';
export interface IPieProps { export interface PieProps {
animate?: boolean; animate?: boolean;
color?: string; color?: string;
colors?: string[]; colors?: string[];
...@@ -35,21 +34,40 @@ export interface IPieProps { ...@@ -35,21 +34,40 @@ export interface IPieProps {
valueFormat?: (value: string) => string | React.ReactNode; valueFormat?: (value: string) => string | React.ReactNode;
subTitle?: React.ReactNode; subTitle?: React.ReactNode;
} }
interface IPieState { interface PieState {
legendData: { checked: boolean; x: string; color: string; percent: number; y: string }[]; legendData: { checked: boolean; x: string; color: string; percent: number; y: string }[];
legendBlock: boolean; legendBlock: boolean;
} }
class Pie extends Component<IPieProps, IPieState> { class Pie extends Component<PieProps, PieState> {
state: IPieState = { state: PieState = {
legendData: [], legendData: [],
legendBlock: false, legendBlock: false,
}; };
requestRef: number | undefined; // for window resize auto responsive legend
resize = Debounce(() => {
root!: HTMLDivElement; const { hasLegend } = this.props;
const { legendBlock } = this.state;
chart: G2.Chart | undefined; if (!hasLegend || !this.root) {
window.removeEventListener('resize', this.resize);
return;
}
if (
this.root &&
this.root.parentNode &&
(this.root.parentNode as HTMLElement).clientWidth <= 380
) {
if (!legendBlock) {
this.setState({
legendBlock: true,
});
}
} else if (legendBlock) {
this.setState({
legendBlock: false,
});
}
}, 300);
componentDidMount() { componentDidMount() {
window.addEventListener( window.addEventListener(
...@@ -61,7 +79,7 @@ class Pie extends Component<IPieProps, IPieState> { ...@@ -61,7 +79,7 @@ class Pie extends Component<IPieProps, IPieState> {
); );
} }
componentDidUpdate(preProps: IPieProps) { componentDidUpdate(preProps: PieProps) {
const { data } = this.props; const { data } = this.props;
if (data !== preProps.data) { if (data !== preProps.data) {
// because of charts data create when rendered // because of charts data create when rendered
...@@ -93,7 +111,8 @@ class Pie extends Component<IPieProps, IPieState> { ...@@ -93,7 +111,8 @@ class Pie extends Component<IPieProps, IPieState> {
if (!this.chart) return; if (!this.chart) return;
const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形 const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
if (!geom) return; if (!geom) return;
const items = geom.get('dataArray') || []; // 获取图形对应的 // g2 的类型有问题
const items = (geom as any).get('dataArray') || []; // 获取图形对应的
const legendData = items.map((item: { color: any; _origin: any }[]) => { const legendData = items.map((item: { color: any; _origin: any }[]) => {
/* eslint no-underscore-dangle:0 */ /* eslint no-underscore-dangle:0 */
...@@ -112,7 +131,7 @@ class Pie extends Component<IPieProps, IPieState> { ...@@ -112,7 +131,7 @@ class Pie extends Component<IPieProps, IPieState> {
this.root = n; this.root = n;
}; };
handleLegendClick = (item: any, i: string | number) => { handleLegendClick = (item: { checked: boolean }, i: string | number) => {
const newItem = item; const newItem = item;
newItem.checked = !newItem.checked; newItem.checked = !newItem.checked;
...@@ -130,32 +149,11 @@ class Pie extends Component<IPieProps, IPieState> { ...@@ -130,32 +149,11 @@ class Pie extends Component<IPieProps, IPieState> {
}); });
}; };
// for window resize auto responsive legend root!: HTMLDivElement;
@Bind()
@Debounce(300) chart: G2.Chart | undefined;
resize() {
const { hasLegend } = this.props; requestRef: number | undefined;
const { legendBlock } = this.state;
if (!hasLegend || !this.root) {
window.removeEventListener('resize', this.resize);
return;
}
if (
this.root &&
this.root.parentNode &&
(this.root.parentNode as HTMLElement).clientWidth <= 380
) {
if (!legendBlock) {
this.setState({
legendBlock: true,
});
}
} else if (legendBlock) {
this.setState({
legendBlock: false,
});
}
}
render() { render() {
const { const {
......
DashboardMonitor/src/components/Charts/TagCloud/index.tsx
View file @ ded1590a
import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts'; import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts';
import React, { Component } from 'react'; import React, { Component } from 'react';
import Bind from 'lodash-decorators/bind';
import DataSet from '@antv/data-set'; import DataSet from '@antv/data-set';
import Debounce from 'lodash-decorators/debounce'; import Debounce from 'lodash.debounce';
import classNames from 'classnames'; import classNames from 'classnames';
import autoHeight from '../autoHeight'; import autoHeight from '../autoHeight';
import styles from './index.less'; import styles from './index.less';
...@@ -13,7 +12,7 @@ import styles from './index.less'; ...@@ -13,7 +12,7 @@ import styles from './index.less';
const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png'; const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';
export interface ITagCloudProps { export interface TagCloudProps {
data: { data: {
name: string; name: string;
value: string; value: string;
...@@ -23,27 +22,19 @@ export interface ITagCloudProps { ...@@ -23,27 +22,19 @@ export interface ITagCloudProps {
style?: React.CSSProperties; style?: React.CSSProperties;
} }
interface ITagCloudState { interface TagCloudState {
dv: any; dv: any;
height?: number; height?: number;
width: number; width: number;
} }
class TagCloud extends Component<ITagCloudProps, ITagCloudState> { class TagCloud extends Component<TagCloudProps, TagCloudState> {
state = { state = {
dv: null, dv: null,
height: 0, height: 0,
width: 0, width: 0,
}; };
isUnmount!: boolean;
requestRef!: number;
root: HTMLDivElement | undefined;
imageMask: HTMLImageElement | undefined;
componentDidMount() { componentDidMount() {
requestAnimationFrame(() => { requestAnimationFrame(() => {
this.initTagCloud(); this.initTagCloud();
...@@ -52,7 +43,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> { ...@@ -52,7 +43,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
window.addEventListener('resize', this.resize, { passive: true }); window.addEventListener('resize', this.resize, { passive: true });
} }
componentDidUpdate(preProps?: ITagCloudProps) { componentDidUpdate(preProps?: TagCloudProps) {
const { data } = this.props; const { data } = this.props;
if (preProps && JSON.stringify(preProps.data) !== JSON.stringify(data)) { if (preProps && JSON.stringify(preProps.data) !== JSON.stringify(data)) {
this.renderChart(this.props); this.renderChart(this.props);
...@@ -112,9 +103,15 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> { ...@@ -112,9 +103,15 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
}); });
}; };
@Bind() isUnmount!: boolean;
@Debounce(500)
renderChart(nextProps: ITagCloudProps) { requestRef!: number;
root: HTMLDivElement | undefined;
imageMask: HTMLImageElement | undefined;
renderChart = Debounce((nextProps: TagCloudProps) => {
// const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C']; // const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
const { data, height } = nextProps || this.props; const { data, height } = nextProps || this.props;
if (data.length < 1 || !this.root) { if (data.length < 1 || !this.root) {
...@@ -140,8 +137,8 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> { ...@@ -140,8 +137,8 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
return 0; return 0;
}, },
fontSize(d: { value: number }) { fontSize(d: { value: number }) {
// eslint-disable-next-line const size = ((d.value - min) / (max - min)) ** 2;
return Math.pow((d.value - min) / (max - min), 2) * (17.5 - 5) + 5; return size * (17.5 - 5) + 5;
}, },
}); });
...@@ -165,7 +162,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> { ...@@ -165,7 +162,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
} else { } else {
onload(); onload();
} }
} }, 200);
render() { render() {
const { className, height } = this.props; const { className, height } = this.props;
......
DashboardMonitor/src/components/Charts/WaterWave/index.tsx
View file @ ded1590a
...@@ -7,7 +7,7 @@ import styles from './index.less'; ...@@ -7,7 +7,7 @@ import styles from './index.less';
/* eslint no-mixed-operators: 0 */ /* eslint no-mixed-operators: 0 */
// riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90 // riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90
export interface IWaterWaveProps { export interface WaterWaveProps {
title: React.ReactNode; title: React.ReactNode;
color?: string; color?: string;
height?: number; height?: number;
...@@ -15,16 +15,16 @@ export interface IWaterWaveProps { ...@@ -15,16 +15,16 @@ export interface IWaterWaveProps {
style?: React.CSSProperties; style?: React.CSSProperties;
} }
class WaterWave extends Component<IWaterWaveProps> { class WaterWave extends Component<WaterWaveProps> {
state = { state = {
radio: 1, radio: 1,
}; };
timer: number = 0; timer: number = 0;
root: HTMLDivElement | undefined | null; root: HTMLDivElement | undefined | null = null;
node: HTMLCanvasElement | undefined | null; node: HTMLCanvasElement | undefined | null = null;
componentDidMount() { componentDidMount() {
this.renderChart(); this.renderChart();
...@@ -38,7 +38,7 @@ class WaterWave extends Component<IWaterWaveProps> { ...@@ -38,7 +38,7 @@ class WaterWave extends Component<IWaterWaveProps> {
); );
} }
componentDidUpdate(props: IWaterWaveProps) { componentDidUpdate(props: WaterWaveProps) {
const { percent } = this.props; const { percent } = this.props;
if (props.percent !== percent) { if (props.percent !== percent) {
// 不加这个会造成绘制缓慢 // 不加这个会造成绘制缓慢
......
DashboardMonitor/src/components/Charts/autoHeight.tsx
View file @ ded1590a
...@@ -6,7 +6,8 @@ export type IReactComponent<P = any> = ...@@ -6,7 +6,8 @@ export type IReactComponent<P = any> =
| React.ClassicComponentClass<P>; | React.ClassicComponentClass<P>;
function computeHeight(node: HTMLDivElement) { function computeHeight(node: HTMLDivElement) {
node.style.height = '100%'; const { style } = node;
style.height = '100%';
const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10); const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10);
const padding = const padding =
parseInt(`${getComputedStyle(node).paddingTop}`, 10) + parseInt(`${getComputedStyle(node).paddingTop}`, 10) +
...@@ -30,24 +31,24 @@ function getAutoHeight(n: HTMLDivElement) { ...@@ -30,24 +31,24 @@ function getAutoHeight(n: HTMLDivElement) {
return height; return height;
} }
interface IAutoHeightProps { interface AutoHeightProps {
height?: number; height?: number;
} }
function autoHeight() { function autoHeight() {
return function<P extends IAutoHeightProps> ( return <P extends AutoHeightProps>(
WrappedComponent: React.ComponentClass<P> | React.SFC<P>, WrappedComponent: React.ComponentClass<P> | React.SFC<P>,
): React.ComponentClass<P> { ): React.ComponentClass<P> => {
class AutoHeightComponent extends React.Component<P & IAutoHeightProps> { class AutoHeightComponent extends React.Component<P & AutoHeightProps> {
state = { state = {
computedHeight: 0, computedHeight: 0,
}; };
root!: HTMLDivElement; root: HTMLDivElement | null = null;
componentDidMount() { componentDidMount() {
const { height } = this.props; const { height } = this.props;
if (!height) { if (!height && this.root) {
let h = getAutoHeight(this.root); let h = getAutoHeight(this.root);
this.setState({ computedHeight: h }); this.setState({ computedHeight: h });
if (h < 1) { if (h < 1) {
......
DashboardMonitor/src/data.d.ts
View file @ ded1590a
export interface ITag { export interface TagType {
name: string; name: string;
value: string; value: string;
type: string; type: string;
......
DashboardMonitor/src/index.tsx
View file @ ded1590a
...@@ -6,19 +6,17 @@ import { Dispatch } from 'redux'; ...@@ -6,19 +6,17 @@ import { Dispatch } from 'redux';
import { GridContent } from '@ant-design/pro-layout'; import { GridContent } from '@ant-design/pro-layout';
import { connect } from 'dva'; import { connect } from 'dva';
import numeral from 'numeral'; import numeral from 'numeral';
import { IStateType } from './model'; import { StateType } from './model';
import Charts from './components/Charts'; import { Pie, WaterWave, Gauge, TagCloud } from './components/Charts';
import ActiveChart from './components/ActiveChart'; import ActiveChart from './components/ActiveChart';
import styles from './style.less'; import styles from './style.less';
const { Countdown } = Statistic; const { Countdown } = Statistic;
const { Pie, WaterWave, Gauge, TagCloud } = Charts;
const targetTime = new Date().getTime() + 3900000; const targetTime = new Date().getTime() + 3900000;
interface PAGE_NAME_UPPER_CAMEL_CASEProps { interface PAGE_NAME_UPPER_CAMEL_CASEProps {
BLOCK_NAME_CAMEL_CASE: IStateType; BLOCK_NAME_CAMEL_CASE: StateType;
dispatch: Dispatch<any>; dispatch: Dispatch<any>;
loading: boolean; loading: boolean;
} }
...@@ -28,7 +26,7 @@ interface PAGE_NAME_UPPER_CAMEL_CASEProps { ...@@ -28,7 +26,7 @@ interface PAGE_NAME_UPPER_CAMEL_CASEProps {
BLOCK_NAME_CAMEL_CASE, BLOCK_NAME_CAMEL_CASE,
loading, loading,
}: { }: {
BLOCK_NAME_CAMEL_CASE: IStateType; BLOCK_NAME_CAMEL_CASE: StateType;
loading: { loading: {
models: { [key: string]: boolean }; models: { [key: string]: boolean };
}; };
......
DashboardMonitor/src/model.ts
View file @ ded1590a
import { AnyAction, Reducer } from 'redux'; import { AnyAction, Reducer } from 'redux';
import { EffectsCommandMap } from 'dva'; import { EffectsCommandMap } from 'dva';
import { ITag } from './data'; import { TagType } from './data.d';
import { queryTags } from './service'; import { queryTags } from './service';
export interface IStateType { export interface StateType {
tags: ITag[]; tags: TagType[];
} }
export type Effect = ( export type Effect = (
action: AnyAction, action: AnyAction,
effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T }, effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
) => void; ) => void;
export interface ModelType { export interface ModelType {
namespace: string; namespace: string;
state: IStateType; state: StateType;
effects: { effects: {
fetchTags: Effect; fetchTags: Effect;
}; };
reducers: { reducers: {
saveTags: Reducer<IStateType>; saveTags: Reducer<StateType>;
}; };
} }
......
DashboardWorkplace/package.json
View file @ ded1590a
...@@ -11,13 +11,15 @@ ...@@ -11,13 +11,15 @@
"url": "https://github.com/umijs/umi-blocks/ant-design-pro/workplace" "url": "https://github.com/umijs/umi-blocks/ant-design-pro/workplace"
}, },
"dependencies": { "dependencies": {
"@ant-design/pro-layout": "^4.5.5",
"antd": "^3.16.3", "antd": "^3.16.3",
"bizcharts": "^3.5.3-beta.0",
"dva": "^2.4.0", "dva": "^2.4.0",
"moment": "^2.22.2", "moment": "^2.22.2",
"prop-types": "^15.5.10", "prop-types": "^15.5.10",
"react": "^16.6.3", "react": "^16.6.3",
"umi-request": "^1.0.0", "redux": "^4.0.1",
"bizcharts": "^3.5.3-beta.0" "umi-request": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"umi": "^2.6.9", "umi": "^2.6.9",
......
DashboardWorkplace/src/components/Radar/autoHeight.tsx
View file @ ded1590a
...@@ -6,7 +6,8 @@ export type IReactComponent<P = any> = ...@@ -6,7 +6,8 @@ export type IReactComponent<P = any> =
| React.ClassicComponentClass<P>; | React.ClassicComponentClass<P>;
function computeHeight(node: HTMLDivElement) { function computeHeight(node: HTMLDivElement) {
node.style.height = '100%'; const { style } = node;
style.height = '100%';
const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10); const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10);
const padding = const padding =
parseInt(`${getComputedStyle(node).paddingTop}`, 10) + parseInt(`${getComputedStyle(node).paddingTop}`, 10) +
...@@ -30,26 +31,23 @@ function getAutoHeight(n: HTMLDivElement) { ...@@ -30,26 +31,23 @@ function getAutoHeight(n: HTMLDivElement) {
return height; return height;
} }
interface IAutoHeightProps { interface AutoHeightProps {
height?: number; height?: number;
} }
function autoHeight() { function autoHeight() {
return function<P extends IAutoHeightProps> ( return <P extends AutoHeightProps>(
WrappedComponent: React.ComponentClass<P> | React.SFC<P>, WrappedComponent: React.ComponentClass<P> | React.SFC<P>,
): React.ComponentClass<P> { ): React.ComponentClass<P> => {
class AutoHeightComponent extends React.Component<P & IAutoHeightProps> { class AutoHeightComponent extends React.Component<P & AutoHeightProps> {
state = { state = {
computedHeight: 0, computedHeight: 0,
}; };
root!: HTMLDivElement;
componentDidMount() { componentDidMount() {
const { height } = this.props; const { height } = this.props;
if (!height) { if (!height) {
let h = getAutoHeight(this.root); let h = getAutoHeight(this.root);
// eslint-disable-next-line
this.setState({ computedHeight: h }); this.setState({ computedHeight: h });
if (h < 1) { if (h < 1) {
h = getAutoHeight(this.root); h = getAutoHeight(this.root);
...@@ -62,6 +60,8 @@ function autoHeight() { ...@@ -62,6 +60,8 @@ function autoHeight() {
this.root = node; this.root = node;
}; };
root!: HTMLDivElement;
render() { render() {
const { height } = this.props; const { height } = this.props;
const { computedHeight } = this.state; const { computedHeight } = this.state;
......
DashboardWorkplace/src/data.d.ts
View file @ ded1590a
export interface ITag { export interface TagType {
key: string; key: string;
label: string; label: string;
} }
export interface IProvince { export interface ProvinceType {
label: string; label: string;
key: string; key: string;
} }
export interface ICity { export interface CityType {
label: string; label: string;
key: string; key: string;
} }
export interface IGeographic { export interface GeographicType {
province: IProvince; province: ProvinceType;
city: ICity; city: CityType;
} }
export interface INotice { export interface NoticeType {
id: string; id: string;
title: string; title: string;
logo: string; logo: string;
...@@ -29,30 +29,30 @@ export interface INotice { ...@@ -29,30 +29,30 @@ export interface INotice {
memberLink: string; memberLink: string;
} }
export interface ICurrentUser { export interface CurrentUser {
name: string; name: string;
avatar: string; avatar: string;
userid: string; userid: string;
notice: INotice[]; notice: NoticeType[];
email: string; email: string;
signature: string; signature: string;
title: string; title: string;
group: string; group: string;
tags: ITag[]; tags: TagType[];
notifyCount: number; notifyCount: number;
unreadCount: number; unreadCount: number;
country: string; country: string;
geographic: IGeographic; geographic: GeographicType;
address: string; address: string;
phone: string; phone: string;
} }
export interface IMember { export interface Member {
avatar: string; avatar: string;
name: string; name: string;
id: string; id: string;
} }
export interface IActivities { export interface ActivitiesType {
id: string; id: string;
updatedAt: string; updatedAt: string;
user: { user: {
...@@ -71,7 +71,7 @@ export interface IActivities { ...@@ -71,7 +71,7 @@ export interface IActivities {
template: string; template: string;
} }
export interface IRadarData { export interface RadarDataType {
label: string; label: string;
name: string; name: string;
value: number; value: number;
......
DashboardWorkplace/src/index.tsx
View file @ ded1590a
...@@ -9,8 +9,8 @@ import moment from 'moment'; ...@@ -9,8 +9,8 @@ import moment from 'moment';
import Radar from './components/Radar'; import Radar from './components/Radar';
import { ModalState } from './model'; import { ModalState } from './model';
import EditableLinkGroup from './components/EditableLinkGroup'; import EditableLinkGroup from './components/EditableLinkGroup';
import { IActivities, ICurrentUser, INotice, IRadarData } from './data';
import styles from './style.less'; import styles from './style.less';
import { ActivitiesType, CurrentUser, NoticeType, RadarDataType } from './data.d';
const links = [ const links = [
{ {
...@@ -40,10 +40,10 @@ const links = [ ...@@ -40,10 +40,10 @@ const links = [
]; ];
interface BLOCK_NAME_CAMEL_CASEProps { interface BLOCK_NAME_CAMEL_CASEProps {
currentUser: ICurrentUser; currentUser: CurrentUser;
projectNotice: INotice[]; projectNotice: NoticeType[];
activities: IActivities[]; activities: ActivitiesType[];
radarData: IRadarData[]; radarData: RadarDataType[];
dispatch: Dispatch<any>; dispatch: Dispatch<any>;
currentUserLoading: boolean; currentUserLoading: boolean;
projectLoading: boolean; projectLoading: boolean;
...@@ -82,7 +82,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<BLOCK_NAME_CAMEL_CASEProp ...@@ -82,7 +82,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<BLOCK_NAME_CAMEL_CASEProp
}); });
} }
renderActivities(item: IActivities) { renderActivities = (item: ActivitiesType) => {
const events = item.template.split(/@\{([^{}]*)\}/gi).map(key => { const events = item.template.split(/@\{([^{}]*)\}/gi).map(key => {
if (item[key]) { if (item[key]) {
return ( return (
...@@ -112,7 +112,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<BLOCK_NAME_CAMEL_CASEProp ...@@ -112,7 +112,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<BLOCK_NAME_CAMEL_CASEProp
/> />
</List.Item> </List.Item>
); );
} };
render() { render() {
const { const {
...@@ -206,7 +206,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<BLOCK_NAME_CAMEL_CASEProp ...@@ -206,7 +206,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<BLOCK_NAME_CAMEL_CASEProp
title="动态" title="动态"
loading={activitiesLoading} loading={activitiesLoading}
> >
<List<IActivities> <List<ActivitiesType>
loading={activitiesLoading} loading={activitiesLoading}
renderItem={item => this.renderActivities(item)} renderItem={item => this.renderActivities(item)}
dataSource={activities} dataSource={activities}
......
DashboardWorkplace/src/model.ts
View file @ ded1590a
import { AnyAction, Reducer } from 'redux'; import { AnyAction, Reducer } from 'redux';
import { EffectsCommandMap } from 'dva'; import { EffectsCommandMap } from 'dva';
import { Activeties, CurrentUser, Notice, RadarData } from './data'; import { Activeties, CurrentUser, Notice, RadarData } from './data.d';
import { fakeChartData, queryActivities, queryCurrent, queryProjectNotice } from './service'; import { fakeChartData, queryActivities, queryCurrent, queryProjectNotice } from './service';
export interface ModalState { export interface ModalState {
......
EditorFlow/package.json
View file @ ded1590a
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"dev": "umi dev" "dev": "umi dev"
}, },
"dependencies": { "dependencies": {
"@ant-design/pro-layout": "^4.5.5",
"@antv/data-set": "^0.10.2", "@antv/data-set": "^0.10.2",
"antd": "^3.16.3", "antd": "^3.16.3",
"bizcharts": "^3.5.3-beta.0", "bizcharts": "^3.5.3-beta.0",
...@@ -22,13 +23,13 @@ ...@@ -22,13 +23,13 @@
"numeral": "^2.0.6", "numeral": "^2.0.6",
"react": "^16.6.3", "react": "^16.6.3",
"react-fittext": "^1.0.0", "react-fittext": "^1.0.0",
"umi": "^2.6.9",
"umi-plugin-react": "^1.7.2",
"umi-request": "^1.0.0" "umi-request": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"umi": "^2.6.9", "@types/numeral": "^0.0.25",
"umi-plugin-block-dev": "^1.1.0", "umi-plugin-block-dev": "^1.1.0"
"umi-plugin-react": "^1.7.2",
"@types/numeral": "^0.0.25"
}, },
"blockConfig": { "blockConfig": {
"specVersion": "0.1" "specVersion": "0.1"
......
EditorKoni/package.json
View file @ ded1590a
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"dev": "umi dev" "dev": "umi dev"
}, },
"dependencies": { "dependencies": {
"@ant-design/pro-layout": "^4.5.5",
"@antv/data-set": "^0.10.2", "@antv/data-set": "^0.10.2",
"antd": "^3.16.3", "antd": "^3.16.3",
"bizcharts": "^3.5.3-beta.0", "bizcharts": "^3.5.3-beta.0",
...@@ -22,13 +23,14 @@ ...@@ -22,13 +23,14 @@
"numeral": "^2.0.6", "numeral": "^2.0.6",
"react": "^16.6.3", "react": "^16.6.3",
"react-fittext": "^1.0.0", "react-fittext": "^1.0.0",
"umi-request": "^1.0.0" "umi-request": "^1.0.0",
"umi-plugin-react": "^1.7.2",
"umi-plugin-block-dev": "^1.1.0"
}, },
"devDependencies": { "devDependencies": {
"umi": "^2.6.9", "@types/numeral": "^0.0.25",
"umi-plugin-block-dev": "^1.1.0", "umi": "^2.6.9"
"umi-plugin-react": "^1.7.2",
"@types/numeral": "^0.0.25"
}, },
"blockConfig": { "blockConfig": {
"specVersion": "0.1" "specVersion": "0.1"
......
EditorMind/package.json
View file @ ded1590a
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"dev": "umi dev" "dev": "umi dev"
}, },
"dependencies": { "dependencies": {
"@ant-design/pro-layout": "^4.5.5",
"@antv/data-set": "^0.10.2", "@antv/data-set": "^0.10.2",
"antd": "^3.16.3", "antd": "^3.16.3",
"bizcharts": "^3.5.3-beta.0", "bizcharts": "^3.5.3-beta.0",
...@@ -22,13 +23,13 @@ ...@@ -22,13 +23,13 @@
"numeral": "^2.0.6", "numeral": "^2.0.6",
"react": "^16.6.3", "react": "^16.6.3",
"react-fittext": "^1.0.0", "react-fittext": "^1.0.0",
"umi-plugin-react": "^1.7.2",
"umi-request": "^1.0.0" "umi-request": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"@types/numeral": "^0.0.25",
"umi": "^2.6.9", "umi": "^2.6.9",
"umi-plugin-block-dev": "^1.1.0", "umi-plugin-block-dev": "^1.1.0"
"umi-plugin-react": "^1.7.2",
"@types/numeral": "^0.0.25"
}, },
"blockConfig": { "blockConfig": {
"specVersion": "0.1" "specVersion": "0.1"
......
FormAdvancedForm/package.json
View file @ ded1590a
...@@ -12,10 +12,14 @@ ...@@ -12,10 +12,14 @@
"dev": "umi dev" "dev": "umi dev"
}, },
"dependencies": { "dependencies": {
"@ant-design/pro-layout": "^4.5.5",
"@types/lodash": "^4.14.134",
"antd": "^3.16.3", "antd": "^3.16.3",
"classnames": "^2.2.6",
"dva": "^2.4.0", "dva": "^2.4.0",
"lodash": "^4.17.10", "lodash": "^4.17.10",
"react": "^16.6.3", "react": "^16.6.3",
"redux": "^4.0.1",
"umi-request": "^1.0.0" "umi-request": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
......
FormAdvancedForm/src/components/FooterToolbar/index.tsx
View file @ ded1590a
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import styles from './index.less'; import styles from './index.less';
...@@ -11,10 +10,6 @@ export interface FooterToolbarProps { ...@@ -11,10 +10,6 @@ export interface FooterToolbarProps {
} }
export default class FooterToolbar extends Component<FooterToolbarProps> { export default class FooterToolbar extends Component<FooterToolbarProps> {
static contextTypes = {
isMobile: PropTypes.bool,
};
state = { state = {
width: undefined, width: undefined,
}; };
......
FormAdvancedForm/src/components/TableForm.tsx
View file @ ded1590a
...@@ -4,8 +4,27 @@ import React, { Fragment, PureComponent } from 'react'; ...@@ -4,8 +4,27 @@ import React, { Fragment, PureComponent } from 'react';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash';
import styles from '../style.less'; import styles from '../style.less';
class TableForm extends PureComponent { interface TableFormDateType {
static getDerivedStateFromProps(nextProps, preState) { key: string;
workId?: string;
name?: string;
department?: string;
isNew?: boolean;
editable?: boolean;
}
interface TableFormProps {
loading?: boolean;
value?: TableFormDateType[];
onChange?: (value: TableFormDateType[]) => void;
}
interface TableFormState {
loading?: boolean;
value?: TableFormDateType[];
data?: TableFormDateType[];
}
class TableForm extends PureComponent<TableFormProps, TableFormState> {
static getDerivedStateFromProps(nextProps: TableFormProps, preState: TableFormState) {
if (isEqual(nextProps.value, preState.value)) { if (isEqual(nextProps.value, preState.value)) {
return null; return null;
} }
...@@ -15,6 +34,8 @@ class TableForm extends PureComponent { ...@@ -15,6 +34,8 @@ class TableForm extends PureComponent {
}; };
} }
clickedCancel: boolean = false;
index = 0; index = 0;
cacheOriginData = {}; cacheOriginData = {};
...@@ -25,7 +46,7 @@ class TableForm extends PureComponent { ...@@ -25,7 +46,7 @@ class TableForm extends PureComponent {
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
width: '20%', width: '20%',
render: (text, record) => { render: (text: string, record: TableFormDateType) => {
if (record.editable) { if (record.editable) {
return ( return (
<Input <Input
...@@ -45,7 +66,7 @@ class TableForm extends PureComponent { ...@@ -45,7 +66,7 @@ class TableForm extends PureComponent {
dataIndex: 'workId', dataIndex: 'workId',
key: 'workId', key: 'workId',
width: '20%', width: '20%',
render: (text, record) => { render: (text: string, record: TableFormDateType) => {
if (record.editable) { if (record.editable) {
return ( return (
<Input <Input
...@@ -64,7 +85,7 @@ class TableForm extends PureComponent { ...@@ -64,7 +85,7 @@ class TableForm extends PureComponent {
dataIndex: 'department', dataIndex: 'department',
key: 'department', key: 'department',
width: '40%', width: '40%',
render: (text, record) => { render: (text: string, record: TableFormDateType) => {
if (record.editable) { if (record.editable) {
return ( return (
<Input <Input
...@@ -81,7 +102,7 @@ class TableForm extends PureComponent { ...@@ -81,7 +102,7 @@ class TableForm extends PureComponent {
{ {
title: '操作', title: '操作',
key: 'action', key: 'action',
render: (text, record) => { render: (text: string, record: TableFormDateType) => {
const { loading } = this.state; const { loading } = this.state;
if (!!record.editable && loading) { if (!!record.editable && loading) {
return null; return null;
...@@ -119,25 +140,23 @@ class TableForm extends PureComponent { ...@@ -119,25 +140,23 @@ class TableForm extends PureComponent {
}, },
]; ];
constructor(props) { constructor(props: TableFormProps) {
super(props); super(props);
this.state = { this.state = {
data: props.value, data: props.value,
loading: false, loading: false,
/* eslint-disable-next-line react/no-unused-state */
value: props.value, value: props.value,
}; };
} }
getRowByKey(key, newData) { getRowByKey(key: string, newData?: TableFormDateType[]) {
const { data } = this.state; const { data = [] } = this.state;
return (newData || data).filter(item => item.key === key)[0]; return (newData || data).filter(item => item.key === key)[0];
} }
toggleEditable = (e, key) => { toggleEditable = (e: React.MouseEvent | React.KeyboardEvent, key: string) => {
e.preventDefault(); e.preventDefault();
const { data } = this.state; const { data = [] } = this.state;
const newData = data.map(item => ({ ...item })); const newData = data.map(item => ({ ...item }));
const target = this.getRowByKey(key, newData); const target = this.getRowByKey(key, newData);
if (target) { if (target) {
...@@ -151,7 +170,7 @@ class TableForm extends PureComponent { ...@@ -151,7 +170,7 @@ class TableForm extends PureComponent {
}; };
newMember = () => { newMember = () => {
const { data } = this.state; const { data = [] } = this.state;
const newData = data.map(item => ({ ...item })); const newData = data.map(item => ({ ...item }));
newData.push({ newData.push({
key: `NEW_TEMP_ID_${this.index}`, key: `NEW_TEMP_ID_${this.index}`,
...@@ -165,22 +184,24 @@ class TableForm extends PureComponent { ...@@ -165,22 +184,24 @@ class TableForm extends PureComponent {
this.setState({ data: newData }); this.setState({ data: newData });
}; };
remove(key) { remove(key: string) {
const { data } = this.state; const { data = [] } = this.state;
const { onChange } = this.props; const { onChange } = this.props;
const newData = data.filter(item => item.key !== key); const newData = data.filter(item => item.key !== key);
this.setState({ data: newData }); this.setState({ data: newData });
if (onChange) {
onChange(newData); onChange(newData);
} }
}
handleKeyPress(e, key) { handleKeyPress(e: React.KeyboardEvent, key: string) {
if (e.key === 'Enter') { if (e.key === 'Enter') {
this.saveRow(e, key); this.saveRow(e, key);
} }
} }
handleFieldChange(e, fieldName, key) { handleFieldChange(e: React.ChangeEvent<HTMLInputElement>, fieldName: string, key: string) {
const { data } = this.state; const { data = [] } = this.state;
const newData = data.map(item => ({ ...item })); const newData = data.map(item => ({ ...item }));
const target = this.getRowByKey(key, newData); const target = this.getRowByKey(key, newData);
if (target) { if (target) {
...@@ -189,7 +210,7 @@ class TableForm extends PureComponent { ...@@ -189,7 +210,7 @@ class TableForm extends PureComponent {
} }
} }
saveRow(e, key) { saveRow(e: React.MouseEvent | React.KeyboardEvent, key: string) {
e.persist(); e.persist();
this.setState({ this.setState({
loading: true, loading: true,
...@@ -202,7 +223,7 @@ class TableForm extends PureComponent { ...@@ -202,7 +223,7 @@ class TableForm extends PureComponent {
const target = this.getRowByKey(key) || {}; const target = this.getRowByKey(key) || {};
if (!target.workId || !target.name || !target.department) { if (!target.workId || !target.name || !target.department) {
message.error('请填写完整成员信息。'); message.error('请填写完整成员信息。');
e.target.focus(); (e.target as HTMLInputElement).focus();
this.setState({ this.setState({
loading: false, loading: false,
}); });
...@@ -210,19 +231,21 @@ class TableForm extends PureComponent { ...@@ -210,19 +231,21 @@ class TableForm extends PureComponent {
} }
delete target.isNew; delete target.isNew;
this.toggleEditable(e, key); this.toggleEditable(e, key);
const { data } = this.state; const { data = [] } = this.state;
const { onChange } = this.props; const { onChange } = this.props;
if (onChange) {
onChange(data); onChange(data);
}
this.setState({ this.setState({
loading: false, loading: false,
}); });
}, 500); }, 500);
} }
cancel(e, key) { cancel(e: React.MouseEvent, key: string) {
this.clickedCancel = true; this.clickedCancel = true;
e.preventDefault(); e.preventDefault();
const { data } = this.state; const { data = [] } = this.state;
const newData = data.map(item => ({ ...item })); const newData = data.map(item => ({ ...item }));
const target = this.getRowByKey(key, newData); const target = this.getRowByKey(key, newData);
if (this.cacheOriginData[key]) { if (this.cacheOriginData[key]) {
...@@ -239,7 +262,7 @@ class TableForm extends PureComponent { ...@@ -239,7 +262,7 @@ class TableForm extends PureComponent {
return ( return (
<Fragment> <Fragment>
<Table <Table<TableFormDateType>
loading={loading} loading={loading}
columns={this.columns} columns={this.columns}
dataSource={data} dataSource={data}
......
FormBasicForm/package.json
View file @ ded1590a
...@@ -11,15 +11,16 @@ ...@@ -11,15 +11,16 @@
"url": "https://github.com/umijs/umi-blocks/ant-design-pro/basicform" "url": "https://github.com/umijs/umi-blocks/ant-design-pro/basicform"
}, },
"dependencies": { "dependencies": {
"@ant-design/pro-layout": "^4.0.5",
"antd": "^3.16.3", "antd": "^3.16.3",
"dva": "^2.4.0", "dva": "^2.4.0",
"react": "^16.6.3", "react": "^16.6.3",
"redux": "^4.0.1",
"umi-request": "^1.0.0", "umi-request": "^1.0.0",
"@ant-design/pro-layout": "^4.0.5" "umi-plugin-react": "^1.7.2"
}, },
"devDependencies": { "devDependencies": {
"umi": "^2.6.9", "umi": "^2.6.9",
"umi-plugin-react": "^1.7.2",
"umi-plugin-block-dev": "^1.0.0" "umi-plugin-block-dev": "^1.0.0"
}, },
"license": "ISC", "license": "ISC",
......
FormStepForm/package.json
View file @ ded1590a
...@@ -11,16 +11,18 @@ ...@@ -11,16 +11,18 @@
"url": "https://github.com/umijs/umi-blocks/ant-design-pro/stepform" "url": "https://github.com/umijs/umi-blocks/ant-design-pro/stepform"
}, },
"dependencies": { "dependencies": {
"@ant-design/pro-layout": "^4.5.5",
"antd": "^3.16.3", "antd": "^3.16.3",
"dva": "^2.4.0", "dva": "^2.4.0",
"nzh": "^1.0.3",
"react": "^16.6.3", "react": "^16.6.3",
"umi-request": "^1.0.0", "redux": "^4.0.1",
"nzh": "^1.0.3" "umi-request": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"umi": "^2.6.9", "umi": "^2.6.9",
"umi-plugin-react": "^1.7.2", "umi-plugin-block-dev": "^1.0.0",
"umi-plugin-block-dev": "^1.0.0" "umi-plugin-react": "^1.7.2"
}, },
"license": "ISC", "license": "ISC",
"blockConfig": { "blockConfig": {
......
FormStepForm/src/components/Step1/index.tsx
View file @ ded1590a
...@@ -4,7 +4,7 @@ import React, { Fragment } from 'react'; ...@@ -4,7 +4,7 @@ import React, { Fragment } from 'react';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { FormComponentProps } from 'antd/es/form'; import { FormComponentProps } from 'antd/es/form';
import { connect } from 'dva'; import { connect } from 'dva';
import { IStateType } from '../../model'; import { StateType } from '../../model';
import styles from './index.less'; import styles from './index.less';
const { Option } = Select; const { Option } = Select;
...@@ -18,19 +18,18 @@ const formItemLayout = { ...@@ -18,19 +18,18 @@ const formItemLayout = {
}, },
}; };
interface Step1Props extends FormComponentProps { interface Step1Props extends FormComponentProps {
data?: IStateType['step']; data?: StateType['step'];
dispatch?: Dispatch<any>; dispatch?: Dispatch<any>;
} }
class Step1 extends React.PureComponent<Step1Props> { const Step1: React.FC<Step1Props> = props => {
render() { const { form, dispatch, data } = props;
const { form, dispatch, data } = this.props;
if (!data) { if (!data) {
return; return null;
} }
const { getFieldDecorator, validateFields } = form; const { getFieldDecorator, validateFields } = form;
const onValidateForm = () => { const onValidateForm = () => {
validateFields((err, values) => { validateFields((err: any, values: StateType['step']) => {
if (!err && dispatch) { if (!err && dispatch) {
dispatch({ dispatch({
type: 'BLOCK_NAME_CAMEL_CASE/saveStepFormData', type: 'BLOCK_NAME_CAMEL_CASE/saveStepFormData',
...@@ -118,9 +117,8 @@ class Step1 extends React.PureComponent<Step1Props> { ...@@ -118,9 +117,8 @@ class Step1 extends React.PureComponent<Step1Props> {
</div> </div>
</Fragment> </Fragment>
); );
} };
}
export default connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: IStateType }) => ({ export default connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: StateType }) => ({
data: BLOCK_NAME_CAMEL_CASE.step, data: BLOCK_NAME_CAMEL_CASE.step,
}))(Form.create<Step1Props>()(Step1)); }))(Form.create<Step1Props>()(Step1));
FormStepForm/src/components/Step2/index.tsx
View file @ ded1590a
...@@ -4,7 +4,7 @@ import { Dispatch } from 'redux'; ...@@ -4,7 +4,7 @@ import { Dispatch } from 'redux';
import { FormComponentProps } from 'antd/es/form'; import { FormComponentProps } from 'antd/es/form';
import React from 'react'; import React from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { IStateType } from '../../model'; import { StateType } from '../../model';
import styles from './index.less'; import styles from './index.less';
const formItemLayout = { const formItemLayout = {
...@@ -16,16 +16,15 @@ const formItemLayout = { ...@@ -16,16 +16,15 @@ const formItemLayout = {
}, },
}; };
interface Step2Props extends FormComponentProps { interface Step2Props extends FormComponentProps {
data?: IStateType['step']; data?: StateType['step'];
dispatch?: Dispatch<any>; dispatch?: Dispatch<any>;
submitting?: boolean; submitting?: boolean;
} }
class Step2 extends React.Component<Step2Props> { const Step2: React.FC<Step2Props> = props => {
render() { const { form, data, dispatch, submitting } = props;
const { form, data, dispatch, submitting } = this.props;
if (!data) { if (!data) {
return; return null;
} }
const { getFieldDecorator, validateFields } = form; const { getFieldDecorator, validateFields } = form;
const onPrev = () => { const onPrev = () => {
...@@ -104,14 +103,13 @@ class Step2 extends React.Component<Step2Props> { ...@@ -104,14 +103,13 @@ class Step2 extends React.Component<Step2Props> {
</Form.Item> </Form.Item>
</Form> </Form>
); );
} };
}
export default connect( export default connect(
({ ({
BLOCK_NAME_CAMEL_CASE, BLOCK_NAME_CAMEL_CASE,
loading, loading,
}: { }: {
BLOCK_NAME_CAMEL_CASE: IStateType; BLOCK_NAME_CAMEL_CASE: StateType;
loading: { loading: {
effects: { [key: string]: boolean }; effects: { [key: string]: boolean };
}; };
......
FormStepForm/src/components/Step3/index.tsx
View file @ ded1590a
...@@ -2,33 +2,19 @@ import { Button, Col, Row } from 'antd'; ...@@ -2,33 +2,19 @@ import { Button, Col, Row } from 'antd';
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { connect } from 'dva'; import { StateType } from '../../model';
import { IStateType } from '../../model';
import Result from '../Result'; import Result from '../Result';
import styles from './index.less'; import styles from './index.less';
interface Step3Props { interface Step3Props {
data?: IStateType['step']; data?: StateType['step'];
dispatch?: Dispatch<any>; dispatch?: Dispatch<any>;
} }
@connect( const Step3: React.FC<Step3Props> = props => {
({ const { data, dispatch } = props;
BLOCK_NAME_CAMEL_CASE,
}: {
BLOCK_NAME_CAMEL_CASE: IStateType;
loading: {
effects: { [key: string]: boolean };
};
}) => ({
data: BLOCK_NAME_CAMEL_CASE.step,
}),
)
class Step3 extends React.Component<Step3Props> {
render() {
const { data, dispatch } = this.props;
if (!data) { if (!data) {
return; return null;
} }
const onFinish = () => { const onFinish = () => {
if (dispatch) { if (dispatch) {
...@@ -92,7 +78,6 @@ class Step3 extends React.Component<Step3Props> { ...@@ -92,7 +78,6 @@ class Step3 extends React.Component<Step3Props> {
className={styles.result} className={styles.result}
/> />
); );
} };
}
export default Step3; export default Step3;
FormStepForm/src/index.tsx
View file @ ded1590a
...@@ -3,7 +3,7 @@ import React, { Component, Fragment } from 'react'; ...@@ -3,7 +3,7 @@ import React, { Component, Fragment } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva'; import { connect } from 'dva';
import { IStateType } from './model'; import { StateType } from './model';
import Step1 from './components/Step1'; import Step1 from './components/Step1';
import Step2 from './components/Step2'; import Step2 from './components/Step2';
import Step3 from './components/Step3'; import Step3 from './components/Step3';
...@@ -12,10 +12,10 @@ import styles from './style.less'; ...@@ -12,10 +12,10 @@ import styles from './style.less';
const { Step } = Steps; const { Step } = Steps;
interface PAGE_NAME_UPPER_CAMEL_CASEProps { interface PAGE_NAME_UPPER_CAMEL_CASEProps {
current: IStateType['current']; current: StateType['current'];
} }
@connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: IStateType }) => ({ @connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: StateType }) => ({
current: BLOCK_NAME_CAMEL_CASE.current, current: BLOCK_NAME_CAMEL_CASE.current,
})) }))
class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> { class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> {
......
FormStepForm/src/model.ts
View file @ ded1590a
...@@ -3,7 +3,7 @@ import { AnyAction, Reducer } from 'redux'; ...@@ -3,7 +3,7 @@ import { AnyAction, Reducer } from 'redux';
import { EffectsCommandMap } from 'dva'; import { EffectsCommandMap } from 'dva';
import { fakeSubmitForm } from './service'; import { fakeSubmitForm } from './service';
export interface IStateType { export interface StateType {
current?: string; current?: string;
step?: { step?: {
payAccount: string; payAccount: string;
...@@ -15,18 +15,18 @@ export interface IStateType { ...@@ -15,18 +15,18 @@ export interface IStateType {
export type Effect = ( export type Effect = (
action: AnyAction, action: AnyAction,
effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T }, effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
) => void; ) => void;
export interface ModelType { export interface ModelType {
namespace: string; namespace: string;
state: IStateType; state: StateType;
effects: { effects: {
submitStepForm: Effect; submitStepForm: Effect;
}; };
reducers: { reducers: {
saveStepFormData: Reducer<IStateType>; saveStepFormData: Reducer<StateType>;
saveCurrentStep: Reducer<IStateType>; saveCurrentStep: Reducer<StateType>;
}; };
} }
...@@ -69,7 +69,7 @@ const Model: ModelType = { ...@@ -69,7 +69,7 @@ const Model: ModelType = {
return { return {
...state, ...state,
step: { step: {
...state!.step, ...(state as StateType).step,
...payload, ...payload,
}, },
}; };
......
ListBasicList/src/index.tsx
View file @ ded1590a
...@@ -26,7 +26,7 @@ import { findDOMNode } from 'react-dom'; ...@@ -26,7 +26,7 @@ import { findDOMNode } from 'react-dom';
import moment from 'moment'; import moment from 'moment';
import Result from './Result'; import Result from './Result';
import { IStateType } from './model'; import { IStateType } from './model';
import { BasicListItemDataType } from './data'; import { BasicListItemDataType } from './data.d';
import styles from './style.less'; import styles from './style.less';
const FormItem = Form.Item; const FormItem = Form.Item;
......
package.json
View file @ ded1590a
{ {
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "cross-env PAGES_PATH='ProfileAdvanced/src' umi dev", "dev": "cross-env PAGES_PATH='DashboardMonitor/src' umi dev",
"start": "umi dev", "start": "umi dev",
"lint-staged": "lint-staged", "lint-staged": "lint-staged",
"lint": "npm run lint:js && npm run lint:style && npm run lint:prettier", "lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
......
tslint.yml deleted 100644 → 0
View file @ 190aec4c
defaultSeverity: error
extends:
- tslint-react
- tslint-eslint-rules
- tslint-config-prettier
jsRules:
rules:
class-name: false
eofline: true
forin: true
jsdoc-format: false
label-position: true
member-ordering:
- true
- order: statics-first
new-parens: true
no-arg: true
no-bitwise: true
no-conditional-assignment: true
no-consecutive-blank-lines: true
no-console:
- true
- debug
- info
- log
- time
- timeEnd
- trace
- warn
no-construct: true
no-debugger: true
no-duplicate-variable: true
no-eval: true
no-internal-module: true
no-multi-spaces: true
no-namespace: true
no-reference: true
no-shadowed-variable: true
no-string-literal: true
no-trailing-whitespace: true
no-unused-expression: true
no-var-keyword: true
one-variable-per-declaration:
- true
- ignore-for-loop
prefer-const:
- true
- destructuring: all
radix: true
space-in-parens: true
switch-default: true
trailing-comma:
- true
- singleline: never
multiline: always
esSpecCompliant: true
triple-equals:
- true
- allow-null-check
typedef-whitespace:
- true
- call-signature: nospace
index-signature: nospace
parameter: nospace
property-declaration: nospace
variable-declaration: nospace
- call-signature: onespace
index-signature: onespace
parameter: onespace
property-declaration: onespace
variable-declaration: onespace
use-isnan: true
variable-name:
- true
- allow-leading-underscore
- ban-keywords
- check-format
- allow-pascal-case
jsx-no-lambda: false
jsx-no-string-ref: false
jsx-boolean-value:
- true
- never
jsx-no-multiline-js: false
whitespace:
- true
- check-branch
- check-decl
- check-operator
- check-module
- check-separator
- check-rest-spread
- check-type
- check-type-operator
- check-preblock
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