import { Button } from 'antd';
import React, { useRef, useState } from 'react';
import { unstable_batchedUpdates as batch } from 'react-dom';
import { XForm } from '../packages/react/src/index';
const defaultValues = {
name: '璀璨大礼包',
price: '6000',
stock: 1,
content: [
{ type: 2, medalid: 1230002, outdate: -1 },
{ type: 3, titleId: '19001', titleOutdate: '-1' },
{ type: 4, bubbleId: '11001', bubbleOutdate: '-1' },
{ type: 6, bagId: 2021097, bagCount: 5 },
{ type: 5, carId: 2004, carOutdate: -1 }
]
};
const limitPositiveInts = (value: string | number) => {
const reg = /^([1-9])(\d*).*$/;
if (typeof value === 'string') {
return !isNaN(Number(value)) ? value.replace(reg, '$1$2') : '';
} else if (typeof value === 'number') {
return !isNaN(value) ? String(value).replace(reg, '$1$2') : '';
} else {
return '';
}
};
const limitSpecialInts = (value: string | number) => {
const reg = /^(\-)*([1-9][0-9]*).*$/;
if (String(value) === '-' || Number(value) === -1) {
return '-1';
}
if (typeof value === 'string') {
return !isNaN(Number(value)) ? value.replace(reg, '$2') : '';
}
if (typeof value === 'number') {
return !isNaN(value) ? String(value).replace(reg, '$2') : '';
}
return '';
};
const schema = [
{
key: 'name',
type: 'Input',
ui: {
label: '礼包名称',
required: true
},
props: {
placeholder:
'请输入礼包名称，不能超过20个字符，中英文都算作1个字符',
maxLength: 20
},
rules: [
{
required: true,
message: '请输入礼包名称'
}
]
},
{
key: 'price',
type: 'InputNumber',
ui: {
label: '价格(音符)',
required: true
},
props: {
placeholder: '1至10000000之间的整数',
min: 1,
step: 1,
max: 10000000,
formatter: limitPositiveInts,
parser: limitPositiveInts,
style: {
width: '200px'
}
},
rules: [
{
required: true,
message: '请输入价格'
}
]
},
{
key: 'stock',
type: 'InputNumber',
ui: {
label: '可购买份数(份/日)',
required: true
},
props: {
placeholder: '1至100000之间的整数',
min: 1,
step: 1,
max: 100000,
formatter: limitPositiveInts,
parser: limitPositiveInts,
style: {
width: '200px'
}
},
rules: [
{
required: true,
message: '请输入购买份数'
}
]
},
{
key: 'content',
type: 'Array',
value: [{ type: 2 }],
props: {
type: 'Card',
max: 8,
min: 1,
labelCol: { span: 8 },
wrapperCol: { span: 14 }
},
ui: {
label: '内容'
},
children: [
{
key: 'type',
type: 'Select',
value: 2,
ui: {
label: '类型',
required: true
},
options: [
{
name: '勋章',
value: 2
},
{
name: '头衔',
value: 3
},
{
name: '气泡',
value: 4
},
{
name: '背包',
value: 6
},
{
name: '座架',
value: 5
}
],
rules: [
{
required: true,
message: '请选择礼品类型'
}
]
},
{
key: 'medalid',
type: 'InputNumber',
ui: {
label: '勋章id',
required: true
},
props: {
placeholder: '>=1整数',
min: 1,
step: 1,
formatter: limitPositiveInts,
parser: limitPositiveInts,
style: {
width: '200px'
}
},
listeners: [
{
watch: ['type'],
condition: 'type.value != 2',
set: {
status: 'hidden'
}
}
],
rules: [
{
required: true,
message: '请输入勋章id'
}
]
},
{
key: 'outdate',
type: 'InputNumber',
ui: {
label: '有效期(永久填-1)',
required: true
},
props: {
placeholder: '1至10000之间的整数或-1',
min: -1,
step: 1,
max: 10000,
formatter: limitSpecialInts,
parser: limitSpecialInts,
style: {
width: '200px'
}
},
listeners: [
{
watch: ['type'],
condition: 'type.value != 2',
set: {
status: 'hidden'
}
}
],
rules: [
{
required: true,
message: '请输入有效期'
}
]
},
{
key: 'titleId',
type: 'Input',
ui: {
label: '头衔id',
required: true
},
listeners: [
{
watch: ['type'],
condition: 'type.value != 3',
set: {
status: 'hidden'
}
}
]
},
{
key: 'titleOutdate',
type: 'Input',
ui: {
label: '有效期(天, -1永久)',
required: true
},
listeners: [
{
watch: ['type'],
condition: 'type.value != 3',
set: {
status: 'hidden'
}
}
]
},
{
key: 'bubbleId',
type: 'Input',
ui: {
label: '气泡框id',
required: true
},
listeners: [
{
watch: ['type'],
condition: 'type.value != 4',
set: {
status: 'hidden'
}
}
]
},
{
key: 'bubbleOutdate',
type: 'Input',
ui: {
label: '有效期(天, -1永久)',
required: true
},
listeners: [
{
watch: ['type'],
condition: 'type.value != 4',
set: {
status: 'hidden'
}
}
]
},
{
key: 'privilege',
type: 'CheckboxAll',
ui: {
label: '称号特权',
required: true
},
options: [
{
name: '聊天勋章',
value: 0
},
{
name: '用户卡片展示',
value: 1
},
{
name: '进场特效',
value: 2
}
],
listeners: [
{
watch: ['type'],
condition: 'type.value != 2',
set: {
status: 'hidden'
}
}
],
rules: [
{
type: 'array',
required: true,
message: '请至少选择一个展示'
}
]
},
{
key: 'bagId',
type: 'InputNumber',
ui: {
label: '背包id',
required: true
},
props: {
placeholder: '>=1整数',
min: 1,
step: 1,
formatter: limitPositiveInts,
parser: limitPositiveInts,
style: {
width: '200px'
}
},
listeners: [
{
watch: ['type'],
condition: 'type.value != 6',
set: {
status: 'hidden'
}
}
],
rules: [
{
required: true,
message: '请输入背包id'
}
]
},
{
key: 'bagCount',
type: 'InputNumber',
ui: {
label: '数量',
required: true
},
props: {
placeholder: '1至100000之间的整数',
min: 1,
step: 1,
max: 100000,
formatter: limitPositiveInts,
parser: limitPositiveInts,
style: {
width: '200px'
}
},
listeners: [
{
watch: ['type'],
condition: 'type.value != 6',
set: {
status: 'hidden'
}
}
],
rules: [
{
required: true,
message: '请输入礼物数量'
}
]
},
{
key: 'carId',
type: 'InputNumber',
ui: {
label: '座驾id',
required: true
},
props: {
placeholder: '>=1整数',
min: 1,
step: 1,
formatter: limitPositiveInts,
parser: limitPositiveInts,
style: {
width: '200px'
}
},
listeners: [
{
watch: ['type'],
condition: 'type.value != 5',
set: {
status: 'hidden'
}
}
],
rules: [
{
required: true,
message: '请输入座驾id'
}
]
},
{
key: 'carOutdate',
type: 'InputNumber',
ui: {
label: '有效期(天)(永久填-1)',
required: true
},
props: {
placeholder: '1至10000之间的整数或-1',
min: -1,
step: 1,
max: 10000,
formatter: limitSpecialInts,
parser: limitSpecialInts,
style: {
width: '200px'
}
},
listeners: [
{
watch: ['type'],
condition: 'type.value != 5',
set: {
status: 'hidden'
}
}
],
rules: [
{
required: true,
message: '请输入有效期'
}
]
}
]
}
];
export default function() {
const formRef = useRef(null);
const [status, setStatus] = useState(null);
const [values, setValues] = useState(null);
const onSubmit = () => {
formRef.current.submit().then((data: any) => {
console.log(data);
});
};
const onAdd = () => {
batch(() => {
// formRef.current.reset();
setValues(null);
setStatus('edit');
});
};
const onReset = () => {
batch(() => {
setValues({...defaultValues});
setStatus('edit');
});
};
const onView = () => {
batch(() => {
setValues({...defaultValues});
setStatus('preview');
});
};
return (
<>
);
}