@ebscn/ui 0.0.10 → 1.0.0

package/es/components/switch/switch.js

@@ -0,0 +1,204 @@
+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 { SpinIcon } from '@ebscn/ui';
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { isPromise } from '../../utils/validate';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = "ebscn-switch";
+var defaultProps = {
+  defaultChecked: false,
+  size: 'normal'
+};
+var Switch = function (p) {
+  var _a;
+  var props = mergeProps(defaultProps, p);
+  var disabled = props.disabled || props.loading || false;
+  var _b = useState(false),
+    changing = _b[0],
+    setChanging = _b[1];
+  var _c = usePropsValue({
+      value: props.checked,
+      defaultValue: props.defaultChecked,
+      onChange: props.onChange
+    }),
+    checked = _c[0],
+    setChecked = _c[1];
+  function onClick() {
+    return __awaiter(this, void 0, void 0, function () {
+      var nextChecked, e_1, result, e_2;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (disabled || props.loading || changing) {
+              return [2 /*return*/];
+            }
+            nextChecked = !checked;
+            if (!props.beforeChange) return [3 /*break*/, 4];
+            setChanging(true);
+            _a.label = 1;
+          case 1:
+            _a.trys.push([1, 3,, 4]);
+            return [4 /*yield*/, props.beforeChange(nextChecked)];
+          case 2:
+            _a.sent();
+            setChanging(false);
+            return [3 /*break*/, 4];
+          case 3:
+            e_1 = _a.sent();
+            setChanging(false);
+            throw e_1;
+          case 4:
+            result = setChecked(nextChecked);
+            if (!isPromise(result)) return [3 /*break*/, 8];
+            setChanging(true);
+            _a.label = 5;
+          case 5:
+            _a.trys.push([5, 7,, 8]);
+            return [4 /*yield*/, result];
+          case 6:
+            _a.sent();
+            setChanging(false);
+            return [3 /*break*/, 8];
+          case 7:
+            e_2 = _a.sent();
+            setChanging(false);
+            throw e_2;
+          case 8:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }
+  return withNativeProps(props, React.createElement("div", {
+    onClick: onClick,
+    className: classNames(classPrefix, (_a = {}, _a["".concat(classPrefix, "-checked")] = checked, _a["".concat(classPrefix, "-disabled")] = disabled || changing, _a["".concat(classPrefix, "-small")] = props.size === 'small', _a)),
+    role: "switch",
+    "aria-checked": checked,
+    "aria-disabled": disabled
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-checkbox")
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-handle")
+  }, (props.loading || changing) && React.createElement(SpinIcon, {
+    className: "".concat(classPrefix, "-spin-icon")
+  })), React.createElement("div", {
+    className: "".concat(classPrefix, "-inner")
+  }, checked ? props.checkedText : props.uncheckedText))));
+};
+export default Switch;

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

@@ -0,0 +1,4 @@
+import './toastLoading.less';
+import { ToastLoading } from "./toastLoading";
+export type { ToastLoadingProps } from './toastLoading';
+export default ToastLoading;

package/es/components/toastLoading/index.js

@@ -0,0 +1,3 @@
+import "./toastLoading.css";
+import { ToastLoading } from "./toastLoading";
+export default ToastLoading;

package/es/components/toastLoading/toastLoading.css

@@ -0,0 +1,27 @@
+.ebscn-load {
+  width: 32%;
+  height: 120px;
+  border-radius: 6px;
+  background: var(--ebscn-color-text-dark-solid);
+  opacity: 0.6;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ebscn-load-gif-img {
+  width: 35%;
+  height: 42px;
+  background: url(./images/loading.webp) center no-repeat;
+  background-size: 100%;
+  margin-top: 21px;
+}
+.ebscn-load-txt {
+  font-size: var(--ebscn-font-size-7);
+  line-height: 16px;
+  color: var(--ebscn-color-background);
+  margin-top: 12px;
+}

package/es/components/toastLoading/toastLoading.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type ToastLoadingProps = {
+    title?: string;
+    visible: boolean;
+} & NativeProps;
+export declare function ToastLoading(p: ToastLoadingProps): React.JSX.Element;

package/es/components/toastLoading/toastLoading.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '@ebscn/ui/utils/with-default-props';
+var classPrefix = 'ebscn-load';
+var defaultProps = {
+  title: '加载中',
+  visible: false
+};
+export function ToastLoading(p) {
+  var props = mergeProps(defaultProps, p);
+  console.log(p, 'toast');
+  var title = props.title,
+    visible = props.visible;
+  var _a = useState(visible),
+    showLoad = _a[0],
+    setShowLoad = _a[1];
+  return withNativeProps(props, React.createElement("div", {
+    className: "".concat(classPrefix),
+    style: {
+      visibility: showLoad ? 'visible' : 'hidden'
+    }
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-gif-img")
+  }), React.createElement("p", {
+    className: "".concat(classPrefix, "-txt")
+  }, title)));
+}

