@ebscn/ui 0.0.10 → 1.0.0

package/es/components/search/search.js

@@ -0,0 +1,102 @@
+import { ClearIcon, SearchIcon } from '@ebscn/ui';
+import { useDebounceFn } from 'ahooks';
+import React, { useRef } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { isIOS } from '../../utils/validate';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = "ebscn-search";
+var defaultProps = {
+  searchLayout: 'normal',
+  placeholder: '请输入业务关键字',
+  defaultValue: '',
+  debounce: 0
+};
+var Search = function (p) {
+  var props = mergeProps(defaultProps, p);
+  var searchLayout = props.searchLayout;
+  var _a = usePropsValue(props),
+    value = _a[0],
+    setValue = _a[1];
+  var compositionStartRef = useRef(false);
+  var nativeInputRef = useRef(null);
+  var debouncedSearch = useDebounceFn(props.onSearch, {
+    wait: props.debounce
+  }).run;
+  // 防抖大于0时使用新函数执行回调
+  var _search = props.debounce > 0 ? debouncedSearch : props.onSearch;
+  var onKeydown = function (e) {
+    if (e.code === 'Enter' || e.keyCode === 13) {
+      _search(value);
+    }
+  };
+  var onChange = function (e) {
+    setValue(e.target.value);
+    _search(e.target.value);
+  };
+  var onClear = function () {
+    var _a, _b;
+    setValue('');
+    (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props);
+    // https://github.com/ant-design/ant-design-mobile/issues/5212
+    if (isIOS() && compositionStartRef.current) {
+      compositionStartRef.current = false;
+      (_b = nativeInputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+    }
+  };
+  var SearchInput = React.createElement("div", {
+    className: "".concat(classPrefix, "-box")
+  }, React.createElement(SearchIcon, {
+    className: "".concat(classPrefix, "-search-icon")
+  }), React.createElement("input", {
+    ref: nativeInputRef,
+    type: "text",
+    className: "".concat(classPrefix, "-input"),
+    id: props.id,
+    value: value,
+    placeholder: props.placeholder,
+    autoFocus: props.autoFocus,
+    disabled: props.disabled,
+    role: "search",
+    onCompositionStart: function () {
+      compositionStartRef.current = true;
+    },
+    onCompositionEnd: function () {
+      compositionStartRef.current = false;
+    },
+    onChange: onChange,
+    onKeyDown: onKeydown
+  }), React.createElement("span", {
+    className: "".concat(classPrefix, "-clear-icon-container"),
+    onClick: onClear
+  }, React.createElement(ClearIcon, {
+    className: "".concat(classPrefix, "-clear-icon")
+  })));
+  // 支持字符串，reactNode和ReactNode[], 统一处理为ReactNode[]
+  var children = typeof props.children === 'string' || !Array.isArray(props.children) ? [React.createElement(React.Fragment, null, props.children)] : props.children;
+  var ret = React.createElement(React.Fragment, null);
+  if (searchLayout === 'text' && children.length > 0) {
+    ret = React.createElement("div", {
+      className: "".concat(classPrefix)
+    }, SearchInput, React.createElement("span", {
+      className: "".concat(classPrefix, "-text")
+    }, children[0]));
+  } else if (searchLayout === 'twoIcon' && children.length > 1) {
+    ret = React.createElement("div", {
+      className: "".concat(classPrefix)
+    }, SearchInput, React.createElement("span", {
+      className: "".concat(classPrefix, "-two-icon")
+    }, children.map(function (item, index) {
+      return React.createElement("div", {
+        className: "".concat(classPrefix, "-two-icon-item"),
+        key: index
+      }, item);
+    })));
+  } else {
+    ret = React.createElement("div", {
+      className: "".concat(classPrefix)
+    }, SearchInput);
+  }
+  return withNativeProps(props, ret);
+};
+export default Search;

package/es/components/stock-count-keyboard/index.d.ts

@@ -0,0 +1,4 @@
+import "./stock-count-keyboard.less";
+import { StockCountKeyboard } from "./stock-count-keyboard";
+export type { StockCountKeyboardProps } from "./stock-count-keyboard";
+export default StockCountKeyboard;

package/es/components/stock-count-keyboard/index.js

@@ -0,0 +1,3 @@
+import "./stock-count-keyboard.css";
+import { StockCountKeyboard } from "./stock-count-keyboard";
+export default StockCountKeyboard;

package/es/components/stock-count-keyboard/stock-count-keyboard.css

@@ -0,0 +1,74 @@
+.ebscn-stock-count-keyboard {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  transform: translateY(101%);
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 216px;
+  transition: all 0.5s;
+  align-content: flex-start;
+}
+.ebscn-stock-count-keyboard :last-child {
+  background: var(--ebscn-color-primary);
+  color: var(--ebscn-color-background);
+}
+.ebscn-stock-count-keyboard-key {
+  width: 20%;
+  height: 54px;
+  text-align: center;
+  line-height: 54px;
+  font-size: 24px;
+  color: var(--ebscn-color-text-dark-solid);
+  font-weight: 300;
+  box-shadow: 0 0 0 1px #cccccc;
+  background: var(--ebscn-color-background);
+}
+.ebscn-stock-count-keyboard-key:active {
+  width: 20%;
+  height: 54px;
+  text-align: center;
+  font-size: 24px;
+  color: var(--ebscn-color-text-dark-solid);
+  font-weight: 300;
+  box-shadow: 0 0 0 1px #cccccc;
+  background: var(--ebscn-color-border);
+}
+.ebscn-stock-count-keyboard-option {
+  font-size: var(--ebscn-font-size-11);
+  background: #e1e3e8;
+}
+.ebscn-stock-count-keyboard-option:active {
+  font-size: var(--ebscn-font-size-11);
+  background: #CACBD0;
+}
+.ebscn-stock-count-keyboard-delete {
+  background: url(./images/delete.png) #e1e3e8 no-repeat center;
+  background-size: 24px 24px;
+}
+.ebscn-stock-count-keyboard-delete:active {
+  background: url(./images/delete.png) #CACBD0 no-repeat center;
+  background-size: 24px 24px;
+}
+.ebscn-stock-count-keyboard-confirmKey {
+  background-color: var(--ebscn-color-primary);
+  width: 20%;
+  height: 54px;
+  line-height: 54px;
+  text-align: center;
+  font-size: var(--ebscn-font-size-11);
+  color: var(--ebscn-color-text-dark-solid);
+  font-weight: 300;
+  box-shadow: 0 0 0 1px #cccccc;
+}
+.ebscn-stock-count-keyboard-confirmKey:active {
+  background-color: #D03B21;
+  color: var(--ebscn-color-background);
+}
+@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/stock-count-keyboard/stock-count-keyboard.d.ts

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

package/es/components/stock-count-keyboard/stock-count-keyboard.js

@@ -0,0 +1,74 @@
+import cns from "classnames";
+import { useEffect, useRef } from "react";
+import React from "react";
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = 'ebscn-stock-count-keyboard';
+var defaultProps = {
+  visible: false
+};
+export function StockCountKeyboard(p) {
+  var keyboardRef = useRef(null);
+  var props = mergeProps(defaultProps, p);
+  var visible = props.visible,
+    onInput = props.onInput,
+    onConfirm = props.onConfirm,
+    onDelete = props.onDelete;
+  var keys = ['全部', 1, 2, 3, 'X', '1/2', 4, 5, 6, '+100', '1/3', 7, 8, 9, '-100', '1/4', '00', 0, '', '确定'];
+  var hideTimer = useRef(null);
+  var appearTimer = 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 '确定':
+        return onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+      default:
+        return onInput === null || onInput === void 0 ? void 0 : onInput(key);
+    }
+  }
+  return withNativeProps(props, React.createElement("div", {
+    ref: keyboardRef,
+    className: "".concat(classPrefix)
+  }, keys.map(function (item, index) {
+    return React.createElement("div", {
+      key: item || index,
+      className: cns(item !== '确定' ? "".concat(classPrefix, "-key") : "".concat(classPrefix, "-confirmKey"), typeof item !== 'number' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
+      onClick: function () {
+        if (visible) {
+          onKeyPress(item);
+        }
+      }
+    }, item !== 'X' ? item : '');
+  })));
+}

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

