@arco-design/mobile-react 2.19.0

package/esm/slider/style/index.less

@@ -0,0 +1,283 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-slider {
+    position: relative;
+    display: flex;
+    .use-var(padding, slider-padding);
+
+    &.is-vertical {
+        flex-direction: column;
+    }
+
+    &.is-horizontal.show-marks {
+        .use-var(padding-bottom, slider-has-mark-padding-bottom);
+    }
+
+    &-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex: 1;
+
+        .is-vertical & {
+            flex-direction: column;
+        }
+    }
+
+    &-label {
+        display: flex;
+        align-items: center;
+        .use-var(font-size, slider-label-font-size);
+        .use-var(color, slider-text-color);
+
+        .is-horizontal & {
+            .use-var(margin-right, slider-label-gutter);
+        }
+
+        .is-vertical & {
+            flex-direction: column;
+            .use-var(margin-bottom, slider-label-gutter);
+        }
+    }
+
+    &-wrapper + &-label {
+
+        .is-horizontal & {
+            margin-right: 0;
+            .use-var(margin-left, slider-label-gutter);
+        }
+
+        .is-vertical & {
+            margin-bottom: 0;
+            .use-var(margin-top, slider-label-gutter);
+        }
+    }
+
+    &-line {
+        position: relative;
+        display: flex;
+        flex: 1;
+        .use-var(border-radius, slider-line-border-radius);
+        .use-var(background, slider-line-color);
+
+        &:not(.is-activated)::before {
+            position: absolute;
+            content: "";
+            width: 100%;
+            height: 100%;
+
+            .is-horizontal & {
+                top: -50%;
+                transform: translateY(-50%);
+                .use-var(padding, slider-mask-padding, "", 0);
+            }
+
+            .is-vertical & {
+                left: -50%;
+                transform: translateX(-50%);
+                .use-var(padding, slider-mask-padding, 0);
+            }
+        }
+
+        &.is-activated {
+            position: absolute;
+            .use-var(background, slider-line-activated-color);
+
+            .is-disabled & {
+                .use-var(background, slider-line-disabled-color);
+            }
+        }
+    }
+
+    &-thumb {
+        .use-var(width, slider-thumb-width);
+        .use-var(height, slider-thumb-height);
+        .use-var(background, slider-thumb-background);
+        .use-var(box-shadow, slider-thumb-box-shadow);
+        .use-var(border-radius, slider-thumb-border-radius);
+
+        &-wrapper {
+            position: absolute;
+            display: flex;
+            width: fit-content;
+            height: fit-content;
+            margin: auto;
+            align-items: center;
+
+            .is-vertical & {
+                left: 1PX;
+                right: 0;
+
+                &.is-end {
+                    top: 0;
+                    transform: translate(-50%, -50%);
+                }
+
+                &.is-start {
+                    bottom: 0;
+                    transform: translate(-50%, 50%);
+                }
+            }
+
+            .is-horizontal & {
+                top: 0;
+                bottom: 0;
+
+                &.is-end {
+                    right: 0;
+                    transform: translateX(50%);
+                }
+
+                &.is-start {
+                    left: 0;
+                    transform: translateX(-50%);
+                }
+            }
+        }
+    }
+
+    &-popover-wrapper &-thumb {
+        position: relative;
+    }
+
+    &-popover {
+        position: absolute;
+        width: max-content;
+        .use-var(color, popover-content-color);
+        .use-var(font-size, slider-popover-font-size);
+        .use-var(line-height, slider-popover-line-height);
+
+        .is-horizontal & {
+            bottom: 100%;
+            .use-var(margin-bottom, slider-popover-gutter);
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        .is-vertical & {
+            left: 100%;
+            .use-var(margin-left, slider-popover-gutter);
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        &.no-content {
+            display: none;
+        }
+
+        &-wrapper {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        &-content {
+            position: relative;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            .use-var(border-radius, popover-inner-border-radius);
+            .use-var(padding, popover-content-padding);
+            z-index: 2;
+            .use-var(background-color, popover-background-color);
+
+            .android & {
+                .use-var(padding, popover-content-android-padding);
+            }
+
+            p {
+                white-space: normal;
+                word-break: break-all;
+                text-align: left;
+                .use-var(font-size, popover-content-font-size);
+                .use-var(line-height, popover-content-line-height);
+            }
+        }
+
+        &-arrow {
+            position: absolute;
+            margin: auto;
+            width: 0;
+            height: 0;
+            .use-var(border-width, slider-popover-arrow-size);
+            border-style: solid;
+            border-color: transparent;
+
+            .is-horizontal & {
+                transform: translateY(100%);
+                bottom: 0;
+                left: 0;
+                right: 0;
+                .use-var(border-top-color, popover-background-color);
+            }
+
+            .is-vertical & {
+                .use-var(border-right-color, popover-background-color);
+                transform: translateX(-100%);
+                left: 0;
+                top: 0;
+                bottom: 0;
+            }
+        }
+    }
+
+    &-marks {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        flex: 1;
+
+        &-item {
+            position: absolute;
+            margin: auto;
+            .use-var(width, slider-mark-width);
+            .use-var(height, slider-mark-height);
+            .use-var(border-radius, slider-mark-border-radius);
+            .use-var(background, slider-line-color);
+            transform: translateX(-50%);
+
+            &.is-activated {
+                .use-var(background, slider-line-activated-color);
+            }
+
+            .is-vertical & {
+                left: 0;
+                right: 0;
+            }
+
+            .is-horizontal & {
+                top: 0;
+                bottom: 0;
+            }
+
+            &-label {
+                position: absolute;
+                .use-var(font-size, slider-mark-label-font-size);
+                .use-var(line-height, slider-mark-label-line-height);
+                .use-var(color, slider-text-color);
+
+                .is-horizontal & {
+                    left: 50%;
+                    .use-var(top, slider-horizontal-mark-label-top);
+                    transform: translateX(-50%);
+                }
+
+                .is-vertical & {
+                    top: 50%;
+                    .use-var(right, slider-vertical-mark-label-right);
+                    transform: translateY(-50%);
+                }
+            }
+        }
+    }
+
+    .is-transferable {
+        transition: all .3s;
+    }
+
+    .@{prefix}-fade-enter-active,
+    .@{prefix}-fade-enter-done {
+        .use-var(opacity, popover-inner-opacity);
+    }
+}

package/esm/slider/thumb.d.ts

@@ -0,0 +1,8 @@
+import React, { CSSProperties } from 'react';
+declare const Thumb: ({ className, value, style, isTouching, }: {
+    className?: string | undefined;
+    value: number;
+    isTouching: boolean;
+    style?: React.CSSProperties | undefined;
+}) => JSX.Element;
+export default Thumb;

package/esm/slider/thumb.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo, useContext } from 'react';
+import { Popover } from './popover';
+import { SliderContext } from './hooks';
+import { GlobalContext } from '../context-provider';
+
+var Thumb = function Thumb(_ref) {
+  var className = _ref.className,
+      value = _ref.value,
+      style = _ref.style,
+      isTouching = _ref.isTouching;
+
+  var _useContext = useContext(GlobalContext),
+      _useContext$prefixCls = _useContext.prefixCls,
+      prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls;
+
+  var _useContext2 = useContext(SliderContext),
+      showTooltip = _useContext2.showTooltip,
+      renderThumb = _useContext2.renderThumb,
+      formatTooltip = _useContext2.formatTooltip;
+
+  var isHidden = showTooltip === 'never';
+  var renderValue = useMemo(function () {
+    return formatTooltip(value);
+  }, [formatTooltip, value]);
+  var isTooltipVisible = useMemo(function () {
+    if (isHidden) return false;
+    if (showTooltip === 'always') return true;
+    return isTouching;
+  }, [showTooltip, isTouching]);
+
+  var renderWrapper = function renderWrapper(el) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-slider-thumb-wrapper " + className,
+      style: _extends({}, style)
+    }, el);
+  };
+
+  var thumbEl = typeof renderThumb === 'function' ? renderThumb(value) : renderThumb;
+  if (isHidden) return renderWrapper(thumbEl);
+  return renderWrapper( /*#__PURE__*/React.createElement(Popover, {
+    visible: isTooltipVisible,
+    content: renderValue
+  }, thumbEl));
+};
+
+export default Thumb;

