sk-react/lib/Comp.js

React for ShaneKing

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _skJs = require("sk-js");

var _Model = _interopRequireDefault(require("./Model"));

var _Reacts = _interopRequireDefault(require("./Reacts"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var Comp =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Comp, _React$Component);

  //apply for self element
  //apply for sub element
  function Comp() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, Comp);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Comp)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.SK_COMP_NAME = Comp.SK_COMP_NAME;
    _this.monitors = [];

    _this.updateUI = function (evt) {
      _this.setState({
        stateUid: _skJs.Proxy0._.uniqueId(Comp.SK_COMP_STATE_ID_PREFIX)
      });
    };

    return _this;
  }

  _createClass(Comp, [{
    key: "componentDidMount",
    // react
    value: function componentDidMount() {
      //super.componentDidMount();
      this.addAllChangedMonitor();
      this.addExtendChangedMonitor();
    }
  }, {
    key: "componentWillUpdate",
    value: function componentWillUpdate() {
      this.rmvAllChangedMonitor();
      this.rmvExtendChangedMonitor(); //super.componentWillUpdate();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      //super.componentDidUpdate();
      this.addAllChangedMonitor();
      this.addExtendChangedMonitor();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.rmvAllChangedMonitor();
      this.rmvExtendChangedMonitor(); //super.componentWillUnmount();
    }
  }, {
    key: "render",
    value: function render() {
      var KsCompTag = this.props.ksCompTag;
      return _react.default.createElement(KsCompTag, this.transProps2Self(KsCompTag), this.transProps2Child());
    } // monitor

  }, {
    key: "addAllChangedMonitor",
    value: function addAllChangedMonitor() {
      var _this2 = this;

      _Model.default.parseSao(this.props.ksMonitor).forEach(function (item) {
        _this2.addChangedMonitor(item);
      }); //Self value monitor


      if (this.modelId()) {
        this.addChangedMonitor(this.modelId());
      }
    }
  }, {
    key: "addChangedMonitor",
    value: function addChangedMonitor(idOrReg) {
      if (!_skJs.Proxy0._.isNil(idOrReg)) {
        if (this.monitors.indexOf(idOrReg) < 0) {
          this.monitors.push(idOrReg);
        }

        if (_skJs.Proxy0._.isRegExp(idOrReg)) {
          this.model().addRegChangedListener(idOrReg, this.updateUI);
        } else {
          this.model().addIdChangedListener(idOrReg, this.updateUI);
        }
      }
    }
  }, {
    key: "addExtendChangedMonitor",
    value: function addExtendChangedMonitor() {}
  }, {
    key: "rmvAllChangedMonitor",
    value: function rmvAllChangedMonitor() {
      var _this3 = this;

      this.monitors.forEach(function (item) {
        _this3.rmvChangedMonitor(item);
      });
    }
  }, {
    key: "rmvChangedMonitor",
    value: function rmvChangedMonitor(idOrReg) {
      if (_skJs.Proxy0._.isRegExp(idOrReg)) {
        this.model().rmvRegChangedListener(idOrReg, this.updateUI);
      } else {
        this.model().rmvIdChangedListener(idOrReg, this.updateUI);
      }

      this.monitors.skRmv(idOrReg);
    }
  }, {
    key: "rmvExtendChangedMonitor",
    value: function rmvExtendChangedMonitor() {} // other

  }, {
    key: "allowTransProps2Child",
    value: function allowTransProps2Child(child) {
      return [];
    }
  }, {
    key: "allowTransProps2Self",
    value: function allowTransProps2Self() {
      var comp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.ksCompTag;
      var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.props;
      return [];
    }
  }, {
    key: "denyTransProps2Child",
    value: function denyTransProps2Child(child) {
      return [];
    }
  }, {
    key: "denyTransProps2Self",
    value: function denyTransProps2Self() {
      var comp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.ksCompTag;
      var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.props;
      return [];
    } //model 2 node(DOM Element Node/React Component Node)

  }, {
    key: "m2n",
    value: function m2n() {
      return _skJs.Proxy0._.isFunction(this.props.ksM2nConverter) ? this.props.ksM2nConverter(this.skVal(), this.model(), this) : this.m2nConverter();
    }
  }, {
    key: "m2nConverter",
    value: function m2nConverter() {
      return this.skVal();
    }
  }, {
    key: "model",
    value: function model() {
      return this.props.ksModel === undefined ? this.props.skModel === undefined ? this.props.skSysModel : this.props.skModel : this.props.ksModel;
    }
  }, {
    key: "modelId",
    value: function modelId() {
      return this.props.ksModelId;
    }
  }, {
    key: "n2m",
    value: function n2m(val) {
      return this.skVal(_skJs.Proxy0._.isFunction(this.props.ksN2mConverter) ? this.props.ksN2mConverter(val, this.model(), this) : this.n2mConverter(val));
    }
  }, {
    key: "n2mConverter",
    value: function n2mConverter(val) {
      return val;
    } //props -> skProps

  }, {
    key: "p2",
    value: function p2(prop) {
      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
      var rtn = this.props[prop];

      if (rtn === undefined) {
        rtn = this.props[Comp.SK_PROPS_PREFIX + _skJs.SK.upperWordsFirstChar(prop)];
      }

      return rtn === undefined ? defaultValue : rtn;
    }
  }, {
    key: "skVal",
    value: function skVal(val) {
      var mdl = this.model();

      if (mdl) {
        if (arguments.length > 0) {
          mdl.skVal(this.modelId(), val);
          return this;
        } else {
          return mdl.skVal(this.modelId());
        }
      }
    }
  }, {
    key: "sysModel",
    value: function sysModel() {
      return this.props.skSysModel;
    }
  }, {
    key: "transProps2Child",
    value: function transProps2Child() {
      var _this4 = this;

      var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.children;
      var skProps = Object.keys(this.props.skFilter(false, Comp.skPropsFilter));
      var ksProps = Object.keys(this.props.skFilter(false, Comp.ksPropsFilter));

      var rtn = _react.default.Children.map(children, function (child) {
        if (_react.default.isValidElement(child)) {
          var allowProps = _this4.allowTransProps2Child(child);

          allowProps = allowProps.concat(_Reacts.default.TAG[child.type] ? [] : skProps); //if html node, nothing to do

          var denyProps = _this4.denyTransProps2Child(child);

          denyProps = denyProps.concat(['children', 'className']);
          denyProps = denyProps.concat(child.props ? Object.keys(child.props) : []); //ignore child has props

          denyProps = denyProps.concat(ksProps);
          return _react.default.cloneElement(child, _skJs.Proxy0._.omit(_skJs.Proxy0._.pick(_this4.props, allowProps), denyProps));
        }

        return child;
      });

      if (!_skJs.Proxy0._.isArray(children) && _skJs.Proxy0._.isArray(rtn)) {
        rtn = rtn[0];
      }

      return rtn;
    }
  }, {
    key: "transProps2Self",
    value: function transProps2Self() {
      var comp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.ksCompTag;
      var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.props;
      var skProps = Object.keys(prop.skFilter(false, Comp.skPropsFilter));
      var ksProps = Object.keys(prop.skFilter(false, Comp.ksPropsFilter));
      var allowProps = this.allowTransProps2Self(comp, prop);
      allowProps = allowProps.concat(comp.propTypes ? Object.keys(comp.propTypes) : []);
      allowProps = allowProps.concat(_Reacts.default.TAG[comp] ? [] : ksProps);
      allowProps = allowProps.concat(_Reacts.default.TAG[comp] ? [] : _Reacts.default.P.skVals());
      allowProps = allowProps.concat(_Reacts.default.TAG[comp] ? [] : skProps);
      allowProps = allowProps.concat(_Reacts.default.TAG[comp] ? _skJs.SK.s4a(_Reacts.default.TP[comp]) : []);
      var denyProps = this.denyTransProps2Self(comp, prop);
      denyProps = denyProps.concat(_Reacts.default.TAG[comp] ? ksProps : []);
      denyProps = denyProps.concat(_Reacts.default.TAG[comp] ? skProps : []);
      return _skJs.Proxy0._.omit(_skJs.Proxy0._.pick(prop, allowProps), denyProps);
    }
  }], [{
    key: "IS_PROP_TYPES_MODEL",
    value: function IS_PROP_TYPES_MODEL(props, propName, componentName) {
      if (props[propName] && !(props[propName] instanceof _Model.default)) {
        return new Error("The [".concat(componentName, "]'s [").concat(propName, "] is not a model!"));
      }
    }
  }, {
    key: "ksPropsFilter",
    value: function ksPropsFilter(k) {
      return _skJs.Proxy0._.startsWith(_skJs.SK.s4s(k), Comp.KS_PROPS_PREFIX);
    }
  }, {
    key: "skPropsFilter",
    value: function skPropsFilter(k) {
      return _skJs.Proxy0._.startsWith(_skJs.SK.s4s(k), Comp.SK_PROPS_PREFIX);
    }
  }]);

  return Comp;
}(_react.default.Component);

exports.default = Comp;
Comp.KS_PROPS_PREFIX = 'ks';
Comp.SK_COMP_NAME = 'Comp';
Comp.SK_COMP_STATE_ID_PREFIX = 'skCompStateUid';
Comp.SK_PROPS_PREFIX = 'sk';
Comp.defaultProps = {};
Comp.propTypes = {
  ksCompTag: _propTypes.default.any,
  ksModel: Comp.IS_PROP_TYPES_MODEL,
  //Business Model(part of page), PlainObject
  ksModelId: _propTypes.default.string,
  ksMonitor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array, _propTypes.default.object]),
  //ksMonitor is string[reg], array[string] or object of ksModelId
  ksM2nConverter: _propTypes.default.func,
  //Model 2 Node
  ksN2mConverter: _propTypes.default.func,
  //Node 2 Model
  skModel: Comp.IS_PROP_TYPES_MODEL,
  //Business Model(page), PlainObject
  skSysModel: Comp.IS_PROP_TYPES_MODEL //System Model(whole of page), PlainObject

};