@atlaskit/toggle
Version:
A toggle is used to view or switch between enabled or disabled states.
38 lines • 1.62 kB
JavaScript
/* icon-container.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./icon-container.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { cx } from '@atlaskit/css';
import { Box } from '@atlaskit/primitives/compiled/box';
var styles = {
iconContainer: "_v5641hrg _1e0c116y _4cvr1h6o _1bah1h6o _kqswstnw _152tv77o",
iconContainerRegular: "_1bsb7vkz _4t3i7vkz",
iconContainerLarge: "_1bsbgktf _4t3igktf",
motion: "_v56419ec _1kxtbrmi _6pgpglyw",
noMotion: "_v564glyw",
outsideRight: "_t9ecxwn4",
outsideLeft: "_t9ecjq3t",
hidden: "_tzy4idpf",
left: "_1e021l7b",
right: "_rjxp1l7b"
};
/**
* __Icon container__
*
* Positions a toggle's check and close icons.
*/
var IconContainer = function IconContainer(_ref) {
var children = _ref.children,
size = _ref.size,
isHidden = _ref.isHidden,
position = _ref.position,
hasMotion = _ref.hasMotion,
isDisabled = _ref.isDisabled;
return /*#__PURE__*/React.createElement(Box, {
as: "span",
xcss: cx(styles.iconContainer, hasMotion && styles.motion, hasMotion && isDisabled && styles.noMotion,
// Icons enter and exit at their nearest track edge, travelling with the handle.
hasMotion && isHidden && position === 'left' && styles.outsideLeft, hasMotion && isHidden && position === 'right' && styles.outsideRight, isHidden && styles.hidden, size === 'regular' && styles.iconContainerRegular, size === 'large' && styles.iconContainerLarge, position === 'left' && styles.left, position === 'right' && styles.right)
}, children);
};
export default IconContainer;