@ebscn/ui 1.0.3-beta.3 → 1.0.3-beta.30

package/es/components/infinite-scroll/infinite-scroll.js

@@ -0,0 +1,268 @@
+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 { useLockFn, useThrottleFn } from 'ahooks';
+import React, { useEffect, useRef, useState } from 'react';
+import Loading from '../../assets/images/loading.gif';
+import { getScrollParent } from '../../utils/get-scroll-parent';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+function isWindow(element) {
+  return element === window;
+}
+var classPrefix = "ebscn-infinite-scroll";
+var defaultProps = {
+  threshold: 250,
+  children: function (hasMore, failed, retry, NoMoreContent, FailContent) {
+    return React.createElement(InfiniteScrollContent, {
+      hasMore: hasMore,
+      failed: failed,
+      retry: retry,
+      NoMoreContent: NoMoreContent,
+      FailContent: FailContent
+    });
+  }
+};
+export var InfiniteScroll = function (p) {
+  var props = mergeProps(defaultProps, p);
+  var _a = useState(false),
+    failed = _a[0],
+    setFailed = _a[1];
+  var doloadMore = useLockFn(function (isRetry) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var e_1;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            _a.trys.push([0, 2,, 3]);
+            return [4 /*yield*/, props.loadMore(isRetry)];
+          case 1:
+            _a.sent();
+            return [3 /*break*/, 3];
+          case 2:
+            e_1 = _a.sent();
+            setFailed(true);
+            throw e_1;
+          case 3:
+            return [2 /*return*/];
+        }
+      });
+    });
+  });
+  var elementRef = useRef(null);
+  // Prevent duplicated trigger of `check` function
+  var _b = useState({}),
+    flag = _b[0],
+    setFlag = _b[1];
+  var nextFlagRef = useRef(flag);
+  var _c = useState(),
+    scrollParent = _c[0],
+    setScrollParent = _c[1];
+  var check = useThrottleFn(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var element, parent, rect, elementTop, current, nextFlag;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (nextFlagRef.current !== flag) return [2 /*return*/];
+            if (!props.hasMore) return [2 /*return*/];
+            element = elementRef.current;
+            if (!element) return [2 /*return*/];
+            if (!element.offsetParent) return [2 /*return*/];
+            parent = getScrollParent(element);
+            setScrollParent(parent);
+            if (!parent) return [2 /*return*/];
+            rect = element.getBoundingClientRect();
+            elementTop = rect.top;
+            current = isWindow(parent) ? window.innerHeight : parent.getBoundingClientRect().bottom;
+            if (!(current >= elementTop - props.threshold)) return [3 /*break*/, 2];
+            nextFlag = {};
+            nextFlagRef.current = nextFlag;
+            return [4 /*yield*/, doloadMore(false)];
+          case 1:
+            _a.sent();
+            setFlag(nextFlag);
+            _a.label = 2;
+          case 2:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, {
+    wait: 100,
+    leading: true,
+    trailing: true
+  }).run;
+  // Make sure to trigger `loadMore` when content changes
+  useEffect(function () {
+    check();
+  });
+  useEffect(function () {
+    var element = elementRef.current;
+    if (!element) return;
+    if (!scrollParent) return;
+    function onScroll() {
+      check();
+    }
+    scrollParent.addEventListener('scroll', onScroll);
+    return function () {
+      scrollParent.removeEventListener('scroll', onScroll);
+    };
+  }, [scrollParent]);
+  function retry() {
+    return __awaiter(this, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            setFailed(false);
+            return [4 /*yield*/, doloadMore(true)];
+          case 1:
+            _a.sent();
+            setFlag(nextFlagRef.current);
+            return [2 /*return*/];
+        }
+      });
+    });
+  }
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix,
+    ref: elementRef
+  }, typeof props.children === 'function' ? props.children(props.hasMore, failed, retry, props.NoMoreContent) : props.children));
+};
+var InfiniteScrollContent = function (props) {
+  var _a, _b;
+  if (!props.hasMore) {
+    return (_a = props.NoMoreContent) !== null && _a !== void 0 ? _a : React.createElement("span", {
+      className: "".concat(classPrefix, "-nodata-text")
+    }, "\u6211\u662F\u6709\u5E95\u7EBF\u7684");
+  }
+  if (props.failed) {
+    return (_b = props.FailContent) !== null && _b !== void 0 ? _b : React.createElement("span", {
+      onClick: function () {
+        props.retry();
+      }
+    }, React.createElement("span", {
+      className: "".concat(classPrefix, "-failed-text")
+    }, '加载失败,请重试'));
+  }
+  return React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "".concat(classPrefix, "-loading-wrap")
+  }, React.createElement("img", {
+    className: "".concat(classPrefix, "-loading-img"),
+    src: Loading
+  }), React.createElement("span", {
+    className: "".concat(classPrefix, "-loading-text")
+  }, "\u52A0\u8F7D\u4E2D...")));
+};

