Giter VIP home page Giter VIP logo

uxcore's Introduction

English | 中文

npm version Dependency Status devDependency Status

UXCore is a set of React Components that is designed for enterprise-class pc backend application.

  • Rich Library: more than 50 high quality React Components available

  • Focus on Enterprise-class App: Powerful but easy-to-use Form and Table.

  • Well Designed UI: designed for enterprise-class app to make work easy and happy.

Check out our documentation site for live examples.

Before posting an issue, please read the CHANGELOG and the README and the documentation to check the recently updated.

Installation

npm install uxcore --save

Usage

import js

import { Button } from 'uxcore';
ReactDOM.render(<Button />, mountNode);

import js as required

  • use babel-plugin-import (recommanded)

    // .babelrc or babel-loader option
    {
      "plugins": [
        ["import", { libraryName: "uxcore", camel2DashComponentName: false }]
      ]
    }
  • or, import manually

    import Button from 'uxcore/lib/Button';

import style package

@import '~uxcore/assets/iconfont.css';
@import '~uxcore/assets/orange.css';

React Compatibility

0.14.9 - 16.x

Browser Support

Mainstream browsers and Internet Explorer 9+.

For some broswers (such as IE), you need babel-polyfill.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Polyfills -->
    <script src="https://g.alicdn.com/platform/c/babel-polyfill/6.26.0/dist/polyfill.min.js"></script>
  </head>
</html>

Contribute

Yes please! See the CONTRIBUTING for details.

License

This project is licensed under the terms of the MIT license

uxcore's People

Contributors

eternalsky avatar samoay avatar taoqili avatar yize avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

uxcore's Issues

Mention functionality within Tinymce?

Hello, is it possible to use Mention functionality within Tinymce component? I am not able to get it work. It would be great feature.
Thank you very much.

ref设置字符串和回调的问题

设置字符串ref可以每次都获取到组件实例,但是设置回调ref第二次传入(也可能是第一次)参数会变成null,导致出现错误,比如getValues()是undefined错误

react check uxcore's prop types warning

react-with-addons.js:20739 Warning: Failed propType: Calling PropTypes validators directly is not supported by the prop-types package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types

warning @ react-with-addons.js:20739
checkPropTypes @ react-with-addons.js:9829
validatePropTypes @ react-with-addons.js:9848
createElement @ react-with-addons.js:9882
WEBPACK_AMD_DEFINE_ARRAY @ uxcore-0.17.0.js:42395
webpack_require @ uxcore-0.17.0.js:30
Object.defineProperty.value @ uxcore-0.17.0.js:40716
webpack_require @ uxcore-0.17.0.js:30
Object.defineProperty.value @ uxcore-0.17.0.js:40430
webpack_require @ uxcore-0.17.0.js:30
Object.defineProperty.value @ uxcore-0.17.0.js:40404
webpack_require @ uxcore-0.17.0.js:30
Object.defineProperty.value @ uxcore-0.17.0.js:40298
webpack_require @ uxcore-0.17.0.js:30
Object.defineProperty.value @ uxcore-0.17.0.js:40285
webpack_require @ uxcore-0.17.0.js:30
(anonymous function) @ uxcore-0.17.0.js:96
webpack_require @ uxcore-0.17.0.js:30
(anonymous function) @ uxcore-0.17.0.js:50
(anonymous function) @ uxcore-0.17.0.js:53
webpackUniversalModuleDefinition @ uxcore-0.17.0.js:9
(anonymous function) @ uxcore-0.17.0.js:10

move to React 15.x

This year,UXCore will not support IE 8 any more. So we decide to depend on React 15.x. this issue will make a list of what need to do.

Calendar 的国际化有问题

0.16.3 的时候还是好的,从 0.17.0 开始出问题。

0.16.3

image

0.17.0

image

同时输入框中的 placeholder 也没有国际化

Cannot find module 'util'

I installed uxcore-form use npm install uxcore-form, I use import Form from 'uxcore-form' import it, the console will show following error:

