1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-03 08:35:29 +02:00
joplin/packages/app-desktop/gui/ConfigScreen/ButtonBar.tsx

53 lines
1.5 KiB
TypeScript

import * as React from 'react';
import Button, { ButtonLevel } from '../Button/Button';
import { _ } from '@joplin/lib/locale';
const styled = require('styled-components').default;
interface Props {
backButtonTitle?: string;
hasChanges?: boolean;
onCancelClick: Function;
onSaveClick?: Function;
onApplyClick?: Function;
}
export const StyledRoot = styled.div`
display: flex;
align-items: center;
padding: 10px;
background-color: ${(props: any) => props.theme.backgroundColor3};
padding-left: ${(props: any) => props.theme.configScreenPadding}px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: ${(props: any) => props.theme.dividerColor};
`;
export default function ButtonBar(props: Props) {
function renderOkButton() {
if (!props.onSaveClick) return null;
return <Button style={{ marginRight: 10 }} level={ButtonLevel.Primary} disabled={!props.hasChanges} onClick={props.onSaveClick} title={_('OK')}/>;
}
function renderApplyButton() {
if (!props.onApplyClick) return null;
return <Button level={ButtonLevel.Primary} disabled={!props.hasChanges} onClick={props.onApplyClick} title={_('Apply')}/>;
}
return (
<StyledRoot>
<Button
onClick={props.onCancelClick}
level={ButtonLevel.Secondary}
iconName="fa fa-chevron-left"
title={props.backButtonTitle ? props.backButtonTitle : _('Back')}
/>
{ (props.onApplyClick || props.onSaveClick) && (
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: 30 }}>
{renderOkButton()}
{renderApplyButton()}
</div>
)}
</StyledRoot>
);
}