@aloudata/aloudata-design 0.3.3 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (131) hide show
  1. package/es/Breadcrumb/index.d.ts +1 -0
  2. package/es/Checkbox/index.d.ts +1 -0
  3. package/es/ConfigProvider/defaultRenderEmpty.d.ts +4 -0
  4. package/es/ConfigProvider/defaultRenderEmpty.js +37 -0
  5. package/es/ConfigProvider/sizeContext.d.ts +9 -0
  6. package/es/ConfigProvider/sizeContext.js +12 -0
  7. package/es/Empty/image/Authority.d.ts +1 -0
  8. package/es/Empty/image/Dataspace.d.ts +1 -0
  9. package/es/Empty/image/Search.d.ts +1 -0
  10. package/es/Empty/image/Simple.d.ts +1 -0
  11. package/es/Empty/image/Worksheet.d.ts +1 -0
  12. package/es/Empty/image/empty.d.ts +1 -0
  13. package/es/Input/components/Group/index.d.ts +1 -0
  14. package/es/Input/components/Input/index.d.ts +1 -1
  15. package/es/Input/components/Input/index.js +0 -1
  16. package/es/Input/components/TextArea/index.d.ts +8 -1
  17. package/es/Input/components/TextArea/index.js +8 -1
  18. package/es/Input/style/index.less +78 -0
  19. package/es/InputNumber/index.d.ts +1 -0
  20. package/es/Menu/Divider.d.ts +1 -0
  21. package/es/Modal/style/index.less +3 -0
  22. package/es/Navigator/components/Header/index.d.ts +1 -0
  23. package/es/Navigator/components/Menu/index.d.ts +1 -0
  24. package/es/Popover/index.d.ts +1 -0
  25. package/es/Radio/components/Group/index.d.ts +6 -0
  26. package/es/Radio/components/Group/index.js +72 -0
  27. package/es/Radio/components/Radio/index.d.ts +3 -0
  28. package/es/Radio/components/Radio/index.js +95 -0
  29. package/es/Radio/index.d.ts +9 -2
  30. package/es/Radio/index.js +5 -3
  31. package/es/Radio/interface/radio.d.ts +24 -0
  32. package/es/Radio/interface/radio.js +1 -0
  33. package/es/Radio/interface/radioGroup.d.ts +42 -0
  34. package/es/Radio/interface/radioGroup.js +1 -0
  35. package/es/Radio/style/index.less +348 -0
  36. package/es/Select/index.js +1 -1
  37. package/es/Select/style/index.less +1 -0
  38. package/es/Steps/components/ProcessIcon/index.d.ts +1 -0
  39. package/es/Table/Table.d.ts +2 -1
  40. package/es/Table/Table.js +223 -330
  41. package/es/Table/components/Empty/index.d.ts +3 -0
  42. package/es/Table/components/Empty/index.js +17 -0
  43. package/es/Table/components/Loading/index.d.ts +3 -0
  44. package/es/Table/components/Loading/index.js +19 -0
  45. package/es/Table/components/TableBodyRowList/index.d.ts +13 -0
  46. package/es/Table/components/TableBodyRowList/index.js +89 -0
  47. package/es/Table/components/TableHead/index.d.ts +23 -0
  48. package/es/Table/components/TableHead/index.js +262 -0
  49. package/es/Table/constant.d.ts +1 -0
  50. package/es/Table/constant.js +1 -0
  51. package/es/Table/hooks/useFrame.d.ts +7 -0
  52. package/es/Table/hooks/useFrame.js +90 -0
  53. package/es/Table/hooks/useTableColumn.d.ts +28 -0
  54. package/es/Table/hooks/useTableColumn.js +53 -0
  55. package/es/Table/interface.d.ts +3 -2
  56. package/es/Table/style/index.less +33 -30
  57. package/es/Table/utils.d.ts +15 -0
  58. package/es/Table/utils.js +131 -0
  59. package/es/_utils/hooks/useId.d.ts +4 -0
  60. package/es/_utils/hooks/useId.js +23 -0
  61. package/es/index.d.ts +1 -1
  62. package/es/locale-provider/index.d.ts +5 -1
  63. package/es/style/index.d.ts +0 -1
  64. package/es/style/index.js +0 -1
  65. package/es/style/index.less +2 -2
  66. package/lib/Breadcrumb/index.d.ts +1 -0
  67. package/lib/Checkbox/index.d.ts +1 -0
  68. package/lib/ConfigProvider/defaultRenderEmpty.d.ts +4 -0
  69. package/lib/ConfigProvider/defaultRenderEmpty.js +55 -0
  70. package/lib/ConfigProvider/sizeContext.d.ts +9 -0
  71. package/lib/ConfigProvider/sizeContext.js +30 -0
  72. package/lib/Empty/image/Authority.d.ts +1 -0
  73. package/lib/Empty/image/Dataspace.d.ts +1 -0
  74. package/lib/Empty/image/Search.d.ts +1 -0
  75. package/lib/Empty/image/Simple.d.ts +1 -0
  76. package/lib/Empty/image/Worksheet.d.ts +1 -0
  77. package/lib/Empty/image/empty.d.ts +1 -0
  78. package/lib/Input/components/Group/index.d.ts +1 -0
  79. package/lib/Input/components/Input/index.d.ts +1 -1
  80. package/lib/Input/components/Input/index.js +0 -1
  81. package/lib/Input/components/TextArea/index.d.ts +8 -1
  82. package/lib/Input/components/TextArea/index.js +10 -1
  83. package/lib/Input/style/index.less +78 -0
  84. package/lib/InputNumber/index.d.ts +1 -0
  85. package/lib/Menu/Divider.d.ts +1 -0
  86. package/lib/Modal/style/index.less +3 -0
  87. package/lib/Navigator/components/Header/index.d.ts +1 -0
  88. package/lib/Navigator/components/Menu/index.d.ts +1 -0
  89. package/lib/Popover/index.d.ts +1 -0
  90. package/lib/Radio/components/Group/index.d.ts +6 -0
  91. package/lib/Radio/components/Group/index.js +93 -0
  92. package/lib/Radio/components/Radio/index.d.ts +3 -0
  93. package/lib/Radio/components/Radio/index.js +115 -0
  94. package/lib/Radio/index.d.ts +9 -2
  95. package/lib/Radio/index.js +5 -3
  96. package/lib/Radio/interface/radio.d.ts +24 -0
  97. package/lib/Radio/interface/radio.js +5 -0
  98. package/lib/Radio/interface/radioGroup.d.ts +42 -0
  99. package/lib/Radio/interface/radioGroup.js +5 -0
  100. package/lib/Radio/style/index.less +348 -0
  101. package/lib/Select/index.js +1 -1
  102. package/lib/Select/style/index.less +1 -0
  103. package/lib/Steps/components/ProcessIcon/index.d.ts +1 -0
  104. package/lib/Table/Table.d.ts +2 -1
  105. package/lib/Table/Table.js +228 -332
  106. package/lib/Table/components/Empty/index.d.ts +3 -0
  107. package/lib/Table/components/Empty/index.js +30 -0
  108. package/lib/Table/components/Loading/index.d.ts +3 -0
  109. package/lib/Table/components/Loading/index.js +33 -0
  110. package/lib/Table/components/TableBodyRowList/index.d.ts +13 -0
  111. package/lib/Table/components/TableBodyRowList/index.js +108 -0
  112. package/lib/Table/components/TableHead/index.d.ts +23 -0
  113. package/lib/Table/components/TableHead/index.js +286 -0
  114. package/lib/Table/constant.d.ts +1 -0
  115. package/lib/Table/constant.js +1 -0
  116. package/lib/Table/hooks/useFrame.d.ts +7 -0
  117. package/lib/Table/hooks/useFrame.js +98 -0
  118. package/lib/Table/hooks/useTableColumn.d.ts +28 -0
  119. package/lib/Table/hooks/useTableColumn.js +66 -0
  120. package/lib/Table/interface.d.ts +3 -2
  121. package/lib/Table/style/index.less +33 -30
  122. package/lib/Table/utils.d.ts +15 -0
  123. package/lib/Table/utils.js +147 -0
  124. package/lib/_utils/hooks/useId.d.ts +4 -0
  125. package/lib/_utils/hooks/useId.js +36 -0
  126. package/lib/index.d.ts +1 -1
  127. package/lib/locale-provider/index.d.ts +5 -1
  128. package/lib/style/index.d.ts +0 -1
  129. package/lib/style/index.js +0 -2
  130. package/lib/style/index.less +2 -2
  131. package/package.json +1 -1
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { BreadcrumbItemProps, BreadcrumbProps } from 'antd';
2
3
  export type { BreadcrumbItemProps, BreadcrumbProps };
