Some Components used antd.
Make your life easy,wish you have a happy life.
npm install @bigorange/ui
import { FetchDataTable, ButtonGroup} from '@bigorange/ui';
export default (props) => {
return (
<>
<ButtonGroup
direction="horizontal"
source=[
{ label: 'Button1', key: 'Button1', clickedButtonStyle: { type: "dashed" } },
{ label: 'Button2', key: 'Button2', antdButtonProps: { type: 'link' }, clickedButtonStyle: { type: "dashed" } },
]
onClick={(config => console.log(config))}
/>
<FetchDataTable
columns={...}
fetchDataFunc={(pagination, filters, sorter) => Promise.resolve({ data: ..., pageSize: ..., current: ..., total: ... })}
onGetData={data => { console.log("data: ", data) }}
/>
</>
)
}
{
key: string | number,
dataIndex: string | number,
title: string | number | JSX.Element,
render?: (test: string, record: Dict) => string | number | JSX.Element,
}[]
It will be invoked when 'comonentDidmount' and 'onChange' of antd Table
triggered.
Provide a ref, the 'doQuery' function can be used to tigger 'fetchDataFunc'.
// Antd Table onChange params:
// pagination, filters, sorter, extra: { currentDataSource: [], action: paginate | sort | filter }
(pagination, filters, sorter, ...resetAntdTableOnChangeParams) => Promise<
current: string | number;
pageSize: string | number;
total: string | number;
data: any;
>
display your component when no data.
The 'data' is the result of invoking fetchDataFunc. It trigged after fetchDataFunc return the result evertime.
(data) => void
This provide a 'doQuery' function for invoking fetchDataFunc.
import React, { useRef } from 'react';
const myRef = useRef();
// doQuery: (antdTableChangeParams?: Dict) => void;
// Antd Table OnChange params:
// pagination, filters, sorter, extra: { currentDataSource: [], action: paginate | sort | filter }
<FetchDataTable
...
ref={ myRef } // then you can trigger the `fetchDataFunc` by 'myRef.current.doQuery()'
...
/>
Boolean, if you don't want trigger the fetchDataFunc when 'componetDidmount', set it "true".
<FetchDataTable
...
disableInitialQuery
...
/>
Boolean, if you don't want trigger the fetchDataFunc in 'onChange' of atnd Table, set it "true".
<FetchDataTable
...
disableOnChangeQuery
...
/>
FetchDataTable
use Table
of atnd, this value is the same with Table
api.
but 'columns', 'dataSource', 'onChange' are disabled.
<FetchDataTable
...
antdTableProps: { size: "small" }
...
/>
"horizontal" | "vertical"
The button list, options:
label
: the button label,
key
: give every button a key,
antdButtonProps
: the ButtonGroup use Button of antd, this value is the same with Button
api.
clickedButtonStyle
: this include 'style' and 'antdButtonProps', it will be apply to the button clicked.
the the button's 'label' & 'key' will put into the params.
(label, key) => {}
Example
import React, { useRef } from 'react';
import { Button } from 'ant';
import { ConfigTable } from '@bigorange/ui';
export default (props) => {
const currentRef = useRef();
return (
<>
<Button
onClick={() => { currentRef.current.doQuery(); }}
>
Do Query
<Button/>
<ConfigTable
config={...}
fetchDataFunc={(pagination, filters, sorter) => Promise.resolve({ data: ..., pageSize: ..., current: ..., total: ... })}
onGetData={data => { console.log("data: ", data) }}
ref={currentRef}
/>
</>
)
}
{
columns: {
key: any;
dataIndex: string;
title: string | reactNode;
render: (text: string, record: object) => reactNode;
} // the antd Table columns
disableOnChangeQuery?: boolean; // the FetchDataTable disableOnChangeQuery
disableInitialQuery?: boolean; // disable query when didmount
component?: reactNode; // customzed component
}
It will be invoked when 'comonentDidmount' and the event 'onChange' of antd Table
triggered.
if you provide a ref, it will give you a 'doQuery' function to invoked 'fetchDataFunc'.
// Antd Table OnChange params:
// pagination, filters, sorter, extra: { currentDataSource: [], action: paginate | sort | filter }
(pagination, filters, sorter, ...resetAntdTableOnChangeParams) => Promise<
current: string | number;
pageSize: string | number;
total: string | number;
data: any;
>
the 'data' is the result of invoking fetchDataFunc. It trigged after fetchDataFunc return the result evertime.
(data) => void
this will give you a 'doQuery' function to invoked fetchDataFunc.
Using Table
of atnd, this value is the same with Table
api.
but 'columns', 'dataSource', 'onChange' are disabled.
<ConfigTable
...
antTableProps: { size: "small" }
...
/>
'customProps' will be post to 'component' of config
<ConfigTable
...
customProps: { xxx: ... }
...
/>
import { QueryGroup } from '@bigorange/ui';
import moment from 'moment';
const startMoment = moment().subtract(1, 'years');
const endMoment = moment();
// the QueryGroup Config
const config = [
{
label: 'Name',
name: "name",
type: 'Input',
rules: [
{
required: true,
message: 'Please input name!',
},
],
initialValue: 'Orange'
},
{
label: 'Phone',
name: "phone",
type: 'Input',
rules: [
{
required: true,
message: 'Please input phone!',
},
],
},
{
label: 'Fruits',
name: "fruits",
type: 'Select',
options: [
{
label: 'Orange',
value: 'orange',
},
{
label: 'Apple',
value: 'apple',
},
{
label: 'Mango',
value: 'mango'
},
],
initialValue: 'orange',
},
{
label: 'Start Date',
name: 'start',
type: 'DatePicker',
rules: [
{
required: true,
message: '请输入开始日期!',
},
],
format: 'YYYY-MM-DD',
},
{
label: 'Month',
name: 'month',
type: 'DatePicker',
rules: [
{
required: true,
message: '请选择月份!',
},
],
format: 'YYYY-MM',
antdDataEntryProps: {
picker: 'month',
},
},
{
label: '创建时间',
type: 'RangePicker',
rangeNames: ['startTime', 'endTime'], // default name: "startTime-endTime"
initialValue: [startMoment, endMoment],
},
{
label: '是否上天',
name: 'upSky',
type: 'Checkbox',
initialValue: true,
},
{
label: '左青龙右白虎',
name: 'godAnimal',
type: 'Checkbox.Group',
options: [
{ label: '青龙', value: 'green dragon' },
{ label: '白虎', value: 'white tiger' },
],
initialValue: [],
},
{
label: '自定义输入框',
name: 'coolNumber',
type: CustomerInput, // your customized form control
initialValue: 111,
},
]
export default (props) => {
return (
<>
<Button
onClick={() => {
ref.current?.doValidate().then(r => {
if (r) {
console.log(r);
ref.current?.resetFields(); // or ref.current?.form.resetFields();
}
})
}}
>
查询
</Button>
<QueryGroup
source={config}
onValidate={(values: Dict) => {
console.log("values: ", values)
return "good";
}}
queryComp={<a>click to query</a>} // or queryComp={null}
initialValues={{ name: 'a cool name', phone: '123' }}
ref={ref}
onChange={(changedValues, allValues) => { console.log('onChange', changedValues, allValues) }}
okText="customer ok text"
resetText="customer reset fields text"
okButtonAntdProps={{ type: 'primary' }} // antd Button props of ok button
resetButtonAntdProps={{ size: 'large' }} // antd Button props of reset button
extra={<Input palceholder="customer componet at the end"/>}
/>
</>
)
}
{
type: 'InputNumber' | 'Input' | 'DatePicker' | 'DatePicker' | 'RangePicker' | JSX.Element; // it's value could be your customized form control
name: string; // it's not required for "RangePicker"
label: string;
options?: { value: any; label: string }[];
initialValue?: any;
rules?: {[key: string]: any}; // antd form api "rules"
style?: Dict;
rangeNames?: string[];
antdDataEntryProps?: {[key: string]: any}; // antd Data Entry Components' Props
format?: string; // the data format, eg. 'YYYY-MM-DD HH:mm:ss'
}
return the form data.
your customzed comoponent used to trigger onValidate
QueryGroup
use the antd Form, antdFormProps
is hust the same with antd Form
API, but onFinishFailed
onFinish
are disabled in antdFormProps
.
<QueryGroup
...
antdFormProps={{ layout: 'vertical' }}
...
/>
the FormInstance
is the with antd Table
FormInstance
ref.current: { doValidate: () => Promise<any>; form: FormInstance },
the default button's label