Uncaught Error: Cannot find module 'util'
require @ install.js:85
(anonymous function) @ YearCalendar.js:33
isNode @ YearCalendar.js:20
meteorInstall.node_modules.deepcopy.deepcopy.js @ YearCalendar.js:24
fileEvaluate @ install.js:153
require @ install.js:82
meteorInstall.node_modules.uxcore-form.build.Form.js @ PopupInner.js:35
fileEvaluate @ install.js:153
require @ install.js:82
meteorInstall.node_modules.uxcore-form.build.index.js @ Popup.js:10
fileEvaluate @ install.js:153
require @ install.js:82
Mp.import @ runtime.js:70
meteorInstall.client.modules.admin.components.SignIn.index.js @ app.js?hash=29bc961…:1304
fileEvaluate @ install.js:153
require @ install.js:82
(anonymous function) @ app.js?hash=29bc961…:3786

I use uxcore-button is ok.

Uncaught ReferenceError: React is not defined in meteor project

I use in Meteor.js project,installed by npm,npm version is 3.9.6,the developer tools will show Uncaught ReferenceError: React is not defined in meteor project when I import uxcore

ReferenceError: React is not defined
WEBPACK_AMD_DEFINE_ARRAY @ modules.js?hash=637c031…:19853
webpack_require @ modules.js?hash=637c031…:788
Object.create.constructor.value @ modules.js?hash=637c031…:19715
webpack_require @ modules.js?hash=637c031…:788
_typeof @ modules.js?hash=637c031…:16004
webpack_require @ modules.js?hash=637c031…:788
(anonymous function) @ modules.js?hash=637c031…:850
webpack_require @ modules.js?hash=637c031…:788
(anonymous function) @ modules.js?hash=637c031…:808
(anonymous function) @ modules.js?hash=637c031…:811
webpackUniversalModuleDefinition @ modules.js?hash=637c031…:761
meteorInstall.node_modules.uxcore.lib.uxcore.js @ modules.js?hash=637c031…:768
fileEvaluate @ install.js:153
require @ install.js:82
Mp.import @ runtime.js:70
meteorInstall.client.modules.login.index.js @ app.js?hash=3ec6cd4…:1564
fileEvaluate @ install.js:153
require @ install.js:82
Mp.import @ runtime.js:70
meteorInstall.client.modules.core.routes.js @ app.js?hash=3ec6cd4…:1345
fileEvaluate @ install.js:153
require @ install.js:82
Mp.import @ runtime.js:70
meteorInstall.client.modules.core.index.js @ index.js:1
fileEvaluate @ install.js:153
require @ install.js:82
(anonymous function) @ app.js?hash=3ec6cd4…:1991

SearchFormField

SearchFormField component has a attribute called "placeholder" , but it doesn't take effect when I set the value.

locales

Is here a possibility to create locales other than cn/en?

how to import a single component from uxcore

I install the uxcore, but how to import a single component from uxcore?
I don't want to use import { Button } from 'uxcore'. It will import the whole uxcore.
Use import Button from 'uxcore-button' is ok, but I will install multiple components.
Have any way like import Button from 'uxcore/lib/Button'.

$ is not defined

"uxcore": "^0.3.1"

I got '$ is not defined error' when trying to use the Table component.

