@arco-design/mobile-react 2.19.0

package/esm/button/hooks.js

@@ -0,0 +1,68 @@
+import { useMemo } from 'react';
+
+var formatColorStatus = function formatColorStatus(color) {
+  if (!color) return null;
+  return typeof color === 'string' ? {
+    normal: color,
+    active: color,
+    disabled: color
+  } : color;
+}; // 主要是用来 diff 颜色是否变化，将对象或者字符串的 diff 转换成字符串的 diff
+// @en It is mainly used to judge whether the color has changed, and convert the diff of the object or string into the diff of the string
+
+
+var diffColor = function diffColor(color) {
+  return color && (typeof color === 'string' ? color : Object.values(color).join('-'));
+}; // 允许传入定制所有颜色，忽略的值会继续走原生的颜色
+// @en Allows to pass in all custom colors, ignored values will continue to use native colors
+
+
+export var useCustomColor = function useCustomColor(_ref) {
+  var color = _ref.color,
+      bgColor = _ref.bgColor,
+      borderColor = _ref.borderColor,
+      active = _ref.isActive,
+      disabled = _ref.disabled;
+  var state = {
+    active: active,
+    disabled: disabled
+  };
+  var priority = ['active', 'disabled'];
+  var styleConfig = useMemo(function () {
+    var _map = [color, bgColor, borderColor].map(formatColorStatus),
+        fmtColor = _map[0],
+        fmtBgColor = _map[1],
+        fmtBorderColor = _map[2];
+
+    return {
+      color: fmtColor,
+      borderColor: fmtBorderColor,
+      background: fmtBgColor
+    };
+  }, [color, bgColor, borderColor].map(diffColor));
+  var customColorStyle = useMemo(function () {
+    var res = {};
+    Object.entries(styleConfig).forEach(function (_ref2) {
+      var styleName = _ref2[0],
+          fmtColorConfig = _ref2[1];
+
+      if (fmtColorConfig) {
+        var styleColor = fmtColorConfig.normal;
+        priority.forEach(function (key) {
+          if (state[key] && fmtColorConfig[key]) {
+            styleColor = fmtColorConfig[key];
+          }
+        });
+        res[styleName] = styleColor;
+      }
+    });
+    return res;
+  }, [styleConfig, active, disabled]);
+  var customColorClass = useMemo(function () {
+    return styleConfig.borderColor ? ['has-custom-border'] : [];
+  }, [diffColor(borderColor)]);
+  return {
+    customColorStyle: customColorStyle,
+    customColorClass: customColorClass
+  };
+};

package/esm/button/index.d.ts

