Commit 9a8370ca authored by 陈帅's avatar 陈帅

fix all eslint error

parent a6f14781
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -21,69 +21,6 @@ const avatars = [
'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
];
const getNotice = [
{
id: 'xxx1',
title: titles[0],
logo: avatars[0],
description: '那是一种内在的东西,他们到达不了,也无法触及的',
updatedAt: new Date(),
member: '科学搬砖组',
href: '',
memberLink: '',
},
{
id: 'xxx2',
title: titles[1],
logo: avatars[1],
description: '希望是一个好东西,也许是最好的,好东西是不会消亡的',
updatedAt: new Date('2017-07-24'),
member: '全组都是吴彦祖',
href: '',
memberLink: '',
},
{
id: 'xxx3',
title: titles[2],
logo: avatars[2],
description: '城镇中有那么多的酒馆,她却偏偏走进了我的酒馆',
updatedAt: new Date(),
member: '中二少女团',
href: '',
memberLink: '',
},
{
id: 'xxx4',
title: titles[3],
logo: avatars[3],
description: '那时候我只会想自己想要什么,从不想自己拥有什么',
updatedAt: new Date('2017-07-23'),
member: '程序员日常',
href: '',
memberLink: '',
},
{
id: 'xxx5',
title: titles[4],
logo: avatars[4],
description: '凛冬将至',
updatedAt: new Date('2017-07-23'),
member: '高逼格设计天团',
href: '',
memberLink: '',
},
{
id: 'xxx6',
title: titles[5],
logo: avatars[5],
description: '生命就像一盒巧克力,结果往往出人意料',
updatedAt: new Date('2017-07-23'),
member: '骗你来学计算机',
href: '',
memberLink: '',
},
];
const covers = [
'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
......
......@@ -4,7 +4,7 @@ import React, { Component } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import AvatarList from '../AvatarList';
import { ListItemDataType } from '../../data';
import { ListItemDataType } from '../../data.d';
import { ModalState } from '../../model';
import styles from './index.less';
......
......@@ -93,6 +93,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
tabKey: 'articles',
};
public input: Input | null | undefined = undefined;
componentDidMount() {
const { dispatch } = this.props;
dispatch({
......@@ -138,8 +140,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
});
};
public input: Input | null | undefined;
renderChildrenByTabKey = (tabKey: BLOCK_NAME_CAMEL_CASEState['tabKey']) => {
if (tabKey === 'projects') {
return <Projects />;
......
......@@ -72,6 +72,8 @@ interface BaseViewProps extends FormComponentProps {
currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
}))
class BaseView extends Component<BaseViewProps> {
view: HTMLDivElement | undefined = undefined;
componentDidMount() {
this.setBaseInfo();
}
......@@ -113,8 +115,6 @@ class BaseView extends Component<BaseViewProps> {
});
};
view: HTMLDivElement | undefined;
render() {
const {
form: { getFieldDecorator },
......
......@@ -34,6 +34,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
PAGE_NAME_UPPER_CAMEL_CASEProps,
PAGE_NAME_UPPER_CAMEL_CASEState
> {
main: HTMLDivElement | undefined = undefined;
constructor(props: PAGE_NAME_UPPER_CAMEL_CASEProps) {
super(props);
const menuMap = {
......@@ -109,8 +111,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
});
};
main: HTMLDivElement | undefined;
renderChildren = () => {
const { selectKey } = this.state;
switch (selectKey) {
......
......@@ -12,23 +12,27 @@
"dev": "umi dev"
},
"dependencies": {
"@ant-design/pro-layout": "^4.5.5",
"@antv/data-set": "^0.10.2",
"antd": "^3.16.3",
"bizcharts": "^3.5.3-beta.0",
"bizcharts-plugin-slider": "^2.1.1-beta.1",
"classnames": "^2.2.6",
"dva": "^2.4.0",
"@types/lodash.debounce": "^4.0.6",
"lodash.debounce": "^4.0.8",
"moment": "^2.22.2",
"numeral": "^2.0.6",
"react": "^16.6.3",
"react-fittext": "^1.0.0",
"redux": "^4.0.1",
"umi-plugin-react": "^1.7.2",
"umi-request": "^1.0.0"
},
"devDependencies": {
"@types/numeral": "^0.0.25",
"umi": "^2.6.9",
"umi-plugin-block-dev": "^1.1.0",
"umi-plugin-react": "^1.7.2"
"umi-plugin-block-dev": "^1.1.0"
},
"blockConfig": {
"specVersion": "0.1"
......
import moment from 'moment';
import { IAnalysisData, IRadarData, IVisitData } from './data.d';
import { AnalysisData, RadarData, VisitDataType } from './data.d';
// mock data
const visitData: IVisitData[] = [];
const visitData: VisitDataType[] = [];
const beginDay = new Date().getTime();
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
......@@ -159,7 +159,7 @@ const radarOriginData = [
},
];
const radarData: IRadarData[] = [];
const radarData: RadarData[] = [];
const radarTitleMap = {
ref: '引用',
koubei: '口碑',
......@@ -179,7 +179,7 @@ radarOriginData.forEach(item => {
});
});
const getFakeChartData: IAnalysisData = {
const getFakeChartData: AnalysisData = {
visitData,
visitData2,
salesData,
......
import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
import React, { Component } from 'react';
import Bind from 'lodash-decorators/bind';
import Debounce from 'lodash-decorators/debounce';
import Debounce from 'lodash.debounce';
import autoHeight from '../autoHeight';
import styles from '../index.less';
export interface IBarProps {
export interface BarProps {
title: React.ReactNode;
color?: string;
padding?: [number, number, number, number];
......@@ -21,7 +20,7 @@ export interface IBarProps {
}
class Bar extends Component<
IBarProps,
BarProps,
{
autoHideXLabels: boolean;
}
......@@ -30,29 +29,11 @@ class Bar extends Component<
autoHideXLabels: false,
};
root: HTMLDivElement | undefined;
root: HTMLDivElement | undefined = undefined;
node: HTMLDivElement | undefined;
node: HTMLDivElement | undefined = undefined;
componentDidMount() {
window.addEventListener('resize', this.resize, { passive: true });
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
}
handleRoot = (n: HTMLDivElement) => {
this.root = n;
};
handleRef = (n: HTMLDivElement) => {
this.node = n;
};
@Bind()
@Debounce(400)
resize() {
resize = Debounce(() => {
if (!this.node || !this.node.parentNode) {
return;
}
......@@ -75,8 +56,24 @@ class Bar extends Component<
autoHideXLabels: false,
});
}
}, 500);
componentDidMount() {
window.addEventListener('resize', this.resize, { passive: true });
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
}
handleRoot = (n: HTMLDivElement) => {
this.root = n;
};
handleRef = (n: HTMLDivElement) => {
this.node = n;
};
render() {
const {
height = 1,
......@@ -120,8 +117,8 @@ class Bar extends Component<
<Axis
name="x"
title={false}
label={autoHideXLabels ? false : {}}
tickLine={autoHideXLabels ? false : {}}
label={autoHideXLabels ? undefined : {}}
tickLine={autoHideXLabels ? undefined : {}}
/>
<Axis name="y" min={0} />
<Tooltip showTitle={false} crosshairs={false} />
......
......@@ -8,7 +8,7 @@ type totalType = () => React.ReactNode;
const renderTotal = (total?: number | totalType | React.ReactNode) => {
if (!total) {
return;
return null;
}
let totalDom;
switch (typeof total) {
......@@ -24,7 +24,7 @@ const renderTotal = (total?: number | totalType | React.ReactNode) => {
return totalDom;
};
export interface IChartCardProps extends CardProps {
export interface ChartCardProps extends CardProps {
title: React.ReactNode;
action?: React.ReactNode;
total?: React.ReactNode | number | (() => React.ReactNode | number);
......@@ -34,7 +34,7 @@ export interface IChartCardProps extends CardProps {
style?: React.CSSProperties;
}
class ChartCard extends React.Component<IChartCardProps> {
class ChartCard extends React.Component<ChartCardProps> {
renderContent = () => {
const { contentHeight, title, avatar, action, total, footer, children, loading } = this.props;
if (loading) {
......
import React from 'react';
import styles from './index.less';
export interface IFieldProps {
export interface FieldProps {
label: React.ReactNode;
value: React.ReactNode;
style?: React.CSSProperties;
}
const Field: React.SFC<IFieldProps> = ({ label, value, ...rest }) => (
const Field: React.SFC<FieldProps> = ({ label, value, ...rest }) => (
<div className={styles.field} {...rest}>
<span className={styles.label}>{label}</span>
<span className={styles.number}>{value}</span>
......
......@@ -5,7 +5,7 @@ import autoHeight from '../autoHeight';
const { Arc, Html, Line } = Guide;
export interface IGaugeProps {
export interface GaugeProps {
title: React.ReactNode;
color?: string;
height?: number;
......@@ -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) {
let point = cfg.points[0];
point = (this as any).parsePoint(point);
......@@ -61,10 +62,10 @@ Shape.registerShape!('point', 'pointer', {
},
});
},
});
});
}
class Gauge extends React.Component<IGaugeProps> {
render() {
const Gauge: React.FC<GaugeProps> = props => {
const {
title,
height = 1,
......@@ -73,7 +74,7 @@ class Gauge extends React.Component<IGaugeProps> {
formatter = defaultFormatter,
color = '#2F9CFF',
bgColor = '#F0F2F5',
} = this.props;
} = props;
const cols = {
value: {
type: 'linear',
......@@ -83,6 +84,7 @@ class Gauge extends React.Component<IGaugeProps> {
nice: true,
},
};
const data = [{ value: percent / 10 }];
const renderHtml = () => `
<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>
......@@ -90,7 +92,6 @@ class Gauge extends React.Component<IGaugeProps> {
${(data[0].value * 10).toFixed(2)}%
</p>
</div>`;
const data = [{ value: percent / 10 }];
const textStyle: {
fontSize: number;
fill: string;
......@@ -100,6 +101,7 @@ class Gauge extends React.Component<IGaugeProps> {
fill: 'rgba(0, 0, 0, 0.65)',
textAlign: 'center',
};
return (
<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} />
......@@ -172,7 +174,6 @@ class Gauge extends React.Component<IGaugeProps> {
/>
</Chart>
);
}
}
};
export default autoHeight()(Gauge);
import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
import { Axis, Chart, Geom, Tooltip, AxisProps } from 'bizcharts';
import React from 'react';
import autoHeight from '../autoHeight';
import styles from '../index.less';
export interface IAxis {
title: any;
line: any;
gridAlign: any;
labels: any;
tickLine: any;
grid: any;
}
export interface IMiniAreaProps {
export interface MiniAreaProps {
color?: string;
height?: number;
borderColor?: string;
line?: boolean;
animate?: boolean;
xAxis?: IAxis;
xAxis?: AxisProps;
forceFit?: boolean;
scale?: { x: any; y: any };
yAxis?: IAxis;
scale?: {
x?: {
tickCount: number;
};
y?: {
tickCount: number;
};
};
yAxis?: Partial<AxisProps>;
borderWidth?: number;
data: {
x: number | string;
......@@ -30,8 +28,7 @@ export interface IMiniAreaProps {
}[];
}
class MiniArea extends React.Component<IMiniAreaProps> {
render() {
const MiniArea: React.FC<MiniAreaProps> = props => {
const {
height = 1,
data = [],
......@@ -44,7 +41,7 @@ class MiniArea extends React.Component<IMiniAreaProps> {
xAxis,
yAxis,
animate = true,
} = this.props;
} = props;
const padding: [number, number, number, number] = [36, 5, 30, 5];
......@@ -52,11 +49,11 @@ class MiniArea extends React.Component<IMiniAreaProps> {
x: {
type: 'cat',
range: [0, 1],
...scale!.x,
...scale.x,
},
y: {
min: 0,
...scale!.y,
...scale.y,
},
};
......@@ -85,19 +82,19 @@ class MiniArea extends React.Component<IMiniAreaProps> {
<Axis
key="axis-x"
name="x"
label={false}
line={false}
tickLine={false}
grid={false}
label={undefined}
line={undefined}
tickLine={undefined}
grid={undefined}
{...xAxis}
/>
<Axis
key="axis-y"
name="y"
label={false}
line={false}
tickLine={false}
grid={false}
label={undefined}
line={undefined}
tickLine={undefined}
grid={undefined}
{...yAxis}
/>
<Tooltip showTitle={false} crosshairs={false} />
......@@ -128,7 +125,6 @@ class MiniArea extends React.Component<IMiniAreaProps> {
</div>
</div>
);
}
}
};
export default autoHeight()(MiniArea);
......@@ -4,7 +4,7 @@ import React from 'react';
import autoHeight from '../autoHeight';
import styles from '../index.less';
export interface IMiniBarProps {
export interface MiniBarProps {
color?: string;
height?: number;
data: {
......@@ -15,9 +15,8 @@ export interface IMiniBarProps {
style?: React.CSSProperties;
}
class MiniBar extends React.Component<IMiniBarProps> {
render() {
const { height = 0, forceFit = true, color = '#1890FF', data = [] } = this.props;
const MiniBar: React.FC<MiniBarProps> = props => {
const { height = 0, forceFit = true, color = '#1890FF', data = [] } = props;
const scale = {
x: {
......@@ -44,19 +43,12 @@ class MiniBar extends React.Component<IMiniBarProps> {
return (
<div className={styles.miniChart} style={{ height }}>
<div className={styles.chartContent}>
<Chart
scale={scale}
height={chartHeight}
forceFit={forceFit}
data={data}
padding={padding}
>
<Chart scale={scale} height={chartHeight} forceFit={forceFit} data={data} padding={padding}>
<Tooltip showTitle={false} crosshairs={false} />
<Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
</Chart>
</div>
</div>
);
}
}
};
export default autoHeight()(MiniBar);
......@@ -2,7 +2,7 @@ import React from 'react';
import { Tooltip } from 'antd';
import styles from './index.less';
export interface IMiniProgressProps {
export interface MiniProgressProps {
target: number;
targetLabel?: string;
color?: string;
......@@ -11,7 +11,7 @@ export interface IMiniProgressProps {
style?: React.CSSProperties;
}
const MiniProgress: React.SFC<IMiniProgressProps> = ({
const MiniProgress: React.SFC<MiniProgressProps> = ({
targetLabel,
target,
color = 'rgb(19, 194, 194)',
......@@ -36,6 +36,6 @@ const MiniProgress: React.SFC<IMiniProgressProps> = ({
/>
</div>
</div>
);
);
export default MiniProgress;
import { Chart, Coord, Geom, Tooltip } from 'bizcharts';
import React, { Component } from 'react';
import Bind from 'lodash-decorators/bind';
import { DataView } from '@antv/data-set';
import Debounce from 'lodash-decorators/debounce';
import Debounce from 'lodash.debounce';
import { Divider } from 'antd';
import ReactFitText from 'react-fittext';
import classNames from 'classnames';
import autoHeight from '../autoHeight';
import styles from './index.less';
export interface IPieProps {
export interface PieProps {
animate?: boolean;
color?: string;
colors?: string[];
......@@ -35,21 +34,46 @@ export interface IPieProps {
valueFormat?: (value: string) => string | React.ReactNode;
subTitle?: React.ReactNode;
}
interface IPieState {
interface PieState {
legendData: { checked: boolean; x: string; color: string; percent: number; y: string }[];
legendBlock: boolean;
}
class Pie extends Component<IPieProps, IPieState> {
state: IPieState = {
class Pie extends Component<PieProps, PieState> {
state: PieState = {
legendData: [],
legendBlock: false,
};
requestRef: number | undefined;
requestRef: number | undefined = undefined;
root!: HTMLDivElement;
root: HTMLDivElement | undefined = undefined;
chart: G2.Chart | undefined;
chart: G2.Chart | undefined = undefined;
// for window resize auto responsive legend
resize = Debounce(() => {
const { hasLegend } = this.props;
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,
});
}
}, 400);
componentDidMount() {
window.addEventListener(
......@@ -61,7 +85,7 @@ class Pie extends Component<IPieProps, IPieState> {
);
}
componentDidUpdate(preProps: IPieProps) {
componentDidUpdate(preProps: PieProps) {
const { data } = this.props;
if (data !== preProps.data) {
// because of charts data create when rendered
......@@ -93,7 +117,7 @@ class Pie extends Component<IPieProps, IPieState> {
if (!this.chart) return;
const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
if (!geom) return;
const items = geom.get('dataArray') || []; // 获取图形对应的
const items = (geom as any).get('dataArray') || []; // 获取图形对应的
const legendData = items.map((item: { color: any; _origin: any }[]) => {
/* eslint no-underscore-dangle:0 */
......@@ -130,33 +154,6 @@ class Pie extends Component<IPieProps, IPieState> {
});
};
// for window resize auto responsive legend
@Bind()
@Debounce(300)
resize() {
const { hasLegend } = this.props;
const { legendBlock } = this.state;
if (!hasLegend || !this.root) {
window.removeEventListener('resize', this.resize);
return;
}
if (
this.root &&
this.root.parentNode &&
(this.root.parentNode as HTMLElement).clientWidth <= 380
) {
if (!legendBlock) {
this.setState({
legendBlock: true,
});
}
} else if (legendBlock) {
this.setState({
legendBlock: false,
});
}
}
render() {
const {
valueFormat,
......
import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts';
import React, { Component } from 'react';
import Bind from 'lodash-decorators/bind';
import DataSet from '@antv/data-set';
import Debounce from 'lodash-decorators/debounce';
import Debounce from 'lodash.debounce';
import classNames from 'classnames';
import autoHeight from '../autoHeight';
import styles from './index.less';
......@@ -13,7 +12,7 @@ import styles from './index.less';
const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';
export interface ITagCloudProps {
export interface TagCloudProps {
data: {
name: string;
value: number;
......@@ -23,26 +22,26 @@ export interface ITagCloudProps {
style?: React.CSSProperties;
}
interface ITagCloudState {
interface TagCloudState {
dv: any;
height?: number;
width: number;
}
class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
class TagCloud extends Component<TagCloudProps, TagCloudState> {
state = {
dv: null,
height: 0,
width: 0,
};
isUnmount!: boolean;
isUnmount: boolean = false;
requestRef!: number;
requestRef: number = 0;
root: HTMLDivElement | undefined;
root: HTMLDivElement | undefined = undefined;
imageMask: HTMLImageElement | undefined;
imageMask: HTMLImageElement | undefined = undefined;
componentDidMount() {
requestAnimationFrame(() => {
......@@ -52,7 +51,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
window.addEventListener('resize', this.resize, { passive: true });
}
componentDidUpdate(preProps?: ITagCloudProps) {
componentDidUpdate(preProps?: TagCloudProps) {
const { data } = this.props;
if (preProps && JSON.stringify(preProps.data) !== JSON.stringify(data)) {
this.renderChart(this.props);
......@@ -84,7 +83,8 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
origin?: any;
color?: any;
}) {
return Object.assign({}, cfg.style, {
return {
...cfg.style,
fillOpacity: cfg.opacity,
fontSize: cfg.origin._origin.size,
rotate: cfg.origin._origin.rotate,
......@@ -93,7 +93,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
fontFamily: cfg.origin._origin.font,
fill: cfg.color,
textBaseline: 'Alphabetic',
});
};
}
(Shape as any).registerShape('point', 'cloud', {
......@@ -103,18 +103,17 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
) {
const attrs = getTextAttrs(cfg);
return container.addShape('text', {
attrs: Object.assign(attrs, {
attrs: {
...attrs,
x: cfg.x,
y: cfg.y,
}),
},
});
},
});
};
@Bind()
@Debounce(500)
renderChart(nextProps: ITagCloudProps) {
renderChart = Debounce((nextProps: TagCloudProps) => {
// const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
const { data, height } = nextProps || this.props;
......@@ -141,8 +140,8 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
return 0;
},
fontSize(d: { value: number }) {
// eslint-disable-next-line
return Math.pow((d.value - min) / (max - min), 2) * (17.5 - 5) + 5;
const size = ((d.value - min) / (max - min)) ** 2;
return size * (17.5 - 5) + 5;
},
});
......@@ -166,7 +165,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
} else {
onload();
}
}
}, 500);
render() {
const { className, height } = this.props;
......
......@@ -6,7 +6,7 @@ import Slider from 'bizcharts-plugin-slider';
import autoHeight from '../autoHeight';
import styles from './index.less';
export interface ITimelineChartProps {
export interface TimelineChartProps {
data: {
x: number;
y1: number;
......@@ -20,8 +20,7 @@ export interface ITimelineChartProps {
borderWidth?: number;
}
class TimelineChart extends React.Component<ITimelineChartProps> {
render() {
const TimelineChart: React.FC<TimelineChartProps> = props => {
const {
title,
height = 400,
......@@ -32,7 +31,7 @@ class TimelineChart extends React.Component<ITimelineChartProps> {
},
borderWidth = 2,
data: sourceData,
} = this.props;
} = props;
const data = Array.isArray(sourceData) ? sourceData : [{ x: 0, y1: 0, y2: 0 }];
......@@ -128,7 +127,6 @@ class TimelineChart extends React.Component<ITimelineChartProps> {
</div>
</div>
);
}
}
};
export default autoHeight()(TimelineChart);
......@@ -7,7 +7,7 @@ import styles from './index.less';
/* eslint no-mixed-operators: 0 */
// riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90
export interface IWaterWaveProps {
export interface WaterWaveProps {
title: React.ReactNode;
color?: string;
height?: number;
......@@ -15,16 +15,16 @@ export interface IWaterWaveProps {
style?: React.CSSProperties;
}
class WaterWave extends Component<IWaterWaveProps> {
class WaterWave extends Component<WaterWaveProps> {
state = {
radio: 1,
};
timer: number = 0;
root: HTMLDivElement | undefined | null;
root: HTMLDivElement | undefined | null = null;
node: HTMLCanvasElement | undefined | null;
node: HTMLCanvasElement | undefined | null = null;
componentDidMount() {
this.renderChart();
......@@ -38,7 +38,7 @@ class WaterWave extends Component<IWaterWaveProps> {
);
}
componentDidUpdate(props: IWaterWaveProps) {
componentDidUpdate(props: WaterWaveProps) {
const { percent } = this.props;
if (props.percent !== percent) {
// 不加这个会造成绘制缓慢
......
......@@ -6,7 +6,8 @@ export type IReactComponent<P = any> =
| React.ClassicComponentClass<P>;
function computeHeight(node: HTMLDivElement) {
node.style.height = '100%';
const { style } = node;
style.height = '100%';
const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10);
const padding =
parseInt(`${getComputedStyle(node).paddingTop}`, 10) +
......@@ -14,7 +15,7 @@ function computeHeight(node: HTMLDivElement) {
return totalHeight - padding;
}
function getAutoHeight(n: HTMLDivElement) {
function getAutoHeight(n: HTMLDivElement | undefined) {
if (!n) {
return 0;
}
......@@ -30,26 +31,25 @@ function getAutoHeight(n: HTMLDivElement) {
return height;
}
interface IAutoHeightProps {
interface AutoHeightProps {
height?: number;
}
function autoHeight() {
return function<P extends IAutoHeightProps> (
return <P extends AutoHeightProps>(
WrappedComponent: React.ComponentClass<P> | React.SFC<P>,
): React.ComponentClass<P> {
class AutoHeightComponent extends React.Component<P & IAutoHeightProps> {
): React.ComponentClass<P> => {
class AutoHeightComponent extends React.Component<P & AutoHeightProps> {
state = {
computedHeight: 0,
};
root!: HTMLDivElement;
root: HTMLDivElement | undefined = undefined;
componentDidMount() {
const { height } = this.props;
if (!height) {
let h = getAutoHeight(this.root);
// eslint-disable-next-line
this.setState({ computedHeight: h });
if (h < 1) {
h = getAutoHeight(this.root);
......
......@@ -3,14 +3,12 @@ import { Col, Icon, Row, Tooltip } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import React from 'react';
import numeral from 'numeral';
import Charts from './Charts';
import { IVisitData } from '../data.d';
import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from './Charts';
import { VisitDataType } from '../data.d';
import Trend from './Trend';
import Yuan from '../utils/Yuan';
import styles from '../style.less';
const { ChartCard, MiniArea, MiniBar, MiniProgress, Field } = Charts;
const topColResponsiveProps = {
xs: 24,
sm: 12,
......@@ -20,7 +18,7 @@ const topColResponsiveProps = {
style: { marginBottom: 24 },
};
const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: IVisitData[] }) => (
const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: VisitDataType[] }) => (
<Row gutter={24}>
<Col {...topColResponsiveProps}>
<ChartCard
......
import { Card, Col, Row, Tabs } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import React from 'react';
import { IOfflineChartData, IOfflineData } from '../data';
import { OfflineChartData, OfflineDataType } from '../data.d';
import Charts from './Charts';
import { TimelineChart, Pie } from './Charts';
import NumberInfo from './NumberInfo';
import styles from '../style.less';
const { TimelineChart, Pie } = Charts;
const CustomTab = ({
data,
currentTabKey: currentKey,
}: {
data: IOfflineData;
data: OfflineDataType;
currentTabKey: string;
}) => (
<Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
......@@ -55,8 +53,8 @@ const OfflineData = ({
}: {
activeKey: string;
loading: boolean;
offlineData: IOfflineData[];
offlineChartData: IOfflineChartData[];
offlineData: OfflineDataType[];
offlineChartData: OfflineChartData[];
handleTabChange: (activeKey: string) => void;
}) => (
<Card loading={loading} className={styles.offlineCard} bordered={false} style={{ marginTop: 32 }}>
......
......@@ -3,13 +3,11 @@ import { Card, Radio } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { RadioChangeEvent } from 'antd/es/radio';
import React from 'react';
import { ISalesData } from '../data';
import Charts from './Charts';
import { VisitDataType } from '../data.d';
import { Pie } from './Charts';
import Yuan from '../utils/Yuan';
import styles from '../style.less';
const { Pie } = Charts;
const ProportionSales = ({
dropdownGroup,
salesType,
......@@ -20,7 +18,7 @@ const ProportionSales = ({
loading: boolean;
dropdownGroup: React.ReactNode;
salesType: 'all' | 'online' | 'stores';
salesPieData: ISalesData[];
salesPieData: VisitDataType[];
handleChangeSalesType?: (e: RadioChangeEvent) => void;
}) => (
<Card
......
......@@ -4,12 +4,10 @@ import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import { RangePickerValue } from 'antd/es/date-picker/interface';
import React from 'react';
import numeral from 'numeral';
import { ISalesData } from '../data';
import Charts from './Charts';
import { VisitDataType } from '../data.d';
import { Bar } from './Charts';
import styles from '../style.less';
const { Bar } = Charts;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
......@@ -31,7 +29,7 @@ const SalesCard = ({
}: {
rangePickerValue: RangePickerValue;
isActive: (key: 'today' | 'week' | 'month' | 'year') => string;
salesData: ISalesData[];
salesData: VisitDataType[];
loading: boolean;
handleRangePickerChange: (dates: RangePickerValue, dateStrings: [string, string]) => void;
selectDate: (key: 'today' | 'week' | 'month' | 'year') => void;
......
......@@ -2,15 +2,13 @@ import { Card, Col, Icon, Row, Table, Tooltip } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import React from 'react';
import numeral from 'numeral';
import { ISearchData, IVisitData2 } from '../data';
import { SearchDataType, VisitDataType } from '../data.d';
import Charts from './Charts';
import { MiniArea } from './Charts';
import NumberInfo from './NumberInfo';
import Trend from './Trend';
import styles from '../style.less';
const { MiniArea } = Charts;
const columns = [
{
title: <FormattedMessage id="BLOCK_NAME.table.rank" defaultMessage="Rank" />,
......@@ -52,9 +50,9 @@ const TopSearch = ({
dropdownGroup,
}: {
loading: boolean;
visitData2: IVisitData2[];
visitData2: VisitDataType[];
dropdownGroup: React.ReactNode;
searchData: ISearchData[];
searchData: SearchDataType[];
}) => (
<Card
loading={loading}
......
......@@ -3,7 +3,7 @@ import React from 'react';
import classNames from 'classnames';
import styles from './index.less';
export interface ITrendProps {
export interface TrendProps {
colorful?: boolean;
flag: 'up' | 'down';
style?: React.CSSProperties;
......@@ -11,7 +11,7 @@ export interface ITrendProps {
className?: string;
}
const Trend: React.SFC<ITrendProps> = ({
const Trend: React.SFC<TrendProps> = ({
colorful = true,
reverseColor = false,
flag,
......
export interface IVisitData {
export interface VisitDataType {
x: string;
y: number;
}
export interface IVisitData2 {
x: string;
y: number;
}
export interface ISalesData {
x: string;
y: number;
}
export interface ISearchData {
export interface SearchDataType {
index: number;
keyword: string;
count: number;
......@@ -21,47 +11,32 @@ export interface ISearchData {
status: number;
}
export interface IOfflineData {
export interface OfflineDataType {
name: string;
cvr: number;
}
export interface IOfflineChartData {
export interface OfflineChartData {
x: any;
y1: number;
y2: number;
}
export interface ISalesTypeData {
x: string;
y: number;
}
export interface ISalesTypeDataOnline {
x: string;
y: number;
}
export interface ISalesTypeDataOffline {
x: string;
y: number;
}
export interface IRadarData {
export interface RadarData {
name: string;
label: string;
value: number;
}
export interface IAnalysisData {
visitData: IVisitData[];
visitData2: IVisitData2[];
salesData: ISalesData[];
searchData: ISearchData[];
offlineData: IOfflineData[];
offlineChartData: IOfflineChartData[];
salesTypeData: ISalesTypeData[];
salesTypeDataOnline: ISalesTypeDataOnline[];
salesTypeDataOffline: ISalesTypeDataOffline[];
radarData: IRadarData[];
export interface AnalysisData {
visitData: VisitDataType[];
visitData2: VisitDataType[];
salesData: VisitDataType[];
searchData: SearchDataType[];
offlineData: OfflineDataType[];
offlineChartData: OfflineChartData[];
salesTypeData: VisitDataType[];
salesTypeDataOnline: VisitDataType[];
salesTypeDataOffline: VisitDataType[];
radarData: RadarData[];
}
......@@ -7,8 +7,8 @@ import { RadioChangeEvent } from 'antd/es/radio';
import { RangePickerValue } from 'antd/es/date-picker/interface';
import { connect } from 'dva';
import PageLoading from './components/PageLoading';
import { IAnalysisData } from './data.d';
import { getTimeDistance } from './utils/utils';
import { AnalysisData } from './data.d';
import styles from './style.less';
const IntroduceRow = React.lazy(() => import('./components/IntroduceRow'));
......@@ -18,7 +18,7 @@ const ProportionSales = React.lazy(() => import('./components/ProportionSales'))
const OfflineData = React.lazy(() => import('./components/OfflineData'));
interface BLOCK_NAME_CAMEL_CASEProps {
BLOCK_NAME_CAMEL_CASE: IAnalysisData;
BLOCK_NAME_CAMEL_CASE: AnalysisData;
dispatch: Dispatch<any>;
loading: boolean;
}
......@@ -53,9 +53,9 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
rangePickerValue: getTimeDistance('year'),
};
reqRef!: number;
reqRef: number = 0;
timeoutId!: number;
timeoutId: number = 0;
componentDidMount() {
const { dispatch } = this.props;
......
import { AnyAction, Reducer } from 'redux';
import { EffectsCommandMap } from 'dva';
import { IAnalysisData } from './data.d';
import { AnalysisData } from './data.d';
import { fakeChartData } from './service';
export type Effect = (
action: AnyAction,
effects: EffectsCommandMap & { select: <T>(func: (state: IAnalysisData) => T) => T },
effects: EffectsCommandMap & { select: <T>(func: (state: AnalysisData) => T) => T },
) => void;
export interface ModelType {
namespace: string;
state: IAnalysisData;
state: AnalysisData;
effects: {
fetch: Effect;
fetchSalesData: Effect;
};
reducers: {
save: Reducer<IAnalysisData>;
clear: Reducer<IAnalysisData>;
save: Reducer<AnalysisData>;
clear: Reducer<AnalysisData>;
};
}
......
......@@ -6,7 +6,7 @@ import { yuan } from '../components/Charts';
export default class Yuan extends React.Component<{
children: React.ReactText;
}> {
main: HTMLSpanElement | undefined | null;
main: HTMLSpanElement | undefined | null = null;
componentDidMount() {
this.renderToHtml();
......
......@@ -27,11 +27,11 @@
"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",
"mockjs": "^1.0.1-beta3"
},
"devDependencies": {
"@types/numeral": "^0.0.25",
"mockjs": "^1.0.1-beta3"
"@types/numeral": "^0.0.25"
},
"license": "ISC",
"blockConfig": {
......
......@@ -24,6 +24,10 @@ export default class ActiveChart extends Component {
activeData: getActiveData(),
};
timer: number | undefined = undefined;
requestRef: number | undefined = undefined;
componentDidMount() {
this.loopData();
}
......@@ -50,10 +54,6 @@ export default class ActiveChart extends Component {
});
};
timer: number | undefined;
requestRef: number | undefined;
render() {
const { activeData = [] } = this.state;
......
......@@ -43,8 +43,6 @@ const MiniArea: React.FC<MiniAreaProps> = props => {
animate = true,
} = props;
console.log(props);
const padding: [number, number, number, number] = [36, 5, 30, 5];
const scaleProps = {
......
......@@ -44,6 +44,12 @@ class Pie extends Component<PieProps, PieState> {
legendBlock: false,
};
chart: G2.Chart | undefined = undefined;
root: HTMLDivElement | undefined = undefined;
requestRef: number | undefined = 0;
// for window resize auto responsive legend
resize = Debounce(() => {
const { hasLegend } = this.props;
......@@ -149,12 +155,6 @@ class Pie extends Component<PieProps, PieState> {
});
};
root!: HTMLDivElement;
chart: G2.Chart | undefined;
requestRef: number | undefined;
render() {
const {
valueFormat,
......
......@@ -35,6 +35,14 @@ class TagCloud extends Component<TagCloudProps, TagCloudState> {
width: 0,
};
requestRef: number = 0;
isUnmount: boolean = false;
root: HTMLDivElement | undefined = undefined;
imageMask: HTMLImageElement | undefined = undefined;
componentDidMount() {
requestAnimationFrame(() => {
this.initTagCloud();
......@@ -75,7 +83,8 @@ class TagCloud extends Component<TagCloudProps, TagCloudState> {
origin?: any;
color?: any;
}) {
return Object.assign({}, cfg.style, {
return {
...cfg.style,
fillOpacity: cfg.opacity,
fontSize: cfg.origin._origin.size,
rotate: cfg.origin._origin.rotate,
......@@ -84,7 +93,7 @@ class TagCloud extends Component<TagCloudProps, TagCloudState> {
fontFamily: cfg.origin._origin.font,
fill: cfg.color,
textBaseline: 'Alphabetic',
});
};
}
(Shape as any).registerShape('point', 'cloud', {
......@@ -94,23 +103,16 @@ class TagCloud extends Component<TagCloudProps, TagCloudState> {
) {
const attrs = getTextAttrs(cfg);
return container.addShape('text', {
attrs: Object.assign(attrs, {
attrs: {
...attrs,
x: cfg.x,
y: cfg.y,
}),
},
});
},
});
};
isUnmount!: boolean;
requestRef!: number;
root: HTMLDivElement | undefined;
imageMask: HTMLImageElement | undefined;
renderChart = Debounce((nextProps: TagCloudProps) => {
// const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
const { data, height } = nextProps || this.props;
......
......@@ -15,7 +15,7 @@ function computeHeight(node: HTMLDivElement) {
return totalHeight - padding;
}
function getAutoHeight(n: HTMLDivElement) {
function getAutoHeight(n: HTMLDivElement | undefined) {
if (!n) {
return 0;
}
......@@ -44,6 +44,8 @@ function autoHeight() {
computedHeight: 0,
};
root: HTMLDivElement | undefined = undefined;
componentDidMount() {
const { height } = this.props;
if (!height) {
......@@ -60,8 +62,6 @@ function autoHeight() {
this.root = node;
};
root!: HTMLDivElement;
render() {
const { height } = this.props;
const { computedHeight } = this.state;
......
......@@ -5,7 +5,7 @@ import React, { Component } from 'react';
import autoHeight from './autoHeight';
import styles from './index.less';
export interface IRadarProps {
export interface RadarProps {
title?: React.ReactNode;
height?: number;
padding?: [number, number, number, number];
......@@ -21,7 +21,7 @@ export interface IRadarProps {
tickCount?: number;
style?: React.CSSProperties;
}
interface IRadarState {
interface RadarState {
legendData: {
checked: boolean;
name: string;
......@@ -31,20 +31,20 @@ interface IRadarState {
}[];
}
/* eslint react/no-danger:0 */
class Radar extends Component<IRadarProps, IRadarState> {
state: IRadarState = {
class Radar extends Component<RadarProps, RadarState> {
state: RadarState = {
legendData: [],
};
chart: G2.Chart | undefined;
chart: G2.Chart | undefined = undefined;
node: HTMLDivElement | undefined;
node: HTMLDivElement | undefined = undefined;
componentDidMount() {
this.getLegendData();
}
componentDidUpdate(preProps: IRadarProps) {
componentDidUpdate(preProps: RadarProps) {
const { data } = this.props;
if (data !== preProps.data) {
this.getLegendData();
......@@ -60,10 +60,10 @@ class Radar extends Component<IRadarProps, IRadarState> {
if (!this.chart) return;
const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
if (!geom) return;
const items = geom.get('dataArray') || []; // 获取图形对应的
const items = (geom as any).get('dataArray') || []; // 获取图形对应的
const legendData = items.map((item: { color: any; _origin: any }[]) => {
// eslint-disable-next-line
// eslint-disable-next-line no-underscore-dangle
const origins = item.map(t => t._origin);
const result = {
name: origins[0].name,
......
import { AnyAction, Reducer } from 'redux';
import { EffectsCommandMap } from 'dva';
import { Activeties, CurrentUser, Notice, RadarData } from './data.d';
import { ActivitiesType, CurrentUser, NoticeType, RadarDataType } from './data.d';
import { fakeChartData, queryActivities, queryCurrent, queryProjectNotice } from './service';
export interface ModalState {
currentUser: Partial<CurrentUser>;
projectNotice: Notice[];
activities: Activeties[];
radarData: RadarData[];
projectNotice: NoticeType[];
activities: ActivitiesType[];
radarData: RadarDataType[];
}
export type Effect = (
......
......@@ -11,12 +11,13 @@
"url": "https://github.com/ant-design/pro-blocks/tree/master/Exception403"
},
"dependencies": {
"antd": "^3.19.5",
"classnames": "^2.2.6",
"dva": "^2.4.0",
"react": "^16.6.3",
"umi-request": "^1.0.4",
"umi": "^2.6.8",
"umi-plugin-react": "^1.7.2"
"umi-plugin-react": "^1.7.2",
"umi-request": "^1.0.4"
},
"devDependencies": {
"umi-plugin-block-dev": "^1.3.0"
......
import * as H from 'history';
import React, { createElement } from 'react';
import { Button } from 'antd';
......@@ -10,8 +8,8 @@ import styles from './index.less';
export interface ExceptionProps<
L = {
to: H.LocationDescriptor;
href?: H.LocationDescriptor;
to: string;
href?: string;
replace?: boolean;
innerRef?: (node: HTMLAnchorElement | null) => void;
}
......
......@@ -11,13 +11,15 @@
"url": "https://github.com/ant-design/pro-blocks/tree/master/Exception404"
},
"dependencies": {
"react": "^16.6.3",
"antd": "^3.19.5",
"classnames": "^2.2.6",
"dva": "^2.4.0",
"umi-request": "^1.0.0-beta.1"
"react": "^16.6.3",
"umi-plugin-react": "^1.7.2",
"umi-request": "^1.0.8"
},
"devDependencies": {
"umi": "^2.6.9",
"umi-plugin-react": "^1.7.2",
"umi-plugin-block-dev": "^1.0.0"
},
"license": "MIT",
......
import * as H from 'history';
import React, { createElement } from 'react';
import { Button } from 'antd';
......@@ -10,8 +8,8 @@ import styles from './index.less';
export interface ExceptionProps<
L = {
to: H.LocationDescriptor;
href?: H.LocationDescriptor;
to: string;
href?: string;
replace?: boolean;
innerRef?: (node: HTMLAnchorElement | null) => void;
}
......
......@@ -11,13 +11,15 @@
"url": "https://github.com/ant-design/pro-blocks/tree/master/Exception500"
},
"dependencies": {
"react": "^16.6.3",
"antd": "^3.19.5",
"classnames": "^2.2.6",
"dva": "^2.4.0",
"umi-request": "^1.0.0-beta.1"
"react": "^16.6.3",
"umi-plugin-react": "^1.7.2",
"umi-request": "^1.0.8"
},
"devDependencies": {
"umi": "^2.6.9",
"umi-plugin-react": "^1.7.2",
"umi-plugin-block-dev": "^1.0.0"
},
"license": "MIT",
......
import * as H from 'history';
import React, { createElement } from 'react';
import { Button } from 'antd';
......@@ -10,8 +8,8 @@ import styles from './index.less';
export interface ExceptionProps<
L = {
to: H.LocationDescriptor;
href?: H.LocationDescriptor;
to: string;
href?: string;
replace?: boolean;
innerRef?: (node: HTMLAnchorElement | null) => void;
}
......
......@@ -202,7 +202,7 @@ class TableForm extends PureComponent<TableFormProps, TableFormState> {
handleFieldChange(e: React.ChangeEvent<HTMLInputElement>, fieldName: string, key: string) {
const { data = [] } = this.state;
const newData = data.map(item => ({ ...item }));
const newData = [...data];
const target = this.getRowByKey(key, newData);
if (target) {
target[fieldName] = e.target.value;
......@@ -246,13 +246,21 @@ class TableForm extends PureComponent<TableFormProps, TableFormState> {
this.clickedCancel = true;
e.preventDefault();
const { data = [] } = this.state;
const newData = data.map(item => ({ ...item }));
const target = this.getRowByKey(key, newData);
const newData = [...data];
newData.map(item => {
if (item.key === key) {
if (this.cacheOriginData[key]) {
Object.assign(target, this.cacheOriginData[key]);
delete this.cacheOriginData[key];
return {
...item,
...this.cacheOriginData[key],
editable: false,
};
}
}
target.editable = false;
return item;
});
this.setState({ data: newData });
this.clickedCancel = false;
}
......
......@@ -3,16 +3,14 @@ import { EffectsCommandMap } from 'dva';
import { message } from 'antd';
import { fakeSubmitForm } from './service';
export interface ModalState {}
export type Effect = (
action: AnyAction,
effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T },
effects: EffectsCommandMap & { select: <T>(func: (state: {}) => T) => T },
) => void;
export interface ModelType {
namespace: string;
state: ModalState;
state: {};
effects: {
submitAdvancedForm: Effect;
};
......
......@@ -3,16 +3,14 @@ import { EffectsCommandMap } from 'dva';
import { message } from 'antd';
import { fakeSubmitForm } from './service';
export interface ModalState {}
export type Effect = (
action: AnyAction,
effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T },
effects: EffectsCommandMap & { select: <T>(func: (state: {}) => T) => T },
) => void;
export interface ModelType {
namespace: string;
state: ModalState;
state: {};
effects: {
submitRegularForm: Effect;
};
......
......@@ -13,6 +13,7 @@
"dependencies": {
"@ant-design/pro-layout": "^4.5.5",
"antd": "^3.16.3",
"classnames": "^2.2.6",
"dva": "^2.4.0",
"nzh": "^1.0.3",
"react": "^16.6.3",
......
......@@ -126,7 +126,7 @@ function postFakeList(req: { body: any }, res: { json: (arg0: BasicListItemDataT
case 'update':
result.forEach((item, i) => {
if (item.id === id) {
result[i] = Object.assign(item, body);
result[i] = { ...item, ...body };
}
});
break;
......
......@@ -70,6 +70,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
wrapperCol: { span: 13 },
};
addBtn: HTMLButtonElement | undefined | null = undefined;
componentDidMount() {
const { dispatch } = this.props;
dispatch({
......@@ -136,8 +138,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
});
};
addBtn: HTMLButtonElement | undefined | null;
render() {
const {
BLOCK_NAME_CAMEL_CASE: { list },
......
......@@ -36,7 +36,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
};
handleFormSubmit = (value: string) => {
// tslint:disable-next-line: no-console
console.log(value);
};
......
......@@ -200,7 +200,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
}
const WarpForm = Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>({
onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps, changedValues, allValues) {
onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps) {
// 表单项变化时请求数据
// 模拟查询表单生效
dispatch({
......
......@@ -235,7 +235,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
}
const WarpForm = Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>({
onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps, changedValues, allValues) {
onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps) {
// 表单项变化时请求数据
// 模拟查询表单生效
dispatch({
......
......@@ -145,7 +145,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
}
const WarpForm = Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>({
onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps, changedValues, allValues) {
onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps) {
// 表单项变化时请求数据
// 模拟查询表单生效
dispatch({
......
......@@ -137,8 +137,7 @@ function postRule(
case 'update':
tableListDataSource = tableListDataSource.map(item => {
if (item.key === key) {
Object.assign(item, { desc, name });
return item;
return { ...item, desc, name };
}
return item;
});
......
......@@ -12,13 +12,15 @@
},
"dependencies": {
"antd": "^3.16.3",
"classnames": "^2.2.6",
"dva": "^2.4.0",
"moment": "^2.22.2",
"omit.js": "^1.0.2",
"qs": "^6.7.0",
"react": "^16.6.3",
"redux": "^4.0.1",
"umi-request": "^1.0.0",
"umi-plugin-react": "^1.3.0"
"umi-plugin-react": "^1.3.0",
"umi-request": "^1.0.0"
},
"devDependencies": {
"@types/qs": "^6.5.3",
......
import { createContext } from 'react';
export interface ILoginContext {
export interface LoginContextProps {
tabUtil?: {
addTab: (id: string) => void;
removeTab: (id: string) => void;
......@@ -8,6 +8,6 @@ export interface ILoginContext {
updateActive?: (activeItem: { [key: string]: string } | string) => void;
}
const LoginContext: React.Context<ILoginContext> = createContext({});
const LoginContext: React.Context<LoginContextProps> = createContext({});
export default LoginContext;
......@@ -4,14 +4,19 @@ import React, { Component } from 'react';
import { FormComponentProps } from 'antd/es/form';
import omit from 'omit.js';
import ItemMap from './map';
import LoginContext, { ILoginContext } from './LoginContext';
import LoginContext, { LoginContextProps } from './LoginContext';
import styles from './index.less';
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
export type WrappedLoginItemProps = Omit<LoginItemProps, 'form' | 'type' | 'updateActive'>;
export type LoginItemKeyType = keyof typeof ItemMap;
export type LoginItemType = { [K in keyof typeof ItemMap]: React.FC<WrappedLoginItemProps> };
export interface LoginItemType {
UserName: React.FC<WrappedLoginItemProps>;
Password: React.FC<WrappedLoginItemProps>;
Mobile: React.FC<WrappedLoginItemProps>;
Captcha: React.FC<WrappedLoginItemProps>;
}
export interface LoginItemProps {
name?: string;
......@@ -24,7 +29,7 @@ export interface LoginItemProps {
countDown?: number;
getCaptchaButtonText?: string;
getCaptchaSecondText?: string;
updateActive?: ILoginContext['updateActive'];
updateActive?: LoginContextProps['updateActive'];
type?: string;
defaultValue?: string;
form?: FormComponentProps['form'];
......@@ -45,7 +50,7 @@ class WrapFormItem extends Component<LoginItemProps, LoginItemState> {
getCaptchaSecondText: 'second',
};
interval: number | undefined;
interval: number | undefined = undefined;
constructor(props: LoginItemProps) {
super(props);
......
......@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { TabPaneProps } from 'antd/es/tabs';
import { Tabs } from 'antd';
import LoginContext, { ILoginContext } from './LoginContext';
import LoginContext, { LoginContextProps } from './LoginContext';
const { TabPane } = Tabs;
......@@ -15,11 +15,11 @@ const generateId = (() => {
})();
interface LoginTabProps extends TabPaneProps {
tabUtil: ILoginContext['tabUtil'];
tabUtil: LoginContextProps['tabUtil'];
}
class LoginTab extends Component<LoginTabProps> {
uniqueId: string;
uniqueId: string = '';
constructor(props: LoginTabProps) {
super(props);
......
......@@ -2,8 +2,8 @@ import { Form, Tabs } from 'antd';
import React, { Component } from 'react';
import { FormComponentProps } from 'antd/es/form';
import classNames from 'classnames';
import LoginContext, { ILoginContext } from './LoginContext';
import LoginItem, { LoginItemProps, LoginItemType } from './LoginItem';
import LoginContext, { LoginContextProps } from './LoginContext';
import LoginItem, { LoginItemProps } from './LoginItem';
import LoginSubmit from './LoginSubmit';
import LoginTab from './LoginTab';
......@@ -68,7 +68,7 @@ class Login extends Component<LoginProps, LoginState> {
);
};
getContext: () => ILoginContext = () => {
getContext: () => LoginContextProps = () => {
const { form } = this.props;
const { tabs = [] } = this.state;
return {
......
......@@ -49,6 +49,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
PAGE_NAME_UPPER_CAMEL_CASEProps,
PAGE_NAME_UPPER_CAMEL_CASEState
> {
loginForm: FormComponentProps['form'] | undefined | null = undefined;
state: PAGE_NAME_UPPER_CAMEL_CASEState = {
type: 'account',
autoLogin: true,
......@@ -60,8 +62,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
});
};
loginForm: FormComponentProps['form'] | undefined | null;
handleSubmit = (err: any, values: FromDataType) => {
const { type } = this.state;
if (!err) {
......
......@@ -92,6 +92,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
prefix: '86',
};
interval: number | undefined = undefined;
componentDidUpdate() {
const { BLOCK_NAME_CAMEL_CASE, form } = this.props;
const account = form.getFieldValue('mail');
......@@ -195,8 +197,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
});
};
interval: number | undefined;
renderPasswordProgress = () => {
const { form } = this.props;
const value = form.getFieldValue('password');
......
......@@ -4,11 +4,11 @@
"dev": "cross-env PAGES_PATH='DashboardMonitor/src' umi dev",
"start": "umi dev",
"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",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
"lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./ && npm run lint:style",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./",
"lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
"lint:style": "stylelint --fix '**/*.less' --syntax less",
"prettier": "prettier -c --write **/*",
"format-imports": "import-sort --write '**/*.{js,jsx,ts,tsx}'"
},
......@@ -53,7 +53,7 @@
"umi-plugin-block-dev": "^2.1.11",
"umi-plugin-react": "^1.7.6",
"umi-request": "^1.0.0",
"@umijs/fabric": "^1.0.4",
"@umijs/fabric": "^1.0.5",
"import-sort-cli": "^6.0.0",
"import-sort-parser-babylon": "^6.0.0",
"import-sort-parser-typescript": "^6.0.0",
......
......@@ -10,7 +10,7 @@ declare module '*.gif';
declare module '*.bmp';
declare module '*.tiff';
let var APP_TYPE: string;
declare module 'bizcharts-plugin-slider';
declare module 'react-fittext';
declare module '@antv/data-set';
......
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