react#createElement JavaScript Examples

dynamicWrapper = (app, models, component) =>
  dynamic({
    app,
    models: () =>
      models
        .filter(model => modelNotExisted(app, model))
        .map(m => import(`../../models/${m}.js`)) || [],
    // add routerData prop
    component: () =>
      // if (!routerDataCache) {
      //   routerDataCache = getRouterData(app);
      // }
      component().then(raw => {
        const Component = raw.default || raw;
        return props =>
          createElement(Component, {
            ...props,
            // routerData: routerDataCache,
          });
      }),
  })

HashHeading = memo(function HashHeading({ id, title, heading = 'h1' }) {
  const ref = useRef(null);
  const [hover, setHover] = useState(false);
  const [fontSize, setFontSize] = useState();

  useLayoutEffect(() => {
    setFontSize(getComputedStyle(ref.current).getPropertyValue('font-size'));
  }, []);

  return (
    <div
      className={bem(blockName)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      {createElement(
        heading,
        {
          id,
          ref,
          className: bem(blockName, 'heading')
        },
        title
      )}

      <Link href={`#${id}`}>
        <a className={bem(blockName, 'link', { hover })} style={{ fontSize }}>
          #
        </a>
      </Link>
    </div>
  );
})

// act is supported [email protected]
// so for versions that don't have act from test utils
// we do this little polyfill. No warnings, but it's
// better than nothing.

function actPolyfill(cb) {
  ReactDOM.unstable_batchedUpdates(cb);
  ReactDOM.render( /*#__PURE__*/createElement("div", null), document.createElement('div'));
}

render() {
    const {
      props: { feature },
      handleReady,
    } = this;
    return (
      <div>
        {feature &&
          createElement(feature, {
            onReady: handleReady,
          })}
      </div>
    );
  }

function reload() {
  safeUnmount();

  node.innerHTML = '';

  setTimeout(() => {
    root = createRoot(node);
    root.render(
      createElement(DevTools, {
        bridge: ((bridge: any): FrontendBridge),
        canViewElementSourceFunction,
        showTabBar: true,
        store: ((store: any): Store),
        warnIfLegacyBackendDetected: true,
        viewElementSourceFunction,
      }),
    );
  }, 100);
}

Tabs = forwardRef(
	(
		{ className, defaultActiveIndex, children, onTab = noop, ...otherProps },
		ref,
	) => {
		const [activeIndex, setActiveIndex] = useState(defaultActiveIndex || 0);
		const tabBarContent = Children.map(children, (child, index) => {
			const handleTabClick = index => event => {
				setActiveIndex(index);
				onTab(index);
				event.preventDefault();
			};

			const { tabLabel, ...childProps } = child.props;

			return (
				<Tab
					{...childProps}
					isActive={activeIndex === index}
					onClick={handleTabClick(index)}
					label={tabLabel}
				/>
			);
		});

		const childrenArray = Children.toArray(children);
		const activeTab = childrenArray[activeIndex];

		useImperativeHandle(ref, () => ({ setActiveIndex }));

		return (
			<Box className={cx('tabs', className)} {...otherProps}>
				<TabBar>{tabBarContent}</TabBar>
				{createElement(activeTab.type, omitTabLabel(activeTab.props))}
			</Box>
		);
	},
)

MuiGridListTileBar = ({
  actionIcon,
  titlePosition,
  rootClass,
  subtitle,
  title,
}) => {
  const styles = Storyblok.arrayToMuiStyles(rootClass);
  const renderAction = actionIcon.length !== 0 ? actionIcon[0] : null;

  return (
    <GridListTileBar
      title={title}
      subtitle={<span>{subtitle}</span>}
      actionIcon={renderAction
        && (
          <Suspense fallback={<></>}>
            {createElement(components[renderAction.component], { ...renderAction })}
          </Suspense>
        )
      }
      titlePosition={titlePosition}
      className={styles.root}
    />
  );
}

Exception = ({ className, linkElement = 'a', type, title, desc, img, actions, ...rest }) => {
  const pageType = type in config ? type : '404';
  const clsString = classNames(styles.exception, className);
  return (
    <div className={clsString} {...rest}>
      <div className={styles.imgBlock}>
        <div
          className={styles.imgEle}
          style={{ backgroundImage: `url(${img || config[pageType].img})` }}
        />
      </div>
      <div className={styles.content}>
        <h1>{title || config[pageType].title}</h1>
        <div className={styles.desc}>
          {desc || (config[pageType].desc && config[pageType].desc())}
        </div>
        <div className={styles.actions}>
          {actions ||
            createElement(linkElement, {
              to: '/',
              href: '/',
            })}
        </div>
      </div>
    </div>
  );
}

render() {
    const {
      className,
      innerRef,
      innerTagName,
      outerTagName,
      style,
      innerListStyle,
    } = this.props;

    const onScroll = this._onScrollVertical;

    const items = this._renderItems();

    return createElement(
      outerTagName,
      {
        className,
        onScroll,
        ref: this._outerRefSetter,
        style: {
          WebkitOverflowScrolling: 'touch',
          overflowY: 'auto',
          overflowAnchor: 'none',
          willChange: 'transform',
          width: '100%',
          ...style,
        },
      },
      createElement(innerTagName, {
        children: items,
        ref: innerRef,
        style: innerListStyle,
      })
    );
  }

function dynamic (opts) {
  var loadableFn = Loadable;
  var loadableOptions = {
    loading: function loading(_ref) {
      var error = _ref.error,
          isLoading = _ref.isLoading;

      if (process.env.NODE_ENV === 'development') {
        if (isLoading) {
          return /*#__PURE__*/createElement("p", null, "loading...");
        }

        if (error) {
          return /*#__PURE__*/createElement("p", null, error.message, /*#__PURE__*/createElement("br", null), error.stack);
        }
      }

      return /*#__PURE__*/createElement("p", null, "loading...");
    }
  }; // Support for direct import(),
  // eg: dynamic(() => import('../hello-world'))

  if (typeof opts === 'function') {
    loadableOptions.loader = opts; // Support for having first argument being options,
    // eg: dynamic({loader: import('../hello-world')})
  } else if (_typeof(opts) === 'object') {
    loadableOptions = _objectSpread2({}, loadableOptions, {}, opts);
  } else {
    throw new Error("Unexpect arguments ".concat(opts));
  } // Support for passing options,
  // eg: dynamic(import('../hello-world'), {loading: () => <p>Loading something</p>})
  // loadableOptions = { ...loadableOptions, ...options };


  return loadableFn(loadableOptions);
}

Wrapper = ({ loading, variant, children, alwaysRenderChildren }) => {
	const spinnerComponent = createElement(Spinner, { variant });

	if (alwaysRenderChildren) {
		return (
			<>
				{loading && spinnerComponent}
				<HiddenWrapper active={loading}>{children}</HiddenWrapper>
			</>
		);
	}

	return loading ? spinnerComponent : children;
}

toClass = function toClass(baseComponent) {
  if (isClassComponent(baseComponent)) {
    return baseComponent;
  }

  var ToClass = function (_Component) {
    inherits(ToClass, _Component);

    function ToClass() {
      classCallCheck(this, ToClass);
      return possibleConstructorReturn(this, _Component.apply(this, arguments));
    }

    ToClass.prototype.render = function render() {
      if (typeof baseComponent === 'string') {
        return React.createElement(baseComponent, this.props);
      }
      return baseComponent(this.props, this.context);
    };

    return ToClass;
  }(Component);

  ToClass.displayName = getDisplayName(baseComponent);
  ToClass.propTypes = baseComponent.propTypes;
  ToClass.contextTypes = baseComponent.contextTypes;
  ToClass.defaultProps = baseComponent.defaultProps;

  return ToClass;
}

EditableLinkGroup = props => {
  const { links, linkElement, onAdd } = props;
  return (
    <div className={styles.linkGroup}>
      {links.map(link =>
        createElement(
          linkElement,
          {
            key: `linkGroup-item-${link.id || link.title}`,
            to: link.href,
            href: link.href,
          },
          link.title,
        ),
      )}
      <Button size="small" type="primary" ghost onClick={onAdd}>
        <PlusOutlined /> 添加
      </Button>
    </div>
  );
}

render() {
    const { links, linkElement, onAdd } = this.props;
    return (
      <div className={styles.linkGroup}>
        {links.map(link =>
          createElement(
            linkElement,
            {
              key: `linkGroup-item-${link.id || link.title}`,
              to: link.href,
              href: link.href,
            },
            link.title
          )
        )}
        {
          <Button size="small" type="primary" ghost onClick={onAdd} icon="plus">
            添加
          </Button>
        }
      </div>
    );
  }

/**
 * Provide a theme to an entire react component tree via context
 */


function ThemeProvider(props) {
  var outerTheme = useContext(ThemeContext);
  var themeContext = useMemo(function () {
    return mergeTheme(props.theme, outerTheme);
  }, [props.theme, outerTheme]);

  if (!props.children) {
    return null;
  }

  return React.createElement(ThemeContext.Provider, {
    value: themeContext
  }, props.children);
}

render() {
    const props = {
      ...this.props,
      pathContext: this.props.pageContext,
    }

    const [replacementElement] = apiRunner(`replaceComponentRenderer`, {
      props: this.props,
      loader: publicLoader,
    })

    const pageElement =
      replacementElement ||
      createElement(this.props.pageResources.component, {
        ...props,
        key: this.props.pageResources.page.path,
      })

    const wrappedPage = apiRunner(
      `wrapPageElement`,
      { element: pageElement, props },
      pageElement,
      ({ result }) => {
        return { element: result, props }
      }
    ).pop()

    return wrappedPage
  }

makeStyleTag = function makeStyleTag(target) {
  var head = document.head;
  var parent = target || head;
  var style = document.createElement('style');
  var prevStyle = findLastStyleTag(parent);
  var nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;
  style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);
  style.setAttribute(SC_ATTR_VERSION, SC_VERSION);
  var nonce = getNonce();
  if (nonce) style.setAttribute('nonce', nonce);
  parent.insertBefore(style, nextSibling);
  return style;
}

