semantic-ui-react#Progress JavaScript Examples

render() {
    const { redirect, eligible, voter } = this.state;
    if (redirect) {
      return <LoadEligibility voter={voter} eligible={eligible} />;
    }
    return (
      <GridContainer verticalAlign="middle" centered>
        <ImageContainer src={AdaBotStandingImage} />
        <Grid.Column width={6}>
          <Progress color="blue" percent={25}></Progress>
          {this.renderHeaderText()}
          {this.renderEligibleVoterForm()}
        </Grid.Column>
      </GridContainer>
    );
  }

VoteDone = ({ name }) => {
  return (
    <ImageBackground>
      <Grid centered columns={1}>
        <Grid.Column width={10}>
          <VoteDoneHeader>You're Done!</VoteDoneHeader>
          <Subheader>
            Thanks for voting. We'll let you know when the results are in.
          </Subheader>
          <Progress active color="blue" percent={100}></Progress>
        </Grid.Column>
      </Grid>
    </ImageBackground>
  );
}

render() {
    let buttonstate;
    let progressbar;
    if (100 > this.state.percent && this.state.percent > 0 ) { 
      buttonstate = 
        <Message icon>
          <Icon name='circle notched' loading />
          <Message.Content>
            <Message.Header>Uploading</Message.Header>
            <p>{this.state.filename}</p>
          </Message.Content>
        </Message>;
      progressbar = <Progress percent={this.state.percent} indicating progress='percent'/>;
    }
    else if (100 === this.state.percent){
      buttonstate = null;
      progressbar = null;
    }
    else { 
      buttonstate = 
        <input
          type="file" accept='text/csv'
          onChange={(e) => this.onChange(e)}
        />;
      progressbar = <Progress percent={this.state.percent} indicating progress='percent'/>;
    }



    return (
        <div>
          {progressbar}
          {this.state.result}
          {buttonstate}
        </div>
    )
  }

render() {
        const display_data = {
            id: this.props.side == SIDE.MINE ? this.props.my_id : this.props.opponent_id,
            hp: this.props.environment ? this.props.environment[this.props.side].hp : 0
                
        }
        return (
            <div className={"health_bar health_bar_" + this.props.side}>
                <div className={"health_bar_avatar_username_container"}>
                    <img className="health_bar_avatar" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/84dc13b7-a2e7-4b45-83ec-311e72e82900/ddg84ua-02d600ad-dc7f-4cdf-b510-c1916324803a.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvODRkYzEzYjctYTJlNy00YjQ1LTgzZWMtMzExZTcyZTgyOTAwXC9kZGc4NHVhLTAyZDYwMGFkLWRjN2YtNGNkZi1iNTEwLWMxOTE2MzI0ODAzYS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.U8nOU_7_z8s5trKUg4ZrbNCm8n5Cg4u3b18-_BgkC3U" />
                    <div className="health_bar_username_container">
                        <p className="health_bar_username">Player</p>
                        <p>{display_data.hp}</p>
                    </div>
                </div>
                <Progress percent={(display_data.hp)/8000*100} indicating />
            </div>
        )
    }

render() {
    const {
      messageBgColor,
      messageHeader,
      messageContent,
      buttonContent,
      redirect,
      iconName,
      loading
    } = this.state;

    const { eligible, voter } = this.props;
    if (redirect) {
      return eligible ? <Vote voter={voter} /> : <Results />;
    }

    return (
      <GridContainer verticalAlign="middle" centered columns={1}>
        <Grid.Column width={5}>
          <Image size="huge" src={AdaBotHeadImage} alt="Ada Bot Head" />
          <Progress color="blue" percent={50}></Progress>
          <Message size="massive" color={messageBgColor} icon>
            <Icon name={iconName} loading={loading} />
            <Message.Content>
              <Message.Header>{messageHeader}</Message.Header>
              {messageContent}
            </Message.Content>
          </Message>
          {!loading && (
            <Button
              onClick={this.handleButtonClick}
              fluid
              color="blue"
              size="massive"
            >
              {buttonContent}
            </Button>
          )}
        </Grid.Column>
      </GridContainer>
    );
  }

ProgressBar = style(Progress)`
  margin-top: 1.8rem !important;
`

