@rc-component/trigger 1.11.0 → 1.12.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.
Files changed (15) hide show
  1. package/assets/index.css +5 -5
  2. package/assets/index.less +5 -5
  3. package/es/Popup/Arrow.d.ts +3 -2
  4. package/es/Popup/Arrow.js +10 -8
  5. package/es/Popup/index.d.ts +3 -2
  6. package/es/Popup/index.js +6 -1
  7. package/es/index.js +5 -3
  8. package/es/interface.d.ts +2 -1
  9. package/lib/Popup/Arrow.d.ts +3 -2
  10. package/lib/Popup/Arrow.js +11 -9
  11. package/lib/Popup/index.d.ts +3 -2
  12. package/lib/Popup/index.js +6 -1
  13. package/lib/index.js +5 -3
  14. package/lib/interface.d.ts +2 -1
  15. package/package.json +1 -1
package/assets/index.css CHANGED
@@ -31,34 +31,34 @@
31
31
  animation-play-state: running;
32
32
  }
33
33
  .rc-trigger-popup-arrow {
34
+ z-index: 1;
34
35
  width: 0px;
35
36
  height: 0px;
36
37
  background: #000;
37
38
  border-radius: 100vw;
38
39
  box-shadow: 0 0 0 3px black;
39
- z-index: 1;
40
40
  }
41
41
  @keyframes rcTriggerZoomIn {
42
42
  0% {
43
43
  transform: scale(0, 0);
44
- transform-origin: 50% 50%;
44
+ transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
45
45
  opacity: 0;
46
46
  }
47
47
  100% {
48
48
  transform: scale(1, 1);
49
- transform-origin: 50% 50%;
49
+ transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
50
50
  opacity: 1;
51
51
  }
52
52
  }
53
53
  @keyframes rcTriggerZoomOut {
54
54
  0% {
55
55
  transform: scale(1, 1);
56
- transform-origin: 50% 50%;
56
+ transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
57
57
  opacity: 1;
58
58
  }
59
59
  100% {
60
60
  transform: scale(0, 0);
61
- transform-origin: 50% 50%;
61
+ transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
62
62
  opacity: 0;
63
63
  }
64
64
  }
package/assets/index.less CHANGED
@@ -41,35 +41,35 @@
41
41
  }
42
42
 
43
43
  &-arrow {
44
+ z-index: 1;
44
45
  width: 0px;
45
46
  height: 0px;
46
47
  background: #000;
47
48
  border-radius: 100vw;
48
49
  box-shadow: 0 0 0 3px black;
49
- z-index: 1;
50
50
  }
51
51
 
52
52
  @keyframes rcTriggerZoomIn {
53
53
  0% {
54
54
  transform: scale(0, 0);
55
- transform-origin: 50% 50%;
55
+ transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
56
56
  opacity: 0;
57
57
  }
58
58
  100% {
59
59
  transform: scale(1, 1);
60
- transform-origin: 50% 50%;
60
+ transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
61
61
  opacity: 1;
62
62
  }
63
63
  }
64
64
  @keyframes rcTriggerZoomOut {
65
65
  0% {
66
66
  transform: scale(1, 1);
67
- transform-origin: 50% 50%;
67
+ transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
68
68
  opacity: 1;
69
69
  }
70
70
  100% {
71
71
  transform: scale(0, 0);
72
- transform-origin: 50% 50%;
72
+ transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
73
73
  opacity: 0;
74
74
  }
75
75
  }
package/es/Popup/Arrow.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
- import type { AlignType, ArrowType } from '../interface';
2
+ import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
3
3
  export interface ArrowProps {
4
4
  prefixCls: string;
5
5
  align: AlignType;
6
- arrow: ArrowType;
6
+ arrow: ArrowTypeOuter;
7
+ arrowPos: ArrowPos;
7
8
  }
8
9
  export default function Arrow(props: ArrowProps): React.JSX.Element;
package/es/Popup/Arrow.js CHANGED
@@ -1,15 +1,17 @@
1
- import * as React from 'react';
2
1
  import classNames from 'classnames';
2
+ import * as React from 'react';
3
3
  export default function Arrow(props) {
4
4
  var prefixCls = props.prefixCls,
5
5
  align = props.align,
6
- arrow = props.arrow;
6
+ arrow = props.arrow,
7
+ arrowPos = props.arrowPos;
7
8
  var _ref = arrow || {},
8
- _ref$x = _ref.x,
9
- x = _ref$x === void 0 ? 0 : _ref$x,
10
- _ref$y = _ref.y,
11
- y = _ref$y === void 0 ? 0 : _ref$y,
12
- className = _ref.className;
9
+ className = _ref.className,
10
+ content = _ref.content;
11
+ var _arrowPos$x = arrowPos.x,
12
+ x = _arrowPos$x === void 0 ? 0 : _arrowPos$x,
13
+ _arrowPos$y = arrowPos.y,
14
+ y = _arrowPos$y === void 0 ? 0 : _arrowPos$y;
13
15
  var arrowRef = React.useRef();
14
16
 
15
17
  // Skip if no align
@@ -51,5 +53,5 @@ export default function Arrow(props) {
51
53
  ref: arrowRef,
52
54
  className: classNames("".concat(prefixCls, "-arrow"), className),
53
55
  style: alignStyle
54
- });
56
+ }, content);
55
57
  }
