linkmore-design 1.0.77 → 1.0.80

package/es/Badge/SingleNumber.js

@@ -0,0 +1,122 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import classNames from 'classnames';
+import * as React from 'react';
+
+function UnitNumber(_ref) {
+  var prefixCls = _ref.prefixCls,
+      value = _ref.value,
+      current = _ref.current,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? 0 : _ref$offset;
+  var style;
+
+  if (offset) {
+    style = {
+      position: 'absolute',
+      top: "".concat(offset, "00%"),
+      left: 0
+    };
+  }
+
+  return /*#__PURE__*/React.createElement("span", {
+    style: style,
+    className: classNames("".concat(prefixCls, "-only-unit"), {
+      current: current
+    })
+  }, value);
+}
+
+function getOffset(start, end, unit) {
+  var index = start;
+  var offset = 0;
+
+  while ((index + 10) % 10 !== end) {
+    index += unit;
+    offset += unit;
+  }
+
+  return offset;
+}
+
+export default function SingleNumber(props) {
+  var prefixCls = props.prefixCls,
+      originCount = props.count,
+      originValue = props.value;
+  var value = Number(originValue);
+  var count = Math.abs(originCount);
+
+  var _React$useState = React.useState(value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      prevValue = _React$useState2[0],
+      setPrevValue = _React$useState2[1];
+
+  var _React$useState3 = React.useState(count),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      prevCount = _React$useState4[0],
+      setPrevCount = _React$useState4[1]; // ============================= Events =============================
+
+
+  var onTransitionEnd = function onTransitionEnd() {
+    setPrevValue(value);
+    setPrevCount(count);
+  }; // Fallback if transition event not support
+
+
+  React.useEffect(function () {
+    var timeout = setTimeout(function () {
+      onTransitionEnd();
+    }, 1000);
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, [value]); // ============================= Render =============================
+  // Render unit list
+
+  var unitNodes;
+  var offsetStyle;
+
+  if (prevValue === value || Number.isNaN(value) || Number.isNaN(prevValue)) {
+    // Nothing to change
+    unitNodes = [/*#__PURE__*/React.createElement(UnitNumber, Object.assign({}, props, {
+      key: value,
+      current: true
+    }))];
+    offsetStyle = {
+      transition: 'none'
+    };
+  } else {
+    unitNodes = []; // Fill basic number units
+
+    var end = value + 10;
+    var unitNumberList = [];
+
+    for (var index = value; index <= end; index += 1) {
+      unitNumberList.push(index);
+    } // Fill with number unit nodes
+
+
+    var prevIndex = unitNumberList.findIndex(function (n) {
+      return n % 10 === prevValue;
+    });
+    unitNodes = unitNumberList.map(function (n, index) {
+      var singleUnit = n % 10;
+      return /*#__PURE__*/React.createElement(UnitNumber, Object.assign({}, props, {
+        key: n,
+        value: singleUnit,
+        offset: index - prevIndex,
+        current: index === prevIndex
+      }));
+    }); // Calculate container offset value
+
+    var unit = prevCount < count ? 1 : -1;
+    offsetStyle = {
+      transform: "translateY(".concat(-getOffset(prevValue, value, unit), "00%)")
+    };
+  }
+
+  return /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-only"),
+    style: offsetStyle,
+    onTransitionEnd: onTransitionEnd
+  }, unitNodes);
+}

package/es/Badge/index.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
+import type { LiteralUnion } from '../_util/type';
+import Ribbon from './Ribbon';
+export { ScrollNumberProps } from './ScrollNumber';
+interface CompoundedComponent extends React.FC<BadgeProps> {
+    Ribbon: typeof Ribbon;
+}
+export interface BadgeProps {
+    /** Number to show in badge */
+    count?: React.ReactNode;
+    showZero?: boolean;
+    /** Max count to show */
+    overflowCount?: number;
+    /** Whether to show red dot without number */
+    dot?: boolean;
+    style?: React.CSSProperties;
+    prefixCls?: string;
+    scrollNumberPrefixCls?: string;
+    className?: string;
+    status?: PresetStatusColorType;
+    color?: LiteralUnion<PresetColorType, string>;
+    text?: React.ReactNode;
+    size?: 'default' | 'small';
+    offset?: [number | string, number | string];
+    title?: string;
+    children?: React.ReactNode;
+}
+declare const Badge: CompoundedComponent;
+export default Badge;

