Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add wrap keyword in v-box and h-box #312

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add wrap keyword in v-box and h-box #312

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5bae327
Add custom wrap in h-box
MawiraIke Dec 27, 2021
ba71790
Add custom wrap in v-box
MawiraIke Dec 27, 2021
44570bc
Display wrap as string in demo
MawiraIke Jan 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions src/re_com/box.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,19 +249,20 @@
{:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"}
{:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}
{:name :src :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging. Source code coordinates map containing keys" [:code ":file"] "and" [:code ":line"] ". See 'Debugging'."]}
{:name :debug-as :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging, when one component is used implement another component, and we want the implementation component to masquerade as the original component in debug output, such as component stacks. A map optionally containing keys" [:code ":component"] "and" [:code ":args"] "."]}]))
{:name :debug-as :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging, when one component is used implement another component, and we want the implementation component to masquerade as the original component in debug output, such as component stacks. A map optionally containing keys" [:code ":component"] "and" [:code ":args"] "."]}
{:name :wrap :required false :type "string" :validate-fn string? :description [:span "a CSS flex-wrap property. Specifies whether the box should wrap or not. Examples: " [:code "nowrap"] ", " [:code "wrap"] ", " [:code "wrap-reverse"] ", " [:code "initial"] "and" [:code "inherit"] "."]}]))

(defn h-box
"Returns hiccup which produces a horizontal box.
It's primary role is to act as a container for components and lays it's children from left to right.
By default, it also acts as a child under it's parent"
[& {:keys [size width height min-width min-height max-width max-height justify align align-self margin padding gap children class style attr]
[& {:keys [size width height min-width min-height max-width max-height justify align align-self margin padding gap children class style attr wrap]
:or {size "none" justify :start align :stretch}
:as args}]
(or
(validate-args-macro h-box-args-desc args)
(let [s (merge
(flex-flow-style "row nowrap")
(flex-flow-style (str "row " (or wrap "nowrap")))
(flex-child-style size)
(when width {:width width})
(when height {:height height})
Expand Down Expand Up @@ -314,19 +315,20 @@
{:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"}
{:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}
{:name :src :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging. Source code coordinates map containing keys" [:code ":file"] "and" [:code ":line"] ". See 'Debugging'."]}
{:name :debug-as :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging, when one component is used implement another component, and we want the implementation component to masquerade as the original component in debug output, such as component stacks. A map optionally containing keys" [:code ":component"] "and" [:code ":args"] "."]}]))
{:name :debug-as :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging, when one component is used implement another component, and we want the implementation component to masquerade as the original component in debug output, such as component stacks. A map optionally containing keys" [:code ":component"] "and" [:code ":args"] "."]}
{:name :wrap :required false :type "string" :validate-fn string? :description [:span "a CSS flex-wrap property. Specifies whether the box should wrap or not. Examples: " [:code "nowrap"] ", " [:code "wrap"] ", " [:code "wrap-reverse"] ", " [:code "initial"] "and" [:code "inherit"] "."]}]))

(defn v-box
"Returns hiccup which produces a vertical box.
It's primary role is to act as a container for components and lays it's children from top to bottom.
By default, it also acts as a child under it's parent"
[& {:keys [size width height min-width min-height max-width max-height justify align align-self margin padding gap children class style attr]
[& {:keys [size width height min-width min-height max-width max-height justify align align-self margin padding gap children class style attr wrap]
:or {size "none" justify :start align :stretch}
:as args}]
(or
(validate-args-macro v-box-args-desc args)
(let [s (merge
(flex-flow-style "column nowrap")
(flex-flow-style (str "column " (or wrap "nowrap")))
(flex-child-style size)
(when width {:width width})
(when height {:height height})
Expand Down