priornix / antizer Goto Github PK

Function missing: Form.create/form-create.

Fulcro seems to be becoming the successor to om-next. Just a quick poll, to see who might be interested in this? I don't time to work on this in the near future, so if anyone is keen to do a port, let us consolidate the discussion here.

Do let me know If there's a more appropriate channel to discuss user issues.

I'm starting from a leiningen project with the following dependencies:

  :dependencies [[org.clojure/clojure "1.9.0-alpha16"]
                 [org.clojure/clojurescript "1.9.908"]
                 [antizer "0.2.2"]
                 [rum "0.10.8"]
                 [cljs-css-modules "0.2.1"]
                 [cljsjs/antd "2.12.3-0"]
                 [cljsjs/moment "2.17.1-1"]
                 [figwheel-sidecar "0.5.13"]]

which provokes the startup warning:

antd.inc.js:sourcemap:45118 You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

Does this mean that it would be better to avoid using cljsjs/antd and somehow build antd using webpack and babel-plugin-import? If so, perhaps some documentation on this would be useful.

I tried the workaround but still I can't get it to render in english, any ideas?

I get an error because it can't find the file, the only file that there is in this directory is the antd.inc.js , any ideas?

The collapsed menu in ANT's demos shows large icons and no text. With antizer collapsed menu shows like this:

;; modified antizer example:
,,,
       [ant/layout-sider
        {:collapsible true}
        [side-menu]]
,,,

I have also pulled the latest antd into cljsjs/ant locally but it didn't help. So I would guess it's something on antizer side. Any ideas?

Thanks!

I think that Textarea element is missing (or I simply can't find it ;)

thanks,
michał

example code use shadow-cljs compile,

How is scrolling added to an ant table?

I tried a few different things and they didn't work.
{:scroll {:x "50%"})}
{:scroll (clj->js {:x 800})}

Numbers vs string percentages didn't make a difference.

Couldn't find any examples.

Does this even work at the moment?

Ant is already at 3.2.0 with new components, such as List and Divider

