@douyinfe/semi-ui 2.10.2-alpha.0 → 2.11.0-beta.1
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/checkbox/checkbox.tsx +16 -6
- package/datePicker/_story/datePicker.stories.js +48 -1
- package/datePicker/_story/v2/AutoFillTime.jsx +37 -0
- package/datePicker/_story/v2/InputFormat.jsx +29 -0
- package/datePicker/_story/v2/InputFormatConfirm.jsx +44 -0
- package/datePicker/_story/v2/InputFormatDisabled.jsx +27 -0
- package/datePicker/_story/v2/index.js +4 -0
- package/datePicker/dateInput.tsx +7 -0
- package/datePicker/datePicker.tsx +7 -11
- package/datePicker/monthsGrid.tsx +2 -1
- package/dist/css/semi.css +0 -1
- package/dist/umd/semi-ui.js +865 -518
- package/dist/umd/semi-ui.js.map +1 -1
- package/dist/umd/semi-ui.min.js +1 -1
- package/dist/umd/semi-ui.min.js.map +1 -1
- package/lib/cjs/checkbox/checkbox.d.ts +4 -0
- package/lib/cjs/checkbox/checkbox.js +23 -11
- package/lib/cjs/datePicker/dateInput.d.ts +1 -0
- package/lib/cjs/datePicker/dateInput.js +5 -3
- package/lib/cjs/datePicker/datePicker.js +9 -12
- package/lib/cjs/datePicker/monthsGrid.js +2 -1
- package/lib/cjs/radio/radio.d.ts +4 -0
- package/lib/cjs/radio/radio.js +26 -12
- package/lib/cjs/table/Body/BaseRow.d.ts +1 -0
- package/lib/cjs/table/Body/BaseRow.js +22 -0
- package/lib/cjs/tag/group.d.ts +3 -3
- package/lib/cjs/tooltip/index.d.ts +1 -0
- package/lib/cjs/tooltip/index.js +6 -1
- package/lib/es/checkbox/checkbox.d.ts +4 -0
- package/lib/es/checkbox/checkbox.js +23 -11
- package/lib/es/datePicker/dateInput.d.ts +1 -0
- package/lib/es/datePicker/dateInput.js +5 -3
- package/lib/es/datePicker/datePicker.js +9 -12
- package/lib/es/datePicker/monthsGrid.js +2 -1
- package/lib/es/radio/radio.d.ts +4 -0
- package/lib/es/radio/radio.js +26 -12
- package/lib/es/table/Body/BaseRow.d.ts +1 -0
- package/lib/es/table/Body/BaseRow.js +22 -0
- package/lib/es/tag/group.d.ts +3 -3
- package/lib/es/tooltip/index.d.ts +1 -0
- package/lib/es/tooltip/index.js +6 -1
- package/package.json +9 -9
- package/radio/radio.tsx +17 -7
- package/scrollList/_story/ScrollList/index.js +1 -1
- package/select/index.tsx +7 -7
- package/table/Body/BaseRow.tsx +15 -0
- package/tag/group.tsx +4 -4
- package/tooltip/index.tsx +5 -1
- package/treeSelect/index.tsx +1 -1
- package/upload/_story/upload.stories.js +1 -0
|
@@ -22,9 +22,13 @@ export interface CheckboxProps extends BaseCheckboxProps {
|
|
|
22
22
|
'aria-label'?: React.AriaAttributes['aria-label'];
|
|
23
23
|
role?: React.HTMLAttributes<HTMLSpanElement>['role'];
|
|
24
24
|
tabIndex?: number;
|
|
25
|
+
addonId?: string;
|
|
26
|
+
extraId?: string;
|
|
25
27
|
}
|
|
26
28
|
interface CheckboxState {
|
|
27
29
|
checked: boolean;
|
|
30
|
+
addonId?: string;
|
|
31
|
+
extraId?: string;
|
|
28
32
|
}
|
|
29
33
|
declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
|
|
30
34
|
static contextType: React.Context<CheckboxContextType>;
|
|
@@ -51,15 +51,11 @@ class Checkbox extends _baseComponent.default {
|
|
|
51
51
|
|
|
52
52
|
const checked = false;
|
|
53
53
|
this.state = {
|
|
54
|
-
checked: props.checked || props.defaultChecked || checked
|
|
54
|
+
checked: props.checked || props.defaultChecked || checked,
|
|
55
|
+
addonId: props.addonId,
|
|
56
|
+
extraId: props.extraId
|
|
55
57
|
};
|
|
56
58
|
this.checkboxEntity = null;
|
|
57
|
-
this.addonId = (0, _uuid.getUuidShort)({
|
|
58
|
-
prefix: 'addon'
|
|
59
|
-
});
|
|
60
|
-
this.extraId = (0, _uuid.getUuidShort)({
|
|
61
|
-
prefix: 'extra'
|
|
62
|
-
});
|
|
63
59
|
this.foundation = new _checkboxFoundation.default(this.adapter);
|
|
64
60
|
}
|
|
65
61
|
|
|
@@ -81,7 +77,21 @@ class Checkbox extends _baseComponent.default {
|
|
|
81
77
|
notifyGroupChange: cbContent => {
|
|
82
78
|
this.context.checkboxGroup.onChange(cbContent);
|
|
83
79
|
},
|
|
84
|
-
getGroupDisabled: () => this.context && this.context.checkboxGroup.disabled
|
|
80
|
+
getGroupDisabled: () => this.context && this.context.checkboxGroup.disabled,
|
|
81
|
+
setAddonId: () => {
|
|
82
|
+
this.setState({
|
|
83
|
+
addonId: (0, _uuid.getUuidShort)({
|
|
84
|
+
prefix: 'addon'
|
|
85
|
+
})
|
|
86
|
+
});
|
|
87
|
+
},
|
|
88
|
+
setExtraId: () => {
|
|
89
|
+
this.setState({
|
|
90
|
+
extraId: (0, _uuid.getUuidShort)({
|
|
91
|
+
prefix: 'extra'
|
|
92
|
+
})
|
|
93
|
+
});
|
|
94
|
+
}
|
|
85
95
|
});
|
|
86
96
|
}
|
|
87
97
|
|
|
@@ -124,7 +134,9 @@ class Checkbox extends _baseComponent.default {
|
|
|
124
134
|
id
|
|
125
135
|
} = this.props;
|
|
126
136
|
const {
|
|
127
|
-
checked
|
|
137
|
+
checked,
|
|
138
|
+
addonId,
|
|
139
|
+
extraId
|
|
128
140
|
} = this.state;
|
|
129
141
|
const props = {
|
|
130
142
|
checked,
|
|
@@ -171,10 +183,10 @@ class Checkbox extends _baseComponent.default {
|
|
|
171
183
|
});
|
|
172
184
|
|
|
173
185
|
const renderContent = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children ? /*#__PURE__*/_react.default.createElement("span", {
|
|
174
|
-
id:
|
|
186
|
+
id: addonId,
|
|
175
187
|
className: "".concat(prefix, "-addon")
|
|
176
188
|
}, children) : null, extra ? /*#__PURE__*/_react.default.createElement("div", {
|
|
177
|
-
id:
|
|
189
|
+
id: extraId,
|
|
178
190
|
className: extraCls
|
|
179
191
|
}, extra) : null);
|
|
180
192
|
|
|
@@ -43,6 +43,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
|
|
|
43
43
|
rangeSeparator: PropTypes.Requireable<string>;
|
|
44
44
|
insetInput: PropTypes.Requireable<boolean>;
|
|
45
45
|
insetInputValue: PropTypes.Requireable<object>;
|
|
46
|
+
defaultPickerValue: PropTypes.Requireable<string | number | object>;
|
|
46
47
|
};
|
|
47
48
|
static defaultProps: {
|
|
48
49
|
showClear: boolean;
|
|
@@ -396,9 +396,10 @@ class DateInput extends _baseComponent.default {
|
|
|
396
396
|
rangeInputFocus,
|
|
397
397
|
rangeSeparator,
|
|
398
398
|
insetInput,
|
|
399
|
-
insetInputValue
|
|
399
|
+
insetInputValue,
|
|
400
|
+
defaultPickerValue
|
|
400
401
|
} = _a,
|
|
401
|
-
rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator", "insetInput", "insetInputValue"]);
|
|
402
|
+
rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator", "insetInput", "insetInputValue", "defaultPickerValue"]);
|
|
402
403
|
|
|
403
404
|
const dateIcon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendar, {
|
|
404
405
|
"aria-hidden": true
|
|
@@ -484,7 +485,8 @@ DateInput.propTypes = {
|
|
|
484
485
|
rangeInputEndRef: _propTypes.default.object,
|
|
485
486
|
rangeSeparator: _propTypes.default.string,
|
|
486
487
|
insetInput: _propTypes.default.bool,
|
|
487
|
-
insetInputValue: _propTypes.default.object
|
|
488
|
+
insetInputValue: _propTypes.default.object,
|
|
489
|
+
defaultPickerValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object, _propTypes.default.array])
|
|
488
490
|
};
|
|
489
491
|
DateInput.defaultProps = {
|
|
490
492
|
showClear: true,
|
|
@@ -189,7 +189,8 @@ class DatePicker extends _baseComponent.default {
|
|
|
189
189
|
insetInput,
|
|
190
190
|
type,
|
|
191
191
|
format,
|
|
192
|
-
rangeSeparator
|
|
192
|
+
rangeSeparator,
|
|
193
|
+
defaultPickerValue
|
|
193
194
|
} = this.props;
|
|
194
195
|
const {
|
|
195
196
|
insetInputValue,
|
|
@@ -211,7 +212,8 @@ class DatePicker extends _baseComponent.default {
|
|
|
211
212
|
onInsetInputChange: this.handleInsetInputChange,
|
|
212
213
|
rangeInputStartRef: this.rangeInputStartRef,
|
|
213
214
|
rangeInputEndRef: this.rangeInputEndRef,
|
|
214
|
-
density
|
|
215
|
+
density,
|
|
216
|
+
defaultPickerValue
|
|
215
217
|
};
|
|
216
218
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
217
219
|
ref: this.panelRef,
|
|
@@ -576,18 +578,11 @@ class DatePicker extends _baseComponent.default {
|
|
|
576
578
|
insetInput
|
|
577
579
|
} = this.props;
|
|
578
580
|
const {
|
|
579
|
-
value,
|
|
580
581
|
cachedSelectedValue,
|
|
581
582
|
motionEnd,
|
|
582
583
|
rangeInputFocus
|
|
583
|
-
} = this.state;
|
|
584
|
-
|
|
585
|
-
let defaultValue = value;
|
|
586
|
-
|
|
587
|
-
if (this.adapter.needConfirm()) {
|
|
588
|
-
defaultValue = cachedSelectedValue;
|
|
589
|
-
}
|
|
590
|
-
|
|
584
|
+
} = this.state;
|
|
585
|
+
const defaultValue = cachedSelectedValue;
|
|
591
586
|
return /*#__PURE__*/_react.default.createElement(_monthsGrid.default, {
|
|
592
587
|
ref: this.monthGrid,
|
|
593
588
|
locale: locale,
|
|
@@ -659,7 +654,8 @@ class DatePicker extends _baseComponent.default {
|
|
|
659
654
|
size,
|
|
660
655
|
inputReadOnly,
|
|
661
656
|
rangeSeparator,
|
|
662
|
-
insetInput
|
|
657
|
+
insetInput,
|
|
658
|
+
defaultPickerValue
|
|
663
659
|
} = this.props;
|
|
664
660
|
const {
|
|
665
661
|
value,
|
|
@@ -685,6 +681,7 @@ class DatePicker extends _baseComponent.default {
|
|
|
685
681
|
disabled: inputDisabled,
|
|
686
682
|
inputValue,
|
|
687
683
|
value: value,
|
|
684
|
+
defaultPickerValue,
|
|
688
685
|
onChange: this.handleInputChange,
|
|
689
686
|
onEnterPress: this.handleInputComplete,
|
|
690
687
|
// TODO: remove in next major version
|
|
@@ -263,7 +263,8 @@ class MonthsGrid extends _baseComponent.default {
|
|
|
263
263
|
} = this.props;
|
|
264
264
|
|
|
265
265
|
if (prevProps.defaultValue !== defaultValue) {
|
|
266
|
-
|
|
266
|
+
// we should always update panel state when value changes
|
|
267
|
+
this.foundation.updateSelectedFromProps(defaultValue);
|
|
267
268
|
}
|
|
268
269
|
|
|
269
270
|
if (prevProps.defaultPickerValue !== defaultPickerValue) {
|
package/lib/cjs/radio/radio.d.ts
CHANGED
|
@@ -29,9 +29,13 @@ export declare type RadioProps = {
|
|
|
29
29
|
addonClassName?: string;
|
|
30
30
|
type?: RadioType;
|
|
31
31
|
'aria-label'?: React.AriaAttributes['aria-label'];
|
|
32
|
+
addonId?: string;
|
|
33
|
+
extraId?: string;
|
|
32
34
|
};
|
|
33
35
|
export interface RadioState {
|
|
34
36
|
hover?: boolean;
|
|
37
|
+
addonId?: string;
|
|
38
|
+
extraId?: string;
|
|
35
39
|
}
|
|
36
40
|
export { RadioChangeEvent };
|
|
37
41
|
declare class Radio extends BaseComponent<RadioProps, RadioState> {
|
package/lib/cjs/radio/radio.js
CHANGED
|
@@ -67,16 +67,12 @@ class Radio extends _baseComponent.default {
|
|
|
67
67
|
};
|
|
68
68
|
|
|
69
69
|
this.state = {
|
|
70
|
-
hover: false
|
|
70
|
+
hover: false,
|
|
71
|
+
addonId: props.addonId,
|
|
72
|
+
extraId: props.extraId
|
|
71
73
|
};
|
|
72
74
|
this.foundation = new _radioFoundation.default(this.adapter);
|
|
73
75
|
this.radioEntity = null;
|
|
74
|
-
this.addonId = (0, _uuid.getUuidShort)({
|
|
75
|
-
prefix: 'addon'
|
|
76
|
-
});
|
|
77
|
-
this.extraId = (0, _uuid.getUuidShort)({
|
|
78
|
-
prefix: 'extra'
|
|
79
|
-
});
|
|
80
76
|
}
|
|
81
77
|
|
|
82
78
|
get adapter() {
|
|
@@ -85,6 +81,20 @@ class Radio extends _baseComponent.default {
|
|
|
85
81
|
this.setState({
|
|
86
82
|
hover
|
|
87
83
|
});
|
|
84
|
+
},
|
|
85
|
+
setAddonId: () => {
|
|
86
|
+
this.setState({
|
|
87
|
+
addonId: (0, _uuid.getUuidShort)({
|
|
88
|
+
prefix: 'addon'
|
|
89
|
+
})
|
|
90
|
+
});
|
|
91
|
+
},
|
|
92
|
+
setExtraId: () => {
|
|
93
|
+
this.setState({
|
|
94
|
+
extraId: (0, _uuid.getUuidShort)({
|
|
95
|
+
prefix: 'extra'
|
|
96
|
+
})
|
|
97
|
+
});
|
|
88
98
|
}
|
|
89
99
|
});
|
|
90
100
|
}
|
|
@@ -121,7 +131,11 @@ class Radio extends _baseComponent.default {
|
|
|
121
131
|
value: propValue
|
|
122
132
|
} = this.props;
|
|
123
133
|
let realChecked, isDisabled, realMode, isButtonRadioGroup, isCardRadioGroup, isPureCardRadioGroup, isButtonRadioComponent, buttonSize, realPrefixCls;
|
|
124
|
-
const
|
|
134
|
+
const {
|
|
135
|
+
hover: isHover,
|
|
136
|
+
addonId,
|
|
137
|
+
extraId
|
|
138
|
+
} = this.state;
|
|
125
139
|
let props = {};
|
|
126
140
|
|
|
127
141
|
if (this.isInGroup()) {
|
|
@@ -174,10 +188,10 @@ class Radio extends _baseComponent.default {
|
|
|
174
188
|
const renderContent = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children ? /*#__PURE__*/_react.default.createElement("span", {
|
|
175
189
|
className: addonCls,
|
|
176
190
|
style: addonStyle,
|
|
177
|
-
id:
|
|
191
|
+
id: addonId
|
|
178
192
|
}, children) : null, extra && !isButtonRadio ? /*#__PURE__*/_react.default.createElement("div", {
|
|
179
193
|
className: "".concat(prefix, "-extra"),
|
|
180
|
-
id:
|
|
194
|
+
id: extraId
|
|
181
195
|
}, extra) : null);
|
|
182
196
|
|
|
183
197
|
return /*#__PURE__*/_react.default.createElement("label", {
|
|
@@ -194,8 +208,8 @@ class Radio extends _baseComponent.default {
|
|
|
194
208
|
ref: ref => {
|
|
195
209
|
this.radioEntity = ref;
|
|
196
210
|
},
|
|
197
|
-
addonId: children &&
|
|
198
|
-
extraId: extra &&
|
|
211
|
+
addonId: children && addonId,
|
|
212
|
+
extraId: extra && extraId
|
|
199
213
|
})), isCardRadioGroup ? /*#__PURE__*/_react.default.createElement("div", {
|
|
200
214
|
className: "".concat(prefix, "-isCardRadioGroup_content")
|
|
201
215
|
}, renderContent()) : renderContent());
|
|
@@ -113,6 +113,7 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
|
|
|
113
113
|
get adapter(): TableRowAdapter<BaseRowProps>;
|
|
114
114
|
ref: React.MutableRefObject<any>;
|
|
115
115
|
constructor(props: BaseRowProps);
|
|
116
|
+
componentDidMount(): void;
|
|
116
117
|
shouldComponentUpdate(nextProps: BaseRowProps): boolean;
|
|
117
118
|
_cacheNode: (node: any) => void;
|
|
118
119
|
renderExpandIcon: (record: Record<string, any>) => React.ReactNode;
|
|
@@ -141,6 +141,28 @@ class TableRow extends _baseComponent.default {
|
|
|
141
141
|
});
|
|
142
142
|
}
|
|
143
143
|
|
|
144
|
+
componentDidMount() {
|
|
145
|
+
// fix #745
|
|
146
|
+
// didmount/willUnmount may be called twice when React.StrictMode is true in React 18, we need to ensure that this.cache.customRowProps is correct
|
|
147
|
+
const {
|
|
148
|
+
onRow,
|
|
149
|
+
index,
|
|
150
|
+
record
|
|
151
|
+
} = this.props;
|
|
152
|
+
const customRowProps = this.adapter.getCache('customRowProps');
|
|
153
|
+
|
|
154
|
+
if (typeof customRowProps === 'undefined') {
|
|
155
|
+
const _a = onRow(record, index) || {},
|
|
156
|
+
{
|
|
157
|
+
className: customClassName,
|
|
158
|
+
style: customStyle
|
|
159
|
+
} = _a,
|
|
160
|
+
rowProps = __rest(_a, ["className", "style"]);
|
|
161
|
+
|
|
162
|
+
this.adapter.setCache('customRowProps', (0, _assign.default)({}, rowProps));
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
144
166
|
shouldComponentUpdate(nextProps) {
|
|
145
167
|
/**
|
|
146
168
|
* Shallow comparison of incoming props to simulate PureComponent
|
package/lib/cjs/tag/group.d.ts
CHANGED
|
@@ -3,19 +3,19 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import Tag from './index';
|
|
4
4
|
import { PopoverProps } from '../popover/index';
|
|
5
5
|
import { AvatarShape, TagProps } from './interface';
|
|
6
|
-
export interface TagGroupProps {
|
|
6
|
+
export interface TagGroupProps<T> {
|
|
7
7
|
style?: React.CSSProperties;
|
|
8
8
|
className?: string;
|
|
9
9
|
maxTagCount?: number;
|
|
10
10
|
restCount?: number;
|
|
11
|
-
tagList?: (
|
|
11
|
+
tagList?: (T extends 'custom' ? React.ReactNode : TagProps)[];
|
|
12
12
|
size?: 'small' | 'large';
|
|
13
13
|
showPopover?: boolean;
|
|
14
14
|
popoverProps?: PopoverProps;
|
|
15
15
|
avatarShape?: AvatarShape;
|
|
16
16
|
mode?: string;
|
|
17
17
|
}
|
|
18
|
-
export default class TagGroup extends PureComponent<TagGroupProps
|
|
18
|
+
export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
|
|
19
19
|
static defaultProps: {
|
|
20
20
|
style: {};
|
|
21
21
|
className: string;
|
package/lib/cjs/tooltip/index.js
CHANGED
|
@@ -334,7 +334,7 @@ class Tooltip extends _baseComponent.default {
|
|
|
334
334
|
placement: props.position || 'top',
|
|
335
335
|
transitionStyle: {},
|
|
336
336
|
isPositionUpdated: false,
|
|
337
|
-
id:
|
|
337
|
+
id: props.wrapperId // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
|
|
338
338
|
|
|
339
339
|
};
|
|
340
340
|
this.foundation = new _foundation.default(this.adapter);
|
|
@@ -603,6 +603,11 @@ class Tooltip extends _baseComponent.default {
|
|
|
603
603
|
},
|
|
604
604
|
notifyEscKeydown: event => {
|
|
605
605
|
this.props.onEscKeyDown(event);
|
|
606
|
+
},
|
|
607
|
+
setId: () => {
|
|
608
|
+
this.setState({
|
|
609
|
+
id: (0, _uuid.getUuidShort)()
|
|
610
|
+
});
|
|
606
611
|
}
|
|
607
612
|
});
|
|
608
613
|
}
|
|
@@ -22,9 +22,13 @@ export interface CheckboxProps extends BaseCheckboxProps {
|
|
|
22
22
|
'aria-label'?: React.AriaAttributes['aria-label'];
|
|
23
23
|
role?: React.HTMLAttributes<HTMLSpanElement>['role'];
|
|
24
24
|
tabIndex?: number;
|
|
25
|
+
addonId?: string;
|
|
26
|
+
extraId?: string;
|
|
25
27
|
}
|
|
26
28
|
interface CheckboxState {
|
|
27
29
|
checked: boolean;
|
|
30
|
+
addonId?: string;
|
|
31
|
+
extraId?: string;
|
|
28
32
|
}
|
|
29
33
|
declare class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
|
|
30
34
|
static contextType: React.Context<CheckboxContextType>;
|
|
@@ -26,15 +26,11 @@ class Checkbox extends BaseComponent {
|
|
|
26
26
|
|
|
27
27
|
const checked = false;
|
|
28
28
|
this.state = {
|
|
29
|
-
checked: props.checked || props.defaultChecked || checked
|
|
29
|
+
checked: props.checked || props.defaultChecked || checked,
|
|
30
|
+
addonId: props.addonId,
|
|
31
|
+
extraId: props.extraId
|
|
30
32
|
};
|
|
31
33
|
this.checkboxEntity = null;
|
|
32
|
-
this.addonId = getUuidShort({
|
|
33
|
-
prefix: 'addon'
|
|
34
|
-
});
|
|
35
|
-
this.extraId = getUuidShort({
|
|
36
|
-
prefix: 'extra'
|
|
37
|
-
});
|
|
38
34
|
this.foundation = new CheckboxFoundation(this.adapter);
|
|
39
35
|
}
|
|
40
36
|
|
|
@@ -56,7 +52,21 @@ class Checkbox extends BaseComponent {
|
|
|
56
52
|
notifyGroupChange: cbContent => {
|
|
57
53
|
this.context.checkboxGroup.onChange(cbContent);
|
|
58
54
|
},
|
|
59
|
-
getGroupDisabled: () => this.context && this.context.checkboxGroup.disabled
|
|
55
|
+
getGroupDisabled: () => this.context && this.context.checkboxGroup.disabled,
|
|
56
|
+
setAddonId: () => {
|
|
57
|
+
this.setState({
|
|
58
|
+
addonId: getUuidShort({
|
|
59
|
+
prefix: 'addon'
|
|
60
|
+
})
|
|
61
|
+
});
|
|
62
|
+
},
|
|
63
|
+
setExtraId: () => {
|
|
64
|
+
this.setState({
|
|
65
|
+
extraId: getUuidShort({
|
|
66
|
+
prefix: 'extra'
|
|
67
|
+
})
|
|
68
|
+
});
|
|
69
|
+
}
|
|
60
70
|
});
|
|
61
71
|
}
|
|
62
72
|
|
|
@@ -99,7 +109,9 @@ class Checkbox extends BaseComponent {
|
|
|
99
109
|
id
|
|
100
110
|
} = this.props;
|
|
101
111
|
const {
|
|
102
|
-
checked
|
|
112
|
+
checked,
|
|
113
|
+
addonId,
|
|
114
|
+
extraId
|
|
103
115
|
} = this.state;
|
|
104
116
|
const props = {
|
|
105
117
|
checked,
|
|
@@ -147,10 +159,10 @@ class Checkbox extends BaseComponent {
|
|
|
147
159
|
});
|
|
148
160
|
|
|
149
161
|
const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
|
|
150
|
-
id:
|
|
162
|
+
id: addonId,
|
|
151
163
|
className: "".concat(prefix, "-addon")
|
|
152
164
|
}, children) : null, extra ? /*#__PURE__*/React.createElement("div", {
|
|
153
|
-
id:
|
|
165
|
+
id: extraId,
|
|
154
166
|
className: extraCls
|
|
155
167
|
}, extra) : null);
|
|
156
168
|
|
|
@@ -43,6 +43,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
|
|
|
43
43
|
rangeSeparator: PropTypes.Requireable<string>;
|
|
44
44
|
insetInput: PropTypes.Requireable<boolean>;
|
|
45
45
|
insetInputValue: PropTypes.Requireable<object>;
|
|
46
|
+
defaultPickerValue: PropTypes.Requireable<string | number | object>;
|
|
46
47
|
};
|
|
47
48
|
static defaultProps: {
|
|
48
49
|
showClear: boolean;
|
|
@@ -370,9 +370,10 @@ export default class DateInput extends BaseComponent {
|
|
|
370
370
|
rangeInputFocus,
|
|
371
371
|
rangeSeparator,
|
|
372
372
|
insetInput,
|
|
373
|
-
insetInputValue
|
|
373
|
+
insetInputValue,
|
|
374
|
+
defaultPickerValue
|
|
374
375
|
} = _a,
|
|
375
|
-
rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator", "insetInput", "insetInputValue"]);
|
|
376
|
+
rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator", "insetInput", "insetInputValue", "defaultPickerValue"]);
|
|
376
377
|
|
|
377
378
|
const dateIcon = /*#__PURE__*/React.createElement(IconCalendar, {
|
|
378
379
|
"aria-hidden": true
|
|
@@ -456,7 +457,8 @@ DateInput.propTypes = {
|
|
|
456
457
|
rangeInputEndRef: PropTypes.object,
|
|
457
458
|
rangeSeparator: PropTypes.string,
|
|
458
459
|
insetInput: PropTypes.bool,
|
|
459
|
-
insetInputValue: PropTypes.object
|
|
460
|
+
insetInputValue: PropTypes.object,
|
|
461
|
+
defaultPickerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object, PropTypes.array])
|
|
460
462
|
};
|
|
461
463
|
DateInput.defaultProps = {
|
|
462
464
|
showClear: true,
|
|
@@ -151,7 +151,8 @@ export default class DatePicker extends BaseComponent {
|
|
|
151
151
|
insetInput,
|
|
152
152
|
type,
|
|
153
153
|
format,
|
|
154
|
-
rangeSeparator
|
|
154
|
+
rangeSeparator,
|
|
155
|
+
defaultPickerValue
|
|
155
156
|
} = this.props;
|
|
156
157
|
const {
|
|
157
158
|
insetInputValue,
|
|
@@ -173,7 +174,8 @@ export default class DatePicker extends BaseComponent {
|
|
|
173
174
|
onInsetInputChange: this.handleInsetInputChange,
|
|
174
175
|
rangeInputStartRef: this.rangeInputStartRef,
|
|
175
176
|
rangeInputEndRef: this.rangeInputEndRef,
|
|
176
|
-
density
|
|
177
|
+
density,
|
|
178
|
+
defaultPickerValue
|
|
177
179
|
};
|
|
178
180
|
return /*#__PURE__*/React.createElement("div", {
|
|
179
181
|
ref: this.panelRef,
|
|
@@ -544,18 +546,11 @@ export default class DatePicker extends BaseComponent {
|
|
|
544
546
|
insetInput
|
|
545
547
|
} = this.props;
|
|
546
548
|
const {
|
|
547
|
-
value,
|
|
548
549
|
cachedSelectedValue,
|
|
549
550
|
motionEnd,
|
|
550
551
|
rangeInputFocus
|
|
551
|
-
} = this.state;
|
|
552
|
-
|
|
553
|
-
let defaultValue = value;
|
|
554
|
-
|
|
555
|
-
if (this.adapter.needConfirm()) {
|
|
556
|
-
defaultValue = cachedSelectedValue;
|
|
557
|
-
}
|
|
558
|
-
|
|
552
|
+
} = this.state;
|
|
553
|
+
const defaultValue = cachedSelectedValue;
|
|
559
554
|
return /*#__PURE__*/React.createElement(MonthsGrid, {
|
|
560
555
|
ref: this.monthGrid,
|
|
561
556
|
locale: locale,
|
|
@@ -627,7 +622,8 @@ export default class DatePicker extends BaseComponent {
|
|
|
627
622
|
size,
|
|
628
623
|
inputReadOnly,
|
|
629
624
|
rangeSeparator,
|
|
630
|
-
insetInput
|
|
625
|
+
insetInput,
|
|
626
|
+
defaultPickerValue
|
|
631
627
|
} = this.props;
|
|
632
628
|
const {
|
|
633
629
|
value,
|
|
@@ -653,6 +649,7 @@ export default class DatePicker extends BaseComponent {
|
|
|
653
649
|
disabled: inputDisabled,
|
|
654
650
|
inputValue,
|
|
655
651
|
value: value,
|
|
652
|
+
defaultPickerValue,
|
|
656
653
|
onChange: this.handleInputChange,
|
|
657
654
|
onEnterPress: this.handleInputComplete,
|
|
658
655
|
// TODO: remove in next major version
|
|
@@ -230,7 +230,8 @@ export default class MonthsGrid extends BaseComponent {
|
|
|
230
230
|
} = this.props;
|
|
231
231
|
|
|
232
232
|
if (prevProps.defaultValue !== defaultValue) {
|
|
233
|
-
|
|
233
|
+
// we should always update panel state when value changes
|
|
234
|
+
this.foundation.updateSelectedFromProps(defaultValue);
|
|
234
235
|
}
|
|
235
236
|
|
|
236
237
|
if (prevProps.defaultPickerValue !== defaultPickerValue) {
|
package/lib/es/radio/radio.d.ts
CHANGED
|
@@ -29,9 +29,13 @@ export declare type RadioProps = {
|
|
|
29
29
|
addonClassName?: string;
|
|
30
30
|
type?: RadioType;
|
|
31
31
|
'aria-label'?: React.AriaAttributes['aria-label'];
|
|
32
|
+
addonId?: string;
|
|
33
|
+
extraId?: string;
|
|
32
34
|
};
|
|
33
35
|
export interface RadioState {
|
|
34
36
|
hover?: boolean;
|
|
37
|
+
addonId?: string;
|
|
38
|
+
extraId?: string;
|
|
35
39
|
}
|
|
36
40
|
export { RadioChangeEvent };
|
|
37
41
|
declare class Radio extends BaseComponent<RadioProps, RadioState> {
|
package/lib/es/radio/radio.js
CHANGED
|
@@ -44,16 +44,12 @@ class Radio extends BaseComponent {
|
|
|
44
44
|
};
|
|
45
45
|
|
|
46
46
|
this.state = {
|
|
47
|
-
hover: false
|
|
47
|
+
hover: false,
|
|
48
|
+
addonId: props.addonId,
|
|
49
|
+
extraId: props.extraId
|
|
48
50
|
};
|
|
49
51
|
this.foundation = new RadioFoundation(this.adapter);
|
|
50
52
|
this.radioEntity = null;
|
|
51
|
-
this.addonId = getUuidShort({
|
|
52
|
-
prefix: 'addon'
|
|
53
|
-
});
|
|
54
|
-
this.extraId = getUuidShort({
|
|
55
|
-
prefix: 'extra'
|
|
56
|
-
});
|
|
57
53
|
}
|
|
58
54
|
|
|
59
55
|
get adapter() {
|
|
@@ -62,6 +58,20 @@ class Radio extends BaseComponent {
|
|
|
62
58
|
this.setState({
|
|
63
59
|
hover
|
|
64
60
|
});
|
|
61
|
+
},
|
|
62
|
+
setAddonId: () => {
|
|
63
|
+
this.setState({
|
|
64
|
+
addonId: getUuidShort({
|
|
65
|
+
prefix: 'addon'
|
|
66
|
+
})
|
|
67
|
+
});
|
|
68
|
+
},
|
|
69
|
+
setExtraId: () => {
|
|
70
|
+
this.setState({
|
|
71
|
+
extraId: getUuidShort({
|
|
72
|
+
prefix: 'extra'
|
|
73
|
+
})
|
|
74
|
+
});
|
|
65
75
|
}
|
|
66
76
|
});
|
|
67
77
|
}
|
|
@@ -98,7 +108,11 @@ class Radio extends BaseComponent {
|
|
|
98
108
|
value: propValue
|
|
99
109
|
} = this.props;
|
|
100
110
|
let realChecked, isDisabled, realMode, isButtonRadioGroup, isCardRadioGroup, isPureCardRadioGroup, isButtonRadioComponent, buttonSize, realPrefixCls;
|
|
101
|
-
const
|
|
111
|
+
const {
|
|
112
|
+
hover: isHover,
|
|
113
|
+
addonId,
|
|
114
|
+
extraId
|
|
115
|
+
} = this.state;
|
|
102
116
|
let props = {};
|
|
103
117
|
|
|
104
118
|
if (this.isInGroup()) {
|
|
@@ -151,10 +165,10 @@ class Radio extends BaseComponent {
|
|
|
151
165
|
const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
|
|
152
166
|
className: addonCls,
|
|
153
167
|
style: addonStyle,
|
|
154
|
-
id:
|
|
168
|
+
id: addonId
|
|
155
169
|
}, children) : null, extra && !isButtonRadio ? /*#__PURE__*/React.createElement("div", {
|
|
156
170
|
className: "".concat(prefix, "-extra"),
|
|
157
|
-
id:
|
|
171
|
+
id: extraId
|
|
158
172
|
}, extra) : null);
|
|
159
173
|
|
|
160
174
|
return /*#__PURE__*/React.createElement("label", {
|
|
@@ -171,8 +185,8 @@ class Radio extends BaseComponent {
|
|
|
171
185
|
ref: ref => {
|
|
172
186
|
this.radioEntity = ref;
|
|
173
187
|
},
|
|
174
|
-
addonId: children &&
|
|
175
|
-
extraId: extra &&
|
|
188
|
+
addonId: children && addonId,
|
|
189
|
+
extraId: extra && extraId
|
|
176
190
|
})), isCardRadioGroup ? /*#__PURE__*/React.createElement("div", {
|
|
177
191
|
className: "".concat(prefix, "-isCardRadioGroup_content")
|
|
178
192
|
}, renderContent()) : renderContent());
|
|
@@ -113,6 +113,7 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
|
|
|
113
113
|
get adapter(): TableRowAdapter<BaseRowProps>;
|
|
114
114
|
ref: React.MutableRefObject<any>;
|
|
115
115
|
constructor(props: BaseRowProps);
|
|
116
|
+
componentDidMount(): void;
|
|
116
117
|
shouldComponentUpdate(nextProps: BaseRowProps): boolean;
|
|
117
118
|
_cacheNode: (node: any) => void;
|
|
118
119
|
renderExpandIcon: (record: Record<string, any>) => React.ReactNode;
|