antd-mobile 5.17.0 → 5.18.0

package/2x/es/components/stepper/stepper.js

@@ -0,0 +1,164 @@
+import classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import { MinusOutline, AddOutline } from 'antd-mobile-icons';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { mergeProps } from '../../utils/with-default-props';
+import { bound } from '../../utils/bound';
+import Input from '../input';
+import Button from '../button';
+import Big from 'big.js';
+import { useConfig } from '../config-provider';
+const classPrefix = `adm-stepper`;
+const defaultProps = {
+  defaultValue: 0,
+  step: 1,
+  disabled: false,
+  allowEmpty: false
+};
+export const Stepper = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    disabled,
+    step,
+    max,
+    min,
+    inputReadOnly
+  } = props;
+  const {
+    locale
+  } = useConfig();
+  const [value, setValue] = usePropsValue(props);
+  const [inputValue, setInputValue] = useState(() => convertValueToText(value, props.digits));
+
+  function setValueWithCheck(v) {
+    if (isNaN(v)) return;
+    let target = bound(v, props.min, props.max);
+
+    if (props.digits !== undefined) {
+      target = parseFloat(target.toFixed(props.digits));
+    }
+
+    setValue(target);
+  }
+
+  const [hasFocus, setHasFocus] = useState(false);
+  useEffect(() => {
+    if (!hasFocus) {
+      setInputValue(convertValueToText(value, props.digits));
+    }
+  }, [hasFocus]);
+  useEffect(() => {
+    if (!hasFocus) {
+      setInputValue(convertValueToText(value, props.digits));
+    }
+  }, [value, props.digits]);
+
+  const handleInputChange = v => {
+    setInputValue(v);
+    const value = convertTextToValue(v);
+
+    if (value === null) {
+      if (props.allowEmpty) {
+        setValue(null);
+      } else {
+        setValue(props.defaultValue);
+      }
+    } else {
+      setValueWithCheck(value);
+    }
+  };
+
+  const handleMinus = () => {
+    setValueWithCheck(Big(value !== null && value !== void 0 ? value : 0).minus(step).toNumber());
+  };
+
+  const handlePlus = () => {
+    setValueWithCheck(Big(value !== null && value !== void 0 ? value : 0).add(step).toNumber());
+  };
+
+  const minusDisabled = () => {
+    if (disabled) return true;
+    if (value === null) return false;
+
+    if (min !== undefined) {
+      return value <= min;
+    }
+
+    return false;
+  };
+
+  const plusDisabled = () => {
+    if (disabled) return true;
+    if (value === null) return false;
+
+    if (max !== undefined) {
+      return value >= max;
+    }
+
+    return false;
+  };
+
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, {
+      [`${classPrefix}-active`]: hasFocus
+    })
+  }, React.createElement(Button, {
+    className: `${classPrefix}-minus`,
+    onClick: handleMinus,
+    disabled: minusDisabled(),
+    fill: 'none',
+    shape: 'rectangular',
+    color: 'primary',
+    "aria-label": locale.Stepper.decrease
+  }, React.createElement(MinusOutline, null)), React.createElement("div", {
+    className: `${classPrefix}-middle`
+  }, React.createElement(Input, {
+    className: `${classPrefix}-input`,
+    onFocus: e => {
+      var _a;
+
+      setHasFocus(true);
+      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    },
+    value: inputValue,
+    onChange: val => {
+      disabled || handleInputChange(val);
+    },
+    disabled: disabled,
+    onBlur: e => {
+      var _a;
+
+      setHasFocus(false);
+      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    },
+    readOnly: inputReadOnly,
+    role: 'spinbutton',
+    "aria-valuenow": Number(inputValue),
+    "aria-valuemax": max,
+    "aria-valuemin": min
+  })), React.createElement(Button, {
+    className: `${classPrefix}-plus`,
+    onClick: handlePlus,
+    disabled: plusDisabled(),
+    fill: 'none',
+    shape: 'rectangular',
+    color: 'primary',
+    "aria-label": locale.Stepper.increase
+  }, React.createElement(AddOutline, null))));
+};
+
+function convertValueToText(value, digits) {
+  if (value === null) return '';
+
+  if (digits !== undefined) {
+    return value.toFixed(digits);
+  } else {
+    return value.toString();
+  }
+}
+
+function convertTextToValue(text) {
+  if (text === '') return null;
+  return parseFloat(text);
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './steps.less';
+export type { StepsProps } from './steps';
+export type { StepProps } from './step';
+declare const _default: import("react").FC<import("./steps").StepsProps> & {
+    Step: import("react").FC<import("./step").StepProps>;
+};
+export default _default;

package/2x/es/components/steps/index.js

@@ -0,0 +1,7 @@
+import "./steps.css";
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { Step } from './step';
+import { Steps } from './steps';
+export default attachPropertiesToComponent(Steps, {
+  Step
+});

package/2x/es/components/steps/step.d.ts

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type StepProps = {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    status?: 'wait' | 'process' | 'finish' | 'error';
+} & NativeProps;
+export declare const Step: FC<StepProps>;

package/2x/es/components/steps/step.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+const classPrefix = `adm-step`;
+export const Step = props => {
+  const {
+    title,
+    description,
+    icon,
+    status = 'wait'
+  } = props;
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(`${classPrefix}`, `${classPrefix}-status-${status}`)
+  }, React.createElement("div", {
+    className: `${classPrefix}-indicator`
+  }, React.createElement("div", {
+    className: `${classPrefix}-icon-container`
+  }, icon)), React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, React.createElement("div", {
+    className: `${classPrefix}-title`
+  }, title), !!description && React.createElement("div", {
+    className: `${classPrefix}-description`
+  }, description))));
+};

