awing-library 2.1.129-beta → 2.1.129

package/lib/ACM-AXN/GeoFencing/GoongMap/index.d.ts

@@ -11,14 +11,14 @@ declare function GoongMap({ onAddPlace, zoom, radius, limit, defaultGoongMap, ma
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace GoongMap {
     namespace propTypes {
-        let onAddPlace: PropTypes.Requireable<(...args: any[]) => any>;
-        let zoom: PropTypes.Requireable<number>;
-        let radius: PropTypes.Requireable<number>;
-        let limit: PropTypes.Requireable<number>;
-        let defaultGoongMap: PropTypes.Requireable<object>;
-        let marker: PropTypes.Requireable<object>;
-        let onLoad: PropTypes.Requireable<(...args: any[]) => any>;
-        let configs: PropTypes.Requireable<object>;
+        let onAddPlace: any;
+        let zoom: any;
+        let radius: any;
+        let limit: any;
+        let defaultGoongMap: any;
+        let marker: any;
+        let onLoad: any;
+        let configs: any;
     }
     namespace defaultProps {
         export function onAddPlace_1(): void;
@@ -45,4 +45,3 @@ declare namespace GoongMap {
         export { configs_1 as configs };
     }
 }
-import PropTypes from "prop-types";

package/lib/ACM-AXN/GeoFencing/component.js

@@ -4,13 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var material_1 = require("@mui/material");
-var react_i18next_1 = require("react-i18next");
 var PinDrop_1 = __importDefault(require("@mui/icons-material/PinDrop"));
+var material_1 = require("@mui/material");
+var AWING_1 = require("../../AWING");
 var react_1 = require("react");
-var GoongMap_1 = __importDefault(require("./GoongMap"));
-var common_1 = require("./common");
+var react_i18next_1 = require("react-i18next");
 var constants_1 = require("../../constants");
+var common_1 = require("./common");
 function Component(props) {
     var t = (0, react_i18next_1.useTranslation)().t;
     var label = props.label, configs = props.configs, marker = props.marker, radius = props.radius, locationString = props.locationString, onChange = props.onChange, onSearch = props.onSearch, onGoongMapSelect = props.onGoongMapSelect, limit = props.limit, isOnlyMap = props.isOnlyMap;
@@ -34,7 +34,7 @@ function Component(props) {
                                     paddingRight: "8px",
                                 }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, label: t("PlaceFilter.Location"), placeholder: t("PlaceFilter.TypeLocation"), variant: "outlined", size: "small", value: locationString, onChange: function (e) {
                                             return onChange("locationString", e.target.value);
-                                        }, onKeyDown: function (e) {
+                                        }, onClick: function () { return setShowMap(true); }, onKeyDown: function (e) {
                                             if (e.key === "Enter") {
                                                 onSearch();
                                             }
@@ -42,7 +42,7 @@ function Component(props) {
                                             !(0, common_1.validateGoogleMapLatLong)(locationString)) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleShowMapChange, style: {
                                             position: "absolute",
                                             right: "12px",
-                                            bottom: "5px",
+                                            bottom: "9px",
                                         }, size: "small", children: (0, jsx_runtime_1.jsx)(PinDrop_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, style: { paddingLeft: "8px" }, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, label: t("PlaceFilter.Radius"), variant: "outlined", size: "small", placeholder: t("PlaceFilter.TypeRadius"), type: "number", value: radius, onChange: function (e) {
                                         if (!e.target.value.includes("-") &&
                                             Number(e.target.value) <=
@@ -55,6 +55,6 @@ function Component(props) {
                                         }
                                     }, error: !!(radius &&
                                         Number(radius) <
-                                            ((limit === null || limit === void 0 ? void 0 : limit.min) || constants_1.MIN_RADIUS)) }) })] })), (isOnlyMap || showMap) && ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, style: { position: "relative", marginTop: "16px" }, children: (0, jsx_runtime_1.jsx)(GoongMap_1.default, { onAddPlace: onGoongMapSelect, marker: marker, configs: configs }) }))] })] }));
+                                            ((limit === null || limit === void 0 ? void 0 : limit.min) || constants_1.MIN_RADIUS)) }) })] })), (isOnlyMap || showMap) && ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, style: { position: "relative", marginTop: "16px" }, children: (0, jsx_runtime_1.jsx)(AWING_1.GoogleMap, { defaultLocation: { lat: (marker === null || marker === void 0 ? void 0 : marker.latitude) || 0, lng: (marker === null || marker === void 0 ? void 0 : marker.longitude) || 0 }, onUpdateLocation: onGoongMapSelect, apiKey: configs.GOOGLE_MAP_KEY, geofenceRadius: radius ? Number(radius) : 0 }) }))] })] }));
 }
 exports.default = Component;

