antd-mobile 0.0.0-dev-626cbf51f

package/2x/es/components/virtual-input/virtual-input.css

@@ -0,0 +1,113 @@
+.adm-virtual-input {
+  --font-size: 34px;
+  --color: var(--adm-color-text);
+  --placeholder-color: var(--adm-color-light);
+  --disabled-color: var(--adm-color-weak);
+  --text-align: left;
+  --caret-width: var(--adm-virtual-input-caret-width, 4px);
+  --caret-color: var(--adm-virtual-input-caret-color, var(--adm-color-primary));
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  text-align: var(--text-align);
+  font-size: var(--font-size);
+  line-height: 1.5;
+  white-space: nowrap;
+  color: var(--color);
+}
+
+.adm-virtual-input > * {
+  vertical-align: top;
+}
+
+.adm-virtual-input-content {
+  flex: auto;
+  display: inline-block;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 100%;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+
+.adm-virtual-input-content::-webkit-scrollbar {
+  display: none;
+}
+
+.adm-virtual-input-placeholder {
+  display: block;
+  position: absolute;
+  z-index: 0;
+  left: 0;
+  top: 0;
+  width: 100%;
+  overflow: hidden;
+  text-align: var(--text-align);
+  color: var(--placeholder-color);
+}
+
+.adm-virtual-input-caret-container {
+  display: inline-block;
+  width: var(--caret-width);
+  height: 1.3em;
+  vertical-align: top;
+  margin-right: 2px;
+}
+
+.adm-virtual-input-caret {
+  width: 100%;
+  height: 100%;
+  background-color: var(--caret-color);
+  position: relative;
+  top: 5%;
+}
+
+.adm-virtual-input:focus {
+  outline: none;
+}
+
+.adm-virtual-input:focus .adm-virtual-input-caret {
+  display: block;
+  animation-name: adm-caret-blink;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.adm-virtual-input-disabled {
+  color: var(--disabled-color);
+}
+
+@keyframes adm-caret-blink {
+  from {
+    opacity: 1;
+  }
+
+  60% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.adm-virtual-input-clear {
+  flex: none;
+  margin-left: 16px;
+  color: var(--placeholder-color);
+  padding: 6px;
+  cursor: pointer;
+}
+
+.adm-virtual-input-clear .antd-mobile-icon {
+  display: block;
+  font-size: 28px;
+}

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

@@ -0,0 +1,24 @@
+import React, { ReactElement } from 'react';
+import type { InputProps } from '../input';
+import { NativeProps } from '../../utils/native-props';
+import { NumberKeyboardProps } from '../number-keyboard';
+export declare 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 declare 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, "value" | "onChange" | "disabled" | "placeholder"> & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color"> & React.RefAttributes<VirtualInputRef>>;

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

@@ -0,0 +1,118 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+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';
+const classPrefix = 'adm-virtual-input';
+const defaultProps = {
+  defaultValue: ''
+};
+export const VirtualInput = forwardRef((p, ref) => {
+  const props = mergeProps(defaultProps, p);
+  const [value, setValue] = usePropsValue(props);
+  const rootRef = useRef(null);
+  const contentRef = useRef(null);
+  const [hasFocus, setHasFocus] = useState(false);
+
+  function scrollToEnd() {
+    const root = rootRef.current;
+    if (!root) return;
+
+    if (document.activeElement !== root) {
+      return;
+    }
+
+    const content = contentRef.current;
+    if (!content) return;
+    content.scrollLeft = content.clientWidth;
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    scrollToEnd();
+  }, [value]);
+  useEffect(() => {
+    if (hasFocus) {
+      scrollToEnd();
+    }
+  }, [hasFocus]);
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      var _a;
+
+      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    blur: () => {
+      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);
+  }
+
+  const keyboard = props.keyboard;
+  const keyboardElement = keyboard && React.cloneElement(keyboard, {
+    onInput: v => {
+      var _a, _b;
+
+      setValue(value + v);
+      (_b = (_a = keyboard.props).onInput) === null || _b === void 0 ? void 0 : _b.call(_a, v);
+    },
+    onDelete: () => {
+      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: () => {
+      var _a, _b, _c;
+
+      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      (_c = (_b = keyboard.props).onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
+    },
+    getContainer: null
+  });
+  return withNativeProps(props, React.createElement("div", {
+    ref: rootRef,
+    className: classNames(classPrefix, {
+      [`${classPrefix}-disabled`]: props.disabled
+    }),
+    tabIndex: props.disabled ? undefined : 0,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onClick: props.onClick
+  }, React.createElement("div", {
+    className: `${classPrefix}-content`,
+    ref: contentRef
+  }, value, React.createElement("div", {
+    className: `${classPrefix}-caret-container`
+  }, hasFocus && React.createElement("div", {
+    className: `${classPrefix}-caret`
+  }))), props.clearable && !!value && hasFocus && React.createElement("div", {
+    className: `${classPrefix}-clear`,
+    onClick: e => {
+      var _a;
+
+      e.stopPropagation();
+      setValue('');
+      (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, React.createElement(CloseCircleFill, null)), !value && React.createElement("div", {
+    className: `${classPrefix}-placeholder`
+  }, props.placeholder), keyboardElement));
+});

package/2x/es/components/water-mark/index.d.ts

@@ -0,0 +1,4 @@
+import './water-mark.less';
+import { WaterMark } from './water-mark';
+export type { WaterMarkProps } from './water-mark';
+export default WaterMark;

package/2x/es/components/water-mark/index.js

@@ -0,0 +1,3 @@
+import "./water-mark.css";
+import { WaterMark } from './water-mark';
+export default WaterMark;

package/2x/es/components/water-mark/water-mark.css

@@ -0,0 +1,15 @@
+.adm-water-mark {
+  --z-index: var(--adm-water-mark-z-index, 2000);
+  position: absolute;
+  z-index: var(--z-index);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  background-repeat: repeat;
+}
+
+.adm-water-mark-full-page {
+  position: fixed;
+}

package/2x/es/components/water-mark/water-mark.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type WaterMarkProps = {
+    gapX?: number;
+    gapY?: number;
+    zIndex?: number;
+    width?: number;
+    height?: number;
+    rotate?: number;
+    image?: string;
+    imageWidth?: number;
+    imageHeight?: number;
+    content?: string;
+    fontColor?: string;
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+    fontFamily?: string;
+    fontWeight?: 'normal' | 'light' | 'weight' | number;
+    fontSize?: number | string;
+    fullPage?: boolean;
+} & NativeProps<'--z-index'>;
+export declare const WaterMark: FC<WaterMarkProps>;

package/2x/es/components/water-mark/water-mark.js

@@ -0,0 +1,81 @@
+import classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+const classPrefix = `adm-water-mark`;
+const defaultProps = {
+  fullPage: true
+};
+export const WaterMark = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    zIndex = 2000,
+    gapX = 24,
+    gapY = 48,
+    width = 120,
+    height = 64,
+    rotate = -22,
+    image,
+    imageWidth = 120,
+    imageHeight = 64,
+    content,
+    fontStyle = 'normal',
+    fontWeight = 'normal',
+    fontColor = 'rgba(0,0,0,.15)',
+    fontSize = 14,
+    fontFamily = 'sans-serif'
+  } = props;
+  const [base64Url, setBase64Url] = useState('');
+  useEffect(() => {
+    const canvas = document.createElement('canvas');
+    const ratio = window.devicePixelRatio;
+    const ctx = canvas.getContext('2d');
+    const canvasWidth = `${(gapX + width) * ratio}px`;
+    const canvasHeight = `${(gapY + height) * ratio}px`;
+    const markWidth = width * ratio;
+    const markHeight = height * ratio;
+    canvas.setAttribute('width', canvasWidth);
+    canvas.setAttribute('height', canvasHeight);
+
+    if (ctx) {
+      if (image) {
+        ctx.translate(markWidth / 2, markHeight / 2);
+        ctx.rotate(Math.PI / 180 * Number(rotate));
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.referrerPolicy = 'no-referrer';
+        img.src = image;
+
+        img.onload = () => {
+          ctx.drawImage(img, -imageWidth * ratio / 2, -imageHeight * ratio / 2, imageWidth * ratio, imageHeight * ratio);
+          ctx.restore();
+          setBase64Url(canvas.toDataURL());
+        };
+      } else if (content) {
+        ctx.textBaseline = 'middle';
+        ctx.textAlign = 'center'; // 文字绕中间旋转
+
+        ctx.translate(markWidth / 2, markHeight / 2);
+        ctx.rotate(Math.PI / 180 * Number(rotate));
+        const markSize = Number(fontSize) * ratio;
+        ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
+        ctx.fillStyle = fontColor;
+        ctx.fillText(content, 0, 0);
+        ctx.restore();
+        setBase64Url(canvas.toDataURL());
+      }
+    } else {
+      throw new Error('当前环境不支持Canvas');
+    }
+  }, [gapX, gapY, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize]);
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, {
+      [`${classPrefix}-full-page`]: props.fullPage
+    }),
+    style: {
+      zIndex,
+      backgroundSize: `${gapX + width}px`,
+      backgroundImage: `url('${base64Url}')`
+    }
+  }));
+};

package/2x/es/global/global.css

@@ -0,0 +1,64 @@
+:root {
+  --adm-color-primary: #1677ff;
+  --adm-color-success: #00b578;
+  --adm-color-warning: #ff8f1f;
+  --adm-color-danger: #ff3141;
+  --adm-color-white: #ffffff;
+  --adm-color-weak: #999999;
+  --adm-color-light: #cccccc;
+  --adm-border-color: #eeeeee;
+  --adm-font-size-main: 26px;
+  --adm-color-text: #333333;
+  --adm-hd: 2;
+  --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
+    helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
+    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+}
+
+:root {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+  color: var(--adm-color-text);
+  font-size: var(--adm-font-size-main);
+  font-family: var(--adm-font-family);
+}
+
+a,
+button {
+  cursor: pointer;
+}
+
+a {
+  color: var(--adm-color-primary);
+  transition: opacity ease-in-out 0.2s;
+}
+
+a:active {
+  opacity: 0.8;
+}
+
+.adm-plain-anchor {
+  color: unset;
+  transition: none;
+}
+
+.adm-plain-anchor:active {
+  opacity: unset;
+}
+
+body.adm-overflow-hidden {
+  overflow: hidden !important;
+}
+
+div.adm-px-tester {
+  --size: 1;
+  height: calc(var(--size) / 2 * 4px);
+  width: 0;
+  position: fixed;
+  right: -100vw;
+  bottom: -100vh;
+  user-select: none;
+  pointer-events: none;
+}

