antd#Spin JavaScript Examples

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

render() {
        return (
            <Row>
                <Card title="Spin的用法" className="card-wrap">
                    <Spin size="small"/>
                    <Spin/>
                    <Spin size="large"/>
                </Card>

                <Card title="内容遮罩" className="card-wrap">
                    <Alert  message="React" description="Antd Pro Design of React教程学习" type="info">
                    </Alert>

                    <Alert  message="React" description="Antd Pro Design of React教程学习" type="warning">
                    </Alert>

                    <Spin tip="加载中">
                        <Alert  message="React" description="Antd Pro Design of React教程学习" type="warning">
                        </Alert>
                    </Spin>
                </Card>
            </Row>
        );
    }

Loader = (props) => {
  return (
    <div className='center' style={props.style || {}}>
      <Space size="middle" className='center'>
        <Spin size="large" />
      </Space>
    </div>
  )
}

TableLoadingSpin = ({ children, loading }) => {
  const theme = useContext(ThemeContext);
  return (
    <Spin
      spinning={loading ? true : false}
      size="large"
      indicator={
        <img
          alt="loading..."
          src={`/assets/images/${theme.imgDir}/bars.svg`}
          style={{
            marginTop: '100px',
            height: '40px',
            opacity: '1',
          }}
        />
      }
    >
      {children}
    </Spin>
  );
}

Loading = () => {
  useEffect(() => {
    NProgress.start();
    return () => {
      NProgress.done();
    };
  }, []);

  return (
    <div className="app-container">
      <Spin />
    </div>
  );
}

render() {
    const { loaded } = this.props.loginData
    return (
      <Router>
        <Switch>
          <Route path="/"
            render={routeProps => (
              loaded ? <Base /> : <div id="loading-box"><Spin size="large" /></div>
            )}
          />
        </Switch>
      </Router>
    )
  }

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

ExchangeList = () => {
  const { exchanges } = useSelector((state) => state.settings);
  const statusList = useGetStatusExchanges(exchanges);

  if (exchanges === undefined || exchanges === null || exchanges.length < 0)
    return null;

  return (
    <div>
      {exchanges.length > 0 && (
        <Title style={{ marginTop: 50, marginBottom: 20 }} level={2}>
          List of exchanges
        </Title>
      )}

      {Object.keys(statusList).length > 0 ? (
        <Row>
          <Col span="24">
            {exchanges.map((e, i) => (
              <ExchangeItem
                parametrs={e}
                key={"exchange-item-" + i}
                status={statusList[e.id]}
              />
            ))}
          </Col>
        </Row>
      ) : (
        <Row justify="center">
          {exchanges.length > 0 && (
            <Spin size="large" style={{ padding: 10 }} />
          )}
        </Row>
      )}
    </div>
  );
}

export function Loading({ spinning = false, children }) {
    return (
        <Spin
            style={{ maxHeight: '100vh' }}
            spinning={spinning}
            indicator={antIcon}
        >
            {children}
        </Spin>
    )
}

Loading = props => {
  if (props.error) {
    return (
      <div>
        Error! <button onClick={props.retry}>Retry</button>
      </div>
    );
  } else if (props.pastDelay) {
    return <Spin size="large" />;
  } else {
    return null;
  }
}

render() {

        return (
            <Spin spinning={this.state.loading} tip={this.state.tip}>
                <div>
                    {
                        this.state.closed ?
                            <Result
                                title="远程连接已关闭"
                            /> :
                            <div className="container" style={{
                                overflow: this.state.containerOverflow,
                                width: this.state.width,
                                height: this.state.height
                            }}>

                                <div id="display"/>
                            </div>
                    }


                </div>
            </Spin>
        );
    }

