@nutui/nutui-react 0.1.0-beta.1

package/dist/esm/Elevator.js

@@ -0,0 +1,205 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["height", "acceptKey", "indexList", "className", "clickItem", "clickIndex"];
+
+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, { useRef, useState, useEffect } from 'react';
+import { c as cn } from './bem-893ad28d.js';
+import '@bem-react/classname';
+var defaultProps = {
+  height: '200px',
+  acceptKey: 'title',
+  indexList: [],
+  className: ''
+};
+
+var Elevator = function Elevator(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      height = _defaultProps$props.height,
+      acceptKey = _defaultProps$props.acceptKey,
+      indexList = _defaultProps$props.indexList,
+      className = _defaultProps$props.className,
+      clickItem = _defaultProps$props.clickItem,
+      clickIndex = _defaultProps$props.clickIndex,
+      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var b = cn('elevator');
+  var spaceHeight = 23;
+  var listview = useRef(null);
+  var initData = {
+    anchorIndex: 0,
+    listHeight: [],
+    listGroup: []
+  };
+  var touchState = useRef({
+    y1: 0,
+    y2: 0
+  });
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentIndex = _useState2[0],
+      setCurrentIndex = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      scrollStart = _useState4[0],
+      setScrollStart = _useState4[1];
+
+  var state = useRef(initData); //重置滚动参数
+
+  var resetScrollState = function resetScrollState() {
+    state.current.anchorIndex = 0;
+    setCurrentIndex(0);
+    setScrollStart(false);
+    touchState.current = {
+      y1: 0,
+      y2: 0
+    };
+  };
+
+  var getData = function getData(el, name) {
+    var prefix = 'data-';
+    return el.getAttribute(prefix + name);
+  };
+
+  var calculateHeight = function calculateHeight() {
+    var height = 0;
+    state.current.listHeight.push(height);
+
+    for (var i = 0; i < state.current.listGroup.length; i++) {
+      var item = state.current.listGroup[i];
+      height += item.clientHeight;
+      state.current.listHeight.push(height);
+    }
+  };
+
+  var scrollTo = function scrollTo(index) {
+    if (!index && index !== 0) {
+      return;
+    }
+
+    if (!state.current.listHeight.length) {
+      calculateHeight();
+    }
+
+    if (index < 0) index = 0;
+    if (index > state.current.listHeight.length - 2) index = state.current.listHeight.length - 2;
+    setCurrentIndex(index);
+
+    if (listview.current) {
+      listview.current.scrollTo(0, state.current.listHeight[index]);
+    }
+  };
+
+  var touchMove = function touchMove(e) {
+    var firstTouch = e.touches[0];
+    touchState.current.y2 = firstTouch.pageY;
+    var delta = (touchState.current.y2 - touchState.current.y1) / spaceHeight | 0;
+    var cacheIndex = state.current.anchorIndex + delta;
+    setCurrentIndex(cacheIndex);
+    scrollTo(cacheIndex);
+  };
+
+  var touchEnd = function touchEnd() {
+    resetScrollState();
+  };
+
+  var touchStart = function touchStart(e) {
+    setScrollStart(true);
+    var index = Number(getData(e.target, 'index'));
+    var firstTouch = e.touches[0];
+    touchState.current.y1 = firstTouch.pageY;
+    state.current.anchorIndex = +index;
+    setCurrentIndex(function (currentIndex) {
+      return currentIndex + index;
+    });
+    scrollTo(index);
+    var target = e.currentTarget;
+    target.removeEventListener('touchmove', function () {
+      return touchMove(e);
+    }, false);
+    target.removeEventListener('touchend', touchEnd, false);
+    target.addEventListener('touchmove', function () {
+      return touchMove(e);
+    }, false);
+    target.addEventListener('touchend', touchEnd, false);
+  };
+
+  var handleClickItem = function handleClickItem(key, item) {
+    clickItem && clickItem(key, item);
+  };
+
+  var handleClickIndex = function handleClickIndex(key) {
+    clickIndex && clickIndex(key);
+  };
+
+  var setListGroup = function setListGroup() {
+    if (listview.current) {
+      var els = listview.current.querySelectorAll('.nut-elevator__list__item');
+      els.forEach(function (el) {
+        if (el != null && !state.current.listGroup.includes(el)) {
+          state.current.listGroup.push(el);
+        }
+      });
+    }
+  };
+
+  useEffect(function () {
+    if (listview.current) {
+      setListGroup();
+    }
+  }, [listview.current]);
+  return React__default.createElement("div", _objectSpread({
+    className: "".concat(b(), " ").concat(className)
+  }, rest), React__default.createElement("div", {
+    className: b('list'),
+    ref: listview,
+    style: {
+      height: isNaN(+height) ? height : "".concat(height, "px")
+    }
+  }, indexList.map(function (item) {
+    return React__default.createElement("div", {
+      className: b('list__item'),
+      key: item[acceptKey]
+    }, React__default.createElement("div", {
+      className: b('list__item__code')
+    }, item[acceptKey]), React__default.createElement(React__default.Fragment, null, item.list.map(function (subitem) {
+      return React__default.createElement("div", {
+        className: b('list__item__name'),
+        key: subitem['id'],
+        onClick: function onClick() {
+          return handleClickItem(item[acceptKey], subitem);
+        }
+      }, subitem.name);
+    })));
+  })), indexList.length && scrollStart ? React__default.createElement("div", {
+    className: b('code', {
+      current: true
+    })
+  }, " ", indexList[currentIndex][acceptKey]) : null, React__default.createElement("div", {
+    className: b('bars'),
+    onTouchStart: function onTouchStart(event) {
+      return touchStart(event);
+    }
+  }, React__default.createElement("div", {
+    className: b('bars__inner')
+  }, indexList.map(function (item, index) {
+    return React__default.createElement("div", {
+      className: b('bars__inner__item'),
+      "data-index": index,
+      key: item[acceptKey],
+      onClick: function onClick() {
+        return handleClickIndex(item[acceptKey]);
+      }
+    }, item[acceptKey]);
+  }))));
+};
+
+Elevator.defaultProps = defaultProps;
+Elevator.displayName = 'NutElevator';
+export { Elevator as default };

