@atlaskit/toggle
Version:
A toggle is used to view or switch between enabled or disabled states.
177 lines (175 loc) • 9.8 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 _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/core/migration/check-mark--editor-done"));
var _crossEditorClose = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross--editor-close"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
var _colors = require("@atlaskit/theme/colors");
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
var _iconContainer = _interopRequireDefault(require("./icon-container"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 LOADING_LABEL = ', Loading';
var basicStyles = 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.1.2"
};
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,
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 = (0, _react.useState)(defaultChecked),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
checked = _useState2[0],
setChecked = _useState2[1];
var loadingLabelId = (0, _useId.useId)();
var handleBlur = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
fn: providedOnBlur,
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 shouldChecked = isControlled ? checked : isChecked;
var controlProps = {
'data-checked': shouldChecked ? shouldChecked : undefined,
'data-disabled': isDisabled ? isDisabled : undefined,
'data-size': size,
'data-testid': testId ? testId : undefined
};
var legacyIconSize = iconSizeMap[size];
var labelId = (0, _useId.useId)();
return /*#__PURE__*/_react.default.createElement("label", (0, _extends2.default)({}, controlProps, {
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 _1ys43zdg _krlfnqa1 _ju3dyh40 _1bki1ouc _1flt1ouc _3xv21ouc _94713286 _ucabw5hi _mqf8snw8 _3dj2snw8 _1dl9snw8 _1divw5hi _1il8kb7n _y54dw5hi _irr31mlc _d0altlke _19ja13gf _8muf13gf _1k1q13gf _1plu15bl _1uo81mlc _178c1ouc _16rslghj _ogf41r31 _1rtbnqa1 _5gg9t94y", 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, ")")),
"--_xjqa3d": (0, _runtime.ix)("var(--ds-border-focused, ".concat(_colors.B200, ")")),
"--_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, ")"))
}
}), label ? /*#__PURE__*/_react.default.createElement("span", {
id: labelId,
hidden: true
}, isLoading ? "".concat(label).concat(LOADING_LABEL) : 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": isLoading && label ? "".concat(labelId, " ").concat(loadingLabelId) : label ? labelId : undefined,
"aria-describedby": descriptionId
}), /*#__PURE__*/_react.default.createElement(_iconContainer.default, {
size: size,
isHidden: !shouldChecked,
position: "left"
}, isLoading && shouldChecked ? /*#__PURE__*/_react.default.createElement(_spinner.default, {
size: "xsmall",
appearance: "invert"
}) : /*#__PURE__*/_react.default.createElement(_checkMarkEditorDone.default, {
label: "",
color: "currentColor",
LEGACY_size: legacyIconSize,
testId: testId && "".concat(testId, "--toggle-check-icon"),
size: "small"
})), /*#__PURE__*/_react.default.createElement(_iconContainer.default, {
size: size,
isHidden: shouldChecked,
position: "right"
}, isLoading && !shouldChecked ? /*#__PURE__*/_react.default.createElement(_spinner.default, {
size: "xsmall",
appearance: "invert"
}) : /*#__PURE__*/_react.default.createElement(_crossEditorClose.default, {
label: "",
color: "currentColor",
LEGACY_size: legacyIconSize,
testId: testId && "".concat(testId, "--toggle-cross-icon"),
size: "small"
})), isLoading && !label && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
id: loadingLabelId
}, LOADING_LABEL));
}));
Toggle.displayName = 'Toggle';
var _default = exports.default = Toggle;