Show lightbox controls based on presence of handlers

pull/1/head
Daniel Gasienica 7 years ago
parent 59650035ec
commit 96be0df8c7

@ -589,7 +589,6 @@
documents: [], documents: [],
onItemClick: ({message}) => { onItemClick: ({message}) => {
const lightboxProps = { const lightboxProps = {
shouldShowSaveAsButton: false,
imageURL: message.objectURL, imageURL: message.objectURL,
}; };
this.lightboxView = new Whisper.ReactWrapperView({ this.lightboxView = new Whisper.ReactWrapperView({

@ -1,10 +1,12 @@
```js ```js
const noop = () => {};
<div style={{position: 'relative', width: '100%', height: 500}}> <div style={{position: 'relative', width: '100%', height: 500}}>
<Lightbox <Lightbox
imageURL="https://placekitten.com/800/600" imageURL="https://placekitten.com/800/600"
shouldShowSaveAsButton={true} onNext={noop}
shouldShowNextButton={true} onPrevious={noop}
shouldShowPreviousButton={true} onSave={noop}
/> />
</div> </div>
``` ```

@ -11,9 +11,6 @@ interface Props {
onNext?: () => void; onNext?: () => void;
onPrevious?: () => void; onPrevious?: () => void;
onSave: () => void; onSave: () => void;
shouldShowNextButton: boolean;
shouldShowPreviousButton: boolean;
shouldShowSaveAsButton: boolean;
} }
const styles = { const styles = {
@ -57,12 +54,6 @@ const IconButton = ({ onClick, type }: IconButtonProps) => (
); );
export class Lightbox extends React.Component<Props, {}> { export class Lightbox extends React.Component<Props, {}> {
public static defaultProps: Partial<Props> = {
shouldShowNextButton: false,
shouldShowPreviousButton: false,
shouldShowSaveAsButton: false,
};
private containerRef: HTMLDivElement | null = null; private containerRef: HTMLDivElement | null = null;
public componentDidMount() { public componentDidMount() {
@ -78,9 +69,6 @@ export class Lightbox extends React.Component<Props, {}> {
public render() { public render() {
const { const {
imageURL, imageURL,
shouldShowNextButton,
shouldShowPreviousButton,
shouldShowSaveAsButton,
} = this.props; } = this.props;
return ( return (
<div <div
@ -97,13 +85,13 @@ export class Lightbox extends React.Component<Props, {}> {
</div> </div>
<div style={styles.controls}> <div style={styles.controls}>
<IconButton type="close" onClick={this.onClose} /> <IconButton type="close" onClick={this.onClose} />
{shouldShowSaveAsButton ? ( {this.props.onSave ? (
<IconButton type="save" onClick={this.props.onSave} /> <IconButton type="save" onClick={this.props.onSave} />
) : null} ) : null}
{shouldShowPreviousButton ? ( {this.props.onPrevious ? (
<IconButton type="previous" onClick={this.props.onPrevious} /> <IconButton type="previous" onClick={this.props.onPrevious} />
) : null} ) : null}
{shouldShowNextButton ? ( {this.props.onNext ? (
<IconButton type="next" onClick={this.props.onNext} /> <IconButton type="next" onClick={this.props.onNext} />
) : null} ) : null}
</div> </div>

Loading…
Cancel
Save