@gechiui/block-editor/build/hooks/typography.js

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TYPOGRAPHY_SUPPORT_KEYS = exports.TYPOGRAPHY_SUPPORT_KEY = void 0;
exports.TypographyPanel = TypographyPanel;
exports.hasTypographySupport = void 0;

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

var _blocks = require("@gechiui/blocks");

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

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

var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));

var _fontAppearanceControl = require("../components/font-appearance-control");

var _lineHeight = require("./line-height");

var _fontAppearance = require("./font-appearance");

var _fontFamily = require("./font-family");

var _fontSize = require("./font-size");

var _textDecoration = require("./text-decoration");

var _textTransform = require("./text-transform");

var _letterSpacing = require("./letter-spacing");

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const TYPOGRAPHY_SUPPORT_KEY = 'typography';
exports.TYPOGRAPHY_SUPPORT_KEY = TYPOGRAPHY_SUPPORT_KEY;
const TYPOGRAPHY_SUPPORT_KEYS = [_lineHeight.LINE_HEIGHT_SUPPORT_KEY, _fontSize.FONT_SIZE_SUPPORT_KEY, _fontAppearance.FONT_STYLE_SUPPORT_KEY, _fontAppearance.FONT_WEIGHT_SUPPORT_KEY, _fontFamily.FONT_FAMILY_SUPPORT_KEY, _textDecoration.TEXT_DECORATION_SUPPORT_KEY, _textTransform.TEXT_TRANSFORM_SUPPORT_KEY, _letterSpacing.LETTER_SPACING_SUPPORT_KEY];
exports.TYPOGRAPHY_SUPPORT_KEYS = TYPOGRAPHY_SUPPORT_KEYS;

