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

feat(@omiu/table): support set align prop of column

This commit is contained in:
dntzhang 2021-06-25 16:52:06 +08:00
parent 39faef61b9
commit aef7b724ee
7 changed files with 123 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/table/src/demo.d.ts vendored
View File

@ -11,10 +11,17 @@ export default class Table extends WeElement {
title: string;
render: (item: any) => JSX.Element;
key?: undefined;
align?: undefined;
} | {
title: string;
key: string;
render?: undefined;
align?: undefined;
} | {
title: string;
align: string;
render: (item: any) => JSX.Element;
key?: undefined;
})[];
render(props: any): JSX.Element;
}

64
components/table/src/demo.js
View File

@ -98,7 +98,7 @@ exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/li
// module
exports.push([module.i, ":host {\n display: block; }\n\n.o-table {\n background: white;\n margin: auto;\n padding: 5px;\n width: 100%;\n animation: float 5s infinite;\n border-spacing: 0;\n border-collapse: collapse;\n color: rgba(0, 0, 0, 0.87);\n font-weight: 400; }\n\n.o-table-checkbox th:first-child,\n.o-table-checkbox td:first-child {\n padding: 2px 40px 2px 16px; }\n\nth {\n border-bottom: 1px solid #E0E0E0;\n text-align: left;\n vertical-align: middle;\n padding: 14px 40px 14px 16px;\n color: rgba(0, 0, 0, 0.54);\n font-size: 0.75rem;\n line-height: 1.3125rem;\n font-weight: 500; }\n\n.o-table-border td,\n.o-table-border th {\n border-right: 1px solid #ebeef5; }\n\n.o-table-border td:first-child,\n.o-table-border th:first-child {\n border-left: 1px solid #ebeef5; }\n\n.o-table-border th {\n border-top: 1px solid #ebeef5; }\n\ntr {\n border-bottom: 1px solid #E0E0E0; }\n\ntr:hover td {\n background: #f5f5f5; }\n\ntd {\n text-align: left;\n vertical-align: middle;\n font-size: 0.875rem;\n padding: 14px 40px 14px 16px; }\n\na {\n text-decoration: none; }\n", ""]);
exports.push([module.i, ":host {\n display: block; }\n\n.o-table {\n background: white;\n margin: auto;\n padding: 5px;\n width: 100%;\n animation: float 5s infinite;\n border-spacing: 0;\n border-collapse: collapse;\n color: rgba(0, 0, 0, 0.87);\n font-weight: 400; }\n\n.o-table-checkbox th:first-child,\n.o-table-checkbox td:first-child {\n padding: 2px 40px 2px 16px; }\n\nth {\n border-bottom: 1px solid #E0E0E0;\n text-align: left;\n vertical-align: middle;\n padding: 14px 40px 14px 16px;\n color: rgba(0, 0, 0, 0.54);\n font-size: 0.75rem;\n line-height: 1.3125rem;\n font-weight: 500; }\n\n.o-table-border td,\n.o-table-border th {\n border-right: 1px solid #ebeef5; }\n\n.o-table-border td:first-child,\n.o-table-border th:first-child {\n border-left: 1px solid #ebeef5; }\n\n.o-table-border th {\n border-top: 1px solid #ebeef5; }\n\ntr {\n border-bottom: 1px solid #E0E0E0; }\n\ntr:hover td {\n background: #f5f5f5; }\n\ntd {\n text-align: left;\n vertical-align: middle;\n font-size: 0.875rem;\n padding: 14px 40px 14px 16px; }\n\na {\n text-decoration: none; }\n\n.o-table-align-left {\n text-align: left; }\n\n.o-table-align-center {\n text-align: center; }\n\n.o-table-align-right {\n text-align: right; }\n\na,\na:link,\na:visited,\na:active {\n text-decoration: none;\n color: inherit; }\n\na:hover {\n color: #07c160;\n color: var(--o-primary, #07c160); }\n", ""]);
// exports
@ -2530,6 +2530,7 @@ var Table = /** @class */ (function (_super) {
key: 'address',
}, {
title: '操作',
align: 'right',
render: function (item) { return (omi_1.h("span", null,
omi_1.h("a", { href: "javascript:;" }, "Delete"))); }
}];
@ -2609,15 +2610,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
};
Object.defineProperty(exports, "__esModule", { value: true });
var omi_1 = __webpack_require__(/*! omi */ "./node_modules/omi/dist/omi.esm.js");
omi_1.options.ignoreAttrs = true;
var css = __webpack_require__(/*! ./index.scss */ "./src/index.scss");
var Table = /** @class */ (function (_super) {
__extends(Table, _super);
function Table() {
var _this = _super !== null && _super.apply(this, arguments) || this;
// static propTypes = {
// dataSource: Object,
// columns: Object
// }
_this.removeItem = function (item) {
_this.props.dataSource.splice(_this.props.dataSource.indexOf(item), 1);
_this.update();
@ -2636,20 +2634,6 @@ var Table = /** @class */ (function (_super) {
};
return _this;
}
Table.prototype.beforeRender = function () {
if (this.dataSource) {
this.props.dataSource = this.dataSource;
}
if (this.columns) {
this.props.columns = this.columns;
}
if (this.hasOwnProperty('checkbox')) {
this.props.checkbox = this.checkbox;
}
if (this.hasOwnProperty('border')) {
this.props.border = this.border;
}
};
Table.prototype._getCheckedState = function () {
var c = 0, uc = 0;
for (var i = 0, len = this.props.dataSource.length; i < len; i++) {
@ -2669,37 +2653,59 @@ var Table = /** @class */ (function (_super) {
};
Table.prototype.render = function (props) {
var _this = this;
console.error(props);
if (!props.columns)
return;
if (!props.dataSource)
return;
return (omi_1.h("table", __assign({}, omi_1.extractClass(props, 'o-table', {
'o-table-checkbox': props.checkbox,
'o-table-border': props.border
'o-table-border': props.border,
'o-table-stripe': props.stripe
})),
omi_1.h("thead", null,
omi_1.h("tr", null, props.columns.map(function (item, index) {
omi_1.h("tr", null, props.columns.map(function (column, index) {
var _a;
var obj = {};
var width = item.width;
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return omi_1.h("th", __assign({}, obj, { class: "text-left" }),
index === 0 && props.checkbox && omi_1.h("o-checkbox", __assign({}, _this._getCheckedState(), { onChange: function (_) { return _this._changeHandlerTh(_, item); } })),
item.title);
return omi_1.h("th", __assign({}, obj, { class: omi_1.classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a)) }),
index === 0 && props.checkbox && omi_1.h("o-checkbox", __assign({}, _this._getCheckedState(), { onChange: function (_) { return _this._changeHandlerTh(_, column); } })),
column.title);
}))),
omi_1.h("tbody", { class: "table-hover" }, props.dataSource.map(function (item) { return (omi_1.h("tr", null, props.columns.map(function (subItem, subIndex) {
omi_1.h("tbody", { class: "table-hover" }, props.dataSource.map(function (item) { return (omi_1.h("tr", null, props.columns.map(function (column, subIndex) {
var _a;
var obj = {};
var width = subItem.width;
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return omi_1.h("td", __assign({}, obj, { class: "text-left" }),
return omi_1.h("td", __assign({}, obj, { class: omi_1.classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a)) }),
subIndex === 0 && props.checkbox && omi_1.h("o-checkbox", { checked: item.checked, onChange: function (_) { return _this._changeHandlerTd(_, item); } }),
subItem.render ? subItem.render(item) : item[subItem.key]);
column.render ? column.render(item) : item[column.key]);
}))); }))));
};
Table.css = css;
Table.defaultProps = {
dataSource: [],
columns: [],
checkbox: false,
border: false,
stripe: false
};
Table.propTypes = {
dataSource: Object,
columns: Object,
checkbox: Boolean,
border: Boolean,
stripe: Boolean
};
Table = __decorate([
omi_1.tag('o-table')
], Table);

2
components/table/src/demo.js.map
View File

File diff suppressed because one or more lines are too long

1
components/table/src/demo.tsx
View File

@ -45,6 +45,7 @@ export default class Table extends WeElement {
key: 'address',
}, {
title: '操作',
align: 'right',
render: item => (
<span>
<a href="javascript:;">Delete</a>

20
components/table/src/index.d.ts vendored
View File

@ -4,17 +4,27 @@ interface Props {
columns: object;
checkbox: boolean;
border: boolean;
stripe: boolean;
}
export default class Table extends WeElement<Props> {
static css: any;
dataSource: any[];
columns: any[];
checkbox: boolean;
border: boolean;
static defaultProps: {
dataSource: any[];
columns: any[];
checkbox: boolean;
border: boolean;
stripe: boolean;
};
static propTypes: {
dataSource: ObjectConstructor;
columns: ObjectConstructor;
checkbox: BooleanConstructor;
border: BooleanConstructor;
stripe: BooleanConstructor;
};
removeItem: (item: any) => void;
_changeHandlerTh: (e: any, item: any) => void;
_changeHandlerTd: (e: any, item: any) => void;
beforeRender(): void;
_getCheckedState(): {
indeterminate: boolean;
unchecked?: undefined;

28
components/table/src/index.scss
View File

@ -64,3 +64,31 @@
a {
text-decoration: none;
}
.o-table-align-left {
text-align: left
}
.o-table-align-center {
text-align: center
}
.o-table-align-right {
text-align: right
}
a,
a:link,
a:visited,
a:active {
text-decoration: none;
color: inherit;
}
a:hover {
color: $o-primary;
color: var(--o-primary, $o-primary);
}

69
components/table/src/index.tsx
View File

@ -1,4 +1,7 @@
import { tag, WeElement, h, extractClass } from 'omi'
import { tag, WeElement, h, extractClass, classNames, options } from 'omi'
options.ignoreAttrs = true
import * as css from './index.scss'
// import '../checkbox/index.tsx'
@ -6,21 +9,29 @@ interface Props {
dataSource: any[],
columns: object,
checkbox: boolean,
border: boolean
border: boolean,
stripe: boolean
}
@tag('o-table')
export default class Table extends WeElement<Props> {
static css = css
dataSource:any[]
columns:any[]
checkbox: boolean
border: boolean
// static propTypes = {
// dataSource: Object,
// columns: Object
// }
static defaultProps = {
dataSource: [],
columns: [],
checkbox: false,
border: false,
stripe: false
}
static propTypes = {
dataSource: Object,
columns: Object,
checkbox: Boolean,
border: Boolean,
stripe: Boolean
}
removeItem = (item) => {
this.props.dataSource.splice(this.props.dataSource.indexOf(item), 1)
@ -32,7 +43,6 @@ export default class Table extends WeElement<Props> {
this.props.dataSource.forEach(item => {
item.checked = e.detail
})
this.update()
}
@ -42,21 +52,6 @@ export default class Table extends WeElement<Props> {
this.update()
}
beforeRender(){
if(this.dataSource){
this.props.dataSource = this.dataSource
}
if(this.columns){
this.props.columns = this.columns
}
if(this.hasOwnProperty('checkbox')){
this.props.checkbox = this.checkbox
}
if(this.hasOwnProperty('border')){
this.props.border = this.border
}
}
_getCheckedState() {
let c = 0, uc = 0
@ -77,35 +72,43 @@ export default class Table extends WeElement<Props> {
}
render(props) {
console.error(props)
if (!props.columns) return
if (!props.dataSource) return
return (
<table {...extractClass(props, 'o-table', {
'o-table-checkbox': props.checkbox,
'o-table-border': props.border
'o-table-border': props.border,
'o-table-stripe': props.stripe
})}>
<thead>
<tr>
{props.columns.map((item, index) => {
{props.columns.map((column, index) => {
const obj: any = {}
const { width } = item
const { width } = column
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width }
}
return <th {...obj} class="text-left">{index === 0 && props.checkbox && <o-checkbox {...this._getCheckedState()} onChange={_ => this._changeHandlerTh(_, item)} />}{item.title}</th>
return <th {...obj} class={classNames({
[`o-table-align-${column.align}`]: column.align,
})}>{index === 0 && props.checkbox && <o-checkbox {...this._getCheckedState()} onChange={_ => this._changeHandlerTh(_, column)} />}{column.title}</th>
})}
</tr>
</thead>
<tbody class="table-hover">
{props.dataSource.map(item => (
<tr>
{props.columns.map((subItem, subIndex) => {
{props.columns.map((column, subIndex) => {
const obj: any = {}
const { width } = subItem
const { width } = column
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width }
}
return <td {...obj} class="text-left">{subIndex === 0 && props.checkbox && <o-checkbox checked={item.checked} onChange={_ => this._changeHandlerTd(_, item)} />}{subItem.render ? subItem.render(item) : item[subItem.key]}</td>
return <td {...obj} class={classNames({
[`o-table-align-${column.align}`]: column.align,
})}>{subIndex === 0 && props.checkbox && <o-checkbox checked={item.checked} onChange={_ => this._changeHandlerTd(_, item)} />}{column.render ? column.render(item) : item[column.key]}</td>
})}
</tr>
))}