Skip to content

Commit

Permalink
Merge pull request #611 from Neovici/feat/tweak-expand
Browse files Browse the repository at this point in the history
Implement mini layout
  • Loading branch information
megheaiulian authored May 9, 2024
2 parents 2fb8a0e + 7564458 commit 56b3348
Show file tree
Hide file tree
Showing 16 changed files with 252 additions and 152 deletions.
13 changes: 11 additions & 2 deletions cosmoz-omnitable-column-mixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,15 @@ export const getString = ({ valuePath }, item) => get(item, valuePath),
renderCell: { type: Function },
renderEditCell: { type: Function },
renderGroup: { type: Function },

/**
* The priority of the column in the mini mode. If missing the column is disabled in the mini mode.
*/
mini: { type: Number, value: null },
/**
* An alternative render to use in mini mode. Takes the same params as `renderCell`.
*/
renderMini: { type: Function },
};
}

Expand All @@ -82,7 +91,7 @@ export const getString = ({ valuePath }, item) => get(item, valuePath),
state: this.legacyFilterToState(filter),
},
bubbles: true,
})
}),
);
}

Expand Down Expand Up @@ -135,7 +144,7 @@ export const getString = ({ valuePath }, item) => get(item, valuePath),
_propertiesChanged(currentProps, changedProps, oldProps) {
super._propertiesChanged(currentProps, changedProps, oldProps);
this.dispatchEvent(
new CustomEvent('cosmoz-column-prop-changed', { bubbles: true })
new CustomEvent('cosmoz-column-prop-changed', { bubbles: true }),
);
}
};
54 changes: 30 additions & 24 deletions cosmoz-omnitable-item-expand-line.js
Original file line number Diff line number Diff line change
@@ -1,33 +1,39 @@
import { component, html } from '@pionjs/pion';
import { css, sheet } from '@neovici/cosmoz-utils';

const OmnitableItemExpandLine = ({ column }) => html`
<style>
:host {
display: flex;
align-items: center;
flex-wrap: wrap;
}
const style = css`
:host {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.item-expand-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: initial;
align-self: start;
}
.label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: initial;
align-self: start;
}
.item-expand-value {
text-align: right;
flex-grow: 1 !important;
flex-basis: 100px !important;
white-space: nowrap;
}
.value {
text-align: right;
flex-grow: 1;
flex-basis: 100px;
white-space: nowrap;
}
`;

</style>
<div class="item-expand-label" title=${ column.title } part="item-expand-label">${ column.title }</div>
<div class="item-expand-value" part="item-expand-value">
const ItemExpandLine = ({ column }) => html`
<div class="label" title="${column.title}" part="item-expand-label">
${column.title}
</div>
<div class="value" part="item-expand-value">
<slot></slot>
</div>
`;

customElements.define('cosmoz-omnitable-item-expand-line', component(OmnitableItemExpandLine));
customElements.define(
'cosmoz-omnitable-item-expand-line',
component(ItemExpandLine, {styleSheets: [sheet(style)]}),
);
46 changes: 13 additions & 33 deletions cosmoz-omnitable-item-expand.js
Original file line number Diff line number Diff line change
@@ -1,48 +1,28 @@
/* eslint-disable object-curly-newline */
import { component, useEffect } from '@pionjs/pion';
import { html, nothing } from 'lit-html';
import { component } from '@pionjs/pion';
import { html } from 'lit-html';
import { map } from 'lit-html/directives/map.js';
import './cosmoz-omnitable-item-expand-line';

const renderExpandList = ({
const ItemExpand = ({ columns, item, selected, expanded, groupOnColumn }) => {
return map(
columns,
item,
selected,
expanded,
groupOnColumn,
}) =>
columns.map(
(column) => html`<cosmoz-omnitable-item-expand-line
(column) =>
html`<cosmoz-omnitable-item-expand-line
.column=${column}
?hidden=${column === groupOnColumn}
exportparts="item-expand-label,item-expand-value"
exportparts="item-expand-label, item-expand-value"
>${column.renderCell(column, {
item,
selected,
expanded,
})}</cosmoz-omnitable-item-expand-line
>`
),
ExpandList = (host) => {
const { columns } = host;

useEffect(() => {
if (columns?.length > 0) {
return;
}

host.setAttribute('hidden', '');
return () => host.removeAttribute('hidden');
}, [columns?.length]);

return Array.isArray(columns) && columns.length > 0 && host.expanded
? renderExpandList(host)
: nothing;
};
>`,
);
};

customElements.define(
'cosmoz-omnitable-item-expand',
component(ExpandList, {
component(ItemExpand, {
useShadowDOM: false,
observedAttributes: ['expanded'],
})
}),
);
45 changes: 31 additions & 14 deletions cosmoz-omnitable-item-row.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,37 @@
import { component, html } from '@pionjs/pion';
import { repeat } from 'lit-html/directives/repeat.js';

const
renderCell = (column, data, onItemChange) => column.editable
const renderCell = (column, data, onItemChange) =>
column.editable
? column.renderEditCell(column, data, onItemChange(column, data.item))
: column.renderCell(column, data),
ItemRow = ({ columns, groupOnColumn, item, index, selected, expanded, onItemChange }) => {
return repeat(columns, column => column.name, column => {
: column.renderCell(column, data);

const ItemRow = ({
columns,
groupOnColumn,
item,
index,
selected,
expanded,
onItemChange,
}) =>
repeat(
columns,
(column) => column.name,
(column) => {
return html`<div
class="cell itemRow-cell ${ column.cellClass ?? '' }"
?hidden=${ column === groupOnColumn }
?editable=${ column.editable }
title=${ column.cellTitleFn(column, item) }
name=${ column.name }
>${ renderCell(column, { item, index, selected, expanded }, onItemChange) }</div>`;
});
};
class="cell itemRow-cell ${column.cellClass ?? ''}"
?hidden="${column === groupOnColumn}"
?editable="${column.editable}"
title="${column.cellTitleFn(column, item)}"
name="${column.name}"
>
${renderCell(column, { item, index, selected, expanded }, onItemChange)}
</div>`;
},
);