package/es/components/input/input.css

@@ -1,7 +1,7 @@
-.adm-input {
-  --font-size: var(--adm-font-size-9);
-  --color: var(--adm-color-text);
-  --placeholder-color: var(--adm-color-light);
+.ebscn-input {
+  --font-size: var(--ebscn-font-size-9);
+  --color: var(--ebscn-color-text);
+  --placeholder-color: var(--ebscn-color-light);
   --text-align: left;
   --background-color: transparent;
   display: flex;
@@ -13,11 +13,11 @@
   min-height: 24px;
   background-color: var(--background-color);
 }
-.adm-input-disabled {
+.ebscn-input-disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
-.adm-input-element {
+.ebscn-input-element {
   flex: auto;
   display: inline-block;
   box-sizing: border-box;
@@ -37,60 +37,60 @@
   min-height: 1.5em;
   text-align: var(--text-align);
 }
-.adm-input-element::-webkit-input-placeholder {
+.ebscn-input-element::-webkit-input-placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
 }
-.adm-input-element::placeholder {
+.ebscn-input-element::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
 }
-.adm-input-element:-webkit-autofill {
+.ebscn-input-element:-webkit-autofill {
   background-color: transparent;
 }
-.adm-input-element:read-only {
+.ebscn-input-element:read-only {
   cursor: default;
 }
-.adm-input-element:invalid {
+.ebscn-input-element:invalid {
   box-shadow: none;
 }
-.adm-input-element::-ms-clear {
+.ebscn-input-element::-ms-clear {
   display: none;
 }
-.adm-input-element::-ms-reveal {
+.ebscn-input-element::-ms-reveal {
   display: none;
 }
-.adm-input-element::-webkit-search-cancel-button {
+.ebscn-input-element::-webkit-search-cancel-button {
   display: none;
 }
-.adm-input-element::-webkit-search-decoration {
+.ebscn-input-element::-webkit-search-decoration {
   display: none;
 }
-.adm-input-element:disabled {
+.ebscn-input-element:disabled {
   opacity: 1;
 }
-.adm-input-element[type='date'],
-.adm-input-element[type='time'],
-.adm-input-element[type='datetime-local'] {
+.ebscn-input-element[type='date'],
+.ebscn-input-element[type='time'],
+.ebscn-input-element[type='datetime-local'] {
   min-height: 1.5em;
 }
-.adm-input-element[type='search'] {
+.ebscn-input-element[type='search'] {
   -webkit-appearance: none;
 }
-.adm-input-element[readonly] {
+.ebscn-input-element[readonly] {
   pointer-events: none;
 }
-.adm-input-clear {
+.ebscn-input-clear {
   flex: none;
   margin-left: 8px;
-  color: var(--adm-color-light);
+  color: var(--ebscn-color-light);
   padding: 4px;
   cursor: pointer;
 }
-.adm-input-clear:active {
-  color: var(--adm-color-weak);
+.ebscn-input-clear:active {
+  color: var(--ebscn-color-weak);
 }
-.adm-input-clear .antd-mobile-icon {
+.ebscn-input-clear .antd-mobile-icon {
   display: block;
-  font-size: var(--adm-font-size-7);
+  font-size: var(--ebscn-font-size-7);
 }

package/es/components/input/input.js

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { useIsomorphicLayoutEffect } from 'ahooks';
 import { bound } from '../../utils/bound';
 import { isIOS } from '../../utils/validate';
-var classPrefix = "adm-input";
+var classPrefix = "ebscn-input";
 var defaultProps = {
   defaultValue: '',
   onlyShowClearWhenFocus: true

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import './list.less';
+export type { ListProps, ListRef } from './list';
+export type { ListItemProps } from './list-item';
+declare const _default: import("react").ForwardRefExoticComponent<{
+    header?: import("react").ReactNode;
+    mode?: "default" | "card" | undefined;
+    children?: import("react").ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--font-size" | "--border-bottom" | "--active-background-color" | "--align-items" | "--border-inner" | "--border-top" | "--extra-max-width" | "--header-font-size" | "--padding-left" | "--padding-right" | "--prefix-padding-right" | "--prefix-width", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./list").ListRef>> & {
+    Item: import("react").FC<import("./list-item").ListItemProps>;
+};
+export default _default;

package/es/components/list/index.js

@@ -0,0 +1,7 @@
+import "./list.css";
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { List } from './list';
+import { ListItem } from './list-item';
+export default attachPropertiesToComponent(List, {
+  Item: ListItem
+});

package/es/components/list/list-item.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type ListItemProps = {
+    title?: ReactNode;
+    children?: ReactNode;
+    description?: ReactNode;
+    prefix?: ReactNode;
+    extra?: ReactNode;
+    clickable?: boolean;
+    arrow?: boolean | ReactNode;
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+} & NativeProps<'--prefix-width' | '--align-items' | '--active-background-color'>;
+export declare const ListItem: FC<ListItemProps>;

package/es/components/list/list-item.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { RightOutline } from 'antd-mobile-icons';
+import classNames from 'classnames';
+import { isNodeWithContent } from '../../utils/is-node-with-content';
+var classPrefix = "ebscn-list-item";
+export var ListItem = function (props) {
+  var _a;
+  var clickable = (_a = props.clickable) !== null && _a !== void 0 ? _a : !!props.onClick;
+  var arrow = props.arrow === undefined ? clickable : props.arrow;
+  var content = React.createElement("div", {
+    className: "".concat(classPrefix, "-content")
+  }, isNodeWithContent(props.prefix) && React.createElement("div", {
+    className: "".concat(classPrefix, "-content-prefix")
+  }, props.prefix), React.createElement("div", {
+    className: "".concat(classPrefix, "-content-main")
+  }, isNodeWithContent(props.title) && React.createElement("div", {
+    className: "".concat(classPrefix, "-title")
+  }, props.title), props.children, isNodeWithContent(props.description) && React.createElement("div", {
+    className: "".concat(classPrefix, "-description")
+  }, props.description)), isNodeWithContent(props.extra) && React.createElement("div", {
+    className: "".concat(classPrefix, "-content-extra")
+  }, props.extra), isNodeWithContent(arrow) && React.createElement("div", {
+    className: "".concat(classPrefix, "-content-arrow")
+  }, arrow === true ? React.createElement(RightOutline, null) : arrow));
+  return withNativeProps(props, React.createElement(clickable ? 'a' : 'div', {
+    className: classNames("".concat(classPrefix), clickable ? ['ebscn-plain-anchor'] : [], props.disabled && "".concat(classPrefix, "-disabled")),
+    onClick: props.disabled ? undefined : props.onClick
+  }, content));
+};

package/es/components/list/list.css

@@ -0,0 +1,101 @@
+.ebscn-list {
+  --header-font-size: var(--ebscn-font-size-7);
+  --prefix-width: 'auto';
+  --prefix-padding-right: 12px;
+  --align-items: center;
+  --active-background-color: var(--ebscn-color-border);
+  --border-inner: solid 1px var(--ebscn-color-border);
+  --border-top: solid 1px var(--ebscn-color-border);
+  --border-bottom: solid 1px var(--ebscn-color-border);
+  --padding-left: 12px;
+  --padding-right: 12px;
+  --font-size: var(--ebscn-font-size-9);
+  --extra-max-width: 70%;
+}
+.ebscn-list-header {
+  color: var(--ebscn-color-weak);
+  font-size: var(--header-font-size);
+  padding: 8px var(--padding-right) 8px var(--padding-left);
+}
+.ebscn-list-body {
+  background-color: var(--ebscn-color-background);
+  overflow: hidden;
+  font-size: var(--font-size);
+}
+.ebscn-list-body-inner {
+  margin-top: -1px;
+}
+.ebscn-list-default .ebscn-list-body {
+  border-bottom: var(--border-bottom);
+}
+.ebscn-list-card {
+  margin: 12px;
+}
+.ebscn-list-card .ebscn-list-body {
+  border-radius: 8px;
+}
+.ebscn-list-card .ebscn-list-header {
+  padding-left: 0;
+}
+.ebscn-list-item {
+  display: block;
+  padding-left: var(--padding-left);
+  position: relative;
+  background-color: var(--ebscn-color-background);
+  line-height: 1.5;
+}
+.ebscn-list-item-title,
+.ebscn-list-item-description {
+  color: var(--ebscn-color-weak);
+  font-size: var(--ebscn-font-size-main);
+}
+.ebscn-list-item-content {
+  display: flex;
+  align-items: var(--align-items);
+  justify-content: flex-start;
+  border-top: var(--border-inner);
+  padding-right: var(--padding-right);
+}
+.ebscn-list-item-content-prefix {
+  width: var(--prefix-width);
+  flex: none;
+  padding-right: var(--prefix-padding-right);
+}
+.ebscn-list-item-content-main {
+  flex: auto;
+  padding: 12px 0;
+}
+.ebscn-list-item-content-extra {
+  flex: none;
+  padding-left: 12px;
+  font-size: var(--ebscn-font-size-7);
+  color: var(--ebscn-color-weak);
+  max-width: var(--extra-max-width);
+}
+.ebscn-list-item-content-arrow {
+  flex: none;
+  display: flex;
+  align-items: center;
+  margin-left: 4px;
+  color: var(--ebscn-color-light);
+  font-size: 19px;
+}
+.ebscn-list-item-disabled {
+  cursor: not-allowed;
+}
+.ebscn-list-item-disabled.ebscn-list-item-disabled > .ebscn-list-item-content > * {
+  opacity: 0.4;
+  pointer-events: none;
+}
+a.ebscn-list-item:active:not(.ebscn-list-item-disabled) {
+  background-color: var(--active-background-color);
+}
+a.ebscn-list-item:active:not(.ebscn-list-item-disabled)::after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  bottom: -1px;
+  left: 0;
+  border-bottom: var(--border-inner);
+}

package/es/components/list/list.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type ListProps = {
+    header?: ReactNode;
+    mode?: 'default' | 'card';
+    children?: ReactNode;
+} & NativeProps<'--active-background-color' | '--align-items' | '--border-bottom' | '--border-inner' | '--border-top' | '--extra-max-width' | '--font-size' | '--header-font-size' | '--padding-left' | '--padding-right' | '--prefix-padding-right' | '--prefix-width'>;
+export type ListRef = {
+    nativeElement: HTMLDivElement | null;
+};
+export declare const List: React.ForwardRefExoticComponent<{
+    header?: ReactNode;
+    mode?: "default" | "card" | undefined;
+    children?: ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--font-size" | "--border-bottom" | "--active-background-color" | "--align-items" | "--border-inner" | "--border-top" | "--extra-max-width" | "--header-font-size" | "--padding-left" | "--padding-right" | "--prefix-padding-right" | "--prefix-width", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<ListRef>>;

package/es/components/list/list.js

@@ -0,0 +1,29 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = "ebscn-list";
+var defaultProps = {
+  mode: 'default'
+};
+export var List = forwardRef(function (p, ref) {
+  var props = mergeProps(defaultProps, p);
+  var nativeElementRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return {
+      get nativeElement() {
+        return nativeElementRef.current;
+      }
+    };
+  });
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, "".concat(classPrefix, "-").concat(props.mode)),
+    ref: nativeElementRef
+  }, props.header && React.createElement("div", {
+    className: "".concat(classPrefix, "-header")
+  }, props.header), React.createElement("div", {
+    className: "".concat(classPrefix, "-body")
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-body-inner")
+  }, props.children))));
+});