UNPKG

@mui/material

Version:

React components that implement Google's Material Design.

132 lines (131 loc) 6.08 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); var React = _interopRequireWildcard(require("react")); var _reactIs = require("react-is"); var _propTypes = _interopRequireDefault(require("prop-types")); var _clsx = _interopRequireDefault(require("clsx")); var _base = require("@mui/base"); var _styled = _interopRequireDefault(require("../styles/styled")); var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps")); var _bottomNavigationClasses = require("./bottomNavigationClasses"); var _jsxRuntime = require("react/jsx-runtime"); const _excluded = ["children", "className", "component", "onChange", "showLabels", "value"]; function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } const useUtilityClasses = ownerState => { const { classes } = ownerState; const slots = { root: ['root'] }; return (0, _base.unstable_composeClasses)(slots, _bottomNavigationClasses.getBottomNavigationUtilityClass, classes); }; const BottomNavigationRoot = (0, _styled.default)('div', { name: 'MuiBottomNavigation', slot: 'Root', overridesResolver: (props, styles) => styles.root })(({ theme }) => ({ display: 'flex', justifyContent: 'center', height: 56, backgroundColor: (theme.vars || theme).palette.background.paper })); const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation(inProps, ref) { const props = (0, _useThemeProps.default)({ props: inProps, name: 'MuiBottomNavigation' }); const { children, className, component = 'div', onChange, showLabels = false, value } = props, other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded); const ownerState = (0, _extends2.default)({}, props, { component, showLabels }); const classes = useUtilityClasses(ownerState); return /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomNavigationRoot, (0, _extends2.default)({ as: component, className: (0, _clsx.default)(classes.root, className), ref: ref, ownerState: ownerState }, other, { children: React.Children.map(children, (child, childIndex) => { if (! /*#__PURE__*/React.isValidElement(child)) { return null; } if (process.env.NODE_ENV !== 'production') { if ((0, _reactIs.isFragment)(child)) { console.error(["MUI: 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 /* remove-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.default.node, /** * Override or extend the styles applied to the component. */ 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.elementType, /** * Callback fired when the value changes. * * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event. * @param {any} value We default to the index of the child. */ onChange: _propTypes.default.func, /** * If `true`, all `BottomNavigationAction`s will show their labels. * By default, only the selected `BottomNavigationAction` will show its label. * @default false */ showLabels: _propTypes.default.bool, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]), /** * The value of the currently selected `BottomNavigationAction`. */ value: _propTypes.default.any } : void 0; var _default = BottomNavigation; exports.default = _default;