package/esm/steps/demo/style/css/mobile.css

@@ -0,0 +1,65 @@
+#demo-steps .divide {
+  height: 0.16rem;
+  background: #f7f8fa;
+}
+#demo-steps .arco-steps-item-custom-icon img {
+  width: 0.4rem;
+  height: 0.4rem;
+}
+#demo-steps .arcodesign-mobile-demo-content {
+  padding: 0!important;
+}
+#demo-steps #demo-order-7 .process-bg-color-with-config,
+#demo-steps #demo-order-7 .process-custom-icon-bg-color-with-config {
+  background: #FFB400;
+  color:  #FFFFFF ;
+}
+#demo-steps #demo-order-7 .finish-bg-color-with-config,
+#demo-steps #demo-order-7 .finish-custom-icon-bg-color-with-config {
+  background: rgba(255, 180, 0, 0.1);
+  color: #FFB400;
+}
+#demo-steps #demo-order-7 .finish-bg-color-with-config svg,
+#demo-steps #demo-order-7 .finish-custom-icon-bg-color-with-config svg {
+  color: inherit;
+}
+#demo-steps #demo-order-7 .wait-custom-icon-bg-color-with-config {
+  background:  #F2F3F5 ;
+  color:  #86909c ;
+}
+#demo-steps #demo-order-7 .process-title-color-with-config {
+  color: #FFB400;
+}
+#demo-steps #demo-order-7 .finish-tail-color-with-config:after {
+  background: #FFB400;
+}
+#demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {
+  border-radius: 50%;
+}
+#demo-steps #demo-order-8 .demo-svg .process-bg-color-with-config,
+#demo-steps #demo-order-8 .demo-svg .process-custom-icon-bg-color-with-config {
+  background: #165DFF;
+  color:  #FFFFFF ;
+}
+#demo-steps #demo-order-8 .demo-svg .finish-bg-color-with-config,
+#demo-steps #demo-order-8 .demo-svg .finish-custom-icon-bg-color-with-config {
+  background: rgba(22, 93, 255, 0.1);
+  color: #165DFF;
+}
+#demo-steps #demo-order-8 .demo-svg .finish-bg-color-with-config svg,
+#demo-steps #demo-order-8 .demo-svg .finish-custom-icon-bg-color-with-config svg {
+  color: inherit;
+}
+#demo-steps #demo-order-8 .demo-svg .wait-custom-icon-bg-color-with-config {
+  background:  #F2F3F5 ;
+  color:  #86909c ;
+}
+#demo-steps #demo-order-8 .demo-svg .process-title-color-with-config {
+  color: #165DFF;
+}
+#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config:after {
+  background: #165DFF;
+}
+#demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {
+  font-size: 12PX;
+}