package/lib/ACM-AXN/GeoFencing/interface.d.ts

@@ -1,6 +1,5 @@
 export interface IConfig {
-    GOONG_API_KEY: string;
-    GOONG_MAP_KEY: string;
+    GOOGLE_MAP_KEY: string;
 }
 export interface GeoFencingValue {
     latitude?: number;

package/lib/ACM-AXN/Notifications/NotificationPopover/Container.d.ts

@@ -1,8 +1,3 @@
-/**
- *
- * @author dauquan1108@gmail.com on 12/1/2023.
- *
- **/
 import React from 'react';
 declare const Container: React.FC;
 export default Container;

package/lib/ACM-AXN/Notifications/NotificationPopover/Container.js

@@ -1,109 +1,26 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-/**
- *
- * @author dauquan1108@gmail.com on 12/1/2023.
- *
- **/
-var react_1 = require("react");
-var material_1 = require("@mui/material");
 var Notifications_1 = __importDefault(require("@mui/icons-material/Notifications"));
-var signalr_1 = require("@microsoft/signalr");
+var material_1 = require("@mui/material");
 var Constant_1 = require("../../../ACM-AXN/Common/Constant");
+var react_1 = require("react");
 var Hooks_1 = __importDefault(require("../Hooks"));
 var NotificationDetail_1 = __importDefault(require("../NotificationDetail"));
 var Container = function () {
-    var service = (0, Hooks_1.default)().service;
-    var _a = (0, react_1.useState)(null), anchorEl = _a[0], setAnchorEl = _a[1];
-    var _b = (0, react_1.useState)(0), totalNotification = _b[0], setTotalNotification = _b[1];
-    var _c = (0, react_1.useState)(null), signalRConnection = _c[0], setSignalRConnection = _c[1];
+    var _a = (0, Hooks_1.default)(), service = _a.service, numberNotification = _a.numberNotification, onNotificationClick = _a.onNotificationClick;
+    var _b = (0, react_1.useState)(null), anchorEl = _b[0], setAnchorEl = _b[1];
     (0, react_1.useEffect)(function () {
-        service.notificationsCountUnreadMessages().then(setTotalNotification);
-        setUpSignalRConnection().then(function (connection) { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                setSignalRConnection(connection);
-                return [2 /*return*/];
-            });
-        }); });
-        return function () {
-            if (signalRConnection)
-                signalRConnection.stop();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        service.notificationsCountUnreadMessages().then(onNotificationClick);
     }, []);
-    var setUpSignalRConnection = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var connection, err_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    connection = new signalr_1.HubConnectionBuilder()
-                        .withUrl("".concat(Constant_1.Constants.API_ENDPOINT, "/api/hubs/notification"))
-                        .configureLogging(signalr_1.LogLevel.None)
-                        .withAutomaticReconnect([0, 5000, 10000, 15000])
-                        .build();
-                    connection.on('ReceiveMessage', function (message) {
-                        setTotalNotification(function (prev) { return prev + 1; });
-                    });
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, connection.start()];
-                case 2:
-                    _a.sent();
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_1 = _a.sent();
-                    console.log(err_1);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/, connection];
-            }
-        });
-    }); };
     var handleClick = function (event) {
         var href = window.location.href;
         // nếu đang ở notifications thì click vào quả chuông sẽ không mở popover nữa.
         if (!href.includes(Constant_1.Constants.NOTIFICATIONS_PATH)) {
-            setTotalNotification(0);
+            onNotificationClick(0);
             setAnchorEl(event.currentTarget);
         }
     };
