@ebscn/ui 0.0.11 → 1.0.0-beta.0

package/es/components/swiper/swiper.js

@@ -0,0 +1,363 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+import { animated, useSpring } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+import { useGetState, useIsomorphicLayoutEffect } from 'ahooks';
+import classNames from 'classnames';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { staged } from 'staged-components';
+import { bound } from '../../utils/bound';
+import { devWarning } from '../../utils/dev-log';
+import { withNativeProps } from '../../utils/native-props';
+import { useRefState } from '../../utils/use-ref-state';
+import { mergeProps } from '../../utils/with-default-props';
+import { mergeFuncProps } from '../../utils/with-func-props';
+import PageIndicator from '../page-indicator';
+import { SwiperItem } from './swiper-item';
+var classPrefix = "ebscn-swiper";
+var eventToPropRecord = {
+  mousedown: 'onMouseDown',
+  mousemove: 'onMouseMove',
+  mouseup: 'onMouseUp'
+};
+var defaultProps = {
+  defaultIndex: 0,
+  allowTouchMove: true,
+  autoplay: true,
+  autoplayInterval: 5000,
+  loop: true,
+  direction: 'horizontal',
+  slideSize: 100,
+  trackOffset: 0,
+  stuckAtBoundary: true,
+  rubberband: true,
+  stopPropagation: [],
+  indicatorProps: {
+    style: {
+      '--active-dot-color': '#fff',
+      '--dot-color': 'rgba(255,255,255,0.7)'
+    }
+  }
+};
+var currentUid;
+export var Swiper = forwardRef(staged(function (p, ref) {
+  var props = mergeProps(defaultProps, p);
+  var direction = props.direction,
+    total = props.total,
+    children = props.children,
+    indicator = props.indicator;
+  var uid = useState({})[0];
+  var timeoutRef = useRef(null);
+  var isVertical = direction === 'vertical';
+  var slideRatio = props.slideSize / 100;
+  var offsetRatio = props.trackOffset / 100;
+  var _a = useMemo(function () {
+      var count = 0;
+      var renderChildren = undefined;
+      var validChildren = undefined;
+      if (typeof children === 'function') {
+        renderChildren = children;
+      } else {
+        validChildren = React.Children.map(children, function (child) {
+          if (!React.isValidElement(child)) return null;
+          if (child.type !== SwiperItem) {
+            devWarning('Swiper', 'The children of `Swiper` must be `Swiper.Item` components.');
+            return null;
+          }
+          count++;
+          return child;
+        });
+      }
+      return {
+        renderChildren: renderChildren,
+        validChildren: validChildren,
+        count: count
+      };
+    }, [children]),
+    validChildren = _a.validChildren,
+    count = _a.count,
+    renderChildren = _a.renderChildren;
+  var mergedTotal = total !== null && total !== void 0 ? total : count;
+  if (mergedTotal === 0 || !validChildren && !renderChildren) {
+    devWarning('Swiper', '`Swiper` needs at least one child.');
+    return null;
+  }
+  return function () {
+    var _a;
+    var loop = props.loop;
+    if (slideRatio * (mergedTotal - 1) < 1) {
+      loop = false;
+    }
+    var trackRef = useRef(null);
+    function getSlidePixels() {
+      var track = trackRef.current;
+      if (!track) return 0;
+      var trackPixels = isVertical ? track.offsetHeight : track.offsetWidth;
+      return trackPixels * props.slideSize / 100;
+    }
+    var _b = useGetState(props.defaultIndex),
+      current = _b[0],
+      setCurrent = _b[1],
+      getCurrent = _b[2];
+    var _c = useRefState(false),
+      dragging = _c[0],
+      setDragging = _c[1],
+      draggingRef = _c[2];
+    function boundIndex(current) {
+      var min = 0;
+      var max = mergedTotal - 1;
+      if (props.stuckAtBoundary) {
+        min += offsetRatio / slideRatio;
+        max -= (1 - slideRatio - offsetRatio) / slideRatio;
+      }
+      return bound(current, min, max);
+    }
+    var _d = useSpring(function () {
+        return {
+          position: boundIndex(current) * 100,
+          config: {
+            tension: 200,
+            friction: 30
+          },
+          onRest: function () {
+            if (draggingRef.current) return;
+            if (!loop) return;
+            var rawX = position.get();
+            var totalWidth = 100 * mergedTotal;
+            var standardPosition = modulus(rawX, totalWidth);
+            if (standardPosition === rawX) return;
+            api.start({
+              position: standardPosition,
+              immediate: true
+            });
+          }
+        };
+      }, [mergedTotal]),
+      position = _d[0].position,
+      api = _d[1];
+    var dragCancelRef = useRef(null);
+    function forceCancelDrag() {
+      var _a;
+      (_a = dragCancelRef.current) === null || _a === void 0 ? void 0 : _a.call(dragCancelRef);
+      draggingRef.current = false;
+    }
+    var bind = useDrag(function (state) {
+      dragCancelRef.current = state.cancel;
+      if (!state.intentional) return;
+      if (state.first && !currentUid) {
+        currentUid = uid;
+      }
+      if (currentUid !== uid) return;
+      currentUid = state.last ? undefined : uid;
+      var slidePixels = getSlidePixels();
+      if (!slidePixels) return;
+      var paramIndex = isVertical ? 1 : 0;
+      var offset = state.offset[paramIndex];
+      var direction = state.direction[paramIndex];
+      var velocity = state.velocity[paramIndex];
+      setDragging(true);
+      if (!state.last) {
+        api.start({
+          position: offset * 100 / slidePixels,
+          immediate: true
+        });
+      } else {
+        var minIndex = Math.floor(offset / slidePixels);
+        var maxIndex = minIndex + 1;
+        var index = Math.round((offset + velocity * 2000 * direction) / slidePixels);
+        swipeTo(bound(index, minIndex, maxIndex));
+        window.setTimeout(function () {
+          setDragging(false);
+        });
+      }
+    }, {
+      transform: function (_a) {
+        var x = _a[0],
+          y = _a[1];
+        return [-x, -y];
+      },
+      from: function () {
+        var slidePixels = getSlidePixels();
+        return [position.get() / 100 * slidePixels, position.get() / 100 * slidePixels];
+      },
+      triggerAllEvents: true,
+      bounds: function () {
+        if (loop) return {};
+        var slidePixels = getSlidePixels();
+        var lowerBound = boundIndex(0) * slidePixels;
+        var upperBound = boundIndex(mergedTotal - 1) * slidePixels;
+        return isVertical ? {
+          top: lowerBound,
+          bottom: upperBound
+        } : {
+          left: lowerBound,
+          right: upperBound
+        };
+      },
+      rubberband: props.rubberband,
+      axis: isVertical ? 'y' : 'x',
+      preventScroll: !isVertical,
+      pointer: {
+        touch: true
+      }
+    });
+    function swipeTo(index, immediate) {
+      var _a;
+      if (immediate === void 0) {
+        immediate = false;
+      }
+      var roundedIndex = Math.round(index);
+      var targetIndex = loop ? modulus(roundedIndex, mergedTotal) : bound(roundedIndex, 0, mergedTotal - 1);
+      if (targetIndex !== getCurrent()) {
+        (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, targetIndex);
+      }
+      setCurrent(targetIndex);
+      api.start({
+        position: (loop ? roundedIndex : boundIndex(roundedIndex)) * 100,
+        immediate: immediate
+      });
+    }
+    function swipeNext() {
+      swipeTo(Math.round(position.get() / 100) + 1);
+    }
+    function swipePrev() {
+      swipeTo(Math.round(position.get() / 100) - 1);
+    }
+    useImperativeHandle(ref, function () {
+      return {
+        swipeTo: swipeTo,
+        swipeNext: swipeNext,
+        swipePrev: swipePrev
+      };
+    });
+    useIsomorphicLayoutEffect(function () {
+      var maxIndex = mergedTotal - 1;
+      if (current > maxIndex) {
+        swipeTo(maxIndex, true);
+      }
+    });
+    var autoplay = props.autoplay,
+      autoplayInterval = props.autoplayInterval;
+    var runTimeSwiper = function () {
+      timeoutRef.current = window.setTimeout(function () {
+        swipeNext();
+        runTimeSwiper();
+      }, autoplayInterval);
+    };
+    useEffect(function () {
+      if (!autoplay || dragging) return;
+      runTimeSwiper();
+      return function () {
+        if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+      };
+    }, [autoplay, autoplayInterval, dragging, mergedTotal]);
+    // ============================== Render ==============================
+    // Render Item
+    function renderItem(index, child) {
+      var _a, _b;
+      var itemStyle = {};
+      if (loop) {
+        itemStyle = (_a = {}, _a[isVertical ? 'y' : 'x'] = position.to(function (position) {
+          var finalPosition = -position + index * 100;
+          var totalWidth = mergedTotal * 100;
+          var flagWidth = totalWidth / 2;
+          finalPosition = modulus(finalPosition + flagWidth, totalWidth) - flagWidth;
+          return "".concat(finalPosition, "%");
+        }), _a[isVertical ? 'top' : 'left'] = "-".concat(index * 100, "%"), _a);
+      }
+      return React.createElement(animated.div, {
+        className: classNames("".concat(classPrefix, "-slide"), (_b = {}, _b["".concat(classPrefix, "-slide-active")] = current === index, _b)),
+        style: itemStyle,
+        key: index
+      }, child);
+    }
+    function renderItems() {
+      if (renderChildren && total) {
+        var offsetCount = 2;
+        var startIndex = Math.max(current - offsetCount, 0);
+        var endIndex = Math.min(current + offsetCount, total - 1);
+        var items = [];
+        for (var index = startIndex; index <= endIndex; index += 1) {
+          items.push(renderItem(index, renderChildren(index)));
+        }
+        return React.createElement(React.Fragment, null, React.createElement("div", {
+          className: "".concat(classPrefix, "-slide-placeholder"),
+          style: {
+            width: "".concat(startIndex * 100, "%")
+          }
+        }), items);
+      }
+      return React.Children.map(validChildren, function (child, index) {
+        return renderItem(index, child);
+      });
+    }
+    // Render Track Inner
+    function renderTrackInner() {
+      var _a;
+      if (loop) {
+        return React.createElement("div", {
+          className: "".concat(classPrefix, "-track-inner")
+        }, renderItems());
+      } else {
+        return React.createElement(animated.div, {
+          className: "".concat(classPrefix, "-track-inner"),
+          style: (_a = {}, _a[isVertical ? 'y' : 'x'] = position.to(function (position) {
+            return "".concat(-position, "%");
+          }), _a)
+        }, renderItems());
+      }
+    }
+    // Render
+    var style = {
+      '--slide-size': "".concat(props.slideSize, "%"),
+      '--track-offset': "".concat(props.trackOffset, "%")
+    };
+    var dragProps = __assign({}, props.allowTouchMove ? bind() : {});
+    var stopPropagationProps = {};
+    for (var _i = 0, _e = props.stopPropagation; _i < _e.length; _i++) {
+      var key = _e[_i];
+      var prop = eventToPropRecord[key];
+      stopPropagationProps[prop] = function (e) {
+        e.stopPropagation();
+      };
+    }
+    var mergedProps = mergeFuncProps(dragProps, stopPropagationProps);
+    var indicatorNode = null;
+    if (typeof indicator === 'function') {
+      indicatorNode = indicator(mergedTotal, current);
+    } else if (indicator !== false) {
+      indicatorNode = React.createElement("div", {
+        className: "".concat(classPrefix, "-indicator")
+      }, React.createElement(PageIndicator, __assign({}, props.indicatorProps, {
+        total: mergedTotal,
+        current: current,
+        direction: direction
+      })));
+    }
+    return withNativeProps(props, React.createElement("div", {
+      className: classNames(classPrefix, "".concat(classPrefix, "-").concat(direction)),
+      style: style
+    }, React.createElement("div", __assign({
+      ref: trackRef,
+      className: classNames("".concat(classPrefix, "-track"), (_a = {}, _a["".concat(classPrefix, "-track-allow-touch-move")] = props.allowTouchMove, _a)),
+      onClickCapture: function (e) {
+        if (draggingRef.current) {
+          e.stopPropagation();
+        }
+        forceCancelDrag();
+      }
+    }, mergedProps), renderTrackInner()), indicatorNode));
+  };
+}));
+function modulus(value, division) {
+  var remainder = value % division;
+  return remainder < 0 ? remainder + division : remainder;
+}

