diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/horizontal-cell-show-more/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/horizontal-cell-show-more/basic.input.tsx new file mode 100644 index 00000000000..fe565e5c6bb --- /dev/null +++ b/packages/codemods/src/transforms/v7/__testfixtures__/horizontal-cell-show-more/basic.input.tsx @@ -0,0 +1,22 @@ +import { HorizontalCellShowMore, HorizontalScroll } from '@vkontakte/vkui'; +import React from 'react'; +import '@vkontakte/vkui/dist/vkui.css'; + +const App = () => { + return ( + + +
+
+
+ {}} compensateLastCellIndent size="m" height={88} /> + + +
+
+
+ {}} compensateLastCellIndent={true} size="m" height={88} /> + + + ); +}; diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/horizontal-cell-show-more.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/horizontal-cell-show-more.ts.snap new file mode 100644 index 00000000000..67b0e0f6b4e --- /dev/null +++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/horizontal-cell-show-more.ts.snap @@ -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 ( + ( + +
+
+
+ {}} size="m" height={88} /> + + +
+
+
+ {}} size="m" height={88} /> + + ) + ); +};" +`; diff --git a/packages/codemods/src/transforms/v7/__tests__/horizontal-cell-show-more.ts b/packages/codemods/src/transforms/v7/__tests__/horizontal-cell-show-more.ts new file mode 100644 index 00000000000..c073991811e --- /dev/null +++ b/packages/codemods/src/transforms/v7/__tests__/horizontal-cell-show-more.ts @@ -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}`), + ); +}); diff --git a/packages/codemods/src/transforms/v7/horizontal-cell-show-more.ts b/packages/codemods/src/transforms/v7/horizontal-cell-show-more.ts new file mode 100644 index 00000000000..d060813432d --- /dev/null +++ b/packages/codemods/src/transforms/v7/horizontal-cell-show-more.ts @@ -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(); +} diff --git a/packages/codemods/src/transforms/v7/horizontal-scroll.ts b/packages/codemods/src/transforms/v7/horizontal-scroll.ts index 9d6b9d6b895..79805e64f0a 100644 --- a/packages/codemods/src/transforms/v7/horizontal-scroll.ts +++ b/packages/codemods/src/transforms/v7/horizontal-scroll.ts @@ -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) { diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css index a741ec9f9b7..c0b35ce20b7 100644 --- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css +++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css @@ -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; } diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx index a224e4c07fc..ef455a0d98c 100644 --- a/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx +++ b/packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx @@ -37,12 +37,6 @@ export interface HorizontalCellShowMoreProps * По умолчанию для `size='s'` содержит текст `Все`, для других размеров `Показать все`. * */ children?: SubheadProps['children']; - /** - * Позволяет компенсировать особый правый отступ у предшествующего элементa `HorizontalCell`, - * в том случае, если тот элемент последний в родителе. - * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно. - */ - compensateLastCellIndent?: boolean; /** * Выравнивание по центру относительно родителя */ @@ -54,7 +48,6 @@ export const HorizontalCellShowMore = ({ style, getRef, getRootRef, - compensateLastCellIndent, height, size = 's', children = size === 's' ? 'Все' : 'Показать все', @@ -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, diff --git a/packages/vkui/src/components/HorizontalScroll/Readme.md b/packages/vkui/src/components/HorizontalScroll/Readme.md index 61f7fb67a42..04964fb4759 100644 --- a/packages/vkui/src/components/HorizontalScroll/Readme.md +++ b/packages/vkui/src/components/HorizontalScroll/Readme.md @@ -177,17 +177,3 @@ const RandomUsers = () => { ``` - -Или как последний элемент `HorizontalScroll`, но тогда надо компенсировать отступы высталяемые -`HorizontalCell` с помощью свойства `compensateLastCellIndent`. - -```tsx static - - - 1 - 2 - 3 - - - -```