@wireapp/react-ui-kit 8.17.3 → 8.17.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -7
- package/src/Form/Button.js +8 -8
- package/src/Form/Button.js.map +1 -1
- package/src/Form/ButtonLink.js +7 -7
- package/src/Form/ButtonLink.js.map +1 -1
- package/src/Form/Checkbox.js +19 -19
- package/src/Form/Checkbox.js.map +1 -1
- package/src/Form/CodeInput.js +13 -9
- package/src/Form/CodeInput.js.map +1 -1
- package/src/Form/DropFileInput.js +15 -10
- package/src/Form/DropFileInput.js.map +1 -1
- package/src/Form/ErrorMessage.js +8 -8
- package/src/Form/ErrorMessage.js.map +1 -1
- package/src/Form/Form.js +3 -3
- package/src/Form/Form.js.map +1 -1
- package/src/Form/Input.js +16 -10
- package/src/Form/Input.js.map +1 -1
- package/src/Form/InputBlock.js +6 -27
- package/src/Form/InputBlock.js.map +1 -1
- package/src/Form/InputLabel.js +6 -5
- package/src/Form/InputLabel.js.map +1 -1
- package/src/Form/InputSubmitCombo.js +10 -10
- package/src/Form/InputSubmitCombo.js.map +1 -1
- package/src/Form/RangeInput.js +7 -6
- package/src/Form/RangeInput.js.map +1 -1
- package/src/Form/RangeInput.styles.js +3 -4
- package/src/Form/RangeInput.styles.js.map +1 -1
- package/src/Form/RoundIconButton.js +8 -7
- package/src/Form/RoundIconButton.js.map +1 -1
- package/src/Form/Select.js +8 -7
- package/src/Form/Select.js.map +1 -1
- package/src/Form/SelectComponents.js +17 -15
- package/src/Form/SelectComponents.js.map +1 -1
- package/src/Form/SelectStyles.js +2 -3
- package/src/Form/SelectStyles.js.map +1 -1
- package/src/Form/ShakeBox.js +8 -25
- package/src/Form/ShakeBox.js.map +1 -1
- package/src/Form/Switch.js +6 -6
- package/src/Form/Switch.js.map +1 -1
- package/src/Form/TextArea.js +5 -5
- package/src/Form/TextArea.js.map +1 -1
- package/src/Form/Tooltip.js +6 -5
- package/src/Form/Tooltip.js.map +1 -1
- package/src/GlobalStyle.js +3 -3
- package/src/GlobalStyle.js.map +1 -1
- package/src/Icon/AddPeopleIcon.js +4 -26
- package/src/Icon/AddPeopleIcon.js.map +1 -1
- package/src/Icon/ArchiveIcon.js +2 -24
- package/src/Icon/ArchiveIcon.js.map +1 -1
- package/src/Icon/ArrowDown.js +5 -24
- package/src/Icon/ArrowDown.js.map +1 -1
- package/src/Icon/ArrowIcon.js +5 -5
- package/src/Icon/ArrowIcon.js.map +1 -1
- package/src/Icon/AttachmentIcon.js +2 -24
- package/src/Icon/AttachmentIcon.js.map +1 -1
- package/src/Icon/AudioVideoIcon.js +2 -24
- package/src/Icon/AudioVideoIcon.js.map +1 -1
- package/src/Icon/BlockIcon.js +2 -24
- package/src/Icon/BlockIcon.js.map +1 -1
- package/src/Icon/Brand/AndroidIcon.js +2 -24
- package/src/Icon/Brand/AndroidIcon.js.map +1 -1
- package/src/Icon/Brand/AppleIcon.js +2 -24
- package/src/Icon/Brand/AppleIcon.js.map +1 -1
- package/src/Icon/Brand/ChromeIcon.js +2 -24
- package/src/Icon/Brand/ChromeIcon.js.map +1 -1
- package/src/Icon/Brand/FacebookIcon.js +2 -24
- package/src/Icon/Brand/FacebookIcon.js.map +1 -1
- package/src/Icon/Brand/GitHubIcon.js +2 -24
- package/src/Icon/Brand/GitHubIcon.js.map +1 -1
- package/src/Icon/Brand/LinkedInIcon.js +2 -24
- package/src/Icon/Brand/LinkedInIcon.js.map +1 -1
- package/src/Icon/Brand/LinuxIcon.js +2 -24
- package/src/Icon/Brand/LinuxIcon.js.map +1 -1
- package/src/Icon/Brand/MicrosoftIcon.js +2 -24
- package/src/Icon/Brand/MicrosoftIcon.js.map +1 -1
- package/src/Icon/Brand/TwitterIcon.js +2 -24
- package/src/Icon/Brand/TwitterIcon.js.map +1 -1
- package/src/Icon/CallIcon.js +2 -24
- package/src/Icon/CallIcon.js.map +1 -1
- package/src/Icon/CamIcon.js +2 -24
- package/src/Icon/CamIcon.js.map +1 -1
- package/src/Icon/CameraIcon.js +4 -26
- package/src/Icon/CameraIcon.js.map +1 -1
- package/src/Icon/CheckIcon.js +2 -24
- package/src/Icon/CheckIcon.js.map +1 -1
- package/src/Icon/CheckRoundIcon.js +2 -24
- package/src/Icon/CheckRoundIcon.js.map +1 -1
- package/src/Icon/ChevronIcon.js +5 -5
- package/src/Icon/ChevronIcon.js.map +1 -1
- package/src/Icon/CloseIcon.js +2 -24
- package/src/Icon/CloseIcon.js.map +1 -1
- package/src/Icon/CopyIcon.js +2 -24
- package/src/Icon/CopyIcon.js.map +1 -1
- package/src/Icon/DeviceIcon.js +2 -24
- package/src/Icon/DeviceIcon.js.map +1 -1
- package/src/Icon/DownloadIcon.js +2 -24
- package/src/Icon/DownloadIcon.js.map +1 -1
- package/src/Icon/EditDocumentIcon.js +4 -26
- package/src/Icon/EditDocumentIcon.js.map +1 -1
- package/src/Icon/EditIcon.js +2 -24
- package/src/Icon/EditIcon.js.map +1 -1
- package/src/Icon/EnterIcon.js +2 -24
- package/src/Icon/EnterIcon.js.map +1 -1
- package/src/Icon/ErrorIcon.js +2 -24
- package/src/Icon/ErrorIcon.js.map +1 -1
- package/src/Icon/FileIcon.js +2 -24
- package/src/Icon/FileIcon.js.map +1 -1
- package/src/Icon/GifIcon.js +2 -24
- package/src/Icon/GifIcon.js.map +1 -1
- package/src/Icon/GridIcon.js +4 -26
- package/src/Icon/GridIcon.js.map +1 -1
- package/src/Icon/GroupIcon.js +2 -24
- package/src/Icon/GroupIcon.js.map +1 -1
- package/src/Icon/HangupIcon.js +2 -24
- package/src/Icon/HangupIcon.js.map +1 -1
- package/src/Icon/HideIcon.js +2 -24
- package/src/Icon/HideIcon.js.map +1 -1
- package/src/Icon/ImageIcon.js +2 -24
- package/src/Icon/ImageIcon.js.map +1 -1
- package/src/Icon/InfoIcon.js +2 -24
- package/src/Icon/InfoIcon.js.map +1 -1
- package/src/Icon/InviteIcon.js +2 -24
- package/src/Icon/InviteIcon.js.map +1 -1
- package/src/Icon/LeaveIcon.js +2 -24
- package/src/Icon/LeaveIcon.js.map +1 -1
- package/src/Icon/LinkIcon.js +4 -26
- package/src/Icon/LinkIcon.js.map +1 -1
- package/src/Icon/ListIcon.js +2 -24
- package/src/Icon/ListIcon.js.map +1 -1
- package/src/Icon/LockIcon.js +2 -24
- package/src/Icon/LockIcon.js.map +1 -1
- package/src/Icon/MessageIcon.js +2 -24
- package/src/Icon/MessageIcon.js.map +1 -1
- package/src/Icon/MinusIcon.js +2 -24
- package/src/Icon/MinusIcon.js.map +1 -1
- package/src/Icon/MoreIcon.js +2 -24
- package/src/Icon/MoreIcon.js.map +1 -1
- package/src/Icon/MuteIcon.js +2 -24
- package/src/Icon/MuteIcon.js.map +1 -1
- package/src/Icon/NotificationIcon.js +2 -24
- package/src/Icon/NotificationIcon.js.map +1 -1
- package/src/Icon/NotificationOffIcon.js +2 -24
- package/src/Icon/NotificationOffIcon.js.map +1 -1
- package/src/Icon/OptionsIcon.js +2 -24
- package/src/Icon/OptionsIcon.js.map +1 -1
- package/src/Icon/PeopleIcon.js +4 -26
- package/src/Icon/PeopleIcon.js.map +1 -1
- package/src/Icon/PingIcon.js +2 -24
- package/src/Icon/PingIcon.js.map +1 -1
- package/src/Icon/PlaneIcon.js +2 -24
- package/src/Icon/PlaneIcon.js.map +1 -1
- package/src/Icon/PlusIcon.js +2 -24
- package/src/Icon/PlusIcon.js.map +1 -1
- package/src/Icon/ProfileIcon.js +2 -24
- package/src/Icon/ProfileIcon.js.map +1 -1
- package/src/Icon/RecordBoldIcon.js +5 -5
- package/src/Icon/RecordBoldIcon.js.map +1 -1
- package/src/Icon/RecordIcon.js +2 -24
- package/src/Icon/RecordIcon.js.map +1 -1
- package/src/Icon/RecordPendingIcon.js +2 -24
- package/src/Icon/RecordPendingIcon.js.map +1 -1
- package/src/Icon/ReloadIcon.js +2 -24
- package/src/Icon/ReloadIcon.js.map +1 -1
- package/src/Icon/SVGIcon.js +6 -5
- package/src/Icon/SVGIcon.js.map +1 -1
- package/src/Icon/ScreenshareIcon.js +2 -24
- package/src/Icon/ScreenshareIcon.js.map +1 -1
- package/src/Icon/SearchIcon.js +2 -24
- package/src/Icon/SearchIcon.js.map +1 -1
- package/src/Icon/ServicesIcon.js +2 -24
- package/src/Icon/ServicesIcon.js.map +1 -1
- package/src/Icon/SettingsIcon.js +2 -24
- package/src/Icon/SettingsIcon.js.map +1 -1
- package/src/Icon/ShowIcon.js +2 -24
- package/src/Icon/ShowIcon.js.map +1 -1
- package/src/Icon/SignIcon.js +2 -24
- package/src/Icon/SignIcon.js.map +1 -1
- package/src/Icon/SpeakerIcon.js +2 -24
- package/src/Icon/SpeakerIcon.js.map +1 -1
- package/src/Icon/SupportIcon.js +2 -24
- package/src/Icon/SupportIcon.js.map +1 -1
- package/src/Icon/TeamIcon.js +2 -24
- package/src/Icon/TeamIcon.js.map +1 -1
- package/src/Icon/TimedIcon.js +2 -24
- package/src/Icon/TimedIcon.js.map +1 -1
- package/src/Icon/TrashCrossIcon.js +2 -24
- package/src/Icon/TrashCrossIcon.js.map +1 -1
- package/src/Icon/TrashIcon.js +2 -24
- package/src/Icon/TrashIcon.js.map +1 -1
- package/src/Icon/TriangleIcon.js +5 -5
- package/src/Icon/TriangleIcon.js.map +1 -1
- package/src/Icon/UploadIcon.js +2 -24
- package/src/Icon/UploadIcon.js.map +1 -1
- package/src/Icon/WireIcon.js +2 -24
- package/src/Icon/WireIcon.js.map +1 -1
- package/src/Identity/Animation.js +18 -17
- package/src/Identity/Animation.js.map +1 -1
- package/src/Identity/Avatar.js +10 -27
- package/src/Identity/Avatar.js.map +1 -1
- package/src/Identity/AvatarGrid.js +8 -7
- package/src/Identity/AvatarGrid.js.map +1 -1
- package/src/Identity/Logo.js +7 -7
- package/src/Identity/Logo.js.map +1 -1
- package/src/Identity/colors-v2.js +2 -3
- package/src/Identity/colors-v2.js.map +1 -1
- package/src/Identity/colors.js +11 -6
- package/src/Identity/colors.js.map +1 -1
- package/src/Identity/motions.js +6 -7
- package/src/Identity/motions.js.map +1 -1
- package/src/Layout/Box.js +3 -24
- package/src/Layout/Box.js.map +1 -1
- package/src/Layout/Column.js +6 -27
- package/src/Layout/Column.js.map +1 -1
- package/src/Layout/Container.js +10 -31
- package/src/Layout/Container.js.map +1 -1
- package/src/Layout/Content.js +3 -24
- package/src/Layout/Content.js.map +1 -1
- package/src/Layout/FlexBox.js +3 -24
- package/src/Layout/FlexBox.js.map +1 -1
- package/src/Layout/Footer.js +1 -1
- package/src/Layout/Footer.js.map +1 -1
- package/src/Layout/Header.js +3 -24
- package/src/Layout/Header.js.map +1 -1
- package/src/Layout/MatchMedia.js +17 -35
- package/src/Layout/MatchMedia.js.map +1 -1
- package/src/Layout/Spacer.js +1 -1
- package/src/Layout/Spacer.js.map +1 -1
- package/src/Layout/StyledApp.js +6 -5
- package/src/Layout/StyledApp.js.map +1 -1
- package/src/Layout/Theme.js +7 -7
- package/src/Layout/Theme.js.map +1 -1
- package/src/Layout/headerMenu/HeaderMenu.js +13 -8
- package/src/Layout/headerMenu/HeaderMenu.js.map +1 -1
- package/src/Layout/headerMenu/HeaderSubMenu.js +10 -9
- package/src/Layout/headerMenu/HeaderSubMenu.js.map +1 -1
- package/src/Layout/headerMenu/MenuContent.js +4 -5
- package/src/Layout/headerMenu/MenuContent.js.map +1 -1
- package/src/Layout/headerMenu/MenuItems.js +5 -26
- package/src/Layout/headerMenu/MenuItems.js.map +1 -1
- package/src/Layout/headerMenu/MenuLink.js +10 -10
- package/src/Layout/headerMenu/MenuLink.js.map +1 -1
- package/src/Layout/headerMenu/MenuOpenButton.js +6 -27
- package/src/Layout/headerMenu/MenuOpenButton.js.map +1 -1
- package/src/Layout/headerMenu/MenuScrollableItems.js +5 -26
- package/src/Layout/headerMenu/MenuScrollableItems.js.map +1 -1
- package/src/Layout/headerMenu/MenuSubLink.js +6 -7
- package/src/Layout/headerMenu/MenuSubLink.js.map +1 -1
- package/src/Menu/MenuModal.js +14 -13
- package/src/Menu/MenuModal.js.map +1 -1
- package/src/Menu/TabBar.js +13 -12
- package/src/Menu/TabBar.js.map +1 -1
- package/src/Misc/ButtonGroup.js +7 -7
- package/src/Misc/ButtonGroup.js.map +1 -1
- package/src/Misc/IconButton.js +7 -7
- package/src/Misc/IconButton.js.map +1 -1
- package/src/Misc/IsInViewport.js +13 -8
- package/src/Misc/IsInViewport.js.map +1 -1
- package/src/Misc/Loading.js +8 -7
- package/src/Misc/Loading.js.map +1 -1
- package/src/Misc/Pagination.js +6 -5
- package/src/Misc/Pagination.js.map +1 -1
- package/src/Misc/Pill.js +7 -7
- package/src/Misc/Pill.js.map +1 -1
- package/src/Misc/childrenWithDefaultProps.js +3 -3
- package/src/Misc/childrenWithDefaultProps.js.map +1 -1
- package/src/Misc/useTimeout.js +7 -22
- package/src/Misc/useTimeout.js.map +1 -1
- package/src/Modal/Modal.js +13 -12
- package/src/Modal/Modal.js.map +1 -1
- package/src/Modal/Overlay.js +11 -10
- package/src/Modal/Overlay.js.map +1 -1
- package/src/Text/Heading.js +16 -16
- package/src/Text/Heading.js.map +1 -1
- package/src/Text/Label.js +9 -9
- package/src/Text/Label.js.map +1 -1
- package/src/Text/Line.js +3 -24
- package/src/Text/Line.js.map +1 -1
- package/src/Text/Link.js +8 -8
- package/src/Text/Link.js.map +1 -1
- package/src/Text/Paragraph.js +10 -10
- package/src/Text/Paragraph.js.map +1 -1
- package/src/Text/Text.js +8 -29
- package/src/Text/Text.js.map +1 -1
- package/src/Text/TextLink.js +7 -7
- package/src/Text/TextLink.js.map +1 -1
- package/src/Text/Title.js +7 -7
- package/src/Text/Title.js.map +1 -1
- package/src/mediaQueries.js +11 -7
- package/src/mediaQueries.js.map +1 -1
- package/src/util.js +10 -6
- package/src/util.js.map +1 -1
package/src/Misc/useTimeout.js
CHANGED
|
@@ -1,34 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.useTimeout = void 0;
|
|
8
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
7
|
var _react = require("react");
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
* the Free Software Foundation, either version 3 of the License, or
|
|
17
|
-
* (at your option) any later version.
|
|
18
|
-
*
|
|
19
|
-
* This program is distributed in the hope that it will be useful,
|
|
20
|
-
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
21
|
-
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
22
|
-
* GNU General Public License for more details.
|
|
23
|
-
*
|
|
24
|
-
* You should have received a copy of the GNU General Public License
|
|
25
|
-
* along with this program. If not, see http://www.gnu.org/licenses/.
|
|
26
|
-
*
|
|
27
|
-
*/
|
|
28
|
-
|
|
8
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
9
|
+
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."); }
|
|
10
|
+
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); }
|
|
11
|
+
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; }
|
|
12
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
29
14
|
var useTimeout = function useTimeout(onTimeoutStop, duration) {
|
|
30
15
|
var _useState = (0, _react.useState)(null),
|
|
31
|
-
_useState2 = (
|
|
16
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
32
17
|
timerId = _useState2[0],
|
|
33
18
|
setTimerId = _useState2[1];
|
|
34
19
|
var removeTimeout = function removeTimeout() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTimeout.js","names":["useTimeout","onTimeoutStop","duration","useState","timerId","setTimerId","removeTimeout","window","clearTimeout","start","setTimeout","onStop","useEffect","startTimeout"],"sources":["useTimeout.ts"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\nimport {useEffect, useState} from 'react';\n\nconst useTimeout = (onTimeoutStop: () => void, duration: number) => {\n const [timerId, setTimerId] = useState(null);\n\n const removeTimeout = () => {\n if (timerId) {\n window.clearTimeout(timerId);\n setTimerId(null);\n }\n };\n\n const start = () => {\n removeTimeout();\n setTimerId(window.setTimeout(onStop, duration));\n };\n\n const onStop = () => {\n removeTimeout();\n onTimeoutStop();\n };\n\n useEffect(() => {\n return () => {\n removeTimeout();\n };\n }, [duration, onTimeoutStop]);\n\n return {removeTimeout, startTimeout: start};\n};\n\nexport {useTimeout};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useTimeout.js","names":["useTimeout","onTimeoutStop","duration","useState","timerId","setTimerId","removeTimeout","window","clearTimeout","start","setTimeout","onStop","useEffect","startTimeout"],"sources":["useTimeout.ts"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\nimport {useEffect, useState} from 'react';\n\nconst useTimeout = (onTimeoutStop: () => void, duration: number) => {\n const [timerId, setTimerId] = useState(null);\n\n const removeTimeout = () => {\n if (timerId) {\n window.clearTimeout(timerId);\n setTimerId(null);\n }\n };\n\n const start = () => {\n removeTimeout();\n setTimerId(window.setTimeout(onStop, duration));\n };\n\n const onStop = () => {\n removeTimeout();\n onTimeoutStop();\n };\n\n useEffect(() => {\n return () => {\n removeTimeout();\n };\n }, [duration, onTimeoutStop]);\n\n return {removeTimeout, startTimeout: start};\n};\n\nexport {useTimeout};\n"],"mappings":";;;;;;AAmBA;AAA0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAE1C,IAAMA,UAAU,GAAG,SAAbA,UAAU,CAAIC,aAAyB,EAAEC,QAAgB,EAAK;EAClE,gBAA8B,IAAAC,eAAQ,EAAC,IAAI,CAAC;IAAA;IAArCC,OAAO;IAAEC,UAAU;EAE1B,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1B,IAAIF,OAAO,EAAE;MACXG,MAAM,CAACC,YAAY,CAACJ,OAAO,CAAC;MAC5BC,UAAU,CAAC,IAAI,CAAC;IAClB;EACF,CAAC;EAED,IAAMI,KAAK,GAAG,SAARA,KAAK,GAAS;IAClBH,aAAa,EAAE;IACfD,UAAU,CAACE,MAAM,CAACG,UAAU,CAACC,MAAM,EAAET,QAAQ,CAAC,CAAC;EACjD,CAAC;EAED,IAAMS,MAAM,GAAG,SAATA,MAAM,GAAS;IACnBL,aAAa,EAAE;IACfL,aAAa,EAAE;EACjB,CAAC;EAED,IAAAW,gBAAS,EAAC,YAAM;IACd,OAAO,YAAM;MACXN,aAAa,EAAE;IACjB,CAAC;EACH,CAAC,EAAE,CAACJ,QAAQ,EAAED,aAAa,CAAC,CAAC;EAE7B,OAAO;IAACK,aAAa,EAAbA,aAAa;IAAEO,YAAY,EAAEJ;EAAK,CAAC;AAC7C,CAAC;AAAC"}
|
package/src/Modal/Modal.js
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.Modal = void 0;
|
|
8
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
9
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
7
|
var _react = require("@emotion/react");
|
|
12
8
|
var _react2 = _interopRequireDefault(require("react"));
|
|
13
9
|
var _color = _interopRequireDefault(require("color"));
|
|
@@ -17,13 +13,18 @@ var _mediaQueries = require("../mediaQueries");
|
|
|
17
13
|
var _util = require("../util");
|
|
18
14
|
var _Overlay = require("./Overlay");
|
|
19
15
|
var _excluded = ["actions", "children", "bodyStyle", "fullscreen", "onClose", "onBackgroundClick"];
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
18
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
20
19
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (
|
|
20
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
22
21
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
22
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
23
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
23
24
|
var modalBodyStyle = function modalBodyStyle(theme, _ref) {
|
|
24
25
|
var _ref$fullscreen = _ref.fullscreen,
|
|
25
26
|
fullscreen = _ref$fullscreen === void 0 ? false : _ref$fullscreen;
|
|
26
|
-
return (
|
|
27
|
+
return _defineProperty({
|
|
27
28
|
alignItems: 'center',
|
|
28
29
|
backgroundColor: theme.general.backgroundColor,
|
|
29
30
|
borderRadius: fullscreen ? 0 : '8px',
|
|
@@ -47,7 +48,7 @@ var filterModalBodyProps = function filterModalBodyProps(props) {
|
|
|
47
48
|
return (0, _util.filterProps)(props, ['fullscreen']);
|
|
48
49
|
};
|
|
49
50
|
var ModalBody = function ModalBody(props) {
|
|
50
|
-
return (0, _react.jsx)("div", (
|
|
51
|
+
return (0, _react.jsx)("div", _extends({
|
|
51
52
|
css: function css(theme) {
|
|
52
53
|
return modalBodyStyle(theme, props);
|
|
53
54
|
}
|
|
@@ -63,7 +64,7 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
|
|
|
63
64
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
64
65
|
};
|
|
65
66
|
var ModalClose = function ModalClose(props) {
|
|
66
|
-
return (0, _react.jsx)(_Icon.CloseIcon, (
|
|
67
|
+
return (0, _react.jsx)(_Icon.CloseIcon, _extends({
|
|
67
68
|
width: 16,
|
|
68
69
|
height: 16,
|
|
69
70
|
css: _ref3
|
|
@@ -79,7 +80,7 @@ var _ref4 = process.env.NODE_ENV === "production" ? {
|
|
|
79
80
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
80
81
|
};
|
|
81
82
|
var ModalContent = function ModalContent(props) {
|
|
82
|
-
return (0, _react.jsx)("div", (
|
|
83
|
+
return (0, _react.jsx)("div", _extends({
|
|
83
84
|
css: _ref4
|
|
84
85
|
}, props));
|
|
85
86
|
};
|
|
@@ -89,7 +90,7 @@ var modalBackgroundStyle = function modalBackgroundStyle(props) {
|
|
|
89
90
|
});
|
|
90
91
|
};
|
|
91
92
|
var ModalBackground = function ModalBackground(props) {
|
|
92
|
-
return (0, _react.jsx)("div", (
|
|
93
|
+
return (0, _react.jsx)("div", _extends({
|
|
93
94
|
css: modalBackgroundStyle(props)
|
|
94
95
|
}, props));
|
|
95
96
|
};
|
|
@@ -156,8 +157,8 @@ var Modal = function Modal(_ref7) {
|
|
|
156
157
|
fullscreen = _ref7.fullscreen,
|
|
157
158
|
onClose = _ref7.onClose,
|
|
158
159
|
onBackgroundClick = _ref7.onBackgroundClick,
|
|
159
|
-
props = (
|
|
160
|
-
return (0, _react.jsx)(_Overlay.OverlayWrapper, (
|
|
160
|
+
props = _objectWithoutProperties(_ref7, _excluded);
|
|
161
|
+
return (0, _react.jsx)(_Overlay.OverlayWrapper, _extends({}, props, {
|
|
161
162
|
"data-uie-name": "modal"
|
|
162
163
|
}), (0, _react.jsx)(ModalBody, {
|
|
163
164
|
fullscreen: fullscreen,
|
package/src/Modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","names":["modalBodyStyle","theme","fullscreen","alignItems","backgroundColor","general","borderRadius","bottom","undefined","boxShadow","display","flexDirection","justifyContent","left","margin","position","right","top","transform","zIndex","media","QueryKeys","TABLET_DOWN","width","filterModalBodyProps","props","filterProps","ModalBody","ModalClose","ModalContent","modalBackgroundStyle","overlayBackgroundStyle","ModalBackground","modalActionsWrapperStyles","borderTop","COLOR","GRAY_LIGHTEN_72","div","opaque","GRAY_DARKEN_72","borderRight","borderBottomLeftRadius","borderBottomRightRadius","modalActionStyles","bold","color","Color","BLUE","mix","BLACK","toString","cursor","flex","fontWeight","padding","ModalActions","actions","map","action","title","onClick","dataUieName","Modal","children","bodyStyle","onClose","onBackgroundClick","noop","length","defaultProps"],"sources":["Modal.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React, {CSSProperties} from 'react';\nimport Color from 'color';\n\nimport {CloseIcon} from '../Icon';\nimport {SVGIconProps} from '../Icon/SVGIcon';\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {filterProps, noop} from '../util';\nimport {OverlayBackgroundProps, OverlayWrapper, overlayBackgroundStyle} from './Overlay';\n\nexport interface ModalBodyProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n fullscreen?: boolean;\n}\n\nconst modalBodyStyle: <T>(theme: Theme, props: ModalBodyProps<T>) => CSSObject = (theme, {fullscreen = false}) => ({\n alignItems: 'center',\n backgroundColor: theme.general.backgroundColor,\n borderRadius: fullscreen ? 0 : '8px',\n bottom: fullscreen ? 0 : undefined,\n boxShadow: fullscreen ? 'none' : '0 16px 64px 0 rgba(0, 0, 0, 0.16)',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: fullscreen ? 'center' : 'space-between',\n left: fullscreen ? 0 : undefined,\n margin: 'auto',\n position: fullscreen ? 'fixed' : 'relative',\n right: fullscreen ? 0 : undefined,\n top: fullscreen ? 0 : undefined,\n transform: 'translate3d(0, 0, 0)',\n zIndex: 9999,\n [media[QueryKeys.TABLET_DOWN]]: {\n width: fullscreen ? 'initial' : '100%',\n },\n});\n\nconst filterModalBodyProps = (props: ModalBodyProps) => filterProps(props, ['fullscreen']);\n\nconst ModalBody = (props: ModalBodyProps) => (\n <div css={(theme: Theme) => modalBodyStyle(theme, props)} {...filterModalBodyProps(props)} />\n);\n\nconst ModalClose = (props: SVGIconProps<SVGSVGElement>) => (\n <CloseIcon\n width={16}\n height={16}\n css={{\n alignItems: 'center',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n right: 16,\n top: 16,\n }}\n {...props}\n />\n);\n\nconst ModalContent: React.FC<React.HTMLProps<HTMLDivElement>> = props => (\n <div\n css={{\n maxWidth: '100%',\n overflowY: 'auto',\n padding: '40px',\n }}\n {...props}\n />\n);\n\nconst modalBackgroundStyle: <T>(props: OverlayBackgroundProps<T>) => CSSObject = props => ({\n ...overlayBackgroundStyle(props),\n backgroundColor: 'rgba(50, 54, 57, 0.4)',\n});\n\nconst ModalBackground = (props: OverlayBackgroundProps) => <div css={modalBackgroundStyle(props)} {...props} />;\n\nexport interface ModalActionItem {\n bold?: boolean;\n dataUieName?: string;\n onClick: (event: React.MouseEvent<HTMLElement>) => void;\n title: string;\n}\n\ninterface ModalActions {\n actions?: ModalActionItem[];\n}\n\nconst modalActionsWrapperStyles: () => CSSObject = () => ({\n borderTop: `1px solid ${COLOR.GRAY_LIGHTEN_72}`,\n bottom: 0,\n display: 'flex',\n div: {\n '&:hover': {\n backgroundColor: COLOR.opaque(COLOR.GRAY_DARKEN_72, 0.04),\n },\n '&:active': {\n backgroundColor: COLOR.opaque(COLOR.GRAY_DARKEN_72, 0.08),\n },\n borderRight: `1px solid ${COLOR.GRAY_LIGHTEN_72}`,\n },\n 'div:first-child': {\n borderBottomLeftRadius: 8,\n },\n 'div:last-child': {\n borderBottomRightRadius: 8,\n borderRight: 0,\n },\n position: 'absolute',\n width: '100%',\n});\n\nconst modalActionStyles: ({bold}: {bold: boolean}) => CSSObject = ({bold}) => ({\n '&:hover': {\n color: Color(COLOR.BLUE).mix(Color(COLOR.BLACK), 0.16).toString(),\n },\n color: COLOR.BLUE,\n cursor: 'pointer',\n display: 'flex',\n flex: 1,\n fontWeight: bold ? 'bold' : 'normal',\n justifyContent: 'center',\n padding: '8px 0',\n});\n\nconst ModalActions: React.FC<ModalActions> = ({actions}) => (\n <div css={modalActionsWrapperStyles()}>\n {actions.map(action => (\n <div\n key={action.title}\n onClick={action.onClick}\n css={modalActionStyles({bold: action.bold})}\n data-uie-name={action.dataUieName}\n >\n {action.title}\n </div>\n ))}\n </div>\n);\n\ninterface ModalProps {\n actions?: ModalActionItem[];\n bodyStyle?: CSSProperties;\n fullscreen?: boolean;\n onBackgroundClick?: () => void;\n onClose?: () => void;\n}\n\nexport const Modal: React.FC<ModalProps & React.HTMLProps<HTMLDivElement>> = ({\n actions = [],\n children,\n bodyStyle,\n fullscreen,\n onClose,\n onBackgroundClick,\n ...props\n}) => (\n <OverlayWrapper {...props} data-uie-name=\"modal\">\n <ModalBody fullscreen={fullscreen} style={bodyStyle}>\n <ModalContent>{children}</ModalContent>\n {onClose !== noop && <ModalClose onClick={onClose} data-uie-name=\"do-close\" />}\n {actions.length > 0 && <ModalActions actions={actions} data-uie-name=\"modal-actions\" />}\n </ModalBody>\n {!fullscreen && (\n <ModalBackground\n onClick={onBackgroundClick === noop ? onClose : onBackgroundClick}\n data-uie-name=\"modal-background\"\n />\n )}\n </OverlayWrapper>\n);\n\nModal.defaultProps = {\n actions: [],\n fullscreen: false,\n onBackgroundClick: noop,\n onClose: noop,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.js","names":["modalBodyStyle","theme","fullscreen","alignItems","backgroundColor","general","borderRadius","bottom","undefined","boxShadow","display","flexDirection","justifyContent","left","margin","position","right","top","transform","zIndex","media","QueryKeys","TABLET_DOWN","width","filterModalBodyProps","props","filterProps","ModalBody","ModalClose","ModalContent","modalBackgroundStyle","overlayBackgroundStyle","ModalBackground","modalActionsWrapperStyles","borderTop","COLOR","GRAY_LIGHTEN_72","div","opaque","GRAY_DARKEN_72","borderRight","borderBottomLeftRadius","borderBottomRightRadius","modalActionStyles","bold","color","Color","BLUE","mix","BLACK","toString","cursor","flex","fontWeight","padding","ModalActions","actions","map","action","title","onClick","dataUieName","Modal","children","bodyStyle","onClose","onBackgroundClick","noop","length","defaultProps"],"sources":["Modal.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React, {CSSProperties} from 'react';\nimport Color from 'color';\n\nimport {CloseIcon} from '../Icon';\nimport {SVGIconProps} from '../Icon/SVGIcon';\nimport {COLOR} from '../Identity';\nimport {Theme} from '../Layout';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {filterProps, noop} from '../util';\nimport {OverlayBackgroundProps, OverlayWrapper, overlayBackgroundStyle} from './Overlay';\n\nexport interface ModalBodyProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n fullscreen?: boolean;\n}\n\nconst modalBodyStyle: <T>(theme: Theme, props: ModalBodyProps<T>) => CSSObject = (theme, {fullscreen = false}) => ({\n alignItems: 'center',\n backgroundColor: theme.general.backgroundColor,\n borderRadius: fullscreen ? 0 : '8px',\n bottom: fullscreen ? 0 : undefined,\n boxShadow: fullscreen ? 'none' : '0 16px 64px 0 rgba(0, 0, 0, 0.16)',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: fullscreen ? 'center' : 'space-between',\n left: fullscreen ? 0 : undefined,\n margin: 'auto',\n position: fullscreen ? 'fixed' : 'relative',\n right: fullscreen ? 0 : undefined,\n top: fullscreen ? 0 : undefined,\n transform: 'translate3d(0, 0, 0)',\n zIndex: 9999,\n [media[QueryKeys.TABLET_DOWN]]: {\n width: fullscreen ? 'initial' : '100%',\n },\n});\n\nconst filterModalBodyProps = (props: ModalBodyProps) => filterProps(props, ['fullscreen']);\n\nconst ModalBody = (props: ModalBodyProps) => (\n <div css={(theme: Theme) => modalBodyStyle(theme, props)} {...filterModalBodyProps(props)} />\n);\n\nconst ModalClose = (props: SVGIconProps<SVGSVGElement>) => (\n <CloseIcon\n width={16}\n height={16}\n css={{\n alignItems: 'center',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n right: 16,\n top: 16,\n }}\n {...props}\n />\n);\n\nconst ModalContent: React.FC<React.HTMLProps<HTMLDivElement>> = props => (\n <div\n css={{\n maxWidth: '100%',\n overflowY: 'auto',\n padding: '40px',\n }}\n {...props}\n />\n);\n\nconst modalBackgroundStyle: <T>(props: OverlayBackgroundProps<T>) => CSSObject = props => ({\n ...overlayBackgroundStyle(props),\n backgroundColor: 'rgba(50, 54, 57, 0.4)',\n});\n\nconst ModalBackground = (props: OverlayBackgroundProps) => <div css={modalBackgroundStyle(props)} {...props} />;\n\nexport interface ModalActionItem {\n bold?: boolean;\n dataUieName?: string;\n onClick: (event: React.MouseEvent<HTMLElement>) => void;\n title: string;\n}\n\ninterface ModalActions {\n actions?: ModalActionItem[];\n}\n\nconst modalActionsWrapperStyles: () => CSSObject = () => ({\n borderTop: `1px solid ${COLOR.GRAY_LIGHTEN_72}`,\n bottom: 0,\n display: 'flex',\n div: {\n '&:hover': {\n backgroundColor: COLOR.opaque(COLOR.GRAY_DARKEN_72, 0.04),\n },\n '&:active': {\n backgroundColor: COLOR.opaque(COLOR.GRAY_DARKEN_72, 0.08),\n },\n borderRight: `1px solid ${COLOR.GRAY_LIGHTEN_72}`,\n },\n 'div:first-child': {\n borderBottomLeftRadius: 8,\n },\n 'div:last-child': {\n borderBottomRightRadius: 8,\n borderRight: 0,\n },\n position: 'absolute',\n width: '100%',\n});\n\nconst modalActionStyles: ({bold}: {bold: boolean}) => CSSObject = ({bold}) => ({\n '&:hover': {\n color: Color(COLOR.BLUE).mix(Color(COLOR.BLACK), 0.16).toString(),\n },\n color: COLOR.BLUE,\n cursor: 'pointer',\n display: 'flex',\n flex: 1,\n fontWeight: bold ? 'bold' : 'normal',\n justifyContent: 'center',\n padding: '8px 0',\n});\n\nconst ModalActions: React.FC<ModalActions> = ({actions}) => (\n <div css={modalActionsWrapperStyles()}>\n {actions.map(action => (\n <div\n key={action.title}\n onClick={action.onClick}\n css={modalActionStyles({bold: action.bold})}\n data-uie-name={action.dataUieName}\n >\n {action.title}\n </div>\n ))}\n </div>\n);\n\ninterface ModalProps {\n actions?: ModalActionItem[];\n bodyStyle?: CSSProperties;\n fullscreen?: boolean;\n onBackgroundClick?: () => void;\n onClose?: () => void;\n}\n\nexport const Modal: React.FC<ModalProps & React.HTMLProps<HTMLDivElement>> = ({\n actions = [],\n children,\n bodyStyle,\n fullscreen,\n onClose,\n onBackgroundClick,\n ...props\n}) => (\n <OverlayWrapper {...props} data-uie-name=\"modal\">\n <ModalBody fullscreen={fullscreen} style={bodyStyle}>\n <ModalContent>{children}</ModalContent>\n {onClose !== noop && <ModalClose onClick={onClose} data-uie-name=\"do-close\" />}\n {actions.length > 0 && <ModalActions actions={actions} data-uie-name=\"modal-actions\" />}\n </ModalBody>\n {!fullscreen && (\n <ModalBackground\n onClick={onBackgroundClick === noop ? onClose : onBackgroundClick}\n data-uie-name=\"modal-background\"\n />\n )}\n </OverlayWrapper>\n);\n\nModal.defaultProps = {\n actions: [],\n fullscreen: false,\n onBackgroundClick: noop,\n onClose: noop,\n};\n"],"mappings":"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"}
|
package/src/Modal/Overlay.js
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.overlayWrapperStyle = exports.overlayBackgroundStyle = exports.OverlayWrapper = exports.OverlayContent = exports.OverlayBackground = exports.Overlay = void 0;
|
|
8
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
7
|
var _react = require("@emotion/react");
|
|
11
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
12
8
|
var _react2 = _interopRequireDefault(require("react"));
|
|
13
9
|
var _Identity = require("../Identity");
|
|
14
10
|
var _motions = require("../Identity/motions");
|
|
15
11
|
var _mediaQueries = require("../mediaQueries");
|
|
16
12
|
var _util = require("../util");
|
|
17
13
|
var _excluded = ["onBackgroundClick", "children"];
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
16
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
17
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
18
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
18
19
|
var overlayWrapperStyle = function overlayWrapperStyle() {
|
|
19
20
|
return {
|
|
20
21
|
bottom: 0,
|
|
@@ -30,14 +31,14 @@ var overlayWrapperStyle = function overlayWrapperStyle() {
|
|
|
30
31
|
};
|
|
31
32
|
exports.overlayWrapperStyle = overlayWrapperStyle;
|
|
32
33
|
var OverlayWrapper = function OverlayWrapper(props) {
|
|
33
|
-
return (0, _react.jsx)("div", (
|
|
34
|
+
return (0, _react.jsx)("div", _extends({
|
|
34
35
|
css: overlayWrapperStyle
|
|
35
36
|
}, props));
|
|
36
37
|
};
|
|
37
38
|
exports.OverlayWrapper = OverlayWrapper;
|
|
38
39
|
var OverlayContent = function OverlayContent(props) {
|
|
39
|
-
return (0, _react.jsx)("div", (
|
|
40
|
-
css: /*#__PURE__*/(0, _react.css)((
|
|
40
|
+
return (0, _react.jsx)("div", _extends({
|
|
41
|
+
css: /*#__PURE__*/(0, _react.css)(_defineProperty({
|
|
41
42
|
'*': {
|
|
42
43
|
color: _Identity.COLOR.WHITE
|
|
43
44
|
},
|
|
@@ -71,7 +72,7 @@ var overlayBackgroundStyle = function overlayBackgroundStyle() {
|
|
|
71
72
|
};
|
|
72
73
|
exports.overlayBackgroundStyle = overlayBackgroundStyle;
|
|
73
74
|
var OverlayBackground = function OverlayBackground(props) {
|
|
74
|
-
return (0, _react.jsx)("div", (
|
|
75
|
+
return (0, _react.jsx)("div", _extends({
|
|
75
76
|
css: overlayBackgroundStyle
|
|
76
77
|
}, props));
|
|
77
78
|
};
|
|
@@ -81,8 +82,8 @@ var Overlay = function Overlay(_ref) {
|
|
|
81
82
|
onBackgroundClick = _ref$onBackgroundClic === void 0 ? _util.noop : _ref$onBackgroundClic,
|
|
82
83
|
_ref$children = _ref.children,
|
|
83
84
|
children = _ref$children === void 0 ? null : _ref$children,
|
|
84
|
-
props = (
|
|
85
|
-
return (0, _react.jsx)(OverlayWrapper, (
|
|
85
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
86
|
+
return (0, _react.jsx)(OverlayWrapper, _extends({}, props, {
|
|
86
87
|
"data-uie-name": "modal"
|
|
87
88
|
}), (0, _react.jsx)(OverlayContent, null, children), (0, _react.jsx)(OverlayBackground, {
|
|
88
89
|
onClick: onBackgroundClick,
|
package/src/Modal/Overlay.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.js","names":["overlayWrapperStyle","bottom","display","left","overflowY","padding","position","right","top","zIndex","OverlayWrapper","props","OverlayContent","color","COLOR","WHITE","alignItems","flexDirection","justifyContent","margin","maxWidth","transform","media","QueryKeys","TABLET_DOWN","width","overlayBackgroundStyle","animation","ANIMATION","fadeIn","DURATION","PROACTIVE_SLOW","EASE","QUART","background","height","OverlayBackground","Overlay","onBackgroundClick","noop","children"],"sources":["Overlay.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {ANIMATION, DURATION, EASE} from '../Identity/motions';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {noop} from '../util';\n\nexport type OverlayWrapperProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nexport const overlayWrapperStyle: <T>(props: OverlayWrapperProps<T>) => CSSObject = () => ({\n bottom: 0,\n display: 'flex',\n left: 0,\n overflowY: 'auto',\n padding: '24px',\n position: 'fixed',\n right: 0,\n top: 0,\n zIndex: 9997,\n});\n\nexport const OverlayWrapper = (props: OverlayWrapperProps) => <div css={overlayWrapperStyle} {...props} />;\n\nexport const OverlayContent = (props: React.HTMLProps<HTMLDivElement>) => (\n <div\n css={{\n '*': {\n color: COLOR.WHITE,\n },\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n margin: 'auto',\n maxWidth: '100%',\n overflowY: 'auto',\n position: 'relative',\n transform: 'translate3d(0, 0, 0)',\n zIndex: 9999,\n [media[QueryKeys.TABLET_DOWN]]: {\n width: '100%',\n },\n }}\n {...props}\n />\n);\n\nexport type OverlayBackgroundProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nexport const overlayBackgroundStyle: <T>(props: OverlayBackgroundProps<T>) => CSSObject = () => ({\n animation: `${ANIMATION.fadeIn} ${DURATION.PROACTIVE_SLOW}ms ${EASE.QUART}`,\n background: 'rgba(0, 0, 0, 0.88)',\n height: '100vh',\n left: 0,\n position: 'fixed',\n top: 0,\n width: '100vw',\n zIndex: 9998,\n});\n\nexport const OverlayBackground = (props: OverlayBackgroundProps) => <div css={overlayBackgroundStyle} {...props} />;\n\nexport interface OverlayProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n onBackgroundClick?: () => void;\n}\n\nexport const Overlay = ({onBackgroundClick = noop, children = null, ...props}: OverlayProps) => (\n <OverlayWrapper {...props} data-uie-name=\"modal\">\n <OverlayContent>{children}</OverlayContent>\n <OverlayBackground onClick={onBackgroundClick} data-uie-name=\"overlay-background\" />\n </OverlayWrapper>\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Overlay.js","names":["overlayWrapperStyle","bottom","display","left","overflowY","padding","position","right","top","zIndex","OverlayWrapper","props","OverlayContent","color","COLOR","WHITE","alignItems","flexDirection","justifyContent","margin","maxWidth","transform","media","QueryKeys","TABLET_DOWN","width","overlayBackgroundStyle","animation","ANIMATION","fadeIn","DURATION","PROACTIVE_SLOW","EASE","QUART","background","height","OverlayBackground","Overlay","onBackgroundClick","noop","children"],"sources":["Overlay.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {ANIMATION, DURATION, EASE} from '../Identity/motions';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {noop} from '../util';\n\nexport type OverlayWrapperProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nexport const overlayWrapperStyle: <T>(props: OverlayWrapperProps<T>) => CSSObject = () => ({\n bottom: 0,\n display: 'flex',\n left: 0,\n overflowY: 'auto',\n padding: '24px',\n position: 'fixed',\n right: 0,\n top: 0,\n zIndex: 9997,\n});\n\nexport const OverlayWrapper = (props: OverlayWrapperProps) => <div css={overlayWrapperStyle} {...props} />;\n\nexport const OverlayContent = (props: React.HTMLProps<HTMLDivElement>) => (\n <div\n css={{\n '*': {\n color: COLOR.WHITE,\n },\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n margin: 'auto',\n maxWidth: '100%',\n overflowY: 'auto',\n position: 'relative',\n transform: 'translate3d(0, 0, 0)',\n zIndex: 9999,\n [media[QueryKeys.TABLET_DOWN]]: {\n width: '100%',\n },\n }}\n {...props}\n />\n);\n\nexport type OverlayBackgroundProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nexport const overlayBackgroundStyle: <T>(props: OverlayBackgroundProps<T>) => CSSObject = () => ({\n animation: `${ANIMATION.fadeIn} ${DURATION.PROACTIVE_SLOW}ms ${EASE.QUART}`,\n background: 'rgba(0, 0, 0, 0.88)',\n height: '100vh',\n left: 0,\n position: 'fixed',\n top: 0,\n width: '100vw',\n zIndex: 9998,\n});\n\nexport const OverlayBackground = (props: OverlayBackgroundProps) => <div css={overlayBackgroundStyle} {...props} />;\n\nexport interface OverlayProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n onBackgroundClick?: () => void;\n}\n\nexport const Overlay = ({onBackgroundClick = noop, children = null, ...props}: OverlayProps) => (\n <OverlayWrapper {...props} data-uie-name=\"modal\">\n <OverlayContent>{children}</OverlayContent>\n <OverlayBackground onClick={onBackgroundClick} data-uie-name=\"overlay-background\" />\n </OverlayWrapper>\n);\n"],"mappings":";;;;;;AAoBA;AACA;AAEA;AACA;AACA;AACA;AAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAItB,IAAMA,mBAAoE,GAAG,SAAvEA,mBAAoE;EAAA,OAAU;IACzFC,MAAM,EAAE,CAAC;IACTC,OAAO,EAAE,MAAM;IACfC,IAAI,EAAE,CAAC;IACPC,SAAS,EAAE,MAAM;IACjBC,OAAO,EAAE,MAAM;IACfC,QAAQ,EAAE,OAAO;IACjBC,KAAK,EAAE,CAAC;IACRC,GAAG,EAAE,CAAC;IACNC,MAAM,EAAE;EACV,CAAC;AAAA,CAAC;AAAC;AAEI,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,KAA0B;EAAA,OAAK;IAAK,GAAG,EAAEX;EAAoB,GAAKW,KAAK,EAAI;AAAA;AAAC;AAEpG,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAID,KAAsC;EAAA,OACnE;IACE,GAAG;MACD,GAAG,EAAE;QACHE,KAAK,EAAEC,eAAK,CAACC;MACf,CAAC;MACDC,UAAU,EAAE,QAAQ;MACpBd,OAAO,EAAE,MAAM;MACfe,aAAa,EAAE,QAAQ;MACvBC,cAAc,EAAE,eAAe;MAC/BC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE,MAAM;MAChBhB,SAAS,EAAE,MAAM;MACjBE,QAAQ,EAAE,UAAU;MACpBe,SAAS,EAAE,sBAAsB;MACjCZ,MAAM,EAAE;IAAI,GACXa,mBAAK,CAACC,uBAAS,CAACC,WAAW,CAAC,EAAG;MAC9BC,KAAK,EAAE;IACT,CAAC;EACD,GACEd,KAAK,EACT;AAAA,CACH;AAAC;AAIK,IAAMe,sBAA0E,GAAG,SAA7EA,sBAA0E;EAAA,OAAU;IAC/FC,SAAS,YAAKC,kBAAS,CAACC,MAAM,cAAIC,iBAAQ,CAACC,cAAc,gBAAMC,aAAI,CAACC,KAAK,CAAE;IAC3EC,UAAU,EAAE,qBAAqB;IACjCC,MAAM,EAAE,OAAO;IACfhC,IAAI,EAAE,CAAC;IACPG,QAAQ,EAAE,OAAO;IACjBE,GAAG,EAAE,CAAC;IACNiB,KAAK,EAAE,OAAO;IACdhB,MAAM,EAAE;EACV,CAAC;AAAA,CAAC;AAAC;AAEI,IAAM2B,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIzB,KAA6B;EAAA,OAAK;IAAK,GAAG,EAAEe;EAAuB,GAAKf,KAAK,EAAI;AAAA;AAAC;AAM7G,IAAM0B,OAAO,GAAG,SAAVA,OAAO;EAAA,iCAAKC,iBAAiB;IAAjBA,iBAAiB,sCAAGC,UAAI;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IAAK7B,KAAK;EAAA,OAC1E,gBAAC,cAAc,eAAKA,KAAK;IAAE,iBAAc;EAAO,IAC9C,gBAAC,cAAc,QAAE6B,QAAQ,CAAkB,EAC3C,gBAAC,iBAAiB;IAAC,OAAO,EAAEF,iBAAkB;IAAC,iBAAc;EAAoB,EAAG,CACrE;AAAA,CAClB;AAAC"}
|
package/src/Text/Heading.js
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.h4Style = exports.h3Style = exports.h2Style = exports.h1Style = exports.Heading = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
7
|
var _react = require("@emotion/react");
|
|
12
8
|
var _mediaQueries = require("../mediaQueries");
|
|
13
9
|
var _Text = require("./Text");
|
|
@@ -16,11 +12,15 @@ var _excluded = ["level"],
|
|
|
16
12
|
_excluded3 = ["block", "color", "noWrap", "textTransform"],
|
|
17
13
|
_excluded4 = ["block", "color", "noWrap", "textTransform"],
|
|
18
14
|
_excluded5 = ["block", "color", "noWrap", "textTransform"];
|
|
15
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
19
16
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
20
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (
|
|
17
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
18
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
19
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
20
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
21
21
|
var Heading = function Heading(_ref) {
|
|
22
22
|
var level = _ref.level,
|
|
23
|
-
props = (
|
|
23
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
24
24
|
switch (level) {
|
|
25
25
|
case '2':
|
|
26
26
|
return (0, _react.jsx)(H2, props);
|
|
@@ -45,13 +45,13 @@ var h1Style = function h1Style(theme, _ref2) {
|
|
|
45
45
|
noWrap = _ref2$noWrap === void 0 ? false : _ref2$noWrap,
|
|
46
46
|
_ref2$textTransform = _ref2.textTransform,
|
|
47
47
|
textTransform = _ref2$textTransform === void 0 ? 'none' : _ref2$textTransform,
|
|
48
|
-
props = (
|
|
48
|
+
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
49
49
|
return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
50
50
|
block: block,
|
|
51
51
|
color: color,
|
|
52
52
|
noWrap: noWrap,
|
|
53
53
|
textTransform: textTransform
|
|
54
|
-
}, props))), {}, (
|
|
54
|
+
}, props))), {}, _defineProperty({
|
|
55
55
|
fontSize: '48px',
|
|
56
56
|
fontWeight: 300,
|
|
57
57
|
lineHeight: '56px',
|
|
@@ -65,7 +65,7 @@ var h1Style = function h1Style(theme, _ref2) {
|
|
|
65
65
|
};
|
|
66
66
|
exports.h1Style = h1Style;
|
|
67
67
|
var H1 = function H1(props) {
|
|
68
|
-
return (0, _react.jsx)("h1", (
|
|
68
|
+
return (0, _react.jsx)("h1", _extends({
|
|
69
69
|
css: function css(theme) {
|
|
70
70
|
return h1Style(theme, props);
|
|
71
71
|
}
|
|
@@ -81,13 +81,13 @@ var h2Style = function h2Style(theme, _ref3) {
|
|
|
81
81
|
noWrap = _ref3$noWrap === void 0 ? false : _ref3$noWrap,
|
|
82
82
|
_ref3$textTransform = _ref3.textTransform,
|
|
83
83
|
textTransform = _ref3$textTransform === void 0 ? 'none' : _ref3$textTransform,
|
|
84
|
-
props = (
|
|
84
|
+
props = _objectWithoutProperties(_ref3, _excluded3);
|
|
85
85
|
return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
86
86
|
block: block,
|
|
87
87
|
color: color,
|
|
88
88
|
noWrap: noWrap,
|
|
89
89
|
textTransform: textTransform
|
|
90
|
-
}, props))), {}, (
|
|
90
|
+
}, props))), {}, _defineProperty({
|
|
91
91
|
fontSize: '20px',
|
|
92
92
|
fontWeight: 700,
|
|
93
93
|
lineHeight: '28px',
|
|
@@ -102,7 +102,7 @@ var h2Style = function h2Style(theme, _ref3) {
|
|
|
102
102
|
};
|
|
103
103
|
exports.h2Style = h2Style;
|
|
104
104
|
var H2 = function H2(props) {
|
|
105
|
-
return (0, _react.jsx)("h2", (
|
|
105
|
+
return (0, _react.jsx)("h2", _extends({
|
|
106
106
|
css: function css(theme) {
|
|
107
107
|
return h2Style(theme, props);
|
|
108
108
|
}
|
|
@@ -118,7 +118,7 @@ var h3Style = function h3Style(theme, _ref4) {
|
|
|
118
118
|
noWrap = _ref4$noWrap === void 0 ? false : _ref4$noWrap,
|
|
119
119
|
_ref4$textTransform = _ref4.textTransform,
|
|
120
120
|
textTransform = _ref4$textTransform === void 0 ? 'none' : _ref4$textTransform,
|
|
121
|
-
props = (
|
|
121
|
+
props = _objectWithoutProperties(_ref4, _excluded4);
|
|
122
122
|
return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
123
123
|
block: block,
|
|
124
124
|
color: color,
|
|
@@ -132,7 +132,7 @@ var h3Style = function h3Style(theme, _ref4) {
|
|
|
132
132
|
};
|
|
133
133
|
exports.h3Style = h3Style;
|
|
134
134
|
var H3 = function H3(props) {
|
|
135
|
-
return (0, _react.jsx)("h3", (
|
|
135
|
+
return (0, _react.jsx)("h3", _extends({
|
|
136
136
|
css: function css(theme) {
|
|
137
137
|
return h3Style(theme, props);
|
|
138
138
|
}
|
|
@@ -148,7 +148,7 @@ var h4Style = function h4Style(theme, _ref5) {
|
|
|
148
148
|
noWrap = _ref5$noWrap === void 0 ? false : _ref5$noWrap,
|
|
149
149
|
_ref5$textTransform = _ref5.textTransform,
|
|
150
150
|
textTransform = _ref5$textTransform === void 0 ? 'none' : _ref5$textTransform,
|
|
151
|
-
props = (
|
|
151
|
+
props = _objectWithoutProperties(_ref5, _excluded5);
|
|
152
152
|
return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
153
153
|
block: block,
|
|
154
154
|
color: color,
|
|
@@ -163,7 +163,7 @@ var h4Style = function h4Style(theme, _ref5) {
|
|
|
163
163
|
};
|
|
164
164
|
exports.h4Style = h4Style;
|
|
165
165
|
var H4 = function H4(props) {
|
|
166
|
-
return (0, _react.jsx)("h3", (
|
|
166
|
+
return (0, _react.jsx)("h3", _extends({
|
|
167
167
|
css: function css(theme) {
|
|
168
168
|
return h4Style(theme, props);
|
|
169
169
|
}
|
package/src/Text/Heading.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.js","names":["Heading","level","props","h1Style","theme","block","color","general","noWrap","textTransform","textStyle","fontSize","fontWeight","lineHeight","marginBottom","marginTop","minHeight","media","QueryKeys","MOBILE","H1","filterTextProps","h2Style","H2","h3Style","H3","h4Style","H4"],"sources":["Heading.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {Theme} from '../Layout';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {TextProps, filterTextProps, textStyle} from './Text';\n\ninterface HeadingProps<T = HTMLHeadingElement> extends TextProps<T> {\n level?: string;\n}\n\nexport const Heading = ({level, ...props}: HeadingProps) => {\n switch (level) {\n case '2':\n return <H2 {...props} />;\n case '3':\n return <H3 {...props} />;\n case '4':\n return <H4 {...props} />;\n case '1':\n default:\n return <H1 {...props} />;\n }\n};\n\nexport const h1Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, level = '1', noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '48px',\n fontWeight: 300,\n lineHeight: '56px',\n marginBottom: '64px',\n marginTop: 0,\n minHeight: '48px',\n [media[QueryKeys.MOBILE]]: {\n fontSize: '40px',\n lineHeight: '48px',\n },\n});\n\nexport const H1 = (props: HeadingProps) => (\n <h1 css={(theme: Theme) => h1Style(theme, props)} {...filterTextProps(props)} />\n);\n\nexport const h2Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '20px',\n fontWeight: 700,\n lineHeight: '28px',\n marginBottom: '24px',\n marginTop: '32px',\n [media[QueryKeys.MOBILE]]: {\n fontSize: '18px',\n lineHeight: '26px',\n marginBottom: '20px',\n marginTop: '26px',\n },\n});\n\nexport const H2 = (props: HeadingProps) => (\n <h2 css={(theme: Theme) => h2Style(theme, props)} {...filterTextProps(props)} />\n);\n\nexport const h3Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '16px',\n fontWeight: 600,\n marginBottom: '16px',\n});\n\nexport const H3 = (props: HeadingProps) => (\n <h3 css={(theme: Theme) => h3Style(theme, props)} {...filterTextProps(props)} />\n);\n\nexport const h4Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '11px',\n fontWeight: 300,\n marginBottom: '5px',\n marginTop: '20px',\n});\n\nexport const H4 = (props: HeadingProps) => (\n <h3 css={(theme: Theme) => h4Style(theme, props)} {...filterTextProps(props)} />\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Heading.js","names":["Heading","level","props","h1Style","theme","block","color","general","noWrap","textTransform","textStyle","fontSize","fontWeight","lineHeight","marginBottom","marginTop","minHeight","media","QueryKeys","MOBILE","H1","filterTextProps","h2Style","H2","h3Style","H3","h4Style","H4"],"sources":["Heading.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {Theme} from '../Layout';\nimport {QueryKeys, media} from '../mediaQueries';\nimport {TextProps, filterTextProps, textStyle} from './Text';\n\ninterface HeadingProps<T = HTMLHeadingElement> extends TextProps<T> {\n level?: string;\n}\n\nexport const Heading = ({level, ...props}: HeadingProps) => {\n switch (level) {\n case '2':\n return <H2 {...props} />;\n case '3':\n return <H3 {...props} />;\n case '4':\n return <H4 {...props} />;\n case '1':\n default:\n return <H1 {...props} />;\n }\n};\n\nexport const h1Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, level = '1', noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '48px',\n fontWeight: 300,\n lineHeight: '56px',\n marginBottom: '64px',\n marginTop: 0,\n minHeight: '48px',\n [media[QueryKeys.MOBILE]]: {\n fontSize: '40px',\n lineHeight: '48px',\n },\n});\n\nexport const H1 = (props: HeadingProps) => (\n <h1 css={(theme: Theme) => h1Style(theme, props)} {...filterTextProps(props)} />\n);\n\nexport const h2Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '20px',\n fontWeight: 700,\n lineHeight: '28px',\n marginBottom: '24px',\n marginTop: '32px',\n [media[QueryKeys.MOBILE]]: {\n fontSize: '18px',\n lineHeight: '26px',\n marginBottom: '20px',\n marginTop: '26px',\n },\n});\n\nexport const H2 = (props: HeadingProps) => (\n <h2 css={(theme: Theme) => h2Style(theme, props)} {...filterTextProps(props)} />\n);\n\nexport const h3Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '16px',\n fontWeight: 600,\n marginBottom: '16px',\n});\n\nexport const H3 = (props: HeadingProps) => (\n <h3 css={(theme: Theme) => h3Style(theme, props)} {...filterTextProps(props)} />\n);\n\nexport const h4Style: <T>(theme: Theme, props: HeadingProps<T>) => CSSObject = (\n theme,\n {block = true, color = theme.general.color, noWrap = false, textTransform = 'none', ...props},\n) => ({\n ...textStyle(theme, {block, color, noWrap, textTransform, ...props}),\n fontSize: '11px',\n fontWeight: 300,\n marginBottom: '5px',\n marginTop: '20px',\n});\n\nexport const H4 = (props: HeadingProps) => (\n <h3 css={(theme: Theme) => h4Style(theme, props)} {...filterTextProps(props)} />\n);\n"],"mappings":"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"}
|
package/src/Text/Label.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.LabelLink = exports.Label = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
7
|
var _react = require("@emotion/react");
|
|
12
8
|
var _Link = require("./Link");
|
|
13
9
|
var _Text = require("./Text");
|
|
14
10
|
var _Identity = require("../Identity");
|
|
15
11
|
var _excluded = ["markInvalid", "bold", "color", "fontSize"],
|
|
16
12
|
_excluded2 = ["fontSize"];
|
|
13
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
17
14
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
18
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (
|
|
15
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
16
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
17
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
18
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
19
19
|
var labelStyle = function labelStyle(theme, _ref) {
|
|
20
20
|
var markInvalid = _ref.markInvalid,
|
|
21
21
|
_ref$bold = _ref.bold,
|
|
@@ -24,7 +24,7 @@ var labelStyle = function labelStyle(theme, _ref) {
|
|
|
24
24
|
color = _ref$color === void 0 ? theme.general.color : _ref$color,
|
|
25
25
|
_ref$fontSize = _ref.fontSize,
|
|
26
26
|
fontSize = _ref$fontSize === void 0 ? '12px' : _ref$fontSize,
|
|
27
|
-
props = (
|
|
27
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
28
28
|
return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
29
29
|
bold: bold,
|
|
30
30
|
color: color,
|
|
@@ -38,7 +38,7 @@ var labelStyle = function labelStyle(theme, _ref) {
|
|
|
38
38
|
});
|
|
39
39
|
};
|
|
40
40
|
var Label = function Label(props) {
|
|
41
|
-
return (0, _react.jsx)("label", (
|
|
41
|
+
return (0, _react.jsx)("label", _extends({
|
|
42
42
|
css: function css(theme) {
|
|
43
43
|
return labelStyle(theme, props);
|
|
44
44
|
}
|
|
@@ -48,13 +48,13 @@ exports.Label = Label;
|
|
|
48
48
|
var labelLinkStyle = function labelLinkStyle(theme, _ref2) {
|
|
49
49
|
var _ref2$fontSize = _ref2.fontSize,
|
|
50
50
|
fontSize = _ref2$fontSize === void 0 ? '12px' : _ref2$fontSize,
|
|
51
|
-
props = (
|
|
51
|
+
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
52
52
|
return _objectSpread({}, (0, _Link.linkStyle)(theme, _objectSpread({
|
|
53
53
|
fontSize: fontSize
|
|
54
54
|
}, props)));
|
|
55
55
|
};
|
|
56
56
|
var LabelLink = function LabelLink(props) {
|
|
57
|
-
return (0, _react.jsx)("a", (
|
|
57
|
+
return (0, _react.jsx)("a", _extends({
|
|
58
58
|
css: function css(theme) {
|
|
59
59
|
return labelLinkStyle(theme, props);
|
|
60
60
|
}
|
package/src/Text/Label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","names":["labelStyle","theme","markInvalid","bold","color","general","fontSize","props","textStyle","COLOR","BLUE","RED","width","Label","filterTextProps","labelLinkStyle","linkStyle","LabelLink"],"sources":["Label.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {Theme} from '../Layout';\nimport {LinkProps, linkStyle} from './Link';\nimport {TextProps, filterTextProps, textStyle} from './Text';\nimport {COLOR} from '../Identity';\n\nexport interface LabelProps<T = HTMLSpanElement> extends TextProps<T> {\n markInvalid?: boolean;\n}\n\nconst labelStyle: <T>(theme: Theme, props: LabelProps<T>) => CSSObject = (\n theme,\n {markInvalid, bold = false, color = theme.general.color, fontSize = '12px', ...props},\n) => ({\n ...textStyle(theme, {bold, color, fontSize, ...props}),\n '&:focus-within': {\n color: COLOR.BLUE,\n },\n color: markInvalid ? COLOR.RED : 'initial',\n width: '100%',\n});\n\nexport const Label = (props: LabelProps) => (\n <label css={(theme: Theme) => labelStyle(theme, props)} {...filterTextProps(props)} />\n);\n\nexport type LabelLinkProps<T = HTMLAnchorElement> = LinkProps<T>;\n\nconst labelLinkStyle: <T>(theme, props: LabelLinkProps<T>) => CSSObject = (theme, {fontSize = '12px', ...props}) => ({\n ...linkStyle(theme, {fontSize, ...props}),\n});\n\nexport const LabelLink = (props: LabelProps<HTMLAnchorElement>) => (\n <a css={(theme: Theme) => labelLinkStyle(theme, props)} {...filterTextProps(props)} />\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Label.js","names":["labelStyle","theme","markInvalid","bold","color","general","fontSize","props","textStyle","COLOR","BLUE","RED","width","Label","filterTextProps","labelLinkStyle","linkStyle","LabelLink"],"sources":["Label.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {Theme} from '../Layout';\nimport {LinkProps, linkStyle} from './Link';\nimport {TextProps, filterTextProps, textStyle} from './Text';\nimport {COLOR} from '../Identity';\n\nexport interface LabelProps<T = HTMLSpanElement> extends TextProps<T> {\n markInvalid?: boolean;\n}\n\nconst labelStyle: <T>(theme: Theme, props: LabelProps<T>) => CSSObject = (\n theme,\n {markInvalid, bold = false, color = theme.general.color, fontSize = '12px', ...props},\n) => ({\n ...textStyle(theme, {bold, color, fontSize, ...props}),\n '&:focus-within': {\n color: COLOR.BLUE,\n },\n color: markInvalid ? COLOR.RED : 'initial',\n width: '100%',\n});\n\nexport const Label = (props: LabelProps) => (\n <label css={(theme: Theme) => labelStyle(theme, props)} {...filterTextProps(props)} />\n);\n\nexport type LabelLinkProps<T = HTMLAnchorElement> = LinkProps<T>;\n\nconst labelLinkStyle: <T>(theme, props: LabelLinkProps<T>) => CSSObject = (theme, {fontSize = '12px', ...props}) => ({\n ...linkStyle(theme, {fontSize, ...props}),\n});\n\nexport const LabelLink = (props: LabelProps<HTMLAnchorElement>) => (\n <a css={(theme: Theme) => labelLinkStyle(theme, props)} {...filterTextProps(props)} />\n);\n"],"mappings":";;;;;;AAoBA;AAGA;AACA;AACA;AAAkC;EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlC,IAAMA,UAAgE,GAAG,SAAnEA,UAAgE,CACpEC,KAAK;EAAA,IACJC,WAAW,QAAXA,WAAW;IAAA,iBAAEC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAGH,KAAK,CAACI,OAAO,CAACD,KAAK;IAAA,qBAAEE,QAAQ;IAARA,QAAQ,8BAAG,MAAM;IAAKC,KAAK;EAAA,uCAEjF,IAAAC,eAAS,EAACP,KAAK;IAAGE,IAAI,EAAJA,IAAI;IAAEC,KAAK,EAALA,KAAK;IAAEE,QAAQ,EAARA;EAAQ,GAAKC,KAAK,EAAE;IACtD,gBAAgB,EAAE;MAChBH,KAAK,EAAEK,eAAK,CAACC;IACf,CAAC;IACDN,KAAK,EAAEF,WAAW,GAAGO,eAAK,CAACE,GAAG,GAAG,SAAS;IAC1CC,KAAK,EAAE;EAAM;AAAA,CACb;AAEK,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIN,KAAiB;EAAA,OACrC;IAAO,GAAG,EAAE,aAACN,KAAY;MAAA,OAAKD,UAAU,CAACC,KAAK,EAAEM,KAAK,CAAC;IAAA;EAAC,GAAK,IAAAO,qBAAe,EAACP,KAAK,CAAC,EAAI;AAAA,CACvF;AAAC;AAIF,IAAMQ,cAAiE,GAAG,SAApEA,cAAiE,CAAId,KAAK;EAAA,2BAAGK,QAAQ;IAARA,QAAQ,+BAAG,MAAM;IAAKC,KAAK;EAAA,yBACzG,IAAAS,eAAS,EAACf,KAAK;IAAGK,QAAQ,EAARA;EAAQ,GAAKC,KAAK,EAAE;AAAA,CACzC;AAEK,IAAMU,SAAS,GAAG,SAAZA,SAAS,CAAIV,KAAoC;EAAA,OAC5D;IAAG,GAAG,EAAE,aAACN,KAAY;MAAA,OAAKc,cAAc,CAACd,KAAK,EAAEM,KAAK,CAAC;IAAA;EAAC,GAAK,IAAAO,qBAAe,EAACP,KAAK,CAAC,EAAI;AAAA,CACvF;AAAC"}
|
package/src/Text/Line.js
CHANGED
|
@@ -1,36 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.lineStyle = exports.Line = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
7
|
var _react = require("@emotion/react");
|
|
10
8
|
var _react2 = _interopRequireDefault(require("react"));
|
|
11
9
|
var _Identity = require("../Identity");
|
|
12
10
|
var _sizes = require("../Layout/sizes");
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
* Copyright (C) 2018 Wire Swiss GmbH
|
|
16
|
-
*
|
|
17
|
-
* This program is free software: you can redistribute it and/or modify
|
|
18
|
-
* it under the terms of the GNU General Public License as published by
|
|
19
|
-
* the Free Software Foundation, either version 3 of the License, or
|
|
20
|
-
* (at your option) any later version.
|
|
21
|
-
*
|
|
22
|
-
* This program is distributed in the hope that it will be useful,
|
|
23
|
-
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
24
|
-
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
25
|
-
* GNU General Public License for more details.
|
|
26
|
-
*
|
|
27
|
-
* You should have received a copy of the GNU General Public License
|
|
28
|
-
* along with this program. If not, see http://www.gnu.org/licenses/.
|
|
29
|
-
*
|
|
30
|
-
*/
|
|
31
|
-
|
|
32
|
-
/** @jsx jsx */
|
|
33
|
-
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
12
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
|
|
34
13
|
var lineStyle = function lineStyle(_ref) {
|
|
35
14
|
var _ref$color = _ref.color,
|
|
36
15
|
color = _ref$color === void 0 ? _Identity.COLOR.GRAY_LIGHTEN_72 : _ref$color;
|
|
@@ -43,7 +22,7 @@ var lineStyle = function lineStyle(_ref) {
|
|
|
43
22
|
};
|
|
44
23
|
exports.lineStyle = lineStyle;
|
|
45
24
|
var Line = function Line(props) {
|
|
46
|
-
return (0, _react.jsx)("hr", (
|
|
25
|
+
return (0, _react.jsx)("hr", _extends({
|
|
47
26
|
css: lineStyle(props)
|
|
48
27
|
}, props));
|
|
49
28
|
};
|
package/src/Text/Line.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Line.js","names":["lineStyle","color","COLOR","GRAY_LIGHTEN_72","border","borderBottom","marginBottom","GUTTER","marginTop","Line","props"],"sources":["Line.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {GUTTER} from '../Layout/sizes';\n\nexport interface LineProps<T = HTMLHRElement> extends React.HTMLProps<T> {\n color?: string;\n}\n\nexport const lineStyle: <T>(props: LineProps<T>) => CSSObject = ({color = COLOR.GRAY_LIGHTEN_72}) => ({\n border: 'none',\n borderBottom: `1px solid ${color}`,\n marginBottom: `${GUTTER}px`,\n marginTop: `${GUTTER}px`,\n});\n\nexport const Line = (props: LineProps) => <hr css={lineStyle(props)} {...props} />;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Line.js","names":["lineStyle","color","COLOR","GRAY_LIGHTEN_72","border","borderBottom","marginBottom","GUTTER","marginTop","Line","props"],"sources":["Line.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity';\nimport {GUTTER} from '../Layout/sizes';\n\nexport interface LineProps<T = HTMLHRElement> extends React.HTMLProps<T> {\n color?: string;\n}\n\nexport const lineStyle: <T>(props: LineProps<T>) => CSSObject = ({color = COLOR.GRAY_LIGHTEN_72}) => ({\n border: 'none',\n borderBottom: `1px solid ${color}`,\n marginBottom: `${GUTTER}px`,\n marginTop: `${GUTTER}px`,\n});\n\nexport const Line = (props: LineProps) => <hr css={lineStyle(props)} {...props} />;\n"],"mappings":";;;;;;AAoBA;AACA;AAEA;AACA;AAAuC;AAAA;AAMhC,IAAMA,SAAgD,GAAG,SAAnDA,SAAgD;EAAA,sBAAKC,KAAK;IAALA,KAAK,2BAAGC,eAAK,CAACC,eAAe;EAAA,OAAO;IACpGC,MAAM,EAAE,MAAM;IACdC,YAAY,sBAAeJ,KAAK,CAAE;IAClCK,YAAY,YAAKC,aAAM,OAAI;IAC3BC,SAAS,YAAKD,aAAM;EACtB,CAAC;AAAA,CAAC;AAAC;AAEI,IAAME,IAAI,GAAG,SAAPA,IAAI,CAAIC,KAAgB;EAAA,OAAK;IAAI,GAAG,EAAEV,SAAS,CAACU,KAAK;EAAE,GAAKA,KAAK,EAAI;AAAA;AAAC"}
|