85 lines
2.0 KiB
TypeScript
85 lines
2.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classNames from 'classnames';
|
|
|
|
import Footer from './Footer';
|
|
import Body from './Body';
|
|
import Header from './Header';
|
|
import { useEffect } from 'react';
|
|
|
|
const Dialog = ({
|
|
title,
|
|
text,
|
|
onClose,
|
|
noCloseButton,
|
|
actions,
|
|
onShow,
|
|
onSubmit,
|
|
header: HeaderComponent = Header,
|
|
body: BodyComponent = Body,
|
|
footer: FooterComponent = Footer,
|
|
value: defaultValue = {},
|
|
}) => {
|
|
const [value, setValue] = useState(defaultValue);
|
|
|
|
const theme = 'bg-primary-dark';
|
|
const flex = 'flex flex-col';
|
|
const border = 'border-0 rounded';
|
|
const outline = 'outline-none focus:outline-none';
|
|
const position = 'relative';
|
|
const width = 'w-full';
|
|
const padding = 'px-[20px] pb-[20px] pt-[13px]';
|
|
|
|
useEffect(() => {
|
|
if (onShow) {
|
|
onShow();
|
|
}
|
|
}, [onShow]);
|
|
|
|
return (
|
|
<div className={classNames(theme, flex, border, outline, position, width, padding)}>
|
|
<HeaderComponent
|
|
title={title}
|
|
noCloseButton={noCloseButton}
|
|
onClose={onClose}
|
|
value={value}
|
|
setValue={setValue}
|
|
/>
|
|
<BodyComponent
|
|
text={text}
|
|
value={value}
|
|
setValue={setValue}
|
|
/>
|
|
<FooterComponent
|
|
actions={actions}
|
|
onSubmit={onSubmit}
|
|
value={value}
|
|
setValue={setValue}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Dialog.propTypes = {
|
|
title: PropTypes.string,
|
|
text: PropTypes.string,
|
|
onClose: PropTypes.func,
|
|
noCloseButton: PropTypes.bool,
|
|
header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
footer: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
onSubmit: PropTypes.func.isRequired,
|
|
value: PropTypes.object,
|
|
actions: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
id: PropTypes.string.isRequired,
|
|
text: PropTypes.string.isRequired,
|
|
value: PropTypes.any,
|
|
type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
|
|
})
|
|
).isRequired,
|
|
onShow: PropTypes.func,
|
|
};
|
|
|
|
export default Dialog;
|