migrate reagent part6 (#19270)
This commit is contained in:
flexsurfer
GitHub
parent
3164cc6a6c
commit
cfc43be3cc
|
|
@ -9,11 +9,10 @@
|
|||
[quo.components.tags.status-tags :as status-tags]
|
||||
[quo.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[utils.i18n :as i18n]))
|
||||
|
||||
(defn- activity-reply-text-input
|
||||
[{:keys [on-update-reply max-reply-length valid-reply?]} reply-input]
|
||||
[{:keys [on-update-reply max-reply-length valid-reply?]} reply-input set-reply-input]
|
||||
[rn/view
|
||||
[rn/view
|
||||
{:style {:margin-top 16
|
||||
|
|
@ -26,12 +25,12 @@
|
|||
(i18n/label :t/your-answer)]
|
||||
[text/text
|
||||
{:style {:flex-shrink 1
|
||||
:color (if (valid-reply? @reply-input)
|
||||
:color (if (valid-reply? reply-input)
|
||||
colors/neutral-40
|
||||
colors/danger-60)}}
|
||||
(str (count @reply-input) "/" max-reply-length)]]
|
||||
(str (count reply-input) "/" max-reply-length)]]
|
||||
[input/input
|
||||
{:on-change-text #(do (reset! reply-input %)
|
||||
{:on-change-text #(do (set-reply-input %)
|
||||
(when on-update-reply
|
||||
(on-update-reply %)))
|
||||
:auto-capitalize :none
|
||||
|
|
@ -136,7 +135,7 @@
|
|||
(-> button
|
||||
(assoc :size size)
|
||||
(assoc :type subtype)
|
||||
(assoc :disabled? (and replying? disable-when (disable-when @reply-input)))
|
||||
(assoc :disabled? (and replying? disable-when (disable-when reply-input)))
|
||||
(assoc :inner-style
|
||||
{:justify-content :center
|
||||
:padding-bottom 0
|
||||
|
|
@ -153,17 +152,16 @@
|
|||
:blur? blur?}])
|
||||
|
||||
(defn- footer
|
||||
[_]
|
||||
(let [reply-input (reagent/atom "")]
|
||||
(fn [{:keys [replying? items] :as props}]
|
||||
[:<>
|
||||
(when replying?
|
||||
[activity-reply-text-input props reply-input])
|
||||
(when items
|
||||
[rn/view style/footer-container
|
||||
(for [item items]
|
||||
^{:key (:key item)}
|
||||
[footer-item-view item replying? reply-input])])])))
|
||||
[{:keys [replying? items] :as props}]
|
||||
(let [[reply-input set-reply-input] (rn/use-state "")]
|
||||
[:<>
|
||||
(when replying?
|
||||
[activity-reply-text-input props reply-input set-reply-input])
|
||||
(when items
|
||||
[rn/view style/footer-container
|
||||
(for [item items]
|
||||
^{:key (:key item)}
|
||||
[footer-item-view item replying? reply-input])])]))
|
||||
|
||||
(defn view
|
||||
[{:keys [icon
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
[quo.foundations.colors :as colors]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.svg :as svg]
|
||||
[reagent.core :as reagent]))
|
||||
[react-native.svg :as svg]))
|
||||
|
||||
(defn- get-path-props
|
||||
[size stroke-width rotation]
|
||||
|
|
@ -49,60 +48,53 @@
|
|||
{:color {:dark colors/neutral-80-opa-40
|
||||
:light colors/white-opa-40}})
|
||||
|
||||
(defn- circle-timer-internal
|
||||
[{:keys [color duration size stroke-width trail-color rotation initial-remaining-time theme]}]
|
||||
(let [rotation (or rotation :clockwise)
|
||||
duration (or duration 4)
|
||||
stroke-width (or stroke-width 1)
|
||||
size (or size 9)
|
||||
max-stroke-width (max stroke-width 0)
|
||||
{:keys [path path-length]} (get-path-props size max-stroke-width rotation)
|
||||
start-at (get-start-at duration initial-remaining-time)
|
||||
elapsed-time (reagent/atom 0)
|
||||
prev-frame-time (reagent/atom nil)
|
||||
frame-request (reagent/atom nil)
|
||||
display-time (reagent/atom start-at)
|
||||
;; get elapsed frame time
|
||||
swap-elapsed-time-each-frame (fn swap-elapsed-time-each-frame [frame-time]
|
||||
(if (nil? @prev-frame-time)
|
||||
(do (reset! prev-frame-time frame-time)
|
||||
(reset! frame-request (js/requestAnimationFrame
|
||||
swap-elapsed-time-each-frame)))
|
||||
(let [delta (- (/ frame-time 1000)
|
||||
(/ @prev-frame-time 1000))
|
||||
current-elapsed (swap! elapsed-time + delta)
|
||||
current-display-time (+ start-at current-elapsed)
|
||||
completed? (>= current-display-time duration)]
|
||||
(reset! display-time (if completed?
|
||||
duration
|
||||
current-display-time))
|
||||
(when-not completed?
|
||||
(reset! prev-frame-time frame-time)
|
||||
(reset! frame-request (js/requestAnimationFrame
|
||||
swap-elapsed-time-each-frame))))))]
|
||||
(reagent/create-class
|
||||
{:component-will-unmount #(js/cancelAnimationFrame @frame-request)
|
||||
:reagent-render
|
||||
(fn []
|
||||
(reset! frame-request (js/requestAnimationFrame swap-elapsed-time-each-frame))
|
||||
[rn/view
|
||||
{:style {:position :relative
|
||||
:width size
|
||||
:height size}}
|
||||
[svg/svg
|
||||
{:view-box (str "0 0 " size " " size)
|
||||
:width size
|
||||
:height size}
|
||||
[svg/path
|
||||
{:d path :fill :none :stroke (or trail-color :transparent) :stroke-width stroke-width}]
|
||||
(when-not (= @display-time duration)
|
||||
[svg/path
|
||||
{:d path
|
||||
:fill :none
|
||||
:stroke (or color (get-in themes [:color theme]))
|
||||
:stroke-linecap :square
|
||||
:stroke-width stroke-width
|
||||
:stroke-dasharray path-length
|
||||
:stroke-dashoffset (linear-ease @display-time 0 path-length duration)}])]])})))
|
||||
|
||||
(def circle-timer (quo.theme/with-theme circle-timer-internal))
|
||||
(defn circle-timer
|
||||
[{:keys [color duration size stroke-width trail-color rotation initial-remaining-time]}]
|
||||
(let [theme (quo.theme/use-theme-value)
|
||||
rotation (or rotation :clockwise)
|
||||
duration (or duration 4)
|
||||
stroke-width (or stroke-width 1)
|
||||
size (or size 9)
|
||||
max-stroke-width (max stroke-width 0)
|
||||
{:keys [path path-length]} (get-path-props size max-stroke-width rotation)
|
||||
start-at (get-start-at duration initial-remaining-time)
|
||||
elapsed-time (rn/use-ref-atom 0)
|
||||
prev-frame-time (rn/use-ref-atom nil)
|
||||
frame-request (rn/use-ref-atom nil)
|
||||
[display-time set-display-time] (rn/use-state start-at)
|
||||
swap-elapsed-time-each-frame (fn swap-elapsed-time-each-frame [frame-time]
|
||||
(if (nil? @prev-frame-time)
|
||||
(do (reset! prev-frame-time frame-time)
|
||||
(reset! frame-request (js/requestAnimationFrame
|
||||
swap-elapsed-time-each-frame)))
|
||||
(let [delta (- (/ frame-time 1000)
|
||||
(/ @prev-frame-time 1000))
|
||||
current-elapsed (swap! elapsed-time + delta)
|
||||
current-display-time (+ start-at current-elapsed)
|
||||
completed? (>= current-display-time
|
||||
duration)]
|
||||
(set-display-time
|
||||
(if completed? duration current-display-time))
|
||||
(when-not completed?
|
||||
(reset! prev-frame-time frame-time)))))]
|
||||
(rn/use-effect #(reset! frame-request (js/requestAnimationFrame swap-elapsed-time-each-frame)))
|
||||
(rn/use-unmount #(js/cancelAnimationFrame @frame-request))
|
||||
[rn/view
|
||||
{:style {:position :relative
|
||||
:width size
|
||||
:height size}}
|
||||
[svg/svg
|
||||
{:view-box (str "0 0 " size " " size)
|
||||
:width size
|
||||
:height size}
|
||||
[svg/path
|
||||
{:d path :fill :none :stroke (or trail-color :transparent) :stroke-width stroke-width}]
|
||||
(when-not (= display-time duration)
|
||||
[svg/path
|
||||
{:d path
|
||||
:fill :none
|
||||
:stroke (or color (get-in themes [:color theme]))
|
||||
:stroke-linecap :square
|
||||
:stroke-width stroke-width
|
||||
:stroke-dasharray path-length
|
||||
:stroke-dashoffset (linear-ease display-time 0 path-length duration)}])]]))
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@
|
|||
[rn/touchable-highlight
|
||||
{:on-press on-press
|
||||
:underlay-color :transparent}
|
||||
[into
|
||||
(into
|
||||
[rn/view
|
||||
{:style (merge (style/action-container theme) style)}]
|
||||
children]])
|
||||
children)])
|
||||
|
||||
(defn toast-undo-action-internal
|
||||
[{:keys [undo-duration undo-on-press theme]}]
|
||||
|
|
|
|||
|
|
@ -3,23 +3,20 @@
|
|||
[quo.components.icon :as icon]
|
||||
[quo.components.selectors.filter.style :as style]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn view-internal
|
||||
[initial-props]
|
||||
(let [pressed? (reagent/atom (:pressed? initial-props))]
|
||||
(fn [{:keys [blur? customization-color theme on-press-out]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:accessibility-label :selector-filter
|
||||
:on-press-out (fn []
|
||||
(swap! pressed? not)
|
||||
(when on-press-out
|
||||
(on-press-out @pressed?)))}
|
||||
[rn/view {:style (style/container-outer customization-color @pressed? theme)}
|
||||
[rn/view {:style (style/container-inner @pressed? blur? theme)}
|
||||
[icon/icon :i/unread
|
||||
{:color (style/icon-color @pressed? theme)
|
||||
:size 20}]]]])))
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
(defn view
|
||||
[{:keys [blur? customization-color on-press-out pressed?]}]
|
||||
(let [theme (quo.theme/use-theme-value)
|
||||
[pressed? set-pressed] (rn/use-state pressed?)
|
||||
on-press-out (fn []
|
||||
(set-pressed (not pressed?))
|
||||
(when on-press-out (on-press-out pressed?)))]
|
||||
[rn/touchable-without-feedback
|
||||
{:accessibility-label :selector-filter
|
||||
:on-press-out on-press-out}
|
||||
[rn/view {:style (style/container-outer customization-color pressed? theme)}
|
||||
[rn/view {:style (style/container-inner pressed? blur? theme)}
|
||||
[icon/icon :i/unread
|
||||
{:color (style/icon-color pressed? theme)
|
||||
:size 20}]]]]))
|
||||
|
|
|
|||
|
|
@ -2,23 +2,20 @@
|
|||
(:require
|
||||
[quo.components.selectors.reaction-resource :as reactions.resource]
|
||||
[quo.components.selectors.reactions-selector.style :as style]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn view
|
||||
[{:keys [start-pressed?]}]
|
||||
(let [pressed? (reagent/atom start-pressed?)]
|
||||
(fn [{:keys [emoji container-style on-press
|
||||
accessibility-label]
|
||||
:or {accessibility-label :reaction}}]
|
||||
[rn/pressable
|
||||
{:accessibility-label accessibility-label
|
||||
:allow-multiple-presses? true
|
||||
:style (merge (style/container @pressed?)
|
||||
container-style)
|
||||
:on-press (fn [e]
|
||||
(swap! pressed? not)
|
||||
(when on-press
|
||||
(on-press e)))}
|
||||
[rn/text
|
||||
(reactions.resource/system-emojis emoji)]])))
|
||||
[{:keys [emoji container-style on-press
|
||||
accessibility-label start-pressed?]
|
||||
:or {accessibility-label :reaction}}]
|
||||
(let [[pressed? set-pressed] (rn/use-state start-pressed?)
|
||||
on-press (fn [e]
|
||||
(set-pressed (not pressed?))
|
||||
(when on-press (on-press e)))]
|
||||
[rn/pressable
|
||||
{:accessibility-label accessibility-label
|
||||
:allow-multiple-presses? true
|
||||
:style (merge (style/container pressed?)
|
||||
container-style)
|
||||
:on-press on-press}
|
||||
[rn/text (reactions.resource/system-emojis emoji)]]))
|
||||
|
|
|
|||
|
|
@ -3,47 +3,47 @@
|
|||
[quo.components.icon :as icons]
|
||||
[quo.components.selectors.selectors.style :as style]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn- handle-press
|
||||
[on-change checked-atom checked?]
|
||||
(when checked-atom (swap! checked-atom not))
|
||||
(when on-change (on-change (not checked?))))
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn- base-selector
|
||||
[{:keys [default-checked? checked?]}]
|
||||
(let [controlled-component? (some? checked?)
|
||||
internal-checked? (when-not controlled-component?
|
||||
(reagent/atom (or default-checked? false)))]
|
||||
(fn [{:keys [checked? disabled? blur? customization-color on-change container-style
|
||||
label-prefix outer-style-fn inner-style-fn icon-style-fn theme]
|
||||
:or {customization-color :blue}}]
|
||||
(let [actual-checked? (if controlled-component? checked? @internal-checked?)
|
||||
accessibility-label (str label-prefix "-" (if actual-checked? "on" "off"))
|
||||
test-id (str label-prefix "-component")
|
||||
outer-styles (outer-style-fn {:checked? actual-checked?
|
||||
[{:keys [default-checked? checked? disabled? blur? customization-color on-change container-style
|
||||
label-prefix outer-style-fn inner-style-fn icon-style-fn theme]
|
||||
:or {customization-color :blue}}]
|
||||
(let [controlled-component? (some? checked?)
|
||||
[internal-checked?
|
||||
set-internal-checked?] (rn/use-state (when-not controlled-component?
|
||||
(or default-checked? false)))
|
||||
actual-checked? (if controlled-component? checked? internal-checked?)
|
||||
accessibility-label (str label-prefix "-" (if actual-checked? "on" "off"))
|
||||
test-id (str label-prefix "-component")
|
||||
outer-styles (outer-style-fn {:checked? actual-checked?
|
||||
:disabled? disabled?
|
||||
:blur? blur?
|
||||
:container-style container-style
|
||||
:customization-color customization-color
|
||||
:theme theme})]
|
||||
[rn/pressable
|
||||
(when-not disabled?
|
||||
{:on-press #(handle-press on-change internal-checked? actual-checked?)
|
||||
:allow-multiple-presses? true})
|
||||
[rn/view
|
||||
{:style outer-styles
|
||||
:needs-offscreen-alpha-compositing true
|
||||
:accessibility-label accessibility-label
|
||||
:testID test-id}
|
||||
[rn/view
|
||||
{:style (inner-style-fn {:theme theme
|
||||
:checked? actual-checked?
|
||||
:blur? blur?
|
||||
:customization-color customization-color})}
|
||||
(when (and icon-style-fn actual-checked?)
|
||||
[icons/icon :i/check-small (icon-style-fn actual-checked? blur? theme)])]]]))))
|
||||
:theme theme})
|
||||
on-press (rn/use-callback
|
||||
(fn []
|
||||
(when-not (nil? internal-checked?)
|
||||
(set-internal-checked? (not internal-checked?)))
|
||||
(when on-change (on-change (not actual-checked?))))
|
||||
[internal-checked? actual-checked? on-change])]
|
||||
[rn/pressable
|
||||
(when-not disabled?
|
||||
{:on-press on-press
|
||||
:allow-multiple-presses? true})
|
||||
[rn/view
|
||||
{:style outer-styles
|
||||
:needs-offscreen-alpha-compositing true
|
||||
:accessibility-label accessibility-label
|
||||
:testID test-id}
|
||||
[rn/view
|
||||
{:style (inner-style-fn {:theme theme
|
||||
:checked? actual-checked?
|
||||
:blur? blur?
|
||||
:customization-color customization-color})}
|
||||
(when (and icon-style-fn actual-checked?)
|
||||
[icons/icon :i/check-small (icon-style-fn actual-checked? blur? theme)])]]]))
|
||||
|
||||
(defn- toggle
|
||||
[props]
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
[:options {:optional true} [:maybe [:enum :add :hold]]]
|
||||
[:size {:optional true} [:maybe [:enum :size-24 :size-32]]]
|
||||
[:blur? {:optional true} [:maybe :boolean]]
|
||||
[:theme :schema.common/theme]
|
||||
[:collectible-img-src :schema.common/image-source]
|
||||
[:collectible-name :string]
|
||||
[:collectible-id :string]]]]
|
||||
|
|
|
|||
|
|
@ -8,52 +8,49 @@
|
|||
[quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.hole-view :as hole-view]
|
||||
[reagent.core :as reagent]
|
||||
[schema.core :as schema]))
|
||||
|
||||
(defn- view-internal
|
||||
[]
|
||||
(let [container-width (reagent/atom 0)
|
||||
on-layout #(->> (oops/oget % :nativeEvent :layout :width)
|
||||
(reset! container-width))]
|
||||
(fn [{:keys [options blur? theme collectible-img-src collectible-name collectible-id] :as props}]
|
||||
(let [size (or (:size props) :size-24)]
|
||||
[rn/view
|
||||
{:on-layout on-layout}
|
||||
[hole-view/hole-view
|
||||
{:holes (if options
|
||||
[{:x (- @container-width
|
||||
(case size
|
||||
:size-24 10
|
||||
:size-32 12
|
||||
nil))
|
||||
:y (case size
|
||||
:size-24 -6
|
||||
:size-32 -4
|
||||
nil)
|
||||
:width 16
|
||||
:height 16
|
||||
:borderRadius 8}]
|
||||
[])}
|
||||
[rn/view {:style (style/container size options blur? theme)}
|
||||
[rn/image {:style (style/collectible-img size) :source collectible-img-src}]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
:style (style/label theme)}
|
||||
collectible-name]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
:margin-left 5
|
||||
:style (style/label theme)}
|
||||
collectible-id]]]
|
||||
(when options
|
||||
[rn/view {:style (style/options-icon size)}
|
||||
[icons/icon (if (= options :hold) :i/hold :i/add-token)
|
||||
{:size 20
|
||||
:no-color true}]])]))))
|
||||
[{:keys [options blur? collectible-img-src collectible-name collectible-id] :as props}]
|
||||
(let [theme (quo.theme/use-theme-value)
|
||||
[container-width
|
||||
set-container-width] (rn/use-state 0)
|
||||
on-layout (rn/use-callback
|
||||
#(set-container-width (oops/oget % :nativeEvent :layout :width)))
|
||||
size (or (:size props) :size-24)]
|
||||
[rn/view {:on-layout on-layout}
|
||||
[hole-view/hole-view
|
||||
{:holes (if options
|
||||
[{:x (- container-width
|
||||
(case size
|
||||
:size-24 10
|
||||
:size-32 12
|
||||
nil))
|
||||
:y (case size
|
||||
:size-24 -6
|
||||
:size-32 -4
|
||||
nil)
|
||||
:width 16
|
||||
:height 16
|
||||
:borderRadius 8}]
|
||||
[])}
|
||||
[rn/view {:style (style/container size options blur? theme)}
|
||||
[rn/image {:style (style/collectible-img size) :source collectible-img-src}]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
:style (style/label theme)}
|
||||
collectible-name]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
:margin-left 5
|
||||
:style (style/label theme)}
|
||||
collectible-id]]]
|
||||
(when options
|
||||
[rn/view {:style (style/options-icon size)}
|
||||
[icons/icon (if (= options :hold) :i/hold :i/add-token)
|
||||
{:size 20
|
||||
:no-color true}]])]))
|
||||
|
||||
(def view
|
||||
(quo.theme/with-theme
|
||||
(schema/instrument #'view-internal component-schema/?schema)))
|
||||
(def view (schema/instrument #'view-internal component-schema/?schema))
|
||||
|
|
|
|||
|
|
@ -50,128 +50,131 @@
|
|||
- `fade-end-percentage` Percentage where fading starts relative to the total
|
||||
layout width of the `flat-list` data."
|
||||
|
||||
[{:keys [default-active fade-end-percentage]
|
||||
:or {fade-end-percentage 0.8}}]
|
||||
(let [active-tab-id (reagent/atom default-active)
|
||||
fading (reagent/atom {:fade-end-percentage fade-end-percentage})
|
||||
flat-list-ref (atom nil)]
|
||||
(fn
|
||||
[{:keys [data
|
||||
fade-end-percentage
|
||||
fade-end?
|
||||
on-change
|
||||
on-scroll
|
||||
scroll-event-throttle
|
||||
scrollable?
|
||||
scroll-on-press?
|
||||
size
|
||||
type
|
||||
labelled?
|
||||
disabled?
|
||||
blurred?
|
||||
icon-color]
|
||||
:or {fade-end-percentage fade-end-percentage
|
||||
fade-end? false
|
||||
scroll-event-throttle 64
|
||||
scrollable? false
|
||||
scroll-on-press? false
|
||||
size default-tab-size}
|
||||
:as props}]
|
||||
(let [maybe-mask-wrapper (if fade-end?
|
||||
[{:keys [default-active data fade-end-percentage fade-end? on-change on-scroll scroll-event-throttle
|
||||
scrollable?
|
||||
scroll-on-press? size type labelled? disabled? blurred? icon-color]
|
||||
:or {fade-end-percentage 0.8
|
||||
fade-end? false
|
||||
scroll-event-throttle 64
|
||||
scrollable? false
|
||||
scroll-on-press? false
|
||||
size default-tab-size}
|
||||
:as props}]
|
||||
(let [[active-tab-id
|
||||
set-active-tab-id] (rn/use-state default-active)
|
||||
[fading set-fading] (rn/use-state {:fade-end-percentage fade-end-percentage})
|
||||
flat-list-ref (rn/use-ref-atom nil)
|
||||
maybe-mask-wrapper (rn/use-memo
|
||||
(fn []
|
||||
(if fade-end?
|
||||
[masked-view/masked-view
|
||||
{:mask-element (reagent/as-element
|
||||
[linear-gradient/linear-gradient
|
||||
{:colors [:black :transparent]
|
||||
:locations [(get @fading :fade-end-percentage)
|
||||
:locations [(get fading :fade-end-percentage)
|
||||
1]
|
||||
:start {:x 0 :y 0}
|
||||
:end {:x 1 :y 0}
|
||||
:pointer-events :none
|
||||
:style {:width "100%"
|
||||
:height "100%"}}])}]
|
||||
[:<>])]
|
||||
(if scrollable?
|
||||
(conj
|
||||
maybe-mask-wrapper
|
||||
[rn/flat-list
|
||||
(merge
|
||||
(dissoc props
|
||||
:default-active
|
||||
:fade-end-percentage
|
||||
:fade-end?
|
||||
:on-change
|
||||
:scroll-on-press?
|
||||
:size)
|
||||
(when scroll-on-press?
|
||||
{:initial-scroll-index (utils.collection/first-index #(= @active-tab-id (:id %)) data)})
|
||||
{:ref #(reset! flat-list-ref %)
|
||||
:extra-data (str @active-tab-id)
|
||||
:horizontal true
|
||||
:scroll-event-throttle scroll-event-throttle
|
||||
:shows-horizontal-scroll-indicator false
|
||||
:data data
|
||||
:key-fn (comp str :id)
|
||||
:on-scroll (fn [^js e]
|
||||
(when fade-end?
|
||||
(let [offset-x (oget e "nativeEvent.contentOffset.x")
|
||||
content-width (oget e "nativeEvent.contentSize.width")
|
||||
layout-width (oget e "nativeEvent.layoutMeasurement.width")
|
||||
new-percentage (calculate-fade-end-percentage
|
||||
{:offset-x offset-x
|
||||
:content-width content-width
|
||||
:layout-width layout-width
|
||||
:max-fade-percentage fade-end-percentage})]
|
||||
;; Avoid unnecessary re-rendering.
|
||||
(when (not= new-percentage (get @fading :fade-end-percentage))
|
||||
(swap! fading assoc :fade-end-percentage new-percentage))))
|
||||
(when on-scroll
|
||||
(on-scroll e)))
|
||||
:render-fn (fn [{:keys [id label resource]} index]
|
||||
[rn/view
|
||||
{:style {:margin-right (if (= size default-tab-size) 12 8)
|
||||
:padding-right (when (= index (dec (count data)))
|
||||
(get-in props [:style :padding-left]))}}
|
||||
[tag/tag
|
||||
{:id id
|
||||
:size size
|
||||
:active (= id @active-tab-id)
|
||||
:resource resource
|
||||
:blurred? blurred?
|
||||
:icon-color icon-color
|
||||
:disabled? disabled?
|
||||
:label (if labelled?
|
||||
label
|
||||
(when (= type :label) label))
|
||||
:type type
|
||||
:labelled? labelled?
|
||||
:on-press (fn [id]
|
||||
(reset! active-tab-id id)
|
||||
(when scroll-on-press?
|
||||
(.scrollToIndex ^js @flat-list-ref
|
||||
#js
|
||||
{:animated true
|
||||
:index index
|
||||
:viewPosition 0.5}))
|
||||
(when on-change
|
||||
(on-change id)))}]])})])
|
||||
[rn/view {:style {:flex-direction :row}}
|
||||
(for [{:keys [id label resource]} data]
|
||||
^{:key id}
|
||||
[rn/view {:style {:margin-right 8}}
|
||||
[tag/tag
|
||||
(merge {:id id
|
||||
:size size
|
||||
:type type
|
||||
:label (if labelled?
|
||||
label
|
||||
(when (= type :label) label))
|
||||
:active (= id active-tab-id)
|
||||
:disabled? disabled?
|
||||
:blurred? blurred?
|
||||
:icon-color icon-color
|
||||
:labelled? (if (= type :label) true labelled?)
|
||||
:resource (if (= type :icon)
|
||||
:i/placeholder
|
||||
resource)
|
||||
:on-press #(do (reset! active-tab-id %)
|
||||
(when on-change (on-change %)))})]])])))))
|
||||
[:<>]))
|
||||
[fade-end? fading])
|
||||
on-scroll (rn/use-context
|
||||
(fn [^js e]
|
||||
(when fade-end?
|
||||
(let [offset-x (oget e "nativeEvent.contentOffset.x")
|
||||
content-width (oget e "nativeEvent.contentSize.width")
|
||||
layout-width (oget e "nativeEvent.layoutMeasurement.width")
|
||||
new-percentage (calculate-fade-end-percentage
|
||||
{:offset-x offset-x
|
||||
:content-width content-width
|
||||
:layout-width layout-width
|
||||
:max-fade-percentage fade-end-percentage})]
|
||||
;; Avoid unnecessary re-rendering.
|
||||
(when (not= new-percentage (get fading :fade-end-percentage))
|
||||
(set-fading (assoc fading :fade-end-percentage new-percentage)))))
|
||||
(when on-scroll
|
||||
(on-scroll e)))
|
||||
[fade-end? fading fade-end-percentage])
|
||||
data-count (count data)
|
||||
style-padding-left (get-in props [:style :padding-left])
|
||||
render-fn (rn/use-callback
|
||||
(fn [{:keys [id label resource]} index]
|
||||
[rn/view
|
||||
{:style {:margin-right (if (= size default-tab-size) 12 8)
|
||||
:padding-right (when (= index (dec data-count))
|
||||
style-padding-left)}}
|
||||
|
||||
[tag/tag
|
||||
{:id id
|
||||
:size size
|
||||
:active (= id active-tab-id)
|
||||
:resource resource
|
||||
:blurred? blurred?
|
||||
:icon-color icon-color
|
||||
:disabled? disabled?
|
||||
:label (if labelled?
|
||||
label
|
||||
(when (= type :label) label))
|
||||
:type type
|
||||
:labelled? labelled?
|
||||
:on-press (fn [id]
|
||||
(set-active-tab-id id)
|
||||
(when scroll-on-press?
|
||||
(.scrollToIndex ^js @flat-list-ref
|
||||
#js
|
||||
{:animated true
|
||||
:index index
|
||||
:viewPosition 0.5}))
|
||||
(when on-change
|
||||
(on-change id)))}]])
|
||||
[size default-tab-size data-count style-padding-left active-tab-id blurred?
|
||||
icon-color disabled? labelled? type scroll-on-press? on-change])
|
||||
on-press (rn/use-callback #(do (set-active-tab-id %) (when on-change (on-change %)))
|
||||
[on-change])
|
||||
key-fn (rn/use-callback (comp str :id))
|
||||
ref (rn/use-callback #(reset! flat-list-ref %))
|
||||
clean-props (dissoc props
|
||||
:default-active
|
||||
:fade-end-percentage
|
||||
:fade-end?
|
||||
:on-change
|
||||
:scroll-on-press?
|
||||
:size)]
|
||||
(if scrollable?
|
||||
(conj
|
||||
maybe-mask-wrapper
|
||||
[rn/flat-list
|
||||
(merge
|
||||
clean-props
|
||||
(when scroll-on-press?
|
||||
{:initial-scroll-index (utils.collection/first-index #(= active-tab-id (:id %)) data)})
|
||||
{:ref ref
|
||||
:extra-data (str active-tab-id)
|
||||
:horizontal true
|
||||
:scroll-event-throttle scroll-event-throttle
|
||||
:shows-horizontal-scroll-indicator false
|
||||
:data data
|
||||
:key-fn key-fn
|
||||
:on-scroll on-scroll
|
||||
:render-fn render-fn})])
|
||||
|
||||
[rn/view {:style {:flex-direction :row}}
|
||||
(for [{:keys [id label resource]} data]
|
||||
^{:key id}
|
||||
[rn/view {:style {:margin-right 8}}
|
||||
[tag/tag
|
||||
{:id id
|
||||
:size size
|
||||
:type type
|
||||
:label (if labelled?
|
||||
label
|
||||
(when (= type :label) label))
|
||||
:active (= id active-tab-id)
|
||||
:disabled? disabled?
|
||||
:blurred? blurred?
|
||||
:icon-color icon-color
|
||||
:labelled? (if (= type :label) true labelled?)
|
||||
:resource (if (= type :icon) :i/placeholder resource)
|
||||
:on-press on-press}]])])))
|
||||
|
|
|
|||
|
|
@ -7,10 +7,9 @@
|
|||
[quo.components.utilities.token.view :as token]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.hole-view :as hole-view]
|
||||
[reagent.core :as reagent]))
|
||||
[react-native.hole-view :as hole-view]))
|
||||
|
||||
(defn- view-internal
|
||||
(defn view
|
||||
"Options:
|
||||
- :options - false / :add / :hold (default false)
|
||||
- :size - :size-24 / :size-32 (default :size-24)
|
||||
|
|
@ -18,45 +17,44 @@
|
|||
- :theme - :light / :dark
|
||||
- :token-value - string - token value
|
||||
- :token-symbol - string"
|
||||
[]
|
||||
(let [container-width (reagent/atom 0)]
|
||||
(fn [{:keys [options size blur? theme token-value token-img-src token-symbol]
|
||||
:or {size :size-24}}]
|
||||
[rn/view
|
||||
{:on-layout #(reset! container-width
|
||||
(oget % :nativeEvent :layout :width))}
|
||||
[hole-view/hole-view
|
||||
{:holes (if options
|
||||
[{:x (- @container-width
|
||||
(case size
|
||||
:size-24 10
|
||||
:size-32 12
|
||||
nil))
|
||||
:y (case size
|
||||
:size-24 -6
|
||||
:size-32 -4
|
||||
nil)
|
||||
:width 16
|
||||
:height 16
|
||||
:borderRadius 8}]
|
||||
[])}
|
||||
[rn/view {:style (style/container size options blur? theme)}
|
||||
[token/view
|
||||
{:style (style/token-img size)
|
||||
:token token-symbol
|
||||
:size (case size
|
||||
:size-24 :size-20
|
||||
:size-32 :size-28)
|
||||
:image-source token-img-src}]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
:style (style/label theme)}
|
||||
(str token-value " " token-symbol)]]]
|
||||
(when options
|
||||
[rn/view {:style (style/options-icon size)}
|
||||
[icons/icon (if (= options :hold) :i/hold :i/add-token)
|
||||
{:size 20
|
||||
:no-color true}]])])))
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
[{:keys [options size blur? token-value token-img-src token-symbol]
|
||||
:or {size :size-24}}]
|
||||
(let [theme (quo.theme/use-theme-value)
|
||||
[container-width
|
||||
set-container-width] (rn/use-state 0)
|
||||
on-layout (rn/use-callback #(set-container-width
|
||||
(oget % :nativeEvent :layout :width)))]
|
||||
[rn/view {:on-layout on-layout}
|
||||
[hole-view/hole-view
|
||||
{:holes (if options
|
||||
[{:x (- container-width
|
||||
(case size
|
||||
:size-24 10
|
||||
:size-32 12
|
||||
nil))
|
||||
:y (case size
|
||||
:size-24 -6
|
||||
:size-32 -4
|
||||
nil)
|
||||
:width 16
|
||||
:height 16
|
||||
:borderRadius 8}]
|
||||
[])}
|
||||
[rn/view {:style (style/container size options blur? theme)}
|
||||
[token/view
|
||||
{:style (style/token-img size)
|
||||
:token token-symbol
|
||||
:size (case size
|
||||
:size-24 :size-20
|
||||
:size-32 :size-28)
|
||||
:image-source token-img-src}]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
:style (style/label theme)}
|
||||
(str token-value " " token-symbol)]]]
|
||||
(when options
|
||||
[rn/view {:style (style/options-icon size)}
|
||||
[icons/icon (if (= options :hold) :i/hold :i/add-token)
|
||||
{:size 20
|
||||
:no-color true}]])]))
|
||||
|
|
|
|||
|
|
@ -61,4 +61,4 @@
|
|||
(->> (rf/sub [:toasts])
|
||||
:ordered
|
||||
(into [rn/view {:style (style/outmost-transparent-container)}]
|
||||
(map #(with-meta [:f> f-container %] {:key %})))))
|
||||
(map #(with-meta [f-container %] {:key %})))))
|
||||
|
|
|
|||
|
|
@ -54,7 +54,6 @@
|
|||
|
||||
(defn screen
|
||||
[screen-key]
|
||||
|
||||
(reagent.core/reactify-component
|
||||
(fn []
|
||||
(let [screen-details (get (if js/goog.DEBUG
|
||||
|
|
@ -110,7 +109,7 @@
|
|||
sheet])]]))
|
||||
functional-compiler))
|
||||
|
||||
(def toasts (reagent/reactify-component toasts/toasts))
|
||||
(def toasts (reagent/reactify-component toasts/toasts functional-compiler))
|
||||
|
||||
(def alert-banner
|
||||
(reagent/reactify-component
|
||||
|
|
|
|||
Loading…
Reference in New Issue