package/esm/steps/demo/style/mobile.less

@@ -0,0 +1,37 @@
+@import "../../../../style/mixin.less";
+
+#demo-steps {
+
+    .divide {
+        .rem(height, 8);
+        background: #f7f8fa;
+    }
+    .@{prefix}-steps-item-custom-icon {
+
+        img {
+            .rem(width, 20);
+            .rem(height, 20);
+        }
+    }
+
+    .arcodesign-mobile-demo-content {
+        padding: 0!important;
+    }
+
+    #demo-order-7 {
+        .set-steps-color(#FFB400);
+    }
+
+    #demo-order-8 {
+
+        .demo-svg {
+            .@{prefix}-steps-item-custom-icon {
+                border-radius: 50%;
+            }
+            .set-steps-color(#165DFF);
+            .@{prefix}-steps-item-custom-icon {
+                font-size: 12PX;
+            }
+        }
+    }
+}

package/esm/steps/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StepsProps, StepsRef } from './type';
+export * from './type';
+export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "current" | "iconType"> & {
+    index?: number | undefined;
+    changeIndex: (newIndex: number) => void;
+}>;
+declare const _default: React.ForwardRefExoticComponent<StepsProps & React.RefAttributes<StepsRef>> & {
+    Step: React.ForwardRefExoticComponent<import("./type").StepProps & React.RefAttributes<import("./type").StepRef>>;
+};
+/**
+ * 显示一个任务的进度; 或者引导用户完成某个复杂任务。
+ * @en Display the progress of a task, or guide users to complete a complex task.
+ * @name 步骤条
+ * @name_en Steps
+ * @type 数据展示
+ * @type_en Data Display
+ */
+export default _default;

