@ebscn/ui 0.0.10 → 1.0.0

package/es/components/pdfLink/pdfLink.js

@@ -0,0 +1,94 @@
+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 { Button } from '@ebscn/ui';
+import { Popup } from 'antd-mobile';
+import React, { useEffect, useRef, useState } from 'react';
+var id = 'pdflink';
+var PdfLink = function (props) {
+  var _a;
+  var pdfh5 = useRef(null);
+  var _b = useState(false),
+    visible = _b[0],
+    setVisible = _b[1];
+  var _c = useState(false),
+    loading = _c[0],
+    setLoading = _c[1];
+  var setHeightTimer = useRef(true);
+  var options = (_a = props.options) !== null && _a !== void 0 ? _a : {};
+  function showPdf() {
+    if (pdfh5.current) {
+      pdfh5.current.destroy();
+    }
+    setLoading(true);
+    import('pdfh5').then(function (Pdfh5) {
+      pdfh5.current = new Pdfh5.default("#".concat(id), __assign({
+        pdfurl: props.url,
+        pageNum: false,
+        zoomEnable: false,
+        maxZoom: 1.3
+      }, options));
+      pdfh5.current.on('complete', function () {
+        pdfh5.current.zoomEnable(true); // 允许缩放
+        setLoading(false);
+      });
+      pdfh5.current.on('zoom', function () {
+        if (setHeightTimer.current) {
+          clearTimeout(setHeightTimer.current);
+          setHeightTimer.current = setTimeout(function () {}, 16);
+        }
+      });
+    });
+  }
+  useEffect(function () {
+    if (visible) {
+      showPdf();
+    }
+    return function () {
+      if (pdfh5.current) {
+        pdfh5.current.destroy();
+      }
+    };
+  }, [visible]);
+  return React.createElement(React.Fragment, null, React.createElement("a", {
+    onClick: function () {
+      return setVisible(true);
+    },
+    className: "ebscn-pdf-link"
+  }, props.children), React.createElement(Popup, {
+    visible: visible,
+    position: "bottom",
+    onMaskClick: function () {
+      return setVisible(false);
+    },
+    bodyStyle: {
+      height: '90vh'
+    }
+  }, React.createElement("div", null, React.createElement(Button, {
+    style: {
+      fontSize: '14px'
+    },
+    size: "mini",
+    color: "#333",
+    fill: "outline",
+    onClick: function () {
+      return setVisible(false);
+    },
+    disabled: loading
+  }, '<')), React.createElement("div", null, React.createElement("div", {
+    style: {
+      visibility: loading ? 'visible' : 'hidden'
+    }
+  }, "Loading...."), visible && React.createElement("div", {
+    className: "ebscn-pdf-link-popup",
+    id: id
+  }))));
+};
+export default PdfLink;

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;

package/es/components/protocol/protocol.js

@@ -0,0 +1,112 @@
+import { Checkbox, Button } from '@ebscn/ui';
+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/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 | null;
+    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
+});

package/es/components/radio/radio.css

