Skip to content

Commit

Permalink
feat: 移除 valueType api (Tencent#1487)
Browse files Browse the repository at this point in the history 
* feat: 移除 valueType api

* feat: 移除 valueType api
  • Loading branch information
@honkinglin
honkinglin authored Sep 15, 2022
1 parent c185040 commit f0d9495
Show file tree
Hide file tree
Showing 17 changed files with 109 additions and 244 deletions.
2 changes: 1 addition & 1 deletion src/_common
Submodule _common updated 18 files
+1 −0 .eslintrc.js
+19 −0 docs/web/api/affix.en-US.md
+31 −0 docs/web/api/alert.en-US.md
+41 −0 docs/web/api/anchor.en-US.md
+42 −0 docs/web/api/avater.en-US.md
+75 −0 docs/web/api/card.en-US.md
+43 −0 docs/web/api/config-provider.en-US.md
+18 −0 docs/web/api/date-picker.md
+50 −0 docs/web/api/dialog.en-US.md
+65 −0 docs/web/api/input.en-US.md
+31 −0 docs/web/api/radio.en-US.md
+69 −0 docs/web/api/tabs.en-US.md
+7 −26 js/date-picker/format.ts
+2 −2 js/upload/xhr.ts
+1 −2 style/web/components/cascader/_index.less
+2 −1 style/web/components/input/_index.less
+645 −0 style/web/components/steps/_index.css
+1 −1 style/web/components/steps/_index.less
29 changes: 14 additions & 15 deletions src/date-picker/DatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,9 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
setCacheValue,
} = useSingle(props);

const { format, valueType, timeFormat } = getDefaultFormat({
const { format, timeFormat } = getDefaultFormat({
mode: props.mode,
format: props.format,
valueType: props.valueType,
enableTimePicker: props.enableTimePicker,
});

Expand All @@ -64,21 +63,21 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
setYear(parseToDayjs(value, format).year());
setMonth(parseToDayjs(value, format).month());
setTime(formatTime(value, timeFormat));
value && setCacheValue(formatDate(value, { format, targetFormat: format }));
value && setCacheValue(formatDate(value, { format }));
}
// eslint-disable-next-line
}, [popupVisible]);

// 日期 hover
function onCellMouseEnter(date: Date) {
setIsHoverCell(true);
setInputValue(formatDate(date, { format, targetFormat: format }));
setInputValue(formatDate(date, { format }));
}

// 日期 leave
function onCellMouseLeave() {
setIsHoverCell(false);
setInputValue(formatDate(cacheValue, { format, targetFormat: format }));
setInputValue(formatDate(cacheValue, { format }));
}

