ant-design-vue/components/calendar/Header.tsx
tangjinzhou 3aeeeb2aed
3.0 ready (#4523)
* refactor: transfer、tooltip (#4306)

* refactor(transfer): use composition api (#4135)

* refactor(transfer): use composition api

* fix: remove console

* refactor(tooltip): use composition api (#4059)

* refactor(tooltip): use composition api

* chore: useConfigInject

* fix: remove useless

* style: format code

* refactor: transfer

* refactor: tooltip

Co-authored-by: ajuner <106791576@qq.com>

* Refactor mentions (#4341)

* refactor(mentions): use compositionAPI (#4313)

* refactor: mentions

* refactor: mentions

Co-authored-by: ajuner <106791576@qq.com>

* Refactor progress (#4358)

* fix: timepicker error border not show #4331

* fix(UploadDragger): fix UploadDrager no export (#4334)

* refactor(switch): support customize checked value #4329 (#4332)

* refactor(switch): support customize checked value #4329

* test: add test case

* refactor: update props name

* refactor: update ts

* refactor: optimize

* style: uncheckedValue to unCheckedValue

* test: update snap

* feat: udpate switch ts

* docs: remove ie11

* fix: tree-select throw error when use slot title

* fix: TypeScript definition of Table interface for typescript 4.3.5 (#4353)

* fix type for typescript 4.3.5

* Update interface.ts

close #4296

* fix: dropdown submenu style error #4351
close #4351

* fix(notification): 完善notification类型 (#4346)

* refactor(progress): use composition API (#4355)

* refactor(progress): use composition API

* refactor(vc-progress): update

* refactor: progress

* refactor: progress

* fix: timepicker error border not show #4331

* fix(UploadDragger): fix UploadDrager no export (#4334)

* refactor(switch): support customize checked value #4329 (#4332)

* refactor(switch): support customize checked value #4329

* test: add test case

* refactor: update props name

* refactor: update ts

* refactor: optimize

* style: uncheckedValue to unCheckedValue

* test: update snap

* feat: udpate switch ts

* docs: remove ie11

* fix: tree-select throw error when use slot title

* fix: TypeScript definition of Table interface for typescript 4.3.5 (#4353)

* fix type for typescript 4.3.5

* Update interface.ts

close #4296

* fix: dropdown submenu style error #4351
close #4351

* fix(notification): 完善notification类型 (#4346)

* refactor(progress): use composition API (#4355)

* refactor(progress): use composition API

* refactor(vc-progress): update

* refactor: progress

* refactor: progress

Co-authored-by: Jarvis <35361626+fanhaoyuan@users.noreply.github.com>
Co-authored-by: John <John60676@qq.com>
Co-authored-by: 艾斯特洛 <axetroy.dev@gmail.com>
Co-authored-by: zanllp <qc@zanllp.cn>

* docs: add changelog

* refactor: tree

* refactor: tree

* style: lint

* refactor: tree

* 热factor: tree

* refactor: tree

* refactor: tree

* refactor: tree

* refactor: directory tree

* refactor: tree

* refactor: tree-select

* refactor: tree-select

* refactor: tree-select

* refactor: tree-select

* refactor: tree-select

* style: lint format

* refactor: tree-select

* refactor: tree-select

* refactor: tree-select

* refactor: tree-select

* refactor: tree-select

* refactor: tree-select

* fix: upload ts error

* fix: update tree title render & switchIcon

* test: update tree test

* feat: add VirtualScroll tree

* refactor: datePicker & calendar & trigger (#4522)

* style: update

* test: update calendar test

* test: update test

* test: update test

* refactor: slider

* feat: update slider css

* refactor: slider to ts

* refactor: slider to ts

* perf: update default itemHeight

* test: update

* fix: uddate ts type

* fix: update skeleton

* fix: update skeleton

* refactor: update vc-pagination

* refactor: pagination

* refactor: timeline

* refactor: steps

* refactor: collapse

* refactor: collapse

* refactor: popconfirm

* refactor: popover

* refactor: dropdown

* doc: merge doc

* chore: vite for dev (#4602)

* style: js to jsx

* doc: add site

* style: lint

* style: format ts type

* doc: update

* style: format code

* style: format site

* doc: update

* style: dmeo

* style: format scripts

* chore: remove sub-modules

* chore: update vite

* site: add site build

* test: update snap

* doc(select): add tip (#4606)

* refactor: table (#4641)

* refactor: table

* refactor: table

* refactor: table

* refactor: table

* refactor: table

* refactor: table

* refactor: table

* refactor: table

* refactor: table

* fix: column not pass to cell

* doc: uppate table

* fix: update bodyCell headerCell

* doc: remove examples

* refactor: table

* fix: table title not work

* fix: table selection

* fix: table checkStrictly

* refactor: table

* fix: table template error

* feat: table support summary

* test: update snap

* perf: table

* docs(table): fix ajax demo (#4639)

* test: update table

* refactor: remove old table

* doc: update  table doc

* doc: update doc

* doc: update select

* doc: update summary

Co-authored-by: John <John60676@qq.com>

* doc: update doc

* fix: menu arrow not work

* test: update

* doc: add next site

* style: format

* doc: update

* doc: update site script

* fix: expand icon not fixed

* feat: use renderSlot

* test: update table snap

* feat: confirm support reactively

* feat: configProvider.config

* feat: message support configprovider.config

* feat: notification support configprovider.config

* doc: update doc

* fix: typescript compile error

* style: add import eslint

* doc: update demo

* chore: set transpileOnly true

* style: fix eslint error

* test: update snap

* doc: update

* test: mock date

* test: update snap

* chore: remove gulp-typescript (#4675)

* feat: V3 form (#4678)

* chore: update husky

* perf: update formItem

* perf: useInjectFormItemContext

* fix: table ts error

* doc: add Customized Form Controls demo

* feat: export useInjectFormItemContext

* doc: update form doc

* doc: update doc

* doc: update doc

* feat: autocomplete support option slot

* doc: update

* feat: add form item rest

* style: remove omit.js

* refactor: autocomplete

* doc: add changelog to site

* doc: update site anchor

* doc: update doc layout

* test: update table test

* doc: update

* chore: udpate gulp script

* chore: udpate gulp script

* doc: add changelog

* doc: update

* test: ignore some test wait vue-test-utils

* fix: form id error #4582
close #4582

* doc: add select Responsive demo

* doc: remove temp doc

Co-authored-by: ajuner <106791576@qq.com>
Co-authored-by: Jarvis <35361626+fanhaoyuan@users.noreply.github.com>
Co-authored-by: John <John60676@qq.com>
Co-authored-by: 艾斯特洛 <axetroy.dev@gmail.com>
Co-authored-by: zanllp <qc@zanllp.cn>
Co-authored-by: Amour1688 <lcz_1996@foxmail.com>
2021-09-25 16:51:32 +08:00

191 lines
5.4 KiB
Vue

import Select from '../select';
import { Group, Button } from '../radio';
import type { CalendarMode } from './generateCalendar';
import type { Ref } from 'vue';
import { defineComponent, ref } from 'vue';
import type { Locale } from '../vc-picker/interface';
import type { GenerateConfig } from '../vc-picker/generate';
const YearSelectOffset = 10;
const YearSelectTotal = 20;
interface SharedProps<DateType> {
prefixCls: string;
value: DateType;
validRange?: [DateType, DateType];
generateConfig: GenerateConfig<DateType>;
locale: Locale;
fullscreen: boolean;
divRef: Ref<HTMLDivElement>;
onChange: (year: DateType) => void;
}
function YearSelect<DateType>(props: SharedProps<DateType>) {
const { fullscreen, validRange, generateConfig, locale, prefixCls, value, onChange, divRef } =
props;
const year = generateConfig.getYear(value || generateConfig.getNow());
let start = year - YearSelectOffset;
let end = start + YearSelectTotal;
if (validRange) {
start = generateConfig.getYear(validRange[0]);
end = generateConfig.getYear(validRange[1]) + 1;
}
const suffix = locale && locale.year === '年' ? '年' : '';
const options: { label: string; value: number }[] = [];
for (let index = start; index < end; index++) {
options.push({ label: `${index}${suffix}`, value: index });
}
return (
<Select
size={fullscreen ? undefined : 'small'}
options={options}
value={year}
class={`${prefixCls}-year-select`}
onChange={numYear => {
let newDate = generateConfig.setYear(value, numYear);
if (validRange) {
const [startDate, endDate] = validRange;
const newYear = generateConfig.getYear(newDate);
const newMonth = generateConfig.getMonth(newDate);
if (
newYear === generateConfig.getYear(endDate) &&
newMonth > generateConfig.getMonth(endDate)
) {
newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(endDate));
}
if (
newYear === generateConfig.getYear(startDate) &&
newMonth < generateConfig.getMonth(startDate)
) {
newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(startDate));
}
}
onChange(newDate);
}}
getPopupContainer={() => divRef!.value!}
/>
);
}
YearSelect.inheritAttrs = false;
function MonthSelect<DateType>(props: SharedProps<DateType>) {
const { prefixCls, fullscreen, validRange, value, generateConfig, locale, onChange, divRef } =
props;
const month = generateConfig.getMonth(value || generateConfig.getNow());
let start = 0;
let end = 11;
if (validRange) {
const [rangeStart, rangeEnd] = validRange;
const currentYear = generateConfig.getYear(value);
if (generateConfig.getYear(rangeEnd) === currentYear) {
end = generateConfig.getMonth(rangeEnd);
}
if (generateConfig.getYear(rangeStart) === currentYear) {
start = generateConfig.getMonth(rangeStart);
}
}
const months = locale.shortMonths || generateConfig.locale.getShortMonths!(locale.locale);
const options: { label: string; value: number }[] = [];
for (let index = start; index <= end; index += 1) {
options.push({
label: months[index],
value: index,
});
}
return (
<Select
size={fullscreen ? undefined : 'small'}
class={`${prefixCls}-month-select`}
value={month}
options={options}
onChange={newMonth => {
onChange(generateConfig.setMonth(value, newMonth));
}}
getPopupContainer={() => divRef!.value!}
/>
);
}
MonthSelect.inheritAttrs = false;
interface ModeSwitchProps<DateType> extends Omit<SharedProps<DateType>, 'onChange'> {
mode: CalendarMode;
onModeChange: (type: CalendarMode) => void;
}
function ModeSwitch<DateType>(props: ModeSwitchProps<DateType>) {
const { prefixCls, locale, mode, fullscreen, onModeChange } = props;
return (
<Group
onChange={({ target: { value } }) => {
onModeChange(value);
}}
value={mode}
size={fullscreen ? undefined : 'small'}
class={`${prefixCls}-mode-switch`}
>
<Button value="month">{locale.month}</Button>
<Button value="year">{locale.year}</Button>
</Group>
);
}
ModeSwitch.inheritAttrs = false;
export interface CalendarHeaderProps<DateType> {
prefixCls: string;
value: DateType;
validRange?: [DateType, DateType];
generateConfig: GenerateConfig<DateType>;
locale: Locale;
mode: CalendarMode;
fullscreen: boolean;
onChange: (date: DateType) => void;
onModeChange: (mode: CalendarMode) => void;
}
export default defineComponent<CalendarHeaderProps<any>>({
name: 'CalendarHeader',
inheritAttrs: false,
props: [
'mode',
'prefixCls',
'value',
'validRange',
'generateConfig',
'locale',
'mode',
'fullscreen',
] as any,
setup(_props, { attrs }) {
const divRef = ref<HTMLDivElement>(null);
return () => {
const props = { ..._props, ...attrs };
const { prefixCls, fullscreen, mode, onChange, onModeChange } = props;
const sharedProps = {
...props,
onChange,
fullscreen,
divRef,
} as any;
return (
<div class={`${prefixCls}-header`} ref={divRef}>
<YearSelect {...sharedProps} />
{mode === 'month' && <MonthSelect {...sharedProps} />}
<ModeSwitch {...sharedProps} onModeChange={onModeChange} />
</div>
);
};
},
});