[form] Improve default validation messages

https://app.shortcut.com/plasmic/story/33930/default-validation-messages Change-Id: I779669e9c20e7500503f3d9d54c1a3d898ebfe28
arapmelly · May 2, 2023 · 384f920 · 384f920
1 parent e3930c8
commit 384f920
Showing 1 changed file with 51 additions and 7 deletions.
diff --git a/plasmicpkgs/antd5/src/registerForm.tsx b/plasmicpkgs/antd5/src/registerForm.tsx
@@ -19,6 +19,26 @@ import {
   usePrevious,
 } from "./utils";
 
+const reactNodeToString = function (reactNode: React.ReactNode): string {
+  let string = "";
+  if (typeof reactNode === "string") {
+    string = reactNode;
+  } else if (typeof reactNode === "number") {
+    string = reactNode.toString();
+  } else if (reactNode instanceof Array) {
+    reactNode.forEach(function (child) {
+      string += reactNodeToString(child);
+    });
+  } else if (isValidElement(reactNode)) {
+    string += reactNodeToString(reactNode.props.children);
+  }
+  return string;
+};
+
+function ensureArray<T>(x: T | T[]): T[] {
+  return Array.isArray(x) ? x : [x];
+}
+
 const FormItem = Form.Item;
 const FormList = Form.List;
 
@@ -405,40 +425,54 @@ interface PlasmicRule {
   message?: string;
 }
 
-function plasmicRulesToAntdRules(plasmicRules: PlasmicRule[]) {
+function plasmicRulesToAntdRules(
+  plasmicRules: PlasmicRule[],
+  label: string | undefined
+) {
   const rules: FormItemProps["rules"] = [];
   for (const plasmicRule of plasmicRules) {
     switch (plasmicRule.ruleType) {
       case "enum":
         rules.push({
           type: "enum",
           enum: plasmicRule.options?.map((opt) => opt.value) ?? [],
-          message: plasmicRule.message,
+          message: plasmicRule.message ?? `Please specify a valid value`,
         });
         break;
       case "required":
         rules.push({
           required: true,
-          message: plasmicRule.message,
+          message:
+            plasmicRule.message ?? `Please specify ${label || "this field"}`,
         });
         break;
       case "regex":
         rules.push({
           pattern: new RegExp(plasmicRule.pattern ?? ""),
-          message: plasmicRule.message,
+          message: plasmicRule.message ?? `Please enter a valid value`,
         });
         break;
       case "whitespace":
         rules.push({
           whitespace: true,
-          message: plasmicRule.message,
+          message:
+            plasmicRule.message ?? `Please specify ${label || "this field"}`,
         });
         break;
       case "min":
+        rules.push({
+          [plasmicRule.ruleType]: plasmicRule.length,
+          message:
+            plasmicRule.message ??
+            `Must be at least ${plasmicRule.length} characters`,
+        });
+        break;
       case "max":
         rules.push({
           [plasmicRule.ruleType]: plasmicRule.length,
-          message: plasmicRule.message,
+          message:
+            plasmicRule.message ??
+            `Must be at most ${plasmicRule.length} characters`,
         });
         break;
       case "advanced":
@@ -479,7 +513,17 @@ function useFormInstanceMaybe(): FormInstance<any> | undefined {
 export function FormItemWrapper(props: InternalFormItemProps) {
   const relativeFormItemName = useFormItemRelativeName(props.name);
   const fullFormItemName = useFormItemFullName(props.name);
-  const rules = props.rules ? plasmicRulesToAntdRules(props.rules) : undefined;
+  const bestEffortLabel =
+    (!props.noLabel && reactNodeToString(props.label)) ||
+    ensureArray(props.name).slice(-1)[0];
+  const rules = props.rules
+    ? plasmicRulesToAntdRules(
+        props.rules,
+        typeof bestEffortLabel === "number"
+          ? "" + bestEffortLabel
+          : bestEffortLabel
+      )
+    : undefined;
 
   const inCanvas = !!usePlasmicCanvasContext();
   if (inCanvas) {