apeman-react-range
Version:
apeman react package for range input component.
1,817 lines (1,577 loc) • 824 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'),
ApRange = require('../../lib/ap_range');
module.exports = React.createClass({
displayName: 'exports',
getInitialState: function () {
return {};
},
setDebugText: function (text) {
var s = this;
s.setState({
debugText: text
});
console.debug(text);
},
render: function () {
var s = this,
state = s.state;
return React.createElement(
'div',
{ style: {
'position': 'relative'
} },
React.createElement(ApRange, {
step: 0.1,
onChange: function (from, to, ui) {
s.setDebugText('Value changed: ' + from + ' ' + to);
} }),
React.createElement('br', null),
React.createElement('br', null),
React.createElement(
'div',
null,
React.createElement(
'span',
null,
state.debugText
)
)
);
}
});
},{"../../lib/ap_range":3,"react":212}],2:[function(require,module,exports){
"use strict";
const React = require('react'),
ReactDOM = require('react-dom');
const Demo = require('./demo.component.js');
window.React = React;
let DemoFactory = React.createFactory(Demo);
ReactDOM.render(DemoFactory(), document.getElementById('demo-wrap'));
},{"./demo.component.js":1,"react":212,"react-dom":82}],3:[function(require,module,exports){
/**
* apeman react package for range input component.
* @constructor ApRange
*/
"use strict";
const React = require('react'),
ReactDOM = require('react-dom'),
types = React.PropTypes,
chopcal = require('chopcal'),
rangecal = require('rangecal'),
numcal = require('numcal'),
classnames = require('classnames'),
ApTouchable = require('apeman-react-touchable')['ApTouchable'],
ApDraggable = require('apeman-react-draggable')['ApDraggable'],
ApRangeLabel = require('./ap_range_label');
/** @lends ApRange */
const ApRange = React.createClass({
displayName: 'ApRange',
//--------------------
// Specs
//--------------------
propTypes: {
from: types.number,
to: types.number,
min: types.number,
max: types.number,
step: types.number,
onChange: types.func,
barOnly: types.bool
},
statics: {},
getInitialState: function () {
let s = this,
props = s.props;
return {
minX: 0,
maxX: 1200,
fromX: 0,
toX: 1200,
fromValue: props.from,
toValue: props.to
};
},
getDefaultProps: function () {
return {
from: 25,
to: 75,
min: 0,
max: 100,
step: 0.01,
barOnly: false
};
},
render: function () {
let s = this,
props = s.props,
state = s.state;
return React.createElement(
'div',
{ className: classnames('ap-range', props.className) },
React.createElement(
'div',
{ className: 'ap-range-inner' },
s._renderLabel(props.min),
React.createElement(
'div',
{ className: 'ap-range-bar-wrap' },
React.createElement(
ApTouchable,
{ onTap: s.rangeBarDidTap },
React.createElement(
'div',
{ className: 'ap-range-bar' },
React.createElement('div', { className: 'ap-range-bar-bg' }),
React.createElement('div', { className: 'ap-range-bar-highlight',
style: { left: state.fromX, width: state.toX - state.fromX } })
)
),
React.createElement(
ApDraggable,
{ onMove: s.rangeFromHandleDidMove,
shouldMove: s.shouldRangeFromHandleMove,
x: state.fromX,
minX: state.minX,
maxX: state.maxX,
className: 'ap-range-handle ap-range-handle-from',
direction: 'HORIZONTAL' },
React.createElement('div', { className: 'ap-range-handle-icon' })
),
React.createElement(
ApDraggable,
{ onMove: s.rangeToHandleDidMove,
shouldMove: s.shouldRangeToHandleMove,
x: state.toX,
minX: state.minX,
maxX: state.maxX,
className: 'ap-range-handle ap-range-handle-to',
direction: 'HORIZONTAL' },
React.createElement('div', { className: 'ap-range-handle-icon' })
)
),
s._renderLabel(props.max)
)
);
},
//--------------------
// Lifecycle
//--------------------
componentDidMount: function () {
let s = this;
window.addEventListener('resize', s.resizeRange);
s.resizeRange();
s.resetRangeValues();
},
componentWillReceiveProps: function (nextProps) {
let s = this;
s.resetRangeValues();
},
componentWillUnmount: function () {
let s = this;
window.removeEventListener('resize', s.resizeRange);
},
//------------------
// Helper
//------------------
resizeRange: function (e) {
let s = this;
let state = s.state;
let w = ReactDOM.findDOMNode(s).offsetWidth;
let minX = 0,
maxX = w;
let fromRate = s._rateWithValue(state.fromValue),
toRate = s._rateWithValue(state.toValue);
s.setState({
minX: minX,
maxX: maxX,
fromX: rangecal.value(minX, maxX, fromRate),
toX: rangecal.value(minX, maxX, toRate)
});
},
rangeBarDidTap: function () {},
rangeFromHandleDidMove: function (e) {
let s = this,
fromValue = s._valueWithX(e.detail.x);
s.setRangeValues(fromValue, s.state.toValue, true);
},
rangeToHandleDidMove: function (e) {
let s = this,
toValue = s._valueWithX(e.detail.x);
s.setRangeValues(s.state.fromValue, toValue, false);
},
shouldRangeFromHandleMove: function () {
let s = this;
return true;
},
shouldRangeToHandleMove: function () {
let s = this;
return true;
},
resetRangeValues: function () {
let s = this;
setTimeout(function () {
let state = s.state;
s.setRangeValues(state.fromValue, state.toValue, true);
});
},
setRangeValues: function (fromValue, toValue, forwarding) {
let s = this;
let state = s.state,
props = s.props;
let minX = state.minX,
maxX = state.maxX;
let step = props.step;
if (toValue < fromValue) {
if (forwarding) {
toValue = fromValue;
} else {
fromValue = toValue;
}
}
let fromRate = s._rateWithValue(fromValue),
toRate = s._rateWithValue(toValue);
s.setState({
fromValue: fromValue,
toValue: toValue,
fromX: rangecal.value(minX, maxX, fromRate),
toX: rangecal.value(minX, maxX, toRate)
});
fromValue = chopcal.round(fromValue, step);
toValue = chopcal.round(toValue, step);
let duplicate = s._fromValue === fromValue && s._toValue === toValue;
if (duplicate) {
return;
}
s._fromValue = fromValue;
s._toValue = toValue;
if (props.onChange) {
props.onChange(fromValue, toValue, {
element: s
});
}
},
//------------------
// Private
//------------------
_rateWithValue: function (value) {
let s = this;
let min = s.props.min,
max = s.props.max;
value = rangecal.round(min, max, value);
return chopcal.round(rangecal.rate(min, max, value), 0.01);
},
_valueWithRate: function (rate) {
let s = this;
let min = s.props.min,
max = s.props.max;
let value = chopcal.round(rangecal.value(min, max, rate), 0.01);
return rangecal.round(min, max, value);
},
_valueWithX: function (x) {
let s = this;
let minX = s.state.minX,
maxX = s.state.maxX;
let rate = rangecal.rate(minX, maxX, x + 2);
return s._valueWithRate(rate);
},
_renderLabel: function (value) {
let s = this,
props = s.props;
if (props.barOnly) {
return null;
}
return React.createElement(ApRangeLabel, { value: value });
}
});
module.exports = ApRange;
},{"./ap_range_label":4,"apeman-react-draggable":9,"apeman-react-touchable":22,"chopcal":33,"classnames":36,"numcal":72,"rangecal":78,"react":212,"react-dom":82}],4:[function(require,module,exports){
/**
* Range label component.
* @constructor ApRangeLabel
*/
"use strict";
const React = require('react'),
types = React.PropTypes,
classnames = require('classnames');
/** @lends ApRangeLabel */
const ApRangeLabel = React.createClass({
displayName: 'ApRangeLabel',
//--------------------
// Specs
//--------------------
propTypes: {
value: types.number
},
getDefaultProps: function () {
return {
value: null
};
},
render: function () {
let s = this,
props = s.props;
return React.createElement(
'label',
{ className: classnames('ap-range-label', props.className) },
React.createElement(
'span',
null,
props.value
)
);
}
});
module.exports = ApRangeLabel;
},{"classnames":36,"react":212}],5:[function(require,module,exports){
/**
* apeman react package for draggable component.
* @augments ApComponent
* @constructor ApDraggable
*/
"use strict";
const React = require('react'),
ReactDOM = require('react-dom'),
types = React.PropTypes,
arrayfilter = require('arrayfilter'),
extend = require('extend'),
enums = require('./enums'),
consts = require('./consts'),
rangecal = require('rangecal'),
veccal = require('veccal'),
ApTouchable = require('apeman-react-touchable')['ApTouchable'];
/** @lends ApDraggable */
let ApDraggable = React.createClass({
displayName: 'ApDraggable',
//--------------------
// Specs
//--------------------
propTypes: {
onStart: types.func,
onMove: types.func,
onStop: types.func,
shouldMove: types.func,
direction: types.oneOf(enums.directions),
x: types.number,
minX: types.number,
maxX: types.number,
y: types.number,
minY: types.number,
maxY: types.number
},
statics: {
enums: enums,
movement: function (cx, cy, base, direction) {
let movement = veccal.subtract([cx, cy], [base.x, base.y]);
let x = movement[0],
y = movement[1];
switch (direction) {
case 'HORIZONTAL':
case 'LEFT':
case 'RIGHT':
y = 0;
break;
case 'VERTICAL':
case 'UP':
case 'DOWN':
x = 0;
break;
case 'NONE':
x = 0;
y = 0;
break;
default:
break;
}
return [x, y];
}
},
getInitialState: function () {
let s = this,
props = s.props;
return {
dragging: false,
base: {
x: 0,
y: 0
},
move: {
x: props.x || 0,
y: props.y || 0
}
};
},
getDefaultProps: function () {
return {
direction: "ALL",
shouldMove: function () {
return true;
},
minX: consts.MIN_SAFE_INTEGER,
maxX: consts.MAX_SAFE_INTEGER,
minY: consts.MIN_SAFE_INTEGER,
maxY: consts.MAX_SAFE_INTEGER
};
},
render: function () {
let s = this;
let props = s.props,
state = s.state;
let className = ['ap-draggable', props.className || '', state.dragging ? 'ap-draggable-dragging' : ''].filter(arrayfilter.emptyReject()).join(' ').trim();
return React.createElement(
ApTouchable,
{ className: className,
onPanStart: s.handlePanStart,
onPan: s.handlePanMove,
onPanEnd: s.handlePanEnd,
panThreshold: 1,
onPanCancel: s.handlePanCancel,
panDirection: props.direction
},
props.children
);
},
//--------------------
// Lifecycle
//--------------------
componentWillReceiveProps: function (nextProps) {
let s = this;
let state = s.state;
let x = nextProps.x,
y = nextProps.y;
if (x || y) {
x = x || state.move.x;
y = y || state.move.y;
s.setState({
move: {
x: x,
y: y
}
});
s.applyTransform(x, y);
}
},
//------------------
// Helper
//------------------
handlePanStart: function (e) {
let s = this;
let center = e.center;
s.dragStart(center.x, center.y);
},
handlePanMove: function (e) {
let s = this;
let center = e.center;
s.dragMove(center.x, center.y);
},
handlePanEnd: function (e) {
let s = this;
let center = e.center;
s.dragEnd(center.x, center.y);
},
handlePanCancel: function (e) {
let s = this;
let center = e.center;
s.dragEnd(center.x, center.y);
},
dragStart: function (cx, cy) {
let s = this;
let props = s.props,
state = s.state;
if (state.dragging) {
return;
}
let base = state.move;
let move = veccal.subtract([cx, cy], [base.x, base.y]);
let x = move[0],
y = move[1];
s.setState({
dragging: true,
base: { x: x, y: y },
move: { x: 0, y: 0 }
});
if (props.onStart) {
props.onStart.call(s, s.createEvent(x, y));
}
},
dragMove: function (cx, cy) {
let s = this;
let props = s.props,
state = s.state;
if (!state.dragging) {
return;
}
let move = ApDraggable.movement(cx, cy, state.base, props.direction);
let x = move[0],
y = move[1];
if (props.shouldMove) {
let skip = !props.shouldMove({ x: x, y: y });
if (skip) {
return;
}
}
s.applyTransform(x, y);
s.setState({
dragging: true,
move: { x: x, y: y }
});
if (props.onMove) {
let event = s.createEvent(x, y);
props.onMove.call(s, event);
}
},
dragEnd: function (cx, cy) {
let s = this;
let props = s.props,
state = s.state;
if (!state.dragging) {
return;
}
let move = ApDraggable.movement(cx, cy, state.base, props.direction);
let x = move[0],
y = move[1];
s.setState({
dragging: false
});
if (props.onStop) {
props.onStop.call(s, s.createEvent(x, y));
}
},
applyTransform: function (x, y) {
let s = this;
let props = s.props;
let minX = props.minX,
maxX = props.maxX,
minY = props.minY,
maxY = props.maxY;
let elm = ReactDOM.findDOMNode(s);
x = parseInt(rangecal.round(minX, maxX, x));
y = parseInt(rangecal.round(minY, maxY, y));
let transform = "translate(" + x + 'px, ' + y + 'px)';
let duplicate = s._transform === transform;
if (duplicate) {
return;
}
s._transform = transform;
elm.style.transform = transform;
},
createEvent: function (x, y) {
let s = this;
return new CustomEvent('ap:drag', {
detail: {
x: x,
y: y,
ref: s
}
});
}
});
module.exports = ApDraggable;
},{"./consts":7,"./enums":8,"apeman-react-touchable":22,"arrayfilter":26,"extend":10,"rangecal":78,"react":212,"react-dom":82,"veccal":215}],6:[function(require,module,exports){
/**
* Style for ApDraggable.
* @augments ApStyle
* @constructor ApDraggableStyle
*/
"use strict";
const React = require('react'),
ApStyle = require('apeman-react-style')['ApStyle'];
/** @lends ApDraggableStyle */
let ApDraggableStyle = React.createClass({
displayName: 'ApDraggableStyle',
propTypes: ApStyle.propTypes,
getDefaultProps: function () {
return {
scoped: false,
data: {
'.ap-draggable': {
'cursor': '-webkit-grab'
},
'.ap-draggable:active': {
'cursor': '-webkit-grabbing'
},
'.ap-draggable.ap-draggable-dragging': {
'boxShadow': '1px 1px 2px rgba(0,0,0,0.25)'
}
},
type: 'text/css'
};
},
render: function () {
let s = this,
props = s.props;
return React.createElement(
ApStyle,
props,
props.children
);
}
});
module.exports = ApDraggableStyle;
},{"apeman-react-style":14,"react":212}],7:[function(require,module,exports){
"use strict";
exports.MIN_SAFE_INTEGER = Number.MIN_SAFE_INTEGER || -9007199254740991;
exports.MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER || 9007199254740991;
},{}],8:[function(require,module,exports){
"use strict";
const ApTouchable = require('apeman-react-touchable')['ApTouchable'];
exports.directions = ApTouchable.enums.directions;
},{"apeman-react-touchable":22}],9:[function(require,module,exports){
/**
* apeman react package for draggable component.
* @module apeman-react-draggable
*/
"use strict";
module.exports = {
/**
* @memberof module:
* @name {@link module:~ApDraggableStyle|ApDraggableStyle
*/
get ApDraggableStyle() { return require('./ap_draggable_style'); },
/**
* @memberof module:
* @name {@link module:~ApDraggable|ApDraggable
*/
get ApDraggable() { return require('./ap_draggable'); },
get consts() { return require('./consts'); },
get enums() { return require('./enums'); }
};
},{"./ap_draggable":5,"./ap_draggable_style":6,"./consts":7,"./enums":8}],10:[function(require,module,exports){
'use strict';
var hasOwn = Object.prototype.hasOwnProperty;
var toStr = Object.prototype.toString;
var isArray = function isArray(arr) {
if (typeof Array.isArray === 'function') {
return Array.isArray(arr);
}
return toStr.call(arr) === '[object Array]';
};
var isPlainObject = function isPlainObject(obj) {
if (!obj || toStr.call(obj) !== '[object Object]') {
return false;
}
var hasOwnConstructor = hasOwn.call(obj, 'constructor');
var hasIsPrototypeOf = obj.constructor && obj.constructor.prototype && hasOwn.call(obj.constructor.prototype, 'isPrototypeOf');
// Not own constructor property must be Object
if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
return false;
}
// Own properties are enumerated firstly, so to speed up,
// if last one is own, then all properties are own.
var key;
for (key in obj) {/**/}
return typeof key === 'undefined' || hasOwn.call(obj, key);
};
module.exports = function extend() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0],
i = 1,
length = arguments.length,
deep = false;
// Handle a deep copy situation
if (typeof target === 'boolean') {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
} else if ((typeof target !== 'object' && typeof target !== 'function') || target == null) {
target = {};
}
for (; i < length; ++i) {
options = arguments[i];
// Only deal with non-null/undefined values
if (options != null) {
// Extend the base object
for (name in options) {
src = target[name];
copy = options[name];
// Prevent never-ending loop
if (target !== copy) {
// Recurse if we're merging plain objects or arrays
if (deep && copy && (isPlainObject(copy) || (copyIsArray = isArray(copy)))) {
if (copyIsArray) {
copyIsArray = false;
clone = src && isArray(src) ? src : [];
} else {
clone = src && isPlainObject(src) ? src : {};
}
// Never move original objects, clone them
target[name] = extend(deep, clone, copy);
// Don't bring in undefined values
} else if (typeof copy !== 'undefined') {
target[name] = copy;
}
}
}
}
}
// Return the modified object
return target;
};
},{}],11:[function(require,module,exports){
/**
* Convert react style object into css string.
* @function _styleString
*/
"use strict";
const React = require('react'),
ReactDOM = require('react-dom/server'),
arrayfilter = require('arrayfilter'),
os = require('os');
/** @lends _styleString */
function _styleString(data) {
return Object.keys(data).map(selector => {
if (!data[selector]) {
return null;
}
let markup = ReactDOM.renderToStaticMarkup(React.createElement('ap-tmp-elm', {
style: data[selector]
}));
if (!/style/.test(markup)) {
return null;
}
let style = markup.trim().replace(/^<ap-tmp-elm\s+style="/, '').replace(/">\s*<\/ap-tmp-elm>$/, '').trim();
return [selector + '{', style, '}'].filter(arrayfilter.emptyReject()).join(' ');
}).join(os.EOL);
}
module.exports = _styleString;
},{"arrayfilter":26,"os":230,"react":212,"react-dom/server":83}],12:[function(require,module,exports){
/**
* apeman react package for style component.
* @constructor ApStyle
*/
"use strict";
const React = require('react'),
types = React.PropTypes,
iftype = require('iftype'),
extend = require('extend'),
os = require('os'),
classnames = require('classnames'),
arrayfilter = require('arrayfilter'),
constants = require('./constants'),
_styleString = require('./_style_string');
/** @lends ApStyle */
const ApStyle = React.createClass({
displayName: 'ApStyle',
//--------------------
// Specifications
//--------------------
statics: {
stringifyStyle: function (style) {
if (!style) {
return '';
}
let isString = iftype.isString(style);
return isString ? style : _styleString(style);
},
stringifyMediaStyle: function (style, width) {
if (!style) {
return '';
}
return `@media (min-width: ${ width }px) { ${ ApStyle.stringifyStyle(style) } }`;
}
},
propTypes: {
scoped: types.oneOfType([types.string, types.bool]),
data: types.oneOfType([types.string, types.object]),
smallMediaData: types.oneOfType([types.string, types.object]),
mediumMediaData: types.oneOfType([types.string, types.object]),
largeMediaData: types.oneOfType([types.string, types.object]),
type: types.string
},
getDefaultProps: function () {
return {
scoped: false,
data: null,
smallMediaData: null,
mediumMediaData: null,
largeMediaData: null,
type: 'text/css'
};
},
getInitialState: function () {
return {};
},
render: function () {
let s = this,
props = s.props;
let styleString = s.getStyleString() || '';
let childrenString = s.getChildrenString() || '';
return React.createElement('style', { className: classnames('ap-style', props.className),
id: props.id || null,
type: props.type,
scoped: props.scoped,
dangerouslySetInnerHTML: { __html: styleString + childrenString } });
},
//--------------------
// Specifications
//--------------------
getStyleString: function () {
let s = this,
props = s.props;
return [ApStyle.stringifyStyle(props.data), ApStyle.stringifyMediaStyle(props.smallMediaData, constants.SMALL_MEDIA_BREAKPOINT), ApStyle.stringifyMediaStyle(props.mediumMediaData, constants.MEDIUM_MEDIA_BREAKPOINT), ApStyle.stringifyMediaStyle(props.largeMediaData, constants.LARGE_MEDIA_BREAKPOINT)].filter(arrayfilter.emptyReject()).join(os.EOL);
},
getChildrenString: function () {
let s = this,
children = s.props.children;
if (!children) {
return null;
}
return [].concat(children).map(child => {
return child;
}).join(os.EOL);
}
});
module.exports = ApStyle;
},{"./_style_string":11,"./constants":13,"arrayfilter":26,"classnames":15,"extend":16,"iftype":67,"os":230,"react":212}],13:[function(require,module,exports){
/**
* Constants
*/
"use strict";
exports.SMALL_MEDIA_BREAKPOINT = 768;
exports.MEDIUM_MEDIA_BREAKPOINT = 992;
exports.LARGE_MEDIA_BREAKPOINT = 1200;
},{}],14:[function(require,module,exports){
/**
* apeman react package for style component.
* @module apeman-react-style
*/
"use strict";
module.exports = {
/**
* @memberof module:
* @name {@link module:~ApStyle|ApStyle
*/
get ApStyle() { return require('./ap_style'); },
get constants() { return require('./constants'); }
};
},{"./ap_style":12,"./constants":13}],15:[function(require,module,exports){
/*!
Copyright (c) 2015 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
'use strict';
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = '';
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes += ' ' + arg;
} else if (Array.isArray(arg)) {
classes += ' ' + classNames.apply(null, arg);
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes += ' ' + key;
}
}
}
}
return classes.substr(1);
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
// register as 'classnames', consistent with npm package name
define('classnames', [], function () {
return classNames;
});
} else {
window.classNames = classNames;
}
}());
},{}],16:[function(require,module,exports){
arguments[4][10][0].apply(exports,arguments)
},{"dup":10}],17:[function(require,module,exports){
/**
* apeman react package for touchable component.
* @constructor ApTouchable
*/
"use strict";
const React = require('react'),
ReactDOM = require('react-dom'),
types = React.PropTypes,
enums = require('./enums'),
extend = require('extend'),
createHammer = require('./create_hammer'),
destroyHammer = require('./destroy_hammer');
/** @lends ApTouchable */
const ApTouchable = React.createClass({
displayName: 'ApTouchable',
//--------------------
// Specs
//--------------------
propTypes: {
onTap: types.func,
onDoubleTap: types.func,
onPan: types.func,
onPanStart: types.func,
onPanMove: types.func,
onPanEnd: types.func,
onPanCancel: types.func,
onSwipe: types.func,
onPress: types.func,
onPressUp: types.func,
onPinch: types.func,
onPinchStart: types.func,
onPinchMove: types.func,
onPinchEnd: types.func,
onPinchCancel: types.func,
onRotate: types.func,
onRotateStart: types.func,
onRotateMove: types.func,
onRotateEnd: types.func,
onRotateCancel: types.func,
options: types.object,
panThreshold: types.number,
panDirection: types.oneOf(enums.directions),
swipeDirection: types.oneOf(enums.directions)
},
mixins: [],
statics: {
createHammer: createHammer,
destroyHammer: destroyHammer,
enums: enums
},
getInitialState: function () {
return {};
},
getDefaultProps: function () {
return {
panThreshold: 3,
panDirection: 'ALL'
};
},
render: function () {
let s = this;
let props = s.props;
let child = React.Children.only(props.children),
childProps = extend({
className: ['ap-touchable', props.className || ''].join(' ').trim()
}, props);
return React.cloneElement(child, childProps);
},
//--------------------
// Lifecycle
//--------------------
componentDidMount: function () {
let s = this;
s.hammer = createHammer(ReactDOM.findDOMNode(s), s.props);
},
componentWillUnmount: function () {
let s = this;
let hammer = s.hammer;
if (hammer) {
destroyHammer(hammer);
}
s.hammer = null;
},
//------------------
// Helper
//------------------
hammer: null
//------------------
// Private
//------------------
});
module.exports = ApTouchable;
},{"./create_hammer":19,"./destroy_hammer":20,"./enums":21,"extend":23,"react":212,"react-dom":82}],18:[function(require,module,exports){
/**
* Style for ApTouchable.
* @constructor ApTouchableStyle
*/
"use strict";
const React = require('react'),
ApStyle = require('apeman-react-style')['ApStyle'];
/** @lends ApTouchableStyle */
const ApTouchableStyle = React.createClass({
displayName: 'ApTouchableStyle',
propTypes: ApStyle.propTypes,
getDefaultProps: function () {
return {
scoped: false,
data: {
'.ap-touchable': {}
},
type: 'text/css'
};
},
render: function () {
let s = this,
props = s.props;
return React.createElement(
ApStyle,
props,
props.children
);
}
});
module.exports = ApTouchableStyle;
},{"apeman-react-style":14,"react":212}],19:[function(require,module,exports){
/**
* Create a hammer instance.
* @function createHammer
*/
"use strict"
/** @lends createHammer */
;
function createHammer(node, props) {
let Hammer = require('hammerjs'),
hammer = new Hammer(node);
if (props.options) {
hammer.set(props.options);
}
Object.keys(props).forEach(function (key) {
if (/^on/.test(key)) {
let event = key.replace(/^on/, '').toLowerCase();
hammer.on(event, props[key]);
}
if (/Direction$/.test(key)) {
let gesture = key.replace(/Direction$/, '');
hammer.get(gesture).set({ direction: Hammer['DIRECTION_' + props[key]] });
}
if (/Threshold$/.test(key)) {
let threshold = key.replace(/Threshold$/, '');
hammer.get(threshold).set({ threshold: props[key] });
}
});
return hammer;
}
module.exports = createHammer;
},{"hammerjs":64}],20:[function(require,module,exports){
/**
* Desroy hammer instance.
* @function destroyHammer
*/
"use strict";
function destroyHammer(hammer) {
if (!hammer) {
return;
}
hammer.stop();
hammer.destroy();
}
module.exports = destroyHammer;
},{}],21:[function(require,module,exports){
"use strict"
/**
* Directions for hammer.
*/
;
exports.directions = ['NONE', 'LEFT', 'RIGHT', 'UP', 'DOWN', 'HORIZONTAL', 'VERTICAL', 'ALL'];
},{}],22:[function(require,module,exports){
/**
* apeman react package for touchable component.
* @module apeman-react-touchable
*/
"use strict";
module.exports = {
/**
* @memberof module:
* @name {@link module:~ApTouchableStyle|ApTouchableStyle
*/
get ApTouchableStyle() { return require('./ap_touchable_style'); },
/**
* @memberof module:
* @name {@link module:~ApTouchable|ApTouchable
*/
get ApTouchable() { return require('./ap_touchable'); },
get createHammer() { return require('./create_hammer'); },
get destroyHammer() { return require('./destroy_hammer'); },
get enums() { return require('./enums'); }
};
},{"./ap_touchable":17,"./ap_touchable_style":18,"./create_hammer":19,"./destroy_hammer":20,"./enums":21}],23:[function(require,module,exports){
arguments[4][10][0].apply(exports,arguments)
},{"dup":10}],24:[function(require,module,exports){
/**
* Create a filter function to reject empty.
* @memberof module:arrayfilter/lib
* @function duplicateReject
* @returns {function} - Filter function to reject duplicated entry.
*/
"use strict";
/** @lends duplicateReject */
function duplicateReject() {
if (arguments.length > 1) {
throw new Error('[duplicateReject] Invalid args.');
}
return function filter(entry, i, array) {
return array.indexOf(entry) === i;
};
}
module.exports = duplicateReject;
},{}],25:[function(require,module,exports){
/**
* Create a filter function to reject empty.
* @memberof module:arrayfilter/lib
* @function emptyReject
* @returns {function} - Filter function to reject the empty.
*/
"use strict";
/** @lends emptyReject */
function emptyReject() {
if (arguments.length > 1) {
throw new Error('[emptyReject] Invalid args.');
}
return function filter(value) {
return (value !== null) && (typeof(value) !== 'undefined') && (value !== '');
};
}
module.exports = emptyReject;
},{}],26:[function(require,module,exports){
/**
* Array filtering utility.
* @module arrayfilter
*/
"use strict";
module.exports = {
get duplicateReject() { return require('./duplicate_reject'); },
get emptyReject() { return require('./empty_reject'); },
get patternAccept() { return require('./pattern_accept'); },
get patternReject() { return require('./pattern_reject'); },
get typeAccept() { return require('./type_accept'); },
get typeReject() { return require('./type_reject'); }
};
},{"./duplicate_reject":24,"./empty_reject":25,"./pattern_accept":27,"./pattern_reject":28,"./type_accept":29,"./type_reject":30}],27:[function(require,module,exports){
/**
* Create a filter function to accept values matches a pattern.
* @memberof module:arrayfilter/lib
* @function patternAccept
* @param {string|RegExp} pattern - Pattern to accept.
* @returns {function} - Accept function to accept the pattern.
*/
"use strict";
/** @lends patternAccept */
function patternAccept(pattern) {
if (arguments.length > 1) {
throw new Error('[patternAccept] Invalid args.');
}
return function filter(value) {
return String(value).match(pattern);
};
}
module.exports = patternAccept;
},{}],28:[function(require,module,exports){
/**
* Create a filter function to reject values matches a pattern.
* @memberof module:arrayfilter/lib
* @function patternReject
* @param {string|RegExp} pattern - Pattern to reject.
* @returns {function} - Filter function to reject the pattern.
*/
"use strict";
/** @lends patternReject */
function patternReject(pattern) {
if (arguments.length > 1) {
throw new Error('[patternReject] Invalid args.');
}
return function filter(value) {
return !String(value).match(pattern);
};
}
module.exports = patternReject;
},{}],29:[function(require,module,exports){
/**
* Create a filter function to accept values matches type.
* @memberof module:arrayfilter/lib
* @function typeAccept
* @param {string} type - Type to match.
* @returns {function} - Accept function to accept the pattern.
*/
"use strict";
/** @lends typeAccept */
function typeAccept(type) {
if (arguments.length > 1) {
throw new Error('[typeAccept] Invalid args.');
}
return function filter(value) {
return typeof(value) === type;
};
}
module.exports = typeAccept;
},{}],30:[function(require,module,exports){
/**
* Create a filter function to reject values matches type.
* @memberof module:arrayfilter/lib
* @function typeReject
* @param {string} type - Type to match.
* @returns {function} - Reject function to reject the pattern.
*/
"use strict";
/** @lends typeReject */
function typeReject(type) {
if (arguments.length > 1) {
throw new Error('[typeReject] Invalid args.');
}
return function filter(value) {
return typeof(value) !== type;
};
}
module.exports = typeReject;
},{}],31:[function(require,module,exports){
/**
* Chop to ceil.
* @function ceil
* @param {number} value - Value to calc.
* @param {number} [base=1] - Base number.
* @returns {number} - Ceil number.
*/
"use strict";
var surplus = require('./surplus');
/** @lends ceil */
function ceil(value, base) {
base = base || 0;
var surplused = surplus(value, base);
var result = value - surplused;
var enough = 0 < surplused;
if (enough) {
result += base;
}
var weight = 1 / base;
return parseInt(result * weight) / weight;
}
module.exports = ceil;
},{"./surplus":35}],32:[function(require,module,exports){
/**
* Chop to floor.
* @function floor
* @param {number} value - Value to calc.
* @param {number} [base=1] - Base number.
* @returns {number} - Floor number.
*/
"use strict";
var surplus = require('./surplus');
/** @lends floor */
function floor(value, base) {
base = base || 0;
var surplused = surplus(value, base);
var result = value - surplused;
var weight = 1 / base;
return parseInt(result * weight) / weight;
}
module.exports = floor;
},{"./surplus":35}],33:[function(require,module,exports){
/**
* Chop numbers.
* @module chopcal
*/
"use strict";
module.exports = {
get ceil() { return require('./ceil'); },
get floor() { return require('./floor'); },
get round() { return require('./round'); },
get surplus() { return require('./surplus'); }
};
},{"./ceil":31,"./floor":32,"./round":34,"./surplus":35}],34:[function(require,module,exports){
/**
* Chop to round.
* @function round
* @param {number} value - Value to calc.
* @param {number} [base=1] - Base number.
* @returns {number} - Round number.
*/
"use strict";
var surplus = require('./surplus');
/** @lends round */
function round(value, base) {
base = base || 0;
var surplused = surplus(value, base);
var result = value - surplused;
var enough = (base / 2) < surplused;
if (enough) {
result += base;
}
var weight = 1 / base;
return parseInt(result * weight) / weight;
}
module.exports = round;
},{"./surplus":35}],35:[function(require,module,exports){
/**
* Get surplus.
* @function surplus
* @param {number} value - Value to calc.
* @param {number} [base=1] - Base number.
* @returns {number} - Surplus number.
*/
"use strict";
/** @lends surplus */
function surplus(value, base) {
base = base || 0;
return value - (parseInt(value / base) * base)
}
module.exports = surplus;
},{}],36:[function(require,module,exports){
arguments[4][15][0].apply(exports,arguments)
},{"dup":15}],37:[function(require,module,exports){
(function (process){
/**
* Copyright 2013-2015, 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 EventListener
* @typechecks
*/
'use strict';
var emptyFunction = require('./emptyFunction');
/**
* Upstream version of event listener. Does not take into account specific
* nature of platform.
*/
var EventListener = {
/**
* Listen to DOM events during the bubble phase.
*
* @param {DOMEventTarget} target DOM element to register listener on.
* @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
* @param {function} callback Callback function.
* @return {object} Object with a `remove` method.
*/
listen: function (target, eventType, callback) {
if (target.addEventListener) {
target.addEventListener(eventType, callback, false);
return {
remove: function () {
target.removeEventListener(eventType, callback, false);
}
};
} else if (target.attachEvent) {
target.attachEvent('on' + eventType, callback);
return {
remove: function () {
target.detachEvent('on' + eventType, callback);
}
};
}
},
/**
* Listen to DOM events during the capture phase.
*
* @param {DOMEventTarget} target DOM element to register listener on.
* @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
* @param {function} callback Callback function.
* @return {object} Object with a `remove` method.
*/
capture: function (target, eventType, callback) {
if (target.addEventListener) {
target.addEventListener(eventType, callback, true);
return {
remove: function () {
target.removeEventListener(eventType, callback, true);
}
};
} else {
if (process.env.NODE_ENV !== 'production') {
console.error('Attempted to listen to events during the capture phase on a ' + 'browser that does not support the capture phase. Your application ' + 'will not receive some events.');
}
return {
remove: emptyFunction
};
}
},
registerDefault: function () {}
};
module.exports = EventListener;
}).call(this,require('_process'))
},{"./emptyFunction":44,"_process":231}],38:[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 ExecutionEnvironment
*/
'use strict';
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
/**
* Simple, lightweight module assisting with the detection and context of
* Worker. Helps avoid circular dependencies and allows code to reason about
* whether or not they are in a Worker, even if they never include the main
* `ReactWorker` dependency.
*/
var ExecutionEnvironment = {
canUseDOM: canUseDOM,
canUseWorkers: typeof Worker !== 'undefined',
canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent),
canUseViewport: canUseDOM && !!window.screen,
isInWorker: !canUseDOM // For now, this is true - might change in the future.
};
module.exports = ExecutionEnvironment;
},{}],39:[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 camelize
* @typechecks
*/
"use strict";
var _hyphenPattern = /-(.)/g;
/**
* Camelcases a hyphenated string, for example:
*
* > camelize('background-color')
* < "backgroundColor"
*
* @param {string} string
* @return {string}
*/
function camelize(string) {
return string.replace(_hyphenPattern, function (_, character) {
return character.toUpperCase();
});
}
module.exports = camelize;
},{}],40:[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 camelizeStyleName
* @typechecks
*/
'use strict';
var camelize = require('./camelize');
var msPattern = /^-ms-/;
/**
* Camelcases a hyphenated CSS property name, for example:
*
* > camelizeStyleName('background-color')
* < "backgroundColor"
* > camelizeStyleName('-moz-transition')
* < "MozTransition"
* > camelizeStyleName('-ms-transition')
* < "msTransition"
*
* As Andi Smith suggests
* (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
* is converted to lowercase `ms`.
*
* @param {string} string
* @return {string}
*/
function camelizeStyleName(string) {
return camelize(string.replace(msPattern, 'ms-'));
}
module.exports = camelizeStyleName;
},{"./camelize":39}],41:[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 containsNode
* @typechecks
*/
'use strict';
var isTextNode = require('./isTextNode');
/*eslint-disable no-bitwise */
/**
* Checks if a given DOM node contains or is another DOM node.
*
* @param {?DOMNode} outerNode Outer DOM node.
* @param {?DOMNode} innerNode Inner DOM node.
* @return {boolean} True if `outerNode` contains or is `innerNode`.
*/
function containsNode(_x, _x2) {
var _again = true;
_function: while (_again) {
var outerNode = _x,
innerNode = _x2;
_again = false;
if (!outerNode || !innerNode) {
return false;
} else if (outerNode === innerNode) {
return true;
} else if (isTextNode(outerNode)) {
return false;
} else if (isTextNode(innerNode)) {
_x = outerNode;
_x2 = innerNode.parentNode;
_again = true;
continue _function;
} else if (outerNode.contains) {
return outerNode.contains(innerNode);
} else if (outerNode.compareDocumentPosition) {
return !!(outerNode.compareDocumentPosition(innerNode) & 16);
} else {
return false;
}
}
}
module.exports = containsNode;
},{"./isTextNode":54}],42:[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 createArrayFromMixed
* @typechecks
*/
'use strict';
var toArray = require('./toArray');
/**
* Perform a heuristic test to determine if an object is "array-like".
*
* A monk asked Joshu, a Zen master, "Has a dog Buddha nature?"
* Joshu replied: "Mu."
*
* This function determines if its argument has "array nature": it returns
* true if the argument is an actual array, an `arguments' object, or an
* HTMLCollection (e.g. node.childNodes or node.getElementsByTagName()).
*
* It will return false for other array-like objects like Filelist.
*
* @param {*} obj
* @return {boolean}
*/
function hasArrayNature(obj) {
return(
// not null/false
!!obj && (
// arrays are objects, NodeLists are functions in Safari
typeof obj == 'object' || typeof obj == 'function') &&
// quacks like an array
'length' in obj &&
// not window
!('setInterval' in obj) &&
// no DOM node should be considered an array-like
// a 'select' element has 'length' and 'item' properties on IE8
typeof obj.nodeType != 'number' && (
// a real array
Array.isArray(obj) ||