提交 39181808 编写于 作者: 愚道 提交者: Yu

remove useless component

上级 b069aa6b
import React, { Component } from 'react';
import { NumberInfo, Charts } from 'ant-design-pro';
import styles from './index.less';
const { MiniArea } = Charts;
function fixedZero(val) {
return val * 1 < 10 ? `0${val}` : val;
}
function getActiveData() {
const activeData = [];
for (let i = 0; i < 24; i += 1) {
activeData.push({
x: `${fixedZero(i)}:00`,
y: Math.floor(Math.random() * 200) + i * 50,
});
}
return activeData;
}
export default class ActiveChart extends Component {
state = {
activeData: getActiveData(),
};
componentDidMount() {
this.loopData();
}
componentWillUnmount() {
clearTimeout(this.timer);
cancelAnimationFrame(this.requestRef);
}
loopData = () => {
this.requestRef = requestAnimationFrame(() => {
this.timer = setTimeout(() => {
this.setState(
{
activeData: getActiveData(),
},
() => {
this.loopData();
}
);
}, 1000);
});
};
render() {
const { activeData = [] } = this.state;
return (
<div className={styles.activeChart}>
<NumberInfo subTitle="目标评估" total="有望达到预期" />
<div style={{ marginTop: 32 }}>
<MiniArea
animate={false}
line
borderWidth={2}
height={84}
scale={{
y: {
tickCount: 3,
},
}}
yAxis={{
tickLine: false,
label: false,
title: false,
line: false,
}}
data={activeData}
/>
</div>
{activeData && (
<div>
<div className={styles.activeChartGrid}>
<p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p>
<p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p>
</div>
<div className={styles.dashedLine}>
<div className={styles.line} />
</div>
<div className={styles.dashedLine}>
<div className={styles.line} />
</div>
</div>
)}
{activeData && (
<div className={styles.activeChartLegend}>
<span>00:00</span>
<span>{activeData[Math.floor(activeData.length / 2)].x}</span>
<span>{activeData[activeData.length - 1].x}</span>
</div>
)}
</div>
);
}
}
.activeChart {
position: relative;
}
.activeChartGrid {
p {
position: absolute;
top: 80px;
}
p:last-child {
top: 115px;
}
}
.activeChartLegend {
position: relative;
font-size: 0;
margin-top: 8px;
height: 20px;
line-height: 20px;
span {
display: inline-block;
font-size: 12px;
text-align: center;
width: 33.33%;
}
span:first-child {
text-align: left;
}
span:last-child {
text-align: right;
}
}
.dashedLine {
position: relative;
height: 1px;
top: -70px;
left: -3px;
.line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, transparent 50%, #e9e9e9 50%);
background-size: 6px;
}
}
.dashedLine:last-child {
top: -36px;
}
import React from 'react';
import moment from 'moment';
import { Avatar } from 'antd';
import styles from './index.less';
const ArticleListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
<div className={styles.listContent}>
<div className={styles.description}>{content}</div>
<div className={styles.extra}>
<Avatar src={avatar} size="small" />
<a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
<em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
</div>
</div>
);
export default ArticleListContent;
@import '~antd/lib/style/themes/default.less';
.listContent {
.description {
line-height: 22px;
max-width: 720px;
}
.extra {
color: @text-color-secondary;
margin-top: 16px;
line-height: 22px;
& > :global(.ant-avatar) {
vertical-align: top;
margin-right: 8px;
width: 20px;
height: 20px;
position: relative;
top: 1px;
}
& > em {
color: @disabled-color;
font-style: normal;
margin-left: 16px;
}
}
}
@media screen and (max-width: @screen-xs) {
.listContent {
.extra {
& > em {
display: block;
margin-left: 0;
margin-top: 8px;
}
}
}
}
import React, { PureComponent } from 'react';
import { Input, Icon } from 'antd';
import styles from './index.less';
export default class EditableItem extends PureComponent {
constructor(props) {
super(props);
this.state = {
value: props.value,
editable: false,
};
}
handleChange = e => {
const { value } = e.target;
this.setState({ value });
};
check = () => {
this.setState({ editable: false });
const { value } = this.state;
const { onChange } = this.props;
if (onChange) {
onChange(value);
}
};
edit = () => {
this.setState({ editable: true });
};
render() {
const { value, editable } = this.state;
return (
<div className={styles.editableItem}>
{editable ? (
<div className={styles.wrapper}>
<Input value={value} onChange={this.handleChange} onPressEnter={this.check} />
<Icon type="check" className={styles.icon} onClick={this.check} />
</div>
) : (
<div className={styles.wrapper}>
<span>{value || ' '}</span>
<Icon type="edit" className={styles.icon} onClick={this.edit} />
</div>
)}
</div>
);
}
}
@import '~antd/lib/style/themes/default.less';
.editableItem {
line-height: @input-height-base;
display: table;
width: 100%;
margin-top: (@font-size-base * @line-height-base - @input-height-base) / 2;
.wrapper {
display: table-row;
& > * {
display: table-cell;
}
& > *:first-child {
width: 85%;
}
.icon {
cursor: pointer;
text-align: right;
}
}
}
import React, { PureComponent, createElement } from 'react';
import PropTypes from 'prop-types';
import { Button } from 'antd';
import styles from './index.less';
// TODO: 添加逻辑
class EditableLinkGroup extends PureComponent {
static propTypes = {
links: PropTypes.array,
onAdd: PropTypes.func,
linkElement: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
};
static defaultProps = {
links: [],
onAdd: () => {},
linkElement: 'a',
};
render() {
const { links, linkElement, onAdd } = this.props;
return (
<div className={styles.linkGroup}>
{links.map(link =>
createElement(
linkElement,
{
key: `linkGroup-item-${link.id || link.title}`,
to: link.href,
href: link.href,
},
link.title
)
)}
{
<Button size="small" type="primary" ghost onClick={onAdd} icon="plus">
添加
</Button>
}
</div>
);
}
}
export default EditableLinkGroup;
@import '~antd/lib/style/themes/default.less';
.linkGroup {
padding: 20px 0 8px 24px;
font-size: 0;
& > a {
color: @text-color;
display: inline-block;
font-size: @font-size-base;
margin-bottom: 13px;
width: 25%;
&:hover {
color: @primary-color;
}
}
}
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import styles from './GridContent.less';
class GridContent extends PureComponent {
render() {
const { contentWidth, children } = this.props;
let className = `${styles.main}`;
if (contentWidth === 'Fixed') {
className = `${styles.main} ${styles.wide}`;
}
return <div className={className}>{children}</div>;
}
}
export default connect(({ setting }) => ({
contentWidth: setting.contentWidth,
}))(GridContent);
.main {
width: 100%;
height: 100%;
min-height: 100%;
transition: 0.3s;
&.wide {
max-width: 1200px;
margin: 0 auto;
}
}
import React from 'react';
import { FormattedMessage } from 'umi/locale';
import Link from 'umi/link';
import { PageHeader } from 'ant-design-pro';
import { connect } from 'dva';
import GridContent from './GridContent';
import styles from './index.less';
import MenuContext from '@/layouts/MenuContext';
const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => (
<div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
{top}
<MenuContext.Consumer>
{value => (
<PageHeader
wide={contentWidth === 'Fixed'}
home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
{...value}
key="pageheader"
{...restProps}
linkElement={Link}
itemRender={item => {
if (item.locale) {
return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
}
return item.title;
}}
/>
)}
</MenuContext.Consumer>
{children ? (
<div className={styles.content}>
<GridContent>{children}</GridContent>
</div>
) : null}
</div>
);
export default connect(({ setting }) => ({
contentWidth: setting.contentWidth,
}))(PageHeaderWrapper);
@import '~antd/lib/style/themes/default.less';
.content {
margin: 24px 24px 0;
}
@media screen and (max-width: @screen-sm) {
.content {
margin: 24px 0 0;
}
}
import React from 'react';
import classNames from 'classnames';
import styles from './index.less';
const StandardFormRow = ({ title, children, last, block, grid, ...rest }) => {
const cls = classNames(styles.standardFormRow, {
[styles.standardFormRowBlock]: block,
[styles.standardFormRowLast]: last,
[styles.standardFormRowGrid]: grid,
});
return (
<div className={cls} {...rest}>
{title && (
<div className={styles.label}>
<span>{title}</span>
</div>
)}
<div className={styles.content}>{children}</div>
</div>
);
};
export default StandardFormRow;
@import '~antd/lib/style/themes/default.less';
.standardFormRow {
border-bottom: 1px dashed @border-color-split;
padding-bottom: 16px;
margin-bottom: 16px;
display: flex;
:global {
.ant-form-item {
margin-right: 24px;
}
.ant-form-item-label label {
color: @text-color;
margin-right: 0;
}
.ant-form-item-label,
.ant-form-item-control {
padding: 0;
line-height: 32px;
}
}
.label {
color: @heading-color;
font-size: @font-size-base;
margin-right: 24px;
flex: 0 0 auto;
text-align: right;
& > span {
display: inline-block;
height: 32px;
line-height: 32px;
&:after {
content: ':';
}
}
}
.content {
flex: 1 1 0;
:global {
.ant-form-item:last-child {
margin-right: 0;
}
}
}
}
.standardFormRowLast {
border: none;
padding-bottom: 0;
margin-bottom: 0;
}
.standardFormRowBlock {
:global {
.ant-form-item,
div.ant-form-item-control-wrapper {
display: block;
}
}
}
.standardFormRowGrid {
:global {
.ant-form-item,
div.ant-form-item-control-wrapper {
display: block;
}
.ant-form-item-label {
float: left;
}
}
}
import React, { PureComponent, Fragment } from 'react';
import { Table, Alert } from 'antd';
import styles from './index.less';
function initTotalList(columns) {
const totalList = [];
columns.forEach(column => {
if (column.needTotal) {
totalList.push({ ...column, total: 0 });
}
});
return totalList;
}
class StandardTable extends PureComponent {
constructor(props) {
super(props);
const { columns } = props;
const needTotalList = initTotalList(columns);
this.state = {
selectedRowKeys: [],
needTotalList,
};
}
static getDerivedStateFromProps(nextProps) {
// clean state
if (nextProps.selectedRows.length === 0) {
const needTotalList = initTotalList(nextProps.columns);
return {
selectedRowKeys: [],
needTotalList,
};
}
return null;
}
handleRowSelectChange = (selectedRowKeys, selectedRows) => {
let { needTotalList } = this.state;
needTotalList = needTotalList.map(item => ({
...item,
total: selectedRows.reduce((sum, val) => sum + parseFloat(val[item.dataIndex], 10), 0),
}));
const { onSelectRow } = this.props;
if (onSelectRow) {
onSelectRow(selectedRows);
}
this.setState({ selectedRowKeys, needTotalList });
};
handleTableChange = (pagination, filters, sorter) => {
const { onChange } = this.props;
if (onChange) {
onChange(pagination, filters, sorter);
}
};
cleanSelectedKeys = () => {
this.handleRowSelectChange([], []);
};
render() {
const { selectedRowKeys, needTotalList } = this.state;
const { data = {}, rowKey, ...rest } = this.props;
const { list = [], pagination } = data;
const paginationProps = {
showSizeChanger: true,
showQuickJumper: true,
...pagination,
};
const rowSelection = {
selectedRowKeys,
onChange: this.handleRowSelectChange,
getCheckboxProps: record => ({
disabled: record.disabled,
}),
};
return (
<div className={styles.standardTable}>
<div className={styles.tableAlert}>
<Alert
message={
<Fragment>
已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
{needTotalList.map(item => (
<span style={{ marginLeft: 8 }} key={item.dataIndex}>
{item.title}
总计&nbsp;
<span style={{ fontWeight: 600 }}>
{item.render ? item.render(item.total) : item.total}
</span>
</span>
))}
<a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
清空
</a>
</Fragment>
}
type="info"
showIcon
/>
</div>
<Table
rowKey={rowKey || 'key'}
rowSelection={rowSelection}
dataSource={list}
pagination={paginationProps}
onChange={this.handleTableChange}
{...rest}
/>
</div>
);
}
}
export default StandardTable;
@import '~antd/lib/style/themes/default.less';
.standardTable {
:global {
.ant-table-pagination {
margin-top: 24px;
}
}
.tableAlert {
margin-bottom: 16px;
}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册