3
4
  declare const Breadcrumb: {
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { CheckboxProps } from 'antd';
2
3
  import { CheckboxGroupProps } from 'antd/lib/checkbox';
3
4
  export type { CheckboxValueType, CheckboxOptionType } from 'antd/es/checkbox/Group';
@@ -0,0 +1,4 @@
1
+ import * as React from 'react';
2
+ declare const defaultRenderEmpty: (componentName?: string | undefined) => React.ReactNode;
3
+ export declare type RenderEmptyHandler = typeof defaultRenderEmpty;
4
+ export default defaultRenderEmpty;
@@ -0,0 +1,37 @@
1
+ import * as React from 'react';
2
+ import { ConfigConsumer } from '.';
3
+ import Empty from '../Empty';
4
+
5
+ var defaultRenderEmpty = function defaultRenderEmpty(componentName) {
6
+ return /*#__PURE__*/React.createElement(ConfigConsumer, null, function (_ref) {
7
+ var getPrefixCls = _ref.getPrefixCls;
8
+ var prefix = getPrefixCls('empty');
9
+
10
+ switch (componentName) {
11
+ case 'Table':
12
+ case 'List':
13
+ return /*#__PURE__*/React.createElement(Empty, {
14
+ image: Empty.PRESENTED_IMAGE_SIMPLE
15
+ });
16
+
17
+ case 'Select':
18
+ case 'TreeSelect':
19
+ case 'Cascader':
20
+ case 'Transfer':
21
+ case 'Mentions':
22
+ return /*#__PURE__*/React.createElement(Empty, {
23
+ image: Empty.PRESENTED_IMAGE_SIMPLE,
24
+ title: "\u65E0\u6570\u636E",
25
+ className: "".concat(prefix, "-small")
26
+ });
27
+
28
+ /* istanbul ignore next */
29
+
30
+ default:
31
+ // Should never hit if we take all the component into consider.
32
+ return /*#__PURE__*/React.createElement(Empty, null);
33
+ }
34
+ });
35
+ };
36
+
37
+ export default defaultRenderEmpty;
@@ -0,0 +1,9 @@
1
+ import * as React from 'react';
2
+ export declare type SizeType = 'small' | 'middle' | 'large' | undefined;
3
+ declare const SizeContext: React.Context<"small" | "large" | "middle" | undefined>;
4
+ export interface ISizeContextProps {
5
+ size?: SizeType;
6
+ children?: React.ReactNode;
7
+ }
8
+ export declare const SizeContextProvider: React.FC<ISizeContextProps>;
9
+ export default SizeContext;
@@ -0,0 +1,12 @@
1
+ import * as React from 'react';
2
+ var SizeContext = /*#__PURE__*/React.createContext(undefined);
3
+ export var SizeContextProvider = function SizeContextProvider(_ref) {
4
+ var children = _ref.children,
5
+ size = _ref.size;
6
+ return /*#__PURE__*/React.createElement(SizeContext.Consumer, null, function (originSize) {
7
+ return /*#__PURE__*/React.createElement(SizeContext.Provider, {
8
+ value: size || originSize
9
+ }, children);
10
+ });
11
+ };
12
+ export default SizeContext;
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  declare const Empty: () => JSX.Element;
2
3
  export default Empty;
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  declare const Empty: () => JSX.Element;
2
3
  export default Empty;
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  declare const Empty: () => JSX.Element;
2
3
  export default Empty;
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  declare const Empty: () => JSX.Element;
2
3
  export default Empty;
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  declare const Empty: () => JSX.Element;
2
3
  export default Empty;
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  declare const Empty: () => JSX.Element;
2
3
  export default Empty;
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { GroupProps } from 'antd/lib/input';
2
3
  import { TSize } from '../Input';
3
4
  export interface IGroupProps extends Omit<GroupProps, 'size'> {
@@ -7,7 +7,7 @@ interface IShowCountProps {
7
7
  maxLength?: number;
8
8
  }) => string;
9
9
  }
