status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#17288] refactor: migrate previews (markdown, messages) to new api (#17280)

This commit is contained in:
Mohsen Ghafouri 2023-09-15 19:53:30 +03:00 committed by GitHub
parent a24ddbeefa
commit b73ea572ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 102 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs
View File

@ -25,9 +25,7 @@
:value "48"}
{:key 80
:value "80"}]}
{:label "Emoji"
:key :emoji
:type :text}
{:key :emoji :type :text}
(preview/customization-color-option)])
(defn view

2
src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs
View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.quo-preview.avatars.icon-avatar
(:require [quo2.components.avatars.icon-avatar :as quo]
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))

2
src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs
View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.quo-preview.avatars.user-avatar
(:require [quo2.components.avatars.user-avatar.view :as quo]
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview]))

2
src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs
View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.quo-preview.avatars.wallet-user-avatar
(:require [quo2.components.avatars.wallet-user-avatar :as quo]
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))

6
src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs
View File

@ -71,7 +71,7 @@
[quo/text {:style text-style}
"Group chats are always end-to-end encrypted with secure cryptographic keys. Only the group chat members will have access to the messages in it. Status doesn't have the keys and can't access any messages by design."]]))
(defn documenation-drawer
(defn documentation-drawer
[title show-button? button-label expanded? shell?]
[quo/documentation-drawers
{:title title
@ -99,11 +99,11 @@
{:container-style {:margin-horizontal 40
:margin-bottom 20}
:on-press #(rf/dispatch [:show-bottom-sheet
{:content (constantly [documenation-drawer @title
{:content (constantly [documentation-drawer @title
@show-button?
@button-label expanded? @shell?])
:expandable? @show-button?
:shell? @shell?
:expanded? @expanded?}])}
"Open drawer"]
[documenation-drawer @title @show-button? @button-label expanded?]])))
[documentation-drawer @title @show-button? @button-label expanded?]])))

2
src/status_im2/contexts/quo_preview/info/info_message.cljs
View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.quo-preview.info.info-message
(:require [quo2.components.info.info-message :as quo]
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))

10
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -43,7 +43,7 @@
[status-im2.contexts.quo-preview.dividers.new-messages :as new-messages]
[status-im2.contexts.quo-preview.dividers.strength-divider :as strength-divider]
[status-im2.contexts.quo-preview.drawers.action-drawers :as action-drawers]
[status-im2.contexts.quo-preview.drawers.documentation-drawers :as documenation-drawers]
[status-im2.contexts.quo-preview.drawers.documentation-drawers :as documentation-drawers]
[status-im2.contexts.quo-preview.drawers.drawer-buttons :as drawer-buttons]
[status-im2.contexts.quo-preview.drawers.drawer-top :as drawer-top]
[status-im2.contexts.quo-preview.drawers.permission-drawers :as permission-drawers]
@ -209,7 +209,7 @@
:drawers [{:name :action-drawers
:component action-drawers/view}
{:name :documentation-drawer
:component documenation-drawers/view}
:component documentation-drawers/view}
{:name :drawer-buttons
:component drawer-buttons/view}
{:name :drawer-top
@ -283,15 +283,15 @@
:options {:topBar {:visible true}}
:component skeleton-list/view}]
:markdown [{:name :texts
:component text/preview-text}
:component text/view}
{:name :markdown-list
:component markdown-list/preview-markdown-list}]
:component markdown-list/view}]
:messages [{:name :gap
:component messages-gap/preview-messages-gap}
{:name :system-messages
:component system-message/preview-system-message}
{:name :author
:component messages-author/preview-author}]
:component messages-author/view}]
:navigation [{:name :bottom-nav-tab
:component bottom-nav-tab/preview-bottom-nav-tab}
{:name :top-nav

89
src/status_im2/contexts/quo_preview/markdown/list.cljs
View File

@ -1,80 +1,35 @@
(ns status-im2.contexts.quo-preview.markdown.list
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[status-im2.common.resources :as resources]))
(def descriptor
[{:label "Title:"
:key :title
:type :text}
{:label "Description:"
:key :description
:type :text}
{:label "Tag name:"
:key :tag-name
:type :text}
{:label "Description After Tag (Set tag name):"
:key :description-after-tag
:type :text}
{:label "Type: (step uses index)"
:key :type
[{:key :title :type :text}
{:key :description :type :text}
{:key :tag-name :type :text}
{:key :description-after-tag :type :text}
{:key :step-number :type :text}
{:key :blur? :type :boolean}
{:key :type
:type :select
:options [{:key :bullet
:value :bullet}
{:key :step
:value :step}]}
{:label "Step Number:"
:key :step-number
:type :text}
{:label "Customization Color:"
:key :customization-color
:type :select
:options [{:key :blue
:value :blue}
{:key :army
:value :army}
{:key :none
:value :none}]}
{:label "Blur? (Dark only):"
:key :blur?
:type :boolean}])
:options [{:key :bullet}
{:key :step}]}
(preview/customization-color-option)])
(defn cool-preview
(defn view
[]
(let [state (reagent/atom {:title "Be respectful"
:description "Lorem ipsum dolor sit amet."})]
(fn []
(let [{:keys [title step-number customization-color description tag-name description-after-tag type
blur?]} @state
tag-picture (when tag-name (resources/get-mock-image :monkey))]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:background-color (when blur? "#484F5E")}
[quo/markdown-list
{:type type
:blur? blur?
:title (when (pos? (count title)) title)
:step-number step-number
:description description
:tag-name tag-name
:tag-picture tag-picture
:description-after-tag description-after-tag
:customization-color customization-color}]]]]))))
(defn preview-markdown-list
[]
[rn/view
{:background-color
(colors/theme-colors colors/white colors/neutral-95)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])
(let [{:keys [title tag-name]} @state
tag-picture (when tag-name (resources/get-mock-image :monkey))]
[preview/preview-container
{:state state
:descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? (:blur? @state)}
[quo/markdown-list
(assoc @state
:title (when (pos? (count title)) title)
:tag-picture tag-picture)]]))))

49
src/status_im2/contexts/quo_preview/markdown/text.cljs
View File

@ -1,43 +1,30 @@
(ns status-im2.contexts.quo-preview.markdown.text
(:require [quo2.components.markdown.text :as quo2]
[react-native.core :as rn]
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Size:"
:key :size
[{:key :size
:type :select
:options [{:key :heading-1
:value "Heading 1"}
{:key :heading-2
:value "Heading 2"}
{:key :paragraph-1
:value "Paragraph 1"}
{:key :paragraph-2
:value "Paragraph 2"}
{:key :label
:value "Label"}]}
{:label "Weight:"
:key :weight
:options [{:key :heading-1}
{:key :heading-2}
{:key :paragraph-1}
{:key :paragraph-2}
{:key :label}]}
{:key :weight
:type :select
:options [{:key :regular
:value "Regular"}
{:key :medium
:value "Medium"}
{:key :semi-bold
:value "Semi-bold"}
{:key :monospace
:value "Monospace"}]}])
:options [{:key :regular}
{:key :medium}
{:key :semi-bold}
{:key :monospace}]}])
(defn preview-text
(defn view
[]
(let [state (reagent/atom {})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view {:padding-vertical 60}
[quo2/text @state
"The quick brown fox jumped over the lazy dog."]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 60}}
[quo/text @state
"The quick brown fox jumped over the lazy dog."]])))

64
src/status_im2/contexts/quo_preview/messages/author.cljs
View File

