@atlaskit/toggle
Version:
A toggle is used to view or switch between enabled or disabled states.
202 lines (201 loc) • 9.46 kB
JavaScript
/* toggle.tsx generated by @compiled/babel-plugin v0.36.1 */
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./toggle.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
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) { _defineProperty(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; }
import React, { forwardRef, memo, useEffect, useRef, useState } from 'react';
import { bindAll } from 'bind-event-listener';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
import __noop from '@atlaskit/ds-lib/noop';
import { useId } from '@atlaskit/ds-lib/use-id';
import CheckMarkIcon from '@atlaskit/icon/utility/migration/check-mark--editor-done';
import CloseIcon from '@atlaskit/icon/utility/migration/cross--editor-close';
import { fg } from '@atlaskit/platform-feature-flags';
import { B200, G400, G500, N0, N20, N200, N400, N70 } from '@atlaskit/theme/colors';
import IconContainer from './icon-container';
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;
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__*/memo( /*#__PURE__*/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 = useState(defaultChecked),
_useState2 = _slicedToArray(_useState, 2),
checked = _useState2[0],
setChecked = _useState2[1];
var _useState3 = useState(true),
_useState4 = _slicedToArray(_useState3, 2),
isKeyboardUsed = _useState4[0],
setIsKeyboardUsed = _useState4[1];
var wrapperRef = useRef(null);
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 = 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 = usePlatformLeafEventHandler(_objectSpread({
fn: function fn(event, analyticsEvent) {
if (!isKeyboardUsed) {
setIsKeyboardUsed(true);
}
providedOnBlur(event, analyticsEvent);
},
action: 'blur',
analyticsData: analyticsContext
}, analyticsAttributes));
var handleFocus = usePlatformLeafEventHandler(_objectSpread({
fn: providedFocus,
action: 'focus',
analyticsData: analyticsContext
}, analyticsAttributes));
var handleChange = 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 = useId();
return /*#__PURE__*/React.createElement("label", _extends({}, controlProps, {
ref: wrapperRef,
className: 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' && !fg('platform-visual-refresh-icons') && "_1n82gktf _19vpgktf", sizeStyles[size]]),
style: {
"--_1lrlov9": ix("var(--ds-background-neutral-bold, ".concat(N200, ")")),
"--_1qgzj18": ix("var(--ds-icon-inverse, ".concat(N0, ")")),
"--_r5pknd": ix("var(--ds-background-disabled, ".concat(N20, ")")),
"--_ouwnnt": ix("var(--ds-background-neutral-bold-hovered, ".concat(N400, ")")),
"--_16xemc6": ix("var(--ds-background-success-bold, ".concat(G400, ")")),
"--_2cuxaa": ix("var(--ds-background-success-bold-hovered, ".concat(G500, ")")),
"--_1xmcmw9": ix("var(--ds-icon-disabled, ".concat(N70, ")")),
"--_xjqa3d": ix("var(--ds-border-focused, ".concat(B200, ")"))
}
}), label ? /*#__PURE__*/React.createElement("span", {
id: labelId,
hidden: true
}, label) : null, /*#__PURE__*/React.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.createElement(IconContainer, {
size: size,
isHidden: !shouldChecked,
position: "left"
}, /*#__PURE__*/React.createElement(CheckMarkIcon, {
label: "",
color: "currentColor",
LEGACY_size: legacyIconSize,
testId: testId && "".concat(testId, "--toggle-check-icon")
})), /*#__PURE__*/React.createElement(IconContainer, {
size: size,
isHidden: shouldChecked,
position: "right"
}, /*#__PURE__*/React.createElement(CloseIcon, {
label: "",
color: "currentColor",
LEGACY_size: legacyIconSize,
testId: testId && "".concat(testId, "--toggle-cross-icon")
})));
}));
Toggle.displayName = 'Toggle';
export default Toggle;