feat: add supports for concrete type in Select/Radio fields

[Fable.Form.Simple.Bulma]
MangelMaxime · Oct 7, 2024 · d9275ab · d9275ab
1 parent 94435b9
commit d9275ab
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 56 deletions.
diff --git a/examples/React/src/Pages/DynamicForm.fs b/examples/React/src/Pages/DynamicForm.fs
@@ -8,6 +8,7 @@ open Fable.Form.Simple.Bulma
 open Examples.Shared.Forms
 open DynamicForm.Domain
 
+[<NoComparison>]
 type Model =
     // The form is being filled
     | FillingForm of Form.View.Model<DynamicForm.Values>
@@ -16,6 +17,7 @@ type Model =
     // The form has been submitted and a student has been created
     | CreatedAStudent of string
 
+[<NoComparison>]
 type Msg =
     // Used when a change occure in the form
     | FormChanged of Form.View.Model<DynamicForm.Values>
@@ -103,12 +105,14 @@ let view (model: Model) (dispatch: Dispatch<Msg>) =
     match model with
     | FillingForm values ->
         let actionText =
-            match UserType.tryParse values.Values.UserType with
-            | Ok Student -> "Create student"
+            match values.Values.UserType with
+            | None -> "Create"
 
-            | Ok Teacher -> "Create teacher"
+            | Some userType ->
+                match userType :?> UserType with
+                | UserType.Student -> "Create student"
 
-            | Error _ -> "Create"
+                | UserType.Teacher -> "Create teacher"
 
         Form.View.asHtml
             {

diff --git a/examples/Shared/Examples.Shared.Common.props b/examples/Shared/Examples.Shared.Common.props
@@ -1,4 +1,10 @@
 <Project>
+    <PropertyGroup>
+        <!-- Restore default Warning level to avoid warning and simplify the example code -->
+        <WarningLevel>3</WarningLevel>
+        <!-- Warn on ununsed variables -->
+        <OtherFlags>--warnon:1182</OtherFlags>
+    </PropertyGroup>
     <ItemGroup>
         <Compile Include="src/Env.fs" />
         <Compile Include="src/Router.fs" />

diff --git a/examples/Shared/Examples.Shared.Sutil.fsproj b/examples/Shared/Examples.Shared.Sutil.fsproj
@@ -3,8 +3,6 @@
     <PropertyGroup>
         <TargetFramework>netstandard2.1</TargetFramework>
         <DefineConstants>EXAMPLE_SUTIL</DefineConstants>
-        <!-- Warn on ununsed variables -->
-        <OtherFlags>--warnon:1182</OtherFlags>
     </PropertyGroup>
     <Import Project="Examples.Shared.Common.props" />
     <ItemGroup>

diff --git a/examples/Shared/src/Forms/DynamicForm.fs b/examples/Shared/src/Forms/DynamicForm.fs
@@ -6,6 +6,7 @@ open Fable.Form.Simple
 // and use the appropriate module for your UI framework
 #if EXAMPLE_REACT
 open Fable.Form.Simple.Bulma
+open Fable.Form.Simple.Bulma.Fields
 #endif
 
 #if EXAMPLE_LIT
@@ -30,19 +31,21 @@ open Fable.Form.Simple.Sutil.Bulma
 [<AutoOpen>]
 module Domain =
 
+    [<RequireQualifiedAccess>]
     type UserType =
         | Student
         | Teacher
 
-    module UserType =
+        interface SelectField.OptionItem with
+            member this.Key =
+                match this with
+                | Student -> "student"
+                | Teacher -> "teacher"
 
-        let tryParse (text: string) =
-            match text with
-            | "student" -> Ok Student
-
-            | "teacher" -> Ok Teacher
-
-            | _ -> Error "Invalid user type"
+            member this.Text =
+                match this with
+                | Student -> "Student"
+                | Teacher -> "Teacher"
 
 type FormResult =
     | NewStudent of name: string
@@ -51,16 +54,17 @@ type FormResult =
 /// <summary>
 /// Represent the form values
 /// </summary>
+[<NoComparison>]
 type Values =
     {
-        UserType: string
+        UserType: SelectField.Value
         Name: string
         Subject: string
     }
 
 let init =
     {
-        UserType = ""
+        UserType = None
         Name = ""
         Subject = ""
     }
@@ -147,7 +151,11 @@ let form: Form<Values, FormResult> =
     let userTypeField =
         Form.selectField
             {
-                Parser = UserType.tryParse
+                Parser =
+                    fun value ->
+                        match value with
+                        | None -> Error "User type is required"
+                        | Some value -> value :?> UserType |> Ok
                 Value = fun values -> values.UserType
                 Update =
                     fun newValue values ->
@@ -162,18 +170,18 @@ let form: Form<Values, FormResult> =
                         Placeholder = "Choose a user type"
                         Options =
                             [
-                                "student", "Student"
-                                "teacher", "Teacher"
+                                UserType.Student
+                                UserType.Teacher
                             ]
                     }
             }
 
     userTypeField
     |> Form.andThen (
         function
-        | Student -> studentForm
+        | UserType.Student -> studentForm
 
-        | Teacher -> teacherForm
+        | UserType.Teacher -> teacherForm
     )
 
 let information<'R> : DemoInformation<_> =

diff --git a/examples/Shared/src/Forms/SignUp.fs b/examples/Shared/src/Forms/SignUp.fs
@@ -6,6 +6,7 @@ open Fable.Form.Simple
 // and use the appropriate module for your UI framework
 #if EXAMPLE_REACT
 open Fable.Form.Simple.Bulma
+open Fable.Form.Simple.Bulma.Fields
 #endif
 
 #if EXAMPLE_LIT
@@ -169,7 +170,7 @@ type Values =
         Password: string
         RepeatPassword: string
         Name: string
-        MakePublic: string
+        MakePublic: RadioField.OptionItem option
         Errors: FormErrors
     }
 
@@ -195,7 +196,7 @@ let init =
         Password = ""
         RepeatPassword = ""
         Name = ""
-        MakePublic = ""
+        MakePublic = None
         Errors =
             {
                 Email = None
@@ -319,7 +320,11 @@ let form: Form<Values, FormResult> =
     let makePublicField =
         Form.radioField
             {
-                Parser = Ok
+                Parser =
+                    fun value ->
+                        match value with
+                        | None -> Ok false
+                        | Some value -> convertMakePublicOptionToBool value.Key |> Ok
                 Value = fun values -> values.MakePublic
                 Update =
                     fun newValue values ->
@@ -333,8 +338,14 @@ let form: Form<Values, FormResult> =
                         Label = "Make your profile public ?"
                         Options =
                             [
-                                "option-yes", "Yes"
-                                "option-no", "No"
+                                { new RadioField.OptionItem with
+                                    member _.Text = "Yes"
+                                    member _.Key = "option-yes"
+                                }
+                                { new RadioField.OptionItem with
+                                    member _.Text = "No"
+                                    member _.Key = "option-no"
+                                }
                             ]
                     }
             }
@@ -344,7 +355,7 @@ let form: Form<Values, FormResult> =
             Email = email
             Password = password
             Name = name
-            MakePublic = convertMakePublicOptionToBool makePublic
+            MakePublic = makePublic
         }
 
     Form.succeed onSubmit

diff --git a/examples/Shared/src/Forms/ValidationStrategies.fs b/examples/Shared/src/Forms/ValidationStrategies.fs
@@ -6,6 +6,7 @@ open Fable.Form.Simple
 // and use the appropriate module for your UI framework
 #if EXAMPLE_REACT
 open Fable.Form.Simple.Bulma
+open Fable.Form.Simple.Bulma.Fields
 #endif
 
 #if EXAMPLE_LIT
@@ -65,12 +66,28 @@ type FormResult =
         Password: Password
     }
 
+[<RequireQualifiedAccess>]
+type ValidationStrategy =
+    | OnSubmit
+    | OnBlur
+
+    interface RadioField.OptionItem with
+        member this.Key =
+            match this with
+            | OnSubmit -> "onSubmit"
+            | OnBlur -> "onBlur"
+
+        member this.Text =
+            match this with
+            | OnSubmit -> "Validate on form submit"
+            | OnBlur -> "Validate on field blur"
+
 /// <summary>
 /// Represent the form values
 /// </summary>
 type Values =
     {
-        ValidationStrategy: string
+        ValidationStrategy: RadioField.OptionItem option
         Email: string
         Password: string
     }
@@ -91,7 +108,7 @@ type Msg =
 
 let init =
     {
-        ValidationStrategy = "onBlur"
+        ValidationStrategy = Some ValidationStrategy.OnBlur
         Email = ""
         Password = ""
     }
@@ -107,7 +124,11 @@ let form: Form<Values, FormResult> =
     let validationStrategiesField =
         Form.radioField
             {
-                Parser = Ok
+                Parser =
+                    fun value ->
+                        match value with
+                        | None -> Error "Validation strategy is required"
+                        | Some value -> value :?> ValidationStrategy |> Ok
                 Value = fun values -> values.ValidationStrategy
                 Update =
                     fun newValue values ->
@@ -121,11 +142,10 @@ let form: Form<Values, FormResult> =
                         Label = "Validation strategy"
                         Options =
                             [
-                                "onSubmit", "Validate on form submit"
-                                "onBlur", "Validate on field blur"
+                                ValidationStrategy.OnSubmit
+                                ValidationStrategy.OnBlur
                             ]
                     }
-
             }
 
     let emailField =

diff --git a/packages/Fable.Form.Simple.Bulma/Form.fs b/packages/Fable.Form.Simple.Bulma/Form.fs
@@ -384,13 +384,15 @@ module Form =
         CheckboxField.form (fun field -> CheckboxField.Field field) config
 
     let radioField
-        (config: Base.FieldConfig<RadioField.Attributes, string, 'Values, 'Output>)
+        (config:
+            Base.FieldConfig<RadioField.Attributes, RadioField.OptionItem option, 'Values, 'Output>)
         : Form<'Values, 'Output>
         =
         RadioField.form (fun field -> RadioField.Field field) config
 
     let selectField
-        (config: Base.FieldConfig<SelectField.Attributes, string, 'Values, 'Output>)
+        (config:
+            Base.FieldConfig<SelectField.Attributes, SelectField.OptionItem option, 'Values, 'Output>)
         : Form<'Values, 'Output>
         =
         SelectField.form (fun field -> SelectField.Field field) config

diff --git a/packages/Fable.Form.Simple.Bulma/RadioField.fs b/packages/Fable.Form.Simple.Bulma/RadioField.fs
@@ -7,57 +7,62 @@ open Fable.Form.Simple.Bulma
 
 module RadioField =
 
+    type OptionItem =
+        abstract member Key: string
+        abstract member Text: string
+
+    [<NoComparison>]
     type Attributes =
         {
             FieldId: string
             Label: string
-            Options: (string * string) list
+            Options: OptionItem list
         }
 
         interface Field.IAttributes with
 
             member this.GetFieldId() = this.FieldId
 
-    type InnerField<'Values> = Field.Field<Attributes, string, 'Values>
+    type InnerField<'Values> = Field.Field<Attributes, OptionItem option, 'Values>
 
     let form<'Values, 'Field, 'Output>
         : ((InnerField<'Values> -> 'Field)
-              -> Base.FieldConfig<Attributes, string, 'Values, 'Output>
+              -> Base.FieldConfig<Attributes, OptionItem option, 'Values, 'Output>
               -> Base.Form<'Values, 'Output, 'Field>) =
-        Base.field System.String.IsNullOrEmpty
+        Base.field _.IsNone
 
     type Field<'Values>(innerField: InnerField<'Values>) =
 
-        inherit IStandardField<'Values, string, Attributes>(innerField)
+        inherit IStandardField<'Values, OptionItem option, Attributes>(innerField)
 
         interface IField<'Values> with
 
             member _.MapFieldValues(update: 'Values -> 'NewValues) : IField<'NewValues> =
 
                 Field(Field.mapValues update innerField)
 
-        override _.RenderField(config: StandardRenderFieldConfig<string, Attributes>) =
+        override _.RenderField(config: StandardRenderFieldConfig<OptionItem option, Attributes>) =
 
-            let radio (key: string, label: string) =
+            let radio (optionItem: OptionItem) =
                 Bulma.input.labels.radio [
                     Bulma.input.radio [
                         prop.name config.Attributes.Label
-                        prop.isChecked (key = config.Value: bool)
+                        prop.isChecked (Some optionItem = config.Value: bool)
                         prop.disabled config.Disabled
 
                         // RadioField can't really be set to readonly in HTML
                         // So we need to not listen to the onChange event
                         prop.readOnly config.IsReadOnly
                         if not config.IsReadOnly then
-                            prop.onChange (fun (_: bool) -> config.OnChange key)
+                            prop.onChange (fun (_: bool) -> config.OnChange(Some optionItem))
 
                         match config.OnBlur with
                         | Some onBlur -> prop.onBlur (fun _ -> onBlur ())
 
                         | None -> ()
                     ]
 
-                    Html.text label
+                    Html.text optionItem.Text
                 ]
 
             Bulma.control.div [