@bifrostui/react 1.4.6 → 1.4.7

package/es/ItemSelector/ItemSelectorCore.js

@@ -0,0 +1,190 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React, { useState, useEffect, useRef } from "react";
+import clsx from "clsx";
+import { throttle, useForkRef, useTouchEmulator } from "@bifrostui/utils";
+import ScrollView from "../ScrollView";
+import Selector from "./Selector";
+import "./ItemSelector.css";
+const DEVIATION_HEIGHT = "6vmin";
+const prefixCls = "bui-item-selector";
+const ItemSelector = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const _a = props, {
+      className,
+      title: pageTitle,
+      items,
+      disableIndex,
+      touchHandler,
+      height,
+      onSelect,
+      onClose
+    } = _a, others = __objRest(_a, [
+      "className",
+      "title",
+      "items",
+      "disableIndex",
+      "touchHandler",
+      "height",
+      "onSelect",
+      "onClose"
+    ]);
+    const itemRef = useRef(null);
+    const nodeRef = useForkRef(ref, itemRef);
+    useTouchEmulator(itemRef.current);
+    const [codeGroup, setCodeGroup] = useState([]);
+    const [codeShow, setCodeShow] = useState(false);
+    const [targetId, setTargetId] = useState("");
+    const getGroupName = (item) => item.groupName || "";
+    const getIdxName = (item) => typeof item.indexName === "string" ? item.indexName : getGroupName(item);
+    const getIdxCode = (item) => typeof item.indexCode === "string" ? item.indexCode : getIdxName(item);
+    const renderTitle = (item) => {
+      const title = getGroupName(item);
+      return title ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "select-item-title",
+          id: disableIndex ? "" : getIdxCode(item)
+        },
+        title
+      ) : null;
+    };
+    useEffect(() => {
+      if (!items || (items == null ? void 0 : items.length) === 0 || codeGroup.length !== 0 || disableIndex) {
+        return;
+      }
+      setCodeGroup(
+        items.map((item) => {
+          return {
+            name: getIdxName(item),
+            code: getIdxCode(item)
+          };
+        })
+      );
+    }, [items]);
+    useEffect(() => {
+      if (codeGroup.length === 0)
+        return;
+      setCodeShow(true);
+    }, [codeGroup]);
+    const scrollToCode = (targetCode) => {
+      if (!targetCode)
+        return;
+      setTargetId((oldCode) => {
+        if (targetCode !== oldCode)
+          return targetCode;
+        return oldCode;
+      });
+    };
+    const touchCbk = (e) => {
+      e.stopPropagation();
+      touchHandler == null ? void 0 : touchHandler(e, scrollToCode, codeGroup);
+    };
+    const codeClickHandler = (rightCode) => {
+      setTargetId(rightCode);
+    };
+    const scrollHandler = throttle(() => {
+      if (targetId) {
+        setTargetId(void 0);
+      }
+    }, 500);
+    const closeHandler = (e) => {
+      onClose == null ? void 0 : onClose(e);
+    };
+    return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: clsx(prefixCls, className), ref: nodeRef }, others), pageTitle ? /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title` }, pageTitle, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-btn-close`, onClick: closeHandler }, "\u2715")) : null, /* @__PURE__ */ React.createElement(
+      ScrollView,
+      {
+        scrollIntoView: targetId,
+        scrollY: true,
+        className: clsx(`${prefixCls}-scroll-view-container tph`, {
+          "container-has-title": pageTitle
+        }),
+        onScroll: scrollHandler
+      },
+      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-all-item` }, (items == null ? void 0 : items.length) > 0 ? /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-list-container` }, items.map((item, itemGroupIndex) => {
+        if (!(item == null ? void 0 : item.groupName))
+          return null;
+        return /* @__PURE__ */ React.createElement("div", { key: itemGroupIndex }, renderTitle(item), item.isFlat ? /* @__PURE__ */ React.createElement("div", { className: "select-item-buttons" }, item.items.map((it, index) => {
+          return /* @__PURE__ */ React.createElement(
+            Selector,
+            {
+              key: index,
+              item: it,
+              onSelect: (e) => {
+                onSelect(e, { item: it, group: item });
+              }
+            }
+          );
+        })) : /* @__PURE__ */ React.createElement("ul", { className: `${prefixCls}-list` }, item.items.map((it, itemIndex) => {
+          return /* @__PURE__ */ React.createElement(
+            "li",
+            {
+              className: `${prefixCls}-list-item`,
+              key: itemIndex,
+              onClick: (e) => {
+                onSelect(e, { item: it, group: item });
+              }
+            },
+            it.name
+          );
+        })));
+      })) : null)
+    ), (codeGroup == null ? void 0 : codeGroup.length) > 0 && height ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(`${prefixCls}-index-container`, {
+          "left-in": codeShow,
+          "item-index-has-title": pageTitle
+        })
+      },
+      /* @__PURE__ */ React.createElement("ul", { onTouchMove: touchCbk, className: `${prefixCls}-index-list` }, codeGroup.map((item, idx) => {
+        return item.name ? /* @__PURE__ */ React.createElement(
+          "li",
+          {
+            className: `${prefixCls}-index-item`,
+            key: idx,
+            "data-code": item.code,
+            onClick: () => {
+              codeClickHandler(item.code);
+            },
+            style: {
+              maxHeight: `calc((${height} - ${DEVIATION_HEIGHT}) / ${codeGroup.length})`
+            }
+          },
+          item.name
+        ) : null;
+      }))
+    ) : null);
+  }
+);
+ItemSelector.displayName = "BuiItemSelector";
+var ItemSelectorCore_default = ItemSelector;
+export {
+  ItemSelectorCore_default as default
+};