@@ -0,0 +1,92 @@
+.ebscn-radio {
+  --icon-size: 24px;
+  --font-size: var(--ebscn-font-size-8);
+  --gap: 12px;
+  display: inline-flex;
+  vertical-align: text-bottom;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+}
+.ebscn-radio input[type='radio'] {
+  display: none;
+}
+.ebscn-radio.ebscn-radio-small {
+  --icon-size: 16px;
+  --font-size: var(--ebscn-font-size-4);
+  --gap: 9px;
+}
+.ebscn-radio .ebscn-radio-icon {
+  flex: none;
+  border-radius: var(--icon-size);
+  border: 1px solid var(--ebscn-color-light);
+  box-sizing: border-box;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: var(--ebscn-color-text-light-solid);
+}
+.ebscn-radio .ebscn-radio-icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.ebscn-radio div.ebscn-radio-icon.ebscn-radio-only-icon {
+  color: var(--ebscn-color-primary);
+  background-color: var(--ebscn-color-background);
+}
+.ebscn-radio.ebscn-radio-block {
+  display: flex;
+}
+.ebscn-radio.ebscn-radio-checked .ebscn-radio-icon {
+  border-color: var(--ebscn-color-primary);
+  background-color: var(--ebscn-color-primary);
+}
+.ebscn-radio.ebscn-radio-disabled {
+  cursor: not-allowed;
+}
+.ebscn-radio.ebscn-radio-disabled .ebscn-radio-content {
+  opacity: 0.4;
+}
+.ebscn-radio.ebscn-radio-disabled .ebscn-radio-icon {
+  background-color: #e4e4e4;
+  border-color: #d9d9d9;
+  opacity: 0.4;
+}
+.ebscn-radio.ebscn-radio-disabled.ebscn-radio-checked .ebscn-radio-icon {
+  background-color: var(--ebscn-color-primary);
+}
+.ebscn-radio .ebscn-radio-custom-icon {
+  font-size: var(--icon-size);
+}
+.ebscn-radio.ebscn-radio-indeterminate .ebscn-radio-icon {
+  background-color: var(--ebscn-color-background);
+  color: var(--ebscn-color-primary);
+}
+.ebscn-radio-content {
+  flex: 0 1 auto;
+  font-size: var(--font-size);
+  padding-left: var(--gap);
+}
+.ebscn-radio .ebscn-radio-icon-right-input {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+}
+.ebscn-radio .ebscn-radio-icon-right-input .ebscn-radio-content {
+  padding-left: 0;
+  height: 100%;
+}
+.ebscn-radio .ebscn-radio-icon-right-input .ebscn-radio-icon.ebscn-radio-only-icon {
+  margin-right: 16px;
+  height: 100%;
+  border-color: transparent;
+}
+.ebscn-radio .ebscn-radio-icon-right-input .ebscn-radio-icon.ebscn-radio-only-icon svg {
+  vertical-align: middle;
+}
+.ebscn-radio-icon-right {
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,19 @@
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type RadioValue = string | number;
+export type RadioProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    value?: RadioValue;
+    block?: boolean;
+    id?: string;
+    icon?: (checked: boolean) => ReactNode;
+    children?: ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    size?: 'normal' | 'small';
+    iconRight?: boolean;
+} & NativeProps<'--icon-size' | '--font-size' | '--gap'>;
+export declare const Radio: FC<RadioProps>;

package/es/components/radio/radio.js

