Information box component
This commit is contained in:
Parvesh Monu
parent
230005fd1b
commit
c1ca92959c
Binary file not shown.
|
Before Width: | Height: | Size: 335 B After Width: | Height: | Size: 225 B |
Binary file not shown.
|
Before Width: | Height: | Size: 468 B After Width: | Height: | Size: 271 B |
|
|
@ -0,0 +1,91 @@
|
|||
(ns quo2.components.information-box
|
||||
(:require [quo.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
[clojure.string :as string]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as quo2.icons]
|
||||
[quo2.components.button :as quo2.button]
|
||||
[quo2.components.info-message :as info-message]))
|
||||
|
||||
(def themes
|
||||
{:light {:default {:bg colors/white
|
||||
:border colors/neutral-20
|
||||
:icon colors/neutral-50
|
||||
:text colors/black}
|
||||
:informative {:bg colors/primary-50-opa-5
|
||||
:border colors/primary-50-opa-10
|
||||
:icon colors/primary-50
|
||||
:text colors/black}
|
||||
:error {:bg colors/danger-50-opa-5
|
||||
:border colors/danger-50-opa-10
|
||||
:icon colors/danger-50
|
||||
:text colors/danger-50}
|
||||
:close-button colors/black}
|
||||
:dark {:default {:bg colors/neutral-90
|
||||
:border colors/neutral-70
|
||||
:icon colors/neutral-40
|
||||
:text colors/white}
|
||||
:informative {:bg colors/primary-50-opa-5
|
||||
:border colors/primary-50-opa-10
|
||||
:icon colors/white
|
||||
:text colors/white}
|
||||
:error {:bg colors/danger-50-opa-5
|
||||
:border colors/danger-50-opa-10
|
||||
:icon colors/danger-50
|
||||
:text colors/danger-50}
|
||||
:close-button colors/white}})
|
||||
|
||||
(defn get-color [key]
|
||||
(get-in themes [(theme/get-theme) key]))
|
||||
|
||||
(defn get-color-by-type [type key]
|
||||
(get-in themes [(theme/get-theme) type key]))
|
||||
|
||||
(defn information-box
|
||||
"[information-box opts \"message\"]
|
||||
opts
|
||||
{:type :default/:informative/:error
|
||||
:closable? true/false ;; allow information box to be closed?
|
||||
:closed? true/false ;; information box's state
|
||||
:id :information-box-id ;; unique id (required for closable? information box)
|
||||
:icon :main-icons/info ;; information box icon
|
||||
:style style
|
||||
:button-label \"PressMe\" ;; add action button with label
|
||||
:on-button-press action ;; (required for information box with button-label)
|
||||
:on-close on-close ;; (optional on-close call)"
|
||||
[{:keys [type closable? closed? id icon style button-label on-button-press on-close]} message]
|
||||
(let [background-color (get-color-by-type type :bg)
|
||||
border-color (get-color-by-type type :border)
|
||||
icon-color (get-color-by-type type :icon)
|
||||
text-color (get-color-by-type type :text)
|
||||
include-button? (not (string/blank? button-label))]
|
||||
(when-not closed?
|
||||
[rn/view {:accessibility-label (or id :information-box)
|
||||
:style (merge {:background-color background-color
|
||||
:border-color border-color
|
||||
:border-width 1
|
||||
:border-radius 12
|
||||
:padding-top (if include-button? 10 11)
|
||||
:padding-bottom (if include-button? 12 11)
|
||||
:padding-horizontal 16} style)}
|
||||
[rn/view {:style {:flex-direction :row
|
||||
:align-self :flex-start}}
|
||||
[info-message/info-message {:size :default
|
||||
:icon icon
|
||||
:text-color text-color
|
||||
:icon-color icon-color} message]
|
||||
(when closable?
|
||||
[rn/touchable-opacity
|
||||
{:on-press on-close
|
||||
:accessibility-label (str (or id "information-box") "-close-button")}
|
||||
[quo2.icons/icon :main-icons2/close {:size 12
|
||||
:color (get-color :close-button)
|
||||
:container-style {:margin-top 4
|
||||
:margin-left 8}}]])]
|
||||
(when include-button?
|
||||
[quo2.button/button {:type :primary
|
||||
:size 24
|
||||
:on-press on-button-press
|
||||
:style {:margin-left 20
|
||||
:margin-top 8
|
||||
:align-self :flex-start}} button-label])])))
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
(ns quo2.screens.information-box
|
||||
(:require [quo.react-native :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.information-box :as quo2]))
|
||||
|
||||
(def descriptor [{:label "Type:"
|
||||
:key :type
|
||||
:type :select
|
||||
:options [{:key :default
|
||||
:value "Default"}
|
||||
{:key :informative
|
||||
:value "Informative"}
|
||||
{:key :error
|
||||
:value "Error"}]}
|
||||
{:label "Closable?:"
|
||||
:key :closable?
|
||||
:type :boolean}
|
||||
{:label "Message"
|
||||
:key :message
|
||||
:type :text}
|
||||
{:label "Button Label"
|
||||
:key :button-label
|
||||
:type :text}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:type :default
|
||||
:closable? true
|
||||
:icon :main-icons2/placeholder
|
||||
:message "This is an information box This is an information"
|
||||
:button-label "Press Me"
|
||||
:style {:width 335}
|
||||
:id (keyword (str "id-" (rand-int 10000)))})
|
||||
closed? (reagent/cursor state [:closed?])
|
||||
on-close #(reset! closed? true)]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2/information-box (merge @state {:on-close on-close}) (:message @state)]]])))
|
||||
|
||||
(defn preview-information-box []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
:flex 1}
|
||||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
|
|
@ -12,6 +12,8 @@
|
|||
[quo2.screens.activity-logs :as activity-logs]
|
||||
[quo2.screens.counter :as counter]
|
||||
[quo2.screens.segmented :as segmented]
|
||||
[quo2.screens.info-message :as info-message]
|
||||
[quo2.screens.information-box :as information-box]
|
||||
[quo.components.safe-area :as safe-area]
|
||||
[quo.core :as quo]))
|
||||
|
||||
|
|
@ -41,7 +43,13 @@
|
|||
:component segmented/preview-segmented}
|
||||
{:name :quo2-counter
|
||||
:insets {:top false}
|
||||
:component counter/preview-counter}])
|
||||
:component counter/preview-counter}
|
||||
{:name :info-message
|
||||
:insets {:top false}
|
||||
:component info-message/preview-info-message}
|
||||
{:name :information-box
|
||||
:insets {:top false}
|
||||
:component information-box/preview-information-box}])
|
||||
|
||||
(defn theme-switcher []
|
||||
[rn/view {:style {:flex-direction :row
|
||||
|
|
|
|||
Loading…
Reference in New Issue