@bootstrap-styled/ra-ui
Version:
UI components for react-admin
243 lines (198 loc) • 9.28 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactRedux = require("react-redux");
var _classnames = _interopRequireDefault(require("classnames"));
var _reactRouter = require("react-router");
var _styles = require("@material-ui/core/styles");
var _compose = _interopRequireDefault(require("recompose/compose"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _breakpoints = require("@bootstrap-styled/css-mixins/lib/breakpoints");
var _AppBar = _interopRequireDefault(require("./AppBar"));
var _Sidebar = _interopRequireDefault(require("./Sidebar"));
var _Menu = _interopRequireDefault(require("./Menu"));
var _Notification = _interopRequireDefault(require("./Notification"));
var _Error = _interopRequireDefault(require("./Error"));
var _theme = _interopRequireDefault(require("../theme"));
var LayoutWrapper = _styledComponents.default.div.withConfig({
displayName: "Layout__LayoutWrapper",
componentId: "sc-10gnawj-0"
})(["", ""], function (props) {
return "\n display: flex;\n flex-direction: column;\n z-index: 1;\n background-color: ".concat(props.theme['$body-bg'], ";\n position: relative;\n min-width: fit-content;\n width: 100%;\n ");
});
var LayoutFrame = _styledComponents.default.div.withConfig({
displayName: "Layout__LayoutFrame",
componentId: "sc-10gnawj-1"
})(["display:flex;flex-direction:column;min-height:100vh;"]);
var ContentWithSidebar = _styledComponents.default.main.withConfig({
displayName: "Layout__ContentWithSidebar",
componentId: "sc-10gnawj-2"
})(["display:flex;flex-grow:1;"]);
var Content = _styledComponents.default.div.attrs({
className: 'layout-content'
}).withConfig({
displayName: "Layout__Content",
componentId: "sc-10gnawj-3"
})(["", ""], function (props) {
return "\n &.layout-content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n padding: 24px;\n ".concat((0, _breakpoints.mediaBreakpointDown)('md', props.theme['$grid-breakpoints'], "\n padding: 0;\n "), "\n ").concat((0, _breakpoints.mediaBreakpointDown)('xs', props.theme['$grid-breakpoints'], "\n padding-left: 5rem;\n "), "\n ").concat((0, _breakpoints.mediaBreakpointDown)('xs', props.theme['$grid-breakpoints'], "\n padding-left: 0rem;\n "), "\n }\n ");
});
var componentPropType = _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]);
var sanitizeRestProps = function sanitizeRestProps(_ref) {
var staticContext = _ref.staticContext,
history = _ref.history,
location = _ref.location,
match = _ref.match,
props = (0, _objectWithoutProperties2.default)(_ref, ["staticContext", "history", "location", "match"]);
return props;
};
var Layout = function (_Component) {
(0, _inherits2.default)(Layout, _Component);
function Layout(props) {
var _this;
(0, _classCallCheck2.default)(this, Layout);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Layout).call(this, props));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
hasError: false,
errorMessage: null,
errorInfo: null
});
props.history.listen(function () {
if (_this.state.hasError) {
_this.setState({
hasError: false
});
}
});
return _this;
}
(0, _createClass2.default)(Layout, [{
key: "componentDidCatch",
value: function componentDidCatch(errorMessage, errorInfo) {
this.setState({
hasError: true,
errorMessage: errorMessage,
errorInfo: errorInfo
});
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
appBar = _this$props.appBar,
children = _this$props.children,
className = _this$props.className,
customRoutes = _this$props.customRoutes,
error = _this$props.error,
dashboard = _this$props.dashboard,
logout = _this$props.logout,
menu = _this$props.menu,
notification = _this$props.notification,
open = _this$props.open,
sidebar = _this$props.sidebar,
title = _this$props.title,
props = (0, _objectWithoutProperties2.default)(_this$props, ["appBar", "children", "className", "customRoutes", "error", "dashboard", "logout", "menu", "notification", "open", "sidebar", "title"]);
var _this$state = this.state,
hasError = _this$state.hasError,
errorMessage = _this$state.errorMessage,
errorInfo = _this$state.errorInfo;
return _react.default.createElement(LayoutWrapper, (0, _extends2.default)({
className: (0, _classnames.default)('layout', className)
}, sanitizeRestProps(props)), _react.default.createElement(LayoutFrame, null, (0, _react.createElement)(appBar, {
title: title,
open: open,
logout: logout
}), _react.default.createElement(ContentWithSidebar, null, (0, _react.createElement)(sidebar, {
children: (0, _react.createElement)(menu, {
logout: logout,
hasDashboard: !!dashboard
})
}), _react.default.createElement(Content, null, hasError ? (0, _react.createElement)(error, {
error: errorMessage,
errorInfo: errorInfo,
title: title
}) : children)), (0, _react.createElement)(notification)));
}
}]);
return Layout;
}(_react.Component);
Layout.propTypes = {
appBar: componentPropType,
children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
className: _propTypes.default.string,
customRoutes: _propTypes.default.array,
dashboard: componentPropType,
error: componentPropType,
history: _propTypes.default.object.isRequired,
logout: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func, _propTypes.default.string]),
menu: componentPropType,
notification: componentPropType,
open: _propTypes.default.bool,
sidebar: componentPropType,
title: _propTypes.default.node.isRequired
};
Layout.defaultProps = {
appBar: _AppBar.default,
error: _Error.default,
menu: _Menu.default,
notification: _Notification.default,
sidebar: _Sidebar.default
};
var mapStateToProps = function mapStateToProps(state) {
return {
open: state.admin.ui.sidebarOpen
};
};
var EnhancedLayout = (0, _compose.default)((0, _reactRedux.connect)(mapStateToProps, {}), _reactRouter.withRouter)(Layout);
var LayoutWithTheme = function (_Component2) {
(0, _inherits2.default)(LayoutWithTheme, _Component2);
function LayoutWithTheme(props) {
var _this2;
(0, _classCallCheck2.default)(this, LayoutWithTheme);
_this2 = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(LayoutWithTheme).call(this, props));
_this2.theme = (0, _styles.createMuiTheme)(props.theme);
return _this2;
}
(0, _createClass2.default)(LayoutWithTheme, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if (nextProps.theme !== this.props.theme) {
this.theme = (0, _styles.createMuiTheme)(nextProps.theme);
}
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
theme = _this$props2.theme,
rest = (0, _objectWithoutProperties2.default)(_this$props2, ["theme"]);
return _react.default.createElement(_styles.MuiThemeProvider, {
theme: this.theme
}, _react.default.createElement(EnhancedLayout, rest));
}
}]);
return LayoutWithTheme;
}(_react.Component);
LayoutWithTheme.propTypes = {
theme: _propTypes.default.object
};
LayoutWithTheme.defaultProps = {
theme: _theme.default
};
var _default = LayoutWithTheme;
exports.default = _default;
module.exports = exports.default;