Repository: gpbl/react-day-picker
Pull request #569 (2017-11-25 20:31:43)

Rename `enableOutsideDays` to `showOutsideDays`


Patch:
diff --git a/docs/src/code-samples/examples/customization-outside.js b/docs/src/code-samples/examples/customization-outside.js
index f9825d9c6..0a34610ed 100644
--- a/docs/src/code-samples/examples/customization-outside.js
+++ b/docs/src/code-samples/examples/customization-outside.js
@@ -3,5 +3,5 @@ import DayPicker from 'react-day-picker';
 import 'react-day-picker/lib/style.css';
 
 export default function Example() {
-  return <DayPicker enableOutsideDays />;
+  return <DayPicker showOutsideDays />;
 }
diff --git a/docs/src/code-samples/examples/disabled-interaction.js b/docs/src/code-samples/examples/disabled-interaction.js
index fc58f7df8..46122e1a4 100644
--- a/docs/src/code-samples/examples/disabled-interaction.js
+++ b/docs/src/code-samples/examples/disabled-interaction.js
@@ -25,7 +25,7 @@ export default class Example extends React.Component {
     return (
       <div>
         <DayPicker
-          enableOutsideDays
+          showOutsideDays
           selectedDays={this.state.selectedDay}
           disabledDays={disabledDays}
           onDayClick={this.handleDayClick}
diff --git a/docs/src/pages/api/DayPicker.js b/docs/src/pages/api/DayPicker.js
index b73e85f06..714c87ee2 100644
--- a/docs/src/pages/api/DayPicker.js
+++ b/docs/src/pages/api/DayPicker.js
@@ -33,8 +33,8 @@ export default () => (
 
     <h4>Customization</h4>
     <p>
-      <a href="#enableOutsideDays">enableOutsideDays</a>,{' '}
       <a href="#fixedWeeks">fixedWeeks</a>,{' '}
+      <a href="#showOutsideDays">showOutsideDays</a>,{' '}
       <a href="#showWeekDays">showWeekDays</a>,{' '}
       <a href="#showWeekNumbers">showWeekNumbers</a>,{' '}
       <a href="#todayButton">todayButton</a>
@@ -210,11 +210,6 @@ export default () => (
         modifier. See <Link to="/docs/matching-days">Matching days</Link> for a
         reference of the accepted value types.
       </p>
-      <h3>
-        <Anchor id="enableOutsideDays" />
-        enableOutsideDays <code>boolean = false</code>
-      </h3>
-      <p>Display the days outside the current month.</p>
       <h3>
         <Anchor id="firstDayOfWeek" />
         firstDayOfWeek <code>number = 0 (Sunday)</code>
@@ -411,6 +406,11 @@ export default () => (
         modifier. See <Link to="/docs/matching-days">Matching days</Link> for a
         reference of the accepted value types.
       </p>
+      <h3>
+        <Anchor id="showOutsideDays" />
+        showOutsideDays <code>boolean = false</code>
+      </h3>
+      <p>Display the days outside the current month.</p>
       <h3>
         <Anchor id="showWeekDays" />
         showWeekDays <code>boolean = true</code>
diff --git a/docs/src/pages/examples/customization-outside.js b/docs/src/pages/examples/customization-outside.js
index 373d2ebeb..19261642f 100644
--- a/docs/src/pages/examples/customization-outside.js
+++ b/docs/src/pages/examples/customization-outside.js
@@ -6,8 +6,8 @@ import CodeSample from '../../ui/CodeSample';
 export default () => (
   <ExamplePage title="Outside days">
     <p>
-      Use the <code>enableOutsideDays</code> prop to display the days outside
-      the currently displayed month.
+      Use the <code>showOutsideDays</code> prop to display the days outside the
+      currently displayed month.
     </p>
     <CodeSample name="examples/customization-outside" />
   </ExamplePage>
diff --git a/src/DayPicker.js b/src/DayPicker.js
index 409705d85..d62fd08e7 100644
--- a/src/DayPicker.js
+++ b/src/DayPicker.js
@@ -65,7 +65,7 @@ export default class DayPicker extends Component {
     weekdaysShort: PropTypes.arrayOf(PropTypes.string),
 
     // Customization
-    enableOutsideDays: PropTypes.bool,
+    showOutsideDays: PropTypes.bool,
     fixedWeeks: PropTypes.bool,
 
     // CSS and HTML
@@ -139,7 +139,7 @@ export default class DayPicker extends Component {
     },
     locale: 'en',
     localeUtils: LocaleUtils,
-    enableOutsideDays: false,
+    showOutsideDays: false,
     fixedWeeks: false,
     canChangeMonth: true,
     reverseMonths: false,
diff --git a/src/Month.js b/src/Month.js
index 627d524a1..16a7ba786 100644
--- a/src/Month.js
+++ b/src/Month.js
@@ -26,7 +26,7 @@ export default class Month extends Component {
     modifiersStyles: PropTypes.object,
 
     showWeekDays: PropTypes.bool,
-    enableOutsideDays: PropTypes.bool,
+    showOutsideDays: PropTypes.bool,
 
     renderDay: PropTypes.func.isRequired,
     renderWeek: PropTypes.func.isRequired,
@@ -101,7 +101,7 @@ export default class Month extends Component {
         modifiers={modifiers}
         modifiersStyles={this.props.modifiersStyles}
         empty={
-          isOutside && !this.props.enableOutsideDays && !this.props.fixedWeeks
+          isOutside && !this.props.showOutsideDays && !this.props.fixedWeeks
         }
         tabIndex={tabIndex}
         ariaLabel={this.props.localeUtils.formatDay(day, this.props.locale)}
diff --git a/types/props.d.ts b/types/props.d.ts
index 0c96d52e1..195e7ae21 100644
--- a/types/props.d.ts
+++ b/types/props.d.ts
@@ -49,7 +49,7 @@ export interface DayPickerProps {
     HTMLDivElement
   >;
   disabledDays?: Modifier | Modifier[];
-  enableOutsideDays?: boolean;
+  showOutsideDays?: boolean;
   firstDayOfWeek?: number;
   fixedWeeks?: boolean;
   fromMonth?: Date;


Test patch:
diff --git a/test/daypicker/methods.js b/test/daypicker/methods.js
index e088c6749..ec55860ec 100644
--- a/test/daypicker/methods.js
+++ b/test/daypicker/methods.js
@@ -9,7 +9,7 @@ describe('DayPicker’s methods', () => {
       const instance = shallow(
         <DayPicker
           initialMonth={new Date(2015, 7)}
-          enableOutsideDays={false}
+          showOutsideDays={false}
           numberOfMonths={2}
         />
       ).instance();
@@ -42,7 +42,7 @@ describe('DayPicker’s methods', () => {
       const instance = shallow(
         <DayPicker
           initialMonth={new Date(2015, 7)}
-          enableOutsideDays={false}
+          showOutsideDays={false}
           numberOfMonths={2}
           pagedNavigation
         />
@@ -57,7 +57,7 @@ describe('DayPicker’s methods', () => {
   describe('showPreviousMonth()', () => {
     it('should show the previous month', () => {
       const instance = shallow(
-        <DayPicker initialMonth={new Date(2015, 7)} enableOutsideDays={false} />
+        <DayPicker initialMonth={new Date(2015, 7)} showOutsideDays={false} />
       ).instance();
       instance.showPreviousMonth();
       expect(instance.state.currentMonth.getMonth()).toBe(6);
@@ -88,7 +88,7 @@ describe('DayPicker’s methods', () => {
       const instance = shallow(
         <DayPicker
           initialMonth={new Date(2015, 7)}
-          enableOutsideDays={false}
+          showOutsideDays={false}
           numberOfMonths={2}
           pagedNavigation
         />
diff --git a/test/daypicker/modifiers.js b/test/daypicker/modifiers.js
index d6bbf5162..c849bbed8 100644
--- a/test/daypicker/modifiers.js
+++ b/test/daypicker/modifiers.js
@@ -59,7 +59,7 @@ describe('DayPicker’s day modifiers', () => {
   });
   it('should include "outside" for outside days', () => {
     const wrapper = mount(
-      <DayPicker initialMonth={new Date(2015, 6)} enableOutsideDays />
+      <DayPicker initialMonth={new Date(2015, 6)} showOutsideDays />
     );
     expect(wrapper.find('.DayPicker-Day').at(0)).toHaveClassName(
       'DayPicker-Day--outside'
diff --git a/test/daypicker/navigation.js b/test/daypicker/navigation.js
index 980ce7552..b176411d9 100644
--- a/test/daypicker/navigation.js
+++ b/test/daypicker/navigation.js
@@ -46,7 +46,7 @@ describe('DayPicker’s navigation', () => {
     const wrapper = mount(
       <DayPicker
         initialMonth={new Date(2015, 7)}
-        enableOutsideDays
+        showOutsideDays
         onDayClick={() => {}}
       />
     );
@@ -62,7 +62,7 @@ describe('DayPicker’s navigation', () => {
     const wrapper = mount(
       <DayPicker
         initialMonth={new Date(2015, 7)}
-        enableOutsideDays
+        showOutsideDays
         classNames={{ ...defaultClassNames, outside: 'fakeOutside' }}
         onDayClick={() => {}}
       />
@@ -86,7 +86,7 @@ describe('DayPicker’s navigation', () => {
     const wrapper = mount(
       <DayPicker
         initialMonth={new Date(2015, 7)}
-        enableOutsideDays
+        showOutsideDays
         onDayClick={() => {}}
       />
     );
@@ -102,7 +102,7 @@ describe('DayPicker’s navigation', () => {
     const wrapper = mount(
       <DayPicker
         initialMonth={new Date(2015, 7)}
-        enableOutsideDays
+        showOutsideDays
         classNames={{ ...defaultClassNames, outside: 'fakeOutside' }}
         onDayClick={() => {}}
       />
@@ -120,7 +120,7 @@ describe('DayPicker’s navigation', () => {
       <DayPicker
         initialMonth={new Date(2015, 3)}
         numberOfMonths={2}
-        enableOutsideDays
+        showOutsideDays
         onDayClick={() => {}}
       />
     );
diff --git a/test/daypicker/rendering.js b/test/daypicker/rendering.js
index f8fd15de2..b37d3bb12 100644
--- a/test/daypicker/rendering.js
+++ b/test/daypicker/rendering.js
@@ -16,7 +16,7 @@ describe('DayPicker’s rendering', () => {
     expect(dayPicker.props.initialMonth.getYear()).toBe(now.getYear());
     expect(dayPicker.props.numberOfMonths).toBe(1);
     expect(dayPicker.props.locale).toBe('en');
-    expect(dayPicker.props.enableOutsideDays).toBe(false);
+    expect(dayPicker.props.showOutsideDays).toBe(false);
     expect(dayPicker.props.fixedWeeks).toBe(false);
     expect(dayPicker.props.canChangeMonth).toBe(true);
     expect(dayPicker.props.reverseMonths).toBe(false);
@@ -153,7 +153,7 @@ describe('DayPicker’s rendering', () => {
     };
     const wrapper = mount(
       <DayPicker
-        enableOutsideDays
+        showOutsideDays
         modifiers={{ foo: () => true }}
         renderDay={renderDay}
       />
@@ -299,7 +299,7 @@ describe('DayPicker’s rendering', () => {
   });
   it('should render the outside days', () => {
     const wrapper = mount(
-      <DayPicker enableOutsideDays initialMonth={new Date(2015, 6)} />
+      <DayPicker showOutsideDays initialMonth={new Date(2015, 6)} />
     );
     expect(wrapper.find('.DayPicker-Day').at(0)).toHaveText('28');
     expect(wrapper.find('.DayPicker-Day').at(1)).toHaveText('29');
@@ -307,7 +307,7 @@ describe('DayPicker’s rendering', () => {
   });
   it('should not allow tabbing to outside days', () => {
     const wrapper = mount(
-      <DayPicker enableOutsideDays initialMonth={new Date(2015, 6)} />
+      <DayPicker showOutsideDays initialMonth={new Date(2015, 6)} />
     );
     expect(
       wrapper
@@ -330,11 +330,7 @@ describe('DayPicker’s rendering', () => {
   });
   it('should render the fixed amount of weeks', () => {
     const wrapper = mount(
-      <DayPicker
-        enableOutsideDays
-        fixedWeeks
-        initialMonth={new Date(2015, 1)}
-      />
+      <DayPicker showOutsideDays fixedWeeks initialMonth={new Date(2015, 1)} />
     );
     expect(wrapper.find('.DayPicker-Day')).toHaveLength(42);
   });
@@ -355,7 +351,7 @@ describe('DayPicker’s rendering', () => {
   it('should use the specified class names', () => {
     const wrapper = mount(
       <DayPicker
-        enableOutsideDays
+        showOutsideDays
         initialMonth={new Date(2015, 1)}
         classNames={{ ...classNames, day: 'foo' }}
         modifiers={{ bar: new Date(2015, 1, 10) }}
diff --git a/test/daypickerinput/rendering.js b/test/daypickerinput/rendering.js
index a1926750d..2f0908913 100644
--- a/test/daypickerinput/rendering.js
+++ b/test/daypickerinput/rendering.js
@@ -83,7 +83,7 @@ describe('DayPickerInput', () => {
       const instance = mount(
         <DayPickerInput
           dayPickerProps={{
-            enableOutsideDays: true,
+            showOutsideDays: true,
             numberOfMonths: 12,
             fixedWeeks: false,
           }}
@@ -91,7 +91,7 @@ describe('DayPickerInput', () => {
       ).instance();
       instance.showDayPicker();
       expect(instance.daypicker.props.fixedWeeks).toBe(false);
-      expect(instance.daypicker.props.enableOutsideDays).toBe(true);
+      expect(instance.daypicker.props.showOutsideDays).toBe(true);
       expect(instance.daypicker.props.numberOfMonths).toBe(12);
     });
     it('should open the daypicker to the month of the selected day', () => {