package/es/global/global.css

@@ -0,0 +1,289 @@
+:root {
+  --ebscn-radius-s: 4px;
+  --ebscn-radius-m: 8px;
+  --ebscn-radius-l: 12px;
+  --ebscn-font-size-1: 9px;
+  --ebscn-font-size-2: 10px;
+  --ebscn-font-size-3: 11px;
+  --ebscn-font-size-4: 12px;
+  --ebscn-font-size-5: 13px;
+  --ebscn-font-size-6: 14px;
+  --ebscn-font-size-7: 15px;
+  --ebscn-font-size-8: 16px;
+  --ebscn-font-size-9: 17px;
+  --ebscn-font-size-10: 18px;
+  --ebscn-font-size-11: 19px;
+  --ebscn-font-size-12: 20px;
+  --ebscn-font-size-13: 21px;
+  --ebscn-font-size-14: 22px;
+  --ebscn-color-primary: #E84225;
+  --ebscn-color-success: #00b578;
+  --ebscn-color-warning: #ff8f1f;
+  --ebscn-color-danger: #ff3141;
+  --ebscn-color-yellow: #ff9f18;
+  --ebscn-color-wathet: #e7f1ff;
+  --ebscn-color-text: #333333;
+  --ebscn-color-text-secondary: #666666;
+  --ebscn-color-weak: #999999;
+  --ebscn-color-light: #cccccc;
+  --ebscn-color-border: #eeeeee;
+  --ebscn-color-background: #ffffff;
+  --ebscn-color-highlight: var(--ebscn-color-danger);
+  --ebscn-color-white: #ffffff;
+  --ebscn-color-box: #f5f5f5;
+  --ebscn-color-text-light-solid: var(--ebscn-color-white);
+  --ebscn-color-text-dark-solid: #000000;
+  --ebscn-color-fill-content: var(--ebscn-color-box);
+  --ebscn-font-size-main: var(--ebscn-font-size-5);
+  --ebscn-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
+    helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
+    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  --ebscn-border-color: var(--ebscn-color-border);
+  --ebscn-color-green: #3caa44;
+  --ebscn-color-blue: #4c7cf1;
+  --ebscn-color-orange: #ff6800;
+  --ebscn-color-golden: #b47816;
+  --ebscn-color-grey: rgba(0, 0, 0, 0.7);
+  --ebscn-color-split-line: #EBEBEB;
+}
+html[data-prefers-color-scheme='dark'] {
+  --ebscn-color-primary: #3086ff;
+  --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-secondary: #b3b3b3;
+  --ebscn-color-weak: #808080;
+  --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);
+}
+:root {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+html {
+  background-color: var(--ebscn-color-background-body);
+}
+body {
+  color: var(--ebscn-color-text);
+  font-size: var(--ebscn-font-size-main);
+  font-family: var(--ebscn-font-family);
+}
+a,
+button {
+  cursor: pointer;
+}
+a {
+  color: var(--ebscn-color-primary);
+  transition: opacity ease-in-out 0.2s;
+}
+a:active {
+  opacity: 0.8;
+}
+.ebscn-plain-anchor {
+  color: unset;
+  transition: none;
+}
+.ebscn-plain-anchor:active {
+  opacity: unset;
+}
+body.ebscn-overflow-hidden {
+  overflow: hidden !important;
+}
+div.ebscn-px-tester {
+  --size: 1;
+  height: calc(var(--size) / 2 * 2px);
+  width: 0;
+  position: fixed;
+  left: -100vw;
+  top: -100vh;
+  -webkit-user-select: none;
+          user-select: none;
+  pointer-events: none;
+}
+.ebscn-lh-16 {
+  line-height: 16px;
+}
+.ebscn-h-16 {
+  height: 16px;
+}
+.ebscn-lh-32 {
+  line-height: 32px;
+}
+.ebscn-h-32 {
+  height: 32px;
+}
+.ebscn-lh-40 {
+  line-height: 40px;
+}
+.ebscn-h-40 {
+  height: 40px;
+}
+.ebscn-lh-50 {
+  line-height: 50px;
+}
+.ebscn-h-50 {
+  height: 50px;
+}
+.ebscn-lh-70 {
+  line-height: 70px;
+}
+.ebscn-h-70 {
+  height: 70px;
+}
+.ebscn-ml-4 {
+  margin-left: 4px;
+}
+.ebscn-mr-4 {
+  margin-right: 4px;
+}
+.ebscn-mt-4 {
+  margin-top: 4px;
+}
+.ebscn-mb-4 {
+  margin-bottom: 4px;
+}
+.ebscn-m-4 {
+  margin: 4px;
+}
+.ebscn-ml-8 {
+  margin-left: 8px;
+}
+.ebscn-mr-8 {
+  margin-right: 8px;
+}
+.ebscn-mt-8 {
+  margin-top: 8px;
+}
+.ebscn-mb-8 {
+  margin-bottom: 8px;
+}
+.ebscn-m-8 {
+  margin: 8px;
+}
+.ebscn-ml-12 {
+  margin-left: 12px;
+}
+.ebscn-mr-12 {
+  margin-right: 12px;
+}
+.ebscn-mt-12 {
+  margin-top: 12px;
+}
+.ebscn-mb-12 {
+  margin-bottom: 12px;
+}
+.ebscn-m-12 {
+  margin: 12px;
+}
+.ebscn-ml-16 {
+  margin-left: 16px;
+}
+.ebscn-mr-16 {
+  margin-right: 16px;
+}
+.ebscn-mt-16 {
+  margin-top: 16px;
+}
+.ebscn-mb-16 {
+  margin-bottom: 16px;
+}
+.ebscn-m-16 {
+  margin: 16px;
+}
+.ebscn-ml-20 {
+  margin-left: 20px;
+}
+.ebscn-mr-20 {
+  margin-right: 20px;
+}
+.ebscn-mt-20 {
+  margin-top: 20px;
+}
+.ebscn-mb-20 {
+  margin-bottom: 20px;
+}
+.ebscn-m-20 {
+  margin: 20px;
+}
+.ebscn-pl-4 {
+  padding-left: 4px;
+}
+.ebscn-pr-4 {
+  padding-right: 4px;
+}
+.ebscn-pt-4 {
+  padding-top: 4px;
+}
+.ebscn-pb-4 {
+  padding-bottom: 4px;
+}
+.ebscn-p-4 {
+  padding: 4px;
+}
+.ebscn-pl-8 {
+  padding-left: 8px;
+}
+.ebscn-pr-8 {
+  padding-right: 8px;
+}
+.ebscn-pt-8 {
+  padding-top: 8px;
+}
+.ebscn-pb-8 {
+  padding-bottom: 8px;
+}
+.ebscn-p-8 {
+  padding: 8px;
+}
+.ebscn-pl-12 {
+  padding-left: 12px;
+}
+.ebscn-pr-12 {
+  padding-right: 12px;
+}
+.ebscn-pt-12 {
+  padding-top: 12px;
+}
+.ebscn-pb-12 {
+  padding-bottom: 12px;
+}
+.ebscn-p-12 {
+  padding: 12px;
+}
+.ebscn-pl-16 {
+  padding-left: 16px;
+}
+.ebscn-pr-16 {
+  padding-right: 16px;
+}
+.ebscn-pt-16 {
+  padding-top: 16px;
+}
+.ebscn-pb-16 {
+  padding-bottom: 16px;
+}
+.ebscn-p-16 {
+  padding: 16px;
+}
+.ebscn-pl-20 {
+  padding-left: 20px;
+}
+.ebscn-pr-20 {
+  padding-right: 20px;
+}
+.ebscn-pt-20 {
+  padding-top: 20px;
+}
+.ebscn-pb-20 {
+  padding-bottom: 20px;
+}
+.ebscn-p-20 {
+  padding: 20px;
+}

package/es/global/index.d.ts

@@ -0,0 +1 @@
+import './global.less';

package/es/global/index.js

@@ -0,0 +1,9 @@
+import "./global.css";
+import { canUseDom } from '../utils/can-use-dom';
+if (canUseDom) {
+  // Make sure the `:active` CSS selector of `button` and `a` take effect
+  // See: https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
+  document.addEventListener('touchstart', function () {}, true);
+}
+// Only for debugging. Must COMMENT this line before commit:
+// import './css-vars-patch.less'

package/es/global/theme-dark.css

@@ -0,0 +1,18 @@
+html[data-prefers-color-scheme='dark'] {
+  --ebscn-color-primary: #3086ff;
+  --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-secondary: #b3b3b3;
+  --ebscn-color-weak: #808080;
+  --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);
+}

