@nutui/nutui-react-taro 1.2.2-beta.0

package/dist/esm/skeleton.taro-b2831f6f.js

@@ -0,0 +1,246 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "prefixCls", "size", "shape", "bgColor", "color", "url", "alt", "icon", "className", "style", "activeAvatar", "onError"],
+    _excluded2 = ["className", "width", "height", "animated", "row", "title", "avatar", "avatarSize", "round", "loading", "children", "avatarShape"];
+
+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, useContext, useEffect } from 'react';
+import classNames from 'classnames';
+import { A as AvatarContext } from './AvatarContext-7153ad2b.js';
+import { c as cn } from './bem-893ad28d.js';
+import { I as Icon } from './icon-62bd7379.js';
+var defaultProps$1 = {
+  size: '',
+  icon: '',
+  bgColor: '#eee',
+  color: '#666',
+  prefixCls: 'nut-avatar',
+  url: '',
+  alt: ''
+};
+
+var Avatar = function Avatar(props) {
+  var _parent$propAvatarGro, _parent$propAvatarGro2, _classNames, _parent$propAvatarGro3, _parent$propAvatarGro4, _parent$propAvatarGro5, _parent$propAvatarGro6, _parent$propAvatarGro7, _parent$propAvatarGro9, _parent$propAvatarGro10, _parent$propAvatarGro11, _parent$propAvatarGro12, _parent$propAvatarGro13, _parent$propAvatarGro14, _parent$propAvatarGro15;
+
+  var _defaultProps$1$props = _objectSpread(_objectSpread({}, defaultProps$1), props),
+      children = _defaultProps$1$props.children,
+      prefixCls = _defaultProps$1$props.prefixCls,
+      size = _defaultProps$1$props.size,
+      shape = _defaultProps$1$props.shape,
+      bgColor = _defaultProps$1$props.bgColor,
+      color = _defaultProps$1$props.color,
+      url = _defaultProps$1$props.url,
+      alt = _defaultProps$1$props.alt,
+      icon = _defaultProps$1$props.icon,
+      className = _defaultProps$1$props.className,
+      style = _defaultProps$1$props.style,
+      activeAvatar = _defaultProps$1$props.activeAvatar,
+      onError = _defaultProps$1$props.onError,
+      rest = _objectWithoutProperties(_defaultProps$1$props, _excluded);
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      maxSum = _useState2[0],
+      setMaxSum = _useState2[1]; // avatarGroup里的avatar的个数
+
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showMax = _useState4[0],
+      setShowMax = _useState4[1]; // 是否显示的最大头像个数
+
+
+  var _useState5 = useState(1),
+      _useState6 = _slicedToArray(_useState5, 2),
+      avatarIndex = _useState6[0],
+      setAvatarIndex = _useState6[1]; // avatar的索引
+
+
+  var avatarRef = useRef(null);
+  var parent = useContext(AvatarContext);
+  var b = cn('avatar');
+  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "nut-avatar-".concat(size || (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro = parent.propAvatarGroup) === null || _parent$propAvatarGro === void 0 ? void 0 : _parent$propAvatarGro.size) || 'normal'), true), _defineProperty(_classNames, "nut-avatar-".concat(shape || (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro2 = parent.propAvatarGroup) === null || _parent$propAvatarGro2 === void 0 ? void 0 : _parent$propAvatarGro2.shape) || 'round'), true), _classNames));
+  var cls = classNames(b(''), classes, className);
+  var sizeValue = ['large', 'normal', 'small'];
+
+  var styles = _objectSpread({
+    width: sizeValue.indexOf(size) > -1 ? '' : "".concat(size, "px"),
+    height: sizeValue.indexOf(size) > -1 ? '' : "".concat(size, "px"),
+    backgroundColor: "".concat(bgColor),
+    color: "".concat(color),
+    marginLeft: avatarIndex != 1 && parent !== null && parent !== void 0 && (_parent$propAvatarGro3 = parent.propAvatarGroup) !== null && _parent$propAvatarGro3 !== void 0 && _parent$propAvatarGro3.span ? "".concat(parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro4 = parent.propAvatarGroup) === null || _parent$propAvatarGro4 === void 0 ? void 0 : _parent$propAvatarGro4.span, "px") : '',
+    zIndex: (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro5 = parent.propAvatarGroup) === null || _parent$propAvatarGro5 === void 0 ? void 0 : _parent$propAvatarGro5.zIndex) == 'right' ? "".concat(Math.abs(maxSum - avatarIndex)) : ''
+  }, style);
+
+  var maxStyles = {
+    backgroundColor: "".concat(parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro6 = parent.propAvatarGroup) === null || _parent$propAvatarGro6 === void 0 ? void 0 : _parent$propAvatarGro6.maxBgColor),
+    color: "".concat(parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro7 = parent.propAvatarGroup) === null || _parent$propAvatarGro7 === void 0 ? void 0 : _parent$propAvatarGro7.maxColor)
+  };
+  var iconStyles = icon || '';
+  useEffect(function () {
+    var _parent$avatarGroupRe;
+
+    var avatarChildren = parent === null || parent === void 0 ? void 0 : (_parent$avatarGroupRe = parent.avatarGroupRef) === null || _parent$avatarGroupRe === void 0 ? void 0 : _parent$avatarGroupRe.current.children;
+
+    if (avatarChildren) {
+      avatarLength(avatarChildren);
+    }
+  }, []);
+
+  var avatarLength = function avatarLength(children) {
+    var _avatarRef$current, _avatarRef$current$da, _parent$propAvatarGro8;
+
+    for (var i = 0; i < children.length; i++) {
+      console.log('child', children[i], children[i].classList);
+
+      if (children[i] && children[i].classList && children[i].classList[0] == 'nut-avatar') {
+        children[i].setAttribute('data-index', i + 1);
+      }
+    }
+
+    var index = avatarRef === null || avatarRef === void 0 ? void 0 : (_avatarRef$current = avatarRef.current) === null || _avatarRef$current === void 0 ? void 0 : (_avatarRef$current$da = _avatarRef$current.dataset) === null || _avatarRef$current$da === void 0 ? void 0 : _avatarRef$current$da.index;
+    var maxCount = parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro8 = parent.propAvatarGroup) === null || _parent$propAvatarGro8 === void 0 ? void 0 : _parent$propAvatarGro8.maxCount;
+    setMaxSum(children.length);
+    console.log('index', index, avatarRef);
+    setAvatarIndex(index);
+
+    if (index == children.length && index != maxCount && children.length > maxCount) {
+      setShowMax(true);
+    }
+  };
+
+  var errorEvent = function errorEvent(e) {
+    if (props.onError) {
+      props.onError(e);
+    }
+  };
+
+  var clickAvatar = function clickAvatar(e) {
+    if (props.activeAvatar) {
+      props.activeAvatar(e);
+    }
+  };
+
+  return React__default.createElement(React__default.Fragment, null, (showMax || !(parent !== null && parent !== void 0 && (_parent$propAvatarGro9 = parent.propAvatarGroup) !== null && _parent$propAvatarGro9 !== void 0 && _parent$propAvatarGro9.maxCount) || avatarIndex <= (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro10 = parent.propAvatarGroup) === null || _parent$propAvatarGro10 === void 0 ? void 0 : _parent$propAvatarGro10.maxCount)) && React__default.createElement("div", _objectSpread(_objectSpread({
+    className: cls
+  }, rest), {}, {
+    style: !showMax ? styles : maxStyles,
+    onClick: clickAvatar,
+    ref: avatarRef
+  }), (!(parent !== null && parent !== void 0 && (_parent$propAvatarGro11 = parent.propAvatarGroup) !== null && _parent$propAvatarGro11 !== void 0 && _parent$propAvatarGro11.maxCount) || avatarIndex <= (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro12 = parent.propAvatarGroup) === null || _parent$propAvatarGro12 === void 0 ? void 0 : _parent$propAvatarGro12.maxCount)) && React__default.createElement(React__default.Fragment, null, url && React__default.createElement("img", {
+    src: url,
+    alt: alt,
+    onError: errorEvent
+  }), icon && React__default.createElement(Icon, {
+    className: "icon",
+    name: iconStyles
+  }), children && React__default.createElement("span", {
+    className: "text"
+  }, children)), showMax && React__default.createElement("div", {
+    className: "text"
+  }, parent !== null && parent !== void 0 && (_parent$propAvatarGro13 = parent.propAvatarGroup) !== null && _parent$propAvatarGro13 !== void 0 && _parent$propAvatarGro13.maxContent ? parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro14 = parent.propAvatarGroup) === null || _parent$propAvatarGro14 === void 0 ? void 0 : _parent$propAvatarGro14.maxContent : "+ ".concat(avatarIndex - (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro15 = parent.propAvatarGroup) === null || _parent$propAvatarGro15 === void 0 ? void 0 : _parent$propAvatarGro15.maxCount)))));
+};
+
+Avatar.defaultProps = defaultProps$1;
+Avatar.displayName = 'NutAvatar';
+var defaultProps = {
+  width: '100px',
+  height: '100px',
+  row: 1,
+  animated: false,
+  title: false,
+  avatar: false,
+  round: false,
+  avatarSize: '50px',
+  loading: false,
+  avatarShape: 'round'
+};
+
+var Skeleton = function Skeleton(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      className = _defaultProps$props.className,
+      width = _defaultProps$props.width,
+      height = _defaultProps$props.height,
+      animated = _defaultProps$props.animated,
+      row = _defaultProps$props.row,
+      title = _defaultProps$props.title,
+      avatar = _defaultProps$props.avatar,
+      avatarSize = _defaultProps$props.avatarSize,
+      round = _defaultProps$props.round,
+      loading = _defaultProps$props.loading,
+      children = _defaultProps$props.children,
+      avatarShape = _defaultProps$props.avatarShape,
+      restProps = _objectWithoutProperties(_defaultProps$props, _excluded2);
+
+  var b = cn('skeleton');
+  var classes = classNames(className, b());
+  var blockClass = classNames({
+    blockClass: true,
+    'blockClass--round': round
+  });
+  var avatarClass = classNames(_defineProperty({
+    avatarClass: true
+  }, "avatarClass--".concat(avatarShape), avatarShape));
+
+  var repeatLines = function repeatLines(num) {
+    return Array.from({
+      length: num
+    }, function (v, i) {
+      return i;
+    });
+  };
+
+  var getStyle = function getStyle() {
+    if (avatarSize) {
+      return {
+        width: avatarSize,
+        height: avatarSize
+      };
+    }
+
+    return {
+      width: '50px',
+      height: '50px'
+    };
+  };
+
+  return React__default.createElement(React__default.Fragment, null, loading ? React__default.createElement("div", null, children) : React__default.createElement("div", _objectSpread({
+    className: classes
+  }, restProps), animated && React__default.createElement("div", {
+    className: "skeleton-animation"
+  }), React__default.createElement("div", {
+    className: "nut-skeleton-content"
+  }, avatar && React__default.createElement(Avatar, {
+    className: avatarClass,
+    bgColor: "rgb(239, 239, 239)",
+    shape: avatarShape,
+    style: getStyle()
+  }), row === 1 && React__default.createElement("div", {
+    className: blockClass,
+    style: {
+      width: width,
+      height: height
+    }
+  }), React__default.createElement("div", {
+    className: "skeleton-content-line"
+  }, title && React__default.createElement("div", {
+    className: "skeleton-title"
+  }), repeatLines(row).map(function (item, index) {
+    return React__default.createElement("div", {
+      className: blockClass,
+      key: index,
+      style: {
+        width: width,
+        height: height
+      }
+    });
+  })))));
+};
+
+Skeleton.defaultProps = defaultProps;
+Skeleton.displayName = 'NutSkeleton';
+export { Skeleton as S };

