@bifrostui/react 1.3.2 → 1.4.0-beta.1

package/es/NavBar/NavBar.css

@@ -1,14 +1,18 @@
 .bui-navbar {
+  --width: var(--bui-navbar-width, 100%);
   --height: var(--bui-navbar-height, 45px);
+  --padding: var(--bui-navbar-padding, 0 8px);
   --icon-size: var(--bui-navbar-icon-size, 24px);
+  --icon-font-size: var(--bui-navbar-icon-font-size, var(--bui-title-size-3));
   --background-color: var(--bui-navbar-background-color, var(--bui-color-white));
   --border-bottom: var(--bui-navbar-border-bottom, none);
   --z-index: var(--bui-navbar-z-index, auto);
+  --title-max-width: var(--bui-navbar-title-max-width, 60%);
   position: relative;
-  width: 100%;
+  width: var(--width);
   height: var(--height);
   box-sizing: border-box;
-  padding: 0 8px;
+  padding: var(--padding);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -25,8 +29,8 @@
   width: 100%;
 }
 .bui-navbar-title {
-  max-width: 60%;
-  padding: 0 8px;
+  max-width: var(--title-max-width);
+  padding: var(--padding);
   font-size: var(--bui-title-size-2);
   width: auto;
   overflow: hidden;
@@ -38,7 +42,7 @@
   flex: 1;
   display: flex;
   align-items: center;
-  font-size: var(--bui-title-size-3);
+  font-size: var(--icon-font-size);
 }
 .bui-navbar-left {
   justify-content: flex-start;

package/es/Picker/Picker.css

@@ -1,53 +1,49 @@
 .bui-picker {
-  --cancel-color: var(--bui-color-fg-default);
-  --cancel-font-size: var(--bui-title-size-4, 15px);
-  --confirm-color: var(--bui-color-primary);
-  --confirm-font-size: var(--bui-title-size-4, 15px);
-  --title-color: var(--bui-color-fg-default);
-  --title-font-size: var(--bui-title-size-3, 16px);
-  --title-font-weight: var(--bui-font-weight-medium, 500);
-  --panel-container-height: 260px;
-  --indicator-top: 108px;
-  --indicator-height: 36px;
-  --indicator-border-color: var(--bui-color-border-default);
-  --option-color: var(--bui-color-fg-default);
-  --option-font-size: var(--bui-title-size-4);
-  --option-height: 36px;
+  --header-height: var(--bui-picker-header-height, 50px);
+  --header-padding: var(--bui-picker-header-padding, 0 var(--bui-spacing-lg));
+  --cancel-height: var(--bui-picker-cancel-height, 100%);
+  --cancel-line-height: var(--bui-picker-cancel-line-height, 50px);
+  --confirm-height: var(--bui-picker-confirm-height, 100%);
+  --confirm-line-height: var(--bui-picker-confirm-line-height, 50px);
+  --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);
   font-family: var(--bui-font-family);
 }
 .bui-picker .bui-drawer-content {
   border-radius: var(--bui-shape-radius-drawer) var(--bui-shape-radius-drawer) 0 0;
 }
 .bui-picker-header {
-  height: 50px;
+  height: var(--header-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 var(--bui-spacing-lg);
+  padding: var(--header-padding);
 }
 .bui-picker-cancel {
-  width: 40px;
-  height: 100%;
-  font-size: var(--cancel-font-size);
+  cursor: pointer;
+  height: var(--cancel-height);
+  font-size: var(--bui-title-size-4);
   text-align: center;
-  line-height: 50px;
-  color: var(--cancel-color);
+  line-height: var(--cancel-line-height);
+  color: var(--bui-color-fg-default);
 }
 .bui-picker-title {
-  font-size: var(--title-font-size);
-  color: var(--title-color);
-  font-weight: var(--title-font-weight);
+  font-size: var(--bui-title-size-3);
+  color: var(--bui-color-fg-default);
+  font-weight: var(--bui-font-weight-medium);
 }
 .bui-picker-confirm {
-  width: 40px;
-  height: 100%;
-  font-size: var(--confirm-font-size);
+  cursor: pointer;
+  height: var(--confirm-height);
+  font-size: var(--bui-title-size-4);
   text-align: center;
-  line-height: 50px;
-  color: var(--confirm-color);
+  line-height: var(--confirm-line-height);
+  color: var(--bui-color-primary);
 }
 .bui-picker-container {
   width: 100%;
   height: var(--panel-container-height);
   display: flex;
+  overflow: hidden;
 }

package/es/Picker/Picker.js

@@ -33,7 +33,8 @@ import clsx from "clsx";
 import React, { useEffect, useRef, useState, useCallback } from "react";
 import Drawer from "../Drawer";
 import PickerPanel from "./PickerPanel";
-import { formatOptions, pickerPanelType } from "./utils";
+import { useLocaleText } from "../locales";
+import { formatOptions, pickerPanelType, safeData } from "./utils";
 import "./Picker.css";
 const prefixCls = "bui-picker";
 const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
@@ -64,6 +65,7 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const rollerRefs = useRef([]);
   const [columns, setColumns] = useState([]);
   const [internalValue, setInternalValue] = useState([]);
+  const { cancel: cancelText, confirm: confirmText } = useLocaleText("picker");
   useEffect(() => {
     if (!open)
       return;
@@ -85,13 +87,18 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
     }
   }, [value, options]);
   const confirm = (e) => {
-    const payload = {
-      value: internalValue,
-      options: columns
-    };
     const isMoving = rollerRefs.current.some((roller) => roller == null ? void 0 : roller.isMoving);
     if (isMoving)
       return;
+    const { safeValue } = safeData({
+      value: internalValue,
+      formatted: columns,
+      options
+    });
+    const payload = {
+      value: safeValue,
+      options: columns
+    };
     onConfirm == null ? void 0 : onConfirm(e, payload);
     onClose == null ? void 0 : onClose(e, __spreadValues({
       from: "confirm"
@@ -99,11 +106,18 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
   };
   const cancel = (e) => {
     onCancel == null ? void 0 : onCancel(e);
-    onClose == null ? void 0 : onClose(e, {
-      from: "cancel",
+    const { safeValue } = safeData({
       value: internalValue,
-      options: columns
+      formatted: columns,
+      options
     });
+    const payload = {
+      value: safeValue,
+      options: columns
+    };
+    onClose == null ? void 0 : onClose(e, __spreadValues({
+      from: "cancel"
+    }, payload));
   };
   const updateItem = (e, columnOption, columnIndex) => {
     var _a2, _b, _c;
@@ -136,7 +150,7 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
           currentOption: columnOption
         });
       } else {
-        const result = internalValue;
+        const result = [...internalValue];
         result[columnIndex] = columnOption.value;
         setInternalValue(result);
         onOptionChange == null ? void 0 : onOptionChange(e, {
@@ -151,8 +165,13 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
     updateItem(e, columnOption, columnIndex);
   };
   const handleClose = (e, data) => {
-    onClose == null ? void 0 : onClose(e, __spreadValues({
+    const { safeValue } = safeData({
       value: internalValue,
+      formatted: columns,
+      options
+    });
+    onClose == null ? void 0 : onClose(e, __spreadValues({
+      value: safeValue,
       options: columns
     }, data));
   };
@@ -176,7 +195,7 @@ 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 }, "\u53D6\u6D88"), title && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title` }, title), /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-confirm`, onClick: confirm }, "\u786E\u8BA4")),
+      /* @__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}-container` }, columns.map((column, index) => /* @__PURE__ */ React.createElement(
         PickerPanel,
         {
@@ -185,7 +204,8 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
           options: column,
           columnIndex: index,
           defaultValue: internalValue == null ? void 0 : internalValue[index],
-          onSelect: handleSelect
+          onSelect: handleSelect,
+          pickerStyle: others == null ? void 0 : others.style
         }
       )))
     )

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

