@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.
- package/es/Breadcrumb/index.d.ts +1 -0
- package/es/Checkbox/index.d.ts +1 -0
- package/es/ConfigProvider/defaultRenderEmpty.d.ts +4 -0
- package/es/ConfigProvider/defaultRenderEmpty.js +37 -0
- package/es/ConfigProvider/sizeContext.d.ts +9 -0
- package/es/ConfigProvider/sizeContext.js +12 -0
- package/es/Empty/image/Authority.d.ts +1 -0
- package/es/Empty/image/Dataspace.d.ts +1 -0
- package/es/Empty/image/Search.d.ts +1 -0
- package/es/Empty/image/Simple.d.ts +1 -0
- package/es/Empty/image/Worksheet.d.ts +1 -0
- package/es/Empty/image/empty.d.ts +1 -0
- package/es/Input/components/Group/index.d.ts +1 -0
- package/es/Input/components/Input/index.d.ts +1 -1
- package/es/Input/components/Input/index.js +0 -1
- package/es/Input/components/TextArea/index.d.ts +8 -1
- package/es/Input/components/TextArea/index.js +8 -1
- package/es/Input/style/index.less +78 -0
- package/es/InputNumber/index.d.ts +1 -0
- package/es/Menu/Divider.d.ts +1 -0
- package/es/Modal/style/index.less +3 -0
- package/es/Navigator/components/Header/index.d.ts +1 -0
- package/es/Navigator/components/Menu/index.d.ts +1 -0
- package/es/Popover/index.d.ts +1 -0
- package/es/Radio/components/Group/index.d.ts +6 -0
- package/es/Radio/components/Group/index.js +72 -0
- package/es/Radio/components/Radio/index.d.ts +3 -0
- package/es/Radio/components/Radio/index.js +95 -0
- package/es/Radio/index.d.ts +9 -2
- package/es/Radio/index.js +5 -3
- package/es/Radio/interface/radio.d.ts +24 -0
- package/es/Radio/interface/radio.js +1 -0
- package/es/Radio/interface/radioGroup.d.ts +42 -0
- package/es/Radio/interface/radioGroup.js +1 -0
- package/es/Radio/style/index.less +348 -0
- package/es/Select/index.js +1 -1
- package/es/Select/style/index.less +1 -0
- package/es/Steps/components/ProcessIcon/index.d.ts +1 -0
- package/es/Table/Table.d.ts +2 -1
- package/es/Table/Table.js +223 -330
- package/es/Table/components/Empty/index.d.ts +3 -0
- package/es/Table/components/Empty/index.js +17 -0
- package/es/Table/components/Loading/index.d.ts +3 -0
- package/es/Table/components/Loading/index.js +19 -0
- package/es/Table/components/TableBodyRowList/index.d.ts +13 -0
- package/es/Table/components/TableBodyRowList/index.js +89 -0
- package/es/Table/components/TableHead/index.d.ts +23 -0
- package/es/Table/components/TableHead/index.js +262 -0
- package/es/Table/constant.d.ts +1 -0
- package/es/Table/constant.js +1 -0
- package/es/Table/hooks/useFrame.d.ts +7 -0
- package/es/Table/hooks/useFrame.js +90 -0
- package/es/Table/hooks/useTableColumn.d.ts +28 -0
- package/es/Table/hooks/useTableColumn.js +53 -0
- package/es/Table/interface.d.ts +3 -2
- package/es/Table/style/index.less +33 -30
- package/es/Table/utils.d.ts +15 -0
- package/es/Table/utils.js +131 -0
- package/es/_utils/hooks/useId.d.ts +4 -0
- package/es/_utils/hooks/useId.js +23 -0
- package/es/index.d.ts +1 -1
- package/es/locale-provider/index.d.ts +5 -1
- package/es/style/index.d.ts +0 -1
- package/es/style/index.js +0 -1
- package/es/style/index.less +2 -2
- package/lib/Breadcrumb/index.d.ts +1 -0
- package/lib/Checkbox/index.d.ts +1 -0
- package/lib/ConfigProvider/defaultRenderEmpty.d.ts +4 -0
- package/lib/ConfigProvider/defaultRenderEmpty.js +55 -0
- package/lib/ConfigProvider/sizeContext.d.ts +9 -0
- package/lib/ConfigProvider/sizeContext.js +30 -0
- package/lib/Empty/image/Authority.d.ts +1 -0
- package/lib/Empty/image/Dataspace.d.ts +1 -0
- package/lib/Empty/image/Search.d.ts +1 -0
- package/lib/Empty/image/Simple.d.ts +1 -0
- package/lib/Empty/image/Worksheet.d.ts +1 -0
- package/lib/Empty/image/empty.d.ts +1 -0
- package/lib/Input/components/Group/index.d.ts +1 -0
- package/lib/Input/components/Input/index.d.ts +1 -1
- package/lib/Input/components/Input/index.js +0 -1
- package/lib/Input/components/TextArea/index.d.ts +8 -1
- package/lib/Input/components/TextArea/index.js +10 -1
- package/lib/Input/style/index.less +78 -0
- package/lib/InputNumber/index.d.ts +1 -0
- package/lib/Menu/Divider.d.ts +1 -0
- package/lib/Modal/style/index.less +3 -0
- package/lib/Navigator/components/Header/index.d.ts +1 -0
- package/lib/Navigator/components/Menu/index.d.ts +1 -0
- package/lib/Popover/index.d.ts +1 -0
- package/lib/Radio/components/Group/index.d.ts +6 -0
- package/lib/Radio/components/Group/index.js +93 -0
- package/lib/Radio/components/Radio/index.d.ts +3 -0
- package/lib/Radio/components/Radio/index.js +115 -0
- package/lib/Radio/index.d.ts +9 -2
- package/lib/Radio/index.js +5 -3
- package/lib/Radio/interface/radio.d.ts +24 -0
- package/lib/Radio/interface/radio.js +5 -0
- package/lib/Radio/interface/radioGroup.d.ts +42 -0
- package/lib/Radio/interface/radioGroup.js +5 -0
- package/lib/Radio/style/index.less +348 -0
- package/lib/Select/index.js +1 -1
- package/lib/Select/style/index.less +1 -0
- package/lib/Steps/components/ProcessIcon/index.d.ts +1 -0
- package/lib/Table/Table.d.ts +2 -1
- package/lib/Table/Table.js +228 -332
- package/lib/Table/components/Empty/index.d.ts +3 -0
- package/lib/Table/components/Empty/index.js +30 -0
- package/lib/Table/components/Loading/index.d.ts +3 -0
- package/lib/Table/components/Loading/index.js +33 -0
- package/lib/Table/components/TableBodyRowList/index.d.ts +13 -0
- package/lib/Table/components/TableBodyRowList/index.js +108 -0
- package/lib/Table/components/TableHead/index.d.ts +23 -0
- package/lib/Table/components/TableHead/index.js +286 -0
- package/lib/Table/constant.d.ts +1 -0
- package/lib/Table/constant.js +1 -0
- package/lib/Table/hooks/useFrame.d.ts +7 -0
- package/lib/Table/hooks/useFrame.js +98 -0
- package/lib/Table/hooks/useTableColumn.d.ts +28 -0
- package/lib/Table/hooks/useTableColumn.js +66 -0
- package/lib/Table/interface.d.ts +3 -2
- package/lib/Table/style/index.less +33 -30
- package/lib/Table/utils.d.ts +15 -0
- package/lib/Table/utils.js +147 -0
- package/lib/_utils/hooks/useId.d.ts +4 -0
- package/lib/_utils/hooks/useId.js +36 -0
- package/lib/index.d.ts +1 -1
- package/lib/locale-provider/index.d.ts +5 -1
- package/lib/style/index.d.ts +0 -1
- package/lib/style/index.js +0 -2
- package/lib/style/index.less +2 -2
- package/package.json +1 -1
package/es/Breadcrumb/index.d.ts
CHANGED
package/es/Checkbox/index.d.ts
CHANGED
|
@@ -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;
|
|
@@ -7,7 +7,7 @@ interface IShowCountProps {
|
|
|
7
7
|
maxLength?: number;
|
|
8
8
|
}) => string;
|
|
9
9
|
}
|
|
10
|
-
export declare type TSize = '
|
|
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
|
+
}
|
package/es/Menu/Divider.d.ts
CHANGED
package/es/Popover/index.d.ts
CHANGED
|
@@ -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,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
|
+
}
|
package/es/Radio/index.d.ts
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
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
|
|
2
|
-
import
|
|
3
|
-
|
|
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 {};
|