@bifrostui/react 0.0.5

package/dist/Countdown/Countdown.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("@bifrostui/utils");
+var _useCountdown = _interopRequireDefault(require("./useCountdown"));
+var _utils2 = require("./utils");
+require("./Countdown.css");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const prefixCls = 'bui-countdown';
+const Countdown = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    className,
+    serverTimestamp,
+    endTimestamp,
+    remainingTime,
+    format,
+    unitStyle,
+    valueStyle,
+    timeSliceStyle,
+    renderContent,
+    onChange,
+    onFinish,
+    ...others
+  } = props;
+
+  // 开始时间戳
+  const [startTime, setStartTime] = (0, _react.useState)(() => serverTimestamp ?? Date.now());
+  // 结束时间戳
+  const [endTime, setEndTime] = (0, _react.useState)(() => endTimestamp ?? startTime + +remainingTime);
+  const {
+    time,
+    isEnd
+  } = (0, _useCountdown.default)({
+    startTime,
+    endTime,
+    onChange
+  });
+  (0, _react.useEffect)(() => {
+    if (isEnd) {
+      onFinish?.();
+    }
+  }, [isEnd]);
+  (0, _utils.useDidMountEffect)(() => {
+    if (remainingTime !== undefined) {
+      const start = Date.now();
+      setStartTime(start);
+      setEndTime(start + +remainingTime);
+    }
+  }, [remainingTime]);
+  (0, _react.useEffect)(() => {
+    if (serverTimestamp && endTimestamp) {
+      setStartTime(serverTimestamp);
+      setEndTime(endTimestamp);
+    }
+  }, [serverTimestamp, endTimestamp]);
+  const defaultRender = timeIns => {
+    const {
+      timeList
+    } = (0, _utils2.formatCountdown)(timeIns.total, format);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, timeList.map((item, index) => {
+      const {
+        unitText,
+        valStr
+      } = item;
+      const valueList = valStr.split('');
+      return /*#__PURE__*/_react.default.createElement("span", {
+        key: `slice-${index}`,
+        className: (0, _clsx.default)(`${prefixCls}-slice`),
+        style: timeSliceStyle
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: (0, _clsx.default)(`${prefixCls}-slice-item`)
+      }, valueList.map((val, i) => /*#__PURE__*/_react.default.createElement("span", {
+        key: `slice-value-${i}`,
+        className: (0, _clsx.default)(`${prefixCls}-slice-value`),
+        style: valueStyle[i]
+      }, val))), unitText && /*#__PURE__*/_react.default.createElement("span", {
+        className: (0, _clsx.default)(`${prefixCls}-slice-unit`),
+        style: unitStyle
+      }, unitText));
+    }));
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    className: (0, _clsx.default)(prefixCls, className)
+  }, others), renderContent ? renderContent(time) : defaultRender(time));
+});
+Countdown.displayName = 'BuiCountdown';
+Countdown.defaultProps = {
+  format: 'HH:mm:ss',
+  remainingTime: 0,
+  unitStyle: {},
+  valueStyle: [{}, {}],
+  timeSliceStyle: {}
+};
+var _default = exports.default = Countdown;

package/dist/Countdown/Countdown.types.d.ts

