@autobest-ui/components 2.13.12 → 2.14.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 (111) hide show
  1. package/esm/affix/index.d.ts +0 -10
  2. package/esm/affix/index.js +9 -50
  3. package/esm/carousel/index.d.ts +4 -0
  4. package/esm/carousel/index.js +10 -1
  5. package/esm/checkbox/Checkbox.js +3 -19
  6. package/esm/checkbox/style/index.css +1 -1
  7. package/esm/confirm/style/index.css +1 -1
  8. package/esm/index.d.ts +6 -0
  9. package/esm/index.js +4 -1
  10. package/esm/input/Adorn.d.ts +4 -0
  11. package/esm/input/Adorn.js +7 -3
  12. package/esm/input/Input.d.ts +1 -0
  13. package/esm/input/Input.js +5 -1
  14. package/esm/input/TextArea.d.ts +1 -0
  15. package/esm/input/TextArea.js +4 -1
  16. package/esm/input-number/index.d.ts +1 -0
  17. package/esm/input-number/index.js +5 -1
  18. package/esm/input-phone/index.d.ts +1 -0
  19. package/esm/input-phone/index.js +1 -0
  20. package/esm/lazy-image/index.d.ts +10 -30
  21. package/esm/lazy-image/index.js +30 -51
  22. package/esm/lazy-image/style/index.css +1 -1
  23. package/esm/loading-container/index.d.ts +1 -19
  24. package/esm/loading-container/index.js +16 -122
  25. package/esm/loading-icon/index.d.ts +1 -1
  26. package/esm/loading-icon/index.js +3 -21
  27. package/esm/modal/Affix.d.ts +4 -0
  28. package/esm/modal/Affix.js +7 -0
  29. package/esm/modal/index.d.ts +5 -19
  30. package/esm/modal/index.js +17 -18
  31. package/esm/modal/style/index.css +1 -1
  32. package/esm/move/index.d.ts +10 -0
  33. package/esm/move/index.js +12 -7
  34. package/esm/radio/Radio.js +10 -7
  35. package/esm/radio/RadioGroup.js +3 -6
  36. package/esm/radio/style/index.css +1 -1
  37. package/esm/radio/type.d.ts +0 -2
  38. package/esm/read-more/index.d.ts +92 -0
  39. package/esm/read-more/index.js +377 -0
  40. package/esm/read-more/style/index.css +1 -0
  41. package/esm/read-more-html/index.d.ts +89 -0
  42. package/esm/read-more-html/index.js +362 -0
  43. package/esm/read-more-html/style/index.css +1 -0
  44. package/esm/select/index.d.ts +0 -3
  45. package/esm/select/index.js +4 -25
  46. package/esm/select/style/index.css +1 -1
  47. package/esm/show-more/index.d.ts +27 -12
  48. package/esm/show-more/index.js +87 -41
  49. package/esm/show-more/style/index.css +1 -1
  50. package/esm/style.css +1 -1
  51. package/esm/table/style/index.css +1 -1
  52. package/esm/trigger/index.d.ts +3 -10
  53. package/esm/trigger/index.js +19 -39
  54. package/lib/affix/index.d.ts +0 -10
  55. package/lib/affix/index.js +8 -49
  56. package/lib/carousel/index.d.ts +4 -0
  57. package/lib/carousel/index.js +10 -1
  58. package/lib/checkbox/Checkbox.js +3 -19
  59. package/lib/checkbox/style/index.css +1 -1
  60. package/lib/confirm/style/index.css +1 -1
  61. package/lib/index.d.ts +6 -0
  62. package/lib/index.js +21 -0
  63. package/lib/input/Adorn.d.ts +4 -0
  64. package/lib/input/Adorn.js +7 -3
  65. package/lib/input/Input.d.ts +1 -0
  66. package/lib/input/Input.js +5 -1
  67. package/lib/input/TextArea.d.ts +1 -0
  68. package/lib/input/TextArea.js +4 -1
  69. package/lib/input-number/index.d.ts +1 -0
  70. package/lib/input-number/index.js +5 -1
  71. package/lib/input-phone/index.d.ts +1 -0
  72. package/lib/input-phone/index.js +1 -0
  73. package/lib/lazy-image/index.d.ts +10 -30
  74. package/lib/lazy-image/index.js +30 -51
  75. package/lib/lazy-image/style/index.css +1 -1
  76. package/lib/loading-container/index.d.ts +1 -19
  77. package/lib/loading-container/index.js +16 -125
  78. package/lib/loading-icon/index.d.ts +1 -1
  79. package/lib/loading-icon/index.js +3 -21
  80. package/lib/modal/Affix.d.ts +4 -0
  81. package/lib/modal/Affix.js +14 -0
  82. package/lib/modal/index.d.ts +5 -19
  83. package/lib/modal/index.js +17 -18
  84. package/lib/modal/style/index.css +1 -1
  85. package/lib/move/index.d.ts +10 -0
  86. package/lib/move/index.js +12 -7
  87. package/lib/radio/Radio.js +10 -7
  88. package/lib/radio/RadioGroup.js +3 -6
  89. package/lib/radio/style/index.css +1 -1
  90. package/lib/radio/type.d.ts +0 -2
  91. package/lib/read-more/index.d.ts +92 -0
  92. package/lib/read-more/index.js +388 -0
  93. package/lib/read-more/style/index.css +1 -0
  94. package/lib/read-more-html/index.d.ts +89 -0
  95. package/lib/read-more-html/index.js +373 -0
  96. package/lib/read-more-html/style/index.css +1 -0
  97. package/lib/select/index.d.ts +0 -3
  98. package/lib/select/index.js +4 -25
  99. package/lib/select/style/index.css +1 -1
  100. package/lib/show-more/index.d.ts +27 -12
  101. package/lib/show-more/index.js +86 -40
  102. package/lib/show-more/style/index.css +1 -1
  103. package/lib/style.css +1 -1
  104. package/lib/table/style/index.css +1 -1
  105. package/lib/trigger/index.d.ts +3 -10
  106. package/lib/trigger/index.js +19 -39
  107. package/package.json +3 -3
  108. package/esm/affix/observe.d.ts +0 -8
  109. package/esm/affix/observe.js +0 -6
  110. package/lib/affix/observe.d.ts +0 -8
  111. package/lib/affix/observe.js +0 -12
