Movatterモバイル変換

[0]ホーム
URL:

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

 Sign up
Appearance settings

Commit09c6771

Browse files
committed
Add Settings Group Page stories
1 parent20670f1 commit09c6771

File tree

3 files changed

+122
-71
lines changed

3 files changed

+122
-71
lines changed

‎site/src/pages/GroupsPage/SettingsGroupPage.tsx

Lines changed: 11 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,10 @@
1-
importTextFieldfrom"@material-ui/core/TextField"
21
import{useMachine}from"@xstate/react"
3-
import{Group}from"api/typesGenerated"
4-
import{ChooseOne,Cond}from"components/Conditionals/ChooseOne"
5-
import{FormFooter}from"components/FormFooter/FormFooter"
6-
import{FullPageForm}from"components/FullPageForm/FullPageForm"
7-
import{FullScreenLoader}from"components/Loader/FullScreenLoader"
8-
import{Margins}from"components/Margins/Margins"
9-
import{useFormik}from"formik"
102
importReactfrom"react"
113
import{Helmet}from"react-helmet-async"
124
import{useNavigate,useParams}from"react-router-dom"
13-
import{getFormHelpers,nameValidator,onChangeTrimmed}from"util/formUtils"
145
import{pageTitle}from"util/page"
156
import{editGroupMachine}from"xServices/groups/editGroupXService"
16-
import*asYupfrom"yup"
17-
18-
typeFormData={
19-
name:string
20-
}
21-
22-
constvalidationSchema=Yup.object({
23-
name:nameValidator("Name"),
24-
})
25-
26-
constUpdateGroupForm:React.FC<{
27-
group:Group
28-
errors:unknown
29-
onSubmit:(data:FormData)=>void
30-
onCancel:()=>void
31-
isLoading:boolean
32-
}>=({ group, errors, onSubmit, onCancel, isLoading})=>{
33-
constform=useFormik<FormData>({
34-
initialValues:{
35-
name:group.name,
36-
},
37-
validationSchema,
38-
onSubmit,
39-
})
40-
constgetFieldHelpers=getFormHelpers<FormData>(form,errors)
41-
42-
return(
43-
<FullPageFormtitle="Group settings"onCancel={onCancel}>
44-
<formonSubmit={form.handleSubmit}>
45-
<TextField
46-
{...getFieldHelpers("name")}
47-
onChange={onChangeTrimmed(form)}
48-
autoComplete="name"
49-
autoFocus
50-
fullWidth
51-
label="Name"
52-
variant="outlined"
53-
/>
54-
<FormFooteronCancel={onCancel}isLoading={isLoading}/>
55-
</form>
56-
</FullPageForm>
57-
)
58-
}
7+
importSettingsGroupPageViewfrom"./SettingsGroupPageView"
598