@@ -0,0 +1,123 @@
+import { OverrideProps } from '@bifrostui/types';
+import React, { CSSProperties } from 'react';
+/**
+ * 当前时间
+ */
+export type CurrentTime = {
+    /**
+     * 剩余总时间，单位毫秒
+     */
+    total: number;
+    /**
+     * 剩余年数
+     */
+    years: string;
+    /**
+     * 剩余月数
+     */
+    months: string;
+    /**
+     * 剩余天数
+     */
+    days: string;
+    /**
+     * 剩余小时
+     */
+    hours: string;
+    /**
+     * 剩余分钟
+     */
+    minutes: string;
+    /**
+     * 剩余秒数
+     */
+    seconds: string;
+    /**
+     * 剩余整数天余下的小时
+     */
+    hoursWithDays: string;
+};
+export type CountdownProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 倒计时剩余时间，是一个时间段（单位毫秒），与endTimestamp互斥
+         * @default 0
+         */
+        remainingTime?: number;
+        /**
+         * 倒计时结束时间戳，是一个时间点，与remainingTime互斥，优先级比remainingTime高
+         */
+        endTimestamp?: number;
+        /**
+         * 服务器时间戳，是一个时间点，可与endTimestamp配合使用
+         */
+        serverTimestamp?: number;
+        /**
+         * 格式化倒计时展示，参考 dayjs
+         * @default HH:mm:ss
+         */
+        format?: string;
+        /**
+         * 时间单位的样式
+         */
+        unitStyle?: CSSProperties;
+        /**
+         * 倒计时位数的样式，用于定制第一、第二位数字的样式
+         */
+        valueStyle?: CSSProperties[];
+        /**
+         * 各时间区块的样式，用于定制各个时间块的样式，若第一、第二位数字的样式相同，则可替代valueStyle
+         */
+        timeSliceStyle?: CSSProperties;
+        /**
+         * 倒计时完成时触发
+         */
+        onFinish?: () => void;
+        /**
+         * 倒计时时间变化时触发
+         */
+        onChange?: (data: {
+            value: number;
+        }) => void;
+        /**
+         * 自定义render内容
+         */
+        renderContent?: (data: CurrentTime) => React.ReactNode;
+    };
+    defaultComponent: D;
+}, D>;
+/**
+ * 倒计时格式化后分割项
+ */
+interface CountdownItem {
+    /**
+     * 倒计时切片字符串
+     */
+    valStr: string;
+    /**
+     * 倒计时切片数值
+     */
+    value: number;
+    /**
+     * 倒计时切片是否为零
+     */
+    isZero: boolean;
+    /**
+     * 倒计时切片单位
+     */
+    unitText: string;
+}
+/**
+ * 格式化倒计时
+ */
+export type FormatedCountdown = {
+    /**
+     * 剩余总时间
+     */
+    timeStr: string;
+    /**
+     * 倒计时切片数组
+     */
+    timeList: CountdownItem[];
+};
+export {};

package/dist/Countdown/Countdown.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/Countdown/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Countdown, default } from './Countdown';
+export * from './Countdown.types';
+export * from './utils';

package/dist/Countdown/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Countdown: true
+};
+Object.defineProperty(exports, "Countdown", {
+  enumerable: true,
+  get: function () {
+    return _Countdown.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Countdown.default;
+  }
+});
+var _Countdown = _interopRequireDefault(require("./Countdown"));
+var _Countdown2 = require("./Countdown.types");
+Object.keys(_Countdown2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Countdown2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Countdown2[key];
+    }
+  });
+});
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/Countdown/useCountdown.d.ts

@@ -0,0 +1,10 @@
+import { CurrentTime } from './Countdown.types';
+declare const _default: ({ startTime: startTimestamp, endTime: endTimestamp, onChange, }: {
+    startTime: any;
+    endTime: any;
+    onChange: any;
+}) => {
+    time: CurrentTime;
+    isEnd: boolean;
+};
+export default _default;

package/dist/Countdown/useCountdown.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _utils = require("./utils");
+const REFRESH_INTERVAL = 50;
+var _default = ({
+  startTime: startTimestamp,
+  endTime: endTimestamp,
+  onChange
+}) => {
+  // 初始化时间差
+  const initOffsetTime = (0, _react.useMemo)(() => startTimestamp - new Date().getTime(), [startTimestamp, endTimestamp]);
+  const [time, setTime] = (0, _react.useState)((0, _utils.parseTime)(endTimestamp, initOffsetTime));
+  const [isEnd, setIsEnd] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setIsEnd(false);
+    if (startTimestamp === 0 || endTimestamp === 0 || endTimestamp <= startTimestamp) {
+      return;
+    }
+
+    // 重新计算时间差
+    const offsetTime = startTimestamp - new Date().getTime();
+    const timer = setInterval(() => {
+      const currentTime = (0, _utils.parseTime)(endTimestamp, offsetTime);
+      setTime(currentTime);
+      onChange?.({
+        value: currentTime
+      });
+      if (currentTime.total <= 0 || !endTimestamp) {
+        setIsEnd(true);
+        clearInterval(timer);
+      }
+    }, REFRESH_INTERVAL);
+
+    // eslint-disable-next-line consistent-return
+    return () => clearInterval(timer);
+  }, [startTimestamp, endTimestamp]);
+  return {
+    time,
+    isEnd
+  };
+};
+exports.default = _default;

package/dist/Countdown/utils.d.ts

@@ -0,0 +1,9 @@
+import { CurrentTime, FormatedCountdown } from './Countdown.types';
+/**
+ * 解析时间，将结束时间戳拆分为剩余时间对象
+ */
+export declare const parseTime: (endTime: number, offsetTime: number) => CurrentTime;
+/**
+ * 格式化倒计时，将剩余时间格式化为指定格式，并拆分位各个时间模块
+ */
+export declare const formatCountdown: (duration: number, format: string) => FormatedCountdown;

package/dist/Countdown/utils.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseTime = exports.formatCountdown = void 0;
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const MONTH = 30 * DAY;
+const YEAR = 365 * DAY;
+const timeUnits = [['Y', YEAR],
+// years
+['M', MONTH],
+// months
+['D', DAY],
+// days
+['H', HOUR],
+// hours
+['m', MINUTE],
+// minutes
+['s', SECOND],
+// seconds
+['S', 1] // million seconds
+];
+const preAppend = num => {
+  if (num < 0) return '00';
+  return num < 10 ? `0${num}` : `${num}`;
+};
+
+/**
+ * 解析时间，将结束时间戳拆分为剩余时间对象
+ */
+const parseTime = (endTime, offsetTime) => {
+  const now = new Date().getTime();
+  let total = endTime - now - offsetTime || 0;
+  total = total < 0 ? 0 : total;
+  const years = Math.floor(total / YEAR);
+  const months = Math.floor(total / MONTH);
+  const days = Math.floor(total / DAY);
+  const hours = Math.floor(total % DAY / HOUR);
+  const minutes = Math.floor(total % HOUR / MINUTE);
+  const seconds = Math.floor(total % MINUTE / SECOND);
+  const hoursWithDays = Math.floor(total / HOUR) % 24;
+  return {
+    total,
+    years: preAppend(years),
+    months: preAppend(months),
+    days: preAppend(days),
+    hours: preAppend(hours),
+    minutes: preAppend(minutes),
+    seconds: preAppend(seconds),
+    hoursWithDays: preAppend(hoursWithDays)
+  };
+};
+
+/**
+ * 格式化倒计时，将剩余时间格式化为指定格式，并拆分位各个时间模块
+ */
+exports.parseTime = parseTime;
+const formatCountdown = (duration, format) => {
+  let timeList = [];
+  let leftDuration = duration;
+  const escapeRegex = /\[[^\]]*]/g;
+  const keepList = (format.match(escapeRegex) || []).map(str => str.slice(1, -1));
+  const templateText = format.replace(escapeRegex, '[]');
+  const replacedText = timeUnits.reduce(({
+    currentTemplate,
+    valStr,
+    value,
+    isZero
+  }, [name, unit]) => {
+    if (currentTemplate.includes(name)) {
+      const val = Math.floor(leftDuration / unit);
+      isZero = val <= 0;
+      leftDuration -= val * unit;
+      let vStr = '';
+      currentTemplate = currentTemplate.replace(new RegExp(`${name}+`, 'g'), match => {
+        const len = match.length;
+        vStr = val.toString().padStart(len, '0').slice(0, len);
+        return vStr;
+      });
+      timeList.push({
+        valStr: vStr,
+        value: val,
+        isZero
+      });
+      return {
+        currentTemplate,
+        valStr: vStr,
+        value: val,
+        isZero
+      };
+    }
+    return {
+      currentTemplate,
+      valStr,
+      isZero,
+      value
+    };
+  }, {
+    currentTemplate: templateText,
+    valStr: '',
+    value: 0,
+    isZero: false
+  });
+  let index = 0;
+  const timeStr = replacedText.currentTemplate.replace(escapeRegex, () => {
+    const match = keepList[index];
+    index += 1;
+    return match;
+  });
+  const unitList = timeStr.match(/\D+/g);
+  timeList = timeList.map((item, i) => {
+    item.unitText = unitList[i];
+    return item;
+  });
+  return {
+    timeStr,
+    timeList
+  };
+};
+exports.formatCountdown = formatCountdown;

