chore(@omiu/table): add demo
This commit is contained in:
dntzhang
parent
47bb12d10f
commit
39faef61b9
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Add Omi in One Minute</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
</head>
|
||||
|
||||
<body style="background-color: #fefefe;">
|
||||
|
||||
<script src="../src/demo.js"></script>
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
"scripts": {
|
||||
"docs": "node ./scripts/docs-gen.js",
|
||||
"start": "node ./scripts/webpack.build.js -- demo",
|
||||
"demo": "node ./scripts/webpack.demo.js -- demo",
|
||||
"build": "rollup -c scripts/rollup.config.iife.js && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js"
|
||||
},
|
||||
"typings": "./dist/index.d.ts",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
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 config = {
|
||||
devtool: 'source-map',
|
||||
plugins: [
|
||||
new ProgressBarPlugin()
|
||||
],
|
||||
entry: {
|
||||
'demo': './src/demo.tsx'
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, '../src/'),
|
||||
filename: 'demo.js',
|
||||
|
||||
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',
|
||||
|
||||
}
|
||||
|
||||
webpack(config, (err, stats) => { // Stats Object
|
||||
if (err || stats.hasErrors()) {
|
||||
// Handle errors here
|
||||
}
|
||||
// Done processing
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { WeElement } from 'omi';
|
||||
import './index.tsx';
|
||||
export default class Table extends WeElement {
|
||||
dataSource: {
|
||||
id: number;
|
||||
name: string;
|
||||
age: number;
|
||||
address: string;
|
||||
}[];
|
||||
columns: ({
|
||||
title: string;
|
||||
render: (item: any) => JSX.Element;
|
||||
key?: undefined;
|
||||
} | {
|
||||
title: string;
|
||||
key: string;
|
||||
render?: undefined;
|
||||
})[];
|
||||
render(props: any): JSX.Element;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,60 @@
|
|||
import { tag, WeElement, h, render } from 'omi'
|
||||
import './index.tsx'
|
||||
|
||||
@tag('table-demo')
|
||||
export default class Table extends WeElement {
|
||||
|
||||
dataSource = [{
|
||||
id: 1,
|
||||
name: 'xwang',
|
||||
age: 18,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'dntzhang',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 3,
|
||||
name: 'lucy',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 4,
|
||||
name: 'john',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 5,
|
||||
name: 'tim',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}]
|
||||
|
||||
columns = [{
|
||||
title: 'ID',
|
||||
render: item => (<strong>{item.id}</strong>),
|
||||
}, {
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
}, {
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
}, {
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
}, {
|
||||
title: '操作',
|
||||
render: item => (
|
||||
<span>
|
||||
<a href="javascript:;">Delete</a>
|
||||
</span>
|
||||
)
|
||||
}]
|
||||
render(props) {
|
||||
return <o-table columns={this.columns} dataSource={this.dataSource}></o-table>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
render(<table-demo></table-demo>, 'body')
|
||||
Loading…
Reference in New Issue