Skip to content

Commit 19107f3

Browse files
author
Administrator
committed
sampleshit
1 parent 91e24b0 commit 19107f3

File tree

4 files changed

+152
-120
lines changed

4 files changed

+152
-120
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"prepublishOnly": "npm run build"
1616
},
1717
"publishConfig": {
18-
"registry": "https://npm.pkg.github.com"
18+
"registry": "https://registry.npmjs.org"
1919
},
2020
"repository": {
2121
"type": "git",

‎src/CascadeForms/CascadeForms.stories.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,45 @@ const PayloadTest = (props:ControlRenderProps) => {
3737
);
3838
};
3939

40+
const MOCK_TYPES = [{
41+
value:"type1",
42+
label:"О направлении сотрудника в командировку"
43+
},
44+
{
45+
value:"type2",
46+
label:"О направлении в поездку обучающихся"
47+
}];
48+
49+
const useFakeQuery = (query) => {
50+
switch ( query ) {
51+
case "mock_types":
52+
return MOCK_TYPES;
53+
default:
54+
return new Array(10).map((v,idx) => ({ value:idx,label:`value_${idx}` }));
55+
}
56+
};
57+
58+
const QuerySelect = (props:ControlRenderProps) => {
59+
const { item,formState,onChange } = props;
60+
const { payload:{ query } } = item;
61+
const data = useFakeQuery(query);
62+
63+
return (
64+
<select value={formState[item.id]?.value || 1} onChange={(ev) => onChange(item.id,ev.target.value)}>
65+
{data.map(({ value,label })=>{
66+
return <option key={value} value={value}>{label}</option>;
67+
})}
68+
</select>
69+
);
70+
71+
};
72+
4073
const onRender = (formState:FormState,item:FormItem,onChange:OnChangeFn) => {
4174
switch ( item.type ) {
75+
case "phone-type":
76+
return <InputGroup intent={formState[item.id]?.state ? "danger" : "primary"} value={formState[item.id]?.value || ""} placeholder={item.title} onChange={(ev) => onChange(item.id,ev.target.value)} />;
77+
case "query-select":
78+
return <QuerySelect formState={formState} item={item} onChange={onChange} />;
4279
case "input":
4380
return <InputGroup intent={formState[item.id]?.state ? "danger" : "primary"} value={formState[item.id]?.value || ""} placeholder={item.title} onChange={(ev) => onChange(item.id,ev.target.value)} />;
4481
case "checkbox":

‎src/CascadeForms/form1.json

Lines changed: 103 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,120 @@
11
[
2+
{
3+
"type":"checkbox",
4+
"title":"Фейковый стейт, - сотрудник",
5+
"id":"is_employee"
6+
},
27
{
38
"type":"view",
4-
"title":"Sample view",
5-
"id":"sample1",
6-
"visible":{ "state":"htitle","expect":true },
9+
"title":"Первым обязательным шагом является заполнение поля актуального телефона",
10+
"id":"phone_header",
711
"items":[
812
{
9-
"className":"sampleForm",
10-
"id":"header1",
11-
"type":"text",
12-
"title":"Surpise !",
13-
"visible":{ "state":"agree","expect":true }
14-
},
15-
{
16-
"id":"custom",
17-
"type":"custom",
18-
"title":"Custom"
13+
"className":"phone-entry",
14+
"id":"phone",
15+
"type":"phone-type",
16+
"title":"Введите Ваш номер"
1917
}
2018
]
2119
},
20+
{
21+
"type":"query-select",
22+
"title":"Следующий шаг выбор типа",
23+
"id":"type-selector",
24+
"payload":{
25+
"query":"mock_types"
26+
}
27+
},
2228
{
2329
"type":"view",
24-
"className":"formView",
25-
"title":"Common Form",
26-
"id":"main",
27-
"items":[
28-
{
29-
"id":"name",
30-
"title":"Name",
31-
"type":"input",
32-
"validator":{ "type":"string","min":2,"max":5 }
33-
},
34-
{
35-
"id":"select",
36-
"title":"Payload test",
37-
"type":"select",
38-
"payload":[
39-
{"value":1,"label":"The One"},
40-
{"value":2,"label":"Two.."},
41-
{"value":3,"label":"Ten !"}
42-
]
43-
},
44-
{
45-
"id":"select1",
46-
"className":"select-1",
47-
"title":"Selected one",
48-
"visible":{ "state":"select","expect":"1" }
49-
},
50-
{
51-
"id":"select2",
52-
"className":"select-2",
53-
"title":"Selected Two",
54-
"visible":{ "state":"select","expect":"2" }
55-
},
56-
{
57-
"id":"select3",
58-
"className":"select-3",
59-
"title":"Selected TEN !",
60-
"visible":{ "state":"select","expect":"3" }
61-
},
62-
{
63-
"title":"More details",
64-
"type":"checkbox",
65-
"id":"details",
66-
"items":[
67-
{
68-
"title":"Only first name",
30+
"title":"Командировка сотрудника",
31+
"id":"type1-form",
32+
"visible":{"state":"type-selector","expect":"type1"},
33+
"items":[{
34+
"type":"view",
35+
"title":"О направлении сотрудника в командировку",
36+
"id":"worktravel",
37+
"items":[{
6938
"type":"input",
70-
"id":"first_name",
71-
"visible":{ "state":"details","expect":false },
72-
"items":[
73-
{
74-
"title":"More opts...",
75-
"type":"checkbox",
76-
"id":"opts",
77-
"items":[
78-
{
79-
"title":"More constols",
80-
"type":"radio",
81-
"id":"htitle",
82-
"visible":{ "state":"opts","expect":true }
83-
},
84-
{
85-
"title":"Show Agreement",
86-
"type":"radio",
87-
"id":"hagree",
88-
"visible":{ "state":"opts","expect":true }
89-
}
90-
]
91-
}
92-
]
93-
},
94-
{
95-
"type":"view",
96-
"id":"pform",
97-
"visible":{ "state":"details","expect":true },
98-
"className":"rowForm",
99-
"items":[
100-
{
101-
"title":"First name",
39+
"title":"ФИО",
40+
"id":"fio"
41+
},
42+
{
43+
"type":"view",
44+
"title":"Даты командировки",
45+
"id":"two-dates",
46+
"className":"row-divs",
47+
"items":[{
10248
"type":"input",
103-
"id":"first_name1"
49+
"id":"startDate"
10450
},
10551
{
106-
"title":"Last name",
10752
"type":"input",
108-
"id":"last_name1"
109-
}
110-
]
111-
}
112-
]
113-
},
53+
"id":"endDate"
54+
}]
55+
},
56+
{
57+
"type":"view",
58+
"className":"cb-rows-1",
59+
"items":[{
60+
"type":"checkbox",
61+
"id":"travel",
62+
"title":"проезд"
63+
},{
64+
"type":"checkbox",
65+
"id":"homes",
66+
"title":"проживание"
67+
},
68+
{
69+
"type":"checkbox",
70+
"title":"Это есле я сотрудиник",
71+
"id":"employee",
72+
"visible":{"state":"is_employee","expect":true}
73+
},
74+
{
75+
"type":"checkbox",
76+
"title":"И еше - препод ( то два чек бокса )",
77+
"id":"teacher",
78+
"visible":{"state":"employee","expect":true},
79+
"items":[{
80+
"type":"view",
81+
"title":"Some",
82+
"id":"some_view",
83+
"visible":{"state":"teacher","expect":true},
84+
"items":[{
85+
"id":"graph_shift_1",
86+
"title":"График переноса занятий прилагается",
87+
"type":"checkbox",
88+
"items":[{
89+
"id":"upload_ref",
90+
"visible":{"state":"graph_shift_1","expect":true},
91+
"title":"должна появиться возможность подкрепить файл",
92+
"type":"input"
93+
}]
94+
},
95+
{
96+
"type":"view",
97+
"items":[{
98+
"id":"graph_shift_2",
99+
"title":"занятия в данный период не осуществляются",
100+
"type":"checkbox"
101+
}]
102+
}]
103+
}]
104+
}]
105+
}]
106+
}]
107+
},
108+
{
109+
"type":"view",
110+
"title":"Поездка обучающихся",
111+
"id":"type2-form",
112+
"visible":{"state":"type-selector","expect":"type2"},
113+
"items":[
114114
{
115-
"title":"Agreenment",
116-
"type":"checkbox",
117-
"id":"agree",
118-
"visible":{ "state":"hagree","expect":true },
119-
"items":[
120-
{
121-
"title":"I'll accept all",
122-
"type":"text",
123-
"id":"accept",
124-
"visible":{ "state":"agree","expect":true }
125-
},
126-
{
127-
"title":"Will u sell ur liver ?",
128-
"type":"text",
129-
"id":"deny",
130-
"visible":{ "state":"agree","expect":false }
131-
}
132-
]
133-
}
134-
]
115+
"type":"view",
116+
"title":"Поездка обучающихся"
117+
}
118+
]
135119
}
136-
]
120+
]

‎src/CascadeForms/story.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,14 @@ body {
3535
font-size: 16px;
3636
background-color: yellow;
3737
}
38+
39+
.row-divs {
40+
display: flex;
41+
flex-direction: row;
42+
border: 1px solid red;
43+
}
44+
45+
.cb-rows-1 {
46+
display: flex;
47+
flex-direction: row;
48+
}

0 commit comments

Comments
 (0)