@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/Form/InputLabel.js
CHANGED
|
@@ -1,47 +1,49 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
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 _Identity = require("../Identity");
|
|
17
|
+
|
|
18
|
+
var _react2 = _interopRequireDefault(require("react"));
|
|
19
|
+
|
|
20
|
+
var _excluded = ["htmlFor", "markInvalid", "isRequired", "children"];
|
|
21
|
+
|
|
22
|
+
var InputLabel = function InputLabel(_ref) {
|
|
23
|
+
var htmlFor = _ref.htmlFor,
|
|
24
|
+
markInvalid = _ref.markInvalid,
|
|
25
|
+
isRequired = _ref.isRequired,
|
|
26
|
+
children = _ref.children,
|
|
27
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
28
|
+
return (0, _react.jsx)("label", (0, _extends2["default"])({
|
|
29
|
+
htmlFor: htmlFor,
|
|
30
|
+
css: function css(theme) {
|
|
31
|
+
return {
|
|
32
|
+
fontSize: '14px',
|
|
33
|
+
fontWeight: 400,
|
|
34
|
+
lineHeight: '16px',
|
|
35
|
+
color: markInvalid ? _Identity.COLOR_V2.RED_LIGHT_500 : theme.Input.labelColor
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
}, props), children, isRequired && (0, _react.jsx)("span", {
|
|
39
|
+
css: /*#__PURE__*/(0, _react.css)({
|
|
40
|
+
fontSize: '16px',
|
|
41
|
+
marginLeft: '4px',
|
|
42
|
+
color: _Identity.COLOR_V2.RED_LIGHT_500
|
|
43
|
+
}, process.env.NODE_ENV === "production" ? "" : ";label:InputLabel;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0TGFiZWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDeUIiLCJmaWxlIjoiSW5wdXRMYWJlbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogV2lyZVxuICogQ29weXJpZ2h0IChDKSAyMDIyIFdpcmUgU3dpc3MgR21iSFxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3IgbW9kaWZ5XG4gKiBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzIHB1Ymxpc2hlZCBieVxuICogdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSwgb3JcbiAqIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGRpc3RyaWJ1dGVkIGluIHRoZSBob3BlIHRoYXQgaXQgd2lsbCBiZSB1c2VmdWwsXG4gKiBidXQgV0lUSE9VVCBBTlkgV0FSUkFOVFk7IHdpdGhvdXQgZXZlbiB0aGUgaW1wbGllZCB3YXJyYW50eSBvZlxuICogTUVSQ0hBTlRBQklMSVRZIG9yIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFLiBTZWUgdGhlXG4gKiBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIHRoaXMgcHJvZ3JhbS4gSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQge2pzeH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHtDT0xPUl9WMn0gZnJvbSAnLi4vSWRlbnRpdHknO1xuaW1wb3J0IHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCBSZWFjdCwge0ZDLCBSZWFjdE5vZGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGludGVyZmFjZSBJbnB1dExhYmVsUHJvcHMge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlIHwgc3RyaW5nO1xuICBodG1sRm9yPzogc3RyaW5nO1xuICBtYXJrSW52YWxpZD86IGJvb2xlYW47XG4gIGlzUmVxdWlyZWQ/OiBib29sZWFuO1xufVxuXG5jb25zdCBJbnB1dExhYmVsOiBGQzxJbnB1dExhYmVsUHJvcHM+ID0gKHtodG1sRm9yLCBtYXJrSW52YWxpZCwgaXNSZXF1aXJlZCwgY2hpbGRyZW4sIC4uLnByb3BzfSkgPT4gKFxuICA8bGFiZWxcbiAgICBodG1sRm9yPXtodG1sRm9yfVxuICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gKHtcbiAgICAgIGZvbnRTaXplOiAnMTRweCcsXG4gICAgICBmb250V2VpZ2h0OiA0MDAsXG4gICAgICBsaW5lSGVpZ2h0OiAnMTZweCcsXG4gICAgICBjb2xvcjogbWFya0ludmFsaWQgPyBDT0xPUl9WMi5SRURfTElHSFRfNTAwIDogdGhlbWUuSW5wdXQubGFiZWxDb2xvcixcbiAgICB9KX1cbiAgICB7Li4ucHJvcHN9XG4gID5cbiAgICB7Y2hpbGRyZW59XG5cbiAgICB7aXNSZXF1aXJlZCAmJiA8c3BhbiBjc3M9e3tmb250U2l6ZTogJzE2cHgnLCBtYXJnaW5MZWZ0OiAnNHB4JywgY29sb3I6IENPTE9SX1YyLlJFRF9MSUdIVF81MDB9fT4qPC9zcGFuPn1cbiAgPC9sYWJlbD5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IElucHV0TGFiZWw7XG4iXX0= */")
|
|
44
|
+
}, "*"));
|
|
30
45
|
};
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const Identity_1 = require("../Identity");
|
|
35
|
-
const InputLabel = (_a) => {
|
|
36
|
-
var { htmlFor, markInvalid, isRequired, children } = _a, props = __rest(_a, ["htmlFor", "markInvalid", "isRequired", "children"]);
|
|
37
|
-
return ((0, react_1.jsx)("label", Object.assign({ htmlFor: htmlFor, css: (theme) => ({
|
|
38
|
-
fontSize: '14px',
|
|
39
|
-
fontWeight: 400,
|
|
40
|
-
lineHeight: '16px',
|
|
41
|
-
color: markInvalid ? Identity_1.COLOR_V2.RED_LIGHT_500 : theme.Input.labelColor,
|
|
42
|
-
}) }, props),
|
|
43
|
-
children,
|
|
44
|
-
isRequired && (0, react_1.jsx)("span", { css: { fontSize: '16px', marginLeft: '4px', color: Identity_1.COLOR_V2.RED_LIGHT_500 } }, "*")));
|
|
45
|
-
};
|
|
46
|
-
exports.default = InputLabel;
|
|
46
|
+
|
|
47
|
+
var _default = InputLabel;
|
|
48
|
+
exports["default"] = _default;
|
|
47
49
|
//# sourceMappingURL=InputLabel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["InputLabel.tsx"],"names":["InputLabel","htmlFor","markInvalid","isRequired","children","props","theme","fontSize","fontWeight","lineHeight","color","COLOR_V2","RED_LIGHT_500","Input","labelColor","marginLeft"],"mappings":";;;;;;;;;;;AAoBA;;;;AACA;;AAEA;;;;AASA,IAAMA,UAA+B,GAAG,SAAlCA,UAAkC;AAAA,MAAEC,OAAF,QAAEA,OAAF;AAAA,MAAWC,WAAX,QAAWA,WAAX;AAAA,MAAwBC,UAAxB,QAAwBA,UAAxB;AAAA,MAAoCC,QAApC,QAAoCA,QAApC;AAAA,MAAiDC,KAAjD;AAAA,SACtC;AACE,IAAA,OAAO,EAAEJ,OADX;AAEE,IAAA,GAAG,EAAE,aAACK,KAAD;AAAA,aAAmB;AACtBC,QAAAA,QAAQ,EAAE,MADY;AAEtBC,QAAAA,UAAU,EAAE,GAFU;AAGtBC,QAAAA,UAAU,EAAE,MAHU;AAItBC,QAAAA,KAAK,EAAER,WAAW,GAAGS,mBAASC,aAAZ,GAA4BN,KAAK,CAACO,KAAN,CAAYC;AAJpC,OAAnB;AAAA;AAFP,KAQMT,KARN,GAUGD,QAVH,EAYGD,UAAU,IAAI;AAAM,IAAA,GAAG,+BAAE;AAACI,MAAAA,QAAQ,EAAE,MAAX;AAAmBQ,MAAAA,UAAU,EAAE,KAA/B;AAAsCL,MAAAA,KAAK,EAAEC,mBAASC;AAAtD,KAAF;AAAT,SAZjB,CADsC;AAAA,CAAxC;;eAiBeZ,U","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 {jsx} from '@emotion/react';\nimport {COLOR_V2} from '../Identity';\nimport {Theme} from '../Layout';\nimport React, {FC, ReactNode} from 'react';\n\nexport interface InputLabelProps {\n children: ReactNode | string;\n htmlFor?: string;\n markInvalid?: boolean;\n isRequired?: boolean;\n}\n\nconst InputLabel: FC<InputLabelProps> = ({htmlFor, markInvalid, isRequired, children, ...props}) => (\n <label\n htmlFor={htmlFor}\n css={(theme: Theme) => ({\n fontSize: '14px',\n fontWeight: 400,\n lineHeight: '16px',\n color: markInvalid ? COLOR_V2.RED_LIGHT_500 : theme.Input.labelColor,\n })}\n {...props}\n >\n {children}\n\n {isRequired && <span css={{fontSize: '16px', marginLeft: '4px', color: COLOR_V2.RED_LIGHT_500}}>*</span>}\n </label>\n);\n\nexport default InputLabel;\n"],"file":"InputLabel.js"}
|
|
@@ -1,54 +1,58 @@
|
|
|
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.InputSubmitCombo = exports.INPUT_SUBMIT_COMBO_CLASSNAME = void 0;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
|
+
|
|
16
|
+
var _react = require("@emotion/react");
|
|
17
|
+
|
|
18
|
+
var _Input = require("./Input");
|
|
19
|
+
|
|
20
|
+
var _Identity = require("../Identity");
|
|
21
|
+
|
|
22
|
+
var _excluded = ["children"];
|
|
23
|
+
|
|
24
|
+
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; }
|
|
25
|
+
|
|
26
|
+
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; }
|
|
27
|
+
|
|
28
|
+
var INPUT_SUBMIT_COMBO_CLASSNAME = 'inputSubmitCombo';
|
|
29
|
+
exports.INPUT_SUBMIT_COMBO_CLASSNAME = INPUT_SUBMIT_COMBO_CLASSNAME;
|
|
30
|
+
|
|
31
|
+
var InputSubmitCombo = function InputSubmitCombo(_ref) {
|
|
32
|
+
var children = _ref.children,
|
|
33
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
34
|
+
return (0, _react.jsx)("div", (0, _extends2["default"])({
|
|
35
|
+
className: INPUT_SUBMIT_COMBO_CLASSNAME,
|
|
36
|
+
css: function css(theme) {
|
|
37
|
+
var _objectSpread2;
|
|
38
|
+
|
|
39
|
+
return _objectSpread(_objectSpread({}, (0, _Input.inputStyle)(theme, props)), {}, (_objectSpread2 = {
|
|
40
|
+
'&:focus-within': {
|
|
41
|
+
boxShadow: "0 0 0 1px ".concat(_Identity.COLOR_V2.BLUE)
|
|
42
|
+
}
|
|
43
|
+
}, (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_GROUP), {
|
|
44
|
+
flexGrow: 1
|
|
45
|
+
}), (0, _defineProperty2["default"])(_objectSpread2, ".".concat(_Input.INPUT_CLASSNAME), {
|
|
46
|
+
'&:focus, &:invalid:not(:focus)': {
|
|
47
|
+
boxShadow: 'none'
|
|
48
|
+
},
|
|
49
|
+
boxShadow: 'none',
|
|
50
|
+
margin: '0 8px 0 0',
|
|
51
|
+
padding: '0 0 0 16px'
|
|
52
|
+
}), (0, _defineProperty2["default"])(_objectSpread2, "alignItems", 'center'), (0, _defineProperty2["default"])(_objectSpread2, "display", 'flex'), (0, _defineProperty2["default"])(_objectSpread2, "height", '49px'), (0, _defineProperty2["default"])(_objectSpread2, "justifyContent", 'space-between'), (0, _defineProperty2["default"])(_objectSpread2, "marginBottom", '4px'), (0, _defineProperty2["default"])(_objectSpread2, "paddingLeft", 0), _objectSpread2));
|
|
53
|
+
}
|
|
54
|
+
}, props), children);
|
|
52
55
|
};
|
|
56
|
+
|
|
53
57
|
exports.InputSubmitCombo = InputSubmitCombo;
|
|
54
58
|
//# sourceMappingURL=InputSubmitCombo.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["InputSubmitCombo.tsx"],"names":["INPUT_SUBMIT_COMBO_CLASSNAME","InputSubmitCombo","children","props","theme","boxShadow","COLOR_V2","BLUE","INPUT_GROUP","flexGrow","INPUT_CLASSNAME","margin","padding"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;;;;;;;AAKO,IAAMA,4BAA4B,GAAG,kBAArC;;;AAEA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAAEC,QAAF,QAAEA,QAAF;AAAA,MAAeC,KAAf;AAAA,SAC9B;AACE,IAAA,SAAS,EAAEH,4BADb;AAEE,IAAA,GAAG,EAAE,aAACI,KAAD;AAAA;;AAAA,6CACA,uBAAWA,KAAX,EAAkBD,KAAlB,CADA;AAEH,0BAAkB;AAChBE,UAAAA,SAAS,sBAAeC,mBAASC,IAAxB;AADO;AAFf,qEAKEC,kBALF,GAKkB;AACnBC,QAAAA,QAAQ,EAAE;AADS,OALlB,+DAQEC,sBARF,GAQsB;AACvB,0CAAkC;AAChCL,UAAAA,SAAS,EAAE;AADqB,SADX;AAIvBA,QAAAA,SAAS,EAAE,MAJY;AAKvBM,QAAAA,MAAM,EAAE,WALe;AAMvBC,QAAAA,OAAO,EAAE;AANc,OARtB,kEAgBS,QAhBT,+DAiBM,MAjBN,8DAkBK,MAlBL,sEAmBa,eAnBb,oEAoBW,KApBX,mEAqBU,CArBV;AAAA;AAFP,KAyBMT,KAzBN,GA2BGD,QA3BH,CAD8B;AAAA,CAAzB","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 {jsx} from '@emotion/react';\n\nimport {INPUT_CLASSNAME, INPUT_GROUP, InputProps, inputStyle} from './Input';\nimport {COLOR_V2} from '../Identity';\nimport {Theme} from '../Layout';\n\nexport type InputSubmitComboProps<T = HTMLDivElement> = InputProps<T>;\n\nexport const INPUT_SUBMIT_COMBO_CLASSNAME = 'inputSubmitCombo';\n\nexport const InputSubmitCombo = ({children, ...props}: InputSubmitComboProps) => (\n <div\n className={INPUT_SUBMIT_COMBO_CLASSNAME}\n css={(theme: Theme) => ({\n ...inputStyle(theme, props),\n '&:focus-within': {\n boxShadow: `0 0 0 1px ${COLOR_V2.BLUE}`,\n },\n [`.${INPUT_GROUP}`]: {\n flexGrow: 1,\n },\n [`.${INPUT_CLASSNAME}`]: {\n '&:focus, &:invalid:not(:focus)': {\n boxShadow: 'none',\n },\n boxShadow: 'none',\n margin: '0 8px 0 0',\n padding: '0 0 0 16px',\n },\n alignItems: 'center',\n display: 'flex',\n height: '49px', // needs a bit more space to not overlap with the `boxShadow` from `:focus`\n justifyContent: 'space-between',\n marginBottom: '4px',\n paddingLeft: 0,\n })}\n {...props}\n >\n {children}\n </div>\n);\n"],"file":"InputSubmitCombo.js"}
|
package/src/Form/RangeInput.js
CHANGED
|
@@ -1,51 +1,75 @@
|
|
|
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.RangeInput = void 0;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
|
+
|
|
16
|
+
var _react = require("@emotion/react");
|
|
17
|
+
|
|
18
|
+
var _react2 = _interopRequireWildcard(require("react"));
|
|
19
|
+
|
|
20
|
+
var _InputLabel = _interopRequireDefault(require("./InputLabel"));
|
|
21
|
+
|
|
22
|
+
var _RangeInput = require("./RangeInput.styles");
|
|
23
|
+
|
|
24
|
+
var _excluded = ["ref", "id", "label", "minValueLabel", "maxValueLabel", "min", "max", "value", "onChange", "wrapperCSS"];
|
|
25
|
+
|
|
26
|
+
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); }
|
|
27
|
+
|
|
28
|
+
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; }
|
|
29
|
+
|
|
30
|
+
var RangeInput = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref) {
|
|
31
|
+
var ref = _ref.ref,
|
|
32
|
+
_ref$id = _ref.id,
|
|
33
|
+
id = _ref$id === void 0 ? Math.random().toString() : _ref$id,
|
|
34
|
+
label = _ref.label,
|
|
35
|
+
minValueLabel = _ref.minValueLabel,
|
|
36
|
+
maxValueLabel = _ref.maxValueLabel,
|
|
37
|
+
_ref$min = _ref.min,
|
|
38
|
+
min = _ref$min === void 0 ? '0' : _ref$min,
|
|
39
|
+
_ref$max = _ref.max,
|
|
40
|
+
max = _ref$max === void 0 ? '100' : _ref$max,
|
|
41
|
+
_ref$value = _ref.value,
|
|
42
|
+
value = _ref$value === void 0 ? '0' : _ref$value,
|
|
43
|
+
onChange = _ref.onChange,
|
|
44
|
+
wrapperCSS = _ref.wrapperCSS,
|
|
45
|
+
inputProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
46
|
+
var minNum = Number(min);
|
|
47
|
+
var maxNum = Number(max);
|
|
48
|
+
var valueNum = Number(value);
|
|
49
|
+
var backgroundSize = "".concat((valueNum - minNum) * 100 / (maxNum - minNum), "% 100%");
|
|
50
|
+
return (0, _react.jsx)("div", {
|
|
51
|
+
css: wrapperCSS
|
|
52
|
+
}, label && (0, _react.jsx)(_InputLabel["default"], {
|
|
53
|
+
htmlFor: id
|
|
54
|
+
}, label), (0, _react.jsx)("div", {
|
|
55
|
+
css: _RangeInput.rangeInputWrapperStyles
|
|
56
|
+
}, minValueLabel && (0, _react.jsx)("span", {
|
|
57
|
+
css: (0, _RangeInput.getValueLabelStyles)(_RangeInput.ValueLabelPosition.LEFT)
|
|
58
|
+
}, minValueLabel), maxValueLabel && (0, _react.jsx)("span", {
|
|
59
|
+
css: (0, _RangeInput.getValueLabelStyles)(_RangeInput.ValueLabelPosition.RIGHT)
|
|
60
|
+
}, maxValueLabel), (0, _react.jsx)("input", (0, _extends2["default"])({
|
|
61
|
+
ref: ref,
|
|
62
|
+
css: function css(theme) {
|
|
63
|
+
return (0, _RangeInput.getImageCropZoomInputStyles)(theme, backgroundSize);
|
|
64
|
+
},
|
|
65
|
+
id: id,
|
|
66
|
+
name: id,
|
|
67
|
+
min: min,
|
|
68
|
+
max: max,
|
|
69
|
+
value: value,
|
|
70
|
+
onChange: onChange,
|
|
71
|
+
type: "range"
|
|
72
|
+
}, inputProps))));
|
|
50
73
|
});
|
|
74
|
+
exports.RangeInput = RangeInput;
|
|
51
75
|
//# sourceMappingURL=RangeInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["RangeInput.tsx"],"names":["RangeInput","ref","id","Math","random","toString","label","minValueLabel","maxValueLabel","min","max","value","onChange","wrapperCSS","inputProps","minNum","Number","maxNum","valueNum","backgroundSize","rangeInputWrapperStyles","ValueLabelPosition","LEFT","RIGHT","theme"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AACA;;AAGA;;AACA;;;;;;;;AAcO,IAAMA,UAA+B,gBAAG,wBAC7C,gBAYM;AAAA,MAXJC,GAWI,QAXJA,GAWI;AAAA,qBAVJC,EAUI;AAAA,MAVJA,EAUI,wBAVCC,IAAI,CAACC,MAAL,GAAcC,QAAd,EAUD;AAAA,MATJC,KASI,QATJA,KASI;AAAA,MARJC,aAQI,QARJA,aAQI;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,sBANJC,GAMI;AAAA,MANJA,GAMI,yBANE,GAMF;AAAA,sBALJC,GAKI;AAAA,MALJA,GAKI,yBALE,KAKF;AAAA,wBAJJC,KAII;AAAA,MAJJA,KAII,2BAJI,GAIJ;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,MAFJC,UAEI,QAFJA,UAEI;AAAA,MADDC,UACC;AACJ,MAAMC,MAAM,GAAGC,MAAM,CAACP,GAAD,CAArB;AACA,MAAMQ,MAAM,GAAGD,MAAM,CAACN,GAAD,CAArB;AACA,MAAMQ,QAAQ,GAAGF,MAAM,CAACL,KAAD,CAAvB;AAEA,MAAMQ,cAAc,aAAO,CAACD,QAAQ,GAAGH,MAAZ,IAAsB,GAAvB,IAA+BE,MAAM,GAAGF,MAAxC,CAAN,WAApB;AAEA,SACE;AAAK,IAAA,GAAG,EAAEF;AAAV,KACGP,KAAK,IAAI,gBAAC,sBAAD;AAAY,IAAA,OAAO,EAAEJ;AAArB,KAA0BI,KAA1B,CADZ,EAEE;AAAK,IAAA,GAAG,EAAEc;AAAV,KACGb,aAAa,IAAI;AAAM,IAAA,GAAG,EAAE,qCAAoBc,+BAAmBC,IAAvC;AAAX,KAA0Df,aAA1D,CADpB,EAEGC,aAAa,IAAI;AAAM,IAAA,GAAG,EAAE,qCAAoBa,+BAAmBE,KAAvC;AAAX,KAA2Df,aAA3D,CAFpB,EAGE;AACE,IAAA,GAAG,EAAEP,GADP;AAEE,IAAA,GAAG,EAAE,aAACuB,KAAD;AAAA,aAAkB,6CAA4BA,KAA5B,EAAmCL,cAAnC,CAAlB;AAAA,KAFP;AAGE,IAAA,EAAE,EAAEjB,EAHN;AAIE,IAAA,IAAI,EAAEA,EAJR;AAKE,IAAA,GAAG,EAAEO,GALP;AAME,IAAA,GAAG,EAAEC,GANP;AAOE,IAAA,KAAK,EAAEC,KAPT;AAQE,IAAA,QAAQ,EAAEC,QARZ;AASE,IAAA,IAAI,EAAC;AATP,KAUME,UAVN,EAHF,CAFF,CADF;AAqBD,CAzC4C,CAAxC","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 React, {FC, forwardRef} from 'react';\nimport {TextProps} from '../Text';\nimport {Theme} from '../Layout';\nimport InputLabel from './InputLabel';\nimport {\n getImageCropZoomInputStyles,\n getValueLabelStyles,\n rangeInputWrapperStyles,\n ValueLabelPosition,\n} from './RangeInput.styles';\n\nexport interface RangeInputProps<T = HTMLInputElement> extends TextProps<T> {\n label?: string;\n minValueLabel?: string;\n maxValueLabel?: string;\n wrapperCSS?: CSSObject;\n}\n\nexport const RangeInput: FC<RangeInputProps> = forwardRef<HTMLInputElement, RangeInputProps<HTMLInputElement>>(\n ({\n ref,\n id = Math.random().toString(),\n label,\n minValueLabel,\n maxValueLabel,\n min = '0',\n max = '100',\n value = '0',\n onChange,\n wrapperCSS,\n ...inputProps\n }) => {\n const minNum = Number(min);\n const maxNum = Number(max);\n const valueNum = Number(value);\n\n const backgroundSize = `${((valueNum - minNum) * 100) / (maxNum - minNum)}% 100%` as const;\n\n return (\n <div css={wrapperCSS}>\n {label && <InputLabel htmlFor={id}>{label}</InputLabel>}\n <div css={rangeInputWrapperStyles}>\n {minValueLabel && <span css={getValueLabelStyles(ValueLabelPosition.LEFT)}>{minValueLabel}</span>}\n {maxValueLabel && <span css={getValueLabelStyles(ValueLabelPosition.RIGHT)}>{maxValueLabel}</span>}\n <input\n ref={ref}\n css={(theme: Theme) => getImageCropZoomInputStyles(theme, backgroundSize)}\n id={id}\n name={id}\n min={min}\n max={max}\n value={value}\n onChange={onChange}\n type=\"range\"\n {...inputProps}\n />\n </div>\n </div>\n );\n },\n);\n"],"file":"RangeInput.js"}
|
|
@@ -1,60 +1,76 @@
|
|
|
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
|
-
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
|
+
});
|
|
21
8
|
exports.getValueLabelStyles = exports.ValueLabelPosition = exports.getImageCropZoomInputStyles = exports.rangeInputWrapperStyles = void 0;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
9
|
+
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
|
|
12
|
+
var _Identity = require("../Identity");
|
|
13
|
+
|
|
14
|
+
var _util = require("../util");
|
|
15
|
+
|
|
16
|
+
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; }
|
|
17
|
+
|
|
18
|
+
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; }
|
|
19
|
+
|
|
20
|
+
var rangeInputWrapperStyles = {
|
|
21
|
+
position: 'relative',
|
|
22
|
+
marginTop: '19px'
|
|
27
23
|
};
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
24
|
+
exports.rangeInputWrapperStyles = rangeInputWrapperStyles;
|
|
25
|
+
var thumbSelectors = ['&::-webkit-slider-thumb', '&::-moz-range-thumb', '&::-ms-thumb'];
|
|
26
|
+
var sliderSelectors = ['&::-webkit-slider-runnable-track', '&::-moz-range-track', '&::-ms-track'];
|
|
27
|
+
|
|
28
|
+
var getImageCropZoomInputStyles = function getImageCropZoomInputStyles(theme, backgroundSize) {
|
|
29
|
+
return _objectSpread(_objectSpread({
|
|
30
|
+
display: 'block',
|
|
31
|
+
'-webkit-appearance': 'none',
|
|
32
|
+
width: '100%',
|
|
33
|
+
height: '8px',
|
|
34
|
+
background: _Identity.COLOR_V2.GRAY_60,
|
|
35
|
+
borderRadius: '4px',
|
|
36
|
+
backgroundImage: "linear-gradient(".concat(theme.general.primaryColor, ", ").concat(theme.general.primaryColor, ")"),
|
|
37
|
+
backgroundSize: backgroundSize || '0% 100%',
|
|
38
|
+
backgroundRepeat: 'no-repeat'
|
|
39
|
+
}, (0, _util.manySelectors)(thumbSelectors, {
|
|
31
40
|
'-webkit-appearance': 'none',
|
|
32
41
|
height: '18px',
|
|
33
42
|
width: '18px',
|
|
34
43
|
borderRadius: '50%',
|
|
35
|
-
background:
|
|
44
|
+
background: _Identity.COLOR_V2.GRAY_80,
|
|
36
45
|
cursor: 'pointer',
|
|
37
46
|
border: 'none',
|
|
38
|
-
boxShadow: 'none'
|
|
39
|
-
})), (0,
|
|
47
|
+
boxShadow: 'none'
|
|
48
|
+
})), (0, _util.manySelectors)(sliderSelectors, {
|
|
40
49
|
'-webkit-appearance': 'none',
|
|
41
50
|
boxShadow: 'none',
|
|
42
51
|
border: 'none',
|
|
43
|
-
background: 'transparent'
|
|
44
|
-
}))
|
|
52
|
+
background: 'transparent'
|
|
53
|
+
}));
|
|
54
|
+
};
|
|
55
|
+
|
|
45
56
|
exports.getImageCropZoomInputStyles = getImageCropZoomInputStyles;
|
|
46
57
|
var ValueLabelPosition;
|
|
58
|
+
exports.ValueLabelPosition = ValueLabelPosition;
|
|
59
|
+
|
|
47
60
|
(function (ValueLabelPosition) {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
})(ValueLabelPosition
|
|
51
|
-
|
|
61
|
+
ValueLabelPosition["LEFT"] = "left";
|
|
62
|
+
ValueLabelPosition["RIGHT"] = "right";
|
|
63
|
+
})(ValueLabelPosition || (exports.ValueLabelPosition = ValueLabelPosition = {}));
|
|
64
|
+
|
|
65
|
+
var getValueLabelStyles = function getValueLabelStyles(position) {
|
|
66
|
+
return (0, _defineProperty2["default"])({
|
|
52
67
|
pointerEvents: 'none',
|
|
53
68
|
bottom: '100%',
|
|
54
69
|
fontSize: '16px',
|
|
55
70
|
fontWeight: 300,
|
|
56
|
-
position: 'absolute'
|
|
57
|
-
|
|
58
|
-
}
|
|
71
|
+
position: 'absolute'
|
|
72
|
+
}, position, '4px');
|
|
73
|
+
};
|
|
74
|
+
|
|
59
75
|
exports.getValueLabelStyles = getValueLabelStyles;
|
|
60
76
|
//# sourceMappingURL=RangeInput.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["RangeInput.styles.ts"],"names":["rangeInputWrapperStyles","position","marginTop","thumbSelectors","sliderSelectors","getImageCropZoomInputStyles","theme","backgroundSize","display","width","height","background","COLOR_V2","GRAY_60","borderRadius","backgroundImage","general","primaryColor","backgroundRepeat","GRAY_80","cursor","border","boxShadow","ValueLabelPosition","getValueLabelStyles","pointerEvents","bottom","fontSize","fontWeight"],"mappings":";;;;;;;;;;;AAqBA;;AACA;;;;;;AAEO,IAAMA,uBAAkC,GAAG;AAChDC,EAAAA,QAAQ,EAAE,UADsC;AAEhDC,EAAAA,SAAS,EAAE;AAFqC,CAA3C;;AAKP,IAAMC,cAAc,GAAG,CAAC,yBAAD,EAA4B,qBAA5B,EAAmD,cAAnD,CAAvB;AACA,IAAMC,eAAe,GAAG,CAAC,kCAAD,EAAqC,qBAArC,EAA4D,cAA5D,CAAxB;;AAEO,IAAMC,2BAA2B,GAAG,SAA9BA,2BAA8B,CAACC,KAAD,EAAeC,cAAf;AAAA;AACzCC,IAAAA,OAAO,EAAE,OADgC;AAEzC,0BAAsB,MAFmB;AAGzCC,IAAAA,KAAK,EAAE,MAHkC;AAIzCC,IAAAA,MAAM,EAAE,KAJiC;AAKzCC,IAAAA,UAAU,EAAEC,mBAASC,OALoB;AAMzCC,IAAAA,YAAY,EAAE,KAN2B;AAOzCC,IAAAA,eAAe,4BAAqBT,KAAK,CAACU,OAAN,CAAcC,YAAnC,eAAoDX,KAAK,CAACU,OAAN,CAAcC,YAAlE,MAP0B;AAQzCV,IAAAA,cAAc,EAAEA,cAAc,IAAI,SARO;AASzCW,IAAAA,gBAAgB,EAAE;AATuB,KAWtC,yBAAcf,cAAd,EAA8B;AAC/B,0BAAsB,MADS;AAE/BO,IAAAA,MAAM,EAAE,MAFuB;AAG/BD,IAAAA,KAAK,EAAE,MAHwB;AAI/BK,IAAAA,YAAY,EAAE,KAJiB;AAK/BH,IAAAA,UAAU,EAAEC,mBAASO,OALU;AAM/BC,IAAAA,MAAM,EAAE,SANuB;AAO/BC,IAAAA,MAAM,EAAE,MAPuB;AAQ/BC,IAAAA,SAAS,EAAE;AARoB,GAA9B,CAXsC,GAsBtC,yBAAclB,eAAd,EAA+B;AAChC,0BAAsB,MADU;AAEhCkB,IAAAA,SAAS,EAAE,MAFqB;AAGhCD,IAAAA,MAAM,EAAE,MAHwB;AAIhCV,IAAAA,UAAU,EAAE;AAJoB,GAA/B,CAtBsC;AAAA,CAApC;;;IA8BKY,kB;;;WAAAA,kB;AAAAA,EAAAA,kB;AAAAA,EAAAA,kB;GAAAA,kB,kCAAAA,kB;;AAKL,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACvB,QAAD;AAAA;AACjCwB,IAAAA,aAAa,EAAE,MADkB;AAEjCC,IAAAA,MAAM,EAAE,MAFyB;AAGjCC,IAAAA,QAAQ,EAAE,MAHuB;AAIjCC,IAAAA,UAAU,EAAE,GAJqB;AAKjC3B,IAAAA,QAAQ,EAAE;AALuB,KAMhCA,QANgC,EAMrB,KANqB;AAAA,CAA5B","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\nimport {CSSObject} from '@emotion/react';\nimport {Theme} from '../Layout';\nimport {COLOR_V2} from '../Identity';\nimport {manySelectors} from '../util';\n\nexport const rangeInputWrapperStyles: CSSObject = {\n position: 'relative',\n marginTop: '19px',\n};\n\nconst thumbSelectors = ['&::-webkit-slider-thumb', '&::-moz-range-thumb', '&::-ms-thumb'];\nconst sliderSelectors = ['&::-webkit-slider-runnable-track', '&::-moz-range-track', '&::-ms-track'];\n\nexport const getImageCropZoomInputStyles = (theme: Theme, backgroundSize: `${number}% ${number}%`): CSSObject => ({\n display: 'block',\n '-webkit-appearance': 'none',\n width: '100%',\n height: '8px',\n background: COLOR_V2.GRAY_60,\n borderRadius: '4px',\n backgroundImage: `linear-gradient(${theme.general.primaryColor}, ${theme.general.primaryColor})`,\n backgroundSize: backgroundSize || '0% 100%',\n backgroundRepeat: 'no-repeat',\n\n ...manySelectors(thumbSelectors, {\n '-webkit-appearance': 'none',\n height: '18px',\n width: '18px',\n borderRadius: '50%',\n background: COLOR_V2.GRAY_80,\n cursor: 'pointer',\n border: 'none',\n boxShadow: 'none',\n }),\n\n ...manySelectors(sliderSelectors, {\n '-webkit-appearance': 'none',\n boxShadow: 'none',\n border: 'none',\n background: 'transparent',\n }),\n});\n\nexport enum ValueLabelPosition {\n LEFT = 'left',\n RIGHT = 'right',\n}\n\nexport const getValueLabelStyles = (position: ValueLabelPosition): CSSObject => ({\n pointerEvents: 'none',\n bottom: '100%',\n fontSize: '16px',\n fontWeight: 300,\n position: 'absolute',\n [position]: '4px',\n});\n"],"file":"RangeInput.styles.js"}
|