strapi-plugin-content-manager/admin/src/components/WysiwygBottomControls/index.js

A powerful UI to easily manage your data.

/**
 *
 * WysiwygBottomControls
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';

import styles from './styles.scss';
/* eslint-disable jsx-a11y/label-has-for */
const WysiwygBottomControls = ({ isPreviewMode, onChange, onClick }) => {
  const browse = (
    <FormattedMessage id="components.WysiwygBottomControls.uploadFiles.browse">
      {(message) => <span className={styles.underline}>{message}</span>}
    </FormattedMessage>
  );

  return (
    <div className={styles.wysiwygBottomControlsWrapper}>
      <div>
        <label
          className={styles.dropLabel}
          onClick={(e) => {
            if (isPreviewMode) {
              e.preventDefault();
            }
          }}
        >
          <FormattedMessage
            id="components.WysiwygBottomControls.uploadFiles"
            values={{ browse }}
          />
          <input type="file" onChange={onChange} />
        </label>
      </div>
      <div className={styles.fullScreenWrapper} onClick={onClick}>
        <FormattedMessage id="components.WysiwygBottomControls.fullscreen" />
      </div>
    </div>
  );
};

WysiwygBottomControls.defaultProps = {
  isPreviewMode: false,
  onChange: () => {},
  onClick: () => {},
};

WysiwygBottomControls.propTypes = {
  isPreviewMode: PropTypes.bool,
  onChange: PropTypes.func,
  onClick: PropTypes.func,
};

export default WysiwygBottomControls;