0.2.0 - Mid migration

This commit is contained in:
Daniel Mason 2022-04-25 14:47:15 +12:00
parent 139e6a915e
commit 7e38fdbd7d
42393 changed files with 5358157 additions and 62 deletions

View file

@ -0,0 +1,210 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import { isFragment } from 'react-is';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { chainPropTypes } from '@material-ui/utils';
import Collapse from '../Collapse';
import Paper from '../Paper';
import withStyles from '../styles/withStyles';
import AccordionContext from './AccordionContext';
import useControlled from '../utils/useControlled';
export const styles = theme => {
const transition = {
duration: theme.transitions.duration.shortest
};
return {
/* Styles applied to the root element. */
root: {
position: 'relative',
transition: theme.transitions.create(['margin'], transition),
'&:before': {
position: 'absolute',
left: 0,
top: -1,
right: 0,
height: 1,
content: '""',
opacity: 1,
backgroundColor: theme.palette.divider,
transition: theme.transitions.create(['opacity', 'background-color'], transition)
},
'&:first-child': {
'&:before': {
display: 'none'
}
},
'&$expanded': {
margin: '16px 0',
'&:first-child': {
marginTop: 0
},
'&:last-child': {
marginBottom: 0
},
'&:before': {
opacity: 0
}
},
'&$expanded + &': {
'&:before': {
display: 'none'
}
},
'&$disabled': {
backgroundColor: theme.palette.action.disabledBackground
}
},
/* Styles applied to the root element if `square={false}`. */
rounded: {
borderRadius: 0,
'&:first-child': {
borderTopLeftRadius: theme.shape.borderRadius,
borderTopRightRadius: theme.shape.borderRadius
},
'&:last-child': {
borderBottomLeftRadius: theme.shape.borderRadius,
borderBottomRightRadius: theme.shape.borderRadius,
// Fix a rendering issue on Edge
'@supports (-ms-ime-align: auto)': {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
}
}
},
/* Styles applied to the root element if `expanded={true}`. */
expanded: {},
/* Styles applied to the root element if `disabled={true}`. */
disabled: {}
};
};
const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(props, ref) {
const {
children: childrenProp,
classes,
className,
defaultExpanded = false,
disabled = false,
expanded: expandedProp,
onChange,
square = false,
TransitionComponent = Collapse,
TransitionProps
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "defaultExpanded", "disabled", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"]);
const [expanded, setExpandedState] = useControlled({
controlled: expandedProp,
default: defaultExpanded,
name: 'Accordion',
state: 'expanded'
});
const handleChange = React.useCallback(event => {
setExpandedState(!expanded);
if (onChange) {
onChange(event, !expanded);
}
}, [expanded, onChange, setExpandedState]);
const [summary, ...children] = React.Children.toArray(childrenProp);
const contextValue = React.useMemo(() => ({
expanded,
disabled,
toggle: handleChange
}), [expanded, disabled, handleChange]);
return /*#__PURE__*/React.createElement(Paper, _extends({
className: clsx(classes.root, className, expanded && classes.expanded, disabled && classes.disabled, !square && classes.rounded),
ref: ref,
square: square
}, other), /*#__PURE__*/React.createElement(AccordionContext.Provider, {
value: contextValue
}, summary), /*#__PURE__*/React.createElement(TransitionComponent, _extends({
in: expanded,
timeout: "auto"
}, TransitionProps), /*#__PURE__*/React.createElement("div", {
"aria-labelledby": summary.props.id,
id: summary.props['aria-controls'],
role: "region"
}, children)));
});
process.env.NODE_ENV !== "production" ? Accordion.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the accordion.
*/
children: chainPropTypes(PropTypes.node.isRequired, props => {
const summary = React.Children.toArray(props.children)[0];
if (isFragment(summary)) {
return new Error("Material-UI: The Accordion doesn't accept a Fragment as a child. " + 'Consider providing an array instead.');
}
if (! /*#__PURE__*/React.isValidElement(summary)) {
return new Error('Material-UI: Expected the first child of Accordion to be a valid element.');
}
return null;
}),
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, expands the accordion by default.
*/
defaultExpanded: PropTypes.bool,
/**
* If `true`, the accordion will be displayed in a disabled state.
*/
disabled: PropTypes.bool,
/**
* If `true`, expands the accordion, otherwise collapse it.
* Setting this prop enables control over the accordion.
*/
expanded: PropTypes.bool,
/**
* Callback fired when the expand/collapse state is changed.
*
* @param {object} event The event source of the callback.
* @param {boolean} expanded The `expanded` state of the accordion.
*/
onChange: PropTypes.func,
/**
* If `true`, rounded corners are disabled.
*/
square: PropTypes.bool,
/**
* The component used for the collapse effect.
* [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
*/
TransitionComponent: PropTypes.elementType,
/**
* Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.
*/
TransitionProps: PropTypes.object
} : void 0;
export default withStyles(styles, {
name: 'MuiAccordion'
})(Accordion);

View file

@ -0,0 +1,13 @@
import * as React from 'react';
/**
* @ignore - internal component.
* @type {React.Context<{} | {expanded: boolean, disabled: boolean, toggle: () => void}>}
*/
const AccordionContext = React.createContext({});
if (process.env.NODE_ENV !== 'production') {
AccordionContext.displayName = 'AccordionContext';
}
export default AccordionContext;

View file

@ -0,0 +1 @@
export { default } from './Accordion';

View file

@ -0,0 +1,65 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
export const styles = {
/* Styles applied to the root element. */
root: {
display: 'flex',
alignItems: 'center',
padding: 8,
justifyContent: 'flex-end'
},
/* Styles applied to the root element if `disableSpacing={false}`. */
spacing: {
'& > :not(:first-child)': {
marginLeft: 8
}
}
};
const AccordionActions = /*#__PURE__*/React.forwardRef(function AccordionActions(props, ref) {
const {
classes,
className,
disableSpacing = false
} = props,
other = _objectWithoutPropertiesLoose(props, ["classes", "className", "disableSpacing"]);
return /*#__PURE__*/React.createElement("div", _extends({
className: clsx(classes.root, className, !disableSpacing && classes.spacing),
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? AccordionActions.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the actions do not have additional margin.
*/
disableSpacing: PropTypes.bool
} : void 0;
export default withStyles(styles, {
name: 'MuiAccordionActions'
})(AccordionActions);

View file

@ -0,0 +1 @@
export { default } from './AccordionActions';

View file

@ -0,0 +1,50 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
display: 'flex',
padding: theme.spacing(1, 2, 2)
}
});
const AccordionDetails = /*#__PURE__*/React.forwardRef(function AccordionDetails(props, ref) {
const {
classes,
className
} = props,
other = _objectWithoutPropertiesLoose(props, ["classes", "className"]);
return /*#__PURE__*/React.createElement("div", _extends({
className: clsx(classes.root, className),
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? AccordionDetails.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the accordion details.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string
} : void 0;
export default withStyles(styles, {
name: 'MuiAccordionDetails'
})(AccordionDetails);

View file

@ -0,0 +1 @@
export { default } from './AccordionDetails';

View file

@ -0,0 +1,183 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
/* eslint-disable jsx-a11y/aria-role */
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { chainPropTypes } from '@material-ui/utils';
import ButtonBase from '../ButtonBase';
import IconButton from '../IconButton';
import withStyles from '../styles/withStyles';
import AccordionContext from '../Accordion/AccordionContext';
export const styles = theme => {
const transition = {
duration: theme.transitions.duration.shortest
};
return {
/* Styles applied to the root element. */
root: {
display: 'flex',
minHeight: 8 * 6,
transition: theme.transitions.create(['min-height', 'background-color'], transition),
padding: theme.spacing(0, 2),
'&:hover:not($disabled)': {
cursor: 'pointer'
},
'&$expanded': {
minHeight: 64
},
'&$focused, &$focusVisible': {
backgroundColor: theme.palette.action.focus
},
'&$disabled': {
opacity: theme.palette.action.disabledOpacity
}
},
/* Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */
expanded: {},
/* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
focused: {},
/* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
focusVisible: {},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Styles applied to the children wrapper element. */
content: {
display: 'flex',
flexGrow: 1,
transition: theme.transitions.create(['margin'], transition),
margin: '12px 0',
'&$expanded': {
margin: '20px 0'
}
},
/* Styles applied to the `IconButton` component when `expandIcon` is supplied. */
expandIcon: {
transform: 'rotate(0deg)',
transition: theme.transitions.create('transform', transition),
'&:hover': {
// Disable the hover effect for the IconButton,
// because a hover effect should apply to the entire Expand button and
// not only to the IconButton.
backgroundColor: 'transparent'
},
'&$expanded': {
transform: 'rotate(180deg)'
}
}
};
};
const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary(props, ref) {
const {
children,
classes,
className,
expandIcon,
focusVisibleClassName,
IconButtonProps = {},
onClick
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "expandIcon", "focusVisibleClassName", "IconButtonProps", "onClick"]);
const {
disabled = false,
expanded,
toggle
} = React.useContext(AccordionContext);
const handleChange = event => {
if (toggle) {
toggle(event);
}
if (onClick) {
onClick(event);
}
};
return /*#__PURE__*/React.createElement(ButtonBase, _extends({
focusRipple: false,
disableRipple: true,
disabled: disabled,
component: "div",
"aria-expanded": expanded,
className: clsx(classes.root, className, disabled && classes.disabled, expanded && classes.expanded),
focusVisibleClassName: clsx(classes.focusVisible, classes.focused, focusVisibleClassName),
onClick: handleChange,
ref: ref
}, other), /*#__PURE__*/React.createElement("div", {
className: clsx(classes.content, expanded && classes.expanded)
}, children), expandIcon && /*#__PURE__*/React.createElement(IconButton, _extends({
className: clsx(classes.expandIcon, expanded && classes.expanded),
edge: "end",
component: "div",
tabIndex: null,
role: null,
"aria-hidden": true
}, IconButtonProps), expandIcon));
});
process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the accordion summary.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: chainPropTypes(PropTypes.object, props => {
// Guard against when generation of classes is disabled in the stylesheets (`disableGeneration`).
// For `disableGeneration` we don't have an accurate warning but `disableGeneration` is an advanced use case anyway.
if (props.classes.focused !== undefined && props.classes.focused.indexOf(' ') !== -1) {
return new Error(['Material-UI: The `classes.focused` key is deprecated.', 'Use `classes.focusVisible` instead.', 'The name of the pseudo-class was changed for consistency.'].join('\n'));
}
return null;
}),
/**
* @ignore
*/
className: PropTypes.string,
/**
* The icon to display as the expand indicator.
*/
expandIcon: PropTypes.node,
/**
* This prop can help identify which element has keyboard focus.
* The class name will be applied when the element gains the focus through keyboard interaction.
* It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
* The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
* A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
* if needed.
*/
focusVisibleClassName: PropTypes.string,
/**
* Props applied to the `IconButton` element wrapping the expand icon.
*/
IconButtonProps: PropTypes.object,
/**
* @ignore
*/
onClick: PropTypes.func
} : void 0;
export default withStyles(styles, {
name: 'MuiAccordionSummary'
})(AccordionSummary);

View file

@ -0,0 +1 @@
export { default } from './AccordionSummary';

145
web/node_modules/@material-ui/core/es/AppBar/AppBar.js generated vendored Normal file
View file

@ -0,0 +1,145 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import capitalize from '../utils/capitalize';
import Paper from '../Paper';
export const styles = theme => {
const backgroundColorDefault = theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
return {
/* Styles applied to the root element. */
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
boxSizing: 'border-box',
// Prevent padding issue with the Modal and fixed positioned AppBar.
zIndex: theme.zIndex.appBar,
flexShrink: 0
},
/* Styles applied to the root element if `position="fixed"`. */
positionFixed: {
position: 'fixed',
top: 0,
left: 'auto',
right: 0,
'@media print': {
// Prevent the app bar to be visible on each printed page.
position: 'absolute'
}
},
/* Styles applied to the root element if `position="absolute"`. */
positionAbsolute: {
position: 'absolute',
top: 0,
left: 'auto',
right: 0
},
/* Styles applied to the root element if `position="sticky"`. */
positionSticky: {
// ⚠️ sticky is not supported by IE 11.
position: 'sticky',
top: 0,
left: 'auto',
right: 0
},
/* Styles applied to the root element if `position="static"`. */
positionStatic: {
position: 'static'
},
/* Styles applied to the root element if `position="relative"`. */
positionRelative: {
position: 'relative'
},
/* Styles applied to the root element if `color="default"`. */
colorDefault: {
backgroundColor: backgroundColorDefault,
color: theme.palette.getContrastText(backgroundColorDefault)
},
/* Styles applied to the root element if `color="primary"`. */
colorPrimary: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText
},
/* Styles applied to the root element if `color="secondary"`. */
colorSecondary: {
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText
},
/* Styles applied to the root element if `color="inherit"`. */
colorInherit: {
color: 'inherit'
},
/* Styles applied to the root element if `color="transparent"`. */
colorTransparent: {
backgroundColor: 'transparent',
color: 'inherit'
}
};
};
const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(props, ref) {
const {
classes,
className,
color = 'primary',
position = 'fixed'
} = props,
other = _objectWithoutPropertiesLoose(props, ["classes", "className", "color", "position"]);
return /*#__PURE__*/React.createElement(Paper, _extends({
square: true,
component: "header",
elevation: 4,
className: clsx(classes.root, classes[`position${capitalize(position)}`], classes[`color${capitalize(color)}`], className, position === 'fixed' && 'mui-fixed'),
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? AppBar.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']),
/**
* The positioning type. The behavior of the different options is described
* [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
* Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
*/
position: PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky'])
} : void 0;
export default withStyles(styles, {
name: 'MuiAppBar'
})(AppBar);

View file

@ -0,0 +1 @@
export { default } from './AppBar';

246
web/node_modules/@material-ui/core/es/Avatar/Avatar.js generated vendored Normal file
View file

@ -0,0 +1,246 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { chainPropTypes } from '@material-ui/utils';
import withStyles from '../styles/withStyles';
import Person from '../internal/svg-icons/Person';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
position: 'relative',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
width: 40,
height: 40,
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.pxToRem(20),
lineHeight: 1,
borderRadius: '50%',
overflow: 'hidden',
userSelect: 'none'
},
/* Styles applied to the root element if not `src` or `srcSet`. */
colorDefault: {
color: theme.palette.background.default,
backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
},
/* Styles applied to the root element if `variant="circle"`. */
circle: {},
/* Styles applied to the root element if `variant="circular"`. */
circular: {},
/* Styles applied to the root element if `variant="rounded"`. */
rounded: {
borderRadius: theme.shape.borderRadius
},
/* Styles applied to the root element if `variant="square"`. */
square: {
borderRadius: 0
},
/* Styles applied to the img element if either `src` or `srcSet` is defined. */
img: {
width: '100%',
height: '100%',
textAlign: 'center',
// Handle non-square image. The property isn't supported by IE 11.
objectFit: 'cover',
// Hide alt text.
color: 'transparent',
// Hide the image broken icon, only works on Chrome.
textIndent: 10000
},
/* Styles applied to the fallback icon */
fallback: {
width: '75%',
height: '75%'
}
});
function useLoaded({
src,
srcSet
}) {
const [loaded, setLoaded] = React.useState(false);
React.useEffect(() => {
if (!src && !srcSet) {
return undefined;
}
setLoaded(false);
let active = true;
const image = new Image();
image.src = src;
image.srcSet = srcSet;
image.onload = () => {
if (!active) {
return;
}
setLoaded('loaded');
};
image.onerror = () => {
if (!active) {
return;
}
setLoaded('error');
};
return () => {
active = false;
};
}, [src, srcSet]);
return loaded;
}
const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(props, ref) {
const {
alt,
children: childrenProp,
classes,
className,
component: Component = 'div',
imgProps,
sizes,
src,
srcSet,
variant = 'circular'
} = props,
other = _objectWithoutPropertiesLoose(props, ["alt", "children", "classes", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"]);
let children = null; // Use a hook instead of onError on the img element to support server-side rendering.
const loaded = useLoaded({
src,
srcSet
});
const hasImg = src || srcSet;
const hasImgNotFailing = hasImg && loaded !== 'error';
if (hasImgNotFailing) {
children = /*#__PURE__*/React.createElement("img", _extends({
alt: alt,
src: src,
srcSet: srcSet,
sizes: sizes,
className: classes.img
}, imgProps));
} else if (childrenProp != null) {
children = childrenProp;
} else if (hasImg && alt) {
children = alt[0];
} else {
children = /*#__PURE__*/React.createElement(Person, {
className: classes.fallback
});
}
return /*#__PURE__*/React.createElement(Component, _extends({
className: clsx(classes.root, classes.system, classes[variant], className, !hasImgNotFailing && classes.colorDefault),
ref: ref
}, other), children);
});
process.env.NODE_ENV !== "production" ? Avatar.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* Used in combination with `src` or `srcSet` to
* provide an alt attribute for the rendered `img` element.
*/
alt: PropTypes.string,
/**
* Used to render icon or text elements inside the Avatar if `src` is not set.
* This can be an element, or just a string.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: chainPropTypes(PropTypes.object, props => {
const {
classes
} = props;
if (classes == null) {
return null;
}
if (classes.circle != null && // 2 classnames? one from withStyles the other must be custom
classes.circle.split(' ').length > 1) {
throw new Error(`Material-UI: The \`circle\` class is deprecated. Use \`circular\` instead.`);
}
return null;
}),
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* Attributes applied to the `img` element if the component is used to display an image.
* It can be used to listen for the loading error event.
*/
imgProps: PropTypes.object,
/**
* The `sizes` attribute for the `img` element.
*/
sizes: PropTypes.string,
/**
* The `src` attribute for the `img` element.
*/
src: PropTypes.string,
/**
* The `srcSet` attribute for the `img` element.
* Use this attribute for responsive image display.
*/
srcSet: PropTypes.string,
/**
* The shape of the avatar.
*/
variant: chainPropTypes(PropTypes.oneOf(['circle', 'circular', 'rounded', 'square']), props => {
const {
variant
} = props;
if (variant === 'circle') {
throw new Error('Material-UI: `variant="circle"` is deprecated. Use `variant="circular"` instead.');
}
return null;
})
} : void 0;
export default withStyles(styles, {
name: 'MuiAvatar'
})(Avatar);

View file

@ -0,0 +1 @@
export { default } from './Avatar';

View file

@ -0,0 +1,97 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import Fade from '../Fade';
export const styles = {
/* Styles applied to the root element. */
root: {
// Improve scrollable dialog support.
zIndex: -1,
position: 'fixed',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
right: 0,
bottom: 0,
top: 0,
left: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
WebkitTapHighlightColor: 'transparent'
},
/* Styles applied to the root element if `invisible={true}`. */
invisible: {
backgroundColor: 'transparent'
}
};
const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
const {
children,
classes,
className,
invisible = false,
open,
transitionDuration,
// eslint-disable-next-line react/prop-types
TransitionComponent = Fade
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "invisible", "open", "transitionDuration", "TransitionComponent"]);
return /*#__PURE__*/React.createElement(TransitionComponent, _extends({
in: open,
timeout: transitionDuration
}, other), /*#__PURE__*/React.createElement("div", {
className: clsx(classes.root, className, invisible && classes.invisible),
"aria-hidden": true,
ref: ref
}, children));
});
process.env.NODE_ENV !== "production" ? Backdrop.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the backdrop is invisible.
* It can be used when rendering a popover or a custom select component.
*/
invisible: PropTypes.bool,
/**
* If `true`, the backdrop is open.
*/
open: PropTypes.bool.isRequired,
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*/
transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
appear: PropTypes.number,
enter: PropTypes.number,
exit: PropTypes.number
})])
} : void 0;
export default withStyles(styles, {
name: 'MuiBackdrop'
})(Backdrop);

View file

@ -0,0 +1 @@
export { default } from './Backdrop';

401
web/node_modules/@material-ui/core/es/Badge/Badge.js generated vendored Normal file
View file

