@cleartrip/ct-design-animate 2.0.0-TEST.1 → 4.0.0-SNAPSHOT-test.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +68 -0
- package/dist/Animate.d.ts +0 -1
- package/dist/Animate.d.ts.map +1 -1
- package/dist/components/Shake.d.ts.map +1 -1
- package/dist/ct-design-animate.browser.cjs.js +29 -1
- package/dist/ct-design-animate.browser.cjs.js.map +1 -1
- package/dist/ct-design-animate.browser.esm.js +29 -1
- package/dist/ct-design-animate.browser.esm.js.map +1 -1
- package/dist/ct-design-animate.cjs.js +40 -28
- package/dist/ct-design-animate.cjs.js.map +1 -1
- package/dist/ct-design-animate.esm.js +43 -27
- package/dist/ct-design-animate.esm.js.map +1 -1
- package/dist/ct-design-animate.umd.js +1691 -49
- package/dist/ct-design-animate.umd.js.map +1 -1
- package/dist/style.d.ts +1 -10
- package/dist/style.d.ts.map +1 -1
- package/dist/type.d.ts +2 -2
- package/dist/type.d.ts.map +1 -1
- package/package.json +17 -7
- package/src/Animate.tsx +13 -0
- package/src/components/Shake.tsx +24 -0
- package/src/index.ts +2 -0
- package/src/style.ts +24 -0
- package/src/type.ts +35 -0
package/README.md
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# Animate
|
|
2
|
+
|
|
3
|
+
A wrapper component that provides animation utilities for child elements.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @cleartrip/ct-design-animate
|
|
11
|
+
# or
|
|
12
|
+
pnpm add @cleartrip/ct-design-animate
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Peer dependencies
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
# Required for all targets
|
|
19
|
+
npm install react
|
|
20
|
+
|
|
21
|
+
# Web only
|
|
22
|
+
npm install react-dom
|
|
23
|
+
|
|
24
|
+
# React Native only
|
|
25
|
+
npm install react-native
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
### Basic
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { Animate } from '@cleartrip/ct-design-animate';
|
|
36
|
+
|
|
37
|
+
function Example() {
|
|
38
|
+
return (
|
|
39
|
+
<Animate>
|
|
40
|
+
{/* Basic usage */}
|
|
41
|
+
</Animate>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
## AnimationVariant
|
|
49
|
+
|
|
50
|
+
- `SHAKE` — SHAKE
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## Accessibility
|
|
54
|
+
|
|
55
|
+
- The component follows accessibility best practices
|
|
56
|
+
- Ensure proper ARIA attributes are provided where needed
|
|
57
|
+
- Test with screen readers to ensure usability
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Migration
|
|
62
|
+
|
|
63
|
+
If migrating from a previous version:
|
|
64
|
+
|
|
65
|
+
```diff
|
|
66
|
+
- import { Animate } from 'yagami/core/components';
|
|
67
|
+
+ import { Animate } from '@cleartrip/ct-design-animate';
|
|
68
|
+
```
|
package/dist/Animate.d.ts
CHANGED
package/dist/Animate.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Animate.d.ts","sourceRoot":"","sources":["../packages/components/Animate/src/Animate.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Animate.d.ts","sourceRoot":"","sources":["../packages/components/Animate/src/Animate.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAoB,MAAM,QAAQ,CAAC;AAExD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAOnC,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shake.d.ts","sourceRoot":"","sources":["../../packages/components/Animate/src/components/Shake.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,
|
|
1
|
+
{"version":3,"file":"Shake.d.ts","sourceRoot":"","sources":["../../packages/components/Animate/src/components/Shake.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAc9C,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAKxC,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1,2 +1,30 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var r=require("tslib"),t=require("react/jsx-runtime"),e=require("@emotion/css"),a=require("@cleartrip/ct-design-style-manager");const i=e.keyframes`
|
|
2
|
+
10%,
|
|
3
|
+
90% {
|
|
4
|
+
transform: translate3d(-1px, 0, 0);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
20%,
|
|
8
|
+
80% {
|
|
9
|
+
transform: translate3d(2px, 0, 0);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
30%,
|
|
13
|
+
50%,
|
|
14
|
+
70% {
|
|
15
|
+
transform: translate3d(-4px, 0, 0);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
40%,
|
|
19
|
+
60% {
|
|
20
|
+
transform: translate3d(4px, 0, 0);
|
|
21
|
+
}
|
|
22
|
+
`,n=e.css`
|
|
23
|
+
animation-duration: 1s;
|
|
24
|
+
animation-fill-mode: both;
|
|
25
|
+
animation: ${i} 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
|
26
|
+
transform: translate3d(0, 0, 0);
|
|
27
|
+
backface-visibility: hidden;
|
|
28
|
+
perspective: 1000px;
|
|
29
|
+
`,s=({children:r,styleConfig:e})=>{const{root:i=[]}=null!=e?e:{},s=a.useWebMergeStyles([...i,n],[i,n]);return t.jsx("div",{className:s,children:r})};exports.AnimationVariant=void 0,(exports.AnimationVariant||(exports.AnimationVariant={})).SHAKE="SHAKE";exports.Animate=e=>{var{variant:a}=e,i=r.__rest(e,["variant"]);return a===exports.AnimationVariant.SHAKE?t.jsx(s,Object.assign({},i)):t.jsx(t.Fragment,{children:i.children})};
|
|
2
30
|
//# sourceMappingURL=ct-design-animate.browser.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-animate.browser.cjs.js","sources":["../packages/components/Animate/src/
|
|
1
|
+
{"version":3,"file":"ct-design-animate.browser.cjs.js","sources":["../packages/components/Animate/src/style.ts","../packages/components/Animate/src/components/Shake.tsx","../packages/components/Animate/src/type.ts","../packages/components/Animate/src/Animate.tsx"],"sourcesContent":[null,null,null,null],"names":["shakeKeyFrame","keyframes","shakeClassName","css","Shake","children","styleConfig","root","rootClassName","useWebMergeStyles","_jsx","className","AnimationVariant","_a","variant","props","__rest","SHAKE","Object","assign","_Fragment"],"mappings":"6IAEO,MAAMA,EAAgBC,EAASA,SAAA;;;;;;;;;;;;;;;;;;;;;ECKhCC,EAAiBC,EAAGA,GAAA;;;eAGXH;;;;EAMTI,EAAuC,EAAGC,WAAUC,kBACxD,MAAMC,KAAEA,EAAO,IAAOD,QAAAA,EAAe,GAE/BE,EAAgBC,oBAAkB,IAAIF,EAAML,GAAiB,CAACK,EAAML,IAC1E,OAAOQ,EAAAA,WAAKC,UAAWH,EAAgBH,SAAAA,KChB7BO,QAEXA,sBAAA,GAFWA,QAAgBA,mBAAhBA,yBAEX,CAAA,IADC,MAAA,wBCFuCC,IAAA,IAAAC,QAAEA,GAAmBD,EAAPE,EAAKC,EAAAA,OAAAH,EAAnB,aACvC,OAAQC,IACDF,QAAgBA,iBAACK,MACbP,EAAAA,IAACN,EAAUc,OAAAC,OAAA,CAAA,EAAAJ,IAEXL,EAAAA,IAAGU,EAAAA,SAAA,CAAAf,SAAAU,EAAMV"}
|
|
@@ -1,2 +1,30 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{__rest as t}from"tslib";import{jsx as r,Fragment as n}from"react/jsx-runtime";import{keyframes as a,css as i}from"@emotion/css";import{useWebMergeStyles as e}from"@cleartrip/ct-design-style-manager";const o=i`
|
|
2
|
+
animation-duration: 1s;
|
|
3
|
+
animation-fill-mode: both;
|
|
4
|
+
animation: ${a`
|
|
5
|
+
10%,
|
|
6
|
+
90% {
|
|
7
|
+
transform: translate3d(-1px, 0, 0);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
20%,
|
|
11
|
+
80% {
|
|
12
|
+
transform: translate3d(2px, 0, 0);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
30%,
|
|
16
|
+
50%,
|
|
17
|
+
70% {
|
|
18
|
+
transform: translate3d(-4px, 0, 0);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
40%,
|
|
22
|
+
60% {
|
|
23
|
+
transform: translate3d(4px, 0, 0);
|
|
24
|
+
}
|
|
25
|
+
`} 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
|
26
|
+
transform: translate3d(0, 0, 0);
|
|
27
|
+
backface-visibility: hidden;
|
|
28
|
+
perspective: 1000px;
|
|
29
|
+
`,s=({children:t,styleConfig:n})=>{const{root:a=[]}=null!=n?n:{},i=e([...a,o],[a,o]);return r("div",{className:i,children:t})};var m;!function(t){t.SHAKE="SHAKE"}(m||(m={}));const c=a=>{var{variant:i}=a,e=t(a,["variant"]);return i===m.SHAKE?r(s,Object.assign({},e)):r(n,{children:e.children})};export{c as Animate,m as AnimationVariant};
|
|
2
30
|
//# sourceMappingURL=ct-design-animate.browser.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-animate.browser.esm.js","sources":["../packages/components/Animate/src/
|
|
1
|
+
{"version":3,"file":"ct-design-animate.browser.esm.js","sources":["../packages/components/Animate/src/style.ts","../packages/components/Animate/src/components/Shake.tsx","../packages/components/Animate/src/type.ts","../packages/components/Animate/src/Animate.tsx"],"sourcesContent":[null,null,null,null],"names":["shakeClassName","css","keyframes","Shake","children","styleConfig","root","rootClassName","useWebMergeStyles","_jsx","className","AnimationVariant","Animate","_a","variant","props","__rest","SHAKE","Object","assign","_Fragment"],"mappings":"8MAEO,MCKDA,EAAiBC,CAAG;;;eDLGC,CAAS;;;;;;;;;;;;;;;;;;;;;;;;;ECchCC,EAAuC,EAAGC,WAAUC,kBACxD,MAAMC,KAAEA,EAAO,IAAOD,QAAAA,EAAe,GAE/BE,EAAgBC,EAAkB,IAAIF,EAAMN,GAAiB,CAACM,EAAMN,IAC1E,OAAOS,SAAKC,UAAWH,EAAgBH,SAAAA,SChB7BO,GAAZ,SAAYA,GACVA,EAAA,MAAA,OACD,CAFD,CAAYA,IAAAA,EAEX,CAAA,ICHD,MAAMC,EAAmCC,IAAA,IAAAC,QAAEA,GAAmBD,EAAPE,EAAKC,EAAAH,EAAnB,aACvC,OAAQC,IACDH,EAAiBM,MACbR,EAACN,EAAUe,OAAAC,OAAA,CAAA,EAAAJ,IAEXN,EAAGW,EAAA,CAAAhB,SAAAW,EAAMX"}
|
|
@@ -2,44 +2,56 @@
|
|
|
2
2
|
|
|
3
3
|
var tslib = require('tslib');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var
|
|
6
|
-
var
|
|
5
|
+
var css = require('@emotion/css');
|
|
6
|
+
var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const shakeKeyFrame = css.keyframes `
|
|
9
|
+
10%,
|
|
10
|
+
90% {
|
|
11
|
+
transform: translate3d(-1px, 0, 0);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
20%,
|
|
15
|
+
80% {
|
|
16
|
+
transform: translate3d(2px, 0, 0);
|
|
17
|
+
}
|
|
9
18
|
|
|
10
|
-
|
|
19
|
+
30%,
|
|
20
|
+
50%,
|
|
21
|
+
70% {
|
|
22
|
+
transform: translate3d(-4px, 0, 0);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
40%,
|
|
26
|
+
60% {
|
|
27
|
+
transform: translate3d(4px, 0, 0);
|
|
28
|
+
}
|
|
29
|
+
`;
|
|
30
|
+
|
|
31
|
+
const shakeClassName = css.css `
|
|
32
|
+
animation-duration: 1s;
|
|
33
|
+
animation-fill-mode: both;
|
|
34
|
+
animation: ${shakeKeyFrame} 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
|
35
|
+
transform: translate3d(0, 0, 0);
|
|
36
|
+
backface-visibility: hidden;
|
|
37
|
+
perspective: 1000px;
|
|
38
|
+
`;
|
|
39
|
+
const Shake = ({ children, styleConfig }) => {
|
|
40
|
+
const { root = [] } = styleConfig !== null && styleConfig !== void 0 ? styleConfig : {};
|
|
41
|
+
const rootClassName = ctDesignStyleManager.useWebMergeStyles([...root, shakeClassName], [root, shakeClassName]);
|
|
42
|
+
return jsxRuntime.jsx("div", { className: rootClassName, children: children });
|
|
43
|
+
};
|
|
11
44
|
|
|
12
45
|
exports.AnimationVariant = void 0;
|
|
13
46
|
(function (AnimationVariant) {
|
|
14
47
|
AnimationVariant["SHAKE"] = "SHAKE";
|
|
15
48
|
})(exports.AnimationVariant || (exports.AnimationVariant = {}));
|
|
16
49
|
|
|
17
|
-
|
|
18
|
-
var
|
|
19
|
-
switch (variant) {
|
|
20
|
-
case exports.AnimationVariant.SHAKE: {
|
|
21
|
-
return react.css(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n animation: ", " 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n perspective: 1000px;\n "], ["\n animation: ", " 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n perspective: 1000px;\n "])), shakeKeyFrame);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
var StyledAnimation = styled__default.default.div(function (_a) {
|
|
26
|
-
var variant = _a.variant, _b = _a.show, show = _b === void 0 ? false : _b, _c = _a.css, styleCss = _c === void 0 ? {} : _c;
|
|
27
|
-
var Animation = show ? getAnimationPropsFromVariant(variant) : '';
|
|
28
|
-
return react.css(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n animation-duration: 1s;\n animation-fill-mode: both;\n ", "\n ", ";\n "], ["\n animation-duration: 1s;\n animation-fill-mode: both;\n ", "\n ", ";\n "])), Animation, styleCss);
|
|
29
|
-
});
|
|
30
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
31
|
-
|
|
32
|
-
var Shake = function (_a) {
|
|
33
|
-
var children = _a.children, animate = _a.animate, styleConfig = _a.styleConfig;
|
|
34
|
-
var _b = (styleConfig !== null && styleConfig !== void 0 ? styleConfig : {}).root, root = _b === void 0 ? {} : _b;
|
|
35
|
-
return (jsxRuntime.jsx(StyledAnimation, tslib.__assign({ css: root === null || root === void 0 ? void 0 : root.css, variant: exports.AnimationVariant.SHAKE, show: animate }, { children: children })));
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
var Animate = function (_a) {
|
|
39
|
-
var variant = _a.variant, props = tslib.__rest(_a, ["variant"]);
|
|
50
|
+
const Animate = (_a) => {
|
|
51
|
+
var { variant } = _a, props = tslib.__rest(_a, ["variant"]);
|
|
40
52
|
switch (variant) {
|
|
41
53
|
case exports.AnimationVariant.SHAKE:
|
|
42
|
-
return jsxRuntime.jsx(Shake,
|
|
54
|
+
return jsxRuntime.jsx(Shake, Object.assign({}, props));
|
|
43
55
|
default:
|
|
44
56
|
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
|
|
45
57
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-animate.cjs.js","sources":["../packages/components/Animate/src/
|
|
1
|
+
{"version":3,"file":"ct-design-animate.cjs.js","sources":["../packages/components/Animate/src/style.ts","../packages/components/Animate/src/components/Shake.tsx","../packages/components/Animate/src/type.ts","../packages/components/Animate/src/Animate.tsx"],"sourcesContent":[null,null,null,null],"names":["keyframes","css","useWebMergeStyles","_jsx","AnimationVariant","__rest","_Fragment"],"mappings":";;;;;;;AAEO,MAAM,aAAa,GAAGA,aAAS,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBrC;;AChBD,MAAM,cAAc,GAAGC,OAAG,CAAA,CAAA;;;eAGX,aAAa,CAAA;;;;CAI3B,CAAC;AAEF,MAAM,KAAK,GAAkC,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAI;AACzE,IAAA,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,KAAA,CAAA,GAAX,WAAW,GAAI,EAAE,CAAC;AAExC,IAAA,MAAM,aAAa,GAAGC,sCAAiB,CAAC,CAAC,GAAG,IAAI,EAAE,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC;AAC3F,IAAA,OAAOC,wBAAK,SAAS,EAAE,aAAa,EAAG,QAAA,EAAA,QAAQ,GAAO,CAAC;AACzD,CAAC;;ACjBWC,kCAEX;AAFD,CAAA,UAAY,gBAAgB,EAAA;AAC1B,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAFWA,wBAAgB,KAAhBA,wBAAgB,GAE3B,EAAA,CAAA,CAAA;;ACHD,MAAM,OAAO,GAA2B,CAAC,EAAqB,KAAI;AAAzB,IAAA,IAAA,EAAE,OAAO,EAAY,GAAA,EAAA,EAAP,KAAK,GAAAC,YAAA,CAAA,EAAA,EAAnB,WAAqB,CAAF,CAAA;IAC1D,QAAQ,OAAO;QACb,KAAKD,wBAAgB,CAAC,KAAK;AACzB,YAAA,OAAOD,cAAC,CAAA,KAAK,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,EAAI,CAAC;AAC9B,QAAA;AACE,YAAA,OAAOA,cAAG,CAAAG,mBAAA,EAAA,EAAA,QAAA,EAAA,KAAK,CAAC,QAAQ,GAAI,CAAC;KAChC;AACH;;;;"}
|
|
@@ -1,39 +1,55 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
2
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
3
|
+
import { keyframes, css } from '@emotion/css';
|
|
4
|
+
import { useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
|
|
5
|
+
|
|
6
|
+
const shakeKeyFrame = keyframes `
|
|
7
|
+
10%,
|
|
8
|
+
90% {
|
|
9
|
+
transform: translate3d(-1px, 0, 0);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
20%,
|
|
13
|
+
80% {
|
|
14
|
+
transform: translate3d(2px, 0, 0);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
30%,
|
|
18
|
+
50%,
|
|
19
|
+
70% {
|
|
20
|
+
transform: translate3d(-4px, 0, 0);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
40%,
|
|
24
|
+
60% {
|
|
25
|
+
transform: translate3d(4px, 0, 0);
|
|
26
|
+
}
|
|
27
|
+
`;
|
|
28
|
+
|
|
29
|
+
const shakeClassName = css `
|
|
30
|
+
animation-duration: 1s;
|
|
31
|
+
animation-fill-mode: both;
|
|
32
|
+
animation: ${shakeKeyFrame} 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
|
33
|
+
transform: translate3d(0, 0, 0);
|
|
34
|
+
backface-visibility: hidden;
|
|
35
|
+
perspective: 1000px;
|
|
36
|
+
`;
|
|
37
|
+
const Shake = ({ children, styleConfig }) => {
|
|
38
|
+
const { root = [] } = styleConfig !== null && styleConfig !== void 0 ? styleConfig : {};
|
|
39
|
+
const rootClassName = useWebMergeStyles([...root, shakeClassName], [root, shakeClassName]);
|
|
40
|
+
return jsx("div", { className: rootClassName, children: children });
|
|
41
|
+
};
|
|
5
42
|
|
|
6
43
|
var AnimationVariant;
|
|
7
44
|
(function (AnimationVariant) {
|
|
8
45
|
AnimationVariant["SHAKE"] = "SHAKE";
|
|
9
46
|
})(AnimationVariant || (AnimationVariant = {}));
|
|
10
47
|
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
switch (variant) {
|
|
14
|
-
case AnimationVariant.SHAKE: {
|
|
15
|
-
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n animation: ", " 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n perspective: 1000px;\n "], ["\n animation: ", " 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n transform: translate3d(0, 0, 0);\n backface-visibility: hidden;\n perspective: 1000px;\n "])), shakeKeyFrame);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
var StyledAnimation = styled.div(function (_a) {
|
|
20
|
-
var variant = _a.variant, _b = _a.show, show = _b === void 0 ? false : _b, _c = _a.css, styleCss = _c === void 0 ? {} : _c;
|
|
21
|
-
var Animation = show ? getAnimationPropsFromVariant(variant) : '';
|
|
22
|
-
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n animation-duration: 1s;\n animation-fill-mode: both;\n ", "\n ", ";\n "], ["\n animation-duration: 1s;\n animation-fill-mode: both;\n ", "\n ", ";\n "])), Animation, styleCss);
|
|
23
|
-
});
|
|
24
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
25
|
-
|
|
26
|
-
var Shake = function (_a) {
|
|
27
|
-
var children = _a.children, animate = _a.animate, styleConfig = _a.styleConfig;
|
|
28
|
-
var _b = (styleConfig !== null && styleConfig !== void 0 ? styleConfig : {}).root, root = _b === void 0 ? {} : _b;
|
|
29
|
-
return (jsx(StyledAnimation, __assign({ css: root === null || root === void 0 ? void 0 : root.css, variant: AnimationVariant.SHAKE, show: animate }, { children: children })));
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
var Animate = function (_a) {
|
|
33
|
-
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
48
|
+
const Animate = (_a) => {
|
|
49
|
+
var { variant } = _a, props = __rest(_a, ["variant"]);
|
|
34
50
|
switch (variant) {
|
|
35
51
|
case AnimationVariant.SHAKE:
|
|
36
|
-
return jsx(Shake,
|
|
52
|
+
return jsx(Shake, Object.assign({}, props));
|
|
37
53
|
default:
|
|
38
54
|
return jsx(Fragment, { children: props.children });
|
|
39
55
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-animate.esm.js","sources":["../packages/components/Animate/src/
|
|
1
|
+
{"version":3,"file":"ct-design-animate.esm.js","sources":["../packages/components/Animate/src/style.ts","../packages/components/Animate/src/components/Shake.tsx","../packages/components/Animate/src/type.ts","../packages/components/Animate/src/Animate.tsx"],"sourcesContent":[null,null,null,null],"names":["_jsx","_Fragment"],"mappings":";;;;;AAEO,MAAM,aAAa,GAAG,SAAS,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBrC;;AChBD,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;eAGX,aAAa,CAAA;;;;CAI3B,CAAC;AAEF,MAAM,KAAK,GAAkC,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAI;AACzE,IAAA,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,KAAA,CAAA,GAAX,WAAW,GAAI,EAAE,CAAC;AAExC,IAAA,MAAM,aAAa,GAAG,iBAAiB,CAAC,CAAC,GAAG,IAAI,EAAE,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC;AAC3F,IAAA,OAAOA,aAAK,SAAS,EAAE,aAAa,EAAG,QAAA,EAAA,QAAQ,GAAO,CAAC;AACzD,CAAC;;ICjBW,iBAEX;AAFD,CAAA,UAAY,gBAAgB,EAAA;AAC1B,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAFW,gBAAgB,KAAhB,gBAAgB,GAE3B,EAAA,CAAA,CAAA;;ACHD,MAAM,OAAO,GAA2B,CAAC,EAAqB,KAAI;AAAzB,IAAA,IAAA,EAAE,OAAO,EAAY,GAAA,EAAA,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAnB,WAAqB,CAAF,CAAA;IAC1D,QAAQ,OAAO;QACb,KAAK,gBAAgB,CAAC,KAAK;AACzB,YAAA,OAAOA,GAAC,CAAA,KAAK,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,EAAI,CAAC;AAC9B,QAAA;AACE,YAAA,OAAOA,GAAG,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,KAAK,CAAC,QAAQ,GAAI,CAAC;KAChC;AACH;;;;"}
|