Last active
October 2, 2019 14:16
-
-
Save quasi-coherent/2788ccb3e5bdbcd026dc727f75144e1c to your computer and use it in GitHub Desktop.
React basic dropdown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use strict"; | |
| const Semantic = require("semantic-ui-react"); | |
| exports.semanticDropdown = Semantic.Dropdown; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module Dropdown where | |
| import Effect (Effect) | |
| import React.Basic.DOM as R | |
| import React.Basic.DOM.Events (targetValue) | |
| import React.Basic.Events (handler) | |
| import React.Basic.Hooks (ReactComponent, CreateComponent, component, useState, (/\), element) | |
| import React.Basic.Hooks as Hooks | |
| type DropdownOptions = | |
| { key :: String | |
| , text :: String | |
| , value :: String | |
| } | |
| options :: Array DropdownOptions | |
| options = | |
| [ { key: "test0", text: "Test 0", value: "test0" } | |
| , { key: "test1", text: "Test 1", value: "test1" } | |
| ] | |
| type DropdownProps = | |
| { val :: String | |
| , setVal :: (String -> String) -> Effect Unit | |
| } | |
| makeDropdown :: CreateComponent DropdownProps | |
| makeDropdown = component "Dropdown" \props -> pure $ | |
| R.div | |
| { children: | |
| [ element semanticDropdown | |
| { placeholder: "Test dropdown" | |
| , selection: true | |
| , options: options | |
| , onChange: | |
| handler targetValue \v -> do | |
| props.setVal \_ -> fromMaybe props.val v | |
| -- Do other stuff with the captured value, like make an external API call. | |
| log $ show v -- Always is 'Nothing' | |
| } | |
| ] | |
| makeContainer :: CreateComponent {} | |
| makeContainer = do | |
| dropdown <- makeDropdown | |
| component "Container" \_ -> React.do | |
| val /\ setVal <- useState "" | |
| pure $ R.div | |
| { children: | |
| [ R.text "This is a test" | |
| , dropdown { val: val, setVal: setVal } | |
| ] | |
| } | |
| foreign import semanticDropdown :: forall props. ReactComponent props |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>dp-redshift-service</title> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script src="./index.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import './semantic/dist/semantic.min.css' | |
| var Main = require('./output/Main'); | |
| // HMR stuff | |
| // For more info see: https://parceljs.org/hmr.html | |
| if (module.hot) { | |
| module.hot.accept(function () { | |
| console.log('Reloaded, running main again'); | |
| Main.main(); | |
| }); | |
| } | |
| console.log('Starting app'); | |
| Main.main(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module Main where | |
| import Data.Maybe (Maybe (..)) | |
| import Effect (Effect) | |
| import Effect.Exception (throw) | |
| import React.Basic.Hooks (element) | |
| import React.Basic.DOM (render) | |
| import Web.DOM.NonElementParentNode (getElementById) | |
| import Web.HTML (window) | |
| import Web.HTML.HTMLDocument (toNonElementParentNode) | |
| import Web.HTML.Window (document) | |
| import Dropdown (makeContainer) | |
| main :: Effect Unit | |
| main = do | |
| root <- getElementById "root" =<< | |
| (map toNonElementParentNode $ document =<< window) | |
| case root of | |
| Nothing -> throw "Root element not found." | |
| Just c -> do | |
| container <- makeContainer | |
| render (element container {}) c |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment