@mijadesign/mjui-react-taro/dist/esm/selector.taro-CZ-RLKSZ.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as __rest } from "./tslib.es6-iWu3F_1J.js";
import React, { forwardRef } from "react";
import classNames from "classnames";
/* empty css                        */
import { ScrollView } from "@tarojs/components";
import { u as usePropsValue } from "./use-props-value-DuhZMy4U.js";
const n = {
  size: "",
  classPrefix: "icon",
  fontClassName: "iconfont",
  color: "",
  tag: "i",
  onClick: (e) => {
  },
  className: ""
};
function h(e) {
  return e === "" ? "" : Number.isNaN(Number(e)) ? String(e) : `${e}px`;
}
function l(e) {
  const a = "selected-fill", {
    size: i,
    classPrefix: r,
    color: f,
    tag: m,
    children: d,
    className: p,
    fontClassName: N,
    style: u,
    logValue: o,
    onClick: s,
    ...k
  } = {
    ...n,
    ...e
  }, C = (g) => {
    s && s(g);
  }, t = {}, c = h(i);
  return c && (t.fontSize = c), React.createElement(
    m,
    {
      className: classNames(`${N} ${r}-${a} ${p || ""}`, { "auto-track": !!o }),
      style: {
        color: f,
        ...t,
        ...u
      },
      ...k,
      onClick: C,
      "data-log-name": o
    },
    d
  );
}
l.defaultProps = n;
l.displayName = "FiresoonMobileIcon-selected-fill";
const Selector = forwardRef((props, ref) => {
  const { value: propsValue, defaultValue: propsDefaultValue, options = [], multiple = false, span, wrap = true, size = "default", className, disabled, onChange, selectedIcon } = props, rest = __rest(props, ["value", "defaultValue", "options", "multiple", "span", "wrap", "size", "className", "disabled", "onChange", "selectedIcon"]);
  const formatValue = (value2) => {
    if (value2 === void 0 || value2 === null)
      return value2;
    if (multiple && !Array.isArray(value2)) {
      return [value2];
    }
    if (!multiple && Array.isArray(value2)) {
      return value2[0];
    }
    return value2;
  };
  const value = formatValue(propsValue);
  const defaultValue = formatValue(propsDefaultValue);
  const [innerValue, setInnerValue] = usePropsValue({ value, onChange, defaultValue });
  const innerStyle = span ? {
    [`--nutui-selector-columns`]: span
  } : {};
  const onChecked = (value2, item) => {
    if ((item === null || item === void 0 ? void 0 : item.disabled) || disabled)
      return;
    const _value = (() => {
      if (multiple && (innerValue === null || innerValue === void 0 ? void 0 : innerValue.includes(value2))) {
        return innerValue === null || innerValue === void 0 ? void 0 : innerValue.filter((v) => v !== value2);
      }
      return multiple ? [...innerValue !== null && innerValue !== void 0 ? innerValue : [], value2] : value2;
    })();
    if (onChange) {
      onChange(_value, item);
    } else {
      setInnerValue(_value);
    }
  };
  return React.createElement(
    ScrollView,
    { scrollX: true, bounces: false, enhanced: true },
    React.createElement("div", Object.assign({ className: classNames("mj-selector", className, {
      "mj-selector-disabled": !!disabled,
      "mj-selector-wrap": !!wrap,
      [`mj-selector-${size}`]: !!size
    }), ref }, rest), options === null || options === void 0 ? void 0 : options.map((item) => {
      const isSelected = multiple ? innerValue === null || innerValue === void 0 ? void 0 : innerValue.includes(item.value) : innerValue === item.value;
      return React.createElement(
        "div",
        { key: item === null || item === void 0 ? void 0 : item.value, className: classNames("mj-selector-item", {
          "mj-selector-item-active": isSelected,
          "mj-selector-item-disabled": item === null || item === void 0 ? void 0 : item.disabled,
          [`mj-selector-item-columns`]: !!span
        }), style: innerStyle, onClick: () => onChecked(item === null || item === void 0 ? void 0 : item.value, item) },
        React.createElement("div", null, item === null || item === void 0 ? void 0 : item.label),
        isSelected && (selectedIcon === false ? null : selectedIcon !== null && selectedIcon !== void 0 ? selectedIcon : React.createElement(l, { className: "mj-selector-selected" }))
      );
    }))
  );
});
Selector.displayName = "MjSelector";
export {
  Selector as S
};