@ -0,0 +1,401 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { chainPropTypes } from '@material-ui/utils';
import withStyles from '../styles/withStyles';
import capitalize from '../utils/capitalize';
const RADIUS_STANDARD = 10;
const RADIUS_DOT = 4;
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
position: 'relative',
display: 'inline-flex',
// For correct alignment with the text.
verticalAlign: 'middle',
flexShrink: 0
},
/* Styles applied to the badge `span` element. */
badge: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
position: 'absolute',
boxSizing: 'border-box',
fontFamily: theme.typography.fontFamily,
fontWeight: theme.typography.fontWeightMedium,
fontSize: theme.typography.pxToRem(12),
minWidth: RADIUS_STANDARD * 2,
lineHeight: 1,
padding: '0 6px',
height: RADIUS_STANDARD * 2,
borderRadius: RADIUS_STANDARD,
zIndex: 1,
// Render the badge on top of potential ripples.
transition: theme.transitions.create('transform', {
easing: theme.transitions.easing.easeInOut,
duration: theme.transitions.duration.enteringScreen
})
},
/* Styles applied to the root element if `color="primary"`. */
colorPrimary: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText
},
/* Styles applied to the root element if `color="secondary"`. */
colorSecondary: {
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText
},
/* Styles applied to the root element if `color="error"`. */
colorError: {
backgroundColor: theme.palette.error.main,
color: theme.palette.error.contrastText
},
/* Styles applied to the root element if `variant="dot"`. */
dot: {
borderRadius: RADIUS_DOT,
height: RADIUS_DOT * 2,
minWidth: RADIUS_DOT * 2,
padding: 0
},
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangle"`. */
anchorOriginTopRightRectangle: {
top: 0,
right: 0,
transform: 'scale(1) translate(50%, -50%)',
transformOrigin: '100% 0%',
'&$invisible': {
transform: 'scale(0) translate(50%, -50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
anchorOriginTopRightRectangular: {
top: 0,
right: 0,
transform: 'scale(1) translate(50%, -50%)',
transformOrigin: '100% 0%',
'&$invisible': {
transform: 'scale(0) translate(50%, -50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`. */
anchorOriginBottomRightRectangle: {
bottom: 0,
right: 0,
transform: 'scale(1) translate(50%, 50%)',
transformOrigin: '100% 100%',
'&$invisible': {
transform: 'scale(0) translate(50%, 50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
anchorOriginBottomRightRectangular: {
bottom: 0,
right: 0,
transform: 'scale(1) translate(50%, 50%)',
transformOrigin: '100% 100%',
'&$invisible': {
transform: 'scale(0) translate(50%, 50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`. */
anchorOriginTopLeftRectangle: {
top: 0,
left: 0,
transform: 'scale(1) translate(-50%, -50%)',
transformOrigin: '0% 0%',
'&$invisible': {
transform: 'scale(0) translate(-50%, -50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
anchorOriginTopLeftRectangular: {
top: 0,
left: 0,
transform: 'scale(1) translate(-50%, -50%)',
transformOrigin: '0% 0%',
'&$invisible': {
transform: 'scale(0) translate(-50%, -50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`. */
anchorOriginBottomLeftRectangle: {
bottom: 0,
left: 0,
transform: 'scale(1) translate(-50%, 50%)',
transformOrigin: '0% 100%',
'&$invisible': {
transform: 'scale(0) translate(-50%, 50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
anchorOriginBottomLeftRectangular: {
bottom: 0,
left: 0,
transform: 'scale(1) translate(-50%, 50%)',
transformOrigin: '0% 100%',
'&$invisible': {
transform: 'scale(0) translate(-50%, 50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`. */
anchorOriginTopRightCircle: {
top: '14%',
right: '14%',
transform: 'scale(1) translate(50%, -50%)',
transformOrigin: '100% 0%',
'&$invisible': {
transform: 'scale(0) translate(50%, -50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
anchorOriginTopRightCircular: {
top: '14%',
right: '14%',
transform: 'scale(1) translate(50%, -50%)',
transformOrigin: '100% 0%',
'&$invisible': {
transform: 'scale(0) translate(50%, -50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`. */
anchorOriginBottomRightCircle: {
bottom: '14%',
right: '14%',
transform: 'scale(1) translate(50%, 50%)',
transformOrigin: '100% 100%',
'&$invisible': {
transform: 'scale(0) translate(50%, 50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
anchorOriginBottomRightCircular: {
bottom: '14%',
right: '14%',
transform: 'scale(1) translate(50%, 50%)',
transformOrigin: '100% 100%',
'&$invisible': {
transform: 'scale(0) translate(50%, 50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`. */
anchorOriginTopLeftCircle: {
top: '14%',
left: '14%',
transform: 'scale(1) translate(-50%, -50%)',
transformOrigin: '0% 0%',
'&$invisible': {
transform: 'scale(0) translate(-50%, -50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
anchorOriginTopLeftCircular: {
top: '14%',
left: '14%',
transform: 'scale(1) translate(-50%, -50%)',
transformOrigin: '0% 0%',
'&$invisible': {
transform: 'scale(0) translate(-50%, -50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`. */
anchorOriginBottomLeftCircle: {
bottom: '14%',
left: '14%',
transform: 'scale(1) translate(-50%, 50%)',
transformOrigin: '0% 100%',
'&$invisible': {
transform: 'scale(0) translate(-50%, 50%)'
}
},
/* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
anchorOriginBottomLeftCircular: {
bottom: '14%',
left: '14%',
transform: 'scale(1) translate(-50%, 50%)',
transformOrigin: '0% 100%',
'&$invisible': {
transform: 'scale(0) translate(-50%, 50%)'
}
},
/* Pseudo-class to the badge `span` element if `invisible={true}`. */
invisible: {
transition: theme.transitions.create('transform', {
easing: theme.transitions.easing.easeInOut,
duration: theme.transitions.duration.leavingScreen
})
}
});
const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
const {
anchorOrigin = {
vertical: 'top',
horizontal: 'right'
},
badgeContent,
children,
classes,
className,
color = 'default',
component: ComponentProp = 'span',
invisible: invisibleProp,
max = 99,
overlap = 'rectangle',
showZero = false,
variant = 'standard'
} = props,
other = _objectWithoutPropertiesLoose(props, ["anchorOrigin", "badgeContent", "children", "classes", "className", "color", "component", "invisible", "max", "overlap", "showZero", "variant"]);
let invisible = invisibleProp;
if (invisibleProp == null && (badgeContent === 0 && !showZero || badgeContent == null && variant !== 'dot')) {
invisible = true;
}
let displayValue = '';
if (variant !== 'dot') {
displayValue = badgeContent > max ? `${max}+` : badgeContent;
}
return /*#__PURE__*/React.createElement(ComponentProp, _extends({
className: clsx(classes.root, className),
ref: ref
}, other), children, /*#__PURE__*/React.createElement("span", {
className: clsx(classes.badge, classes[`${anchorOrigin.horizontal}${capitalize(anchorOrigin.vertical)}}`], classes[`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`], color !== 'default' && classes[`color${capitalize(color)}`], invisible && classes.invisible, variant === 'dot' && classes.dot)
}, displayValue));
});
process.env.NODE_ENV !== "production" ? Badge.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The anchor of the badge.
*/
anchorOrigin: PropTypes.shape({
horizontal: PropTypes.oneOf(['left', 'right']).isRequired,
vertical: PropTypes.oneOf(['bottom', 'top']).isRequired
}),
/**
* The content rendered within the badge.
*/
badgeContent: PropTypes.node,
/**
* The badge will be added relative to this node.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: chainPropTypes(PropTypes.object, props => {
const {
classes
} = props;
if (classes == null) {
return null;
}
[['anchorOriginTopRightRectangle', 'anchorOriginTopRightRectangular'], ['anchorOriginBottomRightRectangle', 'anchorOriginBottomRightRectangular'], ['anchorOriginTopLeftRectangle', 'anchorOriginTopLeftRectangular'], ['anchorOriginBottomLeftRectangle', 'anchorOriginBottomLeftRectangular'], ['anchorOriginTopRightCircle', 'anchorOriginTopRightCircular'], ['anchorOriginBottomRightCircle', 'anchorOriginBottomRightCircular'], ['anchorOriginTopLeftCircle', 'anchorOriginTopLeftCircular']].forEach(([deprecatedClassKey, newClassKey]) => {
if (classes[deprecatedClassKey] != null && // 2 classnames? one from withStyles the other must be custom
classes[deprecatedClassKey].split(' ').length > 1) {
throw new Error(`Material-UI: The \`${deprecatedClassKey}\` class was deprecated. Use \`${newClassKey}\` instead.`);
}
});
return null;
}),
/**
* @ignore
*/
className: PropTypes.string,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: PropTypes.oneOf(['default', 'error', 'primary', 'secondary']),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* If `true`, the badge will be invisible.
*/
invisible: PropTypes.bool,
/**
* Max count to show.
*/
max: PropTypes.number,
/**
* Wrapped shape the badge should overlap.
*/
overlap: chainPropTypes(PropTypes.oneOf(['circle', 'rectangle', 'circular', 'rectangular']), props => {
const {
overlap
} = props;
if (overlap === 'rectangle') {
throw new Error('Material-UI: `overlap="rectangle"` was deprecated. Use `overlap="rectangular"` instead.');
}
if (overlap === 'circle') {
throw new Error('Material-UI: `overlap="circle"` was deprecated. Use `overlap="circular"` instead.');
}
return null;
}),
/**
* Controls whether the badge is hidden when `badgeContent` is zero.
*/
showZero: PropTypes.bool,
/**
* The variant to use.
*/
variant: PropTypes.oneOf(['dot', 'standard'])
} : void 0;
export default withStyles(styles, {
name: 'MuiBadge'
})(Badge);

1
web/node_modules/@material-ui/core/es/Badge/index.js generated vendored Normal file
View file

@ -0,0 +1 @@
export { default } from './Badge';

View file

@ -0,0 +1,103 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import { isFragment } from 'react-is';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
display: 'flex',
justifyContent: 'center',
height: 56,
backgroundColor: theme.palette.background.paper
}
});
const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation(props, ref) {
const {
children,
classes,
className,
component: Component = 'div',
onChange,
showLabels = false,
value
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "component", "onChange", "showLabels", "value"]);
return /*#__PURE__*/React.createElement(Component, _extends({
className: clsx(classes.root, className),
ref: ref
}, other), React.Children.map(children, (child, childIndex) => {
if (! /*#__PURE__*/React.isValidElement(child)) {
return null;
}
if (process.env.NODE_ENV !== 'production') {
if (isFragment(child)) {
console.error(["Material-UI: The BottomNavigation component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
}
}
const childValue = child.props.value === undefined ? childIndex : child.props.value;
return /*#__PURE__*/React.cloneElement(child, {
selected: childValue === value,
showLabel: child.props.showLabel !== undefined ? child.props.showLabel : showLabels,
value: childValue,
onChange
});
}));
});
process.env.NODE_ENV !== "production" ? BottomNavigation.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* Callback fired when the value changes.
*
* @param {object} event The event source of the callback.
* @param {any} value We default to the index of the child.
*/
onChange: PropTypes.func,
/**
* If `true`, all `BottomNavigationAction`s will show their labels.
* By default, only the selected `BottomNavigationAction` will show its label.
*/
showLabels: PropTypes.bool,
/**
* The value of the currently selected `BottomNavigationAction`.
*/
value: PropTypes.any
} : void 0;
export default withStyles(styles, {
name: 'MuiBottomNavigation'
})(BottomNavigation);

View file

@ -0,0 +1 @@
export { default } from './BottomNavigation';

View file

@ -0,0 +1,157 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import ButtonBase from '../ButtonBase';
import unsupportedProp from '../utils/unsupportedProp';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
transition: theme.transitions.create(['color', 'padding-top'], {
duration: theme.transitions.duration.short
}),
padding: '6px 12px 8px',
minWidth: 80,
maxWidth: 168,
color: theme.palette.text.secondary,
flex: '1',
'&$iconOnly': {
paddingTop: 16
},
'&$selected': {
paddingTop: 6,
color: theme.palette.primary.main
}
},
/* Pseudo-class applied to the root element if selected. */
selected: {},
/* Pseudo-class applied to the root element if `showLabel={false}` and not selected. */
iconOnly: {},
/* Styles applied to the span element that wraps the icon and label. */
wrapper: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
flexDirection: 'column'
},
/* Styles applied to the label's span element. */
label: {
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.pxToRem(12),
opacity: 1,
transition: 'font-size 0.2s, opacity 0.2s',
transitionDelay: '0.1s',
'&$iconOnly': {
opacity: 0,
transitionDelay: '0s'
},
'&$selected': {
fontSize: theme.typography.pxToRem(14)
}
}
});
const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavigationAction(props, ref) {
const {
classes,
className,
icon,
label,
onChange,
onClick,
selected,
showLabel,
value
} = props,
other = _objectWithoutPropertiesLoose(props, ["classes", "className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"]);
const handleChange = event => {
if (onChange) {
onChange(event, value);
}
if (onClick) {
onClick(event);
}
};
return /*#__PURE__*/React.createElement(ButtonBase, _extends({
ref: ref,
className: clsx(classes.root, className, selected ? classes.selected : !showLabel && classes.iconOnly),
focusRipple: true,
onClick: handleChange
}, other), /*#__PURE__*/React.createElement("span", {
className: classes.wrapper
}, icon, /*#__PURE__*/React.createElement("span", {
className: clsx(classes.label, selected ? classes.selected : !showLabel && classes.iconOnly)
}, label)));
});
process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* This prop isn't supported.
* Use the `component` prop if you need to change the children structure.
*/
children: unsupportedProp,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The icon element.
*/
icon: PropTypes.node,
/**
* The label element.
*/
label: PropTypes.node,
/**
* @ignore
*/
onChange: PropTypes.func,
/**
* @ignore
*/
onClick: PropTypes.func,
/**
* @ignore
*/
selected: PropTypes.bool,
/**
* If `true`, the `BottomNavigationAction` will show its label.
* By default, only the selected `BottomNavigationAction`
* inside `BottomNavigation` will show its label.
*/
showLabel: PropTypes.bool,
/**
* You can provide your own value. Otherwise, we fallback to the child position index.
*/
value: PropTypes.any
} : void 0;
export default withStyles(styles, {
name: 'MuiBottomNavigationAction'
})(BottomNavigationAction);

View file

@ -0,0 +1 @@
export { default } from './BottomNavigationAction';

11
web/node_modules/@material-ui/core/es/Box/Box.js generated vendored Normal file
View file

@ -0,0 +1,11 @@
import { borders, compose, display, flexbox, grid, palette, positions, shadows, sizing, spacing, typography, styleFunctionSx } from '@material-ui/system';
import styled from '../styles/styled';
export const styleFunction = styleFunctionSx(compose(borders, display, flexbox, grid, positions, palette, shadows, sizing, spacing, typography));
/**
* @ignore - do not document.
*/
const Box = styled('div')(styleFunction, {
name: 'MuiBox'
});
export default Box;

1
web/node_modules/@material-ui/core/es/Box/index.js generated vendored Normal file
View file

@ -0,0 +1 @@
export { default, styleFunction } from './Box';

View file

@ -0,0 +1,60 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import withStyles from '../styles/withStyles';
import { emphasize } from '../styles/colorManipulator';
import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
import ButtonBase from '../ButtonBase';
const styles = theme => ({
root: {
display: 'flex',
marginLeft: theme.spacing(0.5),
marginRight: theme.spacing(0.5),
backgroundColor: theme.palette.grey[100],
color: theme.palette.grey[700],
borderRadius: 2,
cursor: 'pointer',
'&:hover, &:focus': {
backgroundColor: theme.palette.grey[200]
},
'&:active': {
boxShadow: theme.shadows[0],
backgroundColor: emphasize(theme.palette.grey[200], 0.12)
}
},
icon: {
width: 24,
height: 16
}
});
/**
* @ignore - internal component.
*/
function BreadcrumbCollapsed(props) {
const {
classes
} = props,
other = _objectWithoutPropertiesLoose(props, ["classes"]);
return /*#__PURE__*/React.createElement(ButtonBase, _extends({
component: "li",
className: classes.root,
focusRipple: true
}, other), /*#__PURE__*/React.createElement(MoreHorizIcon, {
className: classes.icon
}));
}
process.env.NODE_ENV !== "production" ? BreadcrumbCollapsed.propTypes = {
/**
* @ignore
*/
classes: PropTypes.object.isRequired
} : void 0;
export default withStyles(styles, {
name: 'PrivateBreadcrumbCollapsed'
})(BreadcrumbCollapsed);

View file

@ -0,0 +1,179 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import { isFragment } from 'react-is';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import Typography from '../Typography';
import BreadcrumbCollapsed from './BreadcrumbCollapsed';
export const styles = {
/* Styles applied to the root element. */
root: {},
/* Styles applied to the ol element. */
ol: {
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
padding: 0,
margin: 0,
listStyle: 'none'
},
/* Styles applied to the li element. */
li: {},
/* Styles applied to the separator element. */
separator: {
display: 'flex',
userSelect: 'none',
marginLeft: 8,
marginRight: 8
}
};
function insertSeparators(items, className, separator) {
return items.reduce((acc, current, index) => {
if (index < items.length - 1) {
acc = acc.concat(current, /*#__PURE__*/React.createElement("li", {
"aria-hidden": true,
key: `separator-${index}`,
className: className
}, separator));
} else {
acc.push(current);
}
return acc;
}, []);
}
const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(props, ref) {
const {
children,
classes,
className,
component: Component = 'nav',
expandText = 'Show path',
itemsAfterCollapse = 1,
itemsBeforeCollapse = 1,
maxItems = 8,
separator = '/'
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "component", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"]);
const [expanded, setExpanded] = React.useState(false);
const renderItemsBeforeAndAfter = allItems => {
const handleClickExpand = event => {
setExpanded(true); // The clicked element received the focus but gets removed from the DOM.
// Let's keep the focus in the component after expanding.
const focusable = event.currentTarget.parentNode.querySelector('a[href],button,[tabindex]');
if (focusable) {
focusable.focus();
}
}; // This defends against someone passing weird input, to ensure that if all
// items would be shown anyway, we just show all items without the EllipsisItem
if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
if (process.env.NODE_ENV !== 'production') {
console.error(['Material-UI: You have provided an invalid combination of props to the Breadcrumbs.', `itemsAfterCollapse={${itemsAfterCollapse}} + itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`].join('\n'));
}
return allItems;
}
return [...allItems.slice(0, itemsBeforeCollapse), /*#__PURE__*/React.createElement(BreadcrumbCollapsed, {
"aria-label": expandText,
key: "ellipsis",
onClick: handleClickExpand
}), ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
};
const allItems = React.Children.toArray(children).filter(child => {
if (process.env.NODE_ENV !== 'production') {
if (isFragment(child)) {
console.error(["Material-UI: The Breadcrumbs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
}
}
return /*#__PURE__*/React.isValidElement(child);
}).map((child, index) => /*#__PURE__*/React.createElement("li", {
className: classes.li,
key: `child-${index}`
}, child));
return /*#__PURE__*/React.createElement(Typography, _extends({
ref: ref,
component: Component,
color: "textSecondary",
className: clsx(classes.root, className)
}, other), /*#__PURE__*/React.createElement("ol", {
className: classes.ol
}, insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), classes.separator, separator)));
});
process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The breadcrumb children.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* Override the default label for the expand button.
*
* For localization purposes, you can use the provided [translations](/guides/localization/).
*/
expandText: PropTypes.string,
/**
* If max items is exceeded, the number of items to show after the ellipsis.
*/
itemsAfterCollapse: PropTypes.number,
/**
* If max items is exceeded, the number of items to show before the ellipsis.
*/
itemsBeforeCollapse: PropTypes.number,
/**
* Specifies the maximum number of breadcrumbs to display. When there are more
* than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse`
* will be shown, with an ellipsis in between.
*/
maxItems: PropTypes.number,
/**
* Custom separator node.
*/
separator: PropTypes.node
} : void 0;
export default withStyles(styles, {
name: 'MuiBreadcrumbs'
})(Breadcrumbs);

View file

@ -0,0 +1 @@
export { default } from './Breadcrumbs';

428
web/node_modules/@material-ui/core/es/Button/Button.js generated vendored Normal file
View file

@ -0,0 +1,428 @@
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import { alpha } from '../styles/colorManipulator';
import ButtonBase from '../ButtonBase';
import capitalize from '../utils/capitalize';
export const styles = theme => ({
/* Styles applied to the root element. */
root: _extends({}, theme.typography.button, {
boxSizing: 'border-box',
minWidth: 64,
padding: '6px 16px',
borderRadius: theme.shape.borderRadius,
color: theme.palette.text.primary,
transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
duration: theme.transitions.duration.short
}),
'&:hover': {
textDecoration: 'none',
backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent'
},
'&$disabled': {
backgroundColor: 'transparent'
}
},
'&$disabled': {
color: theme.palette.action.disabled
}
}),
/* Styles applied to the span element that wraps the children. */
label: {
width: '100%',
// Ensure the correct width for iOS Safari
display: 'inherit',
alignItems: 'inherit',
justifyContent: 'inherit'
},
/* Styles applied to the root element if `variant="text"`. */
text: {
padding: '6px 8px'
},
/* Styles applied to the root element if `variant="text"` and `color="primary"`. */
textPrimary: {
color: theme.palette.primary.main,
'&:hover': {
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent'
}
}
},
/* Styles applied to the root element if `variant="text"` and `color="secondary"`. */
textSecondary: {
color: theme.palette.secondary.main,
'&:hover': {
backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent'
}
}
},
/* Styles applied to the root element if `variant="outlined"`. */
outlined: {
padding: '5px 15px',
border: `1px solid ${theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
'&$disabled': {
border: `1px solid ${theme.palette.action.disabledBackground}`
}
},
/* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
outlinedPrimary: {
color: theme.palette.primary.main,
border: `1px solid ${alpha(theme.palette.primary.main, 0.5)}`,
'&:hover': {
border: `1px solid ${theme.palette.primary.main}`,
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent'
}
}
},
/* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
outlinedSecondary: {
color: theme.palette.secondary.main,
border: `1px solid ${alpha(theme.palette.secondary.main, 0.5)}`,
'&:hover': {
border: `1px solid ${theme.palette.secondary.main}`,
backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent'
}
},
'&$disabled': {
border: `1px solid ${theme.palette.action.disabled}`
}
},
/* Styles applied to the root element if `variant="contained"`. */
contained: {
color: theme.palette.getContrastText(theme.palette.grey[300]),
backgroundColor: theme.palette.grey[300],
boxShadow: theme.shadows[2],
'&:hover': {
backgroundColor: theme.palette.grey.A100,
boxShadow: theme.shadows[4],
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
boxShadow: theme.shadows[2],
backgroundColor: theme.palette.grey[300]
},
'&$disabled': {
backgroundColor: theme.palette.action.disabledBackground
}
},
'&$focusVisible': {
boxShadow: theme.shadows[6]
},
'&:active': {
boxShadow: theme.shadows[8]
},
'&$disabled': {
color: theme.palette.action.disabled,
boxShadow: theme.shadows[0],
backgroundColor: theme.palette.action.disabledBackground
}
},
/* Styles applied to the root element if `variant="contained"` and `color="primary"`. */
containedPrimary: {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.main,
'&:hover': {
backgroundColor: theme.palette.primary.dark,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: theme.palette.primary.main
}
}
},
/* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
containedSecondary: {
color: theme.palette.secondary.contrastText,
backgroundColor: theme.palette.secondary.main,
'&:hover': {
backgroundColor: theme.palette.secondary.dark,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: theme.palette.secondary.main
}
}
},
/* Styles applied to the root element if `disableElevation={true}`. */
disableElevation: {
boxShadow: 'none',
'&:hover': {
boxShadow: 'none'
},
'&$focusVisible': {
boxShadow: 'none'
},
'&:active': {
boxShadow: 'none'
},
'&$disabled': {
boxShadow: 'none'
}
},
/* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
focusVisible: {},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Styles applied to the root element if `color="inherit"`. */
colorInherit: {
color: 'inherit',
borderColor: 'currentColor'
},
/* Styles applied to the root element if `size="small"` and `variant="text"`. */
textSizeSmall: {
padding: '4px 5px',
fontSize: theme.typography.pxToRem(13)
},
/* Styles applied to the root element if `size="large"` and `variant="text"`. */
textSizeLarge: {
padding: '8px 11px',
fontSize: theme.typography.pxToRem(15)
},
/* Styles applied to the root element if `size="small"` and `variant="outlined"`. */
outlinedSizeSmall: {
padding: '3px 9px',
fontSize: theme.typography.pxToRem(13)
},
/* Styles applied to the root element if `size="large"` and `variant="outlined"`. */
outlinedSizeLarge: {
padding: '7px 21px',
fontSize: theme.typography.pxToRem(15)
},
/* Styles applied to the root element if `size="small"` and `variant="contained"`. */
containedSizeSmall: {
padding: '4px 10px',
fontSize: theme.typography.pxToRem(13)
},
/* Styles applied to the root element if `size="large"` and `variant="contained"`. */
containedSizeLarge: {
padding: '8px 22px',
fontSize: theme.typography.pxToRem(15)
},
/* Styles applied to the root element if `size="small"`. */
sizeSmall: {},
/* Styles applied to the root element if `size="large"`. */
sizeLarge: {},
/* Styles applied to the root element if `fullWidth={true}`. */
fullWidth: {
width: '100%'
},
/* Styles applied to the startIcon element if supplied. */
startIcon: {
display: 'inherit',
marginRight: 8,
marginLeft: -4,
'&$iconSizeSmall': {
marginLeft: -2
}
},
/* Styles applied to the endIcon element if supplied. */
endIcon: {
display: 'inherit',
marginRight: -4,
marginLeft: 8,
'&$iconSizeSmall': {
marginRight: -2
}
},
/* Styles applied to the icon element if supplied and `size="small"`. */
iconSizeSmall: {
'& > *:first-child': {
fontSize: 18
}
},
/* Styles applied to the icon element if supplied and `size="medium"`. */
iconSizeMedium: {
'& > *:first-child': {
fontSize: 20
}
},
/* Styles applied to the icon element if supplied and `size="large"`. */
iconSizeLarge: {
'& > *:first-child': {
fontSize: 22
}
}
});
const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
const {
children,
classes,
className,
color = 'default',
component = 'button',
disabled = false,
disableElevation = false,
disableFocusRipple = false,
endIcon: endIconProp,
focusVisibleClassName,
fullWidth = false,
size = 'medium',
startIcon: startIconProp,
type = 'button',
variant = 'text'
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"]);
const startIcon = startIconProp && /*#__PURE__*/React.createElement("span", {
className: clsx(classes.startIcon, classes[`iconSize${capitalize(size)}`])
}, startIconProp);
const endIcon = endIconProp && /*#__PURE__*/React.createElement("span", {
className: clsx(classes.endIcon, classes[`iconSize${capitalize(size)}`])
}, endIconProp);
return /*#__PURE__*/React.createElement(ButtonBase, _extends({
className: clsx(classes.root, classes[variant], className, color === 'inherit' ? classes.colorInherit : color !== 'default' && classes[`${variant}${capitalize(color)}`], size !== 'medium' && [classes[`${variant}Size${capitalize(size)}`], classes[`size${capitalize(size)}`]], disableElevation && classes.disableElevation, disabled && classes.disabled, fullWidth && classes.fullWidth),
component: component,
disabled: disabled,
focusRipple: !disableFocusRipple,
focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
ref: ref,
type: type
}, other), /*#__PURE__*/React.createElement("span", {
className: classes.label
}, startIcon, children, endIcon));
});
process.env.NODE_ENV !== "production" ? Button.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the button.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* If `true`, the button will be disabled.
*/
disabled: PropTypes.bool,
/**
* If `true`, no elevation is used.
*/
disableElevation: PropTypes.bool,
/**
* If `true`, the keyboard focus ripple will be disabled.
*/
disableFocusRipple: PropTypes.bool,
/**
* If `true`, the ripple effect will be disabled.
*
* Without a ripple there is no styling for :focus-visible by default. Be sure
* to highlight the element by applying separate styles with the `focusVisibleClassName`.
*/
disableRipple: PropTypes.bool,
/**
* Element placed after the children.
*/
endIcon: PropTypes.node,
/**
* @ignore
*/
focusVisibleClassName: PropTypes.string,
/**
* If `true`, the button will take up the full width of its container.
*/
fullWidth: PropTypes.bool,
/**
* The URL to link to when the button is clicked.
* If defined, an `a` element will be used as the root node.
*/
href: PropTypes.string,
/**
* The size of the button.
* `small` is equivalent to the dense button styling.
*/
size: PropTypes.oneOf(['large', 'medium', 'small']),
/**
* Element placed before the children.
*/
startIcon: PropTypes.node,
/**
* @ignore
*/
type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]),
/**
* The variant to use.
*/
variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
} : void 0;
export default withStyles(styles, {
name: 'MuiButton'
})(Button);

View file

@ -0,0 +1 @@
export { default } from './Button';

View file

@ -0,0 +1,480 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import * as ReactDOM from 'react-dom';
import clsx from 'clsx';
import { elementTypeAcceptingRef, refType } from '@material-ui/utils';
import useForkRef from '../utils/useForkRef';
import useEventCallback from '../utils/useEventCallback';
import deprecatedPropType from '../utils/deprecatedPropType';
import withStyles from '../styles/withStyles';
import useIsFocusVisible from '../utils/useIsFocusVisible';
import TouchRipple from './TouchRipple';
export const styles = {
/* Styles applied to the root element. */
root: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
WebkitTapHighlightColor: 'transparent',
backgroundColor: 'transparent',
// Reset default value
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
border: 0,
margin: 0,
// Remove the margin in Safari
borderRadius: 0,
padding: 0,
// Remove the padding in Firefox
cursor: 'pointer',
userSelect: 'none',
verticalAlign: 'middle',
'-moz-appearance': 'none',
// Reset
'-webkit-appearance': 'none',
// Reset
textDecoration: 'none',
// So we take precedent over the style of a native <a /> element.
color: 'inherit',
'&::-moz-focus-inner': {
borderStyle: 'none' // Remove Firefox dotted outline.
},
'&$disabled': {
pointerEvents: 'none',
// Disable link interactions
cursor: 'default'
},
'@media print': {
colorAdjust: 'exact'
}
},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Pseudo-class applied to the root element if keyboard focused. */
focusVisible: {}
};
/**
* `ButtonBase` contains as few styles as possible.
* It aims to be a simple building block for creating a button.
* It contains a load of style reset and some focus/ripple logic.
*/
const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
const {
action,
buttonRef: buttonRefProp,
centerRipple = false,
children,
classes,
className,
component = 'button',
disabled = false,
disableRipple = false,
disableTouchRipple = false,
focusRipple = false,
focusVisibleClassName,
onBlur,
onClick,
onFocus,
onFocusVisible,
onKeyDown,
onKeyUp,
onMouseDown,
onMouseLeave,
onMouseUp,
onTouchEnd,
onTouchMove,
onTouchStart,
onDragLeave,
tabIndex = 0,
TouchRippleProps,
type = 'button'
} = props,
other = _objectWithoutPropertiesLoose(props, ["action", "buttonRef", "centerRipple", "children", "classes", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "onBlur", "onClick", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "onDragLeave", "tabIndex", "TouchRippleProps", "type"]);
const buttonRef = React.useRef(null);
function getButtonNode() {
// #StrictMode ready
return ReactDOM.findDOMNode(buttonRef.current);
}
const rippleRef = React.useRef(null);
const [focusVisible, setFocusVisible] = React.useState(false);
if (disabled && focusVisible) {
setFocusVisible(false);
}
const {
isFocusVisible,
onBlurVisible,
ref: focusVisibleRef
} = useIsFocusVisible();
React.useImperativeHandle(action, () => ({
focusVisible: () => {
setFocusVisible(true);
buttonRef.current.focus();
}
}), []);
React.useEffect(() => {
if (focusVisible && focusRipple && !disableRipple) {
rippleRef.current.pulsate();
}
}, [disableRipple, focusRipple, focusVisible]);
function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
return useEventCallback(event => {
if (eventCallback) {
eventCallback(event);
}
const ignore = skipRippleAction;
if (!ignore && rippleRef.current) {
rippleRef.current[rippleAction](event);
}
return true;
});
}
const handleMouseDown = useRippleHandler('start', onMouseDown);
const handleDragLeave = useRippleHandler('stop', onDragLeave);
const handleMouseUp = useRippleHandler('stop', onMouseUp);
const handleMouseLeave = useRippleHandler('stop', event => {
if (focusVisible) {
event.preventDefault();
}
if (onMouseLeave) {
onMouseLeave(event);
}
});
const handleTouchStart = useRippleHandler('start', onTouchStart);
const handleTouchEnd = useRippleHandler('stop', onTouchEnd);
const handleTouchMove = useRippleHandler('stop', onTouchMove);
const handleBlur = useRippleHandler('stop', event => {
if (focusVisible) {
onBlurVisible(event);
setFocusVisible(false);
}
if (onBlur) {
onBlur(event);
}
}, false);
const handleFocus = useEventCallback(event => {
// Fix for https://github.com/facebook/react/issues/7769
if (!buttonRef.current) {
buttonRef.current = event.currentTarget;
}
if (isFocusVisible(event)) {
setFocusVisible(true);
if (onFocusVisible) {
onFocusVisible(event);
}
}
if (onFocus) {
onFocus(event);
}
});
const isNonNativeButton = () => {
const button = getButtonNode();
return component && component !== 'button' && !(button.tagName === 'A' && button.href);
};
/**
* IE 11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
*/
const keydownRef = React.useRef(false);
const handleKeyDown = useEventCallback(event => {
// Check if key is already down to avoid repeats being counted as multiple activations
if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
keydownRef.current = true;
event.persist();
rippleRef.current.stop(event, () => {
rippleRef.current.start(event);
});
}
if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
event.preventDefault();
}
if (onKeyDown) {
onKeyDown(event);
} // Keyboard accessibility for non interactive elements
if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {
event.preventDefault();
if (onClick) {
onClick(event);
}
}
});
const handleKeyUp = useEventCallback(event => {
// calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
// https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
keydownRef.current = false;
event.persist();
rippleRef.current.stop(event, () => {
rippleRef.current.pulsate(event);
});
}
if (onKeyUp) {
onKeyUp(event);
} // Keyboard accessibility for non interactive elements
if (onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented) {
onClick(event);
}
});
let ComponentProp = component;
if (ComponentProp === 'button' && other.href) {
ComponentProp = 'a';
}
const buttonProps = {};
if (ComponentProp === 'button') {
buttonProps.type = type;
buttonProps.disabled = disabled;
} else {
if (ComponentProp !== 'a' || !other.href) {
buttonProps.role = 'button';
}
buttonProps['aria-disabled'] = disabled;
}
const handleUserRef = useForkRef(buttonRefProp, ref);
const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
const handleRef = useForkRef(handleUserRef, handleOwnRef);
const [mountedState, setMountedState] = React.useState(false);
React.useEffect(() => {
setMountedState(true);
}, []);
const enableTouchRipple = mountedState && !disableRipple && !disabled;
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useEffect(() => {
if (enableTouchRipple && !rippleRef.current) {
console.error(['Material-UI: The `component` prop provided to ButtonBase is invalid.', 'Please make sure the children prop is rendered in this custom component.'].join('\n'));
}
}, [enableTouchRipple]);
}
return /*#__PURE__*/React.createElement(ComponentProp, _extends({
className: clsx(classes.root, className, focusVisible && [classes.focusVisible, focusVisibleClassName], disabled && classes.disabled),
onBlur: handleBlur,
onClick: onClick,
onFocus: handleFocus,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp,
onMouseDown: handleMouseDown,
onMouseLeave: handleMouseLeave,
onMouseUp: handleMouseUp,
onDragLeave: handleDragLeave,
onTouchEnd: handleTouchEnd,
onTouchMove: handleTouchMove,
onTouchStart: handleTouchStart,
ref: handleRef,
tabIndex: disabled ? -1 : tabIndex
}, buttonProps, other), children, enableTouchRipple ?
/*#__PURE__*/
/* TouchRipple is only needed client-side, x2 boost on the server. */
React.createElement(TouchRipple, _extends({
ref: rippleRef,
center: centerRipple
}, TouchRippleProps)) : null);
});
process.env.NODE_ENV !== "production" ? ButtonBase.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* A ref for imperative actions.
* It currently only supports `focusVisible()` action.
*/
action: refType,
/**
* @ignore
*
* Use that prop to pass a ref to the native button component.
* @deprecated Use `ref` instead.
*/
buttonRef: deprecatedPropType(refType, 'Use `ref` instead.'),
/**
* If `true`, the ripples will be centered.
* They won't start at the cursor interaction position.
*/
centerRipple: PropTypes.bool,
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: elementTypeAcceptingRef,
/**
* If `true`, the base button will be disabled.
*/
disabled: PropTypes.bool,
/**
* If `true`, the ripple effect will be disabled.
*
* Without a ripple there is no styling for :focus-visible by default. Be sure
* to highlight the element by applying separate styles with the `focusVisibleClassName`.
*/
disableRipple: PropTypes.bool,
/**
* If `true`, the touch ripple effect will be disabled.
*/
disableTouchRipple: PropTypes.bool,
/**
* If `true`, the base button will have a keyboard focus ripple.
*/
focusRipple: PropTypes.bool,
/**
* This prop can help identify which element has keyboard focus.
* The class name will be applied when the element gains the focus through keyboard interaction.
* It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
* The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
* A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
* if needed.
*/
focusVisibleClassName: PropTypes.string,
/**
* @ignore
*/
href: PropTypes.string,
/**
* @ignore
*/
onBlur: PropTypes.func,
/**
* @ignore
*/
onClick: PropTypes.func,
/**
* @ignore
*/
onDragLeave: PropTypes.func,
/**
* @ignore
*/
onFocus: PropTypes.func,
/**
* Callback fired when the component is focused with a keyboard.
* We trigger a `onFocus` callback too.
*/
onFocusVisible: PropTypes.func,
/**
* @ignore
*/
onKeyDown: PropTypes.func,
/**
* @ignore
*/
onKeyUp: PropTypes.func,
/**
* @ignore
*/
onMouseDown: PropTypes.func,
/**
* @ignore
*/
onMouseLeave: PropTypes.func,
/**
* @ignore
*/
onMouseUp: PropTypes.func,
/**
* @ignore
*/
onTouchEnd: PropTypes.func,
/**
* @ignore
*/
onTouchMove: PropTypes.func,
/**
* @ignore
*/
onTouchStart: PropTypes.func,
/**
* @ignore
*/
tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* Props applied to the `TouchRipple` element.
*/
TouchRippleProps: PropTypes.object,
/**
* @ignore
*/
type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string])
} : void 0;
export default withStyles(styles, {
name: 'MuiButtonBase'
})(ButtonBase);

View file

@ -0,0 +1,95 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import useEventCallback from '../utils/useEventCallback';
const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
/**
* @ignore - internal component.
*/
function Ripple(props) {
const {
classes,
pulsate = false,
rippleX,
rippleY,
rippleSize,
in: inProp,
onExited = () => {},
timeout
} = props;
const [leaving, setLeaving] = React.useState(false);
const rippleClassName = clsx(classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
const rippleStyles = {
width: rippleSize,
height: rippleSize,
top: -(rippleSize / 2) + rippleY,
left: -(rippleSize / 2) + rippleX
};
const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
const handleExited = useEventCallback(onExited); // Ripple is used for user feedback (e.g. click or press) so we want to apply styles with the highest priority
useEnhancedEffect(() => {
if (!inProp) {
// react-transition-group#onExit
setLeaving(true); // react-transition-group#onExited
const timeoutId = setTimeout(handleExited, timeout);
return () => {
clearTimeout(timeoutId);
};
}
return undefined;
}, [handleExited, inProp, timeout]);
return /*#__PURE__*/React.createElement("span", {
className: rippleClassName,
style: rippleStyles
}, /*#__PURE__*/React.createElement("span", {
className: childClassName
}));
}
process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore - injected from TransitionGroup
*/
in: PropTypes.bool,
/**
* @ignore - injected from TransitionGroup
*/
onExited: PropTypes.func,
/**
* If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
*/
pulsate: PropTypes.bool,
/**
* Diameter of the ripple.
*/
rippleSize: PropTypes.number,
/**
* Horizontal position of the ripple center.
*/
rippleX: PropTypes.number,
/**
* Vertical position of the ripple center.
*/
rippleY: PropTypes.number,
/**
* exit delay
*/
timeout: PropTypes.number.isRequired
} : void 0;
export default Ripple;

View file

@ -0,0 +1,303 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import { TransitionGroup } from 'react-transition-group';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import Ripple from './Ripple';
const DURATION = 550;
export const DELAY_RIPPLE = 80;
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
overflow: 'hidden',
pointerEvents: 'none',
position: 'absolute',
zIndex: 0,
top: 0,
right: 0,
bottom: 0,
left: 0,
borderRadius: 'inherit'
},
/* Styles applied to the internal `Ripple` components `ripple` class. */
ripple: {
opacity: 0,
position: 'absolute'
},
/* Styles applied to the internal `Ripple` components `rippleVisible` class. */
rippleVisible: {
opacity: 0.3,
transform: 'scale(1)',
animation: `$enter ${DURATION}ms ${theme.transitions.easing.easeInOut}`
},
/* Styles applied to the internal `Ripple` components `ripplePulsate` class. */
ripplePulsate: {
animationDuration: `${theme.transitions.duration.shorter}ms`
},
/* Styles applied to the internal `Ripple` components `child` class. */
child: {
opacity: 1,
display: 'block',
width: '100%',
height: '100%',
borderRadius: '50%',
backgroundColor: 'currentColor'
},
/* Styles applied to the internal `Ripple` components `childLeaving` class. */
childLeaving: {
opacity: 0,
animation: `$exit ${DURATION}ms ${theme.transitions.easing.easeInOut}`
},
/* Styles applied to the internal `Ripple` components `childPulsate` class. */
childPulsate: {
position: 'absolute',
left: 0,
top: 0,
animation: `$pulsate 2500ms ${theme.transitions.easing.easeInOut} 200ms infinite`
},
'@keyframes enter': {
'0%': {
transform: 'scale(0)',
opacity: 0.1
},
'100%': {
transform: 'scale(1)',
opacity: 0.3
}
},
'@keyframes exit': {
'0%': {
opacity: 1
},
'100%': {
opacity: 0
}
},
'@keyframes pulsate': {
'0%': {
transform: 'scale(1)'
},
'50%': {
transform: 'scale(0.92)'
},
'100%': {
transform: 'scale(1)'
}
}
});
/**
* @ignore - internal component.
*
* TODO v5: Make private
*/
const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(props, ref) {
const {
center: centerProp = false,
classes,
className
} = props,
other = _objectWithoutPropertiesLoose(props, ["center", "classes", "className"]);
const [ripples, setRipples] = React.useState([]);
const nextKey = React.useRef(0);
const rippleCallback = React.useRef(null);
React.useEffect(() => {
if (rippleCallback.current) {
rippleCallback.current();
rippleCallback.current = null;
}
}, [ripples]); // Used to filter out mouse emulated events on mobile.
const ignoringMouseDown = React.useRef(false); // We use a timer in order to only show the ripples for touch "click" like events.
// We don't want to display the ripple for touch scroll events.
const startTimer = React.useRef(null); // This is the hook called once the previous timeout is ready.
const startTimerCommit = React.useRef(null);
const container = React.useRef(null);
React.useEffect(() => {
return () => {
clearTimeout(startTimer.current);
};
}, []);
const startCommit = React.useCallback(params => {
const {
pulsate,
rippleX,
rippleY,
rippleSize,
cb
} = params;
setRipples(oldRipples => [...oldRipples, /*#__PURE__*/React.createElement(Ripple, {
key: nextKey.current,
classes: classes,
timeout: DURATION,
pulsate: pulsate,
rippleX: rippleX,
rippleY: rippleY,
rippleSize: rippleSize
})]);
nextKey.current += 1;
rippleCallback.current = cb;
}, [classes]);
const start = React.useCallback((event = {}, options = {}, cb) => {
const {
pulsate = false,
center = centerProp || options.pulsate,
fakeElement = false // For test purposes
} = options;
if (event.type === 'mousedown' && ignoringMouseDown.current) {
ignoringMouseDown.current = false;
return;
}
if (event.type === 'touchstart') {
ignoringMouseDown.current = true;
}
const element = fakeElement ? null : container.current;
const rect = element ? element.getBoundingClientRect() : {
width: 0,
height: 0,
left: 0,
top: 0
}; // Get the size of the ripple
let rippleX;
let rippleY;
let rippleSize;
if (center || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
rippleX = Math.round(rect.width / 2);
rippleY = Math.round(rect.height / 2);
} else {
const {
clientX,
clientY
} = event.touches ? event.touches[0] : event;
rippleX = Math.round(clientX - rect.left);
rippleY = Math.round(clientY - rect.top);
}
if (center) {
rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3); // For some reason the animation is broken on Mobile Chrome if the size if even.
if (rippleSize % 2 === 0) {
rippleSize += 1;
}
} else {
const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
} // Touche devices
if (event.touches) {
// check that this isn't another touchstart due to multitouch
// otherwise we will only clear a single timer when unmounting while two
// are running
if (startTimerCommit.current === null) {
// Prepare the ripple effect.
startTimerCommit.current = () => {
startCommit({
pulsate,
rippleX,
rippleY,
rippleSize,
cb
});
}; // Delay the execution of the ripple effect.
startTimer.current = setTimeout(() => {
if (startTimerCommit.current) {
startTimerCommit.current();
startTimerCommit.current = null;
}
}, DELAY_RIPPLE); // We have to make a tradeoff with this value.
}
} else {
startCommit({
pulsate,
rippleX,
rippleY,
rippleSize,
cb
});
}
}, [centerProp, startCommit]);
const pulsate = React.useCallback(() => {
start({}, {
pulsate: true
});
}, [start]);
const stop = React.useCallback((event, cb) => {
clearTimeout(startTimer.current); // The touch interaction occurs too quickly.
// We still want to show ripple effect.
if (event.type === 'touchend' && startTimerCommit.current) {
event.persist();
startTimerCommit.current();
startTimerCommit.current = null;
startTimer.current = setTimeout(() => {
stop(event, cb);
});
return;
}
startTimerCommit.current = null;
setRipples(oldRipples => {
if (oldRipples.length > 0) {
return oldRipples.slice(1);
}
return oldRipples;
});
rippleCallback.current = cb;
}, []);
React.useImperativeHandle(ref, () => ({
pulsate,
start,
stop
}), [pulsate, start, stop]);
return /*#__PURE__*/React.createElement("span", _extends({
className: clsx(classes.root, className),
ref: container
}, other), /*#__PURE__*/React.createElement(TransitionGroup, {
component: null,
exit: true
}, ripples));
});
process.env.NODE_ENV !== "production" ? TouchRipple.propTypes = {
/**
* If `true`, the ripple starts at the center of the component
* rather than at the point of interaction.
*/
center: PropTypes.bool,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string
} : void 0;
export default withStyles(styles, {
flip: false,
name: 'MuiTouchRipple'
})( /*#__PURE__*/React.memo(TouchRipple));

View file

@ -0,0 +1 @@
export { default } from './ButtonBase';

View file

@ -0,0 +1,305 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import { isFragment } from 'react-is';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import capitalize from '../utils/capitalize';
import { alpha } from '../styles/colorManipulator';
import withStyles from '../styles/withStyles';
import Button from '../Button'; // Force a side effect so we don't have any override priority issue.
// eslint-disable-next-line no-unused-expressions
Button.styles;
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
display: 'inline-flex',
borderRadius: theme.shape.borderRadius
},
/* Styles applied to the root element if `variant="contained"`. */
contained: {
boxShadow: theme.shadows[2]
},
/* Styles applied to the root element if `disableElevation={true}`. */
disableElevation: {
boxShadow: 'none'
},
/* Pseudo-class applied to child elements if `disabled={true}`. */
disabled: {},
/* Styles applied to the root element if `fullWidth={true}`. */
fullWidth: {
width: '100%'
},
/* Styles applied to the root element if `orientation="vertical"`. */
vertical: {
flexDirection: 'column'
},
/* Styles applied to the children. */
grouped: {
minWidth: 40
},
/* Styles applied to the children if `orientation="horizontal"`. */
groupedHorizontal: {
'&:not(:first-child)': {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0
},
'&:not(:last-child)': {
borderTopRightRadius: 0,
borderBottomRightRadius: 0
}
},
/* Styles applied to the children if `orientation="vertical"`. */
groupedVertical: {
'&:not(:first-child)': {
borderTopRightRadius: 0,
borderTopLeftRadius: 0
},
'&:not(:last-child)': {
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0
}
},
/* Styles applied to the children if `variant="text"`. */
groupedText: {},
/* Styles applied to the children if `variant="text"` and `orientation="horizontal"`. */
groupedTextHorizontal: {
'&:not(:last-child)': {
borderRight: `1px solid ${theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
}
},
/* Styles applied to the children if `variant="text"` and `orientation="vertical"`. */
groupedTextVertical: {
'&:not(:last-child)': {
borderBottom: `1px solid ${theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
}
},
/* Styles applied to the children if `variant="text"` and `color="primary"`. */
groupedTextPrimary: {
'&:not(:last-child)': {
borderColor: alpha(theme.palette.primary.main, 0.5)
}
},
/* Styles applied to the children if `variant="text"` and `color="secondary"`. */
groupedTextSecondary: {
'&:not(:last-child)': {
borderColor: alpha(theme.palette.secondary.main, 0.5)
}
},
/* Styles applied to the children if `variant="outlined"`. */
groupedOutlined: {},
/* Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. */
groupedOutlinedHorizontal: {
'&:not(:first-child)': {
marginLeft: -1
},
'&:not(:last-child)': {
borderRightColor: 'transparent'
}
},
/* Styles applied to the children if `variant="outlined"` and `orientation="vertical"`. */
groupedOutlinedVertical: {
'&:not(:first-child)': {
marginTop: -1
},
'&:not(:last-child)': {
borderBottomColor: 'transparent'
}
},
/* Styles applied to the children if `variant="outlined"` and `color="primary"`. */
groupedOutlinedPrimary: {
'&:hover': {
borderColor: theme.palette.primary.main
}
},
/* Styles applied to the children if `variant="outlined"` and `color="secondary"`. */
groupedOutlinedSecondary: {
'&:hover': {
borderColor: theme.palette.secondary.main
}
},
/* Styles applied to the children if `variant="contained"`. */
groupedContained: {
boxShadow: 'none'
},
/* Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. */
groupedContainedHorizontal: {
'&:not(:last-child)': {
borderRight: `1px solid ${theme.palette.grey[400]}`,
'&$disabled': {
borderRight: `1px solid ${theme.palette.action.disabled}`
}
}
},
/* Styles applied to the children if `variant="contained"` and `orientation="vertical"`. */
groupedContainedVertical: {
'&:not(:last-child)': {
borderBottom: `1px solid ${theme.palette.grey[400]}`,
'&$disabled': {
borderBottom: `1px solid ${theme.palette.action.disabled}`
}
}
},
/* Styles applied to the children if `variant="contained"` and `color="primary"`. */
groupedContainedPrimary: {
'&:not(:last-child)': {
borderColor: theme.palette.primary.dark
}
},
/* Styles applied to the children if `variant="contained"` and `color="secondary"`. */
groupedContainedSecondary: {
'&:not(:last-child)': {
borderColor: theme.palette.secondary.dark
}
}
});
const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(props, ref) {
const {
children,
classes,
className,
color = 'default',
component: Component = 'div',
disabled = false,
disableElevation = false,
disableFocusRipple = false,
disableRipple = false,
fullWidth = false,
orientation = 'horizontal',
size = 'medium',
variant = 'outlined'
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"]);
const buttonClassName = clsx(classes.grouped, classes[`grouped${capitalize(orientation)}`], classes[`grouped${capitalize(variant)}`], classes[`grouped${capitalize(variant)}${capitalize(orientation)}`], classes[`grouped${capitalize(variant)}${color !== 'default' ? capitalize(color) : ''}`], disabled && classes.disabled);
return /*#__PURE__*/React.createElement(Component, _extends({
role: "group",
className: clsx(classes.root, className, fullWidth && classes.fullWidth, disableElevation && classes.disableElevation, variant === 'contained' && classes.contained, orientation === 'vertical' && classes.vertical),
ref: ref
}, other), React.Children.map(children, child => {
if (! /*#__PURE__*/React.isValidElement(child)) {
return null;
}
if (process.env.NODE_ENV !== 'production') {
if (isFragment(child)) {
console.error(["Material-UI: The ButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
}
}
return /*#__PURE__*/React.cloneElement(child, {
className: clsx(buttonClassName, child.props.className),
color: child.props.color || color,
disabled: child.props.disabled || disabled,
disableElevation: child.props.disableElevation || disableElevation,
disableFocusRipple,
disableRipple,
fullWidth,
size: child.props.size || size,
variant: child.props.variant || variant
});
}));
});
process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the button group.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* If `true`, the buttons will be disabled.
*/
disabled: PropTypes.bool,
/**
* If `true`, no elevation is used.
*/
disableElevation: PropTypes.bool,
/**
* If `true`, the button keyboard focus ripple will be disabled.
*/
disableFocusRipple: PropTypes.bool,
/**
* If `true`, the button ripple effect will be disabled.
*/
disableRipple: PropTypes.bool,
/**
* If `true`, the buttons will take up the full width of its container.
*/
fullWidth: PropTypes.bool,
/**
* The group orientation (layout flow direction).
*/
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
/**
* The size of the button.
* `small` is equivalent to the dense button styling.
*/
size: PropTypes.oneOf(['large', 'medium', 'small']),
/**
* The variant to use.
*/
variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
} : void 0;
export default withStyles(styles, {
name: 'MuiButtonGroup'
})(ButtonGroup);

View file

@ -0,0 +1 @@
export { default } from './ButtonGroup';

57
web/node_modules/@material-ui/core/es/Card/Card.js generated vendored Normal file
View file

@ -0,0 +1,57 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import Paper from '../Paper';
import withStyles from '../styles/withStyles';
export const styles = {
/* Styles applied to the root element. */
root: {
overflow: 'hidden'
}
};
const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
const {
classes,
className,
raised = false
} = props,
other = _objectWithoutPropertiesLoose(props, ["classes", "className", "raised"]);
return /*#__PURE__*/React.createElement(Paper, _extends({
className: clsx(classes.root, className),
elevation: raised ? 8 : 1,
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? Card.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the card will use raised styling.
*/
raised: PropTypes.bool
} : void 0;
export default withStyles(styles, {
name: 'MuiCard'
})(Card);

1
web/node_modules/@material-ui/core/es/Card/index.js generated vendored Normal file
View file

@ -0,0 +1 @@
export { default } from './Card';

View file

@ -0,0 +1,88 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import ButtonBase from '../ButtonBase';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
display: 'block',
textAlign: 'inherit',
width: '100%',
'&:hover $focusHighlight': {
opacity: theme.palette.action.hoverOpacity
},
'&$focusVisible $focusHighlight': {
opacity: 0.12
}
},
/* Pseudo-class applied to the ButtonBase root element if the action area is keyboard focused. */
focusVisible: {},
/* Styles applied to the overlay that covers the action area when it is keyboard focused. */
focusHighlight: {
overflow: 'hidden',
pointerEvents: 'none',
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
borderRadius: 'inherit',
opacity: 0,
backgroundColor: 'currentcolor',
transition: theme.transitions.create('opacity', {
duration: theme.transitions.duration.short
})
}
});
const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(props, ref) {
const {
children,
classes,
className,
focusVisibleClassName
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "focusVisibleClassName"]);
return /*#__PURE__*/React.createElement(ButtonBase, _extends({
className: clsx(classes.root, className),
focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
ref: ref
}, other), children, /*#__PURE__*/React.createElement("span", {
className: classes.focusHighlight
}));
});
process.env.NODE_ENV !== "production" ? CardActionArea.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* @ignore
*/
focusVisibleClassName: PropTypes.string
} : void 0;
export default withStyles(styles, {
name: 'MuiCardActionArea'
})(CardActionArea);

View file

@ -0,0 +1 @@
export { default } from './CardActionArea';

View file

@ -0,0 +1,64 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
export const styles = {
/* Styles applied to the root element. */
root: {
display: 'flex',
alignItems: 'center',
padding: 8
},
/* Styles applied to the root element if `disableSpacing={false}`. */
spacing: {
'& > :not(:first-child)': {
marginLeft: 8
}
}
};
const CardActions = /*#__PURE__*/React.forwardRef(function CardActions(props, ref) {
const {
disableSpacing = false,
classes,
className
} = props,
other = _objectWithoutPropertiesLoose(props, ["disableSpacing", "classes", "className"]);
return /*#__PURE__*/React.createElement("div", _extends({
className: clsx(classes.root, className, !disableSpacing && classes.spacing),
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? CardActions.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the actions do not have additional margin.
*/
disableSpacing: PropTypes.bool
} : void 0;
export default withStyles(styles, {
name: 'MuiCardActions'
})(CardActions);

View file

@ -0,0 +1 @@
export { default } from './CardActions';

View file

@ -0,0 +1,61 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
export const styles = {
/* Styles applied to the root element. */
root: {
padding: 16,
'&:last-child': {
paddingBottom: 24
}
}
};
const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(props, ref) {
const {
classes,
className,
component: Component = 'div'
} = props,
other = _objectWithoutPropertiesLoose(props, ["classes", "className", "component"]);
return /*#__PURE__*/React.createElement(Component, _extends({
className: clsx(classes.root, className),
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? CardContent.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType
} : void 0;
export default withStyles(styles, {
name: 'MuiCardContent'
})(CardContent);

View file

@ -0,0 +1 @@
export { default } from './CardContent';

View file

@ -0,0 +1,162 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import Typography from '../Typography';
export const styles = {
/* Styles applied to the root element. */
root: {
display: 'flex',
alignItems: 'center',
padding: 16
},
/* Styles applied to the avatar element. */
avatar: {
flex: '0 0 auto',
marginRight: 16
},
/* Styles applied to the action element. */
action: {
flex: '0 0 auto',
alignSelf: 'flex-start',
marginTop: -8,
marginRight: -8
},
/* Styles applied to the content wrapper element. */
content: {
flex: '1 1 auto'
},
/* Styles applied to the title Typography element. */
title: {},
/* Styles applied to the subheader Typography element. */
subheader: {}
};
const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(props, ref) {
const {
action,
avatar,
classes,
className,
component: Component = 'div',
disableTypography = false,
subheader: subheaderProp,
subheaderTypographyProps,
title: titleProp,
titleTypographyProps
} = props,
other = _objectWithoutPropertiesLoose(props, ["action", "avatar", "classes", "className", "component", "disableTypography", "subheader", "subheaderTypographyProps", "title", "titleTypographyProps"]);
let title = titleProp;
if (title != null && title.type !== Typography && !disableTypography) {
title = /*#__PURE__*/React.createElement(Typography, _extends({
variant: avatar ? 'body2' : 'h5',
className: classes.title,
component: "span",
display: "block"
}, titleTypographyProps), title);
}
let subheader = subheaderProp;
if (subheader != null && subheader.type !== Typography && !disableTypography) {
subheader = /*#__PURE__*/React.createElement(Typography, _extends({
variant: avatar ? 'body2' : 'body1',
className: classes.subheader,
color: "textSecondary",
component: "span",
display: "block"
}, subheaderTypographyProps), subheader);
}
return /*#__PURE__*/React.createElement(Component, _extends({
className: clsx(classes.root, className),
ref: ref
}, other), avatar && /*#__PURE__*/React.createElement("div", {
className: classes.avatar
}, avatar), /*#__PURE__*/React.createElement("div", {
className: classes.content
}, title, subheader), action && /*#__PURE__*/React.createElement("div", {
className: classes.action
}, action));
});
process.env.NODE_ENV !== "production" ? CardHeader.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The action to display in the card header.
*/
action: PropTypes.node,
/**
* The Avatar for the Card Header.
*/
avatar: PropTypes.node,
/**
* @ignore
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* If `true`, `subheader` and `title` won't be wrapped by a Typography component.
* This can be useful to render an alternative Typography variant by wrapping
* the `title` text, and optional `subheader` text
* with the Typography component.
*/
disableTypography: PropTypes.bool,
/**
* The content of the component.
*/
subheader: PropTypes.node,
/**
* These props will be forwarded to the subheader
* (as long as disableTypography is not `true`).
*/
subheaderTypographyProps: PropTypes.object,
/**
* The content of the Card Title.
*/
title: PropTypes.node,
/**
* These props will be forwarded to the title
* (as long as disableTypography is not `true`).
*/
titleTypographyProps: PropTypes.object
} : void 0;
export default withStyles(styles, {
name: 'MuiCardHeader'
})(CardHeader);

View file

@ -0,0 +1 @@
export { default } from './CardHeader';

View file

@ -0,0 +1,109 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import { chainPropTypes } from '@material-ui/utils';
export const styles = {
/* Styles applied to the root element. */
root: {
display: 'block',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
},
/* Styles applied to the root element if `component="video, audio, picture, iframe, or img"`. */
media: {
width: '100%'
},
/* Styles applied to the root element if `component="picture or img"`. */
img: {
// ⚠️ object-fit is not supported by IE 11.
objectFit: 'cover'
}
};
const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
const CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia(props, ref) {
const {
children,
classes,
className,
component: Component = 'div',
image,
src,
style
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "component", "image", "src", "style"]);
const isMediaComponent = MEDIA_COMPONENTS.indexOf(Component) !== -1;
const composedStyle = !isMediaComponent && image ? _extends({
backgroundImage: `url("${image}")`
}, style) : style;
return /*#__PURE__*/React.createElement(Component, _extends({
className: clsx(classes.root, className, isMediaComponent && classes.media, "picture img".indexOf(Component) !== -1 && classes.img),
ref: ref,
style: composedStyle,
src: isMediaComponent ? image || src : undefined
}, other), children);
});
process.env.NODE_ENV !== "production" ? CardMedia.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: chainPropTypes(PropTypes.node, props => {
if (!props.children && !props.image && !props.src && !props.component) {
return new Error('Material-UI: Either `children`, `image`, `src` or `component` prop must be specified.');
}
return null;
}),
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* Image to be displayed as a background image.
* Either `image` or `src` prop must be specified.
* Note that caller must specify height otherwise the image will not be visible.
*/
image: PropTypes.string,
/**
* An alias for `image` property.
* Available only with media components.
* Media components: `video`, `audio`, `picture`, `iframe`, `img`.
*/
src: PropTypes.string,
/**
* @ignore
*/
style: PropTypes.object
} : void 0;
export default withStyles(styles, {
name: 'MuiCardMedia'
})(CardMedia);

View file

@ -0,0 +1 @@
export { default } from './CardMedia';

View file

@ -0,0 +1,198 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { refType } from '@material-ui/utils';
import SwitchBase from '../internal/SwitchBase';
import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '../internal/svg-icons/CheckBox';
import { alpha } from '../styles/colorManipulator';
import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';
import capitalize from '../utils/capitalize';
import withStyles from '../styles/withStyles';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
color: theme.palette.text.secondary
},
/* Pseudo-class applied to the root element if `checked={true}`. */
checked: {},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Pseudo-class applied to the root element if `indeterminate={true}`. */
indeterminate: {},
/* Styles applied to the root element if `color="primary"`. */
colorPrimary: {
'&$checked': {
color: theme.palette.primary.main,
'&:hover': {
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent'
}
}
},
'&$disabled': {
color: theme.palette.action.disabled
}
},
/* Styles applied to the root element if `color="secondary"`. */
colorSecondary: {
'&$checked': {
color: theme.palette.secondary.main,
'&:hover': {
backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent'
}
}
},
'&$disabled': {
color: theme.palette.action.disabled
}
}
});
const defaultCheckedIcon = /*#__PURE__*/React.createElement(CheckBoxIcon, null);
const defaultIcon = /*#__PURE__*/React.createElement(CheckBoxOutlineBlankIcon, null);
const defaultIndeterminateIcon = /*#__PURE__*/React.createElement(IndeterminateCheckBoxIcon, null);
const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
const {
checkedIcon = defaultCheckedIcon,
classes,
color = 'secondary',
icon: iconProp = defaultIcon,
indeterminate = false,
indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
inputProps,
size = 'medium'
} = props,
other = _objectWithoutPropertiesLoose(props, ["checkedIcon", "classes", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"]);
const icon = indeterminate ? indeterminateIconProp : iconProp;
const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
return /*#__PURE__*/React.createElement(SwitchBase, _extends({
type: "checkbox",
classes: {
root: clsx(classes.root, classes[`color${capitalize(color)}`], indeterminate && classes.indeterminate),
checked: classes.checked,
disabled: classes.disabled
},
color: color,
inputProps: _extends({
'data-indeterminate': indeterminate
}, inputProps),
icon: /*#__PURE__*/React.cloneElement(icon, {
fontSize: icon.props.fontSize === undefined && size === "small" ? size : icon.props.fontSize
}),
checkedIcon: /*#__PURE__*/React.cloneElement(indeterminateIcon, {
fontSize: indeterminateIcon.props.fontSize === undefined && size === "small" ? size : indeterminateIcon.props.fontSize
}),
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? Checkbox.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* If `true`, the component is checked.
*/
checked: PropTypes.bool,
/**
* The icon to display when the component is checked.
*/
checkedIcon: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: PropTypes.oneOf(['default', 'primary', 'secondary']),
/**
* If `true`, the checkbox will be disabled.
*/
disabled: PropTypes.bool,
/**
* If `true`, the ripple effect will be disabled.
*/
disableRipple: PropTypes.bool,
/**
* The icon to display when the component is unchecked.
*/
icon: PropTypes.node,
/**
* The id of the `input` element.
*/
id: PropTypes.string,
/**
* If `true`, the component appears indeterminate.
* This does not set the native input element to indeterminate due
* to inconsistent behavior across browsers.
* However, we set a `data-indeterminate` attribute on the input.
*/
indeterminate: PropTypes.bool,
/**
* The icon to display when the component is indeterminate.
*/
indeterminateIcon: PropTypes.node,
/**
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
*/
inputProps: PropTypes.object,
/**
* Pass a ref to the `input` element.
*/
inputRef: refType,
/**
* Callback fired when the state is changed.
*
* @param {object} event The event source of the callback.
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
*/
onChange: PropTypes.func,
/**
* If `true`, the `input` element will be required.
*/
required: PropTypes.bool,
/**
* The size of the checkbox.
* `small` is equivalent to the dense checkbox styling.
*/
size: PropTypes.oneOf(['medium', 'small']),
/**
* The value of the component. The DOM API casts this to a string.
* The browser uses "on" as the default value.
*/
value: PropTypes.any
} : void 0;
export default withStyles(styles, {
name: 'MuiCheckbox'
})(Checkbox);

View file

@ -0,0 +1 @@
export { default } from './Checkbox';

520
web/node_modules/@material-ui/core/es/Chip/Chip.js generated vendored Normal file
View file

@ -0,0 +1,520 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import CancelIcon from '../internal/svg-icons/Cancel';
import withStyles from '../styles/withStyles';
import { emphasize, alpha } from '../styles/colorManipulator';
import useForkRef from '../utils/useForkRef';
import unsupportedProp from '../utils/unsupportedProp';
import capitalize from '../utils/capitalize';
import ButtonBase from '../ButtonBase';
export const styles = theme => {
const backgroundColor = theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700];
const deleteIconColor = alpha(theme.palette.text.primary, 0.26);
return {
/* Styles applied to the root element. */
root: {
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.pxToRem(13),
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
height: 32,
color: theme.palette.getContrastText(backgroundColor),
backgroundColor,
borderRadius: 32 / 2,
whiteSpace: 'nowrap',
transition: theme.transitions.create(['background-color', 'box-shadow']),
// label will inherit this from root, then `clickable` class overrides this for both
cursor: 'default',
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
textDecoration: 'none',
border: 'none',
// Remove `button` border
padding: 0,
// Remove `button` padding
verticalAlign: 'middle',
boxSizing: 'border-box',
'&$disabled': {
opacity: 0.5,
pointerEvents: 'none'
},
'& $avatar': {
marginLeft: 5,
marginRight: -6,
width: 24,
height: 24,
color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
fontSize: theme.typography.pxToRem(12)
},
'& $avatarColorPrimary': {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.dark
},
'& $avatarColorSecondary': {
color: theme.palette.secondary.contrastText,
backgroundColor: theme.palette.secondary.dark
},
'& $avatarSmall': {
marginLeft: 4,
marginRight: -4,
width: 18,
height: 18,
fontSize: theme.typography.pxToRem(10)
}
},
/* Styles applied to the root element if `size="small"`. */
sizeSmall: {
height: 24
},
/* Styles applied to the root element if `color="primary"`. */
colorPrimary: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText
},
/* Styles applied to the root element if `color="secondary"`. */
colorSecondary: {
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText
},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Styles applied to the root element if `onClick` is defined or `clickable={true}`. */
clickable: {
userSelect: 'none',
WebkitTapHighlightColor: 'transparent',
cursor: 'pointer',
'&:hover, &:focus': {
backgroundColor: emphasize(backgroundColor, 0.08)
},
'&:active': {
boxShadow: theme.shadows[1]
}
},
/* Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`. */
clickableColorPrimary: {
'&:hover, &:focus': {
backgroundColor: emphasize(theme.palette.primary.main, 0.08)
}
},
/* Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. */
clickableColorSecondary: {
'&:hover, &:focus': {
backgroundColor: emphasize(theme.palette.secondary.main, 0.08)
}
},
/* Styles applied to the root element if `onDelete` is defined. */
deletable: {
'&:focus': {
backgroundColor: emphasize(backgroundColor, 0.08)
}
},
/* Styles applied to the root element if `onDelete` and `color="primary"` is defined. */
deletableColorPrimary: {
'&:focus': {
backgroundColor: emphasize(theme.palette.primary.main, 0.2)
}
},
/* Styles applied to the root element if `onDelete` and `color="secondary"` is defined. */
deletableColorSecondary: {
'&:focus': {
backgroundColor: emphasize(theme.palette.secondary.main, 0.2)
}
},
/* Styles applied to the root element if `variant="outlined"`. */
outlined: {
backgroundColor: 'transparent',
border: `1px solid ${theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
'$clickable&:hover, $clickable&:focus, $deletable&:focus': {
backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity)
},
'& $avatar': {
marginLeft: 4
},
'& $avatarSmall': {
marginLeft: 2
},
'& $icon': {
marginLeft: 4
},
'& $iconSmall': {
marginLeft: 2
},
'& $deleteIcon': {
marginRight: 5
},
'& $deleteIconSmall': {
marginRight: 3
}
},
/* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
outlinedPrimary: {
color: theme.palette.primary.main,
border: `1px solid ${theme.palette.primary.main}`,
'$clickable&:hover, $clickable&:focus, $deletable&:focus': {
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
}
},
/* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
outlinedSecondary: {
color: theme.palette.secondary.main,
border: `1px solid ${theme.palette.secondary.main}`,
'$clickable&:hover, $clickable&:focus, $deletable&:focus': {
backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity)
}
},
// TODO v5: remove
/* Styles applied to the `avatar` element. */
avatar: {},
/* Styles applied to the `avatar` element if `size="small"`. */
avatarSmall: {},
/* Styles applied to the `avatar` element if `color="primary"`. */
avatarColorPrimary: {},
/* Styles applied to the `avatar` element if `color="secondary"`. */
avatarColorSecondary: {},
/* Styles applied to the `icon` element. */
icon: {
color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
marginLeft: 5,
marginRight: -6
},
/* Styles applied to the `icon` element if `size="small"`. */
iconSmall: {
width: 18,
height: 18,
marginLeft: 4,
marginRight: -4
},
/* Styles applied to the `icon` element if `color="primary"`. */
iconColorPrimary: {
color: 'inherit'
},
/* Styles applied to the `icon` element if `color="secondary"`. */
iconColorSecondary: {
color: 'inherit'
},
/* Styles applied to the label `span` element. */
label: {
overflow: 'hidden',
textOverflow: 'ellipsis',
paddingLeft: 12,
paddingRight: 12,
whiteSpace: 'nowrap'
},
/* Styles applied to the label `span` element if `size="small"`. */
labelSmall: {
paddingLeft: 8,
paddingRight: 8
},
/* Styles applied to the `deleteIcon` element. */
deleteIcon: {
WebkitTapHighlightColor: 'transparent',
color: deleteIconColor,
height: 22,
width: 22,
cursor: 'pointer',
margin: '0 5px 0 -6px',
'&:hover': {
color: alpha(deleteIconColor, 0.4)
}
},
/* Styles applied to the `deleteIcon` element if `size="small"`. */
deleteIconSmall: {
height: 16,
width: 16,
marginRight: 4,
marginLeft: -4
},
/* Styles applied to the deleteIcon element if `color="primary"` and `variant="default"`. */
deleteIconColorPrimary: {
color: alpha(theme.palette.primary.contrastText, 0.7),
'&:hover, &:active': {
color: theme.palette.primary.contrastText
}
},
/* Styles applied to the deleteIcon element if `color="secondary"` and `variant="default"`. */
deleteIconColorSecondary: {
color: alpha(theme.palette.secondary.contrastText, 0.7),
'&:hover, &:active': {
color: theme.palette.secondary.contrastText
}
},
/* Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */
deleteIconOutlinedColorPrimary: {
color: alpha(theme.palette.primary.main, 0.7),
'&:hover, &:active': {
color: theme.palette.primary.main
}
},
/* Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. */
deleteIconOutlinedColorSecondary: {
color: alpha(theme.palette.secondary.main, 0.7),
'&:hover, &:active': {
color: theme.palette.secondary.main
}
}
};
};
function isDeleteKeyboardEvent(keyboardEvent) {
return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
}
/**
* Chips represent complex entities in small blocks, such as a contact.
*/
const Chip = /*#__PURE__*/React.forwardRef(function Chip(props, ref) {
const {
avatar: avatarProp,
classes,
className,
clickable: clickableProp,
color = 'default',
component: ComponentProp,
deleteIcon: deleteIconProp,
disabled = false,
icon: iconProp,
label,
onClick,
onDelete,
onKeyDown,
onKeyUp,
size = 'medium',
variant = 'default'
} = props,
other = _objectWithoutPropertiesLoose(props, ["avatar", "classes", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"]);
const chipRef = React.useRef(null);
const handleRef = useForkRef(chipRef, ref);
const handleDeleteIconClick = event => {
// Stop the event from bubbling up to the `Chip`
event.stopPropagation();
if (onDelete) {
onDelete(event);
}
};
const handleKeyDown = event => {
// Ignore events from children of `Chip`.
if (event.currentTarget === event.target && isDeleteKeyboardEvent(event)) {
// will be handled in keyUp, otherwise some browsers
// might init navigation
event.preventDefault();
}
if (onKeyDown) {
onKeyDown(event);
}
};
const handleKeyUp = event => {
// Ignore events from children of `Chip`.
if (event.currentTarget === event.target) {
if (onDelete && isDeleteKeyboardEvent(event)) {
onDelete(event);
} else if (event.key === 'Escape' && chipRef.current) {
chipRef.current.blur();
}
}
if (onKeyUp) {
onKeyUp(event);
}
};
const clickable = clickableProp !== false && onClick ? true : clickableProp;
const small = size === 'small';
const Component = ComponentProp || (clickable ? ButtonBase : 'div');
const moreProps = Component === ButtonBase ? {
component: 'div'
} : {};
let deleteIcon = null;
if (onDelete) {
const customClasses = clsx(color !== 'default' && (variant === "default" ? classes[`deleteIconColor${capitalize(color)}`] : classes[`deleteIconOutlinedColor${capitalize(color)}`]), small && classes.deleteIconSmall);
deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? /*#__PURE__*/React.cloneElement(deleteIconProp, {
className: clsx(deleteIconProp.props.className, classes.deleteIcon, customClasses),
onClick: handleDeleteIconClick
}) : /*#__PURE__*/React.createElement(CancelIcon, {
className: clsx(classes.deleteIcon, customClasses),
onClick: handleDeleteIconClick
});
}
let avatar = null;
if (avatarProp && /*#__PURE__*/React.isValidElement(avatarProp)) {
avatar = /*#__PURE__*/React.cloneElement(avatarProp, {
className: clsx(classes.avatar, avatarProp.props.className, small && classes.avatarSmall, color !== 'default' && classes[`avatarColor${capitalize(color)}`])
});
}
let icon = null;
if (iconProp && /*#__PURE__*/React.isValidElement(iconProp)) {
icon = /*#__PURE__*/React.cloneElement(iconProp, {
className: clsx(classes.icon, iconProp.props.className, small && classes.iconSmall, color !== 'default' && classes[`iconColor${capitalize(color)}`])
});
}
if (process.env.NODE_ENV !== 'production') {
if (avatar && icon) {
console.error('Material-UI: The Chip component can not handle the avatar ' + 'and the icon prop at the same time. Pick one.');
}
}
return /*#__PURE__*/React.createElement(Component, _extends({
role: clickable || onDelete ? 'button' : undefined,
className: clsx(classes.root, className, color !== 'default' && [classes[`color${capitalize(color)}`], clickable && classes[`clickableColor${capitalize(color)}`], onDelete && classes[`deletableColor${capitalize(color)}`]], variant !== "default" && [classes.outlined, {
'primary': classes.outlinedPrimary,
'secondary': classes.outlinedSecondary
}[color]], disabled && classes.disabled, small && classes.sizeSmall, clickable && classes.clickable, onDelete && classes.deletable),
"aria-disabled": disabled ? true : undefined,
tabIndex: clickable || onDelete ? 0 : undefined,
onClick: onClick,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp,
ref: handleRef
}, moreProps, other), avatar || icon, /*#__PURE__*/React.createElement("span", {
className: clsx(classes.label, small && classes.labelSmall)
}, label), deleteIcon);
});
process.env.NODE_ENV !== "production" ? Chip.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* Avatar element.
*/
avatar: PropTypes.element,
/**
* This prop isn't supported.
* Use the `component` prop if you need to change the children structure.
*/
children: unsupportedProp,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the chip will appear clickable, and will raise when pressed,
* even if the onClick prop is not defined.
* If false, the chip will not be clickable, even if onClick prop is defined.
* This can be used, for example,
* along with the component prop to indicate an anchor Chip is clickable.
*/
clickable: PropTypes.bool,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: PropTypes.oneOf(['default', 'primary', 'secondary']),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* Override the default delete icon element. Shown only if `onDelete` is set.
*/
deleteIcon: PropTypes.element,
/**
* If `true`, the chip should be displayed in a disabled state.
*/
disabled: PropTypes.bool,
/**
* Icon element.
*/
icon: PropTypes.element,
/**
* The content of the label.
*/
label: PropTypes.node,
/**
* @ignore
*/
onClick: PropTypes.func,
/**
* Callback function fired when the delete icon is clicked.
* If set, the delete icon will be shown.
*/
onDelete: PropTypes.func,
/**
* @ignore
*/
onKeyDown: PropTypes.func,
/**
* @ignore
*/
onKeyUp: PropTypes.func,
/**
* The size of the chip.
*/
size: PropTypes.oneOf(['medium', 'small']),
/**
* The variant to use.
*/
variant: PropTypes.oneOf(['default', 'outlined'])
} : void 0;
export default withStyles(styles, {
name: 'MuiChip'
})(Chip);

1
web/node_modules/@material-ui/core/es/Chip/index.js generated vendored Normal file
View file

@ -0,0 +1 @@
export { default } from './Chip';

View file

@ -0,0 +1,240 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { chainPropTypes } from '@material-ui/utils';
import withStyles from '../styles/withStyles';
import capitalize from '../utils/capitalize';
const SIZE = 44;
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
display: 'inline-block'
},
/* Styles applied to the root element if `variant="static"`. */
static: {
transition: theme.transitions.create('transform')
},
/* Styles applied to the root element if `variant="indeterminate"`. */
indeterminate: {
animation: '$circular-rotate 1.4s linear infinite'
},
/* Styles applied to the root element if `variant="determinate"`. */
determinate: {
transition: theme.transitions.create('transform')
},
/* Styles applied to the root element if `color="primary"`. */
colorPrimary: {
color: theme.palette.primary.main
},
/* Styles applied to the root element if `color="secondary"`. */
colorSecondary: {
color: theme.palette.secondary.main
},
/* Styles applied to the `svg` element. */
svg: {
display: 'block' // Keeps the progress centered
},
/* Styles applied to the `circle` svg path. */
circle: {
stroke: 'currentColor' // Use butt to follow the specification, by chance, it's already the default CSS value.
// strokeLinecap: 'butt',
},
/* Styles applied to the `circle` svg path if `variant="static"`. */
circleStatic: {
transition: theme.transitions.create('stroke-dashoffset')
},
/* Styles applied to the `circle` svg path if `variant="indeterminate"`. */
circleIndeterminate: {
animation: '$circular-dash 1.4s ease-in-out infinite',
// Some default value that looks fine waiting for the animation to kicks in.
strokeDasharray: '80px, 200px',
strokeDashoffset: '0px' // Add the unit to fix a Edge 16 and below bug.
},
/* Styles applied to the `circle` svg path if `variant="determinate"`. */
circleDeterminate: {
transition: theme.transitions.create('stroke-dashoffset')
},
'@keyframes circular-rotate': {
'0%': {
// Fix IE 11 wobbly
transformOrigin: '50% 50%'
},
'100%': {
transform: 'rotate(360deg)'
}
},
'@keyframes circular-dash': {
'0%': {
strokeDasharray: '1px, 200px',
strokeDashoffset: '0px'
},
'50%': {
strokeDasharray: '100px, 200px',
strokeDashoffset: '-15px'
},
'100%': {
strokeDasharray: '100px, 200px',
strokeDashoffset: '-125px'
}
},
/* Styles applied to the `circle` svg path if `disableShrink={true}`. */
circleDisableShrink: {
animation: 'none'
}
});
/**
* ## ARIA
*
* If the progress bar is describing the loading progress of a particular region of a page,
* you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
* attribute to `true` on that region until it has finished loading.
*/
const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress(props, ref) {
const {
classes,
className,
color = 'primary',
disableShrink = false,
size = 40,
style,
thickness = 3.6,
value = 0,
variant = 'indeterminate'
} = props,
other = _objectWithoutPropertiesLoose(props, ["classes", "className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"]);
const circleStyle = {};
const rootStyle = {};
const rootProps = {};
if (variant === 'determinate' || variant === 'static') {
const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
circleStyle.strokeDasharray = circumference.toFixed(3);
rootProps['aria-valuenow'] = Math.round(value);
circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
rootStyle.transform = 'rotate(-90deg)';
}
return /*#__PURE__*/React.createElement("div", _extends({
className: clsx(classes.root, className, color !== 'inherit' && classes[`color${capitalize(color)}`], {
'determinate': classes.determinate,
'indeterminate': classes.indeterminate,
'static': classes.static
}[variant]),
style: _extends({
width: size,
height: size
}, rootStyle, style),
ref: ref,
role: "progressbar"
}, rootProps, other), /*#__PURE__*/React.createElement("svg", {
className: classes.svg,
viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`
}, /*#__PURE__*/React.createElement("circle", {
className: clsx(classes.circle, disableShrink && classes.circleDisableShrink, {
'determinate': classes.circleDeterminate,
'indeterminate': classes.circleIndeterminate,
'static': classes.circleStatic
}[variant]),
style: circleStyle,
cx: SIZE,
cy: SIZE,
r: (SIZE - thickness) / 2,
fill: "none",
strokeWidth: thickness
})));
});
process.env.NODE_ENV !== "production" ? CircularProgress.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: PropTypes.oneOf(['inherit', 'primary', 'secondary']),
/**
* If `true`, the shrink animation is disabled.
* This only works if variant is `indeterminate`.
*/
disableShrink: chainPropTypes(PropTypes.bool, props => {
if (props.disableShrink && props.variant && props.variant !== 'indeterminate') {
return new Error('Material-UI: You have provided the `disableShrink` prop ' + 'with a variant other than `indeterminate`. This will have no effect.');
}
return null;
}),
/**
* The size of the circle.
* If using a number, the pixel unit is assumed.
* If using a string, you need to provide the CSS unit, e.g '3rem'.
*/
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* @ignore
*/
style: PropTypes.object,
/**
* The thickness of the circle.
*/
thickness: PropTypes.number,
/**
* The value of the progress indicator for the determinate variant.
* Value between 0 and 100.
*/
value: PropTypes.number,
/**
* The variant to use.
* Use indeterminate when there is no progress value.
*/
variant: chainPropTypes(PropTypes.oneOf(['determinate', 'indeterminate', 'static']), props => {
const {
variant
} = props;
if (variant === 'static') {
throw new Error('Material-UI: `variant="static"` was deprecated. Use `variant="determinate"` instead.');
}
return null;
})
} : void 0;
export default withStyles(styles, {
name: 'MuiCircularProgress',
flip: false
})(CircularProgress);

View file

@ -0,0 +1 @@
export { default } from './CircularProgress';

View file

@ -0,0 +1,183 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import ownerDocument from '../utils/ownerDocument';
import useForkRef from '../utils/useForkRef';
import useEventCallback from '../utils/useEventCallback';
import { elementAcceptingRef, exactProp } from '@material-ui/utils';
function mapEventPropToEvent(eventProp) {
return eventProp.substring(2).toLowerCase();
}
function clickedRootScrollbar(event) {
return document.documentElement.clientWidth < event.clientX || document.documentElement.clientHeight < event.clientY;
}
/**
* Listen for click events that occur somewhere in the document, outside of the element itself.
* For instance, if you need to hide a menu when people click anywhere else on your page.
*/
function ClickAwayListener(props) {
const {
children,
disableReactTree = false,
mouseEvent = 'onClick',
onClickAway,
touchEvent = 'onTouchEnd'
} = props;
const movedRef = React.useRef(false);
const nodeRef = React.useRef(null);
const activatedRef = React.useRef(false);
const syntheticEventRef = React.useRef(false);
React.useEffect(() => {
// Ensure that this component is not "activated" synchronously.
// https://github.com/facebook/react/issues/20074
setTimeout(() => {
activatedRef.current = true;
}, 0);
return () => {
activatedRef.current = false;
};
}, []); // can be removed once we drop support for non ref forwarding class components
const handleOwnRef = React.useCallback(instance => {
// #StrictMode ready
nodeRef.current = ReactDOM.findDOMNode(instance);
}, []);
const handleRef = useForkRef(children.ref, handleOwnRef); // The handler doesn't take event.defaultPrevented into account:
//
// event.preventDefault() is meant to stop default behaviours like
// clicking a checkbox to check it, hitting a button to submit a form,
// and hitting left arrow to move the cursor in a text input etc.
// Only special HTML elements have these default behaviors.
const handleClickAway = useEventCallback(event => {
// Given developers can stop the propagation of the synthetic event,
// we can only be confident with a positive value.
const insideReactTree = syntheticEventRef.current;
syntheticEventRef.current = false; // 1. IE 11 support, which trigger the handleClickAway even after the unbind
// 2. The child might render null.
// 3. Behave like a blur listener.
if (!activatedRef.current || !nodeRef.current || clickedRootScrollbar(event)) {
return;
} // Do not act if user performed touchmove
if (movedRef.current) {
movedRef.current = false;
return;
}
let insideDOM; // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
if (event.composedPath) {
insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
} else {
// TODO v6 remove dead logic https://caniuse.com/#search=composedPath.
const doc = ownerDocument(nodeRef.current);
insideDOM = !doc.documentElement.contains(event.target) || nodeRef.current.contains(event.target);
}
if (!insideDOM && (disableReactTree || !insideReactTree)) {
onClickAway(event);
}
}); // Keep track of mouse/touch events that bubbled up through the portal.
const createHandleSynthetic = handlerName => event => {
syntheticEventRef.current = true;
const childrenPropsHandler = children.props[handlerName];
if (childrenPropsHandler) {
childrenPropsHandler(event);
}
};
const childrenProps = {
ref: handleRef
};
if (touchEvent !== false) {
childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
}
React.useEffect(() => {
if (touchEvent !== false) {
const mappedTouchEvent = mapEventPropToEvent(touchEvent);
const doc = ownerDocument(nodeRef.current);
const handleTouchMove = () => {
movedRef.current = true;
};
doc.addEventListener(mappedTouchEvent, handleClickAway);
doc.addEventListener('touchmove', handleTouchMove);
return () => {
doc.removeEventListener(mappedTouchEvent, handleClickAway);
doc.removeEventListener('touchmove', handleTouchMove);
};
}
return undefined;
}, [handleClickAway, touchEvent]);
if (mouseEvent !== false) {
childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
}
React.useEffect(() => {
if (mouseEvent !== false) {
const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
const doc = ownerDocument(nodeRef.current);
doc.addEventListener(mappedMouseEvent, handleClickAway);
return () => {
doc.removeEventListener(mappedMouseEvent, handleClickAway);
};
}
return undefined;
}, [handleClickAway, mouseEvent]);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, childrenProps));
}
process.env.NODE_ENV !== "production" ? ClickAwayListener.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The wrapped element.
*/
children: elementAcceptingRef.isRequired,
/**
* If `true`, the React tree is ignored and only the DOM tree is considered.
* This prop changes how portaled elements are handled.
*/
disableReactTree: PropTypes.bool,
/**
* The mouse event to listen to. You can disable the listener by providing `false`.
*/
mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', false]),
/**
* Callback fired when a "click away" event is detected.
*/
onClickAway: PropTypes.func.isRequired,
/**
* The touch event to listen to. You can disable the listener by providing `false`.
*/
touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
} : void 0;
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line
ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
}
export default ClickAwayListener;

View file

@ -0,0 +1 @@
export { default } from './ClickAwayListener';

View file

@ -0,0 +1,317 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { chainPropTypes } from '@material-ui/utils';
import { Transition } from 'react-transition-group';
import withStyles from '../styles/withStyles';
import { duration } from '../styles/transitions';
import deprecatedPropType from '../utils/deprecatedPropType';
import { getTransitionProps } from '../transitions/utils';
import useTheme from '../styles/useTheme';
import { useForkRef } from '../utils';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
height: 0,
overflow: 'hidden',
transition: theme.transitions.create('height')
},
/* Styles applied to the root element when the transition has entered. */
entered: {
height: 'auto',
overflow: 'visible'
},
/* Styles applied to the root element when the transition has exited and `collapsedSize` != 0px. */
hidden: {
visibility: 'hidden'
},
/* Styles applied to the outer wrapper element. */
wrapper: {
// Hack to get children with a negative margin to not falsify the height computation.
display: 'flex'
},
/* Styles applied to the inner wrapper element. */
wrapperInner: {
width: '100%'
}
});
/**
* The Collapse transition is used by the
* [Vertical Stepper](/components/steppers/#vertical-stepper) StepContent component.
* It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
*/
const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(props, ref) {
const {
children,
classes,
className,
collapsedHeight,
collapsedSize: collapsedSizeProp = '0px',
component: Component = 'div',
disableStrictModeCompat = false,
in: inProp,
onEnter,
onEntered,
onEntering,
onExit,
onExited,
onExiting,
style,
timeout = duration.standard,
// eslint-disable-next-line react/prop-types
TransitionComponent = Transition
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "collapsedHeight", "collapsedSize", "component", "disableStrictModeCompat", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
const theme = useTheme();
const timer = React.useRef();
const wrapperRef = React.useRef(null);
const autoTransitionDuration = React.useRef();
const collapsedSize = typeof (collapsedHeight || collapsedSizeProp) === 'number' ? `${collapsedHeight || collapsedSizeProp}px` : collapsedHeight || collapsedSizeProp;
React.useEffect(() => {
return () => {
clearTimeout(timer.current);
};
}, []);
const enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;
const nodeRef = React.useRef(null);
const handleRef = useForkRef(ref, enableStrictModeCompat ? nodeRef : undefined);
const normalizedTransitionCallback = callback => (nodeOrAppearing, maybeAppearing) => {
if (callback) {
const [node, isAppearing] = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing]; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
if (isAppearing === undefined) {
callback(node);
} else {
callback(node, isAppearing);
}
}
};
const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
node.style.height = collapsedSize;
if (onEnter) {
onEnter(node, isAppearing);
}
});
const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
const wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
const {
duration: transitionDuration
} = getTransitionProps({
style,
timeout
}, {
mode: 'enter'
});
if (timeout === 'auto') {
const duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);
node.style.transitionDuration = `${duration2}ms`;
autoTransitionDuration.current = duration2;
} else {
node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
}
node.style.height = `${wrapperHeight}px`;
if (onEntering) {
onEntering(node, isAppearing);
}
});
const handleEntered = normalizedTransitionCallback((node, isAppearing) => {
node.style.height = 'auto';
if (onEntered) {
onEntered(node, isAppearing);
}
});
const handleExit = normalizedTransitionCallback(node => {
const wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
node.style.height = `${wrapperHeight}px`;
if (onExit) {
onExit(node);
}
});
const handleExited = normalizedTransitionCallback(onExited);
const handleExiting = normalizedTransitionCallback(node => {
const wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
const {
duration: transitionDuration
} = getTransitionProps({
style,
timeout
}, {
mode: 'exit'
});
if (timeout === 'auto') {
const duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);
node.style.transitionDuration = `${duration2}ms`;
autoTransitionDuration.current = duration2;
} else {
node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
}
node.style.height = collapsedSize;
if (onExiting) {
onExiting(node);
}
});
const addEndListener = (nodeOrNext, maybeNext) => {
const next = enableStrictModeCompat ? nodeOrNext : maybeNext;
if (timeout === 'auto') {
timer.current = setTimeout(next, autoTransitionDuration.current || 0);
}
};
return /*#__PURE__*/React.createElement(TransitionComponent, _extends({
in: inProp,
onEnter: handleEnter,
onEntered: handleEntered,
onEntering: handleEntering,
onExit: handleExit,
onExited: handleExited,
onExiting: handleExiting,
addEndListener: addEndListener,
nodeRef: enableStrictModeCompat ? nodeRef : undefined,
timeout: timeout === 'auto' ? null : timeout
}, other), (state, childProps) => /*#__PURE__*/React.createElement(Component, _extends({
className: clsx(classes.root, classes.container, className, {
'entered': classes.entered,
'exited': !inProp && collapsedSize === '0px' && classes.hidden
}[state]),
style: _extends({
minHeight: collapsedSize
}, style),
ref: handleRef
}, childProps), /*#__PURE__*/React.createElement("div", {
className: classes.wrapper,
ref: wrapperRef
}, /*#__PURE__*/React.createElement("div", {
className: classes.wrapperInner
}, children))));
});
process.env.NODE_ENV !== "production" ? Collapse.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content node to be collapsed.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: chainPropTypes(PropTypes.object, props => {
if (props.classes && props.classes.container) {
throw new Error(['Material-UI: the classes.container key is deprecated.', 'Use `classes.root` instead', 'The name of the pseudo-class was changed for consistency.'].join('\n'));
}
return null;
}),
/**
* @ignore
*/
className: PropTypes.string,
/**
* The height of the container when collapsed.
* @deprecated The prop was renamed to support the addition of horizontal orientation, use `collapsedSize` instead.
*/
collapsedHeight: deprecatedPropType(PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 'The prop was renamed to support the vertical orientation, use `collapsedSize` instead'),
/**
* The height of the container when collapsed.
*/
collapsedSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* Enable this prop if you encounter 'Function components cannot be given refs',
* use `unstable_createStrictModeTheme`,
* and can't forward the ref in the passed `Component`.
*/
disableStrictModeCompat: PropTypes.bool,
/**
* If `true`, the component will transition in.
*/
in: PropTypes.bool,
/**
* @ignore
*/
onEnter: PropTypes.func,
/**
* @ignore
*/
onEntered: PropTypes.func,
/**
* @ignore
*/
onEntering: PropTypes.func,
/**
* @ignore
*/
onExit: PropTypes.func,
/**
* @ignore
*/
onExited: PropTypes.func,
/**
* @ignore
*/
onExiting: PropTypes.func,
/**
* @ignore
*/
style: PropTypes.object,
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*
* Set to 'auto' to automatically calculate transition time based on height.
*/
timeout: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.shape({
appear: PropTypes.number,
enter: PropTypes.number,
exit: PropTypes.number
})])
} : void 0;
Collapse.muiSupportAuto = true;
export default withStyles(styles, {
name: 'MuiCollapse'
})(Collapse);

