101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
import { Button, Group, Switch, Tooltip } from '@mantine/core';
|
|
import { IconDeviceFloppy, IconX } from '@tabler/icons-react';
|
|
|
|
import { useFormerStore } from './Former.store';
|
|
|
|
export const FormerButtonArea = () => {
|
|
const {
|
|
buttonAreaGroupProps,
|
|
closeButtonProps,
|
|
closeButtonTitle,
|
|
dirty,
|
|
getState,
|
|
keepOpen,
|
|
onClose,
|
|
request,
|
|
save,
|
|
saveButtonProps,
|
|
saveButtonTitle,
|
|
setState,
|
|
showKeepOpenSwitch,
|
|
} = useFormerStore((state) => ({
|
|
buttonAreaGroupProps: state.layout?.buttonAreaGroupProps,
|
|
closeButtonProps: state.layout?.closeButtonProps,
|
|
closeButtonTitle: state.layout?.closeButtonTitle,
|
|
dirty: state.dirty,
|
|
getState: state.getState,
|
|
keepOpen: state.keepOpen,
|
|
onClose: state.onClose,
|
|
request: state.request,
|
|
save: state.save,
|
|
saveButtonProps: state.layout?.saveButtonProps,
|
|
saveButtonTitle: state.layout?.saveButtonTitle,
|
|
setState: state.setState,
|
|
showKeepOpenSwitch: state.layout?.showKeepOpenSwitch,
|
|
}));
|
|
|
|
const disabledSave =
|
|
['select', 'view'].includes(request || '') || (['update'].includes(request || '') && !dirty);
|
|
|
|
return (
|
|
<Group
|
|
justify="center"
|
|
p="xs"
|
|
style={{ boxShadow: '2px 2px 5px rgba(47, 47, 47, 0.1)' }}
|
|
w="100%"
|
|
{...buttonAreaGroupProps}
|
|
>
|
|
<Group grow justify="space-evenly">
|
|
{typeof onClose === 'function' && (
|
|
<Button
|
|
color="orange"
|
|
leftSection={<IconX />}
|
|
miw={'8rem'}
|
|
px="md"
|
|
size="sm"
|
|
{...closeButtonProps}
|
|
onClick={() => {
|
|
onClose(getState('values'));
|
|
}}
|
|
>
|
|
{closeButtonTitle || 'Close'}
|
|
</Button>
|
|
)}
|
|
{showKeepOpenSwitch && (
|
|
<Switch
|
|
checked={keepOpen}
|
|
label="Keep Open"
|
|
onChange={(event) => setState('keepOpen', event.currentTarget.checked)}
|
|
/>
|
|
)}
|
|
<Tooltip
|
|
label={
|
|
disabledSave ? (
|
|
<p>
|
|
Cannot save in view or select mode, or no changes made. <br />
|
|
Try changing some values.
|
|
</p>
|
|
) : (
|
|
<p>Save the current record</p>
|
|
)
|
|
}
|
|
>
|
|
<Button
|
|
bg={request === 'delete' ? 'red' : undefined}
|
|
color="green"
|
|
leftSection={<IconDeviceFloppy />}
|
|
miw={'8rem'}
|
|
px="md"
|
|
size="sm"
|
|
{...saveButtonProps}
|
|
disabled={disabledSave}
|
|
onClick={() => save()}
|
|
>
|
|
{saveButtonTitle || 'Save'}
|
|
</Button>
|
|
</Tooltip>
|
|
</Group>
|
|
</Group>
|
|
);
|
|
};
|