-- ---
-- jupyter:
--   jupytext:
--     text_representation:
--       extension: .hs
--       format_name: light
--       format_version: '1.5'
--       jupytext_version: 1.14.4
--   kernelspec:
--     display_name: Haskell
--     language: haskell
--     name: haskell
-- ---

-- # Widget List
-- This is a translation from IPython's [Widget List](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html) to IHaskell

{-# LANGUAGE OverloadedStrings #-}
import Data.Text
import IHaskell.Display.Widgets
import IHaskell.Display.Widgets.Layout as L

-- ## Numeric widgets
-- These are widgets designed to display numeric values. You can display both integers and floats, with or wihtout bounding.
--
-- These widgets usually share the same naming scheme, so you can find the `Float`/`Int` counterpart replacing `Int` with `Float` or viceversa.

-- ### IntSlider
-- - Initially the slider is displayed with `IntValue`. You can define the lower/upper bounds with `MinInt` and `MaxInt`, the value increments/decrements according to `StepInt`. If `StepInt` is `Nothing`, you let the frontend decide.
-- - You can specify a label in the `Description` field
-- - The slider orientation is either `HorizontalOrientation` or `VerticalOrientation`
-- - `ReadOut` chooses whether to display the value next to the slider, and `ReadOutFormat` specifies the format in a similar way to the format used by `printf`.

intSlider <- mkIntSlider
setField intSlider IntValue 7
setField intSlider MinInt 0
setField intSlider MaxInt 100
setField intSlider StepInt $ Just 1
setField intSlider Description "Test: "
setField intSlider Disabled False
setField intSlider ContinuousUpdate False
setField intSlider Orientation HorizontalOrientation
setField intSlider ReadOut True
setField intSlider ReadOutFormat "d"
intSlider

-- ### FloatSlider
-- An example of a float slider displayed vertically

floatSlider <- mkFloatSlider
setField floatSlider FloatValue 7.5
setField floatSlider MinFloat 0.0
setField floatSlider MaxFloat 10.0
setField floatSlider StepFloat $ Just 0.1
setField floatSlider Description "Test float: "
setField floatSlider Disabled False
setField floatSlider ContinuousUpdate False
setField floatSlider Orientation VerticalOrientation
setField floatSlider ReadOut True
setField floatSlider ReadOutFormat ".1f"
floatSlider

-- ### FloatLogSlider
-- Like a normal slider, but every step multiplies by a quantity, creating an exponential value (or a log scale). `MinFloat` and `MaxFloat` refer to the minimum and maximum **exponents** of the `BaseFloat`.

floatLogSlider <- mkFloatLogSlider
setField floatLogSlider FloatValue 10
setField floatLogSlider BaseFloat 10
setField floatLogSlider MinFloat (-10)
setField floatLogSlider MaxFloat 10
setField floatLogSlider StepFloat $ Just 0.2
setField floatLogSlider Description "A log slider"
floatLogSlider

-- ### IntRangeSlider
-- Lets you choose a range of two values

intRangeSlider <- mkIntRangeSlider
setField intRangeSlider IntPairValue (5,7)
setField intRangeSlider MinInt 0
setField intRangeSlider MaxInt 10
setField intRangeSlider StepInt $ Just 1
setField intRangeSlider Disabled False
setField intRangeSlider ContinuousUpdate False
setField intRangeSlider Orientation HorizontalOrientation
setField intRangeSlider ReadOut True
setField intRangeSlider ReadOutFormat "d"
intRangeSlider

-- ### FloatRangeSlider

floatRangeSlider <- mkFloatRangeSlider
setField floatRangeSlider FloatPairValue (5.0,7.5)
setField floatRangeSlider MinFloat 0
setField floatRangeSlider MaxFloat 10
setField floatRangeSlider StepFloat $ Just 0.1
setField floatRangeSlider Disabled False
setField floatRangeSlider ContinuousUpdate False
setField floatRangeSlider Orientation HorizontalOrientation
setField floatRangeSlider ReadOut True
setField floatRangeSlider ReadOutFormat ".1f"
floatRangeSlider

-- ### IntProgress
-- - `BarStyle` can be one of: 
--     - `DefaultBar`
--     - `SuccessBar`
--     - `InfoBar`
--     - `WarningBar`
--     - `DangerBar`

intProgress <- mkIntProgress
setField intProgress IntValue 7
setField intProgress MinInt 0
setField intProgress MaxInt 10
setField intProgress Description "Now loading"
setField intProgress BarStyle InfoBar
intProgress

s <- mkProgressStyle
setField s BarColor $ Just "#ffff00"
setField intProgress Style (StyleWidget s)

-- If a numerical text box imposes some kind of limit on the input (range, non-float, etc), that restriction is checked when the user presses enter or changes focus
-- ### BoundedIntText

boundedIntText <- mkBoundedIntText
setField boundedIntText IntValue 7
setField boundedIntText MinInt 0
setField boundedIntText MaxInt 10
setField boundedIntText StepInt $ Just 1
setField boundedIntText Description "Text: "
setField boundedIntText Disabled False
boundedIntText

-- ### BoundedFloatText

boundedFloatText <- mkBoundedFloatText
setField boundedFloatText FloatValue 7.5
setField boundedFloatText MinFloat 0.0
setField boundedFloatText MaxFloat 10.0
setField boundedFloatText StepFloat $ Just 0.1
setField boundedFloatText Description "Text: "
setField boundedFloatText Disabled False
boundedFloatText

-- ### IntText

intText <- mkIntText
setField intText IntValue 7
setField intText Description "Any:"
setField intText Disabled False
intText

-- ### FloatText

floatText <- mkFloatText
setField floatText FloatValue 7.5
setField floatText Description "Any:"
setField floatText Disabled False
floatText

-- https://twitter.com/Jose6o/status/1425485091824939012/photo/1## Boolean Widgets
-- The following three widgets display a boolean value
--
-- ### ToggleButton

toggleButton <- mkToggleButton
setField toggleButton BoolValue False
setField toggleButton Description "Click me"
setField toggleButton Disabled False
-- DefaultButton | PrimaryButton | SuccessButton | INfoButton | WarningButton | DangerButton
setField toggleButton ButtonStyle DefaultButton
setField toggleButton Tooltip $ Just "Description"
setField toggleButton Icon "check"
toggleButton

-- ### Checkbox

checkBox <- mkCheckBox
setField checkBox BoolValue False
setField checkBox Description "Check me out!"
setField checkBox Disabled False
setField checkBox Indent False
checkBox

-- ### Valid
-- It provides a read-only indicator.

valid <- mkValid
setField valid BoolValue False
setField valid Description "Valid?"
valid

-- ## Selection widgets
-- There are several widgets that can be used to display single selection lists, and two that can be used to select multiple values. All inherit from the same base class. You can specify the **enumeration of selectable options** by passing a list of options labels.
--
-- The selected index is specified with the field `OptionalIndex` in case it can be `Nothing` and `Index` if it's not a Maybe.
--
-- ### Dropdown

dropdown <- mkDropdown
setField dropdown OptionsLabels ["1", "2", "3"]
setField dropdown OptionalIndex $ Just 2
setField dropdown Description "Number:"
setField dropdown Disabled False
dropdown

-- ### RadioButtons

radioButtons <- mkRadioButtons
setField radioButtons OptionsLabels ["pepperoni", "pineapple", "anchovies"]
setField radioButtons OptionalIndex Nothing
setField radioButtons Description "Topping:"
setField radioButtons Disabled False
radioButtons

-- Here is an exemple with dynamic layout and very long labels

-- +
radioButtons' <- mkRadioButtons
setField radioButtons' OptionsLabels [
    "pepperoni",
    "pineapple",
    "anchovies",
    "Spam, sausage, Spam, Spam, Spam, bacon, Spam, tomato and Spam"
    ]
