antd#Pagination JavaScript Examples
The following examples show how to use
antd#Pagination.
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: tableList.js From doraemon with GNU General Public License v3.0 | 7 votes |
|
render() {
const {
currentPage,
pageSize,
totalCount,
onShowSizeChange,
onChange,
columns,
} = this.props
const hasMultiHead = columns.filter(one => !!one.children).length > 0
return (
<div className={`table-content ${hasMultiHead ? 'clear-overlap-border' : ''}`}>
<Table
pagination={false}
bordered
rowKey="id"
// rowClassName={this.props.rowClassName}
{...this.props}
/>
{ currentPage ?
<Pagination
total={totalCount || 0}
showSizeChanger // 是否可以改变pageSize
showQuickJumper={false}// 是否可以快速跳转某一页
onShowSizeChange={onShowSizeChange}
onChange={onChange}
showTotal={_totalCount => `共 ${_totalCount} 条`}
current={currentPage || 1}
pageSize={pageSize || 10}
{...this.props}
/> : null
}
</div>
)
}
Example #2
| Source File: index.js From ant-simple-pro with MIT License | 6 votes |
|
Pagation = memo(function Pagation({ pageSizeOptions, defaultPageSize, total = 0, onChanges, ...props }) {
const Change = (page, pageSize) => {
onChanges && onChanges(page, pageSize);
backTopAnimate(document.querySelector('#content'));
}
return (
<>
{total ? <Pagination {...props} showSizeChanger showQuickJumper total={total} showTotal={total => `共 ${total} 页`}
onChange={Change} onShowSizeChange={Change} pageSizeOptions={pageSizeOptions}
defaultPageSize={defaultPageSize} style={{ marginTop: '20px' }} defaultCurrent={1} /> : null}
</>
)
})
Example #3
| Source File: index.js From gobench with Apache License 2.0 | 6 votes |
|
EcommerceProductCatalog = () => {
return (
<div>
<Helmet title="Ecommerce: Product Catalog" />
<div className="cui__utils__heading">
<strong>Ecommerce: Product Catalog</strong>
</div>
<div className="mb-4">
<Pagination defaultCurrent={6} total={500} showSizeChanger />
</div>
<div className="row">
{productsData.map(product => {
const { isNew, isFavorite, image, name, price, oldPrice } = product
return (
<div className="col-xl-4 col-lg-6" key={Math.random()}>
<General16
isNew={isNew}
isFavorite={isFavorite}
image={image}
name={name}
price={price}
oldPrice={oldPrice}
/>
</div>
)
})}
</div>
<Pagination defaultCurrent={6} total={500} showSizeChanger />
</div>
)
}
Example #4
| Source File: changer.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/pagination', module).add('changer', () =>
<>
<Pagination
showSizeChanger
onShowSizeChange={onShowSizeChange}
defaultCurrent={3}
total={500}
/>
<br />
<Pagination
showSizeChanger
onShowSizeChange={onShowSizeChange}
defaultCurrent={3}
total={500}
disabled
/>
</>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Change <code>pageSize</code>.</p></>) } });
Example #5
| Source File: index.js From Webiu with MIT License | 6 votes |
|
ListPagination = ({ pageSize, total, onChange }) => {
return (
<div className="list-pagination-component">
<Pagination
defaultCurrent={1}
pageSize={pageSize}
total={total}
onChange={page => {
window.scrollTo(0, 0)
onChange(page)
}}
hideOnSinglePage
/>
</div>
)
}
Example #6
| Source File: mini.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/pagination', module).add('mini', () =>
<>
<Pagination size="small" total={50} />
<Pagination size="small" total={50} showSizeChanger showQuickJumper />
<Pagination size="small" total={50} showTotal={showTotal} />
<Pagination
size="small"
total={50}
disabled
showTotal={showTotal}
showSizeChanger
showQuickJumper
/>
</>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Mini size pagination.</p></>) } });
Example #7
| Source File: index.jsx From mixbox with GNU General Public License v3.0 | 5 votes |
|
render() {
const {
size,
showSizeChanger,
showQuickJumper,
showMessage,
pageSize,
pageNum,
total,
onPageNumChange,
onPageSizeChange,
} = this.props;
const props = {};
if (showSizeChanger) {
props.showSizeChanger = true;
}
if (showQuickJumper) {
props.showQuickJumper = true;
}
const totalPage = Math.ceil(total / pageSize);
let style = this.props.style;
if (total <= 0) {
style = {/* display: 'none', */ ...style};
}
return (
<div className="pagination-wrap" style={style}>
<Pagination
{...props}
size={size}
pageSizeOptions={['10', '15', '20', '30', '50', '100']}
onShowSizeChange={(num, size) => onPageSizeChange(size)}
onChange={(num) => onPageNumChange(num)}
defaultCurrent={1}
pageSize={pageSize}
current={pageNum}
total={total}
/>
{showMessage ? (
<div className="total-count">
共{totalPage}页 {total}条数据
</div>
) : null}
</div>
);
}
Example #8
| Source File: locale.jsx From virtuoso-design-system with MIT License | 5 votes |
|
render() {
const info = () => {
Modal.info({
title: 'some info',
content: 'some info',
});
};
const confirm = () => {
Modal.confirm({
title: 'some info',
content: 'some info',
});
};
return (
<div className="locale-components">
<div className="example">
<Pagination defaultCurrent={1} total={50} showSizeChanger />
</div>
<div className="example">
<Select showSearch style={{ width: 200 }}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
</Select>
<DatePicker />
<TimePicker />
<RangePicker style={{ width: 200 }} />
</div>
<div className="example">
<Button type="primary" onClick={this.showModal}>
Show Modal
</Button>
<Button onClick={info}>Show info</Button>
<Button onClick={confirm}>Show confirm</Button>
<Popconfirm title="Question?">
<a href="#">Click to confirm</a>
</Popconfirm>
</div>
<div className="example">
<Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
</div>
<div className="site-config-provider-calendar-wrapper">
<Calendar fullscreen={false} value={moment()} />
</div>
<div className="example">
<Table dataSource={[]} columns={columns} />
</div>
<Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
<p>Locale Modal</p>
</Modal>
</div>
);
}
Example #9
| Source File: daily_overview_table.js From art-dashboard-ui with Apache License 2.0 | 5 votes |
|
render() {
const table_columns = [
{
title: "Date",
dataIndex: "date",
key: "date",
render: (data, record) => {
return (
<div>
<Link to={`/health/daily/detail/${record["date"]}`}>
<p>{record["date"]}</p>
</Link>
</div>
)
}
},{
title: "Total Builds",
dataIndex: "total",
key: "total"
},{
title: "Successful Builds",
dataIndex: "success",
key: "success"
},{
title: "Failed Builds",
dataIndex: "failure",
key: "failure"
},{
title: "Build Success Rate",
dataIndex: "success_rate",
key: "success_rate"
},{
title: "Build History",
render: (data, record) => {
return(
<div>
<Link to={`/health/daily/build/${record["date"]}/?type=all`}>
<p>{record["date"]}</p>
</Link>
</div>
)
}
}
]
return(
<div
style={{padding: "30px"}}>
<Table dataSource={this.state.table_data}
columns={table_columns}
pagination={<Pagination defaultCurrent={0}/>}
/>
</div>
)
}
Example #10
| Source File: index.js From egoshop with Apache License 2.0 | 5 votes |
|
render() {
const { visible, close, onOk, multiSelect, goodsList, goodsListLoading, dispatch } = this.props;
if (goodsList) {
const { total_number, list } = goodsList;
const { page, rows, checkedData } = this.state;
return (
<Modal
title="添加商品"
cancelText='取消'
okText='确定'
visible={visible}
style={{ top: 20 }}
width={756}
onCancel={() => {
close();
}}
onOk={() => {
onOk(checkedData);
this.setState({ checkedData: [] });
}}
footer={multiSelect ? <div>
<Button type="primary" onClick={() => {
onOk(checkedData);
this.setState({ checkedData: [] });
}}>确认</Button>
</div> : null}
>
<Spin spinning={goodsListLoading}>
<View className={styles.goodsList}>
<View className={styles.goodsListTop}>
<Search
placeholder="请输入商品名称"
onSearch={(value) => {
dispatch({
type: "goods/list",
payload: {
page,
rows,
title: value
}
})
}}
style={{ width: 200 }}
/>
</View>
<ScrollView className={styles.scrollView}>
{
list.map((item, i) => {
const index = checkedData.findIndex((e) => e.id === item.id);
const checked = index !== -1;
const onPress = () => {
let _checkedData = checkedData;
if (checked) {
_checkedData.splice(index, 1);
this.setState({
checkedData: _checkedData
});
} else {
_checkedData = multiSelect ? [..._checkedData, item] : [item];
this.setState({
checkedData: _checkedData
}, () => {
!multiSelect ? onOk(this.state) : null;
});
}
};
return (
<View className={styles.view1} key={i}>
<Checkbox
checked={checked}
onChange={(e) => {
onPress();
}}
/>
<View
className={styles.goodsListItem}
onClick={() => {
onPress();
}}
>
<View className={styles.itemLeft}>
<Image
type='goods'
src={item.img}
/>
<View className={styles.itemText}>
<p>{item.title}</p>
<span>￥{item.price}</span>
</View>
</View>
</View>
</View>
);
})
}
</ScrollView>
<View className={styles.paginationView}>
<Pagination
size="small"
showSizeChanger={false}
showQuickJumper={false}
pageSize={rows}
total={total_number}
current={page}
onChange={(current, pageSize) => {
this.setState({
page: current,
rows: pageSize
}, () => {
this.initList();
});
}}
onShowSizeChange={(current, pageSize) => {
this.setState({
page: current,
rows: pageSize
}, () => {
this.initList();
});
}}
/>
</View>
</View>
</Spin>
</Modal>
);
} else {
return null;
}
}
Example #11
| Source File: OrderBaseTable.js From loopring-pay with Apache License 2.0 | 5 votes |
|
SmallPagination = styled(Pagination)`
padding: 2px 8px !important;
text-align: right;
`
Example #12
| Source File: Pagination.jsx From ResoBin with MIT License | 5 votes |
|
StyledPagination = styled(Pagination)`
display: flex;
justify-content: center;
margin-bottom: 1rem;
.ant-pagination-prev,
.ant-pagination-next {
display: flex;
align-items: center;
.ant-pagination-item-link {
${baseStyles}
color: ${({ theme }) => theme.primary};
background: transparent;
}
}
.ant-pagination-disabled {
display: none;
}
.ant-pagination-item {
${baseStyles}
font-weight: 600;
&-active {
border: 2px solid ${({ theme }) => rgba(theme.primary, 0.7)};
}
a {
color: ${({ theme }) => theme.primary};
font-weight: 600;
font-size: 0.875rem;
}
}
.ant-pagination-jump-next,
.ant-pagination-jump-prev {
${baseStyles}
.ant-pagination-item-link-icon {
color: ${({ theme }) => theme.primary};
font-size: 0.75rem;
}
.ant-pagination-item-ellipsis {
position: absolute;
top: -4px;
right: 0;
left: -4px;
color: ${({ theme }) => theme.primary};
font-size: 0.75rem;
}
}
.anticon {
display: flex;
align-items: center;
}
`
Example #13
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
ExtraAppsWordpressPosts = () => {
return (
<div>
<Helmet title="Wordpress Posts" />
<div className="row">
<div className="col-xl-9 col-lg-12">
<div className="card">
<div className="card-body">
<div className="mb-2">
<a
href="#"
onClick={e => e.preventDefault()}
className="text-dark font-size-24 font-weight-bold"
>
[Feature Request] How to enable custom font that comes from svg #2460
</a>
</div>
<div className="mb-3">
<a className="font-weight-bold" href="#" onClick={e => e.preventDefault()}>
zxs2162
</a>{' '}
wrote this post 12 days ago · 0 comments
</div>
<div className="mb-4">
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
Umi
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
React-framework
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
Umijs
</a>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum est
perferendis consectetur corporis esse labore minima molestias, exercitationem
consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
laborum est perferendis consectetur corporis esse labore minima molestias,
exercitationem consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil laborum est perferendis consectetur corporis esse labore minima
molestias, exercitationem consequuntur! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nihil laborum est perferendis consectetur corporis esse labore
minima molestias, exercitationem consequuntur!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum est
perferendis consectetur corporis esse labore minima molestias, exercitationem
consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
laborum est perferendis consectetur corporis esse labore minima molestias,
exercitationem consequuntur!
</p>
</div>
</div>
</div>
<div className="card">
<div className="card-body">
<div className="mb-2">
<a
href="#"
onClick={e => e.preventDefault()}
className="text-dark font-size-24 font-weight-bold"
>
London's mayor compared President Trump to an 11-year-old child
</a>
</div>
<div className="mb-3">
<a className="font-weight-bold" href="#" onClick={e => e.preventDefault()}>
hepu
</a>{' '}
wrote this post 12 days ago · 0 comments
</div>
<div className="mb-4">
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
Umi
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
React-framework
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
Umijs
</a>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum est
perferendis consectetur corporis esse labore minima molestias, exercitationem
consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
laborum est perferendis consectetur corporis esse labore minima molestias,
exercitationem consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil laborum est perferendis consectetur corporis esse labore minima
molestias, exercitationem consequuntur! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nihil laborum est perferendis consectetur corporis esse labore
minima molestias, exercitationem consequuntur!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum est
perferendis consectetur corporis esse labore minima molestias, exercitationem
consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
laborum est perferendis consectetur corporis esse labore minima molestias,
exercitationem consequuntur!
</p>
</div>
</div>
</div>
<div className="card">
<div className="card-body">
<div className="mb-2">
<a
href="#"
onClick={e => e.preventDefault()}
className="text-dark font-size-24 font-weight-bold"
>
What D-Day taught my grandpa
</a>
</div>
<div className="mb-3">
<a className="font-weight-bold" href="#" onClick={e => e.preventDefault()}>
Dankin
</a>{' '}
wrote this post 12 days ago · 0 comments
</div>
<div className="mb-4">
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
Umi
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
React-framework
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
Umijs
</a>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum est
perferendis consectetur corporis esse labore minima molestias, exercitationem
consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
laborum est perferendis consectetur corporis esse labore minima molestias,
exercitationem consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil laborum est perferendis consectetur corporis esse labore minima
molestias, exercitationem consequuntur! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nihil laborum est perferendis consectetur corporis esse labore
minima molestias, exercitationem consequuntur!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laborum est
perferendis consectetur corporis esse labore minima molestias, exercitationem
consequuntur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
laborum est perferendis consectetur corporis esse labore minima molestias,
exercitationem consequuntur!
</p>
</div>
</div>
</div>
<Pagination defaultCurrent={1} total={50} />
</div>
<div className="col-xl-3 col-lg-12">
<div className="pb-4 mb-3 border-bottom">
<label className="font-weight-bold d-block" htmlFor="search-input">
<span className="mb-2 d-inline-block">Search Post</span>
<input
className="form-control width-100p"
type="text"
placeholder="Search post..."
id="search-input"
/>
</label>
</div>
<div className="pb-4 mb-3 border-bottom">
<label className="font-weight-bold d-block" htmlFor="subscribe-input">
<span className="mb-2 d-inline-block">Subscribe</span>
<input
className="form-control width-100p"
type="text"
id="subscribe-input"
placeholder="Enter your email..."
/>
</label>
</div>
<div className="pb-4 mb-3 border-bottom">
<div className="font-weight-bold mb-2">Categories</div>
<div>
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
Umi
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
React-framework
</a>
<a
href="#"
onClick={e => e.preventDefault()}
className="badge text-blue text-uppercase bg-light font-size-12 mr-2"
>
Umijs
</a>
</div>
</div>
<div className="pb-4 mb-3 border-bottom">
<div className="font-weight-bold mb-3">Latest Posts</div>
<List15 />
</div>
</div>
</div>
</div>
)
}
Example #14
| Source File: history.jsx From juno with Apache License 2.0 | 5 votes |
|
function History(props) {
const { current, activeId, onChange, selectedService } = props;
const [pagination, setPagination] = useState({
current: 0,
pageSize: 8,
total: 0,
});
const [historyList, setHistoryList] = useState([]);
const [loading, setLoading] = useState(false);
const loadHistory = (page) => {
setLoading(true);
loadHistoryList({
page: page,
page_size: 8,
service_id: selectedService[1],
}).then((r) => {
setLoading(false);
if (r.code === 14000) {
return;
}
if (r.code !== 0) {
message.error(r.msg);
return;
}
setHistoryList(r.data.list);
setPagination(r.data.pagination);
});
};
useEffect(() => {
if (selectedService && selectedService[1]) {
// load history
loadHistory(current);
}
}, [selectedService]);
if (!historyList) return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
return (
<Spin spinning={loading}>
<ul className={styles.list}>
{historyList.map((item, idx) => {
return (
<li
onClick={() => {
onChange(item.id);
}}
className={styles.listItem + (activeId === item.id ? ' ' + styles.activeItem : '')}
key={idx}
>
<div className={styles.listItemBox}>
<div className={styles.statusIcon}>
{item.test_passed ? (
<CheckCircleOutlined style={{ color: 'green' }} />
) : (
<CloseCircleOutlined style={{ color: 'red' }} />
)}
</div>
<div className={styles.info}>
<div className={styles.methodName}>{item.method_name}</div>
<div>Time: {item.time_cost} ms</div>
<div>{item.created_at}</div>
</div>
</div>
</li>
);
})}
</ul>
<Pagination
simple
onChange={(page, pageSize) => {
loadHistory(page - 1);
}}
current={pagination.current + 1}
pageSize={pagination.pageSize}
total={pagination.total}
/>
</Spin>
);
}
Example #15
| Source File: list.js From AgileTC with Apache License 2.0 | 5 votes |
|
render() {
const {
list,
current,
expendKeys,
// loading,
requirementSeach,
fetching,
ownerList,
} = this.state;
const { total, loading } = this.props;
return (
<div>
<Table
columns={this.setColumns()}
dataSource={list}
expandedRowRender={item => this.renderExpand(item)}
className="table-wrap"
onExpand={this.onExpand}
expandedRowKeys={expendKeys}
rowKey="id"
size="middle"
loading={loading}
pagination={false}
expandIcon={props => {
if (props.record.recordNum > 0) {
if (!props.expanded) {
return (
<div
role="button"
tabIndex="0"
className="ant-table-row-expand-icon ant-table-row-collapsed"
aria-label="展开行"
onClick={() => {
let extendLoading = this.state.extendLoading.set(
props.record.id,
true,
);
this.setState({ extendLoading });
this.seeDetail(props);
}}
></div>
);
} else {
return (
<div
role="button"
tabIndex="0"
className="ant-table-row-expand-icon ant-table-row-expanded"
aria-label="关闭行"
onClick={() => {
this.seeDetail(props);
}}
></div>
);
}
} else {
return null;
}
}}
footer={currentData => (
<div style={{ height: '32px' }}>
{
<div
className="pagination"
style={{
display: total === 0 ? 'none' : 'block',
float: 'right',
}}
>
<Pagination
onChange={this.onChangePagination}
current={current}
total={Number(total)}
pageSize={10}
/>
</div>
}
</div>
)}
/>
<TaskModal
key="id"
visible={this.state.taskVisible}
caseInfo={this.state.caseInfo}
onClose={this.onCloseTask}
handleOkTask={this.handleOkTask}
showTask={this.showTask}
getOwnerList={this.getOwnerList}
ownerList={ownerList}
fetching={fetching}
requirementSeach={requirementSeach}
clearRequire={this.clearRequire}
record={this.state.record}
type={this.props.type}
doneApiPrefix={this.props.doneApiPrefix}
titleModeTask={this.state.titleModeTask}
getCaseInfo={this.getCaseInfo}
/>
</div>
);
}
Example #16
| Source File: TrackMentors.js From codeclannigeria-frontend with MIT License | 5 votes |
|
TrackMentors = ({ mentors }) => {
const [currentPage, setCurrentPage] = useState(1);
// eslint-disable-next-line
const [cardPerPage, setCardperPage] = useState(3);
const indexOfLastCard = currentPage * cardPerPage;
const indexOfFirstCard = indexOfLastCard - cardPerPage;
const paginate = pageNumber => setCurrentPage(pageNumber);
const currentCards = mentors
? shuffleArray(mentors.items).slice(indexOfFirstCard, indexOfLastCard)
: null;
return (
<React.Fragment>
<SingleMentorCardStyled>
{currentCards.map(item => (
<div className="radio-options">
<Radio.Button value={item.id}>
<SingleMentorCard mentor={item} key={item} />
</Radio.Button>
</div>
))}
</SingleMentorCardStyled>
<div
style={{
display: 'flex',
justifyContent: 'flex-end',
marginTop: '1rem',
}}
>
<Pagination
// postPerPage={postPerPage}
total={mentors.items.length}
defaultCurrent={currentPage}
// paginate={paginate}
onChange={paginate}
pageSize={cardPerPage}
showSizeChanger={false}
/>
</div>
</React.Fragment>
);
}
Example #17
| Source File: simple.jsx From virtuoso-design-system with MIT License | 5 votes |
|
storiesOf('antd/pagination', module).add('simple', () =>
<>
<Pagination simple defaultCurrent={2} total={50} />
<br />
<Pagination disabled simple defaultCurrent={2} total={50} />
</>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Simple mode.</p></>) } });
Example #18
| Source File: OrderBaseTable.js From dexwebapp with Apache License 2.0 | 5 votes |
|
SmallPagination = styled(Pagination)`
padding: 2px 8px !important;
text-align: right;
`
Example #19
| Source File: controlled.jsx From virtuoso-design-system with MIT License | 5 votes |
|
render() {
return <Pagination current={this.state.current} onChange={this.onChange} total={50} />;
}
Example #20
| Source File: index.js From peppermint with GNU Affero General Public License v3.0 | 5 votes |
|
export default function ListTodo() {
const { status, error, data, refetch } = useQuery("repoData", getTodos);
const [minValue, setMinValue] = useState(0);
const [maxValue, setMaxValue] = useState(7);
const [text, setText] = useState("");
function handleChange(value) {
if (value <= 1) {
setMinValue(0);
setMaxValue(7);
} else {
setMinValue(maxValue);
setMaxValue(value * 7);
}
}
async function onSubmit() {
await fetch("/api/v1/todo/create", {
method: "POST",
body: JSON.stringify({
todo: text,
}),
}).then(() => {
refetch();
setText("");
});
}
async function deleteTodo(id) {
await fetch(`api/v1/todo/delete/${id}`, {
method: "POST",
}).then(() => refetch());
}
async function markDone(id) {
await fetch(`api/v1/todo/mark-done/${id}`, {
method: "POST",
}).then(() => refetch());
}
const handleKeyDown = (event) => {
if (event.key === "Enter") {
onSubmit();
}
};
return (
<div>
<div className="flex flex-row w-full">
<div className="mt-1 relative shadow-sm w-full space-x-2">
<input
type="text"
name="text"
id="text"
className="w-full text-gray-900 border-none focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm "
placeholder="Enter todo here..."
onChange={(e) => {
setText(e.target.value);
}}
onKeyDown={handleKeyDown}
value={text}
/>
</div>
<button type="button" onClick={() => onSubmit()} className="ml-4">
<ArrowRightIcon className="h-6 w-6" />
</button>
</div>
{status === "success" && (
<div>
<div className="mt-4">
{data.todos ? (
data.todos.slice(minValue, maxValue).map((todo) => {
return (
<div className="flex flex-col" key={todo.id}>
<ul>
<li>
<span className={todo.done ? "line-through" : ""}>
{todo.text}
</span>
<button
onClick={() => deleteTodo(todo.id)}
type="button"
className="float-right border border-transparent rounded-full shadow-sm text-red-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<TrashIcon className="h-5 w-5" aria-hidden="true" />
</button>
</li>
</ul>
</div>
);
})
) : (
<p>None Found</p>
)}
</div>
<Pagination
className={data.todos.length > 7 ? "mt-2" : "hidden"}
defaultCurrent={1}
total={12}
onChange={handleChange}
/>
</div>
)}
</div>
);
}
Example #21
| Source File: alerts.js From doraemon with GNU General Public License v3.0 | 5 votes |
|
render() {
const { dataSource, page, labalWidth } = this.state
const { getFieldDecorator } = this.props.form
const columns = [
{ title: 'id', align: 'center', dataIndex: 'id', sorter: (a, b) => a.id - b.id },
{
title: 'Rule ID',
align: 'center',
dataIndex: 'rule_id',
render: ruleId => (<Link to={`/rules?id=${ruleId}`}>{ruleId}</Link>),
},
{ title: '报警值', align: 'center', dataIndex: 'value' },
{
title: '当前状态',
align: 'center',
dataIndex: 'status',
render: status => (
<span>{status === 2 ? '报警' : status === 0 ? '恢复' : '已确认'}</span>
),
},
{
title: '异常分钟数',
align: 'center',
dataIndex: 'count',
render: count => (
<span>{count+1}</span>
),
},
{ title: '标题', align: 'center', dataIndex: 'summary', width: 100 },
{
title: 'label',
align: 'center',
dataIndex: 'labels',
width: labalWidth,
render: (labels) => {
if (labels && Object.prototype.toString.call(labels) === '[object Object]') {
return Object.keys(labels).map(key => <Tag color="cyan" style={{ marginTop: '5px' }}>{key}: {labels[key]}</Tag>)
}
return '-'
},
},
{ title: '描述', align: 'center', dataIndex: 'description' },
{ title: '确认人', align: 'center', dataIndex: 'confirmed_by' },
{
title: '触发时间',
align: 'center',
dataIndex: 'fired_at',
width: tableTimeWidth,
render: firedAt => (
<span>{firedAt === '0001-01-01T00:00:00Z' ? '--' : moment(firedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
),
},
{
title: '确认时间',
align: 'center',
dataIndex: 'confirmed_at',
width: tableTimeWidth,
render: confirmedAt => (
<span>{confirmedAt === '0001-01-01T00:00:00Z' ? '--' : moment(confirmedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
),
},
{
title: '确认截止时间',
align: 'center',
dataIndex: 'confirmed_before',
width: tableTimeWidth,
render: confirmedBefore => (
<span>{confirmedBefore === '0001-01-01T00:00:00Z' ? '--' : moment(confirmedBefore).format('YYYY.MM.DD HH:mm:ss')}</span>
),
},
{
title: '恢复时间',
align: 'center',
dataIndex: 'resolved_at',
width: tableTimeWidth,
render: resolvedAt => (
<span>{resolvedAt === '0001-01-01T00:00:00Z' ? '--' : moment(resolvedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
),
},
]
return (
<div>
<Form layout="inline" onSubmit={this.handleSearch}>
<Form.Item label="标题">
{getFieldDecorator('summary', {})(<Input placeholder="请输入标题" />)}
</Form.Item>
<Form.Item label="状态">
{getFieldDecorator('status', {
initialValue: -1,
})(<Select>
<Option value={-1}>所有</Option>
<Option value={0}>恢复</Option>
<Option value={1}>已确认</Option>
<Option value={2}>报警</Option>
</Select>)}
</Form.Item>
<Form.Item label="报警时间" style={{ marginBottom: 0 }}>
<Form.Item style={{ marginRight: 0 }}>
{getFieldDecorator('timestart', {})(<DatePicker
format="YYYY-MM-DD HH:mm:ss"
showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
placeholder="报警开始时间"
/>)}
</Form.Item>
<span style={{ width: '24px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>~</span>
<Form.Item style={{ marginBottom: 0 }}>
{getFieldDecorator('timeend', {})(<DatePicker
format="YYYY-MM-DD HH:mm:ss"
showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
placeholder="报警结束时间"
/>)}
</Form.Item>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item>
</Form>
<Table dataSource={dataSource} columns={columns} pagination={false} scroll={{ x: 1300 }} rowKey="id" />
<div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: '15px' }}>
<Pagination onChange={this.pageChange} current={page.current} pageSize={page.size} total={page.total} />
</div>
</div>
)
}
Example #22
| Source File: index.js From topology-react with MIT License | 5 votes |
|
Home = ({ history }) => {
const [list, setList] = useState([]);
const [currentPageIndex, setCurrentPageIndex] = useState(1);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false);
useEffect(() => {
async function loadData() {
try {
await setLoading(true);
const data = await getListByPage(currentPageIndex);
setList(data.list);
setTotal(data.count);
message.success('加载成功!');
} catch (error) {
message.error('加载失败!');
} finally {
await setLoading(false);
}
}
loadData()
}, [currentPageIndex]);
const onHandlePageChange = (page, size) => {
setCurrentPageIndex(page);
}
const renderCardList = useMemo(() => {
const onHandleDetail = item => {
history.push({ pathname: '/workspace', state: { id: item.id } });
};
return list.map(item => <Col style={{ margin: '10px 0px' }} key={item.id} span={6}>
<Card
loading={loading}
hoverable
title={item.name}
bordered={false}
cover={<Spin spinning={loading}><div onClick={() => onHandleDetail(item)} style={{ height: 200, padding: 10, textAlign: 'center' }}><img alt="cover" style={{ height: '100%', width: '100%' }} src={`http://topology.le5le.com${item.image}`} /></div></Spin>}
extra={[
<div key="like" style={{ display: 'inline', }}><Icon type="like" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.star}</b></div>,
<div key="heart" style={{ display: 'inline', marginLeft: 10 }}><Icon type="heart" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.recommend}</b></div>
]}
>
<Meta
title={item.username}
avatar={<Avatar style={{ backgroundColor: colorList[Math.ceil(Math.random() * 4)], verticalAlign: 'middle' }} size="large">{item.username.slice(0, 1)}</Avatar>}
description={item.desc || '暂无描述'}
style={{ height: 80, overflow: 'hidden' }}
/>
</Card>
</Col>)
}, [list, loading, history])
return (
<div style={{ background: '#ECECEC', padding: '30px 200px', height: '100vh', overflow: 'auto' }}>
<Row gutter={16}>
{
renderCardList
}
</Row>
<Pagination style={{ textAlign: 'center', marginTop: 30 }} current={currentPageIndex} total={total} onChange={onHandlePageChange} />
</div>
);
}
Example #23
| Source File: Table.jsx From React-Nest-Admin with MIT License | 5 votes |
|
render() {
const { data } = this.props;
return (
<>
<Table
dataSource={data}
rowKey={record => record._id}
pagination={false}
>
<Column title="文件名" dataIndex="fileName" key="fileName" />
<Column
title="上传者"
dataIndex="uploader"
key="uploader"
render={record => (
<span>
{record === "admin" ? (
<Tag color="geekblue">admin</Tag>
) : (
record
)}
</span>
)}
/>
<Column
title="上传时间"
dataIndex="timeOfUpload"
key="timeOfUpload"
render={record => <span>{numberToTime(record)}</span>}
/>
<Column
title="文件大小"
dataIndex="fileSize"
key="fileSize"
render={record => <span>{kbToMb(record)}</span>}
/>
<Column
title="操作"
key="action"
render={record => (
<span>
<DeleteOutlined
onClick={() =>
this.deleteHanler(record["_id"], record["filePath"])
}
/>
</span>
)}
/>
</Table>
<div
style={{
display: "flex",
justifyContent: "flex-end",
paddingTop: "20px",
paddingRight: "20px"
}}
>
<Pagination
defaultCurrent={1}
defaultPageSize={10}
total={50}
hideOnSinglePage
/>
</div>
</>
);
}
Example #24
| Source File: pendingTasks.js From codeclannigeria-frontend with MIT License | 5 votes |
|
function PendingTasks({ tasksData, track, completed, taskTableHeader }) {
const [currentPage, setCurrentPage] = useState(1);
// eslint-disable-next-line
const [cardPerPage, setCardperPage] = useState(3);
const indexOfLastCard = currentPage * cardPerPage;
const indexOfFirstCard = indexOfLastCard - cardPerPage;
const paginate = pageNumber => setCurrentPage(pageNumber);
const currentTasks =
tasksData && tasksData.items
? tasksData.items.slice(indexOfFirstCard, indexOfLastCard)
: null;
return (
<PendingTaskStyled>
<div className="pending-tasks-wrap">
<div className="header">
<p className="">{taskTableHeader}</p>
</div>
<div className="solid-bar"></div>
<div className="pending-tasks">
{currentTasks ? (
currentTasks.map((data, idx) => (
<SinglePendingTask
key={idx}
data={data}
track={track}
completed={completed}
/>
))
) : (
<p className="ml-2">No task yet</p>
)}
</div>
<div className="pagination">
{/* <Link className="next-button" to="#">
Next
</Link> */}
{tasksData ? (
<Pagination
className="p-1"
// postPerPage={postPerPage}
total={tasksData.items.length}
defaultCurrent={currentPage}
// paginate={paginate}
onChange={paginate}
pageSize={cardPerPage}
showSizeChanger={false}
/>
) : null}
{/* <a href="#">Next</a> */}
</div>
</div>
</PendingTaskStyled>
);
}
Example #25
| Source File: direction.jsx From virtuoso-design-system with MIT License | 4 votes |
|
// ==== End Badge ====
render() {
const { currentStep } = this.state;
return (
<div className="direction-components">
<Row>
<Col span={24}>
<Divider orientation="left">Cascader example</Divider>
<Cascader
suffixIcon={<SearchIcon />}
options={cascaderOptions}
onChange={this.onCascaderChange}
placeholder="یک مورد انتخاب کنید"
popupPlacement={this.props.popupPlacement}
/>
With search:
<Cascader
suffixIcon={<SmileOutlined />}
options={cascaderOptions}
onChange={this.onCascaderChange}
placeholder="Select an item"
popupPlacement={this.props.popupPlacement}
showSearch={this.cascaderFilter}
/>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Switch example</Divider>
<Switch defaultChecked />
<Switch loading defaultChecked />
<Switch size="small" loading />
</Col>
<Col span={12}>
<Divider orientation="left">Radio Group example</Divider>
<Radio.Group defaultValue="c" buttonStyle="solid">
<Radio.Button value="a">تهران</Radio.Button>
<Radio.Button value="b" disabled>
اصفهان
</Radio.Button>
<Radio.Button value="c">فارس</Radio.Button>
<Radio.Button value="d">خوزستان</Radio.Button>
</Radio.Group>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Button example</Divider>
<div className="button-demo">
<Button type="primary" icon={<DownloadOutlined />} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} />
<Button type="primary" shape="round" icon={<DownloadOutlined />}>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />}>
Download
</Button>
<br />
<Button.Group>
<Button type="primary">
<LeftOutlined />
Backward
</Button>
<Button type="primary">
Forward
<RightOutlined />
</Button>
</Button.Group>
<Button type="primary" loading>
Loading
</Button>
<Button type="primary" size="small" loading>
Loading
</Button>
</div>
</Col>
<Col span={12}>
<Divider orientation="left">Tree example</Divider>
<Tree
showLine
checkable
defaultExpandedKeys={['0-0-0', '0-0-1']}
defaultSelectedKeys={['0-0-0', '0-0-1']}
defaultCheckedKeys={['0-0-0', '0-0-1']}
>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0" disabled>
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
<TreeNode title="leaf" key="0-0-0-1" />
</TreeNode>
<TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
</TreeNode>
</TreeNode>
</Tree>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Input (Input Group) example</Divider>
<InputGroup size="large">
<Row gutter={8}>
<Col span={5}>
<Input defaultValue="0571" />
</Col>
<Col span={8}>
<Input defaultValue="26888888" />
</Col>
</Row>
</InputGroup>
<br />
<InputGroup compact>
<Input style={{ width: '20%' }} defaultValue="0571" />
<Input style={{ width: '30%' }} defaultValue="26888888" />
</InputGroup>
<br />
<InputGroup compact>
<Select defaultValue="Option1">
<Option value="Option1">Option1</Option>
<Option value="Option2">Option2</Option>
</Select>
<Input style={{ width: '50%' }} defaultValue="input content" />
<InputNumber />
</InputGroup>
<br />
<Search placeholder="input search text" enterButton="Search" size="large" />
<br />
<br />
<div style={{ marginBottom: 16 }}>
<Input
addonBefore={this.selectBefore}
addonAfter={this.selectAfter}
defaultValue="mysite"
/>
</div>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Select example</Divider>
<Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
<Option value="jack">Jack</Option>
<Option value="مورچه">مورچه</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="مورچه" style={{ width: 120 }} disabled>
<Option value="مورچه">مورچه</Option>
</Select>
<Select defaultValue="مورچه" style={{ width: 120 }} loading>
<Option value="مورچه">مورچه</Option>
</Select>
<Select
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="سعید">سعید</Option>
<Option value="tom">Tom</Option>
</Select>
</Col>
<Col span={12}>
<Divider orientation="left">TreeSelect example</Divider>
<div>
<TreeSelect
showSearch
style={{ width: '100%' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
allowClear
treeDefaultExpandAll
>
<TreeNode value="parent 1" title="parent 1" key="0-1">
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
<TreeNode value="leaf1" title="my leaf" key="random" />
<TreeNode value="leaf2" title="your leaf" key="random1" />
</TreeNode>
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
<TreeNode
value="sss"
title={<b style={{ color: '#08c' }}>sss</b>}
key="random3"
/>
</TreeNode>
</TreeNode>
</TreeSelect>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Modal example</Divider>
<div>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="پنچره ساده"
visible={this.state.modalVisible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>نگاشتههای خود را اینجا قراردهید</p>
<p>نگاشتههای خود را اینجا قراردهید</p>
<p>نگاشتههای خود را اینجا قراردهید</p>
</Modal>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Steps example</Divider>
<div>
<Steps progressDot current={currentStep}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<br />
<Steps current={currentStep} onChange={this.onStepsChange}>
<Step title="Step 1" description="This is a description." />
<Step title="Step 2" description="This is a description." />
<Step title="Step 3" description="This is a description." />
</Steps>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Rate example</Divider>
<div>
<Rate defaultValue={2.5} />
<br />
<strong>* Note:</strong> Half star not implemented in RTL direction, it will be
supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
implement rtl support.
</div>
</Col>
<Col span={12}>
<Divider orientation="left">Badge example</Divider>
<div>
<div>
<Badge count={this.state.badgeCount}>
<a href="#" className="head-example" />
</Badge>
<ButtonGroup>
<Button onClick={this.declineBadge}>
<MinusOutlined />
</Button>
<Button onClick={this.increaseBadge}>
<PlusOutlined />
</Button>
</ButtonGroup>
</div>
<div style={{ marginTop: 10 }}>
<Badge dot={this.state.showBadge}>
<a href="#" className="head-example" />
</Badge>
<Switch onChange={this.onChangeBadge} checked={this.state.showBadge} />
</div>
</div>
</Col>
</Row>
</Col>
</Row>
<br />
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Pagination example</Divider>
<Pagination showSizeChanger defaultCurrent={3} total={500} />
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Grid System example</Divider>
<div className="grid-demo">
<div className="code-box-demo">
<p>
<strong>* Note:</strong> Every calculation in RTL grid system is from right side
(offset, push, etc.)
</p>
<Row>
<Col span={8}>col-8</Col>
<Col span={8} offset={8}>
col-8
</Col>
</Row>
<Row>
<Col span={6} offset={6}>
col-6 col-offset-6
</Col>
<Col span={6} offset={6}>
col-6 col-offset-6
</Col>
</Row>
<Row>
<Col span={12} offset={6}>
col-12 col-offset-6
</Col>
</Row>
<Row>
<Col span={18} push={6}>
col-18 col-push-6
</Col>
<Col span={6} pull={18}>
col-6 col-pull-18
</Col>
</Row>
</div>
</div>
</Col>
</Row>
</div>
);
}
Example #26
| Source File: OrderBaseTable.js From loopring-pay with Apache License 2.0 | 4 votes |
|
render() {
const theme = this.props.theme;
const customizeRenderEmpty = () => (
<EmptyTableIndicator
text={"NoHistoryOrders"}
loading={this.props.loading}
/>
);
const columns = [
{
title: (
<TextCompactTableHeader
style={{
paddingLeft: "14px",
}}
>
<I s="CreatedAt" />
</TextCompactTableHeader>
),
dataIndex: "createdAt",
width: 180,
},
{
title: (
<TextCompactTableHeader
style={{
paddingLeft: "14px",
}}
>
<I s="Market" />
</TextCompactTableHeader>
),
dataIndex: "market",
},
{
title: (
<TextCompactTableHeader>
<I s="Side" />
</TextCompactTableHeader>
),
dataIndex: "side",
},
{
title: (
<TextCompactTableHeader>
<I s="Fill Amount" />
</TextCompactTableHeader>
),
dataIndex: "fillAmount",
},
{
title: (
<TextCompactTableHeader>
<I s="Fill Pctg" />
</TextCompactTableHeader>
),
dataIndex: "filled",
},
{
title: (
<TextCompactTableHeader>
<I s="Amount" />
</TextCompactTableHeader>
),
dataIndex: "size",
},
{
title: (
<TextCompactTableHeader>
<I s="Order Price" />
</TextCompactTableHeader>
),
dataIndex: "price",
},
{
title: (
<TextCompactTableHeader>
<I s="Order Total" />
</TextCompactTableHeader>
),
dataIndex: "total",
},
{
title: (
<TextCompactTableHeader>
<I s="Fee" />
</TextCompactTableHeader>
),
dataIndex: "fee",
},
{
title: (
<TextCompactTableHeader
style={{
width: "100%",
textAlign: "center",
paddingRight: "14px",
}}
>
<I s="Status / Operations" />
</TextCompactTableHeader>
),
dataIndex: "status",
},
];
const data = [];
for (let i = 0; i < this.props.data.length; i++) {
const order = this.props.data[i];
var status = "-";
if (order.status === "processing" || order.status === "waiting") {
status = (
<LargeTableRowStatus
style={{
textAlign: "left",
}}
>
<CancelOrderButton
onClick={(e) => {
e.preventDefault();
this.onClickCancel(order);
}}
>
<I s="Cancel" />
</CancelOrderButton>
</LargeTableRowStatus>
);
} else if (order.status === "processed") {
status = (
<LargeTableRowProcessed
style={{
textAlign: "left",
}}
>
<div>
<I s="Filled" />
</div>
</LargeTableRowProcessed>
);
} else if (order.status === "failed") {
status = (
<LargeTableRowFailed
style={{
textAlign: "left",
}}
>
<div>
<I s="Failed" />
</div>
</LargeTableRowFailed>
);
} else if (
order.status === "cancelling" ||
order.status === "cancelled"
) {
status = (
<LargeTableRowStatus
style={{
textAlign: "left",
}}
>
<div>
<I s="Cancelled" />
</div>
</LargeTableRowStatus>
);
} else if (order.status === "expired") {
status = (
<LargeTableRowStatus>
<div>
<I s="Expired" />
</div>
</LargeTableRowStatus>
);
}
data.push({
key: i,
side: (
<LargeTableRow
style={{
color:
order.side === "BUY" ? theme.buyPrimary : theme.sellPrimary,
}}
>
{order.side === "BUY" ? <I s="Buy" /> : <I s="Sell" />}
</LargeTableRow>
),
market: (
<LargeTableRow
style={{
paddingLeft: "14px",
}}
>
{order.market}
</LargeTableRow>
),
size: <LargeTableRow>{order.sizeInString} </LargeTableRow>,
filled: (
<LargeTableRow
style={{
color: theme.textWhite,
}}
>
{order.filled}
</LargeTableRow>
),
fillAmount: <LargeTableRow>{order.filledSizeInString} </LargeTableRow>,
price: (
<LargeTableRow
style={{
color:
order.side === "BUY" ? theme.buyPrimary : theme.sellPrimary,
}}
>
{order.price}
</LargeTableRow>
),
total: (
<LargeTableRow>
{order.totalInString} {order.quoteToken}
</LargeTableRow>
),
fee: (
<LargeTableRow
style={{
color: theme.textDim,
}}
>
{order.feeInString}{" "}
{order.feeInString !== "-"
? order.side === "BUY"
? order.market.split("-")[0]
: order.market.split("-")[1]
: ""}
</LargeTableRow>
),
createdAt: (
<LargeTableRow
style={{
paddingLeft: "14px",
color: theme.textDim,
}}
>
{Moment(order.createdAt).format(theme.timeFormat)}
</LargeTableRow>
),
status: (
<div
style={{
textAlign: "center",
paddingRight: "14px",
}}
>
{status}
</div>
),
});
}
const hasPagination = this.props.total > this.props.limit;
return (
<LargeTableContainer>
<ConfigProvider renderEmpty={data.length === 0 && customizeRenderEmpty}>
<TableLoadingSpin loading={this.props.loading}>
<Table
style={{
borderStyle: "none",
borderWidth: "0px",
height: `${data.length * 34 + 35}px`,
minHeight: "500px",
}}
columns={columns}
dataSource={data}
pagination={false}
scroll={{
y: `${data.length * 34}px`,
}}
/>
</TableLoadingSpin>
{hasPagination ? (
<Pagination
style={{
padding: "30px 0px 30px 0px",
background: theme.background,
textAlign: "center",
}}
size=""
total={this.props.total}
current={this.props.current}
onChange={this.props.onChange}
pageSize={this.props.limit}
/>
) : (
<div />
)}
</ConfigProvider>
</LargeTableContainer>
);
}
Example #27
| Source File: ProjectItem.js From youdidao-unmanned-shop with MIT License | 4 votes |
|
render() {
const { cur, pages, searchName } = this.state;
// 截取路由
const urlParams = new URL(window.location.href);
const { hash } = urlParams;
const projectId = hash.split('ProjectItem/')[1];
const jump = () => {
router.push(`/Coupons/Project/AddItem/${projectId}`);
};
const changePage = (page, pageSize) => {
this.setState({
cur: page,
pages: pageSize,
})
};
const ListContent = ({ data: { name, originalPrice, price, type, status } }) => (
<div className={styles.listContent}>
<div className={styles.listContentItem}>
<p>名称</p>
<p>{name}</p>
</div>
<div className={styles.listContentItem}>
<p>原价</p>
<p>{Number(originalPrice) / 100}</p>
</div>
<div className={styles.listContentItem}>
<p>价格</p>
<p>{Number(price) / 100}</p>
</div>
<div className={styles.listContentItem}>
<p>类型</p>
<p>{type === 'special' ? '不可退款' : '可退款'}</p>
</div>
<div className={styles.listContentItem}>
<p>状态</p>
<p>{status === 'published' ? '已上架' : '未上架'}</p>
</div>
</div>
);
const extraContent = (
<div>
<Search
placeholder="请输入"
onSearch={value => this.handleSearch(value)}
/>
</div>
);
return (
<Query
query={gql`
query(
$projectId: ID,
$pageSize: Int,
$currentPage: Int,
$status: Status,
$nameLike: String,
){
items(
projectId: $projectId,
pageSize: $pageSize,
currentPage: $currentPage,
status: $status,
nameLike: $nameLike,
) {
list {
code
name
content
originalPrice
price
unit
imageUrl
stock
type
status
}
pagination{
pageSize
total
current
}
}
}
`}
variables={{ pageSize: pages, currentPage: cur, status: 'published', projectId, nameLike: searchName }}
>
{({ loading, data: { items }, refetch }) => {
if (loading) return <Spin />;
refetch();
// console.log('data projects', projects);
const { pagination, list } = items;
return (
<Mutation
mutation={gql`
mutation(
$itemCode: ID!
$projectId: ID
$type: UpdateItemToProjectType
) {
updateItemToProject(
input: {
# 商品ID
itemCode: $itemCode
# 专题ID
projectId: $projectId
# 类型
type: $type
}
)
}
`}
>
{mutate => {
const addItem = itemCode => {
const itemData = {};
itemData.itemCode = itemCode;
itemData.projectId = projectId;
itemData.type = 'remove';
try {
const promise = new Promise(resolve => {
console.log('itemData', itemData);
resolve(mutate({ variables: itemData }));
});
promise.then(value => {
console.log(value);
message.success('移除成功');
refetch();
});
} catch (catchedError) {
//
}
};
return (
<PageHeaderWrapper>
<Card
bordered={false}
className={styles.listCard}
title="专题商品"
style={{ marginTop: 24 }}
extra={extraContent}
>
<div className={styles.standardList}>
<Button
type="dashed"
style={{ width: '100%', marginBottom: 8 }}
icon="plus"
onClick={() => jump()}
>
添加
</Button>
<List
size="large"
rowKey="code"
loading={loading}
dataSource={list}
renderItem={item => (
<List.Item
actions={[
<a
onClick={() => {
Modal.confirm({
title: '移除商品',
content: '确定移除该商品吗？',
okText: '确认',
cancelText: '取消',
onOk: () => addItem(item.code),
});
}}
>
移除
</a>,
]}
>
<List.Item.Meta
avatar={
<Avatar src={item.imageUrl} shape="square" size="large" />
}
title={`[${item.code}]${item.name}`}
description={item.content}
/>
<ListContent data={item} />
</List.Item>
)}
/>
<Pagination
current={pagination.current}
total={pagination.total}
style={{ float:"right" }}
onChange={changePage}
/>
</div>
</Card>
</PageHeaderWrapper>
);
}}
</Mutation>
);
}}
</Query>
);
}
Example #28
| Source File: newsView.js From egoshop with Apache License 2.0 | 4 votes |
|
render() {
const { checkedValues } = this.state
const {
changeState,
newsMaterialList,
wechatMaterialList,
newsCurrentPage,
newsPageSize,
wechatMaterialListLoading
} = this.props
const { item, total_count } = newsMaterialList
return(
<Spin tip="Loading..." spinning={wechatMaterialListLoading}>
<RadioGroup
value={checkedValues}
onChange={(e)=>{
this.setState({checkedValues:e.target.value})
let detail = newsMaterialList.item.filter((filterItem,index)=>{
return e.target.value===filterItem.media_id
})[0]
changeState({
value:e.target.value,
detail
})
}}
>
<View className={styles.imgContent}>
<Row gutter={16}>
{
newsMaterialList.item&&newsMaterialList.item.map((item,index)=>
<Col span={8} key={index}>
<View
className={styles.imgItem}
style={
checkedValues===item.media_id ?
{
borderColor:'#188fff'
} : {}
}
>
<ModalNews
extra={item.content.news_item}
/>
<Radio
value={item.media_id}
style={{
position: 'absolute',
bottom: 5,
right: 0,
}}
/>
</View>
</Col>
)
}
</Row>
</View>
</RadioGroup>
<View className={styles.paginationView}>
<Pagination
current={newsCurrentPage}
pageSize={newsPageSize ? newsPageSize : 10}
total={total_count ? total_count : 1}
showSizeChanger
showQuickJumper
hideOnSinglePage
pageSizeOptions={['5','10','15','20']}
onChange={(page, pageSize)=>{
wechatMaterialList({
params:{
type:'news',
offset:page===1 ? '0' : (page-1)*pageSize-1,
count:pageSize,
}
})
}}
onShowSizeChange={(current, size)=>{
wechatMaterialList({
params:{
type:'news',
offset:'0',
count:size,
}
})
}}
/>
</View>
</Spin>
)
}
Example #29
| Source File: TransferTable.js From dexwebapp with Apache License 2.0 | 4 votes |
|
render() {
const theme = this.props.theme;
const customizeRenderEmpty = () => (
<EmptyTableIndicator
text={this.props.placeHolder}
loading={this.props.loading}
/>
);
const columns = [
{
title: (
<TextCompactTableHeader style={{ paddingLeft: '14px' }}>
<I s="Timestamp" />
</TextCompactTableHeader>
),
dataIndex: 'date',
width: '10%',
},
{
title: (
<TextCompactTableHeader
style={{
paddingLeft: '14px',
}}
>
<I s="Asset" />
</TextCompactTableHeader>
),
dataIndex: 'asset',
width: '16%',
},
{
title: (
<TextCompactTableHeader>
<I s="Amount" />
</TextCompactTableHeader>
),
dataIndex: 'amount',
width: '12%',
},
{
title: (
<TextCompactTableHeader>
<I s="From/To" />
</TextCompactTableHeader>
),
dataIndex: 'recipient',
width: '12%',
},
{
title: (
<TextCompactTableHeader>
<I s="Fee" />
</TextCompactTableHeader>
),
dataIndex: 'fee',
width: '12%',
},
{
title: (
<TextCompactTableHeader
style={{
width: '100%',
textAlign: 'center',
}}
>
<I s="Memo" />
</TextCompactTableHeader>
),
dataIndex: 'memo',
width: '14%',
},
{
title: (
<TextCompactTableHeader
style={{
width: '100%',
textAlign: 'center',
}}
>
<div
style={{
textAlign: 'left',
paddingRight: '14px',
}}
>
<I s="Status" />
</div>
</TextCompactTableHeader>
),
dataIndex: 'status',
width: '14%',
},
];
const data = [];
for (let i = 0; i < this.props.data.length; i++) {
const transaction = this.props.data[i];
var status = '-';
if (transaction.status === 'processing') {
status = (
<LargeTableRowProcessing
style={{ color: theme.highlight, textAlign: 'left' }}
>
<StatusFontAwesomeIcon icon={faCircleNotch} spin />
<div>
<I s="Processing" />
</div>
</LargeTableRowProcessing>
);
} else if (transaction.status === 'processed') {
status = (
<LargeTableRowProcessed
style={{ color: theme.green, textAlign: 'left' }}
>
<StatusFontAwesomeIcon icon={faCheckCircle} />
<div>
<I s="Succeeded" />
</div>
</LargeTableRowProcessed>
);
} else if (transaction.status === 'failed') {
status = (
<LargeTableRowFailed style={{ color: theme.red, textAlign: 'left' }}>
<StatusFontAwesomeIcon icon={faExclamationCircle} />
<div>
<I s="Failed" />
</div>
</LargeTableRowFailed>
);
} else if (transaction.status === 'received') {
status = (
<Tooltip placement="bottom" title={<I s={'StatusConfirming'} />}>
<LargeTableRowProcessing
style={{ color: theme.orange, textAlign: 'left' }}
>
<StatusFontAwesomeIcon icon={faClock} />
<div>
<I s="Confirming" />
</div>
</LargeTableRowProcessing>
</Tooltip>
);
}
let memo = transaction.memo;
if (transaction.memo.toLowerCase() === 'update account reward') {
memo = <I s="Update Account Reward" />;
} else if (transaction.memo.toLowerCase() === 'reward') {
memo = <I s="Reward" />;
}
data.push({
key: i,
asset: (
<LargeTableRow
style={{
paddingLeft: '14px',
}}
>
{transaction.symbol} - <I s={transaction.tokenName} />
</LargeTableRow>
),
amount: (
<LargeTableRow
style={{
color:
transaction.receiver === window.wallet.accountId
? theme.buyPrimary
: theme.sellPrimary,
}}
>
<span>
{transaction.receiver === window.wallet.accountId ? '+' : '-'}
</span>
{transaction.amountInUI} {transaction.symbol}
</LargeTableRow>
),
recipient: (
<LargeTableRow>
<a
href={`${getEtherscanLink(this.props.chainId)}/address/${
transaction.receiver === window.wallet.accountId
? transaction.senderAddress
: transaction.receiverAddress
}`}
target="_blank"
rel="noopener noreferrer"
>
{transaction.receiver === window.wallet.accountId
? transaction.senderInUI
: transaction.recipientInUI}
</a>
</LargeTableRow>
),
fee: (
<LargeTableRow
style={{
color: theme.textDim,
}}
>
{transaction.feeInUI} {transaction.symbol}
</LargeTableRow>
),
date: (
<LargeTableRow
style={{
paddingLeft: '14px',
color: theme.textDim,
}}
>
{Moment(transaction.timestamp).format(theme.timeFormat)}
</LargeTableRow>
),
status: (
<div
style={{
textAlign: 'center',
paddingRight: '14px',
}}
>
{status}
</div>
),
memo: (
<LargeTableRow
style={{
color: theme.textDim,
}}
>
{memo}
</LargeTableRow>
),
});
}
const hasPagination = this.props.total > this.props.limit;
return (
<SimpleTableContainer>
<ConfigProvider renderEmpty={data.length === 0 && customizeRenderEmpty}>
<TableLoadingSpin loading={this.props.loading}>
<Table
style={{
height: `${data.length * 34 + 35}px`,
}}
columns={columns}
dataSource={data}
pagination={false}
scroll={{
y: `${data.length * 34}px`,
}}
/>
</TableLoadingSpin>
{hasPagination ? (
<Pagination
style={{
padding: '30px 0px 30px 0px',
background: theme.background,
textAlign: 'center',
}}
size=""
total={this.props.total}
current={this.props.current}
onChange={this.props.onChange}
pageSize={this.props.limit}
/>
) : (
<div />
)}
</ConfigProvider>
</SimpleTableContainer>
);
}
