DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: init omiu dialog

This commit is contained in:
dntzhang 2020-05-03 17:14:46 +08:00
parent d676dc118c
commit 28f086f953
13 changed files with 1475 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
components/dialog/README.md Normal file
View File

@ -0,0 +1,52 @@
## ActionSheet
Mobile pop-up options list
* [→ CodePen](https://codepen.io/omijs/pen/wvKdoNJ)
## Import
```js
import '@omiu/action-sheet'
```
Or use script tag to ref it.
```html
<script src="https://unpkg.com/@omiu/action-sheet"></script>
```
## Usage
```html
<o-action-sheet></o-action-sheet>
```
## API
### Props
```tsx
{
type: string,
menus: any[],
actions: any[],
show: boolean
}
```
### 默认属性
```tsx
{
type: '',
menus: [],
actions: [],
show: false
}
```
### Events
* item-click
* close

33
components/dialog/demos/js-demo/index.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="UTF-8" />
<title>Omiu Dialog</title>
</head>
<body>
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
<img src="//alloyteam.github.io/github.png" alt="">
</a>
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
<script src="https://unpkg.com/@omiu/button@0.0.7/src/index.js"></script>
<script src="../../src/index.js"></script>
<div>
<o-button id="btnA" type="default">Open the Dialog</o-button>
<o-dialog></o-dialog>
</div>
<script>
var dialog = document.querySelector('o-dialog')
document.querySelector("#btnA").addEventListener('click', function () {
dialog.open()
})
</script>
</body>
</html>

102
components/dialog/package.json Normal file
View File

@ -0,0 +1,102 @@
{
"name": "@omiu/dialog",
"version": "0.0.1",
"description": "Pop anything you want in the middle of the page",
"docsExtend": {
"cnName": "对话框",
"cnDescription": "在页面中间弹出任何你想弹出的东西",
"codepen": "wvKdoNJ",
"codepenHeight": 351,
"codepenDefaultTab": "html,result"
},
"main": "src/index.js",
"module": "src/index.esm.js",
"types": "src/index.d.ts",
"scripts": {
"docs": "node ./scripts/docs-gen.js",
"start": "node ./scripts/webpack.build.js -- demo",
"build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js"
},
"typings": "./dist/index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/Tencent/omi.git"
},
"files": [
"src",
"dist",
"typings.json"
],
"keywords": [
"omiu",
"omi",
"omio",
"preact",
"react",
"virtual dom",
"vdom",
"components",
"virtual",
"dom"
],
"author": "dntzhang <dntzhang@qq.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/Tencent/omi/issues"
},
"homepage": "http://omijs.org",
"devDependencies": {
"@rollup/plugin-commonjs": "^11.1.0",
"css": "^2.2.4",
"css-loader": "^1.0.1",
"file": "^0.2.2",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.5",
"node-sass": "^4.12.0",
"omi": "latest",
"omio": "latest",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"progress-bar-webpack-plugin": "^2.1.0",
"resolve-url-loader": "^3.1.0",
"rollup": "^2.7.1",
"rollup-plugin-license": "^2.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-scss": "^2.4.0",
"rollup-plugin-typescript": "^1.0.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"to-string-loader": "^1.1.5",
"ts-loader": "^5.4.4",
"typescript": "^3.2.1",
"url": "^0.11.0",
"url-loader": "^1.1.2",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.1.10",
"webpack-merge": "^4.1.4"
},
"greenkeeper": {
"ignore": [
"babel-cli",
"babel-core",
"babel-eslint",
"babel-loader",
"jscodeshift",
"rollup-plugin-babel"
]
},
"prettier": {
"singleQuote": true,
"semi": false,
"tabWidth": 2,
"useTabs": false
},
"dependencies": {
"@omiu/common": "latest",
"@omiu/transition": "latest",
"omi": "latest"
}
}

153
components/dialog/scripts/docs-gen.js Normal file
View File

