@cloudbase/weda-ui 3.27.2 → 3.28.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/configs/components/form-checkbox.d.ts +2 -2
- package/dist/configs/components/form-date.d.ts +2 -2
- package/dist/configs/components/form-depart-tree-select.d.ts +2 -2
- package/dist/configs/components/form-email.d.ts +2 -2
- package/dist/configs/components/form-image-uploader.d.ts +2 -2
- package/dist/configs/components/form-input.d.ts +2 -2
- package/dist/configs/components/form-location.d.ts +2 -2
- package/dist/configs/components/form-multi-region.d.ts +2 -2
- package/dist/configs/components/form-phone.d.ts +2 -2
- package/dist/configs/components/form-radio.d.ts +2 -2
- package/dist/configs/components/form-region.d.ts +2 -2
- package/dist/configs/components/form-rich-text.d.ts +2 -2
- package/dist/configs/components/form-select-multiple.d.ts +2 -2
- package/dist/configs/components/form-select.d.ts +2 -2
- package/dist/configs/components/form-switch.d.ts +2 -2
- package/dist/configs/components/form-text-area.d.ts +2 -2
- package/dist/configs/components/form-time.d.ts +2 -2
- package/dist/configs/components/form-upload-file.d.ts +2 -2
- package/dist/configs/components/form-url.d.ts +2 -2
- package/dist/configs/components/form-user-tree-select.d.ts +2 -2
- package/dist/configs/components/image.d.ts +2 -2
- package/dist/configs/components/scrollView.d.ts +145 -0
- package/dist/configs/components/scrollView.js +356 -0
- package/dist/configs/components/wd-bubble.d.ts +3 -3
- package/dist/configs/components/wd-form.d.ts +4 -4
- package/dist/configs/components/wd-location.d.ts +2 -0
- package/dist/configs/components/wd-location.js +1 -1
- package/dist/configs/components/wd-menu-layout.d.ts +6 -6
- package/dist/configs/components/wd-menu-list.d.ts +2 -2
- package/dist/configs/index.d.ts +266 -536
- package/dist/configs/index.js +1 -1
- package/dist/configs/type-utils/type-form.d.ts +2 -0
- package/dist/configs/type-utils/type-form.js +15 -0
- package/dist/style/weda-ui.min.css +2 -2
- package/dist/web/components/form/location/components/LocationH5/location.h5.js +13 -1
- package/dist/web/components/form/location/components/LocationPC/location.PC.js +12 -0
- package/dist/web/components/form-date/index.d.ts +1 -1
- package/dist/web/components/form-depart-tree-select/index.d.ts +1 -1
- package/dist/web/components/form-email/index.d.ts +1 -1
- package/dist/web/components/form-image-uploader/index.d.ts +1 -1
- package/dist/web/components/form-input/index.d.ts +1 -1
- package/dist/web/components/form-input-hooks/index.d.ts +1 -1
- package/dist/web/components/form-location/index.d.ts +1 -1
- package/dist/web/components/form-multi-region/index.d.ts +1 -1
- package/dist/web/components/form-phone/index.d.ts +1 -1
- package/dist/web/components/form-radio/index.d.ts +1 -1
- package/dist/web/components/form-region/index.d.ts +1 -1
- package/dist/web/components/form-rich-text/index.d.ts +1 -1
- package/dist/web/components/form-select/index.d.ts +1 -1
- package/dist/web/components/form-select-multiple/index.d.ts +1 -1
- package/dist/web/components/form-switch/index.d.ts +1 -1
- package/dist/web/components/form-text-area/index.d.ts +1 -1
- package/dist/web/components/form-time/index.d.ts +1 -1
- package/dist/web/components/form-upload-file/index.d.ts +1 -1
- package/dist/web/components/form-url/index.d.ts +1 -1
- package/dist/web/components/form-user-tree-select/index.d.ts +1 -1
- package/dist/web/components/grid/col.d.ts +2 -2
- package/dist/web/components/scrollView/index.d.ts +5 -23
- package/dist/web/components/scrollView/index.js +141 -50
- package/dist/web/components/wd-input-number/wd-input-number.js +1 -25
- package/dist/web/components/wd-member/wd-member.css +3 -7
- package/package.json +6 -6
- package/dist/configs/components/scrollVeiw.json +0 -312
|
@@ -72,6 +72,15 @@ export default function LocationH5(props) {
|
|
|
72
72
|
}
|
|
73
73
|
}, [locationType]);
|
|
74
74
|
useEffect(() => {
|
|
75
|
+
if (!value) {
|
|
76
|
+
setLocation({
|
|
77
|
+
poiname: '',
|
|
78
|
+
detailedAddress: '',
|
|
79
|
+
latlng: { lat: 39.98410411, lng: 116.307503 },
|
|
80
|
+
});
|
|
81
|
+
setUserSelectStatus('');
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
75
84
|
if (checkCustomLocation(value)) {
|
|
76
85
|
// 表单为新增时回传点位信息
|
|
77
86
|
const { address, detailedAddress, geopoint } = value;
|
|
@@ -262,6 +271,9 @@ export default function LocationH5(props) {
|
|
|
262
271
|
};
|
|
263
272
|
const getIsShowMap = () => {
|
|
264
273
|
let status = showMap;
|
|
274
|
+
if (!value) {
|
|
275
|
+
return false;
|
|
276
|
+
}
|
|
265
277
|
if (locationType === 1 && location.locationType === 1) {
|
|
266
278
|
status = false;
|
|
267
279
|
}
|
|
@@ -302,7 +314,7 @@ export default function LocationH5(props) {
|
|
|
302
314
|
'form-location-addr-vertical': layout === 'vertical',
|
|
303
315
|
[`${classPrefix}-form-read-color`]: readOnly,
|
|
304
316
|
'form-location-addr--disabled': disabled,
|
|
305
|
-
}), children: [_jsx("div", { className: "form-location-con__icon" }), _jsxs("div", { className: "form-location-con__text", children: [location.poiname && (_jsx(WdText, { text: location.poiname, className: "form-location-addr-title wd-location__info" })), showLngLat && (_jsx("div", { className: "form-location-addr-lat", children: location.latlng ? `${location.latlng.lat}N,${location.latlng.lng}E` : '' }))] })] }))] })] }), getIsShowMap() && (_jsx("div", { className: "form-map-container", style: { height: '200px' }, children: _jsx(MapView, { APIKEY: APIKEY, drag: drag, zoom: zoom, latlng: location.latlng }) })), _jsx(SelectModal, { isSelectMapVisible: isSelectMapVisible, setIsSelectMapVisible: setIsSelectMapVisible, location: location, currentLocations: currentLocations.current, setLocation: setLocation, chooseLocation: onChangeLocation, APIKEY: APIKEY, locationRange: locationRange, customRange: customRange })] }));
|
|
317
|
+
}), children: [_jsx("div", { className: "form-location-con__icon" }), _jsxs("div", { className: "form-location-con__text", children: [location.poiname && (_jsx(WdText, { text: location.poiname, maxLines: 2, overflow: true, className: "form-location-addr-title wd-location__info" })), showLngLat && (_jsx("div", { className: "form-location-addr-lat", children: location.latlng ? `${location.latlng.lat}N,${location.latlng.lng}E` : '' }))] })] }))] })] }), getIsShowMap() && (_jsx("div", { className: "form-map-container", style: { height: '200px' }, children: _jsx(MapView, { APIKEY: APIKEY, drag: drag, zoom: zoom, latlng: location.latlng }) })), _jsx(SelectModal, { isSelectMapVisible: isSelectMapVisible, setIsSelectMapVisible: setIsSelectMapVisible, location: location, currentLocations: currentLocations.current, setLocation: setLocation, chooseLocation: onChangeLocation, APIKEY: APIKEY, locationRange: locationRange, customRange: customRange })] }));
|
|
306
318
|
return renderDecorator(LocationEl, decorator)({
|
|
307
319
|
id,
|
|
308
320
|
className: cls,
|
|
@@ -77,6 +77,15 @@ export default function LocationPC(props) {
|
|
|
77
77
|
}
|
|
78
78
|
}, [locationType]);
|
|
79
79
|
useEffect(() => {
|
|
80
|
+
if (!value) {
|
|
81
|
+
setLocation({
|
|
82
|
+
poiname: '',
|
|
83
|
+
detailedAddress: '',
|
|
84
|
+
latlng: { lat: 39.98410411, lng: 116.307503 },
|
|
85
|
+
});
|
|
86
|
+
setUserSelectStatus('');
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
80
89
|
if (checkCustomLocation(value)) {
|
|
81
90
|
// 表单为新增时回传点位信息
|
|
82
91
|
const { address, detailedAddress, geopoint } = value;
|
|
@@ -180,6 +189,9 @@ export default function LocationPC(props) {
|
|
|
180
189
|
}, [dataSource]);
|
|
181
190
|
const getIsShowMap = () => {
|
|
182
191
|
let status = showMap;
|
|
192
|
+
if (!value) {
|
|
193
|
+
return false;
|
|
194
|
+
}
|
|
183
195
|
if (locationType === 1 && location.locationType === 1) {
|
|
184
196
|
status = false;
|
|
185
197
|
}
|
|
@@ -16,7 +16,7 @@ declare const FormDate: React.ForwardRefExoticComponent<CommonPropsType & {
|
|
|
16
16
|
placeholder: string;
|
|
17
17
|
end: string;
|
|
18
18
|
start: string;
|
|
19
|
-
layout: "" | "
|
|
19
|
+
layout: "" | "horizontal" | "vertical";
|
|
20
20
|
mode: "datetime" | "year" | "month" | "day";
|
|
21
21
|
clearable: boolean;
|
|
22
22
|
labelVisible: boolean;
|
|
@@ -14,7 +14,7 @@ declare const FormDepartTreeSelect: React.ForwardRefExoticComponent<CommonPropsT
|
|
|
14
14
|
size: "s" | "m" | "l" | "full";
|
|
15
15
|
disabled: boolean;
|
|
16
16
|
placeholder: string;
|
|
17
|
-
layout: "" | "
|
|
17
|
+
layout: "" | "horizontal" | "vertical";
|
|
18
18
|
multiple: boolean;
|
|
19
19
|
labelVisible: boolean;
|
|
20
20
|
departmentScope: string[];
|
|
@@ -16,7 +16,7 @@ declare const FormEmail: React.ForwardRefExoticComponent<CommonPropsType & {
|
|
|
16
16
|
disabled: boolean;
|
|
17
17
|
maxLength: number;
|
|
18
18
|
placeholder: string;
|
|
19
|
-
layout: "" | "
|
|
19
|
+
layout: "" | "horizontal" | "vertical";
|
|
20
20
|
clearable: boolean;
|
|
21
21
|
labelVisible: boolean;
|
|
22
22
|
requiredFlag: boolean;
|
|
@@ -12,7 +12,7 @@ declare const FormImageUploader: React.ForwardRefExoticComponent<CommonPropsType
|
|
|
12
12
|
value: string[];
|
|
13
13
|
required: boolean;
|
|
14
14
|
disabled: boolean;
|
|
15
|
-
layout: "" | "
|
|
15
|
+
layout: "" | "horizontal" | "vertical";
|
|
16
16
|
single: boolean;
|
|
17
17
|
maxUploadCount: number;
|
|
18
18
|
labelVisible: boolean;
|
|
@@ -17,7 +17,7 @@ declare const WdInput: React.ForwardRefExoticComponent<CommonPropsType & {
|
|
|
17
17
|
disabled: boolean;
|
|
18
18
|
maxLength: number;
|
|
19
19
|
placeholder: string;
|
|
20
|
-
layout: "" | "
|
|
20
|
+
layout: "" | "horizontal" | "vertical";
|
|
21
21
|
clearable: boolean;
|
|
22
22
|
labelVisible: boolean;
|
|
23
23
|
isNickNameType: boolean;
|
|
@@ -43,7 +43,7 @@ export declare function useFormInputTrait<Value = unknown>(inputParams: FormInpu
|
|
|
43
43
|
/**
|
|
44
44
|
* @deprecated 在Wd组件中应该直接用输入的那个,通过css联动而不是js
|
|
45
45
|
*/
|
|
46
|
-
layout: "
|
|
46
|
+
layout: "horizontal" | "vertical";
|
|
47
47
|
initValidate: (validateState: any, validateErrorMsg: any) => void;
|
|
48
48
|
};
|
|
49
49
|
export {};
|
|
@@ -19,7 +19,7 @@ declare const FormLocation: React.ForwardRefExoticComponent<CommonPropsType & {
|
|
|
19
19
|
};
|
|
20
20
|
required: boolean;
|
|
21
21
|
disabled: boolean;
|
|
22
|
-
layout: "" | "
|
|
22
|
+
layout: "" | "horizontal" | "vertical";
|
|
23
23
|
zoom: boolean;
|
|
24
24
|
locationType: 2 | 1;
|
|
25
25
|
labelVisible: boolean;
|
|
@@ -14,7 +14,7 @@ declare const FormMultiRegion: React.ForwardRefExoticComponent<CommonPropsType &
|
|
|
14
14
|
size: "s" | "m" | "l" | "full";
|
|
15
15
|
disabled: boolean;
|
|
16
16
|
placeholder: string;
|
|
17
|
-
layout: "" | "
|
|
17
|
+
layout: "" | "horizontal" | "vertical";
|
|
18
18
|
regionType: "levelThree" | "levelTwo" | "levelOne";
|
|
19
19
|
labelVisible: boolean;
|
|
20
20
|
requiredFlag: boolean;
|
|
@@ -15,7 +15,7 @@ declare const FormPhone: React.ForwardRefExoticComponent<CommonPropsType & {
|
|
|
15
15
|
size: "s" | "m" | "l" | "full";
|
|
16
16
|
disabled: boolean;
|
|
17
17
|
placeholder: string;
|
|
18
|
-
layout: "" | "
|
|
18
|
+
layout: "" | "horizontal" | "vertical";
|
|
19
19
|
clearable: boolean;
|
|
20
20
|
labelVisible: boolean;
|
|
21
21
|
requiredFlag: boolean;
|
|
@@ -17,7 +17,7 @@ declare const FormRadio: React.ForwardRefExoticComponent<CommonPropsType & {
|
|
|
17
17
|
value: string;
|
|
18
18
|
required: boolean;
|
|
19
19
|
disabled: boolean;
|
|
20
|
-
layout: "" | "
|
|
20
|
+
layout: "" | "horizontal" | "vertical";
|
|
21
21
|
range: {
|
|
22
22
|
label: string;
|
|
23
23
|
value: string;
|
|
@@ -15,7 +15,7 @@ declare const FormRegion: React.ForwardRefExoticComponent<CommonPropsType & {
|
|
|
15
15
|
disabled: boolean;
|
|
16
16
|
placeholder: string;
|
|
17
17
|
separator: string;
|
|
18
|
-
layout: "" | "
|
|
18
|
+
layout: "" | "horizontal" | "vertical";
|
|
19
19
|
labelVisible: boolean;
|
|
20
20
|
requiredFlag: boolean;
|
|
21
21
|
requiredMsg: string;
|
|
@@ -12,7 +12,7 @@ declare const FormRichText: React.ForwardRefExoticComponent<CommonPropsType & {
|
|
|
12
12
|
value: string;
|
|
13
13
|
required: boolean;
|
|
14
14
|
disabled: boolean;
|
|
15
|
-
layout: "" | "
|
|
15
|
+
layout: "" | "horizontal" | "vertical";
|
|
16
16
|
readOnly: boolean;
|
|
17
17
|
acceptTypes: ("image/*" | "image/jpeg" | "image/png" | "image/bmp" | "image/tif" | "image/tiff")[];
|
|
18
18
|
maxSize: number;
|
|
@@ -15,7 +15,7 @@ declare const FormSelect: React.ForwardRefExoticComponent<CommonPropsType & {
|
|
|
15
15
|
size: "s" | "m" | "l" | "full";
|
|
16
16
|
disabled: boolean;
|
|
17
17
|
placeholder: string;
|
|
18
|
-
layout: "" | "
|
|
18
|
+
layout: "" | "horizontal" | "vertical";
|
|
19
19
|
range: {
|
|
20
20
|
label: string;
|
|
21
21
|
value: string;
|
|
@@ -15,7 +15,7 @@ declare const FormSelectMultiple: React.ForwardRefExoticComponent<CommonPropsTyp
|
|
|
15
15
|
size: "s" | "m" | "l" | "full";
|
|
16
16
|
disabled: boolean;
|
|
17
17
|
placeholder: string;
|
|
18
|
-
layout: "" | "
|
|
18
|
+
layout: "" | "horizontal" | "vertical";
|
|
19
19
|
range: {
|
|
20
20
|
label: string;
|
|
21
21
|
value: string;
|
|
@@ -12,7 +12,7 @@ declare const FormSwitch: React.ForwardRefExoticComponent<CommonPropsType & {
|
|
|
12
12
|
value: boolean;
|
|
13
13
|
required: boolean;
|
|
14
14
|
disabled: boolean;
|
|
15
|
-
layout: "" | "
|
|
15
|
+
layout: "" | "horizontal" | "vertical";
|
|
16
16
|
labelVisible: boolean;
|
|
17
17
|
requiredFlag: boolean;
|
|
18
18
|
requiredMsg: string;
|
|
@@ -16,7 +16,7 @@ declare const FormTextArea: React.ForwardRefExoticComponent<CommonPropsType & {
|
|
|
16
16
|
disabled: boolean;
|
|
17
17
|
maxLength: number;
|
|
18
18
|
placeholder: string;
|
|
19
|
-
layout: "" | "
|
|
19
|
+
layout: "" | "horizontal" | "vertical";
|
|
20
20
|
labelVisible: boolean;
|
|
21
21
|
counterVisible: boolean;
|
|
22
22
|
requiredFlag: boolean;
|
|
@@ -16,7 +16,7 @@ declare const FormTime: React.ForwardRefExoticComponent<CommonPropsType & {
|
|
|
16
16
|
placeholder: string;
|
|
17
17
|
end: string;
|
|
18
18
|
start: string;
|
|
19
|
-
layout: "" | "
|
|
19
|
+
layout: "" | "horizontal" | "vertical";
|
|
20
20
|
clearable: boolean;
|
|
21
21
|
labelVisible: boolean;
|
|
22
22
|
requiredFlag: boolean;
|
|
@@ -12,7 +12,7 @@ declare const FormUploadFile: React.ForwardRefExoticComponent<CommonPropsType &
|
|
|
12
12
|
value: string[];
|
|
13
13
|
required: boolean;
|
|
14
14
|
disabled: boolean;
|
|
15
|
-
layout: "" | "
|
|
15
|
+
layout: "" | "horizontal" | "vertical";
|
|
16
16
|
single: boolean;
|
|
17
17
|
maxUploadCount: number;
|
|
18
18
|
labelVisible: boolean;
|
|
@@ -16,7 +16,7 @@ declare const FormUrl: React.ForwardRefExoticComponent<CommonPropsType & {
|
|
|
16
16
|
disabled: boolean;
|
|
17
17
|
maxLength: number;
|
|
18
18
|
placeholder: string;
|
|
19
|
-
layout: "" | "
|
|
19
|
+
layout: "" | "horizontal" | "vertical";
|
|
20
20
|
clearable: boolean;
|
|
21
21
|
labelVisible: boolean;
|
|
22
22
|
requiredFlag: boolean;
|
|
@@ -14,7 +14,7 @@ declare const FormUserTreeSelect: React.ForwardRefExoticComponent<CommonPropsTyp
|
|
|
14
14
|
size: "s" | "m" | "l" | "full";
|
|
15
15
|
disabled: boolean;
|
|
16
16
|
placeholder: string;
|
|
17
|
-
layout: "" | "
|
|
17
|
+
layout: "" | "horizontal" | "vertical";
|
|
18
18
|
multiple: boolean;
|
|
19
19
|
where: any[];
|
|
20
20
|
labelVisible: boolean;
|
|
@@ -3,11 +3,11 @@ import type { CommonPropsType } from '../../types';
|
|
|
3
3
|
import './style';
|
|
4
4
|
declare const _default: React.ForwardRefExoticComponent<CommonPropsType & {
|
|
5
5
|
alignSelf?: string;
|
|
6
|
-
widthType: ("fit-content" | "auto-fill" | (1 | "1") | (2 | "2") | (3 | "3") | (4 | "4") | (5 | "5") | (6 | "6") | (7 | "7") | (8 | "8") | (
|
|
6
|
+
widthType: ("fit-content" | "auto-fill" | (1 | "1") | (2 | "2") | (3 | "3") | (4 | "4") | (5 | "5") | (6 | "6") | (7 | "7") | (8 | "8") | (9 | "9") | (10 | "10") | (11 | "11") | (12 | "12")) | {
|
|
7
7
|
type: string;
|
|
8
8
|
value: string;
|
|
9
9
|
};
|
|
10
|
-
lgWidthType: ("fit-content" | "auto-fill" | (1 | "1") | (2 | "2") | (3 | "3") | (4 | "4") | (5 | "5") | (6 | "6") | (7 | "7") | (8 | "8") | (
|
|
10
|
+
lgWidthType: ("fit-content" | "auto-fill" | (1 | "1") | (2 | "2") | (3 | "3") | (4 | "4") | (5 | "5") | (6 | "6") | (7 | "7") | (8 | "8") | (9 | "9") | (10 | "10") | (11 | "11") | (12 | "12")) | {
|
|
11
11
|
type: string;
|
|
12
12
|
value: string;
|
|
13
13
|
};
|
|
@@ -1,26 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import type { CommonPropsType } from '../../types';
|
|
3
|
+
import type { DataType } from '../../../configs/components/scrollView';
|
|
3
4
|
import './style';
|
|
4
|
-
export interface PropsType extends CommonPropsType {
|
|
5
|
-
scrollX?: boolean;
|
|
6
|
-
scrollY?: boolean;
|
|
7
|
-
scrollTop?: number;
|
|
8
|
-
scrollLeft?: number;
|
|
9
|
-
scrollIntoView?: string;
|
|
10
|
-
upperThreshold?: number;
|
|
11
|
-
lowerThreshold?: number;
|
|
5
|
+
export interface PropsType extends CommonPropsType, DataType {
|
|
12
6
|
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
scrollX?: boolean;
|
|
16
|
-
scrollY?: boolean;
|
|
17
|
-
style: any;
|
|
18
|
-
scrollTop: any;
|
|
19
|
-
scrollLeft: any;
|
|
20
|
-
scrollIntoView: any;
|
|
21
|
-
className: any;
|
|
22
|
-
children: any;
|
|
23
|
-
upperThreshold?: number;
|
|
24
|
-
lowerThreshold?: number;
|
|
25
|
-
events: any;
|
|
26
|
-
}): JSX.Element;
|
|
7
|
+
declare const _default: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
export default _default;
|
|
@@ -1,38 +1,71 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import { useState, forwardRef, useEffect, useRef, useCallback } from 'react';
|
|
3
|
+
import { useDebouncedCallback } from '@react-hookz/web';
|
|
3
4
|
import classNames from '../../utils/classnames';
|
|
5
|
+
import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
|
|
4
6
|
import './style';
|
|
5
|
-
export default function ScrollView({ id, scrollX = false, scrollY = true, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold = 50, lowerThreshold = 50, events, }) {
|
|
6
|
-
const [
|
|
7
|
-
const [
|
|
8
|
-
const [
|
|
9
|
-
const [
|
|
10
|
-
const
|
|
11
|
-
const
|
|
7
|
+
export default forwardRef(function ScrollView({ id, scrollX = false, scrollY = true, style, scrollTop, scrollLeft, scrollIntoView, className, children, upperThreshold = 50, lowerThreshold = 50, events, observerSelector = [], rootMargin, }, ref) {
|
|
8
|
+
const [ready, setReady] = useState(false);
|
|
9
|
+
const [toUpper, setToUpper] = useState(false);
|
|
10
|
+
const [toLower, setToLower] = useState(false);
|
|
11
|
+
const [scrollLeftPos, setScrollLeftPos] = useState(0);
|
|
12
|
+
const [scrollTopPos, setScrollTopPos] = useState(0);
|
|
13
|
+
const scrollViewRef = useRef(null);
|
|
14
|
+
const handleScrollToTarget = useDebouncedCallback((element, option) => {
|
|
15
|
+
const { onEnter = () => { } } = option;
|
|
16
|
+
const _rootMargin = ['top', 'right', 'bottom', 'left'].map((dir) => parseInt((rootMargin === null || rootMargin === void 0 ? void 0 : rootMargin[dir]) || 0)).join('px ') + 'px';
|
|
17
|
+
// eslint-disable-next-line compat/compat
|
|
18
|
+
const observer = new IntersectionObserver((entries) => {
|
|
19
|
+
entries.forEach((entry) => {
|
|
20
|
+
if (entry.isIntersecting) {
|
|
21
|
+
// 当元素进入视口时执行
|
|
22
|
+
// 执行你的动作
|
|
23
|
+
onEnter(entry);
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
}, {
|
|
27
|
+
threshold: 0.5,
|
|
28
|
+
rootMargin: _rootMargin,
|
|
29
|
+
});
|
|
30
|
+
[].concat(element).forEach((el) => {
|
|
31
|
+
var _a;
|
|
32
|
+
let selector = el === null || el === void 0 ? void 0 : el.replace(/^#/, '').replace(/^\./, '');
|
|
33
|
+
if (selector && scrollViewRef.current) {
|
|
34
|
+
if (el.startsWith('#')) {
|
|
35
|
+
selector = document.getElementById(selector);
|
|
36
|
+
}
|
|
37
|
+
else {
|
|
38
|
+
selector = (_a = scrollViewRef.current.getElementsByClassName(selector)) === null || _a === void 0 ? void 0 : _a[0];
|
|
39
|
+
}
|
|
40
|
+
selector && observer.observe(selector);
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
}, [scrollViewRef, rootMargin], 500);
|
|
44
|
+
const handleOnScroll = useCallback((e) => {
|
|
45
|
+
var _a;
|
|
46
|
+
const target = e.target;
|
|
12
47
|
const detail = {
|
|
13
|
-
scrollLeft:
|
|
14
|
-
scrollTop:
|
|
15
|
-
scrollHeight:
|
|
16
|
-
scrollWidth:
|
|
17
|
-
clientHeight:
|
|
18
|
-
clientWidth:
|
|
48
|
+
scrollLeft: target.scrollLeft,
|
|
49
|
+
scrollTop: target.scrollTop,
|
|
50
|
+
scrollHeight: target.scrollHeight,
|
|
51
|
+
scrollWidth: target.scrollWidth,
|
|
52
|
+
clientHeight: target.clientHeight,
|
|
53
|
+
clientWidth: target.clientWidth,
|
|
19
54
|
};
|
|
20
|
-
const deltaY = scrollY ?
|
|
21
|
-
const deltaX = scrollX ?
|
|
55
|
+
const deltaY = scrollY ? target.scrollTop - scrollTopPos : 0;
|
|
56
|
+
const deltaX = scrollX ? target.scrollLeft - scrollLeftPos : 0;
|
|
22
57
|
let delta;
|
|
23
58
|
// 横向滚动
|
|
24
59
|
if (Math.abs(deltaX) > Math.abs(deltaY)) {
|
|
25
60
|
delta = deltaX;
|
|
26
|
-
setScrollLeftPos(
|
|
27
|
-
if (scrollX &&
|
|
61
|
+
setScrollLeftPos(target.scrollLeft);
|
|
62
|
+
if (scrollX && target.scrollLeft <= upperThreshold) {
|
|
28
63
|
delta < 0 && setToUpper(true);
|
|
29
64
|
}
|
|
30
65
|
else {
|
|
31
66
|
setToUpper(false);
|
|
32
67
|
}
|
|
33
|
-
if (scrollX &&
|
|
34
|
-
e.target.scrollLeft + e.target.offsetWidth + lowerThreshold >=
|
|
35
|
-
e.target.scrollWidth) {
|
|
68
|
+
if (scrollX && target.scrollLeft + target.offsetWidth + lowerThreshold >= target.scrollWidth) {
|
|
36
69
|
delta > 0 && setToLower(true);
|
|
37
70
|
}
|
|
38
71
|
else {
|
|
@@ -41,52 +74,104 @@ export default function ScrollView({ id, scrollX = false, scrollY = true, style,
|
|
|
41
74
|
}
|
|
42
75
|
else {
|
|
43
76
|
delta = deltaY;
|
|
44
|
-
setScrollTopPos(
|
|
45
|
-
if (scrollY &&
|
|
77
|
+
setScrollTopPos(target.scrollTop);
|
|
78
|
+
if (scrollY && target.scrollTop <= upperThreshold) {
|
|
46
79
|
delta < 0 && setToUpper(true);
|
|
47
80
|
}
|
|
48
81
|
else {
|
|
49
82
|
setToUpper(false);
|
|
50
83
|
}
|
|
51
|
-
if (scrollY &&
|
|
52
|
-
e.target.scrollTop + e.target.offsetHeight + lowerThreshold >=
|
|
53
|
-
e.target.scrollHeight) {
|
|
84
|
+
if (scrollY && target.scrollTop + target.offsetHeight + lowerThreshold >= target.scrollHeight) {
|
|
54
85
|
delta > 0 && setToLower(true);
|
|
55
86
|
}
|
|
56
87
|
else {
|
|
57
88
|
setToLower(false);
|
|
58
89
|
}
|
|
59
90
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
91
|
+
if (observerSelector.length) {
|
|
92
|
+
handleScrollToTarget(observerSelector, {
|
|
93
|
+
onEnter: (element) => {
|
|
94
|
+
if (typeof (events === null || events === void 0 ? void 0 : events.scrollToTarget) === 'function') {
|
|
95
|
+
element.id = element.target.id;
|
|
96
|
+
events.scrollToTarget(element);
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
(_a = events === null || events === void 0 ? void 0 : events.scroll) === null || _a === void 0 ? void 0 : _a.call(events, detail, { originEvent: e });
|
|
102
|
+
}, [
|
|
103
|
+
scrollY,
|
|
104
|
+
scrollTopPos,
|
|
105
|
+
scrollX,
|
|
106
|
+
scrollLeftPos,
|
|
107
|
+
observerSelector,
|
|
108
|
+
events,
|
|
109
|
+
upperThreshold,
|
|
110
|
+
lowerThreshold,
|
|
111
|
+
handleScrollToTarget,
|
|
112
|
+
]);
|
|
113
|
+
const handleScrollToView = useCallback((_scrollIntoView = scrollIntoView) => {
|
|
114
|
+
var _a;
|
|
115
|
+
let selector = _scrollIntoView !== null && _scrollIntoView !== void 0 ? _scrollIntoView : scrollIntoView;
|
|
116
|
+
selector = _scrollIntoView === null || _scrollIntoView === void 0 ? void 0 : _scrollIntoView.replace(/^#/, '').replace(/^\./, '');
|
|
117
|
+
if (selector && scrollViewRef.current) {
|
|
118
|
+
if (_scrollIntoView.startsWith('#') || selector === scrollIntoView) {
|
|
119
|
+
selector = document.getElementById(selector);
|
|
120
|
+
}
|
|
121
|
+
else {
|
|
122
|
+
selector = (_a = scrollViewRef.current.getElementsByClassName(selector)) === null || _a === void 0 ? void 0 : _a[0];
|
|
123
|
+
}
|
|
124
|
+
if (selector) {
|
|
125
|
+
scrollY &&
|
|
126
|
+
scrollViewRef.current.scrollTo({
|
|
127
|
+
top: selector.offsetTop || 0,
|
|
128
|
+
behavior: 'smooth',
|
|
129
|
+
});
|
|
130
|
+
scrollX &&
|
|
131
|
+
scrollViewRef.current.scrollTo({
|
|
132
|
+
left: selector.offsetLeft || 0,
|
|
133
|
+
behavior: 'smooth',
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}, [scrollIntoView, scrollX, scrollY]);
|
|
138
|
+
useEffect(() => {
|
|
139
|
+
if (scrollViewRef.current && scrollTop !== undefined) {
|
|
140
|
+
scrollViewRef.current.scrollTop = scrollTop;
|
|
141
|
+
}
|
|
64
142
|
}, [scrollTop]);
|
|
65
|
-
|
|
66
|
-
scrollViewRef.current
|
|
143
|
+
useEffect(() => {
|
|
144
|
+
if (scrollViewRef.current && scrollLeft !== undefined) {
|
|
145
|
+
scrollViewRef.current.scrollLeft = scrollLeft;
|
|
146
|
+
}
|
|
67
147
|
}, [scrollLeft]);
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
148
|
+
useEffect(() => {
|
|
149
|
+
var _a;
|
|
150
|
+
toUpper && ((_a = events === null || events === void 0 ? void 0 : events.scrolltoupper) === null || _a === void 0 ? void 0 : _a.call(events));
|
|
151
|
+
}, [toUpper, events]);
|
|
152
|
+
useEffect(() => {
|
|
153
|
+
var _a;
|
|
154
|
+
toLower && ((_a = events === null || events === void 0 ? void 0 : events.scrolltolower) === null || _a === void 0 ? void 0 : _a.call(events));
|
|
155
|
+
}, [toLower, events]);
|
|
156
|
+
useEffect(() => {
|
|
157
|
+
if (ready) {
|
|
158
|
+
handleScrollToView();
|
|
159
|
+
}
|
|
160
|
+
}, [handleScrollToView, ready]);
|
|
161
|
+
useEffect(() => {
|
|
162
|
+
if ((scrollViewRef.current, !ready)) {
|
|
163
|
+
setReady(true);
|
|
164
|
+
if ((events === null || events === void 0 ? void 0 : events.onReady) && typeof (events === null || events === void 0 ? void 0 : events.onReady) === 'function') {
|
|
165
|
+
events.onReady({ scrollViewContext: scrollViewRef.current });
|
|
166
|
+
}
|
|
81
167
|
}
|
|
82
|
-
}, [
|
|
168
|
+
}, [events, ready]);
|
|
83
169
|
const webStyles = {
|
|
84
170
|
position: 'relative',
|
|
85
171
|
width: '100%',
|
|
86
172
|
height: '100%',
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
overflowY: `${scrollY ? 'auto' : 'hidden'}`,
|
|
173
|
+
overflowX: scrollX ? 'auto' : 'hidden',
|
|
174
|
+
overflowY: scrollY ? 'auto' : 'hidden',
|
|
90
175
|
...style,
|
|
91
176
|
};
|
|
92
177
|
const cls = classNames({
|
|
@@ -94,5 +179,11 @@ export default function ScrollView({ id, scrollX = false, scrollY = true, style,
|
|
|
94
179
|
'g-scroll-view': true,
|
|
95
180
|
[className]: className,
|
|
96
181
|
});
|
|
182
|
+
useSetWidgetApi(() => ({
|
|
183
|
+
scrollViewContext: scrollViewRef.current,
|
|
184
|
+
scrollIntoElement: ({ selector }) => {
|
|
185
|
+
handleScrollToView(selector);
|
|
186
|
+
},
|
|
187
|
+
}), [], ref);
|
|
97
188
|
return (_jsx("div", { id: id, style: webStyles, ref: scrollViewRef, className: cls, onScrollCapture: handleOnScroll, children: children }));
|
|
98
|
-
}
|
|
189
|
+
});
|
|
@@ -148,8 +148,6 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
|
|
|
148
148
|
return '';
|
|
149
149
|
if (value === 'null' || value === 'undefined')
|
|
150
150
|
return '';
|
|
151
|
-
let validState = undefined;
|
|
152
|
-
let validMsg = '';
|
|
153
151
|
let res = `${value}`;
|
|
154
152
|
if (isNumber(value) && res.includes('e')) {
|
|
155
153
|
res = `${res.startsWith('-') ? '-' : ''}${res.replace(/^-/, '').toLocaleString()}`;
|
|
@@ -163,36 +161,14 @@ export const WdInputNumber = forwardRef(function WdInputNumber(props, ref) {
|
|
|
163
161
|
res = strNumAddCalc(res, `${-props.step}`);
|
|
164
162
|
}
|
|
165
163
|
}
|
|
166
|
-
if (isNumber(props.max) && Number(res) > max) {
|
|
167
|
-
validState = 'error';
|
|
168
|
-
validMsg = validMsgObj.max;
|
|
169
|
-
type = '';
|
|
170
|
-
}
|
|
171
|
-
if (isNumber(props.min) && Number(res) < min) {
|
|
172
|
-
validState = 'error';
|
|
173
|
-
validMsg = validMsgObj.min;
|
|
174
|
-
type = '';
|
|
175
|
-
}
|
|
176
164
|
res = dealDecimals(res, props.decimals, type);
|
|
177
165
|
// 千分符转换
|
|
178
166
|
if (props.thousandShow && res !== 'Infinity' && res !== '-Infinity') {
|
|
179
167
|
const temp = res.split('.');
|
|
180
168
|
res = `${temp[0].replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}${temp[1] ? `.${temp[1]}` : ''}`;
|
|
181
169
|
}
|
|
182
|
-
initValidate(validState, validMsg);
|
|
183
170
|
return res === 'NaN' ? '' : res;
|
|
184
|
-
}, [
|
|
185
|
-
initValidate,
|
|
186
|
-
max,
|
|
187
|
-
min,
|
|
188
|
-
props.decimals,
|
|
189
|
-
props.max,
|
|
190
|
-
props.min,
|
|
191
|
-
props.step,
|
|
192
|
-
props.thousandShow,
|
|
193
|
-
validMsgObj.max,
|
|
194
|
-
validMsgObj.min,
|
|
195
|
-
]);
|
|
171
|
+
}, [props.decimals, props.step, props.thousandShow]);
|
|
196
172
|
/**
|
|
197
173
|
* 获取真实值
|
|
198
174
|
*/
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
/* h5 */
|
|
2
2
|
.wd-form-item.wd-h5-member-root .weui-cell {
|
|
3
3
|
padding: 0;
|
|
4
|
+
width: 100%;
|
|
4
5
|
}
|
|
5
6
|
|
|
6
7
|
/* pc */
|
|
7
|
-
.wd-form-item.wd-pc-member-root
|
|
8
|
-
.weda-ui-user-selected
|
|
9
|
-
.wedatea2td-dropdown-btn.wedatea2td-dropdown__header {
|
|
8
|
+
.wd-form-item.wd-pc-member-root .weda-ui-user-selected .wedatea2td-dropdown-btn.wedatea2td-dropdown__header {
|
|
10
9
|
border: none;
|
|
11
10
|
padding: 0;
|
|
12
11
|
height: 100%;
|
|
@@ -14,10 +13,7 @@
|
|
|
14
13
|
padding-right: 0 !important;
|
|
15
14
|
}
|
|
16
15
|
|
|
17
|
-
.wd-form-item.wd-pc-member-root
|
|
18
|
-
.weda-ui-user-selected
|
|
19
|
-
.wedatea2td-dropdown__header
|
|
20
|
-
.wedatea2td-icon-arrowdown {
|
|
16
|
+
.wd-form-item.wd-pc-member-root .weda-ui-user-selected .wedatea2td-dropdown__header .wedatea2td-icon-arrowdown {
|
|
21
17
|
display: none;
|
|
22
18
|
}
|
|
23
19
|
|