Theme: apply theme styles on time comp

raheeliftikhar5 · raheeliftikhar5 · commit 736ad0380a99 · 2024-07-03T14:22:19.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -88,7 +88,7 @@ const commonChildren = {
   suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),
   ...validationChildren,
   viewRef: RefControl<CommonPickerMethods>,
-  inputFieldStyle: withDefault(styleControl(DateTimeStyle, 'inputFieldStyle'), defaultStyle),
+  inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'),
 };
 type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
 
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
@@ -25,7 +25,7 @@ import {
 } from "../../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import { DateTimeStyle, DateTimeStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import {
   disabledPropertyView,
@@ -76,7 +76,13 @@ const commonChildren = {
   hourStep: RangeControl.closed(1, 24, 1),
   minuteStep: RangeControl.closed(1, 60, 1),
   secondStep: RangeControl.closed(1, 60, 1),
-  style: styleControl(DateTimeStyle, 'style'),
+  style: styleControl(InputFieldStyle, 'style'),
+  animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+  labelStyle: styleControl(
+    LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false),
+    'labelStyle',
+  ),
+  inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'),
   suffixIcon: withDefault(IconControl, "/icon:regular/clock"),
   viewRef: RefControl<CommonPickerMethods>,
   ...validationChildren,
@@ -144,7 +150,7 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props, dispatch
   const compType = useContext(CompTypeContext);
   const compTheme = theme?.theme?.components?.[compType];
   const styleProps: Record<string, any> = {};
-  ['style'].forEach((key: string) => {
+  ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
     styleProps[key] = (props as any)[key];
   });
 
@@ -164,10 +170,13 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props, dispatch
   return props.label({
     required: props.required,
     style: props.style,
+    labelStyle: props.labelStyle,
+    inputFieldStyle:props.inputFieldStyle,
+    animationStyle:props.animationStyle,
     children: (
       <TimeUIView
         viewRef={props.viewRef}
-        $style={props.style}
+        $style={props.inputFieldStyle}
         disabled={props.disabled}
         value={time?.isValid() ? time : null}
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
@@ -234,9 +243,20 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props, dispatch
       )}
 
       {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-        <Section name={sectionNames.style}>
-          {children.style.getPropertyView()}
-        </Section>
+        <>
+          <Section name={sectionNames.style}>
+            {children.style.getPropertyView()}
+          </Section>
+          <Section name={sectionNames.labelStyle}>
+            {children.labelStyle.getPropertyView()}
+          </Section>
+          <Section name={sectionNames.inputFieldStyle}>
+            {children.inputFieldStyle.getPropertyView()}
+          </Section>
+          <Section name={sectionNames.animationStyle} hasTooltip={true}>
+            {children.animationStyle.getPropertyView()}
+          </Section>
+        </>
       )}
     </>
   ))
@@ -255,7 +275,7 @@ export const timeRangeControl = (function () {
     const compType = useContext(CompTypeContext);
     const compTheme = theme?.theme?.components?.[compType];
     const styleProps: Record<string, any> = {};
-    ['style'].forEach((key: string) => {
+    ['style', 'labelStyle', 'inputFieldStyle', 'animationStyle'].forEach((key: string) => {
       styleProps[key] = (props as any)[key];
     });
 
@@ -280,7 +300,7 @@ export const timeRangeControl = (function () {
     const children = (
       <TimeRangeUIView
         viewRef={props.viewRef}
-        $style={props.style}
+        $style={props.inputFieldStyle}
         disabled={props.disabled}
         start={start?.isValid() ? start : null}
         end={end?.isValid() ? end : null}
@@ -307,6 +327,9 @@ export const timeRangeControl = (function () {
     return props.label({
       required: props.required,
       style: props.style,
+      labelStyle: props.labelStyle,
+      inputFieldStyle:props.inputFieldStyle,
+      animationStyle:props.animationStyle,
       children: children,
       ...(startResult.validateStatus !== "success"
         ? startResult
@@ -359,9 +382,20 @@ export const timeRangeControl = (function () {
         )}
 
         {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-          <Section name={sectionNames.style}>
-            {children.style.getPropertyView()}
-          </Section>
+          <>
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.labelStyle}>
+              {children.labelStyle.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.inputFieldStyle}>
+              {children.inputFieldStyle.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.animationStyle} hasTooltip={true}>
+              {children.animationStyle.getPropertyView()}
+            </Section>
+          </>
         )}
       </>
     ))
diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts
@@ -55,17 +55,6 @@ const rating = {
   }
 }
 
-const time = {
-  style: {
-    background: 'transparent',
-    borderWidth:'1px'
-  },
-  inputFieldStyle: {
-    borderStyle: 'solid',
-    borderWidth: '1px',
-  },
-};
-
 const segmentedControl = {
   style: {
     borderWidth: '0px',
@@ -110,8 +99,8 @@ export const defaultTheme: ThemeDetail = {
     radio: input,
     date: input,
     dateRange: input,
-    time,
-    timeRange: time,
+    time: input,
+    timeRange: input,
     slider: input,
     rangeSlider: input,
     segmentedControl,
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -44,7 +44,7 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 import { Card, Collapse, CollapseProps, Divider, Flex, List, Tooltip } from 'antd';
 
 import { ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel";
-import { JSONObject } from "@lowcoder-ee/index.sdk";
+import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
 
 const ThemeSettingsView = styled.div`
   font-size: 14px;
