提交 d32b7616 authored 作者: 王鹏飞's avatar 王鹏飞

refactor: 优化视频上传组件代码格式,统一函数语法并添加视频标题样式

上级 7e2211eb
......@@ -28,7 +28,7 @@ const VideoModal = (props, ref) => {
useImperativeHandle(ref, () => {
return {
setVisible
setVisible,
}
})
......@@ -37,7 +37,7 @@ const VideoModal = (props, ref) => {
maxCount: 1,
showUploadList: false,
accept: fileAccept.join(','),
beforeUpload: file => {
beforeUpload: (file) => {
const fileExt = file.name.substring(file.name.lastIndexOf('.'))
if (!fileAccept.includes(fileExt.toLowerCase())) {
message.error('请上传正确格式的视频')
......@@ -53,14 +53,14 @@ const VideoModal = (props, ref) => {
setVideoUrl(url)
form.setFieldsValue({ videoUrl: url })
setUploading(false)
}
},
}
const onFinish = values => {
const onFinish = (values) => {
editor.restoreSelection()
const nodeEntries = SlateEditor.nodes(editor, {
match: node => {
match: (node) => {
// JS syntax
if (SlateElement.isElement(node)) {
if (node.type === 'paragraph') {
......@@ -69,7 +69,7 @@ const VideoModal = (props, ref) => {
}
return false
},
universal: true
universal: true,
})
for (let nodeEntry of nodeEntries) {
const [node] = nodeEntry
......@@ -82,12 +82,14 @@ const VideoModal = (props, ref) => {
{
type: 'video',
src: values.videoUrl,
children: [{ text: '' }]
children: [{ text: '' }],
},
{
type: 'paragraph',
children: [{ text: values.videoTitle }]
}
textAlign: 'center',
fontSize: '14px',
children: [{ text: values.videoTitle }],
},
]
SlateTransforms.insertNodes(editor, nodes)
......@@ -109,13 +111,18 @@ const VideoModal = (props, ref) => {
classNames={{
header: 'editor-header-customer',
body: 'editor-body-customer',
wrapper: 'editor-wrapper-customer'
wrapper: 'editor-wrapper-customer',
}}
maskClosable={false}
onCancel={() => setVisible(false)}>
<Divider />
<div className="editor-content-form">
<Form layout="vertical" name="validate_other" form={form} onFinish={onFinish} initialValues={{ videoUrl: videoUrl, videoTitle: '' }}>
<Form
layout="vertical"
name="validate_other"
form={form}
onFinish={onFinish}
initialValues={{ videoUrl: videoUrl, videoTitle: '' }}>
<Form.Item label="上传视频" name="videoUrl" rules={[{ required: true, message: '请上传视频' }]}>
<Spin spinning={uploading} tip={`${progress}%`}>
<div className="editor-dragger">
......@@ -147,7 +154,11 @@ const VideoModal = (props, ref) => {
</div>
</Spin>
</Form.Item>
<Form.Item label="视频标题" name="videoTitle" rules={[{ required: true, message: '请输入视频标题' }]} extra="最多输入100字">
<Form.Item
label="视频标题"
name="videoTitle"
rules={[{ required: true, message: '请输入视频标题' }]}
extra="最多输入100字">
<Input maxLength={100} placeholder="" allowClear />
</Form.Item>
<Form.Item className="editor-form-buttons">
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论