antd-mobile 5.17.0 → 5.18.0

package/es/components/tab-bar/tab-bar.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import Badge from '../badge';
+import SafeArea from '../safe-area';
+import { usePropsValue } from '../../utils/use-props-value';
+import { traverseReactNode } from '../../utils/traverse-react-node';
+/* istanbul ignore next */
+
+export const TabBarItem = () => {
+  return null;
+};
+const classPrefix = `adm-tab-bar`;
+const defaultProps = {
+  safeArea: false
+};
+export const TabBar = p => {
+  var _a;
+
+  const props = mergeProps(defaultProps, p);
+  let firstActiveKey = null;
+  const items = [];
+  traverseReactNode(props.children, (child, index) => {
+    if (!React.isValidElement(child)) return;
+    const key = child.key;
+    if (typeof key !== 'string') return;
+
+    if (index === 0) {
+      firstActiveKey = key;
+    }
+
+    items.push(child);
+  });
+  const [activeKey, setActiveKey] = usePropsValue({
+    value: props.activeKey,
+    defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : firstActiveKey,
+    onChange: v => {
+      var _a;
+
+      if (v === null) return;
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
+    }
+  });
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, React.createElement("div", {
+    className: `${classPrefix}-wrap`
+  }, items.map(item => {
+    const active = item.key === activeKey;
+
+    function renderContent() {
+      const iconElement = item.props.icon && React.createElement("div", {
+        className: `${classPrefix}-item-icon`
+      }, typeof item.props.icon === 'function' ? item.props.icon(active) : item.props.icon);
+      const titleElement = item.props.title && React.createElement("div", {
+        className: classNames(`${classPrefix}-item-title`, Boolean(iconElement) && `${classPrefix}-item-title-with-icon`)
+      }, typeof item.props.title === 'function' ? item.props.title(active) : item.props.title);
+
+      if (iconElement) {
+        return React.createElement(React.Fragment, null, React.createElement(Badge, {
+          content: item.props.badge,
+          className: `${classPrefix}-icon-badge`
+        }, iconElement), titleElement);
+      } else if (titleElement) {
+        return React.createElement(Badge, {
+          content: item.props.badge,
+          className: `${classPrefix}-title-badge`
+        }, titleElement);
+      }
+
+      return null;
+    }
+
+    return withNativeProps(item.props, React.createElement("div", {
+      key: item.key,
+      onClick: () => {
+        const {
+          key
+        } = item;
+        if (key === undefined || key === null) return;
+        setActiveKey(key.toString());
+      },
+      className: classNames(`${classPrefix}-item`, {
+        [`${classPrefix}-item-active`]: active
+      })
+    }, renderContent()));
+  })), props.safeArea && React.createElement(SafeArea, {
+    position: 'bottom'
+  })));
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './tabs.less';
+export type { TabsProps, TabProps } from './tabs';
+declare const _default: import("react").FC<import("./tabs").TabsProps> & {
+    Tab: import("react").FC<import("./tabs").TabProps>;
+};
+export default _default;

package/es/components/tabs/index.js

@@ -0,0 +1,6 @@
+import "./tabs.css";
+import { Tab, Tabs } from './tabs';
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+export default attachPropertiesToComponent(Tabs, {
+  Tab
+});

package/es/components/tabs/tabs.css

