@pisell/materials 3.0.48 → 3.0.49

package/lib/components/virtual-keyboard/BaseNumberKeyboard/index.js

@@ -0,0 +1,245 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/virtual-keyboard/BaseNumberKeyboard/index.tsx
+var BaseNumberKeyboard_exports = {};
+__export(BaseNumberKeyboard_exports, {
+  default: () => BaseNumberKeyboard_default
+});
+module.exports = __toCommonJS(BaseNumberKeyboard_exports);
+var import_react = __toESM(require("react"));
+var import_Delete = __toESM(require("@pisell/icon/es/Delete"));
+var import_ahooks = require("ahooks");
+var import_utils = require("@pisell/utils");
+var import_Presets = __toESM(require("./Presets"));
+var import_Keyboard = __toESM(require("../Keyboard"));
+var import_VirtualKeyInput = __toESM(require("../VirtualKeyInput"));
+var import_VirtualInput = __toESM(require("../VirtualInput"));
+var import_index = require("./index.less");
+var items = [
+  {
+    value: 1,
+    label: "1",
+    disabled: false,
+    type: "text"
+  },
+  {
+    value: 2,
+    label: "2",
+    disabled: false,
+    type: "text"
+  },
+  {
+    value: 3,
+    label: "3",
+    disabled: false,
+    type: "text"
+  },
+  {
+    value: 4,
+    label: "4",
+    disabled: false,
+    type: "text"
+  },
+  {
+    value: 5,
+    label: "5",
+    disabled: false,
+    type: "text"
+  },
+  {
+    value: 6,
+    label: "6",
+    disabled: false,
+    type: "text"
+  },
+  {
+    value: 7,
+    label: "7",
+    disabled: false,
+    type: "text"
+  },
+  {
+    value: 8,
+    label: "8",
+    disabled: false,
+    type: "text"
+  },
+  {
+    value: 9,
+    label: "9",
+    disabled: false,
+    type: "text"
+  },
+  {
+    value: "0",
+    label: "0",
+    disabled: false,
+    type: "text"
+  },
+  {
+    value: "00",
+    label: "00",
+    disabled: false,
+    type: "text"
+  },
+  {
+    value: ".",
+    label: ".",
+    disabled: false,
+    type: "text"
+  }
+];
+var BaseNumberKeyboard = (props) => {
+  const {
+    onChange,
+    placeholder,
+    format,
+    defaultValue = "",
+    doneText,
+    resetText,
+    max,
+    min,
+    onEnter,
+    presets,
+    defaultSelect
+  } = props;
+  const [value, setValue] = (0, import_ahooks.useControllableValue)(props, {
+    defaultValue
+  });
+  const [select, setSelect] = (0, import_react.useState)(defaultSelect ?? false);
+  (0, import_react.useEffect)(() => {
+    document.body.id = "body";
+  }, []);
+  const rightItems = (0, import_react.useMemo)(() => {
+    return [
+      {
+        value: "delete",
+        label: /* @__PURE__ */ import_react.default.createElement(import_Delete.default, { className: "virtual-keyboard-input-delete-icon" }),
+        disabled: false,
+        type: "text"
+      },
+      {
+        value: "reset",
+        label: resetText || "Reset",
+        disabled: false,
+        type: "text",
+        style: {
+          fontSize: "18px",
+          color: "#D92D20"
+        }
+      },
+      {
+        value: "done",
+        label: doneText || "Done",
+        disabled: false,
+        type: "primary",
+        size: 2,
+        style: {
+          fontSize: "18px",
+          background: "var(--Green-light-600, #4CA30D)",
+          color: "#fff"
+        }
+      }
+    ];
+  }, [doneText, resetText]);
+  const checkValue = (val) => {
+    if ((0, import_utils.isNumber)(max) && Number(val) > max) {
+      const newValue = Math.min(Number(val), Number(max));
+      setValue(`${newValue}`);
+      return { message: "" };
+    }
+    if ((0, import_utils.isNumber)(min) && Number(val) < min) {
+      const newValue = Math.max(Number(val), Number(min));
+      setValue(`${newValue}`);
+      return { message: "" };
+    }
+  };
+  const handleChangeValue = (val) => {
+    const detail = checkValue(val);
+    if (detail)
+      return;
+    setValue(val);
+  };
+  const actions = {
+    ".": (val) => {
+      if (value.includes("."))
+        return;
+      actions.default(val);
+    },
+    delete: () => {
+      handleChangeValue(select ? "" : `${value || ""}`.slice(0, -1));
+    },
+    reset: () => {
+      handleChangeValue(`${defaultValue || ""}` || "");
+    },
+    done: () => {
+      onEnter == null ? void 0 : onEnter(value);
+    },
+    ok: () => {
+      onEnter == null ? void 0 : onEnter(value);
+    },
+    default: (val) => {
+      handleChangeValue(select ? `${val}` : `${value}${val}`);
+    }
+  };
+  const handleKeyboardChange = (0, import_ahooks.useMemoizedFn)((val) => {
+    return (actions[val] || actions.default)(val);
+  });
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-virtual-keyboard-base" }, /* @__PURE__ */ import_react.default.createElement(
+    import_VirtualKeyInput.default,
+    {
+      value,
+      onChange: (e) => handleChangeValue(e.target.value),
+      renderInput: (props2) => {
+        if ((0, import_utils.isUndefined)(props2.value) || props2.value === "") {
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_VirtualInput.default,
+            {
+              autoFocus: true,
+              placeholder,
+              value: props2.value
+            }
+          );
+        }
+        return (format == null ? void 0 : format(props2.value)) || props2.value;
+      },
+      showDelete: false,
+      onValueSelect: setSelect,
+      defaultSelect
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(import_Presets.default, { presets, onChange: handleChangeValue }), /* @__PURE__ */ import_react.default.createElement(
+    import_Keyboard.default,
+    {
+      items,
+      rightItems,
+      onChange: handleKeyboardChange
+    }
+  ));
+};
+var BaseNumberKeyboard_default = BaseNumberKeyboard;

