@cfxjs/react-ui/esm/date-picker/generate-picker/generate-single-picker.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import * as React from 'react';
import { useMemo } from 'react';
import { Calendar, Clock } from '@zeit-ui/react-icons';
import RCPicker from '@jnoodle/rc-picker';
import { getLocale, getPlaceholder } from '../util';
import { Components, getTimeProps } from '.';
import InputClearIcon from '../../input/input-icon-clear';
import InputIcon from '../../input/input-icon';
import { getSizes } from '../../input/styles';
import withStyle from './with-style';
export default function generatePicker(generateConfig) {
  function getPicker(picker) {
    var Picker = function Picker(props) {
      var forwardedRef = props.forwardedRef,
          customizePrefixCls = props.prefixCls,
          customizeGetPopupContainer = props.getPopupContainer,
          _props$className = props.className,
          className = _props$className === void 0 ? '' : _props$className,
          _props$locale = props.locale,
          locale = _props$locale === void 0 ? 'en-US' : _props$locale,
          _props$size = props.size,
          customizeSize = _props$size === void 0 ? 'medium' : _props$size,
          _props$variant = props.variant,
          customizeVariant = _props$variant === void 0 ? 'line' : _props$variant,
          _props$color = props.color,
          customizeColor = _props$color === void 0 ? 'default' : _props$color,
          _props$bordered = props.bordered,
          bordered = _props$bordered === void 0 ? true : _props$bordered,
          placeholder = props.placeholder,
          restProps = _objectWithoutProperties(props, ["forwardedRef", "prefixCls", "getPopupContainer", "className", "locale", "size", "variant", "color", "bordered", "placeholder"]);

      var _ref = props,
          format = _ref.format,
          showTime = _ref.showTime;
      var prefixCls = "".concat(customizePrefixCls || 'cfx', "-picker");

      var _useMemo = useMemo(function () {
        return getSizes(customizeSize);
      }, [customizeSize]),
          inputHeightRatio = _useMemo.heightRatio;

      var additionalProps = {
        showToday: true
      };
      var additionalOverrideProps = {};

      if (picker) {
        additionalOverrideProps.picker = picker;
      }

      var mergedPicker = picker || props.picker;
      additionalOverrideProps = _extends(_extends(_extends({}, additionalOverrideProps), showTime ? getTimeProps(_extends({
        format: format,
        picker: mergedPicker
      }, showTime)) : {}), mergedPicker === 'time' ? getTimeProps(_extends(_extends({
        format: format
      }, props), {}, {
        picker: mergedPicker
      })) : {});
      return /*#__PURE__*/React.createElement(RCPicker, _extends({
        ref: forwardedRef,
        placeholder: getPlaceholder(mergedPicker, locale, placeholder),
        suffixIcon: mergedPicker === 'time' ? /*#__PURE__*/React.createElement(InputIcon, {
          icon: /*#__PURE__*/React.createElement(Clock, null),
          ratio: inputHeightRatio,
          clickable: false
        }) : /*#__PURE__*/React.createElement(InputIcon, {
          icon: /*#__PURE__*/React.createElement(Calendar, null),
          ratio: inputHeightRatio,
          clickable: false
        }),
        clearIcon: /*#__PURE__*/React.createElement(InputIcon, {
          icon: /*#__PURE__*/React.createElement(InputClearIcon, {
            visible: true,
            heightRatio: inputHeightRatio
          }),
          ratio: inputHeightRatio,
          clickable: false
        }),
        allowClear: true,
        transitionName: "slide-up"
      }, additionalProps, restProps, additionalOverrideProps, {
        locale: getLocale(locale),
        className: "".concat(prefixCls, "-size-").concat(customizeSize, " ").concat(prefixCls, "-variant-").concat(customizeVariant, " ").concat(prefixCls, "-color-").concat(customizeColor, " ").concat(!bordered ? "".concat(prefixCls, "-borderless") : '', " ").concat(className),
        prefixCls: prefixCls,
        getPopupContainer: customizeGetPopupContainer,
        generateConfig: generateConfig,
        prevIcon: /*#__PURE__*/React.createElement("span", {
          className: "".concat(prefixCls, "-prev-icon")
        }),
        nextIcon: /*#__PURE__*/React.createElement("span", {
          className: "".concat(prefixCls, "-next-icon")
        }),
        superPrevIcon: /*#__PURE__*/React.createElement("span", {
          className: "".concat(prefixCls, "-super-prev-icon")
        }),
        superNextIcon: /*#__PURE__*/React.createElement("span", {
          className: "".concat(prefixCls, "-super-next-icon")
        }),
        components: Components,
        direction: "ltr"
      }));
    };

    return withStyle(React.memo(Picker));
  }

  var DatePicker = getPicker();
  var WeekPicker = getPicker('week');
  var MonthPicker = getPicker('month');
  var YearPicker = getPicker('year');
  var TimePicker = getPicker('time');
  var QuarterPicker = getPicker('quarter');
  return {
    DatePicker: DatePicker,
    WeekPicker: WeekPicker,
    MonthPicker: MonthPicker,
    YearPicker: YearPicker,
    TimePicker: TimePicker,
    QuarterPicker: QuarterPicker
  };
}