@@ -0,0 +1,76 @@
+.adm-tabs {
+  --title-font-size: var(--adm-font-size-9);
+  --content-padding: 12px;
+  --active-line-height: 2px;
+  --active-line-border-radius: var(--active-line-height);
+  --active-line-color: var(--adm-color-primary);
+  --active-title-color: var(--adm-color-primary);
+  position: relative;
+  min-width: 0;
+}
+.adm-tabs-header {
+  position: relative;
+  border-bottom: solid 1px var(--adm-color-border);
+}
+.adm-tabs-tab-list {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+.adm-tabs-tab-list::-webkit-scrollbar {
+  display: none;
+}
+.adm-tabs-tab-wrapper {
+  padding: 0 12px;
+}
+.adm-tabs-tab-wrapper-stretch {
+  flex: auto;
+}
+.adm-tabs-tab {
+  white-space: nowrap;
+  padding: 8px 0 10px;
+  width: -webkit-min-content;
+  width: min-content;
+  margin: 0 auto;
+  font-size: var(--title-font-size);
+  position: relative;
+  cursor: pointer;
+}
+.adm-tabs-tab-active {
+  color: var(--active-title-color);
+}
+.adm-tabs-tab-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.adm-tabs-tab-line {
+  position: absolute;
+  bottom: 0;
+  height: var(--active-line-height);
+  background: var(--active-line-color);
+  border-radius: var(--active-line-border-radius);
+}
+.adm-tabs-content {
+  padding: var(--content-padding);
+}
+.adm-tabs-header-mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 30px;
+  height: 100%;
+  pointer-events: none;
+}
+.adm-tabs-header-mask-left {
+  left: 0;
+  background: linear-gradient(to right, var(--adm-color-background), rgba(255, 255, 255, 0));
+}
+.adm-tabs-header-mask-right {
+  right: 0;
+  background: linear-gradient(to left, var(--adm-color-background), rgba(255, 255, 255, 0));
+}

package/es/components/tabs/tabs.d.ts

