added showValidationMessageOnEmptyInput flag in input fields

raheeliftikhar5 · raheeliftikhar5 · commit 60609a163572 · 2024-10-17T23:39:47.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -285,6 +285,7 @@ let AutoCompleteCompBase = (function () {
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
       animationStyle: props.animationStyle,
+      showValidationWhenEmpty: props.showValidationWhenEmpty,
       ...validateState,
     });
   })
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -56,6 +56,7 @@ import { timeZoneOptions } from "./timeZone";
 const EventOptions = [changeEvent, focusEvent, blurEvent] as const;
 
 const validationChildren = {
+  showValidationWhenEmpty: BoolControl,
   required: BoolControl,
   minDate: StringControl,
   maxDate: StringControl,
@@ -224,6 +225,7 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
         suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
       />
     ),
+    showValidationWhenEmpty: props.showValidationWhenEmpty,
     ...validate(props),
   });
 })
@@ -247,6 +249,9 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
           <><Section name={sectionNames.validation}>
             {requiredPropertyView(children)}
+            {children.showValidationWhenEmpty.propertyView({
+              label: trans("prop.showEmptyValidation")
+            })}
             {dateValidationFields(children)}
             {timeValidationFields(children)}
             {children.customRule.propertyView({})}
@@ -381,6 +386,7 @@ export const dateRangeControl = (function () {
       children: children,
       inputFieldStyle:props.inputFieldStyle,
       onMouseDown: (e) => e.stopPropagation(),
+      showValidationWhenEmpty: props.showValidationWhenEmpty,
       ...(startResult.validateStatus !== "success"
         ? startResult
         : endResult.validateStatus !== "success"
@@ -413,6 +419,9 @@ export const dateRangeControl = (function () {
           {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
             <><Section name={sectionNames.validation}>
               {requiredPropertyView(children)}
+              {children.showValidationWhenEmpty.propertyView({
+                label: trans("prop.showEmptyValidation")
+              })}
               {dateValidationFields(children)}
               {timeValidationFields(children)}
               {children.customRule.propertyView({})}
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
@@ -59,6 +59,7 @@ import { timeZoneOptions } from "./timeZone";
 const EventOptions = [changeEvent, focusEvent, blurEvent] as const;
 
 const validationChildren = {
+  showValidationWhenEmpty: BoolControl,
   required: BoolControl,
   minTime: StringControl,
   maxTime: StringControl,
@@ -116,7 +117,7 @@ function validate(
   }
 
   const current = dayjs(props.value.value, TimeParser);
-  if (props.required && !current.isValid()) {
+  if (props.required && (!Boolean(props.value.value) || !current.isValid())) {
     return { validateStatus: "error", help: trans("prop.required") };
   }
   return { validateStatus: "success" };
@@ -197,6 +198,7 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props) => {
         onBlur={() => props.onEvent("blur")}
         suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}      />
     ),
+    showValidationWhenEmpty: props.showValidationWhenEmpty,
     ...validate(props),
   });
 })
@@ -217,6 +219,9 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props) => {
       {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
         <><Section name={sectionNames.validation}>
           {requiredPropertyView(children)}
+          {children.showValidationWhenEmpty.propertyView({
+            label: trans("prop.showEmptyValidation")
+          })}
           {minTimePropertyView(children)}
           {maxTimePropertyView(children)}
           {children.customRule.propertyView({})}
@@ -338,6 +343,7 @@ export const timeRangeControl = (function () {
       animationStyle:props.animationStyle,
       children: children,
       onMouseDown: (e) => e.stopPropagation(),
+      showValidationWhenEmpty: props.showValidationWhenEmpty,
       ...(startResult.validateStatus !== "success"
         ? startResult
         : endResult.validateStatus !== "success"
@@ -366,6 +372,9 @@ export const timeRangeControl = (function () {
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
           <><Section name={sectionNames.validation}>
             {requiredPropertyView(children)}
+            {children.showValidationWhenEmpty.propertyView({
+              label: trans("prop.showEmptyValidation")
+            })}
             {minTimePropertyView(children)}
             {maxTimePropertyView(children)}
             {children.customRule.propertyView({})}
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -268,6 +268,7 @@ const childrenMap = {
   inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
   // validation
   required: BoolControl,
+  showValidationWhenEmpty: BoolControl,
   min: UndefinedNumberControl,
   max: UndefinedNumberControl,
   customRule: CustomRuleControl,
@@ -389,6 +390,7 @@ let NumberInputTmpComp = (function () {
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
       animationStyle:props.animationStyle,
+      showValidationWhenEmpty: props.showValidationWhenEmpty,
       ...validate(props),
     });
   })
@@ -405,6 +407,7 @@ let NumberInputTmpComp = (function () {
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
           <><Section name={sectionNames.validation}>
             {requiredPropertyView(children)}
+            {children.showValidationWhenEmpty.propertyView({label: trans("prop.showEmptyValidation")})}
             {children.min.propertyView({ label: trans("prop.minimum") })}
             {children.max.propertyView({ label: trans("prop.maximum") })}
             {children.customRule.propertyView({})}
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
@@ -22,7 +22,7 @@ const RangeSliderBasicComp = (function () {
       animationStyle:props.animationStyle,
       children: (
         <SliderWrapper
-          vertical={props.vertical}
+          $vertical={Boolean(props.vertical)}
           onMouseDown={(e: any) => {
             e.stopPropagation();
             return false;
@@ -35,7 +35,7 @@ const RangeSliderBasicComp = (function () {
             value={[props.start.value, props.end.value]}
             $style={props.inputFieldStyle}
             style={{ margin: 0 }}
-            vertical={props.vertical || false}
+            $vertical={Boolean(props.vertical) || false}
             onChange={([start, end]) => {
               props.start.onChange(start);
               props.end.onChange(end);
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
@@ -26,7 +26,7 @@ const SliderBasicComp = (function () {
       animationStyle:props.animationStyle,
       children: (
         <SliderWrapper
-          vertical={props.vertical}
+          $vertical={Boolean(props.vertical)}
           onMouseDown={(e: any) => {
             e.stopPropagation();
             return false;
@@ -38,7 +38,7 @@ const SliderBasicComp = (function () {
             value={props.value.value}
             $style={props.inputFieldStyle}
             style={{margin: 0}}
-            vertical={props.vertical || false}
+            $vertical={Boolean(props.vertical) || false}
             onChange={(e) => {
               props.value.onChange(e);
               props.onEvent("change");
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -60,11 +60,11 @@ const getStyle = (style: SliderStyleType, vertical: boolean) => {
   `;
 };
 
-export const SliderStyled = styled(Slider)<{ $style: SliderStyleType, vertical: boolean }>`
-  ${(props) => props.$style && getStyle(props.$style, props.vertical)}
+export const SliderStyled = styled(Slider)<{ $style: SliderStyleType, $vertical: boolean }>`
+  ${(props) => props.$style && getStyle(props.$style, props.$vertical)}
 `;
 
-export const SliderWrapper = styled.div<{ vertical: boolean }>`
+export const SliderWrapper = styled.div<{ $vertical: boolean }>`
   width: 100%;
   display: inline-flex;
   align-items: center;
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
@@ -55,6 +55,7 @@ let SelectBasicComp = (function () {
           dispatch={dispatch}
         />
       ),
+      showValidationWhenEmpty: props.showValidationWhenEmpty,
       ...validateState,
     });
   })
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx
@@ -18,6 +18,7 @@ import { blurMethod, focusWithOptions } from "comps/utils/methodUtils";
 
 export const SelectInputValidationChildren = {
   required: BoolControl,
+  showValidationWhenEmpty: BoolControl,
   customRule: CustomRuleControl,
 };
 type ValidationComp = RecordConstructorToComp<typeof SelectInputValidationChildren>;
@@ -122,6 +123,9 @@ export const SelectInputInvalidConfig = depsConfig<
 export const SelectInputValidationSection = (children: ValidationComp) => (
   <Section name={sectionNames.validation}>
     {requiredPropertyView(children)}
+    {children.showValidationWhenEmpty.propertyView({
+      label: trans("prop.showEmptyValidation"),
+    })}
     {children.customRule.propertyView({})}
   </Section>
 );
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -78,6 +78,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
     labelStyle: props.labelStyle,
     inputFieldStyle:props.inputFieldStyle,
     animationStyle:props.animationStyle,
+    showValidationWhenEmpty: props.showValidationWhenEmpty,
     ...validateState,
   });
 })
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -82,6 +82,7 @@ let PasswordTmpComp = (function () {
       labelStyle: props.labelStyle,
       inputFieldStyle:props.inputFieldStyle,
       animationStyle:props.animationStyle,
+      showValidationWhenEmpty: props.showValidationWhenEmpty,
       ...validateState,
     });
   })
@@ -106,6 +107,7 @@ let PasswordTmpComp = (function () {
                 {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
               </Section><Section name={sectionNames.validation}>
                 {requiredPropertyView(children)}
+                {children.showValidationWhenEmpty.propertyView({label: trans("prop.showEmptyValidation")})}
                 {regexPropertyView(children)}
                 {minLengthPropertyView(children)}
                 {maxLengthPropertyView(children)}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -99,6 +99,7 @@ let TextAreaTmpComp = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       animationStyle: props.animationStyle,
+      showValidationWhenEmpty: props.showValidationWhenEmpty,
       ...validateState,
     });
   })
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
@@ -144,6 +144,7 @@ export const textInputChildren = {
 
   // validation
   required: BoolControl,
+  showValidationWhenEmpty: BoolControl,
   minLength: NumberControl,
   maxLength: NumberControl,
   validationType: dropdownControl(TextInputValidationOptions, "Text"),
@@ -226,6 +227,7 @@ export const TextInputInteractionSection = (children: TextInputComp) => (
 export const TextInputValidationSection = (children: TextInputComp) => (
   <Section name={sectionNames.validation}>
     {requiredPropertyView(children)}
+    {children.showValidationWhenEmpty.propertyView({label: trans("prop.showEmptyValidation")})}
     {children.validationType.propertyView({ label: trans("prop.textType") })}
     {valueInfoMap[children.validationType.getView()]?.extra === undefined &&
       regexPropertyView(children)}
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
@@ -130,6 +130,7 @@ const TreeCompView = (props: RecordConstructorToView<typeof childrenMap>) => {
         </ScrollBar>
       </Container>
     ),
+    showValidationWhenEmpty: props.showValidationWhenEmpty,
   });
 };
 
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
@@ -141,6 +141,7 @@ const TreeCompView = (
         onBlur={() => props.onEvent("blur")}
       />
     ),
+    showValidationWhenEmpty: props.showValidationWhenEmpty,
   });
 };
 
diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
@@ -26,6 +26,7 @@ type LabelViewProps = Pick<FormItemProps, "required" | "help" | "validateStatus"
   childrenInputFieldStyle?: Record<string, string>;
   animationStyle?: Record<string, string>;
   onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  showValidationWhenEmpty?: boolean;
 };
 
 const StyledStarIcon = styled(StarIcon)`
@@ -77,7 +78,7 @@ const MainWrapper = styled.div<{
     props.$position === "column" && props.$hasLabel ? "calc(100% - 4px)" : "100%"};
   display: flex;
   align-items: ${(props) => (props.$position === "row" ? "center" : "start")};
-  flex-shrink: 0;
+  flex-shrink: 1;
 `;
 
 const LabelWrapper = styled.div<{
@@ -178,6 +179,12 @@ export const LabelControl = (function () {
 
   return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => 
   {
+    const inputValue = (
+      ((args.children as ReactElement)?.props?.children as ReactElement)?.props?.value // text area comp
+      ?? (args.children as ReactElement)?.props.value?.value // number input comp
+      ?? (args.children as ReactElement)?.props.value
+    );
+
     return (
       <LabelViewWrapper
         $style={args.style}
@@ -245,7 +252,10 @@ export const LabelControl = (function () {
           </ChildrenWrapper>
         </MainWrapper>
 
-        {args.help && Boolean((args.children as ReactElement)?.props.value) && (
+        {args.help && (
+          args.showValidationWhenEmpty
+          || (!args.showValidationWhenEmpty && Boolean(inputValue))
+        ) && (
           <HelpWrapper
             $marginLeft={
               props.position === "column" || isEmpty(props.text) || props.hidden
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -163,6 +163,7 @@ export const en = {
     "showSearch": "Searchable",
     "defaultValue": "Default Value",
     "required": "Required Field",
+    "showEmptyValidation": "Show Validation On Empty/Reset",
     "readOnly": "Read Only",
     "readOnlyTooltip": "Read-only components appear normal but cannot be modified.",
     "minimum": "Minimum",