@ -0,0 +1,153 @@
//自动扫描 index.tsx 生成 readme
const fs = require('fs')
const content = fs.readFileSync('./src/index.tsx', 'utf-8')
const props = extract('interface Props {', content).replace('interface Props ', '')
const defaultProps = extract('static defaultProps = {', content).replace('static defaultProps = ', '').replace(/ }/g, '}').replace(/ /g, ' ')
const eventContexts = content.match(new RegExp('this.fire\\([\\s\\S]*?[,|)]', 'g'))
const package = require('../package.json')
const packageName = package.name
const name = packageName.split('/')[1]
const upperCaseName = name.split('-').map(item => {
return item.charAt(0).toUpperCase() + item.slice(1)
}).join('')
const tagName = 'o-' + name
//fire 附近打标标记 event.detail 类型？
let events, eventMap
if (eventContexts) {
events = eventContexts.map(event => {
return event.replace('this.fire(\'', '').replace('\',', '').replace('\')', '')
})
eventMap = {}
events.forEach(event => {
eventMap[event] = 1
})
}
const cnContent = `## ${upperCaseName} ${package.docsExtend.cnName}
${package.docsExtend.cnDescription}
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
## 导入
\`\`\`js
import '${packageName}'
\`\`\`
或者直接 script 标签引入。
\`\`\`html
<script src="https://unpkg.com/${packageName}"></script>
\`\`\`
## 使用
\`\`\`html
<${tagName}></${tagName}>
\`\`\`
## API
### 属性
\`\`\`tsx
${props}
\`\`\`
${defaultProps ? '### 默认属性\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### 事件\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
return `* ${event}\n`
}).join('') : ''}`
fs.writeFileSync(`../docs-src/src/docs/zh-cn/${name}.md`, cnContent)
const enContent = `## ${upperCaseName}
${package.description}
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>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 '${packageName}'
\`\`\`
Or use script tag to ref it.
\`\`\`html
<script src="https://unpkg.com/${packageName}"></script>
\`\`\`
## Usage
\`\`\`html
<${tagName}></${tagName}>
\`\`\`
## API
### Props
\`\`\`tsx
${props}
\`\`\`
${defaultProps ? '### 默认属性\n\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### Events\n\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
return `* ${event}\n`
}).join('') : ''}`
fs.writeFileSync(`../docs-src/src/docs/en/${name}.md`, enContent)
fs.writeFileSync(`../${name}/README.md`, enContent.replace(/<iframe[\s\S]*?<\/iframe>/, `* [→ CodePen](https://codepen.io/omijs/pen/${package.docsExtend.codepen})`))
// console.log(props)
// console.log(defaultProps)
// console.log(Object.keys(eventMap))
function extract(startWith, str) {
const start = str.indexOf(startWith)
if (start === -1) return ''
let end = start + startWith.length
let stackCount = 1
while (end < str.length) {
if (str[end] === '}') {
if (stackCount === 1) {
break
} else {
stackCount--
}
} else if (str[end] === '{') {
stackCount++
}
end++
}
return str.substring(start, end + 1)
}

38
components/dialog/scripts/rollup.config.js Normal file
View File

@ -0,0 +1,38 @@
import nodeResolve from "rollup-plugin-node-resolve";
import typescript from 'rollup-plugin-typescript';
import scss from 'rollup-plugin-scss'
import commonjs from '@rollup/plugin-commonjs';
const fs = require('fs')
const license = require("rollup-plugin-license");
const pkg = require("../package.json");
const licensePlugin = license({
banner: `${pkg.name} v${pkg.version} http://omijs.org\r\nFront End Cross-Frameworks Framework.\r\nBy dntzhang https://github.com/dntzhang \r\n Github: https://github.com/Tencent/omi\r\n MIT Licensed.`
});
export default {
input: "src/index.tsx",
output: {
format: "es",
file: "./src/index.esm.js",
name: pkg.name,
sourcemap: true,
strict: true
},
plugins: [
nodeResolve({
main: true
}),
scss({
//output: false,
output: function (styles, styleNodes) {
fs.writeFileSync('./src/index.css', styles)
},
}),
typescript(),
commonjs(),
licensePlugin
],
external: ['omi']
};

16
components/dialog/scripts/rollup.end.js Normal file
View File

@ -0,0 +1,16 @@
const fs = require('fs')
const css = fs.readFileSync('./src/index.css')
const js = fs.readFileSync('./src/index.esm.js', 'utf-8')
fs.writeFileSync('./src/index.esm.js',
js.replace(`var css = /*#__PURE__*/Object.freeze({
__proto__: null
});`, `
var css = \`${css}\`
`)
)

102
components/dialog/scripts/webpack.build.js Normal file
View File

