From e78b307348b0b84d9f4c17a29120022b19009c39 Mon Sep 17 00:00:00 2001 From: ZhangJunjie Date: Thu, 19 Mar 2020 16:37:20 +0800 Subject: [PATCH 01/20] =?UTF-8?q?feat:=E6=B0=B4=E5=8D=B0=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E5=BC=80=E5=8F=91=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/index.js | 1 + components/watermark/index.js | 21 +++ components/watermark/watermark.js | 187 +++++++++++++++++++++++++++ docs/demo/watermark/section-base.jsx | 26 ++++ docs/zh-CN/components/watermark.mdx | 44 +++++++ site/locales/zh-CN.js | 3 +- site/pages/components/index.js | 3 +- 7 files changed, 283 insertions(+), 2 deletions(-) create mode 100644 components/watermark/index.js create mode 100644 components/watermark/watermark.js create mode 100755 docs/demo/watermark/section-base.jsx create mode 100755 docs/zh-CN/components/watermark.mdx diff --git a/components/index.js b/components/index.js index a34e1aa17..c870cc54e 100755 --- a/components/index.js +++ b/components/index.js @@ -44,4 +44,5 @@ export { default as Message } from './message' export { default as Tag } from './tag' export { default as Breadcrumb } from './breadcrumb' export { default as Carousel } from './carousel' +export { default as Watermark } from './watermark' export { ThemeContext, LocaleContext } from './context' diff --git a/components/watermark/index.js b/components/watermark/index.js new file mode 100644 index 000000000..c4014d0a8 --- /dev/null +++ b/components/watermark/index.js @@ -0,0 +1,21 @@ +import React from 'react' +import Watermark from './watermark' +class WatermarkComponent extends React.Component { + constructor (props) { + super(props) + this.rootRef = React.createRef() + } + componentDidMount () { + Watermark(this.rootRef) + } + render () { + return ( +
+ {this.props.children} +
+ ) + } +} + +export default WatermarkComponent +export {Watermark} diff --git a/components/watermark/watermark.js b/components/watermark/watermark.js new file mode 100644 index 000000000..d463c87c5 --- /dev/null +++ b/components/watermark/watermark.js @@ -0,0 +1,187 @@ +const defaultOptions = { + id: null, + width: 240, + height: 240, + textAlign: 'left', + font: '14px microsoft yahei', + fillStyle: 'rgba(128, 128, 128, 0.2)', + contents: '请勿外传', + rotate: '0', + zIndex: 1000, + logo: null, + grayLogo: true, // 是否对图标进行灰度处理 + isAutoWrap: true, // 文字是否自动换行 + textOverflowEffect: 'zoom' // 当isAutoWrap 为 false 时，文本长度超出画布长度时的处理方式： zoom - 缩小文字 cut - 截断文字 +} +const parseTextData = (ctx, texts, width, isWrap) => { + let contents = [] + let lines = [] + if (texts instanceof Array) { + contents = texts + } else if (typeof texts === 'string') { + contents.push(texts) + } else { + console.warn('Only support String Or Array') + } + if (isWrap) { + contents.forEach((text) => { + let curLine = '' + for (let char of text) { + let nextLine = curLine + char + if (char === '\n' || ctx.measureText(nextLine).width > width) { + lines.push(curLine) + curLine = char === '\n' ? '' : char + } else { + curLine = nextLine + } + } + lines.push(curLine) + }) + return lines + } else { + return contents + } +} +const drawText = (ctx, options) => { + let { + width, + textOverflowEffect, + contents: text, + isAutoWrap, + logo + } = options + let oldBaseLine = ctx.textBaseline + let x = 24 + let y = 0 + ctx.textBaseline = 'hanging' + /** + * LOGO 固定宽高： 32 * 32 + * 内容区域为 画布宽度 - 48 （预留左右各24的 padding） + * 如含 LOGO ，文字的起始 X 坐标为： 24(padding-left) + 32(logo size) + 4(logo 与 text 间距) + */ + let lineHeight = parseInt(ctx.font) // ctx.font必须以'XXpx'开头 + width -= (48 + 32) + const lines = parseTextData(ctx, text, width, isAutoWrap) + if (logo) { + x += 32 + } + // 计算 Y 的起始位置 + let lineY = y + (ctx.canvas.height) / 2 - (lineHeight * lines.length) / 2 + const initLineY = lineY + for (let line of lines) { + let lineX + if (ctx.textAlign === 'center') { + lineX = x + width / 2 + 4 + } else if (ctx.textAlign === 'right') { + lineX = x + width + 4 + } else { + lineX = x + 4 + } + if (textOverflowEffect === 'zoom') { + ctx.fillText(line, lineX, lineY, width) + } else { + ctx.fillText(line, lineX, lineY) + } + lineY += lineHeight + } + ctx.textBaseline = oldBaseLine + return initLineY - lineHeight / 2 +} +const drawLogo = (ctx, logo, cb) => { + const img = new window.Image() + img.src = logo + img.onload = () => { + ctx.globalAlpha = 0.2 + ctx.drawImage(img, 24, ctx.canvas.height / 2 - 16, 32, 32) + cb() + } +} + +const toImage = (canvas, key, container, options) => { + var base64Url = canvas.toDataURL() + const __wm = document.querySelector(`.${key}`) + const watermarkDiv = __wm || document.createElement('div') + const styleStr = ` + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + z-index:${options.zIndex}; + pointer-events:none; + background-repeat:repeat; + visibility:visible !important; + display: block !important; + opacity: 1 !important; + background-image:url('${base64Url}'); + ${options.grayLogo ? '-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none;' : ''} + ` + watermarkDiv.setAttribute('style', styleStr) + if (window.getComputedStyle(container).getPropertyValue('position') === 'static') { + container.style.position = 'relative' + } + watermarkDiv.classList.add(key) + console.log(watermarkDiv) + container.insertBefore(watermarkDiv, container.firstChild) + const MutationObserver = window.MutationObserver || window.WebKitMutationObserver + if (MutationObserver) { + let mo = new MutationObserver(function () { + console.log(11) + const __wm = document.querySelector(`.${key}`) + const cs = __wm ? window.getComputedStyle(__wm) : {} + if ((__wm && (__wm.getAttribute('style') !== styleStr || cs.visibility === 'hidden' || cs.display === 'none' || cs.opacity === 0)) || !__wm) { + mo.disconnect() + mo = null + WaterMarker(container, JSON.parse(JSON.stringify(options))) + } + }) + mo.observe(container, { + attributes: true, + subtree: true, + childList: true + }) + } +} +const WaterMarker = (container, args) => { + const _container = container || document.body + const options = Object.assign({}, defaultOptions, args) + const { + id, + width, + height, + textAlign, + textBaseline, + font, + fillStyle, + logo, + rotate + } = options + let key = '__wm' + if (id && id.trim().length > 0 && !document.querySelector(id + '__wm')) { + key = id + '__wm' + } + const canvas = document.createElement('canvas') + canvas.setAttribute('width', width + 'px') + canvas.setAttribute('height', height + 'px') + var ctx = canvas.getContext('2d') + // ctx.scale(dpr, dpr) + + ctx.textAlign = textAlign + ctx.textBaseline = textBaseline + ctx.font = font + ctx.fillStyle = fillStyle + ctx.translate(width / 2, height / 2) + ctx.rotate(Math.PI / 180 * rotate) + ctx.translate(-width / 2, -height / 2) + + drawText(ctx, options) + if (logo) { + drawLogo(ctx, logo, () => { + toImage(canvas, key, _container, options) + }) + } else { + toImage(canvas, key, _container, options) + } +} + +export default WaterMarker diff --git a/docs/demo/watermark/section-base.jsx b/docs/demo/watermark/section-base.jsx new file mode 100755 index 000000000..bbff7dbe1 --- /dev/null +++ b/docs/demo/watermark/section-base.jsx @@ -0,0 +1,26 @@ +import React from 'react' +import DocViewer from '../../../libs/doc-viewer' +import Watermark from '../../../components/watermark' +import logo from '../../../site/static/img/logo.png' +const prefix = 'watermark-base' +const desc = '' +const code = `import React from 'react' +import Alert from '@hi-ui/hiui/es/alert'\n +class Demo extends React.Component { + constructor(props) { + super(props) + this.boxRef1 = React.createRef() + this.boxRef2 = React.createRef() + } + componentDidMount() { + Watermark(this.boxRef1.current, {id: 'first', logo: logo, rotate: -30, contents: ['HIUI', '做中台，就用 HIUI']}) + } + render () { + return ( +
+ ) + } +}` + +const DemoBase = () => +export default DemoBase diff --git a/docs/zh-CN/components/watermark.mdx b/docs/zh-CN/components/watermark.mdx new file mode 100755 index 000000000..46aa9011b --- /dev/null +++ b/docs/zh-CN/components/watermark.mdx @@ -0,0 +1,44 @@ +# 水印工具 + +用于向元素添加水印 + +## 何时使用 + +页面内容涉及到保密或其它情况时 + +## 基础用法 + +import DemoBase from '../../demo/watermark/section-base.jsx' + + + +## 不可关闭 + +import DemoCloseable from '../../demo/alert/section-closeable.jsx' + + + +## 带内容 + +import DemoTitle from '../../demo/alert/section-title.jsx' + + + +## 倒计时自动关闭 + +设置 `duration` 来指定自动关闭时间。 + +import DemoAutoClose from '../../demo/alert/section-autoClose.jsx' + + + +## Props + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| --------- | ------------------------ | ----------------------- | ------------------------------------------- | ------ | +| type | 警告框类型 | string | 'info' \| 'success' \| 'error' \| 'warning' | 'info' | +| title | 警告框标题 | string | - | - | +| content | 警告框内容 | string | - | - | +| closeable | 是否可关闭 | boolean | true \| false | false | +| onClose | 关闭事件触发时的回调 | (e: MouseEvent) => void | - | - | +| duration | 自动关闭时间，单位为毫秒 | number \| null | - | null | diff --git a/site/locales/zh-CN.js b/site/locales/zh-CN.js index 93aa5eb95..256d8affc 100755 --- a/site/locales/zh-CN.js +++ b/site/locales/zh-CN.js @@ -52,7 +52,8 @@ module.exports = { switch: 'Switch 开关', rate: 'Rate 评分', breadcrumb: 'Breadcrumb 面包屑', - carousel: 'Carousel 走马灯' + carousel: 'Carousel 走马灯', + watermark: '水印' }, designs: { summarize: '概述', diff --git a/site/pages/components/index.js b/site/pages/components/index.js index cbcaf03a3..be5179768 100755 --- a/site/pages/components/index.js +++ b/site/pages/components/index.js @@ -18,7 +18,8 @@ export default { grid: components['grid'], typography: components['typography'], button: components['button'], - icon: components['icon'] + icon: components['icon'], + watermark: components['watermark'] }, 'group-navgation': { dropdown: components['dropdown'], From f3a4d2dffd5312643f1726a464543361145959d4 Mon Sep 17 00:00:00 2001 From: wugaoliang Date: Thu, 19 Mar 2020 21:41:03 +0800 Subject: [PATCH 02/20] feat: watermark --- components/watermark/index.js | 8 ++++++-- docs/demo/watermark/section-base.jsx | 17 +++++++++++------ docs/zh-CN/components/watermark.mdx | 19 ------------------- 3 files changed, 17 insertions(+), 27 deletions(-) diff --git a/components/watermark/index.js b/components/watermark/index.js index c4014d0a8..a1a624b06 100644 --- a/components/watermark/index.js +++ b/components/watermark/index.js @@ -3,10 +3,14 @@ import Watermark from './watermark' class WatermarkComponent extends React.Component { constructor (props) { super(props) + console.log('props', props) this.rootRef = React.createRef() } componentDidMount () { - Watermark(this.rootRef) + const { contents, rotate, logo } = this.props + const options = {contents, rotate, logo} + const container = this.rootRef.current + Watermark(container, options) } render () { return ( @@ -18,4 +22,4 @@ class WatermarkComponent extends React.Component { } export default WatermarkComponent -export {Watermark} +// export {Watermark} diff --git a/docs/demo/watermark/section-base.jsx b/docs/demo/watermark/section-base.jsx index bbff7dbe1..ac4d80b17 100755 --- a/docs/demo/watermark/section-base.jsx +++ b/docs/demo/watermark/section-base.jsx @@ -1,26 +1,31 @@ import React from 'react' import DocViewer from '../../../libs/doc-viewer' -import Watermark from '../../../components/watermark' +import WatermarkComponent from '../../../components/watermark' import logo from '../../../site/static/img/logo.png' const prefix = 'watermark-base' const desc = '' const code = `import React from 'react' -import Alert from '@hi-ui/hiui/es/alert'\n +import WatermarkComponent from '@hi-ui/hiui/es/WatermarkComponent'\n class Demo extends React.Component { constructor(props) { super(props) this.boxRef1 = React.createRef() - this.boxRef2 = React.createRef() + this.options = {logo: logo, rotate: -30, contents: ['HIUI', '做中台，就用 HIUI']} + } componentDidMount() { - Watermark(this.boxRef1.current, {id: 'first', logo: logo, rotate: -30, contents: ['HIUI', '做中台，就用 HIUI']}) + // Watermark(this.boxRef1.current, {id: 'first', logo: logo, rotate: -30, contents: ['HIUI', '做中台，就用 HIUI']}) } render () { return ( -
+ +
+ ) } }` -const DemoBase = () => +const DemoBase = () => export default DemoBase diff --git a/docs/zh-CN/components/watermark.mdx b/docs/zh-CN/components/watermark.mdx index 46aa9011b..0fda9338a 100755 --- a/docs/zh-CN/components/watermark.mdx +++ b/docs/zh-CN/components/watermark.mdx @@ -12,25 +12,6 @@ import DemoBase from '../../demo/watermark/section-base.jsx' -## 不可关闭 - -import DemoCloseable from '../../demo/alert/section-closeable.jsx' - - - -## 带内容 - -import DemoTitle from '../../demo/alert/section-title.jsx' - - - -## 倒计时自动关闭 - -设置 `duration` 来指定自动关闭时间。 - -import DemoAutoClose from '../../demo/alert/section-autoClose.jsx' - - ## Props From 9e7af441931d97cd5f6b25bbc4f4abaf65ba432c Mon Sep 17 00:00:00 2001 From: Wugaoliang Date: Fri, 20 Mar 2020 10:39:22 +0800 Subject: [PATCH 03/20] feat: watermakk --- components/select/Select.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/select/Select.js b/components/select/Select.js index a9fc0f0d4..2bcd21d01 100644 --- a/components/select/Select.js +++ b/components/select/Select.js @@ -361,6 +361,7 @@ class Select extends Component { jsonpCallback = 'callback', ...options } = _dataSource + keyword = !keyword && this.autoloadFlag && autoload ? _dataSource.keyword From b64aa79f82b330de91a7796719e2066bc83ab9b0 Mon Sep 17 00:00:00 2001 From: Wugaoliang Date: Fri, 20 Mar 2020 11:52:40 +0800 Subject: [PATCH 04/20] feat: watermark --- components/select/Select.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/select/Select.js b/components/select/Select.js index 2bcd21d01..35f3bb6dd 100644 --- a/components/select/Select.js +++ b/components/select/Select.js @@ -373,7 +373,6 @@ class Select extends Component { if (!_.isEmpty(queryParams)) { url = url.includes('?') ? `${url}&${queryParams}` : `${url}?${queryParams}` } - if (type.toUpperCase() === 'POST') { options.body = JSON.stringify(data) } From 2c70b0f147a52226042ad5b85eee95099a79601c Mon Sep 17 00:00:00 2001 From: Wugaoliang Date: Fri, 20 Mar 2020 19:17:37 +0800 Subject: [PATCH 05/20] feat: watermark --- components/table/Header.js | 2 +- components/table/TableContent.js | 2 +- components/table/index.js | 6 +++++- components/watermark/index.js | 8 +++++--- components/watermark/watermark.js | 6 ++++-- 5 files changed, 16 insertions(+), 8 deletions(-) diff --git a/components/table/Header.js b/components/table/Header.js index b3e45b204..dd8fa6fd4 100644 --- a/components/table/Header.js +++ b/components/table/Header.js @@ -118,7 +118,7 @@ export default class Header extends Component { } return ( - + {nodes} ) diff --git a/components/table/TableContent.js b/components/table/TableContent.js index 48b3e9498..9d893e569 100644 --- a/components/table/TableContent.js +++ b/components/table/TableContent.js @@ -34,7 +34,7 @@ export default class TableContent extends Component { })} {head - ?
: null + ?
: null } {body ? : null diff --git a/components/table/index.js b/components/table/index.js index 0e93d0457..7eda6d63f 100644 --- a/components/table/index.js +++ b/components/table/index.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import WatermarkComponent from '../watermark' import ClickOutside from './ClickOuterside' import TableContent from './TableContent' import prifix from './prefix' @@ -478,11 +479,14 @@ class Table extends Component { } } let serverPaginationConfig = serverPagination + const options = {rotate: -30, contents: ['HIUI', '做中台，就用 HIUI']} return (
{header &&
{header()}
}
-
{content}
+ +
{content}
+ { name &&
{ diff --git a/components/watermark/index.js b/components/watermark/index.js index a1a624b06..36b169b48 100644 --- a/components/watermark/index.js +++ b/components/watermark/index.js @@ -7,14 +7,16 @@ class WatermarkComponent extends React.Component { this.rootRef = React.createRef() } componentDidMount () { + const options2 = {logo: '', rotate: -30, contents: ['HIUI', '做中台，就用 HIUI']} const { contents, rotate, logo } = this.props const options = {contents, rotate, logo} const container = this.rootRef.current - Watermark(container, options) + console.log('options', options, '+++++++++++') + Watermark(container, options2) } render () { return ( -
+
{this.props.children}
) @@ -22,4 +24,4 @@ class WatermarkComponent extends React.Component { } export default WatermarkComponent -// export {Watermark} +export {Watermark} diff --git a/components/watermark/watermark.js b/components/watermark/watermark.js index d463c87c5..307cc4045 100644 --- a/components/watermark/watermark.js +++ b/components/watermark/watermark.js @@ -1,7 +1,7 @@ const defaultOptions = { id: null, width: 240, - height: 240, + height: 20, textAlign: 'left', font: '14px microsoft yahei', fillStyle: 'rgba(128, 128, 128, 0.2)', @@ -99,11 +99,12 @@ const drawLogo = (ctx, logo, cb) => { const toImage = (canvas, key, container, options) => { var base64Url = canvas.toDataURL() + const _top = 0 const __wm = document.querySelector(`.${key}`) const watermarkDiv = __wm || document.createElement('div') const styleStr = ` position:absolute; - top:0; + top:${_top}; left:0; width:100%; height:100%; @@ -143,6 +144,7 @@ const toImage = (canvas, key, container, options) => { } } const WaterMarker = (container, args) => { + console.log('container', container) const _container = container || document.body const options = Object.assign({}, defaultOptions, args) const { From 337ae8a647579b3a49de46f3257d2bc9b4beaac3 Mon Sep 17 00:00:00 2001 From: wugaoliang Date: Sat, 21 Mar 2020 13:08:31 +0800 Subject: [PATCH 06/20] feat: watermark-table --- components/table/Header.js | 2 +- components/table/TableContent.js | 2 +- components/table/index.js | 31 +++++++++++--- components/table/tool.js | 11 ++++- components/watermark/index.js | 32 +++++++++++---- components/watermark/watermark.js | 10 ++--- docs/demo/table/section-waterMark.jsx | 59 +++++++++++++++++++++++++++ docs/zh-CN/components/table.mdx | 7 ++++ docs/zh-CN/components/watermark.mdx | 20 +++++---- 9 files changed, 143 insertions(+), 31 deletions(-) create mode 100644 docs/demo/table/section-waterMark.jsx diff --git a/components/table/Header.js b/components/table/Header.js index dd8fa6fd4..b3e45b204 100644 --- a/components/table/Header.js +++ b/components/table/Header.js @@ -118,7 +118,7 @@ export default class Header extends Component { } return ( - + {nodes} ) diff --git a/components/table/TableContent.js b/components/table/TableContent.js index 9d893e569..48b3e9498 100644 --- a/components/table/TableContent.js +++ b/components/table/TableContent.js @@ -34,7 +34,7 @@ export default class TableContent extends Component { })} {head - ?
: null + ?
: null } {body ? : null diff --git a/components/table/index.js b/components/table/index.js index 7eda6d63f..8c199c2b0 100644 --- a/components/table/index.js +++ b/components/table/index.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import WatermarkComponent from '../watermark' +import {Watermark} from '../watermark' import ClickOutside from './ClickOuterside' import TableContent from './TableContent' import prifix from './prefix' @@ -12,7 +12,7 @@ import loading from '../loading' import '../pagination/style' import '../icon/style' import Provider from '../context' -import {setKey, scrollTop, getStyle, getPosition, offset} from './tool' +import {setKey, scrollTop, getStyle, getPosition, offset, randomString} from './tool' import request from 'axios' import qs from 'qs' @@ -65,7 +65,10 @@ class Table extends Component { this.fixRight = React.createRef() this.fixRight = React.createRef() this.setting = React.createRef() + this.contentRef = React.createRef() this.state = { + theadHeight: 52, + tableContentId: 'hi-table' + randomString(4), dataSource: data, highlightCols: [], highlightRows: [], @@ -479,14 +482,11 @@ class Table extends Component { } } let serverPaginationConfig = serverPagination - const options = {rotate: -30, contents: ['HIUI', '做中台，就用 HIUI']} return (
{header &&
{header()}
}
- -
{content}
- +
{content}
{ name &&
{ @@ -900,6 +900,7 @@ class Table extends Component { componentDidMount () { let {fixTop, scroll, name, origin} = this.props let dom = this.dom.current + if (fixTop) { // 吸顶逻辑 document.addEventListener('scroll', () => { @@ -940,6 +941,24 @@ class Table extends Component { } }, this.fetch) } + this.setState({ + theadHeight: dom.querySelector('.hi-table-thead').offsetHeight, + tbodyHeight: dom.offsetHeight + }, () => { + if (this.props.addWaterMark) { + const {theadHeight, tbodyHeight} = this.state + const options = { + id: this.state.tableContentId, + rotate: -30, + contents: ['HIUI', '做中台，就用 HIUI'], + _top: theadHeight, + _height: tbodyHeight - theadHeight, + ...this.props.WaterMarkOptions + } + const container = this.contentRef.current + Watermark(container, options) + } + }) }, 0) } diff --git a/components/table/tool.js b/components/table/tool.js index 70cfb69dd..b347ec5df 100644 --- a/components/table/tool.js +++ b/components/table/tool.js @@ -6,7 +6,16 @@ export function insertAfter (newElement, targetElement) { parent.insertBefore(newElement, targetElement.nextSibling) } } - +export function randomString (len) { + const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' + const maxPos = $chars.length + let pwd = '' + len = len || 32 + for (let i = 0; i < len; i++) { + pwd += $chars.charAt(Math.floor(Math.random() * maxPos)) + } + return pwd +} export function setKey (data, name) { name = name || 'id' return data.map(item => { diff --git a/components/watermark/index.js b/components/watermark/index.js index 36b169b48..eb990bff4 100644 --- a/components/watermark/index.js +++ b/components/watermark/index.js @@ -1,27 +1,41 @@ import React from 'react' import Watermark from './watermark' +function randomString (len) { + const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' + const maxPos = $chars.length + let pwd = '' + len = len || 32 + for (let i = 0; i < len; i++) { + pwd += $chars.charAt(Math.floor(Math.random() * maxPos)) + } + return pwd +} class WatermarkComponent extends React.Component { constructor (props) { super(props) - console.log('props', props) + this.rootRef = React.createRef() } componentDidMount () { - const options2 = {logo: '', rotate: -30, contents: ['HIUI', '做中台，就用 HIUI']} - const { contents, rotate, logo } = this.props - const options = {contents, rotate, logo} + // 生成随机ID;如果不传入ID的话; const container = this.rootRef.current - console.log('options', options, '+++++++++++') - Watermark(container, options2) + const {props} = this + const options = { + id: props.id || 'hi-' + randomString(4), + contents: this.props.contents || ['HIUI', '做中台，就用 HIUI'], + rotate: props.rorate || -30, + logo: props.logo, + ...props + } + Watermark(container, options) } render () { return ( -
+
{this.props.children}
) } } - export default WatermarkComponent -export {Watermark} +export { Watermark } diff --git a/components/watermark/watermark.js b/components/watermark/watermark.js index 307cc4045..626aaa629 100644 --- a/components/watermark/watermark.js +++ b/components/watermark/watermark.js @@ -1,7 +1,7 @@ const defaultOptions = { id: null, width: 240, - height: 20, + height: 240, textAlign: 'left', font: '14px microsoft yahei', fillStyle: 'rgba(128, 128, 128, 0.2)', @@ -99,7 +99,8 @@ const drawLogo = (ctx, logo, cb) => { const toImage = (canvas, key, container, options) => { var base64Url = canvas.toDataURL() - const _top = 0 + const _top = (options._top || 0) + 'px' + const _height = options._height ? options._height + 'px' : '100%' const __wm = document.querySelector(`.${key}`) const watermarkDiv = __wm || document.createElement('div') const styleStr = ` @@ -107,7 +108,7 @@ const toImage = (canvas, key, container, options) => { top:${_top}; left:0; width:100%; - height:100%; + height:${_height}; z-index:${options.zIndex}; pointer-events:none; background-repeat:repeat; @@ -122,12 +123,10 @@ const toImage = (canvas, key, container, options) => { container.style.position = 'relative' } watermarkDiv.classList.add(key) - console.log(watermarkDiv) container.insertBefore(watermarkDiv, container.firstChild) const MutationObserver = window.MutationObserver || window.WebKitMutationObserver if (MutationObserver) { let mo = new MutationObserver(function () { - console.log(11) const __wm = document.querySelector(`.${key}`) const cs = __wm ? window.getComputedStyle(__wm) : {} if ((__wm && (__wm.getAttribute('style') !== styleStr || cs.visibility === 'hidden' || cs.display === 'none' || cs.opacity === 0)) || !__wm) { @@ -144,7 +143,6 @@ const toImage = (canvas, key, container, options) => { } } const WaterMarker = (container, args) => { - console.log('container', container) const _container = container || document.body const options = Object.assign({}, defaultOptions, args) const { diff --git a/docs/demo/table/section-waterMark.jsx b/docs/demo/table/section-waterMark.jsx new file mode 100644 index 000000000..7d0e8fde3 --- /dev/null +++ b/docs/demo/table/section-waterMark.jsx @@ -0,0 +1,59 @@ +import React from 'react' +import DocViewer from '../../../libs/doc-viewer' +import Table from '../../../components/table' +const prefix = 'table-waterMark' +const desc = '基础：展示二维数据' +const code = `import React from 'react' +import Table from '@hi-ui/hiui/es/table'\n +class Demo extends React.Component { + constructor(props){ + super(props) + + this.columns = [ + + { title: 'Column 1', dataIndex: 'name', key: '1'}, + { title: 'Column 1', dataIndex: 'age', key: '2'}, + { title: 'Column 1', dataIndex: 'address', key: '3'}, + { + title: ()=>
自定义标题
, + dataIndex: 'address', key: '4', + width: '500px', + render(text,record,index){ + return ( +
+ {text} --- {index} --- 自定义渲染 +
+ ) + }}, + { + title: 'Action', + key: 'operation', + width: 100, + render: () => action, + }, + ] + + this.data = [] + for (let i = 0; i < 10; i++) { + this.data.push({ + // key: i, + name: \`Don Diablo \${i}\`, + age: \`\${i}\${i}\`, + address: \`EDC Las Vegas no. \${i}\`, + }); + } + } + render() { + return + } +}` + +const DemoBase = () => ( + +) +export default DemoBase diff --git a/docs/zh-CN/components/table.mdx b/docs/zh-CN/components/table.mdx index a6b2b1c00..64462af21 100755 --- a/docs/zh-CN/components/table.mdx +++ b/docs/zh-CN/components/table.mdx @@ -133,6 +133,12 @@ import DemoAdvance from '../../demo/table/section-advance.jsx' +## 添加水印 + +import DemoWaterMark from '../../demo/table/section-waterMark.jsx' + + + ## Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | @@ -140,6 +146,7 @@ import DemoAdvance from '../../demo/table/section-advance.jsx' | size | 表格尺寸 | string | 'small' \| 'large' \| 'default' | 'default' | | bordered | 是否显示边框 | boolean | true \| false | false | | striped | 斑马纹 | boolean | true \| false | false | +| addWaterMaker | 添加水印,属性设置参考水印组件 | boolean | true \| false | false | | columns | 表格数据列对应信息 | ColumnItem[] | - | - | | data | 表格数据 | object[] | - | - | | emptyText | 数据为空时展示的文案 | string | - | 'No Data' | diff --git a/docs/zh-CN/components/watermark.mdx b/docs/zh-CN/components/watermark.mdx index 0fda9338a..74d3fac1a 100755 --- a/docs/zh-CN/components/watermark.mdx +++ b/docs/zh-CN/components/watermark.mdx @@ -12,14 +12,20 @@ import DemoBase from '../../demo/watermark/section-base.jsx' - ## Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------- | ------------------------ | ----------------------- | ------------------------------------------- | ------ | -| type | 警告框类型 | string | 'info' \| 'success' \| 'error' \| 'warning' | 'info' | -| title | 警告框标题 | string | - | - | -| content | 警告框内容 | string | - | - | -| closeable | 是否可关闭 | boolean | true \| false | false | -| onClose | 关闭事件触发时的回调 | (e: MouseEvent) => void | - | - | -| duration | 自动关闭时间，单位为毫秒 | number \| null | - | null | +| id | 元素ID,不传入默认随机生成 | string | - | - | +| width | 水印宽度 | number | - | 240 | +| height | 水印宽度 | number | - | 240 | +| textAlign | 文字对齐方式 | string | - | 'left' | +| font | 文字样式设置 | string | - | '14px microsoft yahei' | +| fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 | string | - | 'rgba(128, 128, 128, 0.2)' | +| contents | 水印文案 | string \| Array[string] | - | 请勿外传| +| rotate | 旋转角度 | number | -180 ~ +180 | 0 | +| zIndex | 层级 | number | - | 1000 | +| logo | 图片 | imgSrc | - | - | +| grayLogo | 是否对图标进行灰度处理 | boolean |true \| false | true | +| isAutoWrap | 文字是否自动换行 | boolean |true \| false | true | +| textOverflowEffect | 文字是否自动缩放 | string |zoom \| cut | zoom | From 8d3d3e8f6ecbfc7299f23e1958211d7aa3c81e7e Mon Sep 17 00:00:00 2001 From: wugaoliang Date: Sun, 22 Mar 2020 07:54:23 +0800 Subject: [PATCH 07/20] feat: watermark --- components/watermark/index.js | 43 ++++++++++++++++---- docs/demo/watermark/section-base.jsx | 17 ++++---- docs/demo/watermark/section-watermark-js.jsx | 36 ++++++++++++++++ docs/zh-CN/components/watermark.mdx | 10 ++++- 4 files changed, 90 insertions(+), 16 deletions(-) create mode 100755 docs/demo/watermark/section-watermark-js.jsx diff --git a/components/watermark/index.js b/components/watermark/index.js index eb990bff4..ba13e76ea 100644 --- a/components/watermark/index.js +++ b/components/watermark/index.js @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import Watermark from './watermark' function randomString (len) { const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' @@ -17,15 +18,11 @@ class WatermarkComponent extends React.Component { this.rootRef = React.createRef() } componentDidMount () { - // 生成随机ID;如果不传入ID的话; const container = this.rootRef.current - const {props} = this + const { props } = this const options = { - id: props.id || 'hi-' + randomString(4), - contents: this.props.contents || ['HIUI', '做中台，就用 HIUI'], - rotate: props.rorate || -30, - logo: props.logo, - ...props + ...props, + id: props.id || 'hi-' + randomString(4) } Watermark(container, options) } @@ -37,5 +34,37 @@ class WatermarkComponent extends React.Component { ) } } + +WatermarkComponent.propTypes = { + id: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, + textAlign: PropTypes.string, + font: PropTypes.string, + fillStyle: PropTypes.string, + contents: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), + rotate: PropTypes.number, + zIndex: PropTypes.number, + logo: PropTypes.string, + grayLogo: PropTypes.bool, + isAutoWrap: PropTypes.bool, + textOverflowEffect: PropTypes.oneOfType(['zoom', 'cut']) +} + +WatermarkComponent.defaultProps = { + id: null, + width: 240, + height: 240, + textAlign: 'left', + font: '14px microsoft yahei', + fillStyle: 'rgba(128, 128, 128, 0.2)', + contents: '请勿外传', + rotate: '0', + zIndex: 1000, + logo: null, + grayLogo: true, + isAutoWrap: true, + textOverflowEffect: 'zoom' +} export default WatermarkComponent export { Watermark } diff --git a/docs/demo/watermark/section-base.jsx b/docs/demo/watermark/section-base.jsx index ac4d80b17..f6f802d79 100755 --- a/docs/demo/watermark/section-base.jsx +++ b/docs/demo/watermark/section-base.jsx @@ -9,23 +9,26 @@ import WatermarkComponent from '@hi-ui/hiui/es/WatermarkComponent'\n class Demo extends React.Component { constructor(props) { super(props) - this.boxRef1 = React.createRef() this.options = {logo: logo, rotate: -30, contents: ['HIUI', '做中台，就用 HIUI']} - - } - componentDidMount() { - // Watermark(this.boxRef1.current, {id: 'first', logo: logo, rotate: -30, contents: ['HIUI', '做中台，就用 HIUI']}) } render () { return ( -
+
) } }` -const DemoBase = () => +const DemoBase = () => ( + ) export default DemoBase diff --git a/docs/demo/watermark/section-watermark-js.jsx b/docs/demo/watermark/section-watermark-js.jsx new file mode 100755 index 000000000..8ebb5898c --- /dev/null +++ b/docs/demo/watermark/section-watermark-js.jsx @@ -0,0 +1,36 @@ +import React from 'react' +import DocViewer from '../../../libs/doc-viewer' +import { Watermark } from '../../../components/watermark' +import logo from '../../../site/static/img/logo.png' +const prefix = 'watermark-js' +const desc = '' +const code = `import React from 'react' +import {watermark} from '@hi-ui/hiui/es/WatermarkComponent'\n +class Demo extends React.Component { + constructor(props) { + super(props) + this.boxRef = React.createRef() + this.options = {logo: logo, rotate: -30, contents: ['HIUI', '做中台，就用 HIUI']} + } + componentDidMount() { + Watermark(this.boxRef.current, this.options) + } + render () { + return ( +
+ ) + } +}` + +const DemoBase = () => ( + +) +export default DemoBase diff --git a/docs/zh-CN/components/watermark.mdx b/docs/zh-CN/components/watermark.mdx index 74d3fac1a..3638a7f94 100755 --- a/docs/zh-CN/components/watermark.mdx +++ b/docs/zh-CN/components/watermark.mdx @@ -12,6 +12,12 @@ import DemoBase from '../../demo/watermark/section-base.jsx' +## 工具类使用 + +import WatermarkJS from '../../demo/watermark/section-watermark-js.jsx' + + + ## Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | @@ -23,9 +29,9 @@ import DemoBase from '../../demo/watermark/section-base.jsx' | font | 文字样式设置 | string | - | '14px microsoft yahei' | | fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 | string | - | 'rgba(128, 128, 128, 0.2)' | | contents | 水印文案 | string \| Array[string] | - | 请勿外传| -| rotate | 旋转角度 | number | -180 ~ +180 | 0 | +| rotate | 旋转角度 | number | - | 0 | | zIndex | 层级 | number | - | 1000 | -| logo | 图片 | imgSrc | - | - | +| logo | 图片类的资源地址 | string | - | - | | grayLogo | 是否对图标进行灰度处理 | boolean |true \| false | true | | isAutoWrap | 文字是否自动换行 | boolean |true \| false | true | | textOverflowEffect | 文字是否自动缩放 | string |zoom \| cut | zoom | From 878ce4c1ae928cbd33cef229066655081ac00957 Mon Sep 17 00:00:00 2001 From: Wugaoliang Date: Mon, 23 Mar 2020 10:53:55 +0800 Subject: [PATCH 08/20] feat: watermark --- components/table/index.js | 9 ++++----- components/watermark/index.js | 16 +--------------- components/watermark/watermark.js | 16 +++++++++++++--- docs/demo/table/section-waterMark.jsx | 2 +- docs/zh-CN/components/table.mdx | 2 +- 5 files changed, 20 insertions(+), 25 deletions(-) diff --git a/components/table/index.js b/components/table/index.js index 8c199c2b0..0aafcc690 100644 --- a/components/table/index.js +++ b/components/table/index.js @@ -942,17 +942,16 @@ class Table extends Component { }, this.fetch) } this.setState({ - theadHeight: dom.querySelector('.hi-table-thead').offsetHeight, - tbodyHeight: dom.offsetHeight + theadHeight: dom.querySelector('.hi-table-thead').offsetHeight }, () => { - if (this.props.addWaterMark) { - const {theadHeight, tbodyHeight} = this.state + if (this.props.waterMark) { + const {theadHeight} = this.state const options = { id: this.state.tableContentId, rotate: -30, + // height:20, contents: ['HIUI', '做中台，就用 HIUI'], _top: theadHeight, - _height: tbodyHeight - theadHeight, ...this.props.WaterMarkOptions } const container = this.contentRef.current diff --git a/components/watermark/index.js b/components/watermark/index.js index ba13e76ea..bcd60277d 100644 --- a/components/watermark/index.js +++ b/components/watermark/index.js @@ -1,16 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' import Watermark from './watermark' -function randomString (len) { - const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' - const maxPos = $chars.length - let pwd = '' - len = len || 32 - for (let i = 0; i < len; i++) { - pwd += $chars.charAt(Math.floor(Math.random() * maxPos)) - } - return pwd -} class WatermarkComponent extends React.Component { constructor (props) { super(props) @@ -20,11 +10,7 @@ class WatermarkComponent extends React.Component { componentDidMount () { const container = this.rootRef.current const { props } = this - const options = { - ...props, - id: props.id || 'hi-' + randomString(4) - } - Watermark(container, options) + Watermark(container, props) } render () { return ( diff --git a/components/watermark/watermark.js b/components/watermark/watermark.js index 626aaa629..bc5039252 100644 --- a/components/watermark/watermark.js +++ b/components/watermark/watermark.js @@ -13,6 +13,16 @@ const defaultOptions = { isAutoWrap: true, // 文字是否自动换行 textOverflowEffect: 'zoom' // 当isAutoWrap 为 false 时，文本长度超出画布长度时的处理方式： zoom - 缩小文字 cut - 截断文字 } +const randomString = (len) => { + const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' + const maxPos = $chars.length + let pwd = '' + len = len || 32 + for (let i = 0; i < len; i++) { + pwd += $chars.charAt(Math.floor(Math.random() * maxPos)) + } + return pwd +} const parseTextData = (ctx, texts, width, isWrap) => { let contents = [] let lines = [] @@ -100,15 +110,15 @@ const drawLogo = (ctx, logo, cb) => { const toImage = (canvas, key, container, options) => { var base64Url = canvas.toDataURL() const _top = (options._top || 0) + 'px' - const _height = options._height ? options._height + 'px' : '100%' const __wm = document.querySelector(`.${key}`) const watermarkDiv = __wm || document.createElement('div') const styleStr = ` position:absolute; top:${_top}; left:0; + bottom:0; width:100%; - height:${_height}; + height:100%; z-index:${options.zIndex}; pointer-events:none; background-repeat:repeat; @@ -156,7 +166,7 @@ const WaterMarker = (container, args) => { logo, rotate } = options - let key = '__wm' + let key = 'hi-' + randomString(4) + '__wm' if (id && id.trim().length > 0 && !document.querySelector(id + '__wm')) { key = id + '__wm' } diff --git a/docs/demo/table/section-waterMark.jsx b/docs/demo/table/section-waterMark.jsx index 7d0e8fde3..79c6b6328 100644 --- a/docs/demo/table/section-waterMark.jsx +++ b/docs/demo/table/section-waterMark.jsx @@ -44,7 +44,7 @@ class Demo extends React.Component { } } render() { - return
+ return
} }` diff --git a/docs/zh-CN/components/table.mdx b/docs/zh-CN/components/table.mdx index 64462af21..ae9c0f4c4 100755 --- a/docs/zh-CN/components/table.mdx +++ b/docs/zh-CN/components/table.mdx @@ -146,7 +146,7 @@ import DemoWaterMark from '../../demo/table/section-waterMark.jsx' | size | 表格尺寸 | string | 'small' \| 'large' \| 'default' | 'default' | | bordered | 是否显示边框 | boolean | true \| false | false | | striped | 斑马纹 | boolean | true \| false | false | -| addWaterMaker | 添加水印,属性设置参考水印组件 | boolean | true \| false | false | +| waterMark | 添加水印,属性设置参考水印组件 | boolean | true \| false | false | | columns | 表格数据列对应信息 | ColumnItem[] | - | - | | data | 表格数据 | object[] | - | - | | emptyText | 数据为空时展示的文案 | string | - | 'No Data' | From 538bf57f525054f8c566bfc38eb68ad5b6cbed5c Mon Sep 17 00:00:00 2001 From: Wugaoliang Date: Fri, 27 Mar 2020 14:19:25 +0800 Subject: [PATCH 09/20] feat: watermark --- components/table/index.js | 9 ++--- components/watermark/index.js | 23 +++++------ components/watermark/watermark.js | 42 +++++++++++++------- docs/demo/watermark/section-base.jsx | 4 +- docs/demo/watermark/section-watermark-js.jsx | 8 ++-- docs/zh-CN/components/table.mdx | 3 +- docs/zh-CN/components/watermark.mdx | 16 ++------ 7 files changed, 53 insertions(+), 52 deletions(-) diff --git a/components/table/index.js b/components/table/index.js index 0aafcc690..84a9d014e 100644 --- a/components/table/index.js +++ b/components/table/index.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import {Watermark} from '../watermark' +import Watermark from '../watermark' import ClickOutside from './ClickOuterside' import TableContent from './TableContent' import prifix from './prefix' @@ -948,14 +948,13 @@ class Table extends Component { const {theadHeight} = this.state const options = { id: this.state.tableContentId, - rotate: -30, - // height:20, + rotate: -45, contents: ['HIUI', '做中台，就用 HIUI'], _top: theadHeight, - ...this.props.WaterMarkOptions + ...this.props.waterMarkOptions } const container = this.contentRef.current - Watermark(container, options) + Watermark.generate(container, options) } }) }, 0) diff --git a/components/watermark/index.js b/components/watermark/index.js index bcd60277d..7020eaf65 100644 --- a/components/watermark/index.js +++ b/components/watermark/index.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import Watermark from './watermark' -class WatermarkComponent extends React.Component { +import WaterMarker from './watermark' +class Watermark extends React.Component { constructor (props) { super(props) @@ -10,7 +10,7 @@ class WatermarkComponent extends React.Component { componentDidMount () { const container = this.rootRef.current const { props } = this - Watermark(container, props) + WaterMarker(container, props) } render () { return ( @@ -21,13 +21,13 @@ class WatermarkComponent extends React.Component { } } -WatermarkComponent.propTypes = { +Watermark.propTypes = { id: PropTypes.string, width: PropTypes.number, height: PropTypes.number, textAlign: PropTypes.string, font: PropTypes.string, - fillStyle: PropTypes.string, + color: PropTypes.string, contents: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), rotate: PropTypes.number, zIndex: PropTypes.number, @@ -37,20 +37,19 @@ WatermarkComponent.propTypes = { textOverflowEffect: PropTypes.oneOfType(['zoom', 'cut']) } -WatermarkComponent.defaultProps = { +Watermark.defaultProps = { id: null, - width: 240, - height: 240, + markDensity: 'default', textAlign: 'left', font: '14px microsoft yahei', - fillStyle: 'rgba(128, 128, 128, 0.2)', + color: 'rgba(128, 128, 128, 0.2)', contents: '请勿外传', - rotate: '0', + rotate: '-45', zIndex: 1000, logo: null, grayLogo: true, isAutoWrap: true, textOverflowEffect: 'zoom' } -export default WatermarkComponent -export { Watermark } +Watermark.generate = WaterMarker +export default Watermark diff --git a/components/watermark/watermark.js b/components/watermark/watermark.js index bc5039252..32129eeb7 100644 --- a/components/watermark/watermark.js +++ b/components/watermark/watermark.js @@ -1,16 +1,14 @@ const defaultOptions = { id: null, - width: 240, - height: 240, textAlign: 'left', font: '14px microsoft yahei', - fillStyle: 'rgba(128, 128, 128, 0.2)', + color: 'rgba(128, 128, 128, 0.2)', contents: '请勿外传', - rotate: '0', + rotate: '-45', zIndex: 1000, logo: null, grayLogo: true, // 是否对图标进行灰度处理 - isAutoWrap: true, // 文字是否自动换行 + isAutoWrap: false, // 文字是否自动换行 textOverflowEffect: 'zoom' // 当isAutoWrap 为 false 时，文本长度超出画布长度时的处理方式： zoom - 缩小文字 cut - 截断文字 } const randomString = (len) => { @@ -55,13 +53,15 @@ const parseTextData = (ctx, texts, width, isWrap) => { const drawText = (ctx, options) => { let { width, + _w = width, + height, textOverflowEffect, contents: text, isAutoWrap, logo } = options let oldBaseLine = ctx.textBaseline - let x = 24 + let x = 0 let y = 0 ctx.textBaseline = 'hanging' /** @@ -70,11 +70,12 @@ const drawText = (ctx, options) => { * 如含 LOGO ，文字的起始 X 坐标为： 24(padding-left) + 32(logo size) + 4(logo 与 text 间距) */ let lineHeight = parseInt(ctx.font) // ctx.font必须以'XXpx'开头 - width -= (48 + 32) - const lines = parseTextData(ctx, text, width, isAutoWrap) if (logo) { x += 32 + _w -= 32 } + const lines = parseTextData(ctx, text, width, isAutoWrap) + // 计算 Y 的起始位置 let lineY = y + (ctx.canvas.height) / 2 - (lineHeight * lines.length) / 2 const initLineY = lineY @@ -88,7 +89,8 @@ const drawText = (ctx, options) => { lineX = x + 4 } if (textOverflowEffect === 'zoom') { - ctx.fillText(line, lineX, lineY, width) + const size = parseInt(Math.sqrt((_w * _w + height * height) / 2)) + ctx.fillText(line, lineX, lineY, size) } else { ctx.fillText(line, lineX, lineY) } @@ -102,7 +104,7 @@ const drawLogo = (ctx, logo, cb) => { img.src = logo img.onload = () => { ctx.globalAlpha = 0.2 - ctx.drawImage(img, 24, ctx.canvas.height / 2 - 16, 32, 32) + ctx.drawImage(img, 0, ctx.canvas.height / 2 - 16, 32, 32) cb() } } @@ -154,7 +156,18 @@ const toImage = (canvas, key, container, options) => { } const WaterMarker = (container, args) => { const _container = container || document.body - const options = Object.assign({}, defaultOptions, args) + const {markDensity} = args + let _markSize = { + width: 190, + height: 160 + } + if (['low', 'high'].includes(markDensity)) { + _markSize = { + width: markDensity === 'low' ? 140 : 240, + height: markDensity === 'low' ? 110 : 210 + } + } + const options = Object.assign({}, defaultOptions, _markSize, args) const { id, width, @@ -162,7 +175,7 @@ const WaterMarker = (container, args) => { textAlign, textBaseline, font, - fillStyle, + color, logo, rotate } = options @@ -171,15 +184,14 @@ const WaterMarker = (container, args) => { key = id + '__wm' } const canvas = document.createElement('canvas') + var ctx = canvas.getContext('2d') canvas.setAttribute('width', width + 'px') canvas.setAttribute('height', height + 'px') - var ctx = canvas.getContext('2d') - // ctx.scale(dpr, dpr) ctx.textAlign = textAlign ctx.textBaseline = textBaseline ctx.font = font - ctx.fillStyle = fillStyle + ctx.fillStyle = color ctx.translate(width / 2, height / 2) ctx.rotate(Math.PI / 180 * rotate) ctx.translate(-width / 2, -height / 2) diff --git a/docs/demo/watermark/section-base.jsx b/docs/demo/watermark/section-base.jsx index f6f802d79..4d7b0b280 100755 --- a/docs/demo/watermark/section-base.jsx +++ b/docs/demo/watermark/section-base.jsx @@ -5,11 +5,11 @@ import logo from '../../../site/static/img/logo.png' const prefix = 'watermark-base' const desc = '' const code = `import React from 'react' -import WatermarkComponent from '@hi-ui/hiui/es/WatermarkComponent'\n +import Watermark from '@hi-ui/hiui/es/Watermark'\n class Demo extends React.Component { constructor(props) { super(props) - this.options = {logo: logo, rotate: -30, contents: ['HIUI', '做中台，就用 HIUI']} + this.options = {logo: logo, contents: ['HIUI', '做中台，就用 HIUI']} } render () { return ( diff --git a/docs/demo/watermark/section-watermark-js.jsx b/docs/demo/watermark/section-watermark-js.jsx index 8ebb5898c..9ce34a571 100755 --- a/docs/demo/watermark/section-watermark-js.jsx +++ b/docs/demo/watermark/section-watermark-js.jsx @@ -1,19 +1,19 @@ import React from 'react' import DocViewer from '../../../libs/doc-viewer' -import { Watermark } from '../../../components/watermark' +import Watermark from '../../../components/watermark' import logo from '../../../site/static/img/logo.png' const prefix = 'watermark-js' const desc = '' const code = `import React from 'react' -import {watermark} from '@hi-ui/hiui/es/WatermarkComponent'\n +import Watermark from '@hi-ui/hiui/es/watermark'\n class Demo extends React.Component { constructor(props) { super(props) this.boxRef = React.createRef() - this.options = {logo: logo, rotate: -30, contents: ['HIUI', '做中台，就用 HIUI']} + this.options = {logo: logo, contents: ['HIUI', '做中台，就用 HIUI']} } componentDidMount() { - Watermark(this.boxRef.current, this.options) + Watermark.generate(this.boxRef.current, this.options) } render () { return ( diff --git a/docs/zh-CN/components/table.mdx b/docs/zh-CN/components/table.mdx index ae9c0f4c4..40725c5e1 100755 --- a/docs/zh-CN/components/table.mdx +++ b/docs/zh-CN/components/table.mdx @@ -146,7 +146,8 @@ import DemoWaterMark from '../../demo/table/section-waterMark.jsx' | size | 表格尺寸 | string | 'small' \| 'large' \| 'default' | 'default' | | bordered | 是否显示边框 | boolean | true \| false | false | | striped | 斑马纹 | boolean | true \| false | false | -| waterMark | 添加水印,属性设置参考水印组件 | boolean | true \| false | false | +| waterMark | 添加水印 | boolean | true \| false | false | +| waterMarkOptions | 水印属性设置，参考水印组件 | object | - | - | | columns | 表格数据列对应信息 | ColumnItem[] | - | - | | data | 表格数据 | object[] | - | - | | emptyText | 数据为空时展示的文案 | string | - | 'No Data' | diff --git a/docs/zh-CN/components/watermark.mdx b/docs/zh-CN/components/watermark.mdx index 3638a7f94..8f523eb7f 100755 --- a/docs/zh-CN/components/watermark.mdx +++ b/docs/zh-CN/components/watermark.mdx @@ -22,16 +22,6 @@ import WatermarkJS from '../../demo/watermark/section-watermark-js.jsx' | 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------- | ------------------------ | ----------------------- | ------------------------------------------- | ------ | -| id | 元素ID,不传入默认随机生成 | string | - | - | -| width | 水印宽度 | number | - | 240 | -| height | 水印宽度 | number | - | 240 | -| textAlign | 文字对齐方式 | string | - | 'left' | -| font | 文字样式设置 | string | - | '14px microsoft yahei' | -| fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 | string | - | 'rgba(128, 128, 128, 0.2)' | -| contents | 水印文案 | string \| Array[string] | - | 请勿外传| -| rotate | 旋转角度 | number | - | 0 | -| zIndex | 层级 | number | - | 1000 | -| logo | 图片类的资源地址 | string | - | - | -| grayLogo | 是否对图标进行灰度处理 | boolean |true \| false | true | -| isAutoWrap | 文字是否自动换行 | boolean |true \| false | true | -| textOverflowEffect | 文字是否自动缩放 | string |zoom \| cut | zoom | +| density | 水印间距,调节疏密程度 | string | 'low' \| 'default' \| 'high' | 'default' | +| content | 水印文案,传入数组代表多行，不建议超过三行 | string \| Array[string] | - | 请勿外传| +| logo | 本地图片类的资源 | File | - | - | From 53da3e6fa2e80a326eaef42a53070b847fa51fc5 Mon Sep 17 00:00:00 2001 From: Wugaoliang Date: Fri, 27 Mar 2020 16:37:22 +0800 Subject: [PATCH 10/20] feat: watermark --- components/table/index.js | 4 ++-- components/watermark/index.js | 6 +++--- components/watermark/watermark.js | 16 ++++++++-------- docs/demo/watermark/section-base.jsx | 2 +- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/components/table/index.js b/components/table/index.js index 84a9d014e..21a101d3f 100644 --- a/components/table/index.js +++ b/components/table/index.js @@ -945,10 +945,10 @@ class Table extends Component { theadHeight: dom.querySelector('.hi-table-thead').offsetHeight }, () => { if (this.props.waterMark) { - const {theadHeight} = this.state + const { theadHeight } = this.state const options = { id: this.state.tableContentId, - rotate: -45, + rotate: -30, contents: ['HIUI', '做中台，就用 HIUI'], _top: theadHeight, ...this.props.waterMarkOptions diff --git a/components/watermark/index.js b/components/watermark/index.js index 7020eaf65..39f78a5d7 100644 --- a/components/watermark/index.js +++ b/components/watermark/index.js @@ -39,12 +39,12 @@ Watermark.propTypes = { Watermark.defaultProps = { id: null, - markDensity: 'default', + density: 'default', textAlign: 'left', - font: '14px microsoft yahei', + font: '16px microsoft yahei', color: 'rgba(128, 128, 128, 0.2)', contents: '请勿外传', - rotate: '-45', + rotate: -30, zIndex: 1000, logo: null, grayLogo: true, diff --git a/components/watermark/watermark.js b/components/watermark/watermark.js index 32129eeb7..9f5d74847 100644 --- a/components/watermark/watermark.js +++ b/components/watermark/watermark.js @@ -1,10 +1,10 @@ const defaultOptions = { id: null, textAlign: 'left', - font: '14px microsoft yahei', + font: '16px microsoft yahei', color: 'rgba(128, 128, 128, 0.2)', contents: '请勿外传', - rotate: '-45', + rotate: -30, zIndex: 1000, logo: null, grayLogo: true, // 是否对图标进行灰度处理 @@ -156,15 +156,15 @@ const toImage = (canvas, key, container, options) => { } const WaterMarker = (container, args) => { const _container = container || document.body - const {markDensity} = args + const {density} = args let _markSize = { - width: 190, - height: 160 + width: 210, + height: 180 } - if (['low', 'high'].includes(markDensity)) { + if (['low', 'high'].includes(density)) { _markSize = { - width: markDensity === 'low' ? 140 : 240, - height: markDensity === 'low' ? 110 : 210 + width: density === 'low' ? 240 : 180, + height: density === 'low' ? 210 : 150 } } const options = Object.assign({}, defaultOptions, _markSize, args) diff --git a/docs/demo/watermark/section-base.jsx b/docs/demo/watermark/section-base.jsx index 4d7b0b280..86baa848d 100755 --- a/docs/demo/watermark/section-base.jsx +++ b/docs/demo/watermark/section-base.jsx @@ -9,7 +9,7 @@ import Watermark from '@hi-ui/hiui/es/Watermark'\n class Demo extends React.Component { constructor(props) { super(props) - this.options = {logo: logo, contents: ['HIUI', '做中台，就用 HIUI']} + this.options = {logo: logo, contents: ['HIUI', '做中台，就用 HIUI'],density:'high'} } render () { return ( From 12c5da1483da2249268f0e1cb2240394aa3fd15a Mon Sep 17 00:00:00 2001 From: Wugaoliang Date: Fri, 27 Mar 2020 16:41:36 +0800 Subject: [PATCH 11/20] feat: watermark --- components/table/index.js | 4 +--- components/table/tool.js | 10 ---------- 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/components/table/index.js b/components/table/index.js index 21a101d3f..a878ca134 100644 --- a/components/table/index.js +++ b/components/table/index.js @@ -12,7 +12,7 @@ import loading from '../loading' import '../pagination/style' import '../icon/style' import Provider from '../context' -import {setKey, scrollTop, getStyle, getPosition, offset, randomString} from './tool' +import { setKey, scrollTop, getStyle, getPosition, offset } from './tool' import request from 'axios' import qs from 'qs' @@ -68,7 +68,6 @@ class Table extends Component { this.contentRef = React.createRef() this.state = { theadHeight: 52, - tableContentId: 'hi-table' + randomString(4), dataSource: data, highlightCols: [], highlightRows: [], @@ -947,7 +946,6 @@ class Table extends Component { if (this.props.waterMark) { const { theadHeight } = this.state const options = { - id: this.state.tableContentId, rotate: -30, contents: ['HIUI', '做中台，就用 HIUI'], _top: theadHeight, diff --git a/components/table/tool.js b/components/table/tool.js index b347ec5df..bbe4295fd 100644 --- a/components/table/tool.js +++ b/components/table/tool.js @@ -6,16 +6,6 @@ export function insertAfter (newElement, targetElement) { parent.insertBefore(newElement, targetElement.nextSibling) } } -export function randomString (len) { - const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' - const maxPos = $chars.length - let pwd = '' - len = len || 32 - for (let i = 0; i < len; i++) { - pwd += $chars.charAt(Math.floor(Math.random() * maxPos)) - } - return pwd -} export function setKey (data, name) { name = name || 'id' return data.map(item => { From 574a15a76d139f7792a89ee97cc3631798561683 Mon Sep 17 00:00:00 2001 From: Wugaoliang Date: Fri, 27 Mar 2020 16:54:48 +0800 Subject: [PATCH 12/20] feat: watermark --- components/watermark/index.js | 2 +- docs/demo/table/section-waterMark.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/watermark/index.js b/components/watermark/index.js index 39f78a5d7..452d9cea6 100644 --- a/components/watermark/index.js +++ b/components/watermark/index.js @@ -48,7 +48,7 @@ Watermark.defaultProps = { zIndex: 1000, logo: null, grayLogo: true, - isAutoWrap: true, + isAutoWrap: false, textOverflowEffect: 'zoom' } Watermark.generate = WaterMarker diff --git a/docs/demo/table/section-waterMark.jsx b/docs/demo/table/section-waterMark.jsx index 79c6b6328..4a07424af 100644 --- a/docs/demo/table/section-waterMark.jsx +++ b/docs/demo/table/section-waterMark.jsx @@ -2,7 +2,7 @@ import React from 'react' import DocViewer from '../../../libs/doc-viewer' import Table from '../../../components/table' const prefix = 'table-waterMark' -const desc = '基础：展示二维数据' +const desc = '向表格添加水印' const code = `import React from 'react' import Table from '@hi-ui/hiui/es/table'\n class Demo extends React.Component { From a45ff6b9bbb16ba1ab51a01f63b1b44667273fd7 Mon Sep 17 00:00:00 2001 From: Wugaoliang Date: Fri, 27 Mar 2020 16:59:13 +0800 Subject: [PATCH 13/20] feat: watermark --- components/table/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/table/index.js b/components/table/index.js index a878ca134..1fd9eadfb 100644 --- a/components/table/index.js +++ b/components/table/index.js @@ -943,13 +943,14 @@ class Table extends Component { this.setState({ theadHeight: dom.querySelector('.hi-table-thead').offsetHeight }, () => { - if (this.props.waterMark) { + const {waterMark, waterMarkOptions} = this.props + if (waterMark) { const { theadHeight } = this.state const options = { rotate: -30, contents: ['HIUI', '做中台，就用 HIUI'], _top: theadHeight, - ...this.props.waterMarkOptions + ...waterMarkOptions } const container = this.contentRef.current Watermark.generate(container, options) From 208a6f29084b60325e47d6c7b38e450fe8b15fc9 Mon Sep 17 00:00:00 2001 From: wugaoliang Date: Fri, 27 Mar 2020 21:51:30 +0800 Subject: [PATCH 14/20] feat: watermark --- components/table/index.js | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/components/table/index.js b/components/table/index.js index 1fd9eadfb..9604e7257 100644 --- a/components/table/index.js +++ b/components/table/index.js @@ -1,6 +1,5 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import Watermark from '../watermark' import ClickOutside from './ClickOuterside' import TableContent from './TableContent' import prifix from './prefix' @@ -940,22 +939,6 @@ class Table extends Component { } }, this.fetch) } - this.setState({ - theadHeight: dom.querySelector('.hi-table-thead').offsetHeight - }, () => { - const {waterMark, waterMarkOptions} = this.props - if (waterMark) { - const { theadHeight } = this.state - const options = { - rotate: -30, - contents: ['HIUI', '做中台，就用 HIUI'], - _top: theadHeight, - ...waterMarkOptions - } - const container = this.contentRef.current - Watermark.generate(container, options) - } - }) }, 0) } From e8699bbfd131c0889da9bdaba3cf274e9426e9d9 Mon Sep 17 00:00:00 2001 From: wugaoliang Date: Fri, 27 Mar 2020 21:59:34 +0800 Subject: [PATCH 15/20] feat: watermark --- components/watermark/index.js | 4 +- components/watermark/watermark.js | 27 +++------ docs/demo/table/section-waterMark.jsx | 59 -------------------- docs/demo/watermark/section-base.jsx | 2 +- docs/demo/watermark/section-watermark-js.jsx | 36 ------------ docs/zh-CN/components/table.mdx | 8 --- docs/zh-CN/components/watermark.mdx | 6 -- site/locales/zh-CN.js | 2 +- 8 files changed, 13 insertions(+), 131 deletions(-) delete mode 100644 docs/demo/table/section-waterMark.jsx delete mode 100755 docs/demo/watermark/section-watermark-js.jsx diff --git a/components/watermark/index.js b/components/watermark/index.js index 452d9cea6..868e7086c 100644 --- a/components/watermark/index.js +++ b/components/watermark/index.js @@ -28,7 +28,7 @@ Watermark.propTypes = { textAlign: PropTypes.string, font: PropTypes.string, color: PropTypes.string, - contents: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), + content: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), rotate: PropTypes.number, zIndex: PropTypes.number, logo: PropTypes.string, @@ -43,7 +43,7 @@ Watermark.defaultProps = { textAlign: 'left', font: '16px microsoft yahei', color: 'rgba(128, 128, 128, 0.2)', - contents: '请勿外传', + content: '请勿外传', rotate: -30, zIndex: 1000, logo: null, diff --git a/components/watermark/watermark.js b/components/watermark/watermark.js index 9f5d74847..2fbc78adc 100644 --- a/components/watermark/watermark.js +++ b/components/watermark/watermark.js @@ -3,7 +3,7 @@ const defaultOptions = { textAlign: 'left', font: '16px microsoft yahei', color: 'rgba(128, 128, 128, 0.2)', - contents: '请勿外传', + content: '请勿外传', rotate: -30, zIndex: 1000, logo: null, @@ -11,28 +11,19 @@ const defaultOptions = { isAutoWrap: false, // 文字是否自动换行 textOverflowEffect: 'zoom' // 当isAutoWrap 为 false 时，文本长度超出画布长度时的处理方式： zoom - 缩小文字 cut - 截断文字 } -const randomString = (len) => { - const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' - const maxPos = $chars.length - let pwd = '' - len = len || 32 - for (let i = 0; i < len; i++) { - pwd += $chars.charAt(Math.floor(Math.random() * maxPos)) - } - return pwd -} + const parseTextData = (ctx, texts, width, isWrap) => { - let contents = [] + let content = [] let lines = [] if (texts instanceof Array) { - contents = texts + content = texts } else if (typeof texts === 'string') { - contents.push(texts) + content.push(texts) } else { console.warn('Only support String Or Array') } if (isWrap) { - contents.forEach((text) => { + content.forEach((text) => { let curLine = '' for (let char of text) { let nextLine = curLine + char @@ -47,7 +38,7 @@ const parseTextData = (ctx, texts, width, isWrap) => { }) return lines } else { - return contents + return content } } const drawText = (ctx, options) => { @@ -56,7 +47,7 @@ const drawText = (ctx, options) => { _w = width, height, textOverflowEffect, - contents: text, + content: text, isAutoWrap, logo } = options @@ -179,7 +170,7 @@ const WaterMarker = (container, args) => { logo, rotate } = options - let key = 'hi-' + randomString(4) + '__wm' + let key = 'hi-' + Math.floor(Math.random() * (9999 - 1000)) + 1000 + '__wm' if (id && id.trim().length > 0 && !document.querySelector(id + '__wm')) { key = id + '__wm' } diff --git a/docs/demo/table/section-waterMark.jsx b/docs/demo/table/section-waterMark.jsx deleted file mode 100644 index 4a07424af..000000000 --- a/docs/demo/table/section-waterMark.jsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react' -import DocViewer from '../../../libs/doc-viewer' -import Table from '../../../components/table' -const prefix = 'table-waterMark' -const desc = '向表格添加水印' -const code = `import React from 'react' -import Table from '@hi-ui/hiui/es/table'\n -class Demo extends React.Component { - constructor(props){ - super(props) - - this.columns = [ - - { title: 'Column 1', dataIndex: 'name', key: '1'}, - { title: 'Column 1', dataIndex: 'age', key: '2'}, - { title: 'Column 1', dataIndex: 'address', key: '3'}, - { - title: ()=>
自定义标题
, - dataIndex: 'address', key: '4', - width: '500px', - render(text,record,index){ - return ( -
- {text} --- {index} --- 自定义渲染 -
- ) - }}, - { - title: 'Action', - key: 'operation', - width: 100, - render: () => action, - }, - ] - - this.data = [] - for (let i = 0; i < 10; i++) { - this.data.push({ - // key: i, - name: \`Don Diablo \${i}\`, - age: \`\${i}\${i}\`, - address: \`EDC Las Vegas no. \${i}\`, - }); - } - } - render() { - return
- } -}` - -const DemoBase = () => ( - -) -export default DemoBase diff --git a/docs/demo/watermark/section-base.jsx b/docs/demo/watermark/section-base.jsx index 86baa848d..8f77d35c8 100755 --- a/docs/demo/watermark/section-base.jsx +++ b/docs/demo/watermark/section-base.jsx @@ -9,7 +9,7 @@ import Watermark from '@hi-ui/hiui/es/Watermark'\n class Demo extends React.Component { constructor(props) { super(props) - this.options = {logo: logo, contents: ['HIUI', '做中台，就用 HIUI'],density:'high'} + this.options = {logo: logo, content: ['HIUI', '做中台，就用 HIUI'],density:'high'} } render () { return ( diff --git a/docs/demo/watermark/section-watermark-js.jsx b/docs/demo/watermark/section-watermark-js.jsx deleted file mode 100755 index 9ce34a571..000000000 --- a/docs/demo/watermark/section-watermark-js.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react' -import DocViewer from '../../../libs/doc-viewer' -import Watermark from '../../../components/watermark' -import logo from '../../../site/static/img/logo.png' -const prefix = 'watermark-js' -const desc = '' -const code = `import React from 'react' -import Watermark from '@hi-ui/hiui/es/watermark'\n -class Demo extends React.Component { - constructor(props) { - super(props) - this.boxRef = React.createRef() - this.options = {logo: logo, contents: ['HIUI', '做中台，就用 HIUI']} - } - componentDidMount() { - Watermark.generate(this.boxRef.current, this.options) - } - render () { - return ( -
- ) - } -}` - -const DemoBase = () => ( - -) -export default DemoBase diff --git a/docs/zh-CN/components/table.mdx b/docs/zh-CN/components/table.mdx index 40725c5e1..a6b2b1c00 100755 --- a/docs/zh-CN/components/table.mdx +++ b/docs/zh-CN/components/table.mdx @@ -133,12 +133,6 @@ import DemoAdvance from '../../demo/table/section-advance.jsx' -## 添加水印 - -import DemoWaterMark from '../../demo/table/section-waterMark.jsx' - - - ## Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | @@ -146,8 +140,6 @@ import DemoWaterMark from '../../demo/table/section-waterMark.jsx' | size | 表格尺寸 | string | 'small' \| 'large' \| 'default' | 'default' | | bordered | 是否显示边框 | boolean | true \| false | false | | striped | 斑马纹 | boolean | true \| false | false | -| waterMark | 添加水印 | boolean | true \| false | false | -| waterMarkOptions | 水印属性设置，参考水印组件 | object | - | - | | columns | 表格数据列对应信息 | ColumnItem[] | - | - | | data | 表格数据 | object[] | - | - | | emptyText | 数据为空时展示的文案 | string | - | 'No Data' | diff --git a/docs/zh-CN/components/watermark.mdx b/docs/zh-CN/components/watermark.mdx index 8f523eb7f..781e73c39 100755 --- a/docs/zh-CN/components/watermark.mdx +++ b/docs/zh-CN/components/watermark.mdx @@ -12,12 +12,6 @@ import DemoBase from '../../demo/watermark/section-base.jsx' -## 工具类使用 - -import WatermarkJS from '../../demo/watermark/section-watermark-js.jsx' - - - ## Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | diff --git a/site/locales/zh-CN.js b/site/locales/zh-CN.js index 256d8affc..c12b6f6c2 100755 --- a/site/locales/zh-CN.js +++ b/site/locales/zh-CN.js @@ -53,7 +53,7 @@ module.exports = { rate: 'Rate 评分', breadcrumb: 'Breadcrumb 面包屑', carousel: 'Carousel 走马灯', - watermark: '水印' + watermark: 'Watermark 水印' }, designs: { summarize: '概述', From f33197577ae2d798952c4129cff8d53e91235383 Mon Sep 17 00:00:00 2001 From: wugaoliang Date: Fri, 27 Mar 2020 22:03:58 +0800 Subject: [PATCH 16/20] feat: watermark --- components/table/index.js | 4 +--- docs/zh-CN/components/watermark.mdx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/components/table/index.js b/components/table/index.js index 9604e7257..093452c1d 100644 --- a/components/table/index.js +++ b/components/table/index.js @@ -64,9 +64,7 @@ class Table extends Component { this.fixRight = React.createRef() this.fixRight = React.createRef() this.setting = React.createRef() - this.contentRef = React.createRef() this.state = { - theadHeight: 52, dataSource: data, highlightCols: [], highlightRows: [], @@ -484,7 +482,7 @@ class Table extends Component {
{header &&
{header()}
}
-
{content}
+
{content}
{ name &&
{ diff --git a/docs/zh-CN/components/watermark.mdx b/docs/zh-CN/components/watermark.mdx index 781e73c39..85343dd0c 100755 --- a/docs/zh-CN/components/watermark.mdx +++ b/docs/zh-CN/components/watermark.mdx @@ -17,5 +17,5 @@ import DemoBase from '../../demo/watermark/section-base.jsx' | 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------- | ------------------------ | ----------------------- | ------------------------------------------- | ------ | | density | 水印间距,调节疏密程度 | string | 'low' \| 'default' \| 'high' | 'default' | -| content | 水印文案,传入数组代表多行，不建议超过三行 | string \| Array[string] | - | 请勿外传| +| content | 水印文案,传入数组代表多行,不建议超过三行 | string \| Array[string] | - | 请勿外传| | logo | 本地图片类的资源 | File | - | - | From 961daf33073d7ba794f12f60ab73bac6bbad5e8a Mon Sep 17 00:00:00 2001 From: wugaoliang Date: Fri, 27 Mar 2020 22:20:17 +0800 Subject: [PATCH 17/20] feat: watermark --- docs/demo/watermark/section-base.jsx | 8 ++++---- docs/zh-CN/components/watermark.mdx | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/demo/watermark/section-base.jsx b/docs/demo/watermark/section-base.jsx index 8f77d35c8..72ad8a86d 100755 --- a/docs/demo/watermark/section-base.jsx +++ b/docs/demo/watermark/section-base.jsx @@ -1,6 +1,6 @@ import React from 'react' import DocViewer from '../../../libs/doc-viewer' -import WatermarkComponent from '../../../components/watermark' +import Watermark from '../../../components/watermark' import logo from '../../../site/static/img/logo.png' const prefix = 'watermark-base' const desc = '' @@ -13,13 +13,13 @@ class Demo extends React.Component { } render () { return ( -
- + ) } }` @@ -28,7 +28,7 @@ const DemoBase = () => ( ) export default DemoBase diff --git a/docs/zh-CN/components/watermark.mdx b/docs/zh-CN/components/watermark.mdx index 85343dd0c..29e0364c6 100755 --- a/docs/zh-CN/components/watermark.mdx +++ b/docs/zh-CN/components/watermark.mdx @@ -16,6 +16,6 @@ import DemoBase from '../../demo/watermark/section-base.jsx' | 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------- | ------------------------ | ----------------------- | ------------------------------------------- | ------ | -| density | 水印间距,调节疏密程度 | string | 'low' \| 'default' \| 'high' | 'default' | -| content | 水印文案,传入数组代表多行,不建议超过三行 | string \| Array[string] | - | 请勿外传| -| logo | 本地图片类的资源 | File | - | - | +| density | 水印间距，调节疏密程度 | string | 'low' \| 'default' \| 'high' | 'default' | +| content | 水印文案，传入数组代表多行，不建议超过三行 | string \| Array[string] | - | 请勿外传| +| logo | 图片资源地址（暂只支持本地资源） | string | - | - | From 9567743d14869371a716b0b3c0f175eabc3e33cc Mon Sep 17 00:00:00 2001 From: solarjoker Date: Sat, 28 Mar 2020 03:19:54 +0800 Subject: [PATCH 18/20] docs: update watermark --- docs/zh-CN/components/watermark.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/zh-CN/components/watermark.mdx b/docs/zh-CN/components/watermark.mdx index 29e0364c6..6297efe14 100755 --- a/docs/zh-CN/components/watermark.mdx +++ b/docs/zh-CN/components/watermark.mdx @@ -1,4 +1,4 @@ -# 水印工具 +# Watermark 水印 用于向元素添加水印 @@ -14,8 +14,8 @@ import DemoBase from '../../demo/watermark/section-base.jsx' ## Props -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| --------- | ------------------------ | ----------------------- | ------------------------------------------- | ------ | -| density | 水印间距，调节疏密程度 | string | 'low' \| 'default' \| 'high' | 'default' | -| content | 水印文案，传入数组代表多行，不建议超过三行 | string \| Array[string] | - | 请勿外传| -| logo | 图片资源地址（暂只支持本地资源） | string | - | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ------- | ------------------------------------------ | ----------------------- | ---------------------------- | ---------- | +| density | 水印间距，调节疏密程度 | string | 'low' \| 'default' \| 'high' | 'default' | +| content | 水印文案，传入数组代表多行，不建议超过三行 | string \| Array[string] | - | '请勿外传' | +| logo | 图片资源地址（暂只支持本地资源） | string | - | - | From ee09eb7f50615f8aa5ca5d837e850071e6573d15 Mon Sep 17 00:00:00 2001 From: solarjoker Date: Sat, 28 Mar 2020 03:28:47 +0800 Subject: [PATCH 19/20] chore: update version and changelog --- CHANGELOG.md | 6 ++++++ docs/zh-CN/components/changelog.mdx | 6 ++++++ package.json | 2 +- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cf098804a..f450a1c01 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # 更新日志 +## 2.12.0 + +- 新增 `` 水印组件 [#121](https://github.com/XiaoMi/hiui/issues/121) +- 修复 `` 多选模式下在禁用状态复选框样式异常的问题 [#1014](https://github.com/XiaoMi/hiui/issues/1014) +- 修复 `` DataSource 配置 headers 参数无效的问题 [#1011](https://github.com/XiaoMi/hiui/issues/1011) + ## 2.11.1 - 修复打包印度节假日数据问题 diff --git a/package.json b/package.json index 85432a4fe..830501c0e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hi-ui/hiui", - "version": "2.11.1", + "version": "2.12.0", "description": "HIUI for React", "scripts": { "test": "node_modules/.bin/standard && node_modules/.bin/stylelint --config .stylelintrc 'components/**/*.scss'", From 272da2218557e88fadb0807edd98285c812aeecf Mon Sep 17 00:00:00 2001 From: wugaoliang Date: Sat, 28 Mar 2020 06:55:36 +0800 Subject: [PATCH 20/20] feat: watermark --- components/watermark/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/components/watermark/index.js b/components/watermark/index.js index 868e7086c..27630142c 100644 --- a/components/watermark/index.js +++ b/components/watermark/index.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import WaterMarker from './watermark' +import _ from 'lodash' class Watermark extends React.Component { constructor (props) { super(props) @@ -9,8 +10,10 @@ class Watermark extends React.Component { } componentDidMount () { const container = this.rootRef.current - const { props } = this - WaterMarker(container, props) + const options = _.cloneDeep(this.props) + delete options.children + + WaterMarker(container, options) } render () { return (