// 日期点击
Expand All @@ -91,10 +90,10 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
setMonth(date.getMonth());
}
if (enableTimePicker) {
setCacheValue(formatDate(date, { format, targetFormat: format }));
setCacheValue(formatDate(date, { format }));
} else {
onChange(formatDate(date, { format, targetFormat: valueType }), {
dayjsValue: dayjs(date, format),
onChange(formatDate(date, { format }), {
dayjsValue: parseToDayjs(date, format),
trigger: 'pick',
});
setPopupVisible(false);
Expand Down Expand Up @@ -136,21 +135,21 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
const currentDate = !dayjs(inputValue, format).isValid() ? dayjs() : dayjs(inputValue, format);
const nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate();
setInputValue(formatDate(nextDate, { format, targetFormat: format }));
setInputValue(formatDate(nextDate, { format }));

onPick?.(nextDate);
}

// 确定
function onConfirmClick() {
const nextValue = formatDate(inputValue, { format, targetFormat: format });
const nextValue = formatDate(inputValue, { format });
if (nextValue) {
onChange(formatDate(inputValue, { format, targetFormat: valueType }), {
dayjsValue: dayjs(inputValue),
onChange(formatDate(inputValue, { format }), {
dayjsValue: parseToDayjs(inputValue, format),
trigger: 'confirm',
});
} else {
setInputValue(formatDate(value, { format, targetFormat: format }));
setInputValue(formatDate(value, { format }));
}
setPopupVisible(false);
}
Expand All @@ -161,8 +160,8 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
if (typeof preset === 'function') {
presetValue = preset();
}
onChange(formatDate(presetValue, { format, targetFormat: valueType }), {
dayjsValue: dayjs(presetValue),
onChange(formatDate(presetValue, { format }), {
dayjsValue: parseToDayjs(presetValue, format),
trigger: 'preset',
});
setPopupVisible(false);
Expand Down
31 changes: 15 additions & 16 deletions src/date-picker/DatePickerPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { StyledProps } from '../common';
import { TdDatePickerPanelProps, DateValue, DatePickerYearChangeTrigger, DatePickerMonthChangeTrigger } from './type';
import SinglePanel from './panel/SinglePanel';
import useSingleValue from './hooks/useSingleValue';
import { formatDate, getDefaultFormat } from '../_common/js/date-picker/format';
import { formatDate, getDefaultFormat, parseToDayjs } from '../_common/js/date-picker/format';
import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils';

export interface DatePickerPanelProps extends TdDatePickerPanelProps, StyledProps {}
Expand All @@ -26,10 +26,9 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((props,
onPanelClick,
} = props;

const { format, valueType } = getDefaultFormat({
const { format } = getDefaultFormat({
mode: props.mode,
format: props.format,
valueType: props.valueType,
enableTimePicker: props.enableTimePicker,
});

Expand All @@ -44,9 +43,9 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((props,
}

if (enableTimePicker) {
setCacheValue(formatDate(date, { format, targetFormat: format }));
setCacheValue(formatDate(date, { format }));
} else {
onChange(formatDate(date, { format, targetFormat: valueType }), { dayjsValue: dayjs(date), trigger: 'pick' });
onChange(formatDate(date, { format }), { dayjsValue: parseToDayjs(date, format), trigger: 'pick' });
}
}

Expand All @@ -73,15 +72,15 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((props,
if (year !== nextYear) {
props.onYearChange?.({
year: nextYear,
date: dayjs(value).toDate(),
date: parseToDayjs(value, format).toDate(),
trigger: trigger === 'current' ? 'today' : (`year-${triggerMap[trigger]}` as DatePickerYearChangeTrigger),
});
}

if (month !== nextMonth) {
props.onMonthChange?.({
month: nextMonth,
date: dayjs(value).toDate(),
date: parseToDayjs(value, format).toDate(),
trigger: trigger === 'current' ? 'today' : (`month-${triggerMap[trigger]}` as DatePickerMonthChangeTrigger),
});
}
Expand All @@ -90,7 +89,7 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((props,
setMonth(nextMonth);
}

// timepicker 点击
// timePicker 点击
function onTimePickerChange(val: string) {
setTime(val);

Expand All @@ -101,19 +100,19 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((props,
if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12;
const currentDate = !dayjs(cacheValue, format).isValid() ? dayjs() : dayjs(cacheValue, format);
const nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate();
setCacheValue(formatDate(nextDate, { format, targetFormat: format }));
setCacheValue(formatDate(nextDate, { format }));

props.onTimeChange?.({
time: val,
date: dayjs(value).toDate(),
date: parseToDayjs(value, format).toDate(),
trigger: 'time-hour',
});
}

// 确定
function onConfirmClick({ e }) {
onChange(formatDate(cacheValue, { format, targetFormat: valueType }), {
dayjsValue: dayjs(cacheValue),
onChange(formatDate(cacheValue, { format }), {
dayjsValue: parseToDayjs(cacheValue, format),
trigger: 'confirm',
});

Expand All @@ -123,8 +122,8 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((props,
// 预设
function onPresetClick(presetValue: DateValue | (() => DateValue), { e, preset }) {
const presetVal = typeof presetValue === 'function' ? presetValue() : presetValue;
onChange(formatDate(presetVal, { format, targetFormat: valueType }), {
dayjsValue: dayjs(presetVal),
onChange(formatDate(presetVal, { format }), {
dayjsValue: parseToDayjs(presetVal, format),
trigger: 'preset',
});

Expand All @@ -136,7 +135,7 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((props,

props.onYearChange?.({
year,
date: dayjs(value).toDate(),
date: parseToDayjs(value, format).toDate(),
trigger: 'year-select',
});
}
Expand All @@ -146,7 +145,7 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((props,

props.onMonthChange?.({
month,
date: dayjs(value).toDate(),
date: parseToDayjs(value, format).toDate(),
trigger: 'month-select',
});
}
Expand Down
27 changes: 13 additions & 14 deletions src/date-picker/DateRangePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,10 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
setCacheValue,
} = useRange(props);

const { format, valueType, timeFormat } = getDefaultFormat({
const { format, timeFormat } = getDefaultFormat({
mode,
enableTimePicker,
format: props.format,
valueType: props.valueType,
});

// 记录面板是否选中过
Expand All @@ -72,7 +71,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
// 面板展开重置数据
if (popupVisible) {
setIsSelected(false);
setCacheValue(formatDate(value || [], { format, targetFormat: format }));
setCacheValue(formatDate(value || [], { format }));
setTime(formatTime(value || [dayjs().format(timeFormat), dayjs().format(timeFormat)], timeFormat));

// 空数据重置为当前年月
Expand All @@ -93,7 +92,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
} else {
setIsHoverCell(false);
setIsFirstValueSelected(false);
setInputValue(formatDate(value || [], { format, targetFormat: format }));
setInputValue(formatDate(value || [], { format }));
}
// eslint-disable-next-line
}, [popupVisible]);
Expand All @@ -102,7 +101,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
function onCellMouseEnter(date: Date) {
setIsHoverCell(true);
const nextValue = [...inputValue];
nextValue[activeIndex] = formatDate(date, { format, targetFormat: format });
nextValue[activeIndex] = formatDate(date, { format });
setInputValue(nextValue);
}

Expand All @@ -120,7 +119,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
setIsSelected(true);

const nextValue = [...inputValue];
nextValue[activeIndex] = formatDate(date, { format, targetFormat: format });
nextValue[activeIndex] = formatDate(date, { format });
setCacheValue(nextValue);
setInputValue(nextValue);

Expand All @@ -144,8 +143,8 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,

// 当两端都有有效值时更改 value
if (notValidIndex === -1 && nextValue.length === 2) {
onChange(formatDate(nextValue, { format, targetFormat: valueType }), {
dayjsValue: nextValue.map((v) => dayjs(v)),
onChange(formatDate(nextValue, { format }), {
dayjsValue: nextValue.map((v) => parseToDayjs(v, format)),
trigger: 'pick',
});
}
Expand Down Expand Up @@ -227,8 +226,8 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
setTime(nextTime);

setIsSelected(true);
setInputValue(formatDate(nextInputValue, { format, targetFormat: format }));
setCacheValue(formatDate(nextInputValue, { format, targetFormat: format }));
setInputValue(formatDate(nextInputValue, { format }));
setCacheValue(formatDate(nextInputValue, { format }));
}

// 确定
Expand All @@ -239,8 +238,8 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,

// 当两端都有有效值时更改 value
if (notValidIndex === -1 && nextValue.length === 2) {
onChange(formatDate(nextValue, { format, targetFormat: valueType }), {
dayjsValue: nextValue.map((v) => dayjs(v)),
onChange(formatDate(nextValue, { format }), {
dayjsValue: nextValue.map((v) => parseToDayjs(v, format)),
trigger: 'confirm',
});
setYear(nextValue.map((v) => dayjs(v, format).year()));
Expand All @@ -267,8 +266,8 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
if (!Array.isArray(presetValue)) {
log.error('DateRangePicker', `preset: ${preset} 预设值必须是数组!`);
} else {
onChange(formatDate(presetValue, { format, targetFormat: valueType }), {
dayjsValue: presetValue.map((p) => dayjs(p)),
onChange(formatDate(presetValue, { format }), {
dayjsValue: presetValue.map((p) => parseToDayjs(p, format)),
trigger: 'preset',
});
setPopupVisible(false);
Expand Down
27 changes: 13 additions & 14 deletions src/date-picker/DateRangePickerPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
} from './type';
import RangePanel from './panel/RangePanel';
import useRangeValue from './hooks/useRangeValue';
import { formatDate, getDefaultFormat } from '../_common/js/date-picker/format';
import { formatDate, getDefaultFormat, parseToDayjs } from '../_common/js/date-picker/format';
import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils';
import log from '../_common/js/log';

Expand Down Expand Up @@ -45,11 +45,10 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp
setCacheValue,
} = useRangeValue(props);

const { format, valueType } = getDefaultFormat({
const { format } = getDefaultFormat({
mode,
enableTimePicker,
format: props.format,
valueType: props.valueType,
});

// 记录面板是否选中过
Expand All @@ -62,7 +61,7 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp
function onCellMouseEnter(date: Date) {
setIsHoverCell(true);
const nextValue = [...hoverValue];
nextValue[activeIndex] = formatDate(date, { format, targetFormat: format });
nextValue[activeIndex] = formatDate(date, { format });
setHoverValue(nextValue);
}

Expand All @@ -77,7 +76,7 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp
setIsSelected(true);

const nextValue = [...cacheValue];
nextValue[activeIndex] = formatDate(date, { format, targetFormat: format });
nextValue[activeIndex] = formatDate(date, { format });
setCacheValue(nextValue);

props.onCellClick?.({ date: nextValue.map((v) => dayjs(v).toDate()), e, partial: activeIndex ? 'end' : 'start' });
Expand All @@ -99,8 +98,8 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp

// 首次点击不关闭、确保两端都有有效值并且无时间选择器时点击后自动关闭
if (nextValue.length === 2 && isFirstValueSelected) {
onChange(formatDate(nextValue, { format, targetFormat: valueType }), {
dayjsValue: nextValue.map((v) => dayjs(v)),
onChange(formatDate(nextValue, { format }), {
dayjsValue: nextValue.map((v) => parseToDayjs(v, format)),
trigger: 'pick',
});
setIsFirstValueSelected(false);
Expand Down Expand Up @@ -155,7 +154,7 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp
props.onYearChange?.({
partial,
year: nextYear[partialIndex],
date: value.map((v) => dayjs(v).toDate()),
date: value.map((v) => parseToDayjs(v, format).toDate()),
trigger: trigger === 'current' ? 'today' : (`year-${triggerMap[trigger]}` as DatePickerYearChangeTrigger),
});
}
Expand All @@ -164,7 +163,7 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp
props.onMonthChange?.({
partial,
month: nextMonth[partialIndex],
date: value.map((v) => dayjs(v).toDate()),
date: value.map((v) => parseToDayjs(v, format).toDate()),
trigger: trigger === 'current' ? 'today' : (`month-${triggerMap[trigger]}` as DatePickerMonthChangeTrigger),
});
}
Expand Down Expand Up @@ -195,7 +194,7 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp
setTime(nextTime);

setIsSelected(true);
setCacheValue(formatDate(nextInputValue, { format, targetFormat: format }));
setCacheValue(formatDate(nextInputValue, { format }));

props.onTimeChange?.({
time: val,
Expand All @@ -211,8 +210,8 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp

// 首次点击不关闭、确保两端都有有效值并且无时间选择器时点击后自动关闭
if (nextValue.length === 2 && isFirstValueSelected) {
onChange(formatDate(nextValue, { format, targetFormat: valueType }), {
dayjsValue: nextValue.map((v) => dayjs(v)),
onChange(formatDate(nextValue, { format }), {
dayjsValue: nextValue.map((v) => parseToDayjs(v, format)),
trigger: 'confirm',
});
setYear(nextValue.map((v) => dayjs(v, format).year()));
Expand All @@ -232,8 +231,8 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp
if (!Array.isArray(presetVal)) {
log.error('DateRangePickerPanel', `preset: ${presetValue} 预设值必须是数组!`);
} else {
onChange(formatDate(presetVal, { format, targetFormat: valueType }), {
dayjsValue: presetVal.map((p) => dayjs(p)),
onChange(formatDate(presetVal, { format }), {
dayjsValue: presetVal.map((p) => parseToDayjs(p, format)),
trigger: 'preset',
});
}
Expand Down
Loading

0 comments on commit f0d9495

Please sign in to comment.