122 lines
3.5 KiB
React
122 lines
3.5 KiB
React
import React, { useCallback } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { useSteps } from '../../hooks';
|
|
import ActionsStep from './ActionsStep';
|
|
import BoardMembershipsStep from '../BoardMembershipsStep';
|
|
|
|
const StepTypes = {
|
|
EDIT: 'EDIT',
|
|
};
|
|
|
|
const MembershipsStep = React.memo(
|
|
({
|
|
items,
|
|
permissionsSelectStep,
|
|
title,
|
|
actionsTitle,
|
|
leaveButtonContent,
|
|
leaveConfirmationTitle,
|
|
leaveConfirmationContent,
|
|
leaveConfirmationButtonContent,
|
|
deleteButtonContent,
|
|
deleteConfirmationTitle,
|
|
deleteConfirmationContent,
|
|
deleteConfirmationButtonContent,
|
|
canEdit,
|
|
canLeave,
|
|
onUpdate,
|
|
onDelete,
|
|
onClose,
|
|
}) => {
|
|
const [step, openStep, handleBack] = useSteps();
|
|
|
|
const handleUserSelect = useCallback(
|
|
(userId) => {
|
|
openStep(StepTypes.EDIT, {
|
|
userId,
|
|
});
|
|
},
|
|
[openStep],
|
|
);
|
|
|
|
if (step && step.type === StepTypes.EDIT) {
|
|
const currentItem = items.find((item) => item.userId === step.params.userId);
|
|
|
|
if (currentItem) {
|
|
return (
|
|
<ActionsStep
|
|
membership={currentItem}
|
|
permissionsSelectStep={permissionsSelectStep}
|
|
title={actionsTitle}
|
|
leaveButtonContent={leaveButtonContent}
|
|
leaveConfirmationTitle={leaveConfirmationTitle}
|
|
leaveConfirmationContent={leaveConfirmationContent}
|
|
leaveConfirmationButtonContent={leaveConfirmationButtonContent}
|
|
deleteButtonContent={deleteButtonContent}
|
|
deleteConfirmationTitle={deleteConfirmationTitle}
|
|
deleteConfirmationContent={deleteConfirmationContent}
|
|
deleteConfirmationButtonContent={deleteConfirmationButtonContent}
|
|
canEdit={canEdit}
|
|
canLeave={canLeave}
|
|
onUpdate={(data) => onUpdate(currentItem.id, data)}
|
|
onDelete={() => onDelete(currentItem.id)}
|
|
onBack={handleBack}
|
|
onClose={onClose}
|
|
/>
|
|
);
|
|
}
|
|
|
|
openStep(null);
|
|
}
|
|
|
|
return (
|
|
// FIXME: hack
|
|
<BoardMembershipsStep
|
|
items={items}
|
|
currentUserIds={[]}
|
|
title={title}
|
|
onUserSelect={handleUserSelect}
|
|
onUserDeselect={() => {}}
|
|
/>
|
|
);
|
|
},
|
|
);
|
|
|
|
MembershipsStep.propTypes = {
|
|
items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
|
|
permissionsSelectStep: PropTypes.elementType,
|
|
title: PropTypes.string,
|
|
actionsTitle: PropTypes.string,
|
|
leaveButtonContent: PropTypes.string,
|
|
leaveConfirmationTitle: PropTypes.string,
|
|
leaveConfirmationContent: PropTypes.string,
|
|
leaveConfirmationButtonContent: PropTypes.string,
|
|
deleteButtonContent: PropTypes.string,
|
|
deleteConfirmationTitle: PropTypes.string,
|
|
deleteConfirmationContent: PropTypes.string,
|
|
deleteConfirmationButtonContent: PropTypes.string,
|
|
canEdit: PropTypes.bool.isRequired,
|
|
canLeave: PropTypes.bool.isRequired,
|
|
onUpdate: PropTypes.func,
|
|
onDelete: PropTypes.func.isRequired,
|
|
onClose: PropTypes.func.isRequired,
|
|
};
|
|
|
|
MembershipsStep.defaultProps = {
|
|
permissionsSelectStep: undefined,
|
|
title: undefined,
|
|
actionsTitle: undefined,
|
|
leaveButtonContent: undefined,
|
|
leaveConfirmationTitle: undefined,
|
|
leaveConfirmationContent: undefined,
|
|
leaveConfirmationButtonContent: undefined,
|
|
deleteButtonContent: undefined,
|
|
deleteConfirmationTitle: undefined,
|
|
deleteConfirmationContent: undefined,
|
|
deleteConfirmationButtonContent: undefined,
|
|
onUpdate: undefined,
|
|
};
|
|
|
|
export default MembershipsStep;
|