@pisell/materials 6.3.16 → 6.3.18

package/es/components/productCard/components/Time/components/SelectHolderModal/index.js

@@ -143,7 +143,9 @@ var SelectHolderModal = function SelectHolderModal(props) {
     size: "large",
     onClick: onClose,
     className: "select-holder-modal-cancel-button"
-  }, locales.getText('pisell2.product.card.add.holder.modal.cancel'))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+  }, locales.getText('pisell2.product.card.add.holder.modal.cancel'))), /*#__PURE__*/React.createElement("div", {
+    className: "select-holder-modal-footer-right"
+  }, /*#__PURE__*/React.createElement(Button, {
     size: "large",
     onClick: handleClear,
     className: "select-holder-modal-clear-button"

package/es/components/productCard/components/Time/components/SelectHolderModal/index.less

@@ -35,5 +35,8 @@
     .select-holder-modal-clear-button {
       width: 132px;
     }
+    .select-holder-modal-footer-right {
+      display: flex;
+    }
   }
 }

package/es/components/productCard/components/Time/components/SelectResource/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './index.less';
 interface ResourceItem {
     id: string | number;

package/es/components/productCard/index.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { ProductCardTypes } from './types';
 import './index.less';
-declare const ProductCard: React.FC<ProductCardTypes>;
+declare const ProductCard: React.FC<ProductCardTypes> & {
+    V2: any;
+};
 export default ProductCard;

package/es/components/productCard/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["dataSource", "isShowImage", "isShowHolder", "isShowNote", "isShowDelete", "isShowPackageNote", "isShowEditProduct", "onEditProduct", "onAction", "onDelete", "onNote", "onLike", "onCard", "onChangeResource", "onChangeHolder"];
+var _excluded = ["dataSource", "isShowImage", "isShowHolder", "isShowNote", "isShowDelete", "isShowAmountFooter", "isShowPackageNote", "isShowEditProduct", "scenario", "onEditProduct", "onAction", "onDelete", "onNote", "onLike", "onCard", "onChangeResource", "onChangeHolder"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -27,6 +27,7 @@ import { defaultValue } from "./status";
 import useEngineContext from "../../hooks/useEngineContext";
 import Warning from "./components/Warning";
 import "./index.less";
+import CartSkuCard from "./cartSkuCard";
 var ProductCard = function ProductCard(props) {
   var _utils$storage, _dataSource$items;
   var context = useEngineContext();
@@ -41,10 +42,13 @@ var ProductCard = function ProductCard(props) {
     isShowNote = _props$isShowNote === void 0 ? defaultValue.isShowNote : _props$isShowNote,
     _props$isShowDelete = props.isShowDelete,
     isShowDelete = _props$isShowDelete === void 0 ? defaultValue.isShowDelete : _props$isShowDelete,
+    _props$isShowAmountFo = props.isShowAmountFooter,
+    isShowAmountFooter = _props$isShowAmountFo === void 0 ? defaultValue.isShowAmountFooter : _props$isShowAmountFo,
     _props$isShowPackageN = props.isShowPackageNote,
     isShowPackageNote = _props$isShowPackageN === void 0 ? defaultValue.isShowPackageNote : _props$isShowPackageN,
     _props$isShowEditProd = props.isShowEditProduct,
     isShowEditProduct = _props$isShowEditProd === void 0 ? defaultValue.isShowEditProduct : _props$isShowEditProd,
+    scenario = props.scenario,
     _onEditProduct = props.onEditProduct,
     _onAction = props.onAction,
     _onDelete = props.onDelete,
@@ -101,7 +105,7 @@ var ProductCard = function ProductCard(props) {
       return _onDelete === null || _onDelete === void 0 ? void 0 : _onDelete(dataSource);
     }
   })), /*#__PURE__*/React.createElement(CardPro, {
-    className: classNames('pisell-lowcode-product-card', _defineProperty(_defineProperty({}, 'pisell-lowcode-product-card-image', !showImage), 'pisell-lowcode-normal-product-card', !showImage && isNormalProduct)),
+    className: classNames('pisell-lowcode-product-card', _defineProperty(_defineProperty(_defineProperty({}, 'pisell-lowcode-product-card-image', !showImage && scenario !== 'booking2'), 'pisell-lowcode-normal-product-card', !showImage && isNormalProduct && scenario !== 'booking2'), 'pisell-lowcode-product-card-image-booking2', scenario === 'booking2')),
     key: _id
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     onClick: function onClick(e) {
@@ -173,4 +177,5 @@ var ProductCard = function ProductCard(props) {
     }
   }))));
 };
