From fc037558b0f21f20a79bf8b1256382161b298105 Mon Sep 17 00:00:00 2001 From: dntzhang Date: Thu, 30 Apr 2020 17:16:08 +0800 Subject: [PATCH] publish(@omiu/transition) --- components/docs-src/src/docs/en/transition.md | 59 +++ .../docs-src/src/docs/zh-cn/transition.md | 58 +++ components/message/src/index.d.ts | 4 +- components/message/src/index.js | 160 +++++-- components/message/src/index.js.map | 2 +- components/message/src/index.scss | 11 +- components/message/src/index.tsx | 48 +-- components/transition/README.md | 38 +- components/transition/package.json | 8 +- components/transition/src/index.css | 153 +------ components/transition/src/index.d.ts | 21 +- components/transition/src/index.esm.js | 339 ++++----------- components/transition/src/index.esm.js.map | 2 +- components/transition/src/index.js | 404 +----------------- components/transition/src/index.js.map | 2 +- components/transition/src/index.tsx | 129 ++---- components/transition/src/msg.d.ts | 27 -- components/transition/src/msg.scss | 209 --------- components/transition/src/msg.tsx | 80 ---- 19 files changed, 447 insertions(+), 1307 deletions(-) create mode 100644 components/docs-src/src/docs/en/transition.md create mode 100644 components/docs-src/src/docs/zh-cn/transition.md delete mode 100644 components/transition/src/msg.d.ts delete mode 100644 components/transition/src/msg.scss delete mode 100644 components/transition/src/msg.tsx diff --git a/components/docs-src/src/docs/en/transition.md b/components/docs-src/src/docs/en/transition.md new file mode 100644 index 000000000..8d44b39f6 --- /dev/null +++ b/components/docs-src/src/docs/en/transition.md @@ -0,0 +1,59 @@ +## Transition + +Define transition animation for entering and leaving + + + +## Import + +```js +import '@omiu/transition' +``` + +Or use script tag to ref it. + + +```html + +``` + +## Usage + +```html + +``` + +## API + +### Props + +```tsx +{ + name: string + leavingTime?: number + autoRemove?: boolean +} +``` + +### 默认属性 + +```tsx +{ + name: 'o' +} +``` +### Events + +* BeforeEnter +* beforeEnter +* AfterEnter +* afterEnter +* enter +* BeforeLeave +* beforeLeave +* AfterLeave +* afterLeave +* leave diff --git a/components/docs-src/src/docs/zh-cn/transition.md b/components/docs-src/src/docs/zh-cn/transition.md new file mode 100644 index 000000000..149d0e60a --- /dev/null +++ b/components/docs-src/src/docs/zh-cn/transition.md @@ -0,0 +1,58 @@ +## Transition 过渡动画 + +定义进入离开的过渡动画 + + + +## 导入 + +```js +import '@omiu/transition' +``` + +或者直接 script 标签引入。 + + +```html + +``` + +## 使用 + +```html + +``` + + +## API + +### 属性 + +```tsx +{ + name: string + leavingTime?: number + autoRemove?: boolean +} +``` + +### 默认属性 +```tsx +{ + name: 'o' +} +``` +### 事件 +* BeforeEnter +* beforeEnter +* AfterEnter +* afterEnter +* enter +* BeforeLeave +* beforeLeave +* AfterLeave +* afterLeave +* leave diff --git a/components/message/src/index.d.ts b/components/message/src/index.d.ts index ce5616740..3dc76c409 100644 --- a/components/message/src/index.d.ts +++ b/components/message/src/index.d.ts @@ -1,4 +1,5 @@ import { WeElement } from 'omi'; +import '../../transition/src/index.tsx'; interface Props { type?: 'success' | 'warning' | 'info' | 'error'; message: string; @@ -18,8 +19,7 @@ export default class Message extends WeElement { center: BooleanConstructor; duration: NumberConstructor; }; - enter: boolean; - installed(): void; + onAfterLeave: () => void; render(props: any): JSX.Element; } export {}; diff --git a/components/message/src/index.js b/components/message/src/index.js index 840101da5..5f636085f 100644 --- a/components/message/src/index.js +++ b/components/message/src/index.js @@ -96,6 +96,129 @@ return /******/ (function(modules) { // webpackBootstrap /************************************************************************/ /******/ ({ +/***/ "../transition/src/index.tsx": +/*!***********************************!*\ + !*** ../transition/src/index.tsx ***! + \***********************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +/** + * o-transition element based on vue-transition + * Tom Fales (@enlightenmentor) + * Licensed under the MIT License + * https://github.com/enlightenmentor/vue-transition/blob/master/LICENSE + * + * modified by dntzhang + * + */ +var __extends = (this && this.__extends) || (function () { + var extendStatics = function (d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return extendStatics(d, b); + }; + return function (d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +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); + 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; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +//todo duration and delay support +var omi_1 = __webpack_require__(/*! omi */ "omi"); +var Transition = /** @class */ (function (_super) { + __extends(Transition, _super); + function Transition() { + return _super !== null && _super.apply(this, arguments) || this; + } + Transition.prototype.installed = function () { + var _this = this; + this.transitionTarget = this.childNodes[0]; + this.enter(); + if (this.props.leavingTime) { + setTimeout(function () { + _this.leave(); + }, this.props.leavingTime); + } + }; + Transition.prototype.enter = function () { + this.fire('BeforeEnter'); + this.transitionTarget.classList.remove(this.props.name + '-leave-active'); + this.transitionTarget.classList.remove(this.props.name + '-leave-to'); + this.transitionTarget.classList.add(this.props.name + '-enter'); + this.transitionTarget.classList.add(this.props.name + '-enter-active'); + this.callback = function () { + this.transitionTarget.classList.remove(this.props.name + '-enter-active'); + this.fire('AfterEnter'); + }.bind(this); + this.once('transitionend', this.callback); + this.once('animationend', this.callback); + window.setTimeout(function () { + this.transitionTarget.classList.remove(this.props.name + '-enter'); + this.transitionTarget.classList.add(this.props.name + '-enter-to'); + this.fire('enter'); + }.bind(this), 0); + }; + Transition.prototype.leave = function () { + this.fire('BeforeLeave'); + this.transitionTarget.classList.remove(this.props.name + '-enter-active'); + this.transitionTarget.classList.remove(this.props.name + '-enter-to'); + this.transitionTarget.classList.add(this.props.name + '-leave'); + this.transitionTarget.classList.add(this.props.name + '-leave-active'); + this.callback = function (e) { + this.transitionTarget.classList.remove(this.props.name + '-leave-active'); + this.fire('AfterLeave'); + if (this.props.autoRemove && this.parentNode) { + this.parentNode.removeChild(this); + } + }.bind(this); + this.once('transitionend', this.callback); + this.once('animationend', this.callback); + window.setTimeout(function () { + this.transitionTarget.classList.remove(this.props.name + '-leave'); + this.transitionTarget.classList.add(this.props.name + '-leave-to'); + this.fire('leave'); + }.bind(this), 0); + }; + Transition.prototype.once = function (name, callback) { + var wrapCall = function () { + this.removeEventListener(name, wrapCall); + callback(); + }.bind(this); + this.addEventListener(name, wrapCall); + }; + Transition.prototype.render = function () { + return; + }; + Transition.propTypes = { + name: String, + leavingTime: Number, + autoRemove: Boolean + }; + Transition.isLightDom = true; + Transition.defaultProps = { + name: 'o' + }; + Transition = __decorate([ + omi_1.tag('o-transition') + ], Transition); + return Transition; +}(omi_1.WeElement)); +exports.default = Transition; + + +/***/ }), + /***/ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss": /*!****************************************************************************************************************************************************************************************************!*\ !*** ./node_modules/_css-loader@1.0.1@css-loader!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./src/index.scss ***! @@ -108,7 +231,7 @@ exports = module.exports = __webpack_require__(/*! ../node_modules/_css-loader@1 // module -exports.push([module.i, ".o-message__closeBtn:focus,\n.o-message__content:focus {\n outline-width: 0; }\n\n.o-message {\n min-width: 380px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: #EBEEF5;\n position: fixed;\n left: 50%;\n top: 20px;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n background-color: #edf2fc;\n -webkit-transition: opacity .3s, top .4s, -webkit-transform .4s;\n transition: opacity .3s, top .4s, -webkit-transform .4s;\n transition: opacity .3s, transform .4s, top .4s;\n transition: opacity .3s, transform .4s, top .4s, -webkit-transform .4s;\n overflow: hidden;\n padding: 15px 15px 15px 20px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n\n.o-message.is-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center; }\n\n.o-message.is-closable .o-message__content {\n padding-right: 16px; }\n\n.o-message p {\n margin: 0; }\n\n.o-message--info .o-message__content {\n color: #909399; }\n\n.o-message--success {\n background-color: #f0f9eb;\n border-color: #e1f3d8; }\n\n.o-message--success .o-message__content {\n color: #07c160;\n color: var(--o-primary, #07c160); }\n\n.o-message--warning {\n background-color: #fdf6ec;\n border-color: #faecd8; }\n\n.o-message--warning .o-message__content {\n color: #E6A23C; }\n\n.o-message--error {\n background-color: #fef0f0;\n border-color: #fde2e2; }\n\n.o-message--error .o-message__content {\n color: #F56C6C; }\n\n.o-message__icon {\n margin-right: 10px; }\n\n.o-message__content {\n padding: 0;\n font-size: 14px;\n line-height: 1; }\n\n.o-message__closeBtn {\n position: absolute;\n top: 50%;\n right: 15px;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n cursor: pointer;\n color: #C0C4CC;\n font-size: 16px; }\n\n.o-message__closeBtn:hover {\n color: #909399; }\n\n.o-message .o-icon-success {\n color: #07c160;\n color: var(--o-primary, #07c160); }\n\n.o-message .o-icon-error {\n color: #F56C6C; }\n\n.o-message .o-icon-info {\n color: #909399; }\n\n.o-message .o-icon-warning {\n color: #E6A23C; }\n\n.o-message-fade-enter,\n.o-message-fade-leave-active {\n opacity: 0;\n -webkit-transform: translate(-50%, -100%);\n transform: translate(-50%, -100%); }\n", ""]); +exports.push([module.i, ".o-message__closeBtn:focus,\n.o-message__content:focus {\n outline-width: 0; }\n\n.o-message {\n min-width: 380px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: #EBEEF5;\n position: fixed;\n left: 50%;\n top: 20px;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n background-color: #edf2fc;\n -webkit-transition: opacity .3s, top .4s, -webkit-transform .4s;\n transition: opacity .3s, top .4s, -webkit-transform .4s;\n transition: opacity .3s, transform .4s, top .4s;\n transition: opacity .3s, transform .4s, top .4s, -webkit-transform .4s;\n overflow: hidden;\n padding: 15px 15px 15px 20px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n\n.o-message.is-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center; }\n\n.o-message.is-closable .o-message__content {\n padding-right: 16px; }\n\n.o-message p {\n margin: 0; }\n\n.o-message--info .o-message__content {\n color: #909399; }\n\n.o-message--success {\n background-color: #f0f9eb;\n border-color: #e1f3d8; }\n\n.o-message--success .o-message__content {\n color: #07c160;\n color: var(--o-primary, #07c160); }\n\n.o-message--warning {\n background-color: #fdf6ec;\n border-color: #faecd8; }\n\n.o-message--warning .o-message__content {\n color: #E6A23C; }\n\n.o-message--error {\n background-color: #fef0f0;\n border-color: #fde2e2; }\n\n.o-message--error .o-message__content {\n color: #F56C6C; }\n\n.o-message__icon {\n margin-right: 10px; }\n\n.o-message__content {\n padding: 0;\n font-size: 14px;\n line-height: 1; }\n\n.o-message__closeBtn {\n position: absolute;\n top: 50%;\n right: 15px;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n cursor: pointer;\n color: #C0C4CC;\n font-size: 16px; }\n\n.o-message__closeBtn:hover {\n color: #909399; }\n\n.o-message .o-icon-success {\n color: #07c160;\n color: var(--o-primary, #07c160); }\n\n.o-message .o-icon-error {\n color: #F56C6C; }\n\n.o-message .o-icon-info {\n color: #909399; }\n\n.o-message .o-icon-warning {\n color: #E6A23C; }\n\n.fade-enter,\n.fade-leave-active,\n.fade-leave-to {\n opacity: 0;\n -webkit-transform: translate(-50%, -100%);\n transform: translate(-50%, -100%); }\n", ""]); // exports @@ -263,37 +386,26 @@ 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/index.scss"); +__webpack_require__(/*! ../../transition/src/index.tsx */ "../transition/src/index.tsx"); var Message = /** @class */ (function (_super) { __extends(Message, _super); function Message() { var _this = _super !== null && _super.apply(this, arguments) || this; - _this.enter = true; + _this.onAfterLeave = function () { + _this.parentElement.removeChild(_this); + }; return _this; } - Message.prototype.installed = function () { - var _this = this; - setTimeout(function () { - _this.enter = false; - _this.update(); - }); - setTimeout(function () { - _this.enter = true; - _this.update(); - }, this.props.duration + 400); - setTimeout(function () { - _this.parentNode.removeChild(_this); - }, this.props.duration + 400 + 400); - }; Message.prototype.render = function (props) { var _a; - return omi_1.h("div", __assign({}, omi_1.extractClass(props, 'o-message', (_a = {}, - _a['o-message--' + props.type] = props.type, - _a['is-closable'] = props.closable, - _a['is-center'] = props.center, - _a['o-message-fade-enter'] = this.enter, - _a)), { style: "top: 20px; z-index: 2000;" }), - omi_1.h("p", { class: "o-message__content" }, props.message), - props.showClose && omi_1.h("i", { class: "o-message__closeBtn o-icon-close" })); + return (omi_1.h("o-transition", { onAfterLeave: this.onAfterLeave, "leaving-time": props.duration, "auto-remove": true, name: "fade" }, + omi_1.h("div", __assign({}, omi_1.extractClass(props, 'o-message', (_a = {}, + _a['o-message--' + props.type] = props.type, + _a['is-closable'] = props.closable, + _a['is-center'] = props.center, + _a)), { style: "top: 20px; z-index: 2000;" }), + omi_1.h("p", { class: "o-message__content" }, props.message), + props.showClose && omi_1.h("i", { class: "o-message__closeBtn o-icon-close" })))); }; Message.css = css; Message.defaultProps = { diff --git a/components/message/src/index.js.map b/components/message/src/index.js.map index 019e95728..5a54c6e7c 100644 --- a/components/message/src/index.js.map +++ b/components/message/src/index.js.map @@ -1 +1 @@ -{"version":3,"sources":["webpack://OMessage/webpack/universalModuleDefinition","webpack://OMessage/webpack/bootstrap","webpack://OMessage/./src/index.scss","webpack://OMessage/./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js","webpack://OMessage/./src/index.scss?56db","webpack://OMessage/./src/index.tsx","webpack://OMessage/external {\"commonjs\":\"omi\",\"commonjs2\":\"omi\",\"amd\":\"omi\",\"root\":\"Omi\"}"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;QCVA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;AClFA,2BAA2B,mBAAO,CAAC,iIAA8D;AACjG;;;AAGA;AACA,cAAc,QAAS,2DAA2D,qBAAqB,EAAE,gBAAgB,qBAAqB,mCAAmC,2BAA2B,uBAAuB,sBAAsB,wBAAwB,0BAA0B,oBAAoB,cAAc,cAAc,wCAAwC,gCAAgC,8BAA8B,oEAAoE,4DAA4D,oDAAoD,2EAA2E,qBAAqB,iCAAiC,yBAAyB,yBAAyB,kBAAkB,8BAA8B,2BAA2B,wBAAwB,EAAE,0BAA0B,6BAA6B,0BAA0B,4BAA4B,EAAE,gDAAgD,wBAAwB,EAAE,kBAAkB,cAAc,EAAE,0CAA0C,mBAAmB,EAAE,yBAAyB,8BAA8B,0BAA0B,EAAE,6CAA6C,mBAAmB,qCAAqC,EAAE,yBAAyB,8BAA8B,0BAA0B,EAAE,6CAA6C,mBAAmB,EAAE,uBAAuB,8BAA8B,0BAA0B,EAAE,2CAA2C,mBAAmB,EAAE,sBAAsB,uBAAuB,EAAE,yBAAyB,eAAe,oBAAoB,mBAAmB,EAAE,0BAA0B,uBAAuB,aAAa,gBAAgB,wCAAwC,gCAAgC,oBAAoB,mBAAmB,oBAAoB,EAAE,gCAAgC,mBAAmB,EAAE,gCAAgC,mBAAmB,qCAAqC,EAAE,8BAA8B,mBAAmB,EAAE,6BAA6B,mBAAmB,EAAE,gCAAgC,mBAAmB,EAAE,0DAA0D,eAAe,8CAA8C,sCAAsC,EAAE;;AAEl6E;;;;;;;;;;;;ACPA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,mCAAmC,gBAAgB;AACnD,IAAI;AACJ;AACA;AACA,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA,gBAAgB,iBAAiB;AACjC;AACA;AACA;AACA;AACA,YAAY,oBAAoB;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,GAAG;;AAEH;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA,oDAAoD,cAAc;;AAElE;AACA;;;;;;;;;;;;;AC1EA,qBAAqB,mBAAO,CAAC,2YAAiN;;AAE9O;AACA;AACA,SAAS;AACT;AACA;;;;;;;;;;;;;ACPa;AACb;AACA;AACA;AACA,cAAc,gBAAgB,sCAAsC,iBAAiB,EAAE;AACvF,6BAA6B,uDAAuD;AACpF;AACA;AACA;AACA;AACA,uBAAuB,sBAAsB;AAC7C;AACA;AACA,CAAC;AACD;AACA;AACA,gDAAgD,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4CAA4C,QAAQ;AACpD;AACA;AACA,8CAA8C,cAAc;AAC5D,YAAY,mBAAO,CAAC,gBAAK;AACzB,UAAU,mBAAO,CAAC,sCAAc;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,yCAAyC,iDAAiD;AAC1F;AACA;AACA;AACA;AACA,mBAAmB,mBAAmB,eAAe,GAAG;AACxD,0BAA0B,8BAA8B;AACxD,6CAA6C,4CAA4C;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;;;;;;;;;;;;AClFA,iD","file":"index.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"omi\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"omi\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"OMessage\"] = factory(require(\"omi\"));\n\telse\n\t\troot[\"OMessage\"] = factory(root[\"Omi\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./src/index.tsx\");\n","exports = module.exports = require(\"../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \".o-message__closeBtn:focus,\\n.o-message__content:focus {\\n outline-width: 0; }\\n\\n.o-message {\\n min-width: 380px;\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box;\\n border-radius: 4px;\\n border-width: 1px;\\n border-style: solid;\\n border-color: #EBEEF5;\\n position: fixed;\\n left: 50%;\\n top: 20px;\\n -webkit-transform: translateX(-50%);\\n transform: translateX(-50%);\\n background-color: #edf2fc;\\n -webkit-transition: opacity .3s, top .4s, -webkit-transform .4s;\\n transition: opacity .3s, top .4s, -webkit-transform .4s;\\n transition: opacity .3s, transform .4s, top .4s;\\n transition: opacity .3s, transform .4s, top .4s, -webkit-transform .4s;\\n overflow: hidden;\\n padding: 15px 15px 15px 20px;\\n display: -webkit-box;\\n display: -ms-flexbox;\\n display: flex;\\n -webkit-box-align: center;\\n -ms-flex-align: center;\\n align-items: center; }\\n\\n.o-message.is-center {\\n -webkit-box-pack: center;\\n -ms-flex-pack: center;\\n justify-content: center; }\\n\\n.o-message.is-closable .o-message__content {\\n padding-right: 16px; }\\n\\n.o-message p {\\n margin: 0; }\\n\\n.o-message--info .o-message__content {\\n color: #909399; }\\n\\n.o-message--success {\\n background-color: #f0f9eb;\\n border-color: #e1f3d8; }\\n\\n.o-message--success .o-message__content {\\n color: #07c160;\\n color: var(--o-primary, #07c160); }\\n\\n.o-message--warning {\\n background-color: #fdf6ec;\\n border-color: #faecd8; }\\n\\n.o-message--warning .o-message__content {\\n color: #E6A23C; }\\n\\n.o-message--error {\\n background-color: #fef0f0;\\n border-color: #fde2e2; }\\n\\n.o-message--error .o-message__content {\\n color: #F56C6C; }\\n\\n.o-message__icon {\\n margin-right: 10px; }\\n\\n.o-message__content {\\n padding: 0;\\n font-size: 14px;\\n line-height: 1; }\\n\\n.o-message__closeBtn {\\n position: absolute;\\n top: 50%;\\n right: 15px;\\n -webkit-transform: translateY(-50%);\\n transform: translateY(-50%);\\n cursor: pointer;\\n color: #C0C4CC;\\n font-size: 16px; }\\n\\n.o-message__closeBtn:hover {\\n color: #909399; }\\n\\n.o-message .o-icon-success {\\n color: #07c160;\\n color: var(--o-primary, #07c160); }\\n\\n.o-message .o-icon-error {\\n color: #F56C6C; }\\n\\n.o-message .o-icon-info {\\n color: #909399; }\\n\\n.o-message .o-icon-warning {\\n color: #E6A23C; }\\n\\n.o-message-fade-enter,\\n.o-message-fade-leave-active {\\n opacity: 0;\\n -webkit-transform: translate(-50%, -100%);\\n transform: translate(-50%, -100%); }\\n\", \"\"]);\n\n// exports\n","/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t// when a module is imported multiple times with different media queries.\n\t\t\t// I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n","\n var result = require(\"!!../node_modules/_css-loader@1.0.1@css-loader/index.js!../node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!../node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./index.scss\");\n\n if (typeof result === \"string\") {\n module.exports = result;\n } else {\n module.exports = result.toString();\n }\n ","\"use strict\";\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 = require(\"omi\");\nvar css = require(\"./index.scss\");\nvar Message = /** @class */ (function (_super) {\n __extends(Message, _super);\n function Message() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.enter = true;\n return _this;\n }\n Message.prototype.installed = function () {\n var _this = this;\n setTimeout(function () {\n _this.enter = false;\n _this.update();\n });\n setTimeout(function () {\n _this.enter = true;\n _this.update();\n }, this.props.duration + 400);\n setTimeout(function () {\n _this.parentNode.removeChild(_this);\n }, this.props.duration + 400 + 400);\n };\n Message.prototype.render = function (props) {\n var _a;\n return omi_1.h(\"div\", __assign({}, omi_1.extractClass(props, 'o-message', (_a = {},\n _a['o-message--' + props.type] = props.type,\n _a['is-closable'] = props.closable,\n _a['is-center'] = props.center,\n _a['o-message-fade-enter'] = this.enter,\n _a)), { style: \"top: 20px; z-index: 2000;\" }),\n omi_1.h(\"p\", { class: \"o-message__content\" }, props.message),\n props.showClose && omi_1.h(\"i\", { class: \"o-message__closeBtn o-icon-close\" }));\n };\n Message.css = css;\n Message.defaultProps = {\n duration: 3000\n };\n Message.propTypes = {\n showClose: Boolean,\n type: String,\n message: String,\n center: Boolean,\n duration: Number\n };\n Message = __decorate([\n omi_1.tag('o-message')\n ], Message);\n return Message;\n}(omi_1.WeElement));\nexports.default = Message;\n","module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack://OMessage/webpack/universalModuleDefinition","webpack://OMessage/webpack/bootstrap","webpack://OMessage/../transition/src/index.tsx","webpack://OMessage/./src/index.scss","webpack://OMessage/./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js","webpack://OMessage/./src/index.scss?56db","webpack://OMessage/./src/index.tsx","webpack://OMessage/external {\"commonjs\":\"omi\",\"commonjs2\":\"omi\",\"amd\":\"omi\",\"root\":\"Omi\"}"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;QCVA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;AClFa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,gBAAgB,sCAAsC,iBAAiB,EAAE;AACvF,6BAA6B,uDAAuD;AACpF;AACA;AACA;AACA;AACA,uBAAuB,sBAAsB;AAC7C;AACA;AACA,CAAC;AACD;AACA;AACA;AACA,4CAA4C,QAAQ;AACpD;AACA;AACA,8CAA8C,cAAc;AAC5D;AACA,YAAY,mBAAO,CAAC,gBAAK;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;;;;;;;;;;;;AC9GA,2BAA2B,mBAAO,CAAC,iIAA8D;AACjG;;;AAGA;AACA,cAAc,QAAS,2DAA2D,qBAAqB,EAAE,gBAAgB,qBAAqB,mCAAmC,2BAA2B,uBAAuB,sBAAsB,wBAAwB,0BAA0B,oBAAoB,cAAc,cAAc,wCAAwC,gCAAgC,8BAA8B,oEAAoE,4DAA4D,oDAAoD,2EAA2E,qBAAqB,iCAAiC,yBAAyB,yBAAyB,kBAAkB,8BAA8B,2BAA2B,wBAAwB,EAAE,0BAA0B,6BAA6B,0BAA0B,4BAA4B,EAAE,gDAAgD,wBAAwB,EAAE,kBAAkB,cAAc,EAAE,0CAA0C,mBAAmB,EAAE,yBAAyB,8BAA8B,0BAA0B,EAAE,6CAA6C,mBAAmB,qCAAqC,EAAE,yBAAyB,8BAA8B,0BAA0B,EAAE,6CAA6C,mBAAmB,EAAE,uBAAuB,8BAA8B,0BAA0B,EAAE,2CAA2C,mBAAmB,EAAE,sBAAsB,uBAAuB,EAAE,yBAAyB,eAAe,oBAAoB,mBAAmB,EAAE,0BAA0B,uBAAuB,aAAa,gBAAgB,wCAAwC,gCAAgC,oBAAoB,mBAAmB,oBAAoB,EAAE,gCAAgC,mBAAmB,EAAE,gCAAgC,mBAAmB,qCAAqC,EAAE,8BAA8B,mBAAmB,EAAE,6BAA6B,mBAAmB,EAAE,gCAAgC,mBAAmB,EAAE,uDAAuD,eAAe,8CAA8C,sCAAsC,EAAE;;AAE/5E;;;;;;;;;;;;ACPA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,mCAAmC,gBAAgB;AACnD,IAAI;AACJ;AACA;AACA,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA,gBAAgB,iBAAiB;AACjC;AACA;AACA;AACA;AACA,YAAY,oBAAoB;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,GAAG;;AAEH;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA,oDAAoD,cAAc;;AAElE;AACA;;;;;;;;;;;;;AC1EA,qBAAqB,mBAAO,CAAC,2YAAiN;;AAE9O;AACA;AACA,SAAS;AACT;AACA;;;;;;;;;;;;;ACPa;AACb;AACA;AACA;AACA,cAAc,gBAAgB,sCAAsC,iBAAiB,EAAE;AACvF,6BAA6B,uDAAuD;AACpF;AACA;AACA;AACA;AACA,uBAAuB,sBAAsB;AAC7C;AACA;AACA,CAAC;AACD;AACA;AACA,gDAAgD,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4CAA4C,QAAQ;AACpD;AACA;AACA,8CAA8C,cAAc;AAC5D,YAAY,mBAAO,CAAC,gBAAK;AACzB,UAAU,mBAAO,CAAC,sCAAc;AAChC,mBAAO,CAAC,mEAAgC;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yCAAyC,qGAAqG;AAC9I,sCAAsC,iDAAiD;AACvF;AACA;AACA;AACA,uBAAuB,mBAAmB,eAAe,GAAG;AAC5D,8BAA8B,8BAA8B;AAC5D,iDAAiD,4CAA4C;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;;;;;;;;;;;;ACvEA,iD","file":"index.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"omi\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"omi\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"OMessage\"] = factory(require(\"omi\"));\n\telse\n\t\troot[\"OMessage\"] = factory(root[\"Omi\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./src/index.tsx\");\n","\"use strict\";\n/**\n * o-transition element based on vue-transition\n * Tom Fales (@enlightenmentor)\n * Licensed under the MIT License\n * https://github.com/enlightenmentor/vue-transition/blob/master/LICENSE\n *\n * modified by dntzhang\n *\n */\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 });\n//todo duration and delay support\nvar omi_1 = require(\"omi\");\nvar Transition = /** @class */ (function (_super) {\n __extends(Transition, _super);\n function Transition() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n Transition.prototype.installed = function () {\n var _this = this;\n this.transitionTarget = this.childNodes[0];\n this.enter();\n if (this.props.leavingTime) {\n setTimeout(function () {\n _this.leave();\n }, this.props.leavingTime);\n }\n };\n Transition.prototype.enter = function () {\n this.fire('BeforeEnter');\n this.transitionTarget.classList.remove(this.props.name + '-leave-active');\n this.transitionTarget.classList.remove(this.props.name + '-leave-to');\n this.transitionTarget.classList.add(this.props.name + '-enter');\n this.transitionTarget.classList.add(this.props.name + '-enter-active');\n this.callback = function () {\n this.transitionTarget.classList.remove(this.props.name + '-enter-active');\n this.fire('AfterEnter');\n }.bind(this);\n this.once('transitionend', this.callback);\n this.once('animationend', this.callback);\n window.setTimeout(function () {\n this.transitionTarget.classList.remove(this.props.name + '-enter');\n this.transitionTarget.classList.add(this.props.name + '-enter-to');\n this.fire('enter');\n }.bind(this), 0);\n };\n Transition.prototype.leave = function () {\n this.fire('BeforeLeave');\n this.transitionTarget.classList.remove(this.props.name + '-enter-active');\n this.transitionTarget.classList.remove(this.props.name + '-enter-to');\n this.transitionTarget.classList.add(this.props.name + '-leave');\n this.transitionTarget.classList.add(this.props.name + '-leave-active');\n this.callback = function (e) {\n this.transitionTarget.classList.remove(this.props.name + '-leave-active');\n this.fire('AfterLeave');\n if (this.props.autoRemove && this.parentNode) {\n this.parentNode.removeChild(this);\n }\n }.bind(this);\n this.once('transitionend', this.callback);\n this.once('animationend', this.callback);\n window.setTimeout(function () {\n this.transitionTarget.classList.remove(this.props.name + '-leave');\n this.transitionTarget.classList.add(this.props.name + '-leave-to');\n this.fire('leave');\n }.bind(this), 0);\n };\n Transition.prototype.once = function (name, callback) {\n var wrapCall = function () {\n this.removeEventListener(name, wrapCall);\n callback();\n }.bind(this);\n this.addEventListener(name, wrapCall);\n };\n Transition.prototype.render = function () {\n return;\n };\n Transition.propTypes = {\n name: String,\n leavingTime: Number,\n autoRemove: Boolean\n };\n Transition.isLightDom = true;\n Transition.defaultProps = {\n name: 'o'\n };\n Transition = __decorate([\n omi_1.tag('o-transition')\n ], Transition);\n return Transition;\n}(omi_1.WeElement));\nexports.default = Transition;\n","exports = module.exports = require(\"../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \".o-message__closeBtn:focus,\\n.o-message__content:focus {\\n outline-width: 0; }\\n\\n.o-message {\\n min-width: 380px;\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box;\\n border-radius: 4px;\\n border-width: 1px;\\n border-style: solid;\\n border-color: #EBEEF5;\\n position: fixed;\\n left: 50%;\\n top: 20px;\\n -webkit-transform: translateX(-50%);\\n transform: translateX(-50%);\\n background-color: #edf2fc;\\n -webkit-transition: opacity .3s, top .4s, -webkit-transform .4s;\\n transition: opacity .3s, top .4s, -webkit-transform .4s;\\n transition: opacity .3s, transform .4s, top .4s;\\n transition: opacity .3s, transform .4s, top .4s, -webkit-transform .4s;\\n overflow: hidden;\\n padding: 15px 15px 15px 20px;\\n display: -webkit-box;\\n display: -ms-flexbox;\\n display: flex;\\n -webkit-box-align: center;\\n -ms-flex-align: center;\\n align-items: center; }\\n\\n.o-message.is-center {\\n -webkit-box-pack: center;\\n -ms-flex-pack: center;\\n justify-content: center; }\\n\\n.o-message.is-closable .o-message__content {\\n padding-right: 16px; }\\n\\n.o-message p {\\n margin: 0; }\\n\\n.o-message--info .o-message__content {\\n color: #909399; }\\n\\n.o-message--success {\\n background-color: #f0f9eb;\\n border-color: #e1f3d8; }\\n\\n.o-message--success .o-message__content {\\n color: #07c160;\\n color: var(--o-primary, #07c160); }\\n\\n.o-message--warning {\\n background-color: #fdf6ec;\\n border-color: #faecd8; }\\n\\n.o-message--warning .o-message__content {\\n color: #E6A23C; }\\n\\n.o-message--error {\\n background-color: #fef0f0;\\n border-color: #fde2e2; }\\n\\n.o-message--error .o-message__content {\\n color: #F56C6C; }\\n\\n.o-message__icon {\\n margin-right: 10px; }\\n\\n.o-message__content {\\n padding: 0;\\n font-size: 14px;\\n line-height: 1; }\\n\\n.o-message__closeBtn {\\n position: absolute;\\n top: 50%;\\n right: 15px;\\n -webkit-transform: translateY(-50%);\\n transform: translateY(-50%);\\n cursor: pointer;\\n color: #C0C4CC;\\n font-size: 16px; }\\n\\n.o-message__closeBtn:hover {\\n color: #909399; }\\n\\n.o-message .o-icon-success {\\n color: #07c160;\\n color: var(--o-primary, #07c160); }\\n\\n.o-message .o-icon-error {\\n color: #F56C6C; }\\n\\n.o-message .o-icon-info {\\n color: #909399; }\\n\\n.o-message .o-icon-warning {\\n color: #E6A23C; }\\n\\n.fade-enter,\\n.fade-leave-active,\\n.fade-leave-to {\\n opacity: 0;\\n -webkit-transform: translate(-50%, -100%);\\n transform: translate(-50%, -100%); }\\n\", \"\"]);\n\n// exports\n","/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t// when a module is imported multiple times with different media queries.\n\t\t\t// I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n","\n var result = require(\"!!../node_modules/_css-loader@1.0.1@css-loader/index.js!../node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!../node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./index.scss\");\n\n if (typeof result === \"string\") {\n module.exports = result;\n } else {\n module.exports = result.toString();\n }\n ","\"use strict\";\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 = require(\"omi\");\nvar css = require(\"./index.scss\");\nrequire(\"../../transition/src/index.tsx\");\nvar Message = /** @class */ (function (_super) {\n __extends(Message, _super);\n function Message() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.onAfterLeave = function () {\n _this.parentElement.removeChild(_this);\n };\n return _this;\n }\n Message.prototype.render = function (props) {\n var _a;\n return (omi_1.h(\"o-transition\", { onAfterLeave: this.onAfterLeave, \"leaving-time\": props.duration, \"auto-remove\": true, name: \"fade\" },\n omi_1.h(\"div\", __assign({}, omi_1.extractClass(props, 'o-message', (_a = {},\n _a['o-message--' + props.type] = props.type,\n _a['is-closable'] = props.closable,\n _a['is-center'] = props.center,\n _a)), { style: \"top: 20px; z-index: 2000;\" }),\n omi_1.h(\"p\", { class: \"o-message__content\" }, props.message),\n props.showClose && omi_1.h(\"i\", { class: \"o-message__closeBtn o-icon-close\" }))));\n };\n Message.css = css;\n Message.defaultProps = {\n duration: 3000\n };\n Message.propTypes = {\n showClose: Boolean,\n type: String,\n message: String,\n center: Boolean,\n duration: Number\n };\n Message = __decorate([\n omi_1.tag('o-message')\n ], Message);\n return Message;\n}(omi_1.WeElement));\nexports.default = Message;\n","module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;"],"sourceRoot":""} \ No newline at end of file diff --git a/components/message/src/index.scss b/components/message/src/index.scss index 350e7e677..17f6b1234 100644 --- a/components/message/src/index.scss +++ b/components/message/src/index.scss @@ -58,7 +58,7 @@ .o-message--success .o-message__content { color: $o-primary; - color: var(--o-primary, $o-primary); + color: var(--o-primary, $o-primary); } .o-message--warning { @@ -106,7 +106,7 @@ .o-message .o-icon-success { color: $o-primary; - color: var(--o-primary, $o-primary); + color: var(--o-primary, $o-primary); } .o-message .o-icon-error { @@ -121,9 +121,10 @@ color: #E6A23C } -.o-message-fade-enter, -.o-message-fade-leave-active { +.fade-enter, +.fade-leave-active, +.fade-leave-to { opacity: 0; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%) -} \ No newline at end of file +} diff --git a/components/message/src/index.tsx b/components/message/src/index.tsx index 2753b837b..5ef9af465 100644 --- a/components/message/src/index.tsx +++ b/components/message/src/index.tsx @@ -1,8 +1,9 @@ import { tag, WeElement, h, extractClass } from 'omi' import * as css from './index.scss' +import '../../transition/src/index.tsx' interface Props { - type?: 'success' | 'warning' | 'info' | 'error' + type?: 'success' | 'warning' | 'info' | 'error' message: string showClose: boolean center: boolean @@ -27,39 +28,26 @@ export default class Message extends WeElement{ duration: Number } - enter = true - - installed() { - - setTimeout(() => { - this.enter = false - this.update() - }) - - setTimeout(() => { - this.enter = true - this.update() - }, this.props.duration + 400) - - - setTimeout(() => { - this.parentNode.removeChild(this) - }, this.props.duration + 400 + 400) + onAfterLeave = () => { + this.parentElement.removeChild(this) } render(props) { - return
- {/* */} -

{props.message}

- {props.showClose && } -
+ return ( + +
+ {/* */} +

{props.message}

+ {props.showClose && } +
+ + ) } diff --git a/components/transition/README.md b/components/transition/README.md index fbfae2121..39c24c3c6 100644 --- a/components/transition/README.md +++ b/components/transition/README.md @@ -1,26 +1,26 @@ -## ActionSheet +## Transition -Mobile pop-up options list +Define transition animation for entering and leaving -* [→ CodePen](https://codepen.io/omijs/pen/wvKdoNJ) +* [→ CodePen](https://codepen.io/omijs/pen/JjYyezQ) ## Import ```js -import '@omiu/action-sheet' +import '@omiu/transition' ``` Or use script tag to ref it. ```html - + ``` ## Usage ```html - + ``` ## API @@ -29,10 +29,9 @@ Or use script tag to ref it. ```tsx { - type: string, - menus: any[], - actions: any[], - show: boolean + name: string + leavingTime?: number + autoRemove?: boolean } ``` @@ -40,13 +39,18 @@ Or use script tag to ref it. ```tsx { - type: '', - menus: [], - actions: [], - show: false -) + name: 'o' +} ``` ### Events -* itemClick -* close +* BeforeEnter +* beforeEnter +* AfterEnter +* afterEnter +* enter +* BeforeLeave +* beforeLeave +* AfterLeave +* afterLeave +* leave diff --git a/components/transition/package.json b/components/transition/package.json index 916c7b4a4..8e4f58670 100644 --- a/components/transition/package.json +++ b/components/transition/package.json @@ -1,11 +1,11 @@ { "name": "@omiu/transition", "version": "0.0.1", - "description": "Mobile pop-up options list", + "description": "Define transition animation for entering and leaving", "docsExtend": { - "cnName": "弹出式菜单", - "cnDescription": "移动端弹出式选项列表", - "codepen": "wvKdoNJ", + "cnName": "过渡动画", + "cnDescription": "定义进入离开的过渡动画", + "codepen": "JjYyezQ", "codepenHeight": 351, "codepenDefaultTab": "html,result" }, diff --git a/components/transition/src/index.css b/components/transition/src/index.css index 4c5f53c69..66dc9051d 100644 --- a/components/transition/src/index.css +++ b/components/transition/src/index.css @@ -1,152 +1 @@ -.o-actionsheet { - position: fixed; - left: 0; - bottom: 0; - -webkit-transform: translate(0, 100%); - transform: translate(0, 100%); - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - z-index: 5000; - width: 100%; - background-color: #EFEFF4; - -webkit-transition: -webkit-transform .3s; - transition: -webkit-transform .3s; - transition: transform .3s; - transition: transform .3s, -webkit-transform .3s; } - -.o-actionsheet__title { - position: relative; - height: 65px; - padding: 0 20px; - line-height: 1.4; - display: -webkit-box; - display: -webkit-flex; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - flex-direction: column; - text-align: center; - font-size: 14px; - color: #808080; - background: #FCFCFD; } - -.o-actionsheet__title:before { - content: " "; - position: absolute; - left: 0; - bottom: 0; - right: 0; - height: 1px; - border-bottom: 1px solid #e5e5e5; - color: #e5e5e5; - -webkit-transform-origin: 0 100%; - transform-origin: 0 100%; - -webkit-transform: scaleY(0.5); - transform: scaleY(0.5); } - -.o-actionsheet__title .o-actionsheet__title-text { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; } - -.o-actionsheet__menu { - background-color: #FCFCFD; } - -.o-actionsheet__action { - margin-top: 6px; - background-color: #FCFCFD; } - -.o-actionsheet__cell { - position: relative; - padding: 10px 0; - text-align: center; - font-size: 18px; } - -.o-actionsheet__cell:before { - content: " "; - position: absolute; - left: 0; - top: 0; - right: 0; - height: 1px; - border-top: 1px solid #e5e5e5; - color: #e5e5e5; - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - -webkit-transform: scaleY(0.5); - transform: scaleY(0.5); } - -.o-actionsheet__cell:active { - background-color: #ECECEC; } - -.o-actionsheet__cell:first-child:before { - display: none; } - -.o-skin_android .o-actionsheet { - position: fixed; - left: 50%; - top: 50%; - bottom: auto; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - width: 274px; - box-sizing: border-box; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - background: transparent; - -webkit-transition: -webkit-transform .3s; - transition: -webkit-transform .3s; - transition: transform .3s; - transition: transform .3s, -webkit-transform .3s; } - -.o-skin_android .o-actionsheet__action { - display: none; } - -.o-skin_android .o-actionsheet__menu { - border-radius: 2px; - box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1); } - -.o-skin_android .o-actionsheet__cell { - padding: 13px 24px; - font-size: 16px; - line-height: 1.4; - text-align: left; } - -.o-skin_android .o-actionsheet__cell:first-child { - border-top-left-radius: 2px; - border-top-right-radius: 2px; } - -.o-skin_android .o-actionsheet__cell:last-child { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; } - -.o-actionsheet_toggle { - -webkit-transform: translate(0, 0); - transform: translate(0, 0); } - -.mask { - position: fixed; - width: 100%; - height: 100%; - background-color: black; - opacity: 0.4; - z-index: 100; - left: 0; - top: 0; } - -.o-skin_android .o-actionsheet_toggle { - opacity: 1 !important; - top: 50% !important; - bottom: auto !important; } - -.o-skin_android .o-actionsheet { - opacity: 0; - transition: opacity .3s; - top: 150%; - bottom: 0; } +undefined \ No newline at end of file diff --git a/components/transition/src/index.d.ts b/components/transition/src/index.d.ts index c62e09e2b..f4e362681 100644 --- a/components/transition/src/index.d.ts +++ b/components/transition/src/index.d.ts @@ -9,35 +9,26 @@ */ import { WeElement } from 'omi'; interface Props { - appear?: boolean; - show?: boolean; name: string; - removable?: boolean; - removed?: boolean; + leavingTime?: number; + autoRemove?: boolean; } export default class Transition extends WeElement { static propTypes: { name: StringConstructor; - appear: BooleanConstructor; - show: BooleanConstructor; - removable: BooleanConstructor; - removed: BooleanConstructor; + leavingTime: NumberConstructor; + autoRemove: BooleanConstructor; }; static isLightDom: boolean; static defaultProps: { name: string; - appear: boolean; - show: boolean; }; + transitionTarget: any; installed(): void; - toggle(): void; - receiveProps(props: any): void; callback: () => void; - appearing(): void; - _tempNode: HTMLElement; enter(): void; leave(): void; once(name: any, callback: any): void; - render(props: any): any; + render(): void; } export {}; diff --git a/components/transition/src/index.esm.js b/components/transition/src/index.esm.js index 5a75f10da..76564aea2 100644 --- a/components/transition/src/index.esm.js +++ b/components/transition/src/index.esm.js @@ -1,12 +1,12 @@ /** - * @omiu/action-sheet v0.0.2 http://omijs.org + * @omiu/transition v0.0.1 http://omijs.org * Front End Cross-Frameworks Framework. * By dntzhang https://github.com/dntzhang * Github: https://github.com/Tencent/omi * MIT Licensed. */ -import { classNames, h, tag, WeElement } from 'omi'; +import { tag, WeElement } from 'omi'; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. All rights reserved. @@ -37,29 +37,6 @@ function __extends(d, b) { d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); } -var __assign = function() { - __assign = Object.assign || function __assign(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); -}; - -function __rest(s, e) { - var t = {}; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) - t[p] = s[p]; - if (s != null && typeof Object.getOwnPropertySymbols === "function") - for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { - if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) - t[p[i]] = s[p[i]]; - } - return t; -} - function __decorate(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); @@ -67,245 +44,97 @@ function __decorate(decorators, target, key, desc) { return c > 3 && r && Object.defineProperty(target, key, r), r; } - -var css = `.o-actionsheet { - position: fixed; - left: 0; - bottom: 0; - -webkit-transform: translate(0, 100%); - transform: translate(0, 100%); - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - z-index: 5000; - width: 100%; - background-color: #EFEFF4; - -webkit-transition: -webkit-transform .3s; - transition: -webkit-transform .3s; - transition: transform .3s; - transition: transform .3s, -webkit-transform .3s; } - -.o-actionsheet__title { - position: relative; - height: 65px; - padding: 0 20px; - line-height: 1.4; - display: -webkit-box; - display: -webkit-flex; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - flex-direction: column; - text-align: center; - font-size: 14px; - color: #808080; - background: #FCFCFD; } - -.o-actionsheet__title:before { - content: " "; - position: absolute; - left: 0; - bottom: 0; - right: 0; - height: 1px; - border-bottom: 1px solid #e5e5e5; - color: #e5e5e5; - -webkit-transform-origin: 0 100%; - transform-origin: 0 100%; - -webkit-transform: scaleY(0.5); - transform: scaleY(0.5); } - -.o-actionsheet__title .o-actionsheet__title-text { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; } - -.o-actionsheet__menu { - background-color: #FCFCFD; } - -.o-actionsheet__action { - margin-top: 6px; - background-color: #FCFCFD; } - -.o-actionsheet__cell { - position: relative; - padding: 10px 0; - text-align: center; - font-size: 18px; } - -.o-actionsheet__cell:before { - content: " "; - position: absolute; - left: 0; - top: 0; - right: 0; - height: 1px; - border-top: 1px solid #e5e5e5; - color: #e5e5e5; - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - -webkit-transform: scaleY(0.5); - transform: scaleY(0.5); } - -.o-actionsheet__cell:active { - background-color: #ECECEC; } - -.o-actionsheet__cell:first-child:before { - display: none; } - -.o-skin_android .o-actionsheet { - position: fixed; - left: 50%; - top: 50%; - bottom: auto; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - width: 274px; - box-sizing: border-box; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - background: transparent; - -webkit-transition: -webkit-transform .3s; - transition: -webkit-transform .3s; - transition: transform .3s; - transition: transform .3s, -webkit-transform .3s; } - -.o-skin_android .o-actionsheet__action { - display: none; } - -.o-skin_android .o-actionsheet__menu { - border-radius: 2px; - box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1); } - -.o-skin_android .o-actionsheet__cell { - padding: 13px 24px; - font-size: 16px; - line-height: 1.4; - text-align: left; } - -.o-skin_android .o-actionsheet__cell:first-child { - border-top-left-radius: 2px; - border-top-right-radius: 2px; } - -.o-skin_android .o-actionsheet__cell:last-child { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; } - -.o-actionsheet_toggle { - -webkit-transform: translate(0, 0); - transform: translate(0, 0); } - -.mask { - position: fixed; - width: 100%; - height: 100%; - background-color: black; - opacity: 0.4; - z-index: 100; - left: 0; - top: 0; } - -.o-skin_android .o-actionsheet_toggle { - opacity: 1 !important; - top: 50% !important; - bottom: auto !important; } - -.o-skin_android .o-actionsheet { - opacity: 0; - transition: opacity .3s; - top: 150%; - bottom: 0; } -` - - -var ActionSheet = /** @class */ (function (_super) { - __extends(ActionSheet, _super); - function ActionSheet() { - var _this = _super !== null && _super.apply(this, arguments) || this; - _this.handleMaskClick = function (e) { - _this.hide(); - _this.fire('close'); - }; - return _this; +/** + * o-transition element based on vue-transition + * Tom Fales (@enlightenmentor) + * Licensed under the MIT License + * https://github.com/enlightenmentor/vue-transition/blob/master/LICENSE + * + * modified by dntzhang + * + */ +var Transition = /** @class */ (function (_super) { + __extends(Transition, _super); + function Transition() { + return _super !== null && _super.apply(this, arguments) || this; } - ActionSheet.prototype.renderMenuItem = function () { + Transition.prototype.installed = function () { var _this = this; - return this.props.menus.map(function (menu, idx) { - var _a; - var label = menu.label, className = menu.className, others = __rest(menu, ["label", "className"]); - var cls = classNames((_a = { - 'o-actionsheet__cell': true - }, - _a[className] = className, - _a)); - return (h("div", __assign({ key: idx, onClick: function (_) { - _this.hide(); - _this.fire('itemClick', menu); - } }, others, { class: cls }), label)); - }); + this.transitionTarget = this.childNodes[0]; + this.enter(); + if (this.props.leavingTime) { + setTimeout(function () { + _this.leave(); + }, this.props.leavingTime); + } }; - ActionSheet.prototype.show = function () { - this.updateProps({ - show: true - }); + Transition.prototype.enter = function () { + this.fire('BeforeEnter'); + this.fire('beforeEnter'); + this.transitionTarget.classList.remove(this.props.name + '-leave-active'); + this.transitionTarget.classList.remove(this.props.name + '-leave-to'); + this.transitionTarget.classList.add(this.props.name + '-enter'); + this.transitionTarget.classList.add(this.props.name + '-enter-active'); + this.callback = function () { + this.transitionTarget.classList.remove(this.props.name + '-enter-active'); + this.fire('AfterEnter'); + this.fire('afterEnter'); + }.bind(this); + this.once('transitionend', this.callback); + this.once('animationend', this.callback); + window.setTimeout(function () { + this.transitionTarget.classList.remove(this.props.name + '-enter'); + this.transitionTarget.classList.add(this.props.name + '-enter-to'); + this.fire('enter'); + }.bind(this), 0); }; - ActionSheet.prototype.hide = function () { - this.updateProps({ - show: false - }); + Transition.prototype.leave = function () { + this.fire('BeforeLeave'); + this.fire('beforeLeave'); + this.transitionTarget.classList.remove(this.props.name + '-enter-active'); + this.transitionTarget.classList.remove(this.props.name + '-enter-to'); + this.transitionTarget.classList.add(this.props.name + '-leave'); + this.transitionTarget.classList.add(this.props.name + '-leave-active'); + this.callback = function (e) { + this.transitionTarget.classList.remove(this.props.name + '-leave-active'); + this.fire('AfterLeave'); + this.fire('afterLeave'); + if (this.props.autoRemove && this.parentNode) { + this.parentNode.removeChild(this); + } + }.bind(this); + this.once('transitionend', this.callback); + this.once('animationend', this.callback); + window.setTimeout(function () { + this.transitionTarget.classList.remove(this.props.name + '-leave'); + this.transitionTarget.classList.add(this.props.name + '-leave-to'); + this.fire('leave'); + }.bind(this), 0); }; - ActionSheet.prototype.renderActions = function () { - var _this = this; - return this.props.actions.map(function (action, idx) { - var _a; - var label = action.label, className = action.className, others = __rest(action, ["label", "className"]); - var cls = classNames((_a = { - 'o-actionsheet__cell': true - }, - _a[className] = className, - _a)); - return (h("div", __assign({ key: idx }, others, { onClick: function (_) { - _this.hide(); - _this.fire('itemClick', action); - }, className: cls }), label)); - }); + Transition.prototype.once = function (name, callback) { + var wrapCall = function () { + this.removeEventListener(name, wrapCall); + callback(); + }.bind(this); + this.addEventListener(name, wrapCall); }; - ActionSheet.prototype.render = function () { - var _a = this.props, show = _a.show, type = _a.type, menus = _a.menus, actions = _a.actions, others = __rest(_a, ["show", "type", "menus", "actions"]); - var cls = classNames({ - 'o-actionsheet': true, - 'o-actionsheet_toggle': show - }); - var styleType = type ? type : 'ios'; - return (h("div", { className: styleType === 'android' ? 'o-skin_android' : '' }, - h("div", { class: "mask", style: { display: show ? 'block' : 'none' }, onClick: this.handleMaskClick }), - h("div", __assign({ className: cls }, others), - h("div", { className: "o-actionsheet__menu" }, this.renderMenuItem()), - h("div", { className: "o-actionsheet__action" }, this.renderActions())))); + Transition.prototype.render = function () { + return; }; - ActionSheet.css = css; - ActionSheet.defaultProps = { - type: '', - menus: [], - actions: [], - show: false + Transition.propTypes = { + name: String, + leavingTime: Number, + autoRemove: Boolean }; - ActionSheet.propTypes = { - type: String, - menus: Array, - actions: Array, - show: Boolean + Transition.isLightDom = true; + Transition.defaultProps = { + name: 'o' }; - ActionSheet = __decorate([ - tag('o-action-sheet') - ], ActionSheet); - return ActionSheet; + Transition = __decorate([ + tag('o-transition') + ], Transition); + return Transition; }(WeElement)); -export default ActionSheet; +export default Transition; //# sourceMappingURL=index.esm.js.map diff --git a/components/transition/src/index.esm.js.map b/components/transition/src/index.esm.js.map index 269ad9fd1..997d802eb 100644 --- a/components/transition/src/index.esm.js.map +++ b/components/transition/src/index.esm.js.map @@ -1 +1 @@ -{"version":3,"file":"index.esm.js","sources":["../node_modules/_tslib@1.11.1@tslib/tslib.es6.js","index.tsx"],"sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation. All rights reserved.\r\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\r\nthis file except in compliance with the License. You may obtain a copy of the\r\nLicense at http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nTHIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\nKIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\r\nWARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\r\nMERCHANTABLITY OR NON-INFRINGEMENT.\r\n\r\nSee the Apache Version 2.0 License for specific language governing permissions\r\nand limitations under the License.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\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;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport function __exportStar(m, exports) {\r\n for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n};\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\r\n result.default = mod;\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, privateMap) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to get private field on non-instance\");\r\n }\r\n return privateMap.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, privateMap, value) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to set private field on non-instance\");\r\n }\r\n privateMap.set(receiver, value);\r\n return value;\r\n}\r\n","import { tag, WeElement, classNames, h } from 'omi'\nimport * as css from './index.scss'\n\n\ninterface Props {\n type: string,\n menus: any[],\n actions: any[],\n show: boolean\n}\n\n\n@tag('o-action-sheet')\nexport default class ActionSheet extends WeElement {\n static css = css\n\n static defaultProps = {\n type: '',\n menus: [],\n actions: [],\n show: false\n }\n\n static propTypes = {\n type: String,\n menus: Array,\n actions: Array,\n show: Boolean\n }\n\n\n renderMenuItem() {\n return this.props.menus.map((menu, idx) => {\n const { label, className, ...others } = menu\n const cls = classNames({\n 'o-actionsheet__cell': true,\n [className]: className\n })\n\n return (\n
{\n this.hide()\n this.fire('itemClick', menu)\n }} {...others} class={cls}>\n {label}\n
\n )\n })\n }\n\n show() {\n this.updateProps({\n show: true\n })\n }\n\n hide() {\n this.updateProps({\n show: false\n })\n }\n\n renderActions() {\n return this.props.actions.map((action, idx) => {\n const { label, className, ...others } = action\n const cls = classNames({\n 'o-actionsheet__cell': true,\n [className]: className\n })\n\n return (\n
{\n this.hide()\n this.fire('itemClick', action)\n }} className={cls}>\n {label}\n
\n )\n })\n }\n\n handleMaskClick = e => {\n this.hide()\n this.fire('close')\n }\n\n render() {\n const { show, type, menus, actions, ...others } = this.props\n const cls = classNames({\n 'o-actionsheet': true,\n 'o-actionsheet_toggle': show\n })\n\n let styleType = type ? type : 'ios'\n\n return (\n
\n \n
\n
{this.renderMenuItem()}
\n
{this.renderActions()}
\n
\n
\n )\n }\n}\n"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"index.esm.js","sources":["../node_modules/_tslib@1.11.1@tslib/tslib.es6.js","index.tsx"],"sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation. All rights reserved.\r\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\r\nthis file except in compliance with the License. You may obtain a copy of the\r\nLicense at http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nTHIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\nKIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\r\nWARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\r\nMERCHANTABLITY OR NON-INFRINGEMENT.\r\n\r\nSee the Apache Version 2.0 License for specific language governing permissions\r\nand limitations under the License.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\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;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport function __exportStar(m, exports) {\r\n for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n};\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\r\n result.default = mod;\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, privateMap) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to get private field on non-instance\");\r\n }\r\n return privateMap.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, privateMap, value) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to set private field on non-instance\");\r\n }\r\n privateMap.set(receiver, value);\r\n return value;\r\n}\r\n","/**\n * o-transition element based on vue-transition\n * Tom Fales (@enlightenmentor)\n * Licensed under the MIT License\n * https://github.com/enlightenmentor/vue-transition/blob/master/LICENSE\n *\n * modified by dntzhang\n *\n */\n\n//todo duration and delay support\n\nimport { tag, WeElement } from 'omi'\n\ninterface Props {\n name: string\n leavingTime?: number\n autoRemove?: boolean\n}\n\n@tag('o-transition')\nexport default class Transition extends WeElement{\n\n static propTypes = {\n name: String,\n leavingTime: Number,\n autoRemove: Boolean\n }\n\n static isLightDom = true\n\n static defaultProps = {\n name: 'o'\n }\n\n transitionTarget\n\n installed() {\n\n this.transitionTarget = this.childNodes[0]\n this.enter()\n\n if (this.props.leavingTime) {\n setTimeout(() => {\n this.leave()\n }, this.props.leavingTime)\n }\n }\n\n callback: () => void\n\n enter() {\n\n this.fire('BeforeEnter')\n this.fire('beforeEnter')\n this.transitionTarget.classList.remove(this.props.name + '-leave-active')\n this.transitionTarget.classList.remove(this.props.name + '-leave-to')\n this.transitionTarget.classList.add(this.props.name + '-enter')\n this.transitionTarget.classList.add(this.props.name + '-enter-active')\n\n this.callback = function () {\n this.transitionTarget.classList.remove(this.props.name + '-enter-active')\n this.fire('AfterEnter')\n this.fire('afterEnter')\n }.bind(this)\n this.once('transitionend', this.callback)\n this.once('animationend', this.callback)\n\n window.setTimeout(function () {\n this.transitionTarget.classList.remove(this.props.name + '-enter')\n this.transitionTarget.classList.add(this.props.name + '-enter-to')\n this.fire('enter')\n }.bind(this), 0)\n }\n\n leave() {\n this.fire('BeforeLeave')\n this.fire('beforeLeave')\n this.transitionTarget.classList.remove(this.props.name + '-enter-active')\n this.transitionTarget.classList.remove(this.props.name + '-enter-to')\n this.transitionTarget.classList.add(this.props.name + '-leave')\n this.transitionTarget.classList.add(this.props.name + '-leave-active')\n\n this.callback = function (e) {\n\n this.transitionTarget.classList.remove(this.props.name + '-leave-active')\n\n this.fire('AfterLeave')\n this.fire('afterLeave')\n if (this.props.autoRemove && this.parentNode) {\n this.parentNode.removeChild(this)\n }\n\n }.bind(this)\n this.once('transitionend', this.callback)\n this.once('animationend', this.callback)\n\n window.setTimeout(function () {\n this.transitionTarget.classList.remove(this.props.name + '-leave')\n this.transitionTarget.classList.add(this.props.name + '-leave-to')\n this.fire('leave')\n }.bind(this), 0)\n }\n\n once(name, callback) {\n const wrapCall = function () {\n this.removeEventListener(name, wrapCall)\n callback()\n }.bind(this)\n this.addEventListener(name, wrapCall)\n }\n\n render() {\n return\n }\n}\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/components/transition/src/index.js b/components/transition/src/index.js index 1fd655a70..973314867 100644 --- a/components/transition/src/index.js +++ b/components/transition/src/index.js @@ -1,13 +1,13 @@ (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') - module.exports = factory(require("omi")); + module.exports = factory(); else if(typeof define === 'function' && define.amd) - define(["omi"], factory); + define([], factory); else if(typeof exports === 'object') - exports["OTransition"] = factory(require("omi")); + exports["OTransition"] = factory(); else - root["OTransition"] = factory(root["Omi"]); -})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) { + root["OTransition"] = factory(); +})(this, function() { return /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; @@ -96,406 +96,14 @@ return /******/ (function(modules) { // webpackBootstrap /************************************************************************/ /******/ ({ -/***/ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/msg.scss": -/*!**************************************************************************************************************************************************************************************************!*\ - !*** ./node_modules/_css-loader@1.0.1@css-loader!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./src/msg.scss ***! - \**************************************************************************************************************************************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -exports = module.exports = __webpack_require__(/*! ../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js */ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js")(false); -// imports - - -// module -exports.push([module.i, ".o-message__closeBtn:focus,\n.o-message__content:focus {\n outline-width: 0; }\n\n.o-message {\n min-width: 380px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: #EBEEF5;\n position: fixed;\n left: 50%;\n top: 20px;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n background-color: #edf2fc;\n -webkit-transition: opacity .3s, top .4s, -webkit-transform .4s;\n transition: opacity .3s, top .4s, -webkit-transform .4s;\n transition: opacity .3s, transform .4s, top .4s;\n transition: opacity .3s, transform .4s, top .4s, -webkit-transform .4s;\n overflow: hidden;\n padding: 15px 15px 15px 20px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n\n.o-message.is-center {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center; }\n\n.o-message.is-closable .o-message__content {\n padding-right: 16px; }\n\n.o-message p {\n margin: 0; }\n\n.o-message--info .o-message__content {\n color: #909399; }\n\n.o-message--success {\n background-color: #f0f9eb;\n border-color: #e1f3d8; }\n\n.o-message--success .o-message__content {\n color: #07c160;\n color: var(--o-primary, #07c160); }\n\n.o-message--warning {\n background-color: #fdf6ec;\n border-color: #faecd8; }\n\n.o-message--warning .o-message__content {\n color: #E6A23C; }\n\n.o-message--error {\n background-color: #fef0f0;\n border-color: #fde2e2; }\n\n.o-message--error .o-message__content {\n color: #F56C6C; }\n\n.o-message__icon {\n margin-right: 10px; }\n\n.o-message__content {\n padding: 0;\n font-size: 14px;\n line-height: 1; }\n\n.o-message__closeBtn {\n position: absolute;\n top: 50%;\n right: 15px;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n cursor: pointer;\n color: #C0C4CC;\n font-size: 16px; }\n\n.o-message__closeBtn:hover {\n color: #909399; }\n\n.o-message .o-icon-success {\n color: #07c160;\n color: var(--o-primary, #07c160); }\n\n.o-message .o-icon-error {\n color: #F56C6C; }\n\n.o-message .o-icon-info {\n color: #909399; }\n\n.o-message .o-icon-warning {\n color: #E6A23C; }\n\n.o-message-fade-enter,\n.o-message-fade-leave-active {\n opacity: 0;\n -webkit-transform: translate(-50%, -100%);\n transform: translate(-50%, -100%); }\n\n.msgbox-fade-enter-active {\n -webkit-animation: msgbox-fade-in .3s;\n animation: msgbox-fade-in .3s; }\n\n.msgbox-fade-leave-active {\n -webkit-animation: msgbox-fade-out .3s;\n animation: msgbox-fade-out .3s; }\n\n@-webkit-keyframes msgbox-fade-in {\n 0% {\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n opacity: 0; }\n 100% {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1; } }\n\n@keyframes msgbox-fade-in {\n 0% {\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n opacity: 0; }\n 100% {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1; } }\n\n@-webkit-keyframes msgbox-fade-out {\n 0% {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1; }\n 100% {\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n opacity: 0; } }\n\n@keyframes msgbox-fade-out {\n 0% {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n opacity: 1; }\n 100% {\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n opacity: 0; } }\n\n.fade-enter-active,\n.fade-leave-active {\n transition: opacity .5s; }\n\n.fade-enter,\n.fade-leave-to {\n opacity: 0; }\n", ""]); - -// exports - - -/***/ }), - -/***/ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js": -/*!*******************************************************************!*\ - !*** ./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js ***! - \*******************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { - -/* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra -*/ -// css base code, injected by the css-loader -module.exports = function(useSourceMap) { - var list = []; - - // return the list of modules as css string - list.toString = function toString() { - return this.map(function (item) { - var content = cssWithMappingToString(item, useSourceMap); - if(item[2]) { - return "@media " + item[2] + "{" + content + "}"; - } else { - return content; - } - }).join(""); - }; - - // import a list of modules into the list - list.i = function(modules, mediaQuery) { - if(typeof modules === "string") - modules = [[null, modules, ""]]; - var alreadyImportedModules = {}; - for(var i = 0; i < this.length; i++) { - var id = this[i][0]; - if(typeof id === "number") - alreadyImportedModules[id] = true; - } - for(i = 0; i < modules.length; i++) { - var item = modules[i]; - // skip already imported module - // this implementation is not 100% perfect for weird media query combinations - // when a module is imported multiple times with different media queries. - // I hope this will never occur (Hey this way we have smaller bundles) - if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { - if(mediaQuery && !item[2]) { - item[2] = mediaQuery; - } else if(mediaQuery) { - item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; - } - list.push(item); - } - } - }; - return list; -}; - -function cssWithMappingToString(item, useSourceMap) { - var content = item[1] || ''; - var cssMapping = item[3]; - if (!cssMapping) { - return content; - } - - if (useSourceMap && typeof btoa === 'function') { - var sourceMapping = toComment(cssMapping); - var sourceURLs = cssMapping.sources.map(function (source) { - return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */' - }); - - return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); - } - - return [content].join('\n'); -} - -// Adapted from convert-source-map (MIT) -function toComment(sourceMap) { - // eslint-disable-next-line no-undef - var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); - var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64; - - return '/*# ' + data + ' */'; -} - - -/***/ }), - -/***/ "./src/index.tsx": -/*!***********************!*\ - !*** ./src/index.tsx ***! - \***********************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - -/** - * o-transition element based on vue-transition - * Tom Fales (@enlightenmentor) - * Licensed under the MIT License - * https://github.com/enlightenmentor/vue-transition/blob/master/LICENSE - * - * modified by dntzhang - * - */ -var __extends = (this && this.__extends) || (function () { - var extendStatics = function (d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; - return extendStatics(d, b); - }; - return function (d, b) { - extendStatics(d, b); - function __() { this.constructor = d; } - d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); - }; -})(); -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); - 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; - return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -Object.defineProperty(exports, "__esModule", { value: true }); -//todo duration and delay support -var omi_1 = __webpack_require__(/*! omi */ "omi"); -var Transition = /** @class */ (function (_super) { - __extends(Transition, _super); - function Transition() { - return _super !== null && _super.apply(this, arguments) || this; - } - Transition.prototype.installed = function () { - // if (this.props.show && this.props.appear) { - // this.appearing() - // console.log(1111111) - // } - this.enter(); - }; - Transition.prototype.toggle = function () { - this.props.show = !this.props.show; - if (this.props.show) - this.enter(); - else - this.leave(); - }; - Transition.prototype.receiveProps = function (props) { - if (props.show) - this.enter(); - else - this.leave(); - }; - Transition.prototype.appearing = function () { - this.fire('before-appear'); - this.classList.add(this.props.name + '-appear'); - this.classList.add(this.props.name + '-appear-active'); - this.callback = function () { - this.classList.remove(this.props.name + '-appear-to'); - this.classList.remove(this.props.name + '-appear-active'); - this.fire('after-appear'); - }.bind(this); - this.once('transitionend', this.callback); - this.once('animationend', this.callback); - window.setTimeout(function () { - this.classList.remove(this.props.name + '-appear'); - this.classList.add(this.props.name + '-appear-to'); - this.fire('appear'); - }.bind(this), 0); - }; - Transition.prototype.enter = function () { - if (this.props.removable && this.children.length == 0) { - this.appendChild(this._tempNode); - } - this.fire('before-enter'); - this.classList.remove(this.props.name + '-leave-active'); - this.classList.remove(this.props.name + '-leave-to'); - this.classList.add(this.props.name + '-enter'); - this.classList.add(this.props.name + '-enter-active'); - this.callback = function () { - this.classList.remove(this.props.name + '-enter-active'); - this.fire('after-enter'); - }.bind(this); - this.once('transitionend', this.callback); - this.once('animationend', this.callback); - window.setTimeout(function () { - this.classList.remove(this.props.name + '-enter'); - this.classList.add(this.props.name + '-enter-to'); - this.fire('enter'); - }.bind(this), 0); - }; - Transition.prototype.leave = function () { - this.fire('before-leave'); - this.classList.remove(this.props.name + '-enter-active'); - this.classList.remove(this.props.name + '-enter-to'); - this.classList.add(this.props.name + '-leave'); - this.classList.add(this.props.name + '-leave-active'); - this.callback = function (e) { - //if (!this.props.show) { - this.classList.remove(this.props.name + '-leave-active'); - this.fire('after-leave'); - this._tempNode = this.children[0]; - if (this.props.removable) { - this._tempNode.parentNode.removeChild(this._tempNode); - this.fire('removed'); - } - //} - }.bind(this); - this.once('transitionend', this.callback); - this.once('animationend', this.callback); - window.setTimeout(function () { - this.classList.remove(this.props.name + '-leave'); - this.classList.add(this.props.name + '-leave-to'); - this.fire('leave'); - }.bind(this), 0); - }; - Transition.prototype.once = function (name, callback) { - var wrapCall = function () { - this.removeEventListener(name, wrapCall); - callback(); - }.bind(this); - this.addEventListener(name, wrapCall); - }; - Transition.prototype.render = function (props) { - console.log(22); - if (props.removed) - return; - //注入 props.name 到 props.children[0] - return props.children[0]; - }; - Transition.propTypes = { - name: String, - appear: Boolean, - show: Boolean, - removable: Boolean, - removed: Boolean - }; - Transition.isLightDom = true; - Transition.defaultProps = { - name: 'o', - appear: false, - show: false - }; - Transition = __decorate([ - omi_1.tag('o-transition') - ], Transition); - return Transition; -}(omi_1.WeElement)); -exports.default = Transition; - - -/***/ }), - -/***/ "./src/msg.scss": -/*!**********************!*\ - !*** ./src/msg.scss ***! - \**********************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - - - var result = __webpack_require__(/*! !../node_modules/_css-loader@1.0.1@css-loader!../node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!../node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./msg.scss */ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/msg.scss"); - - if (typeof result === "string") { - module.exports = result; - } else { - module.exports = result.toString(); - } - - -/***/ }), - /***/ "./src/msg.tsx": /*!*********************!*\ !*** ./src/msg.tsx ***! \*********************/ /*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - -var __extends = (this && this.__extends) || (function () { - var extendStatics = function (d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; - return extendStatics(d, b); - }; - return function (d, b) { - extendStatics(d, b); - function __() { this.constructor = d; } - 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); - 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; - return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -Object.defineProperty(exports, "__esModule", { value: true }); -var omi_1 = __webpack_require__(/*! omi */ "omi"); -var css = __webpack_require__(/*! ./msg.scss */ "./src/msg.scss"); -__webpack_require__(/*! ./index.tsx */ "./src/index.tsx"); -var Message = /** @class */ (function (_super) { - __extends(Message, _super); - function Message() { - var _this = _super !== null && _super.apply(this, arguments) || this; - _this.enter = true; - return _this; - } - Message.prototype.installed = function () { - // setTimeout(() => { - // this.enter = false - // this.update() - // }) - var _this = this; - // setTimeout(() => { - // this.enter = true - // this.update() - // }, this.props.duration + 400) - // setTimeout(() => { - // this.parentNode.removeChild(this) - // }, this.props.duration + 400 + 400) - setTimeout(function () { - _this.transition.leave(); - console.log('leave'); - }, 3400); - }; - Message.prototype.render = function (props) { - var _a; - var _this = this; - console.log(111); - return (omi_1.h("o-transition", { ref: function (_) { return _this.transition = _; }, show: true, style: "display:block;", name: "fade" }, - omi_1.h("div", __assign({}, omi_1.extractClass(props, 'o-message', (_a = {}, - _a['o-message--' + props.type] = props.type, - _a['is-closable'] = props.closable, - _a['is-center'] = props.center, - _a)), { style: "top: 20px; z-index: 2000;" }), - omi_1.h("p", { class: "o-message__content" }, props.message), - props.showClose && omi_1.h("i", { class: "o-message__closeBtn o-icon-close" })))); - }; - Message.css = css; - Message.defaultProps = { - duration: 3000 - }; - Message.propTypes = { - showClose: Boolean, - type: String, - message: String, - center: Boolean, - duration: Number - }; - Message = __decorate([ - omi_1.tag('o-message') - ], Message); - return Message; -}(omi_1.WeElement)); -exports.default = Message; - - -/***/ }), - -/***/ "omi": -/*!******************************************************************************!*\ - !*** external {"commonjs":"omi","commonjs2":"omi","amd":"omi","root":"Omi"} ***! - \******************************************************************************/ -/*! no static exports found */ /***/ (function(module, exports) { -module.exports = __WEBPACK_EXTERNAL_MODULE_omi__; +throw new Error("Module build failed (from ./node_modules/_ts-loader@5.4.5@ts-loader/index.js):\nError: ENOENT: no such file or directory, open '/Users/dntzhang/Documents/GitHub/omi/components/transition/src/msg.tsx'"); /***/ }) diff --git a/components/transition/src/index.js.map b/components/transition/src/index.js.map index 7472e62d1..411cb7e22 100644 --- a/components/transition/src/index.js.map +++ b/components/transition/src/index.js.map @@ -1 +1 @@ -{"version":3,"sources":["webpack://OTransition/webpack/universalModuleDefinition","webpack://OTransition/webpack/bootstrap","webpack://OTransition/./src/msg.scss","webpack://OTransition/./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js","webpack://OTransition/./src/index.tsx","webpack://OTransition/./src/msg.scss?0dfe","webpack://OTransition/./src/msg.tsx","webpack://OTransition/external {\"commonjs\":\"omi\",\"commonjs2\":\"omi\",\"amd\":\"omi\",\"root\":\"Omi\"}"],"names":[],"mappings":"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BAAK;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;;;;;;;;;;;;;ACvJA,qBAAqB,mBAAO,CAAC,uYAA+M;;AAE5O;AACA;AACA,SAAS;AACT;AACA;;;;;;;;;;;;;ACPa;AACb;AACA;AACA;AACA,cAAc,gBAAgB,sCAAsC,iBAAiB,EAAE;AACvF,6BAA6B,uDAAuD;AACpF;AACA;AACA;AACA;AACA,uBAAuB,sBAAsB;AAC7C;AACA;AACA,CAAC;AACD;AACA;AACA,gDAAgD,OAAO;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4CAA4C,QAAQ;AACpD;AACA;AACA,8CAA8C,cAAc;AAC5D,YAAY,mBAAO,CAAC,gBAAK;AACzB,UAAU,mBAAO,CAAC,kCAAY;AAC9B,mBAAO,CAAC,oCAAa;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY;AACZ;AACA;AACA;AACA;AACA,YAAY;AACZ;AACA;AACA,YAAY;AACZ;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,yCAAyC,oBAAoB,6BAA6B,EAAE,oCAAoC,iBAAiB;AACjJ,sCAAsC,iDAAiD;AACvF;AACA;AACA;AACA,uBAAuB,mBAAmB,eAAe,GAAG;AAC5D,8BAA8B,8BAA8B;AAC5D,iDAAiD,4CAA4C;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD;;;;;;;;;;;;ACzFA,iD","file":"index.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"omi\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"omi\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"OTransition\"] = factory(require(\"omi\"));\n\telse\n\t\troot[\"OTransition\"] = factory(root[\"Omi\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./src/msg.tsx\");\n","exports = module.exports = require(\"../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \".o-message__closeBtn:focus,\\n.o-message__content:focus {\\n outline-width: 0; }\\n\\n.o-message {\\n min-width: 380px;\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box;\\n border-radius: 4px;\\n border-width: 1px;\\n border-style: solid;\\n border-color: #EBEEF5;\\n position: fixed;\\n left: 50%;\\n top: 20px;\\n -webkit-transform: translateX(-50%);\\n transform: translateX(-50%);\\n background-color: #edf2fc;\\n -webkit-transition: opacity .3s, top .4s, -webkit-transform .4s;\\n transition: opacity .3s, top .4s, -webkit-transform .4s;\\n transition: opacity .3s, transform .4s, top .4s;\\n transition: opacity .3s, transform .4s, top .4s, -webkit-transform .4s;\\n overflow: hidden;\\n padding: 15px 15px 15px 20px;\\n display: -webkit-box;\\n display: -ms-flexbox;\\n display: flex;\\n -webkit-box-align: center;\\n -ms-flex-align: center;\\n align-items: center; }\\n\\n.o-message.is-center {\\n -webkit-box-pack: center;\\n -ms-flex-pack: center;\\n justify-content: center; }\\n\\n.o-message.is-closable .o-message__content {\\n padding-right: 16px; }\\n\\n.o-message p {\\n margin: 0; }\\n\\n.o-message--info .o-message__content {\\n color: #909399; }\\n\\n.o-message--success {\\n background-color: #f0f9eb;\\n border-color: #e1f3d8; }\\n\\n.o-message--success .o-message__content {\\n color: #07c160;\\n color: var(--o-primary, #07c160); }\\n\\n.o-message--warning {\\n background-color: #fdf6ec;\\n border-color: #faecd8; }\\n\\n.o-message--warning .o-message__content {\\n color: #E6A23C; }\\n\\n.o-message--error {\\n background-color: #fef0f0;\\n border-color: #fde2e2; }\\n\\n.o-message--error .o-message__content {\\n color: #F56C6C; }\\n\\n.o-message__icon {\\n margin-right: 10px; }\\n\\n.o-message__content {\\n padding: 0;\\n font-size: 14px;\\n line-height: 1; }\\n\\n.o-message__closeBtn {\\n position: absolute;\\n top: 50%;\\n right: 15px;\\n -webkit-transform: translateY(-50%);\\n transform: translateY(-50%);\\n cursor: pointer;\\n color: #C0C4CC;\\n font-size: 16px; }\\n\\n.o-message__closeBtn:hover {\\n color: #909399; }\\n\\n.o-message .o-icon-success {\\n color: #07c160;\\n color: var(--o-primary, #07c160); }\\n\\n.o-message .o-icon-error {\\n color: #F56C6C; }\\n\\n.o-message .o-icon-info {\\n color: #909399; }\\n\\n.o-message .o-icon-warning {\\n color: #E6A23C; }\\n\\n.o-message-fade-enter,\\n.o-message-fade-leave-active {\\n opacity: 0;\\n -webkit-transform: translate(-50%, -100%);\\n transform: translate(-50%, -100%); }\\n\\n.msgbox-fade-enter-active {\\n -webkit-animation: msgbox-fade-in .3s;\\n animation: msgbox-fade-in .3s; }\\n\\n.msgbox-fade-leave-active {\\n -webkit-animation: msgbox-fade-out .3s;\\n animation: msgbox-fade-out .3s; }\\n\\n@-webkit-keyframes msgbox-fade-in {\\n 0% {\\n -webkit-transform: translate3d(0, -20px, 0);\\n transform: translate3d(0, -20px, 0);\\n opacity: 0; }\\n 100% {\\n -webkit-transform: translate3d(0, 0, 0);\\n transform: translate3d(0, 0, 0);\\n opacity: 1; } }\\n\\n@keyframes msgbox-fade-in {\\n 0% {\\n -webkit-transform: translate3d(0, -20px, 0);\\n transform: translate3d(0, -20px, 0);\\n opacity: 0; }\\n 100% {\\n -webkit-transform: translate3d(0, 0, 0);\\n transform: translate3d(0, 0, 0);\\n opacity: 1; } }\\n\\n@-webkit-keyframes msgbox-fade-out {\\n 0% {\\n -webkit-transform: translate3d(0, 0, 0);\\n transform: translate3d(0, 0, 0);\\n opacity: 1; }\\n 100% {\\n -webkit-transform: translate3d(0, -20px, 0);\\n transform: translate3d(0, -20px, 0);\\n opacity: 0; } }\\n\\n@keyframes msgbox-fade-out {\\n 0% {\\n -webkit-transform: translate3d(0, 0, 0);\\n transform: translate3d(0, 0, 0);\\n opacity: 1; }\\n 100% {\\n -webkit-transform: translate3d(0, -20px, 0);\\n transform: translate3d(0, -20px, 0);\\n opacity: 0; } }\\n\\n.fade-enter-active,\\n.fade-leave-active {\\n transition: opacity .5s; }\\n\\n.fade-enter,\\n.fade-leave-to {\\n opacity: 0; }\\n\", \"\"]);\n\n// exports\n","/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\nmodule.exports = function(useSourceMap) {\n\tvar list = [];\n\n\t// return the list of modules as css string\n\tlist.toString = function toString() {\n\t\treturn this.map(function (item) {\n\t\t\tvar content = cssWithMappingToString(item, useSourceMap);\n\t\t\tif(item[2]) {\n\t\t\t\treturn \"@media \" + item[2] + \"{\" + content + \"}\";\n\t\t\t} else {\n\t\t\t\treturn content;\n\t\t\t}\n\t\t}).join(\"\");\n\t};\n\n\t// import a list of modules into the list\n\tlist.i = function(modules, mediaQuery) {\n\t\tif(typeof modules === \"string\")\n\t\t\tmodules = [[null, modules, \"\"]];\n\t\tvar alreadyImportedModules = {};\n\t\tfor(var i = 0; i < this.length; i++) {\n\t\t\tvar id = this[i][0];\n\t\t\tif(typeof id === \"number\")\n\t\t\t\talreadyImportedModules[id] = true;\n\t\t}\n\t\tfor(i = 0; i < modules.length; i++) {\n\t\t\tvar item = modules[i];\n\t\t\t// skip already imported module\n\t\t\t// this implementation is not 100% perfect for weird media query combinations\n\t\t\t// when a module is imported multiple times with different media queries.\n\t\t\t// I hope this will never occur (Hey this way we have smaller bundles)\n\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\n\t\t\t\tif(mediaQuery && !item[2]) {\n\t\t\t\t\titem[2] = mediaQuery;\n\t\t\t\t} else if(mediaQuery) {\n\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\n\t\t\t\t}\n\t\t\t\tlist.push(item);\n\t\t\t}\n\t\t}\n\t};\n\treturn list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n\tvar content = item[1] || '';\n\tvar cssMapping = item[3];\n\tif (!cssMapping) {\n\t\treturn content;\n\t}\n\n\tif (useSourceMap && typeof btoa === 'function') {\n\t\tvar sourceMapping = toComment(cssMapping);\n\t\tvar sourceURLs = cssMapping.sources.map(function (source) {\n\t\t\treturn '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'\n\t\t});\n\n\t\treturn [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n\t}\n\n\treturn [content].join('\\n');\n}\n\n// Adapted from convert-source-map (MIT)\nfunction toComment(sourceMap) {\n\t// eslint-disable-next-line no-undef\n\tvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n\tvar data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;\n\n\treturn '/*# ' + data + ' */';\n}\n","\"use strict\";\n/**\n * o-transition element based on vue-transition\n * Tom Fales (@enlightenmentor)\n * Licensed under the MIT License\n * https://github.com/enlightenmentor/vue-transition/blob/master/LICENSE\n *\n * modified by dntzhang\n *\n */\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 });\n//todo duration and delay support\nvar omi_1 = require(\"omi\");\nvar Transition = /** @class */ (function (_super) {\n __extends(Transition, _super);\n function Transition() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n Transition.prototype.installed = function () {\n // if (this.props.show && this.props.appear) {\n // this.appearing()\n // console.log(1111111)\n // }\n this.enter();\n };\n Transition.prototype.toggle = function () {\n this.props.show = !this.props.show;\n if (this.props.show)\n this.enter();\n else\n this.leave();\n };\n Transition.prototype.receiveProps = function (props) {\n if (props.show)\n this.enter();\n else\n this.leave();\n };\n Transition.prototype.appearing = function () {\n this.fire('before-appear');\n this.classList.add(this.props.name + '-appear');\n this.classList.add(this.props.name + '-appear-active');\n this.callback = function () {\n this.classList.remove(this.props.name + '-appear-to');\n this.classList.remove(this.props.name + '-appear-active');\n this.fire('after-appear');\n }.bind(this);\n this.once('transitionend', this.callback);\n this.once('animationend', this.callback);\n window.setTimeout(function () {\n this.classList.remove(this.props.name + '-appear');\n this.classList.add(this.props.name + '-appear-to');\n this.fire('appear');\n }.bind(this), 0);\n };\n Transition.prototype.enter = function () {\n if (this.props.removable && this.children.length == 0) {\n this.appendChild(this._tempNode);\n }\n this.fire('before-enter');\n this.classList.remove(this.props.name + '-leave-active');\n this.classList.remove(this.props.name + '-leave-to');\n this.classList.add(this.props.name + '-enter');\n this.classList.add(this.props.name + '-enter-active');\n this.callback = function () {\n this.classList.remove(this.props.name + '-enter-active');\n this.fire('after-enter');\n }.bind(this);\n this.once('transitionend', this.callback);\n this.once('animationend', this.callback);\n window.setTimeout(function () {\n this.classList.remove(this.props.name + '-enter');\n this.classList.add(this.props.name + '-enter-to');\n this.fire('enter');\n }.bind(this), 0);\n };\n Transition.prototype.leave = function () {\n this.fire('before-leave');\n this.classList.remove(this.props.name + '-enter-active');\n this.classList.remove(this.props.name + '-enter-to');\n this.classList.add(this.props.name + '-leave');\n this.classList.add(this.props.name + '-leave-active');\n this.callback = function (e) {\n //if (!this.props.show) {\n this.classList.remove(this.props.name + '-leave-active');\n this.fire('after-leave');\n this._tempNode = this.children[0];\n if (this.props.removable) {\n this._tempNode.parentNode.removeChild(this._tempNode);\n this.fire('removed');\n }\n //}\n }.bind(this);\n this.once('transitionend', this.callback);\n this.once('animationend', this.callback);\n window.setTimeout(function () {\n this.classList.remove(this.props.name + '-leave');\n this.classList.add(this.props.name + '-leave-to');\n this.fire('leave');\n }.bind(this), 0);\n };\n Transition.prototype.once = function (name, callback) {\n var wrapCall = function () {\n this.removeEventListener(name, wrapCall);\n callback();\n }.bind(this);\n this.addEventListener(name, wrapCall);\n };\n Transition.prototype.render = function (props) {\n console.log(22);\n if (props.removed)\n return;\n //注入 props.name 到 props.children[0]\n return props.children[0];\n };\n Transition.propTypes = {\n name: String,\n appear: Boolean,\n show: Boolean,\n removable: Boolean,\n removed: Boolean\n };\n Transition.isLightDom = true;\n Transition.defaultProps = {\n name: 'o',\n appear: false,\n show: false\n };\n Transition = __decorate([\n omi_1.tag('o-transition')\n ], Transition);\n return Transition;\n}(omi_1.WeElement));\nexports.default = Transition;\n","\n var result = require(\"!!../node_modules/_css-loader@1.0.1@css-loader/index.js!../node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!../node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./msg.scss\");\n\n if (typeof result === \"string\") {\n module.exports = result;\n } else {\n module.exports = result.toString();\n }\n ","\"use strict\";\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 = require(\"omi\");\nvar css = require(\"./msg.scss\");\nrequire(\"./index.tsx\");\nvar Message = /** @class */ (function (_super) {\n __extends(Message, _super);\n function Message() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.enter = true;\n return _this;\n }\n Message.prototype.installed = function () {\n // setTimeout(() => {\n // this.enter = false\n // this.update()\n // })\n var _this = this;\n // setTimeout(() => {\n // this.enter = true\n // this.update()\n // }, this.props.duration + 400)\n // setTimeout(() => {\n // this.parentNode.removeChild(this)\n // }, this.props.duration + 400 + 400)\n setTimeout(function () {\n _this.transition.leave();\n console.log('leave');\n }, 3400);\n };\n Message.prototype.render = function (props) {\n var _a;\n var _this = this;\n console.log(111);\n return (omi_1.h(\"o-transition\", { ref: function (_) { return _this.transition = _; }, show: true, style: \"display:block;\", name: \"fade\" },\n omi_1.h(\"div\", __assign({}, omi_1.extractClass(props, 'o-message', (_a = {},\n _a['o-message--' + props.type] = props.type,\n _a['is-closable'] = props.closable,\n _a['is-center'] = props.center,\n _a)), { style: \"top: 20px; z-index: 2000;\" }),\n omi_1.h(\"p\", { class: \"o-message__content\" }, props.message),\n props.showClose && omi_1.h(\"i\", { class: \"o-message__closeBtn o-icon-close\" }))));\n };\n Message.css = css;\n Message.defaultProps = {\n duration: 3000\n };\n Message.propTypes = {\n showClose: Boolean,\n type: String,\n message: String,\n center: Boolean,\n duration: Number\n };\n Message = __decorate([\n omi_1.tag('o-message')\n ], Message);\n return Message;\n}(omi_1.WeElement));\nexports.default = Message;\n","module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack://OTransition/webpack/universalModuleDefinition","webpack://OTransition/webpack/bootstrap"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;QCVA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA","file":"index.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"OTransition\"] = factory();\n\telse\n\t\troot[\"OTransition\"] = factory();\n})(this, function() {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./src/msg.tsx\");\n"],"sourceRoot":""} \ No newline at end of file diff --git a/components/transition/src/index.tsx b/components/transition/src/index.tsx index 0928dab59..b6f01eef4 100644 --- a/components/transition/src/index.tsx +++ b/components/transition/src/index.tsx @@ -10,14 +10,12 @@ //todo duration and delay support -import { tag, WeElement, h } from 'omi' +import { tag, WeElement } from 'omi' interface Props { - appear?: boolean, - show?: boolean, - name: string, - removable?: boolean, - removed?: boolean + name: string + leavingTime?: number + autoRemove?: boolean } @tag('o-transition') @@ -25,119 +23,81 @@ export default class Transition extends WeElement{ static propTypes = { name: String, - appear: Boolean, - show: Boolean, - removable: Boolean, - removed: Boolean - + leavingTime: Number, + autoRemove: Boolean } static isLightDom = true static defaultProps = { - name: 'o', - appear: false, - show: false + name: 'o' } + transitionTarget + installed() { - // if (this.props.show && this.props.appear) { - // this.appearing() - // console.log(1111111) - // } + this.transitionTarget = this.childNodes[0] this.enter() - } - toggle() { - this.props.show = !this.props.show - if (this.props.show) - this.enter() - else - this.leave() - } - - receiveProps(props) { - if (props.show) - this.enter() - else - this.leave() + if (this.props.leavingTime) { + setTimeout(() => { + this.leave() + }, this.props.leavingTime) + } } callback: () => void - appearing() { - this.fire('before-appear') - this.classList.add(this.props.name + '-appear') - this.classList.add(this.props.name + '-appear-active') - - this.callback = function () { - this.classList.remove(this.props.name + '-appear-to') - this.classList.remove(this.props.name + '-appear-active') - this.fire('after-appear') - }.bind(this) - this.once('transitionend', this.callback) - this.once('animationend', this.callback) - - window.setTimeout(function () { - this.classList.remove(this.props.name + '-appear') - this.classList.add(this.props.name + '-appear-to') - this.fire('appear') - }.bind(this), 0) - } - - _tempNode: HTMLElement - enter() { - if (this.props.removable && this.children.length == 0) { - this.appendChild(this._tempNode) - } - this.fire('before-enter') - this.classList.remove(this.props.name + '-leave-active') - this.classList.remove(this.props.name + '-leave-to') - this.classList.add(this.props.name + '-enter') - this.classList.add(this.props.name + '-enter-active') + + this.fire('BeforeEnter') + this.fire('beforeEnter') + this.transitionTarget.classList.remove(this.props.name + '-leave-active') + this.transitionTarget.classList.remove(this.props.name + '-leave-to') + this.transitionTarget.classList.add(this.props.name + '-enter') + this.transitionTarget.classList.add(this.props.name + '-enter-active') this.callback = function () { - this.classList.remove(this.props.name + '-enter-active') - this.fire('after-enter') + this.transitionTarget.classList.remove(this.props.name + '-enter-active') + this.fire('AfterEnter') + this.fire('afterEnter') }.bind(this) this.once('transitionend', this.callback) this.once('animationend', this.callback) window.setTimeout(function () { - this.classList.remove(this.props.name + '-enter') - this.classList.add(this.props.name + '-enter-to') + this.transitionTarget.classList.remove(this.props.name + '-enter') + this.transitionTarget.classList.add(this.props.name + '-enter-to') this.fire('enter') }.bind(this), 0) } leave() { - this.fire('before-leave') - this.classList.remove(this.props.name + '-enter-active') - this.classList.remove(this.props.name + '-enter-to') - this.classList.add(this.props.name + '-leave') - this.classList.add(this.props.name + '-leave-active') + this.fire('BeforeLeave') + this.fire('beforeLeave') + this.transitionTarget.classList.remove(this.props.name + '-enter-active') + this.transitionTarget.classList.remove(this.props.name + '-enter-to') + this.transitionTarget.classList.add(this.props.name + '-leave') + this.transitionTarget.classList.add(this.props.name + '-leave-active') this.callback = function (e) { - //if (!this.props.show) { - this.classList.remove(this.props.name + '-leave-active') - this.fire('after-leave') - this._tempNode = this.children[0] - if (this.props.removable) { - this._tempNode.parentNode.removeChild(this._tempNode) - this.fire('removed') + this.transitionTarget.classList.remove(this.props.name + '-leave-active') + + this.fire('AfterLeave') + this.fire('afterLeave') + if (this.props.autoRemove && this.parentNode) { + this.parentNode.removeChild(this) } - //} }.bind(this) this.once('transitionend', this.callback) this.once('animationend', this.callback) window.setTimeout(function () { - this.classList.remove(this.props.name + '-leave') - this.classList.add(this.props.name + '-leave-to') + this.transitionTarget.classList.remove(this.props.name + '-leave') + this.transitionTarget.classList.add(this.props.name + '-leave-to') this.fire('leave') }.bind(this), 0) } @@ -150,10 +110,7 @@ export default class Transition extends WeElement{ this.addEventListener(name, wrapCall) } - render(props) { - console.log(22) - if (props.removed) return - //注入 props.name 到 props.children[0] - return props.children[0] + render() { + return } } diff --git a/components/transition/src/msg.d.ts b/components/transition/src/msg.d.ts deleted file mode 100644 index d29bf4914..000000000 --- a/components/transition/src/msg.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { WeElement } from 'omi'; -import './index.tsx'; -interface Props { - type?: 'success' | 'warning' | 'info' | 'error'; - message: string; - showClose: boolean; - center: boolean; - duration: number; -} -export default class Message extends WeElement { - static css: any; - static defaultProps: { - duration: number; - }; - static propTypes: { - showClose: BooleanConstructor; - type: StringConstructor; - message: StringConstructor; - center: BooleanConstructor; - duration: NumberConstructor; - }; - enter: boolean; - installed(): void; - transition: any; - render(props: any): JSX.Element; -} -export {}; diff --git a/components/transition/src/msg.scss b/components/transition/src/msg.scss deleted file mode 100644 index 3b0f0447a..000000000 --- a/components/transition/src/msg.scss +++ /dev/null @@ -1,209 +0,0 @@ -@import "@omiu/common/theme.scss"; - -.o-message__closeBtn:focus, -.o-message__content:focus { - outline-width: 0 -} - -.o-message { - min-width: 380px; - -webkit-box-sizing: border-box; - box-sizing: border-box; - border-radius: 4px; - border-width: 1px; - border-style: solid; - border-color: #EBEEF5; - position: fixed; - left: 50%; - top: 20px; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - background-color: #edf2fc; - -webkit-transition: opacity .3s, top .4s, -webkit-transform .4s; - transition: opacity .3s, top .4s, -webkit-transform .4s; - transition: opacity .3s, transform .4s, top .4s; - transition: opacity .3s, transform .4s, top .4s, -webkit-transform .4s; - overflow: hidden; - padding: 15px 15px 15px 20px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center -} - -.o-message.is-center { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center -} - -.o-message.is-closable .o-message__content { - padding-right: 16px -} - -.o-message p { - margin: 0 -} - -.o-message--info .o-message__content { - color: #909399 -} - -.o-message--success { - background-color: #f0f9eb; - border-color: #e1f3d8 -} - -.o-message--success .o-message__content { - color: $o-primary; - color: var(--o-primary, $o-primary); -} - -.o-message--warning { - background-color: #fdf6ec; - border-color: #faecd8 -} - -.o-message--warning .o-message__content { - color: #E6A23C -} - -.o-message--error { - background-color: #fef0f0; - border-color: #fde2e2 -} - -.o-message--error .o-message__content { - color: #F56C6C -} - -.o-message__icon { - margin-right: 10px -} - -.o-message__content { - padding: 0; - font-size: 14px; - line-height: 1 -} - -.o-message__closeBtn { - position: absolute; - top: 50%; - right: 15px; - -webkit-transform: translateY(-50%); - transform: translateY(-50%); - cursor: pointer; - color: #C0C4CC; - font-size: 16px -} - -.o-message__closeBtn:hover { - color: #909399 -} - -.o-message .o-icon-success { - color: $o-primary; - color: var(--o-primary, $o-primary); -} - -.o-message .o-icon-error { - color: #F56C6C -} - -.o-message .o-icon-info { - color: #909399 -} - -.o-message .o-icon-warning { - color: #E6A23C -} - -.o-message-fade-enter, -.o-message-fade-leave-active { - opacity: 0; - -webkit-transform: translate(-50%, -100%); - transform: translate(-50%, -100%) -} - - - - -.msgbox-fade-enter-active { - -webkit-animation: msgbox-fade-in .3s; - animation: msgbox-fade-in .3s -} - -.msgbox-fade-leave-active { - -webkit-animation: msgbox-fade-out .3s; - animation: msgbox-fade-out .3s -} - -@-webkit-keyframes msgbox-fade-in { - 0% { - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - opacity: 0 - } - - 100% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1 - } -} - -@keyframes msgbox-fade-in { - 0% { - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - opacity: 0 - } - - 100% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1 - } -} - -@-webkit-keyframes msgbox-fade-out { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1 - } - - 100% { - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - opacity: 0 - } -} - -@keyframes msgbox-fade-out { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1 - } - - 100% { - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - opacity: 0 - } -} - - -.fade-enter-active, -.fade-leave-active { - transition: opacity .5s; -} - -.fade-enter, -.fade-leave-to { - opacity: 0; -} diff --git a/components/transition/src/msg.tsx b/components/transition/src/msg.tsx deleted file mode 100644 index f36f5244e..000000000 --- a/components/transition/src/msg.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { tag, WeElement, h, extractClass } from 'omi' -import * as css from './msg.scss' - -import './index.tsx' - -interface Props { - type?: 'success' | 'warning' | 'info' | 'error' - message: string - showClose: boolean - center: boolean - duration: number -} - -@tag('o-message') -export default class Message extends WeElement{ - static css = css - - - static defaultProps = { - duration: 3000 - } - - - static propTypes = { - showClose: Boolean, - type: String, - message: String, - center: Boolean, - duration: Number - } - - enter = true - - installed() { - - // setTimeout(() => { - // this.enter = false - // this.update() - // }) - - // setTimeout(() => { - // this.enter = true - // this.update() - // }, this.props.duration + 400) - - - // setTimeout(() => { - // this.parentNode.removeChild(this) - // }, this.props.duration + 400 + 400) - - - setTimeout(() => { - this.transition.leave() - console.log('leave') - }, 3400) - - } - transition - render(props) { - - console.log(111) - return ( this.transition = _} show={true} style="display:block;" name="fade"> -
- {/* */} -

{props.message}

- {props.showClose && } -
- - ) - - - - - } -}