@ebscn/ui 0.0.11 → 1.0.0-beta.0

package/es/components/popup/popup.js

@@ -0,0 +1,135 @@
+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 { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks';
+import Mask from '../mask';
+import { CloseOutline } from 'antd-mobile-icons';
+import classNames from 'classnames';
+import React, { useRef, useState } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { renderToContainer } from '../../utils/render-to-container';
+import { ShouldRender } from '../../utils/should-render';
+import { useInnerVisible } from '../../utils/use-inner-visible';
+import { useLockScroll } from '../../utils/use-lock-scroll';
+import { mergeProps } from '../../utils/with-default-props';
+import { withStopPropagation } from '../../utils/with-stop-propagation';
+import { defaultPopupBaseProps } from './popup-base-props';
+var classPrefix = "ebscn-popup";
+var defaultProps = __assign(__assign({}, defaultPopupBaseProps), {
+  closeOnSwipe: false,
+  position: 'bottom'
+});
+export var Popup = function (p) {
+  var props = mergeProps(defaultProps, p);
+  var bodyCls = classNames("".concat(classPrefix, "-body"), props.bodyClassName, "".concat(classPrefix, "-body-position-").concat(props.position));
+  var _a = useState(props.visible),
+    active = _a[0],
+    setActive = _a[1];
+  var ref = useRef(null);
+  useLockScroll(ref, props.disableBodyScroll && active ? 'strict' : false);
+  useIsomorphicLayoutEffect(function () {
+    if (props.visible) {
+      setActive(true);
+    }
+  }, [props.visible]);
+  var unmountedRef = useUnmountedRef();
+  var percent = useSpring({
+    percent: props.visible ? 0 : 100,
+    config: {
+      precision: 0.1,
+      mass: 0.4,
+      tension: 300,
+      friction: 30
+    },
+    onRest: function () {
+      var _a, _b;
+      if (unmountedRef.current) return;
+      setActive(props.visible);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      }
+    }
+  }).percent;
+  var bind = useDrag(function (_a) {
+    var _b;
+    var _c = _a.swipe,
+      swipeY = _c[1];
+    if (!props.closeOnSwipe) return;
+    if (swipeY === 1 && props.position === 'bottom' || swipeY === -1 && props.position === 'top') {
+      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+    }
+  }, {
+    axis: 'y',
+    enabled: ['top', 'bottom'].includes(props.position)
+  });
+  var maskVisible = useInnerVisible(active && props.visible);
+  var node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", __assign({
+    className: classPrefix,
+    onClick: props.onClick,
+    style: {
+      display: active ? undefined : 'none',
+      touchAction: ['top', 'bottom'].includes(props.position) ? 'none' : 'auto'
+    }
+  }, bind()), props.mask && React.createElement(Mask, {
+    visible: maskVisible,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose,
+    onMaskClick: function (e) {
+      var _a, _b;
+      (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      if (props.closeOnMaskClick) {
+        (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      }
+    },
+    className: props.maskClassName,
+    style: props.maskStyle,
+    disableBodyScroll: false,
+    stopPropagation: props.stopPropagation
+  }), React.createElement(animated.div, {
+    className: bodyCls,
+    style: __assign(__assign({}, props.bodyStyle), {
+      pointerEvents: percent.to(function (v) {
+        return v === 0 ? 'unset' : 'none';
+      }),
+      transform: percent.to(function (v) {
+        if (props.position === 'bottom') {
+          return "translate(0, ".concat(v, "%)");
+        }
+        if (props.position === 'top') {
+          return "translate(0, -".concat(v, "%)");
+        }
+        if (props.position === 'left') {
+          return "translate(-".concat(v, "%, 0)");
+        }
+        if (props.position === 'right') {
+          return "translate(".concat(v, "%, 0)");
+        }
+        return 'none';
+      })
+    }),
+    ref: ref
+  }, props.showCloseButton && React.createElement("a", {
+    className: classNames("".concat(classPrefix, "-close-icon"), 'ebscn-plain-anchor'),
+    onClick: function () {
+      var _a;
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    },
+    role: "button"
+  }, React.createElement(CloseOutline, null)), props.children))));
+  return React.createElement(ShouldRender, {
+    active: active,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose
+  }, renderToContainer(props.getContainer, node));
+};

package/es/components/pro-selector/index.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import './pro-selector.less';
+export type { ProSelectorProps } from './pro-selector';
+declare const _default: (<V extends string | number>(props: {
+    defaultValue?: V[] | undefined;
+    label?: import("react").ReactNode;
+    head?: import("react").ReactNode;
+    value?: V[] | undefined;
+    options: import("../selector").SelectorOption<V>[];
+    fieldNames?: import("../../hooks").FieldNamesType | undefined;
+    multiple?: boolean | undefined;
+    disabled?: boolean | undefined;
+    selectorButtonProps?: import("../button").SelectorButtonProps | undefined;
+    selectorProps?: Pick<import("../selector").SelectorProps<V>, "className" | "style" | "showCheckMark"> | undefined;
+    checkBoxProps?: Pick<import("../checkbox").CheckboxProps, "className" | "style" | "size" | "icon"> | undefined;
+    radioProps?: Pick<import("../radio").RadioProps, "className" | "style" | "size" | "icon"> | undefined;
+    popupProps?: import("../popup").PopupProps | undefined;
+    onChange?: ((v: V[], extend: {
+        items: import("../selector").SelectorOption<V>[];
+    }) => void) | undefined;
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & {
+    onClick?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => unknown) | undefined;
+}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    Body: <T extends string | number>(p: import("./pro-selector").ProSelectorProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+};
+export default _default;

package/es/components/pro-selector/index.js

@@ -0,0 +1,6 @@
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { Body, ProSelector } from './pro-selector';
+import "./pro-selector.css";
+export default attachPropertiesToComponent(ProSelector, {
+  Body: Body
+});

package/es/components/pro-selector/pro-selector.css

@@ -0,0 +1,11 @@
+.ebscn-pro-selector-option-line:not(:last-child) {
+  border-bottom: 1px solid var(--ebscn-color-split-line);
+}
+.ebscn-pro-selector-head {
+  text-align: center;
+}
+.ebscn-pro-selector-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}

package/es/components/pro-selector/pro-selector.d.ts

@@ -0,0 +1,60 @@
+import React, { ReactNode } from 'react';
+import type { FieldNamesType } from '../../hooks';
+import { NativeProps } from '../../utils/native-props';
+import { SelectorButtonProps } from '../button/selectorButton';
+import { CheckboxProps } from '../checkbox';
+import { PopupProps } from '../popup';
+import { RadioProps } from '../radio';
+import { SelectorOption, SelectorProps } from '../selector';
+import './pro-selector.less';
+type SelectorValue = string | number;
+export type ProSelectorProps<V> = {
+    defaultValue?: V[];
+    label?: ReactNode;
+    head?: ReactNode;
+    value?: V[];
+    options: SelectorOption<V>[];
+    fieldNames?: FieldNamesType;
+    multiple?: boolean;
+    disabled?: boolean;
+    selectorButtonProps?: SelectorButtonProps;
+    selectorProps?: Pick<SelectorProps<V>, 'style' | 'className' | 'showCheckMark'>;
+    checkBoxProps?: Pick<CheckboxProps, 'style' | 'className' | 'size' | 'icon'>;
+    radioProps?: Pick<RadioProps, 'style' | 'className' | 'size' | 'icon'>;
+    popupProps?: PopupProps;
+    onChange?: (v: V[], extend: {
+        items: SelectorOption<V>[];
+    }) => void;
+} & NativeProps;
+export declare const defaultProps: {
+    head: null;
+    label: string;
+    defaultValue: never[];
+    multiple: boolean;
+};
+export declare const Body: <T extends SelectorValue>(p: ProSelectorProps<T>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const ProSelector: <V extends SelectorValue>(props: {
+    defaultValue?: V[] | undefined;
+    label?: ReactNode;
+    head?: ReactNode;
+    value?: V[] | undefined;
+    options: SelectorOption<V>[];
+    fieldNames?: FieldNamesType | undefined;
+    multiple?: boolean | undefined;
+    disabled?: boolean | undefined;
+    selectorButtonProps?: SelectorButtonProps | undefined;
+    selectorProps?: Pick<SelectorProps<V>, "className" | "style" | "showCheckMark"> | undefined;
+    checkBoxProps?: Pick<CheckboxProps, "className" | "style" | "size" | "icon"> | undefined;
+    radioProps?: Pick<RadioProps, "className" | "style" | "size" | "icon"> | undefined;
+    popupProps?: PopupProps | undefined;
+    onChange?: ((v: V[], extend: {
+        items: SelectorOption<V>[];
+    }) => void) | undefined;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & {
+    onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | Promise<void> | unknown) | undefined;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/es/components/pro-selector/pro-selector.js

@@ -0,0 +1,299 @@
+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);
+};
+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 React, { useCallback, useState } from 'react';
+import { useFieldNames } from '../../hooks';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { mergeProps } from '../../utils/with-default-props';
+import { Button } from '../button';
+import { SelectorButton } from '../button/selectorButton';
+import Checkbox from '../checkbox';
+import Popup from '../popup';
+import Radio from '../radio';
+import Selector from '../selector';
+import "./pro-selector.css";
+import classNames from 'classnames';
+import Card from '../card';
+var classPrefix = "ebscn-pro-selector";
+export var defaultProps = {
+  head: null,
+  label: '筛选',
+  defaultValue: [],
+  multiple: false
+};
+export var Body = function (p) {
+  var props = mergeProps(defaultProps, p);
+  var multiple = props.multiple,
+    options = props.options;
+  var _a = useFieldNames(props.fieldNames),
+    labelName = _a[0],
+    valueName = _a[1],
+    disabledName = _a[3];
+  var _b = usePropsValue({
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onChange: function (val) {
+        var _a;
+        var extend = {
+          get items() {
+            return props.options.filter(function (option) {
+              return val.includes(option[valueName]);
+            });
+          }
+        };
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
+      }
+    }),
+    value = _b[0],
+    setValue = _b[1];
+  var len = options.length;
+  var onChange = function (arr) {
+    return setValue(arr);
+  };
+  var optionRender = function () {
+    if (len <= 5) {
+      if (multiple) {
+        return React.createElement(Checkbox.Group, {
+          value: value,
+          onChange: onChange
+        }, options.map(function (item) {
+          var _a;
+          return React.createElement(Checkbox, __assign({
+            key: item[valueName],
+            iconRight: true,
+            size: "small"
+          }, props.checkBoxProps || {}, {
+            className: classNames((_a = props.checkBoxProps) === null || _a === void 0 ? void 0 : _a.className, 'ebscn-lh-50 ebscn-h-50', "".concat(classPrefix, "-option-line")),
+            disabled: item[disabledName] || props.disabled,
+            value: item[valueName]
+          }), item[labelName]);
+        }));
+      } else {
+        return React.createElement(Radio.Group, {
+          value: value === null || value === void 0 ? void 0 : value[0],
+          onChange: function (val) {
+            setValue([val]);
+          }
+        }, options.map(function (item) {
+          var _a;
+          return React.createElement(Radio, __assign({
+            key: item[valueName],
+            iconRight: true,
+            size: "small"
+          }, props.radioProps || {}, {
+            className: classNames((_a = props.radioProps) === null || _a === void 0 ? void 0 : _a.className, 'ebscn-lh-50 ebscn-h-50', "".concat(classPrefix, "-option-line")),
+            disabled: item[disabledName] || props.disabled,
+            value: item[valueName]
+          }), item[labelName]);
+        }));
+      }
+    } else {
+      return React.createElement(Selector, __assign({
+        style: {
+          marginBottom: '26px'
+        },
+        columns: 3
+      }, props, props.selectorProps || {}, {
+        value: value,
+        onChange: onChange
+      }));
+    }
+  };
+  return withNativeProps(props, React.createElement("div", {
+    className: "".concat(classPrefix, "-body")
+  }, optionRender()));
+};
+export var ProSelector = function (props) {
+  var _a = useState(false),
+    active = _a[0],
+    setActive = _a[1];
+  var valueName = useFieldNames(props.fieldNames)[0];
+  var _b = useState({
+      value: props.value || props.defaultValue || [],
+      extend: {
+        get items() {
+          return props.options.filter(function (option) {
+            return (props.value || props.defaultValue || []).includes(option[valueName]);
+          });
+        }
+      }
+    }),
+    data = _b[0],
+    setData = _b[1];
+  var handleClick = function (e) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var _a, _b, _c;
+      return __generator(this, function (_d) {
+        setActive(!active);
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        (_c = (_b = props.selectorButtonProps) === null || _b === void 0 ? void 0 : _b.onClick) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+        return [2 /*return*/];
+      });
+    });
+  };
+  var handleClose = useCallback(function () {
+    setActive(false);
+  }, []);
+  var onChange = function (value, extend) {
+    setData({
+      value: value,
+      extend: extend
+    });
+    if (!props.multiple) {
+      handleClose();
+      if (!props.onChange) return;
+      props.onChange(value, extend);
+    }
+  };
+  var onOk = function () {
+    handleClose();
+    if (!props.onChange) return;
+    props.onChange(data.value, data.extend);
+  };
+  return withNativeProps(props, React.createElement(SelectorButton, __assign({}, props.selectorButtonProps || {}, {
+    active: active,
+    onClick: handleClick
+  }), props.label, React.createElement(Popup, __assign({
+    visible: active,
+    onClose: handleClose
+  }, props.popupProps || {}), React.createElement(Card, {
+    type: 'module'
+  }, props.head && React.createElement("div", {
+    className: "".concat(classPrefix, "-head")
+  }, props.head), React.createElement(Body, __assign({}, props, {
+    onChange: onChange
+  })), props.multiple && React.createElement("div", {
+    className: "".concat(classPrefix, "-footer")
+  }, React.createElement(Button, {
+    size: "middle",
+    fill: "outline",
+    onClick: handleClose
+  }, "\u53D6\u6D88"), React.createElement(Button, {
+    size: "middle",
+    fill: "solid",
+    onClick: onOk
+  }, "\u786E\u5B9A"))))));
+};

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

