feat: barcode 条形码组件 Closes #3416 (#3526)

docs/zh-CN/components/barcode.md

@@ -0,0 +1,43 @@
+---
+title: BarCode 条形码
+description:
+type: 0
+group: ⚙ 组件
+menuName: BarCode 条形码
+icon:
+order: 62
+---
+
+## 基本用法
+
+```schema: scope="body"
+{
+    "type": "barcode",
+    "value": "amis"
+}
+```
+
+## 条形码配置
+
+通过 options 属性配置，具体请参考[这里](https://github.com/lindell/JsBarcode/wiki/Options)，比如
+
+```schema: scope="body"
+{
+    "type": "barcode",
+    "value": "123",
+    "options": {
+      "format": "pharmacode",
+      "lineColor": "#0aa",
+      "width": "4",
+      "height": "40",
+    }
+}
+```
+
+## 属性表
+
+| 属性名    | 类型     | 默认值 | 说明                           |
+| --------- | -------- | ------ | ------------------------------ |
+| className | `string` |        | 外层 CSS 类名                  |
+| value     | `string` |        | 显示的颜色值                   |
+| name      | `string` |        | 在其他组件中，时，用作变量映射 |

examples/components/Components.tsx

@@ -958,6 +958,14 @@ export const components = [
             makeMarkdownRenderer
           )
       },
