@douyinfe/semi-ui 2.24.0-alpha.0 → 2.24.0-beta.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.
- package/dist/css/semi.css +33 -10
- package/dist/css/semi.min.css +1 -1
- package/dist/umd/semi-ui.js +395 -230
- package/dist/umd/semi-ui.js.map +1 -1
- package/dist/umd/semi-ui.min.js +1 -1
- package/dist/umd/semi-ui.min.js.map +1 -1
- package/lib/cjs/_utils/index.d.ts +3 -3
- package/lib/cjs/carousel/index.d.ts +1 -1
- package/lib/cjs/datePicker/dateInput.d.ts +1 -1
- package/lib/cjs/datePicker/datePicker.d.ts +1 -1
- package/lib/cjs/datePicker/monthsGrid.d.ts +1 -1
- package/lib/cjs/form/baseForm.d.ts +2 -2
- package/lib/cjs/form/field.d.ts +2 -2
- package/lib/cjs/form/hoc/withField.js +4 -0
- package/lib/cjs/highlight/index.d.ts +37 -0
- package/lib/cjs/highlight/index.js +72 -0
- package/lib/cjs/image/image.js +4 -1
- package/lib/cjs/image/index.d.ts +1 -1
- package/lib/cjs/image/interface.d.ts +2 -0
- package/lib/cjs/image/previewImage.js +4 -2
- package/lib/cjs/image/previewInner.d.ts +5 -0
- package/lib/cjs/image/previewInner.js +43 -0
- package/lib/cjs/index.d.ts +1 -0
- package/lib/cjs/index.js +8 -0
- package/lib/cjs/modal/Modal.d.ts +1 -1
- package/lib/cjs/modal/Modal.js +4 -4
- package/lib/cjs/navigation/Item.d.ts +1 -1
- package/lib/cjs/navigation/Item.js +9 -0
- package/lib/cjs/navigation/SubNav.js +6 -1
- package/lib/cjs/navigation/index.d.ts +9 -1
- package/lib/cjs/navigation/index.js +8 -3
- package/lib/cjs/navigation/nav-context.d.ts +4 -1
- package/lib/cjs/select/index.d.ts +2 -0
- package/lib/cjs/select/index.js +9 -1
- package/lib/cjs/timePicker/TimePicker.js +0 -1
- package/lib/cjs/upload/index.d.ts +3 -3
- package/lib/es/_utils/index.d.ts +3 -3
- package/lib/es/carousel/index.d.ts +1 -1
- package/lib/es/datePicker/dateInput.d.ts +1 -1
- package/lib/es/datePicker/datePicker.d.ts +1 -1
- package/lib/es/datePicker/monthsGrid.d.ts +1 -1
- package/lib/es/form/baseForm.d.ts +2 -2
- package/lib/es/form/field.d.ts +2 -2
- package/lib/es/form/hoc/withField.js +4 -0
- package/lib/es/highlight/index.d.ts +37 -0
- package/lib/es/highlight/index.js +56 -0
- package/lib/es/image/image.js +3 -1
- package/lib/es/image/index.d.ts +1 -1
- package/lib/es/image/interface.d.ts +2 -0
- package/lib/es/image/previewImage.js +4 -2
- package/lib/es/image/previewInner.d.ts +5 -0
- package/lib/es/image/previewInner.js +43 -0
- package/lib/es/index.d.ts +1 -0
- package/lib/es/index.js +1 -0
- package/lib/es/modal/Modal.d.ts +1 -1
- package/lib/es/modal/Modal.js +4 -4
- package/lib/es/navigation/Item.d.ts +1 -1
- package/lib/es/navigation/Item.js +9 -0
- package/lib/es/navigation/SubNav.js +6 -1
- package/lib/es/navigation/index.d.ts +9 -1
- package/lib/es/navigation/index.js +8 -3
- package/lib/es/navigation/nav-context.d.ts +4 -1
- package/lib/es/select/index.d.ts +2 -0
- package/lib/es/select/index.js +8 -1
- package/lib/es/timePicker/TimePicker.js +0 -1
- package/lib/es/upload/index.d.ts +3 -3
- package/package.json +8 -8
|
@@ -28,7 +28,7 @@ export declare function cloneDeep(value: any, customizer?: (value: any) => void)
|
|
|
28
28
|
* @return {Array<object>}
|
|
29
29
|
*/
|
|
30
30
|
export declare const getHighLightTextHTML: ({ sourceString, searchWords, option }: GetHighLightTextHTMLProps) => (string | React.ReactElement<{
|
|
31
|
-
style:
|
|
31
|
+
style: React.CSSProperties;
|
|
32
32
|
className: string;
|
|
33
33
|
key: string;
|
|
34
34
|
}, string | React.JSXElementConstructor<any>>)[];
|
|
@@ -46,13 +46,13 @@ export interface RegisterMediaQueryOption {
|
|
|
46
46
|
export declare const registerMediaQuery: (media: string, { match, unmatch, callInInit }: RegisterMediaQueryOption) => () => void;
|
|
47
47
|
export interface GetHighLightTextHTMLProps {
|
|
48
48
|
sourceString?: string;
|
|
49
|
-
searchWords?:
|
|
49
|
+
searchWords?: string[];
|
|
50
50
|
option: HighLightTextHTMLOption;
|
|
51
51
|
}
|
|
52
52
|
export interface HighLightTextHTMLOption {
|
|
53
53
|
highlightTag?: string;
|
|
54
54
|
highlightClassName?: string;
|
|
55
|
-
highlightStyle?:
|
|
55
|
+
highlightStyle?: React.CSSProperties;
|
|
56
56
|
caseSensitive: boolean;
|
|
57
57
|
autoEscape: boolean;
|
|
58
58
|
}
|
|
@@ -24,7 +24,7 @@ declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
|
|
|
24
24
|
indicatorType: PropTypes.Requireable<"line" | "dot" | "columnar">;
|
|
25
25
|
theme: PropTypes.Requireable<"dark" | "light" | "primary">;
|
|
26
26
|
onChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
27
|
-
arrowType: PropTypes.Requireable<"
|
|
27
|
+
arrowType: PropTypes.Requireable<"always" | "hover">;
|
|
28
28
|
showArrow: PropTypes.Requireable<boolean>;
|
|
29
29
|
showIndicator: PropTypes.Requireable<boolean>;
|
|
30
30
|
slideDirection: PropTypes.Requireable<"left" | "right">;
|
|
@@ -26,7 +26,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
|
|
|
26
26
|
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
|
|
27
27
|
value: PropTypes.Requireable<any[]>;
|
|
28
28
|
disabled: PropTypes.Requireable<boolean>;
|
|
29
|
-
type: PropTypes.Requireable<"
|
|
29
|
+
type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
|
|
30
30
|
showClear: PropTypes.Requireable<boolean>;
|
|
31
31
|
format: PropTypes.Requireable<string>;
|
|
32
32
|
inputStyle: PropTypes.Requireable<object>;
|
|
@@ -43,7 +43,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
|
|
|
43
43
|
'aria-invalid': PropTypes.Requireable<boolean>;
|
|
44
44
|
'aria-labelledby': PropTypes.Requireable<string>;
|
|
45
45
|
'aria-required': PropTypes.Requireable<boolean>;
|
|
46
|
-
type: PropTypes.Requireable<"
|
|
46
|
+
type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
|
|
47
47
|
size: PropTypes.Requireable<"default" | "small" | "large">;
|
|
48
48
|
density: PropTypes.Requireable<"default" | "compact">;
|
|
49
49
|
defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
|
|
@@ -19,7 +19,7 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
|
|
|
19
19
|
export declare type MonthsGridState = MonthsGridFoundationState;
|
|
20
20
|
export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
|
|
21
21
|
static propTypes: {
|
|
22
|
-
type: PropTypes.Requireable<"
|
|
22
|
+
type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
|
|
23
23
|
defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
|
|
24
24
|
defaultPickerValue: PropTypes.Requireable<NonNullable<string | number | object>>;
|
|
25
25
|
multiple: PropTypes.Requireable<boolean>;
|
|
@@ -57,9 +57,9 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
|
|
|
57
57
|
static Select: React.ComponentType<import("utility-types").Subtract<{
|
|
58
58
|
'aria-describedby'?: string;
|
|
59
59
|
'aria-errormessage'?: string;
|
|
60
|
-
'aria-invalid'?: boolean | "
|
|
60
|
+
'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
|
|
61
61
|
'aria-labelledby'?: string;
|
|
62
|
-
'aria-required'?: boolean | "
|
|
62
|
+
'aria-required'?: boolean | "false" | "true";
|
|
63
63
|
id?: string;
|
|
64
64
|
autoFocus?: boolean;
|
|
65
65
|
autoClearSearchValue?: boolean;
|
package/lib/cjs/form/field.d.ts
CHANGED
|
@@ -5,9 +5,9 @@ declare const FormTextArea: import("react").ComponentType<import("utility-types"
|
|
|
5
5
|
declare const FormSelect: import("react").ComponentType<import("utility-types").Subtract<{
|
|
6
6
|
'aria-describedby'?: string;
|
|
7
7
|
'aria-errormessage'?: string;
|
|
8
|
-
'aria-invalid'?: boolean | "
|
|
8
|
+
'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
|
|
9
9
|
'aria-labelledby'?: string;
|
|
10
|
-
'aria-required'?: boolean | "
|
|
10
|
+
'aria-required'?: boolean | "false" | "true";
|
|
11
11
|
id?: string;
|
|
12
12
|
autoFocus?: boolean;
|
|
13
13
|
autoClearSearchValue?: boolean;
|
|
@@ -458,6 +458,10 @@ function withField(Component, opts) {
|
|
|
458
458
|
'aria-labelledby': labelId
|
|
459
459
|
});
|
|
460
460
|
|
|
461
|
+
if (name) {
|
|
462
|
+
newProps['name'] = name;
|
|
463
|
+
}
|
|
464
|
+
|
|
461
465
|
if (helpText) {
|
|
462
466
|
newProps['aria-describedby'] = extraText ? "".concat(helpTextId, " ").concat(extraTextId) : helpTextId;
|
|
463
467
|
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React, { PureComponent } from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import '@douyinfe/semi-foundation/lib/cjs/highlight/highlight.css';
|
|
4
|
+
export interface HighlightProps {
|
|
5
|
+
autoEscape?: boolean;
|
|
6
|
+
caseSensitive?: boolean;
|
|
7
|
+
sourceString?: string;
|
|
8
|
+
searchWords?: Array<string>;
|
|
9
|
+
highlightStyle?: React.CSSProperties;
|
|
10
|
+
highlightClassName?: string;
|
|
11
|
+
component?: string;
|
|
12
|
+
}
|
|
13
|
+
declare class Highlight extends PureComponent<HighlightProps> {
|
|
14
|
+
static propTypes: {
|
|
15
|
+
style: PropTypes.Requireable<object>;
|
|
16
|
+
className: PropTypes.Requireable<string>;
|
|
17
|
+
autoEscape: PropTypes.Requireable<boolean>;
|
|
18
|
+
caseSensitive: PropTypes.Requireable<boolean>;
|
|
19
|
+
sourceString: PropTypes.Requireable<string>;
|
|
20
|
+
searchWords: PropTypes.Requireable<string[]>;
|
|
21
|
+
highlightStyle: PropTypes.Requireable<object>;
|
|
22
|
+
highlightClassName: PropTypes.Requireable<string>;
|
|
23
|
+
component: PropTypes.Requireable<string>;
|
|
24
|
+
};
|
|
25
|
+
static defaultProps: {
|
|
26
|
+
component: string;
|
|
27
|
+
autoEscape: boolean;
|
|
28
|
+
caseSensitive: boolean;
|
|
29
|
+
sourceString: string;
|
|
30
|
+
};
|
|
31
|
+
render(): (string | React.ReactElement<{
|
|
32
|
+
style: React.CSSProperties;
|
|
33
|
+
className: string;
|
|
34
|
+
key: string;
|
|
35
|
+
}, string | React.JSXElementConstructor<any>>)[];
|
|
36
|
+
}
|
|
37
|
+
export default Highlight;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
+
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
var _constants = require("@douyinfe/semi-foundation/lib/cjs/highlight/constants");
|
|
15
|
+
|
|
16
|
+
var _index = require("../_utils/index");
|
|
17
|
+
|
|
18
|
+
require("@douyinfe/semi-foundation/lib/cjs/highlight/highlight.css");
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
22
|
+
const prefixCls = _constants.cssClasses.PREFIX;
|
|
23
|
+
|
|
24
|
+
class Highlight extends _react.PureComponent {
|
|
25
|
+
render() {
|
|
26
|
+
const {
|
|
27
|
+
searchWords,
|
|
28
|
+
sourceString,
|
|
29
|
+
component,
|
|
30
|
+
highlightClassName,
|
|
31
|
+
highlightStyle,
|
|
32
|
+
caseSensitive,
|
|
33
|
+
autoEscape
|
|
34
|
+
} = this.props;
|
|
35
|
+
const tagCls = (0, _classnames.default)({
|
|
36
|
+
["".concat(prefixCls, "-tag")]: true
|
|
37
|
+
}, highlightClassName);
|
|
38
|
+
const option = {
|
|
39
|
+
highlightTag: component,
|
|
40
|
+
highlightClassName: tagCls,
|
|
41
|
+
highlightStyle,
|
|
42
|
+
caseSensitive,
|
|
43
|
+
autoEscape
|
|
44
|
+
};
|
|
45
|
+
return (0, _index.getHighLightTextHTML)({
|
|
46
|
+
sourceString,
|
|
47
|
+
searchWords,
|
|
48
|
+
option
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
Highlight.propTypes = {
|
|
55
|
+
style: _propTypes.default.object,
|
|
56
|
+
className: _propTypes.default.string,
|
|
57
|
+
autoEscape: _propTypes.default.bool,
|
|
58
|
+
caseSensitive: _propTypes.default.bool,
|
|
59
|
+
sourceString: _propTypes.default.string,
|
|
60
|
+
searchWords: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
61
|
+
highlightStyle: _propTypes.default.object,
|
|
62
|
+
highlightClassName: _propTypes.default.string,
|
|
63
|
+
component: _propTypes.default.string
|
|
64
|
+
};
|
|
65
|
+
Highlight.defaultProps = {
|
|
66
|
+
component: 'mark',
|
|
67
|
+
autoEscape: true,
|
|
68
|
+
caseSensitive: false,
|
|
69
|
+
sourceString: ''
|
|
70
|
+
};
|
|
71
|
+
var _default = Highlight;
|
|
72
|
+
exports.default = _default;
|
package/lib/cjs/image/image.js
CHANGED
|
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
|
+
var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
|
|
9
|
+
|
|
8
10
|
var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
|
|
9
11
|
|
|
10
12
|
var _isBoolean2 = _interopRequireDefault(require("lodash/isBoolean"));
|
|
@@ -230,7 +232,8 @@ class Image extends _baseComponent.default {
|
|
|
230
232
|
}), loadStatus !== "success" && this.renderExtra(), canPreview && /*#__PURE__*/_react.default.createElement(_previewInner.default, Object.assign({}, previewProps, {
|
|
231
233
|
src: previewSrc,
|
|
232
234
|
visible: previewVisible,
|
|
233
|
-
onVisibleChange: this.handlePreviewVisibleChange
|
|
235
|
+
onVisibleChange: this.handlePreviewVisibleChange,
|
|
236
|
+
crossOrigin: !(0, _isUndefined2.default)(crossOrigin) ? crossOrigin : previewProps === null || previewProps === void 0 ? void 0 : previewProps.crossOrigin
|
|
234
237
|
})))
|
|
235
238
|
);
|
|
236
239
|
}
|
package/lib/cjs/image/index.d.ts
CHANGED
|
@@ -4,4 +4,4 @@ import Preview from "./preview";
|
|
|
4
4
|
import '@douyinfe/semi-foundation/lib/cjs/image/image.css';
|
|
5
5
|
export default Image;
|
|
6
6
|
export { PreviewInner, Preview, };
|
|
7
|
-
export { ImageProps, PreviewImageProps, PreviewProps, } from "./interface";
|
|
7
|
+
export type { ImageProps, PreviewImageProps, PreviewProps, MenuProps } from "./interface";
|
|
@@ -49,6 +49,7 @@ export interface PreviewProps extends BaseProps {
|
|
|
49
49
|
disableDownload?: boolean;
|
|
50
50
|
zIndex?: number;
|
|
51
51
|
children?: ReactNode;
|
|
52
|
+
crossOrigin?: "anonymous" | "use-credentials";
|
|
52
53
|
renderHeader?: (info: any) => ReactNode;
|
|
53
54
|
renderPreviewMenu?: (props: MenuProps) => ReactNode;
|
|
54
55
|
getPopupContainer?: () => HTMLElement;
|
|
@@ -146,6 +147,7 @@ export interface PreviewImageProps {
|
|
|
146
147
|
ratio?: RatioType;
|
|
147
148
|
disableDownload?: boolean;
|
|
148
149
|
clickZoom?: number;
|
|
150
|
+
crossOrigin?: "anonymous" | "use-credentials";
|
|
149
151
|
setRatio?: (type: RatioType) => void;
|
|
150
152
|
onZoom?: (zoom: number) => void;
|
|
151
153
|
onLoad?: (src: string) => void;
|
|
@@ -188,7 +188,8 @@ class PreviewImage extends _baseComponent.default {
|
|
|
188
188
|
render() {
|
|
189
189
|
const {
|
|
190
190
|
src,
|
|
191
|
-
rotation
|
|
191
|
+
rotation,
|
|
192
|
+
crossOrigin
|
|
192
193
|
} = this.props;
|
|
193
194
|
const {
|
|
194
195
|
loading,
|
|
@@ -222,7 +223,8 @@ class PreviewImage extends _baseComponent.default {
|
|
|
222
223
|
onDragStart: e => e.preventDefault(),
|
|
223
224
|
onLoad: this.handleLoad,
|
|
224
225
|
onError: this.handleError,
|
|
225
|
-
style: imgStyle
|
|
226
|
+
style: imgStyle,
|
|
227
|
+
crossOrigin: crossOrigin
|
|
226
228
|
}), loading && /*#__PURE__*/_react.default.createElement(_spin.default, {
|
|
227
229
|
size: "large",
|
|
228
230
|
wrapperClassName: "".concat(preViewImgPrefixCls, "-spin")
|
|
@@ -59,12 +59,17 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
|
|
|
59
59
|
maskClosable: boolean;
|
|
60
60
|
viewerVisibleDelay: number;
|
|
61
61
|
};
|
|
62
|
+
private bodyOverflow;
|
|
63
|
+
private scrollBarWidth;
|
|
64
|
+
private originBodyWidth;
|
|
62
65
|
get adapter(): PreviewInnerAdapter<PreviewInnerProps, PreviewInnerStates>;
|
|
63
66
|
timer: any;
|
|
64
67
|
context: PreviewContextProps;
|
|
65
68
|
foundation: PreviewInnerFoundation;
|
|
66
69
|
constructor(props: PreviewInnerProps);
|
|
67
70
|
static getDerivedStateFromProps(props: PreviewInnerProps, state: PreviewInnerStates): Partial<PreviewInnerStates>;
|
|
71
|
+
static getScrollbarWidth(): number;
|
|
72
|
+
componentDidMount(): void;
|
|
68
73
|
componentDidUpdate(prevProps: PreviewInnerProps, prevState: PreviewInnerStates): void;
|
|
69
74
|
componentWillUnmount(): void;
|
|
70
75
|
isInGroup(): boolean;
|
|
@@ -122,11 +122,35 @@ class PreviewInner extends _baseComponent.default {
|
|
|
122
122
|
direction: ""
|
|
123
123
|
};
|
|
124
124
|
this.foundation = new _previewInnerFoundation.default(this.adapter);
|
|
125
|
+
this.bodyOverflow = '';
|
|
126
|
+
this.originBodyWidth = '100%';
|
|
127
|
+
this.scrollBarWidth = 0;
|
|
125
128
|
}
|
|
126
129
|
|
|
127
130
|
get adapter() {
|
|
128
131
|
return Object.assign(Object.assign({}, super.adapter), {
|
|
129
132
|
getIsInGroup: () => this.isInGroup(),
|
|
133
|
+
disabledBodyScroll: () => {
|
|
134
|
+
const {
|
|
135
|
+
getPopupContainer
|
|
136
|
+
} = this.props;
|
|
137
|
+
this.bodyOverflow = document.body.style.overflow || '';
|
|
138
|
+
|
|
139
|
+
if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
|
|
140
|
+
document.body.style.overflow = 'hidden';
|
|
141
|
+
document.body.style.width = "calc(".concat(this.originBodyWidth || '100%', " - ").concat(this.scrollBarWidth, "px)");
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
enabledBodyScroll: () => {
|
|
145
|
+
const {
|
|
146
|
+
getPopupContainer
|
|
147
|
+
} = this.props;
|
|
148
|
+
|
|
149
|
+
if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
|
|
150
|
+
document.body.style.overflow = this.bodyOverflow;
|
|
151
|
+
document.body.style.width = this.originBodyWidth;
|
|
152
|
+
}
|
|
153
|
+
},
|
|
130
154
|
notifyChange: (index, direction) => {
|
|
131
155
|
const {
|
|
132
156
|
onChange,
|
|
@@ -241,6 +265,23 @@ class PreviewInner extends _baseComponent.default {
|
|
|
241
265
|
return willUpdateStates;
|
|
242
266
|
}
|
|
243
267
|
|
|
268
|
+
static getScrollbarWidth() {
|
|
269
|
+
if (globalThis && Object.prototype.toString.call(globalThis) === '[object Window]') {
|
|
270
|
+
return window.innerWidth - document.documentElement.clientWidth;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
return 0;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
componentDidMount() {
|
|
277
|
+
this.scrollBarWidth = PreviewInner.getScrollbarWidth();
|
|
278
|
+
this.originBodyWidth = document.body.style.width;
|
|
279
|
+
|
|
280
|
+
if (this.props.visible) {
|
|
281
|
+
this.foundation.beforeShow();
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
|
|
244
285
|
componentDidUpdate(prevProps, prevState) {
|
|
245
286
|
if (prevState.visible !== this.props.visible && this.props.visible) {
|
|
246
287
|
mouseActiveTime = new Date().getTime();
|
|
@@ -276,6 +317,7 @@ class PreviewInner extends _baseComponent.default {
|
|
|
276
317
|
style,
|
|
277
318
|
infinite,
|
|
278
319
|
zoomStep,
|
|
320
|
+
crossOrigin,
|
|
279
321
|
prevTip,
|
|
280
322
|
nextTip,
|
|
281
323
|
zoomInTip,
|
|
@@ -344,6 +386,7 @@ class PreviewInner extends _baseComponent.default {
|
|
|
344
386
|
ratio: ratio,
|
|
345
387
|
zoomStep: zoomStep,
|
|
346
388
|
rotation: rotation,
|
|
389
|
+
crossOrigin: crossOrigin,
|
|
347
390
|
onError: this.onImageError,
|
|
348
391
|
onLoad: this.onImageLoad
|
|
349
392
|
}), showPrev &&
|
package/lib/cjs/index.d.ts
CHANGED
|
@@ -76,6 +76,7 @@ export { default as TreeSelect } from './treeSelect';
|
|
|
76
76
|
export { default as Upload } from './upload';
|
|
77
77
|
export { default as Typography } from './typography';
|
|
78
78
|
export { default as Transfer } from './transfer';
|
|
79
|
+
export { default as Highlight } from './highlight';
|
|
79
80
|
export { default as LocaleProvider } from './locale/localeProvider';
|
|
80
81
|
export { default as LocaleConsumer } from './locale/localeConsumer';
|
|
81
82
|
/** Form */
|
package/lib/cjs/index.js
CHANGED
|
@@ -189,6 +189,12 @@ Object.defineProperty(exports, "Form", {
|
|
|
189
189
|
return _form.Form;
|
|
190
190
|
}
|
|
191
191
|
});
|
|
192
|
+
Object.defineProperty(exports, "Highlight", {
|
|
193
|
+
enumerable: true,
|
|
194
|
+
get: function () {
|
|
195
|
+
return _highlight.default;
|
|
196
|
+
}
|
|
197
|
+
});
|
|
192
198
|
Object.defineProperty(exports, "Icon", {
|
|
193
199
|
enumerable: true,
|
|
194
200
|
get: function () {
|
|
@@ -712,6 +718,8 @@ var _typography = _interopRequireDefault(require("./typography"));
|
|
|
712
718
|
|
|
713
719
|
var _transfer = _interopRequireDefault(require("./transfer"));
|
|
714
720
|
|
|
721
|
+
var _highlight = _interopRequireDefault(require("./highlight"));
|
|
722
|
+
|
|
715
723
|
var _localeProvider = _interopRequireDefault(require("./locale/localeProvider"));
|
|
716
724
|
|
|
717
725
|
var _localeConsumer = _interopRequireDefault(require("./locale/localeConsumer"));
|
package/lib/cjs/modal/Modal.d.ts
CHANGED
|
@@ -94,7 +94,7 @@ declare class Modal extends BaseComponent<ModalReactProps, ModalState> {
|
|
|
94
94
|
private readonly modalRef;
|
|
95
95
|
private bodyOverflow;
|
|
96
96
|
private scrollBarWidth;
|
|
97
|
-
private
|
|
97
|
+
private originBodyWidth;
|
|
98
98
|
private _haveRendered;
|
|
99
99
|
constructor(props: ModalReactProps);
|
|
100
100
|
get adapter(): ModalAdapter;
|
package/lib/cjs/modal/Modal.js
CHANGED
|
@@ -216,7 +216,7 @@ class Modal extends _baseComponent.default {
|
|
|
216
216
|
this.modalRef = /*#__PURE__*/_react.default.createRef();
|
|
217
217
|
this.bodyOverflow = '';
|
|
218
218
|
this.scrollBarWidth = 0;
|
|
219
|
-
this.
|
|
219
|
+
this.originBodyWidth = '100%';
|
|
220
220
|
}
|
|
221
221
|
|
|
222
222
|
get adapter() {
|
|
@@ -230,7 +230,7 @@ class Modal extends _baseComponent.default {
|
|
|
230
230
|
|
|
231
231
|
if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
|
|
232
232
|
document.body.style.overflow = 'hidden';
|
|
233
|
-
document.body.style.width = "calc(".concat(this.
|
|
233
|
+
document.body.style.width = "calc(".concat(this.originBodyWidth || '100%', " - ").concat(this.scrollBarWidth, "px)");
|
|
234
234
|
}
|
|
235
235
|
},
|
|
236
236
|
enabledBodyScroll: () => {
|
|
@@ -240,7 +240,7 @@ class Modal extends _baseComponent.default {
|
|
|
240
240
|
|
|
241
241
|
if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
|
|
242
242
|
document.body.style.overflow = this.bodyOverflow;
|
|
243
|
-
document.body.style.width = this.
|
|
243
|
+
document.body.style.width = this.originBodyWidth;
|
|
244
244
|
}
|
|
245
245
|
},
|
|
246
246
|
notifyCancel: e => {
|
|
@@ -297,7 +297,7 @@ class Modal extends _baseComponent.default {
|
|
|
297
297
|
|
|
298
298
|
componentDidMount() {
|
|
299
299
|
this.scrollBarWidth = Modal.getScrollbarWidth();
|
|
300
|
-
this.
|
|
300
|
+
this.originBodyWidth = document.body.style.width;
|
|
301
301
|
|
|
302
302
|
if (this.props.visible) {
|
|
303
303
|
this.foundation.beforeShow();
|
|
@@ -69,5 +69,5 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
|
|
|
69
69
|
wrapTooltip: (node: React.ReactNode) => JSX.Element;
|
|
70
70
|
handleClick: (e: React.MouseEvent) => void;
|
|
71
71
|
handleKeyPress: (e: React.KeyboardEvent) => void;
|
|
72
|
-
render(): React.
|
|
72
|
+
render(): React.ReactNode;
|
|
73
73
|
}
|
|
@@ -269,6 +269,15 @@ class NavItem extends _baseComponent.default {
|
|
|
269
269
|
itemDom = this.wrapTooltip(itemDom);
|
|
270
270
|
}
|
|
271
271
|
|
|
272
|
+
if (typeof this.context.renderWrapper === 'function') {
|
|
273
|
+
return this.context.renderWrapper({
|
|
274
|
+
itemElement: itemDom,
|
|
275
|
+
isSubNav: isSubNav,
|
|
276
|
+
isInSubNav: isInSubNav,
|
|
277
|
+
props: this.props
|
|
278
|
+
});
|
|
279
|
+
}
|
|
280
|
+
|
|
272
281
|
return itemDom;
|
|
273
282
|
}
|
|
274
283
|
|
|
@@ -300,7 +300,8 @@ class SubNav extends _baseComponent.default {
|
|
|
300
300
|
isCollapsed,
|
|
301
301
|
subNavCloseDelay,
|
|
302
302
|
subNavOpenDelay,
|
|
303
|
-
prefixCls
|
|
303
|
+
prefixCls,
|
|
304
|
+
getPopupContainer
|
|
304
305
|
} = this.context;
|
|
305
306
|
const isOpen = this.adapter.getIsOpen();
|
|
306
307
|
const openKeysIsControlled = this.adapter.getOpenKeysIsControlled();
|
|
@@ -317,6 +318,10 @@ class SubNav extends _baseComponent.default {
|
|
|
317
318
|
dropdownProps.visible = isOpen;
|
|
318
319
|
}
|
|
319
320
|
|
|
321
|
+
if (getPopupContainer) {
|
|
322
|
+
dropdownProps.getPopupContainer = getPopupContainer;
|
|
323
|
+
}
|
|
324
|
+
|
|
320
325
|
if (isCollapsed || mode === _constants.strings.MODE_HORIZONTAL) {
|
|
321
326
|
// Do not show dropdown when disabled
|
|
322
327
|
_elem = !disabled ? /*#__PURE__*/_react.default.createElement(_dropdown.default, Object.assign({
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import BaseComponent, { BaseProps } from '../_base/baseComponent';
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { ReactElement, ReactNode } from 'react';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import { NavigationAdapter } from '@douyinfe/semi-foundation/lib/cjs/navigation/foundation';
|
|
5
5
|
import SubNav, { SubNavProps } from './SubNav';
|
|
@@ -49,6 +49,7 @@ export interface NavProps extends BaseProps {
|
|
|
49
49
|
toggleIconPosition?: string;
|
|
50
50
|
tooltipHideDelay?: number;
|
|
51
51
|
tooltipShowDelay?: number;
|
|
52
|
+
getPopupContainer?: () => HTMLElement;
|
|
52
53
|
onClick?: (data: {
|
|
53
54
|
itemKey: React.ReactText;
|
|
54
55
|
domEvent: MouseEvent;
|
|
@@ -63,6 +64,12 @@ export interface NavProps extends BaseProps {
|
|
|
63
64
|
isOpen: boolean;
|
|
64
65
|
}) => void;
|
|
65
66
|
onSelect?: (data: OnSelectedData) => void;
|
|
67
|
+
renderWrapper?: ({ itemElement, isSubNav, isInSubNav, props }: {
|
|
68
|
+
itemElement: ReactElement;
|
|
69
|
+
isInSubNav: boolean;
|
|
70
|
+
isSubNav: boolean;
|
|
71
|
+
props: NavItemProps | SubNavProps;
|
|
72
|
+
}) => ReactNode;
|
|
66
73
|
}
|
|
67
74
|
export interface NavState {
|
|
68
75
|
isCollapsed: boolean;
|
|
@@ -107,6 +114,7 @@ declare class Nav extends BaseComponent<NavProps, NavState> {
|
|
|
107
114
|
header: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
|
|
108
115
|
footer: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
|
|
109
116
|
limitIndent: PropTypes.Requireable<boolean>;
|
|
117
|
+
getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
|
|
110
118
|
};
|
|
111
119
|
static defaultProps: {
|
|
112
120
|
subNavCloseDelay: number;
|
|
@@ -234,7 +234,9 @@ class Nav extends _baseComponent.default {
|
|
|
234
234
|
footer,
|
|
235
235
|
header,
|
|
236
236
|
toggleIconPosition,
|
|
237
|
-
limitIndent
|
|
237
|
+
limitIndent,
|
|
238
|
+
renderWrapper,
|
|
239
|
+
getPopupContainer
|
|
238
240
|
} = this.props;
|
|
239
241
|
const {
|
|
240
242
|
selectedKeys,
|
|
@@ -341,7 +343,9 @@ class Nav extends _baseComponent.default {
|
|
|
341
343
|
locale,
|
|
342
344
|
prefixCls,
|
|
343
345
|
toggleIconPosition,
|
|
344
|
-
limitIndent
|
|
346
|
+
limitIndent,
|
|
347
|
+
renderWrapper,
|
|
348
|
+
getPopupContainer
|
|
345
349
|
}
|
|
346
350
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
347
351
|
className: finalCls,
|
|
@@ -402,7 +406,8 @@ Nav.propTypes = {
|
|
|
402
406
|
prefixCls: _propTypes.default.string,
|
|
403
407
|
header: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.object]),
|
|
404
408
|
footer: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.object]),
|
|
405
|
-
limitIndent: _propTypes.default.bool
|
|
409
|
+
limitIndent: _propTypes.default.bool,
|
|
410
|
+
getPopupContainer: _propTypes.default.func
|
|
406
411
|
};
|
|
407
412
|
Nav.defaultProps = {
|
|
408
413
|
subNavCloseDelay: _constants.numbers.DEFAULT_SUBNAV_CLOSE_DELAY,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { NavProps } from './index';
|
|
2
|
+
import type { NavProps } from './index';
|
|
3
3
|
import { Locale } from '../locale/interface';
|
|
4
|
+
import type { DropdownProps } from '../dropdown';
|
|
4
5
|
export interface NavContextType {
|
|
5
6
|
isCollapsed?: boolean;
|
|
6
7
|
mode?: NavProps['mode'];
|
|
@@ -18,6 +19,8 @@ export interface NavContextType {
|
|
|
18
19
|
subNavCloseDelay?: NavProps['subNavCloseDelay'];
|
|
19
20
|
subNavOpenDelay?: NavProps['subNavOpenDelay'];
|
|
20
21
|
canUpdateOpenKeys?: boolean;
|
|
22
|
+
renderWrapper?: NavProps['renderWrapper'];
|
|
23
|
+
getPopupContainer?: DropdownProps['getPopupContainer'];
|
|
21
24
|
}
|
|
22
25
|
declare const NavContext: React.Context<NavContextType>;
|
|
23
26
|
export default NavContext;
|
|
@@ -4,6 +4,7 @@ import { ContextValue } from '../configProvider/context';
|
|
|
4
4
|
import SelectFoundation, { SelectAdapter } from '@douyinfe/semi-foundation/lib/cjs/select/foundation';
|
|
5
5
|
import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
|
|
6
6
|
import { PopoverProps } from '../popover/index';
|
|
7
|
+
import Event from '@douyinfe/semi-foundation/lib/cjs/utils/Event';
|
|
7
8
|
import { InputProps } from '../input/index';
|
|
8
9
|
import Option, { OptionProps } from './option';
|
|
9
10
|
import OptionGroup from './optionGroup';
|
|
@@ -233,6 +234,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
|
|
|
233
234
|
clickOutsideHandler: (e: MouseEvent) => void;
|
|
234
235
|
foundation: SelectFoundation;
|
|
235
236
|
context: ContextValue;
|
|
237
|
+
eventManager: Event;
|
|
236
238
|
constructor(props: SelectProps);
|
|
237
239
|
setOptionContainerEl: (node: HTMLDivElement) => {
|
|
238
240
|
current: HTMLDivElement;
|
package/lib/cjs/select/index.js
CHANGED
|
@@ -41,6 +41,8 @@ var _index2 = _interopRequireDefault(require("../popover/index"));
|
|
|
41
41
|
|
|
42
42
|
var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/popover/constants");
|
|
43
43
|
|
|
44
|
+
var _Event = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/Event"));
|
|
45
|
+
|
|
44
46
|
var _reactWindow = require("react-window");
|
|
45
47
|
|
|
46
48
|
var _utils = require("./utils");
|
|
@@ -171,6 +173,7 @@ class Select extends _baseComponent.default {
|
|
|
171
173
|
this.onMouseLeave = this.onMouseLeave.bind(this);
|
|
172
174
|
this.renderOption = this.renderOption.bind(this);
|
|
173
175
|
this.onKeyPress = this.onKeyPress.bind(this);
|
|
176
|
+
this.eventManager = new _Event.default();
|
|
174
177
|
this.foundation = new _foundation.default(this.adapter);
|
|
175
178
|
(0, _warning.default)('optionLabelProp' in this.props, '[Semi Select] \'optionLabelProp\' has already been deprecated, please use \'renderSelectedItem\' instead.');
|
|
176
179
|
(0, _warning.default)('labelInValue' in this.props, '[Semi Select] \'labelInValue\' has already been deprecated, please use \'onChangeWithObject\' instead.');
|
|
@@ -267,6 +270,10 @@ class Select extends _baseComponent.default {
|
|
|
267
270
|
}
|
|
268
271
|
};
|
|
269
272
|
return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, super.adapter), keyboardAdapter), filterAdapter), multipleAdapter), {
|
|
273
|
+
on: (eventName, eventCallback) => this.eventManager.on(eventName, eventCallback),
|
|
274
|
+
off: eventName => this.eventManager.off(eventName),
|
|
275
|
+
once: (eventName, eventCallback) => this.eventManager.once(eventName, eventCallback),
|
|
276
|
+
emit: eventName => this.eventManager.emit(eventName),
|
|
270
277
|
// Collect all subitems, each item is visible by default when collected, and is not selected
|
|
271
278
|
getOptionsFromChildren: function () {
|
|
272
279
|
let children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.children;
|
|
@@ -1120,7 +1127,8 @@ class Select extends _baseComponent.default {
|
|
|
1120
1127
|
spacing: spacing,
|
|
1121
1128
|
stopPropagation: stopPropagation,
|
|
1122
1129
|
disableArrowKeyDown: true,
|
|
1123
|
-
onVisibleChange: status => this.handlePopoverVisibleChange(status)
|
|
1130
|
+
onVisibleChange: status => this.handlePopoverVisibleChange(status),
|
|
1131
|
+
afterClose: () => this.foundation.handlePopoverClose()
|
|
1124
1132
|
}, selection);
|
|
1125
1133
|
}
|
|
1126
1134
|
|
|
@@ -370,7 +370,6 @@ class TimePicker extends _baseComponent.default {
|
|
|
370
370
|
outerProps.onClick = this.openPanel;
|
|
371
371
|
}
|
|
372
372
|
|
|
373
|
-
console.log("===>", disabled ? false : open, motion);
|
|
374
373
|
return /*#__PURE__*/_react.default.createElement("div", Object.assign({
|
|
375
374
|
ref: this.setTimePickerRef,
|
|
376
375
|
className: (0, _classnames.default)({
|