@@ -1,125 +1,19 @@
1
- var __extends = this && this.__extends || function () {
2
- var _extendStatics = function extendStatics(d, b) {
3
- _extendStatics = Object.setPrototypeOf || {
4
- __proto__: []
5
- } instanceof Array && function (d, b) {
6
- d.__proto__ = b;
7
- } || function (d, b) {
8
- for (var p in b) {
9
- if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
10
- }
11
- };
12
- return _extendStatics(d, b);
13
- };
14
- return function (d, b) {
15
- if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
16
- _extendStatics(d, b);
17
- function __() {
18
- this.constructor = d;
19
- }
20
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
21
- };
22
- }();
23
- import React, { createRef } from 'react';
1
+ import React from 'react';
24
2
  import classNames from 'classnames';
25
- import { addEventListener, getElementSize, getOffsetAndSize, isInViewArea, throttleWithRAF } from '@autobest-ui/utils';
26
3
  import LoadingIcon from '../loading-icon';
27
- var LoadingContainer = /** @class */function (_super) {
28
- __extends(LoadingContainer, _super);
29
- function LoadingContainer() {
30
- var _this = _super !== null && _super.apply(this, arguments) || this;
31
- _this.prefixCls = 'ab-loading-container';
32
- _this.wrapRef = /*#__PURE__*/createRef();
33
- _this.iconRef = /*#__PURE__*/createRef();
34
- _this.addScrollListener = function () {
35
- if (!_this.addScrollHandlerListener) {
36
- // 滚动监听
37
- _this.addScrollHandlerListener = addEventListener(window, 'scroll', throttleWithRAF(_this.onHandlerScroll));
38
- }
39
- };
40
- _this.removeScrollListener = function () {
41
- if (_this.addScrollHandlerListener) {
42
- _this.addScrollHandlerListener();
43
- _this.addScrollHandlerListener = null;
44
- }
45
- };
46
- _this.setIconTopStyle = function (top) {
47
- _this.iconRef.current.style.top = top;
48
- };
49
- _this.onHandlerScroll = function () {
50
- var wrapElement = _this.wrapRef.current;
51
- if (!_this.props.loadingInView || !_this.props.loading || !wrapElement) {
52
- return;
53
- }
54
- var iconElement = _this.iconRef.current;
55
- if (!isInViewArea(wrapElement) || !iconElement) {
56
- // 组件在可视区域外
57
- return;
58
- }
59
- var halfIconHeight = getElementSize(iconElement).height / 2;
60
- var _a = getOffsetAndSize(wrapElement, true),
61
- top = _a.top,
62
- height = _a.height;
63
- var bottom = top + height;
64
- if (top >= 0 && bottom <= window.innerHeight) {
65
- // 整个组件都在可视区域内,直接在组件内居中显示LoadingIcon
66
- _this.setIconTopStyle('50%');
67
- return;
68
- }
69
- if (top < 0 && bottom > window.innerHeight) {
70
- // 组件超出浏览器可视区域,在浏览器可视区域居中显示LoadingIcon
71
- _this.setIconTopStyle("".concat(window.innerHeight / 2 - top, "px"));
72
- return;
73
- }
74
- if (top < 0) {
75
- // 组件上半部分超出可视区域
76
- var iconTop_1 = bottom / 2 - top;
77
- _this.setIconTopStyle("".concat(iconTop_1 > height - halfIconHeight ? height - halfIconHeight : iconTop_1, "px"));
78
- return;
79
- }
80
- // 组件下半部分超出可视区域
81
- var iconTop = (window.innerHeight - top) / 2;
82
- _this.setIconTopStyle("".concat(iconTop < halfIconHeight ? halfIconHeight : iconTop, "px"));
83
- };
84
- return _this;
85
- }
86
- LoadingContainer.prototype.componentDidMount = function () {
87
- if (this.props.loadingInView && this.props.loading) {
88
- this.onHandlerScroll();
89
- this.addScrollListener();
90
- }
91
- };
92
- LoadingContainer.prototype.componentDidUpdate = function (prevProps) {
93
- if (prevProps.loading !== this.props.loading || prevProps.loadingInView !== this.props.loadingInView) {
94
- if (this.props.loadingInView && this.props.loading) {
95
- this.onHandlerScroll();
96
- this.addScrollListener();
97
- return;
98
- }
99
- this.removeScrollListener();
100
- }
101
- };
102
- LoadingContainer.prototype.componentWillUnmount = function () {
103
- this.removeScrollListener();
104
- };
105
- LoadingContainer.prototype.render = function () {
106
- var _a;
107
- var cls = this.prefixCls;
108
- var _b = this.props,
109
- _c = _b.loading,
110
- loading = _c === void 0 ? false : _c,
111
- className = _b.className,
112
- children = _b.children;
113
- return /*#__PURE__*/React.createElement("div", {
114
- className: classNames(className, cls, (_a = {}, _a["".concat(cls, "-active")] = loading, _a)),
115
- ref: this.wrapRef
116
- }, children, loading && /*#__PURE__*/React.createElement("div", {
117
- className: "".concat(cls, "-icon-box")
118
- }, /*#__PURE__*/React.createElement(LoadingIcon, {
119
- className: "".concat(cls, "-icon"),
120
- ref: this.iconRef
121
- })));
122
- };
123
- return LoadingContainer;
124
- }(React.Component);
4
+ var cls = 'ab-loading-container';
5
+ function LoadingContainer(props) {
6
+ var _a;
7
+ var _b = props.loading,
8
+ loading = _b === void 0 ? false : _b,
9
+ className = props.className,
10
+ children = props.children;
11
+ return /*#__PURE__*/React.createElement("div", {
12
+ className: classNames(className, cls, (_a = {}, _a["".concat(cls, "-active")] = loading, _a))
13
+ }, children, loading && /*#__PURE__*/React.createElement("div", {
14
+ className: "".concat(cls, "-icon-box")
15
+ }, /*#__PURE__*/React.createElement(LoadingIcon, {
16
+ className: "".concat(cls, "-icon")
17
+ })));
18
+ }
125
19
  export default LoadingContainer;