@@ -0,0 +1,4 @@
+import "./stock-keyboard.less";
+import { StockKeyboard } from "./stock-keyboard";
+export type { StockKeyboardProps } from "./stock-keyboard";
+export default StockKeyboard;

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

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

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

@@ -0,0 +1,111 @@
+.ebscn-stock-keyboard {
+  transform: translateY(101%);
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  flex-direction: row;
+  width: 100%;
+  height: 216px;
+  transition: all 0.5s;
+  align-content: flex-start;
+}
+.ebscn-stock-keyboard .ebscn-stock-keyboard-right {
+  display: flex;
+  flex-wrap: wrap;
+  width: 80%;
+  height: 216px;
+  transition: all 0.5s;
+  align-content: flex-start;
+}
+.ebscn-stock-keyboard .ebscn-stock-keyboard-right :last-child {
+  background: var(--ebscn-color-primary);
+  color: var(--ebscn-color-white);
+}
+.ebscn-stock-keyboard .ebscn-stock-keyboard-right-key {
+  width: 25%;
+  height: 54px;
+  line-height: 54px;
+  text-align: center;
+  font-size: 24px;
+  color: #000000;
+  font-weight: 300;
+  box-shadow: 0 0 0 1px var(--ebscn-color-light);
+  background: var(--ebscn-color-white);
+}
+.ebscn-stock-keyboard .ebscn-stock-keyboard-right-key:active {
+  width: 25%;
+  height: 54px;
+  line-height: 54px;
+  text-align: center;
+  font-size: 24px;
+  color: #000000;
+  font-weight: 300;
+  box-shadow: 0 0 0 1px var(--ebscn-color-light);
+  background: var(--ebscn-color-border);
+}
+.ebscn-stock-keyboard .ebscn-stock-keyboard-right-option {
+  font-size: var(--ebscn-font-size-11);
+  background: #e1e3e8;
+}
+.ebscn-stock-keyboard .ebscn-stock-keyboard-right-option:active {
+  font-size: var(--ebscn-font-size-11);
+  background: #CACBD0;
+}
+.ebscn-stock-keyboard .ebscn-stock-keyboard-right-delete {
+  background: url(./images/delete.png) #e1e3e8 no-repeat center;
+  background-size: 24px 24px;
+}
+.ebscn-stock-keyboard .ebscn-stock-keyboard-right-delete:active {
+  background: url(./images/delete.png) #CACBD0 no-repeat center;
+  background-size: 24px 24px;
+}
+.ebscn-stock-keyboard .ebscn-stock-keyboard-right-header {
+  padding-top: 24px;
+  padding-bottom: 16px;
+  font-size: var(--ebscn-font-size-10);
+  color: #333333;
+  text-align: center;
+  font-weight: 500;
+}
+.ebscn-stock-keyboard .ebscn-stock-keyboard-right-confirmKey {
+  background-color: var(--ebscn-color-primary);
+  width: 25%;
+  height: 54px;
+  line-height: 54px;
+  text-align: center;
+  font-size: var(--ebscn-font-size-11);
+  color: #000000;
+  font-weight: 300;
+  box-shadow: 0 0 0 1px var(--ebscn-color-light);
+}
+.ebscn-stock-keyboard .ebscn-stock-keyboard-right-confirmKey:active {
+  background-color: #D03B21;
+  color: var(--ebscn-color-white);
+}
+.ebscn-stock-keyboard .ebscn-stock-keyboard-left {
+  width: 20%;
+  height: 216px;
+}
+.ebscn-stock-keyboard .ebscn-stock-keyboard-left-key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 20%;
+  font-size: var(--ebscn-font-size-10);
+  font-weight: 400;
+  text-align: center;
+  color: #333333;
+  line-height: 25px;
+  box-shadow: 0 0 0 1px var(--ebscn-color-light);
+  background: #e1e3e8;
+}
+.ebscn-stock-keyboard .ebscn-stock-keyboard-left-key:active {
+  font-size: 18px;
+  background: #CACBD0;
+}
+@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/stock-keyboard/stock-keyboard.d.ts

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

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

