How to use the babel/utils/helper/Helper.classnames function in babel

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: 
        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) {

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>
        <label>{this.props.label}</label>
        {this.props.tooltip ?  : null}
          {this.props.options.map((current) =&gt; {
            const id = (this.props.id + current.value + '').toCamelCase();

            return (
              <div>
                <label>
                  </label></div></div>

render() {
    const classes = Helper.classnames([this.props.className, this.props.classNames, 'map-tip']);
    const top = this.props.screenPoint.y;

    return (
      <div> this.mapTip = ref} style={{top, left: this.state.left, right: this.state.right, marginTop: this.state.marginTop, marginLeft: this.state.marginLeft}}&gt;
        { this.state.showOnTop ? null : <div style="{{marginLeft:"> this.topArrow = ref} className="top-arrow"&gt;</div> }
        <div>
          {this.props.content}
        </div>
        { this.state.showOnTop ? <div style="{{marginLeft:"> this.bottomArrow = ref}  className="bottom-arrow"&gt;</div> : null }
      </div>
    );
  }

itemNames: {
        className: Helper.classnames(['item-name'],modalClasses),
        headerStyle: {
          backgroundSize: 'auto',
          backgroundRepeat: 'repeat',
          backgroundImage: 'url(resources/images/builder/builder-banner-background.png)'
        },
        title: welcomeTitle,
        body: 
        ,
        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>
            <h5>{builderText.betaMessage.title}</h5>
            {Object.keys(builderText.betaMessage.messageParagraphs).map((current) =&gt; {
              return <p>{builderText.betaMessage.messageParagraphs[current]}</p>;
            })}
            <a href="https://links.esri.com/storymaps/crowdsource_mature_faq">{builderText.betaMessage.link}</a>
          </div>
        ),
        footer: continueButton

{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>
              <div>
                <div></div>
                <img src="{layoutImg}" alt="{altText}">
              </div>
              <div>
                <h4>{layouts[layout].name}</h4>
                <p>{layouts[layout].description}</p>
                {/*<a href="http://www.example.com">{builderText.settingsModals.layout.preview}</a>*/}
              </div></div>

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>
        { showBuilder ?  : null }
        { adminBanner ?  {
            const redirect = new URI(window.location.href);

            redirect.setSearch('edit');
            window.location = redirect.href();
          }} /&gt; : null }</div>

render() {

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

    return (
      <div>
        {this.props.buttons.map((current) =&gt; {
          const buttonClasses = Helper.classnames([this.props.className,this.props.classNames,'text-btn',{
            active: this.props.selected === false &amp;&amp; current.active
          }]);
          const icon = getIcon(current.icon);
          const iconHtml = {
            __html: icon
          };

          return (</div>

render() {

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

    return (
      <div>
        { !this.props.user.authenticated || this.props.view === 'login' ?  : null }
        { this.props.user.authenticated &amp;&amp; this.props.user.contributor &amp;&amp; this.props.view === 'form' ?  : null }
      </div>
    );
  }

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 style="{itemStyle}">
        
        <div>
          <h6>{attr[this.props.primaryField]}</h6>
        </div>
      </li>

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)
    );
  }
}