@ringcentral/juno 2.23.0 → 2.23.1
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/components/Forms/Switch/Switch.js +13 -2
- package/components/Forms/Switch/styles/SwitchStyle.js +1 -1
- package/components/Forms/Switch/utils/SwitchUtils.js +1 -9
- package/es6/components/Forms/Switch/Switch.js +15 -4
- package/es6/components/Forms/Switch/styles/SwitchStyle.js +1 -1
- package/es6/components/Forms/Switch/utils/SwitchUtils.js +1 -9
- package/package.json +1 -1
|
@@ -11,10 +11,21 @@ var styles_1 = require("./styles");
|
|
|
11
11
|
var utils_1 = require("./utils");
|
|
12
12
|
var _RcSwitch = react_1.forwardRef(function (inProps, ref) {
|
|
13
13
|
var props = foundation_1.useThemeProps({ props: inProps, name: 'RcSwitch' });
|
|
14
|
-
var label = props.label, _a = props.formControlLabelProps, formControlLabelProps = _a === void 0 ? {} : _a, focusVisibleClassNameProp = props.focusVisibleClassName, classesProp = props.classes, color = props.color, trackColor = props.trackColor, rest = tslib_1.__rest(props, ["label", "formControlLabelProps", "focusVisibleClassName", "classes", "color", "trackColor"]);
|
|
14
|
+
var label = props.label, _a = props.formControlLabelProps, formControlLabelProps = _a === void 0 ? {} : _a, focusVisibleClassNameProp = props.focusVisibleClassName, classesProp = props.classes, color = props.color, trackColor = props.trackColor, _b = props.inputRef, inputRefProp = _b === void 0 ? null : _b, onFocus = props.onFocus, onBlur = props.onBlur, rest = tslib_1.__rest(props, ["label", "formControlLabelProps", "focusVisibleClassName", "classes", "color", "trackColor", "inputRef", "onFocus", "onBlur"]);
|
|
15
15
|
var classes = react_1.useMemo(function () { return foundation_1.combineClasses(foundation_1.omit(utils_1.RcSwitchClasses, ['focusVisible']), classesProp); }, [classesProp]);
|
|
16
16
|
var focusVisibleClassName = react_1.useMemo(function () { return clsx_1.default(utils_1.RcSwitchClasses.focusVisible, focusVisibleClassNameProp); }, [focusVisibleClassNameProp]);
|
|
17
|
-
var
|
|
17
|
+
var inputRef = react_1.useRef(null);
|
|
18
|
+
var handleInputRef = foundation_1.useForkRef(inputRef, inputRefProp);
|
|
19
|
+
var Switch = (react_1.default.createElement(Switch_1.default, tslib_1.__assign({ ref: ref, inputRef: handleInputRef, focusVisibleClassName: focusVisibleClassName, classes: classes }, rest, { color: "default", size: "medium", disableRipple: true, disableTouchRipple: true, onFocus: function (e) {
|
|
20
|
+
var _a;
|
|
21
|
+
if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.matches('[data-focus-visible-added]')) {
|
|
22
|
+
e.currentTarget.parentElement.setAttribute('data-focus-visible-within', '');
|
|
23
|
+
}
|
|
24
|
+
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
|
|
25
|
+
}, onBlur: function (e) {
|
|
26
|
+
e.currentTarget.parentElement.removeAttribute('data-focus-visible-within');
|
|
27
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
28
|
+
} })));
|
|
18
29
|
if (label) {
|
|
19
30
|
return (react_1.default.createElement(FormControlLabel_1.RcFormControlLabel, tslib_1.__assign({}, formControlLabelProps, { label: label, control: Switch })));
|
|
20
31
|
}
|
|
@@ -14,6 +14,6 @@ exports.SwitchStyle = function (_a) {
|
|
|
14
14
|
var colorProp = _a.color, trackColorProp = _a.trackColor;
|
|
15
15
|
var checkedColor = foundation_1.getParsePaletteColor(colorProp);
|
|
16
16
|
var trackColor = foundation_1.getParsePaletteColor(trackColorProp, defaultTrackColorArray);
|
|
17
|
-
return foundation_1.css(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n &.", " {\n
|
|
17
|
+
return foundation_1.css(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n &.", " {\n padding: 0px;\n ", ";\n ", ";\n\n &[data-focus-visible-within] {\n border-radius: 100vw;\n ", "\n }\n\n .", " {\n ", ";\n ", ";\n padding: 0;\n background-color: transparent;\n transform: translateX(", ");\n\n &.", " {\n transform: translateX(", ");\n }\n }\n\n .", " {\n ", ";\n background-color: ", ";\n box-shadow: none;\n }\n\n .", " {\n ", ";\n opacity: 1;\n margin: 0;\n border-radius: ", ";\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n ", " {\n &:hover {\n ", ";\n }\n }\n\n &:active {\n ", ";\n }\n }\n "], ["\n &.", " {\n padding: 0px;\n ", ";\n ", ";\n\n &[data-focus-visible-within] {\n border-radius: 100vw;\n ", "\n }\n\n .", " {\n ", ";\n ", ";\n padding: 0;\n background-color: transparent;\n transform: translateX(", ");\n\n &.", " {\n transform: translateX(", ");\n }\n }\n\n .", " {\n ", ";\n background-color: ", ";\n box-shadow: none;\n }\n\n .", " {\n ", ";\n opacity: 1;\n margin: 0;\n border-radius: ", ";\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n ", " {\n &:hover {\n ", ";\n }\n }\n\n &:active {\n ", ";\n }\n }\n "])), utils_1.RcSwitchClasses.root, widthCss, heightCss, foundation_1.focusRing('normal'), utils_1.RcSwitchClasses.switchBase, widthCss, heightCss, foundation_1.spacing(-2), utils_1.RcSwitchClasses.checked, foundation_1.spacing(2), utils_1.RcSwitchClasses.thumb, thumbSize, thumbColor, utils_1.RcSwitchClasses.track, heightCss, foundation_1.radius('round'), trackColor, utils_1.RcSwitchClasses.checked, utils_1.RcSwitchClasses.track, checkedColor, utils_1.RcSwitchClasses.disabled, utils_1.RcSwitchClasses.track, disabledColor, foundation_1.nonTouchHoverMedia, notDisabledSwitchBase('08', checkedColor, trackColor), notDisabledSwitchBase('24', checkedColor, trackColor));
|
|
18
18
|
};
|
|
19
19
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -1,12 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
var foundation_1 = require("../../../../foundation");
|
|
4
|
-
exports.RcSwitchClasses = foundation_1.RcClasses([
|
|
5
|
-
'root',
|
|
6
|
-
'switchBase',
|
|
7
|
-
'thumb',
|
|
8
|
-
'track',
|
|
9
|
-
'checked',
|
|
10
|
-
'disabled',
|
|
11
|
-
'focusVisible',
|
|
12
|
-
], 'RcSwitch');
|
|
4
|
+
exports.RcSwitchClasses = foundation_1.RcClasses(['root', 'switchBase', 'thumb', 'track', 'checked', 'disabled'], 'RcSwitch');
|
|
@@ -1,18 +1,29 @@
|
|
|
1
1
|
import { __assign, __makeTemplateObject, __rest } from "tslib";
|
|
2
|
-
import React, { forwardRef, useMemo } from 'react';
|
|
2
|
+
import React, { forwardRef, useMemo, useRef } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import MuiSwitch from '@material-ui/core/Switch';
|
|
5
|
-
import { combineClasses, omit, useThemeProps, } from '../../../foundation';
|
|
5
|
+
import { combineClasses, omit, useThemeProps, useForkRef, } from '../../../foundation';
|
|
6
6
|
import styled from '../../../foundation/styled-components';
|
|
7
7
|
import { RcFormControlLabel } from '../FormControlLabel';
|
|
8
8
|
import { SwitchStyle } from './styles';
|
|
9
9
|
import { RcSwitchClasses } from './utils';
|
|
10
10
|
var _RcSwitch = forwardRef(function (inProps, ref) {
|
|
11
11
|
var props = useThemeProps({ props: inProps, name: 'RcSwitch' });
|
|
12
|
-
var label = props.label, _a = props.formControlLabelProps, formControlLabelProps = _a === void 0 ? {} : _a, focusVisibleClassNameProp = props.focusVisibleClassName, classesProp = props.classes, color = props.color, trackColor = props.trackColor, rest = __rest(props, ["label", "formControlLabelProps", "focusVisibleClassName", "classes", "color", "trackColor"]);
|
|
12
|
+
var label = props.label, _a = props.formControlLabelProps, formControlLabelProps = _a === void 0 ? {} : _a, focusVisibleClassNameProp = props.focusVisibleClassName, classesProp = props.classes, color = props.color, trackColor = props.trackColor, _b = props.inputRef, inputRefProp = _b === void 0 ? null : _b, onFocus = props.onFocus, onBlur = props.onBlur, rest = __rest(props, ["label", "formControlLabelProps", "focusVisibleClassName", "classes", "color", "trackColor", "inputRef", "onFocus", "onBlur"]);
|
|
13
13
|
var classes = useMemo(function () { return combineClasses(omit(RcSwitchClasses, ['focusVisible']), classesProp); }, [classesProp]);
|
|
14
14
|
var focusVisibleClassName = useMemo(function () { return clsx(RcSwitchClasses.focusVisible, focusVisibleClassNameProp); }, [focusVisibleClassNameProp]);
|
|
15
|
-
var
|
|
15
|
+
var inputRef = useRef(null);
|
|
16
|
+
var handleInputRef = useForkRef(inputRef, inputRefProp);
|
|
17
|
+
var Switch = (React.createElement(MuiSwitch, __assign({ ref: ref, inputRef: handleInputRef, focusVisibleClassName: focusVisibleClassName, classes: classes }, rest, { color: "default", size: "medium", disableRipple: true, disableTouchRipple: true, onFocus: function (e) {
|
|
18
|
+
var _a;
|
|
19
|
+
if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.matches('[data-focus-visible-added]')) {
|
|
20
|
+
e.currentTarget.parentElement.setAttribute('data-focus-visible-within', '');
|
|
21
|
+
}
|
|
22
|
+
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
|
|
23
|
+
}, onBlur: function (e) {
|
|
24
|
+
e.currentTarget.parentElement.removeAttribute('data-focus-visible-within');
|
|
25
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
26
|
+
} })));
|
|
16
27
|
if (label) {
|
|
17
28
|
return (React.createElement(RcFormControlLabel, __assign({}, formControlLabelProps, { label: label, control: Switch })));
|
|
18
29
|
}
|
|
@@ -12,6 +12,6 @@ export var SwitchStyle = function (_a) {
|
|
|
12
12
|
var colorProp = _a.color, trackColorProp = _a.trackColor;
|
|
13
13
|
var checkedColor = getParsePaletteColor(colorProp);
|
|
14
14
|
var trackColor = getParsePaletteColor(trackColorProp, defaultTrackColorArray);
|
|
15
|
-
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &.", " {\n
|
|
15
|
+
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &.", " {\n padding: 0px;\n ", ";\n ", ";\n\n &[data-focus-visible-within] {\n border-radius: 100vw;\n ", "\n }\n\n .", " {\n ", ";\n ", ";\n padding: 0;\n background-color: transparent;\n transform: translateX(", ");\n\n &.", " {\n transform: translateX(", ");\n }\n }\n\n .", " {\n ", ";\n background-color: ", ";\n box-shadow: none;\n }\n\n .", " {\n ", ";\n opacity: 1;\n margin: 0;\n border-radius: ", ";\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n ", " {\n &:hover {\n ", ";\n }\n }\n\n &:active {\n ", ";\n }\n }\n "], ["\n &.", " {\n padding: 0px;\n ", ";\n ", ";\n\n &[data-focus-visible-within] {\n border-radius: 100vw;\n ", "\n }\n\n .", " {\n ", ";\n ", ";\n padding: 0;\n background-color: transparent;\n transform: translateX(", ");\n\n &.", " {\n transform: translateX(", ");\n }\n }\n\n .", " {\n ", ";\n background-color: ", ";\n box-shadow: none;\n }\n\n .", " {\n ", ";\n opacity: 1;\n margin: 0;\n border-radius: ", ";\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n ", " {\n &:hover {\n ", ";\n }\n }\n\n &:active {\n ", ";\n }\n }\n "])), RcSwitchClasses.root, widthCss, heightCss, focusRing('normal'), RcSwitchClasses.switchBase, widthCss, heightCss, spacing(-2), RcSwitchClasses.checked, spacing(2), RcSwitchClasses.thumb, thumbSize, thumbColor, RcSwitchClasses.track, heightCss, radius('round'), trackColor, RcSwitchClasses.checked, RcSwitchClasses.track, checkedColor, RcSwitchClasses.disabled, RcSwitchClasses.track, disabledColor, nonTouchHoverMedia, notDisabledSwitchBase('08', checkedColor, trackColor), notDisabledSwitchBase('24', checkedColor, trackColor));
|
|
16
16
|
};
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -1,10 +1,2 @@
|
|
|
1
1
|
import { RcClasses } from '../../../../foundation';
|
|
2
|
-
export var RcSwitchClasses = RcClasses([
|
|
3
|
-
'root',
|
|
4
|
-
'switchBase',
|
|
5
|
-
'thumb',
|
|
6
|
-
'track',
|
|
7
|
-
'checked',
|
|
8
|
-
'disabled',
|
|
9
|
-
'focusVisible',
|
|
10
|
-
], 'RcSwitch');
|
|
2
|
+
export var RcSwitchClasses = RcClasses(['root', 'switchBase', 'thumb', 'track', 'checked', 'disabled'], 'RcSwitch');
|