View file

@ -0,0 +1 @@
export { default } from './Collapse';

View file

@ -0,0 +1,149 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import capitalize from '../utils/capitalize';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
width: '100%',
marginLeft: 'auto',
boxSizing: 'border-box',
marginRight: 'auto',
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
display: 'block',
// Fix IE 11 layout when used with main.
[theme.breakpoints.up('sm')]: {
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3)
}
},
/* Styles applied to the root element if `disableGutters={true}`. */
disableGutters: {
paddingLeft: 0,
paddingRight: 0
},
/* Styles applied to the root element if `fixed={true}`. */
fixed: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
const value = theme.breakpoints.values[breakpoint];
if (value !== 0) {
acc[theme.breakpoints.up(breakpoint)] = {
maxWidth: value
};
}
return acc;
}, {}),
/* Styles applied to the root element if `maxWidth="xs"`. */
maxWidthXs: {
[theme.breakpoints.up('xs')]: {
maxWidth: Math.max(theme.breakpoints.values.xs, 444)
}
},
/* Styles applied to the root element if `maxWidth="sm"`. */
maxWidthSm: {
[theme.breakpoints.up('sm')]: {
maxWidth: theme.breakpoints.values.sm
}
},
/* Styles applied to the root element if `maxWidth="md"`. */
maxWidthMd: {
[theme.breakpoints.up('md')]: {
maxWidth: theme.breakpoints.values.md
}
},
/* Styles applied to the root element if `maxWidth="lg"`. */
maxWidthLg: {
[theme.breakpoints.up('lg')]: {
maxWidth: theme.breakpoints.values.lg
}
},
/* Styles applied to the root element if `maxWidth="xl"`. */
maxWidthXl: {
[theme.breakpoints.up('xl')]: {
maxWidth: theme.breakpoints.values.xl
}
}
});
const Container = /*#__PURE__*/React.forwardRef(function Container(props, ref) {
const {
classes,
className,
component: Component = 'div',
disableGutters = false,
fixed = false,
maxWidth = 'lg'
} = props,
other = _objectWithoutPropertiesLoose(props, ["classes", "className", "component", "disableGutters", "fixed", "maxWidth"]);
return /*#__PURE__*/React.createElement(Component, _extends({
className: clsx(classes.root, className, fixed && classes.fixed, disableGutters && classes.disableGutters, maxWidth !== false && classes[`maxWidth${capitalize(String(maxWidth))}`]),
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? Container.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* @ignore
*/
children: PropTypes
/* @typescript-to-proptypes-ignore */
.node.isRequired,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* If `true`, the left and right padding is removed.
*/
disableGutters: PropTypes.bool,
/**
* Set the max-width to match the min-width of the current breakpoint.
* This is useful if you'd prefer to design for a fixed set of sizes
* instead of trying to accommodate a fully fluid viewport.
* It's fluid by default.
*/
fixed: PropTypes.bool,
/**
* Determine the max-width of the container.
* The container width grows with the size of the screen.
* Set to `false` to disable `maxWidth`.
*/
maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false])
} : void 0;
export default withStyles(styles, {
name: 'MuiContainer'
})(Container);

View file

@ -0,0 +1 @@
export { default } from './Container';

View file

@ -0,0 +1,84 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import PropTypes from 'prop-types';
import withStyles from '../styles/withStyles';
import { exactProp } from '@material-ui/utils';
export const html = {
WebkitFontSmoothing: 'antialiased',
// Antialiasing.
MozOsxFontSmoothing: 'grayscale',
// Antialiasing.
// Change from `box-sizing: content-box` so that `width`
// is not affected by `padding` or `border`.
boxSizing: 'border-box'
};
export const body = theme => _extends({
color: theme.palette.text.primary
}, theme.typography.body2, {
backgroundColor: theme.palette.background.default,
'@media print': {
// Save printer ink.
backgroundColor: theme.palette.common.white
}
});
export const styles = theme => ({
'@global': {
html,
'*, *::before, *::after': {
boxSizing: 'inherit'
},
'strong, b': {
fontWeight: theme.typography.fontWeightBold
},
body: _extends({
margin: 0
}, body(theme), {
// Add support for document.body.requestFullScreen().
// Other elements, if background transparent, are not supported.
'&::backdrop': {
backgroundColor: theme.palette.background.default
}
})
}
});
/**
* Kickstart an elegant, consistent, and simple baseline to build upon.
*/
function CssBaseline(props) {
/* eslint-disable no-unused-vars */
const {
children = null,
classes
} = props;
/* eslint-enable no-unused-vars */
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
}
process.env.NODE_ENV !== "production" ? CssBaseline.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* You can wrap a node.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object
} : void 0;
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line
CssBaseline['propTypes' + ''] = exactProp(CssBaseline.propTypes);
}
export default withStyles(styles, {
name: 'MuiCssBaseline'
})(CssBaseline);

