Added logging, changed some directory structure

This commit is contained in:
2018-01-13 21:33:40 -05:00
parent f079a5f067
commit 8e72ffb917
73656 changed files with 35284 additions and 53718 deletions

View File

@@ -0,0 +1,17 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface BackdropProps extends StandardProps<{}, BackdropClassKey> {
invisible?: boolean;
onClick?: React.ReactEventHandler<{}>;
[prop: string]: any;
}
export type BackdropClassKey =
| 'root'
| 'invisible'
;
declare const Backdrop: React.ComponentType<BackdropProps>;
export default Backdrop;

View File

@@ -0,0 +1,52 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import React from 'react';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
export const styles = theme => ({
root: {
zIndex: -1,
width: '100%',
height: '100%',
position: 'fixed',
top: 0,
left: 0,
// Remove grey highlight
WebkitTapHighlightColor: theme.palette.common.transparent,
backgroundColor: theme.palette.common.lightBlack,
transition: theme.transitions.create('opacity'),
willChange: 'opacity',
opacity: 0
},
invisible: {
backgroundColor: theme.palette.common.transparent
}
});
/**
* @ignore - internal component.
*/
function Backdrop(props) {
const { children, classes, className, invisible } = props,
other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'invisible']);
const backdropClass = classNames(classes.root, {
[classes.invisible]: invisible
}, className);
return React.createElement(
'div',
_extends({ 'data-mui-test': 'Backdrop', className: backdropClass, 'aria-hidden': 'true' }, other),
children
);
}
Backdrop.defaultProps = {
invisible: false
};
export default withStyles(styles, { name: 'MuiBackdrop' })(Backdrop);

View File

@@ -0,0 +1,32 @@
import * as React from 'react';
import { StandardProps } from '..';
import { BackdropProps } from './Backdrop';
import { TransitionDuration, TransitionHandlers } from './transition';
export interface ModalProps extends StandardProps<
React.HtmlHTMLAttributes<HTMLDivElement> & Partial<TransitionHandlers>,
ModalClassKey
> {
BackdropClassName?: string;
BackdropComponent?: string | React.ComponentType<BackdropProps>;
BackdropInvisible?: boolean;
BackdropTransitionDuration?: TransitionDuration;
keepMounted?: boolean;
disableBackdrop?: boolean;
ignoreBackdropClick?: boolean;
ignoreEscapeKeyUp?: boolean;
modalManager?: Object;
onBackdropClick?: React.ReactEventHandler<{}>;
onEscapeKeyUp?: React.ReactEventHandler<{}>;
onRequestClose?: React.ReactEventHandler<{}>;
show?: boolean;
}
export type ModalClassKey =
| 'root'
| 'hidden'
;
declare const Modal: React.ComponentType<ModalProps>;
export default Modal;

View File

