/
with-rtl.js
43 lines (36 loc) · 923 Bytes
/
with-rtl.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/**
* External dependencies
*/
import { forceReRender } from '@storybook/react';
/**
* WordPress dependencies
*/
import { addFilter, removeFilter } from '@wordpress/hooks';
import { useEffect, useRef } from '@wordpress/element';
export const WithRTL = ( Story, context ) => {
const ref = useRef();
useEffect( () => {
// Override the return value of i18n.isRTL()
addFilter(
'i18n.gettext_with_context',
'storybook',
( translation, text, _context ) => {
if ( text === 'ltr' && _context === 'text direction' ) {
return context.globals.direction;
}
return translation;
}
);
ref.current.ownerDocument.documentElement.setAttribute(
'dir',
context.globals.direction
);
forceReRender();
return () => removeFilter( 'i18n.gettext_with_context', 'storybook' );
}, [ context.globals.direction ] );
return (
<div ref={ ref }>
<Story { ...context } />
</div>
);
};