@atlaskit/toggle
Version:
A toggle is used to view or switch between enabled or disabled states.
212 lines (210 loc) • 11.3 kB
JavaScript
/* toggle.tsx generated by @compiled/babel-plugin v0.36.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./toggle.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _bindEventListener = require("bind-event-listener");
var _analyticsNext = require("@atlaskit/analytics-next");
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
var _useId = require("@atlaskit/ds-lib/use-id");
var _checkMarkEditorDone = _interopRequireDefault(require("@atlaskit/icon/utility/migration/check-mark--editor-done"));
var _crossEditorClose = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross--editor-close"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _colors = require("@atlaskit/theme/colors");
var _iconContainer = _interopRequireDefault(require("./icon-container"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var basicStyles = null;
var borderStyles = null;
var iconStyles = null;
var sizeStyles = {
regular: "_2rkopxbi _4t3ipxbi _1bsbxy5q _kfgtutpp _1mp41crf _p9c41fbe",
large: "_2rkov47k _4t3iv47k _1bsb1jfw _kfgtpxbi _1mp47vkz _p9c4w12q"
};
var noop = _noop.default;
var analyticsAttributes = {
componentName: 'toggle',
packageName: "@atlaskit/toggle",
packageVersion: "15.0.4"
};
var iconSizeMap = {
regular: 'small',
large: 'medium'
};
/**
* __Toggle__
*
* A toggle is used to view or switch between enabled or disabled states.
*
* - [Examples](https://atlassian.design/components/toggle/examples)
* - [Code](https://atlassian.design/components/toggle/code)
* - [Usage](https://atlassian.design/components/toggle/usage)
*/
var Toggle = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var _props$defaultChecked = props.defaultChecked,
defaultChecked = _props$defaultChecked === void 0 ? false : _props$defaultChecked,
_props$isDisabled = props.isDisabled,
isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
_props$onBlur = props.onBlur,
providedOnBlur = _props$onBlur === void 0 ? noop : _props$onBlur,
_props$onChange = props.onChange,
providedChange = _props$onChange === void 0 ? noop : _props$onChange,
_props$onFocus = props.onFocus,
providedFocus = _props$onFocus === void 0 ? noop : _props$onFocus,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
_props$name = props.name,
name = _props$name === void 0 ? '' : _props$name,
_props$value = props.value,
value = _props$value === void 0 ? '' : _props$value,
isChecked = props.isChecked,
analyticsContext = props.analyticsContext,
id = props.id,
testId = props.testId,
label = props.label,
descriptionId = props.descriptionId;
var isControlled = typeof isChecked === 'undefined';
var _useState = (0, _react.useState)(defaultChecked),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
checked = _useState2[0],
setChecked = _useState2[1];
var _useState3 = (0, _react.useState)(true),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
isKeyboardUsed = _useState4[0],
setIsKeyboardUsed = _useState4[1];
var wrapperRef = (0, _react.useRef)(null);
(0, _react.useEffect)(function () {
if (id && wrapperRef.current && wrapperRef.current.parentElement) {
/*
DSP-21524 Handling the click on <label> that is linked via "for" attribute.
By default click on the label fires absolutely same onclick event as click on the input element.
To differentiate keyboard click from mouse we need this additional listener.
*/
var linkedLabel = wrapperRef.current.parentElement.querySelector("label[for=\"".concat(id, "\"]"));
if (linkedLabel) {
var unbind = (0, _bindEventListener.bindAll)(linkedLabel, [{
type: 'click',
listener: function listener(event) {
setIsKeyboardUsed(false);
if ((event === null || event === void 0 ? void 0 : event.detail) > 1) {
/*
DSP-21524 double or triple click on label initiating the text selection for label text and adds additional step to tab order.
So here we set the isKeyboardUsed to true, to display focus ring on next Tab press
*/
setIsKeyboardUsed(true);
}
}
}]);
return unbind;
}
}
}, [id, wrapperRef, isKeyboardUsed]);
var handleBlur = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
fn: function fn(event, analyticsEvent) {
if (!isKeyboardUsed) {
setIsKeyboardUsed(true);
}
providedOnBlur(event, analyticsEvent);
},
action: 'blur',
analyticsData: analyticsContext
}, analyticsAttributes));
var handleFocus = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
fn: providedFocus,
action: 'focus',
analyticsData: analyticsContext
}, analyticsAttributes));
var handleChange = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
fn: function fn(event, analyticsEvent) {
if (isControlled) {
setChecked(function (checked) {
return !checked;
});
}
return providedChange(event, analyticsEvent);
},
action: 'change',
analyticsData: analyticsContext
}, analyticsAttributes));
var onLabelKeyDown = function onLabelKeyDown(event) {
if ([' ', 'Tab', 'Space'].includes(event.key)) {
setIsKeyboardUsed(true);
}
};
var shouldChecked = isControlled ? checked : isChecked;
var controlProps = {
'data-checked': shouldChecked ? shouldChecked : undefined,
'data-disabled': isDisabled ? isDisabled : undefined,
'data-size': size,
'data-testid': testId ? testId : undefined,
// DSP-21524 Because label gets focus ring via focus-within and focus-within also triggers by mouse click we have to manually control the ring appearance.
onKeyDown: onLabelKeyDown,
onMouseDown: function onMouseDown() {
setIsKeyboardUsed(false);
}
};
var legacyIconSize = iconSizeMap[size];
var labelId = (0, _useId.useId)();
return /*#__PURE__*/_react.default.createElement("label", (0, _extends2.default)({}, controlProps, {
ref: wrapperRef,
className: (0, _runtime.ax)(["_v564kete _1h6d1j28 _1dqonqa1 _189eyh40 _1e0c1o8l _vchh1ntv _kqswh2mm _1y1m1ntv _bfhk1tkq _syazw5hi _6rthv77o _1pfhv77o _12l2v77o _ahbqv77o _85i5v77o _1q51v77o _y4tiv77o _bozgv77o _1i2uidpf _1i3tidpf _se28idpf _3tunidpf _1423idpf _1hrtidpf _1bz2idpf _rqfvidpf _1yc0glyw _onsr1snc _1vgmagmp _1av610yn _1ulhidpf _rfx31q5u _pdykkete _1cs8stnw _1rusw5hi _1kt9b3bt _1fkr1y44 _z5wt1y44 _7dwzglyw _1bki1ouc _1flt1ouc _3xv21ouc _94713286 _ucabw5hi _mqf8snw8 _3dj2snw8 _1dl9snw8 _1divw5hi _1il8kb7n _y54dw5hi _irr31mlc _d0altlke _19ja13gf _8muf13gf _1k1q13gf _1plu15bl _1uo81mlc _178c1ouc _16rslghj _ogf41r31 _1rtbnqa1 _5gg9t94y", isKeyboardUsed && "_jyzf3zdg _1r4mnqa1 _1t9pyh40", size === 'large' && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && "_1n82gktf _19vpgktf", sizeStyles[size]]),
style: {
"--_1lrlov9": (0, _runtime.ix)("var(--ds-background-neutral-bold, ".concat(_colors.N200, ")")),
"--_1qgzj18": (0, _runtime.ix)("var(--ds-icon-inverse, ".concat(_colors.N0, ")")),
"--_r5pknd": (0, _runtime.ix)("var(--ds-background-disabled, ".concat(_colors.N20, ")")),
"--_ouwnnt": (0, _runtime.ix)("var(--ds-background-neutral-bold-hovered, ".concat(_colors.N400, ")")),
"--_16xemc6": (0, _runtime.ix)("var(--ds-background-success-bold, ".concat(_colors.G400, ")")),
"--_2cuxaa": (0, _runtime.ix)("var(--ds-background-success-bold-hovered, ".concat(_colors.G500, ")")),
"--_1xmcmw9": (0, _runtime.ix)("var(--ds-icon-disabled, ".concat(_colors.N70, ")")),
"--_xjqa3d": (0, _runtime.ix)("var(--ds-border-focused, ".concat(_colors.B200, ")"))
}
}), label ? /*#__PURE__*/_react.default.createElement("span", {
id: labelId,
hidden: true
}, label) : null, /*#__PURE__*/_react.default.createElement("input", {
ref: ref,
checked: shouldChecked,
disabled: isDisabled,
id: id,
name: name,
onBlur: handleBlur,
onChange: handleChange,
onFocus: handleFocus,
type: "checkbox",
value: value,
"data-testid": testId && "".concat(testId, "--input"),
"aria-labelledby": label ? labelId : undefined,
"aria-describedby": descriptionId
}), /*#__PURE__*/_react.default.createElement(_iconContainer.default, {
size: size,
isHidden: !shouldChecked,
position: "left"
}, /*#__PURE__*/_react.default.createElement(_checkMarkEditorDone.default, {
label: "",
color: "currentColor",
LEGACY_size: legacyIconSize,
testId: testId && "".concat(testId, "--toggle-check-icon")
})), /*#__PURE__*/_react.default.createElement(_iconContainer.default, {
size: size,
isHidden: shouldChecked,
position: "right"
}, /*#__PURE__*/_react.default.createElement(_crossEditorClose.default, {
label: "",
color: "currentColor",
LEGACY_size: legacyIconSize,
testId: testId && "".concat(testId, "--toggle-cross-icon")
})));
}));
Toggle.displayName = 'Toggle';
var _default = exports.default = Toggle;