@nutui/nutui-react 1.3.0 → 1.3.1-beta.0

package/dist/esm/Audio/style/index.js

@@ -0,0 +1,4 @@
+require('../../Icon/style')
+require('../../Button/style')
+require('../../Range/style')
+require('../../../packages/audio/audio.scss')

package/dist/esm/Audio.js

@@ -0,0 +1,293 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "url", "style", "muted", "autoplay", "loop", "preload", "type", "onFastBack", "onForward", "onPause", "onPlayEnd", "onMute", "onCanPlay", "children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React__default, { useState, useRef, useEffect } from 'react';
+import Icon from './Icon.js';
+import Range from './Range.js';
+import { c as cn } from './bem-893ad28d.js';
+import Button from './Button.js';
+import { useConfig } from './ConfigProvider.js';
+import '@bem-react/classname';
+var defaultProps = {
+  className: '',
+  url: '',
+  style: {},
+  muted: false,
+  autoplay: false,
+  loop: false,
+  preload: 'auto',
+  type: 'progress',
+  onFastBack: function onFastBack(e) {},
+  onForward: function onForward(e) {},
+  onPause: function onPause(e) {},
+  onPlayEnd: function onPlayEnd(e) {},
+  onMute: function onMute(e) {},
+  onCanPlay: function onCanPlay(e) {}
+};
+
+var Audio = function Audio(props) {
+  var _useConfig = useConfig(),
+      locale = _useConfig.locale;
+
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      className = _defaultProps$props.className,
+      url = _defaultProps$props.url,
+      style = _defaultProps$props.style,
+      muted = _defaultProps$props.muted,
+      autoplay = _defaultProps$props.autoplay,
+      loop = _defaultProps$props.loop,
+      preload = _defaultProps$props.preload,
+      type = _defaultProps$props.type,
+      onFastBack = _defaultProps$props.onFastBack,
+      onForward = _defaultProps$props.onForward,
+      onPause = _defaultProps$props.onPause,
+      onPlayEnd = _defaultProps$props.onPlayEnd,
+      onMute = _defaultProps$props.onMute,
+      onCanPlay = _defaultProps$props.onCanPlay,
+      children = _defaultProps$props.children,
+      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      playing = _useState2[0],
+      setPlaying = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      percent = _useState4[0],
+      setPercent = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isCanPlay = _useState6[0],
+      setIsCanPlay = _useState6[1];
+
+  var _useState7 = useState('00:00:00'),
+      _useState8 = _slicedToArray(_useState7, 2),
+      currentDuration = _useState8[0],
+      setCurrentDuration = _useState8[1];
+
+  var AudioRef = useRef(null);
+  var statusRef = useRef({
+    currentTime: 0,
+    currentDuration: '00:00:00',
+    percent: 0,
+    duration: '00:00:00',
+    second: 0,
+    hanMuted: props.muted,
+    playing: props.autoplay,
+    handPlaying: false
+  });
+  var b = cn('audio');
+  var warn = console.warn;
+
+  var handleEnded = function handleEnded(e) {
+    if (props.loop) {
+      warn(locale.audio.tips || 'onPlayEnd事件在loop=false时才会触发');
+    } else {
+      props.onPlayEnd && props.onPlayEnd(e);
+    }
+  };
+
+  function watch() {
+    if (AudioRef && AudioRef.current) {
+      var current = AudioRef.current;
+      current.addEventListener('play', function () {
+        setPlaying(true);
+      });
+    }
+  }
+
+  useEffect(function () {
+    watch();
+  }, []);
+  useEffect(function () {}, [currentDuration]);
+
+  var handleStatusChange = function handleStatusChange() {
+    setPlaying(!playing);
+
+    if (playing) {
+      AudioRef && AudioRef.current && AudioRef.current.pause();
+    } else {
+      AudioRef && AudioRef.current && AudioRef.current.play();
+    }
+  };
+
+  var renderIcon = function renderIcon() {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: b('icon')
+    }, React__default.createElement("div", {
+      className: "".concat(b('icon-box'), " ").concat(playing ? b('icon-play') : b('icon-stop')),
+      onClick: handleStatusChange
+    }, playing ? React__default.createElement(Icon, {
+      name: "service",
+      className: "nut-icon-loading"
+    }) : React__default.createElement(Icon, {
+      name: "service"
+    }))));
+  };
+
+  var handleBack = function handleBack() {
+    if (statusRef.current.currentTime > 0 && AudioRef.current) {
+      statusRef.current.currentTime--;
+      AudioRef.current.currentTime = statusRef.current.currentTime;
+      props.onFastBack && props.onFastBack(AudioRef.current);
+    }
+  };
+
+  var handleForward = function handleForward() {
+    if (AudioRef.current) {
+      statusRef.current.currentTime++;
+      AudioRef.current.currentTime = statusRef.current.currentTime;
+      props.onForward && props.onForward(AudioRef.current);
+    }
+  };
+
+  var handleMute = function handleMute() {
+    if (AudioRef.current) {
+      AudioRef.current.muted = !AudioRef.current.muted;
+      props.onMute && props.onMute(AudioRef.current);
+    }
+  };
+
+  var handlePause = function handlePause(e) {
+    setPlaying(false);
+    props.onPause && props.onPause(e);
+  };
+
+  var formatSeconds = function formatSeconds(value) {
+    if (!value) {
+      return '00:00:00';
+    }
+
+    var time = parseInt(value);
+    var hours = Math.floor(time / 3600);
+    var minutes = Math.floor((time - hours * 3600) / 60);
+    var seconds = time - hours * 3600 - minutes * 60;
+    var result = '';
+    result += "".concat("0".concat(hours.toString()).slice(-2), ":");
+    result += "".concat("0".concat(minutes.toString()).slice(-2), ":");
+    result += "0".concat(seconds.toString()).slice(-2);
+    return result;
+  };
+
+  var renderProgerss = function renderProgerss() {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: b('progress')
+    }, React__default.createElement("div", {
+      className: "time"
+    }, currentDuration), React__default.createElement("div", {
+      className: b('progress-bar-wrapper')
+    }, React__default.createElement(Range, {
+      modelValue: percent,
+      hiddenTag: true,
+      hiddenRange: true,
+      "inactive-color": "#cccccc",
+      "active-color": "#fa2c19"
+    })), React__default.createElement("div", {
+      className: "time"
+    }, AudioRef.current ? formatSeconds("".concat(statusRef.current.second)) : '00:00:00')), React__default.createElement("div", {
+      className: isCanPlay ? 'custom-button-group' : 'custom-button-group-disable'
+    }, React__default.createElement(Button, {
+      type: "primary",
+      size: "small",
+      className: "back",
+      onClick: handleBack
+    }, locale.audio.back || '快退'), React__default.createElement(Button, {
+      type: "primary",
+      size: "small",
+      className: "start",
+      onClick: handleStatusChange
+    }, playing ? "".concat(locale.audio.pause || '暂停') : "".concat(locale.audio.start || '开始')), React__default.createElement(Button, {
+      type: "primary",
+      size: "small",
+      onClick: handleForward
+    }, locale.audio.forward || '快进'), React__default.createElement(Button, {
+      type: AudioRef.current && AudioRef.current.muted ? 'default' : 'primary',
+      size: "small",
+      onClick: handleMute
+    }, locale.audio.mute || '静音')));
+  };
+
+  var renderNone = function renderNone() {
+    return React__default.createElement("div", {
+      className: b('none-container'),
+      onClick: handleStatusChange
+    }, children);
+  };
+
+  var renderAudio = function renderAudio() {
+    switch (type) {
+      case 'icon':
+        return renderIcon();
+
+      case 'progress':
+        return renderProgerss();
+
+      case 'none':
+        return renderNone();
+
+      default:
+        return null;
+    }
+  };
+
+  var handleCanplay = function handleCanplay(e) {
+    setIsCanPlay(true);
+
+    if (props.autoplay && !playing) {
+      AudioRef && AudioRef.current && AudioRef.current.play();
+    }
+
+    if (AudioRef.current) {
+      statusRef.current.second = AudioRef.current.duration || 0;
+      props.onCanPlay && props.onCanPlay(e);
+    }
+  };
+
+  var onTimeupdate = function onTimeupdate(e) {
+    var time = parseInt(e.target.currentTime);
+    var formated = formatSeconds("".concat(time));
+    statusRef.current.currentDuration = formated;
+    setPercent(time / statusRef.current.second * 100);
+    setCurrentDuration(formated);
+    statusRef.current.currentTime = time;
+  };
+
+  return React__default.createElement("div", _objectSpread({
+    className: "".concat(b(), " ").concat(className),
+    style: style
+  }, rest), renderAudio(), React__default.createElement("audio", {
+    className: "audioMain",
+    controls: type === 'controls',
+    ref: AudioRef,
+    src: url,
+    muted: muted,
+    preload: preload,
+    loop: loop,
+    onPause: function onPause(e) {
+      return handlePause(e);
+    },
+    onEnded: function onEnded(e) {
+      return handleEnded(e);
+    },
+    onCanPlay: function onCanPlay(e) {
+      return handleCanplay(e);
+    },
+    onTimeUpdate: function onTimeUpdate(e) {
+      return onTimeupdate(e);
+    }
+  }, React__default.createElement("track", {
+    kind: "captions"
+  })));
+};
+
+Audio.defaultProps = defaultProps;
+Audio.displayName = 'NutAudio';
+export { Audio as default };

