madvas / cljs-react-material-ui Goto Github PK

View Code? Open in Web Editor NEW

205.0 21.0 33.0 72 KB

Clojurescript library for using material-ui.com

License: Eclipse Public License 1.0

Clojure 100.00%

material-ui react clojurescript clojurescript-library reagent om rum

cljs-react-material-ui's People

Contributors

Stargazers

Watchers

cljs-react-material-ui's Issues

isMounted is deprecated

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.

What do you think about creating branch for material-ui@next?

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

A la carte components -> reduce code size

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?

Acess component state

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.

Inconsistent package name in cljs-react-material-ui.chip-input.reagent

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))`

Does not function correctly under advanced compilation (multiple copies of react and react-dom included)

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

React v15.6.1
ReactDOM v15.6.1
React v15.6.1
ReactDOM v15.6.1

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"]

Merge reagent-material-ui

@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.

Icon height is set incorrectly inside FloatingActionButton

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.

React-with-addons

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.

Consistency in readme

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

Support for Rum?

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)))

How can I pass on a DIV element to mui-theme-provider?

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.

not working waves-effect on buttons in firefox

Issue splitting Table into multiple components with Reagent

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:

The onRowSelection defined for the rui/table doesn't trigger. I fixed this by using an on-click handler for each rui/table-row instead
I get this error when I select a row: material-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

Example for reagent does not work as is

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

Radio Button Group & Radio Buttons (Reagent) broken after upgrading from 0.2.21 to 0.2.25

Hi,

Another broken component after updating from 0.2.21 to 0.2.25.

Steps to Reproduce

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

Missing Chip component

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?

http://www.material-ui.com/#/components/chip

Icon size inside list

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

Undefined react key

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.

mui-theme-provider is defined twice

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 ...

How to select dark theme?

Tried {:mui-theme (mui/get-mui-theme "darkBase")} and {:mui-theme (mui/get-mui-theme "dark")} - no luck for both.

Any clues?

Dead code elimination issue?

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.

Related stuff

Can these issues be somehow related to the described problem?

The mailing group post:

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

This material-ui issue by @nha.

Caret moves to the end when editing a TextArea in reagent

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

>=0.2.39 not working with Reagent >=0.6.0

Just tried to update from 0.2.35, tried various reagent/material-ui combinations:

Reagent 0.6.0:

0.2.35 - works
0.2.39 / 0.2.43 - app never loads:

Uncaught Error: js/ReactDOM is missing
    at reagent$dom$module (dom.cljs:19)

Reagent 0.6.1:

0.2.35 - latest, app loads but lots or warnings and some wonky behavior (bidi routing for example not working)

Reverted to Reagent 0.6.0 and 0.2.35 for now.

More examples pls

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.

Unable to load the libraries.

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")]))]))

0.2.37 breaks Rum's mount

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.

How to use with reagent?

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:

"Failed prop type: Invalid prop children of type object supplied to MuiThemeProvider, expected a single ReactElement"
"react-dom.inc.js:18118 Uncaught Error: MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object"

Am I holding it wrong?

props-kebab->camel->js does not handle multi level props

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.

`Can only update a mounted or mounting component` with slider in Rum

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

Fade Effect

How do I use the effect fade from theme?

onEnter, onEntering, onEntered, onExit, onExiting, onExit callbacks not working

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

Tabs broken (Reagent) after upgrading from 0.2.21 to 0.2.25

Hi,

After updating from 0.2.21 to 0.2.25, Tabs component does not work anymore

Steps to Reproduce

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.

0.2.31 fails to load with Error: Cannot find module "react/lib/EventPluginHub"

In 0.2.30 it works well and doesn't produce this result.
I'm using it with Rum.

Update to a more recent pre v1 material-ui version.

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

madvas / cljs-react-material-ui Goto Github PK

cljs-react-material-ui's People

Contributors

Stargazers

Watchers

Forkers

cljs-react-material-ui's Issues

Steps to Reproduce

Related stuff

Steps to Reproduce

Recommend Projects

Recommend Topics

Recommend Org

Jobs