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

publish(@omiu/action-sheet)

This commit is contained in:
dntzhang 2020-04-26 16:58:21 +08:00
parent d48c162ed3
commit 18fab60b98
19 changed files with 1794 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
components/action-sheet/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
* itemClick
* close

63
components/action-sheet/demos/js-demo/index.html Normal file
View File

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="UTF-8" />
<title>Omiu ActionSheet</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" block type="default">IOS ActionSheet</o-button>
<o-action-sheet id="actionSheetA" menus="[{
label: 'Option 1'
}, {
label: 'Option 2'
}]" actions="[{
label: 'Cancel'
}]" show="0" type="ios">
</o-action-sheet>
<o-button id="btnB" block type="default" style="margin-top: 15px; ">Android ActionSheet</o-button>
<o-action-sheet id="actionSheetB" menus="[{
label: 'Option 1'
}, {
label: 'Option 2'
}]" actions="[{
label: 'Cancel'
}]" show="0" type="android">
</o-action-sheet>
</div>
<script>
const actionSheetA = document.querySelector('#actionSheetA')
const actionSheetB = document.querySelector('#actionSheetB')
document.querySelector('#btnA').addEventListener('click', function (evt) {
console.log(1)
actionSheetA.show()
})
document.querySelector('#btnB').addEventListener('click', function (evt) {
console.log(2)
actionSheetB.show()
})
actionSheetA.addEventListener('itemClick', function (evt) {
console.log(evt.detail)
})
actionSheetB.addEventListener('itemClick', function (evt) {
console.log(evt.detail)
})
</script>
</body>
</html>

101
components/action-sheet/package.json Normal file
View File

@ -0,0 +1,101 @@
{
"name": "@omiu/action-sheet",
"version": "0.0.1",
"description": "Mobile pop-up options list",
"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",
"omi": "latest"
}
}

134
components/action-sheet/scripts/docs-gen.js Normal file
View File

@ -0,0 +1,134 @@
//自动扫描 index.tsx 生成 readme
const fs = require('fs')
const content = fs.readFileSync('./src/index.tsx', 'utf-8')
const props = content.match(new RegExp('interface Props \\{[\\s\\S]*?}'))[0].replace('interface Props ', '')
const defaultPropsContext = content.match(new RegExp('static defaultProps = \\{[\\s\\S]*?}'))
let defaultProps
if (defaultPropsContext) {
defaultProps = defaultPropsContext[0].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))

38
components/action-sheet/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/action-sheet/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/action-sheet/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
})

152
components/action-sheet/src/index.css Normal file
View File

@ -0,0 +1,152 @@
.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; }

29
components/action-sheet/src/index.d.ts vendored Normal file
View File

@ -0,0 +1,29 @@
import { WeElement } from 'omi';
interface Props {
type: string;
menus: any[];
actions: any[];
show: boolean;
}
export default class ActionSheet extends WeElement<Props> {
static css: any;
static defaultProps: {
type: string;
menus: any[];
actions: any[];
show: boolean;
};
static propTypes: {
type: StringConstructor;
menus: ArrayConstructor;
actions: ArrayConstructor;
show: BooleanConstructor;
};
renderMenuItem(): JSX.Element[];
show(): void;
hide(): void;
renderActions(): JSX.Element[];
handleMaskClick: (e: any) => void;
render(): JSX.Element;
}
export {};

310
components/action-sheet/src/index.esm.js Normal file
View File

