@wireapp/react-ui-kit 8.14.1 → 8.14.4
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 +5 -4
- package/src/Form/Button.js +210 -125
- package/src/Form/Button.js.map +1 -1
- package/src/Form/ButtonLink.js +60 -47
- package/src/Form/ButtonLink.js.map +1 -1
- package/src/Form/Checkbox.js +139 -84
- package/src/Form/Checkbox.js.map +1 -1
- package/src/Form/CodeInput.js +201 -98
- package/src/Form/CodeInput.js.map +1 -1
- package/src/Form/DropFileInput.js +214 -116
- package/src/Form/DropFileInput.js.map +1 -1
- package/src/Form/ErrorMessage.js +78 -45
- package/src/Form/ErrorMessage.js.map +1 -1
- package/src/Form/Form.d.ts +1 -0
- package/src/Form/Form.js +31 -28
- package/src/Form/Form.js.map +1 -1
- package/src/Form/Input.js +178 -101
- package/src/Form/Input.js.map +1 -1
- package/src/Form/InputBlock.d.ts +1 -1
- package/src/Form/InputBlock.js +45 -19
- package/src/Form/InputBlock.js.map +1 -1
- package/src/Form/InputLabel.js +46 -44
- package/src/Form/InputLabel.js.map +1 -1
- package/src/Form/InputSubmitCombo.js +53 -49
- package/src/Form/InputSubmitCombo.js.map +1 -1
- package/src/Form/RangeInput.js +71 -47
- package/src/Form/RangeInput.js.map +1 -1
- package/src/Form/RangeInput.styles.js +55 -39
- package/src/Form/RangeInput.styles.js.map +1 -1
- package/src/Form/RoundIconButton.js +62 -42
- package/src/Form/RoundIconButton.js.map +1 -1
- package/src/Form/Select.js +95 -55
- package/src/Form/Select.js.map +1 -1
- package/src/Form/SelectComponents.js +173 -101
- package/src/Form/SelectComponents.js.map +1 -1
- package/src/Form/SelectStyles.d.ts +899 -1
- package/src/Form/SelectStyles.js +156 -96
- package/src/Form/SelectStyles.js.map +1 -1
- package/src/Form/ShakeBox.d.ts +1 -1
- package/src/Form/ShakeBox.js +81 -33
- package/src/Form/ShakeBox.js.map +1 -1
- package/src/Form/Switch.js +124 -89
- package/src/Form/Switch.js.map +1 -1
- package/src/Form/TextArea.js +80 -59
- package/src/Form/TextArea.js.map +1 -1
- package/src/Form/Tooltip.js +75 -66
- package/src/Form/Tooltip.js.map +1 -1
- package/src/Form/index.js +238 -52
- package/src/Form/index.js.map +1 -1
- package/src/GlobalCssVariables.js +96 -79
- package/src/GlobalCssVariables.js.map +1 -1
- package/src/GlobalStyle.d.js +2 -0
- package/src/GlobalStyle.d.js.map +1 -1
- package/src/GlobalStyle.d.ts +2 -1
- package/src/GlobalStyle.js +55 -40
- package/src/GlobalStyle.js.map +1 -1
- package/src/Icon/AddPeopleIcon.js +24 -19
- package/src/Icon/AddPeopleIcon.js.map +1 -1
- package/src/Icon/ArchiveIcon.js +24 -6
- package/src/Icon/ArchiveIcon.js.map +1 -1
- package/src/Icon/ArrowDown.js +23 -19
- package/src/Icon/ArrowDown.js.map +1 -1
- package/src/Icon/ArrowIcon.js +35 -42
- package/src/Icon/ArrowIcon.js.map +1 -1
- package/src/Icon/AttachmentIcon.js +24 -6
- package/src/Icon/AttachmentIcon.js.map +1 -1
- package/src/Icon/AudioVideoIcon.js +24 -6
- package/src/Icon/AudioVideoIcon.js.map +1 -1
- package/src/Icon/BlockIcon.js +24 -6
- package/src/Icon/BlockIcon.js.map +1 -1
- package/src/Icon/Brand/AndroidIcon.js +25 -6
- package/src/Icon/Brand/AndroidIcon.js.map +1 -1
- package/src/Icon/Brand/AppleIcon.js +25 -6
- package/src/Icon/Brand/AppleIcon.js.map +1 -1
- package/src/Icon/Brand/ChromeIcon.js +25 -6
- package/src/Icon/Brand/ChromeIcon.js.map +1 -1
- package/src/Icon/Brand/FacebookIcon.js +24 -6
- package/src/Icon/Brand/FacebookIcon.js.map +1 -1
- package/src/Icon/Brand/GitHubIcon.js +24 -6
- package/src/Icon/Brand/GitHubIcon.js.map +1 -1
- package/src/Icon/Brand/LinkedInIcon.js +24 -6
- package/src/Icon/Brand/LinkedInIcon.js.map +1 -1
- package/src/Icon/Brand/LinuxIcon.js +25 -6
- package/src/Icon/Brand/LinuxIcon.js.map +1 -1
- package/src/Icon/Brand/MicrosoftIcon.js +25 -6
- package/src/Icon/Brand/MicrosoftIcon.js.map +1 -1
- package/src/Icon/Brand/TwitterIcon.js +24 -6
- package/src/Icon/Brand/TwitterIcon.js.map +1 -1
- package/src/Icon/CallIcon.js +24 -6
- package/src/Icon/CallIcon.js.map +1 -1
- package/src/Icon/CamIcon.js +24 -6
- package/src/Icon/CamIcon.js.map +1 -1
- package/src/Icon/CameraIcon.js +24 -19
- package/src/Icon/CameraIcon.js.map +1 -1
- package/src/Icon/CheckIcon.js +24 -6
- package/src/Icon/CheckIcon.js.map +1 -1
- package/src/Icon/CheckRoundIcon.js +24 -6
- package/src/Icon/CheckRoundIcon.js.map +1 -1
- package/src/Icon/ChevronIcon.js +31 -38
- package/src/Icon/ChevronIcon.js.map +1 -1
- package/src/Icon/CloseIcon.js +24 -6
- package/src/Icon/CloseIcon.js.map +1 -1
- package/src/Icon/CopyIcon.js +24 -6
- package/src/Icon/CopyIcon.js.map +1 -1
- package/src/Icon/DeviceIcon.js +24 -6
- package/src/Icon/DeviceIcon.js.map +1 -1
- package/src/Icon/DownloadIcon.js +24 -6
- package/src/Icon/DownloadIcon.js.map +1 -1
- package/src/Icon/EditDocumentIcon.js +25 -19
- package/src/Icon/EditDocumentIcon.js.map +1 -1
- package/src/Icon/EditIcon.js +24 -6
- package/src/Icon/EditIcon.js.map +1 -1
- package/src/Icon/EnterIcon.js +24 -6
- package/src/Icon/EnterIcon.js.map +1 -1
- package/src/Icon/ErrorIcon.js +39 -9
- package/src/Icon/ErrorIcon.js.map +1 -1
- package/src/Icon/FileIcon.js +24 -6
- package/src/Icon/FileIcon.js.map +1 -1
- package/src/Icon/GifIcon.js +24 -6
- package/src/Icon/GifIcon.js.map +1 -1
- package/src/Icon/GridIcon.js +24 -19
- package/src/Icon/GridIcon.js.map +1 -1
- package/src/Icon/GroupIcon.js +24 -6
- package/src/Icon/GroupIcon.js.map +1 -1
- package/src/Icon/HangupIcon.js +24 -6
- package/src/Icon/HangupIcon.js.map +1 -1
- package/src/Icon/HideIcon.js +24 -6
- package/src/Icon/HideIcon.js.map +1 -1
- package/src/Icon/ImageIcon.js +24 -6
- package/src/Icon/ImageIcon.js.map +1 -1
- package/src/Icon/InfoIcon.js +24 -6
- package/src/Icon/InfoIcon.js.map +1 -1
- package/src/Icon/InviteIcon.js +24 -6
- package/src/Icon/InviteIcon.js.map +1 -1
- package/src/Icon/LeaveIcon.js +24 -6
- package/src/Icon/LeaveIcon.js.map +1 -1
- package/src/Icon/LinkIcon.js +24 -19
- package/src/Icon/LinkIcon.js.map +1 -1
- package/src/Icon/ListIcon.js +24 -6
- package/src/Icon/ListIcon.js.map +1 -1
- package/src/Icon/LockIcon.js +25 -6
- package/src/Icon/LockIcon.js.map +1 -1
- package/src/Icon/MessageIcon.js +24 -6
- package/src/Icon/MessageIcon.js.map +1 -1
- package/src/Icon/MinusIcon.js +24 -6
- package/src/Icon/MinusIcon.js.map +1 -1
- package/src/Icon/MoreIcon.js +24 -6
- package/src/Icon/MoreIcon.js.map +1 -1
- package/src/Icon/MuteIcon.js +24 -6
- package/src/Icon/MuteIcon.js.map +1 -1
- package/src/Icon/NotificationIcon.js +24 -6
- package/src/Icon/NotificationIcon.js.map +1 -1
- package/src/Icon/NotificationOffIcon.js +24 -6
- package/src/Icon/NotificationOffIcon.js.map +1 -1
- package/src/Icon/OptionsIcon.js +24 -6
- package/src/Icon/OptionsIcon.js.map +1 -1
- package/src/Icon/PeopleIcon.js +24 -19
- package/src/Icon/PeopleIcon.js.map +1 -1
- package/src/Icon/PingIcon.js +24 -6
- package/src/Icon/PingIcon.js.map +1 -1
- package/src/Icon/PlaneIcon.js +24 -6
- package/src/Icon/PlaneIcon.js.map +1 -1
- package/src/Icon/PlusIcon.js +24 -6
- package/src/Icon/PlusIcon.js.map +1 -1
- package/src/Icon/ProfileIcon.js +24 -6
- package/src/Icon/ProfileIcon.js.map +1 -1
- package/src/Icon/RecordBoldIcon.js +50 -43
- package/src/Icon/RecordBoldIcon.js.map +1 -1
- package/src/Icon/RecordIcon.js +34 -8
- package/src/Icon/RecordIcon.js.map +1 -1
- package/src/Icon/RecordPendingIcon.js +31 -8
- package/src/Icon/RecordPendingIcon.js.map +1 -1
- package/src/Icon/ReloadIcon.js +24 -6
- package/src/Icon/ReloadIcon.js.map +1 -1
- package/src/Icon/SVGIcon.js +78 -53
- package/src/Icon/SVGIcon.js.map +1 -1
- package/src/Icon/ScreenshareIcon.js +24 -6
- package/src/Icon/ScreenshareIcon.js.map +1 -1
- package/src/Icon/SearchIcon.js +25 -6
- package/src/Icon/SearchIcon.js.map +1 -1
- package/src/Icon/ServicesIcon.js +24 -6
- package/src/Icon/ServicesIcon.js.map +1 -1
- package/src/Icon/SettingsIcon.js +24 -6
- package/src/Icon/SettingsIcon.js.map +1 -1
- package/src/Icon/ShowIcon.js +24 -6
- package/src/Icon/ShowIcon.js.map +1 -1
- package/src/Icon/SignIcon.js +24 -6
- package/src/Icon/SignIcon.js.map +1 -1
- package/src/Icon/SpeakerIcon.js +24 -6
- package/src/Icon/SpeakerIcon.js.map +1 -1
- package/src/Icon/SupportIcon.js +24 -6
- package/src/Icon/SupportIcon.js.map +1 -1
- package/src/Icon/TeamIcon.js +24 -6
- package/src/Icon/TeamIcon.js.map +1 -1
- package/src/Icon/TimedIcon.js +24 -6
- package/src/Icon/TimedIcon.js.map +1 -1
- package/src/Icon/TrashCrossIcon.js +24 -6
- package/src/Icon/TrashCrossIcon.js.map +1 -1
- package/src/Icon/TrashIcon.js +24 -6
- package/src/Icon/TrashIcon.js.map +1 -1
- package/src/Icon/TriangleIcon.js +35 -42
- package/src/Icon/TriangleIcon.js.map +1 -1
- package/src/Icon/UploadIcon.js +24 -6
- package/src/Icon/UploadIcon.js.map +1 -1
- package/src/Icon/WireIcon.js +24 -6
- package/src/Icon/WireIcon.js.map +1 -1
- package/src/Icon/index.js +953 -107
- package/src/Icon/index.js.map +1 -1
- package/src/Identity/Animation.js +211 -88
- package/src/Identity/Animation.js.map +1 -1
- package/src/Identity/Avatar.js +114 -66
- package/src/Identity/Avatar.js.map +1 -1
- package/src/Identity/AvatarGrid.js +108 -66
- package/src/Identity/AvatarGrid.js.map +1 -1
- package/src/Identity/Logo.js +54 -45
- package/src/Identity/Logo.js.map +1 -1
- package/src/Identity/colors-v2.js +186 -163
- package/src/Identity/colors-v2.js.map +1 -1
- package/src/Identity/colors.js +80 -64
- package/src/Identity/colors.js.map +1 -1
- package/src/Identity/index.js +81 -38
- package/src/Identity/index.js.map +1 -1
- package/src/Identity/motions.js +35 -71
- package/src/Identity/motions.js.map +1 -1
- package/src/Layout/Box.d.ts +1 -1
- package/src/Layout/Box.js +31 -9
- package/src/Layout/Box.js.map +1 -1
- package/src/Layout/Column.d.ts +1 -1
- package/src/Layout/Column.js +57 -17
- package/src/Layout/Column.js.map +1 -1
- package/src/Layout/Container.d.ts +5 -5
- package/src/Layout/Container.js +102 -29
- package/src/Layout/Container.js.map +1 -1
- package/src/Layout/Content.d.ts +1 -1
- package/src/Layout/Content.js +31 -8
- package/src/Layout/Content.js.map +1 -1
- package/src/Layout/FlexBox.js +45 -10
- package/src/Layout/FlexBox.js.map +1 -1
- package/src/Layout/Footer.d.ts +4 -1
- package/src/Layout/Footer.js +17 -4
- package/src/Layout/Footer.js.map +1 -1
- package/src/Layout/Header.d.ts +1 -1
- package/src/Layout/Header.js +28 -7
- package/src/Layout/Header.js.map +1 -1
- package/src/Layout/MatchMedia.js +112 -27
- package/src/Layout/MatchMedia.js.map +1 -1
- package/src/Layout/Spacer.js +26 -6
- package/src/Layout/Spacer.js.map +1 -1
- package/src/Layout/StyledApp.js +53 -45
- package/src/Layout/StyledApp.js.map +1 -1
- package/src/Layout/Theme.js +225 -217
- package/src/Layout/Theme.js.map +1 -1
- package/src/Layout/headerMenu/HeaderMenu.js +117 -54
- package/src/Layout/headerMenu/HeaderMenu.js.map +1 -1
- package/src/Layout/headerMenu/HeaderSubMenu.d.ts +1 -1
- package/src/Layout/headerMenu/HeaderSubMenu.js +131 -74
- package/src/Layout/headerMenu/HeaderSubMenu.js.map +1 -1
- package/src/Layout/headerMenu/MenuContent.js +47 -26
- package/src/Layout/headerMenu/MenuContent.js.map +1 -1
- package/src/Layout/headerMenu/MenuItems.js +52 -22
- package/src/Layout/headerMenu/MenuItems.js.map +1 -1
- package/src/Layout/headerMenu/MenuLink.js +89 -65
- package/src/Layout/headerMenu/MenuLink.js.map +1 -1
- package/src/Layout/headerMenu/MenuOpenButton.js +54 -26
- package/src/Layout/headerMenu/MenuOpenButton.js.map +1 -1
- package/src/Layout/headerMenu/MenuScrollableItems.js +36 -13
- package/src/Layout/headerMenu/MenuScrollableItems.js.map +1 -1
- package/src/Layout/headerMenu/MenuSubLink.js +64 -45
- package/src/Layout/headerMenu/MenuSubLink.js.map +1 -1
- package/src/Layout/headerMenu/index.js +108 -41
- package/src/Layout/headerMenu/index.js.map +1 -1
- package/src/Layout/index.js +173 -46
- package/src/Layout/index.js.map +1 -1
- package/src/Layout/sizes.js +21 -14
- package/src/Layout/sizes.js.map +1 -1
- package/src/Menu/MenuModal.js +123 -78
- package/src/Menu/MenuModal.js.map +1 -1
- package/src/Menu/TabBar.d.ts +1 -1
- package/src/Menu/TabBar.js +96 -50
- package/src/Menu/TabBar.js.map +1 -1
- package/src/Menu/index.js +29 -34
- package/src/Menu/index.js.map +1 -1
- package/src/Misc/ButtonGroup.js +97 -67
- package/src/Misc/ButtonGroup.js.map +1 -1
- package/src/Misc/IconButton.js +102 -72
- package/src/Misc/IconButton.js.map +1 -1
- package/src/Misc/IsInViewport.js +63 -57
- package/src/Misc/IsInViewport.js.map +1 -1
- package/src/Misc/Loading.d.ts +1 -1
- package/src/Misc/Loading.js +66 -58
- package/src/Misc/Loading.js.map +1 -1
- package/src/Misc/Pagination.js +149 -64
- package/src/Misc/Pagination.js.map +1 -1
- package/src/Misc/Pill.js +80 -66
- package/src/Misc/Pill.js.map +1 -1
- package/src/Misc/childrenWithDefaultProps.d.ts +1 -1
- package/src/Misc/childrenWithDefaultProps.js +28 -28
- package/src/Misc/childrenWithDefaultProps.js.map +1 -1
- package/src/Misc/index.js +121 -42
- package/src/Misc/index.js.map +1 -1
- package/src/Misc/useLongTouch.js +38 -23
- package/src/Misc/useLongTouch.js.map +1 -1
- package/src/Misc/useTimeout.js +44 -24
- package/src/Misc/useTimeout.js.map +1 -1
- package/src/Modal/Modal.js +177 -95
- package/src/Modal/Modal.js.map +1 -1
- package/src/Modal/Overlay.d.ts +2 -2
- package/src/Modal/Overlay.js +92 -68
- package/src/Modal/Overlay.js.map +1 -1
- package/src/Modal/index.js +28 -36
- package/src/Modal/index.js.map +1 -1
- package/src/Text/Heading.js +188 -71
- package/src/Text/Heading.js.map +1 -1
- package/src/Text/Label.js +74 -45
- package/src/Text/Label.js.map +1 -1
- package/src/Text/Line.js +36 -11
- package/src/Text/Line.js.map +1 -1
- package/src/Text/Link.js +88 -60
- package/src/Text/Link.js.map +1 -1
- package/src/Text/Paragraph.js +75 -44
- package/src/Text/Paragraph.js.map +1 -1
- package/src/Text/Text.d.ts +6 -6
- package/src/Text/Text.js +107 -29
- package/src/Text/Text.js.map +1 -1
- package/src/Text/TextLink.js +52 -38
- package/src/Text/TextLink.js.map +1 -1
- package/src/Text/Title.js +55 -38
- package/src/Text/Title.js.map +1 -1
- package/src/Text/index.js +108 -41
- package/src/Text/index.js.map +1 -1
- package/src/index.js +121 -42
- package/src/index.js.map +1 -1
- package/src/mediaQueries.js +41 -40
- package/src/mediaQueries.js.map +1 -1
- package/src/util.js +39 -8
- package/src/util.js.map +1 -1
package/src/Misc/ButtonGroup.js
CHANGED
|
@@ -1,83 +1,113 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
* the Free Software Foundation, either version 3 of the License, or
|
|
9
|
-
* (at your option) any later version.
|
|
10
|
-
*
|
|
11
|
-
* This program is distributed in the hope that it will be useful,
|
|
12
|
-
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
13
|
-
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
14
|
-
* GNU General Public License for more details.
|
|
15
|
-
*
|
|
16
|
-
* You should have received a copy of the GNU General Public License
|
|
17
|
-
* along with this program. If not, see http://www.gnu.org/licenses/.
|
|
18
|
-
*
|
|
19
|
-
*/
|
|
20
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
21
|
-
var t = {};
|
|
22
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
23
|
-
t[p] = s[p];
|
|
24
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
25
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
26
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
27
|
-
t[p[i]] = s[p[i]];
|
|
28
|
-
}
|
|
29
|
-
return t;
|
|
30
|
-
};
|
|
31
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
32
8
|
exports.ButtonGroup = void 0;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _react = require("@emotion/react");
|
|
13
|
+
|
|
14
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
|
+
|
|
16
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
|
+
|
|
18
|
+
var _Identity = require("../Identity");
|
|
19
|
+
|
|
20
|
+
var _excluded = ["children", "icon"];
|
|
21
|
+
|
|
22
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
23
|
+
|
|
24
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
25
|
+
|
|
26
|
+
var buttonGroupStyle = function buttonGroupStyle() {
|
|
27
|
+
return {
|
|
28
|
+
display: 'flex',
|
|
29
|
+
alignItems: 'center'
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
var buttonStyle = function buttonStyle(theme, _ref) {
|
|
34
|
+
var _ref$disabled = _ref.disabled,
|
|
35
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
36
|
+
return _objectSpread({
|
|
37
|
+
height: '32px',
|
|
38
|
+
borderRadius: '12px',
|
|
39
|
+
padding: '0 12px',
|
|
40
|
+
background: _Identity.COLOR_V2.WHITE,
|
|
41
|
+
border: "1px solid ".concat(_Identity.COLOR_V2.GRAY_40),
|
|
42
|
+
cursor: 'pointer',
|
|
37
43
|
display: 'flex',
|
|
38
44
|
alignItems: 'center',
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
},
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
45
|
+
backgroundColor: disabled ? _Identity.COLOR_V2.GRAY_20 : _Identity.COLOR_V2.WHITE,
|
|
46
|
+
svg: {
|
|
47
|
+
fill: disabled ? _Identity.COLOR_V2.GRAY_70 : _Identity.COLOR_V2.BLACK
|
|
48
|
+
},
|
|
49
|
+
'&:not(:last-child)': {
|
|
50
|
+
borderTopRightRadius: '0',
|
|
51
|
+
borderBottomRightRadius: '0'
|
|
52
|
+
},
|
|
53
|
+
'&:not(:first-child)': {
|
|
54
|
+
borderTopLeftRadius: '0',
|
|
55
|
+
borderBottomLeftRadius: '0'
|
|
56
|
+
},
|
|
57
|
+
'&:first-child:last-child': {
|
|
58
|
+
borderRadius: '0'
|
|
59
|
+
}
|
|
60
|
+
}, !disabled && {
|
|
51
61
|
'&:hover, &:focus': {
|
|
52
|
-
|
|
62
|
+
backgroundColor: _Identity.COLOR_V2.GRAY_20
|
|
53
63
|
},
|
|
54
64
|
'&:hover': {
|
|
55
|
-
|
|
65
|
+
borderColor: _Identity.COLOR_V2.GRAY_50
|
|
56
66
|
},
|
|
57
67
|
'&:focus': {
|
|
58
|
-
|
|
68
|
+
borderColor: _Identity.COLOR_V2.GRAY_60
|
|
59
69
|
},
|
|
60
70
|
'&:active': {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
71
|
+
backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_50,
|
|
72
|
+
borderColor: _Identity.COLOR_V2.BLUE_LIGHT_300,
|
|
73
|
+
svg: {
|
|
74
|
+
fill: _Identity.COLOR_V2.BLUE
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
var ButtonGroup = function ButtonGroup(_ref2) {
|
|
81
|
+
var children = _ref2.children;
|
|
82
|
+
return (0, _react.jsx)("div", {
|
|
83
|
+
css: function css(theme) {
|
|
84
|
+
return buttonGroupStyle(theme);
|
|
66
85
|
},
|
|
67
|
-
|
|
68
|
-
|
|
86
|
+
role: "group",
|
|
87
|
+
"aria-label": "Button Group"
|
|
88
|
+
}, children);
|
|
89
|
+
};
|
|
90
|
+
|
|
69
91
|
exports.ButtonGroup = ButtonGroup;
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
92
|
+
|
|
93
|
+
var Button = function Button(_ref3) {
|
|
94
|
+
var children = _ref3.children,
|
|
95
|
+
icon = _ref3.icon,
|
|
96
|
+
props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
|
|
97
|
+
return (0, _react.jsx)("button", (0, _extends2["default"])({
|
|
98
|
+
css: function css(theme) {
|
|
99
|
+
return buttonStyle(theme, props);
|
|
100
|
+
}
|
|
101
|
+
}, props), icon, children && (0, _react.jsx)("span", {
|
|
102
|
+
css: /*#__PURE__*/(0, _react.css)({
|
|
103
|
+
marginLeft: !!icon && '6px',
|
|
104
|
+
fontSize: '12px',
|
|
105
|
+
fontWeight: 'bold',
|
|
106
|
+
lineHeight: '14px',
|
|
107
|
+
letterSpacing: '0.25px'
|
|
108
|
+
}, process.env.NODE_ENV === "production" ? "" : ";label:Button;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbkdyb3VwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2RlUiLCJmaWxlIjoiQnV0dG9uR3JvdXAudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAyMiBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtDU1NPYmplY3QsIGpzeH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHtSZWFjdEVsZW1lbnR9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtDT0xPUl9WMn0gZnJvbSAnLi4vSWRlbnRpdHknO1xuaW1wb3J0IHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB7SWNvbkJ1dHRvblByb3BzfSBmcm9tICcuL0ljb25CdXR0b24nO1xuXG5jb25zdCBidXR0b25Hcm91cFN0eWxlOiA8VD4odGhlbWU6IFRoZW1lKSA9PiBDU1NPYmplY3QgPSAoKSA9PiAoe1xuICBkaXNwbGF5OiAnZmxleCcsXG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxufSk7XG5cbmNvbnN0IGJ1dHRvblN0eWxlOiA8VD4odGhlbWU6IFRoZW1lLCBwcm9wczogSWNvbkJ1dHRvblByb3BzPFQ+KSA9PiBDU1NPYmplY3QgPSAodGhlbWUsIHtkaXNhYmxlZCA9IGZhbHNlfSkgPT4gKHtcbiAgaGVpZ2h0OiAnMzJweCcsXG4gIGJvcmRlclJhZGl1czogJzEycHgnLFxuICBwYWRkaW5nOiAnMCAxMnB4JyxcbiAgYmFja2dyb3VuZDogQ09MT1JfVjIuV0hJVEUsXG4gIGJvcmRlcjogYDFweCBzb2xpZCAke0NPTE9SX1YyLkdSQVlfNDB9YCxcbiAgY3Vyc29yOiAncG9pbnRlcicsXG4gIGRpc3BsYXk6ICdmbGV4JyxcbiAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIGJhY2tncm91bmRDb2xvcjogZGlzYWJsZWQgPyBDT0xPUl9WMi5HUkFZXzIwIDogQ09MT1JfVjIuV0hJVEUsXG4gIHN2Zzoge1xuICAgIGZpbGw6IGRpc2FibGVkID8gQ09MT1JfVjIuR1JBWV83MCA6IENPTE9SX1YyLkJMQUNLLFxuICB9LFxuICAnJjpub3QoOmxhc3QtY2hpbGQpJzoge1xuICAgIGJvcmRlclRvcFJpZ2h0UmFkaXVzOiAnMCcsXG4gICAgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6ICcwJyxcbiAgfSxcbiAgJyY6bm90KDpmaXJzdC1jaGlsZCknOiB7XG4gICAgYm9yZGVyVG9wTGVmdFJhZGl1czogJzAnLFxuICAgIGJvcmRlckJvdHRvbUxlZnRSYWRpdXM6ICcwJyxcbiAgfSxcbiAgJyY6Zmlyc3QtY2hpbGQ6bGFzdC1jaGlsZCc6IHtcbiAgICBib3JkZXJSYWRpdXM6ICcwJyxcbiAgfSxcbiAgLi4uKCFkaXNhYmxlZCAmJiB7XG4gICAgJyY6aG92ZXIsICY6Zm9jdXMnOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IENPTE9SX1YyLkdSQVlfMjAsXG4gICAgfSxcbiAgICAnJjpob3Zlcic6IHtcbiAgICAgIGJvcmRlckNvbG9yOiBDT0xPUl9WMi5HUkFZXzUwLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMnOiB7XG4gICAgICBib3JkZXJDb2xvcjogQ09MT1JfVjIuR1JBWV82MCxcbiAgICB9LFxuICAgICcmOmFjdGl2ZSc6IHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogQ09MT1JfVjIuQkxVRV9MSUdIVF81MCxcbiAgICAgIGJvcmRlckNvbG9yOiBDT0xPUl9WMi5CTFVFX0xJR0hUXzMwMCxcbiAgICAgIHN2Zzoge1xuICAgICAgICBmaWxsOiBDT0xPUl9WMi5CTFVFLFxuICAgICAgfSxcbiAgICB9LFxuICB9KSxcbn0pO1xuXG5pbnRlcmZhY2UgR3JvdXBCdXR0b25Qcm9wczxUID0gSFRNTEJ1dHRvbkVsZW1lbnQ+IHtcbiAgY2hpbGRyZW4/OiBSZWFjdEVsZW1lbnQgfCBzdHJpbmc7XG4gIGljb24/OiBSZWFjdEVsZW1lbnQ7XG59XG5cbmNvbnN0IEJ1dHRvbkdyb3VwID0gKHtjaGlsZHJlbn0pID0+IChcbiAgPGRpdiBjc3M9eyh0aGVtZTogVGhlbWUpID0+IGJ1dHRvbkdyb3VwU3R5bGUodGhlbWUpfSByb2xlPVwiZ3JvdXBcIiBhcmlhLWxhYmVsPVwiQnV0dG9uIEdyb3VwXCI+XG4gICAge2NoaWxkcmVufVxuICA8L2Rpdj5cbik7XG5cbmNvbnN0IEJ1dHRvbiA9ICh7Y2hpbGRyZW4sIGljb24sIC4uLnByb3BzfTogR3JvdXBCdXR0b25Qcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxidXR0b24gY3NzPXsodGhlbWU6IFRoZW1lKSA9PiBidXR0b25TdHlsZSh0aGVtZSwgcHJvcHMpfSB7Li4ucHJvcHN9PlxuICAgICAge2ljb259XG4gICAgICB7Y2hpbGRyZW4gJiYgKFxuICAgICAgICA8c3BhblxuICAgICAgICAgIGNzcz17e1xuICAgICAgICAgICAgbWFyZ2luTGVmdDogISFpY29uICYmICc2cHgnLFxuICAgICAgICAgICAgZm9udFNpemU6ICcxMnB4JyxcbiAgICAgICAgICAgIGZvbnRXZWlnaHQ6ICdib2xkJyxcbiAgICAgICAgICAgIGxpbmVIZWlnaHQ6ICcxNHB4JyxcbiAgICAgICAgICAgIGxldHRlclNwYWNpbmc6ICcwLjI1cHgnLFxuICAgICAgICAgIH19XG4gICAgICAgID5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICl9XG4gICAgPC9idXR0b24+XG4gICk7XG59O1xuXG5CdXR0b25Hcm91cC5CdXR0b24gPSBCdXR0b247XG5cbmV4cG9ydCB7QnV0dG9uR3JvdXB9O1xuIl19 */")
|
|
109
|
+
}, children));
|
|
81
110
|
};
|
|
111
|
+
|
|
82
112
|
ButtonGroup.Button = Button;
|
|
83
113
|
//# sourceMappingURL=ButtonGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["ButtonGroup.tsx"],"names":["buttonGroupStyle","display","alignItems","buttonStyle","theme","disabled","height","borderRadius","padding","background","COLOR_V2","WHITE","border","GRAY_40","cursor","backgroundColor","GRAY_20","svg","fill","GRAY_70","BLACK","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderColor","GRAY_50","GRAY_60","BLUE_LIGHT_50","BLUE_LIGHT_300","BLUE","ButtonGroup","children","Button","icon","props","marginLeft","fontSize","fontWeight","lineHeight","letterSpacing"],"mappings":";;;;;;;;;;;AAoBA;;;;;;AAGA;;;;;;;;AAIA,IAAMA,gBAAgD,GAAG,SAAnDA,gBAAmD;AAAA,SAAO;AAC9DC,IAAAA,OAAO,EAAE,MADqD;AAE9DC,IAAAA,UAAU,EAAE;AAFkD,GAAP;AAAA,CAAzD;;AAKA,IAAMC,WAAsE,GAAG,SAAzEA,WAAyE,CAACC,KAAD;AAAA,2BAASC,QAAT;AAAA,MAASA,QAAT,8BAAoB,KAApB;AAAA;AAC7EC,IAAAA,MAAM,EAAE,MADqE;AAE7EC,IAAAA,YAAY,EAAE,MAF+D;AAG7EC,IAAAA,OAAO,EAAE,QAHoE;AAI7EC,IAAAA,UAAU,EAAEC,mBAASC,KAJwD;AAK7EC,IAAAA,MAAM,sBAAeF,mBAASG,OAAxB,CALuE;AAM7EC,IAAAA,MAAM,EAAE,SANqE;AAO7Eb,IAAAA,OAAO,EAAE,MAPoE;AAQ7EC,IAAAA,UAAU,EAAE,QARiE;AAS7Ea,IAAAA,eAAe,EAAEV,QAAQ,GAAGK,mBAASM,OAAZ,GAAsBN,mBAASC,KATqB;AAU7EM,IAAAA,GAAG,EAAE;AACHC,MAAAA,IAAI,EAAEb,QAAQ,GAAGK,mBAASS,OAAZ,GAAsBT,mBAASU;AAD1C,KAVwE;AAa7E,0BAAsB;AACpBC,MAAAA,oBAAoB,EAAE,GADF;AAEpBC,MAAAA,uBAAuB,EAAE;AAFL,KAbuD;AAiB7E,2BAAuB;AACrBC,MAAAA,mBAAmB,EAAE,GADA;AAErBC,MAAAA,sBAAsB,EAAE;AAFH,KAjBsD;AAqB7E,gCAA4B;AAC1BjB,MAAAA,YAAY,EAAE;AADY;AArBiD,KAwBzE,CAACF,QAAD,IAAa;AACf,wBAAoB;AAClBU,MAAAA,eAAe,EAAEL,mBAASM;AADR,KADL;AAIf,eAAW;AACTS,MAAAA,WAAW,EAAEf,mBAASgB;AADb,KAJI;AAOf,eAAW;AACTD,MAAAA,WAAW,EAAEf,mBAASiB;AADb,KAPI;AAUf,gBAAY;AACVZ,MAAAA,eAAe,EAAEL,mBAASkB,aADhB;AAEVH,MAAAA,WAAW,EAAEf,mBAASmB,cAFZ;AAGVZ,MAAAA,GAAG,EAAE;AACHC,QAAAA,IAAI,EAAER,mBAASoB;AADZ;AAHK;AAVG,GAxB4D;AAAA,CAA/E;;AAiDA,IAAMC,WAAW,GAAG,SAAdA,WAAc;AAAA,MAAEC,QAAF,SAAEA,QAAF;AAAA,SAClB;AAAK,IAAA,GAAG,EAAE,aAAC5B,KAAD;AAAA,aAAkBJ,gBAAgB,CAACI,KAAD,CAAlC;AAAA,KAAV;AAAqD,IAAA,IAAI,EAAC,OAA1D;AAAkE,kBAAW;AAA7E,KACG4B,QADH,CADkB;AAAA,CAApB;;;;AAMA,IAAMC,MAAM,GAAG,SAATA,MAAS,QAAkD;AAAA,MAAhDD,QAAgD,SAAhDA,QAAgD;AAAA,MAAtCE,IAAsC,SAAtCA,IAAsC;AAAA,MAA7BC,KAA6B;AAC/D,SACE;AAAQ,IAAA,GAAG,EAAE,aAAC/B,KAAD;AAAA,aAAkBD,WAAW,CAACC,KAAD,EAAQ+B,KAAR,CAA7B;AAAA;AAAb,KAA8DA,KAA9D,GACGD,IADH,EAEGF,QAAQ,IACP;AACE,IAAA,GAAG,+BAAE;AACHI,MAAAA,UAAU,EAAE,CAAC,CAACF,IAAF,IAAU,KADnB;AAEHG,MAAAA,QAAQ,EAAE,MAFP;AAGHC,MAAAA,UAAU,EAAE,MAHT;AAIHC,MAAAA,UAAU,EAAE,MAJT;AAKHC,MAAAA,aAAa,EAAE;AALZ,KAAF;AADL,KASGR,QATH,CAHJ,CADF;AAkBD,CAnBD;;AAqBAD,WAAW,CAACE,MAAZ,GAAqBA,MAArB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 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 {ReactElement} from 'react';\n\nimport {COLOR_V2} from '../Identity';\nimport {Theme} from '../Layout';\nimport {IconButtonProps} from './IconButton';\n\nconst buttonGroupStyle: <T>(theme: Theme) => CSSObject = () => ({\n display: 'flex',\n alignItems: 'center',\n});\n\nconst buttonStyle: <T>(theme: Theme, props: IconButtonProps<T>) => CSSObject = (theme, {disabled = false}) => ({\n height: '32px',\n borderRadius: '12px',\n padding: '0 12px',\n background: COLOR_V2.WHITE,\n border: `1px solid ${COLOR_V2.GRAY_40}`,\n cursor: 'pointer',\n display: 'flex',\n alignItems: 'center',\n backgroundColor: disabled ? COLOR_V2.GRAY_20 : COLOR_V2.WHITE,\n svg: {\n fill: disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLACK,\n },\n '&:not(:last-child)': {\n borderTopRightRadius: '0',\n borderBottomRightRadius: '0',\n },\n '&:not(:first-child)': {\n borderTopLeftRadius: '0',\n borderBottomLeftRadius: '0',\n },\n '&:first-child:last-child': {\n borderRadius: '0',\n },\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: COLOR_V2.GRAY_20,\n },\n '&:hover': {\n borderColor: COLOR_V2.GRAY_50,\n },\n '&:focus': {\n borderColor: COLOR_V2.GRAY_60,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_50,\n borderColor: COLOR_V2.BLUE_LIGHT_300,\n svg: {\n fill: COLOR_V2.BLUE,\n },\n },\n }),\n});\n\ninterface GroupButtonProps<T = HTMLButtonElement> {\n children?: ReactElement | string;\n icon?: ReactElement;\n}\n\nconst ButtonGroup = ({children}) => (\n <div css={(theme: Theme) => buttonGroupStyle(theme)} role=\"group\" aria-label=\"Button Group\">\n {children}\n </div>\n);\n\nconst Button = ({children, icon, ...props}: GroupButtonProps) => {\n return (\n <button css={(theme: Theme) => buttonStyle(theme, props)} {...props}>\n {icon}\n {children && (\n <span\n css={{\n marginLeft: !!icon && '6px',\n fontSize: '12px',\n fontWeight: 'bold',\n lineHeight: '14px',\n letterSpacing: '0.25px',\n }}\n >\n {children}\n </span>\n )}\n </button>\n );\n};\n\nButtonGroup.Button = Button;\n\nexport {ButtonGroup};\n"],"file":"ButtonGroup.js"}
|
package/src/Misc/IconButton.js
CHANGED
|
@@ -1,93 +1,123 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
* the Free Software Foundation, either version 3 of the License, or
|
|
9
|
-
* (at your option) any later version.
|
|
10
|
-
*
|
|
11
|
-
* This program is distributed in the hope that it will be useful,
|
|
12
|
-
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
13
|
-
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
14
|
-
* GNU General Public License for more details.
|
|
15
|
-
*
|
|
16
|
-
* You should have received a copy of the GNU General Public License
|
|
17
|
-
* along with this program. If not, see http://www.gnu.org/licenses/.
|
|
18
|
-
*
|
|
19
|
-
*/
|
|
20
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
21
|
-
var t = {};
|
|
22
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
23
|
-
t[p] = s[p];
|
|
24
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
25
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
26
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
27
|
-
t[p[i]] = s[p[i]];
|
|
28
|
-
}
|
|
29
|
-
return t;
|
|
30
|
-
};
|
|
31
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
32
8
|
exports.IconButton = exports.iconButtonStyle = exports.IconButtonVariant = void 0;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
+
|
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
+
|
|
16
|
+
var _react = require("@emotion/react");
|
|
17
|
+
|
|
18
|
+
var _motions = require("../Identity/motions");
|
|
19
|
+
|
|
20
|
+
var _Text = require("../Text");
|
|
21
|
+
|
|
22
|
+
var _util = require("../util");
|
|
23
|
+
|
|
24
|
+
var _excluded = ["children"];
|
|
25
|
+
|
|
26
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
27
|
+
|
|
28
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
29
|
+
|
|
38
30
|
var IconButtonVariant;
|
|
31
|
+
exports.IconButtonVariant = IconButtonVariant;
|
|
32
|
+
|
|
39
33
|
(function (IconButtonVariant) {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
})(IconButtonVariant
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
34
|
+
IconButtonVariant["PRIMARY"] = "primary";
|
|
35
|
+
IconButtonVariant["SECONDARY"] = "secondary";
|
|
36
|
+
})(IconButtonVariant || (exports.IconButtonVariant = IconButtonVariant = {}));
|
|
37
|
+
|
|
38
|
+
var iconButtonStyle = function iconButtonStyle(theme, _ref) {
|
|
39
|
+
var _ref$variant = _ref.variant,
|
|
40
|
+
variant = _ref$variant === void 0 ? IconButtonVariant.PRIMARY : _ref$variant,
|
|
41
|
+
backgroundColor = _ref.backgroundColor,
|
|
42
|
+
_ref$disabled = _ref.disabled,
|
|
43
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
44
|
+
return _objectSpread(_objectSpread({
|
|
45
|
+
border: 0,
|
|
46
|
+
borderRadius: '12px',
|
|
47
|
+
cursor: disabled ? 'default' : 'pointer',
|
|
48
|
+
display: 'flex',
|
|
49
|
+
alignItems: 'center',
|
|
50
|
+
justifyContent: 'center',
|
|
51
|
+
marginBottom: '16px',
|
|
52
|
+
padding: 0,
|
|
53
|
+
outline: 'none',
|
|
54
|
+
textDecoration: 'none',
|
|
55
|
+
touchAction: 'manipulation',
|
|
56
|
+
transition: _motions.defaultTransition,
|
|
57
|
+
width: '40px',
|
|
58
|
+
height: '32px',
|
|
59
|
+
'&:hover, &:focus': {
|
|
60
|
+
textDecoration: 'none'
|
|
61
|
+
}
|
|
62
|
+
}, variant === IconButtonVariant.PRIMARY && _objectSpread({
|
|
63
|
+
backgroundColor: disabled ? theme.IconButton.primaryDisabledBgColor : backgroundColor || theme.IconButton.primaryBgColor,
|
|
64
|
+
border: disabled ? "1px solid ".concat(theme.IconButton.primaryDisabledBorderColor) : "1px solid ".concat(theme.IconButton.primaryBorderColor),
|
|
65
|
+
svg: {
|
|
66
|
+
fill: disabled ? theme.Input.placeholderColor : theme.general.color
|
|
67
|
+
}
|
|
68
|
+
}, !disabled && {
|
|
52
69
|
'&:hover, &:focus': {
|
|
53
|
-
|
|
70
|
+
backgroundColor: theme.IconButton.hoverPrimaryBgColor
|
|
54
71
|
},
|
|
55
72
|
'&:hover': {
|
|
56
|
-
|
|
73
|
+
borderColor: theme.IconButton.primaryHoverBorderColor
|
|
57
74
|
},
|
|
58
75
|
'&:focus': {
|
|
59
|
-
|
|
76
|
+
borderColor: theme.IconButton.focusBorderColor
|
|
60
77
|
},
|
|
61
78
|
'&:active': {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
}))
|
|
69
|
-
|
|
70
|
-
|
|
79
|
+
backgroundColor: theme.IconButton.activePrimaryBgColor,
|
|
80
|
+
borderColor: theme.IconButton.focusBorderColor,
|
|
81
|
+
svg: {
|
|
82
|
+
fill: theme.general.primaryColor
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
})), variant === IconButtonVariant.SECONDARY && _objectSpread({
|
|
86
|
+
backgroundColor: 'inherit',
|
|
87
|
+
svg: {
|
|
88
|
+
fill: disabled ? theme.Input.placeholderColor : theme.general.color
|
|
89
|
+
}
|
|
90
|
+
}, !disabled && {
|
|
71
91
|
'&:hover, &:focus, &:active': {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
92
|
+
svg: {
|
|
93
|
+
fill: theme.general.primaryColor
|
|
94
|
+
}
|
|
75
95
|
},
|
|
76
96
|
'&:focus': {
|
|
77
|
-
|
|
97
|
+
border: "1px solid ".concat(theme.IconButton.focusBorderColor)
|
|
78
98
|
},
|
|
79
99
|
'&:active': {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
}))
|
|
100
|
+
border: "1px solid ".concat(theme.IconButton.secondaryActiveBorderColor),
|
|
101
|
+
backgroundColor: theme.Input.backgroundColor
|
|
102
|
+
}
|
|
103
|
+
}));
|
|
104
|
+
};
|
|
105
|
+
|
|
84
106
|
exports.iconButtonStyle = iconButtonStyle;
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
107
|
+
|
|
108
|
+
var IconButton = function IconButton(_ref2) {
|
|
109
|
+
var children = _ref2.children,
|
|
110
|
+
props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
|
|
111
|
+
return (0, _react.jsx)("button", (0, _extends2["default"])({
|
|
112
|
+
css: function css(theme) {
|
|
113
|
+
return iconButtonStyle(theme, props);
|
|
114
|
+
}
|
|
115
|
+
}, filterButtonProps(props)), children);
|
|
88
116
|
};
|
|
117
|
+
|
|
89
118
|
exports.IconButton = IconButton;
|
|
90
|
-
|
|
91
|
-
|
|
119
|
+
|
|
120
|
+
var filterButtonProps = function filterButtonProps(props) {
|
|
121
|
+
return (0, _util.filterProps)((0, _Text.filterTextProps)(props), ['backgroundColor']);
|
|
92
122
|
};
|
|
93
123
|
//# sourceMappingURL=IconButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["IconButton.tsx"],"names":["IconButtonVariant","iconButtonStyle","theme","variant","PRIMARY","backgroundColor","disabled","border","borderRadius","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","height","IconButton","primaryDisabledBgColor","primaryBgColor","primaryDisabledBorderColor","primaryBorderColor","svg","fill","Input","placeholderColor","general","color","hoverPrimaryBgColor","borderColor","primaryHoverBorderColor","focusBorderColor","activePrimaryBgColor","primaryColor","SECONDARY","secondaryActiveBorderColor","children","props","filterButtonProps"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 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 {defaultTransition} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {TextProps, filterTextProps} from '../Text';\nimport {filterProps} from '../util';\n\nexport enum IconButtonVariant {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n}\n\nexport interface IconButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n variant?: IconButtonVariant;\n backgroundColor?: string;\n}\n\nexport const iconButtonStyle: <T>(theme: Theme, props: IconButtonProps<T>) => CSSObject = (\n theme,\n {variant = IconButtonVariant.PRIMARY, backgroundColor, disabled = false},\n) => ({\n border: 0,\n borderRadius: '12px',\n cursor: disabled ? 'default' : 'pointer',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginBottom: '16px',\n padding: 0,\n outline: 'none',\n textDecoration: 'none',\n touchAction: 'manipulation',\n transition: defaultTransition,\n width: '40px',\n height: '32px',\n '&:hover, &:focus': {\n textDecoration: 'none',\n },\n ...(variant === IconButtonVariant.PRIMARY && {\n backgroundColor: disabled\n ? theme.IconButton.primaryDisabledBgColor\n : backgroundColor || theme.IconButton.primaryBgColor,\n border: disabled\n ? `1px solid ${theme.IconButton.primaryDisabledBorderColor}`\n : `1px solid ${theme.IconButton.primaryBorderColor}`,\n svg: {\n fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n },\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: theme.IconButton.hoverPrimaryBgColor,\n },\n '&:hover': {\n borderColor: theme.IconButton.primaryHoverBorderColor,\n },\n '&:focus': {\n borderColor: theme.IconButton.focusBorderColor,\n },\n '&:active': {\n backgroundColor: theme.IconButton.activePrimaryBgColor,\n borderColor: theme.IconButton.focusBorderColor,\n svg: {\n fill: theme.general.primaryColor,\n },\n },\n }),\n }),\n ...(variant === IconButtonVariant.SECONDARY && {\n backgroundColor: 'inherit',\n svg: {\n fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n },\n ...(!disabled && {\n '&:hover, &:focus, &:active': {\n svg: {\n fill: theme.general.primaryColor,\n },\n },\n '&:focus': {\n border: `1px solid ${theme.IconButton.focusBorderColor}`,\n },\n '&:active': {\n border: `1px solid ${theme.IconButton.secondaryActiveBorderColor}`,\n backgroundColor: theme.Input.backgroundColor,\n },\n }),\n }),\n});\n\nexport const IconButton = ({children, ...props}: IconButtonProps) => (\n <button css={(theme: Theme) => iconButtonStyle(theme, props)} {...filterButtonProps(props)}>\n {children}\n </button>\n);\n\nconst filterButtonProps = (props: IconButtonProps) => {\n return filterProps(filterTextProps(props) as IconButtonProps, ['backgroundColor']);\n};\n"],"file":"IconButton.js"}
|
package/src/Misc/IsInViewport.js
CHANGED
|
@@ -1,63 +1,69 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
*
|
|
11
|
-
* This program is distributed in the hope that it will be useful,
|
|
12
|
-
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
13
|
-
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
14
|
-
* GNU General Public License for more details.
|
|
15
|
-
*
|
|
16
|
-
* You should have received a copy of the GNU General Public License
|
|
17
|
-
* along with this program. If not, see http://www.gnu.org/licenses/.
|
|
18
|
-
*
|
|
19
|
-
*/
|
|
20
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
21
|
-
var t = {};
|
|
22
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
23
|
-
t[p] = s[p];
|
|
24
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
25
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
26
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
27
|
-
t[p[i]] = s[p[i]];
|
|
28
|
-
}
|
|
29
|
-
return t;
|
|
30
|
-
};
|
|
31
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
32
10
|
exports.IsInViewport = void 0;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
17
|
+
|
|
18
|
+
var _react = require("@emotion/react");
|
|
19
|
+
|
|
20
|
+
var _react2 = _interopRequireWildcard(require("react"));
|
|
21
|
+
|
|
22
|
+
var _excluded = ["onEnterViewport", "disabled", "checkViewportOnce"];
|
|
23
|
+
|
|
24
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
|
+
|
|
26
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
|
+
|
|
28
|
+
var IsInViewport = function IsInViewport(_ref) {
|
|
29
|
+
var onEnterViewport = _ref.onEnterViewport,
|
|
30
|
+
_ref$disabled = _ref.disabled,
|
|
31
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
32
|
+
_ref$checkViewportOnc = _ref.checkViewportOnce,
|
|
33
|
+
checkViewportOnce = _ref$checkViewportOnc === void 0 ? false : _ref$checkViewportOnc,
|
|
34
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
35
|
+
var element = (0, _react2.useRef)();
|
|
36
|
+
(0, _react2.useEffect)(function () {
|
|
37
|
+
var observer = undefined;
|
|
38
|
+
|
|
39
|
+
if (onEnterViewport && !disabled) {
|
|
40
|
+
observer = new IntersectionObserver(function (_ref2) {
|
|
41
|
+
var _ref3 = (0, _slicedToArray2["default"])(_ref2, 1),
|
|
42
|
+
isIntersecting = _ref3[0].isIntersecting;
|
|
43
|
+
|
|
44
|
+
if (isIntersecting) {
|
|
45
|
+
if (checkViewportOnce) {
|
|
46
|
+
observer.disconnect();
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
if (onEnterViewport && !disabled) {
|
|
50
|
+
onEnterViewport();
|
|
51
|
+
}
|
|
53
52
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
53
|
+
});
|
|
54
|
+
observer.observe(element.current);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
return function () {
|
|
58
|
+
if (observer) {
|
|
59
|
+
observer.disconnect();
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
}, [onEnterViewport]);
|
|
63
|
+
return (0, _react.jsx)("div", (0, _extends2["default"])({
|
|
64
|
+
ref: element
|
|
65
|
+
}, props));
|
|
61
66
|
};
|
|
67
|
+
|
|
62
68
|
exports.IsInViewport = IsInViewport;
|
|
63
69
|
//# sourceMappingURL=IsInViewport.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["IsInViewport.tsx"],"names":["IsInViewport","onEnterViewport","disabled","checkViewportOnce","props","element","observer","undefined","IntersectionObserver","isIntersecting","disconnect","observe","current"],"mappings":";;;;;;;;;;;;;;;;;AAoBA;;AACA;;;;;;;;AAQO,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAKH;AAAA,MAJvBC,eAIuB,QAJvBA,eAIuB;AAAA,2BAHvBC,QAGuB;AAAA,MAHvBA,QAGuB,8BAHZ,KAGY;AAAA,mCAFvBC,iBAEuB;AAAA,MAFvBA,iBAEuB,sCAFH,KAEG;AAAA,MADpBC,KACoB;AACvB,MAAMC,OAAO,GAAG,qBAAhB;AACA,yBAAU,YAAM;AACd,QAAIC,QAAQ,GAAGC,SAAf;;AACA,QAAIN,eAAe,IAAI,CAACC,QAAxB,EAAkC;AAChCI,MAAAA,QAAQ,GAAG,IAAIE,oBAAJ,CAAyB,iBAAwB;AAAA;AAAA,YAArBC,cAAqB,YAArBA,cAAqB;;AAC1D,YAAIA,cAAJ,EAAoB;AAClB,cAAIN,iBAAJ,EAAuB;AACrBG,YAAAA,QAAQ,CAACI,UAAT;AACD;;AACD,cAAIT,eAAe,IAAI,CAACC,QAAxB,EAAkC;AAChCD,YAAAA,eAAe;AAChB;AACF;AACF,OATU,CAAX;AAUAK,MAAAA,QAAQ,CAACK,OAAT,CAAiBN,OAAO,CAACO,OAAzB;AACD;;AAED,WAAO,YAAM;AACX,UAAIN,QAAJ,EAAc;AACZA,QAAAA,QAAQ,CAACI,UAAT;AACD;AACF,KAJD;AAKD,GArBD,EAqBG,CAACT,eAAD,CArBH;AAsBA,SAAO;AAAK,IAAA,GAAG,EAAEI;AAAV,KAAuBD,KAAvB,EAAP;AACD,CA9BM","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\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React, {useEffect, useRef} from 'react';\n\nexport interface IsInViewportProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n checkViewportOnce?: boolean;\n disabled?: boolean;\n onEnterViewport?: () => void;\n}\n\nexport const IsInViewport = ({\n onEnterViewport,\n disabled = false,\n checkViewportOnce = false,\n ...props\n}: IsInViewportProps) => {\n const element = useRef<HTMLDivElement>();\n useEffect(() => {\n let observer = undefined;\n if (onEnterViewport && !disabled) {\n observer = new IntersectionObserver(([{isIntersecting}]) => {\n if (isIntersecting) {\n if (checkViewportOnce) {\n observer.disconnect();\n }\n if (onEnterViewport && !disabled) {\n onEnterViewport();\n }\n }\n });\n observer.observe(element.current);\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [onEnterViewport]);\n return <div ref={element} {...props} />;\n};\n"],"file":"IsInViewport.js"}
|
package/src/Misc/Loading.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export interface LoadingProps<T = SVGSVGElement> extends React.SVGProps<T> {
|
|
|
9
9
|
export declare const Loading: {
|
|
10
10
|
({ progress, size, color, ...props }: LoadingProps): jsx.JSX.Element;
|
|
11
11
|
defaultProps: {
|
|
12
|
-
progress:
|
|
12
|
+
progress: any;
|
|
13
13
|
size: number;
|
|
14
14
|
};
|
|
15
15
|
};
|