@befe/brick-comp-badge 0.2.77

package/README.md

@@ -0,0 +1 @@
+## FAQ

package/es/index.css

@@ -0,0 +1,63 @@
+.brick-badge,
+.brick-badge * {
+  box-sizing: border-box;
+}
+.brick-badge {
+  display: inline-block;
+  position: relative;
+}
+.brick-badge-mark {
+  display: inline-block;
+  text-align: center;
+  color: rgb(255, 255, 255);
+  background: #e64552;
+  border: 1px solid rgb(255, 255, 255);
+}
+.brick-badge-type-standard .brick-badge-mark, .brick-badge-type-dot .brick-badge-mark {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translateX(50%) translateY(-50%);
+}
+.brick-badge-type-standard .brick-badge-mark {
+  height: 20px;
+  min-width: 20px;
+  padding: 0 6px;
+  font-size: 12px;
+  line-height: 18px;
+  border-radius: 10px;
+  white-space: nowrap;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.brick-badge-type-dot .brick-badge-mark, .brick-badge-type-status .brick-badge-mark {
+  width: 8px;
+  height: 8px;
+}
+.brick-badge-type-dot .brick-badge-mark, .brick-badge-type-status .brick-badge-mark {
+  border-radius: 4px;
+}
+.brick-badge-type-status .brick-badge-mark {
+  margin-right: 8px;
+}
+
+.brick-badge-color-primary .brick-badge-mark {
+  background: #4c84ff;
+}
+
+.brick-badge-color-success .brick-badge-mark {
+  background: #39bf45;
+}
+
+.brick-badge-color-danger .brick-badge-mark {
+  background: #e64552;
+}
+
+.brick-badge-color-warning .brick-badge-mark {
+  background: #f27c49;
+}
+
+.brick-badge-color-inactive .brick-badge-mark {
+  background: rgb(204, 204, 204);
+}

package/es/index.js

@@ -0,0 +1,116 @@
+import _Reflect$construct from "@babel/runtime-corejs3/core-js-stable/reflect/construct";
+import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
+import _createClass from "@babel/runtime-corejs3/helpers/createClass";
+import _inherits from "@babel/runtime-corejs3/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = _Reflect$construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { Component, isValidElement } from 'react';
+// import * as PropTypes from 'prop-types'
+import c from 'classnames';
+import { isString } from 'lodash-es';
+import { codeWarning } from '@befe/brick-utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var BADGE_MAX_DEFAULT = 99;
+export var Badge = /*#__PURE__*/function (_Component) {
+  _inherits(Badge, _Component);
+  var _super = _createSuper(Badge);
+  function Badge() {
+    _classCallCheck(this, Badge);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Badge, [{
+    key: "color",
+    get: function get() {
+      var _ref = this.props,
+        type = _ref.type;
+      process.env.NODE_ENV !== "production" ? codeWarning(
+      // @ts-ignore 兼容已废弃的历史 color error
+      this.props.color !== 'error', '[Badge] color \'error\' has been deprecated, use color  \'danger\' instead.') : void 0;
+
+      // istanbul ignore else
+      // @ts-ignore 兼容已废弃的历史 color error
+      var color = this.props.color === 'error' ? 'danger' : this.props.color;
+      if (color) {
+        return color;
+      }
+      if (type === 'status') {
+        return 'inactive';
+      }
+      return undefined;
+    }
+  }, {
+    key: "className",
+    get: function get() {
+      var _ref2 = this.props,
+        className = _ref2.className,
+        type = _ref2.type;
+      var color = this.color;
+      return c('brick-badge', color && "brick-badge-color-".concat(color), "brick-badge-type-".concat(type), className);
+    }
+  }, {
+    key: "titleTip",
+    get: function get() {
+      var _this$props = this.props,
+        title = _this$props.title,
+        content = _this$props.content;
+      if (isString(title)) {
+        return title;
+      }
+      if (typeof content === 'number') {
+        return content.toString();
+      }
+      return isString(content) ? content : undefined;
+    }
+  }, {
+    key: "markContent",
+    get: function get() {
+      var _this$props2 = this.props,
+        content = _this$props2.content,
+        max = _this$props2.max;
+      if (!content) {
+        return null;
+      }
+      if ( /*#__PURE__*/isValidElement(content) || isString(content)) {
+        return content;
+      }
+      if (content && typeof content === 'number') {
+        var count = Math.floor(Number(content));
+        var _max = max || BADGE_MAX_DEFAULT;
+        return count > _max ? "".concat(max, "+") : "".concat(count);
+      }
+      return null;
+    }
+  }, {
+    key: "renderMark",
+    value: function renderMark() {
+      var type = this.props.type;
+      var markContent = this.markContent;
+      var showMark = markContent || type === 'status';
+      var showContent = type !== 'dot' && type !== 'status';
+      return showMark && /*#__PURE__*/_jsx("div", {
+        className: 'brick-badge-mark',
+        children: showContent && markContent
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_jsxs("div", {
+        className: this.className,
+        title: this.titleTip,
+        children: [this.renderMark(), this.props.children]
+      });
+    }
+  }]);
+  return Badge;
+}(Component);
+_defineProperty(Badge, "displayName", 'Badge');
+// static propTypes = {}
+_defineProperty(Badge, "defaultProps", {
+  className: '',
+  type: 'standard',
+  max: BADGE_MAX_DEFAULT
+});

package/es/style.css

@@ -0,0 +1,63 @@
+.brick-badge,
+.brick-badge * {
+  box-sizing: border-box;
+}
+.brick-badge {
+  display: inline-block;
+  position: relative;
+}
+.brick-badge-mark {
+  display: inline-block;
+  text-align: center;
+  color: rgb(255, 255, 255);
+  background: #e64552;
+  border: 1px solid rgb(255, 255, 255);
+}
+.brick-badge-type-standard .brick-badge-mark, .brick-badge-type-dot .brick-badge-mark {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translateX(50%) translateY(-50%);
+}
+.brick-badge-type-standard .brick-badge-mark {
+  height: 20px;
+  min-width: 20px;
+  padding: 0 6px;
+  font-size: 12px;
+  line-height: 18px;
+  border-radius: 10px;
+  white-space: nowrap;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.brick-badge-type-dot .brick-badge-mark, .brick-badge-type-status .brick-badge-mark {
+  width: 8px;
+  height: 8px;
+}
+.brick-badge-type-dot .brick-badge-mark, .brick-badge-type-status .brick-badge-mark {
+  border-radius: 4px;
+}
+.brick-badge-type-status .brick-badge-mark {
+  margin-right: 8px;
+}
+
+.brick-badge-color-primary .brick-badge-mark {
+  background: #4c84ff;
+}
+
+.brick-badge-color-success .brick-badge-mark {
+  background: #39bf45;
+}
+
+.brick-badge-color-danger .brick-badge-mark {
+  background: #e64552;
+}
+
+.brick-badge-color-warning .brick-badge-mark {
+  background: #f27c49;
+}
+
+.brick-badge-color-inactive .brick-badge-mark {
+  background: rgb(204, 204, 204);
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@befe/brick-comp-badge",
+  "version": "0.2.77",
+  "description": "@befe/brick component Badge",
+  "main": "es",
+  "module": "es",
+  "types": "types",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "scripts": {
+    "test": "node ../../scripts/test",
+    "clean": "rm -rf es lib mobx types",
+    "build": "npm run clean && npm run build:js && npm run build:dts && npm run build:style",
+    "build:dts": "node ../../scripts/build-dts",
+    "build:js": "node ../../scripts/build-js",
+    "build:style": "node ../../scripts/build-style-component"
+  },
+  "author": "wujun07",
+  "license": "ISC",
+  "dependencies": {
+    "@befe/brick-core": "^0.2.42",
+    "@befe/brick-style": "^0.2.54",
+    "@befe/brick-utils": "^0.2.17"
+  },
+  "peerDependencies": {
+    "classnames": "^2.0.0",
+    "lodash-es": "^4.0.0",
+    "react": "^16.9.0 || ^17.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0"
+  },
+  "gitHead": "ed610b70dd5ccb910c0edaf32e1521f31d1aa397"
+}

package/src/index.scss

@@ -0,0 +1,2 @@
+@forward "./style";
+// 依赖组件的样式写在下方，因为需要被 ./style 中的 base 覆盖 theme variable

package/src/index.tsx

@@ -0,0 +1,146 @@
+import {Component, ReactNode, HTMLAttributes,  isValidElement} from 'react'
+// import * as PropTypes from 'prop-types'
+import c from 'classnames'
+import {isString} from 'lodash-es'
+import {codeWarning} from '@befe/brick-utils'
+
+export interface BadgeProps {
+    /**
+     * 自定义 class
+     */
+    className?: string
+
+    /**
+     * 标记类型
+     */
+    type?: 'standard' | 'dot' | 'status'
+
+    /**
+     * 标记内容
+     * - number: 数量
+     * - string: 内容
+     */
+    content?: ReactNode
+
+    /**
+     * content 为 number时 最大显示数量 n，超过则显示 n+
+     */
+    max?: number
+
+    /**
+     * 颜色
+     */
+    color?: 'primary' | 'success' | 'warning' | 'danger' | 'inactive'
+
+    /**
+     * 原生 hover title tip，如不同则以 content 为 tip，以便可以显示超出 max 的 count
+     */
+    title?: HTMLAttributes<HTMLDivElement>['title']
+}
+
+const BADGE_MAX_DEFAULT = 99
+
+type BadgePropsWithDefaults = BadgeProps & Required<Pick<BadgeProps, keyof typeof Badge.defaultProps>>
+
+export class Badge extends Component<BadgeProps> {
+    static displayName = 'Badge'
+    // static propTypes = {}
+    static defaultProps = {
+        className: '',
+        type: 'standard',
+        max: BADGE_MAX_DEFAULT,
+    }
+
+    get color() {
+        const {type} = this.props as BadgePropsWithDefaults
+
+        codeWarning(
+            // @ts-ignore 兼容已废弃的历史 color error
+            this.props.color !== 'error',
+            '[Badge] color \'error\' has been deprecated, use color  \'danger\' instead.'
+        )
+
+        // istanbul ignore else
+        // @ts-ignore 兼容已废弃的历史 color error
+        const color = this.props.color === 'error' ? 'danger' : this.props.color
+
+        if (color) {
+            return color
+        }
+
+        if (type === 'status') {
+            return 'inactive'
+        }
+
+        return undefined
+    }
+
+    get className() {
+        const {className, type} = this.props as BadgePropsWithDefaults
+        const color = this.color
+
+        return c(
+            'brick-badge',
+            color && `brick-badge-color-${color}`,
+            `brick-badge-type-${type}`,
+            className
+        )
+    }
+
+    get titleTip() {
+        const {title, content} = this.props
+
+        if (isString(title)) {
+            return title
+        }
+
+        if (typeof content === 'number') {
+            return content.toString()
+        }
+
+        return isString(content) ? content : undefined
+    }
+
+    get markContent() {
+        const {content, max} = this.props
+
+        if (!content) {
+            return null
+        }
+
+        if (isValidElement(content) || isString(content)) {
+            return content
+        }
+
+        if (content && typeof content === 'number') {
+            const count = Math.floor(Number(content))
+            const _max = max || BADGE_MAX_DEFAULT
+
+            return count > _max ? `${max as number}+` : `${count}`
+        }
+
+        return null
+    }
+
+    renderMark() {
+        const {type} = this.props
+        const markContent = this.markContent
+        const showMark = markContent || type === 'status'
+        const showContent = type !== 'dot' && type !== 'status'
+
+        return showMark && (
+            <div className={'brick-badge-mark'}>
+                {showContent && markContent}
+            </div>
+        )
+    }
+
+    render() {
+        return (
+            <div className={this.className} title={this.titleTip}>
+                {this.renderMark()}
+                {this.props.children}
+            </div>
+        )
+    }
+}

package/src/style.scss

@@ -0,0 +1,72 @@
+@use "sass:math";
+@use "sass:map";
+@use "@befe/brick-style/src/themes/base";
+@use "@befe/brick-style/src/themes/badge";
+
+.brick-badge {
+  @include base.reset();
+  & {
+    display: inline-block;
+    position: relative;
+  }
+
+  &-mark {
+    display: inline-block;
+    text-align: center;
+    color: base.$color-text-reverse;
+    background: badge.$badge-color-default;
+    border: badge.$badge-border-width solid badge.$badge-border-color;
+  }
+
+  &-type-standard,
+  &-type-dot {
+    .brick-badge-mark {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translateX(50%) translateY(-50%);
+    }
+  }
+
+  &-type-standard {
+    .brick-badge-mark {
+      height: badge.$badge-standard-height;
+      min-width: badge.$badge-standard-width;
+      padding: 0 badge.$badge-standard-padding-horizontal;
+      font-size: base.$font-size-sm;
+      line-height: badge.$badge-standard-size - badge.$badge-border-width * 2;
+      border-radius: math.div(badge.$badge-standard-height, 2);
+      // @info: 不让换行，不然遇到空格就自动换行了
+      white-space: nowrap;
+      max-width: badge.$badge-content-max-width;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &-type-dot,
+  &-type-status {
+    .brick-badge-mark {
+      @include base.size(badge.$badge-dot-size);
+      & {
+        border-radius: math.div(badge.$badge-dot-size, 2);
+      }
+    }
+  }
+
+  &-type-dot {
+  }
+  &-type-status {
+    .brick-badge-mark {
+      margin-right: badge.$badge-status-distance;
+    }
+  }
+}
+
+@each $color in badge.$badge-color-list {
+  .brick-badge-color-#{$color} {
+    .brick-badge-mark {
+      background: map.get(badge.$badge-color, $color);;
+    }
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,43 @@
+import { Component, ReactNode, HTMLAttributes } from 'react';
+export interface BadgeProps {
+    /**
+     * 自定义 class
+     */
+    className?: string;
+    /**
+     * 标记类型
+     */
+    type?: 'standard' | 'dot' | 'status';
+    /**
+     * 标记内容
+     * - number: 数量
+     * - string: 内容
+     */
+    content?: ReactNode;
+    /**
+     * content 为 number时 最大显示数量 n，超过则显示 n+
+     */
+    max?: number;
+    /**
+     * 颜色
+     */
+    color?: 'primary' | 'success' | 'warning' | 'danger' | 'inactive';
+    /**
+     * 原生 hover title tip，如不同则以 content 为 tip，以便可以显示超出 max 的 count
+     */
+    title?: HTMLAttributes<HTMLDivElement>['title'];
+}
+export declare class Badge extends Component<BadgeProps> {
+    static displayName: string;
+    static defaultProps: {
+        className: string;
+        type: string;
+        max: number;
+    };
+    get color(): "primary" | "success" | "warning" | "danger" | "inactive" | undefined;
+    get className(): string;
+    get titleTip(): string | undefined;
+    get markContent(): string | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+    renderMark(): false | "" | JSX.Element;
+    render(): JSX.Element;
+}