How to use merge-class-names - 10 common examples

clockClassName,
      className: dateTimePickerClassName, // Unused, here to exclude it from clockProps
      maxDetail,
      onChange,
      value,
      ...clockProps
    } = this.props;

    const className = `${baseClassName}__clock`;
    const [valueFrom] = [].concat(value);

    const maxDetailIndex = allViews.indexOf(maxDetail);

    return (
      
        <div>
           0}
            renderSecondHand={maxDetailIndex &gt; 1}
            value={valueFrom}
            {...clockProps}
          /&gt;
        </div>
      
    );
  }

clockClassName,
      className: timeRangePickerClassName, // Unused, here to exclude it from clockProps
      maxDetail,
      onChange,
      value,
      ...clockProps
    } = this.props;

    const className = `${baseClassName}__clock`;
    const [valueFrom] = [].concat(value);

    const maxDetailIndex = allViews.indexOf(maxDetail);

    return (
      
        <div>
           0}
            renderSecondHand={maxDetailIndex &gt; 1}
            value={valueFrom}
            {...clockProps}
          /&gt;
        </div>
      
    );
  }

clockClassName,
      className: timePickerClassName, // Unused, here to exclude it from clockProps
      maxDetail,
      onChange,
      value,
      ...clockProps
    } = this.props;

    const className = `${baseClassName}__clock`;
    const [valueFrom] = [].concat(value);

    const maxDetailIndex = allViews.indexOf(maxDetail);

    return (
      
        <div>
           0}
            renderSecondHand={maxDetailIndex &gt; 1}
            value={valueFrom}
            {...clockProps}
          /&gt;
        </div>
      
    );
  }

}

    const {
      calendarClassName,
      className: dateTimePickerClassName, // Unused, here to exclude it from calendarProps
      maxDetail: dateTimePickerMaxDetail, // Unused, here to exclude it from calendarProps
      onChange,
      value,
      ...calendarProps
    } = this.props;

    const className = `${baseClassName}__calendar`;

    return (
      
        <div>
          
        </div>
      
    );
  }

placeholder = '--',
  short,
  value,
  year,
  ...otherProps
}) {
  const maxMonth = min(12, maxDate && year === getYear(maxDate) && getMonthHuman(maxDate));
  const minMonth = max(1, minDate && year === getYear(minDate) && getMonthHuman(minDate));
  const dates = [...Array(12)].map((el, index) => new Date(2019, index, 1));
  const name = 'month';
  const formatter = short ? formatShortMonth : formatMonth;

  return (
    <select name="{name}" aria-label="{ariaLabel}"> {
        if (itemRef) {
          itemRef(ref, name);
        }
      }}
      value={value !== null ? value : ''}
      {...otherProps}
    &gt;
      {!value &amp;&amp; (
        <option value="">
          {placeholder}
        </option></select>

render() {
    const { className, disabled } = this.props;
    const { isOpen } = this.state;

    return (
      <div> {
          if (!ref) {
            return;
          }

          this.wrapper = ref;
        }}
      &gt;
        {this.renderInputs()}</div>

render() {
    const { className, disabled } = this.props;
    const { isOpen } = this.state;

    return (
      <div> {
          if (!ref) {
            return;
          }

          this.wrapper = ref;
        }}
      &gt;
        {this.renderInputs()}</div>

);
  }

  const gridColumn = `${col + 1} / span ${colspan}`;

  return (
    <>
      <section span="" style="{{">
      <div span="" style="{{">
      <h3 style="{{">
        
          {name}
        
      </h3></div></section>

render() {
    const { className, disabled } = this.props;
    const { isCalendarOpen, isClockOpen } = this.state;

    return (
      <div> {
          if (!ref) {
            return;
          }

          this.wrapper = ref;
        }}
      &gt;
        {this.renderInputs()}</div>

locale,
      maxDate,
      maxDateTransform,
      minDate,
      minDateTransform,
      onClick,
      onMouseOver,
      style,
      tileDisabled,
      view,
    } = this.props;
    const { tileClassName, tileContent } = this.state;

    return (
      <button disabled="{"> date)
          || (maxDate &amp;&amp; maxDateTransform(maxDate) &lt; date)
          || (tileDisabled &amp;&amp; tileDisabled({ activeStartDate, date, view }))
        }
        onClick={onClick &amp;&amp; (event =&gt; onClick(date, event))}
        onFocus={onMouseOver &amp;&amp; (() =&gt; onMouseOver(date))}
        onMouseOver={onMouseOver &amp;&amp; (() =&gt; onMouseOver(date))}
        style={style}
        type="button"
      &gt;
        {formatAbbr
          ? (
            <abbr aria-label="{formatAbbr(locale,">
              {children}
            </abbr></button>