plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
51 lines (50 loc) • 3.04 kB
JavaScript
import React, { useEffect } from 'react';
import PropTypes from 'prop-types'; // Import PropTypes
import { Form, Radio, Row, Col, Switch } from 'antd';
import UrlModal from '../../common/UrlModal';
import FileUpload from '../../common/FileUpload';
import i18n from 'i18next';
function MapProperties({ form, data }) {
useEffect(() => {
if (!data)
return;
// any other logic when data changes can go here
}, [data]);
if (!data) {
return null;
}
const videoLoadType = data.videoLoadType || 'file';
return (React.createElement(React.Fragment, null,
React.createElement(Row, null,
React.createElement(Col, { span: 8 },
React.createElement(Form.Item, { label: i18n.t('common.autoplay'), name: "autoplay", initialValue: data.autoplay, valuePropName: "checked", rules: [{ type: 'boolean' }] },
React.createElement(Switch, null))),
React.createElement(Col, { span: 8 },
React.createElement(Form.Item, { label: i18n.t('common.muted'), name: "muted", initialValue: data.muted, valuePropName: "checked", rules: [{ type: 'boolean' }] },
React.createElement(Switch, null))),
React.createElement(Col, { span: 8 },
React.createElement(Form.Item, { label: i18n.t('common.loop'), name: "loop", initialValue: data.loop, valuePropName: "checked", rules: [{ type: 'boolean' }] },
React.createElement(Switch, null)))),
React.createElement(Form.Item, { label: i18n.t('common.video-load-type'), name: "videoLoadType", initialValue: videoLoadType, rules: [
{
/* message validation can be added here */
},
] },
React.createElement(Radio.Group, { size: "large" },
React.createElement(Radio.Button, { value: "file" }, i18n.t('common.file-upload-type')),
React.createElement(Radio.Button, { value: "src" }, i18n.t('common.video-url-type')))),
videoLoadType === 'file' ? (React.createElement(Form.Item, { label: i18n.t('common.file'), name: "file", initialValue: data.file, rules: [{ required: true, message: i18n.t('common.please-select-video') }] },
React.createElement(FileUpload, { accept: "video/*" }))) : (React.createElement(Form.Item, { name: "src", rules: [{ required: true, message: i18n.t('common.please-select-image') }] },
React.createElement(UrlModal, { form: form })))));
}
MapProperties.propTypes = {
form: PropTypes.object.isRequired, // The 'form' prop should be an object, as it's from Ant Design's Form
data: PropTypes.shape({
autoplay: PropTypes.bool,
muted: PropTypes.bool,
loop: PropTypes.bool,
videoLoadType: PropTypes.oneOf(['file', 'src']),
file: PropTypes.object, // This should be the file object used in FileUpload
}).isRequired, // The 'data' prop should be an object with these specific fields
};
export default MapProperties;