react-messagebox
Version:
1,975 lines (1,509 loc) • 166 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("React"));
else if(typeof define === 'function' && define.amd)
define(["React"], factory);
else if(typeof exports === 'object')
exports["ReactMessageBox"] = factory(require("React"));
else
root["ReactMessageBox"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
/** @jsx React.DOM */'use strict';
var React = __webpack_require__(1)
var Window = __webpack_require__(5)
var Button = __webpack_require__(6)
var Toolbar = __webpack_require__(7)
var assign = __webpack_require__(2)
var normalize = __webpack_require__(4)
var cloneWithProps = __webpack_require__(3)
var ToolbarFactory = React.createFactory(Toolbar)
function toUpperFirst(str){
return str.charAt(0).toUpperCase() + str.substr(1)
}
var MessageBox = React.createClass({
displayName: 'ReactMessageBox',
getDefaultProps: function(){
return {
renderOnVisible: false,
centered : true,
resizable: true,
constrainTo: true,
toolbarPosition: 'bottom',
toolbarBorderColor: 'gray',
defaultToolbarStyle: {
},
toolbarPadding: 5
}
},
render: function(){
var props = this.prepareProps(this.props)
return React.createElement(Window, React.__spread({}, props),
props.children
)
},
prepareProps: function(thisProps) {
var props = assign({}, thisProps)
props.toolbarStyle = this.prepareToolbarStyle(props)
props.toolbar = this.prepareToolbar(props)
props.bodyFactory = this.bodyFactory.bind(this, props)
return props
},
prepareToolbar: function(props) {
var toolbar
var children = React.Children.map(props.children, function(child){
if (child && child.props && child.props.isReactToolbar){
toolbar = child
return false
}
return child
})
props.children = children
if (toolbar){
var style = assign({}, props.toolbarStyle, toolbar.props.style)
toolbar = cloneWithProps(toolbar, { style: style })
}
return toolbar
},
prepareToolbarStyle: function(props) {
var toolbarBorder = props.toolbarBorder
var toolbarBorderColor = props.toolbarBorderColor || 'gray'
var toolbarBorderWidth = parseInt(props.toolbarBorderWidth || 1) + 'px'
if (!toolbarBorder){
toolbarBorder = {}
toolbarBorder[props.toolbarPosition == 'top'? 'bottom': 'top'] = toolbarBorderWidth + ' solid ' + toolbarBorderColor
}
var defaultStyle = {
margin : props.toolbarMargin,
padding: props.toolbarPadding,
border : toolbarBorder
}
if (defaultStyle.border && typeof defaultStyle.border == 'object'){
var border = defaultStyle.border
delete defaultStyle.border
Object.keys(border).forEach(function(key){
var name = 'border' + toUpperFirst(key)
defaultStyle[name] = border[key]
})
}
var style = assign({}, props.defaultToolbarStyle, defaultStyle, props.toolbarStyle)
return normalize(style)
},
bodyFactory: function(props, bodyProps) {
var style = normalize({
flex : 1,
display : 'flex',
flexFlow: 'column'
})
var bodyFactory = this.props.bodyFactory || React.DOM.div
var body = bodyFactory(bodyProps)
var toolbar = props.toolbar
var children = props.toolbarPosition == 'top'?
[toolbar, body]:
[body, toolbar]
return React.createElement("div", {style: style, children: children})
}
})
MessageBox.Toolbar = Toolbar
MessageBox.Button = Button
module.exports = MessageBox
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
function ToObject(val) {
if (val == null) {
throw new TypeError('Object.assign cannot be called with null or undefined');
}
return Object(val);
}
module.exports = Object.assign || function (target, source) {
var from;
var keys;
var to = ToObject(target);
for (var s = 1; s < arguments.length; s++) {
from = arguments[s];
keys = Object.keys(Object(from));
for (var i = 0; i < keys.length; i++) {
to[keys[i]] = from[keys[i]];
}
}
return to;
};
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var React = __webpack_require__(1)
, hasOwn = Object.prototype.hasOwnProperty
, version = React.version.split('.').map(parseFloat)
, RESERVED = {
className: resolve(joinClasses),
children: function(){},
key: function(){},
ref: function(){},
style: resolve(extend)
};
module.exports = function cloneWithProps(child, props) {
var newProps = mergeProps(props, child.props);
if (!hasOwn.call(newProps, 'children') && hasOwn.call(child.props, 'children'))
newProps.children = child.props.children;
// < 0.11
if (version[0] === 0 && version[1] < 11)
return child.constructor.ConvenienceConstructor(newProps);
// 0.11
if (version[0] === 0 && version[1] === 11)
return child.constructor(newProps);
// 0.12
else if (version[0] === 0 && version[1] === 12){
MockLegacyFactory.isReactLegacyFactory = true
MockLegacyFactory.type = child.type
return React.createElement(MockLegacyFactory, newProps);
}
// 0.13+
return React.createElement(child.type, newProps);
function MockLegacyFactory(){}
}
function mergeProps(currentProps, childProps) {
var newProps = extend(currentProps), key
for (key in childProps) {
if (hasOwn.call(RESERVED, key) )
RESERVED[key](newProps, childProps[key], key)
else if ( !hasOwn.call(newProps, key) )
newProps[key] = childProps[key];
}
return newProps
}
function resolve(fn){
return function(src, value, key){
if( !hasOwn.call(src, key)) src[key] = value
else src[key] = fn(src[key], value)
}
}
function joinClasses(a, b){
if ( !a ) return b || ''
return a + (b ? ' ' + b : '')
}
function extend() {
var target = {};
for (var i = 0; i < arguments.length; i++)
for (var key in arguments[i]) if (hasOwn.call(arguments[i], key))
target[key] = arguments[i][key]
return target
}
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var hasOwn = __webpack_require__(8)
var getPrefixed = __webpack_require__(9)
var map = __webpack_require__(10)
var plugable = __webpack_require__(11)
function plugins(key, value){
var result = {
key : key,
value: value
}
;(RESULT.plugins || []).forEach(function(fn){
var tmp = map(function(res){
return fn(key, value, res)
}, result)
if (tmp){
result = tmp
}
})
return result
}
function normalize(key, value){
var result = plugins(key, value)
return map(function(result){
return {
key : getPrefixed(result.key, result.value),
value: result.value
}
}, result)
return result
}
var RESULT = function(style){
var k
var item
var result = {}
for (k in style) if (hasOwn(style, k)){
item = normalize(k, style[k])
if (!item){
continue
}
map(function(item){
result[item.key] = item.value
}, item)
}
return result
}
module.exports = plugable(RESULT)
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
/** @jsx React.DOM */'use strict';
var React = __webpack_require__(1)
var assign = __webpack_require__(18)
var DragHelper = __webpack_require__(19)
var Region = __webpack_require__(20)
var normalize = __webpack_require__(30)
var EVENT_NAMES = __webpack_require__(21)
var matchesSelector = __webpack_require__(22)
var bufferFn = __webpack_require__(23)
var getRelativeRegion = __webpack_require__(16)
var getConstrainRegion = __webpack_require__(17)
var getHandles = __webpack_require__(12)
var onResizeDrag = __webpack_require__(13)
var supportsDialog = false
function emptyFn(){}
var ID = 0
var LAYER_CLASS = 'react-window-layer'
var Manager = __webpack_require__(14)
var ReactWindow = React.createClass({displayName: "ReactWindow",
display: 'ReactWindow',
mixins: [
__webpack_require__(15)
],
getDefaultProps: function(){
return {
handleWidth: 20,
stateful: true,
onMount: emptyFn,
onResizeStart: emptyFn,
onResizeDrag : emptyFn,
onResize : emptyFn,
onMoveStart: emptyFn,
onMoveDrag : emptyFn,
onMove : emptyFn,
onMaximizeChange: emptyFn,
renderOnVisible: true,
defaultStyle: {
background: 'white',
padding : 0,
position : 'absolute',
boxSizing : 'border-box',
border: '1px solid gray'
},
defaultCenteredStyle: {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
fontSmoothing: 'subpixel-antialiased'
// margin: 'auto',
// left : 0,
// right : 0,
// top : 0,
// bottom: 0
},
defaultTitleStyle: {
position : 'relative',
boxSizing: 'border-box',
background: 'rgb(217, 217, 217)'
},
defaultBodyStyle: {
position : 'relative',
boxSizing: 'border-box',
overflow: 'auto'
},
defaultMaximizedStyle: {
width : '100%',
height: '100%',
right : 'inherit',
bottom: 'inherit',
left : 0,
top : 0
},
visibleDisplayValue: 'block',
position: null,
size : null,
innerStyle: {
display : 'flex',
flexDirection: 'column',
position : 'relative',
width : '100%',
height : '100%'
},
tagName: supportsDialog?
'dialog':
'div',
titleBorder: '',
bodyBorder: '',
anchor: {
top : true,
left: true
},
aspectRatioPrecision: 5,
keepAspectRatio: false,
resizeHandles: true,
resizable: true,
draggable: true,
dragCursor: 'pointer',
maximizable: true,
maximizeOnDoubleClick: true,
constrainTo: false,
constrainOnResize: true,
constrainOnResizeBuffer: 50,
centered: false,
modal: false,
bodyStyle: {
},
handleStyle: null,
bodyPadding: 10,
titleStyle: {},
titlePadding: 10,
bodyClassName: '',
titleClassName: ''
}
},
getInitialState: function(){
return {
id: 'react-window-' + ID++,
dragging: false,
resizing: false
}
},
componentDidMount: function(){
var domNode = this.getDOMNode()
this.props.onMount(this, domNode)
this.adjustOnRender()
this.checkWindowResizeListener()
this.register()
},
register: function(){
this.getManager().register(this, this.getId())
},
unregister: function(){
this.getManager().unregister(this.getId())
},
getManager: function(){
return this.props.manager || Manager
},
getId: function(){
return this.props.id || this.state.id
},
checkWindowResizeListener: function(){
var maximized = this.prepareMaximized(this.props, this.state)
if (this.props.constrainTo && this.props.constrainOnResize && !maximized){
if (!this.windowResizeListener){
this.windowResizeListener = bufferFn(this.onWindowResize, this.props.constrainOnResizeBuffer)
window.addEventListener('resize', this.windowResizeListener, false)
}
} else if (this.windowResizeListener){
this.detachWindowResizeListener()
}
},
detachWindowResizeListener: function(){
window.removeEventListener('resize', this.windowResizeListener)
this.windowResizeListener = null
},
componentWillUnmount: function(){
if (this.windowResizeListener){
this.detachWindowResizeListener()
}
this.layer = null
this.unregister()
},
componentDidUpdate: function(){
this.adjustOnRender()
this.checkWindowResizeListener()
},
onWindowResize: function(){
var props = this.props
var anchor = props.anchor || {}
var constrainRegion = this.getConstrainRegion(props)
var region = this.getRegion()
var clone = region.clone()
var anchorRight = anchor.right
var anchorBottom = anchor.bottom
if (constrainRegion && !anchorRight && !anchorBottom){
var constrained = region.constrainTo(constrainRegion)
if (constrained){
var relativeRegion = this.getRelativeRegion()
relativeRegion.set({
left : relativeRegion.left + region.left - clone.left,
top : relativeRegion.top + region.top - clone.top,
width : region.width,
widthheight: region.height
})
this.doResize(relativeRegion)
}
}
},
adjustOnRender: function(){
if (this.props.modal){
var layer = this.getLayer()
layer.style.zIndex = this.visibleZIndex - 1
}
},
getLayer: function(){
var layer = this.layer
if (!layer){
var parentNode = this.getDOMNode().parentNode
var children = parentNode.children
var i = 0
var len = children.length
var child
var selector = '.' + LAYER_CLASS
for (; i < len; i++){
child = children[i]
if (child && matchesSelector(child, selector)){
layer = child
break
}
}
if (!layer){
layer = this.createLayer()
parentNode.appendChild(layer)
}
this.layer = layer
}
return layer
},
createLayer: function(){
var layer = document.createElement('div')
layer.className = LAYER_CLASS
layer.style.position = 'absolute'
layer.style.top = '0px'
layer.style.left = '0px'
layer.style.width = '100%'
layer.style.height = '100%'
return layer
},
render: function(){
var state = this.state
var props = this.prepareProps(this.props, state)
if (!props.visible && !props.renderOnVisible){
return false
}
var titleNode = this.renderTitle(props)
var bodyNode = this.renderBody(props)
return React.DOM[props.tagName](props,
props.handles,
React.createElement("div", {style: normalize(props.innerStyle)},
titleNode,
bodyNode
)
)
},
prepareProps: function(thisProps, state) {
var props = assign({}, thisProps)
props.maximized = this.prepareMaximized(props, state)
props.centered = this.prepareCentered(props, state)
props.resizeOrDrag = state.resizing || state.dragging
props.position = this.preparePosition(props, state)
props.region = this.prepareRegion(props, state)
props.className = this.prepareClassName(props, state)
props.handles = this.prepareHandles(props, state)
props.style = this.prepareStyle(props, state)
props.onMouseDown = this.handleMouseDown
delete props.draggable
props['data-centered'] = props.centered
props['data-maximized'] = props.maximized
return props
},
prepareRegion: function(props, state) {
return state.region
},
preparePosition: function(props, state) {
var position = props.position
if (props.stateful && state.region){
position = state.region
}
return position
},
prepareHandles: function(props, state) {
var handles
if (props.resizable && !props.maximized){
handles = this.prepareResizeHandles(props, state).map(this.renderHandle.bind(this, props))
}
return handles
},
prepareClassName: function(props, state) {
var className = props.className || ''
className += ' react-window'
return className
},
prepareMaximized: function(props, state) {
var maximized = props.maximized
if (props.stateful && typeof state.maximized !== 'undefined'){
maximized = state.maximized
}
return maximized
},
prepareCentered: function(props, state) {
var centered = props.centered
if (state.centered !== undefined){
centered = state.centered
}
centered = state.dragging || state.resizing?
false:
centered
return centered
},
prepareResizeHandles: function(props, state){
var handles = props.resizeHandles
var allHandles = getHandles({
outside : props.handlesOutside,
width : props.handleWidth,
handleStyle: props.handleStyle
})
var configHandles = {}
if (typeof handles == 'string'){
handles.split(' ').forEach(function(handleName){
if (handleName in allHandles){
configHandles[handleName] = assign({}, allHandles[handleName])
}
//<debug>
else {
console.warn('Cannot find handle', handleName)
}
//</debug>
})
} else if (handles === true){
configHandles = assign({}, allHandles)
}
return Object.keys(configHandles).map(function(handleName){
var handle = configHandles[handleName]
var style = handle.style
if (state.dragging){
style.cursor = props.dragCursor
}
assign(handle, {
name : handleName,
style: style
})
return handle
})
},
prepareSize: function(props, state) {
var result = {}
var size = props.size
if (props.stateful && (state.size || state.region)){
size = state.size !== undefined?
state.size:
state.region
}
var sizeType = typeof size
var single = sizeType == 'number' || sizeType == 'string' || size === null
var width = single? size: size.width
var height = single? size: size.height
if (width != null){
result.width = width
}
if (height != null){
result.height = height
}
return result
},
prepareStyle: function(props, state){
var style = assign({
border: props.border
}, props.defaultStyle)
assign(style, this.getCenteredStyle(props))
var anchorLeft = props.anchor.left
var anchorTop = props.anchor.top
var anchorBottom = props.anchor.bottom
var anchorRight = props.anchor.right
//size
var size = props.size = this.prepareSize(props, state)
assign(style,
size,
props.style,
this.getRegionStyle(props.region)
)
//position
var position = props.position
if (position && !props.resizeOrDrag){
style.top = position.top
style.left = position.left
var anchorBottomOrRight = anchorBottom || anchorRight
if (this.isMounted() && this.updateAnchor && anchorBottomOrRight){
var parentRegion = this.getParentRegion()
var thisRegion = this.getRegion()
var offsetRight = parentRegion.right - thisRegion.right
var offsetBottom = parentRegion.bottom - thisRegion.bottom
if (anchorRight){
style.right = offsetRight
delete style.width
}
if (anchorBottom){
style.bottom = offsetBottom
delete style.height
}
}
}
this.updateAnchor = false
if (state.activeHandle){
style.cursor = state.activeHandle.style.cursor
}
assign(style,
this.getMinMaxSize(props),
this.getMaximizedStyle(props),
this.getVisibleStyle(props)
)
if (this.visible != props.visible){
style.zIndex = this.visibleZIndex = this.getZIndex()
} else {
style.zIndex = this.visibleZIndex
}
this.visible = props.visible
return normalize(style)
},
toTop: function() {
this.visible = 'refresh'
this.setState({})
},
getMinMaxSize: function(props){
var sizeType
var single
var style = props.style || {}
var result = {}
if (props.minSize){
sizeType = typeof props.minSize
single = sizeType == 'number' || sizeType == 'string'
result.minWidth = single? props.minSize: props.minSize.minWidth
result.minHeight = single? props.minSize: props.minSize.minHeight
}
if (props.maxSize){
sizeType = typeof props.maxSize
single = sizeType == 'number' || sizeType == 'string'
result.maxWidth = single? props.maxSize: props.maxSize.maxWidth
result.maxHeight = single? props.maxSize: props.maxSize.maxHeight
}
if (result.minWidth == undefined && style.minWidth != undefined){
result.minWidth = style.minWidth
}
if (result.maxWidth == undefined && style.maxWidth != undefined){
result.maxWidth = style.maxWidth
}
if (result.minHeight == undefined && style.minHeight != undefined){
result.minHeight = style.minHeight
}
if (result.maxHeight == undefined && style.maxHeight != undefined){
result.maxHeight = style.maxHeight
}
return result
},
getCenteredStyle: function(props) {
if (props.centered){
return assign({}, props.defaultCenteredStyle, props.centeredStyle)
}
},
getMaximizedStyle: function(props) {
if (props.maximized){
return assign({}, props.defaultMaximizedStyle, props.maximizedStyle)
}
},
getVisibleStyle: function(props) {
var style = props.style || {}
return {
display: props.visible?
style.display && style.display != 'none' ?
style.display:
props.visibleDisplayValue
:
'none'
}
},
getRegionStyle: function(region) {
if (!region){
return
}
return {
top : region.top,
left : region.left,
width : region.width,
height: region.height,
right : 'inherit',
bottom: 'inherit'
}
},
handleMouseDown: function(event){
if (this.props.onMouseDown){
this.props.onMouseDown(event)
}
},
getZIndex: function(){
var manager = this.getManager()
var zIndex = manager.getNextZIndex()
return zIndex
},
renderHandle: function(props, handle){
var events = {}
events[EVENT_NAMES.onMouseDown] = this.onHandleMouseDown.bind(this, props, handle)
return React.createElement("div", React.__spread({key: handle.name, style: handle.style, className: 'handle handle-' + handle.name}, events))
},
getParentRegion: function() {
return this.getRegion(this.getDOMNode().parentNode)
},
getRelativeRegion: function() {
return getRelativeRegion(this.getDOMNode())
},
getRegion: function(domNode) {
return Region.from(domNode || this.getDOMNode())
},
getConstrainRegion: function(props){
props = props || this.props
return getConstrainRegion(props.constrainTo, this.getDOMNode())
},
onHandleMouseDown: function(props, handle, event){
event.preventDefault()
if (props.maximized){
return
}
var region = this.getRegion()
var constrainRegion = this.getConstrainRegion()
var relativeRegion = this.getRelativeRegion()
var state = {
resizing : true,
region : relativeRegion,
activeHandle: handle
}
this.props.onResizeStart(event)
var defaultConfig = {
keepAspectRatio : props.keepAspectRatio,
horizontalResizeOnly: props.horizontalResizeOnly,
verticalResizeOnly : props.verticalResizeOnly,
constrainRegion : constrainRegion,
activeHandle : handle,
relativeRegion : relativeRegion,
initialOffset : {
top : region.top - relativeRegion.top,
left: region.left - relativeRegion.left
},
sizeContraints : this.getMinMaxSize(props),
initialResizeRegion : region
}
if (props.keepAspectRatio){
defaultConfig.aspectRatio = (region.width / region.height).toFixed(props.aspectRatioPrecision) * 1
}
DragHelper(event, {
constrainTo: constrainRegion,
scope: this,
onDragStart: function(event, config){
assign(config, defaultConfig)
this.handleResizeDragStart(event, config)
},
onDrag: function(event, config){
this.handleResizeDrag(event, config)
},
onDrop: function(event, config){
this.handleResizeDrop(event, config)
this.setState({
centered : false,
resizing : false,
activeHandle: null
})
}
})
this.visible = 'refresh'
this.setState(state)
},
handleResizeDragStart: function(event, config){
this.props.onResizeStart(config.relativeRegion)
},
handleResizeDrag: function(event, config){
var resizeRegion = onResizeDrag(config)
var region = this.state.region
region.set({
width : resizeRegion.width,
height: resizeRegion.height,
left : resizeRegion.left - config.initialOffset.left,
top : resizeRegion.top - config.initialOffset.top
})
if (region){
this.setState({
region: region
})
this.props.onResizeDrag(region)
}
},
handleResizeDrop: function(event, config){
var diff = config? config.diff: {}
var region = this.state.region
if (!region || !diff || (!diff.top && !diff.left)){
return
}
this.doResize(region)
},
doResize: function(region){
if (this.props.stateful){
this.updateAnchor = true
this.setState({
region: region
})
}
this.props.onResize(region)
},
renderTitle: function(props){
var titleFactory = props.titleFactory || React.DOM.div
var titleStyle = this.prepareTitleStyle(props)
var titleProps = {
style: titleStyle,
className: props.titleClassName
}
titleProps[EVENT_NAMES.onMouseDown] = this.handleTitleMouseDown
titleProps.className = titleProps.className || ''
titleProps.className += ' title'
titleProps.onDoubleClick = this.handleTitleDoubleClick.bind(this, props)
return titleFactory(titleProps,
React.createElement("div", null, props.title)
)
},
handleTitleDoubleClick: function(props, event){
var maximized = !props.maximized
if (props.stateful){
this.setState({
maximized: maximized
})
}
this.props.onMaximizeChange(maximized)
},
renderBody: function(props){
var bodyFactory = props.bodyFactory || React.DOM.div
var bodyStyle = this.prepareBodyStyle(props)
var bodyProps = {
style : bodyStyle,
className: props.bodyClassName,
children : props.children
}
bodyStyle.flex = 1
return bodyFactory(bodyProps)
},
handleTitleMouseDown: function(event){
this.visible = 'refresh'
//set state so that it gets bumped to the top
this.setState({})
if (this.props.draggable){
this.setupTitleDrag(event)
}
},
setupTitleDrag: function(event){
var constrainTo = this.getConstrainRegion()
var region = this.getRelativeRegion()
var cloneRegion = region.clone()
event.preventDefault()
DragHelper(event, {
region : this.getRegion(),
constrainTo: constrainTo,
scope: this,
onDragStart: function(event, config){
config._initialRegion = region
config._cloneRegion = cloneRegion
this.setState({
dragging : true,
region: region
})
this.handleDragStart(event, config)
},
onDrag: function(event, config){
this.handleDrag(event, config)
},
onDrop: function(event, config){
this.handleDrop(event, config)
}
})
},
handleDragStart: function(event, config){
this.props.onMoveStart(config, event)
},
handleDrag: function(event, config){
var region = config._cloneRegion
region.set(config._initialRegion)
region.shift(config.diff)
this.setState({
region: region
})
this.props.onMoveDrag(region, config, event)
},
handleDrop: function(event, config){
var diff = config? config.diff: {}
if (!diff || (!diff.top && !diff.left)){
return
}
var region = this.state.region
var state = {
dragging: false,
centered: false
}
this.updateAnchor = true
this.setState(state)
this.props.onMove(region)
}
})
module.exports = ReactWindow
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
/** @jsx React.DOM */'use strict';
var React = __webpack_require__(1)
var assign = __webpack_require__(24)
function emptyFn(){}
function NAV(href){
window.location.href = href
}
module.exports = React.createClass({
displayName: 'ReactButton',
propTypes: {
fn: React.PropTypes.func,
onClick: React.PropTypes.func,
onMouseDown: React.PropTypes.func,
onMouseUp: React.PropTypes.func,
className : React.PropTypes.string,
activeClassName : React.PropTypes.string,
overClassName : React.PropTypes.string,
focusedClassName: React.PropTypes.string
},
getDefaultProps: function() {
return {
defaultStyle: {
display : 'inline-block',
boxSizing: 'border-box',
padding : 5,
border : '1px solid gray',
cursor : 'pointer'
},
defaultDisabledStyle: {
background: 'rgb(221, 221, 221)',
color: 'rgb(128, 128, 128)',
cursor: 'default'
},
defaultDisabledAnchorStyle: {
cursor: 'default'
},
defaultAnchorStyle: {
textDecoration: 'none'
},
href: ''
}
},
getInitialState: function() {
return {
mouseOver: false,
active: false
}
},
render: function(){
var props = this.prepareProps(this.props, this.state)
var defaultAnchorFactory = React.DOM.a
var anchorFactory = props.anchorFactory || defaultAnchorFactory
var anchor = anchorFactory(props.anchorProps)
if (anchor === undefined){
anchor = defaultAnchorFactory(props.anchorProps)
}
return React.createElement("div", React.__spread({}, props),
anchor
)
},
prepareProps: function(thisProps, state) {
var props = {}
assign(props, thisProps)
props.active = !!state.active
props.mouseOver = !!state.mouseOver
props.focused = !!state.focused
props.style = this.prepareStyle(props, state)
props.className = this.prepareClassName(props, state)
props.onMouseEnter = this.handleMouseEnter.bind(this, props)
props.onMouseLeave = this.handleMouseLeave.bind(this, props)
props.onMouseDown = this.handleMouseDown.bind(this, props)
props.onMouseUp = this.handleMouseUp.bind(this, props)
var handleClick = this.handleClick.bind(this, props)
props.onClick = props.interceptClick?
props.interceptClick.bind(this, handleClick):
handleClick
props.anchorProps = this.prepareAnchorProps(props)
return props
},
prepareAnchorProps: function(props) {
var anchorProps = {}
assign(anchorProps, {
children : props.children,
style : this.prepareAnchorStyle(props),
href: props.href
})
anchorProps.onClick = this.handleAnchorClick.bind(this, props)
anchorProps.onFocus = this.handleAnchorFocus.bind(this, props)
anchorProps.onBlur = this.handleAnchorBlur.bind(this, props)
return anchorProps
},
prepareAnchorStyle: function(props) {
var colorStyle = props.style.color?
{color: props.style.color }:
null
var style = assign({}, props.defaultAnchorStyle, colorStyle, props.anchorStyle)
if (props.mouseOver){
assign(style, props.defaultOverAnchorStyle, props.overAnchorStyle)
}
if (props.active){
assign(style, props.defaultActiveAnchorStyle, props.activeAnchorStyle)
}
if (props.focused){
assign(style, props.defaultFocusedAnchorStyle, props.focusedAnchorStyle)
}
if (props.disabled){
assign(style, props.defaultDisabledAnchorStyle, props.disabledAnchorStyle)
}
return style
},
prepareClassName: function(props) {
var className = props.className || ''
className += ' z-button'
if (props.active){
className +=' z-active ' + (props.activeClassName || '')
}
if (props.mouseOver && props.overClassName){
className += ' ' + props.overClassName
}
if (props.focused && props.focusedClassName){
className += ' ' + props.focusedClassName
}
if (props.disabled && props.disabledClassName){
className += ' ' + props.disabledClassName
}
return className
},
prepareStyle: function(props) {
var style = {}
assign(style, props.defaultStyle, props.style)
if (props.focused){
assign(style, props.defaultFocusedStyle, props.focusedStyle)
}
if (props.mouseOver){
assign(style, props.defaultOverStyle, props.overStyle)
}
if (props.active){
assign(style, props.defaultActiveStyle, props.activeStyle)
}
if (props.disabled){
assign(style, props.defaultDisabledStyle, props.disabledStyle)
}
return style
},
navigate: function(props) {
if (props.href){
;(props.navigate || NAV)(props.href)
}
},
isFocused: function() {
return this.state.focused
},
handleAnchorFocus: function(props, event) {
if (props.disabled){
return
}
this.setState({
focused: true
})
},
handleAnchorBlur: function(props, event) {
if (props.disabled){
return
}
this.setState({
focused: false
})
},
handleAnchorClick: function(props, event) {
if (!props.href){
event.preventDefault()
}
},
handleClick: function(props, event) {
if (props.disabled){
return
}
if (props.href && (event.target && event.target.tagName !== 'A')){
this.navigate(props)
}
;(this.props.onClick || emptyFn)(event)
;(this.props.fn || emptyFn)(props, event)
},
handleMouseEnter: function(props, event) {
if (props.disabled){
return
}
this.setState({
mouseOver: true
})
;(this.props.onMouseEnter || emptyFn)(event)
},
handleMouseLeave: function(props, event) {
if (props.disabled){
return
}
this.setState({
mouseOver: false
})
;(this.props.onMouseLeave || emptyFn)(event)
},
handleMouseUp: function(props, event) {
this.setState({
active: false
})
window.removeEventListener('mouseup', this.handleMouseUp)
;(this.props.onMouseUp || emptyFn)(event)
},
handleMouseDown: function(props, event) {
event.preventDefault()
if (props.disabled){
return
}
this.setState({
active: true
})
window.addEventListener('mouseup', this.handleMouseUp)
;(this.props.onMouseDown || emptyFn)(event)
},
isActive: function() {
return !!this.state.active
}
})
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
/** @jsx React.DOM */'use strict';
var React = __webpack_require__(1)
var normalize = __webpack_require__(31)
var assign = __webpack_require__(25)
var cloneWithProps = __webpack_require__(26)
var Toolbar = React.createClass({
displayName: 'ReactToolbar',
getDefaultProps: function() {
return {
isReactToolbar: true,
defaultStyle: {
display: 'flex',
boxSizing: 'border-box'
},
defaultHorizontalStyle: {
flexFlow: 'row',
alignItems: 'center',
alignContent: 'stretch'
},
defaultVerticalStyle: {
flexFlow: 'column',
alignItems: 'stretch',
alignContent: 'center'
}
}
},
render: function(){
var state = this.state
var props = this.prepareProps(this.props, state)
return React.createElement("div", React.__spread({}, props))
},
prepareProps: function(thisProps, state) {
var props = assign({}, thisProps)
props.vertical = props.orientation == 'vertical'
props.style = this.prepareStyle(props, state)
props.children = this.prepareChildren(props, state)
return props
},
prepareStyle: function(props, state) {
var defaultOrientationStyle = props.defaultHorizontalStyle
var orientationStyle = props.horizontalStyle
if (props.vertical){
defaultOrientationStyle = props.defaultVerticalStyle
orientationStyle = props.verticalStyle
}
var style = assign({}, props.defaultStyle, defaultOrientationStyle, props.style, orientationStyle)
return normalize(style)
},
prepareChildren: function(props) {
var regionCount = 0
React.Children.forEach(props.children, function(child){
if (child && child.props && child.props.isToolbarRegion){
regionCount++
}
})
if (!regionCount){
return React.createElement(Toolbar.Region, null,
props.children
)
}
var regionIndex = -1
var children = React.Children.map(props.children, function(child){
if (child && child.props && child.props.isToolbarRegion){
regionIndex++
var childProps = child.props
var first = regionIndex === 0
var last = regionIndex === regionCount - 1
var inBetween = !first && !last
var flex = inBetween || regionCount < 3
var newProps = {
first : first,
last : last,
inBetween : inBetween,
flex : childProps.flex? childProps.flex: flex,
orientation: props.orientation,
align : childProps.align || 'center'
}
if (!childProps.align && regionCount > 1){
if (first){
newProps.align = 'start'
} else if (last){
newProps.align = 'end'
}
}
child = cloneWithProps(child, newProps)
}
return child
})
return children
}
})
Toolbar.Region = React.createClass({
displayName: 'ReactToolbarRegion',
getDefaultProps: function(){
return {
isToolbarRegion: true,
defaultStyle: {
display : 'inline-block',
alignSelf: 'center',
boxSizing: 'border-box'
},
defaultVerticalStyle: {
display : 'flex',
flexFlow: 'column'
}
}
},
render: function(){
var props = this.prepareProps(this.props)
return React.createElement("div", React.__spread({}, props))
},
prepareProps: function(thisProps) {
var props = assign({}, thisProps)
props.vertical = props.orientation == 'vertical'
props.style = this.prepareStyle(props)
return props
},
prepareStyle: function(props) {
var alignStyle = {}
var defaultStyle
if (props.flex){
defaultStyle = { flex: props.flex === true? 1: props.flex }
}
if (props.vertical){
alignStyle.justifyContent = props.align == 'start'?
'flex-start':
props.align == 'end'?
'flex-end':
'center'
} else {
alignStyle.textAlign = props.align == 'start'?
'left':
props.align == 'end'?
'right':
'center'
}
var defaultOrientationStyle = props.defaultHorizontalStyle
var orientationStyle = props.horizontalStyle
if (props.vertical){
defaultOrientationStyle = props.defaultVerticalStyle
orientationStyle = props.verticalStyle
}
var style = assign({}, props.defaultStyle, defaultStyle, defaultOrientationStyle, props.style, orientationStyle, alignStyle)
return normalize(style)
},
})
module.exports = Toolbar
/***/ },
/* 8 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
module.exports = function(obj, prop){
return Object.prototype.hasOwnProperty.call(obj, prop)
}
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var getStylePrefixed = __webpack_require__(27)
var properties = __webpack_require__(28)
module.exports = function(key, value){
if (!properties[key]){
return key
}
return getStylePrefixed(key, value)
}
/***/ },
/* 10 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
module.exports = function(fn, item){
if (!item){
return
}
if (Array.isArray(item)){
return item.map(fn).filter(function(x){
return !!x
})
} else {
return fn(item)
}
}
/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var getCssPrefixedValue = __webpack_require__(29)
module.exports = function(target){
target.plugins = target.plugins || [
(function(){
var values = {
'flex':1,
'inline-flex':1
}
return function(key, value){
if (key === 'display' && value in values){
return {
key : key,
value: getCssPrefixedValue(key, value)
}
}
}
})()
]
target.plugin = function(fn){
target.plugins = target.plugins || []
target.plugins.push(fn)
}
return target
}
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var assign = __webpack_require__(18)
var normalize = __webpack_require__(30)
var HANDLE_COORDINATES = (function(){
return {
t: {
x: 0,
y: -1
},
tl: {
x: -1,
y: -1
},
tr: {
x: 1,
y: -1
},
l: {
x: -1,
y: 0
},
bl: {
x: -1,
y: 1
},
b: {
x: 0,
y: 1
},
br: {
x: 1,
y: 1
},
r: {
x: 1,
y: 0
}
}
})()
var GET_HANDLE_STYLES = function(config){
var outside = false
var width = 5
if (config && config.width){
width = config.width
}
if (config && config.outside){
outside = config.outside
}
var halfWidth = width / 2
return {
t: {
top : !outside? -halfWidth: HANDLE_COORDINATES.t.y * width,
left : !outside? halfWidth: HANDLE_COORDINATES.t.x * width,
right : !outside? halfWidth: 0,
height: width,
cursor : 'n-resize'
},
tl: {
top : !outside? -halfWidth: HANDLE_COORDINATES.tl.y * width,
left : !outside? -halfWidth: HANDLE_COORDINATES.tl.x * width,
width: width,
height: width,
cursor : 'nw-resize'
},
tr: {
top : !outside? -halfWidth: HANDLE_COORDINATES.tr.y * width,
right : !outside? -halfWidth: -HANDLE_COORDINATES.tr.x * width,
width: width,
height: width,
cursor : 'ne-resize'
},
l: {
top : !outside? halfWidth: HANDLE_COORDINATES.l.y * width,
left : !outside? -halfWidth: HANDLE_COORDINATES.l.x * width,
bottom: !outside? halfWidth: 0,
width: width,
cursor : 'w-resize'
},
bl: {
bottom : !outside? -halfWidth:-HANDLE_COORDINATES.bl.y * width,
left : !outside? -halfWidth: HANDLE_COORDINATES.bl.x * width,
width: width,