package/lib/components/virtual-keyboard/BaseNumberKeyboard/index.less

@@ -0,0 +1,9 @@
+.pisell-virtual-keyboard-base {
+  width: 340px;
+  .virtual-keyboard-input-wrap {
+    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+  }
+  .virtual-keyboard-wrap .virtual-keyboard-content .virtual-keyboard-item {
+    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+  }
+}

package/lib/components/virtual-keyboard/Keyboard/index.d.ts

@@ -1,18 +1,20 @@
-import React from "react";
-import "./index.less";
+import React from 'react';
+import './index.less';
 export declare type ItemValue = string | number;
 export interface Item {
     value: ItemValue;
-    label: string;
+    label: React.ReactNode;
     disabled: boolean;
-    type: "text" | "primary";
+    type: 'text' | 'primary';
     style?: React.CSSProperties;
+    size?: number;
 }
 export interface KeyboardProps {
     className?: string;
     style?: React.CSSProperties;
     onChange?: (value?: ItemValue) => void;
     items?: Item[];
+    rightItems?: Item[];
 }
-declare const Keyboard: (props: KeyboardProps) => React.JSX.Element;
-export default Keyboard;
+declare const _default: React.MemoExoticComponent<(props: KeyboardProps) => React.JSX.Element>;
+export default _default;

package/lib/components/virtual-keyboard/Keyboard/index.js

@@ -38,8 +38,11 @@ var import_index = require("./index.less");
 var import_classnames = __toESM(require("classnames"));
 var import_ahooks = require("ahooks");
 var list = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "ok"];
+var defaultArr = [];
 var Keyboard = (props) => {
-  const { items = [], className, style, onChange } = props;
+  const { items = defaultArr, className, style, onChange, rightItems } = props;
+  const contentRef = (0, import_react.useRef)(null);
+  const size = (0, import_ahooks.useSize)(contentRef);
   (0, import_ahooks.useEventListener)("keydown", (ev) => {
     console.log("ev", ev);
     let key = ev.key;
@@ -50,13 +53,16 @@ var Keyboard = (props) => {
       onChange == null ? void 0 : onChange(key);
     }
   });
+  const getHeight = (0, import_ahooks.useMemoizedFn)((itemSize = 1) => {
+    return ((size == null ? void 0 : size.width) || 0) / 4 * itemSize + (itemSize - 1) * 7;
+  });
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: (0, import_classnames.default)("virtual-keyboard-wrap", className),
       style
     },
