@elice/material-shared-utils 1.230818.0 → 1.230825.0

package/cjs/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from './useCallbackProp';
+export * from './useDeepClonedCompareEffect';

package/cjs/hooks/useDeepClonedCompareEffect.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useDeepClonedCompareEffect: (effect: React.EffectCallback, deps: React.DependencyList) => void;

package/cjs/hooks/useDeepClonedCompareEffect.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactUse = require('react-use');
+var lodashEs = require('lodash-es');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var DEBOUNCE_TIME = 10;
+var useDeepClonedCompareEffect = function useDeepClonedCompareEffect(effect, deps) {
+  var _ref = React__default["default"].useRef();
+  reactUse.useDebounce(function () {
+    if (!_ref.current || !lodashEs.isEqual(deps, _ref.current)) {
+      _ref.current = lodashEs.cloneDeep(deps);
+      effect();
+    }
+  }, DEBOUNCE_TIME, deps);
+};
+
+exports.useDeepClonedCompareEffect = useDeepClonedCompareEffect;

package/cjs/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var MaterialIntlProvider = require('./components/MaterialIntlProvider.js');
 var useCallbackProp = require('./hooks/useCallbackProp.js');
+var useDeepClonedCompareEffect = require('./hooks/useDeepClonedCompareEffect.js');
 var MaterialConfigProvider = require('./material-config/MaterialConfigProvider.js');
 var useMaterialConfig = require('./material-config/useMaterialConfig.js');
 var useMaterialConfigApiClientUpdate = require('./material-config/useMaterialConfigApiClientUpdate.js');
@@ -16,6 +17,7 @@ var withMaterial = require('./material-hoc/withMaterial.js');
 
 exports.MaterialIntlProvider = MaterialIntlProvider["default"];
 exports.useCallbackProp = useCallbackProp.useCallbackProp;
+exports.useDeepClonedCompareEffect = useDeepClonedCompareEffect.useDeepClonedCompareEffect;
 exports.MaterialConfigProvider = MaterialConfigProvider["default"];
 exports.useMaterialConfig = useMaterialConfig.useMaterialConfig;
 exports.useMaterialConfigApiClientUpdate = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate;

package/es/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from './useCallbackProp';
+export * from './useDeepClonedCompareEffect';

package/es/hooks/useDeepClonedCompareEffect.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useDeepClonedCompareEffect: (effect: React.EffectCallback, deps: React.DependencyList) => void;

package/es/hooks/useDeepClonedCompareEffect.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useDebounce } from 'react-use';
+import { isEqual, cloneDeep } from 'lodash-es';
+
+var DEBOUNCE_TIME = 10;
+var useDeepClonedCompareEffect = function useDeepClonedCompareEffect(effect, deps) {
+  var _ref = React.useRef();
+  useDebounce(function () {
+    if (!_ref.current || !isEqual(deps, _ref.current)) {
+      _ref.current = cloneDeep(deps);
+      effect();
+    }
+  }, DEBOUNCE_TIME, deps);
+};
+
+export { useDeepClonedCompareEffect };

package/es/index.js

@@ -1,5 +1,6 @@
 export { default as MaterialIntlProvider } from './components/MaterialIntlProvider.js';
 export { useCallbackProp } from './hooks/useCallbackProp.js';
+export { useDeepClonedCompareEffect } from './hooks/useDeepClonedCompareEffect.js';
 export { default as MaterialConfigProvider } from './material-config/MaterialConfigProvider.js';
 export { useMaterialConfig } from './material-config/useMaterialConfig.js';
 export { useMaterialConfigApiClientUpdate } from './material-config/useMaterialConfigApiClientUpdate.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-shared-utils",
-  "version": "1.230818.0",
+  "version": "1.230825.0",
   "description": "Shared typings for elice material projects",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -32,14 +32,16 @@
     "recoil": "~0.7.3"
   },
   "dependencies": {
+    "lodash-es": "^4.17.21",
     "tslib": "^2.6.1"
   },
   "devDependencies": {
     "@elice/api-client": "^1.230815.0",
-    "@elice/material-shared-types": "1.230818.0",
+    "@elice/material-shared-types": "1.230825.0",
     "@elice/types": "^1.230815.0",
+    "@types/lodash-es": "^4.17.6",
     "@types/react": "~17.0.9",
     "react-use": "^17.2.4"
   },
-  "gitHead": "7f0e6d7d15c59c7eccf2180f16ba134dab4194e8"
+  "gitHead": "5859affd33ce2d07bb176bad73bc5cf4ed1c4138"
 }