@hi-ui/pop-confirm 5.0.0-experimental.0 → 5.0.0-experimental.1

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 (5) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/lib/cjs/PopConfirm.js +56 -14
  3. package/lib/esm/PopConfirm.js +57 -15
  4. package/lib/types/PopConfirm.d.ts +7 -1
  5. package/package.json +9 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @hi-ui/pop-confirm
2
2
 
3
+ ## 5.0.0-experimental.1
4
+
5
+ ### Minor Changes
6
+
7
+ - 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
8
+
9
+ ### Patch Changes
10
+
11
+ - eb17c4697: style: 修复 UI/样式问题 (5.0)
12
+ - Updated dependencies [7f204c892]
13
+ - Updated dependencies [eb17c4697]
14
+ - Updated dependencies [eb17c4697]
15
+ - Updated dependencies [c407744fe]
16
+ - Updated dependencies [59cef699f]
17
+ - @hi-ui/icons@5.0.0-experimental.1
18
+ - @hi-ui/core@5.0.0-experimental.1
19
+ - @hi-ui/button@5.0.0-experimental.1
20
+ - @hi-ui/popper@5.0.0-experimental.1
21
+ - @hi-ui/use-merge-semantic@5.0.0-experimental.0
22
+
3
23
  ## 5.0.0-experimental.0
4
24
 
5
25
  ### Major Changes
package/lib/cjs/PopConfirm.js CHANGED
@@ -22,6 +22,7 @@ var usePopConfirm = require('./use-pop-confirm.js');
22
22
  var Button = require('@hi-ui/button');
23
23
  var Popper = require('@hi-ui/popper');
24
24
  var index = require('./icons/index.js');
25
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
25
26
  var typeAssertion = require('@hi-ui/type-assertion');
26
27
  function _interopDefaultCompat(e) {
27
28
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
@@ -49,8 +50,38 @@ var PopConfirm = /*#__PURE__*/React.forwardRef(function (_a, ref) {
49
50
  cancelTextProp = _a.cancelText,
50
51
  confirmTextProp = _a.confirmText,
51
52
  footer = _a.footer,
52
- rest = tslib.__rest(_a, ["prefixCls", "innerRef", "role", "className", "children", "title", "content", "icon", "cancelText", "confirmText", "footer"]);
53
+ classNamesProp = _a.classNames,
54
+ stylesProp = _a.styles,
55
+ rest = tslib.__rest(_a, ["prefixCls", "innerRef", "role", "className", "children", "title", "content", "icon", "cancelText", "confirmText", "footer", "classNames", "styles"]);
53
56
  var i18n = core.useLocaleContext();
57
+ var _useGlobalContext = core.useGlobalContext(),
58
+ popConfirmConfig = _useGlobalContext.popConfirm;
59
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
60
+ classNamesList: [popConfirmConfig === null || popConfirmConfig === void 0 ? void 0 : popConfirmConfig.classNames, classNamesProp],
61
+ stylesList: [popConfirmConfig === null || popConfirmConfig === void 0 ? void 0 : popConfirmConfig.styles, stylesProp],
62
+ info: {
63
+ props: Object.assign(Object.assign({}, rest), {
64
+ title: title,
65
+ content: content,
66
+ icon: icon,
67
+ footer: footer
68
+ })
69
+ }
70
+ }),
71
+ classNames = _useMergeSemantic.classNames,
72
+ styles = _useMergeSemantic.styles;
73
+ var popperClassNames = {
74
+ root: classNames === null || classNames === void 0 ? void 0 : classNames.root,
75
+ container: classNames === null || classNames === void 0 ? void 0 : classNames.container,
76
+ arrow: classNames === null || classNames === void 0 ? void 0 : classNames.arrow,
77
+ content: classNames === null || classNames === void 0 ? void 0 : classNames.content
78
+ };
79
+ var popperStyles = {
80
+ root: styles === null || styles === void 0 ? void 0 : styles.root,
81
+ container: styles === null || styles === void 0 ? void 0 : styles.container,
82
+ arrow: styles === null || styles === void 0 ? void 0 : styles.arrow,
83
+ content: styles === null || styles === void 0 ? void 0 : styles.content
84
+ };
54
85
  var cancelText = typeAssertion.isUndef(cancelTextProp) ? i18n.get('popConfirm.cancelText') : cancelTextProp;
55
86
  var confirmText = typeAssertion.isUndef(confirmTextProp) ? i18n.get('popConfirm.confirmText') : confirmTextProp;
56
87
  var _usePopConfirm = usePopConfirm.usePopConfirm(rest),
@@ -72,29 +103,40 @@ var PopConfirm = /*#__PURE__*/React.forwardRef(function (_a, ref) {
72
103
  var hasFooter = hasConfirm || hasCancel || footer !== null;
73
104
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].isValidElement(children) ? /*#__PURE__*/React__default["default"].cloneElement(children,
74
105
  // @ts-ignore
75
- getTriggerProps(children.props, children.ref)) : null, /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], Object.assign({}, getPopperProps()), /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
106
+ getTriggerProps(children.props, children.ref)) : null, /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], Object.assign({}, getPopperProps(), {
107
+ classNames: popperClassNames,
108
+ styles: popperStyles
109
+ }), /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
76
110
  ref: ref,
