@ebscn/ui 0.0.10 → 1.0.0-beta.0

package/es/components/protocol/protocol.js

@@ -0,0 +1,112 @@
+import { Checkbox, Button } from '../..';
+import { Popover } from 'antd-mobile';
+import React, { useEffect, useRef, useState } from 'react';
+import { mergeProps } from '../../utils/with-default-props';
+var defaultProps = {
+  children: [],
+  buttonTop: false,
+  // 确认按钮默认在协议区下面，为true时按钮放到协议上面
+  scrollHeight: '',
+  // 协议区最大高度
+  hideButton: false,
+  // 是否隐藏确认按钮
+  popoverContent: '请勾选同意',
+  popoverPlacement: 'top-start',
+  popoverTimeout: 3000
+};
+var Protocol = function (p) {
+  var _a = useState([]),
+    checked = _a[0],
+    setChecked = _a[1];
+  var _b = useState(true),
+    popoverVisible = _b[0],
+    setPopoverVisible = _b[1];
+  var timer = useRef(null);
+  var props = mergeProps(defaultProps, p);
+  var containerClass = props.scrollHeight ? 'ebscn-protocol ebscn-protocol-scroll' : 'ebscn-protocol';
+  // 支持字符串，reactNode和ReactNode[], 统一处理为ReactNode[]
+  var children = typeof props.children === 'string' || !Array.isArray(props.children) ? [React.createElement(React.Fragment, null, props.children)] : props.children;
+  function showPop() {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    setPopoverVisible(true);
+    timer.current = setTimeout(function () {
+      // 3秒后隐藏popover
+      setPopoverVisible(false);
+    }, props.popoverTimeout);
+  }
+  function renderButton() {
+    if (props.hideButton) return;
+    var btnCls = props.buttonTop ? 'ebscn-protocol-top-button' : props.scrollHeight ? 'ebscn-protocol-fixed-button' : '';
+    var fullChecked = checked.length === children.length;
+    if (fullChecked && props.onAllCheck) {
+      // 全选后执行 onAllCheck
+      props.onAllCheck();
+    }
+    var btnClick = function () {
+      if (fullChecked) {
+        if (props.onConfirm) {
+          props.onConfirm();
+        }
+      } else {
+        showPop();
+      }
+    };
+    return React.createElement("div", {
+      onClick: btnClick,
+      style: {
+        height: '50px'
+      }
+    }, React.createElement(Button, {
+      block: true,
+      color: "primary",
+      size: "large",
+      className: btnCls,
+      disabled: !fullChecked,
+      style: {
+        pointerEvents: fullChecked ? 'auto' : 'none'
+      }
+    }, "\u786E\u8BA4"));
+  }
+  useEffect(function () {
+    showPop();
+    return function () {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
+    };
+  }, []);
+  return React.createElement(React.Fragment, null, props.buttonTop && renderButton(), React.createElement("div", {
+    className: containerClass,
+    style: {
+      maxHeight: props.scrollHeight
+    }
+  }, React.createElement(Popover, {
+    content: props.popoverContent,
+    placement: props.popoverPlacement,
+    mode: "dark",
+    visible: popoverVisible
+  }, React.createElement("span", null)), React.createElement(Checkbox.Group, {
+    value: checked,
+    onChange: function (v) {
+      setChecked(v);
+    }
+  }, children.map(function (child, index) {
+    return React.createElement("div", {
+      key: index,
+      className: "ebscn-protocol-item",
+      onClick: function () {
+        return setPopoverVisible(false);
+      }
+    }, React.createElement("div", {
+      className: "ebscn-protocol-item-checkbox"
+    }, React.createElement(Checkbox, {
+      size: "small",
+      value: index
+    })), React.createElement("div", {
+      className: "ebscn-protocol-item-text"
+    }, child));
+  }))), !props.buttonTop && renderButton());
+};
+export default Protocol;

package/es/components/pull-to-refresh/index.d.ts

@@ -0,0 +1,4 @@
+import './pull-to-refresh.less';
+import { PullToRefresh } from './pull-to-refresh';
+export type { PullToRefreshProps, PullStatus } from './pull-to-refresh';
+export default PullToRefresh;

package/es/components/pull-to-refresh/index.js

@@ -0,0 +1,3 @@
+import "./pull-to-refresh.css";
+import { PullToRefresh } from './pull-to-refresh';
+export default PullToRefresh;

