|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; |
|
;; RADIX BUTTON ONLY TO BE USED WITH RADIX COMPONENTS / 01/26/22 |
|
;; (or anything that may require a forwardRef in the future lol) |
|
;; This is a JavaScript based, so there's some key differences of how it's used |
|
;; ** You need to use :> to call it. As such: [:> radix-button] |
|
;; ** If using Phosphor React for Icons, pass it through without [:>]. |
|
;; -- As such: {:left-icon Check} |
|
;; ** Do not pass anything other than a string in children |
|
;; ** Pass {:as-child true} to the Radix Trigger Component |
|
;; Everything else should work as intented ⚡️ |
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; |
|
|
|
(def radix-button |
|
(react/forwardRef |
|
(fn radix-button [^js js-props ref] |
|
(let [left-icon (. js-props -leftIcon) |
|
right-icon (. js-props -rightIcon) |
|
clj-props (camel->kebab-map (js->clj js-props :keywordize-keys true)) |
|
variant (:variant clj-props) |
|
icon-spacing (:icon-spacing clj-props) |
|
class (:class-name clj-props) |
|
props (merge clj-props {:variant (keyword variant) |
|
:icon-spacing (keyword icon-spacing) |
|
:class class |
|
:left-icon (when left-icon [:> left-icon]) |
|
:right-icon (when right-icon [:> right-icon])}) |
|
children (:children clj-props)] |
|
(r/as-element [button props children]))))) |
|
|
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; |
|
;; DEVCARDS |
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; |
|
|
|
(defcard-rg radix-button-in-dialog |
|
[:<> |
|
[:> Dialog |
|
[:> DialogTrigger {:as-child true} |
|
[:> radix-button {:variant :outline |
|
:left-icon Check |
|
:right-icon Check |
|
:icon-spacing :md |
|
:class "!bgblack" |
|
:is-rounded true |
|
:is-full-width true} "Button Text"]] |
|
[:> DialogPortal |
|
[:> DialogOverlay {:class "fixed inset-0 bg-black/25 z-modal radix-dialog-overlay"}] |
|
[:> DialogContent {:class "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-modal radix-dialog w-full sm:w-auto outline-none"} |
|
[:div {:class "popover-core bg-white min-h-fit w-full sm:w-96"} "This is content in the dialog"]]]]]) |