package/dist/esm/step.taro-33775bf4.js

@@ -0,0 +1,100 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "title", "content", "activeIndex", "icon", "iconColor", "size", "className", "renderContent"];
+
+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, { useContext } from 'react';
+import classNames from 'classnames';
+import { D as DataContext } from './UserContext-68f62e66.js';
+import { c as cn } from './bem-893ad28d.js';
+import { I as Icon } from './icon-62bd7379.js';
+var defaultProps = {
+  title: '',
+  content: '',
+  activeIndex: 0,
+  icon: '',
+  iconColor: '',
+  size: '12px'
+};
+
+var Step = function Step(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children,
+      title = _defaultProps$props.title,
+      content = _defaultProps$props.content,
+      activeIndex = _defaultProps$props.activeIndex,
+      icon = _defaultProps$props.icon,
+      iconColor = _defaultProps$props.iconColor,
+      size = _defaultProps$props.size,
+      className = _defaultProps$props.className,
+      renderContent = _defaultProps$props.renderContent,
+      restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var parent = useContext(DataContext);
+  var dot = parent.propSteps.progressDot;
+
+  var getCurrentStatus = function getCurrentStatus() {
+    var index = activeIndex;
+    if (index < +parent.propSteps.current) return 'finish';
+    return index === +parent.propSteps.current ? 'process' : 'wait';
+  };
+
+  var handleClickStep = function handleClickStep() {
+    var _parent$propSteps;
+
+    if ((_parent$propSteps = parent.propSteps) !== null && _parent$propSteps !== void 0 && _parent$propSteps.clickStep) {
+      var _parent$propSteps2;
+
+      (_parent$propSteps2 = parent.propSteps) === null || _parent$propSteps2 === void 0 ? void 0 : _parent$propSteps2.clickStep(activeIndex);
+    }
+  };
+
+  var b = cn('step');
+  var classes = classNames(_defineProperty({}, "".concat(b(''), "-").concat(getCurrentStatus()), true), className, b(''));
+
+  var renderIconClass = function renderIconClass() {
+    if (!dot && icon) {
+      return 'nut-step-icon is-icon';
+    }
+
+    if (!dot && !icon) {
+      return 'nut-step-icon is-text';
+    }
+
+    return 'nut-step-icon';
+  };
+
+  return React__default.createElement("div", _objectSpread(_objectSpread({
+    className: classes
+  }, restProps), {}, {
+    onClick: handleClickStep
+  }), React__default.createElement("div", {
+    className: "nut-step-head"
+  }, React__default.createElement("div", {
+    className: "nut-step-line"
+  }), React__default.createElement("div", {
+    className: renderIconClass()
+  }, icon ? React__default.createElement(Icon, {
+    className: "nut-step-icon-inner",
+    color: iconColor,
+    name: icon,
+    size: size
+  }) : !dot && React__default.createElement("span", {
+    className: "nut-step-inner"
+  }, activeIndex))), React__default.createElement("div", {
+    className: "nut-step-main"
+  }, React__default.createElement("span", {
+    className: "nut-step-title"
+  }, title), content && React__default.createElement("span", {
+    className: "nut-step-content"
+  }, content), renderContent && React__default.createElement("span", {
+    className: "nut-step-content"
+  }, renderContent())));
+};
+
+Step.defaultProps = defaultProps;
+Step.displayName = 'NutStep';
+export { Step as S };

