amazeui/amazeui-react

Amaze UI components built with React.js.

Amaze UI React

Amaze UI components build with React.

基于 Amaze UI 和 React.js 封装的 Web 组件库。

规范及工具：

• React 编码规范
• React JetBrains 编辑器 Live Templates

开发及构建

目录结构

├── package.json
├── dist          # UMD 包构建目录
├── docs          # 文档源文件
├── examples      # 示例源文件
├── lib           # npm 包构建目录
├── www           # 文档构建目录
└── src           # 组件源文件（JSX）

开发

使用之前先安装相关依赖：

npm install gulp -g && npm install

• 开发及文档

  npm start
  

• 构建

  npm run build
  

• 示例

  npm run examples
  

amazeui-react's Issues

Examples没办法跑啊

@minwe
以下是相关的错误信息：

gulp "examples"

[10:47:31] Requiring external module babel-core/register
[10:47:41] Using gulpfile ~/WebstormProjects/amazeui-react/gulpfile.babel.js
[10:47:41] Task 'examples' is not in your gulpfile
[10:47:41] Please check the documentation for proper gulpfile formatting

在gulpfile.babel.js里面都没有找到相关的定义啊，是不是写掉了？

AMUI React + Backbone 使用示例

参考项目

• react.backbone
• Backbone.React.Component Build Status

参考文章

• Using React components as Backbone Views
• Simple Data Flow in React Apps Using Flux and Backbone: A Tutorial with Examples
• React + Backbone Model
• Pimp my Backbone.View (by replacing it with React)

参考示例

• React TodoMVC Example With Backbone Integration

amazeui-react不打算支持IE8吗？代码中有IE8不能使用的关键字default

constants.js文件中的STYLES中包含了一个IE8不能使用的关键字default，amazeui-react不打算支持IE8？
另外想问问，amazeui-react什么时候出正式版啊？近期有更新的计划吗？

把amazeui-react包含到系统中，webpack打包时报错

ERROR in .//amazeui-react//object.omit/index.js
Module not found: Error: Cannot resolve module 'isobject' in
/****/node_modules/amazeui-react/node_modules/object.omit
@ .//amazeui-react//object.omit/index.js 10:15-34

ERROR in .//amazeui-react//object.omit/index.js
Module not found: Error: Cannot resolve module 'for-own' in
/****/node_modules/amazeui-react/node_modules/object.omit
@ .//amazeui-react//object.omit/index.js 11:13-31

DateTimeInput 依旧使用 getDOMNode 的问题

handleOuterClick 和 handleClick 中依然存在 getDOMNode 方法，相比是漏改了吧？

会把React切换到0.13，使用es6的方式嘛？

Component.getDOMNode已经不适用了，请更换

Warning: Input.getDOMNode(...) is deprecated. Please use ReactDOM.findDOMNode(instance) instead.warning @ warning.js:45ReactBrowserComponentMixin.getDOMNode @ ReactBrowserComponentMixin.js:30handleClick @ DateTimeInput.js:60ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:71executeDispatch @ EventPluginUtils.js:79executeDispatchesInOrder @ EventPluginUtils.js:102executeDispatchesAndRelease @ EventPluginHub.js:43executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54forEachAccumulated @ forEachAccumulated.js:23EventPluginHub.processEventQueue @ EventPluginHub.js:259runEventQueueInBatch @ ReactEventEmitterMixin.js:18ReactEventEmitterMixin.handleTopLevel @ ReactEventEmitterMixin.js:34handleTopLevelWithoutPath @ ReactEventListener.js:93handleTopLevelImpl @ ReactEventListener.js:73Mixin.perform @ Transaction.js:136ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:62batchedUpdates @ ReactUpdates.js:94ReactEventListener.dispatchEvent @ ReactEventListener.js:204
warning.js:45 Warning: Failed propType: checker is not a function Check the render method of `DateTimeInput`.warning @ warning.js:45checkPropTypes @ ReactElementValidator.js:189validatePropTypes @ ReactElementValidator.js:208ReactElementValidator.createElement @ ReactElementValidator.js:242renderPicker @ DateTimeInput.js:95render @ DateTimeInput.js:125ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:587ReactCompositeComponentMixin._renderValidatedComponent @ ReactCompositeComponent.js:607wrapper @ ReactPerf.js:66ReactCompositeComponentMixin._updateRenderedComponent @ ReactCompositeComponent.js:560ReactCompositeComponentMixin._performComponentUpdate @ ReactCompositeComponent.js:544ReactCompositeComponentMixin.updateComponent @ ReactCompositeComponent.js:473wrapper @ ReactPerf.js:66ReactCompositeComponentMixin.performUpdateIfNecessary @ ReactCompositeComponent.js:421ReactReconciler.performUpdateIfNecessary @ ReactReconciler.js:102runBatchedUpdates @ ReactUpdates.js:129Mixin.perform @ Transaction.js:136Mixin.perform @ Transaction.js:136assign.perform @ ReactUpdates.js:86flushBatchedUpdates @ ReactUpdates.js:147wrapper @ ReactPerf.js:66Mixin.closeAll @ Transaction.js:202Mixin.perform @ Transaction.js:149ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:62batchedUpdates @ ReactUpdates.js:94ReactEventListener.dispatchEvent @ ReactEventListener.js:204
warning.js:45 Warning: DateTimePicker.getDOMNode(...) is deprecated. Please use ReactDOM.findDOMNode(instance) instead.

