antd#Spin TypeScript Examples

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

export function Spinner() {

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

}

App = () => {
  return (
    <Suspense fallback={<Spin size="large" className="layout__loading" />}>
      {/* <Authority> */}
      <BrowserRouter>{renderRoutes(routes)}</BrowserRouter>
      {/* </Authority> */}
    </Suspense>
  );
}

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

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

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

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

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

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

/**
 * 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;
}

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

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

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

StyledSpin = styled(Spin)`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
`

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

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

LoadingSpin = () => {
  return <Spin tip="Loading..." />;
}

Spin.setDefaultIndicator(<LoadingSpinner />);

function BlockSpin() {
  return <Spin style={{ display: 'block' }} />
}

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

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

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

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

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

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

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

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

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

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