2020-03-31 22:43:32 +03:00
|
|
|
module Examples.Checkbox exposing (Msg, State, example)
|
2018-06-20 18:06:11 +03:00
|
|
|
|
|
|
|
{-|
|
|
|
|
|
2020-03-31 22:43:32 +03:00
|
|
|
@docs Msg, State, example
|
2018-06-20 18:06:11 +03:00
|
|
|
|
|
|
|
-}
|
|
|
|
|
2020-06-19 23:41:28 +03:00
|
|
|
import AtomicDesignType exposing (AtomicDesignType(..))
|
2020-03-24 03:33:42 +03:00
|
|
|
import Category exposing (Category(..))
|
2019-02-12 00:31:55 +03:00
|
|
|
import Css
|
2020-03-31 23:20:03 +03:00
|
|
|
import Example exposing (Example)
|
2018-06-20 18:06:11 +03:00
|
|
|
import Html.Styled as Html exposing (..)
|
2019-02-12 00:31:55 +03:00
|
|
|
import Html.Styled.Attributes exposing (css)
|
2020-06-20 00:45:32 +03:00
|
|
|
import KeyboardSupport exposing (Direction(..), Key(..))
|
2019-04-04 03:11:41 +03:00
|
|
|
import Nri.Ui.Checkbox.V5 as Checkbox
|
2018-06-20 18:06:11 +03:00
|
|
|
import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..))
|
2019-07-18 00:31:56 +03:00
|
|
|
import Nri.Ui.PremiumCheckbox.V6 as PremiumCheckbox
|
2018-06-20 18:06:11 +03:00
|
|
|
import Set exposing (Set)
|
2020-03-24 03:48:53 +03:00
|
|
|
import Sort.Set
|
2018-06-20 18:06:11 +03:00
|
|
|
|
|
|
|
|
|
|
|
{-| -}
|
|
|
|
type Msg
|
|
|
|
= ToggleCheck Id Bool
|
|
|
|
| NoOp
|
|
|
|
|
|
|
|
|
|
|
|
{-| -}
|
|
|
|
type alias State =
|
|
|
|
{ isChecked : Set String
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
{-| -}
|
2020-03-31 23:20:03 +03:00
|
|
|
example : Example State Msg
|
2020-03-31 22:43:32 +03:00
|
|
|
example =
|
2020-09-09 21:43:10 +03:00
|
|
|
{ name = "Checkbox"
|
|
|
|
, version = 5
|
2020-03-31 22:43:32 +03:00
|
|
|
, state = init
|
|
|
|
, update = update
|
2020-03-31 22:48:26 +03:00
|
|
|
, subscriptions = \_ -> Sub.none
|
2020-03-31 22:43:32 +03:00
|
|
|
, view =
|
|
|
|
\state ->
|
|
|
|
[ viewInteractableCheckbox "styleguide-checkbox-interactable" state
|
|
|
|
, viewIndeterminateCheckbox "styleguide-checkbox-indeterminate" state
|
|
|
|
, viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state
|
|
|
|
, viewDisabledCheckbox "styleguide-checkbox-disabled" state
|
|
|
|
, viewMultilineCheckboxes
|
|
|
|
, h3 [] [ text "Premium Checkboxes" ]
|
|
|
|
, viewPremiumCheckboxes state
|
|
|
|
]
|
|
|
|
, categories = [ Inputs ]
|
2020-06-20 00:16:10 +03:00
|
|
|
, atomicDesignType = Molecule
|
2020-06-20 00:45:32 +03:00
|
|
|
, keyboardSupport = []
|
2018-06-20 18:06:11 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
{-| -}
|
|
|
|
init : State
|
|
|
|
init =
|
|
|
|
{ isChecked = Set.empty
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
{-| -}
|
|
|
|
update : Msg -> State -> ( State, Cmd Msg )
|
|
|
|
update msg state =
|
|
|
|
case msg of
|
|
|
|
ToggleCheck id checked ->
|
|
|
|
let
|
|
|
|
isChecked =
|
|
|
|
if checked then
|
|
|
|
Set.insert id state.isChecked
|
2018-09-26 17:02:10 +03:00
|
|
|
|
2018-06-20 18:06:11 +03:00
|
|
|
else
|
|
|
|
Set.remove id state.isChecked
|
|
|
|
in
|
|
|
|
( { state | isChecked = isChecked }, Cmd.none )
|
|
|
|
|
|
|
|
NoOp ->
|
|
|
|
( state, Cmd.none )
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-- INTERNAL
|
|
|
|
|
|
|
|
|
|
|
|
viewInteractableCheckbox : Id -> State -> Html Msg
|
|
|
|
viewInteractableCheckbox id state =
|
|
|
|
Checkbox.viewWithLabel
|
|
|
|
{ identifier = id
|
|
|
|
, label = "This is an interactable checkbox!"
|
|
|
|
, setterMsg = ToggleCheck id
|
|
|
|
, selected = isSelected id state
|
|
|
|
, disabled = False
|
2018-06-20 20:52:02 +03:00
|
|
|
, theme = Checkbox.Square
|
2018-06-20 18:06:11 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
viewIndeterminateCheckbox : Id -> State -> Html Msg
|
|
|
|
viewIndeterminateCheckbox id state =
|
|
|
|
Checkbox.viewWithLabel
|
|
|
|
{ identifier = id
|
|
|
|
, label = "This Checkbox is set in an indeterminate state"
|
|
|
|
, setterMsg = ToggleCheck id
|
|
|
|
, selected = Checkbox.PartiallySelected
|
|
|
|
, disabled = True
|
2018-06-20 20:52:02 +03:00
|
|
|
, theme = Checkbox.Square
|
2018-06-20 18:06:11 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
viewLockedOnInsideCheckbox : Id -> State -> Html Msg
|
|
|
|
viewLockedOnInsideCheckbox id state =
|
|
|
|
Checkbox.viewWithLabel
|
|
|
|
{ identifier = id
|
2018-06-26 19:36:43 +03:00
|
|
|
, label = "I'm a locked Checkbox"
|
2018-06-20 18:06:11 +03:00
|
|
|
, setterMsg = ToggleCheck id
|
|
|
|
, selected = Checkbox.NotSelected
|
|
|
|
, disabled = True
|
2018-06-26 19:36:43 +03:00
|
|
|
, theme = Checkbox.Locked
|
2018-06-20 18:06:11 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
viewDisabledCheckbox : Id -> State -> Html Msg
|
|
|
|
viewDisabledCheckbox id state =
|
|
|
|
Checkbox.viewWithLabel
|
|
|
|
{ identifier = id
|
|
|
|
, label = "Disabled theme"
|
|
|
|
, setterMsg = ToggleCheck id
|
|
|
|
, selected = isSelected id state
|
2018-06-20 18:13:08 +03:00
|
|
|
, disabled = True
|
2018-06-20 20:52:02 +03:00
|
|
|
, theme = Checkbox.Square
|
2018-06-20 18:06:11 +03:00
|
|
|
}
|
|
|
|
|
2019-02-12 00:38:37 +03:00
|
|
|
|
2019-02-12 00:31:55 +03:00
|
|
|
viewMultilineCheckboxes : Html Msg
|
|
|
|
viewMultilineCheckboxes =
|
|
|
|
Html.section
|
|
|
|
[ css [ Css.width (Css.px 500) ] ]
|
|
|
|
[ Html.h3 [] [ Html.text "Multiline Text in Checkboxes" ]
|
|
|
|
, Checkbox.viewWithLabel
|
2019-11-15 19:44:11 +03:00
|
|
|
{ identifier = "fake-not-selected"
|
2019-02-12 00:31:55 +03:00
|
|
|
, label = "Ut nobis et vel. Nulla rerum sit eos accusamus placeat. Iure sunt earum voluptatibus autem ratione soluta sint.\n\nIste perferendis eum corporis ullam magnam incidunt eos."
|
2019-11-15 19:44:11 +03:00
|
|
|
, setterMsg = ToggleCheck "fake-not-selected"
|
2019-02-12 00:31:55 +03:00
|
|
|
, selected = Checkbox.NotSelected
|
|
|
|
, disabled = False
|
|
|
|
, theme = Checkbox.Square
|
|
|
|
}
|
|
|
|
, Checkbox.viewWithLabel
|
2019-11-15 19:44:11 +03:00
|
|
|
{ identifier = "fake-partially-selected"
|
2019-02-12 00:31:55 +03:00
|
|
|
, label = "Ut nobis et vel. Nulla rerum sit eos accusamus placeat. Iure sunt earum voluptatibus autem ratione soluta sint.\n\nIste perferendis eum corporis ullam magnam incidunt eos."
|
|
|
|
, setterMsg = ToggleCheck "fake"
|
|
|
|
, selected = Checkbox.PartiallySelected
|
|
|
|
, disabled = True
|
|
|
|
, theme = Checkbox.Square
|
|
|
|
}
|
|
|
|
, Checkbox.viewWithLabel
|
2019-11-15 19:44:11 +03:00
|
|
|
{ identifier = "fake-not-selected-locked"
|
2019-02-12 00:31:55 +03:00
|
|
|
, label = "Ut nobis et vel. Nulla rerum sit eos accusamus placeat. Iure sunt earum voluptatibus autem ratione soluta sint.\n\nIste perferendis eum corporis ullam magnam incidunt eos."
|
|
|
|
, setterMsg = ToggleCheck "fake"
|
|
|
|
, selected = Checkbox.NotSelected
|
|
|
|
, disabled = True
|
|
|
|
, theme = Checkbox.Locked
|
|
|
|
}
|
|
|
|
, Checkbox.viewWithLabel
|
2019-11-15 19:44:11 +03:00
|
|
|
{ identifier = "fake-not-selected-square"
|
2019-02-12 00:31:55 +03:00
|
|
|
, label = "Ut nobis et vel. Nulla rerum sit eos accusamus placeat. Iure sunt earum voluptatibus autem ratione soluta sint.\n\nIste perferendis eum corporis ullam magnam incidunt eos."
|
|
|
|
, setterMsg = ToggleCheck "fake"
|
|
|
|
, selected = Checkbox.NotSelected
|
|
|
|
, disabled = True
|
|
|
|
, theme = Checkbox.Square
|
|
|
|
}
|
|
|
|
]
|
|
|
|
|
2018-06-20 18:06:11 +03:00
|
|
|
|
|
|
|
viewPremiumCheckboxes : State -> Html Msg
|
|
|
|
viewPremiumCheckboxes state =
|
|
|
|
Html.div []
|
2020-09-04 23:59:35 +03:00
|
|
|
[ PremiumCheckbox.view
|
|
|
|
{ label = "Identify Adjectives 1 (Premium)"
|
|
|
|
, id = "premium-checkbox-identify-adjectives-premium"
|
|
|
|
, selected =
|
|
|
|
if Set.member "premium-1" state.isChecked then
|
|
|
|
Checkbox.Selected
|
|
|
|
|
|
|
|
else
|
|
|
|
Checkbox.NotSelected
|
2019-06-04 03:14:21 +03:00
|
|
|
, disabled = False
|
|
|
|
, isLocked = False
|
2019-07-18 00:31:56 +03:00
|
|
|
, isPremium = True
|
2020-09-04 23:59:35 +03:00
|
|
|
, onChange = ToggleCheck "premium-1"
|
|
|
|
, onLockedClick = NoOp
|
2019-06-04 03:14:21 +03:00
|
|
|
}
|
2020-09-04 23:59:35 +03:00
|
|
|
, PremiumCheckbox.view
|
2019-07-18 00:31:56 +03:00
|
|
|
{ label = "Identify Adjectives 2 (Free)"
|
2020-09-04 23:59:35 +03:00
|
|
|
, id = "premium-checkbox-identify-adjectives-free"
|
|
|
|
, selected =
|
|
|
|
if Set.member "premium-2" state.isChecked then
|
|
|
|
Checkbox.Selected
|
|
|
|
|
|
|
|
else
|
|
|
|
Checkbox.NotSelected
|
2019-06-04 03:14:21 +03:00
|
|
|
, disabled = False
|
2019-07-18 00:31:56 +03:00
|
|
|
, isLocked = False
|
|
|
|
, isPremium = False
|
2020-09-04 23:59:35 +03:00
|
|
|
, onChange = ToggleCheck "premium-2"
|
|
|
|
, onLockedClick = NoOp
|
2019-06-04 03:14:21 +03:00
|
|
|
}
|
2020-09-04 23:59:35 +03:00
|
|
|
, PremiumCheckbox.view
|
|
|
|
{ label = "Revising Wordy Phrases 3 (Premium, Disabled)"
|
|
|
|
, id = "premium-checkbox-premium-disabled"
|
|
|
|
, selected =
|
|
|
|
if Set.member "premium-3" state.isChecked then
|
|
|
|
Checkbox.Selected
|
|
|
|
|
|
|
|
else
|
|
|
|
Checkbox.NotSelected
|
2019-06-04 03:14:21 +03:00
|
|
|
, disabled = True
|
|
|
|
, isLocked = True
|
2019-07-18 00:31:56 +03:00
|
|
|
, isPremium = True
|
2020-09-04 23:59:35 +03:00
|
|
|
, onChange = ToggleCheck "premium-3"
|
|
|
|
, onLockedClick = NoOp
|
2019-06-04 03:14:21 +03:00
|
|
|
}
|
2018-06-20 18:06:11 +03:00
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
type alias Id =
|
|
|
|
String
|
|
|
|
|
|
|
|
|
|
|
|
isSelected : Id -> State -> Checkbox.IsSelected
|
|
|
|
isSelected id state =
|
|
|
|
if Set.member id state.isChecked then
|
|
|
|
Checkbox.Selected
|
2018-09-26 17:02:10 +03:00
|
|
|
|
2018-06-20 18:06:11 +03:00
|
|
|
else
|
|
|
|
Checkbox.NotSelected
|