lbry-desktop/ui/modal/modal.jsx

116 lines
3.1 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
// These should probably just be combined into one modal component
2019-11-22 22:13:00 +01:00
import * as ICONS from 'constants/icons';
2018-03-26 23:32:43 +02:00
import * as React from 'react';
import ReactModal from 'react-modal';
import Button from 'component/button';
import classnames from 'classnames';
2019-12-19 21:43:49 +01:00
import useIsMobile from 'effects/use-is-mobile';
2018-03-26 23:32:43 +02:00
type ModalProps = {
2019-12-19 21:43:49 +01:00
type?: string,
overlay?: boolean,
confirmButtonLabel?: string,
abortButtonLabel?: string,
confirmButtonDisabled?: boolean,
abortButtonDisabled?: boolean,
2018-03-26 23:32:43 +02:00
onConfirmed?: any => any,
onAborted?: any => any,
className?: string,
children?: React.Node,
extraContent?: React.Node,
expandButtonLabel?: string,
hideButtonLabel?: string,
title?: string | React.Node,
2018-03-26 23:32:43 +02:00
};
2019-12-19 21:43:49 +01:00
export function Modal(props: ModalProps) {
const {
children,
type = 'alert',
confirmButtonLabel = __('OK'),
confirmButtonDisabled = false,
onConfirmed,
abortButtonLabel = __('Cancel'),
abortButtonDisabled = false,
onAborted,
className,
title,
...modalProps
} = props;
2018-03-26 23:32:43 +02:00
2019-12-19 21:43:49 +01:00
const isMobile = useIsMobile();
return (
<ReactModal
{...modalProps}
onRequestClose={onAborted || onConfirmed}
className={classnames('modal', className, {
'modal--card-internal': type === 'card',
})}
overlayClassName="modal-overlay"
>
{title && <h1 className="card__title card__title--deprecated">{title}</h1>}
{type === 'card' && (
<Button iconSize={isMobile ? 24 : undefined} button="close" icon={ICONS.REMOVE} onClick={onAborted} />
)}
{children}
{type === 'custom' || type === 'card' ? null : ( // custom modals define their own buttons
<div className="card__actions">
<Button button="primary" label={confirmButtonLabel} disabled={confirmButtonDisabled} onClick={onConfirmed} />
{type === 'confirm' ? (
<Button button="link" label={abortButtonLabel} disabled={abortButtonDisabled} onClick={onAborted} />
) : null}
</div>
)}
</ReactModal>
);
2018-03-26 23:32:43 +02:00
}
type State = {
expanded: boolean,
};
export class ExpandableModal extends React.PureComponent<ModalProps, State> {
static defaultProps = {
2019-03-05 05:46:57 +01:00
confirmButtonLabel: __('OK'),
expandButtonLabel: __('Show More...'),
hideButtonLabel: __('Show Less'),
2018-03-26 23:32:43 +02:00
};
constructor(props: ModalProps) {
super(props);
this.state = {
expanded: false,
};
}
toggleExpanded() {
this.setState({
expanded: !this.state.expanded,
});
}
render() {
return (
2019-03-25 07:18:22 +01:00
<Modal type="custom" {...this.props}>
2018-03-26 23:32:43 +02:00
{this.props.children}
2019-07-21 23:31:22 +02:00
{this.state.expanded ? <div>{this.props.extraContent}</div> : null}
2019-03-25 07:18:22 +01:00
<div className="card__actions">
2019-05-07 23:38:29 +02:00
<Button button="primary" label={this.props.confirmButtonLabel} onClick={this.props.onConfirmed} />
2018-03-26 23:32:43 +02:00
<Button
2019-03-25 07:18:22 +01:00
button="link"
2018-03-26 23:32:43 +02:00
label={!this.state.expanded ? this.props.expandButtonLabel : this.props.hideButtonLabel}
onClick={() => {
this.toggleExpanded();
}}
/>
</div>
</Modal>
);
}
}
export default Modal;