Skip to content

Commit 99a3dc7

Browse files
ionlizarazuionlizarazu
committed
refactoring code
1 parent a424381 commit 99a3dc7

File tree

4 files changed

+207
-186
lines changed

4 files changed

+207
-186
lines changed

‎src/components/Widgets/EditableCell.jsx

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { useSelector } from 'react-redux';
2+
import React from 'react';
3+
import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
4+
import { useIntl } from 'react-intl';
5+
import moment from 'moment';
6+
import { getFieldType, getOnChange, getValue, getValueToRender } from './utils';
7+
8+
export const EditableCell = ({
9+
value: initialValue,
10+
row: { index },
11+
column: { id },
12+
updateCell, // This is a custom function that we supplied to our table instance
13+
selectedRow,
14+
setSelectedRow,
15+
schema,
16+
reactSelect,
17+
state: { pageIndex, pageSize },
18+
}) => {
19+
const fieldSchema = { ...schema?.properties?.[id], id: id };
20+
const locale = useSelector((state) => state.intl.locale);
21+
moment.locale(locale);
22+
23+
const [value, setValue] = React.useState(initialValue);
24+
25+
const onBlur = () => {
26+
updateCell(index, id, value);
27+
};
28+
29+
React.useEffect(() => {
30+
setValue(initialValue);
31+
}, [initialValue]);
32+
const { choices, defaultValue, isMulti } = fieldSchema;
33+
const intl = useIntl();
34+
const fieldType = getFieldType(fieldSchema, reactSelect);
35+
const Field = fieldType.Field;
36+
const normalizedValue = normalizeValue(choices, value, intl);
37+
const onChangeFunction = getOnChange(fieldType.type, setValue);
38+
return selectedRow === index ? (
39+
<Field
40+
{...fieldType.properties}
41+
value={getValue(fieldType.type, value, defaultValue, normalizedValue)}
42+
onChange={(...args) => onChangeFunction({ ...args, isMulti: isMulti })}
43+
onBlur={onBlur}
44+
/>
45+
) : (
46+
<span
47+
role="button"
48+
className="editable-cell"
49+
tabIndex={0}
50+
onClick={() => {
51+
setSelectedRow(index);
52+
}}
53+
onKeyDown={() => {
54+
setSelectedRow(index);
55+
}}
56+
onFocus={() => {
57+
setSelectedRow(index);
58+
}}
59+
>
60+
{getValueToRender(fieldType, value, moment)}
61+
</span>
62+
);
63+
};

‎src/components/Widgets/EditableTable.jsx

