Skip to content

GitLab

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

fix some warning

parent 190aec4c
Expand all Hide 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,148 +31,149 @@ const defaultFormatter = (val: string): string => { ...@@ -31,148 +31,149 @@ const defaultFormatter = (val: string): string => {
} }
}; };
Shape.registerShape!('point', 'pointer', { if (Shape.registerShape) {
drawShape(cfg: any, group: any) { Shape.registerShape('point', 'pointer', {
let point = cfg.points[0]; drawShape(cfg: any, group: any) {
point = (this as any).parsePoint(point); let point = cfg.points[0];
const center = (this as any).parsePoint({ point = (this as any).parsePoint(point);
x: 0, const center = (this as any).parsePoint({
y: 0, x: 0,
}); y: 0,
group.addShape('line', { });
attrs: { group.addShape('line', {
x1: center.x, attrs: {
y1: center.y, x1: center.x,
x2: point.x, y1: center.y,
y2: point.y, x2: point.x,
stroke: cfg.color, y2: point.y,
lineWidth: 2, stroke: cfg.color,
lineCap: 'round', lineWidth: 2,
}, lineCap: 'round',
}); },
return group.addShape('circle', { });
attrs: { return group.addShape('circle', {
x: center.x, attrs: {
y: center.y, x: center.x,
r: 6, y: center.y,
stroke: cfg.color, r: 6,
lineWidth: 3, stroke: cfg.color,
fill: '#fff', lineWidth: 3,
}, fill: '#fff',
}); },
}, });
}); },
});
}
const Gauge: React.FC<GaugeProps> = props => {
const {
title,
height = 1,
percent,
forceFit = true,
formatter = defaultFormatter,
color = '#2F9CFF',
bgColor = '#F0F2F5',
} = props;
const cols = {
value: {
type: 'linear',
min: 0,
max: 10,
tickCount: 6,
nice: true,
},
};
const data = [{ value: percent / 10 }];
class Gauge extends React.Component<IGaugeProps> { const renderHtml = () => `
render() {
const {
title,
height = 1,
percent,
forceFit = true,
formatter = defaultFormatter,
color = '#2F9CFF',
bgColor = '#F0F2F5',
} = this.props;
const cols = {
value: {
type: 'linear',
min: 0,
max: 10,
tickCount: 6,
nice: true,
},
};
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>
<p style="font-size: 24px;color: rgba(0,0,0,0.85);margin: 0;"> <p style="font-size: 24px;color: rgba(0,0,0,0.85);margin: 0;">
${(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; textAlign: 'center';
textAlign: 'center'; } = {
} = { fontSize: 12,
fontSize: 12, fill: 'rgba(0, 0, 0, 0.65)',
fill: 'rgba(0, 0, 0, 0.65)', textAlign: 'center',
textAlign: 'center', };
}; return (
return ( <Chart height={height} data={data} scale={cols} padding={[-16, 0, 16, 0]} forceFit={forceFit}>
<Chart height={height} data={data} scale={cols} padding={[-16, 0, 16, 0]} forceFit={forceFit}> <Coord type="polar" startAngle={-1.25 * Math.PI} endAngle={0.25 * Math.PI} radius={0.8} />
<Coord type="polar" startAngle={-1.25 * Math.PI} endAngle={0.25 * Math.PI} radius={0.8} /> <Axis name="1" line={undefined} />
<Axis name="1" line={undefined} /> <Axis
<Axis line={undefined}
line={undefined} tickLine={undefined}
tickLine={undefined} subTickLine={undefined}
subTickLine={undefined} name="value"
name="value" zIndex={2}
zIndex={2} label={{
label={{ offset: -12,
offset: -12, formatter,
formatter, textStyle,
textStyle, }}
/>
<Guide>
<Line
start={[3, 0.905]}
end={[3, 0.85]}
lineStyle={{
stroke: color,
lineDash: undefined,
lineWidth: 2,
}} }}
/> />
<Guide> <Line
<Line start={[5, 0.905]}
start={[3, 0.905]} end={[5, 0.85]}
end={[3, 0.85]} lineStyle={{
lineStyle={{ stroke: color,
stroke: color, lineDash: undefined,
lineDash: undefined, lineWidth: 3,
lineWidth: 2, }}
}}
/>
<Line
start={[5, 0.905]}
end={[5, 0.85]}
lineStyle={{
stroke: color,
lineDash: undefined,
lineWidth: 3,
}}
/>
<Line
start={[7, 0.905]}
end={[7, 0.85]}
lineStyle={{
stroke: color,
lineDash: undefined,
lineWidth: 3,
}}
/>
<Arc
start={[0, 0.965]}
end={[10, 0.965]}
style={{
stroke: bgColor,
lineWidth: 10,
}}
/>
<Arc
start={[0, 0.965]}
end={[data[0].value, 0.965]}
style={{
stroke: color,
lineWidth: 10,
}}
/>
<Html position={['50%', '95%']} html={renderHtml()} />
</Guide>
<Geom
line={false}
type="point"
position="value*1"
shape="pointer"
color={color}
active={false}
/> />
</Chart> <Line
); start={[7, 0.905]}
} end={[7, 0.85]}
} lineStyle={{
stroke: color,
lineDash: undefined,
lineWidth: 3,
}}
/>
<Arc
start={[0, 0.965]}
end={[10, 0.965]}
style={{
stroke: bgColor,
lineWidth: 10,
}}
/>
<Arc
start={[0, 0.965]}
end={[data[0].value, 0.965]}
style={{
stroke: color,
lineWidth: 10,
}}
/>
<Html position={['50%', '95%']} html={renderHtml()} />
</Guide>
<Geom
line={false}
type="point"
position="value*1"
shape="pointer"
color={color}
active={false}
/>
</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,105 +28,105 @@ export interface IMiniAreaProps { ...@@ -31,105 +28,105 @@ export interface IMiniAreaProps {
}[]; }[];
} }
class MiniArea extends React.Component<IMiniAreaProps> { const MiniArea: React.FC<MiniAreaProps> = props => {
render() { const {
const { height = 1,
height = 1, data = [],
data = [], forceFit = true,
forceFit = true, color = 'rgba(24, 144, 255, 0.2)',
color = 'rgba(24, 144, 255, 0.2)', borderColor = '#1089ff',
borderColor = '#1089ff', scale = { x: {}, y: {} },
scale = { x: {}, y: {} }, borderWidth = 2,
borderWidth = 2, line,
line, xAxis,
xAxis, yAxis,
yAxis, animate = true,
animate = true, } = props;
} = this.props;
const padding: [number, number, number, number] = [36, 5, 30, 5]; console.log(props);
const scaleProps = { const padding: [number, number, number, number] = [36, 5, 30, 5];
x: {
type: 'cat',
range: [0, 1],
...scale!.x,
},
y: {
min: 0,
...scale!.y,
},
};
const tooltip: [string, (...args: any[]) => { name?: string; value: string }] = [ const scaleProps = {
'x*y', x: {
(x: string, y: string) => ({ type: 'cat',
name: x, range: [0, 1],
value: y, ...scale.x,
}), },
]; y: {
min: 0,
...scale.y,
},
};
const chartHeight = height + 54; const tooltip: [string, (...args: any[]) => { name?: string; value: string }] = [
'x*y',
(x: string, y: string) => ({
name: x,
value: y,
}),
];
return ( const chartHeight = height + 54;
<div className={styles.miniChart} style={{ height }}>
<div className={styles.chartContent}> return (
{height > 0 && ( <div className={styles.miniChart} style={{ height }}>
<Chart <div className={styles.chartContent}>
animate={animate} {height > 0 && (
scale={scaleProps} <Chart
height={chartHeight} animate={animate}
forceFit={forceFit} scale={scaleProps}
data={data} height={chartHeight}
padding={padding} forceFit={forceFit}
> data={data}
<Axis padding={padding}
key="axis-x" >
name="x" <Axis
label={false} key="axis-x"
line={false} name="x"
tickLine={false} label={null}
grid={false} line={null}
{...xAxis} tickLine={null}
/> grid={null}
<Axis {...xAxis}
key="axis-y" />
name="y" <Axis
label={false} key="axis-y"
line={false} name="y"
tickLine={false} label={null}
grid={false} line={null}
{...yAxis} tickLine={null}
/> grid={null}
<Tooltip showTitle={false} crosshairs={false} /> {...yAxis}
/>
<Tooltip showTitle={false} crosshairs={false} />
<Geom
type="area"
position="x*y"
color={color}
tooltip={tooltip}
shape="smooth"
style={{
fillOpacity: 1,
}}
/>
{line ? (
<Geom <Geom
type="area" type="line"
position="x*y" position="x*y"
color={color}
tooltip={tooltip}
shape="smooth" shape="smooth"
style={{ color={borderColor}
fillOpacity: 1, size={borderWidth}
}} tooltip={false}
/> />
{line ? ( ) : (
<Geom <span style={{ display: 'none' }} />
type="line" )}
position="x*y" </Chart>
shape="smooth" )}
color={borderColor}
size={borderWidth}
tooltip={false}
/>
) : (
<span style={{ display: 'none' }} />
)}
</Chart>
)}
</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 });
onChange(newData); if (onChange) {
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;
onChange(data); if (onChange) {
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,109 +18,107 @@ const formItemLayout = { ...@@ -18,109 +18,107 @@ 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 null;
return; }
} const { getFieldDecorator, validateFields } = form;
const { getFieldDecorator, validateFields } = form; const onValidateForm = () => {
const onValidateForm = () => { validateFields((err: any, values: StateType['step']) => {
validateFields((err, values) => { if (!err && dispatch) {
if (!err && dispatch) { dispatch({
dispatch({ type: 'BLOCK_NAME_CAMEL_CASE/saveStepFormData',
type: 'BLOCK_NAME_CAMEL_CASE/saveStepFormData', payload: values,
payload: values, });
}); dispatch({
dispatch({ type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep', payload: 'confirm',
payload: 'confirm', });
}); }
} });
}); };
}; return (
return ( <Fragment>
<Fragment> <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
<Form layout="horizontal" className={styles.stepForm} hideRequiredMark> <Form.Item {...formItemLayout} label="付款账户">
<Form.Item {...formItemLayout} label="付款账户"> {getFieldDecorator('payAccount', {
{getFieldDecorator('payAccount', { initialValue: data.payAccount,
initialValue: data.payAccount, rules: [{ required: true, message: '请选择付款账户' }],
rules: [{ required: true, message: '请选择付款账户' }], })(
})( <Select placeholder="test@example.com">
<Select placeholder="test@example.com"> <Option value="ant-design@alipay.com">ant-design@alipay.com</Option>
<Option value="ant-design@alipay.com">ant-design@alipay.com</Option> </Select>,
</Select>, )}
)} </Form.Item>
</Form.Item> <Form.Item {...formItemLayout} label="收款账户">
<Form.Item {...formItemLayout} label="收款账户"> <Input.Group compact>
<Input.Group compact> <Select defaultValue="alipay" style={{ width: 100 }}>
<Select defaultValue="alipay" style={{ width: 100 }}> <Option value="alipay">支付宝</Option>
<Option value="alipay">支付宝</Option> <Option value="bank">银行账户</Option>
<Option value="bank">银行账户</Option> </Select>
</Select> {getFieldDecorator('receiverAccount', {
{getFieldDecorator('receiverAccount', { initialValue: data.receiverAccount,
initialValue: data.receiverAccount,
rules: [
{ required: true, message: '请输入收款人账户' },
{ type: 'email', message: '账户名应为邮箱格式' },
],
})(<Input style={{ width: 'calc(100% - 100px)' }} placeholder="test@example.com" />)}
</Input.Group>
</Form.Item>
<Form.Item {...formItemLayout} label="收款人姓名">
{getFieldDecorator('receiverName', {
initialValue: data.receiverName,
rules: [{ required: true, message: '请输入收款人姓名' }],
})(<Input placeholder="请输入收款人姓名" />)}
</Form.Item>
<Form.Item {...formItemLayout} label="转账金额">
{getFieldDecorator('amount', {
initialValue: data.amount,
rules: [ rules: [
{ required: true, message: '请输入转账金额' }, { required: true, message: '请输入收款人账户' },
{ { type: 'email', message: '账户名应为邮箱格式' },
pattern: /^(\d+)((?:\.\d+)?)$/,
message: '请输入合法金额数字',
},
], ],
})(<Input prefix="￥" placeholder="请输入金额" />)} })(<Input style={{ width: 'calc(100% - 100px)' }} placeholder="test@example.com" />)}
</Form.Item> </Input.Group>
<Form.Item </Form.Item>
wrapperCol={{ <Form.Item {...formItemLayout} label="收款人姓名">
xs: { span: 24, offset: 0 }, {getFieldDecorator('receiverName', {
sm: { initialValue: data.receiverName,
span: formItemLayout.wrapperCol.span, rules: [{ required: true, message: '请输入收款人姓名' }],
offset: formItemLayout.labelCol.span, })(<Input placeholder="请输入收款人姓名" />)}
</Form.Item>
<Form.Item {...formItemLayout} label="转账金额">
{getFieldDecorator('amount', {
initialValue: data.amount,
rules: [
{ required: true, message: '请输入转账金额' },
{
pattern: /^(\d+)((?:\.\d+)?)$/,
message: '请输入合法金额数字',
}, },
}} ],
label="" })(<Input prefix="￥" placeholder="请输入金额" />)}
> </Form.Item>
<Button type="primary" onClick={onValidateForm}> <Form.Item
下一步 wrapperCol={{
</Button> xs: { span: 24, offset: 0 },
</Form.Item> sm: {
</Form> span: formItemLayout.wrapperCol.span,
<Divider style={{ margin: '40px 0 24px' }} /> offset: formItemLayout.labelCol.span,
<div className={styles.desc}> },
<h3>说明</h3> }}
<h4>转账到支付宝账户</h4> label=""
<p> >
如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。 <Button type="primary" onClick={onValidateForm}>
</p> 下一步
<h4>转账到银行卡</h4> </Button>
<p> </Form.Item>
如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。 </Form>
</p> <Divider style={{ margin: '40px 0 24px' }} />
</div> <div className={styles.desc}>
</Fragment> <h3>说明</h3>
); <h4>转账到支付宝账户</h4>
} <p>
} 如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
</p>
<h4>转账到银行卡</h4>
<p>
如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
</p>
</div>
</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,102 +16,100 @@ const formItemLayout = { ...@@ -16,102 +16,100 @@ 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 null;
return; }
const { getFieldDecorator, validateFields } = form;
const onPrev = () => {
if (dispatch) {
dispatch({
type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
payload: 'info',
});
} }
const { getFieldDecorator, validateFields } = form; };
const onPrev = () => { const onValidateForm = (e: React.FormEvent) => {
if (dispatch) { e.preventDefault();
dispatch({ validateFields((err, values) => {
type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep', if (!err) {
payload: 'info', if (dispatch) {
}); dispatch({
} type: 'BLOCK_NAME_CAMEL_CASE/submitStepForm',
}; payload: {
const onValidateForm = (e: React.FormEvent) => { ...data,
e.preventDefault(); ...values,
validateFields((err, values) => { },
if (!err) { });
if (dispatch) {
dispatch({
type: 'BLOCK_NAME_CAMEL_CASE/submitStepForm',
payload: {
...data,
...values,
},
});
}
} }
}); }
}; });
return ( };
<Form layout="horizontal" className={styles.stepForm}> return (
<Alert <Form layout="horizontal" className={styles.stepForm}>
closable <Alert
showIcon closable
message="确认转账后，资金将直接打入对方账户，无法退回。" showIcon
style={{ marginBottom: 24 }} message="确认转账后，资金将直接打入对方账户，无法退回。"
/> style={{ marginBottom: 24 }}
<Form.Item {...formItemLayout} className={styles.stepFormText} label="付款账户"> />
{data.payAccount} <Form.Item {...formItemLayout} className={styles.stepFormText} label="付款账户">
</Form.Item> {data.payAccount}
<Form.Item {...formItemLayout} className={styles.stepFormText} label="收款账户"> </Form.Item>
{data.receiverAccount} <Form.Item {...formItemLayout} className={styles.stepFormText} label="收款账户">
</Form.Item> {data.receiverAccount}
<Form.Item {...formItemLayout} className={styles.stepFormText} label="收款人姓名"> </Form.Item>
{data.receiverName} <Form.Item {...formItemLayout} className={styles.stepFormText} label="收款人姓名">
</Form.Item> {data.receiverName}
<Form.Item {...formItemLayout} className={styles.stepFormText} label="转账金额"> </Form.Item>
<span className={styles.money}>{data.amount}</span> <Form.Item {...formItemLayout} className={styles.stepFormText} label="转账金额">
</Form.Item> <span className={styles.money}>{data.amount}</span>
<Divider style={{ margin: '24px 0' }} /> </Form.Item>
<Form.Item {...formItemLayout} label="支付密码" required={false}> <Divider style={{ margin: '24px 0' }} />
{getFieldDecorator('password', { <Form.Item {...formItemLayout} label="支付密码" required={false}>
initialValue: '123456', {getFieldDecorator('password', {
rules: [ initialValue: '123456',
{ rules: [
required: true, {
message: '需要支付密码才能进行支付', required: true,
}, message: '需要支付密码才能进行支付',
],
})(<Input type="password" autoComplete="off" style={{ width: '80%' }} />)}
</Form.Item>
<Form.Item
style={{ marginBottom: 8 }}
wrapperCol={{
xs: { span: 24, offset: 0 },
sm: {
span: formItemLayout.wrapperCol.span,
offset: formItemLayout.labelCol.span,
}, },
}} ],
label="" })(<Input type="password" autoComplete="off" style={{ width: '80%' }} />)}
> </Form.Item>
<Button type="primary" onClick={onValidateForm} loading={submitting}> <Form.Item
提交 style={{ marginBottom: 8 }}
</Button> wrapperCol={{
<Button onClick={onPrev} style={{ marginLeft: 8 }}> xs: { span: 24, offset: 0 },
上一步 sm: {
</Button> span: formItemLayout.wrapperCol.span,
</Form.Item> offset: formItemLayout.labelCol.span,
</Form> },
); }}
} label=""
} >
<Button type="primary" onClick={onValidateForm} loading={submitting}>
提交
</Button>
<Button onClick={onPrev} style={{ marginLeft: 8 }}>
上一步
</Button>
</Form.Item>
</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,97 +2,82 @@ import { Button, Col, Row } from 'antd'; ...@@ -2,97 +2,82 @@ 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, if (!data) {
}: { return null;
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) {
return;
}
const onFinish = () => {
if (dispatch) {
dispatch({
type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
payload: 'info',
});
}
};
const information = (
<div className={styles.information}>
<Row>
<Col xs={24} sm={8} className={styles.label}>
付款账户：
</Col>
<Col xs={24} sm={16}>
{data.payAccount}
</Col>
</Row>
<Row>
<Col xs={24} sm={8} className={styles.label}>
收款账户：
</Col>
<Col xs={24} sm={16}>
{data.receiverAccount}
</Col>
</Row>
<Row>
<Col xs={24} sm={8} className={styles.label}>
收款人姓名：
</Col>
<Col xs={24} sm={16}>
{data.receiverName}
</Col>
</Row>
<Row>
<Col xs={24} sm={8} className={styles.label}>
转账金额：
</Col>
<Col xs={24} sm={16}>
<span className={styles.money}>{data.amount}</span> 元
</Col>
</Row>
</div>
);
const actions = (
<Fragment>
<Button type="primary" onClick={onFinish}>
再转一笔
</Button>
<Button>查看账单</Button>
</Fragment>
);
return (
<Result
type="success"
title="操作成功"
description="预计两小时内到账"
extra={information}
actions={actions}
className={styles.result}
/>
);
} }
} const onFinish = () => {
if (dispatch) {
dispatch({
type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep',
payload: 'info',
});
}
};
const information = (
<div className={styles.information}>
<Row>
<Col xs={24} sm={8} className={styles.label}>
付款账户：
</Col>
<Col xs={24} sm={16}>
{data.payAccount}
</Col>
</Row>
<Row>
<Col xs={24} sm={8} className={styles.label}>
收款账户：
</Col>
<Col xs={24} sm={16}>
{data.receiverAccount}
</Col>
</Row>
<Row>
<Col xs={24} sm={8} className={styles.label}>
收款人姓名：
</Col>
<Col xs={24} sm={16}>
{data.receiverName}
</Col>
</Row>
<Row>
<Col xs={24} sm={8} className={styles.label}>
转账金额：
</Col>
<Col xs={24} sm={16}>
<span className={styles.money}>{data.amount}</span> 元
</Col>
</Row>
</div>
);
const actions = (
<Fragment>
<Button type="primary" onClick={onFinish}>
再转一笔
</Button>
<Button>查看账单</Button>
</Fragment>
);
return (
<Result
type="success"
title="操作成功"
description="预计两小时内到账"
extra={information}
actions={actions}
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