@corva/ui 0.38.0-5 → 0.38.0-6

package/src/components/IconMenu/index.js

@@ -0,0 +1,128 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { IconButton, Menu, withStyles, Tooltip } from '@material-ui/core';
+import { MoreVert } from '@material-ui/icons';
+
+const muiStyles = {
+  iconButton: { padding: '10px', color: 'white' },
+  paper: {},
+};
+
+function IconMenu({
+  classes,
+  // IconButtonComponentProps
+  'data-testid': testId,
+  iconButtonStyle,
+  color,
+  disableRipple,
+  className,
+  IconElement,
+  IconButtonComponent,
+  disabled,
+  // MenuProps
+  children,
+  anchorOrigin,
+  transformOrigin,
+  marginThreshold,
+  menuProps,
+  // Tooltip
+  tooltipProps,
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const isOpen = !!anchorEl;
+  const handleClose = event => {
+    event.stopPropagation();
+    setAnchorEl(null);
+  };
+  const handleOpen = event => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+
+  const iconButtonElement = (
+    <IconButtonComponent
+      aria-label="IconMenu"
+      aria-owns={isOpen ? 'icon-menu' : undefined}
+      aria-haspopup="true"
+      data-testid={testId}
+      onClick={handleOpen}
+      classes={{ root: classes.iconButton }}
+      className={className}
+      style={iconButtonStyle}
+      color={color}
+      disableRipple={disableRipple}
+      disabled={disabled}
+    >
+      {IconElement}
+    </IconButtonComponent>
+  );
+
+  return (
+    <>
+      {tooltipProps ? <Tooltip {...tooltipProps}>{iconButtonElement}</Tooltip> : iconButtonElement}
+      <Menu
+        id="icon-menu"
+        anchorEl={anchorEl}
+        open={isOpen}
+        onClose={handleClose}
+        onClick={handleClose}
+        anchorOrigin={anchorOrigin}
+        transformOrigin={transformOrigin}
+        classes={{ paper: classes.paper }}
+        elevation={0}
+        marginThreshold={marginThreshold}
+        {...menuProps}
+      >
+        {children}
+      </Menu>
+    </>
+  );
+}
+
+IconMenu.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.array]),
+  classes: PropTypes.shape({
+    iconButton: PropTypes.string,
+    paper: PropTypes.string,
+  }),
+  className: PropTypes.string,
+  color: PropTypes.string,
+  IconElement: PropTypes.element,
+  // eslint-disable-next-line react/forbid-prop-types
+  IconButtonComponent: PropTypes.any,
+  iconButtonStyle: PropTypes.shape({}),
+  anchorOrigin: PropTypes.shape({
+    horizontal: PropTypes.oneOf(['left', 'center', 'right']),
+    vertical: PropTypes.oneOf(['top', 'center', 'bottom']),
+  }),
+  transformOrigin: PropTypes.shape({
+    horizontal: PropTypes.oneOf(['left', 'center', 'right']),
+    vertical: PropTypes.oneOf(['top', 'center', 'bottom']),
+  }),
+  disableRipple: PropTypes.bool,
+  'data-testid': PropTypes.string,
+  marginThreshold: PropTypes.number,
+  disabled: PropTypes.bool,
+  tooltipProps: PropTypes.shape({}),
+  menuProps: PropTypes.shape({}),
+};
+
+IconMenu.defaultProps = {
+  children: undefined,
+  classes: {},
+  className: undefined,
+  color: undefined,
+  'data-testid': undefined,
+  IconElement: <MoreVert />,
+  iconButtonStyle: undefined,
+  IconButtonComponent: IconButton,
+  disableRipple: false,
+  anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
+  transformOrigin: { horizontal: 'right', vertical: 'bottom' },
+  marginThreshold: undefined,
+  disabled: false,
+  tooltipProps: undefined,
+  menuProps: {},
+};
+
+export default withStyles(muiStyles)(IconMenu);

package/src/components/Icons/AnnotationIcon.js

