@nutui/nutui-react 1.5.2-beta.0 → 1.5.2-beta.1

package/dist/esm/CollapseItem.js

@@ -0,0 +1,148 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "title", "isOpen", "onToggle", "name", "disabled", "icon", "rotate", "subTitle", "titleIcon", "titleIconColor", "titleIconPosition", "titleIconSize", "iconSize", "iconColor", "childnull", "iconClassPrefix", "iconFontClassName"];
+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, useCallback, useEffect } from 'react';
+import { c as cn } from './bem-3b438e61.js';
+import Icon from './Icon.js';
+import { C as ComponentDefaults } from './typings-f27b58f4.js';
+import '@bem-react/classname';
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  title: '',
+  name: '',
+  isOpen: false,
+  icon: '',
+  iconSize: '',
+  iconColor: '',
+  disabled: false,
+  rotate: 180,
+  subTitle: '',
+  titleIcon: '',
+  titleIconColor: '',
+  titleIconPosition: '',
+  titleIconSize: '',
+  childnull: true
+});
+var CollapseItem = function CollapseItem(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+    children = _defaultProps$props.children,
+    title = _defaultProps$props.title,
+    isOpen = _defaultProps$props.isOpen,
+    onToggle = _defaultProps$props.onToggle,
+    name = _defaultProps$props.name,
+    disabled = _defaultProps$props.disabled,
+    icon = _defaultProps$props.icon,
+    rotate = _defaultProps$props.rotate,
+    subTitle = _defaultProps$props.subTitle,
+    titleIcon = _defaultProps$props.titleIcon,
+    titleIconColor = _defaultProps$props.titleIconColor,
+    titleIconPosition = _defaultProps$props.titleIconPosition,
+    titleIconSize = _defaultProps$props.titleIconSize,
+    iconSize = _defaultProps$props.iconSize,
+    iconColor = _defaultProps$props.iconColor,
+    childnull = _defaultProps$props.childnull,
+    iconClassPrefix = _defaultProps$props.iconClassPrefix,
+    iconFontClassName = _defaultProps$props.iconFontClassName,
+    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _useState = useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    domHeight = _useState2[0],
+    setDomHeight = _useState2[1]; // 保存content的高度
+  var _useState3 = useState('auto'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currHeight = _useState4[0],
+    setCurrHeight = _useState4[1]; // 设置content的高度
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    update = _useState6[0],
+    setUpdate = _useState6[1];
+  var _useState7 = useState({
+      transform: 'translateY(-50%)'
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    iconStyle = _useState8[0],
+    setIconStyle = _useState8[1];
+  var colBem = cn('collapse-item');
+  var measuredRef = useCallback(function (node) {
+    if (node !== null) {
+      setDomHeight(node.getBoundingClientRect().height);
+    }
+  }, [update]);
+  useEffect(function () {
+    // 一开始content都有高度，在这里根据isOpen，改变其高度
+    setTimeout(function () {
+      if (domHeight !== -1) {
+        isOpen ? setCurrHeight("".concat(domHeight, "px")) : setCurrHeight('0px');
+      }
+      var newIconStyle = isOpen ? {
+        transform: "translateY(-50%) rotate(".concat(rotate, "deg)")
+      } : {
+        transform: 'translateY(-50%)'
+      };
+      setIconStyle(newIconStyle);
+    }, 10);
+  }, [isOpen, domHeight, rotate]);
+  useEffect(function () {
+    if (!isOpen) {
+      setCurrHeight('0px');
+    } else {
+      setCurrHeight('auto');
+    }
+    setUpdate(!update);
+  }, [children, isOpen]);
+  return React__default.createElement("div", _objectSpread({
+    className: colBem()
+  }, rest), React__default.createElement("div", {
+    className: colBem('header', {
+      disabled: disabled
+    }),
+    onClick: function onClick() {
+      if (disabled) return;
+      onToggle && onToggle(isOpen, name);
+    }
+  }, React__default.createElement("div", {
+    className: colBem('title')
+  }, titleIcon && titleIconPosition === 'left' && React__default.createElement("b", {
+    className: colBem('title-icon-left')
+  }, React__default.createElement(Icon, {
+    classPrefix: iconClassPrefix,
+    fontClassName: iconFontClassName,
+    name: titleIcon,
+    size: titleIconSize,
+    color: disabled ? '#C2C2C2' : titleIconColor
+  })), title, titleIcon && titleIconPosition === 'right' && React__default.createElement("b", {
+    className: colBem('title-icon-right')
+  }, React__default.createElement(Icon, {
+    classPrefix: iconClassPrefix,
+    fontClassName: iconFontClassName,
+    name: titleIcon,
+    size: titleIconSize,
+    color: disabled ? '#C2C2C2' : titleIconColor
+  }))), React__default.createElement("div", {
+    className: colBem('sub-title')
+  }, subTitle), React__default.createElement("div", {
+    className: colBem('icon-box')
+  }, React__default.createElement("div", {
+    className: colBem('icon'),
+    style: iconStyle
+  }, React__default.createElement(Icon, {
+    classPrefix: iconClassPrefix,
+    fontClassName: iconFontClassName,
+    name: icon,
+    size: iconSize,
+    color: disabled ? '#C2C2C2' : iconColor
+  })))), childnull && React__default.createElement("div", {
+    className: colBem('content'),
+    style: {
+      height: currHeight
+    },
+    ref: measuredRef
+  }, React__default.createElement("div", {
+    className: colBem('content-text')
+  }, children)));
+};
+CollapseItem.defaultProps = defaultProps;
+CollapseItem.displayName = 'NutCollapseItem';
+export { CollapseItem as default };

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

@@ -0,0 +1,2 @@
+
+import '../../../packages/configprovider/configprovider.scss'

package/dist/esm/ConfigProvider.js

@@ -0,0 +1,187 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["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, { createContext, useContext, useMemo } from 'react';
+import kebabCase from 'lodash.kebabcase';
+var zhCN = {
+  save: '保存',
+  confirm: '确认',
+  cancel: '取消',
+  done: '完成',
+  noData: '暂无数据',
+  placeholder: '请输入内容',
+  select: '请选择',
+  video: {
+    errorTip: '视频加载失败',
+    clickRetry: '点击重试'
+  },
+  fixednav: {
+    activeText: '收起导航',
+    unActiveText: '快速导航'
+  },
+  infiniteloading: {
+    pullRefreshText: '松开刷新',
+    loadText: '加载中……',
+    loadMoreText: '哎呀，这里是底部了啦'
+  },
+  pagination: {
+    prev: '上一页',
+    next: '下一页'
+  },
+  range: {
+    rangeText: '不在该区间内'
+  },
+  calendaritem: {
+    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
+    end: '结束',
+    start: '开始',
+    confirm: '确认',
+    title: '日历选择',
+    monthTitle: function monthTitle(year, month) {
+      return "".concat(year, "\u5E74").concat(month, "\u6708");
+    },
+    today: '今天',
+    loadPreviousMonth: '加载上一个月',
+    noEarlierMonth: '没有更早月份'
+  },
+  shortpassword: {
+    title: '请输入密码',
+    desc: '您使用了虚拟资产，请进行验证',
+    tips: '忘记密码'
+  },
+  uploader: {
+    ready: '准备完成',
+    readyUpload: '准备上传',
+    waitingUpload: '等待上传',
+    uploading: '上传中...',
+    success: '上传成功',
+    error: '上传失败',
+    deleteWord: '用户阻止了删除！'
+  },
+  countdown: {
+    day: '天',
+    hour: '时',
+    minute: '分',
+    second: '秒'
+  },
+  address: {
+    selectRegion: '请选择所在地区',
+    deliveryTo: '配送至',
+    chooseAnotherAddress: '选择其他地址'
+  },
+  signature: {
+    reSign: '重签',
+    unSupportTpl: '对不起，当前浏览器不支持Canvas，无法使用本控件！'
+  },
+  ecard: {
+    chooseText: '请选择电子卡面值',
+    otherValueText: '其他面值',
+    placeholder: '请输入1-5000整数'
+  },
+  timeselect: {
+    pickupTime: '取件时间'
+  },
+  sku: {
+    buyNow: '立即购买',
+    buyNumber: '购买数量',
+    addToCard: '加入购物车'
+  },
+  skuheader: {
+    skuId: '商品编号'
+  },
+  addresslist: {
+    addAddress: '新建地址'
+  },
+  comment: {
+    complaintsText: '我要投诉',
+    additionalReview: function additionalReview(day) {
+      return "\u8D2D\u4E70".concat(day, "\u5929\u540E\u8FFD\u8BC4");
+    },
+    additionalImages: function additionalImages(length) {
+      return "".concat(length, "\u5F20\u8FFD\u8BC4\u56FE\u7247");
+    }
+  },
+  searchbar: {
+    basePlaceholder: '上京东，购好物',
+    text: '文本',
+    test: '测试',
+    title1: '基础用法',
+    title2: '搜索框形状及最大长度',
+    title3: '搜索框内外背景设置',
+    title4: '搜索框文本设置',
+    title5: '自定义图标设置',
+    title6: '数据改变监听'
+  },
+  audio: {
+    back: '快退',
+    forward: '快进',
+    pause: '暂停',
+    start: '开始',
+    mute: '静音',
+    tips: 'onPlayEnd事件在loop=false时才会触发'
+  },
+  datepicker: {
+    year: '年',
+    month: '月',
+    day: '日',
+    hour: '时',
+    min: '分',
+    seconds: '秒'
+  },
+  pullToRefresh: {
+    pullingText: '下拉刷新',
+    canReleaseText: '松开刷新',
+    refreshingText: '加载中...',
+    completeText: '刷新成功'
+  },
+  watermark: {
+    errorCanvasTips: '当前环境不支持Canvas'
+  }
+};
+var defaultProps = {
+  locale: zhCN
+};
+var defaultConfigRef = {
+  current: {
+    locale: zhCN
+  }
+};
+var setDefaultConfig = function setDefaultConfig(config) {
+  defaultConfigRef.current = config;
+};
+var getDefaultConfig = function getDefaultConfig() {
+  return defaultConfigRef.current;
+};
+// 创建一个 Context 对象
+var ConfigContext = createContext(null);
+var useConfig = function useConfig() {
+  var _useContext;
+  return (_useContext = useContext(ConfigContext)) !== null && _useContext !== void 0 ? _useContext : getDefaultConfig();
+};
+function convertThemeVarsToCSSVars(themeVars) {
+  var cssVars = {};
+  Object.keys(themeVars).forEach(function (key) {
+    cssVars["--".concat(kebabCase(key))] = themeVars[key];
+  });
+  return cssVars;
+}
+var ConfigProvider = function ConfigProvider(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+    children = _defaultProps$props.children,
+    config = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var parentConfig = useConfig();
+  var theme = config.theme || {};
+  var style = useMemo(function () {
+    return convertThemeVarsToCSSVars(theme);
+  }, [theme]);
+  return React__default.createElement(ConfigContext.Provider, {
+    value: _objectSpread(_objectSpread({}, parentConfig), config)
+  }, React__default.createElement("div", {
+    style: style
+  }, children));
+};
+ConfigProvider.defaultProps = defaultProps;
+ConfigProvider.displayName = 'NutConfigProvider';
+export { ConfigProvider as default, getDefaultConfig, setDefaultConfig, useConfig };

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

@@ -0,0 +1,2 @@
+
+import '../../../packages/countdown/countdown.scss'

package/dist/esm/CountDown.js

@@ -0,0 +1,249 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["paused", "startTime", "endTime", "millisecond", "format", "autoStart", "time", "destroy", "className", "style", "onEnd", "onPaused", "onRestart", "onUpdate", "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, useImperativeHandle, useEffect } from 'react';
+import { c as cn } from './bem-3b438e61.js';
+import { useConfig } from './ConfigProvider.js';
+import '@bem-react/classname';
+var defaultProps = {
+  paused: false,
+  startTime: Date.now(),
+  endTime: Date.now(),
+  millisecond: false,
+  format: 'HH:mm:ss',
+  autoStart: true,
+  time: 0,
+  destroy: false
+};
+var InternalCountDown = function InternalCountDown(props, ref) {
+  useConfig();
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+    paused = _defaultProps$props.paused,
+    startTime = _defaultProps$props.startTime,
+    endTime = _defaultProps$props.endTime,
+    millisecond = _defaultProps$props.millisecond,
+    format = _defaultProps$props.format,
+    autoStart = _defaultProps$props.autoStart,
+    time = _defaultProps$props.time,
+    destroy = _defaultProps$props.destroy,
+    className = _defaultProps$props.className,
+    style = _defaultProps$props.style,
+    onEnd = _defaultProps$props.onEnd,
+    onPaused = _defaultProps$props.onPaused,
+    onRestart = _defaultProps$props.onRestart,
+    onUpdate = _defaultProps$props.onUpdate,
+    children = _defaultProps$props.children,
+    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var b = cn('countdown');
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    restTimeStamp = _useState2[0],
+    setRestTime = _useState2[1];
+  var stateRef = useRef({
+    pauseTime: 0,
+    curr: 0,
+    isPaused: paused,
+    isIninted: false,
+    timer: 0,
+    restTime: 0,
+    counting: !paused && autoStart,
+    handleEndTime: Date.now(),
+    diffTime: 0 // 设置了 startTime 时，与 date.now() 的差异
+  });
+  // 时间戳转换 或 获取当前时间的时间戳
+  var getTimeStamp = function getTimeStamp(timeStr) {
+    if (!timeStr) return Date.now();
+    var t = timeStr;
+    t = t > 0 ? +t : t.toString().replace(/-/g, '/');
+    return new Date(t).getTime();
+  };
+  // 倒计时 interval
+  var initTime = function initTime() {
+    stateRef.current.handleEndTime = endTime;
+    stateRef.current.diffTime = Date.now() - getTimeStamp(startTime); // 时间差
+    if (!stateRef.current.counting) stateRef.current.counting = true;
+    tick();
+  };
+  var tick = function tick() {
+    stateRef.current.timer = requestAnimationFrame(function () {
+      if (stateRef.current.counting) {
+        var currentTime = Date.now() - stateRef.current.diffTime;
+        var remainTime = Math.max(stateRef.current.handleEndTime - currentTime, 0);
+        stateRef.current.restTime = remainTime;
+        setRestTime(remainTime);
+        if (!remainTime) {
+          stateRef.current.counting = false;
+          pause();
+          onEnd && onEnd();
+        }
+        if (remainTime > 0) {
+          tick();
+        }
+      }
+    });
+  };
+  // 将倒计时剩余时间格式化   参数： t  时间戳  type custom 自定义类型
+  var formatRemainTime = function formatRemainTime(t, type) {
+    var ts = t;
+    var rest = {
+      d: 0,
+      h: 0,
+      m: 0,
+      s: 0,
+      ms: 0
+    };
+    var SECOND = 1000;
+    var MINUTE = 60 * SECOND;
+    var HOUR = 60 * MINUTE;
+    var DAY = 24 * HOUR;
+    if (ts > 0) {
+      rest.d = ts >= SECOND ? Math.floor(ts / DAY) : 0;
+      rest.h = Math.floor(ts % DAY / HOUR);
+      rest.m = Math.floor(ts % HOUR / MINUTE);
+      rest.s = Math.floor(ts % MINUTE / SECOND);
+      rest.ms = Math.floor(ts % SECOND);
+    }
+    return type === 'custom' ? rest : parseFormat(_objectSpread({}, rest));
+  };
+  var parseFormat = function parseFormat(time) {
+    var d = time.d;
+    var h = time.h,
+      m = time.m,
+      s = time.s,
+      ms = time.ms;
+    var formatCache = format;
+    if (formatCache.includes('DD')) {
+      formatCache = formatCache.replace('DD', padZero(d));
+    } else {
+      h += Number(d) * 24;
+    }
+    if (formatCache.includes('HH')) {
+      formatCache = formatCache.replace('HH', padZero(h));
+    } else {
+      m += Number(h) * 60;
+    }
+    if (formatCache.includes('mm')) {
+      formatCache = formatCache.replace('mm', padZero(m));
+    } else {
+      s += Number(m) * 60;
+    }
+    if (formatCache.includes('ss')) {
+      formatCache = formatCache.replace('ss', padZero(s));
+    } else {
+      ms += Number(s) * 1000;
+    }
+    if (formatCache.includes('S')) {
+      var msC = padZero(ms, 3).toString();
+      if (formatCache.includes('SSS')) {
+        formatCache = formatCache.replace('SSS', msC);
+      } else if (formatCache.includes('SS')) {
+        formatCache = formatCache.replace('SS', msC.slice(0, 2));
+      } else if (formatCache.includes('S')) {
+        formatCache = formatCache.replace('SS', msC.slice(0, 1));
+      }
+    }
+    return formatCache;
+  };
+  var padZero = function padZero(num) {
+    var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+    num += '';
+    while (num.length < length) {
+      num = "0".concat(num);
+    }
+    return num.toString();
+  };
+  // 暂定
+  var pause = function pause() {
+    cancelAnimationFrame(stateRef.current.timer);
+    stateRef.current.counting = false;
+    onPaused && onPaused(stateRef.current.restTime);
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      start: function start() {
+        if (!stateRef.current.counting && !autoStart) {
+          stateRef.current.counting = true;
+          stateRef.current.handleEndTime = Date.now() + Number(stateRef.current.restTime);
+          tick();
+          onRestart && onRestart(stateRef.current.restTime);
+        }
+      },
+      pause: function pause() {
+        cancelAnimationFrame(stateRef.current.timer);
+        stateRef.current.counting = false;
+        onPaused && onPaused(stateRef.current.restTime);
+      },
+      reset: function reset() {
+        if (!autoStart) {
+          pause();
+          stateRef.current.restTime = time;
+          setRestTime(time);
+        }
+      }
+    };
+  });
+  // 监听值变更
+  useEffect(function () {
+    var tranTime = formatRemainTime(stateRef.current.restTime, 'custom');
+    onUpdate && onUpdate(tranTime);
+  }, [restTimeStamp]);
+  // 监听暂停
+  useEffect(function () {
+    if (stateRef.current.isIninted) {
+      if (paused) {
+        if (stateRef.current.counting) {
+          pause();
+        }
+      } else {
+        if (!stateRef.current.counting) {
+          stateRef.current.counting = true;
+          stateRef.current.handleEndTime = Date.now() + Number(stateRef.current.restTime);
+          tick();
+        }
+        onRestart && onRestart(stateRef.current.restTime);
+      }
+    }
+  }, [paused]);
+  // 监听开始结束时间变更
+  useEffect(function () {
+    if (stateRef.current.isIninted) {
+      initTime();
+    }
+  }, [endTime, startTime]);
+  // 初始化
+  useEffect(function () {
+    if (autoStart) {
+      initTime();
+    } else {
+      stateRef.current.restTime = time;
+      setRestTime(time);
+    }
+    if (!stateRef.current.isIninted) {
+      stateRef.current.isIninted = true;
+    }
+    return componentWillUnmount;
+  }, []);
+  var componentWillUnmount = function componentWillUnmount() {
+    destroy && cancelAnimationFrame(stateRef.current.timer);
+  };
+  var renderTime = function () {
+    return formatRemainTime(stateRef.current.restTime);
+  }();
+  return React__default.createElement("div", _objectSpread({
+    className: "".concat(b(), " ").concat(className || ''),
+    style: _objectSpread({}, style)
+  }, rest), children || React__default.createElement("div", {
+    className: b('block'),
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: "".concat(renderTime)
+    }
+  }));
+};
+var CountDown = React__default.forwardRef(InternalCountDown);
+CountDown.defaultProps = defaultProps;
+CountDown.displayName = 'NutCountDown';
+export { CountDown as default };

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

@@ -0,0 +1,2 @@
+import '../../Picker/style'
+import '../../../packages/datepicker/datepicker.scss'