yesod-form-bootstrap4 2.1.0 → 2.1.2
raw patch · 2 files changed
+75/−40 lines, 2 filesdep +blaze-htmldep +blaze-markupdep +shakespearePVP ok
version bump matches the API change (PVP)
Dependencies added: blaze-html, blaze-markup, shakespeare
API changes (from Hackage documentation)
Files
- src/Yesod/Form/Bootstrap4.hs +68/−37
- yesod-form-bootstrap4.cabal +7/−3
src/Yesod/Form/Bootstrap4.hs view
@@ -1,3 +1,4 @@+{-# LANGUAGE FlexibleContexts #-} {-# LANGUAGE NamedFieldPuns #-} {-# LANGUAGE OverloadedStrings #-} {-# LANGUAGE QuasiQuotes #-}@@ -21,12 +22,12 @@ , BootstrapSubmit(..) ) where -import Control.Arrow (second)-import Data.Maybe (isJust)-import Data.String (IsString (..))-import Data.Text (Text)-import Yesod.Core (HandlerSite, MonadHandler, RenderMessage,- SomeMessage (..), WidgetFor, whamlet)+import Control.Arrow (second)+import Data.String (IsString (..))+import Data.Text (Text)+import qualified Data.Text.Lazy as TL+import Text.Blaze.Html.Renderer.Text+import Yesod.Core import Yesod.Form bfs :: RenderMessage site msg => msg -> FieldSettings site@@ -94,7 +95,7 @@ } deriving (Eq, Ord, Show, Read) --- | Render the given form using Bootstrap v3 conventions.+-- | Render the given form using Bootstrap v4 conventions. renderBootstrap4 :: Monad m => BootstrapFormLayout -> FormRender m a renderBootstrap4 formLayout aform fragment = do (res, views') <- aFormToForm aform@@ -102,44 +103,74 @@ widget = [whamlet| #{fragment} $forall view <- views- <div .form-group :isJust (fvErrors view):.has-danger>- $case formLayout- $of BootstrapBasicForm- $if fvId view /= bootstrapSubmitId- <label for=#{fvId view}>#{fvLabel view}- ^{fvInput view}- ^{helpWidget view}- $of BootstrapInlineForm- $if fvId view /= bootstrapSubmitId- <label .sr-only for=#{fvId view}>#{fvLabel view}+ $if inputTypeBoolOrCheckBox view+ ^{renderCheckInput view}+ $else+ ^{renderGroupInput view formLayout}+|]+ return (res, widget)++-- FIXME: `.form-check-input`を`input`につける方法がわからない+renderCheckInput :: FieldView site -> WidgetFor site ()+renderCheckInput view = [whamlet|+<div .form-check (fvErrors view):.is-invalid>+ ^{fvInput view}+ <label .form-check-label for=#{fvId view}>+ ^{helpWidget view}+|]++renderGroupInput :: FieldView site -> BootstrapFormLayout -> WidgetFor site ()+renderGroupInput view formLayout = [whamlet|+$case formLayout+ $of BootstrapBasicForm+ $if fvId view /= bootstrapSubmitId+ <label for=#{fvId view}>#{fvLabel view}+ ^{fvInput view}+ ^{helpWidget view}+ $of BootstrapInlineForm+ $if fvId view /= bootstrapSubmitId+ <label .sr-only for=#{fvId view}>#{fvLabel view}+ ^{fvInput view}+ ^{helpWidget view}+ $of BootstrapHorizontalForm labelOffset labelSize inputOffset inputSize+ $if fvId view /= bootstrapSubmitId+ <div .row>+ <label+ .#{toOffset labelOffset}+ .#{toColumn labelSize}+ for=#{fvId view}>#{fvLabel view}+ <div .#{toOffset inputOffset} .#{toColumn inputSize}>+ ^{fvInput view}+ ^{helpWidget view}+ $else+ <div+ .#{toOffset (addGO inputOffset (addGO labelOffset labelSize))}+ .#{toColumn inputSize}> ^{fvInput view} ^{helpWidget view}- $of BootstrapHorizontalForm labelOffset labelSize inputOffset inputSize- $if fvId view /= bootstrapSubmitId- <div .row>- <label- .#{toOffset labelOffset}- .#{toColumn labelSize}- for=#{fvId view}>#{fvLabel view}- <div .#{toOffset inputOffset} .#{toColumn inputSize}>- ^{fvInput view}- ^{helpWidget view}- $else- <div- .#{toOffset (addGO inputOffset (addGO labelOffset labelSize))}- .#{toColumn inputSize}>- ^{fvInput view}- ^{helpWidget view}- |]- return (res, widget)+|] +-- | 入力されたフィールドがcheck形式である必要があるか判定する+-- HTMLの内容を`Monad`の範囲で見る方法が分からなかったため,ワークアラウンドとしてlabelの内容を見て判断します+inputTypeBoolOrCheckBox :: FieldView site -> Bool+inputTypeBoolOrCheckBox FieldView{fvLabel}+ = let textLabel = renderHtml fvLabel+ in "radio" `TL.isInfixOf` textLabel || "checkbox" `TL.isInfixOf` textLabel+ -- | (Internal) Render a help widget for tooltips and errors.+-- .invalid-feedbackを必ず表示する+-- bootstrap 4.1の書式ではinputがerrorでなければエラーメッセージが出ませんが+-- yesod-formのAPIではfvInput自体を弄るのが困難ですし+-- yesod-formのAPI上fvErrorsが存在する時は常にエラーメッセージは表示させるべきなので汚いやり方ですが+-- styleを上書きして常に表示します helpWidget :: FieldView site -> WidgetFor site () helpWidget view = [whamlet| $maybe err <- fvErrors view- <div .invalid-feedback>#{err}+ <div .invalid-feedback style="display: block;">+ #{err} $maybe tt <- fvTooltip view- <small .form-text .text-muted>#{tt}+ <small .form-text .text-muted>+ #{tt} |] -- | How the 'bootstrapSubmit' button should be rendered.
yesod-form-bootstrap4.cabal view
@@ -1,13 +1,13 @@ cabal-version: 1.12 --- This file has been generated from package.yaml by hpack version 0.31.0.+-- This file has been generated from package.yaml by hpack version 0.31.2. -- -- see: https://github.com/sol/hpack ----- hash: 4bbff4c394ce1a526891998f9600319c5f8354612e0160aeace56e55c1c0263e+-- hash: aa841e3379ef662031635a0fd759ff78b912b6a0d8a5596801cf33557e9cb336 name: yesod-form-bootstrap4-version: 2.1.0+version: 2.1.2 synopsis: renderBootstrap4 category: Web homepage: https://github.com/ncaq/yesod-form-bootstrap4#readme@@ -25,8 +25,12 @@ library hs-source-dirs: src+ ghc-options: -Wall -Widentities -Wincomplete-record-updates -Wincomplete-uni-patterns -Wmissing-exported-signatures -Wmissing-home-modules -Wredundant-constraints build-depends: base >=4.7 && <5+ , blaze-html+ , blaze-markup+ , shakespeare , text , yesod-core , yesod-form