mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-03 08:35:29 +02:00
53 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
}
|