ui: add tpl tsx example

This commit is contained in:
undefined committed 2023-03-13 19:04:30 +08:00
1 parent 67279c3745
commit a9e77c4c7b
3 files changed
+41 -27

No files matched your search

@@ -1,4 +1,5 @@
import $ from 'jquery';
import React from 'react';
import { i18n, tpl } from 'vj/utils';
import DomDialog, { DialogOptions } from './DomDialog';
@@ -14,19 +15,19 @@ export class Dialog {
$action: null,
...options,
};
let box = '';
if (options.width) box += `width:${options.width};max-width:${options.width};`;
if (options.height) box += `height:${options.height};max-height:${options.height};`;
this.$dom = $(tpl`
<div class="dialog withBg ${this.options.classes}" style="display:none">
<div class="dialog__content" style="${box}">
<div class="dialog__body" style="height:calc(100% - 45px);"></div>
<div class="row"><div class="columns clearfix">
<div class="float-right dialog__action"></div>
const box: React.CSSProperties = {};
if (options.width) box.width = box.maxWidth = options.width;
if (options.height) box.height = box.maxHeight = options.height;
this.$dom = $(tpl(
<div className={`dialog withBg ${this.options.classes}`} style={{ display: 'none' }}>
<div className="dialog__content" style={box}>
<div className="dialog__body" style={{ height: 'calc(100% - 45px);' }} />
<div className="row"><div className="columns clearfix">
<div className="float-right dialog__action" />
</div></div>
</div>
</div>
`);
</div>,
));
this.$dom.on('click', '[data-action]', this.handleActionButton.bind(this));
this.$dom.on('vjDomDialogShow', this.beforeShow.bind(this));
this.$dom.on('vjDomDialogHidden', this.afterHide.bind(this));