From 11619ae2586ad0460f49c20da5c2137c6c22507c Mon Sep 17 00:00:00 2001 From: Aqib Mirza Date: Fri, 7 Jul 2023 18:12:02 +0530 Subject: [PATCH] feat: lottie animation component --- client/package.json | 1 + .../lowcoder/src/assets/icons/icon-lottie.svg | 132 ++++++++ .../lowcoder/src/assets/icons/index.ts | 2 + .../comps/comps/jsonComp/jsonConstants.tsx | 292 ++++++++++++++++++ .../comps/comps/jsonComp/jsonLottieComp.tsx | 151 +++++++++ .../comps/controls/styleControlConstants.tsx | 12 + client/packages/lowcoder/src/comps/index.tsx | 18 ++ .../lowcoder/src/comps/uiCompRegistry.ts | 3 +- .../packages/lowcoder/src/i18n/locales/en.ts | 17 + .../src/pages/editor/editorConstants.tsx | 1 + client/yarn.lock | 19 ++ 11 files changed, 647 insertions(+), 1 deletion(-) create mode 100644 client/packages/lowcoder/src/assets/icons/icon-lottie.svg create mode 100644 client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx diff --git a/client/package.json b/client/package.json index 9f81a4fb9..829ffdd41 100644 --- a/client/package.json +++ b/client/package.json @@ -73,6 +73,7 @@ "eslint-plugin-only-ascii@^0.0.0": "patch:eslint-plugin-only-ascii@npm%3A0.0.0#./.yarn/patches/eslint-plugin-only-ascii-npm-0.0.0-29e3417685.patch" }, "dependencies": { + "@lottiefiles/react-lottie-player": "^3.5.3", "antd-mobile": "^5.28.0", "chalk": "4", "number-precision": "^1.6.0", diff --git a/client/packages/lowcoder/src/assets/icons/icon-lottie.svg b/client/packages/lowcoder/src/assets/icons/icon-lottie.svg new file mode 100644 index 000000000..90ca02dbd --- /dev/null +++ b/client/packages/lowcoder/src/assets/icons/icon-lottie.svg @@ -0,0 +1,132 @@ + + + + + + + + + + + diff --git a/client/packages/lowcoder/src/assets/icons/index.ts b/client/packages/lowcoder/src/assets/icons/index.ts index 409292ab7..df7c3d2bb 100644 --- a/client/packages/lowcoder/src/assets/icons/index.ts +++ b/client/packages/lowcoder/src/assets/icons/index.ts @@ -10,4 +10,6 @@ export { ReactComponent as DocIcon } from "./view-doc.svg"; export { ReactComponent as TutorialIcon } from "./tutorial.svg"; export { ReactComponent as ShortcutIcon } from "./icon-help-shortcut.svg"; +export { ReactComponent as LottieIcon } from "./icon-lottie.svg"; //Added By Aqib Mirza + export { GoogleLoginIcon, GithubLoginIcon, GeneralLoginIcon, EmailLoginIcon }; diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonConstants.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonConstants.tsx index 48c56d8ee..587c67840 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonConstants.tsx @@ -26,3 +26,295 @@ export const theme = { base0E: "#b10dc9", base0F: "#85144b", }; + +export const defaultLottie = { + v: "5.8.1", + fr: 30, + ip: 0, + op: 43, + w: 1000, + h: 800, + nm: "Social_Media_82 1", + ddd: 0, + assets: [], + layers: [ + { + ddd: 0, + ind: 1, + ty: 4, + nm: "Shape 02", + td: 1, + sr: 1, + ks: { + o: { a: 0, k: 100, ix: 11 }, + r: { a: 0, k: 0, ix: 10 }, + p: { a: 0, k: [500, 396.73, 0], ix: 2, l: 2 }, + a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, + s: { + a: 1, + k: [ + { + i: { x: [0.833, 0.833, 0.833], y: [0.833, 0.833, 0.833] }, + o: { x: [0.167, 0.167, 0.167], y: [0.167, 0.167, 0.167] }, + t: 0, + s: [0, 0, 100], + }, + { t: 3, s: [111.765, 111.765, 100] }, + ], + ix: 6, + l: 2, + }, + }, + ao: 0, + shapes: [ + { + ty: "sr", + sy: 1, + d: 1, + pt: { a: 0, k: 5, ix: 3 }, + p: { a: 0, k: [0, 0], ix: 4 }, + r: { a: 0, k: 0, ix: 5 }, + ir: { + a: 1, + k: [ + { + i: { x: [0.833], y: [0.833] }, + o: { x: [0.167], y: [0.167] }, + t: 3, + s: [37], + }, + { t: 6, s: [100] }, + ], + ix: 6, + }, + is: { a: 0, k: 0, ix: 8 }, + or: { a: 0, k: 212, ix: 7 }, + os: { a: 0, k: 0, ix: 9 }, + ix: 1, + nm: "Polystar Path 1", + mn: "ADBE Vector Shape - Star", + hd: false, + }, + { + ty: "fl", + c: { a: 0, k: [1, 0.082352941176, 0.622145469516, 1], ix: 4 }, + o: { a: 0, k: 100, ix: 5 }, + r: 1, + bm: 0, + nm: "Fill 1", + mn: "ADBE Vector Graphic - Fill", + hd: false, + }, + ], + ip: 0, + op: 43, + st: 0, + bm: 0, + }, + { + ddd: 0, + ind: 2, + ty: 4, + nm: "Reflection", + tt: 1, + sr: 1, + ks: { + o: { a: 0, k: 70, ix: 11 }, + r: { a: 0, k: 0, ix: 10 }, + p: { + a: 1, + k: [ + { + i: { x: 0.68, y: 1 }, + o: { x: 0.24, y: 0 }, + t: -3, + s: [500, 400, 0], + to: [271.667, 0, 0], + ti: [-271.667, 0, 0], + }, + { t: 38, s: [2130, 400, 0] }, + ], + ix: 2, + l: 2, + }, + a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, + s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 }, + }, + ao: 0, + shapes: [ + { + ty: "gr", + it: [ + { + ind: 0, + ty: "sh", + ix: 1, + ks: { + a: 0, + k: { + i: [ + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + ], + v: [ + [-318, -506], + [-1366, 542], + ], + c: false, + }, + ix: 2, + }, + nm: "Path 1", + mn: "ADBE Vector Shape - Group", + hd: false, + }, + { + ty: "st", + c: { + a: 0, + k: [0.960784313725, 0.864126227884, 0.632987347771, 1], + ix: 3, + }, + o: { a: 0, k: 100, ix: 4 }, + w: { a: 0, k: 161, ix: 5 }, + lc: 1, + lj: 1, + ml: 4, + bm: 0, + nm: "Stroke 1", + mn: "ADBE Vector Graphic - Stroke", + hd: false, + }, + { + ty: "fl", + c: { a: 0, k: [1, 0.082352941176, 0.946020687328, 1], ix: 4 }, + o: { a: 0, k: 100, ix: 5 }, + r: 1, + bm: 0, + nm: "Fill 1", + mn: "ADBE Vector Graphic - Fill", + hd: false, + }, + { + ty: "tr", + p: { a: 0, k: [0, 0], ix: 2 }, + a: { a: 0, k: [0, 0], ix: 1 }, + s: { a: 0, k: [100, 100], ix: 3 }, + r: { a: 0, k: 0, ix: 6 }, + o: { a: 0, k: 100, ix: 7 }, + sk: { a: 0, k: 0, ix: 4 }, + sa: { a: 0, k: 0, ix: 5 }, + nm: "Transform", + }, + ], + nm: "Shape 1", + np: 3, + cix: 2, + bm: 0, + ix: 1, + mn: "ADBE Vector Group", + hd: false, + }, + ], + ip: 0, + op: 43, + st: -4, + bm: 0, + }, + { + ddd: 0, + ind: 3, + ty: 4, + nm: "Shape 01", + sr: 1, + ks: { + o: { a: 0, k: 100, ix: 11 }, + r: { a: 0, k: 0, ix: 10 }, + p: { a: 0, k: [500, 396.73, 0], ix: 2, l: 2 }, + a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, + s: { + a: 1, + k: [ + { + i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, + o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, + t: 0, + s: [0, 0, 100], + }, + { + i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, + o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, + t: 3, + s: [111.765, 111.765, 100], + }, + { + i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, + o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, + t: 6, + s: [111.765, 111.765, 100], + }, + { + i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, + o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, + t: 9, + s: [116, 116, 100], + }, + { t: 12, s: [111.765, 111.765, 100] }, + ], + ix: 6, + l: 2, + }, + }, + ao: 0, + shapes: [ + { + ty: "sr", + sy: 1, + d: 1, + pt: { a: 0, k: 5, ix: 3 }, + p: { a: 0, k: [0, 0], ix: 4 }, + r: { a: 0, k: 0, ix: 5 }, + ir: { + a: 1, + k: [ + { + i: { x: [0.833], y: [0.833] }, + o: { x: [0.167], y: [0.167] }, + t: 3, + s: [37], + }, + { t: 6, s: [100] }, + ], + ix: 6, + }, + is: { a: 0, k: 0, ix: 8 }, + or: { a: 0, k: 212, ix: 7 }, + os: { a: 0, k: 0, ix: 9 }, + ix: 1, + nm: "Polystar Path 1", + mn: "ADBE Vector Shape - Star", + hd: false, + }, + { + ty: "fl", + c: { a: 0, k: [1, 0.729411764706, 0.082352941176, 1], ix: 4 }, + o: { a: 0, k: 100, ix: 5 }, + r: 1, + bm: 0, + nm: "Fill 1", + mn: "ADBE Vector Graphic - Fill", + hd: false, + }, + ], + ip: 0, + op: 43, + st: 0, + bm: 0, + }, + ], + markers: [], +}; diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx new file mode 100644 index 000000000..7e03d89ba --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx @@ -0,0 +1,151 @@ +import { Player } from "@lottiefiles/react-lottie-player"; +import { hiddenPropertyView } from "@lowcoder-ee/index.sdk"; +import { + ArrayOrJSONObjectControl, + NumberControl, +} from "comps/controls/codeControl"; +import { dropdownControl } from "comps/controls/dropdownControl"; +import { styleControl } from "comps/controls/styleControl"; +import { LottieStyle } from "comps/controls/styleControlConstants"; +import { trans } from "i18n"; +import { Section, sectionNames } from "lowcoder-design"; +import { useEffect, useState } from "react"; +import { UICompBuilder, withDefault } from "../../generators"; +import { + NameConfig, + NameConfigHidden, + withExposingConfigs, +} from "../../generators/withExposing"; +import { defaultLottie } from "./jsonConstants"; +/** + * JsonLottie Comp + */ +const animationStartOptions = [ + { + label: "Auto", + value: "auto", + }, + { + label: "On Hover", + value: "on hover", + }, +] as const; + +const loopOptions = [ + { + label: "Single play", + value: "single", + }, + { + label: "Endless loop", + value: "endless", + }, +] as const; + +const speedOptions = [ + { + label: "1x", + value: "1", + }, + { + label: "1.5x", + value: "1.5", + }, + { + label: "2x", + value: "2", + }, + { + label: "2.5x", + value: "2.5", + }, + { + label: "5x", + value: "5", + }, + { + label: "10x", + value: "10", + }, +] as const; + +let JsonLottieTmpComp = (function () { + const childrenMap = { + value: withDefault( + ArrayOrJSONObjectControl, + JSON.stringify(defaultLottie, null, 2) + ), + speed: dropdownControl(speedOptions, "1"), + width: withDefault(NumberControl, 100), + height: withDefault(NumberControl, 100), + backgroundColor: styleControl(LottieStyle), + animationStart: dropdownControl(animationStartOptions, "auto"), + loop: dropdownControl(loopOptions, "single"), + }; + + return new UICompBuilder(childrenMap, (props) => { + return ( +
+ +
+ ); + }) + .setPropertyViewFn((children) => { + return ( + <> +
+ {children.value.propertyView({ + label: trans("lottieJson"), + })} + {children.speed.propertyView({ + label: trans("jsonLottie.speed"), + })} + {children.loop.propertyView({ + label: trans("jsonLottie.loop"), + })} + {children.animationStart.propertyView({ + label: trans("jsonLottie.animationStart"), + })} +
+
+ {children.backgroundColor.getPropertyView()} +
+
+ {hiddenPropertyView(children)} +
+ + ); + }) + .build(); +})(); +JsonLottieTmpComp = class extends JsonLottieTmpComp { + override autoHeight(): boolean { + return false; + } +}; +export const JsonLottieComp = withExposingConfigs(JsonLottieTmpComp, [ + new NameConfig("value", trans("jsonLottie.valueDesc")), + NameConfigHidden, +]); diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 6672b6938..da80a48a8 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -759,6 +759,18 @@ export const SignatureStyle = [ }, ] as const; +//Added by Aqib Mirza +export const LottieStyle = [ + { + name: "background", + label: trans("style.background"), + depTheme: "canvas", + depType: DEP_TYPE.CONTRAST_TEXT, + transformer: contrastText, + }, +] as const; +///////////////////// + export const CarouselStyle = [getBackground("canvas")] as const; export const RichTextEditorStyle = [getStaticBorder(), RADIUS] as const; diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx index c0d172d0d..5cdd37145 100644 --- a/client/packages/lowcoder/src/comps/index.tsx +++ b/client/packages/lowcoder/src/comps/index.tsx @@ -117,6 +117,10 @@ import { RemoteCompInfo } from "types/remoteComp"; import { ScannerComp } from "./comps/buttonComp/scannerComp"; import { SignatureComp } from "./comps/signatureComp"; +//Added by Aqib Mirza +import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp"; +import { LottieIcon } from "../assets/icons"; + type Registry = { [key in UICompType]?: UICompManifest; }; @@ -822,6 +826,20 @@ const uiCompMap: Registry = { h: 35, }, }, + //Added by Aqib Mirza + jsonLottie: { + name: trans("uiComp.jsonLottieCompName"), + enName: "Lottie Animation", + description: trans("uiComp.jsonLottieCompDesc"), + categories: ["dataDisplay"], + icon: LottieIcon, + keywords: trans("uiComp.jsonLottieCompKeywords"), + comp: JsonLottieComp, + layoutInfo: { + w: 10, + h: 47, + }, + }, }; export function loadComps() { diff --git a/client/packages/lowcoder/src/comps/uiCompRegistry.ts b/client/packages/lowcoder/src/comps/uiCompRegistry.ts index 60f68035f..a571f9748 100644 --- a/client/packages/lowcoder/src/comps/uiCompRegistry.ts +++ b/client/packages/lowcoder/src/comps/uiCompRegistry.ts @@ -109,7 +109,8 @@ export type UICompType = | "npmPlugin" | "collapsibleContainer" | "calendar" - | "signature"; + | "signature" + | "jsonLottie"; //Added By Aqib Mirza export const uiCompRegistry = {} as Record; diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 7829eb7d1..c997d0ff7 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -44,6 +44,7 @@ export const en = { accessControl: " Access Control", copySuccess: "Copied", copyError: "Copy error", + lottieJson: "Lottie JSON", //Added By Aqib Mirza api: { publishSuccess: "Published", recoverFailed: "Recover failed", @@ -818,6 +819,11 @@ export const en = { signatureCompName: "Signature", signatureCompDesc: "Signature component", signatureCompKeywords: "", + //Added By Aqib Mirza + jsonLottieCompName: "Lottie Animation", + jsonLottieCompDesc: "Lottie Animation", + jsonLottieCompKeywords: "", + ///////////////////// }, comp: { menuViewDocs: "View documentation", @@ -2395,4 +2401,15 @@ export const en = { slotControl: { configSlotView: "Configure slot view", }, + //Added By Aqib Mirza + jsonLottie: { + speed: "Speed", + width: "Width", + height: "Height", + backgroundColor: "Background color", + animationStart: "Animation Start", + valueDesc: "Current json Data", + loop: "Loop", + }, + ///////////////////// }; diff --git a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx index 2f9fabf2f..f3fa80ae9 100644 --- a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx +++ b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx @@ -100,4 +100,5 @@ export const CompStateIcon: { npmPlugin: , calendar: , signature: , + jsonLottie: , //Added By Aqib Mirza }; diff --git a/client/yarn.lock b/client/yarn.lock index a71a0f473..e69288ea7 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -2772,6 +2772,17 @@ __metadata: languageName: node linkType: hard +"@lottiefiles/react-lottie-player@npm:^3.5.3": + version: 3.5.3 + resolution: "@lottiefiles/react-lottie-player@npm:3.5.3" + dependencies: + lottie-web: ^5.10.2 + peerDependencies: + react: 16 - 18 + checksum: 083521730d8a75a70c82446df859d08d5e3614b937afa419249d047d9cbffb61fba24733e1a736593e734530d99aa715a38fcbbebbcca5a72ff4719145931da1 + languageName: node + linkType: hard + "@manaflair/redux-batch@npm:^1.0.0": version: 1.0.0 resolution: "@manaflair/redux-batch@npm:1.0.0" @@ -11236,6 +11247,13 @@ __metadata: languageName: node linkType: hard +"lottie-web@npm:^5.10.2": + version: 5.12.2 + resolution: "lottie-web@npm:5.12.2" + checksum: af5bc3bc405fd760de8b17a36158d5a8c3e8c586c711d0c63681ddf056b65bc6b54ea36b1fcad782fb02dbe12e696a40e0ba72daf41b8f10ab5b5d1113793636 + languageName: node + linkType: hard + "lowcoder-cli-template-typescript@workspace:packages/lowcoder-cli-template-typescript": version: 0.0.0-use.local resolution: "lowcoder-cli-template-typescript@workspace:packages/lowcoder-cli-template-typescript" @@ -16717,6 +16735,7 @@ __metadata: dependencies: "@babel/preset-env": ^7.20.2 "@babel/preset-typescript": ^7.18.6 + "@lottiefiles/react-lottie-player": ^3.5.3 "@rollup/plugin-typescript": ^8.5.0 "@testing-library/jest-dom": ^5.16.5 "@testing-library/react": ^12.0.0