package/2x/es/global/index.d.ts

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

package/2x/es/global/index.js

@@ -0,0 +1,8 @@
+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', () => {}, true);
+}

package/2x/es/global/theme.css

@@ -0,0 +1,16 @@
+:root {
+  --adm-color-primary: #1677ff;
+  --adm-color-success: #00b578;
+  --adm-color-warning: #ff8f1f;
+  --adm-color-danger: #ff3141;
+  --adm-color-white: #ffffff;
+  --adm-color-weak: #999999;
+  --adm-color-light: #cccccc;
+  --adm-border-color: #eeeeee;
+  --adm-font-size-main: 26px;
+  --adm-color-text: #333333;
+  --adm-hd: 2;
+  --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
+    helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
+    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+}

package/2x/es/index.d.ts

@@ -0,0 +1,79 @@
+import './global';
+export { setDefaultConfig } from './components/config-provider';
+export { default as ActionSheet } from './components/action-sheet';
+export { default as AutoCenter } from './components/auto-center';
+export { default as Avatar } from './components/avatar';
+export { default as Badge } from './components/badge';
+export { default as Button } from './components/button';
+export { default as Calendar } from './components/calendar';
+export { default as CapsuleTabs } from './components/capsule-tabs';
+export { default as Card } from './components/card';
+export { default as CascadePicker } from './components/cascade-picker';
+export { default as CascadePickerView } from './components/cascade-picker-view';
+export { default as Cascader } from './components/cascader';
+export { default as CascaderView } from './components/cascader-view';
+export { default as CheckList } from './components/check-list';
+export { default as Checkbox } from './components/checkbox';
+export { default as Collapse } from './components/collapse';
+export { default as ConfigProvider } from './components/config-provider';
+export { default as DatePicker } from './components/date-picker';
+export { default as DatePickerView } from './components/date-picker-view';
+export { default as Dialog } from './components/dialog';
+export { default as Divider } from './components/divider';
+export { default as DotLoading } from './components/dot-loading';
+export { default as Dropdown } from './components/dropdown';
+export { default as Ellipsis } from './components/ellipsis';
+export { default as Empty } from './components/empty';
+export { default as ErrorBlock } from './components/error-block';
+export { default as FloatingBubble } from './components/floating-bubble';
+export { default as FloatingPanel } from './components/floating-panel';
+export { default as Form } from './components/form';
+export { default as Grid } from './components/grid';
+export { default as Image } from './components/image';
+export { default as ImageUploader } from './components/image-uploader';
+export { default as ImageViewer } from './components/image-viewer';
+export { default as IndexBar } from './components/index-bar';
+export { default as InfiniteScroll } from './components/infinite-scroll';
+export { default as Input } from './components/input';
+export { default as JumboTabs } from './components/jumbo-tabs';
+export { default as List } from './components/list';
+export { default as Loading } from './components/loading';
+export { default as Mask } from './components/mask';
+export { default as Modal } from './components/modal';
+export { default as NavBar } from './components/nav-bar';
+export { default as NoticeBar } from './components/notice-bar';
+export { default as NumberKeyboard } from './components/number-keyboard';
+export { default as PageIndicator } from './components/page-indicator';
+export { default as PasscodeInput } from './components/passcode-input';
+export { default as Picker } from './components/picker';
+export { default as PickerView } from './components/picker-view';
+export { default as Popover } from './components/popover';
+export { default as Popup } from './components/popup';
+export { default as ProgressBar } from './components/progress-bar';
+export { default as ProgressCircle } from './components/progress-circle';
+export { default as PullToRefresh } from './components/pull-to-refresh';
+export { default as Radio } from './components/radio';
+export { default as Rate } from './components/rate';
+export { default as Result } from './components/result';
+export { default as SafeArea } from './components/safe-area';
+export { default as ScrollMask } from './components/scroll-mask';
+export { default as SearchBar } from './components/search-bar';
+export { default as Selector } from './components/selector';
+export { default as SideBar } from './components/side-bar';
+export { default as Skeleton } from './components/skeleton';
+export { default as Slider } from './components/slider';
+export { default as Space } from './components/space';
+export { default as SpinLoading } from './components/spin-loading';
+export { default as Stepper } from './components//stepper';
+export { default as Steps } from './components/steps';
+export { default as SwipeAction } from './components/swipe-action';
+export { default as Swiper } from './components/swiper';
+export { default as Switch } from './components/switch';
+export { default as TabBar } from './components/tab-bar';
+export { default as Tabs } from './components/tabs';
+export { default as Tag } from './components/tag';
+export { default as TextArea } from './components/text-area';
+export { default as Toast } from './components/toast';
+export { default as TreeSelect } from './components/tree-select';
+export { default as VirtualInput } from './components/virtual-input';
+export { default as WaterMark } from './components/water-mark';