package/es/Badge/index.js

@@ -0,0 +1,183 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import classNames from 'classnames';
+import CSSMotion from 'rc-motion';
+import * as React from 'react';
+import { useMemo, useRef } from 'react';
+import { ConfigContext } from '../ConfigProvider';
+import { cloneElement } from '../_util/reactNode';
+import Ribbon from './Ribbon';
+import ScrollNumber from './ScrollNumber';
+import { isPresetColor } from './utils';
+
+var Badge = function Badge(_a) {
+  var _classNames, _classNames2;
+
+  var customizePrefixCls = _a.prefixCls,
+      customizeScrollNumberPrefixCls = _a.scrollNumberPrefixCls,
+      children = _a.children,
+      status = _a.status,
+      text = _a.text,
+      color = _a.color,
+      _a$count = _a.count,
+      count = _a$count === void 0 ? null : _a$count,
+      _a$overflowCount = _a.overflowCount,
+      overflowCount = _a$overflowCount === void 0 ? 99 : _a$overflowCount,
+      _a$dot = _a.dot,
+      dot = _a$dot === void 0 ? false : _a$dot,
+      _a$size = _a.size,
+      size = _a$size === void 0 ? 'default' : _a$size,
+      title = _a.title,
+      offset = _a.offset,
+      style = _a.style,
+      className = _a.className,
+      _a$showZero = _a.showZero,
+      showZero = _a$showZero === void 0 ? false : _a$showZero,
+      restProps = __rest(_a, ["prefixCls", "scrollNumberPrefixCls", "children", "status", "text", "color", "count", "overflowCount", "dot", "size", "title", "offset", "style", "className", "showZero"]);
+
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      direction = _React$useContext.direction;
+
+  var prefixCls = getPrefixCls('badge', customizePrefixCls); // ================================ Misc ================================
+
+  var numberedDisplayCount = count > overflowCount ? "".concat(overflowCount, "+") : count;
+  var hasStatus = status !== null && status !== undefined || color !== null && color !== undefined;
+  var isZero = numberedDisplayCount === '0' || numberedDisplayCount === 0;
+  var showAsDot = dot && !isZero;
+  var mergedCount = showAsDot ? '' : numberedDisplayCount;
+  var isHidden = useMemo(function () {
+    var isEmpty = mergedCount === null || mergedCount === undefined || mergedCount === '';
+    return (isEmpty || isZero && !showZero) && !showAsDot;
+  }, [mergedCount, isZero, showZero, showAsDot]); // Count should be cache in case hidden change it
+
+  var countRef = useRef(count);
+
+  if (!isHidden) {
+    countRef.current = count;
+  }
+
+  var livingCount = countRef.current; // We need cache count since remove motion should not change count display
+
+  var displayCountRef = useRef(mergedCount);
+
+  if (!isHidden) {
+    displayCountRef.current = mergedCount;
+  }
+
+  var displayCount = displayCountRef.current; // We will cache the dot status to avoid shaking on leaved motion
+
+  var isDotRef = useRef(showAsDot);
+
+  if (!isHidden) {
+    isDotRef.current = showAsDot;
+  } // =============================== Styles ===============================
+
+
+  var mergedStyle = useMemo(function () {
+    if (!offset) {
+      return Object.assign({}, style);
+    }
+
+    var offsetStyle = {
+      marginTop: offset[1]
+    };
+
+    if (direction === 'rtl') {
+      offsetStyle.left = parseInt(offset[0], 10);
+    } else {
+      offsetStyle.right = -parseInt(offset[0], 10);
+    }
+
+    return Object.assign(Object.assign({}, offsetStyle), style);
+  }, [direction, offset, style]); // =============================== Render ===============================
+  // >>> Title
+
+  var titleNode = title !== null && title !== void 0 ? title : typeof livingCount === 'string' || typeof livingCount === 'number' ? livingCount : undefined; // >>> Status Text
+
+  var statusTextNode = isHidden || !text ? null : /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-status-text")
+  }, text); // >>> Display Component
+
+  var displayNode = !livingCount || _typeof(livingCount) !== 'object' ? undefined : cloneElement(livingCount, function (oriProps) {
+    return {
+      style: Object.assign(Object.assign({}, mergedStyle), oriProps.style)
+    };
+  }); // Shared styles
+
+  var statusCls = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-status-dot"), hasStatus), _defineProperty(_classNames, "".concat(prefixCls, "-status-").concat(status), !!status), _defineProperty(_classNames, "".concat(prefixCls, "-status-").concat(color), isPresetColor(color)), _classNames));
+  var statusStyle = {};
+
+  if (color && !isPresetColor(color)) {
+    statusStyle.background = color;
+  }
+
+  var badgeClassName = classNames(prefixCls, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-status"), hasStatus), _defineProperty(_classNames2, "".concat(prefixCls, "-not-a-wrapper"), !children), _defineProperty(_classNames2, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames2), className); // <Badge status="success" />
+
+  if (!children && hasStatus) {
+    var statusTextColor = mergedStyle.color;
+    return /*#__PURE__*/React.createElement("span", Object.assign({}, restProps, {
+      className: badgeClassName,
+      style: mergedStyle
+    }), /*#__PURE__*/React.createElement("span", {
+      className: statusCls,
+      style: statusStyle
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: statusTextColor
+      },
+      className: "".concat(prefixCls, "-status-text")
+    }, text));
+  } // <Badge status="success" count={<Icon type="xxx" />}></Badge>
+
+
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, restProps, {
+    className: badgeClassName
+  }), children, /*#__PURE__*/React.createElement(CSSMotion, {
+    visible: !isHidden,
+    motionName: "".concat(prefixCls, "-zoom"),
+    motionAppear: false,
+    motionDeadline: 1000
+  }, function (_ref) {
+    var _classNames3;
+
+    var motionClassName = _ref.className;
+    var scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);
+    var isDot = isDotRef.current;
+    var scrollNumberCls = classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls, "-dot"), isDot), _defineProperty(_classNames3, "".concat(prefixCls, "-count"), !isDot), _defineProperty(_classNames3, "".concat(prefixCls, "-count-sm"), size === 'small'), _defineProperty(_classNames3, "".concat(prefixCls, "-multiple-words"), !isDot && displayCount && displayCount.toString().length > 1), _defineProperty(_classNames3, "".concat(prefixCls, "-status-").concat(status), !!status), _defineProperty(_classNames3, "".concat(prefixCls, "-status-").concat(color), isPresetColor(color)), _classNames3));
+    var scrollNumberStyle = Object.assign({}, mergedStyle);
+
+    if (color && !isPresetColor(color)) {
+      scrollNumberStyle = scrollNumberStyle || {};
+      scrollNumberStyle.background = color;
+    }
+
+    return /*#__PURE__*/React.createElement(ScrollNumber, {
+      prefixCls: scrollNumberPrefixCls,
+      show: !isHidden,
+      motionClassName: motionClassName,
+      className: scrollNumberCls,
+      count: displayCount,
+      title: titleNode,
+      style: scrollNumberStyle,
+      key: "scrollNumber"
+    }, displayNode);
+  }), statusTextNode);
+};
+
+Badge.Ribbon = Ribbon;
+export default Badge;