package/es/components/switch/index.d.ts

@@ -0,0 +1,4 @@
+import './switch.less';
+import Switch from './switch';
+export type { SwitchProps } from './switch';
+export default Switch;

package/es/components/switch/index.js

@@ -0,0 +1,3 @@
+import "./switch.css";
+import Switch from './switch';
+export default Switch;

package/es/components/switch/switch.css

@@ -0,0 +1,104 @@
+@keyframes loading-rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+.ebscn-switch {
+  --checked-color: var(--ebscn-color-primary);
+  --height: 31px;
+  --width: 51px;
+  --border-width: 2px;
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  position: relative;
+  align-self: center;
+  cursor: pointer;
+  /* 选中状态 */
+  /* 禁用状态 */
+  /* loading图标 */
+}
+.ebscn-switch.ebscn-switch-small {
+  --height: 27px;
+  --width: 44px;
+}
+.ebscn-switch input {
+  display: none;
+}
+.ebscn-switch-checkbox {
+  min-width: var(--width);
+  height: var(--height);
+  box-sizing: border-box;
+  border-radius: 31px;
+  background: var(--ebscn-color-border);
+  z-index: 0;
+  overflow: hidden;
+  line-height: var(--height);
+}
+.ebscn-switch-checkbox:before {
+  content: ' ';
+  position: absolute;
+  left: var(--border-width);
+  top: var(--border-width);
+  width: calc(100% - 2 * var(--border-width));
+  height: calc(var(--height) - 2 * var(--border-width));
+  border-radius: calc(var(--height) - 2 * var(--border-width));
+  box-sizing: border-box;
+  background: #E9E9EA;
+  z-index: 1;
+  transition: all 200ms;
+  transform: scale(1);
+}
+.ebscn-switch-handle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(var(--height) - 2 * var(--border-width));
+  height: calc(var(--height) - 2 * var(--border-width));
+  border-radius: calc(var(--height) - 2 * var(--border-width));
+  background: var(--ebscn-color-text-light-solid);
+  position: absolute;
+  z-index: 2;
+  top: var(--border-width);
+  left: var(--border-width);
+  transition: all 200ms;
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 2px 11.5px 0 rgba(0, 0, 0, 0.08), -1px 2px 2px 0 rgba(0, 0, 0, 0.1);
+  color: var(--ebscn-color-primary);
+}
+.ebscn-switch-inner {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 8px 0 calc(var(--height) - var(--border-width) + 5px);
+  height: 100%;
+  color: var(--ebscn-color-weak);
+  transition: margin 200ms;
+  font-size: var(--ebscn-font-size-7);
+}
+.ebscn-switch.ebscn-switch-checked .ebscn-switch-checkbox {
+  background: var(--checked-color);
+}
+.ebscn-switch.ebscn-switch-checked .ebscn-switch-checkbox:before {
+  transform: scale(0);
+}
+.ebscn-switch.ebscn-switch-checked .ebscn-switch-handle {
+  left: calc(100% - (var(--height) - var(--border-width)));
+}
+.ebscn-switch.ebscn-switch-checked .ebscn-switch-inner {
+  margin: 0 calc(var(--height) - var(--border-width) + 5px) 0 8px;
+  color: var(--ebscn-color-text-light-solid);
+}
+.ebscn-switch.ebscn-switch-disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.ebscn-switch.ebscn-switch-disabled:before {
+  background-color: #f4f4f4;
+}
+.ebscn-switch-spin-icon {
+  width: 14px;
+  height: 14px;
+  animation: loading-rotate 1s linear infinite;
+}