@@ -0,0 +1,19 @@
+import React, { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type TabProps = {
+    title: ReactNode;
+    disabled?: boolean;
+    forceRender?: boolean;
+    destroyOnClose?: boolean;
+    children?: ReactNode;
+} & NativeProps;
+export declare const Tab: FC<TabProps>;
+export declare type TabsProps = {
+    activeKey?: string | null;
+    defaultActiveKey?: string | null;
+    activeLineMode?: 'auto' | 'full' | 'fixed';
+    stretch?: boolean;
+    onChange?: (key: string) => void;
+    children?: React.ReactNode;
+} & NativeProps<'--fixed-active-line-width' | '--active-line-height' | '--active-line-border-radius' | '--title-font-size' | '--content-padding' | '--active-title-color' | '--active-line-color'>;
+export declare const Tabs: FC<TabsProps>;

package/es/components/tabs/tabs.js

@@ -0,0 +1,243 @@
+import React, { useRef } from 'react';
+import classNames from 'classnames';
+import { useSpring, animated } from '@react-spring/web';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { bound } from '../../utils/bound';
+import { useThrottleFn, useIsomorphicLayoutEffect } from 'ahooks';
+import { useMutationEffect } from '../../utils/use-mutation-effect';
+import { useResizeEffect } from '../../utils/use-resize-effect';
+import { mergeProps } from '../../utils/with-default-props';
+import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
+import { ShouldRender } from '../../utils/should-render';
+import { traverseReactNode } from '../../utils/traverse-react-node';
+const classPrefix = `adm-tabs`;
+export const Tab = () => {
+  return null;
+};
+const defaultProps = {
+  activeLineMode: 'auto',
+  stretch: true
+};
+export const Tabs = p => {
+  var _a;
+
+  const props = mergeProps(defaultProps, p);
+  const tabListContainerRef = useRef(null);
+  const activeLineRef = useRef(null);
+  const keyToIndexRecord = {};
+  let firstActiveKey = null;
+  const panes = [];
+  traverseReactNode(props.children, (child, index) => {
+    if (!React.isValidElement(child)) return;
+    const key = child.key;
+    if (typeof key !== 'string') return;
+
+    if (index === 0) {
+      firstActiveKey = key;
+    }
+
+    const length = panes.push(child);
+    keyToIndexRecord[key] = length - 1;
+  });
+  const [activeKey, setActiveKey] = usePropsValue({
+    value: props.activeKey,
+    defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : firstActiveKey,
+    onChange: v => {
+      var _a;
+
+      if (v === null) return;
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
+    }
+  });
+  const [{
+    x,
+    width
+  }, api] = useSpring(() => ({
+    x: 0,
+    width: 0,
+    config: {
+      tension: 300,
+      clamp: true
+    }
+  }));
+  const [{
+    scrollLeft
+  }, scrollApi] = useSpring(() => ({
+    scrollLeft: 0,
+    config: {
+      tension: 300,
+      clamp: true
+    }
+  }));
+  const [{
+    leftMaskOpacity,
+    rightMaskOpacity
+  }, maskApi] = useSpring(() => ({
+    leftMaskOpacity: 0,
+    rightMaskOpacity: 0,
+    config: {
+      clamp: true
+    }
+  }));
+
+  function animate(immediate = false) {
+    const container = tabListContainerRef.current;
+    if (!container) return;
+    const activeIndex = keyToIndexRecord[activeKey];
+
+    if (activeIndex === undefined) {
+      api.start({
+        x: 0,
+        width: 0,
+        immediate: true
+      });
+      return;
+    }
+
+    const activeLine = activeLineRef.current;
+    if (!activeLine) return;
+    const activeTabWrapper = container.children.item(activeIndex + 1);
+    const activeTab = activeTabWrapper.children.item(0);
+    const activeTabLeft = activeTab.offsetLeft;
+    const activeTabWidth = activeTab.offsetWidth;
+    const activeTabWrapperLeft = activeTabWrapper.offsetLeft;
+    const activeTabWrapperWidth = activeTabWrapper.offsetWidth;
+    const containerWidth = container.offsetWidth;
+    const containerScrollWidth = container.scrollWidth;
+    const containerScrollLeft = container.scrollLeft;
+    const activeLineWidth = activeLine.offsetWidth;
+    let x = 0;
+    let width = 0;
+
+    if (props.activeLineMode === 'auto') {
+      x = activeTabLeft;
+      width = activeTabWidth;
+    } else if (props.activeLineMode === 'full') {
+      x = activeTabWrapperLeft;
+      width = activeTabWrapperWidth;
+    } else {
+      x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+    }
+
+    api.start({
+      x,
+      width,
+      immediate
+    });
+    const maxScrollDistance = containerScrollWidth - containerWidth;
+    if (maxScrollDistance <= 0) return;
+    const nextScrollLeft = bound(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, containerScrollWidth - containerWidth);
+    scrollApi.start({
+      scrollLeft: nextScrollLeft,
+      from: {
+        scrollLeft: containerScrollLeft
+      },
+      immediate
+    });
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    animate(!x.isAnimating);
+  }, []);
+  useIsomorphicUpdateLayoutEffect(() => {
+    animate();
+  }, [activeKey]);
+  useResizeEffect(() => {
+    animate(!x.isAnimating);
+  }, tabListContainerRef);
+  useMutationEffect(() => {
+    animate(!x.isAnimating);
+  }, tabListContainerRef, {
+    subtree: true,
+    childList: true,
+    characterData: true
+  });
+  const {
+    run: updateMask
+  } = useThrottleFn((immediate = false) => {
+    const container = tabListContainerRef.current;
+    if (!container) return;
+    const scrollLeft = container.scrollLeft;
+    const showLeftMask = scrollLeft > 0;
+    const showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
+    maskApi.start({
+      leftMaskOpacity: showLeftMask ? 1 : 0,
+      rightMaskOpacity: showRightMask ? 1 : 0,
+      immediate
+    });
+  }, {
+    wait: 100,
+    trailing: true,
+    leading: true
+  });
+  useIsomorphicLayoutEffect(() => {
+    updateMask(true);
+  }, []);
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, React.createElement("div", {
+    className: `${classPrefix}-header`
+  }, React.createElement(animated.div, {
+    className: classNames(`${classPrefix}-header-mask`, `${classPrefix}-header-mask-left`),
+    style: {
+      opacity: leftMaskOpacity
+    }
+  }), React.createElement(animated.div, {
+    className: classNames(`${classPrefix}-header-mask`, `${classPrefix}-header-mask-right`),
+    style: {
+      opacity: rightMaskOpacity
+    }
+  }), React.createElement(animated.div, {
+    className: `${classPrefix}-tab-list`,
+    ref: tabListContainerRef,
+    scrollLeft: scrollLeft,
+    onScroll: updateMask
+  }, React.createElement(animated.div, {
+    ref: activeLineRef,
+    className: `${classPrefix}-tab-line`,
+    style: {
+      width: props.activeLineMode === 'fixed' ? 'var(--fixed-active-line-width, 30px)' : width,
+      x
+    }
+  }), panes.map(pane => withNativeProps(pane.props, React.createElement("div", {
+    key: pane.key,
+    className: classNames(`${classPrefix}-tab-wrapper`, {
+      [`${classPrefix}-tab-wrapper-stretch`]: props.stretch
+    })
+  }, React.createElement("div", {
+    onClick: () => {
+      const {
+        key
+      } = pane;
+      if (pane.props.disabled) return;
+
+      if (key === undefined || key === null) {
+        return;
+      }
+
+      setActiveKey(key.toString());
+    },
+    className: classNames(`${classPrefix}-tab`, {
+      [`${classPrefix}-tab-active`]: pane.key === activeKey,
+      [`${classPrefix}-tab-disabled`]: pane.props.disabled
+    })
+  }, pane.props.title)))))), panes.map(pane => {
+    if (pane.props.children === undefined) {
+      return null;
+    }
+
+    const active = pane.key === activeKey;
+    return React.createElement(ShouldRender, {
+      key: pane.key,
+      active: active,
+      forceRender: pane.props.forceRender,
+      destroyOnClose: pane.props.destroyOnClose
+    }, React.createElement("div", {
+      className: `${classPrefix}-content`,
+      style: {
+        display: active ? 'block' : 'none'
+      }
+    }, pane.props.children));
+  })));
+};