import { Table } from 'uxcore'
...
...
    render() {
        let columns = [
            {dataKey: 'symbol', title: 'Symbol', width: 50},
            {dateKey: 'price', title: 'Price', width: 50},
            {dateKey: 'price_change', title: 'Change', width: 50},
            {dateKey: 'price_change_pct', title: 'Change', width: 50},
            {dateKey: 'volume', title: 'Volume', width: 50},
            {dateKey: 'volume_change', title: 'Change', width: 50},
            {dateKey: 'volume_change_pct', title: 'Change', width: 50},
        ];
        let fetchUrl = '/api/symbol-overview';
        let renderProps = {
            width: 960,
            height: 1200,
            fetchParams: {},
            showColumnPicker: true,
            fetchUrl: fetchUrl,
            jsxcolumns: columns
        };

        var elemListView = <Table {...renderProps} ref="grid"/>

raised in uxcore.js, line 33946

me.ajax = $.ajax(ajaxOptions);

Carousel刷新后不能切换

Carousel组件创建后能够切换,当数据改变Carousel组件刷新后就不再进行切换。
环境:

  1. 使用的是nowa进行创建的项目,项目中安装的"uxcore": "^0.15.18"
  2. 使用codeOpen创建的例子,模拟组件刷新,在浏览器中依然能够进行切换(codeOpen无法重现)。我将浏览器只能够使用到的uxcore的版本(https://g.alicdn.com/uxcore/uxcore/0.1.17/uxcore.min.js)替换到本地仍然不能切换。

想不出还有其他什么原因了
无法重现的codeOpen的地址:https://codepen.io/panjunfen/pen/bLxeEw?editors=0010

uxcore ref设置问题

设置字符串ref可以每次都获取到组件实例,但是设置回调ref第二次传入(也可能是第一次)参数会变成null,导致出现错误,比如getValues()是undefined错误
<Form ref="form" className="demo-basic-form"> <Input jsxname="theme" jsxlabel="主题" jsxplaceholder="请输入主题"/> <Input jsxname="location" jsxlabel="地点" jsxplaceholder="请输入地点"/> <Date jsxname="date" jsxlabel="时间" jsxtype="cascade" autoMatchWidth /> <TextArea jsxname="content" jsxlabel="内容" /> <Other> <Button style={{ marginLeft: '88px' }} onClick={me.handleSubmit.bind(me)}>确定</Button> </Other> </Form>
这个是uxcore Form例子的第一个的代码,单击button功能正常
<Form ref={(c) => {this.form = c;}} className="demo-basic-form" jsxvalues={this.state.values} jsxonChange={(values) => {this.handleChange(values)}} size={this.state.values.size} > <Select jsxname="size" jsxlabel="尺寸" jsxdata={[ {value: 'large', text: '大'}, {value: 'middle', text: '中'}, {value: 'small', text: '小'}, ]}/> <Input jsxname="location" jsxlabel="地点" jsxplaceholder="请输入地点"/> <Date jsxname="date" jsxlabel="时间" jsxtype="cascade" autoMatchWidth /> <TextArea jsxname="content" jsxlabel="内容" /> <Other> <Button style={{ marginLeft: '88px' }} onClick={me.handleSubmit.bind(me)}>确定</Button> </Other> </Form>
这是第二个例子,单击button控制台报错

在uxcore中未找到Tinymce(富文本)这个组件

1、我直接用tnpm install uxcore --save 安装的uxcore。但是在uxcore的lib库中没有找到Tinymce。所以引用就找不到了。
2、因为uxcore中找不到Tinymce(富文本)这个组件,我单独安装了uxcore-tinymce(tnpm install uxcore-tinymce --save)这样子的话引用的过程中会报错。报错内容如下:
image

组件不全

uxcore可以加个滑块的组件吗?感觉好不健全

import component as required文档缺少svg-path相关

import component as required
Install the component

npm install uxcore-button kuma-base
import Button from 'uxcore-button';
And import style in your less file

@import '~kuma-base/theme/blue.less'; // or orange.less global variables which components need
@import '~kuma-base/core.less'; // base element style and reset
@import '~uxcore-button/src/Button.less';

以上是官网指引文档,按照这样配,webpack提示svg模块找不到。用真实路径覆盖svg-path变量即可解决

@svg-path: '~kuma-base/core/svg/blue/';

textarea-form-field autosize

初次显示form表单时,如果TextAreaFormField的内容过长,TextAreaFormField并不会自动将内容撑开,需要在输入框中敲击回车才回将内容撑开

Provide documentation in english

This set of components is just fantastic. I want too much to use them, but is hard to apply when documentation is in a lang that is not known, please please please... translate docs to english and open this amazing project to the world.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.