0.1.6 • Published 3 years ago
antdpackagingtest v0.1.6
antd components library
使用 React+typescript 的组件库
对于antd表单的二次封装,便于项目中方便使用,减少代码书写,
支持多种input、select、time方法,请参考antd
//启动本地环境
npm run stroybook
npm install antdpackaging --save
使用
// 加载样式, 如果项目中已经引入@import '~antd/dist/antd.css',则不需要引入样式,否则需要
import 'antdpackaging/dist/index.css'
// 引入组件
import { FormComponent } from 'antdpackaging'
// 代码示例
function App() {
const [ currentObj, setObj ] = useState({
name: '',
names: ['Jack-value', 'Lucy-value'],
Username: '',
AreaLabel: ['shanghai'],
Area: '',
time: '',
timeRange: [],
checkbox: ['beijing', 'shanghai'],
radio: '北京',
});
let QuickSearchTypeDic = [
{
'value': '',
'label': '所有'
},
{
'value': 'Jack-value',
'label': 'Jack'
},
{
'value': 'Lucy-value',
'label': 'Lucy'
},
{
'value': 'Tom-value',
'label': 'Tom'
}
];
let QuickSearch = [
{
key: 'beijing',
disabled: true,
value: '北京',
label: '北京'
},
{
key: 'shanghai',
value: '上海',
label: '上海'
}
];
let sourceList = [
[ // 多选
{
type: 'statusMultiple', md: 24, label: '多选', value: currentObj.names, name: 'names', query: true,
options: QuickSearchTypeDic,
},
],
[ // 单选
{
type: 'status', md: 24, label: '单选', value: currentObj.name, name: 'name', query: true,
options: QuickSearchTypeDic
},
],
[
{ type: 'input', addonBefore:"http://", must: true, hint: true, hintText: '友情提示', label: 'Username', value: currentObj.Username, name: 'Username' },
{
type: 'select', label: 'AreaLabel',
mode: 'multiple',
options: QuickSearch,
optionsObj: { label: 'key', value: 'key' },
value: currentObj.AreaLabel, name: 'AreaLabel'
},
{
type: 'select', label: 'Area',
showSearch: true,
onSearch: (e: string) => {
console.log(e)
},
options: QuickSearch,
value: currentObj.Area, name: 'Area'
}
],
[
{ type: 'time', label: 'time', value: currentObj.time, name: 'time',
disabledDate: (e)=>{
// 自定义方法
// return disabledStartDt(e, '', '',true)
}
},
{
type: 'timeRange', md: 16, label: 'timeRange', value: currentObj.timeRange, name: 'timeRange', showTime: true, dateFormat: 'YYYY-MM-DD HH:mm:ss'
}
],
[
{
type: 'checkbox', label: 'checkbox',
options: QuickSearch,
optionsObj: { label: 'value', value: 'key' },
value: currentObj.checkbox, name: 'checkbox'
},
{
type: 'radio', label: 'radio',
options: QuickSearch,
value: currentObj.radio, name: 'radio'
},
{
type: 'buttons',
name: <div style={{ marginLeft: '10px', textAlign: 'right' }}>
<Button type="primary" onClick={() => {
query()
action('callBcak')
}
}>
获取数据
</Button>
</div>
}
]
]
const query = (dt, item) => {
if (dt) {
// 点击后立即获取数据
if (item&&item.query) {
console.log('点击后立即获取数据',dt)
}
} else {
// 点击获取数据按钮后获取数据
console.log('点击查询按钮后获取数据',currentObj)
}
}
// useEffect(() => {
// if (currentItem && currentItem.query) {
// query()
// }
// }, [currentObj]);
const callBcak = (dt, item) => {
// setItem(item)
setObj(dt)
query(dt, item)
}
return (
<div className="App">
<FormComponent callBcak={(dt, item) => {
callBcak(dt, item)
}
} sourceList={sourceList} />
</div>
);
}
export default App;