@elliemae/ds-wysiwygeditor
Version:
Ellie Mae - Dim Sum - WYSIWYG Editor
342 lines (319 loc) • 14.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _extends = require('@babel/runtime/helpers/extends');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var React = require('react');
var DSButton = require('@elliemae/ds-basic/Button');
var ArrowheadDown = require('@elliemae/ds-icons/ArrowheadDown');
var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
var DSTooltip = require('@elliemae/ds-basic/Tooltip');
var constants = require('../constants.js');
require('@babel/runtime/helpers/toConsumableArray');
require('./colors.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
var ArrowheadDown__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadDown);
var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu);
var DSTooltip__default = /*#__PURE__*/_interopDefaultLegacy(DSTooltip);
var persist = function persist(e) {
return e.persist();
};
var optionsToValues = function optionsToValues(options) {
return options.map(function (opt) {
return opt.toLowerCase().replace(' ', '-');
});
}; // Stateless Components -----------------------------------------
var CustomFields = function CustomFields() {
return /*#__PURE__*/React__default['default'].createElement("span", null, "\u1438\u1433");
}; // eslint-disable-line react/jsx-one-expression-per-line
var Color = function Color(_ref) {
var color = _ref.color;
return /*#__PURE__*/React__default['default'].createElement("option", {
value: color
});
};
var Colors = function Colors(_ref2) {
var className = _ref2.className,
tip = _ref2.tip;
return /*#__PURE__*/React__default['default'].createElement(TippedSelect, {
className: className,
tip: tip
}, constants.colors.map(function (color) {
return /*#__PURE__*/React__default['default'].createElement(Color, {
key: color,
color: color
});
}));
};
var TippedButton = function TippedButton(_ref3) {
var className = _ref3.className,
tip = _ref3.tip,
children = _ref3.children,
_ref3$onClick = _ref3.onClick,
_onClick = _ref3$onClick === void 0 ? function () {
return null;
} : _ref3$onClick,
rest = _objectWithoutProperties__default['default'](_ref3, ["className", "tip", "children", "onClick"]);
return /*#__PURE__*/React__default['default'].createElement("div", {
className: "tooltip"
}, /*#__PURE__*/React__default['default'].createElement(DSTooltip__default['default'], {
interactionType: "hover",
title: tip,
delayClose: 20,
triggerComponent: /*#__PURE__*/React__default['default'].createElement("button", _extends__default['default']({
className: className,
onClick: function onClick(e) {
e.preventDefault();
_onClick(e);
}
}, rest), children)
}));
};
var TippedSelect = function TippedSelect(_ref4) {
var className = _ref4.className,
options = _ref4.options,
tip = _ref4.tip,
_ref4$defaultValue = _ref4.defaultValue,
defaultValue = _ref4$defaultValue === void 0 ? '' : _ref4$defaultValue,
_ref4$onChange = _ref4.onChange,
_onChange = _ref4$onChange === void 0 ? function () {
return null;
} : _ref4$onChange,
values = _ref4.values,
_ref4$children = _ref4.children,
children = _ref4$children === void 0 ? values && values.map(function (value, index) {
return /*#__PURE__*/React__default['default'].createElement("option", {
key: value,
value: value === 'normal' ? '' : value
}, options ? options[index] : null);
}) : _ref4$children;
return /*#__PURE__*/React__default['default'].createElement("div", {
className: "tooltip"
}, /*#__PURE__*/React__default['default'].createElement(DSTooltip__default['default'], {
interactionType: "hover",
title: tip,
delayClose: 20,
triggerComponent: /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("select", {
className: className,
defaultValue: defaultValue,
onChange: function onChange(e) {
persist(e);
_onChange(e);
}
}, children))
}));
};
var CustomDropdown = function CustomDropdown(_ref5) {
var options = _ref5.options,
label = _ref5.label,
_ref5$onSelectMenuIte = _ref5.onSelectMenuItem,
onSelectMenuItem = _ref5$onSelectMenuIte === void 0 ? function () {
return null;
} : _ref5$onSelectMenuIte,
_ref5$onClickOutsideM = _ref5.onClickOutsideMenu,
onClickOutsideMenu = _ref5$onClickOutsideM === void 0 ? function () {
return null;
} : _ref5$onClickOutsideM,
_ref5$onClose = _ref5.onClose,
onClose = _ref5$onClose === void 0 ? function () {
return null;
} : _ref5$onClose,
closeMenuOnItemSelection = _ref5.closeMenuOnItemSelection,
isOpen = _ref5.isOpen,
minWidth = _ref5.minWidth,
maxWidth = _ref5.maxWidth,
_ref5$zIndex = _ref5.zIndex,
zIndex = _ref5$zIndex === void 0 ? 10 : _ref5$zIndex;
return /*#__PURE__*/React__default['default'].createElement(DSDropdownMenu__default['default'], {
onClickOutsideMenu: onClickOutsideMenu,
options: options,
onSelectMenuItem: onSelectMenuItem,
onClose: onClose,
closeMenuOnItemSelection: closeMenuOnItemSelection,
isOpen: isOpen,
minWidth: minWidth,
maxWidth: maxWidth,
zIndex: zIndex,
preventOverflow: "scrollParent",
triggerComponent: /*#__PURE__*/React__default['default'].createElement(DSButton__default['default'], {
labelText: label,
buttonType: "text",
icon: /*#__PURE__*/React__default['default'].createElement(ArrowheadDown__default['default'], null)
})
});
};
var Divider = function Divider() {
return /*#__PURE__*/React__default['default'].createElement("div", {
style: {
height: '21px',
width: '1px',
margin: '0 10px',
padding: '0',
borderLeft: '1px solid #bbb',
display: 'inline-block'
}
});
};
var CustomToolbar = function CustomToolbar(_ref6) {
var customFields = _ref6.customFields,
_ref6$customItems = _ref6.customItems,
customItems = _ref6$customItems === void 0 ? [] : _ref6$customItems,
_ref6$hideItems = _ref6.hideItems,
hideItems = _ref6$hideItems === void 0 ? {} : _ref6$hideItems,
_ref6$onShowHTML = _ref6.onShowHTML,
onShowHTML = _ref6$onShowHTML === void 0 ? function () {} : _ref6$onShowHTML,
_ref6$id = _ref6.id,
id = _ref6$id === void 0 ? 'toolbar' : _ref6$id;
var HEADER = hideItems.HEADER,
FONT = hideItems.FONT,
FONT_SIZE = hideItems.FONT_SIZE,
BOLD = hideItems.BOLD,
ITALIC = hideItems.ITALIC,
UNDERLINE = hideItems.UNDERLINE,
STRIKE = hideItems.STRIKE,
SUB = hideItems.SUB,
SUPER = hideItems.SUPER,
ORDERED_LIST = hideItems.ORDERED_LIST,
BULLET_LIST = hideItems.BULLET_LIST,
INDENT_MINUS_ONE = hideItems.INDENT_MINUS_ONE,
INDENT_PLUS_ONE = hideItems.INDENT_PLUS_ONE,
ALIGN = hideItems.ALIGN,
FONT_COLOR = hideItems.FONT_COLOR,
FONT_BACKGROUND_COLOR = hideItems.FONT_BACKGROUND_COLOR,
HYPERLINK = hideItems.HYPERLINK,
IMAGE = hideItems.IMAGE,
CLEAR_FORMAT = hideItems.CLEAR_FORMAT,
SHOW_HTML = hideItems.SHOW_HTML;
var _useState = React.useState(false),
_useState2 = _slicedToArray__default['default'](_useState, 2),
showHTML = _useState2[0],
setShowHTML = _useState2[1];
var handleShowHTML = function handleShowHTML(e) {
e.preventDefault();
setShowHTML(!showHTML);
onShowHTML();
};
return /*#__PURE__*/React__default['default'].createElement("div", {
id: id,
className: "ds-ql-custom-toolbar"
}, (!HEADER || !FONT || !FONT_SIZE) && /*#__PURE__*/React__default['default'].createElement("span", {
className: "ql-formats"
}, !HEADER && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(TippedSelect, {
className: "ql-header",
tip: "Header",
values: ['', '1', '2', '3', '4', '5', '6']
}), /*#__PURE__*/React__default['default'].createElement(Divider, null)), !FONT && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(TippedSelect, {
className: "ql-font",
defaultValue: "sans-serif",
options: constants.fonts,
tip: "Font",
values: optionsToValues(constants.fonts)
}), /*#__PURE__*/React__default['default'].createElement(Divider, null)), !FONT_SIZE && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(TippedSelect, {
className: "ql-size",
options: constants.sizes,
tip: "Font Size",
values: optionsToValues(constants.sizesReal)
}), /*#__PURE__*/React__default['default'].createElement(Divider, null))), (!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && /*#__PURE__*/React__default['default'].createElement("span", {
className: "ql-formats"
}, !BOLD && /*#__PURE__*/React__default['default'].createElement(TippedButton, {
className: "ql-bold",
tip: "Bold"
}), !ITALIC && /*#__PURE__*/React__default['default'].createElement(TippedButton, {
className: "ql-italic",
tip: "Italic"
}), !UNDERLINE && /*#__PURE__*/React__default['default'].createElement(TippedButton, {
className: "ql-underline",
tip: "Underline"
}), !STRIKE && /*#__PURE__*/React__default['default'].createElement(TippedButton, {
className: "ql-strike",
tip: "Strike"
})), (!SUB || !SUPER) && /*#__PURE__*/React__default['default'].createElement("span", {
className: "ql-formats"
}, !SUB && /*#__PURE__*/React__default['default'].createElement(TippedButton, {
className: "ql-script",
tip: "Sub",
value: "sub"
}), !SUPER && /*#__PURE__*/React__default['default'].createElement(TippedButton, {
className: "ql-script",
tip: "Super",
value: "super"
}), /*#__PURE__*/React__default['default'].createElement(Divider, null)), (!ORDERED_LIST || !BULLET_LIST) && /*#__PURE__*/React__default['default'].createElement("span", {
className: "ql-formats"
}, !ORDERED_LIST && /*#__PURE__*/React__default['default'].createElement(TippedButton, {
className: "ql-list",
tip: "Ordered List",
value: "ordered"
}), !BULLET_LIST && /*#__PURE__*/React__default['default'].createElement(TippedButton, {
className: "ql-list",
tip: "Bullet List",
value: "bullet"
})), (!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && /*#__PURE__*/React__default['default'].createElement("span", {
className: "ql-formats"
}, !INDENT_MINUS_ONE && /*#__PURE__*/React__default['default'].createElement(TippedButton, {
className: "ql-indent",
tip: "Indent -1",
value: "-1"
}), !INDENT_PLUS_ONE && /*#__PURE__*/React__default['default'].createElement(TippedButton, {
className: "ql-indent",
tip: "Indent +1",
value: "+1"
})), !ALIGN && /*#__PURE__*/React__default['default'].createElement("span", {
className: "ql-formats"
}, /*#__PURE__*/React__default['default'].createElement(TippedSelect, {
className: "ql-align",
tip: "Align"
}), /*#__PURE__*/React__default['default'].createElement(Divider, null)), (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /*#__PURE__*/React__default['default'].createElement("span", {
className: "ql-formats"
}, !FONT_COLOR && /*#__PURE__*/React__default['default'].createElement(Colors, {
className: "ql-color",
tip: "Font Color"
}), !FONT_BACKGROUND_COLOR && /*#__PURE__*/React__default['default'].createElement(Colors, {
className: "ql-background",
tip: "Font Background Color"
}), /*#__PURE__*/React__default['default'].createElement(Divider, null)), (!HYPERLINK || !IMAGE) && /*#__PURE__*/React__default['default'].createElement("span", {
className: "ql-formats"
}, !HYPERLINK && /*#__PURE__*/React__default['default'].createElement(TippedButton, {
className: "ql-link",
tip: "Hyperlink: Select Text First"
}), !IMAGE && /*#__PURE__*/React__default['default'].createElement(TippedButton, {
className: "ql-image",
tip: "Insert Image"
}), /*#__PURE__*/React__default['default'].createElement(Divider, null)), !CLEAR_FORMAT && /*#__PURE__*/React__default['default'].createElement("span", {
className: "ql-formats"
}, /*#__PURE__*/React__default['default'].createElement(TippedButton, {
className: "ql-clean",
tip: "Clear Format (Select Text)"
})), !SHOW_HTML && /*#__PURE__*/React__default['default'].createElement("span", {
className: "ql-formats"
}, /*#__PURE__*/React__default['default'].createElement(Divider, null), /*#__PURE__*/React__default['default'].createElement(TippedButton, {
style: {
width: 'fit-content',
color: '#1e79c2',
fontWeight: '500'
},
onClick: handleShowHTML,
tip: showHTML ? 'SHOW TEXT' : 'SHOW HTML',
className: "ql-customFields-html"
}, showHTML ? 'SHOW TEXT' : 'SHOW HTML')), customFields && /*#__PURE__*/React__default['default'].createElement("span", {
className: "ql-formats"
}, /*#__PURE__*/React__default['default'].createElement(Divider, null), /*#__PURE__*/React__default['default'].createElement(TippedButton, {
className: "ql-customFields",
tip: "Insert Custom Field"
}, /*#__PURE__*/React__default['default'].createElement(CustomFields, null))), customItems && /*#__PURE__*/React__default['default'].createElement("span", {
style: {
display: 'inline-flex'
}
}, customItems.map(function (Item) {
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Divider, null), /*#__PURE__*/React__default['default'].createElement(Item, null));
})));
};
exports.CustomDropdown = CustomDropdown;
exports.CustomToolbar = CustomToolbar;
exports.TippedButton = TippedButton;
exports.TippedSelect = TippedSelect;
//# sourceMappingURL=CustomToolbar.js.map