@bifrostui/react 1.4.5 → 1.4.7-beta.0

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;

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/Picker/Picker.css

@@ -8,6 +8,7 @@
   --panel-container-height: var(--bui-picker-panel-height, 260px);
   --indicator-top: var(--bui-picker-indicator-top, 108px);
   --option-height: var(--bui-picker-option-height, 36px);
+  --bui-picker-confirm-disabled-opacity: 0.38;
   font-family: var(--bui-font-family);
 }
 .bui-picker .bui-drawer-content {
@@ -41,6 +42,10 @@
   line-height: var(--confirm-line-height);
   color: var(--bui-color-primary);
 }
+.bui-picker-confirm-disabled {
+  color: var(--bui-color-fg-default);
+  opacity: var(--bui-picker-confirm-disabled-opacity);
+}
 .bui-picker-container {
   width: 100%;
   height: var(--panel-container-height);

package/es/Picker/Picker.js

@@ -37,6 +37,12 @@ import { useLocaleText } from "../locales";
 import { formatOptions, pickerPanelType, safeData } from "./utils";
 import "./Picker.css";
 const prefixCls = "bui-picker";
+const checkDisabled = (values, columns) => values.find(
+  (value, index) => {
+    var _a, _b;
+    return (_b = (_a = columns == null ? void 0 : columns[index]) == null ? void 0 : _a.find((column) => (column == null ? void 0 : column.value) === value)) == null ? void 0 : _b.disabled;
+  }
+);
 const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
     className,
@@ -44,6 +50,8 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
     title,
     options = [],
     value,
+    confirmText: propConfirmText,
+    cancelText: propCancelText,
     contentProps,
     onConfirm,
     onOptionChange,
@@ -55,6 +63,8 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "title",
     "options",
     "value",
+    "confirmText",
+    "cancelText",
     "contentProps",
     "onConfirm",
     "onOptionChange",
@@ -66,6 +76,7 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const [columns, setColumns] = useState([]);
   const [internalValue, setInternalValue] = useState([]);
   const { cancel: cancelText, confirm: confirmText } = useLocaleText("picker");
+  const disabled = checkDisabled(internalValue, columns);
   useEffect(() => {
     if (!open)
       return;
@@ -88,7 +99,7 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
   }, [value, options]);
   const confirm = (e) => {
     const isMoving = rollerRefs.current.some((roller) => roller == null ? void 0 : roller.isMoving);
-    if (isMoving)
+    if (isMoving || disabled)
       return;
     const { safeValue } = safeData({
       value: internalValue,
@@ -147,7 +158,8 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
         onOptionChange == null ? void 0 : onOptionChange(e, {
           value: conbineValues,
           options: formatted,
-          currentOption: columnOption
+          currentOption: columnOption,
+          columnIndex
         });
       } else {
         const result = [...internalValue];
@@ -156,7 +168,8 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
         onOptionChange == null ? void 0 : onOptionChange(e, {
           value: result,
           options,
-          currentOption: columnOption
+          currentOption: columnOption,
+          columnIndex
         });
       }
     }
@@ -198,7 +211,16 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
       __spreadProps(__spreadValues({}, contentProps), {
         className: clsx(`${prefixCls}-content`, contentProps == null ? void 0 : contentProps.className)
       }),
-      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header` }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-cancel`, onClick: cancel }, cancelText), title && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title` }, title), /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-confirm`, onClick: confirm }, confirmText)),
+      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header` }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-cancel`, onClick: cancel }, propCancelText || cancelText), title && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title` }, title), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(`${prefixCls}-confirm`, {
+            [`${prefixCls}-confirm-disabled`]: disabled
+          }),
+          onClick: confirm
+        },
+        propConfirmText || confirmText
+      )),
       /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-container` }, columns.map((column, index) => /* @__PURE__ */ React.createElement(
         PickerPanel,
         {
@@ -206,7 +228,7 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
           key: index,
           options: column,
           columnIndex: index,
-          defaultValue: internalValue == null ? void 0 : internalValue[index],
+          value: internalValue == null ? void 0 : internalValue[index],
           onSelect: handleSelect,
           pickerStyle: others == null ? void 0 : others.style
         }

package/es/Picker/Picker.types.d.ts

@@ -10,6 +10,10 @@ export interface IPickerOptionItem {
      * 选项对应唯一的值
      */
     value: string | number;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
 }
 export type ICascadePickerChildOptionItem = IPickerOptionItem & {
     /**
@@ -34,6 +38,14 @@ export type PickerProps<D extends React.ElementType = 'div', P = DrawerProps> =
          * 标题
          */
         title?: string;
+        /**
+         * 确认文本内容
+         */
+        confirmText?: string;
+        /**
+         * 取消文本内容
+         */
+        cancelText?: string;
         /**
          * 列表数据
          * @default []
@@ -61,6 +73,7 @@ export type PickerProps<D extends React.ElementType = 'div', P = DrawerProps> =
             value: (string | number)[];
             options: ICascadePickerChildOptionItem[][];
             currentOption: ICascadePickerChildOptionItem;
+            columnIndex: number;
         }) => void;
         /**
          * 点击取消按钮时候回调
@@ -85,9 +98,9 @@ export type PickerPanelProps<D extends React.ElementType = 'div', P = {}> = Over
          */
         options?: ICascadePickerChildOptionItem[];
         /**
-         * 默认值
+         * 选中值
          */
-        defaultValue?: string | number;
+        value?: string | number;
         /**
          * 列索引
          */

package/es/Picker/PickerPanel.css

@@ -1,4 +1,5 @@
 .bui-picker-panel {
+  --bui-picker-option-disabled-opacity: 0.38;
   flex: 1;
   flex-shrink: 0;
   position: relative;
@@ -56,6 +57,9 @@
   white-space: nowrap;
   width: 100%;
 }
+.bui-picker-panel-option-disabled {
+  opacity: var(--bui-picker-option-disabled-opacity);
+}
 .bui-picker-panel-option-hidden {
   visibility: hidden;
   opacity: 0;

package/es/Picker/PickerPanel.js

@@ -36,13 +36,13 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
     var _b;
     const _a = props, {
       options = [],
-      defaultValue,
+      value,
       onSelect,
       columnIndex,
       pickerStyle
     } = _a, others = __objRest(_a, [
       "options",
-      "defaultValue",
+      "value",
       "onSelect",
       "columnIndex",
       "pickerStyle"
@@ -72,9 +72,9 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
     useTouchEmulator(PickerPanelRef.current);
     const updateSelect = () => {
       let index = -1;
-      if (defaultValue) {
+      if (value) {
         options.some((item, idx) => {
-          if (item.value === defaultValue) {
+          if (item.value === value) {
             index = idx;
             return true;
           }
@@ -92,7 +92,7 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
       return () => {
         clearTimeout(timer);
       };
-    }, [options]);
+    }, [options, value]);
     const setTransform = (type, deg, time = DEFAULT_DURATION, translateY = 0) => {
       let nTime = time;
       if (type !== TOUCH_END) {
@@ -225,7 +225,8 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
           "div",
           {
             className: clsx(`${prefixCls}-option`, {
-              [`${prefixCls}-option-hidden`]: i + 1 <= currIndex - 8 || i + 1 >= currIndex + 8
+              [`${prefixCls}-option-hidden`]: i + 1 <= currIndex - 8 || i + 1 >= currIndex + 8,
+              [`${prefixCls}-option-disabled`]: item == null ? void 0 : item.disabled
             }),
             key: `${item == null ? void 0 : item.value}-${i}`,
             style: {