Skip to content

Commit

Permalink
fix: revert list and object widget changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@geotrev
geotrev committed May 8, 2024
1 parent aac265f commit 4f60329
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 64 deletions.
56 changes: 31 additions & 25 deletions packages/decap-cms-widget-list/src/ListControl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ const NestedObjectLabel = styled.div`
`;

const styleStrings = {
collapsedObjectControl: `
display: none;
`,
objectWidgetTopBarContainer: `
padding: ${lengths.objectWidgetTopBarContainerPadding};
`,
Expand Down Expand Up @@ -619,31 +622,34 @@ export default class ListControl extends React.Component {
<NestedObjectLabel collapsed={collapsed} error={hasError}>
{this.objectLabel(item)}
</NestedObjectLabel>
{!collapsed && (
<ClassNames>
{({ cx }) => (
<ObjectControl
classNameWrapper={cx(classNameWrapper)}
value={item}
field={field}
onChangeObject={this.handleChangeFor(index)}
editorControl={editorControl}
resolveWidget={resolveWidget}
metadata={metadata}
forList
onValidateObject={onValidateObject}
clearFieldErrors={clearFieldErrors}
fieldsErrors={fieldsErrors}
ref={this.processControlRef}
controlRef={controlRef}
validationKey={key}
data-testid={`object-control-${key}`}
hasError={hasError}
parentIds={[...parentIds, forID, key]}
/>
)}
</ClassNames>
)}
<ClassNames>
{({ css, cx }) => (
<ObjectControl
classNameWrapper={cx(classNameWrapper, {
[css`
${styleStrings.collapsedObjectControl};
`]: collapsed,
})}
value={item}
field={field}
onChangeObject={this.handleChangeFor(index)}
editorControl={editorControl}
resolveWidget={resolveWidget}
metadata={metadata}
forList
onValidateObject={onValidateObject}
clearFieldErrors={clearFieldErrors}
fieldsErrors={fieldsErrors}
ref={this.processControlRef}
controlRef={controlRef}
validationKey={key}
collapsed={collapsed}
data-testid={`object-control-${key}`}
hasError={hasError}
parentIds={[...parentIds, forID, key]}
/>
)}
</ClassNames>
</SortableListItem>
);
};
Expand Down
75 changes: 37 additions & 38 deletions packages/decap-cms-widget-list/src/__tests__/ListControl.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ describe('ListControl', () => {
return id++;
});
});