function TypographyPanel(props) {
  const {
    clientId
  } = props;
  const isFontFamilyDisabled = (0, _fontFamily.useIsFontFamilyDisabled)(props);
  const isFontSizeDisabled = (0, _fontSize.useIsFontSizeDisabled)(props);
  const isFontAppearanceDisabled = (0, _fontAppearance.useIsFontAppearanceDisabled)(props);
  const isLineHeightDisabled = (0, _lineHeight.useIsLineHeightDisabled)(props);
  const isTextDecorationDisabled = (0, _textDecoration.useIsTextDecorationDisabled)(props);
  const isTextTransformDisabled = (0, _textTransform.useIsTextTransformDisabled)(props);
  const isLetterSpacingDisabled = (0, _letterSpacing.useIsLetterSpacingDisabled)(props);
  const hasFontStyles = !(0, _fontAppearance.useIsFontStyleDisabled)(props);
  const hasFontWeights = !(0, _fontAppearance.useIsFontWeightDisabled)(props);
  const isDisabled = useIsTypographyDisabled(props);
  const isSupported = hasTypographySupport(props.name);
  if (isDisabled || !isSupported) return null;
  const defaultControls = (0, _blocks.getBlockSupport)(props.name, [TYPOGRAPHY_SUPPORT_KEY, '__experimentalDefaultControls']);

  const createResetAllFilter = attribute => newAttributes => {
    var _newAttributes$style;

    return { ...newAttributes,
      style: { ...newAttributes.style,
        typography: { ...((_newAttributes$style = newAttributes.style) === null || _newAttributes$style === void 0 ? void 0 : _newAttributes$style.typography),
          [attribute]: undefined
        }
      }
    };
  };

  return (0, _element.createElement)(_inspectorControls.default, {
    __experimentalGroup: "typography"
  }, !isFontFamilyDisabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    hasValue: () => (0, _fontFamily.hasFontFamilyValue)(props),
    label: (0, _i18n.__)('字体'),
    onDeselect: () => (0, _fontFamily.resetFontFamily)(props),
    isShownByDefault: defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.fontFamily,
    resetAllFilter: newAttributes => ({ ...newAttributes,
      fontFamily: undefined
    }),
    panelId: clientId
  }, (0, _element.createElement)(_fontFamily.FontFamilyEdit, props)), !isFontSizeDisabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    hasValue: () => (0, _fontSize.hasFontSizeValue)(props),
    label: (0, _i18n.__)('字号'),
    onDeselect: () => (0, _fontSize.resetFontSize)(props),
    isShownByDefault: defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.fontSize,
    resetAllFilter: newAttributes => {
      var _newAttributes$style2;

      return { ...newAttributes,
        fontSize: undefined,
        style: { ...newAttributes.style,
          typography: { ...((_newAttributes$style2 = newAttributes.style) === null || _newAttributes$style2 === void 0 ? void 0 : _newAttributes$style2.typography),
            fontSize: undefined
          }
        }
      };
    },
    panelId: clientId
  }, (0, _element.createElement)(_fontSize.FontSizeEdit, props)), !isFontAppearanceDisabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    className: "single-column",
    hasValue: () => (0, _fontAppearance.hasFontAppearanceValue)(props),
    label: (0, _fontAppearanceControl.getFontAppearanceLabel)(hasFontStyles, hasFontWeights),
    onDeselect: () => (0, _fontAppearance.resetFontAppearance)(props),
    isShownByDefault: defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.fontAppearance,
    resetAllFilter: newAttributes => {
      var _newAttributes$style3;

      return { ...newAttributes,
        style: { ...newAttributes.style,
          typography: { ...((_newAttributes$style3 = newAttributes.style) === null || _newAttributes$style3 === void 0 ? void 0 : _newAttributes$style3.typography),
            fontStyle: undefined,
            fontWeight: undefined
          }
        }
      };
    },
    panelId: clientId
  }, (0, _element.createElement)(_fontAppearance.FontAppearanceEdit, props)), !isLineHeightDisabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    className: "single-column",
    hasValue: () => (0, _lineHeight.hasLineHeightValue)(props),
    label: (0, _i18n.__)('行高'),
    onDeselect: () => (0, _lineHeight.resetLineHeight)(props),
    isShownByDefault: defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.lineHeight,
    resetAllFilter: createResetAllFilter('lineHeight'),
    panelId: clientId
  }, (0, _element.createElement)(_lineHeight.LineHeightEdit, props)), !isTextDecorationDisabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    className: "single-column",
    hasValue: () => (0, _textDecoration.hasTextDecorationValue)(props),
    label: (0, _i18n.__)('装饰'),
    onDeselect: () => (0, _textDecoration.resetTextDecoration)(props),
    isShownByDefault: defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.textDecoration,
    resetAllFilter: createResetAllFilter('textDecoration'),
    panelId: clientId
  }, (0, _element.createElement)(_textDecoration.TextDecorationEdit, props)), !isTextTransformDisabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    className: "single-column",
    hasValue: () => (0, _textTransform.hasTextTransformValue)(props),
    label: (0, _i18n.__)('字母实例'),
    onDeselect: () => (0, _textTransform.resetTextTransform)(props),
    isShownByDefault: defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.textTransform,
    resetAllFilter: createResetAllFilter('textTransform'),
    panelId: clientId
  }, (0, _element.createElement)(_textTransform.TextTransformEdit, props)), !isLetterSpacingDisabled && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    className: "single-column",
    hasValue: () => (0, _letterSpacing.hasLetterSpacingValue)(props),
    label: (0, _i18n.__)('字母间距'),
    onDeselect: () => (0, _letterSpacing.resetLetterSpacing)(props),
    isShownByDefault: defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.letterSpacing,
    resetAllFilter: createResetAllFilter('letterSpacing'),
    panelId: clientId
  }, (0, _element.createElement)(_letterSpacing.LetterSpacingEdit, props)));
}

const hasTypographySupport = blockName => {
  return TYPOGRAPHY_SUPPORT_KEYS.some(key => (0, _blocks.hasBlockSupport)(blockName, key));
};

exports.hasTypographySupport = hasTypographySupport;

function useIsTypographyDisabled() {
  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  const configs = [(0, _fontAppearance.useIsFontAppearanceDisabled)(props), (0, _fontSize.useIsFontSizeDisabled)(props), (0, _lineHeight.useIsLineHeightDisabled)(props), (0, _fontFamily.useIsFontFamilyDisabled)(props), (0, _textDecoration.useIsTextDecorationDisabled)(props), (0, _textTransform.useIsTextTransformDisabled)(props), (0, _letterSpacing.useIsLetterSpacingDisabled)(props)];
  return configs.filter(Boolean).length === configs.length;
}
//# sourceMappingURL=typography.js.map