View file

@ -0,0 +1 @@
export { default } from './CssBaseline';

430
web/node_modules/@material-ui/core/es/Dialog/Dialog.js generated vendored Normal file
View file

@ -0,0 +1,430 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import capitalize from '../utils/capitalize';
import deprecatedPropType from '../utils/deprecatedPropType';
import Modal from '../Modal';
import Backdrop from '../Backdrop';
import Fade from '../Fade';
import { duration } from '../styles/transitions';
import Paper from '../Paper';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
'@media print': {
// Use !important to override the Modal inline-style.
position: 'absolute !important'
}
},
/* Styles applied to the container element if `scroll="paper"`. */
scrollPaper: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
},
/* Styles applied to the container element if `scroll="body"`. */
scrollBody: {
overflowY: 'auto',
overflowX: 'hidden',
textAlign: 'center',
'&:after': {
content: '""',
display: 'inline-block',
verticalAlign: 'middle',
height: '100%',
width: '0'
}
},
/* Styles applied to the container element. */
container: {
height: '100%',
'@media print': {
height: 'auto'
},
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0
},
/* Styles applied to the `Paper` component. */
paper: {
margin: 32,
position: 'relative',
overflowY: 'auto',
// Fix IE 11 issue, to remove at some point.
'@media print': {
overflowY: 'visible',
boxShadow: 'none'
}
},
/* Styles applied to the `Paper` component if `scroll="paper"`. */
paperScrollPaper: {
display: 'flex',
flexDirection: 'column',
maxHeight: 'calc(100% - 64px)'
},
/* Styles applied to the `Paper` component if `scroll="body"`. */
paperScrollBody: {
display: 'inline-block',
verticalAlign: 'middle',
textAlign: 'left' // 'initial' doesn't work on IE 11
},
/* Styles applied to the `Paper` component if `maxWidth=false`. */
paperWidthFalse: {
maxWidth: 'calc(100% - 64px)'
},
/* Styles applied to the `Paper` component if `maxWidth="xs"`. */
paperWidthXs: {
maxWidth: Math.max(theme.breakpoints.values.xs, 444),
'&$paperScrollBody': {
[theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2)]: {
maxWidth: 'calc(100% - 64px)'
}
}
},
/* Styles applied to the `Paper` component if `maxWidth="sm"`. */
paperWidthSm: {
maxWidth: theme.breakpoints.values.sm,
'&$paperScrollBody': {
[theme.breakpoints.down(theme.breakpoints.values.sm + 32 * 2)]: {
maxWidth: 'calc(100% - 64px)'
}
}
},
/* Styles applied to the `Paper` component if `maxWidth="md"`. */
paperWidthMd: {
maxWidth: theme.breakpoints.values.md,
'&$paperScrollBody': {
[theme.breakpoints.down(theme.breakpoints.values.md + 32 * 2)]: {
maxWidth: 'calc(100% - 64px)'
}
}
},
/* Styles applied to the `Paper` component if `maxWidth="lg"`. */
paperWidthLg: {
maxWidth: theme.breakpoints.values.lg,
'&$paperScrollBody': {
[theme.breakpoints.down(theme.breakpoints.values.lg + 32 * 2)]: {
maxWidth: 'calc(100% - 64px)'
}
}
},
/* Styles applied to the `Paper` component if `maxWidth="xl"`. */
paperWidthXl: {
maxWidth: theme.breakpoints.values.xl,
'&$paperScrollBody': {
[theme.breakpoints.down(theme.breakpoints.values.xl + 32 * 2)]: {
maxWidth: 'calc(100% - 64px)'
}
}
},
/* Styles applied to the `Paper` component if `fullWidth={true}`. */
paperFullWidth: {
width: 'calc(100% - 64px)'
},
/* Styles applied to the `Paper` component if `fullScreen={true}`. */
paperFullScreen: {
margin: 0,
width: '100%',
maxWidth: '100%',
height: '100%',
maxHeight: 'none',
borderRadius: 0,
'&$paperScrollBody': {
margin: 0,
maxWidth: '100%'
}
}
});
const defaultTransitionDuration = {
enter: duration.enteringScreen,
exit: duration.leavingScreen
};
/**
* Dialogs are overlaid modal paper based components with a backdrop.
*/
const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
const {
BackdropProps,
children,
classes,
className,
disableBackdropClick = false,
disableEscapeKeyDown = false,
fullScreen = false,
fullWidth = false,
maxWidth = 'sm',
onBackdropClick,
onClose,
onEnter,
onEntered,
onEntering,
onEscapeKeyDown,
onExit,
onExited,
onExiting,
open,
PaperComponent = Paper,
PaperProps = {},
scroll = 'paper',
TransitionComponent = Fade,
transitionDuration = defaultTransitionDuration,
TransitionProps,
'aria-describedby': ariaDescribedby,
'aria-labelledby': ariaLabelledby
} = props,
other = _objectWithoutPropertiesLoose(props, ["BackdropProps", "children", "classes", "className", "disableBackdropClick", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClose", "onEnter", "onEntered", "onEntering", "onEscapeKeyDown", "onExit", "onExited", "onExiting", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps", "aria-describedby", "aria-labelledby"]);
const mouseDownTarget = React.useRef();
const handleMouseDown = event => {
mouseDownTarget.current = event.target;
};
const handleBackdropClick = event => {
// Ignore the events not coming from the "backdrop"
// We don't want to close the dialog when clicking the dialog content.
if (event.target !== event.currentTarget) {
return;
} // Make sure the event starts and ends on the same DOM element.
if (event.target !== mouseDownTarget.current) {
return;
}
mouseDownTarget.current = null;
if (onBackdropClick) {
onBackdropClick(event);
}
if (!disableBackdropClick && onClose) {
onClose(event, 'backdropClick');
}
};
return /*#__PURE__*/React.createElement(Modal, _extends({
className: clsx(classes.root, className),
BackdropComponent: Backdrop,
BackdropProps: _extends({
transitionDuration
}, BackdropProps),
closeAfterTransition: true
}, disableBackdropClick ? {
disableBackdropClick
} : {}, {
disableEscapeKeyDown: disableEscapeKeyDown,
onEscapeKeyDown: onEscapeKeyDown,
onClose: onClose,
open: open,
ref: ref
}, other), /*#__PURE__*/React.createElement(TransitionComponent, _extends({
appear: true,
in: open,
timeout: transitionDuration,
onEnter: onEnter,
onEntering: onEntering,
onEntered: onEntered,
onExit: onExit,
onExiting: onExiting,
onExited: onExited,
role: "none presentation"
}, TransitionProps), /*#__PURE__*/React.createElement("div", {
className: clsx(classes.container, classes[`scroll${capitalize(scroll)}`]),
onMouseUp: handleBackdropClick,
onMouseDown: handleMouseDown
}, /*#__PURE__*/React.createElement(PaperComponent, _extends({
elevation: 24,
role: "dialog",
"aria-describedby": ariaDescribedby,
"aria-labelledby": ariaLabelledby
}, PaperProps, {
className: clsx(classes.paper, classes[`paperScroll${capitalize(scroll)}`], classes[`paperWidth${capitalize(String(maxWidth))}`], PaperProps.className, fullScreen && classes.paperFullScreen, fullWidth && classes.paperFullWidth)
}), children))));
});
process.env.NODE_ENV !== "production" ? Dialog.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The id(s) of the element(s) that describe the dialog.
*/
'aria-describedby': PropTypes.string,
/**
* The id(s) of the element(s) that label the dialog.
*/
'aria-labelledby': PropTypes.string,
/**
* @ignore
*/
BackdropProps: PropTypes.object,
/**
* Dialog children, usually the included sub-components.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, clicking the backdrop will not fire the `onClose` callback.
* @deprecated Use the onClose prop with the `reason` argument to filter the `backdropClick` events.
*/
disableBackdropClick: deprecatedPropType(PropTypes.bool, 'Use the onClose prop with the `reason` argument to filter the `backdropClick` events.'),
/**
* If `true`, hitting escape will not fire the `onClose` callback.
*/
disableEscapeKeyDown: PropTypes.bool,
/**
* If `true`, the dialog will be full-screen
*/
fullScreen: PropTypes.bool,
/**
* If `true`, the dialog stretches to `maxWidth`.
*
* Notice that the dialog width grow is limited by the default margin.
*/
fullWidth: PropTypes.bool,
/**
* Determine the max-width of the dialog.
* The dialog width grows with the size of the screen.
* Set to `false` to disable `maxWidth`.
*/
maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]),
/**
* Callback fired when the backdrop is clicked.
* @deprecated Use the onClose prop with the `reason` argument to handle the `backdropClick` events.
*/
onBackdropClick: deprecatedPropType(PropTypes.func, 'Use the onClose prop with the `reason` argument to handle the `backdropClick` events.'),
/**
* Callback fired when the component requests to be closed.
*
* @param {object} event The event source of the callback.
* @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
*/
onClose: PropTypes.func,
/**
* Callback fired before the dialog enters.
* @deprecated Use the `TransitionProps` prop instead.
*/
onEnter: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
/**
* Callback fired when the dialog has entered.
* @deprecated Use the `TransitionProps` prop instead.
*/
onEntered: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
/**
* Callback fired when the dialog is entering.
* @deprecated Use the `TransitionProps` prop instead.
*/
onEntering: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
/**
* Callback fired when the escape key is pressed,
* `disableKeyboard` is false and the modal is in focus.
* @deprecated Use the onClose prop with the `reason` argument to handle the `escapeKeyDown` events.
*/
onEscapeKeyDown: deprecatedPropType(PropTypes.func, 'Use the onClose prop with the `reason` argument to handle the `escapeKeyDown` events.'),
/**
* Callback fired before the dialog exits.
* @deprecated Use the `TransitionProps` prop instead.
*/
onExit: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
/**
* Callback fired when the dialog has exited.
* @deprecated Use the `TransitionProps` prop instead.
*/
onExited: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
/**
* Callback fired when the dialog is exiting.
* @deprecated Use the `TransitionProps` prop instead.
*/
onExiting: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'),
/**
* If `true`, the Dialog is open.
*/
open: PropTypes.bool.isRequired,
/**
* The component used to render the body of the dialog.
*/
PaperComponent: PropTypes.elementType,
/**
* Props applied to the [`Paper`](/api/paper/) element.
*/
PaperProps: PropTypes.object,
/**
* Determine the container for scrolling the dialog.
*/
scroll: PropTypes.oneOf(['body', 'paper']),
/**
* The component used for the transition.
* [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
*/
TransitionComponent: PropTypes.elementType,
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*/
transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
appear: PropTypes.number,
enter: PropTypes.number,
exit: PropTypes.number
})]),
/**
* Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.
*/
TransitionProps: PropTypes.object
} : void 0;
export default withStyles(styles, {
name: 'MuiDialog'
})(Dialog);

