status-react/src/react_native/section_list.cljs
yqrashawn 0a8993bbf1
refactor: reformat all clojure code with zprint (#14589)
Co-authored-by: refactor-only <auto@status.im>
2022-12-20 22:45:37 +08:00

47 lines
1.6 KiB
Clojure

(ns react-native.section-list
(:require ["react-native" :as react-native]
[react-native.flat-list :as flat-list]
[reagent.core :as reagent]))
(def section-list-class (reagent/adapt-react-class (.-SectionList react-native)))
(def memo-wrap-render-fn
(memoize
(fn [f render-data]
(fn [^js data]
(reagent/as-element [f (.-item data) (.-index data) (.-separators data) render-data])))))
(defn- wrap-render-section-header-fn
[f]
(fn [^js data]
(let [^js section (.-section data)]
(reagent/as-element [f
{:title (.-title section)
:data (.-data section)}]))))
(defn- wrap-per-section-render-fn
[props]
(update
(if-let [f (:render-fn props)]
(assoc (dissoc props :render-fn :render-data)
:renderItem
(memo-wrap-render-fn f (:render-data props)))
props)
:data
to-array))
(defn section-list
"A wrapper for SectionList.
To render something on empty sections, use renderSectionFooter and conditionaly
render on empty data
See https://facebook.github.io/react-native/docs/sectionlist.html"
[{:keys [sections render-section-header-fn render-section-footer-fn style] :as props}]
[section-list-class
(merge (flat-list/base-list-props props)
props
(when render-section-footer-fn
{:renderSectionFooter (wrap-render-section-header-fn render-section-footer-fn)})
{:sections (clj->js (map wrap-per-section-render-fn sections))
:renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)
:style style})])