-    items.map((item) => {
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("virtual-keyboard-content"), ref: contentRef }, items.map((item) => {
       var _a;
       return /* @__PURE__ */ import_react.default.createElement("div", { className: "virtual-keyboard-item", style: item.style }, /* @__PURE__ */ import_react.default.createElement(
         import_antd.Button,
@@ -75,7 +81,48 @@ var Keyboard = (props) => {
         },
         item.label
       ));
-    })
+    })),
+    rightItems && /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(
+          "virtual-keyboard-content",
+          "virtual-keyboard-right"
+        ),
+        style: { flex: `0 0 calc((100% - 21px) / 4 * 1)` }
+      },
+      rightItems == null ? void 0 : rightItems.map((item) => {
+        var _a, _b;
+        return /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: "virtual-keyboard-item",
+            style: {
+              ...item.style || {},
+              height: getHeight(item.size)
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_antd.Button,
+            {
+              id: `virtual-keyboard-${item.value}`,
+              key: item.value,
+              type: item.type,
+              className: "virtual-keyboard-item-button",
+              style: {
+                fontSize: ((_a = item.style) == null ? void 0 : _a.fontSize) || 25,
+                color: item.type === "primary" ? "#fff" : ((_b = item.style) == null ? void 0 : _b.color) || void 0
+              },
+              disabled: item.disabled,
+              onClick: (e) => {
+                onChange == null ? void 0 : onChange(item.value);
+              }
+            },
+            item.label
+          )
+        );
+      })
+    )
   );
 };
-var Keyboard_default = Keyboard;
+var Keyboard_default = import_react.default.memo(Keyboard);

package/lib/components/virtual-keyboard/Keyboard/index.less