@@ -0,0 +1,3 @@
+import Protocol from './protocol';
+import './protocol.less';
+export default Protocol;

package/es/components/protocol/index.js

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

package/es/components/protocol/protocol.css

@@ -0,0 +1,46 @@
+.ebscn-protocol {
+  overflow-y: auto;
+  margin: 10px 0;
+}
+.ebscn-protocol .ebscn-protocol-item {
+  display: flex;
+  margin-bottom: 10px;
+}
+.ebscn-protocol .ebscn-protocol-item:last-of-type {
+  margin-bottom: 0;
+}
+.ebscn-protocol .ebscn-protocol-item .ebscn-protocol-item-checkbox {
+  flex: 24px 0 0;
+  position: relative;
+}
+.ebscn-protocol .ebscn-protocol-item .ebscn-protocol-item-checkbox .ebscn-checkbox {
+  height: 18px;
+}
+.ebscn-protocol .ebscn-protocol-item .ebscn-protocol-item-checkbox .ebscn-checkbox::after {
+  position: absolute;
+  content: ' ';
+  width: 54px;
+  background-color: transparent;
+  top: 0;
+  bottom: 0;
+  left: -16px;
+}
+.ebscn-protocol .ebscn-protocol-item-text {
+  flex: 1;
+  color: var(--ebscn-color-text-secondary);
+  font-size: 12px;
+  line-height: 18px;
+}
+.ebscn-protocol.ebscn-protocol-scroll {
+  margin: 20px 0;
+}
+.ebscn-protocol-fixed-button {
+  position: fixed;
+  margin: 0 16px;
+  left: 0;
+  width: calc(100vw - 32px);
+  bottom: 20px;
+}
+.ebscn-protocol-top-button {
+  margin: 20px 0 ;
+}

package/es/components/protocol/protocol.d.ts

@@ -0,0 +1,15 @@
+import type { FC, ReactNode } from 'react';
+type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+interface Props {
+    children?: string | ReactNode[] | ReactNode;
+    buttonTop?: boolean;
+    scrollHeight?: string;
+    onConfirm?: () => void;
+    onAllCheck?: () => void;
+    hideButton?: boolean;
+    popoverContent?: string;
+    popoverPlacement?: Placement;
+    popoverTimeout?: number;
+}
+declare const Protocol: FC<Props>;
+export default Protocol;