react-is#isFragment JavaScript Examples

The following examples show how to use react-is#isFragment. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: toArray.js    From the-eye-knows-the-garbage with MIT License 6 votes vote down vote up 
export default function toArray(children) {
  var ret = [];
  React.Children.forEach(children, function (child) {
    if (child === undefined || child === null) {
      return;
    }

    if (Array.isArray(child)) {
      ret = ret.concat(toArray(child));
    } else if (isFragment(child) && child.props) {
      ret = ret.concat(toArray(child.props.children));
    } else {
      ret.push(child);
    }
  });
  return ret;
}
Example #2
Source File: Collapse.js    From spring-boot-ecommerce with Apache License 2.0 4 votes vote down vote up 
_initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.onClickItem = function (key) {
    var activeKey = _this2.state.activeKey;
    if (_this2.props.accordion) {
      activeKey = activeKey[0] === key ? [] : [key];
    } else {
      activeKey = [].concat(_toConsumableArray(activeKey));
      var index = activeKey.indexOf(key);
      var isActive = index > -1;
      if (isActive) {
        // remove active state
        activeKey.splice(index, 1);
      } else {
        activeKey.push(key);
      }
    }
    _this2.setActiveKey(activeKey);
  };

  this.getNewChild = function (child, index) {
    if (!child) return null;

    var activeKey = _this2.state.activeKey;
    var _props2 = _this2.props,
        prefixCls = _props2.prefixCls,
        accordion = _props2.accordion,
        destroyInactivePanel = _props2.destroyInactivePanel,
        expandIcon = _props2.expandIcon;
    // If there is no key provide, use the panel order as default key

    var key = child.key || String(index);
    var _child$props = child.props,
        header = _child$props.header,
        headerClass = _child$props.headerClass,
        disabled = _child$props.disabled;

    var isActive = false;
    if (accordion) {
      isActive = activeKey[0] === key;
    } else {
      isActive = activeKey.indexOf(key) > -1;
    }

    var props = {
      key: key,
      panelKey: key,
      header: header,
      headerClass: headerClass,
      isActive: isActive,
      prefixCls: prefixCls,
      destroyInactivePanel: destroyInactivePanel,
      openAnimation: _this2.state.openAnimation,
      accordion: accordion,
      children: child.props.children,
      onItemClick: disabled ? null : _this2.onClickItem,
      expandIcon: expandIcon
    };

    // https://github.com/ant-design/ant-design/issues/20479
    if (typeof child.type === 'string') {
      return child;
    }

    return React.cloneElement(child, props);
  };

  this.getItems = function () {
    var children = _this2.props.children;

    var childList = isFragment(children) ? children.props.children : children;
    var newChildren = Children.map(childList, _this2.getNewChild);

    //  ref: https://github.com/ant-design/ant-design/issues/13884
    if (isFragment(children)) {
      return React.createElement(
        React.Fragment,
        null,
        newChildren
      );
    }

    return newChildren;
  };

  this.setActiveKey = function (activeKey) {
    if (!('activeKey' in _this2.props)) {
      _this2.setState({ activeKey: activeKey });
    }
    _this2.props.onChange(_this2.props.accordion ? activeKey[0] : activeKey);
  };
}
Example #3
Source File: Collapse.js    From the-eye-knows-the-garbage with MIT License 4 votes vote down vote up 
_initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.onClickItem = function (key) {
    var activeKey = _this2.state.activeKey;
    if (_this2.props.accordion) {
      activeKey = activeKey[0] === key ? [] : [key];
    } else {
      activeKey = [].concat(_toConsumableArray(activeKey));
      var index = activeKey.indexOf(key);
      var isActive = index > -1;
      if (isActive) {
        // remove active state
        activeKey.splice(index, 1);
      } else {
        activeKey.push(key);
      }
    }
    _this2.setActiveKey(activeKey);
  };

  this.getNewChild = function (child, index) {
    if (!child) return null;

    var activeKey = _this2.state.activeKey;
    var _props2 = _this2.props,
        prefixCls = _props2.prefixCls,
        accordion = _props2.accordion,
        destroyInactivePanel = _props2.destroyInactivePanel,
        expandIcon = _props2.expandIcon;
    // If there is no key provide, use the panel order as default key

    var key = child.key || String(index);
    var _child$props = child.props,
        header = _child$props.header,
        headerClass = _child$props.headerClass,
        disabled = _child$props.disabled;

    var isActive = false;
    if (accordion) {
      isActive = activeKey[0] === key;
    } else {
      isActive = activeKey.indexOf(key) > -1;
    }

    var props = {
      key: key,
      panelKey: key,
      header: header,
      headerClass: headerClass,
      isActive: isActive,
      prefixCls: prefixCls,
      destroyInactivePanel: destroyInactivePanel,
      openAnimation: _this2.state.openAnimation,
      accordion: accordion,
      children: child.props.children,
      onItemClick: disabled ? null : _this2.onClickItem,
      expandIcon: expandIcon
    };

    // https://github.com/ant-design/ant-design/issues/20479
    if (typeof child.type === 'string') {
      return child;
    }

    return React.cloneElement(child, props);
  };

  this.getItems = function () {
    var children = _this2.props.children;

    var childList = isFragment(children) ? children.props.children : children;
    var newChildren = Children.map(childList, _this2.getNewChild);

    //  ref: https://github.com/ant-design/ant-design/issues/13884
    if (isFragment(children)) {
      return React.createElement(
        React.Fragment,
        null,
        newChildren
      );
    }

    return newChildren;
  };

  this.setActiveKey = function (activeKey) {
    if (!('activeKey' in _this2.props)) {
      _this2.setState({ activeKey: activeKey });
    }
    _this2.props.onChange(_this2.props.accordion ? activeKey[0] : activeKey);
  };
}