package/2x/es/index.js

@@ -0,0 +1,79 @@
+import './global';
+export { setDefaultConfig } from './components/config-provider';
+export { default as ActionSheet } from './components/action-sheet';
+export { default as AutoCenter } from './components/auto-center';
+export { default as Avatar } from './components/avatar';
+export { default as Badge } from './components/badge';
+export { default as Button } from './components/button';
+export { default as Calendar } from './components/calendar';
+export { default as CapsuleTabs } from './components/capsule-tabs';
+export { default as Card } from './components/card';
+export { default as CascadePicker } from './components/cascade-picker';
+export { default as CascadePickerView } from './components/cascade-picker-view';
+export { default as Cascader } from './components/cascader';
+export { default as CascaderView } from './components/cascader-view';
+export { default as CheckList } from './components/check-list';
+export { default as Checkbox } from './components/checkbox';
+export { default as Collapse } from './components/collapse';
+export { default as ConfigProvider } from './components/config-provider';
+export { default as DatePicker } from './components/date-picker';
+export { default as DatePickerView } from './components/date-picker-view';
+export { default as Dialog } from './components/dialog';
+export { default as Divider } from './components/divider';
+export { default as DotLoading } from './components/dot-loading';
+export { default as Dropdown } from './components/dropdown';
+export { default as Ellipsis } from './components/ellipsis';
+export { default as Empty } from './components/empty';
+export { default as ErrorBlock } from './components/error-block';
+export { default as FloatingBubble } from './components/floating-bubble';
+export { default as FloatingPanel } from './components/floating-panel';
+export { default as Form } from './components/form';
+export { default as Grid } from './components/grid';
+export { default as Image } from './components/image';
+export { default as ImageUploader } from './components/image-uploader';
+export { default as ImageViewer } from './components/image-viewer';
+export { default as IndexBar } from './components/index-bar';
+export { default as InfiniteScroll } from './components/infinite-scroll';
+export { default as Input } from './components/input';
+export { default as JumboTabs } from './components/jumbo-tabs';
+export { default as List } from './components/list';
+export { default as Loading } from './components/loading';
+export { default as Mask } from './components/mask';
+export { default as Modal } from './components/modal';
+export { default as NavBar } from './components/nav-bar';
+export { default as NoticeBar } from './components/notice-bar';
+export { default as NumberKeyboard } from './components/number-keyboard';
+export { default as PageIndicator } from './components/page-indicator';
+export { default as PasscodeInput } from './components/passcode-input';
+export { default as Picker } from './components/picker';
+export { default as PickerView } from './components/picker-view';
+export { default as Popover } from './components/popover';
+export { default as Popup } from './components/popup';
+export { default as ProgressBar } from './components/progress-bar';
+export { default as ProgressCircle } from './components/progress-circle';
+export { default as PullToRefresh } from './components/pull-to-refresh';
+export { default as Radio } from './components/radio';
+export { default as Rate } from './components/rate';
+export { default as Result } from './components/result';
+export { default as SafeArea } from './components/safe-area';
+export { default as ScrollMask } from './components/scroll-mask';
+export { default as SearchBar } from './components/search-bar';
+export { default as Selector } from './components/selector';
+export { default as SideBar } from './components/side-bar';
+export { default as Skeleton } from './components/skeleton';
+export { default as Slider } from './components/slider';
+export { default as Space } from './components/space';
+export { default as SpinLoading } from './components/spin-loading';
+export { default as Stepper } from './components//stepper';
+export { default as Steps } from './components/steps';
+export { default as SwipeAction } from './components/swipe-action';
+export { default as Swiper } from './components/swiper';
+export { default as Switch } from './components/switch';
+export { default as TabBar } from './components/tab-bar';
+export { default as Tabs } from './components/tabs';
+export { default as Tag } from './components/tag';
+export { default as TextArea } from './components/text-area';
+export { default as Toast } from './components/toast';
+export { default as TreeSelect } from './components/tree-select';
+export { default as VirtualInput } from './components/virtual-input';
+export { default as WaterMark } from './components/water-mark';