@mui-treasury/mockup
Version:
350 lines (307 loc) • 17.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _core = require("@material-ui/core");
var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
var _Refresh = _interopRequireDefault(require("@material-ui/icons/Refresh"));
var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));
var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));
var _Settings = _interopRequireDefault(require("@material-ui/icons/Settings"));
var _Keyboard = _interopRequireDefault(require("@material-ui/icons/Keyboard"));
var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
var _Inbox = _interopRequireDefault(require("@material-ui/icons/Inbox"));
var _LocalOffer = _interopRequireDefault(require("@material-ui/icons/LocalOffer"));
var _People = _interopRequireDefault(require("@material-ui/icons/People"));
var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
var _sized = require("@mui-treasury/styles/iconButton/sized");
var _row = require("@mui-treasury/styles/gutter/row");
var _arrow = _interopRequireDefault(require("@mui-treasury/components/menu/arrow"));
var _gmail = require("@mui-treasury/components/tabs/gmail");
var _MailListItem = _interopRequireDefault(require("./MailListItem"));
var _AppFooter = _interopRequireDefault(require("./AppFooter"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _templateObject2() {
var data = _taggedTemplateLiteral(["\n height: calc(100vh - (64px + 48px));\n overflow: scroll;\n \n &::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }\n &::-webkit-scrollbar-track {\n &:hover {\n background-color: rgba(0,0,0,0.04);\n box-shadow: inset 1px 0 0 rgba(0,0,0,0.1)\n }\n }\n &::-webkit-scrollbar-button {\n width: 0;\n height: 0;\n display: none;\n }\n &::-webkit-scrollbar-corner {\n background-color: transparent;\n }\n &::-webkit-scrollbar-thumb {\n background-color: rgba(0,0,0,0.2);\n box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10), inset 0 -1px 0 rgba(0,0,0,0.07);\n &:hover {\n background-color: rgba(0,0,0,0.38);\n }\n }\n"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteral(["\n height: 48px;\n padding: 0 16px;\n box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.122);\n display: flex;\n align-items: center;\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var Toolbar = (0, _styledComponents["default"])("div")(_templateObject());
var ScrollView = (0, _styledComponents["default"])('div')(_templateObject2());
var useStyles = (0, _core.makeStyles)(function () {
return {
root: {
fontSize: 14,
paddingLeft: 32,
width: 160
}
};
});
var useCheckboxStyles = (0, _core.makeStyles)(function (_ref) {
var palette = _ref.palette;
return {
checked: {
color: palette.text.primary
}
};
});
var AppContent = function AppContent(_ref2) {
var onTabIndexChange = _ref2.onTabIndexChange;
var actionStyles = (0, _sized.useSizedIconButtonStyles)({
padding: 8,
childSize: 20
});
var gutterStyles = (0, _row.useRowGutterStyles)({
size: "0.25rem"
});
var menuItemClasses = useStyles();
var checkboxClasses = useCheckboxStyles();
var _React$useState = _react["default"].useState(0),
_React$useState2 = _slicedToArray(_React$useState, 2),
index = _React$useState2[0],
setIndex = _React$useState2[1];
_react["default"].useEffect(function () {
onTabIndexChange(index);
}, [index, onTabIndexChange]);
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Toolbar, null, /*#__PURE__*/_react["default"].createElement(_core.Box, {
display: "inline-flex",
className: gutterStyles.parent
}, /*#__PURE__*/_react["default"].createElement(_arrow["default"], {
renderElement: function renderElement(_ref3) {
var styles = _ref3.styles,
onClose = _ref3.onClose;
return /*#__PURE__*/_react["default"].createElement(_core.Checkbox, {
classes: checkboxClasses,
className: styles.button,
color: "default",
onChange: onClose
});
}
}, /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
classes: menuItemClasses
}, "All"), /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
classes: menuItemClasses
}, "None"), /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
classes: menuItemClasses
}, "Read"), /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
classes: menuItemClasses
}, "Unread")), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
classes: actionStyles
}, /*#__PURE__*/_react["default"].createElement(_Refresh["default"], null)), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
classes: actionStyles
}, /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null))), /*#__PURE__*/_react["default"].createElement(_core.Box, {
display: "inline-flex",
alignItems: "center",
ml: "auto",
className: gutterStyles.parent
}, /*#__PURE__*/_react["default"].createElement(_core.Box, {
fontSize: 12,
color: "text.secondary"
}, "1-50 of 1,971"), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
disabled: true,
classes: actionStyles
}, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowLeft["default"], null)), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
classes: actionStyles
}, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowRight["default"], null)), /*#__PURE__*/_react["default"].createElement(_arrow["default"], {
renderElement: function renderElement(_ref4) {
var styles = _ref4.styles,
onClose = _ref4.onClose;
return /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
className: styles.button,
color: "default",
onChange: onClose
}, /*#__PURE__*/_react["default"].createElement(_Keyboard["default"], null));
}
}, /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
classes: menuItemClasses
}, /*#__PURE__*/_react["default"].createElement(_core.ListItemIcon, {
style: {
minWidth: 32
}
}, /*#__PURE__*/_react["default"].createElement(_Edit["default"], {
fontSize: "small"
})), "English")), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
classes: actionStyles
}, /*#__PURE__*/_react["default"].createElement(_Settings["default"], null)))), /*#__PURE__*/_react["default"].createElement(ScrollView, null, /*#__PURE__*/_react["default"].createElement(_gmail.GmailTabs, {
value: index,
onChange: function onChange(_, value) {
return setIndex(value);
}
}, /*#__PURE__*/_react["default"].createElement(_gmail.GmailTabItem, {
icon: /*#__PURE__*/_react["default"].createElement(_Inbox["default"], null),
label: "Primary"
}), /*#__PURE__*/_react["default"].createElement(_gmail.GmailTabItem, {
icon: /*#__PURE__*/_react["default"].createElement(_People["default"], null),
label: "Social",
tag: "2 new",
subLabel: "Youtube, LinkedIn"
}), /*#__PURE__*/_react["default"].createElement(_gmail.GmailTabItem, {
icon: /*#__PURE__*/_react["default"].createElement(_LocalOffer["default"], null),
label: "Promotions",
subLabel: "Pattern Matching, Medium Daily"
}), /*#__PURE__*/_react["default"].createElement(_gmail.GmailTabItem, {
icon: /*#__PURE__*/_react["default"].createElement(_Info["default"], null),
label: "Updates",
tag: "15 new"
})), getMailList().map(function (mail, i) {
return /*#__PURE__*/_react["default"].createElement(_MailListItem["default"], _extends({
key: i
}, mail));
}), /*#__PURE__*/_react["default"].createElement(_AppFooter["default"], null)));
};
var getMailList = function getMailList() {
return [{
starred: true,
labeled: true,
title: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("b", null, "Grab"), /*#__PURE__*/_react["default"].createElement("span", null, "3")),
description: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("b", null, "Your Grab E-Receipt"), " - \u0E17\u0E32\u0E19\u0E2D\u0E32\u0E2B\u0E32\u0E23\u0E43\u0E2B\u0E49\u0E2D\u0E23\u0E48\u0E2D\u0E22! \u0E23\u0E27\u0E21 THB 220 \u0E27\u0E31\u0E19\u0E17\u0E35\u0E48 | \u0E40\u0E27\u0E25\u0E32 21 May 20 08:39 +0700 \u0E23\u0E32\u0E22\u0E25\u0E30\u0E40\u0E2D\u0E35\u0E22\u0E14\u0E01\u0E32\u0E23\u0E40\u0E14\u0E34\u0E19\u0E17\u0E32\u0E07 GrabFood \u0E0A\u0E37\u0E48\u0E2D\u0E1C\u0E39\u0E49\u0E02\u0E31\u0E1A (GFH)xxx \u0E0A\u0E37\u0E48\u0E2D\u0E1C\u0E39\u0E49\u0E40\u0E14\u0E34\u0E19\u0E17\u0E32\u0E07 xxx \u0E23\u0E2B\u0E31\u0E2A\u0E01\u0E32\u0E23\u0E08\u0E2D\u0E07 IOS-91396443-9-056 \u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48"),
date: /*#__PURE__*/_react["default"].createElement("b", null, "May 21")
}, {
labeled: true,
read: true,
title: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, "Kunwar, me"), /*#__PURE__*/_react["default"].createElement("span", null, "8")),
description: "MUI Treasury - A Quick Question and Thank you :)",
date: "May 21"
}, {
labeled: true,
read: true,
title: "Google",
description: "Security alert - iMovie was granted access to your Google Account xxx If you did not grant access, you should check this activity and secure your account. Check activity You received this email to",
date: "May 20"
}, {
labeled: true,
read: true,
title: "Alexandre Teyar",
description: "[siriwatknp/mui-treasury] New component suggestion -> InsetHeader (#817)",
date: "May 18"
}, {
read: true,
title: "Google",
description: "2-Step Verification turned on - 2-Step Verification turned on xxx Your Google Account xxx is now protected with 2-Step Verification. When you sign in on a new or untrusted device, you",
date: "May 20"
}, {
read: true,
labeled: true,
title: "Olivier Tassinari",
description: "Re: [mui-org/material-ui] [docs] Improve mui-treasury integration (#21054)",
date: "May 16"
}, {
read: true,
labeled: true,
title: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, "Olivier Tassinari"), /*#__PURE__*/_react["default"].createElement("span", null, "2")),
description: "Re: [mui-org/material-ui] [docs] Improve mui-treasury integration (#21054)",
date: "May 16"
}, {
read: true,
labeled: true,
title: "Sebastian Silbermann",
description: "Re: [mui-org/material-ui] [docs] update links to mui-treasury (#21054)",
date: "May 16"
}, {
labeled: true,
title: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, "James, me, ", /*#__PURE__*/_react["default"].createElement("b", null, "James")), /*#__PURE__*/_react["default"].createElement("span", null, "3")),
description: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("b", null, "Hello Jun!"), " - Ok, so I am building a career discovery platform. The user should be able to register or sign in, then explore an interactive career path tool, ask questions or"),
date: /*#__PURE__*/_react["default"].createElement("b", null, "May 15")
}, {
read: true,
labeled: true,
title: "Alexandre Teyar",
description: "[siriwatknp/mui-treasury] [Discussion] Nested menu (#798)",
date: "May 14"
}, {
read: true,
labeled: true,
title: "Aaron Hayes",
description: "[siriwatknp/mui-treasury] [Discussion] Form Components (#792)",
date: "May 14"
}, {
read: true,
labeled: true,
title: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, "Olivier Tassinari"), /*#__PURE__*/_react["default"].createElement("span", null, "6")),
description: "[mui-org/material-ui] [core] Batch small changes (#20877)",
date: "May 4"
}, {
read: true,
labeled: true,
title: "webface",
description: "Re: [siriwatknp/mui-treasury] Overlay does not appear in mobile breakpoint other than with a preset config (#686)",
date: "May 3"
}, {
read: true,
label: true,
title: "Alexandre Teyar",
description: "Re: [siriwatknp/mui-treasury] Header default config not working (#714)",
date: "May 3"
}, {
read: true,
labeled: true,
title: "Siriwat",
description: "Re: [siriwatknp/mui-treasury] Overlay does not appear in mobile breakpoint other than with a preset config (#686)",
date: "Apr 29"
}, {
read: true,
label: true,
title: "Mine",
description: "Re: [siriwatknp/mui-treasury] Header default config not working (#714)",
date: "Apr 29"
}, {
labeled: true,
title: "webface",
description: "Re: [siriwatknp/mui-treasury] Overlay does not appear in mobile breakpoint other than with a preset config (#686)",
date: "Apr 28"
}, {
read: true,
label: true,
title: "Alexandre Teyar",
description: "Re: [siriwatknp/mui-treasury] Header default config not working (#714)",
date: "Apr 22"
}, {
title: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("b", null, "allcontributors[bot]"), /*#__PURE__*/_react["default"].createElement("span", null, "2")),
description: /*#__PURE__*/_react["default"].createElement("b", null, "[siriwatknp/mui-treasury] docs: add pacurtin as a contributor (#678)"),
date: "Apr 22"
}, {
title: /*#__PURE__*/_react["default"].createElement("b", null, "allcontributors[bot]"),
description: /*#__PURE__*/_react["default"].createElement("b", null, "[siriwatknp/mui-treasury] docs: add aress31 as a contributor (#679)"),
date: "Apr 22"
}, {
read: true,
label: true,
title: "Alice Wonder",
description: "Lead / Senior Engineers For Bangkok",
date: "Apr 21"
}, {
read: true,
labeled: true,
title: "webface",
description: "Re: [siriwatknp/mui-treasury] Overlay does not appear in mobile breakpoint other than with a preset config (#686)",
date: "Mar 30"
}, {
read: true,
label: true,
title: "Alexandre Teyar",
description: "Re: [siriwatknp/mui-treasury] Header default config not working (#714)",
date: "Mar 27"
}];
};
var _default = AppContent;
exports["default"] = _default;