@ -0,0 +1,102 @@
const path = require('path')
const glob = require('glob')
const webpack = require('webpack')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const pkgName = require('../package.json')
const componentName = pkgName.name.split('/')[1]
const name = 'o-' + componentName
const library = 'O' + componentName.split('-').map(name => name.charAt(0).toUpperCase() + name.slice(1)).join('')
const config = {
devtool: 'source-map',
plugins: [
new ProgressBarPlugin()
],
entry: {
[name]: './src/index.tsx'
},
output: {
path: path.resolve(__dirname, '../src/'),
filename: 'index.js',
libraryTarget: 'umd',
library: library,
libraryExport: "default",
globalObject: 'this'
},
mode: 'development',
module: {
rules: [{
test: /\.scss$/,
use: [
'to-string-loader',
'css-loader',
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
// mdc-web doesn't use sass-loader's normal syntax for imports
// across modules, so we add all module directories containing
// mdc-web components to the Sass include path
// https://github.com/material-components/material-components-web/issues/351
includePaths: glob.sync(path.join(__dirname, '../node_modules/@material')).map((dir) => path.dirname(dir))
}
}
]
},
{
test: /\.css$/,
use: [
'to-string-loader',
'css-loader',
{
loader: 'resolve-url-loader'
}
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'resolve-url-loader'
},
'less-loader'
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: "url-loader"
},
{
test: /\.[t|j]sx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
watch: process.argv[3] === 'demo',
externals: {
'omi': {
commonjs: "omi",
commonjs2: "omi",
amd: "omi",
root: "Omi"
}
}
}
webpack(config, (err, stats) => { // Stats Object
if (err || stats.hasErrors()) {
// Handle errors here
}
// Done processing
})

30
components/dialog/src/index.d.ts vendored Normal file
View File

@ -0,0 +1,30 @@
import { WeElement } from 'omi';
import '@omiu/transition';
interface Props {
type: string;
menus: any[];
actions: any[];
visible: boolean;
}
export default class Dialog extends WeElement<Props> {
static css: any;
static defaultProps: {
type: string;
menus: any[];
actions: any[];
visible: boolean;
};
static propTypes: {
type: StringConstructor;
menus: ArrayConstructor;
actions: ArrayConstructor;
visible: BooleanConstructor;
};
renderMenuItem(): JSX.Element[];
open(): void;
handleMaskClick: (e: any) => void;
close: () => void;
onAfterLeave: () => void;
render(props: any): JSX.Element;
}
export {};

620
components/dialog/src/index.js Normal file
View File

@ -0,0 +1,620 @@
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("omi"));
else if(typeof define === 'function' && define.amd)
define(["omi"], factory);
else if(typeof exports === 'object')
exports["ODialog"] = factory(require("omi"));
else
root["ODialog"] = factory(root["Omi"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.tsx");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./node_modules/_@omiu_transition@0.0.6@@omiu/transition/src/index.esm.js":
/*!********************************************************************************!*\
!*** ./node_modules/_@omiu_transition@0.0.6@@omiu/transition/src/index.esm.js ***!
\********************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* WEBPACK VAR INJECTION */(function(global) {/* harmony import */ var omi__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! omi */ "omi");
/* harmony import */ var omi__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(omi__WEBPACK_IMPORTED_MODULE_0__);
/**
* @omiu/transition v0.0.6 http://omijs.org
* Front End Cross-Frameworks Framework.
* By dntzhang https://github.com/dntzhang
* Github: https://github.com/Tencent/omi
* MIT Licensed.
*/
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
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);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
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);
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;
}
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var _dready_0_0_1_dready = createCommonjsModule(function (module, exports) {
// if the module has no dependencies, the above pattern can be simplified to
(function (root, factory) {
{
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
}
}(commonjsGlobal, function () {
const readyCallbacks = [];
document.addEventListener('DOMContentLoaded', () => {
domReady.done = true;
readyCallbacks.forEach(callback => {
callback();
});
});
function domReady(callback) {
if (domReady.done) {
callback();
return
}
readyCallbacks.push(callback);
}
domReady.done = false;
// Just return a value to define the module export.
// This example returns an object, but the module
// can return a function as the exported value.
return domReady
}));
});
var _domReady = /*#__PURE__*/Object.freeze({
__proto__: null,
'default': _dready_0_0_1_dready,
__moduleExports: _dready_0_0_1_dready
});
/**
* 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 domReady = _dready_0_0_1_dready || _domReady;
var Transition = /** @class */ (function (_super) {
__extends(Transition, _super);
function Transition() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._show = true;
return _this;
}
Transition.prototype.installed = function () {
var _this = this;
domReady(function () {
_this.transitionTarget = _this.children[0];
if (_this.props.appear) {
_this.enter();
}
if (_this.props.leavingTime) {
setTimeout(function () {
_this.leave();
}, _this.props.leavingTime);
}
});
};
Transition.prototype.toggle = function () {
this._show = !this._show;
if (this._show)
this.enter();
else
this.leave();
};
Transition.prototype.enter = function () {
this.fire('before-enter');
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('after-enter');
this._show = true;
}.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('before-leave');
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('after-leave');
this._show = false;
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,
appear: Boolean
};
Transition.isLightDom = true;
Transition.defaultProps = {
name: 'o'
};
Transition = __decorate([
Object(omi__WEBPACK_IMPORTED_MODULE_0__["tag"])('o-transition')
], Transition);
return Transition;
}(omi__WEBPACK_IMPORTED_MODULE_0__["WeElement"]));
/* harmony default export */ __webpack_exports__["default"] = (Transition);
//# sourceMappingURL=index.esm.js.map
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../../_webpack@4.43.0@webpack/buildin/global.js */ "./node_modules/_webpack@4.43.0@webpack/buildin/global.js")))
/***/ }),
/***/ "./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 ***!
\****************************************************************************************************************************************************************************************************/
/*! 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-modal-enter {\n -webkit-animation: o-modal-in .2s ease;\n animation: o-modal-in .2s ease; }\n\n.o-modal-leave {\n -webkit-animation: o-modal-out .2s ease forwards;\n animation: o-modal-out .2s ease forwards; }\n\n@-webkit-keyframes o-modal-in {\n 0% {\n opacity: 0; } }\n\n@keyframes o-modal-in {\n 0% {\n opacity: 0; } }\n\n@-webkit-keyframes o-modal-out {\n 100% {\n opacity: 0; } }\n\n@keyframes o-modal-out {\n 100% {\n opacity: 0; } }\n\n.o-modal {\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n opacity: .5;\n background: #000; }\n\n.o-popup-parent--hidden {\n overflow: hidden; }\n\n.o-dialog {\n position: relative;\n margin: 0 auto 50px;\n background: #FFF;\n border-radius: 2px;\n -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 50%; }\n\n.o-dialog.is-fullscreen {\n width: 100%;\n margin-top: 0;\n margin-bottom: 0;\n height: 100%;\n overflow: auto; }\n\n.o-dialog__wrapper {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n overflow: auto;\n margin: 0; }\n\n.o-dialog__header {\n padding: 20px 20px 10px; }\n\n.o-dialog__headerbtn {\n position: absolute;\n top: 20px;\n right: 20px;\n padding: 0;\n background: 0 0;\n border: none;\n outline: 0;\n cursor: pointer;\n font-size: 16px; }\n\n.o-dialog__headerbtn .o-dialog__close {\n color: #909399; }\n\n.o-dialog__headerbtn:focus .o-dialog__close,\n.o-dialog__headerbtn:hover .o-dialog__close {\n color: #409EFF; }\n\n.o-dialog__title {\n line-height: 24px;\n font-size: 18px;\n color: #303133; }\n\n.o-dialog__body {\n padding: 30px 20px;\n color: #606266;\n font-size: 14px;\n word-break: break-all; }\n\n.o-dialog__footer {\n padding: 10px 20px 20px;\n text-align: right;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n\n.o-dialog--center {\n text-align: center; }\n\n.o-dialog--center .o-dialog__body {\n text-align: initial;\n padding: 25px 25px 30px; }\n\n.o-dialog--center .o-dialog__footer {\n text-align: inherit; }\n\n.dialog-fade-enter-active {\n -webkit-animation: dialog-fade-in .3s;\n animation: dialog-fade-in .3s; }\n\n.dialog-fade-leave-active {\n -webkit-animation: dialog-fade-out .3s;\n animation: dialog-fade-out .3s; }\n\n@-webkit-keyframes dialog-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 dialog-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 dialog-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 dialog-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", ""]);
// 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 + ' */';
}
/***/ }),
/***/ "./node_modules/_webpack@4.43.0@webpack/buildin/global.js":
/*!***********************************!*\
!*** (webpack)/buildin/global.js ***!
\***********************************/
/*! no static exports found */
/***/ (function(module, exports) {
var g;
// This works in non-strict mode
g = (function() {
return this;
})();
try {
// This works if eval is allowed (see CSP)
g = g || new Function("return this")();
} catch (e) {
// This works if the window reference is available
if (typeof window === "object") g = window;
}
// g can still be undefined, but nothing to do about it...
// We return undefined, instead of nothing here, so it's
// easier to handle this case. if(!global) { ...}
module.exports = g;
/***/ }),
/***/ "./src/index.scss":
/*!************************!*\
!*** ./src/index.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!./index.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/index.scss");
if (typeof result === "string") {
module.exports = result;
} else {
module.exports = result.toString();
}
/***/ }),
/***/ "./src/index.tsx":
/*!***********************!*\
!*** ./src/index.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;
};
var __rest = (this && this.__rest) || function (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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var omi_1 = __webpack_require__(/*! omi */ "omi");
var css = __webpack_require__(/*! ./index.scss */ "./src/index.scss");
__webpack_require__(/*! @omiu/transition */ "./node_modules/_@omiu_transition@0.0.6@@omiu/transition/src/index.esm.js");
var Dialog = /** @class */ (function (_super) {
__extends(Dialog, _super);
function Dialog() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.handleMaskClick = function (e) {
_this.hide();
_this.fire('close');
};
_this.close = function () {
console.log(_this);
_this.rootNode.leave();
};
_this.onAfterLeave = function () {
_this.updateProps({ visible: false });
};
return _this;
}
Dialog.prototype.renderMenuItem = 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 = omi_1.classNames((_a = {
'o-actionsheet__cell': true
},
_a[className] = className,
_a));
return (omi_1.h("div", __assign({ key: idx, onClick: function (_) {
_this.hide();
_this.fire('item-click', menu);
} }, others, { class: cls }), label));
});
};
Dialog.prototype.open = function () {
this.updateProps({
visible: true
});
this.rootNode.enter();
};
Dialog.prototype.render = function (props) {
return (omi_1.h("o-transition", { "onafter-leave": this.onAfterLeave, appear: true, name: "dialog-fade" },
omi_1.h("div", { class: "o-dialog__wrapper", style: "z-index: 2040;" + (!props.visible ? 'display:none' : '') },
omi_1.h("div", { role: "dialog", "aria-modal": "true", "aria-label": "\u63D0\u793A", class: "o-dialog", style: "margin-top: 15vh; width: 30%;" },
omi_1.h("div", { class: "o-dialog__header" },
omi_1.h("span", { class: "o-dialog__title" }, "\u63D0\u793A"),
omi_1.h("button", { type: "button", "aria-label": "Close", class: "o-dialog__headerbtn" },
omi_1.h("svg", { onClick: this.close, class: "o-dialog__close o-icon o-icon-close", fill: "currentColor", width: "1em", height: "1em", focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" },
omi_1.h("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })))),
omi_1.h("div", { class: "o-dialog__body" },
omi_1.h("span", null, "\u8FD9\u662F\u4E00\u6BB5\u4FE1\u606F")),
omi_1.h("div", { class: "o-dialog__footer" },
omi_1.h("span", { class: "dialog-footer" },
omi_1.h("button", { type: "button", class: "o-button o-button--default" },
omi_1.h("span", null, "\u53D6 \u6D88")),
omi_1.h("button", { type: "button", class: "o-button o-button--primary" },
omi_1.h("span", null, "\u786E \u5B9A"))))))));
};
Dialog.css = css;
Dialog.defaultProps = {
type: '',
menus: [],
actions: [],
visible: false
};
Dialog.propTypes = {
type: String,
menus: Array,
actions: Array,
visible: Boolean
};
Dialog = __decorate([
omi_1.tag('o-dialog')
], Dialog);
return Dialog;
}(omi_1.WeElement));
exports.default = Dialog;
/***/ }),
/***/ "omi":
/*!******************************************************************************!*\
!*** external {"commonjs":"omi","commonjs2":"omi","amd":"omi","root":"Omi"} ***!
\******************************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;
/***/ })
/******/ })["default"];
});
//# sourceMappingURL=index.js.map