@ -0,0 +1,310 @@
/**
* @omiu/action-sheet 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';
/*! *****************************************************************************
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 __());
}
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);
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 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.fire('close');
};
return _this;
}
ActionSheet.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 = 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));
});
};
ActionSheet.prototype.show = function () {
this.updateProps({
show: true
});
};
ActionSheet.prototype.hide = function () {
this.updateProps({
show: false
});
};
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));
});
};
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()))));
};
ActionSheet.css = css;
ActionSheet.defaultProps = {
type: '',
menus: [],
actions: [],
show: false
};
ActionSheet.propTypes = {
type: String,
menus: Array,
actions: Array,
show: Boolean
};
ActionSheet = __decorate([
tag('o-action-sheet')
], ActionSheet);
return ActionSheet;
}(WeElement));
export default ActionSheet;
//# sourceMappingURL=index.esm.js.map

1
components/action-sheet/src/index.esm.js.map Normal file
View File

File diff suppressed because one or more lines are too long

377
components/action-sheet/src/index.js Normal file
View File

@ -0,0 +1,377 @@
(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["OActionSheet"] = factory(require("omi"));
else
root["OActionSheet"] = 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/_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-actionsheet {\n position: fixed;\n left: 0;\n bottom: 0;\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n z-index: 5000;\n width: 100%;\n background-color: #EFEFF4;\n -webkit-transition: -webkit-transform .3s;\n transition: -webkit-transform .3s;\n transition: transform .3s;\n transition: transform .3s, -webkit-transform .3s; }\n\n.o-actionsheet__title {\n position: relative;\n height: 65px;\n padding: 0 20px;\n line-height: 1.4;\n display: -webkit-box;\n display: -webkit-flex;\n display: flex;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n justify-content: center;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -webkit-flex-direction: column;\n flex-direction: column;\n text-align: center;\n font-size: 14px;\n color: #808080;\n background: #FCFCFD; }\n\n.o-actionsheet__title:before {\n content: \" \";\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n border-bottom: 1px solid #e5e5e5;\n color: #e5e5e5;\n -webkit-transform-origin: 0 100%;\n transform-origin: 0 100%;\n -webkit-transform: scaleY(0.5);\n transform: scaleY(0.5); }\n\n.o-actionsheet__title .o-actionsheet__title-text {\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2; }\n\n.o-actionsheet__menu {\n background-color: #FCFCFD; }\n\n.o-actionsheet__action {\n margin-top: 6px;\n background-color: #FCFCFD; }\n\n.o-actionsheet__cell {\n position: relative;\n padding: 10px 0;\n text-align: center;\n font-size: 18px; }\n\n.o-actionsheet__cell:before {\n content: \" \";\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n height: 1px;\n border-top: 1px solid #e5e5e5;\n color: #e5e5e5;\n -webkit-transform-origin: 0 0;\n transform-origin: 0 0;\n -webkit-transform: scaleY(0.5);\n transform: scaleY(0.5); }\n\n.o-actionsheet__cell:active {\n background-color: #ECECEC; }\n\n.o-actionsheet__cell:first-child:before {\n display: none; }\n\n.o-skin_android .o-actionsheet {\n position: fixed;\n left: 50%;\n top: 50%;\n bottom: auto;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n width: 274px;\n box-sizing: border-box;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n background: transparent;\n -webkit-transition: -webkit-transform .3s;\n transition: -webkit-transform .3s;\n transition: transform .3s;\n transition: transform .3s, -webkit-transform .3s; }\n\n.o-skin_android .o-actionsheet__action {\n display: none; }\n\n.o-skin_android .o-actionsheet__menu {\n border-radius: 2px;\n box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.1); }\n\n.o-skin_android .o-actionsheet__cell {\n padding: 13px 24px;\n font-size: 16px;\n line-height: 1.4;\n text-align: left; }\n\n.o-skin_android .o-actionsheet__cell:first-child {\n border-top-left-radius: 2px;\n border-top-right-radius: 2px; }\n\n.o-skin_android .o-actionsheet__cell:last-child {\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px; }\n\n.o-actionsheet_toggle {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0); }\n\n.mask {\n position: fixed;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 0.4;\n z-index: 100;\n left: 0;\n top: 0; }\n\n.o-skin_android .o-actionsheet_toggle {\n opacity: 1 !important;\n top: 50% !important;\n bottom: auto !important; }\n\n.o-skin_android .o-actionsheet {\n opacity: 0;\n transition: opacity .3s;\n top: 150%;\n bottom: 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.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");
var ActionSheet = /** @class */ (function (_super) {
__extends(ActionSheet, _super);
function ActionSheet() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.handleMaskClick = function (e) {
_this.fire('close');
};
return _this;
}
ActionSheet.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('itemClick', menu);
} }, others, { class: cls }), label));
});
};
ActionSheet.prototype.show = function () {
this.updateProps({
show: true
});
};
ActionSheet.prototype.hide = function () {
this.updateProps({
show: false
});
};
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 = omi_1.classNames((_a = {
'o-actionsheet__cell': true
},
_a[className] = className,
_a));
return (omi_1.h("div", __assign({ key: idx }, others, { onClick: function (_) {
_this.hide();
_this.fire('itemClick', action);
}, className: cls }), label));
});
};
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 = omi_1.classNames({
'o-actionsheet': true,
'o-actionsheet_toggle': show
});
var styleType = type ? type : 'ios';
return (omi_1.h("div", { className: styleType === 'android' ? 'o-skin_android' : '' },
omi_1.h("div", { class: "mask", style: { display: show ? 'block' : 'none' }, onClick: this.handleMaskClick }),
omi_1.h("div", __assign({ className: cls }, others),
omi_1.h("div", { className: "o-actionsheet__menu" }, this.renderMenuItem()),
omi_1.h("div", { className: "o-actionsheet__action" }, this.renderActions()))));
};
ActionSheet.css = css;
ActionSheet.defaultProps = {
type: '',
menus: [],
actions: [],
show: false
};
ActionSheet.propTypes = {
type: String,
menus: Array,
actions: Array,
show: Boolean
};
ActionSheet = __decorate([
omi_1.tag('o-action-sheet')
], ActionSheet);
return ActionSheet;
}(omi_1.WeElement));
exports.default = ActionSheet;
/***/ }),
/***/ "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/action-sheet/src/index.js.map Normal file
View File

