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

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

@@ -0,0 +1,56 @@
+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 { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import TitleLeft from "./demos/component/title-left";
+import TitleRight from "./demos/component/title-right";
+import InputLeft from "./demos/component/input-left";
+import InputRight from "./demos/component/input-right";
+import Tip from "./demos/component/tip";
+import Footer from "./demos/component/footer";
+import Input from "../input";
+var classPrefix = 'ebscn-fene-input';
+var defaultProps = {
+  titleLeftComponent: React.createElement(TitleLeft, null),
+  titleRightComponent: React.createElement(TitleRight, null),
+  inputleftComponent: React.createElement(InputLeft, null),
+  inputrightComponent: React.createElement(InputRight, null),
+  tipComponent: React.createElement(Tip, null),
+  // contentComponent: <Content></Content>,
+  footerComponent: React.createElement(Footer, null)
+};
+export function FeneInput(p) {
+  var props = mergeProps(p, defaultProps);
+  console.log(p, 'FeneProp');
+  // const {titleLeftComponent,inputProps,} = props
+  return withNativeProps(props, React.createElement("div", {
+    className: "".concat(classPrefix)
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-topArea")
+  }, props.titleLeftComponent, props.titleRightComponent), React.createElement("div", {
+    className: "".concat(classPrefix, "-middleArea")
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-middleArea-inputArea")
+  }, props.inputleftComponent, React.createElement(Input, __assign({}, props.inputProps, {
+    clearable: true
+  })), props.inputrightComponent), React.createElement("div", {
+    className: "".concat(classPrefix, "-middleArea-unitBox")
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-middleArea-unitBox-line")
+  }))), React.createElement("div", {
+    className: "".concat(classPrefix, "-tipArea")
+  }, props.tipComponent), React.createElement("div", {
+    className: "".concat(classPrefix, "-contentArea")
+  }, props.contentComponent), React.createElement("div", {
+    className: "".concat(classPrefix, "-bottomArea")
+  }, props.footerComponent)));
+}

package/es/components/fene-input/index.d.ts

@@ -0,0 +1,4 @@
+import "./fene-input.less";
+import { FeneInput } from "./fene-input";
+export type { FeneInputProps } from "./fene-input";
+export default FeneInput;

package/es/components/fene-input/index.js

@@ -0,0 +1,3 @@
+import "./fene-input.css";
+import { FeneInput } from "./fene-input";
+export default FeneInput;

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

@@ -0,0 +1,4 @@
+import './input.less';
+import { Input } from './input';
+export type { InputProps, InputRef } from './input';
+export default Input;

package/es/components/input/index.js

@@ -0,0 +1,3 @@
+import "./input.css";
+import { Input } from './input';
+export default Input;

package/es/components/input/input.css

