react-ui-components
Version:
A collection of UI components for React
1,832 lines (1,571 loc) • 706 kB
JavaScript
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
var injectTapEventPlugin = require('react-tap-event-plugin');
var Components = require('react-ui-components');
var IconButton = Components.IconButton;
injectTapEventPlugin();
var icons = [{
tooltip: '全部已读',
iconBtnClass: 'fa fa-check'
}, {
tooltip: '消息设置',
iconBtnClass: 'fa fa-cog'
}, {
tooltip: '关机',
iconBtnClass: 'fa fa-power-off'
}, {
tooltip: '删除',
iconBtnClass: 'fa fa-remove'
}, {
tooltip: '分享',
iconBtnClass: 'fa fa-share'
}, {
tooltip: '编辑',
iconBtnClass: 'fa fa-pencil'
}, {
tooltip: '条形图',
iconBtnClass: 'fa fa-bar-chart'
}, {
tooltip: '两端对齐',
iconBtnClass: 'fa fa-align-justify'
}];
var Main = React.createClass({
displayName: 'Main',
render: function render() {
var icons = this.props.icons,
btnEles = [],
btnEle;
for (var i = 0, l = icons.length; i < l; i++) {
btnEle = React.createElement(IconButton, {
key: i,
tooltip: icons[i].tooltip,
iconBtnClass: icons[i].iconBtnClass });
btnEles.push(btnEle);
}
return React.createElement(
'div',
null,
btnEles
);
}
});
ReactDOM.render(React.createElement(Main, { icons: icons }), document.getElementById('main'));
},{"react":184,"react-dom":3,"react-tap-event-plugin":7,"react-ui-components":13}],2:[function(require,module,exports){
// shim for using process in browser
var process = module.exports = {};
var queue = [];
var draining = false;
function drainQueue() {
if (draining) {
return;
}
draining = true;
var currentQueue;
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
var i = -1;
while (++i < len) {
currentQueue[i]();
}
len = queue.length;
}
draining = false;
}
process.nextTick = function (fun) {
queue.push(fun);
if (!draining) {
setTimeout(drainQueue, 0);
}
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};
function noop() {}
process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.binding = function (name) {
throw new Error('process.binding is not supported');
};
// TODO(shtylman)
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };
},{}],3:[function(require,module,exports){
'use strict';
module.exports = require('react/lib/ReactDOM');
},{"react/lib/ReactDOM":63}],4:[function(require,module,exports){
/**
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule keyOf
*/
/**
* Allows extraction of a minified key. Let's the build system minify keys
* without losing the ability to dynamically use key strings as values
* themselves. Pass in an object with a single key/val pair and it will return
* you the string key of that single record. Suppose you want to grab the
* value for a key 'className' inside of an object. Key/val minification may
* have aliased that key to be 'xa12'. keyOf({className: null}) will return
* 'xa12' in that case. Resolve keys you want to use once at startup time, then
* reuse those resolutions.
*/
"use strict";
var keyOf = function (oneKeyObj) {
var key;
for (key in oneKeyObj) {
if (!oneKeyObj.hasOwnProperty(key)) {
continue;
}
return key;
}
return null;
};
module.exports = keyOf;
},{}],5:[function(require,module,exports){
/**
* Copyright 2013-2014 Facebook, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* @providesModule TapEventPlugin
* @typechecks static-only
*/
"use strict";
var EventConstants = require('react/lib/EventConstants');
var EventPluginUtils = require('react/lib/EventPluginUtils');
var EventPropagators = require('react/lib/EventPropagators');
var SyntheticUIEvent = require('react/lib/SyntheticUIEvent');
var TouchEventUtils = require('./TouchEventUtils');
var ViewportMetrics = require('react/lib/ViewportMetrics');
var keyOf = require('fbjs/lib/keyOf');
var topLevelTypes = EventConstants.topLevelTypes;
var isStartish = EventPluginUtils.isStartish;
var isEndish = EventPluginUtils.isEndish;
var isTouch = function(topLevelType) {
var touchTypes = [
topLevelTypes.topTouchCancel,
topLevelTypes.topTouchEnd,
topLevelTypes.topTouchStart,
topLevelTypes.topTouchMove
];
return touchTypes.indexOf(topLevelType) >= 0;
}
/**
* Number of pixels that are tolerated in between a `touchStart` and `touchEnd`
* in order to still be considered a 'tap' event.
*/
var tapMoveThreshold = 10;
var ignoreMouseThreshold = 750;
var startCoords = {x: null, y: null};
var lastTouchEvent = null;
var Axis = {
x: {page: 'pageX', client: 'clientX', envScroll: 'currentPageScrollLeft'},
y: {page: 'pageY', client: 'clientY', envScroll: 'currentPageScrollTop'}
};
function getAxisCoordOfEvent(axis, nativeEvent) {
var singleTouch = TouchEventUtils.extractSingleTouch(nativeEvent);
if (singleTouch) {
return singleTouch[axis.page];
}
return axis.page in nativeEvent ?
nativeEvent[axis.page] :
nativeEvent[axis.client] + ViewportMetrics[axis.envScroll];
}
function getDistance(coords, nativeEvent) {
var pageX = getAxisCoordOfEvent(Axis.x, nativeEvent);
var pageY = getAxisCoordOfEvent(Axis.y, nativeEvent);
return Math.pow(
Math.pow(pageX - coords.x, 2) + Math.pow(pageY - coords.y, 2),
0.5
);
}
var touchEvents = [
topLevelTypes.topTouchStart,
topLevelTypes.topTouchCancel,
topLevelTypes.topTouchEnd,
topLevelTypes.topTouchMove,
];
var dependencies = [
topLevelTypes.topMouseDown,
topLevelTypes.topMouseMove,
topLevelTypes.topMouseUp,
].concat(touchEvents);
var eventTypes = {
touchTap: {
phasedRegistrationNames: {
bubbled: keyOf({onTouchTap: null}),
captured: keyOf({onTouchTapCapture: null})
},
dependencies: dependencies
}
};
var now = (function() {
if (Date.now) {
return Date.now;
} else {
// IE8 support: http://stackoverflow.com/questions/9430357/please-explain-why-and-how-new-date-works-as-workaround-for-date-now-in
return function () {
return +new Date;
}
}
})();
var TapEventPlugin = {
tapMoveThreshold: tapMoveThreshold,
ignoreMouseThreshold: ignoreMouseThreshold,
eventTypes: eventTypes,
/**
* @param {string} topLevelType Record from `EventConstants`.
* @param {DOMEventTarget} topLevelTarget The listening component root node.
* @param {string} topLevelTargetID ID of `topLevelTarget`.
* @param {object} nativeEvent Native browser event.
* @return {*} An accumulation of synthetic events.
* @see {EventPluginHub.extractEvents}
*/
extractEvents: function(
topLevelType,
topLevelTarget,
topLevelTargetID,
nativeEvent,
nativeEventTarget) {
if (isTouch(topLevelType)) {
lastTouchEvent = now();
} else {
if (lastTouchEvent && (now() - lastTouchEvent) < ignoreMouseThreshold) {
return null;
}
}
if (!isStartish(topLevelType) && !isEndish(topLevelType)) {
return null;
}
var event = null;
var distance = getDistance(startCoords, nativeEvent);
if (isEndish(topLevelType) && distance < tapMoveThreshold) {
event = SyntheticUIEvent.getPooled(
eventTypes.touchTap,
topLevelTargetID,
nativeEvent,
nativeEventTarget
);
}
if (isStartish(topLevelType)) {
startCoords.x = getAxisCoordOfEvent(Axis.x, nativeEvent);
startCoords.y = getAxisCoordOfEvent(Axis.y, nativeEvent);
} else if (isEndish(topLevelType)) {
startCoords.x = 0;
startCoords.y = 0;
}
EventPropagators.accumulateTwoPhaseDispatches(event);
return event;
}
};
module.exports = TapEventPlugin;
},{"./TouchEventUtils":6,"fbjs/lib/keyOf":4,"react/lib/EventConstants":42,"react/lib/EventPluginUtils":45,"react/lib/EventPropagators":46,"react/lib/SyntheticUIEvent":126,"react/lib/ViewportMetrics":129}],6:[function(require,module,exports){
/**
* Copyright 2013-2014 Facebook, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* @providesModule TouchEventUtils
*/
var TouchEventUtils = {
/**
* Utility function for common case of extracting out the primary touch from a
* touch event.
* - `touchEnd` events usually do not have the `touches` property.
* http://stackoverflow.com/questions/3666929/
* mobile-sarai-touchend-event-not-firing-when-last-touch-is-removed
*
* @param {Event} nativeEvent Native event that may or may not be a touch.
* @return {TouchesObject?} an object with pageX and pageY or null.
*/
extractSingleTouch: function(nativeEvent) {
var touches = nativeEvent.touches;
var changedTouches = nativeEvent.changedTouches;
var hasTouches = touches && touches.length > 0;
var hasChangedTouches = changedTouches && changedTouches.length > 0;
return !hasTouches && hasChangedTouches ? changedTouches[0] :
hasTouches ? touches[0] :
nativeEvent;
}
};
module.exports = TouchEventUtils;
},{}],7:[function(require,module,exports){
module.exports = function injectTapEventPlugin () {
require('react/lib/EventPluginHub').injection.injectEventPluginsByName({
"TapEventPlugin": require('./TapEventPlugin.js')
});
};
},{"./TapEventPlugin.js":5,"react/lib/EventPluginHub":43}],8:[function(require,module,exports){
'use strict';
var React = require('react');
var Tooltip = require('../tooltip');
module.exports = React.createClass({
displayName: 'exports',
propTypes: {
customClass: React.PropTypes.string,
tooltip: React.PropTypes.string,
disabled: React.PropTypes.bool,
onBtnTap: React.PropTypes.func,
isShowTip: React.PropTypes.bool,
tipClass: React.PropTypes.string,
iconBtnClass: React.PropTypes.string,
iconBtnTpl: React.PropTypes.func
},
getDefaultProps: function getDefaultProps() {
return {
customClass: ''
};
},
getInitialState: function getInitialState() {
return {
isShowTip: false,
hovered: false,
tipClass: ''
};
},
render: function render() {
var props = this.props,
tooltipEle,
hoveredClass = this.state.hovered ? 'hovered' : '';
if (props.tooltip) {
tooltipEle = React.createElement(Tooltip, {
ref: 'tooltip',
tip: props.tooltip,
isShow: this.state.isShowTip,
customClass: props.tipClass });
}
return React.createElement(
'span',
{
className: "icon-btn-wrap " + hoveredClass + ' ' + props.customClass,
onMouseEnter: this._handleMouseEnter,
onMouseLeave: this._handleMouseLeave,
onTouchTap: props.onBtnTap },
React.createElement(
'span',
{ className: "icon-btn " + props.iconBtnClass },
props.iconBtnTpl ? props.iconBtnTpl() : ''
),
tooltipEle
);
},
_handleMouseEnter: function _handleMouseEnter(e) {
this.setState({
isShowTip: true,
hovered: true
});
},
_handleMouseLeave: function _handleMouseLeave(e) {
this.setState({
isShowTip: false,
hovered: false
});
}
});
},{"../tooltip":26,"react":184}],9:[function(require,module,exports){
'use strict';
var React = require('react');
var SimpleButton = require('./simple-button');
module.exports = React.createClass({
displayName: 'exports',
propTypes: {
customClass: React.PropTypes.string,
disabled: React.PropTypes.bool,
newTab: React.PropTypes.bool,
label: React.PropTypes.string,
btnTpl: React.PropTypes.func,
href: React.PropTypes.string.isRequired,
onTap: React.PropTypes.func
},
getDefaultProps: function getDefaultProps() {
return {
customClass: '',
newTab: false
};
},
render: function render() {
var props = this.props,
btnChilden;
if (props.btnTpl) {
btnChilden = props.btnTpl(props.label);
} else {
btnChilden = React.createElement(
'div',
{ className: 'btn-inner' },
props.label && React.createElement(
'span',
{ ref: 'btnLabel', className: 'btn-label' },
props.label
),
props.children
);
}
return React.createElement(
SimpleButton,
{
customClass: props.customClass,
disabled: props.disabled,
onTap: props.onTap },
React.createElement(
'a',
{ className: 'link-btn', href: props.href, target: props.newTab ? '_blank' : '_self' },
btnChilden
)
);
}
});
},{"./simple-button":10,"react":184}],10:[function(require,module,exports){
'use strict';
var React = require('react');
module.exports = React.createClass({
displayName: 'exports',
propTypes: {
customClass: React.PropTypes.string,
disabled: React.PropTypes.bool,
label: React.PropTypes.string,
btnTpl: React.PropTypes.func,
onTap: React.PropTypes.func
},
getDefaultProps: function getDefaultProps() {
return {
customClass: ''
};
},
render: function render() {
var props = this.props,
btnChilden;
if (props.btnTpl) {
btnChilden = props.btnTpl(props.label);
} else {
btnChilden = React.createElement(
'div',
{ className: 'btn-inner' },
props.label && React.createElement(
'span',
{ ref: 'btnLabel', className: 'btn-label' },
props.label
),
props.children
);
}
return React.createElement(
'button',
{
className: "btn " + props.customClass,
disabled: props.disabled,
onTouchTap: this._onTap },
btnChilden
);
},
_onTap: function _onTap(e) {
var props = this.props;
if (!props.disabled && props.onTap) props.onTap(e);
}
});
},{"react":184}],11:[function(require,module,exports){
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
var WindowListener = require('./mixins/window-listener');
var SimpleButton = require('./buttons/simple-button');
var Mask = require('./mask');
module.exports = React.createClass({
displayName: 'exports',
mixins: [WindowListener],
propTypes: {
title: React.PropTypes.string,
body: React.PropTypes.string,
headTpl: React.PropTypes.func,
bodyTpl: React.PropTypes.func,
footTpl: React.PropTypes.func,
hasMask: React.PropTypes.bool,
hasActions: React.PropTypes.bool, //whether has actions in footer
actions: React.PropTypes.array,
onShow: React.PropTypes.func,
onClose: React.PropTypes.func,
open: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
hasMask: true,
hasActions: true,
customClass: '',
actions: [{
customClass: 'dialog-submit',
onTap: this._onSubmit,
label: "submit"
}, {
customClass: 'dialog-cancel',
onTap: this.close,
label: "cancel"
}]
};
},
getInitialState: function getInitialState() {
return {
open: this.props.open || false
};
},
windowListeners: {
resize: '_onResize'
},
componentDidMount: function componentDidMount() {
setTimeout((function () {
this._onResize();
}).bind(this), 300);
if (this.props.open) {
this._onShow();
}
},
componentDidUpdate: function componentDidUpdate() {
this._onResize();
},
render: function render() {
var props = this.props,
actions = props.actions,
actionEles = [],
actionEle,
item,
dialogWrapStyle = {};
if (props.hasActions) {
for (var i = 0, l = actions.length; i < l; i++) {
item = actions[i];
if (item.tpl) {
actionEle = item.tpl(item);
} else {
actionEle = React.createElement(SimpleButton, {
key: i,
customClass: item.customClass || '',
disabled: item.disabled || false,
onTap: item.onTap || this.close,
label: item.label });
}
actionEles.push(actionEle);
}
}
if (this.state.open) {
dialogWrapStyle = {
width: '100%',
height: '100%'
};
}
return React.createElement(
'div',
{ className: "dialog-wrap " + props.customClass, style: dialogWrapStyle },
this.state.open && React.createElement(
'div',
{ ref: 'dialog', className: 'dialog' },
React.createElement(
'div',
{ className: 'dialog-head' },
props.headTpl ? props.headTpl(props.title) : props.title
),
React.createElement(
'div',
{ className: 'dialog-body' },
props.bodyTpl ? props.bodyTpl(props.body) : props.body
),
React.createElement(
'div',
{ className: 'dialog-foot' },
props.footTpl ? props.footTpl() : '',
actionEles
)
),
this.state.open && this.props.hasMask && React.createElement(Mask, {
autoLockScroll: true,
isShow: true,
onTap: this._handleMaskTap })
);
},
show: function show() {
this.setState({ open: true }, this.props._onShow);
},
close: function close() {
this.setState({ open: false }, this.props._onClose);
},
_onShow: function _onShow() {
this.props.onShow && this.props.onShow();
},
_onClose: function _onClose() {
this.props.onClose && this.props.onClose();
},
_onSubmit: function _onSubmit() {
this.setState({ open: false });
this.props.onClose(true);
},
_onResize: function _onResize() {
if (this.state.open) {
var dialogWin = ReactDOM.findDOMNode(this.refs.dialog),
dialogWinWidth = dialogWin.offsetWidth,
dialogWinHeight = dialogWin.offsetHeight;
dialogWin.style.marginLeft = -dialogWinWidth / 2 + 'px';
dialogWin.style.marginTop = -dialogWinHeight / 2 + 'px';
}
},
_handleMaskTap: function _handleMaskTap(e) {
this.close();
}
});
},{"./buttons/simple-button":10,"./mask":14,"./mixins/window-listener":19,"react":184,"react-dom":3}],12:[function(require,module,exports){
'use strict';
var React = require('react');
var eventsUtils = require('../utils/events');
module.exports = React.createClass({
displayName: 'exports',
propTypes: {
customClass: React.PropTypes.string,
defaultImg: React.PropTypes.string,
realImg: React.PropTypes.string
},
getDefaultProps: function getDefaultProps() {
return {
customClass: '',
defaultImg: '',
realImg: ''
};
},
getInitialState: function getInitialState() {
return {
loaded: null
};
},
componentDidMount: function componentDidMount() {
var self = this,
img,
src = this.props.realImg;
if (src) {
img = document.createElement('img');
eventsUtils.on(img, 'load', function () {
self.setState({
loaded: 'success'
});
});
eventsUtils.on(img, 'error', function () {
self.setState({
loaded: 'failed'
});
});
img.setAttribute("src", src);
}
},
render: function render() {
var props = this.props,
imgWrapStyle = {},
imgStyle = {};
if (this.state.loaded == 'success') {
imgWrapStyle = {
backgroundImage: 'url(' + props.realImg + ')'
};
imgStyle = {
visibility: 'hidden'
};
} else if (this.state.loaded == 'failed') {
imgStyle = {
visibility: 'visible'
};
}
return React.createElement(
'div',
{
className: "img-wrap " + props.customClass,
style: imgWrapStyle },
React.createElement('img', {
ref: 'image',
'data-real': props.realImg,
src: props.defaultImg,
style: imgStyle })
);
}
});
},{"../utils/events":28,"react":184}],13:[function(require,module,exports){
'use strict';
module.exports = {
DropdownMenu: require('./menu/dropdown-menu'),
MenuItem: require('./menu/menu-item'),
Menu: require('./menu/menu'),
IconButton: require('./buttons/icon-button'),
SimpleButton: require('./buttons/simple-button'),
LinkButton: require('./buttons/link-button'),
Tab: require('./tab/tab'),
TabItem: require('./tab/tab-item'),
Dialog: require('./dialog'),
Tooltip: require('./tooltip'),
Mask: require('./mask'),
Toast: require('./toast'),
SearchInput: require('./search-input'),
ImageIcon: require('./icons/image-icon'),
/**mixins**/
WindowListener: require('./mixins/window-listener'),
DelegateClick: require('./mixins/delegate-click')
};
},{"./buttons/icon-button":8,"./buttons/link-button":9,"./buttons/simple-button":10,"./dialog":11,"./icons/image-icon":12,"./mask":14,"./menu/dropdown-menu":15,"./menu/menu":17,"./menu/menu-item":16,"./mixins/delegate-click":18,"./mixins/window-listener":19,"./search-input":20,"./tab/tab":24,"./tab/tab-item":23,"./toast":25,"./tooltip":26}],14:[function(require,module,exports){
'use strict';
var React = require('react');
module.exports = React.createClass({
displayName: 'exports',
propTypes: {
autoLockScroll: React.PropTypes.bool,
isShow: React.PropTypes.bool,
onTap: React.PropTypes.func
},
_originalBodyOverflow: '',
componentDidMount: function componentDidMount() {
this._originalBodyOverflow = document.getElementsByTagName('body')[0].style.oveflow;
if (this.props.autoLockScroll) {
this._disableScroll();
}
},
componentWillUnmount: function componentWillUnmount() {
this._enableScroll();
},
componentDidUpdate: function componentDidUpdate() {
if (this.props.autoLockScroll) {
this.props.isShow ? this._disableScroll() : this._enableScroll();
}
},
render: function render() {
return React.createElement('div', {
className: 'mask',
onTouchTap: this._onTap });
},
_disableScroll: function _disableScroll() {
document.getElementsByTagName('body')[0].style.oveflow = 'hidden';
},
_enableScroll: function _enableScroll() {
document.getElementsByTagName('body')[0].style.oveflow = this._originalBodyOverflow;
},
_onTap: function _onTap(e) {
this.props.onTap && this.props.onTap(e);
}
});
},{"react":184}],15:[function(require,module,exports){
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
var Menu = require('./menu');
var DelegateClick = require('../mixins/delegate-click');
module.exports = React.createClass({
displayName: 'exports',
mixins: [DelegateClick],
propTypes: {
menuItems: React.PropTypes.array.isRequired, //an array for rendering dropdown menu items
wrapClassName: React.PropTypes.string,
itemTpl: React.PropTypes.func, //custom template for each menu items
selectedTpl: React.PropTypes.func, //custom template for selected item showing
selectedIndex: React.PropTypes.number,
onMenuChange: React.PropTypes.func,
forceTap: React.PropTypes.bool //force trigger onMenuChange unconditional
},
getDefaultProps: function getDefaultProps() {
return {
hasMask: false,
autoWidth: false,
displayKey: 'text', //the value of displayKey for displaying
valKey: 'value', //the value of valKey may be for being sended to sever
itemTpl: function itemTpl(index, data, displayKey, valKey) {
var displayText = data[displayKey],
displayVal = data[valKey];
return React.createElement(
'div',
{ 'data-val': displayVal },
displayText
);
},
selectedTpl: function selectedTpl(index, data, displayKey, valKey) {
var displayText = data[displayKey];
return React.createElement(
'div',
null,
data[displayText]
);
}
};
},
getInitialState: function getInitialState() {
return {
open: false,
selectedIndex: this.props.selectedIndex || 0
};
},
componentDidMount: function componentDidMount() {
if (this.props.autoWidth) this._setWidth();
if (this.props.hasOwnProperty('selectedIndex')) this._setSelectedIndex(this.props.selectedIndex);
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (this.props.autoWidth) this._setWidth();
if (nextProps.hasOwnProperty('selectedIndex')) {
this._setSelectedIndex(nextProps.selectedIndex);
}
},
render: function render() {
var props = this.props,
showClassName = this.state.open ? "" : "unactive",
wrapClassName = props.wrapClassName + ' d-menu-wrap ' + showClassName;
return React.createElement(
'div',
{ className: wrapClassName },
React.createElement(
'div',
{ className: 'd-menu-display-wrap', onTouchTap: this._onToggleMenu },
props.selectedTpl(this.state.selectedIndex, props.menuItems[this.state.selectedIndex], props.displayKey, props.valKey)
),
React.createElement(Menu, {
ref: 'menuWrap',
menuItems: props.menuItems,
displayKey: props.displayKey,
valKey: props.valKey,
selectedIndex: this.state.selectedIndex,
itemTpl: props.itemTpl,
onItemTap: this._onItemTap }),
this.state.open && props.hasMask && React.createElement('div', { className: 'd-menu-mask', onTouchTap: this._onMenuMaskTap })
);
},
componentClick: function componentClick() {
this.close();
},
close: function close() {
if (this.state.open) {
this.setState({
open: false
});
}
},
_onToggleMenu: function _onToggleMenu() {
this.setState({
open: !this.state.open
});
},
_onItemTap: function _onItemTap(e, index, data) {
var props = this.props;
if (props.onMenuChange) {
if (this.state.selectedIndex !== index || props.forceTap) {
props.onMenuChange(e, index, data);
}
}
this.setState({
selectedIndex: index,
open: false
});
},
_onMenuMaskTap: function _onMenuMaskTap() {
this.setState({
open: false
});
},
_setWidth: function _setWidth() {
var dMenuEle = ReactDOM.findDOMNode(this),
menuWrap = ReactDOM.findDOMNode(this.refs.menuWrap);
dMenuEle.style.width = menuWrap.offsetWidth + 'px';
},
_setSelectedIndex: function _setSelectedIndex(selectedIndex) {
this.setState({
selectedIndex: selectedIndex
});
}
});
},{"../mixins/delegate-click":18,"./menu":17,"react":184,"react-dom":3}],16:[function(require,module,exports){
'use strict';
var React = require('react');
module.exports = React.createClass({
displayName: 'exports',
propTypes: {
index: React.PropTypes.number.isRequired,
selected: React.PropTypes.bool,
data: React.PropTypes.object,
onTap: React.PropTypes.func,
itemTpl: React.PropTypes.func
},
getDefaultProps: function getDefaultProps() {
return {
itemTpl: function itemTpl(index, data, selected, displayKey, valKey) {
var displayText = data[displayKey],
displayVal = data[valKey];
return React.createElement(
'div',
{ 'data-val': displayVal },
displayText
);
}
};
},
render: function render() {
var props = this.props,
itemClassName = 'menu-item';
if (props.selected) {
itemClassName += ' menu-item-selected';
}
return React.createElement(
'div',
{
className: itemClassName,
onTouchTap: this._onTap },
props.itemTpl(props.index, props.data, props.selected, props.displayKey, props.valKey)
);
},
_onTap: function _onTap(e) {
var props = this.props;
if (props.onTap) {
props.onTap(e, props.index, props.data);
}
}
});
},{"react":184}],17:[function(require,module,exports){
'use strict';
var React = require('react');
var MenuItem = require('./menu-item');
module.exports = React.createClass({
displayName: 'exports',
propTypes: {
menuItems: React.PropTypes.array.isRequired,
selectedIndex: React.PropTypes.number,
selectedVal: React.PropTypes.string,
onItemTap: React.PropTypes.func,
itemTpl: React.PropTypes.func
},
getDefaultProps: function getDefaultProps() {},
getInitialState: function getInitialState() {
return {
selectedIndex: this.props.selectedIndex || this._getSelectedIndexByVal()
};
},
componentDidMount: function componentDidMount() {
if (this.props.hasOwnProperty('selectedIndex')) this._setSelectedIndex(this.props.selectedIndex);
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (nextProps.hasOwnProperty('selectedIndex')) {
this._setSelectedIndex(nextProps.selectedIndex);
}
},
render: function render() {
return React.createElement(
'div',
{ className: 'menu-wrap' },
this._renderChilden()
);
},
_renderChilden: function _renderChilden() {
var menuItems = [],
props = this.props,
menuItem;
for (var i = 0, l = props.menuItems.length; i < l; i++) {
menuItem = React.createElement(MenuItem, {
selected: this.state.selectedIndex === i,
key: i,
index: i,
data: props.menuItems[i],
itemTpl: props.itemTpl,
displayKey: props.displayKey,
valKey: props.valKey,
onTap: this._onItemTap });
menuItems.push(menuItem);
}
return menuItems;
},
_onItemTap: function _onItemTap(e, index, data) {
this.setState({
selectedIndex: index
});
this.props.onItemTap && this.props.onItemTap(e, index, data);
},
_getSelectedIndexByVal: function _getSelectedIndexByVal() {
var props = this.props;
if (props.selectedVal) {
for (var i = 0, l = props.menuItems.length; i < l; i++) {
if (props.menuItems[i][props.valKey] == props.selectedVal) {
return i;
}
}
}
return 0;
},
_setSelectedIndex: function _setSelectedIndex(selectedIndex) {
this.setState({
selectedIndex: selectedIndex
});
}
});
},{"./menu-item":16,"react":184}],18:[function(require,module,exports){
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
var eventsUtils = require('../utils/events');
var domUtils = require('../utils/dom');
module.exports = {
componentDidMount: function componentDidMount() {
this._bindClick();
},
componentWillUnmount: function componentWillUnmount() {
this._unbindClick();
},
_checkClick: function _checkClick(e) {
var el = ReactDOM.findDOMNode(this),
target = e.target;
if (target != el && !domUtils.isDescendant(el, target) && document.documentElement.contains(target)) {
this.componentClick && this.componentClick();
}
},
_bindClick: function _bindClick() {
eventsUtils.on(document, 'mouseup', this._checkClick);
eventsUtils.on(document, 'touchend', this._checkClick);
},
_unbindClick: function _unbindClick() {
eventsUtils.off(document, 'mouseup', this._checkClick);
eventsUtils.off(document, 'touchend', this._checkClick);
}
};
},{"../utils/dom":27,"../utils/events":28,"react":184,"react-dom":3}],19:[function(require,module,exports){
'use strict';
var eventsUtils = require('../utils/events');
module.exports = {
componentDidMount: function componentDidMount() {
var listeners = this.windowListeners,
handler;
for (var evt in listeners) {
handler = listeners[evt];
eventsUtils.on(window, evt, this[handler]);
}
},
componentWillUnmount: function componentWillUnmount() {
var listeners = this.windowListeners,
handler;
for (var evt in listeners) {
handler = listeners[evt];
eventsUtils.off(window, evt, this[handler]);
}
}
};
},{"../utils/events":28}],20:[function(require,module,exports){
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
module.exports = React.createClass({
displayName: 'exports',
propTypes: {
customClass: React.PropTypes.string,
placeholder: React.PropTypes.string,
onSearch: React.PropTypes.func,
throttle: React.PropTypes.number,
isFocus: React.PropTypes.bool
},
getDefaultProps: function getDefaultProps() {
return {
customClass: '',
placeholder: 'search...',
throttle: 200,
isFocus: true
};
},
componentDidMount: function componentDidMount() {
if (this.props.isFocus) this._setFocus();
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (nextProps.isFocus) this._setFocus();
},
render: function render() {
var props = this.props;
return React.createElement(
'div',
{ className: "search-wrap " + props.customClass },
React.createElement(
'form',
{
className: 'search-form',
onSubmit: this._onSubmit },
React.createElement('input', {
ref: 'searchInput',
type: 'text',
autoComplete: 'off',
className: 'search-input',
placeholder: props.placeholder,
onKeyDown: this._onKeyDown })
)
);
},
_timeoutId: null,
_onKeyDown: function _onKeyDown(e) {
if (this._timeoutId) clearTimeout(this._timeoutId);
this._timeoutId = setTimeout((function () {
this._goSearch(e);
}).bind(this), this.props.throttle);
},
_onSubmit: function _onSubmit(e) {
this._goSearch(e);
e.preventDefault();
return false;
},
_goSearch: function _goSearch(e) {
var inputEle, keyword;
inputEle = ReactDOM.findDOMNode(this.refs.searchInput);
keyword = inputEle.value;
if (this.props.onSearch) {
this.props.onSearch(keyword, e);
}
},
_setFocus: function _setFocus() {
var inputEle;
inputEle = ReactDOM.findDOMNode(this.refs.searchInput);
inputEle.focus();
}
});
},{"react":184,"react-dom":3}],21:[function(require,module,exports){
"use strict";
var React = require('react');
module.exports = React.createClass({
displayName: "exports",
propTypes: {
index: React.PropTypes.number,
selected: React.PropTypes.bool,
onTapContent: React.PropTypes.func
},
getDefaultProps: function getDefaultProps() {
return {
index: 0,
selected: false
};
},
render: function render() {
var props = this.props;
return React.createElement(
"div",
{
className: "tab-content-item " + (props.selected ? "selected" : "hide"),
onTouchTap: this._onTap },
props.children
);
},
_onTap: function _onTap(e) {
var props = this.props;
props.onTapContent && props.onTapContent(props.index, this, e);
}
});
},{"react":184}],22:[function(require,module,exports){
"use strict";
var React = require('react');
module.exports = React.createClass({
displayName: "exports",
propTypes: {
index: React.PropTypes.number,
title: React.PropTypes.string,
selected: React.PropTypes.bool,
headTpl: React.PropTypes.func,
onTap: React.PropTypes.func
},
getDefaultProps: function getDefaultProps() {
return {
index: 0,
selected: false
};
},
render: function render() {
var props = this.props,
style = {
width: props.width
},
titleEle;
if (props.headTpl) {
titleEle = props.headTpl(props.title, props.selected);
} else {
titleEle = props.title;
}
return React.createElement(
"div",
{
className: "tab-head-item " + (props.selected ? "selected" : ""),
style: style,
onTouchTap: this._onTap },
titleEle
);
},
_onTap: function _onTap(e) {
this.props.onTap && this.props.onTap(this.props.index, this.props.title, e);
}
});
},{"react":184}],23:[function(require,module,exports){
'use strict';
var React = require('react');
module.exports = React.createClass({
render: function render() {
return React.createElement('div', { className: 'tab-item' });
},
displayName: 'TabItem'
});
/* just tab-item placeholder */
},{"react":184}],24:[function(require,module,exports){
'use strict';
var React = require('react');
var TabHeadItem = require('./tab-head-item');
var TabContentItem = require('./tab-content-item');
module.exports = React.createClass({
displayName: 'exports',
propTypes: {
customClass: React.PropTypes.string,
selectedIndex: React.PropTypes.number,
tabWillChange: React.PropTypes.func,
tabDidChange: React.PropTypes.func,
onTapContent: React.PropTypes.func
},
getInitialState: function getInitialState() {
return {
selectedIndex: this.props.selectedIndex || 0
};
},
render: function render() {
var props = this.props,
tabHeads = [],
tabContents = [],
tempHead,
tempContent,
width = 100 / this.getTabCount() + '%';
React.Children.forEach(props.children, (function (item, index) {
if (item.type.displayName == 'TabItem') {
tempHead = React.createElement(TabHeadItem, {
key: index,
index: index,
title: item.props.title,
selected: this.state.selectedIndex === index,
width: width,
headTpl: props.headTpl,
onTap: this._onHeadTap });
tempContent = React.createElement(
TabContentItem,
{
key: index,
index: index,
selected: this.state.selectedIndex === index,
onTapContent: this._onTapContent },
item.props.children
);
tabHeads.push(tempHead);
tabContents.push(tempContent);
} else {
console.error('The tab item tag name must be TagItem');
}
}).bind(this));
return React.createElement(
'div',
{ className: "tab-wrap " + (props.customClass || "") },
React.createElement(
'div',
{ className: 'tab-head-wrap' },
tabHeads
),
React.createElement(
'div',
{ className: 'tab-content-wrap' },
tabContents
)
);
},
getTabCount: function getTabCount() {
return React.Children.count(this.props.children);
},
_onHeadTap: function _onHeadTap(index, title, e) {
var props = this.props;
if (props.tabWillChange) props.tabWillChange(this.state.selectedIndex, index, e);
this.setState({ selectedIndex: index });
if (props.tabDidChange) props.tabDidChange(index, title, e);
},
_onTapContent: function _onTapContent(index, activeTabContent, e) {
if (this.props.onTapContent) this.props.onTapContent(index, activeTabContent, e);
}
});
},{"./tab-content-item":21,"./tab-head-item":22,"react":184}],25:[function(require,module,exports){
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
module.exports = React.createClass({
displayName: 'exports',
propTypes: {
msg: React.PropTypes.string,
timeout: React.PropTypes.number,
type: React.PropTypes.string //'info', 'success', 'warning', 'error'
},
getDefaultProps: function getDefaultProps() {
return {
msg: '',
timeout: 3000,
type: 'info'
};
},
render: function render() {
return React.createElement(
'div',
{
id: 'toast-wrap',
className: "toast fadein " + this.props.type },
this.props.msg
);
},
componentDidMount: function componentDidMount() {
this._setTimeout();
},
componentDidUpdate: function componentDidUpdate() {
this._setTimeout();
},
_timeoutId: null,
_setTimeout: function _setTimeout() {
if (this._timeoutId) clearTimeout(this._timeoutId);
this._timeoutId = setTimeout((function () {
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
}).bind(this), this.props.timeout);
}
});
},{"react":184,"react-dom":3}],26:[function(require,module,exports){
'use strict';
var React = require('react');
module.exports = React.createClass({
displayName: 'exports',
propTypes: {
tip: React.PropTypes.string.isRequired,
isShow: React.PropTypes.bool,
customClass: React.PropTypes.string
},
render: function render() {
var props = this.props,
className = props.isShow ? '' : 'hide',
customCls = props.customClass || '';
return React.createElement(
'span',
{
className: "tooltip " + className + ' ' + customCls },
props.tip
);
}
});
},{"react":184}],27:[function(require,module,exports){
"use strict";
module.exports = {
isDescendant: function isDescendant(parent, child) {
var node = child.parentNode;
while (node != null) {
if (node === parent) {
return true;
}
node = node.parentNode;
}
return false;
}
};
},{}],28:[function(require,module,exports){
'use strict';
module.exports = {
on: function on(el, eventType, func) {
if (window.addEventListener) {
el.addEventListener(eventType, func, false);
} else {
el.attachEvent('on' + eventType, func);
}
},
off: function off(el, eventType, func) {
if (window.removeEventListener) {
el.removeEventListener(eventType, func, false);
} else {
el.detachEvent('on' + eventType, func);
}
}
};
},{}],29:[function(require,module,exports){
/**
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule AutoFocusUtils
* @typechecks static-only
*/
'use strict';
var ReactMount = require('./ReactMount');
var findDOMNode = require('./findDOMNode');
var focusNode = require('fbjs/lib/focusNode');
var Mixin = {
componentDidMount: function () {
if (this.props.autoFocus) {
focusNode(findDOMNode(this));
}
}
};
var AutoFocusUtils = {
Mixin: Mixin,
focusDOMComponent: function () {
focusNode(ReactMount.getNode(this._rootNodeID));
}
};
module.exports = AutoFocusUtils;
},{"./ReactMount":93,"./findDOMNode":136,"fbjs/lib/focusNode":166}],30:[function(require,module,exports){
/**
* Copyright 2013-2015 Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule BeforeInputEventPlugin
* @typechecks static-only
*/
'use strict';
var EventConstants = require('./EventConstants');
var EventPropagators = require('./EventPropagators');
var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
var FallbackCompositionState = require('./FallbackCompositionState');
var SyntheticCompositionEvent = require('./SyntheticCompositionEvent');
var SyntheticInputEvent = require('./SyntheticInputEvent');
var keyOf = require('fbjs/lib/keyOf');
var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
var START_KEYCODE = 229;
var canUseCompositionEvent = ExecutionEnvironment.canUseDOM && 'CompositionEvent' in window;
var documentMode = null;
if (ExecutionEnvironment.canUseDOM && 'documentMode' in document) {
documentMode = document.documentMode;
}
// Webkit offers a very useful `textInput` event that can be used to
// directly represent `beforeInput`. The IE `textinput` event is not as
// useful, so we don't use it.
var canUseTextInputEvent = ExecutionEnvironment.canUseDOM && 'TextEvent' in window && !documentMode && !isPresto();
// In IE9+, we have access to composition events, but the data supplied
// by the native compositionend event may be incorrect. Japanese ideographic
// spaces, for instance (\u3000) are not recorded correctly.
var useFallbackCompositionData = ExecutionEnvironment.canUseDOM && (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11);
/**
* Opera <= 12 includes TextEvent in window, but does not fire
* text input events. Rely on keypress instead.
*/
function isPresto() {
var opera = window.opera;
return typeof opera === 'object' && typeof opera.version === 'function' && parseInt(opera.version(), 10) <= 12;
}
var SPACEBAR_CODE = 32;
var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
var topLevelTypes = EventConstants.topLevelTypes;
// Events and their corresponding property names.
var eventTypes = {
beforeInput: {
phasedRegistrationNames: {
bubbled: keyOf({ onBeforeInput: null }),
captured: keyOf({ onBeforeInputCapture: null })
},
dependencies: [topLevelTypes.topCompositionEnd, topLevelTypes.topKeyPress, topLevelTypes.topTextInput, topLevelTypes.topPaste]
},
compositionEnd: {
phasedRegistrationNames: {
bubbled: keyOf({ onCompositionEnd: null }),
captured: keyOf({ onCompositionEndCapture: null })
},
dependencies: [topLevelTypes.topBlur, topLevelTypes.topCompositionEnd, topLevelTypes.topKeyDown, topLevelTypes.topKeyPress, topLevelTypes.topKeyUp, topLevelTypes.topMouseDown]
},
compositionStart: {
phasedRegistrationNames: {
bubbled: keyOf({ onCompositionStart: null }),
captured: keyOf({ onCompositionStartCapture: null })
},
dependencies: [topLevelTypes.topBlur, topLevelTypes.topCompositionStart, topLevelTypes.topKeyDown, topLevelTypes.topKeyPress, topLevelTypes.topKeyUp, topLevelTypes.topMouseDown]
},
compositionUpdate: {
phasedRegistrationNames: {
bubbled: keyOf({ onCompositionUpdate: null }),
captured: keyOf({ onCompositionUpdateCapture: null })
},
dependencies: [topLevelTypes.topBlur, topLevelTypes.topCompositionUpdate, topLevelTypes.topKeyDown, topLevelTypes.topKeyPress, topLevelTypes.topKeyUp, topLevelTypes.topMouseDown]
}
};
// Track whether we've ever handled a keypress on the space key.
var hasSpaceKeypress = false;
/**
* Return whether a native keypress event is assumed to be a command.
* This is required because Firefox fires `keypress` events for key commands
* (cut, copy, select-all, etc.) even though no character is inserted.
*/
function isKeypressCommand(nativeEvent) {
return (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&
// ctrlKey && altKey is equivalent to AltGr, and is not a command.
!(nativeEvent.ctrlKey && nativeEvent.altKey);
}
/**
* Translate native top level events into event types.
*
* @param {string} topLevelType
* @return {object}
*/
function getCompositionEventType(topLevelType) {
switch (topLevelType) {
case topLevelTypes.topCompositionStart:
return eventTypes.compositionStart;
case topLevelTypes.topCompositionEnd:
return eventTypes.compositionEnd;
case topLevelTypes.topCompositionUpdate:
return eventTypes.compositionUpdate;
}
}
/**
* Does our fallback best-guess model think this event signifies that
* composition has begun?
*
* @param {string} topLevelType
* @param {object} nativeEvent
* @return {boolean}
*/
function isFallbackCompositionStart(topLevelType, nativeEvent) {
return topLevelType === topLevelTypes.topKeyDown && nativeEvent.keyCode === START_KEYCODE;
}
/**
* Does our fallback mode think that this event is the end of composition?
*
* @param {string} topLevelType
* @param {object} nativeEvent
* @return {boolean}
*/
function isFallbackCompositionEnd(topLevelType, nativeEvent) {
switch (topLevelType) {
case topLevelTypes.topKeyUp:
// Command keys insert or clear IME input.
return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;
case topLevelTypes.topKeyDown:
// Expect IME keyCode on each keydown. If we get any other
// code we must have exited earlier.
return nativeEvent.keyCode !== START_KEYCODE;
case topLevelTypes.topKeyPress:
case topLevelTypes.topMouseDown:
case topLevelTypes.topBl