@blocklet/payment-react
Version:
Reusable react components for payment kit v2
329 lines (328 loc) • 10.3 kB
JavaScript
;
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")
})]
})]
})]
});
}