Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(component): restrict actions and header from modals #209

Merged
merged 9 commits into from
Oct 8, 2019
Merged

feat(component): restrict actions and header from modals #209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d7ef9b2
feat(component): restrict actions and header from modals
jorgemoya Oct 7, 2019
62c7741
fix: type check header prop
jorgemoya Oct 7, 2019
14174b4
Update packages/docs/PropTables/ModalPropTable.tsx
jorgemoya Oct 7, 2019
c2a1d15
feat: remove borders
jorgemoya Oct 7, 2019
6d872f6
feat: actions are now an array of objects with button props
jorgemoya Oct 7, 2019
5d8f174
fix: tslint errors
jorgemoya Oct 7, 2019
56ef3a7
fix: pr feedback
jorgemoya Oct 7, 2019
540c594
fix: add additional tests
jorgemoya Oct 8, 2019
b8bd582
fix: missing test
jorgemoya Oct 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 39 additions & 42 deletions packages/big-design/src/components/Modal/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import React from 'react';
import { createPortal } from 'react-dom';

import { uniqueId } from '../../utils';
import { Button } from '../Button';
import { H2, HeadingProps } from '../Typography';
import { Button, ButtonProps } from '../Button';
import { H2 } from '../Typography';

import {
StyledModal,
Expand All @@ -16,10 +16,12 @@ import {
} from './styled';

export interface ModalProps {
actions?: ModalAction[];
backdrop: boolean;
isOpen: boolean;
closeOnClickOutside: boolean;
closeOnEscKey: boolean;
header?: string;
isOpen: boolean;
variant: 'modal' | 'dialog';
onClose(): void;
}
Expand All @@ -29,42 +31,20 @@ interface ModalState {
modalContainer: HTMLDivElement | null;
}

export interface ModalActionsProps {
withBorder?: boolean;
}

export interface ModalHeaderProps {
withBorder?: boolean;
export interface ModalAction extends Omit<ButtonProps, 'children'> {
text?: string;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be required?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking we could have only icon buttons

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, can't think of it being a good use case but let's leave it for now. Good catch.

}

const ModalActions: React.FC<ModalActionsProps> = ({ children, withBorder }) => (
<StyledModalActions justifyContent="flex-end" withBorder={withBorder}>
{children}
</StyledModalActions>
);

const ModalHeader: React.FC<ModalHeaderProps> = ({ children, withBorder }) => {
return (
<StyledModalHeader withBorder={withBorder}>
{typeof children === 'string' ? <H2 margin="none">{children}</H2> : children}
</StyledModalHeader>
);
};

export class Modal extends React.PureComponent<ModalProps, ModalState> {
static defaultProps: Partial<ModalProps> = {
backdrop: true,
isOpen: false,
closeOnClickOutside: false,
closeOnEscKey: true,
isOpen: false,
onClose: () => null,
variant: 'modal',
};

static Actions = ModalActions;
static Body = StyledModalBody;
static Header = ModalHeader;

readonly state: ModalState = {
initialBodyOverflowY: '',
modalContainer: null,
Expand Down Expand Up @@ -103,20 +83,22 @@ export class Modal extends React.PureComponent<ModalProps, ModalState> {
}

render() {
const { backdrop, isOpen, variant } = this.props;
const { backdrop, children, isOpen, variant } = this.props;
const { modalContainer } = this.state;

const modalContent = (
<StyledModal
onKeyDown={this.onKeyDown}
backdrop={backdrop}
onClick={this.onClickAway}
onKeyDown={this.onKeyDown}
ref={this.modalRef}
backdrop={backdrop}
variant={variant}
>
<StyledModalContent variant={variant} aria-labelledby={this.headerUniqueId} flexDirection="column">
{this.renderClose()}
{this.renderChildren()}
{this.renderHeader()}
<StyledModalBody>{children}</StyledModalBody>
{this.renderActions()}
</StyledModalContent>
</StyledModal>
);
Expand All @@ -136,18 +118,33 @@ export class Modal extends React.PureComponent<ModalProps, ModalState> {
);
}

private renderChildren() {
const { children } = this.props;
private renderHeader() {
const { header } = this.props;

return (
header &&
typeof header === 'string' && (
<StyledModalHeader id={this.headerUniqueId}>
<H2 margin="none">{header}</H2>
jorgemoya marked this conversation as resolved.
Show resolved Hide resolved
</StyledModalHeader>
)
);
}

return React.Children.map(children, child => {
if (React.isValidElement(child) && child.type === Modal.Header) {
return React.cloneElement(child as React.ReactElement<HeadingProps>, {
id: this.headerUniqueId,
});
}
private renderActions() {
const { actions } = this.props;

return child;
});
return (
Array.isArray(actions) && (
jorgemoya marked this conversation as resolved.
Show resolved Hide resolved
<StyledModalActions justifyContent="flex-end">
{actions.map(({ text, ...props }, index) => (
<Button key={index} {...props}>
{text}
</Button>
))}
</StyledModalActions>
)
);
}

private autoFocus = () => {
Expand Down
Loading