export class DatePickerCellType extends GC.Spread.Sheets.CellTypes.Base {
constructor(spreadRef: any) {
super();
this.spreadRef = spreadRef;
}
private _text: any = "";
private spreadRef: any;
private isDoubleclick: boolean = false;
public typeName: string = "DatePickerCellType";
public createEditorElement(_context: any): HTMLElement {
let editorContext = document.createElement("div");
editorContext.setAttribute("gcUIElement", "gcEditingInput");
editorContext.style.height = "100%";
let editor = document.createElement("div");
editorContext.appendChild(editor);
return editorContext;
}
public activateEditor(
editorContext: HTMLElement,
_cellStyle: any,
cellRect: any,
context?: any
): void {
if (editorContext) {
const { row, col, sheet } = context;
const cell = sheet.getCell(row, col);
const value = cell.value();
let cellType = this;
let width = cellRect.width > 180 ? cellRect.width : 180;
const pickerCom = defineComponent({
data() {
return { text: value };
},
mounted() {
nextTick(() => {
this.setFocus();
});
},
methods: {
setFocus() {
(this as any).datePicker.value.focus();
},
},
render() {
(this as any).datePicker = ref<any>(null);
const vnode = h(HDatePicker, {
modelValue: this.text,
"onUpdate:modelValue": (val: any) => {
val = val.replace(/\//g, "");
this.text = val;
cellType._text = val;
},
onErrBlur: (val: any) => {
if (cellType.spreadRef) {
cellType.spreadRef.focus(false);
}
setTimeout(() => {
cellType.spreadRef.focus(false);
}, 20);
MessageUtil.showErrorMessage("E0008", "日付").then(() => {
cellType.spreadRef.focus();
sheet.setSelection(row, col, 1, 1);
sheet.startEdit(row, col);
//TODO select control type 選択された状態
});
// console.log(sheet,"sheet","focus");
},
teleported: false,
isDoubleclick: cellType.isDoubleclick,
style: { width: width + "px" },
ref: (this as any).datePicker,
// locale: ja
});
return vnode;
},
expose: ["text", "setFocus"],
});
const vNode = h(pickerCom);
// editorContext.value = this._text;
// console.log(editorContext.value,"editorContext activateEditor");
render(vNode, editorContext.firstChild as HTMLElement);
}
}
public updateEditor(
editorContext: HTMLElement,
_cellStyle: any,
cellRect: any,
_context?: any
): any {
const rect = new GC.Spread.Sheets.Rect(
cellRect.x,
cellRect.y,
cellRect.width,
cellRect.height
);
(editorContext as any).parentElement.parentElement.style.overflow =
"visible";
(editorContext as any).parentElement.style.left = 0;
(editorContext as any).parentElement.style.width = " 100%";
(editorContext as any).parentElement.style.height = " 100%";
(editorContext as any).children[0].style.height = " 100%";
return rect;
}
public getEditorValue(_editorContext: HTMLElement, _context?: any): any {
return this._text;
}
public setEditorValue(
_editorContext: HTMLElement,
value: any,
_context?: any
): void {
this._text = value;
}
// public processMouseUp (hitInfo: any) {
// console.log(hitInfo, "hitInfo");
// return false;
// }
public deactivateEditor(editorContext: HTMLElement, _context?: any): void {
const { row, col, sheet } = _context;
sheet.setValue(row, col, this._text);
render(null, editorContext.firstChild as HTMLElement);
}
public isEditingValueChanged(
oldValue: any,
newValue: any,
_context?: any
): boolean {
return oldValue !== newValue;
}
public paint(
ctx: CanvasRenderingContext2D,
value: any,
x: number,
y: number,
w: number,
h: number,
style: GC.Spread.Sheets.Style,
context?: any
) {
let text = value; // this._text; //
if (typeof text == "number") {
text = text.toString();
}
if (text && text.length === 8) {
text = formatDate(text);
}
style.hAlign = 1;
// console.log(value, text);
new GC.Spread.Sheets.CellTypes.Text().paint(
ctx,
text,
x,
y,
w,
h,
style,
context
);
// ctx.restore();
}
}
|