feat(ui): datepicker - add placeholder property

src/framework/ui/calendar/baseCalendar.component.tsx

@@ -42,7 +42,7 @@ import {
 } from './service/calendarData.service';
 import { Divider } from '../divider/divider.component';
 
-export interface BaseCalendarProps<D> extends ViewProps {
+export interface BaseCalendarProps<D = Date> extends ViewProps {
   min?: D;
   max?: D;
   dateService?: DateService<D>;
@@ -76,9 +76,9 @@ const FORMAT_HEADER_DATE: string = 'MMM YYYY';
 const FORMAT_HEADER_MONTH: string = 'YYYY';
 const FORMAT_HEADER_YEAR: string = 'YYYY';
 
-export abstract class BaseCalendarComponent<D, P> extends React.Component<BaseCalendarProps<D> & P, State<D>> {
+export abstract class BaseCalendarComponent<P, D = Date> extends React.Component<BaseCalendarProps<D> & P, State<D>> {
 
-  static defaultProps = {
+  static defaultProps: Partial<BaseCalendarProps> = {
     dateService: new NativeDateService(),
     boundingMonth: true,
     startView: CalendarViewModes.DATE,

src/framework/ui/calendar/calendar.component.tsx

@@ -11,13 +11,13 @@ import { CalendarDateInfo } from './type';
 import { CalendarPickerCellProps } from './components/picker/calendarPickerCell.component';
 import { DateBatch } from './service/calendarData.service';
 
-export interface ComponentProps<D> {
+interface ComponentProps<D = Date> {
   date?: D;
   onSelect: (date: D) => void;
 }
 
-export type CalendarProps<D> = ComponentProps<D> & BaseCalendarProps<D> & StyledComponentProps;
-export type CalendarElement<D> = React.ReactElement<CalendarProps<D>>;
+export type CalendarProps<D = Date> = ComponentProps<D> & BaseCalendarProps<D> & StyledComponentProps;
+export type CalendarElement<D = Date> = React.ReactElement<CalendarProps<D>>;
 
 /**
  * Styled `Calendar` component.
@@ -72,7 +72,7 @@ export type CalendarElement<D> = React.ReactElement<CalendarProps<D>>;
  *
  * @example CalendarCustomDay
  */
-export class CalendarComponent<D> extends BaseCalendarComponent<D, CalendarProps<D>> {
+export class CalendarComponent<D = Date> extends BaseCalendarComponent<CalendarProps<D>, D> {
 
   static styledComponentName: string = 'Calendar';
 
@@ -118,4 +118,4 @@ export class CalendarComponent<D> extends BaseCalendarComponent<D, CalendarProps
   }
 }
 
-export const Calendar = styled(CalendarComponent);
+export const Calendar = styled<CalendarProps>(CalendarComponent);

src/framework/ui/calendar/rangeCalendar.component.tsx

@@ -15,13 +15,13 @@ import { CalendarPickerCellProps } from './components/picker/calendarPickerCell.
 import { DateBatch } from './service/calendarData.service';
 import { RangeDateService } from './service/rangeDate.service';
 
-export interface ComponentProps<D> {
+interface ComponentProps<D = Date> {
   range: CalendarRange<D>;
   onSelect: (range: CalendarRange<D>) => void;
 }
 
-export type RangeCalendarProps<D> = ComponentProps<D> & BaseCalendarProps<D> & StyledComponentProps;
-export type RangeCalendarElement<D> = React.ReactElement<RangeCalendarProps<D>>;
+export type RangeCalendarProps<D = Date> = ComponentProps<D> & BaseCalendarProps<D> & StyledComponentProps;
+export type RangeCalendarElement<D = Date> = React.ReactElement<RangeCalendarProps<D>>;
 
 /**
  * Styled `RangeCalendar` component.
@@ -62,7 +62,7 @@ export type RangeCalendarElement<D> = React.ReactElement<RangeCalendarProps<D>>;
  *
  * @overview-example RangeCalendarSimpleUsage
  */
-export class RangeCalendarComponent<D> extends BaseCalendarComponent<D, RangeCalendarProps<D>> {
+export class RangeCalendarComponent<D = Date> extends BaseCalendarComponent<RangeCalendarProps<D>, D> {
 
   static styledComponentName: string = 'Calendar';
 
@@ -119,4 +119,4 @@ export class RangeCalendarComponent<D> extends BaseCalendarComponent<D, RangeCal
   }
 }
 
-export const RangeCalendar = styled(RangeCalendarComponent);
+export const RangeCalendar = styled<RangeCalendarProps>(RangeCalendarComponent);

src/framework/ui/datepicker/baseDatepicker.component.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import {
+  Dimensions,
+  GestureResponderEvent,
+  ImageProps,
   ImageStyle,
+  StyleSheet,
   TouchableOpacity,
   TouchableOpacityProps,
-  ImageProps,
-  StyleSheet,
-  GestureResponderEvent,
-  Dimensions,
 } from 'react-native';
 import {
   Interaction,
@@ -34,20 +34,20 @@ interface State {
 
 export interface ComponentProps {
   icon?: (style: ImageStyle) => React.ReactElement<ImageProps>;
+  placeholder?: string;
 }
 
-export type DatepickerProps<D> =
-  ComponentProps
+export type BaseDatepickerProps<D = Date> =
   & StyledComponentProps
   & TouchableOpacityProps
-  & BaseCalendarProps<D>;
-
-export type DatepickerElement<D> = React.ReactElement<DatepickerProps<D>>;
+  & BaseCalendarProps<D>
+  & ComponentProps;
 
-export abstract class BaseDatepickerComponent<D, P> extends React.Component<DatepickerProps<D> & P, State> {
+export abstract class BaseDatepickerComponent<P, D = Date> extends React.Component<BaseDatepickerProps<D> & P, State> {
 
-  static defaultProps = {
+  static defaultProps: Partial<BaseDatepickerProps> = {
     dateService: new NativeDateService(),
+    placeholder: 'dd/mm/yyyy',
   };
 
   public state: State = {
@@ -126,32 +126,43 @@ export abstract class BaseDatepickerComponent<D, P> extends React.Component<Date
     }
   };
 
-  private renderIcon = (style: StyleType): React.ReactElement<ImageProps> => {
-    return this.props.icon && this.props.icon(style);
+  private renderIconElement = (style: StyleType): React.ReactElement<ImageProps> => {
+    return this.props.icon(style);
   };
 
-  private renderText = (style: StyleType): TextElement => {
+  private renderTextElement = (style: StyleType): TextElement => {
     return (
       <Text style={style}>
         {this.getComponentTitle()}
       </Text>
     );
   };
 
+  private renderControlChildren = (style: StyleType): React.ReactNodeArray => {
+    const { icon } = this.props;
+
+    return [
+      this.renderTextElement(style.text),
+      icon && this.renderIconElement(style.icon),
+    ];
+  };
+
   private renderControl = (): React.ReactElement<TouchableOpacityProps> => {
     const { themedStyle, disabled, style } = this.props;
-    const { container, icon, text } = this.getComponentStyles(themedStyle);
+    const componentStyle: StyleType = this.getComponentStyles(themedStyle);
+
+    const [textElement, iconElement] = this.renderControlChildren(componentStyle);
 
     return (
       <TouchableOpacity
         activeOpacity={1.0}
         disabled={disabled}
-        style={[container, styles.container, style]}
+        style={[componentStyle.container, styles.container, style]}
         onPress={this.toggleVisible}
         onPressIn={this.onPressIn}
         onPressOut={this.onPressOut}>
-        {this.renderText(text)}
-        {this.renderIcon(icon)}
+        {textElement}
+        {iconElement}
       </TouchableOpacity>
     );
   };

src/framework/ui/datepicker/datepicker.component.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
 import { styled } from '@kitten/theme';
-import { BaseDatepickerComponent } from './baseDatepicker.component';
+import {
+  BaseDatepickerComponent,
+  BaseDatepickerProps,
+} from './baseDatepicker.component';
 import {
   CalendarElement,
   Calendar,
   CalendarProps,
 } from '../calendar/calendar.component';
 
+export type DatepickerProps<D = Date> = BaseDatepickerProps<D> & CalendarProps<D>;
+export type DatepickerElement<D = Date> = React.ReactElement<DatepickerProps<D>>;
+
 /**
  * Styled `Datepicker` component.
  * Renders `Calendar` component in the `Popover`.
@@ -17,6 +23,8 @@ import {
  *
  * @property {(style: ImageStyle) => React.ReactElement<ImageProps>} icon - Determines the icon of the component.
  *
+ * @property {string} placeholder - Determines placeholder of the component.
+ *
  * @property {D} min - Minimal date that is able to be selected.
  *
  * @property {D} max - Maximum date that is able to be selected.
@@ -63,23 +71,27 @@ import {
  *
  * @example DatepickerMoment
  */
-export class DatepickerComponent<D> extends BaseDatepickerComponent<D, CalendarProps<D>> {
+
+export class DatepickerComponent<D = Date> extends BaseDatepickerComponent<DatepickerProps<D>, D> {
 
   static styledComponentName: string = 'Datepicker';
 
+  // BaseDatepickerComponent
+
   protected getComponentTitle(): string {
     if (this.props.date) {
       return this.formatDateToString(this.props.date);
     } else {
-      return 'dd/mm/yyyy';
+      return this.props.placeholder;
     }
   }
 
   protected renderCalendar(): CalendarElement<D> {
     return (
+      // @ts-ignore
       <Calendar {...this.props}/>
     );
   }
 }
 
-export const Datepicker = styled(DatepickerComponent);
+export const Datepicker = styled<DatepickerProps>(DatepickerComponent);

src/framework/ui/datepicker/datepicker.spec.tsx

@@ -15,14 +15,13 @@ import { ApplicationProvider, StyleType } from '@kitten/theme';
 import {
   Datepicker,
   DatepickerComponent,
+  DatepickerProps,
 } from './datepicker.component';
 import {
   mapping,
   theme,
 } from '../support/tests';
 import { Text } from '../text/text.component';
-import { CalendarProps } from '../calendar/calendar.component';
-import { DatepickerProps } from './baseDatepicker.component';
 
 interface State {
   date: Date;
@@ -36,7 +35,7 @@ interface AdditionalProps {
   onLongPress?: (event: GestureResponderEvent) => void;
 }
 
-type TestAppProps = Omit<CalendarProps<Date>, 'onSelect'> & AdditionalProps & DatepickerProps<Date>;
+type TestAppProps = Omit<DatepickerProps, 'onSelect'> & AdditionalProps;
 
 class TestApplication extends React.Component<TestAppProps, State> {
 

src/framework/ui/datepicker/rangeDatepicker.component.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
 import { styled } from '@kitten/theme';
-import { BaseDatepickerComponent } from './baseDatepicker.component';
+import {
+  BaseDatepickerComponent,
+  BaseDatepickerProps,
+} from './baseDatepicker.component';
 import {
   RangeCalendar,
   RangeCalendarProps,
   RangeCalendarElement,
 } from '../calendar/rangeCalendar.component';
 
+export type RangeDatepickerProps<D = Date> = BaseDatepickerProps<D> & RangeCalendarProps<D>;
+export type RangeDatepickerElement<D = Date> = React.ReactElement<RangeDatepickerProps<D>>;
+
 /**
  * Styled `RangeDatepicker` component.
  * Renders `RangeCalendar` component in the `Popover`.
@@ -17,6 +23,8 @@ import {
  *
  * @property {(style: ImageStyle) => React.ReactElement<ImageProps>} icon - Determines the icon of the component.
  *
+ * @property {string} placeholder - Determines placeholder of the component.
+ *
  * @property {D} min - Minimal date that is able to be selected.
  *
  * @property {D} max - Maximum date that is able to be selected.
@@ -51,10 +59,13 @@ import {
  *
  * @overview-example RangeDatepickerSimpleUsage
  */
-export class RangeDatepickerComponent<D> extends BaseDatepickerComponent<D, RangeCalendarProps<D>> {
+
+export class RangeDatepickerComponent<D = Date> extends BaseDatepickerComponent<RangeDatepickerProps<D>, D> {
 
   static styledComponentName: string = 'Datepicker';
 
+  // BaseDatepickerComponent
+
   protected getComponentTitle(): string {
     const { startDate, endDate } = this.props.range;
 
@@ -64,15 +75,16 @@ export class RangeDatepickerComponent<D> extends BaseDatepickerComponent<D, Rang
 
       return `${start} - ${end}`;
     } else {
-      return 'dd/mm/yyyy';
+      return this.props.placeholder;
     }
   }
 
   protected renderCalendar(): RangeCalendarElement<D> {
     return (
+      // @ts-ignore
       <RangeCalendar {...this.props}/>
     );
   }
 }
 
-export const RangeDatepicker = styled(RangeDatepickerComponent);
+export const RangeDatepicker = styled<RangeDatepickerProps>(RangeDatepickerComponent);

src/framework/ui/datepicker/rangeDatepicker.spec.tsx

@@ -12,16 +12,17 @@ import {
   theme,
 } from '../support/tests';
 import { Text } from '../text/text.component';
-import { CalendarProps } from '../calendar/calendar.component';
-import { DatepickerProps } from './baseDatepicker.component';
-import { RangeDatepicker } from './rangeDatepicker.component';
+import {
+  RangeDatepicker,
+  RangeDatepickerProps,
+} from './rangeDatepicker.component';
 import { CalendarRange } from '../calendar/type';
 
 interface State {
   range: CalendarRange<Date>;
 }
 
-type TestAppProps = Omit<CalendarProps<Date>, 'onSelect'> & DatepickerProps<Date>;
+type TestAppProps = Omit<RangeDatepickerProps, 'onSelect'>;
 
 class TestApplication extends React.Component<TestAppProps, State> {
 
@@ -55,7 +56,7 @@ describe('@ range datepicker component checks', () => {
 
   it('* onSelect works properly', async () => {
     const application: RenderAPI = render(
-      <TestApplication/>,
+      <TestApplication range={{}}/>,
     );
 
     fireEvent.press(application.getAllByType(TouchableOpacity)[0]);

src/framework/ui/index.ts

@@ -57,13 +57,14 @@ export {
 } from './checkbox/checkbox.component';
 export {
   Datepicker,
-  DatepickerComponent,
+  DatepickerProps,
+  DatepickerElement,
 } from './datepicker/datepicker.component';
 export {
   RangeDatepicker,
-  RangeDatepickerComponent,
+  RangeDatepickerProps,
+  RangeDatepickerElement,
 } from './datepicker/rangeDatepicker.component';
-export { DatepickerProps } from './datepicker/baseDatepicker.component';
 export {
   Drawer,
   DrawerProps,

src/framework/ui/input/input.component.tsx

@@ -91,7 +91,7 @@ export type InputElement = React.ReactElement<InputProps>;
  *
  * @property {StyleProp<TextStyle>} captionStyle - Customizes caption style.
  *
- * @property {string} placeholder - Determines placegolder of the component.
+ * @property {string} placeholder - Determines placeholder of the component.
  *
  * @property {StyleProp<TextStyle>} textStyle - Customizes text style.
  *