cloudhub-components
Version:
Various components to use in react projects
415 lines (379 loc) • 15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactDraftWysiwyg = require("react-draft-wysiwyg");
var _draftJs = require("draft-js");
var _draftjsToHtml = _interopRequireDefault(require("draftjs-to-html"));
var _htmlToDraftjs = _interopRequireDefault(require("html-to-draftjs"));
require("react-draft-wysiwyg/dist/react-draft-wysiwyg.css");
var _styles = require("@material-ui/core/styles");
var _EditorToolbar = require("./EditorToolbar");
var _excluded = ["className", "value", "onChange"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign || 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); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
// ----------------------------------------------------------------------
var useStyles = (0, _styles.makeStyles)(function (theme) {
var isLight = theme.palette.mode === 'light';
var isRTL = theme.direction === 'rtl';
return {
root: {
borderRadius: theme.shape.borderRadius,
border: "solid 1px ".concat(theme.palette.grey[300]),
// Toggle
'& .toggle': {
border: 'none',
borderRadius: 6,
background: 'transparent',
'&.rdw-option-disabled': {
opacity: theme.palette.action.disabledOpacity
},
'& img': {
width: 16,
height: 16,
filter: isLight ? 'none' : 'invert(100%)'
},
'&[aria-selected="true"]': {
boxShadow: 'none',
background: theme.palette.action.selected
},
'&:hover': {
boxShadow: 'none',
background: theme.palette.action.hover
}
},
// Dropdown
'& .dropdown': {
minWidth: 56,
borderRadius: 6,
boxShadow: 'none',
background: 'transparent',
border: "solid 1px ".concat(theme.palette.grey[300]),
'&:hover': {
boxShadow: 'none',
background: theme.palette.action.hover
},
'& .rdw-dropdown-selectedtext': {
color: theme.palette.text.primary
},
'& .rdw-dropdown-carettoopen': {
right: isRTL && '10%',
left: isRTL && 'auto',
borderTop: "solid 6px ".concat(theme.palette.text.primary)
},
'& .rdw-dropdown-carettoclose': {
borderBottom: "solid 6px ".concat(theme.palette.text.primary)
}
},
'& .dropdown__option': {
width: '100%',
border: 'none',
marginTop: theme.spacing(1),
padding: theme.spacing(1, 0),
boxShadow: theme.shadows['25'].z20,
borderRadius: theme.shape.borderRadius,
background: theme.palette.background.paper,
'& .rdw-dropdownoption-default': {
fontSize: 14,
minHeight: 'auto',
padding: theme.spacing(0.5, 2)
},
'& .rdw-dropdownoption-active': {
background: theme.palette.action.selected
},
'& .rdw-dropdownoption-highlighted': {
background: theme.palette.action.hover
}
},
// Popup
'& .popup': {
right: 0,
padding: 0,
left: 'auto',
border: 'none',
overflow: 'hidden',
boxShadow: theme.shadows['25'].z20,
borderRadius: theme.shape.borderRadius,
background: theme.palette.background.paper,
// Action
'& .rdw-link-modal-buttonsection, .rdw-embedded-modal-btn-section, .rdw-image-modal-btn-section': {
margin: 0,
display: 'flex',
marginTop: theme.spacing(2),
justifyContent: 'space-between',
'& button': {
margin: 0,
fontSize: 13,
border: 'none',
fontWeight: 'bold',
width: 'calc(50% - 4px)',
color: theme.palette.common.white,
background: theme.palette.primary.main,
borderRadius: theme.shape.borderRadius,
'&:disabled': {
color: theme.palette.action.disabled,
background: theme.palette.action.disabledBackground
},
'&:last-child': {
background: 'transparent',
color: theme.palette.text.primary
},
'&:hover': {
boxShadow: 'none'
},
'&:active': {
boxShadow: 'none'
}
}
},
// Input
'& input': {
height: 26,
fontSize: 14,
background: 'transparent',
padding: theme.spacing(0, 1.5),
color: theme.palette.text.primary,
borderRadius: theme.shape.borderRadius,
border: "solid 1px ".concat(theme.palette.grey[300])
}
},
// Popup Color Picker
'& .popup__colorpicker': {
padding: 0,
'& .rdw-colorpicker-modal-header': {
padding: theme.spacing(1),
background: theme.palette.grey['500_12'],
'& .rdw-colorpicker-modal-style-label': {
fontSize: 13,
padding: theme.spacing(0.75, 0),
color: theme.palette.text.secondary,
borderRadius: theme.shape.borderRadius,
fontWeight: theme.typography.fontWeightMedium
},
'& .rdw-colorpicker-modal-style-label-active': {
borderBottom: 'none',
boxShadow: theme.shadows['25'].z8,
color: theme.palette.text.primary,
background: theme.palette.common.white
}
},
'& .rdw-colorpicker-modal-options': {
margin: 0,
padding: theme.spacing(1.5)
},
'& .rdw-colorpicker-option': {
margin: 4,
width: 20,
height: 20,
minWidth: 20,
borderRadius: 6,
overflow: 'hidden',
position: 'relative',
'&:hover': {
boxShadow: 'none'
},
'&:before': {
zIndex: 9,
fontSize: 0,
width: '100%',
height: '100%',
display: 'flex',
borderRadius: 6,
content: '"\\2713"',
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
color: theme.palette.common.white,
fontWeight: theme.typography.fontWeightBold,
boxShadow: 'inset 0 0 3px 0 rgba(0,0,0,0.12)'
},
'&[aria-selected="true"]': {
boxShadow: 'none',
borderRadius: '50%',
'&:before': {
fontSize: 12
}
}
},
'& .rdw-colorpicker-cube': {
border: 'none'
}
},
// Popup Link
'& .popup__link': {
height: 'auto',
padding: theme.spacing(2),
'& .rdw-link-modal-label': {
fontSize: 13,
fontWeight: theme.typography.fontWeightMedium
},
'& .rdw-link-modal-input': {
marginTop: 4,
marginBottom: 12
},
'& .rdw-link-modal-target-option': {
display: 'flex',
marginBottom: 0,
alignItems: 'center',
'& > span': {
fontSize: 14,
marginLeft: theme.spacing(1)
}
}
},
// Popup Emoji
'& .popup__emoji': {
overflow: 'auto',
padding: theme.spacing(1)
},
// Popup Embedded
'& .popup__embedded': {
height: 'auto',
'& .rdw-embedded-modal-header': {
padding: theme.spacing(1),
background: theme.palette.grey['500_12'],
'& .rdw-embedded-modal-header-label': {
display: 'none'
},
'& .rdw-embedded-modal-header-option': {
fontSize: 13,
padding: theme.spacing(0.75, 0),
color: theme.palette.text.secondary,
borderRadius: theme.shape.borderRadius,
fontWeight: theme.typography.fontWeightMedium
}
},
'& .rdw-embedded-modal-link-section': {
padding: theme.spacing(2, 2, 0)
},
'& .rdw-embedded-modal-btn-section': {
padding: theme.spacing(0, 2, 2)
}
},
// Popup Image
'& .popup__image': {
padding: 0,
'& .rdw-image-modal-header': {
margin: 0,
zIndex: 999,
fontSize: 13,
padding: theme.spacing(1),
background: theme.palette.grey[300],
fontWeight: theme.typography.fontWeightMedium,
'& .rdw-image-modal-header-option': {
position: 'relative',
padding: theme.spacing(0.75, 0)
},
'& .rdw-image-modal-header-label': {
margin: 0,
width: '100%',
height: '100%',
border: 'none',
position: 'absolute',
background: 'transparent'
},
'& .rdw-image-modal-header-label-highlighted': {
zIndex: -1,
boxShadow: theme.shadows['25'].z8,
background: theme.palette.common.white,
borderRadius: theme.shape.borderRadius
}
},
'& .rdw-image-modal-upload-option': {
width: 'auto',
margin: 0,
outline: 'none',
background: 'none',
padding: theme.spacing(2)
},
'& .rdw-image-modal-upload-option-label': {
fontSize: 13,
textAlign: 'center',
color: theme.palette.text.disabled,
borderRadius: theme.shape.borderRadius,
border: "dashed 1px ".concat(theme.palette.grey[300])
},
'& .rdw-image-modal-btn-section': {
padding: theme.spacing(0, 2, 2)
},
'& .rdw-image-modal-size, .rdw-image-modal-url-section': {
padding: theme.spacing(0, 2)
}
}
},
toolbar: {
border: 'none',
marginBottom: 0,
background: 'transparent',
borderBottom: "solid 1px ".concat(theme.palette.grey[300])
},
editor: {
minHeight: 200,
padding: theme.spacing(0, 2),
'& .public-DraftEditorPlaceholder-root': {
color: theme.palette.text.disabled
}
}
};
}); // ----------------------------------------------------------------------
DEditor.propTypes = {
className: _propTypes.default.string
};
function DEditor(_ref) {
var className = _ref.className,
value = _ref.value,
onChange = _ref.onChange,
other = _objectWithoutProperties(_ref, _excluded);
var classes = useStyles();
var _React$useState = _react.default.useState(_draftJs.EditorState.createEmpty()),
_React$useState2 = _slicedToArray(_React$useState, 2),
editorstate = _React$useState2[0],
setEditorState = _React$useState2[1];
var _React$useState3 = _react.default.useState(''),
_React$useState4 = _slicedToArray(_React$useState3, 2),
html = _React$useState4[0],
setHtml = _React$useState4[1];
var onEditorStateChange = function onEditorStateChange(editorState) {
setEditorState(editorState);
setHtml((0, _draftjsToHtml.default)((0, _draftJs.convertToRaw)(editorState.getCurrentContent())));
};
_react.default.useEffect(function () {
if (value && value !== html) {
setHtml(value);
var contentBlock = (0, _htmlToDraftjs.default)(value);
if (contentBlock) {
var contentState = _draftJs.ContentState.createFromBlockArray(contentBlock.contentBlocks);
var editorState = _draftJs.EditorState.createWithContent(contentState);
setEditorState(editorState);
}
}
}, [value]);
_react.default.useEffect(function () {
if (onChange) {
onChange(html);
}
}, [html]);
return /*#__PURE__*/_react.default.createElement(_reactDraftWysiwyg.Editor, _extends({
wrapperClassName: (0, _clsx.default)(classes.root, className),
toolbarClassName: classes.toolbar,
editorClassName: classes.editor,
toolbar: _EditorToolbar.editorToolbar,
placeholder: "Write something awesome...",
editorState: editorstate,
onEditorStateChange: onEditorStateChange
}, other));
}
var _default = DEditor;
exports.default = _default;