@razorpay/blade
Version:
The Design System that powers Razorpay
108 lines (104 loc) • 6.32 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import styled, { css, keyframes } from 'styled-components';
import { getInputBackgroundAndBorderStyles, getAnimatedBaseInputWrapperMaxHeight } from './baseInputStyles.js';
import { baseInputHeight, baseInputWrapperMaxHeight } from './baseInputTokens.js';
import '../../Box/BaseBox/index.js';
import '../../../tokens/global/index.js';
import '../../../utils/index.js';
import { jsx } from 'react/jsx-runtime';
import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
import { castWebType } from '../../../utils/platform/castUtils.js';
import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
import { makeSize } from '../../../utils/makeSize/makeSize.js';
import { motion } from '../../../tokens/global/motion.js';
import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
var _excluded = ["showAllTags", "setShowAllTagsWithAnimation", "maxTagRows", "isDropdownTrigger"];
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 StyledBaseInputWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "AnimatedBaseInputWrapperweb__StyledBaseInputWrapper",
componentId: "e1vobd-0"
})(function (props) {
return _objectSpread(_objectSpread({}, getInputBackgroundAndBorderStyles({
theme: props.theme,
isFocused: props.currentInteraction === 'focus',
isDisabled: props.isDisabled,
validationState: props.validationState,
isTextArea: props.isTextArea,
isDropdownTrigger: props.isDropdownTrigger,
isTableInputCell: props.isTableInputCell
})), {}, {
'&:hover': _objectSpread(_objectSpread({}, getInputBackgroundAndBorderStyles({
theme: props.theme,
isHovered: true,
isFocused: props.currentInteraction === 'focus',
isDisabled: props.isDisabled,
validationState: props.validationState,
isDropdownTrigger: props.isDropdownTrigger,
isTextArea: props.isTextArea,
isTableInputCell: props.isTableInputCell
})), {}, {
transitionProperty: 'background-color',
transitionDuration: castWebType(makeMotionTime(props.theme.motion.duration.xquick)),
transitionTimingFunction: castWebType(props.theme.motion.easing.standard)
}),
':focus-within': _objectSpread({}, getInputBackgroundAndBorderStyles({
theme: props.theme,
isFocused: props.currentInteraction === 'focus',
isDisabled: props.isDisabled,
validationState: props.validationState,
isDropdownTrigger: props.isDropdownTrigger,
isTextArea: props.isTextArea,
isTableInputCell: props.isTableInputCell
}))
});
});
// Styled component with animation
var StyledAnimatedBaseInputWrapper = /*#__PURE__*/styled(StyledBaseInputWrapper).withConfig({
displayName: "AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper",
componentId: "e1vobd-1"
})(function (props) {
return props.isDropdownTrigger && !props.isTableInputCell ? css(["", ";max-height:", ";"], props.transition, makeSize(getAnimatedBaseInputWrapperMaxHeight({
maxTagRows: props.maxTagRows,
showAllTags: props.showAllTags,
size: props.size
}))) : undefined;
});
var _AnimatedBaseInputWrapper = function _AnimatedBaseInputWrapper(_ref, ref) {
var _rest$numberOfLines;
var showAllTags = _ref.showAllTags,
setShowAllTagsWithAnimation = _ref.setShowAllTagsWithAnimation,
maxTagRows = _ref.maxTagRows,
isDropdownTrigger = _ref.isDropdownTrigger,
rest = _objectWithoutProperties(_ref, _excluded);
// Define the animation keyframes
var expandAnimation = /*#__PURE__*/keyframes(["from{max-height:", ";}to{max-height:", ";}"], makeSize(baseInputHeight[rest.size]), makeSize(baseInputWrapperMaxHeight[rest.size]));
var collapseAnimation = /*#__PURE__*/keyframes(["from{max-height:", ";}to{max-height:", ";}"], makeSize(baseInputWrapperMaxHeight[rest.size]), makeSize(baseInputHeight[rest.size]));
var expandTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], expandAnimation, makeMotionTime(motion.duration.quick), String(motion.easing.entrance));
var collapseTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], collapseAnimation, makeMotionTime(motion.duration.quick), String(motion.easing.exit));
var noTransition = /*#__PURE__*/css(["animation:none;"]);
return /*#__PURE__*/jsx(StyledAnimatedBaseInputWrapper
// eslint-disable-next-line @typescript-eslint/no-explicit-any
, _objectSpread(_objectSpread({
ref: ref
}, rest), {}, {
transition: maxTagRows !== 'expandable' ? noTransition : showAllTags ? expandTransition : collapseTransition,
height: rest.isTextArea && isDropdownTrigger ? makeSpace(((_rest$numberOfLines = rest.numberOfLines) !== null && _rest$numberOfLines !== void 0 ? _rest$numberOfLines : 0) * baseInputHeight[rest.size]) : undefined,
cursor: rest.isTextArea && isDropdownTrigger ? 'text' : undefined,
isDropdownTrigger: isDropdownTrigger,
showAllTags: showAllTags,
maxTagRows: maxTagRows,
onAnimationEnd: function onAnimationEnd(e) {
if (!showAllTags && e.animationName === collapseAnimation.getName()) {
// Triggered for the collapse animation
setShowAllTagsWithAnimation === null || setShowAllTagsWithAnimation === void 0 ? void 0 : setShowAllTagsWithAnimation(false);
}
},
isTableInputCell: rest.isTableInputCell
}));
};
var AnimatedBaseInputWrapper = /*#__PURE__*/React__default.forwardRef(_AnimatedBaseInputWrapper);
export { AnimatedBaseInputWrapper };
//# sourceMappingURL=AnimatedBaseInputWrapper.web.js.map