@adamson/react-crossword/dist/es/Cell.js

A flexible, responsive, and easy-to-use crossword component for React apps

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = Cell;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = require("styled-components");

var _lib = require("puz-reader/lib");

var _context = require("./context");

var _util = require("./util");

var _MarkGlyphs;

// expected props: row, col, answer, crossword, cellSize
var MarkGlyphs = (_MarkGlyphs = {}, _MarkGlyphs[_util.MarkStatus.CORRECT] = 'Y', _MarkGlyphs[_util.MarkStatus.INCORRECT] = 'N', _MarkGlyphs);
/**
 * An individual-letter answer cell within the crossword grid.
 *
 * A `Cell` lives inside the SVG for a [`Crossword`](#crossword), and renders at
 * a location determined by the `row`, `col`, and `cellSize` properties from
 * `cellData` and `renderContext`.
 */

function Cell(_ref) {
  var guessData = _ref.guessData,
      square = _ref.square,
      mark = _ref.mark,
      onClick = _ref.onClick,
      focus = _ref.focus,
      highlight = _ref.highlight;

  var _useContext = (0, _react.useContext)(_context.CrosswordSizeContext),
      cellSize = _useContext.cellSize,
      cellPadding = _useContext.cellPadding,
      cellInner = _useContext.cellInner,
      cellHalf = _useContext.cellHalf,
      fontSize = _useContext.fontSize;

  var _useContext2 = (0, _react.useContext)(_styledComponents.ThemeContext),
      cellBackground = _useContext2.cellBackground,
      cellBorder = _useContext2.cellBorder,
      textColor = _useContext2.textColor,
      numberColor = _useContext2.numberColor,
      focusBackground = _useContext2.focusBackground,
      highlightBackground = _useContext2.highlightBackground;

  var handleClick = (0, _react.useCallback)(function (event) {
    event.preventDefault();

    if (onClick) {
      onClick(guessData, square);
    }
  }, [guessData, square, onClick]);
  var row = square.row,
      column = square.column,
      number = square.number;
  var guess = guessData.value;
  var x = column * cellSize;
  var y = row * cellSize;
  return /*#__PURE__*/_react["default"].createElement("g", {
    onClick: handleClick,
    style: {
      cursor: 'default',
      fontSize: fontSize + "px"
    }
  }, /*#__PURE__*/_react["default"].createElement("rect", {
    x: x + cellPadding,
    y: y + cellPadding,
    width: cellInner,
    height: cellInner,
    fill: focus ? focusBackground : highlight ? highlightBackground : cellBackground,
    stroke: cellBorder,
    strokeWidth: cellSize / 50
  }), number && /*#__PURE__*/_react["default"].createElement("text", {
    x: x + cellPadding * 4,
    y: y + cellPadding * 4,
    textAnchor: "start",
    dominantBaseline: "hanging",
    style: {
      fontSize: '50%',
      fill: numberColor
    }
  }, number), mark && /*#__PURE__*/_react["default"].createElement("text", {
    x: x + cellSize - cellPadding * 4,
    y: y + cellPadding * 4,
    textAnchor: "end",
    dominantBaseline: "hanging",
    style: {
      fontSize: '50%',
      fill: numberColor
    }
  }, MarkGlyphs[mark]), /*#__PURE__*/_react["default"].createElement("text", {
    x: x + cellHalf,
    y: y + cellHalf + 1 // +1 for visual alignment?
    ,
    textAnchor: "middle",
    dominantBaseline: "middle",
    style: {
      fill: textColor
    }
  }, guess));
}

process.env.NODE_ENV !== "production" ? Cell.propTypes = {
  /** the data specific to this cell */
  guessData: _propTypes["default"].shape({
    value: _propTypes["default"].string.isRequired
  }).isRequired,
  square: _propTypes["default"].instanceOf(_lib.Square).isRequired,
  mark: _propTypes["default"].oneOf(Object.values(_util.MarkStatus)),

  /** whether this cell has focus */
  focus: _propTypes["default"].bool,

  /** whether this cell is highlighted */
  highlight: _propTypes["default"].bool,

  /** handler called when the cell is clicked */
  onClick: _propTypes["default"].func
} : void 0;
Cell.defaultProps = {
  focus: false,
  highlight: false,
  onClick: null
}; // export default Cell;