antd#Spin TypeScript Examples

The following examples show how to use antd#Spin. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From generator-earth with MIT License 6 votes vote down vote up
render() {
        const { isShowLoading, isSaveAllPage, sourceId, commonTableStore } = this.props;
        const isLoading: boolean = isShowLoading ? commonTableStore.isLoading : false


        if (isSaveAllPage) {
            return (
                <Spin spinning={isLoading}>
                    {this.renderSaveAllPage()}
                </Spin>
            )
        }

        if (commonTableStore.allDataSource && !commonTableStore.allDataSource[sourceId]) {
            return null;
        }


        return (
            <Spin spinning={isLoading}>
                <this.FormTableList
                    sourceId={this.props.sourceId}
                    store={commonTableStore}
                    getData={this.getData}
                />
            </Spin>
        )
    }
Example #2
Source File: Spinner.tsx    From jmix-frontend with Apache License 2.0 6 votes vote down vote up
export function Spinner() {

  return (
    <div className={styles.spinner}>
      <Spin size="large"/>
    </div>
  );

}
Example #3
Source File: App.tsx    From vite-react-ts with MIT License 6 votes vote down vote up
App = () => {
  return (
    <Suspense fallback={<Spin size="large" className="layout__loading" />}>
      {/* <Authority> */}
      <BrowserRouter>{renderRoutes(routes)}</BrowserRouter>
      {/* </Authority> */}
    </Suspense>
  );
}
Example #4
Source File: index.tsx    From ii-admin-base with MIT License 6 votes vote down vote up
render() {
    const { fetching, options, value } = this.state;
    const {
      mode,
      placeholder,
      itemStyle,
      optionKey = 'key',
      optionValue = 'value',
      ...restProps
    } = this.props;
    return (
      <Select
        mode={mode}
        labelInValue
        value={value}
        placeholder={placeholder}
        notFoundContent={fetching ? <Spin size="small" /> : null}
        filterOption={false}
        onSearch={this.fetchUser}
        onChange={this.handleChange}
        style={itemStyle}
        showSearch
        {...restProps}
      >
        {options.map((item: KeyValueObj) => (
          <Option key={item[optionValue]} value={item[optionValue]}>
            {item[optionKey]}
          </Option>
        ))}
      </Select>
    );
  }