View file

@ -0,0 +1 @@
export { default } from './Dialog';

View file

@ -0,0 +1,66 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
export const styles = {
/* Styles applied to the root element. */
root: {
display: 'flex',
alignItems: 'center',
padding: 8,
justifyContent: 'flex-end',
flex: '0 0 auto'
},
/* Styles applied to the root element if `disableSpacing={false}`. */
spacing: {
'& > :not(:first-child)': {
marginLeft: 8
}
}
};
const DialogActions = /*#__PURE__*/React.forwardRef(function DialogActions(props, ref) {
const {
disableSpacing = false,
classes,
className
} = props,
other = _objectWithoutPropertiesLoose(props, ["disableSpacing", "classes", "className"]);
return /*#__PURE__*/React.createElement("div", _extends({
className: clsx(classes.root, className, !disableSpacing && classes.spacing),
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? DialogActions.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the actions do not have additional margin.
*/
disableSpacing: PropTypes.bool
} : void 0;
export default withStyles(styles, {
name: 'MuiDialogActions'
})(DialogActions);

View file

@ -0,0 +1 @@
export { default } from './DialogActions';

View file

@ -0,0 +1,70 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
flex: '1 1 auto',
WebkitOverflowScrolling: 'touch',
// Add iOS momentum scrolling.
overflowY: 'auto',
padding: '8px 24px',
'&:first-child': {
// dialog without title
paddingTop: 20
}
},
/* Styles applied to the root element if `dividers={true}`. */
dividers: {
padding: '16px 24px',
borderTop: `1px solid ${theme.palette.divider}`,
borderBottom: `1px solid ${theme.palette.divider}`
}
});
const DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
const {
classes,
className,
dividers = false
} = props,
other = _objectWithoutPropertiesLoose(props, ["classes", "className", "dividers"]);
return /*#__PURE__*/React.createElement("div", _extends({
className: clsx(classes.root, className, dividers && classes.dividers),
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? DialogContent.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* Display the top and bottom dividers.
*/
dividers: PropTypes.bool
} : void 0;
export default withStyles(styles, {
name: 'MuiDialogContent'
})(DialogContent);

View file

@ -0,0 +1 @@
export { default } from './DialogContent';

View file

@ -0,0 +1,39 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import PropTypes from 'prop-types';
import withStyles from '../styles/withStyles';
import Typography from '../Typography';
export const styles = {
/* Styles applied to the root element. */
root: {
marginBottom: 12
}
};
const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentText(props, ref) {
return /*#__PURE__*/React.createElement(Typography, _extends({
component: "p",
variant: "body1",
color: "textSecondary",
ref: ref
}, props));
});
process.env.NODE_ENV !== "production" ? DialogContentText.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object
} : void 0;
export default withStyles(styles, {
name: 'MuiDialogContentText'
})(DialogContentText);

View file

@ -0,0 +1 @@
export { default } from './DialogContentText';

View file

@ -0,0 +1,63 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import Typography from '../Typography';
export const styles = {
/* Styles applied to the root element. */
root: {
margin: 0,
padding: '16px 24px',
flex: '0 0 auto'
}
};
const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
const {
children,
classes,
className,
disableTypography = false
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "disableTypography"]);
return /*#__PURE__*/React.createElement("div", _extends({
className: clsx(classes.root, className),
ref: ref
}, other), disableTypography ? children : /*#__PURE__*/React.createElement(Typography, {
component: "h2",
variant: "h6"
}, children));
});
process.env.NODE_ENV !== "production" ? DialogTitle.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the children won't be wrapped by a typography component.
* For instance, this can be useful to render an h4 instead of the default h2.
*/
disableTypography: PropTypes.bool
} : void 0;
export default withStyles(styles, {
name: 'MuiDialogTitle'
})(DialogTitle);