@@ -2,5 +2,5 @@ import React from 'react';
2
2
  export interface LoadingIconProps {
3
3
  className?: string;
4
4
  }
5
- declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<LoadingIconProps & React.RefAttributes<HTMLSpanElement>>>;
5
+ declare const _default: React.MemoExoticComponent<(props: LoadingIconProps) => JSX.Element>;
6
6
  export default _default;
@@ -1,24 +1,10 @@
1
- var __assign = this && this.__assign || function () {
2
- __assign = Object.assign || function (t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) {
6
- if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
7
- }
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
1
  import React from 'react';
14
2
  import classNames from 'classnames';
15
3
  var cls = 'ab-svg-loading';
16
4
  var LoadingIcon = function LoadingIcon(props) {
17
- var className = props.className,
18
- upperRef = props.upperRef;
5
+ var className = props.className;
19
6
  return /*#__PURE__*/React.createElement("span", {
20
- className: classNames(className, cls),
21
- ref: upperRef
7
+ className: classNames(className, cls)
22
8
  }, /*#__PURE__*/React.createElement("svg", {
23
9
  xmlns: "http://www.w3.org/2000/svg",
24
10
  width: "24",
@@ -67,8 +53,4 @@ var LoadingIcon = function LoadingIcon(props) {
67
53
  fill: "#fff"
68
54
  })));
69
55
  };
70
- export default /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
71
- return /*#__PURE__*/React.createElement(LoadingIcon, __assign({}, props, {
72
- upperRef: ref
73
- }));
74
- }));
56
+ export default /*#__PURE__*/React.memo(LoadingIcon);
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { PortalProps } from '../portal';
3
+ export declare type AffixProps = Required<Omit<PortalProps, 'didUpdate'>>;
4
+ export default function Affix(props: AffixProps): JSX.Element;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import Portal from '../portal';
3
+ export default function Affix(props) {
4
+ return /*#__PURE__*/React.createElement(Portal, {
5
+ getContainer: props.getContainer
6
+ }, props.children);
7
+ }
@@ -1,4 +1,4 @@
1
- import React, { CSSProperties } from 'react';
1
+ import React from 'react';
2
2
  import { AddListenerEventRemoveHandler } from '@autobest-ui/utils';
