How to use hyperview - 10 common examples

if (action === 'replace') {
          const parentElement = targetElement.parentNode;
          parentElement.replaceChild(newElement, targetElement);
          newRoot = shallowCloneToRoot(parentElement);
        }

        if (action === 'replace-inner') {
          let child = targetElement.firstChild;
          // Remove the target's children
          while (child !== null) {
            const nextChild = child.nextSibling;
            targetElement.removeChild(child);
            child = nextChild;
          }
          targetElement.appendChild(newElement);
          newRoot = shallowCloneToRoot(targetElement);
        }

        if (action === 'append') {
          targetElement.appendChild(newElement);
          newRoot = shallowCloneToRoot(targetElement);
        }

        if (action === 'prepend') {
          targetElement.insertBefore(newElement, targetElement.firstChild);
          newRoot = shallowCloneToRoot(targetElement);
        }

        // Update the DOM to hide the indicators shown during the request.
        if (showIndicatorIds) {
          showIndicatorIds.split(' ').forEach((id) => {
            const el = newRoot.getElementById(id);

if (action === 'replace-inner') {
          let child = targetElement.firstChild;
          // Remove the target's children
          while (child !== null) {
            const nextChild = child.nextSibling;
            targetElement.removeChild(child);
            child = nextChild;
          }
          targetElement.appendChild(newElement);
          newRoot = shallowCloneToRoot(targetElement);
        }

        if (action === 'append') {
          targetElement.appendChild(newElement);
          newRoot = shallowCloneToRoot(targetElement);
        }

        if (action === 'prepend') {
          targetElement.insertBefore(newElement, targetElement.firstChild);
          newRoot = shallowCloneToRoot(targetElement);
        }

        // Update the DOM to hide the indicators shown during the request.
        if (showIndicatorIds) {
          showIndicatorIds.split(' ').forEach((id) => {
            const el = newRoot.getElementById(id);
            if (el) {
              el.setAttribute('hide', 'true');
              newRoot = shallowCloneToRoot(el.parentNode);
              changedIndicator = true;
            }

.then((responseText) => {
        if (typeof this.props.onParseBefore === 'function') {
          this.props.onParseBefore(url);
        }
        let doc = this.parser.parseFromString(responseText);
        let error = false;
        const stylesheets = Stylesheets.createStylesheets(doc);
        this.navigation.setRouteKey(url, routeKey);

        // Make sure the XML has the required elements: , , .
        const docElement = getFirstTag(doc, 'doc');
        if (!docElement) {
          console.error(`No  tag found in the response from ${url}.`);
          doc = null;
          error = true;
        } else {
          const screenElement = getFirstTag(docElement, 'screen');
          if (!screenElement) {
            console.error(`No  tag found in the  tag from ${url}.`);
            doc = null;
            error = true;
          } else {
            const bodyElement = getFirstTag(screenElement, 'body');
            if (!bodyElement) {
              console.error(`No  tag found in the  tag from ${url}.`);
              doc = null;
              error = true;

this.navigation.setRouteKey(url, routeKey);

        // Make sure the XML has the required elements: , , .
        const docElement = getFirstTag(doc, 'doc');
        if (!docElement) {
          console.error(`No  tag found in the response from ${url}.`);
          doc = null;
          error = true;
        } else {
          const screenElement = getFirstTag(docElement, 'screen');
          if (!screenElement) {
            console.error(`No  tag found in the  tag from ${url}.`);
            doc = null;
            error = true;
          } else {
            const bodyElement = getFirstTag(screenElement, 'body');
            if (!bodyElement) {
              console.error(`No  tag found in the  tag from ${url}.`);
              doc = null;
              error = true;
            }
          }
        }

        this.setState({
          doc,
          styles: stylesheets,
          error,
        });
        if (typeof this.props.onParseAfter === 'function') {
          this.props.onParseAfter(url);
        }

if (typeof this.props.onParseBefore === 'function') {
          this.props.onParseBefore(url);
        }
        let doc = this.parser.parseFromString(responseText);
        let error = false;
        const stylesheets = Stylesheets.createStylesheets(doc);
        this.navigation.setRouteKey(url, routeKey);

        // Make sure the XML has the required elements: , , .
        const docElement = getFirstTag(doc, 'doc');
        if (!docElement) {
          console.error(`No  tag found in the response from ${url}.`);
          doc = null;
          error = true;
        } else {
          const screenElement = getFirstTag(docElement, 'screen');
          if (!screenElement) {
            console.error(`No  tag found in the  tag from ${url}.`);
            doc = null;
            error = true;
          } else {
            const bodyElement = getFirstTag(screenElement, 'body');
            if (!bodyElement) {
              console.error(`No  tag found in the  tag from ${url}.`);
              doc = null;
              error = true;
            }
          }
        }

        this.setState({
          doc,

const pressBehaviors = behaviorElements.filter(
      e =>
        PRESS_TRIGGERS.indexOf(
          e.getAttribute(ATTRIBUTES.TRIGGER) || TRIGGERS.PRESS,
        ) >= 0,
    );
    const visibleBehaviors = behaviorElements.filter(
      e => e.getAttribute(ATTRIBUTES.TRIGGER) === TRIGGERS.VISIBLE,
    );
    const refreshBehaviors = behaviorElements.filter(
      e => e.getAttribute(ATTRIBUTES.TRIGGER) === TRIGGERS.REFRESH,
    );

    // Render the component based on the XML element. Depending on the applied behaviors,
    // this component will be wrapped with others to provide the necessary interaction.
    let renderedComponent = Render.renderElement(
      element,
      stylesheets,
      onUpdate,
      { ...options, pressed, skipHref: true },
    );

    const styleAttr = element.getAttribute(ATTRIBUTES.HREF_STYLE);
    const hrefStyle = styleAttr
      ? styleAttr.split(' ').map(s => stylesheets.regular[s])
      : null;

    const pressHandlers: PressHandlers = {};

    // Render pressable element
    if (pressBehaviors.length > 0) {
      const props = {

// Re-render the modifications
        this.setState({
          doc: newRoot,
        });

        // in dev mode log the updated xml for debugging purposes
        if (__DEV__) {
          console.log('Updated XML:', this.serializer.serializeToString(newRoot.documentElement));
        }

        onEnd && onEnd();
      });

    if (delay) {
      later(parseInt(delay, 10)).then(fetchPromise);
    } else {
      fetchPromise();
    }
  }

.then((responseText) => {
        if (typeof this.props.onParseBefore === 'function') {
          this.props.onParseBefore(url);
        }
        let doc = this.parser.parseFromString(responseText);
        let error = false;
        const stylesheets = Stylesheets.createStylesheets(doc);
        this.navigation.setRouteKey(url, routeKey);

        // Make sure the XML has the required elements: , , .
        const docElement = getFirstTag(doc, 'doc');
        if (!docElement) {
          console.error(`No  tag found in the response from ${url}.`);
          doc = null;
          error = true;
        } else {
          const screenElement = getFirstTag(docElement, 'screen');
          if (!screenElement) {
            console.error(`No  tag found in the  tag from ${url}.`);
            doc = null;
            error = true;
          } else {
            const bodyElement = getFirstTag(screenElement, 'body');

if (
    element.nodeType === NODE_TYPE.ELEMENT_NODE &&
    element.namespaceURI === Namespaces.HYPERVIEW
  ) {
    switch (element.localName) {
      case LOCAL_NAME.BODY:
      case LOCAL_NAME.VIEW:
      case LOCAL_NAME.FORM:
      case LOCAL_NAME.HEADER:
      case LOCAL_NAME.ITEM:
      case LOCAL_NAME.SECTION_TITLE:
        // TODO: Create HvView component
        return view(element, stylesheets, onUpdate, options);
      case LOCAL_NAME.TEXT:
        // TODO: Create HvText component
        return text(element, stylesheets, onUpdate, options);
      case LOCAL_NAME.BEHAVIOR:
      case LOCAL_NAME.MODIFIER:
      case LOCAL_NAME.STYLES:
      case LOCAL_NAME.STYLE:
        // Non-UI elements don't get rendered
        return null;
      default:
        break;
    }
  }

  if (element.nodeType === NODE_TYPE.ELEMENT_NODE) {
    if (!element.namespaceURI) {
      console.warn('`namespaceURI` missing for node:', element.toString());
      return null;
    }

function createStylesheet(
  document: Document,
  modifiers = {},
): StyleSheetType<*> {
  const styles = getFirstTag(document, 'styles');
  const stylesheet = {};
  if (styles) {
    const styleElements = styles.getElementsByTagNameNS(
      Namespaces.HYPERVIEW,
      'style',
    );

    for (let i = 0; i < styleElements.length; i += 1) {
      const styleElement = styleElements.item(i);
      const hasModifier =
        styleElement.parentNode &&
        styleElement.parentNode.tagName === 'modifier';

      let styleId = styleElement.getAttribute('id');
      if (hasModifier) {
        // TODO(adam): Use less hacky way to get id of parent style element.
        styleId = styleElement.parentNode.parentNode.getAttribute('id');
      }

      // This must be a root style or a modifier style