diff --git a/src/components/skeletonView/index.tsx b/src/components/skeletonView/index.tsx index 2a16f7d19f..b1e92d3f77 100644 --- a/src/components/skeletonView/index.tsx +++ b/src/components/skeletonView/index.tsx @@ -67,12 +67,6 @@ export interface SkeletonViewProps extends AccessibilityProps, AlignmentModifier * Custom value of any type to pass on to SkeletonView and receive back in the renderContent callback. */ customValue?: any; - /** - * @deprecated - * - Please use customValue instead. - * - Custom value of any type to pass on to SkeletonView and receive back in the renderContent callback. - */ - contentData?: any; /** * The type of the skeleton view. * Types: LIST_ITEM and TEXT_CONTENT (using SkeletonView.templates.###) @@ -94,32 +88,6 @@ export interface SkeletonViewProps extends AccessibilityProps, AlignmentModifier * This is needed because the `key` prop is not accessible. */ timesKey?: string; - /** - * @deprecated - * - Pass via listProps instead. - * - The size of the skeleton view. - * - Types: SMALL and LARGE (using SkeletonView.sizes.###) - */ - size?: Size; - /** - * @deprecated - * - Pass via listProps instead. - * - Add content to the skeleton. - * - Types: AVATAR and THUMBNAIL (using SkeletonView.contentTypes.###) - */ - contentType?: ContentType; - /** - * @deprecated - * - Pass via listProps instead. - * - Whether to hide the list item template separator - */ - hideSeparator?: boolean; - /** - * @deprecated - * - Pass via listProps instead. - * - Whether to show the last list item template separator - */ - showLastSeparator?: boolean; /** * The height of the skeleton view */ @@ -266,41 +234,22 @@ class SkeletonView extends Component { }; }; - get size() { - const {listProps, size} = this.props; - return listProps?.size || size; - } - get contentSize() { - return this.size === Size.LARGE ? 48 : 40; - } - - get contentType() { - const {listProps, contentType} = this.props; - return listProps?.contentType || contentType; - } - - get hideSeparator() { - const {listProps, hideSeparator} = this.props; - return listProps?.hideSeparator || hideSeparator; - } - - get showLastSeparator() { - const {listProps, showLastSeparator} = this.props; - return listProps?.showLastSeparator || showLastSeparator; + const {listProps} = this.props; + return listProps?.size === Size.LARGE ? 48 : 40; } renderListItemLeftContent = () => { - const contentType = this.contentType; + const {listProps} = this.props; + const contentType = listProps?.contentType; if (contentType) { - const contentSize = this.contentSize; const circleOverride = contentType === ContentType.AVATAR; - const style = {marginRight: this.size === Size.LARGE ? 16 : 14}; + const style = {marginRight: listProps?.size === Size.LARGE ? 16 : 14}; return ( ); } @@ -319,15 +268,13 @@ class SkeletonView extends Component { renderListItemContentStrips = () => { const {listProps} = this.props; - const contentType = this.contentType; - const size = this.size; - const hideSeparator = this.hideSeparator; - const customLengths = contentType === ContentType.AVATAR ? [undefined, 50] : undefined; + const size = listProps?.size; + const customLengths = listProps?.contentType === ContentType.AVATAR ? [undefined, 50] : undefined; const height = size === Size.LARGE ? 95 : 75; const lengths = _.merge([90, 180, 160], customLengths); const topMargins = [0, size === Size.LARGE ? 16 : 8, 8]; return ( - + {this.renderStrip(true, lengths[0], topMargins[0])} {this.renderStrip(false, lengths[1], topMargins[1])} @@ -391,7 +338,7 @@ class SkeletonView extends Component { renderWithFading = (skeleton: any) => { const {isAnimating} = this.state; - const {children, renderContent, customValue, contentData} = this.props; + const {children, renderContent, customValue} = this.props; if (isAnimating) { return ( @@ -405,8 +352,7 @@ class SkeletonView extends Component { ); } else if (_.isFunction(renderContent)) { - const _customValue = customValue || contentData; - return renderContent(_customValue); + return renderContent(customValue); } else { return children; } @@ -441,13 +387,8 @@ class SkeletonView extends Component { renderContent, showContent, customValue, - contentData, template, listProps, - size, - contentType, - hideSeparator, - showLastSeparator, height, width, colors, @@ -462,13 +403,8 @@ class SkeletonView extends Component { showContent, renderContent, customValue, - contentData, template, listProps, - size, - contentType, - hideSeparator, - showLastSeparator, height, width, colors, @@ -483,13 +419,17 @@ class SkeletonView extends Component { {_.times(times, index => { const key = timesKey ? `${timesKey}-${index}` : `${index}`; + const _listProps = { + ...listProps, + hideSeparator: listProps?.hideSeparator || (!listProps?.showLastSeparator && index === times - 1) + }; return ( );