Allow primary columns without getLink (#68)

* Allow primary columns without getLink

* Simplify cleanUpNullables

Author: Madeline Trotter

docs/Examples/Layouts.example.purs

@@ -6,12 +6,13 @@ import Data.Array (index)
 import Data.Maybe (Maybe(..), fromMaybe)
 import Data.Newtype (un)
 import Data.NonEmpty ((:|))
-import Data.Nullable (toNullable)
+import Data.Nullable (notNull, toNullable)
 import Data.String (Pattern(..), split)
 import Effect.Console (log)
 import Effect.Uncurried (mkEffectFn1, mkEffectFn2, runEffectFn1)
 import Lumi.Components.Button (button, defaults)
 import Lumi.Components.Column (column_)
+import Lumi.Components.Example (example)
 import Lumi.Components.Images (avatar_, productThumb_)
 import Lumi.Components.Layouts.Centered as Centered
 import Lumi.Components.Layouts.OneColumnWithHeader as OneColumnWithHeader
@@ -24,7 +25,6 @@ import Lumi.Components.Tab (TabId(..), TabKey(..), urlParts)
 import Lumi.Components.Table (ColumnName(..), table)
 import Lumi.Components.Text (body_, h2_, p_, sectionHeader_)
 import Lumi.Components.Utility.ReactRouter (RouterProps, withRouter)
-import Lumi.Components.Example (example)
 import React.Basic (Component, JSX, createComponent, element, toReactComponent)
 import React.Basic.DOM as R
 import Web.HTML.History (URL(..))
@@ -241,7 +241,7 @@ docs = (\c -> element c {}) $ withRouter $ toReactComponent identity component {
             , filterLabel: toNullable $ Just "Product title"
             , sortBy: toNullable Nothing
             , style: R.css {}
-            , getLink: _.link
+            , getLink: notNull _.link
             , sticky: false
             , renderCell: \rowData ->
                 lockup

docs/Examples/Modal.example.purs

@@ -6,7 +6,7 @@ import Data.Maybe (Maybe(..))
 import Data.Monoid (guard)
 import Data.Nullable (notNull, null)
 import Lumi.Components.Button as Button
-import Lumi.Components.Button (ButtonState(..), button, secondary)
+import Lumi.Components.Button (button, secondary)
 import Lumi.Components.Column (column_)
 import Lumi.Components.Modal (dialog, errorModal, modal)
 import Lumi.Components.Size (Size(..))

docs/Examples/Table.example.purs

@@ -13,6 +13,7 @@ import Effect.Uncurried (mkEffectFn1, mkEffectFn2)
 import Foreign (readString, unsafeToForeign)
 import Foreign.Index (readProp)
 import Lumi.Components.Column (column, column_)
+import Lumi.Components.Example (example)
 import Lumi.Components.Images (productThumb_)
 import Lumi.Components.Input (input, text_)
 import Lumi.Components.Link as Link
@@ -21,7 +22,6 @@ import Lumi.Components.NativeSelect (defaults, nativeSelect)
 import Lumi.Components.Size (Size(..))
 import Lumi.Components.Table (ColumnName(..), SortString(..), table)
 import Lumi.Components.Text (p_)
-import Lumi.Components.Example (example)
 import React.Basic (Component, JSX, createComponent, make)
 import React.Basic.DOM (css)
 import React.Basic.DOM as R
@@ -117,7 +117,7 @@ docs = unit # make component { initialState, render }
                           , filterLabel: notNull "Product lockup"
                           , sortBy: null
                           , style: css {}
-                          , getLink: _.link
+                          , getLink: notNull _.link
                           , renderCell: \rowData ->
                               lockup
                                 { image: Just $ productThumb_ { image: R.img { src: rowData.imgSrc }, size: Small }
@@ -192,7 +192,7 @@ docs = unit # make component { initialState, render }
                           , filterLabel: notNull "Product title"
                           , sortBy: null
                           , style: css {}
-                          , getLink: _.link
+                          , getLink: null -- notNull _.link
                           , renderCell: R.text <<< _.title
                           , sticky: false
                           }
@@ -237,7 +237,7 @@ docs = unit # make component { initialState, render }
                           , filterLabel: notNull "Product title"
                           , sortBy: null
                           , style: css {}
-                          , getLink: _.link
+                          , getLink: notNull _.link
                           , renderCell: R.text <<< _.title
                           , sticky: false
                           }

src/Lumi/Components/Table.purs

@@ -77,7 +77,7 @@ type TableProps row =
         , filterLabel :: Nullable String
         , sortBy :: Nullable ColumnName
         , style :: R.CSS
-        , getLink :: row -> URL
+        , getLink :: Nullable (row -> URL)
         , renderCell :: row -> JSX
         , sticky :: Boolean
         }
@@ -310,7 +310,9 @@ table = make component
       where
         selected = fromMaybe self.state.selected (toMaybe self.props.selected)
 
-        primaryColumn = toMaybe self.props.primaryColumn
+        primaryColumn = cleanUpNullables <$> toMaybe self.props.primaryColumn
+          where
+            cleanUpNullables x = x { getLink = toMaybe x.getLink }
 
         renderTableHead columns tableRef =
           element (R.unsafeCreateDOMComponent "thead")
@@ -472,7 +474,7 @@ type TableRowProps row col_ pcol_ =
           { name :: ColumnName
           , renderCell :: row -> JSX
           , style :: R.CSS
-          , getLink :: row -> URL
+          , getLink :: Maybe (row -> URL)
           , sticky :: Boolean
           | pcol_
           }
@@ -502,14 +504,16 @@ tableRow = make tableRowComponent { initialState: unit, shouldUpdate, render }
       R.tr
         { className: joinWith " "
             $  guard (tableProps.selectable && isSelected) [ "active" ]
-            <> guard (isJust tableProps.primaryColumn) [ "active-row" ]
+            <> guard (isJust $ _.getLink =<< tableProps.primaryColumn) [ "active-row" ]
         , onClick:
             case tableProps.primaryColumn of
-              Nothing  -> Events.handler_ (pure unit)
-              Just col -> Events.handler syntheticEvent \event -> do
-                s <- hasWindowSelection
-                when (not s) $
-                  runEffectFn1 tableProps.onNavigate (col.getLink row)
+              Just { getLink: Just getLink } ->
+                Events.handler syntheticEvent \event -> do
+                  s <- hasWindowSelection
+                  when (not s) $
+                    runEffectFn1 tableProps.onNavigate (getLink row)
+              _ ->
+                Events.handler_ (pure unit)
         , children:
             [ if not tableProps.selectable
                 then empty
@@ -554,11 +558,16 @@ tableRow = make tableRowComponent { initialState: unit, shouldUpdate, render }
         , style: col.style
         , "data-required": true
         , children:
-            Link.link Link.defaults
-              { href = col.getLink row
-              , navigate = Just (runEffectFn1 onNavigate (col.getLink row))
-              , text = col.renderCell row
-              }
+            case col.getLink of
+              Nothing ->
+                col.renderCell row
+              Just getLink ->
+                Link.link Link.defaults
+                  { href = getLink row
+                  , navigate = Just (runEffectFn1 onNavigate (getLink row))
+                  , text = col.renderCell row
+                  , className = Just "primary-cell-link"
+                  }
         }
 
     renderBodyRowCell row col =
@@ -707,7 +716,7 @@ styles = jss
                       , textOverflow: "ellipsis"
                       , backgroundColor: cssStringHSLA colors.white
 
-                      , "&.primary-cell a":
+                      , "&.primary-cell a.lumi.primary-cell-link":
                           { color: cssStringHSLA colors.primary
                           }
                       }