mr-component/lib/components/MrSelect/index.js

A library for Mr components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _reactVant = require("react-vant");
var _excluded = ["value", "defaultValue", "options", "placeholder", "multiple", "searchable", "searchPlaceholder", "maxSelect", "title", "disabled", "readOnly", "showConfirmButton", "confirmButtonText", "cancelButtonText", "columns", "cascade", "loading", "loadingText", "emptyText", "error", "errorMessage", "borderColor", "backgroundColor", "textColor", "borderRadius", "height", "padding", "fontSize", "fontWeight", "selectedColor", "selectedBackgroundColor", "theme", "size", "onChange", "onConfirm", "onCancel", "onSearch", "className", "style"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// 选项数据类型

// Mr选择器属性

// 预设主题样式
var getThemeStyle = function getThemeStyle(theme) {
  var themes = {
    "default": {
      borderColor: '#CED1D5',
      backgroundColor: '#FFFFFF',
      color: '#333333',
      selectedColor: '#1989FA',
      selectedBackgroundColor: '#F0F8FF'
    },
    primary: {
      borderColor: '#1989FA',
      backgroundColor: '#F0F8FF',
      color: '#1989FA',
      selectedColor: '#FFFFFF',
      selectedBackgroundColor: '#1989FA'
    },
    success: {
      borderColor: '#07C160',
      backgroundColor: '#F0F9FF',
      color: '#07C160',
      selectedColor: '#FFFFFF',
      selectedBackgroundColor: '#07C160'
    },
    warning: {
      borderColor: '#FFA726',
      backgroundColor: '#FFF3E0',
      color: '#E65100',
      selectedColor: '#FFFFFF',
      selectedBackgroundColor: '#FFA726'
    },
    danger: {
      borderColor: '#EE0A24',
      backgroundColor: '#FFF1F0',
      color: '#EE0A24',
      selectedColor: '#FFFFFF',
      selectedBackgroundColor: '#EE0A24'
    }
  };
  return themes[theme] || themes["default"];
};

// 尺寸配置
var getSizeConfig = function getSizeConfig(size) {
  var sizes = {
    small: {
      height: 40,
      fontSize: 14,
      padding: '8px 12px'
    },
    normal: {
      height: 48,
      fontSize: 16,
      padding: '12px 16px'
    },
    large: {
      height: 56,
      fontSize: 18,
      padding: '16px 20px'
    }
  };
  return sizes[size] || sizes.normal;
};
var MrSelect = function MrSelect(props, ref) {
  var value = props.value,
    defaultValue = props.defaultValue,
    _props$options = props.options,
    options = _props$options === void 0 ? [] : _props$options,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? '请选择' : _props$placeholder,
    _props$multiple = props.multiple,
    multiple = _props$multiple === void 0 ? false : _props$multiple,
    _props$searchable = props.searchable,
    searchable = _props$searchable === void 0 ? false : _props$searchable,
    _props$searchPlacehol = props.searchPlaceholder,
    searchPlaceholder = _props$searchPlacehol === void 0 ? '搜索选项' : _props$searchPlacehol,
    maxSelect = props.maxSelect,
    _props$title = props.title,
    title = _props$title === void 0 ? '请选择' : _props$title,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    _props$readOnly = props.readOnly,
    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
    _props$showConfirmBut = props.showConfirmButton,
    showConfirmButton = _props$showConfirmBut === void 0 ? true : _props$showConfirmBut,
    _props$confirmButtonT = props.confirmButtonText,
    confirmButtonText = _props$confirmButtonT === void 0 ? '确认' : _props$confirmButtonT,
    _props$cancelButtonTe = props.cancelButtonText,
    cancelButtonText = _props$cancelButtonTe === void 0 ? '取消' : _props$cancelButtonTe,
    _props$columns = props.columns,
    columns = _props$columns === void 0 ? 1 : _props$columns,
    _props$cascade = props.cascade,
    cascade = _props$cascade === void 0 ? false : _props$cascade,
    _props$loading = props.loading,
    loading = _props$loading === void 0 ? false : _props$loading,
    _props$loadingText = props.loadingText,
    loadingText = _props$loadingText === void 0 ? '加载中...' : _props$loadingText,
    _props$emptyText = props.emptyText,
    emptyText = _props$emptyText === void 0 ? '暂无数据' : _props$emptyText,
    _props$error = props.error,
    error = _props$error === void 0 ? false : _props$error,
    errorMessage = props.errorMessage,
    borderColor = props.borderColor,
    backgroundColor = props.backgroundColor,
    textColor = props.textColor,
    _props$borderRadius = props.borderRadius,
    borderRadius = _props$borderRadius === void 0 ? 8 : _props$borderRadius,
    height = props.height,
    padding = props.padding,
    fontSize = props.fontSize,
    _props$fontWeight = props.fontWeight,
    fontWeight = _props$fontWeight === void 0 ? 400 : _props$fontWeight,
    selectedColor = props.selectedColor,
    selectedBackgroundColor = props.selectedBackgroundColor,
    _props$theme = props.theme,
    theme = _props$theme === void 0 ? 'default' : _props$theme,
    _props$size = props.size,
    size = _props$size === void 0 ? 'normal' : _props$size,
    onChange = props.onChange,
    onConfirm = props.onConfirm,
    onCancel = props.onCancel,
    onSearch = props.onSearch,
    className = props.className,
    style = props.style,
    others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);

  // 生成最终样式
  var themeStyle = getThemeStyle(theme);
  var sizeConfig = getSizeConfig(size);
  var finalStyle = (0, _extends2["default"])({}, themeStyle, {
    // 应用尺寸配置
    height: height || sizeConfig.height,
    fontSize: fontSize || sizeConfig.fontSize,
    padding: padding || sizeConfig.padding
  }, borderColor && {
    borderColor: borderColor
  }, backgroundColor && {
    backgroundColor: backgroundColor
  }, textColor && {
    color: textColor
  }, selectedColor && {
    '--selected-color': selectedColor
  }, selectedBackgroundColor && {
    '--selected-background-color': selectedBackgroundColor
  }, {
    // 基础样式
    borderWidth: '1px',
    borderStyle: 'solid',
    borderRadius: typeof borderRadius === 'number' ? borderRadius + "px" : borderRadius,
    fontWeight: fontWeight,
    boxSizing: 'border-box',
    transition: 'all 0.3s ease',
    cursor: disabled ? 'not-allowed' : 'pointer',
    opacity: disabled ? 0.6 : 1
  }, style);

  // 处理选项数据格式转换
  var formattedOptions = (0, _react.useMemo)(function () {
    if (cascade) {
      // 级联选择模式
      return options;
    }

    // 单列或多列选择模式
    if (columns === 1) {
      return options.map(function (option) {
        return {
          text: option.label,
          value: option.value,
          disabled: option.disabled
        };
      });
    } else {
      // 多列选择需要特殊处理
      var columnData = [];
      var itemsPerColumn = Math.ceil(options.length / columns);
      for (var i = 0; i < columns; i++) {
        var startIndex = i * itemsPerColumn;
        var endIndex = Math.min(startIndex + itemsPerColumn, options.length);
        columnData.push(options.slice(startIndex, endIndex).map(function (option) {
          return {
            text: option.label,
            value: option.value,
            disabled: option.disabled
          };
        }));
      }
      return columnData;
    }
  }, [options, columns, cascade]);

  // 处理值变化
  var handleChange = function handleChange(values, index) {
    // 查找对应的选项
    var findOption = function findOption(val) {
      return options.find(function (opt) {
        return opt.value === val;
      });
    };
    if (Array.isArray(values)) {
      var selectedOptions = values.map(function (val) {
        return findOption(val);
      }).filter(Boolean);
      onChange === null || onChange === void 0 ? void 0 : onChange(values, selectedOptions);
    } else {
      var selectedOption = findOption(values);
      onChange === null || onChange === void 0 ? void 0 : onChange(values, selectedOption);
    }
  };

  // 处理确认
  var handleConfirm = function handleConfirm(values, index) {
    handleChange(values, index);
    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(values, Array.isArray(values) ? values.map(function (val) {
      return options.find(function (opt) {
        return opt.value === val;
      });
    }).filter(Boolean) : options.find(function (opt) {
      return opt.value === values;
    }));
  };

  // 处理取消
  var handleCancel = function handleCancel() {
    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
  };

  // 生成类名
  var classNames = ['mr-select', theme && "mr-select--" + theme, size && "mr-select--" + size, error && 'mr-select--error', disabled && 'mr-select--disabled', className].filter(Boolean).join(' ');
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
    ref: ref,
    className: classNames,
    style: finalStyle
  }, others), /*#__PURE__*/React.createElement(_reactVant.Picker, {
    value: value,
    defaultValue: defaultValue,
    title: title,
    placeholder: placeholder,
    loading: loading,
    loadingText: loadingText,
    readonly: readOnly,
    showToolbar: showConfirmButton,
    cancelButtonText: cancelButtonText,
    confirmButtonText: confirmButtonText,
    columns: formattedOptions,
    onChange: handleChange,
    onConfirm: handleConfirm,
    onCancel: handleCancel
  }), error && errorMessage && /*#__PURE__*/React.createElement("div", {
    className: "mr-select__error",
    style: {
      color: '#EE0A24',
      fontSize: '12px',
      marginTop: '4px',
      paddingLeft: typeof padding === 'string' ? padding.split(' ')[0] : '12px'
    }
  }, errorMessage));
};
var RefMrSelect = /*#__PURE__*/(0, _react.forwardRef)(MrSelect);
RefMrSelect.displayName = 'MrSelect';
var _default = exports["default"] = RefMrSelect;