@bluemarble/bm-components 1.5.0 → 1.6.0

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/dist/index.js CHANGED
@@ -4146,14 +4146,17 @@ var AlertProvider = ({ children }) => {
4146
4146
  const [severity, setSeverity] = _react.useState.call(void 0, "info");
4147
4147
  const [message, setMessage] = _react.useState.call(void 0, "");
4148
4148
  const [isVisible, setIsVisible] = _react.useState.call(void 0, false);
4149
- const createAlert = (newMessage, severity2) => {
4150
- setMessage(newMessage);
4151
- setSeverity(severity2);
4152
- setIsVisible(true);
4153
- };
4154
- function onCloseToast() {
4149
+ const createAlert = _react.useCallback.call(void 0,
4150
+ (newMessage, severity2) => {
4151
+ setMessage(newMessage);
4152
+ setSeverity(severity2);
4153
+ setIsVisible(true);
4154
+ },
4155
+ []
4156
+ );
4157
+ const onCloseToast = _react.useCallback.call(void 0, () => {
4155
4158
  setIsVisible(false);
4156
- }
4159
+ }, []);
4157
4160
  return /* @__PURE__ */ React2.default.createElement(AlertContext.Provider, { value: { createAlert } }, children, /* @__PURE__ */ React2.default.createElement(
4158
4161
  Toast,
4159
4162
  {
@@ -4174,13 +4177,13 @@ var useAlert = () => {
4174
4177
 
4175
4178
  function useLoading() {
4176
4179
  const [state, setState] = _react.useState.call(void 0, []);
4177
- const isLoading = (prop) => state.includes(prop);
4178
- const setLoading = (prop, remove) => {
4180
+ const isLoading = _react.useCallback.call(void 0, (prop) => state.includes(prop), [state]);
4181
+ const setLoading = _react.useCallback.call(void 0, (prop, remove) => {
4179
4182
  if (remove)
4180
4183
  setState((prevState) => prevState.filter((state2) => state2 !== prop));
4181
4184
  else
4182
4185
  setState((prevState) => [...prevState, prop]);
4183
- };
4186
+ }, []);
4184
4187
  return { isLoading, setLoading };
4185
4188
  }
4186
4189
 
@@ -4200,59 +4203,68 @@ function useFormHelper() {
4200
4203
  const { createAlert } = alertProps;
4201
4204
  const { setLoading } = loadingProps;
4202
4205
  const sourceRef = _react.useRef.call(void 0, new AbortController());
4203
- function onSubmitWrapper(fn, { name }) {
4204
- return (fields, methods) => __async(this, null, function* () {
4205
- const LOADING_NAME = name;
4206
- setLoading(LOADING_NAME);
4207
- try {
4208
- yield fn(fields, methods);
4209
- } catch (error) {
4210
- errorHandler(error, methods.setErrors);
4211
- } finally {
4212
- setLoading(LOADING_NAME, true);
4213
- }
4214
- });
4215
- }
4216
- function onRequestWrapper(fn, { name }) {
4217
- return (...params) => __async(this, null, function* () {
4218
- const LOADING_NAME = name;
4219
- setLoading(LOADING_NAME);
4220
- api.interceptors.request.use(
4221
- (config) => {
4222
- if (!config.signal && sourceRef.current && config.method === "get") {
4223
- config.signal = sourceRef.current.signal;
4206
+ const onSubmitWrapper = _react.useCallback.call(void 0,
4207
+ (fn, { name }) => {
4208
+ return (fields, methods) => __async(this, null, function* () {
4209
+ const LOADING_NAME = name;
4210
+ setLoading(LOADING_NAME);
4211
+ try {
4212
+ yield fn(fields, methods);
4213
+ } catch (error) {
4214
+ errorHandler(error, methods.setErrors);
4215
+ } finally {
4216
+ setLoading(LOADING_NAME, true);
4217
+ }
4218
+ });
4219
+ },
4220
+ [setLoading]
4221
+ );
4222
+ const onRequestWrapper = _react.useCallback.call(void 0,
4223
+ (fn, { name }) => {
4224
+ return (...params) => __async(this, null, function* () {
4225
+ const LOADING_NAME = name;
4226
+ setLoading(LOADING_NAME);
4227
+ api.interceptors.request.use(
4228
+ (config) => {
4229
+ if (!config.signal && sourceRef.current && config.method === "get") {
4230
+ config.signal = sourceRef.current.signal;
4231
+ }
4232
+ return config;
4233
+ },
4234
+ (error) => {
4235
+ return Promise.reject(error);
4224
4236
  }
4225
- return config;
4226
- },
4227
- (error) => {
4228
- return Promise.reject(error);
4237
+ );
4238
+ try {
4239
+ const response = yield fn(...params);
4240
+ return response;
4241
+ } catch (error) {
4242
+ errorHandler(error);
4243
+ } finally {
4244
+ setLoading(LOADING_NAME, true);
4245
+ }
4246
+ });
4247
+ },
4248
+ [setLoading, api]
4249
+ );
4250
+ const errorHandler = _react.useCallback.call(void 0,
4251
+ (error, callback) => {
4252
+ if ((error == null ? void 0 : error.message) === "cancel.navigation")
4253
+ return;
4254
+ if (callback) {
4255
+ if (error.response.data.code === "invalid.body") {
4256
+ const errors = error.response.data.details.issues;
4257
+ const currentErrors = errors.reduce((acc, item) => {
4258
+ acc[item.path.join(".")] = item.message;
4259
+ return acc;
4260
+ }, {});
4261
+ callback(currentErrors);
4229
4262
  }
4230
- );
4231
- try {
4232
- const response = yield fn(...params);
4233
- return response;
4234
- } catch (error) {
4235
- errorHandler(error);
4236
- } finally {
4237
- setLoading(LOADING_NAME, true);
4238
- }
4239
- });
4240
- }
4241
- function errorHandler(error, callback) {
4242
- if ((error == null ? void 0 : error.message) === "cancel.navigation")
4243
- return;
4244
- if (callback) {
4245
- if (error.response.data.code === "invalid.body") {
4246
- const errors = error.response.data.details.issues;
4247
- const currentErrors = errors.reduce((acc, item) => {
4248
- acc[item.path.join(".")] = item.message;
4249
- return acc;
4250
- }, {});
4251
- callback(currentErrors);
4252
4263
  }
4253
- }
4254
- createAlert(formatErrorMessage(error), "error");
4255
- }
4264
+ createAlert(formatErrorMessage(error), "error");
4265
+ },
4266
+ [formatErrorMessage, createAlert]
4267
+ );
4256
4268
  _react.useEffect.call(void 0, () => {
4257
4269
  return () => {
4258
4270
  sourceRef.current.abort();
@@ -4600,7 +4612,7 @@ function getObjectValue(obj) {
4600
4612
  // src/hooks/useFilter.ts
4601
4613
  function useFilter() {
4602
4614
  const [selectedFilters, setSelectedFilters] = _react.useState.call(void 0, []);
4603
- const filterBy = (newFilter) => {
4615
+ const filterBy = _react.useCallback.call(void 0, (newFilter) => {
4604
4616
  const propToCompare = (newFilter == null ? void 0 : newFilter.id) ? "id" : "prop";
4605
4617
  function removeRepeatedFilters(filter) {
4606
4618
  return filter[propToCompare] !== newFilter[propToCompare];
@@ -4609,13 +4621,16 @@ function useFilter() {
4609
4621
  ...filters.filter(removeRepeatedFilters),
4610
4622
  newFilter
4611
4623
  ]);
4612
- };
4613
- const removeFilter = (prop, isId) => {
4614
- const propToCompare = isId ? "id" : "prop";
4615
- setSelectedFilters(
4616
- selectedFilters.filter((filter) => filter[propToCompare] !== prop)
4617
- );
4618
- };
4624
+ }, []);
4625
+ const removeFilter = _react.useCallback.call(void 0,
4626
+ (prop, isId) => {
4627
+ const propToCompare = isId ? "id" : "prop";
4628
+ setSelectedFilters(
4629
+ selectedFilters.filter((filter) => filter[propToCompare] !== prop)
4630
+ );
4631
+ },
4632
+ [selectedFilters]
4633
+ );
4619
4634
  function clearAllFilters() {
4620
4635
  setSelectedFilters([]);
4621
4636
  }
@@ -4686,68 +4701,80 @@ function useGrid({
4686
4701
  );
4687
4702
  const [currentPage, setCurrentPage] = _react.useState.call(void 0, defaultCurrentPage || 0);
4688
4703
  const [rowsPerPage, setRowsPerPage] = _react.useState.call(void 0, rowsPerPageOptions[0]);
4689
- const toggleSortedDirection = (direction) => {
4690
- if (direction === "asc")
4691
- return "desc";
4692
- return "asc";
4693
- };
4694
- function setSort(prop, direction) {
4704
+ const toggleSortedDirection = _react.useCallback.call(void 0,
4705
+ (direction) => {
4706
+ if (direction === "asc")
4707
+ return "desc";
4708
+ return "asc";
4709
+ },
4710
+ []
4711
+ );
4712
+ const setSort = _react.useCallback.call(void 0, (prop, direction) => {
4695
4713
  setSortedBy((prev) => [...prev, { prop, direction }]);
4696
- }
4697
- const onSortBy = (prop) => {
4698
- if (!prop)
4699
- return;
4700
- const currentSorted = sortedBy.find((p) => p.prop === prop);
4701
- if (currentSorted) {
4702
- if (currentSorted.direction === "asc") {
4703
- setSortedBy((prev) => prev.filter((p) => p.prop !== prop));
4704
- } else {
4705
- setSortedBy((prev) => {
4706
- const newArr = prev.map((p) => {
4707
- if (p.prop !== prop)
4708
- return p;
4709
- return {
4710
- prop: p.prop,
4711
- direction: toggleSortedDirection(p.direction)
4712
- };
4714
+ }, []);
4715
+ const onSortBy = _react.useCallback.call(void 0,
4716
+ (prop) => {
4717
+ if (!prop)
4718
+ return;
4719
+ const currentSorted = sortedBy.find((p) => p.prop === prop);
4720
+ if (currentSorted) {
4721
+ if (currentSorted.direction === "asc") {
4722
+ setSortedBy((prev) => prev.filter((p) => p.prop !== prop));
4723
+ } else {
4724
+ setSortedBy((prev) => {
4725
+ const newArr = prev.map((p) => {
4726
+ if (p.prop !== prop)
4727
+ return p;
4728
+ return {
4729
+ prop: p.prop,
4730
+ direction: toggleSortedDirection(p.direction)
4731
+ };
4732
+ });
4733
+ return [...newArr].slice(0);
4713
4734
  });
4714
- return [...newArr].slice(0);
4715
- });
4735
+ }
4736
+ } else {
4737
+ setSortedBy((prev) => [...prev, { prop, direction: "desc" }]);
4716
4738
  }
4717
- } else {
4718
- setSortedBy((prev) => [...prev, { prop, direction: "desc" }]);
4719
- }
4720
- };
4721
- const set = (data) => {
4739
+ },
4740
+ [toggleSortedDirection, sortedBy]
4741
+ );
4742
+ const set = _react.useCallback.call(void 0, (data) => {
4722
4743
  setDefaultData(data);
4723
- };
4724
- function sortData(data) {
4725
- if (sortedBy.length > 0) {
4726
- const symbolDir = {
4727
- asc: "",
4728
- desc: "-"
4729
- };
4730
- const formattedKeys = sortedBy.map(
4731
- ({ prop, direction }) => `${symbolDir[direction]}${prop}`
4732
- );
4733
- return data.sort(_sortby2.default.call(void 0, ...formattedKeys));
4734
- } else
4735
- return data;
4736
- }
4737
- const onPageChange = (pageNumber) => {
4744
+ }, []);
4745
+ const sortData = _react.useCallback.call(void 0,
4746
+ (data) => {
4747
+ if (sortedBy.length > 0) {
4748
+ const symbolDir = {
4749
+ asc: "",
4750
+ desc: "-"
4751
+ };
4752
+ const formattedKeys = sortedBy.map(
4753
+ ({ prop, direction }) => `${symbolDir[direction]}${prop}`
4754
+ );
4755
+ return data.sort(_sortby2.default.call(void 0, ...formattedKeys));
4756
+ } else
4757
+ return data;
4758
+ },
4759
+ [sortedBy]
4760
+ );
4761
+ const onPageChange = _react.useCallback.call(void 0, (pageNumber) => {
4738
4762
  if (pageNumber < 0)
4739
4763
  return;
4740
4764
  if (pageNumber > totalNumberOfPages)
4741
4765
  return;
4742
4766
  setCurrentPage(pageNumber);
4743
- };
4744
- const onChangeRowsPerPage = (rows) => {
4745
- let totalNumberOfPages2 = Math.round(filteredData.length / rows) - 1;
4746
- totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
4747
- if (currentPage > totalNumberOfPages2)
4748
- setCurrentPage(totalNumberOfPages2);
4749
- setRowsPerPage(rows);
4750
- };
4767
+ }, []);
4768
+ const onChangeRowsPerPage = _react.useCallback.call(void 0,
4769
+ (rows) => {
4770
+ let totalNumberOfPages2 = Math.round(filteredData.length / rows) - 1;
4771
+ totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
4772
+ if (currentPage > totalNumberOfPages2)
4773
+ setCurrentPage(totalNumberOfPages2);
4774
+ setRowsPerPage(rows);
4775
+ },
4776
+ [currentPage]
4777
+ );
4751
4778
  const filteredData = _react.useMemo.call(void 0, () => {
4752
4779
  let newData = defaultData.slice(0);
4753
4780
  if (search && search.value !== "") {
@@ -4762,7 +4789,7 @@ function useGrid({
4762
4789
  const startPage = currentPage * rowsPerPage;
4763
4790
  const endPage = startPage + rowsPerPage;
4764
4791
  return sortedData.slice(startPage, endPage);
4765
- }, [sortedBy, filteredData, currentPage, rowsPerPage]);
4792
+ }, [filteredData, currentPage, rowsPerPage, sortData]);
4766
4793
  const totalNumberOfPages = Math.ceil(filteredData.length / rowsPerPage) - 1;
4767
4794
  return {
4768
4795
  data: displayData,
@@ -4838,49 +4865,52 @@ function useAsyncGrid({
4838
4865
  const [currentPage, setCurrentPage] = _react.useState.call(void 0, defaultCurrentPage || 0);
4839
4866
  const [rowsPerPage, setRowsPerPage] = _react.useState.call(void 0, rowsPerPageOptions[0]);
4840
4867
  const totalNumberOfPages = Math.ceil(totalNumberOfItems / rowsPerPage) - 1;
4841
- const toggleSortedDirection = (direction) => {
4842
- if (direction === "asc")
4843
- return "desc";
4844
- return "asc";
4845
- };
4846
- function setSort(prop, direction) {
4868
+ const toggleSortedDirection = _react.useCallback.call(void 0,
4869
+ (direction) => {
4870
+ if (direction === "asc")
4871
+ return "desc";
4872
+ return "asc";
4873
+ },
4874
+ []
4875
+ );
4876
+ const setSort = _react.useCallback.call(void 0, (prop, direction) => {
4847
4877
  setSortedBy((prev) => [...prev, { prop, direction }]);
4848
- }
4849
- const onSortBy = (prop) => __async(this, null, function* () {
4850
- if (!prop)
4851
- return;
4852
- let finalArr = [];
4853
- const currentSorted = sortedBy.find((p) => p.prop === prop);
4854
- if (currentSorted) {
4855
- if (currentSorted.direction === "asc") {
4856
- finalArr = sortedBy.filter((p) => p.prop !== prop);
4878
+ }, []);
4879
+ const onSortBy = _react.useCallback.call(void 0,
4880
+ (prop) => __async(this, null, function* () {
4881
+ if (!prop)
4882
+ return;
4883
+ let finalArr = [];
4884
+ const currentSorted = sortedBy.find((p) => p.prop === prop);
4885
+ if (currentSorted) {
4886
+ if (currentSorted.direction === "asc") {
4887
+ finalArr = sortedBy.filter((p) => p.prop !== prop);
4888
+ } else {
4889
+ finalArr = sortedBy.map((p) => {
4890
+ if (p.prop !== prop)
4891
+ return p;
4892
+ return {
4893
+ prop: p.prop,
4894
+ direction: toggleSortedDirection(p.direction)
4895
+ };
4896
+ });
4897
+ }
4857
4898
  } else {
4858
- finalArr = sortedBy.map((p) => {
4859
- if (p.prop !== prop)
4860
- return p;
4861
- return {
4862
- prop: p.prop,
4863
- direction: toggleSortedDirection(p.direction)
4864
- };
4865
- });
4899
+ finalArr = [...sortedBy, { prop, direction: "desc" }];
4866
4900
  }
4867
- } else {
4868
- finalArr = [...sortedBy, { prop, direction: "desc" }];
4869
- }
4870
- yield updateGridContent({
4871
- page: currentPage,
4872
- sortedBy: finalArr,
4873
- rowsPerPage
4874
- });
4875
- });
4876
- const set = _react.useCallback.call(void 0,
4877
- (data) => {
4878
- setDefaultData(data);
4879
- },
4880
- [setDefaultData]
4901
+ yield updateGridContent({
4902
+ page: currentPage,
4903
+ sortedBy: finalArr,
4904
+ rowsPerPage
4905
+ });
4906
+ }),
4907
+ [sortedBy, toggleSortedDirection, rowsPerPage, currentPage]
4881
4908
  );
4882
- function baseRequest(_0) {
4883
- return __async(this, arguments, function* ({
4909
+ const set = _react.useCallback.call(void 0, (data) => {
4910
+ setDefaultData(data);
4911
+ }, []);
4912
+ const baseRequest = _react.useCallback.call(void 0,
4913
+ (_0) => __async(this, [_0], function* ({
4884
4914
  page,
4885
4915
  search: search2,
4886
4916
  filters: filters2,
@@ -4903,11 +4933,12 @@ function useAsyncGrid({
4903
4933
  const { data } = yield axiosInstance.get(pathWithParams);
4904
4934
  setTotalNumberOfItems(data.totalNumberOfItems);
4905
4935
  return data.rows;
4906
- } catch (error) {
4936
+ } catch (_) {
4907
4937
  return [];
4908
4938
  }
4909
- });
4910
- }
4939
+ }),
4940
+ [axiosInstance, url]
4941
+ );
4911
4942
  const updateGridContent = _react.useCallback.call(void 0,
4912
4943
  (_0) => __async(this, [_0], function* ({
4913
4944
  page,
@@ -4928,40 +4959,44 @@ function useAsyncGrid({
4928
4959
  setRowsPerPage(rowsPerPage2);
4929
4960
  set(result);
4930
4961
  setCurrentPage(page);
4931
- } catch (error) {
4932
- throw error;
4933
4962
  } finally {
4934
4963
  setIsLoading(false);
4935
4964
  }
4936
4965
  }),
4937
- [set, rowsPerPage, setCurrentPage, search, filters]
4966
+ [set, search, filters, onRequest, baseRequest]
4938
4967
  );
4939
- const onPageChange = (pageNumber) => {
4940
- if (pageNumber < 0)
4941
- return;
4942
- if (pageNumber > totalNumberOfPages)
4943
- return;
4944
- updateGridContent({ page: pageNumber, sortedBy, rowsPerPage });
4945
- };
4946
- const onChangeRowsPerPage = (rows) => {
4947
- let totalNumberOfPages2 = Math.round(totalNumberOfItems / rows) - 1;
4948
- totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
4949
- if (currentPage > totalNumberOfPages2)
4968
+ const onPageChange = _react.useCallback.call(void 0,
4969
+ (pageNumber) => {
4970
+ if (pageNumber < 0)
4971
+ return;
4972
+ if (pageNumber > totalNumberOfPages)
4973
+ return;
4974
+ updateGridContent({ page: pageNumber, sortedBy, rowsPerPage });
4975
+ },
4976
+ [updateGridContent, totalNumberOfPages, sortedBy, rowsPerPage]
4977
+ );
4978
+ const onChangeRowsPerPage = _react.useCallback.call(void 0,
4979
+ (rows) => {
4980
+ let totalNumberOfPages2 = Math.round(totalNumberOfItems / rows) - 1;
4981
+ totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
4982
+ if (currentPage > totalNumberOfPages2)
4983
+ updateGridContent({
4984
+ page: totalNumberOfPages2,
4985
+ sortedBy,
4986
+ rowsPerPage: rows
4987
+ });
4950
4988
  updateGridContent({
4951
- page: totalNumberOfPages2,
4989
+ page: currentPage,
4952
4990
  sortedBy,
4953
4991
  rowsPerPage: rows
4954
4992
  });
4955
- updateGridContent({
4956
- page: currentPage,
4957
- sortedBy,
4958
- rowsPerPage: rows
4959
- });
4960
- };
4993
+ },
4994
+ [updateGridContent, totalNumberOfItems, sortedBy, currentPage]
4995
+ );
4961
4996
  const displayData = defaultData;
4962
4997
  _react.useEffect.call(void 0, () => {
4963
4998
  updateGridContent({ page: 0, sortedBy: [], rowsPerPage });
4964
- }, []);
4999
+ }, [updateGridContent, rowsPerPage]);
4965
5000
  return {
4966
5001
  data: displayData,
4967
5002
  set,
@@ -5012,31 +5047,32 @@ function CreateAuthProvider({
5012
5047
  const [user, setUser] = _react.useState.call(void 0, );
5013
5048
  const [status, setStatus] = _react.useState.call(void 0, "unauthenticated");
5014
5049
  const { createAlert } = useAlert();
5015
- const signIn = (_0) => __async(this, [_0], function* ({ email, password }) {
5016
- setStatus("loading");
5017
- try {
5018
- const response = yield api.post("/auth/login", {
5019
- email,
5020
- password
5021
- });
5022
- const { token } = response.data;
5023
- api.defaults.headers.common.Authorization = `Bearer ${token}`;
5024
- const { data } = yield api.get("/auth/me");
5025
- setUser(data);
5026
- setStatus("autenticated");
5027
- return true;
5028
- } catch (error) {
5029
- createAlert(error.response.data.error, "error");
5030
- setStatus("unauthenticated");
5031
- throw error;
5032
- }
5033
- });
5034
- function ClientSignOut() {
5035
- return __async(this, null, function* () {
5036
- yield api.get("/auth/logout");
5037
- setUser(void 0);
5038
- });
5039
- }
5050
+ const signIn = _react.useCallback.call(void 0,
5051
+ (_0) => __async(this, [_0], function* ({ email, password }) {
5052
+ setStatus("loading");
5053
+ try {
5054
+ const response = yield api.post("/auth/login", {
5055
+ email,
5056
+ password
5057
+ });
5058
+ const { token } = response.data;
5059
+ api.defaults.headers.common.Authorization = `Bearer ${token}`;
5060
+ const { data } = yield api.get("/auth/me");
5061
+ setUser(data);
5062
+ setStatus("autenticated");
5063
+ return true;
5064
+ } catch (error) {
5065
+ createAlert(error.response.data.error, "error");
5066
+ setStatus("unauthenticated");
5067
+ throw error;
5068
+ }
5069
+ }),
5070
+ [createAlert, api]
5071
+ );
5072
+ const ClientSignOut = _react.useCallback.call(void 0, () => __async(this, null, function* () {
5073
+ yield api.get("/auth/logout");
5074
+ setUser(void 0);
5075
+ }), [api]);
5040
5076
  _react.useEffect.call(void 0, () => {
5041
5077
  const token = _nookies.parseCookies.call(void 0, )[sessionTokenName];
5042
5078
  if (token) {