@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
134 lines (131 loc) • 6.51 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WaterMark = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _components = require("@tarojs/components");
var _taro = require("@tarojs/taro");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = require("react");
var _utils = require("./utils");
var _defaultProps = require("../default-props");
var _jsxRuntime = require("react/jsx-runtime");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var classPrefix = "van-water-mark";
var cIndex = 0;
// eslint-disable-next-line import/order
var WaterMark = function WaterMark(props) {
var _useState = (0, _react.useState)((0, _defaultProps.get)().WaterMark),
_useState2 = (0, _slicedToArray2.default)(_useState, 1),
d = _useState2[0];
var _d$props = _objectSpread(_objectSpread({}, d), props),
_d$props$zIndex = _d$props.zIndex,
zIndex = _d$props$zIndex === void 0 ? 2000 : _d$props$zIndex,
_d$props$gapX = _d$props.gapX,
gapX = _d$props$gapX === void 0 ? 24 : _d$props$gapX,
_d$props$gapY = _d$props.gapY,
gapY = _d$props$gapY === void 0 ? 48 : _d$props$gapY,
_d$props$width = _d$props.width,
width = _d$props$width === void 0 ? 120 : _d$props$width,
_d$props$height = _d$props.height,
height = _d$props$height === void 0 ? 64 : _d$props$height,
_d$props$rotate = _d$props.rotate,
rotate = _d$props$rotate === void 0 ? -22 : _d$props$rotate,
image = _d$props.image,
_d$props$imageWidth = _d$props.imageWidth,
imageWidth = _d$props$imageWidth === void 0 ? 120 : _d$props$imageWidth,
_d$props$imageHeight = _d$props.imageHeight,
imageHeight = _d$props$imageHeight === void 0 ? 64 : _d$props$imageHeight,
content = _d$props.content,
_d$props$fontStyle = _d$props.fontStyle,
fontStyle = _d$props$fontStyle === void 0 ? 'normal' : _d$props$fontStyle,
_d$props$fontWeight = _d$props.fontWeight,
fontWeight = _d$props$fontWeight === void 0 ? 'normal' : _d$props$fontWeight,
_d$props$fontColor = _d$props.fontColor,
fontColor = _d$props$fontColor === void 0 ? 'rgba(0,0,0,.15)' : _d$props$fontColor,
_d$props$fontSize = _d$props.fontSize,
fontSize = _d$props$fontSize === void 0 ? 14 : _d$props$fontSize,
_d$props$fontFamily = _d$props.fontFamily,
fontFamily = _d$props$fontFamily === void 0 ? 'sans-serif' : _d$props$fontFamily,
_d$props$fullPage = _d$props.fullPage,
fullPage = _d$props$fullPage === void 0 ? true : _d$props$fullPage;
var _useState3 = (0, _react.useState)(''),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
base64Url = _useState4[0],
setBase64Url = _useState4[1];
var _useState5 = (0, _react.useState)(),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
canvasRect = _useState6[0],
setCanvasRect = _useState6[1];
var _useState7 = (0, _react.useState)(cIndex++),
_useState8 = (0, _slicedToArray2.default)(_useState7, 1),
compIndex = _useState8[0];
var work = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
var canvas, base64Url_;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return (0, _utils.getCanvas)(compIndex);
case 2:
canvas = _context.sent;
_context.next = 5;
return (0, _utils.getWaterData)({
gapX: gapX,
gapY: gapY,
rotate: rotate,
fontStyle: fontStyle,
fontWeight: fontWeight,
width: width,
height: height,
fontFamily: fontFamily,
fontColor: fontColor,
image: image,
content: content,
fontSize: fontSize,
imageWidth: imageWidth,
imageHeight: imageHeight,
canvas: canvas,
setCanvasRect: setCanvasRect
});
case 5:
base64Url_ = _context.sent;
setBase64Url(base64Url_);
// eslint-disable-next-line react-hooks/exhaustive-deps
case 7:
case "end":
return _context.stop();
}
}, _callee);
})), [gapX, gapY, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize, imageWidth, imageHeight]);
(0, _react.useEffect)(function () {
(0, _taro.nextTick)(function () {
work();
});
}, [work]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: (0, _classnames.default)(classPrefix, (0, _defineProperty2.default)({}, "".concat(classPrefix, "-full-page"), fullPage)),
style: {
zIndex: zIndex,
backgroundSize: "".concat(gapX + width, "px"),
backgroundImage: "url('".concat(base64Url, "')")
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Canvas, {
style: _objectSpread(_objectSpread({}, canvasRect), {}, {
position: 'absolute',
left: -500
}),
id: "van-water-mark".concat(compIndex),
type: "2d"
})
});
};
exports.WaterMark = WaterMark;
var _default = WaterMark;
exports.default = _default;