How to use umi - 10 common examples

To help you get started, we’ve selected a few umi examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github umijs / umi / examples / func-test / pages / dynamic.js View on Github external
import { Component } from 'react';
import dynamic from 'umi/dynamic';

const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));

const A = dynamic(async function() {
  await delay(/* 1s */ 1000);
  return () => <div>A rendered after 1s</div>;
});

const B = dynamic(
  async function() {
    await delay(/* 1s */ 1000);
    return () => <div>B rendered after 1s</div>;
  },
  {
    loading() {
      return <div>Custome Loading...</div>;
    },
  },
);
github umijs / umi / examples / func-test / pages / dynamic.js View on Github external
import { Component } from 'react';
import dynamic from 'umi/dynamic';

const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));

const A = dynamic(async function() {
  await delay(/* 1s */ 1000);
  return () => <div>A rendered after 1s</div>;
});

const B = dynamic(
  async function() {
    await delay(/* 1s */ 1000);
    return () => <div>B rendered after 1s</div>;
  },
  {
    loading() {
      return <div>Custome Loading...</div>;
    },
  },
);

export default class Dynamic extends Component {
  constructor(props) {
    super(props);
    this.state = {
      A: false,
github gangtao / dataplay3 / client / src / components / GlobalHeader / RightContent.js View on Github external
className={styles.action}
          >
            <Icon type="question-circle-o" />
          </a>
        </Tooltip>
        <NoticeIcon
          className={styles.action}
          count={currentUser.unreadCount}
          onItemClick={(item, tabProps) => {
            console.log(item, tabProps); // eslint-disable-line
            this.changeReadState(item, tabProps);
          }}
          locale={{
            emptyText: formatMessage({ id: 'component.noticeIcon.empty' }),
            clear: formatMessage({ id: 'component.noticeIcon.clear' }),
            loadedAll: formatMessage({ id: 'component.noticeIcon.loaded' }),
            loadMore: formatMessage({ id: 'component.noticeIcon.loading-more' }),
          }}
          onClear={onNoticeClear}
          onLoadMore={this.fetchMoreNotices}
          onPopupVisibleChange={onNoticeVisibleChange}
          loading={fetchingNotices}
          clearClose
        >
          <NoticeIcon.Tab
            count={unreadMsg.notification}
            list={noticeData.notification}
            title={formatMessage({ id: 'component.globalHeader.notification' })}
            name="notification"
            emptyText={formatMessage({ id: 'component.globalHeader.notification.empty' })}
            emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
            {...loadMoreProps}
github zhang8043 / abp-react-antd / Precise-Antd / src / components / GlobalHeader / RightContent.js View on Github external
>
            <Icon type="question-circle-o" />
          </a>
        </Tooltip>
        <NoticeIcon
          className={styles.action}
          count='12'
          onItemClick={(item, tabProps) => {
            console.log(item, tabProps); // eslint-disable-line
            this.changeReadState(item, tabProps);
          }}
          locale={{
            emptyText: formatMessage({ id: 'component.noticeIcon.empty' }),
            clear: formatMessage({ id: 'component.noticeIcon.clear' }),
            loadedAll: formatMessage({ id: 'component.noticeIcon.loaded' }),
            loadMore: formatMessage({ id: 'component.noticeIcon.loading-more' }),
          }}
          onClear={onNoticeClear}
          onLoadMore={this.fetchMoreNotices}
          onPopupVisibleChange={onNoticeVisibleChange}
          loading={fetchingNotices}
          clearClose
        >
          <NoticeIcon.Tab
            count={unreadMsg.notification}
            list={noticeData.notification}
            title={formatMessage({ id: 'component.globalHeader.notification' })}
            name="notification"
            emptyText={formatMessage({ id: 'component.globalHeader.notification.empty' })}
            emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
            {...loadMoreProps}
          />
github crawlab-team / artipub / src / pages / .umi / umi.js View on Github external
req: ctx.req || {},
        res: ctx.res || {},
        ...initialProps,
      });
      props = plugins.apply('initialProps', {
        initialValue: props,
      });
    } else {
      // message activeRoute or getInitialProps not found
      console.log(
        !activeRoute
          ? `${pathname} activeRoute not found`
          : `${pathname} activeRoute's getInitialProps function not found`,
      );
    }
    const rootContainer = plugins.apply('rootContainer', {
      initialValue: React.createElement(require('./router').default, props),
    });
    const htmlTemplateMap = {};
    return {
      htmlElement:
        activeRoute && activeRoute.path
          ? htmlTemplateMap[activeRoute.path]
          : '',
      rootContainer,
      matchPath: activeRoute && activeRoute.path,
      g_initialData: props,
    };
  };
  // using project react-dom version
