Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit cd7ba0c

Browse filesBrowse files
tebohoteboho
committed
updated the form designer provider to handle retaining the selected component in between preview and designer states
1 parent e691d3d commit cd7ba0c
Copy full SHA for cd7ba0c

File tree

Expand file treeCollapse file tree

6 files changed

+1329
-1295
lines changed
Filter options
Expand file treeCollapse file tree

6 files changed

+1329
-1295
lines changed

‎shesha-reactjs/src/components/formDesigner/index.tsx

Copy file name to clipboard
+30-30Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
import { FormProviderWrapper } from "./formDesignerWrapper";
2-
import { FormDesignerRenderer } from "./formDesignerRenderer";
3-
import React, { FC } from "react";
4-
import { FormIdentifier } from "@/interfaces";
5-
6-
interface IFormDesignerProps {
7-
formId: FormIdentifier;
8-
}
9-
10-
const FormDesigner: FC<IFormDesignerProps> = ({ formId }) => {
11-
return (
12-
<FormProviderWrapper formId={formId}>
13-
<FormDesignerRenderer />
14-
</FormProviderWrapper>
15-
);
16-
};
17-
18-
type InternalFormDesignerType = typeof FormDesigner;
19-
interface IInternalFormDesignerInterface extends InternalFormDesignerType {
20-
Visual: typeof FormDesignerRenderer;
21-
NonVisual: typeof FormProviderWrapper;
22-
}
23-
24-
const FormDesignerInterface = FormDesigner as IInternalFormDesignerInterface;
25-
FormDesignerInterface.Visual = FormDesignerRenderer;
26-
FormDesignerInterface.NonVisual = FormProviderWrapper;
27-
28-
export {
29-
FormDesignerInterface as FormDesigner,
30-
type IFormDesignerProps,
1+
import { FormProviderWrapper } from "./formDesignerWrapper";
2+
import { FormDesignerRenderer } from "./formDesignerRenderer";
3+
import React, { FC } from "react";
4+
import { FormIdentifier } from "@/interfaces";
5+
6+
interface IFormDesignerProps {
7+
formId: FormIdentifier;
8+
}
9+
10+
const FormDesigner: FC<IFormDesignerProps> = ({ formId }) => {
11+
return (
12+
<FormProviderWrapper formId={formId}>
13+
<FormDesignerRenderer />
14+
</FormProviderWrapper>
15+
);
16+
};
17+
18+
type InternalFormDesignerType = typeof FormDesigner;
19+
interface IInternalFormDesignerInterface extends InternalFormDesignerType {
20+
Visual: typeof FormDesignerRenderer;
21+
NonVisual: typeof FormProviderWrapper;
22+
}
23+
24+
const FormDesignerInterface = FormDesigner as IInternalFormDesignerInterface;
25+
FormDesignerInterface.Visual = FormDesignerRenderer;
26+
FormDesignerInterface.NonVisual = FormProviderWrapper;
27+
28+
export {
29+
FormDesignerInterface as FormDesigner,
30+
type IFormDesignerProps,
3131
};

‎shesha-reactjs/src/components/formDesigner/toolbar/previewButton.tsx

Copy file name to clipboard
+28-30Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,29 @@
1-
import React, { FC } from 'react';
2-
import { Button } from 'antd';
3-
import { EyeOutlined } from '@ant-design/icons';
4-
import { useFormActions } from '@/providers';
5-
import { useFormDesignerActions, useFormDesignerStateSelector } from '@/providers/formDesigner';
6-
7-
export interface IPreviewButtonProps {
8-
9-
}
10-
11-
export const PreviewButton: FC<IPreviewButtonProps> = () => {
12-
const { setFormMode } = useFormActions();
13-
const { setFormMode: setFormDesignerMode, setSelectedComponent } = useFormDesignerActions();
14-
const formMode = useFormDesignerStateSelector(x => x.formMode);
15-
16-
return (
17-
<Button
18-
onClick={() => {
19-
setFormMode(formMode === 'designer' ? 'edit' : 'designer');
20-
setFormDesignerMode(formMode === 'designer' ? 'edit' : 'designer');
21-
if (formMode === 'designer')
22-
setSelectedComponent(null);
23-
}}
24-
type={formMode === 'designer' ? 'default' : 'primary'}
25-
shape="circle"
26-
title="Preview"
27-
>
28-
<EyeOutlined />
29-
</Button>
30-
);
1+
import React, { FC } from 'react';
2+
import { Button } from 'antd';
3+
import { EyeOutlined } from '@ant-design/icons';
4+
import { useFormActions } from '@/providers';
5+
import { useFormDesignerActions, useFormDesignerStateSelector } from '@/providers/formDesigner';
6+
7+
export interface IPreviewButtonProps {
8+
9+
}
10+
11+
export const PreviewButton: FC<IPreviewButtonProps> = () => {
12+
const { setFormMode } = useFormActions();
13+
const { setFormMode: setFormDesignerMode } = useFormDesignerActions();
14+
const formMode = useFormDesignerStateSelector(x => x.formMode);
15+
16+
return (
17+
<Button
18+
onClick={() => {
19+
setFormMode(formMode === 'designer' ? 'edit' : 'designer');
20+
setFormDesignerMode(formMode === 'designer' ? 'edit' : 'designer');
21+
}}
22+
type={formMode === 'designer' ? 'default' : 'primary'}
23+
shape="circle"
24+
title="Preview"
25+
>
26+
<EyeOutlined />
27+
</Button>
28+
);
3129
};

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.