publish(@omiu/transition)
This commit is contained in:
dntzhang
parent
faf3b79f0a
commit
fc037558b0
|
|
@ -0,0 +1,59 @@
|
|||
## Transition
|
||||
|
||||
Define transition animation for entering and leaving
|
||||
|
||||
<iframe height="351" style="width: 100%;" scrolling="no" title="OMIU Transition" src="https://codepen.io/omijs/embed/JjYyezQ?height=351&theme-id=default&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/JjYyezQ'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## Import
|
||||
|
||||
```js
|
||||
import '@omiu/transition'
|
||||
```
|
||||
|
||||
Or use script tag to ref it.
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@omiu/transition"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<o-transition></o-transition>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
```tsx
|
||||
{
|
||||
name: string
|
||||
leavingTime?: number
|
||||
autoRemove?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
### 默认属性
|
||||
|
||||
```tsx
|
||||
{
|
||||
name: 'o'
|
||||
}
|
||||
```
|
||||
### Events
|
||||
|
||||
* BeforeEnter
|
||||
* beforeEnter
|
||||
* AfterEnter
|
||||
* afterEnter
|
||||
* enter
|
||||
* BeforeLeave
|
||||
* beforeLeave
|
||||
* AfterLeave
|
||||
* afterLeave
|
||||
* leave
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
## Transition 过渡动画
|
||||
|
||||
定义进入离开的过渡动画
|
||||
|
||||
<iframe height="351" style="width: 100%;" scrolling="no" title="OMIU Transition" src="https://codepen.io/omijs/embed/JjYyezQ?height=351&theme-id=default&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
|
||||
See the Pen <a href='https://codepen.io/omijs/pen/JjYyezQ'>OMIU Checkbox</a> by OMI
|
||||
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
## 导入
|
||||
|
||||
```js
|
||||
import '@omiu/transition'
|
||||
```
|
||||
|
||||
或者直接 script 标签引入。
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@omiu/transition"></script>
|
||||
```
|
||||
|
||||
## 使用
|
||||
|
||||
```html
|
||||
<o-transition></o-transition>
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
```tsx
|
||||
{
|
||||
name: string
|
||||
leavingTime?: number
|
||||
autoRemove?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
### 默认属性
|
||||
```tsx
|
||||
{
|
||||
name: 'o'
|
||||
}
|
||||
```
|
||||
### 事件
|
||||
* BeforeEnter
|
||||
* beforeEnter
|
||||
* AfterEnter
|
||||
* afterEnter
|
||||
* enter
|
||||
* BeforeLeave
|
||||
* beforeLeave
|
||||
* AfterLeave
|
||||
* afterLeave
|
||||
* leave
|
||||
|
|
@ -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<Props> {
|
|||
center: BooleanConstructor;
|
||||
duration: NumberConstructor;
|
||||
};
|
||||
enter: boolean;
|
||||
installed(): void;
|
||||
onAfterLeave: () => void;
|
||||
render(props: any): JSX.Element;
|
||||
}
|
||||
export {};
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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%)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<Props>{
|
|||
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 <div {...extractClass(props, 'o-message', {
|
||||
['o-message--' + props.type]: props.type,
|
||||
'is-closable': props.closable,
|
||||
'is-center': props.center,
|
||||
'o-message-fade-enter': this.enter
|
||||
})}
|
||||
style="top: 20px; z-index: 2000;">
|
||||
{/* <i class="o-message__icon o-icon-success"></i> */}
|
||||
<p class="o-message__content">{props.message}</p>
|
||||
{props.showClose && <i class="o-message__closeBtn o-icon-close"></i>}
|
||||
</div>
|
||||
return (
|
||||
<o-transition onAfterLeave={this.onAfterLeave} leaving-time={props.duration} auto-remove name="fade">
|
||||
<div {...extractClass(props, 'o-message', {
|
||||
['o-message--' + props.type]: props.type,
|
||||
'is-closable': props.closable,
|
||||
'is-center': props.center
|
||||
})}
|
||||
style="top: 20px; z-index: 2000;">
|
||||
{/* <i class="o-message__icon o-icon-success"></i> */}
|
||||
<p class="o-message__content">{props.message}</p>
|
||||
{props.showClose && <i class="o-message__closeBtn o-icon-close"></i>}
|
||||
</div>
|
||||
</o-transition>
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<script src="https://unpkg.com/@omiu/action-sheet"></script>
|
||||
<script src="https://unpkg.com/@omiu/transition"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<o-action-sheet></o-action-sheet>
|
||||
<o-transition></o-transition>
|
||||
```
|
||||
|
||||
## 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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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<Props> {
|
||||
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 {};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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'");
|
||||
|
||||
/***/ })
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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<Props>{
|
|||
|
||||
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<Props>{
|
|||
this.addEventListener(name, wrapCall)
|
||||
}
|
||||
|
||||
render(props) {
|
||||
console.log(22)
|
||||
if (props.removed) return
|
||||
//注入 props.name 到 props.children[0]
|
||||
return props.children[0]
|
||||
render() {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<Props> {
|
||||
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 {};
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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<Props>{
|
||||
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 (<o-transition ref={_ => this.transition = _} show={true} style="display:block;" name="fade">
|
||||
<div {...extractClass(props, 'o-message', {
|
||||
['o-message--' + props.type]: props.type,
|
||||
'is-closable': props.closable,
|
||||
'is-center': props.center
|
||||
})}
|
||||
style="top: 20px; z-index: 2000;">
|
||||
{/* <i class="o-message__icon o-icon-success"></i> */}
|
||||
<p class="o-message__content">{props.message}</p>
|
||||
{props.showClose && <i class="o-message__closeBtn o-icon-close"></i>}
|
||||
</div>
|
||||
</o-transition>
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue