@pointcloud/pcloud-components 0.1.23 → 0.1.25

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.
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ export interface AspectRatioProps {
3
+ ratio?: number;
4
+ className?: string;
5
+ children: React.ReactNode;
6
+ style?: React.CSSProperties;
7
+ }
8
+ declare function AspectRatio({ ratio, className, children, style }: AspectRatioProps): import("react/jsx-runtime").JSX.Element;
9
+ export default AspectRatio;
@@ -0,0 +1,46 @@
1
+ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
+ import React, { useRef, useEffect } from 'react';
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ function AspectRatio(_ref) {
5
+ var _ref$ratio = _ref.ratio,
6
+ ratio = _ref$ratio === void 0 ? 16 / 9 : _ref$ratio,
7
+ _ref$className = _ref.className,
8
+ className = _ref$className === void 0 ? '' : _ref$className,
9
+ children = _ref.children,
10
+ style = _ref.style;
11
+ var ref = useRef(null);
12
+ useEffect(function () {
13
+ // 兼容旧浏览器:如果不支持 aspect-ratio,则用 padding-top
14
+ var el = ref.current;
15
+ if (!el) return;
16
+ var test = document.createElement('div');
17
+ if (!('aspectRatio' in test.style)) {
18
+ // 不支持 aspect-ratio
19
+ el.style.position = 'relative';
20
+ el.style.width = '100%';
21
+ el.style.height = '';
22
+ el.style.paddingTop = "".concat(100 / ratio, "%");
23
+ // 包裹 children 的 div 绝对定位
24
+ if (el.firstElementChild) {
25
+ el.firstElementChild.style.position = 'absolute';
26
+ el.firstElementChild.style.inset = '0';
27
+ el.firstElementChild.style.width = '100%';
28
+ el.firstElementChild.style.height = '100%';
29
+ }
30
+ }
31
+ }, [ratio]);
32
+ return /*#__PURE__*/_jsx("div", {
33
+ ref: ref,
34
+ className: className,
35
+ style: _objectSpread({
36
+ aspectRatio: "".concat(ratio),
37
+ width: '100%',
38
+ height: '100%',
39
+ display: 'flex',
40
+ alignItems: 'center',
41
+ justifyContent: 'center'
42
+ }, style),
43
+ children: children
44
+ });
45
+ }
46
+ export default AspectRatio;
@@ -8,6 +8,7 @@ import { DSelectProps } from '../../DSelect';
8
8
  import { DCascaderProps } from '../../DCascader';
9
9
  import { DTreeSelectProps } from '../../DTreeSelect';
10
10
  import { DUploadProps } from '../../DUpload';
11
+ import { IPAddressProps } from '../../IPAddress';
11
12
  export declare type DItemBaseProps = {
12
13
  /** label标签文本,同antd Form.Item的label,只能是string */
13
14
  label?: string;
@@ -30,6 +31,9 @@ declare type CustomItemProps = DItemBaseProps & HTMLAttributes<HTMLElement> & {
30
31
  declare type DInputItemProps = {
31
32
  renderType?: 'dInput';
32
33
  } & DItemBaseProps & DInputProps;
34
+ declare type DIpAddressProps = {
35
+ renderType?: 'ipAddress';
36
+ } & DItemBaseProps & IPAddressProps;
33
37
  declare type InputItemProps = {
34
38
  renderType?: 'input';
35
39
  } & DItemBaseProps & InputProps;
@@ -111,5 +115,5 @@ declare type ButtonItemProps = {
111
115
  declare type DividerItemProps = {
112
116
  renderType?: 'divider';
113
117
  } & DItemBaseProps & DividerProps;
114
- export declare type DItemProps = CustomItemProps | DInputItemProps | InputItemProps | TextAreaItemProps | PasswordItemProps | InputNumberItemProps | AutoCompleteItemProps | DSelectItemProps | SelectItemProps | DCascaderItemProps | CascaderItemProps | DTreeSelectItemProps | TreeSelectItemProps | DatePickerItemProps | TimePickerItemProps | RangePickerItemProps | MentionItemProps | CheckboxItemProps | CheckboxGroupProps | DCheckboxGroupProps | RadioItemProps | RadioGroupProps | DRadioGorupProps | RateItemProps | SliderItemProps | SwitchItemProps | TransferItemProps | UploadItemProps | DUploadItemProps | ButtonItemProps | DividerItemProps;
118
+ export declare type DItemProps = CustomItemProps | DInputItemProps | DIpAddressProps | InputItemProps | TextAreaItemProps | PasswordItemProps | InputNumberItemProps | AutoCompleteItemProps | DSelectItemProps | SelectItemProps | DCascaderItemProps | CascaderItemProps | DTreeSelectItemProps | TreeSelectItemProps | DatePickerItemProps | TimePickerItemProps | RangePickerItemProps | MentionItemProps | CheckboxItemProps | CheckboxGroupProps | DCheckboxGroupProps | RadioItemProps | RadioGroupProps | DRadioGorupProps | RateItemProps | SliderItemProps | SwitchItemProps | TransferItemProps | UploadItemProps | DUploadItemProps | ButtonItemProps | DividerItemProps;
115
119
  export {};
@@ -8,6 +8,7 @@ import { DInputProps } from '../../DInput';
8
8
  import { DSelectProps } from '../../DSelect';
9
9
  import { DTreeSelectProps } from '../../DTreeSelect';
10
10
  import { DUploadProps } from '../../DUpload';
11
+ import { IPAddressProps } from '../../IPAddress';
11
12
  import { DItemBaseProps } from './itemType';
12
13
  declare const renderMap: {
13
14
  dInput: (props: DInputProps, formItemProps: FormItemProps, label: DItemBaseProps['label']) => import("react/jsx-runtime").JSX.Element;
@@ -15,6 +16,7 @@ declare const renderMap: {
15
16
  textArea: (props: TextAreaProps, formItemProps: FormItemProps, label: DItemBaseProps['label']) => import("react/jsx-runtime").JSX.Element;
16
17
  password: (props: PasswordProps, formItemProps: FormItemProps, label: DItemBaseProps['label']) => import("react/jsx-runtime").JSX.Element;
17
18
  inputNumber: (props: InputNumberProps, formItemProps: FormItemProps, label: DItemBaseProps['label']) => import("react/jsx-runtime").JSX.Element;
19
+ ipAddress: (props: IPAddressProps, formItemProps: FormItemProps) => import("react/jsx-runtime").JSX.Element;
18
20
  autoComplete: (props: AutoCompleteProps, formItemProps: FormItemProps, label: DItemBaseProps['label']) => import("react/jsx-runtime").JSX.Element;
19
21
  dSelect: (props: DSelectProps, formItemProps: FormItemProps, label: DItemBaseProps['label']) => import("react/jsx-runtime").JSX.Element;
20
22
  select: (props: SelectProps, formItemProps: FormItemProps, label: DItemBaseProps['label']) => import("react/jsx-runtime").JSX.Element;
@@ -13,6 +13,7 @@ import DInput from "../../DInput";
13
13
  import DSelect from "../../DSelect";
14
14
  import DTreeSelect from "../../DTreeSelect";
15
15
  import DUpload from "../../DUpload";
16
+ import IPAddress from "../../IPAddress";
16
17
  import { jsx as _jsx } from "react/jsx-runtime";
17
18
  var renderMap = {
18
19
  dInput: function dInput(props, formItemProps, label) {
@@ -50,6 +51,11 @@ var renderMap = {
50
51
  }, props))
51
52
  }));
52
53
  },
54
+ ipAddress: function ipAddress(props, formItemProps) {
55
+ return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread({}, formItemProps), {}, {
56
+ children: /*#__PURE__*/_jsx(IPAddress, _objectSpread({}, props))
57
+ }));
58
+ },
53
59
  autoComplete: function autoComplete(props, formItemProps, label) {
54
60
  var _props = props;
55
61
  return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread({}, formItemProps), {}, {
@@ -1,3 +1,5 @@
1
+ export declare function cloneDeep<T>(value: T): T;
2
+ export declare function mergeWith<T, S>(object: T, source: S, customizer?: (_objValue: any, _srcValue: any, _key: string | number) => any): T & S;
1
3
  /** 合并对象 */
2
4
  declare function merge(object: any, sources: any, customizer?: (objValue: any, srcValue: any) => any): any;
3
5
  declare const _default: {
@@ -1,14 +1,4 @@
1
1
  import _typeof from "@babel/runtime/helpers/esm/typeof";
2
- /*
3
- * @Author : wangfeihu
4
- * @Date : 2023-06-07 15:08:06
5
- * @LastEditors : wangfeihu
6
- * @LastEditTime : 2023-06-12 17:35:15
7
- * @Description : 合并两个对象中的所有字段
8
- */
9
-
10
- import mergeWith from 'lodash/mergeWith';
11
- import cloneDeep from 'lodash/cloneDeep';
12
2
  var TYPES = {
13
3
  OPTION_TYPE_PRIMARY: 'primary',
14
4
  OPTION_TYPE_OBJECT: 'object',
@@ -45,6 +35,39 @@ var defaultCustomizer = function defaultCustomizer(objValue, srcValue) {
45
35
  return srcValue;
46
36
  }
47
37
  };
38
+ export function cloneDeep(value) {
39
+ if (value === null || _typeof(value) !== 'object') return value;
40
+ if (Array.isArray(value)) return value.map(cloneDeep);
41
+ var result = {};
42
+ for (var key in value) {
43
+ if (Object.prototype.hasOwnProperty.call(value, key)) {
44
+ result[key] = cloneDeep(value[key]);
45
+ }
46
+ }
47
+ return result;
48
+ }
49
+ export function mergeWith(object, source, customizer) {
50
+ var result = cloneDeep(object);
51
+ for (var key in source) {
52
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
53
+ var objValue = result[key];
54
+ var srcValue = source[key];
55
+ if (customizer) {
56
+ var customized = customizer(objValue, srcValue, key);
57
+ if (customized !== undefined) {
58
+ result[key] = customized;
59
+ continue;
60
+ }
61
+ }
62
+ if (objValue && srcValue && _typeof(objValue) === 'object' && _typeof(srcValue) === 'object' && !Array.isArray(objValue) && !Array.isArray(srcValue)) {
63
+ result[key] = mergeWith(objValue, srcValue, customizer);
64
+ } else {
65
+ result[key] = cloneDeep(srcValue);
66
+ }
67
+ }
68
+ }
69
+ return result;
70
+ }
48
71
 
49
72
  /** 合并对象 */
50
73
  function merge(object, sources) {
@@ -20,13 +20,16 @@ import "./index.less";
20
20
  // eslint-disable-next-line no-unused-vars
21
21
  import { jsx as _jsx } from "react/jsx-runtime";
22
22
  function getChildren(items, children, _defaultItemProps, layout) {
23
+ var _Object$keys;
23
24
  var list = [];
25
+ var hasPropsValue = _defaultItemProps && ((_Object$keys = Object.keys(_defaultItemProps)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) > 0;
24
26
  if (items instanceof Array && items.length > 0) {
25
27
  if (layout === 'grid') {
26
28
  list.push( /*#__PURE__*/_jsx(Row, {
29
+ className: "grid-row",
27
30
  children: items.map(function (item, index) {
28
31
  var _item$formItemProps;
29
- var _item = helper.merge(_defaultItemProps, item);
32
+ var _item = hasPropsValue ? helper.merge(_defaultItemProps, item) : item;
30
33
  var _gridProps = (_item === null || _item === void 0 || (_item$formItemProps = _item.formItemProps) === null || _item$formItemProps === void 0 ? void 0 : _item$formItemProps.grid) || {};
31
34
  return /*#__PURE__*/_jsx(Col, _objectSpread(_objectSpread({}, _gridProps), {}, {
32
35
  children: /*#__PURE__*/_jsx(DItem, _objectSpread({}, _item))
@@ -35,7 +38,7 @@ function getChildren(items, children, _defaultItemProps, layout) {
35
38
  }, "row"));
36
39
  } else {
37
40
  list = items.map(function (item, index) {
38
- var _item = helper.merge(_defaultItemProps, item);
41
+ var _item = hasPropsValue ? helper.merge(_defaultItemProps, item) : item;
39
42
  return /*#__PURE__*/_jsx(DItem, _objectSpread({}, _item), (item === null || item === void 0 ? void 0 : item.name) || index);
40
43
  });
41
44
  }
@@ -44,7 +47,7 @@ function getChildren(items, children, _defaultItemProps, layout) {
44
47
  var childrenList = children instanceof Array ? children : [children];
45
48
  var _childrenList = childrenList.map(function (item) {
46
49
  return _objectSpread(_objectSpread({}, item), {}, {
47
- props: helper.merge(_defaultItemProps, item.props)
50
+ props: hasPropsValue ? helper.merge(_defaultItemProps, item.props) : item.props
48
51
  });
49
52
  });
50
53
  list = list.concat(_childrenList);
@@ -1,45 +1,50 @@
1
- @import '../commonStyle/index.less';
2
-
3
- .@{prefix}-form {
4
- .form-wrapper > .ant-form-item {
5
- min-height: 32px;
6
- margin-right: 0;
7
- margin-bottom: 24px;
8
- }
9
-
10
- .ant-input-number,
11
- .ant-picker {
12
- width: 100%;
13
- }
14
- }
15
-
16
- .@{prefix}-form.ant-form-vertical .form-wrapper > .ant-form-item:last-child,
17
- .@{prefix}-form.ant-form-horizontal .form-wrapper > .ant-form-item:last-child {
18
- margin-bottom: 0;
19
- }
20
-
21
- .@{prefix}-form.ant-form-horizontal .ant-form-item-label {
22
- min-width: 80px;
23
- }
24
-
25
- .@{prefix}-form.ant-form-inline .form-wrapper,
26
- .@{prefix}-form.ant-form-inline.inlineVertical .form-wrapper {
27
- display: flex;
28
- flex-wrap: wrap;
29
- align-items: flex-end;
30
- height: min-content;
31
-
32
- > .ant-form-item {
33
- padding-right: 16px;
34
- }
35
- }
36
-
37
- .@{prefix}-form.ant-form-inline.inlineVertical {
38
- .ant-form-item-row {
39
- flex-direction: column;
40
-
41
- .ant-form-item-label {
42
- text-align: left;
43
- }
44
- }
45
- }
1
+ @import '../commonStyle/index.less';
2
+
3
+ .@{prefix}-form {
4
+ .form-wrapper > .ant-form-item {
5
+ min-height: 32px;
6
+ margin-right: 0;
7
+ margin-bottom: 24px;
8
+ }
9
+
10
+ .ant-input-number,
11
+ .ant-picker {
12
+ width: 100%;
13
+ }
14
+ }
15
+
16
+ .@{prefix}-form.ant-form-vertical .form-wrapper > .ant-form-item:last-child,
17
+ .@{prefix}-form.ant-form-horizontal .form-wrapper > .ant-form-item:last-child {
18
+ margin-bottom: 0;
19
+ }
20
+
21
+ .@{prefix}-form.ant-form-horizontal .ant-form-item-label {
22
+ min-width: 80px;
23
+ }
24
+
25
+ .@{prefix}-form.ant-form-inline .form-wrapper,
26
+ .@{prefix}-form.ant-form-inline.inlineVertical .form-wrapper {
27
+ display: flex;
28
+ flex-wrap: wrap;
29
+ align-items: flex-end;
30
+ height: min-content;
31
+ flex: 1;
32
+
33
+ > .ant-form-item {
34
+ padding-right: 16px;
35
+ }
36
+ }
37
+
38
+ .@{prefix}-form.ant-form-inline.inlineVertical {
39
+ .ant-form-item-row {
40
+ flex-direction: column;
41
+
42
+ .ant-form-item-label {
43
+ text-align: left;
44
+ }
45
+ }
46
+
47
+ .grid-row {
48
+ flex: 1;
49
+ }
50
+ }
@@ -26,7 +26,7 @@ declare type DUploadProps = Omit<UploadProps, 'fileList' | 'onChange' | 'customR
26
26
  itemClassName?: string;
27
27
  enablePreview?: boolean | ((file: DUploadFile) => boolean);
28
28
  };
29
- declare const DUpload: React.ForwardRefExoticComponent<Omit<UploadProps<any>, "fileList" | "onChange" | "customRequest" | "onRemove" | "onDownload" | "onPreview"> & {
29
+ declare const DUpload: React.ForwardRefExoticComponent<Omit<UploadProps<any>, "onChange" | "fileList" | "customRequest" | "onRemove" | "onDownload" | "onPreview"> & {
30
30
  /** 初始文件列表(相当于defaultFileList,但优先级高于defaultFileList) */
31
31
  value?: DUploadFile | DUploadFile[] | undefined;
32
32
  /** 文件列表(在Form组件中表现为受控列表,在一般情况下相当于初始文件列表,其优先级高于value属性) */
@@ -6,12 +6,12 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
6
6
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
7
7
  import _typeof from "@babel/runtime/helpers/esm/typeof";
8
8
  var _excluded = ["value", "thumbOption", "uploadButton", "itemClassName", "enablePreview", "className", "maxCount", "children", "itemRender", "customRequest", "onRemove", "onDownload", "onPreview", "onChange", "defaultFileList", "showUploadList", "fileList"];
9
- /*
10
- * @Author : wangfeihu
11
- * @Date : 2023-06-16 09:37:07
12
- * @LastEditors : wangfeihu
13
- * @LastEditTime : 2023-09-07 16:33:53
14
- * @Description : 基于antd的Upload组件
9
+ /*
10
+ * @Author : wangfeihu
11
+ * @Date : 2023-06-16 09:37:07
12
+ * @LastEditors : wangfeihu
13
+ * @LastEditTime : 2023-09-07 16:33:53
14
+ * @Description : 基于antd的Upload组件
15
15
  */
16
16
 
17
17
  import React, { forwardRef, useEffect, useMemo, useState, useContext } from 'react';
@@ -12,10 +12,7 @@ export interface IPAddressProps {
12
12
  disabled?: boolean;
13
13
  size?: 'small' | 'middle' | 'large';
14
14
  style?: React.CSSProperties;
15
- inputProps?: {
16
- style?: React.CSSProperties;
17
- [key: string]: any;
18
- };
15
+ inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
19
16
  autoComplete?: boolean;
20
17
  normalize?: boolean;
21
18
  }
@@ -46,7 +46,7 @@ var getInitialAddress = function getInitialAddress(type, value) {
46
46
  } else {
47
47
  var parts = value.split('.').map(function (i) {
48
48
  return {
49
- value: i
49
+ value: i.replace(/\D/g, '')
50
50
  };
51
51
  });
52
52
  while (parts.length < 4) parts.push({
@@ -66,7 +66,8 @@ var IPAddress = function IPAddress(props) {
66
66
  disabled = props.disabled,
67
67
  _props$size = props.size,
68
68
  size = _props$size === void 0 ? 'middle' : _props$size,
69
- style = props.style,
69
+ _props$style = props.style,
70
+ style = _props$style === void 0 ? {} : _props$style,
70
71
  inputProps = props.inputProps,
71
72
  _props$autoComplete = props.autoComplete,
72
73
  autoComplete = _props$autoComplete === void 0 ? true : _props$autoComplete,
@@ -92,7 +93,7 @@ var IPAddress = function IPAddress(props) {
92
93
  }, [value, type]);
93
94
  var getValue = useCallback(function (addr) {
94
95
  var vals = addr.map(function (item) {
95
- return item.value || '0';
96
+ return item.value;
96
97
  });
97
98
  var splitSymbol = type === 'IPv6' ? ':' : '.';
98
99
  if (type !== 'IPv6') return vals.join(splitSymbol);
@@ -154,12 +155,6 @@ var IPAddress = function IPAddress(props) {
154
155
  }
155
156
  }
156
157
  if (nv.length > maxLen) nv = nv.slice(0, maxLen);
157
-
158
- // 自动聚焦下一个输入框
159
- if (autoComplete && type === 'IPv6' && nv.length === maxLen && idx < (type === 'IPv6' ? 7 : 3)) {
160
- var _refs$current;
161
- (_refs$current = refs.current[idx + 1]) === null || _refs$current === void 0 || _refs$current.focus();
162
- }
163
158
  var next = address.map(function (item, i) {
164
159
  return i === idx ? {
165
160
  value: nv
@@ -170,12 +165,21 @@ var IPAddress = function IPAddress(props) {
170
165
  onChange(getValue(next));
171
166
  }
172
167
  }, [address, autoComplete, getValue, onChange, type]);
173
- var handleKeyUp = useCallback(function (idx, value) {
168
+ // 自动聚焦下一个输入框
169
+ var handleKeyUp = useCallback(function (idx, value, event) {
170
+ if (event.key === 'Backspace') return;
174
171
  if (autoComplete && (type === 'IPv4' && value.length === 3 && idx < 3 || type === 'IPv6' && value.length === 4 && idx < 7)) {
175
- var _refs$current2;
176
- (_refs$current2 = refs.current[idx + 1]) === null || _refs$current2 === void 0 || _refs$current2.focus();
172
+ var _refs$current;
173
+ (_refs$current = refs.current[idx + 1]) === null || _refs$current === void 0 || _refs$current.focus();
177
174
  }
178
175
  }, [type, autoComplete]);
176
+ var handleKeyDown = useCallback(function (idx, value, event) {
177
+ if (event.key === 'Backspace' && value === '' && idx > 0) {
178
+ var _refs$current2;
179
+ event.preventDefault();
180
+ (_refs$current2 = refs.current[idx - 1]) === null || _refs$current2 === void 0 || _refs$current2.focus();
181
+ }
182
+ }, []);
179
183
  var handleFocus = function handleFocus(idx, value) {
180
184
  onFocus === null || onFocus === void 0 || onFocus(value, idx);
181
185
  };
@@ -189,31 +193,29 @@ var IPAddress = function IPAddress(props) {
189
193
  return type === 'IPv6' ? /*#__PURE__*/_jsx("span", {
190
194
  style: {
191
195
  margin: '0 2px',
192
- color: '#00000040'
196
+ color: '#00000060'
193
197
  },
194
198
  children: ":"
195
199
  }) : /*#__PURE__*/_jsx("span", {
196
200
  style: {
197
201
  margin: '0 2px',
198
- color: '#00000040'
202
+ color: '#00000060'
199
203
  },
200
204
  children: "\xB7"
201
205
  });
202
206
  };
203
207
  return /*#__PURE__*/_jsx("div", {
204
208
  className: "".concat(wrapperClass, " ").concat(className, " ").concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(readOnly ? 'readonly' : ''),
205
- style: _objectSpread({
206
- display: 'inline-block',
207
- alignItems: 'center'
208
- }, style),
209
+ style: style,
209
210
  children: address.map(function (item, idx) {
210
211
  return /*#__PURE__*/_jsxs(React.Fragment, {
211
212
  children: [/*#__PURE__*/_jsx("input", _objectSpread({
213
+ id: "ip-address-input-".concat(idx),
212
214
  ref: function ref(el) {
213
215
  return refs.current[idx] = el;
214
216
  },
215
- type: "text",
216
- value: item.value,
217
+ type: type === 'IPv4' ? 'number' : 'text',
218
+ value: item.value || undefined,
217
219
  readOnly: readOnly,
218
220
  disabled: disabled,
219
221
  maxLength: type === 'IPv6' ? 4 : 3,
@@ -227,7 +229,10 @@ var IPAddress = function IPAddress(props) {
227
229
  return handleInput(idx, e.target.value);
228
230
  },
229
231
  onKeyUp: function onKeyUp(e) {
230
- return handleKeyUp(idx, e.target.value);
232
+ return handleKeyUp(idx, item.value, e);
233
+ },
234
+ onKeyDown: function onKeyDown(e) {
235
+ return handleKeyDown(idx, item.value, e);
231
236
  },
232
237
  onFocus: function onFocus(e) {
233
238
  return handleFocus(idx, e.target.value);
@@ -4,6 +4,7 @@
4
4
  border: 1px solid #d9d9d9;
5
5
  border-radius: 2px;
6
6
  transition: all 0.3s;
7
+ display: inline-block;
7
8
 
8
9
  &.small {
9
10
  height: 24px;
@@ -60,4 +61,15 @@
60
61
  cursor: not-allowed;
61
62
  color: inherit;
62
63
  }
64
+
65
+ input[type='number'] {
66
+ appearance: textfield; /* 移除Firefox的特殊样式 */
67
+ }
68
+
69
+ /* 移除上下箭头 */
70
+ input[type='number']::-webkit-outer-spin-button,
71
+ input[type='number']::-webkit-inner-spin-button {
72
+ appearance: none;
73
+ margin: 0;
74
+ }
63
75
  }
@@ -48,6 +48,15 @@ interface ISLProps<T, P> {
48
48
  * @default 200
49
49
  */
50
50
  visibilityHeight?: number;
51
+ /**
52
+ * @description 是否显示 BackTop
53
+ * @default false
54
+ */
55
+ showBackTop?: boolean;
56
+ /**
57
+ * @description 列表底部提示
58
+ */
59
+ endMessage?: React.ReactNode;
51
60
  }
52
61
  export declare type InfiniteScrollListProps<T, P> = ISLProps<T, P>;
53
62
  declare const _default: React.MemoExoticComponent<(<T, P>(props: ISLProps<T, P>) => import("react/jsx-runtime").JSX.Element)>;
@@ -29,6 +29,9 @@ var InfiniteScrollList = function InfiniteScrollList(props) {
29
29
  scrollThreshold = _props$scrollThreshol === void 0 ? '100px' : _props$scrollThreshol,
30
30
  _props$visibilityHeig = props.visibilityHeight,
31
31
  visibilityHeight = _props$visibilityHeig === void 0 ? 200 : _props$visibilityHeig,
32
+ _props$showBackTop = props.showBackTop,
33
+ showBackTop = _props$showBackTop === void 0 ? true : _props$showBackTop,
34
+ endMessage = props.endMessage,
32
35
  _renderItem = props.renderItem;
33
36
  var _useContext = useContext(ConfigContext),
34
37
  prefixCls = _useContext.prefixCls,
@@ -127,11 +130,13 @@ var InfiniteScrollList = function InfiniteScrollList(props) {
127
130
  className: "scroll-container",
128
131
  ref: scrollRef,
129
132
  style: {
130
- height: containerHeight,
131
- overflowY: 'auto'
133
+ height: containerHeight
132
134
  },
133
135
  children: [/*#__PURE__*/_jsx(InfiniteScroll, {
134
136
  className: "".concat(wrapperClass, " ").concat(className),
137
+ style: {
138
+ overflow: 'initial'
139
+ },
135
140
  scrollableTarget: containerId,
136
141
  dataLength: (_listData$data = listData.data) === null || _listData$data === void 0 ? void 0 : _listData$data.length,
137
142
  next: handleLoadMore,
@@ -144,7 +149,7 @@ var InfiniteScrollList = function InfiniteScrollList(props) {
144
149
  tip: "\u62FC\u547D\u52A0\u8F7D\u4E2D..."
145
150
  })
146
151
  }),
147
- endMessage: (listData === null || listData === void 0 ? void 0 : listData.total) > 0 && /*#__PURE__*/_jsx(Divider, {
152
+ endMessage: endMessage || (listData === null || listData === void 0 ? void 0 : listData.total) > 0 && /*#__PURE__*/_jsx(Divider, {
148
153
  plain: true,
149
154
  children: "\u5DF2\u7ECF\u5230\u5E95\u90E8\u4E86"
150
155
  }),
@@ -159,7 +164,7 @@ var InfiniteScrollList = function InfiniteScrollList(props) {
159
164
  }, item[itemKey]);
160
165
  }
161
166
  })
162
- }), /*#__PURE__*/_jsx(BackTop, {
167
+ }), showBackTop && /*#__PURE__*/_jsx(BackTop, {
163
168
  className: "backtop",
164
169
  target: function target() {
165
170
  return (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) || document.body;
@@ -1,22 +1,24 @@
1
- @import '../../commonStyle/index.less';
2
-
3
- .@{prefix}-infinite-scroll-wrapper {
4
- .ant-list .ant-row {
5
- margin-right: 0 !important;
6
- }
7
- }
8
-
9
- .scroll-container {
10
- position: relative;
11
-
12
- .backtop {
13
- right: 50px;
14
- }
15
-
16
- .up {
17
- background: #007aff;
18
- color: #fff;
19
- text-align: center;
20
- border-radius: 3px;
21
- }
22
- }
1
+ @import '../../commonStyle/index.less';
2
+
3
+ .@{prefix}-infinite-scroll-wrapper {
4
+ .ant-list .ant-row {
5
+ margin-right: 0 !important;
6
+ }
7
+ }
8
+
9
+ .scroll-container {
10
+ position: relative;
11
+ overflow-y: auto;
12
+ overflow-x: hidden;
13
+
14
+ .backtop {
15
+ right: 50px;
16
+ }
17
+
18
+ .up {
19
+ background: #007aff;
20
+ color: #fff;
21
+ text-align: center;
22
+ border-radius: 3px;
23
+ }
24
+ }
@@ -1,25 +1,25 @@
1
- .toolbar {
2
- display: flex;
3
- background-color: rgba(0, 0, 0, 50%);
4
- justify-content: center;
5
- align-items: center;
6
- color: #fff;
7
-
8
- button {
9
- background-color: transparent;
10
- border-width: 0;
11
- cursor: pointer;
12
- display: flex;
13
- align-items: center;
14
- // width: 32px;
15
- // height: 32px;
16
-
17
- &:hover {
18
- background-color: #0074d9;
19
- }
20
- }
21
-
22
- .icon > path {
23
- fill: #fff;
24
- }
25
- }
1
+ .toolbar {
2
+ display: flex;
3
+ background-color: rgba(0, 0, 0, 50%);
4
+ justify-content: center;
5
+ align-items: center;
6
+ color: #fff;
7
+
8
+ button {
9
+ background-color: transparent;
10
+ border-width: 0;
11
+ cursor: pointer;
12
+ display: flex;
13
+ align-items: center;
14
+ // width: 32px;
15
+ // height: 32px;
16
+
17
+ &:hover {
18
+ background-color: #0074d9;
19
+ }
20
+ }
21
+
22
+ .icon > path {
23
+ fill: #fff;
24
+ }
25
+ }