antd version 4.6.1-0 has been merged on cljsjs (cljsjs/packages#2131 (comment))

Shadow CLJS has much better support NPM, etc libraries.

I could not find a way to uncheck radio buttons? Could you provide some examples?

[ant/radio
          {:value "today" :checked @checked?} ;; does not re-render if it's false
          "Today"]

I was trying to get the following snippet to work in RUM,

(def menu-items [{:key "home"
                  :title "Home"
                  :icon "smile"}
                 {:key "about-us"
                  :title "About Us"
                  :icon "smile"}])

(defn menu []
  (ant/menu
   {:theme "dark" :mode "inline" }
   (for [{key :key title :title icon :icon} menu-items]
     (ant/menu-item
      {:key key}
      (ant/icon {:type icon})
      [:span.nav-text title]))))

But, it was not showing up. Digged a bit into the implementation of adapt-class and found this,

...
type# (first children)

new-children (if (sequential? type#)
                       [(sablono.interpreter/interpret children)]
                       children)

vector->react-elems (fn [[key val]]
                              (if (sequential? val)
                                [key (sablono.interpreter/interpret val)]
                                [key val]))
...

So, I went ahead changed that to the following and everything started working fine(at least for me 😄 )

...
new-children (sablono.interpreter/interpret children) 

vector->react-elems (fn [[key val]]
                                      [key (sablono.interpreter/interpret val)])
...

I think sablono already handles all the cases were input being vector, seq, object etc.. So, this is sufficient for the functionality right?

The url is https://pro.ant.design/
Thanks.

"cljsjs/development/antd.inc.css" and "cljsjs/production/antd.min.inc.css" in the README should be: "cljsjs/antd/development/antd.inc.css" and "cljsjs/antd/production/antd.min.inc.css

If I do something like

[ant/table {:data-source [..]}

it doesn't work, while [ant/table {:dataSource [...]}] works as expected.
Checking the code it looks like it should work really

(ac/map-keys->camel-case {:data-source "hello"})
{"dataSource" "hello"}```

Any idea about what could be the issue?

antizer-examples (rum-flavour) throws multiple warnings of this nature:

bundle.js:1710 Warning: Each child in an array or iterator should have a unique "key" prop. 
Check the top-level render call using <Card>. 

These warnings are suprisingly sticky. They are not switched off by adding the usual keys or rum/with-key calls e.g. to
https://github.com/priornix/antizer/blob/master/examples/src/antizer_examples/rum.cljs#L50
and
https://github.com/priornix/antizer/blob/master/examples/src/antizer_examples/rum.cljs#L52

It works fine with html [:input], but for ant/input check this:

(defn example [_]
  (let [state (r/atom {:title ""})]
    (fn [_]
      [ant/form
       [ant/form-item
        [ant/input
         {:value       (:title @state)
          :on-change   (fn [e] (swap! state assoc :title (.. e -target -value)))
          :placeholder "Title"}]]])))

Code to reproduce this issue:

(defn mysider []
  (prn "sider ")
  [ant/layout-sider "sider"])

(defn main-body []
  (prn "body...")
  [ant/layout
   [ant/layout-header "header"]
   [ant/layout
    [mysider]
    [ant/layout-content "content"]]])

sider will be printed twice, if I change ant/layout-sider to :div, then sider will be normal and printed only once.

I can confirm this is only for antizer for I can't reproduce this in plain JSX.

class MySider extends Component {
  render() {
    console.log('sider') 
    return <Sider>Sider</Sider>
  }
}

class App extends Component {
  render() {
    return (
      <Layout>
      <Header>Header</Header>
      <Layout>
        <MySider></MySider>
        <Content>Content</Content>
      </Layout>
      <Footer>Footer</Footer>
    </Layout>
    );
  }
}

sider will be printed just once in this snippet.

The version I test is:

                 [cljsjs/antd "3.1.0-0"]
                 [cljsjs/react "16.2.0-3"]
                 [antizer "0.2.2" :exclusions [cljsjs/antd]]
                 [reagent "0.8.0-alpha2" :exclusions [cljsjs/react]]

I expected a breadcrumb-item component to go with the breadcrumb component, but it seems to be missing.

How to translate examples like this from antd docs? See https://ant.design/components/card/

  <Card
    style={{ width: 300 }}
    cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
    actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
  >
    <Meta
      avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
      title="Card title"
      description="This is the description"
    />

Any chance of Om Next support being implemented?

In the JSX style API as seen here: https://ant.design/components/table/#components-table-demo-jsx

using a [ant/table-column-group {...}] component says it is undefined.

Hello!

I'm trying to recreate antd's Table component that features a filter dropdown function in clojurescript.

However, looking at the React code, I have no idea how to convert it into clojurescript, more specifically on the part where we deconstruct filterDropdown into setSelectedKeys, selectedKeys, etc.

The following is the code in React:

getColumnSearchProps = dataIndex => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={node => {
            this.searchInput = node;
          }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
            Reset
          </Button>
        </Space>
      </div>
    ),
    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
      record[dataIndex]
        ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
        : '',
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => this.searchInput.select(), 100);
      }
    },
    render: text =>
      this.state.searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
          searchWords={[this.state.searchText]}
          autoEscape
          textToHighlight={text ? text.toString() : ''}
        />
      ) : (
        text
      ),
  });

Can anybody help me? :( Any help or suggestion would be greatly appreciated!

Hello,

From Rum v0.12.0 release notes

Breaking
...
Replaced Sablono with Daiquiri, reworked Sablono fork (in case if you are depending on Sablono)

Is antizer going to support the new Rum version?
Maybe does some fork which is already support it exist?

Thanks.

(defn abc []
(let [value (r/atom "")]
(fn []
[ant/input {:value @value :on-change #(reset! value (-> % .-target .-value))}])))

I think that DescriptionList element is missing or I simply can't find it.

https://ant.design/components/descriptions/

Thanks,
Martin

I'm finding it tricky to understand what is necessary to duplicate https://ant.design/components/form/#components-form-demo-form-in-modal using Antizer's create-form approach.

The tricky part is to find a way to bind the modal OK and Cancel click events so they behave as form buttons and trigger validation correctly. The Ant example accomplishes this using form.refs after using Form.Create to create a modal wrapping a form. It's not clear that Antizer's create-form can handle this wrapped form creation. It's documentation says that form.create 'Calls Form.create() decorator with the form to be created. form can be any hiccup form.'.

I'd love there to be a Form inside Modal example :)

I'm using Rum.

I'm looking to follow: https://ant.design/components/layout/#components-layout-demo-side

When creating a menu item, if a :span element is included, it fails:

(a/menu-item {:key 1}
    (a/icon {:type "pie-chart"})
     [:span "Option 1"])

whereas, this is fine:

(a/menu-item {:key 1}
    (a/icon {:type "pie-chart"})
     "Option 1")

is there a way to include the :span element?