react-hook-core 0.0.1 → 0.1.0

package/lib/components.js

@@ -23,46 +23,10 @@ var __assign = (this && this.__assign) || function () {
   };
   return __assign.apply(this, arguments);
 };
-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 (_) 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 };
-  }
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var reflectx_1 = require("reflectx");
-var search_utilities_1 = require("search-utilities");
+var search_core_1 = require("search-core");
 var core_1 = require("./core");
 var core_2 = require("./core");
 var diff_1 = require("./diff");
@@ -85,13 +49,15 @@ var ViewComponent = (function (_super) {
         _this.loadData = sv;
       }
       else {
-        _this.service = sv;
-        if (_this.service.metadata) {
-          var m = _this.service.metadata();
+        _this.loadData = sv.load;
+        if (sv.metadata) {
+          var m = sv.metadata();
           if (m) {
             _this.metadata = m;
             var meta = edit_1.build(m);
-            _this.keys = meta.keys;
+            if (meta) {
+              _this.keys = meta.keys;
+            }
           }
         }
       }
@@ -118,71 +84,49 @@ var ViewComponent = (function (_super) {
     if (!n || n.length === 0) {
       return 'model';
     }
+    else {
+      return n;
+    }
   };
   ViewComponent.prototype.componentDidMount = function () {
     this.form = this.ref.current;
     var id = core_2.buildId(this.props, this.keys);
-    this.load(id);
+    if (id) {
+      this.load(id);
+    }
   };
   ViewComponent.prototype.load = function (_id, callback) {
-    return __awaiter(this, void 0, void 0, function () {
-      var id, ctx, obj, err_1, data;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            id = _id;
-            if (!(id != null && id !== '')) return [3, 8];
-            this.running = true;
-            if (this.loading) {
-              this.loading.showLoading();
-            }
-            _a.label = 1;
-          case 1:
-            _a.trys.push([1, 6, 7, 8]);
-            ctx = {};
-            obj = void 0;
-            if (!this.loadData) return [3, 3];
-            return [4, this.loadData(id, ctx)];
-          case 2:
-            obj = _a.sent();
-            return [3, 5];
-          case 3: return [4, this.service.load(id, ctx)];
-          case 4:
-            obj = _a.sent();
-            _a.label = 5;
-          case 5:
-            if (!obj) {
-              this.handleNotFound(this.form);
-            }
-            else {
-              if (callback) {
-                callback(obj, this.showModel);
-              }
-              else {
-                this.showModel(obj);
-              }
-            }
-            return [3, 8];
-          case 6:
-            err_1 = _a.sent();
-            data = (err_1 && err_1.response) ? err_1.response : err_1;
-            if (data && data.status === 404) {
-              this.handleNotFound(this.form);
-            }
-            else {
-              core_2.error(err_1, this.resourceService.value, this.showError);
-            }
-            return [3, 8];
-          case 7:
-            this.running = false;
-            if (this.loading) {
-              this.loading.hideLoading();
-            }
-            return [7];
-          case 8: return [2];
+    var id = _id;
+    if (id != null && id !== '' && this.loadData) {
+      this.running = true;
+      core_1.showLoading(this.loading);
+      var com_1 = this;
+      this.loadData(id).then(function (obj) {
+        if (!obj) {
+          com_1.handleNotFound(com_1.form);
         }
+        else {
+          if (callback) {
+            callback(obj, com_1.showModel);
+          }
+          else {
+            com_1.showModel(obj);
+          }
+        }
+        com_1.running = false;
+        core_1.hideLoading(com_1.loading);
+      }).catch(function (err) {
+        var data = (err && err.response) ? err.response : err;
+        if (data && data.status === 404) {
+          com_1.handleNotFound(com_1.form);
+        }
+        else {
+          core_2.error(err, com_1.resourceService.value, com_1.showError);
+        }
+        com_1.running = false;
+        core_1.hideLoading(com_1.loading);
       });
-    });
+    }
   };
   ViewComponent.prototype.handleNotFound = function (form) {
     var msg = core_2.message(this.resourceService.value, 'error_not_found', 'error');
@@ -300,10 +244,62 @@ var BaseComponent = (function (_super) {
   return BaseComponent;
 }(React.Component));
 exports.BaseComponent = BaseComponent;
+var MessageComponent = (function (_super) {
+  __extends(MessageComponent, _super);
+  function MessageComponent(props, getLocale, removeErr) {
+    var _this = _super.call(this, props, getLocale, removeErr) || this;
+    _this.alertClass = '';
+    _this.showMessage = function (msg) {
+      _this.alertClass = 'alert alert-info';
+      _this.setState({ message: msg });
+    };
+    _this.showError = function (msg) {
+      _this.alertClass = 'alert alert-error';
+      if (typeof msg === 'string') {
+        _this.setState({ message: msg });
+      }
+      else if (Array.isArray(msg) && msg.length > 0) {
+        _this.setState({ message: msg[0].message });
+      }
+      else {
+        var x = JSON.stringify(msg);
+        _this.setState({ message: x });
+      }
+    };
+    _this.hideMessage = function () {
+      _this.alertClass = '';
+      _this.setState({ message: '' });
+    };
+    _this.getModelName = _this.getModelName.bind(_this);
+    _this.showMessage = _this.showMessage.bind(_this);
+    _this.showError = _this.showError.bind(_this);
+    _this.hideMessage = _this.hideMessage.bind(_this);
+    _this.ref = React.createRef();
+    return _this;
+  }
+  MessageComponent.prototype.getModelName = function (f) {
+    if (this.name && this.name.length > 0) {
+      return this.name;
+    }
+    var f2 = f;
+    if (!f2) {
+      f2 = this.form;
+    }
+    if (f2) {
+      var a = core_2.getModelName(f2);
+      if (a && a.length > 0) {
+        return a;
+      }
+    }
+    return 'model';
+  };
+  return MessageComponent;
+}(BaseComponent));
+exports.MessageComponent = MessageComponent;
 var BaseSearchComponent = (function (_super) {
   __extends(BaseSearchComponent, _super);
   function BaseSearchComponent(props, resourceService, showMessage, getLocale, ui, loading, listFormId) {
-    var _this = _super.call(this, props, getLocale, (ui ? ui.removeError : null)) || this;
+    var _this = _super.call(this, props, getLocale, (ui ? ui.removeError : undefined)) || this;
     _this.resourceService = resourceService;
     _this.showMessage = showMessage;
     _this.ui = ui;
@@ -326,16 +322,12 @@ var BaseSearchComponent = (function (_super) {
       var url = _this.props['props'].match.url + '/add';
       _this.props.history.push(url);
     };
-    _this.pagingOnClick = function (size, e) {
-      _this.setState(function (prevState) { return ({ isPageSizeOpenDropDown: !prevState.isPageSizeOpenDropDown }); });
-      _this.pageSizeChanged(size);
-    };
     _this.pageSizeOnClick = function () {
       _this.setState(function (prevState) { return ({ isPageSizeOpenDropDown: !prevState.isPageSizeOpenDropDown }); });
     };
     _this.pageSizeChanged = function (event) {
-      var size = parseInt(event.currentTarget.value, null);
-      search_utilities_1.changePageSize(_this, size);
+      var size = parseInt(event.currentTarget.value, 10);
+      search_core_1.changePageSize(_this, size);
       _this.tmpPageIndex = 1;
       _this.doSearch();
     };
@@ -347,11 +339,11 @@ var BaseSearchComponent = (function (_super) {
     _this.add = _this.add.bind(_this);
     _this.getSearchForm = _this.getSearchForm.bind(_this);
     _this.setSearchForm = _this.setSearchForm.bind(_this);
-    _this.setSearchModel = _this.setSearchModel.bind(_this);
-    _this.getSearchModel = _this.getSearchModel.bind(_this);
-    _this.getDisplayFields = _this.getDisplayFields.bind(_this);
+    _this.setFilter = _this.setFilter.bind(_this);
+    _this.getFilter = _this.getFilter.bind(_this);
+    _this.getFields = _this.getFields.bind(_this);
     _this.pageSizeChanged = _this.pageSizeChanged.bind(_this);
-    _this.clearKeyword = _this.clearKeyword.bind(_this);
+    _this.clearQ = _this.clearQ.bind(_this);
     _this.searchOnClick = _this.searchOnClick.bind(_this);
     _this.resetAndSearch = _this.resetAndSearch.bind(_this);
     _this.doSearch = _this.doSearch.bind(_this);
@@ -367,14 +359,14 @@ var BaseSearchComponent = (function (_super) {
     return _this;
   }
   BaseSearchComponent.prototype.getModelName = function () {
-    return 'model';
+    return 'filter';
   };
   BaseSearchComponent.prototype.toggleFilter = function (event) {
     this.hideFilter = !this.hideFilter;
   };
   BaseSearchComponent.prototype.load = function (s, autoSearch) {
-    var obj2 = search_utilities_1.initSearchable(s, this);
-    this.setSearchModel(obj2);
+    var obj2 = search_core_1.initFilter(s, this);
+    this.setFilter(obj2);
     var com = this;
     if (autoSearch) {
       setTimeout(function () {
@@ -391,29 +383,35 @@ var BaseSearchComponent = (function (_super) {
     }
     return this.form;
   };
-  BaseSearchComponent.prototype.setSearchModel = function (searchModel) {
-    this.setState(searchModel);
+  BaseSearchComponent.prototype.setFilter = function (filter) {
+    this.setState(filter);
   };
   BaseSearchComponent.prototype.getCurrencyCode = function () {
     return core_2.getCurrencyCode(this.form);
   };
-  BaseSearchComponent.prototype.getSearchModel = function () {
+  BaseSearchComponent.prototype.getFilter = function () {
     var name = this.getModelName();
-    var lc = this.getLocale();
+    var lc;
+    if (this.getLocale) {
+      lc = this.getLocale();
+    }
+    if (!lc) {
+      lc = state_1.enLocale;
+    }
     var cc = this.getCurrencyCode();
-    var fields = this.getDisplayFields();
+    var fields = this.getFields();
     var l = this.getList();
     var f = this.getSearchForm();
-    var dc = (this.ui ? this.ui.decodeFromForm : null);
-    var obj3 = search_utilities_1.getModel(this.state, name, this, fields, this.excluding, this.keys, l, f, dc, lc, cc);
+    var dc = (this.ui ? this.ui.decodeFromForm : undefined);
+    var obj3 = search_core_1.getModel(this.state, name, this, fields, this.excluding, this.keys, l, f, dc, lc, cc);
     return obj3;
   };
-  BaseSearchComponent.prototype.getDisplayFields = function () {
-    var fs = search_utilities_1.getDisplayFieldsFromForm(this.displayFields, this.initDisplayFields, this.form);
-    this.initDisplayFields = true;
+  BaseSearchComponent.prototype.getFields = function () {
+    var fs = search_core_1.getFieldsFromForm(this.fields, this.initFields, this.form);
+    this.initFields = true;
     return fs;
   };
-  BaseSearchComponent.prototype.clearKeyword = function () {
+  BaseSearchComponent.prototype.clearQ = function () {
     var m = this.state.model;
     if (m) {
       m.q = '';
@@ -443,7 +441,7 @@ var BaseSearchComponent = (function (_super) {
       this.triggerSearch = true;
       return;
     }
-    search_utilities_1.reset(this);
+    search_core_1.reset(this);
     this.tmpPageIndex = 1;
     this.doSearch();
   };
@@ -453,18 +451,16 @@ var BaseSearchComponent = (function (_super) {
     if (listForm && this.ui) {
       this.ui.removeFormError(listForm);
     }
-    var s = this.getSearchModel();
+    var s = this.getFilter();
     var com = this;
     this.validateSearch(s, function () {
       if (com.running === true) {
         return;
       }
       com.running = true;
-      if (_this.loading) {
-        _this.loading.showLoading();
-      }
+      core_1.showLoading(_this.loading);
       if (!_this.ignoreUrlParam) {
-        search_utilities_1.addParametersIntoUrl(s, isFirstLoad);
+        search_core_1.addParametersIntoUrl(s, isFirstLoad);
       }
       com.call(s);
     });
@@ -473,15 +469,15 @@ var BaseSearchComponent = (function (_super) {
   };
   BaseSearchComponent.prototype.validateSearch = function (se, callback) {
     var u = this.ui;
-    var vl = (u ? u.validateForm : null);
-    search_utilities_1.validate(se, callback, this.getSearchForm(), this.getLocale(), vl);
+    var vl = (u ? u.validateForm : undefined);
+    search_core_1.validate(se, callback, this.getSearchForm(), state_1.localeOf(undefined, this.getLocale), vl);
   };
   BaseSearchComponent.prototype.showResults = function (s, sr) {
     var com = this;
     var results = sr.list;
     if (results && results.length > 0) {
-      var lc = this.getLocale();
-      search_utilities_1.formatResultsByComponent(results, com, lc);
+      var lc = state_1.localeOf(undefined, this.getLocale);
+      search_core_1.formatResultsByComponent(results, com, lc);
     }
     var am = com.appendMode;
     com.pageIndex = (s.page && s.page >= 1 ? s.page : 1);
@@ -490,12 +486,12 @@ var BaseSearchComponent = (function (_super) {
     }
     if (am) {
       var limit = s.limit;
-      if (s.page <= 1 && s.firstLimit && s.firstLimit > 0) {
+      if ((!s.page || s.page <= 1) && s.firstLimit && s.firstLimit > 0) {
         limit = s.firstLimit;
       }
       com.nextPageToken = sr.nextPageToken;
-      search_utilities_1.handleAppend(com, limit, sr.list, sr.nextPageToken);
-      if (com.append && s.page > 1) {
+      search_core_1.handleAppend(com, sr.list, limit, sr.nextPageToken);
+      if (com.append && (s.page && s.page > 1)) {
         com.appendList(results);
       }
       else {
@@ -503,25 +499,24 @@ var BaseSearchComponent = (function (_super) {
       }
     }
     else {
-      search_utilities_1.showPaging(com, s.limit, sr.list, sr.total);
+      search_core_1.showPaging(com, sr.list, s.limit, sr.total);
       com.setList(results);
       com.tmpPageIndex = s.page;
-      var m1 = search_utilities_1.buildSearchMessage(this.resourceService, s.page, s.limit, sr.list, sr.total);
-      this.showMessage(m1);
-    }
-    com.running = false;
-    if (this.loading) {
-      this.loading.hideLoading();
+      if (s.limit) {
+        this.showMessage(search_core_1.buildMessage(this.resourceService, s.page, s.limit, sr.list, sr.total));
+      }
     }
+    com.running = undefined;
+    core_1.hideLoading(com.loading);
     if (com.triggerSearch) {
-      com.triggerSearch = false;
+      com.triggerSearch = undefined;
       com.resetAndSearch();
     }
   };
   BaseSearchComponent.prototype.appendList = function (results) {
     var _a;
     var list = this.state.list;
-    var arr = search_utilities_1.append(list, results);
+    var arr = search_core_1.append(list, results);
     var listForm = this.getSearchForm();
     var props = this.props;
     var setGlobalState = props.props.setGlobalState;
@@ -550,7 +545,7 @@ var BaseSearchComponent = (function (_super) {
   };
   BaseSearchComponent.prototype.sort = function (event) {
     event.preventDefault();
-    search_utilities_1.handleSortEvent(event, this);
+    search_core_1.handleSortEvent(event, this);
     if (!this.appendMode) {
       this.doSearch();
     }
@@ -561,12 +556,12 @@ var BaseSearchComponent = (function (_super) {
   BaseSearchComponent.prototype.showMore = function (event) {
     event.preventDefault();
     this.tmpPageIndex = this.pageIndex;
-    search_utilities_1.more(this);
+    search_core_1.more(this);
     this.doSearch();
   };
   BaseSearchComponent.prototype.pageChanged = function (data) {
     var currentPage = data.currentPage, itemsPerPage = data.itemsPerPage;
-    search_utilities_1.changePage(this, currentPage, itemsPerPage);
+    search_core_1.changePage(this, currentPage, itemsPerPage);
     this.doSearch();
   };
   return BaseSearchComponent;
@@ -583,90 +578,70 @@ var SearchComponent = (function (_super) {
         _this.search = x;
       }
       else {
-        _this.service = sv;
-        if (_this.service.keys) {
-          _this.keys = _this.service.keys();
+        _this.search = sv.search;
+        if (sv.keys) {
+          _this.keys = sv.keys();
         }
       }
     }
     _this.call = _this.call.bind(_this);
     _this.showError = input_1.getErrorFunc(param, showError);
     _this.componentDidMount = _this.componentDidMount.bind(_this);
-    _this.mergeSearchModel = _this.mergeSearchModel.bind(_this);
-    _this.createSearchModel = _this.createSearchModel.bind(_this);
+    _this.mergeFilter = _this.mergeFilter.bind(_this);
+    _this.createFilter = _this.createFilter.bind(_this);
     _this.ref = React.createRef();
     return _this;
   }
   SearchComponent.prototype.componentDidMount = function () {
-    var k = (this.ui ? this.ui.registerEvents : null);
+    var k = (this.ui ? this.ui.registerEvents : undefined);
     this.form = core_2.initForm(this.ref.current, k);
-    var s = this.mergeSearchModel(route_1.buildFromUrl(), this.createSearchModel());
+    var s = this.mergeFilter(route_1.buildFromUrl(), this.createFilter());
     this.load(s, this.autoSearch);
   };
-  SearchComponent.prototype.mergeSearchModel = function (obj, b, arrs) {
-    return search_utilities_1.mergeSearchModel(obj, b, this.pageSizes, arrs);
+  SearchComponent.prototype.mergeFilter = function (obj, b, arrs) {
+    return search_core_1.mergeFilter(obj, b, this.pageSizes, arrs);
   };
-  SearchComponent.prototype.createSearchModel = function () {
+  SearchComponent.prototype.createFilter = function () {
     var s = {};
     return s;
   };
   SearchComponent.prototype.call = function (se) {
-    return __awaiter(this, void 0, void 0, function () {
-      var s, page, offset, limit, next, fields, sr, sr, err_2;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            _a.trys.push([0, 5, 6, 7]);
-            this.running = true;
-            s = reflectx_1.clone(se);
-            page = this.pageIndex;
-            if (!page || page < 1) {
-              page = 1;
-            }
-            offset = void 0;
-            if (se.firstLimit && se.firstLimit > 0) {
-              offset = se.limit * (page - 2) + se.firstLimit;
-            }
-            else {
-              offset = se.limit * (page - 1);
-            }
-            limit = (page <= 1 && se.firstLimit && se.firstLimit > 0 ? se.firstLimit : se.limit);
-            next = (this.nextPageToken && this.nextPageToken.length > 0 ? this.nextPageToken : offset);
-            fields = se.fields;
-            delete se['page'];
-            delete se['fields'];
-            delete se['limit'];
-            delete se['firstLimit'];
-            if (this.loading) {
-              this.loading.showLoading();
-            }
-            if (!this.search) return [3, 2];
-            return [4, this.search(s, limit, next, fields)];
-          case 1:
-            sr = _a.sent();
-            this.showResults(s, sr);
-            return [3, 4];
-          case 2: return [4, this.service.search(s, limit, next, fields)];
-          case 3:
-            sr = _a.sent();
-            this.showResults(s, sr);
-            _a.label = 4;
-          case 4: return [3, 7];
-          case 5:
-            err_2 = _a.sent();
-            this.pageIndex = this.tmpPageIndex;
-            core_2.error(err_2, this.resourceService.value, this.showError);
-            return [3, 7];
-          case 6:
-            this.running = false;
-            if (this.loading) {
-              this.loading.hideLoading();
-            }
-            return [7];
-          case 7: return [2];
-        }
+    this.running = true;
+    var s = reflectx_1.clone(se);
+    var page = this.pageIndex;
+    if (!page || page < 1) {
+      page = 1;
+    }
+    var offset;
+    if (se.limit) {
+      if (se.firstLimit && se.firstLimit > 0) {
+        offset = se.limit * (page - 2) + se.firstLimit;
+      }
+      else {
+        offset = se.limit * (page - 1);
+      }
+    }
+    var limit = (page <= 1 && se.firstLimit && se.firstLimit > 0 ? se.firstLimit : se.limit);
+    var next = (this.nextPageToken && this.nextPageToken.length > 0 ? this.nextPageToken : offset);
+    var fields = se.fields;
+    delete se['page'];
+    delete se['fields'];
+    delete se['limit'];
+    delete se['firstLimit'];
+    core_1.showLoading(this.loading);
+    var com = this;
+    if (this.search) {
+      this.search(s, limit, next, fields).then(function (sr) {
+        com.showResults(s, sr);
+        com.running = undefined;
+        core_1.hideLoading(com.loading);
+      }).catch(function (err) {
+        com.pageIndex = com.tmpPageIndex;
+        core_2.error(err, com.resourceService.value, com.showError);
+        com.running = undefined;
+        core_1.hideLoading(com.loading);
       });
-    });
+    }
   };
   return SearchComponent;
 }(BaseSearchComponent));
@@ -674,14 +649,13 @@ exports.SearchComponent = SearchComponent;
 var BaseEditComponent = (function (_super) {
   __extends(BaseEditComponent, _super);
   function BaseEditComponent(props, resourceService, showMessage, showError, confirm, getLocale, ui, loading, status, patchable, backOnSaveSuccess) {
-    var _this = _super.call(this, props, getLocale, (ui ? ui.removeError : null)) || this;
+    var _this = _super.call(this, props, getLocale, (ui ? ui.removeError : undefined)) || this;
     _this.resourceService = resourceService;
     _this.showMessage = showMessage;
     _this.showError = showError;
     _this.confirm = confirm;
     _this.ui = ui;
     _this.loading = loading;
-    _this.status = status;
     _this.backOnSuccess = true;
     _this.patchable = true;
     _this.addable = true;
@@ -693,12 +667,12 @@ var BaseEditComponent = (function (_super) {
         _this.form = event.target.form;
       }
       var obj = _this.createModel();
-      _this.resetState(true, obj, null);
+      _this.resetState(true, obj, undefined);
       var u = _this.ui;
-      if (u) {
-        var f_1 = _this.form;
+      var f = _this.form;
+      if (u && f) {
         setTimeout(function () {
-          u.removeFormError(f_1);
+          u.removeFormError(f);
         }, 100);
       }
     };
@@ -711,6 +685,7 @@ var BaseEditComponent = (function (_super) {
       _this.onSave(_this.backOnSuccess);
     };
     _this.resource = resourceService.resource();
+    _this.status = core_1.createEditStatus(status);
     if (patchable === false) {
       _this.patchable = patchable;
     }
@@ -807,13 +782,13 @@ var BaseEditComponent = (function (_super) {
       if (this.running) {
         return;
       }
-      var com_1 = this;
-      var obj_1 = com_1.getModel();
+      var com_2 = this;
+      var obj_1 = com_2.getModel();
       if (this.newMode) {
-        com_1.validate(obj_1, function () {
+        com_2.validate(obj_1, function () {
           var msg = core_2.message(r.value, 'msg_confirm_save', 'confirm', 'yes', 'no');
           _this.confirm(msg.message, msg.title, function () {
-            com_1.save(obj_1, obj_1, isBack);
+            com_2.save(obj_1, obj_1, isBack);
           }, msg.no, msg.yes);
         });
       }
@@ -824,10 +799,10 @@ var BaseEditComponent = (function (_super) {
           this.showMessage(r.value('msg_no_change'));
         }
         else {
-          com_1.validate(obj_1, function () {
+          com_2.validate(obj_1, function () {
             var msg = core_2.message(r.value, 'msg_confirm_save', 'confirm', 'yes', 'no');
             _this.confirm(msg.message, msg.title, function () {
-              com_1.save(obj_1, diffObj_1, isBack);
+              com_2.save(obj_1, diffObj_1, isBack);
             }, msg.no, msg.yes);
           });
         }
@@ -835,8 +810,8 @@ var BaseEditComponent = (function (_super) {
     }
   };
   BaseEditComponent.prototype.validate = function (obj, callback) {
-    if (this.ui) {
-      var valid = this.ui.validateForm(this.form, this.getLocale());
+    if (this.ui && this.form) {
+      var valid = this.ui.validateForm(this.form, state_1.localeOf(undefined, this.getLocale));
       if (valid) {
         callback(obj);
       }
@@ -871,7 +846,7 @@ var BaseEditComponent = (function (_super) {
     var errors = result.errors;
     var f = this.form;
     var u = this.ui;
-    if (u) {
+    if (u && f) {
       var unmappedErrors = u.showFormError(f, errors);
       if (!result.message) {
         if (errors && errors.length === 1) {
@@ -886,14 +861,14 @@ var BaseEditComponent = (function (_super) {
     else if (errors && errors.length === 1) {
       result.message = errors[0].message;
     }
-    var t = this.resourceService.value('error');
-    this.showError(result.message, t);
+    if (result.message) {
+      var t = this.resourceService.value('error');
+      this.showError(result.message, t);
+    }
   };
   BaseEditComponent.prototype.postSave = function (res, backOnSave) {
     this.running = false;
-    if (this.loading) {
-      this.loading.hideLoading();
-    }
+    core_1.hideLoading(this.loading);
     var st = this.status;
     var newMod = this.newMode;
     var successMsg = (newMod ? this.insertSuccessMsg : this.updateSuccessMsg);
@@ -951,8 +926,10 @@ var EditComponent = (function (_super) {
       var metadata = service.metadata();
       if (metadata) {
         var meta = edit_1.build(metadata);
-        _this.keys = meta.keys;
-        _this.version = meta.version;
+        if (meta) {
+          _this.keys = meta.keys;
+          _this.version = meta.version;
+        }
         _this.metadata = metadata;
       }
     }
@@ -972,135 +949,91 @@ var EditComponent = (function (_super) {
     return _this;
   }
   EditComponent.prototype.componentDidMount = function () {
-    var k = (this.ui ? this.ui.registerEvents : null);
+    var k = (this.ui ? this.ui.registerEvents : undefined);
     this.form = core_2.initForm(this.ref.current, k);
     var id = core_2.buildId(this.props, this.keys);
-    this.load(id);
+    if (id) {
+      this.load(id);
+    }
   };
   EditComponent.prototype.load = function (_id, callback) {
-    return __awaiter(this, void 0, void 0, function () {
-      var id, ctx, obj, err_3, data, r, gv, title, msg, obj;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            id = _id;
-            if (!(id != null && id !== '')) return [3, 6];
-            _a.label = 1;
-          case 1:
-            _a.trys.push([1, 3, 4, 5]);
-            this.running = true;
-            if (this.loading) {
-              this.loading.showLoading();
-            }
-            ctx = {};
-            return [4, this.service.load(id, ctx)];
-          case 2:
-            obj = _a.sent();
-            if (!obj) {
-              this.handleNotFound(this.form);
-            }
-            else {
-              this.newMode = false;
-              this.orginalModel = reflectx_1.clone(obj);
-              if (!callback) {
-                this.showModel(obj);
-              }
-              else {
-                callback(obj, this.showModel);
-              }
-            }
-            return [3, 5];
-          case 3:
-            err_3 = _a.sent();
-            data = (err_3 && err_3.response) ? err_3.response : err_3;
-            r = this.resourceService;
-            gv = r.value;
-            title = gv('error');
-            msg = gv('error_internal');
-            if (data && data.status === 404) {
-              this.handleNotFound(this.form);
-            }
-            else {
-              if (data.status && !isNaN(data.status)) {
-                msg = core_2.messageByHttpStatus(data.status, gv);
-              }
-              if (data && (data.status === 401 || data.status === 403)) {
-                formutil_1.readOnly(this.form);
-              }
-              this.showError(msg, title);
-            }
-            return [3, 5];
-          case 4:
-            this.running = false;
-            if (this.loading) {
-              this.loading.hideLoading();
-            }
-            return [7];
-          case 5: return [3, 7];
-          case 6:
-            this.newMode = true;
-            this.orginalModel = null;
-            obj = this.createModel();
-            if (callback) {
-              callback(obj, this.showModel);
-            }
-            else {
-              this.showModel(obj);
-            }
-            _a.label = 7;
-          case 7: return [2];
+    var _this = this;
+    var id = _id;
+    if (id != null && id !== '') {
+      var com_3 = this;
+      this.running = true;
+      core_1.showLoading(com_3.loading);
+      this.service.load(id).then(function (obj) {
+        if (!obj) {
+          com_3.handleNotFound(_this.form);
+        }
+        else {
+          com_3.newMode = false;
+          com_3.orginalModel = reflectx_1.clone(obj);
+          if (!callback) {
+            com_3.showModel(obj);
+          }
+          else {
+            callback(obj, com_3.showModel);
+          }
         }
+        com_3.running = false;
+        core_1.hideLoading(com_3.loading);
+      }).catch(function (err) {
+        var data = (err && err.response) ? err.response : err;
+        var r = com_3.resourceService;
+        var gv = r.value;
+        var title = gv('error');
+        var msg = gv('error_internal');
+        if (data && data.status === 404) {
+          com_3.handleNotFound(com_3.form);
+        }
+        else {
+          if (data.status && !isNaN(data.status)) {
+            msg = core_2.messageByHttpStatus(data.status, gv);
+          }
+          if (data && (data.status === 401 || data.status === 403)) {
+            formutil_1.readOnly(com_3.form);
+          }
+          com_3.showError(msg, title);
+        }
+        com_3.running = false;
+        core_1.hideLoading(com_3.loading);
       });
-    });
+    }
+    else {
+      this.newMode = true;
+      this.orginalModel = undefined;
+      var obj = this.createModel();
+      if (callback) {
+        callback(obj, this.showModel);
+      }
+      else {
+        this.showModel(obj);
+      }
+    }
   };
   EditComponent.prototype.save = function (obj, body, isBack) {
-    return __awaiter(this, void 0, void 0, function () {
-      var isBackO, com, ctx, result, result, result, err_4;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            this.running = true;
-            if (this.loading) {
-              this.loading.showLoading();
-            }
-            isBackO = (isBack == null || isBack === undefined ? this.backOnSuccess : isBack);
-            com = this;
-            _a.label = 1;
-          case 1:
-            _a.trys.push([1, 9, 10, 11]);
-            ctx = {};
-            if (!!this.newMode) return [3, 6];
-            if (!(this.patchable === true && this.service.patch && body && Object.keys(body).length > 0)) return [3, 3];
-            return [4, this.service.patch(body, ctx)];
-          case 2:
-            result = _a.sent();
-            com.postSave(result, isBackO);
-            return [3, 5];
-          case 3: return [4, this.service.update(obj, ctx)];
-          case 4:
-            result = _a.sent();
-            com.postSave(result, isBackO);
-            _a.label = 5;
-          case 5: return [3, 8];
-          case 6: return [4, this.service.insert(obj, ctx)];
-          case 7:
-            result = _a.sent();
-            com.postSave(result, isBackO);
-            _a.label = 8;
-          case 8: return [3, 11];
-          case 9:
-            err_4 = _a.sent();
-            core_2.error(err_4, this.resourceService.value, this.showError);
-            return [3, 11];
-          case 10:
-            this.running = false;
-            if (this.loading) {
-              this.loading.hideLoading();
-            }
-            return [7];
-          case 11: return [2];
-        }
-      });
+    this.running = true;
+    core_1.showLoading(this.loading);
+    var isBackO = (isBack == null || isBack === undefined ? this.backOnSuccess : isBack);
+    var com = this;
+    var m = obj;
+    var fn = this.newMode ? this.service.insert : this.service.update;
+    if (!this.newMode) {
+      if (this.patchable === true && this.service.patch && body && Object.keys(body).length > 0) {
+        m = body;
+        fn = this.service.patch;
+      }
+    }
+    fn(m).then(function (result) {
+      com.postSave(result, isBackO);
+      com.running = false;
+      core_1.hideLoading(com.loading);
+    }).then(function (err) {
+      core_2.error(err, com.resourceService.value, com.showError);
+      com.running = false;
+      core_1.hideLoading(com.loading);
     });
   };
   return EditComponent;
@@ -1115,7 +1048,6 @@ var BaseDiffApprComponent = (function (_super) {
     _this.showMessage = showMessage;
     _this.showError = showError;
     _this.loading = loading;
-    _this.status = status;
     _this.resource = resourceService.resource();
     _this.showMessage = _this.showMessage.bind(_this);
     _this.showError = _this.showError.bind(_this);
@@ -1125,9 +1057,7 @@ var BaseDiffApprComponent = (function (_super) {
     _this.postReject = _this.postReject.bind(_this);
     _this.format = _this.format.bind(_this);
     _this.handleNotFound = _this.handleNotFound.bind(_this);
-    if (!_this.status) {
-      _this.status = core_1.createDiffStatus();
-    }
+    _this.status = core_1.createDiffStatus(status);
     _this.state = {
       disabled: false
     };
@@ -1186,13 +1116,16 @@ var BaseDiffApprComponent = (function (_super) {
       var differentKeys_1 = reflectx_1.diff(diffModel.origin, diffModel.value);
       var dataFields = diff_1.getDataFields(this.form);
       dataFields.forEach(function (e) {
-        if (differentKeys_1.indexOf(e.getAttribute('data-field')) >= 0) {
-          if (e.childNodes.length === 3) {
-            e.childNodes[1].classList.add('highlight');
-            e.childNodes[2].classList.add('highlight');
-          }
-          else {
-            e.classList.add('highlight');
+        var x = e.getAttribute('data-field');
+        if (x) {
+          if (differentKeys_1.indexOf(x) >= 0) {
+            if (e.childNodes.length === 3) {
+              e.childNodes[1].classList.add('highlight');
+              e.childNodes[2].classList.add('highlight');
+            }
+            else {
+              e.classList.add('highlight');
+            }
           }
         }
       });
@@ -1202,13 +1135,16 @@ var BaseDiffApprComponent = (function (_super) {
       var differentKeys_2 = reflectx_1.diff(origin_1, value);
       var dataFields = diff_1.getDataFields(this.form);
       dataFields.forEach(function (e) {
-        if (differentKeys_2.indexOf(e.getAttribute('data-field')) >= 0) {
-          if (e.childNodes.length === 3) {
-            e.childNodes[1].classList.add('highlight');
-            e.childNodes[2].classList.add('highlight');
-          }
-          else {
-            e.classList.add('highlight');
+        var x = e.getAttribute('data-field');
+        if (x) {
+          if (differentKeys_2.indexOf(x) >= 0) {
+            if (e.childNodes.length === 3) {
+              e.childNodes[1].classList.add('highlight');
+              e.childNodes[2].classList.add('highlight');
+            }
+            else {
+              e.classList.add('highlight');
+            }
           }
         }
       });
@@ -1241,131 +1177,79 @@ var DiffApprComponent = (function (_super) {
   DiffApprComponent.prototype.componentDidMount = function () {
     this.form = this.ref.current;
     var id = core_2.buildId(this.props, this.keys);
-    this.load(id);
+    if (id) {
+      this.load(id);
+    }
   };
   DiffApprComponent.prototype.formatFields = function (value) {
     return value;
   };
   DiffApprComponent.prototype.load = function (_id) {
-    return __awaiter(this, void 0, void 0, function () {
-      var id, dobj, formatdDiff, err_5, data;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            id = _id;
-            if (!(id != null && id !== '')) return [3, 5];
-            this.id = _id;
-            _a.label = 1;
-          case 1:
-            _a.trys.push([1, 3, 4, 5]);
-            this.running = true;
-            if (this.loading) {
-              this.loading.showLoading();
-            }
-            return [4, this.service.diff(id)];
-          case 2:
-            dobj = _a.sent();
-            if (!dobj) {
-              this.handleNotFound();
-            }
-            else {
-              formatdDiff = diff_1.formatDiffModel(dobj, this.formatFields);
-              this.setState({
-                origin: formatdDiff.origin,
-                value: formatdDiff.value
-              }, this.format);
-            }
-            return [3, 5];
-          case 3:
-            err_5 = _a.sent();
-            data = (err_5 && err_5.response) ? err_5.response : err_5;
-            if (data && data.status === 404) {
-              this.handleNotFound();
-            }
-            else {
-              core_2.error(err_5, this.resourceService.value, this.showError);
-            }
-            return [3, 5];
-          case 4:
-            this.running = false;
-            if (this.loading) {
-              this.loading.hideLoading();
-            }
-            return [7];
-          case 5: return [2];
+    var id = _id;
+    if (id != null && id !== '') {
+      this.id = _id;
+      var com_4 = this;
+      this.running = true;
+      core_1.showLoading(this.loading);
+      this.service.diff(id).then(function (dobj) {
+        if (!dobj) {
+          com_4.handleNotFound();
+        }
+        else {
+          var formatdDiff = diff_1.formatDiffModel(dobj, com_4.formatFields);
+          com_4.setState({
+            origin: formatdDiff.origin,
+            value: formatdDiff.value
+          }, com_4.format);
+        }
+        com_4.running = false;
+        core_1.hideLoading(com_4.loading);
+      }).catch(function (err) {
+        var data = (err && err.response) ? err.response : err;
+        if (data && data.status === 404) {
+          com_4.handleNotFound();
         }
+        else {
+          core_2.error(err, com_4.resourceService.value, com_4.showError);
+        }
+        com_4.running = false;
+        core_1.hideLoading(com_4.loading);
       });
-    });
+    }
   };
   DiffApprComponent.prototype.approve = function (event) {
-    return __awaiter(this, void 0, void 0, function () {
-      var id, status_1, err_6;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            event.preventDefault();
-            _a.label = 1;
-          case 1:
-            _a.trys.push([1, 3, 4, 5]);
-            this.running = true;
-            if (this.loading) {
-              this.loading.showLoading();
-            }
-            id = this.id;
-            return [4, this.service.approve(id)];
-          case 2:
-            status_1 = _a.sent();
-            this.postApprove(status_1, null);
-            return [3, 5];
-          case 3:
-            err_6 = _a.sent();
-            this.postApprove(4, err_6);
-            return [3, 5];
-          case 4:
-            this.running = false;
-            if (this.loading) {
-              this.loading.hideLoading();
-            }
-            return [7];
-          case 5: return [2];
-        }
+    event.preventDefault();
+    var com = this;
+    this.running = true;
+    core_1.showLoading(this.loading);
+    if (this.id) {
+      this.service.approve(this.id).then(function (status) {
+        com.postApprove(status, null);
+        com.running = false;
+        core_1.hideLoading(com.loading);
+      }).catch(function (err) {
+        com.postApprove(4, err);
+        com.running = false;
+        core_1.hideLoading(com.loading);
       });
-    });
+    }
   };
   DiffApprComponent.prototype.reject = function (event) {
-    return __awaiter(this, void 0, void 0, function () {
-      var id, status_2, err_7;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            event.preventDefault();
-            _a.label = 1;
-          case 1:
-            _a.trys.push([1, 3, 4, 5]);
-            this.running = true;
-            if (this.loading) {
-              this.loading.showLoading();
-            }
-            id = this.id;
-            return [4, this.service.reject(id)];
-          case 2:
-            status_2 = _a.sent();
-            this.postReject(status_2, null);
-            return [3, 5];
-          case 3:
-            err_7 = _a.sent();
-            this.postReject(4, err_7);
-            return [3, 5];
-          case 4:
-            this.running = false;
-            if (this.loading) {
-              this.loading.hideLoading();
-            }
-            return [7];
-          case 5: return [2];
-        }
+    event.preventDefault();
+    var com = this;
+    this.running = true;
+    core_1.showLoading(this.loading);
+    if (this.id) {
+      this.service.reject(this.id).then(function (status) {
+        com.postReject(status, null);
+        com.running = false;
+        core_1.hideLoading(com.loading);
+      }).catch(function (err) {
+        com.postReject(4, err);
+        com.running = false;
+        core_1.hideLoading(com.loading);
       });
-    });
+    }
   };
   return DiffApprComponent;
 }(BaseDiffApprComponent));