@ -1,51 +1,31 @@
(ns status-im2.contexts.quo-preview.messages.author
(:require [quo2.components.markdown.text :as text]
[quo2.components.messages.author.view :as quo2]
[react-native.core :as rn]
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Primary name"
:key :primary-name
:type :text
:limit 24}
{:label "Secondary name"
:key :secondary-name
:type :text}
{:label "Chat key"
:key :chat-key
:type :text}
{:label "Time"
:key :time-str
:type :text
:limit 5}
{:label "Is contact?"
:key :contact?
:type :boolean}
{:label "Is verified?"
:key :verified?
:type :boolean}
{:label "Is untrustworthy?"
:key :untrustworthy?
:type :boolean}])
[{:key :primary-name :type :text :limit 24}
{:key :secondary-name :type :text}
{:key :short-chat-key :type :text}
{:key :time-str :type :text :limit 5}
{:key :contact? :type :boolean}
{:key :verified? :type :boolean}
{:key :muted? :type :boolean}
{:key :untrustworthy? :type :boolean}
{:key :size
:type :select
:options [{:key 13 :value "13"}
{:key 15 :value "15"}]}])
(defn preview-author
(defn view
[]
(let [state (reagent/atom {:primary-name "Alisher Yakupov"
:seconadary-name ""
:time-str "09:30"
:contact? false
:verified? false
:untrustworthy? false})]
(let [state (reagent/atom {:primary-name "Alisher Yakupov"
:time-str "09:30"
:size 13})]
(fn []
[preview/preview-container
{:state state :descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view
{:padding-vertical 60
:padding--horizontal 15
:justify-content :center}
[rn/view
[text/text "Author:"]
[quo2/author @state]]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 50
:padding-horizontal 20}}
[quo/author @state]])))

25
src/status_im2/contexts/quo_preview/messages/gap.cljs
View File

@ -1,17 +1,12 @@
(ns status-im2.contexts.quo-preview.messages.gap
(:require [quo2.components.messages.gap :as gap]
[react-native.core :as rn]
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[utils.i18n :as i18n]
[status-im2.contexts.quo-preview.preview :as preview]))
[status-im2.contexts.quo-preview.preview :as preview]
[utils.i18n :as i18n]))
(def descriptor
[{:label "Timestamp Far"
:key :timestamp-far
:type :text}
{:label "Timestamp Near"
:key :timestamp-near
:type :text}])
[{:key :timestamp-far :type :text}
{:key :timestamp-near :type :text}])
(defn preview-messages-gap
[]
@ -22,9 +17,7 @@
:warning-label (i18n/label :messages-gap-warning)})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view
{:padding-vertical 60
:align-items :center}
[gap/gap @state]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 60}}
[quo/gap @state]])))

50
src/status_im2/contexts/quo_preview/messages/system_message.cljs
View File

@ -1,58 +1,44 @@
(ns status-im2.contexts.quo-preview.messages.system-message
(:require [quo2.components.messages.system-message :as system-message]
(:require [quo2.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Message Type"
[{:label "Message Content"
:key :content
:type :text}
{:label "Message Type"
:key :type
:type :select
:options [{:value "Message pinned"
:key :pinned}
{:value "Contact request"
:key :contact-request}
{:key :contact-request}
{:value "User added"
:key :added}
{:value "User removed"
:key :removed}
{:value "Message deleted"
:key :deleted}]}
{:label "Action"
:key :action
:type :select
:options [{:value "none"
:key nil}
{:value "Undo"
:key :undo}]}
{:label "Pinned By"
:key :pinned-by
:type :text}
{:label "Content Text"
:key :content-text
:type :text}
{:label "Content Info"
:key :content-info
:type :text}])
{:key :pinned-by :type :text}
{:key :incoming? :type :boolean}
(preview/customization-color-option)])
(defn finalize-state
[state]
(merge @state
{:child (when (= (:type @state) :pinned) [rn/text "Message content"])
{:child (when (= (:type @state) :pinned) [rn/text (:content @state)])
:display-name (:pinned-by @state)}))
(defn preview-system-message
[]
(let [state (reagent/atom {:type :pinned
:pinned-by "Steve"
:timestamp "09:41"
:content-text "Hello! This is an example of a pinned message!"
:content-info "3 photos"})]
(let [state (reagent/atom {:type :pinned
:pinned-by "Steve"
:timestamp "09:41"
:content "Hello! This is an example of a content!"})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:padding-bottom 150}
[rn/view
{:padding-vertical 60 :flex 1}
[system-message/system-message (finalize-state state)]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 60}}
[quo/system-message (finalize-state state)]])))