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

package/dist/esm/Collapse.js

@@ -1,109 +1,94 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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, { memo, useState, useEffect } from 'react';
-import { c as cn } from './bem-893ad28d.js';
-import '@bem-react/classname';
-var defaultProps = {
-  activeName: ['0'],
+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), true).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, { useCallback } from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
+import { C as CollapseContext, a as CollapseItem } from "./collapseitem2.js";
+import { u as usePropsValue } from "./use-props-value.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  defaultActiveName: [],
   accordion: false,
-  icon: '',
-  iconSize: '16px',
-  iconColor: '',
+  expandIcon: null,
   rotate: 180
-};
-
-function areEqual(prevProps, nextProps) {
-  return JSON.stringify(prevProps.activeName) === JSON.stringify(nextProps.activeName);
-}
-
-var Collapse = memo(function (props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-      children = _defaultProps$props.children,
-      activeName = _defaultProps$props.activeName,
-      accordion = _defaultProps$props.accordion,
-      icon = _defaultProps$props.icon,
-      rotate = _defaultProps$props.rotate,
-      iconSize = _defaultProps$props.iconSize,
-      iconColor = _defaultProps$props.iconColor,
-      change = _defaultProps$props.change;
-
-  var childrenDom = React__default.Children.toArray(children);
-
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      defaultOpenIndex = _useState2[0],
-      setDefaultOpenIndex = _useState2[1];
-
-  var handleActiveName = function handleActiveName() {
-    var activeArr = [];
-
-    if (!Array.isArray(activeName)) {
-      activeArr.push(activeName.toString());
-    } else {
-      // 数组
-      if (accordion && activeName.length > 1) {
-        console.warn('手风琴模式不支持传递多个打开页签');
-      }
-
-      var activeNameStr = activeName.map(function (item) {
-        return item.toString();
-      });
-      activeArr = _toConsumableArray(activeNameStr);
-    }
-
-    return activeArr;
+});
+var Collapse = function Collapse2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, children = _defaultProps$props.children, activeName = _defaultProps$props.activeName, defaultActiveName = _defaultProps$props.defaultActiveName, accordion = _defaultProps$props.accordion, expandIcon = _defaultProps$props.expandIcon, rotate = _defaultProps$props.rotate, onChange = _defaultProps$props.onChange;
+  var classPrefix = "nut-collapse";
+  var _usePropsValue = usePropsValue({
+    value: activeName,
+    defaultValue: defaultActiveName,
+    finalValue: []
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), value = _usePropsValue2[0], setValue = _usePropsValue2[1];
+  var changeVal = function changeVal2(newValue, name, isOpen2) {
+    setValue(newValue);
+    onChange && onChange(newValue, name, isOpen2);
   };
-
-  var colBem = cn('collapse');
-  useEffect(function () {
-    var activeArr = handleActiveName();
-    setDefaultOpenIndex(activeArr);
-  }, [activeName]);
-
-  var _onToggle = function onToggle(isOpen, name) {
-    var newOpenIndex = _toConsumableArray(defaultOpenIndex);
-
-    if (isOpen) {
-      // 当前状态为true，则变为false,闭合
-      var removeIndex = newOpenIndex.findIndex(function (value) {
-        return value === name;
-      });
-      newOpenIndex.splice(removeIndex, 1);
-    } else {
-      // 当前状态为false，变为true，展开
-      // eslint-disable-next-line no-lonely-if
-      if (accordion) {
-        newOpenIndex = [name];
+  var updateValue = function updateValue2(name) {
+    if (accordion) {
+      if (value === name) {
+        changeVal("", name, false);
       } else {
-        newOpenIndex.push(name);
+        changeVal(name, name, true);
       }
+    } else if (Array.isArray(value)) {
+      if (value.includes(name)) {
+        var newValue = value.filter(function(v) {
+          return v !== name;
+        });
+        changeVal(newValue, name, false);
+      } else {
+        var _newValue = value.concat([name]);
+        changeVal(_newValue, name, true);
+      }
+    } else {
+      console.warn("[NutUI] <Collapse> 未开启手风琴模式时 activeName 应为数组");
     }
-
-    setDefaultOpenIndex(newOpenIndex);
-    change && change(!isOpen, name);
   };
-
-  return React__default.createElement("div", {
-    className: colBem()
-  }, childrenDom.map(function (item) {
-    return React__default.cloneElement(item, {
-      isOpen: defaultOpenIndex.includes(item.props.name),
-      onToggle: function onToggle(isOpen, name) {
-        return _onToggle(isOpen, name);
-      },
-      icon: icon,
-      rotate: rotate,
-      iconSize: iconSize,
-      iconColor: iconColor
-    });
-  }));
-}, areEqual);
+  var isOpen = useCallback(function(name) {
+    if (accordion) {
+      return value === name;
+    }
+    if (Array.isArray(value)) {
+      return value.includes(name);
+    }
+    return false;
+  }, [accordion, value]);
+  return React__default.createElement(CollapseContext.Provider, {
+    value: {
+      isOpen,
+      updateValue,
+      expandIcon,
+      rotate
+    }
+  }, React__default.createElement("div", {
+    className: classNames(classPrefix, className),
+    style
+  }, children));
+};
 Collapse.defaultProps = defaultProps;
-Collapse.displayName = 'NutCollapse';
-export { Collapse as default };
+Collapse.displayName = "NutCollapse";
+Collapse.Item = CollapseItem;
+export {
+  Collapse as default
+};

package/dist/esm/CollapseItem/style/css.js

@@ -0,0 +1 @@
+import './style.css'

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

@@ -1,2 +1,2 @@
-require('../../Icon/style')
-require('../../../packages/collapseitem/collapseitem.scss')
+
+import '../../../packages/collapseitem/collapseitem.scss'

package/dist/esm/CollapseItem/style/style.css

@@ -0,0 +1 @@
+.nut-collapse-item__header{position:relative;display:flex;width:100%;overflow:hidden;padding:var(--nutui-collapse-item-padding, 13px 0px 13px 26px);font-size:var(--nutui-collapse-item-font-size, var(--nutui-font-size-2, 14px));line-height:var(--nutui-collapse-item-line-height, 24px);background-color:var(--nutui-gray-6, #ffffff);box-sizing:border-box}.nut-collapse-item__header:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:16px;bottom:0;left:16px;border-bottom:1px solid #ebedf0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.nut-collapse-item__title{color:var(--nutui-collapse-item-color, var(--nutui-gray-1, #1a1a1a));display:flex;align-items:center}.nut-collapse-item__extra{flex:1;display:flex;justify-content:flex-end;padding:0 20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nutui-collapse-item-extra-color, #666666)}.nut-collapse-item__icon-box{display:flex;padding-right:40px;position:relative}.nut-collapse-item__icon{display:flex;align-items:center;position:absolute;top:50%;left:5px;transform:translateY(-50%);transform-origin:center;transition:transform .3s}.nut-collapse-item__header.disabled,.nut-collapse-item__header.disabled .nut-collapse-item__title{color:var(--nutui-collapse-item-disabled-color, #c8c9cc)}.nut-collapse-item__content{overflow:hidden;display:block;color:var(--nutui-collapse-wrapper-content-color, #666666);font-size:var(--nutui-collapse-wrapper-content-font-size, var(--nutui-font-size-2, 14px));line-height:var(--nutui-collapse-wrapper-content-line-height, 1.5);background-color:var(--nutui-collapse-wrapper-content-background-color, var(--nutui-gray-6, #ffffff));transition:all .3s linear}.nut-collapse-item__content-text{color:var(--nutui-collapse-wrapper-content-color, #666666);padding:var(--nutui-collapse-wrapper-content-padding, 12px 26px)}

package/dist/esm/CollapseItem.js

@@ -1,146 +1,7 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "title", "isOpen", "onToggle", "name", "disabled", "icon", "rotate", "subTitle", "titleIcon", "titleIconColor", "titleIconPosition", "titleIconSize", "iconSize", "iconColor"];
-
-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, useEffect, useCallback } from 'react';
-import { c as cn } from './bem-893ad28d.js';
-import Icon from './Icon.js';
-import '@bem-react/classname';
-var defaultProps = {
-  title: '',
-  name: '',
-  isOpen: false,
-  icon: '',
-  iconSize: '',
-  iconColor: '',
-  disabled: false,
-  rotate: 180,
-  subTitle: '',
-  titleIcon: '',
-  titleIconColor: '',
-  titleIconPosition: '',
-  titleIconSize: ''
+import { a as CollapseItem } from "./collapseitem2.js";
+import "react";
+import "classnames";
+import "./typings.js";
+export {
+  CollapseItem as default
 };
-
-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,
-      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');
-  useEffect(function () {
-    setCurrHeight('auto');
-    setUpdate(!update);
-  }, [children]);
-  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]);
-  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, {
-    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, {
-    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, {
-    name: icon,
-    size: iconSize,
-    color: disabled ? '#C2C2C2' : iconColor
-  })))), 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/css.js

@@ -0,0 +1 @@
+

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

@@ -1,2 +1,2 @@
 
-require('../../../packages/configprovider/configprovider.scss')
+import '../../../packages/configprovider/configprovider.scss'