@@ -0,0 +1,129 @@
+import React from 'react';
+export declare type ButtonColorStatus = string | {
+    normal: string;
+    active: string;
+    disabled: string;
+};
+export interface ButtonProps {
+    /**
+     * 样式类型
+     * @en Style type
+     * @default "primary"
+     */
+    type?: 'primary' | 'ghost' | 'default';
+    /**
+     * 尺寸
+     * @en Size
+     * @default "large"
+     */
+    size?: 'mini' | 'small' | 'medium' | 'large' | 'huge';
+    /**
+     * 是否为内联样式
+     * @en Whether it's inline style
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * 是否处于加载中状态
+     * @en Whether it's in loading status
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * 是否禁用
+     * @en Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * border是否为0.5px
+     * @en Whether the border is 0.5px
+     * @default false
+     */
+    halfBorder?: boolean;
+    /**
+     * 图标名，传入Icon组件
+     * @en icon, input icon component
+     */
+    icon?: React.ReactNode;
+    /**
+     * 加载中是否展示文字
+     * @en Whether to show text when loading
+     * @default true
+     */
+    showTextWhenLoading?: boolean;
+    /**
+     * 是否需要点击态
+     * @en Whether it needs active status
+     * @default true
+     */
+    needActive?: boolean;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 按钮形状
+     * @en Button shape
+     * @default "semi"
+     */
+    shape?: 'round' | 'semi' | 'square';
+    /**
+     * 自定义字体颜色
+     * @en Custom font color
+     */
+    color?: ButtonColorStatus;
+    /**
+     * 自定义背景颜色
+     * @en Custom background color
+     */
+    bgColor?: ButtonColorStatus;
+    /**
+     * 自定义边框颜色
+     * @en Custom border color
+     */
+    borderColor?: ButtonColorStatus;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 加载图标，传入Icon组件type属性或node
+     * @en Loading icon, input the icon component or its type
+     */
+    loadingIcon?: string | React.ReactNode;
+    /**
+     * 子元素
+     * @en Children element
+     */
+    children?: null | React.ReactNode;
+    /**
+     * 点击按钮的回调函数
+     * @en Callback function when clicking button
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * 禁用状态下点击按钮的回调函数
+     * @en Callback function when disabling button
+     */
+    onClickDisabled?: (e: React.MouseEvent) => void;
+}
+export interface ButtonRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLButtonElement | null;
+}
+/**
+ * 按钮用于开始一个即时操作。
+ * @en Using for starting an immediate action
+ * @type 通用
+ * @type_en General
+ * @name 按钮
+ * @name_en Button
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<ButtonRef>>;
+export default Button;

package/esm/button/index.js

@@ -0,0 +1,113 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, forwardRef, useRef, useImperativeHandle } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import Loading from '../loading';
+import { useSystem } from '../_helpers';
+import { useCustomColor } from './hooks';
+
+/**
+ * 按钮用于开始一个即时操作。
+ * @en Using for starting an immediate action
+ * @type 通用
+ * @type_en General
+ * @name 按钮
+ * @name_en Button
+ */
+var Button = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useState = useState(false),
+      isActive = _useState[0],
+      setActive = _useState[1];
+
+  var system = useSystem();
+  var _props$type = props.type,
+      type = _props$type === void 0 ? 'primary' : _props$type,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'large' : _props$size,
+      _props$inline = props.inline,
+      inline = _props$inline === void 0 ? false : _props$inline,
+      _props$loading = props.loading,
+      loading = _props$loading === void 0 ? false : _props$loading,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$shape = props.shape,
+      shape = _props$shape === void 0 ? 'semi' : _props$shape,
+      _props$halfBorder = props.halfBorder,
+      halfBorder = _props$halfBorder === void 0 ? false : _props$halfBorder,
+      icon = props.icon,
+      _props$showTextWhenLo = props.showTextWhenLoading,
+      showTextWhenLoading = _props$showTextWhenLo === void 0 ? true : _props$showTextWhenLo,
+      _props$needActive = props.needActive,
+      needActive = _props$needActive === void 0 ? true : _props$needActive,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      color = props.color,
+      bgColor = props.bgColor,
+      borderColor = props.borderColor,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$children = props.children,
+      children = _props$children === void 0 ? null : _props$children,
+      loadingIcon = props.loadingIcon,
+      onClick = props.onClick,
+      onClickDisabled = props.onClickDisabled;
+  var domRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+
+  var _useCustomColor = useCustomColor({
+    color: color,
+    bgColor: bgColor,
+    borderColor: borderColor,
+    isActive: isActive,
+    disabled: disabled
+  }),
+      customColorClass = _useCustomColor.customColorClass,
+      customColorStyle = _useCustomColor.customColorStyle;
+
+  var handleTouchStart = function handleTouchStart() {
+    if (needActive && !disabled && !loading) {
+      setActive(true);
+    }
+  };
+
+  var handleTouchEnd = function handleTouchEnd() {
+    setActive(false);
+  };
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      ref: domRef,
+      style: _extends({}, customColorStyle, style),
+      className: cls.apply(void 0, [prefixCls + "-button", className, "type-" + type, "size-" + size, "is-" + shape, system, {
+        inline: inline,
+        disabled: disabled,
+        loading: loading,
+        active: isActive,
+        'half-border': halfBorder
+      }].concat(customColorClass)),
+      onTouchStart: handleTouchStart,
+      onTouchEnd: handleTouchEnd,
+      onTouchCancel: handleTouchEnd,
+      onMouseDown: handleTouchStart,
+      onMouseUp: handleTouchEnd,
+      onClick: disabled ? onClickDisabled : onClick
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "btn-icon"
+    }, icon, loading && (loadingIcon === void 0 ? /*#__PURE__*/React.createElement(Loading, {
+      className: "loading-icon",
+      radius: 6,
+      type: "circle"
+    }) : loadingIcon)), (!loading || loading && showTextWhenLoading) && children ? /*#__PURE__*/React.createElement("div", {
+      className: cls('btn-text', {
+        'has-icon': loading || icon
+      })
+    }, children) : null);
+  });
+});
+export default Button;