Example #5
Source File: index.tsx    From RareCamp with Apache License 2.0 6 votes vote down vote up
export default function UserHeader({
  getContent,
}: {
  getContent?: any
}) {
  const { data, isLoading } = useQuery('userInfo', () =>
    Auth.currentAuthenticatedUser(),
  )
  return (
    <PageHeader>
      <Avatar size={72}>
        {isLoading ? <Spin /> : data?.attributes.name[0]}
      </Avatar>
      <div>
        <h3>
          {getContent
            ? getContent(data?.attributes).title
            : `Welcome ${data?.attributes?.name}, we are glad you are here!`}
        </h3>
        <span>
          {getContent
            ? getContent(data?.attributes).description
            : `Our goal today is to get you one step ahead in your gene
          therapy treatment roadmap`}
        </span>
      </div>
    </PageHeader>
  )
}
Example #6
Source File: LoadingSpinner.tsx    From mkn with MIT License 6 votes vote down vote up
LoadingSpinner: React.FC<IProps> = (props) => {
  LoadingSpinner.displayName = 'LoadingSpinner';

  const iconSize = props.size || 'default';

  return (
    <div
      className={cx(
        styles['comp-wrapper'],
        {
          [styles['comp-wrapper--alwaysDarkMode']]: props.alwaysDarkMode,
          [styles['comp-wrapper--fullscreen']]: !!props.fullscreen,
          [styles['comp-wrapper--lazy']]: !!props.lazy,
        },
        props.className,
        `g-comp--${LoadingSpinner.displayName}`,
      )}
      style={props.style}
    >
      <Spin
        size={iconSize}
        delay={props.delay}
        className={cx(
          styles['spin'],
          styles[`spin-size--${iconSize}`],
          props.iconClassName,
        )}
        indicator={<Spinner className={cx('g-icon-spin')} />}
      />
    </div>
  );
}
Example #7
Source File: index.tsx    From antdp with MIT License 6 votes vote down vote up
// loading components from code split
// https://umijs.org/plugin/umi-plugin-react.html#dynamicimport
export default function PageLoading(props: PageLoading = {}) {
  return (
    <div style={{ paddingTop: 100, paddingBottom: 100, textAlign: 'center' }} className="antdp-page-loading">
      <Spin size="large" tip="加载中..." {...props} />
    </div>
  );
}
Example #8
Source File: App.tsx    From graphql-ts-client with MIT License 6 votes vote down vote up
function App() {
    return (
        <RelayEnvironmentProvider environment={environment}>
            <Suspense fallback={
                <div className={css({textAlign: 'center'})}>
                    <Spin tip="Loading..."/>
                </div>
            }>
                <Row gutter={20}>
                    <Col span={12}>
                        <DepartmentList/>
                    </Col>
                    <Col span={12}>
                        <EmployeeList/>
                    </Col>
                </Row>
            </Suspense>
        </RelayEnvironmentProvider>
    );
}
Example #9
Source File: PageContent.tsx    From iot-center-v2 with MIT License 6 votes vote down vote up
PageContent: FunctionComponent<PageContentProps> = (props) => (
  <Layout.Content
    style={{
      paddingLeft: 60,
      paddingRight: 60,
      paddingTop: 55,
      margin: 0,
      minHeight: 280,
      minWidth: 350,
      height: '100vh',
      overflowY: props.forceShowScroll ? 'scroll' : 'auto',
    }}
  >
    <PageHeader
      title={props.title}
      style={{paddingLeft: 0, paddingRight: 0, paddingTop: 0}}
      extra={props?.titleExtra}
    />
    {props.message ? (
      <Alert
        message={props.message.title}
        description={props.message.description}
        type={props.message.type}
        showIcon
        closable
      />
    ) : undefined}
    <div className="site-layout-background" style={{minHeight: 360}}>
      <Spin spinning={props.spin ?? false}>{props.children}</Spin>
    </div>
  </Layout.Content>
)
Example #10
Source File: DendronSpinner.tsx    From dendron with GNU Affero General Public License v3.0 6 votes vote down vote up
/**
 * Normal Spinner. Will add custom logic in the future
 * @param props
 * @returns
 */