package/es/ItemSelector/Selector/index.css

@@ -0,0 +1,11 @@
+.bui-item-selector-item {
+  width: var(--bui-item-selector-item-width);
+  height: var(--bui-item-selector-item-height);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--bui-item-selector-item-border-radius);
+  margin: var(--bui-item-selector-item-margin);
+  background-color: var(--bui-color-bg-default);
+  font-size: var(--bui-text-size-2);
+}

package/es/ItemSelector/Selector/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { itemType } from '../ItemSelector.types';
+import './index.less';
+type propsType = {
+    item: itemType;
+    onSelect: (e: React.SyntheticEvent, item: itemType) => void;
+};
+declare const Selector: (props: propsType) => React.JSX.Element;
+export default Selector;

package/es/ItemSelector/Selector/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import "./index.css";
+const Selector = (props) => {
+  const { item, onSelect } = props;
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: "bui-item-selector-item",
+      onClick: (e) => {
+        onSelect == null ? void 0 : onSelect(e, item);
+      }
+    },
+    item.name
+  );
+};
+var Selector_default = Selector;
+export {
+  Selector_default as default
+};

package/es/ItemSelector/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ItemSelector, default } from './ItemSelector';
+export * from './ItemSelector.types';

package/es/ItemSelector/index.js

@@ -0,0 +1,6 @@
+import { default as default2, default as default3 } from "./ItemSelector";
+export * from "./ItemSelector.types";
+export {
+  default2 as ItemSelector,
+  default3 as default
+};

package/es/ItemSelector/miniapp.css

@@ -0,0 +1,4 @@
+.bui-item-scroll-view-container {
+  height: 100%;
+  display: block;
+}

package/es/Modal/Modal.miniapp.d.ts

@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     keepMounted?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, keyof import("@bifrostui/types").ICommonProps | "container" | "open" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "open" | keyof import("@bifrostui/types").ICommonProps | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/es/index.d.ts

@@ -40,6 +40,7 @@ export * from './Loading';
 export * from './TabBar';
 export * from './Countdown';
 export * from './CitySelector';
+export * from './ItemSelector';
 export * from './Picker';
 export * from './CollapsePanel';
 export * from './Breadcrumb';

package/es/index.js

@@ -40,6 +40,7 @@ export * from "./Loading";
 export * from "./TabBar";
 export * from "./Countdown";
 export * from "./CitySelector";
+export * from "./ItemSelector";
 export * from "./Picker";
 export * from "./CollapsePanel";
 export * from "./Breadcrumb";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "clsx": "^1.2.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/icons": "1.4.6",
-    "@bifrostui/styles": "1.4.6",
-    "@bifrostui/utils": "1.4.6",
-    "@bifrostui/types": "1.4.6"
+    "@bifrostui/styles": "1.4.7",
+    "@bifrostui/icons": "1.4.7",
+    "@bifrostui/types": "1.4.7",
+    "@bifrostui/utils": "1.4.7"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",