import React, { useState, useRef, useEffect } from 'react';
|
import moment from 'moment';
|
import { Col, Form, Input, Row, Checkbox, Slider, Select, Drawer, Space, Button, InputNumber, Switch } from 'antd';
|
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
|
import * as PIXI from 'pixi.js';
|
import { createStyles } from 'antd-style';
|
import './index.css';
|
import Http from '@/utils/http';
|
|
const useStyles = createStyles(({ token, css }) => {
|
|
})
|
|
const SpriteSettings = (props) => {
|
const intl = useIntl();
|
const { styles } = useStyles();
|
const { curSprite } = props;
|
const [form] = Form.useForm();
|
|
useEffect(() => {
|
|
}, []);
|
|
useEffect(() => {
|
form.resetFields();
|
form.setFieldsValue({
|
...props.values
|
})
|
}, [form, props])
|
|
const handleCancel = () => {
|
props.onCancel();
|
};
|
|
const handleOk = () => {
|
form.submit();
|
}
|
|
const handleFinish = async (values) => {
|
console.log(values); return
|
props.onSubmit({ ...values });
|
}
|
|
const formValuesChange = (changeList) => {
|
if (changeList && changeList.length > 0) {
|
changeList.forEach(change => {
|
const { name: nameList, value } = change;
|
nameList.forEach(name => {
|
switch (name) {
|
case 'slider':
|
form.setFieldsValue({
|
no: value
|
})
|
break;
|
case 'no':
|
form.setFieldsValue({
|
slider: value
|
})
|
break;
|
default:
|
break;
|
}
|
})
|
})
|
}
|
}
|
|
const onFinishFailed = (errorInfo) => {
|
};
|
|
const prefixSelector = (
|
<Form.Item name="prefix" noStyle>
|
<Select
|
style={{
|
width: 70,
|
}}
|
>
|
<Option value="86">+86</Option>
|
<Option value="87">+87</Option>
|
</Select>
|
</Form.Item>
|
);
|
|
return (
|
<>
|
<Drawer
|
open={props.open}
|
onClose={handleCancel}
|
getContainer={props.refCurr}
|
rootStyle={{ position: "absolute" }}
|
mask={false}
|
width={570}
|
extra={
|
<Space>
|
<Button onClick={handleCancel}>
|
<FormattedMessage id='common.cancel' defaultMessage='取消' />
|
</Button>
|
<Button onClick={handleOk} type="primary">
|
<FormattedMessage id='common.submit' defaultMessage='保存' />
|
</Button>
|
</Space>
|
}
|
>
|
<Form
|
form={form}
|
onFieldsChange={formValuesChange}
|
initialValues={{
|
}}
|
onFinish={handleFinish}
|
onFinishFailed={onFinishFailed}
|
autoComplete="off"
|
style={{
|
maxWidth: 600,
|
}}
|
size='default' // small | default | large
|
variant='filled' // outlined | borderless | filled
|
labelWrap // label 换行
|
disabled={false}
|
>
|
<Row gutter={24}>
|
<Col span={24}>
|
<Row gutter={24}>
|
<Col span={18}>
|
<Form.Item
|
label="scale"
|
name="scaleSlider"
|
>
|
<Slider
|
marks={{
|
0.01: '0.01',
|
0.1: '0.1',
|
1: '1',
|
10: '10',
|
100: '100',
|
}}
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={6}>
|
<Form.Item
|
name="scale"
|
>
|
<InputNumber
|
changeOnWheel
|
min={0.01} max={100} defaultValue={1}
|
/>
|
</Form.Item>
|
</Col>
|
</Row>
|
</Col>
|
<Col span={6}>
|
<Form.Item label="Plain Text">
|
<span className="ant-form-text">China</span>
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item
|
label="Username"
|
name="username"
|
hasFeedback
|
validateTrigger="onBlur"
|
validateDebounce={1000}
|
rules={[
|
{
|
required: false,
|
}
|
]}
|
>
|
<Input disabled={false} />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item
|
label="InputNumber"
|
name="no"
|
>
|
<InputNumber
|
changeOnWheel
|
min={1} max={10} defaultValue={3}
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item
|
label="Switch"
|
valuePropName="checked"
|
>
|
<Switch />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item name="slider" label="Slider">
|
<Slider
|
marks={{
|
0: 'A',
|
20: 'B',
|
40: 'C',
|
60: 'D',
|
80: 'E',
|
100: 'F',
|
}}
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="Memo">
|
<Input.TextArea />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="Address">
|
<Space.Compact>
|
<Form.Item
|
name={['address', 'province']}
|
noStyle
|
rules={[
|
{
|
required: false,
|
message: 'Province is required',
|
},
|
]}
|
>
|
<Select placeholder="Select province">
|
<Option value="Zhejiang">Zhejiang</Option>
|
<Option value="Jiangsu">Jiangsu</Option>
|
</Select>
|
</Form.Item>
|
<Form.Item
|
name={['address', 'street']}
|
noStyle
|
rules={[
|
{
|
required: false,
|
message: 'Street is required',
|
},
|
]}
|
>
|
<Input
|
style={{
|
width: '50%',
|
}}
|
placeholder="Input street"
|
/>
|
</Form.Item>
|
</Space.Compact>
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item
|
name="phone"
|
label="Phone Number"
|
rules={[
|
{
|
required: false,
|
message: 'Please input your phone number!',
|
},
|
]}
|
>
|
<Input
|
addonBefore={prefixSelector}
|
style={{
|
width: '100%',
|
}}
|
/>
|
</Form.Item>
|
</Col>
|
|
|
|
</Row>
|
</Form>
|
</Drawer>
|
</>
|
)
|
}
|
|
export default SpriteSettings;
|
