@atlaskit/toggle
Version:
A toggle is used to view or switch between enabled or disabled states.
200 lines (192 loc) • 9.66 kB
JavaScript
/* toggle.tsx generated by @compiled/babel-plugin v0.39.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, useState } from 'react';
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/core/check-mark';
import CloseIcon from '@atlaskit/icon/core/cross';
import { fg } from '@atlaskit/platform-feature-flags';
import Spinner from '@atlaskit/spinner';
import VisuallyHidden from '@atlaskit/visually-hidden';
import IconContainer from './icon-container';
var LOADING_LABEL = ', Loading';
var basicStyles = null;
var sizeStyles = {
regular: "_2rko1rr0 _4t3ipxbi _1bsbxy5q _kfgtutpp _1mp41crf _p9c41fbe",
large: "_2rko1rr0 _4t3iv47k _1bsb1jfw _kfgtpxbi _1mp47vkz _p9c4w12q"
};
var atomicBaseStyles = null;
var atomicSizeStyles = {
regular: "_2rko1rr0 _4t3ipxbi _1bsbxy5q _kfgtutpp _1mp41crf",
large: "_2rko1rr0 _4t3iv47k _1bsb1jfw _kfgtpxbi _1mp47vkz"
};
/**
* Slider knob translate transforms per size, applied when checked.
*/
var atomicCheckedSliderStyles = {
regular: "_7dwz1fbe",
large: "_7dwzw12q"
};
/**
* Applied when the toggle is checked
*/
var atomicCheckedStyles = null;
/**
* Applied when the toggle is checked and not disabled.
*/
var atomicCheckedHoveredStyles = null;
/**
* Applied when the toggle is unchecked and not disabled.
*/
var atomicUncheckedHoveredStyles = null;
/**
* Applied when the toggle is disabled.
*/
var atomicDisabledStyles = null;
/**
* Removes the unnecessary zIndex from the disabled toggle handle (legacy path)
* that caused it to render above overlapping elements like select menus.
*/
var basicDisabledZIndexFixStyles = null;
/**
* Removes the unnecessary zIndex from the disabled toggle handle (atomic path)
* that caused it to render above overlapping elements like select menus.
*/
var atomicDisabledZIndexFixStyles = null;
var atomicInputStyles = null;
var noop = __noop;
var analyticsAttributes = {
componentName: 'toggle',
packageName: "@atlaskit/toggle",
packageVersion: "15.6.1"
};
/**
* __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,
isLoading = props.isLoading,
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 loadingLabelId = useId();
var handleBlur = usePlatformLeafEventHandler(_objectSpread({
fn: providedOnBlur,
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 shouldChecked = isControlled ? checked : isChecked;
var controlProps = _objectSpread(_objectSpread({}, !fg('platform-toggle-atomic-styles') && {
'data-checked': shouldChecked ? shouldChecked : undefined,
'data-disabled': isDisabled ? isDisabled : undefined,
'data-size': size
}), {}, {
'data-testid': testId ? testId : undefined
});
var labelId = useId();
return /*#__PURE__*/React.createElement("label", _extends({}, controlProps, {
className: ax([!fg('platform-toggle-atomic-styles') && "_v564kete _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1o8l _vchh1ntv _kqswh2mm _1y1m1ntv _bfhk1aqn _syaz5w2r _6rthv77o _1pfhv77o _12l2v77o _ahbqv77o _85i5v77o _1q51v77o _y4tiv77o _bozgv77o _1i2uidpf _1i3tidpf _se28idpf _3tunidpf _1423idpf _1hrtidpf _1bz2idpf _rqfvidpf _1yc0glyw _onsr1snc _1vgmagmp _1av610yn _1ulhidpf _rfx31qll _pdykkete _1cs8stnw _1rus5w2r _1kt9b3bt _1fkr1y44 _z5wt1y44 _7dwzglyw _1ys41v1w _krlfnqa1 _ju3ddkaa _1bkiby5v _1fltby5v _3xv2by5v _9471kcmj _ucab5w2r _mqf82sac _3dj22sac _1dl92sac _1div5w2r _1il8kb7n _y54d5w2r _irr31ibz _d0altlke _19ja13gf _8muf13gf _1k1q13gf _1pluy7x8 _1uo81ibz _178cby5v _16rslghj _i5ec1w7i", !fg('platform-toggle-atomic-styles') && sizeStyles[size], fg('platform-toggle-atomic-styles') && "_v564kete _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1o8l _vchh1ntv _kqswh2mm _1y1m1ntv _bfhk1aqn _syaz5w2r _80omtlke _6rthv77o _1pfhv77o _12l2v77o _ahbqv77o _85i5v77o _1q51v77o _y4tiv77o _bozgv77o _rfx31qll _pdykkete _1cs8stnw _1rus5w2r _1kt9b3bt _1fkr1y44 _z5wt1y44 _1ys41v1w _ju3ddkaa _16rslghj _i5ec1w7i", fg('platform-toggle-atomic-styles') && atomicSizeStyles[size], shouldChecked && fg('platform-toggle-atomic-styles') && "_bfhkkcmj", shouldChecked && fg('platform-toggle-atomic-styles') && atomicCheckedSliderStyles[size], !isDisabled && shouldChecked && fg('platform-toggle-atomic-styles') && "_irr3y7x8", !isDisabled && !shouldChecked && fg('platform-toggle-atomic-styles') && "_irr31ibz", isDisabled && fg('platform-toggle-atomic-styles') && "_bfhkby5v _syaz2sac _80om13gf _1g0vkb7n", fg('platform-toggle-fix-disabled-zindex') && "_1il8n7od", isDisabled && fg('platform-toggle-fix-disabled-zindex') && "_1g0vn7od"])
}), label ? /*#__PURE__*/React.createElement("span", {
id: labelId,
hidden: true
}, isLoading ? "".concat(label).concat(LOADING_LABEL) : 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": isLoading && label ? "".concat(labelId, " ").concat(loadingLabelId) : label ? labelId : undefined,
"aria-describedby": descriptionId
// In the atomic styling path, apply input styles directly to the input element
// rather than via nested styles on the parent label.
,
className: ax([fg('platform-toggle-atomic-styles') && "_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19itglyw _tzy4idpf _nt751snc _49pcagmp _1hvw10yn"])
}), /*#__PURE__*/React.createElement(IconContainer, {
size: size,
isHidden: !shouldChecked,
position: "left"
}, isLoading && shouldChecked ? /*#__PURE__*/React.createElement(Spinner, {
size: "xsmall",
appearance: "invert"
}) : /*#__PURE__*/React.createElement(CheckMarkIcon, {
label: "",
color: "currentColor",
testId: testId && "".concat(testId, "--toggle-check-icon"),
size: "small"
})), /*#__PURE__*/React.createElement(IconContainer, {
size: size,
isHidden: shouldChecked,
position: "right"
}, isLoading && !shouldChecked ? /*#__PURE__*/React.createElement(Spinner, {
size: "xsmall",
appearance: "invert"
}) : /*#__PURE__*/React.createElement(CloseIcon, {
label: "",
color: "currentColor",
testId: testId && "".concat(testId, "--toggle-cross-icon"),
size: "small"
})), isLoading && !label && /*#__PURE__*/React.createElement(VisuallyHidden, {
id: loadingLabelId
}, LOADING_LABEL));
}));
Toggle.displayName = 'Toggle';
export default Toggle;