package/es/global/theme-default.css

@@ -0,0 +1,48 @@
+:root {
+  --ebscn-radius-s: 4px;
+  --ebscn-radius-m: 8px;
+  --ebscn-radius-l: 12px;
+  --ebscn-font-size-1: 9px;
+  --ebscn-font-size-2: 10px;
+  --ebscn-font-size-3: 11px;
+  --ebscn-font-size-4: 12px;
+  --ebscn-font-size-5: 13px;
+  --ebscn-font-size-6: 14px;
+  --ebscn-font-size-7: 15px;
+  --ebscn-font-size-8: 16px;
+  --ebscn-font-size-9: 17px;
+  --ebscn-font-size-10: 18px;
+  --ebscn-font-size-11: 19px;
+  --ebscn-font-size-12: 20px;
+  --ebscn-font-size-13: 21px;
+  --ebscn-font-size-14: 22px;
+  --ebscn-color-primary: #E84225;
+  --ebscn-color-success: #00b578;
+  --ebscn-color-warning: #ff8f1f;
+  --ebscn-color-danger: #ff3141;
+  --ebscn-color-yellow: #ff9f18;
+  --ebscn-color-wathet: #e7f1ff;
+  --ebscn-color-text: #333333;
+  --ebscn-color-text-secondary: #666666;
+  --ebscn-color-weak: #999999;
+  --ebscn-color-light: #cccccc;
+  --ebscn-color-border: #eeeeee;
+  --ebscn-color-background: #ffffff;
+  --ebscn-color-highlight: var(--ebscn-color-danger);
+  --ebscn-color-white: #ffffff;
+  --ebscn-color-box: #f5f5f5;
+  --ebscn-color-text-light-solid: var(--ebscn-color-white);
+  --ebscn-color-text-dark-solid: #000000;
+  --ebscn-color-fill-content: var(--ebscn-color-box);
+  --ebscn-font-size-main: var(--ebscn-font-size-5);
+  --ebscn-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
+    helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
+    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  --ebscn-border-color: var(--ebscn-color-border);
+  --ebscn-color-green: #3caa44;
+  --ebscn-color-blue: #4c7cf1;
+  --ebscn-color-orange: #ff6800;
+  --ebscn-color-golden: #b47816;
+  --ebscn-color-grey: rgba(0, 0, 0, 0.7);
+  --ebscn-color-split-line: #EBEBEB;
+}