3
3
  declare type PrevPopupSize = {
4
4
  width: number;
@@ -35,22 +35,9 @@ export interface ModalProps {
35
35
  popupLimitSpacing?: number;
36
36
  /**
37
37
  * 当写成`auto`时, 宽度是全屏
38
- * 默认值为6.5rem
39
38
  */
40
- width?: CSSProperties['width'];
41
- /**
42
- * 固定弹出框高度
43
- * 默认值为auto
44
- */
45
- height?: CSSProperties['height'];
46
- /**
47
- * 弹出框最小高度
48
- */
49
- minHeight?: CSSProperties['minHeight'];
50
- /**
51
- * 弹出框z-index层级
52
- */
53
- zIndex?: CSSProperties['zIndex'];
39
+ width?: string;
40
+ height?: string;
54
41
  /**
55
42
  * 弹框到顶部距离(只有在placement="top"时,有作用)
56
43
  */
@@ -90,6 +77,7 @@ interface ModalStates {
90
77
  cacheVisible: boolean;
91
78
  }
92
79
  declare class Modal extends React.Component<ModalProps, ModalStates> {
80
+ static Affix: React.ComponentType<Required<Omit<import("../portal").PortalProps, "didUpdate">>>;
93
81
  static cacheOpenedIds: number[];
94
82
  openId: number;
95
83
  prefixCls: string;
@@ -98,9 +86,7 @@ declare class Modal extends React.Component<ModalProps, ModalStates> {
98
86
  placement: string;
99
87
  width: string;
100
88
  height: string;
101
- minHeight: string;
102
89
  top: string;
103
- zIndex: number;
104
90
  popupLimitSpacing: number;
105
91
  closable: boolean;
106
92
  maskClosable: boolean;
@@ -127,7 +113,7 @@ declare class Modal extends React.Component<ModalProps, ModalStates> {
127
113
  */
128
114
  onDocumentClick: (event: any) => void;
129
115
  clearOutsideHandler(): void;
130
- clearPopupTimer: () => void;
116
+ clearPopupTimer: (popupEl?: HTMLElement) => void;
131
117
  getPopupDomNode(): HTMLDivElement;
132
118
  getMaskDomNode(): HTMLDivElement;
133
119
  onClose: (event: any, isOutsideClick?: boolean) => void;
@@ -27,6 +27,7 @@ import { addEventListener, hasVerticalScrollbar, isTouchScreen, getElementSize,
27
27
  import Portal from '../portal';
28
28
  import Mask from '../mask';
29
29
  import Title from './Title';
30
+ import Affix from './Affix';
30
31
  import getPopupLocation from './getPopupLocation';
31
32
  function getId() {
32
33
  try {
@@ -67,8 +68,12 @@ var Modal = /** @class */function (_super) {
67
68
  _this.onClose(target, true);
68
69
  }
69
70
  };
70
- _this.clearPopupTimer = function () {
71
+ _this.clearPopupTimer = function (popupEl) {
71
72
  clearTimeout(_this.popupTimer);
73
+ var element = popupEl || _this.getPopupDomNode();
74
+ if (element) {
75
+ element.style.visibility = '';
76
+ }
72
77
  };
73
78
  _this.onClose = function (event, isOutsideClick) {
74
79
  if (isOutsideClick === void 0) {
@@ -88,11 +93,11 @@ var Modal = /** @class */function (_super) {
88
93
  if (!element) {
89
94
  return;
90
95
  }
91
- if (element.parentNode) {
96
+ if (element && element.parentNode) {
92
97
  var parentNode = element.parentNode;
93
98
  parentNode.style.display = 'block';
94
99
  }
95
- _this.clearPopupTimer();
100
+ _this.clearPopupTimer(element);
96
101
  var _a = _this.props,
97
102
  placement = _a.placement,
98
103
  hiddenScroll = _a.hiddenScroll,
@@ -136,7 +141,7 @@ var Modal = /** @class */function (_super) {
136
141
  lastChild.style.overflow = 'auto';
137
142
  var popupHeight = height || _this.props.height;
138
143
  if (!popupHeight || popupHeight === 'auto') {
139
- lastChild.style.maxHeight = "calc(100vh - ".concat(popupLimitSpacing * 2, "px - ").concat(placement === 'top' && top ? top : '0px', " - ").concat(firstChildHeight, "px)");
144
+ lastChild.style.maxHeight = "calc(100vh - .3rem - ".concat(placement === 'top' && top ? top : '0px', " - ").concat(firstChildHeight, "px)");
140
145
  } else {
141
146
  lastChild.style.maxHeight = "calc(100% - ".concat(firstChildHeight, "px)");
142
147
  }
@@ -235,9 +240,11 @@ var Modal = /** @class */function (_super) {
235
240
  width = _a.width,
236
241
  height = _a.height;
237
242
  if (prevPopupSize.width !== width || prevPopupSize.height !== height) {
238
- this.clearPopupTimer();
243
+ this.clearPopupTimer(popupEl);
244
+ popupEl.style.visibility = 'hidden';
239
245
  this.popupTimer = setTimeout(function () {
240
246
  _this.onEnter(popupEl);
247
+ popupEl.style.visibility = '';
241
248
  });
242
249
  }
243
250
  }
@@ -280,20 +287,14 @@ var Modal = /** @class */function (_super) {
280
287
  children = _b.children,
281
288
  width = _b.width,
282
289
  height = _b.height,
283
- minHeight = _b.minHeight,
284
- zIndex = _b.zIndex,
285
290
  className = _b.className,
286
291
  closable = _b.closable,
287
292
  title = _b.title,
288
293
  placement = _b.placement,
289
- top = _b.top,
290
- popupLimitSpacing = _b.popupLimitSpacing;
291
- var maxHeight = "calc(100vh - ".concat(popupLimitSpacing * 2, "px - ").concat(placement === 'top' && top ? top : '0px', ")");
294
+ top = _b.top;
295
+ var maxHeight = "calc(100vh - .3rem - ".concat(placement === 'top' && top ? top : '0px', ")");
292
296
  return /*#__PURE__*/React.createElement("div", {
293
- className: classNames(cls, className, (_a = {}, _a["".concat(cls, "-center")] = placement === 'center', _a["".concat(this.prefixCls, "-hidden")] = !visible && !this.state.isUserOperated, _a)),
294
- style: {
295
- zIndex: zIndex
296
- }
297
+ className: classNames(cls, className, (_a = {}, _a["".concat(cls, "-center")] = placement === 'center', _a["".concat(this.prefixCls, "-hidden")] = !visible && !this.state.isUserOperated, _a))
297
298
  }, /*#__PURE__*/React.createElement(CSSTransition, {
298
299
  "in": visible,
299
300
  timeout: 300,
@@ -308,8 +309,7 @@ var Modal = /** @class */function (_super) {
308
309
  style: state !== 'exited' ? {
309
310
  width: width,
310
311
  height: height,
311
- maxHeight: maxHeight,
312
- minHeight: minHeight
312
+ maxHeight: maxHeight
313
313
  } : undefined,
314
314
  ref: _this.popupRef
315
315
  }, /*#__PURE__*/React.createElement(Title, {
@@ -341,15 +341,14 @@ var Modal = /** @class */function (_super) {
341
341
  }
342
342
  return null;
343
343
  };
344
+ Modal.Affix = Affix;
344
345
  Modal.cacheOpenedIds = [];
345
346
  // 默认值
346
347
  Modal.defaultProps = {
347
348
  placement: 'center',
348
349
  width: '6.5rem',
349
350
  height: 'auto',
350
- minHeight: '',
351
351
  top: '10%',
352
- zIndex: 101,
353
352
  popupLimitSpacing: 14,
354
353
  closable: true,
355
354
  maskClosable: true,
@@ -1 +1 @@
1
- .ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done,.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}.ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center::before{display:inline-block;width:0;height:100%;vertical-align:middle;content:""}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active,.ab-modal-fade-enter-done,.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}
1
+ .ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done,.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}.ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center::before{display:inline-block;width:0;height:100%;vertical-align:middle;content:""}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active,.ab-modal-fade-enter-done,.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}
@@ -36,6 +36,14 @@ export interface MoveProps {
36
36
  * 点击的回调函数, 如果移动,则不是click
37
37
  */
38
38
  onClick?: (event: any) => void;
39
+ /**
40
+ * 禁止水平方向的移动
41
+ */
42
+ horizontalMoveDisabled?: boolean;
43
+ /**
44
+ * 禁止垂直方向的移动
45
+ */
46
+ verticalMoveDisabled?: boolean;
39
47
  }
40
48
  declare class Move extends React.Component<MoveProps> {
41
49
  readonly prefixCls = "ab-move";
@@ -46,6 +54,8 @@ declare class Move extends React.Component<MoveProps> {
46
54
  maxScalable: number;
47
55
  horizontalPlacement: string;
48
56
  verticalPlacement: string;
57
+ horizontalMoveDisabled: boolean;
58
+ verticalMoveDisabled: boolean;
49
59
  };
50
60
  prevElementSize: {
51
61
  width: number;
package/esm/move/index.js CHANGED
@@ -205,13 +205,16 @@ var Move = /** @class */function (_super) {
205
205
  if (_this.isTouchScale && event.touches.length <= 1) {
206
206
  return;
207
207
  }
208
+ var _a = _this.props,
209
+ horizontalMoveDisabled = _a.horizontalMoveDisabled,
210
+ verticalMoveDisabled = _a.verticalMoveDisabled;
208
211
  _this.moveObj = {
209
212
  left: event.touches ? event.touches[0].pageX : event.clientX,
210
213
  top: event.touches ? event.touches[0].pageY : event.clientY
211
214
  };
212
215
  _this.currentObj = {
213
- left: _this.prevObj.left + _this.moveObj.left - _this.startObj.left,
214
- top: _this.prevObj.top + _this.moveObj.top - _this.startObj.top
216
+ left: horizontalMoveDisabled ? _this.prevObj.left : _this.prevObj.left + _this.moveObj.left - _this.startObj.left,
217
+ top: verticalMoveDisabled ? _this.prevObj.top : _this.prevObj.top + _this.moveObj.top - _this.startObj.top
215
218
  };
216
219
  _this.setElementInfo(element);
217
220
  };
@@ -223,6 +226,10 @@ var Move = /** @class */function (_super) {
223
226
  if (event.stopPropagation) {
224
227
  event.stopPropagation();
225
228
  }
229
+ var onClick = _this.props.onClick;
230
+ if (onClick && _this.currentObj.left === _this.prevObj.left && _this.currentObj.top === _this.prevObj.top && _this.prevScaleSize === _this.currentScaleSize) {
231
+ onClick(event);
232
+ }
226
233
  var _a = _this.checkRange(),
227
234
  nextX = _a.nextX,
228
235
  nextY = _a.nextY,
@@ -237,10 +244,6 @@ var Move = /** @class */function (_super) {
237
244
  _this.currentScaleSize = nextScaleSize;
238
245
  _this.setElementInfo(element);
239
246
  }
240
- var onClick = _this.props.onClick;
241
- if (onClick && _this.currentObj.left === _this.prevObj.left && _this.currentObj.top === _this.prevObj.top && _this.prevScaleSize === _this.currentScaleSize) {
242
- onClick(event);
243
- }
244
247
  };
245
248
  _this.onTransitionEnd = function () {
246
249
  var element = _this.getDomNode();
@@ -375,7 +378,9 @@ var Move = /** @class */function (_super) {
375
378
  minScalable: 1,
376
379
  maxScalable: 1,
377
380
  horizontalPlacement: 'left',
378
- verticalPlacement: 'top'
381
+ verticalPlacement: 'top',
382
+ horizontalMoveDisabled: false,
383
+ verticalMoveDisabled: false
379
384
  };
380
385
  return Move;
381
386
  }(React.Component);
@@ -50,13 +50,14 @@ var Radio = function Radio(props) {
50
50
  if (mergedProps.disabled) {
51
51
  return;
52
52
  }
53
+ var checkedValue = ev.target.value;
53
54
  if (onChange) {
54
- onChange(value, mergedProps.name, ev.target.checked);
55
+ onChange(checkedValue, mergedProps.name, ev.target.checked);
55
56
  return;
56
57
  }
57
58
  // radioGroup
58
59
  if (groupContext.onChange) {
59
- groupContext.onChange(value, mergedProps.name);
60
+ groupContext.onChange(checkedValue, mergedProps.name);
60
61
  return;
61
62
  }
62
63
  setChecked(!checked);
@@ -74,6 +75,7 @@ var Radio = function Radio(props) {
74
75
  },
75
76
  type: "radio",
76
77
  checked: checked,
78
+ value: value,
77
79
  onChange: onRadioChange
78
80
  }, mergedProps)), /*#__PURE__*/React.createElement("span", {
79
81
  className: "".concat(cls, "-control"),
@@ -86,20 +88,21 @@ var Radio = function Radio(props) {
86
88
  className: "".concat(cls, "-outer"),
87
89
  focusable: "false",
88
90
  "aria-hidden": "true",
89
- viewBox: "0 0 20 20"
91
+ viewBox: "0 0 512 512"
90
92
  }, /*#__PURE__*/React.createElement("path", {
91
- stroke: "none",
92
- d: "M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
93
+ d: "M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z",
94
+ strokeWidth: "1.5em",
95
+ fill: "#fff"
93
96
  })), /*#__PURE__*/React.createElement("svg", {
94
97
  className: "".concat(cls, "-dot"),
95
98
  focusable: "false",
96
99
  "aria-hidden": "true",
97
100
  viewBox: "0 0 24 24"
98
101
  }, /*#__PURE__*/React.createElement("path", {
99
- d: "M12 6a6 6 0 100 12 6 6 0 000-12Z"
102
+ d: "M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
100
103
  }))), children);
101
104
  };
102
105
  Radio.defaultProps = {
103
- size: 13
106
+ size: 16
104
107
  };
105
108
  export default Radio;
@@ -21,7 +21,6 @@ var __extends = this && this.__extends || function () {
21
21
  };
22
22
  }();
23
23
  import React, { Component, Fragment } from 'react';
24
- import classNames from 'classnames';
25
24
  import { isEmptyArray, isUndef } from '@autobest-ui/utils';
26
25
  import { RadioGroupContextProvider } from './context';
27
26
  import Radio from './Radio';
@@ -96,12 +95,10 @@ var RadioGroup = /** @class */function (_super) {
96
95
  return null;
97
96
  };
98
97
  RadioGroup.prototype.render = function () {
99
- var _a = this.props,
100
- _b = _a.direction,
101
- direction = _b === void 0 ? 'horizontal' : _b,
102
- className = _a.className;
98
+ var _a = this.props.direction,
99
+ direction = _a === void 0 ? 'horizontal' : _a;
103
100
  return /*#__PURE__*/React.createElement("div", {
104
- className: classNames(className, "".concat(cls, "-group-").concat(direction))
101
+ className: "".concat(cls, "-group-").concat(direction)
105
102
  }, 'options' in this.props ? this.renderRadioList() : this.renderRadioGroup());
106
103
  };
107
104
  return RadioGroup;
@@ -1 +1 @@
1
- .ab-radio{position:relative;display:inline-flex;align-items:center;cursor:pointer}.ab-radio:hover .ab-radio-control{color:#4f4f4f}.ab-radio input{cursor:inherit;position:absolute;margin:0;padding:0;opacity:0;top:50%;left:0;transform:translateY(-50%);z-index:1}.ab-radio-checked:hover .ab-radio-control{color:#005cc8}.ab-radio-checked .ab-radio-control{color:#0075ff}.ab-radio-checked .ab-radio-control svg{display:inline-block}.ab-radio-disabled{cursor:not-allowed}.ab-radio-disabled .ab-radio-control,.ab-radio-disabled:hover .ab-radio-control{color:#d1d1d1}.ab-radio-control{margin-right:.06rem;position:relative;color:#767676;flex-shrink:0}.ab-radio-control svg{width:1em;height:1em;user-select:none;flex-shrink:0;fill:currentcolor;stroke:currentcolor;overflow:visible}.ab-radio-dot,.ab-radio-outer{position:absolute;left:0;top:0}.ab-radio-dot{display:none}.ab-radio-group-horizontal{display:flex}.ab-radio-group-horizontal .ab-radio-item{margin-right:.2rem}.ab-radio-group-horizontal .ab-radio-item:last-child{margin-right:0}.ab-radio-group-vertical{display:flex;flex-direction:column;align-items:flex-start}.ab-radio-group-vertical .ab-radio-item{margin-bottom:.15rem}.ab-radio-group-vertical .ab-radio-item:last-child{margin-bottom:0}
1
+ .ab-radio{position:relative;overflow:hidden;display:inline-flex;align-items:center;cursor:pointer;font-size:.14rem}.ab-radio:hover .ab-radio-control{color:#4f4f4f}.ab-radio input{cursor:inherit;position:absolute;margin:0;padding:0;opacity:0;top:0;left:0;z-index:1}.ab-radio-checked:hover .ab-radio-control{color:#005cc8}.ab-radio-checked .ab-radio-control{color:#0075ff}.ab-radio-checked .ab-radio-control svg{display:inline-block}.ab-radio-disabled{cursor:not-allowed}.ab-radio-disabled .ab-radio-control,.ab-radio-disabled:hover .ab-radio-control{color:#d1d1d1}.ab-radio-control{margin-right:.06rem;position:relative;color:#767676}.ab-radio-control svg{width:1em;height:1em;user-select:none;flex-shrink:0;fill:currentcolor;stroke:currentcolor}.ab-radio-dot,.ab-radio-outer{position:absolute;left:0;top:0}.ab-radio-dot{display:none}.ab-radio-group-horizontal{display:flex}.ab-radio-group-horizontal .ab-radio-item{margin-right:.2rem}.ab-radio-group-horizontal .ab-radio-item:last-child{margin-right:0}.ab-radio-group-vertical{display:flex;flex-direction:column}.ab-radio-group-vertical .ab-radio-item{margin-bottom:.15rem}.ab-radio-group-vertical .ab-radio-item:last-child{margin-bottom:0}
@@ -1,4 +1,3 @@
1
- import { ReactChild } from 'react';
2
1
  export declare type RadioValue = string | number;
3
2
  export interface RadioProps {
4
3
  name?: string;
@@ -9,7 +8,6 @@ export interface RadioProps {
9
8
  size?: number;
10
9
  onChange?: (value: RadioValue, name?: string, checked?: boolean) => void;
11
10
  className?: string;
12
- children?: ReactChild | ReactChild[];
13
11
  }
14
12
  export declare type RadioOptionItem = Pick<RadioProps, 'disabled' | 'name' | 'value'>;
15
13
  export interface RadioGroupProps extends Pick<RadioProps, 'value' | 'name' | 'disabled' | 'className' | 'size'> {
@@ -0,0 +1,92 @@
1
+ import React, { Component } from 'react';
2
+ export interface ReadMoreProps {
3
+ /**
4
+ * 需要显示的内容
5
+ */
6
+ children: React.ReactChild[] | React.ReactChild;
7
+ /**
8
+ * 整体样式
9
+ */
10
+ className?: string;
11
+ /**
12
+ * 需要忽略的类名数组,例如 ['mc_title']
13
+ */
14
+ ignoreClassList?: string[];
15
+ /**
16
+ * 展开文本
17
+ */
18
+ expandText?: string;
19
+ /**
20
+ * 折叠文本, 展开后点击收起的文字
21
+ */
22
+ collapseText?: string;
23
+ /**
24
+ * 初始时,显示的行数
25
+ */
26
+ lines?: number;
27
+ /**
28
+ * 是否执行resizeObserver监听宽度变化
29
+ */
30
+ isResizeObserver?: boolean;
31
+ /**
32
+ * 垂直方向触发换行的判定阈值 (默认 1px), 当一行中有字体,大小不同时,需要根据情况动态触发换行
33
+ */
34
+ lineThreshold?: number;
35
+ /**
36
+ * [不推荐]设置Wrap最大高度, 用于解决初始化时页面抖动问题,建议通过屏幕大小动态设置className
37
+ */
38
+ defaultWrapMaxHeight?: number;
39
+ /**
40
+ * 右下角按钮宽度
41
+ */
42
+ buttonWidth?: number;
43
+ /**
44
+ * 默认是否折叠
45
+ */
46
+ defaultCollapsed?: boolean;
47
+ /**
48
+ * 点击展开/收起前的回调函数,返回false时阻止change
49
+ */
50
+ onBeforeChange?: (isCollapsed: boolean) => Promise<boolean>;
51
+ /**
52
+ * 点击展开/收起后的回调函数
53
+ */
54
+ onAfterChange?: (isCollapsed: boolean) => void;
55
+ }
56
+ interface ReadMoreState {
57
+ wrapStyle: React.CSSProperties;
58
+ }
59
+ declare class ReadMore extends Component<ReadMoreProps, ReadMoreState> {
60
+ static defaultProps: {
61
+ onAfterChange: () => void;
62
+ isResizeObserver: boolean;
63
+ defaultCollapsed: boolean;
64
+ expandText: string;
65
+ buttonWidth: number;
66
+ collapseText: string;
67
+ lineThreshold: number;
68
+ lines: number;
69
+ };
70
+ cacheWrapWidth: number;
71
+ isCollapsed: boolean;
72
+ resizeObserver: ResizeObserver;
73
+ originalContent: string;
74
+ wrapRef: React.RefObject<HTMLDivElement>;
75
+ prefixCls: string;
76
+ constructor(props: ReadMoreProps);
77
+ componentDidMount(): void;
78
+ componentDidUpdate(prevProps: ReadMoreProps): void;
79
+ componentWillUnmount(): void;
80
+ /**
81
+ * 计算高度并设置样式
82
+ */
83
+ delayCalculate(): void;
84
+ /**
85
+ * 创建Show More/Show Less 按钮
86
+ */
87
+ getButtonElement: (wrapElement: HTMLDivElement, isCollapsed: boolean) => HTMLSpanElement;
88
+ applyToggle: (wrapElement: HTMLDivElement, node: any, index: number) => void;
89
+ onResizeObserver: () => void;
90
+ render(): JSX.Element;
91
+ }
92
+ export default ReadMore;