@@ -0,0 +1,29 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { SvgIcon, useTheme } from '@material-ui/core';
+
+const AnnotationIcon = ({ height, width }) => {
+  const theme = useTheme();
+  return (
+    <SvgIcon viewBox="0 0 24 24" fill="none" width={width} height={height}>
+      <path
+        d="M2.57129 7.37135V13.2856C2.57129 15.5142 4.37129 17.3142 6.59986 17.3142H15.1713L20.057 20.4856C20.1029 20.5086 20.1427 20.5316 20.1796 20.5529C20.2805 20.6111 20.3601 20.6571 20.4856 20.6571C20.657 20.6571 20.7427 20.6571 20.9141 20.5713C21.1713 20.3999 21.3427 20.1428 21.3427 19.7999V7.37135C21.3427 5.14277 19.5427 3.34277 17.3141 3.34277H6.59986C4.37129 3.34277 2.57129 5.14277 2.57129 7.37135ZM12.9 11.4H15.6C16.095 11.4 16.5 10.995 16.5 10.5C16.5 10.005 16.095 9.6 15.6 9.6H12.9V6.9C12.9 6.405 12.495 6 12 6C11.505 6 11.1 6.405 11.1 6.9V9.6H8.4C7.905 9.6 7.5 10.005 7.5 10.5C7.5 10.995 7.905 11.4 8.4 11.4H11.1V14.1C11.1 14.595 11.505 15 12 15C12.495 15 12.9 14.595 12.9 14.1V11.4Z"
+        fill={theme.palette.secondary}
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </SvgIcon>
+  );
+};
+
+AnnotationIcon.propTypes = {
+  height: PropTypes.number,
+  width: PropTypes.number,
+};
+
+AnnotationIcon.defaultProps = {
+  height: 24,
+  width: 24,
+};
+
+export default memo(AnnotationIcon);

package/src/components/Icons/AttachIcon.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import { SvgIcon, useTheme } from '@material-ui/core';
+
+const AttachIcon = ({ height, width }) => {
+  const theme = useTheme();
+  return (
+    <SvgIcon viewBox="0 0 24 24" fill="none" width={width} height={height}>
+      <path
+        d="M16 6V17.5C16 19.71 14.21 21.5 12 21.5C9.79 21.5 8 19.71 8 17.5V5C8 3.62 9.12 2.5 10.5 2.5C11.88 2.5 13 3.62 13 5V15.5C13 16.05 12.55 16.5 12 16.5C11.45 16.5 11 16.05 11 15.5V6H9.5V15.5C9.5 16.88 10.62 18 12 18C13.38 18 14.5 16.88 14.5 15.5V5C14.5 2.79 12.71 1 10.5 1C8.29 1 6.5 2.79 6.5 5V17.5C6.5 20.54 8.96 23 12 23C15.04 23 17.5 20.54 17.5 17.5V6H16Z"
+        fill={theme.palette.primary.text6}
+      />
+    </SvgIcon>
+  );
+};
+
+AttachIcon.propTypes = {
+  height: PropTypes.number,
+  width: PropTypes.number,
+};
+
+AttachIcon.defaultProps = {
+  height: 24,
+  width: 24,
+};
+
+export default AttachIcon;

package/src/components/Icons/EmojiIcon.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import { SvgIcon, useTheme } from '@material-ui/core';
+
+const EmojiIcon = ({ height, width }) => {
+  const theme = useTheme();
+  return (
+    <SvgIcon viewBox="0 0 20 20" fill="none" width={width} height={height}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.99 0C4.47 0 0 4.48 0 10C0 15.52 4.47 20 9.99 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 9.99 0ZM10 18C5.58 18 2 14.42 2 10C2 5.58 5.58 2 10 2C14.42 2 18 5.58 18 10C18 14.42 14.42 18 10 18ZM15 7.5C15 8.33 14.33 9 13.5 9C12.67 9 12 8.33 12 7.5C12 6.67 12.67 6 13.5 6C14.33 6 15 6.67 15 7.5ZM6.5 9C7.33 9 8 8.33 8 7.5C8 6.67 7.33 6 6.5 6C5.67 6 5 6.67 5 7.5C5 8.33 5.67 9 6.5 9ZM15.11 12C14.31 14.04 12.33 15.5 10 15.5C7.67 15.5 5.69 14.04 4.89 12H15.11Z"
+        fill={theme.palette.primary.text6}
+      />
+    </SvgIcon>
+  );
+};
+
+EmojiIcon.propTypes = {
+  height: PropTypes.number,
+  width: PropTypes.number,
+};
+
+EmojiIcon.defaultProps = {
+  height: 20,
+  width: 22,
+};
+
+export default EmojiIcon;