@@ -0,0 +1,99 @@
+import cns from "classnames";
+import { useEffect, useRef } from "react";
+import React from "react";
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+var classPrefix = 'ebscn-stock-keyboard';
+var defaultProps = {
+  visible: false
+};
+export function StockKeyboard(p) {
+  var keyboardRef = useRef(null);
+  var props = mergeProps(defaultProps, p);
+  var visible = props.visible,
+    onInput = props.onInput,
+    onDelete = props.onDelete,
+    onClose = props.onClose,
+    onClean = props.onClean,
+    onConfirm = props.onConfirm,
+    onChangeKeyBoard = props.onChangeKeyBoard;
+  var keys = [1, 2, 3, 'X', 4, 5, 6, '清除', 7, 8, 9, '隐藏', 'ABC', 0, '', '确定'];
+  var leftKeys = ['600', '601', '000', '002', '300'];
+  var hideTimer = useRef(null);
+  var appearTimer = 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 '清除':
+        return onClean === null || onClean === void 0 ? void 0 : onClean();
+      case '隐藏':
+        return onClose === null || onClose === void 0 ? void 0 : onClose();
+      case '确定':
+        return onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+      case 'ABC':
+        return onChangeKeyBoard === null || onChangeKeyBoard === void 0 ? void 0 : onChangeKeyBoard();
+      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, "-left")
+  }, leftKeys.map(function (item, index) {
+    return React.createElement("div", {
+      key: item || index,
+      className: "".concat(classPrefix, "-left-key"),
+      onClick: function () {
+        if (visible) {
+          onKeyPress(item);
+        }
+      }
+    }, item !== 'X' ? item : '');
+  })), React.createElement("div", {
+    ref: keyboardRef,
+    className: "".concat(classPrefix, "-right")
+  }, keys.map(function (item, index) {
+    return React.createElement("div", {
+      key: item || index,
+      className: cns(item !== '确定' ? "".concat(classPrefix, "-right-key") : "".concat(classPrefix, "-right-confirmKey"), typeof item !== 'number' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-right-option") : item == '确定' ? "".concat(classPrefix, "-right-confirmKey") : "".concat(classPrefix, "-right-number-key"), item === 'X' && "".concat(classPrefix, "-right-delete")),
+      onClick: function () {
+        if (visible) {
+          onKeyPress(item);
+        }
+      }
+    }, item !== 'X' ? item : '');
+  }))));
+}

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

