/* * << * Davinci * == * Copyright (C) 2016 - 2017 EDP * == * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * >> */ import React, { useCallback } from 'react' import { Modal, Form, Card, Row, Col, Checkbox, InputNumber, Radio, Select } from 'antd' const FormItem = Form.Item const RadioGroup = Radio.Group const { Option } = Select import { FormComponentProps, FormItemProps } from 'antd/lib/form' import { IDisplayParams } from 'containers/Viz/types' import { DefaultDisplayParams } from './constants' interface IDisplaySettingModalProps extends FormComponentProps { visible: boolean displayParams: IDisplayParams onCancel: () => void onOk: (params: IDisplayParams) => void } const transitionStyleOptions: Array<{ label: string value: IDisplayParams['transitionStyle'] }> = [ { label: '无', value: 'none' }, { label: '淡入淡出', value: 'fade' }, { label: '滑动', value: 'slide' }, { label: '凸镜', value: 'convex' }, { label: '凹镜', value: 'concave' }, { label: '缩放', value: 'zoom' } ] const formItemStyle: Partial = { labelCol: { span: 12 }, wrapperCol: { span: 12 } } const DisplaySettingModal: React.FC = (props) => { const { visible, displayParams, form, onCancel, onOk } = props const { getFieldDecorator } = form const { autoPlay, autoSlide, transitionStyle, transitionSpeed, grid } = displayParams || DefaultDisplayParams const ok = useCallback(() => { form.validateFieldsAndScroll((err, values) => { if (err) { return } onOk(values) }) }, [onOk]) return (
{getFieldDecorator('autoPlay', { initialValue: autoPlay, valuePropName: 'checked' })()} {form.getFieldValue('autoPlay') === true && ( {getFieldDecorator('autoSlide', { initialValue: autoSlide, validateFirst: true, rules: [{ required: true, message: '请输入数字' }] })()} )} {getFieldDecorator('transitionStyle', { initialValue: transitionStyle })()} {getFieldDecorator('transitionSpeed', { initialValue: transitionSpeed })( )} {getFieldDecorator('grid[0]', { initialValue: grid[0], rules: [{ required: true, message: '请填入数字' }] })()} {getFieldDecorator('grid[1]', { initialValue: grid[1], rules: [{ required: true, message: '请填入数字' }] })()}
) } export default Form.create()(DisplaySettingModal)