function AddProduct() {
  const history = useHistory();
  const [image, setImage] = useState(null);
  const [title, setTitle] = useState("");
  const [price, setPrice] = useState();
  const [rating, setRating] = useState();
  const [progress, setProgress] = useState(0);
  const [{ user }] = useStateValue();

  const handleChange = (event) => {
    if (event.target.files[0]) {
      setImage(event.target.files[0]);
    }
  };

  const handleUpload = () => {
    const uploadTask = storage.ref(`images/${image.name}`).put(image);

    uploadTask.on(
      "state_changed",
      (snapshot) => {
        //progress function
        const progress = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        ); //proogress details
        setProgress(progress);
      },
      (error) => {
        console.error(error);
        alert(error.message);
      },
      //final upload
      () => {
        storage
          .ref("images")
          .child(image.name)
          .getDownloadURL()
          .then((url) => {
            //post image inside data
            db.collection("Products").add({
              title,
              price,
              rating,
              imageUrl: url,
            });
            setProgress(0);
            setTitle("");
            setPrice();
            setRating();
            setImage(null);
            history.push("/");
          });
      }
    );
  };

  return (
    <div className="addProduct">
      <Container>
        <Grid centered columns={3} doubling stackable>
          {user ? (
            <Grid.Column>
              <h2>Add Product</h2>
              <Card>
                <Form className="addProduct__form">
                  <Form.Field required>
                    <label>Product title</label>
                    <input
                      placeholder="product title"
                      type="text"
                      onChange={(event) => setTitle(event.target.value)}
                    />
                  </Form.Field>
                  <Form.Field required>
                    <label>Product Price</label>
                    <input
                      placeholder="product price"
                      type="number"
                      onChange={(event) => setPrice(event.target.value)}
                    />
                  </Form.Field>
                  <Form.Field required>
                    <label>Product Rating</label>
                    <input
                      placeholder="product rating"
                      type="number"
                      onChange={(event) => setRating(event.target.value)}
                    />
                  </Form.Field>
                  <Form.Field required>
                    <input
                      placeholder="Last Name"
                      type="file"
                      onChange={handleChange}
                    />
                    <Progress percent={progress} indicating size="tiny" />
                  </Form.Field>
                  <Button color="green" type="submit" onClick={handleUpload}>
                    Upload
                  </Button>
                </Form>
              </Card>
            </Grid.Column>
          ) : (
            <div className="addProduct__warningMessage">
              <Message warning>
                <Message.Header>
                  You must sign in to upload a product!
                </Message.Header>
                <p>
                  Please visit <Link to="/login">sigin page</Link>, then try
                  again.
                </p>
              </Message>
            </div>
          )}
        </Grid>
      </Container>
    </div>
  );
}

FileTableRow = ({
  isDraftRecord,
  file,
  deleteFile,
  defaultPreview,
  setDefaultPreview,
  decimalSizeDisplay,
}) => {
  const [isCancelling, setIsCancelling] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const isDefaultPreview = defaultPreview === file.name;

  const handleDelete = async (file) => {
    setIsDeleting(true);
    try {
      await deleteFile(file);
      if (isDefaultPreview) {
        setDefaultPreview('');
      }
    } catch (error) {}
  };

  const handleCancelUpload = (file) => {
    setIsCancelling(true);
    file.cancelUploadFn();
  };

  return (
    <Table.Row key={file.name}>
      <Table.Cell data-label={i18next.t('Default preview')} width={2}>
        {/* TODO: Investigate if react-deposit-forms optimized Checkbox field
                  would be more performant */}
        <Checkbox
          checked={isDefaultPreview}
          onChange={() => setDefaultPreview(isDefaultPreview ? '' : file.name)}
        />
      </Table.Cell>
      <Table.Cell data-label={i18next.t('Filename')} width={10}>
        <div>
        {file.uploadState.isPending ? (
            file.name
          ) : (
            <a
              href={_get(file, 'links.content', '')}
              target="_blank"
              rel="noopener noreferrer"
              className="mr-5"
            >
              {file.name}
            </a>
          )}
          <br />
          {file.checksum && (
            <div className="ui text-muted">
              <span style={{ fontSize: '10px' }}>{file.checksum}</span>{' '}
              <Popup
                content={i18next.t(
                  'This is the file fingerprint (MD5 checksum), which can be used to verify the file integrity.'
                )}
                trigger={<Icon fitted name="help circle" size="small" />}
                position="top center"
              />
            </div>
          )}
        </div>
      </Table.Cell>
      <Table.Cell data-label={i18next.t('Size')} width={2}>
        {file.size ? humanReadableBytes(file.size, decimalSizeDisplay) : ''}
      </Table.Cell>
      {isDraftRecord && (
        <Table.Cell className="file-upload-pending" data-label={i18next.t('Progress')} width={2}>
          {!file.uploadState?.isPending && (
            <Progress
              className="file-upload-progress primary"
              percent={file.progressPercentage}
              error={file.uploadState.isFailed}
              size="medium"
              progress
              autoSuccess
              active
            />
          )}
          {file.uploadState?.isPending && <span>{i18next.t('Pending')}</span>}
        </Table.Cell>
      )}
      {isDraftRecord && (
        <Table.Cell textAlign="right" width={2}>
          {(file.uploadState?.isFinished || file.uploadState?.isFailed) &&
            (isDeleting ? (
              <Icon loading name="spinner" />
            ) : (
              <Icon
                link
                className="action primary"
                name="trash alternate outline"
                disabled={isDeleting}
                onClick={() => handleDelete(file)}
                aria-label={i18next.t("Delete file")}
                title={i18next.t("Delete file")}
              />
            ))}
          {file.uploadState?.isUploading && (
            <Button
              compact
              type="button"
              negative
              size="tiny"
              disabled={isCancelling}
              onClick={() => handleCancelUpload(file)}
            >
              {isCancelling ? (
                <Icon loading name="spinner" />
              ) : (
                i18next.t('Cancel')
              )}
            </Button>
          )}
        </Table.Cell>
      )}
    </Table.Row>
  );
}