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

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

import _size from "lodash/size";
import _isArray from "lodash/isArray";
import _isNumber from "lodash/isNumber";
import _isString from "lodash/isString";
var _excluded = ["className", "open", "title", "extraKey", "random", "children", "onKeyPress", "onBackspace", "onHide"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import { View } from "@vnxjs/components";
import classNames from "classnames";
import * as React from "react";
import { Children, cloneElement, isValidElement, useMemo } from "react";
import { prefixClassname } from "../styles";
import Transition from "../transition";
import NumberKeyboardHeader from "./number-keyboard-header";
import NumberKeyboardKey from "./number-keyboard-key";
import { isNumberKeyboardKeyElement } from "./number-keyboard-key.shared";
import NumberKeyboardKeys from "./number-keyboard-keys";
import NumberKeyboardSidebar from "./number-keyboard-sidebar";
import NumberKeyboardContext from "./number-keyboard.context";

function createBasicKeys(random) {
  var keys = Array(9).fill("").map((_, i) => /*#__PURE__*/React.createElement(NumberKeyboardKey, {
    key: i + 1,
    children: i + 1
  }));

  if (random) {
    keys.sort(() => Math.random() > 0.5 ? 1 : -1);
  }

  return keys;
}

export function createExtraNumberKeyboardKey(extraKey) {
  if (_isString(extraKey) || _isNumber(extraKey)) {
    return /*#__PURE__*/React.createElement(NumberKeyboardKey, {
      key: extraKey,
      children: extraKey
    });
  } else if (isNumberKeyboardKeyElement(extraKey)) {
    var _ref, _element$key;

    var element = extraKey;
    var elementProps = element.props;
    return /*#__PURE__*/cloneElement(extraKey, {
      key: (_ref = (_element$key = element.key) !== null && _element$key !== void 0 ? _element$key : elementProps.children) !== null && _ref !== void 0 ? _ref : elementProps.code
    });
  }

  return undefined;
}

function createCustomKeys(extraKey) {
  if (extraKey === undefined) {
    return [/*#__PURE__*/React.createElement(NumberKeyboardKey, {
      key: "keyboard-hide",
      code: "keyboard-hide"
    }), /*#__PURE__*/React.createElement(NumberKeyboardKey, {
      key: 0,
      children: 0
    }), /*#__PURE__*/React.createElement(NumberKeyboardKey, {
      key: "backspace",
      code: "backspace"
    })];
  }

  if (_isString(extraKey) || _isNumber(extraKey) || isNumberKeyboardKeyElement(extraKey)) {
    return [createExtraNumberKeyboardKey(extraKey), /*#__PURE__*/React.createElement(NumberKeyboardKey, {
      key: 0,
      children: 0
    }), /*#__PURE__*/React.createElement(NumberKeyboardKey, {
      key: "backspace",
      code: "backspace"
    })];
  }

  if (_isArray(extraKey) && _size(extraKey) === 1) {
    return [createExtraNumberKeyboardKey(extraKey[0]), /*#__PURE__*/React.createElement(NumberKeyboardKey, {
      key: 0,
      wider: true,
      children: 0
    })];
  }

  if (_isArray(extraKey) && _size(extraKey) === 2) {
    var wider = extraKey.filter(key => key !== undefined).length === 1;
    return [createExtraNumberKeyboardKey(extraKey[0]), /*#__PURE__*/React.createElement(NumberKeyboardKey, {
      key: 0,
      wider: wider,
      children: 0
    }), createExtraNumberKeyboardKey(extraKey[1])];
  }

  return [];
}

function useNumberKeyboardChildren(children, title) {
  return useMemo(() => {
    var __children__ = {
      sidebar: undefined
    };
    Children.forEach(children, child => {
      if ( /*#__PURE__*/isValidElement(child)) {
        var element = child;
        var elementType = element.type;

        if (elementType === NumberKeyboardHeader) {
          __children__.header = element;
        }

        if (elementType === NumberKeyboardSidebar) {
          __children__.sidebar = element;
        }
      }
    });

    if (title && !__children__.header) {
      __children__.header = /*#__PURE__*/React.createElement(NumberKeyboardHeader, null);
    }

    return __children__;
  }, [children, title]);
}

function NumberKeyboard(props) {
  var {
    className,
    open,
    title,
    extraKey,
    random = false,
    children: childrenProp,
    onKeyPress,
    onBackspace,
    onHide
  } = props,
      restProps = _objectWithoutProperties(props, _excluded);

  var {
    header,
    sidebar
  } = useNumberKeyboardChildren(childrenProp, title);
  var basicKeys = useMemo(() => createBasicKeys(random), [random]);
  var keys = useMemo(() => [...basicKeys, ...createCustomKeys(extraKey)], [basicKeys, extraKey]);

  var handleKeyPress = (value, code) => {
    onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(value, code);

    if (code === "backspace") {
      onBackspace === null || onBackspace === void 0 ? void 0 : onBackspace();
    } else if (code === "keyboard-hide") {
      onHide === null || onHide === void 0 ? void 0 : onHide();
    }
  };

  return /*#__PURE__*/React.createElement(NumberKeyboardContext.Provider, {
    value: {
      title,
      onKeyPress: handleKeyPress
    }
  }, /*#__PURE__*/React.createElement(Transition, {
    in: open,
    appear: true,
    name: "slide-up"
  }, /*#__PURE__*/React.createElement(View, _objectSpread({
    className: classNames(prefixClassname("number-keyboard"), {
      [prefixClassname("number-keyboard--with-title")]: header
    }, className)
  }, restProps), header, /*#__PURE__*/React.createElement(View, {
    className: prefixClassname("number-keyboard__body")
  }, /*#__PURE__*/React.createElement(NumberKeyboardKeys, {
    children: keys
  }), sidebar))));
}

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