@nutui/nutui-react/dist/esm/TimeSelect.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as __rest } from "./tslib.es6.js";
import React__default, { useState } from "react";
import classNames from "classnames";
import Popup__default from "./Popup.js";
import TimeDetail__default from "./TimeDetail.js";
import { C as ComponentDefaults } from "./typings.js";
import { useConfig } from "./ConfigProvider.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { visible: false, multiple: false, defaultValue: [], options: [], optionKey: {
  valueKey: "value",
  textKey: "text",
  childrenKey: "children"
} });
const TimeSelect = (props) => {
  const { locale } = useConfig();
  const _a = Object.assign(Object.assign({}, defaultProps), props), { visible, className, style, title, defaultValue, options, optionKey, multiple, onSelect, onDateChange, onTimeChange } = _a, rest = __rest(_a, ["visible", "className", "style", "title", "defaultValue", "options", "optionKey", "multiple", "onSelect", "onDateChange", "onTimeChange"]);
  const [activeDate, setActiveDate] = useState(() => {
    if (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) {
      return defaultValue[0][optionKey.valueKey];
    }
    if (options === null || options === void 0 ? void 0 : options.length) {
      return options[0][optionKey.valueKey];
    }
    return "";
  });
  const [activeTime, setActiveTime] = useState(() => defaultValue || []);
  const classPrefix = "nut-timeselect";
  const closeFun = () => {
    onSelect && onSelect(activeTime);
  };
  const handleSelectTime = (selectTime) => {
    let newActiveTime = [...activeTime];
    const date = newActiveTime.find((item) => {
      return item[optionKey.valueKey] === activeDate;
    });
    if (date) {
      const timeIndex = date[optionKey.childrenKey].findIndex((time) => {
        return time[optionKey.valueKey] === selectTime[optionKey.valueKey];
      });
      if (timeIndex > -1) {
        if (multiple) {
          date[optionKey.childrenKey].splice(timeIndex, 1);
        } else {
          newActiveTime = [];
        }
      } else if (multiple) {
        date[optionKey.childrenKey].push(Object.assign({}, selectTime));
      } else {
        newActiveTime = [
          {
            [optionKey.valueKey]: activeDate,
            [optionKey.childrenKey]: [Object.assign({}, selectTime)]
          }
        ];
      }
    } else if (multiple) {
      newActiveTime.push({
        [optionKey.valueKey]: activeDate,
        [optionKey.childrenKey]: [Object.assign({}, selectTime)]
      });
    } else {
      newActiveTime = [
        {
          [optionKey.valueKey]: activeDate,
          [optionKey.childrenKey]: [Object.assign({}, selectTime)]
        }
      ];
    }
    newActiveTime = newActiveTime.filter((item) => {
      var _a2;
      return ((_a2 = item[optionKey.childrenKey]) === null || _a2 === void 0 ? void 0 : _a2.length) > 0;
    });
    setActiveTime(newActiveTime);
    onTimeChange && onTimeChange(selectTime, newActiveTime);
  };
  const handleChange = (date) => {
    setActiveDate(date[optionKey.valueKey]);
    onDateChange && onDateChange(date, activeTime);
  };
  return React__default.createElement(
    Popup__default,
    Object.assign({ closeable: true, round: true, visible, position: "bottom", title: title || locale.timeselect.pickupTime, style: Object.assign({ width: "100%", height: "20%" }, style), onClose: closeFun }, rest),
    React__default.createElement(
      "div",
      { className: classNames(classPrefix, className) },
      React__default.createElement(
        "div",
        { className: `${classPrefix}-content` },
        React__default.createElement("div", { className: `${classPrefix}-content-left` }, options.map((item) => React__default.createElement("div", { key: item[optionKey.valueKey], className: classNames("nut-timepannel", {
          active: item[optionKey.valueKey] === activeDate
        }), onClick: () => handleChange(item) }, item[optionKey.textKey]))),
        React__default.createElement(TimeDetail__default, { options, optionKey, activeDate, activeTime, onSelect: handleSelectTime })
      )
    )
  );
};
TimeSelect.displayName = "NutTimeSelect";
export {
  TimeSelect as default
};