nishant-design-system
Version:
Sense UI components library
85 lines (84 loc) • 4.02 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PADDING_SIZES = exports.ClickableCard = exports.Card = void 0;
var React = _interopRequireWildcard(require("react"));
var SPACES = _interopRequireWildcard(require("../../styles/variables/_space"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _string = require("../../utils/string");
var _CardModule = _interopRequireDefault(require("./Card.module.css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const PADDING_SIZES = Object.freeze({
small: 'small',
medium: 'medium',
large: 'large'
});
exports.PADDING_SIZES = PADDING_SIZES;
const getPaddingValue = size => {
const spaceKey = 'space' + (0, _string.capitalize)(size);
return SPACES[spaceKey] || SPACES['spaceNone'];
};
const Card = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
children,
classNames,
paddingTop = 'medium',
paddingRight = 'medium',
paddingBottom = 'medium',
paddingLeft = 'medium',
...props
} = _ref;
return /*#__PURE__*/React.createElement("div", _extends({}, props, {
style: {
'--card-padding-top': getPaddingValue(paddingTop),
'--card-padding-right': getPaddingValue(paddingRight),
'--card-padding-bottom': getPaddingValue(paddingBottom),
'--card-padding-left': getPaddingValue(paddingLeft)
},
"data-testid": "Card",
className: (0, _classify.default)(_CardModule.default.cardWrapper, classNames?.wrapper),
ref: ref
}), children);
});
exports.Card = Card;
const ClickableCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
let {
classNames,
onClick,
disabled = false,
...props
} = _ref2;
const componentRef = React.useRef(null);
React.useImperativeHandle(ref, () => componentRef.current);
React.useEffect(() => {
if (disabled) {
componentRef.current?.blur();
}
}, [disabled]);
const onClickHandler = e => {
if (!disabled) {
onClick && onClick(e);
}
};
const onKeyDownHandler = e => {
if (e.key === 'Enter') {
onClickHandler(e);
}
};
return /*#__PURE__*/React.createElement(Card, _extends({}, props, {
classNames: {
wrapper: (0, _classify.default)(_CardModule.default.clickableCard, {
[_CardModule.default.disabled]: disabled
}, classNames?.wrapper)
},
tabIndex: disabled ? -1 : 0,
onClick: onClickHandler,
onKeyDown: onKeyDownHandler,
ref: ref
}));
});
exports.ClickableCard = ClickableCard;