609
exportconstSettingsGroupPage:React.FC=()=>{
6110
const{ groupId}=useParams()
@@ -85,25 +34,16 @@ export const SettingsGroupPage: React.FC = () => {
8534
<title>{pageTitle("Settings Group")}</title>
8635
</Helmet>
8736

88-
<ChooseOne>
89-
<Condcondition={editState.matches("loading")}>
90-
<FullScreenLoader/>
91-
</Cond>
92-
93-
<Cond>
94-
<Margins>
95-
<UpdateGroupForm
96-
group={groupasGroup}
97-
onCancel={navigateToGroup}
98-
errors={updateGroupFormErrors}
99-
isLoading={editState.matches("updating")}
100-
onSubmit={(data)=>{
101-
sendEditEvent({type:"UPDATE", data})
102-
}}
103-
/>
104-
</Margins>
105-
</Cond>
106-
</ChooseOne>
37+
<SettingsGroupPageView
38+
onCancel={navigateToGroup}
39+
onSubmit={(data)=>{
40+
sendEditEvent({type:"UPDATE", data})
41+
}}
42+
group={group}
43+
formErrors={updateGroupFormErrors}
44+
isLoading={editState.matches("loading")}
45+
isUpdating={editState.matches("updating")}
46+
/>
10747
</>
10848
)
10949
}
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import{Story}from"@storybook/react"
2+
import{MockGroup}from"testHelpers/entities"
3+
import{SettingsGroupPageView,SettingsGroupPageViewProps}from"./SettingsGroupPageView"
4+
5+
exportdefault{
6+
title:"pages/SettingsGroupPageView",
7+
component:SettingsGroupPageView,
8+
}
9+
10+
constTemplate:Story<SettingsGroupPageViewProps>=(args:SettingsGroupPageViewProps)=>(
11+
<SettingsGroupPageView{...args}/>
12+
)
13+
14+
exportconstExample=Template.bind({})
15+
Example.args={
16+
group:MockGroup,
17+
isLoading:false,
18+
}
Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
importTextFieldfrom"@material-ui/core/TextField"
2+
import{Group}from"api/typesGenerated"
3+
import{ChooseOne,Cond}from"components/Conditionals/ChooseOne"
4+
import{FormFooter}from"components/FormFooter/FormFooter"
5+
import{FullPageForm}from"components/FullPageForm/FullPageForm"
6+
import{FullScreenLoader}from"components/Loader/FullScreenLoader"
7+
import{Margins}from"components/Margins/Margins"
8+
import{useFormik}from"formik"
9+
importReactfrom"react"
10+
import{getFormHelpers,nameValidator,onChangeTrimmed}from"util/formUtils"
11+
import*asYupfrom"yup"
12+
13+
typeFormData={
14+
name:string
15+
}
16+
17+
constvalidationSchema=Yup.object({
18+
name:nameValidator("Name"),
19+
})
20+
21+
constUpdateGroupForm:React.FC<{
22+
group:Group
23+
errors:unknown
24+
onSubmit:(data:FormData)=>void
25+
onCancel:()=>void
26+
isLoading:boolean
27+
}>=({ group, errors, onSubmit, onCancel, isLoading})=>{
28+
constform=useFormik<FormData>({
29+
initialValues:{
30+
name:group.name,
31+
},
32+
validationSchema,
33+
onSubmit,
34+
})
35+
constgetFieldHelpers=getFormHelpers<FormData>(form,errors)
36+
37+
return(
38+
<FullPageFormtitle="Group settings"onCancel={onCancel}>
39+
<formonSubmit={form.handleSubmit}>
40+
<TextField
41+
{...getFieldHelpers("name")}
42+
onChange={onChangeTrimmed(form)}
43+
autoComplete="name"
44+
autoFocus
45+
fullWidth
46+
label="Name"
47+
variant="outlined"
48+
/>
49+
<FormFooteronCancel={onCancel}isLoading={isLoading}/>
50+
</form>
51+
</FullPageForm>
52+
)
53+
}
54+
55+
exporttypeSettingsGroupPageViewProps={
56+
onCancel:()=>void
57+
onSubmit:(data:FormData)=>void
58+
group:Group|undefined
59+
formErrors:unknown
60+
isLoading:boolean
61+
isUpdating:boolean
62+
}
63+
64+
exportconstSettingsGroupPageView:React.FC<SettingsGroupPageViewProps>=({
65+
onCancel,
66+
onSubmit,
67+
group,
68+
formErrors,
69+
isLoading,
70+
isUpdating,
71+
})=>{
72+
return(
73+
<ChooseOne>
74+
<Condcondition={isLoading}>
75+
<FullScreenLoader/>
76+
</Cond>
77+
78+
<Cond>
79+
<Margins>
80+
<UpdateGroupForm
81+
group={groupasGroup}
82+
onCancel={onCancel}
83+
errors={formErrors}
84+
isLoading={isUpdating}
85+
onSubmit={onSubmit}
86+
/>
87+
</Margins>
88+
</Cond>
89+
</ChooseOne>
90+
)
91+
}
92+
93+
exportdefaultSettingsGroupPageView

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp