feat(bs5): Convert Dropdown & DropdownMenu to RTL

'left' & 'right' to 'start' & 'end'
reactstrap · Oct 27, 2021 · 7417984 · 7417984
1 parent 65bf0f0
commit 7417984
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 34 deletions.
diff --git a/docs/lib/Components/ButtonDropdownPage.js b/docs/lib/Components/ButtonDropdownPage.js
@@ -48,7 +48,7 @@ export default class ButtonDropdownPage extends React.Component {
           <PrismCode className="language-jsx">
 {`ButtonDropdown.propTypes = {
   disabled: PropTypes.bool,
-  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+  direction: PropTypes.oneOf(['up', 'down', 'start', 'end']),
   group: PropTypes.bool,
   isOpen: PropTypes.bool,
   tag: PropTypes.string,
@@ -206,7 +206,7 @@ export default function Example () => {
               </DropdownMenu>
             </ButtonDropdown>
             {' '}
-            <ButtonDropdown direction="left" isOpen={this.state.btnDropleft} toggle={() => { this.setState({ btnDropleft: !this.state.btnDropleft }); }}>
+            <ButtonDropdown direction="start" isOpen={this.state.btnDropleft} toggle={() => { this.setState({ btnDropleft: !this.state.btnDropleft }); }}>
               <DropdownToggle caret>
                 Dropleft
               </DropdownToggle>
@@ -216,7 +216,7 @@ export default function Example () => {
               </DropdownMenu>
             </ButtonDropdown>
             {' '}
-            <ButtonDropdown direction="right" isOpen={this.state.btnDropright} toggle={() => { this.setState({ btnDropright: !this.state.btnDropright }); }}>
+            <ButtonDropdown direction="end" isOpen={this.state.btnDropright} toggle={() => { this.setState({ btnDropright: !this.state.btnDropright }); }}>
               <DropdownToggle caret>
                 Dropright
               </DropdownToggle>
@@ -239,7 +239,7 @@ export default function Example () => {
   </DropdownMenu>
 </ButtonDropdown>
 
-<ButtonDropdown direction="left" isOpen={this.state.btnDropleft} toggle={() => { this.setState({ btnDropleft: !this.state.btnDropleft }); }}>
+<ButtonDropdown direction="start" isOpen={this.state.btnDropleft} toggle={() => { this.setState({ btnDropleft: !this.state.btnDropleft }); }}>
   <DropdownToggle caret>
     Dropleft
   </DropdownToggle>
@@ -249,7 +249,7 @@ export default function Example () => {
   </DropdownMenu>
 </ButtonDropdown>
 
-<ButtonDropdown direction="right" isOpen={this.state.btnDropright} toggle={() => { this.setState({ btnDropright: !this.state.btnDropright }); }}>
+<ButtonDropdown direction="end" isOpen={this.state.btnDropright} toggle={() => { this.setState({ btnDropright: !this.state.btnDropright }); }}>
   <DropdownToggle caret>
     Dropright
   </DropdownToggle>

diff --git a/docs/lib/Components/DropdownsPage.js b/docs/lib/Components/DropdownsPage.js
@@ -63,7 +63,7 @@ export default class DropdownPage extends React.Component {
   a11y: PropTypes.bool, // defaults to true. Set to false to enable more bootstrap like tabbing behavior
   className: PropTypes.string,
   disabled: PropTypes.bool,
-  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+  direction: PropTypes.oneOf(['up', 'down', 'start', 'end']),
   group: PropTypes.bool,
   isOpen: PropTypes.bool,
   // For Dropdown usage inside a Nav
@@ -94,7 +94,7 @@ DropdownMenu.propTypes = {
   tag: PropTypes.string,
   children: PropTypes.node.isRequired,
   dark: PropTypes.bool,
-  right: PropTypes.bool,
+  end: PropTypes.bool,
   flip: PropTypes.bool, // default: true,
   className: PropTypes.string,
   cssModule: PropTypes.object,
@@ -132,7 +132,7 @@ DropdownItem.propTypes = {
               <DropdownToggle caret>
                 Dropdown's menu is right-aligned
               </DropdownToggle>
-              <DropdownMenu right>
+              <DropdownMenu end>
                 <DropdownItem header>Header</DropdownItem>
                 <DropdownItem disabled>Action</DropdownItem>
                 <DropdownItem>Another Action</DropdownItem>
@@ -148,7 +148,7 @@ DropdownItem.propTypes = {
   <DropdownToggle caret>
     Dropdown's menu is right-aligned
   </DropdownToggle>
-  <DropdownMenu right>
+  <DropdownMenu end>
     <DropdownItem header>Header</DropdownItem>
     <DropdownItem disabled>Action</DropdownItem>
     <DropdownItem>Another Action</DropdownItem>
@@ -293,7 +293,7 @@ DropdownItem.propTypes = {
               </Dropdown>
             </Col>
             <Col>
-              <Dropdown direction="left" isOpen={this.state.ddDropleft} toggle={() => { this.setState({ ddDropleft: !this.state.ddDropleft }); }}>
+              <Dropdown direction="start" isOpen={this.state.ddDropleft} toggle={() => { this.setState({ ddDropleft: !this.state.ddDropleft }); }}>
                 <DropdownToggle caret>
                   Dropleft
                 </DropdownToggle>
@@ -304,7 +304,7 @@ DropdownItem.propTypes = {
               </Dropdown>
             </Col>
             <Col>
-              <Dropdown direction="right" isOpen={this.state.ddDropright} toggle={() => { this.setState({ ddDropright: !this.state.ddDropright }); }}>
+              <Dropdown direction="end" isOpen={this.state.ddDropright} toggle={() => { this.setState({ ddDropright: !this.state.ddDropright }); }}>
                 <DropdownToggle caret>
                   Dropright
                 </DropdownToggle>
@@ -328,7 +328,7 @@ DropdownItem.propTypes = {
   </DropdownMenu>
 </Dropdown>
 
-<Dropdown direction="left" isOpen={this.state.btnDropleft} toggle={() => { this.setState({ btnDropleft: !this.state.btnDropleft }); }}>
+<Dropdown direction="start" isOpen={this.state.btnDropleft} toggle={() => { this.setState({ btnDropleft: !this.state.btnDropleft }); }}>
   <DropdownToggle caret>
     Dropleft
   </DropdownToggle>
@@ -338,7 +338,7 @@ DropdownItem.propTypes = {
   </DropdownMenu>
 </Dropdown>
 
-<Dropdown direction="right" isOpen={this.state.btnDropright} toggle={() => { this.setState({ btnDropright: !this.state.btnDropright }); }}>
+<Dropdown direction="end" isOpen={this.state.btnDropright} toggle={() => { this.setState({ btnDropright: !this.state.btnDropright }); }}>
   <DropdownToggle caret>
     Dropright
   </DropdownToggle>

diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -11,7 +11,7 @@ import { mapToCssModules, omit, keyCodes, tagPropType } from './utils';
 const propTypes = {
   a11y: PropTypes.bool,
   disabled: PropTypes.bool,
-  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+  direction: PropTypes.oneOf(['up', 'down', 'start', 'end']),
   group: PropTypes.bool,
   isOpen: PropTypes.bool,
   nav: PropTypes.bool,

diff --git a/src/DropdownContext.js b/src/DropdownContext.js
@@ -5,7 +5,7 @@ import React from 'react';
  * {
  *  toggle: PropTypes.func.isRequired,
  *  isOpen: PropTypes.bool.isRequired,
- *  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']).isRequired,
+ *  direction: PropTypes.oneOf(['up', 'down', 'start', 'end']).isRequired,
  *  inNavbar: PropTypes.bool.isRequired,
  *  disabled: PropTypes.bool
  * }

diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js
@@ -10,7 +10,7 @@ const propTypes = {
   tag: tagPropType,
   children: PropTypes.node.isRequired,
   dark: PropTypes.bool,
-  right: PropTypes.bool,
+  end: PropTypes.bool,
   flip: PropTypes.bool,
   modifiers: PropTypes.array,
   className: PropTypes.string,
@@ -28,8 +28,8 @@ const defaultProps = {
 
 const directionPositionMap = {
   up: 'top',
-  left: 'left',
-  right: 'right',
+  start: 'left',
+  end: 'right',
   down: 'bottom',
 };
 
@@ -47,7 +47,7 @@ class DropdownMenu extends React.Component {
       className,
       cssModule,
       dark,
-      right,
+      end,
       tag,
       flip,
       modifiers,
@@ -62,7 +62,7 @@ class DropdownMenu extends React.Component {
       'dropdown-menu',
       {
         'dropdown-menu-dark': dark,
-        'dropdown-menu-right': right,
+        'dropdown-menu-end': end,
         show: this.context.isOpen,
       }
     ), cssModule);
@@ -72,7 +72,7 @@ class DropdownMenu extends React.Component {
     if (persist || (this.context.isOpen && !this.context.inNavbar)) {
 
       const position1 = directionPositionMap[this.context.direction] || 'bottom';
-      const position2 = right ? 'end' : 'start';
+      const position2 = end ? 'end' : 'start';
       const poperPlacement = `${position1}-${position2}`;
       const poperModifiers = [
         ...modifiers,

diff --git a/src/__tests__/Dropdown.spec.js b/src/__tests__/Dropdown.spec.js
@@ -1108,12 +1108,12 @@ describe('Dropdown', () => {
 
   it('should render with correct class when direction is set', () => {
     const dropup = shallow(<Dropdown direction="up" />);
-    const dropleft = shallow(<Dropdown direction="left" />);
-    const dropright = shallow(<Dropdown direction="right" />);
+    const dropleft = shallow(<Dropdown direction="start" />);
+    const dropright = shallow(<Dropdown direction="end" />);
 
     expect(dropup.childAt(0).childAt(0).hasClass('dropup')).toBe(true);
-    expect(dropleft.childAt(0).childAt(0).hasClass('dropleft')).toBe(true);
-    expect(dropright.childAt(0).childAt(0).hasClass('dropright')).toBe(true);
+    expect(dropleft.childAt(0).childAt(0).hasClass('dropstart')).toBe(true);
+    expect(dropright.childAt(0).childAt(0).hasClass('dropend')).toBe(true);
   });
 
   describe('menuRole prop', () => {

diff --git a/src/__tests__/DropdownMenu.spec.js b/src/__tests__/DropdownMenu.spec.js
@@ -65,18 +65,18 @@ describe('DropdownMenu', () => {
       </DropdownContext.Provider>
     );
 
-    expect(wrapper.find('.dropdown-menu').hostNodes().hasClass('dropdown-menu-right')).toBe(false);
+    expect(wrapper.find('.dropdown-menu').hostNodes().hasClass('dropdown-menu-end')).toBe(false);
   });
 
   it('should render right aligned menus', () => {
     isOpen = true;
     const wrapper = mount(
       <DropdownContext.Provider value={{ isOpen, direction, inNavbar }}>
-        <DropdownMenu right>Ello world</DropdownMenu>
+        <DropdownMenu end>Ello world</DropdownMenu>
       </DropdownContext.Provider>
     );
 
-    expect(wrapper.find('.dropdown-menu').hostNodes().hasClass('dropdown-menu-right')).toBe(true);
+    expect(wrapper.find('.dropdown-menu').hostNodes().hasClass('dropdown-menu-end')).toBe(true);
   });
 
   it('should render down when direction is unknown on the context', () => {
@@ -114,9 +114,9 @@ describe('DropdownMenu', () => {
     expect(wrapper.find(Popper).prop('placement')).toBe('top-start');
   });
 
-  it('should render left when direction is "left" on the context', () => {
+  it('should render left when direction is "start" on the context', () => {
     isOpen = true;
-    direction = 'left';
+    direction = 'start';
     const wrapper = mount(
       <DropdownContext.Provider value={{ isOpen, direction, inNavbar }}>
         <DropdownMenu>Ello world</DropdownMenu>
@@ -126,9 +126,9 @@ describe('DropdownMenu', () => {
     expect(wrapper.find(Popper).prop('placement')).toBe('left-start');
   });
 
-  it('should render right when direction is "right" on the context', () => {
+  it('should render right when direction is "end" on the context', () => {
     isOpen = true;
-    direction = 'right';
+    direction = 'end';
     const wrapper = mount(
       <DropdownContext.Provider value={{ isOpen, direction, inNavbar }}>
         <DropdownMenu>Ello world</DropdownMenu>
@@ -176,7 +176,7 @@ describe('DropdownMenu', () => {
   it('should not render Popper when isOpen is false', () => {
     const wrapper = mount(
       <DropdownContext.Provider value={{ isOpen, direction, inNavbar }}>
-        <DropdownMenu right>Ello world</DropdownMenu>
+        <DropdownMenu end>Ello world</DropdownMenu>
       </DropdownContext.Provider>
     );
 

diff --git a/types/lib/Dropdown.d.ts b/types/lib/Dropdown.d.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CSSModule } from './index';
 
-export type Direction = 'up' | 'down' | 'left' | 'right';
+export type Direction = 'up' | 'down' | 'start' | 'end';
 
 export interface DropdownProps extends React.HTMLAttributes<HTMLElement> {
   [key: string]: any;