Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Table enhancements and events#628

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
FalkWolsky merged 5 commits intolowcoder-org:devfromraheeliftikhar5:table-updates
Jan 13, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -35,6 +35,7 @@ export interface CellProps {
candidateTags?: string[];
candidateStatus?: { text: string; status: StatusType }[];
textOverflow?: boolean;
onTableEvent?: (eventName: any) => void;
}

export type CellViewReturn = (props: CellProps) => ReactNode;
Expand DownExpand Up@@ -71,6 +72,7 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
baseValue,
candidateTags,
candidateStatus,
onTableEvent,
} = props;
const status = _.isNil(changeValue) ? "normal" : "toSave";
const editable = editViewFn ? props.editable : false;
Expand All@@ -96,6 +98,9 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
false
)
);
if(!_.isEqual(tmpValue, value)) {
onTableEvent?.('columnEdited');
}
}, [dispatch, baseValue, tmpValue]);
const editView = useMemo(
() => editViewFn?.({ value, onChange, onChangeEnd }) ?? <></>,
Expand Down
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,40 @@
import { default asInput } from "antd/es/input";
import { NumberControl, StringControl } from "comps/controls/codeControl";
import { default asInputNumber } from "antd/es/input-number";
import { NumberControl,RangeControl,StringControl } from "comps/controls/codeControl";
import { BoolControl } from "comps/controls/boolControl";
import { trans } from "i18n";
import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
import { ColumnValueTooltip } from "../simpleColumnTypeComps";
import { withDefault } from "comps/generators";
import styled from "styled-components";

const InputNumberWrapper = styled.div`
.ant-input-number {
width: 100%;
border-radius: 0;
background: transparent !important;
padding: 0 !important;
box-shadow: none;

input {
padding: 0;
border-radius: 0;
}
}
`;

const childrenMap = {
text: NumberControl,
step: withDefault(NumberControl, 1),
precision: RangeControl.closed(0, 20, 0),
float: BoolControl,
prefix: StringControl,
suffix: StringControl,
};

let float = false;
let step = 1;
let precision = 0;

const getBaseValue: ColumnTypeViewFn<typeof childrenMap, number, number> = (
props
) => {
Expand All@@ -24,26 +46,35 @@ export const ColumnNumberComp = (function () {
childrenMap,
(props, dispatch) => {
float = props.float;
const value = !float ? Math.floor(props.changeValue ?? getBaseValue(props, dispatch)) : props.changeValue ?? getBaseValue(props, dispatch);
return props.prefix + value + props.suffix;
step = props.step;
precision = props.precision;
const value = props.changeValue ?? getBaseValue(props, dispatch);
let formattedValue: string | number = !float ? Math.floor(value) : value;
if(float) {
formattedValue = formattedValue.toPrecision(precision + 1);
}
return props.prefix + formattedValue + props.suffix;
},
(nodeValue) => nodeValue.text.value,
getBaseValue,
)
.setEditViewFn((props) => {
return (
<Input
type="number"
step={float?"0.01": "1"}
defaultValue={props.value}
autoFocus
bordered={false}
onChange={(e) => {
props.onChange(!float ? Math.floor(e.target.valueAsNumber) : e.target.valueAsNumber);
}}
onBlur={props.onChangeEnd}
onPressEnter={props.onChangeEnd}
/>
<InputNumberWrapper>
<InputNumber
step={step}
defaultValue={props.value}
autoFocus
bordered={false}
onChange={(value) => {
value = value ?? 0;
props.onChange(!float ? Math.floor(value) : value);
}}
precision={float ? precision : 0}
onBlur={props.onChangeEnd}
onPressEnter={props.onChangeEnd}
/>
</InputNumberWrapper>
)})
.setPropertyViewFn((children) => {
return (
Expand All@@ -52,17 +83,36 @@ export const ColumnNumberComp = (function () {
label: trans("table.columnValue"),
tooltip: ColumnValueTooltip,
})}
{children.step.propertyView({
label: trans("table.numberStep"),
tooltip: trans("table.numberStepTooltip"),
onFocus: (focused) => {
if(!focused) {
const value = children.step.getView();
const isFloat = children.float.getView();
const newValue = !isFloat ? Math.floor(value) : value;
children.step.dispatchChangeValueAction(String(newValue));
}
}
})}
{float && (
children.precision.propertyView({
label: trans("table.precision"),
})
)}
{children.prefix.propertyView({
label: trans("table.prefix"),
// tooltip: ColumnValueTooltip,
})}
{children.suffix.propertyView({
label: trans("table.suffix"),
// tooltip: ColumnValueTooltip,
})}
{children.float.propertyView({
label: trans("table.float"),
// tooltip: ColumnValueTooltip,
onChange: (isFloat) => {
const value = children.step.getView();
const newValue = !isFloat ? Math.floor(value) : value;
children.step.dispatchChangeValueAction(String(newValue));
}
})}
</>
);
Expand Down
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
import { EllipsisOutlined } from "@ant-design/icons";
import { default as Dropdown} from "antd/es/dropdown";
import { default as Menu } from "antd/es/menu";
import { ColumnTypeCompBuilder } from "comps/comps/tableComp/column/columnTypeCompBuilder";
import { ActionSelectorControlInContext } from "comps/controls/actionSelector/actionSelectorControl";
Expand All@@ -12,18 +10,6 @@ import styled from "styled-components";
import { ColumnLink } from "comps/comps/tableComp/column/columnTypeComps/columnLinkComp";
import { LightActiveTextColor, PrimaryColor } from "constants/style";

const LinksWrapper = styled.div`
white-space: nowrap;

> a {
margin-right: 8px;
}

> a:last-child {
margin-right: 0;
}
`;

const MenuLinkWrapper = styled.div`
> a {
color: ${PrimaryColor} !important;
Expand All@@ -34,6 +20,22 @@ const MenuLinkWrapper = styled.div`
}
`;

const MenuWrapper = styled.div`
ul {
background: transparent !important;
border-bottom: 0;

li {
padding: 0 10px 0 0 !important;
line-height: normal !important;

&::after {
content: none !important;
}
}
}
`;

const OptionItem = new MultiCompBuilder(
{
label: StringControl,
Expand DownExpand Up@@ -69,48 +71,28 @@ export const ColumnLinksComp = (function () {
return new ColumnTypeCompBuilder(
childrenMap,
(props) => {
const menu = props.options.length > 3 && (
<Menu>
{props.options
.filter((o) => !o.hidden)
.slice(3)
.map((option, index) => (
<Menu.Item key={index}>
<MenuLinkWrapper>
<ColumnLink
disabled={option.disabled}
label={option.label}
onClick={option.onClick}
/>
</MenuLinkWrapper>
</Menu.Item>
))}
</Menu>
);
const menuItems = props.options
.filter((o) => !o.hidden)
.map((option, index) => (
{
key: index,
label: (
<MenuLinkWrapper>
<ColumnLink
disabled={option.disabled}
label={option.label}
onClick={option.onClick}
/>
</MenuLinkWrapper>
)
}
));

return (
<LinksWrapper>
{props.options
.filter((o) => !o.hidden)
.slice(0, 3)
.map((option, i) => (
<ColumnLink
key={i}
disabled={option.disabled}
label={option.label}
onClick={option.onClick}
/>
))}
{menu && (
<Dropdown
trigger={["hover"]}
dropdownRender={() => menu}
>
<EllipsisOutlined onClick={(e) => e.preventDefault()} />
</Dropdown>
)}
</LinksWrapper>
);
<MenuWrapper>
<Menu mode="horizontal" items={menuItems} />
</MenuWrapper>
)
},
() => ""
)
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -323,7 +323,6 @@ export function newPrimaryColumn(
title?: string,
isTag?: boolean
): ConstructorToDataType<typeof ColumnComp> {
console.log('newPrimaryColumn', title);
return {
title: title ?? key,
dataIndex: key,
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -176,7 +176,6 @@ export class TableImplComp extends TableInitComp implements IContainer {

override reduce(action: CompAction): this {
let comp = super.reduce(action);

let dataChanged = false;
if (action.type === CompActionTypes.UPDATE_NODES_V2) {
const nextRowExample = tableDataRowExample(comp.children.data.getView());
Expand DownExpand Up@@ -316,10 +315,18 @@ export class TableImplComp extends TableInitComp implements IContainer {
filter: this.children.toolbar.children.filter.node(),
showFilter: this.children.toolbar.children.showFilter.node(),
};
let context = this;
const filteredDataNode = withFunction(fromRecord(nodes), (input) => {
const { data, searchValue, filter, showFilter } = input;
const filteredData = filterData(data, searchValue.value, filter, showFilter.value);
// console.info("filterNode. data: ", data, " filter: ", filter, " filteredData: ", filteredData);
// if data is changed on search then trigger event
if(Boolean(searchValue.value) && data.length !== filteredData.length) {
const onEvent = context.children.onEvent.getView();
setTimeout(() => {
onEvent("dataSearch");
});
}
return filteredData.map((row) => tranToTableRecord(row, row[OB_ROW_ORI_INDEX]));
});
return lastValueIfEqual(this, "filteredDataNode", [filteredDataNode, nodes] as const, (a, b) =>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -680,6 +680,7 @@ export function TableCompView(props: {
dynamicColumn,
dynamicColumnConfig,
columnsAggrData,
onEvent,
),
[
columnViews,
Expand DownExpand Up@@ -745,7 +746,10 @@ export function TableCompView(props: {
setLoading
)
}
onDownload={() => onDownload(`${compName}-data`)}
onDownload={() => {
handleChangeEvent("download");
onDownload(`${compName}-data`)
}}
hasChange={hasChange}
onSaveChanges={() => handleChangeEvent("saveChanges")}
onCancelChanges={() => handleChangeEvent("cancelChanges")}
Expand DownExpand Up@@ -778,7 +782,11 @@ export function TableCompView(props: {
: "OB_CHILDREN_KEY_PLACEHOLDER",
fixed: "left",
onExpand: (expanded) => {
if(expanded) handleChangeEvent('rowExpand')
if(expanded) {
handleChangeEvent('rowExpand')
} else {
handleChangeEvent('rowShrink')
}
}
}}
rowColorFn={compChildren.rowColor.getView() as any}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -36,14 +36,16 @@ const expectColumn = (
// with dynamic config
const dynamicColumnConfig = comp.children.dynamicColumnConfig.getView();
if (dynamicColumnConfig?.length > 0) {
const onEvent = (eventName: any) => {};
const antdColumns = columnsToAntdFormat(
columnViews,
comp.children.sort.getView(),
comp.children.toolbar.getView().columnSetting,
comp.children.size.getView(),
comp.children.dynamicColumn.getView(),
dynamicColumnConfig,
comp.columnAggrData
comp.columnAggrData,
onEvent,
);
expect(columnViews.length).toBeGreaterThanOrEqual(antdColumns.length);
antdColumns.forEach((column) => {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -78,6 +78,26 @@ export const TableEventOptions = [
value: "rowExpand",
description: trans("table.rowExpand"),
},
{
label: trans("table.rowShrink"),
value: "rowShrink",
description: trans("table.rowShrink"),
},
{
label: trans("table.columnEdited"),
value: "columnEdited",
description: trans("table.columnEdited"),
},
{
label: trans("table.search"),
value: "dataSearch",
description: trans("table.search"),
},
{
label: trans("table.download"),
value: "download",
description: trans("table.download"),
},
{
label: trans("table.filterChange"),
value: "filterChange",
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp