@ebscn/ui 1.0.3-beta.2 → 1.0.3-beta.20

package/es/components/switch/switch.css

@@ -44,7 +44,7 @@
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
   box-sizing: border-box;
-  background: #E9E9EA;
+  background: #d8d8d8;
   z-index: 1;
   transition: all 200ms;
   transform: scale(1);
@@ -62,7 +62,6 @@
   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 {
@@ -95,7 +94,7 @@
   opacity: 0.4;
 }
 .ebscn-switch.ebscn-switch-disabled:before {
-  background-color: #f4f4f4;
+  background-color: #e9e9ea;
 }
 .ebscn-switch-spin-icon {
   width: 14px;

package/es/components/tabs/tabs.css

@@ -10,9 +10,9 @@
 }
 .ebscn-tabs-header {
   position: relative;
-  border-bottom: solid 1px var(--ebscn-color-border);
 }
 .ebscn-tabs-tab-list {
+  padding: 0 6px;
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
@@ -25,7 +25,7 @@
   display: none;
 }
 .ebscn-tabs-tab-wrapper {
-  padding: 0 12px;
+  padding: 0 10px;
 }
 .ebscn-tabs-tab-wrapper-stretch {
   flex: auto;
@@ -36,11 +36,13 @@
   width: -webkit-min-content;
   width: min-content;
   margin: 0 auto;
-  font-size: var(--title-font-size);
+  font-size: 16px;
   position: relative;
   cursor: pointer;
+  color: var(--ebscn-color-text-secondary);
 }
 .ebscn-tabs-tab-active {
+  font-weight: 500;
   color: var(--active-title-color);
 }
 .ebscn-tabs-tab-disabled {

package/es/components/tabs/tabs.js

@@ -17,7 +17,7 @@ export var Tab = function () {
 };
 var defaultProps = {
   activeMode: 'underline',
-  activeLineMode: 'auto',
+  activeLineMode: 'fixed',
   stretch: true,
   direction: 'ltr'
 };
@@ -122,13 +122,13 @@ export var Tabs = function (p) {
     var x = 0;
     var width = 0;
     if (props.activeLineMode === 'auto') {
-      x = activeTabLeft;
+      x = activeTabLeft - 6;
       width = activeTabWidth;
     } else if (props.activeLineMode === 'full') {
-      x = activeTabWrapperLeft;
+      x = activeTabWrapperLeft - 6;
       width = activeTabWrapperWidth;
     } else {
-      x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+      x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2 - 6;
     }
     if (isRTL) {
       /**
@@ -242,7 +242,7 @@ export var Tabs = function (p) {
     ref: activeLineRef,
     className: "".concat(classPrefix, "-tab-line"),
     style: {
-      width: props.activeLineMode === 'fixed' ? 'var(--fixed-active-line-width, 30px)' : width,
+      width: props.activeLineMode === 'fixed' ? 'var(--fixed-active-line-width, 14px)' : width,
       x: x
     }
   }), panes.map(function (pane) {

package/es/components/tabs/tabs.patch.css

@@ -3,6 +3,7 @@
 }
 .ebscn-tabs-tab {
   font-size: 17px;
+  color: #666;
 }
 .ebscn-tabs-tab-active {
   color: #1677ff;

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

@@ -0,0 +1,9 @@
+import './toast.less';
+import { clear, show, config } from './methods';
+export type { ToastShowProps, ToastHandler } from './methods';
+declare const Toast: {
+    show: typeof show;
+    clear: typeof clear;
+    config: typeof config;
+};
+export default Toast;

package/es/components/toast/index.js

@@ -0,0 +1,8 @@
+import "./toast.css";
+import { clear, show, config } from './methods';
+var Toast = {
+  show: show,
+  clear: clear,
+  config: config
+};
+export default Toast;

package/es/components/toast/methods.d.ts

@@ -0,0 +1,8 @@
+import { ToastProps } from './toast';
+export type ToastShowProps = Omit<ToastProps, 'visible'>;
+export type ToastHandler = {
+    close: () => void;
+};
+export declare function show(p: ToastShowProps | string): ToastHandler;
+export declare function clear(): void;
+export declare function config(val: Pick<ToastProps, 'duration' | 'position' | 'maskClickable'>): void;

package/es/components/toast/methods.js

@@ -0,0 +1,63 @@
+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 React from 'react';
+import { InternalToast } from './toast';
+import { mergeProps } from '../../utils/with-default-props';
+import { renderImperatively } from '../../utils/render-imperatively';
+var currentHandler = null;
+var currentTimeout = null;
+var defaultProps = {
+  duration: 2000,
+  position: 'center',
+  maskClickable: true
+};
+var ToastInner = function (props) {
+  return React.createElement(InternalToast, __assign({}, props));
+};
+export function show(p) {
+  var props = mergeProps(defaultProps, typeof p === 'string' ? {
+    content: p
+  } : p);
+  var element = React.createElement(ToastInner, __assign({}, props, {
+    onClose: function () {
+      currentHandler = null;
+    }
+  }));
+  if (currentHandler) {
+    currentHandler.replace(element);
+  } else {
+    currentHandler = renderImperatively(element);
+  }
+  if (currentTimeout) {
+    window.clearTimeout(currentTimeout);
+  }
+  if (props.duration !== 0) {
+    currentTimeout = window.setTimeout(function () {
+      clear();
+    }, props.duration);
+  }
+  return currentHandler;
+}
+export function clear() {
+  currentHandler === null || currentHandler === void 0 ? void 0 : currentHandler.close();
+  currentHandler = null;
+}
+export function config(val) {
+  if (val.duration !== undefined) {
+    defaultProps.duration = val.duration;
+  }
+  if (val.position !== undefined) {
+    defaultProps.position = val.position;
+  }
+  if (val.maskClickable !== undefined) {
+    defaultProps.maskClickable = val.maskClickable;
+  }
+}

package/es/components/toast/toast.css

@@ -0,0 +1,45 @@
+.ebscn-toast-mask .ebscn-toast-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+.ebscn-toast-mask .ebscn-toast-main {
+  display: inline-block;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  width: auto;
+  max-width: 204px;
+  max-height: 70%;
+  overflow: auto;
+  color: white;
+  word-break: break-all;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 8px;
+  pointer-events: all;
+  font-size: var(--ebscn-font-size-7);
+  line-height: 1.5;
+  box-sizing: border-box;
+  text-align: initial;
+}
+.ebscn-toast-mask .ebscn-toast-main-text {
+  padding: 12px;
+  min-width: 0px;
+}
+.ebscn-toast-mask .ebscn-toast-main-icon {
+  padding: 35px 12px;
+  min-width: 150px;
+}
+.ebscn-toast-mask .ebscn-toast-main-icon .ebscn-toast-icon {
+  text-align: center;
+  margin-bottom: 8px;
+  font-size: 36px;
+  line-height: 1;
+}
+.ebscn-toast-loading {
+  --size: 48px;
+  margin: 0 auto 8px;
+}

package/es/components/toast/toast.d.ts

@@ -0,0 +1,18 @@
+import type { FC, ReactNode } from 'react';
+import type { MaskProps } from '../mask';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
+import { GetContainer } from '../../utils/render-to-container';
+export interface ToastProps {
+    afterClose?: () => void;
+    maskStyle?: MaskProps['style'];
+    maskClassName?: string;
+    maskClickable?: boolean;
+    content?: ReactNode;
+    icon?: 'success' | 'fail' | ReactNode;
+    duration?: number;
+    position?: 'top' | 'bottom' | 'center';
+    visible?: boolean;
+    getContainer?: GetContainer;
+    stopPropagation?: PropagationEvent[];
+}
+export declare const InternalToast: FC<ToastProps>;

package/es/components/toast/toast.js

@@ -0,0 +1,75 @@
+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 React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { CloseIcon as CloseOutline, CheckOnlyIcon as CheckOutline } from '../icons';
+import Mask from '../mask';
+import { mergeProps } from '../../utils/with-default-props';
+import AutoCenter from '../auto-center';
+var classPrefix = "ebscn-toast";
+var defaultProps = {
+  maskClickable: true,
+  stopPropagation: ['click']
+};
+export var InternalToast = function (p) {
+  var props = mergeProps(defaultProps, p);
+  var maskClickable = props.maskClickable,
+    content = props.content,
+    icon = props.icon,
+    position = props.position;
+  var iconElement = useMemo(function () {
+    if (icon === null || icon === undefined) return null;
+    switch (icon) {
+      case 'success':
+        return React.createElement(CheckOutline, {
+          className: "".concat(classPrefix, "-icon-success")
+        });
+      case 'fail':
+        return React.createElement(CloseOutline, {
+          className: "".concat(classPrefix, "-icon-fail")
+        });
+      default:
+        return icon;
+    }
+  }, [icon]);
+  var top = useMemo(function () {
+    switch (position) {
+      case 'top':
+        return '20%';
+      case 'bottom':
+        return '80%';
+      default:
+        return '50%';
+    }
+  }, [position]);
+  return React.createElement(Mask, {
+    visible: props.visible,
+    destroyOnClose: true,
+    opacity: 0,
+    disableBodyScroll: !maskClickable,
+    getContainer: props.getContainer,
+    afterClose: props.afterClose,
+    style: __assign({
+      pointerEvents: maskClickable ? 'none' : 'auto'
+    }, props.maskStyle),
+    className: classNames("".concat(classPrefix, "-mask"), props.maskClassName),
+    stopPropagation: props.stopPropagation
+  }, React.createElement("div", {
+    className: classNames("".concat(classPrefix, "-wrap"))
+  }, React.createElement("div", {
+    style: {
+      top: top
+    },
+    className: classNames("".concat(classPrefix, "-main"), icon ? "".concat(classPrefix, "-main-icon") : "".concat(classPrefix, "-main-text"))
+  }, iconElement && React.createElement("div", {
+    className: "".concat(classPrefix, "-icon")
+  }, iconElement), React.createElement(AutoCenter, null, content))));
+};

package/es/components/toast/toast.patch.css

@@ -0,0 +1,11 @@
+.ebscn-toast-mask .ebscn-toast-main {
+  font-size: 15px;
+}
+.ebscn-toast-loading.ebscn-toast-loading {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 8px;
+}
+.ebscn-toast-loading.ebscn-toast-loading .ebscn-spin-loading-fill {
+  stroke: #ffffff;
+}

package/es/global/global.css

@@ -21,7 +21,7 @@
   --ebscn-color-warning: #ff8f1f;
   --ebscn-color-danger: #ff3141;
   --ebscn-color-yellow: #ff9f18;
-  --ebscn-color-wathet: #FDECE9;
+  --ebscn-color-wathet: #fef4f2;
   --ebscn-color-text: #333333;
   --ebscn-color-text-secondary: #666666;
   --ebscn-color-weak: #999999;
@@ -30,7 +30,7 @@
   --ebscn-color-background: #ffffff;
   --ebscn-color-highlight: var(--ebscn-color-danger);
   --ebscn-color-white: #ffffff;
-  --ebscn-color-box: #f5f5f5;
+  --ebscn-color-box: #f8f9fc;
   --ebscn-color-text-light-solid: var(--ebscn-color-white);
   --ebscn-color-text-dark-solid: #000000;
   --ebscn-color-fill-content: var(--ebscn-color-box);
@@ -45,24 +45,39 @@
   --ebscn-color-golden: #b47816;
   --ebscn-color-grey: rgba(0, 0, 0, 0.7);
   --ebscn-color-split-line: #EBEBEB;
+  --ebscn-color-keyboard-bg: #d3d5d8;
+  --ebscn-color-keyboard-key-bg: #fff;
+  --ebscn-color-keyboard-fckey-bg: #adb3bd;
+  --ebscn-color-keyboard-key-bg-active: #e5e5e5;
+  --ebscn-color-keyboard-fckey-bg-active: #9ba1aa;
+  --ebscn-color-keyboard-fckey-border: #888;
+  --ebscn-color-keyboard-key-border: #888;
 }
 html[data-prefers-color-scheme='dark'] {
-  --ebscn-color-primary: #3086ff;
+  --ebscn-color-blue: #4c7cf1;
   --ebscn-color-success: #34b368;
   --ebscn-color-warning: #ffa930;
   --ebscn-color-danger: #ff4a58;
   --ebscn-color-yellow: #ffa930;
   --ebscn-color-orange: #e65a2b;
   --ebscn-color-wathet: #0d2543;
-  --ebscn-color-text: #e6e6e6;
+  --ebscn-color-text: #ebebeb;
   --ebscn-color-text-secondary: #b3b3b3;
-  --ebscn-color-weak: #808080;
+  --ebscn-color-weak: #7a7a7a;
   --ebscn-color-light: #4d4d4d;
   --ebscn-color-border: #2b2b2b;
   --ebscn-color-box: #0a0a0a;
   --ebscn-color-background: #1a1a1a;
   --ebscn-color-background-body: var(--ebscn-color-background);
   --ebscn-border-color: var(--ebscn-color-border);
+  --ebscn-color-split-line: #2B2B2B;
+  --ebscn-color-keyboard-bg: #1a1a1a;
+  --ebscn-color-keyboard-key-bg: #474747;
+  --ebscn-color-keyboard-fckey-bg: #292929;
+  --ebscn-color-keyboard-key-bg-active: #323232;
+  --ebscn-color-keyboard-fckey-bg-active: #252525;
+  --ebscn-color-keyboard-fckey-border: #111;
+  --ebscn-color-keyboard-key-border: #333;
 }
 :root {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

package/es/global/theme-dark.css

@@ -1,18 +1,26 @@
 html[data-prefers-color-scheme='dark'] {
-  --ebscn-color-primary: #3086ff;
+  --ebscn-color-blue: #4c7cf1;
   --ebscn-color-success: #34b368;
   --ebscn-color-warning: #ffa930;
   --ebscn-color-danger: #ff4a58;
   --ebscn-color-yellow: #ffa930;
   --ebscn-color-orange: #e65a2b;
   --ebscn-color-wathet: #0d2543;
-  --ebscn-color-text: #e6e6e6;
+  --ebscn-color-text: #ebebeb;
   --ebscn-color-text-secondary: #b3b3b3;
-  --ebscn-color-weak: #808080;
+  --ebscn-color-weak: #7a7a7a;
   --ebscn-color-light: #4d4d4d;
   --ebscn-color-border: #2b2b2b;
   --ebscn-color-box: #0a0a0a;
   --ebscn-color-background: #1a1a1a;
   --ebscn-color-background-body: var(--ebscn-color-background);
   --ebscn-border-color: var(--ebscn-color-border);
+  --ebscn-color-split-line: #2B2B2B;
+  --ebscn-color-keyboard-bg: #1a1a1a;
+  --ebscn-color-keyboard-key-bg: #474747;
+  --ebscn-color-keyboard-fckey-bg: #292929;
+  --ebscn-color-keyboard-key-bg-active: #323232;
+  --ebscn-color-keyboard-fckey-bg-active: #252525;
+  --ebscn-color-keyboard-fckey-border: #111;
+  --ebscn-color-keyboard-key-border: #333;
 }

package/es/global/theme-default.css

@@ -21,7 +21,7 @@
   --ebscn-color-warning: #ff8f1f;
   --ebscn-color-danger: #ff3141;
   --ebscn-color-yellow: #ff9f18;
-  --ebscn-color-wathet: #FDECE9;
+  --ebscn-color-wathet: #fef4f2;
   --ebscn-color-text: #333333;
   --ebscn-color-text-secondary: #666666;
   --ebscn-color-weak: #999999;
@@ -30,7 +30,7 @@
   --ebscn-color-background: #ffffff;
   --ebscn-color-highlight: var(--ebscn-color-danger);
   --ebscn-color-white: #ffffff;
-  --ebscn-color-box: #f5f5f5;
+  --ebscn-color-box: #f8f9fc;
   --ebscn-color-text-light-solid: var(--ebscn-color-white);
   --ebscn-color-text-dark-solid: #000000;
   --ebscn-color-fill-content: var(--ebscn-color-box);
@@ -45,4 +45,11 @@
   --ebscn-color-golden: #b47816;
   --ebscn-color-grey: rgba(0, 0, 0, 0.7);
   --ebscn-color-split-line: #EBEBEB;
+  --ebscn-color-keyboard-bg: #d3d5d8;
+  --ebscn-color-keyboard-key-bg: #fff;
+  --ebscn-color-keyboard-fckey-bg: #adb3bd;
+  --ebscn-color-keyboard-key-bg-active: #e5e5e5;
+  --ebscn-color-keyboard-fckey-bg-active: #9ba1aa;
+  --ebscn-color-keyboard-fckey-border: #888;
+  --ebscn-color-keyboard-key-border: #888;
 }

package/es/index.d.ts

@@ -20,6 +20,7 @@ export { default as PickerView } from './components/picker-view';
 export { default as Popup } from './components/popup';
 export { default as ProSelector } from './components/pro-selector';
 export { default as Protocal } from './components/protocol';
+export { default as Popover } from './components/popover';
 export { default as PullToRefresh } from './components/pull-to-refresh';
 export { default as Radio } from './components/radio';
 export { default as SafeArea } from './components/safe-area';
@@ -35,8 +36,7 @@ export { default as Switch } from './components/switch';
 export { default as Tabs } from './components/tabs';
 export { default as Tip } from './components/tip';
 export { default as ToastLoading } from './components/toastLoading';
-export { default as PayInput } from './components/pay-input';
-export { default as MoneyInput } from './components/money-input';
-export { default as FeneInput } from './components/fene-input';
 export { default as Input } from './components/input';
-export { default as CommonInput } from './components/common-input';
+export { default as InfiniteScroll } from './components/infinite-scroll';
+export { default as List } from './components/list';
+export { default as Toast } from './components/toast';

package/es/index.js

@@ -22,6 +22,7 @@ export { default as PickerView } from './components/picker-view';
 export { default as Popup } from './components/popup';
 export { default as ProSelector } from './components/pro-selector';
 export { default as Protocal } from './components/protocol';
+export { default as Popover } from './components/popover';
 export { default as PullToRefresh } from './components/pull-to-refresh';
 export { default as Radio } from './components/radio';
 export { default as SafeArea } from './components/safe-area';
@@ -37,8 +38,11 @@ export { default as Switch } from './components/switch';
 export { default as Tabs } from './components/tabs';
 export { default as Tip } from './components/tip';
 export { default as ToastLoading } from './components/toastLoading';
-export { default as PayInput } from './components/pay-input';
-export { default as MoneyInput } from './components/money-input';
-export { default as FeneInput } from './components/fene-input';
 export { default as Input } from './components/input';
-export { default as CommonInput } from './components/common-input';
+export { default as InfiniteScroll } from './components/infinite-scroll';
+export { default as List } from './components/list';
+export { default as Toast } from './components/toast';
+// export { default as PayInput} from './components/pay-input';
+// export { default as MoneyInput } from './components/money-input';
+// export { default as FeneInput } from './components/fene-input';
+// export { default as CommonInput } from './components/common-input';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebscn/ui",
-  "version": "1.0.3-beta.2",
+  "version": "1.0.3-beta.20",
   "description": "ebscn react library",
   "module": "./es/index.js",
   "types": "./es/index.d.ts",
@@ -39,7 +39,6 @@
     "@react-spring/web": "^9.7.3",
     "@use-gesture/react": "^10.3.0",
     "ahooks": "^3.7.10",
-    "antd-mobile": "^5.34.0",
     "lodash": "^4.17.21",
     "lorem-ipsum": "^2.0.8",
     "pdfh5": "^1.4.2",
@@ -47,13 +46,5 @@
     "react-is": "^18.2.0",
     "react-photo-view": "^1.2.4",
     "use-sync-external-store": "^1.2.0"
-  },
-  "sideEffects": [
-    "**/*.css",
-    "**/*.less",
-    "./es/index.js",
-    "./src/index.ts",
-    "./es/global/index.js",
-    "./src/global/index.ts"
-  ]
+  }
 }