77
- className: cls
111
+ className: classname.cx(cls, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
112
+ style: styles === null || styles === void 0 ? void 0 : styles.wrapper
78
113
  }, rootProps), /*#__PURE__*/React__default["default"].createElement("section", {
79
- className: prefixCls + "__content"
80
- }, icon ? /*#__PURE__*/React__default["default"].createElement("span", {
81
- className: prefixCls + "__content-icon"
82
- }, icon) : null, /*#__PURE__*/React__default["default"].createElement("div", {
83
- className: prefixCls + "__content-title"
84
- }, title)), content ? /*#__PURE__*/React__default["default"].createElement("div", {
85
- className: prefixCls + "__body"
86
- }, content) : null, hasFooter ? ( /*#__PURE__*/React__default["default"].createElement("footer", {
87
- className: prefixCls + "__footer"
114
+ className: classname.cx(prefixCls + "__content", classNames === null || classNames === void 0 ? void 0 : classNames.contentSection),
115
+ style: styles === null || styles === void 0 ? void 0 : styles.contentSection
116
+ }, icon ? ( /*#__PURE__*/React__default["default"].createElement("span", {
117
+ className: classname.cx(prefixCls + "__content-icon", classNames === null || classNames === void 0 ? void 0 : classNames.contentIcon),
118
+ style: styles === null || styles === void 0 ? void 0 : styles.contentIcon
119
+ }, icon)) : null, /*#__PURE__*/React__default["default"].createElement("div", {
120
+ className: classname.cx(prefixCls + "__content-title", classNames === null || classNames === void 0 ? void 0 : classNames.contentTitle),
121
+ style: styles === null || styles === void 0 ? void 0 : styles.contentTitle
122
+ }, title)), content ? ( /*#__PURE__*/React__default["default"].createElement("div", {
123
+ className: classname.cx(prefixCls + "__body", classNames === null || classNames === void 0 ? void 0 : classNames.body),
124
+ style: styles === null || styles === void 0 ? void 0 : styles.body
125
+ }, content)) : null, hasFooter ? ( /*#__PURE__*/React__default["default"].createElement("footer", {
126
+ className: classname.cx(prefixCls + "__footer", classNames === null || classNames === void 0 ? void 0 : classNames.footer),
127
+ style: styles === null || styles === void 0 ? void 0 : styles.footer
88
128
  }, footer === undefined ? [hasCancel ? ( /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
89
129
  key: "1",
90
- className: prefixCls + "__btn-cancel",
130
+ className: classname.cx(prefixCls + "__btn-cancel", classNames === null || classNames === void 0 ? void 0 : classNames.btnCancel),
131
+ style: styles === null || styles === void 0 ? void 0 : styles.btnCancel,
91
132
  type: "default",
92
133
  appearance: "line",
93
134
  size: "sm",
94
135
  onClick: onCancel
95
136
  }, cancelText)) : null, hasConfirm ? ( /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
96
137
  key: "2",
97
- className: prefixCls + "__btn-confirm",
138
+ className: classname.cx(prefixCls + "__btn-confirm", classNames === null || classNames === void 0 ? void 0 : classNames.btnConfirm),
139
+ style: styles === null || styles === void 0 ? void 0 : styles.btnConfirm,
98
140
  type: "primary",
99
141
  size: "sm",
100
142
  onClick: onConfirm
package/lib/esm/PopConfirm.js CHANGED
@@ -11,11 +11,12 @@ import { __rest } from 'tslib';
11
11
  import React, { forwardRef, useImperativeHandle } from 'react';
12
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
13
  import { __DEV__ } from '@hi-ui/env';
14
- import { useLocaleContext } from '@hi-ui/core';
14
+ import { useLocaleContext, useGlobalContext } from '@hi-ui/core';
15
15
  import { usePopConfirm } from './use-pop-confirm.js';
16
16
  import Button from '@hi-ui/button';
17
17
  import Popper from '@hi-ui/popper';
18
18
  import { defaultTipIcon } from './icons/index.js';
19
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
19
20
  import { isUndef } from '@hi-ui/type-assertion';
20
21
  var POP_CONFIRM_PREFIX = getPrefixCls('pop-confirm');
21
22
  /**
@@ -35,8 +36,38 @@ var PopConfirm = /*#__PURE__*/forwardRef(function (_a, ref) {
35
36
  cancelTextProp = _a.cancelText,
36
37
  confirmTextProp = _a.confirmText,
37
38
  footer = _a.footer,
38
- rest = __rest(_a, ["prefixCls", "innerRef", "role", "className", "children", "title", "content", "icon", "cancelText", "confirmText", "footer"]);
39
+ classNamesProp = _a.classNames,
40
+ stylesProp = _a.styles,
41
+ rest = __rest(_a, ["prefixCls", "innerRef", "role", "className", "children", "title", "content", "icon", "cancelText", "confirmText", "footer", "classNames", "styles"]);
39
42
  var i18n = useLocaleContext();
43
+ var _useGlobalContext = useGlobalContext(),
44
+ popConfirmConfig = _useGlobalContext.popConfirm;
45
+ var _useMergeSemantic = useMergeSemantic({
46
+ classNamesList: [popConfirmConfig === null || popConfirmConfig === void 0 ? void 0 : popConfirmConfig.classNames, classNamesProp],
47
+ stylesList: [popConfirmConfig === null || popConfirmConfig === void 0 ? void 0 : popConfirmConfig.styles, stylesProp],
48
+ info: {
49
+ props: Object.assign(Object.assign({}, rest), {
50
+ title: title,
51
+ content: content,
52
+ icon: icon,
53
+ footer: footer
54
+ })
55
+ }
56
+ }),
57
+ classNames = _useMergeSemantic.classNames,
58
+ styles = _useMergeSemantic.styles;
59
+ var popperClassNames = {
60
+ root: classNames === null || classNames === void 0 ? void 0 : classNames.root,
61
+ container: classNames === null || classNames === void 0 ? void 0 : classNames.container,
62
+ arrow: classNames === null || classNames === void 0 ? void 0 : classNames.arrow,
63
+ content: classNames === null || classNames === void 0 ? void 0 : classNames.content
64
+ };
65
+ var popperStyles = {
66
+ root: styles === null || styles === void 0 ? void 0 : styles.root,
67
+ container: styles === null || styles === void 0 ? void 0 : styles.container,
68
+ arrow: styles === null || styles === void 0 ? void 0 : styles.arrow,
69
+ content: styles === null || styles === void 0 ? void 0 : styles.content
70
+ };
40
71
  var cancelText = isUndef(cancelTextProp) ? i18n.get('popConfirm.cancelText') : cancelTextProp;
41
72
  var confirmText = isUndef(confirmTextProp) ? i18n.get('popConfirm.confirmText') : confirmTextProp;
42
73
  var _usePopConfirm = usePopConfirm(rest),
@@ -58,29 +89,40 @@ var PopConfirm = /*#__PURE__*/forwardRef(function (_a, ref) {
58
89
  var hasFooter = hasConfirm || hasCancel || footer !== null;
59
90
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children,
60
91
  // @ts-ignore
61
- getTriggerProps(children.props, children.ref)) : null, /*#__PURE__*/React.createElement(Popper, Object.assign({}, getPopperProps()), /*#__PURE__*/React.createElement("div", Object.assign({
92
+ getTriggerProps(children.props, children.ref)) : null, /*#__PURE__*/React.createElement(Popper, Object.assign({}, getPopperProps(), {
93
+ classNames: popperClassNames,
94
+ styles: popperStyles
95
+ }), /*#__PURE__*/React.createElement("div", Object.assign({
62
96
  ref: ref,
63
- className: cls
97
+ className: cx(cls, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
98
+ style: styles === null || styles === void 0 ? void 0 : styles.wrapper
64
99
  }, rootProps), /*#__PURE__*/React.createElement("section", {
65
- className: prefixCls + "__content"
66
- }, icon ? /*#__PURE__*/React.createElement("span", {
67
- className: prefixCls + "__content-icon"
68
- }, icon) : null, /*#__PURE__*/React.createElement("div", {
69
- className: prefixCls + "__content-title"
70
- }, title)), content ? /*#__PURE__*/React.createElement("div", {
71
- className: prefixCls + "__body"
72
- }, content) : null, hasFooter ? ( /*#__PURE__*/React.createElement("footer", {
73
- className: prefixCls + "__footer"
100
+ className: cx(prefixCls + "__content", classNames === null || classNames === void 0 ? void 0 : classNames.contentSection),
101
+ style: styles === null || styles === void 0 ? void 0 : styles.contentSection
102
+ }, icon ? ( /*#__PURE__*/React.createElement("span", {
103
+ className: cx(prefixCls + "__content-icon", classNames === null || classNames === void 0 ? void 0 : classNames.contentIcon),
104
+ style: styles === null || styles === void 0 ? void 0 : styles.contentIcon
105
+ }, icon)) : null, /*#__PURE__*/React.createElement("div", {
106
+ className: cx(prefixCls + "__content-title", classNames === null || classNames === void 0 ? void 0 : classNames.contentTitle),
107
+ style: styles === null || styles === void 0 ? void 0 : styles.contentTitle
108
+ }, title)), content ? ( /*#__PURE__*/React.createElement("div", {
109
+ className: cx(prefixCls + "__body", classNames === null || classNames === void 0 ? void 0 : classNames.body),
110
+ style: styles === null || styles === void 0 ? void 0 : styles.body
111
+ }, content)) : null, hasFooter ? ( /*#__PURE__*/React.createElement("footer", {
112
+ className: cx(prefixCls + "__footer", classNames === null || classNames === void 0 ? void 0 : classNames.footer),
113
+ style: styles === null || styles === void 0 ? void 0 : styles.footer
74
114
  }, footer === undefined ? [hasCancel ? ( /*#__PURE__*/React.createElement(Button, {
75
115
  key: "1",
76
- className: prefixCls + "__btn-cancel",
116
+ className: cx(prefixCls + "__btn-cancel", classNames === null || classNames === void 0 ? void 0 : classNames.btnCancel),
117
+ style: styles === null || styles === void 0 ? void 0 : styles.btnCancel,
77
118
  type: "default",
78
119
  appearance: "line",
79
120
  size: "sm",
80
121
  onClick: onCancel
81
122
  }, cancelText)) : null, hasConfirm ? ( /*#__PURE__*/React.createElement(Button, {
82
123
  key: "2",
83
- className: prefixCls + "__btn-confirm",
124
+ className: cx(prefixCls + "__btn-confirm", classNames === null || classNames === void 0 ? void 0 : classNames.btnConfirm),
125
+ style: styles === null || styles === void 0 ? void 0 : styles.btnConfirm,
84
126
  type: "primary",
85
127
  size: "sm",
86
128
  onClick: onConfirm
package/lib/types/PopConfirm.d.ts CHANGED
@@ -1,12 +1,18 @@
1
1
  import React from 'react';
2
2
  import { HiBaseHTMLProps } from '@hi-ui/core';
3
3
  import { UsePopConfirmProps } from './use-pop-confirm';
4
+ import { PopperSemanticName } from '@hi-ui/popper';
5
+ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
4
6
  export declare const POP_CONFIRM_PREFIX: string;
5
7
  /**
6
8
  * 气泡确认框
7
9
  */
8
10
  export declare const PopConfirm: React.ForwardRefExoticComponent<PopConfirmProps & React.RefAttributes<HTMLDivElement | null>>;
9
- export interface PopConfirmProps extends Omit<HiBaseHTMLProps<'div'>, 'title'>, UsePopConfirmProps {
11
+ export type PopConfirmSemanticName = PopperSemanticName | 'wrapper' | 'contentSection' | 'contentIcon' | 'contentTitle' | 'body' | 'footer' | 'btnCancel' | 'btnConfirm';
12
+ export type PopConfirmSemanticClassNames = SemanticClassNamesType<PopConfirmProps, PopConfirmSemanticName>;
13
+ export type PopConfirmSemanticStyles = SemanticStylesType<PopConfirmProps, PopConfirmSemanticName>;
14
+ export type PopConfirmSemantic = ComponentSemantic<PopConfirmSemanticClassNames, PopConfirmSemanticStyles>;
15
+ export interface PopConfirmProps extends Omit<HiBaseHTMLProps<'div'>, 'title'>, UsePopConfirmProps, PopConfirmSemantic {
10
16
  innerRef?: React.Ref<{
11
17
  open: () => void;
12
18
  close: () => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/pop-confirm",
3
- "version": "5.0.0-experimental.0",
3
+ "version": "5.0.0-experimental.1",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -44,28 +44,29 @@
44
44
  "url": "https://github.com/XiaoMi/hiui/issues"
45
45
  },
46
46
  "dependencies": {
47
- "@hi-ui/button": "^5.0.0-experimental.0",
47
+ "@hi-ui/button": "^5.0.0-experimental.1",
48
48
  "@hi-ui/classname": "^5.0.0-experimental.0",
49
49
  "@hi-ui/dom-utils": "^5.0.0-experimental.0",
50
50
  "@hi-ui/env": "^5.0.0-experimental.0",
51
- "@hi-ui/icons": "^5.0.0-experimental.0",
52
- "@hi-ui/popper": "^5.0.0-experimental.0",
51
+ "@hi-ui/icons": "^5.0.0-experimental.1",
52
+ "@hi-ui/popper": "^5.0.0-experimental.1",
53
53
  "@hi-ui/react-compat": "^5.0.0-experimental.0",
54
54
  "@hi-ui/react-utils": "^5.0.0-experimental.0",
55
55
  "@hi-ui/type-assertion": "^5.0.0-experimental.0",
56
56
  "@hi-ui/use-id": "^5.0.0-experimental.0",
57
57
  "@hi-ui/use-latest": "^5.0.0-experimental.0",
58
58
  "@hi-ui/use-toggle": "^5.0.0-experimental.0",
59
- "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0"
59
+ "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0",
60
+ "@hi-ui/use-merge-semantic": "^5.0.0-experimental.0"
60
61
  },
61
62
  "peerDependencies": {
62
- "@hi-ui/core": ">=5.0.0-experimental.0",
63
+ "@hi-ui/core": ">=5.0.0-experimental.1",
63
64
  "react": ">=16.8.6",
64
65
  "react-dom": ">=16.8.6"
65
66
  },
66
67
  "devDependencies": {
67
- "@hi-ui/core": "^5.0.0-experimental.0",
68
- "@hi-ui/core-css": "^5.0.0-experimental.0",
68
+ "@hi-ui/core": "^5.0.0-experimental.1",
69
+ "@hi-ui/core-css": "^5.0.0-experimental.2",
69
70
  "react": "^17.0.1",
70
71
  "react-dom": "^17.0.1"
71
72
  }