OOP React

DisplayObject.js

import React from "react";
import ReactDOM from "react-dom";

function createUID() {
  // Char codes for 0123456789ABCDEF
  var ALPHA_CHAR_CODES = [
    48,
    49,
    50,
    51,
    52,
    53,
    54,
    55,
    56,
    57,
    65,
    66,
    67,
    68,
    69,
    70
  ];

  var uid = new Array(36);
  var index = 0;

  var i;
  var j;

  for (i = 0; i < 8; i++) {
    uid[index++] = ALPHA_CHAR_CODES[Math.floor(Math.random() * 16)];
  }

  for (i = 0; i < 3; i++) {
    uid[index++] = 45; // charCode for "-"

    for (j = 0; j < 4; j++) {
      uid[index++] = ALPHA_CHAR_CODES[Math.floor(Math.random() * 16)];
    }
  }

  uid[index++] = 45; // charCode for "-"

  var time = new Date().getTime();
  // Note: time is the number of milliseconds since 1970,
  // which is currently more than one trillion.
  // We use the low 8 hex digits of this number in the UID.
  // Just in case the system clock has been reset to
  // Jan 1-4, 1970 (in which case this number could have only
  // 1-7 hex digits), we pad on the left with 7 zeros
  // before taking the low digits.
  var timeString = ("0000000" + time.toString(16).toUpperCase()).substr(-8);

  for (i = 0; i < 8; i++) {
    uid[index++] = timeString.charCodeAt(i);
  }

  for (i = 0; i < 4; i++) {
    uid[index++] = ALPHA_CHAR_CODES[Math.floor(Math.random() * 16)];
  }

  return String.fromCharCode.apply(null, uid);
}

class WrapperComponent extends React.Component {
  state = {
    props: {},
    children: []
  };
  update(props, children) {
    this.setState({ props, children });
  }
  render() {
    let { Component } = this.props;
    let { props, children } = this.state;

    if (props.hasOwnProperty("children")) {
      return <Component {...props} />;
    } else {
      return (
        <Component {...props}>{children.map(child => child.element)}</Component>
      );
    }
  }
}

class DisplayObject {
  componentRef;

  key = createUID();

  props = {};
  children = [];

  invalidateFlag = false;

  constructor(Component, props) {
    this.Component = Component;
    this.element = this.createElement();
  }
  onRef = ref => {
    this.componentRef = ref;
    this.validate();
  };
  validate() {
    if (this.invalidateFlag) {
      this.invalidateFlag = false;
      this.componentRef.update(this.props, this.children);
    }
  }
  createElement() {
    let Component = this.Component || "div";
    return (
      <WrapperComponent key={this.key} ref={this.onRef} Component={Component} />
    );
  }
  setProperty(name, value) {
    if (this.props[name] !== value) {
      this.props = { ...this.props, [name]: value };
      this.invalidate();
    }
  }
  getProperty(name) {
    return this.props[name];
  }
  deleteProperty(name) {
    let { ...props } = this.props;
    delete props[name];
    this.props = props;
    this.invalidate();
  }
  clearProperties() {
    this.props = {};
    this.invalidate();
  }
  addChild(child, index = -1) {
    if (!this.children) {
      this.children = [child];
    } else {
      this.children = this.children
        .filter(val => val !== child)
        .concat([child]);
    }
    this.invalidate();
  }
  addChildAt(child, index = 0x7fffffff) {
    if (!this.children) {
      this.children = [child];
    } else {
      let newChildren = this.children.filter(val => val !== child);
      newChildren.splice(index, 0, child);
      this.children = newChildren;
    }
    this.invalidate();
  }
  removeChild(child) {
    if (this.children) {
      this.children = this.children.filter(val => val !== child);
      this.invalidate();
    }
  }
  removeChildAt(index) {
    if (this.children) {
      this.children = this.children.filter((val, i) => i !== index);
      this.invalidate();
    }
  }
  removeChildren(beginIndex = 0, endIndex = 0x7fffffff) {
    if (this.children) {
      this.children = this.children.filter(
        (val, i) => i < beginIndex || i > beginIndex
      );
      this.invalidate();
    }
  }
  get numChildren() {
    return this.children.length;
  }
  invalidate() {
    this.invalidateFlag = true;

    if (this.componentRef) {
      this.validate();
    }
  }
}
export default DisplayObject;