render() {
    let data = this.props.newsData ? this.props.newsData.list : [];
    if (data && data.length) {
      data = data.map(function(item, i) {
        return (
          <Timeline.Item key={i}>
            <span className="logoTimeago">{timeago(item.add_time)}</span>
            <span className="logusername">{item.username}</span>
            <span className="logtype">{item.type}</span>
            <span className="logtime">{formatTime(item.add_time)}</span>
            <span className="logcontent">{item.content}</span>
          </Timeline.Item>
        );
      });
    } else {
      data = '';
    }
    let pending = this.state.bidden ? (
      <a className={this.state.bidden}>以上为全部内容</a>
    ) : (
      <a className="loggetMore" onClick={this.getMore.bind(this)}>
        查看更多
      </a>
    );
    if (this.state.loading) {
      pending = <Spin />;
    }
    return (
      <section className="news-timeline">
        {data ? <Timeline pending={pending}>{data}</Timeline> : data}
      </section>
    );
  }

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <div className="mb-5">
          <Spin tip="Loading...">
            <Alert
              message="Alert message title"
              description="Further details about the context of this alert."
              type="info"
            />
          </Spin>
        </div>
      </div>
    )
  }

PageLoading = () => (
  <div
    style={{
      paddingTop: 100,
      textAlign: 'center',
    }}
  >
    <Spin size="large" />
  </div>
)

render() {
        const style = {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            position: 'absolute',
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
        };
        return (
            <div style={style}>
                <Spin spinning/>
            </div>
        );
    }

getNotificationBox() {
    const { children, loading, locale, onClear, toPage } = this.props;
    if (!children) {
      return null;
    }

    const panes = React.Children.map(children, child => {
      const title =
        child.props.list && child.props.list.length > 0
          ? `${child.props.title}(${child.props.count})`
          : child.props.title;
      return (
        <TabPane tab={title} key={child.props.name}>
          <List
            {...child.props}
            data={child.props.list}
            onClick={item => this.onItemClick(item, child.props)}
            onClear={() => onClear(child.props.name)}
            toPage={() => toPage(child.props.name)}
            title={child.props.title}
            locale={locale}
          />
        </TabPane>
      );
    });
    return (
      <Spin spinning={loading} delay={0}>
        <Tabs className={styles.tabs} onChange={this.onTabChange}>
          {panes}
        </Tabs>
      </Spin>
    );
  }

HtxTimeSeriesViewRTS = ({ item }) => {
  const ref = React.createRef();

  React.useEffect(() => {
    if (item && item.brushRange.length) {
      item._nodeReference = ref.current;
    }
  }, [item, ref]);

  // the last thing updated during initialisation
  if (!item.brushRange.length || !item.data)
    return (
      <div style={{ textAlign: "center", height: 100 }}>
        <Spin size="large" delay={300} />
      </div>
    );

  return (
    <div ref={ref} className="htx-timeseries">
      <ObjectTag item={item}>
        {Tree.renderChildren(item)}
        <Overview data={item.dataObj} series={item.dataHash} item={item} range={item.brushRange} />
      </ObjectTag>
    </div>
  );
}

export default function Loading({ isLoading, children }) {
  const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;

  return (
    <Spin indicator={antIcon} spinning={isLoading}>
      {children}
    </Spin>
  );
}

export default function Loading({ isLoading, children }) {
  const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;

  return (
    <Spin indicator={antIcon} spinning={isLoading}>
      {children}
    </Spin>
  );
}

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

getNotificationBox() {
    const { visible } = this.state;
    const { children, loading, locale } = this.props;
    if (!children) {
      return null;
    }
    const panes = React.Children.map(children, child => {
      const {
        list,
        title,
        name,
        count,
        emptyText,
        emptyImage,
        showClear,
        loadedAll,
        scrollToLoad,
        skeletonCount,
        skeletonProps,
        loading: tabLoading,
      } = child.props;
      const len = list && list.length ? list.length : 0;
      const msgCount = count || count === 0 ? count : len;
      const tabTitle = msgCount > 0 ? `${title} (${msgCount})` : title;
      return (
        <TabPane tab={tabTitle} key={name}>
          <List
            data={list}
            emptyImage={emptyImage}
            emptyText={emptyText}
            loadedAll={loadedAll}
            loading={tabLoading}
            locale={locale}
            onClear={() => this.onClear(name)}
            onClick={item => this.onItemClick(item, child.props)}
            onLoadMore={event => this.onLoadMore(child.props, event)}
            scrollToLoad={scrollToLoad}
            showClear={showClear}
            skeletonCount={skeletonCount}
            skeletonProps={skeletonProps}
            title={title}
            visible={visible}
          />
        </TabPane>
      );
    });
    return (
      <Fragment>
        <Spin spinning={loading} delay={0}>
          <Tabs className={styles.tabs} onChange={this.onTabChange}>
            {panes}
          </Tabs>
        </Spin>
      </Fragment>
    );
  }

