funda-ui 4.5.657 → 4.5.671
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ColorPicker/index.js +3 -1
- package/Date/index.d.ts +1 -0
- package/Date/index.js +17 -2
- package/DragDropList/index.css +188 -0
- package/DragDropList/index.d.ts +44 -0
- package/DragDropList/index.js +1587 -0
- package/Input/index.d.ts +2 -0
- package/Input/index.js +14 -1
- package/LICENSE +21 -0
- package/MasonryLayout/index.d.ts +2 -0
- package/MasonryLayout/index.js +115 -5
- package/MultipleSelect/index.css +237 -144
- package/MultipleSelect/index.d.ts +24 -10
- package/MultipleSelect/index.js +2240 -1225
- package/README.md +3 -1
- package/RangeSlider/index.js +14 -1
- package/Textarea/index.d.ts +2 -0
- package/Textarea/index.js +14 -1
- package/Tree/index.d.ts +1 -0
- package/Tree/index.js +29 -0
- package/Utils/useBoundedDrag.d.ts +125 -0
- package/Utils/useBoundedDrag.js +380 -0
- package/Utils/useDragDropPosition.d.ts +169 -0
- package/Utils/useDragDropPosition.js +456 -0
- package/Utils/useIsMobile.d.ts +2 -0
- package/Utils/useIsMobile.js +168 -0
- package/all.d.ts +1 -0
- package/all.js +1 -1
- package/lib/cjs/ColorPicker/index.js +3 -1
- package/lib/cjs/Date/index.d.ts +1 -0
- package/lib/cjs/Date/index.js +17 -2
- package/lib/cjs/DragDropList/index.d.ts +44 -0
- package/lib/cjs/DragDropList/index.js +1587 -0
- package/lib/cjs/Input/index.d.ts +2 -0
- package/lib/cjs/Input/index.js +14 -1
- package/lib/cjs/MasonryLayout/index.d.ts +2 -0
- package/lib/cjs/MasonryLayout/index.js +115 -5
- package/lib/cjs/MultipleSelect/index.d.ts +24 -10
- package/lib/cjs/MultipleSelect/index.js +2240 -1225
- package/lib/cjs/RangeSlider/index.js +14 -1
- package/lib/cjs/Textarea/index.d.ts +2 -0
- package/lib/cjs/Textarea/index.js +14 -1
- package/lib/cjs/Tree/index.d.ts +1 -0
- package/lib/cjs/Tree/index.js +29 -0
- package/lib/cjs/Utils/useBoundedDrag.d.ts +125 -0
- package/lib/cjs/Utils/useBoundedDrag.js +380 -0
- package/lib/cjs/Utils/useDragDropPosition.d.ts +169 -0
- package/lib/cjs/Utils/useDragDropPosition.js +456 -0
- package/lib/cjs/Utils/useIsMobile.d.ts +2 -0
- package/lib/cjs/Utils/useIsMobile.js +168 -0
- package/lib/cjs/index.d.ts +1 -0
- package/lib/cjs/index.js +1 -1
- package/lib/css/DragDropList/index.css +188 -0
- package/lib/css/MultipleSelect/index.css +237 -144
- package/lib/esm/ColorPicker/index.tsx +53 -49
- package/lib/esm/Date/index.tsx +3 -0
- package/lib/esm/DragDropList/index.scss +245 -0
- package/lib/esm/DragDropList/index.tsx +494 -0
- package/lib/esm/Input/index.tsx +17 -3
- package/lib/esm/MasonryLayout/index.tsx +125 -7
- package/lib/esm/MultipleSelect/index.scss +288 -183
- package/lib/esm/MultipleSelect/index.tsx +305 -166
- package/lib/esm/MultipleSelect/utils/func.ts +21 -1
- package/lib/esm/Tabs/Tabs.tsx +1 -1
- package/lib/esm/Textarea/index.tsx +18 -1
- package/lib/esm/Tree/TreeList.tsx +32 -0
- package/lib/esm/Tree/index.tsx +3 -0
- package/lib/esm/Utils/hooks/useBoundedDrag.tsx +301 -0
- package/lib/esm/Utils/hooks/useDragDropPosition.tsx +420 -0
- package/lib/esm/Utils/hooks/useIsMobile.tsx +56 -0
- package/lib/esm/index.js +1 -0
- package/package.json +1 -1
- package/lib/esm/MultipleSelect/ItemList.tsx +0 -323
package/README.md
CHANGED
|
@@ -39,7 +39,7 @@ Here is a table of the components and their status.
|
|
|
39
39
|
| [Counter ❏](packages/Counter/README.md) | [Cascading Select ✅](packages/CascadingSelect/README.md) | [Mode Switch ✅](packages/ModeSwitch/README.md) | | |
|
|
40
40
|
| [Hybrid Content Slider ❏](packages/HybridContentSlider/README.md) | [Cascading Select End-to-end ✅🔥](packages/CascadingSelectE2E/README.md) | [Custom Scrollbar ✅](packages/Scrollbar/README.md) | | |
|
|
41
41
|
| [Image Shapes ❏](packages/ImageShapes/README.md) | [Radio ✅](packages/Radio/README.md) | [Horizontal Scroll Content ✅](packages/HorizontalScrollContent/README.md) | | |
|
|
42
|
-
| [Lightbox ❏](packages/Lightbox/README.md) | [Checkbox ✅](packages/Checkbox/README.md) | | | |
|
|
42
|
+
| [Lightbox ❏](packages/Lightbox/README.md) | [Checkbox ✅](packages/Checkbox/README.md) | [DragDrop List ✅🔥](packages/DragDropList/README.md) | | |
|
|
43
43
|
| [List Bulleted ❏](packages/ListBulleted/README.md) | [Select ✅🔥](packages/Select/README.md) | | | |
|
|
44
44
|
| [Modal Dialog ✅🔥](packages/ModalDialog/README.md) | [Live Search ✅](packages/LiveSearch/README.md) | | | |
|
|
45
45
|
| [Pagination ✅](packages/Pagination/README.md) | [Number ❏](packages/Number/README.md) | | | |
|
|
@@ -63,6 +63,8 @@ Here is a table of the components and their status.
|
|
|
63
63
|
|
|
64
64
|
|
|
65
65
|
|
|
66
|
+
|
|
67
|
+
|
|
66
68
|
## Usage
|
|
67
69
|
|
|
68
70
|
**Step 1**. You need to install it:
|
package/RangeSlider/index.js
CHANGED
|
@@ -1021,7 +1021,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|
|
1021
1021
|
var funda_utils_dist_cjs_useDebounce__WEBPACK_IMPORTED_MODULE_4__ = __nested_webpack_require_41372__(702);
|
|
1022
1022
|
/* harmony import */
|
|
1023
1023
|
var funda_utils_dist_cjs_useDebounce__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__nested_webpack_require_41372__.n(funda_utils_dist_cjs_useDebounce__WEBPACK_IMPORTED_MODULE_4__);
|
|
1024
|
-
var _excluded = ["contentRef", "wrapperClassName", "controlClassName", "controlExClassName", "controlGroupWrapperClassName", "controlGroupTextClassName", "type", "disabled", "required", "placeholder", "pattern", "readOnly", "defaultValue", "value", "requiredLabel", "label", "units", "name", "step", "min", "max", "src", "size", "minLength", "maxLength", "alt", "inputMode", "id", "appendControl", "aiPredict", "aiPredictRemainingTextRGB", "aiPredictConfirmKey", "aiPredictFetchFuncAsync", "aiPredictFetchFuncMethod", "aiPredictFetchFuncMethodParams", "aiPredictFetchCallback", "iconLeft", "iconRight", "autoComplete", "autoCapitalize", "spellCheck", "style", "tabIndex", "onChangeCallback", "onInputCallback", "onKeyPressedCallback", "onChange", "onBlur", "onFocus", "onPressEnter"];
|
|
1024
|
+
var _excluded = ["contentRef", "wrapperClassName", "controlClassName", "controlExClassName", "controlGroupWrapperClassName", "controlGroupTextClassName", "type", "disabled", "required", "placeholder", "pattern", "readOnly", "defaultValue", "value", "requiredLabel", "label", "units", "name", "step", "min", "max", "src", "size", "minLength", "maxLength", "alt", "inputMode", "id", "appendControl", "aiPredict", "aiPredictRemainingTextRGB", "aiPredictConfirmKey", "aiPredictFetchFuncAsync", "aiPredictFetchFuncMethod", "aiPredictFetchFuncMethodParams", "aiPredictFetchCallback", "iconLeft", "iconRight", "autoComplete", "autoCapitalize", "spellCheck", "style", "tabIndex", "onChangeCallback", "onInputCallback", "onKeyPressedCallback", "onChange", "onBlur", "onFocus", "onPressEnter", "onKeyDown", "onKeyUp"];
|
|
1025
1025
|
function _regeneratorRuntime() {
|
|
1026
1026
|
"use strict";
|
|
1027
1027
|
|
|
@@ -1521,6 +1521,8 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|
|
1521
1521
|
onBlur = props.onBlur,
|
|
1522
1522
|
onFocus = props.onFocus,
|
|
1523
1523
|
onPressEnter = props.onPressEnter,
|
|
1524
|
+
onKeyDown = props.onKeyDown,
|
|
1525
|
+
onKeyUp = props.onKeyUp,
|
|
1524
1526
|
attributes = _objectWithoutProperties(props, _excluded);
|
|
1525
1527
|
var uniqueID = funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_1___default()();
|
|
1526
1528
|
var idRes = id || uniqueID;
|
|
@@ -1726,6 +1728,12 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|
|
1726
1728
|
set: function set(value, cb) {
|
|
1727
1729
|
setChangedVal("".concat(value));
|
|
1728
1730
|
cb === null || cb === void 0 ? void 0 : cb();
|
|
1731
|
+
},
|
|
1732
|
+
aiPredictReset: function aiPredictReset() {
|
|
1733
|
+
setTimeout(function () {
|
|
1734
|
+
// Avoid conflicts with other asynchronous states, resulting in invalid clearing
|
|
1735
|
+
setCurrentSuggestion('');
|
|
1736
|
+
}, 0);
|
|
1729
1737
|
}
|
|
1730
1738
|
};
|
|
1731
1739
|
}, [contentRef]);
|
|
@@ -1789,6 +1797,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|
|
1789
1797
|
}
|
|
1790
1798
|
|
|
1791
1799
|
function handleKeyPressed(event) {
|
|
1800
|
+
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event, valRef.current);
|
|
1792
1801
|
if (typeof onKeyPressedCallback === 'function') {
|
|
1793
1802
|
var newData = onKeyPressedCallback(event, valRef.current);
|
|
1794
1803
|
if (newData) setChangedVal(newData); // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
|
|
@@ -1832,6 +1841,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|
|
1832
1841
|
setCurrentSuggestion(tempMatchedSuggestion[currentSuggestionIndex.current] || '');
|
|
1833
1842
|
}
|
|
1834
1843
|
}
|
|
1844
|
+
function handleKeyUp(event) {
|
|
1845
|
+
onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event, valRef.current);
|
|
1846
|
+
}
|
|
1835
1847
|
(0, react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
|
|
1836
1848
|
// update default value
|
|
1837
1849
|
//--------------
|
|
@@ -1923,6 +1935,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|
|
1923
1935
|
}
|
|
1924
1936
|
},
|
|
1925
1937
|
onKeyDown: handleKeyPressed,
|
|
1938
|
+
onKeyUp: handleKeyUp,
|
|
1926
1939
|
onCompositionStart: handleComposition,
|
|
1927
1940
|
onCompositionUpdate: handleComposition,
|
|
1928
1941
|
onCompositionEnd: handleComposition,
|
package/Textarea/index.d.ts
CHANGED
|
@@ -41,6 +41,8 @@ export declare type TextareaProps = {
|
|
|
41
41
|
onBlur?: (e: any, el: any) => void;
|
|
42
42
|
onFocus?: (e: any, el: any) => void;
|
|
43
43
|
onPressEnter?: (e: any, el: any) => void;
|
|
44
|
+
onKeyDown?: (e: any, el: any) => void;
|
|
45
|
+
onKeyUp?: (e: any, el: any) => void;
|
|
44
46
|
onResize?: (el: any, params: number[]) => void;
|
|
45
47
|
};
|
|
46
48
|
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<unknown>>;
|
package/Textarea/index.js
CHANGED
|
@@ -1216,7 +1216,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
1216
1216
|
/* harmony import */ var funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_4__);
|
|
1217
1217
|
/* harmony import */ var funda_utils_dist_cjs_useDebounce__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(702);
|
|
1218
1218
|
/* harmony import */ var funda_utils_dist_cjs_useDebounce__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_useDebounce__WEBPACK_IMPORTED_MODULE_5__);
|
|
1219
|
-
var _excluded = ["contentRef", "wrapperClassName", "controlClassName", "controlExClassName", "controlGroupWrapperClassName", "controlGroupTextClassName", "cols", "rows", "disabled", "required", "placeholder", "autoSize", "iconLeft", "iconRight", "aiPredict", "aiPredictRemainingTextRGB", "aiPredictConfirmKey", "aiPredictFetchFuncAsync", "aiPredictFetchFuncMethod", "aiPredictFetchFuncMethodParams", "aiPredictFetchCallback", "readOnly", "defaultValue", "value", "requiredLabel", "label", "name", "id", "minLength", "maxLength", "style", "tabIndex", "onChangeCallback", "onInputCallback", "onKeyPressedCallback", "onChange", "onBlur", "onFocus", "onPressEnter", "onResize"];
|
|
1219
|
+
var _excluded = ["contentRef", "wrapperClassName", "controlClassName", "controlExClassName", "controlGroupWrapperClassName", "controlGroupTextClassName", "cols", "rows", "disabled", "required", "placeholder", "autoSize", "iconLeft", "iconRight", "aiPredict", "aiPredictRemainingTextRGB", "aiPredictConfirmKey", "aiPredictFetchFuncAsync", "aiPredictFetchFuncMethod", "aiPredictFetchFuncMethodParams", "aiPredictFetchCallback", "readOnly", "defaultValue", "value", "requiredLabel", "label", "name", "id", "minLength", "maxLength", "style", "tabIndex", "onChangeCallback", "onInputCallback", "onKeyPressedCallback", "onChange", "onBlur", "onFocus", "onPressEnter", "onKeyDown", "onKeyUp", "onResize"];
|
|
1220
1220
|
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
|
|
1221
1221
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
1222
1222
|
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."); }
|
|
@@ -1283,6 +1283,8 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
|
|
|
1283
1283
|
onBlur = props.onBlur,
|
|
1284
1284
|
onFocus = props.onFocus,
|
|
1285
1285
|
onPressEnter = props.onPressEnter,
|
|
1286
|
+
onKeyDown = props.onKeyDown,
|
|
1287
|
+
onKeyUp = props.onKeyUp,
|
|
1286
1288
|
onResize = props.onResize,
|
|
1287
1289
|
attributes = _objectWithoutProperties(props, _excluded);
|
|
1288
1290
|
var uniqueID = funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_1___default()();
|
|
@@ -1484,6 +1486,12 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
|
|
|
1484
1486
|
set: function set(value, cb) {
|
|
1485
1487
|
setChangedVal("".concat(value));
|
|
1486
1488
|
cb === null || cb === void 0 ? void 0 : cb();
|
|
1489
|
+
},
|
|
1490
|
+
aiPredictReset: function aiPredictReset() {
|
|
1491
|
+
setTimeout(function () {
|
|
1492
|
+
// Avoid conflicts with other asynchronous states, resulting in invalid clearing
|
|
1493
|
+
setCurrentSuggestion('');
|
|
1494
|
+
}, 0);
|
|
1487
1495
|
}
|
|
1488
1496
|
};
|
|
1489
1497
|
}, [contentRef]);
|
|
@@ -1549,6 +1557,7 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
|
|
|
1549
1557
|
}
|
|
1550
1558
|
|
|
1551
1559
|
function handleKeyPressed(event) {
|
|
1560
|
+
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event, valRef.current);
|
|
1552
1561
|
if (typeof onKeyPressedCallback === 'function') {
|
|
1553
1562
|
var newData = onKeyPressedCallback(event, valRef.current);
|
|
1554
1563
|
if (newData) setChangedVal(newData); // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
|
|
@@ -1592,6 +1601,9 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
|
|
|
1592
1601
|
setCurrentSuggestion(tempMatchedSuggestion[currentSuggestionIndex.current] || '');
|
|
1593
1602
|
}
|
|
1594
1603
|
}
|
|
1604
|
+
function handleKeyUp(event) {
|
|
1605
|
+
onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event, valRef.current);
|
|
1606
|
+
}
|
|
1595
1607
|
(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
|
|
1596
1608
|
// update default value
|
|
1597
1609
|
//--------------
|
|
@@ -1693,6 +1705,7 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
|
|
|
1693
1705
|
}
|
|
1694
1706
|
},
|
|
1695
1707
|
onKeyDown: handleKeyPressed,
|
|
1708
|
+
onKeyUp: handleKeyUp,
|
|
1696
1709
|
disabled: disabled || null,
|
|
1697
1710
|
required: required || null,
|
|
1698
1711
|
readOnly: readOnly || null,
|
package/Tree/index.d.ts
CHANGED
|
@@ -54,6 +54,7 @@ export declare type TreeProps = {
|
|
|
54
54
|
/** -- */
|
|
55
55
|
id?: string;
|
|
56
56
|
onSelect?: (e: any, val: any, func: Function) => void;
|
|
57
|
+
onDoubleSelect?: (e: any, val: any, func: Function) => void;
|
|
57
58
|
onCollapse?: (e: any, val: any, func: Function) => void;
|
|
58
59
|
onCheck?: (val: any) => void;
|
|
59
60
|
};
|
package/Tree/index.js
CHANGED
|
@@ -1114,6 +1114,7 @@ function TreeList(props) {
|
|
|
1114
1114
|
getCheckedData = props.getCheckedData,
|
|
1115
1115
|
updategetCheckedData = props.updategetCheckedData,
|
|
1116
1116
|
onSelect = props.onSelect,
|
|
1117
|
+
onDoubleSelect = props.onDoubleSelect,
|
|
1117
1118
|
onCollapse = props.onCollapse,
|
|
1118
1119
|
onCheck = props.onCheck,
|
|
1119
1120
|
evInitValue = props.evInitValue;
|
|
@@ -1348,6 +1349,30 @@ function TreeList(props) {
|
|
|
1348
1349
|
handleCollapse(e);
|
|
1349
1350
|
}
|
|
1350
1351
|
}
|
|
1352
|
+
function handleDoubleSelect(e) {
|
|
1353
|
+
e.preventDefault();
|
|
1354
|
+
e.stopPropagation();
|
|
1355
|
+
var hyperlink = e.currentTarget;
|
|
1356
|
+
if (hyperlink.classList.contains('selected')) {
|
|
1357
|
+
activeClass(hyperlink, 'remove', 'selected');
|
|
1358
|
+
} else {
|
|
1359
|
+
[].slice.call(hyperlink.closest('.tree-diagram__wrapper').querySelectorAll('li > a')).forEach(function (node) {
|
|
1360
|
+
activeClass(node, 'remove', 'selected');
|
|
1361
|
+
});
|
|
1362
|
+
activeClass(hyperlink, 'add', 'selected');
|
|
1363
|
+
}
|
|
1364
|
+
onDoubleSelect === null || onDoubleSelect === void 0 ? void 0 : onDoubleSelect(e, {
|
|
1365
|
+
key: hyperlink.dataset.key,
|
|
1366
|
+
slug: hyperlink.dataset.slug,
|
|
1367
|
+
link: hyperlink.dataset.link,
|
|
1368
|
+
optiondata: hyperlink.dataset.optiondata
|
|
1369
|
+
}, typeof evInitValue !== 'function' ? function () {
|
|
1370
|
+
return void 0;
|
|
1371
|
+
} : evInitValue);
|
|
1372
|
+
if (disableArrow) {
|
|
1373
|
+
handleCollapse(e);
|
|
1374
|
+
}
|
|
1375
|
+
}
|
|
1351
1376
|
function titleArrowGenerator() {
|
|
1352
1377
|
return disableArrow ? loadingIcon : null;
|
|
1353
1378
|
}
|
|
@@ -1555,6 +1580,7 @@ function TreeList(props) {
|
|
|
1555
1580
|
href: item.link === '#' ? "".concat(item.link, "-").concat(i) : item.link,
|
|
1556
1581
|
"aria-expanded": "false",
|
|
1557
1582
|
onClick: handleSelect,
|
|
1583
|
+
onDoubleClick: handleDoubleSelect,
|
|
1558
1584
|
"data-link": item.link,
|
|
1559
1585
|
"data-slug": item.slug,
|
|
1560
1586
|
"data-key": item.key,
|
|
@@ -1583,6 +1609,7 @@ function TreeList(props) {
|
|
|
1583
1609
|
first: false,
|
|
1584
1610
|
arrow: arrow,
|
|
1585
1611
|
onSelect: onSelect,
|
|
1612
|
+
onDoubleSelect: onDoubleSelect,
|
|
1586
1613
|
onCollapse: onCollapse,
|
|
1587
1614
|
onCheck: onCheck,
|
|
1588
1615
|
disableArrow: disableArrow,
|
|
@@ -1639,6 +1666,7 @@ var Tree = function Tree(props) {
|
|
|
1639
1666
|
data = props.data,
|
|
1640
1667
|
retrieveData = props.retrieveData,
|
|
1641
1668
|
onSelect = props.onSelect,
|
|
1669
|
+
onDoubleSelect = props.onDoubleSelect,
|
|
1642
1670
|
onCollapse = props.onCollapse,
|
|
1643
1671
|
onCheck = props.onCheck;
|
|
1644
1672
|
var uniqueID = useComId_default()();
|
|
@@ -1913,6 +1941,7 @@ var Tree = function Tree(props) {
|
|
|
1913
1941
|
data: Array.isArray(retrieveData) && retrieveData.length > 0 ? filterRetriveData(flatList, retrieveData) : list,
|
|
1914
1942
|
childClassName: childClassName || 'tree-diagram-default-nav',
|
|
1915
1943
|
onSelect: onSelect,
|
|
1944
|
+
onDoubleSelect: onDoubleSelect,
|
|
1916
1945
|
onCollapse: onCollapse,
|
|
1917
1946
|
onCheck: onCheck,
|
|
1918
1947
|
evInitValue: initDefaultValue,
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Bounded Drag
|
|
3
|
+
*
|
|
4
|
+
* @usage:
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
const App = () => {
|
|
8
|
+
const [items, setItems] = useState<ListItem[]>([]);
|
|
9
|
+
// ... other states and refs
|
|
10
|
+
|
|
11
|
+
const deepCloneWithReactNode = (obj: any): any => {
|
|
12
|
+
if (obj === null || typeof obj !== 'object') {
|
|
13
|
+
return obj;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// Handle array
|
|
17
|
+
if (Array.isArray(obj)) {
|
|
18
|
+
return obj.map(item => deepCloneWithReactNode(item));
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// Handle object
|
|
22
|
+
const clonedObj: any = {};
|
|
23
|
+
for (const key in obj) {
|
|
24
|
+
if (key === 'appendControl') {
|
|
25
|
+
clonedObj[key] = obj[key];
|
|
26
|
+
} else {
|
|
27
|
+
clonedObj[key] = deepCloneWithReactNode(obj[key]);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
return clonedObj;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
const getItemWithChildrenIndices = (items: ListItem[], startIndex: number): number[] => {
|
|
35
|
+
const indices = [startIndex];
|
|
36
|
+
const startItem = items[startIndex];
|
|
37
|
+
const startDepth = startItem.depth || 0;
|
|
38
|
+
|
|
39
|
+
// Check if subsequent items are child items
|
|
40
|
+
for (let i = startIndex + 1; i < items.length; i++) {
|
|
41
|
+
const currentItem = items[i];
|
|
42
|
+
const currentDepth = currentItem.depth || 0;
|
|
43
|
+
if (currentDepth > startDepth) {
|
|
44
|
+
indices.push(i);
|
|
45
|
+
} else {
|
|
46
|
+
break;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
return indices;
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
const { isDragging, dragHandlers } = useBoundedDrag({
|
|
55
|
+
dragMode,
|
|
56
|
+
boundarySelector: '.custom-draggable-list',
|
|
57
|
+
itemSelector:'.custom-draggable-list__item',
|
|
58
|
+
dragHandleSelector: '.custom-draggable-list__handle',
|
|
59
|
+
onDragStart: (index: number) => {
|
|
60
|
+
// Additional drag start logic if needed
|
|
61
|
+
},
|
|
62
|
+
onDragOver: (dragIndex: number | null, dropIndex: number | null) => {
|
|
63
|
+
// Additional drag over logic if needed
|
|
64
|
+
},
|
|
65
|
+
onDragEnd: (dragIndex: number | null, dropIndex: number | null) => {
|
|
66
|
+
if (dragIndex !== null && dropIndex !== null && dragIndex !== dropIndex) {
|
|
67
|
+
// Handle item movement
|
|
68
|
+
const newItems = deepCloneWithReactNode(items);
|
|
69
|
+
const itemsToMove = getItemWithChildrenIndices(newItems, dragIndex);
|
|
70
|
+
const itemsBeingMoved = itemsToMove.map(index => newItems[index]);
|
|
71
|
+
|
|
72
|
+
// ... rest of your existing drag end logic ...
|
|
73
|
+
|
|
74
|
+
setItems(updatedItems);
|
|
75
|
+
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
// Update your JSX to use the new handlers
|
|
81
|
+
return (
|
|
82
|
+
<ul className="custom-draggable-list">
|
|
83
|
+
{items.map((item: any, index: number) => (
|
|
84
|
+
<li
|
|
85
|
+
// ... other props
|
|
86
|
+
draggable={!draggable ? undefined : editingItem !== item.id && "true"}
|
|
87
|
+
onDragStart={!draggable ? undefined : (e) => dragHandlers.handleDragStart(e, index)}
|
|
88
|
+
onDragOver={!draggable ? undefined : dragHandlers.handleDragOver}
|
|
89
|
+
onDragEnd={!draggable ? undefined : dragHandlers.handleDragEnd}
|
|
90
|
+
onTouchStart={!draggable ? undefined : (e) => dragHandlers.handleDragStart(e, index)}
|
|
91
|
+
onTouchMove={!draggable ? undefined : dragHandlers.handleDragOver}
|
|
92
|
+
onTouchEnd={!draggable ? undefined : dragHandlers.handleDragEnd}
|
|
93
|
+
>
|
|
94
|
+
<li className="custom-draggable-list__item">
|
|
95
|
+
<span className="custom-draggable-list__handle">☰</span>
|
|
96
|
+
<i>content {indec}<i>
|
|
97
|
+
</li>
|
|
98
|
+
</li>
|
|
99
|
+
))}
|
|
100
|
+
</ul>
|
|
101
|
+
);
|
|
102
|
+
|
|
103
|
+
*/
|
|
104
|
+
export interface TouchOffset {
|
|
105
|
+
x: number;
|
|
106
|
+
y: number;
|
|
107
|
+
}
|
|
108
|
+
export interface BoundedDragOptions {
|
|
109
|
+
dragMode?: 'handle' | 'block';
|
|
110
|
+
boundarySelector?: string;
|
|
111
|
+
itemSelector?: string;
|
|
112
|
+
dragHandleSelector?: string;
|
|
113
|
+
onDragStart?: (index: number) => void;
|
|
114
|
+
onDragOver?: (dragIndex: number | null, dropIndex: number | null) => void;
|
|
115
|
+
onDragEnd?: (dragIndex: number | null, dropIndex: number | null) => void;
|
|
116
|
+
}
|
|
117
|
+
export declare const useBoundedDrag: (options?: BoundedDragOptions) => {
|
|
118
|
+
isDragging: boolean;
|
|
119
|
+
dragHandlers: {
|
|
120
|
+
handleDragStart: (e: React.DragEvent | React.TouchEvent, position: number) => false | undefined;
|
|
121
|
+
handleDragOver: (e: React.DragEvent | React.TouchEvent) => void;
|
|
122
|
+
handleDragEnd: (e: React.DragEvent | React.TouchEvent) => void;
|
|
123
|
+
};
|
|
124
|
+
};
|
|
125
|
+
export default useBoundedDrag;
|