package/es/components/pull-to-refresh/pull-to-refresh.css

@@ -0,0 +1,58 @@
+.ebscn-pull-to-refresh-head {
+  overflow: hidden;
+  position: relative;
+  background-color: var(--background-color);
+}
+.ebscn-pull-to-refresh-head-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  color: var(--ebscn-color-weak);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-grey {
+  --background-color: #f5f5f5;
+}
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-grey .ebscn-pull-to-refresh-complete,
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-grey .ebscn-pull-to-refresh-canRelease,
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-grey .ebscn-pull-to-refresh-pulling,
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-grey .ebscn-pull-to-refresh-refreshing {
+  color: #666;
+}
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-primary {
+  --background-color: var(--ebscn-color-primary);
+}
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-primary .ebscn-pull-to-refresh-complete,
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-primary .ebscn-pull-to-refresh-canRelease,
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-primary .ebscn-pull-to-refresh-pulling,
+.ebscn-pull-to-refresh-head.ebscn-pull-to-refresh-head-primary .ebscn-pull-to-refresh-refreshing {
+  color: white;
+}
+.ebscn-pull-to-refresh-complete div,
+.ebscn-pull-to-refresh-canRelease div,
+.ebscn-pull-to-refresh-pulling div,
+.ebscn-pull-to-refresh-refreshing div {
+  width: 28px;
+  height: 28px;
+  margin: 0 auto;
+}
+.ebscn-pull-to-refresh-complete div img,
+.ebscn-pull-to-refresh-canRelease div img,
+.ebscn-pull-to-refresh-pulling div img,
+.ebscn-pull-to-refresh-refreshing div img {
+  width: 100%;
+}
+.ebscn-pull-to-refresh-complete p,
+.ebscn-pull-to-refresh-canRelease p,
+.ebscn-pull-to-refresh-pulling p,
+.ebscn-pull-to-refresh-refreshing p {
+  font-size: 10px;
+  zoom: 0.833;
+  margin-top: 5px;
+  line-height: 14px;
+  height: 14px;
+  text-align: center;
+}

package/es/components/pull-to-refresh/pull-to-refresh.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete';
+export type PullToRefreshProps = {
+    color?: 'primary' | 'grey';
+    onRefresh?: () => Promise<any>;
+    pullingText?: ReactNode;
+    canReleaseText?: ReactNode;
+    refreshingText?: ReactNode;
+    completeText?: ReactNode;
+    completeDelay?: number;
+    minimumRefreshTime?: number;
+    headHeight?: number;
+    threshold?: number;
+    disabled?: boolean;
+    renderText?: (status: PullStatus) => ReactNode;
+    children?: ReactNode;
+} & NativeProps<'--background-color'>;
+export declare const defaultProps: {
+    color: string;
+    completeDelay: number;
+    disabled: boolean;
+    minimumRefreshTime: number;
+    onRefresh: () => void;
+};
+export declare const PullToRefresh: FC<PullToRefreshProps>;

package/es/components/pull-to-refresh/pull-to-refresh.js

