@lspriv/wx-calendar
Version:
351 lines (350 loc) • 13.3 kB
TypeScript
import type { CalendarDay, WxCalendar, WcMonth, WcYear, WcSubYear, WcScheduleMark, WcScheduleInfo } from './calendar';
import { type CalendarView, Shared } from '../basic/tools';
import type { View } from '../basic/constants';
import type { Pointer, CalendarPointer } from '../basic/pointer';
import type { PanelTool } from '../basic/panel';
import type { Dragger } from '../basic/drag';
import type { AnnualPanelSwitch } from '../basic/annual';
import type { YearPrinter } from '../basic/printer';
import type { CalendarLayout } from '../basic/layout';
import type { Nullable, Voidable, PlainObject } from '../utils/shared';
import type { MarkPlugin } from '../plugins/mark';
import type { PluginConstructor, PluginEntireMarks, PluginKeys, PluginService, PluginEventNames, ServicePluginMap } from '../basic/service';
declare global {
namespace WechatMiniprogram {
interface GragGestureEvent<DataSet extends IAnyObject = IAnyObject> {
state: 0 | 1 | 2 | 3 | 4;
absoluteX: number;
absoluteY: number;
deltaX: number;
deltaY: number;
velocityX: number;
velocityY: number;
currentTarget: Target<DataSet>;
}
}
}
export interface CalendarPanel extends WcMonth {
/** 面板垂直偏移量 */
offset: number;
/** 周视图下当前所在周索引 */
wdx: number;
}
export interface CalendarWeek {
key: string;
label: string;
}
export type CalendarSwiperType = 'panel' | 'annual';
type FullProperty<T extends WechatMiniprogram.Component.PropertyType> = WechatMiniprogram.Component.FullProperty<T>;
export type LayoutArea = 'header' | 'title' | 'subinfo' | 'today' | 'viewbar' | 'dragbar';
export type CalendarData = {
/** 渲染模式 */
renderer: 'webview' | 'skyline' | 'unknown';
/** 选中日期 */
checked: Nullable<CalendarDay>;
/** 周/月面板数据 */
panels: Array<CalendarPanel>;
/** 周标题 */
weeks: Array<CalendarWeek>;
/** 年面板数据 */
years: Array<WcYear>;
/** 周/月面板swiper当前所在滑块 */
current: number;
/** 年面板swiper当前所在滑块 */
annualCurr: Nullable<number>;
/** [webview] 控制年面板容器的垂直起始位置 */
annualTop: number | string;
/** [webview] 控制年面板容器的透明度 */
annualOpacity: number;
/** [webview] 控制年面板swiper的动画时长 */
annualDuration: number;
/** 当前视图 */
currView: CalendarView;
/** [webview] 控制初始化视图(无过渡) */
initView: CalendarView;
/** [webview] 手动控制视图(过渡效果) */
transView: Nullable<CalendarView>;
/** 是否滑动手势控制视图 */
gesture: boolean;
/** [webview] 周视图下强制更新各面板的垂直偏移量 */
offsetChange: boolean;
/** 布局数据 */
layout: Nullable<Omit<CalendarLayout, 'windowWidth' | 'windowHeight'>>;
/** 选中日期的额外信息 */
info: string;
/** 控制选中日期的圆圈⭕️位置和动画 */
pointer: Nullable<CalendarPointer>;
/** 日历字体 */
fonts: string;
/** 暗黑模式 */
dark: boolean;
/** 属性 layout 的翻版 */
areaHideCls: string;
};
export type CalendarProp = {
/** 暗黑模式 */
darkmode: FullProperty<BooleanConstructor>;
/** 默认选中日期 */
date: FullProperty<StringConstructor> | FullProperty<NumberConstructor>;
/** 日程、角标和节假日 */
marks: FullProperty<ArrayConstructor>;
/** 视图分月视图,周视图和日程视图 */
view: FullProperty<StringConstructor>;
/** 字体,默认 system-ui */
font: FullProperty<StringConstructor>;
/** 容器样式 */
style: FullProperty<StringConstructor>;
/** 选中圆圈外观在非今日和今日保持一致 */
sameChecked: FullProperty<BooleanConstructor>;
/** 周首日,0 | 1 | 2 | 3 | 4 | 5 | 6 分别对应 日 | 一 | 二 | 三 | 四 | 五 | 六 */
weekstart: FullProperty<NumberConstructor>;
/** 点击选择日期时是否震动 */
vibrate: FullProperty<BooleanConstructor>;
/** 是否自定义导航栏,用以调整年面板的布局 */
customNavBar: FullProperty<BooleanConstructor>;
/** 布局区域 */
areas: FullProperty<ArrayConstructor>;
/** 是否滑动手势控制视图 */
viewGesture: FullProperty<BooleanConstructor>;
/** 日期排布, center 居中, baseline 对齐一条线 */
alignDate: FullProperty<StringConstructor>;
/** 非本月日期是否显示 */
showRest: FullProperty<BooleanConstructor>;
};
interface CalendarInitialize {
/**
* 初始化必需的共享变量
* INFO: 在attached生命周期内声明的共享变量在组件实例的worklet函数中拿不到,所以放到created生命周期内初始化
*/
initializeShared(): void;
/**
* 初始化视图相关的数据
*/
initializeView(): void;
/**
* 初始化一些工具对象和组件实例数据
*/
initializeRender(): void;
/**
* 计算日期中心水平位置和是否自定义导航栏的判断,返回是否自定义导航栏
* effect
*/
initializeRects(): Promise<void>;
}
type TouchEvent<S extends WechatMiniprogram.IAnyObject, D extends WechatMiniprogram.IAnyObject = PlainObject, M extends WechatMiniprogram.IAnyObject = PlainObject> = WechatMiniprogram.TouchEvent<D, M, S>;
type SwiperTransitionEvent<D extends WechatMiniprogram.IAnyObject = PlainObject, M extends WechatMiniprogram.IAnyObject = PlainObject> = WechatMiniprogram.SwiperTransition<M, D>;
type SwiperAnimationFinishEvent<D extends WechatMiniprogram.IAnyObject = PlainObject, M extends WechatMiniprogram.IAnyObject = PlainObject> = WechatMiniprogram.SwiperAnimationFinish<M, D>;
export type DEFAULT_PLUGINS = [typeof MarkPlugin];
export type UsePlugins<T extends PluginConstructor[]> = [...T, ...DEFAULT_PLUGINS];
export type UsePluginService<T extends PluginConstructor[] = []> = PluginService<UsePlugins<T>>;
interface CalendarEventHandlers {
/**
* 跳转到今日
*/
toToday(event: TouchEvent<PlainObject>): void;
/**
* 点击选择日期
*/
selDate(event: TouchEvent<PlainObject, PlainObject, {
wdx: number;
ddx: number;
}>): void;
/**
* 点击周/月面板标题打开年面板选择年
*/
selYear(event?: TouchEvent<PlainObject>): Promise<void>;
/**
* 年面板中选择月
*/
selMonth(event: TouchEvent<{
ydx: number;
}, {
x: number;
y: number;
}>): Promise<void>;
/**
* 选择日程
*/
selSchedule(event: TouchEvent<{
sdx?: number;
all?: boolean;
}, PlainObject, {
wdx: number;
ddx: number;
}>): void;
/**
* 切换视图,周/月视图切换
*/
toggleView(event: TouchEvent<PlainObject> | View): void;
/**
* [WebView] 处理周/月面板的swiper滑块位置变动
*/
swiperTrans(event: SwiperTransitionEvent<{
type: CalendarSwiperType;
}>): void;
/**
* [WebView] 处理周/月面板的swiper滑块变动结束
*/
swiperTransEnd(event: SwiperAnimationFinishEvent<{
type: CalendarSwiperType;
}>): void;
/**
* [Skyline] 处理周/月面板的swiper滑动结束
*/
workletSwiperTransEnd(event: WechatMiniprogram.SwiperTransition): void;
/**
* [Skyline] 处理周/月面板的手势拖动
*/
workletDragGesture(event: WechatMiniprogram.GragGestureEvent): void;
/**
* [Skyline] 处理年面板的swiper滑动结束
*/
workletAnnualSwiperTransEnd(event: WechatMiniprogram.SwiperTransition): void;
/**
* 处理选中日期圆圈的动画结束
*/
handlePointerAnimated(): void;
/**
* [WebView] 处理日历面板过渡结束
*/
calendarTransitionEnd(): void;
}
export type CalendarEventSimplified = 'load' | 'click' | 'change' | 'viewchange' | 'schedule';
export interface CalendarEventDetail {
checked?: CalendarDay;
view?: CalendarView;
range?: [startDate: CalendarDay, endDate: CalendarDay];
source?: 'click' | 'gesture' | 'annual' | 'manual';
}
export interface ScheduleEventDetail extends Omit<WcScheduleMark, 'key'> {
date: CalendarDay;
plugin?: string;
info?: Nullable<WcScheduleInfo>;
}
export type CalendarCustomEvent<T extends CalendarEventSimplified> = WechatMiniprogram.CustomEvent<T extends 'schedule' ? ScheduleEventDetail : CalendarEventDetail>;
export type CalendarEvents = {
[P in CalendarEventSimplified as `bind${P}`]: (event: CalendarCustomEvent<P>) => void;
};
export interface CalendarMethod extends WechatMiniprogram.Component.MethodOption, CalendarInitialize, CalendarEventHandlers {
/**
* 触发事件
*/
trigger<T extends PluginEventNames>(event: T, detail?: CalendarEventDetail, dispatchPlugin?: boolean): void;
/**
* 刷新周/月面板数据
* 单独写这个方法是worklet的需要
*/
refreshPanels(...args: Parameters<PanelTool['refresh']>): void;
/**
* 刷新年面板数据
*/
refreshAnnualPanels(...args: Parameters<PanelTool['refreshAnnualPanels']>): void;
/**
* 视图刷新后刷新周/月面板数据
*/
refreshView(state: {
view: View;
}): void;
/**
* [Skyline] 处理周/月面板手势拖动开始
*/
dragGestureStart(): void;
/**
* [Skyline] 处理周/月面板手势拖动结束
*/
dragGestureEnd(event: WechatMiniprogram.GragGestureEvent): Promise<void>;
}
export interface CalendarCustomProp extends WechatMiniprogram.IAnyObject {
/** 加载状态 */
_loaded_: boolean;
/** 当前视图的flag */
_view_: View;
/** 日期中心水平坐标 */
_centres_: Array<number>;
/** 保存和视图无关的年度数据,和data里的years一一对应 */
_years_: Array<WcSubYear>;
/** 控制选中日期圆圈的实例对象 */
_pointer_: Pointer;
/** 处理周/月/年面板数据的实例对象 */
_panel_: PanelTool;
/** [Skyline] 控制周/月面板手势拖动的实例对象 */
_dragger_?: Dragger;
/** 控制年面板的实例对象 */
_annual_: AnnualPanelSwitch;
/** 处理年面板数据渲染的实例对象 */
_printer_: YearPrinter;
/** 处理数据渲染和服务注册的实例对象 */
_calendar_: WxCalendar<DEFAULT_PLUGINS>;
/**
* [Webview] Swiper组件transition事件dx(或dy)初始值为初始所在滑块的位置偏移量
* 这个值用在首次触摸判断,进一步判断dx初始值是否被消费
*/
_swiper_flag_: boolean;
/** [Webview] Swiper滑动累积偏移量,Swiper滑动结束后用来判断滑动了几个滑块 */
_swiper_accumulator_: number;
/** 日历组件容器宽度 */
$_calendar_width: Shared<number>;
/** 周/月面板保存连续滑动中累积的偏移量 */
$_swiper_trans: Shared<number>;
/** 年面板保存连续滑动中累积的偏移量 */
$_annual_trans: Shared<number>;
/** 是否滑动手势控制视图 */
$_gesture: Shared<boolean>;
/** [Skyline] 当前周/月面板所在滑块,worklet函数中使用 */
$_current?: Shared<number>;
/** [Skyline] 周/月面板手势拖动状态 */
$_drag_state?: Shared<0 | 1>;
/** [Skyline] 周/月面板容器高度 */
$_drag_panel_height?: Shared<number>;
/** [Skyline] 周/月面板各面板垂直偏移量 */
$_drag_panel_trans?: Shared<Array<Shared<number>>>;
/** [Skyline] 周/月面板底部控制条角度 */
$_drag_bar_rotate?: Shared<number>;
/** [Skyline] 周/月面板日程透明度 */
$_drag_schedule_opacity?: Shared<number>;
/** [Skyline] 周/月面板右上方视图控制 */
$_drag_view_bar_translate_?: Shared<number>;
}
type DataSet = Record<string, any>;
export type CalendarInstance<T extends DataSet = PlainObject> = WechatMiniprogram.Component.Instance<CalendarData, CalendarProp, CalendarMethod, CalendarCustomProp> & {
dataset: T;
};
export interface CalendarExport<T extends PluginConstructor[] = []> extends WechatMiniprogram.IAnyObject {
/** 版本号 */
version: string;
/**
* 选中日期
*/
checked(date: string | number | Date | CalendarDay): Promise<void>;
/**
* 周/月面板切换到视图
* 若果view未指定,会在周月视图之间切换
*/
toggleView(view?: CalendarView): void;
/**
* 打开年度面板
*/
openAnnual(): Promise<void>;
/**
* 获取日期标记
*/
getMarks(date: CalendarDay): PluginEntireMarks;
/**
* 获取插件
*/
getPlugin<K extends PluginKeys<UsePlugins<T>> = PluginKeys<UsePlugins<T>>>(key: K): Voidable<ServicePluginMap<UsePlugins<T>>[K]>;
/**
* 更新插件日期数据
*/
updateDates(dates?: Array<CalendarDay>): Promise<void>;
}
/**
* 组件工具类超类
*/
export declare class CalendarHandler {
protected _instance_: CalendarInstance;
constructor(component: CalendarInstance);
/** 是否 skyline 渲染 */
protected get skyline(): boolean;
}
export {};