View file

@ -0,0 +1 @@
export { default } from './DialogTitle';

View file

@ -0,0 +1,138 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import { alpha } from '../styles/colorManipulator';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
height: 1,
margin: 0,
// Reset browser default style.
border: 'none',
flexShrink: 0,
backgroundColor: theme.palette.divider
},
/* Styles applied to the root element if `absolute={true}`. */
absolute: {
position: 'absolute',
bottom: 0,
left: 0,
width: '100%'
},
/* Styles applied to the root element if `variant="inset"`. */
inset: {
marginLeft: 72
},
/* Styles applied to the root element if `light={true}`. */
light: {
backgroundColor: alpha(theme.palette.divider, 0.08)
},
/* Styles applied to the root element if `variant="middle"`. */
middle: {
marginLeft: theme.spacing(2),
marginRight: theme.spacing(2)
},
/* Styles applied to the root element if `orientation="vertical"`. */
vertical: {
height: '100%',
width: 1
},
/* Styles applied to the root element if `flexItem={true}`. */
flexItem: {
alignSelf: 'stretch',
height: 'auto'
}
});
const Divider = /*#__PURE__*/React.forwardRef(function Divider(props, ref) {
const {
absolute = false,
classes,
className,
component: Component = 'hr',
flexItem = false,
light = false,
orientation = 'horizontal',
role = Component !== 'hr' ? 'separator' : undefined,
variant = 'fullWidth'
} = props,
other = _objectWithoutPropertiesLoose(props, ["absolute", "classes", "className", "component", "flexItem", "light", "orientation", "role", "variant"]);
return /*#__PURE__*/React.createElement(Component, _extends({
className: clsx(classes.root, className, variant !== 'fullWidth' && classes[variant], absolute && classes.absolute, flexItem && classes.flexItem, light && classes.light, orientation === 'vertical' && classes.vertical),
role: role,
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? Divider.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* Absolutely position the element.
*/
absolute: PropTypes.bool,
/**
* @ignore
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* If `true`, a vertical divider will have the correct height when used in flex container.
* (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)
*/
flexItem: PropTypes.bool,
/**
* If `true`, the divider will have a lighter color.
*/
light: PropTypes.bool,
/**
* The divider orientation.
*/
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
/**
* @ignore
*/
role: PropTypes.string,
/**
* The variant to use.
*/
variant: PropTypes.oneOf(['fullWidth', 'inset', 'middle'])
} : void 0;
export default withStyles(styles, {
name: 'MuiDivider'
})(Divider);

View file

@ -0,0 +1 @@
export { default } from './Divider';

272
web/node_modules/@material-ui/core/es/Drawer/Drawer.js generated vendored Normal file
View file

@ -0,0 +1,272 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import Modal from '../Modal';
import Backdrop from '../Backdrop';
import withStyles from '../styles/withStyles';
import Slide from '../Slide';
import Paper from '../Paper';
import capitalize from '../utils/capitalize';
import { duration } from '../styles/transitions';
import useTheme from '../styles/useTheme';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {},
/* Styles applied to the root element if `variant="permanent or persistent"`. */
docked: {
flex: '0 0 auto'
},
/* Styles applied to the `Paper` component. */
paper: {
overflowY: 'auto',
display: 'flex',
flexDirection: 'column',
height: '100%',
flex: '1 0 auto',
zIndex: theme.zIndex.drawer,
WebkitOverflowScrolling: 'touch',
// Add iOS momentum scrolling.
// temporary style
position: 'fixed',
top: 0,
// We disable the focus ring for mouse, touch and keyboard users.
// At some point, it would be better to keep it for keyboard users.
// :focus-ring CSS pseudo-class will help.
outline: 0
},
/* Styles applied to the `Paper` component if `anchor="left"`. */
paperAnchorLeft: {
left: 0,
right: 'auto'
},
/* Styles applied to the `Paper` component if `anchor="right"`. */
paperAnchorRight: {
left: 'auto',
right: 0
},
/* Styles applied to the `Paper` component if `anchor="top"`. */
paperAnchorTop: {
top: 0,
left: 0,
bottom: 'auto',
right: 0,
height: 'auto',
maxHeight: '100%'
},
/* Styles applied to the `Paper` component if `anchor="bottom"`. */
paperAnchorBottom: {
top: 'auto',
left: 0,
bottom: 0,
right: 0,
height: 'auto',
maxHeight: '100%'
},
/* Styles applied to the `Paper` component if `anchor="left"` and `variant` is not "temporary". */
paperAnchorDockedLeft: {
borderRight: `1px solid ${theme.palette.divider}`
},
/* Styles applied to the `Paper` component if `anchor="top"` and `variant` is not "temporary". */
paperAnchorDockedTop: {
borderBottom: `1px solid ${theme.palette.divider}`
},
/* Styles applied to the `Paper` component if `anchor="right"` and `variant` is not "temporary". */
paperAnchorDockedRight: {
borderLeft: `1px solid ${theme.palette.divider}`
},
/* Styles applied to the `Paper` component if `anchor="bottom"` and `variant` is not "temporary". */
paperAnchorDockedBottom: {
borderTop: `1px solid ${theme.palette.divider}`
},
/* Styles applied to the `Modal` component. */
modal: {}
});
const oppositeDirection = {
left: 'right',
right: 'left',
top: 'down',
bottom: 'up'
};
export function isHorizontal(anchor) {
return ['left', 'right'].indexOf(anchor) !== -1;
}
export function getAnchor(theme, anchor) {
return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
}
const defaultTransitionDuration = {
enter: duration.enteringScreen,
exit: duration.leavingScreen
};
/**
* The props of the [Modal](/api/modal/) component are available
* when `variant="temporary"` is set.
*/
const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(props, ref) {
const {
anchor: anchorProp = 'left',
BackdropProps,
children,
classes,
className,
elevation = 16,
ModalProps: {
BackdropProps: BackdropPropsProp
} = {},
onClose,
open = false,
PaperProps = {},
SlideProps,
// eslint-disable-next-line react/prop-types
TransitionComponent = Slide,
transitionDuration = defaultTransitionDuration,
variant = 'temporary'
} = props,
ModalProps = _objectWithoutPropertiesLoose(props.ModalProps, ["BackdropProps"]),
other = _objectWithoutPropertiesLoose(props, ["anchor", "BackdropProps", "children", "classes", "className", "elevation", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"]);
const theme = useTheme(); // Let's assume that the Drawer will always be rendered on user space.
// We use this state is order to skip the appear transition during the
// initial mount of the component.
const mounted = React.useRef(false);
React.useEffect(() => {
mounted.current = true;
}, []);
const anchor = getAnchor(theme, anchorProp);
const drawer = /*#__PURE__*/React.createElement(Paper, _extends({
elevation: variant === 'temporary' ? elevation : 0,
square: true
}, PaperProps, {
className: clsx(classes.paper, classes[`paperAnchor${capitalize(anchor)}`], PaperProps.className, variant !== 'temporary' && classes[`paperAnchorDocked${capitalize(anchor)}`])
}), children);
if (variant === 'permanent') {
return /*#__PURE__*/React.createElement("div", _extends({
className: clsx(classes.root, classes.docked, className),
ref: ref
}, other), drawer);
}
const slidingDrawer = /*#__PURE__*/React.createElement(TransitionComponent, _extends({
in: open,
direction: oppositeDirection[anchor],
timeout: transitionDuration,
appear: mounted.current
}, SlideProps), drawer);
if (variant === 'persistent') {
return /*#__PURE__*/React.createElement("div", _extends({
className: clsx(classes.root, classes.docked, className),
ref: ref
}, other), slidingDrawer);
} // variant === temporary
return /*#__PURE__*/React.createElement(Modal, _extends({
BackdropProps: _extends({}, BackdropProps, BackdropPropsProp, {
transitionDuration
}),
BackdropComponent: Backdrop,
className: clsx(classes.root, classes.modal, className),
open: open,
onClose: onClose,
ref: ref
}, other, ModalProps), slidingDrawer);
});
process.env.NODE_ENV !== "production" ? Drawer.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* Side from which the drawer will appear.
*/
anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
/**
* @ignore
*/
BackdropProps: PropTypes.object,
/**
* The contents of the drawer.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The elevation of the drawer.
*/
elevation: PropTypes.number,
/**
* Props applied to the [`Modal`](/api/modal/) element.
*/
ModalProps: PropTypes.object,
/**
* Callback fired when the component requests to be closed.
*
* @param {object} event The event source of the callback.
*/
onClose: PropTypes.func,
/**
* If `true`, the drawer is open.
*/
open: PropTypes.bool,
/**
* Props applied to the [`Paper`](/api/paper/) element.
*/
PaperProps: PropTypes.object,
/**
* Props applied to the [`Slide`](/api/slide/) element.
*/
SlideProps: PropTypes.object,
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*/
transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
appear: PropTypes.number,
enter: PropTypes.number,
exit: PropTypes.number
})]),
/**
* The variant to use.
*/
variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary'])
} : void 0;
export default withStyles(styles, {
name: 'MuiDrawer',
flip: false
})(Drawer);

