Add onUpload, onRemove and onClick props to Upload

Author: arthurxavierx

docs/Examples/Upload.example.purs

@@ -3,10 +3,11 @@ module Lumi.Components.Examples.Upload where
 import Prelude
 
 import Control.Coroutine.Aff (close, emit, produceAff)
-import Data.Array (head)
+import Data.Array as Array
 import Data.Foldable (foldMap)
 import Data.Int as Int
 import Data.Maybe (Maybe(..), fromMaybe, maybe)
+import Data.Traversable (traverse_)
 import Effect (Effect)
 import Effect.Aff (Milliseconds(..), delay, launchAff_)
 import Effect.Aff.AVar (AVar)
@@ -17,11 +18,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)
@@ -35,9 +36,12 @@ component = createComponent "UploadExample"
 data Action
   = NoOp
   | SetReadonly Boolean
-  | ImageEx (Array FileId)
-  | FileEx (Array FileId)
-  | AvatarEx (Maybe FileId)
+  | NewImages (Array FileId)
+  | RemoveImage FileId
+  | NewFiles (Array FileId)
+  | RemoveFile FileId
+  | NewAvatar FileId
+  | RemoveAvatar
   | StartUpload
   | InitializeUploadBuffer (AVar Unit)
 
@@ -61,21 +65,34 @@ docs = unit # make component { initialState, didMount, render }
       SetReadonly readonly ->
         self.setState _ { readonly = readonly }
 
-      ImageEx value ->
+      NewImages value ->
+        self.setStateThen
+          (\s -> s { images = Array.nub (s.images <> value) })
+          $ debug "value:" value
+
+      RemoveImage value ->
         self.setStateThen
-          (_ { images = value })
+          (\s -> s { images = Array.delete value s.images })
           $ debug "value:" value
 
-      FileEx value ->
+      NewFiles value ->
         self.setStateThen
-          (_ { files = value })
+          (\s -> s { files = Array.nub (s.files <> value) })
           $ debug "value:" value
 
-      AvatarEx value ->
+      RemoveFile value ->
         self.setStateThen
-          (_ { avatar = value })
+          (\s -> s { files = Array.delete value s.files })
           $ debug "value:" value
 
+      NewAvatar value ->
+        self.setStateThen
+          (_ { avatar = Just value })
+          $ debug "value:" value
+
+      RemoveAvatar ->
+        self.setState _{ avatar = Nothing }
+
       StartUpload -> do
         launchAff_ do
           maybe
@@ -113,7 +130,8 @@ docs = unit # make component { initialState, didMount, render }
                   [ upload defaults
                       { value = self.state.images
                       , variant = Images
-                      , onChange = send self <<< ImageEx
+                      , onUpload = send self <<< NewImages
+                      , onRemove = Just <<< send self <<< RemoveImage
                       , readonly = self.state.readonly
                       , backend =
                           { fetch: \id@(FileId name) ->
@@ -133,7 +151,9 @@ docs = unit # make component { initialState, didMount, render }
                   [ upload defaults
                       { value = self.state.files
                       , variant = Files
-                      , onChange = send self <<< FileEx
+                      , onUpload = send self <<< NewFiles
+                      , onRemove = Just <<< send self <<< RemoveFile
+                      , onClick = \(FileId id) -> Just $ log id
                       , readonly = self.state.readonly
                       , backend =
                           { fetch: \id@(FileId name) ->
@@ -159,7 +179,8 @@ docs = unit # make component { initialState, didMount, render }
                   [ upload defaults
                       { value = maybe [] pure self.state.avatar
                       , variant = Avatar
-                      , onChange = send self <<< AvatarEx <<< head
+                      , onUpload = traverse_ (send self <<< NewAvatar) <<< Array.head
+                      , onRemove = \_ -> Just $ send self RemoveAvatar
                       , readonly = self.state.readonly
                       , backend =
                           { fetch: \id@(FileId name) -> do
@@ -178,7 +199,8 @@ docs = unit # make component { initialState, didMount, render }
                   [ upload defaults
                       { value = maybe [] pure self.state.avatar
                       , variant = Logo
-                      , onChange = send self <<< AvatarEx <<< head
+                      , onUpload = traverse_ (send self <<< NewAvatar) <<< Array.head
+                      , onRemove = \_ -> Just $ send self RemoveAvatar
                       , readonly = self.state.readonly
                       , backend =
                           { fetch: \id@(FileId name) -> do

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)
@@ -520,7 +520,8 @@ file opts = formBuilder_ \{ readonly } value onChange ->
   Upload.upload Upload.defaults
     { value = value
     , variant = opts.variant
-    , onChange = onChange
+    , onUpload = \ids -> onChange $ value <> ids
+    , onRemove = \id -> Just $ onChange $ Array.delete id value
     , readonly = readonly
     , backend = opts.backend
     }