bcche-ui-react/dist/index.esm.js

A component library that can achieve magic effects

import React, { useState, useMemo, useEffect } from 'react';
import { usePrevious, useSetState } from 'ahooks';

var index = (function (_ref) {
  var title = _ref.title;
  return /*#__PURE__*/React.createElement("h1", null, title);
});

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 _objectSpread2(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;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};

  var target = _objectWithoutPropertiesLoose(source, excluded);

  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];

  if (_i == null) return;
  var _arr = [];
  var _n = true;
  var _d = false;

  var _s, _e;

  try {
    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

var oneItem = 270;

var CornerSwiper = function CornerSwiper(_ref) {
  var current = _ref.current,
      children = _ref.children,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className,
      _ref$position = _ref.position,
      position = _ref$position === void 0 ? 0.2 : _ref$position,
      _ref$rotateX = _ref.rotateX,
      rotateX = _ref$rotateX === void 0 ? '0deg' : _ref$rotateX,
      _ref$rotateY = _ref.rotateY,
      rotateY = _ref$rotateY === void 0 ? '-45deg' : _ref$rotateY,
      _ref$defaultCurrent = _ref.defaultCurrent,
      defaultCurrent = _ref$defaultCurrent === void 0 ? 0 : _ref$defaultCurrent,
      _ref$defaultMargin = _ref.defaultMargin,
      defaultMargin = _ref$defaultMargin === void 0 ? true : _ref$defaultMargin,
      _ref$perspective = _ref.perspective,
      perspective = _ref$perspective === void 0 ? '1000px' : _ref$perspective,
      _ref$perspectiveOrigi = _ref.perspectiveOriginX,
      perspectiveOriginX = _ref$perspectiveOrigi === void 0 ? '50%' : _ref$perspectiveOrigi,
      _ref$perspectiveOrigi2 = _ref.perspectiveOriginY,
      perspectiveOriginY = _ref$perspectiveOrigi2 === void 0 ? '50%' : _ref$perspectiveOrigi2;

  var _useState = useState(defaultCurrent),
      _useState2 = _slicedToArray(_useState, 1),
      _currentIndex = _useState2[0];

  var currentIndex = current !== null && current !== void 0 ? current : _currentIndex;
  var childrenList = useMemo(function () {
    var childList = Array.isArray(children) ? children : [children];

    if (!defaultMargin) {
      return childList;
    }

    return childList.map(function (child) {
      return /*#__PURE__*/React.cloneElement(child, _objectSpread2(_objectSpread2({}, child.props), {}, {
        className: "".concat(child.props.className || '', " mg-mr-5")
      }));
    });
  }, [children, defaultMargin]);
  var swiperElement = /*#__PURE__*/React.createElement("div", {
    className: "mg-h-full mg-flex-row mg-flex mg-flex-nowrap ".concat(className)
  }, childrenList);
  var translatePercent = currentIndex / childrenList.length;
  var positionStr = "".concat((position + translatePercent) * 100, "%");
  var element3D = /*#__PURE__*/React.cloneElement(swiperElement, _objectSpread2(_objectSpread2({}, swiperElement.props), {}, {
    className: "mg-absolute mg-top-0 mg-left-0 mg-overflow-hidden element-3d ".concat(swiperElement.props.className),
    style: {
      '--position': positionStr,
      '--rotate-x': rotateX,
      '--rotate-y': rotateY
    }
  }));
  var element2D = /*#__PURE__*/React.cloneElement(swiperElement, _objectSpread2(_objectSpread2({}, swiperElement.props), {}, {
    className: "mg-w-full mg-relative element-2d ".concat(swiperElement.props.className),
    style: {
      '--position': positionStr,
      '--rotate-x': rotateX
    }
  }));
  return /*#__PURE__*/React.createElement("div", {
    className: "swiper-container",
    style: {
      transform: "translatex(".concat(-translatePercent * oneItem * childrenList.length, "px)")
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "mg-w-full mg-h-full mg-relative corner-swiper",
    style: {
      perspective: perspective,
      perspectiveOrigin: "".concat(perspectiveOriginX, " ").concat(perspectiveOriginY)
    }
  }, element3D, element2D));
};

var _excluded = ["children", "className"];

var SwiperItem = function SwiperItem(_ref) {
  var children = _ref.children,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className,
      rest = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement("div", _objectSpread2({
    className: "mg-w-full mg-h-full ".concat(className)
  }, rest), children);
};

SwiperItem.displayName = 'SwiperItem';

var Cloudy = function Cloudy(_ref) {
  var _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className;
  return /*#__PURE__*/React.createElement("div", {
    className: className
  }, /*#__PURE__*/React.createElement("div", {
    className: 'cloud'
  }), /*#__PURE__*/React.createElement("div", {
    className: 'cloudx'
  }));
};

var Nighty = function Nighty(_ref) {
  var _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className;
  return /*#__PURE__*/React.createElement("div", {
    className: className
  }, /*#__PURE__*/React.createElement("div", {
    className: 'night'
  }, /*#__PURE__*/React.createElement("span", {
    className: 'moon'
  }), /*#__PURE__*/React.createElement("span", {
    className: 'spot1'
  }), /*#__PURE__*/React.createElement("span", {
    className: 'spot2'
  }), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null))));
};