package/es/Popup/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { CSSMotionProps } from 'rc-motion';
2
2
  import * as React from 'react';
3
3
  import type { TriggerProps } from '../';
4
- import type { AlignType, ArrowType } from '../interface';
4
+ import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
5
5
  export interface PopupProps {
6
6
  prefixCls: string;
7
7
  className?: string;
@@ -14,7 +14,8 @@ export interface PopupProps {
14
14
  mask?: boolean;
15
15
  onVisibleChanged: (visible: boolean) => void;
16
16
  align?: AlignType;
17
- arrow?: ArrowType;
17
+ arrow?: ArrowTypeOuter;
18
+ arrowPos: ArrowPos;
18
19
  open: boolean;
19
20
  /** Tell Portal that should keep in screen. e.g. should wait all motion end */
20
21
  keepDom: boolean;
package/es/Popup/index.js CHANGED
@@ -22,6 +22,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
22
22
  onClick = props.onClick,
23
23
  mask = props.mask,
24
24
  arrow = props.arrow,
25
+ arrowPos = props.arrowPos,
25
26
  align = props.align,
26
27
  motion = props.motion,
27
28
  maskMotion = props.maskMotion,
@@ -129,7 +130,10 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
129
130
  return /*#__PURE__*/React.createElement("div", {
130
131
  ref: composeRef(resizeObserverRef, ref, motionRef),
131
132
  className: cls,
132
- style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, offsetStyle), miscStyle), motionStyle), {}, {
133
+ style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
134
+ '--arrow-x': "".concat(arrowPos.x || 0, "px"),
135
+ '--arrow-y': "".concat(arrowPos.y || 0, "px")
136
+ }, offsetStyle), miscStyle), motionStyle), {}, {
133
137
  boxSizing: 'border-box',
134
138
  zIndex: zIndex
135
139
  }, style),
@@ -139,6 +143,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
139
143
  }, arrow && /*#__PURE__*/React.createElement(Arrow, {
140
144
  prefixCls: prefixCls,
141
145
  arrow: arrow,
146
+ arrowPos: arrowPos,
142
147
  align: align
143
148
  }), /*#__PURE__*/React.createElement(PopupContent, {
144
149
  cache: !open
package/es/index.js CHANGED
@@ -448,10 +448,11 @@ export function generateTrigger() {
448
448
 
449
449
  // Child Node
450
450
  var triggerNode = /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, mergedChildrenProps), passedProps));
451
- var innerArrow = arrow ? _objectSpread(_objectSpread({}, arrow !== true ? arrow : {}), {}, {
451
+ var arrowPos = {
452
452
  x: arrowX,
453
453
  y: arrowY
454
- }) : null;
454
+ };
455
+ var innerArrow = arrow ? _objectSpread({}, arrow !== true ? arrow : {}) : null;
455
456
 
456
457
  // Render
457
458
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
@@ -497,7 +498,8 @@ export function generateTrigger() {
497
498
  // Arrow
498
499
  ,
499
500
  align: alignInfo,
500
- arrow: innerArrow
501
+ arrow: innerArrow,
502
+ arrowPos: arrowPos
501
503
  // Align
502
504
  ,
503
505
  ready: ready,
package/es/interface.d.ts CHANGED
@@ -57,8 +57,9 @@ export interface AlignType {
57
57
  }
58
58
  export interface ArrowTypeOuter {
59
59
  className?: string;
60
+ content?: React.ReactNode;
60
61
  }
61
- export declare type ArrowType = ArrowTypeOuter & {
62
+ export declare type ArrowPos = {
62
63
  x?: number;
63
64
  y?: number;
64
65
  };
package/lib/Popup/Arrow.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
- import type { AlignType, ArrowType } from '../interface';
2
+ import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
3
3
  export interface ArrowProps {
4
4
  prefixCls: string;
5
5
  align: AlignType;
6
- arrow: ArrowType;
6
+ arrow: ArrowTypeOuter;
7
+ arrowPos: ArrowPos;
7
8
  }
8
9
  export default function Arrow(props: ArrowProps): React.JSX.Element;
package/lib/Popup/Arrow.js CHANGED
@@ -1,23 +1,25 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
3
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.default = Arrow;
9
- var React = _interopRequireWildcard(require("react"));
10
9
  var _classnames = _interopRequireDefault(require("classnames"));
10
+ var React = _interopRequireWildcard(require("react"));
11
11
  function Arrow(props) {
12
12
  var prefixCls = props.prefixCls,
13
13
  align = props.align,
14
- arrow = props.arrow;
14
+ arrow = props.arrow,
15
+ arrowPos = props.arrowPos;
15
16
  var _ref = arrow || {},
16
- _ref$x = _ref.x,
17
- x = _ref$x === void 0 ? 0 : _ref$x,
18
- _ref$y = _ref.y,
19
- y = _ref$y === void 0 ? 0 : _ref$y,
20
- className = _ref.className;
17
+ className = _ref.className,
18
+ content = _ref.content;
19
+ var _arrowPos$x = arrowPos.x,
20
+ x = _arrowPos$x === void 0 ? 0 : _arrowPos$x,
21
+ _arrowPos$y = arrowPos.y,
22
+ y = _arrowPos$y === void 0 ? 0 : _arrowPos$y;
21
23
  var arrowRef = React.useRef();
22
24
 
23
25
  // Skip if no align
@@ -59,5 +61,5 @@ function Arrow(props) {
59
61
  ref: arrowRef,
60
62
  className: (0, _classnames.default)("".concat(prefixCls, "-arrow"), className),
61
63
  style: alignStyle
62
- });
64
+ }, content);
63
65
  }
