mirror of
https://github.com/plankanban/planka.git
synced 2025-07-25 16:19:47 +02:00
Add project backgrounds
This commit is contained in:
parent
af4297ac62
commit
3bb68b0d4f
67 changed files with 774 additions and 210 deletions
|
@ -0,0 +1,74 @@
|
|||
import React, { useCallback, useEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from 'semantic-ui-react';
|
||||
import { FilePicker, Popup } from '../../../lib/custom-ui';
|
||||
|
||||
import styles from './EditBackgroundStep.module.css';
|
||||
|
||||
const EditBackgroundStep = React.memo(
|
||||
({ defaultValue, isImageUpdating, onImageUpdate, onImageDelete, onBack }) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
const field = useRef(null);
|
||||
|
||||
const handleFileSelect = useCallback(
|
||||
(file) => {
|
||||
onImageUpdate({
|
||||
file,
|
||||
});
|
||||
},
|
||||
[onImageUpdate],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
field.current.focus();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup.Header onBack={onBack}>
|
||||
{t('common.editBackground', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<div className={styles.action}>
|
||||
<FilePicker accept="image/*" onSelect={handleFileSelect}>
|
||||
<Button
|
||||
ref={field}
|
||||
content={t('action.uploadNewBackground')}
|
||||
loading={isImageUpdating}
|
||||
disabled={isImageUpdating}
|
||||
className={styles.actionButton}
|
||||
/>
|
||||
</FilePicker>
|
||||
</div>
|
||||
{defaultValue && (
|
||||
<Button
|
||||
negative
|
||||
content={t('action.deleteBackground')}
|
||||
disabled={isImageUpdating}
|
||||
onClick={onImageDelete}
|
||||
/>
|
||||
)}
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
EditBackgroundStep.propTypes = {
|
||||
defaultValue: PropTypes.object, // eslint-disable-line react/forbid-prop-types
|
||||
isImageUpdating: PropTypes.bool.isRequired,
|
||||
// onUpdate: PropTypes.func.isRequired,
|
||||
onImageUpdate: PropTypes.func.isRequired,
|
||||
onImageDelete: PropTypes.func.isRequired,
|
||||
onBack: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
EditBackgroundStep.defaultProps = {
|
||||
defaultValue: undefined,
|
||||
};
|
||||
|
||||
export default EditBackgroundStep;
|
Loading…
Add table
Add a link
Reference in a new issue