@@ -0,0 +1,335 @@
+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 { animated, useSpring } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+import classNames from 'classnames';
+import React, { Suspense, useEffect, useRef, useState } from 'react';
+import PullLoadingGrey from '../../assets/images/pull_loading_grey.png';
+import PullLoadingRefreshingGrey from '../../assets/images/pull_loading_refreshing_grey.gif';
+import PullLoadingRefreshingWhite from '../../assets/images/pull_loading_refreshing_white.gif';
+import PullLoadingWhite from '../../assets/images/pull_loading_white.png';
+import { convertPx } from '../../utils/convert-px';
+import { getScrollParent } from '../../utils/get-scroll-parent';
+import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
+import { sleep } from '../../utils/sleep';
+import { supportsPassive } from '../../utils/supports-passive';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = "ebscn-pull-to-refresh";
+export var defaultProps = {
+  color: 'primary',
+  completeDelay: 500,
+  disabled: false,
+  minimumRefreshTime: 1500,
+  onRefresh: function () {}
+};
+export var PullToRefresh = function (p) {
+  var _a;
+  var _b, _c;
+  var props = mergeProps(defaultProps, {
+    refreshingText: React.createElement("div", {
+      className: "".concat(classPrefix, "-refreshing")
+    }, React.createElement(Suspense, null, React.createElement("div", null, (p === null || p === void 0 ? void 0 : p.color) === 'primary' ? React.createElement("img", {
+      src: PullLoadingRefreshingWhite
+    }) : React.createElement("img", {
+      src: PullLoadingRefreshingGrey
+    })), React.createElement("p", null, " "))),
+    pullingText: React.createElement("div", {
+      className: "".concat(classPrefix, "-pulling")
+    }, React.createElement("div", null, (p === null || p === void 0 ? void 0 : p.color) === 'primary' ? React.createElement("img", {
+      src: PullLoadingWhite
+    }) : React.createElement("img", {
+      src: PullLoadingGrey
+    })), React.createElement("p", null, " ")),
+    canReleaseText: React.createElement("div", {
+      className: "".concat(classPrefix, "-canRelease")
+    }, React.createElement("div", null, (p === null || p === void 0 ? void 0 : p.color) === 'primary' ? React.createElement("img", {
+      src: PullLoadingWhite
+    }) : React.createElement("img", {
+      src: PullLoadingGrey
+    })), React.createElement("p", null, "\u677E\u5F00\u5237\u65B0")),
+    completeText: React.createElement("div", {
+      className: "".concat(classPrefix, "-complete")
+    }, React.createElement("div", null, (p === null || p === void 0 ? void 0 : p.color) === 'primary' ? React.createElement("img", {
+      src: PullLoadingWhite
+    }) : React.createElement("img", {
+      src: PullLoadingGrey
+    })), React.createElement("p", null, "\u5DF2\u66F4\u65B0\u81F3\u6700\u65B0"))
+  }, p);
+  var headHeight = (_b = props.headHeight) !== null && _b !== void 0 ? _b : convertPx(50);
+  var threshold = (_c = props.threshold) !== null && _c !== void 0 ? _c : convertPx(60);
+  var _d = useState('pulling'),
+    status = _d[0],
+    setStatus = _d[1];
+  var _e = useSpring(function () {
+      return {
+        from: {
+          height: 0
+        },
+        config: {
+          tension: 300,
+          friction: 30,
+          round: true,
+          clamp: true
+        }
+      };
+    }),
+    springStyles = _e[0],
+    api = _e[1];
+  var elementRef = useRef(null);
+  var pullingRef = useRef(false);
+  //防止下拉时抖动
+  useEffect(function () {
+    var _a;
+    (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('touchmove', function () {});
+  }, []);
+  var reset = function () {
+    return new Promise(function (resolve) {
+      api.start({
+        to: {
+          height: 0
+        },
+        onResolve: function () {
+          setStatus('pulling');
+          resolve();
+        }
+      });
+    });
+  };
+  function doRefresh() {
+    var _a;
+    return __awaiter(this, void 0, void 0, function () {
+      var _b, _c, _d, e_1;
+      return __generator(this, function (_e) {
+        switch (_e.label) {
+          case 0:
+            api.start({
+              height: headHeight
+            });
+            setStatus('refreshing');
+            _e.label = 1;
+          case 1:
+            _e.trys.push([1, 5,, 6]);
+            _c = (_b = Promise).all;
+            return [4 /*yield*/, (_a = props.onRefresh) === null || _a === void 0 ? void 0 : _a.call(props)];
+          case 2:
+            _d = [_e.sent()];
+            return [4 /*yield*/, sleep(props.minimumRefreshTime)];
+          case 3:
+            return [4 /*yield*/, _c.apply(_b, [_d.concat([_e.sent()])])];
+          case 4:
+            _e.sent();
+            setStatus('complete');
+            return [3 /*break*/, 6];
+          case 5:
+            e_1 = _e.sent();
+            reset();
+            throw e_1;
+          case 6:
+            if (!(props.completeDelay > 0)) return [3 /*break*/, 8];
+            return [4 /*yield*/, sleep(props.completeDelay)];
+          case 7:
+            _e.sent();
+            _e.label = 8;
+          case 8:
+            reset();
+            return [2 /*return*/];
+        }
+      });
+    });
+  }
+  useDrag(function (state) {
+    if (status === 'refreshing' || status === 'complete') return;
+    var event = state.event;
+    if (state.last) {
+      pullingRef.current = false;
+      if (status === 'canRelease') {
+        doRefresh();
+      } else {
+        api.start({
+          height: 0
+        });
+      }
+      return;
+    }
+    var _a = state.movement,
+      y = _a[1];
+    var parsedY = Math.ceil(y);
+    function getScrollTop(element) {
+      return 'scrollTop' in element ? element.scrollTop : element.scrollY;
+    }
+    if (state.first && parsedY > 0) {
+      var target = state.event.target;
+      if (!target || !(target instanceof Element)) return;
+      var scrollParent = getScrollParent(target);
+      while (true) {
+        if (!scrollParent) return;
+        var scrollTop = getScrollTop(scrollParent);
+        if (scrollTop > 0) {
+          return;
+        }
+        if (scrollParent instanceof Window) {
+          break;
+        }
+        scrollParent = getScrollParent(scrollParent.parentNode);
+      }
+      pullingRef.current = true;
+    }
+    if (!pullingRef.current) return;
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+    event.stopPropagation();
+    var height = Math.max(rubberbandIfOutOfBounds(parsedY, 0, 0, headHeight * 5, 0.5), 0);
+    api.start({
+      height: height
+    });
+    setStatus(height > threshold ? 'canRelease' : 'pulling');
+  }, {
+    pointer: {
+      touch: true
+    },
+    axis: 'y',
+    target: elementRef,
+    enabled: !props.disabled,
+    eventOptions: supportsPassive ? {
+      passive: false
+    } : undefined
+  });
+  var renderStatusText = function () {
+    var _a;
+    if (props.renderText) {
+      return (_a = props.renderText) === null || _a === void 0 ? void 0 : _a.call(props, status);
+    }
+    if (status === 'pulling') return props.pullingText;
+    if (status === 'canRelease') return props.canReleaseText;
+    if (status === 'refreshing') return props.refreshingText;
+    if (status === 'complete') return props.completeText;
+  };
+  return React.createElement(animated.div, {
+    ref: elementRef,
+    className: classPrefix
+  }, React.createElement(animated.div, {
+    style: springStyles,
+    className: classNames("".concat(classPrefix, "-head"), (_a = {}, _a["".concat(classPrefix, "-head-primary")] = props.color === 'primary', _a["".concat(classPrefix, "-head-grey")] = props.color === 'grey', _a))
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-head-content"),
+    style: {
+      height: headHeight
+    }
+  }, renderStatusText())), React.createElement("div", {
+    className: "".concat(classPrefix, "-content")
+  }, props.children));
+};

