@@ -5,22 +5,30 @@ import Prelude
55import Data.Array.NonEmpty (filter , fromArray , fromNonEmpty , length , snoc )
66import Data.BigInt (fromInt , fromString , toNumber , toString )
77import Data.Either (Either (..))
8- import Data.Foldable (sum )
8+ import Data.Foldable (sum , traverse_ )
9+ import Data.Foldable as Array
910import Data.Maybe (Maybe (..), fromMaybe )
1011import Data.NonEmpty ((:|))
12+ import Data.Nullable as Nullable
1113import Data.Number (isNaN )
1214import Data.Number.Format (fixed , toStringWith )
15+ import Effect.Console (log )
1316import Global (readInt )
1417import Lumi.Components.Column (column_ )
15- import Lumi.Components.EditableTable (editableTable )
18+ import Lumi.Components.DropdownButton (dropdownIcon , dropdownIconDefaults )
19+ import Lumi.Components.EditableTable (editableTable , editableTableDefaults )
20+ import Lumi.Components.Example (example )
21+ import Lumi.Components.Input (CheckboxState (..), alignToInput , input , switch )
1622import Lumi.Components.Input as Input
23+ import Lumi.Components.Link as Link
1724import Lumi.Components.Row (row_ )
18- import Lumi.Components.Text ( body , body_ , nbsp , text )
19- import Lumi.Components.Example ( example )
25+ import Lumi.Components.Spacing ( Space (..), hspace )
26+ import Lumi.Components.Text ( body , body_ , nbsp , p_ , text )
2027import React.Basic (Component , JSX , createComponent , make )
2128import React.Basic.DOM as R
22- import React.Basic.DOM.Events (targetValue )
29+ import React.Basic.DOM.Events (stopPropagation , targetChecked , targetValue )
2330import React.Basic.Events (handler )
31+ import React.Basic.Events (handler ) as Events
2432
2533component :: Component Unit
2634component = createComponent " EditableTableExample"
@@ -40,63 +48,72 @@ docs = unit # make component
4048 , price: 0.23
4149 }
4250 ]
51+ , customRemoveCell: false
4352 }
4453
4554 , render: \self ->
46- column_
47- [ example $
48- editableTable
49- { addLabel: " Add another row"
50- , columns:
51- [ { label: " Description"
52- , renderCell: \row -> Input .input Input .text_
53- { value = row.description
54- , onChange = handler targetValue \value ->
55- updateRow self row { description = fromMaybe row.description value }
56- , style = R .css { width: " 100%"
57- }
58- }
59- , { label: " Quantity"
60- , renderCell: \row -> Input .input Input .number
61- { value = toString row.quantity
62- , onChange = handler targetValue \value ->
63- updateRow self row { quantity = fromMaybe row.quantity $ fromString =<< value }
64- }
65- }
66- , { label: " Price"
67- , renderCell: \row -> Input .input Input .number
68- { value = show row.price
69- , onChange = handler targetValue \value ->
70- updateRow self $ fromMaybe row do
71- value' <- readInt 10
72- pure if isNaN value'
73- then row
74- else row { price = value' }
75- }
76- }
77- , { label: " Total"
78- , renderCell: \row -> R .text $ toMoneyString (calculateTotal row)
79- }
55+ column_ $ pure $ example $ column_
56+ [ row_
57+ [ alignToInput $ body_ " Custom remove cell?"
58+ , input switch
59+ { checked = if self.state.customRemoveCell then On else Off
60+ , onChange = Events .handler (stopPropagation >>> targetChecked)
61+ (traverse_ (\checked -> self.setState (_ { customRemoveCell = checked })))
62+ }
63+ ]
64+ , editableTable
65+ { addLabel: " Add another row"
66+ , columns:
67+ [ { label: " Description"
68+ , renderCell: \row -> Input .input Input .text_
69+ { value = row.description
70+ , onChange = handler targetValue \value ->
71+ updateRow self row { description = fromMaybe row.description value }
72+ , style = R .css { width: " 100%"
73+ }
74+ }
75+ , { label: " Quantity"
76+ , renderCell: \row -> Input .input Input .number
77+ { value = toString row.quantity
78+ , onChange = handler targetValue \value ->
79+ updateRow self row { quantity = fromMaybe row.quantity $ fromString =<< value }
80+ }
81+ }
82+ , { label: " Price"
83+ , renderCell: \row -> Input .input Input .number
84+ { value = show row.price
85+ , onChange = handler targetValue \value ->
86+ updateRow self $ fromMaybe row do
87+ value' <- readInt 10
88+ pure if isNaN value'
89+ then row
90+ else row { price = value' }
91+ }
92+ }
93+ , { label: " Total"
94+ , renderCell: \row -> R .text $ toMoneyString (calculateTotal row)
95+ }
96+ ]
97+ , maxRows: 5
98+ , onRowAdd: addRow self
99+ , onRowRemove: removeRow self
100+ , removeCell: removeCell self
101+ , readonly: false
102+ , rowEq: eq
103+ , rows: Right self.state.rows
104+ , summary:
105+ row_
106+ [ text body
107+ { children = [ R .text " Total:"
108+ , style = R .css { fontWeight: " bold"
109+ }
110+ , body_ nbsp
111+ , body_ nbsp
112+ , body_ nbsp
113+ , body_ nbsp
114+ , body_ $ toMoneyString $ sum $ calculateTotal <$> self.state.rows
80115 ]
81- , maxRows: 5
82- , onRowAdd: addRow self
83- , onRowRemove: removeRow self
84- , readonly: false
85- , rowEq: eq
86- , rows: Right self.state.rows
87- , summary:
88- row_
89- [ text body
90- { children = [ R .text " Total:"
91- , style = R .css { fontWeight: " bold"
92- }
93- , body_ nbsp
94- , body_ nbsp
95- , body_ nbsp
96- , body_ nbsp
97- , body_ $ toMoneyString $ sum $ calculateTotal <$> self.state.rows
98- ]
99- }
116+ }
100117 ]
101118 }
102119 where
@@ -129,3 +146,30 @@ docs = unit # make component
129146
130147 toMoneyString value =
131148 " $" 2
149+
150+ removeCell self =
151+ if self.state.customRemoveCell
152+ then \onRemove row ->
153+ row_
154+ [ hspace S16
155+ , dropdownIcon dropdownIconDefaults
156+ { alignment = Nullable .notNull " right"
157+ , content = R .div
158+ { style: R .css { width: " 328px" " 12px"
159+ , children:
160+ [ Link .link Link .defaults
161+ { className = pure " lumi-dropdown-menu-item"
162+ , text = p_ " Do something with this row"
163+ , navigate = pure $ log $ " Did something: "
164+ }
165+ , onRemove # Array .foldMap \onRemove' ->
166+ Link .link Link .defaults
167+ { className = pure " lumi-dropdown-menu-item"
168+ , text = p_ " Remove this row"
169+ , navigate = pure $ onRemove' row
170+ }
171+ ]
172+ }
173+ }
174+ ]
175+ else editableTableDefaults.removeCell
0 commit comments