package/es/components/switch/switch.d.ts

@@ -0,0 +1,16 @@
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type SwitchProps = {
+    loading?: boolean;
+    disabled?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    /** @deprecated use `onChange` instead */
+    beforeChange?: (val: boolean) => Promise<void>;
+    onChange?: (checked: boolean) => void | Promise<void>;
+    checkedText?: ReactNode;
+    uncheckedText?: ReactNode;
+    size?: 'normal' | 'small';
+} & NativeProps<'--checked-color' | '--width' | '--height' | '--border-width'>;
+declare const Switch: FC<SwitchProps>;
+export default Switch;

package/es/components/switch/switch.js

@@ -0,0 +1,204 @@
+var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+var __generator = this && this.__generator || function (thisArg, body) {
+  var _ = {
+      label: 0,
+      sent: function () {
+        if (t[0] & 1) throw t[1];
+        return t[1];
+      },
+      trys: [],
+      ops: []
+    },
+    f,
+    y,
+    t,
+    g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+    while (g && (g = 0, op[0] && (_ = 0)), _) try {
+      if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+      if (y = 0, t) op = [op[0] & 2, t.value];
+      switch (op[0]) {
+        case 0:
+        case 1:
+          t = op;
+          break;
+        case 4:
+          _.label++;
+          return {
+            value: op[1],
+            done: false
+          };
+        case 5:
+          _.label++;
+          y = op[1];
+          op = [0];
+          continue;
+        case 7:
+          op = _.ops.pop();
+          _.trys.pop();
+          continue;
+        default:
+          if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+            _ = 0;
+            continue;
+          }
+          if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+            _.label = op[1];
+            break;
+          }
+          if (op[0] === 6 && _.label < t[1]) {
+            _.label = t[1];
+            t = op;
+            break;
+          }
+          if (t && _.label < t[2]) {
+            _.label = t[2];
+            _.ops.push(op);
+            break;
+          }
+          if (t[2]) _.ops.pop();
+          _.trys.pop();
+          continue;
+      }
+      op = body.call(thisArg, _);
+    } catch (e) {
+      op = [6, e];
+      y = 0;
+    } finally {
+      f = t = 0;
+    }
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+};
+import { SpinIcon } from '../..';
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { isPromise } from '../../utils/validate';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = "ebscn-switch";
+var defaultProps = {
+  defaultChecked: false,
+  size: 'normal'
+};
+var Switch = function (p) {
+  var _a;
+  var props = mergeProps(defaultProps, p);
+  var disabled = props.disabled || props.loading || false;
+  var _b = useState(false),
+    changing = _b[0],
+    setChanging = _b[1];
+  var _c = usePropsValue({
+      value: props.checked,
+      defaultValue: props.defaultChecked,
+      onChange: props.onChange
+    }),
+    checked = _c[0],
+    setChecked = _c[1];
+  function onClick() {
+    return __awaiter(this, void 0, void 0, function () {
+      var nextChecked, e_1, result, e_2;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (disabled || props.loading || changing) {
+              return [2 /*return*/];
+            }
+            nextChecked = !checked;
+            if (!props.beforeChange) return [3 /*break*/, 4];
+            setChanging(true);
+            _a.label = 1;
+          case 1:
+            _a.trys.push([1, 3,, 4]);
+            return [4 /*yield*/, props.beforeChange(nextChecked)];
+          case 2:
+            _a.sent();
+            setChanging(false);
+            return [3 /*break*/, 4];
+          case 3:
+            e_1 = _a.sent();
+            setChanging(false);
+            throw e_1;
+          case 4:
+            result = setChecked(nextChecked);
+            if (!isPromise(result)) return [3 /*break*/, 8];
+            setChanging(true);
+            _a.label = 5;
+          case 5:
+            _a.trys.push([5, 7,, 8]);
+            return [4 /*yield*/, result];
+          case 6:
+            _a.sent();
+            setChanging(false);
+            return [3 /*break*/, 8];
+          case 7:
+            e_2 = _a.sent();
+            setChanging(false);
+            throw e_2;
+          case 8:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }
+  return withNativeProps(props, React.createElement("div", {
+    onClick: onClick,
+    className: classNames(classPrefix, (_a = {}, _a["".concat(classPrefix, "-checked")] = checked, _a["".concat(classPrefix, "-disabled")] = disabled || changing, _a["".concat(classPrefix, "-small")] = props.size === 'small', _a)),
+    role: "switch",
+    "aria-checked": checked,
+    "aria-disabled": disabled
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-checkbox")
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-handle")
+  }, (props.loading || changing) && React.createElement(SpinIcon, {
+    className: "".concat(classPrefix, "-spin-icon")
+  })), React.createElement("div", {
+    className: "".concat(classPrefix, "-inner")
+  }, checked ? props.checkedText : props.uncheckedText))));
+};
+export default Switch;

package/es/components/tabs/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './tabs.less';
+export type { TabsProps, TabProps } from './tabs';
+declare const _default: import("react").FC<import("./tabs").TabsProps> & {
+    Tab: import("react").FC<import("./tabs").TabProps>;
+};
+export default _default;