diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx index f6b3e1901..678bcabb0 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx @@ -14,6 +14,7 @@ import { ProgressComp } from "./columnTypeComps/columnProgressComp"; import { RatingComp } from "./columnTypeComps/columnRatingComp"; import { BadgeStatusComp } from "./columnTypeComps/columnStatusComp"; import { ColumnTagsComp } from "./columnTypeComps/columnTagsComp"; +import { ColumnSelectComp } from "./columnTypeComps/columnSelectComp"; import { SimpleTextComp } from "./columnTypeComps/simpleTextComp"; import { ColumnNumberComp } from "./columnTypeComps/ColumnNumberComp"; @@ -38,6 +39,10 @@ const actionOptions = [ label: trans("table.tag"), value: "tag", }, + { + label: trans("table.select"), + value: "select", + }, { label: trans("table.badgeStatus"), value: "badgeStatus", @@ -83,6 +88,7 @@ export const ColumnTypeCompMap = { badgeStatus: BadgeStatusComp, link: LinkComp, tag: ColumnTagsComp, + select: ColumnSelectComp, links: ColumnLinksComp, image: ImageComp, markdown: ColumnMarkdownComp, diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx new file mode 100644 index 000000000..d4305a928 --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx @@ -0,0 +1,84 @@ +import { useState } from "react"; + +import { SelectUIView } from "comps/comps/selectInputComp/selectCompConstants"; +import { SelectOptionControl } from "comps/controls/optionsControl"; +import { StringControl } from "comps/controls/codeControl"; + +import { trans } from "i18n"; +import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder"; +import { ColumnValueTooltip } from "../simpleColumnTypeComps"; + +const childrenMap = { + text: StringControl, + options: SelectOptionControl, +}; + +let options: any[] = [] +const getBaseValue: ColumnTypeViewFn = (props) => props.text; + +type SelectEditProps = { + initialValue: string; + onChange: (value: string) => void; + onChangeEnd: () => void; + options: any[]; +}; + +const SelectEdit = (props: SelectEditProps) => { + const [currentValue, setCurrentValue] = useState(props.initialValue); + + return ( + { + props.onChange(val); + setCurrentValue(val) + }} + onEvent={async (eventName)=>{ + if(eventName==="blur"){ + props.onChangeEnd() + } + return [] + }} + // @ts-ignore + style={{}} + /> + ); +}; + + +export const ColumnSelectComp = (function () { + return new ColumnTypeCompBuilder( + childrenMap, + (props, dispatch) => { + options = props.options; + const value = props.changeValue ?? getBaseValue(props, dispatch) + return props.options.find(x => x.value === value)?.label; + }, + (nodeValue) => nodeValue.text.value, + getBaseValue, + ) + .setEditViewFn((props) => { + return ( + + )}) + .setPropertyViewFn((children) => { + return ( + <> + {children.text.propertyView({ + label: trans("table.columnValue"), + tooltip: ColumnValueTooltip, + })} + {children.options.propertyView({ + title: trans("optionsControl.optionList"), + })} + + ); + }) + .build(); +})(); diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index bf261cb95..a75348a04 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -1245,6 +1245,7 @@ export const en = { "link": "Link", "links": "Links", "tag": "Tag", + "select": "Select", "date": "Date", "dateTime": "Date Time", "badgeStatus": "Status",