114 lines
3.9 KiB
TypeScript
114 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import React, { FC, useEffect, useState } from 'react';
|
|
import { Form, Upload, Button } from 'antd';
|
|
import type { UploadFile, UploadProps } from 'antd';
|
|
import ImgCrop from 'antd-img-crop';
|
|
import { CameraOutlined } from '@ant-design/icons';
|
|
import { Link } from '../../navigation';
|
|
import { CustomInput } from '../view';
|
|
import { Profile } from '../../types/profile';
|
|
import { useProfileSettings } from '../../actions/hooks/useProfileSettings';
|
|
|
|
type ProfileSettingsProps = {
|
|
locale: string;
|
|
photoDesc?: string;
|
|
placeholderName?: string;
|
|
placeholderSurname?: string;
|
|
placeholderBirthday?: string;
|
|
placeholderEmail?: string;
|
|
changePasswordLink?: string;
|
|
saveButton?: string;
|
|
};
|
|
|
|
// type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
|
|
|
|
export const ProfileSettings: FC<ProfileSettingsProps> = ({
|
|
locale,
|
|
photoDesc,
|
|
placeholderName,
|
|
placeholderSurname,
|
|
placeholderBirthday,
|
|
placeholderEmail,
|
|
changePasswordLink,
|
|
saveButton
|
|
}) => {
|
|
const [form] = Form.useForm<Profile>();
|
|
const { profileSettings } = useProfileSettings(locale);
|
|
|
|
useEffect(() => {
|
|
if (profileSettings) {
|
|
form.setFieldsValue(profileSettings);
|
|
}
|
|
}, [profileSettings]);
|
|
|
|
const [fileList, setFileList] = useState<UploadFile[]>();
|
|
|
|
const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
|
|
setFileList(newFileList);
|
|
};
|
|
|
|
const onPreview = async (file: UploadFile) => {
|
|
// let src = file.url as string;
|
|
// if (!src) {
|
|
// src = await new Promise((resolve) => {
|
|
// const reader = new FileReader();
|
|
// reader.readAsDataURL(file.originFileObj as FileType);
|
|
// reader.onload = () => resolve(reader.result as string);
|
|
// });
|
|
// }
|
|
// const image = new Image();
|
|
// image.src = src;
|
|
// const imgWindow = window.open(src);
|
|
// imgWindow?.document.write(image.outerHTML);
|
|
};
|
|
|
|
return (
|
|
<Form form={form} className="form-settings">
|
|
<div className="user-avatar">
|
|
<div className="user-avatar__edit">
|
|
<input className="" type="file" id="input-file" />
|
|
<label htmlFor="input-file" className="form-label" />
|
|
</div>
|
|
<div className="user-avatar__text">{photoDesc}</div>
|
|
</div>
|
|
<ImgCrop rotationSlider>
|
|
<Upload
|
|
action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
|
|
fileList={fileList}
|
|
onChange={onChange}
|
|
onPreview={onPreview}
|
|
>
|
|
<Button icon={<CameraOutlined />}>Click to Upload</Button>
|
|
</Upload>
|
|
</ImgCrop>
|
|
<div className="form-field">
|
|
<Form.Item name="username">
|
|
<CustomInput placeholder={placeholderName} />
|
|
</Form.Item>
|
|
</div>
|
|
<div className="form-field">
|
|
<Form.Item name="surname">
|
|
<CustomInput placeholder={placeholderSurname} />
|
|
</Form.Item>
|
|
</div>
|
|
{/* <div className="form-field">
|
|
<Form.Item name="birthday">
|
|
<CustomInput placeholder={placeholderBirthday} />
|
|
</Form.Item>
|
|
</div> */}
|
|
<div className="form-field">
|
|
<Form.Item name="login">
|
|
<CustomInput type="email" placeholder={placeholderEmail} />
|
|
</Form.Item>
|
|
</div>
|
|
<div className="form-link">
|
|
<Link href={'change-password' as any}>
|
|
{changePasswordLink}
|
|
</Link>
|
|
</div>
|
|
<button className="btn-apply">{saveButton}</button>
|
|
</Form>
|
|
);
|
|
};
|