mirror of
https://github.com/zuiidea/antd-admin
synced 2026-10-22 07:43:50 +00:00
Deprecated component layer、Search、DataTable、Iconfont，because there are exist similar component in antd.
This commit is contained in:
zuiidea
+1
-33
@@ -42,22 +42,6 @@ let database = [
|
||||
name: 'UI Element',
|
||||
icon: 'camera-o',
|
||||
},
|
||||
{
|
||||
id: '41',
|
||||
bpid: '4',
|
||||
mpid: '4',
|
||||
name: 'IconFont',
|
||||
icon: 'heart-o',
|
||||
route: '/UIElement/iconfont',
|
||||
},
|
||||
{
|
||||
id: '42',
|
||||
bpid: '4',
|
||||
mpid: '4',
|
||||
name: 'DataTable',
|
||||
icon: 'database',
|
||||
route: '/UIElement/dataTable',
|
||||
},
|
||||
{
|
||||
id: '43',
|
||||
bpid: '4',
|
||||
@@ -66,30 +50,14 @@ let database = [
|
||||
icon: 'bars',
|
||||
route: '/UIElement/dropOption',
|
||||
},
|
||||
{
|
||||
id: '44',
|
||||
bpid: '4',
|
||||
mpid: '4',
|
||||
name: 'Search',
|
||||
icon: 'search',
|
||||
route: '/UIElement/search',
|
||||
},
|
||||
{
|
||||
id: '45',
|
||||
bpid: '4',
|
||||
mpid: '4',
|
||||
name: '56pxor',
|
||||
name: 'Editor',
|
||||
icon: 'edit',
|
||||
route: '/UIElement/editor',
|
||||
},
|
||||
{
|
||||
id: '46',
|
||||
bpid: '4',
|
||||
mpid: '4',
|
||||
name: 'layer (Function)',
|
||||
icon: 'credit-card',
|
||||
route: '/UIElement/layer',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
bpid: '1',
|
||||
|
||||
@@ -1,118 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Table } from 'antd'
|
||||
import { request } from 'utils'
|
||||
import cloneDeep from 'lodash.clonedeep'
|
||||
import isEqual from 'lodash.isequal'
|
||||
|
||||
class DataTable extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
const {
|
||||
dataSource,
|
||||
pagination = {
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: total => `共 ${total} 条`,
|
||||
current: 1,
|
||||
total: 100,
|
||||
},
|
||||
} = props
|
||||
this.state = {
|
||||
loading: false,
|
||||
dataSource,
|
||||
fetchData: {},
|
||||
pagination,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
if (this.props.fetch) {
|
||||
this.fetch()
|
||||
}
|
||||
}
|
||||
|
||||
UNSAFE_componentWillReceiveProps (nextProps) {
|
||||
const staticNextProps = cloneDeep(nextProps)
|
||||
delete staticNextProps.columns
|
||||
const { columns, ...otherProps } = this.props
|
||||
|
||||
if (!isEqual(staticNextProps, otherProps)) {
|
||||
this.props = nextProps
|
||||
this.fetch()
|
||||
}
|
||||
}
|
||||
|
||||
handleTableChange = (pagination, filters, sorter) => {
|
||||
const pager = this.state.pagination
|
||||
pager.current = pagination.current
|
||||
this.setState(
|
||||
{
|
||||
pagination: pager,
|
||||
fetchData: {
|
||||
results: pagination.pageSize,
|
||||
page: pagination.current,
|
||||
sortField: sorter.field,
|
||||
sortOrder: sorter.order,
|
||||
...filters,
|
||||
},
|
||||
},
|
||||
() => {
|
||||
this.fetch()
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
fetch = () => {
|
||||
const {
|
||||
fetch: { url, data, dataKey },
|
||||
} = this.props
|
||||
const { fetchData } = this.state
|
||||
this.setState({ loading: true })
|
||||
this.promise = request({
|
||||
url,
|
||||
data: {
|
||||
...data,
|
||||
...fetchData,
|
||||
},
|
||||
}).then(result => {
|
||||
if (!this.refs.DataTable) {
|
||||
return
|
||||
}
|
||||
const { pagination } = this.state
|
||||
pagination.total = result.total || pagination.total
|
||||
this.setState({
|
||||
loading: false,
|
||||
dataSource: dataKey ? result[dataKey] : result.data,
|
||||
pagination,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
const { fetch, ...tableProps } = this.props
|
||||
const { loading, dataSource, pagination } = this.state
|
||||
|
||||
return (
|
||||
<Table
|
||||
ref="DataTable"
|
||||
bordered
|
||||
loading={loading}
|
||||
onChange={this.handleTableChange}
|
||||
{...tableProps}
|
||||
pagination={pagination}
|
||||
dataSource={dataSource}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
DataTable.propTypes = {
|
||||
fetch: PropTypes.object,
|
||||
rowKey: PropTypes.string,
|
||||
pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
|
||||
columns: PropTypes.array,
|
||||
dataSource: PropTypes.array,
|
||||
}
|
||||
|
||||
export default DataTable
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "DataTable",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./DataTable.js"
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { Input, Select, Button, Icon } from 'antd'
|
||||
import styles from './Search.less'
|
||||
|
||||
class Search extends React.Component {
|
||||
state = {
|
||||
clearVisible: false,
|
||||
selectValue:
|
||||
this.props.select && this.props.selectProps
|
||||
? this.props.selectProps.defaultValue
|
||||
: '',
|
||||
}
|
||||
handleSearch = () => {
|
||||
const data = {
|
||||
keyword: ReactDOM.findDOMNode(this.refs.searchInput).value,
|
||||
}
|
||||
if (this.props.select) {
|
||||
data.field = this.state.selectValue
|
||||
}
|
||||
if (this.props.onSearch) this.props.onSearch(data)
|
||||
}
|
||||
handleInputChange = e => {
|
||||
this.setState({
|
||||
...this.state,
|
||||
clearVisible: e.target.value !== '',
|
||||
})
|
||||
}
|
||||
handleSelectChange = value => {
|
||||
this.setState({
|
||||
...this.state,
|
||||
selectValue: value,
|
||||
})
|
||||
}
|
||||
handleClearInput = () => {
|
||||
ReactDOM.findDOMNode(this.refs.searchInput).value = ''
|
||||
this.setState({
|
||||
clearVisible: false,
|
||||
})
|
||||
this.handleSearch()
|
||||
}
|
||||
render () {
|
||||
const {
|
||||
size,
|
||||
select,
|
||||
selectOptions,
|
||||
selectProps,
|
||||
style,
|
||||
keyword,
|
||||
} = this.props
|
||||
const { clearVisible } = this.state
|
||||
return (
|
||||
<Input.Group compact size={size} className={styles.search} style={style}>
|
||||
{select && (
|
||||
<Select
|
||||
ref="searchSelect"
|
||||
onChange={this.handleSelectChange}
|
||||
size={size}
|
||||
{...selectProps}
|
||||
>
|
||||
{selectOptions &&
|
||||
selectOptions.map((item, key) => (
|
||||
<Select.Option value={item.value} key={key}>
|
||||
{item.name || item.value}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
<Input
|
||||
ref="searchInput"
|
||||
size={size}
|
||||
onChange={this.handleInputChange}
|
||||
onPressEnter={this.handleSearch}
|
||||
defaultValue={keyword}
|
||||
/>
|
||||
<Button size={size} type="primary" onClick={this.handleSearch}>
|
||||
搜索
|
||||
</Button>
|
||||
{clearVisible && <Icon type="cross" onClick={this.handleClearInput} />}
|
||||
</Input.Group>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Search.propTypes = {
|
||||
size: PropTypes.string,
|
||||
select: PropTypes.bool,
|
||||
selectProps: PropTypes.object,
|
||||
onSearch: PropTypes.func,
|
||||
selectOptions: PropTypes.array,
|
||||
style: PropTypes.object,
|
||||
keyword: PropTypes.string,
|
||||
}
|
||||
|
||||
export default Search
|
||||
@@ -1,54 +0,0 @@
|
||||
.no-highlight() {
|
||||
border-color: #e5e5e5;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex !important;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
:global {
|
||||
.anticon-cross {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
right: 84px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
line-height: 18px;
|
||||
border-radius: 50% !important;
|
||||
background-color: rgba(0, 0, 0, 0.16);
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.ant-select {
|
||||
width: 80px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
&.ant-select-focused .ant-select-selection,
|
||||
&.ant-select-open .ant-select-selection,
|
||||
.ant-select-selection:active,
|
||||
.ant-select-selection:focus,
|
||||
.ant-select-selection:hover {
|
||||
.no-highlight();
|
||||
}
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
&:focus,
|
||||
&:hover {
|
||||
.no-highlight();
|
||||
}
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
width: 80px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "Search",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./Search.js"
|
||||
}
|
||||
@@ -1,22 +1,15 @@
|
||||
import DataTable from './DataTable'
|
||||
import DropOption from './DropOption'
|
||||
import Search from './Search'
|
||||
import Editor from './Editor'
|
||||
import FilterItem from './FilterItem'
|
||||
import DropOption from './DropOption'
|
||||
import Loader from './Loader'
|
||||
import * as MyLayout from './Layout/index.js'
|
||||
import Page from './Page'
|
||||
|
||||
import layer from './layer'
|
||||
|
||||
export {
|
||||
MyLayout,
|
||||
DataTable,
|
||||
DropOption,
|
||||
Search,
|
||||
Editor,
|
||||
FilterItem,
|
||||
DropOption,
|
||||
Loader,
|
||||
layer,
|
||||
Page,
|
||||
}
|
||||
|
||||
@@ -1,95 +0,0 @@
|
||||
/* global document */
|
||||
import { Modal, message } from 'antd'
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import classnames from 'classnames'
|
||||
import styles from './layer.less'
|
||||
|
||||
const { info, success, error, warning, confirm } = Modal
|
||||
|
||||
const layer = {
|
||||
prefixCls: 'ant-layer',
|
||||
index: 1,
|
||||
info,
|
||||
success,
|
||||
error,
|
||||
warning,
|
||||
confirm,
|
||||
}
|
||||
|
||||
layer.close = index =>
|
||||
new Promise((resolve, reject) => {
|
||||
const { prefixCls } = layer
|
||||
let div = document.getElementById(`${prefixCls}-reference-${index}`)
|
||||
if (index === undefined) {
|
||||
const references = document.querySelectorAll(`.${prefixCls}-reference`)
|
||||
div = references[references.length - 1]
|
||||
}
|
||||
if (!div) {
|
||||
message.error('关闭失败，未找到Dom')
|
||||
return
|
||||
}
|
||||
const unmountResult = ReactDOM.unmountComponentAtNode(div)
|
||||
if (unmountResult && div.parentNode) {
|
||||
div.parentNode.removeChild(div)
|
||||
resolve(index)
|
||||
} else {
|
||||
reject(index)
|
||||
}
|
||||
})
|
||||
|
||||
layer.closeAll = () => {
|
||||
const { prefixCls } = layer
|
||||
const references = document.querySelectorAll(`.${prefixCls}-reference`)
|
||||
let i = 0
|
||||
while (i < references.length) {
|
||||
layer.close()
|
||||
i += 1
|
||||
}
|
||||
}
|
||||
|
||||
layer.open = config => {
|
||||
const props = Object.assign({}, config)
|
||||
const { content, ...modalProps } = props
|
||||
const { className, wrapClassName = '', verticalCenter = true } = modalProps
|
||||
const { prefixCls } = layer
|
||||
layer.index += 1
|
||||
const { index } = layer
|
||||
let div = document.createElement('div')
|
||||
div.id = `${prefixCls}-reference-${index}`
|
||||
div.className = `${prefixCls}-reference`
|
||||
document.body.appendChild(div)
|
||||
|
||||
ReactDOM.render(
|
||||
<Modal
|
||||
visible
|
||||
title="Title"
|
||||
transitionName="zoom"
|
||||
maskTransitionName="fade"
|
||||
onCancel={() => {
|
||||
layer.close(index)
|
||||
}}
|
||||
onOk={() => {
|
||||
layer.close(index)
|
||||
}}
|
||||
{...modalProps}
|
||||
wrapClassName={classnames({
|
||||
[styles.verticalCenter]: verticalCenter,
|
||||
[wrapClassName]: true,
|
||||
})}
|
||||
className={classnames(prefixCls, className, [`${prefixCls}-${index}`])}
|
||||
>
|
||||
<div
|
||||
className={`${prefixCls}-body-wrapper`}
|
||||
style={{ maxHeight: document.body.clientHeight - 256 }}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
</Modal>,
|
||||
div
|
||||
)
|
||||
|
||||
return index
|
||||
}
|
||||
|
||||
export default layer
|
||||
@@ -1,14 +0,0 @@
|
||||
.verticalCenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
:global .ant-modal {
|
||||
top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
.ant-modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "layer",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./layer.js"
|
||||
}
|
||||
@@ -1,166 +0,0 @@
|
||||
import React from 'react'
|
||||
import { DataTable } from 'components'
|
||||
import { Table, Row, Col, Card, Select } from 'antd'
|
||||
|
||||
class DataTablePage extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
filterCase: {
|
||||
gender: '',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
handleSelectChange = gender => {
|
||||
this.setState({
|
||||
filterCase: {
|
||||
gender,
|
||||
},
|
||||
})
|
||||
}
|
||||
render () {
|
||||
const { filterCase } = this.state
|
||||
const staticDataTableProps = {
|
||||
dataSource: [
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 24,
|
||||
address: 'New York',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
age: 23,
|
||||
address: 'London',
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{ title: 'name', dataIndex: 'name' },
|
||||
{ title: 'Age', dataIndex: 'age' },
|
||||
{ title: 'Address', dataIndex: 'address' },
|
||||
],
|
||||
pagination: false,
|
||||
}
|
||||
|
||||
const fetchDataTableProps = {
|
||||
fetch: {
|
||||
url: 'https://randomuser.me/api',
|
||||
data: {
|
||||
results: 10,
|
||||
testPrams: 'test',
|
||||
},
|
||||
dataKey: 'results',
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
render: text => `${text.first} ${text.last}`,
|
||||
},
|
||||
{ title: 'Phone', dataIndex: 'phone' },
|
||||
{ title: 'Gender', dataIndex: 'gender' },
|
||||
],
|
||||
rowKey: 'email',
|
||||
}
|
||||
|
||||
const caseChangeDataTableProps = {
|
||||
fetch: {
|
||||
url: 'https://randomuser.me/api',
|
||||
data: {
|
||||
results: 10,
|
||||
testPrams: 'test',
|
||||
...filterCase,
|
||||
},
|
||||
dataKey: 'results',
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
render: text => `${text.first} ${text.last}`,
|
||||
},
|
||||
{ title: 'Phone', dataIndex: 'phone' },
|
||||
{ title: 'Gender', dataIndex: 'gender' },
|
||||
],
|
||||
rowKey: 'email',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="content-inner">
|
||||
<Row gutter={32}>
|
||||
<Col lg={12} md={24}>
|
||||
<Card title="默认">
|
||||
<DataTable pagination={false} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={12} md={24}>
|
||||
<Card title="静态数据">
|
||||
<DataTable {...staticDataTableProps} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={12} md={24}>
|
||||
<Card title="远程数据">
|
||||
<DataTable {...fetchDataTableProps} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={12} md={24}>
|
||||
<Card title="参数变化">
|
||||
<Select
|
||||
placeholder="Please select gender"
|
||||
allowClear
|
||||
onChange={this.handleSelectChange}
|
||||
style={{ width: 200, marginBottom: 16 }}
|
||||
>
|
||||
<Select.Option value="male">Male</Select.Option>
|
||||
<Select.Option value="female">Female</Select.Option>
|
||||
</Select>
|
||||
<DataTable {...caseChangeDataTableProps} />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<h2 style={{ margin: '16px 0' }}>Props</h2>
|
||||
<Row>
|
||||
<Col lg={18} md={24}>
|
||||
<Table
|
||||
rowKey={(record, key) => key}
|
||||
pagination={false}
|
||||
bordered
|
||||
scroll={{ x: 800 }}
|
||||
columns={[
|
||||
{
|
||||
title: '参数',
|
||||
dataIndex: 'props',
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'desciption',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
},
|
||||
{
|
||||
title: '默认值',
|
||||
dataIndex: 'default',
|
||||
},
|
||||
]}
|
||||
dataSource={[
|
||||
{
|
||||
props: 'fetch',
|
||||
desciption: '远程获取数据的参数',
|
||||
type: 'Object',
|
||||
default: '后面有空加上',
|
||||
key: 'basetable',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default DataTablePage
|
||||
@@ -1,8 +0,0 @@
|
||||
import '../../../svg/emoji/vomiting.svg'
|
||||
import '../../../svg/emoji/smirking.svg'
|
||||
import '../../../svg/emoji/surprised.svg'
|
||||
import '../../../svg/emoji/unamused.svg'
|
||||
import '../../../svg/emoji/zombie.svg'
|
||||
import '../../../svg/emoji/tired.svg'
|
||||
import '../../../svg/emoji/tongue.svg'
|
||||
import '../../../svg/emoji/wink.svg'
|
||||
@@ -1,204 +0,0 @@
|
||||
import React from 'react'
|
||||
import { Page } from 'components'
|
||||
import { Table, Row, Col, Icon } from 'antd'
|
||||
import styles from './index.less'
|
||||
import './emoji'
|
||||
|
||||
const colorfulIcons = [
|
||||
'boluo',
|
||||
'baixiangguo',
|
||||
'chengzi',
|
||||
'boluomei',
|
||||
'caomei',
|
||||
'dayouzi',
|
||||
'chelizi',
|
||||
'fanqie',
|
||||
'hamigua',
|
||||
'ganlan',
|
||||
'juzi',
|
||||
'heimei',
|
||||
'huolongguo',
|
||||
'hongmei',
|
||||
'lizi',
|
||||
'lanmei',
|
||||
'mangguo',
|
||||
'mihoutao',
|
||||
'longyan',
|
||||
'mugua',
|
||||
'lizi1',
|
||||
'ningmeng',
|
||||
]
|
||||
|
||||
const flatIcons = [
|
||||
'home',
|
||||
'user',
|
||||
'timelimit',
|
||||
'shopcart',
|
||||
'message',
|
||||
'remind',
|
||||
'service',
|
||||
'shop',
|
||||
'sweep',
|
||||
'express',
|
||||
'payment',
|
||||
'search',
|
||||
'feedback',
|
||||
'pencil',
|
||||
'setting',
|
||||
'refund',
|
||||
'delete',
|
||||
'star',
|
||||
'heart',
|
||||
'share',
|
||||
'location',
|
||||
'console',
|
||||
]
|
||||
|
||||
const localSVGIcons = [
|
||||
'vomiting',
|
||||
'smirking',
|
||||
'surprised',
|
||||
'unamused',
|
||||
'zombie',
|
||||
'tired',
|
||||
'tongue',
|
||||
'wink',
|
||||
]
|
||||
|
||||
const localRequireSVGIcons = [
|
||||
require('../../../svg/cute/congratulations.svg'),
|
||||
require('../../../svg/cute/cry.svg'),
|
||||
require('../../../svg/cute/kiss.svg'),
|
||||
require('../../../svg/cute/leisurely.svg'),
|
||||
require('../../../svg/cute/notice.svg'),
|
||||
require('../../../svg/cute/proud.svg'),
|
||||
require('../../../svg/cute/shy.svg'),
|
||||
require('../../../svg/cute/sweat.svg'),
|
||||
require('../../../svg/cute/think.svg'),
|
||||
]
|
||||
|
||||
const IcoPage = () => (
|
||||
<Page inner>
|
||||
<Icon type="star-oo" />
|
||||
<h2 style={{ margin: '16px 0' }}>Colorful Icon</h2>
|
||||
<ul className={styles.list}>
|
||||
{colorfulIcons.map(item => (
|
||||
<li key={item}>
|
||||
<Icon className={styles.icon} colorful type={item} />
|
||||
<span className={styles.name}>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<h2 style={{ margin: '16px 0' }}>Flat Icon</h2>
|
||||
<ul className={styles.list}>
|
||||
{flatIcons.map(item => (
|
||||
<li key={item}>
|
||||
<Icon className={styles.icon} type={item} />
|
||||
<span className={styles.name}>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<h2 style={{ margin: '16px 0' }}>Local SVG</h2>
|
||||
<ul className={styles.list}>
|
||||
{localSVGIcons.map(item => (
|
||||
<li key={item}>
|
||||
<Icon className={styles.icon} colorful type={item} />
|
||||
<span className={styles.name}>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<h2 style={{ margin: '16px 0' }}>Local Require SVG</h2>
|
||||
<ul className={styles.list}>
|
||||
{localRequireSVGIcons.map(item => (
|
||||
<li key={item.default.id}>
|
||||
<Icon className={styles.icon} colorful component={item.default.id} />
|
||||
<span className={styles.name}>{item.default.id}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<h2 style={{ margin: '16px 0' }}>API</h2>
|
||||
<Row>
|
||||
<Col lg={18} md={24}>
|
||||
<Table
|
||||
rowKey={(record, key) => key}
|
||||
pagination={false}
|
||||
bordered
|
||||
scroll={{ x: 800 }}
|
||||
columns={[
|
||||
{
|
||||
title: 'Property',
|
||||
dataIndex: 'props',
|
||||
},
|
||||
{
|
||||
title: 'Description',
|
||||
dataIndex: 'desciption',
|
||||
},
|
||||
{
|
||||
title: 'Type',
|
||||
dataIndex: 'type',
|
||||
},
|
||||
{
|
||||
title: 'Default',
|
||||
dataIndex: 'default',
|
||||
},
|
||||
]}
|
||||
dataSource={[
|
||||
{
|
||||
props: 'type',
|
||||
desciption: 'icon type',
|
||||
type: 'String',
|
||||
default: '-',
|
||||
},
|
||||
{
|
||||
props: 'colorful',
|
||||
desciption: "to set the SVG has 'symbol element'",
|
||||
type: 'Bool',
|
||||
default: 'false',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<h2 style={{ margin: '16px 0' }}>Thanks</h2>
|
||||
<div style={{ margin: '16px 0', lineHeight: 2 }}>
|
||||
<p>
|
||||
<a href="http://www.iconfont.cn/user/detail?uid=116813">何阿酥</a>{' '}
|
||||
colorful fruit icon
|
||||
<a
|
||||
href="http://www.iconfont.cn/collections/detail?cid=4014"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{' '}
|
||||
http://www.iconfont.cn/collections/detail?cid=4014
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="http://www.iconfont.cn/user/detail?uid=496384">ColinXu</a>{' '}
|
||||
colorful 'tsundere' emoji icon
|
||||
<a
|
||||
href="http://www.iconfont.cn/collections/detail?cid=4116"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{' '}
|
||||
http://www.iconfont.cn/collections/detail?cid=4116
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="http://www.iconfont.cn/user/detail?uid=116813">咕噜小莫莫</a>{' '}
|
||||
colorful 'face cute' emoji icon
|
||||
<a
|
||||
href="http://www.iconfont.cn/collections/detail?cid=4268"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{' '}
|
||||
http://www.iconfont.cn/collections/detail?cid=4268
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
|
||||
export default IcoPage
|
||||
@@ -1,47 +0,0 @@
|
||||
.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
li {
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
height: 100px;
|
||||
transition: all 0.5s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
box-sizing: border-box;
|
||||
border: solid 1px transparent;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
border: solid 1px #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
.list {
|
||||
li {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.list {
|
||||
li {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,161 +0,0 @@
|
||||
import React from 'react'
|
||||
import { layer } from 'components'
|
||||
import { Table, Row, Col, Button, Card } from 'antd'
|
||||
|
||||
let Enum = {
|
||||
default: 1,
|
||||
}
|
||||
|
||||
const IcoPage = () => {
|
||||
const handleButtonClick = key => {
|
||||
if (key === Enum.default) {
|
||||
layer.open({
|
||||
title: '默认弹层',
|
||||
content: <div style={{ height: 360 }}>弹层内容</div>,
|
||||
})
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="content-inner">
|
||||
<Row gutter={32}>
|
||||
<Col lg={8} md={12}>
|
||||
<Card title="默认">
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleButtonClick.bind(null, Enum.default)}
|
||||
>
|
||||
打开一个Layer
|
||||
</Button>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<h2 style={{ margin: '16px 0' }}>API</h2>
|
||||
<div style={{ margin: '16px 0' }}>
|
||||
<h2 style={{ margin: '4px 0' }}>layer.open(config)</h2>
|
||||
config对象与
|
||||
<a
|
||||
href="https://ant.design/components/modal-cn/#API"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Modal
|
||||
</a>
|
||||
的参数基本一致，config属性如下。
|
||||
注意：1.visible属性一般不需要设置；2.afterClose无效，layer.close()可代替;3.layer.open()返回一个唯一的layer
|
||||
Id
|
||||
</div>
|
||||
<Row>
|
||||
<Col lg={18} md={24}>
|
||||
<Table
|
||||
rowKey={(record, key) => key}
|
||||
pagination={false}
|
||||
bordered
|
||||
scroll={{ x: 800 }}
|
||||
columns={[
|
||||
{
|
||||
title: '参数',
|
||||
dataIndex: 'props',
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'desciption',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
},
|
||||
{
|
||||
title: '默认值',
|
||||
dataIndex: 'default',
|
||||
},
|
||||
]}
|
||||
dataSource={[
|
||||
{
|
||||
props: 'content',
|
||||
desciption: '内容',
|
||||
type: 'string|ReactNode',
|
||||
default: '无',
|
||||
},
|
||||
{
|
||||
props: 'title',
|
||||
desciption: '标题',
|
||||
type: 'string|ReactNode',
|
||||
default: '标题',
|
||||
},
|
||||
{
|
||||
props: 'confirmLoading',
|
||||
desciption: '确定按钮 loading',
|
||||
type: 'boolean',
|
||||
default: '无',
|
||||
},
|
||||
{
|
||||
props: 'closable',
|
||||
desciption: '是否显示右上角的关闭按钮',
|
||||
type: 'boolean',
|
||||
default: '无',
|
||||
},
|
||||
{
|
||||
props: 'onOk',
|
||||
desciption: '点击确定回调',
|
||||
type: 'function(e)',
|
||||
default: '无',
|
||||
},
|
||||
{
|
||||
props: 'onCancel',
|
||||
desciption: '点击遮罩层或右上角叉或取消按钮的回调',
|
||||
type: 'function(e)',
|
||||
default: '"无"',
|
||||
},
|
||||
{
|
||||
props: 'width',
|
||||
desciption: '宽度',
|
||||
type: 'string|number',
|
||||
default: '520',
|
||||
},
|
||||
{
|
||||
props: 'okText',
|
||||
desciption: '确认按钮文字',
|
||||
type: 'string',
|
||||
default: '无',
|
||||
},
|
||||
{
|
||||
props: 'cancelText',
|
||||
desciption: '取消按钮文字',
|
||||
type: 'string',
|
||||
default: '无',
|
||||
},
|
||||
{
|
||||
props: 'maskClosable',
|
||||
desciption: '点击蒙层是否允许关闭',
|
||||
type: 'boolean',
|
||||
default: 'true',
|
||||
},
|
||||
{
|
||||
props: 'style',
|
||||
desciption: '可用于设置浮层的样式，调整浮层位置等',
|
||||
type: 'object',
|
||||
default: '-',
|
||||
},
|
||||
{
|
||||
props: 'wrapClassName',
|
||||
desciption: '对话框外层容器的类名',
|
||||
type: 'string',
|
||||
default: '-',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<div style={{ margin: '16px 0' }}>
|
||||
<h2 style={{ margin: '4px 0' }}>layer.close(index)</h2>
|
||||
当index有值时，关闭指定Id的layer;当index无值时，关闭最顶层layer
|
||||
</div>
|
||||
<div style={{ margin: '16px 0' }}>
|
||||
<h2 style={{ margin: '4px 0' }}>layer.closeAll()</h2>
|
||||
关闭所有的layer
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default IcoPage
|
||||
@@ -1,102 +0,0 @@
|
||||
import React from 'react'
|
||||
import { Search, Page } from 'components'
|
||||
import { Table, Row, Col, Card } from 'antd'
|
||||
|
||||
const SearchPage = () => (
|
||||
<Page inner>
|
||||
<Row gutter={32}>
|
||||
<Col lg={8} md={12}>
|
||||
<Card title="默认">
|
||||
<Search />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={8} md={12}>
|
||||
<Card title="附带选择">
|
||||
<Search
|
||||
{...{
|
||||
select: true,
|
||||
selectOptions: [
|
||||
{ value: 'components', name: '组件' },
|
||||
{ value: 'page', name: '页面' },
|
||||
],
|
||||
selectProps: {
|
||||
defaultValue: 'components',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={8} md={12}>
|
||||
<Card title="大小">
|
||||
<Search style={{ marginBottom: 16 }} />
|
||||
<Search size="small" />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<h2 style={{ margin: '16px 0' }}>Props</h2>
|
||||
<Row>
|
||||
<Col lg={18} md={24}>
|
||||
<Table
|
||||
rowKey={(record, key) => key}
|
||||
pagination={false}
|
||||
bordered
|
||||
scroll={{ x: 800 }}
|
||||
columns={[
|
||||
{
|
||||
title: '参数',
|
||||
dataIndex: 'props',
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'desciption',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
},
|
||||
{
|
||||
title: '默认值',
|
||||
dataIndex: 'default',
|
||||
},
|
||||
]}
|
||||
dataSource={[
|
||||
{
|
||||
props: 'size',
|
||||
desciption:
|
||||
'设置Search大小，可选值为 【small】 【large】 或者不设',
|
||||
type: 'String',
|
||||
default: '-',
|
||||
},
|
||||
{
|
||||
props: 'select',
|
||||
desciption: '设置是否有选择器',
|
||||
type: 'Boolean',
|
||||
default: 'false',
|
||||
},
|
||||
{
|
||||
props: 'selectOptions',
|
||||
desciption:
|
||||
'选择器的选项，格式为[{name:"",value:""}]或者[{value:""}]',
|
||||
type: 'Array',
|
||||
default: '-',
|
||||
},
|
||||
{
|
||||
props: 'selectProps',
|
||||
desciption: '选择器的属性，可参考antd的【Select】组件',
|
||||
type: 'Object',
|
||||
default: '-',
|
||||
},
|
||||
{
|
||||
props: 'onSearch',
|
||||
desciption: '点击搜索按钮, 按Enter键或者点击清除时的回调',
|
||||
type: 'Function({keyword:string,field:string})',
|
||||
default: '-',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Page>
|
||||
)
|
||||
|
||||
export default SearchPage
|
||||
Reference in New Issue
Block a user