@omniumretail/component-library 1.1.58 → 1.1.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle.js +1 -1
- package/dist/bundle.js.LICENSE.txt +10 -0
- package/dist/main.css +2 -1
- package/dist/types/components/Questions/SingleQuestion/index.d.ts +1 -1
- package/dist/types/components/Questions/index.d.ts +1 -0
- package/dist/types/components/ResponseType/Category.stories.d.ts +4 -0
- package/dist/types/components/ResponseType/index.d.ts +7 -0
- package/dist/types/components/index.d.ts +1 -0
- package/package.json +2 -2
- package/src/components/DatePickerTag/index.tsx +1 -1
- package/src/components/Questions/SingleQuestion/index.tsx +92 -26
- package/src/components/Questions/SingleQuestion/styles.module.scss +11 -3
- package/src/components/Questions/index.tsx +43 -26
- package/src/components/ResponseType/Category.stories.tsx +29 -0
- package/src/components/ResponseType/index.tsx +99 -0
- package/src/components/ResponseType/styles.module.scss +31 -0
- package/src/components/Tag/index.tsx +17 -7
- package/src/components/index.tsx +1 -0
- package/src/locales/en.json +8 -1
- package/src/locales/es.json +8 -1
- package/src/locales/pt.json +8 -1
|
@@ -37,6 +37,16 @@ PERFORMANCE OF THIS SOFTWARE.
|
|
|
37
37
|
!*** external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"} ***!
|
|
38
38
|
\**************************************************************************************/
|
|
39
39
|
|
|
40
|
+
/**
|
|
41
|
+
* @license React
|
|
42
|
+
* react-is.production.min.js
|
|
43
|
+
*
|
|
44
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
45
|
+
*
|
|
46
|
+
* This source code is licensed under the MIT license found in the
|
|
47
|
+
* LICENSE file in the root directory of this source tree.
|
|
48
|
+
*/
|
|
49
|
+
|
|
40
50
|
/**
|
|
41
51
|
* @license React
|
|
42
52
|
* react-jsx-runtime.production.min.js
|
package/dist/main.css
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
.gER2xKwlnobsIz4BLhGJ{background-color:var(--color-grey) !important}.gER2xKwlnobsIz4BLhGJ[aria-checked=true]{background:var(--color-orange) !important}
|
|
19
19
|
.lOKzfPUFf3ukLT2wGZaY{display:grid;grid-template-columns:300px auto;gap:16px}.OIrZOBn2f036M5MGzc61,.adDQP_uvIYgNFVC4VdHj{background:#fff;padding:20px;overflow:auto}
|
|
20
20
|
.yBjbWkudwA_AOwhHrnlc .ant-tree-title{font-weight:var(--font-weight-semibold)}.yBjbWkudwA_AOwhHrnlc button{margin-top:32px;width:100%}.yBjbWkudwA_AOwhHrnlc button:nth-child(3){margin-top:12px}.je000VEfsPqZupGr8ymu{font-size:var(--font-size-body-4);font-weight:600;line-height:100%;color:var(--color-blue);text-transform:uppercase}.tUDGWNXopUejF6zWJloy{margin-top:20px}
|
|
21
|
-
.O0Juh2loT1HHb612gOA4 .ant-form-item{margin-bottom:0}.O0Juh2loT1HHb612gOA4 .ant-space{display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--color-blue);padding:16px 10px}.O0Juh2loT1HHb612gOA4 .ant-space-item{width:100%}.hg7oiINfKCZSUt6dEq4A{display:none}.BAso_dbeoowN7VtxWiKx{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-black);font-size:var(--font-size-body-4);line-height:100%;font-weight:var(--font-weight-medium);align-items:center}.qg_bZXG9dQdJvLBRGuqw{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-grey-dark);font-size:var(--font-size-body-3);align-items:center}.GbZVOtcaUURjn4CweVjF{display:flex;gap:40px;font-size:var(--font-size-body-3);align-items:center}.C3Qrjv76hDipL39fyfzf{display:flex;align-items:center;gap:8px}.
|
|
21
|
+
.O0Juh2loT1HHb612gOA4 .ant-form-item{margin-bottom:0}.O0Juh2loT1HHb612gOA4 .ant-space{display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--color-blue);padding:16px 10px}.O0Juh2loT1HHb612gOA4 .ant-space-item{width:100%}.hg7oiINfKCZSUt6dEq4A{display:none}.BAso_dbeoowN7VtxWiKx{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-black);font-size:var(--font-size-body-4);line-height:100%;font-weight:var(--font-weight-medium);align-items:center}.BAso_dbeoowN7VtxWiKx.W120L8cnn6ydwOqHngty{max-width:650px}.qg_bZXG9dQdJvLBRGuqw{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-grey-dark);font-size:var(--font-size-body-3);align-items:center}.GbZVOtcaUURjn4CweVjF{display:flex;gap:40px;font-size:var(--font-size-body-3);align-items:center}@media(max-width: 768px){.GbZVOtcaUURjn4CweVjF{gap:12px}}.C3Qrjv76hDipL39fyfzf{display:flex;align-items:center;gap:8px}@media(max-width: 768px){.C3Qrjv76hDipL39fyfzf{width:100%}}.kknDal3CIbUXI7Lu2wPV{display:flex;align-items:center;justify-content:flex-start;gap:20px}.CIMvcFtQWcBY31wttg2C{min-width:250px}@media(max-width: 768px){.CIMvcFtQWcBY31wttg2C{min-width:150px}}.upuPapYjj1uGowukEEIi{display:none;align-items:center;justify-content:center}.KfrJPVKxY4b6bmXeJL5U{display:flex;align-items:center;justify-content:center;gap:16px}.zRPlv7rfSSACHPLZLs16,.EHyxN8DmDHOLkQDROSV5,.NLIlnBPfo09cpWYzpZ_J{font-size:var(--font-size-body-5);cursor:pointer}.AHIc83P7PkYUr3no83sO{margin-top:24px}
|
|
22
22
|
.vw302ajYc4_7bIROncyM{font-size:var(--font-size-body-4);font-weight:600;line-height:100%;color:var(--color-blue);text-transform:uppercase;margin-bottom:32px}.k3OGGGQwXB0zmX0T61yt{display:flex;gap:32px}.JHuRhb2cRXyGWESiQ2TQ{width:100%}.DrsaZTs1Ny6wZ76RwDR9{font-size:var(--font-size-body-2);color:var(--color-black);font-weight:700;text-transform:uppercase}.HVSssNqaNxLcYT_1lxBL{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.ACPbYsV0wNkissVLHcFh{margin-top:16px}Label{margin-bottom:8px}.mIHYAri6ebHm4Oeb1ogj{min-width:200px}@media(max-width: 768px){.mIHYAri6ebHm4Oeb1ogj{min-width:150px}}.g19LZsD26yzPPjBtV31w .ant-select{width:100%}.g19LZsD26yzPPjBtV31w .ant-select-selector{border-color:rgba(var(--color-black-rgb), 0.5) !important;height:50px !important;display:flex;align-items:center}.g19LZsD26yzPPjBtV31w .ant-select-arrow{color:var(--color-black)}.g19LZsD26yzPPjBtV31w .ant-switch{width:30px}
|
|
23
23
|
.j8_c3JHTX0JOkT36fF6A{contain:inline-size}.j8_c3JHTX0JOkT36fF6A .HgmGSts5FIH3osmekIYG{height:50px;width:300px}@media(min-width: 1024px){.j8_c3JHTX0JOkT36fF6A .HgmGSts5FIH3osmekIYG{width:450px}}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .ant-tag{background-color:var(--color-orange);color:var(--color-white);padding:6px 16px;max-width:240px}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .anticon-close{color:var(--color-white);font-size:12px}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .anticon-close:hover{color:var(--color-black)}
|
|
24
24
|
.BWmwZ5nFKyctBZyOAXzg{width:100%}.GWTSauaAl_v9W8o4YPxW{background:rgba(44,45,46,.0509803922);height:100%;position:relative}.GWTSauaAl_v9W8o4YPxW .ant-menu-light{background-color:rgba(0,0,0,0) !important;border-inline-end:none !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-title-content{font-size:17px;line-height:20px;font-weight:var(--font-weight-semibold)}.GWTSauaAl_v9W8o4YPxW .ant-menu-title-content:hover{color:var(--color-orange)}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-title-content{font-size:15px;line-height:18px;font-weight:var(--font-weight-medium)}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-item{height:30px;line-height:30px;margin-bottom:16px}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-item:first-child{margin-top:-10px}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu{border-top:1px solid var(--color-orange);border-radius:0}.GWTSauaAl_v9W8o4YPxW .ant-menu-item:hover{background-color:initial !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-item-selected,.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-selected>.ant-menu-submenu-title{color:var(--color-orange);background-color:initial}.GWTSauaAl_v9W8o4YPxW .ant-menu-inline .ant-menu-sub.ant-menu-inline{background:initial}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title{height:50px !important;line-height:50px !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title:hover{background-color:initial !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title .anticon{color:var(--color-orange)}.GWTSauaAl_v9W8o4YPxW .ant-menu-inline.ant-menu-root .ant-menu-item>.ant-menu-title-content{overflow-x:auto;text-overflow:unset}.hWGer1IJ7RdkfQWwYfsw{position:absolute;top:24px;left:24px;right:24px;height:144px}.MD1FhirslDDwd2izGwai{font-size:var(--font-size-body-2);line-height:14px;font-weight:var(--font-weight-light);display:inline-block;padding:12px;cursor:pointer;position:absolute;right:0;top:60px}.RxGn4c38kNq8Ai4ypW_x{position:absolute;top:144px;left:24px;right:24px;bottom:0;overflow-y:auto;overflow-x:hidden;padding-bottom:24px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{border-radius:10px;background:rgba(0,0,0,.1)}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,.2)}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.9)}
|
|
@@ -29,3 +29,4 @@
|
|
|
29
29
|
.vhUOPe6KeB6afW8Pj3M1{font-size:32px}
|
|
30
30
|
.nkyL3EtE9Zsnc5VOW43L{display:flex;flex-wrap:wrap;flex-direction:column}.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{background-color:rgba(0,0,0,0);border:0px;color:var(--color-blue)}.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th:before{display:none}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper{margin-bottom:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-cell{word-break:break-word}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr{cursor:pointer}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:last-child>td{border-bottom:1px solid var(--color-grey-light) !important}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:first-child>td{border-top:1px solid var(--color-blue) !important}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:hover td{border-radius:0 !important;border-bottom-color:var(--color-grey-light) !important}.nkyL3EtE9Zsnc5VOW43L .ant-space{align-self:flex-end}.nkyL3EtE9Zsnc5VOW43L .ant-select-selection-placeholder{color:var(--color-black)}.nkyL3EtE9Zsnc5VOW43L .ant-select-selector,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search{border:none !important;box-shadow:none !important}.nkyL3EtE9Zsnc5VOW43L .ant-select-selector:focus,.nkyL3EtE9Zsnc5VOW43L .ant-select-selector:hover,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search:focus,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search:hover{border:none !important;box-shadow:none !important}.nkyL3EtE9Zsnc5VOW43L .ant-pagination{max-width:calc(100% - 200px);margin-left:auto !important}.nkyL3EtE9Zsnc5VOW43L button[type=button].ant-pagination-item-link{margin-top:0 !important}.nkyL3EtE9Zsnc5VOW43L button[type=button]{margin-top:-50px}@media screen and (max-width: 1024px){.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{font-size:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr>td{font-size:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-thead>tr>th{padding:8px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-tbody>tr>td{padding:8px}}@media screen and (max-width: 767px){.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{font-size:10px}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr>td{font-size:10px}.nkyL3EtE9Zsnc5VOW43L .ant-table-content table{width:100%}.nkyL3EtE9Zsnc5VOW43L .ant-table-content{width:100%}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table .ant-table-title,.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table .ant-table-header{word-break:break-all}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-thead>tr>th{padding:4px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-tbody>tr>td{padding:4px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter{margin-inline-start:0px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter-up{font-size:8px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter-down{font-size:8px}.nkyL3EtE9Zsnc5VOW43L .ant-pagination{max-width:unset}}
|
|
31
31
|
.aZEBTQus3Y3MyodeDwkf{display:flex;flex-direction:column;align-items:center;justify-content:center}.cc1pbQlAgw2CmXVml3bs{height:300px;width:400px}.aTf_CXAsyp0tySsoZdD_{display:flex;justify-content:space-between;margin:10px 10px 0px 10px;font-size:20px}.kuu1hf_JTvYD55IW6Nxl{color:#ff4d4f}.N8ODEO3zDbY7gmecjTrp{color:#52c41a}.WIsL9Shu6c0mGJq9qSSz{margin-top:20px;border-radius:4px;overflow:hidden}.WIsL9Shu6c0mGJq9qSSz img{width:100%;height:auto}
|
|
32
|
+
.OJKeuXyOSPIeCCssVum2{display:flex;gap:32px}.jzxszvL7wzCV5nztJL0S{padding:12px}.OGA8oJw8RDyohcRftjmo{width:100%}.y2_7QVPOhjRZlAHCRWKf{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.Smkcs3LGp1uPuQge2GxE{margin-top:16px}Label{margin-bottom:8px}.djarlYFkE9Kb7wUjUnrY{height:36px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, showGrade, handleChanges, showCheckbox, responseTypeOptions, hasHeader, ...restField }: any) => import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, showGrade, handleChanges, showCheckbox, responseTypeOptions, hasHeader, responseTypeComponent, ...restField }: any) => import("react/jsx-runtime").JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omniumretail/component-library",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.61",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/bundle.js",
|
|
6
6
|
"typings": "./dist/types/index",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"@types/react": "^18.0.26",
|
|
16
16
|
"@types/react-beautiful-dnd": "^13.1.3",
|
|
17
17
|
"@types/react-dom": "^18.0.9",
|
|
18
|
-
"antd": "^5.
|
|
18
|
+
"antd": "^5.5.0",
|
|
19
19
|
"antd-img-crop": "^4.10.2",
|
|
20
20
|
"babel-jest": "^27.4.2",
|
|
21
21
|
"babel-loader": "^8.2.3",
|
|
@@ -61,7 +61,7 @@ export const DatePickerTag = (props: DatePickerTagProps) => {
|
|
|
61
61
|
<DatePicker
|
|
62
62
|
disabledDate={(current) => current && current < moment().endOf('day')}
|
|
63
63
|
value={dateValue}
|
|
64
|
-
onChange={handleChange}
|
|
64
|
+
onChange={handleChange as any}
|
|
65
65
|
className={styles.picker}
|
|
66
66
|
placeholder={t('components.datePickerTag.placeholder')!}
|
|
67
67
|
locale={locale}
|
|
@@ -1,11 +1,25 @@
|
|
|
1
1
|
import { DeleteOutlined, HolderOutlined, InfoCircleOutlined } from '@ant-design/icons';
|
|
2
|
-
import { Checkbox, Form, Input, Space } from 'antd';
|
|
2
|
+
import { Checkbox, ColorPicker, Form, Input, Space } from 'antd';
|
|
3
3
|
import { t } from 'i18next';
|
|
4
4
|
import styles from './styles.module.scss';
|
|
5
5
|
import { useState } from 'react';
|
|
6
6
|
import { Select } from 'antd';
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
import classnames from 'classnames';
|
|
8
|
+
|
|
9
|
+
export const SingleQuestion = ({
|
|
10
|
+
key,
|
|
11
|
+
provided,
|
|
12
|
+
snapshot,
|
|
13
|
+
remove,
|
|
14
|
+
name,
|
|
15
|
+
showGrade,
|
|
16
|
+
handleChanges,
|
|
17
|
+
showCheckbox,
|
|
18
|
+
responseTypeOptions,
|
|
19
|
+
hasHeader,
|
|
20
|
+
responseTypeComponent,
|
|
21
|
+
...restField
|
|
22
|
+
}: any) => {
|
|
9
23
|
const [mandatoryCheckbox, setMandatoryCheckbox] = useState<boolean>(false);
|
|
10
24
|
const [emphasisCheckbox, setEmphasisCheckbox] = useState<boolean>(false);
|
|
11
25
|
|
|
@@ -19,6 +33,10 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
|
|
|
19
33
|
handleChanges();
|
|
20
34
|
}
|
|
21
35
|
|
|
36
|
+
const questionStyle = classnames({
|
|
37
|
+
[styles.responseTypeQuestion]: responseTypeComponent
|
|
38
|
+
}, [styles.question]);
|
|
39
|
+
|
|
22
40
|
return (
|
|
23
41
|
<div
|
|
24
42
|
key={key}
|
|
@@ -29,7 +47,7 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
|
|
|
29
47
|
className={styles.dragItem}
|
|
30
48
|
>
|
|
31
49
|
<Space>
|
|
32
|
-
<div className={
|
|
50
|
+
<div className={questionStyle}>
|
|
33
51
|
<div className={styles.drag}>
|
|
34
52
|
<HolderOutlined />
|
|
35
53
|
</div>
|
|
@@ -42,8 +60,12 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
|
|
|
42
60
|
<Form.Item
|
|
43
61
|
{...restField}
|
|
44
62
|
name={[name, 'question']}
|
|
63
|
+
rules={[{ required: true, message: t('components.category.answerNameIsMissing')! }]}
|
|
45
64
|
>
|
|
46
|
-
<Input
|
|
65
|
+
<Input
|
|
66
|
+
placeholder={!responseTypeComponent ? `${t('components.category.placeholderQuestion')}` : `${t('components.category.placeholderResponse')}`}
|
|
67
|
+
onBlur={handleChanges}
|
|
68
|
+
/>
|
|
47
69
|
</Form.Item>
|
|
48
70
|
</div>
|
|
49
71
|
|
|
@@ -54,35 +76,37 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
|
|
|
54
76
|
</div>
|
|
55
77
|
</div>
|
|
56
78
|
|
|
57
|
-
|
|
58
|
-
<div className={styles.
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<div className={styles.content}>
|
|
63
|
-
<div className={styles.label}>
|
|
64
|
-
xpto
|
|
79
|
+
{!responseTypeComponent &&
|
|
80
|
+
<div className={styles.information}>
|
|
81
|
+
<div className={styles.infoIcon}>
|
|
82
|
+
<InfoCircleOutlined />
|
|
65
83
|
</div>
|
|
66
84
|
|
|
67
|
-
<
|
|
68
|
-
{
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<Input placeholder={`${t('components.category.placeholderInfo')}`} onBlur={handleChanges} />
|
|
72
|
-
</Form.Item>
|
|
73
|
-
</div>
|
|
85
|
+
<div className={styles.content}>
|
|
86
|
+
<div className={styles.label}>
|
|
87
|
+
xpto
|
|
88
|
+
</div>
|
|
74
89
|
|
|
75
|
-
{showGrade &&
|
|
76
|
-
<div className={styles.grade}>
|
|
77
90
|
<Form.Item
|
|
78
91
|
{...restField}
|
|
79
|
-
name={[name, '
|
|
92
|
+
name={[name, 'info']}
|
|
80
93
|
>
|
|
81
|
-
<Input placeholder={`${t('components.category.
|
|
94
|
+
<Input placeholder={`${t('components.category.placeholderInfo')}`} onBlur={handleChanges} />
|
|
82
95
|
</Form.Item>
|
|
83
96
|
</div>
|
|
84
|
-
|
|
85
|
-
|
|
97
|
+
|
|
98
|
+
{showGrade &&
|
|
99
|
+
<div className={styles.grade}>
|
|
100
|
+
<Form.Item
|
|
101
|
+
{...restField}
|
|
102
|
+
name={[name, 'grade']}
|
|
103
|
+
>
|
|
104
|
+
<Input placeholder={`${t('components.category.placeholderGrade')}`} onBlur={handleChanges} />
|
|
105
|
+
</Form.Item>
|
|
106
|
+
</div>
|
|
107
|
+
}
|
|
108
|
+
</div>
|
|
109
|
+
}
|
|
86
110
|
|
|
87
111
|
{showCheckbox &&
|
|
88
112
|
<div className={styles.questionFooter}>
|
|
@@ -134,6 +158,48 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
|
|
|
134
158
|
</div>
|
|
135
159
|
</div>
|
|
136
160
|
}
|
|
161
|
+
|
|
162
|
+
{responseTypeComponent &&
|
|
163
|
+
<div className={styles.questionFooter}>
|
|
164
|
+
<div />
|
|
165
|
+
|
|
166
|
+
<div className={styles.checkboxContainer}>
|
|
167
|
+
<Form.Item
|
|
168
|
+
{...restField}
|
|
169
|
+
name={[name, 'color']}
|
|
170
|
+
>
|
|
171
|
+
<ColorPicker
|
|
172
|
+
size='small'
|
|
173
|
+
onChangeComplete={handleChanges}
|
|
174
|
+
defaultValue={"#00000"}
|
|
175
|
+
/>
|
|
176
|
+
</Form.Item>
|
|
177
|
+
|
|
178
|
+
<span>{t('components.category.color')}</span>
|
|
179
|
+
</div>
|
|
180
|
+
|
|
181
|
+
<div className={styles.checkboxContainer}>
|
|
182
|
+
<Form.Item
|
|
183
|
+
{...restField}
|
|
184
|
+
name={[name, 'flagged']}
|
|
185
|
+
valuePropName='checked'
|
|
186
|
+
>
|
|
187
|
+
<Checkbox onChange={handleChanges} />
|
|
188
|
+
</Form.Item>
|
|
189
|
+
|
|
190
|
+
<span>{t('components.category.flagged')}</span>
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<div className={styles.checkboxContainer}>
|
|
194
|
+
<Form.Item
|
|
195
|
+
{...restField}
|
|
196
|
+
name={[name, 'score']}
|
|
197
|
+
>
|
|
198
|
+
<Input placeholder={`${t('components.category.placeholderScore')}`} onBlur={handleChanges} />
|
|
199
|
+
</Form.Item>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
}
|
|
137
203
|
</Space>
|
|
138
204
|
</div>
|
|
139
205
|
);
|
|
@@ -34,6 +34,10 @@ $questionAndInformationGap: 20px;
|
|
|
34
34
|
line-height: 100%;
|
|
35
35
|
font-weight: var(--font-weight-medium);
|
|
36
36
|
align-items: center;
|
|
37
|
+
|
|
38
|
+
&.responseTypeQuestion {
|
|
39
|
+
max-width: 650px;
|
|
40
|
+
}
|
|
37
41
|
}
|
|
38
42
|
|
|
39
43
|
.information {
|
|
@@ -50,16 +54,20 @@ $questionAndInformationGap: 20px;
|
|
|
50
54
|
gap: 40px;
|
|
51
55
|
font-size: var(--font-size-body-3);
|
|
52
56
|
align-items: center;
|
|
57
|
+
|
|
58
|
+
@media(max-width: 768px) {
|
|
59
|
+
gap: 12px;
|
|
60
|
+
}
|
|
53
61
|
}
|
|
54
62
|
|
|
55
63
|
.checkboxContainer {
|
|
56
64
|
display: flex;
|
|
57
65
|
align-items: center;
|
|
58
66
|
gap: 8px;
|
|
59
|
-
}
|
|
60
67
|
|
|
61
|
-
|
|
62
|
-
|
|
68
|
+
@media(max-width: 768px) {
|
|
69
|
+
width: 100%;
|
|
70
|
+
}
|
|
63
71
|
}
|
|
64
72
|
|
|
65
73
|
.actions {
|
|
@@ -13,6 +13,7 @@ export interface QuestionsProps {
|
|
|
13
13
|
handleChanges: any;
|
|
14
14
|
responseTypeOptions: any;
|
|
15
15
|
hasHeader?: boolean;
|
|
16
|
+
responseTypeComponent?: boolean;
|
|
16
17
|
}
|
|
17
18
|
|
|
18
19
|
export const Questions = (props: QuestionsProps) => {
|
|
@@ -21,7 +22,8 @@ export const Questions = (props: QuestionsProps) => {
|
|
|
21
22
|
showCheckbox,
|
|
22
23
|
handleChanges,
|
|
23
24
|
responseTypeOptions,
|
|
24
|
-
hasHeader
|
|
25
|
+
hasHeader,
|
|
26
|
+
responseTypeComponent
|
|
25
27
|
} = props;
|
|
26
28
|
|
|
27
29
|
const formContext = useContext(FieldContext);
|
|
@@ -35,11 +37,20 @@ export const Questions = (props: QuestionsProps) => {
|
|
|
35
37
|
};
|
|
36
38
|
|
|
37
39
|
return (
|
|
38
|
-
<Form.List name="questions">
|
|
40
|
+
<Form.List name="questions">
|
|
39
41
|
{(fields, { add, remove }) => {
|
|
42
|
+
const customRemove = (name: number) => {
|
|
43
|
+
remove(name);
|
|
44
|
+
|
|
45
|
+
setTimeout(() => {
|
|
46
|
+
handleChanges();
|
|
47
|
+
}, 1);
|
|
48
|
+
}
|
|
49
|
+
|
|
40
50
|
const fieldsUpdated = fields.map((field, index) => {
|
|
41
51
|
return field = { ...field, name: index, key: index, fieldKey: index };
|
|
42
52
|
})
|
|
53
|
+
|
|
43
54
|
return (
|
|
44
55
|
<>
|
|
45
56
|
<DragDropContext onDragEnd={onDragEnd}>
|
|
@@ -47,29 +58,30 @@ export const Questions = (props: QuestionsProps) => {
|
|
|
47
58
|
{(provided) => (
|
|
48
59
|
<div {...provided.droppableProps} ref={provided.innerRef}>
|
|
49
60
|
<>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
61
|
+
{fieldsUpdated.map(({ key, name, ...restField }) => {
|
|
62
|
+
return (
|
|
63
|
+
<Draggable key={key} draggableId={`${key}`} index={key}>
|
|
64
|
+
{(provided, snapshot) => (
|
|
65
|
+
<>
|
|
66
|
+
<SingleQuestion
|
|
67
|
+
provided={provided}
|
|
68
|
+
snapshot={snapshot}
|
|
69
|
+
item={name}
|
|
70
|
+
{...restField}
|
|
71
|
+
remove={customRemove}
|
|
72
|
+
name={name}
|
|
73
|
+
showGrade={showGrade}
|
|
74
|
+
showCheckbox={showCheckbox}
|
|
75
|
+
handleChanges={handleChanges}
|
|
76
|
+
responseTypeOptions={responseTypeOptions}
|
|
77
|
+
hasHeader={hasHeader}
|
|
78
|
+
responseTypeComponent={responseTypeComponent}
|
|
79
|
+
/>
|
|
80
|
+
</>
|
|
81
|
+
)}
|
|
82
|
+
</Draggable>
|
|
83
|
+
)
|
|
84
|
+
})}
|
|
73
85
|
</>
|
|
74
86
|
{provided.placeholder}
|
|
75
87
|
</div>
|
|
@@ -77,7 +89,12 @@ export const Questions = (props: QuestionsProps) => {
|
|
|
77
89
|
</Droppable>
|
|
78
90
|
</DragDropContext>
|
|
79
91
|
<Form.Item>
|
|
80
|
-
<Link
|
|
92
|
+
<Link
|
|
93
|
+
icon={<PlusOutlined />}
|
|
94
|
+
onClick={() => add()}
|
|
95
|
+
>
|
|
96
|
+
{!responseTypeComponent ? `${t('components.category.addQuestion')}` : `${t('components.category.placeholderResponse')}`}
|
|
97
|
+
</Link>
|
|
81
98
|
</Form.Item>
|
|
82
99
|
</>
|
|
83
100
|
)
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Meta, Story } from "@storybook/react";
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
|
+
import { ResponseType } from '.';
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
title: 'ResponseType',
|
|
7
|
+
component: ResponseType,
|
|
8
|
+
} as Meta;
|
|
9
|
+
|
|
10
|
+
const Template: Story<any> = (args) => {
|
|
11
|
+
const [serverData, setServerData] = useState<any>();
|
|
12
|
+
const [categoryContentInfo, setCategoryContentInfo] = useState<any>();
|
|
13
|
+
const [categorySidebarInfo, setCategorySidebarInfo] = useState<any>();
|
|
14
|
+
const [showContent, setShowContent] = useState<boolean>(false);
|
|
15
|
+
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
console.log(serverData);
|
|
18
|
+
}, [serverData])
|
|
19
|
+
|
|
20
|
+
return <ResponseType {...args} categoryContentInfo={setCategoryContentInfo} categoryContentShow={showContent}
|
|
21
|
+
categorySidebarData={categorySidebarInfo} serverReadyData={setServerData} ></ResponseType>
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export const Primary = Template.bind({});
|
|
25
|
+
Primary.args = {
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { Form } from 'antd';
|
|
2
|
+
import { useForm } from 'antd/es/form/Form';
|
|
3
|
+
import { InputField } from '../Input';
|
|
4
|
+
import { Label } from '../Label';
|
|
5
|
+
import { Questions } from '../Questions';
|
|
6
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
7
|
+
import styles from './styles.module.scss';
|
|
8
|
+
import { t } from 'i18next';
|
|
9
|
+
|
|
10
|
+
interface categoryContent {
|
|
11
|
+
categoryContentInfo: any;
|
|
12
|
+
responseTypeOptions?: any;
|
|
13
|
+
data?: any;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const defaultInitialValues = {
|
|
17
|
+
questions: [],
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export const ResponseType = (props: categoryContent) => {
|
|
21
|
+
const {
|
|
22
|
+
responseTypeOptions,
|
|
23
|
+
data
|
|
24
|
+
} = props;
|
|
25
|
+
|
|
26
|
+
const [contentInfo, setContentInfo] = useState<any>(data);
|
|
27
|
+
const [initialValues,] = useState<any>(data || defaultInitialValues)
|
|
28
|
+
const [form] = useForm();
|
|
29
|
+
|
|
30
|
+
const onFinish = (values: any) => {
|
|
31
|
+
const combinedValues = { ...initialValues, ...values };
|
|
32
|
+
setContentInfo(combinedValues);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const handleInputChange = useCallback(() => {
|
|
36
|
+
// Check if all required fields are filled
|
|
37
|
+
const allRequiredFieldsFilled = form.getFieldsError().every(fieldError => !fieldError.errors.length);
|
|
38
|
+
|
|
39
|
+
if (allRequiredFieldsFilled) {
|
|
40
|
+
// Add a small delay before submitting the form
|
|
41
|
+
form.submit();
|
|
42
|
+
}
|
|
43
|
+
}, [form]);
|
|
44
|
+
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
props.categoryContentInfo(contentInfo);
|
|
47
|
+
}, [contentInfo]);
|
|
48
|
+
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
form.resetFields();
|
|
51
|
+
form.setFieldsValue(initialValues);
|
|
52
|
+
}, [form, initialValues]);
|
|
53
|
+
|
|
54
|
+
return (
|
|
55
|
+
<div className={styles.categoryContent}>
|
|
56
|
+
<Form
|
|
57
|
+
initialValues={initialValues}
|
|
58
|
+
name="dynamic_form_nest_item"
|
|
59
|
+
onFinish={onFinish}
|
|
60
|
+
autoComplete="off"
|
|
61
|
+
form={form}
|
|
62
|
+
>
|
|
63
|
+
<div className={styles.formHeader}>
|
|
64
|
+
<div className={styles.categoryNameContainer}>
|
|
65
|
+
<div className={styles.categoryName}>
|
|
66
|
+
<Label isUppercase>
|
|
67
|
+
{t('components.category.responseTypeName')}
|
|
68
|
+
</Label>
|
|
69
|
+
<Form.Item
|
|
70
|
+
name={['name']}
|
|
71
|
+
rules={[{ required: true, message: t('components.category.typeResponseNameIsMissing')! }]}
|
|
72
|
+
validateTrigger="onBlur"
|
|
73
|
+
>
|
|
74
|
+
<InputField
|
|
75
|
+
placeholder={t('components.category.responseTypeName')!}
|
|
76
|
+
onBlur={handleInputChange}
|
|
77
|
+
customClass={styles.input}
|
|
78
|
+
/>
|
|
79
|
+
</Form.Item>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<div className={styles.questionsWrapper}>
|
|
85
|
+
<Label isUppercase>
|
|
86
|
+
{t('components.categoryContent.answers')}
|
|
87
|
+
</Label>
|
|
88
|
+
<Form.Item>
|
|
89
|
+
<Questions
|
|
90
|
+
handleChanges={handleInputChange}
|
|
91
|
+
responseTypeOptions={responseTypeOptions}
|
|
92
|
+
responseTypeComponent
|
|
93
|
+
/>
|
|
94
|
+
</Form.Item>
|
|
95
|
+
</div>
|
|
96
|
+
</Form>
|
|
97
|
+
</div>
|
|
98
|
+
);
|
|
99
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
|
|
2
|
+
.categoryNameContainer {
|
|
3
|
+
display: flex;
|
|
4
|
+
gap: 32px;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.categoryContent {
|
|
8
|
+
padding: 12px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.categoryName {
|
|
12
|
+
width: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.formHeader {
|
|
16
|
+
display: grid;
|
|
17
|
+
grid-template-columns: minmax(200px, 1fr) auto auto auto auto;
|
|
18
|
+
gap: 46px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.questionsWrapper {
|
|
22
|
+
margin-top: 16px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
Label {
|
|
26
|
+
margin-bottom: 8px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.input {
|
|
30
|
+
height: 36px;
|
|
31
|
+
}
|
|
@@ -60,11 +60,13 @@ export const TagField = (props: customTagProps) => {
|
|
|
60
60
|
if (inputValue && allTags.indexOf(inputValue) === -1) {
|
|
61
61
|
const [, value] = inputValue.split('=');
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
63
|
+
if (props.addSwitch) {
|
|
64
|
+
const newTags = props.addSwitch ? [inputValue] : [...tags, inputValue];
|
|
65
|
+
setTags(newTags);
|
|
66
|
+
setAllTags([inputValue]);
|
|
67
|
+
} else {
|
|
68
|
+
setAllTags([...allTags, inputValue]);
|
|
69
|
+
}
|
|
68
70
|
|
|
69
71
|
const matchedFilter = advancedTags && advancedTags.find(filter => filter.display === inputValue.split('=')[0]);
|
|
70
72
|
|
|
@@ -75,8 +77,10 @@ export const TagField = (props: customTagProps) => {
|
|
|
75
77
|
};
|
|
76
78
|
|
|
77
79
|
setAdvancedTagList([...advancedTagList, newTag]);
|
|
80
|
+
|
|
78
81
|
} else if (props.addSwitch) {
|
|
79
82
|
setTags([inputValue]);
|
|
83
|
+
|
|
80
84
|
} else {
|
|
81
85
|
setTags([...tags, inputValue]);
|
|
82
86
|
}
|
|
@@ -123,8 +127,14 @@ export const TagField = (props: customTagProps) => {
|
|
|
123
127
|
// Adiciona a nova tag ao allTags usando a prop addExtraTags
|
|
124
128
|
if (props.addExtraTags && typeof props.addExtraTags === "string") {
|
|
125
129
|
const newTags = props.addSwitch ? [props.addExtraTags] : [...tags, props.addExtraTags];
|
|
126
|
-
|
|
127
|
-
|
|
130
|
+
|
|
131
|
+
if (props.addSwitch) {
|
|
132
|
+
setTags([props.addExtraTags]);
|
|
133
|
+
setAllTags([props.addExtraTags]);
|
|
134
|
+
} else {
|
|
135
|
+
setTags([...tags, props.addExtraTags]);
|
|
136
|
+
setAllTags([...allTags, props.addExtraTags]);
|
|
137
|
+
}
|
|
128
138
|
}
|
|
129
139
|
}, [props.addExtraTags, props.addSwitch]);
|
|
130
140
|
|
package/src/components/index.tsx
CHANGED