@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
113 lines (112 loc) • 6.46 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import * as React from 'react';
import { observer } from 'mobx-react';
import { ColorPicker } from '@qn-pandora/pandora-app-component';
import { Form, SolidRadioGroup, WithValidatorInputNumber } from '../../../Common';
import BasicComponent from '../../../Base/BasicComponent';
import { signleLayoutOption } from './options';
import errorBoundary from '../../../../hocs/errorBoundary';
import { BaseLocale } from '../../../../constants/language/base/type';
import { formatString } from '../../../../services/language';
import { SingleLocale } from '../../../../constants/language/single/type';
import bind from '../../../../utils/bind';
import * as style from './style.mless';
import { toNumber } from 'lodash';
var Item = Form.Item;
var formItemLayout = {
labelCol: { span: 10 },
wrapperCol: { span: 14 }
};
var SignleTextSettingContent = /** @class */ (function (_super) {
__extends(SignleTextSettingContent, _super);
function SignleTextSettingContent() {
return _super !== null && _super.apply(this, arguments) || this;
}
SignleTextSettingContent.prototype.handleFontSizeChange = function (fontSize) {
var _a = this.props, font = _a.font, onChange = _a.onChange;
onChange(__assign(__assign({}, font), { fontSize: fontSize }));
};
SignleTextSettingContent.prototype.handleFontColorChange = function (fontColor) {
var _a = this.props, font = _a.font, onChange = _a.onChange;
onChange(__assign(__assign({}, font), { fontColor: fontColor }));
};
SignleTextSettingContent.prototype.handleLayoutChange = function (layout) {
var _a = this.props, font = _a.font, onChange = _a.onChange;
onChange(__assign(__assign({}, font), { layout: layout }));
};
SignleTextSettingContent.prototype.render = function () {
var _this = this;
var _a = this.props, defaultColor = _a.defaultColor, defaultFontSize = _a.defaultFontSize, _b = _a.font, fontSize = _b.fontSize, fontColor = _b.fontColor, layout = _b.layout;
return (React.createElement(Form, { className: style.content },
React.createElement("span", { className: style.title }, formatString(BaseLocale.title.affix)),
React.createElement(Item, __assign({ label: BaseLocale.title.font_size, key: BaseLocale.title.font_size, className: style.formItem }, formItemLayout),
React.createElement(WithValidatorInputNumber, { value: fontSize || defaultFontSize, placeholder: BaseLocale.title.font_size, onBlur: function (e) {
var val = isNaN(toNumber(e.target.value))
? 12
: toNumber(e.target.value) || 12;
_this.handleFontSizeChange(val);
}, min: 12 })),
React.createElement(Item, __assign({ label: "" + formatString(BaseLocale.title.font_title) + formatString(BaseLocale.color), key: "" + BaseLocale.title.font_title + BaseLocale.color, className: style.formItem }, formItemLayout),
React.createElement("div", { className: style.color },
React.createElement(ColorPicker, { value: fontColor || defaultColor, onChange: this.handleFontColorChange, getPopupContainer: this.getRootDOM }),
fontColor && (React.createElement("a", { className: style.clear, onClick: function () { return _this.handleFontColorChange(''); } }, formatString(SingleLocale.setting.clear))))),
React.createElement(Item, __assign({ label: SingleLocale.position, className: style.formItem }, formItemLayout),
React.createElement(SolidRadioGroup, { options: signleLayoutOption, value: layout, onChange: this.handleLayoutChange }))));
};
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Number]),
__metadata("design:returntype", void 0)
], SignleTextSettingContent.prototype, "handleFontSizeChange", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [String]),
__metadata("design:returntype", void 0)
], SignleTextSettingContent.prototype, "handleFontColorChange", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [String]),
__metadata("design:returntype", void 0)
], SignleTextSettingContent.prototype, "handleLayoutChange", null);
SignleTextSettingContent = __decorate([
observer
], SignleTextSettingContent);
return SignleTextSettingContent;
}(BasicComponent));
export { SignleTextSettingContent };
export default errorBoundary(SignleTextSettingContent);