@gechiui/block-editor/build/components/responsive-block-control/index.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@gechiui/element");

var _classnames = _interopRequireDefault(require("classnames"));

var _i18n = require("@gechiui/i18n");

var _components = require("@gechiui/components");

var _label = _interopRequireDefault(require("./label"));

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function ResponsiveBlockControl(props) {
  const {
    title,
    property,
    toggleLabel,
    onIsResponsiveChange,
    renderDefaultControl,
    renderResponsiveControls,
    isResponsive = false,
    defaultLabel = {
      id: 'all',

      /* translators: 'Label. Used to signify a layout property (eg: margin, padding) will apply uniformly to all screensizes.' */
      label: (0, _i18n.__)('全部')
    },
    viewports = [{
      id: 'small',
      label: (0, _i18n.__)('小型屏幕')
    }, {
      id: 'medium',
      label: (0, _i18n.__)('中型屏幕')
    }, {
      id: 'large',
      label: (0, _i18n.__)('大型屏幕')
    }]
  } = props;

  if (!title || !property || !renderDefaultControl) {
    return null;
  }

  const toggleControlLabel = toggleLabel || (0, _i18n.sprintf)(
  /* translators: 'Toggle control label. Should the property be the same across all screen sizes or unique per screen size.'. %s property value for the control (eg: margin, padding...etc) */
  (0, _i18n.__)('在所有屏幕尺寸上使用相同的%s。'), property);
  /* translators: 'Help text for the responsive mode toggle control.' */

  const toggleHelpText = (0, _i18n.__)('在对所有屏幕尺寸使用相同值或对每个屏幕尺寸使用唯一值之间进行切换。');
  const defaultControl = renderDefaultControl((0, _element.createElement)(_label.default, {
    property: property,
    viewport: defaultLabel
  }), defaultLabel);

  const defaultResponsiveControls = () => {
    return viewports.map(viewport => (0, _element.createElement)(_element.Fragment, {
      key: viewport.id
    }, renderDefaultControl((0, _element.createElement)(_label.default, {
      property: property,
      viewport: viewport
    }), viewport)));
  };

  return (0, _element.createElement)("fieldset", {
    className: "block-editor-responsive-block-control"
  }, (0, _element.createElement)("legend", {
    className: "block-editor-responsive-block-control__title"
  }, title), (0, _element.createElement)("div", {
    className: "block-editor-responsive-block-control__inner"
  }, (0, _element.createElement)(_components.ToggleControl, {
    className: "block-editor-responsive-block-control__toggle",
    label: toggleControlLabel,
    checked: !isResponsive,
    onChange: onIsResponsiveChange,
    help: toggleHelpText
  }), (0, _element.createElement)("div", {
    className: (0, _classnames.default)('block-editor-responsive-block-control__group', {
      'is-responsive': isResponsive
    })
  }, !isResponsive && defaultControl, isResponsive && (renderResponsiveControls ? renderResponsiveControls(viewports) : defaultResponsiveControls()))));
}

var _default = ResponsiveBlockControl;
exports.default = _default;
//# sourceMappingURL=index.js.map