package/src/components/Icons/RecommendationIcon.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+
+const RecommendationIcon = ({ height, width }) => (
+  <svg width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fillRule="evenodd" clipRule="evenodd" d="M12.7098 2.28957L21.7098 11.2896C22.0998 11.6896 22.0998 12.3196 21.7098 12.6996L12.7098 21.6996C12.3198 22.0896 11.6898 22.0896 11.2998 21.6996L2.29982 12.6996C1.90982 12.3096 1.90982 11.6796 2.29982 11.2896L11.2998 2.28957C11.6898 1.89957 12.3198 1.89957 12.7098 2.28957ZM13.9998 11.9996V14.4996L17.4998 10.9996L13.9998 7.49957V9.99957H8.99982C8.44982 9.99957 7.99982 10.4496 7.99982 10.9996V14.9996H9.99982V11.9996H13.9998Z" fill="#75DB29"/>
+  </svg>
+)
+
+RecommendationIcon.propTypes = {
+  height: PropTypes.number,
+  width: PropTypes.number,
+}
+
+RecommendationIcon.defaultProps = {
+  height: 28,
+  width: 28,
+}
+
+export default RecommendationIcon;

package/src/components/Icons/SendIcon.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+
+const SendIcon = ({ height, width }) => (
+  <svg width={width} height={height} viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.01 18L21 9L0.01 0L0 7L15 9L0 11L0.01 18Z" fill="#03BCD4"/>
+  </svg>
+)
+
+SendIcon.propTypes = {
+  height: PropTypes.number,
+  width: PropTypes.number,
+}
+
+SendIcon.defaultProps = {
+  height: 21,
+  width: 21,
+}
+
+export default SendIcon;

package/src/components/ImageViewer/index.js

@@ -0,0 +1,62 @@
+import PropTypes from 'prop-types';
+import Lightbox from 'react-image-lightbox';
+
+import DownloadIcon from '@material-ui/icons/SaveAlt';
+import BackIcon from '@material-ui/icons/ArrowBack';
+
+import styles from './styles.css';
+
+const Toolbar = props => (
+  <div className={styles.cImageViewerToolbar}>
+    <button
+      type="button"
+      aria-label="Close"
+      className={styles.cImageViewerToolbarButton}
+      onClick={props.onCloseRequest}
+    >
+      <BackIcon className={styles.cImageViewerToolbarIcon} htmlColor="#b3b3b3" />
+    </button>
+  </div>
+);
+
+const ImageViewer = props => {
+  const renderToolbarButtons = () => [
+    <button type="button" aria-label="Download" className={styles.cImageViewerToolbarButton}>
+      <a href={props.mainSrc} download="image" target="_blank" rel="noopener noreferrer">
+        <DownloadIcon className={styles.cImageViewerToolbarIcon} htmlColor="#b3b3b3" />
+      </a>
+    </button>,
+  ];
+
+  return (
+    <div className={styles.cImageViewer}>
+      <Toolbar onCloseRequest={props.onCloseRequest} />
+      <Lightbox
+        mainSrc={props.mainSrc}
+        imagePadding={props.imagePadding}
+        toolbarButtons={renderToolbarButtons()}
+        onAfterOpen={props.onAfterOpen}
+        onCloseRequest={props.onCloseRequest}
+      />
+    </div>
+  );
+};
+
+ImageViewer.propTypes = {
+  mainSrc: PropTypes.string.isRequired,
+  imagePadding: PropTypes.number,
+  onAfterOpen: PropTypes.func,
+  onCloseRequest: PropTypes.func,
+};
+
+Toolbar.propTypes = {
+  onCloseRequest: PropTypes.func.isRequired,
+};
+
+ImageViewer.defaultProps = {
+  imagePadding: 50,
+  onAfterOpen: undefined,
+  onCloseRequest: undefined,
+};
+
+export default ImageViewer;

