@zohodesk/components/es/DateTime/Time.js

In this Package, we Provide Some Basic Components to Build Web App

/* eslint-disable react/forbid-component-props */

/** ** Libraries *** */
import React, { PureComponent } from 'react';
import { Time_propTypes } from "./props/propTypes";
import { Time_defaultProps } from "./props/defaultProps";
/**** Components ****/

import { Container, Box } from "../Layout";
import Select from "../Select/Select";
/** ** CSS *** */

import style from "./DateTime.module.css";
export default class Time extends PureComponent {
  render() {
    const {
      timeText,
      dataId,
      hourSuggestions,
      onHourSelect,
      hours,
      hourEmptyText,
      needResponsive,
      minSuggestions,
      onMinutesSelect,
      mins,
      minuteEmptyText,
      ampmSuggestions,
      onAmPmSelect,
      amPm,
      is24Hour,
      customProps = {}
    } = this.props;
    const {
      HourSelectProps = {},
      MinuteSelectProps = {},
      AmPmSelectProps = {}
    } = customProps;
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
      className: style.text
    }, timeText), /*#__PURE__*/React.createElement(Container, {
      alignBox: "row",
      align: "vertical",
      className: style.timesection,
      isCover: false,
      dataId: `${dataId}_timeContainer`
    }, /*#__PURE__*/React.createElement(Box, {
      flexible: true,
      className: style.dropDownContainer
    }, /*#__PURE__*/React.createElement(Hour, {
      hourSuggestions: hourSuggestions,
      onHourSelect: onHourSelect,
      hours: hours,
      needResponsive: needResponsive,
      hourEmptyText: hourEmptyText,
      customProps: HourSelectProps
    })), /*#__PURE__*/React.createElement(Box, {
      flexible: true,
      className: style.dropDownContainer
    }, /*#__PURE__*/React.createElement(Minute, {
      minSuggestions: minSuggestions,
      onMinutesSelect: onMinutesSelect,
      mins: mins,
      minuteEmptyText: minuteEmptyText,
      needResponsive: needResponsive,
      customProps: MinuteSelectProps
    })), !is24Hour ? /*#__PURE__*/React.createElement(Box, {
      flexible: true,
      className: style.dropDownContainer
    }, /*#__PURE__*/React.createElement(AmPm, {
      ampmSuggestions: ampmSuggestions,
      onAmPmSelect: onAmPmSelect,
      amPm: amPm,
      needResponsive: needResponsive,
      customProps: AmPmSelectProps
    })) : null));
  }

}
Time.propTypes = Time_propTypes;
Time.defaultProps = Time_defaultProps;

class Hour extends React.PureComponent {
  render() {
    const {
      hourSuggestions,
      onHourSelect,
      hours,
      needResponsive,
      hourEmptyText,
      customProps
    } = this.props;
    return /*#__PURE__*/React.createElement(Select, {
      options: hourSuggestions,
      onChange: onHourSelect,
      selectedValue: hours,
      needSearch: true,
      emptyMessage: hourEmptyText,
      animationStyle: "bounce",
      textBoxSize: "xmedium",
      textBoxVariant: "primary",
      searchBoxSize: "xmedium",
      searchBoxPlaceHolder: "",
      maxLength: "2",
      popupGroup: "calender",
      size: "small",
      dataId: "hourField",
      needResponsive: needResponsive,
      needListBorder: true,
      needTick: false,
      listItemSize: "small",
      ...customProps
    });
  }

}

class Minute extends React.PureComponent {
  render() {
    const {
      minSuggestions,
      onMinutesSelect,
      mins,
      minuteEmptyText,
      needResponsive,
      customProps
    } = this.props;
    return /*#__PURE__*/React.createElement(Select, {
      options: minSuggestions,
      onChange: onMinutesSelect,
      selectedValue: mins,
      needSearch: true,
      emptyMessage: minuteEmptyText,
      animationStyle: "bounce",
      textBoxSize: "xmedium",
      textBoxVariant: "primary",
      searchBoxSize: "xmedium",
      searchBoxPlaceHolder: "",
      maxLength: "2",
      popupGroup: "calender",
      size: "small",
      dataId: "minuteField",
      needResponsive: needResponsive,
      needListBorder: true,
      needTick: false,
      listItemSize: "small",
      ...customProps
    });
  }

}

class AmPm extends React.PureComponent {
  render() {
    const {
      ampmSuggestions,
      onAmPmSelect,
      amPm,
      needResponsive,
      customProps
    } = this.props;
    return /*#__PURE__*/React.createElement(Select, {
      options: ampmSuggestions,
      onChange: onAmPmSelect,
      selectedValue: amPm,
      animationStyle: "bounce",
      textBoxSize: "xmedium",
      textBoxVariant: "primary",
      maxLength: "2",
      popupGroup: "calender",
      size: "small",
      dataId: "ampmField",
      needResponsive: needResponsive,
      needListBorder: true,
      needTick: false,
      listItemSize: "small",
      ...customProps
    });
  }

}