@@ -0,0 +1,4 @@
+import './switch.less';
+import Switch from './switch';
+export type { SwitchProps } from './switch';
+export default Switch;

package/es/components/switch/index.js

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

package/es/components/switch/switch.css

@@ -0,0 +1,104 @@
+@keyframes loading-rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+.ebscn-switch {
+  --checked-color: var(--ebscn-color-primary);
+  --height: 31px;
+  --width: 51px;
+  --border-width: 2px;
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  position: relative;
+  align-self: center;
+  cursor: pointer;
+  /* 选中状态 */
+  /* 禁用状态 */
+  /* loading图标 */
+}
+.ebscn-switch.ebscn-switch-small {
+  --height: 27px;
+  --width: 44px;
+}
+.ebscn-switch input {
+  display: none;
+}
+.ebscn-switch-checkbox {
+  min-width: var(--width);
+  height: var(--height);
+  box-sizing: border-box;
+  border-radius: 31px;
+  background: var(--ebscn-color-border);
+  z-index: 0;
+  overflow: hidden;
+  line-height: var(--height);
+}
+.ebscn-switch-checkbox:before {
+  content: ' ';
+  position: absolute;
+  left: var(--border-width);
+  top: var(--border-width);
+  width: calc(100% - 2 * var(--border-width));
+  height: calc(var(--height) - 2 * var(--border-width));
+  border-radius: calc(var(--height) - 2 * var(--border-width));
+  box-sizing: border-box;
+  background: #E9E9EA;
+  z-index: 1;
+  transition: all 200ms;
+  transform: scale(1);
+}
+.ebscn-switch-handle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(var(--height) - 2 * var(--border-width));
+  height: calc(var(--height) - 2 * var(--border-width));
+  border-radius: calc(var(--height) - 2 * var(--border-width));
+  background: var(--ebscn-color-text-light-solid);
+  position: absolute;
+  z-index: 2;
+  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 {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 8px 0 calc(var(--height) - var(--border-width) + 5px);
+  height: 100%;
+  color: var(--ebscn-color-weak);
+  transition: margin 200ms;
+  font-size: var(--ebscn-font-size-7);
+}
+.ebscn-switch.ebscn-switch-checked .ebscn-switch-checkbox {
+  background: var(--checked-color);
+}
+.ebscn-switch.ebscn-switch-checked .ebscn-switch-checkbox:before {
+  transform: scale(0);
+}
+.ebscn-switch.ebscn-switch-checked .ebscn-switch-handle {
+  left: calc(100% - (var(--height) - var(--border-width)));
+}
+.ebscn-switch.ebscn-switch-checked .ebscn-switch-inner {
+  margin: 0 calc(var(--height) - var(--border-width) + 5px) 0 8px;
+  color: var(--ebscn-color-text-light-solid);
+}
+.ebscn-switch.ebscn-switch-disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.ebscn-switch.ebscn-switch-disabled:before {
+  background-color: #f4f4f4;
+}
+.ebscn-switch-spin-icon {
+  width: 14px;
+  height: 14px;
+  animation: loading-rotate 1s linear infinite;
+}

package/es/components/switch/switch.d.ts

@@ -0,0 +1,16 @@
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type SwitchProps = {
+    loading?: boolean;
+    disabled?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    /** @deprecated use `onChange` instead */
+    beforeChange?: (val: boolean) => Promise<void>;
+    onChange?: (checked: boolean) => void | Promise<void>;
+    checkedText?: ReactNode;
+    uncheckedText?: ReactNode;
+    size?: 'normal' | 'small';
+} & NativeProps<'--checked-color' | '--width' | '--height' | '--border-width'>;
+declare const Switch: FC<SwitchProps>;
+export default Switch;