How to use the babel/utils/helper/Helper.classnames 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 / forms / photo / Photo.babel.js View on Github external
render() {

    const inputClasses = Helper.classnames([this.props.className,'photo-input','form-group',{
      'required': this.props.required,
      'has-error': !this.state.isValid
    }]);

    const uploaderClasses = Helper.classnames([this.props.className,'drag-area','uploader','alert',{
      'alert-default': !this.state.dragging,
      'alert-info': this.state.dragging
    }]);

    const cameraCapture = function cameraCapture() {
      if (/iP(hone|od|ad)/.test(navigator.platform)) {
        // supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
        const v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
        const vArray = [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];

        if (vArray[0] < 10) {
github Esri / storymap-crowdsource / src / app / components / forms / checkboxGroup / CheckboxGroup.babel.js View on Github external
render() {

    const inputClasses = Helper.classnames([this.props.className,'checkbox-group','form-group',{
      'required': this.props.required,
      'has-error': !this.state.isValid
    }]);
    const defaultValues = this.props.defaultValue.toString().split(',');

    return (
      <div className={inputClasses}>
        <label htmlFor={this.props.id} className="control-label">{this.props.label}</label>
        {this.props.tooltip ? <IconTooltip className="form-tooltip" {...this.props.tooltip} /> : null}
          {this.props.options.map((current) => {
            const id = (this.props.id + current.value + '').toCamelCase();

            return (
              <div className="checkbox" key={id}>
                <label htmlFor={id}>
                  <input
github Esri / storymap-crowdsource / src / app / components / helper / mapTip / MapTip.babel.js View on Github external
render() {
    const classes = Helper.classnames([this.props.className, this.props.classNames, 'map-tip']);
    const top = this.props.screenPoint.y;

    return (
      <div className={classes} key={this.props.id} ref={(ref) => this.mapTip = ref} style={{top, left: this.state.left, right: this.state.right, marginTop: this.state.marginTop, marginLeft: this.state.marginLeft}}>
        { this.state.showOnTop ? null : <div style={{marginLeft: this.state.arrowMarginLeft, marginRight: this.state.arrowMarginRight}} ref={(ref) => this.topArrow = ref} className="top-arrow"></div> }
        <div className="content" >
          {this.props.content}
        </div>
        { this.state.showOnTop ? <div style={{marginLeft: this.state.arrowMarginLeft, marginRight: this.state.arrowMarginRight}} ref={(ref) => this.bottomArrow = ref}  className="bottom-arrow"></div> : null }
      </div>
    );
  }
github Esri / storymap-crowdsource / src / app / components / crowdsource / builder / Builder.babel.js View on Github external
itemNames: {
        className: Helper.classnames(['item-name'],modalClasses),
        headerStyle: {
          backgroundSize: 'auto',
          backgroundRepeat: 'repeat',
          backgroundImage: 'url(resources/images/builder/builder-banner-background.png)'
        },
        title: welcomeTitle,
        body: <SettingsItemName
          handleChange={this.onItemNamesChange}
          {...this.props.scratchNaming}>
        </SettingsItemName>,
        footer: continueButton
      },
      betaMessage: {
        className: Helper.classnames(['beta-message'],modalClasses),
        headerStyle: {
          backgroundSize: 'auto',
          backgroundRepeat: 'repeat',
          backgroundImage: 'url(resources/images/builder/builder-banner-background.png)'
        },
        title: welcomeTitle,
        body: (
          <div className="message">
            <h5 className="text-danger">{builderText.betaMessage.title}</h5>
            {Object.keys(builderText.betaMessage.messageParagraphs).map((current) => {
              return <p key={current.slice(0,10).toCamelCase()}>{builderText.betaMessage.messageParagraphs[current]}</p>;
            })}
            <a href="https://links.esri.com/storymaps/crowdsource_mature_faq">{builderText.betaMessage.link}</a>
          </div>
        ),
        footer: continueButton
github Esri / storymap-crowdsource / src / app / components / settings / Layout.babel.js View on Github external
{Object.keys(layouts).map((layout) => {
          const layoutClasses = Helper.classnames(['layout-option','row'],{
            selected: layout === this.props.selected
          });
          const layoutImg = 'resources/images/builder/layouts/' + layout + '.png';
          const altText = layouts[layout].name + ' ' + builderText.settingsModals.layout.commonAltText;

          return (
            <div className={layoutClasses} key={layouts[layout].name} onClick={this.props.handleChange.bind(this,layout)}>
              <div className="col-xs-12 col-md-5">
                <div className="selected-icon" dangerouslySetInnerHTML={selectedIconHtml}></div>
                <img className="layout-thumbnail" alt={altText} src={layoutImg} />
              </div>
              <div className="col-xs-12 col-md-7">
                <h4 className="layout-name">{layouts[layout].name}</h4>
                <p className="layout-description">{layouts[layout].description}</p>
                {/*<a href="http://www.example.com" className="view-live btn btn-link btn-sm" target="_blank" onClick={this.stopPropagation}>{builderText.settingsModals.layout.preview}</a>*/}
              </div>
github Esri / storymap-crowdsource / src / app / components / crowdsource / CrowdsourceApp.babel.js View on Github external
render() {

    const error = this.Error;
    const showBuilder = this.props.mode.isBuilder && ((this.props.mode.fromScratch && this.props.user.publisher) || (!this.props.mode.fromScratch && this.props.loading.data && this.props.user.editor)) && !error;
    const showViewer = !this.props.mode.fromScratch && (!this.props.mode.isBuilder || this.props.mode.isBuilder && this.props.user.editor) && this.props.loading.data && !error;
    const adminBanner = this.props.visibleComponents.indexOf(componentNames.ADMIN_BANNER) >= 0;

    const appClasses = Helper.classnames(['crowdsource-app',this.props.layout.id,this.props.layout.id + '-' + this.props.layout.theme,'font-' + this.props.layout.font],{
      'banner': adminBanner || showBuilder,
      'visible-side-panel': this.props.visibleComponents.indexOf(componentNames.SIDE_PANEL_SETTINGS) >= 0 ||
        this.props.visibleComponents.indexOf(componentNames.SIDE_PANEL_HELP) >= 0
    });

    return (
      <div className={appClasses}>
        { showBuilder ? <Builder></Builder> : null }
        { adminBanner ? <AdminBanner
          hideAction={this.props.actions.hideComponent.bind(null,componentNames.ADMIN_BANNER)}
          editAction={() => {
            const redirect = new URI(window.location.href);

            redirect.setSearch('edit');
            window.location = redirect.href();
          }} /> : null }
github Esri / storymap-crowdsource / src / app / components / mobile / bottomNavigation / BottomNavigation.babel.js View on Github external
render() {

    const navigationClasses = Helper.classnames([this.props.className,this.props.classNames,'bottom-navigation']);

    return (
      <div className={navigationClasses}>
        {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"
github Esri / storymap-crowdsource / src / app / components / contribute / ContributePanel.babel.js View on Github external
render() {

    const contributeClasses = Helper.classnames([this.props.className,this.props.classNames,
      'contribute-panel',
      'container-fluid'
    ]);

    return (
      <div className={contributeClasses}>
        { !this.props.user.authenticated || this.props.view === 'login' ? <Login {...this.props}/> : null }
        { this.props.user.authenticated && this.props.user.contributor && this.props.view === 'form' ? <CrowdsourceForm {...this.props}/> : null }
      </div>
    );
  }
github Esri / storymap-crowdsource / src / app / components / gallery / ThumbnailGallery.babel.js View on Github external
url: attachmentUrl,
        layer: this.props.layer
      });
    } else {
      photoUrl = Helper.attachmentUtils.checkForCredential({
        url: this.props.thumbnailUrlPrepend + attr[this.props.thumbnailField] + this.props.thumbnailUrlAppend,
        layer: this.props.layer
      });
    }

    const itemStyle = {
      height: this.state.tileSettings.tileSize,
      width: endTile ? this.state.tileSettings.tileSize - 0.5 : this.state.tileSettings.tileSize
    };

    const itemClasses = Helper.classnames(['gallery-item', {
      selected: this.props.selected === attr[this.props.idField],
      highlighted: this.props.highlighted === attr[this.props.idField]
    }]);

    return (
      <li className={itemClasses}
        key={attr[this.props.idField]}
        style={itemStyle}
        onClick={this.onSelect.bind(null,attr[this.props.idField])}
        onMouseOver={this.props.isMobile ? null : this.onHighlight.bind(null,attr[this.props.idField])}
        onMouseOut={this.onHighlight.bind(null,false)}>
        <LazyImage className="background-image" src={photoUrl}></LazyImage>
        <div className="info-card background-fill">
          <h6>{attr[this.props.primaryField]}</h6>
        </div>
      </li>
github Esri / storymap-crowdsource / src / app / components / forms / inlineEditor / InlineEditorWrapper.babel.js View on Github external
render() {
    const editingAllowed = this.props.editingAllowed && InlineInput;
    const className = Helper.classnames([this.props.className,'inline-editor']);

    return (
      editingAllowed ?
        React.createElement(this.props.component,$.extend(true,{},this.props,{className}),React.Children.map(this.props.children,this.checkChildrenForEditProps)) :
        React.createElement(this.props.component,this.props)
    );
  }
}