+ProductCard.V2 = CartSkuCard;
 export default ProductCard;

package/es/components/productCard/index.less

@@ -47,6 +47,12 @@
   }
 }
 
+.pisell-lowcode-product-card-image-booking2 {
+  .pisell-cardPro-content {
+    padding: 4px;
+  }
+}
+
 .pisell-lowcode-product-card-wrap {
   position: relative;
 }

package/es/components/productCard/locales.js

@@ -31,6 +31,7 @@ export default {
     },
     'pisell2.product.card.add.holder.modal.title.1': "Please Select",
     'pisell2.product.card.hour.minute': function pisell2ProductCardHourMinute(hour, minute) {
+      if (hour <= 0 && minute <= 0) return "".concat(0, "min");
       return "".concat(hour > 0 ? "".concat(hour, "h") : '').concat(hour > 0 && minute > 0 ? ' ' : '').concat(minute > 0 ? "".concat(minute, "min") : '');
     },
     'pisell2.product.card.sales': 'Sales',
@@ -72,6 +73,7 @@ export default {
     },
     'pisell2.product.card.add.holder.modal.title.1': "\u8BF7\u9009\u62E9",
     'pisell2.product.card.hour.minute': function pisell2ProductCardHourMinute(hour, minute) {
+      if (hour <= 0 && minute <= 0) return "".concat(0, "\u5206\u949F");
       return "".concat(hour > 0 ? "".concat(hour, "\u5C0F\u65F6") : '').concat(minute > 0 ? "".concat(minute, "\u5206\u949F") : '');
     },
     'pisell2.product.card.sales': '销售',
@@ -113,6 +115,7 @@ export default {
     },
     'pisell2.product.card.add.holder.modal.title.1': "\u8ACB\u9078\u64C7",
     'pisell2.product.card.hour.minute': function pisell2ProductCardHourMinute(hour, minute) {
+      if (hour <= 0 && minute <= 0) return "".concat(0, "\u5206\u9418");
       return "".concat(hour > 0 ? "".concat(hour, "\u5C0F\u6642") : '').concat(minute > 0 ? "".concat(minute, "\u5206\u9418") : '');
     },
     'pisell2.product.card.sales': '銷售',

package/es/components/productCard/status.js

@@ -61,6 +61,7 @@ export var defaultValue = {
   isShowHolder: true,
   isShowNote: true,
   isShowDelete: true,
+  isShowAmountFooter: true,
   isShowPackageNote: true,
   isShowEditProduct: false,
   locale: 'en-US',

package/es/components/productCard/types.d.ts

@@ -67,6 +67,7 @@ export declare type ProductCardTypes = {
     isShowNote?: boolean;
     isShowPackageNote?: boolean;
     isShowDelete?: boolean;
+    isShowAmountFooter?: boolean;
     disabledEdit?: boolean;
     locale?: string;
     symbol?: string;

package/es/components/productCard/utils.js

@@ -97,6 +97,13 @@ export var getServiceTime = function getServiceTime(item, currentDate) {
         // 中文：年月日 开始时间 - 年月日 结束时间
         dateTime = "".concat(startDate.format(dateFormat), " ").concat(startTime, " ~ ").concat(endDate.format(dateFormat), " ").concat(endTime);
       }
+      if (durationType === 'days') {
+        dateTime = formatMultiDayDate({
+          start_date: startDate.format('YYYY-MM-DD'),
+          end_date: endDate.format('YYYY-MM-DD'),
+          locale: locale
+        });
+      }
     }
     var startDateTime = "".concat(startDate.format('YYYY-MM-DD'), " ").concat(startTime);
     var endDateTime = "".concat(endDate.format('YYYY-MM-DD'), " ").concat(endTime);
@@ -108,7 +115,7 @@ export var getServiceTime = function getServiceTime(item, currentDate) {
       var minutes = _duration % 60;
       durationText = locales.getText('pisell2.product.card.hour.minute')(hours, minutes);
     } else if (durationType === 'days') {
-      durationText = locales.getText('pisell2.product.card.day')(_duration);
+      durationText = "".concat(_duration).concat(locales.getText('pisell2.product.card.day')(_duration));
     } else {
       durationText = "".concat(_duration);
     }

package/es/components/qrcode/index.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const QRCode: (props: any) => JSX.Element;
 export default QRCode;

package/es/components/select-time/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { VirtualKeyboardTimeProps } from "../virtual-keyboard/Time";
 import { PopoverProps, TimePickerProps } from "antd";
 import "./index.less";

package/es/components/sortableList/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Props } from "../DragSortList";
+export interface SortableListProps<T> {
+    dataSource: Props<T>["list"];
+    onChange: Props<T>["onChange"];
+    rowKey: Props<T>["rowKey"];
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    activationConstraint?: Props<T>["activationConstraint"];
+}
+declare const SortableList: React.FC<SortableListProps<any>>;
+export default SortableList;

