Merge tag 'v0.7.0' into kimi/borderless-list

v0.7.0

Author: kimispencer

docs/Examples/Form.example.purs

@@ -47,7 +47,7 @@ data Action formData formResult
   | SetForceTopLabels Boolean
   | SetReadonly Boolean
   | SetSimulatePauses Boolean
-  | SetUser (Maybe formResult) formData
+  | SetUser (formData -> formData)
   | Submit
   | Reset
 
@@ -79,11 +79,18 @@ docs = unit # make component { initialState, render }
       SetSimulatePauses simulatePauses ->
         self.setState _ { simulatePauses = simulatePauses }
 
-      SetUser result user ->
-        self.setState _
-          { result = result
-          , user = user
-          }
+      SetUser update ->
+        let
+          formProps =
+            { loadColor: loadColor self.state.simulatePauses
+            , loadColors: loadColors self.state.simulatePauses
+            , readonly: self.state.readonly
+            }
+        in
+          self.setState \s -> s
+            { result = F.revalidate userForm formProps (update s.user)
+            , user = update s.user
+            }
 
       Submit ->
         self.setState \state -> state { user = F.setModified state.user, modalOpen = isJust state.result }
@@ -155,7 +162,7 @@ docs = unit # make component { initialState, render }
                   , children:
                       [ userComponent
                           { value: user
-                          , onChange: \r -> send self <<< SetUser r
+                          , onChange: send self <<< SetUser
                           , loadColor: loadColor simulatePauses
                           , loadColors: loadColors simulatePauses
                           , inlineTable
@@ -264,15 +271,27 @@ type ValidatedUser =
 -- | remounting this component on each render.
 userComponent
   :: { value :: User
-     , onChange :: Maybe ValidatedUser -> User -> Effect Unit
+     , onChange :: (User -> User) -> Effect Unit
      , loadColor :: String -> Aff { label :: String, value :: String }
      , loadColors :: String -> Aff (Array { label :: String, value :: String })
      , inlineTable :: Boolean
      , forceTopLabels :: Boolean
      , readonly :: Boolean
      }
   -> JSX
-userComponent = F.build ado
+userComponent = F.build userForm
+
+userForm
+  :: forall props
+   . FormBuilder
+      { loadColor :: String -> Aff { label :: String, value :: String }
+      , loadColors :: String -> Aff (Array { label :: String, value :: String })
+      , readonly :: Boolean
+      | props
+      }
+      User
+      ValidatedUser
+userForm = ado
   firstName <-
     F.indent "First Name" Required
     $ F.focus (prop (SProxy :: SProxy "firstName"))

docs/Examples/Layouts.example.purs

@@ -275,6 +275,7 @@ docs = (\c -> element c {}) $ withRouter $ toReactComponent identity component {
               , renderCell: \rowData -> R.text rowData.createdDate
               }
             ]
+        , onColumnChange: toNullable Nothing
         }
 
     overviewTableData =

docs/Examples/Table.example.purs

@@ -35,6 +35,32 @@ docs = unit # make component { initialState, render }
       { sort: SortString "asc"
       , sortBy: Just (ColumnName "createdDate")
       , selected: ["10cms9", "0mf7w"]
+      , ex2Columns:
+          [ { required: true
+            , name: ColumnName "product-type"
+            , label: notNull "Product type"
+            , filterLabel: null
+            , sortBy: notNull $ ColumnName "title"
+            , style: css {}
+            , hidden: false
+            , sticky: false
+            , renderCell: \rowData ->
+                Link.link Link.defaults
+                  { href = rowData.link
+                  , text = R.text rowData.title
+                  }
+            }
+          , { required: true
+            , name: ColumnName "created-date"
+            , label: notNull "Created date"
+            , filterLabel: null
+            , sortBy: notNull $ ColumnName "createdDate"
+            , style: css {}
+            , hidden: false
+            , sticky: false
+            , renderCell: \rowData -> R.text rowData.createdDate
+            }
+          ]
       }
 
     render self =
@@ -109,6 +135,7 @@ docs = unit # make component { initialState, render }
                             , renderCell: \rowData -> R.text rowData.createdDate
                             }
                           ]
+                      , onColumnChange: null
                       }
                   ]
               }
@@ -149,32 +176,9 @@ docs = unit # make component { initialState, render }
                           , renderCell: R.text <<< _.title
                           , sticky: false
                           }
