@fonixtree/magic-design 2.0.26 → 2.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/common/ImageLazy/index.js +171 -0
- package/es/common/Video/index.js +11 -3
- package/es/common/Video/index.less +11 -7
- package/es/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/IconSelectPicker/index.js +101 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/IconSelectPicker/index.less +60 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/images/CircleSVG.js +52 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/images/InitialSVG.js +51 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/images/SquareSVG.js +58 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/index.js +96 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/index.less +26 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/IconSelectPicker/index.js +133 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/IconSelectPicker/index.less +60 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/images/CJLDecimalSVG.js +46 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/images/DecimalSVG.js +46 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/images/LowerAlphaSVG.js +46 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/images/LowerRomanSVG.js +46 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/images/UpperAlphaSVG.js +46 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/images/UpperRomanSVG.js +46 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/index.js +105 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/index.less +26 -0
- package/es/core/Designer/ToolBarModal/ToolBtn/index.js +10 -0
- package/es/core/Designer/ToolBarModal/index.js +20 -8
- package/es/meta-comp/components/Text/formats/listStyleTypeStyle.js +58 -0
- package/es/meta-comp/components/Text/index.js +2 -0
- package/lib/common/ImageLazy/index.js +171 -0
- package/lib/common/Video/index.js +11 -3
- package/lib/common/Video/index.less +11 -7
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/IconSelectPicker/index.js +101 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/IconSelectPicker/index.less +60 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/images/CircleSVG.js +52 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/images/InitialSVG.js +51 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/images/SquareSVG.js +58 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/index.js +96 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/index.less +26 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/IconSelectPicker/index.js +133 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/IconSelectPicker/index.less +60 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/images/CJLDecimalSVG.js +46 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/images/DecimalSVG.js +46 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/images/LowerAlphaSVG.js +46 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/images/LowerRomanSVG.js +46 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/images/UpperAlphaSVG.js +46 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/images/UpperRomanSVG.js +46 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/index.js +105 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/index.less +26 -0
- package/lib/core/Designer/ToolBarModal/ToolBtn/index.js +10 -0
- package/lib/core/Designer/ToolBarModal/index.js +20 -8
- package/lib/meta-comp/components/Text/formats/listStyleTypeStyle.js +58 -0
- package/lib/meta-comp/components/Text/index.js +2 -0
- package/package.json +1 -1
|
@@ -150,6 +150,14 @@ function (_super) {
|
|
|
150
150
|
_this.props.quillRef.format('font-family', value);
|
|
151
151
|
} else if (type == 'text-decoration-style') {
|
|
152
152
|
_this.props.quillRef.format('text-decoration-style', value);
|
|
153
|
+
} else if (type == 'bullet') {
|
|
154
|
+
_this.props.quillRef.format('list-style-type', value);
|
|
155
|
+
|
|
156
|
+
_this.props.quillRef.format('list', 'bullet');
|
|
157
|
+
} else if (type == 'ordered') {
|
|
158
|
+
_this.props.quillRef.format('list-style-type', value);
|
|
159
|
+
|
|
160
|
+
_this.props.quillRef.format('list', 'ordered');
|
|
153
161
|
} else if (type == 'text-decoration-color') {
|
|
154
162
|
if (value) {
|
|
155
163
|
_this.props.quillRef.format('underline', true);
|
|
@@ -309,19 +317,23 @@ function (_super) {
|
|
|
309
317
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
310
318
|
className: "tool-item"
|
|
311
319
|
}, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
_this.onToolBtnClick('listUnOrder');
|
|
320
|
+
onChange: function onChange(value) {
|
|
321
|
+
_this.onToolBtnClick('bullet', value);
|
|
315
322
|
},
|
|
316
|
-
type: "
|
|
323
|
+
type: "bullet",
|
|
324
|
+
value: {
|
|
325
|
+
list: quillFormat['list-style-type']
|
|
326
|
+
}
|
|
317
327
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
318
328
|
className: "tool-item"
|
|
319
329
|
}, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
_this.onToolBtnClick('listOrder');
|
|
330
|
+
onChange: function onChange(value) {
|
|
331
|
+
_this.onToolBtnClick('ordered', value);
|
|
323
332
|
},
|
|
324
|
-
type: "
|
|
333
|
+
type: "ordered",
|
|
334
|
+
value: {
|
|
335
|
+
list: quillFormat['list-style-type']
|
|
336
|
+
}
|
|
325
337
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
326
338
|
className: "tooll-line"
|
|
327
339
|
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ListStyleTypeStyle = exports.ListStyleTypeAttributor = void 0;
|
|
7
|
+
|
|
8
|
+
var _quill = _interopRequireDefault(require("quill"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
|
|
12
|
+
var __extends = void 0 && (void 0).__extends || function () {
|
|
13
|
+
var _extendStatics = function extendStatics(d, b) {
|
|
14
|
+
_extendStatics = Object.setPrototypeOf || {
|
|
15
|
+
__proto__: []
|
|
16
|
+
} instanceof Array && function (d, b) {
|
|
17
|
+
d.__proto__ = b;
|
|
18
|
+
} || function (d, b) {
|
|
19
|
+
for (var p in b) {
|
|
20
|
+
if (b.hasOwnProperty(p)) d[p] = b[p];
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
return _extendStatics(d, b);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
return function (d, b) {
|
|
28
|
+
_extendStatics(d, b);
|
|
29
|
+
|
|
30
|
+
function __() {
|
|
31
|
+
this.constructor = d;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
35
|
+
};
|
|
36
|
+
}();
|
|
37
|
+
|
|
38
|
+
var Parchment = _quill["default"]["import"]('parchment');
|
|
39
|
+
|
|
40
|
+
var ListStyleTypeAttributor =
|
|
41
|
+
/** @class */
|
|
42
|
+
function (_super) {
|
|
43
|
+
__extends(ListStyleTypeAttributor, _super);
|
|
44
|
+
|
|
45
|
+
function ListStyleTypeAttributor() {
|
|
46
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
return ListStyleTypeAttributor;
|
|
50
|
+
}(Parchment.Attributor.Style);
|
|
51
|
+
|
|
52
|
+
exports.ListStyleTypeAttributor = ListStyleTypeAttributor;
|
|
53
|
+
var ListStyleTypeStyle = new ListStyleTypeAttributor('list-style-type', 'list-style-type', {
|
|
54
|
+
scope: Parchment.Scope.BLOCK
|
|
55
|
+
});
|
|
56
|
+
exports.ListStyleTypeStyle = ListStyleTypeStyle;
|
|
57
|
+
|
|
58
|
+
_quill["default"].register('formats/list-style-type', ListStyleTypeStyle, true);
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
12
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
+
|
|
14
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
|
+
|
|
18
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
|
+
|
|
20
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
|
+
|
|
22
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
23
|
+
|
|
24
|
+
var __extends = void 0 && (void 0).__extends || function () {
|
|
25
|
+
var _extendStatics = function extendStatics(d, b) {
|
|
26
|
+
_extendStatics = Object.setPrototypeOf || {
|
|
27
|
+
__proto__: []
|
|
28
|
+
} instanceof Array && function (d, b) {
|
|
29
|
+
d.__proto__ = b;
|
|
30
|
+
} || function (d, b) {
|
|
31
|
+
for (var p in b) {
|
|
32
|
+
if (b.hasOwnProperty(p)) d[p] = b[p];
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
return _extendStatics(d, b);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
return function (d, b) {
|
|
40
|
+
_extendStatics(d, b);
|
|
41
|
+
|
|
42
|
+
function __() {
|
|
43
|
+
this.constructor = d;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
47
|
+
};
|
|
48
|
+
}();
|
|
49
|
+
|
|
50
|
+
var __assign = void 0 && (void 0).__assign || function () {
|
|
51
|
+
__assign = Object.assign || function (t) {
|
|
52
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
53
|
+
s = arguments[i];
|
|
54
|
+
|
|
55
|
+
for (var p in s) {
|
|
56
|
+
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
return t;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
return __assign.apply(this, arguments);
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
67
|
+
var t = {};
|
|
68
|
+
|
|
69
|
+
for (var p in s) {
|
|
70
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
74
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
75
|
+
}
|
|
76
|
+
return t;
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
// import styles from './index.less';
|
|
80
|
+
var ImageLazy =
|
|
81
|
+
/** @class */
|
|
82
|
+
function (_super) {
|
|
83
|
+
__extends(ImageLazy, _super);
|
|
84
|
+
|
|
85
|
+
function ImageLazy() {
|
|
86
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
87
|
+
|
|
88
|
+
_this.state = {
|
|
89
|
+
show: false
|
|
90
|
+
};
|
|
91
|
+
_this.imageRef = /*#__PURE__*/_react["default"].createRef();
|
|
92
|
+
_this.intersectionObserver = null;
|
|
93
|
+
return _this;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
ImageLazy.prototype.componentDidMount = function () {
|
|
97
|
+
var _this = this;
|
|
98
|
+
|
|
99
|
+
var _a;
|
|
100
|
+
|
|
101
|
+
this.intersectionObserver = new IntersectionObserver(function (entries) {
|
|
102
|
+
if (entries[0].isIntersecting) {
|
|
103
|
+
_this.setState({
|
|
104
|
+
show: true
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
}, {
|
|
108
|
+
root: (_a = this.props) === null || _a === void 0 ? void 0 : _a.rootContainer(),
|
|
109
|
+
// threshold: 0.8,
|
|
110
|
+
rootMargin: '0px 0px 100px 0px'
|
|
111
|
+
});
|
|
112
|
+
this.intersectionObserver.observe(this.imageRef.current);
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
ImageLazy.prototype.componentWillUnmount = function () {
|
|
116
|
+
this.intersectionObserver.disconnect(this.imageRef.current);
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
ImageLazy.prototype.render = function () {
|
|
120
|
+
var _this = this;
|
|
121
|
+
|
|
122
|
+
var _a = this.props,
|
|
123
|
+
root = _a.root,
|
|
124
|
+
_b = _a.lazy,
|
|
125
|
+
lazy = _b === void 0 ? true : _b,
|
|
126
|
+
src = _a.src,
|
|
127
|
+
onLoadFunc = _a.onLoadFunc,
|
|
128
|
+
style = _a.style,
|
|
129
|
+
className = _a.className,
|
|
130
|
+
rest = __rest(_a, ["root", "lazy", "src", "onLoadFunc", "style", "className"]);
|
|
131
|
+
|
|
132
|
+
var show = this.state.show;
|
|
133
|
+
var isShow = lazy ? show : true;
|
|
134
|
+
return /*#__PURE__*/_react["default"].createElement("img", _extends({
|
|
135
|
+
ref: this.imageRef,
|
|
136
|
+
alt: "",
|
|
137
|
+
className: (0, _classnames["default"])(className),
|
|
138
|
+
onLoad: function onLoad() {
|
|
139
|
+
if (onLoadFunc) {
|
|
140
|
+
onLoadFunc(_this.imageRef.current.clientWidth);
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
src: isShow ? src : '',
|
|
144
|
+
style: __assign({
|
|
145
|
+
opacity: ~~isShow
|
|
146
|
+
}, style)
|
|
147
|
+
}, rest));
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
return ImageLazy;
|
|
151
|
+
}(_react.Component);
|
|
152
|
+
|
|
153
|
+
ImageLazy.propTypes = {
|
|
154
|
+
/** 外层容器 */
|
|
155
|
+
rootContainer: _propTypes["default"].func,
|
|
156
|
+
|
|
157
|
+
/** src */
|
|
158
|
+
src: _propTypes["default"].string,
|
|
159
|
+
|
|
160
|
+
/** 懒加载 */
|
|
161
|
+
lazy: _propTypes["default"].bool
|
|
162
|
+
};
|
|
163
|
+
ImageLazy.defaultProps = {
|
|
164
|
+
rootContainer: function rootContainer() {
|
|
165
|
+
return null;
|
|
166
|
+
},
|
|
167
|
+
lazy: true,
|
|
168
|
+
src: ''
|
|
169
|
+
};
|
|
170
|
+
var _default = ImageLazy;
|
|
171
|
+
exports["default"] = _default;
|
|
@@ -203,6 +203,8 @@ var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
|
|
|
203
203
|
};
|
|
204
204
|
}
|
|
205
205
|
};
|
|
206
|
+
/* eslint-disable @typescript-eslint/no-unused-expressions */
|
|
207
|
+
|
|
206
208
|
|
|
207
209
|
/** 检查youtube依赖包 */
|
|
208
210
|
var checkYoutuVIdeo = function checkYoutuVIdeo() {
|
|
@@ -587,6 +589,7 @@ function (_super) {
|
|
|
587
589
|
/** YouTube播放器 */
|
|
588
590
|
|
|
589
591
|
_this.ytPlayer = null;
|
|
592
|
+
_this.timer = null;
|
|
590
593
|
/** 创建视频弹框显示 */
|
|
591
594
|
|
|
592
595
|
_this.createVideoModal = function (videoId) {
|
|
@@ -714,7 +717,11 @@ function (_super) {
|
|
|
714
717
|
}
|
|
715
718
|
|
|
716
719
|
Video.prototype.componentDidMount = function () {
|
|
717
|
-
this.getInit
|
|
720
|
+
this.timer = setTimeout(this.getInit, 1000);
|
|
721
|
+
};
|
|
722
|
+
|
|
723
|
+
Video.prototype.componentWillUnmount = function () {
|
|
724
|
+
this.timer && clearTimeout(this.timer);
|
|
718
725
|
};
|
|
719
726
|
|
|
720
727
|
Video.prototype.render = function () {
|
|
@@ -727,8 +734,9 @@ function (_super) {
|
|
|
727
734
|
}, opts.source ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
728
735
|
className: "video-wrap",
|
|
729
736
|
id: 'video' + videoId
|
|
730
|
-
}) : null, !play && /*#__PURE__*/_react["default"].createElement("
|
|
731
|
-
className: "cover-
|
|
737
|
+
}) : null, !play && opts.cover && /*#__PURE__*/_react["default"].createElement("img", {
|
|
738
|
+
className: "video-cover-img",
|
|
739
|
+
src: opts.cover
|
|
732
740
|
}));
|
|
733
741
|
};
|
|
734
742
|
|
|
@@ -3,17 +3,21 @@
|
|
|
3
3
|
height: 100%;
|
|
4
4
|
background-image: linear-gradient(0, rgba(0, 0, 0, .2), rgba(0, 0, 0, .1), rgba(0, 0, 0, .2));
|
|
5
5
|
|
|
6
|
-
.prism-player .prism-cover {
|
|
7
|
-
z-index: 0;
|
|
8
|
-
}
|
|
9
6
|
|
|
10
|
-
.cover-
|
|
7
|
+
.video-cover-img {
|
|
11
8
|
position: absolute;
|
|
12
|
-
|
|
9
|
+
top: 0;
|
|
13
10
|
right: 0;
|
|
11
|
+
left: 0;
|
|
14
12
|
bottom: 0;
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
object-fit: cover;
|
|
14
|
+
width: 100%;
|
|
15
|
+
height: 100%;
|
|
16
|
+
z-index: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.prism-player .prism-cover {
|
|
20
|
+
z-index: 0;
|
|
17
21
|
}
|
|
18
22
|
|
|
19
23
|
.video-wrap {
|
package/lib/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/IconSelectPicker/index.js
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
+
|
|
12
|
+
var _CircleSVG = _interopRequireDefault(require("../images/CircleSVG"));
|
|
13
|
+
|
|
14
|
+
var _InitialSVG = _interopRequireDefault(require("../images/InitialSVG"));
|
|
15
|
+
|
|
16
|
+
var _SquareSVG = _interopRequireDefault(require("../images/SquareSVG"));
|
|
17
|
+
|
|
18
|
+
require("./index.less");
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
21
|
+
|
|
22
|
+
var __extends = void 0 && (void 0).__extends || function () {
|
|
23
|
+
var _extendStatics = function extendStatics(d, b) {
|
|
24
|
+
_extendStatics = Object.setPrototypeOf || {
|
|
25
|
+
__proto__: []
|
|
26
|
+
} instanceof Array && function (d, b) {
|
|
27
|
+
d.__proto__ = b;
|
|
28
|
+
} || function (d, b) {
|
|
29
|
+
for (var p in b) {
|
|
30
|
+
if (b.hasOwnProperty(p)) d[p] = b[p];
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
return _extendStatics(d, b);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
return function (d, b) {
|
|
38
|
+
_extendStatics(d, b);
|
|
39
|
+
|
|
40
|
+
function __() {
|
|
41
|
+
this.constructor = d;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
45
|
+
};
|
|
46
|
+
}();
|
|
47
|
+
|
|
48
|
+
var IconSelectPicker =
|
|
49
|
+
/** @class */
|
|
50
|
+
function (_super) {
|
|
51
|
+
__extends(IconSelectPicker, _super);
|
|
52
|
+
|
|
53
|
+
function IconSelectPicker() {
|
|
54
|
+
return _super !== null && _super.apply(this, arguments) || this;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
IconSelectPicker.prototype.render = function () {
|
|
58
|
+
var _a = this.props,
|
|
59
|
+
visibility = _a.visibility,
|
|
60
|
+
value = _a.value,
|
|
61
|
+
_onChange = _a.onChange;
|
|
62
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
63
|
+
className: "align-select-picker-panel"
|
|
64
|
+
}, visibility && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
65
|
+
className: "panel-bg"
|
|
66
|
+
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
67
|
+
className: "select-modal-content"
|
|
68
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
69
|
+
className: "select-content-row"
|
|
70
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
71
|
+
className: (0, _classnames["default"])('select-item', {
|
|
72
|
+
active: value == 'initial'
|
|
73
|
+
})
|
|
74
|
+
}, /*#__PURE__*/_react["default"].createElement(_InitialSVG["default"], {
|
|
75
|
+
onChange: function onChange() {
|
|
76
|
+
return _onChange('initial');
|
|
77
|
+
}
|
|
78
|
+
})), /*#__PURE__*/_react["default"].createElement("span", {
|
|
79
|
+
className: (0, _classnames["default"])('select-item', {
|
|
80
|
+
active: value == 'circle'
|
|
81
|
+
})
|
|
82
|
+
}, /*#__PURE__*/_react["default"].createElement(_CircleSVG["default"], {
|
|
83
|
+
onChange: function onChange() {
|
|
84
|
+
return _onChange('circle');
|
|
85
|
+
}
|
|
86
|
+
})), /*#__PURE__*/_react["default"].createElement("span", {
|
|
87
|
+
className: (0, _classnames["default"])('select-item', {
|
|
88
|
+
active: value == 'square'
|
|
89
|
+
})
|
|
90
|
+
}, /*#__PURE__*/_react["default"].createElement(_SquareSVG["default"], {
|
|
91
|
+
onChange: function onChange() {
|
|
92
|
+
return _onChange('square');
|
|
93
|
+
}
|
|
94
|
+
}))))));
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
return IconSelectPicker;
|
|
98
|
+
}(_react["default"].Component);
|
|
99
|
+
|
|
100
|
+
var _default = IconSelectPicker;
|
|
101
|
+
exports["default"] = _default;
|
package/lib/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/IconSelectPicker/index.less
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
.align-select-picker-panel {
|
|
2
|
+
z-index: 999;
|
|
3
|
+
position: absolute;
|
|
4
|
+
top: 100%;
|
|
5
|
+
left: 0;
|
|
6
|
+
|
|
7
|
+
.panel-bg {
|
|
8
|
+
position: fixed;
|
|
9
|
+
z-index: 0;
|
|
10
|
+
top: 0;
|
|
11
|
+
left: 0;
|
|
12
|
+
right: 0;
|
|
13
|
+
bottom: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.select-modal-content {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
padding: 5px;
|
|
20
|
+
background-color: #fff;
|
|
21
|
+
border: 1px solid #E7E9E8;
|
|
22
|
+
box-shadow: 0 8px 16px 4px hsla(0, 0%, 0%, 0.04);
|
|
23
|
+
color: #262626;
|
|
24
|
+
border-radius: 6px;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
|
|
27
|
+
.select-content-row {
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.select-item {
|
|
33
|
+
width: 26px;
|
|
34
|
+
height: 26px;
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
justify-content: center;
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
border-radius: 6px;
|
|
40
|
+
padding: 0;
|
|
41
|
+
border: none;
|
|
42
|
+
transition: .2s all linear;
|
|
43
|
+
position: relative;
|
|
44
|
+
margin: 0 5px;
|
|
45
|
+
|
|
46
|
+
&:hover {
|
|
47
|
+
background: #f8f8f8;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&.active {
|
|
51
|
+
background: #E7E9E8;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
svg {
|
|
55
|
+
height: 18px;
|
|
56
|
+
height: 18px;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
|
|
12
|
+
var _default = function _default(_a) {
|
|
13
|
+
var onChange = _a.onChange;
|
|
14
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
15
|
+
fill: "none",
|
|
16
|
+
onClick: onChange,
|
|
17
|
+
viewBox: "0 0 16 16",
|
|
18
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
19
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
20
|
+
d: "M5.5 4H13.5",
|
|
21
|
+
stroke: "#232F46",
|
|
22
|
+
strokeLinecap: "round",
|
|
23
|
+
strokeLinejoin: "round",
|
|
24
|
+
strokeWidth: "1.1"
|
|
25
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
26
|
+
d: "M5.5 8H13.5",
|
|
27
|
+
stroke: "#232F46",
|
|
28
|
+
strokeLinecap: "round",
|
|
29
|
+
strokeLinejoin: "round",
|
|
30
|
+
strokeWidth: "1.1"
|
|
31
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
32
|
+
d: "M5.5 12H13.5",
|
|
33
|
+
stroke: "#232F46",
|
|
34
|
+
strokeLinecap: "round",
|
|
35
|
+
strokeLinejoin: "round",
|
|
36
|
+
strokeWidth: "1.1"
|
|
37
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
38
|
+
d: "M2.75 5.1C3.35751 5.1 3.85 4.60751 3.85 4C3.85 3.39249 3.35751 2.9 2.75 2.9C2.14249 2.9 1.65 3.39249 1.65 4C1.65 4.60751 2.14249 5.1 2.75 5.1Z",
|
|
39
|
+
stroke: "#232F46",
|
|
40
|
+
strokeWidth: "0.7"
|
|
41
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
42
|
+
d: "M2.75 9.1C3.35751 9.1 3.85 8.60751 3.85 8C3.85 7.39249 3.35751 6.9 2.75 6.9C2.14249 6.9 1.65 7.39249 1.65 8C1.65 8.60751 2.14249 9.1 2.75 9.1Z",
|
|
43
|
+
stroke: "#232F46",
|
|
44
|
+
strokeWidth: "0.7"
|
|
45
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
46
|
+
d: "M2.75 13.1C3.35751 13.1 3.85 12.6075 3.85 12C3.85 11.3925 3.35751 10.9 2.75 10.9C2.14249 10.9 1.65 11.3925 1.65 12C1.65 12.6075 2.14249 13.1 2.75 13.1Z",
|
|
47
|
+
stroke: "#232F46",
|
|
48
|
+
strokeWidth: "0.7"
|
|
49
|
+
}));
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
|
|
12
|
+
var _default = function _default(_a) {
|
|
13
|
+
var onChange = _a.onChange;
|
|
14
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
15
|
+
fill: "none",
|
|
16
|
+
onClick: onChange,
|
|
17
|
+
viewBox: "0 0 16 16",
|
|
18
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
19
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
20
|
+
d: "M5.5 4H13.5",
|
|
21
|
+
stroke: "#232F46",
|
|
22
|
+
strokeLinecap: "round",
|
|
23
|
+
strokeLinejoin: "round",
|
|
24
|
+
strokeWidth: "1.1"
|
|
25
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
26
|
+
d: "M5.5 8H13.5",
|
|
27
|
+
stroke: "#232F46",
|
|
28
|
+
strokeLinecap: "round",
|
|
29
|
+
strokeLinejoin: "round",
|
|
30
|
+
strokeWidth: "1.1"
|
|
31
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
32
|
+
d: "M5.5 12H13.5",
|
|
33
|
+
stroke: "#232F46",
|
|
34
|
+
strokeLinecap: "round",
|
|
35
|
+
strokeLinejoin: "round",
|
|
36
|
+
strokeWidth: "1.1"
|
|
37
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
38
|
+
d: "M2.8 4C2.8 4.02761 2.77761 4.05 2.75 4.05C2.72239 4.05 2.7 4.02761 2.7 4C2.7 3.97239 2.72239 3.95 2.75 3.95C2.77761 3.95 2.8 3.97239 2.8 4Z",
|
|
39
|
+
fill: "#232F46",
|
|
40
|
+
stroke: "#232F46",
|
|
41
|
+
strokeWidth: "1.4"
|
|
42
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
43
|
+
d: "M2.75 8.75C3.16421 8.75 3.5 8.41421 3.5 8C3.5 7.58579 3.16421 7.25 2.75 7.25C2.33579 7.25 2 7.58579 2 8C2 8.41421 2.33579 8.75 2.75 8.75Z",
|
|
44
|
+
fill: "#232F46"
|
|
45
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
46
|
+
d: "M2.75 12.75C3.16421 12.75 3.5 12.4142 3.5 12C3.5 11.5858 3.16421 11.25 2.75 11.25C2.33579 11.25 2 11.5858 2 12C2 12.4142 2.33579 12.75 2.75 12.75Z",
|
|
47
|
+
fill: "#232F46"
|
|
48
|
+
}));
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
|
|
12
|
+
var _default = function _default(_a) {
|
|
13
|
+
var onChange = _a.onChange;
|
|
14
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
15
|
+
fill: "none",
|
|
16
|
+
onClick: onChange,
|
|
17
|
+
viewBox: "0 0 16 16",
|
|
18
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
19
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
20
|
+
d: "M6 4H13.5",
|
|
21
|
+
stroke: "#232F46",
|
|
22
|
+
strokeLinecap: "round",
|
|
23
|
+
strokeLinejoin: "round",
|
|
24
|
+
strokeWidth: "1.1"
|
|
25
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
26
|
+
d: "M6 8H13.5",
|
|
27
|
+
stroke: "#232F46",
|
|
28
|
+
strokeLinecap: "round",
|
|
29
|
+
strokeLinejoin: "round",
|
|
30
|
+
strokeWidth: "1.1"
|
|
31
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
32
|
+
d: "M6 12H13.5",
|
|
33
|
+
stroke: "#232F46",
|
|
34
|
+
strokeLinecap: "round",
|
|
35
|
+
strokeLinejoin: "round",
|
|
36
|
+
strokeWidth: "1.1"
|
|
37
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
38
|
+
d: "M2.28613 4H2.85756",
|
|
39
|
+
stroke: "#232F46",
|
|
40
|
+
strokeLinecap: "square",
|
|
41
|
+
strokeLinejoin: "round",
|
|
42
|
+
strokeWidth: "1.1"
|
|
43
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
44
|
+
d: "M2.28613 8H2.85756",
|
|
45
|
+
stroke: "#232F46",
|
|
46
|
+
strokeLinecap: "square",
|
|
47
|
+
strokeLinejoin: "round",
|
|
48
|
+
strokeWidth: "1.1"
|
|
49
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
50
|
+
d: "M2.28613 12H2.85756",
|
|
51
|
+
stroke: "#232F46",
|
|
52
|
+
strokeLinecap: "square",
|
|
53
|
+
strokeLinejoin: "round",
|
|
54
|
+
strokeWidth: "1.1"
|
|
55
|
+
}));
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
exports["default"] = _default;
|