package/es/components/tabs/tabs.patch.css

@@ -0,0 +1,23 @@
+.adm-tabs-header {
+  border-bottom: solid 1px #eeeeee;
+}
+.adm-tabs-tab {
+  font-size: 17px;
+}
+.adm-tabs-tab-active {
+  color: #1677ff;
+}
+.adm-tabs-tab-line {
+  height: 2px;
+  background: #1677ff;
+  border-radius: 2px;
+}
+.adm-tabs-content {
+  padding: 12px;
+}
+.adm-tabs-header-mask-left {
+  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+}
+.adm-tabs-header-mask-right {
+  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+}

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

@@ -0,0 +1,4 @@
+import './tag.less';
+import { Tag } from './tag';
+export type { TagProps } from './tag';
+export default Tag;

package/es/components/tag/index.js

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

package/es/components/tag/tag.css

@@ -0,0 +1,17 @@
+.adm-tag {
+  --border-radius: var(--adm-tag-border-radius, 2px);
+  padding: 2px 4px;
+  font-size: var(--adm-font-size-3);
+  line-height: 1;
+  font-weight: normal;
+  background: var(--background-color);
+  color: var(--text-color);
+  display: inline-block;
+  white-space: nowrap;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+  box-sizing: border-box;
+}
+.adm-tag-round {
+  border-radius: 100px;
+}

package/es/components/tag/tag.d.ts

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type TagProps = {
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | (string & {});
+    fill?: 'solid' | 'outline';
+    round?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+    children?: React.ReactNode;
+} & NativeProps<'--border-color' | '--background-color' | '--text-color' | '--border-radius'>;
+export declare const Tag: FC<TagProps>;