render() {
    const { style, className } = this.props
    return createElement(
      this.getMapping(),
      {
        style,
        className: `${this.getClass()} ${className}`
      },
      this.props.children
    )
  }

withTheme = (function (Component) {
  // $FlowFixMe This should be React.forwardRef<Config, Instance>
  var WithTheme = React.forwardRef(function (props, ref) {
    var theme = useContext(ThemeContext); // $FlowFixMe defaultProps isn't declared so it can be inferrable

    var defaultProps = Component.defaultProps;
    var themeProp = determineTheme(props, theme, defaultProps);

    if (process.env.NODE_ENV !== 'production' && themeProp === undefined) {
      // eslint-disable-next-line no-console
      console.warn("[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"" + getComponentName(Component) + "\"");
    }

    return React.createElement(Component, _extends({}, props, {
      theme: themeProp,
      ref: ref
    }));
  });
  hoist(WithTheme, Component);
  WithTheme.displayName = "WithTheme(" + getComponentName(Component) + ")";
  return WithTheme;
})

render() {
    const linkProps = {}
    const { link, style, children, className } = this.props
    const tag = link ? 'a' : 'span'
    if (link) linkProps.href = link

    const elem = createElement(
      tag,
      {
        style,
        key: uid(),
        ...linkProps,
        id: this.state.id,
        className: `${this.getClasses('chip')} ${className}`
      },
      [this.prepend, children, this.append, this.action]
    )

    return elem
  }