@@ -86,6 +86,10 @@ export type PickerPanelProps<D extends React.ElementType = 'div', P = {}> = Over
          * 列索引
          */
         columnIndex?: number;
+        /**
+         * Piker组件的样式，PickerPanel的主题定制与css变量传入的Tokens有关，需要透传计算
+         */
+        pickerStyle?: React.CSSProperties;
         /**
          * 选择选项时的回调
          */

package/es/Picker/PickerPanel.css

@@ -21,12 +21,12 @@
   background-image:
     linear-gradient(
       180deg,
-      var(--bui-color-bg-view-opacity-9),
-      var(--bui-color-bg-view-opacity-4)),
+      var(--bui-color-bg-alpha-light-9),
+      var(--bui-color-bg-alpha-light-3)),
     linear-gradient(
       0deg,
-      var(--bui-color-bg-view-opacity-9),
-      var(--bui-color-bg-view-opacity-4));
+      var(--bui-color-bg-alpha-light-9),
+      var(--bui-color-bg-alpha-light-3));
   background-position: top, bottom;
   background-size: 100% var(--indicator-top);
   background-repeat: no-repeat;
@@ -35,10 +35,10 @@
 .bui-picker-panel-indicator {
   position: absolute;
   top: var(--indicator-top);
-  height: var(--indicator-height);
+  height: var(--option-height);
   width: 100%;
-  border-top: 1px solid var(--indicator-border-color);
-  border-bottom: 1px solid var(--indicator-border-color);
+  border-top: 1px solid var(--bui-color-border-default);
+  border-bottom: 1px solid var(--bui-color-border-default);
 }
 .bui-picker-panel-option {
   position: absolute;
@@ -47,7 +47,7 @@
   text-align: center;
   height: var(--option-height);
   line-height: var(--option-height);
-  color: var(--option-color);
+  color: var(--bui-color-fg-default);
   font-size: var(--option-font-size);
   backface-visibility: hidden;
   width: auto;

package/es/Picker/PickerPanel.js

@@ -33,25 +33,31 @@ import "./PickerPanel.css";
 const prefixCls = "bui-picker-panel";
 const PickerPanel = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
+    var _b;
     const _a = props, {
       options = [],
       defaultValue,
       onSelect,
-      columnIndex
+      columnIndex,
+      pickerStyle
     } = _a, others = __objRest(_a, [
       "options",
       "defaultValue",
       "onSelect",
-      "columnIndex"
+      "columnIndex",
+      "pickerStyle"
     ]);
     const touch = useTouch();
     let timer;
     const INERTIA_TIME = 200;
     const INERTIA_DISTANCE = 15;
     const DEFAULT_DURATION = 200;
-    const LINE_SPACING = 36;
     const ROTATION = 20;
     const TOUCH_END = "end";
+    const DEFAULT_LINE_SPACING = 36;
+    const LINE_SPACING_STR = (_b = ((pickerStyle == null ? void 0 : pickerStyle["--option-height"]) ? `${pickerStyle == null ? void 0 : pickerStyle["--option-height"]}` : `${DEFAULT_LINE_SPACING}`).match(/\d+/)) == null ? void 0 : _b[0];
+    const LINE_SPACING = parseInt(LINE_SPACING_STR, 10);
+    const INDICATOR_OFFSET = LINE_SPACING * 108 / DEFAULT_LINE_SPACING;
     const [startY, setStartY] = useState(0);
     const [currIndex, setCurrIndex] = useState(1);
     const [startTime, setStartTime] = useState(0);
@@ -167,17 +173,17 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
       }, 0);
     };
     useEffect(() => {
-      var _a2, _b, _c;
+      var _a2, _b2, _c;
       (_a2 = PickerPanelRef.current) == null ? void 0 : _a2.addEventListener("touchstart", panelTouchStart);
-      (_b = PickerPanelRef.current) == null ? void 0 : _b.addEventListener("touchmove", panelTouchMove);
+      (_b2 = PickerPanelRef.current) == null ? void 0 : _b2.addEventListener("touchmove", panelTouchMove);
       (_c = PickerPanelRef.current) == null ? void 0 : _c.addEventListener("touchend", panelTouchEnd);
       return () => {
-        var _a3, _b2, _c2;
+        var _a3, _b3, _c2;
         (_a3 = PickerPanelRef.current) == null ? void 0 : _a3.removeEventListener(
           "touchstart",
           panelTouchStart
         );
-        (_b2 = PickerPanelRef.current) == null ? void 0 : _b2.removeEventListener(
+        (_b3 = PickerPanelRef.current) == null ? void 0 : _b3.removeEventListener(
           "touchmove",
           panelTouchMove
         );
@@ -223,7 +229,7 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
             }),
             key: `${item == null ? void 0 : item.value}-${i}`,
             style: {
-              transform: `rotate3d(1, 0, 0, ${-ROTATION * (i + 1)}deg) translate3d(0px, 0px, 104px)`
+              transform: `rotate3d(1, 0, 0, ${-ROTATION * (i + 1)}deg) translate3d(0px, 0px, ${INDICATOR_OFFSET}px)`
             }
           },
           item == null ? void 0 : item.label

package/es/Picker/utils.d.ts

@@ -11,3 +11,19 @@ export declare const formatCascade: (columns: ICascadePickerOptionItem[], values
  * 统一options数据格式
  */
 export declare const formatOptions: (internalValue: any, options?: any[]) => any[];
+/**
+ * 在格式化后的数据源中是否存在等长子项的value
+ */
+export declare const existSameLengthValue: (value: any, formatted: any) => any;
+/**
+ * 关闭选择器时，纠正value和格式化数据
+ * 取决于formatted后的options有几列，若value为格式化后数据源（formatted）的等长子集，则取value，否则执行纠正逻辑
+ */
+export declare const safeData: ({ value, formatted, options }: {
+    value: any;
+    formatted: any;
+    options: any;
+}) => {
+    safeValue: any[];
+    safeFormatted: any[];
+};

package/es/Picker/utils.js

@@ -39,8 +39,36 @@ const formatOptions = (internalValue, options = []) => {
       return options;
   }
 };
+const existSameLengthValue = (value, formatted) => {
+  const result = formatted.every(
+    (item, idx) => item.some((i) => (value == null ? void 0 : value[idx]) === (i == null ? void 0 : i.value))
+  );
+  return result;
+};
+const safeData = ({ value, formatted, options }) => {
+  let safeValue = [];
+  let safeFormatted = [];
+  const existValidChildren = existSameLengthValue(value, formatted);
+  if (existValidChildren) {
+    safeValue = value;
+    safeFormatted = formatted;
+  } else {
+    formatted.forEach((item, index) => {
+      var _a, _b;
+      const childIndex = item.findIndex((i) => i.value === value[index]);
+      safeValue[index] = ((_a = item == null ? void 0 : item[childIndex]) == null ? void 0 : _a.value) || ((_b = item == null ? void 0 : item[0]) == null ? void 0 : _b.value);
+    });
+    safeFormatted = formatOptions(safeValue, options);
+  }
+  return {
+    safeValue,
+    safeFormatted
+  };
+};
 export {
+  existSameLengthValue,
   formatCascade,
   formatOptions,
-  pickerPanelType
+  pickerPanelType,
+  safeData
 };

package/es/Popover/Popover.css

@@ -0,0 +1,94 @@
+.bui-popover {
+  --arrow-size: var(--bui-popover-arrow-size, 8PX);
+  --localtion-position: var(--bui-popover-localtion-position, 8PX);
+  --max-width: var(--bui-popover-max-width, 350px);
+  --content-min-width: var(--bui-popover-content-min-width, 30px);
+  --content-padding: var(--bui-popover-content-padding, 6px 8px);
+  max-width: var(--max-width);
+  font-size: var(--bui-text-size-1);
+  position: absolute;
+  visibility: hidden;
+  z-index: var(--bui-z-index-tooltip);
+}
+.bui-popover .bui-popover-arrow {
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+.bui-popover .bui-popover-arrow.location-left {
+  left: var(--localtion-position);
+}
+.bui-popover .bui-popover-arrow.location-right {
+  right: var(--localtion-position);
+}
+.bui-popover .bui-popover-arrow.location-top {
+  top: var(--localtion-position);
+}
+.bui-popover .bui-popover-arrow.location-bottom {
+  bottom: var(--localtion-position);
+}
+.bui-popover.popover-top .location-center,
+.bui-popover.popover-bottom .location-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bui-popover.popover-left .location-center,
+.bui-popover.popover-right .location-center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.bui-popover.popover-top {
+  padding-bottom: var(--arrow-size);
+}
+.bui-popover.popover-top .bui-popover-arrow {
+  border-left: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid transparent;
+  border-top: var(--arrow-size) solid var(--bui-color-bg-view);
+  bottom: 0;
+}
+.bui-popover.popover-bottom {
+  padding-top: var(--arrow-size);
+}
+.bui-popover.popover-bottom .bui-popover-arrow {
+  border-left: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid var(--bui-color-bg-view);
+  top: 0;
+}
+.bui-popover.popover-left {
+  padding-right: var(--arrow-size);
+}
+.bui-popover.popover-left .bui-popover-arrow {
+  border-top: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid transparent;
+  border-left: var(--arrow-size) solid var(--bui-color-bg-view);
+  right: 0;
+}
+.bui-popover.popover-right {
+  padding-left: var(--arrow-size);
+}
+.bui-popover.popover-right .bui-popover-arrow {
+  border-top: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid var(--bui-color-bg-view);
+  left: 0;
+}
+.bui-popover .bui-popover-title {
+  font-weight: var(--bui-font-weight-bold);
+}
+.bui-popover .bui-popover-content {
+  min-width: var(--content-min-width);
+  color: var(--bui-color-fg-muted);
+  text-align: left;
+  text-decoration: none;
+  word-wrap: break-word;
+  background-color: var(--bui-color-bg-popover);
+  border-radius: var(--bui-shape-radius-poster);
+  box-shadow:
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+.bui-popover .bui-popover-content .bui-popover-title + .bui-popover-inner-content {
+  margin-top: var(--bui-spacing-md);
+}

package/es/Popover/Popover.d.ts

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