1
components/dialog/src/index.js.map Normal file
View File

File diff suppressed because one or more lines are too long

201
components/dialog/src/index.scss Normal file
View File

@ -0,0 +1,201 @@
.o-modal-enter {
-webkit-animation: o-modal-in .2s ease;
animation: o-modal-in .2s ease
}
.o-modal-leave {
-webkit-animation: o-modal-out .2s ease forwards;
animation: o-modal-out .2s ease forwards
}
@-webkit-keyframes o-modal-in {
0% {
opacity: 0
}
}
@keyframes o-modal-in {
0% {
opacity: 0
}
}
@-webkit-keyframes o-modal-out {
100% {
opacity: 0
}
}
@keyframes o-modal-out {
100% {
opacity: 0
}
}
.o-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .5;
background: #000
}
.o-popup-parent--hidden {
overflow: hidden
}
.o-dialog {
position: relative;
margin: 0 auto 50px;
background: #FFF;
border-radius: 2px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 50%
}
.o-dialog.is-fullscreen {
width: 100%;
margin-top: 0;
margin-bottom: 0;
height: 100%;
overflow: auto
}
.o-dialog__wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
margin: 0
}
.o-dialog__header {
padding: 20px 20px 10px
}
.o-dialog__headerbtn {
position: absolute;
top: 20px;
right: 20px;
padding: 0;
background: 0 0;
border: none;
outline: 0;
cursor: pointer;
font-size: 16px
}
.o-dialog__headerbtn .o-dialog__close {
color: #909399
}
.o-dialog__headerbtn:focus .o-dialog__close,
.o-dialog__headerbtn:hover .o-dialog__close {
color: #409EFF
}
.o-dialog__title {
line-height: 24px;
font-size: 18px;
color: #303133
}
.o-dialog__body {
padding: 30px 20px;
color: #606266;
font-size: 14px;
word-break: break-all
}
.o-dialog__footer {
padding: 10px 20px 20px;
text-align: right;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.o-dialog--center {
text-align: center
}
.o-dialog--center .o-dialog__body {
text-align: initial;
padding: 25px 25px 30px
}
.o-dialog--center .o-dialog__footer {
text-align: inherit
}
.dialog-fade-enter-active {
-webkit-animation: dialog-fade-in .3s;
animation: dialog-fade-in .3s
}
.dialog-fade-leave-active {
-webkit-animation: dialog-fade-out .3s;
animation: dialog-fade-out .3s
}
@-webkit-keyframes dialog-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 dialog-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 dialog-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 dialog-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
}
}

