omim - fix expansion in html mode
This commit is contained in:
dntzhang
parent
09e0443487
commit
b32d43d6d5
|
|
@ -162,7 +162,7 @@ eval("\n var result = __webpack_require__(/*! !../../node_modules/_css-lo
|
|||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
eval("\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar omi_1 = __webpack_require__(/*! omi */ \"./node_modules/_omi@6.6.5@omi/dist/omi.esm.js\");\nvar css = __webpack_require__(/*! ./index.scss */ \"./src/expansion/index.scss\");\n//@ts-ignore\n__webpack_require__(/*! ../theme.ts */ \"./src/theme.ts\");\nvar Expansion = /** @class */ (function (_super) {\n __extends(Expansion, _super);\n function Expansion() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n Expansion.prototype.receiveProps = function () {\n var rect = this._host.getBoundingClientRect();\n if (this.props.expand) {\n this.style.height = rect.height + 'px';\n }\n else {\n this.style.height = '0px';\n }\n return false;\n };\n Expansion.prototype.installed = function () {\n var rect = this._host.getBoundingClientRect();\n if (!this.props.expand) {\n this.style.height = '0px';\n }\n else {\n this.style.height = rect.height + 'px';\n }\n };\n Expansion.prototype.render = function (props) {\n return (omi_1.h(\"div\", __assign({}, omi_1.extractClass(props, 'm-expansion')),\n omi_1.h(\"slot\", null)));\n };\n Expansion.css = css;\n Expansion.propTypes = {\n expand: Boolean\n };\n Expansion = __decorate([\n omi_1.tag('m-expansion')\n ], Expansion);\n return Expansion;\n}(omi_1.WeElement));\nexports.default = Expansion;\n\n\n//# sourceURL=webpack:///./src/expansion/index.tsx?");
|
||||
eval("\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar omi_1 = __webpack_require__(/*! omi */ \"./node_modules/_omi@6.6.5@omi/dist/omi.esm.js\");\nvar css = __webpack_require__(/*! ./index.scss */ \"./src/expansion/index.scss\");\nvar dom_ready_1 = __webpack_require__(/*! ../util/dom-ready */ \"./src/util/dom-ready.js\");\n//@ts-ignore\n__webpack_require__(/*! ../theme.ts */ \"./src/theme.ts\");\nvar Expansion = /** @class */ (function (_super) {\n __extends(Expansion, _super);\n function Expansion() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n Expansion.prototype.receiveProps = function () {\n var rect = this.shadowRoot.querySelector('div').getBoundingClientRect();\n if (this.props.expand) {\n this.style.height = rect.height + 'px';\n }\n else {\n this.style.height = '0px';\n }\n return false;\n };\n Expansion.prototype.setAttribute = function (attr, value) {\n if (attr.toLowerCase() === 'expand') {\n this.style.height = this.shadowRoot.querySelector('div').getBoundingClientRect().height + 'px';\n }\n else {\n //@ts-ignore\n _super.prototype.pureSetAttribute.call(this, attr);\n }\n };\n Expansion.prototype.removeAttribute = function (attr) {\n if (attr === 'expand') {\n this.style.height = '0px';\n }\n else {\n //@ts-ignore\n _super.prototype.pureRemoveAttribute.call(this, attr);\n }\n };\n Expansion.prototype.install = function () {\n var _this = this;\n dom_ready_1.domReady(function () {\n var rect = _this.shadowRoot.querySelector('div').getBoundingClientRect();\n if (!_this.props.expand) {\n _this.style.height = '0px';\n }\n else {\n _this.style.height = rect.height + 'px';\n }\n });\n };\n Expansion.prototype.render = function (props) {\n return (omi_1.h(\"div\", null,\n omi_1.h(\"slot\", null)));\n };\n Expansion.css = css;\n Expansion.propTypes = {\n expand: Boolean\n };\n Expansion = __decorate([\n omi_1.tag('m-expansion')\n ], Expansion);\n return Expansion;\n}(omi_1.WeElement));\nexports.default = Expansion;\n\n\n//# sourceURL=webpack:///./src/expansion/index.tsx?");
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
@ -175,6 +175,18 @@ eval("\nvar __extends = (this && this.__extends) || (function () {\n var exte
|
|||
|
||||
eval("theme();\ndocument.addEventListener('DOMContentLoaded', function () {\n theme();\n});\nfunction theme() {\n if (document.body && !document.body.style.getPropertyValue('--mdc-theme-primary')) {\n document.body.style.setProperty('--mdc-theme-primary', '#0072d9');\n document.body.style.setProperty('--mdc-theme-secondary', '#2170b8');\n document.body.style.setProperty('--mdc-theme-error', '#f5222d');\n document.body.style.setProperty('--mdc-theme-surface', '#ffffff');\n document.body.style.setProperty('--mdc-theme-on-primary', '#ffffff');\n document.body.style.setProperty('--mdc-theme-on-secondary', '#ffffff');\n document.body.style.setProperty('--mdc-theme-on-error', '#ffffff');\n document.body.style.setProperty('--mdc-theme-on-surface', '#000000');\n document.body.style.setProperty('--mdc-theme-background', '#ffffff');\n document.body.style.setProperty('--mdc-shape-small-component-radius', '4px');\n document.body.style.setProperty('--mdc-shape-medium-component-radius', '4px');\n document.body.style.setProperty('--mdc-shape-large-component-radius', '0px');\n document.body.style.setProperty('--mdc-typography--font-family', 'Roboto, sans-serif');\n }\n}\n\n\n//# sourceURL=webpack:///./src/theme.ts?");
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/util/dom-ready.js":
|
||||
/*!*******************************!*\
|
||||
!*** ./src/util/dom-ready.js ***!
|
||||
\*******************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar readyCallbacks = [];\ndocument.addEventListener('DOMContentLoaded', function () {\n domReady.done = true;\n readyCallbacks.forEach(function (callback) {\n callback();\n });\n});\nfunction domReady(callback) {\n if (domReady.done) {\n callback();\n return;\n }\n readyCallbacks.push(callback);\n}\nexports.domReady = domReady;\ndomReady.done = false;\n\n\n//# sourceURL=webpack:///./src/util/dom-ready.js?");
|
||||
|
||||
/***/ })
|
||||
|
||||
/******/ });
|
||||
|
|
@ -1,30 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width,initial-scale=1,user-scalable=no"
|
||||
/>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Add Omi in One Minute</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="../../src/expansion/index.js"></script>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
|
||||
<meta charset="UTF-8" />
|
||||
<title>Add Omi in One Minute</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="../../src/expansion/index.js"></script>
|
||||
|
||||
|
||||
<div>
|
||||
<button id="myBtn">Toggle</button>
|
||||
<m-expansion >
|
||||
<div style="width:100px;height:100px;background:green;"></div>
|
||||
</m-expansion>
|
||||
<div>Bottom</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelector('#myBtn').addEventListener('click',function(){
|
||||
<div>
|
||||
<button id="myBtn">Toggle</button>
|
||||
<m-expansion expand id="myExpansion" expand>
|
||||
<div style="width:100px;height:100px;background:green;"></div>
|
||||
</m-expansion>
|
||||
<div>Bottom</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tag = true
|
||||
var myExp = document.querySelector('#myExpansion')
|
||||
document.querySelector('#myBtn').addEventListener('click', function () {
|
||||
if (tag) {
|
||||
myExp.removeAttribute('expand')
|
||||
} else {
|
||||
myExp.setAttribute('expand', 1)
|
||||
}
|
||||
tag = !tag
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -10,9 +10,12 @@ export default class Expansion extends WeElement<Props, Data> {
|
|||
static propTypes: {
|
||||
expand: BooleanConstructor;
|
||||
};
|
||||
_host: HTMLElement;
|
||||
preHeight: number;
|
||||
receiveProps(): boolean;
|
||||
installed(): void;
|
||||
setAttribute(attr: any, value: any): void;
|
||||
removeAttribute(attr: any): void;
|
||||
install(): void;
|
||||
render(props: any): JSX.Element;
|
||||
}
|
||||
export {};
|
||||
|
|
|
|||
|
|
@ -243,17 +243,6 @@ var __extends = (this && this.__extends) || (function () {
|
|||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
|
|
@ -263,6 +252,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var omi_1 = __webpack_require__(/*! omi */ "omi");
|
||||
var css = __webpack_require__(/*! ./index.scss */ "./src/expansion/index.scss");
|
||||
var dom_ready_1 = __webpack_require__(/*! ../util/dom-ready */ "./src/util/dom-ready.js");
|
||||
//@ts-ignore
|
||||
__webpack_require__(/*! ../theme.ts */ "./src/theme.ts");
|
||||
var Expansion = /** @class */ (function (_super) {
|
||||
|
|
@ -271,7 +261,6 @@ var Expansion = /** @class */ (function (_super) {
|
|||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Expansion.prototype.receiveProps = function () {
|
||||
//@ts-ignore
|
||||
var rect = this.shadowRoot.querySelector('div').getBoundingClientRect();
|
||||
if (this.props.expand) {
|
||||
this.style.height = rect.height + 'px';
|
||||
|
|
@ -281,23 +270,40 @@ var Expansion = /** @class */ (function (_super) {
|
|||
}
|
||||
return false;
|
||||
};
|
||||
Expansion.prototype.installed = function () {
|
||||
console.log(this.props.expand);
|
||||
console.log(this.children[0]);
|
||||
//@ts-ignore
|
||||
var rect = this.children[0].getBoundingClientRect();
|
||||
if (!this.props.expand) {
|
||||
Expansion.prototype.setAttribute = function (attr, value) {
|
||||
console.error(attr);
|
||||
if (attr.toLowerCase() === 'expand') {
|
||||
console.error(this.shadowRoot.querySelector('div').getBoundingClientRect().height);
|
||||
this.style.height = this.shadowRoot.querySelector('div').getBoundingClientRect().height + 'px';
|
||||
}
|
||||
else {
|
||||
//@ts-ignore
|
||||
_super.prototype.pureSetAttribute.call(this, attr);
|
||||
}
|
||||
};
|
||||
Expansion.prototype.removeAttribute = function (attr) {
|
||||
if (attr === 'expand') {
|
||||
this.style.height = '0px';
|
||||
}
|
||||
else {
|
||||
console.log(this.shadowRoot.firstChild);
|
||||
console.log(rect.height);
|
||||
this.style.height = rect.height + 'px';
|
||||
//@ts-ignore
|
||||
_super.prototype.pureRemoveAttribute.call(this, attr);
|
||||
}
|
||||
};
|
||||
Expansion.prototype.install = function () {
|
||||
var _this = this;
|
||||
dom_ready_1.domReady(function () {
|
||||
var rect = _this.shadowRoot.querySelector('div').getBoundingClientRect();
|
||||
if (!_this.props.expand) {
|
||||
_this.style.height = '0px';
|
||||
}
|
||||
else {
|
||||
_this.style.height = rect.height + 'px';
|
||||
}
|
||||
});
|
||||
};
|
||||
Expansion.prototype.render = function (props) {
|
||||
console.log(123);
|
||||
return (omi_1.h("div", __assign({}, omi_1.extractClass(props, 'm-expansion')),
|
||||
return (omi_1.h("div", null,
|
||||
omi_1.h("slot", null)));
|
||||
};
|
||||
Expansion.css = css;
|
||||
|
|
@ -344,6 +350,36 @@ function theme() {
|
|||
}
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/util/dom-ready.js":
|
||||
/*!*******************************!*\
|
||||
!*** ./src/util/dom-ready.js ***!
|
||||
\*******************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var readyCallbacks = [];
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
domReady.done = true;
|
||||
readyCallbacks.forEach(function (callback) {
|
||||
callback();
|
||||
});
|
||||
});
|
||||
function domReady(callback) {
|
||||
if (domReady.done) {
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
readyCallbacks.push(callback);
|
||||
}
|
||||
exports.domReady = domReady;
|
||||
domReady.done = false;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "omi":
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
import { tag, WeElement, h, extractClass, getHost } from 'omi'
|
||||
import * as css from './index.scss'
|
||||
|
||||
import { domReady }from '../util/dom-ready'
|
||||
//@ts-ignore
|
||||
import '../theme.ts'
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ export default class Expansion extends WeElement<Props, Data> {
|
|||
preHeight: number
|
||||
|
||||
receiveProps(){
|
||||
const rect = this._host.getBoundingClientRect()
|
||||
const rect = this.shadowRoot.querySelector('div').getBoundingClientRect()
|
||||
if(this.props.expand){
|
||||
this.style.height = rect.height + 'px'
|
||||
}else{
|
||||
|
|
@ -31,22 +31,42 @@ export default class Expansion extends WeElement<Props, Data> {
|
|||
return false
|
||||
}
|
||||
|
||||
installed() {
|
||||
const rect = this._host.getBoundingClientRect()
|
||||
if(!this.props.expand){
|
||||
setAttribute(attr, value){
|
||||
if(attr.toLowerCase() === 'expand'){
|
||||
this.style.height = this.shadowRoot.querySelector('div').getBoundingClientRect().height + 'px'
|
||||
}else{
|
||||
//@ts-ignore
|
||||
super.pureSetAttribute(attr)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
removeAttribute(attr){
|
||||
if(attr === 'expand'){
|
||||
this.style.height = '0px'
|
||||
}else{
|
||||
this.style.height = rect.height +'px'
|
||||
//@ts-ignore
|
||||
super.pureRemoveAttribute(attr)
|
||||
}
|
||||
}
|
||||
|
||||
install() {
|
||||
domReady(()=>{
|
||||
const rect = this.shadowRoot.querySelector('div').getBoundingClientRect()
|
||||
|
||||
if(!this.props.expand){
|
||||
this.style.height = '0px'
|
||||
}else{
|
||||
this.style.height = rect.height +'px'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
<div
|
||||
{...extractClass(props, 'm-expansion')}
|
||||
>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue