mirror of
https://github.com/idanoo/GoScrobble
synced 2025-07-16 21:11:52 +00:00
0.2.0 - Mid migration
This commit is contained in:
parent
139e6a915e
commit
7e38fdbd7d
42393 changed files with 5358157 additions and 62 deletions
72
web/node_modules/@material-ui/core/Tabs/ScrollbarSize.js
generated
vendored
Normal file
72
web/node_modules/@material-ui/core/Tabs/ScrollbarSize.js
generated
vendored
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
"use strict";
|
||||
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = ScrollbarSize;
|
||||
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
|
||||
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _propTypes = _interopRequireDefault(require("prop-types"));
|
||||
|
||||
var _debounce = _interopRequireDefault(require("../utils/debounce"));
|
||||
|
||||
var styles = {
|
||||
width: 99,
|
||||
height: 99,
|
||||
position: 'absolute',
|
||||
top: -9999,
|
||||
overflow: 'scroll'
|
||||
};
|
||||
/**
|
||||
* @ignore - internal component.
|
||||
* The component originates from https://github.com/STORIS/react-scrollbar-size.
|
||||
* It has been moved into the core in order to minimize the bundle size.
|
||||
*/
|
||||
|
||||
function ScrollbarSize(props) {
|
||||
var onChange = props.onChange,
|
||||
other = (0, _objectWithoutProperties2.default)(props, ["onChange"]);
|
||||
var scrollbarHeight = React.useRef();
|
||||
var nodeRef = React.useRef(null);
|
||||
|
||||
var setMeasurements = function setMeasurements() {
|
||||
scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
|
||||
};
|
||||
|
||||
React.useEffect(function () {
|
||||
var handleResize = (0, _debounce.default)(function () {
|
||||
var prevHeight = scrollbarHeight.current;
|
||||
setMeasurements();
|
||||
|
||||
if (prevHeight !== scrollbarHeight.current) {
|
||||
onChange(scrollbarHeight.current);
|
||||
}
|
||||
});
|
||||
window.addEventListener('resize', handleResize);
|
||||
return function () {
|
||||
handleResize.clear();
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}, [onChange]);
|
||||
React.useEffect(function () {
|
||||
setMeasurements();
|
||||
onChange(scrollbarHeight.current);
|
||||
}, [onChange]);
|
||||
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
|
||||
style: styles,
|
||||
ref: nodeRef
|
||||
}, other));
|
||||
}
|
||||
|
||||
process.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = {
|
||||
onChange: _propTypes.default.func.isRequired
|
||||
} : void 0;
|
||||
93
web/node_modules/@material-ui/core/Tabs/TabIndicator.js
generated
vendored
Normal file
93
web/node_modules/@material-ui/core/Tabs/TabIndicator.js
generated
vendored
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
"use strict";
|
||||
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = exports.styles = void 0;
|
||||
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
|
||||
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _propTypes = _interopRequireDefault(require("prop-types"));
|
||||
|
||||
var _clsx = _interopRequireDefault(require("clsx"));
|
||||
|
||||
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
|
||||
|
||||
var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
|
||||
|
||||
var styles = function styles(theme) {
|
||||
return {
|
||||
root: {
|
||||
position: 'absolute',
|
||||
height: 2,
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
transition: theme.transitions.create()
|
||||
},
|
||||
colorPrimary: {
|
||||
backgroundColor: theme.palette.primary.main
|
||||
},
|
||||
colorSecondary: {
|
||||
backgroundColor: theme.palette.secondary.main
|
||||
},
|
||||
vertical: {
|
||||
height: '100%',
|
||||
width: 2,
|
||||
right: 0
|
||||
}
|
||||
};
|
||||
};
|
||||
/**
|
||||
* @ignore - internal component.
|
||||
*/
|
||||
|
||||
|
||||
exports.styles = styles;
|
||||
var TabIndicator = /*#__PURE__*/React.forwardRef(function TabIndicator(props, ref) {
|
||||
var classes = props.classes,
|
||||
className = props.className,
|
||||
color = props.color,
|
||||
orientation = props.orientation,
|
||||
other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "color", "orientation"]);
|
||||
return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
|
||||
className: (0, _clsx.default)(classes.root, classes["color".concat((0, _capitalize.default)(color))], className, orientation === 'vertical' && classes.vertical),
|
||||
ref: ref
|
||||
}, other));
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? TabIndicator.propTypes = {
|
||||
/**
|
||||
* Override or extend the styles applied to the component.
|
||||
* See [CSS API](#css) below for more details.
|
||||
*/
|
||||
classes: _propTypes.default.object.isRequired,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
className: _propTypes.default.string,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
* The color of the tab indicator.
|
||||
*/
|
||||
color: _propTypes.default.oneOf(['primary', 'secondary']).isRequired,
|
||||
|
||||
/**
|
||||
* The tabs orientation (layout flow direction).
|
||||
*/
|
||||
orientation: _propTypes.default.oneOf(['horizontal', 'vertical']).isRequired
|
||||
} : void 0;
|
||||
|
||||
var _default = (0, _withStyles.default)(styles, {
|
||||
name: 'PrivateTabIndicator'
|
||||
})(TabIndicator);
|
||||
|
||||
exports.default = _default;
|
||||
132
web/node_modules/@material-ui/core/Tabs/Tabs.d.ts
generated
vendored
Normal file
132
web/node_modules/@material-ui/core/Tabs/Tabs.d.ts
generated
vendored
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
import * as React from 'react';
|
||||
import ButtonBase from '../ButtonBase';
|
||||
import { TabScrollButtonProps } from '../TabScrollButton';
|
||||
import { OverridableComponent, OverrideProps } from '../OverridableComponent';
|
||||
|
||||
export interface TabsTypeMap<P = {}, D extends React.ElementType = typeof ButtonBase> {
|
||||
props: P & {
|
||||
/**
|
||||
* Callback fired when the component mounts.
|
||||
* This is useful when you want to trigger an action programmatically.
|
||||
* It supports two actions: `updateIndicator()` and `updateScrollButtons()`
|
||||
*
|
||||
* @param {object} actions This object contains all possible actions
|
||||
* that can be triggered programmatically.
|
||||
*/
|
||||
action?: React.Ref<TabsActions>;
|
||||
/**
|
||||
* The label for the Tabs as a string.
|
||||
*/
|
||||
'aria-label'?: string;
|
||||
/**
|
||||
* An id or list of ids separated by a space that label the Tabs.
|
||||
*/
|
||||
'aria-labelledby'?: string;
|
||||
/**
|
||||
* If `true`, the tabs will be centered.
|
||||
* This property is intended for large views.
|
||||
*/
|
||||
centered?: boolean;
|
||||
/**
|
||||
* The content of the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* Determines the color of the indicator.
|
||||
*/
|
||||
indicatorColor?: 'secondary' | 'primary';
|
||||
/**
|
||||
* 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 (number)
|
||||
*/
|
||||
onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
|
||||
/**
|
||||
* The tabs orientation (layout flow direction).
|
||||
*/
|
||||
orientation?: 'horizontal' | 'vertical';
|
||||
/**
|
||||
* The component used to render the scroll buttons.
|
||||
*/
|
||||
ScrollButtonComponent?: React.ElementType;
|
||||
/**
|
||||
* Determine behavior of scroll buttons when tabs are set to scroll:
|
||||
*
|
||||
* - `auto` will only present them when not all the items are visible.
|
||||
* - `desktop` will only present them on medium and larger viewports.
|
||||
* - `on` will always present them.
|
||||
* - `off` will never present them.
|
||||
*/
|
||||
scrollButtons?: 'auto' | 'desktop' | 'on' | 'off';
|
||||
/**
|
||||
* If `true` the selected tab changes on focus. Otherwise it only
|
||||
* changes on activation.
|
||||
*/
|
||||
selectionFollowsFocus?: boolean;
|
||||
/**
|
||||
* Props applied to the tab indicator element.
|
||||
*/
|
||||
TabIndicatorProps?: Partial<React.HTMLAttributes<HTMLDivElement>>;
|
||||
/**
|
||||
* Props applied to the [`TabScrollButton`](/api/tab-scroll-button/) element.
|
||||
*/
|
||||
TabScrollButtonProps?: Partial<TabScrollButtonProps>;
|
||||
/**
|
||||
* Determines the color of the `Tab`.
|
||||
*/
|
||||
textColor?: 'secondary' | 'primary' | 'inherit';
|
||||
/**
|
||||
* The value of the currently selected `Tab`.
|
||||
* If you don't want any selected `Tab`, you can set this property to `false`.
|
||||
*/
|
||||
value?: any;
|
||||
/**
|
||||
* Determines additional display behavior of the tabs:
|
||||
*
|
||||
* - `scrollable` will invoke scrolling properties and allow for horizontally
|
||||
* scrolling (or swiping) of the tab bar.
|
||||
* -`fullWidth` will make the tabs grow to use all the available space,
|
||||
* which should be used for small views, like on mobile.
|
||||
* - `standard` will render the default state.
|
||||
*/
|
||||
variant?: 'standard' | 'scrollable' | 'fullWidth';
|
||||
};
|
||||
defaultComponent: D;
|
||||
classKey: TabsClassKey;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* Demos:
|
||||
*
|
||||
* - [Tabs](https://material-ui.com/components/tabs/)
|
||||
*
|
||||
* API:
|
||||
*
|
||||
* - [Tabs API](https://material-ui.com/api/tabs/)
|
||||
*/
|
||||
declare const Tabs: OverridableComponent<TabsTypeMap>;
|
||||
|
||||
export type TabsClassKey =
|
||||
| 'root'
|
||||
| 'flexContainer'
|
||||
| 'scroller'
|
||||
| 'fixed'
|
||||
| 'scrollable'
|
||||
| 'centered'
|
||||
| 'scrollButtons'
|
||||
| 'scrollButtonsDesktop'
|
||||
| 'indicator';
|
||||
|
||||
export interface TabsActions {
|
||||
updateIndicator(): void;
|
||||
updateScrollButtons(): void;
|
||||
}
|
||||
|
||||
export type TabsProps<
|
||||
D extends React.ElementType = TabsTypeMap['defaultComponent'],
|
||||
P = {}
|
||||
> = OverrideProps<TabsTypeMap<P, D>, D>;
|
||||
|
||||
export default Tabs;
|
||||
642
web/node_modules/@material-ui/core/Tabs/Tabs.js
generated
vendored
Normal file
642
web/node_modules/@material-ui/core/Tabs/Tabs.js
generated
vendored
Normal file
|
|
@ -0,0 +1,642 @@
|
|||
"use strict";
|
||||
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = exports.styles = void 0;
|
||||
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
|
||||
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
||||
|
||||
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
||||
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
|
||||
var _reactIs = require("react-is");
|
||||
|
||||
var _propTypes = _interopRequireDefault(require("prop-types"));
|
||||
|
||||
var _clsx = _interopRequireDefault(require("clsx"));
|
||||
|
||||
var _utils = require("@material-ui/utils");
|
||||
|
||||
var _debounce = _interopRequireDefault(require("../utils/debounce"));
|
||||
|
||||
var _ownerWindow = _interopRequireDefault(require("../utils/ownerWindow"));
|
||||
|
||||
var _scrollLeft = require("../utils/scrollLeft");
|
||||
|
||||
var _animate = _interopRequireDefault(require("../internal/animate"));
|
||||
|
||||
var _ScrollbarSize = _interopRequireDefault(require("./ScrollbarSize"));
|
||||
|
||||
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
|
||||
|
||||
var _TabIndicator = _interopRequireDefault(require("./TabIndicator"));
|
||||
|
||||
var _TabScrollButton = _interopRequireDefault(require("../TabScrollButton"));
|
||||
|
||||
var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
|
||||
|
||||
var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
|
||||
|
||||
var styles = function styles(theme) {
|
||||
return {
|
||||
/* Styles applied to the root element. */
|
||||
root: {
|
||||
overflow: 'hidden',
|
||||
minHeight: 48,
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
// Add iOS momentum scrolling.
|
||||
display: 'flex'
|
||||
},
|
||||
|
||||
/* Styles applied to the root element if `orientation="vertical"`. */
|
||||
vertical: {
|
||||
flexDirection: 'column'
|
||||
},
|
||||
|
||||
/* Styles applied to the flex container element. */
|
||||
flexContainer: {
|
||||
display: 'flex'
|
||||
},
|
||||
|
||||
/* Styles applied to the flex container element if `orientation="vertical"`. */
|
||||
flexContainerVertical: {
|
||||
flexDirection: 'column'
|
||||
},
|
||||
|
||||
/* Styles applied to the flex container element if `centered={true}` & `!variant="scrollable"`. */
|
||||
centered: {
|
||||
justifyContent: 'center'
|
||||
},
|
||||
|
||||
/* Styles applied to the tablist element. */
|
||||
scroller: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
flex: '1 1 auto',
|
||||
whiteSpace: 'nowrap'
|
||||
},
|
||||
|
||||
/* Styles applied to the tablist element if `!variant="scrollable"`. */
|
||||
fixed: {
|
||||
overflowX: 'hidden',
|
||||
width: '100%'
|
||||
},
|
||||
|
||||
/* Styles applied to the tablist element if `variant="scrollable"`. */
|
||||
scrollable: {
|
||||
overflowX: 'scroll',
|
||||
// Hide dimensionless scrollbar on MacOS
|
||||
scrollbarWidth: 'none',
|
||||
// Firefox
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none' // Safari + Chrome
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
/* Styles applied to the `ScrollButtonComponent` component. */
|
||||
scrollButtons: {},
|
||||
|
||||
/* Styles applied to the `ScrollButtonComponent` component if `scrollButtons="auto"` or scrollButtons="desktop"`. */
|
||||
scrollButtonsDesktop: (0, _defineProperty2.default)({}, theme.breakpoints.down('xs'), {
|
||||
display: 'none'
|
||||
}),
|
||||
|
||||
/* Styles applied to the `TabIndicator` component. */
|
||||
indicator: {}
|
||||
};
|
||||
};
|
||||
|
||||
exports.styles = styles;
|
||||
var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
|
||||
var ariaLabel = props['aria-label'],
|
||||
ariaLabelledBy = props['aria-labelledby'],
|
||||
action = props.action,
|
||||
_props$centered = props.centered,
|
||||
centered = _props$centered === void 0 ? false : _props$centered,
|
||||
childrenProp = props.children,
|
||||
classes = props.classes,
|
||||
className = props.className,
|
||||
_props$component = props.component,
|
||||
Component = _props$component === void 0 ? 'div' : _props$component,
|
||||
_props$indicatorColor = props.indicatorColor,
|
||||
indicatorColor = _props$indicatorColor === void 0 ? 'secondary' : _props$indicatorColor,
|
||||
onChange = props.onChange,
|
||||
_props$orientation = props.orientation,
|
||||
orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
|
||||
_props$ScrollButtonCo = props.ScrollButtonComponent,
|
||||
ScrollButtonComponent = _props$ScrollButtonCo === void 0 ? _TabScrollButton.default : _props$ScrollButtonCo,
|
||||
_props$scrollButtons = props.scrollButtons,
|
||||
scrollButtons = _props$scrollButtons === void 0 ? 'auto' : _props$scrollButtons,
|
||||
selectionFollowsFocus = props.selectionFollowsFocus,
|
||||
_props$TabIndicatorPr = props.TabIndicatorProps,
|
||||
TabIndicatorProps = _props$TabIndicatorPr === void 0 ? {} : _props$TabIndicatorPr,
|
||||
TabScrollButtonProps = props.TabScrollButtonProps,
|
||||
_props$textColor = props.textColor,
|
||||
textColor = _props$textColor === void 0 ? 'inherit' : _props$textColor,
|
||||
value = props.value,
|
||||
_props$variant = props.variant,
|
||||
variant = _props$variant === void 0 ? 'standard' : _props$variant,
|
||||
other = (0, _objectWithoutProperties2.default)(props, ["aria-label", "aria-labelledby", "action", "centered", "children", "classes", "className", "component", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant"]);
|
||||
var theme = (0, _useTheme.default)();
|
||||
var scrollable = variant === 'scrollable';
|
||||
var isRtl = theme.direction === 'rtl';
|
||||
var vertical = orientation === 'vertical';
|
||||
var scrollStart = vertical ? 'scrollTop' : 'scrollLeft';
|
||||
var start = vertical ? 'top' : 'left';
|
||||
var end = vertical ? 'bottom' : 'right';
|
||||
var clientSize = vertical ? 'clientHeight' : 'clientWidth';
|
||||
var size = vertical ? 'height' : 'width';
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (centered && scrollable) {
|
||||
console.error('Material-UI: You can not use the `centered={true}` and `variant="scrollable"` properties ' + 'at the same time on a `Tabs` component.');
|
||||
}
|
||||
}
|
||||
|
||||
var _React$useState = React.useState(false),
|
||||
mounted = _React$useState[0],
|
||||
setMounted = _React$useState[1];
|
||||
|
||||
var _React$useState2 = React.useState({}),
|
||||
indicatorStyle = _React$useState2[0],
|
||||
setIndicatorStyle = _React$useState2[1];
|
||||
|
||||
var _React$useState3 = React.useState({
|
||||
start: false,
|
||||
end: false
|
||||
}),
|
||||
displayScroll = _React$useState3[0],
|
||||
setDisplayScroll = _React$useState3[1];
|
||||
|
||||
var _React$useState4 = React.useState({
|
||||
overflow: 'hidden',
|
||||
marginBottom: null
|
||||
}),
|
||||
scrollerStyle = _React$useState4[0],
|
||||
setScrollerStyle = _React$useState4[1];
|
||||
|
||||
var valueToIndex = new Map();
|
||||
var tabsRef = React.useRef(null);
|
||||
var tabListRef = React.useRef(null);
|
||||
|
||||
var getTabsMeta = function getTabsMeta() {
|
||||
var tabsNode = tabsRef.current;
|
||||
var tabsMeta;
|
||||
|
||||
if (tabsNode) {
|
||||
var rect = tabsNode.getBoundingClientRect(); // create a new object with ClientRect class props + scrollLeft
|
||||
|
||||
tabsMeta = {
|
||||
clientWidth: tabsNode.clientWidth,
|
||||
scrollLeft: tabsNode.scrollLeft,
|
||||
scrollTop: tabsNode.scrollTop,
|
||||
scrollLeftNormalized: (0, _scrollLeft.getNormalizedScrollLeft)(tabsNode, theme.direction),
|
||||
scrollWidth: tabsNode.scrollWidth,
|
||||
top: rect.top,
|
||||
bottom: rect.bottom,
|
||||
left: rect.left,
|
||||
right: rect.right
|
||||
};
|
||||
}
|
||||
|
||||
var tabMeta;
|
||||
|
||||
if (tabsNode && value !== false) {
|
||||
var _children = tabListRef.current.children;
|
||||
|
||||
if (_children.length > 0) {
|
||||
var tab = _children[valueToIndex.get(value)];
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (!tab) {
|
||||
console.error(["Material-UI: The value provided to the Tabs component is invalid.", "None of the Tabs' children match with `".concat(value, "`."), valueToIndex.keys ? "You can provide one of the following values: ".concat(Array.from(valueToIndex.keys()).join(', '), ".") : null].join('\n'));
|
||||
}
|
||||
}
|
||||
|
||||
tabMeta = tab ? tab.getBoundingClientRect() : null;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
tabsMeta: tabsMeta,
|
||||
tabMeta: tabMeta
|
||||
};
|
||||
};
|
||||
|
||||
var updateIndicatorState = (0, _useEventCallback.default)(function () {
|
||||
var _newIndicatorStyle;
|
||||
|
||||
var _getTabsMeta = getTabsMeta(),
|
||||
tabsMeta = _getTabsMeta.tabsMeta,
|
||||
tabMeta = _getTabsMeta.tabMeta;
|
||||
|
||||
var startValue = 0;
|
||||
|
||||
if (tabMeta && tabsMeta) {
|
||||
if (vertical) {
|
||||
startValue = tabMeta.top - tabsMeta.top + tabsMeta.scrollTop;
|
||||
} else {
|
||||
var correction = isRtl ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth : tabsMeta.scrollLeft;
|
||||
startValue = tabMeta.left - tabsMeta.left + correction;
|
||||
}
|
||||
}
|
||||
|
||||
var newIndicatorStyle = (_newIndicatorStyle = {}, (0, _defineProperty2.default)(_newIndicatorStyle, start, startValue), (0, _defineProperty2.default)(_newIndicatorStyle, size, tabMeta ? tabMeta[size] : 0), _newIndicatorStyle);
|
||||
|
||||
if (isNaN(indicatorStyle[start]) || isNaN(indicatorStyle[size])) {
|
||||
setIndicatorStyle(newIndicatorStyle);
|
||||
} else {
|
||||
var dStart = Math.abs(indicatorStyle[start] - newIndicatorStyle[start]);
|
||||
var dSize = Math.abs(indicatorStyle[size] - newIndicatorStyle[size]);
|
||||
|
||||
if (dStart >= 1 || dSize >= 1) {
|
||||
setIndicatorStyle(newIndicatorStyle);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var scroll = function scroll(scrollValue) {
|
||||
(0, _animate.default)(scrollStart, tabsRef.current, scrollValue);
|
||||
};
|
||||
|
||||
var moveTabsScroll = function moveTabsScroll(delta) {
|
||||
var scrollValue = tabsRef.current[scrollStart];
|
||||
|
||||
if (vertical) {
|
||||
scrollValue += delta;
|
||||
} else {
|
||||
scrollValue += delta * (isRtl ? -1 : 1); // Fix for Edge
|
||||
|
||||
scrollValue *= isRtl && (0, _scrollLeft.detectScrollType)() === 'reverse' ? -1 : 1;
|
||||
}
|
||||
|
||||
scroll(scrollValue);
|
||||
};
|
||||
|
||||
var handleStartScrollClick = function handleStartScrollClick() {
|
||||
moveTabsScroll(-tabsRef.current[clientSize]);
|
||||
};
|
||||
|
||||
var handleEndScrollClick = function handleEndScrollClick() {
|
||||
moveTabsScroll(tabsRef.current[clientSize]);
|
||||
};
|
||||
|
||||
var handleScrollbarSizeChange = React.useCallback(function (scrollbarHeight) {
|
||||
setScrollerStyle({
|
||||
overflow: null,
|
||||
marginBottom: -scrollbarHeight
|
||||
});
|
||||
}, []);
|
||||
|
||||
var getConditionalElements = function getConditionalElements() {
|
||||
var conditionalElements = {};
|
||||
conditionalElements.scrollbarSizeListener = scrollable ? /*#__PURE__*/React.createElement(_ScrollbarSize.default, {
|
||||
className: classes.scrollable,
|
||||
onChange: handleScrollbarSizeChange
|
||||
}) : null;
|
||||
var scrollButtonsActive = displayScroll.start || displayScroll.end;
|
||||
var showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === 'desktop' || scrollButtons === 'on');
|
||||
conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/React.createElement(ScrollButtonComponent, (0, _extends2.default)({
|
||||
orientation: orientation,
|
||||
direction: isRtl ? 'right' : 'left',
|
||||
onClick: handleStartScrollClick,
|
||||
disabled: !displayScroll.start,
|
||||
className: (0, _clsx.default)(classes.scrollButtons, scrollButtons !== 'on' && classes.scrollButtonsDesktop)
|
||||
}, TabScrollButtonProps)) : null;
|
||||
conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/React.createElement(ScrollButtonComponent, (0, _extends2.default)({
|
||||
orientation: orientation,
|
||||
direction: isRtl ? 'left' : 'right',
|
||||
onClick: handleEndScrollClick,
|
||||
disabled: !displayScroll.end,
|
||||
className: (0, _clsx.default)(classes.scrollButtons, scrollButtons !== 'on' && classes.scrollButtonsDesktop)
|
||||
}, TabScrollButtonProps)) : null;
|
||||
return conditionalElements;
|
||||
};
|
||||
|
||||
var scrollSelectedIntoView = (0, _useEventCallback.default)(function () {
|
||||
var _getTabsMeta2 = getTabsMeta(),
|
||||
tabsMeta = _getTabsMeta2.tabsMeta,
|
||||
tabMeta = _getTabsMeta2.tabMeta;
|
||||
|
||||
if (!tabMeta || !tabsMeta) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (tabMeta[start] < tabsMeta[start]) {
|
||||
// left side of button is out of view
|
||||
var nextScrollStart = tabsMeta[scrollStart] + (tabMeta[start] - tabsMeta[start]);
|
||||
scroll(nextScrollStart);
|
||||
} else if (tabMeta[end] > tabsMeta[end]) {
|
||||
// right side of button is out of view
|
||||
var _nextScrollStart = tabsMeta[scrollStart] + (tabMeta[end] - tabsMeta[end]);
|
||||
|
||||
scroll(_nextScrollStart);
|
||||
}
|
||||
});
|
||||
var updateScrollButtonState = (0, _useEventCallback.default)(function () {
|
||||
if (scrollable && scrollButtons !== 'off') {
|
||||
var _tabsRef$current = tabsRef.current,
|
||||
scrollTop = _tabsRef$current.scrollTop,
|
||||
scrollHeight = _tabsRef$current.scrollHeight,
|
||||
clientHeight = _tabsRef$current.clientHeight,
|
||||
scrollWidth = _tabsRef$current.scrollWidth,
|
||||
clientWidth = _tabsRef$current.clientWidth;
|
||||
var showStartScroll;
|
||||
var showEndScroll;
|
||||
|
||||
if (vertical) {
|
||||
showStartScroll = scrollTop > 1;
|
||||
showEndScroll = scrollTop < scrollHeight - clientHeight - 1;
|
||||
} else {
|
||||
var scrollLeft = (0, _scrollLeft.getNormalizedScrollLeft)(tabsRef.current, theme.direction); // use 1 for the potential rounding error with browser zooms.
|
||||
|
||||
showStartScroll = isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
|
||||
showEndScroll = !isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
|
||||
}
|
||||
|
||||
if (showStartScroll !== displayScroll.start || showEndScroll !== displayScroll.end) {
|
||||
setDisplayScroll({
|
||||
start: showStartScroll,
|
||||
end: showEndScroll
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
React.useEffect(function () {
|
||||
var handleResize = (0, _debounce.default)(function () {
|
||||
updateIndicatorState();
|
||||
updateScrollButtonState();
|
||||
});
|
||||
var win = (0, _ownerWindow.default)(tabsRef.current);
|
||||
win.addEventListener('resize', handleResize);
|
||||
return function () {
|
||||
handleResize.clear();
|
||||
win.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}, [updateIndicatorState, updateScrollButtonState]);
|
||||
var handleTabsScroll = React.useCallback((0, _debounce.default)(function () {
|
||||
updateScrollButtonState();
|
||||
}));
|
||||
React.useEffect(function () {
|
||||
return function () {
|
||||
handleTabsScroll.clear();
|
||||
};
|
||||
}, [handleTabsScroll]);
|
||||
React.useEffect(function () {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
React.useEffect(function () {
|
||||
updateIndicatorState();
|
||||
updateScrollButtonState();
|
||||
});
|
||||
React.useEffect(function () {
|
||||
scrollSelectedIntoView();
|
||||
}, [scrollSelectedIntoView, indicatorStyle]);
|
||||
React.useImperativeHandle(action, function () {
|
||||
return {
|
||||
updateIndicator: updateIndicatorState,
|
||||
updateScrollButtons: updateScrollButtonState
|
||||
};
|
||||
}, [updateIndicatorState, updateScrollButtonState]);
|
||||
var indicator = /*#__PURE__*/React.createElement(_TabIndicator.default, (0, _extends2.default)({
|
||||
className: classes.indicator,
|
||||
orientation: orientation,
|
||||
color: indicatorColor
|
||||
}, TabIndicatorProps, {
|
||||
style: (0, _extends2.default)({}, indicatorStyle, TabIndicatorProps.style)
|
||||
}));
|
||||
var childIndex = 0;
|
||||
var children = React.Children.map(childrenProp, function (child) {
|
||||
if (! /*#__PURE__*/React.isValidElement(child)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if ((0, _reactIs.isFragment)(child)) {
|
||||
console.error(["Material-UI: The Tabs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
||||
}
|
||||
}
|
||||
|
||||
var childValue = child.props.value === undefined ? childIndex : child.props.value;
|
||||
valueToIndex.set(childValue, childIndex);
|
||||
var selected = childValue === value;
|
||||
childIndex += 1;
|
||||
return /*#__PURE__*/React.cloneElement(child, {
|
||||
fullWidth: variant === 'fullWidth',
|
||||
indicator: selected && !mounted && indicator,
|
||||
selected: selected,
|
||||
selectionFollowsFocus: selectionFollowsFocus,
|
||||
onChange: onChange,
|
||||
textColor: textColor,
|
||||
value: childValue
|
||||
});
|
||||
});
|
||||
|
||||
var handleKeyDown = function handleKeyDown(event) {
|
||||
var target = event.target; // Keyboard navigation assumes that [role="tab"] are siblings
|
||||
// though we might warn in the future about nested, interactive elements
|
||||
// as a a11y violation
|
||||
|
||||
var role = target.getAttribute('role');
|
||||
|
||||
if (role !== 'tab') {
|
||||
return;
|
||||
}
|
||||
|
||||
var newFocusTarget = null;
|
||||
var previousItemKey = orientation !== "vertical" ? 'ArrowLeft' : 'ArrowUp';
|
||||
var nextItemKey = orientation !== "vertical" ? 'ArrowRight' : 'ArrowDown';
|
||||
|
||||
if (orientation !== "vertical" && theme.direction === 'rtl') {
|
||||
// swap previousItemKey with nextItemKey
|
||||
previousItemKey = 'ArrowRight';
|
||||
nextItemKey = 'ArrowLeft';
|
||||
}
|
||||
|
||||
switch (event.key) {
|
||||
case previousItemKey:
|
||||
newFocusTarget = target.previousElementSibling || tabListRef.current.lastChild;
|
||||
break;
|
||||
|
||||
case nextItemKey:
|
||||
newFocusTarget = target.nextElementSibling || tabListRef.current.firstChild;
|
||||
break;
|
||||
|
||||
case 'Home':
|
||||
newFocusTarget = tabListRef.current.firstChild;
|
||||
break;
|
||||
|
||||
case 'End':
|
||||
newFocusTarget = tabListRef.current.lastChild;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (newFocusTarget !== null) {
|
||||
newFocusTarget.focus();
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
var conditionalElements = getConditionalElements();
|
||||
return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({
|
||||
className: (0, _clsx.default)(classes.root, className, vertical && classes.vertical),
|
||||
ref: ref
|
||||
}, other), conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, /*#__PURE__*/React.createElement("div", {
|
||||
className: (0, _clsx.default)(classes.scroller, scrollable ? classes.scrollable : classes.fixed),
|
||||
style: scrollerStyle,
|
||||
ref: tabsRef,
|
||||
onScroll: handleTabsScroll
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
"aria-label": ariaLabel,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
className: (0, _clsx.default)(classes.flexContainer, vertical && classes.flexContainerVertical, centered && !scrollable && classes.centered),
|
||||
onKeyDown: handleKeyDown,
|
||||
ref: tabListRef,
|
||||
role: "tablist"
|
||||
}, children), mounted && indicator), conditionalElements.scrollButtonEnd);
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? Tabs.propTypes = {
|
||||
// ----------------------------- Warning --------------------------------
|
||||
// | These PropTypes are generated from the TypeScript type definitions |
|
||||
// | To update them edit the d.ts file and run "yarn proptypes" |
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Callback fired when the component mounts.
|
||||
* This is useful when you want to trigger an action programmatically.
|
||||
* It supports two actions: `updateIndicator()` and `updateScrollButtons()`
|
||||
*
|
||||
* @param {object} actions This object contains all possible actions
|
||||
* that can be triggered programmatically.
|
||||
*/
|
||||
action: _utils.refType,
|
||||
|
||||
/**
|
||||
* The label for the Tabs as a string.
|
||||
*/
|
||||
'aria-label': _propTypes.default.string,
|
||||
|
||||
/**
|
||||
* An id or list of ids separated by a space that label the Tabs.
|
||||
*/
|
||||
'aria-labelledby': _propTypes.default.string,
|
||||
|
||||
/**
|
||||
* If `true`, the tabs will be centered.
|
||||
* This property is intended for large views.
|
||||
*/
|
||||
centered: _propTypes.default.bool,
|
||||
|
||||
/**
|
||||
* The content of the component.
|
||||
*/
|
||||
children: _propTypes.default.node,
|
||||
|
||||
/**
|
||||
* Override or extend the styles applied to the component.
|
||||
* See [CSS API](#css) below for more details.
|
||||
*/
|
||||
classes: _propTypes.default.object,
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
className: _propTypes.default.string,
|
||||
|
||||
/**
|
||||
* The component used for the root node.
|
||||
* Either a string to use a HTML element or a component.
|
||||
*/
|
||||
component: _propTypes.default
|
||||
/* @typescript-to-proptypes-ignore */
|
||||
.elementType,
|
||||
|
||||
/**
|
||||
* Determines the color of the indicator.
|
||||
*/
|
||||
indicatorColor: _propTypes.default.oneOf(['primary', 'secondary']),
|
||||
|
||||
/**
|
||||
* 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 (number)
|
||||
*/
|
||||
onChange: _propTypes.default.func,
|
||||
|
||||
/**
|
||||
* The tabs orientation (layout flow direction).
|
||||
*/
|
||||
orientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
|
||||
|
||||
/**
|
||||
* The component used to render the scroll buttons.
|
||||
*/
|
||||
ScrollButtonComponent: _propTypes.default.elementType,
|
||||
|
||||
/**
|
||||
* Determine behavior of scroll buttons when tabs are set to scroll:
|
||||
*
|
||||
* - `auto` will only present them when not all the items are visible.
|
||||
* - `desktop` will only present them on medium and larger viewports.
|
||||
* - `on` will always present them.
|
||||
* - `off` will never present them.
|
||||
*/
|
||||
scrollButtons: _propTypes.default.oneOf(['auto', 'desktop', 'off', 'on']),
|
||||
|
||||
/**
|
||||
* If `true` the selected tab changes on focus. Otherwise it only
|
||||
* changes on activation.
|
||||
*/
|
||||
selectionFollowsFocus: _propTypes.default.bool,
|
||||
|
||||
/**
|
||||
* Props applied to the tab indicator element.
|
||||
*/
|
||||
TabIndicatorProps: _propTypes.default.object,
|
||||
|
||||
/**
|
||||
* Props applied to the [`TabScrollButton`](/api/tab-scroll-button/) element.
|
||||
*/
|
||||
TabScrollButtonProps: _propTypes.default.object,
|
||||
|
||||
/**
|
||||
* Determines the color of the `Tab`.
|
||||
*/
|
||||
textColor: _propTypes.default.oneOf(['inherit', 'primary', 'secondary']),
|
||||
|
||||
/**
|
||||
* The value of the currently selected `Tab`.
|
||||
* If you don't want any selected `Tab`, you can set this property to `false`.
|
||||
*/
|
||||
value: _propTypes.default.any,
|
||||
|
||||
/**
|
||||
* Determines additional display behavior of the tabs:
|
||||
*
|
||||
* - `scrollable` will invoke scrolling properties and allow for horizontally
|
||||
* scrolling (or swiping) of the tab bar.
|
||||
* -`fullWidth` will make the tabs grow to use all the available space,
|
||||
* which should be used for small views, like on mobile.
|
||||
* - `standard` will render the default state.
|
||||
*/
|
||||
variant: _propTypes.default.oneOf(['fullWidth', 'scrollable', 'standard'])
|
||||
} : void 0;
|
||||
|
||||
var _default = (0, _withStyles.default)(styles, {
|
||||
name: 'MuiTabs'
|
||||
})(Tabs);
|
||||
|
||||
exports.default = _default;
|
||||
2
web/node_modules/@material-ui/core/Tabs/index.d.ts
generated
vendored
Normal file
2
web/node_modules/@material-ui/core/Tabs/index.d.ts
generated
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export { default } from './Tabs';
|
||||
export * from './Tabs';
|
||||
15
web/node_modules/@material-ui/core/Tabs/index.js
generated
vendored
Normal file
15
web/node_modules/@material-ui/core/Tabs/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
Object.defineProperty(exports, "default", {
|
||||
enumerable: true,
|
||||
get: function get() {
|
||||
return _Tabs.default;
|
||||
}
|
||||
});
|
||||
|
||||
var _Tabs = _interopRequireDefault(require("./Tabs"));
|
||||
5
web/node_modules/@material-ui/core/Tabs/package.json
generated
vendored
Normal file
5
web/node_modules/@material-ui/core/Tabs/package.json
generated
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"sideEffects": false,
|
||||
"module": "../esm/Tabs/index.js",
|
||||
"typings": "./index.d.ts"
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue