Some improvements to the Upload component (#162)

* Add FormDefaults instance for Set and Map

* Fix weird border on upload component

* Add onClick prop to Upload and let specific files be non-removable

* Code review feedback

Author: arthurxavierx

docs/Examples/Form.example.purs

@@ -425,7 +425,13 @@ userForm = ado
         { variant: Upload.Avatar
         , backend:
             { fetch: \id ->
-                pure { id, name: Upload.FileName "avatar", previewUri: Nothing }
+                pure
+                  { id
+                  , name: Upload.FileName "avatar"
+                  , previewUri: Nothing
+                  , readonly: false
+                  }
+            , remove: \_ -> pure true
             , upload: \file -> produceAff \emitter -> do
                 let
                   totalBytes = Int.round $ File.size file

docs/Examples/Upload.example.purs

@@ -17,11 +17,11 @@ import Effect.Random (randomRange)
 import Effect.Uncurried (runEffectFn2)
 import Lumi.Components.Button (button, primary) as Button
 import Lumi.Components.Column (column, column_)
+import Lumi.Components.Example (example)
 import Lumi.Components.Input as Input
 import Lumi.Components.LabeledField (labeledField, RequiredField(..))
 import Lumi.Components.Text (h2_)
 import Lumi.Components.Upload (FileId(..), FileName(..), UploadVariant(..), defaults, upload)
-import Lumi.Components.Example (example)
 import React.Basic (Component, JSX, createComponent, make)
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (targetChecked)
@@ -117,7 +117,13 @@ docs = unit # make component { initialState, didMount, render }
                       , readonly = self.state.readonly
                       , backend =
                           { fetch: \id@(FileId name) ->
-                              pure { id, name: FileName name, previewUri: Nothing }
+                              pure
+                                { id
+                                , name: FileName name
+                                , previewUri: Nothing
+                                , readonly: false
+                                }
+                          , remove: \_ -> pure true
                           , upload: \file -> produceAff \emitter ->
                               uploadWithRandomPauses emitter file
                           }
@@ -134,10 +140,17 @@ docs = unit # make component { initialState, didMount, render }
                       { value = self.state.files
                       , variant = Files
                       , onChange = send self <<< FileEx
+                      , onClick = \(FileId id) -> Just $ log id
                       , readonly = self.state.readonly
                       , backend =
                           { fetch: \id@(FileId name) ->
-                              pure { id, name: FileName name, previewUri: Nothing }
+                              pure
+                                { id
+                                , name: FileName name
+                                , previewUri: Nothing
+                                , readonly: false
+                                }
+                          , remove: \_ -> pure true
                           , upload: \file -> produceAff \emitter -> do
                               foldMap AVar.read self.state.startUpload
                               void $ foldMap AVar.tryTake self.state.startUpload
@@ -163,7 +176,13 @@ docs = unit # make component { initialState, didMount, render }
                       , readonly = self.state.readonly
                       , backend =
                           { fetch: \id@(FileId name) -> do
-                              pure { id, name: FileName name, previewUri: Nothing }
+                              pure
+                                { id
+                                , name: FileName name
+                                , previewUri: Nothing
+                                , readonly: false
+                                }
+                          , remove: \_ -> pure true
                           , upload: \file -> produceAff \emitter ->
                               uploadWithRandomPauses emitter file
                           }
@@ -182,7 +201,13 @@ docs = unit # make component { initialState, didMount, render }
                       , readonly = self.state.readonly
                       , backend =
                           { fetch: \id@(FileId name) -> do
-                              pure { id, name: FileName name, previewUri: Nothing }
+                              pure
+                                { id
+                                , name: FileName name
+                                , previewUri: Nothing
+                                , readonly: false
+                                }
+                          , remove: \_ -> pure true
                           , upload: \file -> produceAff \emitter ->
                               uploadWithRandomPauses emitter file
                           }

src/Lumi/Components/Form.purs

@@ -81,7 +81,7 @@ import Lumi.Components.Column (column)
 import Lumi.Components.FetchCache as FetchCache
 import Lumi.Components.Form.Defaults (formDefaults) as Defaults
 import Lumi.Components.Form.Internal (Forest, FormBuilder'(..), FormBuilder, SeqFormBuilder, Tree(..), formBuilder, formBuilder_, invalidate, pruneTree, sequential)
-import Lumi.Components.Form.Internal (Forest(..), FormBuilder', FormBuilder, SeqFormBuilder', SeqFormBuilder, formBuilder, formBuilder_, invalidate, listen, parallel, revalidate, sequential) as Internal
+import Lumi.Components.Form.Internal (Forest, FormBuilder', FormBuilder, SeqFormBuilder', SeqFormBuilder, Tree(..), formBuilder, formBuilder_, invalidate, listen, parallel, revalidate, sequential) as Internal
 import Lumi.Components.Form.Validation (setModified)
 import Lumi.Components.Form.Validation (Validated(..), Validator, _Validated, fromValidated, mustBe, mustEqual, nonEmpty, nonEmptyArray, nonNull, validNumber, validInt, validDate, optional, setFresh, setModified, validated, warn) as Validation
 import Lumi.Components.Input (alignToInput)

src/Lumi/Components/Form/Defaults.purs

@@ -9,6 +9,10 @@ import Prelude
 
 import Data.Array.NonEmpty (NonEmptyArray)
 import Data.Either (Either(..))
+import Data.Map (Map)
+import Data.Map as Map
+import Data.Set (Set)
+import Data.Set as Set
 import Data.Maybe (Maybe(..))
 import Data.Symbol (class IsSymbol, SProxy(..))
 import Lumi.Components.Form.Validation (Validated(..))
@@ -38,6 +42,8 @@ instance formDefaultsNumber :: FormDefaults Number where formDefaults = 0.0
 instance formDefaultsInt :: FormDefaults Int where formDefaults = 0
 instance formDefaultsString :: FormDefaults String where formDefaults = ""
 instance formDefaultsArray :: FormDefaults (Array a) where formDefaults = []
+instance formDefaultsSet :: FormDefaults (Set a) where formDefaults = Set.empty
+instance formDefaultsMap :: FormDefaults (Map k a) where formDefaults = Map.empty
 
 instance formDefaultsNonEmptyArray :: FormDefaults a => FormDefaults (NonEmptyArray a) where
   formDefaults = pure formDefaults