File diff suppressed because one or more lines are too long

172
components/action-sheet/src/index.scss Normal file
View File

@ -0,0 +1,172 @@
.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;
}

109
components/action-sheet/src/index.tsx Normal file
View File

@ -0,0 +1,109 @@
import { tag, WeElement, classNames, h } from 'omi'
import * as css from './index.scss'
interface Props {
type: string,
menus: any[],
actions: any[],
show: boolean
}
@tag('o-action-sheet')
export default class ActionSheet extends WeElement<Props> {
static css = css
static defaultProps = {
type: '',
menus: [],
actions: [],
show: false
}
static propTypes = {
type: String,
menus: Array,
actions: Array,
show: 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('itemClick', menu)
}} {...others} class={cls}>
{label}
</div>
)
})
}
show() {
this.updateProps({
show: true
})
}
hide() {
this.updateProps({
show: false
})
}
renderActions() {
return this.props.actions.map((action, idx) => {
const { label, className, ...others } = action
const cls = classNames({
'o-actionsheet__cell': true,
[className]: className
})
return (
<div key={idx} {...others} onClick={_ => {
this.hide()
this.fire('itemClick', action)
}} className={cls}>
{label}
</div>
)
})
}
handleMaskClick = e => {
this.fire('close')
}
render() {
const { show, type, menus, actions, ...others } = this.props
const cls = classNames({
'o-actionsheet': true,
'o-actionsheet_toggle': show
})
let styleType = type ? type : 'ios'
return (
<div className={styleType === 'android' ? 'o-skin_android' : ''}>
<div
class="mask"
style={{ display: show ? 'block' : 'none' }}
onClick={this.handleMaskClick}
/>
<div className={cls} {...others}>
<div className="o-actionsheet__menu">{this.renderMenuItem()}</div>
<div className="o-actionsheet__action">{this.renderActions()}</div>
</div>
</div>
)
}
}

14
components/action-sheet/tsconfig.demo.json Normal file
View File

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

14
components/action-sheet/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/**/*"
]
}

55
components/docs-src/src/docs/en/action-sheet.md Normal file
View File

@ -0,0 +1,55 @@
## ActionSheet
Mobile pop-up options list
<iframe height="351" style="width: 100%;" scrolling="no" title="OMIU ActionSheet" src="https://codepen.io/omijs/embed/wvKdoNJ?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/wvKdoNJ'>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/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
* itemClick
* close

54
components/docs-src/src/docs/zh-cn/action-sheet.md Normal file
View File

@ -0,0 +1,54 @@
## ActionSheet 行动表
移动端弹出式选项列表
<iframe height="351" style="width: 100%;" scrolling="no" title="OMIU ActionSheet" src="https://codepen.io/omijs/embed/wvKdoNJ?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/wvKdoNJ'>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/action-sheet'
```
或者直接 script 标签引入。
```html
<script src="https://unpkg.com/@omiu/action-sheet"></script>
```
## 使用
```html
<o-action-sheet> </o-action-sheet>
```
## API
### 属性
```tsx
{
type: string,
menus: any[],
actions: any[],
show: boolean
}
```
### 默认属性
```tsx
{
type: '',
menus: [],
actions: [],
show: false
)
```
### 事件
* itemClick
* close