@bifrostui/react 1.2.9-beta.0 → 1.3.1-beta.0

package/es/CitySelector/CitySelector.css

@@ -1,14 +1,29 @@
 .bui-city-selector {
+  --select-item-width: var(--bui-city-selector-item-width, 111px);
+  --select-item-height: var(--bui-city-selector-item-height, 36px);
+  --select-item-border-radius: var(--bui-city-selector-item-border-radius, 20px);
+  --select-item-margin: var(--bui-city-selector-item-margin, 4.5px 0 4.5px 9px);
+  --title-height: var(--bui-city-selector-title-height, 45px);
+  --title-line-height: var(--bui-city-selector-title-line-height, 45px);
+  --btn-close-size: var(--bui-city-selector-btn-close-size, 45px);
+  --btn-close-font-size: var(--bui-city-selector-btn-close-font-size, 20px);
+  --container-with-title-height: var(--bui-city-selector-container-with-title-height, calc(100% - var(--title-height)));
+  --city-container-min-height: var(--bui-city-selector-city-container-min-height, 500px);
+  --select-city-buttons-padding: var(--bui-city-selector-select-city-buttons-padding, 7.5px 0 0 3px);
+  --select-city-title-line-height: var(--bui-city-selector-select-city-title-line-height, 15px);
+  --list-item-height: var(--bui-city-selector-list-item-height, 45px);
+  --city-index-has-title-top: var(--bui-city-selector-city-index-has-title-top, calc(50% + var(--title-height) / 2));
+  --index-item-height: var(--bui-city-selector-index-item-height, 20px);
   font-family: var(--bui-font-family);
   height: 100%;
   position: relative;
 }
 .bui-city-selector-title {
   width: 100%;
-  height: 45px;
+  height: var(--title-height);
   color: var(--bui-color-fg-default);
   font-size: var(--bui-title-size-3);
-  line-height: 45px;
+  line-height: var(--title-line-height);
   text-align: center;
   position: sticky;
   top: 0;
@@ -20,20 +35,20 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: 45px;
-  height: 45px;
+  width: var(--btn-close-size);
+  height: var(--btn-close-size);
   color: var(--bui-color-fg-muted);
   text-align: center;
-  font-size: 20px;
+  font-size: var(--btn-close-font-size);
 }
 .bui-city-selector-scroll-view-container {
   height: 100%;
 }
 .bui-city-selector-scroll-view-container.container-has-title {
-  height: calc(100% - 45px);
+  height: var(--container-with-title-height);
 }
 .bui-city-selector-all-city {
-  min-height: 500px;
+  min-height: var(--city-container-min-height);
   font-size: var(--bui-text-size-2);
   width: 100%;
   background: var(--bui-color-bg-view);
@@ -42,22 +57,21 @@
 .bui-city-selector-all-city .select-city-buttons {
   display: flex;
   flex-flow: wrap;
-  padding-left: 3px;
-  padding-top: 7.5px;
+  padding: var(--select-city-buttons-padding);
 }
 .bui-city-selector-all-city .select-city-title {
   font-size: var(--bui-title-size-4);
-  line-height: 15px;
-  font-weight: 600;
+  line-height: var(--select-city-title-line-height);
+  font-weight: var(--bui-font-weight-bold);
   padding-left: var(--bui-spacing-lg);
-  padding-top: 9px;
+  padding-top: var(--bui-spacing-md);
 }
 .bui-city-selector-list {
   padding-left: var(--bui-spacing-lg);
   list-style-type: none;
 }
 .bui-city-selector-list-item {
-  height: 45px;
+  height: var(--list-item-height);
   font-size: var(--bui-title-size-4);
   display: flex;
   align-items: center;
@@ -81,7 +95,7 @@
   transform: translate(0, -50%);
 }
 .bui-city-selector-index-container.city-index-has-title {
-  top: calc(50% + 22.5px);
+  top: var(--city-index-has-title-top);
 }
 .bui-city-selector-index-container ul {
   margin: 0;
@@ -92,7 +106,7 @@
 }
 .bui-city-selector-index-container li {
   list-style: none;
-  height: 20px;
+  height: var(--index-item-height);
   text-align: center;
   font-size: var(--bui-text-size-3);
   color: var(--bui-color-info, --bui-color-info);

package/es/CitySelector/CitySelectorCore.js

@@ -29,34 +29,31 @@ var __objRest = (source, exclude) => {
 import React, { useState, useEffect, useRef } from "react";
 import clsx from "clsx";
 import { throttle, useForkRef, useTouchEmulator } from "@bifrostui/utils";
+import { useLocaleText } from "../locales";
 import ScrollView from "../ScrollView";
 import Selector from "./Selector";
 import "./CitySelector.css";
 const DEVIATION_HEIGHT = "6vmin";
-const GPS_TYPE = {
-  title: "\u5B9A\u4F4D",
-  code: "GPS"
-};
-const CURRENT_TYPE = {
-  title: "\u5F53\u524D",
-  code: "CRRT"
-};
-const HOT_CITY_TYPE = {
-  title: "\u70ED\u95E8",
-  code: "HOT"
-};
 const prefixCls = "bui-city-selector";
 const CitySelector = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
+    const {
+      selectedCityGroupName: selectedCityGroupLocaleName,
+      currentCityGroupName: currentCityGroupLocaleName,
+      hotCitiesGroupName: hotCitiesGroupLocaleName,
+      located,
+      current,
+      hot
+    } = useLocaleText("citySelector");
     const _a = props, {
       className,
       title: pageTitle,
       selectedCity,
-      selectedCityGroupName = "\u5F53\u524D\u57CE\u5E02",
+      selectedCityGroupName = selectedCityGroupLocaleName,
       currentCity,
-      currentCityGroupName = "\u5B9A\u4F4D\u57CE\u5E02",
+      currentCityGroupName = currentCityGroupLocaleName,
       hotCities,
-      hotCitiesGroupName = "\u70ED\u95E8\u57CE\u5E02",
+      hotCitiesGroupName = hotCitiesGroupLocaleName,
       cities,
       disableIndex,
       touchHandler,
@@ -79,6 +76,18 @@ const CitySelector = /* @__PURE__ */ React.forwardRef(
       "onSelect",
       "onClose"
     ]);
+    const GPS_TYPE = {
+      title: located,
+      code: "GPS"
+    };
+    const CURRENT_TYPE = {
+      title: current,
+      code: "CRRT"
+    };
+    const HOT_CITY_TYPE = {
+      title: hot,
+      code: "HOT"
+    };
     const cityRef = useRef(null);
     const nodeRef = useForkRef(ref, cityRef);
     useTouchEmulator(cityRef.current);
@@ -137,7 +146,7 @@ const CitySelector = /* @__PURE__ */ React.forwardRef(
     };
     const renderTitile = (title, titleCode) => {
       const parseTitle = (titleCode || title).toUpperCase();
-      return /* @__PURE__ */ React.createElement("div", { className: "select-city-title", id: disableIndex ? "" : parseTitle }, 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) => {

package/es/CitySelector/Selector/index.css

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

package/es/Collapse/Collapse.css

@@ -0,0 +1,6 @@
+.bui-collapse {
+  overflow: hidden;
+  white-space: nowrap;
+  height: fit-content;
+  width: fit-content;
+}

package/es/Collapse/Collapse.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CollapseProps } from './Collapse.types';
+import './Collapse.less';
+declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<unknown>>;
+export default Collapse;

package/es/Collapse/Collapse.js

@@ -0,0 +1,144 @@
+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));
+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, { useEffect, useRef } from "react";
+import {
+  useForkRef,
+  duration,
+  easing,
+  getTransitionProps,
+  createTransitions
+} from "@bifrostui/utils";
+import { Transition } from "../Transition";
+import "./Collapse.css";
+const defaultEasing = {
+  enter: easing.easeOut,
+  exit: easing.sharp
+};
+const defaultTimeout = {
+  enter: duration.enteringScreen,
+  exit: duration.leavingScreen
+};
+const Collapse = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  const _a = props, {
+    appear = false,
+    in: inProp,
+    easing: easingProp = defaultEasing,
+    direction = "vertical",
+    timeout = defaultTimeout,
+    delay = 0,
+    collapsedSize: collapsedSizeProp = 0,
+    style,
+    className,
+    children
+  } = _a, other = __objRest(_a, [
+    "appear",
+    "in",
+    "easing",
+    "direction",
+    "timeout",
+    "delay",
+    "collapsedSize",
+    "style",
+    "className",
+    "children"
+  ]);
+  const nodeRef = useForkRef(ref);
+  const wrapperRef = useRef(null);
+  const collapseRef = useForkRef(wrapperRef, ref);
+  const transitions = createTransitions();
+  const isHorizontal = direction === "horizontal";
+  const collapsedSize = typeof collapsedSizeProp === "number" ? `${collapsedSizeProp}px` : collapsedSizeProp;
+  const size = isHorizontal ? "width" : "height";
+  const getCollapseWrapperSize = (reactNode) => {
+    return reactNode ? `${reactNode[isHorizontal ? "clientWidth" : "clientHeight"]}px` : "fit-content";
+  };
+  useEffect(() => {
+    var _a2, _b, _c, _d;
+    if (appear === false && inProp === true && ((_b = (_a2 = wrapperRef.current) == null ? void 0 : _a2.style) == null ? void 0 : _b[size]) === "fit-content") {
+      wrapperRef.current.style[size] = getCollapseWrapperSize(
+        (_d = (_c = wrapperRef.current) == null ? void 0 : _c.children) == null ? void 0 : _d[0]
+      );
+    }
+  }, [appear, inProp]);
+  if (!children)
+    return null;
+  return /* @__PURE__ */ React.createElement(
+    Transition,
+    __spreadProps(__spreadValues({}, other), {
+      ref: nodeRef,
+      in: inProp,
+      timeout,
+      delay,
+      appear
+    }),
+    (state, childProps) => {
+      var _a2;
+      const transition = transitions.create(
+        size,
+        getTransitionProps(
+          { timeout, style, easing: easingProp, delay },
+          { mode: state }
+        )
+      );
+      const wrapperSize = () => {
+        var _a3, _b;
+        const collapseWrapperSize = state === "entering" || state === "entered" ? getCollapseWrapperSize((_b = (_a3 = wrapperRef.current) == null ? void 0 : _a3.children) == null ? void 0 : _b[0]) : collapsedSize;
+        return isHorizontal ? {
+          width: collapseWrapperSize,
+          WebKitWidth: collapseWrapperSize
+        } : {
+          height: collapseWrapperSize,
+          WebKitHeight: collapseWrapperSize
+        };
+      };
+      return React.createElement(
+        "div",
+        {
+          className: `bui-collapse ${className}`,
+          style: __spreadValues(__spreadProps(__spreadValues({}, style), {
+            transition,
+            WebkitTransition: transition
+          }), wrapperSize()),
+          ref: collapseRef
+        },
+        React.cloneElement(children, __spreadValues({
+          style: __spreadValues({}, (_a2 = children.props) == null ? void 0 : _a2.style)
+        }, childProps))
+      );
+    }
+  );
+});
+Collapse.displayName = "BuiCollapse";
+var Collapse_default = Collapse;
+export {
+  Collapse_default as default
+};

package/es/Collapse/Collapse.types.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TransitionProps } from '../Transition';
+export interface CollapseProps extends Omit<TransitionProps, 'children'> {
+    easing?: string | {
+        enter?: string;
+        exit?: string;
+    };
+    children?: React.ReactElement;
+    /**
+     * 折叠的方向
+     * horizontal - 水平方向
+     * vertical - 垂直方向
+     */
+    direction?: 'horizontal' | 'vertical';
+    collapsedSize?: string | number;
+}

package/es/Collapse/Collapse.types.js

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

package/es/Collapse/index.d.ts

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

package/es/Collapse/index.js

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

package/es/CollapsePanel/CollapsePanel.css

@@ -0,0 +1,32 @@
+.bui-collapse-panel {
+  --width: var(--bui-collapse-panel-width, 100%);
+  --header-padding: var(--bui-collapse-panel-header-padding, var(--bui-spacing-lg) 0);
+  --content-padding: var(--bui-collapse-panel-content-padding, var(--bui-spacing-lg) 0);
+  width: var(--width);
+  background-color: var(--bui-color-bg-view);
+  color: var(--bui-color-fg-default);
+}
+.bui-collapse-panel-item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: solid 1px #eee;
+  cursor: pointer;
+}
+.bui-collapse-panel-item-header-label {
+  padding: var(--header-padding);
+  font-size: var(--bui-title-size-2);
+}
+.bui-collapse-panel-item-header-icon-arrow {
+  transform: rotate(0deg);
+  transition: all 0.3s ease;
+}
+.bui-collapse-panel-item-header-icon-arrow-active {
+  transform: rotate(-180deg);
+}
+.bui-collapse-panel-item-content {
+  padding: var(--content-padding);
+  font-size: var(--bui-text-size-1);
+  transition: height 0.5s ease;
+  overflow: hidden;
+}