View file

@ -0,0 +1 @@
export { default } from './Drawer';

View file

@ -0,0 +1,225 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import { isFragment } from 'react-is';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { chainPropTypes } from '@material-ui/utils';
import Collapse from '../Collapse';
import Paper from '../Paper';
import withStyles from '../styles/withStyles';
import ExpansionPanelContext from './ExpansionPanelContext';
import useControlled from '../utils/useControlled';
export const styles = theme => {
const transition = {
duration: theme.transitions.duration.shortest
};
return {
/* Styles applied to the root element. */
root: {
position: 'relative',
transition: theme.transitions.create(['margin'], transition),
'&:before': {
position: 'absolute',
left: 0,
top: -1,
right: 0,
height: 1,
content: '""',
opacity: 1,
backgroundColor: theme.palette.divider,
transition: theme.transitions.create(['opacity', 'background-color'], transition)
},
'&:first-child': {
'&:before': {
display: 'none'
}
},
'&$expanded': {
margin: '16px 0',
'&:first-child': {
marginTop: 0
},
'&:last-child': {
marginBottom: 0
},
'&:before': {
opacity: 0
}
},
'&$expanded + &': {
'&:before': {
display: 'none'
}
},
'&$disabled': {
backgroundColor: theme.palette.action.disabledBackground
}
},
/* Styles applied to the root element if `square={false}`. */
rounded: {
borderRadius: 0,
'&:first-child': {
borderTopLeftRadius: theme.shape.borderRadius,
borderTopRightRadius: theme.shape.borderRadius
},
'&:last-child': {
borderBottomLeftRadius: theme.shape.borderRadius,
borderBottomRightRadius: theme.shape.borderRadius,
// Fix a rendering issue on Edge
'@supports (-ms-ime-align: auto)': {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
}
}
},
/* Styles applied to the root element if `expanded={true}`. */
expanded: {},
/* Styles applied to the root element if `disabled={true}`. */
disabled: {}
};
};
let warnedOnce = false;
/**
* The ExpansionPanel component was renamed to Accordion to use a more common naming convention.
*
* You should use `import { Accordion } from '@material-ui/core'`
* or `import Accordion from '@material-ui/core/Accordion'`.
*/
const ExpansionPanel = /*#__PURE__*/React.forwardRef(function ExpansionPanel(props, ref) {
if (process.env.NODE_ENV !== 'production') {
if (!warnedOnce) {
warnedOnce = true;
console.error(['Material-UI: the ExpansionPanel component was renamed to Accordion to use a more common naming convention.', '', "You should use `import { Accordion } from '@material-ui/core'`", "or `import Accordion from '@material-ui/core/Accordion'`"].join('\n'));
}
}
const {
children: childrenProp,
classes,
className,
defaultExpanded = false,
disabled = false,
expanded: expandedProp,
onChange,
square = false,
TransitionComponent = Collapse,
TransitionProps
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "defaultExpanded", "disabled", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"]);
const [expanded, setExpandedState] = useControlled({
controlled: expandedProp,
default: defaultExpanded,
name: 'ExpansionPanel',
state: 'expanded'
});
const handleChange = React.useCallback(event => {
setExpandedState(!expanded);
if (onChange) {
onChange(event, !expanded);
}
}, [expanded, onChange, setExpandedState]);
const [summary, ...children] = React.Children.toArray(childrenProp);
const contextValue = React.useMemo(() => ({
expanded,
disabled,
toggle: handleChange
}), [expanded, disabled, handleChange]);
return /*#__PURE__*/React.createElement(Paper, _extends({
className: clsx(classes.root, className, expanded && classes.expanded, disabled && classes.disabled, !square && classes.rounded),
ref: ref,
square: square
}, other), /*#__PURE__*/React.createElement(ExpansionPanelContext.Provider, {
value: contextValue
}, summary), /*#__PURE__*/React.createElement(TransitionComponent, _extends({
in: expanded,
timeout: "auto"
}, TransitionProps), /*#__PURE__*/React.createElement("div", {
"aria-labelledby": summary.props.id,
id: summary.props['aria-controls'],
role: "region"
}, children)));
});
process.env.NODE_ENV !== "production" ? ExpansionPanel.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the expansion panel.
*/
children: chainPropTypes(PropTypes.node.isRequired, props => {
const summary = React.Children.toArray(props.children)[0];
if (isFragment(summary)) {
return new Error("Material-UI: The ExpansionPanel doesn't accept a Fragment as a child. " + 'Consider providing an array instead.');
}
if (! /*#__PURE__*/React.isValidElement(summary)) {
return new Error('Material-UI: Expected the first child of ExpansionPanel to be a valid element.');
}
return null;
}),
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, expands the panel by default.
*/
defaultExpanded: PropTypes.bool,
/**
* If `true`, the panel will be displayed in a disabled state.
*/
disabled: PropTypes.bool,
/**
* If `true`, expands the panel, otherwise collapse it.
* Setting this prop enables control over the panel.
*/
expanded: PropTypes.bool,
/**
* Callback fired when the expand/collapse state is changed.
*
* @param {object} event The event source of the callback.
* @param {boolean} expanded The `expanded` state of the panel.
*/
onChange: PropTypes.func,
/**
* If `true`, rounded corners are disabled.
*/
square: PropTypes.bool,
/**
* The component used for the collapse effect.
* [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
*/
TransitionComponent: PropTypes.elementType,
/**
* Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.
*/
TransitionProps: PropTypes.object
} : void 0;
export default withStyles(styles, {
name: 'MuiExpansionPanel'
})(ExpansionPanel);

View file

@ -0,0 +1,13 @@
import * as React from 'react';
/**
* @ignore - internal component.
* @type {React.Context<{} | {expanded: boolean, disabled: boolean, toggle: () => void}>}
*/
const ExpansionPanelContext = React.createContext({});
if (process.env.NODE_ENV !== 'production') {
ExpansionPanelContext.displayName = 'ExpansionPanelContext';
}
export default ExpansionPanelContext;

View file

@ -0,0 +1 @@
export { default } from './ExpansionPanel';

View file

@ -0,0 +1,80 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
export const styles = {
/* Styles applied to the root element. */
root: {
display: 'flex',
alignItems: 'center',
padding: 8,
justifyContent: 'flex-end'
},
/* Styles applied to the root element if `disableSpacing={false}`. */
spacing: {
'& > :not(:first-child)': {
marginLeft: 8
}
}
};
let warnedOnce = false;
/**
* The ExpansionPanelActions component was renamed to AccordionActions to use a more common naming convention.
*
* You should use `import { AccordionActions } from '@material-ui/core'`
* or `import AccordionActions from '@material-ui/core/AccordionActions'`.
*/
const ExpansionPanelActions = /*#__PURE__*/React.forwardRef(function ExpansionPanelActions(props, ref) {
if (process.env.NODE_ENV !== 'production') {
if (!warnedOnce) {
warnedOnce = true;
console.error(['Material-UI: the ExpansionPanelActions component was renamed to AccordionActions to use a more common naming convention.', '', "You should use `import { AccordionActions } from '@material-ui/core'`", "or `import AccordionActions from '@material-ui/core/AccordionActions'`"].join('\n'));
}
}
const {
classes,
className,
disableSpacing = false
} = props,
other = _objectWithoutPropertiesLoose(props, ["classes", "className", "disableSpacing"]);
return /*#__PURE__*/React.createElement("div", _extends({
className: clsx(classes.root, className, !disableSpacing && classes.spacing),
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? ExpansionPanelActions.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the actions do not have additional margin.
*/
disableSpacing: PropTypes.bool
} : void 0;
export default withStyles(styles, {
name: 'MuiExpansionPanelActions'
})(ExpansionPanelActions);

View file

@ -0,0 +1 @@
export { default } from './ExpansionPanelActions';

View file

@ -0,0 +1,65 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
display: 'flex',
padding: theme.spacing(1, 2, 2)
}
});
let warnedOnce = false;
/**
* The ExpansionPanelDetails component was renamed to AccordionDetails to use a more common naming convention.
*
* You should use `import { AccordionDetails } from '@material-ui/core'`
* or `import AccordionDetails from '@material-ui/core/AccordionDetails'`.
*/
const ExpansionPanelDetails = /*#__PURE__*/React.forwardRef(function ExpansionPanelDetails(props, ref) {
if (process.env.NODE_ENV !== 'production') {
if (!warnedOnce) {
warnedOnce = true;
console.error(['Material-UI: the ExpansionPanelDetails component was renamed to AccordionDetails to use a more common naming convention.', '', "You should use `import { AccordionDetails } from '@material-ui/core'`", "or `import AccordionDetails from '@material-ui/core/AccordionActions'`"].join('\n'));
}
}
const {
classes,
className
} = props,
other = _objectWithoutPropertiesLoose(props, ["classes", "className"]);
return /*#__PURE__*/React.createElement("div", _extends({
className: clsx(classes.root, className),
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? ExpansionPanelDetails.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the expansion panel details.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string
} : void 0;
export default withStyles(styles, {
name: 'MuiExpansionPanelDetails'
})(ExpansionPanelDetails);

View file

@ -0,0 +1 @@
export { default } from './ExpansionPanelDetails';

View file

@ -0,0 +1,207 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
/* eslint-disable jsx-a11y/aria-role */
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import ButtonBase from '../ButtonBase';
import IconButton from '../IconButton';
import withStyles from '../styles/withStyles';
import ExpansionPanelContext from '../ExpansionPanel/ExpansionPanelContext';
export const styles = theme => {
const transition = {
duration: theme.transitions.duration.shortest
};
return {
/* Styles applied to the root element. */
root: {
display: 'flex',
minHeight: 8 * 6,
transition: theme.transitions.create(['min-height', 'background-color'], transition),
padding: theme.spacing(0, 2),
'&:hover:not($disabled)': {
cursor: 'pointer'
},
'&$expanded': {
minHeight: 64
},
'&$focused': {
backgroundColor: theme.palette.action.focus
},
'&$disabled': {
opacity: theme.palette.action.disabledOpacity
}
},
/* Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */
expanded: {},
/* Pseudo-class applied to the root element if `focused={true}`. */
focused: {},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Styles applied to the children wrapper element. */
content: {
display: 'flex',
flexGrow: 1,
transition: theme.transitions.create(['margin'], transition),
margin: '12px 0',
'&$expanded': {
margin: '20px 0'
}
},
/* Styles applied to the `IconButton` component when `expandIcon` is supplied. */
expandIcon: {
transform: 'rotate(0deg)',
transition: theme.transitions.create('transform', transition),
'&:hover': {
// Disable the hover effect for the IconButton,
// because a hover effect should apply to the entire Expand button and
// not only to the IconButton.
backgroundColor: 'transparent'
},
'&$expanded': {
transform: 'rotate(180deg)'
}
}
};
};
let warnedOnce = false;
/**
* The ExpansionPanelSummary component was renamed to AccordionSummary to use a more common naming convention.
*
* You should use `import { AccordionSummary } from '@material-ui/core'`
* or `import AccordionSummary from '@material-ui/core/AccordionSummary'`.
*/
const ExpansionPanelSummary = /*#__PURE__*/React.forwardRef(function ExpansionPanelSummary(props, ref) {
if (process.env.NODE_ENV !== 'production') {
if (!warnedOnce) {
warnedOnce = true;
console.error(['Material-UI: the ExpansionPanelSummary component was renamed to AccordionSummary to use a more common naming convention.', '', "You should use `import { AccordionSummary } from '@material-ui/core'`", "or `import AccordionSummary from '@material-ui/core/AccordionSummary'`"].join('\n'));
}
}
const {
children,
classes,
className,
expandIcon,
IconButtonProps,
onBlur,
onClick,
onFocusVisible
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "expandIcon", "IconButtonProps", "onBlur", "onClick", "onFocusVisible"]);
const [focusedState, setFocusedState] = React.useState(false);
const handleFocusVisible = event => {
setFocusedState(true);
if (onFocusVisible) {
onFocusVisible(event);
}
};
const handleBlur = event => {
setFocusedState(false);
if (onBlur) {
onBlur(event);
}
};
const {
disabled = false,
expanded,
toggle
} = React.useContext(ExpansionPanelContext);
const handleChange = event => {
if (toggle) {
toggle(event);
}
if (onClick) {
onClick(event);
}
};
return /*#__PURE__*/React.createElement(ButtonBase, _extends({
focusRipple: false,
disableRipple: true,
disabled: disabled,
component: "div",
"aria-expanded": expanded,
className: clsx(classes.root, className, disabled && classes.disabled, expanded && classes.expanded, focusedState && classes.focused),
onFocusVisible: handleFocusVisible,
onBlur: handleBlur,
onClick: handleChange,
ref: ref
}, other), /*#__PURE__*/React.createElement("div", {
className: clsx(classes.content, expanded && classes.expanded)
}, children), expandIcon && /*#__PURE__*/React.createElement(IconButton, _extends({
className: clsx(classes.expandIcon, expanded && classes.expanded),
edge: "end",
component: "div",
tabIndex: null,
role: null,
"aria-hidden": true
}, IconButtonProps), expandIcon));
});
process.env.NODE_ENV !== "production" ? ExpansionPanelSummary.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the expansion panel summary.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The icon to display as the expand indicator.
*/
expandIcon: PropTypes.node,
/**
* Props applied to the `IconButton` element wrapping the expand icon.
*/
IconButtonProps: PropTypes.object,
/**
* @ignore
*/
onBlur: PropTypes.func,
/**
* @ignore
*/
onClick: PropTypes.func,
/**
* Callback fired when the component is focused with a keyboard.
* We trigger a `onFocus` callback too.
*/
onFocusVisible: PropTypes.func
} : void 0;
export default withStyles(styles, {
name: 'MuiExpansionPanelSummary'
})(ExpansionPanelSummary);

View file

@ -0,0 +1 @@
export { default } from './ExpansionPanelSummary';

245
web/node_modules/@material-ui/core/es/Fab/Fab.js generated vendored Normal file
View file

@ -0,0 +1,245 @@
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { chainPropTypes } from '@material-ui/utils';
import withStyles from '../styles/withStyles';
import ButtonBase from '../ButtonBase';
import capitalize from '../utils/capitalize';
export const styles = theme => ({
/* Styles applied to the root element. */
root: _extends({}, theme.typography.button, {
boxSizing: 'border-box',
minHeight: 36,
transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
duration: theme.transitions.duration.short
}),
borderRadius: '50%',
padding: 0,
minWidth: 0,
width: 56,
height: 56,
boxShadow: theme.shadows[6],
'&:active': {
boxShadow: theme.shadows[12]
},
color: theme.palette.getContrastText(theme.palette.grey[300]),
backgroundColor: theme.palette.grey[300],
'&:hover': {
backgroundColor: theme.palette.grey.A100,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: theme.palette.grey[300]
},
'&$disabled': {
backgroundColor: theme.palette.action.disabledBackground
},
textDecoration: 'none'
},
'&$focusVisible': {
boxShadow: theme.shadows[6]
},
'&$disabled': {
color: theme.palette.action.disabled,
boxShadow: theme.shadows[0],
backgroundColor: theme.palette.action.disabledBackground
}
}),
/* Styles applied to the span element that wraps the children. */
label: {
width: '100%',
// assure the correct width for iOS Safari
display: 'inherit',
alignItems: 'inherit',
justifyContent: 'inherit'
},
/* Styles applied to the root element if `color="primary"`. */
primary: {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.main,
'&:hover': {
backgroundColor: theme.palette.primary.dark,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: theme.palette.primary.main
}
}
},
/* Styles applied to the root element if `color="secondary"`. */
secondary: {
color: theme.palette.secondary.contrastText,
backgroundColor: theme.palette.secondary.main,
'&:hover': {
backgroundColor: theme.palette.secondary.dark,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: theme.palette.secondary.main
}
}
},
/* Styles applied to the root element if `variant="extended"`. */
extended: {
borderRadius: 48 / 2,
padding: '0 16px',
width: 'auto',
minHeight: 'auto',
minWidth: 48,
height: 48,
'&$sizeSmall': {
width: 'auto',
padding: '0 8px',
borderRadius: 34 / 2,
minWidth: 34,
height: 34
},
'&$sizeMedium': {
width: 'auto',
padding: '0 16px',
borderRadius: 40 / 2,
minWidth: 40,
height: 40
}
},
/* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
focusVisible: {},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Styles applied to the root element if `color="inherit"`. */
colorInherit: {
color: 'inherit'
},
/* Styles applied to the root element if `size="small"``. */
sizeSmall: {
width: 40,
height: 40
},
/* Styles applied to the root element if `size="medium"``. */
sizeMedium: {
width: 48,
height: 48
}
});
const Fab = /*#__PURE__*/React.forwardRef(function Fab(props, ref) {
const {
children,
classes,
className,
color = 'default',
component = 'button',
disabled = false,
disableFocusRipple = false,
focusVisibleClassName,
size = 'large',
variant = 'circular'
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "color", "component", "disabled", "disableFocusRipple", "focusVisibleClassName", "size", "variant"]);
return /*#__PURE__*/React.createElement(ButtonBase, _extends({
className: clsx(classes.root, className, size !== 'large' && classes[`size${capitalize(size)}`], disabled && classes.disabled, variant === 'extended' && classes.extended, {
'primary': classes.primary,
'secondary': classes.secondary,
'inherit': classes.colorInherit
}[color]),
component: component,
disabled: disabled,
focusRipple: !disableFocusRipple,
focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
ref: ref
}, other), /*#__PURE__*/React.createElement("span", {
className: classes.label
}, children));
});
process.env.NODE_ENV !== "production" ? Fab.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the button.
*/
children: PropTypes
/* @typescript-to-proptypes-ignore */
.node.isRequired,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* If `true`, the button will be disabled.
*/
disabled: PropTypes.bool,
/**
* If `true`, the keyboard focus ripple will be disabled.
*/
disableFocusRipple: PropTypes.bool,
/**
* If `true`, the ripple effect will be disabled.
*/
disableRipple: PropTypes.bool,
/**
* @ignore
*/
focusVisibleClassName: PropTypes.string,
/**
* The URL to link to when the button is clicked.
* If defined, an `a` element will be used as the root node.
*/
href: PropTypes.string,
/**
* The size of the button.
* `small` is equivalent to the dense button styling.
*/
size: PropTypes.oneOf(['large', 'medium', 'small']),
/**
* The variant to use.
* 'round' is deprecated, use 'circular' instead.
*/
variant: chainPropTypes(PropTypes.oneOf(['extended', 'circular', 'round']), props => {
if (props.variant === 'round') {
throw new Error('Material-UI: variant="round" was renamed variant="circular" for consistency.');
}
return null;
})
} : void 0;
export default withStyles(styles, {
name: 'MuiFab'
})(Fab);

1
web/node_modules/@material-ui/core/es/Fab/index.js generated vendored Normal file
View file

@ -0,0 +1 @@
export { default } from './Fab';

186
web/node_modules/@material-ui/core/es/Fade/Fade.js generated vendored Normal file
View file