@@ -0,0 +1,332 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import warning from 'warning';
import keycode from 'keycode';
import canUseDom from 'dom-helpers/util/inDOM';
import contains from 'dom-helpers/query/contains';
import activeElement from 'dom-helpers/activeElement';
import ownerDocument from 'dom-helpers/ownerDocument';
import addEventListener from '../utils/addEventListener';
import { createChainedFunction } from '../utils/helpers';
import Fade from '../transitions/Fade';
import withStyles from '../styles/withStyles';
import createModalManager from './modalManager';
import Backdrop from './Backdrop';
import Portal from './Portal';
// Modals don't open on the server so this won't break concurrency.
// Could also put this on context.
const modalManager = createModalManager();
export const styles = theme => ({
root: {
display: 'flex',
width: '100%',
height: '100%',
position: 'fixed',
zIndex: theme.zIndex.dialog,
top: 0,
left: 0
},
hidden: {
visibility: 'hidden'
}
});
/**
* @ignore - internal component.
*/
class Modal extends React.Component {
constructor(...args) {
var _temp;
return _temp = super(...args), _initialiseProps.call(this), _temp;
}
componentWillMount() {
if (!this.props.show) {
this.setState({ exited: true });
}
}
componentDidMount() {
this.mounted = true;
if (this.props.show) {
this.handleShow();
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.show && this.state.exited) {
this.setState({ exited: false });
}
}
componentWillUpdate(nextProps) {
if (!this.props.show && nextProps.show) {
this.checkForFocus();
}
}
componentDidUpdate(prevProps) {
if (!prevProps.show && this.props.show) {
this.handleShow();
}
// We are waiting for the onExited callback to call handleHide.
}
componentWillUnmount() {
if (this.props.show || !this.state.exited) {
this.handleHide();
}
this.mounted = false;
}
checkForFocus() {
if (canUseDom) {
this.lastFocus = activeElement();
}
}
restoreLastFocus() {
if (this.lastFocus && this.lastFocus.focus) {
this.lastFocus.focus();
this.lastFocus = undefined;
}
}
handleShow() {
const doc = ownerDocument(ReactDOM.findDOMNode(this));
this.props.modalManager.add(this);
this.onDocumentKeyUpListener = addEventListener(doc, 'keyup', this.handleDocumentKeyUp);
this.onFocusListener = addEventListener(doc, 'focus', this.handleFocusListener, true);
this.focus();
}
focus() {
const currentFocus = activeElement(ownerDocument(ReactDOM.findDOMNode(this)));
const modalContent = this.modal && this.modal.lastChild;
const focusInModal = currentFocus && contains(modalContent, currentFocus);
if (modalContent && !focusInModal) {
if (!modalContent.hasAttribute('tabIndex')) {
modalContent.setAttribute('tabIndex', -1);
warning(false, 'Material-UI: the modal content node does not accept focus. ' + 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".');
}
modalContent.focus();
}
}
handleHide() {
this.props.modalManager.remove(this);
if (this.onDocumentKeyUpListener) this.onDocumentKeyUpListener.remove();
if (this.onFocusListener) this.onFocusListener.remove();
this.restoreLastFocus();
}
renderBackdrop(other = {}) {
const {
BackdropComponent,
BackdropClassName,
BackdropTransitionDuration,
BackdropInvisible,
show
} = this.props;
return React.createElement(
Fade,
_extends({ appear: true, 'in': show, timeout: BackdropTransitionDuration }, other),
React.createElement(BackdropComponent, {
invisible: BackdropInvisible,
className: BackdropClassName,
onClick: this.handleBackdropClick
})
);
}
render() {
const _props = this.props,
{
disableBackdrop,
BackdropComponent,
BackdropClassName,
BackdropTransitionDuration,
BackdropInvisible,
ignoreBackdropClick,
ignoreEscapeKeyUp,
children,
classes,
className,
keepMounted,
modalManager: modalManagerProp,
onBackdropClick,
onEscapeKeyUp,
onRequestClose,
onEnter,
onEntering,
onEntered,
onExit,
onExiting,
onExited,
show
} = _props,
other = _objectWithoutProperties(_props, ['disableBackdrop', 'BackdropComponent', 'BackdropClassName', 'BackdropTransitionDuration', 'BackdropInvisible', 'ignoreBackdropClick', 'ignoreEscapeKeyUp', 'children', 'classes', 'className', 'keepMounted', 'modalManager', 'onBackdropClick', 'onEscapeKeyUp', 'onRequestClose', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'show']);
if (!keepMounted && !show && this.state.exited) {
return null;
}
const transitionCallbacks = {
onEnter,
onEntering,
onEntered,
onExit,
onExiting,
onExited: this.handleTransitionExited
};
let modalChild = React.Children.only(children);
const { role, tabIndex } = modalChild.props;
const childProps = {};
if (role === undefined) {
childProps.role = role === undefined ? 'document' : role;
}
if (tabIndex === undefined) {
childProps.tabIndex = tabIndex == null ? -1 : tabIndex;
}
let backdropProps;
// It's a Transition like component
if (modalChild.props.hasOwnProperty('in')) {
Object.keys(transitionCallbacks).forEach(key => {
childProps[key] = createChainedFunction(transitionCallbacks[key], modalChild.props[key]);
});
} else {
backdropProps = transitionCallbacks;
}
if (Object.keys(childProps).length) {
modalChild = React.cloneElement(modalChild, childProps);
}
return React.createElement(
Portal,
{
open: true,
ref: node => {
this.mountNode = node ? node.getLayer() : null;
}
},
React.createElement(
'div',
_extends({
'data-mui-test': 'Modal',
className: classNames(classes.root, className, {
[classes.hidden]: this.state.exited
})
}, other, {
ref: node => {
this.modal = node;
}
}),
!disableBackdrop && (!keepMounted || show || !this.state.exited) && this.renderBackdrop(backdropProps),
modalChild
)
);
}
}
Modal.defaultProps = {
BackdropComponent: Backdrop,
BackdropTransitionDuration: 300,
BackdropInvisible: false,
keepMounted: false,
disableBackdrop: false,
ignoreBackdropClick: false,
ignoreEscapeKeyUp: false,
modalManager,
show: false
};
var _initialiseProps = function () {
this.state = {
exited: false
};
this.onDocumentKeyUpListener = null;
this.onFocusListener = null;
this.mounted = false;
this.lastFocus = undefined;
this.modal = null;
this.mountNode = null;
this.handleFocusListener = () => {
if (!this.mounted || !this.props.modalManager.isTopModal(this)) {
return;
}
const currentFocus = activeElement(ownerDocument(ReactDOM.findDOMNode(this)));
const modalContent = this.modal && this.modal.lastChild;
if (modalContent && modalContent !== currentFocus && !contains(modalContent, currentFocus)) {
modalContent.focus();
}
};
this.handleDocumentKeyUp = event => {
if (!this.mounted || !this.props.modalManager.isTopModal(this)) {
return;
}
if (keycode(event) !== 'esc') {
return;
}
const { onEscapeKeyUp, onRequestClose, ignoreEscapeKeyUp } = this.props;
if (onEscapeKeyUp) {
onEscapeKeyUp(event);
}
if (onRequestClose && !ignoreEscapeKeyUp) {
onRequestClose(event);
}
};
this.handleBackdropClick = event => {
if (event.target !== event.currentTarget) {
return;
}
const { onBackdropClick, onRequestClose, ignoreBackdropClick } = this.props;
if (onBackdropClick) {
onBackdropClick(event);
}
if (onRequestClose && !ignoreBackdropClick) {
onRequestClose(event);
}
};
this.handleTransitionExited = (...args) => {
if (this.props.onExited) {
this.props.onExited(...args);
}
this.setState({ exited: true });
this.handleHide();
};
};
export default withStyles(styles, { flip: false, name: 'MuiModal' })(Modal);

View File

@@ -0,0 +1,7 @@
import * as React from 'react';
export interface PortalProps {
open?: boolean;
}
export default class Portal extends React.Component<PortalProps> {}

View File

@@ -0,0 +1,101 @@
import React from 'react';
import ReactDOM from 'react-dom';
import canUseDom from 'dom-helpers/util/inDOM';
/**
* @ignore - internal component.
*/
class Portal extends React.Component {
constructor(...args) {
var _temp;
return _temp = super(...args), this.layer = null, _temp;
}
componentDidMount() {
// Support react@15.x, will be removed at some point
if (!ReactDOM.createPortal) {
this.renderLayer();
}
}
componentDidUpdate() {
// Support react@15.x, will be removed at some point
if (!ReactDOM.createPortal) {
this.renderLayer();
}
}
componentWillUnmount() {
this.unrenderLayer();
}
getLayer() {
if (!this.layer) {
this.layer = document.createElement('div');
this.layer.setAttribute('data-mui-portal', 'true');
if (document.body && this.layer) {
document.body.appendChild(this.layer);
}
}
return this.layer;
}
unrenderLayer() {
if (!this.layer) {
return;
}
// Support react@15.x, will be removed at some point
if (!ReactDOM.createPortal) {
ReactDOM.unmountComponentAtNode(this.layer);
}
if (document.body) {
document.body.removeChild(this.layer);
}
this.layer = null;
}
renderLayer() {
const { children, open } = this.props;
if (open) {
// By calling this method in componentDidMount() and
// componentDidUpdate(), you're effectively creating a "wormhole" that
// funnels React's hierarchical updates through to a DOM node on an
// entirely different part of the page.
const layerElement = React.Children.only(children);
ReactDOM.unstable_renderSubtreeIntoContainer(this, layerElement, this.getLayer());
} else {
this.unrenderLayer();
}
}
render() {
const { children, open } = this.props;
// Support react@15.x, will be removed at some point
if (!ReactDOM.createPortal) {
return null;
}
// Can't be rendered server-side.
if (canUseDom) {
if (open) {
return ReactDOM.createPortal(children, this.getLayer());
}
this.unrenderLayer();
}
return null;
}
}
Portal.defaultProps = {
open: false
};
export default Portal;

View File

@@ -0,0 +1,46 @@
import * as React from 'react';
import { StandardProps } from '..';
import { IconButtonProps } from '../IconButton';
export interface SwitchBaseProps extends StandardProps<
IconButtonProps,
SwitchBaseClassKey,
'onChange'
> {
checked?: boolean | string;
checkedClassName?: string;
checkedIcon?: React.ReactNode;
defaultChecked?: boolean;
disabled?: boolean;
disabledClassName?: string;
disableRipple?: boolean;
icon?: React.ReactNode;
indeterminate?: boolean;
indeterminateIcon?: React.ReactNode;
inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
inputRef?: React.Ref<any>;
name?: string;
onChange?: (event: React.ChangeEvent<{}>, checked: boolean) => void;
tabIndex?: number;
value?: string;
}
export type SwitchBaseClassKey =
| 'root'
| 'default'
| 'checked'
| 'disabled'
| 'input'
;
export type SwitchBase = React.Component<SwitchBaseProps>
export interface CreateSwitchBaseOptions {
defaultIcon?: React.ReactNode;
defaultCheckedIcon?: React.ReactNode;
inputType?: string;
}
export default function createSwitch(
options: CreateSwitchBaseOptions
): SwitchBase;

View File

@@ -0,0 +1,168 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import IconButton from '../IconButton';
import CheckBoxOutlineBlankIcon from '../svg-icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '../svg-icons/CheckBox';
import Icon from '../Icon';
export const styles = {
root: {
display: 'inline-flex',
alignItems: 'center',
transition: 'none'
},
input: {
cursor: 'inherit',
position: 'absolute',
opacity: 0,
width: '100%',
height: '100%',
top: 0,
left: 0,
margin: 0,
padding: 0
},
default: {},
checked: {},
disabled: {}
};
// NB: If changed, please update Checkbox, Switch and Radio
// so that the API documentation is updated.
export default function createSwitch({
defaultIcon = React.createElement(CheckBoxOutlineBlankIcon, null),
defaultCheckedIcon = React.createElement(CheckBoxIcon, null),
inputType = 'checkbox'
} = {}) {
/**
* @ignore - internal component.
*/
class SwitchBase extends React.Component {
constructor(...args) {
var _temp;
return _temp = super(...args), this.state = {}, this.input = null, this.button = null, this.isControlled = null, this.handleInputChange = event => {
const checked = event.target.checked;
if (!this.isControlled) {
this.setState({ checked });
}
if (this.props.onChange) {
this.props.onChange(event, checked);
}
}, _temp;
}
componentWillMount() {
const { props } = this;
this.isControlled = props.checked !== undefined;
if (!this.isControlled) {
// not controlled, use internal state
this.setState({
checked: props.defaultChecked !== undefined ? props.defaultChecked : false
});
}
}
render() {
const _props = this.props,
{
checked: checkedProp,
classes,
className: classNameProp,
checkedClassName,
checkedIcon,
disabled: disabledProp,
disabledClassName,
icon: iconProp,
inputProps,
inputRef,
name,
onChange,
tabIndex,
value
} = _props,
other = _objectWithoutProperties(_props, ['checked', 'classes', 'className', 'checkedClassName', 'checkedIcon', 'disabled', 'disabledClassName', 'icon', 'inputProps', 'inputRef', 'name', 'onChange', 'tabIndex', 'value']);
const { muiFormControl } = this.context;
let disabled = disabledProp;
if (muiFormControl) {
if (typeof disabled === 'undefined') {
disabled = muiFormControl.disabled;
}
}
const checked = this.isControlled ? checkedProp : this.state.checked;
const className = classNames(classes.root, classes.default, classNameProp, {
[classNames(classes.checked, checkedClassName)]: checked,
[classNames(classes.disabled, disabledClassName)]: disabled
});
let icon = checked ? checkedIcon : iconProp;
if (typeof icon === 'string') {
icon = React.createElement(
Icon,
null,
icon
);
}
return React.createElement(
IconButton,
_extends({
'data-mui-test': 'SwitchBase',
component: 'span',
className: className,
disabled: disabled,
tabIndex: null,
role: undefined,
rootRef: node => {
this.button = node;
}
}, other),
icon,
React.createElement('input', _extends({
type: inputType,
name: name,
checked: this.isControlled ? checkedProp : undefined,
onChange: this.handleInputChange,
className: classes.input,
disabled: disabled,
tabIndex: tabIndex,
value: value
}, inputProps, {
ref: node => {
this.input = node;
if (inputRef) {
inputRef(node);
}
}
}))
);
}
}
SwitchBase.defaultProps = {
checkedIcon: defaultCheckedIcon,
disableRipple: false,
icon: defaultIcon
};
SwitchBase.contextTypes = {
muiFormControl: PropTypes.object
};
return withStyles(styles, { name: 'MuiSwitchBase' })(SwitchBase);
}

View File

View File

@@ -0,0 +1,127 @@
// Taken from https://github.com/react-bootstrap/react-overlays/blob/master/src/ModalManager.js
import warning from 'warning';
import isWindow from 'dom-helpers/query/isWindow';
import ownerDocument from 'dom-helpers/ownerDocument';
import canUseDom from 'dom-helpers/util/inDOM';
import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
import { hideSiblings, showSiblings, ariaHidden } from '../utils/manageAriaHidden';
function getPaddingRight(node) {
return parseInt(node.style.paddingRight || 0, 10);
}
// Do we have a scroll bar?
function bodyIsOverflowing(node) {
const doc = ownerDocument(node);
const win = isWindow(doc);
// Takes in account potential non zero margin on the body.
const style = window.getComputedStyle(doc.body);
const marginLeft = parseInt(style.getPropertyValue('margin-left'), 10);
const marginRight = parseInt(style.getPropertyValue('margin-right'), 10);
return marginLeft + doc.body.clientWidth + marginRight < win.innerWidth;
}
// The container shouldn't be used on the server.
const defaultContainer = canUseDom ? window.document.body : {};
/**
* State management helper for modals/layers.
* Simplified, but inspired by react-overlay's ModalManager class
*
* @internal Used by the Modal to ensure proper focus management.
*/
function createModalManager({ container = defaultContainer, hideSiblingNodes = true } = {}) {
warning(container !== null, `
Material-UI: you are most likely evaluating the code before the
browser has a chance to reach the <body>.
Please move the import at the end of the <body>.
`);
const modals = [];
let prevOverflow;
let prevPaddings = [];
function add(modal) {
let modalIdx = modals.indexOf(modal);
if (modalIdx !== -1) {
return modalIdx;
}
modalIdx = modals.length;
modals.push(modal);
if (hideSiblingNodes) {
hideSiblings(container, modal.mountNode);
}
if (modals.length === 1) {
// Save our current overflow so we can revert
// back to it when all modals are closed!
prevOverflow = container.style.overflow;
if (bodyIsOverflowing(container)) {
prevPaddings = [getPaddingRight(container)];
const scrollbarSize = getScrollbarSize();
container.style.paddingRight = `${prevPaddings[0] + scrollbarSize}px`;
const fixedNodes = document.querySelectorAll('.mui-fixed');
for (let i = 0; i < fixedNodes.length; i += 1) {
const paddingRight = getPaddingRight(fixedNodes[i]);
prevPaddings.push(paddingRight);
fixedNodes[i].style.paddingRight = `${paddingRight + scrollbarSize}px`;
}
}
container.style.overflow = 'hidden';
}
return modalIdx;
}
function remove(modal) {
const modalIdx = modals.indexOf(modal);
if (modalIdx === -1) {
return modalIdx;
}
modals.splice(modalIdx, 1);
if (modals.length === 0) {
container.style.overflow = prevOverflow;
container.style.paddingRight = prevPaddings[0];
const fixedNodes = document.querySelectorAll('.mui-fixed');
for (let i = 0; i < fixedNodes.length; i += 1) {
fixedNodes[i].style.paddingRight = `${prevPaddings[i + 1]}px`;
}
prevOverflow = undefined;
prevPaddings = [];
if (hideSiblingNodes) {
showSiblings(container, modal.mountNode);
}
} else if (hideSiblingNodes) {
// otherwise make sure the next top modal is visible to a SR
ariaHidden(false, modals[modals.length - 1].mountNode);
}
return modalIdx;
}
function isTopModal(modal) {
return !!modals.length && modals[modals.length - 1] === modal;
}
const modalManager = { add, remove, isTopModal };
return modalManager;
}
export default createModalManager;

View File

@@ -0,0 +1,21 @@
import * as React from 'react';
export type TransitionDuration = number | { enter: number, exit: number };
export type TransitionCallback = (element: HTMLElement) => void;
export type TransitionHandlers = {
onEnter: TransitionCallback;
onEntering: TransitionCallback;
onEntered: TransitionCallback;
onExit: TransitionCallback;
onExiting: TransitionCallback;
onExited: TransitionCallback;
};
export interface TransitionProps extends Partial<TransitionHandlers> {
children: React.ReactElement<any>;
className?: string;
in: boolean;
appear?: boolean;
unmountOnExit?: boolean;
}

View File