-----------------------------------------------------------------------------
{-# LANGUAGE RecordWildCards   #-}
{-# LANGUAGE OverloadedStrings #-}
-----------------------------------------------------------------------------
-- |
-- Module      :  Miso.Lynx.Element.List.Property
-- Copyright   :  (C) 2016-2025 David M. Johnson
-- License     :  BSD3-style (see the file LICENSE)
-- Maintainer  :  David M. Johnson <code@dmj.io>
-- Stability   :  experimental
-- Portability :  non-portable
----------------------------------------------------------------------------
module Miso.Lynx.Element.List.Property
  ( -- *** Property
    -- *** Types
    ListOptions (..)
  , ScrollOrientation (..)
  , ListType (..)
  , ListItemSnapAlignment (..)
    -- *** Defaults
  , defaultListOptions
    -- *** Attributes
  , itemKey_
  , key_
  , enableScroll_
  , enableNestedScroll_
  , listMainAxisGap_
  , listCrossAxisGap_
  , sticky_
  , stickyOffset_
  , stickyTop_
  , stickyBottom_
  , bounces_
  , initialScrollIndex_
  , needVisibleItemInfo_
  , upperThresholdItemCount_
  , lowerThresholdItemCount_
  , scrollEventThrottle_
  , itemSnap_
  , needLayoutCompleteInfo_
  , layoutId_
  , preloadBufferCount_
  , scrollBarEnable_
  , reuseIdentifier_
  , fullSpan_
  , estimatedMainAxisSizePx_
  ) where
-----------------------------------------------------------------------------
import Data.Aeson
-----------------------------------------------------------------------------
import Miso.String (MisoString)
import Miso.Types (Attribute)
import Miso.Property
-----------------------------------------------------------------------------
-- | ListOptions
data ListOptions
  = ListOptions
  { ListOptions -> ListType
listType_ :: ListType
    -- ^ list-type: 'single' | 'flow' | 'waterfall'
  , ListOptions -> Int
spanCount_ :: Int
    -- ^ Sets the number of columns or rows for the \<list\> component layout
  , ListOptions -> ScrollOrientation
scrollOrientation_ :: ScrollOrientation
    -- ^ 'vertical' ｜ 'horizontal'
  } deriving (Int -> ListOptions -> ShowS
[ListOptions] -> ShowS
ListOptions -> String
(Int -> ListOptions -> ShowS)
-> (ListOptions -> String)
-> ([ListOptions] -> ShowS)
-> Show ListOptions
forall a.
(Int -> a -> ShowS) -> (a -> String) -> ([a] -> ShowS) -> Show a
$cshowsPrec :: Int -> ListOptions -> ShowS
showsPrec :: Int -> ListOptions -> ShowS
$cshow :: ListOptions -> String
show :: ListOptions -> String
$cshowList :: [ListOptions] -> ShowS
showList :: [ListOptions] -> ShowS
Show, ListOptions -> ListOptions -> Bool
(ListOptions -> ListOptions -> Bool)
-> (ListOptions -> ListOptions -> Bool) -> Eq ListOptions
forall a. (a -> a -> Bool) -> (a -> a -> Bool) -> Eq a
$c== :: ListOptions -> ListOptions -> Bool
== :: ListOptions -> ListOptions -> Bool
$c/= :: ListOptions -> ListOptions -> Bool
/= :: ListOptions -> ListOptions -> Bool
Eq)
-----------------------------------------------------------------------------
-- | ScrollOrientation
data ScrollOrientation
  = Vertical
  | Horizontal
  deriving (Int -> ScrollOrientation -> ShowS
[ScrollOrientation] -> ShowS
ScrollOrientation -> String
(Int -> ScrollOrientation -> ShowS)
-> (ScrollOrientation -> String)
-> ([ScrollOrientation] -> ShowS)
-> Show ScrollOrientation
forall a.
(Int -> a -> ShowS) -> (a -> String) -> ([a] -> ShowS) -> Show a
$cshowsPrec :: Int -> ScrollOrientation -> ShowS
showsPrec :: Int -> ScrollOrientation -> ShowS
$cshow :: ScrollOrientation -> String
show :: ScrollOrientation -> String
$cshowList :: [ScrollOrientation] -> ShowS
showList :: [ScrollOrientation] -> ShowS
Show, ScrollOrientation -> ScrollOrientation -> Bool
(ScrollOrientation -> ScrollOrientation -> Bool)
-> (ScrollOrientation -> ScrollOrientation -> Bool)
-> Eq ScrollOrientation
forall a. (a -> a -> Bool) -> (a -> a -> Bool) -> Eq a
$c== :: ScrollOrientation -> ScrollOrientation -> Bool
== :: ScrollOrientation -> ScrollOrientation -> Bool
$c/= :: ScrollOrientation -> ScrollOrientation -> Bool
/= :: ScrollOrientation -> ScrollOrientation -> Bool
Eq)
-----------------------------------------------------------------------------
instance ToJSON ScrollOrientation where
  toJSON :: ScrollOrientation -> Value
toJSON ScrollOrientation
Vertical   = Value
"vertical"
  toJSON ScrollOrientation
Horizontal = Value
"horizontal"
-----------------------------------------------------------------------------
-- | ListType
data ListType
  = Single
  | Flow
  | Waterfall
  deriving (Int -> ListType -> ShowS
[ListType] -> ShowS
ListType -> String
(Int -> ListType -> ShowS)
-> (ListType -> String) -> ([ListType] -> ShowS) -> Show ListType
forall a.
(Int -> a -> ShowS) -> (a -> String) -> ([a] -> ShowS) -> Show a
$cshowsPrec :: Int -> ListType -> ShowS
showsPrec :: Int -> ListType -> ShowS
$cshow :: ListType -> String
show :: ListType -> String
$cshowList :: [ListType] -> ShowS
showList :: [ListType] -> ShowS
Show, ListType -> ListType -> Bool
(ListType -> ListType -> Bool)
-> (ListType -> ListType -> Bool) -> Eq ListType
forall a. (a -> a -> Bool) -> (a -> a -> Bool) -> Eq a
$c== :: ListType -> ListType -> Bool
== :: ListType -> ListType -> Bool
$c/= :: ListType -> ListType -> Bool
/= :: ListType -> ListType -> Bool
Eq)
-----------------------------------------------------------------------------
instance ToJSON ListType where
  toJSON :: ListType -> Value
toJSON ListType
Single    = Value
"single"
  toJSON ListType
Flow      = Value
"flow"
  toJSON ListType
Waterfall = Value
"waterfall"
-----------------------------------------------------------------------------
-- | defaultListOptions
defaultListOptions :: ListOptions
defaultListOptions :: ListOptions
defaultListOptions
  = ListOptions
  { listType_ :: ListType
listType_ = ListType
Single
  , spanCount_ :: Int
spanCount_ = Int
0
  , scrollOrientation_ :: ScrollOrientation
scrollOrientation_ = ScrollOrientation
Vertical
  }
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#required-item-key
--
-- The item-key attribute is a required attribute on \<list-item\>.
-- 
--
itemKey_ :: MisoString -> Attribute action
itemKey_ :: forall action. MisoString -> Attribute action
itemKey_ = MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
textProp MisoString
"item-key"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#enable-scroll
--
-- Indicates whether the \<list\> component is allowed to scroll.
--
enableScroll_ :: Bool -> Attribute action
enableScroll_ :: forall action. Bool -> Attribute action
enableScroll_ = MisoString -> Bool -> Attribute action
forall action. MisoString -> Bool -> Attribute action
boolProp MisoString
"enable-scroll"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#enable-nested-scroll
--
-- Indicates whether \<list\> can achieve nested scrolling with other scrollable containers. When enabled, the inner container scrolls first, followed by the outer container.
--
enableNestedScroll_ :: Bool -> Attribute action
enableNestedScroll_ :: forall action. Bool -> Attribute action
enableNestedScroll_ = MisoString -> Bool -> Attribute action
forall action. MisoString -> Bool -> Attribute action
boolProp MisoString
"enable-nested-scroll"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#list-main-axis-gap
--
-- Specifies the spacing of \<list\> child nodes in the main axis direction,
-- which needs to be written in the style.
--
listMainAxisGap_ :: MisoString -> Attribute action
listMainAxisGap_ :: forall action. MisoString -> Attribute action
listMainAxisGap_ = MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
textProp MisoString
"list-main-axis-gap"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#list-cross-axis-gap
--
-- Specifies the spacing of <list> child nodes in the cross axis direction,
-- which needs to be written in the style.
--
listCrossAxisGap_ :: MisoString -> Attribute action
listCrossAxisGap_ :: forall action. MisoString -> Attribute action
listCrossAxisGap_ = MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
textProp MisoString
"list-cross-axis-gap"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#sticky
--
-- Declared on the \<list\> component to control whether the \<list\> component
-- as a whole is allowed to be sticky at the top or bottom.
--
sticky_ :: Bool -> Attribute action
sticky_ :: forall action. Bool -> Attribute action
sticky_ = MisoString -> Bool -> Attribute action
forall action. MisoString -> Bool -> Attribute action
boolProp MisoString
"sticky"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#sticky-offset
--
-- The offset distance from the top or bottom of \<list\> for sticky positioning, in 'px'.
--
stickyOffset_ :: Int -> Attribute action
stickyOffset_ :: forall action. Int -> Attribute action
stickyOffset_ = MisoString -> Int -> Attribute action
forall action. MisoString -> Int -> Attribute action
intProp MisoString
"sticky-offset"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#sticky-top
--
-- Declared on the \<list-item\> child node to control whether the node will
-- be sticky at the top.
--
stickyTop_ :: Bool -> Attribute action
stickyTop_ :: forall action. Bool -> Attribute action
stickyTop_ = MisoString -> Bool -> Attribute action
forall action. MisoString -> Bool -> Attribute action
boolProp MisoString
"sticky-top"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#sticky-bottom
--
-- Declared on the \<list-item\> child node to control whether the node
-- will be sticky at the bottom.
--
stickyBottom_ :: Bool -> Attribute action
stickyBottom_ :: forall action. Bool -> Attribute action
stickyBottom_ = MisoString -> Bool -> Attribute action
forall action. MisoString -> Bool -> Attribute action
boolProp MisoString
"sticky-bottom"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#bounces
--
-- *iOS* only
--
-- Declared on the \<list-item\> child node to control whether the node
-- will be sticky at the bottom.
--
-- Default value: 'True'
--
bounces_ :: Bool -> Attribute action
bounces_ :: forall action. Bool -> Attribute action
bounces_ = MisoString -> Bool -> Attribute action
forall action. MisoString -> Bool -> Attribute action
boolProp MisoString
"bounces"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#initial-scroll-index
--
-- Specifies the node position to which \<list\> automatically scrolls after
-- rendering effective only once.
--
initialScrollIndex_ :: Int -> Attribute action
initialScrollIndex_ :: forall action. Int -> Attribute action
initialScrollIndex_ = MisoString -> Int -> Attribute action
forall action. MisoString -> Int -> Attribute action
intProp MisoString
"initial-scroll-index"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#need-visible-item-info
--
-- Controls whether the scroll event callback parameters include the position
-- information of the currently rendering node.
--
-- The scroll events include:
--  * `scroll`
--  * `scrolltoupper`
--  * `scrolltolower`
--
-- Default value: 'False'
--
needVisibleItemInfo_ :: Bool -> Attribute action
needVisibleItemInfo_ :: forall action. Bool -> Attribute action
needVisibleItemInfo_ = MisoString -> Bool -> Attribute action
forall action. MisoString -> Bool -> Attribute action
boolProp MisoString
"sticky-bottom"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#upper-threshold-item-count
-- 
-- Triggers a `scrolltoupper` event once when the number of remaining displayable
-- child nodes at the top of \<list\> is less than `upper-threshold-item-count`
-- for the first time.
--
upperThresholdItemCount_ :: Int -> Attribute action
upperThresholdItemCount_ :: forall action. Int -> Attribute action
upperThresholdItemCount_ = MisoString -> Int -> Attribute action
forall action. MisoString -> Int -> Attribute action
intProp MisoString
"upper-threshold-item-count"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#lower-threshold-item-count
-- 
-- Triggers a `scrolltolower` event once when the number of remaining
-- displayable child nodes at the bottom of \<list\> is less than
-- `lower-threshold-item-count` for the first time.
--
lowerThresholdItemCount_ :: Int -> Attribute action
lowerThresholdItemCount_ :: forall action. Int -> Attribute action
lowerThresholdItemCount_ = MisoString -> Int -> Attribute action
forall action. MisoString -> Int -> Attribute action
intProp MisoString
"lower-threshold-item-count"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#scroll-event-throttle
-- 
-- Sets the time interval for the \<list\> callback `scroll` event, in milliseconds (ms).
-- By default, the scroll event is called back every 200 ms.
--
-- Default Value: 200
--
scrollEventThrottle_ :: Int -> Attribute action
scrollEventThrottle_ :: forall action. Int -> Attribute action
scrollEventThrottle_ = MisoString -> Int -> Attribute action
forall action. MisoString -> Int -> Attribute action
intProp MisoString
"scroll-event-throttle"
-----------------------------------------------------------------------------
data ListItemSnapAlignment
  = ListItemSnapAlignment
  { ListItemSnapAlignment -> Int
factor :: Int
  , ListItemSnapAlignment -> Int
offset :: Int
  } deriving (Int -> ListItemSnapAlignment -> ShowS
[ListItemSnapAlignment] -> ShowS
ListItemSnapAlignment -> String
(Int -> ListItemSnapAlignment -> ShowS)
-> (ListItemSnapAlignment -> String)
-> ([ListItemSnapAlignment] -> ShowS)
-> Show ListItemSnapAlignment
forall a.
(Int -> a -> ShowS) -> (a -> String) -> ([a] -> ShowS) -> Show a
$cshowsPrec :: Int -> ListItemSnapAlignment -> ShowS
showsPrec :: Int -> ListItemSnapAlignment -> ShowS
$cshow :: ListItemSnapAlignment -> String
show :: ListItemSnapAlignment -> String
$cshowList :: [ListItemSnapAlignment] -> ShowS
showList :: [ListItemSnapAlignment] -> ShowS
Show, ListItemSnapAlignment -> ListItemSnapAlignment -> Bool
(ListItemSnapAlignment -> ListItemSnapAlignment -> Bool)
-> (ListItemSnapAlignment -> ListItemSnapAlignment -> Bool)
-> Eq ListItemSnapAlignment
forall a. (a -> a -> Bool) -> (a -> a -> Bool) -> Eq a
$c== :: ListItemSnapAlignment -> ListItemSnapAlignment -> Bool
== :: ListItemSnapAlignment -> ListItemSnapAlignment -> Bool
$c/= :: ListItemSnapAlignment -> ListItemSnapAlignment -> Bool
/= :: ListItemSnapAlignment -> ListItemSnapAlignment -> Bool
Eq)
-----------------------------------------------------------------------------
instance ToJSON ListItemSnapAlignment where
  toJSON :: ListItemSnapAlignment -> Value
toJSON ListItemSnapAlignment {Int
factor :: ListItemSnapAlignment -> Int
offset :: ListItemSnapAlignment -> Int
factor :: Int
offset :: Int
..}
    = [Pair] -> Value
object
    [ Key
"factor" Key -> Int -> Pair
forall v. ToJSON v => Key -> v -> Pair
forall e kv v. (KeyValue e kv, ToJSON v) => Key -> v -> kv
.= Int
factor
    , Key
"offset" Key -> Int -> Pair
forall v. ToJSON v => Key -> v -> Pair
forall e kv v. (KeyValue e kv, ToJSON v) => Key -> v -> kv
.= Int
offset
    ]
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#item-snap
-- 
-- Used to mark the unique identifier for this data source update, which
-- will be returned in the [`layoutcomplete`](#layoutcomplete) event callback.
--
-- - `factor`: The parameter for paginated positioning, with a range of `[0, 1]`.
-- - `offset`: Additional `offset` parameter added on top of `factor`.
--
itemSnap_ :: ListItemSnapAlignment -> Attribute action
itemSnap_ :: forall action. ListItemSnapAlignment -> Attribute action
itemSnap_ = MisoString -> ListItemSnapAlignment -> Attribute action
forall a action. ToJSON a => MisoString -> a -> Attribute action
prop MisoString
"item-snap"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#need-layout-complete-info
-- 
-- Controls whether the layoutcomplete event includes the node layout information
-- before and after this layout, the \<list\> Diff information that triggered this
-- layout, and the current \<list\> scroll state information.
--
needLayoutCompleteInfo_ :: Bool -> Attribute action
needLayoutCompleteInfo_ :: forall action. Bool -> Attribute action
needLayoutCompleteInfo_ = MisoString -> Bool -> Attribute action
forall a action. ToJSON a => MisoString -> a -> Attribute action
prop MisoString
"need-layout-complete-info"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#layout-id
-- 
-- Used to mark the unique identifier for this data source update,
-- which will be returned in the layoutcomplete event callback.
--
-- Default Value: -1
--
layoutId_ :: Int -> Attribute action
layoutId_ :: forall action. Int -> Attribute action
layoutId_ = MisoString -> Int -> Attribute action
forall a action. ToJSON a => MisoString -> a -> Attribute action
prop MisoString
"layout-id"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#preload-buffer-count
-- 
-- This attribute controls the number of nodes outside \<list\> that are preloaded.
--
-- Default Value: 0
--
preloadBufferCount_ :: Int -> Attribute action
preloadBufferCount_ :: forall action. Int -> Attribute action
preloadBufferCount_ = MisoString -> Int -> Attribute action
forall action. MisoString -> Int -> Attribute action
intProp MisoString
"preload-buffer-count"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#scroll-bar-enable
--
-- *iOS* only
--
-- Indicates whether the \<list\> component scroll bar is displayed.
--
-- Default value: 'True'
--
scrollBarEnable_ :: Bool -> Attribute action
scrollBarEnable_ :: forall action. Bool -> Attribute action
scrollBarEnable_ = MisoString -> Bool -> Attribute action
forall action. MisoString -> Bool -> Attribute action
boolProp MisoString
"scroll-bar-enable"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#reuse-identifier
--
-- Sets the reuse id for \<list-item\>. When rendering child nodes, the \<list\>
-- component reuses \<list-item\> based on the reuse-identifier attribute value.
-- Only \<list-item\> with the same reuse-identifier attribute value will be reused.
--
reuseIdentifier_ :: MisoString -> Attribute action
reuseIdentifier_ :: forall action. MisoString -> Attribute action
reuseIdentifier_ = MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
textProp MisoString
"reuse-identifier"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#full-span
--
-- The full-span attribute is used to indicate that a \<list-item\>
-- occupies a full row or column.
--
fullSpan_ :: Bool -> Attribute action
fullSpan_ :: forall action. Bool -> Attribute action
fullSpan_ = MisoString -> Bool -> Attribute action
forall action. MisoString -> Bool -> Attribute action
boolProp MisoString
"full-span"
-----------------------------------------------------------------------------
-- | https://lynxjs.org/api/elements/built-in/list.html#estimated-main-axis-size-px
--
-- Specifies the placeholder size in the main axis direction for \<list-item\>
-- before it is fully rendered, in px. If not set, the default value is the size
-- of \<list\> in the main axis direction.
--
estimatedMainAxisSizePx_ :: Int -> Attribute action
estimatedMainAxisSizePx_ :: forall action. Int -> Attribute action
estimatedMainAxisSizePx_ = MisoString -> Int -> Attribute action
forall action. MisoString -> Int -> Attribute action
intProp MisoString
"estimated-main-axis-size-px"
-----------------------------------------------------------------------------