@ -0,0 +1,186 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import { Transition } from 'react-transition-group';
import { duration } from '../styles/transitions';
import useTheme from '../styles/useTheme';
import { reflow, getTransitionProps } from '../transitions/utils';
import useForkRef from '../utils/useForkRef';
const styles = {
entering: {
opacity: 1
},
entered: {
opacity: 1
}
};
const defaultTimeout = {
enter: duration.enteringScreen,
exit: duration.leavingScreen
};
/**
* The Fade transition is used by the [Modal](/components/modal/) component.
* It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
*/
const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
const {
children,
disableStrictModeCompat = false,
in: inProp,
onEnter,
onEntered,
onEntering,
onExit,
onExited,
onExiting,
style,
// eslint-disable-next-line react/prop-types
TransitionComponent = Transition,
timeout = defaultTimeout
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "disableStrictModeCompat", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "TransitionComponent", "timeout"]);
const theme = useTheme();
const enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;
const nodeRef = React.useRef(null);
const foreignRef = useForkRef(children.ref, ref);
const handleRef = useForkRef(enableStrictModeCompat ? nodeRef : undefined, foreignRef);
const normalizedTransitionCallback = callback => (nodeOrAppearing, maybeAppearing) => {
if (callback) {
const [node, isAppearing] = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing]; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
if (isAppearing === undefined) {
callback(node);
} else {
callback(node, isAppearing);
}
}
};
const handleEntering = normalizedTransitionCallback(onEntering);
const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
reflow(node); // So the animation always start from the start.
const transitionProps = getTransitionProps({
style,
timeout
}, {
mode: 'enter'
});
node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
node.style.transition = theme.transitions.create('opacity', transitionProps);
if (onEnter) {
onEnter(node, isAppearing);
}
});
const handleEntered = normalizedTransitionCallback(onEntered);
const handleExiting = normalizedTransitionCallback(onExiting);
const handleExit = normalizedTransitionCallback(node => {
const transitionProps = getTransitionProps({
style,
timeout
}, {
mode: 'exit'
});
node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);
node.style.transition = theme.transitions.create('opacity', transitionProps);
if (onExit) {
onExit(node);
}
});
const handleExited = normalizedTransitionCallback(onExited);
return /*#__PURE__*/React.createElement(TransitionComponent, _extends({
appear: true,
in: inProp,
nodeRef: enableStrictModeCompat ? nodeRef : undefined,
onEnter: handleEnter,
onEntered: handleEntered,
onEntering: handleEntering,
onExit: handleExit,
onExited: handleExited,
onExiting: handleExiting,
timeout: timeout
}, other), (state, childProps) => {
return /*#__PURE__*/React.cloneElement(children, _extends({
style: _extends({
opacity: 0,
visibility: state === 'exited' && !inProp ? 'hidden' : undefined
}, styles[state], style, children.props.style),
ref: handleRef
}, childProps));
});
});
process.env.NODE_ENV !== "production" ? Fade.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* A single child content element.
*/
children: PropTypes.element,
/**
* Enable this prop if you encounter 'Function components cannot be given refs',
* use `unstable_createStrictModeTheme`,
* and can't forward the ref in the child component.
*/
disableStrictModeCompat: PropTypes.bool,
/**
* If `true`, the component will transition in.
*/
in: PropTypes.bool,
/**
* @ignore
*/
onEnter: PropTypes.func,
/**
* @ignore
*/
onEntered: PropTypes.func,
/**
* @ignore
*/
onEntering: PropTypes.func,
/**
* @ignore
*/
onExit: PropTypes.func,
/**
* @ignore
*/
onExited: PropTypes.func,
/**
* @ignore
*/
onExiting: PropTypes.func,
/**
* @ignore
*/
style: PropTypes.object,
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*/
timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
appear: PropTypes.number,
enter: PropTypes.number,
exit: PropTypes.number
})])
} : void 0;
export default Fade;

1
web/node_modules/@material-ui/core/es/Fade/index.js generated vendored Normal file
View file

@ -0,0 +1 @@
export { default } from './Fade';

View file

@ -0,0 +1,341 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { refType } from '@material-ui/utils';
import InputBase from '../InputBase';
import withStyles from '../styles/withStyles';
export const styles = theme => {
const light = theme.palette.type === 'light';
const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
const backgroundColor = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)';
return {
/* Styles applied to the root element. */
root: {
position: 'relative',
backgroundColor,
borderTopLeftRadius: theme.shape.borderRadius,
borderTopRightRadius: theme.shape.borderRadius,
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.shorter,
easing: theme.transitions.easing.easeOut
}),
'&:hover': {
backgroundColor: light ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)',
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor
}
},
'&$focused': {
backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)'
},
'&$disabled': {
backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)'
}
},
/* Styles applied to the root element if color secondary. */
colorSecondary: {
'&$underline:after': {
borderBottomColor: theme.palette.secondary.main
}
},
/* Styles applied to the root element if `disableUnderline={false}`. */
underline: {
'&:after': {
borderBottom: `2px solid ${theme.palette.primary.main}`,
left: 0,
bottom: 0,
// Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
content: '""',
position: 'absolute',
right: 0,
transform: 'scaleX(0)',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shorter,
easing: theme.transitions.easing.easeOut
}),
pointerEvents: 'none' // Transparent to the hover style.
},
'&$focused:after': {
transform: 'scaleX(1)'
},
'&$error:after': {
borderBottomColor: theme.palette.error.main,
transform: 'scaleX(1)' // error is always underlined in red
},
'&:before': {
borderBottom: `1px solid ${bottomLineColor}`,
left: 0,
bottom: 0,
// Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
content: '"\\00a0"',
position: 'absolute',
right: 0,
transition: theme.transitions.create('border-bottom-color', {
duration: theme.transitions.duration.shorter
}),
pointerEvents: 'none' // Transparent to the hover style.
},
'&:hover:before': {
borderBottom: `1px solid ${theme.palette.text.primary}`
},
'&$disabled:before': {
borderBottomStyle: 'dotted'
}
},
/* Pseudo-class applied to the root element if the component is focused. */
focused: {},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Styles applied to the root element if `startAdornment` is provided. */
adornedStart: {
paddingLeft: 12
},
/* Styles applied to the root element if `endAdornment` is provided. */
adornedEnd: {
paddingRight: 12
},
/* Pseudo-class applied to the root element if `error={true}`. */
error: {},
/* Styles applied to the `input` element if `margin="dense"`. */
marginDense: {},
/* Styles applied to the root element if `multiline={true}`. */
multiline: {
padding: '27px 12px 10px',
'&$marginDense': {
paddingTop: 23,
paddingBottom: 6
}
},
/* Styles applied to the `input` element. */
input: {
padding: '27px 12px 10px',
'&:-webkit-autofill': {
WebkitBoxShadow: theme.palette.type === 'light' ? null : '0 0 0 100px #266798 inset',
WebkitTextFillColor: theme.palette.type === 'light' ? null : '#fff',
caretColor: theme.palette.type === 'light' ? null : '#fff',
borderTopLeftRadius: 'inherit',
borderTopRightRadius: 'inherit'
}
},
/* Styles applied to the `input` element if `margin="dense"`. */
inputMarginDense: {
paddingTop: 23,
paddingBottom: 6
},
/* Styles applied to the `input` if in `<FormControl hiddenLabel />`. */
inputHiddenLabel: {
paddingTop: 18,
paddingBottom: 19,
'&$inputMarginDense': {
paddingTop: 10,
paddingBottom: 11
}
},
/* Styles applied to the `input` element if `multiline={true}`. */
inputMultiline: {
padding: 0
},
/* Styles applied to the `input` element if `startAdornment` is provided. */
inputAdornedStart: {
paddingLeft: 0
},
/* Styles applied to the `input` element if `endAdornment` is provided. */
inputAdornedEnd: {
paddingRight: 0
}
};
};
const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(props, ref) {
const {
disableUnderline,
classes,
fullWidth = false,
inputComponent = 'input',
multiline = false,
type = 'text'
} = props,
other = _objectWithoutPropertiesLoose(props, ["disableUnderline", "classes", "fullWidth", "inputComponent", "multiline", "type"]);
return /*#__PURE__*/React.createElement(InputBase, _extends({
classes: _extends({}, classes, {
root: clsx(classes.root, !disableUnderline && classes.underline),
underline: null
}),
fullWidth: fullWidth,
inputComponent: inputComponent,
multiline: multiline,
ref: ref,
type: type
}, other));
});
process.env.NODE_ENV !== "production" ? FilledInput.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* This prop helps users to fill forms faster, especially on mobile devices.
* The name can be confusing, as it's more like an autofill.
* You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
*/
autoComplete: PropTypes.string,
/**
* If `true`, the `input` element will be focused during the first mount.
*/
autoFocus: PropTypes.bool,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: PropTypes.oneOf(['primary', 'secondary']),
/**
* The default `input` element value. Use when the component is not controlled.
*/
defaultValue: PropTypes.any,
/**
* If `true`, the `input` element will be disabled.
*/
disabled: PropTypes.bool,
/**
* If `true`, the input will not have an underline.
*/
disableUnderline: PropTypes.bool,
/**
* End `InputAdornment` for this component.
*/
endAdornment: PropTypes.node,
/**
* If `true`, the input will indicate an error. This is normally obtained via context from
* FormControl.
*/
error: PropTypes.bool,
/**
* If `true`, the input will take up the full width of its container.
*/
fullWidth: PropTypes.bool,
/**
* The id of the `input` element.
*/
id: PropTypes.string,
/**
* The component used for the `input` element.
* Either a string to use a HTML element or a component.
*/
inputComponent: PropTypes.elementType,
/**
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
*/
inputProps: PropTypes.object,
/**
* Pass a ref to the `input` element.
*/
inputRef: refType,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin: PropTypes.oneOf(['dense', 'none']),
/**
* Maximum number of rows to display when multiline option is set to true.
*/
maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* If `true`, a textarea element will be rendered.
*/
multiline: PropTypes.bool,
/**
* Name attribute of the `input` element.
*/
name: PropTypes.string,
/**
* Callback fired when the value is changed.
*
* @param {object} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value` (string).
*/
onChange: PropTypes.func,
/**
* The short hint displayed in the input before the user enters a value.
*/
placeholder: PropTypes.string,
/**
* It prevents the user from changing the value of the field
* (not from interacting with the field).
*/
readOnly: PropTypes.bool,
/**
* If `true`, the `input` element will be required.
*/
required: PropTypes.bool,
/**
* Number of rows to display when multiline option is set to true.
*/
rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* Start `InputAdornment` for this component.
*/
startAdornment: PropTypes.node,
/**
* Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
*/
type: PropTypes.string,
/**
* The value of the `input` element, required for a controlled component.
*/
value: PropTypes.any
} : void 0;
FilledInput.muiName = 'Input';
export default withStyles(styles, {
name: 'MuiFilledInput'
})(FilledInput);

View file

@ -0,0 +1 @@
export { default } from './FilledInput';

View file

@ -0,0 +1,271 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { isFilled, isAdornedStart } from '../InputBase/utils';
import withStyles from '../styles/withStyles';
import capitalize from '../utils/capitalize';
import isMuiElement from '../utils/isMuiElement';
import FormControlContext from './FormControlContext';
export const styles = {
/* Styles applied to the root element. */
root: {
display: 'inline-flex',
flexDirection: 'column',
position: 'relative',
// Reset fieldset default style.
minWidth: 0,
padding: 0,
margin: 0,
border: 0,
verticalAlign: 'top' // Fix alignment issue on Safari.
},
/* Styles applied to the root element if `margin="normal"`. */
marginNormal: {
marginTop: 16,
marginBottom: 8
},
/* Styles applied to the root element if `margin="dense"`. */
marginDense: {
marginTop: 8,
marginBottom: 4
},
/* Styles applied to the root element if `fullWidth={true}`. */
fullWidth: {
width: '100%'
}
};
/**
* Provides context such as filled/focused/error/required for form inputs.
* Relying on the context provides high flexibility and ensures that the state always stays
* consistent across the children of the `FormControl`.
* This context is used by the following components:
*
* - FormLabel
* - FormHelperText
* - Input
* - InputLabel
*
* You can find one composition example below and more going to [the demos](/components/text-fields/#components).
*
* ```jsx
* <FormControl>
* <InputLabel htmlFor="my-input">Email address</InputLabel>
* <Input id="my-input" aria-describedby="my-helper-text" />
* <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
* </FormControl>
* ```
*
* Only one input can be used within a FormControl.
*/
const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(props, ref) {
const {
children,
classes,
className,
color = 'primary',
component: Component = 'div',
disabled = false,
error = false,
fullWidth = false,
focused: visuallyFocused,
hiddenLabel = false,
margin = 'none',
required = false,
size,
variant = 'standard'
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "color", "component", "disabled", "error", "fullWidth", "focused", "hiddenLabel", "margin", "required", "size", "variant"]);
const [adornedStart, setAdornedStart] = React.useState(() => {
// We need to iterate through the children and find the Input in order
// to fully support server-side rendering.
let initialAdornedStart = false;
if (children) {
React.Children.forEach(children, child => {
if (!isMuiElement(child, ['Input', 'Select'])) {
return;
}
const input = isMuiElement(child, ['Select']) ? child.props.input : child;
if (input && isAdornedStart(input.props)) {
initialAdornedStart = true;
}
});
}
return initialAdornedStart;
});
const [filled, setFilled] = React.useState(() => {
// We need to iterate through the children and find the Input in order
// to fully support server-side rendering.
let initialFilled = false;
if (children) {
React.Children.forEach(children, child => {
if (!isMuiElement(child, ['Input', 'Select'])) {
return;
}
if (isFilled(child.props, true)) {
initialFilled = true;
}
});
}
return initialFilled;
});
const [_focused, setFocused] = React.useState(false);
const focused = visuallyFocused !== undefined ? visuallyFocused : _focused;
if (disabled && focused) {
setFocused(false);
}
let registerEffect;
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
const registeredInput = React.useRef(false);
registerEffect = () => {
if (registeredInput.current) {
console.error(['Material-UI: There are multiple InputBase components inside a FormControl.', 'This is not supported. It might cause infinite rendering loops.', 'Only use one InputBase.'].join('\n'));
}
registeredInput.current = true;
return () => {
registeredInput.current = false;
};
};
}
const onFilled = React.useCallback(() => {
setFilled(true);
}, []);
const onEmpty = React.useCallback(() => {
setFilled(false);
}, []);
const childContext = {
adornedStart,
setAdornedStart,
color,
disabled,
error,
filled,
focused,
fullWidth,
hiddenLabel,
margin: (size === 'small' ? 'dense' : undefined) || margin,
onBlur: () => {
setFocused(false);
},
onEmpty,
onFilled,
onFocus: () => {
setFocused(true);
},
registerEffect,
required,
variant
};
return /*#__PURE__*/React.createElement(FormControlContext.Provider, {
value: childContext
}, /*#__PURE__*/React.createElement(Component, _extends({
className: clsx(classes.root, className, margin !== 'none' && classes[`margin${capitalize(margin)}`], fullWidth && classes.fullWidth),
ref: ref
}, other), children));
});
process.env.NODE_ENV !== "production" ? FormControl.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The contents of the form control.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: PropTypes.oneOf(['primary', 'secondary']),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* If `true`, the label, input and helper text should be displayed in a disabled state.
*/
disabled: PropTypes.bool,
/**
* If `true`, the label should be displayed in an error state.
*/
error: PropTypes.bool,
/**
* If `true`, the component will be displayed in focused state.
*/
focused: PropTypes.bool,
/**
* If `true`, the component will take up the full width of its container.
*/
fullWidth: PropTypes.bool,
/**
* If `true`, the label will be hidden.
* This is used to increase density for a `FilledInput`.
* Be sure to add `aria-label` to the `input` element.
*/
hiddenLabel: PropTypes.bool,
/**
* If `dense` or `normal`, will adjust vertical spacing of this and contained components.
*/
margin: PropTypes.oneOf(['dense', 'none', 'normal']),
/**
* If `true`, the label will indicate that the input is required.
*/
required: PropTypes.bool,
/**
* The size of the text field.
*/
size: PropTypes.oneOf(['medium', 'small']),
/**
* The variant to use.
*/
variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
} : void 0;
export default withStyles(styles, {
name: 'MuiFormControl'
})(FormControl);

View file

@ -0,0 +1,15 @@
import * as React from 'react';
/**
* @ignore - internal component.
*/
const FormControlContext = React.createContext();
if (process.env.NODE_ENV !== 'production') {
FormControlContext.displayName = 'FormControlContext';
}
export function useFormControl() {
return React.useContext(FormControlContext);
}
export default FormControlContext;

View file

@ -0,0 +1,17 @@
export default function formControlState({
props,
states,
muiFormControl
}) {
return states.reduce((acc, state) => {
acc[state] = props[state];
if (muiFormControl) {
if (typeof props[state] === 'undefined') {
acc[state] = muiFormControl[state];
}
}
return acc;
}, {});
}

View file

@ -0,0 +1,2 @@
export { default } from './FormControl';
export { default as useFormControl } from './useFormControl';

View file

@ -0,0 +1,5 @@
import * as React from 'react';
import FormControlContext from './FormControlContext';
export default function useFormControl() {
return React.useContext(FormControlContext);
}

View file

@ -0,0 +1,168 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { refType } from '@material-ui/utils';
import { useFormControl } from '../FormControl';
import withStyles from '../styles/withStyles';
import Typography from '../Typography';
import capitalize from '../utils/capitalize';
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
display: 'inline-flex',
alignItems: 'center',
cursor: 'pointer',
// For correct alignment with the text.
verticalAlign: 'middle',
WebkitTapHighlightColor: 'transparent',
marginLeft: -11,
marginRight: 16,
// used for row presentation of radio/checkbox
'&$disabled': {
cursor: 'default'
}
},
/* Styles applied to the root element if `labelPlacement="start"`. */
labelPlacementStart: {
flexDirection: 'row-reverse',
marginLeft: 16,
// used for row presentation of radio/checkbox
marginRight: -11
},
/* Styles applied to the root element if `labelPlacement="top"`. */
labelPlacementTop: {
flexDirection: 'column-reverse',
marginLeft: 16
},
/* Styles applied to the root element if `labelPlacement="bottom"`. */
labelPlacementBottom: {
flexDirection: 'column',
marginLeft: 16
},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Styles applied to the label's Typography component. */
label: {
'&$disabled': {
color: theme.palette.text.disabled
}
}
});
/**
* Drop in replacement of the `Radio`, `Switch` and `Checkbox` component.
* Use this component if you want to display an extra label.
*/
const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(props, ref) {
const {
classes,
className,
control,
disabled: disabledProp,
label,
labelPlacement = 'end'
} = props,
other = _objectWithoutPropertiesLoose(props, ["checked", "classes", "className", "control", "disabled", "inputRef", "label", "labelPlacement", "name", "onChange", "value"]);
const muiFormControl = useFormControl();
let disabled = disabledProp;
if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
disabled = control.props.disabled;
}
if (typeof disabled === 'undefined' && muiFormControl) {
disabled = muiFormControl.disabled;
}
const controlProps = {
disabled
};
['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(key => {
if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
controlProps[key] = props[key];
}
});
return /*#__PURE__*/React.createElement("label", _extends({
className: clsx(classes.root, className, labelPlacement !== 'end' && classes[`labelPlacement${capitalize(labelPlacement)}`], disabled && classes.disabled),
ref: ref
}, other), /*#__PURE__*/React.cloneElement(control, controlProps), /*#__PURE__*/React.createElement(Typography, {
component: "span",
className: clsx(classes.label, disabled && classes.disabled)
}, label));
});
process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* If `true`, the component appears selected.
*/
checked: PropTypes.bool,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`.
*/
control: PropTypes.element.isRequired,
/**
* If `true`, the control will be disabled.
*/
disabled: PropTypes.bool,
/**
* Pass a ref to the `input` element.
*/
inputRef: refType,
/**
* The text to be used in an enclosing label element.
*/
label: PropTypes.node,
/**
* The position of the label.
*/
labelPlacement: PropTypes.oneOf(['bottom', 'end', 'start', 'top']),
/**
* @ignore
*/
name: PropTypes.string,
/**
* Callback fired when the state is changed.
*
* @param {object} event The event source of the callback.
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
*/
onChange: PropTypes.func,
/**
* The value of the component.
*/
value: PropTypes.any
} : void 0;
export default withStyles(styles, {
name: 'MuiFormControlLabel'
})(FormControlLabel);

View file

@ -0,0 +1 @@
export { default } from './FormControlLabel';

View file

@ -0,0 +1,68 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
export const styles = {
/* Styles applied to the root element. */
root: {
display: 'flex',
flexDirection: 'column',
flexWrap: 'wrap'
},
/* Styles applied to the root element if `row={true}`. */
row: {
flexDirection: 'row'
}
};
/**
* `FormGroup` wraps controls such as `Checkbox` and `Switch`.
* It provides compact row layout.
* For the `Radio`, you should be using the `RadioGroup` component instead of this one.
*/
const FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup(props, ref) {
const {
classes,
className,
row = false
} = props,
other = _objectWithoutPropertiesLoose(props, ["classes", "className", "row"]);
return /*#__PURE__*/React.createElement("div", _extends({
className: clsx(classes.root, className, row && classes.row),
ref: ref
}, other));
});
process.env.NODE_ENV !== "production" ? FormGroup.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* Display group of elements in a compact row.
*/
row: PropTypes.bool
} : void 0;
export default withStyles(styles, {
name: 'MuiFormGroup'
})(FormGroup);

View file

@ -0,0 +1 @@
export { default } from './FormGroup';

View file

@ -0,0 +1,148 @@
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import formControlState from '../FormControl/formControlState';
import useFormControl from '../FormControl/useFormControl';
import withStyles from '../styles/withStyles';
export const styles = theme => ({
/* Styles applied to the root element. */
root: _extends({
color: theme.palette.text.secondary
}, theme.typography.caption, {
textAlign: 'left',
marginTop: 3,
margin: 0,
'&$disabled': {
color: theme.palette.text.disabled
},
'&$error': {
color: theme.palette.error.main
}
}),
/* Pseudo-class applied to the root element if `error={true}`. */
error: {},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Styles applied to the root element if `margin="dense"`. */
marginDense: {
marginTop: 4
},
/* Styles applied to the root element if `variant="filled"` or `variant="outlined"`. */
contained: {
marginLeft: 14,
marginRight: 14
},
/* Pseudo-class applied to the root element if `focused={true}`. */
focused: {},
/* Pseudo-class applied to the root element if `filled={true}`. */
filled: {},
/* Pseudo-class applied to the root element if `required={true}`. */
required: {}
});
const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(props, ref) {
const {
children,
classes,
className,
component: Component = 'p'
} = props,
other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"]);
const muiFormControl = useFormControl();
const fcs = formControlState({
props,
muiFormControl,
states: ['variant', 'margin', 'disabled', 'error', 'filled', 'focused', 'required']
});
return /*#__PURE__*/React.createElement(Component, _extends({
className: clsx(classes.root, (fcs.variant === 'filled' || fcs.variant === 'outlined') && classes.contained, className, fcs.disabled && classes.disabled, fcs.error && classes.error, fcs.filled && classes.filled, fcs.focused && classes.focused, fcs.required && classes.required, fcs.margin === 'dense' && classes.marginDense),
ref: ref
}, other), children === ' ' ?
/*#__PURE__*/
// eslint-disable-next-line react/no-danger
React.createElement("span", {
dangerouslySetInnerHTML: {
__html: '&#8203;'
}
}) : children);
});
process.env.NODE_ENV !== "production" ? FormHelperText.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* The content of the component.
*
* If `' '` is provided, the component reserves one line height for displaying a future message.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: PropTypes
/* @typescript-to-proptypes-ignore */
.elementType,
/**
* If `true`, the helper text should be displayed in a disabled state.
*/
disabled: PropTypes.bool,
/**
* If `true`, helper text should be displayed in an error state.
*/
error: PropTypes.bool,
/**
* If `true`, the helper text should use filled classes key.
*/
filled: PropTypes.bool,
/**
* If `true`, the helper text should use focused classes key.
*/
focused: PropTypes.bool,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin: PropTypes.oneOf(['dense']),
/**
* If `true`, the helper text should use required classes key.
*/
required: PropTypes.bool,
/**
* The variant to use.
*/
variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
} : void 0;
export default withStyles(styles, {
name: 'MuiFormHelperText'
})(FormHelperText);

View file

@ -0,0 +1 @@
export { default } from './FormHelperText';

Some files were not shown because too many files have changed in this diff Show more