@bifrostui/react 1.4.6 → 1.4.7

package/dist/ItemSelector/Selector/index.js

@@ -0,0 +1,48 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Selector_exports = {};
+__export(Selector_exports, {
+  default: () => Selector_default
+});
+module.exports = __toCommonJS(Selector_exports);
+var import_react = __toESM(require("react"));
+var import_index = require("./index.css");
+const Selector = (props) => {
+  const { item, onSelect } = props;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: "bui-item-selector-item",
+      onClick: (e) => {
+        onSelect == null ? void 0 : onSelect(e, item);
+      }
+    },
+    item.name
+  );
+};
+var Selector_default = Selector;

package/dist/ItemSelector/index.d.ts

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

package/dist/ItemSelector/index.js

@@ -0,0 +1,41 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ItemSelector_exports = {};
+__export(ItemSelector_exports, {
+  ItemSelector: () => import_ItemSelector.default,
+  default: () => import_ItemSelector.default
+});
+module.exports = __toCommonJS(ItemSelector_exports);
+var import_ItemSelector = __toESM(require("./ItemSelector"));
+__reExport(ItemSelector_exports, require("./ItemSelector.types"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ItemSelector,
+  ...require("./ItemSelector.types")
+});

package/dist/ItemSelector/miniapp.css

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

package/dist/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>;
-}, "open" | keyof import("@bifrostui/types").ICommonProps | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "open" | "container" | "disablePortal" | keyof import("@bifrostui/types").ICommonProps | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/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/dist/index.js

@@ -56,6 +56,7 @@ __reExport(src_exports, require("./Loading"), module.exports);
 __reExport(src_exports, require("./TabBar"), module.exports);
 __reExport(src_exports, require("./Countdown"), module.exports);
 __reExport(src_exports, require("./CitySelector"), module.exports);
+__reExport(src_exports, require("./ItemSelector"), module.exports);
 __reExport(src_exports, require("./Picker"), module.exports);
 __reExport(src_exports, require("./CollapsePanel"), module.exports);
 __reExport(src_exports, require("./Breadcrumb"), module.exports);
@@ -107,6 +108,7 @@ __reExport(src_exports, require("./locales"), module.exports);
   ...require("./TabBar"),
   ...require("./Countdown"),
   ...require("./CitySelector"),
+  ...require("./ItemSelector"),
   ...require("./Picker"),
   ...require("./CollapsePanel"),
   ...require("./Breadcrumb"),

package/es/CitySelector/CitySelectorCore.js