label <- mkLabel
setField label StringValue "Pizza topping with a very long label"

layout <- mkLayout
setField layout L.Width $ Just "max-content"

box <- mkBox
setField box Children [ChildWidget label, ChildWidget radioButtons']
setField box Layout layout
box
-- -

-- ### Select

select <- mkSelect
setField select OptionsLabels ["Linux", "Windows", "OSX"]
setField select OptionalIndex $ Just 0
setField select Description "OS:"
setField select Disabled False
select

-- ### SelectionSlider

selectionSlider <- mkSelectionSlider
setField selectionSlider OptionsLabels ["Scrambled", "Sunny side up", "Poached", "Over easy"]
setField selectionSlider Index 1
setField selectionSlider Description "I like my eggs..."
setField selectionSlider Disabled False
setField selectionSlider ContinuousUpdate False
setField selectionSlider Orientation HorizontalOrientation
setField selectionSlider ReadOut True
selectionSlider

-- ### SelectionRangeSlider

selectionRangeSlider <- mkSelectionRangeSlider
setField selectionRangeSlider OptionsLabels ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
setField selectionRangeSlider Indices [0,4]
setField selectionRangeSlider Description "When is the shop open?"
setField selectionRangeSlider Disabled False
selectionRangeSlider

-- ### ToggleButtons

toggleButtons <- mkToggleButtons
setField toggleButtons OptionsLabels ["Slow", "Regular", "Fast"]
setField toggleButtons Description "Speed:"
setField toggleButtons Disabled False
-- PrimaryButton | SuccessButton | InfoButton | WarningButton | DangerButton | DefaultButton
setField toggleButtons ButtonStyle DefaultButton
setField toggleButtons Tooltips ["Description of slow", "Description of regular", "Description of fast"]
toggleButtons

-- ### SelectMultiple
-- Multiple values can be selected with `shift` and/or `ctrl` (or `command` with OSX) pressed and mouse click or arrow keys

selectMultiple <- mkSelectMultiple
setField selectMultiple OptionsLabels ["Apples", "Oranges", "Pears"]
setField selectMultiple Indices [1]
setField selectMultiple Description "Fruits"
setField selectMultiple Disabled False
selectMultiple

-- ## String widgets
-- There are multiple widgets that can be used to display a string value. The `Text`, `TextArea`
-- and `Combobox` widgets accept input. The `HTML` and `HTMLMath` display the received string
-- as HTML. The `Label` widget can be used to construct a custom control label, but it doesn't display
-- input.
--
-- ### Text

text <- mkText
setField text StringValue "Hello World!"
setField text Placeholder "Type something"
setField text Description "String:"
setField text Disabled False
text

-- ### Textarea

textarea <- mkTextArea
setField textarea StringValue "Hello World!"
setField textarea Placeholder "Type something"
setField textarea Description "Long string:"
setField textarea Disabled False
textarea

-- ### Combobox

combobox <- mkCombobox
setField combobox Placeholder "Choose Someone"
setField combobox Options ["Paul", "John", "George", "Ringo"]
setField combobox Description "Combobox:"
setField combobox EnsureOption True
setField combobox Disabled False
combobox

-- ### Password
--
-- The `Password` widget hides user input on the screen. Nevertheless, this widget is **not a secure way** to collect sensitive information **because**:
-- - The contents are transmitted unencrypted
-- - If you save the notebook, the contents are stored as plain text

password <- mkPassword
setField password StringValue "Password"
setField password Placeholder "Enter password"
setField password Description "Password:"
setField password Disabled False
password

-- ### Label
-- The `Label` widget is useful if you need to build a very customized description next to a control widget.

-- +
label <- mkLabel
setField label StringValue "The $m$ in $E=mc^2$:"

floatSlider <- mkFloatSlider

hbox <- mkHBox
setField hbox Children [ChildWidget label, ChildWidget floatSlider]
hbox
-- -

-- ### HTML

html <- mkHTML
setField html StringValue "Hello <b>World!</b>"
setField html Placeholder "Some HTML"
setField html Description "Some HTML"
html

-- ### HTML Math
-- Like HTML, but it also renders LaTeX math commands

htmlMath <- mkHTMLMath
-- Remember to escape the \ with \\
setField htmlMath StringValue "Some math and <i>HTML</i>: $x^2$ and $$\\frac{x+1}{x-1}$$"
setField htmlMath Placeholder "Some HTML"
setField htmlMath Description "Some HTML"
htmlMath

-- ## Image

image <- mkImage
setField image BSValue "https://imgs.xkcd.com/comics/haskell.png"
-- PNG | SVG | JPG | IURL
setField image ImageFormat IURL
image

-- ## Button

button <- mkButton
setField button Description "Click me"
setField button Disabled False
-- PrimaryButton | SuccessButton | InfoButton | WarningButton | DangerButton | DefaultButton
setField button ButtonStyle DefaultButton
setField button Tooltip $ Just "Click me"
setField button Icon "mouse"
properties button
button

-- The `Icon` attribute is used to define an icon; see the [fontawesome](https://fontawesome.com/v5.15/icons) page for available icons.
--
-- You can set a callback function Setting the `ClickHandler ::: IO ()` attribute.
--
-- ## Output
-- The `Output` widget is complicated and has many features. You can see detailed documentation in its dedicated Notebook.
--
-- ## Play (Animation) widget
-- The `Play` widget is like an automated textbox, where someone is making click on increment every few miliseconds. Here you can see an example:

-- +
play <- mkPlay
setField play IntValue 50
setField play MinInt 0
setField play MaxInt 100
setField play StepInt $ Just 1
setField play Interval 500
setField play Description "Press play"
setField play Disabled False

slider <- mkIntSlider
jslink (WidgetFieldPair play IntValue) (WidgetFieldPair slider IntValue)

play
slider
-- -

-- ## Date Picker
-- This widget only works with browser that support the HTML date input field (Chrome, Firefox and IE Edge, but not Safari)

datePicker <- mkDatePicker
setField datePicker Description "Pick a date"
setField datePicker Disabled False
datePicker

-- ## Color picker

colorPicker <- mkColorPicker
setField colorPicker Concise False
setField colorPicker Description "Pick a color"
setField colorPicker StringValue "Blue"
setField colorPicker Disabled False
colorPicker

-- ## Controller
-- The `Controller` allows a game controller to be used as an input device

controller <- mkController
setField controller Index 0
controller

-- ## Container and Layout widgets
--
-- These widgets are used to hold other widgets, called children. They can display multiple widgets or change its CSS styling.
--
-- ### Box

-- +
labels <- flip mapM [1..4] $ \i->do
    l <- mkLabel
    setField l StringValue $ pack $ ("Label #" ++ show i)
    return $ ChildWidget l

box <- mkBox
setField box Children labels
box
-- -

-- ### HBox

hbox <- mkHBox
setField hbox Children labels
hbox

-- ### VBox

vbox <- mkVBox
setField vbox Children labels
vbox

-- ### GridBox
--
-- This box uses the HTML Grid specification to create a two-dimensional grid. To set its grid values, we need to create a layout widget. Let's do a 3x3 grid:

-- +
labels <- flip mapM [1..8] $ \i->do
    l <- mkLabel
    setField l StringValue $ pack $ ("Label #" ++ show i)
    return $ ChildWidget l
    
layout <- mkLayout
setField layout L.GridTemplateColumns $ Just "repeat(3, 10em)"
    
gridBox <- mkGridBox
setField gridBox Children labels
setField gridBox Layout layout
gridBox
-- -

-- ### Accordion
--
-- Unlike the other container widgets, `Accordion` and `Tab` update their `selected_index` attribute when a tab or accordion element is selected. You can see what the user is doing, or set what the user is seeing.
--
-- You can set `selected_index` to `Nothing` to close all accordions or deselect all tabs.

accordion <- mkAccordion
slider <- mkIntSlider
text <- mkText
setField accordion Children [ChildWidget slider, ChildWidget text]
setField accordion Titles ["Slider", "Text"]
accordion

-- ### Tabs

-- +
tabs <- mkTab

texts <- flip mapM [0..5] $ \i->do
    t <- mkText
    setField t StringValue $ pack $ ("P" ++ show i)
    return $ ChildWidget t

setField tabs Children texts
setField tabs Titles [pack $ show i | i <- [0..5]]
setField tabs SelectedIndex $ Just 2
tabs

StarcoderdataJupyterScriptsDedupFiltered