@blocklet/payment-react 1.18.56 → 1.19.1

package/lib/components/date-range-picker.js

@@ -0,0 +1,329 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = DateRangePicker;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _label = _interopRequireDefault(require("./label"));
+var _util = require("../libs/util");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function DatePickerContent({
+  tempValue,
+  setTempValue,
+  handleCancel,
+  handleApply,
+  handleClear
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+    sx: {
+      p: 2,
+      minWidth: 320
+    },
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      spacing: 2,
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
+          children: t("common.startDate")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+          type: "date",
+          value: tempValue.startDate,
+          onChange: e => setTempValue(prev => ({
+            ...prev,
+            startDate: e.target.value
+          })),
+          size: "small",
+          fullWidth: true,
+          slotProps: {
+            inputLabel: {
+              shrink: true
+            }
+          }
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
+          children: t("common.endDate")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+          type: "date",
+          value: tempValue.endDate,
+          onChange: e => setTempValue(prev => ({
+            ...prev,
+            endDate: e.target.value
+          })),
+          size: "small",
+          fullWidth: true,
+          slotProps: {
+            inputLabel: {
+              shrink: true
+            }
+          }
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+          justifyContent: "space-between"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+          variant: "text",
+          onClick: handleClear,
+          size: "small",
+          color: "secondary",
+          sx: {
+            px: 0.5,
+            minWidth: 0
+          },
+          children: t("common.clear")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          spacing: 1,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "outlined",
+            onClick: handleCancel,
+            size: "small",
+            children: t("common.cancel")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "contained",
+            onClick: handleApply,
+            size: "small",
+            children: t("common.confirm")
+          })]
+        })]
+      })]
+    })
+  });
+}
+const DateFormat = "YYYY-MM-DD";
+function DateRangePicker({
+  value,
+  onChange,
+  label = "",
+  size = "small",
+  fullWidth = false,
+  disabled = false
+}) {
+  const theme = (0, _material.useTheme)();
+  const isMobile = (0, _material.useMediaQuery)(theme.breakpoints.down("sm"));
+  const [open, setOpen] = (0, _react.useState)(false);
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const [tempValue, setTempValue] = (0, _react.useState)({
+    startDate: value.start ? (0, _util.formatToDate)(value.start * 1e3, locale, DateFormat) : "",
+    endDate: value.end ? (0, _util.formatToDate)(value.end * 1e3, locale, DateFormat) : ""
+  });
+  const anchorRef = (0, _react.useRef)(null);
+  const formatDisplayValue = (startUnix, endUnix) => {
+    if (!startUnix || !endUnix) return t("common.selectTimeRange");
+    const start = (0, _util.formatToDate)(startUnix * 1e3, locale, DateFormat);
+    const end = (0, _util.formatToDate)(endUnix * 1e3, locale, DateFormat);
+    return `${start} ~ ${end}`;
+  };
+  const handleOpen = () => {
+    if (disabled) return;
+    setTempValue({
+      startDate: value.start ? (0, _util.formatToDate)(value.start * 1e3, locale, DateFormat) : "",
+      endDate: value.end ? (0, _util.formatToDate)(value.end * 1e3, locale, DateFormat) : ""
+    });
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleApply = () => {
+    const unixValue = {
+      start: tempValue.startDate ? Math.floor((/* @__PURE__ */new Date(`${tempValue.startDate}T00:00:00`)).getTime() / 1e3) : 0,
+      end: tempValue.endDate ? Math.floor((/* @__PURE__ */new Date(`${tempValue.endDate}T23:59:59`)).getTime() / 1e3) : 0
+    };
+    onChange(unixValue);
+    setOpen(false);
+  };
+  const handleCancel = () => {
+    setTempValue({
+      startDate: value.start ? (0, _util.formatToDate)(value.start * 1e3, locale, DateFormat) : "",
+      endDate: value.end ? (0, _util.formatToDate)(value.end * 1e3, locale, DateFormat) : ""
+    });
+    setOpen(false);
+  };
+  const handleClear = () => {
+    const emptyValue = {
+      start: void 0,
+      end: void 0
+    };
+    onChange(emptyValue);
+    setTempValue({
+      startDate: "",
+      endDate: ""
+    });
+    setOpen(false);
+  };
+  const hasValue = !!value.start && !!value.end;
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+      ref: anchorRef,
+      label,
+      value: formatDisplayValue(value.start, value.end),
+      size,
+      fullWidth,
+      disabled,
+      sx: {
+        "& .MuiInputBase-input": {
+          cursor: disabled ? "default" : "pointer"
+        }
+      },
+      onClick: handleOpen,
+      placeholder: t("common.selectTimeRange"),
+      slotProps: {
+        input: {
+          readOnly: true,
+          startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.DateRange, {
+            fontSize: "small",
+            sx: {
+              mr: 1,
+              color: "text.secondary"
+            }
+          }),
+          endAdornment: hasValue && !disabled && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "small",
+            onClick: e => {
+              e.stopPropagation();
+              handleClear();
+            },
+            sx: {
+              color: "text.secondary",
+              "&:hover": {
+                color: "text.primary"
+              }
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Clear, {
+              fontSize: "small"
+            })
+          })
+        },
+        inputLabel: {
+          shrink: true
+        }
+      }
+    }), !isMobile && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Popover, {
+      open,
+      anchorEl: anchorRef.current,
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      sx: {
+        "& .MuiPaper-root": {
+          boxShadow: theme.shadows[8],
+          border: `1px solid ${theme.palette.divider}`
+        }
+      },
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(DatePickerContent, {
+        tempValue,
+        setTempValue,
+        handleCancel,
+        handleApply,
+        handleClear
+      })
+    }), isMobile && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Dialog, {
+      open,
+      onClose: handleClose,
+      fullWidth: true,
+      maxWidth: "sm",
+      PaperProps: {
+        sx: {
+          m: 1,
+          maxHeight: "calc(100% - 64px)"
+        }
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.DialogTitle, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          pb: 1
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "h6",
+          children: t("common.selectTimeRange")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+          edge: "end",
+          color: "inherit",
+          onClick: handleClose,
+          "aria-label": "close",
+          size: "small",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Close, {})
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.DialogContent, {
+        sx: {
+          pb: 1
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          spacing: 2,
+          sx: {
+            mt: 1
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
+            children: t("common.startDate")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+            type: "date",
+            value: tempValue.startDate,
+            onChange: e => setTempValue(prev => ({
+              ...prev,
+              startDate: e.target.value
+            })),
+            size: "small",
+            fullWidth: true,
+            slotProps: {
+              inputLabel: {
+                shrink: true
+              }
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
+            children: t("common.endDate")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+            type: "date",
+            value: tempValue.endDate,
+            onChange: e => setTempValue(prev => ({
+              ...prev,
+              endDate: e.target.value
+            })),
+            size: "small",
+            fullWidth: true,
+            slotProps: {
+              inputLabel: {
+                shrink: true
+              }
+            }
+          })]
+        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.DialogActions, {
+        sx: {
+          px: 3,
+          pb: 2
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+          onClick: handleCancel,
+          color: "inherit",
+          children: t("common.cancel")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+          onClick: handleApply,
+          variant: "contained",
+          children: t("common.confirm")
+        })]
+      })]
+    })]
+  });
+}

