Custom toolbar component (#1182)

* Add new ToolbarComponent prop for custom toolbars

* Update props docs

* Run docgen on precommit hook

* Run docgen on precommit hook

* Run git add after precommit command

* Automatically format json before prettier

Author: dmtrKovalenko

docs/prop-types.json

@@ -85,4 +85,4 @@ components.forEach(filePart => {
   });
 });
 
-fs.writeFileSync(path.resolve(__dirname, '..', 'prop-types.json'), JSON.stringify(doc));
+fs.writeFileSync(path.resolve(__dirname, '..', 'prop-types.json'), JSON.stringify(doc, null, 2));

docs/scripts/docgen.js

@@ -38,7 +38,7 @@ export interface BaseDatePickerProps extends OutterCalendarProps {
    */
   disableFuture?: boolean;
   /**
-   * To animate scrolling to current year (with scrollIntoView)
+   * To animate scrolling to current year (using scrollIntoView)
    * @default false
    */
   animateYearScrolling?: boolean;
@@ -76,12 +76,12 @@ function useOptions(props: DatePickerViewsProps) {
 
 export const DatePicker = makePurePicker<DatePickerViewsProps>({
   useOptions,
-  ToolbarComponent: DatePickerToolbar,
+  DefaultToolbarComponent: DatePickerToolbar,
 });
 
 export const KeyboardDatePicker = makeKeyboardPicker<DatePickerViewsProps>({
   useOptions,
-  ToolbarComponent: DatePickerToolbar,
+  DefaultToolbarComponent: DatePickerToolbar,
 });
 
 DatePicker.defaultProps = defaultProps;

lib/src/DatePicker/DatePicker.tsx

@@ -54,12 +54,12 @@ function useOptions(props: DateTimePickerProps | KeyboardDateTimePickerProps) {
 
 export const DateTimePicker = makePurePicker<DateTimePickerProps>({
   useOptions,
-  ToolbarComponent: DateTimePickerToolbar,
+  DefaultToolbarComponent: DateTimePickerToolbar,
 });
 
 export const KeyboardDateTimePicker = makeKeyboardPicker<KeyboardDateTimePickerProps>({
   useOptions,
-  ToolbarComponent: DateTimePickerToolbar,
+  DefaultToolbarComponent: DateTimePickerToolbar,
 });
 
 DateTimePicker.defaultProps = defaultProps;

lib/src/DateTimePicker/DateTimePicker.tsx

@@ -15,14 +15,14 @@ export type WrappedKeyboardPickerProps = DateValidationProps &
 
 export interface MakePickerOptions {
   useOptions: (props: any) => StateHookOptions;
-  ToolbarComponent: React.ComponentType<ToolbarComponentProps>;
+  DefaultToolbarComponent: React.ComponentType<ToolbarComponentProps>;
 }
 
 // Mostly duplicate of ./WrappedPurePicker.tsx to enable tree-shaking of keyboard logic
 // TODO investigate how to reduce duplications
 export function makeKeyboardPicker<T extends any>({
   useOptions,
-  ToolbarComponent,
+  DefaultToolbarComponent,
 }: MakePickerOptions): React.FC<WrappedKeyboardPickerProps & T> {
   function WrappedKeyboardPicker(props: WrappedKeyboardPickerProps & T) {
     const {
@@ -67,6 +67,7 @@ export function makeKeyboardPicker<T extends any>({
       variant,
       disableToolbar,
       loadingIndicator,
+      ToolbarComponent = DefaultToolbarComponent,
       ...other
     } = props;
 

lib/src/Picker/WrappedKeyboardPicker.tsx

@@ -13,7 +13,7 @@ export type WrappedPurePickerProps = DateValidationProps &
 
 export function makePurePicker<T extends any>({
   useOptions,
-  ToolbarComponent,
+  DefaultToolbarComponent,
 }: MakePickerOptions): React.FC<WrappedPurePickerProps & T> {
   function WrappedPurePicker(props: WrappedPurePickerProps & T) {
     const {
@@ -58,6 +58,7 @@ export function makePurePicker<T extends any>({
       orientation,
       disableToolbar,
       loadingIndicator,
+      ToolbarComponent = DefaultToolbarComponent,
       ...other
     } = props;
 

lib/src/Picker/WrappedPurePicker.tsx

@@ -51,12 +51,12 @@ function useOptions(props: TimePickerProps | KeyboardTimePickerProps) {
 
 export const TimePicker = makePurePicker<TimePickerViewsProps>({
   useOptions,
-  ToolbarComponent: TimePickerToolbar,
+  DefaultToolbarComponent: TimePickerToolbar,
 });
 
 export const KeyboardTimePicker = makeKeyboardPicker<TimePickerViewsProps>({
   useOptions,
-  ToolbarComponent: TimePickerToolbar,
+  DefaultToolbarComponent: TimePickerToolbar,
 });
 
 TimePicker.defaultProps = defaultProps;

lib/src/TimePicker/TimePicker.tsx

@@ -218,3 +218,16 @@ describe('e2e - DatePicker month change async', () => {
     ).toEqual(0);
   });
 });
+
+test('Custom toolbar component', () => {
+  const component = mount(
+    <DatePicker
+      open
+      value={new Date()}
+      onChange={jest.fn()}
+      ToolbarComponent={() => <div id="custom-toolbar" />}
+    />
+  );
+
+  expect(component.find('#custom-toolbar').length).toBe(1);
+});

lib/src/__tests__/e2e/DatePicker.test.tsx

@@ -1,6 +1,7 @@
 import { MaterialUiPickersDate } from './date';
 import { WrapperVariant } from '../wrappers/Wrapper';
 import { ParsableDate } from '../constants/prop-types';
+import { ToolbarComponentProps } from '../Picker/Picker';
 
 export interface BasePickerProps {
   /** Picker value */
@@ -50,6 +51,8 @@ export interface BasePickerProps {
    * @default "portrait"
    */
   orientation?: 'portrait' | 'landscape';
+  /* Component that will replace default toolbar renderer */
+  ToolbarComponent?: React.ComponentType<ToolbarComponentProps>;
   variant?: WrapperVariant;
   mergePreviousDateOnChange?: boolean;
   forwardedRef?: any;

lib/src/typings/BasePicker.tsx

@@ -9,22 +9,22 @@ import { DialogProps as MuiDialogProps } from '@material-ui/core/Dialog';
 export interface ModalWrapperProps<T = {}> extends WrapperProps<T> {
   /**
    * "OK" label message
-   * @default 'OK'
+   * @default "OK"
    */
   okLabel?: React.ReactNode;
   /**
    * "CANCEL" label message
-   * @default 'CANCEL'
+   * @default "CANCEL"
    */
   cancelLabel?: React.ReactNode;
   /**
    * "CLEAR" label message
-   * @default 'CLEAR'
+   * @default "CLEAR"
    */
   clearLabel?: React.ReactNode;
   /**
    * "TODAY" label message
-   * @default 'TODAY'
+   * @default "TODAY"
    */
   todayLabel?: React.ReactNode;
   /**