schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: move MonitorStatusPageEditForm into components

Browse Source
This commit is contained in:
moonrailgun 2023-12-16 14:19:03 +08:00
parent 8e1e7ebe10
commit b324536726
2 changed files with 79 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/client/components/monitor/StatusPage/EditForm.tsx Normal file
View File

@ -0,0 +1,74 @@
import { Button, Form, Input, Typography } from 'antd';
import React from 'react';
import { slugRegex } from '../../../../shared';
import { z } from 'zod';
const { Text } = Typography;
interface Values {
title: string;
slug: string;
}
interface MonitorStatusPageEditFormProps {
isLoading?: boolean;
onFinish: (values: Values) => void;
}
export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps> =
React.memo((props) => {
return (
<div>
<Form<Values> layout="vertical" onFinish={props.onFinish}>
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Slug"
name="slug"
extra={
<div className="pt-2">
<div>
Accept characters: <Text code>a-z</Text> <Text code>0-9</Text>{' '}
<Text code>-</Text>
</div>
<div>
No consecutive dashes <Text code>--</Text>
</div>
</div>
}
rules={[
{
required: true,
},
{
validator(rule, value, callback) {
try {
z.string().regex(slugRegex).parse(value);
callback();
} catch (err) {
callback('Not valid slug');
}
},
},
]}
>
<Input addonBefore={`${window.origin}/status/`} />
</Form.Item>
<Button type="primary" htmlType="submit" loading={props.isLoading}>
Next
</Button>
</Form>
</div>
);
});
MonitorStatusPageEditForm.displayName = 'MonitorStatusPageEditForm';

63
src/client/pages/Monitor/PageAdd.tsx
View File

@ -2,12 +2,8 @@ import React from 'react';
import { useNavigate } from 'react-router';
import { useCurrentWorkspaceId } from '../../store/user';
import { trpc } from '../../api/trpc';
import { Button, Form, Input, Typography } from 'antd';
import { useEvent } from '../../hooks/useEvent';
import { z } from 'zod';
import { slugRegex } from '../../../shared';
const { Text, Paragraph } = Typography;
import { MonitorStatusPageEditForm } from '../../components/monitor/StatusPage/EditForm';
interface Values {
title: string;
@ -35,59 +31,10 @@ export const MonitorPageAdd: React.FC = React.memo(() => {
return (
<div className="px-8 py-4">
<Form<Values> layout="vertical" onFinish={handleFinish}>
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Slug"
name="slug"
extra={
<div className="pt-2">
<div>
Accept characters: <Text code>a-z</Text> <Text code>0-9</Text>{' '}
<Text code>-</Text>
</div>
<div>
No consecutive dashes <Text code>--</Text>
</div>
</div>
}
rules={[
{
required: true,
},
{
validator(rule, value, callback) {
try {
z.string().regex(slugRegex).parse(value);
callback();
} catch (err) {
callback('Not valid slug');
}
},
},
]}
>
<Input addonBefore={`${window.origin}/status/`} />
</Form.Item>
<Button
type="primary"
htmlType="submit"
loading={createPageMutation.isLoading}
>
Next
</Button>
</Form>
<MonitorStatusPageEditForm
isLoading={createPageMutation.isLoading}
onFinish={handleFinish}
/>
</div>
);
});