@douyinfe/semi-foundation 2.25.1 → 2.25.3
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/cascader/cascader.scss +8 -20
- package/datePicker/monthsGridFoundation.ts +36 -15
- package/lib/cjs/cascader/cascader.css +3 -3
- package/lib/cjs/cascader/cascader.scss +8 -20
- package/lib/cjs/datePicker/monthsGridFoundation.d.ts +12 -7
- package/lib/cjs/datePicker/monthsGridFoundation.js +20 -3
- package/lib/cjs/tagInput/tagInput.css +9 -0
- package/lib/cjs/tagInput/tagInput.scss +11 -0
- package/lib/cjs/tooltip/foundation.js +1 -1
- package/lib/cjs/tree/treeUtil.d.ts +1 -1
- package/lib/cjs/treeSelect/treeSelect.css +6 -8
- package/lib/cjs/treeSelect/treeSelect.scss +9 -19
- package/lib/es/cascader/cascader.css +3 -3
- package/lib/es/cascader/cascader.scss +8 -20
- package/lib/es/datePicker/monthsGridFoundation.d.ts +12 -7
- package/lib/es/datePicker/monthsGridFoundation.js +20 -3
- package/lib/es/tagInput/tagInput.css +9 -0
- package/lib/es/tagInput/tagInput.scss +11 -0
- package/lib/es/tooltip/foundation.js +1 -1
- package/lib/es/tree/treeUtil.d.ts +1 -1
- package/lib/es/treeSelect/treeSelect.css +6 -8
- package/lib/es/treeSelect/treeSelect.scss +9 -19
- package/package.json +2 -2
- package/tagInput/tagInput.scss +11 -0
- package/tooltip/foundation.ts +1 -1
- package/treeSelect/treeSelect.scss +9 -19
package/cascader/cascader.scss
CHANGED
|
@@ -161,22 +161,17 @@ $module: #{$prefix}-cascader;
|
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
.#{$prefix}-tagInput {
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
&-large {
|
|
174
|
-
min-height: $height-cascader_selection_tagInput_wrapper_large;
|
|
175
|
-
}
|
|
164
|
+
min-height: $height-cascader_selection_tagInput_wrapper_default;
|
|
165
|
+
|
|
166
|
+
&-small {
|
|
167
|
+
min-height: $height-cascader_selection_tagInput_wrapper_small;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
&-large {
|
|
171
|
+
min-height: $height-cascader_selection_tagInput_wrapper_large;
|
|
176
172
|
}
|
|
177
173
|
|
|
178
174
|
.#{$prefix}-input-wrapper {
|
|
179
|
-
// height: $height-cascader_selection_tagInput_input_default;
|
|
180
175
|
|
|
181
176
|
margin-left: $spacing-cascader_selection_input-marginLeft;
|
|
182
177
|
.#{$prefix}-input {
|
|
@@ -193,13 +188,6 @@ $module: #{$prefix}-cascader;
|
|
|
193
188
|
margin-bottom: $spacing-cascader_selection_tag-marginY;
|
|
194
189
|
}
|
|
195
190
|
}
|
|
196
|
-
|
|
197
|
-
// .#{$prefix}-input-wrapper-small {
|
|
198
|
-
// height: $height-cascader_selection_tagInput_input_small;
|
|
199
|
-
// }
|
|
200
|
-
// .#{$prefix}-input-wrapper-large {
|
|
201
|
-
// height: $height-cascader_selection_tagInput_input_large;
|
|
202
|
-
// }
|
|
203
191
|
}
|
|
204
192
|
|
|
205
193
|
&-text {
|
|
@@ -55,7 +55,8 @@ export type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'next
|
|
|
55
55
|
|
|
56
56
|
export interface MonthsGridFoundationProps extends MonthsGridElementProps {
|
|
57
57
|
type?: Type;
|
|
58
|
-
|
|
58
|
+
/** may be null if selection is not complete when type is dateRange or dateTimeRange */
|
|
59
|
+
defaultValue?: (Date | null)[];
|
|
59
60
|
defaultPickerValue?: ValueType;
|
|
60
61
|
multiple?: boolean;
|
|
61
62
|
max?: number;
|
|
@@ -96,7 +97,11 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
|
|
|
96
97
|
}
|
|
97
98
|
|
|
98
99
|
export interface MonthInfo {
|
|
100
|
+
/** The date displayed in the current date panel, update when switching year and month */
|
|
99
101
|
pickerDate: Date;
|
|
102
|
+
/**
|
|
103
|
+
* Default date or selected date (when selected)
|
|
104
|
+
*/
|
|
100
105
|
showDate: Date;
|
|
101
106
|
isTimePickerOpen: boolean;
|
|
102
107
|
isYearPickerOpen: boolean
|
|
@@ -167,22 +172,22 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
|
|
|
167
172
|
}
|
|
168
173
|
}
|
|
169
174
|
|
|
170
|
-
updateSelectedFromProps(values:
|
|
175
|
+
updateSelectedFromProps(values: (Date | null)[], refreshPicker = true) {
|
|
171
176
|
const type: Type = this.getProp('type');
|
|
172
177
|
const { selected, rangeStart, rangeEnd } = this.getStates();
|
|
173
|
-
if (values &&
|
|
178
|
+
if (values && values?.length) {
|
|
174
179
|
switch (type) {
|
|
175
180
|
case 'date':
|
|
176
|
-
this._initDatePickerFromValue(values
|
|
181
|
+
this._initDatePickerFromValue(values, refreshPicker);
|
|
177
182
|
break;
|
|
178
183
|
case 'dateRange':
|
|
179
|
-
this._initDateRangePickerFromValue(values
|
|
184
|
+
this._initDateRangePickerFromValue(values);
|
|
180
185
|
break;
|
|
181
186
|
case 'dateTime':
|
|
182
|
-
this._initDateTimePickerFromValue(values
|
|
187
|
+
this._initDateTimePickerFromValue(values);
|
|
183
188
|
break;
|
|
184
189
|
case 'dateTimeRange':
|
|
185
|
-
this._initDateTimeRangePickerFormValue(values
|
|
190
|
+
this._initDateTimeRangePickerFormValue(values);
|
|
186
191
|
break;
|
|
187
192
|
default:
|
|
188
193
|
break;
|
|
@@ -222,7 +227,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
|
|
|
222
227
|
}
|
|
223
228
|
}
|
|
224
229
|
|
|
225
|
-
_initDatePickerFromValue(values:
|
|
230
|
+
_initDatePickerFromValue(values: Date[], refreshPicker = true) {
|
|
226
231
|
const monthLeft = this.getState('monthLeft');
|
|
227
232
|
const newMonthLeft = { ...monthLeft };
|
|
228
233
|
// REMOVE:
|
|
@@ -244,16 +249,32 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
|
|
|
244
249
|
this._adapter.updateDaySelected(newSelected);
|
|
245
250
|
}
|
|
246
251
|
|
|
247
|
-
_initDateRangePickerFromValue(values:
|
|
252
|
+
_initDateRangePickerFromValue(values: (Date | null)[], withTime = false) {
|
|
248
253
|
// init month panel
|
|
249
|
-
const monthLeft = this.getState('monthLeft');
|
|
250
|
-
const monthRight = this.getState('monthRight');
|
|
254
|
+
const monthLeft = this.getState('monthLeft') as MonthsGridFoundationState['monthLeft'];
|
|
255
|
+
const monthRight = this.getState('monthRight') as MonthsGridFoundationState['monthRight'];
|
|
251
256
|
const adjustResult = this._autoAdjustMonth(
|
|
252
257
|
{ ...monthLeft, pickerDate: values[0] || monthLeft.pickerDate },
|
|
253
258
|
{ ...monthRight, pickerDate: values[1] || monthRight.pickerDate }
|
|
254
259
|
);
|
|
255
|
-
|
|
256
|
-
|
|
260
|
+
|
|
261
|
+
const validValue = Array.isArray(values) && values.filter(item => item).length > 1;
|
|
262
|
+
if (validValue) {
|
|
263
|
+
this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
|
|
264
|
+
this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
|
|
265
|
+
} else {
|
|
266
|
+
const selectedDate = values.find(item => item) as Date;
|
|
267
|
+
// 如果日期不完整且输入日期不在面板范围内,则更新面板
|
|
268
|
+
if (selectedDate) {
|
|
269
|
+
const notLeftMonth = selectedDate?.getMonth() !== monthLeft.pickerDate.getMonth();
|
|
270
|
+
const notRightMonth = selectedDate?.getMonth() !== monthRight.pickerDate.getMonth();
|
|
271
|
+
|
|
272
|
+
if (notLeftMonth && notRightMonth) {
|
|
273
|
+
this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
|
|
274
|
+
this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
}
|
|
257
278
|
|
|
258
279
|
// init range
|
|
259
280
|
const formatToken = withTime ? strings.FORMAT_DATE_TIME : strings.FORMAT_FULL_DATE;
|
|
@@ -268,11 +289,11 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
|
|
|
268
289
|
this._adapter.setHoverDay(rangeEnd);
|
|
269
290
|
}
|
|
270
291
|
|
|
271
|
-
_initDateTimePickerFromValue(values:
|
|
292
|
+
_initDateTimePickerFromValue(values: Date[]) {
|
|
272
293
|
this._initDatePickerFromValue(values);
|
|
273
294
|
}
|
|
274
295
|
|
|
275
|
-
_initDateTimeRangePickerFormValue(values:
|
|
296
|
+
_initDateTimeRangePickerFormValue(values: (Date | null)[]) {
|
|
276
297
|
this._initDateRangePickerFromValue(values, true);
|
|
277
298
|
}
|
|
278
299
|
|
|
@@ -136,13 +136,13 @@
|
|
|
136
136
|
background: transparent;
|
|
137
137
|
margin-left: -4px;
|
|
138
138
|
}
|
|
139
|
-
.semi-cascader-selection .semi-tagInput
|
|
139
|
+
.semi-cascader-selection .semi-tagInput {
|
|
140
140
|
min-height: 30px;
|
|
141
141
|
}
|
|
142
|
-
.semi-cascader-selection .semi-tagInput-
|
|
142
|
+
.semi-cascader-selection .semi-tagInput-small {
|
|
143
143
|
min-height: 22px;
|
|
144
144
|
}
|
|
145
|
-
.semi-cascader-selection .semi-tagInput-
|
|
145
|
+
.semi-cascader-selection .semi-tagInput-large {
|
|
146
146
|
min-height: 38px;
|
|
147
147
|
}
|
|
148
148
|
.semi-cascader-selection .semi-tagInput .semi-input-wrapper {
|
|
@@ -161,22 +161,17 @@ $module: #{$prefix}-cascader;
|
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
.#{$prefix}-tagInput {
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
&-large {
|
|
174
|
-
min-height: $height-cascader_selection_tagInput_wrapper_large;
|
|
175
|
-
}
|
|
164
|
+
min-height: $height-cascader_selection_tagInput_wrapper_default;
|
|
165
|
+
|
|
166
|
+
&-small {
|
|
167
|
+
min-height: $height-cascader_selection_tagInput_wrapper_small;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
&-large {
|
|
171
|
+
min-height: $height-cascader_selection_tagInput_wrapper_large;
|
|
176
172
|
}
|
|
177
173
|
|
|
178
174
|
.#{$prefix}-input-wrapper {
|
|
179
|
-
// height: $height-cascader_selection_tagInput_input_default;
|
|
180
175
|
|
|
181
176
|
margin-left: $spacing-cascader_selection_input-marginLeft;
|
|
182
177
|
.#{$prefix}-input {
|
|
@@ -193,13 +188,6 @@ $module: #{$prefix}-cascader;
|
|
|
193
188
|
margin-bottom: $spacing-cascader_selection_tag-marginY;
|
|
194
189
|
}
|
|
195
190
|
}
|
|
196
|
-
|
|
197
|
-
// .#{$prefix}-input-wrapper-small {
|
|
198
|
-
// height: $height-cascader_selection_tagInput_input_small;
|
|
199
|
-
// }
|
|
200
|
-
// .#{$prefix}-input-wrapper-large {
|
|
201
|
-
// height: $height-cascader_selection_tagInput_input_large;
|
|
202
|
-
// }
|
|
203
191
|
}
|
|
204
192
|
|
|
205
193
|
&-text {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import BaseFoundation, { DefaultAdapter } from '../base/foundation';
|
|
2
2
|
import { strings } from './constants';
|
|
3
3
|
import { WeekStartNumber } from './_utils/getMonthTable';
|
|
4
|
-
import {
|
|
4
|
+
import { PresetPosition, ValueType } from './foundation';
|
|
5
5
|
import { MonthDayInfo } from './monthFoundation';
|
|
6
6
|
import { ArrayElement } from '../utils/type';
|
|
7
7
|
declare type Type = ArrayElement<typeof strings.TYPE_SET>;
|
|
@@ -15,7 +15,8 @@ export declare type PanelType = 'left' | 'right';
|
|
|
15
15
|
export declare type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear';
|
|
16
16
|
export interface MonthsGridFoundationProps extends MonthsGridElementProps {
|
|
17
17
|
type?: Type;
|
|
18
|
-
|
|
18
|
+
/** may be null if selection is not complete when type is dateRange or dateTimeRange */
|
|
19
|
+
defaultValue?: (Date | null)[];
|
|
19
20
|
defaultPickerValue?: ValueType;
|
|
20
21
|
multiple?: boolean;
|
|
21
22
|
max?: number;
|
|
@@ -58,7 +59,11 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
|
|
|
58
59
|
renderDateInput?: any;
|
|
59
60
|
}
|
|
60
61
|
export interface MonthInfo {
|
|
62
|
+
/** The date displayed in the current date panel, update when switching year and month */
|
|
61
63
|
pickerDate: Date;
|
|
64
|
+
/**
|
|
65
|
+
* Default date or selected date (when selected)
|
|
66
|
+
*/
|
|
62
67
|
showDate: Date;
|
|
63
68
|
isTimePickerOpen: boolean;
|
|
64
69
|
isYearPickerOpen: boolean;
|
|
@@ -101,12 +106,12 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
|
|
|
101
106
|
constructor(adapter: MonthsGridAdapter);
|
|
102
107
|
init(): void;
|
|
103
108
|
initDefaultPickerValue(): void;
|
|
104
|
-
updateSelectedFromProps(values:
|
|
109
|
+
updateSelectedFromProps(values: (Date | null)[], refreshPicker?: boolean): void;
|
|
105
110
|
calcDisabledTime(panelType: PanelType): any;
|
|
106
|
-
_initDatePickerFromValue(values:
|
|
107
|
-
_initDateRangePickerFromValue(values:
|
|
108
|
-
_initDateTimePickerFromValue(values:
|
|
109
|
-
_initDateTimeRangePickerFormValue(values:
|
|
111
|
+
_initDatePickerFromValue(values: Date[], refreshPicker?: boolean): void;
|
|
112
|
+
_initDateRangePickerFromValue(values: (Date | null)[], withTime?: boolean): void;
|
|
113
|
+
_initDateTimePickerFromValue(values: Date[]): void;
|
|
114
|
+
_initDateTimeRangePickerFormValue(values: (Date | null)[]): void;
|
|
110
115
|
destroy(): void;
|
|
111
116
|
/**
|
|
112
117
|
* sync change another panel month when change months from the else yam panel
|
|
@@ -79,7 +79,7 @@ class MonthsGridFoundation extends _foundation.default {
|
|
|
79
79
|
rangeEnd
|
|
80
80
|
} = this.getStates();
|
|
81
81
|
|
|
82
|
-
if (values && values.length) {
|
|
82
|
+
if (values && (values === null || values === void 0 ? void 0 : values.length)) {
|
|
83
83
|
switch (type) {
|
|
84
84
|
case 'date':
|
|
85
85
|
this._initDatePickerFromValue(values, refreshPicker);
|
|
@@ -191,8 +191,25 @@ class MonthsGridFoundation extends _foundation.default {
|
|
|
191
191
|
pickerDate: values[1] || monthRight.pickerDate
|
|
192
192
|
}));
|
|
193
193
|
|
|
194
|
-
|
|
195
|
-
|
|
194
|
+
const validValue = Array.isArray(values) && values.filter(item => item).length > 1;
|
|
195
|
+
|
|
196
|
+
if (validValue) {
|
|
197
|
+
this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
|
|
198
|
+
this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
|
|
199
|
+
} else {
|
|
200
|
+
const selectedDate = values.find(item => item); // 如果日期不完整且输入日期不在面板范围内,则更新面板
|
|
201
|
+
|
|
202
|
+
if (selectedDate) {
|
|
203
|
+
const notLeftMonth = (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) !== monthLeft.pickerDate.getMonth();
|
|
204
|
+
const notRightMonth = (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) !== monthRight.pickerDate.getMonth();
|
|
205
|
+
|
|
206
|
+
if (notLeftMonth && notRightMonth) {
|
|
207
|
+
this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
|
|
208
|
+
this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
} // init range
|
|
212
|
+
|
|
196
213
|
|
|
197
214
|
const formatToken = withTime ? _constants.strings.FORMAT_DATE_TIME : _constants.strings.FORMAT_FULL_DATE;
|
|
198
215
|
let rangeStart = values[0] && (0, _dateFns.format)(values[0], formatToken);
|
|
@@ -208,6 +208,15 @@
|
|
|
208
208
|
.semi-tagInput-suffix-text {
|
|
209
209
|
color: var(--semi-color-text-2);
|
|
210
210
|
}
|
|
211
|
+
.semi-tagInput-tag-content-wrapper {
|
|
212
|
+
display: flex;
|
|
213
|
+
align-items: center;
|
|
214
|
+
}
|
|
215
|
+
.semi-tagInput-sortable-list {
|
|
216
|
+
display: flex;
|
|
217
|
+
flex-flow: row wrap;
|
|
218
|
+
width: 100%;
|
|
219
|
+
}
|
|
211
220
|
|
|
212
221
|
.semi-rtl .semi-tagInput,
|
|
213
222
|
.semi-portal-rtl .semi-tagInput {
|
|
@@ -259,6 +259,17 @@ $module: #{$prefix}-tagInput;
|
|
|
259
259
|
color: $color-tagInput_suffix-default;
|
|
260
260
|
}
|
|
261
261
|
}
|
|
262
|
+
|
|
263
|
+
&-tag-content-wrapper {
|
|
264
|
+
display: flex;
|
|
265
|
+
align-items: center;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
&-sortable-list {
|
|
269
|
+
display: flex;
|
|
270
|
+
flex-flow: row wrap;
|
|
271
|
+
width: 100%;
|
|
272
|
+
}
|
|
262
273
|
}
|
|
263
274
|
|
|
264
275
|
@import "./rtl.scss";
|
|
@@ -944,7 +944,7 @@ class Tooltip extends _foundation.default {
|
|
|
944
944
|
}
|
|
945
945
|
|
|
946
946
|
if (shouldReverseLeftSide && widthIsBigger) {
|
|
947
|
-
position = this._adjustPos(position
|
|
947
|
+
position = this._adjustPos(position);
|
|
948
948
|
}
|
|
949
949
|
|
|
950
950
|
if (isWidthOverFlow && (isViewXEnoughSideHalf || isContainerXEnoughSideHalf)) {
|
|
@@ -74,6 +74,6 @@ export declare function getValueOrKey(data: any): any;
|
|
|
74
74
|
export declare function normalizeValue(value: any, withObject: boolean): any;
|
|
75
75
|
export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
|
|
76
76
|
export declare function calcDisabledKeys(keyEntities: KeyEntities): Set<string>;
|
|
77
|
-
export declare function calcDropRelativePosition(event: any, treeNode: any):
|
|
77
|
+
export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
|
|
78
78
|
export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
|
|
79
79
|
export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;
|
|
@@ -139,20 +139,18 @@
|
|
|
139
139
|
.semi-tree-select-selection .semi-tagInput {
|
|
140
140
|
border: hidden;
|
|
141
141
|
background: transparent;
|
|
142
|
-
}
|
|
143
|
-
.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
|
|
144
|
-
padding-left: 4px;
|
|
145
|
-
padding-right: 4px;
|
|
146
|
-
}
|
|
147
|
-
.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-default {
|
|
148
142
|
min-height: 30px;
|
|
149
143
|
}
|
|
150
|
-
.semi-tree-select-selection .semi-tagInput
|
|
144
|
+
.semi-tree-select-selection .semi-tagInput-small {
|
|
151
145
|
min-height: 22px;
|
|
152
146
|
}
|
|
153
|
-
.semi-tree-select-selection .semi-tagInput
|
|
147
|
+
.semi-tree-select-selection .semi-tagInput-large {
|
|
154
148
|
min-height: 38px;
|
|
155
149
|
}
|
|
150
|
+
.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
|
|
151
|
+
padding-left: 4px;
|
|
152
|
+
padding-right: 4px;
|
|
153
|
+
}
|
|
156
154
|
.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper .semi-input {
|
|
157
155
|
padding-left: 0;
|
|
158
156
|
}
|
|
@@ -171,23 +171,20 @@ $module: #{$prefix}-tree-select;
|
|
|
171
171
|
.#{$prefix}-tagInput {
|
|
172
172
|
border: hidden;
|
|
173
173
|
background: transparent;
|
|
174
|
+
min-height: $height-treeSelect_selection_tagInput_wrapper_default;
|
|
175
|
+
|
|
176
|
+
&-small {
|
|
177
|
+
min-height: $height-treeSelect_selection_tagInput_wrapper_small;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&-large {
|
|
181
|
+
min-height: $height-treeSelect_selection_tagInput_wrapper_large;
|
|
182
|
+
}
|
|
174
183
|
|
|
175
184
|
.#{$prefix}-tagInput-wrapper {
|
|
176
185
|
padding-left: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
|
|
177
186
|
padding-right: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
|
|
178
187
|
|
|
179
|
-
&-default {
|
|
180
|
-
min-height: $height-treeSelect_selection_tagInput_wrapper_default;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
&-small {
|
|
184
|
-
min-height: $height-treeSelect_selection_tagInput_wrapper_small;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
&-large {
|
|
188
|
-
min-height: $height-treeSelect_selection_tagInput_wrapper_large;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
188
|
.#{$prefix}-input-wrapper {
|
|
192
189
|
// height: $height-treeSelect_selection_tagInput_input_default;
|
|
193
190
|
|
|
@@ -205,13 +202,6 @@ $module: #{$prefix}-tree-select;
|
|
|
205
202
|
margin-bottom: $spacing-treeSelect_tag-marginY;
|
|
206
203
|
}
|
|
207
204
|
}
|
|
208
|
-
|
|
209
|
-
// .#{$prefix}-input-wrapper-small {
|
|
210
|
-
// height: $height-treeSelect_selection_tagInput_input_small;
|
|
211
|
-
// }
|
|
212
|
-
// .#{$prefix}-input-wrapper-large {
|
|
213
|
-
// height: $height-treeSelect_selection_tagInput_input_large;
|
|
214
|
-
// }
|
|
215
205
|
}
|
|
216
206
|
}
|
|
217
207
|
}
|
|
@@ -136,13 +136,13 @@
|
|
|
136
136
|
background: transparent;
|
|
137
137
|
margin-left: -4px;
|
|
138
138
|
}
|
|
139
|
-
.semi-cascader-selection .semi-tagInput
|
|
139
|
+
.semi-cascader-selection .semi-tagInput {
|
|
140
140
|
min-height: 30px;
|
|
141
141
|
}
|
|
142
|
-
.semi-cascader-selection .semi-tagInput-
|
|
142
|
+
.semi-cascader-selection .semi-tagInput-small {
|
|
143
143
|
min-height: 22px;
|
|
144
144
|
}
|
|
145
|
-
.semi-cascader-selection .semi-tagInput-
|
|
145
|
+
.semi-cascader-selection .semi-tagInput-large {
|
|
146
146
|
min-height: 38px;
|
|
147
147
|
}
|
|
148
148
|
.semi-cascader-selection .semi-tagInput .semi-input-wrapper {
|
|
@@ -161,22 +161,17 @@ $module: #{$prefix}-cascader;
|
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
.#{$prefix}-tagInput {
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
&-large {
|
|
174
|
-
min-height: $height-cascader_selection_tagInput_wrapper_large;
|
|
175
|
-
}
|
|
164
|
+
min-height: $height-cascader_selection_tagInput_wrapper_default;
|
|
165
|
+
|
|
166
|
+
&-small {
|
|
167
|
+
min-height: $height-cascader_selection_tagInput_wrapper_small;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
&-large {
|
|
171
|
+
min-height: $height-cascader_selection_tagInput_wrapper_large;
|
|
176
172
|
}
|
|
177
173
|
|
|
178
174
|
.#{$prefix}-input-wrapper {
|
|
179
|
-
// height: $height-cascader_selection_tagInput_input_default;
|
|
180
175
|
|
|
181
176
|
margin-left: $spacing-cascader_selection_input-marginLeft;
|
|
182
177
|
.#{$prefix}-input {
|
|
@@ -193,13 +188,6 @@ $module: #{$prefix}-cascader;
|
|
|
193
188
|
margin-bottom: $spacing-cascader_selection_tag-marginY;
|
|
194
189
|
}
|
|
195
190
|
}
|
|
196
|
-
|
|
197
|
-
// .#{$prefix}-input-wrapper-small {
|
|
198
|
-
// height: $height-cascader_selection_tagInput_input_small;
|
|
199
|
-
// }
|
|
200
|
-
// .#{$prefix}-input-wrapper-large {
|
|
201
|
-
// height: $height-cascader_selection_tagInput_input_large;
|
|
202
|
-
// }
|
|
203
191
|
}
|
|
204
192
|
|
|
205
193
|
&-text {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import BaseFoundation, { DefaultAdapter } from '../base/foundation';
|
|
2
2
|
import { strings } from './constants';
|
|
3
3
|
import { WeekStartNumber } from './_utils/getMonthTable';
|
|
4
|
-
import {
|
|
4
|
+
import { PresetPosition, ValueType } from './foundation';
|
|
5
5
|
import { MonthDayInfo } from './monthFoundation';
|
|
6
6
|
import { ArrayElement } from '../utils/type';
|
|
7
7
|
declare type Type = ArrayElement<typeof strings.TYPE_SET>;
|
|
@@ -15,7 +15,8 @@ export declare type PanelType = 'left' | 'right';
|
|
|
15
15
|
export declare type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear';
|
|
16
16
|
export interface MonthsGridFoundationProps extends MonthsGridElementProps {
|
|
17
17
|
type?: Type;
|
|
18
|
-
|
|
18
|
+
/** may be null if selection is not complete when type is dateRange or dateTimeRange */
|
|
19
|
+
defaultValue?: (Date | null)[];
|
|
19
20
|
defaultPickerValue?: ValueType;
|
|
20
21
|
multiple?: boolean;
|
|
21
22
|
max?: number;
|
|
@@ -58,7 +59,11 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
|
|
|
58
59
|
renderDateInput?: any;
|
|
59
60
|
}
|
|
60
61
|
export interface MonthInfo {
|
|
62
|
+
/** The date displayed in the current date panel, update when switching year and month */
|
|
61
63
|
pickerDate: Date;
|
|
64
|
+
/**
|
|
65
|
+
* Default date or selected date (when selected)
|
|
66
|
+
*/
|
|
62
67
|
showDate: Date;
|
|
63
68
|
isTimePickerOpen: boolean;
|
|
64
69
|
isYearPickerOpen: boolean;
|
|
@@ -101,12 +106,12 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
|
|
|
101
106
|
constructor(adapter: MonthsGridAdapter);
|
|
102
107
|
init(): void;
|
|
103
108
|
initDefaultPickerValue(): void;
|
|
104
|
-
updateSelectedFromProps(values:
|
|
109
|
+
updateSelectedFromProps(values: (Date | null)[], refreshPicker?: boolean): void;
|
|
105
110
|
calcDisabledTime(panelType: PanelType): any;
|
|
106
|
-
_initDatePickerFromValue(values:
|
|
107
|
-
_initDateRangePickerFromValue(values:
|
|
108
|
-
_initDateTimePickerFromValue(values:
|
|
109
|
-
_initDateTimeRangePickerFormValue(values:
|
|
111
|
+
_initDatePickerFromValue(values: Date[], refreshPicker?: boolean): void;
|
|
112
|
+
_initDateRangePickerFromValue(values: (Date | null)[], withTime?: boolean): void;
|
|
113
|
+
_initDateTimePickerFromValue(values: Date[]): void;
|
|
114
|
+
_initDateTimeRangePickerFormValue(values: (Date | null)[]): void;
|
|
110
115
|
destroy(): void;
|
|
111
116
|
/**
|
|
112
117
|
* sync change another panel month when change months from the else yam panel
|
|
@@ -58,7 +58,7 @@ export default class MonthsGridFoundation extends BaseFoundation {
|
|
|
58
58
|
rangeEnd
|
|
59
59
|
} = this.getStates();
|
|
60
60
|
|
|
61
|
-
if (values && values.length) {
|
|
61
|
+
if (values && (values === null || values === void 0 ? void 0 : values.length)) {
|
|
62
62
|
switch (type) {
|
|
63
63
|
case 'date':
|
|
64
64
|
this._initDatePickerFromValue(values, refreshPicker);
|
|
@@ -170,8 +170,25 @@ export default class MonthsGridFoundation extends BaseFoundation {
|
|
|
170
170
|
pickerDate: values[1] || monthRight.pickerDate
|
|
171
171
|
}));
|
|
172
172
|
|
|
173
|
-
|
|
174
|
-
|
|
173
|
+
const validValue = Array.isArray(values) && values.filter(item => item).length > 1;
|
|
174
|
+
|
|
175
|
+
if (validValue) {
|
|
176
|
+
this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
|
|
177
|
+
this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
|
|
178
|
+
} else {
|
|
179
|
+
const selectedDate = values.find(item => item); // 如果日期不完整且输入日期不在面板范围内,则更新面板
|
|
180
|
+
|
|
181
|
+
if (selectedDate) {
|
|
182
|
+
const notLeftMonth = (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) !== monthLeft.pickerDate.getMonth();
|
|
183
|
+
const notRightMonth = (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) !== monthRight.pickerDate.getMonth();
|
|
184
|
+
|
|
185
|
+
if (notLeftMonth && notRightMonth) {
|
|
186
|
+
this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
|
|
187
|
+
this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
} // init range
|
|
191
|
+
|
|
175
192
|
|
|
176
193
|
const formatToken = withTime ? strings.FORMAT_DATE_TIME : strings.FORMAT_FULL_DATE;
|
|
177
194
|
let rangeStart = values[0] && format(values[0], formatToken);
|
|
@@ -208,6 +208,15 @@
|
|
|
208
208
|
.semi-tagInput-suffix-text {
|
|
209
209
|
color: var(--semi-color-text-2);
|
|
210
210
|
}
|
|
211
|
+
.semi-tagInput-tag-content-wrapper {
|
|
212
|
+
display: flex;
|
|
213
|
+
align-items: center;
|
|
214
|
+
}
|
|
215
|
+
.semi-tagInput-sortable-list {
|
|
216
|
+
display: flex;
|
|
217
|
+
flex-flow: row wrap;
|
|
218
|
+
width: 100%;
|
|
219
|
+
}
|
|
211
220
|
|
|
212
221
|
.semi-rtl .semi-tagInput,
|
|
213
222
|
.semi-portal-rtl .semi-tagInput {
|
|
@@ -259,6 +259,17 @@ $module: #{$prefix}-tagInput;
|
|
|
259
259
|
color: $color-tagInput_suffix-default;
|
|
260
260
|
}
|
|
261
261
|
}
|
|
262
|
+
|
|
263
|
+
&-tag-content-wrapper {
|
|
264
|
+
display: flex;
|
|
265
|
+
align-items: center;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
&-sortable-list {
|
|
269
|
+
display: flex;
|
|
270
|
+
flex-flow: row wrap;
|
|
271
|
+
width: 100%;
|
|
272
|
+
}
|
|
262
273
|
}
|
|
263
274
|
|
|
264
275
|
@import "./rtl.scss";
|
|
@@ -934,7 +934,7 @@ export default class Tooltip extends BaseFoundation {
|
|
|
934
934
|
}
|
|
935
935
|
|
|
936
936
|
if (shouldReverseLeftSide && widthIsBigger) {
|
|
937
|
-
position = this._adjustPos(position
|
|
937
|
+
position = this._adjustPos(position);
|
|
938
938
|
}
|
|
939
939
|
|
|
940
940
|
if (isWidthOverFlow && (isViewXEnoughSideHalf || isContainerXEnoughSideHalf)) {
|
|
@@ -74,6 +74,6 @@ export declare function getValueOrKey(data: any): any;
|
|
|
74
74
|
export declare function normalizeValue(value: any, withObject: boolean): any;
|
|
75
75
|
export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
|
|
76
76
|
export declare function calcDisabledKeys(keyEntities: KeyEntities): Set<string>;
|
|
77
|
-
export declare function calcDropRelativePosition(event: any, treeNode: any):
|
|
77
|
+
export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
|
|
78
78
|
export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
|
|
79
79
|
export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;
|
|
@@ -139,20 +139,18 @@
|
|
|
139
139
|
.semi-tree-select-selection .semi-tagInput {
|
|
140
140
|
border: hidden;
|
|
141
141
|
background: transparent;
|
|
142
|
-
}
|
|
143
|
-
.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
|
|
144
|
-
padding-left: 4px;
|
|
145
|
-
padding-right: 4px;
|
|
146
|
-
}
|
|
147
|
-
.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-default {
|
|
148
142
|
min-height: 30px;
|
|
149
143
|
}
|
|
150
|
-
.semi-tree-select-selection .semi-tagInput
|
|
144
|
+
.semi-tree-select-selection .semi-tagInput-small {
|
|
151
145
|
min-height: 22px;
|
|
152
146
|
}
|
|
153
|
-
.semi-tree-select-selection .semi-tagInput
|
|
147
|
+
.semi-tree-select-selection .semi-tagInput-large {
|
|
154
148
|
min-height: 38px;
|
|
155
149
|
}
|
|
150
|
+
.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
|
|
151
|
+
padding-left: 4px;
|
|
152
|
+
padding-right: 4px;
|
|
153
|
+
}
|
|
156
154
|
.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper .semi-input {
|
|
157
155
|
padding-left: 0;
|
|
158
156
|
}
|
|
@@ -171,23 +171,20 @@ $module: #{$prefix}-tree-select;
|
|
|
171
171
|
.#{$prefix}-tagInput {
|
|
172
172
|
border: hidden;
|
|
173
173
|
background: transparent;
|
|
174
|
+
min-height: $height-treeSelect_selection_tagInput_wrapper_default;
|
|
175
|
+
|
|
176
|
+
&-small {
|
|
177
|
+
min-height: $height-treeSelect_selection_tagInput_wrapper_small;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&-large {
|
|
181
|
+
min-height: $height-treeSelect_selection_tagInput_wrapper_large;
|
|
182
|
+
}
|
|
174
183
|
|
|
175
184
|
.#{$prefix}-tagInput-wrapper {
|
|
176
185
|
padding-left: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
|
|
177
186
|
padding-right: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
|
|
178
187
|
|
|
179
|
-
&-default {
|
|
180
|
-
min-height: $height-treeSelect_selection_tagInput_wrapper_default;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
&-small {
|
|
184
|
-
min-height: $height-treeSelect_selection_tagInput_wrapper_small;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
&-large {
|
|
188
|
-
min-height: $height-treeSelect_selection_tagInput_wrapper_large;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
188
|
.#{$prefix}-input-wrapper {
|
|
192
189
|
// height: $height-treeSelect_selection_tagInput_input_default;
|
|
193
190
|
|
|
@@ -205,13 +202,6 @@ $module: #{$prefix}-tree-select;
|
|
|
205
202
|
margin-bottom: $spacing-treeSelect_tag-marginY;
|
|
206
203
|
}
|
|
207
204
|
}
|
|
208
|
-
|
|
209
|
-
// .#{$prefix}-input-wrapper-small {
|
|
210
|
-
// height: $height-treeSelect_selection_tagInput_input_small;
|
|
211
|
-
// }
|
|
212
|
-
// .#{$prefix}-input-wrapper-large {
|
|
213
|
-
// height: $height-treeSelect_selection_tagInput_input_large;
|
|
214
|
-
// }
|
|
215
205
|
}
|
|
216
206
|
}
|
|
217
207
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douyinfe/semi-foundation",
|
|
3
|
-
"version": "2.25.
|
|
3
|
+
"version": "2.25.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build:lib": "node ./scripts/compileLib.js",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"*.scss",
|
|
24
24
|
"*.css"
|
|
25
25
|
],
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "45218733f7850d503d11390c9eeb5853e2423fdb",
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@babel/plugin-transform-runtime": "^7.15.8",
|
|
29
29
|
"@babel/preset-env": "^7.15.8",
|
package/tagInput/tagInput.scss
CHANGED
|
@@ -259,6 +259,17 @@ $module: #{$prefix}-tagInput;
|
|
|
259
259
|
color: $color-tagInput_suffix-default;
|
|
260
260
|
}
|
|
261
261
|
}
|
|
262
|
+
|
|
263
|
+
&-tag-content-wrapper {
|
|
264
|
+
display: flex;
|
|
265
|
+
align-items: center;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
&-sortable-list {
|
|
269
|
+
display: flex;
|
|
270
|
+
flex-flow: row wrap;
|
|
271
|
+
width: 100%;
|
|
272
|
+
}
|
|
262
273
|
}
|
|
263
274
|
|
|
264
275
|
@import "./rtl.scss";
|
package/tooltip/foundation.ts
CHANGED
|
@@ -855,7 +855,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
|
|
|
855
855
|
position = this._adjustPos(position, true);
|
|
856
856
|
}
|
|
857
857
|
if (shouldReverseLeftSide && widthIsBigger) {
|
|
858
|
-
position = this._adjustPos(position
|
|
858
|
+
position = this._adjustPos(position);
|
|
859
859
|
}
|
|
860
860
|
if (isWidthOverFlow && (isViewXEnoughSideHalf || isContainerXEnoughSideHalf)) {
|
|
861
861
|
position = this._adjustPos(position, true, 'reduce');
|
|
@@ -171,23 +171,20 @@ $module: #{$prefix}-tree-select;
|
|
|
171
171
|
.#{$prefix}-tagInput {
|
|
172
172
|
border: hidden;
|
|
173
173
|
background: transparent;
|
|
174
|
+
min-height: $height-treeSelect_selection_tagInput_wrapper_default;
|
|
175
|
+
|
|
176
|
+
&-small {
|
|
177
|
+
min-height: $height-treeSelect_selection_tagInput_wrapper_small;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&-large {
|
|
181
|
+
min-height: $height-treeSelect_selection_tagInput_wrapper_large;
|
|
182
|
+
}
|
|
174
183
|
|
|
175
184
|
.#{$prefix}-tagInput-wrapper {
|
|
176
185
|
padding-left: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
|
|
177
186
|
padding-right: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
|
|
178
187
|
|
|
179
|
-
&-default {
|
|
180
|
-
min-height: $height-treeSelect_selection_tagInput_wrapper_default;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
&-small {
|
|
184
|
-
min-height: $height-treeSelect_selection_tagInput_wrapper_small;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
&-large {
|
|
188
|
-
min-height: $height-treeSelect_selection_tagInput_wrapper_large;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
188
|
.#{$prefix}-input-wrapper {
|
|
192
189
|
// height: $height-treeSelect_selection_tagInput_input_default;
|
|
193
190
|
|
|
@@ -205,13 +202,6 @@ $module: #{$prefix}-tree-select;
|
|
|
205
202
|
margin-bottom: $spacing-treeSelect_tag-marginY;
|
|
206
203
|
}
|
|
207
204
|
}
|
|
208
|
-
|
|
209
|
-
// .#{$prefix}-input-wrapper-small {
|
|
210
|
-
// height: $height-treeSelect_selection_tagInput_input_small;
|
|
211
|
-
// }
|
|
212
|
-
// .#{$prefix}-input-wrapper-large {
|
|
213
|
-
// height: $height-treeSelect_selection_tagInput_input_large;
|
|
214
|
-
// }
|
|
215
205
|
}
|
|
216
206
|
}
|
|
217
207
|
}
|