10
- export declare type TSize = 'mini' | 'small' | 'middle' | 'large';
10
+ export declare type TSize = 'small' | 'middle' | 'large';
11
11
  export type { InputRef };
12
12
  declare type ChangeEventHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;
13
13
  export interface IInputProps extends Omit<InputProps, 'size' | 'id' | 'prefix' | 'allowClear' | 'disabled' | 'showCount' | 'maxLength' | 'value' | 'defaultValue' | 'onPressEnter' | 'onChange'> {
@@ -21,7 +21,6 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
21
21
  rest = _objectWithoutProperties(props, _excluded);
22
22
 
23
23
  return /*#__PURE__*/React.createElement(AntdInput, Object.assign({}, rest, {
24
- // @ts-ignore
25
24
  ref: ref,
26
25
  bordered: true,
27
26
  className: classnames('ald-input', "ald-input-".concat(getSizeType(size)), className),
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
2
  import { TextAreaProps, TextAreaRef } from 'antd/lib/input/TextArea';
3
+ import { TSize } from '../Input';
3
4
  export type { TextAreaRef };
4
- export interface ITextAreaProps extends Omit<TextAreaProps, 'onPressEnter'> {
5
+ export interface ITextAreaProps extends Omit<TextAreaProps, 'onPressEnter' | 'size'> {
5
6
  /**
6
7
  * @description 可以点击清除图标删除内容
7
8
  * @default false
@@ -53,6 +54,12 @@ export interface ITextAreaProps extends Omit<TextAreaProps, 'onPressEnter'> {
53
54
  * @type boolean
54
55
  */
55
56
  border?: boolean;
57
+ className?: string;
58
+ /**
59
+ * @description 尺寸大学
60
+ * @default middle
61
+ */
62
+ size?: TSize;
56
63
  }
57
64
  declare const _default: React.ForwardRefExoticComponent<ITextAreaProps & React.RefAttributes<TextAreaRef>>;
58
65
  export default _default;
@@ -1,4 +1,4 @@
1
- var _excluded = ["bordered"];
1
+ var _excluded = ["bordered", "size", "className"];
2
2
 
3
3
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
4
 
@@ -6,12 +6,19 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
6
6
 
7
7
  import React from 'react';
8
8
  import AntdTextArea from 'antd/lib/input/TextArea';
9
+ import classnames from 'classnames';
10
+ import { getSizeType } from '../Input';
9
11
  export default /*#__PURE__*/React.forwardRef(function (props, ref) {
10
12
  var _props$bordered = props.bordered,
11
13
  bordered = _props$bordered === void 0 ? true : _props$bordered,
14
+ _props$size = props.size,
15
+ size = _props$size === void 0 ? 'middle' : _props$size,
16
+ _props$className = props.className,
17
+ className = _props$className === void 0 ? '' : _props$className,
12
18
  rest = _objectWithoutProperties(props, _excluded);
13
19
 
14
20
  return /*#__PURE__*/React.createElement(AntdTextArea, Object.assign({}, rest, {
21
+ className: classnames('ald-input-textarea', "ald-input-textarea-".concat(getSizeType(size)), className),
15
22
  ref: ref,
16
23
  bordered: bordered
17
24
  }));
@@ -120,6 +120,7 @@
120
120
  color: @NL0;
121
121
  background-color: @input-bg-color;
122
122
  border-radius: 0;
123
+ box-shadow: none;
123
124
  caret-color: @B60;
124
125
 
125
126
  &::placeholder {
@@ -162,6 +163,10 @@
162
163
  border-color: @input-active-border-color;
163
164
  box-shadow: @input-box-shadow-active;
164
165
  }
166
+
167
+ .ant-input:hover {
168
+ box-shadow: none;
169
+ }
165
170
  }
166
171
 
167
172
  .ald-input {
@@ -330,3 +335,76 @@
330
335
  }
331
336
  }
332
337
  }
338
+
339
+ .ald-textarea-large {
340
+ padding: 5px 11px;
341
+ font-size: @font-size-large;
342
+ line-height: @line-height-large;
343
+ border-radius: @border-radius-large;
344
+ }
345
+
346
+ .ald-textarea-middle {
347
+ padding: 5px 11px;
348
+ font-size: @font-size-middle;
349
+ line-height: @line-height-middle;
350
+ border-radius: @border-radius-middle;
351
+ }
352
+
353
+ .ald-textarea-small {
354
+ padding: 5px 7px;
355
+ font-size: @font-size-small;
356
+ line-height: @line-height-small;
357
+ border-radius: @border-radius-small;
358
+ }
359
+
360
+ textarea.ald-input-textarea-large,
361
+ .ald-input-textarea-large .ant-input {
362
+ .ald-textarea-large();
363
+ }
364
+
365
+ textarea.ald-input-textarea-middle,
366
+ .ald-input-textarea-middle .ant-input {
367
+ .ald-textarea-middle();
368
+ }
369
+
370
+ textarea.ald-input-textarea-small,
371
+ .ald-input-textarea-small .ant-input {
372
+ .ald-textarea-small();
373
+ }
374
+
375
+ textarea.ald-input-textarea,
376
+ .ald-input-textarea .ant-input {
377
+ color: @NL0;
378
+ background: @BG97;
379
+ caret-color: @B60;
380
+
381
+ &:hover,
382
+ &:active,
383
+ &:focus {
384
+ border-color: @B60;
385
+ box-shadow: none;
386
+ }
387
+
388
+ ::placeholder {
389
+ color: @NL80;
390
+ }
391
+
392
+ &.ant-input-disabled {
393
+ color: @NL60;
394
+ background: @BG95;
395
+ cursor: initial;
396
+
397
+ &:hover,
398
+ &:active,
399
+ &:focus {
400
+ border-color: @NL90;
401
+ box-shadow: none;
402
+ }
403
+ }
404
+ }
405
+
406
+ .ant-input-textarea-show-count::after {
407
+ color: @NL50;
408
+ font-size: 11px;
409
+ line-height: 16px;
410
+ }
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { InputNumberProps } from 'antd';
2
3
  export default function InputNumber(props: InputNumberProps): JSX.Element;
3
4
  export type { InputNumberProps };
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { MenuDividerProps } from 'antd/lib/menu/MenuDivider';
2
3
  export interface IMenuDividerProps extends MenuDividerProps {
3
4
  }
@@ -29,7 +29,10 @@
29
29
  }
30
30
 
31
31
  .ant-modal-body {
32
+ max-height: 70vh;
32
33
  padding: 16px 36px;
34
+ overflow: auto;
35
+ overflow: overlay;
33
36
  }
34
37
 
35
38
  .ant-modal-footer {
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export interface IAppList {
2
3
  logoSrc: string;
3
4
  }
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { IMenuItem } from '../MenuItem';
2
3
  export type { IMenuItem } from '../MenuItem';
3
4
  interface IMenuProps {
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { PopoverProps } from 'antd';
2
3
  export type { PopoverProps };
3
4
  declare function Popover(props: PopoverProps): JSX.Element;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import { IRadioGroupProps } from '../../interface/radioGroup';
3
+ export declare const RadioGroupContext: React.Context<Pick<IRadioGroupProps, "type" | "defaultValue" | "onChange" | "value" | "size" | "radioGroupStyle"> & {
4
+ sliderRef?: React.RefObject<HTMLDivElement> | undefined;
5
+ }>;
6
+ export default function RadioGroup(props: IRadioGroupProps): JSX.Element;
@@ -0,0 +1,72 @@
1
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
2
+
3
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
+
5
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
6
+
7
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
8
+
9
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
10
+
11
+ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
12
+
13
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
14
+
15
+ import React, { createContext, useRef } from 'react';
16
+ import useMergedState from 'rc-util/lib/hooks/useMergedState';
17
+ import classNames from 'classnames';
18
+ export var RadioGroupContext = /*#__PURE__*/createContext({});
19
+ export default function RadioGroup(props) {
20
+ var children = props.children,
21
+ _props$radioGroupStyl = props.radioGroupStyle,
22
+ radioGroupStyle = _props$radioGroupStyl === void 0 ? 'border' : _props$radioGroupStyl,
23
+ _props$size = props.size,
24
+ size = _props$size === void 0 ? 'middle' : _props$size,
25
+ _props$type = props.type,
26
+ type = _props$type === void 0 ? 'radio' : _props$type,
27
+ className = props.className; // 滑块的ref
28
+
29
+ var sliderRef = useRef(null); // 该hooks与useState相同,但是当props中有value值时,优先使用value的值
30
+
31
+ var _useMergedState = useMergedState(props.defaultValue, {
32
+ value: props === null || props === void 0 ? void 0 : props.value
33
+ }),
34
+ _useMergedState2 = _slicedToArray(_useMergedState, 2),
35
+ value = _useMergedState2[0],
36
+ setValue = _useMergedState2[1];
37
+
38
+ var onRadioChange = function onRadioChange(ev) {
39
+ var lastValue = value;
40
+ var val = ev.target.value;
41
+ setValue(val);
42
+ var onChange = props.onChange;
43
+
44
+ if (onChange && val !== lastValue) {
45
+ onChange(ev);
46
+ }
47
+ };
48
+
49
+ var getWrapperClass = function getWrapperClass() {
50
+ var _classNames;
51
+
52
+ var isButton = ['button', 'iconButton'].includes(type);
53
+ var tempType = type === 'iconButton' ? 'icon-button' : type;
54
+ return classNames('ald-radio-group', className, "ald-radio-group-".concat(tempType), (_classNames = {}, _defineProperty(_classNames, "ald-radio-group-".concat(radioGroupStyle), isButton), _defineProperty(_classNames, "ald-radio-group-".concat(size), isButton), _classNames));
55
+ };
56
+
57
+ return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
58
+ value: {
59
+ onChange: onRadioChange,
60
+ value: value,
61
+ radioGroupStyle: radioGroupStyle,
62
+ size: size,
63
+ type: type,
64
+ sliderRef: sliderRef
65
+ }
66
+ }, /*#__PURE__*/React.createElement("div", {
67
+ className: getWrapperClass()
68
+ }, children, radioGroupStyle === 'filled' && type !== 'radio' ? /*#__PURE__*/React.createElement("div", {
69
+ className: "ald-radio-filled-slider",
70
+ ref: sliderRef
71
+ }) : null));
72
+ }
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import { IRadioProps } from '../../interface/radio';
3
+ export default function Radio(props: IRadioProps): JSX.Element;
@@ -0,0 +1,95 @@
1
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
2
+
3
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4
+
5
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
+
7
+ import classNames from 'classnames';
8
+ import React, { useContext, useEffect, useRef } from 'react';
9
+ import _ from 'lodash';
10
+ import { RadioGroupContext } from '../Group';
11
+ import { getUUID } from '../../../_utils/hooks/useId';
12
+ export default function Radio(props) {
13
+ var _props$value;
14
+
15
+ var groupContext = useContext(RadioGroupContext);
16
+ var labelRef = useRef(null);
17
+ var id = getUUID().toString();
18
+
19
+ var radioProps = _objectSpread({}, props);
20
+
21
+ if (!_.isEmpty(groupContext)) {
22
+ radioProps.disabled = props.disabled;
23
+ radioProps.checked = !props.disabled && groupContext.value === props.value;
24
+ } else {
25
+ radioProps.checked = !('checked' in props) ? props.defaultChecked : radioProps.checked;
26
+ } // 设置input外层盒子的class
27
+
28
+
29
+ var aldRadioClass = classNames('ald-radio', {
30
+ 'ald-radio-checked': radioProps.checked,
31
+ 'ald-radio-disabled': radioProps.disabled
32
+ }); // 根据属性设置最外层的class
33
+
34
+ var getWrapperClass = function getWrapperClass() {
35
+ var otherClass = '';
36
+
37
+ if (groupContext.type === 'button') {
38
+ if (groupContext.radioGroupStyle === 'filled') {
39
+ otherClass = 'ald-radio-button-wrapper-filled';
40
+ } else {
41
+ otherClass = 'ald-radio-button-wrapper-border';
42
+ }
43
+ } else if (groupContext.type === 'iconButton') {
44
+ if (groupContext.radioGroupStyle === 'filled') {
45
+ otherClass = 'ald-radio-icon-button-wrapper-filled';
46
+ } else {
47
+ otherClass = 'ald-radio-icon-button-wrapper-border';
48
+ }
49
+ } else {
50
+ // 当type未设置或者是radio时
51
+ otherClass = 'ald-radio-wrapper';
52
+ }
53
+
54
+ return classNames('ald-radio-label', otherClass, {
55
+ 'ald-radio-wrapper-checked': radioProps.checked,
56
+ 'ald-radio-wrapper-disabled': radioProps.disabled
57
+ });
58
+ }; // filled button模式下,更改滑块的位置
59
+
60
+
61
+ useEffect(function () {
62
+ var _groupContext$sliderR;
63
+
64
+ if (radioProps.checked && (groupContext === null || groupContext === void 0 ? void 0 : (_groupContext$sliderR = groupContext.sliderRef) === null || _groupContext$sliderR === void 0 ? void 0 : _groupContext$sliderR.current) && (labelRef === null || labelRef === void 0 ? void 0 : labelRef.current)) {
65
+ groupContext.sliderRef.current.style.left = "".concat(labelRef.current.offsetLeft, "px");
66
+ groupContext.sliderRef.current.style.width = "".concat(labelRef.current.offsetWidth, "px");
67
+ }
68
+ }, [groupContext.sliderRef, radioProps.checked]);
69
+
70
+ var onChange = function onChange(e) {
71
+ if (groupContext === null || groupContext === void 0 ? void 0 : groupContext.onChange) {
72
+ groupContext.onChange(e);
73
+ }
74
+ };
75
+
76
+ return /*#__PURE__*/React.createElement("label", {
77
+ className: getWrapperClass(),
78
+ htmlFor: id,
79
+ ref: labelRef
80
+ }, /*#__PURE__*/React.createElement("span", {
81
+ className: aldRadioClass
82
+ }, /*#__PURE__*/React.createElement("input", {
83
+ id: id,
84
+ type: "radio",
85
+ className: "ald-radio-input",
86
+ checked: radioProps.checked,
87
+ disabled: radioProps.disabled,
88
+ value: (_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.toString(),
89
+ onChange: onChange
90
+ }), /*#__PURE__*/React.createElement("span", {
91
+ className: "ald-radio-inner"
92
+ })), /*#__PURE__*/React.createElement("span", {
93
+ className: "ald-radio-desc"
94
+ }, props.children));
95
+ }
@@ -1,3 +1,10 @@
1
- import { Radio } from 'antd';
2
- export { RadioGroupButtonStyle, RadioGroupOptionType, RadioGroupProps, RadioGroupContextProps, RadioProps, RadioChangeEventTarget, RadioChangeEvent, } from 'antd/lib/radio';
1
+ /// <reference types="react" />
2
+ import RadioGroup from './components/Group';
3
+ import { IRadioProps } from './interface/radio';
4
+ export type { IRadioProps as RadioProps } from './interface/radio';
5
+ export type { IRadioGroupProps as RadioGroupProps } from './interface/radioGroup';
6
+ interface IRadioType extends React.FC<IRadioProps> {
7
+ Group: typeof RadioGroup;
8
+ }
9
+ declare const Radio: IRadioType;
3
10
  export default Radio;
package/es/Radio/index.js CHANGED
@@ -1,3 +1,5 @@
1
- import "antd/es/radio/style";
2
- import _Radio from "antd/es/radio";
3
- export default _Radio;
1
+ import InternalRadio from './components/Radio';
2
+ import RadioGroup from './components/Group';
3
+ var Radio = InternalRadio;
4
+ Radio.Group = RadioGroup;
5
+ export default Radio;
@@ -0,0 +1,24 @@
1
+ import { ReactNode } from 'react';
2
+ export interface IRadioProps {
3
+ /**
4
+ * @description 当前元素是否选中
5
+ * @default false
6
+ */
7
+ checked?: boolean;
8
+ /**
9
+ * @description 当前元素是否默认选中
10
+ * @default false
11
+ */
12
+ defaultChecked?: boolean;
13
+ /**
14
+ * @description 当前元素是否禁用
15
+ * @default false
16
+ */
17
+ disabled?: boolean;
18
+ /**
19
+ * @description 当前元素的value值,与Group中的value匹配
20
+ * @default -
21
+ */
22
+ value?: string | number | boolean;
23
+ children?: ReactNode[] | ReactNode;
24
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,42 @@
1
+ import { ReactNode } from 'react';
2
+ export declare type TRadioGroupStyle = 'border' | 'filled';
3
+ export declare type TRadioSize = 'large' | 'middle' | 'small' | 'default';
4
+ export declare type TRadioType = 'radio' | 'button' | 'iconButton';
5
+ export interface IRadioGroupProps {
6
+ /**
7
+ * @description 按钮组的样式 'border' | 'filled'
8
+ * @default 'border'
9
+ */
10
+ radioGroupStyle?: TRadioGroupStyle;
11
+ /**
12
+ * @description 按钮组的默认选项,按钮组为非受控组件请勿使用value设置默认值
13
+ * @default -
14
+ */
15
+ defaultValue?: string | number | boolean;
16
+ /**
17
+ * @description 设置按钮组的大小,有'large' | 'middle'('default') | 'small
18
+ * @default 'middle'
19
+ */
20
+ size?: TRadioSize;
21
+ /**
22
+ * @description 当按钮组为受控组件时,设置按钮组的当前选中的值
23
+ * @default -
24
+ */
25
+ value?: string | number | boolean;
26
+ /**
27
+ * @description 当按钮组选中值变化时的回调函数
28
+ * @default -
29
+ */
30
+ onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
31
+ /**
32
+ * @description 设置按钮组的类型 'radio' | 'button' | 'iconButton'
33
+ * @default 'radio'
34
+ */
35
+ type?: TRadioType;
36
+ /**
37
+ * @description 按钮组最外层盒子的类名
38
+ * @default -
39
+ */
40
+ className?: string;
41
+ children?: ReactNode[] | ReactNode;
42
+ }
@@ -0,0 +1 @@
1
+ export {};