render() {
    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="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}</span>*/}
        </span>
      </HeaderDropdown>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    );
  }

Content = ({ currency, storeId }) => {
  const dispatch = useDispatch()
  const sign = useCurrency(currency)
  useEffect(() => {
    dispatch(actionCreators.getSalesHistory())
    dispatch(actionCreators.setLoading(false))
  }, [dispatch, storeId])
  const dashboard = useSelector(state => state.dashboard)
  const isLoading = useSelector(state => state.user.isLoading)
  return (
    <div>
      <Tabs defaultActiveKey='1' className='content'>
        <TabPane tab='Overview' key='1'>
          <Spin spinning={isLoading}>
            <Pane1
              currency={sign}
              amount={dashboard && dashboard.totalSales}
              monthSales={dashboard && dashboard.monthSales}
            />
          </Spin>
        </TabPane>
        <TabPane tab='Sales History' key='2'>
          {dashboard &&
          dashboard.transactionDetails &&
          dashboard.transactionDetails.length > 0 ? (
              dashboard.transactionDetails.map(sale => (
                <Pane2
                  currencySymbol={sign}
                  currency={currency && currency.toUpperCase()}
                  key={sale._id}
                  name={sale.name.trim()}
                  price={sale.price}
                  description={sale.description}
                  checkoutDate={sale.checkoutDate}
                  quantity={sale.quantity}
                />
              ))
            ) : (
              <p>You haven't made any sales yet</p>
            )}
        </TabPane>
      </Tabs>
    </div>
  )
}

LoadingView = () => {
  return (
    <Spin size="large" />
  );
}

DownloadTables = ({ tables }) => {
  const [tableName, setTableName] = useState('');
  const { info, error } = message;

  const [loading, setLoading] = useState(false);

  const handleSelectTable = (table) => {
    setTableName(table);
    info(table);
  };

  async function handleDownload() {
    setLoading(true);
    try {
      const response = await api.post('/recoverFile/', {
        selectedTable: tableName,
        token: localStorage.getItem('token')
      });

      if (response.status === 201) {
        window.location.href = `http://localhost:5000/downloadFile/${tableName}`;
      }

      info(`Baixando table ${tableName}`);
    } catch (err) {
      error('Algo deu errado');
    }
    setLoading(false);
  }

  return (
    <Container>
      <h1>
        TABELAS DISPONÍVEIS
      </h1>
      {loading && <Spin size="large" />}
      <section>
        <ul>
          {tables.map((table) => (
            <li onClick={() => handleSelectTable(table)} key={table}>
              {table}
            </li>
          ))}
        </ul>
      </section>

      <button type="button" onClick={handleDownload}>
        BAIXAR
        {' '}
        <br />
        {' '}
        SHAPEFILE
      </button>
    </Container>
  );
}

