@flatbiz/antd
Version:
1,255 lines (1,198 loc) • 73.3 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { isString } from '@dimjs/lang/is-string';
import _CloseOutlined from '@ant-design/icons/es/icons/CloseOutlined.js';
import { classNames } from '@dimjs/utils/class-names/class-names';
import { isNumber } from '@dimjs/lang/is-number';
import { b as _objectSpread2, i as _defineProperty, e as _inherits, f as _createClass, g as _classCallCheck, h as _callSuper, a as _slicedToArray, _ as _objectWithoutProperties } from './_rollupPluginBabelHelpers-BspM60Sw.js';
import require$$0, { useState, useMemo } from 'react';
import { createRoot } from 'react-dom/client';
import { g as getDefaultExportFromCjs } from './_commonjsHelpers-a3yINl_6.js';
import 'react-is';
import require$$2 from 'react-dom';
import { useMemoizedFn, useSize } from 'ahooks';
import { Form, Space } from 'antd';
import { dom } from '@flatbiz/utils';
import { B as ButtonWrapper } from './button-wrapper-BGjkUPpk.js';
import { fbaHooks } from './fba-hooks/index.js';
import { G as Gap } from './gap-5v_ndf2v.js';
import { I as IconWrapper } from './icon-wrapper-DE97bI14.js';
import { jsx, jsxs } from 'react/jsx-runtime';
var cjs = {exports: {}};
var Draggable$1 = {};
var propTypes = {exports: {}};
/**
* 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_1;
var hasRequiredReactPropTypesSecret;
function requireReactPropTypesSecret() {
if (hasRequiredReactPropTypesSecret) return ReactPropTypesSecret_1;
hasRequiredReactPropTypesSecret = 1;
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
ReactPropTypesSecret_1 = ReactPropTypesSecret;
return ReactPropTypesSecret_1;
}
/**
* 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 factoryWithThrowingShims;
var hasRequiredFactoryWithThrowingShims;
function requireFactoryWithThrowingShims() {
if (hasRequiredFactoryWithThrowingShims) return factoryWithThrowingShims;
hasRequiredFactoryWithThrowingShims = 1;
var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
function emptyFunction() {}
function emptyFunctionWithReset() {}
emptyFunctionWithReset.resetWarningCache = emptyFunction;
factoryWithThrowingShims = function factoryWithThrowingShims() {
function shim(props, propName, componentName, location, propFullName, secret) {
if (secret === ReactPropTypesSecret) {
// 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,
bigint: 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;
};
return factoryWithThrowingShims;
}
/**
* 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 hasRequiredPropTypes;
function requirePropTypes() {
if (hasRequiredPropTypes) return propTypes.exports;
hasRequiredPropTypes = 1;
{
// By explicitly using `prop-types` you are opting into new production behavior.
// http://fb.me/prop-types-in-prod
propTypes.exports = /*@__PURE__*/requireFactoryWithThrowingShims()();
}
return propTypes.exports;
}
var clsx = {exports: {}};
var hasRequiredClsx;
function requireClsx() {
if (hasRequiredClsx) return clsx.exports;
hasRequiredClsx = 1;
function r(e) {
var o,
t,
f = "";
if ("string" == typeof e || "number" == typeof e) f += e;else if ("object" == typeof e) if (Array.isArray(e)) {
var n = e.length;
for (o = 0; o < n; o++) e[o] && (t = r(e[o])) && (f && (f += " "), f += t);
} else for (t in e) e[t] && (f && (f += " "), f += t);
return f;
}
function e() {
for (var e, o, t = 0, f = "", n = arguments.length; t < n; t++) (e = arguments[t]) && (o = r(e)) && (f && (f += " "), f += o);
return f;
}
clsx.exports = e, clsx.exports.clsx = e;
return clsx.exports;
}
var domFns = {};
var shims = {};
var hasRequiredShims;
function requireShims() {
if (hasRequiredShims) return shims;
hasRequiredShims = 1;
Object.defineProperty(shims, "__esModule", {
value: true
});
shims.dontSetMe = dontSetMe;
shims.findInArray = findInArray;
shims.int = int;
shims.isFunction = isFunction;
shims.isNum = isNum;
// @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*/{
// $FlowIgnore[method-unbinding]
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*/) /*: ?Error*/{
if (props[propName]) {
return new Error("Invalid prop ".concat(propName, " passed to ").concat(componentName, " - do not set this, set it on the child."));
}
}
return shims;
}
var getPrefix = {};
var hasRequiredGetPrefix;
function requireGetPrefix() {
if (hasRequiredGetPrefix) return getPrefix;
hasRequiredGetPrefix = 1;
Object.defineProperty(getPrefix, "__esModule", {
value: true
});
getPrefix.browserPrefixToKey = browserPrefixToKey;
getPrefix.browserPrefixToStyle = browserPrefixToStyle;
getPrefix.default = void 0;
getPrefix.getPrefix = getPrefix$1;
var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
function getPrefix$1() /*: string*/{
var _window$document;
var prop /*: string*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transform';
// Ensure we're running in an environment where there is actually a global
// `window` obj
if (typeof window === 'undefined') return '';
// If we're in a pseudo-browser server-side environment, this access
// path may not exist, so bail out if it doesn't.
var style = (_window$document = window.document) === null || _window$document === void 0 || (_window$document = _window$document.documentElement) === null || _window$document === void 0 ? void 0 : _window$document.style;
if (!style) return '';
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`
getPrefix.default = getPrefix$1() /*: string*/;
return getPrefix;
}
var hasRequiredDomFns;
function requireDomFns() {
if (hasRequiredDomFns) return domFns;
hasRequiredDomFns = 1;
Object.defineProperty(domFns, "__esModule", {
value: true
});
domFns.addClassName = addClassName;
domFns.addEvent = addEvent;
domFns.addUserSelectStyles = addUserSelectStyles;
domFns.createCSSTransform = createCSSTransform;
domFns.createSVGTransform = createSVGTransform;
domFns.getTouch = getTouch;
domFns.getTouchIdentifier = getTouchIdentifier;
domFns.getTranslation = getTranslation;
domFns.innerHeight = innerHeight;
domFns.innerWidth = innerWidth;
domFns.matchesSelector = matchesSelector;
domFns.matchesSelectorAndParentsTo = matchesSelectorAndParentsTo;
domFns.offsetXYFromParent = offsetXYFromParent;
domFns.outerHeight = outerHeight;
domFns.outerWidth = outerWidth;
domFns.removeClassName = removeClassName;
domFns.removeEvent = removeEvent;
domFns.scheduleRemoveUserSelectStyles = scheduleRemoveUserSelectStyles;
var _shims = requireShims();
var _getPrefix = _interopRequireWildcard(requireGetPrefix());
function _interopRequireWildcard(e, t) {
if ("function" == typeof WeakMap) var r = new WeakMap(),
n = new WeakMap();
return (_interopRequireWildcard = function _interopRequireWildcard(e, t) {
if (!t && e && e.__esModule) return e;
var o,
i,
f = {
__proto__: null,
default: e
};
if (null === e || "object" != typeof e && "function" != typeof e) return f;
if (o = t ? n : r) {
if (o.has(e)) return o.get(e);
o.set(e, f);
}
for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]);
return f;
})(e, t);
}
/*:: import type {ControlPosition, PositionOffsetControlPosition, MouseTouchEvent} from './types';*/
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;
// $FlowIgnore[incompatible-type]
node = node.parentNode;
} while (node);
return false;
}
function addEvent(el /*: ?Node*/, event /*: string*/, handler /*: Function*/, inputOptions /*: Object*/) /*: void*/{
if (!el) return;
var options = _objectSpread2({
capture: true
}, inputOptions);
// $FlowIgnore[method-unbinding]
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 = _objectSpread2({
capture: true
}, inputOptions);
// $FlowIgnore[method-unbinding]
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;
}
/*:: interface EventWithOffset {
clientX: number, clientY: number
}*/
// Get from offsetParent
function offsetXYFromParent(evt /*: EventWithOffset*/, 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(_ref /*:: */, positionOffset /*: PositionOffsetControlPosition*/, unitSuffix /*: string*/) /*: string*/{
var x = _ref.x,
y = _ref.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 scheduleRemoveUserSelectStyles(doc /*: ?Document*/) {
// Prevent a possible "forced reflow"
if (window.requestAnimationFrame) {
window.requestAnimationFrame(function () {
removeUserSelectStyles(doc);
});
} else {
removeUserSelectStyles(doc);
}
}
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'), '');
}
}
return domFns;
}
var positionFns = {};
var hasRequiredPositionFns;
function requirePositionFns() {
if (hasRequiredPositionFns) return positionFns;
hasRequiredPositionFns = 1;
Object.defineProperty(positionFns, "__esModule", {
value: true
});
positionFns.canDragX = canDragX;
positionFns.canDragY = canDragY;
positionFns.createCoreData = createCoreData;
positionFns.createDraggableData = createDraggableData;
positionFns.getBoundPosition = getBoundPosition;
positionFns.getControlPosition = getControlPosition;
positionFns.snapToGrid = snapToGrid;
var _shims = requireShims();
var _domFns = requireDomFns();
/*:: import type Draggable from '../Draggable';*/
/*:: import type {Bounds, ControlPosition, DraggableData, MouseTouchEvent} from './types';*/
/*:: import type DraggableCore from '../DraggableCore';*/
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 {
// Flow assigns the wrong return type (Node) for getRootNode(),
// so we cast it to one of the correct types (Element).
// The others are Document and ShadowRoot.
// All three implement querySelector() so it's safe to call.
var rootNode = node.getRootNode() /*: any*/ /*: Element*/;
boundNode = rootNode.querySelector(bounds);
}
if (!(boundNode instanceof ownerWindow.HTMLElement)) {
throw new Error('Bounds selector "' + bounds + '" could not find an element.');
}
var boundNodeEl /*: HTMLElement*/ = boundNode; // for Flow, can't seem to refine correctly
var nodeStyle = ownerWindow.getComputedStyle(node);
var boundNodeStyle = ownerWindow.getComputedStyle(boundNodeEl);
// 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)(boundNodeEl) - (0, _domFns.outerWidth)(node) - node.offsetLeft + (0, _shims.int)(boundNodeStyle.paddingRight) - (0, _shims.int)(nodeStyle.marginRight),
bottom: (0, _domFns.innerHeight)(boundNodeEl) - (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 isStart = !(0, _shims.isNum)(draggable.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 - draggable.lastX,
deltaY: y - draggable.lastY,
lastX: draggable.lastX,
lastY: draggable.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;
}
return positionFns;
}
var DraggableCore = {};
var log = {};
var hasRequiredLog;
function requireLog() {
if (hasRequiredLog) return log;
hasRequiredLog = 1;
Object.defineProperty(log, "__esModule", {
value: true
});
log.default = log$1;
/*eslint no-console:0*/
function log$1() {
}
return log;
}
var hasRequiredDraggableCore;
function requireDraggableCore() {
if (hasRequiredDraggableCore) return DraggableCore;
hasRequiredDraggableCore = 1;
Object.defineProperty(DraggableCore, "__esModule", {
value: true
});
DraggableCore.default = void 0;
var React = _interopRequireWildcard(require$$0);
var _propTypes = _interopRequireDefault(/*@__PURE__*/requirePropTypes());
var _reactDom = _interopRequireDefault(require$$2);
var _domFns = requireDomFns();
var _positionFns = requirePositionFns();
var _shims = requireShims();
var _log = _interopRequireDefault(requireLog());
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
};
}
function _interopRequireWildcard(e, t) {
if ("function" == typeof WeakMap) var r = new WeakMap(),
n = new WeakMap();
return (_interopRequireWildcard = function _interopRequireWildcard(e, t) {
if (!t && e && e.__esModule) return e;
var o,
i,
f = {
__proto__: null,
default: e
};
if (null === e || "object" != typeof e && "function" != typeof e) return f;
if (o = t ? n : r) {
if (o.has(e)) return o.get(e);
o.set(e, f);
}
for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]);
return f;
})(e, t);
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: true,
configurable: true,
writable: true
}) : e[r] = t, e;
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r);
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
/*:: import type {EventHandler, MouseTouchEvent} from './utils/types';*/
/*:: import type {Element as ReactElement} from 'react';*/
// 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;
/*:: 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 | false;*/
/*:: export type ControlPosition = {x: number, y: number};*/
/*:: export type PositionOffsetControlPosition = {x: number|string, y: number|string};*/
/*:: export type DraggableCoreDefaultProps = {
allowAnyClick: boolean,
allowMobileScroll: boolean,
disabled: boolean,
enableUserSelectHack: boolean,
onStart: DraggableEventHandler,
onDrag: DraggableEventHandler,
onStop: DraggableEventHandler,
onMouseDown: (e: MouseEvent) => void,
scale: number,
};*/
/*:: export type DraggableCoreProps = {
...DraggableCoreDefaultProps,
cancel: string,
children: ReactElement<any>,
offsetParent: HTMLElement,
grid: [number, number],
handle: string,
nodeRef?: ?React.ElementRef<any>,
};*/
//
// 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$1 = /*#__PURE__*/function (_React$Component) {
function DraggableCore() {
var _this;
_classCallCheck(this, DraggableCore);
_this = _callSuper(this, DraggableCore, arguments);
_defineProperty(_this, "dragging", false);
// Used while dragging to determine deltas.
_defineProperty(_this, "lastX", NaN);
_defineProperty(_this, "lastY", NaN);
_defineProperty(_this, "touchIdentifier", null);
_defineProperty(_this, "mounted", false);
_defineProperty(_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' && !_this.props.allowMobileScroll) 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.touchIdentifier = touchIdentifier;
// Get the current drag point from the event. This is used as the offset.
var position = (0, _positionFns.getControlPosition)(e, touchIdentifier, _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)(_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.dragging = true;
_this.lastX = x;
_this.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(_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.touchIdentifier, _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.lastX,
deltaY = y - _this.lastY;
var _ref = (0, _positionFns.snapToGrid)(_this.props.grid, deltaX, deltaY);
var _ref2 = _slicedToArray(_ref, 2);
deltaX = _ref2[0];
deltaY = _ref2[1];
if (!deltaX && !deltaY) return; // skip useless drag
x = _this.lastX + deltaX, y = _this.lastY + deltaY;
}
var coreEvent = (0, _positionFns.createCoreData)(_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.lastX = x;
_this.lastY = y;
});
_defineProperty(_this, "handleDragStop", function (e) {
if (!_this.dragging) return;
var position = (0, _positionFns.getControlPosition)(e, _this.touchIdentifier, _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.lastX || 0;
var deltaY = y - _this.lastY || 0;
var _ref3 = (0, _positionFns.snapToGrid)(_this.props.grid, deltaX, deltaY);
var _ref4 = _slicedToArray(_ref3, 2);
deltaX = _ref4[0];
deltaY = _ref4[1];
x = _this.lastX + deltaX, y = _this.lastY + deltaY;
}
var coreEvent = (0, _positionFns.createCoreData)(_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.scheduleRemoveUserSelectStyles)(thisNode.ownerDocument);
}
(0, _log.default)('DraggableCore: handleDragStop: %j', coreEvent);
// Reset the el.
_this.dragging = false;
_this.lastX = NaN;
_this.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(_this, "onMouseDown", function (e) {
dragEventFor = eventsFor.mouse; // on touchscreen laptops we could switch back to mouse
return _this.handleDragStart(e);
});
_defineProperty(_this, "onMouseUp", function (e) {
dragEventFor = eventsFor.mouse;
return _this.handleDragStop(e);
});
// Same as onMouseDown (start drag), but now consider this a touch device.
_defineProperty(_this, "onTouchStart", function (e) {
// We're on a touch device now, so change the event handlers
dragEventFor = eventsFor.touch;
return _this.handleDragStart(e);
});
_defineProperty(_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;
}
_inherits(DraggableCore, _React$Component);
return _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.scheduleRemoveUserSelectStyles)(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*/{
var _this$props, _this$props2;
return (_this$props = this.props) !== null && _this$props !== void 0 && _this$props.nodeRef ? (_this$props2 = this.props) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.nodeRef) === null || _this$props2 === void 0 ? void 0 : _this$props2.current : _reactDom.default.findDOMNode(this);
}
}, {
key: "render",
value: function render() /*: React.Element<any>*/{
// Reuse the child provided
// This makes it flexible to use whatever element is wanted (div, ul, etc)
return /*#__PURE__*/React.cloneElement(React.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
});
}
}]);
}(React.Component /*:: <DraggableCoreProps>*/);
DraggableCore.default = DraggableCore$1;
_defineProperty(DraggableCore$1, "displayName", 'DraggableCore');
_defineProperty(DraggableCore$1, "propTypes", {
/**
* `allowAnyClick` allows dragging using any mouse button.
* By default, we only accept the left button.
*
* Defaults to `false`.
*/
allowAnyClick: _propTypes.default.bool,
/**
* `allowMobileScroll` turns off cancellation of the 'touchstart' event
* on mobile devices. Only enable this if you are having trouble with click
* events. Prefer using 'handle' / 'cancel' instead.
*
* Defaults to `false`.
*/
allowMobileScroll: _propTypes.default.bool,
children: _propTypes.default.node.isRequired,
/**
* `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$1, "defaultProps", {
allowAnyClick: false,
// by default only accept left click
allowMobileScroll: false,
disabled: false,
enableUserSelectHack: true,
onStart: function onStart() {},
onDrag: function onDrag() {},
onStop: function onStop() {},
onMouseDown: function onMouseDown() {},
scale: 1
});
return DraggableCore;
}
var _excluded = ["axis", "bounds", "children", "defaultPosition", "defaultClassName", "defaultClassNameDragging", "defaultClassNameDragged", "position", "positionOffset", "scale"];
var hasRequiredDraggable;
function requireDraggable() {
if (hasRequiredDraggable) return Draggable$1;
hasRequiredDraggable = 1;
(function (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 = _interopRequireWildcard(require$$0);
var _propTypes = _interopRequireDefault(/*@__PURE__*/requirePropTypes());
var _reactDom = _interopRequireDefault(require$$2);
var _clsx = requireClsx();
var _domFns = requireDomFns();
var _positionFns = requirePositionFns();
var _shims = requireShims();
var _DraggableCore = _interopRequireDefault(requireDraggableCore());
var _log = _interopRequireDefault(requireLog());
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
};
}
function _interopRequireWildcard(e, t) {
if ("function" == typeof WeakMap) var r = new WeakMap(),
n = new WeakMap();
return (_interopRequireWildcard = function _interopRequireWildcard(e, t) {
if (!t && e && e.__esModule) return e;
var o,
i,
f = {
__proto__: null,
default: e
};
if (null === e || "object" != typeof e && "function" != typeof e) return f;
if (o = t ? n : r) {
if (o.has(e)) return o.get(e);
o.set(e, f);
}
for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]);
return f;
})(e, t);
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _defineProperty$1(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: true,
configurable: true,
writable: true
}) : e[r] = t, e;
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r);
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
} /*:: import type {ControlPosition, PositionOffsetControlPosition, DraggableCoreProps, DraggableCoreDefaultProps} from './DraggableCore';*/
/*:: import type {Bounds, DraggableEventHandler} from './utils/types';*/
/*:: import type {Element as ReactElement} from 'react';*/
/*:: type DraggableState = {
dragging: boolean,
dragged: boolean,
x: number, y: number,