minh-custom-hooks-release
Version:
My custom hooks for working easier while developing react web app
181 lines • 8.46 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDebounce = exports.useDebounceState = void 0;
exports.useDebounceFn = useDebounceFn;
var react_1 = require("react");
var useDidUpdate_1 = __importDefault(require("./useDidUpdate"));
var defaultDebounceTime = 500;
var useDebounceState = function (initialState, debounceTime) {
if (debounceTime === void 0) { debounceTime = defaultDebounceTime; }
var _a = (0, react_1.useState)(initialState), state = _a[0], setState = _a[1];
var _b = (0, react_1.useState)(initialState), debouncedState = _b[0], setDebouncedState = _b[1];
var timer = (0, react_1.useRef)();
var _c = (0, react_1.useState)("DONE" /* DebounceValueStatus.DONE */), status = _c[0], setStatus = _c[1];
var stop = (0, react_1.useCallback)(function () {
timer.current && clearTimeout(timer.current);
setStatus("DONE" /* DebounceValueStatus.DONE */);
}, []);
(0, useDidUpdate_1.default)(function () {
timer.current && clearTimeout(timer.current);
setStatus("PENDING" /* DebounceValueStatus.PENDING */);
timer.current = setTimeout(function () {
setDebouncedState(state);
setStatus("DONE" /* DebounceValueStatus.DONE */);
}, debounceTime);
}, [state]);
return { debouncedState: debouncedState, setState: setState, actualState: state, stop: stop, status: status };
};
exports.useDebounceState = useDebounceState;
var useDebounce = function useDebounce(state, debounceTime) {
if (debounceTime === void 0) { debounceTime = defaultDebounceTime; }
var _a = (0, react_1.useState)(state), debouncedState = _a[0], setDebouncedState = _a[1];
var timer = (0, react_1.useRef)();
var _b = (0, react_1.useState)("DONE" /* DebounceValueStatus.DONE */), status = _b[0], setStatus = _b[1];
var stop = (0, react_1.useCallback)(function () {
timer.current && clearTimeout(timer.current);
setStatus("DONE" /* DebounceValueStatus.DONE */);
}, []);
(0, useDidUpdate_1.default)(function () {
timer.current && clearTimeout(timer.current);
setStatus("PENDING" /* DebounceValueStatus.PENDING */);
timer.current = setTimeout(function () {
setDebouncedState(state);
setStatus("DONE" /* DebounceValueStatus.DONE */);
}, debounceTime);
}, [state]);
return {
debouncedState: debouncedState,
stop: stop,
status: status,
};
};
exports.useDebounce = useDebounce;
function useDebounceFn(
/** Debounce function */
fn,
/**
* Additional configuration options
* onSuccess, onError can be config if the function return a promise
*/
config,
/** Function with use callback also available, just pass dependency here, run function automatically wrapped inside useCallback
* with your all dependencies
*/
deps) {
// const isDevelopment = useRef<boolean>(!process.env.NODE_ENV || process.env.NODE_ENV === 'development');
var timer = (0, react_1.useRef)();
var _a = (0, react_1.useState)(), returnedData = _a[0], setReturnedData = _a[1];
var _b = (0, react_1.useState)("DONE" /* DebounceValueStatus.DONE */), status = _b[0], setStatus = _b[1];
var _c = (0, react_1.useState)("DONE" /* DebounceValueStatus.DONE */), progressStatus = _c[0], setProgressStatus = _c[1];
var _d = (0, react_1.useMemo)(function () {
var _a;
return __assign(__assign({}, config), { debounceTime: (_a = config === null || config === void 0 ? void 0 : config.debounceTime) !== null && _a !== void 0 ? _a : defaultDebounceTime });
}, [config]), debounceTime = _d.debounceTime, others = __rest(_d, ["debounceTime"]);
var funcWithoutDeps = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
timer.current && clearTimeout(timer.current);
setStatus("PENDING" /* DebounceValueStatus.PENDING */);
setProgressStatus("PENDING" /* DebounceValueStatus.PENDING */);
timer.current = setTimeout(function () {
var funcReturn = fn.apply(void 0, args);
setStatus("DONE" /* DebounceValueStatus.DONE */);
if (!(funcReturn instanceof Promise)) {
setReturnedData(funcReturn);
setProgressStatus("DONE" /* DebounceValueStatus.DONE */);
return;
}
var promiseCallbacks = others;
funcReturn
.then(function (data) {
var _a;
setReturnedData(data);
(_a = promiseCallbacks === null || promiseCallbacks === void 0 ? void 0 : promiseCallbacks.onSuccess) === null || _a === void 0 ? void 0 : _a.call(promiseCallbacks, data);
})
.catch(function (err) {
var _a;
(_a = promiseCallbacks === null || promiseCallbacks === void 0 ? void 0 : promiseCallbacks.onError) === null || _a === void 0 ? void 0 : _a.call(promiseCallbacks, err);
})
.finally(function () {
setProgressStatus("DONE" /* DebounceValueStatus.DONE */);
});
}, debounceTime);
};
var funWithDeps = (0, react_1.useCallback)(function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
timer.current && clearTimeout(timer.current);
setStatus("PENDING" /* DebounceValueStatus.PENDING */);
setProgressStatus("PENDING" /* DebounceValueStatus.PENDING */);
timer.current = setTimeout(function () {
var funcReturn = fn.apply(void 0, args);
setStatus("DONE" /* DebounceValueStatus.DONE */);
if (!(funcReturn instanceof Promise)) {
setReturnedData(funcReturn);
setProgressStatus("DONE" /* DebounceValueStatus.DONE */);
return;
}
var promiseCallbacks = others;
funcReturn
.then(function (data) {
var _a;
setReturnedData(data);
(_a = promiseCallbacks === null || promiseCallbacks === void 0 ? void 0 : promiseCallbacks.onSuccess) === null || _a === void 0 ? void 0 : _a.call(promiseCallbacks, data);
})
.catch(function (err) {
var _a;
(_a = promiseCallbacks === null || promiseCallbacks === void 0 ? void 0 : promiseCallbacks.onError) === null || _a === void 0 ? void 0 : _a.call(promiseCallbacks, err);
})
.finally(function () {
setProgressStatus("DONE" /* DebounceValueStatus.DONE */);
});
}, debounceTime);
}, deps || []);
var stop = (0, react_1.useCallback)(function () {
timer.current && clearTimeout(timer.current);
setStatus("DONE" /* DebounceValueStatus.DONE */);
}, []);
return {
/** Return data of whole progress */
returnedData: returnedData,
/** Control only pending time */
status: status,
/** Control whole state include debounce pending time + promise pending time */
progressStatus: progressStatus,
/** Run debounce function */
run: deps ? funWithDeps : funcWithoutDeps,
/** stop debounce progress */
stop: stop,
};
}
// #endregion
//# sourceMappingURL=useDebounce.js.map