@ebscn/ui 1.0.3-beta.1 → 1.0.3-beta.3

package/es/components/virtual-input/virtual-input.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { NumberKeyboardProps } from '../number-keyboard';
+type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+type AriaProps = {
+    role?: string;
+};
+export type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'step' | 'id' | 'placeholder' | 'readOnly' | 'disabled'> & {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (val: string) => void;
+    clearable?: boolean;
+    onlyShowClearWhenFocus?: boolean;
+    onClear?: () => void;
+    onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    min?: number;
+    max?: number;
+} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--text-align'> & AriaProps;
+export type VirtualInputProps = {
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    keyboard?: ReactElement<NumberKeyboardProps>;
+    clearable?: boolean;
+    onClear?: () => void;
+} & Pick<InputProps, 'value' | 'onChange' | 'placeholder' | 'disabled'> & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align' | '--caret-width' | '--caret-color'>;
+export type VirtualInputRef = {
+    focus: () => void;
+    blur: () => void;
+};
+export declare const VirtualInput: React.ForwardRefExoticComponent<{
+    onFocus?: (() => void) | undefined;
+    onBlur?: (() => void) | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement>) => void) | undefined;
+    keyboard?: React.ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
+    clearable?: boolean | undefined;
+    onClear?: (() => void) | undefined;
+} & Pick<InputProps, "disabled" | "value" | "onChange" | "placeholder"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<VirtualInputRef>>;
+export {};

package/es/components/virtual-input/virtual-input.js

@@ -0,0 +1,134 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+// import type { InputProps } from '../input'
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import classNames from 'classnames';
+// import { CloseCircleFill } from 'antd-mobile-icons'
+import { useIsomorphicLayoutEffect } from 'ahooks';
+// import { useConfig } from '../config-provider'
+var classPrefix = 'ebscn-virtual-input';
+var defaultProps = {
+  defaultValue: ''
+};
+export var VirtualInput = forwardRef(function (p, ref) {
+  var _a;
+  var props = mergeProps(defaultProps, p);
+  var _b = usePropsValue(props),
+    value = _b[0],
+    setValue = _b[1];
+  console.log(props, value, 11);
+  var rootRef = useRef(null);
+  var contentRef = useRef(null);
+  var _c = useState(false),
+    hasFocus = _c[0],
+    setHasFocus = _c[1];
+  // const { locale } = useConfig()
+  function scrollToEnd() {
+    var root = rootRef.current;
+    if (!root) return;
+    if (document.activeElement !== root) {
+      return;
+    }
+    var content = contentRef.current;
+    if (!content) return;
+    content.scrollLeft = content.clientWidth;
+  }
+  useIsomorphicLayoutEffect(function () {
+    scrollToEnd();
+  }, [value]);
+  useEffect(function () {
+    if (hasFocus) {
+      scrollToEnd();
+    }
+  }, [hasFocus]);
+  useImperativeHandle(ref, function () {
+    return {
+      focus: function () {
+        var _a;
+        (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      },
+      blur: function () {
+        var _a;
+        (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    };
+  });
+  function onFocus() {
+    var _a;
+    setHasFocus(true);
+    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
+  }
+  function onBlur() {
+    var _a;
+    setHasFocus(false);
+    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
+  }
+  var keyboard = props.keyboard;
+  var keyboardElement = keyboard && React.cloneElement(keyboard, {
+    onInput: function (v) {
+      var _a, _b;
+      setValue(value + v);
+      (_b = (_a = keyboard.props).onInput) === null || _b === void 0 ? void 0 : _b.call(_a, v);
+    },
+    onDelete: function () {
+      var _a, _b;
+      setValue(value.slice(0, -1));
+      (_b = (_a = keyboard.props).onDelete) === null || _b === void 0 ? void 0 : _b.call(_a);
+    },
+    visible: hasFocus,
+    onClose: function () {
+      var _a, _b, _c, _d;
+      var activeElement = document.activeElement;
+      // Long press makes `activeElement` to be the child of rootRef
+      // We will trigger blur on the child element instead
+      if (activeElement && ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
+        activeElement.blur();
+      } else {
+        (_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+      }
+      (_d = (_c = keyboard.props).onClose) === null || _d === void 0 ? void 0 : _d.call(_c);
+    },
+    onChangeKeyBoard: function () {},
+    onClean: function () {
+      var _a, _b;
+      setValue('');
+      (_b = (_a = keyboard.props).onClean) === null || _b === void 0 ? void 0 : _b.call(_a);
+    },
+    onConfirm: function () {
+      var _a, _b;
+      setHasFocus(false);
+      (_b = (_a = keyboard.props).onConfirm) === null || _b === void 0 ? void 0 : _b.call(_a);
+    },
+    getContainer: null
+  });
+  return withNativeProps(props, React.createElement("div", {
+    ref: rootRef,
+    className: classNames(classPrefix, (_a = {}, _a["".concat(classPrefix, "-disabled")] = props.disabled, _a)),
+    tabIndex: props.disabled ? undefined : 0,
+    role: 'textbox',
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onClick: props.onClick
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-content"),
+    ref: contentRef,
+    "aria-disabled": props.disabled,
+    "aria-label": props.placeholder
+  }, value, React.createElement("div", {
+    className: "".concat(classPrefix, "-caret-container")
+  }, hasFocus && React.createElement("div", {
+    className: "".concat(classPrefix, "-caret")
+  }))), props.clearable && !!value && hasFocus && React.createElement("div", {
+    className: "".concat(classPrefix, "-clear"),
+    onClick: function (e) {
+      var _a;
+      e.stopPropagation();
+      setValue('');
+      (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props);
+    },
+    role: 'button'
+  }), [undefined, null, ''].includes(value) && React.createElement("div", {
+    className: "".concat(classPrefix, "-placeholder")
+  }, props.placeholder), keyboardElement));
+});

package/es/index.d.ts

@@ -35,3 +35,4 @@ 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 Input } from './components/input';

package/es/index.js

@@ -36,4 +36,9 @@ export { default as Swiper } from './components/swiper';
 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 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebscn/ui",
-  "version": "1.0.3-beta.1",
+  "version": "1.0.3-beta.3",
   "description": "ebscn react library",
   "module": "./es/index.js",
   "types": "./es/index.d.ts",