|
|
@@ -1,18 +1,79 @@
|
|
|
-import React, { forwardRef, useImperativeHandle, useState } from 'react';
|
|
|
+import React, {
|
|
|
+ forwardRef,
|
|
|
+ useImperativeHandle,
|
|
|
+ useRef,
|
|
|
+ useState
|
|
|
+} from 'react';
|
|
|
import { JsonSchemaDrawer } from './drawer';
|
|
|
|
|
|
+const FormNumberInput: React.FunctionComponent<{
|
|
|
+ id?: string;
|
|
|
+ value?: number;
|
|
|
+ onChange: (value: number) => void;
|
|
|
+}> = ({ id, value, onChange }) => {
|
|
|
+ const valStr = value !== undefined ? value.toString() : '';
|
|
|
+ const [draft, setDraft] = useState(valStr);
|
|
|
+ const [isEditing, setIsEditing] = useState(false);
|
|
|
+ const inputRef = useRef<HTMLInputElement>(null);
|
|
|
+
|
|
|
+ // getDerivedProps
|
|
|
+ if (!isEditing && valStr !== draft) {
|
|
|
+ setDraft(valStr);
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="form-input-number">
|
|
|
+ <button type="button" onClick={() => onChange((value || 0) - 1)} />
|
|
|
+ <input
|
|
|
+ className="form-input"
|
|
|
+ type="text"
|
|
|
+ autoComplete="off"
|
|
|
+ ref={inputRef}
|
|
|
+ id={id}
|
|
|
+ value={draft}
|
|
|
+ onFocus={() => {
|
|
|
+ inputRef.current?.select();
|
|
|
+ setIsEditing(true);
|
|
|
+ }}
|
|
|
+ onBlur={() => {
|
|
|
+ const newVal = parseInt(draft, 10);
|
|
|
+ if (!isNaN(newVal)) {
|
|
|
+ onChange(newVal);
|
|
|
+ }
|
|
|
+ setIsEditing(false);
|
|
|
+ }}
|
|
|
+ onChange={evt => setDraft(evt.target.value)}
|
|
|
+ />
|
|
|
+ <button type="button" onClick={() => onChange((value || 0) + 1)} />
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+interface IForm {
|
|
|
+ route: string;
|
|
|
+ block: string;
|
|
|
+ timeout: number;
|
|
|
+ retry: number;
|
|
|
+ startTime: string;
|
|
|
+ timeField: string;
|
|
|
+ shardField: string;
|
|
|
+ timeRule: string;
|
|
|
+ taskName: string;
|
|
|
+}
|
|
|
+
|
|
|
+// TODO:
|
|
|
const checkForm = (formData: any): any => {
|
|
|
return null;
|
|
|
};
|
|
|
|
|
|
const StepFourForm: React.ForwardRefRenderFunction<
|
|
|
{
|
|
|
- getData: () => any;
|
|
|
+ getData: () => Partial<IForm> | null;
|
|
|
},
|
|
|
{ wizardData: any[] }
|
|
|
> = ({ wizardData }, ref) => {
|
|
|
const [showSideBar, setShowSideBar] = useState(false);
|
|
|
- const [formData, setFormData] = useState<any>({});
|
|
|
+ const [formData, setFormData] = useState<Partial<IForm>>({});
|
|
|
const [, setFormError] = useState<any>({});
|
|
|
|
|
|
useImperativeHandle(ref, () => {
|
|
|
@@ -31,8 +92,10 @@ const StepFourForm: React.ForwardRefRenderFunction<
|
|
|
return (
|
|
|
<form>
|
|
|
<div className="form-group">
|
|
|
- <label className="form-label" htmlFor="step-2-datasource">
|
|
|
- <span className="field-required" />
|
|
|
+ <label
|
|
|
+ className="form-label field-required"
|
|
|
+ htmlFor="step-2-datasource"
|
|
|
+ >
|
|
|
路由策略
|
|
|
</label>
|
|
|
<select
|
|
|
@@ -48,8 +111,7 @@ const StepFourForm: React.ForwardRefRenderFunction<
|
|
|
</select>
|
|
|
</div>
|
|
|
<div className="form-group">
|
|
|
- <label className="form-label" htmlFor="step-4-block">
|
|
|
- <span className="field-required" />
|
|
|
+ <label className="form-label field-required" htmlFor="step-4-block">
|
|
|
阻塞处理方式
|
|
|
</label>
|
|
|
<select
|
|
|
@@ -65,44 +127,39 @@ const StepFourForm: React.ForwardRefRenderFunction<
|
|
|
</select>
|
|
|
</div>
|
|
|
<div className="form-group">
|
|
|
- <label className="form-label" htmlFor="step-4-timeout">
|
|
|
- <span className="field-required" />
|
|
|
+ <label className="form-label field-required" htmlFor="step-4-timeout">
|
|
|
超时时间
|
|
|
</label>
|
|
|
- <input
|
|
|
- className="form-input"
|
|
|
- type="number"
|
|
|
+ <FormNumberInput
|
|
|
id="step-4-timeout"
|
|
|
value={formData.timeout}
|
|
|
- onChange={evt =>
|
|
|
- setFormData({ ...formData, timeout: evt.target.value })
|
|
|
+ onChange={value =>
|
|
|
+ setFormData({ ...formData, timeout: Math.max(value, 0) })
|
|
|
}
|
|
|
/>
|
|
|
</div>
|
|
|
<div className="form-group">
|
|
|
- <label className="form-label" htmlFor="step-4-retry">
|
|
|
- <span className="field-required" />
|
|
|
+ <label className="form-label field-required" htmlFor="step-4-retry">
|
|
|
失败重试次数
|
|
|
</label>
|
|
|
- <input
|
|
|
- className="form-input"
|
|
|
- type="number"
|
|
|
+ <FormNumberInput
|
|
|
id="step-4-retry"
|
|
|
value={formData.retry}
|
|
|
- onChange={evt =>
|
|
|
- setFormData({ ...formData, retry: evt.target.value })
|
|
|
+ onChange={value =>
|
|
|
+ setFormData({ ...formData, retry: Math.max(value, 0) })
|
|
|
}
|
|
|
/>
|
|
|
</div>
|
|
|
<div className="form-group">
|
|
|
- <label className="form-label" htmlFor="step-4-starttime">
|
|
|
- <span className="field-required" />
|
|
|
+ <label className="form-label field-required" htmlFor="step-4-starttime">
|
|
|
增量开始时间
|
|
|
</label>
|
|
|
<input
|
|
|
className="form-input"
|
|
|
type="text"
|
|
|
id="step-4-starttime"
|
|
|
+ autoComplete="off"
|
|
|
+ placeholder="2022.8.6 17:22:14"
|
|
|
value={formData.startTime}
|
|
|
onChange={evt =>
|
|
|
setFormData({ ...formData, startTime: evt.target.value })
|
|
|
@@ -117,6 +174,8 @@ const StepFourForm: React.ForwardRefRenderFunction<
|
|
|
className="form-input"
|
|
|
type="text"
|
|
|
id="step-4-timefield"
|
|
|
+ autoComplete="off"
|
|
|
+ placeholder="-DlastTime='%s' -DcurrentTime='%s'"
|
|
|
value={formData.timeField}
|
|
|
onChange={evt =>
|
|
|
setFormData({ ...formData, timeField: evt.target.value })
|
|
|
@@ -131,6 +190,8 @@ const StepFourForm: React.ForwardRefRenderFunction<
|
|
|
className="form-input"
|
|
|
type="text"
|
|
|
id="step-4-shardfield"
|
|
|
+ autoComplete="off"
|
|
|
+ placeholder="手动输入分区字段"
|
|
|
value={formData.shardField}
|
|
|
onChange={evt =>
|
|
|
setFormData({ ...formData, shardField: evt.target.value })
|
|
|
@@ -138,14 +199,15 @@ const StepFourForm: React.ForwardRefRenderFunction<
|
|
|
/>
|
|
|
</div>
|
|
|
<div className="form-group">
|
|
|
- <label className="form-label" htmlFor="step-4-timerule">
|
|
|
- <span className="field-required" />
|
|
|
+ <label className="form-label field-required" htmlFor="step-4-timerule">
|
|
|
定时规则
|
|
|
</label>
|
|
|
<input
|
|
|
className="form-input"
|
|
|
type="text"
|
|
|
id="step-4-timerule"
|
|
|
+ autoComplete="off"
|
|
|
+ placeholder="0 0/2***?"
|
|
|
value={formData.timeRule}
|
|
|
onChange={evt =>
|
|
|
setFormData({ ...formData, timeRule: evt.target.value })
|
|
|
@@ -153,14 +215,15 @@ const StepFourForm: React.ForwardRefRenderFunction<
|
|
|
/>
|
|
|
</div>
|
|
|
<div className="form-group">
|
|
|
- <label className="form-label" htmlFor="step-4-taskname">
|
|
|
- <span className="field-required" />
|
|
|
+ <label className="form-label field-required" htmlFor="step-4-taskname">
|
|
|
同步任务名称
|
|
|
</label>
|
|
|
<input
|
|
|
className="form-input"
|
|
|
type="text"
|
|
|
id="step-4-taskname"
|
|
|
+ autoComplete="off"
|
|
|
+ placeholder="同步任务名称"
|
|
|
value={formData.taskName}
|
|
|
onChange={evt =>
|
|
|
setFormData({ ...formData, taskName: evt.target.value })
|
|
|
@@ -169,10 +232,11 @@ const StepFourForm: React.ForwardRefRenderFunction<
|
|
|
</div>
|
|
|
<button
|
|
|
type="button"
|
|
|
+ tabIndex={-1}
|
|
|
className="drawer-button"
|
|
|
onClick={() => setShowSideBar(true)}
|
|
|
>
|
|
|
- 构建
|
|
|
+ 构建预览
|
|
|
</button>
|
|
|
<JsonSchemaDrawer
|
|
|
jsonSchema={wizardData.slice(0, 3).concat(formData)}
|
herj
