@hsu-react/ui 0.0.17 → 0.0.18

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.
Files changed (7) hide show
  1. package/es/components/SecondConf/index.d.ts +13 -2
  2. package/es/components/SecondConf/index.js +66 -26
  3. package/lib/components/SecondConf/index.d.ts +13 -2
  4. package/lib/components/SecondConf/index.js +55 -24
  5. package/package.json +1 -1
  6. package/src/components/SecondConf/index.md +42 -0
  7. package/src/components/SecondConf/index.tsx +72 -22
package/es/components/SecondConf/index.d.ts CHANGED
@@ -1,8 +1,19 @@
1
- import React, { ReactNode } from "react";
1
+ import React, { ReactElement, ReactNode } from "react";
2
2
  import { ModalProps } from "../Modal";
3
- interface SecondConfProps extends Omit<ModalProps, "title"> {
3
+ export interface SecondConfProps extends Omit<ModalProps, "title" | "children"> {
4
4
  contentTitle?: ReactNode;
5
5
  contentText?: ReactNode;
6
+ /**
7
+ * Trigger element (button/icon). When provided and `open` is omitted, the
8
+ * dialog owns its open state, so the caller does not have to keep one flag
9
+ * per confirmable action — which is otherwise impossible inside a list
10
+ * `map()`. The child's own `onClick` still fires first, and the click stops
11
+ * propagating so a trigger nested in a clickable row or card does not also
12
+ * activate that row.
13
+ */
14
+ children?: ReactElement<{
15
+ onClick?: (e: React.MouseEvent) => void;
16
+ }>;
6
17
  }
7
18
  declare const SecondConf: React.FC<SecondConfProps>;
8
19
  export default SecondConf;
package/es/components/SecondConf/index.js CHANGED
@@ -1,47 +1,87 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["classNames", "contentTitle", "contentText"];
2
+ var _excluded = ["classNames", "contentTitle", "contentText", "children", "open", "onOk", "onCancel"];
3
3
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
4
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
5
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
6
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
7
7
  function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
8
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
9
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
10
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
11
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
12
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
13
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
8
14
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
9
15
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
10
- import React from "react";
16
+ import React, { cloneElement, useState } from "react";
11
17
  import styles from "./index.module.scss";
12
18
  import Icon from "../Icon";
13
19
  import Modal from "../Modal";
14
20
  import { jsx as _jsx } from "react/jsx-runtime";
15
21
  import { jsxs as _jsxs } from "react/jsx-runtime";
22
+ import { Fragment as _Fragment } from "react/jsx-runtime";
16
23
  var SecondConf = function SecondConf(props) {
17
24
  var classNames = props.classNames,
18
25
  contentTitle = props.contentTitle,
19
26
  contentText = props.contentText,
27
+ children = props.children,
28
+ open = props.open,
29
+ onOk = props.onOk,
30
+ onCancel = props.onCancel,
20
31
  modalConfig = _objectWithoutProperties(props, _excluded);
21
- return /*#__PURE__*/_jsxs(Modal, _objectSpread(_objectSpread({
22
- width: 800
23
- }, modalConfig), {}, {
24
- centered: true,
25
- className: styles.SecondConf,
26
- classNames: _objectSpread({
27
- body: "".concat(styles.body, " ").concat((classNames === null || classNames === void 0 ? void 0 : classNames.body) || "")
28
- }, classNames),
29
- maskClosable: false,
30
- mask: false,
31
- title: " ",
32
- children: [/*#__PURE__*/_jsx(Icon, {
33
- icon: "mingcute:question-line",
34
- className: styles.icon
35
- }), /*#__PURE__*/_jsxs("div", {
36
- className: styles.content,
37
- children: [/*#__PURE__*/_jsxs("div", {
38
- className: styles.title,
39
- children: ["\u786E\u8BA4", contentTitle, "\u5417\uFF1F"]
40
- }), /*#__PURE__*/_jsx("div", {
41
- className: styles.text,
42
- children: contentText
32
+ var _useState = useState(false),
33
+ _useState2 = _slicedToArray(_useState, 2),
34
+ selfOpen = _useState2[0],
35
+ setSelfOpen = _useState2[1];
36
+
37
+ // Controlled whenever `open` is supplied; self-managed only in trigger mode.
38
+ var isControlled = open !== undefined;
39
+ var visible = isControlled ? open : selfOpen;
40
+ var trigger = children && /*#__PURE__*/cloneElement(children, {
41
+ onClick: function onClick(e) {
42
+ var _children$props$onCli, _children$props;
43
+ e.stopPropagation();
44
+ (_children$props$onCli = (_children$props = children.props).onClick) === null || _children$props$onCli === void 0 || _children$props$onCli.call(_children$props, e);
45
+ if (!isControlled) setSelfOpen(true);
46
+ }
47
+ });
48
+ var handleOk = function handleOk(e) {
49
+ if (!isControlled) setSelfOpen(false);
50
+ onOk === null || onOk === void 0 || onOk(e);
51
+ };
52
+ var handleCancel = function handleCancel(e) {
53
+ if (!isControlled) setSelfOpen(false);
54
+ onCancel === null || onCancel === void 0 || onCancel(e);
55
+ };
56
+ return /*#__PURE__*/_jsxs(_Fragment, {
57
+ children: [trigger, /*#__PURE__*/_jsxs(Modal, _objectSpread(_objectSpread({
58
+ width: 800
59
+ }, modalConfig), {}, {
60
+ open: visible,
61
+ onOk: handleOk,
62
+ onCancel: handleCancel,
63
+ centered: true,
64
+ className: styles.SecondConf,
65
+ classNames: _objectSpread({
66
+ body: "".concat(styles.body, " ").concat((classNames === null || classNames === void 0 ? void 0 : classNames.body) || "")
67
+ }, classNames),
68
+ maskClosable: false,
69
+ mask: false,
70
+ title: " ",
71
+ children: [/*#__PURE__*/_jsx(Icon, {
72
+ icon: "mingcute:question-line",
73
+ className: styles.icon
74
+ }), /*#__PURE__*/_jsxs("div", {
75
+ className: styles.content,
76
+ children: [/*#__PURE__*/_jsxs("div", {
77
+ className: styles.title,
78
+ children: ["\u786E\u8BA4", contentTitle, "\u5417\uFF1F"]
79
+ }), /*#__PURE__*/_jsx("div", {
80
+ className: styles.text,
81
+ children: contentText
82
+ })]
43
83
  })]
44
- })]
45
- }));
84
+ }))]
85
+ });
46
86
  };
47
87
  export default SecondConf;
package/lib/components/SecondConf/index.d.ts CHANGED
@@ -1,8 +1,19 @@
1
- import React, { ReactNode } from "react";
1
+ import React, { ReactElement, ReactNode } from "react";
2
2
  import { ModalProps } from "../Modal";
3
- interface SecondConfProps extends Omit<ModalProps, "title"> {
3
+ export interface SecondConfProps extends Omit<ModalProps, "title" | "children"> {
4
4
  contentTitle?: ReactNode;
5
5
  contentText?: ReactNode;
6
+ /**
7
+ * Trigger element (button/icon). When provided and `open` is omitted, the
8
+ * dialog owns its open state, so the caller does not have to keep one flag
9
+ * per confirmable action — which is otherwise impossible inside a list
10
+ * `map()`. The child's own `onClick` still fires first, and the click stops
11
+ * propagating so a trigger nested in a clickable row or card does not also
12
+ * activate that row.
13
+ */
14
+ children?: ReactElement<{
15
+ onClick?: (e: React.MouseEvent) => void;
16
+ }>;
6
17
  }
7
18
  declare const SecondConf: React.FC<SecondConfProps>;
8
19
  export default SecondConf;
package/lib/components/SecondConf/index.js CHANGED
@@ -4,42 +4,73 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
7
+ var _react = _interopRequireWildcard(require("react"));
8
8
  var _indexModule = _interopRequireDefault(require("./index.module.scss"));
9
9
  var _Icon = _interopRequireDefault(require("../Icon"));
10
10
  var _Modal = _interopRequireDefault(require("../Modal"));
11
11
  var _jsxRuntime = require("react/jsx-runtime");
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
14
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
13
15
  const SecondConf = props => {
14
16
  const {
15
17
  classNames,
16
18
  contentTitle,
17
19
  contentText,
20
+ children,
21
+ open,
22
+ onOk,
23
+ onCancel,
18
24
  ...modalConfig
19
25
  } = props;
20
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
21
- width: 800,
22
- ...modalConfig,
23
- centered: true,
24
- className: _indexModule.default.SecondConf,
25
- classNames: {
26
- body: `${_indexModule.default.body} ${classNames?.body || ""}`,
27
- ...classNames
28
- },
29
- maskClosable: false,
30
- mask: false,
31
- title: " ",
32
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
33
- icon: "mingcute:question-line",
34
- className: _indexModule.default.icon
35
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
36
- className: _indexModule.default.content,
37
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
38
- className: _indexModule.default.title,
39
- children: ["\u786E\u8BA4", contentTitle, "\u5417\uFF1F"]
40
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
41
- className: _indexModule.default.text,
42
- children: contentText
26
+ const [selfOpen, setSelfOpen] = (0, _react.useState)(false);
27
+
28
+ // Controlled whenever `open` is supplied; self-managed only in trigger mode.
29
+ const isControlled = open !== undefined;
30
+ const visible = isControlled ? open : selfOpen;
31
+ const trigger = children && /*#__PURE__*/(0, _react.cloneElement)(children, {
32
+ onClick: e => {
33
+ e.stopPropagation();
34
+ children.props.onClick?.(e);
35
+ if (!isControlled) setSelfOpen(true);
36
+ }
37
+ });
38
+ const handleOk = e => {
39
+ if (!isControlled) setSelfOpen(false);
40
+ onOk?.(e);
41
+ };
42
+ const handleCancel = e => {
43
+ if (!isControlled) setSelfOpen(false);
44
+ onCancel?.(e);
45
+ };
46
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
47
+ children: [trigger, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
48
+ width: 800,
49
+ ...modalConfig,
50
+ open: visible,
51
+ onOk: handleOk,
52
+ onCancel: handleCancel,
53
+ centered: true,
54
+ className: _indexModule.default.SecondConf,
55
+ classNames: {
56
+ body: `${_indexModule.default.body} ${classNames?.body || ""}`,
57
+ ...classNames
58
+ },
59
+ maskClosable: false,
60
+ mask: false,
61
+ title: " ",
62
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
63
+ icon: "mingcute:question-line",
64
+ className: _indexModule.default.icon
65
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
66
+ className: _indexModule.default.content,
67
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
68
+ className: _indexModule.default.title,
69
+ children: ["\u786E\u8BA4", contentTitle, "\u5417\uFF1F"]
70
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
71
+ className: _indexModule.default.text,
72
+ children: contentText
73
+ })]
43
74
  })]
44
75
  })]
