@razorpay/blade
Version:
The Design System that powers Razorpay
123 lines (120 loc) • 4.69 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import 'react';
import { CheckboxIconWrapper } from './CheckboxIconWrapper.web.js';
import { Fade } from './Fade.web.js';
import getIn from '../../../utils/lodashButBetter/get.js';
import '../../BladeProvider/index.js';
import '../../Icons/_Svg/index.js';
import '../../../utils/makeSpace/index.js';
import '../../../utils/metaAttribute/index.js';
import '../../../tokens/global/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { size } from '../../../tokens/global/size.js';
import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
import Svg from '../../Icons/_Svg/Svg/Svg.web.js';
import Path from '../../Icons/_Svg/Path/Path.web.js';
import useTheme from '../../BladeProvider/useTheme.js';
import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
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; }
var svgSize = {
small: {
width: size[8],
height: size[8]
},
medium: {
width: size[12],
height: size[12]
},
large: {
width: size[16],
height: size[16]
}
};
var CheckedIcon = function CheckedIcon(_ref) {
var color = _ref.color,
size = _ref.size;
var width = makeSpace(svgSize[size].width);
var height = makeSpace(svgSize[size].height);
return /*#__PURE__*/jsx(Svg, {
width: width,
height: height,
viewBox: "0 0 8 8",
fill: "none",
children: /*#__PURE__*/jsx(Path, {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z",
fill: color,
stroke: color,
strokeWidth: "0.5",
strokeLinecap: "round",
strokeLinejoin: "round"
})
});
};
var IndeterminateIcon = function IndeterminateIcon(_ref2) {
var color = _ref2.color,
size = _ref2.size;
var width = makeSpace(svgSize[size].width);
var height = makeSpace(svgSize[size].height);
return /*#__PURE__*/jsx(Svg, {
width: width,
height: height,
viewBox: "0 0 8 8",
fill: "none",
children: /*#__PURE__*/jsx(Path, {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z",
fill: color,
stroke: color,
strokeWidth: "0.5",
strokeLinecap: "round",
strokeLinejoin: "round"
})
});
};
var CheckboxIcon = function CheckboxIcon(_ref3) {
var isChecked = _ref3.isChecked,
isIndeterminate = _ref3.isIndeterminate,
isDisabled = _ref3.isDisabled,
isNegative = _ref3.isNegative,
size = _ref3.size;
var _useTheme = useTheme(),
theme = _useTheme.theme;
var iconColor = getIn(theme, 'colors.interactive.icon.onPrimary.normal');
return /*#__PURE__*/jsxs(CheckboxIconWrapper, _objectSpread(_objectSpread({
size: size,
isIndeterminate: isIndeterminate,
isDisabled: isDisabled,
isNegative: isNegative,
isChecked: !!(isChecked || isIndeterminate)
}, metaAttribute({
name: 'checkbox-icon-wrapper'
})), {}, {
children: [/*#__PURE__*/jsx(Fade, {
show: isIndeterminate,
styles: {
position: 'absolute',
display: 'flex'
},
children: /*#__PURE__*/jsx(IndeterminateIcon, {
size: size,
color: iconColor
})
}), /*#__PURE__*/jsx(Fade, {
show: Boolean(isChecked) && !isIndeterminate,
styles: {
position: 'absolute',
display: 'flex'
},
children: isChecked ? /*#__PURE__*/jsx(CheckedIcon, {
size: size,
color: iconColor
}) : null
})]
}));
};
export { CheckboxIcon };
//# sourceMappingURL=CheckboxIcon.js.map