gadfly361 / soda-ash Goto Github PK

https://github.com/Semantic-Org/Semantic-UI-React/blob/master/CHANGELOG.md#v0790-2018-03-19

In an example at https://react.semantic-ui.com/modules/sidebar/#states-visible there's a snippet like this:

import React from 'react'
import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react'

const SidebarExampleVisible = () => (
  <Sidebar.Pushable as={Segment}>
    <Sidebar as={Menu} animation='overlay' icon='labeled' inverted vertical visible width='thin'>
      <Menu.Item as='a'>
        <Icon name='home' />
        Home
      </Menu.Item>
      <Menu.Item as='a'>
        <Icon name='gamepad' />
        Games
      </Menu.Item>
      <Menu.Item as='a'>
        <Icon name='camera' />
        Channels
      </Menu.Item>
    </Sidebar>

    <Sidebar.Pusher>
      <Segment basic>
        <Header as='h3'>Application Content</Header>
        <Image src='/images/wireframe/paragraph.png' />
      </Segment>
    </Sidebar.Pusher>
  </Sidebar.Pushable>
)

export default SidebarExampleVisible

How do I translate as={Segment} or as={Menu}?

How to pass a Semantic component as an "element" in props, like here:

https://react.semantic-ui.com/elements/input#input-example-icon-element

I tried:

[sa/Input {:icon [sa/Icon {:name "cancel" ...}] ... }]

This nesting behavior and ability to pass components as props will probably come up occasionally but I cannot figure out the corresponding cljs syntax for it.

cursor jumps to the end when input is edited and its value is set from atom.
it does not keep its current place while typing...

While using Menu Item, with the code below
[sa/MenuItem {:name "Terms and Privacy"}]

The expected name to be visible is "Terms and Privacy",
However, the actual result is "Terms And Privacy"
It is converting the first character of each word to uppercase.

No special characters, colon, etc are allowed
[sa/MenuItem {:name "Rights: My Organizations"}]
[sa/MenuItem {:name "© My Organizations"}]

Expected: "Rights : My Organizations" and "© My Organizations"
Returns: "Rights My Organizations" and "My Organizations"

Not sure if these are semantic-ui-react issue or soda-ash issue.

This is an awesome library, but it might be helpful to people to explicitly point out in the readme that they shouldn't also require reagent in their dependencies. I made that mistake, and the closure compiler puked on advanced compilation, took a while to figure out...

Any plans to implement shape?

http://codepen.io/Siyanda/pen/Xmmzbe

Or tips on how you would want a pull request for this to look?

It seems the rendered html of

  [sa/Sidebar {:inverted true}]

gives

<div class="ui left sidebar"></div>

instead of

<div inverted class="ui left sidebar"></div>

Hello,

Do you have any idea to work with Modal?
I tried something like below to test but it´s getting the error:
"Uncaught Error: Invariant Violation: findComponentRoot(..., .6.0.0.2.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a when using tables, nesting tags like<form>, <p>, or <a>, or using non-SVG elements in an parent. Try inspecting the child nodes of the element with React ID ``." on click Modal Button.
What I´ve missing?

(def jquery (js* "$")) 

(defn mostra-dialogo [id] 
  (let [dialogo (jquery id)] 
    (.modal dialogo "show"))) 

(defn esconde-dialogo [id] 
  (let [dialogo (jquery id)] 
    (.modal dialogo "hide"))) 

(defn dialogo [] 
  [:div {:class "ui united small modal" :id "dialogo"} 
   [:div {:class "header"} "MODAL"] 
   [:div {:class "content"} "AHAHAHAHHA"] 
   [:div {:class "actions"} 
    [:button {:class "ui blue labeled button" :id "btSair" 
              :on-click (fn [e] (js/console.log "NO !!!"))} "OK - Fechar"] 
   ]]) 

(defn home-page [] 
  [:div 
   [dialogo] 
   [:div {:class "ui primary button" :id "btAbrir" 
          :on-click (fn [e] (mostra-dialogo "#dialogo"))} "Modal"]]) 

(defn current-page [] 
  [:div [(session/get :current-page)]]) 

;; ------------------------- 
;; Routes 

(secretary/defroute "/" [] 
  (session/put! :current-page #'home-page)) 

;; ------------------------- 
;; Initialize app 

(defn mount-root [] 
  (reagent/render [current-page] (.getElementById js/document "app"))) 

(defn init! [] 
  (accountant/configure-navigation! 
    {:nav-handler 
     (fn [path] 
       (secretary/dispatch! path)) 
     :path-exists? 
     (fn [path] 
       (secretary/locate-route path))}) 
  (accountant/dispatch-current!) 
  (mount-root)) 

Regards

Hi,

I was wondering if you had an example of using the Tab component. I can make it work using string content, but nothing else seems to take effect. For example:

[sa/Tab
  {:renderActiveOnly false
   :panes [
    {:menuItem "Tab1" :pane { :key "tab1" :content "My Tab 1"}}}]

will create a single tab, and display My Tab 1 in the content pane.

[sa/Tab
  {:renderActiveOnly false
   :panes [
    {:menuItem "Tab1" :pane { :key "tab1" :content [sa/TabPane "My Tab 1"]}}}]

This will throw an error:
Uncaught Error: Objects are not valid as a React child (found: object with keys {name, id, class}). If you meant to render a collection of children, use an array instead.

This is using a function as my render.

(defn tab-content [] "My Tab Content")
[sa/Tab
  {:renderActiveOnly false
   :panes [
    {:menuItem "Tab1" :pane { :key "tab1" :content tab-content}}]

This will render the tab, but no content in it.

    {:menuItem "Tab1" :render tab-content}]

^ This gives a similar result. Also, returning a TabPane from tab-content leaves the content blank.

I've been over this for quite a while (or I wouldn't bother you with an issue).

I feel like I'm doing the right thing, but obviously not, trying to follow https://react.semantic-ui.com/modules/tab/#types-basic

In reality, I'd like to use a reagent component as the content. I'm using re-frame, for whatever it's worth.
If you have any insight or examples, I'll be much obliged. Thanks very much!