// act is supported [email protected]
// so for versions that don't have act from test utils
// we do this little polyfill. No warnings, but it's
// better than nothing.

function actPolyfill(cb) {
  ReactDOM.unstable_batchedUpdates(cb);
  ReactDOM.render( /*#__PURE__*/createElement("div", null), document.createElement('div'));
}

render() {
    const {
      className,
      backText,
      linkElement = 'a',
      type,
      title,
      desc,
      img,
      actions,
      redirect,
      ...rest
    } = this.props;
    const pageType = type in config ? type : '404';
    const clsString = classNames(styles.exception, className);
    return (
      <div className={clsString} {...rest}>
        <div className={styles.imgBlock}>
          <div
            className={styles.imgEle}
            style={{ backgroundImage: `url(${img || config[pageType].img})` }}
          />
        </div>
        <div className={styles.content}>
          <h1>{title || config[pageType].title}</h1>
          <div className={styles.desc}>{desc || config[pageType].desc}</div>
          <div className={styles.actions}>
            {actions ||
              createElement(
                linkElement,
                {
                  to: redirect,
                  href: redirect,
                },
                <Button type="primary">{backText}</Button>
              )}
          </div>
        </div>
      </div>
    );
  }

componentFromProp = function componentFromProp(propName) {
  var Component$$1 = function Component$$1(props) {
    return createElement(props[propName], omit(props, [propName]));
  };

  Component$$1.displayName = "componentFromProp(" + propName + ")";
  return Component$$1;
}

addWelcomePageRoute = (member) => [
    ...member,
    {
        position: 1000,
        path: '/',
        render: (props) => createElement(WelcomePage, props)
    }
]

FormSection = function (_Component) {
  _inherits(FormSection, _Component);

  function FormSection(props, context) {
    _classCallCheck(this, FormSection);

    var _this = _possibleConstructorReturn(this, (FormSection.__proto__ || Object.getPrototypeOf(FormSection)).call(this, props, context));

    if (!context._reduxForm) {
      throw new Error('FormSection must be inside a component decorated with reduxForm()');
    }
    return _this;
  }

  _createClass(FormSection, [{
    key: 'getChildContext',
    value: function getChildContext() {
      var context = this.context,
          name = this.props.name;

      return {
        _reduxForm: _extends({}, context._reduxForm, {
          sectionPrefix: prefixName(context, name)
        })
      };
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          children = _props.children,
          name = _props.name,
          component = _props.component,
          rest = _objectWithoutProperties(_props, ['children', 'name', 'component']);

      if (React.isValidElement(children)) {
        return children;
      }

      return createElement(component, _extends({}, rest, {
        children: children
      }));
    }
  }]);

  return FormSection;
}(Component)