+2-185
Original file line numberDiff line numberDiff line change
@@ -1,197 +1,14 @@
1-
import {
2-
ClearIndicator,
3-
DropdownIndicator,
4-
MenuList,
5-
Option,
6-
customSelectStyles,
7-
selectTheme,
8-
} from '@plone/volto/components/manage/Widgets/SelectStyling';
9-
import { Input, Pagination, Table } from 'semantic-ui-react';
1+
import { Pagination, Table } from 'semantic-ui-react';
102
import { usePagination, useTable } from 'react-table';
11-
import { useSelector } from 'react-redux';
123
import { Icon } from '@plone/volto/components';
134
import React from 'react';
145
import { compose } from 'redux';
156
import deleteSVG from '@plone/volto/icons/delete.svg';
167
import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
17-
import { map } from 'lodash';
18-
import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
198
import paginationLeftSVG from '@plone/volto/icons/left-key.svg';
209
import paginationRightSVG from '@plone/volto/icons/right-key.svg';
2110
import plusSVG from '@plone/volto/icons/circle-plus.svg';
22-
import { useIntl } from 'react-intl';
23-
import DatetimeWidget from '@plone/volto/components/manage/Widgets/DatetimeWidget';
24-
import moment from 'moment';
25-
const FieldEditor = (props) => {
26-
const {
27-
fieldSchema,
28-
value,
29-
onChange,
30-
onChangeSelect,
31-
onChangeDate,
32-
onBlur,
33-
reactSelect,
34-
} = props;
35-
const Select = reactSelect.default;
36-
37-
const {
38-
type,
39-
choices,
40-
id,
41-
minimum,
42-
maximum,
43-
defaultValue,
44-
isMulti,
45-
} = fieldSchema;
46-
const intl = useIntl();
47-
const normalizedValue = normalizeValue(choices, value, intl);
48-
if (choices) {
49-
const options = [
50-
...map(choices, (option) => ({
51-
value: option[0],
52-
label:
53-
// Fix "None" on the serializer, to remove when fixed in p.restapi
54-
option[1] !== 'None' && option[1] ? option[1] : option[0],
55-
})),
56-
];
57-
return (
58-
<Select
59-
id={`field-${id}`}
60-
value={normalizedValue}
61-
className="react-table-select-field"
62-
theme={selectTheme}
63-
isMulti={isMulti}
64-
components={{
65-
...(choices?.length > 25 && {
66-
MenuList,
67-
}),
68-
DropdownIndicator,
69-
ClearIndicator,
70-
Option: Option,
71-
}}
72-
options={options}
73-
styles={customSelectStyles}
74-
onChange={(e) => onChangeSelect(e, isMulti)}
75-
onBlur={onBlur}
76-
/>
77-
);
78-
}
79-
if (type === 'number') {
80-
return (
81-
<Input
82-
id={`field-${id}`}
83-
className="react-table-integer-field"
84-
type="number"
85-
min={minimum || null}
86-
max={maximum || null}
87-
value={value || defaultValue}
88-
onChange={onChange}
89-
onBlur={onBlur}
90-
/>
91-
);
92-
}
93-
if (type === 'date') {
94-
return (
95-
<DatetimeWidget
96-
id={`field-${id}`}
97-
title="date"
98-
value={value || defaultValue}
99-
onChange={onChangeDate}
100-
onBlur={onBlur}
101-
/>
102-
);
103-
}
104-
return (
105-
<Input
106-
id={`field-${id}`}
107-
type="text"
108-
className="react-table-text-field"
109-
fluid
110-
value={value}
111-
onChange={onChange}
112-
onBlur={onBlur}
113-
/>
114-
);
115-
};
116-
// Create an editable cell renderer
117-
const EditableCell = ({
118-
value: initialValue,
119-
row: { index },
120-
column: { id },
121-
updateCell, // This is a custom function that we supplied to our table instance
122-
selectedRow,
123-
setSelectedRow,
124-
schema,
125-
reactSelect,
126-
state: { pageIndex, pageSize },
127-
}) => {
128-
const fieldSchema = { ...schema?.properties?.[id], id: id };
129-
const locale = useSelector((state) => state.intl.locale);
130-
moment.locale(locale);
131-
132-
const [value, setValue] = React.useState(initialValue);
133-
const onChange = (e) => {
134-
setValue(e.target.value);
135-
};
136-
137-
const onChangeSelect = (e, isMulti) => {
138-
if (!isMulti) {
139-
setValue(e.value);
140-
} else {
141-
setValue(e.map((value) => value.value));
142-
}
143-
};
144-
145-
const onChangeDate = (e, dateValue) => {
146-
// console.log(dateValue);
147-
setValue(dateValue);
148-
};
149-
150-
const onBlur = () => {
151-
updateCell(index, id, value);
152-
};
153-
154-
React.useEffect(() => {
155-
setValue(initialValue);
156-
}, [initialValue]);
157-
return selectedRow === index ? (
158-
// eslint-disable-next-line jsx-a11y/no-autofocus
159-
<FieldEditor
160-
fieldSchema={fieldSchema}
161-
value={value}
162-
onChange={onChange}
163-
onChangeSelect={onChangeSelect}
164-
onChangeDate={onChangeDate}
165-
onBlur={onBlur}
166-
reactSelect={reactSelect}
167-
/>
168-
) : (
169-
<span
170-
role="button"
171-
className="editable-cell"
172-
tabIndex={0}
173-
onClick={() => {
174-
setSelectedRow(index);
175-
}}
176-
onKeyDown={() => {
177-
setSelectedRow(index);
178-
}}
179-
onFocus={() => {
180-
setSelectedRow(index);
181-
}}
182-
>
183-
{fieldSchema.type === 'date' && value ? (
184-
moment(value).format('LLL')
185-
) : !fieldSchema.isMulti ? (
186-
value || <>&nbsp;</>
187-
) : value ? (
188-
value.join(', ')
189-
) : (
190-
<>&nbsp;</>
191-
)}
192-
</span>
193-
);
194-
};
11+
import { EditableCell } from './EditableCell';
19512

19613
const defaultColumn = {
19714
Cell: EditableCell,

‎src/components/Widgets/ReactTableWidget.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const ReactDataTableWidget = (props) => {
5151

5252
const intl = useIntl();
5353
const header_columns = schema.fieldsets[0].fields.map((field) => {
54-
return { Header: schema.properties[field].title, accessor: field };
54+
return { Header: schema.properties[field]?.title, accessor: field };
5555
});
5656

5757
const tablecolumns = React.useMemo(

0 commit comments

Comments
 (0)