@blocklet/payment-react 1.19.0 → 1.19.1

package/src/components/blockchain/tx.tsx

@@ -6,24 +6,20 @@ import { styled } from '@mui/system';
 
 import { getTxLink } from '../../libs/util';
 
-export default function TxLink(rawProps: {
+export default function TxLink({
+  details,
+  method,
+  mode = 'dashboard',
+  align = 'left',
+}: {
   details: PaymentDetails;
   method: TPaymentMethod;
   mode?: 'customer' | 'dashboard';
   align?: 'left' | 'right';
 }) {
-  const props = Object.assign(
-    {
-      mode: 'dashboard',
-      align: 'left',
-    },
-    rawProps
-  );
-
   const { t } = useLocaleContext();
 
-  // eslint-disable-next-line react/prop-types
-  if (!props.details || (props.mode === 'customer' && props.method.type === 'stripe')) {
+  if (!details || (mode === 'customer' && method.type === 'stripe')) {
     return (
       <Typography
         component="small"
@@ -35,8 +31,7 @@ export default function TxLink(rawProps: {
     );
   }
 
-  // eslint-disable-next-line react/prop-types
-  const { text, link } = getTxLink(props.method, props.details);
+  const { text, link } = getTxLink(method, details);
 
   if (link && text) {
     return (
@@ -44,8 +39,7 @@ export default function TxLink(rawProps: {
         <Root
           direction="row"
           alignItems="center"
-          // eslint-disable-next-line react/prop-types
-          justifyContent={props.align === 'left' ? 'flex-start' : 'flex-end'}
+          justifyContent={align === 'left' ? 'flex-start' : 'flex-end'}
           sx={{ color: 'text.link' }}
           spacing={1}>
           <Typography component="span" sx={{ color: 'text.link' }}>

package/src/components/country-select.tsx

@@ -7,7 +7,7 @@ import type { SlideProps, SxProps } from '@mui/material';
 import type { CountryIso2 } from 'react-international-phone';
 import { useMobile } from '../hooks/mobile';
 
-function Transition({ ref, ...props }: { ref: React.RefObject<unknown> } & SlideProps) {
+function Transition({ ref, ...props }: { ref: React.RefObject<unknown | null> } & SlideProps) {
   return <Slide direction="up" ref={ref} timeout={200} {...props} />;
 }
 
@@ -27,7 +27,7 @@ export default function CountrySelect({
   sx = {},
   showDialCode = false,
 }: CountrySelectProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.RefObject<HTMLDivElement | null>;
 }) {
   const { setValue } = useFormContext();
   const [open, setOpen] = useState(false);

package/src/components/date-range-picker.tsx

@@ -0,0 +1,310 @@
+/* eslint-disable @typescript-eslint/indent */
+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';
+import { formatToDate } from '../libs/util';
+
+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;
+}
+
+interface DatePickerContentProps {
+  tempValue: { startDate: string; endDate: string };
+  setTempValue: (
+    value:
+      | { startDate: string; endDate: string }
+      | ((prev: { startDate: string; endDate: string }) => { startDate: string; endDate: string })
+  ) => void;
+  handleCancel: () => void;
+  handleApply: () => void;
+  handleClear: () => void;
+}
+
+// 日期选择器内容组件
+function DatePickerContent({
+  tempValue,
+  setTempValue,
+  handleCancel,
+  handleApply,
+  handleClear,
+}: DatePickerContentProps) {
+  const { t } = useLocaleContext();
+  return (
+    <Box sx={{ p: 2, minWidth: 320 }}>
+      <Stack spacing={2}>
+        <Box>
+          <FormLabel>{t('common.startDate')}</FormLabel>
+          <TextField
+            type="date"
+            value={tempValue.startDate}
+            onChange={(e) => setTempValue((prev) => ({ ...prev, startDate: e.target.value }))}
+            size="small"
+            fullWidth
+            slotProps={{
+              inputLabel: { shrink: true },
+            }}
+          />
+        </Box>
+        <Box>
+          <FormLabel>{t('common.endDate')}</FormLabel>
+          <TextField
+            type="date"
+            value={tempValue.endDate}
+            onChange={(e) => setTempValue((prev) => ({ ...prev, endDate: e.target.value }))}
+            size="small"
+            fullWidth
+            slotProps={{
+              inputLabel: { shrink: true },
+            }}
+          />
+        </Box>
+
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            justifyContent: 'space-between',
+          }}>
+          <Button variant="text" onClick={handleClear} size="small" color="secondary" sx={{ px: 0.5, minWidth: 0 }}>
+            {t('common.clear')}
+          </Button>
+          <Stack direction="row" spacing={1}>
+            <Button variant="outlined" onClick={handleCancel} size="small">
+              {t('common.cancel')}
+            </Button>
+            <Button variant="contained" onClick={handleApply} size="small">
+              {t('common.confirm')}
+            </Button>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
+
+const DateFormat = 'YYYY-MM-DD';
+
+export default function DateRangePicker({
+  value,
+  onChange,
+  label = '',
+  size = 'small',
+  fullWidth = false,
+  disabled = false,
+}: DateRangePickerProps) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const [open, setOpen] = useState(false);
+  const { t, locale } = useLocaleContext();
+  // 内部使用字符串格式的临时值
+  const [tempValue, setTempValue] = useState<{ startDate: string; endDate: string }>({
+    startDate: value.start ? formatToDate(value.start * 1000, locale, DateFormat) : '',
+    endDate: value.end ? formatToDate(value.end * 1000, locale, DateFormat) : '',
+  });
+  const anchorRef = useRef<HTMLDivElement>(null);
+
+  const formatDisplayValue = (startUnix: number | undefined, endUnix: number | undefined) => {
+    if (!startUnix || !endUnix) return t('common.selectTimeRange');
+    const start = formatToDate(startUnix * 1000, locale, DateFormat);
+    const end = formatToDate(endUnix * 1000, locale, DateFormat);
+    return `${start} ~ ${end}`;
+  };
+
+  const handleOpen = () => {
+    if (disabled) return;
+    setTempValue({
+      startDate: value.start ? formatToDate(value.start * 1000, locale, DateFormat) : '',
+      endDate: value.end ? formatToDate(value.end * 1000, locale, DateFormat) : '',
+    });
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleApply = () => {
+    const unixValue: DateRangeValue = {
+      start: tempValue.startDate ? Math.floor(new Date(`${tempValue.startDate}T00:00:00`).getTime() / 1000) : 0,
+      end: tempValue.endDate ? Math.floor(new Date(`${tempValue.endDate}T23:59:59`).getTime() / 1000) : 0,
+    };
+    onChange(unixValue);
+    setOpen(false);
+  };
+
+  const handleCancel = () => {
+    setTempValue({
+      startDate: value.start ? formatToDate(value.start * 1000, locale, DateFormat) : '',
+      endDate: value.end ? formatToDate(value.end * 1000, locale, DateFormat) : '',
+    });
+    setOpen(false);
+  };
+
+  const handleClear = () => {
+    const emptyValue: DateRangeValue = { start: undefined, end: undefined };
+    onChange(emptyValue);
+    setTempValue({ startDate: '', endDate: '' });
+    setOpen(false);
+  };
+
+  const hasValue = !!value.start && !!value.end;
+
+  return (
+    <>
+      <TextField
+        ref={anchorRef}
+        label={label}
+        value={formatDisplayValue(value.start, value.end)}
+        size={size}
+        fullWidth={fullWidth}
+        disabled={disabled}
+        sx={{
+          '& .MuiInputBase-input': {
+            cursor: disabled ? 'default' : 'pointer',
+          },
+        }}
+        onClick={handleOpen}
+        placeholder={t('common.selectTimeRange')}
+        slotProps={{
+          input: {
+            readOnly: true,
+            startAdornment: <DateRange fontSize="small" sx={{ mr: 1, color: 'text.secondary' }} />,
+            endAdornment: hasValue && !disabled && (
+              <IconButton
+                size="small"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleClear();
+                }}
+                sx={{
+                  color: 'text.secondary',
+
+                  '&:hover': { color: 'text.primary' },
+                }}>
+                <Clear fontSize="small" />
+              </IconButton>
+            ),
+          },
+
+          inputLabel: { shrink: true },
+        }}
+      />
+      {/* 桌面端使用 Popover */}
+      {!isMobile && (
+        <Popover
+          open={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}`,
+            },
+          }}>
+          <DatePickerContent
+            tempValue={tempValue}
+            setTempValue={setTempValue}
+            handleCancel={handleCancel}
+            handleApply={handleApply}
+            handleClear={handleClear}
+          />
+        </Popover>
+      )}
+      {/* 移动端使用 Dialog */}
+      {isMobile && (
+        <Dialog
+          open={open}
+          onClose={handleClose}
+          fullWidth
+          maxWidth="sm"
+          PaperProps={{
+            sx: {
+              m: 1,
+              maxHeight: 'calc(100% - 64px)',
+            },
+          }}>
+          <DialogTitle
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              pb: 1,
+            }}>
+            <Typography variant="h6">{t('common.selectTimeRange')}</Typography>
+            <IconButton edge="end" color="inherit" onClick={handleClose} aria-label="close" size="small">
+              <Close />
+            </IconButton>
+          </DialogTitle>
+          <DialogContent sx={{ pb: 1 }}>
+            <Stack spacing={2} sx={{ mt: 1 }}>
+              <FormLabel>{t('common.startDate')}</FormLabel>
+              <TextField
+                type="date"
+                value={tempValue.startDate}
+                onChange={(e) => setTempValue((prev) => ({ ...prev, startDate: e.target.value }))}
+                size="small"
+                fullWidth
+                slotProps={{
+                  inputLabel: { shrink: true },
+                }}
+              />
+              <FormLabel>{t('common.endDate')}</FormLabel>
+              <TextField
+                type="date"
+                value={tempValue.endDate}
+                onChange={(e) => setTempValue((prev) => ({ ...prev, endDate: e.target.value }))}
+                size="small"
+                fullWidth
+                slotProps={{
+                  inputLabel: { shrink: true },
+                }}
+              />
+            </Stack>
+          </DialogContent>
+          <DialogActions sx={{ px: 3, pb: 2 }}>
+            <Button onClick={handleCancel} color="inherit">
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={handleApply} variant="contained">
+              {t('common.confirm')}
+            </Button>
+          </DialogActions>
+        </Dialog>
+      )}
+    </>
+  );
+}

package/src/components/input.tsx

@@ -1,9 +1,10 @@
 import React, { type ReactNode, useImperativeHandle, useRef } from 'react';
-import { Box, FormLabel, InputAdornment, TextField, Typography } from '@mui/material';
+import { Box, InputAdornment, TextField, Typography } from '@mui/material';
 import get from 'lodash/get';
 import { Controller, useFormContext } from 'react-hook-form';
 import type { TextFieldProps } from '@mui/material';
 import type { RegisterOptions } from 'react-hook-form';
+import FormLabel from './label';
 
 type InputProps = TextFieldProps & {
   name: string;
@@ -12,6 +13,9 @@ type InputProps = TextFieldProps & {
   errorPosition?: 'right' | 'bottom';
   rules?: RegisterOptions;
   wrapperStyle?: React.CSSProperties;
+  required?: boolean;
+  tooltip?: ReactNode | string;
+  description?: ReactNode | string;
 };
 
 function FormInputError({ error }: { error: string }) {
@@ -33,9 +37,12 @@ export default function FormInput({
   errorPosition = 'bottom',
   wrapperStyle = {},
   inputProps = {},
+  required = false,
+  tooltip = '',
+  description = '',
   ...rest
 }: InputProps & {
-  ref?: React.RefObject<HTMLInputElement>;
+  ref?: React.RefObject<HTMLInputElement | null>;
   inputProps?: TextFieldProps['inputProps'];
 }) {
   const { control, formState } = useFormContext();
@@ -52,7 +59,11 @@ export default function FormInput({
       rules={rules}
       render={({ field }) => (
         <Box sx={{ width: '100%', ...wrapperStyle }}>
-          {!!label && <FormLabel sx={{ color: 'text.primary' }}>{label}</FormLabel>}
+          {!!label && (
+            <FormLabel required={required} tooltip={tooltip} description={description}>
+              {label}
+            </FormLabel>
+          )}
           <TextField
             fullWidth
             error={!!get(formState.errors, name)}

package/src/components/label.tsx

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

package/src/components/loading-button.tsx

@@ -28,7 +28,7 @@ export default function LoadingButton({
   sx,
   ...props
 }: LoadingButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.RefObject<HTMLButtonElement | null>;
 }) {
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (loading) {