semantic-ui-react#Step JavaScript Examples

The following examples show how to use semantic-ui-react#Step. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: OrderSteps.js    From react-invenio-app-ils with MIT License 6 votes vote down vote up 
render() {
    const { status, currentStatus, disabled, iconName, description } =
      this.props;
    return (
      <Step
        active={currentStatus === status}
        disabled={disabled || isBefore(currentStatus, status)}
      >
        {iconName && <Icon name={iconName} />}
        <Step.Content>
          <Step.Title className="uppercase">{toLabel(status)}</Step.Title>
          {description && <Step.Description>{description}</Step.Description>}
        </Step.Content>
      </Step>
    );
  }
Example #2
Source File: OrderSteps.js    From react-invenio-app-ils with MIT License 6 votes vote down vote up 
render() {
    const {
      order: { status: currentStatus },
    } = this.props;
    const allDisabled = currentStatus === 'CANCELLED';
    return (
      <Segment>
        <Step.Group size="mini" fluid widths={4}>
          <OrderStep
            status="PENDING"
            currentStatus={currentStatus}
            disabled={allDisabled}
            iconName="hourglass half"
            description="New order created"
          />
          <OrderStep
            status="ORDERED"
            currentStatus={currentStatus}
            disabled={allDisabled}
            iconName="tasks"
            description="Order sent to the provider"
          />
          <OrderStep
            status="RECEIVED"
            currentStatus={currentStatus}
            disabled={allDisabled}
            iconName="check"
            description="Order received"
          />
        </Step.Group>
      </Segment>
    );
  }
Example #3
Source File: DocumentRequestStepsHeader.js    From react-invenio-app-ils with MIT License 6 votes vote down vote up 
render() {
    const { step, currentStep, iconName, title, description } = this.props;
    return (
      <Step active={currentStep === step} disabled={step < currentStep}>
        {iconName && <Icon name={iconName} />}
        <Step.Content>
          <Step.Title className="uppercase">{title}</Step.Title>
          <Step.Description>{description}</Step.Description>
        </Step.Content>
      </Step>
    );
  }
Example #4
Source File: BorrowingRequestSteps.js    From react-invenio-app-ils with MIT License 6 votes vote down vote up 
render() {
    const { status, currentStatus, disabled, icon, iconName, description } =
      this.props;
    return (
      <Step
        active={currentStatus === status}
        disabled={disabled || isBefore(currentStatus, status)}
      >
        {icon}
        {iconName && <Icon name={iconName} />}
        <Step.Content>
          <Step.Title className="uppercase">{toLabel(status)}</Step.Title>
          {description && <Step.Description>{description}</Step.Description>}
        </Step.Content>
      </Step>
    );
  }
Example #5
Source File: DocumentRequestStepsHeader.js    From react-invenio-app-ils with MIT License 5 votes vote down vote up 
render() {
    const {
      docReq: {
        state: currentState,
        document_pid: documentPid,
        physical_item_provider: provider,
      },
    } = this.props;
    const currentStep = getCurrentStep(
      currentState,
      documentPid,
      _get(provider, 'pid')
    );
    return (
      <Segment>
        <Step.Group size="mini" fluid widths={4}>
          <DocumentRequestStep
            step={0}
            currentStep={currentStep}
            iconName="book"
            title="Select document"
            description="Select a document for this request"
          />
          <DocumentRequestStep
            step={1}
            currentStep={currentStep}
            iconName="truck"
            title="Select workflow"
            description="Inter-library loan or acquisition order"
          />
          <DocumentRequestStep
            step={2}
            currentStep={currentStep}
            iconName="handshake outline"
            title="accept"
            description="Accept the request"
          />
          <DocumentRequestStep
            step={3}
            currentStep={currentStep}
            iconName="check"
            title="completed"
            description="Request accepted or declined"
          />
        </Step.Group>
      </Segment>
    );
  }
Example #6
Source File: BorrowingRequestSteps.js    From react-invenio-app-ils with MIT License 5 votes vote down vote up 
render() {
    const {
      brwReq: { status: currentStatus },
    } = this.props;
    const allDisabled = currentStatus === 'CANCELLED';
    return (
      <Segment>
        <Step.Group size="mini" fluid widths={4}>
          <BorrowingRequestStep
            status="PENDING"
            currentStatus={currentStatus}
            disabled={allDisabled}
            iconName="hourglass half"
            description="New request created"
          />
          <BorrowingRequestStep
            status="REQUESTED"
            currentStatus={currentStatus}
            disabled={allDisabled}
            iconName="tasks"
            description="Item requested to the external library"
          />
          <BorrowingRequestStep
            status="ON_LOAN"
            currentStatus={currentStatus}
            disabled={allDisabled}
            icon={<LoanIcon />}
            description="Item on loan to a patron"
          />
          <BorrowingRequestStep
            status="RETURNED"
            currentStatus={currentStatus}
            disabled={allDisabled}
            iconName="check"
            description="Item returned to the external library"
          />
        </Step.Group>
      </Segment>
    );
  }