Skip to content
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 our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat]: Add Time-Only Column Type to the Table Component #1553

Merged
merged 8 commits into from
Mar 11, 2025
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { CellProps } from "components/table/EditableCell";
import { DateTimeComp } from "comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp";
import { TimeComp } from "./columnTypeComps/columnTimeComp";
import { ButtonComp } from "comps/comps/tableComp/column/simpleColumnTypeComps";
import { withType } from "comps/generators";
import { trans } from "i18n";
@@ -67,6 +68,11 @@ const actionOptions = [
label: trans("table.image"),
value: "image",
},
{
label: trans("table.time"),
value: "time",
},

{
label: trans("table.date"),
value: "date",
@@ -116,6 +122,7 @@ export const ColumnTypeCompMap = {
rating: RatingComp,
progress: ProgressComp,
date: DateComp,
time: TimeComp,
};

type ColumnTypeMapType = typeof ColumnTypeCompMap;
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
import { default as TimePicker } from "antd/es/time-picker";
import {
ColumnTypeCompBuilder,
ColumnTypeViewFn,
} from "comps/comps/tableComp/column/columnTypeCompBuilder";
import { ColumnValueTooltip } from "comps/comps/tableComp/column/simpleColumnTypeComps";
import { StringControl } from "comps/controls/codeControl";
import { withDefault } from "comps/generators";
import { formatPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
import dayjs from "dayjs";
import { useEffect, useRef, useState } from "react";
import styled from "styled-components";
import { TIME_FORMAT } from "util/dateTimeUtils";
import { hasIcon } from "comps/utils";
import { IconControl } from "comps/controls/iconControl";


const TimePickerStyled = styled(TimePicker)<{ $open: boolean }>`
width: 100%;
height: 100%;
position: absolute;
top: 0;
padding: 0;
padding-left: 11px;
.ant-picker-input {
height: 100%;
}
input {
padding-right: 18px;
cursor: pointer;
}
&.ant-picker-focused .ant-picker-suffix svg g {
stroke: ${(props) => props.$open && "#315EFB"};
}
.ant-picker-suffix {
height: calc(100% - 1px);
position: absolute;
right: 0;
top: 0.5px;
display: flex;
align-items: center;
padding: 0 3px;
}
`;

const Wrapper = styled.div`
background: transparent !important;
`;

export function formatTime(time: string, format: string) {
const parsedTime = dayjs(time, TIME_FORMAT);
return parsedTime.isValid() ? parsedTime.format(format) : "";
}

const childrenMap = {
text: StringControl,
prefixIcon: IconControl,
suffixIcon: IconControl,
format: withDefault(StringControl, TIME_FORMAT),
inputFormat: withDefault(StringControl, TIME_FORMAT),
};

let inputFormat = TIME_FORMAT;

const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;

type TimeEditProps = {
value: string;
onChange: (value: string) => void;
onChangeEnd: () => void;
inputFormat: string;
};

export const TimeEdit = (props: TimeEditProps) => {
const pickerRef = useRef<any>();
const [panelOpen, setPanelOpen] = useState(true);
let value = dayjs(props.value, TIME_FORMAT);
if (!value.isValid()) {
value = dayjs("00:00:00", TIME_FORMAT);
}

const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(value);

useEffect(() => {
const value = props.value ? dayjs(props.value, TIME_FORMAT) : null;
setTempValue(value);
}, [props.value]);

return (
<Wrapper
onKeyDown={(e) => {
if (e.key === "Enter" && !panelOpen) {
props.onChangeEnd();
}
}}
onMouseDown={(e) => {
e.stopPropagation();
e.preventDefault();
}}
>
<TimePickerStyled
ref={pickerRef}
$open={panelOpen}
format={props.inputFormat}
allowClear={true}
autoFocus
value={tempValue}
defaultOpen={true}
onOpenChange={(open) => setPanelOpen(open)}
onChange={(value, timeString) => {
props.onChange(timeString as string);
}}
onBlur={() => props.onChangeEnd()}
/>
</Wrapper>
);
};

export const TimeComp = (function () {
return new ColumnTypeCompBuilder(
childrenMap,
(props, dispatch) => {
inputFormat = props.inputFormat;
const value = props.changeValue ?? getBaseValue(props, dispatch);
return(
<>
{hasIcon(props.prefixIcon) && (
<span>{props.prefixIcon}</span>
)}
<span>{value}</span>
{hasIcon(props.suffixIcon) && (
<span>{props.suffixIcon}</span>
)}
</>
);

},
(nodeValue) => formatTime(nodeValue.text.value, nodeValue.format.value),
getBaseValue
)
.setEditViewFn((props) => (
<TimeEdit
value={props.value}
onChange={props.onChange}
onChangeEnd={props.onChangeEnd}
inputFormat={inputFormat}
/>
))
.setPropertyViewFn((children) => (
<>
{children.text.propertyView({
label: trans("table.columnValue"),
tooltip: ColumnValueTooltip,
})}
{children.prefixIcon.propertyView({
label: trans("button.prefixIcon"),
})}
{children.suffixIcon.propertyView({
label: trans("button.suffixIcon"),
})}
{formatPropertyView({ children, placeholder: TIME_FORMAT })}
</>
))
.build();
})();
1 change: 1 addition & 0 deletions client/packages/lowcoder/src/i18n/locales/en.ts
Original file line number Diff line number Diff line change
@@ -2029,6 +2029,7 @@ export const en = {
"tag": "Tag",
"select": "Select",
"dropdown": "Dropdown",
"time" : "Time",
"date": "Date",
"dateTime": "Date Time",
"badgeStatus": "Status",
Original file line number Diff line number Diff line change
@@ -30,7 +30,7 @@
<dependency>
<groupId>net.snowflake</groupId>
<artifactId>snowflake-jdbc</artifactId>
<version>3.13.33</version>
<version>3.22.0</version>
</dependency>
<dependency>
<groupId>org.lowcoder</groupId>
Loading