New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
dragon-ui
Advanced tools
dragon-ui - npm Package Compare versions
Comparing version 0.0.24 to 0.0.25
| import React, { Component, PropTypes } from 'react'; | ||
| import classnames from 'classnames'; | ||
| import addEndEventListener from '../utils/animationEvents'; | ||
| class Dropdown extends Component { | ||
| // constructor(props) { | ||
| // super(props); | ||
| // this.state = { | ||
| // isShow : false, | ||
| // animationState : 'leave', | ||
| // }; | ||
| // } | ||
| // componentDidMount() { | ||
| // this.animationEvents = addEndEventListener(this.refs.dropdown, this.animationEnd.bind(this)); | ||
| // if (this.props.visible) { | ||
| // this.enter(); | ||
| // } | ||
| // } | ||
| // componentWillUnmount() { | ||
| // if (this.animationEvents) { | ||
| // this.animationEvents.remove(); | ||
| // } | ||
| // } | ||
| // componentWillReceiveProps(nextProps) { | ||
| // if (!this.props.visible && nextProps.visible) { | ||
| // this.enter(); | ||
| // } else if (this.props.visible && !nextProps.visible) { | ||
| // this.leave(); | ||
| // } | ||
| // } | ||
| // shouldComponentUpdate(nextProps, nextState) { | ||
| // return !!(this.state.isShow || nextState.isShow); | ||
| // } | ||
| render () { | ||
| const { visible, className, children, ...others } = this.props; | ||
| // const { isShow, animationState } = this.state; | ||
| const cls = classnames({ | ||
| 'ui-dropdown' : true, | ||
| 'ui-dropdown-hidden': !visible, | ||
| // [`scaleDown-${animationState}`]: true, | ||
| [className] : !!className | ||
| }); | ||
| return <div {...others} className={cls} ref="dropdown">{children}</div>; | ||
| } | ||
| // animationEnd(e) { | ||
| // let node = this.refs.dialog; | ||
| // if (e && e.target !== node) { | ||
| // return; | ||
| // } | ||
| // if (this.state.animationState === 'leave') { | ||
| // this.setState({ | ||
| // isShow: false | ||
| // }); | ||
| // } | ||
| // } | ||
| // enter() { | ||
| // this.setState({ | ||
| // isShow: true, | ||
| // animationState: 'enter', | ||
| // }); | ||
| // } | ||
| // leave() { | ||
| // if (this.animationEvents) { | ||
| // this.setState({ | ||
| // animationState: 'leave', | ||
| // }); | ||
| // } else { | ||
| // this.setState({ | ||
| // isShow: false, | ||
| // }) | ||
| // } | ||
| // } | ||
| } | ||
| export default Dropdown; | ||
| import Dropdown from './Dropdown'; | ||
| export default Dropdown; |
@@ -24,2 +24,5 @@ | ||
| export Panel from './Panel'; | ||
| export Step from './Step'; | ||
| export Step from './Step'; | ||
| export Calendar from './Calendar'; | ||
| export DatePicker from './DatePicker'; | ||
| export Tooltip from './Tooltip'; |
| import React, { Component, PropTypes } from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import classnames from 'classnames'; | ||
| import * as Events from '../utils/events'; | ||
| import Events from '../utils/events'; | ||
| import isNodeInTree from '../utils/isNodeInTree'; | ||
| import Option from './Option'; | ||
@@ -28,2 +30,10 @@ import Dropdown from '../Dropdown'; | ||
| componentWillMount() { | ||
| this.unbindOuterHandlers(); | ||
| } | ||
| componentWillUnmount() { | ||
| this.unbindOuterHandlers(); | ||
| } | ||
| render () { | ||
@@ -90,36 +100,59 @@ const props = this.props; | ||
| onClose() { | ||
| // console.log('close'); | ||
| onSelectClick(e) { | ||
| e.preventDefault(); | ||
| this.setDropdown(!this.state.dropdown); | ||
| } | ||
| onOptionChange(e, props, index) { | ||
| if ('disabled' in props) { | ||
| return; | ||
| } | ||
| this.setState({ | ||
| dropdown: false, | ||
| value: props.value, | ||
| }, () => { | ||
| const selected = { | ||
| index: index, | ||
| value: props.value, | ||
| text : props.children, | ||
| } | ||
| this.setDropdown(false, this.props.onChange(selected)); | ||
| }); | ||
| Events.off(document.body, 'click', () => this.onClose()); | ||
| } | ||
| onSelectClick(e) { | ||
| // console.log('open'); | ||
| setDropdown(isOpen, callback) { | ||
| if (isOpen) { | ||
| this.bindOuterHandlers(); | ||
| } else { | ||
| this.unbindOuterHandlers(); | ||
| } | ||
| this.setState({ | ||
| dropdown: !this.state.dropdown, | ||
| dropdown: isOpen | ||
| }, () => { | ||
| callback && callback(); | ||
| }); | ||
| Events.on(document.body, 'click', () => this.onClose()); | ||
| } | ||
| onOptionChange(e, props, index) { | ||
| handleKeyup(e) { | ||
| (e.keyCode === 27) && this.setDropdown(false); | ||
| } | ||
| handleOuterClick(e) { | ||
| e.preventDefault(); | ||
| if (this.state.value === props.value) return; | ||
| this.setState({ | ||
| value: props.value, | ||
| }); | ||
| const selected = { | ||
| index: index, | ||
| value: props.value, | ||
| text : props.children, | ||
| if (isNodeInTree(e.target, ReactDOM.findDOMNode(this))) { | ||
| return false; | ||
| } | ||
| this.setDropdown(false); | ||
| } | ||
| this.props.onChange(selected); | ||
| bindOuterHandlers() { | ||
| Events.on(document, 'click', (e) => this.handleOuterClick(e)); | ||
| Events.on(document, 'keyup', (e) => this.handleKeyup(e)); | ||
| } | ||
| unbindOuterHandlers() { | ||
| Events.off(document, 'click', (e) => this.handleOuterClick(e)); | ||
| Events.off(document, 'keyup', (e) => this.handleKeyup(e)); | ||
| } | ||
| } | ||
@@ -126,0 +159,0 @@ |
@@ -6,2 +6,3 @@ | ||
| import Checkbox from '../Checkbox'; | ||
| // import TableSorter from './TableSorter'; | ||
@@ -13,3 +14,4 @@ class Table extends Component { | ||
| this.state = { | ||
| selectedRows : [], | ||
| selectedRows: [], | ||
| sort : {}, | ||
| }; | ||
@@ -109,17 +111,58 @@ } | ||
| renderColumn(column, index) { | ||
| if ('columnRender' in column) | ||
| return <th key={index} width={column.width}>{column.columnRender(column, index)}</th>; | ||
| else | ||
| return <th key={index} width={column.width}>{column.title}</th>; | ||
| let render = ('columnRender' in column) | ||
| ? column.columnRender(column, index) | ||
| : column.title; | ||
| return ( | ||
| <th key={index} width={column.width}> | ||
| {render} | ||
| {this.renderSorter(column)} | ||
| </th> | ||
| ); | ||
| } | ||
| // 排序渲染 | ||
| renderSorter(column) { | ||
| const sort = this.state.sort[column.dataIndex]; | ||
| const sortUpCls = classnames({ | ||
| 'ui-table-sorter-up' : true, | ||
| 'ui-table-sorter-active': !!sort, | ||
| }), | ||
| sortDownCls = classnames({ | ||
| 'ui-table-sorter-down' : true, | ||
| 'ui-table-sorter-active': (sort !== undefined) && !sort, | ||
| }); | ||
| return column.sorter ? ( | ||
| <span className="ui-table-sorter" onClick={() => this.onSort(column)}> | ||
| <span className={sortUpCls}></span> | ||
| <span className={sortDownCls}></span> | ||
| </span> | ||
| ) : null; | ||
| } | ||
| // 单元格渲染 | ||
| renderCell(column, row, rowIndex) { | ||
| const value = row[column.dataIndex]; | ||
| const render = ('render' in column) | ||
| ? column.render(value, row, rowIndex) | ||
| : value; | ||
| if ('render' in column) | ||
| return <td key={column.dataIndex}>{column.render(value, row, rowIndex)}</td>; | ||
| else | ||
| return <td key={column.dataIndex}>{value}</td>; | ||
| return <td key={column.dataIndex}>{render}</td>; | ||
| } | ||
| onSort(column) { | ||
| const { dataSource } = this.props; | ||
| const sort = !this.state.sort[column.dataIndex]; | ||
| sort ? dataSource.sort(column.sorter) | ||
| : dataSource.reverse(column.sorter); | ||
| this.setState({ | ||
| dataSource, | ||
| sort: { | ||
| [`${column.dataIndex}`]: sort, | ||
| } | ||
| }); | ||
| } | ||
| } | ||
@@ -126,0 +169,0 @@ |
| "use strict"; | ||
| export function on (el, type, callback) { | ||
| if(el.addEventListener) { | ||
| el.addEventListener(type, callback); | ||
| } else { | ||
| el.attachEvent('on' + type, function() { | ||
| callback.call(el); | ||
| }); | ||
| } | ||
| } | ||
| module.exports = { | ||
| export function off (el, type, callback) { | ||
| if(el.removeEventListener) { | ||
| el.removeEventListener(type, callback); | ||
| } else { | ||
| el.detachEvent('on' + type, callback); | ||
| } | ||
| } | ||
| on: function (el, type, callback) { | ||
| if(el.addEventListener) { | ||
| el.addEventListener(type, callback); | ||
| } else { | ||
| el.attachEvent('on' + type, function() { | ||
| callback.call(el); | ||
| }); | ||
| } | ||
| }, | ||
| export function once (el, type, callback) { | ||
| let typeArray = type.split(' '); | ||
| let recursiveFunction = function(e){ | ||
| e.target.removeEventListener(e.type, recursiveFunction); | ||
| return callback(e); | ||
| }; | ||
| off: function (el, type, callback) { | ||
| if(el.removeEventListener) { | ||
| el.removeEventListener(type, callback); | ||
| } else { | ||
| el.detachEvent('off' + type, callback); | ||
| } | ||
| }, | ||
| once: function (el, type, callback) { | ||
| let typeArray = type.split(' '); | ||
| let recursiveFunction = function(e){ | ||
| e.target.removeEventListener(e.type, recursiveFunction); | ||
| return callback(e); | ||
| }; | ||
| for (let i = typeArray.length - 1; i >= 0; i--) { | ||
| on(el, typeArray[i], recursiveFunction); | ||
| for (let i = typeArray.length - 1; i >= 0; i--) { | ||
| on(el, typeArray[i], recursiveFunction); | ||
| } | ||
| } | ||
| } | ||
| } |
@@ -29,3 +29,6 @@ | ||
| Panel, | ||
| Step | ||
| Step, | ||
| DatePicker, | ||
| Calendar, | ||
| Tooltip | ||
| } from '../../components'; | ||
@@ -37,8 +40,2 @@ | ||
| let index = 0; | ||
| const dataSource = [ | ||
| {id: '1', name: '张三', dept: '直营部', address: '上海市杨浦区四平路324号', state: true}, | ||
| {id: '2', name: '李四', dept: '健康险事业部', age: 32, state: true}, | ||
| {id: '3', name: '王五', dept: '金融信保部', age: 20, address: '上海市浦东区张杨路1400号', state: false}, | ||
| ]; | ||
| class Page1 extends Component { | ||
@@ -49,2 +46,9 @@ | ||
| this.state = { | ||
| dataSource: [ | ||
| {id: '1', name: '张三', dept: '直营部', age: 46, address: '上海市杨浦区四平路324号', state: true}, | ||
| {id: '2', name: '李四', dept: '健康险事业部', age: 32, address: 'wda', state: true}, | ||
| {id: '3', name: '王五', dept: '金融信保部', age: 20, address: '上海市浦东区张杨路1400号', state: false}, | ||
| {id: '4', name: '奥巴马', dept: '健康险事业部', age: 45, address: '美国洛杉矶', state: false}, | ||
| ], | ||
| modal : false, | ||
@@ -66,4 +70,4 @@ confirm : false, | ||
| tableSelection : [], | ||
| tableLoading : false, | ||
| tableSelection: [], | ||
| tableLoading : false, | ||
@@ -73,2 +77,5 @@ currentPage : 4, | ||
| inputPage : 4, | ||
| username : '45678', | ||
| date : '', | ||
| }; | ||
@@ -215,2 +222,18 @@ } | ||
| <Form.Item | ||
| label="文字提示" | ||
| labelCol="col-sm-2" | ||
| controlCol="col-sm-10"> | ||
| { | ||
| ['left', 'right', 'top', 'bottom', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'].map((item, index) => { | ||
| let title = '这是一个' + item + '的Tooltip'; | ||
| return ( | ||
| <Tooltip key={index} title={title} direction={item} style={{width: 200}}> | ||
| <Button>{item}</Button> | ||
| </Tooltip> | ||
| ); | ||
| }) | ||
| } | ||
| </Form.Item> | ||
| <Form.Item | ||
| label="面包屑" | ||
@@ -287,2 +310,14 @@ labelCol="col-sm-2" | ||
| <Switch /> 普通开关 | ||
| <br /> | ||
| <Switch isCheckedText={<Icon type="check" />} unCheckedText={<Icon type="close" />} /> 图标开关 | ||
| <br /> | ||
| <Switch defaultValue={true} /> 设定默认值为true | ||
| <br /> | ||
| <Switch isCheckedText="是" unCheckedText="否" disabled /> 禁用状态 | ||
| <br /> | ||
| <Switch size="sm" value={this.state.switchValue} onChange={(value) => { | ||
| this.setState({ | ||
| switchValue: value, | ||
| }); | ||
| }} /> 小开关 | ||
| </Form.Item> | ||
@@ -368,2 +403,20 @@ | ||
| <Form.Item | ||
| label="日历" | ||
| labelCol="col-sm-2" | ||
| controlCol="col-sm-10"> | ||
| <Calendar style={{display: 'inline-block'}} onDateClick={(date) => { | ||
| console.log(date) | ||
| }} />（未完待续） | ||
| </Form.Item> | ||
| <Form.Item | ||
| label="日期选择器" | ||
| labelCol="col-sm-2" | ||
| controlCol="col-sm-10"> | ||
| <DatePicker style={{width: 120}} value={this.state.date} placeholder="请选择日期" onDateClick={(date) => { | ||
| this.setState({date}); | ||
| }} />（未完待续） | ||
| </Form.Item> | ||
| <Form.Item | ||
| label="模态框" | ||
@@ -468,4 +521,10 @@ labelCol="col-sm-2" | ||
| isLoading={this.state.tableLoading} | ||
| dataSource={dataSource} | ||
| dataSource={this.state.dataSource} | ||
| columns={[{ | ||
| dataIndex: 'id', | ||
| width: 50, | ||
| render: (value, row, index) => { | ||
| return index + 1; | ||
| } | ||
| },{ | ||
| title: '姓名', | ||
@@ -476,5 +535,7 @@ dataIndex: 'name', | ||
| return <a href="javascript:;">{value}</a>; | ||
| }, | ||
| sorter: (a, b) => { | ||
| return a.name.localeCompare(b.name); | ||
| } | ||
| }, | ||
| { | ||
| },{ | ||
| title: '部门', | ||
@@ -492,5 +553,7 @@ dataIndex: 'dept', | ||
| ); | ||
| }, | ||
| sorter: (a, b) => { | ||
| return a.dept.localeCompare(b.dept); | ||
| } | ||
| }, | ||
| { | ||
| },{ | ||
| title: '年龄', | ||
@@ -500,11 +563,14 @@ dataIndex: 'age', | ||
| render: (value, row, index) => { | ||
| if (index === 2) { | ||
| return <Input size="sm" style={{width: 40}} defaultValue={value} maxLength="3" />; | ||
| } else { | ||
| return value; | ||
| } | ||
| return <Input size="sm" style={{width: 40}} defaultValue={value} value={value} maxLength="3" onChange={(e) => { | ||
| let dataSource = this.state.dataSource; | ||
| dataSource[index].age = e.target.value; | ||
| this.setState({dataSource}); | ||
| }}/>; | ||
| }, | ||
| sorter: (a, b) => { | ||
| return a.age - b.age; | ||
| } | ||
| },{ | ||
| title: '住址', | ||
| dataIndex: 'address', | ||
| dataIndex: 'address' | ||
| },{ | ||
@@ -515,3 +581,6 @@ title: '状态', | ||
| render: (value, row, index) => { | ||
| return <Switch size="sm" defaultValue={value} />; | ||
| return <Switch size="sm" value={value} />; | ||
| }, | ||
| sorter: (a, b) => { | ||
| return a.state - b.state; | ||
| } | ||
@@ -534,3 +603,4 @@ },{ | ||
| onSelect: (selected, row, selectedRows) => { | ||
| console.log(selected, row, selectedRows) | ||
| console.log(selected, row, selectedRows); | ||
| }, | ||
@@ -537,0 +607,0 @@ onSelectAll: (selected, selectedRows) => { |
@@ -7,136 +7,9 @@ 'use strict'; | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | ||
| var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
| function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } | ||
| var _Dropdown = require('./Dropdown'); | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| var _Dropdown2 = _interopRequireDefault(_Dropdown); | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
| var _react = require('react'); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _classnames2 = require('classnames'); | ||
| var _classnames3 = _interopRequireDefault(_classnames2); | ||
| var _utilsAnimationEvents = require('../utils/animationEvents'); | ||
| var _utilsAnimationEvents2 = _interopRequireDefault(_utilsAnimationEvents); | ||
| var Dropdown = (function (_Component) { | ||
| _inherits(Dropdown, _Component); | ||
| function Dropdown() { | ||
| _classCallCheck(this, Dropdown); | ||
| _get(Object.getPrototypeOf(Dropdown.prototype), 'constructor', this).apply(this, arguments); | ||
| } | ||
| _createClass(Dropdown, [{ | ||
| key: 'render', | ||
| // constructor(props) { | ||
| // super(props); | ||
| // this.state = { | ||
| // isShow : false, | ||
| // animationState : 'leave', | ||
| // }; | ||
| // } | ||
| // componentDidMount() { | ||
| // this.animationEvents = addEndEventListener(this.refs.dropdown, this.animationEnd.bind(this)); | ||
| // if (this.props.visible) { | ||
| // this.enter(); | ||
| // } | ||
| // } | ||
| // componentWillUnmount() { | ||
| // if (this.animationEvents) { | ||
| // this.animationEvents.remove(); | ||
| // } | ||
| // } | ||
| // componentWillReceiveProps(nextProps) { | ||
| // if (!this.props.visible && nextProps.visible) { | ||
| // this.enter(); | ||
| // } else if (this.props.visible && !nextProps.visible) { | ||
| // this.leave(); | ||
| // } | ||
| // } | ||
| // shouldComponentUpdate(nextProps, nextState) { | ||
| // return !!(this.state.isShow || nextState.isShow); | ||
| // } | ||
| value: function render() { | ||
| var _props = this.props; | ||
| var visible = _props.visible; | ||
| var className = _props.className; | ||
| var children = _props.children; | ||
| var others = _objectWithoutProperties(_props, ['visible', 'className', 'children']); | ||
| // const { isShow, animationState } = this.state; | ||
| var cls = (0, _classnames3['default'])(_defineProperty({ | ||
| 'ui-dropdown': true, | ||
| 'ui-dropdown-hidden': !visible | ||
| }, className, !!className)); | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| _extends({}, others, { className: cls, ref: 'dropdown' }), | ||
| children | ||
| ); | ||
| } | ||
| // animationEnd(e) { | ||
| // let node = this.refs.dialog; | ||
| // if (e && e.target !== node) { | ||
| // return; | ||
| // } | ||
| // if (this.state.animationState === 'leave') { | ||
| // this.setState({ | ||
| // isShow: false | ||
| // }); | ||
| // } | ||
| // } | ||
| // enter() { | ||
| // this.setState({ | ||
| // isShow: true, | ||
| // animationState: 'enter', | ||
| // }); | ||
| // } | ||
| // leave() { | ||
| // if (this.animationEvents) { | ||
| // this.setState({ | ||
| // animationState: 'leave', | ||
| // }); | ||
| // } else { | ||
| // this.setState({ | ||
| // isShow: false, | ||
| // }) | ||
| // } | ||
| // } | ||
| }]); | ||
| return Dropdown; | ||
| })(_react.Component); | ||
| exports['default'] = Dropdown; | ||
| module.exports = exports['default']; | ||
| // [`scaleDown-${animationState}`]: true, | ||
| exports['default'] = _Dropdown2['default']; | ||
| module.exports = exports['default']; |
@@ -145,2 +145,20 @@ 'use strict'; | ||
| exports.Step = _Step3['default']; | ||
| exports.Step = _Step3['default']; | ||
| var _Calendar2 = require('./Calendar'); | ||
| var _Calendar3 = _interopRequireDefault(_Calendar2); | ||
| exports.Calendar = _Calendar3['default']; | ||
| var _DatePicker2 = require('./DatePicker'); | ||
| var _DatePicker3 = _interopRequireDefault(_DatePicker2); | ||
| exports.DatePicker = _DatePicker3['default']; | ||
| var _Tooltip2 = require('./Tooltip'); | ||
| var _Tooltip3 = _interopRequireDefault(_Tooltip2); | ||
| exports.Tooltip = _Tooltip3['default']; |
@@ -13,4 +13,2 @@ 'use strict'; | ||
| function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } } | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | ||
@@ -30,2 +28,6 @@ | ||
| var _reactDom = require('react-dom'); | ||
| var _reactDom2 = _interopRequireDefault(_reactDom); | ||
| var _classnames2 = require('classnames'); | ||
@@ -37,4 +39,8 @@ | ||
| var Events = _interopRequireWildcard(_utilsEvents); | ||
| var _utilsEvents2 = _interopRequireDefault(_utilsEvents); | ||
| var _utilsIsNodeInTree = require('../utils/isNodeInTree'); | ||
| var _utilsIsNodeInTree2 = _interopRequireDefault(_utilsIsNodeInTree); | ||
| var _Option = require('./Option'); | ||
@@ -79,2 +85,12 @@ | ||
| }, { | ||
| key: 'componentWillMount', | ||
| value: function componentWillMount() { | ||
| this.unbindOuterHandlers(); | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| this.unbindOuterHandlers(); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
@@ -162,46 +178,79 @@ value: function render() { | ||
| }, { | ||
| key: 'onClose', | ||
| value: function onClose() { | ||
| key: 'onSelectClick', | ||
| value: function onSelectClick(e) { | ||
| e.preventDefault(); | ||
| this.setDropdown(!this.state.dropdown); | ||
| } | ||
| }, { | ||
| key: 'onOptionChange', | ||
| value: function onOptionChange(e, props, index) { | ||
| var _this2 = this; | ||
| // console.log('close'); | ||
| if ('disabled' in props) { | ||
| return; | ||
| } | ||
| this.setState({ | ||
| dropdown: false | ||
| value: props.value | ||
| }, function () { | ||
| var selected = { | ||
| index: index, | ||
| value: props.value, | ||
| text: props.children | ||
| }; | ||
| _this2.setDropdown(false, _this2.props.onChange(selected)); | ||
| }); | ||
| Events.off(document.body, 'click', function () { | ||
| return _this2.onClose(); | ||
| } | ||
| }, { | ||
| key: 'setDropdown', | ||
| value: function setDropdown(isOpen, callback) { | ||
| if (isOpen) { | ||
| this.bindOuterHandlers(); | ||
| } else { | ||
| this.unbindOuterHandlers(); | ||
| } | ||
| this.setState({ | ||
| dropdown: isOpen | ||
| }, function () { | ||
| callback && callback(); | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'onSelectClick', | ||
| value: function onSelectClick(e) { | ||
| key: 'handleKeyup', | ||
| value: function handleKeyup(e) { | ||
| e.keyCode === 27 && this.setDropdown(false); | ||
| } | ||
| }, { | ||
| key: 'handleOuterClick', | ||
| value: function handleOuterClick(e) { | ||
| e.preventDefault(); | ||
| if ((0, _utilsIsNodeInTree2['default'])(e.target, _reactDom2['default'].findDOMNode(this))) { | ||
| return false; | ||
| } | ||
| this.setDropdown(false); | ||
| } | ||
| }, { | ||
| key: 'bindOuterHandlers', | ||
| value: function bindOuterHandlers() { | ||
| var _this3 = this; | ||
| // console.log('open'); | ||
| this.setState({ | ||
| dropdown: !this.state.dropdown | ||
| _utilsEvents2['default'].on(document, 'click', function (e) { | ||
| return _this3.handleOuterClick(e); | ||
| }); | ||
| Events.on(document.body, 'click', function () { | ||
| return _this3.onClose(); | ||
| _utilsEvents2['default'].on(document, 'keyup', function (e) { | ||
| return _this3.handleKeyup(e); | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'onOptionChange', | ||
| value: function onOptionChange(e, props, index) { | ||
| e.preventDefault(); | ||
| if (this.state.value === props.value) return; | ||
| key: 'unbindOuterHandlers', | ||
| value: function unbindOuterHandlers() { | ||
| var _this4 = this; | ||
| this.setState({ | ||
| value: props.value | ||
| _utilsEvents2['default'].off(document, 'click', function (e) { | ||
| return _this4.handleOuterClick(e); | ||
| }); | ||
| var selected = { | ||
| index: index, | ||
| value: props.value, | ||
| text: props.children | ||
| }; | ||
| this.props.onChange(selected); | ||
| _utilsEvents2['default'].off(document, 'keyup', function (e) { | ||
| return _this4.handleKeyup(e); | ||
| }); | ||
| } | ||
@@ -208,0 +257,0 @@ }]); |
@@ -37,2 +37,4 @@ 'use strict'; | ||
| // import TableSorter from './TableSorter'; | ||
| var Table = (function (_Component) { | ||
@@ -46,3 +48,4 @@ _inherits(Table, _Component); | ||
| this.state = { | ||
| selectedRows: [] | ||
| selectedRows: [], | ||
| sort: {} | ||
| }; | ||
@@ -180,13 +183,38 @@ } | ||
| value: function renderColumn(column, index) { | ||
| if ('columnRender' in column) return _react2['default'].createElement( | ||
| var render = 'columnRender' in column ? column.columnRender(column, index) : column.title; | ||
| return _react2['default'].createElement( | ||
| 'th', | ||
| { key: index, width: column.width }, | ||
| column.columnRender(column, index) | ||
| );else return _react2['default'].createElement( | ||
| 'th', | ||
| { key: index, width: column.width }, | ||
| column.title | ||
| render, | ||
| this.renderSorter(column) | ||
| ); | ||
| } | ||
| // 排序渲染 | ||
| }, { | ||
| key: 'renderSorter', | ||
| value: function renderSorter(column) { | ||
| var _this4 = this; | ||
| var sort = this.state.sort[column.dataIndex]; | ||
| var sortUpCls = (0, _classnames3['default'])({ | ||
| 'ui-table-sorter-up': true, | ||
| 'ui-table-sorter-active': !!sort | ||
| }), | ||
| sortDownCls = (0, _classnames3['default'])({ | ||
| 'ui-table-sorter-down': true, | ||
| 'ui-table-sorter-active': sort !== undefined && !sort | ||
| }); | ||
| return column.sorter ? _react2['default'].createElement( | ||
| 'span', | ||
| { className: 'ui-table-sorter', onClick: function () { | ||
| return _this4.onSort(column); | ||
| } }, | ||
| _react2['default'].createElement('span', { className: sortUpCls }), | ||
| _react2['default'].createElement('span', { className: sortDownCls }) | ||
| ) : null; | ||
| } | ||
| // 单元格渲染 | ||
@@ -197,13 +225,24 @@ }, { | ||
| var value = row[column.dataIndex]; | ||
| var render = 'render' in column ? column.render(value, row, rowIndex) : value; | ||
| if ('render' in column) return _react2['default'].createElement( | ||
| return _react2['default'].createElement( | ||
| 'td', | ||
| { key: column.dataIndex }, | ||
| column.render(value, row, rowIndex) | ||
| );else return _react2['default'].createElement( | ||
| 'td', | ||
| { key: column.dataIndex }, | ||
| value | ||
| render | ||
| ); | ||
| } | ||
| }, { | ||
| key: 'onSort', | ||
| value: function onSort(column) { | ||
| var dataSource = this.props.dataSource; | ||
| var sort = !this.state.sort[column.dataIndex]; | ||
| sort ? dataSource.sort(column.sorter) : dataSource.reverse(column.sorter); | ||
| this.setState({ | ||
| dataSource: dataSource, | ||
| sort: _defineProperty({}, '' + column.dataIndex, sort) | ||
| }); | ||
| } | ||
| }]); | ||
@@ -210,0 +249,0 @@ |
| "use strict"; | ||
| Object.defineProperty(exports, '__esModule', { | ||
| value: true | ||
| }); | ||
| exports.on = on; | ||
| exports.off = off; | ||
| exports.once = once; | ||
| module.exports = { | ||
| function on(el, type, callback) { | ||
| if (el.addEventListener) { | ||
| el.addEventListener(type, callback); | ||
| } else { | ||
| el.attachEvent('on' + type, function () { | ||
| callback.call(el); | ||
| }); | ||
| } | ||
| } | ||
| on: function on(el, type, callback) { | ||
| if (el.addEventListener) { | ||
| el.addEventListener(type, callback); | ||
| } else { | ||
| el.attachEvent('on' + type, function () { | ||
| callback.call(el); | ||
| }); | ||
| } | ||
| }, | ||
| function off(el, type, callback) { | ||
| if (el.removeEventListener) { | ||
| el.removeEventListener(type, callback); | ||
| } else { | ||
| el.detachEvent('on' + type, callback); | ||
| } | ||
| } | ||
| off: function off(el, type, callback) { | ||
| if (el.removeEventListener) { | ||
| el.removeEventListener(type, callback); | ||
| } else { | ||
| el.detachEvent('off' + type, callback); | ||
| } | ||
| }, | ||
| function once(el, type, callback) { | ||
| var typeArray = type.split(' '); | ||
| var recursiveFunction = function recursiveFunction(e) { | ||
| e.target.removeEventListener(e.type, recursiveFunction); | ||
| return callback(e); | ||
| }; | ||
| once: function once(el, type, callback) { | ||
| var typeArray = type.split(' '); | ||
| var recursiveFunction = function recursiveFunction(e) { | ||
| e.target.removeEventListener(e.type, recursiveFunction); | ||
| return callback(e); | ||
| }; | ||
| for (var i = typeArray.length - 1; i >= 0; i--) { | ||
| on(el, typeArray[i], recursiveFunction); | ||
| for (var i = typeArray.length - 1; i >= 0; i--) { | ||
| on(el, typeArray[i], recursiveFunction); | ||
| } | ||
| } | ||
| } | ||
| }; |
| { | ||
| "name": "dragon-ui", | ||
| "version": "0.0.24", | ||
| "version": "0.0.25", | ||
| "main": "lib/index.js", | ||
@@ -5,0 +5,0 @@ "scripts": { |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
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
No alert changes
Improved metrics
- Total package byte prevSize
- increased by20.75%
1622024
- Number of package files
- increased by11.96%
206
- Lines of code
- increased by23.25%
13901
No dependency changes