@@ -144,12 +144,12 @@ const CitySelector = /* @__PURE__ */ React.forwardRef(
     const closeHandler = (e) => {
       onClose == null ? void 0 : onClose(e);
     };
-    const renderTitile = (title, titleCode) => {
+    const renderTitle = (title, titleCode) => {
       const parseTitle = (titleCode || title).toUpperCase();
       return /* @__PURE__ */ React.createElement("div", { className: "select-city-title", id: disableIndex ? "" : parseTitle }, title == null ? void 0 : title.toUpperCase());
     };
     const renderCity = (citys, title, titleCode) => {
-      return /* @__PURE__ */ React.createElement("div", null, renderTitile(title, titleCode), /* @__PURE__ */ React.createElement("div", { className: "select-city-buttons" }, citys.map((city, index) => {
+      return /* @__PURE__ */ React.createElement("div", null, renderTitle(title, titleCode), /* @__PURE__ */ React.createElement("div", { className: "select-city-buttons" }, citys.map((city, index) => {
         return /* @__PURE__ */ React.createElement(Selector, { key: index, city, onSelect: selectHandler });
       })));
     };
@@ -170,7 +170,7 @@ const CitySelector = /* @__PURE__ */ React.forwardRef(
       ) : null, currentCity ? renderCity([currentCity], currentCityGroupName, GPS_TYPE.code) : null, (hotCities == null ? void 0 : hotCities.length) > 0 ? renderCity(hotCities, hotCitiesGroupName, HOT_CITY_TYPE.code) : null, (cities == null ? void 0 : cities.length) > 0 ? /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-list-container` }, cities.map((item, cityGroupIndex) => {
         if (!(item == null ? void 0 : item.groupName))
           return null;
-        return /* @__PURE__ */ React.createElement("div", { key: cityGroupIndex }, renderTitile(item.groupName, item.groupName), /* @__PURE__ */ React.createElement("ul", { className: `${prefixCls}-list` }, item.cities.map((city, cityIndex) => {
+        return /* @__PURE__ */ React.createElement("div", { key: cityGroupIndex }, renderTitle(item.groupName, item.groupName), /* @__PURE__ */ React.createElement("ul", { className: `${prefixCls}-list` }, item.cities.map((city, cityIndex) => {
           return /* @__PURE__ */ React.createElement(
             "li",
             {

package/es/ItemSelector/ItemSelector.css

@@ -0,0 +1,120 @@
+:root,
+page,
+xhs-page {
+  --bui-item-selector-item-width: 111px;
+  --bui-item-selector-item-height: 36px;
+  --bui-item-selector-item-border-radius: 20px;
+  --bui-item-selector-item-margin: 4.5px 0 4.5px 9px;
+  --bui-item-selector-title-height: 45px;
+  --bui-item-selector-title-line-height: 45px;
+  --bui-item-selector-btn-close-size: 45px;
+  --bui-item-selector-btn-close-font-size: 20px;
+  --bui-item-selector-container-with-title-height: calc(100% - var(--bui-item-selector-title-height));
+  --bui-item-selector-item-container-min-height: 500px;
+  --bui-item-selector-select-item-buttons-padding: 7.5px 0 0 3px;
+  --bui-item-selector-select-item-title-line-height: 15px;
+  --bui-item-selector-list-item-height: 45px;
+  --bui-item-selector-item-index-has-title-top: calc(50% + var(--bui-item-selector-title-height) / 2);
+  --bui-item-selector-index-item-height: 20px;
+}
+.bui-item-selector {
+  font-family: var(--bui-font-family);
+  height: 100%;
+  position: relative;
+}
+.bui-item-selector-title {
+  width: 100%;
+  height: var(--bui-item-selector-title-height);
+  color: var(--bui-color-fg-default);
+  font-size: var(--bui-title-size-3);
+  line-height: var(--bui-item-selector-title-line-height);
+  text-align: center;
+  position: sticky;
+  top: 0;
+  z-index: 1004;
+  border-bottom: solid 1px var(--bui-color-border-default);
+  background-color: var(--bui-color-bg-view);
+}
+.bui-item-selector-btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--bui-item-selector-btn-close-size);
+  height: var(--bui-item-selector-btn-close-size);
+  color: var(--bui-color-fg-muted);
+  text-align: center;
+  font-size: var(--bui-item-selector-btn-close-font-size);
+}
+.bui-item-selector-scroll-view-container {
+  height: 100%;
+}
+.bui-item-selector-scroll-view-container.container-has-title {
+  height: var(--bui-item-selector-container-with-title-height);
+}
+.bui-item-selector-all-item {
+  min-height: var(--bui-item-selector-item-container-min-height);
+  font-size: var(--bui-text-size-2);
+  width: 100%;
+  background: var(--bui-color-bg-view);
+  align-self: flex-start;
+}
+.bui-item-selector-all-item .select-item-buttons {
+  display: flex;
+  flex-flow: wrap;
+  padding: var(--bui-item-selector-select-item-buttons-padding);
+}
+.bui-item-selector-all-item .select-item-title {
+  font-size: var(--bui-title-size-4);
+  line-height: var(--bui-item-selector-select-item-title-line-height);
+  font-weight: var(--bui-font-weight-bold);
+  padding-left: var(--bui-spacing-lg);
+  padding-top: var(--bui-spacing-md);
+}
+.bui-item-selector-list {
+  padding-left: var(--bui-spacing-lg);
+  list-style-type: none;
+}
+.bui-item-selector-list-item {
+  height: var(--bui-item-selector-list-item-height);
+  font-size: var(--bui-title-size-4);
+  display: flex;
+  align-items: center;
+}
+.bui-item-selector-list-item:not(:last-child) {
+  border-bottom: 0.5px solid var(--bui-color-border-default);
+}
+.bui-item-selector-index-container {
+  z-index: 1001;
+  position: absolute;
+  white-space: nowrap;
+  right: 0;
+  top: 50%;
+  width: 40px;
+  will-change: transform;
+  transform: translate(0, -50%);
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+}
+.bui-item-selector-index-container.left-in {
+  opacity: 1;
+  transform: translate(0, -50%);
+}
+.bui-item-selector-index-container.item-index-has-title {
+  top: var(--bui-item-selector-item-index-has-title-top);
+}
+.bui-item-selector-index-container ul {
+  margin: 0;
+  padding: 0;
+  float: left;
+  width: 100%;
+  touch-action: none;
+}
+.bui-item-selector-index-container li {
+  list-style: none;
+  height: var(--bui-item-selector-index-item-height);
+  text-align: center;
+  font-size: var(--bui-text-size-3);
+  color: var(--bui-color-info, --bui-color-info);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/es/ItemSelector/ItemSelector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ItemSelectorProps } from './ItemSelector.types';
+declare const ItemSelector: React.ForwardRefExoticComponent<Omit<ItemSelectorProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default ItemSelector;

package/es/ItemSelector/ItemSelector.js

@@ -0,0 +1,57 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React, { useEffect, useState } from "react";
+import ItemSelectorCore from "./ItemSelectorCore";
+const ItemSelector = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const { items } = props;
+    const [height, setHeight] = useState("");
+    const touchHandler = (e, scrollToCode) => {
+      var _a;
+      const t = document.elementFromPoint(
+        e.changedTouches[0].clientX,
+        e.changedTouches[0].clientY
+      );
+      const code = (_a = t == null ? void 0 : t.dataset) == null ? void 0 : _a.code;
+      scrollToCode(code);
+    };
+    useEffect(() => {
+      var _a;
+      if (!(items == null ? void 0 : items.length) || height)
+        return;
+      const screenHeight = window.innerHeight || document.documentElement.clientHeight;
+      const domHeight = (_a = document.querySelector(".bui-item-selector-scroll-view-container")) == null ? void 0 : _a.getBoundingClientRect().height;
+      setHeight(`${domHeight / screenHeight * 100}vh`);
+    }, [items]);
+    return /* @__PURE__ */ React.createElement(
+      ItemSelectorCore,
+      __spreadProps(__spreadValues({}, props), {
+        ref,
+        touchHandler,
+        height
+      })
+    );
+  }
+);
+ItemSelector.displayName = "BuiItemSelector";
+var ItemSelector_default = ItemSelector;
+export {
+  ItemSelector_default as default
+};

package/es/ItemSelector/ItemSelector.miniapp.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ItemSelectorProps } from './ItemSelector.types';
+import './miniapp.less';
+declare const ItemSelector: React.ForwardRefExoticComponent<Omit<ItemSelectorProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default ItemSelector;

package/es/ItemSelector/ItemSelector.miniapp.js

@@ -0,0 +1,98 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React, { useEffect, useRef, useState } from "react";
+import Taro from "@tarojs/taro";
+import ItemSelectorCore from "./ItemSelectorCore";
+import "./miniapp.css";
+const ItemSelector = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const { items } = props;
+    const containerTop = useRef(0);
+    const codeHeight = useRef(0);
+    const [height, setHeight] = useState("");
+    const queryContainerTop = (cbk) => {
+      const query = Taro.createSelectorQuery();
+      query.select(".bui-item-selector-index-container").boundingClientRect();
+      query.exec((res) => {
+        var _a;
+        containerTop.current = (_a = res[0]) == null ? void 0 : _a.top;
+        cbk == null ? void 0 : cbk();
+      });
+    };
+    useEffect(() => {
+      if ((items == null ? void 0 : items.length) === 0 || codeHeight.current)
+        return;
+      setTimeout(() => {
+        const query = Taro.createSelectorQuery();
+        query.select(".bui-item-selector-index-item").boundingClientRect();
+        query.exec((res) => {
+          var _a;
+          codeHeight.current = (_a = res[0]) == null ? void 0 : _a.height;
+        });
+      }, 300);
+    }, [items, height]);
+    useEffect(() => {
+      if (!(items == null ? void 0 : items.length) || height)
+        return;
+      const { screenHeight } = Taro.getSystemInfoSync();
+      const query = Taro.createSelectorQuery();
+      query.select(".bui-item-selector-scroll-view-container").boundingClientRect();
+      query.exec((codeRect) => {
+        var _a;
+        const domHeight = (_a = codeRect == null ? void 0 : codeRect[0]) == null ? void 0 : _a.height;
+        setHeight(`${domHeight / screenHeight * 100}vh`);
+      });
+    }, [items]);
+    const parseIndex = (length, index) => {
+      if (index <= 0)
+        return 0;
+      if (index >= length - 1)
+        return length - 1;
+      return index;
+    };
+    const pxToCode = (clientY, scrollToCode, codeGroup) => {
+      let index = Math.floor(
+        (clientY - containerTop.current) / codeHeight.current
+      );
+      index = parseIndex(codeGroup.length, index);
+      const codeItem = codeGroup[index];
+      scrollToCode(codeItem.code || codeItem);
+    };
+    const touchHandler = (event, scrollToCode, codeGroup) => {
+      const { clientY } = event.changedTouches[0];
+      queryContainerTop(() => {
+        pxToCode(clientY, scrollToCode, codeGroup);
+      });
+    };
+    return /* @__PURE__ */ React.createElement(
+      ItemSelectorCore,
+      __spreadProps(__spreadValues({}, props), {
+        ref,
+        touchHandler,
+        height
+      })
+    );
+  }
+);
+ItemSelector.displayName = "BuiItemSelector";
+var ItemSelector_miniapp_default = ItemSelector;
+export {
+  ItemSelector_miniapp_default as default
+};

package/es/ItemSelector/ItemSelector.types.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { OverrideProps } from '@bifrostui/types';
+export type itemType = {
+    /** Item名 */
+    name: string;
+};
+export type ItemGroup = {
+    /** Item列表 */
+    items: itemType[];
+    /** 组名 */
+    groupName?: string;
+    /** 索引字母 */
+    indexName?: string;
+    /** 索引Code */
+    indexCode?: string;
+    /** 是否平铺 */
+    isFlat?: boolean;
+};
+export type ItemSelectorProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /** Item列表 */
+        items: ItemGroup[];
+        /** 禁用展示索引 默认false 即展示索引 */
+        disableIndex?: boolean;
+        /** 头部标题 */
+        title?: string;
+        /** 选择Item回调 */
+        onSelect: (e: React.SyntheticEvent, data: {
+            item: itemType;
+            group: ItemGroup;
+        }) => void;
+        /** 和title配合使用，头部右侧的关闭回调 */
+        onClose?: (e: React.SyntheticEvent) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export type ItemSelectorCoreProps = ItemSelectorProps & {
+    touchHandler: any;
+    height?: string;
+};

package/es/ItemSelector/ItemSelector.types.js

@@ -0,0 +1 @@
+export {};

package/es/ItemSelector/ItemSelectorCore.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ItemSelectorCoreProps } from './ItemSelector.types';
+import './ItemSelector.less';
+declare const ItemSelector: React.ForwardRefExoticComponent<Omit<ItemSelectorCoreProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default ItemSelector;