package/dist/esm/FixedNav.js

@@ -0,0 +1,105 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["fixednavClass", "overlay", "visible", "navList", "activeText", "unActiveText", "position", "change", "selected", "type", "slotList", "slotBtn"];
+
+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 from 'react';
+import { I as Icon } from './icon-63c0d58f.js';
+import { c as cn } from './bem-893ad28d.js';
+import classNames from 'classnames';
+import { O as Overlay } from './overlay-418bcf84.js';
+import '@bem-react/classname';
+var defaultProps = {
+  fixednavClass: 'nut-fixednav',
+  activeText: '收起导航',
+  unActiveText: '快速导航',
+  type: 'right',
+  position: {
+    top: 'auto',
+    bottom: 'auto'
+  }
+};
+
+var FixedNav = function FixedNav(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      fixednavClass = _defaultProps$props.fixednavClass,
+      overlay = _defaultProps$props.overlay,
+      visible = _defaultProps$props.visible,
+      navList = _defaultProps$props.navList,
+      activeText = _defaultProps$props.activeText,
+      unActiveText = _defaultProps$props.unActiveText,
+      position = _defaultProps$props.position,
+      change = _defaultProps$props.change,
+      selected = _defaultProps$props.selected,
+      type = _defaultProps$props.type,
+      slotList = _defaultProps$props.slotList,
+      slotBtn = _defaultProps$props.slotBtn,
+      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var b = cn('fixednav');
+  var classes = classNames({
+    active: visible
+  }, type, fixednavClass, b(''));
+
+  var onSelectCb = function onSelectCb(event, item) {
+    selected(item, event);
+  };
+
+  var onUpdateValue = function onUpdateValue() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !visible;
+    change(value);
+  }; // const [classNames, setClassNames] = useState('')
+  // const classes = () => {
+  //   return `${fixednavClass} ${type} ${visible ? 'active' : ''}`
+  // }
+  // useEffect(() => {
+  //   setClassNames(classes())
+  // }, [visible])
+
+
+  return React__default.createElement("div", _objectSpread({
+    className: classes,
+    style: position
+  }, rest), overlay && React__default.createElement(Overlay, {
+    visible: visible,
+    zIndex: 200,
+    onClick: function onClick() {
+      return onUpdateValue(false);
+    }
+  }), React__default.createElement("div", {
+    className: "list"
+  }, slotList ? slotList : React__default.createElement("div", {
+    className: "nut-fixednav__list"
+  }, navList.map(function (item, index) {
+    return React__default.createElement("div", {
+      className: "nut-fixednav__list-item",
+      onClick: function onClick(event) {
+        return onSelectCb(event, item);
+      },
+      key: item.id || index
+    }, React__default.createElement("img", {
+      src: item.icon
+    }), React__default.createElement("div", {
+      className: "span"
+    }, item.text), item.num && React__default.createElement("div", {
+      className: "b"
+    }, item.num));
+  }))), React__default.createElement("div", {
+    className: "nut-fixednav__btn",
+    onClick: function onClick() {
+      return onUpdateValue();
+    }
+  }, slotBtn ? slotBtn : React__default.createElement(React__default.Fragment, null, React__default.createElement(Icon, {
+    name: "left",
+    color: "#fff"
+  }), React__default.createElement("div", {
+    className: "text"
+  }, visible ? activeText : unActiveText))));
+};
+
+FixedNav.defaultProps = defaultProps;
+FixedNav.displayName = 'NutFixedNav';
+export { FixedNav as default };