@@ -0,0 +1,96 @@
+.adm-input {
+  --font-size: var(--adm-font-size-9);
+  --color: var(--adm-color-text);
+  --placeholder-color: var(--adm-color-light);
+  --text-align: left;
+  --background-color: transparent;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  min-height: 24px;
+  background-color: var(--background-color);
+}
+.adm-input-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.adm-input-element {
+  flex: auto;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  padding: 0;
+  margin: 0;
+  color: var(--color);
+  font-size: var(--font-size);
+  line-height: 1.5;
+  background: transparent;
+  border: 0;
+  outline: none;
+  -webkit-appearance: none;
+          appearance: none;
+  min-height: 1.5em;
+  text-align: var(--text-align);
+}
+.adm-input-element::-webkit-input-placeholder {
+  color: var(--placeholder-color);
+  font-family: inherit;
+}
+.adm-input-element::placeholder {
+  color: var(--placeholder-color);
+  font-family: inherit;
+}
+.adm-input-element:-webkit-autofill {
+  background-color: transparent;
+}
+.adm-input-element:read-only {
+  cursor: default;
+}
+.adm-input-element:invalid {
+  box-shadow: none;
+}
+.adm-input-element::-ms-clear {
+  display: none;
+}
+.adm-input-element::-ms-reveal {
+  display: none;
+}
+.adm-input-element::-webkit-search-cancel-button {
+  display: none;
+}
+.adm-input-element::-webkit-search-decoration {
+  display: none;
+}
+.adm-input-element:disabled {
+  opacity: 1;
+}
+.adm-input-element[type='date'],
+.adm-input-element[type='time'],
+.adm-input-element[type='datetime-local'] {
+  min-height: 1.5em;
+}
+.adm-input-element[type='search'] {
+  -webkit-appearance: none;
+}
+.adm-input-element[readonly] {
+  pointer-events: none;
+}
+.adm-input-clear {
+  flex: none;
+  margin-left: 8px;
+  color: var(--adm-color-light);
+  padding: 4px;
+  cursor: pointer;
+}
+.adm-input-clear:active {
+  color: var(--adm-color-weak);
+}
+.adm-input-clear .antd-mobile-icon {
+  display: block;
+  font-size: var(--adm-font-size-7);
+}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+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 InputRef = {
+    clear: () => void;
+    focus: () => void;
+    blur: () => void;
+    nativeElement: HTMLInputElement | null;
+};
+export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "onClick" | "disabled" | "name" | "type" | "id" | "autoFocus" | "autoCapitalize" | "autoCorrect" | "inputMode" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "pattern" | "autoComplete" | "maxLength" | "minLength" | "placeholder" | "readOnly" | "step"> & {
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onChange?: ((val: string) => void) | undefined;
+    clearable?: boolean | undefined;
+    onlyShowClearWhenFocus?: boolean | undefined;
+    onClear?: (() => void) | undefined;
+    onEnterPress?: ((e: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    enterKeyHint?: "search" | "next" | "enter" | "done" | "go" | "previous" | "send" | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & AriaProps & React.RefAttributes<InputRef>>;
+export {};

package/es/components/input/input.js

@@ -0,0 +1,152 @@
+import React, { useState, forwardRef, useImperativeHandle, useRef } from 'react';
+import { usePropsValue } from '../../utils/use-props-value';
+import { CloseCircleFill } from 'antd-mobile-icons';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import classNames from 'classnames';
+import { useIsomorphicLayoutEffect } from 'ahooks';
+import { bound } from '../../utils/bound';
+import { isIOS } from '../../utils/validate';
+var classPrefix = "adm-input";
+var defaultProps = {
+  defaultValue: '',
+  onlyShowClearWhenFocus: true
+};
+export var Input = forwardRef(function (p, ref) {
+  var props = mergeProps(defaultProps, p);
+  var _a = usePropsValue(props),
+    value = _a[0],
+    setValue = _a[1];
+  var _b = useState(false),
+    hasFocus = _b[0],
+    setHasFocus = _b[1];
+  var compositionStartRef = useRef(false);
+  var nativeInputRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return {
+      clear: function () {
+        setValue('');
+      },
+      focus: function () {
+        var _a;
+        (_a = nativeInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      },
+      blur: function () {
+        var _a;
+        (_a = nativeInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      },
+      get nativeElement() {
+        return nativeInputRef.current;
+      }
+    };
+  });
+  var handleKeydown = function (e) {
+    var _a;
+    if (props.onEnterPress && (e.code === 'Enter' || e.keyCode === 13)) {
+      props.onEnterPress(e);
+    }
+    (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  };
+  useIsomorphicLayoutEffect(function () {
+    var _a;
+    if (!props.enterKeyHint) return;
+    (_a = nativeInputRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('enterkeyhint', props.enterKeyHint);
+    return function () {
+      var _a;
+      (_a = nativeInputRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute('enterkeyhint');
+    };
+  }, [props.enterKeyHint]);
+  function checkValue() {
+    var nextValue = value;
+    if (props.type === 'number') {
+      var boundValue = nextValue && bound(parseFloat(nextValue), props.min, props.max).toString();
+      // fix the display issue of numbers starting with 0
+      if (Number(nextValue) !== Number(boundValue)) {
+        nextValue = boundValue;
+      }
+    }
+    if (nextValue !== value) {
+      setValue(nextValue);
+    }
+  }
+  var shouldShowClear = function () {
+    if (!props.clearable || !value || props.readOnly) return false;
+    if (props.onlyShowClearWhenFocus) {
+      return hasFocus;
+    } else {
+      return true;
+    }
+  }();
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames("".concat(classPrefix), props.disabled && "".concat(classPrefix, "-disabled"))
+  }, React.createElement("input", {
+    ref: nativeInputRef,
+    className: "".concat(classPrefix, "-element"),
+    value: value,
+    onChange: function (e) {
+      setValue(e.target.value);
+    },
+    onFocus: function (e) {
+      var _a;
+      setHasFocus(true);
+      console.log(e, 'e');
+      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    },
+    onBlur: function (e) {
+      var _a;
+      setHasFocus(false);
+      checkValue();
+      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    },
+    id: props.id,
+    placeholder: props.placeholder,
+    disabled: props.disabled,
+    readOnly: props.readOnly,
+    maxLength: props.maxLength,
+    minLength: props.minLength,
+    max: props.max,
+    min: props.min,
+    autoComplete: props.autoComplete,
+    autoFocus: props.autoFocus,
+    pattern: props.pattern,
+    inputMode: props.inputMode,
+    type: props.type,
+    name: props.name,
+    autoCapitalize: props.autoCapitalize,
+    autoCorrect: props.autoCorrect,
+    onKeyDown: handleKeydown,
+    onKeyUp: props.onKeyUp,
+    onCompositionStart: function (e) {
+      var _a;
+      compositionStartRef.current = true;
+      (_a = props.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    },
+    onCompositionEnd: function (e) {
+      var _a;
+      compositionStartRef.current = false;
+      (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    },
+    onClick: props.onClick,
+    step: props.step,
+    role: props.role,
+    "aria-valuenow": props['aria-valuenow'],
+    "aria-valuemax": props['aria-valuemax'],
+    "aria-valuemin": props['aria-valuemin'],
+    "aria-label": props['aria-label']
+  }), shouldShowClear && React.createElement("div", {
+    className: "".concat(classPrefix, "-clear"),
+    onMouseDown: function (e) {
+      e.preventDefault();
+    },
+    onClick: 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();
+      }
+    }
+  }, React.createElement(CloseCircleFill, null))));
+});

package/es/components/marketTag/marketTag.css

@@ -1,8 +1,8 @@
 .ebscn-marketTag {
-  padding: 0 1px;
-  font-size: var(--ebscn-font-size-2);
-  line-height: 13px;
-  height: 13px;
+  padding: 0 3px;
+  font-size: var(--ebscn-font-size-4);
+  line-height: 18px;
+  height: 18px;
   font-weight: normal;
   display: inline-block;
   white-space: nowrap;

package/es/components/money-input/index.d.ts

@@ -0,0 +1,4 @@
+import "./money-input.less";
+import { MoneyInput } from "./money-input";
+export type { MoneyInputProps } from "./money-input";
+export default MoneyInput;

package/es/components/money-input/index.js

@@ -0,0 +1,3 @@
+import "./money-input.css";
+import { MoneyInput } from "./money-input";
+export default MoneyInput;

package/es/components/money-input/money-input.css

@@ -0,0 +1,35 @@
+.ebscn-money-input {
+  height: 170.5px;
+  background: #ffffff;
+  padding: 13.5px 16px 13.5px 16px;
+}
+.ebscn-money-input-topArea {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 23.66px;
+}
+.ebscn-money-input-middleArea {
+  border-bottom: 1px solid #ebebeb;
+}
+.ebscn-money-input-middleArea-inputArea {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ebscn-money-input-middleArea-unitBox {
+  display: flex;
+  flex-direction: row;
+  margin-left: 45px;
+}
+.ebscn-money-input-middleArea-unitBox-unit {
+  height: 15px;
+  font-size: 11px;
+  font-weight: 400;
+  color: #999999;
+}
+.ebscn-money-input-middleArea-unitBox-line {
+  width: 0.5px;
+  height: 15px;
+  border: 1px dashed #ebebeb;
+}

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { NativeProps } from '../../utils/native-props';
+import { VirtualInputProps } from "../virtual-input/virtual-input";
+type tipProps = {
+    isShowTip: boolean;
+    tipComponent: React.ReactNode;
+};
+type unitProps = {
+    isShowUnit: boolean;
+    unitComponent: React.ReactNode;
+};
+export type MoneyInputProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (val: string) => void;
+    isShowUnit?: boolean;
+    isShowLine: boolean;
+    tipProps?: tipProps;
+    unitProps?: unitProps;
+    clearable: boolean;
+    inputProps?: VirtualInputProps;
+    inputleftComponent?: React.ReactNode;
+    prefixComponent?: React.ReactNode;
+    suffixComponent?: React.ReactNode;
+} & NativeProps;
+export declare function MoneyInput(p: MoneyInputProps): JSX.Element;
+export {};

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

@@ -0,0 +1,103 @@
+// import cns from "classnames";
+// import { useEffect, useRef } from "react";
+// import React from "react";
+// import { VirtualInputProps, VirtualInput } from "../virtual-input/virtual-input";
+// import { NativeProps, withNativeProps } from '../../utils/native-props'
+// import { mergeProps } from '../../utils/with-default-props'
+// import TitleLeft from "./demos/component/title-left";
+// import TitleRight from "./demos/component/title-right";
+// import InputLeft from "./demos/component/input-left";
+// import InputRight from "./demos/component/input-right";
+// import Tip from "./demos/component/tip";
+// import Footer from "./demos/component/footer";
+// import Content from "./demos/component/content";
+// const classPrefix = 'ebscn-money-input'
+// export type MoneyInputProps = {
+//     titleLeftComponent?: React.ReactNode
+//     titleRightComponent?: React.ReactNode
+//     inputProps?: VirtualInputProps
+//     inputleftComponent?: React.ReactNode
+//     inputrightComponent?: React.ReactNode
+//     tipComponent?: React.ReactNode
+//     contentComponent?: React.ReactNode
+//     footerComponent?: React.ReactNode
+// } & NativeProps;
+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 { useState } from "react";
+import React from "react";
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import Tip from "./demos/component/tip";
+import { usePropsValue } from "@ebscn/ui/utils/use-props-value";
+import { VirtualInput } from "../virtual-input/virtual-input";
+var classPrefix = 'ebscn-money-input';
+var defaultProps = {
+  // inputleftComponent: <InputLeft></InputLeft>,
+  tipComponent: React.createElement(Tip, null),
+  defaultValue: ''
+};
+export function MoneyInput(p) {
+  var _a, _b, _c;
+  var props = mergeProps(p, defaultProps);
+  var _d = usePropsValue(props),
+    value = _d[0],
+    setValue = _d[1];
+  var _e = useState('#ebebeb'),
+    color = _e[0],
+    setColor = _e[1];
+  var _f = useState(false),
+    showTip = _f[0],
+    setShowTip = _f[1];
+  var _g = useState(true),
+    clearable = _g[0],
+    setClearable = _g[1];
+  console.log(p, 'CommonProp');
+  function changeColor(isShowLine, color) {
+    if (isShowLine) {
+      setColor(color);
+    }
+  }
+  // const {titleLeftComponent,inputProps,} = props
+  return withNativeProps(props, React.createElement("div", {
+    className: "".concat(classPrefix)
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-middleArea"),
+    style: {
+      'borderBottomColor': "".concat(((_a = props.tipProps) === null || _a === void 0 ? void 0 : _a.isShowTip) ? 'red' : color)
+    }
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-middleArea-inputArea")
+  }, props.prefixComponent, props.inputleftComponent, React.createElement(VirtualInput, __assign({
+    onFocus: function () {
+      changeColor(props.isShowLine, 'blue');
+    },
+    onBlur: function () {
+      changeColor(props.isShowLine, '#ebebeb');
+    },
+    value: value
+  }, props.inputProps, {
+    onChange: function (val) {
+      var _a;
+      console.log((_a = props.tipProps) === null || _a === void 0 ? void 0 : _a.isShowTip, 'isShowTIP');
+      // props.tipProps?.isShowTip ? setColor('red') : setColor('blue')
+      setValue(val);
+    }
+  }, props.inputProps)), props.suffixComponent), ((_b = props.unitProps) === null || _b === void 0 ? void 0 : _b.isShowUnit) ? React.createElement("div", {
+    className: "".concat(classPrefix, "-middleArea-unitBox")
+  }, React.createElement("div", {
+    className: "".concat(classPrefix, "-middleArea-unitBox-line")
+  }), React.createElement("div", {
+    className: "".concat(classPrefix, "-middleArea-unitBox-unit")
+  }, props.unitProps.unitComponent)) : React.createElement(React.Fragment, null)), ((_c = props.tipProps) === null || _c === void 0 ? void 0 : _c.isShowTip) ? React.createElement("div", {
+    className: "".concat(classPrefix, "-tipArea")
+  }, props.tipProps.tipComponent) : React.createElement(React.Fragment, null)));
+}

package/es/components/passcode-input/index.d.ts

@@ -0,0 +1,4 @@
+import './passcode-input.less';
+import { PasscodeInput } from './passcode-input';
+export type { PasscodeInputProps, PasscodeInputRef } from './passcode-input';
+export default PasscodeInput;

package/es/components/passcode-input/index.js

@@ -0,0 +1,3 @@
+import "./passcode-input.css";
+import { PasscodeInput } from './passcode-input';
+export default PasscodeInput;