@@ -1,32 +1,43 @@
 .virtual-keyboard-wrap {
-  width: 100%;
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
   gap: 7px;
+  .virtual-keyboard-content {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 7px;
 
-  .virtual-keyboard-item {
-    border-radius: 5px;
-    background: var(--Base-White, #FFF);
-    box-shadow: 0px 1px 0px 0px #898A8D;
-    overflow: hidden;
-    width: calc((100% - 14px) / 3 * 1);
-    padding-top: 25%;
-    position: relative;
+    .virtual-keyboard-item {
+      border-radius: 5px;
+      background: var(--Base-White, #fff);
+      box-shadow: 0px 1px 0px 0px #898a8d;
+      overflow: hidden;
+      width: calc((100% - 14px) / 3 * 1);
+      padding-top: 25%;
+      position: relative;
 
-    .virtual-keyboard-item-button {
-      position: absolute;
-      left: 0;
-      top: 0;
+      .virtual-keyboard-item-button {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 5px;
+        color: var(--Base-Black, #000);
+        font-size: 25px;
+        font-style: normal;
+        font-weight: 400;
+        box-shadow: none;
+      }
+    }
+  }
+  .virtual-keyboard-right {
+    flex-direction: column;
+    justify-content: start;
+    .virtual-keyboard-item{
       width: 100%;
-      height: 100%;
-      border-radius: 5px;
-      color: var(--Base-Black, #000);
-      font-size: 25px;
-      font-style: normal;
-      font-weight: 400;
-      box-shadow: none;
     }
   }
-}
+}

package/lib/components/virtual-keyboard/Number/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface NumberProps {
+    max?: number;
+    min?: number;
+    doneText?: string;
+    resetText: string;
+    defaultValue?: string | number;
+    placeholder?: string;
+    value?: string | number;
+    onChange?: (val: string | number) => void;
+    onEnter?: (val: string | number) => void;
+}
+declare const Number: (props: NumberProps) => React.JSX.Element;
+export default Number;

package/lib/components/virtual-keyboard/Number/index.js

@@ -0,0 +1,65 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/virtual-keyboard/Number/index.tsx
+var Number_exports = {};
+__export(Number_exports, {
+  default: () => Number_default
+});
+module.exports = __toCommonJS(Number_exports);
+var import_react = __toESM(require("react"));
+var import_ahooks = require("ahooks");
+var import_BaseNumberKeyboard = __toESM(require("../BaseNumberKeyboard"));
+var Number = (props) => {
+  const {
+    min,
+    max,
+    doneText,
+    resetText,
+    defaultValue,
+    placeholder,
+    onEnter
+  } = props;
+  const [value, setValue] = (0, import_ahooks.useControllableValue)(props, {
+    defaultValue: defaultValue || ""
+  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_BaseNumberKeyboard.default,
+    {
+      max,
+      min,
+      value,
+      onChange: setValue,
+      placeholder,
+      doneText,
+      resetText,
+      onEnter
+    }
+  );
+};
+var Number_default = Number;

package/lib/components/virtual-keyboard/VirtualInput/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.less';
+export interface VirtualInputProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    autoFocus?: boolean;
+    placeholder?: string;
+}
+declare const VirtualInput: (props: VirtualInputProps) => React.JSX.Element;
+export default VirtualInput;

package/lib/components/virtual-keyboard/VirtualInput/index.js

@@ -0,0 +1,63 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/virtual-keyboard/VirtualInput/index.tsx
+var VirtualInput_exports = {};
+__export(VirtualInput_exports, {
+  default: () => VirtualInput_default
+});
+module.exports = __toCommonJS(VirtualInput_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_utils = require("@pisell/utils");
+var import_index = require("./index.less");
+var VirtualInput = (props) => {
+  const { value, autoFocus, placeholder = "" } = props;
+  const [isFocus, setIsFocus] = (0, import_react.useState)(autoFocus);
+  const onFocus = () => {
+    setIsFocus(true);
+  };
+  const onBlur = () => {
+    setIsFocus(false);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      onFocus,
+      onBlur,
+      tabIndex: 0,
+      className: (0, import_classnames.default)("pisell-virtual-input-value", {
+        "pisell-virtual-input-value-focus": isFocus
+      })
+    },
+    value,
+    ((0, import_utils.isUndefined)(value) || value === "") && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-virtual-input-placeholder" }, placeholder),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-virtual-input-caret-container" }, isFocus && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-virtual-input-caret" }))
+  );
+};
+var VirtualInput_default = VirtualInput;

package/lib/components/virtual-keyboard/VirtualInput/index.less

@@ -0,0 +1,46 @@
+.pisell-virtual-input-value {
+  width: 100%;
+  min-width: 80px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  .pisell-virtual-input-caret-container {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    .pisell-virtual-input-caret {
+      height: 40px;
+      width: 4px;
+      position: relative;
+      background: var(--Blue-600, #1570EF);
+    }
+  }
+  .pisell-virtual-input-placeholder {
+    color: var(--Gray-300, #D0D5DD);
+  }
+}
+
+.pisell-virtual-input-value-focus {
+  .pisell-virtual-input-caret {
+    display: block;
+    animation-name: pisell-caret-blink;
+    animation-duration: 1s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+  }
+}
+
+@keyframes pisell-caret-blink {
+  from {
+    opacity: 1;
+  }
+  60% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/lib/components/virtual-keyboard/VirtualKeyInput/index.d.ts

@@ -1,9 +1,12 @@
-import React from "react";
-import { InputProps } from "antd";
-import "./index.less";
+import React from 'react';
+import { InputProps } from 'antd';
+import './index.less';
 export interface VirtualKeyInputProps extends InputProps {
     previewValue?: string;
     renderInput?: (props: any) => any;
+    showDelete?: boolean;
+    onValueSelect?: (selected: boolean) => void;
+    defaultSelect?: boolean;
 }
 declare const VirtualKeyInput: (props: VirtualKeyInputProps) => React.JSX.Element;
 export default VirtualKeyInput;