package/src/components/ImageViewer/styles.css

@@ -0,0 +1,34 @@
+.cImageViewerToolbarButton {
+  vertical-align: middle;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.cImageViewerToolbarButton:focus {
+  outline: none;
+}
+
+.cImageViewerToolbarIcon {
+  width: 42px !important;
+  height: 34px !important;
+  padding: 4px 6px;
+}
+
+.cImageViewerToolbarIcon:hover {
+  color: '#fff';
+}
+
+.cImageViewerToolbar {
+  top: 5px;
+  left: 5px;
+  color: #fff;
+  position: fixed;
+  z-index: 1001;
+}
+
+/* Hide Lightbox native close button */
+:global(.ril-toolbar__item .ril-close) {
+  display: none;
+}

package/src/components/InfiniteList/index.js

@@ -0,0 +1,217 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import classNames from 'classnames';
+import { get, set } from 'lodash';
+
+import InfiniteScroll from 'react-infinite-scroller';
+
+import grey from '@material-ui/core/colors/grey';
+
+import LoadingIndicator from '~components/LoadingIndicator';
+
+import styles from './styles.css';
+
+const PAGE_NAME = 'generic_infiniteList';
+
+const grey700 = grey['700'];
+
+const INTERVAL_6_HOURS = 6 * 60 * 60 * 1000;
+const PERIOD_LABELS = {
+  newerThan12Hours: 'Last 12 hours',
+  olderThan12Hours: 'Last 24 hours',
+  olderThan1Days: 'Earlier this week',
+  olderThan7Days: 'Older than 7 days',
+  olderThan14Days: 'Older than 14 days',
+  olderThan30Days: 'Older than 30 days',
+};
+
+class InfiniteList extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isLoadingByScroll: false,
+
+      periodDates: this.periodDates,
+    };
+
+    this.updatePeriodsIntervalId = null;
+  }
+
+  componentDidMount() {
+    this.updatePeriodsIntervalId = setInterval(
+      () => this.setState({ periodDates: this.periodDates }),
+      INTERVAL_6_HOURS
+    );
+  }
+
+  componentWillUnmount() {
+    if (this.updatePeriodsIntervalId) {
+      clearInterval(this.updatePeriodsIntervalId);
+    }
+  }
+
+  get periodDates() {
+    return {
+      hoursAgo12: moment().subtract(12, 'hours'),
+      daysAgo1: moment().subtract(1, 'days'),
+      daysAgo7: moment().subtract(7, 'days'),
+      daysAgo14: moment().subtract(14, 'days'),
+      daysAgo30: moment().subtract(30, 'days'),
+    };
+  }
+
+  // NOTE: 'react-infinite-scroller' has a bug that when scroll reaches threshold area, it starts
+  // to fire loadMore on every scroll event - bottom, up. As a result multiple same request fired.
+  //
+  // We fix this preventing request that was fired by scroll before previous is finished.
+  //
+  // Issues:
+  // https://github.com/CassetteRocks/react-infinite-scroller/issues/143
+  loadItems = async () => {
+    if (this.state.isLoadingByScroll) {
+      return;
+    }
+
+    this.setState({ isLoadingByScroll: true });
+
+    await this.props.loadItems();
+
+    this.setState({ isLoadingByScroll: false });
+  };
+
+  renderNoItemsLabel() {
+    return (
+      <div
+        data-testid={`${PAGE_NAME}_noItems`}
+        key="c-infinite-list__empty"
+        className={styles.cInfiniteListEmpty}
+      >
+        {this.props.noItemsFoundLabel}
+      </div>
+    );
+  }
+
+  renderPeriodSeparator(periodKey) {
+    return (
+      <div
+        data-testid={`${PAGE_NAME}_periodLabel`}
+        key={periodKey}
+        className={styles.cInfiniteListPeriod}
+        style={{ color: grey700 }}
+      >
+        {PERIOD_LABELS[periodKey]}
+      </div>
+    );
+  }
+
+  renderItems() {
+    if (!this.props.divideByPeriods) {
+      return this.props.items
+        .map(item => this.props.renderItem(item))
+        .unshift(this.props.headerComponent);
+    }
+
+    const { hoursAgo12, daysAgo1, daysAgo7, daysAgo14, daysAgo30 } = this.state.periodDates;
+
+    const itemElsByPeriod = this.props.items.reduce(
+      (result, item, index) => {
+        let periodKey;
+        const itemEl = this.props.renderItem(item, index);
+        // NOTE: Backward compatibility for immutable objects in list
+        const pathToCreatedAt = get(item, this.props.pathToCreatedAt);
+        const itemAt = moment(pathToCreatedAt);
+
+        if (itemAt >= hoursAgo12) {
+          periodKey = 'newerThan12Hours';
+        } else if (itemAt < hoursAgo12 && itemAt >= daysAgo1) {
+          periodKey = 'olderThan12Hours';
+        } else if (itemAt < daysAgo1 && itemAt >= daysAgo7) {
+          periodKey = 'olderThan1Days';
+        } else if (itemAt < daysAgo7 && itemAt >= daysAgo14) {
+          periodKey = 'olderThan7Days';
+        } else if (itemAt < daysAgo14 && itemAt >= daysAgo30) {
+          periodKey = 'olderThan14Days';
+        } else if (itemAt < daysAgo30) {
+          periodKey = 'olderThan30Days';
+        }
+
+        return set(result, [periodKey, result[periodKey].length], itemEl);
+      },
+      {
+        newerThan12Hours: [],
+        olderThan12Hours: [],
+        olderThan1Days: [],
+        olderThan7Days: [],
+        olderThan14Days: [],
+        olderThan30Days: [],
+      }
+    );
+
+    const itemElsWithPeriodEls = Object.keys(itemElsByPeriod).reduce((result, periodEls) => {
+      if (itemElsByPeriod[periodEls].length === 0) return result.concat(itemElsByPeriod[periodEls]);
+
+      return result.concat([this.renderPeriodSeparator(periodEls), ...itemElsByPeriod[periodEls]]);
+    }, []);
+
+    const itemElsWithPeriodElsWithHeaderEl = [this.props.headerComponent, ...itemElsWithPeriodEls];
+
+    return itemElsWithPeriodElsWithHeaderEl;
+  }
+
+  render() {
+    return (
+      <div
+        className={classNames(styles.cInfiniteList, this.props.infiniteClassName, {
+          [styles.cInfiniteListOverflow]: !this.props.useWindow,
+        })}
+        style={{ height: this.props.infiniteContainerHeight }}
+      >
+        <InfiniteScroll
+          loadMore={this.loadItems}
+          hasMore={this.props.moreItemsMayExist && !this.props.showNoItemsFound}
+          threshold={this.props.threshold} // NOTE: We should load infinite scroll next page before user get to bottom
+          loader={<LoadingIndicator key="c-infinite-scroll__loader" fullscreen={false} />}
+          useWindow={this.props.useWindow}
+          initialLoad={this.props.initialLoad}
+        >
+          {this.renderItems()}
+        </InfiniteScroll>
+
+        {this.props.showNoItemsFound && this.renderNoItemsLabel()}
+      </div>
+    );
+  }
+}
+
+InfiniteList.propTypes = {
+  infiniteClassName: PropTypes.string,
+  useWindow: PropTypes.bool,
+  headerComponent: PropTypes.node,
+  // NOTE: Backward compatibility with immutable;
+  // Remove when get rid of immutablejs
+  items: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+  showNoItemsFound: PropTypes.bool.isRequired,
+  noItemsFoundLabel: PropTypes.string.isRequired,
+  infiniteContainerHeight: PropTypes.number,
+  moreItemsMayExist: PropTypes.bool.isRequired,
+  pathToCreatedAt: PropTypes.arrayOf(PropTypes.string).isRequired,
+  renderItem: PropTypes.func.isRequired,
+  loadItems: PropTypes.func.isRequired,
+  threshold: PropTypes.number,
+  initialLoad: PropTypes.bool,
+  divideByPeriods: PropTypes.bool,
+};
+
+InfiniteList.defaultProps = {
+  infiniteClassName: null,
+  useWindow: false,
+  headerComponent: null,
+  infiniteContainerHeight: null,
+  threshold: 3000,
+  initialLoad: true,
+  divideByPeriods: true,
+};
+
+export default InfiniteList;