-                      , columns:
-                          [ { required: true
-                            , name: ColumnName "product-type"
-                            , label: notNull "Product type"
-                            , filterLabel: null
-                            , sortBy: notNull $ ColumnName "title"
-                            , style: css {}
-                            , hidden: false
-                            , sticky: false
-                            , renderCell: \rowData ->
-                                Link.link Link.defaults
-                                  { href = rowData.link
-                                  , text = R.text rowData.title
-                                  }
-                            }
-                          , { required: true
-                            , name: ColumnName "created-date"
-                            , label: notNull "Created date"
-                            , filterLabel: null
-                            , sortBy: notNull $ ColumnName "createdDate"
-                            , style: css {}
-                            , hidden: false
-                            , sticky: false
-                            , renderCell: \rowData -> R.text rowData.createdDate
-                            }
-                          ]
+                      , columns: self.state.ex2Columns
+                      , onColumnChange: notNull $ mkEffectFn1 \columns ->
+                          self.setState _ { ex2Columns = columns }
                       }
                   ]
               }

src/Lumi/Components/Form.purs

@@ -1,9 +1,8 @@
 module Lumi.Components.Form
-  ( module Internal
+  ( module Defaults
+  , module Internal
   , module Validation
   , build
-  , buildConcurrently
-  , buildWithDefaults
   , static
   , section
   , inputBox
@@ -66,7 +65,8 @@ import JSS (JSS, jss)
 import Lumi.Components.Color (colors)
 import Lumi.Components.Column (column)
 import Lumi.Components.FetchCache as FetchCache
-import Lumi.Components.Form.Internal (FormBuilder(..), SeqFormBuilder, Tree(..), formBuilder, formBuilder_, invalidate, revalidate, sequential, pruneTree)
+import Lumi.Components.Form.Defaults (formDefaults) as Defaults
+import Lumi.Components.Form.Internal (FormBuilder(..), SeqFormBuilder, Tree(..), formBuilder, formBuilder_, invalidate, pruneTree, sequential)
 import Lumi.Components.Form.Internal (FormBuilder, SeqFormBuilder, formBuilder, formBuilder_, invalidate, listen, parallel, revalidate, sequential) as Internal
 import Lumi.Components.Form.Validation (Validated(..), Validator, _Validated, fromValidated, mustBe, mustEqual, nonEmpty, nonEmptyArray, nonNull, validNumber, validInt, optional, setFresh, setModified, validated, warn) as Validation
 import Lumi.Components.Input (alignToInput)
@@ -89,7 +89,7 @@ import React.Basic.DOM (css, unsafeCreateDOMComponent)
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (capture, stopPropagation, targetChecked, targetValue)
 import React.Basic.Events as Events
-import Record (disjointUnion, get)
+import Record (get)
 import Type.Row (class Cons)
 import Unsafe.Coerce (unsafeCoerce)
 
@@ -98,30 +98,6 @@ import Unsafe.Coerce (unsafeCoerce)
 -- | _Note_: this function should be fully applied, to avoid remounting
 -- | the component on each render.
 build
-  :: forall props unvalidated result
-   . FormBuilder { readonly :: Boolean | props } unvalidated result
-  -> { value :: unvalidated
-     , onChange :: Maybe result -> unvalidated -> Effect Unit
-     , inlineTable :: Boolean
-     , forceTopLabels :: Boolean
-     , readonly :: Boolean
-     | props
-     }
-  -> JSX
-build editor = \props ->
-  form props
-    { onChange = \f ->
-        let v = f props.value
-         in props.onChange (revalidate editor (unsafeCoerce props) v) v
-    }
-  where
-     form = buildConcurrently editor
-
--- | Create a React component for a form from a `FormBuilder`.
--- |
--- | _Note_: this function should be fully applied, to avoid remounting
--- | the component on each render.
-buildConcurrently
   :: forall props unvalidated result
    . FormBuilder { readonly :: Boolean | props } unvalidated result
   -> { value :: unvalidated
@@ -132,7 +108,7 @@ buildConcurrently
      | props
      }
   -> JSX
-buildConcurrently editor = makeStateless (createComponent "Form") render where
+build editor = makeStateless (createComponent "Form") render where
   render props@{ value, onChange, inlineTable, forceTopLabels, readonly } =
 
     let forest = Array.mapMaybe pruneTree $ edit onChange
@@ -159,8 +135,10 @@ buildConcurrently editor = makeStateless (createComponent "Form") render where
           Child { key, child } ->
             maybe identity keyed key $ child
           Wrapper { key, children } ->
-            maybe identity keyed key $
-              fragment [ intercalate fieldDivider (map toRow children) ]
+            R.div
+              { key: fromMaybe "" key
+              , children: [ intercalate fieldDivider (map toRow children) ]
+              }
           Node { label, key, required, validationError, children } ->
             maybe identity keyed key $ labeledField
               { label: text body
@@ -182,29 +160,6 @@ buildConcurrently editor = makeStateless (createComponent "Form") render where
           , children: surround fieldDivider (map toRow forest)
           }
 
--- | Utility function.
--- | Create a React component for a form from a `FormBuilder` and a default
--- | form state. This default value is used in the form whenever the `value`
--- | prop is `Nothing`.
--- |
--- | _Note_: this function should be fully applied, to avoid remounting
--- | the component on each render.
-buildWithDefaults
-  :: forall props unvalidated result
-   . unvalidated
-  -> FormBuilder { readonly :: Boolean | props } unvalidated result
-  -> { value :: Maybe unvalidated
-     , onChange :: Maybe result -> unvalidated -> Effect Unit
-     , inlineTable :: Boolean
-     , forceTopLabels :: Boolean
-     , readonly :: Boolean
-     | props
-     }
-  -> JSX
-buildWithDefaults defaults editor = \props -> form props { value = fromMaybe defaults props.value }
-  where
-     form = build editor
-
 -- | Create an always-valid `FormBuilder` that renders the supplied `JSX`.
 static :: forall props value. JSX -> FormBuilder props value Unit
 static edit = formBuilder \_ _ -> { edit: const edit, validate: pure unit }
@@ -786,17 +741,20 @@ fetch_ loading getData = fetch loading "" (const getData)
 -- | A dummy form that, whenever the specified key changes, performs an
 -- | asynchronous effect. It displays the specified JSX while the effect is not
 -- | complete, sets the form data to the result of the effect and returns it.
-asyncEffect :: forall props a. String -> JSX -> Aff a -> FormBuilder props a a
+asyncEffect :: forall props a. String -> JSX -> Aff (a -> a) -> FormBuilder props a a
 asyncEffect key loader aff =
-  withKey key $ formBuilder_ \_ _ onChange ->
-    keyed key $ asyncWithLoader loader do
-      newValue <- aff
-      liftEffect $ onChange newValue
-      mempty
+  withKey key $ formBuilder \_ value ->
+    { edit: \onChange ->
+        keyed key $ asyncWithLoader loader do
+          f <- aff
+          liftEffect $ onChange f
+          mempty
+    , validate: Just value
+    }
 
 -- | A dummy form that, whenever the specified key changes, performs an
 -- | effect. It sets the form data to the result of the effect and returns it.
-effect :: forall props a. String -> Effect a -> FormBuilder props a a
+effect :: forall props a. String -> Effect (a -> a) -> FormBuilder props a a
 effect key = asyncEffect key mempty <<< liftEffect
 
 -- | Sequential `SeqFormBuilder` used for asynchronously initializing some
@@ -823,16 +781,18 @@ initializer
   :: forall props value
    . Nub (initialized :: Boolean | value) (initialized :: Boolean | value)
   => JSX
-  -> (props -> {| value } -> Aff {| value })
+  -> (props -> {| value } -> Aff ({ initialized :: Boolean | value } -> { initialized :: Boolean | value }))
   -> SeqFormBuilder props { initialized :: Boolean | value } Unit
 initializer loader aff =
   sequential "initializer" $ withValue \value@{ initialized } -> withProps \props ->
-    if initialized
-      then pure unit
-      else
-        invalidate $ void $ asyncEffect "" loader do
-          newValue <- aff props (contractValue value)
-          pure $ disjointUnion { initialized: true } newValue
+    if initialized then
+      pure unit
+    else
+      invalidate
+        $ void
+        $ asyncEffect "" loader
+        $ map (_{ initialized = true } <<< _)
+        $ aff props (contractValue value)
   where
     contractValue :: { initialized :: Boolean | value } -> {| value }
     contractValue = unsafeCoerce

src/Lumi/Components/Form/Defaults.purs

@@ -10,7 +10,7 @@ import Prelude
 import Data.Either (Either(..))
 import Data.Maybe (Maybe(..))
 import Data.Symbol (class IsSymbol, SProxy(..))
-import Lumi.Components.Form (Validated(..))
+import Lumi.Components.Form.Validation (Validated(..))
 import Prim.Row (class Cons, class Lacks)
 import Prim.RowList (class RowToList, Cons, Nil)
 import Record.Builder (Builder)

src/Lumi/Components/Loader.purs

@@ -40,7 +40,7 @@ styles = jss
 spinnerMixin :: { radius :: String, borderWidth :: String } -> JSS
 spinnerMixin { radius, borderWidth } = jss
   { boxSizing: "border-box"
-  , content: ""
+  , content: "\"\""
   , display: "inline-block"
   , height: radius
   , width: radius

src/Lumi/Components/Table.js

@@ -19,6 +19,10 @@ exports.checkIsEventTargetInTree = function(domNode, e) {
   return e.target === domNode || domNode.contains(e.target);
 };
 
+exports.isRightClick = function(e) {
+  return e.button === 2;
+};
+
 exports.hasWindowSelection = function() {
   return window.getSelection().type === "Range";
 };