akeneo-design-system 0.1.225 → 0.1.226
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/components/Table/Table.d.ts +1 -1
- package/lib/components/Table/TableRow/TableRow.d.ts +2 -2
- package/lib/components/Table/TableRow/TableRow.js +4 -4
- package/lib/components/Table/TableRow/TableRow.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Table/Table.stories.mdx +2 -2
- package/src/components/Table/TableRow/TableRow.tsx +3 -3
- package/src/components/Table/TableRow/TableRow.unit.tsx +0 -21
@@ -25,7 +25,7 @@ declare const Table: {
|
|
25
25
|
Row: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "onClick" | "onDragEnd" | "onDragStart" | "level" | "isSelected" | "rowIndex" | "onSelectToggle"> & {
|
26
26
|
children?: React.ReactNode;
|
27
27
|
onSelectToggle?: ((isSelected: boolean) => void) | undefined;
|
28
|
-
isSelected?: boolean | undefined;
|
28
|
+
isSelected?: boolean | "mixed" | undefined;
|
29
29
|
level?: "warning" | undefined;
|
30
30
|
onClick?: ((event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void) | undefined;
|
31
31
|
rowIndex?: number | undefined;
|
@@ -4,7 +4,7 @@ declare type Level = 'warning';
|
|
4
4
|
declare type TableRowProps = Override<HTMLAttributes<HTMLTableRowElement>, {
|
5
5
|
children?: ReactNode;
|
6
6
|
onSelectToggle?: (isSelected: boolean) => void;
|
7
|
-
isSelected?: boolean;
|
7
|
+
isSelected?: boolean | 'mixed';
|
8
8
|
level?: Level;
|
9
9
|
onClick?: (event: MouseEvent<HTMLTableRowElement>) => void;
|
10
10
|
rowIndex?: number;
|
@@ -14,7 +14,7 @@ declare type TableRowProps = Override<HTMLAttributes<HTMLTableRowElement>, {
|
|
14
14
|
declare const TableRow: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "onClick" | "onDragEnd" | "onDragStart" | "level" | "isSelected" | "rowIndex" | "onSelectToggle"> & {
|
15
15
|
children?: ReactNode;
|
16
16
|
onSelectToggle?: ((isSelected: boolean) => void) | undefined;
|
17
|
-
isSelected?: boolean | undefined;
|
17
|
+
isSelected?: boolean | "mixed" | undefined;
|
18
18
|
level?: "warning" | undefined;
|
19
19
|
onClick?: ((event: MouseEvent<HTMLTableRowElement>) => void) | undefined;
|
20
20
|
rowIndex?: number | undefined;
|
@@ -83,9 +83,9 @@ var CheckboxContainer = styled_components_1.default.td(templateObject_9 || (temp
|
|
83
83
|
var HandleCell = (0, styled_components_1.default)(TableCell_1.TableCell)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n cursor: grab;\n width: 20px;\n\n > div {\n justify-content: center;\n }\n\n :active {\n cursor: grabbing;\n }\n"], ["\n cursor: grab;\n width: 20px;\n\n > div {\n justify-content: center;\n }\n\n :active {\n cursor: grabbing;\n }\n"])));
|
84
84
|
var WarningIcon = (0, styled_components_1.default)(icons_1.DangerIcon)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), (0, theme_1.getColor)('yellow', 120));
|
85
85
|
var TableRow = (0, react_1.forwardRef)(function (_a, forwardedRef) {
|
86
|
-
var _b = _a.rowIndex, rowIndex = _b === void 0 ? 0 : _b,
|
87
|
-
var
|
88
|
-
var
|
86
|
+
var _b = _a.rowIndex, rowIndex = _b === void 0 ? 0 : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, level = _a.level, onSelectToggle = _a.onSelectToggle, onClick = _a.onClick, draggable = _a.draggable, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, children = _a.children, rest = __rest(_a, ["rowIndex", "isSelected", "level", "onSelectToggle", "onClick", "draggable", "onDragStart", "onDragEnd", "children"]);
|
87
|
+
var _d = (0, usePlaceholderPosition_1.usePlaceholderPosition)(rowIndex), placeholderPosition = _d[0], placeholderDragEnter = _d[1], placeholderDragLeave = _d[2], placeholderDragEnd = _d[3];
|
88
|
+
var _e = (0, react_1.useContext)(TableContext_1.TableContext), isSelectable = _e.isSelectable, displayCheckbox = _e.displayCheckbox, isDragAndDroppable = _e.isDragAndDroppable, hasWarningRows = _e.hasWarningRows;
|
89
89
|
if (isSelectable && (undefined === isSelected || undefined === onSelectToggle)) {
|
90
90
|
throw Error('A row in a selectable table should have the prop "isSelected" and "onSelectToggle"');
|
91
91
|
}
|
@@ -106,7 +106,7 @@ var TableRow = (0, react_1.forwardRef)(function (_a, forwardedRef) {
|
|
106
106
|
};
|
107
107
|
return (react_1.default.createElement(RowContainer, __assign({ ref: forwardedRef, isClickable: undefined !== onClick, isSelected: !!isSelected, level: level, isDragAndDroppable: isDragAndDroppable, onClick: onClick, placeholderPosition: isDragAndDroppable ? placeholderPosition : 'none', draggable: isDragAndDroppable && draggable, "data-draggable-index": rowIndex, onDragEnter: handleDragEnter, onDragLeave: placeholderDragLeave, onDragStart: handleDragStart, onDragEnd: handleDragEnd }, rest),
|
108
108
|
isSelectable && (react_1.default.createElement(CheckboxContainer, { "aria-hidden": !displayCheckbox && !isSelected, isVisible: displayCheckbox || !!isSelected, onClick: handleCheckboxChange },
|
109
|
-
react_1.default.createElement(components_1.Checkbox, { checked:
|
109
|
+
react_1.default.createElement(components_1.Checkbox, { checked: isSelected, onChange: function (_value, e) {
|
110
110
|
handleCheckboxChange(e);
|
111
111
|
} }))),
|
112
112
|
isDragAndDroppable && (react_1.default.createElement(HandleCell, { onMouseDown: function () { return onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(rowIndex); }, onMouseUp: onDragEnd, "data-testid": "dragAndDrop" },
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CASe;AACf,qEAA8C;AAC9C,wCAA2D;AAC3D,kDAA6C;AAE7C,gDAA6C;AAC7C,oDAAiD;AACjD,wCAAmD;AACnD,gFAAkG;AAIlG,IAAM,YAAY,GAAG,2BAAM,CAAC,EAAE,uOAQ7B,MACG,EAMC,SAED,EAMC,QAED,EAMC,QAED,EAIC,QAED,EAIC,6CAIC,EAIC,6DAOH,EASC,KACJ,KA3DG,UAAC,EAAY;QAAX,UAAU,gBAAA;IACZ,OAAA,UAAU,QACV,uBAAG,oIAAA,4CAEqB,EAAoB,kBAE3C,KAFuB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,CAE3C;AALD,CAKC,EAED,UAAC,EAAa;QAAZ,WAAW,iBAAA;IACb,OAAA,WAAW,QACX,uBAAG,gIAAA,4DAIF,IAAA;AALD,CAKC,EAED,UAAC,EAAoB;QAAnB,kBAAkB,wBAAA;IACpB,OAAA,kBAAkB,QAClB,uBAAG,sIAAA,kEAIF,IAAA;AALD,CAKC,EAED,UAAC,EAAqB;QAApB,mBAAmB,yBAAA;IACrB,OAAA,mBAAmB,KAAK,KAAK,QAC7B,uBAAG,+IAAA,iDACwC,EAAoB,QAAS,EAAiB,cACxF,KAD0C,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAAS,IAAA,gBAAQ,EAAC,OAAO,CAAC,CACxF;AAHD,CAGC,EAED,UAAC,EAAqB;QAApB,mBAAmB,yBAAA;IACrB,OAAA,mBAAmB,KAAK,QAAQ,QAChC,uBAAG,4IAAA,8CACqC,EAAoB,QAAS,EAAiB,cACrF,KADuC,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,EAAS,IAAA,gBAAQ,EAAC,OAAO,CAAC,CACrF;AAHD,CAGC,EAIC,UAAC,EAAa;QAAZ,WAAW,iBAAA;IACb,OAAA,WAAW,QACX,uBAAG,+GAAA,8BACmB,EAAoB,WACzC,KADqB,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,CACzC;AAHD,CAGC,EAOH,UAAC,EAAO;QAAN,KAAK,WAAA;IACP,OAAA,KAAK,KAAK,SAAS,QACnB,uBAAG,sMAAA,8GAKqB,EAAsB,kBAE7C,KAFuB,IAAA,gBAAQ,EAAC,QAAQ,EAAE,EAAE,CAAC,CAE7C;AARD,CAQC,CACJ,CAAC;AAEF,IAAM,iBAAiB,GAAG,2BAAM,CAAC,EAAE,0LAAsB,+CAE5C,EAAoC,sEAMhD,KANY,UAAC,EAAW;QAAV,SAAS,eAAA;IAAM,OAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAAnB,CAAmB,CAMhD,CAAC;AAEF,IAAM,UAAU,GAAG,IAAA,2BAAM,EAAC,qBAAS,CAAC,qMAAA,gIAWnC,IAAA,CAAC;AAEF,IAAM,WAAW,GAAG,IAAA,2BAAM,EAAC,kBAAU,CAAC,yFAAA,aAC3B,EAAuB,KACjC,KADU,IAAA,gBAAQ,EAAC,QAAQ,EAAE,GAAG,CAAC,CACjC,CAAC;AA+CF,IAAM,QAAQ,GAAG,IAAA,kBAAU,EACzB,UACE,EAWgB,EAChB,YAAsC;IAXpC,IAAA,gBAAY,EAAZ,QAAQ,mBAAG,CAAC,KAAA,EACZ,UAAU,
|
1
|
+
{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
@@ -376,7 +376,7 @@ To compare information, for example how many products are completed versus how m
|
|
376
376
|
<Canvas>
|
377
377
|
<Story name="Complex table">
|
378
378
|
{args => {
|
379
|
-
const [selectedLines, setSelectedLines] = useState([2]);
|
379
|
+
const [selectedLines, setSelectedLines] = useState([2, 3]);
|
380
380
|
const handleToggleSelected = lineId => {
|
381
381
|
if (selectedLines.indexOf(lineId) === -1) {
|
382
382
|
setSelectedLines([...selectedLines, lineId]);
|
@@ -410,7 +410,7 @@ To compare information, for example how many products are completed versus how m
|
|
410
410
|
key={row.id}
|
411
411
|
onClick={() => handleClick(row.id)}
|
412
412
|
onSelectToggle={() => handleToggleSelected(row.id)}
|
413
|
-
isSelected={selectedLines.indexOf(row.id) !== -1}
|
413
|
+
isSelected={selectedLines.indexOf(row.id) !== -1 ? (row.id == 3 ? 'mixed' : true) : false}
|
414
414
|
>
|
415
415
|
<Table.Cell>
|
416
416
|
<Image src={row.image} alt="The alt" />
|
@@ -132,7 +132,7 @@ type TableRowProps = Override<
|
|
132
132
|
/**
|
133
133
|
* Define if the row is selected, required when table is selectable
|
134
134
|
*/
|
135
|
-
isSelected?: boolean;
|
135
|
+
isSelected?: boolean | 'mixed';
|
136
136
|
|
137
137
|
/**
|
138
138
|
* Define if the row has a warning
|
@@ -165,7 +165,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
|
|
165
165
|
(
|
166
166
|
{
|
167
167
|
rowIndex = 0,
|
168
|
-
isSelected,
|
168
|
+
isSelected = false,
|
169
169
|
level,
|
170
170
|
onSelectToggle,
|
171
171
|
onClick,
|
@@ -228,7 +228,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
|
|
228
228
|
onClick={handleCheckboxChange}
|
229
229
|
>
|
230
230
|
<Checkbox
|
231
|
-
checked={
|
231
|
+
checked={isSelected}
|
232
232
|
onChange={(_value, e) => {
|
233
233
|
handleCheckboxChange(e);
|
234
234
|
}}
|
@@ -75,27 +75,6 @@ test('it throws when onSelectToggle is not given on selectable table', () => {
|
|
75
75
|
mockConsole.mockRestore();
|
76
76
|
});
|
77
77
|
|
78
|
-
test('it throws when isSelected is not given on selectable table', () => {
|
79
|
-
const mockConsole = jest.spyOn(console, 'error').mockImplementation();
|
80
|
-
|
81
|
-
const onSelectToggle = jest.fn();
|
82
|
-
const cellRender = () =>
|
83
|
-
render(
|
84
|
-
<Table isSelectable={true}>
|
85
|
-
<Table.Body>
|
86
|
-
<Table.Row onSelectToggle={onSelectToggle}>
|
87
|
-
<Table.Cell>A value</Table.Cell>
|
88
|
-
<Table.Cell>Another value</Table.Cell>
|
89
|
-
</Table.Row>
|
90
|
-
</Table.Body>
|
91
|
-
</Table>
|
92
|
-
);
|
93
|
-
|
94
|
-
expect(cellRender).toThrowError();
|
95
|
-
|
96
|
-
mockConsole.mockRestore();
|
97
|
-
});
|
98
|
-
|
99
78
|
test('Table.Row supports forwardRef', () => {
|
100
79
|
const ref = {current: null};
|
101
80
|
render(
|