45
76
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hsu-react/ui",
3
- "version": "0.0.17",
3
+ "version": "0.0.18",
4
4
  "description": "一套基于 React + Ant Design 的中后台业务组件库",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/src/components/SecondConf/index.md CHANGED
@@ -43,6 +43,45 @@ export default () => {
43
43
  };
44
44
  ```
45
45
 
46
+ ## 触发器模式（推荐）
47
+
48
+ 传入 `children` 作为触发元素，并且**不传 `open`**，弹窗自持开关状态，调用处原地包一层即可，不必为每个可确认的操作各存一份 `open`。
49
+
50
+ 列表里尤其明显：`map()` 内部无法为每一行单独 `useState`，受控写法只能把「当前待确认的是哪一行」提到循环外，触发点和弹窗被拆到两个作用域；触发器模式没有这个问题。
51
+
52
+ ```tsx
53
+ import React from "react";
54
+ import { SecondConf } from "@hsu-react/ui";
55
+ import { Button } from "antd";
56
+
57
+ const list = [
58
+ { id: "1", name: "西游记" },
59
+ { id: "2", name: "水浒传" },
60
+ ];
61
+
62
+ export default () => (
63
+ <>
64
+ {list.map((it) => (
65
+ <SecondConf
66
+ key={it.id}
67
+ contentTitle={`删除《${it.name}》`}
68
+ contentText="删除后将无法恢复，请谨慎操作。"
69
+ okButtonProps={{ danger: true }}
70
+ onOk={() => console.log("deleted", it.id)}
71
+ >
72
+ <Button danger size="small" style={{ marginRight: 8 }}>
73
+ 删除 {it.name}
74
+ </Button>
75
+ </SecondConf>
76
+ ))}
77
+ </>
78
+ );
79
+ ```
80
+
81
+ 触发元素自身的 `onClick` 会照常先执行；点击会 `stopPropagation`，避免嵌在可点击的行/卡片里时连带触发整行的点击。
82
+
83
+ 同时传 `open` 和 `children` 时以受控为准，此时 `children` 只作为触发元素渲染，开关由外部决定。
84
+
46
85
  ## API
47
86
 
48
87
  在 `Modal`（即 antd `ModalProps`）基础上扩展（`title` 已被内部接管）：
@@ -51,5 +90,8 @@ export default () => {
51
90
  | --- | --- | --- | --- |
52
91
  | contentTitle | 标题中「确认 … 吗？」的中间内容 | `ReactNode` | - |
53
92
  | contentText | 标题下方的补充说明文案 | `ReactNode` | - |
93
+ | children | 触发元素；不传 `open` 时弹窗自持开关状态 | `ReactElement` | - |
54
94
 
55
95
  > 其余属性（`open`、`onOk`、`onCancel`、`width`、`confirmLoading` 等）与 `Modal` 一致；组件内部默认 `width={800}`、`centered`、`maskClosable={false}`、`mask={false}`。
96
+ >
97
+ > `open` 传了就是受控（含 `undefined` 以外的任何值），`onOk` / `onCancel` 里需自行关闭；不传则由组件自行开关，`onOk` 只写业务动作即可。
package/src/components/SecondConf/index.tsx CHANGED
@@ -1,36 +1,86 @@
1
- import React, { ReactNode } from "react";
1
+ import React, { ReactElement, ReactNode, cloneElement, useState } from "react";
2
2
  import styles from "./index.module.scss";
3
3
  import Icon from "../Icon";
4
4
  import Modal, { ModalProps } from "../Modal";
5
5
 
6
- interface SecondConfProps extends Omit<ModalProps, "title"> {
6
+ export interface SecondConfProps
7
+ extends Omit<ModalProps, "title" | "children"> {
7
8
  contentTitle?: ReactNode;
8
9
  contentText?: ReactNode;
10
+ /**
11
+ * Trigger element (button/icon). When provided and `open` is omitted, the
12
+ * dialog owns its open state, so the caller does not have to keep one flag
13
+ * per confirmable action — which is otherwise impossible inside a list
14
+ * `map()`. The child's own `onClick` still fires first, and the click stops
15
+ * propagating so a trigger nested in a clickable row or card does not also
16
+ * activate that row.
17
+ */
18
+ children?: ReactElement<{ onClick?: (e: React.MouseEvent) => void }>;
9
19
  }
10
20
 
11
21
  const SecondConf: React.FC<SecondConfProps> = (props) => {
12
- const { classNames, contentTitle, contentText, ...modalConfig } = props;
22
+ const {
23
+ classNames,
24
+ contentTitle,
25
+ contentText,
26
+ children,
27
+ open,
28
+ onOk,
29
+ onCancel,
30
+ ...modalConfig
31
+ } = props;
32
+ const [selfOpen, setSelfOpen] = useState<boolean>(false);
33
+
34
+ // Controlled whenever `open` is supplied; self-managed only in trigger mode.
35
+ const isControlled = open !== undefined;
36
+ const visible = isControlled ? open : selfOpen;
37
+
38
+ const trigger =
39
+ children &&
40
+ cloneElement(children, {
41
+ onClick: (e: React.MouseEvent) => {
42
+ e.stopPropagation();
43
+ children.props.onClick?.(e);
44
+ if (!isControlled) setSelfOpen(true);
45
+ },
46
+ });
47
+
48
+ const handleOk: ModalProps["onOk"] = (e) => {
49
+ if (!isControlled) setSelfOpen(false);
50
+ onOk?.(e);
51
+ };
52
+
53
+ const handleCancel: ModalProps["onCancel"] = (e) => {
54
+ if (!isControlled) setSelfOpen(false);
55
+ onCancel?.(e);
56
+ };
13
57
 
14
58
  return (
15
- <Modal
16
- width={800}
17
- {...modalConfig}
18
- centered
19
- className={styles.SecondConf}
20
- classNames={{
21
- body: `${styles.body} ${classNames?.body || ""}`,
22
- ...classNames,
23
- }}
24
- maskClosable={false}
25
- mask={false}
26
- title=" "
27
- >
28
- <Icon icon="mingcute:question-line" className={styles.icon} />
29
- <div className={styles.content}>
30
- <div className={styles.title}>确认{contentTitle}吗？</div>
31
- <div className={styles.text}>{contentText}</div>
32
- </div>
33
- </Modal>
59
+ <>
60
+ {trigger}
61
+ <Modal
62
+ width={800}
63
+ {...modalConfig}
64
+ open={visible}
65
+ onOk={handleOk}
66
+ onCancel={handleCancel}
67
+ centered
68
+ className={styles.SecondConf}
69
+ classNames={{
70
+ body: `${styles.body} ${classNames?.body || ""}`,
71
+ ...classNames,
72
+ }}
73
+ maskClosable={false}
74
+ mask={false}
75
+ title=" "
76
+ >
77
+ <Icon icon="mingcute:question-line" className={styles.icon} />
78
+ <div className={styles.content}>
79
+ <div className={styles.title}>确认{contentTitle}吗？</div>
80
+ <div className={styles.text}>{contentText}</div>
81
+ </div>
82
+ </Modal>
83
+ </>
34
84
  );
35
85
  };
36
86