@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.1

package/es/Transition/TransitionCore.js

@@ -49,7 +49,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { useForkRef } from "@bifrostui/utils";
+import { useForkRef, useDidMountEffect } from "@bifrostui/utils";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 const TransitionCore = forwardRef(
   (props, ref) => {
@@ -62,7 +62,7 @@ const TransitionCore = forwardRef(
       enter = true,
       exit = true,
       timeout: _timeout,
-      delay: _delay,
+      delay: _delay = 0,
       onEnter,
       onEntering,
       onEntered,
@@ -100,13 +100,16 @@ const TransitionCore = forwardRef(
     });
     const innerNodeRef = useRef();
     const nodeRef = useForkRef(innerNodeRef, ref);
-    const timeout = typeof _timeout === "object" ? __spreadValues({}, _timeout) : { enter: _timeout, exit: _timeout };
-    const delay = typeof _delay === "object" ? _delay : { enter: _delay, exit: _delay };
-    timeout.enter += delay.enter;
-    timeout.exit += delay.exit;
+    const timeout = typeof _timeout === "object" ? __spreadValues({}, _timeout) : { enter: _timeout, exit: _timeout, appear: _timeout };
+    const delay = typeof _delay === "object" ? _delay : { enter: _delay, exit: _delay, appear: _delay };
+    if (timeout.enter !== void 0)
+      timeout.enter += delay.enter || 0;
+    if (timeout.exit !== void 0)
+      timeout.exit += delay.exit || 0;
+    if (timeout.appear !== void 0)
+      timeout.appear += delay.appear || 0;
     const nextCallback = useRef(null);
     const appearStatus = useRef(inProp && appear ? ENTERING : null);
-    const isFirstRender = useRef(false);
     const cancelNextCallback = () => {
       var _a2;
       if (nextCallback.current !== null) {
@@ -143,8 +146,8 @@ const TransitionCore = forwardRef(
         (_a2 = nextCallback == null ? void 0 : nextCallback.current) == null ? void 0 : _a2.call(nextCallback);
       });
     };
-    const performEnter = () => __async(void 0, null, function* () {
-      if (!enter) {
+    const performEnter = (mounting) => __async(void 0, null, function* () {
+      if (!enter && !mounting) {
         safeSetState(ENTERED, () => __async(void 0, null, function* () {
           yield onEntered == null ? void 0 : onEntered(innerNodeRef == null ? void 0 : innerNodeRef.current);
         }));
@@ -163,7 +166,9 @@ const TransitionCore = forwardRef(
     });
     const performExit = () => __async(void 0, null, function* () {
       if (!exit) {
-        safeSetState(unmountOnExit ? UNMOUNTED : EXITED, () => __async(void 0, null, function* () {
+        safeSetState(EXITED, () => __async(void 0, null, function* () {
+          if (unmountOnExit)
+            setStatus(UNMOUNTED);
           yield onExited == null ? void 0 : onExited(innerNodeRef == null ? void 0 : innerNodeRef.current);
         }));
         return;
@@ -172,34 +177,34 @@ const TransitionCore = forwardRef(
       safeSetState(EXITING, () => __async(void 0, null, function* () {
         yield onExiting == null ? void 0 : onExiting(innerNodeRef == null ? void 0 : innerNodeRef.current);
         onTransitionEnd(timeout.exit, () => {
-          safeSetState(unmountOnExit ? UNMOUNTED : EXITED, () => __async(void 0, null, function* () {
+          safeSetState(EXITED, () => __async(void 0, null, function* () {
+            if (unmountOnExit)
+              setStatus(UNMOUNTED);
             yield onExited == null ? void 0 : onExited(innerNodeRef == null ? void 0 : innerNodeRef.current);
           }));
         });
       }));
     });
-    const updateStatus = (nextStatus) => {
+    const updateStatus = (nextStatus, mounting) => {
       if (nextStatus !== null) {
         cancelNextCallback();
         if (nextStatus === ENTERING) {
-          performEnter();
+          if (unmountOnExit || mountOnEnter) {
+            forceReflow(innerNodeRef == null ? void 0 : innerNodeRef.current);
+          }
+          performEnter(mounting);
         } else if (nextStatus === EXITING) {
           performExit();
         }
       }
     };
     useEffect(() => {
-      nextTick(() => updateStatus(appearStatus.current));
+      nextTick(() => updateStatus(appearStatus.current, true));
       return () => {
         cancelNextCallback();
       };
     }, []);
-    useEffect(() => {
-      const isMounted = status !== UNMOUNTED;
-      if (!isFirstRender.current) {
-        isFirstRender.current = true;
-        return;
-      }
+    useDidMountEffect(() => {
       let nextStatus = null;
       if (inProp) {
         if (status !== ENTERING && status !== ENTERED) {
@@ -208,13 +213,13 @@ const TransitionCore = forwardRef(
       } else if (status === ENTERING || status === ENTERED) {
         nextStatus = EXITING;
       }
-      if (isMounted)
-        updateStatus(nextStatus);
-      else
-        safeSetState(inProp ? "EXITED" : "ENTERED", () => {
-          forceReflow(innerNodeRef == null ? void 0 : innerNodeRef.current);
-          updateStatus(nextStatus);
+      if (inProp && status === UNMOUNTED) {
+        safeSetState(EXITED, () => {
+          updateStatus(nextStatus, false);
         });
+      } else {
+        updateStatus(nextStatus, false);
+      }
     }, [inProp]);
     if (status === UNMOUNTED)
       return null;

package/es/TransitionGroup/TransitionGroup.js

@@ -0,0 +1,109 @@
+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, { useState, useEffect, useRef } from "react";
+import {
+  getChildMapping,
+  getInitialChildMapping,
+  getNextChildMapping
+} from "./utils/childMapping";
+const TransitionGroupContext = React.createContext(null);
+const values = Object.values || ((obj) => Object.keys(obj).map((k) => obj[k]));
+const TransitionGroup = (props) => {
+  const _a = props, {
+    component: Component = "div",
+    children,
+    appear,
+    enter,
+    exit,
+    childFactory = (child) => child
+  } = _a, restProps = __objRest(_a, [
+    "component",
+    "children",
+    "appear",
+    "enter",
+    "exit",
+    "childFactory"
+  ]);
+  const [state, setState] = useState({
+    contextValue: { isMounting: true },
+    firstRender: true,
+    children: {}
+  });
+  const mountedRef = useRef(false);
+  const handleExitedRef = useRef((child, node) => {
+    const currentChildMapping = getChildMapping(children);
+    if (child.key in currentChildMapping)
+      return;
+    if (child.props.onExited) {
+      child.props.onExited(node);
+    }
+    if (mountedRef.current) {
+      setState((prevState) => {
+        const tempChildren = __spreadValues({}, prevState.children);
+        delete tempChildren[child.key];
+        return __spreadProps(__spreadValues({}, prevState), { children: tempChildren });
+      });
+    }
+  });
+  useEffect(() => {
+    mountedRef.current = true;
+    setState((prevState) => __spreadProps(__spreadValues({}, prevState), {
+      contextValue: { isMounting: false }
+    }));
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    setState((prevState) => {
+      const { firstRender, children: prevChildMapping } = prevState;
+      const handleExited = handleExitedRef.current;
+      return __spreadProps(__spreadValues({}, prevState), {
+        children: firstRender ? getInitialChildMapping(props, handleExited) : getNextChildMapping(props, prevChildMapping, handleExited),
+        firstRender: false
+      });
+    });
+  }, [children, appear, enter, exit]);
+  const { contextValue, children: mappedChildren } = state;
+  const valuedChildren = values(mappedChildren).map(
+    childFactory
+  );
+  if (Component === null) {
+    return /* @__PURE__ */ React.createElement(TransitionGroupContext.Provider, { value: contextValue }, valuedChildren);
+  }
+  return /* @__PURE__ */ React.createElement(TransitionGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(Component, __spreadValues({}, restProps), valuedChildren));
+};
+TransitionGroup.displayName = "BuiTransitionGroup";
+var TransitionGroup_default = TransitionGroup;
+export {
+  TransitionGroup_default as default
+};

package/es/TransitionGroup/TransitionGroup.types.js

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

package/es/TransitionGroup/demo/TransitionGroupDemo.js

@@ -0,0 +1,39 @@
+import { Button, TransitionGroup, CSSTransition } from "@bifrostui/react";
+import React, { useState } from "react";
+import "./index.css";
+const TransitionGroupDemo = () => {
+  const [items, setItems] = useState([
+    { id: 1, text: "Item 1" },
+    { id: 2, text: "Item 2" },
+    { id: 3, text: "Item 3" }
+  ]);
+  const handleAddItem = () => {
+    const id = items.length > 0 ? Math.max(...items.map((item) => item.id)) + 1 : 1;
+    setItems((prev) => [...prev, { id, text: `Item ${id}` }]);
+  };
+  const handleRemoveItem = (id) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  };
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { onClick: handleAddItem }, "\u6DFB\u52A0\u9879\u76EE"), /* @__PURE__ */ React.createElement(TransitionGroup, { className: "transition-group-container" }, items.map((item) => /* @__PURE__ */ React.createElement(
+    CSSTransition,
+    {
+      key: item.id,
+      unmountOnExit: true,
+      timeout: 300,
+      classNames: "item"
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "item-container" }, /* @__PURE__ */ React.createElement("span", null, item.text), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        size: "small",
+        color: "danger",
+        onClick: () => handleRemoveItem(item.id)
+      },
+      "\u5220\u9664"
+    ))
+  ))));
+};
+var TransitionGroupDemo_default = TransitionGroupDemo;
+export {
+  TransitionGroupDemo_default as default
+};

package/es/TransitionGroup/demo/index.css

@@ -0,0 +1,33 @@
+.transition-group-container {
+  margin-top: 10px;
+}
+.transition-group-container .item-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  margin-bottom: 10px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+.transition-group-container .item-enter {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+.transition-group-container .item-enter-active {
+  opacity: 1;
+  transform: translateX(0);
+  transition: all 300ms ease-in;
+}
+.transition-group-container .item-exit {
+  opacity: 1;
+  transform: translateX(0);
+}
+.transition-group-container .item-exit-active {
+  opacity: 0;
+  transform: translateX(-100%);
+  transition: all 300ms ease-in;
+}
+.transition-group-container .bui-btn {
+  margin-bottom: 0;
+}

package/es/TransitionGroup/index.js

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

package/es/TransitionGroup/utils/childMapping.js

@@ -0,0 +1,93 @@
+import { Children, cloneElement, isValidElement } from "react";
+const getChildMapping = (children, mapFn) => {
+  const mapper = (child) => mapFn && isValidElement(child) ? mapFn(child) : child;
+  const result = /* @__PURE__ */ Object.create(null);
+  if (children)
+    Children.map(children, (c) => c).forEach((child) => {
+      result[child.key] = mapper(child);
+    });
+  return result;
+};
+const mergeChildMappings = (prev, next) => {
+  prev = prev || {};
+  next = next || {};
+  function getValueForKey(key) {
+    return key in next ? next[key] : prev[key];
+  }
+  const nextKeysPending = /* @__PURE__ */ Object.create(null);
+  let pendingKeys = [];
+  Object.keys(prev).forEach((prevKey) => {
+    if (prevKey in next) {
+      if (pendingKeys.length) {
+        nextKeysPending[prevKey] = pendingKeys;
+        pendingKeys = [];
+      }
+    } else {
+      pendingKeys.push(prevKey);
+    }
+  });
+  const childMapping = {};
+  Object.keys(next).forEach((nextKey) => {
+    if (nextKeysPending[nextKey]) {
+      nextKeysPending[nextKey].forEach((pendingNextKey) => {
+        childMapping[pendingNextKey] = getValueForKey(pendingNextKey);
+      });
+    }
+    childMapping[nextKey] = getValueForKey(nextKey);
+  });
+  pendingKeys.forEach((pendingKey) => {
+    childMapping[pendingKey] = getValueForKey(pendingKey);
+  });
+  return childMapping;
+};
+const getProp = (child, prop, props) => {
+  return props[prop] != null ? props[prop] : child.props[prop];
+};
+const getInitialChildMapping = (props, onExited) => {
+  return getChildMapping(props.children, (child) => {
+    return cloneElement(child, {
+      onExited: onExited.bind(null, child),
+      in: true,
+      appear: getProp(child, "appear", props),
+      enter: getProp(child, "enter", props),
+      exit: getProp(child, "exit", props)
+    });
+  });
+};
+const getNextChildMapping = (nextProps, prevChildMapping, onExited) => {
+  const nextChildMapping = getChildMapping(nextProps.children);
+  const children = mergeChildMappings(prevChildMapping, nextChildMapping);
+  Object.keys(children).forEach((key) => {
+    const child = children[key];
+    if (!isValidElement(child))
+      return;
+    const hasPrev = key in prevChildMapping;
+    const hasNext = key in nextChildMapping;
+    const prevChild = prevChildMapping[key];
+    const isLeaving = isValidElement(prevChild) && !prevChild.props.in;
+    if (hasNext && (!hasPrev || isLeaving)) {
+      children[key] = cloneElement(child, {
+        onExited: onExited.bind(null, child),
+        in: true,
+        exit: getProp(child, "exit", nextProps),
+        enter: getProp(child, "enter", nextProps)
+      });
+    } else if (!hasNext && hasPrev && !isLeaving) {
+      children[key] = cloneElement(child, { in: false });
+    } else if (hasNext && hasPrev && isValidElement(prevChild)) {
+      children[key] = cloneElement(child, {
+        onExited: onExited.bind(null, child),
+        in: prevChild.props.in,
+        exit: getProp(child, "exit", nextProps),
+        enter: getProp(child, "enter", nextProps)
+      });
+    }
+  });
+  return children;
+};
+export {
+  getChildMapping,
+  getInitialChildMapping,
+  getNextChildMapping,
+  mergeChildMappings
+};

package/es/_.._/benchmarks/components/Button.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { Button } from "../../src/Button";
+const ButtonView = () => {
+  return /* @__PURE__ */ React.createElement(Button, { color: "primary", variant: "contained" }, "Text");
+};
+export {
+  ButtonView as Button
+};

package/es/_.._/benchmarks/components/Input.js

@@ -0,0 +1,12 @@
+import React, { useState } from "react";
+import { Input } from "../../src/Input";
+const InputView = () => {
+  const [value, setValue] = useState("");
+  const handleChange = (_e, data) => {
+    setValue(data == null ? void 0 : data.value);
+  };
+  return /* @__PURE__ */ React.createElement(Input, { value, placeholder: "\u8BF7\u586B\u5199\u5185\u5BB9", onChange: handleChange });
+};
+export {
+  InputView as Input
+};

package/es/_.._/benchmarks/components/Tabs.js

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import { Tab, TabPanel, Tabs } from "../../src/Tabs";
+const TabsView = () => {
+  const [value, setValue] = useState("one");
+  const tabList = [
+    { title: "TAB ONE", index: "one" },
+    { title: "TAB TWO", index: "two" },
+    { title: "TAB THREE", index: "three" }
+  ];
+  const handleClick = (_e, { index }) => {
+    setValue(index);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tabs, { style: { marginBottom: "12px" }, value }, tabList.map((item) => /* @__PURE__ */ React.createElement(Tab, { key: item.index, index: item.index, onClick: handleClick }, item.title))), /* @__PURE__ */ React.createElement(TabPanel, { value, index: "one" }, "Tab Panel 1"), /* @__PURE__ */ React.createElement(TabPanel, { value, index: "two" }, "Tab Panel 2"), /* @__PURE__ */ React.createElement(TabPanel, { value, index: "three" }, "Tab Panel 3"));
+};
+export {
+  TabsView as Tabs
+};

package/es/benchmarks/components/Button.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ButtonView: () => React.JSX.Element;
+export { ButtonView as Button };

package/es/benchmarks/components/Input.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const InputView: () => React.JSX.Element;
+export { InputView as Input };

package/es/benchmarks/components/Tabs.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TabsView: () => React.JSX.Element;
+export { TabsView as Tabs };

package/es/index.js

@@ -8,6 +8,11 @@ export * from "./Calendar";
 export * from "./Card";
 export * from "./Checkbox";
 export * from "./Collapse";
+export * from "./DatePicker";
+export * from "./DesktopDatePicker";
+export * from "./DesktopTimePicker";
+export * from "./DesktopDateTimePicker";
+export * from "./DesktopPicker";
 export * from "./Divider";
 export * from "./Drawer";
 export * from "./Fade";
@@ -48,3 +53,6 @@ export * from "./Toast";
 export * from "./Dialog";
 export * from "./ThemeProvider";
 export * from "./locales";
+export * from "./SwipeAction";
+export * from "./CSSTransition";
+export * from "./TransitionGroup";

package/es/locales/en-US.js

@@ -1,7 +1,7 @@
 const enUS = {
   dialog: {
     cancel: "Cancel",
-    confirm: "Confirm",
+    ok: "OK",
     placeholder: "Placeholder"
   },
   picker: {
@@ -21,7 +21,10 @@ const enUS = {
     placeholder: "Placeholder"
   },
   textarea: {
-    placeholder: "Placeholder"
+    labelName: "TextArea",
+    placeholder: "Placeholder",
+    remaining: "Remaining",
+    characters: "Characters"
   },
   selector: {
     select: "Please select"
@@ -42,6 +45,55 @@ const enUS = {
       title: "Hot",
       code: "HOT"
     }
+  },
+  desktopDatePicker: {
+    month: {
+      1: "Jan",
+      2: "Feb",
+      3: "Mar",
+      4: "Apr",
+      5: "May",
+      6: "Jun",
+      7: "Jul",
+      8: "Aug",
+      9: "Sep",
+      10: "Oct",
+      11: "Nov",
+      12: "Dec"
+    }
+  },
+  datePicker: {
+    year: "Year",
+    month: "Month",
+    day: "Day",
+    hour: "Hour",
+    minute: "Minute",
+    second: "Second"
+  },
+  countdown: {
+    remain: {
+      year: "Year",
+      month: "Month",
+      day: "Day",
+      hour: "Hour",
+      minute: "Minute",
+      second: "Second"
+    },
+    remainTime: "Remaining Time",
+    hasEnd: "Countdown has ended",
+    willEnd: "About to end",
+    timer: "Timer"
+  },
+  progress: {
+    labelName: "Progress Bar",
+    notStarted: "Not started",
+    justBegun: "Just begun",
+    gettingStarted: "Getting started",
+    inProgress: "In progress",
+    moreThanHalfway: "More than halfway",
+    nearingCompletion: "Nearing completion",
+    almostComplete: "Almost complete",
+    complete: "Complete"
   }
 };
 var en_US_default = enUS;

package/es/locales/zh-CN.js

@@ -1,7 +1,7 @@
 const zhCN = {
   dialog: {
     cancel: "\u53D6\u6D88",
-    confirm: "\u786E\u5B9A",
+    ok: "\u786E\u5B9A",
     placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9"
   },
   picker: {
@@ -24,6 +24,61 @@ const zhCN = {
     located: "\u5B9A\u4F4D",
     current: "\u5F53\u524D",
     hot: "\u70ED\u95E8"
+  },
+  desktopDatePicker: {
+    month: {
+      1: "1\u6708",
+      2: "2\u6708",
+      3: "3\u6708",
+      4: "4\u6708",
+      5: "5\u6708",
+      6: "6\u6708",
+      7: "7\u6708",
+      8: "8\u6708",
+      9: "9\u6708",
+      10: "10\u6708",
+      11: "11\u6708",
+      12: "12\u6708"
+    }
+  },
+  datePicker: {
+    year: "\u5E74",
+    month: "\u6708",
+    day: "\u65E5",
+    hour: "\u65F6",
+    minute: "\u5206",
+    second: "\u79D2"
+  },
+  countdown: {
+    remain: {
+      year: "\u5E74",
+      month: "\u4E2A\u6708",
+      day: "\u5929",
+      hour: "\u5C0F\u65F6",
+      minute: "\u5206\u949F",
+      second: "\u79D2"
+    },
+    remainTime: "\u5269\u4F59\u65F6\u95F4",
+    hasEnd: "\u5012\u8BA1\u65F6\u5DF2\u7ED3\u675F",
+    willEnd: "\u5373\u5C06\u7ED3\u675F",
+    timer: "\u5012\u8BA1\u65F6\u5668"
+  },
+  progress: {
+    labelName: "\u8FDB\u5EA6\u6761",
+    notStarted: "\u672A\u5F00\u59CB",
+    justBegun: "\u521A\u521A\u5F00\u59CB",
+    gettingStarted: "\u5F00\u59CB\u8FDB\u884C",
+    inProgress: "\u8FDB\u884C\u4E2D",
+    moreThanHalfway: "\u8FC7\u534A\u5B8C\u6210",
+    nearingCompletion: "\u63A5\u8FD1\u5B8C\u6210",
+    almostComplete: "\u5373\u5C06\u5B8C\u6210",
+    complete: "\u5DF2\u5B8C\u6210"
+  },
+  textarea: {
+    labelName: "\u6587\u672C\u533A\u57DF",
+    placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9",
+    remaining: "\u5269\u4F59",
+    characters: "\u4E2A\u5B57"
   }
 };
 var zh_CN_default = zhCN;