How to use polythene-core - 10 common examples

domElement.addEventListener("mouseout", onMouseOut, false);
      domElement.addEventListener("click", onClick, false);

      return () => {
        domElement.removeEventListener("focus", onFocus, false),
        domElement.removeEventListener("blur", onBlur, false),
        domElement.removeEventListener("mouseover", onBlur, false),
        domElement.removeEventListener("mouseout", onMouseOut, false),
        domElement.removeEventListener("click", onClick, false)
      }
    },
    [domElement]
  );

  const componentProps = Object.assign({},
    filterSupportedAttributes(props, { add: [a.formaction, "type"], remove: ["style"] }), // Set style on content, not on component
    getDom(dom => dom && !domElement && (
      setDomElement(dom),
      props.getDom && props.getDom(dom)
    )),
    props.testId && { "data-test-id": props.testId },
    {
      className: [
        classes.super,
        props.parentClassName || classes.component,
        props.contained ? classes.contained : null,
        props.raised ? classes.contained : null,
        props.raised ? classes.raised : null,
        props.selected ? classes.selected : null,
        props.highLabel ? classes.highLabel : null,
        props.extraWide ? classes.extraWide : null,
        disabled ? classes.disabled : null,

useEffect(
    () => {
      if (!domElement) {
        return;
      }
      // Prevent that SVG gets keyboard focus
      const svgElement = domElement.querySelector("svg");
      if (svgElement) {
        svgElement.setAttribute("focusable", "false");
      }
    },
    [domElement]
  );
  
  const componentProps = Object.assign({},
    filterSupportedAttributes(props),
    getRef(dom => dom && !domElement && (
      setDomElement(dom),
      props.getRef && props.getRef(dom)
    )),
    props.testId && { "data-test-id": props.testId },
    {
      className: [
        classes.component,
        props.tone === "dark" ? "pe-dark-tone" : null,
        props.tone === "light" ? "pe-light-tone" : null,
        props.className || props[a.class],
      ].join(" "),
    }
  );

  const content = [

export const createProps = (vnode, { keys: k }) => {
  const state = vnode.state;
  const attrs = unpackAttrs(vnode.attrs);
  const withHeader = attrs.header !== undefined || attrs.title !== undefined;
  const withFooter = attrs.footer !== undefined || attrs.footerButtons !== undefined;
  const borders = attrs.borders || "overflow";
  const showTopBorder = borders === "always" || (withHeader && borders === "overflow" && state.topOverflow());
  const showBottomBorder = borders === "always" || (withFooter && borders === "overflow" && state.bottomOverflow());
  
  return Object.assign(
    {},
    filterSupportedAttributes(attrs, { remove: ["style"] }), // style set in content, and set by show/hide transition
    attrs.testId && { "data-test-id": attrs.testId },
    {
      className: [
        classes.component,
        attrs.fullBleed ? classes.fullBleed : null,
        showTopBorder ? classes.borderTop : null,
        showBottomBorder ? classes.borderBottom : null,
        withHeader ? classes.withHeader : null,
        withFooter ? classes.withFooter : null,
        attrs.tone === "dark" ? "pe-dark-tone" : null,
        attrs.tone === "light" ? "pe-light-tone" : null,
        attrs.className || attrs[k.class],
      ].join(" "),
    },
    attrs.formOptions
  );

}
  }

  // Only update from outside if the field is not being edited
  if (typeof attrs.value === "function" && inputEl && !state.focus() && !inactive) {
    const value = attrs.value().toString();
    state.value = value;
    state.touched = true;
    updateState(state, attrs);
    notifyState(state, attrs);
    inputEl.value = value;
  }

  const props = Object.assign(
    {},
    filterSupportedAttributes(attrs),
    {
      className: [
        classes.component,
        isInvalid ? classes.stateInvalid : "",
        state.focus() ? classes.stateFocused : "",
        attrs.floatingLabel ? classes.hasFloatingLabel : "",
        attrs.disabled ? classes.stateDisabled : "",
        attrs.readonly ? classes.stateReadonly : "",
        state.isDirty ? classes.stateDirty : "",
        attrs.dense ? classes.isDense : "",
        attrs.required ? classes.isRequired : "",
        attrs.fullWidth ? classes.hasFullWidth : "",
        attrs.counter ? classes.hasCounter : "",
        attrs.hideSpinner !== false ? classes.hideSpinner : "",
        attrs.hideClear !== false ? classes.hideClear : "",
        attrs.hideValidation ? classes.hideValidation : "",

const createView = (state, opts) => {
  const element = opts.element || "div";
  const props = Object.assign({},
    filterSupportedAttributes(opts),
    {
      className: [
        state.class,
        opts.tone === "light" ? null : "pe-dark-tone", // default dark tone
        opts.tone === "light" ? "pe-light-tone" : null,
        opts.containerSelector ? classes.hasContainer : null,
        opts.layout === "vertical" ? classes.vertical : classes.horizontal,
        opts.tone === "dark" ? "pe-dark-tone" : null,
        opts.tone === "light" ? "pe-light-tone" : null,
        opts.class
      ].join(" "),
      oncreate: ({ dom }) => {
        state.el = dom;
        showInstance(state, opts);
      },
      onclick: e => e.preventDefault()

if (e.which === 27 && !state.transitioning) {
      cleanup();
      hideInstance(state, Object.assign({}, opts, {
        hideDelay: 0
      }));
    }
  };
  const cleanup = () => {
    unsubscribe("resize", update);
    unsubscribe("keydown", handleEscape);
  };
  
  const element = opts.element || "form";
  const props = Object.assign(
    {},
    filterSupportedAttributes(opts, { remove: ["style"] }), // style set in content, and set by show/hide transition
    {
      className: [
        classes.component,
        opts.fullscreen ? classes.fullscreen : null,
        opts.backdrop ? classes.hasBackdrop : null,
        state.topOverflow || opts.borders ? classes.hasTopOverflow : null,
        state.bottomOverflow || opts.borders ? classes.hasBottomOverflow : null,
        state.visible ? classes.visible : null,
        opts.tone === "dark" ? "pe-dark-tone" : null,
        opts.tone === "light" ? "pe-light-tone" : null,
        opts.class
      ].join(" "),
      oncreate: ({ dom }) => {
        state.el = dom;
        // resize: update scroll state ("overflow" borders)
        subscribe("resize", update);

if (triggerEl) {
        pointerEndEvent.forEach(evt =>
          triggerEl.addEventListener(evt, tap, false));
      }
      return () => {
        if (triggerEl) {
          pointerEndEvent.forEach(evt =>
            triggerEl.removeEventListener(evt, tap, false));
        }
      }
    },
    [triggerEl]
  );

  const componentProps = Object.assign({}, 
    filterSupportedAttributes(props),
    getDom(dom => dom && !domElement && setDomElement(dom)),
    props.testId && { "data-test-id": props.testId },
    {
      className: [
        classes.component,
        props.unconstrained ? classes.unconstrained : null,
        props.tone === "dark" ? "pe-dark-tone" : null,
        props.tone === "light" ? "pe-light-tone" : null,
        props.className || props[a.class],
      ].join(" ")
    }
  );

  return h(props.element || "div",
    componentProps
  );

export const createProps = (vnode, { keys: k }) => {
  const attrs = vnode.attrs;
  return Object.assign(
    {},
    filterSupportedAttributes(attrs),
    attrs.testId && { "data-test-id": attrs.testId },
    {
      className: [
        classes.component,
        attrs.tone === "dark" ? "pe-dark-tone" : null,
        attrs.tone === "light" ? "pe-light-tone" : null,
        attrs.className || attrs[k.class],
      ].join(" "),
    }
  );
};

export const createProps = (vnode, { keys: k }) => {
  const attrs = vnode.attrs;
  return Object.assign(
    {},
    filterSupportedAttributes(attrs),
    attrs.testId && { "data-test-id": attrs.testId },
    {
      className: [
        classes.component,
        attrs.animated && classes.animated,
        attrs.className || attrs[k.class],
      ].join(" ")
    }
  );
};

export const createProps = (vnode, { keys: k }) => {
  const attrs = vnode.attrs;
  return Object.assign(
    {},
    filterSupportedAttributes(attrs),
    attrs.testId && { "data-test-id": attrs.testId },
    {
      className: [
        classes.component,
        attrs.tone === "dark" ? "pe-dark-tone" : null,
        attrs.tone === "light" ? "pe-light-tone" : null,
        attrs.className || attrs[k.class],
      ].join(" "),
    }
  );
};