@vnmfify/core/number-keyboard/number-keyboard-key.js

```shell npm i @vnmfify/core -S ```

import { View } from "@vnxjs/components";
import classNames from "classnames";
import * as React from "react";
import { useContext, useState } from "react";
import { prefixClassname } from "../styles";
import { useTouch } from "../utils/touch";
import NumberKeyboardContext from "./number-keyboard.context";

function NumberKeyboardKey(props) {
  var {
    wider,
    code = "extra",
    size,
    color,
    children,
    onPress
  } = props;
  var {
    onKeyPress
  } = useContext(NumberKeyboardContext);
  var value = children !== null && children !== void 0 ? children : "";
  var [active, setActive] = useState(false);
  var touch = useTouch();

  var onTouchStart = event => {
    touch.start(event);
    setActive(true);
  };

  var onTouchMove = event => {
    touch.move(event);

    if (touch.direction) {
      setActive(false);
    }
  };

  var onTouchEnd = event => {
    if (active) {
      if (!children) {
        event.preventDefault();
      }

      setActive(false);
      onPress === null || onPress === void 0 ? void 0 : onPress(value, code !== null && code !== void 0 ? code : value);
      onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(value, code !== null && code !== void 0 ? code : value);
    }
  };

  var renderContent = () => {
    switch (code) {
      case "backspace":
        return children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(View, {
          className: "vnmfify-backspace"
        });

      case "keyboard-hide":
        return children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(View, {
          className: "vnmfify-keyboard-hide"
        });

      default:
        return children;
    }
  };

  return /*#__PURE__*/React.createElement(View, {
    className: classNames(prefixClassname("key__wrapper"), {
      [prefixClassname("key__wrapper--wider")]: wider
    }),
    onTouchStart: onTouchStart,
    onTouchMove: onTouchMove,
    onTouchEnd: onTouchEnd,
    onTouchCancel: onTouchEnd
  }, /*#__PURE__*/React.createElement(View, {
    className: classNames(prefixClassname("key"), {
      [prefixClassname("key--active")]: active,
      [prefixClassname("key--large")]: size === "large",
      [prefixClassname("key--blue")]: color === "blue"
    })
  }, renderContent()));
}

export default NumberKeyboardKey;
//# sourceMappingURL=number-keyboard-key.js.map