@@ -112,7 +29,7 @@ var Container = function () {
     };
     var open = Boolean(anchorEl);
     var id = open ? 'simple-popover' : undefined;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-describedby": id, onClick: handleClick, sx: { backgroundColor: open ? '#F98D9C' : 'inherit' }, children: (0, jsx_runtime_1.jsx)(material_1.Badge, { badgeContent: totalNotification, color: "error", children: (0, jsx_runtime_1.jsx)(Notifications_1.default, { "data-testid": "notification-icon", sx: { color: open ? '#DD040C' : 'inherit' } }) }) }), (0, jsx_runtime_1.jsx)(material_1.Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, sx: { zIndex: 1100 }, anchorOrigin: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-describedby": id, onClick: handleClick, sx: { backgroundColor: open ? '#F98D9C' : 'inherit' }, children: (0, jsx_runtime_1.jsx)(material_1.Badge, { badgeContent: numberNotification, color: "error", children: (0, jsx_runtime_1.jsx)(Notifications_1.default, { "data-testid": "notification-icon", sx: { color: open ? '#DD040C' : 'inherit' } }) }) }), (0, jsx_runtime_1.jsx)(material_1.Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, sx: { zIndex: 1100 }, anchorOrigin: {
                     vertical: 'bottom',
                     horizontal: 'center',
                 }, transformOrigin: {

package/lib/ACM-AXN/Notifications/NotificationPopover/index.d.ts

@@ -1,8 +1,3 @@
-/**
- *
- * @author dauquan1108@gmail.com on 12/1/2023.
- *
- **/
 import React from 'react';
 import { NotificationPropsContext } from '../Types';
 export declare const NotificationPopover: React.FC<NotificationPropsContext>;

package/lib/ACM-AXN/Notifications/Types.d.ts

@@ -33,6 +33,8 @@ export interface CancelToken {
 }
 export interface NotificationPropsContext {
     service: NotificationService;
+    numberNotification: number;
+    onNotificationClick: (notification: number) => void;
 }
 export interface NotificationService {
     /**

package/lib/ACM-AXN/Page/Container.js

@@ -22,7 +22,7 @@ var PreviewButton_1 = __importDefault(require("../../ACM-AXN/DomainPreview/Previ
 var lodash_1 = require("lodash");
 var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
-var react_router_1 = require("react-router");
+var react_router_dom_1 = require("react-router-dom");
 var Enum_1 = require("../../ACM-AXN/Campaign/Enum");
 var AWING_1 = require("../../AWING");
 var ClassicDrawer_1 = require("../../Commons/Components/ClassicDrawer");
@@ -36,8 +36,8 @@ var PageContainer = function () {
     var _b = (0, Context_2.default)(), pageCode = _b.pageCode, service = _b.service, domainId = _b.domainId, CONFIGS = _b.configs;
     var _c = (0, Context_1.useAwing)().appHelper, confirm = _c.confirm, snackbar = _c.snackbar;
     var t = (0, react_i18next_1.useTranslation)().t;
-    var navigate = (0, react_router_1.useNavigate)();
-    var location = (0, react_router_1.useLocation)();
+    var navigate = (0, react_router_dom_1.useNavigate)();
+    var location = (0, react_router_dom_1.useLocation)();
     var _d = (0, react_1.useState)(true), loading = _d[0], setLoading = _d[1];
     var _e = (0, react_1.useState)(true), init = _e[0], setInit = _e[1]; // First time render
     var _f = (0, react_1.useState)([]), directories = _f[0], setDirectories = _f[1];

package/lib/ACM-AXN/Page/CreateOrEdit/ListenTemplate.d.ts

@@ -0,0 +1,6 @@
+import { ITemplateModel } from '../../../ACM-AXN/Template';
+import { Template } from '../Types';
+export declare const usePageCache: () => {
+    getTemplate: (templateId: string) => Promise<ITemplateModel>;
+    getTemplateList: (directoryId: string) => Promise<Template[]>;
+};

package/lib/ACM-AXN/Page/CreateOrEdit/ListenTemplate.js

@@ -0,0 +1,63 @@
+"use strict";
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageCache = void 0;
+var react_1 = __importDefault(require("react"));
+var Context_1 = __importDefault(require("../Context"));
+var recoil_1 = require("recoil");
+var Recoil_1 = require("./Recoil");
+var usePageCache = function () {
+    var _a = (0, recoil_1.useRecoilState)(Recoil_1.pageCacheData), _b = _a[0], directoryTemplate = _b.directoryTemplate, templates = _b.templates, setPageCache = _a[1];
+    var service = (0, Context_1.default)().service;
+    return {
+        getTemplate: react_1.default.useCallback(function (templateId) {
+            return new Promise(function (resolve) {
+                var template = templates.find(function (item) { return item.template.id === templateId; });
+                if (template)
+                    resolve(template);
+                else
+                    service.templatesGet(templateId).then(function (res) {
+                        setPageCache(function (p) { return (__assign(__assign({}, p), { templates: __spreadArray(__spreadArray([], p.templates, true), [res], false) })); });
+                        resolve(res);
+                    });
+            });
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [templates]),
+        getTemplateList: react_1.default.useCallback(function (directoryId) { return new Promise(function (resolve) {
+            var directory = directoryTemplate.find(function (item) { return item.directoryId === directoryId; });
+            if (directory)
+                resolve(directory.templateList);
+            else {
+                service.templatesGetByDirectoryId(directoryId).then(function (res) {
+                    setPageCache(function (p) { return (__assign(__assign({}, p), { directoryTemplate: __spreadArray(__spreadArray([], p.directoryTemplate, true), [{ directoryId: directoryId, templateList: res }], false) })); });
+                    resolve(res);
+                });
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }); }, [directoryTemplate]),
+    };
+};
+exports.usePageCache = usePageCache;

package/lib/ACM-AXN/Page/CreateOrEdit/Recoil.d.ts

@@ -1,5 +1,6 @@
 import { Directory } from '../../Campaign/Types';
-import { FormValid, PageModel, PageViewEvent } from '../Types';
+import { FormValid, PageModel, PageViewEvent, Template } from '../Types';
+import { ITemplateModel, ITemplateType } from '../../../ACM-AXN/Template';
 export declare const pageDirectoriesState: import("recoil").RecoilState<Directory[]>;
 export declare const wiewMounted: import("recoil").RecoilState<boolean>;
 export declare const pageRootDeirectory: import("recoil").RecoilState<string>;
@@ -9,3 +10,12 @@ export declare const pageEventState: import("recoil").RecoilState<PageViewEvent[
 export declare const validForm: import("recoil").RecoilState<FormValid>;
 export declare const pageState: (param: keyof PageModel) => import("recoil").RecoilState<PageModel>;
 export declare const hasDeprecated: import("recoil").RecoilState<boolean>;
+export declare const pageCacheData: import("recoil").RecoilState<{
+    directoryTemplate: {
+        directoryId: string;
+        templateList: Template[];
+    }[];
+    templates: ITemplateModel[];
+}>;
+export declare const templateTypeState: import("recoil").RecoilState<ITemplateType[]>;
+export declare const templateDirectoriesState: import("recoil").RecoilState<Directory[]>;

package/lib/ACM-AXN/Page/CreateOrEdit/Recoil.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hasDeprecated = exports.pageState = exports.validForm = exports.pageEventState = exports.pageRootState = exports.pageChangedFormState = exports.pageRootDeirectory = exports.wiewMounted = exports.pageDirectoriesState = void 0;
+exports.templateDirectoriesState = exports.templateTypeState = exports.pageCacheData = exports.hasDeprecated = exports.pageState = exports.validForm = exports.pageEventState = exports.pageRootState = exports.pageChangedFormState = exports.pageRootDeirectory = exports.wiewMounted = exports.pageDirectoriesState = void 0;
 var lodash_1 = require("lodash");
 var recoil_1 = require("recoil");
 var Constant_1 = require("../Constant");
@@ -130,3 +130,18 @@ exports.hasDeprecated = (0, recoil_1.atom)({
     key: 'hasDeprecated',
     default: false,
 });
+exports.pageCacheData = (0, recoil_1.atom)({
+    key: 'pageCacheData',
+    default: {
+        directoryTemplate: [],
+        templates: [],
+    },
+});
+exports.templateTypeState = (0, recoil_1.atom)({
+    key: 'templateTypeState',
+    default: [],
+});
+exports.templateDirectoriesState = (0, recoil_1.atom)({
+    key: 'templateDirectoriesState',
+    default: [],
+});

package/lib/ACM-AXN/Page/CreateOrEdit/TabInfo/Utils.js

@@ -79,5 +79,5 @@ var addTrackingCode = function (trackingValid, commonHtml, trackingCode) {
     return commonHtml;
 };
 exports.addTrackingCode = addTrackingCode;
-var validTabInfo = function (infoData) { return !!infoData.directoryId && (0, validation_1.textValidation)(infoData.title, 200).valid; };
+var validTabInfo = function (infoData) { return !!infoData.directoryId && (0, validation_1.textValidation)(infoData.title, 200, true, false).valid; };
 exports.validTabInfo = validTabInfo;

package/lib/ACM-AXN/Page/CreateOrEdit/TabInfo/index.js

@@ -47,6 +47,7 @@ var TabInfomation = function () {
                     {
                         required: true,
                         fieldName: 'title',
+                        pattern: false,
                         type: 'text',
                         length: 200,
                         label: t('Common.Name'),

package/lib/ACM-AXN/Page/CreateOrEdit/Tabview/Components/Panel.d.ts

@@ -1,10 +1,2 @@
-import PropTypes from 'prop-types';
-declare const PageTabPanel: {
-    (props: any): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        index: PropTypes.Validator<any>;
-        value: PropTypes.Validator<any>;
-    };
-};
+declare const PageTabPanel: (props: any) => import("react/jsx-runtime").JSX.Element;
 export default PageTabPanel;

package/lib/ACM-AXN/Page/CreateOrEdit/Tabview/Components/Panel.js

@@ -21,20 +21,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
-var prop_types_1 = __importDefault(require("prop-types"));
 var PageTabPanel = function (props) {
     var children = props.children, value = props.value, index = props.index, other = __rest(props, ["children", "value", "index"]);
     return ((0, jsx_runtime_1.jsx)(material_1.Box, __assign({ component: "div", role: "tabpanel", hidden: value !== index, id: "full-width-tabpanel-".concat(index), "aria-labelledby": "full-width-tab-".concat(index) }, other, { children: value === index && (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { '& > div:first-of-type': { padding: function (theme) { return theme.spacing(1); } }, p: 2 }, children: children }) })));
 };
-PageTabPanel.propTypes = {
-    children: prop_types_1.default.node,
-    index: prop_types_1.default.any.isRequired,
-    value: prop_types_1.default.any.isRequired,
-};
 exports.default = PageTabPanel;

package/lib/ACM-AXN/Page/CreateOrEdit/Tabview/ViewContent.js

@@ -72,11 +72,13 @@ var enums_1 = require("../../enums");
 var Recoil_1 = require("../Recoil");
 var Utils_1 = require("../Utils");
 var Styles_1 = require("./Styles");
+var ListenTemplate_1 = require("../ListenTemplate");
 var ViewContent = function (_a) {
     var _b, _c, _d, _e, _f;
     var viewInfoData = _a.viewInfoData, pageId = _a.pageId, viewNumber = _a.viewNumber, onChange = _a.onChange, isCreate = _a.isCreate;
     var _g = (0, Context_2.default)(), service = _g.service, pageCode = _g.pageCode, domainId = _g.domainId, CONFIGS = _g.configs;
     var appHelper = (0, Context_1.useAwing)().appHelper;
+    var getTemplate = (0, ListenTemplate_1.usePageCache)().getTemplate;
     var _h = react_1.default.useState(''), scriptValidationTemplate = _h[0], setScriptValidationTemplate = _h[1];
     var _j = react_1.default.useState(''), scriptAutoField = _j[0], setScriptAutoField = _j[1];
     var _k = react_1.default.useState(false), loading = _k[0], setLoading = _k[1];
@@ -84,20 +86,17 @@ var ViewContent = function (_a) {
     var rootDirectory = (0, recoil_1.useRecoilValue)(Recoil_1.pageRootDeirectory);
     var _l = (0, recoil_1.useRecoilState)(Recoil_1.pageEventState), events = _l[0], setEvent = _l[1];
     react_1.default.useEffect(function () {
+        onChange(['viewDatas'], []);
         if (viewInfoData === null || viewInfoData === void 0 ? void 0 : viewInfoData.templateId) {
             setLoading(true);
-            service
-                .templatesGet(viewInfoData.templateId)
+            getTemplate(viewInfoData.templateId)
                 .then(handleResData)
                 .finally(function () {
                 setLoading(false);
             });
         }
-        else {
-            onChange(['viewDatas'], []);
-        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [viewInfoData.templateId, viewInfoData.viewDatas.length]);
+    }, [viewInfoData.templateId]);
     react_1.default.useEffect(function () {
         if (!isUniq.current) {
             setEvent(function (prev) {
@@ -123,9 +122,7 @@ var ViewContent = function (_a) {
         setScriptAutoField(res.template.autoField || '');
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    var setChanged = react_1.default.useCallback((0, lodash_1.debounce)(function () {
-        onChange(['isChanged'], true);
-    }, 300), []);
+    var setChanged = function () { onChange(['isChanged'], true); };
     var handleOnChange = function (fieldPath, templateDatasUpdated) {
         var _a;
         var keys = fieldPath.split('.');

package/lib/ACM-AXN/Page/CreateOrEdit/Tabview/ViewInfo.d.ts

@@ -1,12 +1,11 @@
+import { ITemplateType } from '../../../../ACM-AXN/Template/Types';
 import React from 'react';
-import { Directory } from '../../../Campaign/Types';
 import { ViewModel } from '../../Types';
-import { ITemplateType } from '../../../../ACM-AXN/Template/Types';
 interface ViewInfoProps {
     templateTypes: ITemplateType[];
-    directories: Directory[];
     onChange: (keys: string[], value: unknown) => void;
     viewInfoData: ViewModel;
+    viewNumber: number;
 }
 declare const ViewInfo: React.FC<ViewInfoProps>;
 export default ViewInfo;