How to use the babel/utils/helper/icons/IconGenerator.getIcon function in babel

To help you get started, we’ve selected a few babel examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Esri / storymap-crowdsource / src / app / components / crowdsource / viewer / Viewer.babel.js View on Github external
{...this.props.components.shareDisplay}
                {...this.props.components.map.crowdsourceLayer}>
              </SelectedShares> : null }
            </ReactCSSTransitionGroup>
          </div>
        );

        return sidePanel;
      default:
        // Translation Strings
        const CHANGE_VIEW_TO_GALLERY = viewerText.layouts.stacked.changeView.galleryView;
        const CHANGE_VIEW_TO_MAP = viewerText.layouts.stacked.changeView.mapView;

        // Icons
        const downArrowHtml = {
          __html: getIcon('arrow-down-open')
        };
        const upArrowHtml = {
          __html: getIcon('arrow-up-open')
        };

        const stacked = (
          <div className="main-content">
            <div className="scroll-container">
              <div className="content-pane map-view">
                <CrowdsourceWebmap showOnTop={this.props.map.forceToTop} mapTips={this.getMapTipProps()} controllerOptions={this.webmapControllerOptions} />
                <div className="pane-navigation" onClick={this.props.showComponent.bind(this,componentNames.GALLERY)}>
                  <span className="text">{CHANGE_VIEW_TO_GALLERY}</span>
                  <span className="icon" dangerouslySetInnerHTML={downArrowHtml}></span>
                </div>
              </div>
              <div className="content-pane gallery-view">
github Esri / storymap-crowdsource / src / app / components / selectedShares / SelectedShares.babel.js View on Github external
<div className={mainClasses}>
        {this.props.featuresInExtent.length > 1 ? (
          <div className="selected-navigation">
            <button
              type="button"
              className="prev-btn btn text-btn"
              aria-label="Previous"
              onClick={this.props.previousAction}
              dangerouslySetInnerHTML={{__html: getIcon('arrow-left-open')}}>
            </button>
            <button
              type="button"
              className="next-btn btn text-btn"
              aria-label="Next"
              onClick={this.props.nextAction}
              dangerouslySetInnerHTML={{__html: getIcon('arrow-right-open')}}>
            </button>
            <button
              type="button"
              className="close-btn btn text-btn"
              aria-label="Close"
              onClick={this.props.closeAction}
              dangerouslySetInnerHTML={{__html: getIcon('close')}}>
            </button>
          </div>
        ) : (
          <div className="selected-navigation">
            <button
              type="button"
              className="close-btn btn text-btn"
              aria-label="Close"
              onClick={this.props.closeAction}
github Esri / storymap-crowdsource / src / app / components / selectedShares / SelectedShares.babel.js View on Github external
render() {

    const mainClasses = Helper.classnames([this.props.className,this.props.classNames,'selected-share'],{
      scrolled: this.state.scrolled
    });

    return (
      <div className={mainClasses}>
        {this.props.featuresInExtent.length > 1 ? (
          <div className="selected-navigation">
            <button
              type="button"
              className="prev-btn btn text-btn"
              aria-label="Previous"
              onClick={this.props.previousAction}
              dangerouslySetInnerHTML={{__html: getIcon('arrow-left-open')}}>
            </button>
            <button
              type="button"
              className="next-btn btn text-btn"
              aria-label="Next"
              onClick={this.props.nextAction}
              dangerouslySetInnerHTML={{__html: getIcon('arrow-right-open')}}>
            </button>
            <button
              type="button"
              className="close-btn btn text-btn"
              aria-label="Close"
              onClick={this.props.closeAction}
              dangerouslySetInnerHTML={{__html: getIcon('close')}}>
            </button>
          </div>
github Esri / storymap-crowdsource / src / app / components / helper / tooltip / IconTooltip.babel.js View on Github external
render() {

    const btnClass = Helper.classnames(this.props.className,'text-btn');
    const icon = getIcon(this.props.icon);
    const iconHtml = {
      __html: icon
    };

    return (
      <button type="button" className={btnClass} dangerouslySetInnerHTML={iconHtml}></button>
    );
  }
github Esri / storymap-crowdsource / src / app / components / helper / modal / Modal.babel.js View on Github external
return contentObj.content;
      } else {
        return contentObj;
      }
    };

    return (
      <div className={modalClasses} tabIndex="-1" role="dialog">
        <div className="vertical-align-helper">
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header" style={this.props.headerStyle}>
                { this.props.closeButton ? (
                  <div className="close-button-wrapper">
                    <button type="button" className="close-btn btn text-btn" aria-label="Close" onClick={this.props.closeAction}>
                      <span aria-hidden="true" dangerouslySetInnerHTML={{__html: getIcon('close')}}></span>
                    </button>
                  </div>
                ) : null }
                <h4 className="modal-title">
                  { parseContent(this.props.title) }
                </h4>
              </div>
              <div className="modal-body">
                { parseContent(this.props.body) }
              </div>
              <div className="modal-footer">
                { parseContent(this.props.footer) }
              </div>
            </div>
          </div>
        </div>
github Esri / storymap-crowdsource / src / app / components / selectedShares / SelectedShares.babel.js View on Github external
<button
              type="button"
              className="close-btn btn text-btn"
              aria-label="Close"
              onClick={this.props.closeAction}
              dangerouslySetInnerHTML={{__html: getIcon('close')}}>
            </button>
          </div>
        ) : (
          <div className="selected-navigation">
            <button
              type="button"
              className="close-btn btn text-btn"
              aria-label="Close"
              onClick={this.props.closeAction}
              dangerouslySetInnerHTML={{__html: getIcon('close')}}>
            </button>
          </div>
        )}
        <SelectedDisplay
          onScroll={this.onScroll}
          reviewEnabled={this.props.reviewEnabled}
          approveAction={this.props.approveAction}
          rejectAction={this.props.rejectAction}
          feature={this.props.feature}
          displayOrder={this.props.displayOrder}
          attributePath={this.props.attributePath}
          fields={this.props.fields}
          idField={this.props.idField}
          primaryField={this.props.primaryField}
          secondaryField={this.props.secondaryField}
          vettedField={this.props.vettedField}
github Esri / storymap-crowdsource / src / app / components / header / Header.babel.js View on Github external
render() {

    const headerClass = Helper.classnames([this.props.className, 'header', 'navbar', 'main-app-header']);
    const participateIconHtml = {
      __html: getIcon('participate')
    };
    const participateBtn = this.props.showParticipateActionButton ? (
      <button ref={(ref) => this.participateBtn = ref} className={Helper.classnames(['participate', 'btn', 'btn-primary', 'nav-btn'],{
          disabled: this.props.participationButtonDisabled
        })} onClick={this.participateAction}>
        <span className="icon" dangerouslySetInnerHTML={participateIconHtml}></span>
        <span className="text">{this.props.participateShort}</span>
      </button>
    ) : null;

    const logoUrl = Helper.attachmentUtils.checkForCredential({
      url: this.props.logo.source,
      portal: this.props.portal
    });

    const includeSharing = Object.keys(this.props.sharing.services).filter((key) => {
github Esri / storymap-crowdsource / src / app / components / viewerDialogs / appSharing / AppSharing.babel.js View on Github external
title: builderText.shareApp.title,
      body: (
        <form onSubmit={(e) => {
            e.preventDefault();
          }}>
          <div className="form-group text-center">
            <div className="app-privacy btn-group" role="group">
              <button
                type="button"
                className={Helper.classnames(['btn', {
                  'disabled': this.props.appPrivacyUpdating,
                  'btn-default': this.props.appPrivacy !== 'private',
                  'btn-primary': this.props.appPrivacy === 'private'
                }])}
                onClick={this.updatePrivacyAction.bind(this,'private')}>
                <span className="icon" dangerouslySetInnerHTML={{__html: getIcon('person')}}></span>
                <span className="text">{builderText.shareApp.sharePermissions.private}</span>
              </button>
              <button
                type="button"
                className={Helper.classnames(['btn', {
                  'disabled': this.props.appPrivacyUpdating,
                  'btn-default': this.props.appPrivacy !== 'org',
                  'btn-primary': this.props.appPrivacy === 'org'
                }])}
                onClick={this.updatePrivacyAction.bind(this,'org')}>
                <span className="icon" dangerouslySetInnerHTML={{__html: getIcon('people')}}></span>
                <span className="text">{builderText.shareApp.sharePermissions.organization}</span>
              </button>
              <button
                type="button"
                className={Helper.classnames(['btn', {
github Esri / storymap-crowdsource / src / app / components / helper / sharing / ShareButton.babel.js View on Github external
render() {

    const shareClass = Helper.classnames([this.props.className, this.props.type, {
      'share': true,
      'share-btn': true,
      'text-btn': true
    }]);
    const icon = getIcon(this.props.type);
    const iconHtml = {
      __html: icon
    };

    return (
      <button className={shareClass} dangerouslySetInnerHTML={iconHtml} title={titleAttrText[this.props.type]} onClick={this.onShare.bind(this,this.props.type)}></button>
    );
  }
github Esri / storymap-crowdsource / src / app / components / mobile / bottomNavigation / BottomNavigation.babel.js View on Github external
{this.props.buttons.map((current) => {
          const buttonClasses = Helper.classnames([this.props.className,this.props.classNames,'text-btn',{
            active: this.props.selected === false && current.active
          }]);
          const icon = getIcon(current.icon);
          const iconHtml = {
            __html: icon
          };

          return (<button
            key={current.name}
            className={buttonClasses}
            type="button"
            onClick={this.onClick.bind(this,current.action)}>
            <span className="icon" dangerouslySetInnerHTML={iconHtml}></span>
            <p className="name">{current.name}</p>
          </button>);
        })}
      </div>