function StyleSheetManager(props) {
  var _useState = useState(props.stylisPlugins),
      plugins = _useState[0],
      setPlugins = _useState[1];

  var contextStyleSheet = useStyleSheet();
  var styleSheet = useMemo(function () {
    var sheet = contextStyleSheet;

    if (props.sheet) {
      // eslint-disable-next-line prefer-destructuring
      sheet = props.sheet;
    } else if (props.target) {
      sheet = sheet.reconstructWithOptions({
        target: props.target
      });
    }

    if (props.disableCSSOMInjection) {
      sheet = sheet.reconstructWithOptions({
        useCSSOMInjection: false
      });
    }

    return sheet;
  }, [props.disableCSSOMInjection, props.sheet, props.target]);
  var stylis = useMemo(function () {
    return createStylisInstance({
      options: {
        prefix: !props.disableVendorPrefixes
      },
      plugins: plugins
    });
  }, [props.disableVendorPrefixes, plugins]);
  useEffect(function () {
    if (!shallowequal(plugins, props.stylisPlugins)) setPlugins(props.stylisPlugins);
  }, [props.stylisPlugins]);
  return React.createElement(StyleSheetContext.Provider, {
    value: styleSheet
  }, React.createElement(StylisContext.Provider, {
    value: stylis
  }, process.env.NODE_ENV !== 'production' ? React.Children.only(props.children) : props.children));
}

componentFromProp = function componentFromProp(propName) {
  var Component$$1 = function Component$$1(props) {
    return createElement(props[propName], omit(props, [propName]));
  };
  Component$$1.displayName = 'componentFromProp(' + propName + ')';
  return Component$$1;
}

function render(loaded, props) {
  return React__default.createElement(resolve(loaded), props);
}

function render(ui, _temp) {
  var _ref2 = _temp === void 0 ? {} : _temp,
      container = _ref2.container,
      _ref2$baseElement = _ref2.baseElement,
      baseElement = _ref2$baseElement === void 0 ? container : _ref2$baseElement,
      queries = _ref2.queries,
      _ref2$hydrate = _ref2.hydrate,
      hydrate = _ref2$hydrate === void 0 ? false : _ref2$hydrate,
      WrapperComponent = _ref2.wrapper;

  if (!baseElement) {
    // default to document.body instead of documentElement to avoid output of potentially-large
    // head elements (such as JSS style blocks) in debug output
    baseElement = document.body;
  }

  if (!container) {
    container = baseElement.appendChild(document.createElement('div'));
  } // we'll add it to the mounted containers regardless of whether it's actually
  // added to document.body so the cleanup method works regardless of whether
  // they're passing us a custom container or not.


  mountedContainers.add(container);

  var wrapUiIfNeeded = function wrapUiIfNeeded(innerElement) {
    return WrapperComponent ? /*#__PURE__*/createElement(WrapperComponent, null, innerElement) : innerElement;
  };

  act(function () {
    if (hydrate) {
      ReactDOM.hydrate(wrapUiIfNeeded(ui), container);
    } else {
      ReactDOM.render(wrapUiIfNeeded(ui), container);
    }
  });
  return _extends({
    container: container,
    baseElement: baseElement,
    debug: function debug(el, maxLength, options) {
      if (el === void 0) {
        el = baseElement;
      }

      return Array.isArray(el) ? // eslint-disable-next-line no-console
      el.forEach(function (e) {
        return console.log(prettyDOM(e, maxLength, options));
      }) : // eslint-disable-next-line no-console,
      console.log(prettyDOM(el, maxLength, options));
    },
    unmount: function unmount() {
      act(function () {
        ReactDOM.unmountComponentAtNode(container);
      });
    },
    rerender: function rerender(rerenderUi) {
      render(wrapUiIfNeeded(rerenderUi), {
        container: container,
        baseElement: baseElement
      }); // Intentionally do not return anything to avoid unnecessarily complicating the API.
      // folks can use all the same utilities we return in the first place that are bound to the container
    },
    asFragment: function asFragment() {
      /* istanbul ignore else (old jsdom limitation) */
      if (typeof document.createRange === 'function') {
        return document.createRange().createContextualFragment(container.innerHTML);
      } else {
        var template = document.createElement('template');
        template.innerHTML = container.innerHTML;
        return template.content;
      }
    }
  }, getQueriesForElement(baseElement, queries));
}