render() {
    return (
      <MyModal
        centered
        width={AppLayout.modalWidth}
        title={
          <TextPopupTitle>
            <I s="Lock" />
          </TextPopupTitle>
        }
        footer={null}
        closable={false}
        maskClosable={false}
        visible={this.props.isVisible}
        onCancel={() => this.onClose()}
      >
        <Spin
          spinning={this.state.loading}
          indicator={<ModalIndicator title="Locking..." marginTop="30px" />}
        >
          <Section>
            <Instruction>
              <I s="LogoutInstruct_1" />
            </Instruction>
            <Instruction>
              <I s="LogoutInstruct_2" />
            </Instruction>
          </Section>
          <Section
            style={{
              textAlign: 'center',
            }}
          >
            <ConfirmButton onClick={() => this.onClick()}>
              <I s="Yes, lock my layer-2." />
            </ConfirmButton>
            <CancelButton onClick={() => this.onClose()}>
              <I s="Cancel" />
            </CancelButton>
          </Section>
        </Spin>
      </MyModal>
    );
  }

Home = ({ history }) => {

  const [list, setList] = useState([]);

  const [currentPageIndex, setCurrentPageIndex] = useState(1);

  const [total, setTotal] = useState(0);

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function loadData() {
      try {
        await setLoading(true);
        const data = await getListByPage(currentPageIndex);
        setList(data.list);
        setTotal(data.count);
        message.success('加载成功!');
      } catch (error) {
        message.error('加载失败!');
      } finally {
        await setLoading(false);
      }
    }

    loadData()
  }, [currentPageIndex]);

  const onHandlePageChange = (page, size) => {
    setCurrentPageIndex(page);
  }


  const renderCardList = useMemo(() => {

    const onHandleDetail = item => {
      history.push({ pathname: '/workspace', state: { id: item.id } });
    };
  
    return list.map(item => <Col style={{ margin: '10px 0px' }} key={item.id} span={6}>
      <Card
        loading={loading}
        hoverable
        title={item.name}
        bordered={false}
        cover={<Spin spinning={loading}><div onClick={() => onHandleDetail(item)} style={{ height: 200, padding: 10, textAlign: 'center' }}><img alt="cover" style={{ height: '100%', width: '100%' }} src={`http://topology.le5le.com${item.image}`} /></div></Spin>}
        extra={[
          <div key="like" style={{ display: 'inline', }}><Icon type="like" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.star}</b></div>,
          <div key="heart" style={{ display: 'inline', marginLeft: 10 }}><Icon type="heart" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.recommend}</b></div>
        ]}
      >
        <Meta
          title={item.username}
          avatar={<Avatar style={{ backgroundColor: colorList[Math.ceil(Math.random() * 4)], verticalAlign: 'middle' }} size="large">{item.username.slice(0, 1)}</Avatar>}
          description={item.desc || '暂无描述'}
          style={{ height: 80, overflow: 'hidden' }}
        />
      </Card>
    </Col>)
  }, [list, loading, history])


  return (
    <div style={{ background: '#ECECEC', padding: '30px 200px', height: '100vh', overflow: 'auto' }}>
      <Row gutter={16}>
        {
          renderCardList
        }
      </Row>
      <Pagination style={{ textAlign: 'center', marginTop: 30 }} current={currentPageIndex} total={total} onChange={onHandlePageChange} />
    </div>
  );
}

function App({ user, logUser }) {
  const [loading, setLoading] = useState(true);
  
  const replenishUser = useCallback (async () => {
    const data = await whoAmI();
    if (data.auth) {
      logUser(data.user);
    }
    setLoading(false);
  },[logUser]);

  useEffect(() => {
    // Wait for loading data user
    setLoading(true);
    replenishUser();
  },[replenishUser]);

  

  return !loading ? (
    <Router>
      <div className="App">
    
        <Switch>
          <Route path="/login" exact>
            {user ? <Redirect to="/Home" /> : <Login />}
          </Route>

          <PrivateRoute path="/Home" component={Home} exact/>
          <PrivateRoute path="/Projects" component={Projects} exact/>
          <PrivateRoute path="/Tecnologias" component={Tecnologias} exact/>
          <PrivateRoute path="/AdminUser" component={AdminUser} exact/>
          <PrivateRoute path="/Informes" component={Reports} exact/>
          <Route path="/" ><Redirect to="/login" /></Route>
        </Switch>
        
      </div>
    </Router>
  ) : (
    <Spin size="large" className="Spin" />
  );
}