113
components/dialog/src/index.tsx Normal file
View File

@ -0,0 +1,113 @@
import { tag, WeElement, classNames, h } from 'omi'
import * as css from './index.scss'
import '@omiu/transition'
interface Props {
type: string,
menus: any[],
actions: any[],
visible: boolean
}
@tag('o-dialog')
export default class Dialog extends WeElement<Props> {
static css = css
static defaultProps = {
type: '',
menus: [],
actions: [],
visible: false
}
static propTypes = {
type: String,
menus: Array,
actions: Array,
visible: Boolean
}
renderMenuItem() {
return this.props.menus.map((menu, idx) => {
const { label, className, ...others } = menu
const cls = classNames({
'o-actionsheet__cell': true,
[className]: className
})
return (
<div key={idx} onClick={_ => {
this.hide()
this.fire('item-click', menu)
}} {...others} class={cls}>
{label}
</div>
)
})
}
open() {
this.updateProps({
visible: true
})
this.rootNode.enter()
}
handleMaskClick = e => {
this.hide()
this.fire('close')
}
close = () => {
console.log(this)
this.rootNode.leave()
}
onAfterLeave = () => {
this.updateProps({ visible: false })
}
render(props) {
return (
<o-transition onafter-leave={this.onAfterLeave} appear name="dialog-fade">
<div class="o-dialog__wrapper" style={`z-index: 2040;${!props.visible ? 'display:none' : ''}`}>
<div role="dialog" aria-modal="true" aria-label="提示" class="o-dialog" style="margin-top: 15vh; width: 30%;">
<div class="o-dialog__header">
<span class="o-dialog__title">提示</span>
<button type="button" aria-label="Close" class="o-dialog__headerbtn">
<svg onClick={this.close} class="o-dialog__close o-icon o-icon-close" fill="currentColor" width="1em" height="1em" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
</button>
</div><div class="o-dialog__body"><span>这是一段信息</span>
</div>
<div class="o-dialog__footer">
<span class="dialog-footer"><button type="button" class="o-button o-button--default">
<span>取 消</span>
</button>
<button type="button" class="o-button o-button--primary">
<span>确 定</span>
</button>
</span>
</div>
</div>
</div>
</o-transition>
)
}
}

14
components/dialog/tsconfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"baseUrl": ".",
"experimentalDecorators": true,
"jsx": "react",
"jsxFactory": "h",
"target": "es5",
"allowJs": true,
"declaration": true
},
"include": [
"src/**/*"
]
}