plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
201 lines (200 loc) • 8.49 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const prop_types_1 = __importDefault(require("prop-types"));
const antd_1 = require("antd");
const i18next_1 = __importDefault(require("i18next"));
const flex_1 = require("../../flex");
const AnimationList_1 = __importDefault(require("./AnimationList"));
const AnimationModal_1 = __importDefault(require("./AnimationModal"));
const Icon_1 = __importDefault(require("../../icon/Icon"));
const Scrollbar_1 = __importDefault(require("../../common/Scrollbar"));
const initialAnimation = {
type: 'none',
loop: true,
autoplay: true,
delay: 100,
duration: 1000,
};
class Animations extends react_1.Component {
constructor() {
super(...arguments);
this.state = {
animation: initialAnimation,
visible: false,
validateTitle: {
validateStatus: '',
help: '',
},
current: 'add',
};
this.handlers = {
onOk: () => {
if (this.state.validateTitle.validateStatus === 'error') {
return;
}
if (!this.state.animation.title) {
this.setState({
validateTitle: this.handlers.onValid(),
});
return;
}
if (!this.state.animation.type) {
this.setState((prevState) => ({
animation: Object.assign(Object.assign({}, prevState.animation), { type: 'none' }),
}));
}
if (Object.keys(this.state.animation).length === 2) {
this.modalRef.validateFields((err, values) => {
Object.assign(this.state.animation, values.animation);
});
}
if (this.state.current === 'add') {
this.props.animations.push(this.state.animation);
}
else {
this.props.animations.splice(this.state.index, 1, this.state.animation);
}
this.setState({
visible: false,
animation: {},
}, () => {
this.props.onChangeAnimations(this.props.animations);
});
},
onCancel: () => {
this.setState({
visible: false,
animation: initialAnimation,
validateTitle: {
validateStatus: '',
help: '',
},
});
},
onAdd: () => {
this.setState({
visible: true,
animation: initialAnimation,
validateTitle: {
validateStatus: '',
help: '',
},
current: 'add',
});
},
onEdit: (animation, index) => {
this.setState({
visible: true,
animation,
validateTitle: {
validateStatus: '',
help: '',
},
current: 'modify',
index,
});
},
onDelete: (index) => {
this.props.animations.splice(index, 1);
this.props.onChangeAnimations(this.props.animations);
},
onClear: () => {
this.props.onChangeAnimations([]);
},
onChange: (props, changedValues, allValues) => {
const fields = changedValues[Object.keys(changedValues)[0]];
const field = Object.keys(fields)[0];
const isTitle = field === 'title';
if (isTitle) {
this.setState({
validateTitle: this.handlers.onValid(fields[field]),
});
}
this.setState({
animation: Object.assign(Object.assign({ title: this.state.animation.title }, initialAnimation), allValues[Object.keys(allValues)[0]]),
});
},
onValid: (value) => {
if (!value || !value.length) {
return {
validateStatus: 'error',
help: i18next_1.default.t('validation.enter-property', { arg: i18next_1.default.t('common.title') }),
};
}
const exist = this.props.animations.some((animation) => animation.title === value);
if (!exist) {
return {
validateStatus: 'success',
help: '',
};
}
return {
validateStatus: 'error',
help: i18next_1.default.t('validation.already-property', { arg: i18next_1.default.t('common.title') }),
};
},
};
}
render() {
const { animations } = this.props;
const { visible, animation, validateTitle } = this.state;
const { onOk, onCancel, onAdd, onEdit, onDelete, onClear, onChange, onValid } = this.handlers;
return (react_1.default.createElement(Scrollbar_1.default, null,
react_1.default.createElement(antd_1.Form, null,
react_1.default.createElement(flex_1.Flex, { flexDirection: "column" },
react_1.default.createElement(flex_1.Flex, { justifyContent: "flex-end", style: { padding: 8 } },
react_1.default.createElement(antd_1.Button, { className: "rde-action-btn", shape: "circle", onClick: onAdd },
react_1.default.createElement(Icon_1.default, { name: "plus" })),
react_1.default.createElement(antd_1.Button, { className: "rde-action-btn", shape: "circle", onClick: onClear },
react_1.default.createElement(Icon_1.default, { name: "times" })),
react_1.default.createElement(AnimationModal_1.default, { ref: (c) => {
this.modalRef = c;
}, validateTitle: validateTitle, visible: visible, onOk: onOk, animation: animation, onCancel: onCancel, onChange: onChange, onValid: onValid })),
react_1.default.createElement(AnimationList_1.default, { animations: animations, onEdit: onEdit, onDelete: onDelete })))));
}
}
Animations.propTypes = {
animations: prop_types_1.default.array,
onChangeAnimations: prop_types_1.default.func,
};
Animations.defaultProps = {
animations: [],
};
exports.default = Animations;