1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-18 20:59:44 +02:00
planka/client/src/components/Boards/AddPopup/AddPopup.jsx
2022-12-17 03:48:06 +05:00

116 lines
2.9 KiB
JavaScript
Executable file

import React, { useCallback, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { Button, Form, Icon } from 'semantic-ui-react';
import { useDidUpdate, useToggle } from '../../../lib/hooks';
import { withPopup } from '../../../lib/popup';
import { Input, Popup } from '../../../lib/custom-ui';
import { useForm, useSteps } from '../../../hooks';
import ImportStep from './ImportStep';
import styles from './AddPopup.module.scss';
const StepTypes = {
IMPORT: 'IMPORT',
};
const AddStep = React.memo(({ onCreate, onClose }) => {
const [t] = useTranslation();
const [data, handleFieldChange, setData] = useForm({
name: '',
import: null,
});
const [step, openStep, handleBack] = useSteps();
const [focusNameFieldState, focusNameField] = useToggle();
const nameField = useRef(null);
const handleImportSelect = useCallback(
(nextImport) => {
setData((prevData) => ({
...prevData,
import: nextImport,
}));
},
[setData],
);
const handleImportBack = useCallback(() => {
handleBack();
focusNameField();
}, [handleBack, focusNameField]);
const handleSubmit = useCallback(() => {
const cleanData = {
...data,
type: 'kanban',
name: data.name.trim(),
};
if (!cleanData.name) {
nameField.current.select();
return;
}
onCreate(cleanData);
onClose();
}, [onClose, data, onCreate]);
const handleImportClick = useCallback(() => {
openStep(StepTypes.IMPORT);
}, [openStep]);
useEffect(() => {
nameField.current.focus();
}, []);
useDidUpdate(() => {
nameField.current.focus();
}, [focusNameFieldState]);
if (step && step.type === StepTypes.IMPORT) {
return <ImportStep onSelect={handleImportSelect} onBack={handleImportBack} />;
}
return (
<>
<Popup.Header>
{t('common.createBoard', {
context: 'title',
})}
</Popup.Header>
<Popup.Content>
<Form onSubmit={handleSubmit}>
<Input
fluid
ref={nameField}
name="name"
value={data.name}
className={styles.field}
onChange={handleFieldChange}
/>
<div className={styles.controls}>
<Button positive content={t('action.createBoard')} className={styles.createButton} />
<Button type="button" className={styles.importButton} onClick={handleImportClick}>
<Icon
name={data.import ? data.import.type : 'arrow down'}
className={styles.importButtonIcon}
/>
{data.import ? data.import.file.name : t('action.import')}
</Button>
</div>
</Form>
</Popup.Content>
</>
);
});
AddStep.propTypes = {
onCreate: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
};
export default withPopup(AddStep);