madvas / cljs-react-material-ui Goto Github PK
View Code? Open in Web Editor NEWClojurescript library for using material-ui.com
License: Eclipse Public License 1.0
Clojurescript library for using material-ui.com
License: Eclipse Public License 1.0
Hi,
Another broken component after updating from 0.2.21 to 0.2.25.
Create a new Reagent frontend project:
lein new reagent-frontend material-ui-radio-button
Add exclusions to reagent and add cljs-react-material-ui dependency to project.clj
[reagent "0.6.0" :exclusions [cljsjs/react]]
[cljs-react-material-ui "0.2.25"]
Open src/material_ui_radio\button/core.cljs_, add deps and modify home-page fn to render simple radio button group
(:require [reagent.core :as reagent]
;; Add material ui deps
[cljsjs.material-ui]
[cljs-react-material-ui.core :as uic]
[cljs-react-material-ui.reagent :as ui])
;; modify the home page
(defn home-page []
[ui/mui-theme-provider {:mui-theme (uic/get-mui-theme)}
[ui/radio-button-group {:name "test"}
[ui/radio-button {:value "foo" :label "Foo"}]
[ui/radio-button {:value "bar" :label "Bar"}]]])
Start figwheel
lein figwheel
Open the app (located in material-ui-radio-button/public/index.html) and following error should appear in the console and the radio buttons are not functioning
material-ui.inc.js:2464 Warning: Unknown prop `argv` on <input> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
in input (created by EnhancedSwitch)
in div (created by EnhancedSwitch)
in EnhancedSwitch (created by RadioButton)
in RadioButton (created by RadioButtonGroup)
in div (created by RadioButtonGroup)
in RadioButtonGroup (created by ReagentInput)
in ReagentInput (created by ReagentInput)
in MuiThemeProvider (created by ReagentInput)
in ReagentInput (created by material_ui_tabs.core.home_page)
in material_ui_tabs.core.home_page
After downgrading to 0.2.21, radio button group works great
Hi everyone
I'm currently trying to resize icon button inside a list-item
My code is:
[cljs-react-material-ui.reagent/list
[cljs-react-material-ui.reagent/list-item
{:primary-text "username"
:inner-div-style
{:font "72px Gotham, sans-serif"
:button-style {:width "1000px"
:height "auto"}}
:right-icon (cljs-react-material-ui.core/icon-button
{:style {:width "1000px" :height "auto"}}
(cljs-react-material-ui.icons/editor-mode-edit {:width "1000px" :height "auto" :style {:width "1000px" :height "auto"}}))}]]
Problem is I can't make the right-icon bigger, been trying many possible position and the icon still sized 24 px. How to resize it?
Thank you in advance
Do you consider new branch for next material-ui https://github.com/callemall/material-ui/tree/next ?
Now "Material-ui" next contains Layout, which is as for me very important point.
Here is demo https://material-ui-1dab0.firebaseapp.com/#/layout/responsive-ui
cljs-react-material-ui.chip-input.reagent requires [cljsjs.material-ui-chip-input]
yet cljsjs/material-ui-chip-input 0.17.0-0 says to require the package with:
(ns application.core
(:require material-ui-chip-input))`
such namespace: cljs-react-material-ui.rum, could not locate cljs_react_material_ui/rum.cljs
cljs_react_material_ui/rum.cljc, or Closure namespace "cljs-react-material-ui.rum"
Project.clj has the following dependencies included.
[cljs-react-material-ui "0.2.48"]
[cljsjs/react "15.6.1-1"]
[cljsjs/react-dom "15.6.1-1"]
my test file is
(ns app.test
(:require
[cljs-react-material-ui.core :refer [get-mui-theme color]]
[cljs-react-material-ui.icons :as ic]
[cljs-react-material-ui.rum :as ui]
[rum.core :as rum]))
(rum/defc thing1
[]
[:div "content1"])
(defn home-page []
(ui/mui-theme-provider
{:mui-theme (get-mui-theme)}
[:div
(ui/app-bar {:icon-element-right (ui/icon-button (ic/action-accessibility))})
(ui/tabs
(ui/tab {:label "one"}
[:div ["hey"
(ui/paper "yes")]])
(ui/tab {:label "two"} (thing1))
(ui/tab {:label "drei"}
[:div
(ui/paper {} "Ima paper")]))]))
When using icon inside FloatingActionButton:
[ui/floating-action-button [ic/content-add]]
The icon height is set to 24px when in material-ui.com examples the height is 56px. This causes the hover effect of the FloatingActionButton to not show correctly and the icon is not centered vertically.
Actual rendered element with cljs-react-material-ui
<svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.870588); fill: currentcolor; height: 24px; width: 24px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; user-select: none;"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>
And rendered element in material-ui.com:
<svg viewBox="0 0 24 24" style="display: inline-block; color: rgb(255, 255, 255); fill: rgb(255, 255, 255); height: 56px; width: 24px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; line-height: 56px; user-select: none;"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>
Can be fixed by including following style for the icon :height 56px
.
In 0.2.30 it works well and doesn't produce this result.
I'm using it with Rum.
Something like that fails
(ui/mui-theme-provider
{:mui-theme (ui/get-mui-theme (aget js/MaterialUIStyles "DarkRawTheme"))}
[:div "something with more nested contents")
says
material-ui.inc.js:951 Warning: Failed propType: Invalid prop `children` supplied to `MuiThemeProvider`, expected a single ReactElement.
Plain reagent works with the following dependencies:
(set-env!
:source-paths #{"src/cljs"}
:resource-paths #{"html"}
:dependencies '[[org.clojure/clojure "1.8.0"]
[org.clojure/clojurescript "1.9.76"]
[reagent "0.6.0-rc"]])
And if I add cljs-react-material-ui:
(set-env!
:source-paths #{"src/cljs"}
:resource-paths #{"html"}
:dependencies '[[org.clojure/clojure "1.8.0"]
[org.clojure/clojurescript "1.9.76"]
;; [reagent "0.6.0-rc"]])
[reagent "0.6.0-rc" :exclusions [org.clojure/tools.reader cljsjs/react]]
[cljs-react-material-ui "0.2.19"]])
Then when I try to render a simple (defn my-app [] [:h1 "hello"]) I get
Uncaught TypeError: React.render is not a function
In the browser.
What am I missing?
Based on the example provided, i tried to use two components on the same parent as seen in the code:
(ui/mui-theme-provider
{:mui-theme (ui/get-mui-theme
{:palette {:primary1-color (ui/color :amber600)
:shadow-color (ui/color :deep-orange900)
:text-color (ui/color :indigo900)}
:stepper {:inactive-icon-color (ui/color :deep-orange900)
:connector-line-color (ui/color :light-blue600)
:text-color (ui/color :teal900)
:disabled-text-color (ui/color :teal200)}})}
(dom/div
nil
(my-stepper)
(my-stepper)))
Doing this throws an error as the components are created with "undefined" react-key, causing the two elements to have the same key. Same happens when defining another component and using it.
Hey man, thanks for this library, very useful. Any idea how can I use react-with-addons? Need to use CSSTransitions and don't want to stop using your library. Maybe if you already didn't figure it out, I can help with a patch.
Whenever I include this project, and do an advanced compile, the compilation includes two copies of React and ReactDOM leading to this error in the console:
Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
cleaning the deps tree of all other react and react-doms, then do an advanced compile (mine has :pretty-print true, :pseudo-names true), then look at the build artifact for react comment headers:
$ grep "^ [*] React" target/cljsbuild/public/js/app.js
And you can see there are two copies of both.
Has anyone else got this working on advanced compile, or is it something shitty about my project setup.
My deps at the moment are:
[
[clj-time "0.14.0"]
[cljs-ajax "0.7.2"]
[compojure "1.6.0"]
[cprop "0.1.11"]
[funcool/struct "1.1.0"]
[luminus-immutant "0.2.3"]
[luminus-nrepl "0.1.4"]
[luminus/ring-ttl-session "0.3.2"]
[markdown-clj "1.0.1"]
[metosin/muuntaja "0.3.2"]
[metosin/ring-http-response "0.9.0"]
[mount "0.1.11"]
[org.clojure/clojure "1.8.0"]
[org.clojure/clojurescript "1.9.908" :scope "provided"]
[org.clojure/tools.cli "0.3.5"]
[org.clojure/tools.logging "0.4.0"]
[org.webjars.bower/tether "1.4.0"]
[org.webjars/bootstrap "4.0.0-alpha.5"]
[org.webjars/font-awesome "4.7.0"]
[reagent "0.7.0" :exclusions [cljsjs/react-dom-server cljsjs/react-dom cljsjs/react]]
[reagent-utils "0.2.1"]
[ring-webjars "0.2.0"]
[ring/ring-core "1.6.2"]
[ring/ring-defaults "0.3.1"]
[secretary "1.2.3"]
[selmer "1.11.1"]
[cljs-react-material-ui "0.2.48" :exclusions
[org.clojure/clojure]]
[cljsjs/material-ui-chip-input "0.17.2-0" :exclusions [cljsjs/react cljsjs/react-dom]]
[org.clojure/core.async "0.3.443"]
]
and lein deps :tree
gives:
[binaryage/devtools "0.9.4"]
[binaryage/env-config "0.2.0"]
[clj-time "0.14.0"]
[joda-time "2.9.7"]
[cljs-ajax "0.7.2"]
[cheshire "5.7.1"]
[com.fasterxml.jackson.core/jackson-core "2.8.6"]
[com.fasterxml.jackson.dataformat/jackson-dataformat-cbor "2.8.6"]
[com.fasterxml.jackson.dataformat/jackson-dataformat-smile "2.8.6"]
[tigris "0.1.1"]
[com.cognitect/transit-clj "0.8.300"]
[com.cognitect/transit-java "0.8.324"]
[org.msgpack/msgpack "0.6.12"]
[com.googlecode.json-simple/json-simple "1.1.1" :exclusions [[junit]]]
[org.javassist/javassist "3.18.1-GA"]
[com.cognitect/transit-cljs "0.8.239"]
[com.cognitect/transit-js "0.8.846"]
[net.colourcoding/poppea "0.2.1"]
[org.apache.httpcomponents/httpasyncclient "4.1.3"]
[commons-logging "1.2"]
[org.apache.httpcomponents/httpclient "4.5.3"]
[org.apache.httpcomponents/httpcore-nio "4.4.6"]
[org.apache.httpcomponents/httpcore "4.4.6"]
[cljs-react-material-ui "0.2.48" :exclusions [[org.clojure/clojure]]]
[cljsjs/material-ui "0.19.0-0"]
[cljsjs/react-dom "15.6.1-1"]
[cljsjs/react "15.6.1-1"]
[sablono "0.8.0"]
[cljsjs/material-ui-chip-input "0.17.2-0" :exclusions [[cljsjs/react] [cljsjs/react-dom]]]
[clojure-complete "0.2.4" :exclusions [[org.clojure/clojure]]]
[com.cemerick/piggieback "0.2.2"]
[compojure "1.6.0"]
[clout "2.1.2"]
[instaparse "1.4.0" :exclusions [[org.clojure/clojure]]]
[medley "1.0.0"]
[org.clojure/tools.macro "0.1.5"]
[ring/ring-codec "1.0.1"]
[cprop "0.1.11"]
[doo "0.1.8"]
[karma-reporter "0.1.0"]
[figwheel-sidecar "0.5.14"]
[com.stuartsierra/component "0.3.2"]
[com.stuartsierra/dependency "0.2.0"]
[figwheel "0.5.14" :exclusions [[org.clojure/tools.reader]]]
[hawk "0.2.11" :exclusions [[org.clojure/clojure]]]
[net.incongru.watchservice/barbary-watchservice "1.0"]
[net.java.dev.jna/jna "3.2.2"]
[http-kit "2.2.0"]
[ring-cors "0.1.11" :exclusions [[ring/ring-core] [org.clojure/clojure]]]
[simple-lein-profile-merge "0.1.4"]
[strictly-specking-standalone "0.1.1"]
[net.cgrand/parsley "0.9.3" :exclusions [[org.clojure/clojure]]]
[net.cgrand/regex "1.1.0"]
[net.cgrand/sjacket "0.1.1" :exclusions [[org.clojure/clojure] [net.cgrand/parsley]]]
[suspendable "0.1.1" :exclusions [[org.clojure/clojure] [com.stuartsierra/component]]]
[funcool/struct "1.1.0"]
[funcool/cuerdas "2.0.3"]
[luminus-immutant "0.2.3"]
[org.immutant/web "2.1.6"]
[org.immutant/core "2.1.6"]
[org.projectodd.wunderboss/wunderboss-clojure "0.12.2"]
[org.projectodd.wunderboss/wunderboss-web-undertow "0.12.2"]
[io.undertow/undertow-core "1.3.23.Final"]
[org.jboss.xnio/xnio-api "3.3.6.Final"]
[org.jboss.xnio/xnio-nio "3.3.6.Final" :scope "runtime"]
[io.undertow/undertow-servlet "1.3.23.Final"]
[org.jboss.spec.javax.annotation/jboss-annotations-api_1.2_spec "1.0.0.Final"]
[io.undertow/undertow-websockets-jsr "1.3.23.Final"]
[org.projectodd.wunderboss/wunderboss-core "0.12.2"]
[ch.qos.logback/logback-classic "1.1.3"]
[ch.qos.logback/logback-core "1.1.3"]
[org.jboss.logging/jboss-logging "3.2.1.Final"]
[org.projectodd.wunderboss/wunderboss-web "0.12.2"]
[org.jboss.spec.javax.servlet/jboss-servlet-api_3.1_spec "1.0.0.Final"]
[org.jboss.spec.javax.websocket/jboss-websocket-api_1.1_spec "1.1.0.Final"]
[luminus-nrepl "0.1.4"]
[luminus/ring-ttl-session "0.3.2"]
[expiring-map "0.1.8"]
[net.jodah/expiringmap "0.5.8"]
[markdown-clj "1.0.1"]
[metosin/muuntaja "0.3.2"]
[metosin/ring-http-response "0.9.0"]
[potemkin "0.4.3"]
[clj-tuple "0.2.2"]
[riddley "0.1.12"]
[mount "0.1.11"]
[org.clojure/clojure "1.8.0"]
[org.clojure/clojurescript "1.9.908" :scope "provided"]
[com.google.javascript/closure-compiler-unshaded "v20170806" :scope "provided"]
[args4j "2.33" :scope "provided"]
[com.google.code.findbugs/jsr305 "3.0.1" :scope "provided"]
[com.google.code.gson/gson "2.7" :scope "provided"]
[com.google.errorprone/error_prone_annotations "2.0.18" :scope "provided"]
[com.google.guava/guava "20.0" :scope "provided"]
[com.google.javascript/closure-compiler-externs "v20170806" :scope "provided"]
[com.google.jsinterop/jsinterop-annotations "1.0.0" :scope "provided"]
[com.google.protobuf/protobuf-java "3.0.2" :scope "provided"]
[org.clojure/data.json "0.2.6"]
[org.clojure/google-closure-library "0.0-20170809-b9c14c6b" :scope "provided"]
[org.clojure/google-closure-library-third-party "0.0-20170809-b9c14c6b" :scope "provided"]
[org.clojure/tools.reader "1.0.5"]
[org.mozilla/rhino "1.7R5" :scope "provided"]
[org.clojure/core.async "0.3.443"]
[org.clojure/tools.analyzer.jvm "0.7.0"]
[org.clojure/core.memoize "0.5.9"]
[org.clojure/core.cache "0.6.5"]
[org.clojure/data.priority-map "0.0.7"]
[org.clojure/tools.analyzer "0.6.9"]
[org.ow2.asm/asm-all "4.2"]
[org.clojure/tools.cli "0.3.5"]
[org.clojure/tools.logging "0.4.0"]
[org.clojure/tools.nrepl "0.2.12" :exclusions [[org.clojure/clojure]]]
[org.webjars.bower/tether "1.4.0"]
[org.webjars/bootstrap "4.0.0-alpha.5"]
[org.webjars/jquery "1.11.1"]
[org.webjars/font-awesome "4.7.0"]
[pjstadig/humane-test-output "0.8.3"]
[prone "1.1.4"]
[reagent-utils "0.2.1"]
[reagent "0.7.0" :exclusions [[cljsjs/react-dom-server] [cljsjs/react-dom] [cljsjs/react]]]
[cljsjs/create-react-class "15.5.3-0"]
[ring-webjars "0.2.0"]
[org.webjars/webjars-locator "0.27"]
[com.fasterxml.jackson.core/jackson-databind "2.3.3"]
[com.fasterxml.jackson.core/jackson-annotations "2.3.0"]
[org.apache.commons/commons-lang3 "3.4"]
[org.webjars/webjars-locator-core "0.27"]
[org.apache.commons/commons-compress "1.9"]
[org.slf4j/slf4j-api "1.7.7"]
[ring/ring-core "1.6.2"]
[commons-fileupload "1.3.2"]
[commons-io "2.5"]
[crypto-equality "1.0.0"]
[crypto-random "1.2.0"]
[ring/ring-defaults "0.3.1"]
[javax.servlet/javax.servlet-api "3.1.0"]
[ring/ring-anti-forgery "1.1.0"]
[ring/ring-headers "0.3.0"]
[ring/ring-ssl "0.3.0"]
[ring/ring-devel "1.6.2"]
[clj-stacktrace "0.2.8"]
[hiccup "1.0.5"]
[ns-tracker "0.3.1"]
[org.clojure/java.classpath "0.2.3"]
[org.clojure/tools.namespace "0.2.11"]
[ring/ring-mock "0.3.1"]
[secretary "1.2.3"]
[com.cemerick/clojurescript.test "0.2.3-20140317.141743-3"]
[selmer "1.11.1"]
[commons-codec "1.10"]
[json-html "0.4.0"]
[hiccups "0.3.0"]
Just tried to update from 0.2.35
, tried various reagent/material-ui combinations:
Reagent 0.6.0
:
Uncaught Error: js/ReactDOM is missing
at reagent$dom$module (dom.cljs:19)
Reagent 0.6.1
:
Reverted to Reagent 0.6.0 and 0.2.35 for now.
Getting errors such as:
react-dom.inc.js:526 Warning: Expected onMouseUp
listener to be a function, instead got false
.
If you used to conditionally omit it with onMouseUp={condition && value}, pass onMouseUp={condition ? value : undefined} instead.
in input (created by EnhancedSwitch)
in div (created by EnhancedSwitch)
in EnhancedSwitch (created by Toggle)
in Toggle (created by components.groups.page/Form)
in div (created by components.groups.page/Form)
in div (created by components.groups.page/Form)
in div (created by components.groups.page/Form)
with latest react versions. Which seems to be fixed in later material-ui versions such as 0.19.4
I have a sample project which uses Reagent
. Merely including the cljs-react-material-ui
dependency adds about 500kb to the compiled .js file (using advanced compilation mode; before gzipping). It's not really expected because no code from the library is actually used yet in the project's codebase (well, except the React which is "included" into cljs-react-material-ui
?).
This is how I add the dependency:
before:
[reagent "0.6.0" :exclusions [cljsjs/react]]
[cljsjs/react-with-addons "15.3.1-0"]
after:
[reagent "0.6.0" :exclusions [cljsjs/react cljsjs/react-dom]]
[cljs-react-material-ui "0.2.34"]
If the Closure compiler can't eliminate the dead code in this primitive case than I can also conclude that it will not be able to optimise the code when I require and really use a few Material UI components from the library. Is this correct? Can this be somehow fixed to make compiler eliminate code for MaterialUI components not used in my codebase?
After some experiments it looks like dead code elimination only kicks in if there are no mentions of React in my codebase.
Can these issues be somehow related to the described problem?
Cljsjs/material-ui required by cljs-react-material-ui increases output size by about 1.4MB.
700KB of that is necessary, other 700KB is caused by bug in cljsjs/material-ui which causes the code be included twice.
- To save 700KB, fix cljsjs/material-ui
- To save more, stop using material-ui, or
- Wait for Closure and ClojureScript to support npm/commonjs module processing which would allow running dead code elimination on material-ui code
Tried {:mui-theme (mui/get-mui-theme "darkBase")}
and {:mui-theme (mui/get-mui-theme "dark")}
- no luck for both.
Any clues?
When I render this component:
(defn simple-text-field [text]
(let [text-state (r/atom text)]
(fn []
[rui/text-field
{:id "example"
:value @text-state
:on-change (fn [e] (reset! text-state (.. e -target -value)))}])))
It seems to work well until I place the caret in the middle of the text and type again. Invariably, the caret jumps to the end after the insertion. The root cause seems to be that reagent re-renders components asynchronously. See http://stackoverflow.com/questions/28922275/in-reactjs-why-does-setstate-behave-differently-when-called-synchronously/28922465#28922465
How do I use the effect fade from theme?
This code fails:
[:div [:p (:min (rum/react ui-values))] ; <-- removing this will avoid the error
(ui/slider {:min 200 :max 20000
:value (:min (rum/react ui-values))
:on-change #(swap! ui-values assoc :min %2)})]
The full error is:
Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Slider component.
I'm using the latest Rum
How can i access the state of a component? For instance, i need to show the error message only if the content doesn't comply with a schema and its state is not clean.
Hi,
After updating from 0.2.21 to 0.2.25, Tabs component does not work anymore
Create a new Reagent frontend project:
lein new reagent-frontend material-ui-tabs
Add exclusions to reagent and add cljs-react-material-ui dependency to project.clj
[reagent "0.6.0" :exclusions [cljsjs/react]]
[cljs-react-material-ui "0.2.25"]
Open src/material_ui_tabs/core.cljs, add deps and modify home-page fn to render some tabs
(:require [reagent.core :as reagent]
;; Add material ui deps
[cljsjs.material-ui]
[cljs-react-material-ui.core :as uic]
[cljs-react-material-ui.reagent :as ui])
;; modify the home page
(defn home-page []
[ui/mui-theme-provider {:mui-theme (uic/get-mui-theme)}
[ui/tabs
[ui/tab {:label "Foo" :value "foo"}
[:p "Foo"]]
[ui/tab {:label "Bar" :value "bar"}
[:p "Bar"]]]])
Start figwheel
lein figwheel
Open the app (located in material-ui-tabs/public/index.html) and following error should appear in the console and tabs are not functioning
material-ui.inc.js:26210 Warning: Tabs only accepts Tab Components as children.
Found function (props, context, updater) {
// This constructor gets overridden by mocks. The argument is used
// by mocks to assert on what gets mounted.
if (true) {
true ? warning(this instanceof Constructor, 'Something is calling a React component directly. Use a factory or ' + 'JSX instead. See: https://fb.me/react-legacyfactory') : void 0;
}
// Wire up auto-binding
if (this.__reactAutoBindPairs.length) {
bindAutoBindMethods(this);
}
this.props = props;
this.context = context;
this.refs = emptyObject;
this.updater = updater || ReactNoopUpdateQueue;
this.state = null;
// ReactClasses doesn't have constructors. Instead, they use the
// getInitialState and componentWillMount methods for initialization.
var initialState = this.getInitialState ? this.getInitialState() : null;
if (true) {
// We allow auto-mocks to proceed as if they're returning null.
if (initialState === undefined && this.getInitialState._isMockFunction) {
// This is probably bad practice. Consider warning here and
// deprecating this convenience.
initialState = null;
}
}
!(typeof initialState === 'object' && !Array.isArray(initialState)) ? true ? invariant(false, 'undefined.getInitialState(): must return an object or null', Constructor.displayName || 'ReactCompositeComponent') : _prodInvariant('82', Constructor.displayName || 'ReactCompositeComponent') : void 0;
this.state = initialState;
} as child number 2 of Tabs
If I downgrade to 0.2.21 Tabs work correctly.
There are several callbacks added in material-ui 0.16 that allow for callbacks to fire after a dialog has loaded, thus avoiding the awful setTimeout hacks for things like setting focus, or registering dependent libraries, etc.
See: mui/material-ui#4808
not working waves-effect on buttons in firefox
Hello again
In your readme, sometimes you resolve [cljs-react-material-ui.core :as ui]
to ui
, then in another example it is mui
.
Can you have it consistent? That will make it easier for us to look up. Thanks
With the replacement of camel-snake-kebab, props-kebab->camel->js does not handle mutlti level props.
e.g. Setting (ui/flat-button {:label-style {:font-size "14px"}}). The :font-size keyword would not be handled.
Mostly works in Rum.. Just one annoyance, you cannot pass hiccup to a mui component. It would be nice if you could. Example
;; not working
(ui/tabs
(ui/tab {:label "One"} [:div "content"])
(ui/tab {:label "Two"} [:div "content2"]))
;; working
(rum/defc thing1
[]
[:div "content1"])
(rum/defc thing2
[]
[:div "content2"])
(ui/tabs
(ui/tab {:label "One"} (thing1))
(ui/tab {:label "Two"} (thing2)))
I tried using this with reagent with little luck. The following works as expected:
(ns myapp.core
(:require [cljsjs.material-ui]
[cljs-react-material-ui.core :as ui]
[cljs-react-material-ui.icons :as ic]
[reagent.core :as r]))
(defn component []
(ui/mui-theme-provider
{:mui-theme (ui/get-mui-theme)}
(ui/paper "Hello world")))
(r/render (component) (js/document.getElementById "app"))
But this fails spectacularly:
(ns myapp.core
(:require [cljsjs.material-ui]
[cljs-react-material-ui.core :as ui]
[cljs-react-material-ui.icons :as ic]
[reagent.core :as r]))
(defn component []
[ui/mui-theme-provider
{:mui-theme (ui/get-mui-theme)}
[ui/paper "Hello world"]])
(r/render (component) (js/document.getElementById "app"))
Tested with cljs-react-material-ui 0.2.48 and React 15.6.1-1 and 16.0.0-beta.5-1. In both cases I get a bunch of exceptions:
children
of type object
supplied to MuiThemeProvider
, expected a single ReactElement"Am I holding it wrong?
Same code as before breaks with update. Using Rum.
core.cljs?rel=1485023811983:188Uncaught TypeError: Cannot read property 'render' of undefined
at rum$core$mount (core.cljs?rel=1485023811983:188)
at core.cljs?rel=1485023928915:759
I've made sure this isn't caused by stalled deps, by running lein clean
and lein deps
.
Is there any way to only include certain components from the library, or is it all or nothing?
For example, in material-ui, you can
import Button from 'material-ui/Button';
instead of
import { Button } from 'material-ui';
Will I need to build my own version using npm and include it manually to get this behavior?
Hi there!
Generally cljs-react-material-ui 0.2.19
seems pretty solid from my point of view, using it with reagent 0.6.0-rc
.
I have a situation where I create a Table
(based on data from a re-frame
subscription
). When I have all the code for creating the rui/table
in the same component fn it works without an issue.
But when I split the component into a component fn calculating the output for the table
and an inner component fn for each row a couple of odd things happen:
onRowSelection
defined for the rui/table
doesn't trigger. I fixed this by using an on-click
handler for each rui/table-row
insteadmaterial-ui.inc.js:777 Uncaught Invariant Violation: Objects are not valid as a React child
My components are as follows:
(defn thing-row [thing-data click-handler is-selected]
(let [thing (:thing thing-data)
thing-id (:thing/id thing)]
^{:key thing-id}
[rui/table-row {:selectable true
:selected (is-selected)
:hoverable true
:on-click click-handler}
[rui/table-row-column small-cell-styles (:distance thing-data)]
[rui/table-row-column (:thing/name thing)]
[rui/table-row-column thing-id]]))
(defn things []
(let [the-things (subscribe [:things])
the-thing (subscribe [:thing])]
(fn []
(let [nearby (:some-things @the-things)
others (:other-things @the-things)
all-things (into nearby others)]
[rui/table
[rui/table-header {:displaySelectAll false
:adjustForCheckbox false}
[rui/table-row
[rui/table-header-column small-cell-styles "Distance"]
[rui/table-header-column "Name"]
[rui/table-header-column "ID"]]]
[rui/table-body {:displayRowCheckbox true
:deselectOnClickaway false
:showRowHover true}
(for [thing-data all-things]
[thing-row thing-data
#(do (dispatch [:thing thing-data])
(dispatch [:push {:event-data [:location/update (:location thing-data)]}]))
#(= (thing-data-id @the-thing) (thing-data-id thing-data))])]]))))
The complete stack trace is:
invariant @ material-ui.inc.js:777
traverseAllChildrenImpl @ material-ui.inc.js:11786
traverseAllChildrenImpl @ material-ui.inc.js:11742
traverseAllChildrenImpl @ material-ui.inc.js:11742
traverseAllChildren @ material-ui.inc.js:11814
forEachChildren @ material-ui.inc.js:11533
(anonymous function) @ material-ui.inc.js:54187
calculatePreselectedRows @ material-ui.inc.js:54196
componentWillReceiveProps @ material-ui.inc.js:54099
updateComponent @ material-ui.inc.js:13708
receiveComponent @ material-ui.inc.js:13641
receiveComponent @ material-ui.inc.js:4156
updateChildren @ material-ui.inc.js:12911
_reconcilerUpdateChildren @ material-ui.inc.js:12464
_updateChildren @ material-ui.inc.js:12566
updateChildren @ material-ui.inc.js:12554
_updateDOMChildren @ material-ui.inc.js:8200
updateComponent @ material-ui.inc.js:8029
receiveComponent @ material-ui.inc.js:7985
receiveComponent @ material-ui.inc.js:4156
updateChildren @ material-ui.inc.js:12911
_reconcilerUpdateChildren @ material-ui.inc.js:12464
_updateChildren @ material-ui.inc.js:12566
updateChildren @ material-ui.inc.js:12554
_updateDOMChildren @ material-ui.inc.js:8200
updateComponent @ material-ui.inc.js:8029
receiveComponent @ material-ui.inc.js:7985
receiveComponent @ material-ui.inc.js:4156
updateChildren @ material-ui.inc.js:12911
_reconcilerUpdateChildren @ material-ui.inc.js:12464
_updateChildren @ material-ui.inc.js:12566
updateChildren @ material-ui.inc.js:12554
_updateDOMChildren @ material-ui.inc.js:8200
updateComponent @ material-ui.inc.js:8029
receiveComponent @ material-ui.inc.js:7985
receiveComponent @ material-ui.inc.js:4156
_updateRenderedComponent @ material-ui.inc.js:13844
_performComponentUpdate @ material-ui.inc.js:13822
updateComponent @ material-ui.inc.js:13741
receiveComponent @ material-ui.inc.js:13641
receiveComponent @ material-ui.inc.js:4156
_updateRenderedComponent @ material-ui.inc.js:13844
_performComponentUpdate @ material-ui.inc.js:13822
updateComponent @ material-ui.inc.js:13741
performUpdateIfNecessary @ material-ui.inc.js:13655
performUpdateIfNecessary @ material-ui.inc.js:4190
runBatchedUpdates @ material-ui.inc.js:3782
perform @ material-ui.inc.js:5267
perform @ material-ui.inc.js:5267
perform @ material-ui.inc.js:3721
flushBatchedUpdates @ material-ui.inc.js:3804
closeAll @ material-ui.inc.js:5333
perform @ material-ui.inc.js:5280
batchedUpdates @ material-ui.inc.js:15742
enqueueUpdate @ material-ui.inc.js:3832
enqueueUpdate @ material-ui.inc.js:14647
enqueueForceUpdate
Am i doing something wrong?
Best,
Henrik
Hello again
Do you think you could add some more examples pretty please? Especially how to apply reagent/create-class here where you can i.E. set a display-name
, define other functions such as render
etc.
Hi,
Lately, this message happens with basically every component I create. Is it expected?
material-ui.inc.js:925 Warning: my-comp: isMounted is deprecated. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.
EDIT: sorry I should have checked the Material UI project first. It looks like they were missing an export, but have fixed this in 0.15.2. Any chance for an update?
Is this intentional or merely an oversight?
The example provided in the README does not work with reagent
basic failing example is
(defn hello-world []
[ui/mui-theme-provider
{:mui-theme (get-mui-theme)}
[:div "hello"]])
It throws this:
Invalid prop children
of type object
supplied to MuiThemeProvider
, expected a single ReactElement.
fix is to wrap all expected react elements with
r/as-element (where r is alias for reagent.core) like so:
(defn hello-world []
[ui/mui-theme-provider
{:mui-theme (get-mui-theme)}
(r/as-element ;<------ here
[:div "hello"])])
dependencies:
[[org.clojure/clojure "1.8.0"]
[org.clojure/clojurescript "1.9.229"]
[org.clojure/core.async "0.2.395"
:exclusions [org.clojure/tools.reader]]
[reagent "0.6.0"
:exclusions [org.clojure/tools.reader
cljsjs/react
cljsjs/react-dom]]
[cljs-react-material-ui "0.2.37"]]
freshly generated figwheel project, just added cljs-react-material and added the excludes for reagent.
As far as i can tell, reagent is passing the 'div' as a clojure vector to the children of mui-theme-provider...
not sure if that's problem in reagent or here.
I've also tried with reagent 0.6.0-alpha (the one show on the readme as working from here up) and same problem.
The same problem happens to any component that has children, i.e. the floating-action-button with an icon content-add, the content-add icon needs to be wrapped in a call (r/as-element)
Cheers,
Boogie
look at 1a28136#diff-f5eb4f2490789e417ea3b41cb23b93e7R34 and then you see that the same variable mui-theme-provider
is re-defined at line 67
i ll try to submit a PR for that ...
@madvas I recently wrote a library called reagent-material-ui, which is pretty similar to the reagent namespace of this library.
Would you be interested in merging reagent-material-ui into this library? The main differences I can see are that reagent-material-ui uses a macro to generate the components, and also it has some very basic tests.
Let me know if you're interested, and I can submit a PR then deprecate reagent-material-ui once it's merged.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.