diff --git a/src/React/Basic/DOM.js b/src/React/Basic/DOM.js index eee88bc..e127daf 100644 --- a/src/React/Basic/DOM.js +++ b/src/React/Basic/DOM.js @@ -21,7 +21,3 @@ exports.findDOMNode_ = function(instance) { exports.createPortal_ = function(jsx, node) { return ReactDOM.createPortal(jsx, node); }; - -exports.mergeStyles = function(styles) { - return Object.assign.apply(null, [ {} ].concat(styles)); -}; diff --git a/src/React/Basic/DOM.purs b/src/React/Basic/DOM.purs index 3f6c7a1..02f0705 100644 --- a/src/React/Basic/DOM.purs +++ b/src/React/Basic/DOM.purs @@ -15,8 +15,6 @@ module React.Basic.DOM , findDOMNode , createPortal , text - , css - , mergeStyles , module Generated ) where @@ -31,7 +29,7 @@ import Effect.Exception (Error, throw, try) import Effect.Uncurried (EffectFn1, EffectFn3, runEffectFn1, runEffectFn3) import React.Basic (ReactComponentInstance, JSX) import React.Basic.DOM.Generated (Props_a, Props_abbr, Props_address, Props_area, Props_article, Props_aside, Props_audio, Props_b, Props_base, Props_bdi, Props_bdo, Props_blockquote, Props_body, Props_br, Props_button, Props_canvas, Props_caption, Props_cite, Props_code, Props_col, Props_colgroup, Props_data, Props_datalist, Props_dd, Props_del, Props_details, Props_dfn, Props_dialog, Props_div, Props_dl, Props_dt, Props_em, Props_embed, Props_fieldset, Props_figcaption, Props_figure, Props_footer, Props_form, Props_h1, Props_h2, Props_h3, Props_h4, Props_h5, Props_h6, Props_head, Props_header, Props_hgroup, Props_hr, Props_html, Props_i, Props_iframe, Props_img, Props_input, Props_ins, Props_kbd, Props_keygen, Props_label, Props_legend, Props_li, Props_link, Props_main, Props_map, Props_mark, Props_math, Props_menu, Props_menuitem, Props_meta, Props_meter, Props_nav, Props_noscript, Props_object, Props_ol, Props_optgroup, Props_option, Props_output, Props_p, Props_param, Props_picture, Props_pre, Props_progress, Props_q, Props_rb, Props_rp, Props_rt, Props_rtc, Props_ruby, Props_s, Props_samp, Props_script, Props_section, Props_select, Props_slot, Props_small, Props_source, Props_span, Props_strong, Props_style, Props_sub, Props_summary, Props_sup, Props_svg, Props_table, Props_tbody, Props_td, Props_template, Props_textarea, Props_tfoot, Props_th, Props_thead, Props_time, Props_title, Props_tr, Props_track, Props_u, Props_ul, Props_var, Props_video, Props_wbr, a, a_, abbr, abbr_, address, address_, area, article, article_, aside, aside_, audio, audio_, b, b_, base, bdi, bdi_, bdo, bdo_, blockquote, blockquote_, body, body_, br, button, button_, canvas, canvas_, caption, caption_, cite, cite_, code, code_, col, colgroup, colgroup_, data', data_, datalist, datalist_, dd, dd_, del, del_, details, details_, dfn, dfn_, dialog, dialog_, div, div_, dl, dl_, dt, dt_, em, em_, embed, fieldset, fieldset_, figcaption, figcaption_, figure, figure_, footer, footer_, form, form_, h1, h1_, h2, h2_, h3, h3_, h4, h4_, h5, h5_, h6, h6_, head, head_, header, header_, hgroup, hgroup_, hr, html, html_, i, i_, iframe, iframe_, img, input, ins, ins_, kbd, kbd_, keygen, keygen_, label, label_, legend, legend_, li, li_, link, main, main_, map, map_, mark, mark_, math, math_, menu, menu_, menuitem, menuitem_, meta, meter, meter_, nav, nav_, noscript, noscript_, object, object_, ol, ol_, optgroup, optgroup_, option, option_, output, output_, p, p_, param, picture, picture_, pre, pre_, progress, progress_, q, q_, rb, rb_, rp, rp_, rt, rt_, rtc, rtc_, ruby, ruby_, s, s_, samp, samp_, script, script_, section, section_, select, select_, slot, slot_, small, small_, source, span, span_, strong, strong_, style, style_, sub, sub_, summary, summary_, sup, sup_, svg, svg_, table, table_, tbody, tbody_, td, td_, template, template_, textarea, textarea_, tfoot, tfoot_, th, th_, thead, thead_, time, time_, title, title_, tr, tr_, track, u, u_, ul, ul_, var, var_, video, video_, wbr) as Generated -import React.Basic.DOM.Internal (CSS, unsafeCreateDOMComponent) as Internal +import React.Basic.DOM.Internal (CSS, css, mergeStyles, unsafeCreateDOMComponent) as Internal import Unsafe.Coerce (unsafeCoerce) import Web.DOM (Element, Node) @@ -114,23 +112,3 @@ foreign import createPortal_ :: Fn2 JSX Element JSX -- | Create a text node. text :: String -> JSX text = unsafeCoerce - --- | Create a value of type `CSS` (which can be provided to the `style` property) --- | from a plain record of CSS attributes. --- | --- | For example: --- | --- | ``` --- | div { style: css { padding: "5px" } } [ text "This text is padded." ] --- | ``` -css :: forall css. { | css } -> Internal.CSS -css = unsafeCoerce - --- | Merge styles from right to left. Uses `Object.assign`. --- | --- | For example: --- | --- | ``` --- | style: mergeCSS [ (css { padding: "5px" }), props.style ] --- | ``` -foreign import mergeStyles :: Array Internal.CSS -> Internal.CSS diff --git a/src/React/Basic/DOM/Internal.js b/src/React/Basic/DOM/Internal.js new file mode 100644 index 0000000..3306d09 --- /dev/null +++ b/src/React/Basic/DOM/Internal.js @@ -0,0 +1,5 @@ +"use strict"; + +exports.mergeStyles = function(styles) { + return Object.assign.apply(null, [ {} ].concat(styles)); +}; diff --git a/src/React/Basic/DOM/Internal.purs b/src/React/Basic/DOM/Internal.purs index 3f23c43..02f177c 100644 --- a/src/React/Basic/DOM/Internal.purs +++ b/src/React/Basic/DOM/Internal.purs @@ -1,5 +1,7 @@ module React.Basic.DOM.Internal where +import Prelude + import React.Basic (ReactComponent) import React.Basic.Events (EventHandler) import Unsafe.Coerce (unsafeCoerce) @@ -7,6 +9,32 @@ import Unsafe.Coerce (unsafeCoerce) -- | An abstract type representing records of CSS attributes. foreign import data CSS :: Type +instance semigroupCSS :: Semigroup CSS where + append a b = mergeStyles [b, a] + +instance monoidCSS :: Monoid CSS where + mempty = css {} + +-- | Create a value of type `CSS` (which can be provided to the `style` property) +-- | from a plain record of CSS attributes. +-- | +-- | For example: +-- | +-- | ``` +-- | div { style: css { padding: "5px" } } [ text "This text is padded." ] +-- | ``` +css :: forall css. { | css } -> CSS +css = unsafeCoerce + +-- | Merge styles from right to left. Uses `Object.assign`. +-- | +-- | For example: +-- | +-- | ``` +-- | style: mergeCSS [ (css { padding: "5px" }), props.style ] +-- | ``` +foreign import mergeStyles :: Array CSS -> CSS + -- Standard props shared by all SVG elements. -- The string props are from MDN, and the -- event handlers are the same as in SharedProps