web: Components: Fixed display loading
This commit is contained in:
parent
c43ce99a9b
commit
7899c00e1b
@ -88,7 +88,6 @@ const groups = [
|
||||
const sizes = ["compact", "full"];
|
||||
const displayTypes = ['dropdown', 'aside'];
|
||||
|
||||
|
||||
class ADSelectorExample extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -102,12 +101,6 @@ class ADSelectorExample extends React.Component {
|
||||
isNextPageLoading: false
|
||||
}
|
||||
|
||||
/*faker.seed(123);
|
||||
this.persons = new Array(50)
|
||||
.fill(true)
|
||||
.map(() => ({ name: name.findName() }));
|
||||
this.persons.sort((a, b) => a.name.localeCompare(b.name));*/
|
||||
|
||||
this.AllOptions = Array.from({ length: total }, (v, index) => {
|
||||
const additional_group = groups[getRandomInt(1, 6)];
|
||||
groups[0].total++;
|
||||
@ -122,32 +115,19 @@ class ADSelectorExample extends React.Component {
|
||||
console.log(this.persons);
|
||||
}
|
||||
|
||||
/*loadNextPage = (startIndex, stopIndex) => {
|
||||
this.setState({ isNextPageLoading: true });
|
||||
|
||||
const promise = new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
hasNextPage: this.AllOptions.length < 100,
|
||||
isNextPageLoading: false
|
||||
});
|
||||
|
||||
resolve(slice(this.AllOptions, startIndex, stopIndex - startIndex));
|
||||
}, 2500);
|
||||
});
|
||||
|
||||
return promise;
|
||||
};*/
|
||||
|
||||
loadNextPage = (startIndex, stopIndex) => {
|
||||
console.log(`loadNextPage(startIndex=${startIndex}, stopIndex=${stopIndex})`);
|
||||
this.setState({ isNextPageLoading: true }, () => {
|
||||
setTimeout(() => {
|
||||
this.setState(state => ({
|
||||
hasNextPage: state.options.length < 100,
|
||||
const { options } = this.state;
|
||||
const newOptions = [...options].concat(slice(this.AllOptions, startIndex, startIndex+100))
|
||||
|
||||
this.setState({
|
||||
hasNextPage: newOptions.length < this.props.total,
|
||||
isNextPageLoading: false,
|
||||
options: [...state.options].concat(slice(this.AllOptions, startIndex, startIndex+100))
|
||||
}));
|
||||
options: newOptions
|
||||
});
|
||||
|
||||
}, 2500);
|
||||
});
|
||||
};
|
||||
|
@ -20,14 +20,13 @@ class ADSelectorMainBody extends React.Component {
|
||||
let content;
|
||||
if (!this.isItemLoaded(index)) {
|
||||
content = (
|
||||
<div style={{ display: "inline-block" }}>
|
||||
<div className="option" style={style} key="loader">
|
||||
<Loader
|
||||
type="oval"
|
||||
size={16}
|
||||
style={{
|
||||
display: "inline",
|
||||
marginRight: "10px",
|
||||
paddingLeft: "10px"
|
||||
marginRight: "10px"
|
||||
}}
|
||||
/>
|
||||
<Text.Body as="span">Loading... Please wait...</Text.Body>
|
||||
|
Loading…
Reference in New Issue
Block a user