package/dist/Divider/Divider.css

@@ -0,0 +1,41 @@
+.bui-divider {
+  --height: var(--bui-divider-height, 100%);
+  --width: var(--bui-divider-width, 100%);
+  border-color: var(--bui-color-border-default);
+  font-family: var(--bui-font-family);
+}
+.bui-divider-vertical {
+  height: var(--height);
+  display: inline-block;
+  border-right-width: 1px;
+  border-right-style: solid;
+}
+.bui-divider-horizontal {
+  width: var(--width);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+.bui-divider-vertical-dashed {
+  border-right-style: dashed;
+}
+.bui-divider-horizontal-dashed {
+  border-bottom-style: dashed;
+}
+.bui-divider-content {
+  width: 100%;
+  border-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bui-divider-line {
+  width: 40px;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: var(--bui-color-border-default);
+}
+.bui-divider-text {
+  flex-shrink: 0;
+  color: var(--bui-color-fg-subtle);
+  font-size: var(--bui-text-size-2);
+}

package/dist/Divider/Divider.d.ts

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

package/dist/Divider/Divider.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+require("./Divider.css");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const prefixCls = 'bui-divider';
+const Divider = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    className,
+    style,
+    direction,
+    dashed,
+    size,
+    children
+  } = props;
+  const isVertical = direction === 'vertical';
+  const hasChildren = !!_react.default.Children.toArray(children).length;
+  let propsStyle = {};
+  let contentStyle = {};
+  if (hasChildren) {
+    contentStyle = {
+      width: size
+    };
+  } else if (size) {
+    propsStyle = isVertical ? {
+      height: size
+    } : {
+      width: size
+    };
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: (0, _clsx.default)(className, prefixCls, {
+      [`${prefixCls}-${direction}`]: direction,
+      [`${prefixCls}-content`]: !isVertical && hasChildren,
+      [`${prefixCls}-${direction}-dashed`]: dashed
+    }),
+    style: {
+      ...propsStyle,
+      ...style
+    }
+  }, !isVertical && hasChildren && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    style: contentStyle,
+    className: `${prefixCls}-line`
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: `${prefixCls}-text`
+  }, children), /*#__PURE__*/_react.default.createElement("span", {
+    style: contentStyle,
+    className: `${prefixCls}-line`
+  })));
+});
+Divider.displayName = 'BuiDivider';
+Divider.defaultProps = {
+  direction: 'vertical',
+  dashed: false
+};
+var _default = exports.default = Divider;

package/dist/Divider/Divider.types.d.ts

@@ -0,0 +1,19 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+export type DividerProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 分割线方向
+         */
+        direction?: 'horizontal' | 'vertical';
+        /**
+         * horizontal时代表宽度，vertical时代表高度
+         */
+        size?: string;
+        /**
+         * 是否使用虚线
+         */
+        dashed?: boolean;
+    };
+    defaultComponent: D;
+}, D>;

package/dist/Divider/Divider.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/Divider/index.d.ts

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

package/dist/Divider/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Divider: true
+};
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function () {
+    return _Divider.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Divider.default;
+  }
+});
+var _Divider = _interopRequireDefault(require("./Divider"));
+var _Divider2 = require("./Divider.types");
+Object.keys(_Divider2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Divider2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Divider2[key];
+    }
+  });
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/Drawer/Drawer.css

@@ -0,0 +1,35 @@
+.bui-drawer {
+  font-family: var(--bui-font-family);
+}
+.bui-drawer-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex: 1 0 auto;
+  position: fixed;
+  top: 0;
+  outline: 0;
+  background-color: var(--bui-color-bg-view);
+}
+.bui-drawer-content-left {
+  left: 0;
+}
+.bui-drawer-content-top {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: auto;
+  max-height: 100%;
+}
+.bui-drawer-content-right {
+  right: 0;
+}
+.bui-drawer-content-bottom {
+  bottom: 0;
+  top: auto;
+  left: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  right: 0;
+  height: auto;
+  max-height: 100%;
+}