@omniumretail/component-library 1.0.14 → 1.0.15
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/package.json +3 -1
- package/src/components/Questions/Questions.stories.tsx +37 -0
- package/src/components/Questions/SingleQuestion/index.tsx +84 -0
- package/src/components/Questions/SingleQuestion/styles.module.scss +81 -0
- package/src/components/Questions/index.tsx +66 -0
- package/src/components/Questions/styles.modules.scss +0 -0
- package/src/components/Table/index.tsx +1 -1
- package/src/locales/en.json +11 -0
- package/src/locales/es.json +11 -0
- package/src/locales/pt.json +13 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omniumretail/component-library",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.15",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/bundle.js",
|
|
6
6
|
"typings": "./dist/types/index",
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
"@types/jest": "^29.2.4",
|
|
16
16
|
"@types/node": "^18.11.11",
|
|
17
17
|
"@types/react": "^18.0.26",
|
|
18
|
+
"@types/react-beautiful-dnd": "^13.1.3",
|
|
18
19
|
"@types/react-dom": "^18.0.9",
|
|
19
20
|
"antd": "^5.1.2",
|
|
20
21
|
"babel-jest": "^27.4.2",
|
|
@@ -55,6 +56,7 @@
|
|
|
55
56
|
"rc-tween-one": "^3.0.6",
|
|
56
57
|
"react": "^18.2.0",
|
|
57
58
|
"react-app-polyfill": "^3.0.0",
|
|
59
|
+
"react-beautiful-dnd": "^13.1.1",
|
|
58
60
|
"react-dev-utils": "^12.0.1",
|
|
59
61
|
"react-dom": "^18.2.0",
|
|
60
62
|
"react-i18next": "^12.1.4",
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { Meta, Story } from "@storybook/react";
|
|
2
|
+
import { Questions } from '.';
|
|
3
|
+
import { SearchOutlined } from '@ant-design/icons';
|
|
4
|
+
import { Button, Form, Input } from "antd";
|
|
5
|
+
import { useForm } from 'antd/lib/form/Form';
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: 'Questions',
|
|
9
|
+
component: Questions,
|
|
10
|
+
} as Meta;
|
|
11
|
+
|
|
12
|
+
const Template: Story<any> = (args) => {
|
|
13
|
+
const [form] = useForm();
|
|
14
|
+
|
|
15
|
+
const onFinish = (values: any) => {
|
|
16
|
+
console.log('Received values of form:', values);
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<>
|
|
21
|
+
<Form
|
|
22
|
+
name="dynamic_form_nest_item"
|
|
23
|
+
onFinish={onFinish}
|
|
24
|
+
autoComplete="off"
|
|
25
|
+
form={form}
|
|
26
|
+
>
|
|
27
|
+
<Questions {...args}></Questions>
|
|
28
|
+
</Form>
|
|
29
|
+
<div style={{marginTop: '60px'}}></div>
|
|
30
|
+
<Button onClick={() => form.submit()}>Submit</Button>
|
|
31
|
+
</>
|
|
32
|
+
);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export const Primary = Template.bind({});
|
|
36
|
+
Primary.args = {
|
|
37
|
+
};
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { DeleteOutlined, HolderOutlined, InfoCircleOutlined } from '@ant-design/icons';
|
|
2
|
+
import { Form, Input, Space } from 'antd';
|
|
3
|
+
import { t } from 'i18next';
|
|
4
|
+
import styles from './styles.module.scss';
|
|
5
|
+
|
|
6
|
+
export const SingleQuestion = ({ key, provided, snapshot, remove, name, ...restField }: any) => {
|
|
7
|
+
return (
|
|
8
|
+
<div
|
|
9
|
+
key={key}
|
|
10
|
+
ref={provided.innerRef}
|
|
11
|
+
snapshot={snapshot}
|
|
12
|
+
{...provided.draggableProps}
|
|
13
|
+
{...provided.dragHandleProps}
|
|
14
|
+
className={styles.dragItem}
|
|
15
|
+
>
|
|
16
|
+
<Space>
|
|
17
|
+
<div className={styles.question}>
|
|
18
|
+
<div className={styles.drag}>
|
|
19
|
+
<HolderOutlined />
|
|
20
|
+
</div>
|
|
21
|
+
<div className={styles.content}>
|
|
22
|
+
<div className={styles.label}>
|
|
23
|
+
abc
|
|
24
|
+
</div>
|
|
25
|
+
<Form.Item
|
|
26
|
+
{...restField}
|
|
27
|
+
name={[name, 'question']}
|
|
28
|
+
rules={[{ required: true, message: t('components.category.errorQuestion') }]}
|
|
29
|
+
>
|
|
30
|
+
<Input placeholder={`${t('components.category.placeholderQuestion')}`} />
|
|
31
|
+
</Form.Item>
|
|
32
|
+
</div>
|
|
33
|
+
<div className={styles.actions}>
|
|
34
|
+
{/* <div className={styles.edit}>
|
|
35
|
+
<div className={styles.notEditing}
|
|
36
|
+
// onClick={() => handleStartEdit(index)}
|
|
37
|
+
>
|
|
38
|
+
<EditOutlined />
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<div className={styles.editing}>
|
|
42
|
+
<CheckOutlined style={{ color: 'var( --color-confirmation-600)' }}
|
|
43
|
+
onClick={() => handleSaveEdit()}
|
|
44
|
+
/>
|
|
45
|
+
<CloseOutlined style={{ color: 'var( --color-warning-500)' }}
|
|
46
|
+
//onClick={() => handleCancelEdit(index)}
|
|
47
|
+
/>
|
|
48
|
+
</div>
|
|
49
|
+
</div> */}
|
|
50
|
+
<div className={styles.delete}>
|
|
51
|
+
<DeleteOutlined onClick={() => remove(name)} />
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div className={styles.information}>
|
|
56
|
+
<div className={styles.infoIcon}>
|
|
57
|
+
<InfoCircleOutlined />
|
|
58
|
+
</div>
|
|
59
|
+
<div className={styles.content}>
|
|
60
|
+
<div className={styles.label}>
|
|
61
|
+
xpto
|
|
62
|
+
</div>
|
|
63
|
+
<Form.Item
|
|
64
|
+
{...restField}
|
|
65
|
+
name={[name, 'info']}
|
|
66
|
+
rules={[{ required: true, message: t('components.category.errorInfo') }]}
|
|
67
|
+
>
|
|
68
|
+
<Input placeholder={`${t('components.category.placeholderInfo')}`} />
|
|
69
|
+
</Form.Item>
|
|
70
|
+
</div>
|
|
71
|
+
<div className={styles.grade}>
|
|
72
|
+
<Form.Item
|
|
73
|
+
{...restField}
|
|
74
|
+
name={[name, 'grade']}
|
|
75
|
+
rules={[{ required: true, message: t('components.category.errorGrade') }]}
|
|
76
|
+
>
|
|
77
|
+
<Input placeholder={`${t('components.category.placeholderGrade')}`} />
|
|
78
|
+
</Form.Item>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</Space>
|
|
82
|
+
</div>
|
|
83
|
+
);
|
|
84
|
+
};
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
$actionsSpace: 90px;
|
|
2
|
+
$questionAndInformationGap: 20px;
|
|
3
|
+
|
|
4
|
+
.dragItem {
|
|
5
|
+
:global {
|
|
6
|
+
.ant-form-item {
|
|
7
|
+
margin-bottom: 0;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.ant-space {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
gap: 12px;
|
|
14
|
+
border-bottom: 1px solid var(--color-blue);
|
|
15
|
+
padding: 16px 10px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.ant-space-item {
|
|
19
|
+
width: 100%;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.label {
|
|
25
|
+
display: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.question {
|
|
29
|
+
display: grid;
|
|
30
|
+
grid-template-columns: minmax(18px, auto) 1fr $actionsSpace;
|
|
31
|
+
gap: $questionAndInformationGap;
|
|
32
|
+
color: var(--color-black);
|
|
33
|
+
font-size: var(--font-size-body-4);
|
|
34
|
+
line-height: 100%;
|
|
35
|
+
font-weight: var(--font-weight-medium);
|
|
36
|
+
align-items: center;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.information {
|
|
40
|
+
display: grid;
|
|
41
|
+
grid-template-columns: minmax(18px, auto) 1fr $actionsSpace;
|
|
42
|
+
gap: $questionAndInformationGap;
|
|
43
|
+
color: var(--color-grey-dark);
|
|
44
|
+
font-size: var(--font-size-body-3);
|
|
45
|
+
align-items: center;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.input {
|
|
49
|
+
display: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.actions {
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
justify-content: flex-start;
|
|
56
|
+
gap: 20px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.notEditing {
|
|
60
|
+
display: none;
|
|
61
|
+
align-items: center;
|
|
62
|
+
justify-content: center;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.editing {
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
gap: 16px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.drag,
|
|
73
|
+
.edit,
|
|
74
|
+
.delete {
|
|
75
|
+
font-size: var(--font-size-body-5);
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.addQuestion {
|
|
80
|
+
margin-top: 24px;
|
|
81
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { useContext } from 'react';
|
|
2
|
+
import { PlusOutlined } from '@ant-design/icons';
|
|
3
|
+
import { Form } from 'antd';
|
|
4
|
+
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
|
5
|
+
import { SingleQuestion } from "./SingleQuestion";
|
|
6
|
+
import { Link } from 'components/Link';
|
|
7
|
+
import { FieldContext } from 'rc-field-form';
|
|
8
|
+
import { t } from 'i18next';
|
|
9
|
+
|
|
10
|
+
export const Questions = () => {
|
|
11
|
+
const formContext = useContext(FieldContext);
|
|
12
|
+
|
|
13
|
+
const items = Form.useWatch('questions');
|
|
14
|
+
const onDragEnd = (result: any) => {
|
|
15
|
+
const newItems: any = items;
|
|
16
|
+
const [removed] = newItems.splice(result.source.index, 1);
|
|
17
|
+
newItems.splice(result.destination.index, 0, removed);
|
|
18
|
+
formContext.setFieldValue('questions', newItems);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<Form.List name="questions">
|
|
23
|
+
{(fields, { add, remove }) => {
|
|
24
|
+
const fieldsUpdated = fields.map((field, index) => {
|
|
25
|
+
return field = { ...field, name: index, key: index, fieldKey: index };
|
|
26
|
+
})
|
|
27
|
+
return (
|
|
28
|
+
<>
|
|
29
|
+
<DragDropContext onDragEnd={onDragEnd}>
|
|
30
|
+
<Droppable droppableId="droppable">
|
|
31
|
+
{(provided) => (
|
|
32
|
+
<div {...provided.droppableProps} ref={provided.innerRef}>
|
|
33
|
+
<>
|
|
34
|
+
{fieldsUpdated.map(({ key, name, ...restField }) => {
|
|
35
|
+
return (
|
|
36
|
+
<Draggable key={key} draggableId={`${key}`} index={key}>
|
|
37
|
+
{(provided, snapshot) => (
|
|
38
|
+
<>
|
|
39
|
+
<SingleQuestion
|
|
40
|
+
provided={provided}
|
|
41
|
+
snapshot={snapshot}
|
|
42
|
+
item={name}
|
|
43
|
+
{...restField}
|
|
44
|
+
remove={remove}
|
|
45
|
+
name={name}
|
|
46
|
+
/>
|
|
47
|
+
</>
|
|
48
|
+
)}
|
|
49
|
+
</Draggable>
|
|
50
|
+
)
|
|
51
|
+
})}
|
|
52
|
+
</>
|
|
53
|
+
{provided.placeholder}
|
|
54
|
+
</div>
|
|
55
|
+
)}
|
|
56
|
+
</Droppable>
|
|
57
|
+
</DragDropContext>
|
|
58
|
+
<Form.Item>
|
|
59
|
+
<Link icon={<PlusOutlined />} onClick={() => add()}> { t('components.category.addQuestion') }</Link>
|
|
60
|
+
</Form.Item>
|
|
61
|
+
</>
|
|
62
|
+
)
|
|
63
|
+
}}
|
|
64
|
+
</Form.List>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
File without changes
|
|
@@ -101,8 +101,8 @@ export const Table = (props: TableCustomProps) => {
|
|
|
101
101
|
}).filter(el => el !== undefined) as any;
|
|
102
102
|
|
|
103
103
|
let columnActions = {
|
|
104
|
-
title: 'Action',
|
|
105
104
|
key: 'action',
|
|
105
|
+
title: headingTranslationsKey ? t(`${headingTranslationsKey}.${'action'}`) : 'action',
|
|
106
106
|
dataIndex: 6,
|
|
107
107
|
ellipsis: false,
|
|
108
108
|
render: () => (
|
package/src/locales/en.json
CHANGED
|
@@ -16,5 +16,16 @@
|
|
|
16
16
|
"actions": {
|
|
17
17
|
"one": "one",
|
|
18
18
|
"two": "two"
|
|
19
|
+
},
|
|
20
|
+
"components": {
|
|
21
|
+
"category": {
|
|
22
|
+
"addQuestion": "Add Question",
|
|
23
|
+
"placeholderInfo": "Question Information",
|
|
24
|
+
"errorInfo": "Missing Question Information",
|
|
25
|
+
"placeholderQuestion": "Question",
|
|
26
|
+
"errorQuestion": "Missing Question",
|
|
27
|
+
"placeholderGrade": "Grade",
|
|
28
|
+
"errorGrade": "Missing Grade"
|
|
29
|
+
}
|
|
19
30
|
}
|
|
20
31
|
}
|
package/src/locales/es.json
CHANGED
|
@@ -16,5 +16,16 @@
|
|
|
16
16
|
"actions": {
|
|
17
17
|
"one": "one ES",
|
|
18
18
|
"two": "two ES"
|
|
19
|
+
},
|
|
20
|
+
"components": {
|
|
21
|
+
"category": {
|
|
22
|
+
"addQuestion": "Add Question ES",
|
|
23
|
+
"placeholderInfo": "Question Information ES",
|
|
24
|
+
"errorInfo": "Missing Question Information ES",
|
|
25
|
+
"placeholderQuestion": "Question ES",
|
|
26
|
+
"errorQuestion": "Missing Question ES",
|
|
27
|
+
"placeholderGrade": "Grade ES",
|
|
28
|
+
"errorGrade": "Missing Grade ES"
|
|
29
|
+
}
|
|
19
30
|
}
|
|
20
31
|
}
|
package/src/locales/pt.json
CHANGED
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
"store": "Loja",
|
|
7
7
|
"role": "Posição",
|
|
8
8
|
"type": "Tipo",
|
|
9
|
-
"id": "Id"
|
|
9
|
+
"id": "Id",
|
|
10
|
+
"action": "Ação"
|
|
10
11
|
},
|
|
11
12
|
"navigation": {
|
|
12
13
|
"back": "Go Back PT",
|
|
@@ -16,5 +17,16 @@
|
|
|
16
17
|
"actions": {
|
|
17
18
|
"one": "one PT",
|
|
18
19
|
"two": "two PT"
|
|
20
|
+
},
|
|
21
|
+
"components": {
|
|
22
|
+
"category": {
|
|
23
|
+
"addQuestion": "Add Question PT",
|
|
24
|
+
"placeholderInfo": "Question Information PT",
|
|
25
|
+
"errorInfo": "Missing Question Information PT",
|
|
26
|
+
"placeholderQuestion": "Question PT",
|
|
27
|
+
"errorQuestion": "Missing Question PT",
|
|
28
|
+
"placeholderGrade": "Grade PT",
|
|
29
|
+
"errorGrade": "Missing Grade PT"
|
|
30
|
+
}
|
|
19
31
|
}
|
|
20
32
|
}
|