import React , { useState } from 'react' ; import { message , Form , Input , Icon , Button , Select , Upload } from 'antd' ; import { FormComponentProps } from 'antd/lib/form' ; import { UploadFileStatus , UploadType , UploadProps , } from 'antd/lib/upload/interface' ; import { useDispatch , useSelector } from 'react-redux' ; jsx import { css , jsx } from '@emotion/core' ; import { Dispatch , RootState } from 'store' ; import { IMAGE_HOSTING_URL } from 'utils/image' ; const { Option } = Select ; const { TextArea } = Input ; interface CollectionSettingProps extends FormComponentProps { } function CollectionSetting ( props ) { const dispatch = useDispatch < Dispatch > ( ) ; const saving = useSelector ( ( state ) => state . loading . effects . collection . save ) ; const collectionMeta = useSelector ( ( state ) => state . collection . meta ) ; const initialTopics = collectionMeta ?. topics || [ ] ; const initialCategories = collectionMeta ?. categories || [ ] ; const initialCover = collectionMeta ?. cover ? [ { url : collectionMeta ?. cover , uid : '-1' , name : collectionMeta ?. cover . split ( '/' ) . slice ( - 1 ) [ 0 ] , status : 'done' as UploadFileStatus , size : collectionMeta ?. cover . split ( '/' ) . length , type : 'drag' as UploadType , } , ] : [ ] ; const initialName = collectionMeta ?. name || '' ; const initialDescription = collectionMeta ?. description || '' ; const coverProps = { action : IMAGE_HOSTING_URL , listType : 'picture' , defaultFileList : initialCover , } ; const [ fileList , setFileList ] = useState ( initialCover ) ; const { getFieldDecorator , setFieldsValue , getFieldValue } = props . form ; function handleSubmit ( event ) { event . preventDefault ( ) ; props . form . validateFields ( ( err , values ) => { if ( ! err ) { const { cover , name , topics , description , categories , } = values ; let res = { name , } ; if ( topics ) { res = { ... res , topics } ; } if ( categories ) { res = { ... res , categories } ; } if ( description ) { res = { ... res , description } ; } if ( cover ) { let url = Array . isArray ( cover ?. fileList ) && cover ?. fileList . length > 0 ? cover ?. fileList [ 0 ] . url || cover ?. fileList [ 0 ] . response . data : '' ; if ( ! url && Array . isArray ( cover ) && cover . length > 0 ) { url = cover [ 0 ] . url ; } res = { ... res , cover : url } ; } dispatch . collection . setMeta ( res ) ; dispatch . collection . save ( { keys : [ 'meta' ] } ) ; dispatch . drawer . setVisible ( false ) ; message . success ( '保存成功' ) ; } } ) ; } function handleCoverChange ( { fileList } ) { let resultFileList = [ ... fileList ] ; resultFileList = resultFileList . slice ( - 1 ) ; resultFileList = resultFileList . map ( ( file ) => { if ( file . response ) { file . url = file . response . url ; } return file ; } ) ; setFileList ( resultFileList ) ; setFieldsValue ( { cover : resultFileList , } ) ; } function handleTopicsChange ( topics ) { setFieldsValue ( { topics , } ) ; } function handleCategoriesChange ( categories ) { setFieldsValue ( { categories , } ) ; } return ( < div css = { css `
        width: 100%;
        padding: 0 24px;

        & img {
          margin: 0;
        }
      ` } > < Form layout = "vertical" onSubmit = { handleSubmit } > < Form . Item label = "文集封面" css = { css `
            width: 100%;
          ` } > { getFieldDecorator ( 'cover' , { initialValue : initialCover , } ) ( < Upload fileList = { fileList as any [ ] } onChange = { handleCoverChange } { ... coverProps } > < Button > < Icon type = "upload" / > 上传封面 < /Button> < /Upload>)} < /Form.Item> < Form . Item label = "文集标题" css = { css `
            width: 100%;
          ` } > { getFieldDecorator ( 'name' , { rules : [ { required : true , message : '请输入文集标题' } ] , initialValue : initialName , } ) ( < Input placeholder = "标题" / > ) } < /Form.Item> < Form . Item label = "分类" css = { css `
            width: 100%;
          ` } > { getFieldDecorator ( 'categories' , { initialValue : initialCategories , } ) ( < Select mode = "tags" placeholder = "输入文集分类" allowClear onChange = { handleCategoriesChange } > { getFieldValue ( 'categories' ) . map ( ( category ) => ( < Option key = { category } > { category } < /Option>))} < /Select>)} < /Form.Item> < Form . Item label = "标签" css = { css `
            width: 100%;
          ` } > { getFieldDecorator ( 'topics' , { initialValue : initialTopics , } ) ( < Select mode = "tags" placeholder = "输入文集标签" allowClear onChange = { handleTopicsChange } > { getFieldValue ( 'topics' ) . map ( ( topic ) => ( < Option key = { topic } > { topic } < /Option>))} < /Select>)} < /Form.Item> < Form . Item label = "文集摘要" > { getFieldDecorator ( 'description' , { initialValue : initialDescription , } ) ( < TextArea placeholder = "请输入文集摘要" autoSize = { { minRows : 4 , maxRows : 8 } } / > ) } < /Form.Item> < Form . Item css = { css `
            width: 100%;
          ` } > < div > < Button css = { css `
                margin-right: 16px;
              ` } onClick = { ( ) => dispatch . drawer . setVisible ( false ) } > 取消 < /Button> < Button htmlType = "submit" type = "primary" loading = { saving } > 确认 < /Button> < /div> < /Form.Item> < /Form> < /div>); } export default Form . create < CollectionSettingProps > ( { name : 'CollectionSetting' , } ) ( CollectionSetting ) ;