Merge pull request #294 from mousheng/Fix_And_Improve_JsonLottie

Fix_Optimize_JSON_Lottie_Component

Author: FalkWolsky

client/packages/lowcoder/src/assets/icons/icon-lottie.svg renamed to client/packages/lowcoder-design/src/icons/icon-lottie.svg

@@ -285,5 +285,6 @@ export { ReactComponent as TableCheckedIcon } from "icons/icon-table-checked.svg
 export { ReactComponent as TableUnCheckedIcon } from "icons/icon-table-boolean-false.svg";
 export { ReactComponent as FileFolderIcon } from "icons/icon-editor-folder.svg";
 export { ReactComponent as ExpandIcon } from "icons/icon-expand.svg";
-export { ReactComponent as CompressIcon } from "icons/icon-compress.svg"
-export { ReactComponent as TableCellsIcon } from "icons/icon-table-cells.svg" // Added By Aqib Mirza
+export { ReactComponent as CompressIcon } from "icons/icon-compress.svg";
+export { ReactComponent as TableCellsIcon } from "icons/icon-table-cells.svg"; // Added By Aqib Mirza
+export { ReactComponent as LottieIcon } from "icons/icon-lottie.svg";

client/packages/lowcoder-design/src/icons/index.ts

@@ -10,6 +10,4 @@ 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 };

client/packages/lowcoder/src/assets/icons/index.ts

@@ -5,6 +5,7 @@ import {
   NumberControl,
 } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
+import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
 import { LottieStyle } from "comps/controls/styleControlConstants";
 import { trans } from "i18n";
@@ -22,27 +23,35 @@ import { defaultLottie } from "./jsonConstants";
  */
 const animationStartOptions = [
   {
-    label: "Auto",
+    label: trans("jsonLottie.auto"),
     value: "auto",
   },
   {
-    label: "On Hover",
+    label: trans("jsonLottie.onHover"),
     value: "on hover",
   },
 ] as const;
 
 const loopOptions = [
   {
-    label: "Single play",
+    label: trans("jsonLottie.singlePlay"),
     value: "single",
   },
   {
-    label: "Endless loop",
+    label: trans("jsonLottie.endlessLoop"),
     value: "endless",
   },
 ] as const;
 
 const speedOptions = [
+  {
+    label: "0.5x",
+    value: "0.5",
+  },
+  {
+    label: "0.75x",
+    value: "0.75",
+  },
   {
     label: "1x",
     value: "1",
@@ -81,8 +90,8 @@ let JsonLottieTmpComp = (function () {
     backgroundColor: styleControl(LottieStyle),
     animationStart: dropdownControl(animationStartOptions, "auto"),
     loop: dropdownControl(loopOptions, "single"),
+    keepLastFrame: BoolControl.DEFAULT_TRUE,
   };
-
   return new UICompBuilder(childrenMap, (props) => {
     return (
       <div
@@ -95,8 +104,9 @@ let JsonLottieTmpComp = (function () {
       >
         <Player
           key={
-            [props.speed, props.animationStart, props.loop, props.value] as any
+            [props.speed, props.animationStart, props.loop, props.value, props.keepLastFrame] as any
           }
+          keepLastFrame={props.keepLastFrame}
           autoplay={props.animationStart === "auto" && true}
           hover={props.animationStart === "on hover" && true}
           loop={props.loop === "single" ? false : true}
@@ -117,7 +127,7 @@ let JsonLottieTmpComp = (function () {
         <>
           <Section name={sectionNames.basic}>
             {children.value.propertyView({
-              label: trans("lottieJson"),
+              label: trans("jsonLottie.lottieJson"),
             })}
             {children.speed.propertyView({
               label: trans("jsonLottie.speed"),
@@ -128,6 +138,9 @@ let JsonLottieTmpComp = (function () {
             {children.animationStart.propertyView({
               label: trans("jsonLottie.animationStart"),
             })}
+            {children.keepLastFrame.propertyView({
+              label: trans("jsonLottie.keepLastFrame"),
+            })}
           </Section>
           <Section name={sectionNames.style}>
             {children.backgroundColor.getPropertyView()}

client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx

@@ -875,18 +875,15 @@ export const LottieStyle = [
     name: "background",
     label: trans("style.background"),
     depTheme: "canvas",
-    depType: DEP_TYPE.CONTRAST_TEXT,
-    transformer: contrastText,
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
   },
-  MARGIN,	
-  PADDING,
 ] as const;
 /////////////////////
 
 export const CarouselStyle = [getBackground("canvas")] as const;
 
 export const RichTextEditorStyle = [getStaticBorder(), RADIUS] as const;
-
 export type InputLikeStyleType = StyleConfigType<typeof InputLikeStyle>;
 export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
 export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -91,6 +91,7 @@ import {
   TreeSelectIcon,
   UploadCompIcon,
   VideoCompIcon,
+  LottieIcon,
 } from "lowcoder-design";
 
 import { defaultFormData, FormComp } from "./comps/formComp/formComp";
@@ -119,7 +120,6 @@ 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;

client/packages/lowcoder/src/comps/index.tsx

@@ -44,7 +44,6 @@ export const en = {
   accessControl: " Access Control",
   copySuccess: "Copied",
   copyError: "Copy error",
-  lottieJson: "Lottie JSON", //Added By Aqib Mirza
   api: {
     publishSuccess: "Published",
     recoverFailed: "Recover failed",
@@ -2423,13 +2422,19 @@ export const en = {
   },
   //Added By Aqib Mirza
   jsonLottie: {
+    lottieJson: "Lottie JSON",
     speed: "Speed",
     width: "Width",
     height: "Height",
     backgroundColor: "Background color",
     animationStart: "Animation Start",
     valueDesc: "Current json Data",
     loop: "Loop",
+    auto: 'auto',
+    onHover: "On hover",
+    singlePlay: "Single Play",
+    endlessLoop: "Endless Loop",
+    keepLastFrame: "Keep Last Frame",
   },
   /////////////////////
 };

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2412,5 +2412,20 @@ idSource: {
     slotControl: {
     configSlotView: "配置槽视图",
     },
+    jsonLottie: {
+        lottieJson: "JSON数据",
+        speed: "播放速度",
+        width: "宽度",
+        height: "高度",
+        backgroundColor: "背景颜色",
+        animationStart: "播放方式",
+        valueDesc: "JSON数据",
+        loop: "循环方式",
+        auto: "自动",
+        onHover: "鼠标悬停时",
+        singlePlay: "播放一次",
+        endlessLoop: "循环播放",
+        keepLastFrame: "冻结最后一帧",
+      },
 };