Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | import React from 'react' import Crowi from 'client/util/Crowi' interface Props { crowi: Crowi } interface State { isCompleted: boolean total: number current: number skip: number } export default class AdminRebuildSearch extends React.Component<Props, State> { constructor(props) { super(props) this.state = { isCompleted: false, total: 0, current: 0, skip: 0, } } componentDidMount() { const socket = this.props.crowi.getWebSocket() socket.on('admin:addPageProgress', data => { this.setState({ ...data, isCompleted: false, }) }) socket.on('admin:finishAddPage', data => { this.setState({ ...data, isCompleted: true, }) }) } render() { const { total, current, skip, isCompleted } = this.state if (total === 0) { return null } if (isCompleted) { return ( <div className="progress"> <div className="progress-bar progress-bar-striped" style={{ width: `100%` }} /> </div> ) } return ( <div className="progress"> <div className="progress-bar progress-bar-striped progress-bar-animated active" role="progressbar" aria-valuemin={0} aria-valuenow={current} aria-valuemax={total} style={{ width: `${(current / total) * 100}%` }} > {current}/{total} ({skip} skips) </div> </div> ) } } |