package/lib/components/input.d.ts

@@ -1,25 +1,19 @@
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
+import type { TextFieldProps } from '@mui/material';
 import type { RegisterOptions } from 'react-hook-form';
-declare const FormInput: import("react").ForwardRefExoticComponent<(Omit<import("@mui/material").OutlinedTextFieldProps & {
+type InputProps = TextFieldProps & {
     name: string;
     label?: ReactNode;
     placeholder?: string;
-    errorPosition?: "right" | "bottom";
+    errorPosition?: 'right' | 'bottom';
     rules?: RegisterOptions;
-    wrapperStyle?: any;
-}, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
-    name: string;
-    label?: ReactNode;
-    placeholder?: string;
-    errorPosition?: "right" | "bottom";
-    rules?: RegisterOptions;
-    wrapperStyle?: any;
-}, "ref"> | Omit<import("@mui/material").StandardTextFieldProps & {
-    name: string;
-    label?: ReactNode;
-    placeholder?: string;
-    errorPosition?: "right" | "bottom";
-    rules?: RegisterOptions;
-    wrapperStyle?: any;
-}, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
-export default FormInput;
+    wrapperStyle?: React.CSSProperties;
+    required?: boolean;
+    tooltip?: ReactNode | string;
+    description?: ReactNode | string;
+};
+export default function FormInput({ ref, name, label, placeholder, rules, errorPosition, wrapperStyle, inputProps, required, tooltip, description, ...rest }: InputProps & {
+    ref?: React.RefObject<HTMLInputElement | null>;
+    inputProps?: TextFieldProps['inputProps'];
+}): JSX.Element;
+export {};

