uxcore-kuma
Advanced tools
Comparing version 1.2.2 to 1.2.3
@@ -6,2 +6,8 @@ History | ||
1.2.2 | ||
----- | ||
`FIXED` some style issue | ||
1.2.1 | ||
@@ -8,0 +14,0 @@ ----- |
{ | ||
"name": "uxcore-kuma", | ||
"version": "1.2.2", | ||
"version": "1.2.3", | ||
"description": "style for uxcore based on kuma", | ||
@@ -5,0 +5,0 @@ "author": "shane.wuq", |
@@ -0,2 +1,4 @@ | ||
// import Button, {ButtonGroup} from '../src'; | ||
let Button = require('../src'); | ||
console.log(Button); | ||
@@ -13,3 +15,3 @@ class Demo extends React.Component { | ||
<h2>{"default:"}</h2> | ||
<Button>Confirm</Button> | ||
<Button className="xxxx">Confirm</Button> | ||
</div> | ||
@@ -16,0 +18,0 @@ <div> |
# History | ||
---- | ||
## 0.3.3 | ||
`CHANGED` change props additionClass to className | ||
## 0.3.2 | ||
`CHANGED` change style | ||
## 0.3.1 | ||
@@ -5,0 +11,0 @@ `CHANGED` upgrade to react@0.14 |
{ | ||
"name": "uxcore-button", | ||
"version": "0.3.1", | ||
"version": "0.3.3", | ||
"description": "uxcore-button ui component for react", | ||
@@ -11,6 +11,3 @@ "main": "src/index.js", | ||
}, | ||
"repository": { | ||
"type": "git", | ||
"url": "git@github.com:uxcore/button.git" | ||
}, | ||
"repository": "https://github.com/uxcore/uxcore-button.git", | ||
"bugs": { | ||
@@ -17,0 +14,0 @@ "url": "http://github.com/uxcore/button/issues" |
@@ -61,1 +61,2 @@ # uxcore-button | ||
|disabled|是否禁用(`disabled` 或 `true` `false`)|string|false| | ||
|className|增加额外的class|string|''| |
@@ -24,4 +24,4 @@ import classnames from 'classnames'; | ||
let clsObj = {}; | ||
if (props.additionClass) { | ||
clsObj[props.additionClass] = true; | ||
if (props.className) { | ||
clsObj[props.className] = true; | ||
} | ||
@@ -34,3 +34,3 @@ if (sizeMap[props.size]) { | ||
Object.keys(props).forEach((key)=>{ | ||
if (key.indexOf('on') == 0) { | ||
if (key.indexOf('on') === 0) { | ||
propEvents[key] = props[key]; | ||
@@ -40,4 +40,4 @@ } | ||
return ( | ||
<button className={className} disabled={props.disabled} {...propEvents}>{this.props.children}</button> | ||
) | ||
<button className={className} disabled={props.disabled} {...propEvents}>{props.children}</button> | ||
); | ||
} | ||
@@ -50,3 +50,3 @@ } | ||
disabled: React.PropTypes.oneOf(['disabled', true, false]), | ||
additionClass: React.PropTypes.string | ||
className: React.PropTypes.string | ||
}; | ||
@@ -57,5 +57,5 @@ Button.defaultProps = { | ||
disabled: false, | ||
additionClass: '' | ||
className: '' | ||
}; | ||
module.exports = Button; |
/** | ||
* Button Component for uxcore | ||
* @author | ||
* @author | ||
* | ||
@@ -9,2 +9,3 @@ * Copyright 2014-2015, Uxcore Team, Alinw. | ||
module.exports = require('./Button'); | ||
import Button from './Button'; | ||
export default Button; |
{ | ||
"name": "uxcore-calendar", | ||
"version": "0.1.15", | ||
"version": "0.1.16", | ||
"description": "calendar componment for react", | ||
@@ -5,0 +5,0 @@ "main": "src/index.js", |
@@ -5,3 +5,6 @@ # History | ||
## 1.0.1 | ||
`UPGRADE` upgrade to rc-collapse@1.4.3 | ||
## 1.0.0 | ||
`NEW` first commit |
{ | ||
"name": "uxcore-collapse", | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"description": "uxcore-collapse component for uxcore.", | ||
@@ -39,3 +39,3 @@ "repository": "https://github.com/uxcore/uxcore-collapse.git", | ||
"object-assign": "^2.0.0", | ||
"rc-collapse": "^1.3.2" | ||
"rc-collapse": "^1.4.0" | ||
}, | ||
@@ -42,0 +42,0 @@ "contributors": [], |
@@ -47,5 +47,6 @@ --- | ||
|---|---|---|---|---| | ||
|activeKey | 当前激活 tab 面板的 key | Array or String | 默认无,accordion模式下默认第一个元素 | | ||
|defaultActiveKey | 初始化选中面板的 key | String | 无 | | ||
|onChange | 切换面板的回调 | Function | 无 | | ||
|activeKey | array|string | the first panel key | 当前激活 tab 面板的 key 默认无,accordion模式下默认第一个元素 | | ||
|defaultActiveKey | array|string | null | 初始化选中面板的 key | | ||
|accordion | Boolean | false | 手风琴模式 | | ||
|onChange | Function | 无 | 切换面板的回调 | | ||
@@ -56,3 +57,3 @@ ### Collapse.Panel | ||
|---|---|---|---|---| | ||
|key | 对应 activeKey | String | 无 | | ||
|header | 面板头内容 | React.Element or String | 无 | | ||
|key | String | 无 | 对应 activeKey | | ||
|header | React.Element or String | 无 | 面板头内容 | |
@@ -37,3 +37,3 @@ var fs = require('fs'); | ||
var isNpmModule = !!path.match(/node_modules/); | ||
var isUxcore = !!path.match(/node_modules\/uxcore/); | ||
var isUxcore = !!path.match(/node_modules\/uxcore/) || !!path.match(/node_modules\/@ali\/uxcore/); | ||
return isNpmModule & !isUxcore; | ||
@@ -49,3 +49,4 @@ }, | ||
externals: { | ||
react: 'var React' // 相当于把全局的React作为模块的返回 module.exports = React; | ||
react: 'var React', // 相当于把全局的React作为模块的返回 module.exports = React; | ||
'react-dom': 'var ReactDOM' | ||
}, | ||
@@ -52,0 +53,0 @@ plugins: [ |
@@ -5,2 +5,5 @@ # History | ||
## 0.2.5 | ||
`UPGRADE` upgrade to rc-dialog@5.2.1 | ||
## 0.2.4 | ||
@@ -7,0 +10,0 @@ `FIXED` fix confirm style bug |
{ | ||
"name": "uxcore-dialog", | ||
"version": "0.2.4", | ||
"version": "0.2.5", | ||
"description": "uxcore-dialog ui componment for react", | ||
@@ -45,3 +45,3 @@ "main": "src/index.js", | ||
"object-assign": "^2.0.0", | ||
"rc-dialog": "~5.0.3", | ||
"rc-dialog": "~5.2.1", | ||
"rc-util": "~2.0.3", | ||
@@ -48,0 +48,0 @@ "uxcore-button": "^0.3.0", |
@@ -47,2 +47,3 @@ # uxcore-dialog | ||
| footer | 底部内容 | React.Element | 确定取消按钮 | | ||
| closable | whether show close button and click mask to close | Boolean | true | | ||
@@ -49,0 +50,0 @@ ### Dialog.xxx() |
@@ -25,2 +25,3 @@ import Button from 'uxcore-button'; | ||
ReactDOM.unmountComponentAtNode(div); | ||
document.body.removeChild(div); | ||
} | ||
@@ -92,3 +93,2 @@ | ||
title="" | ||
transitionName="zoom" | ||
footer="" | ||
@@ -95,0 +95,0 @@ maskTransitionName="fade" width={width}> |
@@ -7,3 +7,2 @@ /** | ||
import RcDialog from 'rc-dialog'; | ||
import { Dom } from 'rc-util'; | ||
import confirm from './confirm'; | ||
@@ -15,5 +14,2 @@ import Button from 'uxcore-button'; | ||
let mousePosition; | ||
let mousePositionEventBinded; | ||
export default class Dialog extends React.Component { | ||
@@ -33,50 +29,25 @@ constructor(props) { | ||
handleOk() { | ||
this.setState({ | ||
confirmLoading: true | ||
}); | ||
this.props.onOk(); | ||
} | ||
componentWillReceiveProps(nextProps) { | ||
if ('visible' in nextProps) { | ||
let newState = { | ||
visible: nextProps.visible | ||
}; | ||
// 隐藏后去除按钮 loading 效果 | ||
if (!nextProps.visible) { | ||
newState.confirmLoading = false; | ||
} | ||
this.setState(newState); | ||
} | ||
} | ||
componentDidMount() { | ||
if (mousePositionEventBinded) { | ||
return; | ||
} | ||
// 只有点击事件支持从鼠标位置动画展开 | ||
Dom.addEventListener(document.body, 'click', function onDocumentMousemove(e) { | ||
mousePosition = { | ||
x: e.pageX, | ||
y: e.pageY | ||
}; | ||
// 20ms 内发生过点击事件,则从点击位置动画展示 | ||
// 否则直接 zoom 展示 | ||
// 这样可以兼容非点击方式展开 | ||
setTimeout(() => mousePosition = null, 20); | ||
}); | ||
mousePositionEventBinded = true; | ||
} | ||
render() { | ||
let loadingClass = this.state.confirmLoading ? ' kuma-btn-loading' : ''; | ||
let props = this.props; | ||
let defaultFooter = [ | ||
<Button key="confirm" onClick={this.handleOk.bind(this)}>确 定</Button>, | ||
<Button key="cancel" type="secondary" onClick={this.handleCancel.bind(this)}>取 消</Button> | ||
<Button key="confirm" | ||
type="primary" | ||
size="medium" | ||
loading={props.confirmLoading} | ||
onClick={this.handleOk.bind(this)}> | ||
确定 | ||
</Button>, | ||
<Button key="cancel" | ||
type="secondary" | ||
size="medium" | ||
onClick={this.handleCancel.bind(this)}> | ||
取消 | ||
</Button> | ||
]; | ||
let footer = props.footer || defaultFooter; | ||
let visible = this.state.visible; | ||
return <RcDialog onClose={this.handleCancel.bind(this)} footer={footer} {...props} | ||
visible={visible} mousePosition={mousePosition} />; | ||
visible={props.visible} />; | ||
} | ||
@@ -90,4 +61,6 @@ } | ||
width: 520, | ||
transitionName: false, | ||
maskAnimation: false | ||
transitionName: '', | ||
maskAnimation: false, | ||
confirmLoading: false, | ||
visible: false | ||
}; | ||
@@ -94,0 +67,0 @@ |
@@ -37,3 +37,3 @@ var fs = require('fs'); | ||
var isNpmModule = !!path.match(/node_modules/); | ||
var isUxcore = !!path.match(/node_modules\/uxcore/); | ||
var isUxcore = !!path.match(/node_modules\/uxcore/) || !!path.match(/node_modules\/@ali\/uxcore/); | ||
return isNpmModule & !isUxcore; | ||
@@ -46,6 +46,7 @@ }, | ||
resolve: { | ||
// alias: getUxcoreModuleAlias() | ||
alias: getUxcoreModuleAlias() | ||
}, | ||
externals: { | ||
react: 'var React' // 相当于把全局的React作为模块的返回 module.exports = React; | ||
react: 'var React', // 相当于把全局的React作为模块的返回 module.exports = React; | ||
'react-dom': 'var ReactDOM' | ||
}, | ||
@@ -52,0 +53,0 @@ plugins: [ |
@@ -1,3 +0,4 @@ | ||
// import React from 'react'; | ||
import {Dropdown, Menu} from '../src/index'; | ||
import React from 'react'; | ||
import Dropdown from '../src/index'; | ||
import Menu from 'uxcore-menu'; | ||
@@ -42,3 +43,3 @@ var menu1 = <Menu> | ||
<h1>点击触发:</h1> | ||
<Dropdown overlay={menu1} trigger="click"> | ||
<Dropdown overlay={menu1} trigger={["click"]}> | ||
<button className="kuma-button kuma-button-sblue">点击触发</button> | ||
@@ -45,0 +46,0 @@ </Dropdown> |
@@ -1,15 +0,19 @@ | ||
# History | ||
History | ||
======= | ||
--- | ||
## 0.1.6 | ||
0.2.0 | ||
----- | ||
`CHANGED` update rc-dropdown to 1.4.0 | ||
`CHANGED` upgraded, base on rc-dropdown@1.4.x | ||
## 0.1.5 | ||
0.1.5 | ||
----- | ||
`FIXED` #1 | ||
## 0.1.4 | ||
0.1.4 | ||
----- | ||
`CHANGED` upgrade to react@0.14 |
{ | ||
"name": "uxcore-dropdown", | ||
"version": "0.1.6", | ||
"version": "0.2.0", | ||
"description": "dropdown component ", | ||
@@ -30,4 +30,3 @@ "main": "src/index.js", | ||
"object-assign": "^2.0.0", | ||
"rc-dropdown": "~1.4.0", | ||
"rc-menu": "~4.4.5" | ||
"rc-dropdown": "~1.4.3" | ||
}, | ||
@@ -48,4 +47,5 @@ "devDependencies": { | ||
"uxcore-kuma": "~1.1.0", | ||
"uxcore-menu": "^1.0.0", | ||
"webpack": "^1.10.5" | ||
} | ||
} |
@@ -1,5 +0,9 @@ | ||
# uxcore-dropdown | ||
uxcore-dropdown | ||
=============== | ||
--- | ||
## TL;DR | ||
TL;DR | ||
----- | ||
dropdown ui component for react | ||
@@ -16,6 +20,8 @@ | ||
## Usage | ||
Usage | ||
----- | ||
```js | ||
import {Dropdown, Menu} from 'uxcore-dropdown'; | ||
import Dropdown from 'uxcore-dropdown'; | ||
import Menu from 'uxcore-menu'; | ||
var menu = <Menu> | ||
@@ -41,11 +47,13 @@ <Menu.Item> | ||
### demo | ||
http://uxcore.github.io/uxcore/components/dropdown/ | ||
## API | ||
API | ||
--- | ||
### props | ||
|参数|说明|类型|默认值| | ||
|---|----|---|------| | ||
|trigger|触发下来行为|"click" or "hover"|hover| | ||
|overlay|菜单节点|React.Element|无| | ||
| 参数 | 说明 | 类型 | 默认值 | | ||
|---------|--------------|-------------|-------------| | ||
| trigger | 触发下来行为 | array | `['hover']` | | ||
| overlay | 菜单节点 | uxcore-menu | 无 | |
@@ -1,4 +0,2 @@ | ||
import React from 'react'; | ||
import RcDropdown from 'rc-dropdown'; | ||
import RcMenu from 'rc-menu'; | ||
import assign from 'object-assign'; | ||
@@ -19,14 +17,2 @@ | ||
class Menu extends RcMenu { | ||
constructor(props){ | ||
super(props); | ||
} | ||
} | ||
Menu.displayName = 'uxcore-menu'; | ||
Menu.propTypes = RcMenu.propTypes; | ||
Menu.defaultProps = assign(RcMenu.defaultProps, { | ||
prefixCls: 'kuma-dropdown-menu' | ||
}); | ||
export {Dropdown, Menu}; | ||
export default Dropdown; |
@@ -51,4 +51,5 @@ /** | ||
fruit: "apple", | ||
number: 0, | ||
// city: "nj", | ||
textArea: "我是多行文本", | ||
// textArea: "我是多行文本", | ||
// date: "2015-09-01", | ||
@@ -62,6 +63,2 @@ checkbox: ["sea"], | ||
name: "33" | ||
}, { | ||
city: "bj", | ||
email: "33322", | ||
name: "3322" | ||
} | ||
@@ -321,3 +318,2 @@ ] | ||
disabled={false} | ||
jsxfetchUrl="http://suggest.taobao.com/sug" | ||
afterFetch={(obj) => { | ||
@@ -338,2 +334,3 @@ let data = {}; | ||
jsxfetchUrl="http://suggest.taobao.com/sug" | ||
dataType="jsonp" | ||
combobox={true} | ||
@@ -352,2 +349,11 @@ afterFetch={(obj) => { | ||
jsxfetchUrl="http://suggest.taobao.com/sug" | ||
dataType="jsonp" | ||
beforeFetch={function(data) { | ||
console.log(data); | ||
if (data.q == undefined) { | ||
data.q = "a" | ||
} | ||
return data; | ||
}} | ||
dataType="jsonp" | ||
afterFetch={(obj) => { | ||
@@ -376,3 +382,3 @@ let data = {}; | ||
<FormRowTitle jsxtitle="级联类"/> | ||
<DateFormField jsxtype="cascade" jsxname="casDate" jsxlabel="级联日期"/> | ||
<DateFormField jsxtype="cascade" jsxname="casDate" jsxlabel="级联日期" format="yyyy/MM/dd"/> | ||
<CascadeSelectFormField | ||
@@ -379,0 +385,0 @@ jsxdata={casData} |
@@ -0,1 +1,5 @@ | ||
## 1.2.2 | ||
`FIX` fix issue #36 #37 | ||
## 1.2.1 | ||
@@ -2,0 +6,0 @@ |
{ | ||
"name": "uxcore-form", | ||
"version": "1.2.1", | ||
"version": "1.2.2", | ||
"description": "form component for uxcore", | ||
@@ -5,0 +5,0 @@ "repository": "https://github.com/uxcore/uxcore-form.git", |
@@ -58,5 +58,2 @@ /** | ||
else { | ||
if(name=='grid') { | ||
debugger; | ||
} | ||
this.fields[name] = field | ||
@@ -63,0 +60,0 @@ } |
@@ -7,2 +7,3 @@ let FormField = require('./FormField'); | ||
let update = React.addons.update; | ||
let deepcopy = require('deepcopy'); | ||
@@ -21,9 +22,9 @@ class DateFormField extends FormField { | ||
let me = this; | ||
let values = update(me.state.value, {}) || []; | ||
if (!!values[i]) { | ||
values = values.slice(0, i); | ||
values.push(new Date(value).toJSON()); | ||
let values = deepcopy(me.state.value) || []; | ||
values[i] = new Date(value).toJSON(); | ||
if (i == 0 && !!values[1] && new Date(value).getTime() > new Date(values[1]).getTime()) { | ||
values.pop(); | ||
} | ||
else { | ||
values[i] = new Date(value).toJSON(); | ||
if (i == 1 && !!values[0] && new Date(value).getTime() < new Date(values[0]).getTime()) { | ||
values[0] = undefined; | ||
} | ||
@@ -30,0 +31,0 @@ me.handleDataChange(values); |
@@ -10,3 +10,3 @@ let InputFormField = require('./InputFormField'); | ||
formatValue(value) { | ||
if (!value) return ""; | ||
if (value === undefined || value === null) return ""; | ||
let me = this; | ||
@@ -13,0 +13,0 @@ value = value + ""; |
@@ -31,7 +31,14 @@ /** | ||
componentWillMount() { | ||
let me = this; | ||
if (me.props.jsxfetchUrl) { | ||
me.fetchData(); | ||
} | ||
} | ||
fetchData(value) { | ||
let me = this; | ||
$.ajax({ | ||
let ajaxOptions = { | ||
url: me.props.jsxfetchUrl, | ||
dataType: "jsonp", | ||
dataType: me.props.dataType || 'json', | ||
data: me.props.beforeFetch({q: value}), | ||
@@ -46,4 +53,9 @@ success: (data) => { | ||
} | ||
}) | ||
} | ||
if (/\.jsonp/.test(me.props.jsxfetchUrl)) { | ||
ajaxOptions.dataType = "jsonp" | ||
} | ||
$.ajax(ajaxOptions); | ||
} | ||
handleChange(value) { | ||
@@ -131,3 +143,3 @@ let me = this; | ||
if (!me.props.jsxmultiple || me.state.fromReset) { | ||
if (!me.props.jsxmultiple && !me.props.multiple || me.state.fromReset) { | ||
options.value = me.state.value || []; | ||
@@ -134,0 +146,0 @@ } |
@@ -39,3 +39,3 @@ /** | ||
ref="root" | ||
value={me.state.value} | ||
value={me.state.value || ""} | ||
onChange={me.handleChange.bind(me)}/> | ||
@@ -42,0 +42,0 @@ } |
{ | ||
"name": "uxcore-grid", | ||
"version": "1.2.0", | ||
"version": "1.2.1", | ||
"description": "uxcore-grid component for uxcore.", | ||
@@ -32,5 +32,6 @@ "repository": "https://github.com/uxcore/uxcore-grid.git", | ||
"gulp-sourcemaps": "~1.5.2", | ||
"webpack": "^1.10.5", | ||
"react": "^0.14.0", | ||
"uxcore-kuma": "~1.1.0" | ||
"respond.js": "^1.4.2", | ||
"uxcore-kuma": "~1.1.0", | ||
"webpack": "^1.10.5" | ||
}, | ||
@@ -37,0 +38,0 @@ "dependencies": { |
let classNames = require('classnames'); | ||
let styleMaps = require('./styleMaps'); | ||
let styleMaps = require('./StyleMaps'); | ||
let elementType = require('react-prop-types/lib/elementType'); | ||
@@ -4,0 +4,0 @@ |
@@ -0,1 +1,9 @@ | ||
## 1.0.4 | ||
`CHANGED` change repository to https | ||
## 1.0.3 | ||
`FIXED` fix issue #2 | ||
## 1.0.2 | ||
@@ -5,4 +13,1 @@ | ||
## 1.0.3 | ||
`FIXED` fix issue #2 |
{ | ||
"name": "uxcore-layout", | ||
"version": "1.0.3", | ||
"version": "1.0.4", | ||
"description": "uxcore-layout ui component for react", | ||
@@ -9,6 +9,3 @@ "main": "src/index.js", | ||
}, | ||
"repository": { | ||
"type": "git", | ||
"url": "git@github.com:uxcore/uxcore-layout.git" | ||
}, | ||
"repository": "https://github.com/uxcore/uxcore-layout.git", | ||
"bugs": { | ||
@@ -15,0 +12,0 @@ "url": "http://github.com/uxcore/uxcore-layout/issues" |
@@ -38,2 +38,3 @@ { | ||
"react-dom": "~0.14.0", | ||
"uxcore-kuma": "^1.1.0", | ||
"webpack": "^1.10.5" | ||
@@ -43,4 +44,3 @@ }, | ||
"classnames": "^2.1.2", | ||
"object-assign": "^2.0.0", | ||
"uxcore-kuma": "~1.1.0" | ||
"object-assign": "^2.0.0" | ||
}, | ||
@@ -47,0 +47,0 @@ "author": "vincent.bian", |
{ | ||
"name": "uxcore-multi-select", | ||
"version": "0.1.0", | ||
"version": "0.1.3", | ||
"description": "uxcore-multi-select component for uxcore.", | ||
@@ -39,5 +39,5 @@ "repository": "https://github.com/uxcore/uxcore-multi-select.git", | ||
"object-assign": "^2.0.0", | ||
"uxcore-button": "^0.3.1", | ||
"uxcore-checkbox-group": "^1.0.6", | ||
"uxcore-dropdown": "^0.1.5" | ||
"uxcore-button": "~0.3.1", | ||
"uxcore-checkbox-group": "~1.0.6", | ||
"uxcore-dropdown": "~0.2.0" | ||
}, | ||
@@ -44,0 +44,0 @@ "contributors": [], |
@@ -9,2 +9,2 @@ /** | ||
module.exports = require('./Multiselect'); | ||
module.exports = require('./MultiSelect'); |
@@ -10,3 +10,3 @@ /** | ||
let {Dropdown, Menu} = require('uxcore-dropdown'); | ||
let Dropdown = require('uxcore-dropdown'); | ||
let CheckboxGroup = require('uxcore-checkbox-group'); | ||
@@ -147,2 +147,7 @@ let Button = require('uxcore-button'); | ||
_handleVisbleChange(visible) { | ||
let props = this.props; | ||
if (props.disabled) { | ||
return; | ||
} | ||
this.setState({ | ||
@@ -208,3 +213,3 @@ visible: visible | ||
onVisibleChange={me._handleVisbleChange.bind(me)} | ||
trigger="click" | ||
trigger={["click"]} | ||
overlayClassName={classnames({ | ||
@@ -211,0 +216,0 @@ [props.prefixCls + '-dropdown']: true, |
@@ -5,2 +5,5 @@ # History | ||
## 0.1.8 | ||
`CHANGED` change arrow with kuma-icon | ||
## 0.1.7 | ||
@@ -7,0 +10,0 @@ |
{ | ||
"name": "uxcore-pagination", | ||
"version": "0.1.7", | ||
"version": "0.1.8", | ||
"description": "pagination ui component for react", | ||
@@ -37,3 +37,4 @@ "main": "src/index.js", | ||
"react-dom": "~0.14.0", | ||
"webpack": "^1.10.5" | ||
"webpack": "^1.10.5", | ||
"uxcore-kuma": "~1.2.2" | ||
}, | ||
@@ -40,0 +41,0 @@ "dependencies": { |
@@ -81,6 +81,6 @@ /** | ||
<li title="Previous Page" onClick={this._prev} className={(this._hasPrev() ? '' : `${prefixCls}-disabled `) + `${prefixCls}-prev`}> | ||
<a></a> | ||
<a className="kuma-icon kuma-icon-chevron-left"></a> | ||
</li> | ||
<li title="Next Page" onClick={this._next} className={(this._hasNext() ? '' : `${prefixCls}-disabled `) + `${prefixCls}-next`}> | ||
<a></a> | ||
<a className="kuma-icon kuma-icon-chevron-right"></a> | ||
</li> | ||
@@ -143,7 +143,7 @@ </ul> | ||
<li title="Previous Page" onClick={this._prev} className={(this._hasPrev() ? '' : `${prefixCls}-disabled `) + `${prefixCls}-prev`}> | ||
<a></a> | ||
<a className="kuma-icon kuma-icon-chevron-left"></a> | ||
</li> | ||
{pagerList} | ||
<li title="Next Page" onClick={this._next} className={(this._hasNext() ? '' : `${prefixCls}-disabled `) + `${prefixCls}-next`}> | ||
<a></a> | ||
<a className="kuma-icon kuma-icon-chevron-right"></a> | ||
</li> | ||
@@ -150,0 +150,0 @@ {this.renderTotal()} |
# HISTORY | ||
## 0.1.2 | ||
`NEW` add overlayClassName props | ||
## 0.1.1 | ||
@@ -4,0 +8,0 @@ |
{ | ||
"name": "uxcore-popover", | ||
"version": "0.1.1", | ||
"version": "0.1.2", | ||
"description": "uxcore-popover component for uxcore.", | ||
@@ -5,0 +5,0 @@ "repository": "https://github.com/uxcore/uxcore-popover.git", |
@@ -66,2 +66,3 @@ --- | ||
|overlay|string|required|-|弹窗内容| | ||
|overlayClassName|string|optional|-|弹窗的额外类名| | ||
|title|string|optional|-|弹窗标题,不传入则没有标题栏| | ||
@@ -68,0 +69,0 @@ |placement|string|optional|top|弹窗从那个方向弹出| |
@@ -88,3 +88,3 @@ /** | ||
<Tooltip placement={me.props.placement} | ||
overlayClassName={'uxcore'} | ||
overlayClassName={me.props.overlayClassName} | ||
prefixCls={me.props.prefixCls} | ||
@@ -121,2 +121,3 @@ visible={me.state.visible} | ||
delay: React.PropTypes.number, | ||
overlayClassName: React.PropTypes.string, | ||
placement: React.PropTypes.oneOf(['top', 'bottom', 'left', 'right']), | ||
@@ -123,0 +124,0 @@ trigger: React.PropTypes.oneOf(['hover', 'click']), |
@@ -39,4 +39,4 @@ { | ||
"react-dom": "~0.14.0", | ||
"webpack": "^1.10.5", | ||
"uxcore-kuma": "^1.1.0" | ||
"uxcore-kuma": "^1.1.0", | ||
"webpack": "^1.12.6" | ||
}, | ||
@@ -43,0 +43,0 @@ "dependencies": { |
@@ -37,3 +37,3 @@ var fs = require('fs'); | ||
var isNpmModule = !!path.match(/node_modules/); | ||
var isUxcore = !!path.match(/node_modules\/uxcore/); | ||
var isUxcore = !!path.match(/node_modules\/uxcore/) || !!path.match(/node_modules\/@ali\/uxcore/); | ||
return isNpmModule & !isUxcore; | ||
@@ -46,6 +46,7 @@ }, | ||
resolve: { | ||
// alias: getUxcoreModuleAlias() | ||
alias: getUxcoreModuleAlias() | ||
}, | ||
externals: { | ||
react: 'var React' // 相当于把全局的React作为模块的返回 module.exports = React; | ||
react: 'var React', // 相当于把全局的React作为模块的返回 module.exports = React; | ||
'react-dom': 'var ReactDOM' | ||
}, | ||
@@ -52,0 +53,0 @@ plugins: [ |
@@ -29,7 +29,3 @@ /** | ||
description: '这里是多信息的描述啊' | ||
}].map(function(s, i) { | ||
return ( | ||
<Step key={i} title={s.title} description={s.description} /> | ||
); | ||
}); | ||
}] | ||
@@ -71,3 +67,4 @@ let array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3)); | ||
currentStep: Math.floor(Math.random() * steps2.length), | ||
showIcon: true | ||
showIcon: true, | ||
steps: steps | ||
}; | ||
@@ -82,2 +79,26 @@ } | ||
changeItem() { | ||
this.setState({ | ||
steps: [{ | ||
title: '已完成', | ||
description: '这里是多信息的描述啊' | ||
}, { | ||
title: '进行中', | ||
description: '这里是多信息的耶哦耶哦哦耶哦耶' | ||
}, { | ||
title: '又一个待运行', | ||
description: '描述啊描述啊' | ||
},{ | ||
title: '已完成', | ||
description: '这里是多信息的描述啊' | ||
}, { | ||
title: '进行中', | ||
description: '这里是多信息的耶哦耶哦哦耶哦耶' | ||
}, { | ||
title: '又一个待运行', | ||
description: '描述啊描述啊' | ||
}] | ||
}) | ||
} | ||
next() { | ||
@@ -97,5 +118,14 @@ var s = this.state.currentStep + 1; | ||
<button className='kuma-button kuma-button-sm' onClick={this.toggleNumberShow.bind(this)}>显示数字</button> | ||
<button className='kuma-button kuma-button-sm' onClick={this.changeItem.bind(this)}>动态改变块的数量</button> | ||
<p>基本用法</p> | ||
<Steps current={1} showIcon={this.state.showIcon}>{steps}</Steps> | ||
<p>迷你版</p> | ||
<Steps current={1} showIcon={this.state.showIcon}> | ||
{ | ||
this.state.steps.map(function(s, i) { | ||
return ( | ||
<Step key={i} title={s.title} description={s.description} /> | ||
); | ||
}) | ||
} | ||
</Steps> | ||
{/*<p>迷你版</p> | ||
<Steps size="small" current={1} showIcon={this.state.showIcon}>{steps}</Steps> | ||
@@ -115,3 +145,3 @@ <p>切换到下一步</p> | ||
<p>自定义状态</p> | ||
<Steps showIcon={this.state.showIcon}>{steps3}</Steps> | ||
<Steps showIcon={this.state.showIcon}>{steps3}</Steps>*/} | ||
</div> | ||
@@ -118,0 +148,0 @@ ); |
# History | ||
## 1.0.3 | ||
`FIXED` remove useless console log | ||
## 1.0.2 | ||
`CHANGED` remove | ||
`FIXED` fix issue #2, add support for the change of step numbers | ||
## 1.0.1 | ||
`FIXED` #1 | ||
## 1.0.0 | ||
`NEW` First commit | ||
## 1.0.1 | ||
`FIXED` #1 | ||
{ | ||
"name": "uxcore-steps", | ||
"version": "1.0.1", | ||
"version": "1.0.3", | ||
"description": "uxcore-steps component for uxcore.", | ||
@@ -39,4 +39,3 @@ "repository": "https://github.com/uxcore/uxcore-steps.git", | ||
"classnames": "^2.1.2", | ||
"object-assign": "^2.0.0", | ||
"rc-steps": "~1.3.3" | ||
"object-assign": "^2.0.0" | ||
}, | ||
@@ -43,0 +42,0 @@ "contributors": [], |
@@ -8,5 +8,131 @@ /** | ||
*/ | ||
import RcSteps from 'rc-steps'; | ||
class Steps extends RcSteps { | ||
let Step = require("./Step"); | ||
class Steps extends React.Component { | ||
constructor(props) { | ||
super(props); | ||
this.state = { | ||
init: false, | ||
tailWidth: 0 | ||
}; | ||
this._previousStepsWidth = 0; | ||
this._itemsWidth = []; | ||
} | ||
componentWillReceiveProps(nextProps) { | ||
if (nextProps.children.length !== this.props.children.length) { | ||
if (this.props.direction === 'vertical') { | ||
return; | ||
} | ||
const $dom = ReactDOM.findDOMNode(this); | ||
const len = nextProps.children.length - 1; | ||
this._itemsWidth = new Array(len + 1); | ||
let i; | ||
for (i = 0; i <= len - 1; i++) { | ||
const $item = $dom.children[i].children; | ||
this._itemsWidth[i] = nextProps.maxDescriptionWidth; | ||
} | ||
this._itemsWidth[i] = nextProps.maxDescriptionWidth; | ||
this._update(nextProps); | ||
} | ||
} | ||
componentDidMount() { | ||
if (this.props.direction === 'vertical') { | ||
return; | ||
} | ||
const $dom = ReactDOM.findDOMNode(this); | ||
const len = $dom.children.length - 1; | ||
this._itemsWidth = new Array(len + 1); | ||
let i; | ||
for (i = 0; i <= len - 1; i++) { | ||
const $item = $dom.children[i].children; | ||
this._itemsWidth[i] = this.props.maxDescriptionWidth; | ||
} | ||
this._itemsWidth[i] = this.props.maxDescriptionWidth; | ||
this._previousStepsWidth = Math.floor(ReactDOM.findDOMNode(this).offsetWidth); | ||
this._update(); | ||
/* | ||
* 把最后一个元素设置为absolute,是为了防止动态添加元素后滚动条出现导致的布局问题。 | ||
* 未来不考虑ie8一类的浏览器后,会采用纯css来避免各种问题。 | ||
*/ | ||
$dom.children[len].style.position = 'absolute'; | ||
/* | ||
* 下面的代码是为了兼容window系统下滚动条出现后会占用宽度的问题。 | ||
* componentDidMount时滚动条还不一定出现了,这时候获取的宽度可能不是最终宽度。 | ||
* 对于滚动条不占用宽度的浏览器,下面的代码也不二次render,_resize里面会判断要不要更新。 | ||
*/ | ||
setTimeout(() => { | ||
this._resize(); | ||
}); | ||
if (window.attachEvent) { | ||
window.attachEvent('onresize', this._resize.bind(this)); | ||
} else { | ||
window.addEventListener('resize', this._resize.bind(this)); | ||
} | ||
} | ||
componentDidUpdate() { | ||
this._resize(); | ||
const $dom = ReactDOM.findDOMNode(this); | ||
const len = $dom.children.length - 1; | ||
/* | ||
* 把最后一个元素设置为absolute,是为了防止动态添加元素后滚动条出现导致的布局问题。 | ||
* 未来不考虑ie8一类的浏览器后,会采用纯css来避免各种问题。 | ||
*/ | ||
for (let i = 0; i <= len; i++) { | ||
$dom.children[i].style.position = 'relative'; | ||
} | ||
$dom.children[len].style.position = 'absolute'; | ||
} | ||
componentWillUnmount() { | ||
if (this.props.direction === 'vertical') { | ||
return; | ||
} | ||
if (window.attachEvent) { | ||
window.detachEvent('onresize', this._resize); | ||
} | ||
else { | ||
window.removeEventListener('resize', this._resize); | ||
} | ||
} | ||
_resize() { | ||
const w = Math.floor(ReactDOM.findDOMNode(this).offsetWidth); | ||
if (this._previousStepsWidth === w) { | ||
return; | ||
} | ||
this._previousStepsWidth = w; | ||
this._update(); | ||
} | ||
_update(props) { | ||
props = props || this.props; | ||
const len = props.children.length - 1; | ||
let tw = 0; | ||
this._itemsWidth.forEach((w) => { | ||
tw += w; | ||
}); | ||
const dw = Math.floor((this._previousStepsWidth - tw) / len) - 1; | ||
if (dw <= 0) { | ||
return; | ||
} | ||
this.setState({ | ||
init: true, | ||
tailWidth: dw | ||
}); | ||
} | ||
render(){ | ||
@@ -72,4 +198,4 @@ let props = this.props; | ||
Steps.Step = RcSteps.Step; | ||
Steps.Step = Step; | ||
export default Steps; |
@@ -37,3 +37,3 @@ var fs = require('fs'); | ||
var isNpmModule = !!path.match(/node_modules/); | ||
var isUxcore = !!path.match(/node_modules\/uxcore/); | ||
var isUxcore = !!path.match(/node_modules\/uxcore/) || !!path.match(/node_modules\/@ali\/uxcore/); | ||
return isNpmModule & !isUxcore; | ||
@@ -49,3 +49,4 @@ }, | ||
externals: { | ||
react: 'var React' // 相当于把全局的React作为模块的返回 module.exports = React; | ||
react: 'var React', // 相当于把全局的React作为模块的返回 module.exports = React; | ||
'react-dom': 'var ReactDOM' | ||
}, | ||
@@ -52,0 +53,0 @@ plugins: [ |
@@ -80,3 +80,3 @@ /** | ||
{ dataKey: 'id', title: 'ID', width: 50,hidden:true,fixed:true}, | ||
{ dataKey: 'country', title:'国家国家国家国家', width: 200,ordered:true, type: "money", delimiter: ','}, | ||
{ dataKey: 'country', title:'国家国家国家国家', width: 200,ordered:true, type: "money", delimiter: ',',fixed:true}, | ||
{ dataKey: 'city',title:'城市', width: 150}, | ||
@@ -141,3 +141,3 @@ { dataKey: 'firstName',title:"FristName",fixed:true,beforeRender:function(rowData) { | ||
//fetchUrl:"http://demo.nwux.taobao.net/file/getGridJson.jsonp", | ||
fetchUrl: "http://10.1.159.52:3003/demo/data.json", | ||
fetchUrl: "http://10.1.157.111:3000/demo/data.json", | ||
jsxcolumns:columns, | ||
@@ -144,0 +144,0 @@ //subComp:(<Grid {...renderSubProps} ref="subGrid"/>), |
@@ -11,5 +11,32 @@ /** | ||
let Validator = require('uxcore-validator'); | ||
let Button = require('uxcore-button'); | ||
let Grid = require('../src'); | ||
console.log(Grid.Constants); | ||
let mockData = { | ||
"datas": [ | ||
{ | ||
"check": true, | ||
"id":"1", | ||
"grade":"grade1", | ||
"email":"email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1email1", | ||
"firstName":"firstName1", | ||
"lastName":"lastName1", | ||
"birthDate":"birthDate1", | ||
"country":"086156529655931.121(xsxs)", | ||
"city":"87181" | ||
}, | ||
{ | ||
"check": false, | ||
"id":"2", | ||
"grade":"grade2", | ||
"email":"email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2email2", | ||
"firstName":"firstName2", | ||
"lastName":"lastName2", | ||
"birthDate":"birthDate2", | ||
"country":"086156529655931.121(xsxs)", | ||
"city":"87181" | ||
} | ||
] | ||
} | ||
class Demo extends React.Component { | ||
@@ -20,3 +47,4 @@ | ||
this.state = { | ||
data:this.props.data | ||
data:mockData, | ||
showOtherColumn: false | ||
} | ||
@@ -32,3 +60,27 @@ } | ||
render () { | ||
handleClick() { | ||
this.setState({ | ||
showOtherColumn: !this.state.showOtherColumn | ||
}) | ||
} | ||
handleChangeData() { | ||
this.setState({ | ||
data: { | ||
datas: this.state.data.datas.concat({ | ||
"check": false, | ||
"id":"3", | ||
"grade":"grade3", | ||
"email":"email3email3email3email", | ||
"firstName":"firstName3", | ||
"lastName":"lastName3", | ||
"birthDate":"birthDate3", | ||
"country":"086156539655931.121(xsxs)", | ||
"city":"87181" | ||
}) | ||
} | ||
}) | ||
} | ||
render () { | ||
let me=this; | ||
@@ -39,3 +91,2 @@ // 通过 rowSelection 对象表明需要行选择 | ||
console.log(record, selected, selectedRows); | ||
me.setState(); | ||
}, | ||
@@ -58,36 +109,64 @@ onSelectAll: function(selected, selectedRows) { | ||
// title, width, type, hidden,dataKey | ||
// let columns = [ | ||
// { dataKey: 'jsxid',title:"jsxid",width: 40 }, | ||
// { dataKey: 'city',title:'城市很长很长很长很长很长很长很长很长很长很长', width: 220,type:'select' ,options:{ | ||
// 'hz':'杭州', | ||
// 'bj':'北京', | ||
// 'sh':'上海', | ||
// 'ah':'安徽' | ||
// }}, | ||
// { dataKey: 'name',title:"姓名",width: 200,type:"text"}, | ||
// { dataKey: 'email',title:"Email",width: 200,type:"text"}, | ||
// { dataKey: 'action1', title:'操作1', width:100, type:"action",actions:{ | ||
// "增加": function(rowData) { | ||
// me.refs.grid.addEmptyRow(); | ||
// }, | ||
// "删除": function(rowData) { | ||
// me.refs.grid.delRow(rowData); | ||
// } | ||
// } | ||
// } | ||
// ]; | ||
// Edit mode but no inline edit | ||
let columns = [ | ||
{ dataKey: 'jsxid',title:"jsxid",width: 40 }, | ||
{ dataKey: 'city',title:'城市', width: 180,type:'select' ,options:{ | ||
'hz':'杭州', | ||
'bj':'北京', | ||
'sh':'上海', | ||
'ah':'安徽' | ||
}}, | ||
{ dataKey: 'name',title:"姓名",width: 200,type:"text"}, | ||
{ dataKey: 'email',title:"Email",width: 200,type:"text"}, | ||
{ dataKey: 'action1', title:'操作1', width:100, type:"action",actions:{ | ||
"增加": function(rowData) { | ||
me.refs.grid.addEmptyRow(); | ||
}, | ||
"删除": function(rowData) { | ||
me.refs.grid.delRow(rowData); | ||
} | ||
} | ||
} | ||
{ dataKey: 'check', title: '复选框', type: 'checkbox'}, | ||
{ dataKey: 'id', title: 'ID', width: 50,hidden:true}, | ||
{ dataKey: 'country', title:'国家国家国家国家', width: 200,ordered:true, type: "money", delimiter: ',', align: 'right'}, | ||
{ dataKey: 'country', title:'国家国家国家国家', width: 200,ordered:true, type: "money", delimiter: ','}, | ||
{ dataKey: 'country', title:'国家国家国家国家', width: 200,ordered:true, type: "money", delimiter: ','}, | ||
{ dataKey: 'country', title:'国家国家国家国家', width: 200,ordered:true, type: "money", delimiter: ','}, | ||
{ dataKey: 'country', title:'国家国家国家国家', width: 200,ordered:true, type: "money", delimiter: ','}, | ||
{ dataKey: 'country', title:'国家国家国家国家', width: 200,ordered:true, type: "money", delimiter: ','}, | ||
{ dataKey: 'country', title:'国家国家国家国家', width: 200,ordered:true, type: "money", delimiter: ','}, | ||
{ dataKey: 'country', title:'国家国家国家国家', width: 200,ordered:true, type: "money", delimiter: ','}, | ||
{ dataKey: 'country', title:'国家国家国家国家', width: 200,ordered:true, type: "money", delimiter: ','}, | ||
{ dataKey: 'country', title:'国家国家国家国家', width: 200,ordered:true, type: "money", delimiter: ','} | ||
]; | ||
if (me.state.showOtherColumn) { | ||
columns.push({ dataKey: 'city',title:'城市', width: 150}) | ||
} | ||
let renderProps={ | ||
height: 200, | ||
// height: 200, | ||
width: 800, | ||
showPager:false, | ||
fetchParams: {}, | ||
//fetchUrl:"http://demo.nwux.taobao.net/file/getGridJson.jsonp", | ||
// jsxdata: me.state.data, | ||
fetchUrl:"http://demo.nwux.taobao.net/file/getGridJson.jsonp", | ||
// fetchUrl: "http://10.1.159.52:3002/demo/data.json", | ||
jsxcolumns:columns, | ||
beforeFetch: (sendData) => {sendData.id = 1; return sendData;}, | ||
processData: (data) => {return data;} | ||
processData: (data) => {return data;}, | ||
rowSelection: rowSelection | ||
}; | ||
return (<Grid {...renderProps} ref="grid"/>); | ||
return ( | ||
<div> | ||
<Grid {...renderProps} ref="grid"/> | ||
<Button onClick={me.handleClick.bind(me)}>手动修改 column</Button> | ||
<Button onClick={me.handleChangeData.bind(me)}>手动修改 data</Button> | ||
</div> | ||
); | ||
} | ||
@@ -94,0 +173,0 @@ }; |
@@ -9,11 +9,11 @@ /** | ||
var Demo = require('./GridDemo'); | ||
// var Demo = require('./GridDemo'); | ||
var Demo2 = require('./GridEditDemo'); | ||
var Demo3 = require('./TreeGridDemo'); | ||
var Demo4 = require('./GridViewModeDemo'); | ||
//var Demo3 = require('./TreeGridDemo'); | ||
// var Demo4 = require('./GridViewModeDemo'); | ||
ReactDOM.render(<Demo />, document.getElementById('UXCoreDemo')); | ||
// ReactDOM.render(<Demo />, document.getElementById('UXCoreDemo')); | ||
ReactDOM.render(<Demo2 />, document.getElementById('UXCoreDemo2')); | ||
ReactDOM.render(<Demo3/>, document.getElementById('UXCoreDemo3')); | ||
ReactDOM.render(<Demo4/>, document.getElementById('UXCoreDemo4')); | ||
//ReactDOM.render(<Demo3/>, document.getElementById('UXCoreDemo3')); | ||
// ReactDOM.render(<Demo4/>, document.getElementById('UXCoreDemo4')); |
@@ -34,3 +34,3 @@ // https://github.com/gulpjs/gulp/tree/master/docs | ||
gulp.task('less_demo', function(cb) { | ||
gulp.src(['./src/*.less','./demo/**/*.less']) | ||
gulp.src(['./demo/**/*.less']) | ||
.pipe(sourcemaps.init()) | ||
@@ -37,0 +37,0 @@ .pipe(less()) |
@@ -5,2 +5,6 @@ # History | ||
# 1.1.4 | ||
`FIXED` fix issue #54 #55 #56 #57 #58 | ||
# 1.1.3 | ||
@@ -7,0 +11,0 @@ |
{ | ||
"name": "uxcore-table", | ||
"version": "1.1.3", | ||
"version": "1.1.4", | ||
"description": "table ui component for react", | ||
@@ -35,3 +35,6 @@ "repository": "https://github.com/uxcore/uxcore-table.git", | ||
"gulp-sourcemaps": "~1.5.2", | ||
"webpack": "^1.10.5" | ||
"webpack": "^1.10.5", | ||
"uxcore-kuma": "~1.2.1", | ||
"react": "^0.14.0" | ||
}, | ||
@@ -42,4 +45,2 @@ "dependencies": { | ||
"react-mixin": "~1.7.0", | ||
"react": "^0.14.0", | ||
"uxcore-kuma": "~1.0.6", | ||
"deepcopy": "~0.5.0", | ||
@@ -46,0 +47,0 @@ "uxcore-button": "~0.3.0", |
@@ -121,2 +121,3 @@ # uxcore-table | ||
|delimiter | optional | string | delimiter used in type 'money', 'card', 'cnmobile' formating| | ||
|align | optional | string | text-align, default: 'left' | | ||
@@ -123,0 +124,0 @@ |
@@ -151,3 +151,3 @@ /** | ||
} | ||
else if (_column.type=='action' && props.mode =='EDIT') { | ||
else if (_column.type=='action' && props.mode == Const.MODE.EDIT) { | ||
@@ -154,0 +154,0 @@ _v = <div className="action-container" onClick={this.doAction.bind(this,_v,_column.actions)}> |
@@ -59,3 +59,3 @@ /** | ||
if (props.mode !== Const.MODE.VIEW) { | ||
return ( <Select value={this.state.value} optionLabelProp="children" showSearch={false} style={{width:config.width-10}} onChange={this.handleChange.bind(this)}> | ||
return ( <Select value={this.state.value} optionLabelProp="children" showSearch={false} style={{width:config.width-20}} onChange={this.handleChange.bind(this)}> | ||
{ | ||
@@ -62,0 +62,0 @@ this.renderOptions(config).map(function(item){ |
@@ -170,4 +170,4 @@ /** | ||
_style={ | ||
width: props.width-_width-2, | ||
minWidth:props.width-_width-2 | ||
width: props.width-_width-3, | ||
minWidth:props.width-_width-3 | ||
} | ||
@@ -210,7 +210,7 @@ headerWrapClassName="kuma-uxtable-header-scroll"; | ||
else { | ||
_v = item.title; | ||
_v = <span title={item.title}>{item.title}</span>; | ||
} | ||
return <div key={index} className="kuma-uxtable-cell" style={_style}> | ||
<span>{_v}</span> | ||
{_v} | ||
{ctx.renderOrderIcon(item)} | ||
@@ -217,0 +217,0 @@ </div> |
@@ -13,2 +13,3 @@ /** | ||
let Pagination = require("uxcore-pagination"); | ||
let Const = require('uxcore-const'); | ||
let assign = require('object-assign'); | ||
@@ -23,3 +24,3 @@ let deepcopy = require('deepcopy'); | ||
this.uid=0; | ||
this.state= { | ||
this.state = { | ||
data: this.addJSXIdsForSD(deepcopy(this.props.jsxdata)), // checkbox 内部交互 | ||
@@ -46,6 +47,6 @@ columns: this.processColumn(), // column 内部交互 | ||
me.el = ReactDOM.findDOMNode(me); | ||
$(me.el).find(".kuma-uxtable-body-wrapper").on("scroll", function(e) { | ||
let scrollLeft = this.scrollLeft; | ||
$(me.el).find(".kuma-uxtable-header-wrapper")[0].scrollLeft = scrollLeft; | ||
}) | ||
// $(me.el).find(".kuma-uxtable-body-wrapper").on("scroll", function(e) { | ||
// let scrollLeft = this.scrollLeft; | ||
// $(me.el).find(".kuma-uxtable-header-wrapper")[0].scrollLeft = scrollLeft; | ||
// }) | ||
} | ||
@@ -57,2 +58,4 @@ | ||
if (!!nextProps.jsxdata && !!me.props.jsxdata && !me._isEqual(nextProps.jsxdata, me.props.jsxdata)) { | ||
// Data has changed, so uid which is used to mark the data should be reset. | ||
me.uid = 0; | ||
newData['data'] = me.addJSXIdsForSD(deepcopy(nextProps.jsxdata)); | ||
@@ -66,2 +69,5 @@ } | ||
} | ||
if (!!nextProps.jsxcolumns && !!me.props.jsxcolumns && !me._isEqual(nextProps.jsxcolumns, me.props.jsxcolumns)) { | ||
newData['columns'] = me.processColumn(nextProps) | ||
} | ||
me.setState(newData); | ||
@@ -73,3 +79,3 @@ | ||
let me = this; | ||
$(me.el).find(".kuma-uxtable-body-wrapper").off("scroll"); | ||
// $(me.el).find(".kuma-uxtable-body-wrapper").off("scroll"); | ||
} | ||
@@ -151,2 +157,4 @@ | ||
let me = this; | ||
// reset uid cause table data has changed | ||
me.uid = 0; | ||
@@ -227,6 +235,5 @@ // fetchUrl has the top priority. | ||
processColumn() { | ||
let props = this.props, | ||
me = this, | ||
processColumn(props) { | ||
props = props || this.props; | ||
let me = this, | ||
columns = deepcopy(props.jsxcolumns), | ||
@@ -695,3 +702,3 @@ hasCheckboxColumn = false; | ||
height:"auto", | ||
mode: "EDIT", | ||
mode: Const.MODE.EDIT, | ||
renderModel:'', | ||
@@ -723,3 +730,4 @@ levels:1, | ||
Grid.displayName = Grid; | ||
Grid.Constants = Const; | ||
module.exports = Grid; |
@@ -16,2 +16,7 @@ /** | ||
componentDidMount() { | ||
let uxtableBody= this.refs.uxtableBody; | ||
$(uxtableBody).on("scroll",this.onScroll.bind(this)) | ||
} | ||
renderEmptyData() { | ||
@@ -23,3 +28,3 @@ | ||
} | ||
return (<div className="kuma-gird-body-emptyword" style={_style}>暂无数据.</div>); | ||
return (<div className="kuma-uxtable-body-emptyword" style={_style}>暂无数据.</div>); | ||
} | ||
@@ -29,17 +34,18 @@ } | ||
onScroll(e) { | ||
if(this.props.fixedColumn=='no') { | ||
return ; | ||
// TODO: remove jquery animation | ||
// merge classname scroll/no/fixed | ||
if (this.props.fixedColumn=='no') { | ||
$('.kuma-uxtable-header-no').animate({scrollLeft: $('.kuma-uxtable-body-no').scrollLeft()}, 0) | ||
return; | ||
} | ||
if (this.resizeTimer) { | ||
clearTimeout(this.resizeTimer) | ||
let target= $(e.target); | ||
if(target.hasClass('kuma-uxtable-body-scroll')) { | ||
$('.kuma-uxtable-body-fixed').animate({scrollTop: $('.kuma-uxtable-body-scroll').scrollTop()}, 0) | ||
$('.kuma-uxtable-header-scroll').animate({scrollLeft: $('.kuma-uxtable-body-scroll').scrollLeft()}, 0) | ||
}else { | ||
$('.kuma-uxtable-body-scroll').animate({scrollTop: $('.kuma-uxtable-body-fixed').scrollTop()}, 0) | ||
} | ||
this.resizeTimer = setTimeout(function(){ | ||
let target= $(e.target); | ||
if(target.hasClass('kuma-uxtable-body-scroll')) { | ||
$('.kuma-uxtable-body-fixed').scrollTop($('.kuma-uxtable-body-scroll').scrollTop()); | ||
$('.kuma-uxtable-header-scroll').scrollLeft($('.kuma-uxtable-body-scroll').scrollLeft()); | ||
}else { | ||
$('.kuma-uxtable-body-scroll').scrollTop($('.kuma-uxtable-body-fixed').scrollTop()); | ||
} | ||
}, 0); | ||
} | ||
@@ -83,4 +89,4 @@ | ||
_style={ | ||
width: _props.width-_width-2, | ||
minWidth:_props.width-_width-2 | ||
width: _props.width-_width-3, //change 2 to 3, fix ie8 issue | ||
minWidth:_props.width-_width-3 | ||
} | ||
@@ -92,3 +98,3 @@ bodyWrapClassName="kuma-uxtable-body-scroll"; | ||
return ( | ||
<div className={bodyWrapClassName} style={_style} onScroll={this.onScroll.bind(this)}> | ||
<div className={bodyWrapClassName} ref="uxtableBody" style={_style} > | ||
<ul className={this.props.jsxprefixCls} > | ||
@@ -95,0 +101,0 @@ {this.renderEmptyData()} |
@@ -45,3 +45,3 @@ var fs = require('fs'); | ||
resolve: { | ||
// alias: getUxcoreModuleAlias() | ||
alias: getUxcoreModuleAlias() | ||
}, | ||
@@ -59,2 +59,2 @@ externals: { | ||
] | ||
}; | ||
}; |
{ | ||
"name": "uxcore-totop", | ||
"version": "0.0.0", | ||
"version": "0.1.1", | ||
"description": "uxcore-totop component for uxcore.", | ||
@@ -5,0 +5,0 @@ "repository": "https://github.com/uxcore/uxcore-totop.git", |
@@ -65,3 +65,3 @@ /** | ||
let me = this; | ||
me.scrollTo(document.body, me.props.to, me.props.duration); | ||
me.scrollTo((document.body.scrollTop != 0 ? document.body : document.documentElement), me.props.to, me.props.duration); | ||
} | ||
@@ -68,0 +68,0 @@ |
@@ -56,2 +56,6 @@ let Transfer = require('../src'); | ||
handleClick4() { | ||
this.refs.transfer.reset(); | ||
} | ||
render() { | ||
@@ -65,2 +69,3 @@ var me = this; | ||
<Button onClick={me.handleClick3.bind(me)}>更改 props</Button> | ||
<Button onClick={me.handleClick4.bind(me)}>重置</Button> | ||
</div> | ||
@@ -67,0 +72,0 @@ ); |
@@ -26,2 +26,3 @@ { | ||
"classnames": "^2.1.2", | ||
"deepcopy": "~0.5.0", | ||
"object-assign": "^2.0.0" | ||
@@ -31,3 +32,3 @@ }, | ||
"react": "~0.14.0", | ||
"uxcore-kuma": "~1.0.3", | ||
"uxcore-kuma": "~1.2.0", | ||
"uxcore-button": "~0.2.0", | ||
@@ -34,0 +35,0 @@ "babel-core": "^5.6.18", |
let classnames = require('classnames'); | ||
let update = React.addons.update; | ||
let deepcopy = require('deepcopy'); | ||
class Transfer extends React.Component { | ||
@@ -39,3 +40,3 @@ constructor(props){ | ||
let me = this; | ||
let data = update(me.state, {}); | ||
let data = deepcopy(this.state); | ||
data.chosen.forEach((item, index) => { | ||
@@ -54,2 +55,10 @@ if (arr.indexOf(item.value) != -1) { | ||
reset() { | ||
let me = this; | ||
me.setState({ | ||
chosen: me.props.data.filter(function(item) {return !!item.chosen}), | ||
unChosen: me.props.data.filter(function(item) {return !item.chosen}) | ||
}); | ||
} | ||
locateItem(value, position) { | ||
@@ -142,3 +151,3 @@ let data = me.state[position]; | ||
let isChosen = JSON.parse(target.getAttribute('data-chosen')); | ||
let newData = update(me.state[isChosen ? 'chosen' : 'unChosen'], {}); | ||
let newData = deepcopy(me.state[isChosen ? 'chosen' : 'unChosen']); | ||
newData[key].selected = !newData[key].selected; | ||
@@ -156,4 +165,4 @@ let newState = {}; | ||
if (target.className.indexOf('enable') == -1) return; | ||
let oldChosen = update(me.state['chosen'], {}); | ||
let oldUnChosen = update(me.state['unChosen'], {}); | ||
let oldChosen = deepcopy(me.state['chosen']); | ||
let oldUnChosen = deepcopy(me.state['unChosen']); | ||
let newChosen = []; | ||
@@ -160,0 +169,0 @@ let newUnChosen = []; |
@@ -5,2 +5,4 @@ import React from 'react'; | ||
console.log(Tree, TreeNode) | ||
function handleSelect(e) { | ||
@@ -17,3 +19,3 @@ console.log(e.event, e.node, 'selected:', e.selected); | ||
super(props); | ||
['handleClick'].forEach((m)=> { | ||
['handleClick', 'handleCheck', 'handleSelect'].forEach((m)=> { | ||
this[m] = this[m].bind(this); | ||
@@ -32,2 +34,16 @@ }); | ||
} | ||
handleCheck(info) { | ||
console.log('check: ', info); | ||
this.setState({ | ||
checkedKeys: ['p21'], | ||
selectedKeys: ['p1', 'p21'] | ||
}); | ||
} | ||
handleSelect(info) { | ||
console.log('selected: ', info); | ||
this.setState({ | ||
checkedKeys: ['p21'], | ||
selectedKeys: ['p21'] | ||
}); | ||
} | ||
render() { | ||
@@ -38,4 +54,4 @@ return <div> | ||
<Tree showLine={true} defaultExpandAll={true} checkable={true} | ||
onCheck={handleCheck} defaultCheckedKeys={['p1', 'p22']} checkedKeys={this.state.checkedKeys} | ||
defaultSelectedKeys={['p11']} selectedKeys={this.state.selectedKeys} multiple> | ||
onCheck={this.handleCheck} defaultCheckedKeys={['p1', 'p22']} checkedKeys={this.state.checkedKeys} | ||
onSelect={this.handleSelect} defaultSelectedKeys={['p11']} selectedKeys={this.state.selectedKeys} multiple> | ||
<TreeNode title="parent 1" key="p1"> | ||
@@ -42,0 +58,0 @@ <TreeNode key="p10" title="leaf"/> |
@@ -5,2 +5,8 @@ # History | ||
## 0.1.7 | ||
`FIXED` error in ie | ||
## 0.1.6 | ||
`UPGRADE` update to rc-tree@0.18.1 | ||
## 0.1.4 | ||
@@ -7,0 +13,0 @@ |
{ | ||
"name": "uxcore-tree", | ||
"version": "0.1.4", | ||
"version": "0.1.7", | ||
"description": "uxcore-tree ui component for react", | ||
@@ -43,3 +43,3 @@ "main": "src/index.js", | ||
"object-assign": "^2.0.0", | ||
"rc-tree": "~0.16.1", | ||
"rc-tree": "^0.18.1", | ||
"rc-util": "~2.0.3" | ||
@@ -46,0 +46,0 @@ }, |
@@ -45,5 +45,9 @@ # uxcore-tree | ||
|defaultCheckedKeys | default checked treeNodes | String[] | [] | | ||
|checkedKeys | Controlled checked treeNodes(After setting, defaultCheckedKeys will not work) | String[] | [] | | ||
|defaultSelectedKeys | default selected treeNodes | String[] | [] | | ||
|selectedKeys | Controlled selected treeNodes(After setting, defaultSelectedKeys will not work) | String[] | [] | | ||
|onCheck | click the treeNode/checkbox to fire | function(e:{checked:bool,node,checkedKeys,event}) | - | | ||
|onSelect | click the treeNode to fire | function(e:{selected:bool,node,checkedKeys,event}) | - | | ||
|onDataLoaded | load data asynchronously and the return value should be a promise | function(node) | - | | ||
|onRightClick | select current treeNode and show customized contextmenu | function({event,node}) | - | | ||
@@ -50,0 +54,0 @@ ### TreeNode props |
@@ -1,8 +0,5 @@ | ||
import React from 'react'; | ||
import assign from 'object-assign'; | ||
import RcTree from 'rc-tree'; | ||
import {classSet} from 'rc-util'; | ||
const RcTreeNode = RcTree.TreeNode; | ||
export default class Tree extends RcTree { | ||
class Tree extends RcTree { | ||
constructor(props){ | ||
@@ -12,17 +9,11 @@ super(props); | ||
} | ||
Tree.displayName = 'uxcore-tree'; | ||
Tree.displayName = 'Tree'; | ||
Tree.propTypes = RcTree.propTypes; | ||
assign(RcTree.defaultProps, { | ||
prefixCls: 'kuma-tree', | ||
showIcon: false | ||
Tree.defaultProps = assign(RcTree.defaultProps, { | ||
prefixCls: 'kuma-tree', | ||
showIcon: false | ||
}); | ||
export class TreeNode extends RcTreeNode { | ||
constructor(props){ | ||
super(props); | ||
} | ||
} | ||
TreeNode.displayName = 'uxcore-treenode'; | ||
TreeNode.propTypes = RcTreeNode.propTypes; | ||
assign(RcTreeNode.defaultProps, { | ||
}); | ||
Tree.TreeNode = RcTree.TreeNode; | ||
export default Tree; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
4325089
46254