mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-25 22:53:34 +03:00
Copy sortable table code from monolith
This commit is contained in:
parent
bef63929b5
commit
4a62b8271d
99
src/Nri/Ui/SortableTable/V1.elm
Normal file
99
src/Nri/Ui/SortableTable/V1.elm
Normal file
@ -0,0 +1,99 @@
|
||||
module Nri.Ui.SortableTable.V1 exposing (Direction(..), arrow, arrowActive, arrows, downArrow, sortActive, sortButton, sortHeader, sortInactive, upArrow)
|
||||
|
||||
import Css exposing (..)
|
||||
import Css.File exposing (Stylesheet, UniqueClass, stylesheet, uniqueClass)
|
||||
import Css.Global exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass)
|
||||
import Css.VendorPrefixed
|
||||
import FlexBoxWithVendorPrefix as FlexBox
|
||||
import Nri.Ui.Colors.V1
|
||||
|
||||
|
||||
sortHeader : UniqueClass
|
||||
sortHeader =
|
||||
uniqueClass
|
||||
[ FlexBox.displayFlex
|
||||
, FlexBox.alignItems FlexBox.center
|
||||
, FlexBox.justifyContent FlexBox.spaceBetween
|
||||
, cursor pointer
|
||||
, Css.VendorPrefixed.property "user-select" "none"
|
||||
]
|
||||
|
||||
|
||||
sortButton : UniqueClass
|
||||
sortButton =
|
||||
uniqueClass
|
||||
[ padding (px 2)
|
||||
, color Nri.Ui.Colors.V1.gray75
|
||||
]
|
||||
|
||||
|
||||
sortInactive : UniqueClass
|
||||
sortInactive =
|
||||
uniqueClass
|
||||
[ fontWeight normal ]
|
||||
|
||||
|
||||
sortActive : UniqueClass
|
||||
sortActive =
|
||||
uniqueClass
|
||||
[ fontWeight bold ]
|
||||
|
||||
|
||||
arrows : UniqueClass
|
||||
arrows =
|
||||
uniqueClass
|
||||
[ FlexBox.displayFlex
|
||||
, FlexBox.flexDirection FlexBox.column
|
||||
, FlexBox.alignItems FlexBox.center
|
||||
, FlexBox.justifyContent FlexBox.center
|
||||
]
|
||||
|
||||
|
||||
type Direction
|
||||
= Up
|
||||
| Down
|
||||
|
||||
|
||||
arrow : Direction -> UniqueClass
|
||||
arrow direction =
|
||||
let
|
||||
result =
|
||||
case direction of
|
||||
Up ->
|
||||
[]
|
||||
|
||||
Down ->
|
||||
[ transform <| rotate (deg 180) ]
|
||||
in
|
||||
uniqueClass
|
||||
[ width (px 8)
|
||||
, height (px 6)
|
||||
, position relative
|
||||
, margin2 (px 1) zero
|
||||
, children
|
||||
[ selector "svg"
|
||||
([ position absolute
|
||||
, top zero
|
||||
, left zero
|
||||
]
|
||||
++ result
|
||||
)
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
upArrow : UniqueClass
|
||||
upArrow =
|
||||
arrow Up
|
||||
|
||||
|
||||
downArrow : UniqueClass
|
||||
downArrow =
|
||||
arrow Down
|
||||
|
||||
|
||||
arrowActive : UniqueClass
|
||||
arrowActive =
|
||||
uniqueClass
|
||||
[ color Nri.Ui.Colors.V1.azure
|
||||
]
|
94
styleguide-app/Examples/SortableTable.elm
Normal file
94
styleguide-app/Examples/SortableTable.elm
Normal file
@ -0,0 +1,94 @@
|
||||
module Examples.SortableTable exposing (Msg, State, example, init, update)
|
||||
|
||||
{-|
|
||||
|
||||
@docs Msg, State, example, init, update
|
||||
|
||||
-}
|
||||
|
||||
import Html
|
||||
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
|
||||
import Nri.Ui.SortableTable.V1 as SortableTable
|
||||
|
||||
|
||||
type Column
|
||||
= FirstName
|
||||
| LastName
|
||||
| Coins
|
||||
|
||||
|
||||
{-| -}
|
||||
type Msg
|
||||
= NoOp
|
||||
| SetSortState (SortableTable.State Column)
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias State =
|
||||
{ sortState : SortableTable.State Column }
|
||||
|
||||
|
||||
{-| -}
|
||||
example : (Msg -> msg) -> State -> ModuleExample msg
|
||||
example parentMessage { sortState } =
|
||||
{ filename = "Nri.Ui.SortableTable.V1"
|
||||
, category = Layout
|
||||
, content =
|
||||
let
|
||||
config =
|
||||
{ updateMsg = SetSortState
|
||||
, columns =
|
||||
[ SortableTable.string
|
||||
{ id = FirstName
|
||||
, header = "First name"
|
||||
, value = .firstName
|
||||
, width = 125
|
||||
}
|
||||
, SortableTable.string
|
||||
{ id = LastName
|
||||
, header = "Last name"
|
||||
, value = .lastName
|
||||
, width = 125
|
||||
}
|
||||
, SortableTable.custom
|
||||
{ id = Coins
|
||||
, header = Html.text "Coins"
|
||||
, view = .coins >> String.fromInt >> Html.text
|
||||
, sorter = SortableTable.simpleSort .coins
|
||||
, width = 125
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
data =
|
||||
[ { firstName = "First1", lastName = "Last1", coins = 1 }
|
||||
, { firstName = "First2", lastName = "Last2", coins = 2 }
|
||||
, { firstName = "First3", lastName = "Last3", coins = 3 }
|
||||
, { firstName = "First4", lastName = "Last4", coins = 4 }
|
||||
, { firstName = "First5", lastName = "Last5", coins = 5 }
|
||||
]
|
||||
in
|
||||
[ Html.h4 [] [ Html.text "With sortable headers" ]
|
||||
, SortableTable.view config sortState data
|
||||
, Html.h4 [] [ Html.text "Loading" ]
|
||||
, SortableTable.viewLoading config sortState
|
||||
]
|
||||
|> List.map (Html.map parentMessage)
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
init : State
|
||||
init =
|
||||
{ sortState = SortableTable.init FirstName }
|
||||
|
||||
|
||||
{-| -}
|
||||
update : Msg -> State -> ( State, Cmd Msg )
|
||||
update msg state =
|
||||
case msg of
|
||||
NoOp ->
|
||||
( state, Cmd.none )
|
||||
|
||||
SetSortState sortState ->
|
||||
( { state | sortState = sortState }, Cmd.none )
|
@ -17,6 +17,7 @@ import Examples.SegmentedControl
|
||||
import Examples.Select
|
||||
import Examples.Slide
|
||||
import Examples.SlideModal
|
||||
import Examples.SortableTable
|
||||
import Examples.Table
|
||||
import Examples.Tabs
|
||||
import Examples.Text
|
||||
@ -44,6 +45,7 @@ type alias ModuleStates =
|
||||
, modalExampleState : Examples.Modal.State
|
||||
, slideModalExampleState : Examples.SlideModal.State
|
||||
, slideExampleState : Examples.Slide.State
|
||||
, sortableTableState : Examples.SortableTable.State
|
||||
, tabsExampleState : Examples.Tabs.Tab
|
||||
}
|
||||
|
||||
@ -64,6 +66,7 @@ init =
|
||||
, modalExampleState = Examples.Modal.init
|
||||
, slideModalExampleState = Examples.SlideModal.init
|
||||
, slideExampleState = Examples.Slide.init
|
||||
, sortableTableState = Examples.SortableTable.init
|
||||
, tabsExampleState = Examples.Tabs.First
|
||||
}
|
||||
|
||||
@ -84,6 +87,7 @@ type Msg
|
||||
| ModalExampleMsg Examples.Modal.Msg
|
||||
| SlideModalExampleMsg Examples.SlideModal.Msg
|
||||
| SlideExampleMsg Examples.Slide.Msg
|
||||
| SortableTableMsg Examples.SortableTable.Msg
|
||||
| TabsExampleMsg Examples.Tabs.Tab
|
||||
| NoOp
|
||||
|
||||
@ -221,6 +225,15 @@ update outsideMsg moduleStates =
|
||||
, Cmd.map SlideExampleMsg cmd
|
||||
)
|
||||
|
||||
SortableTableMsg msg ->
|
||||
let
|
||||
( sortableTableState, cmd ) =
|
||||
Examples.SortableTable.update msg moduleStates.sortableTableState
|
||||
in
|
||||
( { moduleStates | sortableTableState = sortableTableState }
|
||||
, Cmd.map SortableTableMsg cmd
|
||||
)
|
||||
|
||||
TabsExampleMsg tab ->
|
||||
( { moduleStates | tabsExampleState = tab }
|
||||
, Cmd.none
|
||||
@ -272,6 +285,7 @@ nriThemedModules model =
|
||||
, Examples.Modal.example ModalExampleMsg model.modalExampleState
|
||||
, Examples.SlideModal.example SlideModalExampleMsg model.slideModalExampleState
|
||||
, Examples.Slide.example SlideExampleMsg model.slideExampleState
|
||||
, Examples.SortableTable.example SortableTableMsg model.sortableTableState
|
||||
, Examples.Tabs.example TabsExampleMsg model.tabsExampleState
|
||||
]
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user