diff --git a/src/renderers/CRUD.tsx b/src/renderers/CRUD.tsx index 782a1d43..3f782d58 100644 --- a/src/renderers/CRUD.tsx +++ b/src/renderers/CRUD.tsx @@ -117,7 +117,8 @@ export default class CRUD extends React.Component { 'loadDataOnce', 'loadDataOnceFetchOnFilter', 'source', - 'header' + 'header', + 'onAction' ]; static defaultProps = { toolbarInline: true, @@ -1571,6 +1572,7 @@ export default class CRUD extends React.Component { itemActions, classnames: cx, keepItemSelectionOnPageChange, + onAction, ...rest } = this.props; diff --git a/src/renderers/Page.tsx b/src/renderers/Page.tsx index b0982c50..62d801f0 100644 --- a/src/renderers/Page.tsx +++ b/src/renderers/Page.tsx @@ -78,7 +78,10 @@ export default class Page extends React.Component { 'body', 'aside', 'messages', - 'style' + 'style', + 'onAction', + 'onConfirm', + 'onClose' ]; componentWillMount() { diff --git a/src/renderers/Table.tsx b/src/renderers/Table.tsx index 62db5f61..748bc56b 100644 --- a/src/renderers/Table.tsx +++ b/src/renderers/Table.tsx @@ -1,15 +1,15 @@ -import React from "react"; -import { findDOMNode } from "react-dom"; -import { Renderer, RendererProps } from "../factory"; -import { SchemaNode, Action, Schema, Api, ApiObject } from "../types"; -import forEach = require("lodash/forEach"); -import { filter } from "../utils/tpl"; -import cx from "classnames"; -import DropDownButton from "./DropDownButton"; -import Checkbox from "../components/Checkbox"; -import Button from "../components/Button"; -import { TableStore, ITableStore, IColumn, IRow } from "../store/table"; -import { observer } from "mobx-react"; +import React from 'react'; +import {findDOMNode} from 'react-dom'; +import {Renderer, RendererProps} from '../factory'; +import {SchemaNode, Action, Schema, Api, ApiObject} from '../types'; +import forEach = require('lodash/forEach'); +import {filter} from '../utils/tpl'; +import cx from 'classnames'; +import DropDownButton from './DropDownButton'; +import Checkbox from '../components/Checkbox'; +import Button from '../components/Button'; +import {TableStore, ITableStore, IColumn, IRow} from '../store/table'; +import {observer} from 'mobx-react'; import { anyChanged, getScrollParent, @@ -17,25 +17,25 @@ import { noop, autobind, isArrayChildrenModified -} from "../utils/helper"; -import { resolveVariable } from "../utils/tpl-builtin"; +} from '../utils/helper'; +import {resolveVariable} from '../utils/tpl-builtin'; import { isEffectiveApi, isApiOutdated, buildApi, normalizeApi -} from "../utils/api"; -import debounce = require("lodash/debounce"); -import xor = require("lodash/xor"); -import QuickEdit from "./QuickEdit"; -import PopOver from "../components/PopOver"; -import Copyable from "./Copyable"; -import Sortable = require("sortablejs"); -import flatMap = require("lodash/flatMap"); -import { resizeSensor } from "../utils/resize-sensor"; -import find = require("lodash/find"); -import Overlay from "../components/Overlay"; -import PopOverable from "./PopOver"; +} from '../utils/api'; +import debounce = require('lodash/debounce'); +import xor = require('lodash/xor'); +import QuickEdit from './QuickEdit'; +import PopOver from '../components/PopOver'; +import Copyable from './Copyable'; +import Sortable = require('sortablejs'); +import flatMap = require('lodash/flatMap'); +import {resizeSensor} from '../utils/resize-sensor'; +import find = require('lodash/find'); +import Overlay from '../components/Overlay'; +import PopOverable from './PopOver'; export interface Column { type: string; @@ -58,18 +58,18 @@ export interface TableProps extends RendererProps { selected?: Array; valueField?: string; draggable?: boolean; - columnsTogglable?: boolean | "auto"; + columnsTogglable?: boolean | 'auto'; affixHeader?: boolean; combineNum?: number; footable?: | boolean | { - expand?: "first" | "all" | "none"; + expand?: 'first' | 'all' | 'none'; expandAll?: boolean; accordion?: boolean; }; expandConfig?: { - expand?: "first" | "all" | "none"; + expand?: 'first' | 'all' | 'none'; expandAll?: boolean; accordion?: boolean; }; @@ -96,50 +96,52 @@ export interface TableProps extends RendererProps { export default class Table extends React.Component { static propsList: Array = [ - "header", - "headerToolbarRender", - "footer", - "footerToolbarRender", - "footable", - "expandConfig", - "placeholder", - "tableClassName", - "source", - "selectable", - "columnsTogglable", - "affixHeader", - "headerClassName", - "footerClassName", - "selected", - "multiple", - "primaryField", - "hideQuickSaveBtn", - "itemCheckableOn", - "itemDraggableOn", - "checkOnItemClick", - "hideCheckToggler", - "itemActions", - "combineNum", - "items", - "valueField", - "saveImmediately" + 'header', + 'headerToolbarRender', + 'footer', + 'footerToolbarRender', + 'footable', + 'expandConfig', + 'placeholder', + 'tableClassName', + 'source', + 'selectable', + 'columnsTogglable', + 'affixHeader', + 'headerClassName', + 'footerClassName', + 'selected', + 'multiple', + 'primaryField', + 'hideQuickSaveBtn', + 'itemCheckableOn', + 'itemDraggableOn', + 'checkOnItemClick', + 'hideCheckToggler', + 'itemActions', + 'combineNum', + 'items', + 'valueField', + 'saveImmediately', + 'onAction', + 'onQuickChange' ]; static defaultProps: Partial = { - className: "", - placeholder: "暂无数据", - tableClassName: "", - source: "$items", + className: '', + placeholder: '暂无数据', + tableClassName: '', + source: '$items', selectable: false, - columnsTogglable: "auto", + columnsTogglable: 'auto', affixHeader: true, - headerClassName: "", - footerClassName: "", - toolbarClassName: "", - primaryField: "id", - itemCheckableOn: "", - itemDraggableOn: "", + headerClassName: '', + footerClassName: '', + toolbarClassName: '', + primaryField: 'id', + itemCheckableOn: '', + itemDraggableOn: '', hideCheckToggler: false, - dragIcon: "glyphicon glyphicon-sort" + dragIcon: 'glyphicon glyphicon-sort' }; table?: HTMLTableElement; @@ -202,7 +204,7 @@ export default class Table extends React.Component { if (Array.isArray(value)) { rows = value; - } else if (typeof source === "string") { + } else if (typeof source === 'string') { const resolved = resolveVariable(source, props.data); const prev = prevProps ? resolveVariable(source, prevProps.data) : null; @@ -214,7 +216,7 @@ export default class Table extends React.Component { } updateRows && store.initRows(rows, props.getEntryId); - typeof props.selected !== "undefined" && + typeof props.selected !== 'undefined' && store.updateSelected(props.selected, props.valueField); } @@ -259,9 +261,9 @@ export default class Table extends React.Component { } componentDidMount() { - let parent: HTMLElement | Window | null = getScrollParent( - findDOMNode(this) as HTMLElement - ); + let parent: HTMLElement | Window | null = getScrollParent(findDOMNode( + this + ) as HTMLElement); if (!parent || parent === document.body) { parent = window; @@ -271,13 +273,13 @@ export default class Table extends React.Component { this.updateTableInfo(); const dom = findDOMNode(this) as HTMLElement; - if (dom.closest(".modal-body")) { + if (dom.closest('.modal-body')) { return; } this.affixDetect(); - parent.addEventListener("scroll", this.affixDetect); - window.addEventListener("resize", this.affixDetect); + parent.addEventListener('scroll', this.affixDetect); + window.addEventListener('resize', this.affixDetect); } componentWillReceiveProps(nextProps: TableProps) { @@ -287,19 +289,19 @@ export default class Table extends React.Component { if ( anyChanged( [ - "selectable", - "columnsTogglable", - "draggable", - "orderBy", - "orderDir", - "multiple", - "footable", - "primaryField", - "itemCheckableOn", - "itemDraggableOn", - "hideCheckToggler", - "combineNum", - "expandConfig" + 'selectable', + 'columnsTogglable', + 'draggable', + 'orderBy', + 'orderDir', + 'multiple', + 'footable', + 'primaryField', + 'itemCheckableOn', + 'itemDraggableOn', + 'hideCheckToggler', + 'combineNum', + 'expandConfig' ], props, nextProps @@ -329,7 +331,7 @@ export default class Table extends React.Component { } if ( - anyChanged(["source", "value", "items"], props, nextProps) || + anyChanged(['source', 'value', 'items'], props, nextProps) || (!nextProps.value && !nextProps.items && nextProps.data !== props.data) ) { Table.syncRows(store, nextProps, props); @@ -342,21 +344,21 @@ export default class Table extends React.Component { componentWillUnmount() { const parent = this.parentNode; - parent && parent.removeEventListener("scroll", this.affixDetect); - window.removeEventListener("resize", this.affixDetect); + parent && parent.removeEventListener('scroll', this.affixDetect); + window.removeEventListener('resize', this.affixDetect); (this.updateTableInfoLazy as any).cancel(); this.unSensor && this.unSensor(); } subFormRef(form: any, x: number, y: number) { - const { quickEditFormRef } = this.props; + const {quickEditFormRef} = this.props; quickEditFormRef && quickEditFormRef(form, x, y); this.subForms[`${x}-${y}`] = form; } handleAction(e: React.UIEvent, action: Action, ctx: object) { - const { onAction } = this.props; + const {onAction} = this.props; // todo onAction(e, action, ctx); @@ -368,7 +370,7 @@ export default class Table extends React.Component { } handleCheckAll() { - const { store } = this.props; + const {store} = this.props; store.toggleAll(); this.syncSelected(); @@ -380,7 +382,7 @@ export default class Table extends React.Component { saveImmediately?: boolean | any, savePristine?: boolean ) { - const { onSave, saveImmediately: propsSaveImmediately } = this.props; + const {onSave, saveImmediately: propsSaveImmediately} = this.props; item.change(values, savePristine); @@ -395,7 +397,7 @@ export default class Table extends React.Component { this.props.onAction( null, { - actionType: "ajax", + actionType: 'ajax', api: saveImmediately.api }, values @@ -417,7 +419,7 @@ export default class Table extends React.Component { } async handleSave() { - const { store, onSave } = this.props; + const {store, onSave} = this.props; if (!onSave || !store.modifiedRows.length) { return; @@ -453,7 +455,7 @@ export default class Table extends React.Component { } handleSaveOrder() { - const { store, onSaveOrder } = this.props; + const {store, onSaveOrder} = this.props; if (!onSaveOrder || !store.movedRows.length) { return; @@ -466,7 +468,7 @@ export default class Table extends React.Component { } syncSelected() { - const { store, onSelect } = this.props; + const {store, onSelect} = this.props; onSelect && onSelect( @@ -476,7 +478,7 @@ export default class Table extends React.Component { } reset() { - const { store } = this.props; + const {store} = this.props; store.reset(); @@ -488,14 +490,14 @@ export default class Table extends React.Component { } bulkUpdate(value: any, items: Array) { - const { store, primaryField } = this.props; + const {store, primaryField} = this.props; if (primaryField && value.ids) { - const ids = value.ids.split(","); + const ids = value.ids.split(','); const rows = store.rows.filter(item => find(ids, (id: any) => id && id == item.data[primaryField]) ); - const newValue = { ...value, ids: undefined }; + const newValue = {...value, ids: undefined}; rows.forEach(row => row.change(newValue)); } else { const rows = store.rows.filter(item => ~items.indexOf(item.pristine)); @@ -504,7 +506,7 @@ export default class Table extends React.Component { } getSelected() { - const { store } = this.props; + const {store} = this.props; return store.selectedRows.map(item => item.data); } @@ -525,8 +527,8 @@ export default class Table extends React.Component { (this.table.parentNode as HTMLElement).offsetWidth }px`; affixed - ? affixedDom.classList.add("in") - : affixedDom.classList.remove("in"); + ? affixedDom.classList.add('in') + : affixedDom.classList.remove('in'); // store.markHeaderAffix(clip.top < offsetY && (clip.top + clip.height - 40) > offsetY); } @@ -557,14 +559,14 @@ export default class Table extends React.Component { [propName: string]: number; } = (this.heights = {}); forEach( - table.querySelectorAll("thead>tr:last-child>th"), + table.querySelectorAll('thead>tr:last-child>th'), (item: HTMLElement) => { heights.header || (heights.header = item.offsetHeight); - widths[item.getAttribute("data-index") as string] = item.offsetWidth; + widths[item.getAttribute('data-index') as string] = item.offsetWidth; } ); forEach( - table.querySelectorAll("tbody>tr>*:last-child"), + table.querySelectorAll('tbody>tr>*:last-child'), (item: HTMLElement, index: number) => (heights[index] = item.offsetHeight) ); @@ -596,16 +598,16 @@ export default class Table extends React.Component { let totalWidth = 0; forEach( - table.querySelectorAll("thead>tr:last-child>th"), + table.querySelectorAll('thead>tr:last-child>th'), (item: HTMLElement) => { const width = this.widths[ - parseInt(item.getAttribute("data-index") as string, 10) + parseInt(item.getAttribute('data-index') as string, 10) ]; const style = getComputedStyle(item); const borderWidth = - (parseInt(style.getPropertyValue("border-left-width"), 10) || 0) + - (parseInt(style.getPropertyValue("border-right-width"), 10) || 0); + (parseInt(style.getPropertyValue('border-left-width'), 10) || 0) + + (parseInt(style.getPropertyValue('border-right-width'), 10) || 0); item.style.cssText += `width: ${width - borderWidth}px`; totalWidth += width; @@ -613,7 +615,7 @@ export default class Table extends React.Component { ); forEach( - table.querySelectorAll("tbody>tr"), + table.querySelectorAll('tbody>tr'), (item: HTMLElement, index) => { item.style.cssText += `height: ${this.heights[index]}px`; } @@ -649,7 +651,7 @@ export default class Table extends React.Component { if (fixedLeft && fixedLeft.length) { for (let i = 0, len = fixedLeft.length; i < len; i++) { let node = fixedLeft[i]; - leading ? node.classList.remove("in") : node.classList.add("in"); + leading ? node.classList.remove('in') : node.classList.add('in'); } } @@ -657,7 +659,7 @@ export default class Table extends React.Component { if (fixedRight && fixedRight.length) { for (let i = 0, len = fixedRight.length; i < len; i++) { let node = fixedRight[i]; - trailing ? node.classList.remove("in") : node.classList.add("in"); + trailing ? node.classList.remove('in') : node.classList.add('in'); } } const table = this.affixedTable; @@ -698,12 +700,12 @@ export default class Table extends React.Component { const store = this.props.store; const ns = this.props.classPrefix; this.sortable = new Sortable( - (this.table as HTMLElement).querySelector("tbody") as HTMLElement, + (this.table as HTMLElement).querySelector('tbody') as HTMLElement, { - group: "table", + group: 'table', animation: 150, handle: `.${ns}Table-dragCell`, - ghostClass: "is-dragging", + ghostClass: 'is-dragging', onEnd: (e: any) => { // 没有移动 if (e.newIndex === e.oldIndex) { @@ -733,7 +735,7 @@ export default class Table extends React.Component { handleMouseMove(e: React.MouseEvent) { const tr: HTMLElement = (e.target as HTMLElement).closest( - "tr[data-index]" + 'tr[data-index]' ) as HTMLElement; if (!tr) { @@ -741,7 +743,7 @@ export default class Table extends React.Component { } const store = this.props.store; - const index = parseInt(tr.getAttribute("data-index") as string, 10); + const index = parseInt(tr.getAttribute('data-index') as string, 10); if (store.hoverIndex !== index) { store.rows.forEach((item, key) => item.setIsHover(index === key)); } @@ -763,15 +765,15 @@ export default class Table extends React.Component { handleDragStart(e: React.DragEvent) { const store = this.props.store; const target = e.currentTarget; - const tr = (this.draggingTr = target.closest("tr")!); - const id = tr.getAttribute("data-id")!; + const tr = (this.draggingTr = target.closest('tr')!); + const id = tr.getAttribute('data-id')!; const tbody = tr.parentNode!; this.originIndex = Array.prototype.indexOf.call(tbody.childNodes, tr); - tr.classList.add("is-dragging"); + tr.classList.add('is-dragging'); - e.dataTransfer.effectAllowed = "move"; - e.dataTransfer.setData("text/plain", id); + e.dataTransfer.effectAllowed = 'move'; + e.dataTransfer.setData('text/plain', id); e.dataTransfer.setDragImage(tr, 0, 0); const item = store.getRowById(id)!; @@ -784,19 +786,19 @@ export default class Table extends React.Component { } siblings = siblings.filter(sibling => sibling !== item); - tbody.addEventListener("dragover", this.handleDragOver); - tbody.addEventListener("drop", this.handleDrop); + tbody.addEventListener('dragover', this.handleDragOver); + tbody.addEventListener('drop', this.handleDrop); this.draggingSibling = siblings.map(item => { let tr: HTMLTableRowElement = tbody.querySelector( `tr[data-id="${item.id}"]` ) as HTMLTableRowElement; - tr.classList.add("is-drop-allowed"); + tr.classList.add('is-drop-allowed'); return tr; }); - tr.addEventListener("dragend", this.handleDragEnd); + tr.addEventListener('dragend', this.handleDragEnd); } @autobind @@ -805,12 +807,12 @@ export default class Table extends React.Component { return; } e.preventDefault(); - e.dataTransfer!.dropEffect = "move"; + e.dataTransfer!.dropEffect = 'move'; - const overTr: HTMLElement = (e.target as HTMLElement).closest("tr")!; + const overTr: HTMLElement = (e.target as HTMLElement).closest('tr')!; if ( !overTr || - !~overTr.className.indexOf("is-drop-allowed") || + !~overTr.className.indexOf('is-drop-allowed') || overTr === this.draggingTr ) { return; @@ -831,7 +833,7 @@ export default class Table extends React.Component { const tr = this.draggingTr; const tbody = tr.parentElement!; const index = Array.prototype.indexOf.call(tbody.childNodes, tr); - const item: IRow = store.getRowById(tr.getAttribute("data-id")!) as any; + const item: IRow = store.getRowById(tr.getAttribute('data-id')!) as any; // destroy this.handleDragEnd(); @@ -851,12 +853,12 @@ export default class Table extends React.Component { ] ); - tr.classList.remove("is-dragging"); - tr.removeEventListener("dragend", this.handleDragEnd); - tbody.removeEventListener("dragover", this.handleDragOver); - tbody.removeEventListener("drop", this.handleDrop); + tr.classList.remove('is-dragging'); + tr.removeEventListener('dragend', this.handleDragEnd); + tbody.removeEventListener('dragover', this.handleDragOver); + tbody.removeEventListener('drop', this.handleDrop); this.draggingSibling.forEach(item => - item.classList.remove("is-drop-allowed") + item.classList.remove('is-drop-allowed') ); } @@ -876,13 +878,15 @@ export default class Table extends React.Component { store.moved ) { return ( -
+
{!saveImmediately && store.modified && !hideQuickSaveBtn ? ( - {`当前有 ${store.modified} 条记录修改了内容, 但并没有提交。请选择:`} + {`当前有 ${ + store.modified + } 条记录修改了内容, 但并没有提交。请选择:`}
); @@ -941,7 +945,7 @@ export default class Table extends React.Component { classnames: cx } = this.props; - if (column.type === "__checkme") { + if (column.type === '__checkme') { return ( {store.rows.length && multiple ? ( @@ -954,9 +958,9 @@ export default class Table extends React.Component { ) : null} ); - } else if (column.type === "__dragme") { + } else if (column.type === '__dragme') { return ; - } else if (column.type === "__expandme") { + } else if (column.type === '__expandme') { return ( {(store.footable && @@ -966,8 +970,8 @@ export default class Table extends React.Component { store.expandConfig.accordion)) ? null : ( { } else if (column.sortable && column.name) { affix = ( { if (column.name === store.orderBy) { store.setOrderByInfo( column.name, - store.orderDir === "desc" ? "asc" : "desc" + store.orderDir === 'desc' ? 'asc' : 'desc' ); } else { - store.setOrderByInfo(column.name as string, "asc"); + store.setOrderByInfo(column.name as string, 'asc'); } onQuery && @@ -1020,24 +1024,24 @@ export default class Table extends React.Component { > @@ -1065,22 +1069,22 @@ export default class Table extends React.Component {
- {column.label ? render("tpl", column.label) : null} + {column.label ? render('tpl', column.label) : null} {column.remark - ? render("remark", { - type: "remark", + ? render('remark', { + type: 'remark', tooltip: column.remark, container: env && env.getModalContainer @@ -1110,13 +1114,13 @@ export default class Table extends React.Component { return null; } - if (column.type === "__checkme") { + if (column.type === '__checkme') { return ( {item.checkable ? ( { ) : null} ); - } else if (column.type === "__dragme") { + } else if (column.type === '__dragme') { return ( {item.draggable ? : null} ); - } else if (column.type === "__expandme") { + } else if (column.type === '__expandme') { return ( {item.depth > 2 - ? Array.from({ length: item.depth - 2 }).map((_, index) => ( - + ? Array.from({length: item.depth - 2}).map((_, index) => ( + )) : null} {item.expandable ? ( { @@ -1193,20 +1197,20 @@ export default class Table extends React.Component { { ...column.pristine, column: column.pristine, - type: "cell" + type: 'cell' }, subProps ); } renderAffixHeader(tableClassName: string) { - const { store, affixHeader, render, classnames: cx } = this.props; + const {store, affixHeader, render, classnames: cx} = this.props; return affixHeader ? ( -
+
{this.renderHeading()} {this.renderHeader(false)} -
+
{store.leftFixedColumns.length ? this.renderFixedColumns( store.leftFixedColumns, @@ -1215,7 +1219,7 @@ export default class Table extends React.Component { ) : null}
-
+
{store.rightFixedColumns.length ? this.renderFixedColumns( store.rightFixedColumns, @@ -1224,7 +1228,7 @@ export default class Table extends React.Component { ) : null}
-
+
{store.columnGroup.length ? ( @@ -1235,7 +1239,7 @@ export default class Table extends React.Component { data-index={item.index} colSpan={item.colSpan} > - {item.label ? render("tpl", item.label) : null} + {item.label ? render('tpl', item.label) : null} ))} @@ -1243,8 +1247,8 @@ export default class Table extends React.Component { {store.filteredColumns.map(column => this.renderHeadCell(column, { - key: column.index, - "data-index": column.index + 'key': column.index, + 'data-index': column.index }) )} @@ -1258,7 +1262,7 @@ export default class Table extends React.Component { renderFixedColumns( columns: Array, headerOnly: boolean = false, - tableClassName: string = "" + tableClassName: string = '' ) { const { rowClassName, @@ -1277,8 +1281,8 @@ export default class Table extends React.Component { return (
0 ? "Table-table--withCombine" : "", + 'Table-table', + store.combineNum > 0 ? 'Table-table--withCombine' : '', tableClassName )} > @@ -1287,7 +1291,7 @@ export default class Table extends React.Component { {store.columnGroup.map((item, index) => ( ))} @@ -1295,8 +1299,8 @@ export default class Table extends React.Component { {columns.map(column => this.renderHeadCell(column, { - key: column.index, - "data-index": column.index + 'key': column.index, + 'data-index': column.index }) )} @@ -1336,9 +1340,9 @@ export default class Table extends React.Component { ); }) ) : ( - + )} @@ -1351,10 +1355,10 @@ export default class Table extends React.Component { renderToolbar(toolbar: SchemaNode, index: number) { const type = (toolbar as Schema).type || (toolbar as string); - if (type === "columns-toggler") { + if (type === 'columns-toggler') { this.renderedToolbars.push(type); return this.renderColumnsToggler(toolbar as any); - } else if (type === "drag-toggler") { + } else if (type === 'drag-toggler') { this.renderedToolbars.push(type); return this.renderDragToggler(); } @@ -1363,7 +1367,7 @@ export default class Table extends React.Component { } renderColumnsToggler(config?: any) { - const { store, classPrefix: ns, classnames: cx, ...rest } = this.props; + const {store, classPrefix: ns, classnames: cx, ...rest} = this.props; const render = this.props.render; @@ -1375,7 +1379,7 @@ export default class Table extends React.Component { { label={} > {store.toggableColumns.map(column => ( -
  • +
  • - {column.label ? render("tpl", column.label) : null} + {column.label ? render('tpl', column.label) : null}
    • ))} @@ -1398,7 +1402,7 @@ export default class Table extends React.Component { } renderDragToggler() { - const { store, env, draggable, classPrefix: ns, dragIcon } = this.props; + const {store, env, draggable, classPrefix: ns, dragIcon} = this.props; if (!draggable || store.isNested) { return null; @@ -1428,17 +1432,17 @@ export default class Table extends React.Component { } renderActions(region: string) { - let { actions, render, store, classnames: cx, data } = this.props; + let {actions, render, store, classnames: cx, data} = this.props; actions = Array.isArray(actions) ? actions.concat() : []; if ( store.toggable && - region === "header" && - !~this.renderedToolbars.indexOf("columns-toggler") + region === 'header' && + !~this.renderedToolbars.indexOf('columns-toggler') ) { actions.push({ - type: "button", + type: 'button', children: this.renderColumnsToggler() }); } @@ -1446,23 +1450,23 @@ export default class Table extends React.Component { if ( store.draggable && !store.isNested && - region === "header" && + region === 'header' && store.rows.length > 1 && - !~this.renderedToolbars.indexOf("drag-toggler") + !~this.renderedToolbars.indexOf('drag-toggler') ) { actions.push({ - type: "button", + type: 'button', children: this.renderDragToggler() }); } return Array.isArray(actions) && actions.length ? ( -
    +
    {actions.map((action, key) => render( `action/${key}`, { - type: "button", + type: 'button', ...(action as any) }, { @@ -1509,18 +1513,18 @@ export default class Table extends React.Component { this.renderToolbar ) : null; - const actions = this.renderActions("header"); + const actions = this.renderActions('header'); const toolbarNode = actions || child || store.dragging ? (
    {actions} {child} {store.dragging ? ( -
    +
    请拖动左边的按钮进行排序
    ) : null} @@ -1528,8 +1532,8 @@ export default class Table extends React.Component { ) : null; const headerNode = header && (!Array.isArray(header) || header.length) ? ( -
    - {render("header", header, { +
    + {render('header', header, { ...(editable === false ? otherProps : null), data: store.getData(data) })} @@ -1568,12 +1572,12 @@ export default class Table extends React.Component { this.renderToolbar ) : null; - const actions = this.renderActions("footer"); + const actions = this.renderActions('footer'); const toolbarNode = actions || child ? (
    {actions} @@ -1582,8 +1586,8 @@ export default class Table extends React.Component { ) : null; const footerNode = footer && (!Array.isArray(footer) || footer.length) ? ( -
    - {render("footer", footer, { +
    + {render('footer', footer, { data: store.getData(data) })}
    @@ -1622,9 +1626,9 @@ export default class Table extends React.Component { ? filter(rowClassNameExpr, item.data) : rowClassName, { - "is-last": item.depth > 1 && rowIndex === rows.length - 1, - "is-expanded": item.expanded, - "is-expandable": item.expandable + 'is-last': item.depth > 1 && rowIndex === rows.length - 1, + 'is-expanded': item.expanded, + 'is-expandable': item.expandable } )} columns={store.filteredColumns} @@ -1674,7 +1678,7 @@ export default class Table extends React.Component { } renderItemActions() { - const { itemActions, render, store, classnames: cx } = this.props; + const {itemActions, render, store, classnames: cx} = this.props; const rowIndex = store.hoverIndex; if (!~rowIndex || !itemActions || !itemActions.length) { @@ -1695,13 +1699,13 @@ export default class Table extends React.Component { return (
    -
    +
    {itemActions.map((action, index) => action.hiddenOnHover ? null @@ -1725,18 +1729,18 @@ export default class Table extends React.Component { } renderTableContent() { - const { store, placeholder, classnames: cx, data, render } = this.props; + const {store, placeholder, classnames: cx, data, render} = this.props; const tableClassName = cx( - "Table-table", - store.combineNum > 0 ? "Table-table--withCombine" : "", + 'Table-table', + store.combineNum > 0 ? 'Table-table--withCombine' : '', this.props.tableClassName ); return (
    - {item.label ? render("tpl", item.label) : null} + {item.label ? render('tpl', item.label) : null}
    - {render("placeholder", placeholder, { data })} + {render('placeholder', placeholder, {data})}
    @@ -1749,7 +1753,7 @@ export default class Table extends React.Component { data-index={item.index} colSpan={item.colSpan} > - {item.label ? render("tpl", item.label) : null} + {item.label ? render('tpl', item.label) : null} ))} @@ -1757,8 +1761,8 @@ export default class Table extends React.Component { {store.filteredColumns.map(column => this.renderHeadCell(column, { - "data-index": column.index, - key: column.index + 'data-index': column.index, + 'key': column.index }) )} @@ -1767,9 +1771,9 @@ export default class Table extends React.Component { {store.rows.length ? ( this.renderRows(store.rows) ) : ( - + )} @@ -1794,25 +1798,25 @@ export default class Table extends React.Component { const header = this.renderHeader(); const footer = this.renderFooter(); const tableClassName = cx( - "Table-table", - store.combineNum > 0 ? "Table-table--withCombine" : "", + 'Table-table', + store.combineNum > 0 ? 'Table-table--withCombine' : '', this.props.tableClassName ); return (
    {this.renderAffixHeader(tableClassName)} {heading} {header}
    -
    +
    {store.leftFixedColumns.length ? this.renderFixedColumns( store.leftFixedColumns, @@ -1821,7 +1825,7 @@ export default class Table extends React.Component { ) : null}
    -
    +
    {store.rightFixedColumns.length ? this.renderFixedColumns( store.rightFixedColumns, @@ -1839,7 +1843,7 @@ export default class Table extends React.Component { } } -interface TableRowProps extends Pick { +interface TableRowProps extends Pick { onCheck: (item: IRow) => void; classPrefix: string; renderCell: ( @@ -1873,7 +1877,7 @@ class TableRow extends React.Component { if ( !e.currentTarget.contains(target) || - ~["INPUT", "TEXTAREA"].indexOf(target.tagName) || + ~['INPUT', 'TEXTAREA'].indexOf(target.tagName) || ((formItem = target.closest(`button, a, .${ns}Form-item`)) && e.currentTarget.contains(formItem)) ) { @@ -1884,7 +1888,7 @@ class TableRow extends React.Component { } handleAction(e: React.UIEvent, action: Action, ctx: any) { - const { onAction, item } = this.props; + const {onAction, item} = this.props; onAction && onAction(e, action, ctx || item.data); } @@ -1893,7 +1897,7 @@ class TableRow extends React.Component { saveImmediately?: boolean, savePristine?: boolean ) { - const { onQuickChange, item } = this.props; + const {onQuickChange, item} = this.props; onQuickChange && onQuickChange(item, values, saveImmediately, savePristine); } @@ -1921,10 +1925,10 @@ class TableRow extends React.Component { data-index={item.newIndex} onClick={checkOnItemClick ? this.handleClick : undefined} className={cx(itemClassName, { - "is-hovered": item.isHover, - "is-checked": item.checked, - "is-modified": item.modified, - "is-moved": item.moved, + 'is-hovered': item.isHover, + 'is-checked': item.checked, + 'is-modified': item.modified, + 'is-moved': item.moved, [`${ns}Table-tr--odd`]: itemIndex % 2 === 0, [`${ns}Table-tr--even`]: itemIndex % 2 === 1 })} @@ -1974,10 +1978,10 @@ class TableRow extends React.Component { className={cx( itemClassName, { - "is-hovered": item.isHover, - "is-checked": item.checked, - "is-modified": item.modified, - "is-moved": item.moved, + 'is-hovered': item.isHover, + 'is-checked': item.checked, + 'is-modified': item.modified, + 'is-moved': item.moved, [`${ns}Table-tr--odd`]: itemIndex % 2 === 0, [`${ns}Table-tr--even`]: itemIndex % 2 === 1 }, @@ -2003,7 +2007,7 @@ class TableRow extends React.Component { test: (path: string) => /(^|\/)table$/.test(path) /* && !/(^|\/)table$/.test(path)*/, storeType: TableStore.name, - name: "table" + name: 'table' }) export class TableRenderer extends Table {} @@ -2041,16 +2045,16 @@ export class HeadCellSearchDropDown extends React.Component< } buildSchema() { - const { searchable, sortable, name, label } = this.props; + const {searchable, sortable, name, label} = this.props; let schema; if (searchable === true) { schema = { - title: "", + title: '', controls: [ { - type: "text", + type: 'text', name, placeholder: label } @@ -2059,16 +2063,16 @@ export class HeadCellSearchDropDown extends React.Component< } else if (searchable) { if (searchable.controls || searchable.tabs || searchable.fieldSet) { schema = { - title: "", + title: '', ...searchable }; } else { schema = { - title: "", + title: '', className: searchable.formClassName, controls: [ { - type: searchable.type || "text", + type: searchable.type || 'text', name: searchable.name || name, placeholder: label, ...searchable @@ -2081,22 +2085,22 @@ export class HeadCellSearchDropDown extends React.Component< if (schema && schema.controls && sortable) { schema.controls.unshift( { - type: "hidden", - name: "orderBy", + type: 'hidden', + name: 'orderBy', value: name }, { - type: "button-group", - name: "orderDir", - label: "排序", + type: 'button-group', + name: 'orderDir', + label: '排序', options: [ { - label: "正序", - value: "asc" + label: '正序', + value: 'asc' }, { - label: "降序", - value: "desc" + label: '降序', + value: 'desc' } ] } @@ -2106,25 +2110,25 @@ export class HeadCellSearchDropDown extends React.Component< if (schema) { schema = { ...schema, - type: "form", - wrapperComponent: "div", + type: 'form', + wrapperComponent: 'div', actions: [ { - type: "button", - label: "取消", - actionType: "cancel" + type: 'button', + label: '取消', + actionType: 'cancel' }, { - label: "搜索", - type: "submit", + label: '搜索', + type: 'submit', primary: true } ] }; } - return schema || "error"; + return schema || 'error'; } handleClickOutside() { @@ -2144,9 +2148,9 @@ export class HeadCellSearchDropDown extends React.Component< } handleAction(e: any, action: Action, ctx: object) { - const { onAction } = this.props; + const {onAction} = this.props; - if (action.actionType === "cancel" || action.actionType === "close") { + if (action.actionType === 'cancel' || action.actionType === 'close') { this.close(); return; } @@ -2155,7 +2159,7 @@ export class HeadCellSearchDropDown extends React.Component< } handleSubmit(values: any) { - const { onQuery, name } = this.props; + const {onQuery, name} = this.props; this.close(); @@ -2203,12 +2207,12 @@ export class HeadCellSearchDropDown extends React.Component< overlay > { - render("quick-search-form", this.buildSchema(), { + render('quick-search-form', this.buildSchema(), { data: { ...data, orderBy: orderBy, orderDir: - orderBy === name ? (store as ITableStore).orderDir : "" + orderBy === name ? (store as ITableStore).orderDir : '' }, onSubmit: this.handleSubmit, onAction: this.handleAction @@ -2256,7 +2260,7 @@ export class HeadCellFilterDropDown extends React.Component< } componentDidMount() { - const { filterable } = this.props; + const {filterable} = this.props; if (filterable.source) { this.fetchOptions(); @@ -2295,7 +2299,7 @@ export class HeadCellFilterDropDown extends React.Component< } fetchOptions() { - const { env, filterable, data } = this.props; + const {env, filterable, data} = this.props; if (!isEffectiveApi(filterable.source, data)) { return; @@ -2313,13 +2317,13 @@ export class HeadCellFilterDropDown extends React.Component< } alterOptions(options: Array) { - const { data, filterable, name } = this.props; - const filterValue = (data && data[name]) || ""; + const {data, filterable, name} = this.props; + const filterValue = (data && data[name]) || ''; if (filterable.multiple) { options = options.map(option => ({ ...option, - selected: filterValue.split(",").indexOf(option.value) > -1 + selected: filterValue.split(',').indexOf(option.value) > -1 })); } else { options = options.map(option => ({ @@ -2347,7 +2351,7 @@ export class HeadCellFilterDropDown extends React.Component< } handleClick(value: string) { - const { onQuery, name } = this.props; + const {onQuery, name} = this.props; onQuery({ [name]: value @@ -2356,14 +2360,14 @@ export class HeadCellFilterDropDown extends React.Component< } handleCheck(value: string) { - const { data, name, onQuery } = this.props; + const {data, name, onQuery} = this.props; let query: string; if (data[name] && data[name] === value) { - query = ""; + query = ''; } else { query = - (data[name] && xor(data[name].split(","), [value]).join(",")) || value; + (data[name] && xor(data[name].split(','), [value]).join(',')) || value; } onQuery({ @@ -2372,7 +2376,7 @@ export class HeadCellFilterDropDown extends React.Component< } render() { - const { isOpened, filterOptions } = this.state; + const {isOpened, filterOptions} = this.state; const { filterable, popOverContainer, @@ -2402,13 +2406,13 @@ export class HeadCellFilterDropDown extends React.Component< overlay > {filterOptions && filterOptions.length > 0 ? ( -
      +
        {!filterable.multiple ? filterOptions.map((option: any, index) => (
      • @@ -2416,7 +2420,7 @@ export class HeadCellFilterDropDown extends React.Component<
        • )) : filterOptions.map((option: any, index) => ( -
      • +
      • { static defaultProps = { - wrapperComponent: "td" + wrapperComponent: 'td' }; static propsList: Array = [ - "type", - "label", - "column", - "body", - "tpl", - "rowSpan", - "remark" + 'type', + 'label', + 'column', + 'body', + 'tpl', + 'rowSpan', + 'remark' ]; render() { @@ -2482,12 +2486,12 @@ export class TableCell extends React.Component { const schema = { ...column, className: innerClassName, - type: (column && column.type) || "plain" + type: (column && column.type) || 'plain' }; let body = children ? children - : render("field", schema, { + : render('field', schema, { ...rest, value, data @@ -2501,7 +2505,7 @@ export class TableCell extends React.Component { if (!/%$/.test(String(style.width))) { body = ( -
        +
        {prefix} {body} {affix} @@ -2535,7 +2539,7 @@ export class TableCell extends React.Component { @Renderer({ test: /(^|\/)table\/(?:.*\/)?cell$/, - name: "table-cell" + name: 'table-cell' }) @QuickEdit() @PopOverable() @@ -2543,24 +2547,24 @@ export class TableCell extends React.Component { @observer export class TableCellRenderer extends TableCell { static propsList = [ - "quickEdit", - "quickEditEnabledOn", - "popOver", - "copyable", - "inline", + 'quickEdit', + 'quickEditEnabledOn', + 'popOver', + 'copyable', + 'inline', ...TableCell.propsList ]; } @Renderer({ test: /(^|\/)field$/, - name: "field" + name: 'field' }) @PopOverable() @Copyable() export class FieldRenderer extends TableCell { static defaultProps = { ...TableCell.defaultProps, - wrapperComponent: "div" + wrapperComponent: 'div' }; }
    - {render("placeholder", placeholder, { data })} + {render('placeholder', placeholder, {data})}