github crawlab-team / artipub / src / pages / .umi / umi.js View on Github external
initialValue: {},
      });
      // patch query object
      const location = history.location
        ? { ...history.location, query: getUrlQuery(history.location.search) }
        : {};
      props = await activeRoute.component.getInitialProps({
        route: activeRoute,
        isServer: true,
        location,
        // only exist in server
        req: ctx.req || {},
        res: ctx.res || {},
        ...initialProps,
      });
      props = plugins.apply('initialProps', {
        initialValue: props,
      });
    } else {
      // message activeRoute or getInitialProps not found
      console.log(
        !activeRoute
          ? `${pathname} activeRoute not found`
          : `${pathname} activeRoute's getInitialProps function not found`,
      );
    }
    const rootContainer = plugins.apply('rootContainer', {
      initialValue: React.createElement(require('./router').default, props),
    });
    const htmlTemplateMap = {};
    return {
      htmlElement:
github watertao / teemo / src / utils / rest-err-processor.js View on Github external
function process_401(e, path) {
  const { extra, request } = e;
  const { options: { method } } = request;

  // GET /system/session
  // no notify , but redirect to /login
  if (method == SESSION_SYNC_REQ.verb && _.startsWith(path, SESSION_SYNC_REQ.uri)) {
    router.push('/login');
  }

  // POST /system/session
  // notify, but don't redirect to /login
  else if (method == SESSION_CREATE_REQ.verb && _.startsWith(path, SESSION_CREATE_REQ.uri)) {
    notifyError(
      extra.statusText,
      extra.status,
      request.url,
      extra.data? extra.data.message : extra.statusText,
      method,
    );
  }

  // other requests
  // notify, and redirect to /login
github DFocusGroup / generator-umi / generators / app / templates / src / helpers / view.js View on Github external
export function redirectTo(to, from) {
  if (isString(to) || isString(from)) {
    if (!from) {
      return router.push(to)
    }
    return router.push({
      pathname: to,
      query: {
        from
      }
    })
  }
  // to为完整的RouteData
  return router.push(to)
}
github apache / apisix-dashboard / web / src / pages / User / components / LoginMethodPassword.tsx View on Github external
submit: async ({ username, password }) => {
    if (username !== '' && password !== '') {
      try {
        const result = await request('/user/login', {
          method: 'POST',
          requestType: 'json',
          data: {
            username,
            password,
          },
        });

        localStorage.setItem('token', result.data.token);
        return {
          status: true,
          message: formatMessage({ id: 'component.user.loginMethodPassword.success' }),
          data: [],
        };
      } catch (e) {
        // NOTE: API failed, using errorHandler
github alitajs / alita / packages / umi-plugin-cache-route / renderRoutes.js View on Github external
render: function render(props) {
        var childRoutes = renderRoutes(route.routes, extraProps, {
          location: props.location
        });

        if (route.component) {
          var compatProps = getCompatProps(_objectSpread({}, props, {}, extraProps));
          var newProps = plugins.apply('modifyRouteProps', {
            initialValue: _objectSpread({}, props, {}, extraProps, {}, compatProps),
            args: {
              route: route
            }
          });
          var Component = route.component; // eslint-disable-next-line no-undef

          if (__IS_BROWSER && Component.getInitialProps) {
            var initialProps = plugins.apply('modifyInitialProps', {
              initialValue: {}
            });
            Component = wrapWithInitialProps(Component, initialProps);
          }

          return _react.default.createElement(Component, _extends({}, newProps, {
            route: route