Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow null override for default component #799

Merged
merged 4 commits into from
Nov 1, 2020
Merged

Allow null override for default component #799

merged 4 commits into from
Nov 1, 2020

Conversation

dhaigh
Copy link
Contributor

@dhaigh dhaigh commented Oct 31, 2020

the docs state that render={null} or component={null} should override the defaultComponent prop. (https://github.com/lingui/js-lingui/blame/v3.0.0/docs/ref/react.rst#L88)

suppose I had this

const Span = ({ children }) => {
    return <span>{children}</span>;
};

const App = () => {
    return (
        <I18nProvider i18n={i18n} defaultComponent={Span}>
            <Trans id='Hello' render={null} />
        </I18nProvider>
    );
};

current behaviour: <App /> === <span>Hello</span>
expected behaviour:<App /> === 'Hello'

@vercel
Copy link

vercel bot commented Oct 31, 2020

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/lingui-js/js-lingui/llimgu2ze
✅ Preview: https://js-lingui-git-main.lingui-js.vercel.app

@codecov
Copy link

codecov bot commented Oct 31, 2020

Codecov Report

Merging #799 into main will decrease coverage by 0.13%.
The diff coverage is 0.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##             main     #799      +/-   ##
==========================================
- Coverage   84.33%   84.20%   -0.14%     
==========================================
  Files          39       39              
  Lines        1264     1266       +2     
  Branches      332      333       +1     
==========================================
  Hits         1066     1066              
- Misses        116      117       +1     
- Partials       82       83       +1     
Impacted Files Coverage Δ
packages/react/src/Trans.tsx 71.42% <0.00%> (-5.50%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update de7d07e...52f5991. Read the comment docs.

@tricoder42
Copy link
Contributor

Hey @dhaigh, thanks for the bug fix! You're right. Could you also please provide a test? Just add relevant test cases to rendering section in Trans.test.tsx:

describe("rendering", function () {
it("should render just a text without wrapping element", function () {
const txt = html(<Trans id="Just a text" />)
expect(txt).toEqual("Just a text")
})
it("should render custom element", function () {
const element = html(<Trans render={({ id, translation }) => <h1 id={id}>{translation}</h1>} id="Headline" />)
expect(element).toEqual(`<h1 id="Headline">Headline</h1>`)
})
it("should render function", function () {
const spy = jest.fn()
text(
<Trans
id="ID"
message="Default"
render={(props) => {
spy(props)
return null
}}
/>
)
expect(spy).toHaveBeenCalledWith({
id: "ID",
message: "Default",
translation: "Translation",
})
})
it("should take defaultComponent prop with a custom component", function () {
const ComponentFC: React.FunctionComponent = (props: { children?: React.ReactNode }) => {
return (<div>{props.children}</div>)
}
const span = render(
<I18nProvider i18n={i18n} defaultComponent={ComponentFC}>
<Trans id="Just a text" />
</I18nProvider>
).container.innerHTML
expect(span).toEqual(`<div>Just a text</div>`)
})
})
describe("component prop rendering", function() {
it("should render class component as simple prop", function () {
class ClassComponent extends React.Component {
render() {
return (
<div>Headline</div>
)
}
}
const element = html(<Trans component={ClassComponent} id="Headline" />)
expect(element).toEqual("<div>Headline</div>")
})
it("should render functional component as simple prop", function () {
const ComponentFC: React.FunctionComponent = (props: { id: any, children?: React.ReactNode }) => {
const [state] = React.useState("value")
return <div id={props.id}>{state}</div>
}
const element = html(<Trans component={ComponentFC} id="Headline" />)
expect(element).toEqual(`<div>value</div>`)
})
})

@dhaigh
Copy link
Contributor Author

dhaigh commented Oct 31, 2020

@tricoder42 i had a go, let me know what you think :)

Copy link
Contributor

@tricoder42 tricoder42 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pretty good!

@tricoder42 tricoder42 merged commit 1327e81 into lingui:main Nov 1, 2020
@tricoder42
Copy link
Contributor

Released in 3.0.1. Thank you for your contribution! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants