linkmore-design 1.0.54 → 1.0.55
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/Affix/demos/basic.d.ts +2 -0
- package/dist/Affix/index.d.ts +54 -0
- package/dist/Affix/style/index.d.ts +1 -0
- package/dist/Affix/utils.d.ts +15 -0
- package/dist/CardTable/fns/index.d.ts +1 -5
- package/dist/IconFont/index.d.ts +1 -1
- package/dist/LmFilter/{components → baseFilter}/fuzzySearch.d.ts +0 -0
- package/dist/LmFilter/utils.d.ts +1 -0
- package/dist/QuickMenu/demos/basic.d.ts +2 -0
- package/dist/QuickMenu/index.d.ts +14 -0
- package/dist/QuickMenu/style/index.d.ts +1 -0
- package/dist/Tag/demos/ExigencyTag.d.ts +2 -0
- package/dist/Tag/index.d.ts +4 -0
- package/dist/Upload/demos/picture-little.d.ts +3 -0
- package/dist/Upload/index.d.ts +5 -1
- package/dist/_util/domTarget.d.ts +7 -0
- package/dist/_util/throttleByAnimationFrame.d.ts +8 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.umd.js +548 -8
- package/dist/index.umd.min.js +4 -4
- package/es/Affix/index.d.ts +54 -0
- package/es/Affix/index.js +326 -0
- package/es/Affix/style/index.css +505 -0
- package/es/Affix/style/index.d.ts +1 -0
- package/es/Affix/style/index.js +1 -0
- package/es/Affix/utils.d.ts +15 -0
- package/es/Affix/utils.js +83 -0
- package/es/CardTable/fns/index.js +6 -5
- package/es/Descriptions/style/index.css +10 -8
- package/es/IconFont/index.js +3 -2
- package/es/LmFilter/baseFilter/fuzzySearch.js +53 -0
- package/es/LmFilter/baseFilter/index.js +1 -1
- package/es/LmFilter/clearFilter/index.js +3 -1
- package/es/LmFilter/components/CascaderFilter.js +17 -41
- package/es/LmFilter/components/DateFilter.js +12 -20
- package/es/LmFilter/components/DropdownFIlter.js +78 -10
- package/es/LmFilter/components/index.js +56 -13
- package/es/LmFilter/hooks/useDelayedFn.js +8 -6
- package/es/LmFilter/style/style.css +16 -0
- package/es/LmFilter/utils.js +16 -0
- package/es/LmFilter/wrapper/FilterRoot.js +6 -0
- package/es/QuickMenu/index.d.ts +14 -0
- package/es/QuickMenu/index.js +169 -0
- package/es/QuickMenu/style/index.css +560 -0
- package/es/QuickMenu/style/index.d.ts +1 -0
- package/es/QuickMenu/style/index.js +1 -0
- package/es/Tag/index.d.ts +4 -0
- package/es/Tag/index.js +48 -2
- package/es/Tag/style/index.css +4 -1
- package/es/Upload/index.d.ts +5 -1
- package/es/Upload/index.js +7 -2
- package/es/Upload/style/index.css +35 -0
- package/es/_util/domTarget.d.ts +7 -0
- package/es/_util/domTarget.js +20 -0
- package/es/_util/throttleByAnimationFrame.d.ts +8 -0
- package/es/_util/throttleByAnimationFrame.js +58 -0
- package/es/index.d.ts +1 -0
- package/es/index.js +2 -1
- package/lib/Affix/index.d.ts +54 -0
- package/lib/Affix/index.js +349 -0
- package/lib/Affix/style/index.css +505 -0
- package/lib/Affix/style/index.d.ts +1 -0
- package/lib/Affix/style/index.js +3 -0
- package/lib/Affix/utils.d.ts +15 -0
- package/lib/Affix/utils.js +104 -0
- package/lib/CardTable/fns/index.js +6 -5
- package/lib/Descriptions/style/index.css +10 -8
- package/lib/IconFont/index.js +3 -2
- package/lib/LmFilter/baseFilter/fuzzySearch.js +53 -0
- package/lib/LmFilter/baseFilter/index.js +1 -1
- package/lib/LmFilter/clearFilter/index.js +3 -1
- package/lib/LmFilter/components/CascaderFilter.js +17 -41
- package/lib/LmFilter/components/DateFilter.js +12 -20
- package/lib/LmFilter/components/DropdownFIlter.js +78 -10
- package/lib/LmFilter/components/index.js +56 -13
- package/lib/LmFilter/hooks/useDelayedFn.js +8 -6
- package/lib/LmFilter/style/style.css +16 -0
- package/lib/LmFilter/utils.js +16 -0
- package/lib/LmFilter/wrapper/FilterRoot.js +6 -0
- package/lib/QuickMenu/index.d.ts +14 -0
- package/lib/QuickMenu/index.js +187 -0
- package/lib/QuickMenu/style/index.css +560 -0
- package/lib/QuickMenu/style/index.d.ts +1 -0
- package/lib/QuickMenu/style/index.js +3 -0
- package/lib/Tag/index.d.ts +4 -0
- package/lib/Tag/index.js +48 -1
- package/lib/Tag/style/index.css +4 -1
- package/lib/Upload/index.d.ts +5 -1
- package/lib/Upload/index.js +8 -2
- package/lib/Upload/style/index.css +35 -0
- package/lib/_util/domTarget.d.ts +7 -0
- package/lib/_util/domTarget.js +31 -0
- package/lib/_util/throttleByAnimationFrame.d.ts +8 -0
- package/lib/_util/throttleByAnimationFrame.js +72 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +9 -1
- package/package.json +5 -2
- package/es/LmFilter/components/fuzzySearch.js +0 -37
- package/lib/LmFilter/components/fuzzySearch.js +0 -37
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./index.css";
|
package/es/Tag/index.d.ts
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Tag, TagProps } from 'antd';
|
|
3
|
+
import type { CheckableTagProps } from 'antd/es/tag/CheckableTag';
|
|
3
4
|
export interface ILMTagProps extends TagProps {
|
|
4
5
|
className?: string;
|
|
5
6
|
noborder?: boolean;
|
|
6
7
|
}
|
|
8
|
+
export interface ILMTagCheckProps extends CheckableTagProps {
|
|
9
|
+
color?: string;
|
|
10
|
+
}
|
|
7
11
|
interface LmTagInterface extends React.ForwardRefExoticComponent<ILMTagProps & React.RefAttributes<unknown>> {
|
|
8
12
|
CheckableTag?: typeof Tag.CheckableTag;
|
|
9
13
|
}
|
package/es/Tag/index.js
CHANGED
|
@@ -14,7 +14,9 @@ var __rest = this && this.__rest || function (s, e) {
|
|
|
14
14
|
return t;
|
|
15
15
|
};
|
|
16
16
|
|
|
17
|
-
import React, { forwardRef } from 'react';
|
|
17
|
+
import React, { forwardRef, useMemo, useRef } from 'react';
|
|
18
|
+
import hexToRgba from 'hex-to-rgba';
|
|
19
|
+
var CheckableTag = _Tag.CheckableTag;
|
|
18
20
|
import classNames from 'classnames';
|
|
19
21
|
export var PresetColorTypes = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime', 'theme'];
|
|
20
22
|
var prefixCls = 'lm_tag';
|
|
@@ -32,5 +34,49 @@ var LmTag = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
32
34
|
}, className, PresetColorTypes.includes(color) && "lm_tag_main_color lm_tag_main_".concat(color))
|
|
33
35
|
}));
|
|
34
36
|
});
|
|
35
|
-
|
|
37
|
+
var checkPreFixCls = 'lm_check_tag';
|
|
38
|
+
|
|
39
|
+
LmTag.CheckableTag = function (props) {
|
|
40
|
+
var className = props.className,
|
|
41
|
+
color = props.color,
|
|
42
|
+
checked = props.checked,
|
|
43
|
+
rest = __rest(props, ["className", "color", "checked"]);
|
|
44
|
+
|
|
45
|
+
var checkTagRef = useRef(null);
|
|
46
|
+
var colorProps = useMemo(function () {
|
|
47
|
+
if (color) {
|
|
48
|
+
try {
|
|
49
|
+
return {
|
|
50
|
+
style: {
|
|
51
|
+
color: checked ? '#fff' : hexToRgba(color),
|
|
52
|
+
background: checked ? color : hexToRgba(color, 0.15)
|
|
53
|
+
},
|
|
54
|
+
onMouseEnter: function onMouseEnter() {
|
|
55
|
+
checkTagRef.current.firstChild.style.background = checked ? color : hexToRgba(color, 0.25);
|
|
56
|
+
},
|
|
57
|
+
onMouseLeave: function onMouseLeave() {
|
|
58
|
+
checkTagRef.current.firstChild.style.background = checked ? color : hexToRgba(color, 0.15);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
} catch (_a) {
|
|
62
|
+
return {
|
|
63
|
+
style: {
|
|
64
|
+
color: hexToRgba(color),
|
|
65
|
+
background: hexToRgba(color, 0.15)
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
} else {
|
|
70
|
+
return {};
|
|
71
|
+
}
|
|
72
|
+
}, [color, checked]);
|
|
73
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
74
|
+
ref: checkTagRef
|
|
75
|
+
}, /*#__PURE__*/React.createElement(CheckableTag, Object.assign({}, rest, {
|
|
76
|
+
checked: checked
|
|
77
|
+
}, colorProps, {
|
|
78
|
+
className: classNames(checkPreFixCls, className, color && 'lm_custom_color_tag')
|
|
79
|
+
})));
|
|
80
|
+
};
|
|
81
|
+
|
|
36
82
|
export default LmTag;
|
package/es/Tag/style/index.css
CHANGED
|
@@ -513,8 +513,8 @@ html {
|
|
|
513
513
|
margin-left: 6px;
|
|
514
514
|
}
|
|
515
515
|
.lm_tag.ant-tag.lm_tag_main_theme {
|
|
516
|
-
background: var(--tree-select-bg);
|
|
517
516
|
color: var(--primary-color);
|
|
517
|
+
background: var(--tree-select-bg);
|
|
518
518
|
}
|
|
519
519
|
.lm_tag.lm_tag_noborder {
|
|
520
520
|
border-color: transparent;
|
|
@@ -564,3 +564,6 @@ html {
|
|
|
564
564
|
.ant-tag-checkable.ant-tag-checkable-checked {
|
|
565
565
|
background-color: var(--primary-color);
|
|
566
566
|
}
|
|
567
|
+
.lm_check_tag.lm_custom_color_tag.ant-tag-checkable-checked {
|
|
568
|
+
color: #fff !important;
|
|
569
|
+
}
|
package/es/Upload/index.d.ts
CHANGED
|
@@ -5,5 +5,9 @@ import type { RcFile as AntdRcFile } from 'antd/es/upload';
|
|
|
5
5
|
export declare type UploadProps = AntdUploadProps;
|
|
6
6
|
export declare type UploadFile = AntdUploadFile;
|
|
7
7
|
export declare type RcFile = AntdRcFile;
|
|
8
|
-
|
|
8
|
+
export interface LMUploadProps extends UploadProps {
|
|
9
|
+
className?: string;
|
|
10
|
+
sizeType?: string;
|
|
11
|
+
}
|
|
12
|
+
declare const LMUpload: React.FC<LMUploadProps>;
|
|
9
13
|
export default LMUpload;
|
package/es/Upload/index.js
CHANGED
|
@@ -3,19 +3,24 @@ import _Upload from "antd/es/upload";
|
|
|
3
3
|
import "antd/es/tooltip/style";
|
|
4
4
|
import _Tooltip from "antd/es/tooltip";
|
|
5
5
|
import React from 'react';
|
|
6
|
+
import classNames from 'classnames';
|
|
6
7
|
|
|
7
8
|
var LMUpload = function LMUpload(props) {
|
|
8
|
-
var
|
|
9
|
+
var className = props.className,
|
|
10
|
+
sizeType = props.sizeType,
|
|
11
|
+
listType = props.listType;
|
|
9
12
|
|
|
10
13
|
var renderUploadItem = function renderUploadItem(originNode, file) {
|
|
11
14
|
return !listType ? /*#__PURE__*/React.createElement(_Tooltip, {
|
|
12
|
-
placement:
|
|
15
|
+
placement: "bottom",
|
|
13
16
|
title: file.name
|
|
14
17
|
}, originNode.props.children) : originNode;
|
|
15
18
|
};
|
|
16
19
|
|
|
17
20
|
return /*#__PURE__*/React.createElement(_Upload, Object.assign({
|
|
21
|
+
className: classNames(className, sizeType == 'small' && 'little-upload'),
|
|
18
22
|
itemRender: renderUploadItem,
|
|
23
|
+
sizeType: sizeType,
|
|
19
24
|
listType: listType
|
|
20
25
|
}, props));
|
|
21
26
|
};
|
|
@@ -503,3 +503,38 @@ html {
|
|
|
503
503
|
.card_cell_content:hover .card_cell_body .card_cell_checkbox {
|
|
504
504
|
opacity: 1;
|
|
505
505
|
}
|
|
506
|
+
.ant-upload-select-picture-card div {
|
|
507
|
+
margin-top: 8px;
|
|
508
|
+
}
|
|
509
|
+
.little-upload .ant-upload-list-picture-card-container {
|
|
510
|
+
width: 64px;
|
|
511
|
+
height: 64px;
|
|
512
|
+
}
|
|
513
|
+
.little-upload .ant-upload-list-picture-card-container .ant-upload-list-item {
|
|
514
|
+
padding: 0 !important;
|
|
515
|
+
}
|
|
516
|
+
.little-upload .ant-upload-list-picture-card-container .ant-upload-list-item .ant-upload-list-item-thumbnail {
|
|
517
|
+
font-size: 12px;
|
|
518
|
+
}
|
|
519
|
+
.little-upload .ant-upload-list-picture-card-container .ant-upload-list-item .ant-upload-list-item-progress {
|
|
520
|
+
bottom: 5px;
|
|
521
|
+
left: 7px;
|
|
522
|
+
}
|
|
523
|
+
.little-upload .ant-upload-list-picture-card-container .ant-upload-list-item .ant-upload-list-item-name {
|
|
524
|
+
bottom: 5px;
|
|
525
|
+
font-size: 12px;
|
|
526
|
+
}
|
|
527
|
+
.little-upload .ant-upload.ant-upload-select-picture-card {
|
|
528
|
+
width: 64px;
|
|
529
|
+
height: 64px;
|
|
530
|
+
font-size: 12px;
|
|
531
|
+
}
|
|
532
|
+
.little-upload .ant-upload.ant-upload-select-picture-card .anticon svg {
|
|
533
|
+
width: 24px;
|
|
534
|
+
height: 24px;
|
|
535
|
+
margin-top: 8px;
|
|
536
|
+
}
|
|
537
|
+
.little-upload .ant-upload.ant-upload-select-picture-card div {
|
|
538
|
+
margin-top: 0;
|
|
539
|
+
font-size: 12px;
|
|
540
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { MutableRefObject } from 'react';
|
|
2
|
+
export declare const isFunction: (value: unknown) => value is Function;
|
|
3
|
+
declare type TargetValue<T> = T | undefined | null;
|
|
4
|
+
declare type TargetType = HTMLElement | Element | Window | Document;
|
|
5
|
+
export declare type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;
|
|
6
|
+
export declare function getTargetElement<T extends TargetType>(target: BasicTarget<T>, defaultElement?: T): T;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export var isFunction = function isFunction(value) {
|
|
2
|
+
return typeof value === 'function';
|
|
3
|
+
};
|
|
4
|
+
export function getTargetElement(target, defaultElement) {
|
|
5
|
+
if (!target) {
|
|
6
|
+
return defaultElement;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
var targetElement;
|
|
10
|
+
|
|
11
|
+
if (isFunction(target)) {
|
|
12
|
+
targetElement = target();
|
|
13
|
+
} else if ('current' in target) {
|
|
14
|
+
targetElement = target.current;
|
|
15
|
+
} else {
|
|
16
|
+
targetElement = target;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return targetElement;
|
|
20
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare function throttleByAnimationFrame<T extends unknown[]>(fn: (...args: T) => void): {
|
|
2
|
+
(...args: T): void;
|
|
3
|
+
cancel: () => void;
|
|
4
|
+
};
|
|
5
|
+
export declare function throttleByAnimationFrameDecorator(): (target: any, key: string, descriptor: any) => {
|
|
6
|
+
configurable: boolean;
|
|
7
|
+
get(): any;
|
|
8
|
+
};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
|
+
import raf from 'rc-util/lib/raf';
|
|
3
|
+
export function throttleByAnimationFrame(fn) {
|
|
4
|
+
var requestId;
|
|
5
|
+
|
|
6
|
+
var later = function later(args) {
|
|
7
|
+
return function () {
|
|
8
|
+
requestId = null;
|
|
9
|
+
fn.apply(void 0, _toConsumableArray(args));
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
var throttled = function throttled() {
|
|
14
|
+
if (requestId == null) {
|
|
15
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
16
|
+
args[_key] = arguments[_key];
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
requestId = raf(later(args));
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
throttled.cancel = function () {
|
|
24
|
+
raf.cancel(requestId);
|
|
25
|
+
requestId = null;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
return throttled;
|
|
29
|
+
}
|
|
30
|
+
export function throttleByAnimationFrameDecorator() {
|
|
31
|
+
return function throttle(target, key, descriptor) {
|
|
32
|
+
var fn = descriptor.value;
|
|
33
|
+
var definingProperty = false;
|
|
34
|
+
return {
|
|
35
|
+
configurable: true,
|
|
36
|
+
get: function get() {
|
|
37
|
+
// In IE11 calling Object.defineProperty has a side-effect of evaluating the
|
|
38
|
+
// getter for the property which is being replaced. This causes infinite
|
|
39
|
+
// recursion and an "Out of stack space" error.
|
|
40
|
+
// eslint-disable-next-line no-prototype-builtins
|
|
41
|
+
if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {
|
|
42
|
+
/* istanbul ignore next */
|
|
43
|
+
return fn;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
var boundFn = throttleByAnimationFrame(fn.bind(this));
|
|
47
|
+
definingProperty = true;
|
|
48
|
+
Object.defineProperty(this, key, {
|
|
49
|
+
value: boundFn,
|
|
50
|
+
configurable: true,
|
|
51
|
+
writable: true
|
|
52
|
+
});
|
|
53
|
+
definingProperty = false;
|
|
54
|
+
return boundFn;
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
}
|
package/es/index.d.ts
CHANGED
package/es/index.js
CHANGED
|
@@ -46,4 +46,5 @@ export { default as Tooltip } from './Tooltip';
|
|
|
46
46
|
export { default as Form } from './Form';
|
|
47
47
|
export { default as Spin } from './Spin';
|
|
48
48
|
export { default as LmEditTable } from './LmEditTable';
|
|
49
|
-
export { default as List } from './List';
|
|
49
|
+
export { default as List } from './List';
|
|
50
|
+
export { default as LMQuickMenu } from './QuickMenu';
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { ConfigConsumerProps } from 'antd/es/config-provider';
|
|
3
|
+
export interface AffixProps {
|
|
4
|
+
/** 距离窗口顶部达到指定偏移量后触发 */
|
|
5
|
+
offsetTop?: number;
|
|
6
|
+
/** 距离窗口底部达到指定偏移量后触发 */
|
|
7
|
+
offsetBottom?: number;
|
|
8
|
+
style?: React.CSSProperties;
|
|
9
|
+
/** 固定状态改变时触发的回调函数 */
|
|
10
|
+
onChange?: (affixed?: boolean) => void;
|
|
11
|
+
/** 设置 Affix 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 */
|
|
12
|
+
target?: () => Window | HTMLElement | null;
|
|
13
|
+
prefixCls?: string;
|
|
14
|
+
className?: string;
|
|
15
|
+
children: React.ReactNode;
|
|
16
|
+
}
|
|
17
|
+
interface InternalAffixProps extends AffixProps {
|
|
18
|
+
affixPrefixCls: string;
|
|
19
|
+
}
|
|
20
|
+
declare enum AffixStatus {
|
|
21
|
+
None = 0,
|
|
22
|
+
Prepare = 1
|
|
23
|
+
}
|
|
24
|
+
export interface AffixState {
|
|
25
|
+
affixStyle?: React.CSSProperties;
|
|
26
|
+
placeholderStyle?: React.CSSProperties;
|
|
27
|
+
status: AffixStatus;
|
|
28
|
+
lastAffix: boolean;
|
|
29
|
+
prevTarget: Window | HTMLElement | null;
|
|
30
|
+
}
|
|
31
|
+
declare class Affix extends React.Component<InternalAffixProps, AffixState> {
|
|
32
|
+
static contextType: React.Context<ConfigConsumerProps>;
|
|
33
|
+
state: AffixState;
|
|
34
|
+
placeholderNode: HTMLDivElement;
|
|
35
|
+
fixedNode: HTMLDivElement;
|
|
36
|
+
private timeout;
|
|
37
|
+
context: ConfigConsumerProps;
|
|
38
|
+
private getTargetFunc;
|
|
39
|
+
componentDidMount(): void;
|
|
40
|
+
componentDidUpdate(prevProps: AffixProps): void;
|
|
41
|
+
componentWillUnmount(): void;
|
|
42
|
+
getOffsetTop: () => number;
|
|
43
|
+
getOffsetBottom: () => number;
|
|
44
|
+
savePlaceholderNode: (node: HTMLDivElement) => void;
|
|
45
|
+
saveFixedNode: (node: HTMLDivElement) => void;
|
|
46
|
+
measure: () => void;
|
|
47
|
+
prepareMeasure: () => void;
|
|
48
|
+
updatePosition(): void;
|
|
49
|
+
lazyUpdatePosition(): void;
|
|
50
|
+
render(): JSX.Element;
|
|
51
|
+
}
|
|
52
|
+
export declare type InternalAffixClass = Affix;
|
|
53
|
+
declare const AffixFC: React.ForwardRefExoticComponent<AffixProps & React.RefAttributes<Affix>>;
|
|
54
|
+
export default AffixFC;
|
|
@@ -0,0 +1,349 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
require("antd/es/affix/style");
|
|
13
|
+
|
|
14
|
+
var _affix = _interopRequireDefault(require("antd/es/affix"));
|
|
15
|
+
|
|
16
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
|
+
|
|
18
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
19
|
+
|
|
20
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
21
|
+
|
|
22
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
23
|
+
|
|
24
|
+
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
25
|
+
|
|
26
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
27
|
+
|
|
28
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
29
|
+
|
|
30
|
+
var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
|
|
31
|
+
|
|
32
|
+
var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
|
|
33
|
+
|
|
34
|
+
var React = _interopRequireWildcard(require("react"));
|
|
35
|
+
|
|
36
|
+
var _configProvider = require("antd/es/config-provider");
|
|
37
|
+
|
|
38
|
+
var _throttleByAnimationFrame = require("../_util/throttleByAnimationFrame");
|
|
39
|
+
|
|
40
|
+
var _utils = require("./utils");
|
|
41
|
+
|
|
42
|
+
var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
|
|
43
|
+
var c = arguments.length,
|
|
44
|
+
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
|
|
45
|
+
d;
|
|
46
|
+
if ((typeof Reflect === "undefined" ? "undefined" : (0, _typeof2.default)(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
|
|
47
|
+
if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
48
|
+
}
|
|
49
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
function getDefaultTarget() {
|
|
53
|
+
return typeof window !== 'undefined' ? window : null;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
var AffixStatus;
|
|
57
|
+
|
|
58
|
+
(function (AffixStatus) {
|
|
59
|
+
AffixStatus[AffixStatus["None"] = 0] = "None";
|
|
60
|
+
AffixStatus[AffixStatus["Prepare"] = 1] = "Prepare";
|
|
61
|
+
})(AffixStatus || (AffixStatus = {}));
|
|
62
|
+
|
|
63
|
+
var Affix = /*#__PURE__*/function (_React$Component) {
|
|
64
|
+
(0, _inherits2.default)(Affix, _React$Component);
|
|
65
|
+
|
|
66
|
+
var _super = (0, _createSuper2.default)(Affix);
|
|
67
|
+
|
|
68
|
+
function Affix() {
|
|
69
|
+
var _this;
|
|
70
|
+
|
|
71
|
+
(0, _classCallCheck2.default)(this, Affix);
|
|
72
|
+
_this = _super.apply(this, arguments);
|
|
73
|
+
_this.state = {
|
|
74
|
+
status: AffixStatus.None,
|
|
75
|
+
lastAffix: false,
|
|
76
|
+
prevTarget: null
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
_this.getOffsetTop = function () {
|
|
80
|
+
var _this$props = _this.props,
|
|
81
|
+
offsetBottom = _this$props.offsetBottom,
|
|
82
|
+
offsetTop = _this$props.offsetTop;
|
|
83
|
+
return offsetBottom === undefined && offsetTop === undefined ? 0 : offsetTop;
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
_this.getOffsetBottom = function () {
|
|
87
|
+
return _this.props.offsetBottom;
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
_this.savePlaceholderNode = function (node) {
|
|
91
|
+
_this.placeholderNode = node;
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
_this.saveFixedNode = function (node) {
|
|
95
|
+
_this.fixedNode = node;
|
|
96
|
+
}; // =================== Measure ===================
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
_this.measure = function () {
|
|
100
|
+
var _this$state = _this.state,
|
|
101
|
+
status = _this$state.status,
|
|
102
|
+
lastAffix = _this$state.lastAffix;
|
|
103
|
+
var onChange = _this.props.onChange;
|
|
104
|
+
|
|
105
|
+
var targetFunc = _this.getTargetFunc();
|
|
106
|
+
|
|
107
|
+
if (status !== AffixStatus.Prepare || !_this.fixedNode || !_this.placeholderNode || !targetFunc) {
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
var offsetTop = _this.getOffsetTop();
|
|
112
|
+
|
|
113
|
+
var offsetBottom = _this.getOffsetBottom();
|
|
114
|
+
|
|
115
|
+
var targetNode = targetFunc();
|
|
116
|
+
|
|
117
|
+
if (!targetNode) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
var newState = {
|
|
122
|
+
status: AffixStatus.None
|
|
123
|
+
};
|
|
124
|
+
var targetRect = (0, _utils.getTargetRect)(targetNode);
|
|
125
|
+
var placeholderReact = (0, _utils.getTargetRect)(_this.placeholderNode);
|
|
126
|
+
var fixedTop = (0, _utils.getFixedTop)(placeholderReact, targetRect, offsetTop);
|
|
127
|
+
var fixedBottom = (0, _utils.getFixedBottom)(placeholderReact, targetRect, offsetBottom);
|
|
128
|
+
|
|
129
|
+
if (fixedTop !== undefined) {
|
|
130
|
+
newState.affixStyle = {
|
|
131
|
+
position: 'fixed',
|
|
132
|
+
top: fixedTop,
|
|
133
|
+
width: placeholderReact.width,
|
|
134
|
+
height: placeholderReact.height
|
|
135
|
+
};
|
|
136
|
+
newState.placeholderStyle = {
|
|
137
|
+
width: placeholderReact.width,
|
|
138
|
+
height: placeholderReact.height
|
|
139
|
+
};
|
|
140
|
+
} else if (fixedBottom !== undefined) {
|
|
141
|
+
newState.affixStyle = {
|
|
142
|
+
position: 'fixed',
|
|
143
|
+
bottom: fixedBottom,
|
|
144
|
+
width: placeholderReact.width,
|
|
145
|
+
height: placeholderReact.height
|
|
146
|
+
};
|
|
147
|
+
newState.placeholderStyle = {
|
|
148
|
+
width: placeholderReact.width,
|
|
149
|
+
height: placeholderReact.height
|
|
150
|
+
};
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
newState.lastAffix = !!newState.affixStyle;
|
|
154
|
+
|
|
155
|
+
if (onChange && lastAffix !== newState.lastAffix) {
|
|
156
|
+
onChange(newState.lastAffix);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
_this.setState(newState);
|
|
160
|
+
}; // @ts-ignore TS6133
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
_this.prepareMeasure = function () {
|
|
164
|
+
// event param is used before. Keep compatible ts define here.
|
|
165
|
+
_this.setState({
|
|
166
|
+
status: AffixStatus.Prepare,
|
|
167
|
+
affixStyle: undefined,
|
|
168
|
+
placeholderStyle: undefined
|
|
169
|
+
}); // Test if `updatePosition` called
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
if (process.env.NODE_ENV === 'test') {
|
|
173
|
+
var onTestUpdatePosition = _this.props.onTestUpdatePosition;
|
|
174
|
+
onTestUpdatePosition === null || onTestUpdatePosition === void 0 ? void 0 : onTestUpdatePosition();
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
return _this;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
(0, _createClass2.default)(Affix, [{
|
|
182
|
+
key: "getTargetFunc",
|
|
183
|
+
value: function getTargetFunc() {
|
|
184
|
+
var getTargetContainer = this.context.getTargetContainer;
|
|
185
|
+
var target = this.props.target;
|
|
186
|
+
|
|
187
|
+
if (target !== undefined) {
|
|
188
|
+
return target;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
return getTargetContainer || getDefaultTarget;
|
|
192
|
+
} // Event handler
|
|
193
|
+
|
|
194
|
+
}, {
|
|
195
|
+
key: "componentDidMount",
|
|
196
|
+
value: function componentDidMount() {
|
|
197
|
+
var _this2 = this;
|
|
198
|
+
|
|
199
|
+
var targetFunc = this.getTargetFunc();
|
|
200
|
+
|
|
201
|
+
if (targetFunc) {
|
|
202
|
+
// [Legacy] Wait for parent component ref has its value.
|
|
203
|
+
// We should use target as directly element instead of function which makes element check hard.
|
|
204
|
+
this.timeout = setTimeout(function () {
|
|
205
|
+
(0, _utils.addObserveTarget)(targetFunc(), _this2); // Mock Event object.
|
|
206
|
+
|
|
207
|
+
_this2.updatePosition();
|
|
208
|
+
});
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
}, {
|
|
212
|
+
key: "componentDidUpdate",
|
|
213
|
+
value: function componentDidUpdate(prevProps) {
|
|
214
|
+
var prevTarget = this.state.prevTarget;
|
|
215
|
+
var targetFunc = this.getTargetFunc();
|
|
216
|
+
var newTarget = (targetFunc === null || targetFunc === void 0 ? void 0 : targetFunc()) || null;
|
|
217
|
+
|
|
218
|
+
if (prevTarget !== newTarget) {
|
|
219
|
+
(0, _utils.removeObserveTarget)(this);
|
|
220
|
+
|
|
221
|
+
if (newTarget) {
|
|
222
|
+
(0, _utils.addObserveTarget)(newTarget, this); // Mock Event object.
|
|
223
|
+
|
|
224
|
+
this.updatePosition();
|
|
225
|
+
} // eslint-disable-next-line react/no-did-update-set-state
|
|
226
|
+
|
|
227
|
+
|
|
228
|
+
this.setState({
|
|
229
|
+
prevTarget: newTarget
|
|
230
|
+
});
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
if (prevProps.offsetTop !== this.props.offsetTop || prevProps.offsetBottom !== this.props.offsetBottom) {
|
|
234
|
+
this.updatePosition();
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
this.measure();
|
|
238
|
+
}
|
|
239
|
+
}, {
|
|
240
|
+
key: "componentWillUnmount",
|
|
241
|
+
value: function componentWillUnmount() {
|
|
242
|
+
clearTimeout(this.timeout);
|
|
243
|
+
(0, _utils.removeObserveTarget)(this);
|
|
244
|
+
this.updatePosition.cancel(); // https://github.com/ant-design/ant-design/issues/22683
|
|
245
|
+
|
|
246
|
+
this.lazyUpdatePosition.cancel();
|
|
247
|
+
} // Handle realign logic
|
|
248
|
+
|
|
249
|
+
}, {
|
|
250
|
+
key: "updatePosition",
|
|
251
|
+
value: function updatePosition() {
|
|
252
|
+
this.prepareMeasure();
|
|
253
|
+
}
|
|
254
|
+
}, {
|
|
255
|
+
key: "lazyUpdatePosition",
|
|
256
|
+
value: function lazyUpdatePosition() {
|
|
257
|
+
var targetFunc = this.getTargetFunc();
|
|
258
|
+
var affixStyle = this.state.affixStyle; // Check position change before measure to make Safari smooth
|
|
259
|
+
|
|
260
|
+
if (targetFunc && affixStyle) {
|
|
261
|
+
var offsetTop = this.getOffsetTop();
|
|
262
|
+
var offsetBottom = this.getOffsetBottom();
|
|
263
|
+
var targetNode = targetFunc();
|
|
264
|
+
|
|
265
|
+
if (targetNode && this.placeholderNode) {
|
|
266
|
+
var targetRect = (0, _utils.getTargetRect)(targetNode);
|
|
267
|
+
var placeholderReact = (0, _utils.getTargetRect)(this.placeholderNode);
|
|
268
|
+
var fixedTop = (0, _utils.getFixedTop)(placeholderReact, targetRect, offsetTop);
|
|
269
|
+
var fixedBottom = (0, _utils.getFixedBottom)(placeholderReact, targetRect, offsetBottom);
|
|
270
|
+
|
|
271
|
+
if (fixedTop !== undefined && affixStyle.top === fixedTop || fixedBottom !== undefined && affixStyle.bottom === fixedBottom) {
|
|
272
|
+
return;
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
} // Directly call prepare measure since it's already throttled.
|
|
276
|
+
|
|
277
|
+
|
|
278
|
+
this.prepareMeasure();
|
|
279
|
+
} // =================== Render ===================
|
|
280
|
+
|
|
281
|
+
}, {
|
|
282
|
+
key: "render",
|
|
283
|
+
value: function render() {
|
|
284
|
+
var _this3 = this;
|
|
285
|
+
|
|
286
|
+
var _this$state2 = this.state,
|
|
287
|
+
affixStyle = _this$state2.affixStyle,
|
|
288
|
+
placeholderStyle = _this$state2.placeholderStyle;
|
|
289
|
+
var _this$props2 = this.props,
|
|
290
|
+
affixPrefixCls = _this$props2.affixPrefixCls,
|
|
291
|
+
children = _this$props2.children;
|
|
292
|
+
var className = (0, _classnames.default)((0, _defineProperty2.default)({}, affixPrefixCls, !!affixStyle));
|
|
293
|
+
var props = (0, _omit.default)(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange', 'affixPrefixCls']); // Omit this since `onTestUpdatePosition` only works on test.
|
|
294
|
+
|
|
295
|
+
if (process.env.NODE_ENV === 'test') {
|
|
296
|
+
props = (0, _omit.default)(props, ['onTestUpdatePosition']);
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
return /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
|
|
300
|
+
onResize: function onResize() {
|
|
301
|
+
_this3.updatePosition();
|
|
302
|
+
}
|
|
303
|
+
}, /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
|
|
304
|
+
ref: this.savePlaceholderNode
|
|
305
|
+
}), affixStyle && /*#__PURE__*/React.createElement("div", {
|
|
306
|
+
style: placeholderStyle,
|
|
307
|
+
"aria-hidden": "true"
|
|
308
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
309
|
+
className: className,
|
|
310
|
+
ref: this.saveFixedNode,
|
|
311
|
+
style: affixStyle
|
|
312
|
+
}, /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
|
|
313
|
+
onResize: function onResize() {
|
|
314
|
+
_this3.updatePosition();
|
|
315
|
+
}
|
|
316
|
+
}, children))));
|
|
317
|
+
}
|
|
318
|
+
}]);
|
|
319
|
+
return Affix;
|
|
320
|
+
}(React.Component);
|
|
321
|
+
|
|
322
|
+
Affix.contextType = _configProvider.ConfigContext;
|
|
323
|
+
|
|
324
|
+
__decorate([(0, _throttleByAnimationFrame.throttleByAnimationFrameDecorator)()], Affix.prototype, "updatePosition", null);
|
|
325
|
+
|
|
326
|
+
__decorate([(0, _throttleByAnimationFrame.throttleByAnimationFrameDecorator)()], Affix.prototype, "lazyUpdatePosition", null);
|
|
327
|
+
|
|
328
|
+
var AffixFC = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
329
|
+
var customizePrefixCls = props.prefixCls;
|
|
330
|
+
|
|
331
|
+
var _React$useContext = React.useContext(_configProvider.ConfigContext),
|
|
332
|
+
getPrefixCls = _React$useContext.getPrefixCls;
|
|
333
|
+
|
|
334
|
+
var affixPrefixCls = getPrefixCls('affix', customizePrefixCls);
|
|
335
|
+
var affixProps = Object.assign(Object.assign({}, props), {
|
|
336
|
+
affixPrefixCls: affixPrefixCls
|
|
337
|
+
});
|
|
338
|
+
return /*#__PURE__*/React.createElement(Affix, Object.assign({}, affixProps, {
|
|
339
|
+
ref: ref
|
|
340
|
+
}));
|
|
341
|
+
});
|
|
342
|
+
AffixFC.AntdAffix = _affix.default;
|
|
343
|
+
|
|
344
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
345
|
+
AffixFC.displayName = 'Affix';
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
var _default = AffixFC;
|
|
349
|
+
exports.default = _default;
|