package/esm/steps/index.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, forwardRef, useImperativeHandle, Children, createContext, useCallback, useState, useEffect } from 'react';
+import { componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import Step from './step';
+import { useSystem, useRefState } from '../_helpers';
+export * from './type';
+export var StepsContext = /*#__PURE__*/createContext({
+  changeIndex: function changeIndex() {}
+});
+var Steps = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      children = props.children,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+      _props$iconType = props.iconType,
+      iconType = _props$iconType === void 0 ? 'number' : _props$iconType,
+      current = props.current,
+      _props$defaultIndex = props.defaultIndex,
+      defaultIndex = _props$defaultIndex === void 0 ? 0 : _props$defaultIndex,
+      _props$status = props.status,
+      status = _props$status === void 0 ? 'process' : _props$status,
+      items = props.items,
+      onClick = props.onClick,
+      onChange = props.onChange;
+
+  var _useState = useState(Number(defaultIndex)),
+      innerIndex = _useState[0],
+      setInnerIndex = _useState[1];
+
+  var _useRefState = useRefState(current === void 0 ? innerIndex : current),
+      activeIndex = _useRefState[0],
+      activeRefIndex = _useRefState[1],
+      setActiveIndex = _useRefState[2];
+
+  var domRef = useRef(null);
+  var system = useSystem();
+
+  function changeIndex(newIndex) {
+    onClick == null ? void 0 : onClick(newIndex);
+    setInnerIndex(newIndex);
+    newIndex !== activeRefIndex.current && (onChange == null ? void 0 : onChange(newIndex));
+  }
+
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  useEffect(function () {
+    setActiveIndex(current === void 0 ? innerIndex : current);
+  }, [current, innerIndex]);
+  var renderStep = useCallback(function (child, index) {
+    return /*#__PURE__*/React.createElement(StepsContext.Provider, {
+      value: {
+        iconType: iconType,
+        current: activeIndex,
+        direction: direction,
+        index: index,
+        status: activeIndex === index ? status : void 0,
+        changeIndex: changeIndex
+      },
+      key: index
+    }, child);
+  }, [iconType, activeIndex, direction]);
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-steps all-border-box " + className + " " + direction + " " + system,
+      style: style,
+      ref: domRef
+    }, items ? items.map(function (item, index) {
+      return renderStep( /*#__PURE__*/React.createElement(Step, _extends({}, item, {
+        key: index
+      })), index);
+    }) : Children.toArray(children).map(function (child, index) {
+      return renderStep(child, index);
+    }));
+  });
+});
+/**
+ * 显示一个任务的进度; 或者引导用户完成某个复杂任务。
+ * @en Display the progress of a task, or guide users to complete a complex task.
+ * @name 步骤条
+ * @name_en Steps
+ * @type 数据展示
+ * @type_en Data Display
+ */
+
+export default componentWrapper(Steps, {
+  Step: Step
+});

package/esm/steps/step.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StepProps, StepRef } from './type';
+declare const Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<StepRef>>;
+export default Step;

package/esm/steps/step.js

@@ -0,0 +1,78 @@
+import React, { forwardRef, useContext, useImperativeHandle, useMemo, useRef } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { IconCheckBold, IconCloseBold } from '../icon';
+import { ContextLayout } from '../context-provider';
+import { StepsContext } from './index';
+var Step = /*#__PURE__*/forwardRef(function (props, ref) {
+  var title = props.title,
+      description = props.description,
+      icon = props.icon;
+
+  var _useContext = useContext(StepsContext),
+      iconType = _useContext.iconType,
+      current = _useContext.current,
+      direction = _useContext.direction,
+      _useContext$index = _useContext.index,
+      index = _useContext$index === void 0 ? 0 : _useContext$index,
+      contextStatus = _useContext.status,
+      changeIndex = _useContext.changeIndex;
+
+  var status = props.status || contextStatus;
+  var domRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  var currentStatus = useMemo(function () {
+    if (status) return status;
+
+    if (current < index) {
+      return 'wait';
+    } else if (current === index) {
+      return 'process';
+    }
+
+    return 'finish';
+  }, [status, index, current]);
+
+  function renderNumIcon(prefixCls) {
+    var content;
+
+    if (currentStatus === 'finish') {
+      content = /*#__PURE__*/React.createElement(IconCheckBold, null);
+    } else if (currentStatus === 'error') {
+      content = /*#__PURE__*/React.createElement(IconCloseBold, null);
+    }
+
+    return content || /*#__PURE__*/React.createElement("span", {
+      className: cls(prefixCls + "-steps-item-icon-num")
+    }, index + 1);
+  }
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: domRef,
+      className: cls(prefixCls + "-steps-item", currentStatus, direction, iconType),
+      onClick: function onClick() {
+        return changeIndex(index);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-steps-item-tail", currentStatus + "-tail-color-with-config")
+    }), icon ? /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-steps-item-custom-icon", currentStatus + "-custom-icon-bg-color-with-config")
+    }, icon) : /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-steps-item-icon", currentStatus + "-bg-color-with-config")
+    }, iconType === 'number' ? renderNumIcon(prefixCls) : /*#__PURE__*/React.createElement("span", {
+      className: cls(prefixCls + "-steps-item-icon-dot")
+    })), title || description ? /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-steps-item-content")
+    }, title ? /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-steps-item-title", currentStatus + "-title-color-with-config")
+    }, title) : null, description ? /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-steps-item-description")
+    }, description) : null) : null);
+  });
+});
+export default Step;