package/es/components/table/Actions/component/ExportImport/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ExportImportType } from '../../../types';
 import './index.less';
 declare type ExportImportProps = {

package/es/components/table/BasicTable/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TableProps } from 'antd';
 declare const BasicTable: (props: TableProps<any>) => JSX.Element;
 export default BasicTable;

package/es/components/table/Gallery/components/GalleryItem/components/RenderFields/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import "./index.less";
 declare type RenderFieldsProps = {
     fields: string[];

package/es/components/table/Table/AddFieldModal/index.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
+import "./index.less";
 declare const AddFieldModal: React.FC;
 export default AddFieldModal;

package/es/components/table/Table/AddFieldModal/index.js

@@ -18,7 +18,7 @@ import IconFont from "../../../iconfont";
 import { Form, Input, Popover, message } from "antd";
 import React, { useMemo, useState } from "react";
 import SelectField from "../SelectField";
-import styles from "./index.less";
+import "./index.less";
 import { useSharedState } from "../../../../hooks";
 import { Context } from "../../model";
 var AddFieldModal = function AddFieldModal() {
@@ -75,7 +75,7 @@ var AddFieldModal = function AddFieldModal() {
       },
       onFinish: addField
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles["add-field-modal"]
+      className: "pisell-lowcode-add-field-modal"
     }, /*#__PURE__*/React.createElement(Form.Item, {
       label: "Field Name",
       name: "field_name",
@@ -85,25 +85,25 @@ var AddFieldModal = function AddFieldModal() {
       }]
     }, /*#__PURE__*/React.createElement(Input, {
       placeholder: "Field name (optional)",
-      className: styles["header-search"]
+      className: "pisell-lowcode-header-search"
     })), /*#__PURE__*/React.createElement(SelectField, null), /*#__PURE__*/React.createElement("div", {
-      className: styles["modal-footer"]
+      className: "pisell-lowcode-modal-footer"
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles["add-describe"]
+      className: "pisell-lowcode-add-describe"
     }, /*#__PURE__*/React.createElement(IconFont, {
       type: "pi-Plus",
-      className: styles["icon"]
+      className: "pisell-lowcode-icon"
     }), /*#__PURE__*/React.createElement("span", {
-      className: styles["label"]
+      className: "pisell-lowcode-label"
     }, "Add description")), /*#__PURE__*/React.createElement("div", {
-      className: styles["btns"]
+      className: "pisell-lowcode-btns"
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles["cancel"],
+      className: "pisell-lowcode-cancel",
       onClick: function onClick() {
         onCloseModal();
       }
     }, "Cancel"), /*#__PURE__*/React.createElement("div", {
-      className: styles["submit"],
+      className: "pisell-lowcode-submit",
       onClick: function onClick() {
         form.submit();
       }
@@ -120,7 +120,7 @@ var AddFieldModal = function AddFieldModal() {
       padding: 0
     },
     trigger: "click",
-    overlayClassName: styles["popover-wrap"],
+    overlayClassName: "pisell-lowcode-popover-wrap",
     onOpenChange: function onOpenChange(e) {
       if (!e) {
         onCloseModal();
@@ -130,10 +130,10 @@ var AddFieldModal = function AddFieldModal() {
     },
     open: openModal
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles["add-field-btn"]
+    className: "pisell-lowcode-add-field-btn"
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "pi-a-Property3Add",
-    className: styles["add-field-icon"]
+    className: "pisell-lowcode-add-field-icon"
   })));
 };
 export default AddFieldModal;

