docs(components): calendar - refactor examples

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

@@ -81,110 +81,126 @@ export type CalendarElement<D> = React.ReactElement<CalendarProps<D>>;
  * }
  * ```
  *
- * @example Custom Day Cell
+ * @overview-example Custom Day Cell
  *
  * ```
  * import React from 'react';
  * import { View, StyleSheet } from 'react-native';
  * import { Calendar, Text } from 'react-native-ui-kitten';
  *
- * export const DayCell = (date, style) => {
- *
- *   const styles = StyleSheet.create({
- *     container: {
- *       flex: 1,
- *       justifyContent: 'center',
- *       alignItems: 'center',
- *       aspectRatio: 1,
- *     },
- *     value: {
- *       fontSize: 12,
- *       fontWeight: 'normal',
- *     },
- *   });
- *
- *   const value: number = 100 * date.getDate() + Math.pow(date.getDate(), 2);
- *
- *   return (
- *     <View
- *       style={[styles.container, style.container]}>
- *       <Text style={style.text}>{`${date.getDate()}`}</Text>
- *       <Text style={[style.text, styles.value]}>{`${value}$`}</Text>
- *     </View>
- *   );
- * };
+ * export const DayCell = ({ date }, style) => (
+ *   <View
+ *     style={[styles.container, style.container]}>
+ *     <Text style={style.text}>{`${date.getDate()}`}</Text>
+ *     <Text style={[style.text, styles.value]}>
+ *       {`${100 * date.getDate() + Math.pow(date.getDate(), 2)}$`}
+ *     </Text>
+ *   </View>
+ * );
+ *
+ * const styles = StyleSheet.create({
+ *   container: { flex: 1, justifyContent: 'center', alignItems: 'center', aspectRatio: 1 },
+ *   value: { fontSize: 12, fontWeight: '400' },
+ * });
  *
  * export class DailyValueCalendar extends React.Component {
+ *
+ *   state = {
+ *     date: new Date(),
+ *   };
+ *
+ *   onSelect = (date) => {
+ *     this.setState({ date });
+ *   };
+ *
  *   render() {
  *     return (
- *       <Calendar renderDayIfNeeded={DayCell} />
+ *       <Calendar
+ *         date={this.state.date}
+ *         onSelect={this.onSelect}
+ *         renderDay={DayCell}
+ *       />
  *     );
  *   }
  * }
  * ```
  *
- * @example Custom Locale
+ * @overview-example Custom Locale
  *
  * ```
  * import React from 'react';
  * import { Calendar, NativeDateService } from 'react-native-ui-kitten';
  *
+ * const i18n = {
+ *   dayNames: {
+ *     short: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+ *     long: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+ *   },
+ *   monthNames: {
+ *     short: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+ *     long: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+ *   },
+ * };
+ *
  * export class ChineseCalendar extends React.Component {
  *
- *   const i18n = {
- *     dayNames: {
- *       short: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
- *       long: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
- *     },
- *     monthNames: {
- *       short: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
- *       long: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
- *     },
+ *   dateService = new NativeDateService('zh', i18n);
+ *
+ *   state = {
+ *     date: new Date(),
  *   };
  *
- *   dateService = new DateService('zh', i18n);
+ *   onSelect = (date) => {
+ *     this.setState({ date });
+ *   };
  *
  *   render() {
  *     return (
- *       <Calendar dateService={this.dateService} />
+ *       <Calendar
+ *         date={this.state.date}
+ *         dateService={this.dateService}
+ *         onSelect={this.onSelect}
+ *       />
  *     );
  *   }
  * }
  * ```
  *
- * @example Moment Date
+ * @overview-example Working with Moment
  *
  * ```
+ * // IMPORTANT: To use Moment make sure to install Moment Date Service
+ * // npm i @ui-kitten/moment
+ *
  * import React from 'react';
  * import moment from 'moment';
  * import { Calendar } from 'react-native-ui-kitten';
- * import { MomentDateService } from '@ui-kitten/moment'; // <-- Assumes it is installed. npm install @ui-kitten/moment
+ * import { MomentDateService } from '@ui-kitten/moment';
  *
  * export class MomentCalendar extends React.Component {
  *
  *   state = {
- *     momentDate: moment();
+ *     date: moment();
  *   };
  *
  *   dateService = new MomentDateService();
  *
- *   onSelect = (momentDate) => {
- *     this.setState({ momentDate });
+ *   onSelect = (date) => {
+ *     this.setState({ date });
  *   }
  *
  *   render() {
  *     return (
  *       <Calendar
  *         date={this.state.date}
- *         onSelect={this.onSelect}
  *         dateService={this.dateService}
+ *         onSelect={this.onSelect}
  *       />
  *     );
  *   }
  * }
  * ```
  */
-
 export class CalendarComponent<D> extends BaseCalendarComponent<D, CalendarProps<D>> {
 
   static styledComponentName: string = 'Calendar';