@elliemae/ds-wysiwygeditor
Version:
Ellie Mae - Dim Sum - WYSIWYG Editor
324 lines (305 loc) • 12.2 kB
JavaScript
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
import _extends from '@babel/runtime/helpers/esm/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import React, { useState } from 'react';
import DSButton from '@elliemae/ds-basic/Button';
import ArrowheadDown from '@elliemae/ds-icons/ArrowheadDown';
import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
import DSTooltip from '@elliemae/ds-basic/Tooltip';
import { fonts, sizes, sizesReal, colors } from '../constants.js';
import '@babel/runtime/helpers/esm/toConsumableArray';
import './colors.js';
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.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.createElement("option", {
value: color
});
};
var Colors = function Colors(_ref2) {
var className = _ref2.className,
tip = _ref2.tip;
return /*#__PURE__*/React.createElement(TippedSelect, {
className: className,
tip: tip
}, colors.map(function (color) {
return /*#__PURE__*/React.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(_ref3, ["className", "tip", "children", "onClick"]);
return /*#__PURE__*/React.createElement("div", {
className: "tooltip"
}, /*#__PURE__*/React.createElement(DSTooltip, {
interactionType: "hover",
title: tip,
delayClose: 20,
triggerComponent: /*#__PURE__*/React.createElement("button", _extends({
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.createElement("option", {
key: value,
value: value === 'normal' ? '' : value
}, options ? options[index] : null);
}) : _ref4$children;
return /*#__PURE__*/React.createElement("div", {
className: "tooltip"
}, /*#__PURE__*/React.createElement(DSTooltip, {
interactionType: "hover",
title: tip,
delayClose: 20,
triggerComponent: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.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.createElement(DSDropdownMenu, {
onClickOutsideMenu: onClickOutsideMenu,
options: options,
onSelectMenuItem: onSelectMenuItem,
onClose: onClose,
closeMenuOnItemSelection: closeMenuOnItemSelection,
isOpen: isOpen,
minWidth: minWidth,
maxWidth: maxWidth,
zIndex: zIndex,
preventOverflow: "scrollParent",
triggerComponent: /*#__PURE__*/React.createElement(DSButton, {
labelText: label,
buttonType: "text",
icon: /*#__PURE__*/React.createElement(ArrowheadDown, null)
})
});
};
var Divider = function Divider() {
return /*#__PURE__*/React.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 = useState(false),
_useState2 = _slicedToArray(_useState, 2),
showHTML = _useState2[0],
setShowHTML = _useState2[1];
var handleShowHTML = function handleShowHTML(e) {
e.preventDefault();
setShowHTML(!showHTML);
onShowHTML();
};
return /*#__PURE__*/React.createElement("div", {
id: id,
className: "ds-ql-custom-toolbar"
}, (!HEADER || !FONT || !FONT_SIZE) && /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, !HEADER && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TippedSelect, {
className: "ql-header",
tip: "Header",
values: ['', '1', '2', '3', '4', '5', '6']
}), /*#__PURE__*/React.createElement(Divider, null)), !FONT && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TippedSelect, {
className: "ql-font",
defaultValue: "sans-serif",
options: fonts,
tip: "Font",
values: optionsToValues(fonts)
}), /*#__PURE__*/React.createElement(Divider, null)), !FONT_SIZE && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TippedSelect, {
className: "ql-size",
options: sizes,
tip: "Font Size",
values: optionsToValues(sizesReal)
}), /*#__PURE__*/React.createElement(Divider, null))), (!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, !BOLD && /*#__PURE__*/React.createElement(TippedButton, {
className: "ql-bold",
tip: "Bold"
}), !ITALIC && /*#__PURE__*/React.createElement(TippedButton, {
className: "ql-italic",
tip: "Italic"
}), !UNDERLINE && /*#__PURE__*/React.createElement(TippedButton, {
className: "ql-underline",
tip: "Underline"
}), !STRIKE && /*#__PURE__*/React.createElement(TippedButton, {
className: "ql-strike",
tip: "Strike"
})), (!SUB || !SUPER) && /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, !SUB && /*#__PURE__*/React.createElement(TippedButton, {
className: "ql-script",
tip: "Sub",
value: "sub"
}), !SUPER && /*#__PURE__*/React.createElement(TippedButton, {
className: "ql-script",
tip: "Super",
value: "super"
}), /*#__PURE__*/React.createElement(Divider, null)), (!ORDERED_LIST || !BULLET_LIST) && /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, !ORDERED_LIST && /*#__PURE__*/React.createElement(TippedButton, {
className: "ql-list",
tip: "Ordered List",
value: "ordered"
}), !BULLET_LIST && /*#__PURE__*/React.createElement(TippedButton, {
className: "ql-list",
tip: "Bullet List",
value: "bullet"
})), (!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, !INDENT_MINUS_ONE && /*#__PURE__*/React.createElement(TippedButton, {
className: "ql-indent",
tip: "Indent -1",
value: "-1"
}), !INDENT_PLUS_ONE && /*#__PURE__*/React.createElement(TippedButton, {
className: "ql-indent",
tip: "Indent +1",
value: "+1"
})), !ALIGN && /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, /*#__PURE__*/React.createElement(TippedSelect, {
className: "ql-align",
tip: "Align"
}), /*#__PURE__*/React.createElement(Divider, null)), (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, !FONT_COLOR && /*#__PURE__*/React.createElement(Colors, {
className: "ql-color",
tip: "Font Color"
}), !FONT_BACKGROUND_COLOR && /*#__PURE__*/React.createElement(Colors, {
className: "ql-background",
tip: "Font Background Color"
}), /*#__PURE__*/React.createElement(Divider, null)), (!HYPERLINK || !IMAGE) && /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, !HYPERLINK && /*#__PURE__*/React.createElement(TippedButton, {
className: "ql-link",
tip: "Hyperlink: Select Text First"
}), !IMAGE && /*#__PURE__*/React.createElement(TippedButton, {
className: "ql-image",
tip: "Insert Image"
}), /*#__PURE__*/React.createElement(Divider, null)), !CLEAR_FORMAT && /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, /*#__PURE__*/React.createElement(TippedButton, {
className: "ql-clean",
tip: "Clear Format (Select Text)"
})), !SHOW_HTML && /*#__PURE__*/React.createElement("span", {
className: "ql-formats"
}, /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.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.createElement("span", {
className: "ql-formats"
}, /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(TippedButton, {
className: "ql-customFields",
tip: "Insert Custom Field"
}, /*#__PURE__*/React.createElement(CustomFields, null))), customItems && /*#__PURE__*/React.createElement("span", {
style: {
display: 'inline-flex'
}
}, customItems.map(function (Item) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Item, null));
})));
};
export { CustomDropdown, CustomToolbar, TippedButton, TippedSelect };
//# sourceMappingURL=CustomToolbar.js.map