antd#Timeline JavaScript Examples
The following examples show how to use
antd#Timeline.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Event.js From website with MIT License | 6 votes |
|
Event = eventWithStyle(
({ region = 'BA', sector, title, description, className, children }) => {
return (
<div className={'event ' + className}>
<div className='event__description'>
<figure>
<picture>
<SectorIcon sector={sector} />
</picture>
<figcaption>
<h2>{title}</h2>
{description && <Text>{description}</Text>}
</figcaption>
</figure>
</div>
<Timeline>{children}</Timeline>
</div>
);
}
)
Example #2
| Source File: right.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/timeline', module).add('right', () =>
<Timeline mode="right">
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
Technical testing 2015-09-01
</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Right alternate timeline.</p></>) } });
Example #3
| Source File: pending.jsx From virtuoso-design-system with MIT License | 6 votes |
|
render() {
return (
<div>
<Timeline pending="Recording..." reverse={this.state.reverse}>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
</Timeline>
<Button type="primary" style={{ marginTop: 16 }} onClick={this.handleClick}>
Toggle Reverse
</Button>
</div>
);
}
Example #4
| Source File: NewsTimeline.js From YApi-X with MIT License | 6 votes |
|
render() {
let data = this.props.newsData ? this.props.newsData.list : [];
if (data && data.length) {
data = data.map(function(item, i) {
return (
<Timeline.Item key={i}>
<span className="logoTimeago">{timeago(item.add_time)}</span>
<span className="logusername">{item.username}</span>
<span className="logtype">{item.type}</span>
<span className="logtime">{formatTime(item.add_time)}</span>
<span className="logcontent">{item.content}</span>
</Timeline.Item>
);
});
} else {
data = '';
}
let pending = this.state.bidden ? (
<a className={this.state.bidden}>以上为全部内容</a>
) : (
<a className="loggetMore" onClick={this.getMore.bind(this)}>
查看更多
</a>
);
if (this.state.loading) {
pending = <Spin />;
}
return (
<section className="news-timeline">
{data ? <Timeline pending={pending}>{data}</Timeline> : data}
</section>
);
}
Example #5
| Source File: index.js From gobench with Apache License 2.0 | 6 votes |
|
render() {
return (
<div>
<h5 className="mb-3">
<strong>Basic</strong>
</h5>
<div className="mb-5">
<Timeline>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>
</div>
<h5 className="mb-3">
<strong>Alternate</strong>
</h5>
<div className="mb-5">
<Timeline mode="alternate">
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item color="green">Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.
</Timeline.Item>
<Timeline.Item color="red">Network problems being solved 2015-09-01</Timeline.Item>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
Technical testing 2015-09-01
</Timeline.Item>
</Timeline>
</div>
</div>
)
}
Example #6
| Source File: label.jsx From virtuoso-design-system with MIT License | 6 votes |
|
function TimelimeLabelDemo() {
const [mode, setMode] = useState('left');
const onChange = e => {
setMode(e.target.value);
};
return (
<>
<Radio.Group
onChange={onChange}
value={mode}
style={{
marginBottom: 20,
}}
>
<Radio value="left">Left</Radio>
<Radio value="right">Right</Radio>
<Radio value="alternate">Alternate</Radio>
</Radio.Group>
<Timeline mode={mode}>
<Timeline.Item label="2015-09-01">Create a services</Timeline.Item>
<Timeline.Item label="2015-09-01 09:12:11">Solve initial network problems</Timeline.Item>
<Timeline.Item>Technical testing</Timeline.Item>
<Timeline.Item label="2015-09-01 09:12:11">Network problems being solved</Timeline.Item>
</Timeline>
</>
);
}
Example #7
| Source File: alternate.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/timeline', module).add('alternate', () =>
<Timeline mode="alternate">
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item color="green">Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.
</Timeline.Item>
<Timeline.Item color="red">Network problems being solved 2015-09-01</Timeline.Item>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
Technical testing 2015-09-01
</Timeline.Item>
</Timeline>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Alternate timeline.</p></>) } });
Example #8
| Source File: basic.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/timeline', module).add('basic', () =>
<Timeline>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Basic timeline.</p></>) } });
Example #9
| Source File: color.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/timeline', module).add('color', () =>
<Timeline>
<Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item color="red">
<p>Solve initial network problems 1</p>
<p>Solve initial network problems 2</p>
<p>Solve initial network problems 3 2015-09-01</p>
</Timeline.Item>
<Timeline.Item>
<p>Technical testing 1</p>
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</Timeline.Item>
<Timeline.Item color="gray">
<p>Technical testing 1</p>
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</Timeline.Item>
<Timeline.Item color="gray">
<p>Technical testing 1</p>
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</Timeline.Item>
</Timeline>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Set the color of circles. <code>green</code> means completed or success status, <code>red</code> means warning or error, and <code>blue</code> means ongoing or other default status, <code>gray</code> for unfinished or disabled status.</p></>) } });
Example #10
| Source File: custom.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/timeline', module).add('custom', () =>
<Timeline>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined className="timeline-clock-icon" />} color="red">
Technical testing 2015-09-01
</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Set a node as an icon or other custom element.</p></>) } });
Example #11
| Source File: Event.js From website with MIT License | 5 votes |
|
EventItem = ({
city = 'Em todo o estado',
status = 'F',
title,
description,
event,
hideAuthor = false
}) => {
const { author } = event;
const statusMessages = messages(status);
return (
<Timeline.Item
className={status}
dot={statusMessages.icon}
color={statusMessages.color}
>
<div className='city'>
{city}
{event?.region?.initial && ` - ${event?.region?.initial}`}
{author && !hideAuthor && author?.name && (
<Popover
content={
<div style={{ textAlign: 'center' }}>
Evento criado por {author?.name}. <br />
<a>Clique aqui</a> para fazer parte de nossa equipe de
colaboradores.
</div>
}
>
<span className='info'>
<NotificationOutlined />
<span>{author.name}</span>
</span>
</Popover>
)}
</div>
<div className='meta'>
<Popover content={<span style={{ textAlign: 'center' }}>{title}</span>}>
<span className='label'>{title} - </span>
</Popover>
<span className='status'>{statusMessages.message} - </span>
{(event.from_date !== null || event.to_date !== null) && (
<Popover
content={<span>Período de vigência do evento em questão.</span>}
>
<span className='info'>
<ClockCircleOutlined />
<span>
{event.undefined_ends_date && 'A partir de '}
{event.from_date && formatDate(event.from_date)}
{event.to_date && ` - ${formatDate(event.to_date)}`}
</span>
</span>
</Popover>
)}
{event?.source?.source && (
<span className='info'>
<LinkOutlined />
<span>Fonte: {event.source.source}</span>
</span>
)}
</div>
<Text>{description}</Text>
{event.source?.link && (
<a href={event.source.link} target='__blank' alt={event.source.source}>
Ver mais
</a>
)}
</Timeline.Item>
);
}
Example #12
| Source File: dark.jsx From virtuoso-design-system with MIT License | 4 votes |
|
render() {
const { disabled, selectedKeys, targetKeys, showSearch } = this.state;
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filters: [
{ text: 'Joe', value: 'Joe' },
{ text: 'Jim', value: 'Jim' },
],
filteredValue: null,
onFilter: (value, record) => record.name.includes(value),
sorter: (a, b) => a.name.length - b.name.length,
sortOrder: true,
ellipsis: true,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: false,
sortOrder: true,
ellipsis: true,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [
{ text: 'London', value: 'London' },
{ text: 'New York', value: 'New York' },
],
filteredValue: null,
onFilter: (value, record) => record.address.includes(value),
sorter: false,
sortOrder: true,
ellipsis: true,
},
];
return (
<>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Switch
unCheckedChildren="disabled"
checkedChildren="disabled"
checked={disabled}
onChange={this.handleDisable}
style={{ marginBottom: 16 }}
/>
<Card title="Card Title">
<Card.Grid>Content</Card.Grid>
<Card.Grid hoverable={false}>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
</Card>
<Collapse>
<Panel header="This is panel header 1" key="1">
<Collapse defaultActiveKey="1">
<Panel header="This is panel nest panel" key="1">
<p>{text}</p>
</Panel>
</Collapse>
</Panel>
<Panel header="This is panel header 2" key="2">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 3" key="3">
<p>{text}</p>
</Panel>
</Collapse>
<Transfer
dataSource={mockData}
titles={['Source', 'Target']}
targetKeys={targetKeys}
selectedKeys={selectedKeys}
onChange={this.handleTransferChange}
onSelectChange={this.handleTransferSelectChange}
render={item => item.title}
disabled={disabled}
/>
<TableTransfer
dataSource={mockData}
targetKeys={targetKeys}
disabled={disabled}
showSearch={showSearch}
onChange={this.handleTableTransferChange}
filterOption={(inputValue, item) =>
item.title.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1
}
leftColumns={[
{
dataIndex: 'title',
title: 'Name',
},
{
dataIndex: 'description',
title: 'Description',
},
]}
rightColumns={[
{
dataIndex: 'title',
title: 'Name',
},
]}
/>
<Switch
unCheckedChildren="disabled"
checkedChildren="disabled"
checked={disabled}
onChange={this.triggerDisable}
style={{ marginTop: 16 }}
/>
<Switch
unCheckedChildren="showSearch"
checkedChildren="showSearch"
checked={showSearch}
onChange={this.triggerShowSearch}
style={{ marginTop: 16 }}
/>
<Anchor>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link
href="#components-anchor-demo-basic"
title="Basic demo with Target"
target="_blank"
/>
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>
<Tabs type="card">
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</TabPane>
<TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</TabPane>
<TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</TabPane>
</Tabs>
<Timeline>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
Technical testing 2015-09-01
</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>
<Calendar />
<Tree showLine switcherIcon={<DownOutlined />} defaultExpandedKeys={['0-0-0']}>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0">
<TreeNode title="leaf" key="0-0-0-0" />
<TreeNode title="leaf" key="0-0-0-1" />
<TreeNode title="leaf" key="0-0-0-2" />
</TreeNode>
<TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title="leaf" key="0-0-1-0" />
</TreeNode>
<TreeNode title="parent 1-2" key="0-0-2">
<TreeNode title="leaf" key="0-0-2-0" />
<TreeNode title="leaf" key="0-0-2-1" />
</TreeNode>
</TreeNode>
</Tree>
<Table columns={columns} dataSource={data} footer={() => 'Footer'} />
<Table
columns={columnsTable}
dataSource={dataTable}
pagination={false}
id="table-demo-summary"
bordered
summary={pageData => {
let totalBorrow = 0;
let totalRepayment = 0;
pageData.forEach(({ borrow, repayment }) => {
totalBorrow += borrow;
totalRepayment += repayment;
});
return (
<>
<tr>
<th>Total</th>
<td>
<Text type="danger">{totalBorrow}</Text>
</td>
<td>
<Text>{totalRepayment}</Text>
</td>
</tr>
<tr>
<th>Balance</th>
<td colSpan={2}>
<Text type="danger">{totalBorrow - totalRepayment}</Text>
</td>
</tr>
</>
);
}}
/>
<br />
<Table columns={columnsNest} expandable={{ expandedRowRender }} dataSource={dataNest} />
<Table columns={columnsFixed} dataSource={dataFixed} scroll={{ x: 1300, y: 100 }} />
<Card
hoverable
style={{ width: 240 }}
cover={
<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
}
>
<Meta title="Europe Street beat" description="www.instagram.com" />
</Card>
<Slider defaultValue={30} />
<DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} format="YYYY/MM/DD" />
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
</Modal>
</>
);
}
Example #13
| Source File: index.js From pretty-derby with GNU General Public License v3.0 | 4 votes |
|
RaceTimeline = React.memo((props) => {
const { t } = useTranslation();
const [showSpare, setShowSpare] = useState(false);
const db = useDB();
if (!db) return null;
const { showButton } = props;
const str = [];
const getDate = (i) => {
let year = Math.floor(i / 24) + 1;
let month = Math.floor((i - (year - 1) * 24) / 2) + 1;
month = month < 10 ? `\xa0\xa0${month}` : month;
let moment = i % 2 ? "后" : "前";
return `${year}年\xa0${month}月${moment}`;
};
const getColor = (grade) => {
switch (grade) {
case "G1":
return "blue";
case "G2":
return "pink";
case "G3":
return "green";
case "OP":
return "orange";
case "Pre-OP":
return "orange";
default:
return "gray";
}
};
for (let i = 13; i < 72; i++) {
let curRace, id, golds;
if (props.raceList && props.raceList[i]) {
id = props.raceList[i].id;
curRace = db.get("races").find({ id }).value();
golds = getGolds(curRace);
str.push(
<Timeline.Item label={getDate(i)} color="red" className="text-base" key={id}>
{`${curRace.grade} / ${curRace.distanceType} / ${curRace.distance} / ${curRace.name} / ${
props.raceList[i].goal || "参赛"
}
${golds ? " / " + golds : ""}`}
</Timeline.Item>
);
} else if (props.filterRace && props.filterRace[i]) {
props.filterRace[i].forEach((id, index) => {
curRace = db.get("races").find({ id }).value();
golds = getGolds(curRace);
str.push(
<Timeline.Item
label={index === 0 ? getDate(i) : null}
color={getColor(curRace.grade)}
style={{ fontSize: "14px" }}
key={id}
>
{`${curRace.grade} / ${curRace.distanceType} / ${curRace.distance} / ${curRace.name}
${golds ? " / " + golds : ""}`}
</Timeline.Item>
);
});
} else {
//普通
showSpare &&
str.push(
<Timeline.Item
label={getDate(i)}
color={getColor("normal")}
style={{ fontSize: "12px" }}
/>
);
}
}
return (
<>
{showButton && (
<Button onClick={() => setShowSpare(!showSpare)}>
{showSpare ? t("隐藏空闲月份") : t("显示空闲月份")}
</Button>
)}
<Timeline mode="left">{str}</Timeline>
</>
);
})
Example #14
| Source File: Timeline.jsx From Tai-Shang-NFT-Wallet with MIT License | 4 votes |
|
// displays a timeline for scaffold-eth usage
export default function TimelineDisplay(props) {
return (
<Timeline mode="right">
<Timeline.Item dot="?">
<Text delete>
Clone and Install from the{" "}
<a target="_blank" rel="noopener noreferrer" href="https://github.com/austintgriffith/scaffold-eth">
github repo
</a>
</Text>
</Timeline.Item>
<Timeline.Item dot="⚛️">
<Text delete>
Start your frontend app with: <Text strong>yarn start</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="⛓">
<Text delete={props.chainIsUp}>
Start your local blockchain with: <Text strong>yarn run chain</Text> (and refresh)
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text delete={props.hasOwner}>
Compile and deploy your smart contract: <Text strong>yarn run deploy</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text delete={props.isNotSmoort}>
Fix error in <Text code>SmartContractWallet.sol</Text> then: <Text strong>yarn run deploy</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot={<SendOutlined style={{ fontSize: "16px" }} />} color={props.hasEther ? "green" : "blue"}>
<Text delete={props.hasEther}>
Send test ether to your{" "}
<Blockies seed={(props.address ? props.address : "").toLowerCase()} size={8} scale={2} /> address using
(bottom left) faucet
</Text>
</Timeline.Item>
<Timeline.Item
dot={<DownloadOutlined style={{ fontSize: "16px" }} />}
color={props.contractHasEther ? "green" : "blue"}
>
<Text delete={props.contractHasEther}>
Deposit some funds into your{" "}
<Blockies seed={(props.contractAddress ? props.contractAddress : "").toLowerCase()} size={8} scale={2} />{" "}
smart contract wallet
</Text>
</Timeline.Item>
<Timeline.Item
dot={<EditOutlined style={{ fontSize: "16px" }} />}
color={props.amOwnerOfContract ? "green" : "blue"}
>
<Text delete={props.amOwnerOfContract}>
Set <b>owner</b> of your{" "}
<Blockies seed={(props.contractAddress ? props.contractAddress : "").toLowerCase()} size={8} scale={2} />{" "}
smart contract wallet to your{" "}
<Blockies seed={(props.address ? props.address : "").toLowerCase()} size={8} scale={2} /> address
</Text>
</Timeline.Item>
<Timeline.Item dot="☢️">
<Text>
Yikes, anyone can take ownership of <Text code>SmartContractWallet.sol</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text>
Test your contract with <Text code>buidler/test/myTest.js</Text> then:
<Text strong>yarn run test</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text>
Build something awesome with ? <a href="https://github.com/austintgriffith/scaffold-eth">scaffold-eth</a> and{" "}
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/austingriffith">
@ me
</a>
!
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text>
Read more about{" "}
<a target="_blank" rel="noopener noreferrer" href="https://ethereum.org/developers">
Ethereum
</a>
,{" "}
<a target="_blank" rel="noopener noreferrer" href="https://solidity.readthedocs.io/en/develop/contracts.html">
Solidity
</a>
, and{" "}
<a target="_blank" rel="noopener noreferrer" href="https://buidler.dev/tutorial">
Buidler
</a>
</Text>
</Timeline.Item>
</Timeline>
);
}
Example #15
| Source File: TimeLine.js From YApi-X with MIT License | 4 votes |
|
render() {
let data = this.props.newsData ? this.props.newsData.list : [];
const curDiffData = this.state.curDiffData;
let logType = {
project: '项目',
group: '分组',
interface: '接口',
interface_col: '接口集',
user: '用户',
other: '其他'
};
const children = this.state.apiList.map(item => {
let methodColor = variable.METHOD_COLOR[item.method ? item.method.toLowerCase() : 'get'];
return (
<Option title={item.title} value={item._id + ''} path={item.path} key={item._id}>
{item.title}{' '}
<Tag
style={{ color: methodColor ? methodColor.color : '#cfefdf', backgroundColor: methodColor ? methodColor.bac : '#00a854', border: 'unset' }}
>
{item.method}
</Tag>
</Option>
);
});
children.unshift(
<Option value="" key="all">
选择全部
</Option>
);
if (data && data.length) {
data = data.map((item, i) => {
let interfaceDiff = false;
// 去掉了 && item.data.interface_id
if (item.data && typeof item.data === 'object') {
interfaceDiff = true;
}
return (
<Timeline.Item
dot={
<Link to={`/user/profile/${item.uid}`}>
<Avatar src={`/api/user/avatar?uid=${item.uid}`} />
</Link>
}
key={i}
>
<div className="logMesHeade">
<span className="logoTimeago">{timeago(item.add_time)}</span>
{/*<span className="logusername"><Link to={`/user/profile/${item.uid}`}><Icon type="user" />{item.username}</Link></span>*/}
<span className="logtype">{logType[item.type]}动态</span>
<span className="logtime">{formatTime(item.add_time)}</span>
</div>
<span className="logcontent" dangerouslySetInnerHTML={{ __html: item.content }} />
<div style={{ padding: '10px 0 0 10px' }}>
{interfaceDiff && <Button onClick={() => this.openDiff(item.data)}>改动详情</Button>}
</div>
</Timeline.Item>
);
});
} else {
data = '';
}
let pending =
this.props.newsData.total <= this.props.curpage ? (
<a className="logbidden">以上为全部内容</a>
) : (
<a className="loggetMore" onClick={this.getMore.bind(this)}>
查看更多
</a>
);
if (this.state.loading) {
pending = <Spin />;
}
let diffView = showDiffMsg(jsondiffpatch, formattersHtml, curDiffData);
return (
<section className="news-timeline">
<Modal
style={{ minWidth: '800px' }}
title="Api 改动日志"
visible={this.state.visible}
footer={null}
onCancel={this.handleCancel}
>
<i>注： 绿色代表新增内容，红色代表删除内容</i>
<div className="project-interface-change-content">
{diffView.map((item, index) => {
return (
<AddDiffView
className="item-content"
title={item.title}
key={index}
content={item.content}
/>
);
})}
{diffView.length === 0 && <ErrMsg type="noChange" />}
</div>
</Modal>
{this.props.type === 'project' && (
<Row className="news-search">
<Col span="3">选择查询的 Api：</Col>
<Col span="10">
<AutoComplete
onSelect={this.handleSelectApi}
style={{ width: '100%' }}
placeholder="Select Api"
optionLabelProp="title"
filterOption={(inputValue, options) => {
if (options.props.value == '') return true;
if (
options.props.path.indexOf(inputValue) !== -1 ||
options.props.title.indexOf(inputValue) !== -1
) {
return true;
}
return false;
}}
>
{/* {children} */}
<OptGroup label="other">
<Option value="wiki" path="" title="wiki">
wiki
</Option>
</OptGroup>
<OptGroup label="api">{children}</OptGroup>
</AutoComplete>
</Col>
</Row>
)}
{data ? (
<Timeline className="news-content" pending={pending}>
{data}
</Timeline>
) : (
<ErrMsg type="noData" />
)}
</section>
);
}
Example #16
| Source File: ParticipantDetail.js From react-portal with MIT License | 4 votes |
|
ParticipantsDetails = props => {
const [info, setInfo] = useState(null);
const [eventsData, setEventsData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
(async () => {
setIsLoading(true);
try {
const params = { pid: props.participantId };
const { data } = await getParticipantsDetailService(params);
setInfo(data.profileData);
setEventsData(attendanceCalc(data.events));
setIsLoading(false);
} catch (err) {
_notification("warning", "Error", err.message);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const attendanceCalc = events => {
if (events) {
events.forEach(event => {
let start = new Date(event.details.startDate);
let end = new Date(event.details.endDate);
let data = [];
let dayAttend = [];
dayAttend = event.attendance.daysAttended.map(d => {
return d.split("T")[0];
});
let status;
for (let d = start; d <= end; d.setDate(d.getDate() + 1)) {
if (
dayAttend.includes(
moment(new Date(d)).format("YYYY-MM-DD")
)
) {
status = "Present";
} else if (
!dayAttend.includes(
moment(new Date(d)).format("YYYY-MM-DD")
) &&
moment(new Date(d)).format("YYYY-MM-DD") <
moment(Date.now()).format("YYYY-MM-DD")
) {
status = "Absent";
} else if (
!dayAttend.includes(
moment(new Date(d)).format("YYYY-MM-DD")
)
) {
status = "Pending";
}
data.push({
status,
date: moment(new Date(d)).format("YYYY-MM-DD")
});
}
event.attendance.dayWiseAttendance = data;
});
return events;
}
};
return (
<>
<Skeleton avatar loading={isLoading} active>
{info ? (
<Card loading={isLoading}>
<Card.Meta
avatar={
<Avatar src="https://avatars.dicebear.com/v2/identicon/12324.svg" />
}
title={`${info.name} (${info.email})`}
description={
<>
<PhoneOutlined /> {info.phone}{" "}
<InfoCircleOutlined /> {info.branch},{" "}
{info.year}
</>
}
/>
</Card>
) : null}
<br />
<br />
<h3>Events Information</h3>
<br />
<Timeline>
{eventsData.length !== 0 ? (
eventsData.map((event, id) => (
<Timeline.Item
key={id}
color={
event.status === "not attended"
? "red"
: "green"
}
>
<p>
<span style={{ fontWeight: "700" }}>
{event.details.title}
</span>{" "}
<Tag>{event.status.toUpperCase()}</Tag>
<Tag
color={
event.isRsvpAccepted
? "green"
: "red"
}
>
{event.isRsvpAccepted
? "RSVP: Accepted"
: "RSVP: Not Accepted"}
</Tag>
</p>
<p>{event.details.description}</p>
<p>
{new Date(
event.details.startDate
).toDateString()}{" "}
to{" "}
{new Date(
event.details.endDate
).toDateString()}{" "}
({event.details.venue})
</p>
<p style={{ fontWeight: "600" }}>Attendance</p>
<div style={{ display: "flex" }}>
{event.attendance.dayWiseAttendance &&
event.attendance.dayWiseAttendance.map(
(attendance, id) => {
return (
<Tag
key={id}
color={
attendance.status ===
"Pending"
? "#108ee9"
: attendance.status ===
"Present"
? "#87d068"
: "#f50"
}
>
{moment(
attendance.date
).format("DD/MM/YYYY")}
- {attendance.status}
</Tag>
);
}
)}
</div>
</Timeline.Item>
))
) : (
<div>Not regeistered in any Event</div>
)}
</Timeline>
</Skeleton>
</>
);
}
Example #17
| Source File: Timeline.jsx From moonshot with MIT License | 4 votes |
|
// displays a timeline for scaffold-eth usage
export default function TimelineDisplay(props) {
return (
<Timeline mode="right">
<Timeline.Item dot="?">
<Text delete>
Clone and Install from the{" "}
<a target="_blank" rel="noopener noreferrer" href="https://github.com/austintgriffith/scaffold-eth">
github repo
</a>
</Text>
</Timeline.Item>
<Timeline.Item dot="⚛️">
<Text delete>
Start your frontend app with: <Text strong>yarn start</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="⛓">
<Text delete={props.chainIsUp}>
Start your local blockchain with: <Text strong>yarn run chain</Text> (and refresh)
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text delete={props.hasOwner}>
Compile and deploy your smart contract: <Text strong>yarn run deploy</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text delete={props.isNotSmoort}>
Fix error in <Text code>SmartContractWallet.sol</Text> then: <Text strong>yarn run deploy</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot={<SendOutlined style={{ fontSize: "16px" }} />} color={props.hasEther ? "green" : "blue"}>
<Text delete={props.hasEther}>
Send test ether to your{" "}
<Blockies seed={(props.address ? props.address : "").toLowerCase()} size={8} scale={2} /> address using
(bottom left) faucet
</Text>
</Timeline.Item>
<Timeline.Item
dot={<DownloadOutlined style={{ fontSize: "16px" }} />}
color={props.contractHasEther ? "green" : "blue"}
>
<Text delete={props.contractHasEther}>
Deposit some funds into your{" "}
<Blockies seed={(props.contractAddress ? props.contractAddress : "").toLowerCase()} size={8} scale={2} />{" "}
smart contract wallet
</Text>
</Timeline.Item>
<Timeline.Item
dot={<EditOutlined style={{ fontSize: "16px" }} />}
color={props.amOwnerOfContract ? "green" : "blue"}
>
<Text delete={props.amOwnerOfContract}>
Set <b>owner</b> of your{" "}
<Blockies seed={(props.contractAddress ? props.contractAddress : "").toLowerCase()} size={8} scale={2} />{" "}
smart contract wallet to your{" "}
<Blockies seed={(props.address ? props.address : "").toLowerCase()} size={8} scale={2} /> address
</Text>
</Timeline.Item>
<Timeline.Item dot="☢️">
<Text>
Yikes, anyone can take ownership of <Text code>SmartContractWallet.sol</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text>
Test your contract with <Text code>buidler/test/myTest.js</Text> then:
<Text strong>yarn run test</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text>
Build something awesome with ? <a href="https://github.com/austintgriffith/scaffold-eth">scaffold-eth</a> and{" "}
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/austingriffith">
@ me
</a>
!
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text>
Read more about{" "}
<a target="_blank" rel="noopener noreferrer" href="https://ethereum.org/developers">
Ethereum
</a>
,{" "}
<a target="_blank" rel="noopener noreferrer" href="https://solidity.readthedocs.io/en/develop/contracts.html">
Solidity
</a>
, and{" "}
<a target="_blank" rel="noopener noreferrer" href="https://buidler.dev/tutorial">
Buidler
</a>
</Text>
</Timeline.Item>
</Timeline>
);
}
