import React, { useState } from 'react';
import Timeline from '../index';
import { Icon } from '../../index';
import { IconAlertTriangle } from '@douyinfe/semi-icons';
export default {
title: 'Timeline'
}
export const DefaultTimeline = () => (
创建服务现场
初步排除网络异常
技术测试异常
网络异常正在修复
);
DefaultTimeline.story = {
name: 'default Timeline',
};
export const Color = () => (
创建服务现场
初步排除网络异常
技术测试异常
网络异常正在修复
);
Color.story = {
name: 'color',
};
export const Custom = () => (
创建服务现场
初步排除网络异常
} type="warning">
技术测试异常
初步排除网络异常
);
Custom.story = {
name: 'custom',
};
export const Mode = () => (
}>创建服务现场
}>初步排除网络异常
}>技术测试异常
}>网络异常正在修复
}>创建服务现场
}>初步排除网络异常
技术测试异常
网络异常正在修复
}>创建服务现场
}>初步排除网络异常
技术测试异常
网络异常正在修复
创建服务现场
}>初步排除网络异常
技术测试异常
网络异常正在修复
);
Mode.story = {
name: 'mode',
};
const data = [
{
time: '2019-07-14 10:35',
extra: '节点辅助说明信息',
content: '创建服务现场',
type: 'ongoing',
},
{
time: '2019-06-13 16:17',
extra: '节点辅助说明信息',
content: (
初步排除网络异常
),
color: 'pink',
},
{
time: '2019-05-14 18:34',
extra: '节点辅助说明信息',
dot: ,
content: '技术测试异常',
type: 'warning',
},
{
time: '2019-05-09 09:12',
extra: '节点辅助说明信息',
content: '网络异常正在修复',
dot: ,
type: 'success',
},
];
export const DataSource = () => (
);
DataSource.story = {
name: 'dataSource',
};
const dataWithOnClick = [
{
time: '2019-07-14 10:35',
extra: '节点辅助说明信息',
content: '创建服务现场',
type: 'ongoing',
onClick: e => console.log(e, '创建服务现场'),
},
{
time: '2019-06-13 16:17',
extra: '节点辅助说明信息',
content: 初步排除网络异常,
color: 'pink',
onClick: e => console.log(e, '初步排除网络异常'),
},
{
time: '2019-05-14 18:34',
extra: '节点辅助说明信息',
dot: ,
content: '技术测试异常',
type: 'warning',
onClick: e => console.log(e, '技术测试异常'),
},
{
time: '2019-05-09 09:12',
extra: '节点辅助说明信息',
content: '网络异常正在修复',
type: 'success',
onClick: e => console.log(e, '网络异常正在修复'),
}
];
export const OnClickDemo = () => (
console.log(e, '创建服务现场')}>创建服务现场
console.log(e, '初步排除网络异常')}>初步排除网络异常
console.log(e, '技术测试异常')}>技术测试异常
console.log(e, '网络异常正在修复')}>网络异常正在修复
);
OnClickDemo.story = {
name: 'onClick',
};