github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-09-11 22:09:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Fixed the issue where the date selection component was not effective

Browse Source
This commit is contained in:
谨欣
2024-08-13 17:11:26 +08:00
parent dfb13f4d3f
commit 6290666a37
14 changed files with 101 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/components/flow/node-param-handler.tsx
View File

@@ -9,7 +9,7 @@ import {
RenderCheckbox,
RenderRadio,
RenderCascader,
RenderDataPicker,
RenderDatePicker,
RenderInput,
RenderSlider,
RenderTreeSelect,
@@ -28,7 +28,6 @@ interface NodeParamHandlerProps {
// render node parameters item
const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label, index }) => {
function onChange(value: any) {
console.log(value);
data.value = value;
}
@@ -116,7 +115,7 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
function renderNodeWithUiParam(data: IFlowNodeParameter) {
let defaultValue = data.value ?? data.default;
const props = { data, defaultValue, onChange };
switch (data?.ui?.ui_type) {
case 'select':
return <RenderSelect {...props} />;
@@ -134,8 +133,8 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
return <RenderTextArea {...props} />;
case 'slider':
return <RenderSlider {...props} />;
case 'data_picker':
return <RenderDataPicker {...props} />;
case 'date_picker':
return <RenderDatePicker {...props} />;
case 'time_picker':
return <RenderTimePicker {...props} />;
case 'tree_select':

18
web/components/flow/node-renderer/cascader.tsx
View File

@@ -13,13 +13,15 @@ export const RenderCascader = (params: Props) => {
const attr = convertKeysToCamelCase(data.ui?.attr || {});
return (
<Cascader
{...attr}
options={data.options}
defaultValue={defaultValue}
placeholder="Please select"
className="w-full nodrag"
onChange={onChange}
/>
<div className="p-2 text-sm">
<Cascader
{...attr}
options={data.options}
defaultValue={defaultValue}
placeholder="please select"
className="w-full nodrag"
onChange={onChange}
/>
</div>
);
};

10
web/components/flow/node-renderer/checkbox.tsx
View File

@@ -14,13 +14,9 @@ export const RenderCheckbox = (params: Props) => {
return (
data.options?.length > 0 && (
<Checkbox.Group
{...attr}
options={data.options}
disabled
defaultValue={defaultValue}
onChange={onChange}
/>
<div className="p-2 text-sm">
<Checkbox.Group {...attr} options={data.options} defaultValue={defaultValue} onChange={onChange} />
</div>
)
);
};

17
web/components/flow/node-renderer/data-picker.tsx
View File

@@ -1,17 +0,0 @@
import { IFlowNodeParameter } from '@/types/flow';
import { convertKeysToCamelCase } from '@/utils/flow';
import { DatePicker } from 'antd';
import dayjs from 'dayjs';
type Props = {
data: IFlowNodeParameter;
defaultValue: any;
onChange: (value: any) => void;
};
export const RenderDataPicker = (params: Props) => {
const { data, defaultValue, onChange } = params;
const attr = convertKeysToCamelCase(data.ui?.attr || {});
return <DatePicker {...attr} defaultValue={dayjs(defaultValue)} onChange={onChange} />;
};

25
web/components/flow/node-renderer/date-picker.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { IFlowNodeParameter } from '@/types/flow';
import { convertKeysToCamelCase } from '@/utils/flow';
import { DatePicker, DatePickerProps } from 'antd';
import dayjs from 'dayjs';
type Props = {
data: IFlowNodeParameter;
defaultValue: any;
onChange: (value: any) => void;
};
export const RenderDatePicker = (params: Props) => {
const { data, defaultValue, onChange } = params;
const attr = convertKeysToCamelCase(data.ui?.attr || {});
const onChangeDate: DatePickerProps['onChange'] = (date, dateString) => {
onChange(dateString);
};
return (
<div className="p-2 text-sm">
<DatePicker {...attr} className="w-full" defaultValue={dayjs(defaultValue)} onChange={onChangeDate} />
</div>
);
};

2
web/components/flow/node-renderer/index.ts
View File

@@ -1,6 +1,6 @@
export * from './select';
export * from './cascader';
export * from './data-picker';
export * from './date-picker';
export * from './input';
export * from './checkbox';
export * from './radio';

19
web/components/flow/node-renderer/input.tsx
View File

@@ -13,13 +13,16 @@ export const RenderInput = (params: Props) => {
const attr = convertKeysToCamelCase(data.ui?.attr || {});
return (
<Input
{...attr}
className="w-full"
defaultValue={defaultValue}
onChange={(e) => {
onChange(e.target.value);
}}
/>
<div className="p-2 text-sm">
<Input
{...attr}
className="w-full"
placeholder="please input"
defaultValue={defaultValue}
onChange={(e) => {
onChange(e.target.value);
}}
/>
</div>
);
};

18
web/components/flow/node-renderer/radio.tsx
View File

@@ -13,13 +13,15 @@ export const RenderRadio = (params: Props) => {
const attr = convertKeysToCamelCase(data.ui?.attr || {});
return (
<Radio.Group
{...attr}
options={data.options}
onChange={(e) => {
onChange(e.target.checked);
}}
defaultValue={defaultValue}
/>
<div className="p-2 text-sm">
<Radio.Group
{...attr}
options={data.options}
onChange={(e) => {
onChange(e.target.value);
}}
defaultValue={defaultValue}
/>
</div>
);
};

18
web/components/flow/node-renderer/select.tsx
View File

@@ -13,13 +13,15 @@ export const RenderSelect = (params: Props) => {
const attr = convertKeysToCamelCase(data.ui?.attr || {});
return (
<Select
{...attr}
className="w-full nodrag"
placeholder="Please select"
defaultValue={defaultValue}
options={data.options}
onChange={onChange}
/>
<div className="p-2 text-sm">
<Select
{...attr}
className="w-full nodrag"
placeholder="please select"
defaultValue={defaultValue}
options={data.options}
onChange={onChange}
/>
</div>
);
};

7
web/components/flow/node-renderer/slider-list.tsx
View File

@@ -19,14 +19,15 @@ export const RenderSlider = (params: TextAreaProps) => {
setInputValue(newValue as number);
onChange(newValue as number);
};
return (
<>
<div className="p-2 text-sm">
{data?.ui?.show_input ? (
<Row>
<Col span={12}>
<Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
</Col>
<Col span={4}>
<InputNumber {...attr} style={{ margin: '0 16px' }} value={inputValue} onChange={onChangeSlider} />
</Col>
@@ -34,6 +35,6 @@ export const RenderSlider = (params: TextAreaProps) => {
) : (
<Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
)}
</>
</div>
);
};

4
web/components/flow/node-renderer/slider.tsx
View File

@@ -21,7 +21,7 @@ export const RenderSlider = (params: TextAreaProps) => {
};
return (
<>
<div className="p-2 text-sm">
{data?.ui?.show_input ? (
<Row>
<Col span={12}>
@@ -34,6 +34,6 @@ export const RenderSlider = (params: TextAreaProps) => {
) : (
<Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
)}
</>
</div>
);
};

12
web/components/flow/node-renderer/textarea.tsx
View File

@@ -15,12 +15,8 @@ export const RenderTextArea = (params: TextAreaProps) => {
convertKeysToCamelCase(data?.ui?.attr?.autosize || {});
return (
<TextArea
{...data.ui.attr}
defaultValue={defaultValue}
onChange={(e) => onChange(e.target.value)}
{...data.ui.attr.autosize}
rows={4}
/>
)
<div className="p-2 text-sm">
<TextArea {...data.ui.attr} defaultValue={defaultValue} onChange={(e) => onChange(e.target.value)} {...data.ui.attr.autosize} rows={4} />
</div>
);
};

10
web/components/flow/node-renderer/time-picker.tsx
View File

@@ -11,15 +11,15 @@ type TextAreaProps = {
};
export const RenderTimePicker = (params: TextAreaProps) => {
const { data, defaultValue, onChange } = params;
const [value, setValue] = useState(defaultValue);
const attr = convertKeysToCamelCase(data.ui?.attr || {});
// dayjs.extend(customParseFormat);
const onChangeTime: TimePickerProps['onChange'] = (time, timeString) => {
onChange(timeString);
setValue(time);
};
return <TimePicker {...attr} style={{ width: '100%' }} value={value} onChange={onChangeTime} />;
return (
<div className="p-2 text-sm">
<TimePicker {...attr} className="w-full" defaultValue={defaultValue} onChange={onChangeTime} />
</div>
);
};

22
web/components/flow/node-renderer/tree-select.tsx
View File

@@ -79,16 +79,18 @@ export const RenderTreeSelect = (params: TextAreaProps) => {
};
return (
<TreeSelect
fieldNames={{ label: 'label', value: 'value', children: 'children' }}
{...data.ui.attr}
style={{ width: '100%' }}
value={defaultValue}
treeDefaultExpandAll
onChange={onChange}
treeData={data.options}
onDropdownVisibleChange={handleDropdownVisibleChange}
/>
<div className="p-2 text-sm">
<TreeSelect
fieldNames={{ label: 'label', value: 'value', children: 'children' }}
{...data.ui.attr}
style={{ width: '100%' }}
value={defaultValue}
treeDefaultExpandAll
onChange={onChange}
treeData={data.options}
onDropdownVisibleChange={handleDropdownVisibleChange}
/>
</div>
// TODO: Implement the TreeSelect component
// <TreeSelect