styled-hook-form
Version:
React form library for styled-components based on grommet and react-hook-form
208 lines (207 loc) • 7.43 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.usePagedData = void 0;
/* eslint-disable */
const axios_hooks_1 = __importStar(require("axios-hooks"));
const axios_mock_adapter_1 = __importDefault(require("axios-mock-adapter"));
const react_1 = require("react");
const axios_1 = __importDefault(require("axios"));
const types_1 = require("./types");
const http_1 = require("../http");
const usePagedData = (props) => {
let { request, lazy, params, onResponse, onRequest, mockResponse, listPropName = "list", totalPropName = "total", searchParam, searchParamName = "searchKey", page: _page = 1, pageSize = 20, pageParamName = "page", pageSizeParamName = "pageSize", orderPropParamName = "order-by", orderDirParamName = "order-dir", orderProp, orderDir = "asc", } = props;
if (lazy === undefined || lazy === null) {
lazy = false;
}
if (typeof request === "string") {
request = {
url: request,
};
}
let [page, setPage] = react_1.useState(_page);
let [total, setTotal] = react_1.useState(0);
let [hasMore, setHasMore] = react_1.useState(false);
let [isFirstLoad, setIsFirstLoad] = react_1.useState(true);
const reqRef = react_1.useRef();
let [currentFetch, setCurrentFetch] = react_1.useState(null);
const requestParams = react_1.useMemo(() => {
let _params = Object.assign(Object.assign({}, params), { [pageSizeParamName]: pageSize });
if (searchParam) {
_params[searchParamName] = searchParam;
}
if (orderProp) {
_params[orderPropParamName] = orderProp;
_params[orderDirParamName] = orderDir;
}
return _params;
}, [
pageSizeParamName,
pageSize,
searchParamName,
searchParam,
orderPropParamName,
orderDirParamName,
orderProp,
orderDir,
params,
]);
if (mockResponse) {
let mock = new axios_mock_adapter_1.default(axios_1.default);
mockResponse(mock);
}
let actualUseAxios = mockResponse
? axios_hooks_1.makeUseAxios({
axios: axios_1.default,
})
: axios_hooks_1.default;
const [{ loading, error }, refetch] = actualUseAxios(Object.assign(Object.assign({}, request), { transformRequest: react_1.useCallback((data, headers) => {
return onRequest ? onRequest(data, headers) : data;
}, []), transformResponse: react_1.useCallback(function (_data, headers) {
let data = typeof _data === "string" ? JSON.parse(_data) : _data;
setCurrentFetch((f) => {
var _a;
return ({
page: (_a = f) === null || _a === void 0 ? void 0 : _a.page,
data,
status: types_1.DataFecthStatus.Done,
headers,
});
});
return _data;
}, []) }), { manual: true });
const handleServerData = (data, page, headers) => {
let result;
let list;
if (onResponse) {
result = onResponse(data, page, headers);
}
else {
result = data;
}
if (!result) {
return true;
}
if (!Array.isArray(result)) {
list = result[listPropName];
}
else {
list = result;
}
if (!list) {
return false;
}
let totalRecords = result[totalPropName];
setTotal(totalRecords);
setHasMore(list.length === pageSize);
setData(result);
return true;
};
const nextPage = () => {
setPage((p) => {
loadPage(lazy && isFirstLoad ? p || 1 : p + 1);
return p;
});
};
const [data, setData] = react_1.useState(null);
const reset = react_1.useCallback(() => {
loadPage(1);
}, []);
const refresh = () => {
if (isFirstLoad) {
return;
}
setPage((p) => {
loadPage(p);
return p;
});
};
const loadPage = (pNum) => {
const newFetch = {
page: pNum,
status: types_1.DataFecthStatus.Pending,
};
setCurrentFetch(newFetch);
};
react_1.useEffect(() => {
if (lazy || request === null || isFirstLoad || !_page) {
return;
}
loadPage(_page);
}, [_page]);
react_1.useEffect(() => {
if (currentFetch) {
if (currentFetch.status === types_1.DataFecthStatus.Pending) {
setCurrentFetch((cf) => (Object.assign(Object.assign({}, cf), { status: types_1.DataFecthStatus.InProgress })));
refetch({
params: Object.assign(Object.assign({}, requestParams), { [pageParamName]: currentFetch.page }),
}).catch((err) => {
if (http_1.isAxiosCancel(err)) {
setCurrentFetch((cf) => (Object.assign(Object.assign({}, cf), { status: types_1.DataFecthStatus.Pending })));
}
else {
setCurrentFetch((cf) => (Object.assign(Object.assign({}, cf), { status: types_1.DataFecthStatus.Failed })));
}
});
}
if (currentFetch.status === types_1.DataFecthStatus.Done) {
if (handleServerData(currentFetch.data, currentFetch.page, currentFetch.headers)) {
setIsFirstLoad(false);
setPage(currentFetch.page);
}
}
}
}, [currentFetch]);
react_1.useEffect(() => {
if (!isFirstLoad) {
reset();
}
}, [requestParams]);
react_1.useEffect(() => {
if (isFirstLoad && request != null && !lazy) {
loadPage(page);
reqRef.current = request;
}
}, []);
react_1.useEffect(() => {
if ((!reqRef.current && request) ||
(reqRef.current &&
JSON.stringify(reqRef.current) !== JSON.stringify(request))) {
reqRef.current = request;
reset();
}
}, [request, reset]);
return {
data,
loading,
error,
page,
total,
hasMore,
nextPage,
reset,
refresh,
};
};
exports.usePagedData = usePagedData;