export default function DendronSpinner() {
  const [showSpinner, setShowSpinner] = React.useState(false);

  React.useEffect(() => {
    const timeoutId = setTimeout(() => {
      setShowSpinner(true);
    }, 1000);
    return () => clearTimeout(timeoutId);
  }, []);
  if (showSpinner) {
    return <Spin />;
  }
  return null;
}
Example #11
Source File: index.tsx    From erda-ui with GNU Affero General Public License v3.0 6 votes vote down vote up
FormModal = (props: FormModalProps) => {
  const { formProps, isEditing, title, loading, ...rest } = props;

  const [locale] = useLocaleReceiver('FormModal');

  React.useEffect(() => {
    return () => {
      formProps.form && formProps.form.reset();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const displayTitle = props.exactTitle
    ? title
    : isEditing
    ? `${replaceMessage(locale.editForm, { label: title as string })}`
    : `${replaceMessage(locale.newForm, { label: title as string })}`;

  return (
    <Modal title={displayTitle} {...rest}>
      <Spin spinning={!!loading}>
        <Form {...formProps} />
      </Spin>
    </Modal>
  );
}
Example #12
Source File: PromiseRender.tsx    From ant-design-pro-V4 with MIT License 6 votes vote down vote up
render() {
    const { component: Component } = this.state;
    const { ok, error, promise, ...rest } = this.props;

    return Component ? (
      <Component {...rest} />
    ) : (
      <div
        style={{
          width: '100%',
          height: '100%',
          margin: 'auto',
          paddingTop: 50,
          textAlign: 'center',
        }}
      >
        <Spin size="large" />
      </div>
    );
  }
Example #13
Source File: PromiseRender.tsx    From jetlinks-ui-antd with MIT License 6 votes vote down vote up
render() {
    const { component: Component } = this.state;
    const { ok, error, promise, ...rest } = this.props;

    return Component ? (
      <Component {...rest} />
    ) : (
      <div
        style={{
          width: '100%',
          height: '100%',
          margin: 'auto',
          paddingTop: 50,
          textAlign: 'center',
        }}
      >
        <Spin size="large" />
      </div>
    );
  }
Example #14
Source File: index.tsx    From shippo with MIT License 5 votes vote down vote up
StyledSpin = styled(Spin)`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
`
Example #15
Source File: App.tsx    From generator-earth with MIT License 5 votes vote down vote up
render() {
        let totalPath: string = this.props.location.pathname;
        let prefixArr: RegExpMatchArray = totalPath.match(/^\/[^/]*/) || [];

        return (
            <Spin spinning={false} style={{ maxHeight: window.innerHeight }}>
                <Layout style={{ minHeight: '100vh' }}>

                    <Sider collapsible>
                        <div className="logo">金融</div>
                        <Menu theme="dark"
                              defaultSelectedKeys={[ '/' ]}
                              defaultOpenKeys={[ '/Asset', '/Funder' ]}
                              mode="inline"
                              selectedKeys={[ prefixArr[0] ]}
                        >
                            <Menu.Item key={'/'}>
                                <Icon type="book"/>
                                <span>首页</span>
                                <Link to="/"></Link>
                            </Menu.Item>

                            <SubMenu key="/page" title={<span><Icon type="book"/>测试</span>}>
                                <Item key="/Details">
                                    <span>详情信息</span>
                                    <Link to="/Details"></Link>
                                </Item>
                            </SubMenu>
                        </Menu>
                    </Sider>

                    <Layout>
                        <Header style={{ background: '#fff', textAlign: 'center' }}>
                            <h1>金融</h1>
                        </Header>
                        <Content style={{ margin: '0 16px' }}>
                            <Switch>
                                {/* 首页 */}
                                <Route exact path="/" component={Home}/>

                                {/* 对账管理 */}
                                <Route path="/Details" component={Details}/>

                            </Switch>
                        </Content>
                    </Layout>

                </Layout>
            </Spin>
        )
    }
Example #16
Source File: DataTable.tsx    From jmix-frontend with Apache License 2.0 5 votes vote down vote up
render() {
    const { loading, mainStore } = this.props;

    if (mainStore?.isEntityDataLoaded() !== true) {
      return (
        <div className={styles.loader}>
          <Spin size='large'/>
        </div>
      );
    }

    let defaultTableProps: TableProps<TEntity> = {
      loading,
      columns: this.generateColumnProps,
      dataSource: this.items,
      onChange: this.onChange,
      pagination: this.paginationConfig,
      rowKey: record => this.constructRowKey(record),
      scroll: {x: true}
    };

    if (this.isRowSelectionEnabled) {
      defaultTableProps = {
        ...defaultTableProps,
        rowSelection: {
          type: this.rowSelectionType,
          selectedRowKeys: toJS(this.selectedRowKeys),
          onChange: this.onRowSelectionColumnClicked,
        },
      };

      if (this.props.canSelectRowByClick) {
        defaultTableProps = {
          ...defaultTableProps,
          onRow: this.onRow,
        };
      }

      if (this.props.hideSelectionColumn) {
        defaultTableProps.rowSelection = {
          ...defaultTableProps.rowSelection,
          renderCell: () => '',
          columnWidth: 0
        };
      }
    }

    if (this.props.enableFieldSettings) {
      defaultTableProps = {
        ...defaultTableProps,
        components: {
          header: {
            row: this.renderHeaderOnlyVisible
          },
          body: {
            row: this.renderBodyOnlyVisible
          },
        }
      };
    }

    const tableProps = { ...defaultTableProps, ...this.props.tableProps };

    return (
      <div className={`${styles.dataTable} ${this.props.hideSelectionColumn ? styles.hideSelectionColumn : ''}`}>
        <div className={styles.buttons}>
          {this.props.buttons}
          {!!this.props.enableFieldSettings && <DataTableSettings
            columns = {defaultTableProps.columns}
            fieldsVisibility={this.fieldsVisibility}
            onChange={this.changeFieldVisibility}
          />}
          {this.props.hideClearFilters ? null : this.clearFiltersButton}
        </div>
        <Table { ...tableProps } />
      </div>
    );
  }
Example #17
Source File: LoadingSpin.tsx    From Shopping-Cart with MIT License 5 votes vote down vote up
LoadingSpin = () => {
  return <Spin tip="Loading..." />;
}
Example #18
Source File: _app.tsx    From mkn with MIT License 5 votes vote down vote up
Spin.setDefaultIndicator(<LoadingSpinner />);
Example #19
Source File: AntdBaseTable.tsx    From ali-react-table with MIT License 5 votes vote down vote up
function BlockSpin() {
  return <Spin style={{ display: 'block' }} />
}
Example #20
Source File: index.tsx    From S2 with MIT License 5 votes vote down vote up
BaseSheet = React.forwardRef(
  (props: SheetComponentsProps, ref: React.MutableRefObject<SpreadSheet>) => {
    const { dataCfg, options, header, showPagination } = props;
    const { s2Ref, loading, containerRef, pagination, wrapperRef } =
      useSpreadSheet(props);

    // 同步实例
    React.useEffect(() => {
      if (ref) {
        ref.current = s2Ref.current;
      }
    }, [ref, s2Ref]);

    return (
      <React.StrictMode>
        <Spin spinning={loading} wrapperClassName={`${S2_PREFIX_CLS}-spin`}>
          <div ref={wrapperRef} className={`${S2_PREFIX_CLS}-wrapper`}>
            {header && (
              <Header
                {...header}
                sheet={s2Ref.current}
                width={options.width}
                dataCfg={getSafetyDataConfig(dataCfg)}
                options={getSheetComponentOptions(options)}
              />
            )}
            <div ref={containerRef} className={`${S2_PREFIX_CLS}-container`} />
            {showPagination && (
              <S2Pagination
                {...pagination}
                pagination={options.pagination}
                onChange={get(showPagination, 'onChange')}
                onShowSizeChange={get(showPagination, 'onShowSizeChange')}
              />
            )}
          </div>
        </Spin>
      </React.StrictMode>
    );
  },
)
Example #21
Source File: panel-body.tsx    From XFlow with MIT License 5 votes vote down vote up
PanelBody: React.FC<IBodyProps> = props => {
  const {
    schema = { tabs: [] },
    triggerUpdate,
    onFieldsChange,
    afterUpdatingCb,
    defaultControlRender,
    loading,
    controlMapService,
    defaultControls = [],
  } = props

  const controlMapCache = React.useMemo(() => {
    const controlMap = makeControlMap([...xflowDefaultControls, ...defaultControls])
    if (controlMapService) {
      controlMapService(controlMap)
    }
    return controlMap
  }, [controlMapService, defaultControls])

  if (loading) {
    return (
      <div
        className={`${props.prefixClz}-body`}
        style={{ ...props.style, display: 'flex', justifyContent: 'center', alignItems: 'center' }}
      >
        <Spin spinning />
      </div>
    )
  }
  return (
    <div className={`${props.prefixClz}-body`} style={props.style}>
      {schema.tabs.length > 0 && (
        <SchemaForm
          schema={schema}
          onFieldsChange={onFieldsChange}
          controlMap={controlMapCache}
          defaultControlRender={defaultControlRender}
          afterUpdatingCb={afterUpdatingCb}
          triggerUpdate={triggerUpdate}
        />
      )}
      {schema.tabs.length === 0 && <Empty style={{ paddingTop: '64px' }} />}
    </div>
  )
}
Example #22
Source File: DepartmentList.tsx    From graphql-ts-client with MIT License 5 votes vote down vote up
DepartmentList: FC = memo(() => {

    const [queryReference, refetch] = useTypedQueryLoader(DEPARTMENT_LIST_QUERY, DEPARRTMENT_LIST_INITIAL_QUERY_REFERENCE);

    const [dialog, setDialog] = useState(false);

    const onNameChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;
        const name = value !== "" ? value : undefined;
        refetch({...queryReference!.variables, name}, {fetchPolicy: 'network-only'});
    }, [refetch, queryReference]);

    const onRefreshClick = useCallback(() => {
        refetch(queryReference!.variables, {fetchPolicy: 'network-only'});
    }, [refetch, queryReference]);

    const onAddDepartmentClick = useCallback(() => {
        setDialog(true);
    }, []);

    const onDialogClose = useCallback(() => {
        setDialog(false);
    }, []);

    return (
        <>
            <Space direction="vertical" className={FULL_WIDTH}>
                <Form layout="inline" className={css({margin: "1rem"})}>
                    <Form.Item label="Name">
                        <Input value={queryReference?.variables?.name} onChange={onNameChange}/>
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={onRefreshClick}>Refresh</Button>
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={onAddDepartmentClick}>Add Department...</Button>
                    </Form.Item>
                </Form>
                <Suspense fallback={<Spin tip="Refetch departments..."/>}>
                    <DepartmentPagination queryReference={queryReference!}/>
                </Suspense>
            </Space>
            {
                dialog &&
                <DepartemntDialog listFilter={extractBusinessArgs(queryReference!)} onClose={onDialogClose}/>
            }
        </>
    );
})
Example #23
Source File: GenerateTemplate.tsx    From brick-design with MIT License 5 votes vote down vote up
function GenerateTemplate(props: GenerateTemplatePropsType) {
	const [srcImg, setSrcImg] = useState(DefaultImgBase64)
	const [spinning, setSpinning] = useState(false)
	const {
		form: { getFieldDecorator, validateFields },
		uploadFile,
	} = props

	useEffect(() => {
		const iframe: any = document.getElementById('dnd-iframe')
		const testDom = iframe.contentDocument.getElementById('select-img')
		if (!testDom) return
		setSpinning(true)
		html2canvas(testDom).then((img) => {
			setSpinning(false)
			setSrcImg(img.toDataURL())
		})
	}, [])

	const submit = useCallback(
		(e: any) => {
			e.preventDefault()
			validateFields((err, fieldsValue) => {
				if (err) {
					return
				}
				const { templateName } = fieldsValue
				uploadFile && uploadFile({ templateName, srcImg })
			})
		},
		[srcImg],
	)

	return (
		<Form>
			<Item {...formItemLayout} label={'模板名字'}>
				{getFieldDecorator('templateName', {
					rules: [{ required: true, message: '模板名不能为空' }],
				})(<Input />)}
			</Item>
			<Item label="图片" {...formItemLayout}>
				<Spin spinning={spinning}>
					<img style={{ width: '100%', height: 200 }} src={srcImg} />
				</Spin>
			</Item>
			<Item {...formButtonLayout}>
				<Button type="primary" onClick={submit}>
					提交
				</Button>
			</Item>
		</Form>
	)
}
Example #24
Source File: Loading.tsx    From nodestatus with MIT License 5 votes vote down vote up
Loading: FC = () => (
  <div
    className="flex items-center justify-center w-full h-screen text-lg font-medium text-gray-600"
    style={{ backgroundColor: '#f0f2f5' }}
  >
    <Spin size="large" tip="Loading..." />
  </div>
)
Example #25
Source File: GraphFilterView.tsx    From dendron with GNU Affero General Public License v3.0 5 votes vote down vote up
FilterViewStringInput = ({
  fieldKey,
  label,
  entry,
  updateConfigField,
  nodeCount,
}: {
  fieldKey: string;
  label: string;
  entry: GraphConfigItem<string>;
  updateConfigField: (key: string, value: string | number | boolean) => void;
  nodeCount: number;
}) => {
  const [updateTimeout, setUpdateTimeout] = useState<NodeJS.Timeout | null>(
    null
  );

  // This timeout is designed to maximize filter responsiveness while minimizing hang times
  const handleChange = (newValue: string) => {
    const delay = nodeCount < 100 ? 0 : 400;

    if (updateTimeout) clearTimeout(updateTimeout);

    setUpdateTimeout(
      setTimeout(() => {
        updateConfigField(fieldKey, newValue);

        setUpdateTimeout(null);
      }, delay)
    );
  };

  return (
    <Space direction="vertical" style={{ margin: "0.5rem 0rem" }}>
      <Typography>{label}</Typography>
      <Input
        defaultValue={entry.value}
        onChange={(newValue) => handleChange(newValue.target.value)}
        disabled={!entry.mutable}
        placeholder={entry.placeholder || ""}
        suffix={
          <Spin
            size="small"
            style={{
              display: updateTimeout ? "inline-block" : "none",
            }}
          />
        }
        style={{
          maxWidth: 200,
        }}
      />
    </Space>
  );
}
Example #26
Source File: BuilderCanvas.tsx    From next-basics with GNU General Public License v3.0 5 votes vote down vote up
export function BuilderCanvas(): React.ReactElement {
  const {
    dataType,
    processing,
    fullscreen,
    eventStreamNodeId,
    canvasIndex,
    hiddenWrapper,
  } = useBuilderUIContext();
  const independentPortalCanvas = React.useMemo(
    () => dataType !== BuilderDataType.ROUTE_OF_ROUTES && !eventStreamNodeId,
    [dataType, eventStreamNodeId]
  );

  if (!dataType) {
    return null;
  }

  if (dataType === BuilderDataType.UNKNOWN) {
    return <div>Unexpected dataSource</div>;
  }

  return (
    <div
      className={classNames(styles.builderCanvas, {
        [styles.fullscreen]: fullscreen,
        [styles.hasTabs]: independentPortalCanvas,
      })}
    >
      {independentPortalCanvas && <BuilderCanvasTabs />}
      <div className={styles.builderCanvasInner}>
        {eventStreamNodeId ? (
          <EventStreamCanvas nodeId={eventStreamNodeId} />
        ) : (
          <Spin spinning={processing} delay={500}>
            <DropZone
              isRoot
              independentPortalCanvas={independentPortalCanvas}
              canvasIndex={canvasIndex}
              fullscreen={fullscreen}
              hiddenWrapper={hiddenWrapper}
              mountPoint={
                dataType === BuilderDataType.ROUTE_OF_ROUTES
                  ? "routes"
                  : "bricks"
              }
            />
          </Spin>
        )}
      </div>
    </div>
  );
}
Example #27
Source File: addon-settings.tsx    From erda-ui with GNU Affero General Public License v3.0 5 votes vote down vote up
PureAddonSettings = ({ insId, addonConfig, isFetching }: IProps) => {
  if (!addonConfig || isEmpty(addonConfig)) return null;

  const deleteAddon = () => {
    addonStore.deleteAddonIns(insId).then(() => {
      goTo(goTo.pages.dopRoot);
    });
  };
  const { config, canDel = false } = addonConfig;
  let reConfig = config;
  if (addonConfig.addonName === 'mysql') {
    reConfig = filterMySqlConfig(config);
  }
  return (
    <div className="addon-settings-panel">
      <Spin spinning={isFetching}>
        <div className="settings-detail">
          <div className="settings-params-header">
            <span>{i18n.t('common:Basic parameters')}</span>
          </div>
          <div className="settings-params-content">
            {map(reConfig, (v, k) => (
              <div key={k}>
                <div className="param-k nowrap">{k}</div>
                <IF check={v}>
                  <div className="param-v cursor-copy" data-clipboard-text={v}>
                    {v}
                    <span className="copy-tip">({i18n.t('click to copy')})</span>
                  </div>
                  <IF.ELSE />
                  <div className="param-v">***</div>
                </IF>
              </div>
            ))}
            <Copy selector=".cursor-copy" />
          </div>
        </div>
        <IF check={canDel}>
          <div className="settings-delete">
            <div className="settings-params-header">
              <span>{i18n.t('common:delete service')}</span>
            </div>
            <div className="settings-delete-content">
              <ConfirmDelete deleteItem={i18n.t('service')} onConfirm={deleteAddon} />
            </div>
          </div>
        </IF>
      </Spin>
    </div>
  );
}
Example #28
Source File: AvatarDropdown.tsx    From ant-design-pro-V4 with MIT License 5 votes vote down vote up
render(): React.ReactNode {
    const { todoList } = this.props?.todo
    // const todoNum = todoList.filter((item: any) => item.status === 0).length
    const todoNum = todoList?.filter((item: any) => {
      if (item != null) {
        return item.status === 0
      }
    }).length
    const {
      currentUser = {
        avatar: '',
        name: '',
      },
      menu,
    } = this.props;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {menu && (
          <Menu.Item key="center">
            <UserOutlined />
            个人中心
          </Menu.Item>
        )}
        {menu && (
          <Menu.Item key="settings">
            <SettingOutlined />
            个人设置
          </Menu.Item>
        )}
        {menu && <Menu.Divider />}
        <Menu.Item key="todo">
          <UnorderedListOutlined />
          待办事项
          <Badge count={todoNum} offset={[10, -5]} />
        </Menu.Item>
        {menu && <Menu.Divider />}
        <Menu.Item key="logout">
          <LogoutOutlined />
          退出登录
        </Menu.Item>
      </Menu>
    );
    return currentUser && currentUser.name ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
          <span className={`${styles.name} anticon`}>{currentUser.name}
            <Badge count={todoNum} dot={true} /></span>
        </span>
      </HeaderDropdown>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    );
  }
