@nutui/nutui-react 1.2.1-beta.1 → 1.2.2-beta.1

package/dist/esm/NumberKeyboard.js

@@ -0,0 +1,277 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React__default, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { c as cn } from './bem-893ad28d.js';
+import Popup from './Popup.js';
+import { useConfig } from './ConfigProvider.js';
+import '@bem-react/classname';
+var defaultProps = {
+  confirmText: '',
+  title: '',
+  visible: false,
+  type: 'default',
+  customKey: [],
+  className: '',
+  randomKeys: false,
+  popClass: '',
+  onClose: function onClose() {}
+};
+
+var NumberKeyboard = function NumberKeyboard(props) {
+  var _useConfig = useConfig(),
+      locale = _useConfig.locale;
+
+  var title = props.title,
+      confirmText = props.confirmText,
+      visible = props.visible,
+      type = props.type,
+      customKey = props.customKey,
+      randomKeys = props.randomKeys,
+      popClass = props.popClass,
+      style = props.style,
+      className = props.className,
+      onChange = props.onChange,
+      onDelete = props.onDelete,
+      onClose = props.onClose;
+  var b = cn('numberkeyboard');
+
+  var _useState = useState(visible),
+      _useState2 = _slicedToArray(_useState, 2),
+      show = _useState2[0],
+      setShow = _useState2[1];
+
+  var _useState3 = useState(undefined),
+      _useState4 = _slicedToArray(_useState3, 2),
+      clickKeyIndex = _useState4[0],
+      setClickKeyIndex = _useState4[1];
+
+  var _useState5 = useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      keysList = _useState6[0],
+      setKeysList = _useState6[1];
+
+  useEffect(function () {
+    setShow(visible);
+  }, [visible]);
+
+  var defaultKey = function defaultKey() {
+    var leftBottomKey = {
+      id: 'lock',
+      type: 'lock'
+    };
+
+    if (customKey) {
+      var customKeys = Array.isArray(customKey) ? customKey : [customKey];
+
+      if (customKeys.length > 0) {
+        var newCustomKey = customKeys[0];
+        leftBottomKey = {
+          id: newCustomKey,
+          type: 'custom'
+        };
+      }
+    }
+
+    return [].concat(_toConsumableArray(getBasicKeys()), [leftBottomKey, {
+      id: 0,
+      type: 'number'
+    }, {
+      id: 'delete',
+      type: 'delete'
+    }]);
+  };
+
+  var getBasicKeys = function getBasicKeys() {
+    var keys = [];
+
+    for (var i = 1; i <= 9; i++) {
+      keys.push({
+        id: i,
+        type: 'number'
+      });
+    }
+
+    if (randomKeys) {
+      return keys.sort(function () {
+        return Math.random() > 0.5 ? 1 : -1;
+      });
+    }
+
+    return keys;
+  };
+
+  var genCustomKeys = function genCustomKeys() {
+    var keys = getBasicKeys();
+    if (!customKey) return [];
+    var customKeys = Array.isArray(customKey) ? customKey : [customKey];
+
+    if (customKeys.length > 2) {
+      customKeys = [customKeys[0], customKeys[1]];
+    }
+
+    if (customKeys.length === 2 && props.title && props.type !== 'rightColumn') {
+      customKeys = [customKeys[0]];
+    }
+
+    if (customKeys.length === 1) {
+      if (props.title && props.type !== 'rightColumn') {
+        keys.push({
+          id: customKeys[0],
+          type: 'custom'
+        }, {
+          id: 0,
+          type: 'number'
+        }, {
+          id: 'delete',
+          type: 'delete'
+        });
+      } else {
+        keys.push({
+          id: 0,
+          type: 'number'
+        }, {
+          id: customKeys[0],
+          type: 'custom'
+        });
+      }
+    } else if (customKeys.length === 2) {
+      keys.push({
+        id: customKeys[0],
+        type: 'custom'
+      }, {
+        id: 0,
+        type: 'number'
+      }, {
+        id: customKeys[1],
+        type: 'custom'
+      });
+    }
+
+    return keys;
+  };
+
+  useEffect(function () {
+    if (props.type === 'rightColumn' || props.title !== '') {
+      setKeysList(genCustomKeys());
+    } else {
+      setKeysList(defaultKey());
+    }
+  }, []);
+
+  var onTouchstart = function onTouchstart(item, event) {
+    event.stopPropagation();
+    setClickKeyIndex(item.id);
+
+    if (item.type === 'number' || item.type === 'custom') {
+      onChange && onChange(item.id);
+    }
+
+    if (item.type === 'lock') {
+      onClose && onClose();
+    }
+
+    if (item.type === 'delete') {
+      onDelete && onDelete();
+    }
+  };
+
+  var onTouchMove = function onTouchMove(event) {
+    event.stopPropagation();
+  };
+
+  var onTouchEnd = function onTouchEnd(event) {
+    event.preventDefault();
+    setClickKeyIndex(undefined);
+  };
+
+  return React__default.createElement("div", null, React__default.createElement(Popup, {
+    visible: show,
+    position: "bottom",
+    popClass: popClass,
+    onClickOverlay: onClose,
+    onClickCloseIcon: onClose,
+    overlayStyle: {
+      backgroundColor: 'rgba(0, 0, 0, 0)'
+    }
+  }, React__default.createElement("div", {
+    className: "".concat(b(), " ").concat(className),
+    style: _objectSpread({}, style)
+  }, title ? React__default.createElement("div", {
+    className: b('header')
+  }, React__default.createElement("h3", {
+    className: b('header__tit')
+  }, title), type === 'default' ? React__default.createElement("span", {
+    className: b('header__close'),
+    onClick: onClose
+  }, locale.done) : null) : null, React__default.createElement("div", {
+    className: b('body')
+  }, React__default.createElement("div", {
+    className: b('body__keys')
+  }, keysList === null || keysList === void 0 ? void 0 : keysList.map(function (item, index) {
+    return React__default.createElement("div", {
+      key: index,
+      className: classNames({
+        'key-board-wrapper': true,
+        'key-board-wrapper-large': item.id === 0 && type === 'rightColumn' && Array.isArray(customKey) && customKey.length === 1
+      })
+    }, React__default.createElement("div", {
+      className: classNames({
+        key: true,
+        active: item.id === clickKeyIndex,
+        lock: item.type === 'lock',
+        "delete": item.type === 'delete'
+      }),
+      onTouchStart: function onTouchStart(event) {
+        return onTouchstart(item, event);
+      },
+      onTouchMove: onTouchMove,
+      onTouchEnd: onTouchEnd
+    }, item.type === 'number' || item.type === 'custom' ? React__default.createElement("div", null, item.id) : null, item.type === 'lock' ? React__default.createElement("img", {
+      src: "https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png",
+      alt: ""
+    }) : null, item.type === 'delete' ? React__default.createElement("img", {
+      src: "https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png",
+      alt: ""
+    }) : null));
+  })), type === 'rightColumn' ? React__default.createElement("div", {
+    className: b('sidebar')
+  }, React__default.createElement("div", {
+    className: "key-board-wrapper"
+  }, React__default.createElement("div", {
+    className: classNames({
+      key: true,
+      active: clickKeyIndex === 'delete'
+    }),
+    onTouchStart: function onTouchStart(event) {
+      return onTouchstart({
+        id: 'delete',
+        type: 'delete'
+      }, event);
+    },
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd
+  }, React__default.createElement("img", {
+    src: "https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png",
+    alt: ""
+  }))), React__default.createElement("div", {
+    className: "key-board-wrapper key-board-finish",
+    onClick: onClose
+  }, React__default.createElement("div", {
+    className: classNames({
+      key: true,
+      finish: true,
+      activeFinsh: clickKeyIndex === 'finish'
+    })
+  }, confirmText || locale.done))) : null))));
+};
+
+NumberKeyboard.defaultProps = defaultProps;
+NumberKeyboard.displayName = 'NutNumberKeyboard';
+export { NumberKeyboard as default };