package/lib/Popup/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { CSSMotionProps } from 'rc-motion';
2
2
  import * as React from 'react';
3
3
  import type { TriggerProps } from '../';
4
- import type { AlignType, ArrowType } from '../interface';
4
+ import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
5
5
  export interface PopupProps {
6
6
  prefixCls: string;
7
7
  className?: string;
@@ -14,7 +14,8 @@ export interface PopupProps {
14
14
  mask?: boolean;
15
15
  onVisibleChanged: (visible: boolean) => void;
16
16
  align?: AlignType;
17
- arrow?: ArrowType;
17
+ arrow?: ArrowTypeOuter;
18
+ arrowPos: ArrowPos;
18
19
  open: boolean;
19
20
  /** Tell Portal that should keep in screen. e.g. should wait all motion end */
20
21
  keepDom: boolean;
package/lib/Popup/index.js CHANGED
@@ -30,6 +30,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
30
30
  onClick = props.onClick,
31
31
  mask = props.mask,
32
32
  arrow = props.arrow,
33
+ arrowPos = props.arrowPos,
33
34
  align = props.align,
34
35
  motion = props.motion,
35
36
  maskMotion = props.maskMotion,
@@ -137,7 +138,10 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
137
138
  return /*#__PURE__*/React.createElement("div", {
138
139
  ref: (0, _ref2.composeRef)(resizeObserverRef, ref, motionRef),
139
140
  className: cls,
140
- style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, offsetStyle), miscStyle), motionStyle), {}, {
141
+ style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
142
+ '--arrow-x': "".concat(arrowPos.x || 0, "px"),
143
+ '--arrow-y': "".concat(arrowPos.y || 0, "px")
144
+ }, offsetStyle), miscStyle), motionStyle), {}, {
141
145
  boxSizing: 'border-box',
142
146
  zIndex: zIndex
143
147
  }, style),
@@ -147,6 +151,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
147
151
  }, arrow && /*#__PURE__*/React.createElement(_Arrow.default, {
148
152
  prefixCls: prefixCls,
149
153
  arrow: arrow,
154
+ arrowPos: arrowPos,
150
155
  align: align
151
156
  }), /*#__PURE__*/React.createElement(_PopupContent.default, {
152
157
  cache: !open
package/lib/index.js CHANGED
@@ -457,10 +457,11 @@ function generateTrigger() {
457
457
 
458
458
  // Child Node
459
459
  var triggerNode = /*#__PURE__*/React.cloneElement(child, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedChildrenProps), passedProps));
460
- var innerArrow = arrow ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, arrow !== true ? arrow : {}), {}, {
460
+ var arrowPos = {
461
461
  x: arrowX,
462
462
  y: arrowY
463
- }) : null;
463
+ };
464
+ var innerArrow = arrow ? (0, _objectSpread2.default)({}, arrow !== true ? arrow : {}) : null;
464
465
 
465
466
  // Render
466
467
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
@@ -506,7 +507,8 @@ function generateTrigger() {
506
507
  // Arrow
507
508
  ,
508
509
  align: alignInfo,
509
- arrow: innerArrow
510
+ arrow: innerArrow,
511
+ arrowPos: arrowPos
510
512
  // Align
511
513
  ,
512
514
  ready: ready,
package/lib/interface.d.ts CHANGED
@@ -57,8 +57,9 @@ export interface AlignType {
57
57
  }
58
58
  export interface ArrowTypeOuter {
59
59
  className?: string;
60
+ content?: React.ReactNode;
60
61
  }
61
- export declare type ArrowType = ArrowTypeOuter & {
62
+ export declare type ArrowPos = {
62
63
  x?: number;
63
64
  y?: number;
64
65
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "1.11.0",
3
+ "version": "1.12.0",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"