@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.
@@ -161,22 +161,17 @@ $module: #{$prefix}-cascader;
161
161
  }
162
162
 
163
163
  .#{$prefix}-tagInput {
164
- &-wrapper {
165
- &-default {
166
- min-height: $height-cascader_selection_tagInput_wrapper_default;
167
- }
168
-
169
- &-small {
170
- min-height: $height-cascader_selection_tagInput_wrapper_small;
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
- defaultValue?: ValueType;
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: ValueType, refreshPicker = true) {
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 && (values as BaseValueType[]).length) {
178
+ if (values && values?.length) {
174
179
  switch (type) {
175
180
  case 'date':
176
- this._initDatePickerFromValue(values as BaseValueType[], refreshPicker);
181
+ this._initDatePickerFromValue(values, refreshPicker);
177
182
  break;
178
183
  case 'dateRange':
179
- this._initDateRangePickerFromValue(values as BaseValueType[]);
184
+ this._initDateRangePickerFromValue(values);
180
185
  break;
181
186
  case 'dateTime':
182
- this._initDateTimePickerFromValue(values as BaseValueType[]);
187
+ this._initDateTimePickerFromValue(values);
183
188
  break;
184
189
  case 'dateTimeRange':
185
- this._initDateTimeRangePickerFormValue(values as BaseValueType[]);
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: BaseValueType[], refreshPicker = true) {
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: BaseValueType[], withTime = false) {
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
- this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
256
- this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
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: BaseValueType[]) {
292
+ _initDateTimePickerFromValue(values: Date[]) {
272
293
  this._initDatePickerFromValue(values);
273
294
  }
274
295
 
275
- _initDateTimeRangePickerFormValue(values: BaseValueType[]) {
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-wrapper-default {
139
+ .semi-cascader-selection .semi-tagInput {
140
140
  min-height: 30px;
141
141
  }
142
- .semi-cascader-selection .semi-tagInput-wrapper-small {
142
+ .semi-cascader-selection .semi-tagInput-small {
143
143
  min-height: 22px;
144
144
  }
145
- .semi-cascader-selection .semi-tagInput-wrapper-large {
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
- &-wrapper {
165
- &-default {
166
- min-height: $height-cascader_selection_tagInput_wrapper_default;
167
- }
168
-
169
- &-small {
170
- min-height: $height-cascader_selection_tagInput_wrapper_small;
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 { BaseValueType, PresetPosition, ValueType } from './foundation';
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
- defaultValue?: ValueType;
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: ValueType, refreshPicker?: boolean): void;
109
+ updateSelectedFromProps(values: (Date | null)[], refreshPicker?: boolean): void;
105
110
  calcDisabledTime(panelType: PanelType): any;
106
- _initDatePickerFromValue(values: BaseValueType[], refreshPicker?: boolean): void;
107
- _initDateRangePickerFromValue(values: BaseValueType[], withTime?: boolean): void;
108
- _initDateTimePickerFromValue(values: BaseValueType[]): void;
109
- _initDateTimeRangePickerFormValue(values: BaseValueType[]): void;
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
- this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
195
- this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate); // init range
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, true);
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): 1 | -1 | 0;
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 .semi-tagInput-wrapper-small {
144
+ .semi-tree-select-selection .semi-tagInput-small {
151
145
  min-height: 22px;
152
146
  }
153
- .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-large {
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-wrapper-default {
139
+ .semi-cascader-selection .semi-tagInput {
140
140
  min-height: 30px;
141
141
  }
142
- .semi-cascader-selection .semi-tagInput-wrapper-small {
142
+ .semi-cascader-selection .semi-tagInput-small {
143
143
  min-height: 22px;
144
144
  }
145
- .semi-cascader-selection .semi-tagInput-wrapper-large {
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
- &-wrapper {
165
- &-default {
166
- min-height: $height-cascader_selection_tagInput_wrapper_default;
167
- }
168
-
169
- &-small {
170
- min-height: $height-cascader_selection_tagInput_wrapper_small;
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 { BaseValueType, PresetPosition, ValueType } from './foundation';
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
- defaultValue?: ValueType;
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: ValueType, refreshPicker?: boolean): void;
109
+ updateSelectedFromProps(values: (Date | null)[], refreshPicker?: boolean): void;
105
110
  calcDisabledTime(panelType: PanelType): any;
106
- _initDatePickerFromValue(values: BaseValueType[], refreshPicker?: boolean): void;
107
- _initDateRangePickerFromValue(values: BaseValueType[], withTime?: boolean): void;
108
- _initDateTimePickerFromValue(values: BaseValueType[]): void;
109
- _initDateTimeRangePickerFormValue(values: BaseValueType[]): void;
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
- this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
174
- this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate); // init range
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, true);
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): 1 | -1 | 0;
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 .semi-tagInput-wrapper-small {
144
+ .semi-tree-select-selection .semi-tagInput-small {
151
145
  min-height: 22px;
152
146
  }
153
- .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-large {
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.1",
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": "571a51134e49bec30e4412b4eacd45dd35d3849f",
26
+ "gitHead": "45218733f7850d503d11390c9eeb5853e2423fdb",
27
27
  "devDependencies": {
28
28
  "@babel/plugin-transform-runtime": "^7.15.8",
29
29
  "@babel/preset-env": "^7.15.8",
@@ -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";
@@ -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, true);
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
  }