@@ -0,0 +1,82 @@
+import { CheckIcon, CheckOnlyIcon, UncheckIcon } from '@ebscn/ui';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import { devWarning } from '../../utils/dev-log';
+import { isDev } from '../../utils/is-dev';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { mergeProps } from '../../utils/with-default-props';
+import { NativeInput } from '../checkbox/native-input';
+import { RadioGroupContext } from './group-context';
+var classPrefix = "ebscn-radio";
+var defaultProps = {
+  defaultChecked: false,
+  size: 'normal',
+  iconRight: false
+};
+export var Radio = function (p) {
+  var _a;
+  var props = mergeProps(defaultProps, p);
+  var groupContext = useContext(RadioGroupContext);
+  var _b = usePropsValue({
+      value: props.checked,
+      defaultValue: props.defaultChecked,
+      onChange: props.onChange
+    }),
+    checked = _b[0],
+    setChecked = _b[1];
+  var disabled = props.disabled;
+  var value = props.value;
+  if (groupContext && value !== undefined) {
+    if (isDev) {
+      if (p.checked !== undefined) {
+        devWarning('Radio', 'When used within `Radio.Group`, the `checked` prop of `Radio` will not work.');
+      }
+      if (p.defaultChecked !== undefined) {
+        devWarning('Radio', 'When used within `Radio.Group`, the `defaultChecked` prop of `Radio` will not work.');
+      }
+    }
+    checked = groupContext.value.includes(value);
+    setChecked = function (innerChecked) {
+      var _a;
+      if (innerChecked) {
+        groupContext.check(value);
+      } else {
+        groupContext.uncheck(value);
+      }
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, innerChecked);
+    };
+    disabled = disabled || groupContext.disabled;
+  }
+  var renderIcon = function () {
+    if (props.icon) {
+      return React.createElement("div", {
+        className: "".concat(classPrefix, "-custom-icon")
+      }, props.icon(checked));
+    }
+    if (props.iconRight) {
+      return checked && React.createElement("div", {
+        className: "".concat(classPrefix, "-icon ").concat(classPrefix, "-only-icon")
+      }, React.createElement(CheckOnlyIcon, null));
+    }
+    return React.createElement("div", {
+      className: "".concat(classPrefix, "-icon")
+    }, checked ? React.createElement(CheckIcon, null) : React.createElement(UncheckIcon, null));
+  };
+  return withNativeProps(props, React.createElement("label", {
+    onClick: props.onClick,
+    className: classNames(classPrefix, (_a = {}, _a["".concat(classPrefix, "-checked")] = checked, _a["".concat(classPrefix, "-disabled")] = disabled, _a["".concat(classPrefix, "-block")] = props.block, _a["".concat(classPrefix, "-small")] = props.size === 'small', _a["".concat(classPrefix, "-icon-right")] = props.iconRight, _a))
+  }, React.createElement(NativeInput, {
+    type: "radio",
+    checked: checked,
+    onChange: setChecked,
+    disabled: disabled,
+    id: props.id
+  }), props.iconRight ? React.createElement("div", {
+    className: "".concat(classPrefix, "-icon-right-input")
+  }, props.children && React.createElement("div", {
+    className: "".concat(classPrefix, "-content")
+  }, props.children), renderIcon()) : React.createElement(React.Fragment, null, renderIcon(), props.children && React.createElement("div", {
+    className: "".concat(classPrefix, "-content")
+  }, props.children))));
+};

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

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

package/es/components/search/index.js

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

package/es/components/search/search.css

@@ -0,0 +1,53 @@
+.ebscn-search {
+  display: flex;
+}
+.ebscn-search .ebscn-search-box {
+  box-sizing: border-box;
+  height: 32px;
+  line-height: 20px;
+  padding: 6px 8px;
+  font-size: 14px;
+  background-color: #F8F9FC;
+  flex: 1;
+  border-radius: 16px;
+}
+.ebscn-search .ebscn-search-box .ebscn-search-search-icon {
+  vertical-align: middle;
+  margin-right: 6px;
+  color: var(--ebscn-color-weak);
+  cursor: pointer;
+}
+.ebscn-search .ebscn-search-box .ebscn-search-clear-icon {
+  vertical-align: middle;
+  color: var(--ebscn-color-light);
+  cursor: pointer;
+}
+.ebscn-search .ebscn-search-box .ebscn-search-input {
+  border: none;
+  background: transparent;
+  outline: none;
+  color: var(--ebscn-color-text);
+  width: calc(100% - 40px);
+}
+.ebscn-search .ebscn-search-box .ebscn-search-input::-webkit-input-placeholder {
+  color: var(--ebscn-color-weak);
+}
+.ebscn-search .ebscn-search-box .ebscn-search-input::placeholder {
+  color: var(--ebscn-color-weak);
+}
+.ebscn-search .ebscn-search-text {
+  width: 54px;
+  text-align: center;
+  line-height: 32px;
+  cursor: pointer;
+}
+.ebscn-search .ebscn-search-two-icon {
+  width: 100px;
+  display: flex;
+  justify-content: space-around;
+}
+.ebscn-search .ebscn-search-two-icon .ebscn-search-two-icon-item svg {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+}

package/es/components/search/search.d.ts

@@ -0,0 +1,15 @@
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export type Props = Pick<NativeInputProps, 'autoFocus' | 'onKeyDown' | 'id' | 'placeholder' | 'disabled'> & {
+    value?: string;
+    defaultValue?: string;
+    onSearch: (val: string) => void;
+    onClear?: () => void;
+    searchLayout?: 'normal' | 'text' | 'twoIcon';
+    children?: string | ReactNode[] | ReactNode;
+    debounce?: number;
+} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--text-align'>;
+declare const Search: FC<Props>;
+export default Search;