Skip to content

Commit

Permalink
feat(Table): add small size
Browse files Browse the repository at this point in the history
  • Loading branch information
@youluna
youluna committed Aug 23, 2019
1 parent 00bbfe6 commit bce73f0
Show file tree
Hide file tree
Showing 7 changed files with 82 additions and 10 deletions.
42 changes: 36 additions & 6 deletions docs/table/theme/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ class FunctionDemo extends React.Component {
const functions = convert(demoFunction);
const { lang } = this.props;
const i18n = i18nMap[lang];
const { size } = functions;
const rowSelection = {
mode: functions.rowSelection,
selectedRowKeys: [4]
Expand All @@ -89,6 +90,7 @@ class FunctionDemo extends React.Component {
if (functions.filters === 'true') {
filters = [{ label: 'Option1', value: 'Option1' }, { label: 'Option2', value: 'Option2' }];
}

function productRender(product) {
return (
<div className="media">
Expand Down Expand Up @@ -174,19 +176,28 @@ class FunctionDemo extends React.Component {
className: index === 1 ? 'selected' : ''
});
const cols = [
<Table.Column cell={productRender} title={i18n.productDetail} key="product" dataIndex="product" filters={filters} />,
<Table.Column cell={priceRender} title={i18n.price} dataIndex="price" key="price" />,
<Table.Column cell={statusRender} title={i18n.status} dataIndex="status" key="status" />,
<Table.Column cell={operRender} title="" dataIndex="oper" key="oper" />
];

const smallCols = [].concat(
<Table.Column title={i18n.productDetail} key="product" dataIndex="product[0].title" filters={filters} />
, cols);

cols.unshift(<Table.Column cell={productRender} title={i18n.productDetail} key="product" dataIndex="product" filters={filters} />);

const groupCols = cols.slice();
groupCols.unshift(<Table.GroupHeader cell={groupHeaderRender} />);
groupCols.push(<Table.GroupFooter cell={groupFooterRender} />);

const smallGroupCols = smallCols.slice();
smallGroupCols.unshift(<Table.GroupHeader cell={groupHeaderRender} />);
smallGroupCols.push(<Table.GroupFooter cell={groupFooterRender} />);

return (
<Demo title="List" demoFunction={demoFunction} onFunctionChange={this.onFunctionChange}>
<Demo title="List">
<Demo title="List medium">
<DemoGroup label="Normal">
<Table dataSource={listDataSource} hasBorder={false}>{cols}</Table>
</DemoGroup>
Expand All @@ -197,7 +208,12 @@ class FunctionDemo extends React.Component {
<Table dataSource={[]} hasBorder={false}>{cols}</Table>
</DemoGroup>
</Demo>
<Demo title="Group">
<Demo title="List small">
<DemoGroup label="Normal">
<Table size="small" dataSource={listDataSource} hasBorder={false}>{smallCols}</Table>
</DemoGroup>
</Demo>
<Demo title="Group medium">
<DemoGroup label="Normal">
<Table dataSource={listDataSource}>{groupCols}</Table>
</DemoGroup>
Expand All @@ -208,6 +224,11 @@ class FunctionDemo extends React.Component {
<Table dataSource={[]}>{groupCols}</Table>
</DemoGroup>
</Demo>
<Demo title="Group small">
<DemoGroup label="Normal">
<Table size="small" dataSource={listDataSource}>{smallGroupCols}</Table>
</DemoGroup>
</Demo>
</Demo>
);
}
Expand Down Expand Up @@ -262,6 +283,7 @@ class TableFunctionDemo extends React.Component {
const functions = convert(demoFunction);
const { lang } = this.props;
const i18n = i18nMap[lang];
const { size } = functions;
const rowSelection = functions.rowSelection === 'false' ? null : {
mode: functions.rowSelection,
selectedRowKeys: [1]
Expand Down Expand Up @@ -342,18 +364,22 @@ class TableFunctionDemo extends React.Component {
}

const cols = [
<Table.Column cell={productRender} align={align} title={i18n.productDetail} key="product" dataIndex="product" filters={filters} />,
<Table.Column cell={priceRender} title={i18n.price} dataIndex="price" key="price" />,
<Table.Column cell={statusRender} title={i18n.status} dataIndex="status" key="status" />,
<Table.Column cell={operRender} title="" dataIndex="oper" key="oper" />
];
const smallCols = [].concat(
<Table.Column align={align} title={i18n.productDetail} key="product" dataIndex="product[0].title" filters={filters} />
, cols);

cols.unshift(<Table.Column cell={productRender} align={align} title={i18n.productDetail} key="product" dataIndex="product" filters={filters} />);
const groupCols = cols.slice();
groupCols.unshift(<Table.GroupHeader cell={groupHeaderRender} />);
groupCols.push(<Table.GroupFooter cell={groupFooterRender} />);

return (
<Demo title="Table" demoFunction={demoFunction} onFunctionChange={this.onFunctionChange}>
<Demo title="Table">
<Demo title="Table medium">
<DemoGroup label="Normal">
<Table rowSelection={rowSelection} dataSource={listDataSource} hasHeader={hasHeader} isZebra={isZebra}>{cols}</Table>
</DemoGroup>
Expand All @@ -366,7 +392,11 @@ class TableFunctionDemo extends React.Component {
<DemoGroup label="No Data">
<Table rowSelection={rowSelection} dataSource={[]} hasHeader={hasHeader} isZebra={isZebra}>{cols}</Table>
</DemoGroup>

</Demo>
<Demo title="Table small">
<DemoGroup label="Normal">
<Table size="small" rowSelection={rowSelection} dataSource={listDataSource} hasHeader={hasHeader} isZebra={isZebra}>{smallCols}</Table>
</DemoGroup>
</Demo>

</Demo>
Expand Down
7 changes: 7 additions & 0 deletions src/table/base.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@ export default class Table extends React.Component {
* 自定义内联样式
*/
style: PropTypes.object,
/**
* 尺寸 small为紧凑模式
*/
size: PropTypes.oneOf(['small', 'medium']),
/**
* 表格展示的数据源
*/
Expand Down Expand Up @@ -283,6 +287,7 @@ export default class Table extends React.Component {
onSort: noop,
onFilter: noop,
onResizeChange: noop,
size: 'medium',
rowProps: noop,
cellProps: noop,
prefix: 'next-',
Expand Down Expand Up @@ -621,6 +626,7 @@ export default class Table extends React.Component {
hasBorder,
isZebra,
loading,
size,
hasHeader,
prefix,
dataSource,
Expand Down Expand Up @@ -651,6 +657,7 @@ export default class Table extends React.Component {
} = this.props,
cls = classnames({
[`${prefix}table`]: true,
[`${prefix}table-${size}`]: size,
'only-bottom-border': !hasBorder,
'no-header': !hasHeader,
zebra: isZebra,
Expand Down
4 changes: 2 additions & 2 deletions src/table/expanded.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,18 +170,18 @@ export default function expanded(BaseComponent) {
}

normalizeChildren(children) {
const { prefix, size } = this.props;
const toArrayChildren = Children.map(children, (child, index) =>
React.cloneElement(child, {
key: index,
})
);
const { prefix } = this.props;
toArrayChildren.unshift(
<Col
title=""
key="expanded"
cell={this.renderExpandedCell.bind(this)}
width={50}
width={size === 'small' ? 34 : 50}
className={`${prefix}table-expanded`}
__normalized
/>
Expand Down
15 changes: 15 additions & 0 deletions src/table/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,21 @@
#{$table-prefix} {
@include box-sizing;
position: relative;

&#{$table-prefix}-small {
th {
#{$table-prefix}-cell-wrapper {
padding: $table-size-s-header-padding-top $table-size-s-header-padding-left;
}
}

td {
#{$table-prefix}-cell-wrapper {
padding: $table-size-s-cell-padding-top $table-size-s-cell-padding-left;
}
}
}

table {
border-collapse: collapse;
border-spacing: 0;
Expand Down
15 changes: 15 additions & 0 deletions src/table/scss/variable.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,21 @@ $table-header-padding-top: $s-3 !default;
/// padding (l, r)
/// @namespace size/header
$table-header-padding-left: $s-4 !default;

/// padding (t, b)
/// @namespace size/cell
$table-size-s-cell-padding-top: $s-2 !default;
/// padding (l, r)
/// @namespace size/cell
$table-size-s-cell-padding-left: $s-2 !default;
/// padding (t, b)
/// @namespace size/header
$table-size-s-header-padding-top: $s-2 !default;
/// padding (l, r)
/// @namespace size/header
$table-size-s-header-padding-left: $s-2 !default;


/// margin (t, b)
/// @namespace size/group list
$table-group-split: $s-2 !default;
Expand Down
4 changes: 2 additions & 2 deletions src/table/selection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export default function selection(BaseComponent) {
}

normalizeChildren(children) {
const { prefix, rowSelection } = this.props;
const { prefix, rowSelection, size } = this.props;
if (rowSelection) {
children = Children.map(children, (child, index) =>
React.cloneElement(child, {
Expand All @@ -117,7 +117,7 @@ export default function selection(BaseComponent) {
key="selection"
title={this.renderSelectionHeader.bind(this)}
cell={this.renderSelectionBody.bind(this)}
width={50}
width={size === 'small' ? 34 : 50}
className={`${prefix}table-selection`}
__normalized
{...attrs}
Expand Down
5 changes: 5 additions & 0 deletions types/table/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,11 @@ export interface TableProps extends React.HTMLAttributes<HTMLElement>, CommonPro
*/
prefix?: string;

/**
* 尺寸 small为紧凑模式
*/
size?: 'small' | 'medium';

/**
* 自定义类名
*/
Expand Down

0 comments on commit bce73f0

Please sign in to comment.