Skip to content

Commit

Permalink
feat(HorizontalCellShowMore): remove compensateLastCellIndent prop
Browse files Browse the repository at this point in the history
  • Loading branch information
BlackySoul committed Sep 16, 2024
1 parent 6a1e0ba commit 1688838
Show file tree
Hide file tree
Showing 8 changed files with 107 additions and 28 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { HorizontalCellShowMore, HorizontalScroll } from '@vkontakte/vkui';
import React from 'react';
import '@vkontakte/vkui/dist/vkui.css';

const App = () => {
return (
<React.Fragment>
<HorizontalScroll inline>
<div />
<div />
<div />
<HorizontalCellShowMore onClick={() => {}} compensateLastCellIndent size="m" height={88} />
</HorizontalScroll>
<HorizontalScroll inline>
<div />
<div />
<div />
<HorizontalCellShowMore onClick={() => {}} compensateLastCellIndent={true} size="m" height={88} />
</HorizontalScroll>
</React.Fragment>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`horizontal-cell-show-more transforms correctly 1`] = `
"import { HorizontalCell, HorizontalCellShowMore, HorizontalScroll } from '@vkontakte/vkui';
import React from 'react';
import '@vkontakte/vkui/dist/vkui.css';
const App = () => {
return (
(<React.Fragment>
<HorizontalScroll inline>
<div />
<div />
<div />
<HorizontalCellShowMore onClick={() => {}} size="m" height={88} />
</HorizontalScroll>
<HorizontalScroll inline>
<div />
<div />
<div />
<HorizontalCellShowMore onClick={() => {}} size="m" height={88} />
</HorizontalScroll>
</React.Fragment>)
);
};"
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
jest.autoMockOff();

import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper';

const name = 'horizontal-cell-show-more';
const fixtures = ['basic'] as const;

describe(name, () => {
fixtures.forEach((test) =>
defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`),
);
});
47 changes: 47 additions & 0 deletions packages/codemods/src/transforms/v7/horizontal-cell-show-more.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { API, FileInfo } from 'jscodeshift';
import { getImportInfo } from '../../codemod-helpers';
import { report } from '../../report';
import { JSCodeShiftOptions } from '../../types';

export const parser = 'tsx';

const componentName = 'HorizontalCellShowMore';
export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) {
const { alias } = options;
const j = api.jscodeshift;
const source = j(file.source);
const { localName } = getImportInfo(j, file, componentName, alias);

if (!localName) {
return source.toSource();
}

source
.find(j.JSXOpeningElement)
.filter(
(path) => path.value.name.type === 'JSXIdentifier' && path.value.name.name === localName,
)
.find(j.JSXAttribute)
.filter((attribute) => attribute.node.name.name === 'compensateLastCellIndent')
.forEach((attribute) => {
const node = attribute.node;

if (!node.value) {
j(attribute).remove();
} else if (
node.value.type === 'JSXExpressionContainer' &&
node.value.expression.type === 'BooleanLiteral'
) {
if (node.value.expression.value) {
j(attribute).remove();
} else {
report(
api,
`Manual changes required for ${componentName}'s "compensateLastCellIndent" prop. You might not need it anymore.`,
);
}
}
});

return source.toSource();
}
1 change: 0 additions & 1 deletion packages/codemods/src/transforms/v7/horizontal-scroll.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
.find(j.JSXAttribute)
.filter((attribute) => attribute.node.name.name === 'inline')
.forEach((attribute) => {
console.log(attribute.node);
const node = attribute.node;

if (!node.value) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,6 @@
display: flex;
}

.HorizontalCellShowMore--compensate-last-cell-indent {
/* Компенсация бокового отступа, заданного в последнем HorizontalCell:last-child::after */
margin-inline-start: calc(-1 * var(--vkui_internal--side_cell_gap));
}

.HorizontalCellShowMore--centered {
margin-block: auto;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,6 @@ export interface HorizontalCellShowMoreProps
* По умолчанию для `size='s'` содержит текст `Все`, для других размеров `Показать все`.
* */
children?: SubheadProps['children'];
/**
* Позволяет компенсировать особый правый отступ у предшествующего элементa `HorizontalCell`,
* в том случае, если тот элемент последний в родителе.
* Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.
*/
compensateLastCellIndent?: boolean;
/**
* Выравнивание по центру относительно родителя
*/
Expand All @@ -54,7 +48,6 @@ export const HorizontalCellShowMore = ({
style,
getRef,
getRootRef,
compensateLastCellIndent,
height,
size = 's',
children = size === 's' ? 'Все' : 'Показать все',
Expand All @@ -66,7 +59,6 @@ export const HorizontalCellShowMore = ({
style={style}
className={classNames(
styles['HorizontalCellShowMore'],
compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],
centered && styles['HorizontalCellShowMore--centered'],
sizeClassNames[size],
className,
Expand Down
14 changes: 0 additions & 14 deletions packages/vkui/src/components/HorizontalScroll/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -177,17 +177,3 @@ const RandomUsers = () => {
<HorizontalCellShowMore />
</HorizontalScroll>
```

Или как последний элемент `HorizontalScroll`, но тогда надо компенсировать отступы высталяемые
`HorizontalCell` с помощью свойства `compensateLastCellIndent`.

```tsx static
<HorizontalScroll>
<ListWrapper>
<HorizontalCell>1</HorizontalCell>
<HorizontalCell>2</HorizontalCell>
<HorizontalCell>3</HorizontalCell>
</ListWrapper>
<HorizontalCellShowMore compensateLastCellIndent />
</HorizontalScroll>
```

0 comments on commit 1688838

Please sign in to comment.