render component

example/package-lock.json

@@ -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",

example/package.json

@@ -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"
   }
 }

example/spago.dhall

@@ -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" ]
 }

package-lock.json

@@ -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",

package.json

@@ -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"
   }
 }

spago.dhall

@@ -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" ]
 }

src/Bulma/Common.purs

@@ -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"

src/Bulma/DatePicker.purs

@@ -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>`;
 -- };