package/2x/es/components/steps/steps.css

@@ -0,0 +1,176 @@
+.adm-step {
+  --line-to-next-color: #e5e5e5;
+  --icon-color: #e5e5e5;
+}
+
+.adm-step .adm-step-indicator {
+  position: relative;
+}
+
+.adm-step .adm-step-indicator::after {
+  content: '';
+  position: absolute;
+  z-index: 0;
+  background-color: var(--line-to-next-color);
+}
+
+.adm-step .adm-step-indicator .adm-step-icon-container {
+  position: absolute;
+  z-index: 1;
+  background: var(--adm-color-background);
+  color: var(--icon-color);
+}
+
+.adm-step .adm-step-indicator .adm-step-icon-container > .antd-mobile-icon {
+  display: block;
+}
+
+.adm-step:last-child .adm-step-indicator::after {
+  display: none;
+}
+
+.adm-step-status-finish {
+  --line-to-next-color: var(--adm-color-primary);
+}
+
+.adm-step-status-wait {
+  --icon-color: #e5e5e5;
+}
+
+.adm-step-status-wait .adm-step-title {
+  color: var(--adm-color-weak);
+}
+
+.adm-step-status-process {
+  --icon-color: var(--adm-color-primary);
+}
+
+.adm-step-status-process .adm-step-title {
+  color: var(--adm-color-primary);
+}
+
+.adm-step-status-finish {
+  --icon-color: var(--adm-color-primary);
+}
+
+.adm-step-status-error {
+  --icon-color: var(--adm-color-danger);
+}
+
+.adm-step-status-error .adm-step-title {
+  color: var(--adm-color-danger);
+}
+
+.adm-steps {
+  --title-font-size: var(--adm-font-size-main);
+  --description-font-size: var(--adm-font-size-4);
+  --indicator-margin-right: 0;
+  --icon-size: 36px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.adm-steps-horizontal {
+  display: flex;
+  justify-content: space-around;
+  padding: 16px 0;
+}
+
+.adm-steps-horizontal .adm-step {
+  flex: 1;
+}
+
+.adm-steps-horizontal .adm-step .adm-step-indicator {
+  width: 100%;
+  height: 48px;
+}
+
+.adm-steps-horizontal .adm-step .adm-step-indicator::after {
+  left: 50%;
+  top: 50%;
+  height: 2px;
+  transform: translateY(-50%);
+  width: 100%;
+}
+
+.adm-steps-horizontal .adm-step .adm-step-indicator .adm-step-icon-container {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.adm-steps-horizontal .adm-step-content {
+  text-align: center;
+  font-size: var(--description-font-size);
+  padding: 4px 16px 0;
+}
+
+.adm-steps-horizontal .adm-step-content .adm-step-title {
+  font-size: var(--title-font-size);
+}
+
+.adm-steps-horizontal .adm-step-content .adm-step-description {
+  margin-top: 8px;
+  color: var(--adm-color-weak);
+}
+
+.adm-steps-vertical {
+  padding: 16px 32px;
+}
+
+.adm-steps-vertical .adm-step {
+  display: flex;
+  align-items: stretch;
+}
+
+.adm-steps-vertical .adm-step .adm-step-indicator {
+  flex: none;
+  width: 48px;
+  margin-right: var(--indicator-margin-right);
+}
+
+.adm-steps-vertical .adm-step .adm-step-indicator::after {
+  left: 50%;
+  top: calc(var(--title-font-size) * 1.5 / 2);
+  width: 2px;
+  transform: translateX(-50%);
+  height: 100%;
+}
+
+.adm-steps-vertical .adm-step .adm-step-indicator .adm-step-icon-container {
+  top: calc(var(--title-font-size) * 1.5 / 2);
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.adm-steps-vertical .adm-step:last-child .adm-step-content {
+  padding-bottom: 0;
+}
+
+.adm-steps-vertical .adm-step .adm-step-content {
+  flex: auto;
+  padding-bottom: 48px;
+}
+
+.adm-steps-vertical .adm-step .adm-step-content .adm-step-title {
+  font-size: var(--title-font-size);
+  line-height: 1.5;
+}
+
+.adm-steps-vertical .adm-step .adm-step-content .adm-step-description {
+  padding-top: 8px;
+  font-size: var(--description-font-size);
+  color: var(--adm-color-weak);
+}
+
+.adm-step-icon-container {
+  font-size: var(--icon-size);
+}
+
+.adm-step-icon-dot {
+  display: block;
+  width: 16px;
+  height: 16px;
+  background: currentColor;
+  border-radius: 8px;
+}

package/2x/es/components/steps/steps.d.ts

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+declare type Direction = 'horizontal' | 'vertical';
+export declare type StepsProps = {
+    current?: number;
+    direction?: Direction;
+    children?: React.ReactNode;
+} & NativeProps<'--title-font-size' | '--description-font-size' | '--indicator-margin-right' | '--icon-size'>;
+export declare const Steps: FC<StepsProps>;
+export {};

package/2x/es/components/steps/steps.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import classNames from 'classnames';
+import { mergeProps } from '../../utils/with-default-props';
+import { withNativeProps } from '../../utils/native-props';
+const classPrefix = `adm-steps`;
+const stepClassPrefix = `adm-step`;
+const defaultIcon = React.createElement("span", {
+  className: `${stepClassPrefix}-icon-dot`
+});
+const defaultProps = {
+  current: 0,
+  direction: 'horizontal'
+};
+export const Steps = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    direction,
+    current
+  } = props;
+  const classString = classNames(classPrefix, `${classPrefix}-${direction}`);
+  return withNativeProps(props, React.createElement("div", {
+    className: classString
+  }, React.Children.map(props.children, (child, index) => {
+    var _a;
+
+    if (!React.isValidElement(child)) {
+      return child;
+    }
+
+    const props = child.props;
+    let status = props.status || 'wait';
+
+    if (index < current) {
+      status = props.status || 'finish';
+    } else if (index === current) {
+      status = props.status || 'process';
+    }
+
+    const icon = (_a = props.icon) !== null && _a !== void 0 ? _a : defaultIcon;
+    return React.cloneElement(child, {
+      status,
+      icon
+    });
+  })));
+};

package/2x/es/components/swipe-action/index.d.ts

@@ -0,0 +1,4 @@
+import './swipe-action.less';
+import { SwipeAction } from './swipe-action';
+export type { SwipeActionProps, Action, SwipeActionRef } from './swipe-action';
+export default SwipeAction;

package/2x/es/components/swipe-action/index.js

@@ -0,0 +1,3 @@
+import "./swipe-action.css";
+import { SwipeAction } from './swipe-action';
+export default SwipeAction;

package/2x/es/components/swipe-action/swipe-action.css

@@ -0,0 +1,42 @@
+.adm-swipe-action {
+  --background: var(--adm-color-background);
+  background: var(--background);
+  cursor: -webkit-grab;
+  cursor: grab;
+  overflow: hidden;
+  touch-action: pan-y;
+}
+
+.adm-swipe-action-track {
+  position: relative;
+  overflow: visible;
+}
+
+.adm-swipe-action-actions {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  width: auto;
+  white-space: nowrap;
+}
+
+.adm-swipe-action-actions-right {
+  left: 100%;
+  top: 0;
+  height: 100%;
+}
+
+.adm-swipe-action-actions-left {
+  right: 100%;
+  top: 0;
+  height: 100%;
+}
+
+.adm-swipe-action-action-button.adm-button {
+  --border-radius: 0;
+  --border-width: 0;
+  --text-color: var(--adm-color-white);
+  padding-left: 40px;
+  padding-right: 40px;
+}

package/2x/es/components/swipe-action/swipe-action.d.ts

@@ -0,0 +1,37 @@
+import React, { ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
+export declare type SwipeActionRef = {
+    close: () => void;
+    show: (side?: 'left' | 'right') => void;
+};
+declare type ActionColor = 'light' | 'weak' | 'primary' | 'success' | 'warning' | 'danger';
+export declare type Action = {
+    key: string | number;
+    text: ReactNode;
+    color?: ActionColor | string;
+    onClick?: (e: React.MouseEvent) => void;
+};
+export declare type SwipeActionProps = {
+    rightActions?: Action[];
+    leftActions?: Action[];
+    onAction?: (action: Action, e: React.MouseEvent) => void;
+    closeOnTouchOutside?: boolean;
+    closeOnAction?: boolean;
+    children: ReactNode;
+    stopPropagation?: PropagationEvent[];
+} & NativeProps<'--background'>;
+export declare const SwipeAction: React.ForwardRefExoticComponent<{
+    rightActions?: Action[] | undefined;
+    leftActions?: Action[] | undefined;
+    onAction?: ((action: Action, e: React.MouseEvent) => void) | undefined;
+    closeOnTouchOutside?: boolean | undefined;
+    closeOnAction?: boolean | undefined;
+    children: ReactNode;
+    stopPropagation?: "click"[] | undefined;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--background", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<SwipeActionRef>>;
+export {};