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,
          });
      }),
  })

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>
    );
  }

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
  }

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
  }

toClass = function toClass(baseComponent) {
  var _class, _temp;

  return isClassComponent(baseComponent) ? baseComponent : (_temp = _class =
  /*#__PURE__*/
  function (_Component) {
    _inheritsLoose(ToClass, _Component);

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

    var _proto = ToClass.prototype;

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

      return baseComponent(this.props, this.context);
    };

    return ToClass;
  }(Component), _class.displayName = getDisplayName(baseComponent), _class.propTypes = baseComponent.propTypes, _class.contextTypes = baseComponent.contextTypes, _class.defaultProps = baseComponent.defaultProps, _temp);
}

// 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>
		);
	},
)

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,
      })
    );
  }

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>
  );
}

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>
  );
})

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>
  );
}

Arguments = ({children, of: component, input=true}) => {
  const components = useComponents();
  const compileMD = marksy({createElement, components});

  // Extract data
  if (!Array.isArray(children)) {
    children = [children];
  }

  const computedProps = component ? null : Object.fromEntries(
    children.map(child => {
      const data = {};
      data.defaultValue = child.default ? {computed: true, value: compileMD(child.default).tree[0].props.children} : {};
      data.description = (child.desc || child.description) ? compileMD(child.desc || child.description).tree : null;
      data.required = false;
      if (input) {
        if (child.hasOwnProperty('required')) {
          data.required = child.required;
        } else if (!child.hasOwnProperty('default')) {
          data.required = true;
        }
      }
      data.type = compileMD(child.type).tree[0].props.children;

      return [child.name, data];
    })
  );

  // Render
  const PropsComponent = components.props;
  if (component) {
    return (<Props of={component} />);
  } else if (!PropsComponent) {
    return null;
  } else {
    return (
      <PropsComponent
        props={computedProps}
        of={component}
        getPropType={(prop) => prop.type}
      />
    );
  }
}

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>
    );
  }

render() {
    const { dark, onClick, onMenuClick, size } = this.props
    const isSmall = size === 'sm' || size === 'xs'
    const menuButton = isSmall ? (
      <IconButton onClick={onMenuClick}>
        <Icon path={mdiMenu} size={1} />
      </IconButton>
    ) : null

    const title = createElement(
      isSmall ? H6 : H2,
      { style: { color: 'var(--primary)' }, className: 'topbar-title' },
      'UI-Neumorphism'
    )

    return (
      <Card flat dark={dark} className={`main-topbar`}>
        <Card flat className='d-flex align-center topbar-headline'>
          {menuButton}
          {title}
        </Card>
        <Card flat className='d-flex align-center topbar-actions'>
          <IconButton
            className='topbar-action mr-1'
            onClick={() => this.open(npmUrl)}
          >
            <Icon path={mdiNpm} size={1.4} />
          </IconButton>
          <IconButton
            className='topbar-action'
            onClick={() => this.open(githubUrl)}
          >
            <Icon path={mdiGithub} size={1} />
          </IconButton>
          <ToggleButton className='topbar-action' onChange={onClick}>
            <Icon path={dark ? mdiLightbulbOutline : mdiLightbulb} size={1} />
          </ToggleButton>
        </Card>
      </Card>
    )
  }

Root = () =>
  createElement(
    Router,
    {
      basepath: __PATH_PREFIX__,
    },
    createElement(RouteHandler, { path: `/*` })
  )

compile = elements => marksy({ createElement, elements })

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(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));
}

function inject(sourcePath, callback) {
  const script = contentDocument.createElement('script');
  script.onload = callback;
  script.src = sourcePath;

  ((contentDocument.body: any): HTMLBodyElement).appendChild(script);
}

export default function PossibleRoom({
  roomId, // truthy
  newRoom,
  roomIdentity,
  roomIdentityKeys,
  onError,
  autoCreate,
  uxConfig,
}) {
  const [state, {enterRoom}] = useJam();
  let [room, hasRoom, isLoading, _roomId] = use(state, [
    'room',
    'hasRoom',
    'isRoomLoading',
    'roomId',
  ]);
  isLoading = isLoading || _roomId === null;

  // import room identity
  // this has to be done BEFORE creating new room so that we can be moderator
  let importIdentityPromise = useMemo(() => {
    if (roomIdentity || roomIdentityKeys) {
      return importRoomIdentity(roomId, {
        ...roomIdentityKeys,
        info: roomIdentity,
      });
    }
  }, [roomId, roomIdentity, roomIdentityKeys]);

  // if room does not exist && autoCreate is on, try to create new one
  let shouldCreate = !hasRoom && autoCreate && !isLoading;
  let [autoCreateLoading, autoCreateError] = useCreateRoom({
    roomId,
    newRoom,
    shouldCreate,
    promiseToAwait: importIdentityPromise,
    onSuccess: () => enterRoom(roomId),
  });

  if (isLoading) return null;
  if (hasRoom) return <Room key={roomId} {...{room, roomId, uxConfig}} />;
  if (shouldCreate && autoCreateLoading) return null;

  if (roomId.length < 4 || (shouldCreate && autoCreateError)) {
    return typeof onError === 'function'
      ? createElement(onError, {roomId, error: {createRoom: true}})
      : onError || <Error />;
  }

  return <StartFromURL {...{roomId, newRoom}} />;
}

$ = createElement

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

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