package/es/index.d.ts

@@ -0,0 +1,18 @@
+import './global';
+export * from './components/icons';
+export { default as Card } from './components/card';
+export { default as NumberKeyboard } from './components/number-keyboard';
+export { default as AlphabetKeyboard } from './components/alphabet-keyboard';
+export { default as StockKeyboard } from './components/stock-keyboard';
+export { default as StockCountKeyboard } from './components/stock-count-keyboard';
+export { default as ToastLoading } from './components/toastLoading';
+export { default as ImageViewer } from './components/imageViewer';
+export { default as MarketTag } from './components/marketTag';
+export { default as Checkbox } from './components/checkbox';
+export { default as Grid } from './components/grid';
+export { default as Radio } from './components/radio';
+export { default as Protocal } from './components/protocol';
+export { default as PdfLink } from './components/pdfLink';
+export { default as Switch } from './components/switch';
+export { default as Search } from './components/search';
+export { default as Button } from './components/button';

package/es/index.js

@@ -0,0 +1,18 @@
+import './global';
+export * from './components/icons';
+export { default as Card } from './components/card';
+export { default as NumberKeyboard } from './components/number-keyboard';
+export { default as AlphabetKeyboard } from './components/alphabet-keyboard';
+export { default as StockKeyboard } from './components/stock-keyboard';
+export { default as StockCountKeyboard } from './components/stock-count-keyboard';
+export { default as ToastLoading } from './components/toastLoading';
+export { default as ImageViewer } from './components/imageViewer';
+export { default as MarketTag } from './components/marketTag';
+export { default as Checkbox } from './components/checkbox';
+export { default as Grid } from './components/grid';
+export { default as Radio } from './components/radio';
+export { default as Protocal } from './components/protocol';
+export { default as PdfLink } from './components/pdfLink';
+export { default as Switch } from './components/switch';
+export { default as Search } from './components/search';
+export { default as Button } from './components/button';

package/es/utils/attach-properties-to-component.d.ts

@@ -0,0 +1 @@
+export declare function attachPropertiesToComponent<C, P extends Record<string, any>>(component: C, properties: P): C & P;

package/es/utils/attach-properties-to-component.js

@@ -0,0 +1,9 @@
+export function attachPropertiesToComponent(component, properties) {
+  var ret = component;
+  for (var key in properties) {
+    if (properties.hasOwnProperty(key)) {
+      ret[key] = properties[key];
+    }
+  }
+  return ret;
+}