package/es/components/radio/group-context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { RadioValue } from '.';
+export declare const RadioGroupContext: import("react").Context<{
+    value: RadioValue[];
+    disabled: boolean;
+    check: (val: RadioValue) => void;
+    uncheck: (val: RadioValue) => void;
+} | null>;

package/es/components/radio/group-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var RadioGroupContext = createContext(null);

package/es/components/radio/group.d.ts

@@ -0,0 +1,10 @@
+import type { FC, ReactNode } from 'react';
+import { RadioValue } from '.';
+export interface RadioGroupProps {
+    value?: RadioValue;
+    onChange?: (val: RadioValue) => void;
+    defaultValue?: RadioValue | null;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+export declare const Group: FC<RadioGroupProps>;

package/es/components/radio/group.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { mergeProps } from '../../utils/with-default-props';
+import { RadioGroupContext } from './group-context';
+import { usePropsValue } from '../../utils/use-props-value';
+var defaultProps = {
+  disabled: false,
+  defaultValue: null
+};
+export var Group = function (p) {
+  var props = mergeProps(defaultProps, p);
+  var _a = usePropsValue({
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onChange: function (v) {
+        var _a;
+        if (v === null) return;
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
+      }
+    }),
+    value = _a[0],
+    setValue = _a[1];
+  return React.createElement(RadioGroupContext.Provider
+  // TODO: 性能优化
+  , {
+    // TODO: 性能优化
+    value: {
+      value: value === null ? [] : [value],
+      check: function (v) {
+        setValue(v);
+      },
+      uncheck: function () {},
+      disabled: props.disabled
+    }
+  }, props.children);
+};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './radio.less';
+export type { RadioProps, RadioValue } from './radio';
+export type { RadioGroupProps } from './group';
+declare const _default: import("react").FC<import("./radio").RadioProps> & {
+    Group: import("react").FC<import("./group").RadioGroupProps>;
+};
+export default _default;

package/es/components/radio/index.js

@@ -0,0 +1,7 @@
+import "./radio.css";
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { Group } from './group';
+import { Radio } from './radio';
+export default attachPropertiesToComponent(Radio, {
+  Group: Group
+});