package/es/components/tag/tag.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { mergeProps } from '../../utils/with-default-props';
+import { withNativeProps } from '../../utils/native-props';
+import classNames from 'classnames';
+const classPrefix = `adm-tag`;
+const colorRecord = {
+  default: '#666666',
+  primary: 'var(--adm-color-primary, #1677ff)',
+  success: 'var(--adm-color-success, #00b578)',
+  warning: 'var(--adm-color-warning, #ff8f1f)',
+  danger: 'var(--adm-color-danger, #ff3141)'
+};
+const defaultProps = {
+  color: 'default',
+  fill: 'solid',
+  round: false
+};
+export const Tag = p => {
+  var _a;
+
+  const props = mergeProps(defaultProps, p);
+  const color = (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color;
+  const style = {
+    '--border-color': color,
+    '--text-color': props.fill === 'outline' ? color : '#ffffff',
+    '--background-color': props.fill === 'outline' ? 'transparent' : color
+  };
+  return withNativeProps(props, React.createElement("span", {
+    style: style,
+    onClick: props.onClick,
+    className: classNames(classPrefix, {
+      [`${classPrefix}-round`]: props.round
+    })
+  }, props.children));
+};

package/es/components/text-area/index.d.ts

@@ -0,0 +1,4 @@
+import './text-area.less';
+import { TextArea } from './text-area';
+export type { TextAreaProps, TextAreaRef } from './text-area';
+export default TextArea;

package/es/components/text-area/index.js

@@ -0,0 +1,3 @@
+import "./text-area.css";
+import { TextArea } from './text-area';
+export default TextArea;

package/es/components/text-area/text-area.css

@@ -0,0 +1,68 @@
+.adm-text-area {
+  --font-size: var(--adm-font-size-9);
+  --color: var(--adm-color-text);
+  --placeholder-color: var(--adm-color-light);
+  --disabled-color: var(--adm-color-weak);
+  --text-align: left;
+  --count-text-align: right;
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+.adm-text-area-element {
+  font-family: var(--adm-font-family);
+  resize: none;
+  flex: auto;
+  display: 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-text-area-element::-webkit-input-placeholder {
+  color: var(--placeholder-color);
+  font-family: inherit;
+}
+.adm-text-area-element::placeholder {
+  color: var(--placeholder-color);
+  font-family: inherit;
+}
+.adm-text-area-element:-webkit-autofill {
+  background-color: transparent;
+}
+.adm-text-area-element:disabled {
+  color: var(--disabled-color);
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: var(--disabled-color);
+}
+.adm-text-area-element:read-only {
+  cursor: default;
+}
+.adm-text-area-element:invalid {
+  box-shadow: none;
+}
+.adm-text-area-element::-ms-clear {
+  display: none;
+}
+.adm-text-area-element[readonly] {
+  pointer-events: none;
+}
+.adm-text-area-count {
+  text-align: var(--count-text-align);
+  color: var(--adm-color-weak);
+  font-size: var(--adm-font-size-9);
+  padding-top: 8px;
+}

package/es/components/text-area/text-area.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'autoFocus' | 'disabled' | 'readOnly' | 'name' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick'> & {
+    onChange?: (val: string) => void;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    rows?: number;
+    maxLength?: number;
+    showCount?: boolean | ((length: number, maxLength?: number) => ReactNode);
+    autoSize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    id?: string;
+} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align' | '--count-text-align'>;
+export declare type TextAreaRef = {
+    clear: () => void;
+    focus: () => void;
+    blur: () => void;
+    nativeElement: HTMLTextAreaElement | null;
+};
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "name" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "autoFocus" | "readOnly"> & {
+    onChange?: ((val: string) => void) | undefined;
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    placeholder?: string | undefined;
+    rows?: number | undefined;
+    maxLength?: number | undefined;
+    showCount?: boolean | ((length: number, maxLength?: number | undefined) => ReactNode) | undefined;
+    autoSize?: boolean | {
+        minRows?: number | undefined;
+        maxRows?: number | undefined;
+    } | undefined;
+    id?: string | undefined;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--count-text-align", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<TextAreaRef>>;