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

Add tab index to close icon #48

Merged
merged 8 commits into from
Apr 11, 2018
Merged

Add tab index to close icon #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f36c9de
Add tab index to SVG
peterlazzarino Feb 22, 2018
583c42e
remove modification to package file for testing
peterlazzarino Feb 22, 2018
7252ce7
Move close icon
Feb 23, 2018
a059f41
add a button that wrap the icon with closeButton class
pradel Apr 11, 2018
123eaa5
prettier README
pradel Apr 11, 2018
cd9bce2
separate CloseIcon
pradel Apr 11, 2018
d4b6940
Fix css version
pradel Apr 11, 2018
7cfb35a
fix lint
pradel Apr 11, 2018
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
28 changes: 14 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,20 +80,20 @@ import Modal from 'react-responsive-modal/lib/css';

## Props

| Property | Type | Default | Description |
| ------------------- | :------: | :-----: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **open\*** | Boolean | | Control if the modal is open or not. |
| **onClose\*** | Function | | Fired when the Modal is requested to be closed by a click on the overlay or when user press esc key. |
| children | Node | | The content of the modal. |
| closeOnEsc | Boolean | true | Is the modal closable when user press esc key. |
| closeOnOverlayClick | Boolean | true | Is the modal closable when user click on overlay. |
| little | Boolean | false | Is the dialog centered (**when you don't have a lot of content**). |
| showCloseIcon | Boolean | true | Show the close icon. |
| closeIconSize | Number | 28 | Close icon size. |
| closeIconSvgPath | Node | | A valid svg path to show as icon. |
| classNames | Object | {} | An object containing classNames to style the modal, can have properties 'overlay' (classname for overlay div), 'modal' (classname for modal content div), 'closeIcon' (classname for close icon svg). You can customize the transition with 'transitionEnter', 'transitionEnterActive', 'transitionExit', 'transitionExitActive' |
| styles | Object | {} | An object containing the styles objects to style the modal, can have properties 'overlay', 'modal', 'closeIcon'. |
| animationDuration | Number | 500 | Animation duration in milliseconds. |
| Property | Type | Default | Description |
| ------------------- | :------: | :-----: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **open\*** | Boolean | | Control if the modal is open or not. |
| **onClose\*** | Function | | Fired when the Modal is requested to be closed by a click on the overlay or when user press esc key. |
| children | Node | | The content of the modal. |
| closeOnEsc | Boolean | true | Is the modal closable when user press esc key. |
| closeOnOverlayClick | Boolean | true | Is the modal closable when user click on overlay. |
| little | Boolean | false | Is the dialog centered (**when you don't have a lot of content**). |
| showCloseIcon | Boolean | true | Show the close icon. |
| closeIconSize | Number | 28 | Close icon size. |
| closeIconSvgPath | Node | | A valid svg path to show as icon. |
| classNames | Object | {} | An object containing classNames to style the modal, can have properties 'overlay' (classname for overlay div), 'modal' (classname for modal content div), 'closeButton' (classname for the button that contain the close icon), 'closeIcon' (classname for close icon svg). You can customize the transition with 'transitionEnter', 'transitionEnterActive', 'transitionExit', 'transitionExitActive' |
| styles | Object | {} | An object containing the styles objects to style the modal, can have properties 'overlay', 'modal', 'closeButton', 'closeIcon'. |
| animationDuration | Number | 500 | Animation duration in milliseconds. |

## License

Expand Down
40 changes: 40 additions & 0 deletions src/close-icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';

const CloseIcon = ({
classes,
classNames,
styles,
closeIconSize,
closeIconSvgPath,
onClickCloseIcon,
}) => (
<button
className={cx(classes.closeButton, classNames.closeButton)}
style={styles.closeButton}
onClick={onClickCloseIcon}
>
<svg
className={cx(classes.closeIcon, classNames.closeIcon)}
style={styles.closeIcon}
xmlns="http://www.w3.org/2000/svg"
width={closeIconSize}
height={closeIconSize}
viewBox="0 0 36 36"
>
{closeIconSvgPath}
</svg>
</button>
);

CloseIcon.propTypes = {
classNames: PropTypes.object.isRequired,
styles: PropTypes.object.isRequired,
classes: PropTypes.object.isRequired,
closeIconSize: PropTypes.number.isRequired,
closeIconSvgPath: PropTypes.node.isRequired,
onClickCloseIcon: PropTypes.func.isRequired,
};

export default CloseIcon;
1 change: 1 addition & 0 deletions src/css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export default function ReactResponsiveModalCss({ ...props }) {
overlay: 'react-responsive-modal-overlay',
overlayLittle: 'react-responsive-modal-overlay-little',
modal: 'react-responsive-modal-modal',
closeButton: 'react-responsive-modal-close-button',
closeIcon: 'react-responsive-modal-close-icon',
transitionEnter: 'react-responsive-modal-transition-enter',
transitionEnterActive: 'react-responsive-modal-transition-enter-active',
Expand Down
35 changes: 18 additions & 17 deletions src/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Portal from 'react-minimalist-portal';
import CSSTransition from 'react-transition-group/CSSTransition';
import cx from 'classnames';
import noScroll from 'no-scroll';
import CloseIcon from './close-icon';

class Modal extends Component {
constructor(props) {
Expand Down Expand Up @@ -52,19 +53,22 @@ class Modal extends Component {
return;
}
const className = e.target.className.split(' ');
if (className.indexOf(classes.overlay) !== -1 && !this.isScrollBarClick(e)) {
if (
className.indexOf(classes.overlay) !== -1 &&
!this.isScrollBarClick(e)
) {
e.stopPropagation();
this.props.onClose();
}
};

onClickCloseIcon = e => {
isScrollBarClick = e => e.clientX >= document.documentElement.offsetWidth;

handleClickCloseIcon = e => {
e.stopPropagation();
this.props.onClose();
};

isScrollBarClick = e => e.clientX >= document.documentElement.offsetWidth;

handleKeydown = e => {
if (e.keyCode === 27) {
this.props.onClose();
Expand Down Expand Up @@ -136,20 +140,17 @@ class Modal extends Component {
className={cx(classes.modal, classNames.modal)}
style={styles.modal}
>
{showCloseIcon ? (
<svg
className={cx(classes.closeIcon, classNames.closeIcon)}
style={styles.closeIcon}
onClick={this.onClickCloseIcon}
xmlns="http://www.w3.org/2000/svg"
width={closeIconSize}
height={closeIconSize}
viewBox="0 0 36 36"
>
{closeIconSvgPath}
</svg>
) : null}
{this.props.children}
{showCloseIcon && (
<CloseIcon
classes={classes}
classNames={classNames}
styles={styles}
closeIconSize={closeIconSize}
closeIconSvgPath={closeIconSvgPath}
onClickCloseIcon={this.handleClickCloseIcon}
/>
)}
</div>
</div>
</CSSTransition>
Expand Down
8 changes: 6 additions & 2 deletions src/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,16 @@ export default {
backgroundClip: 'padding-box',
boxShadow: '0 12px 15px 0 rgba(0,0,0,0.25)',
},
closeIcon: {
closeButton: {
position: 'absolute',
top: '14px',
right: '14px',
cursor: 'pointer',
border: 'none',
padding: 0,
backgroundColor: 'transparent',
display: 'flex',
},
closeIcon: {},
transitionEnter: {
opacity: '0.01',
},
Expand Down