var Rainy = function Rainy(_ref) {
  var _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className;
  return /*#__PURE__*/React.createElement("div", {
    className: "rainy ".concat(className)
  }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null)), /*#__PURE__*/React.createElement("span", {
    className: 'rainy-cloud'
  }));
};

var Snowy = function Snowy(_ref) {
  var _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className;
  return /*#__PURE__*/React.createElement("div", {
    className: "snowy ".concat(className)
  }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null), /*#__PURE__*/React.createElement("li", null)), /*#__PURE__*/React.createElement("span", {
    className: "snowe"
  }), /*#__PURE__*/React.createElement("span", {
    className: "snowex"
  }), /*#__PURE__*/React.createElement("span", {
    className: "stick"
  }), /*#__PURE__*/React.createElement("span", {
    className: "stick2"
  }));
};

var Sunny = function Sunny(_ref) {
  var _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className;
  return /*#__PURE__*/React.createElement("div", {
    className: className
  }, /*#__PURE__*/React.createElement("div", {
    className: "sun"
  }), /*#__PURE__*/React.createElement("div", {
    className: "sunx"
  }));
};

var _WeatherTypeStore;
var WeatherType;

(function (WeatherType) {
  WeatherType["sunny"] = "sunny";
  WeatherType["cloudy"] = "cloudy";
  WeatherType["rainy"] = "rainy";
  WeatherType["snowy"] = "snowy";
  WeatherType["nighty"] = "nighty";
})(WeatherType || (WeatherType = {}));

var WeatherTypeStore = (_WeatherTypeStore = {}, _defineProperty(_WeatherTypeStore, WeatherType.sunny, {
  class: 'weather-sunny',
  component: Sunny
}), _defineProperty(_WeatherTypeStore, WeatherType.cloudy, {
  class: 'weather-cloudy',
  component: Cloudy
}), _defineProperty(_WeatherTypeStore, WeatherType.rainy, {
  class: 'weather-rainy',
  component: Rainy
}), _defineProperty(_WeatherTypeStore, WeatherType.snowy, {
  class: 'weather-snowy',
  component: Snowy
}), _defineProperty(_WeatherTypeStore, WeatherType.nighty, {
  class: 'weather-nighty',
  component: Nighty
}), _WeatherTypeStore);

var Weather = function Weather(_ref) {
  var type = _ref.type,
      _ref$duration = _ref.duration,
      duration = _ref$duration === void 0 ? 3600 : _ref$duration,
      iconDuration = _ref.iconDuration,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className;
  var _WeatherTypeStore$typ = WeatherTypeStore[type],
      typeClassName = _WeatherTypeStore$typ.class,
      Component = _WeatherTypeStore$typ.component;
  var preType = usePrevious(type);
  var PreComponent = WeatherTypeStore[preType || type].component;

  var _useSetState = useSetState({
    preClassName: '',
    curClassName: ''
  }),
      _useSetState2 = _slicedToArray(_useSetState, 2),
      animates = _useSetState2[0],
      setAnimates = _useSetState2[1];

  useEffect(function () {
    if (!preType) {
      return;
    } // TODO:use different animations for different weather switches


    setAnimates({
      preClassName: 'animate__fadeOut',
      curClassName: 'animate__fadeIn'
    });
  }, [preType, type, setAnimates]);
  var style = {
    '--animate-duration': "".concat(iconDuration !== null && iconDuration !== void 0 ? iconDuration : duration / 2, "ms")
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "weather-container ".concat(typeClassName, " ").concat(className),
    style: style
  }, preType ? /*#__PURE__*/React.createElement(PreComponent, {
    className: "animate__animated ".concat(animates.preClassName)
  }) : null, /*#__PURE__*/React.createElement(Component, {
    className: "animate__animated ".concat(animates.curClassName)
  }));
};

var Loading = function Loading() {
  return /*#__PURE__*/React.createElement("div", {
    className: "loading-modal-two"
  }, /*#__PURE__*/React.createElement("div", {
    className: 'loading-modal-loading'
  }, /*#__PURE__*/React.createElement("img", {
    className: 'loading-modalimg',
    src: 'https://pic2.58cdn.com.cn/p1/big/n_v203ba4dd38c3f4ecd8a287001ba30b7e9.jpg'
  }), /*#__PURE__*/React.createElement("p", {
    className: 'loading-modal-sure'
  }, "\u52A0\u8F7D\u4E2D...")));
};

export { CornerSwiper, index as Foo, Loading, SwiperItem, Weather };