Browse Source

render component

master
piq9117 1 year ago
parent
commit
630c3e282c
8 changed files with 222 additions and 22 deletions
  1. +16
    -4
      example/package-lock.json
  2. +3
    -1
      example/package.json
  3. +1
    -6
      example/spago.dhall
  4. +16
    -4
      package-lock.json
  5. +3
    -1
      package.json
  6. +9
    -1
      spago.dhall
  7. +111
    -0
      src/Bulma/Common.purs
  8. +63
    -5
      src/Bulma/DatePicker.purs

+ 16
- 4
example/package-lock.json View File

@@ -6156,6 +6156,14 @@
"tough-cookie": "~2.5.0",
"tunnel-agent": "^0.6.0",
"uuid": "^3.3.2"
},
"dependencies": {
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
}
}
},
"request-promise-core": {
@@ -7288,10 +7296,14 @@
}
},
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.2.tgz",
"integrity": "sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw=="
},
"uuid-validate": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/uuid-validate/-/uuid-validate-0.0.3.tgz",
"integrity": "sha512-Fykw5U4eZESbq739BeLvEBFRuJODfrlmjx5eJux7W817LjRaq4b7/i4t2zxQmhcX+fAj4nMfRdTzO4tmwLKn0w=="
},
"v8-compile-cache": {
"version": "2.1.0",


+ 3
- 1
example/package.json View File

@@ -21,6 +21,8 @@
},
"dependencies": {
"bulma": "^0.8.0",
"http-server": "^0.12.1"
"http-server": "^0.12.1",
"uuid": "^7.0.2",
"uuid-validate": "0.0.3"
}
}

+ 1
- 6
example/spago.dhall View File

@@ -4,12 +4,7 @@ You can edit this file as you like.
-}
{ name = "my-project"
, dependencies =
[ "console"
, "effect"
, "halogen"
, "psci-support"
, "datetime"
]
[ "console", "datetime", "effect", "halogen", "psci-support", "uuid" ]
, packages = ./packages.dhall
, sources = [ "src/**/*.purs", "test/**/*.purs", "../src/**/*.purs" ]
}

+ 16
- 4
package-lock.json View File

@@ -6183,6 +6183,14 @@
"tough-cookie": "~2.5.0",
"tunnel-agent": "^0.6.0",
"uuid": "^3.3.2"
},
"dependencies": {
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
}
}
},
"request-promise-core": {
@@ -7315,10 +7323,14 @@
}
},
"uuid": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"dev": true
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.2.tgz",
"integrity": "sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw=="
},
"uuid-validate": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/uuid-validate/-/uuid-validate-0.0.3.tgz",
"integrity": "sha512-Fykw5U4eZESbq739BeLvEBFRuJODfrlmjx5eJux7W817LjRaq4b7/i4t2zxQmhcX+fAj4nMfRdTzO4tmwLKn0w=="
},
"v8-compile-cache": {
"version": "2.1.0",


+ 3
- 1
package.json View File

@@ -19,6 +19,8 @@
"dependencies": {
"bulma": "^0.8.0",
"bulma-calendar": "^6.0.7",
"http-server": "^0.12.1"
"http-server": "^0.12.1",
"uuid": "^7.0.2",
"uuid-validate": "0.0.3"
}
}

+ 9
- 1
spago.dhall View File

@@ -3,7 +3,15 @@ Welcome to a Spago project!
You can edit this file as you like.
-}
{ name = "purescript-bulma-halogen-datetime-picker"
, dependencies = [ "console", "datetime", "effect", "halogen", "psci-support" ]
, dependencies =
[ "console"
, "datetime"
, "effect"
, "halogen"
, "psci-support"
, "uuid"
, "web-html"
]
, packages = ./packages.dhall
, sources = [ "src/**/*.purs", "test/**/*.purs" ]
}

+ 111
- 0
src/Bulma/Common.purs View File

@@ -0,0 +1,111 @@
module Bulma.Common
( DateTimePickerSpec
, PickerState(..)
, DisplayMode (..)
, HeaderPosition (..)
, css
, defaultSpec
, pickerStateToString
, displayModeToString
, headerPosToString
) where

import Prelude
-- import Data.Maybe ( Maybe )
-- UUID
import Data.UUID ( UUID, emptyUUID )
-- Halogen
import Halogen.HTML as HH
import Halogen.HTML.Properties as HP

css :: forall r i. String -> HH.IProp ( class :: String | r ) i
css = HP.class_ <<< HH.ClassName