package/dist/esm/Icon.js

@@ -0,0 +1,5 @@
+import { I as Icon } from './icon-63c0d58f.js';
+export { I as default } from './icon-63c0d58f.js';
+import 'react';
+import './bem-893ad28d.js';
+import '@bem-react/classname';

package/dist/esm/Infiniteloading.js

@@ -0,0 +1,234 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "hasMore", "threshold", "containerId", "useWindow", "useCapture", "isOpenRefresh", "pullIcon", "pullTxt", "loadIcon", "loadTxt", "loadMoreTxt", "className", "refresh", "loadMore", "scrollChange"];
+
+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 { c as cn } from './bem-893ad28d.js';
+import classNames from 'classnames';
+import Icon from './Icon.js';
+import '@bem-react/classname';
+var defaultProps = {
+  hasMore: true,
+  threshold: 200,
+  containerId: '',
+  useWindow: true,
+  useCapture: false,
+  isOpenRefresh: false,
+  pullIcon: 'https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png',
+  pullTxt: '松开刷新',
+  loadIcon: 'https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png',
+  loadTxt: '加载中···',
+  loadMoreTxt: '哎呀，这里是底部了啦'
+};
+
+var Infiniteloading = function Infiniteloading(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children,
+      hasMore = _defaultProps$props.hasMore,
+      threshold = _defaultProps$props.threshold,
+      containerId = _defaultProps$props.containerId,
+      useWindow = _defaultProps$props.useWindow,
+      useCapture = _defaultProps$props.useCapture,
+      isOpenRefresh = _defaultProps$props.isOpenRefresh,
+      pullIcon = _defaultProps$props.pullIcon,
+      pullTxt = _defaultProps$props.pullTxt,
+      loadIcon = _defaultProps$props.loadIcon,
+      loadTxt = _defaultProps$props.loadTxt,
+      loadMoreTxt = _defaultProps$props.loadMoreTxt,
+      className = _defaultProps$props.className,
+      refresh = _defaultProps$props.refresh,
+      loadMore = _defaultProps$props.loadMore,
+      scrollChange = _defaultProps$props.scrollChange,
+      restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isInfiniting = _useState2[0],
+      setIsInfiniting = _useState2[1];
+
+  var scroller = useRef(null);
+  var refreshTop = useRef(null);
+  var scrollEl = useRef(window);
+  var isTouching = useRef(false);
+  var beforeScrollTop = useRef(0);
+  var refreshMaxH = useRef(0);
+  var y = useRef(0);
+  var distance = useRef(0);
+  var b = cn('infiniteloading');
+  var classes = classNames(className, b());
+  useEffect(function () {
+    var parentElement = getParentElement(scroller.current);
+    scrollEl.current = useWindow ? window : parentElement;
+    scrollEl.current.addEventListener('scroll', handleScroll, useCapture);
+    return function () {
+      scrollEl.current.removeEventListener('scroll', handleScroll, useCapture);
+    };
+  }, [hasMore, isInfiniting]);
+  useEffect(function () {
+    var element = scroller.current;
+    element.addEventListener('touchmove', touchMove, {
+      passive: false
+    });
+    return function () {
+      element.removeEventListener('touchmove', touchMove, {
+        passive: false
+      });
+    };
+  }, []);
+
+  var getStyle = function getStyle() {
+    return {
+      height: distance.current < 0 ? "0px" : "".concat(distance.current, "px"),
+      transition: isTouching.current ? "height 0s cubic-bezier(0.25,0.1,0.25,1)" : "height 0.2s cubic-bezier(0.25,0.1,0.25,1)"
+    };
+  };
+
+  var getParentElement = function getParentElement(el) {
+    return !!containerId ? document.querySelector("#".concat(containerId)) : el && el.parentNode;
+  };
+
+  var handleScroll = function handleScroll() {
+    requestAniFrame()(function () {
+      if (!isScrollAtBottom() || !hasMore || isInfiniting) {
+        return false;
+      } else {
+        setIsInfiniting(true);
+        loadMore && loadMore(infiniteDone);
+      }
+    });
+  };
+
+  var infiniteDone = function infiniteDone() {
+    setIsInfiniting(false);
+  };
+
+  var refreshDone = function refreshDone() {
+    distance.current = 0;
+    refreshTop.current.style.height = "".concat(distance.current, "px");
+    isTouching.current = false;
+  };
+
+  var touchStart = function touchStart(event) {
+    if (beforeScrollTop.current === 0 && !isTouching.current && isOpenRefresh) {
+      y.current = event.touches[0].pageY;
+      isTouching.current = true;
+      var childHeight = refreshTop.current.firstElementChild.offsetHeight;
+      refreshMaxH.current = Math.floor(childHeight * 1 + 10);
+    }
+  };
+
+  var touchMove = function touchMove(event) {
+    distance.current = event.touches[0].pageY - y.current;
+
+    if (distance.current > 0 && isTouching.current) {
+      event.preventDefault();
+
+      if (distance.current >= refreshMaxH.current) {
+        distance.current = refreshMaxH.current;
+        refreshTop.current.style.height = "".concat(distance.current, "px");
+      } else {
+        refreshTop.current.style.height = "".concat(distance.current, "px");
+      }
+    } else {
+      distance.current = 0;
+      refreshTop.current.style.height = "".concat(distance.current, "px");
+      isTouching.current = false;
+    }
+  };
+
+  var touchEnd = function touchEnd() {
+    if (distance.current < refreshMaxH.current) {
+      distance.current = 0;
+      refreshTop.current.style.height = "".concat(distance.current, "px");
+    } else {
+      refresh && refresh(refreshDone);
+    }
+  };
+
+  var requestAniFrame = function requestAniFrame() {
+    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || function (callback) {
+      window.setTimeout(callback, 1000 / 60);
+    };
+  };
+
+  var getWindowScrollTop = function getWindowScrollTop() {
+    return window.pageYOffset !== undefined ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+  };
+
+  var calculateTopPosition = function calculateTopPosition(el) {
+    return !el ? 0 : el.offsetTop + calculateTopPosition(el.offsetParent);
+  };
+
+  var isScrollAtBottom = function isScrollAtBottom() {
+    var offsetDistance = 0;
+    var resScrollTop = 0;
+    var direction = 'down';
+    var windowScrollTop = getWindowScrollTop();
+
+    if (useWindow) {
+      if (scroller.current) {
+        offsetDistance = calculateTopPosition(scroller.current) + scroller.current.offsetHeight - windowScrollTop - window.innerHeight;
+      }
+
+      resScrollTop = windowScrollTop;
+    } else {
+      var _scrollEl$current = scrollEl.current,
+          scrollHeight = _scrollEl$current.scrollHeight,
+          clientHeight = _scrollEl$current.clientHeight,
+          scrollTop = _scrollEl$current.scrollTop;
+      offsetDistance = scrollHeight - clientHeight - scrollTop;
+      resScrollTop = scrollTop;
+    }
+
+    if (beforeScrollTop.current > resScrollTop) {
+      direction = 'up';
+    } else {
+      direction = 'down';
+    }
+
+    beforeScrollTop.current = resScrollTop;
+    scrollChange && scrollChange(resScrollTop);
+    return offsetDistance <= threshold && direction == 'down';
+  };
+
+  return React__default.createElement("div", _objectSpread({
+    className: classes,
+    ref: scroller,
+    onTouchStart: touchStart,
+    onTouchMove: touchMove,
+    onTouchEnd: touchEnd
+  }, restProps), React__default.createElement("div", {
+    className: "nut-infinite-top",
+    ref: refreshTop,
+    style: getStyle()
+  }, React__default.createElement("div", {
+    className: "top-box"
+  }, React__default.createElement(Icon, {
+    className: "top-img",
+    name: pullIcon
+  }), React__default.createElement("span", {
+    className: "top-text"
+  }, pullTxt))), React__default.createElement("div", {
+    className: "nut-infinite-container"
+  }, children), React__default.createElement("div", {
+    className: "nut-infinite-bottom"
+  }, isInfiniting ? React__default.createElement("div", {
+    className: "bottom-box"
+  }, React__default.createElement(Icon, {
+    className: "bottom-img",
+    name: loadIcon
+  }), React__default.createElement("div", {
+    className: "bottom-text"
+  }, loadTxt)) : !hasMore && React__default.createElement("div", {
+    className: "tips"
+  }, loadMoreTxt)));
+};
+
+Infiniteloading.defaultProps = defaultProps;
+Infiniteloading.displayName = 'NutInfiniteloading';
+export { Infiniteloading as default };