@bm-fe/react-native-ui-components 1.1.3 → 1.1.4

package/ios/Modules/BMUIComponents/BMUIComponents/Classes/Components/Buttons/BMComponentButton.swift

@@ -0,0 +1,373 @@
+//
+//  BMComponentButton.swift
+//  BMComponents
+//
+//  Created by james on 2025/12/31.
+//
+
+import UIKit
+import BMTheme
+import BMCore
+import SnapKit
+
+/// 组件化 Button - 简化设计，确保文字正常显示
+public class BMComponentButton: UIControl {
+
+    /// 按钮配置
+    public var configuration: BMComponentButtonConfiguration {
+        didSet {
+            applyConfiguration()
+        }
+    }
+
+    /// 按钮点击状态
+    private var currentState: BMComponentButtonState = .normal {
+        didSet {
+            updateStateAppearance()
+        }
+    }
+
+    /// 是否正在加载
+    public var isLoading: Bool = false {
+        didSet {
+            updateState()
+        }
+    }
+
+    /// 重写 isEnabled 属性以同步状态
+    public override var isEnabled: Bool {
+        didSet {
+            updateState()
+        }
+    }
+
+    /// 标题文本
+    public var title: String? {
+        didSet {
+            titleLabel.text = title
+            updateLayout()
+        }
+    }
+
+    /// 图标
+    public var icon: UIImage? {
+        didSet {
+            iconImageView.image = icon
+            updateLayout()
+        }
+    }
+
+    // MARK: - Private Properties
+
+    private let titleLabel = UILabel()
+    private let iconImageView = UIImageView()
+    private let loadingIndicator = UIActivityIndicatorView(style: .medium)
+
+    private var heightConstraint: Constraint?
+    private var iconLeadingConstraint: Constraint?
+    private var iconTrailingConstraint: Constraint?
+    private var titleLeadingConstraint: Constraint?
+    private var titleTrailingConstraint: Constraint?
+
+    // MARK: - Initialization
+
+    /// 通过配置初始化
+    public init(title: String? = nil, icon: UIImage? = nil,configuration: BMComponentButtonConfiguration = .primary()) {
+        self.title = title
+        self.icon = icon
+        self.configuration = configuration
+        super.init(frame: .zero)
+        setupUI()
+        applyConfiguration()
+        updateLayout()
+    }
+
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    // MARK: - Setup
+
+    private func setupUI() {
+        // 添加子视图
+        addSubview(titleLabel)
+        addSubview(iconImageView)
+        addSubview(loadingIndicator)
+        // 配置标题标签
+        titleLabel.text = title
+        titleLabel.textAlignment = .center
+        titleLabel.numberOfLines = 1
+        titleLabel.adjustsFontSizeToFitWidth = false
+        titleLabel.lineBreakMode = .byTruncatingTail
+
+        // 配置图标
+        iconImageView.image = icon
+        iconImageView.contentMode = .scaleAspectFit
+        iconImageView.tintColor = .white
+
+        // 配置加载指示器
+        loadingIndicator.hidesWhenStopped = true
+        loadingIndicator.color = .white // 默认白色，会在 applyConfiguration 中更新
+
+        // 设置高度约束
+        snp.makeConstraints { make in
+            heightConstraint = make.height.equalTo(configuration.size.height).constraint
+        }
+        // 初始化状态
+        updateState()
+    }
+
+    // MARK: - Configuration
+    private func applyConfiguration() {
+        // 更新高度
+        heightConstraint?.update(offset: configuration.size.height)
+        // 更新字体
+        if let font = configuration.currentFont {
+            titleLabel.font = font
+        } else {
+            titleLabel.font = configuration.size.sizeFont
+        }
+        // 更新圆角
+        if let cornerRadius = configuration.cornerRadius {
+            layer.cornerRadius = cornerRadius
+        } else {
+            layer.cornerRadius = configuration.size.height / 2
+        }
+        layer.masksToBounds = true
+        // 更新颜色
+        updateColors()
+    }
+
+    /// 根据状态更新外观
+    private func updateStateAppearance() {
+        // 先更新背景色（所有状态都使用相同的背景色）
+        updateColors()
+        switch currentState {
+        case .normal:
+            // 正常状态 - 正常效果
+            alpha = 1.0
+        case .pressed:
+            // 点击状态 - 正常背景加上透明度
+            alpha = 0.7 // 点击时降低透明度
+        case .disable:
+            // 禁用状态 - 不可以点击效果
+            alpha = configuration.disableAlpha
+        case .loading:
+            // 加载状态 - 显示加载动画，隐藏文字和图标
+            alpha = 1.0
+            titleLabel.isHidden = true
+            iconImageView.isHidden = true
+            loadingIndicator.isHidden = false
+            loadingIndicator.startAnimating()
+            return // 加载状态需要特殊处理，直接返回
+        }
+
+        // 非加载状态时，根据是否有文字/图标来决定显示
+        if currentState != .loading {
+            let hasTitle = title != nil && !title!.isEmpty
+            let hasIcon = icon != nil
+            titleLabel.isHidden = !hasTitle
+            iconImageView.isHidden = !hasIcon
+            loadingIndicator.stopAnimating()
+            loadingIndicator.isHidden = true
+        }
+    }
+
+    private func updateColors() {
+        if currentState == .disable {
+            // 背景色
+            cexTheme.backgroundColor = .bgLineColor
+            // 文字颜色
+            titleLabel.cexTheme.textColor = .thirdColor
+            // 图标颜色
+            iconImageView.cexTheme.tintColor = .thirdColor
+            // 加载指示器颜色（使用前景色）
+    //        loadingIndicator.color = configuration.type.foregroundColor.currentUIColor()
+        } else {
+            // 背景色
+            cexTheme.backgroundColor = configuration.type.backgroundColor
+            // 文字颜色
+            titleLabel.cexTheme.textColor = configuration.type.foregroundColor
+            // 图标颜色
+            iconImageView.cexTheme.tintColor = configuration.type.foregroundColor
+            // 加载指示器颜色（使用前景色）
+    //        loadingIndicator.color = configuration.type.foregroundColor.currentUIColor()
+        }
+    }
+
+    /// 更新按钮状态
+    private func updateState() {
+        if isLoading {
+            currentState = .loading
+        } else if !isEnabled {
+            currentState = .disable
+        } else {
+            // 如果当前不是 pressed 状态，则恢复为 normal
+            if currentState != .pressed {
+                currentState = .normal
+            }
+        }
+    }
+
+    // MARK: - Layout
+    private func updateLayout() {
+        let hasTitle = title != nil && !title!.isEmpty
+        let hasIcon = icon != nil
+        // 只有在非加载状态下才更新文字和图标的显示状态
+        // 加载状态下的显示由 updateStateAppearance() 控制
+        if currentState != .loading {
+            titleLabel.isHidden = !hasTitle
+            iconImageView.isHidden = !hasIcon
+        }
+        // 移除旧约束
+        iconLeadingConstraint?.deactivate()
+        iconTrailingConstraint?.deactivate()
+        titleLeadingConstraint?.deactivate()
+        titleTrailingConstraint?.deactivate()
+        iconLeadingConstraint = nil
+        iconTrailingConstraint = nil
+        titleLeadingConstraint = nil
+        titleTrailingConstraint = nil
+
+        if hasIcon && hasTitle {
+            // 有图标和文字
+            let iconSize = configuration.size.iconSize
+            let spacing = configuration.size.iconSpacing
+            let padding = configuration.size.horizontalPadding
+            if configuration.iconPosition == .leading {
+                // 图标在左侧
+                iconImageView.snp.remakeConstraints { make in
+                    iconLeadingConstraint = make.leading.equalToSuperview().offset(padding).constraint
+                    make.centerY.equalToSuperview()
+                    make.size.equalTo(iconSize)
+                }
+                titleLabel.snp.remakeConstraints { make in
+                    titleLeadingConstraint = make.leading.equalTo(iconImageView.snp.trailing).offset(spacing).constraint
+                    titleTrailingConstraint = make.trailing.equalToSuperview().offset(-padding).constraint
+                    make.centerY.equalToSuperview()
+                }
+            } else {
+                // 图标在右侧
+                titleLabel.snp.remakeConstraints { make in
+                    titleLeadingConstraint = make.leading.equalToSuperview().offset(padding).constraint
+                    make.centerY.equalToSuperview()
+                }
+                iconImageView.snp.remakeConstraints { make in
+                    iconTrailingConstraint = make.trailing.equalToSuperview().offset(-padding).constraint
+                    make.leading.equalTo(titleLabel.snp.trailing).offset(spacing)
+                    make.centerY.equalToSuperview()
+                    make.size.equalTo(iconSize)
+                }
+            }
+        } else if hasIcon {
+            // 只有图标
+            let iconSize = configuration.size.iconSize
+            iconImageView.snp.remakeConstraints { make in
+                make.center.equalToSuperview()
+                make.size.equalTo(iconSize)
+            }
+        } else if hasTitle {
+            // 只有文字
+            let padding = configuration.size.horizontalPadding
+            titleLabel.snp.remakeConstraints { make in
+                titleLeadingConstraint = make.leading.equalToSuperview().offset(padding).constraint
+                titleTrailingConstraint = make.trailing.equalToSuperview().offset(-padding).constraint
+                make.centerY.equalToSuperview()
+                make.height.lessThanOrEqualToSuperview()
+            }
+        } else {
+            // 既没有文字也没有图标，设置最小宽度
+            snp.remakeConstraints { make in
+                make.width.greaterThanOrEqualTo(configuration.size.minWidth)
+                make.height.equalTo(configuration.size.height)
+            }
+        }
+        // 加载指示器
+        loadingIndicator.snp.remakeConstraints { make in
+            make.center.equalToSuperview()
+        }
+    }
+
+    /// 仅文字时用 frame 强制 titleLabel 占满宽度并居中，避免外部通过 frame 设置按钮大小时约束未正确更新导致文字不居中
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        let hasTitle = title != nil && !title!.isEmpty
+        let hasIcon = icon != nil
+        if hasTitle && !hasIcon && !isLoading && bounds.width > 0 && bounds.height > 0 {
+            let padding = configuration.size.horizontalPadding
+            titleLabel.textAlignment = .center
+            titleLabel.frame = CGRect(x: padding, y: 0, width: bounds.width - padding * 2, height: bounds.height)
+        }
+    }
+
+
+    // MARK: - Touch Events
+    @objc private func handleTouchDown() {
+        // 只有在启用且非加载状态下才响应点击
+        if isEnabled && !isLoading {
+            currentState = .pressed
+        }
+    }
+
+    @objc private func handleTouchUp() {
+        // 触摸结束时恢复状态
+        if isEnabled && !isLoading {
+            currentState = .normal
+        }
+    }
+
+    public override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
+        super.touchesBegan(touches, with: event)
+        handleTouchDown()
+    }
+
+    public override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
+        super.touchesMoved(touches, with: event)
+        // 如果触摸移出按钮范围，恢复正常状态
+        if let touch = touches.first {
+            let location = touch.location(in: self)
+            if !bounds.contains(location) {
+                handleTouchUp()
+            } else if isEnabled && !isLoading && currentState != .pressed {
+                handleTouchDown()
+            }
+        }
+    }
+
+    public override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
+        super.touchesEnded(touches, with: event)
+        handleTouchUp()
+    }
+
+    public override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
+        super.touchesCancelled(touches, with: event)
+        handleTouchUp()
+    }
+
+
+    // MARK: - Intrinsic Content Size
+
+    public override var intrinsicContentSize: CGSize {
+        let hasTitle = title != nil && !title!.isEmpty
+        let hasIcon = icon != nil
+        var width: CGFloat = 0
+        let height = configuration.size.height
+        let padding = configuration.size.horizontalPadding * 2
+        if hasTitle {
+            titleLabel.sizeToFit()
+            width += titleLabel.frame.width
+        }
+        if hasIcon {
+            width += configuration.size.iconSize
+            if hasTitle {
+                width += configuration.size.iconSpacing
+            }
+        }
+        width += padding
+        // 最小宽度
+        width = max(width, configuration.size.minWidth)
+        return CGSize(width: width, height: height)
+    }
+
+}