npm install amazeui-react --save-dev失败

npm ERR! Darwin 15.0.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "amazeui-react" "--save-dev"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3
npm ERR! code ETARGET

npm ERR! notarget No compatible version found: amazeui-react@'*'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["1.0.0-beta2","1.0.0-beta1","1.0.0-alpha3"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'node-express-init'
npm ERR! notarget

方法命名误导

我在用Dropdown组建的时候想调用 setDropdownState() 来主动关闭下拉层。 发现它需要传 true/false , 而不是 {show: true/false} 。 这样做确实能让开发者稍微方便点，但react里如果有 set...State 字样出现，直觉就是传一个object，而不是一个布尔值。 希望能修改下

List组件的边框属性border，Table的边框用bordered

这两个地方并没有使用统一的，是有什么原因的吗？

看了下原先的jquery版也是这样的

有ES6用例吗

滚动检测ScrollSpyNav插件服务器端渲染的问题

我在使用ScrollSpyNav插件开发SPA应用时，开启服务器端渲染的时候会报 window is not definded，我知道这不是插件本身的问题，但是想知道有什么办法可以解决这个问题么？

升级至 React 0.14.0 及 react-router 1.0.0

使用了Navbar后，内容部分最后一点显示不全，有好的解决方法吗？

      <div className="doc-example">
        <Header {...topNavData} />
        <Gallery data={shopItemData} />
        <Navbar data={bottomNavData} />
      </div>

Gallery最后一行的图片显示不全，被Navbar遮挡了。有什么好办法不让Gallery内容被遮挡吗？谢谢！

DateTimeInput 组件弹出位置问题

DateTimeInput 组件在表格中时，点击弹出框位置计算错误，会在表格左上角弹出

AMUI React + Angular 使用示例

Performance
For 2000 rows, demo app performance results look like this:

• ng-repeat: Initial rendering: ~1750ms, Update: ~160ms, Watchers: 14009
• ReactJS: Initial rendering: ~230ms, Update: ~2ms, Watchers: 9

参考项目

https://github.com/davidchang/ngReact

参考文章

• NgReact - React Components in Angular
• Improving AngularJS long list rendering performance using ReactJS
• Faster AngularJS Rendering (AngularJS and ReactJS)
• AngularJS: My solution to the ng-repeat performance problem

有计划添加测试吗？

AmazeUI的Navbar如何与React-Rounter配合使用？

必须人肉写符合React-Router格式要求的URL吗？有没有非人肉的办法呢？类似于Link提供的方法

无法使用自定义按钮，关闭modal

某些情况下，confirm的时候，不想关闭dialog，比如dialog中有内容，但是确定的时候，内容验证失败，需要重新填写，这个时候，不想关闭modal。本来想用onConfirm，return false；来禁止关闭modal结果不行，看了实现代码，从机制上没有提供次功能。

ModalTrigger.js L93
onConfirm: createChainedFunction(this.close, this.props.onConfirm)
表示点击确定的时候，先执行close，再执行this.props.onConfirm，无论onConfirm执行的执行的结果如何，close都会执行。(createChainedFunction.js L36)

不能阻止modal关闭，少了此功能。
一种可能的修改方式是：

ModalTrigger.js L93
onConfirm: createChainedFunction(this.props.onConfirm, this.close)

createChainedFunction.js L36
one.apply(this, arguments) === false || two.apply(this, arguments);
去掉L37

onCancel同理。

关于怎么加入到amazeui-react的问题

我fork了后,想加入开发
按我的理解就是在src里面写源代码,在doc里面写测试和文档,问题是每次写了代码JS都被打包成commonjs的模块,集成在/dist/doc/app.js里面,想设个断点都没法啊, 你们是怎么单独来测试自己的那个模块?

amazeui用webpack打包的时候会将react引入两次

amazeui用webpack打包的时候会将react引入两次，建议将amazeui的源码当中对react的依赖取消掉。

目前我的做法是 cd ./node_modules/amazeui-react/ && npm remove react,如果有更好的解决方式麻烦告诉我

正式稳定版有没有详细的时间计划.谢谢!

npm初始化 amazeui-react项目，dev可以生成，但是build失败

gulp build
amazeui-react-master\src\mixins\DimmerMixin.js: Unexpected token (40:6) while parsing file: amazeui-react-master\src\mixins\DimmerMixin.js
请问这是什么原因？

1.0.0版本Selected.js Line:103

Demo:
http://amazeui.org/react/components/selected

Error:
Uncaught TypeError: this.refs.dropdown.setDropdownState is not a function

development roadmap or schedule ?

Is there a roadmap or release schedule ?

Now amazeui-react is in 1.0.0-beta1....

When new and stable release ?

怎么调整 Selected 组件的大小？

文档里没有看到有 amSize 这样的调整尺寸的属性，Selected 组件支持自定义 sm/lg 尺寸吗？

ref: http://amazeui.org/react/components/selected

Dropdown组件unmount之后控制台中出现Invariant Violation Error

问题描述

Dropdown组件unmount后, 页面上点击任何位置, console中都会出现以下异常:

Uncaught Error: Invariant Violation: Component (with keys: getDOMNode,getClassSet,setClassNamespace,prefixClass,setDropdownState,handleKeyup,handleOuterClick,bindOuterHandlers,unbindOuterHandlers,handleDropdownClick,props,context,state,refs,_reactInternalInstance) contains `render` method but is not mounted in the DOM

解决方案

在Dropdown组件的compnentWillUnmount的事件中注销document元素上的click监听

统一梳理、添加组件可交互元素的事件处理接口

如 #32 所言，对于组件中可交互的元素（如链接、按钮等）应添加事件处理接口：

• 使用相同的属性名称，以减轻用户记忆
• 尽可能使用相同的参数个数

npm安装amazeui-react错误

PS D:\html\react\react-starter-kit-master> npm install amazeui-react
npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "amazeui-react"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3
npm ERR! code ETARGET

npm ERR! notarget No compatible version found: amazeui-react@'*'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["1.0.0-alpha3","1.0.0-beta1"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'react-starter-kit'
npm ERR! notarget

npm ERR! Please include the following file with any support request:
npm ERR! D:\html\react\react-starter-kit-master\npm-debug.log
PS D:\html\react\react-starter-kit-master>

Selected组件，默认的onChange事件报错：this.state.value.split is not a function

问题描述

版本 1.0.0-beta2
68行，
当this.state.value = 2的时候，这个三元表达式会成立，于是调用了非[]数组的split方法，因此报错

产生环境

• 操作系统及版本：
  Mac OS 10.x
• 浏览器及版本：
  Chrome
• 演示地址：
  无
  复现步奏

1. Selected组件使用
2. 配置props和data（不要multiple，是单选）
3. 点击出现下拉后，选择，查看console，报错信息

Dropdown组件的componentWillMount()方法应修改为componentWillUnmount()方法

把amazeui-react和React Router一起用的情况下，如果一个Dropdown Item的点击实现是视图跳转，那么这里就会有问题。视图跳转会导致Dropdown组件被卸载，而这里的EventHandler没有被删除，于是就会执行handleOuterClick，而里面的React.findDOMNode(this)会导致React报：

Uncaught Error: Invariant Violation:
Component (with keys: getDOMNode,getClassSet,setClassNamespace,prefixClass,setDropdownState,handleKeyup,
handleOuterClick,bindOuterHandlers,unbindOuterHandlers,handleDropdownClick,props,context,
state,refs,_reactInternalInstance) contains `render` method but is not mounted in the DOM

添加新组件

貌似还没看到抽屉的组件，有意把我的repo修改后提交PR，不知道有什么styling要遵守的？

什么时候能添加表单验证

TypeError: ReactDOM.findDOMNode is not a function

<Topbar brand="Live Center" toggleNavKey="nav">
    <CollapsibleNav eventKey="nav">
      <Nav topbar>
        <NavItem active href="#">OverView</NavItem>
        <NavItem href="#page1">RemoteServer</NavItem>
        <NavItem href="#page2">LocalServer</NavItem>
      </Nav>
    </CollapsibleNav>
  </Topbar>

大窗口正常，在校窗口点击nav 报如下错误：
TypeError: ReactDOM.findDOMNode is not a function

Input组件的value绑定了数据之后无法输入

举个例子：

<Input type="text" name="brand" label="品牌" placeholder="品牌名称" value={this.state.brand} />

google后发现了这个：

http://stackoverflow.com/questions/28315205/why-does-react-make-inputtype-text-fields-readonly-unless-i-supply-onchange

然后改成:

<Input type="text" name="brand" label="品牌" placeholder="品牌名称" value={this.state.brand} onChange={function(){}}/>

仍然无效

关于滚动检测的一个问题

我在使用UI做一个单页的应用，包括路由也是自己实现的非常简单的，只是一个dom的替换而已，但是有一个问题，因为我的每一个子页面展示就是一个react的component，所以实际上我就是在主component上面来替换展示的component，这里我在一个component上使用了滚动检测来添加动画，但是一但翻页到另外一个展示component的时候，就会因为虚拟dom的原因使得真实dom被删除替换下来了，这样就会报错

Uncaught Error: Invariant Violation: Component (with keys: 
getDOMNode,getClassSet,setClassNamespace,prefixClass,checkIsInView,checkRAF,props,context,sta
te,refs,_reactInternalInstance,_scrollListener,_resizeListener,_orientationListener,_timer) 
contains `render` method but is not mounted in the DOM

我认为是不是在滚动检测里面也应该加一个测试，一旦发现监听的dom不在了，就应该删除这个事件，虽然这个错误并不影响使用，但是会在开发者工具里面不停地抛出错误

支持妹子UI-react

gulp task copy，复制fonts文件夹的文件时，有bug

你好，我的系统是WIN8.1 64BIT
执行gulp dev时，执行任务copy的时候，发现node_modules/amazeui/dist/fonts/文件夹中的文件没有正确复制到制定路径，而是直接复制到dist/下，原因是indexOf中的参数，改成：
else if (file.path.indexOf('\amazeui\dist\fonts\') > -1)
就正常了，请问是系统的问题吗？

TopBar控件在小窗口尺寸界面时出现的问题

当窗体变小时，自动出现缩略图标，这时react版存在3个问题，而jquery版却都不存在这些问题：
1 ： 既然出现缩略图标，那么按钮应该自动隐藏；
2： 点击按钮后，所有按钮不自动隐藏；
3： 点击缩略图标，所有按钮切换自动隐藏模式。

妹子ui的组件支持单独引入项目吗？

打包问题&&请求问题

@minwe
这个版本的打包貌似和touch版本不太一样，gulp 和 webpack的差异
这个版本是不是不能单独的打包成一个js，

另外我想问下，react里面对于数据的请求是不是都是用的这个方式：

function checkStatus(response) {
      if (response.status >= 200 && response.status < 300) {
        return response;
      } else {
        var error = new Error(response.statusText);
        error.response = response;
        throw error;
      }
    }

    fetch('https://api.github.com/orgs/amazeui/events')
      .then(checkStatus)
      .then(res => {
        return res.json();
      })
      .then(data => {
        this.updateDataSource(data);
      })
      .catch(error => {
        console.log('Request failed: ', error)
      });

Selected 组件的选项 value 中含有半角逗号时选中无法显示

let deviceSelectorOptions = {
      data: [{value:'1,2', label:'1,2'}],
      multiple: false,
      searchBox: true,
      maxHeight: 300,
      btnStyle: 'secondary'
}

暂时只发现半角逗号有这个问题。

gulp dev报错

执行 gulp dev时，报以下错误：
[16:13:16] Browserify Error { [Error: Cannot find module './utils/getCurFrameInfo' from 'G:\开发常用\js库\amazeUI\源码\amazeui-react\trunk\src']

Sticky.js 第10行：var getCurFrameInfo = require('./utils/getCurFrameInfo');

但是查看utils文件夹下，发现没有getCurFrameInfo.js。

DateTimeInput的onSelect无法获取时间值

DateTimePicker却可以，应该是DateTimeInput封装的有问题

使用 Webpack 时报错

我用 babel-loader 转换 jsx 语法，浏览器报错如下：

Warning: This JSX uses a plain function. Only React components are valid in React's JSX transform.
main.js:57748 Warning: Something is calling a React component directly. Use a factory or JSX instead. See: https://fb.me/react-legacyfactory
main.js:53700 Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null

能否把admin-index.html用react方式做个demo

@minwe 能这样玩么，，我现在只会jquery，搞不出那么复杂的东西....

amazeui-react modal 组件问题

如果弹出的modal高度比较大（需要scroll的情况），modal的标题栏和关闭按钮会出现诡异的消失现象。

PS：js版本也有这个问题，只要下面是一份form.

package.json文件main参数

npm install 的目录是lib，
git上的目录是src
有些混乱

重命名 componentTag 属性为 component

与 React 官方命名保持一致。

怎样默认显示 Modal 对话框

目前打开一个对话框需要用于点击button。 能不能根据一个isModalActive的prop去默认显示对话框啊？