package/dist/esm/Calendar/style/index.js

@@ -1,3 +1,2 @@
-require('../../Popup/style')
-require('../../CalendarItem/style')
+require('../../Popup/style')
 require('../../../packages/calendar/calendar.scss')

package/dist/esm/Calendar.js

@@ -4,7 +4,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import Popup from './Popup.js';
 import CalendarItem from './CalendarItem.js';
 import { U as Utils } from './date-710f8c7c.js';
@@ -18,16 +18,26 @@ var defaultProps = {
   defaultValue: '',
   startDate: Utils.getDay(0),
   endDate: Utils.getDay(365),
+  showToday: true,
+  startText: '开始',
+  endText: '结束',
+  confirmText: '确认',
+  showTitle: true,
+  showSubTitle: true,
+  toDateAnimation: true,
+  onBtn: undefined,
+  onDay: undefined,
+  onTopInfo: undefined,
+  onBottomInfo: undefined,
   onClose: function onClose() {},
-  onChoose: function onChoose(param) {}
+  onChoose: function onChoose(param) {},
+  onSelected: function onSelected(data) {}
 };
-
-var Calendar = function Calendar(props) {
+var Calendar = React__default.forwardRef(function (props, ref) {
   var _useConfig = useConfig(),
       locale = _useConfig.locale;
 
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-      children = _defaultProps$props.children,
       poppable = _defaultProps$props.poppable,
       visible = _defaultProps$props.visible,
       type = _defaultProps$props.type,
@@ -36,15 +46,27 @@ var Calendar = function Calendar(props) {
       defaultValue = _defaultProps$props.defaultValue,
       startDate = _defaultProps$props.startDate,
       endDate = _defaultProps$props.endDate,
+      showToday = _defaultProps$props.showToday,
+      startText = _defaultProps$props.startText,
+      endText = _defaultProps$props.endText,
+      confirmText = _defaultProps$props.confirmText,
+      showTitle = _defaultProps$props.showTitle,
+      showSubTitle = _defaultProps$props.showSubTitle,
+      toDateAnimation = _defaultProps$props.toDateAnimation,
+      onBtn = _defaultProps$props.onBtn,
+      onDay = _defaultProps$props.onDay,
+      onTopInfo = _defaultProps$props.onTopInfo,
+      onBottomInfo = _defaultProps$props.onBottomInfo,
       onClose = _defaultProps$props.onClose,
-      onChoose = _defaultProps$props.onChoose;
+      onChoose = _defaultProps$props.onChoose,
+      onSelected = _defaultProps$props.onSelected;
+
+  var calendarRef = useRef(null);
 
   var close = function close() {
     onClose && onClose();
   };
 
-  var update = function update() {};
-
   var choose = function choose(param) {
     close();
     onChoose && onChoose(param);
@@ -54,37 +76,62 @@ var Calendar = function Calendar(props) {
     close();
   };
 
+  var select = function select(param) {
+    onSelected && onSelected(param);
+  };
+
+  var scrollToDate = function scrollToDate(date) {
+    var _calendarRef$current;
+
+    (_calendarRef$current = calendarRef.current) === null || _calendarRef$current === void 0 ? void 0 : _calendarRef$current.scrollToDate(date);
+  };
+
+  React__default.useImperativeHandle(ref, function () {
+    return {
+      scrollToDate: scrollToDate
+    };
+  });
+
+  var renderItem = function renderItem() {
+    return React__default.createElement(CalendarItem, {
+      ref: calendarRef,
+      type: type,
+      isAutoBackFill: isAutoBackFill,
+      poppable: poppable,
+      title: locale.calendaritem.title || title,
+      defaultValue: defaultValue,
+      startDate: startDate,
+      endDate: endDate,
+      showToday: showToday,
+      startText: startText,
+      endText: endText,
+      confirmText: confirmText,
+      showTitle: showTitle,
+      showSubTitle: showSubTitle,
+      toDateAnimation: toDateAnimation,
+      onBtn: onBtn,
+      onDay: onDay,
+      onTopInfo: onTopInfo,
+      onBottomInfo: onBottomInfo,
+      onChoose: choose,
+      onSelected: select
+    });
+  };
+
   return React__default.createElement(React__default.Fragment, null, poppable ? React__default.createElement(Popup, {
     visible: visible,
     position: "bottom",
     round: true,
+    duration: 0.5,
     closeable: true,
+    destroyOnClose: true,
     onClickOverlay: closePopup,
-    onClickCloseIcon: closePopup
-  }, React__default.createElement(CalendarItem, {
-    type: type,
-    isAutoBackFill: isAutoBackFill,
-    poppable: poppable,
-    title: locale.calendaritem.title || title,
-    defaultValue: defaultValue,
-    startDate: startDate,
-    endDate: endDate,
-    onUpdate: update,
-    onClose: close,
-    onChoose: choose
-  })) : React__default.createElement(CalendarItem, {
-    type: type,
-    isAutoBackFill: isAutoBackFill,
-    poppable: poppable,
-    title: locale.calendaritem.title,
-    defaultValue: defaultValue,
-    startDate: startDate,
-    endDate: endDate,
-    onClose: close,
-    onChoose: choose
-  }));
-};
-
+    onClickCloseIcon: closePopup,
+    style: {
+      height: '85vh'
+    }
+  }, renderItem()) : renderItem());
+});
 Calendar.defaultProps = defaultProps;
 Calendar.displayName = 'NutCalendar';
 export { Calendar as default };