package/lib/components/input.js

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
+module.exports = FormInput;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _material = require("@mui/material");
 var _get = _interopRequireDefault(require("lodash/get"));
 var _reactHookForm = require("react-hook-form");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _label = _interopRequireDefault(require("./label"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function FormInputError({
   error
 }) {
@@ -22,15 +23,20 @@ function FormInputError({
     })
   });
 }
-const FormInput = (0, _react.forwardRef)(({
+function FormInput({
+  ref = void 0,
   name,
-  label,
-  placeholder,
-  rules,
-  errorPosition,
-  wrapperStyle,
+  label = "",
+  placeholder = "",
+  rules = {},
+  errorPosition = "bottom",
+  wrapperStyle = {},
+  inputProps = {},
+  required = false,
+  tooltip = "",
+  description = "",
   ...rest
-}, ref) => {
+}) {
   const {
     control,
     formState
@@ -51,10 +57,10 @@ const FormInput = (0, _react.forwardRef)(({
         width: "100%",
         ...wrapperStyle
       },
-      children: [!!label && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
-        sx: {
-          color: "text.primary"
-        },
+      children: [!!label && /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
+        required,
+        tooltip,
+        description,
         children: label
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
         fullWidth: true,
@@ -65,20 +71,15 @@ const FormInput = (0, _react.forwardRef)(({
         ...field,
         ...rest,
         inputRef,
-        InputProps: Object.assign(rest.InputProps || {}, errorPosition === "right" && error ? {
-          endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(FormInputError, {
-            error
-          })
-        } : {})
+        slotProps: {
+          htmlInput: inputProps,
+          input: Object.assign(rest.InputProps || {}, errorPosition === "right" && error ? {
+            endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(FormInputError, {
+              error
+            })
+          } : {})
+        }
       })]
     })
   });
-});
-FormInput.defaultProps = {
-  label: "",
-  placeholder: "",
-  errorPosition: "bottom",
-  rules: {},
-  wrapperStyle: {}
-};
-module.exports = FormInput;
+}

package/lib/components/label.d.ts

@@ -0,0 +1,7 @@
+import type { FormLabelProps } from '@mui/material';
+import type { ReactNode } from 'react';
+export default function CustomFormLabel({ children, required, tooltip, description, ...props }: FormLabelProps & {
+    required?: boolean;
+    tooltip?: ReactNode | string;
+    description?: ReactNode | string;
+}): import("react").JSX.Element;

package/lib/components/label.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CustomFormLabel;
+var _jsxRuntime = require("react/jsx-runtime");
+var _iconsMaterial = require("@mui/icons-material");
+var _material = require("@mui/material");
+function CustomFormLabel({
+  children,
+  required = false,
+  tooltip = "",
+  description = "",
+  ...props
+}) {
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      mb: 1,
+      width: "100%"
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.FormLabel, {
+      ...props,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        fontWeight: 500,
+        color: "text.primary",
+        "&.MuiFormLabel-root": {
+          display: "flex",
+          alignItems: "center",
+          gap: 0.5,
+          fontWeight: 500,
+          color: "text.primary"
+        },
+        ...(props.sx || {})
+      },
+      children: [children, required && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        component: "span",
+        color: "error",
+        children: "*"
+      }), tooltip && (typeof tooltip === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: tooltip,
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.InfoOutlined, {
+          fontSize: "small",
+          sx: {
+            opacity: 0.7
+          }
+        })
+      }) : tooltip)]
+    }), description && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      variant: "caption",
+      sx: {
+        color: "text.secondary"
+      },
+      children: description
+    })]
+  });
+}