package/ios/Modules/BMUIComponents/BMUIComponents/Classes/Components/Buttons/BMComponentButtonConfiguration.swift

@@ -0,0 +1,181 @@
+//
+//  BMComponentButtonConfiguration.swift
+//  BMComponents
+//
+//  Created by james on 2025/12/31.
+//
+
+import UIKit
+import BMTheme
+
+// MARK: - Button Style Type 类型
+/// 按钮变体（颜色主题）
+public enum BMComponentButtonType {
+    /// 主色按钮（实心）
+    case primary
+    /// 次要按钮（边框）
+    case secondary
+    /// 成功按钮（绿色）
+    case green
+    /// 危险按钮（红色）
+    case red
+    /// 禁用按钮（灰色）
+    case white
+    
+    /// 控件的背景色
+    var backgroundColor: BMCexThemeColor {
+        switch self {
+        case .primary: return BMCexThemeColor.brandColor
+        case .secondary: return BMCexThemeColor.brandBgColor
+        case .green: return BMCexThemeColor.buyColor
+        case .red: return BMCexThemeColor.sellColor
+        case .white: return BMCexThemeColor.bgLine2Color
+        }
+    }
+ 
+    /// （文字和图标）颜色
+    var foregroundColor: BMCexThemeColor {
+        switch self {
+        case .primary: return BMCexThemeColor.btnTextColor
+        case .secondary: return BMCexThemeColor.brandColor
+        case .green: return BMCexThemeColor.btnTextColor
+        case .red: return BMCexThemeColor.btnTextColor
+        case .white: return BMCexThemeColor.primaryColor
+        }
+    }
+    
+}
+
+// MARK: - Button Size
+public enum BMComponentButtonSize {
+    
+    case XLarge
+    case Large
+    case Medium
+    case Small
+    case XSmall
+    case XXSmall
+  
+    var minWidth: CGFloat {
+        switch self {
+        case .XLarge: return 64
+        case .Large: return 48
+        case .Medium: return 40
+        case .Small: return 32
+        case .XSmall: return 24
+        case .XXSmall: return 20
+        }
+    }
+    
+    var height: CGFloat {
+        switch self {
+        case .XLarge: return 56
+        case .Large: return 48
+        case .Medium: return 40
+        case .Small: return 36
+        case .XSmall: return 32
+        case .XXSmall: return 26
+        }
+    }
+    
+    var horizontalPadding: CGFloat{
+        switch self {
+        case .XLarge: return 32
+        case .Large: return 24
+        case .Medium: return 20
+        case .Small: return 16
+        case .XSmall: return 12
+        case .XXSmall: return 10
+        }
+    }
+    
+    /// 图标尺寸
+    var iconSize: CGFloat {
+        switch self {
+        case .XLarge: return 20
+        case .Large: return 20
+        case .Medium: return 16
+        case .Small: return 16
+        case .XSmall: return 14
+        case .XXSmall: return 14
+        }
+    }
+    
+    /// 图标与文字间距
+    var iconSpacing: CGFloat {
+        switch self {
+        case .XLarge: return 8
+        case .Large: return 8
+        case .Medium: return 6
+        case .Small: return 6
+        case .XSmall: return 6
+        case .XXSmall: return 4
+        }
+    }
+    
+    var sizeFont: UIFont {
+        switch self {
+        case .XLarge: return .H7Font
+        case .Large: return .S1Font
+        case .Medium: return .S4Font
+        case .Small: return .S4Font
+        case .XSmall: return .S4Font
+        case .XXSmall: return .S5Font
+        }
+    }
+    
+}
+
+// MARK: - State
+/// 按钮状态
+public enum BMComponentButtonState {
+    case normal
+    case pressed
+    case disable
+    case loading
+}
+
+// MARK: - Icon Position
+/// 图标位置
+public enum BMComponentButtonIconPosition {
+    case leading  // 左侧
+    case trailing // 右侧
+    case none     // 无图标
+}
+
+// MARK: - Button Configuration
+/// 组件化按钮配置
+public struct BMComponentButtonConfiguration {
+    
+    /// 按钮样式变体（颜色主题）
+    public let type: BMComponentButtonType
+    
+    /// 按钮尺寸
+    public let size: BMComponentButtonSize
+    
+    /// 图标位置
+    public let iconPosition: BMComponentButtonIconPosition
+    
+    /// 点击按钮的透明度（0.0 - 1.0）
+    public var disableAlpha: CGFloat = 0.8
+    
+    /// 圆角半径
+    public var cornerRadius: CGFloat?
+    
+    /// 字体
+    public var currentFont: UIFont?
+    
+    // MARK: - Initialization
+    public init(type: BMComponentButtonType = .primary,size: BMComponentButtonSize = .Medium,iconPosition: BMComponentButtonIconPosition = .leading,alpha: CGFloat = 1.0,cornerRadius: CGFloat? = nil) {
+        self.type = type
+        self.size = size
+        self.iconPosition = iconPosition
+        self.disableAlpha = alpha
+        self.cornerRadius = cornerRadius
+    }
+    
+  
+}
+
+
+