UNPKG

@nutui/nutui-react

Version:

京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序

60 lines (59 loc) 2.58 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "Animate", { enumerable: true, get: function() { return Animate; } }); var _interop_require_default = require("@swc/helpers/_/_interop_require_default"); var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard"); var _define_property = require("@swc/helpers/_/_define_property"); var _object_spread = require("@swc/helpers/_/_object_spread"); var _object_spread_props = require("@swc/helpers/_/_object_spread_props"); var _object_without_properties = require("@swc/helpers/_/_object_without_properties"); var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array"); var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react")); var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames")); var _typings = require("../../utils/typings"); var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), { type: 'shake', action: 'initial', loop: false, onClick: function onClick(event) {} }); var classPrefix = 'nut-animate'; var Animate = function Animate(props) { var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, type = _ref.type, action = _ref.action, loop = _ref.loop, onClick = _ref.onClick, children = _ref.children, rest = (0, _object_without_properties._)(_ref, [ "className", "type", "action", "loop", "onClick", "children" ]); var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), clicked = _useState[0], setClicked = _useState[1]; var _obj; var classes = (0, _classnames.default)((_obj = { 'nut-ani-container': true }, (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(type), action === 'initial' || clicked), (0, _define_property._)(_obj, "loop", loop), _obj), className); var handleClick = function handleClick(event) { setClicked(true); // 如果不是无限循环,清除类名 if (!loop) { setTimeout(function() { return setClicked(false); }, 1000); } onClick(event); }; return /*#__PURE__*/ _react.default.createElement("div", { className: "nut-animate" }, /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({ className: classes, onClick: handleClick }, rest), children)); }; Animate.displayName = 'NutAnimate';