Skip to content

Instantly share code, notes, and snippets.

@nsrau

nsrau/PluginGrid.js

Last active September 8, 2020 20:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nsrau/69a96359ae04b77862ff2a5d40ccb0b1 to your computer and use it in GitHub Desktop.
Save nsrau/69a96359ae04b77862ff2a5d40ccb0b1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
PluginGrid.js
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
window['process'] = {
env: {NODE_ENV: 'prod'}
}
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function unwrapExports (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var lodash_isequal = createCommonjsModule(function (module, exports) {
/**
* Lodash (Custom Build) <https://lodash.com/>
* Build: `lodash modularize exports="npm" -o ./`
* Copyright JS Foundation and other contributors <https://js.foundation/>
* Released under MIT license <https://lodash.com/license>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
*/
/** Used as the size to enable large array optimizations. */
var LARGE_ARRAY_SIZE = 200;
/** Used to stand-in for `undefined` hash values. */
var HASH_UNDEFINED = '__lodash_hash_undefined__';
/** Used to compose bitmasks for value comparisons. */
var COMPARE_PARTIAL_FLAG = 1,
COMPARE_UNORDERED_FLAG = 2;
/** Used as references for various `Number` constants. */
var MAX_SAFE_INTEGER = 9007199254740991;
/** `Object#toString` result references. */
var argsTag = '[object Arguments]',
arrayTag = '[object Array]',
asyncTag = '[object AsyncFunction]',
boolTag = '[object Boolean]',
dateTag = '[object Date]',
errorTag = '[object Error]',
funcTag = '[object Function]',
genTag = '[object GeneratorFunction]',
mapTag = '[object Map]',
numberTag = '[object Number]',
nullTag = '[object Null]',
objectTag = '[object Object]',
promiseTag = '[object Promise]',
proxyTag = '[object Proxy]',
regexpTag = '[object RegExp]',
setTag = '[object Set]',
stringTag = '[object String]',
symbolTag = '[object Symbol]',
undefinedTag = '[object Undefined]',
weakMapTag = '[object WeakMap]';
var arrayBufferTag = '[object ArrayBuffer]',
dataViewTag = '[object DataView]',
float32Tag = '[object Float32Array]',
float64Tag = '[object Float64Array]',
int8Tag = '[object Int8Array]',
int16Tag = '[object Int16Array]',
int32Tag = '[object Int32Array]',
uint8Tag = '[object Uint8Array]',
uint8ClampedTag = '[object Uint8ClampedArray]',
uint16Tag = '[object Uint16Array]',
uint32Tag = '[object Uint32Array]';
/**
* Used to match `RegExp`
* [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
*/
var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
/** Used to detect host constructors (Safari). */
var reIsHostCtor = /^\[object .+?Constructor\]$/;
/** Used to detect unsigned integer values. */
var reIsUint = /^(?:0|[1-9]\d*)$/;
/** Used to identify `toStringTag` values of typed arrays. */
var typedArrayTags = {};
typedArrayTags[float32Tag] = typedArrayTags[float64Tag] =
typedArrayTags[int8Tag] = typedArrayTags[int16Tag] =
typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] =
typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] =
typedArrayTags[uint32Tag] = true;
typedArrayTags[argsTag] = typedArrayTags[arrayTag] =
typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] =
typedArrayTags[dataViewTag] = typedArrayTags[dateTag] =
typedArrayTags[errorTag] = typedArrayTags[funcTag] =
typedArrayTags[mapTag] = typedArrayTags[numberTag] =
typedArrayTags[objectTag] = typedArrayTags[regexpTag] =
typedArrayTags[setTag] = typedArrayTags[stringTag] =
typedArrayTags[weakMapTag] = false;
/** Detect free variable `global` from Node.js. */
var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
/** Detect free variable `self`. */
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
/** Used as a reference to the global object. */
var root = freeGlobal || freeSelf || Function('return this')();
/** Detect free variable `exports`. */
var freeExports = exports && !exports.nodeType && exports;
/** Detect free variable `module`. */
var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
/** Detect the popular CommonJS extension `module.exports`. */
var moduleExports = freeModule && freeModule.exports === freeExports;
/** Detect free variable `process` from Node.js. */
var freeProcess = moduleExports && freeGlobal.process;
/** Used to access faster Node.js helpers. */
var nodeUtil = (function() {
try {
return freeProcess && freeProcess.binding && freeProcess.binding('util');
} catch (e) {}
}());
/* Node.js helper references. */
var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
/**
* A specialized version of `_.filter` for arrays without support for
* iteratee shorthands.
*
* @private
* @param {Array} [array] The array to iterate over.
* @param {Function} predicate The function invoked per iteration.
* @returns {Array} Returns the new filtered array.
*/
function arrayFilter(array, predicate) {
var index = -1,
length = array == null ? 0 : array.length,
resIndex = 0,
result = [];
while (++index < length) {
var value = array[index];
if (predicate(value, index, array)) {
result[resIndex++] = value;
}
}
return result;
}
/**
* Appends the elements of `values` to `array`.
*
* @private
* @param {Array} array The array to modify.
* @param {Array} values The values to append.
* @returns {Array} Returns `array`.
*/
function arrayPush(array, values) {
var index = -1,
length = values.length,
offset = array.length;
while (++index < length) {
array[offset + index] = values[index];
}
return array;
}
/**
* A specialized version of `_.some` for arrays without support for iteratee
* shorthands.
*
* @private
* @param {Array} [array] The array to iterate over.
* @param {Function} predicate The function invoked per iteration.
* @returns {boolean} Returns `true` if any element passes the predicate check,
* else `false`.
*/
function arraySome(array, predicate) {
var index = -1,
length = array == null ? 0 : array.length;
while (++index < length) {
if (predicate(array[index], index, array)) {
return true;
}
}
return false;
}
/**
* The base implementation of `_.times` without support for iteratee shorthands
* or max array length checks.
*
* @private
* @param {number} n The number of times to invoke `iteratee`.
* @param {Function} iteratee The function invoked per iteration.
* @returns {Array} Returns the array of results.
*/
function baseTimes(n, iteratee) {
var index = -1,
result = Array(n);
while (++index < n) {
result[index] = iteratee(index);
}
return result;
}
/**
* The base implementation of `_.unary` without support for storing metadata.
*
* @private
* @param {Function} func The function to cap arguments for.
* @returns {Function} Returns the new capped function.
*/
function baseUnary(func) {
return function(value) {
return func(value);
};
}
/**
* Checks if a `cache` value for `key` exists.
*
* @private
* @param {Object} cache The cache to query.
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function cacheHas(cache, key) {
return cache.has(key);
}
/**
* Gets the value at `key` of `object`.
*
* @private
* @param {Object} [object] The object to query.
* @param {string} key The key of the property to get.
* @returns {*} Returns the property value.
*/
function getValue(object, key) {
return object == null ? undefined : object[key];
}
/**
* Converts `map` to its key-value pairs.
*
* @private
* @param {Object} map The map to convert.
* @returns {Array} Returns the key-value pairs.
*/
function mapToArray(map) {
var index = -1,
result = Array(map.size);
map.forEach(function(value, key) {
result[++index] = [key, value];
});
return result;
}
/**
* Creates a unary function that invokes `func` with its argument transformed.
*
* @private
* @param {Function} func The function to wrap.
* @param {Function} transform The argument transform.
* @returns {Function} Returns the new function.
*/
function overArg(func, transform) {
return function(arg) {
return func(transform(arg));
};
}
/**
* Converts `set` to an array of its values.
*
* @private
* @param {Object} set The set to convert.
* @returns {Array} Returns the values.
*/
function setToArray(set) {
var index = -1,
result = Array(set.size);
set.forEach(function(value) {
result[++index] = value;
});
return result;
}
/** Used for built-in method references. */
var arrayProto = Array.prototype,
funcProto = Function.prototype,
objectProto = Object.prototype;
/** Used to detect overreaching core-js shims. */
var coreJsData = root['__core-js_shared__'];
/** Used to resolve the decompiled source of functions. */
var funcToString = funcProto.toString;
/** Used to check objects for own properties. */
var hasOwnProperty = objectProto.hasOwnProperty;
/** Used to detect methods masquerading as native. */
var maskSrcKey = (function() {
var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
return uid ? ('Symbol(src)_1.' + uid) : '';
}());
/**
* Used to resolve the
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
* of values.
*/
var nativeObjectToString = objectProto.toString;
/** Used to detect if a method is native. */
var reIsNative = RegExp('^' +
funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&')
.replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
);
/** Built-in value references. */
var Buffer = moduleExports ? root.Buffer : undefined,
Symbol = root.Symbol,
Uint8Array = root.Uint8Array,
propertyIsEnumerable = objectProto.propertyIsEnumerable,
splice = arrayProto.splice,
symToStringTag = Symbol ? Symbol.toStringTag : undefined;
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeGetSymbols = Object.getOwnPropertySymbols,
nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined,
nativeKeys = overArg(Object.keys, Object);
/* Built-in method references that are verified to be native. */
var DataView = getNative(root, 'DataView'),
Map = getNative(root, 'Map'),
Promise = getNative(root, 'Promise'),
Set = getNative(root, 'Set'),
WeakMap = getNative(root, 'WeakMap'),
nativeCreate = getNative(Object, 'create');
/** Used to detect maps, sets, and weakmaps. */
var dataViewCtorString = toSource(DataView),
mapCtorString = toSource(Map),
promiseCtorString = toSource(Promise),
setCtorString = toSource(Set),
weakMapCtorString = toSource(WeakMap);
/** Used to convert symbols to primitives and strings. */
var symbolProto = Symbol ? Symbol.prototype : undefined,
symbolValueOf = symbolProto ? symbolProto.valueOf : undefined;
/**
* Creates a hash object.
*
* @private
* @constructor
* @param {Array} [entries] The key-value pairs to cache.
*/
function Hash(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
/**
* Removes all key-value entries from the hash.
*
* @private
* @name clear
* @memberOf Hash
*/
function hashClear() {
this.__data__ = nativeCreate ? nativeCreate(null) : {};
this.size = 0;
}
/**
* Removes `key` and its value from the hash.
*
* @private
* @name delete
* @memberOf Hash
* @param {Object} hash The hash to modify.
* @param {string} key The key of the value to remove.
* @returns {boolean} Returns `true` if the entry was removed, else `false`.
*/
function hashDelete(key) {
var result = this.has(key) && delete this.__data__[key];
this.size -= result ? 1 : 0;
return result;
}
/**
* Gets the hash value for `key`.
*
* @private
* @name get
* @memberOf Hash
* @param {string} key The key of the value to get.
* @returns {*} Returns the entry value.
*/
function hashGet(key) {
var data = this.__data__;
if (nativeCreate) {
var result = data[key];
return result === HASH_UNDEFINED ? undefined : result;
}
return hasOwnProperty.call(data, key) ? data[key] : undefined;
}
/**
* Checks if a hash value for `key` exists.
*
* @private
* @name has
* @memberOf Hash
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function hashHas(key) {
var data = this.__data__;
return nativeCreate ? (data[key] !== undefined) : hasOwnProperty.call(data, key);
}
/**
* Sets the hash `key` to `value`.
*
* @private
* @name set
* @memberOf Hash
* @param {string} key The key of the value to set.
* @param {*} value The value to set.
* @returns {Object} Returns the hash instance.
*/
function hashSet(key, value) {
var data = this.__data__;
this.size += this.has(key) ? 0 : 1;
data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value;
return this;
}
// Add methods to `Hash`.
Hash.prototype.clear = hashClear;
Hash.prototype['delete'] = hashDelete;
Hash.prototype.get = hashGet;
Hash.prototype.has = hashHas;
Hash.prototype.set = hashSet;
/**
* Creates an list cache object.
*
* @private
* @constructor
* @param {Array} [entries] The key-value pairs to cache.
*/
function ListCache(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
/**
* Removes all key-value entries from the list cache.
*
* @private
* @name clear
* @memberOf ListCache
*/
function listCacheClear() {
this.__data__ = [];
this.size = 0;
}
/**
* Removes `key` and its value from the list cache.
*
* @private
* @name delete
* @memberOf ListCache
* @param {string} key The key of the value to remove.
* @returns {boolean} Returns `true` if the entry was removed, else `false`.
*/
function listCacheDelete(key) {
var data = this.__data__,
index = assocIndexOf(data, key);
if (index < 0) {
return false;
}
var lastIndex = data.length - 1;
if (index == lastIndex) {
data.pop();
} else {
splice.call(data, index, 1);
}
--this.size;
return true;
}
/**
* Gets the list cache value for `key`.
*
* @private
* @name get
* @memberOf ListCache
* @param {string} key The key of the value to get.
* @returns {*} Returns the entry value.
*/
function listCacheGet(key) {
var data = this.__data__,
index = assocIndexOf(data, key);
return index < 0 ? undefined : data[index][1];
}
/**
* Checks if a list cache value for `key` exists.
*
* @private
* @name has
* @memberOf ListCache
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function listCacheHas(key) {
return assocIndexOf(this.__data__, key) > -1;
}
/**
* Sets the list cache `key` to `value`.
*
* @private
* @name set
* @memberOf ListCache
* @param {string} key The key of the value to set.
* @param {*} value The value to set.
* @returns {Object} Returns the list cache instance.
*/
function listCacheSet(key, value) {
var data = this.__data__,
index = assocIndexOf(data, key);
if (index < 0) {
++this.size;
data.push([key, value]);
} else {
data[index][1] = value;
}
return this;
}
// Add methods to `ListCache`.
ListCache.prototype.clear = listCacheClear;
ListCache.prototype['delete'] = listCacheDelete;
ListCache.prototype.get = listCacheGet;
ListCache.prototype.has = listCacheHas;
ListCache.prototype.set = listCacheSet;
/**
* Creates a map cache object to store key-value pairs.
*
* @private
* @constructor
* @param {Array} [entries] The key-value pairs to cache.
*/
function MapCache(entries) {
var index = -1,
length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
/**
* Removes all key-value entries from the map.
*
* @private
* @name clear
* @memberOf MapCache
*/
function mapCacheClear() {
this.size = 0;
this.__data__ = {
'hash': new Hash,
'map': new (Map || ListCache),
'string': new Hash
};
}
/**
* Removes `key` and its value from the map.
*
* @private
* @name delete
* @memberOf MapCache
* @param {string} key The key of the value to remove.
* @returns {boolean} Returns `true` if the entry was removed, else `false`.
*/
function mapCacheDelete(key) {
var result = getMapData(this, key)['delete'](key);
this.size -= result ? 1 : 0;
return result;
}
/**
* Gets the map value for `key`.
*
* @private
* @name get
* @memberOf MapCache
* @param {string} key The key of the value to get.
* @returns {*} Returns the entry value.
*/
function mapCacheGet(key) {
return getMapData(this, key).get(key);
}
/**
* Checks if a map value for `key` exists.
*
* @private
* @name has
* @memberOf MapCache
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function mapCacheHas(key) {
return getMapData(this, key).has(key);
}
/**
* Sets the map `key` to `value`.
*
* @private
* @name set
* @memberOf MapCache
* @param {string} key The key of the value to set.
* @param {*} value The value to set.
* @returns {Object} Returns the map cache instance.
*/
function mapCacheSet(key, value) {
var data = getMapData(this, key),
size = data.size;
data.set(key, value);
this.size += data.size == size ? 0 : 1;
return this;
}
// Add methods to `MapCache`.
MapCache.prototype.clear = mapCacheClear;
MapCache.prototype['delete'] = mapCacheDelete;
MapCache.prototype.get = mapCacheGet;
MapCache.prototype.has = mapCacheHas;
MapCache.prototype.set = mapCacheSet;
/**
*
* Creates an array cache object to store unique values.
*
* @private
* @constructor
* @param {Array} [values] The values to cache.
*/
function SetCache(values) {
var index = -1,
length = values == null ? 0 : values.length;
this.__data__ = new MapCache;
while (++index < length) {
this.add(values[index]);
}
}
/**
* Adds `value` to the array cache.
*
* @private
* @name add
* @memberOf SetCache
* @alias push
* @param {*} value The value to cache.
* @returns {Object} Returns the cache instance.
*/
function setCacheAdd(value) {
this.__data__.set(value, HASH_UNDEFINED);
return this;
}
/**
* Checks if `value` is in the array cache.
*
* @private
* @name has
* @memberOf SetCache
* @param {*} value The value to search for.
* @returns {number} Returns `true` if `value` is found, else `false`.
*/
function setCacheHas(value) {
return this.__data__.has(value);
}
// Add methods to `SetCache`.
SetCache.prototype.add = SetCache.prototype.push = setCacheAdd;
SetCache.prototype.has = setCacheHas;
/**
* Creates a stack cache object to store key-value pairs.
*
* @private
* @constructor
* @param {Array} [entries] The key-value pairs to cache.
*/
function Stack(entries) {
var data = this.__data__ = new ListCache(entries);
this.size = data.size;
}
/**
* Removes all key-value entries from the stack.
*
* @private
* @name clear
* @memberOf Stack
*/
function stackClear() {
this.__data__ = new ListCache;
this.size = 0;
}
/**
* Removes `key` and its value from the stack.
*
* @private
* @name delete
* @memberOf Stack
* @param {string} key The key of the value to remove.
* @returns {boolean} Returns `true` if the entry was removed, else `false`.
*/
function stackDelete(key) {
var data = this.__data__,
result = data['delete'](key);
this.size = data.size;
return result;
}
/**
* Gets the stack value for `key`.
*
* @private
* @name get
* @memberOf Stack
* @param {string} key The key of the value to get.
* @returns {*} Returns the entry value.
*/
function stackGet(key) {
return this.__data__.get(key);
}
/**
* Checks if a stack value for `key` exists.
*
* @private
* @name has
* @memberOf Stack
* @param {string} key The key of the entry to check.
* @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
*/
function stackHas(key) {
return this.__data__.has(key);
}
/**
* Sets the stack `key` to `value`.
*
* @private
* @name set
* @memberOf Stack
* @param {string} key The key of the value to set.
* @param {*} value The value to set.
* @returns {Object} Returns the stack cache instance.
*/
function stackSet(key, value) {
var data = this.__data__;
if (data instanceof ListCache) {
var pairs = data.__data__;
if (!Map || (pairs.length < LARGE_ARRAY_SIZE - 1)) {
pairs.push([key, value]);
this.size = ++data.size;
return this;
}
data = this.__data__ = new MapCache(pairs);
}
data.set(key, value);
this.size = data.size;
return this;
}
// Add methods to `Stack`.
Stack.prototype.clear = stackClear;
Stack.prototype['delete'] = stackDelete;
Stack.prototype.get = stackGet;
Stack.prototype.has = stackHas;
Stack.prototype.set = stackSet;
/**
* Creates an array of the enumerable property names of the array-like `value`.
*
* @private
* @param {*} value The value to query.
* @param {boolean} inherited Specify returning inherited property names.
* @returns {Array} Returns the array of property names.
*/
function arrayLikeKeys(value, inherited) {
var isArr = isArray(value),
isArg = !isArr && isArguments(value),
isBuff = !isArr && !isArg && isBuffer(value),
isType = !isArr && !isArg && !isBuff && isTypedArray(value),
skipIndexes = isArr || isArg || isBuff || isType,
result = skipIndexes ? baseTimes(value.length, String) : [],
length = result.length;
for (var key in value) {
if ((inherited || hasOwnProperty.call(value, key)) &&
!(skipIndexes && (
// Safari 9 has enumerable `arguments.length` in strict mode.
key == 'length' ||
// Node.js 0.10 has enumerable non-index properties on buffers.
(isBuff && (key == 'offset' || key == 'parent')) ||
// PhantomJS 2 has enumerable non-index properties on typed arrays.
(isType && (key == 'buffer' || key == 'byteLength' || key == 'byteOffset')) ||
// Skip index properties.
isIndex(key, length)
))) {
result.push(key);
}
}
return result;
}
/**
* Gets the index at which the `key` is found in `array` of key-value pairs.
*
* @private
* @param {Array} array The array to inspect.
* @param {*} key The key to search for.
* @returns {number} Returns the index of the matched value, else `-1`.
*/
function assocIndexOf(array, key) {
var length = array.length;
while (length--) {
if (eq(array[length][0], key)) {
return length;
}
}
return -1;
}
/**
* The base implementation of `getAllKeys` and `getAllKeysIn` which uses
* `keysFunc` and `symbolsFunc` to get the enumerable property names and
* symbols of `object`.
*
* @private
* @param {Object} object The object to query.
* @param {Function} keysFunc The function to get the keys of `object`.
* @param {Function} symbolsFunc The function to get the symbols of `object`.
* @returns {Array} Returns the array of property names and symbols.
*/
function baseGetAllKeys(object, keysFunc, symbolsFunc) {
var result = keysFunc(object);
return isArray(object) ? result : arrayPush(result, symbolsFunc(object));
}
/**
* The base implementation of `getTag` without fallbacks for buggy environments.
*
* @private
* @param {*} value The value to query.
* @returns {string} Returns the `toStringTag`.
*/
function baseGetTag(value) {
if (value == null) {
return value === undefined ? undefinedTag : nullTag;
}
return (symToStringTag && symToStringTag in Object(value))
? getRawTag(value)
: objectToString(value);
}
/**
* The base implementation of `_.isArguments`.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an `arguments` object,
*/
function baseIsArguments(value) {
return isObjectLike(value) && baseGetTag(value) == argsTag;
}
/**
* The base implementation of `_.isEqual` which supports partial comparisons
* and tracks traversed objects.
*
* @private
* @param {*} value The value to compare.
* @param {*} other The other value to compare.
* @param {boolean} bitmask The bitmask flags.
* 1 - Unordered comparison
* 2 - Partial comparison
* @param {Function} [customizer] The function to customize comparisons.
* @param {Object} [stack] Tracks traversed `value` and `other` objects.
* @returns {boolean} Returns `true` if the values are equivalent, else `false`.
*/
function baseIsEqual(value, other, bitmask, customizer, stack) {
if (value === other) {
return true;
}
if (value == null || other == null || (!isObjectLike(value) && !isObjectLike(other))) {
return value !== value && other !== other;
}
return baseIsEqualDeep(value, other, bitmask, customizer, baseIsEqual, stack);
}
/**
* A specialized version of `baseIsEqual` for arrays and objects which performs
* deep comparisons and tracks traversed objects enabling objects with circular
* references to be compared.
*
* @private
* @param {Object} object The object to compare.
* @param {Object} other The other object to compare.
* @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
* @param {Function} customizer The function to customize comparisons.
* @param {Function} equalFunc The function to determine equivalents of values.
* @param {Object} [stack] Tracks traversed `object` and `other` objects.
* @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
*/
function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) {
var objIsArr = isArray(object),
othIsArr = isArray(other),
objTag = objIsArr ? arrayTag : getTag(object),
othTag = othIsArr ? arrayTag : getTag(other);
objTag = objTag == argsTag ? objectTag : objTag;
othTag = othTag == argsTag ? objectTag : othTag;
var objIsObj = objTag == objectTag,
othIsObj = othTag == objectTag,
isSameTag = objTag == othTag;
if (isSameTag && isBuffer(object)) {
if (!isBuffer(other)) {
return false;
}
objIsArr = true;
objIsObj = false;
}
if (isSameTag && !objIsObj) {
stack || (stack = new Stack);
return (objIsArr || isTypedArray(object))
? equalArrays(object, other, bitmask, customizer, equalFunc, stack)
: equalByTag(object, other, objTag, bitmask, customizer, equalFunc, stack);
}
if (!(bitmask & COMPARE_PARTIAL_FLAG)) {
var objIsWrapped = objIsObj && hasOwnProperty.call(object, '__wrapped__'),
othIsWrapped = othIsObj && hasOwnProperty.call(other, '__wrapped__');
if (objIsWrapped || othIsWrapped) {
var objUnwrapped = objIsWrapped ? object.value() : object,
othUnwrapped = othIsWrapped ? other.value() : other;
stack || (stack = new Stack);
return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack);
}
}
if (!isSameTag) {
return false;
}
stack || (stack = new Stack);
return equalObjects(object, other, bitmask, customizer, equalFunc, stack);
}
/**
* The base implementation of `_.isNative` without bad shim checks.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a native function,
* else `false`.
*/
function baseIsNative(value) {
if (!isObject(value) || isMasked(value)) {
return false;
}
var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
return pattern.test(toSource(value));
}
/**
* The base implementation of `_.isTypedArray` without Node.js optimizations.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
*/
function baseIsTypedArray(value) {
return isObjectLike(value) &&
isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
}
/**
* The base implementation of `_.keys` which doesn't treat sparse arrays as dense.
*
* @private
* @param {Object} object The object to query.
* @returns {Array} Returns the array of property names.
*/
function baseKeys(object) {
if (!isPrototype(object)) {
return nativeKeys(object);
}
var result = [];
for (var key in Object(object)) {
if (hasOwnProperty.call(object, key) && key != 'constructor') {
result.push(key);
}
}
return result;
}
/**
* A specialized version of `baseIsEqualDeep` for arrays with support for
* partial deep comparisons.
*
* @private
* @param {Array} array The array to compare.
* @param {Array} other The other array to compare.
* @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
* @param {Function} customizer The function to customize comparisons.
* @param {Function} equalFunc The function to determine equivalents of values.
* @param {Object} stack Tracks traversed `array` and `other` objects.
* @returns {boolean} Returns `true` if the arrays are equivalent, else `false`.
*/
function equalArrays(array, other, bitmask, customizer, equalFunc, stack) {
var isPartial = bitmask & COMPARE_PARTIAL_FLAG,
arrLength = array.length,
othLength = other.length;
if (arrLength != othLength && !(isPartial && othLength > arrLength)) {
return false;
}
// Assume cyclic values are equal.
var stacked = stack.get(array);
if (stacked && stack.get(other)) {
return stacked == other;
}
var index = -1,
result = true,
seen = (bitmask & COMPARE_UNORDERED_FLAG) ? new SetCache : undefined;
stack.set(array, other);
stack.set(other, array);
// Ignore non-index properties.
while (++index < arrLength) {
var arrValue = array[index],
othValue = other[index];
if (customizer) {
var compared = isPartial
? customizer(othValue, arrValue, index, other, array, stack)
: customizer(arrValue, othValue, index, array, other, stack);
}
if (compared !== undefined) {
if (compared) {
continue;
}
result = false;
break;
}
// Recursively compare arrays (susceptible to call stack limits).
if (seen) {
if (!arraySome(other, function(othValue, othIndex) {
if (!cacheHas(seen, othIndex) &&
(arrValue === othValue || equalFunc(arrValue, othValue, bitmask, customizer, stack))) {
return seen.push(othIndex);
}
})) {
result = false;
break;
}
} else if (!(
arrValue === othValue ||
equalFunc(arrValue, othValue, bitmask, customizer, stack)
)) {
result = false;
break;
}
}
stack['delete'](array);
stack['delete'](other);
return result;
}
/**
* A specialized version of `baseIsEqualDeep` for comparing objects of
* the same `toStringTag`.
*
* **Note:** This function only supports comparing values with tags of
* `Boolean`, `Date`, `Error`, `Number`, `RegExp`, or `String`.
*
* @private
* @param {Object} object The object to compare.
* @param {Object} other The other object to compare.
* @param {string} tag The `toStringTag` of the objects to compare.
* @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
* @param {Function} customizer The function to customize comparisons.
* @param {Function} equalFunc The function to determine equivalents of values.
* @param {Object} stack Tracks traversed `object` and `other` objects.
* @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
*/
function equalByTag(object, other, tag, bitmask, customizer, equalFunc, stack) {
switch (tag) {
case dataViewTag:
if ((object.byteLength != other.byteLength) ||
(object.byteOffset != other.byteOffset)) {
return false;
}
object = object.buffer;
other = other.buffer;
case arrayBufferTag:
if ((object.byteLength != other.byteLength) ||
!equalFunc(new Uint8Array(object), new Uint8Array(other))) {
return false;
}
return true;
case boolTag:
case dateTag:
case numberTag:
// Coerce booleans to `1` or `0` and dates to milliseconds.
// Invalid dates are coerced to `NaN`.
return eq(+object, +other);
case errorTag:
return object.name == other.name && object.message == other.message;
case regexpTag:
case stringTag:
// Coerce regexes to strings and treat strings, primitives and objects,
// as equal. See http://www.ecma-international.org/ecma-262/7.0/#sec-regexp.prototype.tostring
// for more details.
return object == (other + '');
case mapTag:
var convert = mapToArray;
case setTag:
var isPartial = bitmask & COMPARE_PARTIAL_FLAG;
convert || (convert = setToArray);
if (object.size != other.size && !isPartial) {
return false;
}
// Assume cyclic values are equal.
var stacked = stack.get(object);
if (stacked) {
return stacked == other;
}
bitmask |= COMPARE_UNORDERED_FLAG;
// Recursively compare objects (susceptible to call stack limits).
stack.set(object, other);
var result = equalArrays(convert(object), convert(other), bitmask, customizer, equalFunc, stack);
stack['delete'](object);
return result;
case symbolTag:
if (symbolValueOf) {
return symbolValueOf.call(object) == symbolValueOf.call(other);
}
}
return false;
}
/**
* A specialized version of `baseIsEqualDeep` for objects with support for
* partial deep comparisons.
*
* @private
* @param {Object} object The object to compare.
* @param {Object} other The other object to compare.
* @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
* @param {Function} customizer The function to customize comparisons.
* @param {Function} equalFunc The function to determine equivalents of values.
* @param {Object} stack Tracks traversed `object` and `other` objects.
* @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
*/
function equalObjects(object, other, bitmask, customizer, equalFunc, stack) {
var isPartial = bitmask & COMPARE_PARTIAL_FLAG,
objProps = getAllKeys(object),
objLength = objProps.length,
othProps = getAllKeys(other),
othLength = othProps.length;
if (objLength != othLength && !isPartial) {
return false;
}
var index = objLength;
while (index--) {
var key = objProps[index];
if (!(isPartial ? key in other : hasOwnProperty.call(other, key))) {
return false;
}
}
// Assume cyclic values are equal.
var stacked = stack.get(object);
if (stacked && stack.get(other)) {
return stacked == other;
}
var result = true;
stack.set(object, other);
stack.set(other, object);
var skipCtor = isPartial;
while (++index < objLength) {
key = objProps[index];
var objValue = object[key],
othValue = other[key];
if (customizer) {
var compared = isPartial
? customizer(othValue, objValue, key, other, object, stack)
: customizer(objValue, othValue, key, object, other, stack);
}
// Recursively compare objects (susceptible to call stack limits).
if (!(compared === undefined
? (objValue === othValue || equalFunc(objValue, othValue, bitmask, customizer, stack))
: compared
)) {
result = false;
break;
}
skipCtor || (skipCtor = key == 'constructor');
}
if (result && !skipCtor) {
var objCtor = object.constructor,
othCtor = other.constructor;
// Non `Object` object instances with different constructors are not equal.
if (objCtor != othCtor &&
('constructor' in object && 'constructor' in other) &&
!(typeof objCtor == 'function' && objCtor instanceof objCtor &&
typeof othCtor == 'function' && othCtor instanceof othCtor)) {
result = false;
}
}
stack['delete'](object);
stack['delete'](other);
return result;
}
/**
* Creates an array of own enumerable property names and symbols of `object`.
*
* @private
* @param {Object} object The object to query.
* @returns {Array} Returns the array of property names and symbols.
*/
function getAllKeys(object) {
return baseGetAllKeys(object, keys, getSymbols);
}
/**
* Gets the data for `map`.
*
* @private
* @param {Object} map The map to query.
* @param {string} key The reference key.
* @returns {*} Returns the map data.
*/
function getMapData(map, key) {
var data = map.__data__;
return isKeyable(key)
? data[typeof key == 'string' ? 'string' : 'hash']
: data.map;
}
/**
* Gets the native function at `key` of `object`.
*
* @private
* @param {Object} object The object to query.
* @param {string} key The key of the method to get.
* @returns {*} Returns the function if it's native, else `undefined`.
*/
function getNative(object, key) {
var value = getValue(object, key);
return baseIsNative(value) ? value : undefined;
}
/**
* A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
*
* @private
* @param {*} value The value to query.
* @returns {string} Returns the raw `toStringTag`.
*/
function getRawTag(value) {
var isOwn = hasOwnProperty.call(value, symToStringTag),
tag = value[symToStringTag];
try {
value[symToStringTag] = undefined;
var unmasked = true;
} catch (e) {}
var result = nativeObjectToString.call(value);
if (unmasked) {
if (isOwn) {
value[symToStringTag] = tag;
} else {
delete value[symToStringTag];
}
}
return result;
}
/**
* Creates an array of the own enumerable symbols of `object`.
*
* @private
* @param {Object} object The object to query.
* @returns {Array} Returns the array of symbols.
*/
var getSymbols = !nativeGetSymbols ? stubArray : function(object) {
if (object == null) {
return [];
}
object = Object(object);
return arrayFilter(nativeGetSymbols(object), function(symbol) {
return propertyIsEnumerable.call(object, symbol);
});
};
/**
* Gets the `toStringTag` of `value`.
*
* @private
* @param {*} value The value to query.
* @returns {string} Returns the `toStringTag`.
*/
var getTag = baseGetTag;
// Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.
if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) ||
(Map && getTag(new Map) != mapTag) ||
(Promise && getTag(Promise.resolve()) != promiseTag) ||
(Set && getTag(new Set) != setTag) ||
(WeakMap && getTag(new WeakMap) != weakMapTag)) {
getTag = function(value) {
var result = baseGetTag(value),
Ctor = result == objectTag ? value.constructor : undefined,
ctorString = Ctor ? toSource(Ctor) : '';
if (ctorString) {
switch (ctorString) {
case dataViewCtorString: return dataViewTag;
case mapCtorString: return mapTag;
case promiseCtorString: return promiseTag;
case setCtorString: return setTag;
case weakMapCtorString: return weakMapTag;
}
}
return result;
};
}
/**
* Checks if `value` is a valid array-like index.
*
* @private
* @param {*} value The value to check.
* @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.
* @returns {boolean} Returns `true` if `value` is a valid index, else `false`.
*/
function isIndex(value, length) {
length = length == null ? MAX_SAFE_INTEGER : length;
return !!length &&
(typeof value == 'number' || reIsUint.test(value)) &&
(value > -1 && value % 1 == 0 && value < length);
}
/**
* Checks if `value` is suitable for use as unique object key.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is suitable, else `false`.
*/
function isKeyable(value) {
var type = typeof value;
return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
? (value !== '__proto__')
: (value === null);
}
/**
* Checks if `func` has its source masked.
*
* @private
* @param {Function} func The function to check.
* @returns {boolean} Returns `true` if `func` is masked, else `false`.
*/
function isMasked(func) {
return !!maskSrcKey && (maskSrcKey in func);
}
/**
* Checks if `value` is likely a prototype object.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a prototype, else `false`.
*/
function isPrototype(value) {
var Ctor = value && value.constructor,
proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto;
return value === proto;
}
/**
* Converts `value` to a string using `Object.prototype.toString`.
*
* @private
* @param {*} value The value to convert.
* @returns {string} Returns the converted string.
*/
function objectToString(value) {
return nativeObjectToString.call(value);
}
/**
* Converts `func` to its source code.
*
* @private
* @param {Function} func The function to convert.
* @returns {string} Returns the source code.
*/
function toSource(func) {
if (func != null) {
try {
return funcToString.call(func);
} catch (e) {}
try {
return (func + '');
} catch (e) {}
}
return '';
}
/**
* Performs a
* [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
* comparison between two values to determine if they are equivalent.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to compare.
* @param {*} other The other value to compare.
* @returns {boolean} Returns `true` if the values are equivalent, else `false`.
* @example
*
* var object = { 'a': 1 };
* var other = { 'a': 1 };
*
* _.eq(object, object);
* // => true
*
* _.eq(object, other);
* // => false
*
* _.eq('a', 'a');
* // => true
*
* _.eq('a', Object('a'));
* // => false
*
* _.eq(NaN, NaN);
* // => true
*/
function eq(value, other) {
return value === other || (value !== value && other !== other);
}
/**
* Checks if `value` is likely an `arguments` object.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an `arguments` object,
* else `false`.
* @example
*
* _.isArguments(function() { return arguments; }());
* // => true
*
* _.isArguments([1, 2, 3]);
* // => false
*/
var isArguments = baseIsArguments(function() { return arguments; }()) ? baseIsArguments : function(value) {
return isObjectLike(value) && hasOwnProperty.call(value, 'callee') &&
!propertyIsEnumerable.call(value, 'callee');
};
/**
* Checks if `value` is classified as an `Array` object.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an array, else `false`.
* @example
*
* _.isArray([1, 2, 3]);
* // => true
*
* _.isArray(document.body.children);
* // => false
*
* _.isArray('abc');
* // => false
*
* _.isArray(_.noop);
* // => false
*/
var isArray = Array.isArray;
/**
* Checks if `value` is array-like. A value is considered array-like if it's
* not a function and has a `value.length` that's an integer greater than or
* equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is array-like, else `false`.
* @example
*
* _.isArrayLike([1, 2, 3]);
* // => true
*
* _.isArrayLike(document.body.children);
* // => true
*
* _.isArrayLike('abc');
* // => true
*
* _.isArrayLike(_.noop);
* // => false
*/
function isArrayLike(value) {
return value != null && isLength(value.length) && !isFunction(value);
}
/**
* Checks if `value` is a buffer.
*
* @static
* @memberOf _
* @since 4.3.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a buffer, else `false`.
* @example
*
* _.isBuffer(new Buffer(2));
* // => true
*
* _.isBuffer(new Uint8Array(2));
* // => false
*/
var isBuffer = nativeIsBuffer || stubFalse;
/**
* Performs a deep comparison between two values to determine if they are
* equivalent.
*
* **Note:** This method supports comparing arrays, array buffers, booleans,
* date objects, error objects, maps, numbers, `Object` objects, regexes,
* sets, strings, symbols, and typed arrays. `Object` objects are compared
* by their own, not inherited, enumerable properties. Functions and DOM
* nodes are compared by strict equality, i.e. `===`.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to compare.
* @param {*} other The other value to compare.
* @returns {boolean} Returns `true` if the values are equivalent, else `false`.
* @example
*
* var object = { 'a': 1 };
* var other = { 'a': 1 };
*
* _.isEqual(object, other);
* // => true
*
* object === other;
* // => false
*/
function isEqual(value, other) {
return baseIsEqual(value, other);
}
/**
* Checks if `value` is classified as a `Function` object.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a function, else `false`.
* @example
*
* _.isFunction(_);
* // => true
*
* _.isFunction(/abc/);
* // => false
*/
function isFunction(value) {
if (!isObject(value)) {
return false;
}
// The use of `Object#toString` avoids issues with the `typeof` operator
// in Safari 9 which returns 'object' for typed arrays and other constructors.
var tag = baseGetTag(value);
return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
}
/**
* Checks if `value` is a valid array-like length.
*
* **Note:** This method is loosely based on
* [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
* @example
*
* _.isLength(3);
* // => true
*
* _.isLength(Number.MIN_VALUE);
* // => false
*
* _.isLength(Infinity);
* // => false
*
* _.isLength('3');
* // => false
*/
function isLength(value) {
return typeof value == 'number' &&
value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
}
/**
* Checks if `value` is the
* [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
* of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
* @example
*
* _.isObject({});
* // => true
*
* _.isObject([1, 2, 3]);
* // => true
*
* _.isObject(_.noop);
* // => true
*
* _.isObject(null);
* // => false
*/
function isObject(value) {
var type = typeof value;
return value != null && (type == 'object' || type == 'function');
}
/**
* Checks if `value` is object-like. A value is object-like if it's not `null`
* and has a `typeof` result of "object".
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
* @example
*
* _.isObjectLike({});
* // => true
*
* _.isObjectLike([1, 2, 3]);
* // => true
*
* _.isObjectLike(_.noop);
* // => false
*
* _.isObjectLike(null);
* // => false
*/
function isObjectLike(value) {
return value != null && typeof value == 'object';
}
/**
* Checks if `value` is classified as a typed array.
*
* @static
* @memberOf _
* @since 3.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
* @example
*
* _.isTypedArray(new Uint8Array);
* // => true
*
* _.isTypedArray([]);
* // => false
*/
var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
/**
* Creates an array of the own enumerable property names of `object`.
*
* **Note:** Non-object values are coerced to objects. See the
* [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
* for more details.
*
* @static
* @since 0.1.0
* @memberOf _
* @category Object
* @param {Object} object The object to query.
* @returns {Array} Returns the array of property names.
* @example
*
* function Foo() {
* this.a = 1;
* this.b = 2;
* }
*
* Foo.prototype.c = 3;
*
* _.keys(new Foo);
* // => ['a', 'b'] (iteration order is not guaranteed)
*
* _.keys('hi');
* // => ['0', '1']
*/
function keys(object) {
return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
}
/**
* This method returns a new empty array.
*
* @static
* @memberOf _
* @since 4.13.0
* @category Util
* @returns {Array} Returns the new empty array.
* @example
*
* var arrays = _.times(2, _.stubArray);
*
* console.log(arrays);
* // => [[], []]
*
* console.log(arrays[0] === arrays[1]);
* // => false
*/
function stubArray() {
return [];
}
/**
* This method returns `false`.
*
* @static
* @memberOf _
* @since 4.13.0
* @category Util
* @returns {boolean} Returns `false`.
* @example
*
* _.times(2, _.stubFalse);
* // => [false, false]
*/
function stubFalse() {
return false;
}
module.exports = isEqual;
});
var classnames = createCommonjsModule(function (module) {
/*!
Copyright (c) 2017 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
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.push(arg);
} else if (Array.isArray(arg) && arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if ( module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = classNames;
}
}());
});
// this file was prevaled
var fastRGLPropsEqual = function fastRGLPropsEqual(a, b, isEqualImpl) {
if (a === b) return true;
return a.className === b.className && isEqualImpl(a.style, b.style) && a.width === b.width && a.autoSize === b.autoSize && a.cols === b.cols && a.draggableCancel === b.draggableCancel && a.draggableHandle === b.draggableHandle && isEqualImpl(a.verticalCompact, b.verticalCompact) && isEqualImpl(a.compactType, b.compactType) && isEqualImpl(a.layout, b.layout) && isEqualImpl(a.margin, b.margin) && isEqualImpl(a.containerPadding, b.containerPadding) && a.rowHeight === b.rowHeight && a.maxRows === b.maxRows && a.isBounded === b.isBounded && a.isDraggable === b.isDraggable && a.isResizable === b.isResizable && a.preventCollision === b.preventCollision && a.useCSSTransforms === b.useCSSTransforms && a.transformScale === b.transformScale && a.isDroppable === b.isDroppable && isEqualImpl(a.resizeHandles, b.resizeHandles) && a.onLayoutChange === b.onLayoutChange && a.onDragStart === b.onDragStart && a.onDrag === b.onDrag && a.onDragStop === b.onDragStop && a.onResizeStart === b.onResizeStart && a.onResize === b.onResize && a.onResizeStop === b.onResizeStop && a.onDrop === b.onDrop && isEqualImpl(a.droppingItem, b.droppingItem) && isEqualImpl(a.innerRef, b.innerRef);
};
var utils = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.bottom = bottom;
exports.cloneLayout = cloneLayout;
exports.cloneLayoutItem = cloneLayoutItem;
exports.childrenEqual = childrenEqual;
exports.fastPositionEqual = fastPositionEqual;
exports.collides = collides;
exports.compact = compact;
exports.compactItem = compactItem;
exports.correctBounds = correctBounds;
exports.getLayoutItem = getLayoutItem;
exports.getFirstCollision = getFirstCollision;
exports.getAllCollisions = getAllCollisions;
exports.getStatics = getStatics;
exports.moveElement = moveElement;
exports.moveElementAwayFromCollision = moveElementAwayFromCollision;
exports.perc = perc;
exports.setTransform = setTransform;
exports.setTopLeft = setTopLeft;
exports.sortLayoutItems = sortLayoutItems;
exports.sortLayoutItemsByRowCol = sortLayoutItemsByRowCol;
exports.sortLayoutItemsByColRow = sortLayoutItemsByColRow;
exports.synchronizeLayoutWithChildren = synchronizeLayoutWithChildren;
exports.validateLayout = validateLayout;
exports.compactType = compactType;
exports.autoBindHandlers = autoBindHandlers;
exports.noop = exports.fastRGLPropsEqual = void 0;
var _lodash = _interopRequireDefault(lodash_isequal);
var _react = _interopRequireDefault(React);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var isProduction = process.env.NODE_ENV === "production";
/**
* Return the bottom coordinate of the layout.
*
* @param {Array} layout Layout array.
* @return {Number} Bottom coordinate.
*/
function bottom(layout
/*: Layout*/
)
/*: number*/
{
var max = 0,
bottomY;
for (var i = 0, len = layout.length; i < len; i++) {
bottomY = layout[i].y + layout[i].h;
if (bottomY > max) max = bottomY;
}
return max;
}
function cloneLayout(layout
/*: Layout*/
)
/*: Layout*/
{
var newLayout = Array(layout.length);
for (var i = 0, len = layout.length; i < len; i++) {
newLayout[i] = cloneLayoutItem(layout[i]);
}
return newLayout;
} // Fast path to cloning, since this is monomorphic
function cloneLayoutItem(layoutItem
/*: LayoutItem*/
)
/*: LayoutItem*/
{
return {
w: layoutItem.w,
h: layoutItem.h,
x: layoutItem.x,
y: layoutItem.y,
i: layoutItem.i,
minW: layoutItem.minW,
maxW: layoutItem.maxW,
minH: layoutItem.minH,
maxH: layoutItem.maxH,
moved: Boolean(layoutItem.moved),
static: Boolean(layoutItem.static),
// These can be null/undefined
isDraggable: layoutItem.isDraggable,
isResizable: layoutItem.isResizable,
resizeHandles: layoutItem.resizeHandles,
isBounded: layoutItem.isBounded
};
}
/**
* Comparing React `children` is a bit difficult. This is a good way to compare them.
* This will catch differences in keys, order, and length.
*/
function childrenEqual(a
/*: ReactChildren*/
, b
/*: ReactChildren*/
)
/*: boolean*/
{
return (0, _lodash.default)(_react.default.Children.map(a, function (c) {
return c.key;
}), _react.default.Children.map(b, function (c) {
return c.key;
}));
}
/**
* See `fastRGLPropsEqual.js`.
* We want this to run as fast as possible - it is called often - and to be
* resilient to new props that we add. So rather than call lodash.isEqual,
* which isn't suited to comparing props very well, we use this specialized
* function in conjunction with preval to generate the fastest possible comparison
* function, tuned for exactly our props.
*/
/*:: type FastRGLPropsEqual = (Object, Object, Function) => boolean;*/
// Like the above, but a lot simpler.
exports.fastRGLPropsEqual = fastRGLPropsEqual;
function fastPositionEqual(a
/*: Position*/
, b
/*: Position*/
) {
return a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height;
}
/**
* Given two layoutitems, check if they collide.
*/
function collides(l1
/*: LayoutItem*/
, l2
/*: LayoutItem*/
)
/*: boolean*/
{
if (l1.i === l2.i) return false; // same element
if (l1.x + l1.w <= l2.x) return false; // l1 is left of l2
if (l1.x >= l2.x + l2.w) return false; // l1 is right of l2
if (l1.y + l1.h <= l2.y) return false; // l1 is above l2
if (l1.y >= l2.y + l2.h) return false; // l1 is below l2
return true; // boxes overlap
}
/**
* Given a layout, compact it. This involves going down each y coordinate and removing gaps
* between items.
*
* Does not modify layout items (clones). Creates a new layout array.
*
* @param {Array} layout Layout.
* @param {Boolean} verticalCompact Whether or not to compact the layout
* vertically.
* @return {Array} Compacted Layout.
*/
function compact(layout
/*: Layout*/
, compactType
/*: CompactType*/
, cols
/*: number*/
)
/*: Layout*/
{
// Statics go in the compareWith array right away so items flow around them.
var compareWith = getStatics(layout); // We go through the items by row and column.
var sorted = sortLayoutItems(layout, compactType); // Holding for new items.
var out = Array(layout.length);
for (var i = 0, len = sorted.length; i < len; i++) {
var l = cloneLayoutItem(sorted[i]); // Don't move static elements
if (!l.static) {
l = compactItem(compareWith, l, compactType, cols, sorted); // Add to comparison array. We only collide with items before this one.
// Statics are already in this array.
compareWith.push(l);
} // Add to output array to make sure they still come out in the right order.
out[layout.indexOf(sorted[i])] = l; // Clear moved flag, if it exists.
l.moved = false;
}
return out;
}
var heightWidth = {
x: "w",
y: "h"
};
/**
* Before moving item down, it will check if the movement will cause collisions and move those items down before.
*/
function resolveCompactionCollision(layout
/*: Layout*/
, item
/*: LayoutItem*/
, moveToCoord
/*: number*/
, axis
/*: "x" | "y"*/
) {
var sizeProp = heightWidth[axis];
item[axis] += 1;
var itemIndex = layout.map(function (layoutItem) {
return layoutItem.i;
}).indexOf(item.i); // Go through each item we collide with.
for (var i = itemIndex + 1; i < layout.length; i++) {
var otherItem = layout[i]; // Ignore static items
if (otherItem.static) continue; // Optimization: we can break early if we know we're past this el
// We can do this b/c it's a sorted layout
if (otherItem.y > item.y + item.h) break;
if (collides(item, otherItem)) {
resolveCompactionCollision(layout, otherItem, moveToCoord + item[sizeProp], axis);
}
}
item[axis] = moveToCoord;
}
/**
* Compact an item in the layout.
*
* Modifies item.
*
*/
function compactItem(compareWith
/*: Layout*/
, l
/*: LayoutItem*/
, compactType
/*: CompactType*/
, cols
/*: number*/
, fullLayout
/*: Layout*/
)
/*: LayoutItem*/
{
var compactV = compactType === "vertical";
var compactH = compactType === "horizontal";
if (compactV) {
// Bottom 'y' possible is the bottom of the layout.
// This allows you to do nice stuff like specify {y: Infinity}
// This is here because the layout must be sorted in order to get the correct bottom `y`.
l.y = Math.min(bottom(compareWith), l.y); // Move the element up as far as it can go without colliding.
while (l.y > 0 && !getFirstCollision(compareWith, l)) {
l.y--;
}
} else if (compactH) {
l.y = Math.min(bottom(compareWith), l.y); // Move the element left as far as it can go without colliding.
while (l.x > 0 && !getFirstCollision(compareWith, l)) {
l.x--;
}
} // Move it down, and keep moving it down if it's colliding.
var collides;
while (collides = getFirstCollision(compareWith, l)) {
if (compactH) {
resolveCompactionCollision(fullLayout, l, collides.x + collides.w, "x");
} else {
resolveCompactionCollision(fullLayout, l, collides.y + collides.h, "y");
} // Since we can't grow without bounds horizontally, if we've overflown, let's move it down and try again.
if (compactH && l.x + l.w > cols) {
l.x = cols - l.w;
l.y++;
}
}
return l;
}
/**
* Given a layout, make sure all elements fit within its bounds.
*
* Modifies layout items.
*
* @param {Array} layout Layout array.
* @param {Number} bounds Number of columns.
*/
function correctBounds(layout
/*: Layout*/
, bounds
/*: { cols: number }*/
)
/*: Layout*/
{
var collidesWith = getStatics(layout);
for (var i = 0, len = layout.length; i < len; i++) {
var l = layout[i]; // Overflows right
if (l.x + l.w > bounds.cols) l.x = bounds.cols - l.w; // Overflows left
if (l.x < 0) {
l.x = 0;
l.w = bounds.cols;
}
if (!l.static) collidesWith.push(l);else {
// If this is static and collides with other statics, we must move it down.
// We have to do something nicer than just letting them overlap.
while (getFirstCollision(collidesWith, l)) {
l.y++;
}
}
}
return layout;
}
/**
* Get a layout item by ID. Used so we can override later on if necessary.
*
* @param {Array} layout Layout array.
* @param {String} id ID
* @return {LayoutItem} Item at ID.
*/
function getLayoutItem(layout
/*: Layout*/
, id
/*: string*/
)
/*: ?LayoutItem*/
{
for (var i = 0, len = layout.length; i < len; i++) {
if (layout[i].i === id) return layout[i];
}
}
/**
* Returns the first item this layout collides with.
* It doesn't appear to matter which order we approach this from, although
* perhaps that is the wrong thing to do.
*
* @param {Object} layoutItem Layout item.
* @return {Object|undefined} A colliding layout item, or undefined.
*/
function getFirstCollision(layout
/*: Layout*/
, layoutItem
/*: LayoutItem*/
)
/*: ?LayoutItem*/
{
for (var i = 0, len = layout.length; i < len; i++) {
if (collides(layout[i], layoutItem)) return layout[i];
}
}
function getAllCollisions(layout
/*: Layout*/
, layoutItem
/*: LayoutItem*/
)
/*: Array<LayoutItem>*/
{
return layout.filter(function (l) {
return collides(l, layoutItem);
});
}
/**
* Get all static elements.
* @param {Array} layout Array of layout objects.
* @return {Array} Array of static layout items..
*/
function getStatics(layout
/*: Layout*/
)
/*: Array<LayoutItem>*/
{
return layout.filter(function (l) {
return l.static;
});
}
/**
* Move an element. Responsible for doing cascading movements of other elements.
*
* Modifies layout items.
*
* @param {Array} layout Full layout to modify.
* @param {LayoutItem} l element to move.
* @param {Number} [x] X position in grid units.
* @param {Number} [y] Y position in grid units.
*/
function moveElement(layout
/*: Layout*/
, l
/*: LayoutItem*/
, x
/*: ?number*/
, y
/*: ?number*/
, isUserAction
/*: ?boolean*/
, preventCollision
/*: ?boolean*/
, compactType
/*: CompactType*/
, cols
/*: number*/
)
/*: Layout*/
{
// If this is static and not explicitly enabled as draggable,
// no move is possible, so we can short-circuit this immediately.
if (l.static && l.isDraggable !== true) return layout; // Short-circuit if nothing to do.
if (l.y === y && l.x === x) return layout;
var oldX = l.x;
var oldY = l.y; // This is quite a bit faster than extending the object
if (typeof x === "number") l.x = x;
if (typeof y === "number") l.y = y;
l.moved = true; // If this collides with anything, move it.
// When doing this comparison, we have to sort the items we compare with
// to ensure, in the case of multiple collisions, that we're getting the
// nearest collision.
var sorted = sortLayoutItems(layout, compactType);
var movingUp = compactType === "vertical" && typeof y === "number" ? oldY >= y : compactType === "horizontal" && typeof x === "number" ? oldX >= x : false; // $FlowIgnore acceptable modification of read-only array as it was recently cloned
if (movingUp) sorted = sorted.reverse();
var collisions = getAllCollisions(sorted, l); // There was a collision; abort
if (preventCollision && collisions.length) {
l.x = oldX;
l.y = oldY;
l.moved = false;
return layout;
} // Move each item that collides away from this element.
for (var i = 0, len = collisions.length; i < len; i++) {
var collision = collisions[i];
if (collision.moved) continue; // Don't move static items - we have to move *this* element away
if (collision.static) {
layout = moveElementAwayFromCollision(layout, collision, l, isUserAction, compactType);
} else {
layout = moveElementAwayFromCollision(layout, l, collision, isUserAction, compactType);
}
}
return layout;
}
/**
* This is where the magic needs to happen - given a collision, move an element away from the collision.
* We attempt to move it up if there's room, otherwise it goes below.
*
* @param {Array} layout Full layout to modify.
* @param {LayoutItem} collidesWith Layout item we're colliding with.
* @param {LayoutItem} itemToMove Layout item we're moving.
*/
function moveElementAwayFromCollision(layout
/*: Layout*/
, collidesWith
/*: LayoutItem*/
, itemToMove
/*: LayoutItem*/
, isUserAction
/*: ?boolean*/
, compactType
/*: CompactType*/
, cols
/*: number*/
)
/*: Layout*/
{
var compactH = compactType === "horizontal"; // Compact vertically if not set to horizontal
var compactV = compactType !== "horizontal";
var preventCollision = collidesWith.static; // we're already colliding (not for static items)
// If there is enough space above the collision to put this element, move it there.
// We only do this on the main collision as this can get funky in cascades and cause
// unwanted swapping behavior.
if (isUserAction) {
// Reset isUserAction flag because we're not in the main collision anymore.
isUserAction = false; // Make a mock item so we don't modify the item here, only modify in moveElement.
var fakeItem
/*: LayoutItem*/
= {
x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
w: itemToMove.w,
h: itemToMove.h,
i: "-1"
}; // No collision? If so, we can go up there; otherwise, we'll end up moving down as normal
if (!getFirstCollision(layout, fakeItem)) {
return moveElement(layout, itemToMove, compactH ? fakeItem.x : undefined, compactV ? fakeItem.y : undefined, isUserAction, preventCollision, compactType);
}
}
return moveElement(layout, itemToMove, compactH ? itemToMove.x + 1 : undefined, compactV ? itemToMove.y + 1 : undefined, isUserAction, preventCollision, compactType);
}
/**
* Helper to convert a number to a percentage string.
*
* @param {Number} num Any number
* @return {String} That number as a percentage.
*/
function perc(num
/*: number*/
)
/*: string*/
{
return num * 100 + "%";
}
function setTransform(_ref)
/*: Object*/
{
var top = _ref.top,
left = _ref.left,
width = _ref.width,
height = _ref.height;
// Replace unitless items with px
var translate = "translate(".concat(left, "px,").concat(top, "px)");
return {
transform: translate,
WebkitTransform: translate,
MozTransform: translate,
msTransform: translate,
OTransform: translate,
width: "".concat(width, "px"),
height: "".concat(height, "px"),
position: "absolute"
};
}
function setTopLeft(_ref2)
/*: Object*/
{
var top = _ref2.top,
left = _ref2.left,
width = _ref2.width,
height = _ref2.height;
return {
top: "".concat(top, "px"),
left: "".concat(left, "px"),
width: "".concat(width, "px"),
height: "".concat(height, "px"),
position: "absolute"
};
}
/**
* Get layout items sorted from top left to right and down.
*
* @return {Array} Array of layout objects.
* @return {Array} Layout, sorted static items first.
*/
function sortLayoutItems(layout
/*: Layout*/
, compactType
/*: CompactType*/
)
/*: Layout*/
{
if (compactType === "horizontal") return sortLayoutItemsByColRow(layout);else return sortLayoutItemsByRowCol(layout);
}
/**
* Sort layout items by row ascending and column ascending.
*
* Does not modify Layout.
*/
function sortLayoutItemsByRowCol(layout
/*: Layout*/
)
/*: Layout*/
{
// Slice to clone array as sort modifies
return layout.slice(0).sort(function (a, b) {
if (a.y > b.y || a.y === b.y && a.x > b.x) {
return 1;
} else if (a.y === b.y && a.x === b.x) {
// Without this, we can get different sort results in IE vs. Chrome/FF
return 0;
}
return -1;
});
}
/**
* Sort layout items by column ascending then row ascending.
*
* Does not modify Layout.
*/
function sortLayoutItemsByColRow(layout
/*: Layout*/
)
/*: Layout*/
{
return layout.slice(0).sort(function (a, b) {
if (a.x > b.x || a.x === b.x && a.y > b.y) {
return 1;
}
return -1;
});
}
/**
* Generate a layout using the initialLayout and children as a template.
* Missing entries will be added, extraneous ones will be truncated.
*
* Does not modify initialLayout.
*
* @param {Array} initialLayout Layout passed in through props.
* @param {String} breakpoint Current responsive breakpoint.
* @param {?String} compact Compaction option.
* @return {Array} Working layout.
*/
function synchronizeLayoutWithChildren(initialLayout
/*: Layout*/
, children
/*: ReactChildren*/
, cols
/*: number*/
, compactType
/*: CompactType*/
)
/*: Layout*/
{
initialLayout = initialLayout || []; // Generate one layout item per child.
var layout
/*: LayoutItem[]*/
= [];
_react.default.Children.forEach(children, function (child
/*: ReactElement<any>*/
, i
/*: number*/
) {
// Don't overwrite if it already exists.
var exists = getLayoutItem(initialLayout, String(child.key));
if (exists) {
layout[i] = cloneLayoutItem(exists);
} else {
if (!isProduction && child.props._grid) {
console.warn("`_grid` properties on children have been deprecated as of React 15.2. " + // eslint-disable-line
"Please use `data-grid` or add your properties directly to the `layout`.");
}
var g = child.props["data-grid"] || child.props._grid; // Hey, this item has a data-grid property, use it.
if (g) {
if (!isProduction) {
validateLayout([g], "ReactGridLayout.children");
}
layout[i] = cloneLayoutItem(_objectSpread(_objectSpread({}, g), {}, {
i: child.key
}));
} else {
// Nothing provided: ensure this is added to the bottom
layout[i] = cloneLayoutItem({
w: 1,
h: 1,
x: 0,
y: bottom(layout),
i: String(child.key)
});
}
}
}); // Correct the layout.
var correctedLayout = correctBounds(layout, {
cols: cols
});
return compact(correctedLayout, compactType, cols);
}
/**
* Validate a layout. Throws errors.
*
* @param {Array} layout Array of layout items.
* @param {String} [contextName] Context name for errors.
* @throw {Error} Validation error.
*/
function validateLayout(layout
/*: Layout*/
)
/*: void*/
{
var contextName
/*: string*/
= arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "Layout";
var subProps = ["x", "y", "w", "h"];
if (!Array.isArray(layout)) throw new Error(contextName + " must be an array!");
for (var i = 0, len = layout.length; i < len; i++) {
var item = layout[i];
for (var j = 0; j < subProps.length; j++) {
if (typeof item[subProps[j]] !== "number") {
throw new Error("ReactGridLayout: " + contextName + "[" + i + "]." + subProps[j] + " must be a number!");
}
}
if (item.i && typeof item.i !== "string") {
throw new Error("ReactGridLayout: " + contextName + "[" + i + "].i must be a string!");
}
if (item.static !== undefined && typeof item.static !== "boolean") {
throw new Error("ReactGridLayout: " + contextName + "[" + i + "].static must be a boolean!");
}
}
} // Legacy support for verticalCompact: false
function compactType(props
/*: ?{ verticalCompact: boolean, compactType: CompactType }*/
)
/*: CompactType*/
{
var _ref3 = props || {},
verticalCompact = _ref3.verticalCompact,
compactType = _ref3.compactType;
return verticalCompact === false ? null : compactType;
} // Flow can't really figure this out, so we just use Object
function autoBindHandlers(el
/*: Object*/
, fns
/*: Array<string>*/
)
/*: void*/
{
fns.forEach(function (key) {
return el[key] = el[key].bind(el);
});
}
var noop = function noop() {};
exports.noop = noop;
});
unwrapExports(utils);
var calculateUtils = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.calcGridColWidth = calcGridColWidth;
exports.calcGridItemWHPx = calcGridItemWHPx;
exports.calcGridItemPosition = calcGridItemPosition;
exports.calcXY = calcXY;
exports.calcWH = calcWH;
exports.clamp = clamp;
/*:: import type { Position } from "./utils";*/
/*:: export type PositionParams = {
margin: [number, number],
containerPadding: [number, number],
containerWidth: number,
cols: number,
rowHeight: number,
maxRows: number
};*/
// Helper for generating column width
function calcGridColWidth(positionParams
/*: PositionParams*/
)
/*: number*/
{
var margin = positionParams.margin,
containerPadding = positionParams.containerPadding,
containerWidth = positionParams.containerWidth,
cols = positionParams.cols;
return (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols;
} // This can either be called:
// calcGridItemWHPx(w, colWidth, margin[0])
// or
// calcGridItemWHPx(h, rowHeight, margin[1])
function calcGridItemWHPx(gridUnits
/*: number*/
, colOrRowSize
/*: number*/
, marginPx
/*: number*/
) {
// 0 * Infinity === NaN, which causes problems with resize contraints
if (!Number.isFinite(gridUnits)) return gridUnits;
return Math.round(colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx);
}
/**
* Return position on the page given an x, y, w, h.
* left, top, width, height are all in pixels.
* @param {PositionParams} positionParams Parameters of grid needed for coordinates calculations.
* @param {Number} x X coordinate in grid units.
* @param {Number} y Y coordinate in grid units.
* @param {Number} w W coordinate in grid units.
* @param {Number} h H coordinate in grid units.
* @return {Position} Object containing coords.
*/
function calcGridItemPosition(positionParams
/*: PositionParams*/
, x
/*: number*/
, y
/*: number*/
, w
/*: number*/
, h
/*: number*/
, state
/*: ?Object*/
)
/*: Position*/
{
var margin = positionParams.margin,
containerPadding = positionParams.containerPadding,
rowHeight = positionParams.rowHeight;
var colWidth = calcGridColWidth(positionParams);
var out = {}; // If resizing, use the exact width and height as returned from resizing callbacks.
if (state && state.resizing) {
out.width = Math.round(state.resizing.width);
out.height = Math.round(state.resizing.height);
} // Otherwise, calculate from grid units.
else {
out.width = calcGridItemWHPx(w, colWidth, margin[0]);
out.height = calcGridItemWHPx(h, rowHeight, margin[1]);
} // If dragging, use the exact width and height as returned from dragging callbacks.
if (state && state.dragging) {
out.top = Math.round(state.dragging.top);
out.left = Math.round(state.dragging.left);
} // Otherwise, calculate from grid units.
else {
out.top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);
out.left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
}
return out;
}
/**
* Translate x and y coordinates from pixels to grid units.
* @param {PositionParams} positionParams Parameters of grid needed for coordinates calculations.
* @param {Number} top Top position (relative to parent) in pixels.
* @param {Number} left Left position (relative to parent) in pixels.
* @param {Number} w W coordinate in grid units.
* @param {Number} h H coordinate in grid units.
* @return {Object} x and y in grid units.
*/
function calcXY(positionParams
/*: PositionParams*/
, top
/*: number*/
, left
/*: number*/
, w
/*: number*/
, h
/*: number*/
)
/*: { x: number, y: number }*/
{
var margin = positionParams.margin,
cols = positionParams.cols,
rowHeight = positionParams.rowHeight,
maxRows = positionParams.maxRows;
var colWidth = calcGridColWidth(positionParams); // left = colWidth * x + margin * (x + 1)
// l = cx + m(x+1)
// l = cx + mx + m
// l - m = cx + mx
// l - m = x(c + m)
// (l - m) / (c + m) = x
// x = (left - margin) / (coldWidth + margin)
var x = Math.round((left - margin[0]) / (colWidth + margin[0]));
var y = Math.round((top - margin[1]) / (rowHeight + margin[1])); // Capping
x = clamp(x, 0, cols - w);
y = clamp(y, 0, maxRows - h);
return {
x: x,
y: y
};
}
/**
* Given a height and width in pixel values, calculate grid units.
* @param {PositionParams} positionParams Parameters of grid needed for coordinates calcluations.
* @param {Number} height Height in pixels.
* @param {Number} width Width in pixels.
* @param {Number} x X coordinate in grid units.
* @param {Number} y Y coordinate in grid units.
* @return {Object} w, h as grid units.
*/
function calcWH(positionParams
/*: PositionParams*/
, width
/*: number*/
, height
/*: number*/
, x
/*: number*/
, y
/*: number*/
)
/*: { w: number, h: number }*/
{
var margin = positionParams.margin,
maxRows = positionParams.maxRows,
cols = positionParams.cols,
rowHeight = positionParams.rowHeight;
var colWidth = calcGridColWidth(positionParams); // width = colWidth * w - (margin * (w - 1))
// ...
// w = (width + margin) / (colWidth + margin)
var w = Math.round((width + margin[0]) / (colWidth + margin[0]));
var h = Math.round((height + margin[1]) / (rowHeight + margin[1])); // Capping
w = clamp(w, 0, cols - x);
h = clamp(h, 0, maxRows - y);
return {
w: w,
h: h
};
} // Similar to _.clamp
function clamp(num
/*: number*/
, lowerBound
/*: number*/
, upperBound
/*: number*/
) {
return Math.max(Math.min(num, upperBound), lowerBound);
}
});
unwrapExports(calculateUtils);
/** @license React v16.13.1
* react-is.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element=c;var ForwardRef=n;var Fragment=e;var Lazy=t;var Memo=r;var Portal=d;
var Profiler=g;var StrictMode=f;var Suspense=p;var isAsyncMode=function(a){return A(a)||z(a)===l};var isConcurrentMode=A;var isContextConsumer=function(a){return z(a)===k};var isContextProvider=function(a){return z(a)===h};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};var isForwardRef=function(a){return z(a)===n};var isFragment=function(a){return z(a)===e};var isLazy=function(a){return z(a)===t};
var isMemo=function(a){return z(a)===r};var isPortal=function(a){return z(a)===d};var isProfiler=function(a){return z(a)===g};var isStrictMode=function(a){return z(a)===f};var isSuspense=function(a){return z(a)===p};
var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};var typeOf=z;
var reactIs_production_min = {
AsyncMode: AsyncMode,
ConcurrentMode: ConcurrentMode,
ContextConsumer: ContextConsumer,
ContextProvider: ContextProvider,
Element: Element,
ForwardRef: ForwardRef,
Fragment: Fragment,
Lazy: Lazy,
Memo: Memo,
Portal: Portal,
Profiler: Profiler,
StrictMode: StrictMode,
Suspense: Suspense,
isAsyncMode: isAsyncMode,
isConcurrentMode: isConcurrentMode,
isContextConsumer: isContextConsumer,
isContextProvider: isContextProvider,
isElement: isElement,
isForwardRef: isForwardRef,
isFragment: isFragment,
isLazy: isLazy,
isMemo: isMemo,
isPortal: isPortal,
isProfiler: isProfiler,
isStrictMode: isStrictMode,
isSuspense: isSuspense,
isValidElementType: isValidElementType,
typeOf: typeOf
};
var reactIs_development = createCommonjsModule(function (module, exports) {
if (process.env.NODE_ENV !== "production") {
(function() {
// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
// nor polyfill, then a plain number is used for performance.
var hasSymbol = typeof Symbol === 'function' && Symbol.for;
var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
// (unstable) APIs that have been removed. Can we remove the symbols?
var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
function isValidElementType(type) {
return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
}
function typeOf(object) {
if (typeof object === 'object' && object !== null) {
var $$typeof = object.$$typeof;
switch ($$typeof) {
case REACT_ELEMENT_TYPE:
var type = object.type;
switch (type) {
case REACT_ASYNC_MODE_TYPE:
case REACT_CONCURRENT_MODE_TYPE:
case REACT_FRAGMENT_TYPE:
case REACT_PROFILER_TYPE:
case REACT_STRICT_MODE_TYPE:
case REACT_SUSPENSE_TYPE:
return type;
default:
var $$typeofType = type && type.$$typeof;
switch ($$typeofType) {
case REACT_CONTEXT_TYPE:
case REACT_FORWARD_REF_TYPE:
case REACT_LAZY_TYPE:
case REACT_MEMO_TYPE:
case REACT_PROVIDER_TYPE:
return $$typeofType;
default:
return $$typeof;
}
}
case REACT_PORTAL_TYPE:
return $$typeof;
}
}
return undefined;
} // AsyncMode is deprecated along with isAsyncMode
var AsyncMode = REACT_ASYNC_MODE_TYPE;
var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
var ContextConsumer = REACT_CONTEXT_TYPE;
var ContextProvider = REACT_PROVIDER_TYPE;
var Element = REACT_ELEMENT_TYPE;
var ForwardRef = REACT_FORWARD_REF_TYPE;
var Fragment = REACT_FRAGMENT_TYPE;
var Lazy = REACT_LAZY_TYPE;
var Memo = REACT_MEMO_TYPE;
var Portal = REACT_PORTAL_TYPE;
var Profiler = REACT_PROFILER_TYPE;
var StrictMode = REACT_STRICT_MODE_TYPE;
var Suspense = REACT_SUSPENSE_TYPE;
var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
function isAsyncMode(object) {
{
if (!hasWarnedAboutDeprecatedIsAsyncMode) {
hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
}
}
return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
}
function isConcurrentMode(object) {
return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
}
function isContextConsumer(object) {
return typeOf(object) === REACT_CONTEXT_TYPE;
}
function isContextProvider(object) {
return typeOf(object) === REACT_PROVIDER_TYPE;
}
function isElement(object) {
return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
}
function isForwardRef(object) {
return typeOf(object) === REACT_FORWARD_REF_TYPE;
}
function isFragment(object) {
return typeOf(object) === REACT_FRAGMENT_TYPE;
}
function isLazy(object) {
return typeOf(object) === REACT_LAZY_TYPE;
}
function isMemo(object) {
return typeOf(object) === REACT_MEMO_TYPE;
}
function isPortal(object) {
return typeOf(object) === REACT_PORTAL_TYPE;
}
function isProfiler(object) {
return typeOf(object) === REACT_PROFILER_TYPE;
}
function isStrictMode(object) {
return typeOf(object) === REACT_STRICT_MODE_TYPE;
}
function isSuspense(object) {
return typeOf(object) === REACT_SUSPENSE_TYPE;
}
exports.AsyncMode = AsyncMode;
exports.ConcurrentMode = ConcurrentMode;
exports.ContextConsumer = ContextConsumer;
exports.ContextProvider = ContextProvider;
exports.Element = Element;
exports.ForwardRef = ForwardRef;
exports.Fragment = Fragment;
exports.Lazy = Lazy;
exports.Memo = Memo;
exports.Portal = Portal;
exports.Profiler = Profiler;
exports.StrictMode = StrictMode;
exports.Suspense = Suspense;
exports.isAsyncMode = isAsyncMode;
exports.isConcurrentMode = isConcurrentMode;
exports.isContextConsumer = isContextConsumer;
exports.isContextProvider = isContextProvider;
exports.isElement = isElement;
exports.isForwardRef = isForwardRef;
exports.isFragment = isFragment;
exports.isLazy = isLazy;
exports.isMemo = isMemo;
exports.isPortal = isPortal;
exports.isProfiler = isProfiler;
exports.isStrictMode = isStrictMode;
exports.isSuspense = isSuspense;
exports.isValidElementType = isValidElementType;
exports.typeOf = typeOf;
})();
}
});
var reactIs = createCommonjsModule(function (module) {
if (process.env.NODE_ENV === 'production') {
module.exports = reactIs_production_min;
} else {
module.exports = reactIs_development;
}
});
/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
/* eslint-disable no-unused-vars */
var getOwnPropertySymbols = Object.getOwnPropertySymbols;
var hasOwnProperty = Object.prototype.hasOwnProperty;
var propIsEnumerable = Object.prototype.propertyIsEnumerable;
function toObject(val) {
if (val === null || val === undefined) {
throw new TypeError('Object.assign cannot be called with null or undefined');
}
return Object(val);
}
function shouldUseNative() {
try {
if (!Object.assign) {
return false;
}
// Detect buggy property enumeration order in older V8 versions.
// https://bugs.chromium.org/p/v8/issues/detail?id=4118
var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
test1[5] = 'de';
if (Object.getOwnPropertyNames(test1)[0] === '5') {
return false;
}
// https://bugs.chromium.org/p/v8/issues/detail?id=3056
var test2 = {};
for (var i = 0; i < 10; i++) {
test2['_' + String.fromCharCode(i)] = i;
}
var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
return test2[n];
});
if (order2.join('') !== '0123456789') {
return false;
}
// https://bugs.chromium.org/p/v8/issues/detail?id=3056
var test3 = {};
'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
test3[letter] = letter;
});
if (Object.keys(Object.assign({}, test3)).join('') !==
'abcdefghijklmnopqrst') {
return false;
}
return true;
} catch (err) {
// We don't expect any of the above to throw, but better to be safe.
return false;
}
}
var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
var from;
var to = toObject(target);
var symbols;
for (var s = 1; s < arguments.length; s++) {
from = Object(arguments[s]);
for (var key in from) {
if (hasOwnProperty.call(from, key)) {
to[key] = from[key];
}
}
if (getOwnPropertySymbols) {
symbols = getOwnPropertySymbols(from);
for (var i = 0; i < symbols.length; i++) {
if (propIsEnumerable.call(from, symbols[i])) {
to[symbols[i]] = from[symbols[i]];
}
}
}
}
return to;
};
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
var ReactPropTypesSecret_1 = ReactPropTypesSecret;
var printWarning = function() {};
if (process.env.NODE_ENV !== 'production') {
var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
var loggedTypeFailures = {};
var has = Function.call.bind(Object.prototype.hasOwnProperty);
printWarning = function(text) {
var message = 'Warning: ' + text;
if (typeof console !== 'undefined') {
console.error(message);
}
try {
// --- Welcome to debugging React ---
// This error was thrown as a convenience so that you can use this stack
// to find the callsite that caused this warning to fire.
throw new Error(message);
} catch (x) {}
};
}
/**
* Assert that the values match with the type specs.
* Error messages are memorized and will only be shown once.
*
* @param {object} typeSpecs Map of name to a ReactPropType
* @param {object} values Runtime values that need to be type-checked
* @param {string} location e.g. "prop", "context", "child context"
* @param {string} componentName Name of the component for error messages.
* @param {?Function} getStack Returns the component stack.
* @private
*/
function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
if (process.env.NODE_ENV !== 'production') {
for (var typeSpecName in typeSpecs) {
if (has(typeSpecs, typeSpecName)) {
var error;
// Prop type validation may throw. In case they do, we don't want to
// fail the render phase where it didn't fail before. So we log it.
// After these have been cleaned up, we'll let them throw.
try {
// This is intentionally an invariant that gets caught. It's the same
// behavior as without this statement except with a better message.
if (typeof typeSpecs[typeSpecName] !== 'function') {
var err = Error(
(componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
);
err.name = 'Invariant Violation';
throw err;
}
error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$1);
} catch (ex) {
error = ex;
}
if (error && !(error instanceof Error)) {
printWarning(
(componentName || 'React class') + ': type specification of ' +
location + ' `' + typeSpecName + '` is invalid; the type checker ' +
'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
'You may have forgotten to pass an argument to the type checker ' +
'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
'shape all require an argument).'
);
}
if (error instanceof Error && !(error.message in loggedTypeFailures)) {
// Only monitor this failure once because there tends to be a lot of the
// same error.
loggedTypeFailures[error.message] = true;
var stack = getStack ? getStack() : '';
printWarning(
'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
);
}
}
}
}
}
/**
* Resets warning cache when testing.
*
* @private
*/
checkPropTypes.resetWarningCache = function() {
if (process.env.NODE_ENV !== 'production') {
loggedTypeFailures = {};
}
};
var checkPropTypes_1 = checkPropTypes;
var has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
var printWarning$1 = function() {};
if (process.env.NODE_ENV !== 'production') {
printWarning$1 = function(text) {
var message = 'Warning: ' + text;
if (typeof console !== 'undefined') {
console.error(message);
}
try {
// --- Welcome to debugging React ---
// This error was thrown as a convenience so that you can use this stack
// to find the callsite that caused this warning to fire.
throw new Error(message);
} catch (x) {}
};
}
function emptyFunctionThatReturnsNull() {
return null;
}
var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
/* global Symbol */
var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
/**
* Returns the iterator method function contained on the iterable object.
*
* Be sure to invoke the function with the iterable as context:
*
* var iteratorFn = getIteratorFn(myIterable);
* if (iteratorFn) {
* var iterator = iteratorFn.call(myIterable);
* ...
* }
*
* @param {?object} maybeIterable
* @return {?function}
*/
function getIteratorFn(maybeIterable) {
var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
if (typeof iteratorFn === 'function') {
return iteratorFn;
}
}
/**
* Collection of methods that allow declaration and validation of props that are
* supplied to React components. Example usage:
*
* var Props = require('ReactPropTypes');
* var MyArticle = React.createClass({
* propTypes: {
* // An optional string prop named "description".
* description: Props.string,
*
* // A required enum prop named "category".
* category: Props.oneOf(['News','Photos']).isRequired,
*
* // A prop named "dialog" that requires an instance of Dialog.
* dialog: Props.instanceOf(Dialog).isRequired
* },
* render: function() { ... }
* });
*
* A more formal specification of how these methods are used:
*
* type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
* decl := ReactPropTypes.{type}(.isRequired)?
*
* Each and every declaration produces a function with the same signature. This
* allows the creation of custom validation functions. For example:
*
* var MyLink = React.createClass({
* propTypes: {
* // An optional string or URI prop named "href".
* href: function(props, propName, componentName) {
* var propValue = props[propName];
* if (propValue != null && typeof propValue !== 'string' &&
* !(propValue instanceof URI)) {
* return new Error(
* 'Expected a string or an URI for ' + propName + ' in ' +
* componentName
* );
* }
* }
* },
* render: function() {...}
* });
*
* @internal
*/
var ANONYMOUS = '<<anonymous>>';
// Important!
// Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
var ReactPropTypes = {
array: createPrimitiveTypeChecker('array'),
bool: createPrimitiveTypeChecker('boolean'),
func: createPrimitiveTypeChecker('function'),
number: createPrimitiveTypeChecker('number'),
object: createPrimitiveTypeChecker('object'),
string: createPrimitiveTypeChecker('string'),
symbol: createPrimitiveTypeChecker('symbol'),
any: createAnyTypeChecker(),
arrayOf: createArrayOfTypeChecker,
element: createElementTypeChecker(),
elementType: createElementTypeTypeChecker(),
instanceOf: createInstanceTypeChecker,
node: createNodeChecker(),
objectOf: createObjectOfTypeChecker,
oneOf: createEnumTypeChecker,
oneOfType: createUnionTypeChecker,
shape: createShapeTypeChecker,
exact: createStrictShapeTypeChecker,
};
/**
* inlined Object.is polyfill to avoid requiring consumers ship their own
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
*/
/*eslint-disable no-self-compare*/
function is(x, y) {
// SameValue algorithm
if (x === y) {
// Steps 1-5, 7-10
// Steps 6.b-6.e: +0 != -0
return x !== 0 || 1 / x === 1 / y;
} else {
// Step 6.a: NaN == NaN
return x !== x && y !== y;
}
}
/*eslint-enable no-self-compare*/
/**
* We use an Error-like object for backward compatibility as people may call
* PropTypes directly and inspect their output. However, we don't use real
* Errors anymore. We don't inspect their stack anyway, and creating them
* is prohibitively expensive if they are created too often, such as what
* happens in oneOfType() for any type before the one that matched.
*/
function PropTypeError(message) {
this.message = message;
this.stack = '';
}
// Make `instanceof Error` still work for returned errors.
PropTypeError.prototype = Error.prototype;
function createChainableTypeChecker(validate) {
if (process.env.NODE_ENV !== 'production') {
var manualPropTypeCallCache = {};
var manualPropTypeWarningCount = 0;
}
function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
componentName = componentName || ANONYMOUS;
propFullName = propFullName || propName;
if (secret !== ReactPropTypesSecret_1) {
if (throwOnDirectAccess) {
// New behavior only for users of `prop-types` package
var err = new Error(
'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
'Use `PropTypes.checkPropTypes()` to call them. ' +
'Read more at http://fb.me/use-check-prop-types'
);
err.name = 'Invariant Violation';
throw err;
} else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
// Old behavior for people using React.PropTypes
var cacheKey = componentName + ':' + propName;
if (
!manualPropTypeCallCache[cacheKey] &&
// Avoid spamming the console because they are often not actionable except for lib authors
manualPropTypeWarningCount < 3
) {
printWarning$1(
'You are manually calling a React.PropTypes validation ' +
'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
'and will throw in the standalone `prop-types` package. ' +
'You may be seeing this warning due to a third-party PropTypes ' +
'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
);
manualPropTypeCallCache[cacheKey] = true;
manualPropTypeWarningCount++;
}
}
}
if (props[propName] == null) {
if (isRequired) {
if (props[propName] === null) {
return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
}
return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
}
return null;
} else {
return validate(props, propName, componentName, location, propFullName);
}
}
var chainedCheckType = checkType.bind(null, false);
chainedCheckType.isRequired = checkType.bind(null, true);
return chainedCheckType;
}
function createPrimitiveTypeChecker(expectedType) {
function validate(props, propName, componentName, location, propFullName, secret) {
var propValue = props[propName];
var propType = getPropType(propValue);
if (propType !== expectedType) {
// `propValue` being instance of, say, date/regexp, pass the 'object'
// check, but we can offer a more precise error message here rather than
// 'of type `object`'.
var preciseType = getPreciseType(propValue);
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
}
return null;
}
return createChainableTypeChecker(validate);
}
function createAnyTypeChecker() {
return createChainableTypeChecker(emptyFunctionThatReturnsNull);
}
function createArrayOfTypeChecker(typeChecker) {
function validate(props, propName, componentName, location, propFullName) {
if (typeof typeChecker !== 'function') {
return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
}
var propValue = props[propName];
if (!Array.isArray(propValue)) {
var propType = getPropType(propValue);
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
}
for (var i = 0; i < propValue.length; i++) {
var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret_1);
if (error instanceof Error) {
return error;
}
}
return null;
}
return createChainableTypeChecker(validate);
}
function createElementTypeChecker() {
function validate(props, propName, componentName, location, propFullName) {
var propValue = props[propName];
if (!isValidElement(propValue)) {
var propType = getPropType(propValue);
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
}
return null;
}
return createChainableTypeChecker(validate);
}
function createElementTypeTypeChecker() {
function validate(props, propName, componentName, location, propFullName) {
var propValue = props[propName];
if (!reactIs.isValidElementType(propValue)) {
var propType = getPropType(propValue);
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));
}
return null;
}
return createChainableTypeChecker(validate);
}
function createInstanceTypeChecker(expectedClass) {
function validate(props, propName, componentName, location, propFullName) {
if (!(props[propName] instanceof expectedClass)) {
var expectedClassName = expectedClass.name || ANONYMOUS;
var actualClassName = getClassName(props[propName]);
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
}
return null;
}
return createChainableTypeChecker(validate);
}
function createEnumTypeChecker(expectedValues) {
if (!Array.isArray(expectedValues)) {
if (process.env.NODE_ENV !== 'production') {
if (arguments.length > 1) {
printWarning$1(
'Invalid arguments supplied to oneOf, expected an array, got ' + arguments.length + ' arguments. ' +
'A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).'
);
} else {
printWarning$1('Invalid argument supplied to oneOf, expected an array.');
}
}
return emptyFunctionThatReturnsNull;
}
function validate(props, propName, componentName, location, propFullName) {
var propValue = props[propName];
for (var i = 0; i < expectedValues.length; i++) {
if (is(propValue, expectedValues[i])) {
return null;
}
}
var valuesString = JSON.stringify(expectedValues, function replacer(key, value) {
var type = getPreciseType(value);
if (type === 'symbol') {
return String(value);
}
return value;
});
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + String(propValue) + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
}
return createChainableTypeChecker(validate);
}
function createObjectOfTypeChecker(typeChecker) {
function validate(props, propName, componentName, location, propFullName) {
if (typeof typeChecker !== 'function') {
return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
}
var propValue = props[propName];
var propType = getPropType(propValue);
if (propType !== 'object') {
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
}
for (var key in propValue) {
if (has$1(propValue, key)) {
var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
if (error instanceof Error) {
return error;
}
}
}
return null;
}
return createChainableTypeChecker(validate);
}
function createUnionTypeChecker(arrayOfTypeCheckers) {
if (!Array.isArray(arrayOfTypeCheckers)) {
process.env.NODE_ENV !== 'production' ? printWarning$1('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
return emptyFunctionThatReturnsNull;
}
for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
var checker = arrayOfTypeCheckers[i];
if (typeof checker !== 'function') {
printWarning$1(
'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'
);
return emptyFunctionThatReturnsNull;
}
}
function validate(props, propName, componentName, location, propFullName) {
for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
var checker = arrayOfTypeCheckers[i];
if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret_1) == null) {
return null;
}
}
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
}
return createChainableTypeChecker(validate);
}
function createNodeChecker() {
function validate(props, propName, componentName, location, propFullName) {
if (!isNode(props[propName])) {
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
}
return null;
}
return createChainableTypeChecker(validate);
}
function createShapeTypeChecker(shapeTypes) {
function validate(props, propName, componentName, location, propFullName) {
var propValue = props[propName];
var propType = getPropType(propValue);
if (propType !== 'object') {
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
}
for (var key in shapeTypes) {
var checker = shapeTypes[key];
if (!checker) {
continue;
}
var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
if (error) {
return error;
}
}
return null;
}
return createChainableTypeChecker(validate);
}
function createStrictShapeTypeChecker(shapeTypes) {
function validate(props, propName, componentName, location, propFullName) {
var propValue = props[propName];
var propType = getPropType(propValue);
if (propType !== 'object') {
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
}
// We need to check all keys in case some are required but missing from
// props.
var allKeys = objectAssign({}, props[propName], shapeTypes);
for (var key in allKeys) {
var checker = shapeTypes[key];
if (!checker) {
return new PropTypeError(
'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
'\nBad object: ' + JSON.stringify(props[propName], null, ' ') +
'\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, ' ')
);
}
var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
if (error) {
return error;
}
}
return null;
}
return createChainableTypeChecker(validate);
}
function isNode(propValue) {
switch (typeof propValue) {
case 'number':
case 'string':
case 'undefined':
return true;
case 'boolean':
return !propValue;
case 'object':
if (Array.isArray(propValue)) {
return propValue.every(isNode);
}
if (propValue === null || isValidElement(propValue)) {
return true;
}
var iteratorFn = getIteratorFn(propValue);
if (iteratorFn) {
var iterator = iteratorFn.call(propValue);
var step;
if (iteratorFn !== propValue.entries) {
while (!(step = iterator.next()).done) {
if (!isNode(step.value)) {
return false;
}
}
} else {
// Iterator will provide entry [k,v] tuples rather than values.
while (!(step = iterator.next()).done) {
var entry = step.value;
if (entry) {
if (!isNode(entry[1])) {
return false;
}
}
}
}
} else {
return false;
}
return true;
default:
return false;
}
}
function isSymbol(propType, propValue) {
// Native Symbol.
if (propType === 'symbol') {
return true;
}
// falsy value can't be a Symbol
if (!propValue) {
return false;
}
// 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
if (propValue['@@toStringTag'] === 'Symbol') {
return true;
}
// Fallback for non-spec compliant Symbols which are polyfilled.
if (typeof Symbol === 'function' && propValue instanceof Symbol) {
return true;
}
return false;
}
// Equivalent of `typeof` but with special handling for array and regexp.
function getPropType(propValue) {
var propType = typeof propValue;
if (Array.isArray(propValue)) {
return 'array';
}
if (propValue instanceof RegExp) {
// Old webkits (at least until Android 4.0) return 'function' rather than
// 'object' for typeof a RegExp. We'll normalize this here so that /bla/
// passes PropTypes.object.
return 'object';
}
if (isSymbol(propType, propValue)) {
return 'symbol';
}
return propType;
}
// This handles more types than `getPropType`. Only used for error messages.
// See `createPrimitiveTypeChecker`.
function getPreciseType(propValue) {
if (typeof propValue === 'undefined' || propValue === null) {
return '' + propValue;
}
var propType = getPropType(propValue);
if (propType === 'object') {
if (propValue instanceof Date) {
return 'date';
} else if (propValue instanceof RegExp) {
return 'regexp';
}
}
return propType;
}
// Returns a string that is postfixed to a warning about an invalid type.
// For example, "undefined" or "of type array"
function getPostfixForTypeWarning(value) {
var type = getPreciseType(value);
switch (type) {
case 'array':
case 'object':
return 'an ' + type;
case 'boolean':
case 'date':
case 'regexp':
return 'a ' + type;
default:
return type;
}
}
// Returns class name of the object, if any.
function getClassName(propValue) {
if (!propValue.constructor || !propValue.constructor.name) {
return ANONYMOUS;
}
return propValue.constructor.name;
}
ReactPropTypes.checkPropTypes = checkPropTypes_1;
ReactPropTypes.resetWarningCache = checkPropTypes_1.resetWarningCache;
ReactPropTypes.PropTypes = ReactPropTypes;
return ReactPropTypes;
};
function emptyFunction() {}
function emptyFunctionWithReset() {}
emptyFunctionWithReset.resetWarningCache = emptyFunction;
var factoryWithThrowingShims = function() {
function shim(props, propName, componentName, location, propFullName, secret) {
if (secret === ReactPropTypesSecret_1) {
// It is still safe when called from React.
return;
}
var err = new Error(
'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
'Use PropTypes.checkPropTypes() to call them. ' +
'Read more at http://fb.me/use-check-prop-types'
);
err.name = 'Invariant Violation';
throw err;
} shim.isRequired = shim;
function getShim() {
return shim;
} // Important!
// Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
var ReactPropTypes = {
array: shim,
bool: shim,
func: shim,
number: shim,
object: shim,
string: shim,
symbol: shim,
any: shim,
arrayOf: getShim,
element: shim,
elementType: shim,
instanceOf: getShim,
node: shim,
objectOf: getShim,
oneOf: getShim,
oneOfType: getShim,
shape: getShim,
exact: getShim,
checkPropTypes: emptyFunctionWithReset,
resetWarningCache: emptyFunction
};
ReactPropTypes.PropTypes = ReactPropTypes;
return ReactPropTypes;
};
var propTypes = createCommonjsModule(function (module) {
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
if (process.env.NODE_ENV !== 'production') {
var ReactIs = reactIs;
// By explicitly using `prop-types` you are opting into new development behavior.
// http://fb.me/prop-types-in-prod
var throwOnDirectAccess = true;
module.exports = factoryWithTypeCheckers(ReactIs.isElement, throwOnDirectAccess);
} else {
// By explicitly using `prop-types` you are opting into new production behavior.
// http://fb.me/prop-types-in-prod
module.exports = factoryWithThrowingShims();
}
});
var shims = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.findInArray = findInArray;
exports.isFunction = isFunction;
exports.isNum = isNum;
exports.int = int;
exports.dontSetMe = dontSetMe;
// @credits https://gist.github.com/rogozhnikoff/a43cfed27c41e4e68cdc
function findInArray(array
/*: Array<any> | TouchList*/
, callback
/*: Function*/
)
/*: any*/
{
for (var i = 0, length = array.length; i < length; i++) {
if (callback.apply(callback, [array[i], i, array])) return array[i];
}
}
function isFunction(func
/*: any*/
)
/*: boolean %checks*/
{
return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]';
}
function isNum(num
/*: any*/
)
/*: boolean %checks*/
{
return typeof num === 'number' && !isNaN(num);
}
function int(a
/*: string*/
)
/*: number*/
{
return parseInt(a, 10);
}
function dontSetMe(props
/*: Object*/
, propName
/*: string*/
, componentName
/*: string*/
) {
if (props[propName]) {
return new Error("Invalid prop ".concat(propName, " passed to ").concat(componentName, " - do not set this, set it on the child."));
}
}
});
unwrapExports(shims);
var getPrefix_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getPrefix = getPrefix;
exports.browserPrefixToKey = browserPrefixToKey;
exports.browserPrefixToStyle = browserPrefixToStyle;
exports.default = void 0;
var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
function getPrefix()
/*: string*/
{
var prop
/*: string*/
= arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transform';
// Checking specifically for 'window.document' is for pseudo-browser server-side
// environments that define 'window' as the global context.
// E.g. React-rails (see https://github.com/reactjs/react-rails/pull/84)
if (typeof window === 'undefined' || typeof window.document === 'undefined') return '';
var style = window.document.documentElement.style;
if (prop in style) return '';
for (var i = 0; i < prefixes.length; i++) {
if (browserPrefixToKey(prop, prefixes[i]) in style) return prefixes[i];
}
return '';
}
function browserPrefixToKey(prop
/*: string*/
, prefix
/*: string*/
)
/*: string*/
{
return prefix ? "".concat(prefix).concat(kebabToTitleCase(prop)) : prop;
}
function browserPrefixToStyle(prop
/*: string*/
, prefix
/*: string*/
)
/*: string*/
{
return prefix ? "-".concat(prefix.toLowerCase(), "-").concat(prop) : prop;
}
function kebabToTitleCase(str
/*: string*/
)
/*: string*/
{
var out = '';
var shouldCapitalize = true;
for (var i = 0; i < str.length; i++) {
if (shouldCapitalize) {
out += str[i].toUpperCase();
shouldCapitalize = false;
} else if (str[i] === '-') {
shouldCapitalize = true;
} else {
out += str[i];
}
}
return out;
} // Default export is the prefix itself, like 'Moz', 'Webkit', etc
// Note that you may have to re-test for certain things; for instance, Chrome 50
// can handle unprefixed `transform`, but not unprefixed `user-select`
var _default = getPrefix();
exports.default = _default;
});
unwrapExports(getPrefix_1);
var domFns = createCommonjsModule(function (module, exports) {
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.matchesSelector = matchesSelector;
exports.matchesSelectorAndParentsTo = matchesSelectorAndParentsTo;
exports.addEvent = addEvent;
exports.removeEvent = removeEvent;
exports.outerHeight = outerHeight;
exports.outerWidth = outerWidth;
exports.innerHeight = innerHeight;
exports.innerWidth = innerWidth;
exports.offsetXYFromParent = offsetXYFromParent;
exports.createCSSTransform = createCSSTransform;
exports.createSVGTransform = createSVGTransform;
exports.getTranslation = getTranslation;
exports.getTouch = getTouch;
exports.getTouchIdentifier = getTouchIdentifier;
exports.addUserSelectStyles = addUserSelectStyles;
exports.removeUserSelectStyles = removeUserSelectStyles;
exports.addClassName = addClassName;
exports.removeClassName = removeClassName;
var _getPrefix = _interopRequireWildcard(getPrefix_1);
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var matchesSelectorFunc = '';
function matchesSelector(el
/*: Node*/
, selector
/*: string*/
)
/*: boolean*/
{
if (!matchesSelectorFunc) {
matchesSelectorFunc = (0, shims.findInArray)(['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'], function (method) {
// $FlowIgnore: Doesn't think elements are indexable
return (0, shims.isFunction)(el[method]);
});
} // Might not be found entirely (not an Element?) - in that case, bail
// $FlowIgnore: Doesn't think elements are indexable
if (!(0, shims.isFunction)(el[matchesSelectorFunc])) return false; // $FlowIgnore: Doesn't think elements are indexable
return el[matchesSelectorFunc](selector);
} // Works up the tree to the draggable itself attempting to match selector.
function matchesSelectorAndParentsTo(el
/*: Node*/
, selector
/*: string*/
, baseNode
/*: Node*/
)
/*: boolean*/
{
var node = el;
do {
if (matchesSelector(node, selector)) return true;
if (node === baseNode) return false;
node = node.parentNode;
} while (node);
return false;
}
function addEvent(el
/*: ?Node*/
, event
/*: string*/
, handler
/*: Function*/
, inputOptions
/*: Object*/
)
/*: void*/
{
if (!el) return;
var options = _objectSpread({
capture: true
}, inputOptions);
if (el.addEventListener) {
el.addEventListener(event, handler, options);
} else if (el.attachEvent) {
el.attachEvent('on' + event, handler);
} else {
// $FlowIgnore: Doesn't think elements are indexable
el['on' + event] = handler;
}
}
function removeEvent(el
/*: ?Node*/
, event
/*: string*/
, handler
/*: Function*/
, inputOptions
/*: Object*/
)
/*: void*/
{
if (!el) return;
var options = _objectSpread({
capture: true
}, inputOptions);
if (el.removeEventListener) {
el.removeEventListener(event, handler, options);
} else if (el.detachEvent) {
el.detachEvent('on' + event, handler);
} else {
// $FlowIgnore: Doesn't think elements are indexable
el['on' + event] = null;
}
}
function outerHeight(node
/*: HTMLElement*/
)
/*: number*/
{
// This is deliberately excluding margin for our calculations, since we are using
// offsetTop which is including margin. See getBoundPosition
var height = node.clientHeight;
var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
height += (0, shims.int)(computedStyle.borderTopWidth);
height += (0, shims.int)(computedStyle.borderBottomWidth);
return height;
}
function outerWidth(node
/*: HTMLElement*/
)
/*: number*/
{
// This is deliberately excluding margin for our calculations, since we are using
// offsetLeft which is including margin. See getBoundPosition
var width = node.clientWidth;
var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
width += (0, shims.int)(computedStyle.borderLeftWidth);
width += (0, shims.int)(computedStyle.borderRightWidth);
return width;
}
function innerHeight(node
/*: HTMLElement*/
)
/*: number*/
{
var height = node.clientHeight;
var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
height -= (0, shims.int)(computedStyle.paddingTop);
height -= (0, shims.int)(computedStyle.paddingBottom);
return height;
}
function innerWidth(node
/*: HTMLElement*/
)
/*: number*/
{
var width = node.clientWidth;
var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
width -= (0, shims.int)(computedStyle.paddingLeft);
width -= (0, shims.int)(computedStyle.paddingRight);
return width;
} // Get from offsetParent
function offsetXYFromParent(evt
/*: {clientX: number, clientY: number}*/
, offsetParent
/*: HTMLElement*/
, scale
/*: number*/
)
/*: ControlPosition*/
{
var isBody = offsetParent === offsetParent.ownerDocument.body;
var offsetParentRect = isBody ? {
left: 0,
top: 0
} : offsetParent.getBoundingClientRect();
var x = (evt.clientX + offsetParent.scrollLeft - offsetParentRect.left) / scale;
var y = (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / scale;
return {
x: x,
y: y
};
}
function createCSSTransform(controlPos
/*: ControlPosition*/
, positionOffset
/*: PositionOffsetControlPosition*/
)
/*: Object*/
{
var translation = getTranslation(controlPos, positionOffset, 'px');
return _defineProperty({}, (0, _getPrefix.browserPrefixToKey)('transform', _getPrefix.default), translation);
}
function createSVGTransform(controlPos
/*: ControlPosition*/
, positionOffset
/*: PositionOffsetControlPosition*/
)
/*: string*/
{
var translation = getTranslation(controlPos, positionOffset, '');
return translation;
}
function getTranslation(_ref2, positionOffset
/*: PositionOffsetControlPosition*/
, unitSuffix
/*: string*/
)
/*: string*/
{
var x = _ref2.x,
y = _ref2.y;
var translation = "translate(".concat(x).concat(unitSuffix, ",").concat(y).concat(unitSuffix, ")");
if (positionOffset) {
var defaultX = "".concat(typeof positionOffset.x === 'string' ? positionOffset.x : positionOffset.x + unitSuffix);
var defaultY = "".concat(typeof positionOffset.y === 'string' ? positionOffset.y : positionOffset.y + unitSuffix);
translation = "translate(".concat(defaultX, ", ").concat(defaultY, ")") + translation;
}
return translation;
}
function getTouch(e
/*: MouseTouchEvent*/
, identifier
/*: number*/
)
/*: ?{clientX: number, clientY: number}*/
{
return e.targetTouches && (0, shims.findInArray)(e.targetTouches, function (t) {
return identifier === t.identifier;
}) || e.changedTouches && (0, shims.findInArray)(e.changedTouches, function (t) {
return identifier === t.identifier;
});
}
function getTouchIdentifier(e
/*: MouseTouchEvent*/
)
/*: ?number*/
{
if (e.targetTouches && e.targetTouches[0]) return e.targetTouches[0].identifier;
if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier;
} // User-select Hacks:
//
// Useful for preventing blue highlights all over everything when dragging.
// Note we're passing `document` b/c we could be iframed
function addUserSelectStyles(doc
/*: ?Document*/
) {
if (!doc) return;
var styleEl = doc.getElementById('react-draggable-style-el');
if (!styleEl) {
styleEl = doc.createElement('style');
styleEl.type = 'text/css';
styleEl.id = 'react-draggable-style-el';
styleEl.innerHTML = '.react-draggable-transparent-selection *::-moz-selection {all: inherit;}\n';
styleEl.innerHTML += '.react-draggable-transparent-selection *::selection {all: inherit;}\n';
doc.getElementsByTagName('head')[0].appendChild(styleEl);
}
if (doc.body) addClassName(doc.body, 'react-draggable-transparent-selection');
}
function removeUserSelectStyles(doc
/*: ?Document*/
) {
if (!doc) return;
try {
if (doc.body) removeClassName(doc.body, 'react-draggable-transparent-selection'); // $FlowIgnore: IE
if (doc.selection) {
// $FlowIgnore: IE
doc.selection.empty();
} else {
// Remove selection caused by scroll, unless it's a focused input
// (we use doc.defaultView in case we're in an iframe)
var selection = (doc.defaultView || window).getSelection();
if (selection && selection.type !== 'Caret') {
selection.removeAllRanges();
}
}
} catch (e) {// probably IE
}
}
function addClassName(el
/*: HTMLElement*/
, className
/*: string*/
) {
if (el.classList) {
el.classList.add(className);
} else {
if (!el.className.match(new RegExp("(?:^|\\s)".concat(className, "(?!\\S)")))) {
el.className += " ".concat(className);
}
}
}
function removeClassName(el
/*: HTMLElement*/
, className
/*: string*/
) {
if (el.classList) {
el.classList.remove(className);
} else {
el.className = el.className.replace(new RegExp("(?:^|\\s)".concat(className, "(?!\\S)"), 'g'), '');
}
}
});
unwrapExports(domFns);
var positionFns = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getBoundPosition = getBoundPosition;
exports.snapToGrid = snapToGrid;
exports.canDragX = canDragX;
exports.canDragY = canDragY;
exports.getControlPosition = getControlPosition;
exports.createCoreData = createCoreData;
exports.createDraggableData = createDraggableData;
function getBoundPosition(draggable
/*: Draggable*/
, x
/*: number*/
, y
/*: number*/
)
/*: [number, number]*/
{
// If no bounds, short-circuit and move on
if (!draggable.props.bounds) return [x, y]; // Clone new bounds
var bounds = draggable.props.bounds;
bounds = typeof bounds === 'string' ? bounds : cloneBounds(bounds);
var node = findDOMNode(draggable);
if (typeof bounds === 'string') {
var ownerDocument = node.ownerDocument;
var ownerWindow = ownerDocument.defaultView;
var boundNode;
if (bounds === 'parent') {
boundNode = node.parentNode;
} else {
boundNode = ownerDocument.querySelector(bounds);
}
if (!(boundNode instanceof ownerWindow.HTMLElement)) {
throw new Error('Bounds selector "' + bounds + '" could not find an element.');
}
var nodeStyle = ownerWindow.getComputedStyle(node);
var boundNodeStyle = ownerWindow.getComputedStyle(boundNode); // Compute bounds. This is a pain with padding and offsets but this gets it exactly right.
bounds = {
left: -node.offsetLeft + (0, shims.int)(boundNodeStyle.paddingLeft) + (0, shims.int)(nodeStyle.marginLeft),
top: -node.offsetTop + (0, shims.int)(boundNodeStyle.paddingTop) + (0, shims.int)(nodeStyle.marginTop),
right: (0, domFns.innerWidth)(boundNode) - (0, domFns.outerWidth)(node) - node.offsetLeft + (0, shims.int)(boundNodeStyle.paddingRight) - (0, shims.int)(nodeStyle.marginRight),
bottom: (0, domFns.innerHeight)(boundNode) - (0, domFns.outerHeight)(node) - node.offsetTop + (0, shims.int)(boundNodeStyle.paddingBottom) - (0, shims.int)(nodeStyle.marginBottom)
};
} // Keep x and y below right and bottom limits...
if ((0, shims.isNum)(bounds.right)) x = Math.min(x, bounds.right);
if ((0, shims.isNum)(bounds.bottom)) y = Math.min(y, bounds.bottom); // But above left and top limits.
if ((0, shims.isNum)(bounds.left)) x = Math.max(x, bounds.left);
if ((0, shims.isNum)(bounds.top)) y = Math.max(y, bounds.top);
return [x, y];
}
function snapToGrid(grid
/*: [number, number]*/
, pendingX
/*: number*/
, pendingY
/*: number*/
)
/*: [number, number]*/
{
var x = Math.round(pendingX / grid[0]) * grid[0];
var y = Math.round(pendingY / grid[1]) * grid[1];
return [x, y];
}
function canDragX(draggable
/*: Draggable*/
)
/*: boolean*/
{
return draggable.props.axis === 'both' || draggable.props.axis === 'x';
}
function canDragY(draggable
/*: Draggable*/
)
/*: boolean*/
{
return draggable.props.axis === 'both' || draggable.props.axis === 'y';
} // Get {x, y} positions from event.
function getControlPosition(e
/*: MouseTouchEvent*/
, touchIdentifier
/*: ?number*/
, draggableCore
/*: DraggableCore*/
)
/*: ?ControlPosition*/
{
var touchObj = typeof touchIdentifier === 'number' ? (0, domFns.getTouch)(e, touchIdentifier) : null;
if (typeof touchIdentifier === 'number' && !touchObj) return null; // not the right touch
var node = findDOMNode(draggableCore); // User can provide an offsetParent if desired.
var offsetParent = draggableCore.props.offsetParent || node.offsetParent || node.ownerDocument.body;
return (0, domFns.offsetXYFromParent)(touchObj || e, offsetParent, draggableCore.props.scale);
} // Create an data object exposed by <DraggableCore>'s events
function createCoreData(draggable
/*: DraggableCore*/
, x
/*: number*/
, y
/*: number*/
)
/*: DraggableData*/
{
var state = draggable.state;
var isStart = !(0, shims.isNum)(state.lastX);
var node = findDOMNode(draggable);
if (isStart) {
// If this is our first move, use the x and y as last coords.
return {
node: node,
deltaX: 0,
deltaY: 0,
lastX: x,
lastY: y,
x: x,
y: y
};
} else {
// Otherwise calculate proper values.
return {
node: node,
deltaX: x - state.lastX,
deltaY: y - state.lastY,
lastX: state.lastX,
lastY: state.lastY,
x: x,
y: y
};
}
} // Create an data exposed by <Draggable>'s events
function createDraggableData(draggable
/*: Draggable*/
, coreData
/*: DraggableData*/
)
/*: DraggableData*/
{
var scale = draggable.props.scale;
return {
node: coreData.node,
x: draggable.state.x + coreData.deltaX / scale,
y: draggable.state.y + coreData.deltaY / scale,
deltaX: coreData.deltaX / scale,
deltaY: coreData.deltaY / scale,
lastX: draggable.state.x,
lastY: draggable.state.y
};
} // A lot faster than stringify/parse
function cloneBounds(bounds
/*: Bounds*/
)
/*: Bounds*/
{
return {
left: bounds.left,
top: bounds.top,
right: bounds.right,
bottom: bounds.bottom
};
}
function findDOMNode(draggable
/*: Draggable | DraggableCore*/
)
/*: HTMLElement*/
{
var node = draggable.findDOMNode();
if (!node) {
throw new Error('<DraggableCore>: Unmounted during event!');
} // $FlowIgnore we can't assert on HTMLElement due to tests... FIXME
return node;
}
});
unwrapExports(positionFns);
var log_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = log;
/*eslint no-console:0*/
function log() {
}
});
unwrapExports(log_1);
var DraggableCore_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React$1 = _interopRequireWildcard(React);
var _propTypes = _interopRequireDefault(propTypes);
var _reactDom = _interopRequireDefault(reactDom);
var _log = _interopRequireDefault(log_1);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
// Simple abstraction for dragging events names.
var eventsFor = {
touch: {
start: 'touchstart',
move: 'touchmove',
stop: 'touchend'
},
mouse: {
start: 'mousedown',
move: 'mousemove',
stop: 'mouseup'
}
}; // Default to mouse events.
var dragEventFor = eventsFor.mouse;
/*:: type DraggableCoreState = {
dragging: boolean,
lastX: number,
lastY: number,
touchIdentifier: ?number
};*/
/*:: export type DraggableData = {
node: HTMLElement,
x: number, y: number,
deltaX: number, deltaY: number,
lastX: number, lastY: number,
};*/
/*:: export type DraggableEventHandler = (e: MouseEvent, data: DraggableData) => void;*/
/*:: export type ControlPosition = {x: number, y: number};*/
/*:: export type PositionOffsetControlPosition = {x: number|string, y: number|string};*/
/*:: export type DraggableCoreProps = {
allowAnyClick: boolean,
cancel: string,
children: ReactElement<any>,
disabled: boolean,
enableUserSelectHack: boolean,
offsetParent: HTMLElement,
grid: [number, number],
handle: string,
nodeRef?: ?React.ElementRef<any>,
onStart: DraggableEventHandler,
onDrag: DraggableEventHandler,
onStop: DraggableEventHandler,
onMouseDown: (e: MouseEvent) => void,
scale: number,
};*/
//
// Define <DraggableCore>.
//
// <DraggableCore> is for advanced usage of <Draggable>. It maintains minimal internal state so it can
// work well with libraries that require more control over the element.
//
var DraggableCore = /*#__PURE__*/function (_React$Component) {
_inherits(DraggableCore, _React$Component);
var _super = _createSuper(DraggableCore);
function DraggableCore() {
var _this;
_classCallCheck(this, DraggableCore);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
dragging: false,
// Used while dragging to determine deltas.
lastX: NaN,
lastY: NaN,
touchIdentifier: null
});
_defineProperty(_assertThisInitialized(_this), "mounted", false);
_defineProperty(_assertThisInitialized(_this), "handleDragStart", function (e) {
// Make it possible to attach event handlers on top of this one.
_this.props.onMouseDown(e); // Only accept left-clicks.
if (!_this.props.allowAnyClick && typeof e.button === 'number' && e.button !== 0) return false; // Get nodes. Be sure to grab relative document (could be iframed)
var thisNode = _this.findDOMNode();
if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {
throw new Error('<DraggableCore> not mounted on DragStart!');
}
var ownerDocument = thisNode.ownerDocument; // Short circuit if handle or cancel prop was provided and selector doesn't match.
if (_this.props.disabled || !(e.target instanceof ownerDocument.defaultView.Node) || _this.props.handle && !(0, domFns.matchesSelectorAndParentsTo)(e.target, _this.props.handle, thisNode) || _this.props.cancel && (0, domFns.matchesSelectorAndParentsTo)(e.target, _this.props.cancel, thisNode)) {
return;
} // Prevent scrolling on mobile devices, like ipad/iphone.
// Important that this is after handle/cancel.
if (e.type === 'touchstart') e.preventDefault(); // Set touch identifier in component state if this is a touch event. This allows us to
// distinguish between individual touches on multitouch screens by identifying which
// touchpoint was set to this element.
var touchIdentifier = (0, domFns.getTouchIdentifier)(e);
_this.setState({
touchIdentifier: touchIdentifier
}); // Get the current drag point from the event. This is used as the offset.
var position = (0, positionFns.getControlPosition)(e, touchIdentifier, _assertThisInitialized(_this));
if (position == null) return; // not possible but satisfies flow
var x = position.x,
y = position.y; // Create an event object with all the data parents need to make a decision here.
var coreEvent = (0, positionFns.createCoreData)(_assertThisInitialized(_this), x, y);
(0, _log.default)('DraggableCore: handleDragStart: %j', coreEvent); // Call event handler. If it returns explicit false, cancel.
(0, _log.default)('calling', _this.props.onStart);
var shouldUpdate = _this.props.onStart(e, coreEvent);
if (shouldUpdate === false || _this.mounted === false) return; // Add a style to the body to disable user-select. This prevents text from
// being selected all over the page.
if (_this.props.enableUserSelectHack) (0, domFns.addUserSelectStyles)(ownerDocument); // Initiate dragging. Set the current x and y as offsets
// so we know how much we've moved during the drag. This allows us
// to drag elements around even if they have been moved, without issue.
_this.setState({
dragging: true,
lastX: x,
lastY: y
}); // Add events to the document directly so we catch when the user's mouse/touch moves outside of
// this element. We use different events depending on whether or not we have detected that this
// is a touch-capable device.
(0, domFns.addEvent)(ownerDocument, dragEventFor.move, _this.handleDrag);
(0, domFns.addEvent)(ownerDocument, dragEventFor.stop, _this.handleDragStop);
});
_defineProperty(_assertThisInitialized(_this), "handleDrag", function (e) {
// Get the current drag point from the event. This is used as the offset.
var position = (0, positionFns.getControlPosition)(e, _this.state.touchIdentifier, _assertThisInitialized(_this));
if (position == null) return;
var x = position.x,
y = position.y; // Snap to grid if prop has been provided
if (Array.isArray(_this.props.grid)) {
var deltaX = x - _this.state.lastX,
deltaY = y - _this.state.lastY;
var _snapToGrid = (0, positionFns.snapToGrid)(_this.props.grid, deltaX, deltaY);
var _snapToGrid2 = _slicedToArray(_snapToGrid, 2);
deltaX = _snapToGrid2[0];
deltaY = _snapToGrid2[1];
if (!deltaX && !deltaY) return; // skip useless drag
x = _this.state.lastX + deltaX, y = _this.state.lastY + deltaY;
}
var coreEvent = (0, positionFns.createCoreData)(_assertThisInitialized(_this), x, y);
(0, _log.default)('DraggableCore: handleDrag: %j', coreEvent); // Call event handler. If it returns explicit false, trigger end.
var shouldUpdate = _this.props.onDrag(e, coreEvent);
if (shouldUpdate === false || _this.mounted === false) {
try {
// $FlowIgnore
_this.handleDragStop(new MouseEvent('mouseup'));
} catch (err) {
// Old browsers
var event = ((document.createEvent('MouseEvents')
/*: any*/
)
/*: MouseTouchEvent*/
); // I see why this insanity was deprecated
// $FlowIgnore
event.initMouseEvent('mouseup', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
_this.handleDragStop(event);
}
return;
}
_this.setState({
lastX: x,
lastY: y
});
});
_defineProperty(_assertThisInitialized(_this), "handleDragStop", function (e) {
if (!_this.state.dragging) return;
var position = (0, positionFns.getControlPosition)(e, _this.state.touchIdentifier, _assertThisInitialized(_this));
if (position == null) return;
var x = position.x,
y = position.y;
var coreEvent = (0, positionFns.createCoreData)(_assertThisInitialized(_this), x, y); // Call event handler
var shouldContinue = _this.props.onStop(e, coreEvent);
if (shouldContinue === false || _this.mounted === false) return false;
var thisNode = _this.findDOMNode();
if (thisNode) {
// Remove user-select hack
if (_this.props.enableUserSelectHack) (0, domFns.removeUserSelectStyles)(thisNode.ownerDocument);
}
(0, _log.default)('DraggableCore: handleDragStop: %j', coreEvent); // Reset the el.
_this.setState({
dragging: false,
lastX: NaN,
lastY: NaN
});
if (thisNode) {
// Remove event handlers
(0, _log.default)('DraggableCore: Removing handlers');
(0, domFns.removeEvent)(thisNode.ownerDocument, dragEventFor.move, _this.handleDrag);
(0, domFns.removeEvent)(thisNode.ownerDocument, dragEventFor.stop, _this.handleDragStop);
}
});
_defineProperty(_assertThisInitialized(_this), "onMouseDown", function (e) {
dragEventFor = eventsFor.mouse; // on touchscreen laptops we could switch back to mouse
return _this.handleDragStart(e);
});
_defineProperty(_assertThisInitialized(_this), "onMouseUp", function (e) {
dragEventFor = eventsFor.mouse;
return _this.handleDragStop(e);
});
_defineProperty(_assertThisInitialized(_this), "onTouchStart", function (e) {
// We're on a touch device now, so change the event handlers
dragEventFor = eventsFor.touch;
return _this.handleDragStart(e);
});
_defineProperty(_assertThisInitialized(_this), "onTouchEnd", function (e) {
// We're on a touch device now, so change the event handlers
dragEventFor = eventsFor.touch;
return _this.handleDragStop(e);
});
return _this;
}
_createClass(DraggableCore, [{
key: "componentDidMount",
value: function componentDidMount() {
this.mounted = true; // Touch handlers must be added with {passive: false} to be cancelable.
// https://developers.google.com/web/updates/2017/01/scrolling-intervention
var thisNode = this.findDOMNode();
if (thisNode) {
(0, domFns.addEvent)(thisNode, eventsFor.touch.start, this.onTouchStart, {
passive: false
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.mounted = false; // Remove any leftover event handlers. Remove both touch and mouse handlers in case
// some browser quirk caused a touch event to fire during a mouse move, or vice versa.
var thisNode = this.findDOMNode();
if (thisNode) {
var ownerDocument = thisNode.ownerDocument;
(0, domFns.removeEvent)(ownerDocument, eventsFor.mouse.move, this.handleDrag);
(0, domFns.removeEvent)(ownerDocument, eventsFor.touch.move, this.handleDrag);
(0, domFns.removeEvent)(ownerDocument, eventsFor.mouse.stop, this.handleDragStop);
(0, domFns.removeEvent)(ownerDocument, eventsFor.touch.stop, this.handleDragStop);
(0, domFns.removeEvent)(thisNode, eventsFor.touch.start, this.onTouchStart, {
passive: false
});
if (this.props.enableUserSelectHack) (0, domFns.removeUserSelectStyles)(ownerDocument);
}
} // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
// the underlying DOM node ourselves. See the README for more information.
}, {
key: "findDOMNode",
value: function findDOMNode()
/*: ?HTMLElement*/
{
return this.props.nodeRef ? this.props.nodeRef.current : _reactDom.default.findDOMNode(this);
}
}, {
key: "render",
value: function render() {
// Reuse the child provided
// This makes it flexible to use whatever element is wanted (div, ul, etc)
return React$1.cloneElement(React$1.Children.only(this.props.children), {
// Note: mouseMove handler is attached to document so it will still function
// when the user drags quickly and leaves the bounds of the element.
onMouseDown: this.onMouseDown,
onMouseUp: this.onMouseUp,
// onTouchStart is added on `componentDidMount` so they can be added with
// {passive: false}, which allows it to cancel. See
// https://developers.google.com/web/updates/2017/01/scrolling-intervention
onTouchEnd: this.onTouchEnd
});
}
}]);
return DraggableCore;
}(React$1.Component);
exports.default = DraggableCore;
_defineProperty(DraggableCore, "displayName", 'DraggableCore');
_defineProperty(DraggableCore, "propTypes", {
/**
* `allowAnyClick` allows dragging using any mouse button.
* By default, we only accept the left button.
*
* Defaults to `false`.
*/
allowAnyClick: _propTypes.default.bool,
/**
* `disabled`, if true, stops the <Draggable> from dragging. All handlers,
* with the exception of `onMouseDown`, will not fire.
*/
disabled: _propTypes.default.bool,
/**
* By default, we add 'user-select:none' attributes to the document body
* to prevent ugly text selection during drag. If this is causing problems
* for your app, set this to `false`.
*/
enableUserSelectHack: _propTypes.default.bool,
/**
* `offsetParent`, if set, uses the passed DOM node to compute drag offsets
* instead of using the parent node.
*/
offsetParent: function offsetParent(props
/*: DraggableCoreProps*/
, propName
/*: $Keys<DraggableCoreProps>*/
) {
if (props[propName] && props[propName].nodeType !== 1) {
throw new Error('Draggable\'s offsetParent must be a DOM Node.');
}
},
/**
* `grid` specifies the x and y that dragging should snap to.
*/
grid: _propTypes.default.arrayOf(_propTypes.default.number),
/**
* `handle` specifies a selector to be used as the handle that initiates drag.
*
* Example:
*
* ```jsx
* let App = React.createClass({
* render: function () {
* return (
* <Draggable handle=".handle">
* <div>
* <div className="handle">Click me to drag</div>
* <div>This is some other content</div>
* </div>
* </Draggable>
* );
* }
* });
* ```
*/
handle: _propTypes.default.string,
/**
* `cancel` specifies a selector to be used to prevent drag initialization.
*
* Example:
*
* ```jsx
* let App = React.createClass({
* render: function () {
* return(
* <Draggable cancel=".cancel">
* <div>
* <div className="cancel">You can't drag from here</div>
* <div>Dragging here works fine</div>
* </div>
* </Draggable>
* );
* }
* });
* ```
*/
cancel: _propTypes.default.string,
/* If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
* Unfortunately, in order for <Draggable> to work properly, we need raw access
* to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
* as in this example:
*
* function MyComponent() {
* const nodeRef = React.useRef(null);
* return (
* <Draggable nodeRef={nodeRef}>
* <div ref={nodeRef}>Example Target</div>
* </Draggable>
* );
* }
*
* This can be used for arbitrarily nested components, so long as the ref ends up
* pointing to the actual child DOM node and not a custom component.
*/
nodeRef: _propTypes.default.object,
/**
* Called when dragging starts.
* If this function returns the boolean false, dragging will be canceled.
*/
onStart: _propTypes.default.func,
/**
* Called while dragging.
* If this function returns the boolean false, dragging will be canceled.
*/
onDrag: _propTypes.default.func,
/**
* Called when dragging stops.
* If this function returns the boolean false, the drag will remain active.
*/
onStop: _propTypes.default.func,
/**
* A workaround option which can be passed if onMouseDown needs to be accessed,
* since it'll always be blocked (as there is internal use of onMouseDown)
*/
onMouseDown: _propTypes.default.func,
/**
* `scale`, if set, applies scaling while dragging an element
*/
scale: _propTypes.default.number,
/**
* These properties should be defined on the child, not here.
*/
className: shims.dontSetMe,
style: shims.dontSetMe,
transform: shims.dontSetMe
});
_defineProperty(DraggableCore, "defaultProps", {
allowAnyClick: false,
// by default only accept left click
cancel: null,
disabled: false,
enableUserSelectHack: true,
offsetParent: null,
handle: null,
grid: null,
transform: null,
onStart: function onStart() {},
onDrag: function onDrag() {},
onStop: function onStop() {},
onMouseDown: function onMouseDown() {},
scale: 1
});
});
unwrapExports(DraggableCore_1);
var Draggable_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DraggableCore", {
enumerable: true,
get: function get() {
return _DraggableCore.default;
}
});
exports.default = void 0;
var React$1 = _interopRequireWildcard(React);
var _propTypes = _interopRequireDefault(propTypes);
var _reactDom = _interopRequireDefault(reactDom);
var _classnames = _interopRequireDefault(classnames);
var _DraggableCore = _interopRequireDefault(DraggableCore_1);
var _log = _interopRequireDefault(log_1);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
//
// Define <Draggable>
//
var Draggable = /*#__PURE__*/function (_React$Component) {
_inherits(Draggable, _React$Component);
var _super = _createSuper(Draggable);
_createClass(Draggable, null, [{
key: "getDerivedStateFromProps",
// React 16.3+
// Arity (props, state)
value: function getDerivedStateFromProps(_ref, _ref2) {
var position = _ref.position;
var prevPropsPosition = _ref2.prevPropsPosition;
// Set x/y if a new position is provided in props that is different than the previous.
if (position && (!prevPropsPosition || position.x !== prevPropsPosition.x || position.y !== prevPropsPosition.y)) {
(0, _log.default)('Draggable: getDerivedStateFromProps %j', {
position: position,
prevPropsPosition: prevPropsPosition
});
return {
x: position.x,
y: position.y,
prevPropsPosition: _objectSpread({}, position)
};
}
return null;
}
}]);
function Draggable(props
/*: DraggableProps*/
) {
var _this;
_classCallCheck(this, Draggable);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "onDragStart", function (e, coreData) {
(0, _log.default)('Draggable: onDragStart: %j', coreData); // Short-circuit if user's callback killed it.
var shouldStart = _this.props.onStart(e, (0, positionFns.createDraggableData)(_assertThisInitialized(_this), coreData)); // Kills start event on core as well, so move handlers are never bound.
if (shouldStart === false) return false;
_this.setState({
dragging: true,
dragged: true
});
});
_defineProperty(_assertThisInitialized(_this), "onDrag", function (e, coreData) {
if (!_this.state.dragging) return false;
(0, _log.default)('Draggable: onDrag: %j', coreData);
var uiData = (0, positionFns.createDraggableData)(_assertThisInitialized(_this), coreData);
var newState
/*: $Shape<DraggableState>*/
= {
x: uiData.x,
y: uiData.y
}; // Keep within bounds.
if (_this.props.bounds) {
// Save original x and y.
var x = newState.x,
y = newState.y; // Add slack to the values used to calculate bound position. This will ensure that if
// we start removing slack, the element won't react to it right away until it's been
// completely removed.
newState.x += _this.state.slackX;
newState.y += _this.state.slackY; // Get bound position. This will ceil/floor the x and y within the boundaries.
var _getBoundPosition = (0, positionFns.getBoundPosition)(_assertThisInitialized(_this), newState.x, newState.y),
_getBoundPosition2 = _slicedToArray(_getBoundPosition, 2),
newStateX = _getBoundPosition2[0],
newStateY = _getBoundPosition2[1];
newState.x = newStateX;
newState.y = newStateY; // Recalculate slack by noting how much was shaved by the boundPosition handler.
newState.slackX = _this.state.slackX + (x - newState.x);
newState.slackY = _this.state.slackY + (y - newState.y); // Update the event we fire to reflect what really happened after bounds took effect.
uiData.x = newState.x;
uiData.y = newState.y;
uiData.deltaX = newState.x - _this.state.x;
uiData.deltaY = newState.y - _this.state.y;
} // Short-circuit if user's callback killed it.
var shouldUpdate = _this.props.onDrag(e, uiData);
if (shouldUpdate === false) return false;
_this.setState(newState);
});
_defineProperty(_assertThisInitialized(_this), "onDragStop", function (e, coreData) {
if (!_this.state.dragging) return false; // Short-circuit if user's callback killed it.
var shouldContinue = _this.props.onStop(e, (0, positionFns.createDraggableData)(_assertThisInitialized(_this), coreData));
if (shouldContinue === false) return false;
(0, _log.default)('Draggable: onDragStop: %j', coreData);
var newState
/*: $Shape<DraggableState>*/
= {
dragging: false,
slackX: 0,
slackY: 0
}; // If this is a controlled component, the result of this operation will be to
// revert back to the old position. We expect a handler on `onDragStop`, at the least.
var controlled = Boolean(_this.props.position);
if (controlled) {
var _this$props$position = _this.props.position,
x = _this$props$position.x,
y = _this$props$position.y;
newState.x = x;
newState.y = y;
}
_this.setState(newState);
});
_this.state = {
// Whether or not we are currently dragging.
dragging: false,
// Whether or not we have been dragged before.
dragged: false,
// Current transform x and y.
x: props.position ? props.position.x : props.defaultPosition.x,
y: props.position ? props.position.y : props.defaultPosition.y,
prevPropsPosition: _objectSpread({}, props.position),
// Used for compensating for out-of-bounds drags
slackX: 0,
slackY: 0,
// Can only determine if SVG after mounting
isElementSVG: false
};
if (props.position && !(props.onDrag || props.onStop)) {
// eslint-disable-next-line no-console
console.warn('A `position` was applied to this <Draggable>, without drag handlers. This will make this ' + 'component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the ' + '`position` of this element.');
}
return _this;
}
_createClass(Draggable, [{
key: "componentDidMount",
value: function componentDidMount() {
// Check to see if the element passed is an instanceof SVGElement
if (typeof window.SVGElement !== 'undefined' && this.findDOMNode() instanceof window.SVGElement) {
this.setState({
isElementSVG: true
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.setState({
dragging: false
}); // prevents invariant if unmounted while dragging
} // React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
// the underlying DOM node ourselves. See the README for more information.
}, {
key: "findDOMNode",
value: function findDOMNode()
/*: ?HTMLElement*/
{
return this.props.nodeRef ? this.props.nodeRef.current : _reactDom.default.findDOMNode(this);
}
}, {
key: "render",
value: function render()
/*: ReactElement<any>*/
{
var _classNames;
var _this$props = this.props,
children = _this$props.children,
defaultPosition = _this$props.defaultPosition,
defaultClassName = _this$props.defaultClassName,
defaultClassNameDragging = _this$props.defaultClassNameDragging,
defaultClassNameDragged = _this$props.defaultClassNameDragged,
position = _this$props.position,
positionOffset = _this$props.positionOffset,
draggableCoreProps = _objectWithoutProperties(_this$props, ["axis", "bounds", "children", "defaultPosition", "defaultClassName", "defaultClassNameDragging", "defaultClassNameDragged", "position", "positionOffset", "scale"]);
var style = {};
var svgTransform = null; // If this is controlled, we don't want to move it - unless it's dragging.
var controlled = Boolean(position);
var draggable = !controlled || this.state.dragging;
var validPosition = position || defaultPosition;
var transformOpts = {
// Set left if horizontal drag is enabled
x: (0, positionFns.canDragX)(this) && draggable ? this.state.x : validPosition.x,
// Set top if vertical drag is enabled
y: (0, positionFns.canDragY)(this) && draggable ? this.state.y : validPosition.y
}; // If this element was SVG, we use the `transform` attribute.
if (this.state.isElementSVG) {
svgTransform = (0, domFns.createSVGTransform)(transformOpts, positionOffset);
} else {
// Add a CSS transform to move the element around. This allows us to move the element around
// without worrying about whether or not it is relatively or absolutely positioned.
// If the item you are dragging already has a transform set, wrap it in a <span> so <Draggable>
// has a clean slate.
style = (0, domFns.createCSSTransform)(transformOpts, positionOffset);
} // Mark with class while dragging
var className = (0, _classnames.default)(children.props.className || '', defaultClassName, (_classNames = {}, _defineProperty(_classNames, defaultClassNameDragging, this.state.dragging), _defineProperty(_classNames, defaultClassNameDragged, this.state.dragged), _classNames)); // Reuse the child provided
// This makes it flexible to use whatever element is wanted (div, ul, etc)
return /*#__PURE__*/React$1.createElement(_DraggableCore.default, _extends({}, draggableCoreProps, {
onStart: this.onDragStart,
onDrag: this.onDrag,
onStop: this.onDragStop
}), React$1.cloneElement(React$1.Children.only(children), {
className: className,
style: _objectSpread(_objectSpread({}, children.props.style), style),
transform: svgTransform
}));
}
}]);
return Draggable;
}(React$1.Component);
exports.default = Draggable;
_defineProperty(Draggable, "displayName", 'Draggable');
_defineProperty(Draggable, "propTypes", _objectSpread(_objectSpread({}, _DraggableCore.default.propTypes), {}, {
/**
* `axis` determines which axis the draggable can move.
*
* Note that all callbacks will still return data as normal. This only
* controls flushing to the DOM.
*
* 'both' allows movement horizontally and vertically.
* 'x' limits movement to horizontal axis.
* 'y' limits movement to vertical axis.
* 'none' limits all movement.
*
* Defaults to 'both'.
*/
axis: _propTypes.default.oneOf(['both', 'x', 'y', 'none']),
/**
* `bounds` determines the range of movement available to the element.
* Available values are:
*
* 'parent' restricts movement within the Draggable's parent node.
*
* Alternatively, pass an object with the following properties, all of which are optional:
*
* {left: LEFT_BOUND, right: RIGHT_BOUND, bottom: BOTTOM_BOUND, top: TOP_BOUND}
*
* All values are in px.
*
* Example:
*
* ```jsx
* let App = React.createClass({
* render: function () {
* return (
* <Draggable bounds={{right: 300, bottom: 300}}>
* <div>Content</div>
* </Draggable>
* );
* }
* });
* ```
*/
bounds: _propTypes.default.oneOfType([_propTypes.default.shape({
left: _propTypes.default.number,
right: _propTypes.default.number,
top: _propTypes.default.number,
bottom: _propTypes.default.number
}), _propTypes.default.string, _propTypes.default.oneOf([false])]),
defaultClassName: _propTypes.default.string,
defaultClassNameDragging: _propTypes.default.string,
defaultClassNameDragged: _propTypes.default.string,
/**
* `defaultPosition` specifies the x and y that the dragged item should start at
*
* Example:
*
* ```jsx
* let App = React.createClass({
* render: function () {
* return (
* <Draggable defaultPosition={{x: 25, y: 25}}>
* <div>I start with transformX: 25px and transformY: 25px;</div>
* </Draggable>
* );
* }
* });
* ```
*/
defaultPosition: _propTypes.default.shape({
x: _propTypes.default.number,
y: _propTypes.default.number
}),
positionOffset: _propTypes.default.shape({
x: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
y: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
}),
/**
* `position`, if present, defines the current position of the element.
*
* This is similar to how form elements in React work - if no `position` is supplied, the component
* is uncontrolled.
*
* Example:
*
* ```jsx
* let App = React.createClass({
* render: function () {
* return (
* <Draggable position={{x: 25, y: 25}}>
* <div>I start with transformX: 25px and transformY: 25px;</div>
* </Draggable>
* );
* }
* });
* ```
*/
position: _propTypes.default.shape({
x: _propTypes.default.number,
y: _propTypes.default.number
}),
/**
* These properties should be defined on the child, not here.
*/
className: shims.dontSetMe,
style: shims.dontSetMe,
transform: shims.dontSetMe
}));
_defineProperty(Draggable, "defaultProps", _objectSpread(_objectSpread({}, _DraggableCore.default.defaultProps), {}, {
axis: 'both',
bounds: false,
defaultClassName: 'react-draggable',
defaultClassNameDragging: 'react-draggable-dragging',
defaultClassNameDragged: 'react-draggable-dragged',
defaultPosition: {
x: 0,
y: 0
},
position: null,
scale: 1
}));
});
unwrapExports(Draggable_1);
var Draggable = Draggable_1.default,
DraggableCore = Draggable_1.DraggableCore; // Previous versions of this lib exported <Draggable> as the root export. As to no-// them, or TypeScript, we export *both* as the root and as 'default'.
// See https://github.com/mzabriskie/react-draggable/pull/254
// and https://github.com/mzabriskie/react-draggable/issues/266
var cjs = Draggable;
var _default = Draggable;
var DraggableCore_1$1 = DraggableCore;
cjs.default = _default;
cjs.DraggableCore = DraggableCore_1$1;
var utils$1 = createCommonjsModule(function (module, exports) {
exports.__esModule = true;
exports.cloneElement = cloneElement;
var _react = _interopRequireDefault(React);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
// React.addons.cloneWithProps look-alike that merges style & className.
function cloneElement(element, props) {
if (props.style && element.props.style) {
props.style = _objectSpread(_objectSpread({}, element.props.style), props.style);
}
if (props.className && element.props.className) {
props.className = element.props.className + " " + props.className;
}
return /*#__PURE__*/_react.default.cloneElement(element, props);
}
});
unwrapExports(utils$1);
var propTypes$1 = createCommonjsModule(function (module, exports) {
exports.__esModule = true;
exports.resizableProps = void 0;
var _propTypes = _interopRequireDefault(propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var resizableProps = {
/*
* Restricts resizing to a particular axis (default: 'both')
* 'both' - allows resizing by width or height
* 'x' - only allows the width to be changed
* 'y' - only allows the height to be changed
* 'none' - disables resizing altogether
* */
axis: _propTypes.default.oneOf(['both', 'x', 'y', 'none']),
className: _propTypes.default.string,
/*
* Require that one and only one child be present.
* */
children: _propTypes.default.element.isRequired,
/*
* These will be passed wholesale to react-draggable's DraggableCore
* */
draggableOpts: _propTypes.default.shape({
allowAnyClick: _propTypes.default.bool,
cancel: _propTypes.default.string,
children: _propTypes.default.node,
disabled: _propTypes.default.bool,
enableUserSelectHack: _propTypes.default.bool,
offsetParent: _propTypes.default.node,
grid: _propTypes.default.arrayOf(_propTypes.default.number),
handle: _propTypes.default.string,
nodeRef: _propTypes.default.object,
onStart: _propTypes.default.func,
onDrag: _propTypes.default.func,
onStop: _propTypes.default.func,
onMouseDown: _propTypes.default.func,
scale: _propTypes.default.number
}),
/*
* Initial height
* */
height: _propTypes.default.number.isRequired,
/*
* Customize cursor resize handle
* */
handle: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
/*
* If you change this, be sure to update your css
* */
handleSize: _propTypes.default.arrayOf(_propTypes.default.number),
lockAspectRatio: _propTypes.default.bool,
/*
* Max X & Y measure
* */
maxConstraints: _propTypes.default.arrayOf(_propTypes.default.number),
/*
* Min X & Y measure
* */
minConstraints: _propTypes.default.arrayOf(_propTypes.default.number),
/*
* Called on stop resize event
* */
onResizeStop: _propTypes.default.func,
/*
* Called on start resize event
* */
onResizeStart: _propTypes.default.func,
/*
* Called on resize event
* */
onResize: _propTypes.default.func,
/*
* Defines which resize handles should be rendered (default: 'se')
* 's' - South handle (bottom-center)
* 'w' - West handle (left-center)
* 'e' - East handle (right-center)
* 'n' - North handle (top-center)
* 'sw' - Southwest handle (bottom-left)
* 'nw' - Northwest handle (top-left)
* 'se' - Southeast handle (bottom-right)
* 'ne' - Northeast handle (top-center)
* */
resizeHandles: _propTypes.default.arrayOf(_propTypes.default.oneOf(['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'])),
/*
* If `transform: scale(n)` is set on the parent, this should be set to `n`.
* */
transformScale: _propTypes.default.number,
/*
* Initial width
*/
width: _propTypes.default.number.isRequired
};
exports.resizableProps = resizableProps;
});
unwrapExports(propTypes$1);
var Resizable_1 = createCommonjsModule(function (module, exports) {
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(React);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var Resizable = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(Resizable, _React$Component);
function Resizable() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_defineProperty(_assertThisInitialized(_this), "state", undefined);
_defineProperty(_assertThisInitialized(_this), "lastHandleRect", null);
_defineProperty(_assertThisInitialized(_this), "slack", null);
return _this;
}
var _proto = Resizable.prototype;
_proto.componentWillUnmount = function componentWillUnmount() {
this.resetData();
};
_proto.lockAspectRatio = function lockAspectRatio(width, height, aspectRatio) {
height = width / aspectRatio;
width = height * aspectRatio;
return [width, height];
};
_proto.resetData = function resetData() {
this.lastHandleRect = this.slack = null;
} // Clamp width and height within provided constraints
;
_proto.runConstraints = function runConstraints(width, height) {
var _ref = [this.props.minConstraints, this.props.maxConstraints],
min = _ref[0],
max = _ref[1];
if (!min && !max) return [width, height]; // If constraining to min and max, we need to also fit width and height to aspect ratio.
if (this.props.lockAspectRatio) {
var resizingHorizontally = height === this.props.height;
if (resizingHorizontally) {
var ratio = this.props.width / this.props.height;
height = width / ratio;
width = height * ratio;
} else {
// Take into account vertical resize with N/S handles on locked aspect
// ratio. Calculate the change height-first, instead of width-first
var _ratio = this.props.height / this.props.width;
width = height / _ratio;
height = width * _ratio;
}
}
var oldW = width,
oldH = height; // Add slack to the values used to calculate bound position. This will ensure that if
// we start removing slack, the element won't react to it right away until it's been
// completely removed.
var _ref2 = this.slack || [0, 0],
slackW = _ref2[0],
slackH = _ref2[1];
width += slackW;
height += slackH;
if (min) {
width = Math.max(min[0], width);
height = Math.max(min[1], height);
}
if (max) {
width = Math.min(max[0], width);
height = Math.min(max[1], height);
} // If the width or height changed, we must have introduced some slack. Record it for the next iteration.
this.slack = [slackW + (oldW - width), slackH + (oldH - height)];
return [width, height];
}
/**
* Wrapper around drag events to provide more useful data.
*
* @param {String} handlerName Handler name to wrap.
* @return {Function} Handler function.
*/
;
_proto.resizeHandler = function resizeHandler(handlerName, axis) {
var _this2 = this;
return function (e, _ref3) {
var node = _ref3.node,
deltaX = _ref3.deltaX,
deltaY = _ref3.deltaY;
// Reset data in case it was left over somehow (should not be possible)
if (handlerName === 'onResizeStart') _this2.resetData(); // Axis restrictions
var canDragX = (_this2.props.axis === 'both' || _this2.props.axis === 'x') && axis !== 'n' && axis !== 's';
var canDragY = (_this2.props.axis === 'both' || _this2.props.axis === 'y') && axis !== 'e' && axis !== 'w'; // No dragging possible.
if (!canDragX && !canDragY) return; // Decompose axis for later use
var axisV = axis[0];
var axisH = axis[axis.length - 1]; // intentionally not axis[1], so that this catches axis === 'w' for example
// Track the element being dragged to account for changes in position.
// If a handle's position is changed between callbacks, we need to factor this in to the next callback.
// Failure to do so will cause the element to "skip" when resized upwards or leftwards.
var handleRect = node.getBoundingClientRect();
if (_this2.lastHandleRect != null) {
// If the handle has repositioned on either axis since last render,
// we need to increase our callback values by this much.
// Only checking 'n', 'w' since resizing by 's', 'w' won't affect the overall position on page,
if (axisH === 'w') {
var deltaLeftSinceLast = handleRect.left - _this2.lastHandleRect.left;
deltaX += deltaLeftSinceLast;
}
if (axisV === 'n') {
var deltaTopSinceLast = handleRect.top - _this2.lastHandleRect.top;
deltaY += deltaTopSinceLast;
}
} // Storage of last rect so we know how much it has really moved.
_this2.lastHandleRect = handleRect; // Reverse delta if using top or left drag handles.
if (axisH === 'w') deltaX = -deltaX;
if (axisV === 'n') deltaY = -deltaY; // Update w/h by the deltas. Also factor in transformScale.
var width = _this2.props.width + (canDragX ? deltaX / _this2.props.transformScale : 0);
var height = _this2.props.height + (canDragY ? deltaY / _this2.props.transformScale : 0); // Run user-provided constraints.
var _this2$runConstraints = _this2.runConstraints(width, height);
width = _this2$runConstraints[0];
height = _this2$runConstraints[1];
var dimensionsChanged = width !== _this2.props.width || height !== _this2.props.height; // Call user-supplied callback if present.
var cb = typeof _this2.props[handlerName] === 'function' ? _this2.props[handlerName] : null; // Don't call 'onResize' if dimensions haven't changed.
var shouldSkipCb = handlerName === 'onResize' && !dimensionsChanged;
if (cb && !shouldSkipCb) {
if (typeof e.persist === 'function') e.persist();
cb(e, {
node: node,
size: {
width: width,
height: height
},
handle: axis
});
} // Reset internal data
if (handlerName === 'onResizeStop') _this2.resetData();
};
};
_proto.renderResizeHandle = function renderResizeHandle(resizeHandleAxis) {
var handle = this.props.handle;
if (handle) {
if (typeof handle === 'function') {
return handle(resizeHandleAxis);
}
return handle;
}
return /*#__PURE__*/_react.default.createElement("span", {
className: "react-resizable-handle react-resizable-handle-" + resizeHandleAxis
});
};
_proto.render = function render() {
var _this3 = this;
// Pass along only props not meant for the `<Resizable>`.`
// eslint-disable-next-line no-unused-vars
var _this$props = this.props,
children = _this$props.children,
className = _this$props.className,
draggableOpts = _this$props.draggableOpts,
resizeHandles = _this$props.resizeHandles,
p = _objectWithoutPropertiesLoose(_this$props, ["children", "className", "draggableOpts", "width", "height", "handle", "handleSize", "lockAspectRatio", "axis", "minConstraints", "maxConstraints", "onResize", "onResizeStop", "onResizeStart", "resizeHandles", "transformScale"]); // What we're doing here is getting the child of this element, and cloning it with this element's props.
// We are then defining its children as:
// Its original children (resizable's child's children), and
// One or more draggable handles.
return (0, utils$1.cloneElement)(children, _objectSpread(_objectSpread({}, p), {}, {
className: (className ? className + " " : '') + "react-resizable",
children: [].concat(children.props.children, resizeHandles.map(function (handleAxis) {
return /*#__PURE__*/_react.default.createElement(cjs.DraggableCore, _extends({}, draggableOpts, {
key: "resizableHandle-" + handleAxis,
onStop: _this3.resizeHandler('onResizeStop', handleAxis),
onStart: _this3.resizeHandler('onResizeStart', handleAxis),
onDrag: _this3.resizeHandler('onResize', handleAxis)
}), _this3.renderResizeHandle(handleAxis));
}))
}));
};
return Resizable;
}(_react.default.Component);
exports.default = Resizable;
_defineProperty(Resizable, "propTypes", propTypes$1.resizableProps);
_defineProperty(Resizable, "defaultProps", {
handleSize: [20, 20],
lockAspectRatio: false,
axis: 'both',
minConstraints: [20, 20],
maxConstraints: [Infinity, Infinity],
resizeHandles: ['se'],
transformScale: 1
});
});
unwrapExports(Resizable_1);
var ResizableBox_1 = createCommonjsModule(function (module, exports) {
exports.__esModule = true;
exports.default = void 0;
var React$1 = _interopRequireWildcard(React);
var _propTypes = _interopRequireDefault(propTypes);
var _Resizable = _interopRequireDefault(Resizable_1);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var ResizableBox = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(ResizableBox, _React$Component);
function ResizableBox() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_defineProperty(_assertThisInitialized(_this), "state", {
width: _this.props.width,
height: _this.props.height,
propsWidth: _this.props.width,
propsHeight: _this.props.height
});
_defineProperty(_assertThisInitialized(_this), "onResize", function (e, data) {
var size = data.size;
if (_this.props.onResize) {
e.persist && e.persist();
_this.setState(size, function () {
return _this.props.onResize && _this.props.onResize(e, data);
});
} else {
_this.setState(size);
}
});
return _this;
}
ResizableBox.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
// If parent changes height/width, set that in our state.
if (state.propsWidth !== props.width || state.propsHeight !== props.height) {
return {
width: props.width,
height: props.height,
propsWidth: props.width,
propsHeight: props.height
};
}
return null;
};
var _proto = ResizableBox.prototype;
_proto.render = function render() {
// Basic wrapper around a Resizable instance.
// If you use Resizable directly, you are responsible for updating the child component
// with a new width and height.
var _this$props = this.props,
handle = _this$props.handle,
handleSize = _this$props.handleSize,
onResizeStart = _this$props.onResizeStart,
onResizeStop = _this$props.onResizeStop,
draggableOpts = _this$props.draggableOpts,
minConstraints = _this$props.minConstraints,
maxConstraints = _this$props.maxConstraints,
lockAspectRatio = _this$props.lockAspectRatio,
axis = _this$props.axis,
resizeHandles = _this$props.resizeHandles,
style = _this$props.style,
transformScale = _this$props.transformScale,
props = _objectWithoutPropertiesLoose(_this$props, ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles", "style", "transformScale"]);
return /*#__PURE__*/React$1.createElement(_Resizable.default, {
axis: axis,
draggableOpts: draggableOpts,
handle: handle,
handleSize: handleSize,
height: this.state.height,
lockAspectRatio: lockAspectRatio,
maxConstraints: maxConstraints,
minConstraints: minConstraints,
onResizeStart: onResizeStart,
onResize: this.onResize,
onResizeStop: onResizeStop,
resizeHandles: resizeHandles,
transformScale: transformScale,
width: this.state.width
}, /*#__PURE__*/React$1.createElement("div", _extends({}, props, {
style: _objectSpread(_objectSpread({}, style), {}, {
width: this.state.width + 'px',
height: this.state.height + 'px'
})
})));
};
return ResizableBox;
}(React$1.Component);
exports.default = ResizableBox;
_defineProperty(ResizableBox, "propTypes", _objectSpread(_objectSpread({}, propTypes$1.resizableProps), {}, {
children: _propTypes.default.element
}));
});
unwrapExports(ResizableBox_1);
var reactResizable = function() {
throw new Error("Don't instantiate Resizable directly! Use require('react-resizable').Resizable");
};
var Resizable = Resizable_1.default;
var ResizableBox = ResizableBox_1.default;
reactResizable.Resizable = Resizable;
reactResizable.ResizableBox = ResizableBox;
var GridItem_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(React);
var _reactDom = _interopRequireDefault(reactDom);
var _propTypes = _interopRequireDefault(propTypes);
var _classnames = _interopRequireDefault(classnames);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
/**
* An individual item within a ReactGridLayout.
*/
var GridItem = /*#__PURE__*/function (_React$Component) {
_inherits(GridItem, _React$Component);
var _super = _createSuper(GridItem);
function GridItem() {
var _this;
_classCallCheck(this, GridItem);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
resizing: null,
dragging: null,
className: ""
});
_defineProperty(_assertThisInitialized(_this), "currentNode", void 0);
_defineProperty(_assertThisInitialized(_this), "onDragStart", function (e
/*: Event*/
, _ref) {
var node = _ref.node;
var onDragStart = _this.props.onDragStart;
if (!onDragStart) return;
var newPosition
/*: PartialPosition*/
= {
top: 0,
left: 0
}; // TODO: this wont work on nested parents
var offsetParent = node.offsetParent;
if (!offsetParent) return;
var parentRect = offsetParent.getBoundingClientRect();
var clientRect = node.getBoundingClientRect();
var cLeft = clientRect.left / _this.props.transformScale;
var pLeft = parentRect.left / _this.props.transformScale;
var cTop = clientRect.top / _this.props.transformScale;
var pTop = parentRect.top / _this.props.transformScale;
newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
newPosition.top = cTop - pTop + offsetParent.scrollTop;
_this.setState({
dragging: newPosition
}); // Call callback with this data
var _calcXY = (0, calculateUtils.calcXY)(_this.getPositionParams(), newPosition.top, newPosition.left, _this.props.w, _this.props.h),
x = _calcXY.x,
y = _calcXY.y;
return onDragStart.call(_assertThisInitialized(_this), _this.props.i, x, y, {
e: e,
node: node,
newPosition: newPosition
});
});
_defineProperty(_assertThisInitialized(_this), "onDrag", function (e
/*: Event*/
, _ref2) {
var node = _ref2.node,
deltaX = _ref2.deltaX,
deltaY = _ref2.deltaY;
var _this$props = _this.props,
onDrag = _this$props.onDrag,
transformScale = _this$props.transformScale;
if (!onDrag) return;
deltaX /= transformScale;
deltaY /= transformScale;
if (!_this.state.dragging) {
throw new Error("onDrag called before onDragStart.");
}
var top = _this.state.dragging.top + deltaY;
var left = _this.state.dragging.left + deltaX;
var _this$props2 = _this.props,
isBounded = _this$props2.isBounded,
i = _this$props2.i,
w = _this$props2.w,
h = _this$props2.h,
containerWidth = _this$props2.containerWidth;
var positionParams = _this.getPositionParams(); // Boundary calculations; keeps items within the grid
if (isBounded) {
var offsetParent = node.offsetParent;
if (offsetParent) {
var _this$props3 = _this.props,
margin = _this$props3.margin,
rowHeight = _this$props3.rowHeight;
var bottomBoundary = offsetParent.clientHeight - (0, calculateUtils.calcGridItemWHPx)(h, rowHeight, margin[1]);
top = (0, calculateUtils.clamp)(top, 0, bottomBoundary);
var colWidth = (0, calculateUtils.calcGridColWidth)(positionParams);
var rightBoundary = containerWidth - (0, calculateUtils.calcGridItemWHPx)(w, colWidth, margin[0]);
left = (0, calculateUtils.clamp)(left, 0, rightBoundary);
}
}
var newPosition
/*: PartialPosition*/
= {
top: top,
left: left
};
_this.setState({
dragging: newPosition
}); // Call callback with this data
var _calcXY2 = (0, calculateUtils.calcXY)(positionParams, top, left, w, h),
x = _calcXY2.x,
y = _calcXY2.y;
return onDrag.call(_assertThisInitialized(_this), i, x, y, {
e: e,
node: node,
newPosition: newPosition
});
});
_defineProperty(_assertThisInitialized(_this), "onDragStop", function (e
/*: Event*/
, _ref3) {
var node = _ref3.node;
var onDragStop = _this.props.onDragStop;
if (!onDragStop) return;
if (!_this.state.dragging) {
throw new Error("onDragEnd called before onDragStart.");
}
var _this$props4 = _this.props,
w = _this$props4.w,
h = _this$props4.h,
i = _this$props4.i;
var _this$state$dragging = _this.state.dragging,
left = _this$state$dragging.left,
top = _this$state$dragging.top;
var newPosition
/*: PartialPosition*/
= {
top: top,
left: left
};
_this.setState({
dragging: null
});
var _calcXY3 = (0, calculateUtils.calcXY)(_this.getPositionParams(), top, left, w, h),
x = _calcXY3.x,
y = _calcXY3.y;
return onDragStop.call(_assertThisInitialized(_this), i, x, y, {
e: e,
node: node,
newPosition: newPosition
});
});
_defineProperty(_assertThisInitialized(_this), "onResizeStop", function (e
/*: Event*/
, callbackData
/*: { node: HTMLElement, size: Position }*/
) {
_this.onResizeHandler(e, callbackData, "onResizeStop");
});
_defineProperty(_assertThisInitialized(_this), "onResizeStart", function (e
/*: Event*/
, callbackData
/*: { node: HTMLElement, size: Position }*/
) {
_this.onResizeHandler(e, callbackData, "onResizeStart");
});
_defineProperty(_assertThisInitialized(_this), "onResize", function (e
/*: Event*/
, callbackData
/*: { node: HTMLElement, size: Position }*/
) {
_this.onResizeHandler(e, callbackData, "onResize");
});
return _this;
}
_createClass(GridItem, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps
/*: Props*/
, nextState
/*: State*/
) {
// We can't deeply compare children. If the developer memoizes them, we can
// use this optimization.
if (this.props.children !== nextProps.children) return true;
if (this.props.droppingPosition !== nextProps.droppingPosition) return true; // TODO memoize these calculations so they don't take so long?
var oldPosition = (0, calculateUtils.calcGridItemPosition)(this.getPositionParams(this.props), this.props.x, this.props.y, this.props.w, this.props.h, this.state);
var newPosition = (0, calculateUtils.calcGridItemPosition)(this.getPositionParams(nextProps), nextProps.x, nextProps.y, nextProps.w, nextProps.h, nextState);
return !(0, utils.fastPositionEqual)(oldPosition, newPosition) || this.props.useCSSTransforms !== nextProps.useCSSTransforms;
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.moveDroppingItem({});
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps
/*: Props*/
) {
this.moveDroppingItem(prevProps);
} // When a droppingPosition is present, this means we should fire a move event, as if we had moved
// this element by `x, y` pixels.
}, {
key: "moveDroppingItem",
value: function moveDroppingItem(prevProps
/*: Props*/
) {
var droppingPosition = this.props.droppingPosition;
if (!droppingPosition) return;
var prevDroppingPosition = prevProps.droppingPosition || {
left: 0,
top: 0
};
var dragging = this.state.dragging;
if (!this.currentNode) {
// eslint-disable-next-line react/no-find-dom-node
this.currentNode = ((_reactDom.default.findDOMNode(this)
/*: any*/
)
/*: HTMLElement*/
);
}
var shouldDrag = dragging && droppingPosition.left !== prevDroppingPosition.left || droppingPosition.top !== prevDroppingPosition.top;
if (!dragging) {
this.onDragStart(droppingPosition.e, {
node: this.currentNode,
deltaX: droppingPosition.left,
deltaY: droppingPosition.top
});
} else if (shouldDrag) {
var deltaX = droppingPosition.left - dragging.left;
var deltaY = droppingPosition.top - dragging.top;
this.onDrag(droppingPosition.e, {
node: this.currentNode,
deltaX: deltaX,
deltaY: deltaY
});
}
}
}, {
key: "getPositionParams",
value: function getPositionParams()
/*: PositionParams*/
{
var props
/*: Props*/
= arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
return {
cols: props.cols,
containerPadding: props.containerPadding,
containerWidth: props.containerWidth,
margin: props.margin,
maxRows: props.maxRows,
rowHeight: props.rowHeight
};
}
/**
* This is where we set the grid item's absolute placement. It gets a little tricky because we want to do it
* well when server rendering, and the only way to do that properly is to use percentage width/left because
* we don't know exactly what the browser viewport is.
* Unfortunately, CSS Transforms, which are great for performance, break in this instance because a percentage
* left is relative to the item itself, not its container! So we cannot use them on the server rendering pass.
*
* @param {Object} pos Position object with width, height, left, top.
* @return {Object} Style object.
*/
}, {
key: "createStyle",
value: function createStyle(pos
/*: Position*/
)
/*: { [key: string]: ?string }*/
{
var _this$props5 = this.props,
usePercentages = _this$props5.usePercentages,
containerWidth = _this$props5.containerWidth,
useCSSTransforms = _this$props5.useCSSTransforms;
var style; // CSS Transforms support (default)
if (useCSSTransforms) {
style = (0, utils.setTransform)(pos);
} else {
// top,left (slow)
style = (0, utils.setTopLeft)(pos); // This is used for server rendering.
if (usePercentages) {
style.left = (0, utils.perc)(pos.left / containerWidth);
style.width = (0, utils.perc)(pos.width / containerWidth);
}
}
return style;
}
/**
* Mix a Draggable instance into a child.
* @param {Element} child Child element.
* @return {Element} Child wrapped in Draggable.
*/
}, {
key: "mixinDraggable",
value: function mixinDraggable(child
/*: ReactElement<any>*/
, isDraggable
/*: boolean*/
)
/*: ReactElement<any>*/
{
return /*#__PURE__*/_react.default.createElement(cjs.DraggableCore, {
disabled: !isDraggable,
onStart: this.onDragStart,
onDrag: this.onDrag,
onStop: this.onDragStop,
handle: this.props.handle,
cancel: ".react-resizable-handle" + (this.props.cancel ? "," + this.props.cancel : ""),
scale: this.props.transformScale
}, child);
}
/**
* Mix a Resizable instance into a child.
* @param {Element} child Child element.
* @param {Object} position Position object (pixel values)
* @return {Element} Child wrapped in Resizable.
*/
}, {
key: "mixinResizable",
value: function mixinResizable(child
/*: ReactElement<any>*/
, position
/*: Position*/
, isResizable
/*: boolean*/
)
/*: ReactElement<any>*/
{
var _this$props6 = this.props,
cols = _this$props6.cols,
x = _this$props6.x,
minW = _this$props6.minW,
minH = _this$props6.minH,
maxW = _this$props6.maxW,
maxH = _this$props6.maxH,
transformScale = _this$props6.transformScale,
resizeHandles = _this$props6.resizeHandles;
var positionParams = this.getPositionParams(); // This is the max possible width - doesn't go to infinity because of the width of the window
var maxWidth = (0, calculateUtils.calcGridItemPosition)(positionParams, 0, 0, cols - x, 0).width; // Calculate min/max constraints using our min & maxes
var mins = (0, calculateUtils.calcGridItemPosition)(positionParams, 0, 0, minW, minH);
var maxes = (0, calculateUtils.calcGridItemPosition)(positionParams, 0, 0, maxW, maxH);
var minConstraints = [mins.width, mins.height];
var maxConstraints = [Math.min(maxes.width, maxWidth), Math.min(maxes.height, Infinity)];
return /*#__PURE__*/_react.default.createElement(reactResizable.Resizable, {
draggableOpts: {
disabled: !isResizable
},
className: isResizable ? undefined : "react-resizable-hide",
width: position.width,
height: position.height,
minConstraints: minConstraints,
maxConstraints: maxConstraints,
onResizeStop: this.onResizeStop,
onResizeStart: this.onResizeStart,
onResize: this.onResize,
transformScale: transformScale,
resizeHandles: resizeHandles
}, child);
}
/**
* onDragStart event handler
* @param {Event} e event data
* @param {Object} callbackData an object with node, delta and position information
*/
}, {
key: "onResizeHandler",
/**
* Wrapper around drag events to provide more useful data.
* All drag events call the function with the given handler name,
* with the signature (index, x, y).
*
* @param {String} handlerName Handler name to wrap.
* @return {Function} Handler function.
*/
value: function onResizeHandler(e
/*: Event*/
, _ref4, handlerName
/*: string*/
) {
var node = _ref4.node,
size = _ref4.size;
var handler = this.props[handlerName];
if (!handler) return;
var _this$props7 = this.props,
cols = _this$props7.cols,
x = _this$props7.x,
y = _this$props7.y,
i = _this$props7.i,
maxH = _this$props7.maxH,
minH = _this$props7.minH;
var _this$props8 = this.props,
minW = _this$props8.minW,
maxW = _this$props8.maxW; // Get new XY
var _calcWH = (0, calculateUtils.calcWH)(this.getPositionParams(), size.width, size.height, x, y),
w = _calcWH.w,
h = _calcWH.h; // minW should be at least 1 (TODO propTypes validation?)
minW = Math.max(minW, 1); // maxW should be at most (cols - x)
maxW = Math.min(maxW, cols - x); // Min/max capping
w = (0, calculateUtils.clamp)(w, minW, maxW);
h = (0, calculateUtils.clamp)(h, minH, maxH);
this.setState({
resizing: handlerName === "onResizeStop" ? null : size
});
handler.call(this, i, w, h, {
e: e,
node: node,
size: size
});
}
}, {
key: "render",
value: function render()
/*: ReactNode*/
{
var _this$props9 = this.props,
x = _this$props9.x,
y = _this$props9.y,
w = _this$props9.w,
h = _this$props9.h,
isDraggable = _this$props9.isDraggable,
isResizable = _this$props9.isResizable,
droppingPosition = _this$props9.droppingPosition,
useCSSTransforms = _this$props9.useCSSTransforms;
var pos = (0, calculateUtils.calcGridItemPosition)(this.getPositionParams(), x, y, w, h, this.state);
var child = _react.default.Children.only(this.props.children); // Create the child element. We clone the existing element but modify its className and style.
var newChild = /*#__PURE__*/_react.default.cloneElement(child, {
className: (0, _classnames.default)("react-grid-item", child.props.className, this.props.className, {
static: this.props.static,
resizing: Boolean(this.state.resizing),
"react-draggable": isDraggable,
"react-draggable-dragging": Boolean(this.state.dragging),
dropping: Boolean(droppingPosition),
cssTransforms: useCSSTransforms
}),
// We can set the width and height on the child, but unfortunately we can't set the position.
style: _objectSpread(_objectSpread(_objectSpread({}, this.props.style), child.props.style), this.createStyle(pos))
}); // Resizable support. This is usually on but the user can toggle it off.
newChild = this.mixinResizable(newChild, pos, isResizable); // Draggable support. This is always on, except for with placeholders.
newChild = this.mixinDraggable(newChild, isDraggable);
return newChild;
}
}]);
return GridItem;
}(_react.default.Component);
exports.default = GridItem;
_defineProperty(GridItem, "propTypes", {
// Children must be only a single element
children: _propTypes.default.element,
// General grid attributes
cols: _propTypes.default.number.isRequired,
containerWidth: _propTypes.default.number.isRequired,
rowHeight: _propTypes.default.number.isRequired,
margin: _propTypes.default.array.isRequired,
maxRows: _propTypes.default.number.isRequired,
containerPadding: _propTypes.default.array.isRequired,
// These are all in grid units
x: _propTypes.default.number.isRequired,
y: _propTypes.default.number.isRequired,
w: _propTypes.default.number.isRequired,
h: _propTypes.default.number.isRequired,
// All optional
minW: function minW(props
/*: Props*/
, propName
/*: string*/
) {
var value = props[propName];
if (typeof value !== "number") return new Error("minWidth not Number");
if (value > props.w || value > props.maxW) return new Error("minWidth larger than item width/maxWidth");
},
maxW: function maxW(props
/*: Props*/
, propName
/*: string*/
) {
var value = props[propName];
if (typeof value !== "number") return new Error("maxWidth not Number");
if (value < props.w || value < props.minW) return new Error("maxWidth smaller than item width/minWidth");
},
minH: function minH(props
/*: Props*/
, propName
/*: string*/
) {
var value = props[propName];
if (typeof value !== "number") return new Error("minHeight not Number");
if (value > props.h || value > props.maxH) return new Error("minHeight larger than item height/maxHeight");
},
maxH: function maxH(props
/*: Props*/
, propName
/*: string*/
) {
var value = props[propName];
if (typeof value !== "number") return new Error("maxHeight not Number");
if (value < props.h || value < props.minH) return new Error("maxHeight smaller than item height/minHeight");
},
// ID is nice to have for callbacks
i: _propTypes.default.string.isRequired,
// Functions
onDragStop: _propTypes.default.func,
onDragStart: _propTypes.default.func,
onDrag: _propTypes.default.func,
onResizeStop: _propTypes.default.func,
onResizeStart: _propTypes.default.func,
onResize: _propTypes.default.func,
// Flags
isDraggable: _propTypes.default.bool.isRequired,
isResizable: _propTypes.default.bool.isRequired,
isBounded: _propTypes.default.bool.isRequired,
static: _propTypes.default.bool,
// Use CSS transforms instead of top/left
useCSSTransforms: _propTypes.default.bool.isRequired,
transformScale: _propTypes.default.number,
// Others
className: _propTypes.default.string,
// Selector for draggable handle
handle: _propTypes.default.string,
// Selector for draggable cancel (see react-draggable)
cancel: _propTypes.default.string,
// Current position of a dropping element
droppingPosition: _propTypes.default.shape({
e: _propTypes.default.object.isRequired,
left: _propTypes.default.number.isRequired,
top: _propTypes.default.number.isRequired
})
});
_defineProperty(GridItem, "defaultProps", {
className: "",
cancel: "",
handle: "",
minH: 1,
minW: 1,
maxH: Infinity,
maxW: Infinity,
transformScale: 1
});
});
unwrapExports(GridItem_1);
var ReactGridLayoutPropTypes = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(propTypes);
var _react = _interopRequireDefault(React);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = {
//
// Basic props
//
className: _propTypes.default.string,
style: _propTypes.default.object,
// This can be set explicitly. If it is not set, it will automatically
// be set to the container width. Note that resizes will *not* cause this to adjust.
// If you need that behavior, use WidthProvider.
width: _propTypes.default.number,
// If true, the container height swells and contracts to fit contents
autoSize: _propTypes.default.bool,
// # of cols.
cols: _propTypes.default.number,
// A selector that will not be draggable.
draggableCancel: _propTypes.default.string,
// A selector for the draggable handler
draggableHandle: _propTypes.default.string,
// Deprecated
verticalCompact: function verticalCompact(props
/*: Props*/
) {
if (props.verticalCompact === false && process.env.NODE_ENV !== "production") {
console.warn( // eslint-disable-line no-console
"`verticalCompact` on <ReactGridLayout> is deprecated and will be removed soon. " + 'Use `compactType`: "horizontal" | "vertical" | null.');
}
},
// Choose vertical or hotizontal compaction
compactType: _propTypes.default.oneOf(["vertical", "horizontal"]),
// layout is an array of object with the format:
// {x: Number, y: Number, w: Number, h: Number, i: String}
layout: function layout(props
/*: Props*/
) {
var layout = props.layout; // I hope you're setting the data-grid property on the grid items
if (layout === undefined) return;
utils.validateLayout(layout, "layout");
},
//
// Grid Dimensions
//
// Margin between items [x, y] in px
margin: _propTypes.default.arrayOf(_propTypes.default.number),
// Padding inside the container [x, y] in px
containerPadding: _propTypes.default.arrayOf(_propTypes.default.number),
// Rows have a static height, but you can change this based on breakpoints if you like
rowHeight: _propTypes.default.number,
// Default Infinity, but you can specify a max here if you like.
// Note that this isn't fully fleshed out and won't error if you specify a layout that
// extends beyond the row capacity. It will, however, not allow users to drag/resize
// an item past the barrier. They can push items beyond the barrier, though.
// Intentionally not documented for this reason.
maxRows: _propTypes.default.number,
//
// Flags
//
isBounded: _propTypes.default.bool,
isDraggable: _propTypes.default.bool,
isResizable: _propTypes.default.bool,
// If true, grid items won't change position when being dragged over.
preventCollision: _propTypes.default.bool,
// Use CSS transforms instead of top/left
useCSSTransforms: _propTypes.default.bool,
// parent layout transform scale
transformScale: _propTypes.default.number,
// If true, an external element can trigger onDrop callback with a specific grid position as a parameter
isDroppable: _propTypes.default.bool,
// Defines which resize handles should be rendered (default: 'se')
// Allows for any combination of:
// 's' - South handle (bottom-center)
// 'w' - West handle (left-center)
// 'e' - East handle (right-center)
// 'n' - North handle (top-center)
// 'sw' - Southwest handle (bottom-left)
// 'nw' - Northwest handle (top-left)
// 'se' - Southeast handle (bottom-right)
// 'ne' - Northeast handle (top-right)
resizeHandles: _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])),
//
// Callbacks
//
// Callback so you can save the layout. Calls after each drag & resize stops.
onLayoutChange: _propTypes.default.func,
// Calls when drag starts. Callback is of the signature (layout, oldItem, newItem, placeholder, e, ?node).
// All callbacks below have the same signature. 'start' and 'stop' callbacks omit the 'placeholder'.
onDragStart: _propTypes.default.func,
// Calls on each drag movement.
onDrag: _propTypes.default.func,
// Calls when drag is complete.
onDragStop: _propTypes.default.func,
//Calls when resize starts.
onResizeStart: _propTypes.default.func,
// Calls when resize movement happens.
onResize: _propTypes.default.func,
// Calls when resize is complete.
onResizeStop: _propTypes.default.func,
// Calls when some element is dropped.
onDrop: _propTypes.default.func,
//
// Other validations
//
droppingItem: _propTypes.default.shape({
i: _propTypes.default.string.isRequired,
w: _propTypes.default.number.isRequired,
h: _propTypes.default.number.isRequired
}),
// Children must not have duplicate keys.
children: function children(props
/*: Props*/
, propName
/*: string*/
) {
var children = props[propName]; // Check children keys for duplicates. Throw if found.
var keys = {};
_react.default.Children.forEach(children, function (child) {
if (keys[child.key]) {
throw new Error('Duplicate child key "' + child.key + '" found! This will cause problems in ReactGridLayout.');
}
keys[child.key] = true;
});
},
// Optional ref for getting a reference for the wrapping div.
innerRef: _propTypes.default.any
};
exports.default = _default;
});
unwrapExports(ReactGridLayoutPropTypes);
var ReactGridLayout_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(React);
var _lodash = _interopRequireDefault(lodash_isequal);
var _classnames = _interopRequireDefault(classnames);
var _GridItem = _interopRequireDefault(GridItem_1);
var _ReactGridLayoutPropTypes = _interopRequireDefault(ReactGridLayoutPropTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
// End Types
var layoutClassName = "react-grid-layout";
var isFirefox = false; // Try...catch will protect from navigator not existing (e.g. node) or a bad implementation of navigator
try {
isFirefox = /firefox/i.test(navigator.userAgent);
} catch (e) {
/* Ignore */
}
/**
* A reactive, fluid grid layout with draggable, resizable components.
*/
var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
_inherits(ReactGridLayout, _React$Component);
var _super = _createSuper(ReactGridLayout);
// TODO publish internal ReactClass displayName transform
// Refactored to another module to make way for preval
function ReactGridLayout(props
/*: Props*/
, context
/*: any*/
)
/*: void*/
{
var _this;
_classCallCheck(this, ReactGridLayout);
_this = _super.call(this, props, context);
_defineProperty(_assertThisInitialized(_this), "state", {
activeDrag: null,
layout: (0, utils.synchronizeLayoutWithChildren)(_this.props.layout, _this.props.children, _this.props.cols, // Legacy support for verticalCompact: false
(0, utils.compactType)(_this.props)),
mounted: false,
oldDragItem: null,
oldLayout: null,
oldResizeItem: null,
droppingDOMNode: null,
children: []
});
_defineProperty(_assertThisInitialized(_this), "dragEnterCounter", 0);
_defineProperty(_assertThisInitialized(_this), "onDragOver", function (e
/*: DragOverEvent*/
) {
// we should ignore events from layout's children in Firefox
// to avoid unpredictable jumping of a dropping placeholder
// FIXME remove this hack
if (isFirefox && e.nativeEvent.target.className.indexOf(layoutClassName) === -1) {
return false;
}
var _this$props = _this.props,
droppingItem = _this$props.droppingItem,
margin = _this$props.margin,
cols = _this$props.cols,
rowHeight = _this$props.rowHeight,
maxRows = _this$props.maxRows,
width = _this$props.width,
containerPadding = _this$props.containerPadding;
var layout = _this.state.layout; // This is relative to the DOM element that this event fired for.
var _e$nativeEvent = e.nativeEvent,
layerX = _e$nativeEvent.layerX,
layerY = _e$nativeEvent.layerY;
var droppingPosition = {
left: layerX,
top: layerY,
e: e
};
if (!_this.state.droppingDOMNode) {
var positionParams
/*: PositionParams*/
= {
cols: cols,
margin: margin,
maxRows: maxRows,
rowHeight: rowHeight,
containerWidth: width,
containerPadding: containerPadding || margin
};
var calculatedPosition = (0, calculateUtils.calcXY)(positionParams, layerY, layerX, droppingItem.w, droppingItem.h);
_this.setState({
droppingDOMNode: /*#__PURE__*/_react.default.createElement("div", {
key: droppingItem.i
}),
droppingPosition: droppingPosition,
layout: [].concat(_toConsumableArray(layout), [_objectSpread(_objectSpread({}, droppingItem), {}, {
x: calculatedPosition.x,
y: calculatedPosition.y,
static: false,
isDraggable: true
})])
});
} else if (_this.state.droppingPosition) {
var _this$state$droppingP = _this.state.droppingPosition,
left = _this$state$droppingP.left,
top = _this$state$droppingP.top;
var shouldUpdatePosition = left != layerX || top != layerY;
if (shouldUpdatePosition) {
_this.setState({
droppingPosition: droppingPosition
});
}
}
e.stopPropagation();
e.preventDefault();
});
_defineProperty(_assertThisInitialized(_this), "removeDroppingPlaceholder", function () {
var _this$props2 = _this.props,
droppingItem = _this$props2.droppingItem,
cols = _this$props2.cols;
var layout = _this.state.layout;
var newLayout = (0, utils.compact)(layout.filter(function (l) {
return l.i !== droppingItem.i;
}), (0, utils.compactType)(_this.props), cols);
_this.setState({
layout: newLayout,
droppingDOMNode: null,
activeDrag: null,
droppingPosition: undefined
});
});
_defineProperty(_assertThisInitialized(_this), "onDragLeave", function () {
_this.dragEnterCounter--; // onDragLeave can be triggered on each layout's child.
// But we know that count of dragEnter and dragLeave events
// will be balanced after leaving the layout's container
// so we can increase and decrease count of dragEnter and
// when it'll be equal to 0 we'll remove the placeholder
if (_this.dragEnterCounter === 0) {
_this.removeDroppingPlaceholder();
}
});
_defineProperty(_assertThisInitialized(_this), "onDragEnter", function () {
_this.dragEnterCounter++;
});
_defineProperty(_assertThisInitialized(_this), "onDrop", function (e
/*: Event*/
) {
var droppingItem = _this.props.droppingItem;
var layout = _this.state.layout;
var item = layout.find(function (l) {
return l.i === droppingItem.i;
}); // reset gragEnter counter on drop
_this.dragEnterCounter = 0;
_this.removeDroppingPlaceholder();
_this.props.onDrop(layout, item, e);
});
(0, utils.autoBindHandlers)(_assertThisInitialized(_this), ["onDragStart", "onDrag", "onDragStop", "onResizeStart", "onResize", "onResizeStop"]);
return _this;
}
_createClass(ReactGridLayout, [{
key: "componentDidMount",
value: function componentDidMount() {
this.setState({
mounted: true
}); // Possibly call back with layout on mount. This should be done after correcting the layout width
// to ensure we don't rerender with the wrong width.
this.onLayoutMaybeChanged(this.state.layout, this.props.layout);
}
}, {
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps
/*: Props*/
, nextState
/*: State*/
) {
return (// NOTE: this is almost always unequal. Therefore the only way to get better performance
// from SCU is if the user intentionally memoizes children. If they do, and they can
// handle changes properly, performance will increase.
this.props.children !== nextProps.children || !(0, utils.fastRGLPropsEqual)(this.props, nextProps, _lodash.default) || this.state.activeDrag !== nextState.activeDrag || this.state.mounted !== nextState.mounted || this.state.droppingPosition !== nextState.droppingPosition
);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps
/*: Props*/
, prevState
/*: State*/
) {
if (!this.state.activeDrag) {
var newLayout = this.state.layout;
var oldLayout = prevState.layout;
this.onLayoutMaybeChanged(newLayout, oldLayout);
}
}
/**
* Calculates a pixel value for the container.
* @return {String} Container height in pixels.
*/
}, {
key: "containerHeight",
value: function containerHeight() {
if (!this.props.autoSize) return;
var nbRow = (0, utils.bottom)(this.state.layout);
var containerPaddingY = this.props.containerPadding ? this.props.containerPadding[1] : this.props.margin[1];
return nbRow * this.props.rowHeight + (nbRow - 1) * this.props.margin[1] + containerPaddingY * 2 + "px";
}
/**
* When dragging starts
* @param {String} i Id of the child
* @param {Number} x X position of the move
* @param {Number} y Y position of the move
* @param {Event} e The mousedown event
* @param {Element} node The current dragging DOM element
*/
}, {
key: "onDragStart",
value: function onDragStart(i
/*: string*/
, x
/*: number*/
, y
/*: number*/
, _ref) {
var e = _ref.e,
node = _ref.node;
var layout = this.state.layout;
var l = (0, utils.getLayoutItem)(layout, i);
if (!l) return;
this.setState({
oldDragItem: (0, utils.cloneLayoutItem)(l),
oldLayout: this.state.layout
});
return this.props.onDragStart(layout, l, l, null, e, node);
}
/**
* Each drag movement create a new dragelement and move the element to the dragged location
* @param {String} i Id of the child
* @param {Number} x X position of the move
* @param {Number} y Y position of the move
* @param {Event} e The mousedown event
* @param {Element} node The current dragging DOM element
*/
}, {
key: "onDrag",
value: function onDrag(i
/*: string*/
, x
/*: number*/
, y
/*: number*/
, _ref2) {
var e = _ref2.e,
node = _ref2.node;
var oldDragItem = this.state.oldDragItem;
var layout = this.state.layout;
var cols = this.props.cols;
var l = (0, utils.getLayoutItem)(layout, i);
if (!l) return; // Create placeholder (display only)
var placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
placeholder: true,
i: i
}; // Move the element to the dragged location.
var isUserAction = true;
layout = (0, utils.moveElement)(layout, l, x, y, isUserAction, this.props.preventCollision, (0, utils.compactType)(this.props), cols);
this.props.onDrag(layout, oldDragItem, l, placeholder, e, node);
this.setState({
layout: (0, utils.compact)(layout, (0, utils.compactType)(this.props), cols),
activeDrag: placeholder
});
}
/**
* When dragging stops, figure out which position the element is closest to and update its x and y.
* @param {String} i Index of the child.
* @param {Number} x X position of the move
* @param {Number} y Y position of the move
* @param {Event} e The mousedown event
* @param {Element} node The current dragging DOM element
*/
}, {
key: "onDragStop",
value: function onDragStop(i
/*: string*/
, x
/*: number*/
, y
/*: number*/
, _ref3) {
var e = _ref3.e,
node = _ref3.node;
if (!this.state.activeDrag) return;
var oldDragItem = this.state.oldDragItem;
var layout = this.state.layout;
var _this$props3 = this.props,
cols = _this$props3.cols,
preventCollision = _this$props3.preventCollision;
var l = (0, utils.getLayoutItem)(layout, i);
if (!l) return; // Move the element here
var isUserAction = true;
layout = (0, utils.moveElement)(layout, l, x, y, isUserAction, preventCollision, (0, utils.compactType)(this.props), cols);
this.props.onDragStop(layout, oldDragItem, l, null, e, node); // Set state
var newLayout = (0, utils.compact)(layout, (0, utils.compactType)(this.props), cols);
var oldLayout = this.state.oldLayout;
this.setState({
activeDrag: null,
layout: newLayout,
oldDragItem: null,
oldLayout: null
});
this.onLayoutMaybeChanged(newLayout, oldLayout);
}
}, {
key: "onLayoutMaybeChanged",
value: function onLayoutMaybeChanged(newLayout
/*: Layout*/
, oldLayout
/*: ?Layout*/
) {
if (!oldLayout) oldLayout = this.state.layout;
if (!(0, _lodash.default)(oldLayout, newLayout)) {
this.props.onLayoutChange(newLayout);
}
}
}, {
key: "onResizeStart",
value: function onResizeStart(i
/*: string*/
, w
/*: number*/
, h
/*: number*/
, _ref4) {
var e = _ref4.e,
node = _ref4.node;
var layout = this.state.layout;
var l = (0, utils.getLayoutItem)(layout, i);
if (!l) return;
this.setState({
oldResizeItem: (0, utils.cloneLayoutItem)(l),
oldLayout: this.state.layout
});
this.props.onResizeStart(layout, l, l, null, e, node);
}
}, {
key: "onResize",
value: function onResize(i
/*: string*/
, w
/*: number*/
, h
/*: number*/
, _ref5) {
var e = _ref5.e,
node = _ref5.node;
var _this$state = this.state,
layout = _this$state.layout,
oldResizeItem = _this$state.oldResizeItem;
var _this$props4 = this.props,
cols = _this$props4.cols,
preventCollision = _this$props4.preventCollision;
var l
/*: ?LayoutItem*/
= (0, utils.getLayoutItem)(layout, i);
if (!l) return; // Something like quad tree should be used
// to find collisions faster
var hasCollisions;
if (preventCollision) {
var collisions = (0, utils.getAllCollisions)(layout, _objectSpread(_objectSpread({}, l), {}, {
w: w,
h: h
})).filter(function (layoutItem) {
return layoutItem.i !== l.i;
});
hasCollisions = collisions.length > 0; // If we're colliding, we need adjust the placeholder.
if (hasCollisions) {
// adjust w && h to maximum allowed space
var leastX = Infinity,
leastY = Infinity;
collisions.forEach(function (layoutItem) {
if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
});
if (Number.isFinite(leastX)) l.w = leastX - l.x;
if (Number.isFinite(leastY)) l.h = leastY - l.y;
}
}
if (!hasCollisions) {
// Set new width and height.
l.w = w;
l.h = h;
} // Create placeholder element (display only)
var placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
static: true,
i: i
};
this.props.onResize(layout, oldResizeItem, l, placeholder, e, node); // Re-compact the layout and set the drag placeholder.
this.setState({
layout: (0, utils.compact)(layout, (0, utils.compactType)(this.props), cols),
activeDrag: placeholder
});
}
}, {
key: "onResizeStop",
value: function onResizeStop(i
/*: string*/
, w
/*: number*/
, h
/*: number*/
, _ref6) {
var e = _ref6.e,
node = _ref6.node;
var _this$state2 = this.state,
layout = _this$state2.layout,
oldResizeItem = _this$state2.oldResizeItem;
var cols = this.props.cols;
var l = (0, utils.getLayoutItem)(layout, i);
this.props.onResizeStop(layout, oldResizeItem, l, null, e, node); // Set state
var newLayout = (0, utils.compact)(layout, (0, utils.compactType)(this.props), cols);
var oldLayout = this.state.oldLayout;
this.setState({
activeDrag: null,
layout: newLayout,
oldResizeItem: null,
oldLayout: null
});
this.onLayoutMaybeChanged(newLayout, oldLayout);
}
/**
* Create a placeholder object.
* @return {Element} Placeholder div.
*/
}, {
key: "placeholder",
value: function placeholder()
/*: ?ReactElement<any>*/
{
var activeDrag = this.state.activeDrag;
if (!activeDrag) return null;
var _this$props5 = this.props,
width = _this$props5.width,
cols = _this$props5.cols,
margin = _this$props5.margin,
containerPadding = _this$props5.containerPadding,
rowHeight = _this$props5.rowHeight,
maxRows = _this$props5.maxRows,
useCSSTransforms = _this$props5.useCSSTransforms,
transformScale = _this$props5.transformScale; // {...this.state.activeDrag} is pretty slow, actually
return /*#__PURE__*/_react.default.createElement(_GridItem.default, {
w: activeDrag.w,
h: activeDrag.h,
x: activeDrag.x,
y: activeDrag.y,
i: activeDrag.i,
className: "react-grid-placeholder",
containerWidth: width,
cols: cols,
margin: margin,
containerPadding: containerPadding || margin,
maxRows: maxRows,
rowHeight: rowHeight,
isDraggable: false,
isResizable: false,
isBounded: false,
useCSSTransforms: useCSSTransforms,
transformScale: transformScale
}, /*#__PURE__*/_react.default.createElement("div", null));
}
/**
* Given a grid item, set its style attributes & surround in a <Draggable>.
* @param {Element} child React element.
* @return {Element} Element wrapped in draggable and properly placed.
*/
}, {
key: "processGridItem",
value: function processGridItem(child
/*: ReactElement<any>*/
, isDroppingItem
/*: boolean*/
)
/*: ?ReactElement<any>*/
{
if (!child || !child.key) return;
var l = (0, utils.getLayoutItem)(this.state.layout, String(child.key));
if (!l) return null;
var _this$props6 = this.props,
width = _this$props6.width,
cols = _this$props6.cols,
margin = _this$props6.margin,
containerPadding = _this$props6.containerPadding,
rowHeight = _this$props6.rowHeight,
maxRows = _this$props6.maxRows,
isDraggable = _this$props6.isDraggable,
isResizable = _this$props6.isResizable,
isBounded = _this$props6.isBounded,
useCSSTransforms = _this$props6.useCSSTransforms,
transformScale = _this$props6.transformScale,
draggableCancel = _this$props6.draggableCancel,
draggableHandle = _this$props6.draggableHandle,
resizeHandles = _this$props6.resizeHandles;
var _this$state3 = this.state,
mounted = _this$state3.mounted,
droppingPosition = _this$state3.droppingPosition; // Determine user manipulations possible.
// If an item is static, it can't be manipulated by default.
// Any properties defined directly on the grid item will take precedence.
var draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
var resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
var resizeHandlesOptions = l.resizeHandles || resizeHandles; // isBounded set on child if set on parent, and child is not explicitly false
var bounded = draggable && isBounded && l.isBounded !== false;
return /*#__PURE__*/_react.default.createElement(_GridItem.default, {
containerWidth: width,
cols: cols,
margin: margin,
containerPadding: containerPadding || margin,
maxRows: maxRows,
rowHeight: rowHeight,
cancel: draggableCancel,
handle: draggableHandle,
onDragStop: this.onDragStop,
onDragStart: this.onDragStart,
onDrag: this.onDrag,
onResizeStart: this.onResizeStart,
onResize: this.onResize,
onResizeStop: this.onResizeStop,
isDraggable: draggable,
isResizable: resizable,
isBounded: bounded,
useCSSTransforms: useCSSTransforms && mounted,
usePercentages: !mounted,
transformScale: transformScale,
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i: l.i,
minH: l.minH,
minW: l.minW,
maxH: l.maxH,
maxW: l.maxW,
static: l.static,
droppingPosition: isDroppingItem ? droppingPosition : undefined,
resizeHandles: resizeHandlesOptions
}, child);
} // Called while dragging an element. Part of browser native drag/drop API.
// Native event target might be the layout itself, or an element within the layout.
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props7 = this.props,
className = _this$props7.className,
style = _this$props7.style,
isDroppable = _this$props7.isDroppable,
innerRef = _this$props7.innerRef;
var mergedClassName = (0, _classnames.default)(layoutClassName, className);
var mergedStyle = _objectSpread({
height: this.containerHeight()
}, style);
return /*#__PURE__*/_react.default.createElement("div", {
ref: innerRef,
className: mergedClassName,
style: mergedStyle,
onDrop: isDroppable ? this.onDrop : utils.noop,
onDragLeave: isDroppable ? this.onDragLeave : utils.noop,
onDragEnter: isDroppable ? this.onDragEnter : utils.noop,
onDragOver: isDroppable ? this.onDragOver : utils.noop
}, _react.default.Children.map(this.props.children, function (child) {
return _this2.processGridItem(child);
}), isDroppable && this.state.droppingDOMNode && this.processGridItem(this.state.droppingDOMNode, true), this.placeholder());
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps
/*: Props*/
, prevState
/*: State*/
) {
var newLayoutBase;
if (prevState.activeDrag) {
return null;
} // Legacy support for compactType
// Allow parent to set layout directly.
if (!(0, _lodash.default)(nextProps.layout, prevState.propsLayout) || nextProps.compactType !== prevState.compactType) {
newLayoutBase = nextProps.layout;
} else if (!(0, utils.childrenEqual)(nextProps.children, prevState.children)) {
// If children change, also regenerate the layout. Use our state
// as the base in case because it may be more up to date than
// what is in props.
newLayoutBase = prevState.layout;
} // We need to regenerate the layout.
if (newLayoutBase) {
var newLayout = (0, utils.synchronizeLayoutWithChildren)(newLayoutBase, nextProps.children, nextProps.cols, (0, utils.compactType)(nextProps));
return {
layout: newLayout,
// We need to save these props to state for using
// getDerivedStateFromProps instead of componentDidMount (in which we would get extra rerender)
compactType: nextProps.compactType,
children: nextProps.children,
propsLayout: nextProps.layout
};
}
return null;
}
}]);
return ReactGridLayout;
}(_react.default.Component);
exports.default = ReactGridLayout;
_defineProperty(ReactGridLayout, "displayName", "ReactGridLayout");
_defineProperty(ReactGridLayout, "propTypes", _ReactGridLayoutPropTypes.default);
_defineProperty(ReactGridLayout, "defaultProps", {
autoSize: true,
cols: 12,
className: "",
style: {},
draggableHandle: "",
draggableCancel: "",
containerPadding: null,
rowHeight: 150,
maxRows: Infinity,
// infinite vertical growth
layout: [],
margin: [10, 10],
isBounded: false,
isDraggable: true,
isResizable: true,
isDroppable: false,
useCSSTransforms: true,
transformScale: 1,
verticalCompact: true,
compactType: "vertical",
preventCollision: false,
droppingItem: {
i: "__dropping-elem__",
h: 1,
w: 1
},
resizeHandles: ["se"],
onLayoutChange: utils.noop,
onDragStart: utils.noop,
onDrag: utils.noop,
onDragStop: utils.noop,
onResizeStart: utils.noop,
onResize: utils.noop,
onResizeStop: utils.noop,
onDrop: utils.noop
});
});
unwrapExports(ReactGridLayout_1);
var responsiveUtils = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getBreakpointFromWidth = getBreakpointFromWidth;
exports.getColsFromBreakpoint = getColsFromBreakpoint;
exports.findOrGenerateResponsiveLayout = findOrGenerateResponsiveLayout;
exports.sortBreakpoints = sortBreakpoints;
/**
* Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).
*
* @param {Object} breakpoints Breakpoints object (e.g. {lg: 1200, md: 960, ...})
* @param {Number} width Screen width.
* @return {String} Highest breakpoint that is less than width.
*/
function getBreakpointFromWidth(breakpoints
/*: Breakpoints<Breakpoint>*/
, width
/*: number*/
)
/*: Breakpoint*/
{
var sorted = sortBreakpoints(breakpoints);
var matching = sorted[0];
for (var i = 1, len = sorted.length; i < len; i++) {
var breakpointName = sorted[i];
if (width > breakpoints[breakpointName]) matching = breakpointName;
}
return matching;
}
/**
* Given a breakpoint, get the # of cols set for it.
* @param {String} breakpoint Breakpoint name.
* @param {Object} cols Map of breakpoints to cols.
* @return {Number} Number of cols.
*/
function getColsFromBreakpoint(breakpoint
/*: Breakpoint*/
, cols
/*: Breakpoints<Breakpoint>*/
)
/*: number*/
{
if (!cols[breakpoint]) {
throw new Error("ResponsiveReactGridLayout: `cols` entry for breakpoint " + breakpoint + " is missing!");
}
return cols[breakpoint];
}
/**
* Given existing layouts and a new breakpoint, find or generate a new layout.
*
* This finds the layout above the new one and generates from it, if it exists.
*
* @param {Object} layouts Existing layouts.
* @param {Array} breakpoints All breakpoints.
* @param {String} breakpoint New breakpoint.
* @param {String} breakpoint Last breakpoint (for fallback).
* @param {Number} cols Column count at new breakpoint.
* @param {Boolean} verticalCompact Whether or not to compact the layout
* vertically.
* @return {Array} New layout.
*/
function findOrGenerateResponsiveLayout(layouts
/*: ResponsiveLayout<Breakpoint>*/
, breakpoints
/*: Breakpoints<Breakpoint>*/
, breakpoint
/*: Breakpoint*/
, lastBreakpoint
/*: Breakpoint*/
, cols
/*: number*/
, compactType
/*: CompactType*/
)
/*: Layout*/
{
// If it already exists, just return it.
if (layouts[breakpoint]) return (0, utils.cloneLayout)(layouts[breakpoint]); // Find or generate the next layout
var layout = layouts[lastBreakpoint];
var breakpointsSorted = sortBreakpoints(breakpoints);
var breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint));
for (var i = 0, len = breakpointsAbove.length; i < len; i++) {
var b = breakpointsAbove[i];
if (layouts[b]) {
layout = layouts[b];
break;
}
}
layout = (0, utils.cloneLayout)(layout || []); // clone layout so we don't modify existing items
return (0, utils.compact)((0, utils.correctBounds)(layout, {
cols: cols
}), compactType, cols);
}
/**
* Given breakpoints, return an array of breakpoints sorted by width. This is usually
* e.g. ['xxs', 'xs', 'sm', ...]
*
* @param {Object} breakpoints Key/value pair of breakpoint names to widths.
* @return {Array} Sorted breakpoints.
*/
function sortBreakpoints(breakpoints
/*: Breakpoints<Breakpoint>*/
)
/*: Array<Breakpoint>*/
{
var keys
/*: Array<string>*/
= Object.keys(breakpoints);
return keys.sort(function (a, b) {
return breakpoints[a] - breakpoints[b];
});
}
});
unwrapExports(responsiveUtils);
var ResponsiveReactGridLayout_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React$1 = _interopRequireWildcard(React);
var _propTypes = _interopRequireDefault(propTypes);
var _lodash = _interopRequireDefault(lodash_isequal);
var _ReactGridLayout = _interopRequireDefault(ReactGridLayout_1);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var type = function type(obj) {
return Object.prototype.toString.call(obj);
};
/**
* Get a value of margin or containerPadding.
*
* @param {Array | Object} param Margin | containerPadding, e.g. [10, 10] | {lg: [10, 10], ...}.
* @param {String} breakpoint Breakpoint: lg, md, sm, xs and etc.
* @return {Array}
*/
function getIndentationValue
/*:: <T: ?[number, number]>*/
(param
/*: { [key: string]: T } | T*/
, breakpoint
/*: string*/
)
/*: T*/
{
// $FlowIssue doesn't seem to understand this
if (param == null) return null;
return Array.isArray(param) ? param : param[breakpoint];
}
/*:: type State = {
layout: Layout,
breakpoint: string,
cols: number,
layouts?: { [key: string]: Layout }
};*/
/*:: type Props<Breakpoint: string = string> = {|
...React.ElementConfig<typeof ReactGridLayout>,
// Responsive config
breakpoint?: ?Breakpoint,
breakpoints: Breakpoints<Breakpoint>,
cols: { [key: Breakpoint]: number },
layouts: ResponsiveLayout<Breakpoint>,
width: number,
margin: { [key: Breakpoint]: [number, number] } | [number, number],
/* prettier-ignore *-/
containerPadding: { [key: Breakpoint]: ?[number, number] } | ?[number, number],
// Callbacks
onBreakpointChange: (Breakpoint, cols: number) => void,
onLayoutChange: (Layout, { [key: Breakpoint]: Layout }) => void,
onWidthChange: (
containerWidth: number,
margin: [number, number],
cols: number,
containerPadding: ?[number, number]
) => void
|};*/
var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
_inherits(ResponsiveReactGridLayout, _React$Component);
var _super = _createSuper(ResponsiveReactGridLayout);
function ResponsiveReactGridLayout() {
var _this;
_classCallCheck(this, ResponsiveReactGridLayout);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", _this.generateInitialState());
_defineProperty(_assertThisInitialized(_this), "onLayoutChange", function (layout
/*: Layout*/
) {
_this.props.onLayoutChange(layout, _objectSpread(_objectSpread({}, _this.props.layouts), {}, _defineProperty({}, _this.state.breakpoint, layout)));
});
return _this;
}
_createClass(ResponsiveReactGridLayout, [{
key: "generateInitialState",
value: function generateInitialState()
/*: State*/
{
var _this$props = this.props,
width = _this$props.width,
breakpoints = _this$props.breakpoints,
layouts = _this$props.layouts,
cols = _this$props.cols;
var breakpoint = (0, responsiveUtils.getBreakpointFromWidth)(breakpoints, width);
var colNo = (0, responsiveUtils.getColsFromBreakpoint)(breakpoint, cols); // verticalCompact compatibility, now deprecated
var compactType = this.props.verticalCompact === false ? null : this.props.compactType; // Get the initial layout. This can tricky; we try to generate one however possible if one doesn't exist
// for this layout.
var initialLayout = (0, responsiveUtils.findOrGenerateResponsiveLayout)(layouts, breakpoints, breakpoint, breakpoint, colNo, compactType);
return {
layout: initialLayout,
breakpoint: breakpoint,
cols: colNo
};
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps
/*: Props<*>*/
) {
// Allow parent to set width or breakpoint directly.
if (this.props.width != prevProps.width || this.props.breakpoint !== prevProps.breakpoint || !(0, _lodash.default)(this.props.breakpoints, prevProps.breakpoints) || !(0, _lodash.default)(this.props.cols, prevProps.cols)) {
this.onWidthChange(prevProps);
}
} // wrap layouts so we do not need to pass layouts to child
}, {
key: "onWidthChange",
/**
* When the width changes work through breakpoints and reset state with the new width & breakpoint.
* Width changes are necessary to figure out the widget widths.
*/
value: function onWidthChange(prevProps
/*: Props<*>*/
) {
var _this$props2 = this.props,
breakpoints = _this$props2.breakpoints,
cols = _this$props2.cols,
layouts = _this$props2.layouts,
compactType = _this$props2.compactType;
var newBreakpoint = this.props.breakpoint || (0, responsiveUtils.getBreakpointFromWidth)(this.props.breakpoints, this.props.width);
var lastBreakpoint = this.state.breakpoint;
var newCols
/*: number*/
= (0, responsiveUtils.getColsFromBreakpoint)(newBreakpoint, cols);
var newLayouts = _objectSpread({}, layouts); // Breakpoint change
if (lastBreakpoint !== newBreakpoint || prevProps.breakpoints !== breakpoints || prevProps.cols !== cols) {
// Preserve the current layout if the current breakpoint is not present in the next layouts.
if (!(lastBreakpoint in newLayouts)) newLayouts[lastBreakpoint] = (0, utils.cloneLayout)(this.state.layout); // Find or generate a new layout.
var layout = (0, responsiveUtils.findOrGenerateResponsiveLayout)(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType); // This adds missing items.
layout = (0, utils.synchronizeLayoutWithChildren)(layout, this.props.children, newCols, compactType); // Store the new layout.
newLayouts[newBreakpoint] = layout; // callbacks
this.props.onLayoutChange(layout, newLayouts);
this.props.onBreakpointChange(newBreakpoint, newCols);
this.setState({
breakpoint: newBreakpoint,
layout: layout,
cols: newCols
});
}
var margin = getIndentationValue(this.props.margin, newBreakpoint);
var containerPadding = getIndentationValue(this.props.containerPadding, newBreakpoint); //call onWidthChange on every change of width, not only on breakpoint changes
this.props.onWidthChange(this.props.width, margin, newCols, containerPadding);
}
}, {
key: "render",
value: function render() {
/* eslint-disable no-unused-vars */
var _this$props3 = this.props,
margin = _this$props3.margin,
containerPadding = _this$props3.containerPadding,
other = _objectWithoutProperties(_this$props3, ["breakpoint", "breakpoints", "cols", "layouts", "margin", "containerPadding", "onBreakpointChange", "onLayoutChange", "onWidthChange"]);
/* eslint-enable no-unused-vars */
return /*#__PURE__*/React$1.createElement(_ReactGridLayout.default, _extends({}, other, {
margin: getIndentationValue(margin, this.state.breakpoint),
containerPadding: getIndentationValue(containerPadding, this.state.breakpoint),
onLayoutChange: this.onLayoutChange,
layout: this.state.layout,
cols: this.state.cols
}));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps
/*: Props<*>*/
, prevState
/*: State*/
) {
if (!(0, _lodash.default)(nextProps.layouts, prevState.layouts)) {
// Allow parent to set layouts directly.
var breakpoint = prevState.breakpoint,
_cols = prevState.cols; // Since we're setting an entirely new layout object, we must generate a new responsive layout
// if one does not exist.
var newLayout = (0, responsiveUtils.findOrGenerateResponsiveLayout)(nextProps.layouts, nextProps.breakpoints, breakpoint, breakpoint, _cols, nextProps.compactType);
return {
layout: newLayout,
layouts: nextProps.layouts
};
}
return null;
}
}]);
return ResponsiveReactGridLayout;
}(React$1.Component);
exports.default = ResponsiveReactGridLayout;
_defineProperty(ResponsiveReactGridLayout, "propTypes", {
//
// Basic props
//
// Optional, but if you are managing width yourself you may want to set the breakpoint
// yourself as well.
breakpoint: _propTypes.default.string,
// {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}
breakpoints: _propTypes.default.object,
// # of cols. This is a breakpoint -> cols map
cols: _propTypes.default.object,
// # of margin. This is a breakpoint -> margin map
// e.g. { lg: [5, 5], md: [10, 10], sm: [15, 15] }
// Margin between items [x, y] in px
// e.g. [10, 10]
margin: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]),
// # of containerPadding. This is a breakpoint -> containerPadding map
// e.g. { lg: [5, 5], md: [10, 10], sm: [15, 15] }
// Padding inside the container [x, y] in px
// e.g. [10, 10]
containerPadding: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]),
// layouts is an object mapping breakpoints to layouts.
// e.g. {lg: Layout, md: Layout, ...}
layouts: function layouts(props
/*: Props<>*/
, propName
/*: string*/
) {
if (type(props[propName]) !== "[object Object]") {
throw new Error("Layout property must be an object. Received: " + type(props[propName]));
}
Object.keys(props[propName]).forEach(function (key) {
if (!(key in props.breakpoints)) {
throw new Error("Each key in layouts must align with a key in breakpoints.");
}
(0, utils.validateLayout)(props.layouts[key], "layouts." + key);
});
},
// The width of this component.
// Required in this propTypes stanza because generateInitialState() will fail without it.
width: _propTypes.default.number.isRequired,
//
// Callbacks
//
// Calls back with breakpoint and new # cols
onBreakpointChange: _propTypes.default.func,
// Callback so you can save the layout.
// Calls back with (currentLayout, allLayouts). allLayouts are keyed by breakpoint.
onLayoutChange: _propTypes.default.func,
// Calls back with (containerWidth, margin, cols, containerPadding)
onWidthChange: _propTypes.default.func
});
_defineProperty(ResponsiveReactGridLayout, "defaultProps", {
breakpoints: {
lg: 1200,
md: 996,
sm: 768,
xs: 480,
xxs: 0
},
cols: {
lg: 12,
md: 10,
sm: 6,
xs: 4,
xxs: 2
},
layouts: {},
margin: [10, 10],
containerPadding: {
lg: null,
md: null,
sm: null,
xs: null,
xxs: null
},
onBreakpointChange: utils.noop,
onLayoutChange: utils.noop,
onWidthChange: utils.noop
});
});
unwrapExports(ResponsiveReactGridLayout_1);
var WidthProvider_1 = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = WidthProvider;
var React$1 = _interopRequireWildcard(React);
var _propTypes = _interopRequireDefault(propTypes);
var _reactDom = _interopRequireDefault(reactDom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
/*
* A simple HOC that provides facility for listening to container resizes.
*
* The Flow type is pretty janky here. I can't just spread `WPProps` into this returned object - I wish I could - but it triggers
* a flow bug of some sort that causes it to stop typechecking.
*/
function WidthProvider
/*:: <Config>*/
(ComposedComponent
/*: React.AbstractComponent<Config>*/
)
/*: React.AbstractComponent<{|
...Config,
measureBeforeMount?: boolean,
className?: string,
style?: Object,
width?: number
|}>*/
{
var _class, _temp;
return _temp = _class = /*#__PURE__*/function (_React$Component) {
_inherits(WidthProvider, _React$Component);
var _super = _createSuper(WidthProvider);
function WidthProvider() {
var _this;
_classCallCheck(this, WidthProvider);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
width: 1280
});
_defineProperty(_assertThisInitialized(_this), "mounted", false);
_defineProperty(_assertThisInitialized(_this), "onWindowResize", function () {
if (!_this.mounted) return; // eslint-disable-next-line react/no-find-dom-node
var node = _reactDom.default.findDOMNode(_assertThisInitialized(_this)); // Flow casts this to Text | Element
if (node instanceof HTMLElement) _this.setState({
width: node.offsetWidth
});
});
return _this;
}
_createClass(WidthProvider, [{
key: "componentDidMount",
value: function componentDidMount() {
this.mounted = true;
window.addEventListener("resize", this.onWindowResize); // Call to properly set the breakpoint and resize the elements.
// Note that if you're doing a full-width element, this can get a little wonky if a scrollbar
// appears because of the grid. In that case, fire your own resize event, or set `overflow: scroll` on your body.
this.onWindowResize();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.mounted = false;
window.removeEventListener("resize", this.onWindowResize);
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
measureBeforeMount = _this$props.measureBeforeMount,
rest = _objectWithoutProperties(_this$props, ["measureBeforeMount"]);
if (measureBeforeMount && !this.mounted) {
return /*#__PURE__*/React$1.createElement("div", {
className: this.props.className,
style: this.props.style
});
}
return /*#__PURE__*/React$1.createElement(ComposedComponent, _extends({}, rest, this.state));
}
}]);
return WidthProvider;
}(React$1.Component), _defineProperty(_class, "defaultProps", {
measureBeforeMount: false
}), _defineProperty(_class, "propTypes", {
// If true, will not render children until mounted. Useful for getting the exact width before
// rendering, to prevent any unsightly resizing.
measureBeforeMount: _propTypes.default.bool
}), _temp;
}
});
unwrapExports(WidthProvider_1);
var reactGridLayout = createCommonjsModule(function (module) {
module.exports = ReactGridLayout_1.default;
module.exports.utils = utils;
module.exports.Responsive = ResponsiveReactGridLayout_1.default;
module.exports.Responsive.utils = responsiveUtils;
module.exports.WidthProvider = WidthProvider_1.default;
});
var PluginGrid = function PluginGrid() {
var layout = [{
i: 'a',
x: 0,
y: 0,
w: 1,
h: 2,
"static": true
}, {
i: 'b',
x: 1,
y: 0,
w: 3,
h: 2,
minW: 2,
maxW: 4
}, {
i: 'c',
x: 4,
y: 0,
w: 1,
h: 2
}];
return React.createElement(reactGridLayout, {
className: "layout",
layout: layout,
cols: 12,
rowHeight: 30,
width: 1200
}, React.createElement("div", {
key: "a"
}, "a"), React.createElement("div", {
key: "b"
}, "b"), React.createElement("div", {
key: "c"
}, "c"));
};
window['PluginGrid'] = PluginGrid;
//# sourceMappingURL=index.js.map
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment