@blocklet/payment-react 1.18.56 → 1.19.1

package/es/components/date-range-picker.d.ts

@@ -0,0 +1,13 @@
+export interface DateRangeValue {
+    start: number | undefined;
+    end: number | undefined;
+}
+export interface DateRangePickerProps {
+    value: DateRangeValue;
+    onChange: (value: DateRangeValue) => void;
+    label?: string;
+    size?: 'small' | 'medium';
+    fullWidth?: boolean;
+    disabled?: boolean;
+}
+export default function DateRangePicker({ value, onChange, label, size, fullWidth, disabled, }: DateRangePickerProps): import("react").JSX.Element;

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

@@ -0,0 +1,279 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import {
+  TextField,
+  Stack,
+  Typography,
+  useMediaQuery,
+  useTheme,
+  Popover,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Box,
+  IconButton
+} from "@mui/material";
+import { DateRange, Close, Clear } from "@mui/icons-material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import FormLabel from "./label.js";
+import { formatToDate } from "../libs/util.js";
+function DatePickerContent({
+  tempValue,
+  setTempValue,
+  handleCancel,
+  handleApply,
+  handleClear
+}) {
+  const { t } = useLocaleContext();
+  return /* @__PURE__ */ jsx(Box, { sx: { p: 2, minWidth: 320 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(FormLabel, { children: t("common.startDate") }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          type: "date",
+          value: tempValue.startDate,
+          onChange: (e) => setTempValue((prev) => ({ ...prev, startDate: e.target.value })),
+          size: "small",
+          fullWidth: true,
+          slotProps: {
+            inputLabel: { shrink: true }
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(FormLabel, { children: t("common.endDate") }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          type: "date",
+          value: tempValue.endDate,
+          onChange: (e) => setTempValue((prev) => ({ ...prev, endDate: e.target.value })),
+          size: "small",
+          fullWidth: true,
+          slotProps: {
+            inputLabel: { shrink: true }
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        spacing: 1,
+        sx: {
+          justifyContent: "space-between"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Button, { variant: "text", onClick: handleClear, size: "small", color: "secondary", sx: { px: 0.5, minWidth: 0 }, children: t("common.clear") }),
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: handleCancel, size: "small", children: t("common.cancel") }),
+            /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleApply, size: "small", children: t("common.confirm") })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+const DateFormat = "YYYY-MM-DD";
+export default function DateRangePicker({
+  value,
+  onChange,
+  label = "",
+  size = "small",
+  fullWidth = false,
+  disabled = false
+}) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const [open, setOpen] = useState(false);
+  const { t, locale } = useLocaleContext();
+  const [tempValue, setTempValue] = useState({
+    startDate: value.start ? formatToDate(value.start * 1e3, locale, DateFormat) : "",
+    endDate: value.end ? formatToDate(value.end * 1e3, locale, DateFormat) : ""
+  });
+  const anchorRef = useRef(null);
+  const formatDisplayValue = (startUnix, endUnix) => {
+    if (!startUnix || !endUnix) return t("common.selectTimeRange");
+    const start = formatToDate(startUnix * 1e3, locale, DateFormat);
+    const end = formatToDate(endUnix * 1e3, locale, DateFormat);
+    return `${start} ~ ${end}`;
+  };
+  const handleOpen = () => {
+    if (disabled) return;
+    setTempValue({
+      startDate: value.start ? formatToDate(value.start * 1e3, locale, DateFormat) : "",
+      endDate: value.end ? 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 ? formatToDate(value.start * 1e3, locale, DateFormat) : "",
+      endDate: value.end ? 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      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__ */ jsx(DateRange, { fontSize: "small", sx: { mr: 1, color: "text.secondary" } }),
+            endAdornment: hasValue && !disabled && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleClear();
+                },
+                sx: {
+                  color: "text.secondary",
+                  "&:hover": { color: "text.primary" }
+                },
+                children: /* @__PURE__ */ jsx(Clear, { fontSize: "small" })
+              }
+            )
+          },
+          inputLabel: { shrink: true }
+        }
+      }
+    ),
+    !isMobile && /* @__PURE__ */ jsx(
+      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__ */ jsx(
+          DatePickerContent,
+          {
+            tempValue,
+            setTempValue,
+            handleCancel,
+            handleApply,
+            handleClear
+          }
+        )
+      }
+    ),
+    isMobile && /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open,
+        onClose: handleClose,
+        fullWidth: true,
+        maxWidth: "sm",
+        PaperProps: {
+          sx: {
+            m: 1,
+            maxHeight: "calc(100% - 64px)"
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            DialogTitle,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                pb: 1
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("common.selectTimeRange") }),
+                /* @__PURE__ */ jsx(IconButton, { edge: "end", color: "inherit", onClick: handleClose, "aria-label": "close", size: "small", children: /* @__PURE__ */ jsx(Close, {}) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(DialogContent, { sx: { pb: 1 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, sx: { mt: 1 }, children: [
+            /* @__PURE__ */ jsx(FormLabel, { children: t("common.startDate") }),
+            /* @__PURE__ */ jsx(
+              TextField,
+              {
+                type: "date",
+                value: tempValue.startDate,
+                onChange: (e) => setTempValue((prev) => ({ ...prev, startDate: e.target.value })),
+                size: "small",
+                fullWidth: true,
+                slotProps: {
+                  inputLabel: { shrink: true }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(FormLabel, { children: t("common.endDate") }),
+            /* @__PURE__ */ jsx(
+              TextField,
+              {
+                type: "date",
+                value: tempValue.endDate,
+                onChange: (e) => setTempValue((prev) => ({ ...prev, endDate: e.target.value })),
+                size: "small",
+                fullWidth: true,
+                slotProps: {
+                  inputLabel: { shrink: true }
+                }
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { sx: { px: 3, pb: 2 }, children: [
+            /* @__PURE__ */ jsx(Button, { onClick: handleCancel, color: "inherit", children: t("common.cancel") }),
+            /* @__PURE__ */ jsx(Button, { onClick: handleApply, variant: "contained", children: t("common.confirm") })
+          ] })
+        ]
+      }
+    )
+  ] });
+}

package/es/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/es/components/input.js

@@ -1,54 +1,61 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef } from "react";
-import { Box, FormLabel, InputAdornment, TextField, Typography } from "@mui/material";
+import { useImperativeHandle, useRef } from "react";
+import { Box, InputAdornment, TextField, Typography } from "@mui/material";
 import get from "lodash/get";
 import { Controller, useFormContext } from "react-hook-form";
+import FormLabel from "./label.js";
 function FormInputError({ error }) {
   return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(Typography, { component: "span", color: "error", children: error }) });
 }
-const FormInput = forwardRef(
-  ({ name, label, placeholder, rules, errorPosition, wrapperStyle, ...rest }, ref) => {
-    const { control, formState } = useFormContext();
-    const inputRef = useRef(null);
-    useImperativeHandle(ref, () => {
-      return inputRef.current;
-    });
-    const error = get(formState.errors, name)?.message;
-    return /* @__PURE__ */ jsx(
-      Controller,
-      {
-        name,
-        control,
-        rules,
-        render: ({ field }) => /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", ...wrapperStyle }, children: [
-          !!label && /* @__PURE__ */ jsx(FormLabel, { sx: { color: "text.primary" }, children: label }),
-          /* @__PURE__ */ jsx(
-            TextField,
-            {
-              fullWidth: true,
-              error: !!get(formState.errors, name),
-              helperText: errorPosition === "bottom" && error ? error : "",
-              placeholder,
-              size: "small",
-              ...field,
-              ...rest,
-              inputRef,
-              InputProps: Object.assign(
+export default function FormInput({
+  ref = void 0,
+  name,
+  label = "",
+  placeholder = "",
+  rules = {},
+  errorPosition = "bottom",
+  wrapperStyle = {},
+  inputProps = {},
+  required = false,
+  tooltip = "",
+  description = "",
+  ...rest
+}) {
+  const { control, formState } = useFormContext();
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => {
+    return inputRef.current;
+  });
+  const error = get(formState.errors, name)?.message;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      rules,
+      render: ({ field }) => /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", ...wrapperStyle }, children: [
+        !!label && /* @__PURE__ */ jsx(FormLabel, { required, tooltip, description, children: label }),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            error: !!get(formState.errors, name),
+            helperText: errorPosition === "bottom" && error ? error : "",
+            placeholder,
+            size: "small",
+            ...field,
+            ...rest,
+            inputRef,
+            slotProps: {
+              htmlInput: inputProps,
+              input: Object.assign(
                 rest.InputProps || {},
                 errorPosition === "right" && error ? { endAdornment: /* @__PURE__ */ jsx(FormInputError, { error }) } : {}
               )
             }
-          )
-        ] })
-      }
-    );
-  }
-);
-FormInput.defaultProps = {
-  label: "",
-  placeholder: "",
-  errorPosition: "bottom",
-  rules: {},
-  wrapperStyle: {}
-};
-export default FormInput;
+          }
+        )
+      ] })
+    }
+  );
+}

package/es/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/es/components/label.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InfoOutlined } from "@mui/icons-material";
+import { Box, FormLabel, Tooltip, Typography } from "@mui/material";
+export default function CustomFormLabel({
+  children,
+  required = false,
+  tooltip = "",
+  description = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 1, width: "100%" }, children: [
+    /* @__PURE__ */ jsxs(
+      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__ */ jsx(Typography, { component: "span", color: "error", children: "*" }),
+          tooltip && (typeof tooltip === "string" ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx(InfoOutlined, { fontSize: "small", sx: { opacity: 0.7 } }) }) : tooltip)
+        ]
+      }
+    ),
+    description && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          color: "text.secondary"
+        },
+        children: description
+      }
+    )
+  ] });
+}

package/es/components/lazy-loader.js

@@ -12,8 +12,7 @@ export function createLazyComponent(loader, options = {}) {
     ] })
   } = options;
   const loadComponent = async () => {
-    if (loadPromise)
-      return loadPromise;
+    if (loadPromise) return loadPromise;
     try {
       loadPromise = loader().then((result) => "default" in result ? result.default : result);
       return await loadPromise;

package/es/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/es/components/link.js

@@ -1,6 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { useNavigate } from "react-router-dom";
-export default function Link({ to, children, onClick, replace, target, outLink = false, ...props }) {
+export default function Link({
+  to,
+  children,
+  onClick,
+  replace = false,
+  target = void 0,
+  outLink = false,
+  ...props
+}) {
   const navigate = useNavigate();
   const handleClick = (e) => {
     const isInternal = to.startsWith("/") || to.startsWith("#") || to.startsWith("?");
@@ -16,8 +24,3 @@ export default function Link({ to, children, onClick, replace, target, outLink =
   };
   return /* @__PURE__ */ jsx("a", { href: to, onClick: handleClick, target, rel: "noreferrer", ...props, children });
 }
-Link.defaultProps = {
-  replace: false,
-  target: void 0,
-  outLink: false
-};

package/es/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/es/components/livemode.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Chip } from "@mui/material";
-export default function Livemode({ color, backgroundColor, sx }) {
+export default function Livemode({ color = "#bb5504", backgroundColor = "#ffde92", sx }) {
   const { t } = useLocaleContext();
   return /* @__PURE__ */ jsx(
     Chip,
@@ -24,7 +24,3 @@ export default function Livemode({ color, backgroundColor, sx }) {
     }
   );
 }
-Livemode.defaultProps = {
-  color: "#bb5504",
-  backgroundColor: "#ffde92"
-};

package/es/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;