Example #29
Source File: AvatarDropdown.tsx    From jetlinks-ui-antd with MIT License 5 votes vote down vote up
AvatarDropdown: React.FC<GlobalHeaderRightProps> = props => {
  const onMenuClick = (event: ClickParam) => {
    const { key } = event;

    if (key === 'logout') {
      const { dispatch } = props;

      if (dispatch) {
        dispatch({
          type: 'login/logout',
        });
      }

      return;
    }
    router.push(`/account/${key}`);
  };

  const [user, setUser] = useState<any>({});
  const service = new Service('user/detail');

  const {
    currentUser = {
      avatar: user.avatar || '',
      name: '',
    },
  } = props;

  useEffect(() => {
    const u = service.get().subscribe(resp => {
      setUser(resp);
      localStorage.setItem('user-detail', JSON.stringify(resp));
      // localStorage.setItem('tenants-admin', resp.tenants[0]?.adminMember);
    });
    return () => {
      u.unsubscribe();
    };
  }, [currentUser]);

  const menuHeaderDropdown = (
    <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
      {/* <Menu.Item key="center">
          <Icon type="user" />
            个人中心
        </Menu.Item> */}
      <Menu.Item key="settings">
        <Icon type="setting" />
        个人设置
      </Menu.Item>
      <Menu.Divider />

      <Menu.Item key="logout">
        <Icon type="logout" />
        退出登录
      </Menu.Item>
    </Menu>
  );
  return currentUser && currentUser.name ? (
    <HeaderDropdown overlay={menuHeaderDropdown}>
      <span className={`${styles.action} ${styles.account}`}>
        <Avatar size="small" className={styles.avatar} src={user.avatar} alt="avatar" />
        <span className={styles.name}>{currentUser.name}</span>
      </span>
    </HeaderDropdown>
  ) : (
    <Spin
      size="small"
      style={{
        marginLeft: 8,
        marginRight: 8,
      }}
    />
  );
}