@ebscn/ui 0.0.10 → 1.0.0

package/es/components/alphabet-keyboard/alphabet-keyboard.css

@@ -0,0 +1,143 @@
+.ebscn-alphabet-keyboard {
+  position: fixed;
+  bottom: 0;
+  transform: translateY(101%);
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  transition: all 0.5s;
+  align-content: flex-start;
+  background: #d2d5db;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline,
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline,
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline,
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-top: 3.2%;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline-key,
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline-key,
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-key,
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 8.4%;
+  height: 42px;
+  background: var(--ebscn-color-white);
+  border-radius: 5px;
+  box-shadow: 0px 0.5px 0px 0px #888888;
+  font-size: 23px;
+  font-weight: 400;
+  text-align: center;
+  color: var(--ebscn-color-text);
+  margin-right: 1.6%;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline-key:active,
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline-key:active,
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-key:active,
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-key:active {
+  background: var(--ebscn-color-border);
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline {
+  padding-left: 0.8%;
+  padding-right: 0.8%;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline {
+  padding-left: 5.73%;
+  padding-right: 5.73%;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline {
+  padding-left: 0.8%;
+  padding-right: 0.8%;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-capital {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 11.2%;
+  height: 42px;
+  background: #adb3bd;
+  border-radius: 5px;
+  box-shadow: 0px 0.5px 0px 0px #888888;
+  margin-right: 3.73%;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-capital:active {
+  background: #CACBD0;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-delete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 11.2%;
+  height: 42px;
+  border-radius: 5px;
+  box-shadow: 0px 0.5px 0px 0px #888888;
+  margin-left: 2.26%;
+  background: url(./images/delete.png) #adb3bd no-repeat center;
+  background-size: 24px 24px;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-delete:active {
+  background: #CACBD0;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline {
+  padding-left: 0.8%;
+  padding-right: 0.8%;
+  padding-bottom: 1.06%;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-function {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 11.2%;
+  height: 42px;
+  background: #adb3bd;
+  border-radius: 5px;
+  box-shadow: 0px 0.5px 0px 0px #888888;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-function:active {
+  background: #CACBD0;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-space {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48.4%;
+  height: 42px;
+  background: var(--ebscn-color-white);
+  border-radius: 5px;
+  box-shadow: 0px 0.5px 0px 0px #888888;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-space:active {
+  background: var(--ebscn-color-border);
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-confirm {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 23.46%;
+  height: 42px;
+  background: var(--ebscn-color-primary);
+  border-radius: 5px;
+  box-shadow: 0px 0.5px 0px 0px #888888;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: center;
+  color: var(--ebscn-color-white);
+  line-height: 22.5px;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-confirm:active {
+  background-color: #D03B21;
+}
+.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline img {
+  height: 20%;
+}
+@supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
+  .keyboard {
+    height: calc(216px + env(safe-area-inset-bottom));
+    height: calc(216px + constant(safe-area-inset-bottom));
+  }
+}

package/es/components/alphabet-keyboard/alphabet-keyboard.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { NativeProps } from '../../utils/native-props';
+export type AlphabetKeyboardProps = {
+    visible?: boolean;
+    onInput: Function;
+    onDelete: Function;
+    onClose: Function;
+    onChangeKeyBoard: Function;
+    onConfirm: Function;
+} & NativeProps;
+export declare function AlphabetKeyboard(p: AlphabetKeyboardProps): JSX.Element;

package/es/components/alphabet-keyboard/alphabet-keyboard.js

@@ -0,0 +1,132 @@
+import { useEffect, useRef, useState } from "react";
+import React from "react";
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = 'ebscn-alphabet-keyboard';
+var defaultProps = {
+  visible: false
+};
+export function AlphabetKeyboard(p) {
+  var keyboardRef = useRef(null);
+  var props = mergeProps(defaultProps, p);
+  var visible = props.visible,
+    onInput = props.onInput,
+    onDelete = props.onDelete,
+    onClose = props.onClose,
+    onChangeKeyBoard = props.onChangeKeyBoard,
+    onConfirm = props.onConfirm;
+  var firstKeys = ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'];
+  var firstKeysBig = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'];
+  var secondKeys = ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'];
+  var secondKeysBig = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];
+  var thirdKeys = ['↑', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '×'];
+  var thirdKeysBig = ['↑', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '×'];
+  var firthKeys = ['123', '⌨', '空格', '确定'];
+  var _a = useState(false),
+    isBig = _a[0],
+    setIsBIG = _a[1];
+  var appearTimer = useRef(null);
+  var hideTimer = useRef(null);
+  var lastVisible = useRef(null);
+  var keyFlag = useRef(0);
+  useEffect(function () {
+    if (!visible) {
+      if (lastVisible.current) {
+        // 键盘已实例化，调用隐藏即可
+        hideKeyBoard();
+      }
+      // 未实例化，为初始化，不需处理
+    } else {
+      showKeyBoard();
+      lastVisible.current = visible; // 记录当前键盘状态
+    }
+  }, [visible]);
+  function hideKeyBoard() {
+    keyboardRef.current.style.transform = 'translateY(100%)';
+    if (appearTimer.current) clearTimeout(appearTimer.current);
+    if (!hideTimer.current) {
+      hideTimer.current = setTimeout(function () {
+        keyboardRef.current.style.display = 'none';
+      }, 500);
+    }
+  }
+  function showKeyBoard() {
+    keyboardRef.current.style.display = '';
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    appearTimer.current = setTimeout(function () {
+      keyboardRef.current.style.transform = 'translateY(0)';
+    }, 20);
+  }
+  function onKeyPress(key) {
+    switch (key) {
+      case 'X':
+        return onDelete === null || onDelete === void 0 ? void 0 : onDelete();
+      case '123':
+        return onChangeKeyBoard === null || onChangeKeyBoard === void 0 ? void 0 : onChangeKeyBoard();
+      case '⌨':
+        return onClose === null || onClose === void 0 ? void 0 : onClose();
+      case '确定':
+        return onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+      case '空格':
+        return onInput === null || onInput === void 0 ? void 0 : onInput(' ');
+      default:
+        return onInput === null || onInput === void 0 ? void 0 : onInput(key);
+    }
+  }
+  return withNativeProps(props, React.createElement("div", {
+    ref: keyboardRef,
+    className: "".concat(classPrefix)
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-firstline")
+  }, (isBig == false ? firstKeys : firstKeysBig).map(function (item, index) {
+    return React.createElement("div", {
+      key: item || index,
+      className: "".concat(classPrefix, "-firstline-key"),
+      onClick: function () {
+        if (visible) {
+          onKeyPress(item);
+        }
+      }
+    }, item);
+  })), React.createElement("div", {
+    className: "".concat(classPrefix, "-secondline")
+  }, (isBig == false ? secondKeys : secondKeysBig).map(function (item, index) {
+    return React.createElement("div", {
+      key: item || index,
+      className: "".concat(classPrefix, "-secondline-key"),
+      onClick: function () {
+        if (visible) {
+          onKeyPress(item);
+        }
+      }
+    }, item);
+  })), React.createElement("div", {
+    className: "".concat(classPrefix, "-thirdline")
+  }, (isBig == false ? thirdKeys : thirdKeysBig).map(function (item, index) {
+    return React.createElement("div", {
+      key: item || index,
+      className: item == '↑' ? "".concat(classPrefix, "-thirdline-capital") : item == '×' ? "".concat(classPrefix, "-thirdline-delete") : "".concat(classPrefix, "-thirdline-key"),
+      onClick: function () {
+        if (visible) {
+          onKeyPress(item);
+        }
+        ;
+        if (item == '↑') {
+          isBig == false ? setIsBIG(true) : setIsBIG(false);
+        }
+      }
+    }, item !== '×' ? item : '');
+  })), React.createElement("div", {
+    className: "".concat(classPrefix, "-firthline")
+  }, firthKeys.map(function (item, index) {
+    return React.createElement("div", {
+      key: item || index,
+      className: item == '123' || item == '⌨' ? "".concat(classPrefix, "-firthline-function") : item == '空格' ? "".concat(classPrefix, "-firthline-space") : "".concat(classPrefix, "-firthline-confirm"),
+      onClick: function () {
+        if (visible) {
+          onKeyPress(item);
+        }
+      }
+    }, item);
+  }))));
+}

package/es/components/alphabet-keyboard/index.d.ts

@@ -0,0 +1,4 @@
+import "./alphabet-keyboard.less";
+import { AlphabetKeyboard } from "./alphabet-keyboard";
+export type { AlphabetKeyboardProps } from "./alphabet-keyboard";
+export default AlphabetKeyboard;

package/es/components/alphabet-keyboard/index.js

@@ -0,0 +1,3 @@
+import "./alphabet-keyboard.css";
+import { AlphabetKeyboard } from "./alphabet-keyboard";
+export default AlphabetKeyboard;

package/es/components/button/button.css

@@ -0,0 +1,152 @@
+@keyframes loading-rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+.ebscn-button {
+  --border-width: 1px;
+  --border-radius: 24px;
+  --text-color: var(--ebscn-color-text-light-solid);
+  --background-color: var(--color);
+  --before-background-color: var(--ebscn-color-text-dark-solid);
+  color: var(--text-color);
+  background-color: var(--background-color);
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  height: auto;
+  margin: 0;
+  font-size: var(--ebscn-font-size-9);
+  line-height: 1.4;
+  text-align: center;
+  border: var(--border-width) solid var(--color);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  transition: opacity ease 0.15s;
+  -webkit-user-select: none;
+          user-select: none;
+}
+.ebscn-button:focus {
+  outline: none;
+}
+.ebscn-button::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(calc(var(--border-width) * -1), calc(var(--border-width) * -1));
+  width: 100%;
+  height: 100%;
+  background-color: var(--before-background-color);
+  border: var(--border-width) solid var(--before-background-color);
+  border-radius: var(--border-radius);
+  opacity: 0;
+  content: ' ';
+  box-sizing: content-box;
+}
+.ebscn-button:active::before,
+.ebscn-button-loading::before {
+  opacity: 0.1;
+}
+.ebscn-button-loading-icon {
+  animation: loading-rotate 1s linear infinite;
+}
+.ebscn-button-fill-outline {
+  --background-color: transparent;
+  --border-color: var(--color);
+  --border-width: 1px;
+  --text-color: var(--color);
+  --before-background-color: var(--color);
+}
+.ebscn-button-fill-outline::before {
+  opacity: 0;
+}
+.ebscn-button-fill-outline-loading::before,
+.ebscn-button-fill-outline:active::before {
+  opacity: 0.1;
+}
+.ebscn-button-fill-none {
+  --text-color: var(--ebscn-color-text);
+  --background-color: transparent;
+  --border-width: 0px;
+}
+.ebscn-button-fill-none::before {
+  display: none;
+}
+.ebscn-button-fill-none-loading::before,
+.ebscn-button-fill-none:active::before {
+  display: none;
+}
+.ebscn-button-block {
+  display: block;
+  width: 100%;
+}
+.ebscn-button-disabled {
+  --before-background-color: var(--ebscn-color-text-light-solid);
+  cursor: not-allowed;
+}
+.ebscn-button-fill-solid-disabled .ebscn-button-text {
+  opacity: 0.7;
+}
+.ebscn-button-fill-solid-disabled::before {
+  opacity: 0.5;
+}
+.ebscn-button-fill-outline-disabled .ebscn-button-text {
+  opacity: 0.4;
+}
+.ebscn-button-fill-outline-disabled:active::before,
+.ebscn-button-fill-outline-disabled::before {
+  border: var(--border-width) solid var(--before-background-color);
+  opacity: 0.7;
+}
+.ebscn-button-fill-none-disabled .ebscn-button-text {
+  color: var(--ebscn-color-light);
+}
+.ebscn-button-333 {
+  border-color: #ccc;
+}
+.ebscn-button.ebscn-button-mini {
+  --border-radius: 12px;
+  padding-left: 12px;
+  padding-right: 12px;
+  height: 24px;
+  font-size: var(--ebscn-font-size-4);
+}
+.ebscn-button.ebscn-button-small {
+  --border-radius: 15px;
+  width: 79px;
+  height: 28px;
+  font-size: var(--ebscn-font-size-6);
+}
+.ebscn-button.ebscn-button-halfMiddle {
+  --border-radius: 21px;
+  width: 131.5px;
+  height: 40px;
+  font-size: var(--ebscn-font-size-8);
+}
+.ebscn-button.ebscn-button-middle {
+  --border-radius: 24px;
+  width: 275px;
+  height: 40px;
+  font-size: var(--ebscn-font-size-10);
+}
+.ebscn-button.ebscn-button-large {
+  height: 46px;
+  font-size: var(--ebscn-font-size-10);
+}
+.ebscn-button-loading {
+  vertical-align: sub;
+}
+.ebscn-button-loading-icon-left {
+  margin-left: 4px;
+}
+.ebscn-button-loading-icon-right {
+  margin-right: 4px;
+}
+.ebscn-button-loading-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ebscn-button-loading-wrapper > .ebscn-loading {
+  opacity: 0.6;
+}

package/es/components/button/button.d.ts

@@ -0,0 +1,40 @@
+import type { ButtonHTMLAttributes, CSSProperties, DetailedHTMLProps, ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+type NativeButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+export type ButtonProps = {
+    color?: 'primary' | 'sell' | 'financial' | string;
+    fill?: 'solid' | 'outline' | 'none';
+    size?: 'mini' | 'small' | 'halfMiddle' | 'middle' | 'large';
+    block?: boolean;
+    loading?: boolean | 'auto';
+    loadingText?: string;
+    loadingIcon?: ReactNode;
+    loadingIconPos?: 'left' | 'right';
+    disabled?: boolean;
+    type?: 'submit' | 'button' | 'reset';
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown;
+    children?: ReactNode;
+} & Pick<NativeButtonProps, 'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd' | 'id'> & NativeProps;
+export type ButtonRef = {
+    nativeElement: HTMLButtonElement | null;
+};
+export declare const Button: React.ForwardRefExoticComponent<{
+    color?: string | undefined;
+    fill?: "none" | "solid" | "outline" | undefined;
+    size?: "small" | "large" | "middle" | "mini" | "halfMiddle" | undefined;
+    block?: boolean | undefined;
+    loading?: boolean | "auto" | undefined;
+    loadingText?: string | undefined;
+    loadingIcon?: ReactNode;
+    loadingIconPos?: "left" | "right" | undefined;
+    disabled?: boolean | undefined;
+    type?: "reset" | "submit" | "button" | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown) | undefined;
+    children?: ReactNode;
+} & Pick<NativeButtonProps, "id" | "onMouseDown" | "onMouseUp" | "onTouchStart" | "onTouchEnd"> & {
+    className?: string | undefined;
+    style?: (CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<ButtonRef>>;
+export {};

package/es/components/button/button.js

@@ -0,0 +1,206 @@
+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 { LoadingIcon } from '@ebscn/ui';
+import classNames from 'classnames';
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { isPromise } from '../../utils/validate';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = "ebscn-button";
+var defaultProps = {
+  color: 'primary',
+  fill: 'solid',
+  block: false,
+  loading: false,
+  disabled: false,
+  size: 'middle',
+  loadingIconPos: 'left'
+};
+export var Button = forwardRef(function (p, ref) {
+  var _a;
+  var _b, _c;
+  defaultProps.loadingIcon = React.createElement(LoadingIcon, {
+    className: "".concat(classPrefix, "-loading-icon")
+  });
+  var props = mergeProps(defaultProps, p);
+  var _d = useState(false),
+    innerLoading = _d[0],
+    setInnerLoading = _d[1];
+  var nativeButtonRef = useRef(null);
+  var loading = props.loading === 'auto' ? innerLoading : props.loading;
+  var disabled = props.disabled;
+  useImperativeHandle(ref, function () {
+    return {
+      get nativeElement() {
+        return nativeButtonRef.current;
+      }
+    };
+  });
+  var handleClick = function (e) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var promise, e_1;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!props.onClick) return [2 /*return*/];
+            promise = props.onClick(e);
+            if (!isPromise(promise)) return [3 /*break*/, 4];
+            _a.label = 1;
+          case 1:
+            _a.trys.push([1, 3,, 4]);
+            setInnerLoading(true);
+            return [4 /*yield*/, promise];
+          case 2:
+            _a.sent();
+            setInnerLoading(false);
+            return [3 /*break*/, 4];
+          case 3:
+            e_1 = _a.sent();
+            setInnerLoading(false);
+            throw e_1;
+          case 4:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  var colorRecord = {
+    primary: 'var(--ebscn-color-primary,#e84225)',
+    sell: 'var(--ebscn-color-blue, #4c7cf1)',
+    financial: 'var(--ebscn-color-orange, #ff6800)'
+  };
+  var style = {
+    '--color': (_b = colorRecord[props.color || 'primary']) !== null && _b !== void 0 ? _b : props.color
+  };
+  return withNativeProps(props, React.createElement("button", {
+    style: style,
+    ref: nativeButtonRef,
+    type: props.type,
+    onClick: handleClick,
+    className: classNames(classPrefix, (_a = {}, _a["".concat(classPrefix, "-").concat((_c = props.color) === null || _c === void 0 ? void 0 : _c.replace('#', ''))] = props.color, _a["".concat(classPrefix, "-block")] = props.block || props.size === 'large', _a["".concat(classPrefix, "-disabled")] = disabled, _a["".concat(classPrefix, "-fill-solid")] = props.fill === 'solid', _a["".concat(classPrefix, "-fill-outline")] = props.fill === 'outline', _a["".concat(classPrefix, "-fill-none-disabled")] = props.fill === 'none' && disabled, _a["".concat(classPrefix, "-fill-solid-disabled")] = props.fill === 'solid' && disabled, _a["".concat(classPrefix, "-fill-outline-disabled")] = props.fill === 'outline' && disabled, _a["".concat(classPrefix, "-fill-none")] = props.fill === 'none', _a["".concat(classPrefix, "-mini")] = props.size === 'mini', _a["".concat(classPrefix, "-small")] = props.size === 'small', _a["".concat(classPrefix, "-halfMiddle")] = props.size === 'halfMiddle', _a["".concat(classPrefix, "-middle")] = props.size === 'middle', _a["".concat(classPrefix, "-large")] = props.size === 'large', _a["".concat(classPrefix, "-loading")] = loading, _a["".concat(classPrefix, "-fill-none-loading")] = props.fill === 'none' && loading, _a["".concat(classPrefix, "-fill-solid-loading")] = props.fill === 'solid' && loading, _a["".concat(classPrefix, "-fill-outline-loading")] = props.fill === 'outline' && loading, _a)),
+    disabled: disabled,
+    onMouseDown: props.onMouseDown,
+    onMouseUp: props.onMouseUp,
+    onTouchStart: props.onTouchStart,
+    onTouchEnd: props.onTouchEnd
+  }, loading ? React.createElement("div", {
+    className: "".concat(classPrefix, "-loading-wrapper")
+  }, props.loadingIconPos === 'left' ? props.loadingIcon : null, React.createElement("span", {
+    className: classNames("".concat(classPrefix, "-text"), "".concat(classPrefix, "-loading-icon-").concat(props.loadingIconPos))
+  }, props.loadingText || props.children), props.loadingIconPos === 'right' ? props.loadingIcon : null) : React.createElement("span", {
+    className: "".concat(classPrefix, "-text")
+  }, props.children)));
+});