+      {
+        label: 'BarCode 条形码',
+        path: '/zh-CN/components/barcode',
+        getComponent: () =>
+          import('../../docs/zh-CN/components/barcode.md').then(
+            makeMarkdownRenderer
+          )
+      },
       {
         label: 'Remark 标记',
         path: '/zh-CN/components/remark',

fis-conf.js

@@ -497,7 +497,6 @@ if (fis.project.currentMedia() === 'publish') {
         '!hls.js/**',
         '!froala-editor/**',
         '!codemirror/**',
-
         '!tinymce/**',
         '!zrender/**',
         '!echarts/**',
@@ -515,6 +514,8 @@ if (fis.project.currentMedia() === 'publish') {
         '!tinycolor2/**',
         '!cropperjs/**',
         '!react-cropper/**',
+        '!jsbarcode/**',
+        '!src/components/BarCode.tsx',
         '!src/lib/renderers/Form/CityDB.js',
         '!src/components/Markdown.tsx',
         '!src/utils/markdown.ts',
@@ -560,6 +561,8 @@ if (fis.project.currentMedia() === 'publish') {
 
       'cropperjs.js': ['cropperjs/**', 'react-cropper/**'],
 
+      'barcode.js': ['src/components/BarCode.tsx', 'jsbarcode/**'],
+
       'charts.js': ['zrender/**', 'echarts/**', 'echarts-stat/**'],
 
       'rest.js': [
@@ -796,6 +799,8 @@ if (fis.project.currentMedia() === 'publish') {
         '!tinycolor2/**',
         '!cropperjs/**',
         '!react-cropper/**',
+        '!jsbarcode/**',
+        '!src/components/BarCode.tsx',
         '!src/lib/renderers/Form/CityDB.js',
         '!src/components/Markdown.tsx',
         '!src/utils/markdown.ts',
@@ -819,6 +824,8 @@ if (fis.project.currentMedia() === 'publish') {
 
       'pkg/exceljs.js': ['exceljs/**'],
 
+      'pkg/barcode.js': ['src/components/BarCode.tsx', 'jsbarcode/**'],
+
       'pkg/markdown.js': [
         'src/components/Markdown.tsx',
         'src/utils/markdown.ts',

package.json

@@ -60,6 +60,7 @@
     "hoist-non-react-statics": "^3.3.2",
     "hotkeys-js": "^3.8.7",
     "immutability-helper": "^3.1.1",
+    "jsbarcode": "^3.11.5",
     "keycode": "^2.2.1",
     "lodash": "^4.17.15",
     "markdown-it": "^12.0.6",

scss/components/_barcode.scss

@@ -0,0 +1,6 @@
+.#{$ns}BarCode {
+  > svg {
+    display: block;
+    margin: 0 auto;
+  }
+}

scss/themes/_common.scss

@@ -124,6 +124,7 @@
 @import '../components/mapping';
 @import '../components/formula';
 @import '../components/timeline';
+@import '../components/barcode';
 
 @import '../components/debug';
 

src/Schema.ts

@@ -185,6 +185,7 @@ export type SchemaType =
   | 'progress'
   | 'qrcode'
   | 'qr-code'
+  | 'barcode'
   | 'remark'
   | 'search-box'
   | 'service'

src/components/BarCode.tsx

@@ -0,0 +1,50 @@
+/**
+ * @file 基于实现 bar code
+ */
+
+import React from 'react';
+import {ClassNamesFn, themeable} from '../theme';
+
+import JsBarcode from 'jsbarcode';
+
+export interface BarCodeProps {
+  value: string;
+  className?: string;
+  classPrefix: string;
+  options?: JsBarcode.Options;
+  classnames: ClassNamesFn;
+}
+
+export class BarCode extends React.Component<BarCodeProps> {
+  private dom;
+
+  constructor(props: BarCodeProps) {
+    super(props);
+    this.dom = React.createRef<SVGSVGElement>();
+  }
+
+  componentDidUpdate(prevProps: BarCodeProps) {
+    if (
+      this.props.value !== prevProps.value ||
+      JSON.stringify(this.props.options) !== JSON.stringify(prevProps.options)
+    ) {
+      this.renderBarCode();
+    }
+  }
+
+  renderBarCode() {
+    if (this.dom.current) {
+      JsBarcode(this.dom.current, this.props.value, this.props.options);
+    }
+  }
+
+  componentDidMount() {
+    this.renderBarCode();
+  }
+
+  render() {
+    return <svg ref={this.dom}></svg>;
+  }
+}
+
+export default themeable(BarCode);

src/index.tsx

@@ -163,6 +163,7 @@ import './renderers/Tasks';
 import './renderers/Drawer';
 import './renderers/Wrapper';
 import './renderers/IFrame';
+import './renderers/BarCode';
 import './renderers/QRCode';
 import './renderers/Icon';
 import './renderers/Carousel';

src/renderers/BarCode.tsx

@@ -0,0 +1,58 @@
+/**
+ * @file 用来条形码
+ */
+import React, {Suspense} from 'react';
+import {Renderer, RendererProps} from '../factory';
+import {BaseSchema} from '../Schema';
+import {getPropValue} from '../utils/helper';
+const BarCode = React.lazy(() => import('../components/BarCode'));
+
+/**
+ * BarCode 显示渲染器，格式说明。
+ * 文档：https://baidu.gitee.io/amis/docs/components/barcode
+ */
+export interface BarCodeSchema extends BaseSchema {
+  /**
+   *  指定为颜色显示控件
+   */
+  type: 'barcode';
+
+  /**
+   * 宽度
+   */
+  width?: number;
+
+  /**
+   * 高度
+   */
+  height?: number;
+
+  /**
+   * 显示配置
+   */
+  options: object;
+}
+
+export interface BarCodeProps
+  extends RendererProps,
+    Omit<BarCodeSchema, 'type' | 'className'> {}
+
+export class BarCodeField extends React.Component<BarCodeProps, object> {
+  render() {
+    const {className, width, height, classnames: cx, options} = this.props;
+    const value = getPropValue(this.props);
+
+    return (
+      <Suspense fallback={<div>...</div>}>
+        <div className={cx('BarCode', className)}>
+          <BarCode value={value} options={options}></BarCode>
+        </div>
+      </Suspense>
+    );
+  }
+}
+
+@Renderer({
+  type: 'barcode'
+})
+export class BarCodeFieldRenderer extends BarCodeField {}