it('should render empty list', () => {
const field = fromJS({ name: 'list', label: 'List' });
const { asFragment } = render(<ListControl {...props} field={field} />);
Expand Down Expand Up @@ -97,7 +96,7 @@ describe('ListControl', () => {
fields: [{ name: 'title', widget: 'string', label: 'Title' }],
},
});
const { asFragment, getByTestId, queryByTestId } = render(
const { asFragment, getByTestId } = render(
<ListControl
{...props}
field={field}
Expand All @@ -108,8 +107,8 @@ describe('ListControl', () => {
expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');

expect(queryByTestId('object-control-0')).toBeNull();
expect(queryByTestId('object-control-1')).toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');

expect(asFragment()).toMatchSnapshot();
});
Expand All @@ -126,7 +125,7 @@ describe('ListControl', () => {
fields: [{ name: 'title', widget: 'string', label: 'Title' }],
},
});
const { asFragment, getByTestId, queryByTestId } = render(
const { asFragment, getByTestId } = render(
<ListControl
{...props}
field={field}
Expand All @@ -137,8 +136,8 @@ describe('ListControl', () => {
expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');

expect(queryByTestId('object-control-0')).not.toBeNull();
expect(queryByTestId('object-control-1')).not.toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');

expect(asFragment()).toMatchSnapshot();
});
Expand All @@ -155,7 +154,7 @@ describe('ListControl', () => {
fields: [{ name: 'title', widget: 'string', label: 'Title' }],
},
});
const { getByTestId, queryByTestId } = render(
const { getByTestId } = render(
<ListControl
{...props}
field={field}
Expand All @@ -166,16 +165,16 @@ describe('ListControl', () => {
expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');

expect(queryByTestId('object-control-0')).not.toBeNull();
expect(queryByTestId('object-control-1')).not.toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');

fireEvent.click(getByTestId('expand-button'));

expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');

expect(queryByTestId('object-control-0')).toBeNull();
expect(queryByTestId('object-control-1')).toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');
});

it('should collapse a single item on collapse item click', () => {
Expand All @@ -190,7 +189,7 @@ describe('ListControl', () => {
fields: [{ name: 'title', widget: 'string', label: 'Title' }],
},
});
const { getByTestId, queryByTestId } = render(
const { getByTestId } = render(
<ListControl
{...props}
field={field}
Expand All @@ -201,16 +200,16 @@ describe('ListControl', () => {
expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');

expect(queryByTestId('object-control-0')).not.toBeNull();
expect(queryByTestId('object-control-1')).not.toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');

fireEvent.click(getByTestId('styled-list-item-top-bar-0'));

expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');

expect(queryByTestId('object-control-0')).toBeNull();
expect(queryByTestId('object-control-1')).not.toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');
});

it('should expand all items on top bar expand click', () => {
Expand All @@ -225,7 +224,7 @@ describe('ListControl', () => {
fields: [{ name: 'title', widget: 'string', label: 'Title' }],
},
});
const { getByTestId, queryByTestId } = render(
const { getByTestId } = render(
<ListControl
{...props}
field={field}
Expand All @@ -236,16 +235,16 @@ describe('ListControl', () => {
expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');

expect(queryByTestId('object-control-0')).toBeNull();
expect(queryByTestId('object-control-1')).toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');

fireEvent.click(getByTestId('expand-button'));

expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');

expect(queryByTestId('object-control-0')).not.toBeNull();
expect(queryByTestId('object-control-1')).not.toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');
});

it('should expand a single item on expand item click', () => {
Expand All @@ -260,7 +259,7 @@ describe('ListControl', () => {
fields: [{ name: 'title', widget: 'string', label: 'Title' }],
},
});
const { getByTestId, queryByTestId } = render(
const { getByTestId } = render(
<ListControl
{...props}
field={field}
Expand All @@ -271,16 +270,16 @@ describe('ListControl', () => {
expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');

expect(queryByTestId('object-control-0')).toBeNull();
expect(queryByTestId('object-control-1')).toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');

fireEvent.click(getByTestId('styled-list-item-top-bar-0'));

expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');

expect(queryByTestId('object-control-0')).not.toBeNull();
expect(queryByTestId('object-control-1')).toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');
});

it('should use widget name when no summary or label are configured for mixed types', () => {
Expand Down Expand Up @@ -470,7 +469,7 @@ describe('ListControl', () => {
label: 'List',
fields: [{ label: 'String', name: 'string', widget: 'string' }],
});
const { asFragment, getByTestId, queryByTestId } = render(
const { asFragment, getByTestId } = render(
<ListControl
{...props}
field={field}
Expand All @@ -481,8 +480,8 @@ describe('ListControl', () => {
expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');

expect(queryByTestId('object-control-0')).toBeNull();
expect(queryByTestId('object-control-0')).toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');

expect(asFragment()).toMatchSnapshot();
});
Expand All @@ -494,7 +493,7 @@ describe('ListControl', () => {
collapsed: false,
fields: [{ label: 'String', name: 'string', widget: 'string' }],
});
const { asFragment, getByTestId, queryByTestId } = render(
const { asFragment, getByTestId } = render(
<ListControl
{...props}
field={field}
Expand All @@ -505,8 +504,8 @@ describe('ListControl', () => {
expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');

expect(queryByTestId('object-control-0')).not.toBeNull();
expect(queryByTestId('object-control-1')).not.toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');

expect(asFragment()).toMatchSnapshot();
});
Expand Down Expand Up @@ -539,8 +538,8 @@ describe('ListControl', () => {
expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');

expect(queryByTestId('object-control-0')).toBeNull();
expect(queryByTestId('object-control-1')).toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');
});

it('should render list with fields with collapse = "false" and default minimize_collapsed = "true"', () => {
Expand All @@ -562,8 +561,8 @@ describe('ListControl', () => {
expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');

expect(queryByTestId('object-control-0')).not.toBeNull();
expect(queryByTestId('object-control-1')).not.toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');

expect(asFragment()).toMatchSnapshot();

Expand Down Expand Up @@ -596,7 +595,7 @@ describe('ListControl', () => {
rerender(<ListControl {...props} field={field} value={fromJS([{}])} />);

expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
expect(queryByTestId('object-control-0')).not.toBeNull();
expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');

expect(asFragment()).toMatchSnapshot();
});
Expand Down
Loading

0 comments on commit 4f60329

Please sign in to comment.