@bifrostui/react 1.2.9-beta.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Calendar/Calendar.js +48 -2
- package/dist/Calendar/Calendar.types.d.ts +12 -0
- package/dist/Countdown/Countdown.js +3 -0
- package/dist/Dialog/Dialog.d.ts +5 -0
- package/dist/Dialog/Dialog.js +140 -0
- package/dist/Dialog/Dialog.types.d.ts +98 -0
- package/dist/Dialog/Dialog.types.js +15 -0
- package/dist/Dialog/FunctionalDialog.d.ts +3 -0
- package/dist/Dialog/FunctionalDialog.js +168 -0
- package/dist/Dialog/index.css +66 -0
- package/dist/Dialog/index.d.ts +2 -0
- package/dist/Dialog/index.js +41 -0
- package/dist/Modal/Modal.miniapp.d.ts +1 -1
- package/dist/Radio/Radio.js +1 -1
- package/dist/Radio/RadioButtonIcon.d.ts +1 -6
- package/dist/Radio/RadioButtonIcon.js +0 -3
- package/dist/Toast/FunctionalToast.d.ts +3 -0
- package/dist/Toast/FunctionalToast.js +159 -0
- package/dist/Toast/Toast.css +55 -0
- package/dist/Toast/Toast.d.ts +5 -0
- package/dist/Toast/Toast.js +117 -0
- package/dist/Toast/Toast.types.d.ts +87 -0
- package/dist/Toast/Toast.types.js +15 -0
- package/dist/Toast/index.d.ts +2 -0
- package/dist/Toast/index.js +41 -0
- package/dist/Transition/Transition.miniapp.js +7 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +5 -1
- package/es/Calendar/Calendar.js +54 -3
- package/es/Calendar/Calendar.types.d.ts +12 -0
- package/es/Countdown/Countdown.js +3 -0
- package/es/Dialog/Dialog.d.ts +5 -0
- package/es/Dialog/Dialog.js +113 -0
- package/es/Dialog/Dialog.types.d.ts +98 -0
- package/es/Dialog/Dialog.types.js +1 -0
- package/es/Dialog/FunctionalDialog.d.ts +3 -0
- package/es/Dialog/FunctionalDialog.js +141 -0
- package/es/Dialog/index.css +66 -0
- package/es/Dialog/index.d.ts +2 -0
- package/es/Dialog/index.js +6 -0
- package/es/Modal/Modal.miniapp.d.ts +1 -1
- package/es/Radio/Radio.js +1 -1
- package/es/Radio/RadioButtonIcon.d.ts +1 -6
- package/es/Radio/RadioButtonIcon.js +0 -3
- package/es/Toast/FunctionalToast.d.ts +3 -0
- package/es/Toast/FunctionalToast.js +132 -0
- package/es/Toast/Toast.css +55 -0
- package/es/Toast/Toast.d.ts +5 -0
- package/es/Toast/Toast.js +95 -0
- package/es/Toast/Toast.types.d.ts +87 -0
- package/es/Toast/Toast.types.js +1 -0
- package/es/Toast/index.d.ts +2 -0
- package/es/Toast/index.js +6 -0
- package/es/Transition/Transition.miniapp.js +7 -1
- package/es/index.d.ts +2 -0
- package/es/index.js +2 -0
- package/package.json +5 -5
package/es/Calendar/Calendar.js
CHANGED
|
@@ -34,9 +34,15 @@ import { useDidMountEffect, useValue } from "@bifrostui/utils";
|
|
|
34
34
|
import clsx from "clsx";
|
|
35
35
|
import dayjs from "dayjs";
|
|
36
36
|
import isoWeek from "dayjs/plugin/isoWeek";
|
|
37
|
-
import React, {
|
|
37
|
+
import React, {
|
|
38
|
+
Suspense,
|
|
39
|
+
lazy,
|
|
40
|
+
useMemo,
|
|
41
|
+
useState
|
|
42
|
+
} from "react";
|
|
38
43
|
import "./Calendar.css";
|
|
39
44
|
import { formatDate, isRange, isSame } from "./utils";
|
|
45
|
+
const Picker = lazy(() => import("../Picker"));
|
|
40
46
|
dayjs.extend(isoWeek);
|
|
41
47
|
const SUNDAY_WEEK_DATA = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
|
|
42
48
|
const classes = {
|
|
@@ -57,10 +63,12 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
|
|
|
57
63
|
mode,
|
|
58
64
|
hideDaysOutsideCurrentMonth,
|
|
59
65
|
disabledDate,
|
|
66
|
+
enableSelectYear,
|
|
60
67
|
highlightDate,
|
|
61
68
|
dateRender,
|
|
62
69
|
weekRender,
|
|
63
70
|
onMonthChange,
|
|
71
|
+
onYearChange,
|
|
64
72
|
onChange
|
|
65
73
|
} = _a, others = __objRest(_a, [
|
|
66
74
|
"className",
|
|
@@ -71,10 +79,12 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
|
|
|
71
79
|
"mode",
|
|
72
80
|
"hideDaysOutsideCurrentMonth",
|
|
73
81
|
"disabledDate",
|
|
82
|
+
"enableSelectYear",
|
|
74
83
|
"highlightDate",
|
|
75
84
|
"dateRender",
|
|
76
85
|
"weekRender",
|
|
77
86
|
"onMonthChange",
|
|
87
|
+
"onYearChange",
|
|
78
88
|
"onChange"
|
|
79
89
|
]);
|
|
80
90
|
const isRangeMode = mode === "range";
|
|
@@ -85,6 +95,7 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
|
|
|
85
95
|
minDate,
|
|
86
96
|
maxDate
|
|
87
97
|
);
|
|
98
|
+
const [openPicker, setOpenPicker] = useState(false);
|
|
88
99
|
const [renderMonth, setRenderMonth] = useState(() => {
|
|
89
100
|
const initMonth = formattedValue === void 0 ? formattedDefaultValue == null ? void 0 : formattedDefaultValue[0] : formattedValue == null ? void 0 : formattedValue[0];
|
|
90
101
|
return dayjs(initMonth || minDate).toDate();
|
|
@@ -147,6 +158,19 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
|
|
|
147
158
|
});
|
|
148
159
|
return list;
|
|
149
160
|
};
|
|
161
|
+
const getYearsList = () => {
|
|
162
|
+
const result = [];
|
|
163
|
+
let startTime = new Date(minDate).getFullYear();
|
|
164
|
+
const endTime = new Date(maxDate).getFullYear();
|
|
165
|
+
while (endTime - startTime >= 0) {
|
|
166
|
+
result.push({
|
|
167
|
+
label: startTime,
|
|
168
|
+
value: startTime
|
|
169
|
+
});
|
|
170
|
+
startTime += 1;
|
|
171
|
+
}
|
|
172
|
+
return result;
|
|
173
|
+
};
|
|
150
174
|
const getDayClassName = ({ day: itemDate, disabled }) => {
|
|
151
175
|
let result = "";
|
|
152
176
|
if (disabled)
|
|
@@ -239,6 +263,23 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
|
|
|
239
263
|
});
|
|
240
264
|
}
|
|
241
265
|
};
|
|
266
|
+
const onClickDate = (e) => {
|
|
267
|
+
if (!enableSelectYear) {
|
|
268
|
+
return;
|
|
269
|
+
}
|
|
270
|
+
e.stopPropagation();
|
|
271
|
+
setOpenPicker(true);
|
|
272
|
+
getYearsList();
|
|
273
|
+
};
|
|
274
|
+
const onClosePicker = (e, data2) => {
|
|
275
|
+
const selectYear = data2.value[0];
|
|
276
|
+
e.stopPropagation();
|
|
277
|
+
setRenderMonth(dayjs(renderMonth).set("year", selectYear).toDate());
|
|
278
|
+
onYearChange == null ? void 0 : onYearChange(e, {
|
|
279
|
+
year: selectYear
|
|
280
|
+
});
|
|
281
|
+
setOpenPicker(false);
|
|
282
|
+
};
|
|
242
283
|
let data = {};
|
|
243
284
|
if (isRangeMode) {
|
|
244
285
|
data = {
|
|
@@ -266,7 +307,7 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
|
|
|
266
307
|
className: `${classes.handler}-btn-icon`,
|
|
267
308
|
htmlColor: isMinMonth && "#cccccc"
|
|
268
309
|
}
|
|
269
|
-
)), /* @__PURE__ */ React.createElement("div", { className: `${classes.handler}-text
|
|
310
|
+
)), /* @__PURE__ */ React.createElement("div", { className: `${classes.handler}-text`, onClick: onClickDate }, dayjs(renderMonth).format("YYYY/MM")), /* @__PURE__ */ React.createElement("div", { onClick: onClickNext, className: `${classes.handler}-btn` }, /* @__PURE__ */ React.createElement(
|
|
270
311
|
CaretRightIcon,
|
|
271
312
|
{
|
|
272
313
|
className: `${classes.handler}-btn-icon`,
|
|
@@ -276,13 +317,23 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
|
|
|
276
317
|
/* @__PURE__ */ React.createElement("div", { className: classes.week }, SUNDAY_WEEK_DATA == null ? void 0 : SUNDAY_WEEK_DATA.map((w) => {
|
|
277
318
|
return weekRender ? weekRender(w) : /* @__PURE__ */ React.createElement("div", { key: w, className: `${classes.week}-item` }, w);
|
|
278
319
|
})),
|
|
279
|
-
/* @__PURE__ */ React.createElement("div", { className: clsx(`${classes.root}-month`) }, renderDayList())
|
|
320
|
+
/* @__PURE__ */ React.createElement("div", { className: clsx(`${classes.root}-month`) }, renderDayList()),
|
|
321
|
+
enableSelectYear && /* @__PURE__ */ React.createElement(Suspense, { fallback: null }, /* @__PURE__ */ React.createElement(
|
|
322
|
+
Picker,
|
|
323
|
+
{
|
|
324
|
+
options: [getYearsList()],
|
|
325
|
+
open: openPicker,
|
|
326
|
+
value: [dayjs(renderMonth).year()],
|
|
327
|
+
onClose: onClosePicker
|
|
328
|
+
}
|
|
329
|
+
))
|
|
280
330
|
);
|
|
281
331
|
}
|
|
282
332
|
);
|
|
283
333
|
Calendar.displayName = "BuiCalendar";
|
|
284
334
|
Calendar.defaultProps = {
|
|
285
335
|
hideDaysOutsideCurrentMonth: false,
|
|
336
|
+
enableSelectYear: false,
|
|
286
337
|
mode: "single",
|
|
287
338
|
minDate: dayjs(dayjs().format("YYYYMMDD")).add(0, "month").toDate(),
|
|
288
339
|
maxDate: dayjs(dayjs().format("YYYYMMDD")).add(11, "month").toDate(),
|
|
@@ -12,6 +12,10 @@ export interface ICalendarMonthChangeData {
|
|
|
12
12
|
/** 操作类型,prev: 点击上个月 next: 点击下个月 */
|
|
13
13
|
type: 'prev' | 'next';
|
|
14
14
|
}
|
|
15
|
+
export interface ICalendarYearChangeData {
|
|
16
|
+
/** 切换后的年份 */
|
|
17
|
+
year: number;
|
|
18
|
+
}
|
|
15
19
|
export type ICalendarMode = 'single' | 'range';
|
|
16
20
|
export type ICalendarValue = Date | Date[] | null;
|
|
17
21
|
export type CalendarProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
|
|
@@ -61,6 +65,14 @@ export type CalendarProps<D extends React.ElementType = 'div', P = {}> = Overrid
|
|
|
61
65
|
* 自定义周单元格的内容
|
|
62
66
|
*/
|
|
63
67
|
weekRender?: (week: string) => React.ReactNode;
|
|
68
|
+
/**
|
|
69
|
+
* 是否开启选择年
|
|
70
|
+
*/
|
|
71
|
+
enableSelectYear?: boolean;
|
|
72
|
+
/**
|
|
73
|
+
* 年份发生变化的回调
|
|
74
|
+
*/
|
|
75
|
+
onYearChange?: (e: React.SyntheticEvent, data: ICalendarYearChangeData) => void;
|
|
64
76
|
/**
|
|
65
77
|
* 月份发生变化的回调
|
|
66
78
|
*/
|
|
@@ -82,6 +82,9 @@ const Countdown = forwardRef((props, ref) => {
|
|
|
82
82
|
if (serverTimestamp && endTimestamp) {
|
|
83
83
|
setStartTime(serverTimestamp);
|
|
84
84
|
setEndTime(endTimestamp);
|
|
85
|
+
} else if (endTimestamp) {
|
|
86
|
+
setStartTime(Date.now());
|
|
87
|
+
setEndTime(endTimestamp);
|
|
85
88
|
}
|
|
86
89
|
}, [serverTimestamp, endTimestamp]);
|
|
87
90
|
const defaultRender = (timeIns) => {
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
import React, { useRef } from "react";
|
|
33
|
+
import clsx from "clsx";
|
|
34
|
+
import { Input } from "../Input";
|
|
35
|
+
import { Button } from "../Button";
|
|
36
|
+
import Modal from "../Modal";
|
|
37
|
+
import "./index.css";
|
|
38
|
+
const prefixCls = "bui-dialog";
|
|
39
|
+
const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
40
|
+
const _a = props, {
|
|
41
|
+
open,
|
|
42
|
+
onOk,
|
|
43
|
+
onClose,
|
|
44
|
+
header,
|
|
45
|
+
message,
|
|
46
|
+
type,
|
|
47
|
+
confirmText,
|
|
48
|
+
cancelText,
|
|
49
|
+
placeholder,
|
|
50
|
+
InputProps,
|
|
51
|
+
className
|
|
52
|
+
} = _a, others = __objRest(_a, [
|
|
53
|
+
"open",
|
|
54
|
+
"onOk",
|
|
55
|
+
"onClose",
|
|
56
|
+
"header",
|
|
57
|
+
"message",
|
|
58
|
+
"type",
|
|
59
|
+
"confirmText",
|
|
60
|
+
"cancelText",
|
|
61
|
+
"placeholder",
|
|
62
|
+
"InputProps",
|
|
63
|
+
"className"
|
|
64
|
+
]);
|
|
65
|
+
const InputRef = useRef(null);
|
|
66
|
+
const footerNode = /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body-footer` }, /* @__PURE__ */ React.createElement(
|
|
67
|
+
Button,
|
|
68
|
+
{
|
|
69
|
+
variant: "text",
|
|
70
|
+
onClick: onClose,
|
|
71
|
+
className: `${prefixCls}-body-button`
|
|
72
|
+
},
|
|
73
|
+
cancelText || "\u53D6\u6D88"
|
|
74
|
+
), /* @__PURE__ */ React.createElement(
|
|
75
|
+
Button,
|
|
76
|
+
{
|
|
77
|
+
variant: "text",
|
|
78
|
+
color: "primary",
|
|
79
|
+
onClick: () => {
|
|
80
|
+
var _a2;
|
|
81
|
+
onOk((_a2 = InputRef == null ? void 0 : InputRef.current) == null ? void 0 : _a2.value);
|
|
82
|
+
},
|
|
83
|
+
className: `${prefixCls}-body-button`
|
|
84
|
+
},
|
|
85
|
+
confirmText || "\u786E\u5B9A"
|
|
86
|
+
));
|
|
87
|
+
const inputNode = type === "prompt" && /* @__PURE__ */ React.createElement(
|
|
88
|
+
Input,
|
|
89
|
+
__spreadProps(__spreadValues({}, InputProps), {
|
|
90
|
+
inputRef: InputRef,
|
|
91
|
+
className: `${prefixCls}-body-input`,
|
|
92
|
+
placeholder: `${placeholder || "\u8BF7\u5728\u6B64\u5904\u8F93\u5165"}`
|
|
93
|
+
})
|
|
94
|
+
);
|
|
95
|
+
if (!open)
|
|
96
|
+
return null;
|
|
97
|
+
return /* @__PURE__ */ React.createElement(
|
|
98
|
+
Modal,
|
|
99
|
+
__spreadProps(__spreadValues({}, others), {
|
|
100
|
+
open: true,
|
|
101
|
+
className: clsx(prefixCls, className),
|
|
102
|
+
disablePortal: true,
|
|
103
|
+
onClose,
|
|
104
|
+
ref
|
|
105
|
+
}),
|
|
106
|
+
/* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body` }, header && /* @__PURE__ */ React.createElement("h1", { className: `${prefixCls}-body-title` }, header), message && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body-desc` }, message), inputNode, footerNode)
|
|
107
|
+
);
|
|
108
|
+
});
|
|
109
|
+
Dialog.displayName = "BuiDialog";
|
|
110
|
+
var Dialog_default = Dialog;
|
|
111
|
+
export {
|
|
112
|
+
Dialog_default as default
|
|
113
|
+
};
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { ModalProps } from '../Modal/Modal.types';
|
|
3
|
+
import { InputProps } from '../Input/Input.types';
|
|
4
|
+
/**
|
|
5
|
+
* 对话框类型
|
|
6
|
+
*/
|
|
7
|
+
export type DialogType = 'confirm' | 'prompt';
|
|
8
|
+
export type Dispatch = (action: boolean, val?: string) => void;
|
|
9
|
+
export interface DialogProps extends ModalProps {
|
|
10
|
+
/**
|
|
11
|
+
* 对话框类型
|
|
12
|
+
* @default confirm
|
|
13
|
+
*/
|
|
14
|
+
type?: DialogType;
|
|
15
|
+
/**
|
|
16
|
+
* 自定义标题
|
|
17
|
+
*/
|
|
18
|
+
header?: ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* 自定义内容
|
|
21
|
+
*/
|
|
22
|
+
message?: ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* 输入框占位文本
|
|
25
|
+
*/
|
|
26
|
+
placeholder?: string;
|
|
27
|
+
/**
|
|
28
|
+
* 透传给内部Input组件的属性
|
|
29
|
+
*/
|
|
30
|
+
InputProps?: Partial<InputProps>;
|
|
31
|
+
/**
|
|
32
|
+
* 确认文本内容
|
|
33
|
+
*/
|
|
34
|
+
confirmText?: ReactNode;
|
|
35
|
+
/**
|
|
36
|
+
* 取消文本内容
|
|
37
|
+
*/
|
|
38
|
+
cancelText?: ReactNode;
|
|
39
|
+
/**
|
|
40
|
+
* 确认回调
|
|
41
|
+
*/
|
|
42
|
+
onOk?: (val?: string) => void;
|
|
43
|
+
/**
|
|
44
|
+
* 取消回调
|
|
45
|
+
*/
|
|
46
|
+
onClose?: () => void;
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* 函数式调用配置参数
|
|
50
|
+
*/
|
|
51
|
+
export type DialogOptions = Omit<DialogProps, 'placeholder' | 'inputProps' | 'onOk' | 'onClose'> & {
|
|
52
|
+
/**
|
|
53
|
+
* 确认回调
|
|
54
|
+
*/
|
|
55
|
+
onConfirm?: (val?: string) => void | Promise<void>;
|
|
56
|
+
/**
|
|
57
|
+
* 取消回调
|
|
58
|
+
*/
|
|
59
|
+
onCancel?: () => void | Promise<void>;
|
|
60
|
+
};
|
|
61
|
+
/**
|
|
62
|
+
* prompt函数式调用配置参数
|
|
63
|
+
*/
|
|
64
|
+
export type PromptOptions = (DialogOptions & {
|
|
65
|
+
/**
|
|
66
|
+
* 输入框占位文本
|
|
67
|
+
*/
|
|
68
|
+
placeholder?: string;
|
|
69
|
+
/**
|
|
70
|
+
* 内部<input>标签的标准属性
|
|
71
|
+
*/
|
|
72
|
+
inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
|
|
73
|
+
}) | string;
|
|
74
|
+
/**
|
|
75
|
+
* confirm函数式调用配置参数
|
|
76
|
+
*/
|
|
77
|
+
export type ConfirmOptions = DialogOptions | string;
|
|
78
|
+
/**
|
|
79
|
+
* Dialog函数式调用返回值类型
|
|
80
|
+
*/
|
|
81
|
+
export type DialogPromise = Promise<boolean | string>;
|
|
82
|
+
/**
|
|
83
|
+
* Dialog Instance
|
|
84
|
+
*/
|
|
85
|
+
export interface DialogInstance {
|
|
86
|
+
/**
|
|
87
|
+
* 直接调用显示确认框 Dialog
|
|
88
|
+
*/
|
|
89
|
+
(options: ConfirmOptions): DialogPromise;
|
|
90
|
+
/**
|
|
91
|
+
* 显示确认框 Dialog.confirm
|
|
92
|
+
*/
|
|
93
|
+
confirm?: (options: ConfirmOptions) => DialogPromise;
|
|
94
|
+
/**
|
|
95
|
+
* 显示提示对话框 Dialog.prompt
|
|
96
|
+
*/
|
|
97
|
+
prompt?: (options: PromptOptions, val?: string) => DialogPromise;
|
|
98
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
var __async = (__this, __arguments, generator) => {
|
|
33
|
+
return new Promise((resolve, reject) => {
|
|
34
|
+
var fulfilled = (value) => {
|
|
35
|
+
try {
|
|
36
|
+
step(generator.next(value));
|
|
37
|
+
} catch (e) {
|
|
38
|
+
reject(e);
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
var rejected = (value) => {
|
|
42
|
+
try {
|
|
43
|
+
step(generator.throw(value));
|
|
44
|
+
} catch (e) {
|
|
45
|
+
reject(e);
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
49
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
import React, { useCallback, useEffect, useState } from "react";
|
|
53
|
+
import { getRootElement, render, unmount } from "@bifrostui/utils";
|
|
54
|
+
import Popup from "./Dialog";
|
|
55
|
+
const { isValidElement, Component } = React;
|
|
56
|
+
const formatProps = (props) => {
|
|
57
|
+
if (typeof props === "string" || isValidElement(props)) {
|
|
58
|
+
return { message: props };
|
|
59
|
+
}
|
|
60
|
+
return props;
|
|
61
|
+
};
|
|
62
|
+
const DialogGenerator = (options) => {
|
|
63
|
+
const rootWrapper = document.createElement("div");
|
|
64
|
+
const rootElement = getRootElement();
|
|
65
|
+
rootElement.appendChild(rootWrapper);
|
|
66
|
+
const DialogComponent = () => {
|
|
67
|
+
const _a = options, { onConfirm, onCancel } = _a, others = __objRest(_a, ["onConfirm", "onCancel"]);
|
|
68
|
+
const [visible, setVisible] = useState(false);
|
|
69
|
+
const close = useCallback(() => {
|
|
70
|
+
setVisible(false);
|
|
71
|
+
setTimeout(() => {
|
|
72
|
+
const unmountRes = unmount(rootWrapper);
|
|
73
|
+
if (unmountRes && rootWrapper.parentNode) {
|
|
74
|
+
rootWrapper.parentNode.removeChild(rootWrapper);
|
|
75
|
+
}
|
|
76
|
+
}, 150);
|
|
77
|
+
}, [rootWrapper]);
|
|
78
|
+
useEffect(() => {
|
|
79
|
+
setVisible(true);
|
|
80
|
+
}, []);
|
|
81
|
+
const dispatch = (action, val) => __async(void 0, null, function* () {
|
|
82
|
+
if (action === true) {
|
|
83
|
+
try {
|
|
84
|
+
yield onConfirm == null ? void 0 : onConfirm(val);
|
|
85
|
+
} catch (error) {
|
|
86
|
+
}
|
|
87
|
+
} else if (action === false) {
|
|
88
|
+
try {
|
|
89
|
+
yield onCancel == null ? void 0 : onCancel();
|
|
90
|
+
} catch (error) {
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
close();
|
|
94
|
+
});
|
|
95
|
+
return /* @__PURE__ */ React.createElement(
|
|
96
|
+
Popup,
|
|
97
|
+
__spreadProps(__spreadValues({}, others), {
|
|
98
|
+
open: visible,
|
|
99
|
+
onOk: (val) => dispatch(true, val),
|
|
100
|
+
onClose: () => dispatch(false)
|
|
101
|
+
})
|
|
102
|
+
);
|
|
103
|
+
};
|
|
104
|
+
return render(/* @__PURE__ */ React.createElement(DialogComponent, null), rootWrapper);
|
|
105
|
+
};
|
|
106
|
+
const Dialog = (props) => {
|
|
107
|
+
const options = formatProps(props);
|
|
108
|
+
const _a = options, { onConfirm, onCancel } = _a, rest = __objRest(_a, ["onConfirm", "onCancel"]);
|
|
109
|
+
return new Promise((resolve) => {
|
|
110
|
+
DialogGenerator(__spreadProps(__spreadValues({}, rest), {
|
|
111
|
+
onConfirm: (val) => __async(void 0, null, function* () {
|
|
112
|
+
yield onConfirm == null ? void 0 : onConfirm(val);
|
|
113
|
+
if (rest.type === "prompt")
|
|
114
|
+
resolve(val);
|
|
115
|
+
else
|
|
116
|
+
resolve(true);
|
|
117
|
+
}),
|
|
118
|
+
onCancel: () => __async(void 0, null, function* () {
|
|
119
|
+
yield onCancel == null ? void 0 : onCancel();
|
|
120
|
+
resolve(false);
|
|
121
|
+
})
|
|
122
|
+
}));
|
|
123
|
+
});
|
|
124
|
+
};
|
|
125
|
+
Dialog.prototype = Component.prototype;
|
|
126
|
+
const confirm = (options) => {
|
|
127
|
+
return Dialog(__spreadValues({
|
|
128
|
+
type: "confirm"
|
|
129
|
+
}, formatProps(options)));
|
|
130
|
+
};
|
|
131
|
+
const prompt = (options) => {
|
|
132
|
+
return Dialog(__spreadValues({
|
|
133
|
+
type: "prompt"
|
|
134
|
+
}, formatProps(options)));
|
|
135
|
+
};
|
|
136
|
+
Dialog.confirm = confirm;
|
|
137
|
+
Dialog.prompt = prompt;
|
|
138
|
+
var FunctionalDialog_default = Dialog;
|
|
139
|
+
export {
|
|
140
|
+
FunctionalDialog_default as default
|
|
141
|
+
};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
.bui-dialog {
|
|
2
|
+
--max-width: 300px;
|
|
3
|
+
--border-radius: var(--bui-shape-radius-drawer);
|
|
4
|
+
--header-font-size: var(--bui-title-size-2);
|
|
5
|
+
--message-font-size: var(--bui-title-size-4);
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
}
|
|
10
|
+
.bui-dialog-body {
|
|
11
|
+
padding-top: 21px;
|
|
12
|
+
min-width: var(--max-width);
|
|
13
|
+
margin: 0 auto;
|
|
14
|
+
border-radius: var(--border-radius);
|
|
15
|
+
background-clip: padding-box;
|
|
16
|
+
background-color: var(--bui-color-bg-view);
|
|
17
|
+
line-height: 21px;
|
|
18
|
+
}
|
|
19
|
+
.bui-dialog-body-title {
|
|
20
|
+
padding: 0 40px 9px;
|
|
21
|
+
font-size: var(--header-font-size);
|
|
22
|
+
text-align: center;
|
|
23
|
+
color: var(--bui-color-fg-default);
|
|
24
|
+
font-weight: 500;
|
|
25
|
+
}
|
|
26
|
+
.bui-dialog-body-title + .bui-dialog-body-footer {
|
|
27
|
+
margin-top: 6px;
|
|
28
|
+
}
|
|
29
|
+
.bui-dialog-body-desc {
|
|
30
|
+
padding: 0 24px;
|
|
31
|
+
color: var(--bui-color-fg-muted);
|
|
32
|
+
font-size: var(--message-font-size);
|
|
33
|
+
text-align: center;
|
|
34
|
+
}
|
|
35
|
+
.bui-dialog-body-desc:first-child {
|
|
36
|
+
padding-top: 0;
|
|
37
|
+
}
|
|
38
|
+
.bui-dialog-body-footer {
|
|
39
|
+
margin-top: 15px;
|
|
40
|
+
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
41
|
+
display: -webkit-box;
|
|
42
|
+
display: flex;
|
|
43
|
+
}
|
|
44
|
+
.bui-dialog-body-input {
|
|
45
|
+
width: calc(100% - 48px);
|
|
46
|
+
margin: 14px 24px 0;
|
|
47
|
+
}
|
|
48
|
+
.bui-dialog-body-button {
|
|
49
|
+
flex: 1;
|
|
50
|
+
display: block;
|
|
51
|
+
width: 100%;
|
|
52
|
+
height: 53px;
|
|
53
|
+
line-height: 25px;
|
|
54
|
+
padding: 12px 0 13px;
|
|
55
|
+
font-size: 17px;
|
|
56
|
+
background: 0 0;
|
|
57
|
+
border: 0;
|
|
58
|
+
outline: 0;
|
|
59
|
+
border-left: 1px solid rgba(0, 0, 0, 0.05);
|
|
60
|
+
border-radius: 0;
|
|
61
|
+
text-align: center;
|
|
62
|
+
box-sizing: border-box;
|
|
63
|
+
}
|
|
64
|
+
.bui-dialog-body-button:active {
|
|
65
|
+
background-color: rgba(54, 57, 64, 0.05);
|
|
66
|
+
}
|
|
@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
|
|
|
12
12
|
keepMounted?: boolean;
|
|
13
13
|
} & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
14
14
|
ref?: React.Ref<HTMLDivElement>;
|
|
15
|
-
}, "open" | keyof import("@bifrostui/types").ICommonProps | "
|
|
15
|
+
}, "open" | keyof import("@bifrostui/types").ICommonProps | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
16
16
|
export default Modal;
|
package/es/Radio/Radio.js
CHANGED
|
@@ -85,7 +85,7 @@ const Radio = forwardRef((props, ref) => {
|
|
|
85
85
|
console.error("RadioGroup\u6A21\u5F0F\u4E0BRadio\u987B\u4F20\u5165value\u5C5E\u6027");
|
|
86
86
|
}
|
|
87
87
|
const radioCheckIcon = checkedIcon || /* @__PURE__ */ React.createElement(RadioButtonIcon, { checked: true });
|
|
88
|
-
const radioUncheckIcon = icon || /* @__PURE__ */ React.createElement(RadioButtonIcon,
|
|
88
|
+
const radioUncheckIcon = icon || /* @__PURE__ */ React.createElement(RadioButtonIcon, { checked: false });
|
|
89
89
|
const radioDisabled = disabled !== void 0 ? disabled : groupContext == null ? void 0 : groupContext.disabled;
|
|
90
90
|
const changeAction = (e, isChecked) => {
|
|
91
91
|
var _a2;
|
|
@@ -1,12 +1,7 @@
|
|
|
1
1
|
import { ISvgIconProps } from '@bifrostui/icons';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
export interface IRadioButtonIconProps extends ISvgIconProps {
|
|
4
|
-
checked
|
|
4
|
+
checked: boolean;
|
|
5
5
|
}
|
|
6
6
|
declare function RadioButtonIcon(props: IRadioButtonIconProps): React.JSX.Element;
|
|
7
|
-
declare namespace RadioButtonIcon {
|
|
8
|
-
var defaultProps: {
|
|
9
|
-
checked: boolean;
|
|
10
|
-
};
|
|
11
|
-
}
|
|
12
7
|
export default RadioButtonIcon;
|