Skip to content

Commit

Permalink
Fix lint and prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
wildan-m committed Apr 20, 2024
1 parent dcccca4 commit 4fe6841
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 37 deletions.
4 changes: 2 additions & 2 deletions src/components/InlineCodeBlock/index.native.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React from 'react';
import useThemeStyles from '@hooks/useThemeStyles';
import renderEmojisAsTextComponents from './renderEmojisAsTextComponents';
import type InlineCodeBlockProps from './types';
import type {TTextOrTPhrasing} from './types';
import WrappedText from './WrappedText';
import { renderEmojisAsTextComponents } from './renderEmojisAsTextComponents';

function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, defaultRendererProps, textStyle, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
const styles = useThemeStyles();
const { elements, hasLargeStyle } = renderEmojisAsTextComponents(defaultRendererProps);
const {elements, hasLargeStyle} = renderEmojisAsTextComponents(defaultRendererProps, styles);

return (
<TDefaultRenderer
Expand Down
20 changes: 9 additions & 11 deletions src/components/InlineCodeBlock/index.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,26 @@
import React from 'react';
import { StyleSheet } from 'react-native';
import {StyleSheet} from 'react-native';
import Text from '@components/Text';
import type InlineCodeBlockProps from './types';
import type { TTextOrTPhrasing } from './types';
import useThemeStyles from '@hooks/useThemeStyles';
import { renderEmojisAsTextComponents } from './renderEmojisAsTextComponents';
import renderEmojisAsTextComponents from './renderEmojisAsTextComponents';
import type InlineCodeBlockProps from './types';
import type {TTextOrTPhrasing} from './types';

function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({ TDefaultRenderer, textStyle, defaultRendererProps, boxModelStyle }: InlineCodeBlockProps<TComponent>) {
function InlineCodeBlock<TComponent extends TTextOrTPhrasing>({TDefaultRenderer, textStyle, defaultRendererProps, boxModelStyle}: InlineCodeBlockProps<TComponent>) {
const styles = useThemeStyles();
const flattenTextStyle = StyleSheet.flatten(textStyle);
const { textDecorationLine, ...textStyles } = flattenTextStyle;
const { elements, hasLargeStyle } = renderEmojisAsTextComponents(defaultRendererProps);
const {textDecorationLine, ...textStyles} = flattenTextStyle;
const {elements, hasLargeStyle} = renderEmojisAsTextComponents(defaultRendererProps, styles);

return (
<TDefaultRenderer
// eslint-disable-next-line react/jsx-props-no-spreading
{...defaultRendererProps}
>
<Text style={[boxModelStyle, textStyles, hasLargeStyle ? styles.onlyEmojisText : {}]}>
{elements}
</Text>
<Text style={[boxModelStyle, textStyles, hasLargeStyle ? styles.onlyEmojisText : {}]}>{elements}</Text>
</TDefaultRenderer>
);
}
InlineCodeBlock.displayName = 'InlineCodeBlock';

export default InlineCodeBlock;
export default InlineCodeBlock;
60 changes: 37 additions & 23 deletions src/components/InlineCodeBlock/renderEmojisAsTextComponents.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,46 @@
import React from 'react';
import type {TDefaultRendererProps} from 'react-native-render-html';
import Text from '@components/Text';
import type { TTextOrTPhrasing } from './types';
import { TDefaultRendererProps } from 'react-native-render-html';
import useThemeStyles from '@hooks/useThemeStyles';


export function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>) {
const elements: (string | React.JSX.Element)[] = [];
const styles = useThemeStyles();
import type {ThemeStyles} from '@styles/index';
import type {TTextOrTPhrasing} from './types';

function renderEmojisAsTextComponents(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>, styles: ThemeStyles) {
const elements: Array<string | React.JSX.Element> = [];
let hasLargeStyle = false;

if ('data' in defaultRendererProps.tnode) {
elements.push(defaultRendererProps.tnode.data);
} else if (defaultRendererProps.tnode.children) {
defaultRendererProps.tnode.children.forEach((child) => {
if ('data' in child) {
if (child.tagName === 'emoji') {
const largeStyle = 'islarge' in child.attributes ? styles.onlyEmojisText : {};
if (Object.keys(largeStyle).length > 0) {
hasLargeStyle = true;
}
elements.push(<Text style={[largeStyle, styles.emojiDefault]} key={child.data}>{child.data}</Text>);
} else {
elements.push(child.data);
}
}
});
return {elements, hasLargeStyle};
}

if (!defaultRendererProps.tnode.children) {
return {elements, hasLargeStyle};
}

return { elements, hasLargeStyle };
defaultRendererProps.tnode.children.forEach((child) => {
if (!('data' in child)) {
return;
}

if (child.tagName === 'emoji') {
const largeStyle = 'islarge' in child.attributes ? styles.onlyEmojisText : {};
if (Object.keys(largeStyle).length > 0) {
hasLargeStyle = true;
}
elements.push(
<Text
style={[largeStyle, styles.emojiDefault]}
key={child.data}
>
{child.data}
</Text>,
);
} else {
elements.push(child.data);
}
});

return {elements, hasLargeStyle};
}

export default renderEmojisAsTextComponents;
2 changes: 1 addition & 1 deletion src/styles/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -283,8 +283,8 @@ const styles = (theme: ThemeColors) =>
emojiDefault: {
fontStyle: 'normal',
fontWeight: 'normal',
textDecorationLine: 'none',
...display.dInlineFlex,
textDecorationLine:'none'
},

emojiSuggestionsEmoji: {
Expand Down

0 comments on commit 4fe6841

Please sign in to comment.