added popup styles for date/time pickers

raheeliftikhar5 · raheeliftikhar5 · commit dfb4fec9785c · 2025-01-15T21:23:01.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
@@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import {  AnimationStyle, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
+import {  AnimationStyle, ChildrenMultiSelectStyle, ChildrenMultiSelectStyleType, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import {
   disabledPropertyView,
@@ -89,6 +89,7 @@ const commonChildren = {
   ...validationChildren,
   viewRef: RefControl<CommonPickerMethods>,
   inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'),
+  childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'),
   timeZone: dropdownControl(timeZoneOptions, Intl.DateTimeFormat().resolvedOptions().timeZone),
 };
 type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
@@ -171,6 +172,7 @@ export type DateCompViewProps = Pick<
   onFocus: () => void;
   onBlur: () => void;
   $style: DateTimeStyleType;
+  $childrenInputFieldStyle: ChildrenMultiSelectStyleType;
   disabledTime: () => ReturnType<typeof disabledTime>;
   suffixIcon: ReactNode;
   placeholder?: string | [string, string];
@@ -214,6 +216,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
         viewRef={props.viewRef}
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
         $style={props.inputFieldStyle}
+        $childrenInputFieldStyle={props.childrenInputFieldStyle}
         disabled={props.disabled}
         {...datePickerProps(props)}
         hourStep={props.hourStep}
@@ -307,6 +310,9 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
             <Section name={sectionNames.inputFieldStyle}>
               {children.inputFieldStyle.getPropertyView()}
             </Section>
+            <Section name={sectionNames.childrenInputFieldStyle}>
+              {children.childrenInputFieldStyle.getPropertyView()}
+            </Section>
             <Section name={sectionNames.animationStyle} hasTooltip={true}>
               {children.animationStyle.getPropertyView()}
             </Section>
@@ -400,6 +406,7 @@ let DateRangeTmpCmp = (function () {
         timeZone={props?.timeZone}
         viewRef={props.viewRef}
         $style={props.inputFieldStyle}
+        $childrenInputFieldStyle={props.childrenInputFieldStyle}
         disabled={props.disabled}
         {...datePickerProps(props)}
         start={tempStartValue?.isValid() ? tempStartValue : null}
@@ -515,6 +522,9 @@ let DateRangeTmpCmp = (function () {
               <Section name={sectionNames.inputFieldStyle}>
                 {children.inputFieldStyle.getPropertyView()}
               </Section>
+              <Section name={sectionNames.childrenInputFieldStyle}>
+                {children.childrenInputFieldStyle.getPropertyView()}
+              </Section>
             </>
           )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
@@ -1,9 +1,9 @@
 import dayjs from "dayjs";
 import { DateParser, TimeParser } from "util/dateTimeUtils";
 import { range } from "lodash";
-import { DateTimeStyleType } from "../../controls/styleControlConstants";
-import { css } from "styled-components";
-import { isDarkColor, lightenColor } from "components/colorSelect/colorUtils";
+import { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
+import styled, { css } from "styled-components";
+import { fadeColor, isDarkColor, lightenColor } from "components/colorSelect/colorUtils";
 // import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
 import { blurMethod, focusMethod } from "comps/utils/methodUtils";
 import { refMethods } from "comps/generators/withMethodExposing";
@@ -135,3 +135,45 @@ export const getMobileStyle = (style: DateTimeStyleType) =>
   `;
 
 export const dateRefMethods = refMethods<CommonPickerMethods>([focusMethod, blurMethod]);
+
+export const StyledPickerPanel = styled.div<{
+  $style: ChildrenMultiSelectStyleType
+}>`
+  background: ${props => props.$style?.background};
+  border: ${props => props.$style?.border};
+  border-style: ${props => props.$style?.borderStyle};
+  border-width: ${props => props.$style?.borderWidth};
+  border-radius: ${props => props.$style?.radius};
+  rotate: ${props => props.$style?.rotation};
+  margin: ${props => props.$style?.margin};
+  padding: ${props => props.$style?.padding};
+
+  .ant-picker-content th, .ant-picker-content td.ant-picker-cell {
+    font-size: ${props => props.$style?.textSize};
+    font-style: ${props => props.$style?.fontStyle};
+    font-family: ${props => props.$style?.fontFamily};
+    font-weight: ${props => props.$style?.textWeight};
+    text-transform: ${props => props.$style?.textTransform};
+    line-height: ${props => props.$style?.lineHeight};
+    color: ${props => props.$style?.text};
+    
+    .ant-picker-cell-inner {
+      text-decoration: ${props => props.$style?.textDecoration};
+    }
+  }
+
+  .ant-picker-content td.ant-picker-cell:not(.ant-picker-cell-in-view) {
+    color: ${props => fadeColor(props.$style?.text, 0.5)};
+  }
+  
+  .ant-picker-content .ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner {
+    font-size: ${props => props.$style?.textSize};
+    font-style: ${props => props.$style?.fontStyle};
+    font-family: ${props => props.$style?.fontFamily};
+    font-weight: ${props => props.$style?.textWeight};
+    text-transform: ${props => props.$style?.textTransform};
+    line-height: ${props => props.$style?.lineHeight};
+    color: ${props => props.$style?.text};
+    text-decoration: ${props => props.$style?.textDecoration};
+  }
+`
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
@@ -1,11 +1,11 @@
 import dayjs from "dayjs";
 import type { DateCompViewProps } from "./dateComp";
-import { disabledDate, getStyle } from "comps/comps/dateComp/dateCompUtil";
+import { disabledDate, getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil";
 import { useUIView } from "../../utils/useUIView";
 import { checkIsMobile } from "util/commonUtils";
 import React, { useContext } from "react";
 import styled from "styled-components";
-import type { DateTimeStyleType } from "../../controls/styleControlConstants";
+import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
 import { EditorContext } from "../../editorState";
 import { default as DatePicker } from "antd/es/date-picker";
 import { hasIcon } from "comps/utils";
@@ -61,7 +61,7 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
   return useUIView(
     <DateRangeMobileUIView {...props} />,
     <RangePickerStyled
-      {...omit(props, "onChange" , "format", "inputFormat")}
+      {...omit(props, "onChange" , "format", "inputFormat", "$childrenInputFieldStyle")}
       format={props.inputFormat}
       ref={props.viewRef as any}
       value={[props.start, props.end]}
@@ -77,6 +77,13 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
       hourStep={props.hourStep as any}
       minuteStep={props.minuteStep as any}
       secondStep={props.secondStep as any}
+      panelRender={(panelNode) => (
+        <StyledPickerPanel
+          $style={props.$childrenInputFieldStyle as ChildrenMultiSelectStyleType}
+        >
+          {panelNode}
+        </StyledPickerPanel>
+      )}
       renderExtraFooter={() => (
         props.timeZone === "UserChoice" && (
           <StyledDiv>
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
@@ -1,11 +1,11 @@
 import dayjs from "dayjs";
 import type { DateCompViewProps } from "./dateComp";
-import { disabledDate, getStyle } from "comps/comps/dateComp/dateCompUtil";
+import { disabledDate, getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil";
 import { useUIView } from "../../utils/useUIView";
 import { checkIsMobile } from "util/commonUtils";
 import React, { useContext } from "react";
 import styled from "styled-components";
-import type { DateTimeStyleType } from "../../controls/styleControlConstants";
+import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
 import { EditorContext } from "../../editorState";
 import { default as DatePicker } from "antd/es/date-picker";
 import type { DatePickerProps } from "antd/es/date-picker";
@@ -53,7 +53,7 @@ export const DateUIView = (props: DataUIViewProps) => {
   return useUIView(
     <DateMobileUIView {...props} />,
     <DatePickerStyled
-      {...omit(props, "format", "inputFormat")}
+      {...omit(props, "format", "inputFormat", "$childrenInputFieldStyle")}
       multiple={false}
       format={props.inputFormat}
       ref={props.viewRef as any}
@@ -66,6 +66,13 @@ export const DateUIView = (props: DataUIViewProps) => {
       picker={"date"}
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
       placeholder={placeholder}
+      panelRender={(panelNode) => (
+        <StyledPickerPanel
+          $style={props.$childrenInputFieldStyle as ChildrenMultiSelectStyleType}
+        >
+          {panelNode}
+        </StyledPickerPanel>
+      )}
       renderExtraFooter={()=>(
         props.timeZone === "UserChoice" && (
           <StyledDiv>
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 { AnimationStyle, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, ChildrenMultiSelectStyle, ChildrenMultiSelectStyleType, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import {
   disabledPropertyView,
@@ -87,6 +87,7 @@ const commonChildren = {
     'labelStyle',
   ),
   inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'),
+  childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'),
   suffixIcon: withDefault(IconControl, "/icon:regular/clock"),
   timeZone: dropdownControl(timeZoneOptions, Intl.DateTimeFormat().resolvedOptions().timeZone),
   viewRef: RefControl<CommonPickerMethods>,
@@ -147,6 +148,7 @@ export type TimeCompViewProps = Pick<
   onFocus: () => void;
   onBlur: () => void;
   $style: DateTimeStyleType;
+  $childrenInputFieldStyle: ChildrenMultiSelectStyleType;
   disabledTime: () => ReturnType<typeof disabledTime>;
   suffixIcon?: ReactNode | false;
   placeholder?: string | [string, string];
@@ -190,6 +192,7 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
         timeZone={props?.timeZone} 
         viewRef={props.viewRef}
         $style={props.inputFieldStyle}
+        $childrenInputFieldStyle={props.childrenInputFieldStyle}
         disabled={props.disabled}
         value={tempValue?.isValid() ? tempValue : null}
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
@@ -207,7 +210,8 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
         }}
         onFocus={() => props.onEvent("focus")}
         onBlur={() => props.onEvent("blur")}
-        suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}      />
+        suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
+      />
     ),
     showValidationWhenEmpty: props.showValidationWhenEmpty,
     ...validate(props),
@@ -272,6 +276,9 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
           <Section name={sectionNames.inputFieldStyle}>
             {children.inputFieldStyle.getPropertyView()}
           </Section>
+          <Section name={sectionNames.childrenInputFieldStyle}>
+            {children.childrenInputFieldStyle.getPropertyView()}
+          </Section>
           <Section name={sectionNames.animationStyle} hasTooltip={true}>
             {children.animationStyle.getPropertyView()}
           </Section>
@@ -342,6 +349,7 @@ const TimeRangeTmpCmp = (function () {
         timeZone={props?.timeZone} 
         viewRef={props.viewRef}
         $style={props.inputFieldStyle}
+        $childrenInputFieldStyle={props.childrenInputFieldStyle}
         disabled={props.disabled}
         start={tempStartValue?.isValid() ? tempStartValue : null}
         end={tempEndValue?.isValid() ? tempEndValue : null}
@@ -444,6 +452,9 @@ const TimeRangeTmpCmp = (function () {
             <Section name={sectionNames.inputFieldStyle}>
               {children.inputFieldStyle.getPropertyView()}
             </Section>
+            <Section name={sectionNames.childrenInputFieldStyle}>
+              {children.childrenInputFieldStyle.getPropertyView()}
+            </Section>
             <Section name={sectionNames.animationStyle} hasTooltip={true}>
               {children.animationStyle.getPropertyView()}
             </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx
@@ -1,10 +1,10 @@
 import styled from "styled-components";
 import { default as TimePicker } from "antd/es/time-picker";
-import { DateTimeStyleType } from "../../controls/styleControlConstants";
-import { getStyle } from "comps/comps/dateComp/dateCompUtil";
+import { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
+import { getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil";
 import { useUIView } from "../../utils/useUIView";
 import { checkIsMobile } from "util/commonUtils";
-import React, { useContext } from "react";
+import React, { ReactNode, useContext } from "react";
 import type { TimeCompViewProps } from "./timeComp";
 import { EditorContext } from "../../editorState";
 import dayjs from "dayjs";
@@ -66,6 +66,13 @@ export const TimeRangeUIView = (props: TimeRangeUIViewProps) => {
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
       suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
       placeholder={placeholders}
+      panelRender={(panelNode: ReactNode) => (
+        <StyledPickerPanel
+          $style={props.$childrenInputFieldStyle as ChildrenMultiSelectStyleType}
+        >
+          {panelNode}
+        </StyledPickerPanel>
+      )}
       renderExtraFooter={() => (
         props.timeZone === "UserChoice" && (
           <StyledAntdSelect
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { default as TimePicker } from "antd/es/time-picker";
-import { DateTimeStyleType } from "../../controls/styleControlConstants";
-import { getStyle } from "comps/comps/dateComp/dateCompUtil";
+import { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
+import { getStyle, StyledPickerPanel } from "comps/comps/dateComp/dateCompUtil";
 import { useUIView } from "../../utils/useUIView";
 import { checkIsMobile } from "util/commonUtils";
 import React, { useContext } from "react";
@@ -44,21 +44,29 @@ export const TimeUIView = (props: TimeUIViewProps) => {
   return useUIView(
     <TimeMobileUIView {...props} />,
     <TimePickerStyled
-      {...omit(props, "format")}
+      {...omit(props, "format", "$childrenInputFieldStyle")}
       ref={props.viewRef}
       hideDisabledOptions
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
       placeholder={placeholder}
+      panelRender={(panelNode) => (
+        <StyledPickerPanel
+          $style={props.$childrenInputFieldStyle as ChildrenMultiSelectStyleType}
+        >
+          {panelNode}
+        </StyledPickerPanel>
+      )}
       renderExtraFooter={()=>(
-      props.timeZone === "UserChoice" && (
-        <StyledAntdSelect
-          placeholder="Select Time Zone"
-          options={timeZoneOptions.filter(option => option.value !== 'UserChoice')} // Filter out 'userChoice'
-          onChange={props?.handleTimeZoneChange}
-          defaultValue={Intl.DateTimeFormat().resolvedOptions().timeZone}
-          />
+        props.timeZone === "UserChoice" && (
+          <StyledAntdSelect
+            placeholder="Select Time Zone"
+            options={timeZoneOptions.filter(option => option.value !== 'UserChoice')} // Filter out 'userChoice'
+            onChange={props?.handleTimeZoneChange}
+            defaultValue={Intl.DateTimeFormat().resolvedOptions().timeZone}
+            />
+          )
         )
-      )}
+      }
     />   
   );
 };
