@atlaskit/toggle
Version:
A toggle is used to view or switch between enabled or disabled states.
173 lines (165 loc) • 6.16 kB
JavaScript
/* toggle.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./toggle.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
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';
const LOADING_LABEL = ', Loading';
const baseStyles = null;
const sizeStyles = {
regular: "_2rko1rr0 _4t3ipxbi _1bsbxy5q _kfgtutpp _1mp41crf",
large: "_2rko1rr0 _4t3iv47k _1bsb1jfw _kfgtpxbi _1mp47vkz"
};
/**
* Slider knob translate transforms per size, applied when checked.
*/
const checkedSliderStyles = {
regular: "_7dwz1fbe",
large: "_7dwzw12q"
};
/**
* Applied when the toggle is checked
*/
const checkedStyles = null;
/**
* Applied when the toggle is checked and not disabled.
*/
const checkedHoveredStyles = null;
/**
* Applied when the toggle is unchecked and not disabled.
*/
const uncheckedHoveredStyles = null;
/**
* Applied when the toggle is disabled.
*/
const disabledStyles = null;
/**
* Removes the unnecessary zIndex from the disabled toggle handle (legacy selector path)
* that caused it to render above overlapping elements like select menus.
*/
const basicDisabledZIndexFixStyles = null;
/**
* Removes the unnecessary zIndex from the disabled toggle handle (atomic path)
* that caused it to render above overlapping elements like select menus.
*/
const atomicDisabledZIndexFixStyles = null;
const inputStyles = null;
const noop = __noop;
const analyticsAttributes = {
componentName: 'toggle',
packageName: "@atlaskit/toggle",
packageVersion: "15.6.2"
};
/**
* __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)
*/
const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
const {
defaultChecked = false,
isDisabled = false,
onBlur: providedOnBlur = noop,
onChange: providedChange = noop,
onFocus: providedFocus = noop,
size = 'regular',
name = '',
value = '',
isChecked,
isLoading,
analyticsContext,
id,
testId,
label,
descriptionId
} = props;
const isControlled = typeof isChecked === 'undefined';
const [checked, setChecked] = useState(defaultChecked);
const loadingLabelId = useId();
const handleBlur = usePlatformLeafEventHandler({
fn: providedOnBlur,
action: 'blur',
analyticsData: analyticsContext,
...analyticsAttributes
});
const handleFocus = usePlatformLeafEventHandler({
fn: providedFocus,
action: 'focus',
analyticsData: analyticsContext,
...analyticsAttributes
});
const handleChange = usePlatformLeafEventHandler({
fn: (event, analyticsEvent) => {
if (isControlled) {
setChecked(checked => !checked);
}
return providedChange(event, analyticsEvent);
},
action: 'change',
analyticsData: analyticsContext,
...analyticsAttributes
});
const shouldChecked = isControlled ? checked : isChecked;
const labelId = useId();
return /*#__PURE__*/React.createElement("label", {
"data-testid": testId,
className: ax(["_1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1o8l _vchh1ntv _kqswh2mm _1y1m1ntv _bfhk1aqn _syaz5w2r _80omtlke _6rthv77o _1pfhv77o _12l2v77o _ahbqv77o _85i5v77o _1q51v77o _y4tiv77o _bozgv77o _1oeci9qs _k8m01e03 _6fl4574g _rfx31qll _1cs8stnw _1rus5w2r _1kt9b3bt _1fkr1y44 _z5wt1y44 _1cg6i9qs _qs2z1e03 _mlfe574g _1ys41v1w _ju3ddkaa _16rslghj _i5ec1w7i", sizeStyles[size], shouldChecked && "_bfhkkcmj", shouldChecked && checkedSliderStyles[size], !isDisabled && shouldChecked && "_irr3y7x8", !isDisabled && !shouldChecked && "_irr31ibz", isDisabled && "_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 ? `${label}${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 && `${testId}--input`,
"aria-labelledby": isLoading && label ? `${labelId} ${loadingLabelId}` : label ? labelId : undefined,
"aria-describedby": descriptionId,
className: ax(["_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 && `${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 && `${testId}--toggle-cross-icon`,
size: "small"
})), isLoading && !label && /*#__PURE__*/React.createElement(VisuallyHidden, {
id: loadingLabelId
}, LOADING_LABEL));
}));
Toggle.displayName = 'Toggle';
export default Toggle;