package/es/components/table/Table/AddFieldModal/index.less

@@ -1,4 +1,4 @@
-.add-field-btn {
+.pisell-lowcode-add-field-btn {
   position: absolute;
   right: 0;
   top: 0;
@@ -11,10 +11,10 @@
   box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
   cursor: pointer;
 
-  .add-field-icon {}
+  .pisell-lowcode-add-field-icon {}
 }
 
-.popover-wrap {
+.pisell-lowcode-popover-wrap {
   :global {
     .pisell-lowcode-popover-arrow {
       display: none;
@@ -22,11 +22,11 @@
   }
 }
 
-.add-field-modal {
+.pisell-lowcode-add-field-modal {
   width: 360px;
   padding: 16px 16px 0 16px;
 
-  .modal-footer {
+  .pisell-lowcode-modal-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -35,13 +35,13 @@
     padding: 0 16px;
     border-top: 1px solid #F1F1F1;
 
-    .add-describe {
+    .pisell-lowcode-add-describe {
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
 
-      .icon {
+      .pisell-lowcode-icon {
         width: 24px;
         height: 24px;
         display: flex;
@@ -51,27 +51,27 @@
         color: #1B1B1B;
       }
 
-      .label {
+      .pisell-lowcode-label {
         margin-left: 2px;
         font-size: 14px;
         color: #777777;
       }
     }
 
-    .btns {
+    .pisell-lowcode-btns {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 16px;
 
-      .cancel {
+      .pisell-lowcode-cancel {
         cursor: pointer;
         font-weight: 400;
         font-size: 14px;
         color: #1B1B1B;
       }
 
-      .submit {
+      .pisell-lowcode-submit {
         cursor: pointer;
         font-weight: 400;
         font-size: 14px;

package/es/components/table/Table/fields/date/Show/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FieldPropsType } from "../../types";
 declare const Show: (props: FieldPropsType) => JSX.Element;
 export default Show;

package/es/components/table/Table/fields/link/Show/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FieldPropsType } from "../../types";
 declare const Show: (props: FieldPropsType) => JSX.Element;
 export default Show;

package/es/components/table/Table/tableConfig/SortRow/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import "./index.less";
 declare const SortRow: ({ children, rowKey, onSortChange }: any) => JSX.Element;
 export default SortRow;

package/es/components/table/Table/utils.d.ts

@@ -155,7 +155,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("filters" | "filter_setting" | "view_mode" | "group_by" | "column_setting" | "order_by" | "gallery_setting")[];
+}) => ("filters" | "filter_setting" | "group_by" | "column_setting" | "order_by" | "view_mode" | "gallery_setting")[];
 export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
 export declare const stringify: (obj: Record<string, any>) => string;
 export {};

package/es/components/table/hooks/useTransColumns.d.ts

@@ -0,0 +1,14 @@
+import { FormInstance } from "antd/es/form";
+declare type UseTransColumnsProps = {
+    columns: Record<string, any>[];
+    form: FormInstance;
+    localPagination: boolean;
+    handleSave?: (row: Record<string, any>) => void;
+    handleResize?: (index: number, record: Record<string, any>) => (e: any, p2: any) => void;
+    dragSort: boolean;
+    bordered: boolean;
+};
+declare const useTransColumns: (params: UseTransColumnsProps) => {
+    columns: any[];
+};
+export default useTransColumns;

package/es/components/virtual-keyboard/BaseNumberKeyboard/Presets.d.ts

@@ -1,7 +1,11 @@
-import "./Presets.less";
+import React from 'react';
+import './Presets.less';
 export declare type PresetsItem = {
     label: string;
     value: number | string;
+    style?: React.CSSProperties;
+    onClick?: (item: PresetsItem, _next: () => void) => void;
+    render?: (item: PresetsItem) => React.ReactNode;
 };
 export interface PresetsProps {
     presets?: PresetsItem[];

package/es/components/virtual-keyboard/BaseNumberKeyboard/Presets.js

@@ -3,20 +3,34 @@ import "./Presets.less";
 var Presets = function Presets(props) {
   var presets = props.presets,
     onChange = props.onChange;
+  var handleItemClick = function handleItemClick(item) {
+    if (item.onClick) {
+      var _next2 = function _next2() {
+        return onChange("".concat(item.value));
+      };
+      item.onClick(item, _next2);
+    } else {
+      onChange("".concat(item.value));
+    }
+  };
   return useMemo(function () {
     if (!(presets !== null && presets !== void 0 && presets.length)) {
       return null;
     }
     return /*#__PURE__*/React.createElement("div", {
       className: "pisell-virtual-keyboard-preset"
-    }, presets.map(function (item) {
-      return /*#__PURE__*/React.createElement("div", {
+    }, presets.map(function (item, index) {
+      var _item$render;
+      var itemProps = {
+        key: index,
+        className: 'pisell-virtual-keyboard-preset-item',
+        style: item.style,
         onClick: function onClick() {
-          return onChange("".concat(item.value));
-        },
-        className: "pisell-virtual-keyboard-preset-item"
-      }, item.label);
+          return handleItemClick(item);
+        }
+      };
+      return /*#__PURE__*/React.createElement("div", itemProps, ((_item$render = item.render) === null || _item$render === void 0 ? void 0 : _item$render.call(item, item)) || item.label);
     }));
-  }, [presets]);
+  }, [presets, onChange]);
 };
 export default Presets;

package/es/components/virtual-keyboard/BaseNumberKeyboard/Presets.less

@@ -1,18 +1,22 @@
 .pisell-virtual-keyboard-preset {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
   gap: 7px;
-  flex-wrap: wrap;
   margin-bottom: 8px;
+
   .pisell-virtual-keyboard-preset-item {
     display: flex;
-    flex: 1;
     padding: 12px 20px;
     align-items: center;
     justify-content: center;
-    height: 48px;
+    height: 40px;
     border-radius: 8px;
-    border: 1px solid var(--Gray-300, #D0D5DD);
+    border: 1px solid var(--Gray-300, #E9D7FE);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
     background: var(--Primary-25, #FCFAFF);
+    font-weight: 600;
+    color: #6941C6;
+    cursor: pointer;
+    position: relative;
   }
 }

package/es/components/virtual-keyboard/BaseNumberKeyboard/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { PresetsProps } from './Presets';
+import { KeyboardProps } from '../Keyboard';
 import { RightItemsStyleProps } from '../Amount';
 import './index.less';
 export interface BaseNumberKeyboardProps {
@@ -16,6 +17,9 @@ export interface BaseNumberKeyboardProps {
     presets?: PresetsProps['presets'];
     defaultSelect?: boolean;
     rightItemsStyle?: RightItemsStyleProps;
+    customDisplay?: React.ReactNode | ((props: any) => React.ReactNode);
+    keyboardProps?: KeyboardProps;
+    style?: React.CSSProperties;
 }
 declare const BaseNumberKeyboard: (props: BaseNumberKeyboardProps) => JSX.Element;
 export default BaseNumberKeyboard;

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

@@ -1,4 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -93,7 +94,9 @@ var BaseNumberKeyboard = function BaseNumberKeyboard(props) {
     onEnter = props.onEnter,
     presets = props.presets,
     defaultSelect = props.defaultSelect,
-    rightItemsStyle = props.rightItemsStyle;
+    rightItemsStyle = props.rightItemsStyle,
+    customDisplay = props.customDisplay,
+    style = props.style;
   var _useControllableValue = useControllableValue(props, {
       defaultValue: defaultValue
     }),
@@ -173,6 +176,8 @@ var BaseNumberKeyboard = function BaseNumberKeyboard(props) {
     }
   };
   var handleChangeValue = function handleChangeValue(val) {
+    var _val;
+    val = typeof val === 'string' ? val : ((_val = val) === null || _val === void 0 || (_val = _val.target) === null || _val === void 0 ? void 0 : _val.value) || '';
     var detail = checkValue(val);
     if (detail) return;
     setValue(val);
@@ -205,37 +210,51 @@ var BaseNumberKeyboard = function BaseNumberKeyboard(props) {
   var handleKeyboardChange = useMemoizedFn(function (val) {
     return (actions[val] || actions.default)(val);
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: "pisell-virtual-keyboard-base"
-  }, /*#__PURE__*/React.createElement(VirtualKeyInput, {
-    value: value,
-    onChange: function onChange(e) {
-      return handleChangeValue(e.target.value);
-    },
-    renderInput: function renderInput(props) {
-      if (isUndefined(props.value) || props.value === '') {
-        return /*#__PURE__*/React.createElement(VirtualInput, {
-          autoFocus: true,
-          placeholder: placeholder,
-          value: props.value
+  var renderDisplayField = function renderDisplayField() {
+    if (customDisplay) {
+      if (typeof customDisplay === 'function') {
+        return customDisplay({
+          value: value,
+          onChange: handleChangeValue,
+          onValueSelect: setSelect
         });
       }
-      return (format === null || format === void 0 ? void 0 : format(props.value)) || props.value;
-    },
-    showDelete: false,
-    onValueSelect: setSelect,
-    defaultSelect: defaultSelect,
-    style: {
-      backgroundColor: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.buttonBackgroundColor) || '#fff',
-      color: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.textColor) || '#000000'
+      return customDisplay;
     }
-  }), /*#__PURE__*/React.createElement(Presets, {
+    return /*#__PURE__*/React.createElement(VirtualKeyInput, {
+      value: value,
+      onChange: function onChange(e) {
+        return handleChangeValue(e.target.value);
+      },
+      renderInput: function renderInput(props) {
+        if (isUndefined(props.value) || props.value === '') {
+          return /*#__PURE__*/React.createElement(VirtualInput, {
+            autoFocus: true,
+            placeholder: placeholder,
+            value: props.value
+          });
+        }
+        return (format === null || format === void 0 ? void 0 : format(props.value)) || props.value;
+      },
+      showDelete: false,
+      onValueSelect: setSelect,
+      defaultSelect: defaultSelect,
+      style: {
+        backgroundColor: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.buttonBackgroundColor) || '#fff',
+        color: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.textColor) || '#000000'
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-virtual-keyboard-base",
+    style: style
+  }, renderDisplayField(), /*#__PURE__*/React.createElement(Presets, {
     presets: presets,
     onChange: handleChangeValue
-  }), /*#__PURE__*/React.createElement(Keyboard, {
+  }), /*#__PURE__*/React.createElement(Keyboard, _extends({
     items: itemsWithStyle,
     rightItems: rightItems,
     onChange: handleKeyboardChange
-  }));
+  }, props.keyboardProps || {})));
 };
 export default BaseNumberKeyboard;

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

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["min", "max", "doneText", "resetText", "defaultValue", "placeholder", "onEnter", "selectType"];
+var _excluded = ["min", "max", "doneText", "resetText", "defaultValue", "placeholder", "onEnter", "selectType", "defaultSelect"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -31,6 +31,7 @@ var _Number = function _Number(props) {
     onEnter = props.onEnter,
     _props$selectType = props.selectType,
     selectType = _props$selectType === void 0 ? 'light' : _props$selectType,
+    defaultSelect = props.defaultSelect,
     others = _objectWithoutProperties(props, _excluded);
   var config = usePisellConfig();
   var _useControllableValue = useControllableValue(props, {
@@ -86,11 +87,13 @@ var _Number = function _Number(props) {
     max: max,
     min: min,
     value: value,
+    defaultValue: defaultValue,
     onChange: setValue,
     placeholder: placeholder,
     doneText: doneText,
     resetText: resetText,
     onEnter: onEnter,
+    defaultSelect: defaultSelect,
     rightItemsStyle: {
       buttonBackgroundColor: configColor.buttonBackgroundColor,
       textColor: configColor.textColor,