package/dist/esm/steps.taro-943f4fbb.js

@@ -0,0 +1,46 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "current", "direction", "className", "progressDot", "clickStep"];
+
+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 classNames from 'classnames';
+import { D as DataContext } from './UserContext-68f62e66.js';
+import { c as cn } from './bem-893ad28d.js';
+var defaultProps = {
+  current: 0,
+  direction: 'horizontal',
+  progressDot: false
+};
+
+var Steps = function Steps(props) {
+  var _classNames;
+
+  var propSteps = _objectSpread(_objectSpread({}, defaultProps), props);
+
+  var children = propSteps.children,
+      current = propSteps.current,
+      direction = propSteps.direction,
+      className = propSteps.className,
+      progressDot = propSteps.progressDot,
+      clickStep = propSteps.clickStep,
+      restProps = _objectWithoutProperties(propSteps, _excluded);
+
+  var parentSteps = {
+    propSteps: propSteps
+  };
+  var b = cn('steps');
+  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(b(''), "-").concat(direction), true), _defineProperty(_classNames, "".concat(b(''), "-dot"), !!props.progressDot), _classNames), className, b(''));
+  return React__default.createElement(DataContext.Provider, {
+    value: parentSteps
+  }, React__default.createElement('div', _objectSpread({
+    className: classes
+  }, restProps), children));
+};
+
+Steps.defaultProps = defaultProps;
+Steps.displayName = 'NutSteps';
+export { Steps as S };