customElements.define('cosmoz-omnitable-item-row', component(ItemRow, { useShadowDOM: false }));
customElements.define(
'cosmoz-omnitable-item-row',
component(ItemRow, { useShadowDOM: false }),
);
45 changes: 35 additions & 10 deletions cosmoz-omnitable-styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ export default css`
--cosmoz-input-padding: 0;
--cosmoz-input-label-text-transform: var(--cosmoz-omnitable-header-text-transform, none);
--cosmoz-input-label-font-weight: var(--cosmoz-omnitable-header-font-weight, normal);
--cosmoz-input-padding: 0;
}
cosmoz-omnitable-header-row {
Expand Down Expand Up @@ -317,11 +318,6 @@ export default css`
left: 0;
}
.item-row-wrapper {
display: block;
width: 100%;
}
.itemRow {
border-bottom-color: var(--cosmoz-omnitable-border-color, #e1e2e5);
border-bottom-width: 1px;
Expand All @@ -330,10 +326,12 @@ export default css`
solid
);
/* set a min-height for rows so that rows with empty values are visible */
min-height: var(--item-row-min-height, 24px);
padding-right: 8px;
}
.itemRow-wrapper {
display: flex;
align-items: center;
min-height: var(--item-row-min-height, 39px);
padding-right: 8px;
}
.itemRow[selected] {
Expand All @@ -357,9 +355,8 @@ export default css`
background-color: #fafafa;
}
cosmoz-omnitable-item-expand[hidden],
cosmoz-omnitable-item-expand:not([expanded]) {
display: none !important;
display: none;
}
.groupRow {
Expand Down Expand Up @@ -447,7 +444,7 @@ export default css`
.itemRow:hover {
box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0,
0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
background: var(--cosmoz-omnitable-hover-color);
/* background: var(--cosmoz-omnitable-hover-color); */
}
.groupRow:hover .checkbox:not(:checked):not(:hover),
.itemRow:hover .checkbox:not(:checked):not(:hover) {
Expand Down Expand Up @@ -530,4 +527,32 @@ export default css`
min-width: 0;
flex: auto;
}
:host([mini]) .itemRow .expand,
:host([mini]) cosmoz-omnitable-item-expand {
display: none;
}
.itemRow-minis {
display: flex;
justify-content: space-between;
margin: 0 8px 8px 8px;
}
:host([mini]) .itemRow {
border-radius: 8px;
border: 1px solid var(--cosmoz-omnitable-border-color, #e1e2e5);
margin: 4px 8px;
}
:host([mini]) .itemRow:not([selected]) {
background: var(--cosmoz-omnitable-mini-item-background, #fdfdfd);
}
:host([mini]) .itemRow:hover {
box-shadow: none;
}
:host([mini]) .header {
margin: 0 8px;
}
`;
3 changes: 2 additions & 1 deletion cosmoz-omnitable.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ customElements.define(
'no-local-sort',
'no-local-filter',
'loading',
'mini-breakpoint',
],
}) {
connectedCallback() {
Expand All @@ -71,7 +72,7 @@ customElements.define(
notifyProperty(this, 'visibleData', []);
notifyProperty(this, 'sortedFilteredGroupedItems', []);
}
}
},
);

const tmplt = `
Expand Down
6 changes: 4 additions & 2 deletions lib/settings/style.css.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ export default css`
}
.headline {
box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15),
box-shadow:
inset 0px -1px 0px rgba(0, 0, 0, 0.15),
inset 0px 1px 0px rgba(0, 0, 0, 0.15);
font-weight: 500;
font-size: 16px;
Expand Down Expand Up @@ -63,7 +64,8 @@ export default css`
transform: scaleY(-1);
}
cosmoz-collapse[opened] + .heading {
box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15),
box-shadow:
inset 0px -1px 0px rgba(0, 0, 0, 0.15),
inset 0px 1px 0px rgba(0, 0, 0, 0.15);
}
Expand Down
6 changes: 4 additions & 2 deletions lib/use-canvas-width.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { useState } from '@pionjs/pion';
import { useTrackSize } from './use-track-size';

export const useCanvasWidth = host => {
const [canvasWidth, setCanvasWidth] = useState(() => host.getBoundingClientRect().width);
export const useCanvasWidth = (host) => {
const [canvasWidth, setCanvasWidth] = useState(
() => host.getBoundingClientRect().width,
);

useTrackSize(host, setCanvasWidth);

Expand Down
3 changes: 3 additions & 0 deletions lib/use-dom-columns.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,9 @@ const columnSymbol = Symbol('column'),

noLocalFilter: column.noLocalFilter,

mini: column.mini,
renderMini: column.renderMini,

// @deprecated
loading: column.loading,
externalValues: column.externalValues,
Expand Down
5 changes: 4 additions & 1 deletion lib/use-fast-layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useCanvasWidth } from './use-canvas-width';
import { useTweenArray } from './use-tween-array';
import { useLayout } from './use-layout';
import { useStyleSheet } from '@neovici/cosmoz-utils/hooks/use-stylesheet';
import { useMini } from './use-mini';

export const useFastLayout = ({
host,
Expand All @@ -15,10 +16,12 @@ export const useFastLayout = ({
sortAndGroupOptions,
}) => {
const canvasWidth = useCanvasWidth(host),
{ miniColumn, miniColumns } = useMini({ host, canvasWidth, columns }),
{ groupOnColumn } = sortAndGroupOptions,
layout = useLayout({
canvasWidth,
groupOnColumn,
miniColumn,
config: settings.columns,
}),
tweenedlayout = useTweenArray(layout, resizeSpeedFactor),
Expand Down Expand Up @@ -49,5 +52,5 @@ export const useFastLayout = ({

useStyleSheet(layoutCss);

return { collapsedColumns };
return { collapsedColumns, miniColumns };
};
Loading

0 comments on commit 56b3348

Please sign in to comment.