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