import React, { Component } from 'react';
import { connect } from "react-redux";
import {Divider, Form, message, Popconfirm, Upload} from "antd";
import { Link } from "react-router-dom";
import {
AntButton,
AntFormItem,
AntInput,
} from "@layouts";
import {PlusOutlined} from "@ant-design/icons";
import helpers from "@ultis/helpers";
class CustomComponent extends Component {
formRef = React.createRef();
constructor(props) {
super(props);
this.state = {
open: false,
confirmLoading: false,
selectedFileList: []
}
}
showPopconfirm = () => {
this.setOpen(true);
};
setOpen = (value) => {
this.setState({
...this.state,
open: value,
});
};
setConfirmLoading = (value) => {
this.setState({
...this.state,
confirmLoading: value,
});
};
handleOkDelete = (id) => {
this.setConfirmLoading(true);
setTimeout(() => {
this.props.onDelete(id)
this.setOpen(false);
this.setConfirmLoading(false);
}, 500);
};
handleCancelDelete = () => {
this.setOpen(false)
};
onSubmit = (data) => {
this.props.onSubmit({
id: data.id ?? null,
name: data.name ?? null,
})
}
componentDidUpdate(prevProps) {
let prevDetail = prevProps.listRecipe.detail;
let currentDetail = this.props.listRecipe.detail;
let prevDetailRecipe = prevDetail.data.listRecipe ?? {}
let currentDetailRecipe = currentDetail.data.listRecipe ?? {}
if (prevDetailRecipe.recipeId !== currentDetailRecipe.recipeId) {
let formData = {
id: currentDetailRecipe.recipeId ?? null,
name: currentDetailRecipe.recipeName ?? "",
}
if (this.formRef.current) {
this.formRef.current.setFieldsValue(formData)
}
}
// Load detail portfolio form
/*const currentDetail = this.props.portfolioConfigs.detail.data ?? {};
const prevDetail = prevProps.portfolioConfigs.detail.data ?? {}
if (currentDetail !== prevDetail) {
let {logoUrl, name} = currentDetail
// Check is valid url
if (logoUrl) {
// Need init file
let initFile = {
uid : '-1',
name : name,
status: 'done',
url : logoUrl,
};
this.setState({
...this.state,
selectedFileList: [initFile]
})
}
}*/
}
resetForm = () => {
if (this.formRef.current) {
this.formRef.current.setFieldsValue({
...initValues
})
}
}
render() {
let {
id,
} = this.props
const { selectedFileList, previewVisible, previewImage, previewTitle } = this.state
// Response data
const updateLoading = false;
const createLoading = false;
return (
<Form
className="form-center form-custom recipe-form"
onFinish={(data => this.onSubmit(data))}
labelCol={{ span: 4 }}
wrapperCol={{ span: 20 }}
ref={this.formRef}
initialValues={initValues}
style={{ padding: 24 }}
>
<AntFormItem
hidden={true}
name="id"
>
<AntInput />
</AntFormItem>
<AntFormItem
label="Ảnh bìa"
name="image"
>
<Upload
fileList={selectedFileList}
listType="picture-card"
beforeUpload={this.beforeUpload}
onChange={this.handleChange}
customRequest={this.customRequest}
onPreview={this.handlePreview}
>
{selectedFileList.length >= 1 ? null : <UploadButton/>}
</Upload>
</AntFormItem>
<AntFormItem
required={true}
label="Tên danh sách"
name="name"
>
<AntInput placeholder="Nhập tên danh sách" />
</AntFormItem>
<Divider style={{ marginBlock: 24 }} />
<div className="text-center group-button">
{
id ?
<AntButton
className="btn-primary"
htmlType="submit"
loading={updateLoading}
>
Update
</AntButton> :
<AntButton
className="btn-success"
htmlType="submit"
loading={createLoading}
>
Save
</AntButton>
}
{
id ?
<Popconfirm
title="Xác nhận xoá ?"
open={this.state.open}
onConfirm={() => {
this.handleOkDelete(id)
}}
okButtonProps={{
loading: this.state.confirmLoading,
}}
onCancel={this.handleCancelDelete}
>
<AntButton
type="danger"
value={id}
onClick={this.showPopconfirm}
>
Xoá
</AntButton>
</Popconfirm>
: null
}
<Link to={'/profile'}>
<AntButton>
Quay lại
</AntButton>
</Link>
</div>
</Form>
)
}
handleChange = ({fileList: newFileList}) => {
this.setState({
...this.state,
selectedFileList: newFileList
})
};
/**
* Custom handel upload
* @param onSuccess
* @param onError
* @param file
*/
customRequest = ({onSuccess, onError, file}) => {
let {selectedFileList} = this.state
try {
let currentFile = selectedFileList.find((item) => {
return item.uid = file.uid
});
currentFile.status = "done";
this.setState({
...this.state,
selectedFileList: selectedFileList
})
} catch (e) {
console.log(e)
}
};
/**
* Validate image
* @param file
* @returns {boolean}
*/
beforeUpload = (file) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('You can only upload JPG/PNG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
}
return isJpgOrPng && isLt2M;
};
handleCancel = () => {
this.setState({
...this.state,
previewVisible: false
})
};
handlePreview = async (file) => {
if (!file.url && !file.preview) {
file.preview = await helpers.getBase64(file.originFileObj)
}
this.setState({
...this.state,
previewVisible: true,
previewImage : file.url || file.preview,
previewTitle : file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
})
};
}
function mapStateToProps(state) {
return {
listRecipe: state.listRecipe,
home: state.home,
}
}
export default connect(mapStateToProps, {})(CustomComponent)
const initValues = {
id: null,
name: "",
}
const UploadButton = () => (
<div>
<PlusOutlined/>
<div
style={{
marginTop: 8,
}}
>
Upload
</div>
</div>
);