package/src/components/InfiniteList/styles.css

@@ -0,0 +1,28 @@
+.cInfiniteList {
+  -webkit-overflow-scrolling: touch;
+}
+.cInfiniteListOverflow {
+  overflow: auto;
+}
+
+.cInfiniteListEmpty {
+  font-size: 1.3rem;
+  color: #999;
+  padding: 0 0 0 5px;
+}
+
+.cInfiniteListPeriod {
+  font-size: 14px;
+  margin-bottom: 10px;
+  margin-top: 30px;
+}
+
+/* NOTE: Without headerComponent */
+.cInfiniteListPeriod:nth-child(1) {
+  margin-top: 0;
+}
+
+/* NOTE: With headerComponent */
+.cInfiniteListPeriod:nth-child(2) {
+  margin-top: 0;
+}

package/src/components/KeyboardDateTimePicker.js

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+
+import { KeyboardDateTimePicker as MuiKeyboardDateTimePicker } from '@material-ui/pickers';
+
+const PAGE_NAME = 'KeyboardDateTimePicker';
+
+const DEFAULT_DATE_TIME_FORMAT = 'MM/DD/YYYY HH:mm';
+const SUPPORTED_FORMATS = [
+  'MM/DD/YYYY HH:mm',
+  'M/D/YYYY HH:mm',
+  'MM/DD/YYYY, HH:mm',
+  'M/D/YYYY, HH:mm',
+  'MMM DD, YYYY HH:mm',
+  'MMM D, YYYY HH:mm',
+  'MM/DD/YY HH:mm',
+  'M/D/YY HH:mm'
+];
+const REFUSE_REGEXP = new RegExp('[^\\.\\ \\,\\[a-zA-Z0-9_]*$]+', 'gi');
+
+const KeyboardDateTimePicker = props => {
+  const { format, onChange, label } = props;
+
+  const [dynamicFormat, setDynamicFormat] = useState(format);
+  const [inputValue, setInputValue] = useState(null);
+
+  const dateFormatter = str => {
+    return str;
+  };
+
+  const handleDateChange = (date, newInputValue) => {
+    const momentObj = moment(newInputValue, [...SUPPORTED_FORMATS, format], true);
+    const isValidDate = momentObj.isValid();
+
+    setDynamicFormat(prev => (isValidDate ? momentObj.creationData().format : prev));
+    setInputValue(newInputValue);
+    onChange(isValidDate ? momentObj : date, newInputValue);
+  };
+
+  return (
+    <MuiKeyboardDateTimePicker
+      data-testid={`${PAGE_NAME}_${label}`}
+      rifmFormatter={dateFormatter}
+      refuse={REFUSE_REGEXP}
+      inputValue={inputValue}
+      {...props}
+      format={dynamicFormat}
+      onChange={handleDateChange}
+    />
+  );
+};
+
+KeyboardDateTimePicker.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  format: PropTypes.string,
+  label: PropTypes.string,
+};
+
+KeyboardDateTimePicker.defaultProps = {
+  format: DEFAULT_DATE_TIME_FORMAT,
+  label: 'Date',
+};
+
+export default KeyboardDateTimePicker;