type DateTimePickerSpec =
{ elemId :: UUID
, pickerState :: PickerState
-- , type_ :: String
-- , color :: String
, isRange :: String
-- , allowSameDae :: Boolean
-- , lang :: String
-- , dateFormat :: String
-- , timeFormat :: String
, displayMode :: DisplayMode
-- , position :: String
-- , showHeader :: Boolean
, headerPosition :: HeaderPosition
-- , showFooter :: Boolean
-- , showButtons :: Boolean
-- , showTodayButton :: Boolean
-- , showClearButton :: Boolean
-- , cancelLabel :: String
-- , clearLabel :: String
-- , nowLabel :: String
-- , validateLabel :: String
-- , enableMonthSwitch :: Boolean
-- , enableYearSwitch :: Boolean
-- , startDate :: Maybe String
-- , endDate :: Maybe String
-- , minDate :: Maybe String
-- , maxDate :: Maybe String
-- , disabledDates :: Array String
-- , disabledWeekDays :: Maybe String
-- , weekStart :: Int
-- , startTime :: Maybe String
-- , endTime :: Maybe String
-- , minuteSteps :: Int
, labelFrom :: String
-- , labelTo :: String
-- , closeOnOverlayClick :: Boolean
-- , closeOnSelect :: Boolean
-- , closeOnSelect :: Boolean
-- , toggleOnInputClick :: Boolean
-- , icons :: Icons
}

type Icons =
{ previous :: String
, next :: String
, time :: String
, date :: String
}

defaultSpec :: DateTimePickerSpec
defaultSpec =
{ elemId: emptyUUID
, pickerState: PickerStateActive
, labelFrom: mempty
, isRange: mempty
, displayMode: DisplayModeHidden
, headerPosition: HeaderTop
}

data PickerState
= PickerStateActive
| PickerStateHidden

pickerStateToString :: PickerState -> String
pickerStateToString = case _ of
PickerStateActive -> "is-active"
PickerStateHidden -> "is-hidden"

data DisplayMode
= DisplayModeHidden
| DisplayModeModal
| DisplayModeEmpty

displayModeToString :: DisplayMode -> String
displayModeToString = case _ of
DisplayModeHidden -> "is-hidden"
DisplayModeModal -> "modal"
DisplayModeEmpty -> mempty

data HeaderPosition
= HeaderTop
| HeaderBottom

headerPosToString :: HeaderPosition -> String
headerPosToString = case _ of
HeaderTop -> ""
HeaderBottom -> "has-header-bottom"

+ 63
- 5
src/Bulma/DatePicker.purs View File

@@ -2,37 +2,80 @@ module Bulma.DatePicker where

import Prelude

-- Internal
import Bulma.Common ( DateTimePickerSpec )
import Bulma.Common as Common
-- UUID
import Data.UUID as UUID
-- Halogen
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Properties as HP

type State =
{ options :: DateTimePickerSpec
}

component :: forall q i o m. H.Component HH.HTML q i o m
component =
H.mkComponent
{ initialState: identity
{ initialState: const { options: Common.defaultSpec }
, render
, eval: H.mkEval H.defaultEval
, eval: H.mkEval $ H.defaultEval
{ handleAction = handleAction }
}

render :: forall state action m. state -> H.ComponentHTML action () m
render _ =
HH.h1_ [ HH.text "Hello, World!" ]

render :: forall action m. State -> H.ComponentHTML action () m
render st =
HH.div
[ HP.id_ ( UUID.toString st.options.elemId ) ]
[ HH.div
[ Common.css $ "datetimepicker-dummy " <> Common.pickerStateToString st.options.pickerState ]
[ HH.div
[ Common.css "datetimepicker-dummy-wrapper" ]
[ HH.input
[ Common.css $ "datetimepicker-dummy-input" <> st.options.isRange
, HP.placeholder st.options.labelFrom
, HP.readOnly true
, HP.type_ HP.InputText
]
]
, HH.button
[ Common.css "datetimepicker-clear-button"]
[ HH.text "+" ]
]
, HH.div
[ Common.css $ "datetimepicker-wraper" <> Common.displayModeToString st.options.displayMode ]
[ HH.div
[ Common.css $ "modal-background" <> Common.displayModeToString st.options.displayMode ]
[]
, HH.div
[ Common.css "datetimepicker" ]
[ HH.div
[ Common.css $ "datetimepicker-container" <> Common.headerPosToString st.options.headerPosition ]
[]
]
]
]

handleAction :: forall action o m. action -> H.HalogenM State action () o m Unit
handleAction = const $ pure unit

-- export default (data) => {
-- return `<div id='${data.id}'>
-- <div class="datetimepicker-dummy is-hidden">
-- <div class="datetimepicker-dummy-wrapper">
-- <input placeholder="${data.labelFrom}" readonly="readonly" class="datetimepicker-dummy-input${data.isRange ? ' is-datetimepicker-range' : ''}" type="text">
-- ${data.isRange ? `<input placeholder="${data.labelTo}" readonly="readonly" class="datetimepicker-dummy-input" type="text">`: ''}
-- </div>
-- <button class="datetimepicker-clear-button">+</button>
-- </div>
-- <div class="datetimepicker-wrapper${data.displayMode === 'dialog' ? ' modal' : ''}">
-- <div class="modal-background${data.displayMode === 'dialog' ? '' : ' is-hidden'}"></div>
-- <div class="datetimepicker">
-- <div class="datetimepicker-container${data.headerPosition === 'top' ? '' : ' has-header-bottom'}"></div>
-- </div>
-- </div>
-- </div>`;
-- };

Loading…
Cancel
Save