package/es/CollapsePanel/CollapsePanel.d.ts

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

package/es/CollapsePanel/CollapsePanel.js

@@ -0,0 +1,132 @@
+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));
+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 from "react";
+import clsx from "clsx";
+import { ArrowDownwardLargeIcon } from "@bifrostui/icons";
+import { useValue } from "@bifrostui/utils";
+import CollapseItem from "./CollapsePanelItem";
+import "./CollapsePanel.css";
+const prefixCls = "bui-collapse-panel";
+const CollapsePanel = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const _a = props, {
+      className,
+      style,
+      accordion = false,
+      activeKeys,
+      defaultActiveKeys,
+      items,
+      children,
+      arrowIcon,
+      onChange
+    } = _a, others = __objRest(_a, [
+      "className",
+      "style",
+      "accordion",
+      "activeKeys",
+      "defaultActiveKeys",
+      "items",
+      "children",
+      "arrowIcon",
+      "onChange"
+    ]);
+    const [openKeys, setOpenKeys] = useValue({
+      defaultValue: defaultActiveKeys || [],
+      value: activeKeys
+    });
+    const handleClick = (event, target) => {
+      var _a2;
+      const targetKey = target == null ? void 0 : target.key;
+      let newOpenKeys = [];
+      if (accordion) {
+        newOpenKeys = openKeys.includes(targetKey) ? [] : [targetKey];
+      } else {
+        newOpenKeys = openKeys.includes(targetKey) ? openKeys.filter((k) => k !== targetKey) : [targetKey, ...openKeys];
+      }
+      setOpenKeys(event, newOpenKeys);
+      onChange == null ? void 0 : onChange(event, { activeKeys: newOpenKeys });
+      (_a2 = target == null ? void 0 : target.onClick) == null ? void 0 : _a2.call(target, event);
+    };
+    const getArrowIcon = () => {
+      if (arrowIcon) {
+        return arrowIcon;
+      }
+      return /* @__PURE__ */ React.createElement(ArrowDownwardLargeIcon, null);
+    };
+    const renderList = () => {
+      if (Array.isArray(items)) {
+        return items.map((item) => {
+          const _a2 = item, { key } = _a2, otherProps = __objRest(_a2, ["key"]);
+          return /* @__PURE__ */ React.createElement(
+            CollapseItem,
+            __spreadProps(__spreadValues({
+              key,
+              icon: getArrowIcon(),
+              active: openKeys.includes(item.key)
+            }, otherProps), {
+              onClick: (e) => handleClick(e, item)
+            })
+          );
+        });
+      }
+      const enhancedChildren = React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          const newProps = {
+            icon: getArrowIcon(),
+            active: openKeys.includes(child.key),
+            onClick: (e) => handleClick(e, child)
+          };
+          return React.cloneElement(child, newProps);
+        }
+        return child;
+      });
+      return enhancedChildren;
+    };
+    if (items == null && children == null) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadValues({
+        className: clsx(prefixCls, className),
+        style,
+        ref
+      }, others),
+      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-list` }, renderList())
+    );
+  }
+);
+CollapsePanel.displayName = "BuiCollapsePanel";
+var CollapsePanel_default = CollapsePanel;
+export {
+  CollapsePanel_default as default
+};

package/es/CollapsePanel/CollapsePanel.types.d.ts

@@ -0,0 +1,64 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+export type CollapsePanelItemProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 唯一标识，对应 activeKey
+         */
+        key?: string | number;
+        /**
+         * 面板标题
+         */
+        label?: React.ReactNode;
+        /**
+         * 自定义 icon
+         */
+        icon?: React.ReactNode | ((active: boolean) => React.ReactNode);
+        /**
+         * 是否展开
+         * @default false
+         */
+        active?: boolean;
+        /**
+         * body 区域内容
+         */
+        children?: React.ReactNode;
+    };
+    defaultComponent: D;
+}, D>;
+export type CollapsePanelProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 是否开启手风琴模式
+         * @default false
+         */
+        accordion?: boolean;
+        /**
+         * 当前激活面板的 key
+         */
+        activeKeys?: (number | string)[];
+        /**
+         * 默认展开面板的 key
+         */
+        defaultActiveKeys?: (number | string)[];
+        /**
+         * 折叠项目内容
+         */
+        items?: Array<CollapsePanelItemProps>;
+        /**
+         * body 区域内容，使用 CollapseItem 进行渲染
+         */
+        children?: React.ReactNode;
+        /**
+         * 自定义箭头图标
+         */
+        arrowIcon?: React.ReactNode | ((active: boolean) => React.ReactNode);
+        /**
+         * 切换面板时触发
+         */
+        onChange?: (e: React.SyntheticEvent, params: {
+            activeKeys: (number | string)[];
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;

package/es/CollapsePanel/CollapsePanel.types.js

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

package/es/CollapsePanel/CollapsePanelItem.d.ts

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