package/lib/components/lazy-loader.js

@@ -8,7 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
 var _material = require("@mui/material");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function createLazyComponent(loader, options = {}) {
   let loadPromise = null;
   const {

package/lib/components/link.d.ts

@@ -6,12 +6,5 @@ interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     target?: string;
     outLink?: boolean;
 }
-declare function Link({ to, children, onClick, replace, target, outLink, ...props }: LinkProps): JSX.Element;
-declare namespace Link {
-    var defaultProps: {
-        replace: boolean;
-        target: undefined;
-        outLink: boolean;
-    };
-}
-export default Link;
+export default function Link({ to, children, onClick, replace, target, outLink, ...props }: LinkProps): JSX.Element;
+export {};

package/lib/components/link.js

@@ -10,8 +10,8 @@ function Link({
   to,
   children,
   onClick,
-  replace,
-  target,
+  replace = false,
+  target = void 0,
   outLink = false,
   ...props
 }) {
@@ -38,9 +38,4 @@ function Link({
     ...props,
     children
   });
-}
-Link.defaultProps = {
-  replace: false,
-  target: void 0,
-  outLink: false
-};
+}

package/lib/components/livemode.d.ts

@@ -3,11 +3,5 @@ type Props = {
     color?: string;
     backgroundColor?: string;
 } & ChipOwnProps;
-declare function Livemode({ color, backgroundColor, sx }: Props): import("react").JSX.Element;
-declare namespace Livemode {
-    var defaultProps: {
-        color: string;
-        backgroundColor: string;
-    };
-}
-export default Livemode;
+export default function Livemode({ color, backgroundColor, sx }: Props): import("react").JSX.Element;
+export {};

package/lib/components/livemode.js

@@ -8,8 +8,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 function Livemode({
-  color,
-  backgroundColor,
+  color = "#bb5504",
+  backgroundColor = "#ffde92",
   sx
 }) {
   const {
@@ -32,8 +32,4 @@ function Livemode({
       ...sx
     }
   });
-}
-Livemode.defaultProps = {
-  color: "#bb5504",
-  backgroundColor: "#ffde92"
-};
+}

package/lib/components/loading-button.d.ts

@@ -6,5 +6,10 @@ export interface LoadingButtonProps extends ButtonProps {
     loadingProps?: Partial<CircularProgressProps>;
     loadingOnly?: boolean;
 }
-declare const LoadingButton: import("react").ForwardRefExoticComponent<Omit<LoadingButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare function LoadingButton({ ref, children, loading, loadingPosition, loadingIndicator, loadingProps, loadingOnly, onClick, sx, ...props }: LoadingButtonProps & {
+    ref?: React.RefObject<HTMLButtonElement | null>;
+}): import("react").JSX.Element;
+declare namespace LoadingButton {
+    var displayName: string;
+}
 export default LoadingButton;

package/lib/components/loading-button.js

@@ -3,21 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
+module.exports = LoadingButton;
 var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
-var _react = require("react");
-const LoadingButton = (0, _react.forwardRef)(({
+function LoadingButton({
+  ref = void 0,
   children,
-  loading,
+  loading = false,
   loadingPosition = "start",
-  loadingIndicator,
+  loadingIndicator = void 0,
   loadingProps = {},
+  loadingOnly = false,
   onClick,
   sx,
-  loadingOnly = false,
   ...props
-}, ref) => {
+}) {
   const handleClick = e => {
     if (loading) {
       return;
@@ -74,13 +74,5 @@ const LoadingButton = (0, _react.forwardRef)(({
       children
     }), loading && loadingPosition === "center" && indicator, loading && loadingPosition === "end" && indicator]
   });
-});
-LoadingButton.displayName = "LoadingButton";
-LoadingButton.defaultProps = {
-  loading: false,
-  loadingIndicator: void 0,
-  loadingPosition: "start",
-  loadingProps: {},
-  loadingOnly: false
-};
-module.exports = LoadingButton;
+}
+LoadingButton.displayName = "LoadingButton";