@elice/material-shared-utils 1.231227.0 → 1.240112.0-cloud.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/cjs/components/MaterialIntlProvider.js +10 -17
- package/cjs/hooks/useCallbackProp.js +3 -9
- package/cjs/hooks/useDeepClonedCompareEffect.js +4 -10
- package/cjs/index.js +2 -4
- package/cjs/material-config/MaterialConfigContext.js +2 -4
- package/cjs/material-config/MaterialConfigProvider.js +18 -31
- package/cjs/material-config/useMaterialConfig.js +2 -4
- package/cjs/material-config/useMaterialConfigApiClientUpdate.js +4 -10
- package/cjs/material-config/utils.js +0 -2
- package/cjs/material-fetch/useMaterialFetch.js +2 -4
- package/cjs/material-fetch/useMaterialFetchRaw.js +53 -73
- package/cjs/material-hoc/withMaterial.js +16 -24
- package/es/components/MaterialIntlProvider.js +8 -11
- package/es/hooks/useCallbackProp.js +3 -3
- package/es/hooks/useDeepClonedCompareEffect.js +4 -4
- package/es/material-config/MaterialConfigContext.js +2 -2
- package/es/material-config/MaterialConfigProvider.js +16 -25
- package/es/material-config/useMaterialConfig.js +2 -2
- package/es/material-config/useMaterialConfigApiClientUpdate.js +4 -8
- package/es/material-fetch/useMaterialFetch.js +2 -2
- package/es/material-fetch/useMaterialFetchRaw.js +53 -71
- package/es/material-hoc/withMaterial.js +6 -8
- package/package.json +6 -6
- package/cjs/_virtual/_rollupPluginBabelHelpers.js +0 -419
- package/es/_virtual/_rollupPluginBabelHelpers.js +0 -405
|
@@ -5,25 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var reactIntl = require('react-intl');
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
-
|
|
12
|
-
var INTL_DEFAULT_LOCALE = 'ko';
|
|
13
|
-
var INTL_DEFAULT_PHRASES = {};
|
|
8
|
+
const INTL_DEFAULT_LOCALE = 'ko';
|
|
9
|
+
const INTL_DEFAULT_PHRASES = {};
|
|
14
10
|
/**
|
|
15
11
|
* IntlProvider for material components.
|
|
16
12
|
*/
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
return locale in phrases ? phrases[locale] : phrases[INTL_DEFAULT_LOCALE];
|
|
25
|
-
}, [locale, phrases]);
|
|
26
|
-
return React__default["default"].createElement(reactIntl.IntlProvider, {
|
|
13
|
+
const MaterialIntlProvider = ({
|
|
14
|
+
children,
|
|
15
|
+
locale = INTL_DEFAULT_LOCALE,
|
|
16
|
+
phrases = INTL_DEFAULT_PHRASES
|
|
17
|
+
}) => {
|
|
18
|
+
const messages = React.useMemo(() => locale in phrases ? phrases[locale] : phrases[INTL_DEFAULT_LOCALE], [locale, phrases]);
|
|
19
|
+
return React.createElement(reactIntl.IntlProvider, {
|
|
27
20
|
children: children,
|
|
28
21
|
locale: locale,
|
|
29
22
|
defaultLocale: INTL_DEFAULT_LOCALE,
|
|
@@ -31,4 +24,4 @@ var MaterialIntlProvider = function MaterialIntlProvider(_ref) {
|
|
|
31
24
|
});
|
|
32
25
|
};
|
|
33
26
|
|
|
34
|
-
exports
|
|
27
|
+
exports.default = MaterialIntlProvider;
|
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var useCallbackProp = function useCallbackProp(cb) {
|
|
12
|
-
var cbRef = React__default["default"].useRef(cb);
|
|
13
|
-
React__default["default"].useEffect(function () {
|
|
5
|
+
const useCallbackProp = cb => {
|
|
6
|
+
const cbRef = React.useRef(cb);
|
|
7
|
+
React.useEffect(() => {
|
|
14
8
|
cbRef.current = cb;
|
|
15
9
|
}, [cb]);
|
|
16
10
|
return cbRef;
|
|
@@ -1,19 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var reactUse = require('react-use');
|
|
7
5
|
var lodashEs = require('lodash-es');
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var DEBOUNCE_TIME = 10;
|
|
14
|
-
var useDeepClonedCompareEffect = function useDeepClonedCompareEffect(effect, deps) {
|
|
15
|
-
var _ref = React__default["default"].useRef();
|
|
16
|
-
reactUse.useDebounce(function () {
|
|
7
|
+
const DEBOUNCE_TIME = 10;
|
|
8
|
+
const useDeepClonedCompareEffect = (effect, deps) => {
|
|
9
|
+
const _ref = React.useRef();
|
|
10
|
+
reactUse.useDebounce(() => {
|
|
17
11
|
if (!_ref.current || !lodashEs.isEqual(deps, _ref.current)) {
|
|
18
12
|
_ref.current = lodashEs.cloneDeep(deps);
|
|
19
13
|
effect();
|
package/cjs/index.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var MaterialIntlProvider = require('./components/MaterialIntlProvider.js');
|
|
6
4
|
var useCallbackProp = require('./hooks/useCallbackProp.js');
|
|
7
5
|
var useDeepClonedCompareEffect = require('./hooks/useDeepClonedCompareEffect.js');
|
|
@@ -15,10 +13,10 @@ var withMaterial = require('./material-hoc/withMaterial.js');
|
|
|
15
13
|
|
|
16
14
|
|
|
17
15
|
|
|
18
|
-
exports.MaterialIntlProvider = MaterialIntlProvider
|
|
16
|
+
exports.MaterialIntlProvider = MaterialIntlProvider.default;
|
|
19
17
|
exports.useCallbackProp = useCallbackProp.useCallbackProp;
|
|
20
18
|
exports.useDeepClonedCompareEffect = useDeepClonedCompareEffect.useDeepClonedCompareEffect;
|
|
21
|
-
exports.MaterialConfigProvider = MaterialConfigProvider
|
|
19
|
+
exports.MaterialConfigProvider = MaterialConfigProvider.default;
|
|
22
20
|
exports.useMaterialConfig = useMaterialConfig.useMaterialConfig;
|
|
23
21
|
exports.useMaterialConfigApiClientUpdate = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate;
|
|
24
22
|
exports.updateMaterialConfigSessionKey = utils.updateMaterialConfigSessionKey;
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var rxjs = require('rxjs');
|
|
7
5
|
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
const MaterialConfigContext = React.createContext(null);
|
|
7
|
+
const sessionKeySubject$ = new rxjs.BehaviorSubject(null);
|
|
10
8
|
|
|
11
9
|
exports.MaterialConfigContext = MaterialConfigContext;
|
|
12
10
|
exports.sessionKeySubject$ = sessionKeySubject$;
|
|
@@ -2,55 +2,42 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
|
|
6
5
|
var React = require('react');
|
|
7
6
|
var MaterialConfigContext = require('./MaterialConfigContext.js');
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
_ref$orgNameShort = _ref.orgNameShort,
|
|
18
|
-
orgNameShortProp = _ref$orgNameShort === void 0 ? 'academy' : _ref$orgNameShort;
|
|
19
|
-
var _React$useState = React__default["default"].useState(orgNameShortProp),
|
|
20
|
-
_React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
|
|
21
|
-
orgNameShort = _React$useState2[0],
|
|
22
|
-
setOrgNameShort = _React$useState2[1];
|
|
23
|
-
var _React$useState3 = React__default["default"].useState(null),
|
|
24
|
-
_React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
|
|
25
|
-
sessionKey = _React$useState4[0],
|
|
26
|
-
setSessionKey = _React$useState4[1];
|
|
8
|
+
const MaterialConfigProvider = ({
|
|
9
|
+
children,
|
|
10
|
+
apiOriginUrl,
|
|
11
|
+
apiWsOriginUrl,
|
|
12
|
+
orgNameShort: orgNameShortProp = 'academy'
|
|
13
|
+
}) => {
|
|
14
|
+
const [orgNameShort, setOrgNameShort] = React.useState(orgNameShortProp);
|
|
15
|
+
const [sessionKey, setSessionKey] = React.useState(null);
|
|
27
16
|
//
|
|
28
17
|
// Update org name short.
|
|
29
18
|
//
|
|
30
|
-
|
|
31
|
-
return setOrgNameShort(orgNameShortProp);
|
|
32
|
-
}, [orgNameShortProp]);
|
|
19
|
+
React.useEffect(() => setOrgNameShort(orgNameShortProp), [orgNameShortProp]);
|
|
33
20
|
//
|
|
34
21
|
// Update session key when session key subject emits.
|
|
35
22
|
//
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
return
|
|
23
|
+
React.useEffect(() => {
|
|
24
|
+
const sub = MaterialConfigContext.sessionKeySubject$.subscribe(setSessionKey);
|
|
25
|
+
return () => {
|
|
39
26
|
sub.unsubscribe();
|
|
40
27
|
};
|
|
41
28
|
}, []);
|
|
42
29
|
//
|
|
43
30
|
//
|
|
44
31
|
//
|
|
45
|
-
return
|
|
32
|
+
return React.createElement(MaterialConfigContext.MaterialConfigContext.Provider, {
|
|
46
33
|
children: children,
|
|
47
34
|
value: {
|
|
48
|
-
apiOriginUrl
|
|
49
|
-
apiWsOriginUrl
|
|
50
|
-
orgNameShort
|
|
51
|
-
sessionKey
|
|
35
|
+
apiOriginUrl,
|
|
36
|
+
apiWsOriginUrl,
|
|
37
|
+
orgNameShort,
|
|
38
|
+
sessionKey
|
|
52
39
|
}
|
|
53
40
|
});
|
|
54
41
|
};
|
|
55
42
|
|
|
56
|
-
exports
|
|
43
|
+
exports.default = MaterialConfigProvider;
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var MaterialConfigContext = require('./MaterialConfigContext.js');
|
|
7
5
|
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
const useMaterialConfig = () => {
|
|
7
|
+
const context = React.useContext(MaterialConfigContext.MaterialConfigContext);
|
|
10
8
|
if (context === undefined) {
|
|
11
9
|
throw new Error('Oops, `useMaterialConfig` must be used within a `MaterialConfigProvider`');
|
|
12
10
|
}
|
|
@@ -1,22 +1,16 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
|
|
6
3
|
var React = require('react');
|
|
7
4
|
var reactUse = require('react-use');
|
|
8
5
|
var MaterialConfigContext = require('./MaterialConfigContext.js');
|
|
9
6
|
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
const useMaterialConfigApiClientUpdate = callback => {
|
|
8
|
+
const context = React.useContext(MaterialConfigContext.MaterialConfigContext);
|
|
12
9
|
if (!context) {
|
|
13
10
|
throw new Error('Oops, Elice material component must be used within a `MaterialConfigProvider`');
|
|
14
11
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
isReady = _useState2[0],
|
|
18
|
-
setReady = _useState2[1];
|
|
19
|
-
reactUse.useDeepCompareEffect(function () {
|
|
12
|
+
const [isReady, setReady] = React.useState(false);
|
|
13
|
+
reactUse.useDeepCompareEffect(() => {
|
|
20
14
|
var _a;
|
|
21
15
|
callback({
|
|
22
16
|
apiBaseUrl: context.apiOriginUrl,
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
require('react');
|
|
6
4
|
require('../material-config/MaterialConfigContext.js');
|
|
7
5
|
var useMaterialConfigApiClientUpdate = require('../material-config/useMaterialConfigApiClientUpdate.js');
|
|
@@ -28,8 +26,8 @@ var useMaterialFetchRaw = require('./useMaterialFetchRaw.js');
|
|
|
28
26
|
* eliceApiClientConfigs.init
|
|
29
27
|
* );
|
|
30
28
|
*/
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
const useMaterialFetch = (materialType, materialFetchFn, init) => {
|
|
30
|
+
const isReady = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate(init);
|
|
33
31
|
return useMaterialFetchRaw.useMaterialFetchRaw(materialType, materialFetchFn, isReady);
|
|
34
32
|
};
|
|
35
33
|
|
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
|
|
6
3
|
var React = require('react');
|
|
7
4
|
var apiClient = require('@elice/api-client');
|
|
8
5
|
var types = require('@elice/types');
|
|
9
6
|
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
const MATERIAL_FETCH_KEY_MAP = Object.freeze({
|
|
8
|
+
[types.enums.LectureMaterialType.Nothing]: 'materialNothing',
|
|
9
|
+
[types.enums.LectureMaterialType.Note]: 'materialNote',
|
|
10
|
+
[types.enums.LectureMaterialType.Video]: 'materialVideo',
|
|
11
|
+
[types.enums.LectureMaterialType.PDF]: 'materialPdf',
|
|
12
|
+
[types.enums.LectureMaterialType.Exercise]: 'materialExercise',
|
|
13
|
+
[types.enums.LectureMaterialType.Quiz]: 'materialQuiz',
|
|
14
|
+
[types.enums.LectureMaterialType.LegacyRunbox]: 'materialLegacyRunbox',
|
|
15
|
+
[types.enums.LectureMaterialType.VideoFile]: 'materialVideoFile',
|
|
16
|
+
[types.enums.LectureMaterialType.Live]: 'materialLive',
|
|
17
|
+
[types.enums.LectureMaterialType.Assignment]: 'materialAssignment',
|
|
18
|
+
[types.enums.LectureMaterialType.LMSPublicContent]: 'materialLmsPublicContent',
|
|
19
|
+
[types.enums.LectureMaterialType.External]: 'materialExternal',
|
|
20
|
+
[types.enums.LectureMaterialType.Survey]: 'materialSurvey',
|
|
21
|
+
[types.enums.LectureMaterialType.Runbox]: 'materialRunbox'
|
|
22
|
+
});
|
|
12
23
|
//
|
|
13
24
|
//
|
|
14
25
|
//
|
|
@@ -30,85 +41,54 @@ var MATERIAL_FETCH_KEY_MAP = Object.freeze((_Object$freeze = {}, _rollupPluginBa
|
|
|
30
41
|
* isReady // boolean
|
|
31
42
|
* );
|
|
32
43
|
*/
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
|
43
|
-
matFetchRes = _useState2[0],
|
|
44
|
-
setMatFetchRes = _useState2[1];
|
|
45
|
-
var _useState3 = React.useState('idle'),
|
|
46
|
-
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
|
47
|
-
matFetchStatus = _useState4[0],
|
|
48
|
-
setMatFetchStatus = _useState4[1];
|
|
44
|
+
const useMaterialFetchRaw = (materialType, materialFetchFn, isReady = true) => {
|
|
45
|
+
const _return = React.useRef({});
|
|
46
|
+
const materialKey = MATERIAL_FETCH_KEY_MAP[materialType];
|
|
47
|
+
const _createEmptyFetchRes = () => ({
|
|
48
|
+
[materialKey]: null,
|
|
49
|
+
materialLecturePage: null
|
|
50
|
+
});
|
|
51
|
+
const [matFetchRes, setMatFetchRes] = React.useState(_createEmptyFetchRes);
|
|
52
|
+
const [matFetchStatus, setMatFetchStatus] = React.useState('idle');
|
|
49
53
|
/**
|
|
50
54
|
* fetch material and lecture page
|
|
51
55
|
*/
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
var _setMatFetchRes;
|
|
77
|
-
var _ref4 = _rollupPluginBabelHelpers.slicedToArray(_ref3, 2),
|
|
78
|
-
material = _ref4[0],
|
|
79
|
-
materialLecturePage = _ref4[1];
|
|
80
|
-
setMatFetchRes((_setMatFetchRes = {}, _rollupPluginBabelHelpers.defineProperty(_setMatFetchRes, materialKey, material), _rollupPluginBabelHelpers.defineProperty(_setMatFetchRes, "materialLecturePage", materialLecturePage), _setMatFetchRes));
|
|
81
|
-
setMatFetchStatus('resolved');
|
|
82
|
-
}).catch(function (err) {
|
|
83
|
-
if (err.name !== 'AbortError') {
|
|
84
|
-
setMatFetchRes(_createEmptyFetchRes);
|
|
85
|
-
setMatFetchStatus('rejected');
|
|
86
|
-
}
|
|
87
|
-
}));
|
|
88
|
-
case 2:
|
|
89
|
-
case "end":
|
|
90
|
-
return _context.stop();
|
|
91
|
-
}
|
|
92
|
-
}, _callee);
|
|
93
|
-
}));
|
|
94
|
-
return function (_x) {
|
|
95
|
-
return _ref2.apply(this, arguments);
|
|
96
|
-
};
|
|
97
|
-
}(),
|
|
56
|
+
const fetch = React.useCallback(async signal => {
|
|
57
|
+
setMatFetchStatus('pending');
|
|
58
|
+
return materialFetchFn(signal).then(resMaterialGet => resMaterialGet[materialKey]).then(material => Promise.all([material, apiClient.getOrgLecturePageResolve({
|
|
59
|
+
materialId: material.id,
|
|
60
|
+
materialType
|
|
61
|
+
}, {
|
|
62
|
+
signal: signal
|
|
63
|
+
}).then(resLecturePageResolve => apiClient.getOrgLecturePageGet({
|
|
64
|
+
lecturePageId: resLecturePageResolve.lecturePageId
|
|
65
|
+
}, {
|
|
66
|
+
signal: signal
|
|
67
|
+
})).then(resLecturePageGet => resLecturePageGet.lecturePage)])).then(([material, materialLecturePage]) => {
|
|
68
|
+
setMatFetchRes({
|
|
69
|
+
[materialKey]: material,
|
|
70
|
+
materialLecturePage
|
|
71
|
+
});
|
|
72
|
+
setMatFetchStatus('resolved');
|
|
73
|
+
}).catch(err => {
|
|
74
|
+
if (err.name !== 'AbortError') {
|
|
75
|
+
setMatFetchRes(_createEmptyFetchRes);
|
|
76
|
+
setMatFetchStatus('rejected');
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
},
|
|
98
80
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
99
81
|
[materialKey, materialFetchFn]);
|
|
100
82
|
//
|
|
101
83
|
// emit `fetch` when `isReady` is changed
|
|
102
84
|
//
|
|
103
|
-
React.useEffect(
|
|
85
|
+
React.useEffect(() => {
|
|
104
86
|
if (!isReady) {
|
|
105
87
|
return;
|
|
106
88
|
}
|
|
107
|
-
|
|
108
|
-
fetch(abortCtrl.signal).catch(
|
|
109
|
-
|
|
110
|
-
});
|
|
111
|
-
return function () {
|
|
89
|
+
const abortCtrl = new AbortController();
|
|
90
|
+
fetch(abortCtrl.signal).catch(() => void 0);
|
|
91
|
+
return () => {
|
|
112
92
|
abortCtrl.abort();
|
|
113
93
|
};
|
|
114
94
|
},
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var blocks = require('@elice/blocks');
|
|
7
5
|
var recoil = require('recoil');
|
|
@@ -9,10 +7,6 @@ var MaterialIntlProvider = require('../components/MaterialIntlProvider.js');
|
|
|
9
7
|
require('../material-config/MaterialConfigContext.js');
|
|
10
8
|
var useMaterialConfigApiClientUpdate = require('../material-config/useMaterialConfigApiClientUpdate.js');
|
|
11
9
|
|
|
12
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
|
-
|
|
14
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
15
|
-
|
|
16
10
|
//
|
|
17
11
|
//
|
|
18
12
|
//
|
|
@@ -23,28 +17,27 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
23
17
|
* - `<RecoilRoot />`
|
|
24
18
|
* - `<IntlProvider />`
|
|
25
19
|
*/
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
return function (props) {
|
|
20
|
+
const withMaterial = (Component, eliceApiClientConfigInit, options = {}) => {
|
|
21
|
+
return props => {
|
|
29
22
|
var _a;
|
|
30
|
-
|
|
23
|
+
const isReady = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate(eliceApiClientConfigInit);
|
|
31
24
|
// do not render component, if material config is not ready
|
|
32
25
|
if (!isReady) {
|
|
33
|
-
return
|
|
26
|
+
return React.createElement(blocks.Flex, {
|
|
34
27
|
justify: "center",
|
|
35
28
|
align: "center",
|
|
36
29
|
width: "100%",
|
|
37
30
|
height: "100%"
|
|
38
|
-
},
|
|
31
|
+
}, React.createElement(blocks.Spinner, {
|
|
39
32
|
size: "small"
|
|
40
33
|
}));
|
|
41
34
|
}
|
|
42
|
-
return
|
|
35
|
+
return React.createElement(recoil.RecoilRoot, {
|
|
43
36
|
override: (_a = options.overrideRecoilScope) !== null && _a !== void 0 ? _a : false
|
|
44
|
-
},
|
|
37
|
+
}, React.createElement(MaterialIntlProvider.default, {
|
|
45
38
|
locale: props.locale,
|
|
46
39
|
phrases: options.phrases
|
|
47
|
-
},
|
|
40
|
+
}, React.createElement(Component, Object.assign({}, props))));
|
|
48
41
|
};
|
|
49
42
|
};
|
|
50
43
|
/**
|
|
@@ -54,28 +47,27 @@ var withMaterial = function withMaterial(Component, eliceApiClientConfigInit) {
|
|
|
54
47
|
* - `<RecoilRoot />`
|
|
55
48
|
* - `<IntlProvider />`
|
|
56
49
|
*/
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
return React.forwardRef(function (props, ref) {
|
|
50
|
+
const withForwardRefMaterial = (Component, eliceApiClientConfigInit, options = {}) => {
|
|
51
|
+
return React.forwardRef((props, ref) => {
|
|
60
52
|
var _a;
|
|
61
|
-
|
|
53
|
+
const isReady = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate(eliceApiClientConfigInit);
|
|
62
54
|
// do not render component, if material config is not ready
|
|
63
55
|
if (!isReady) {
|
|
64
|
-
return
|
|
56
|
+
return React.createElement(blocks.Flex, {
|
|
65
57
|
justify: "center",
|
|
66
58
|
align: "center",
|
|
67
59
|
width: "100%",
|
|
68
60
|
height: "100%"
|
|
69
|
-
},
|
|
61
|
+
}, React.createElement(blocks.Spinner, {
|
|
70
62
|
size: "small"
|
|
71
63
|
}));
|
|
72
64
|
}
|
|
73
|
-
return
|
|
65
|
+
return React.createElement(recoil.RecoilRoot, {
|
|
74
66
|
override: (_a = options.overrideRecoilScope) !== null && _a !== void 0 ? _a : false
|
|
75
|
-
},
|
|
67
|
+
}, React.createElement(MaterialIntlProvider.default, {
|
|
76
68
|
locale: props.locale,
|
|
77
69
|
phrases: options.phrases
|
|
78
|
-
},
|
|
70
|
+
}, React.createElement(Component, Object.assign({}, props, {
|
|
79
71
|
ref: ref
|
|
80
72
|
}))));
|
|
81
73
|
});
|
|
@@ -1,20 +1,17 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { IntlProvider } from 'react-intl';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
const INTL_DEFAULT_LOCALE = 'ko';
|
|
5
|
+
const INTL_DEFAULT_PHRASES = {};
|
|
6
6
|
/**
|
|
7
7
|
* IntlProvider for material components.
|
|
8
8
|
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var messages = React.useMemo(function () {
|
|
16
|
-
return locale in phrases ? phrases[locale] : phrases[INTL_DEFAULT_LOCALE];
|
|
17
|
-
}, [locale, phrases]);
|
|
9
|
+
const MaterialIntlProvider = ({
|
|
10
|
+
children,
|
|
11
|
+
locale = INTL_DEFAULT_LOCALE,
|
|
12
|
+
phrases = INTL_DEFAULT_PHRASES
|
|
13
|
+
}) => {
|
|
14
|
+
const messages = React.useMemo(() => locale in phrases ? phrases[locale] : phrases[INTL_DEFAULT_LOCALE], [locale, phrases]);
|
|
18
15
|
return React.createElement(IntlProvider, {
|
|
19
16
|
children: children,
|
|
20
17
|
locale: locale,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
React.useEffect(
|
|
3
|
+
const useCallbackProp = cb => {
|
|
4
|
+
const cbRef = React.useRef(cb);
|
|
5
|
+
React.useEffect(() => {
|
|
6
6
|
cbRef.current = cb;
|
|
7
7
|
}, [cb]);
|
|
8
8
|
return cbRef;
|
|
@@ -2,10 +2,10 @@ import React from 'react';
|
|
|
2
2
|
import { useDebounce } from 'react-use';
|
|
3
3
|
import { isEqual, cloneDeep } from 'lodash-es';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
useDebounce(
|
|
5
|
+
const DEBOUNCE_TIME = 10;
|
|
6
|
+
const useDeepClonedCompareEffect = (effect, deps) => {
|
|
7
|
+
const _ref = React.useRef();
|
|
8
|
+
useDebounce(() => {
|
|
9
9
|
if (!_ref.current || !isEqual(deps, _ref.current)) {
|
|
10
10
|
_ref.current = cloneDeep(deps);
|
|
11
11
|
effect();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createContext } from 'react';
|
|
2
2
|
import { BehaviorSubject } from 'rxjs';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
const MaterialConfigContext = createContext(null);
|
|
5
|
+
const sessionKeySubject$ = new BehaviorSubject(null);
|
|
6
6
|
|
|
7
7
|
export { MaterialConfigContext, sessionKeySubject$ };
|