@music-loopy/loops
Version:
A React component library for Music Loopy Applications and websites
96 lines • 5.67 kB
JavaScript
var _excluded = ["value", "onChange", "color", "rows", "placeholder"];
var _templateObject;
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
import React, { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';
import { EditorState, convertToRaw, convertFromRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
var RichTextToolbar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n \n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n min-height: ", "em;\n .rdw-editor-wrapper{\n display: flex;\n flex-wrap: wrap;\n overflow: scroll;\n width: 100%;\n max-width: 100%;\n }\n .public-DraftEditor-content{\n overflow-wrap: anywhere;\n }\n .rdw-editor-toolbar{\n background: ", ";\n border: none;\n transition: max-height 0.25s ease-in-out;\n max-height: 0vh;\n overflow: hidden;\n padding:0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n ", "\n }\n .rdw-option-wrapper {\n border: 1px solid #F1F1F1;\n padding: 10px;\n width: 2.5em;\n height: 2.5em;\n border-radius: 2px;\n margin: 0 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n background: white;\n text-transform: capitalize;\n}\n.rdw-block-dropdown {\n width: 110px;\n font-size: 14px;\n a{\n color: #2d3134;\n text-decoration: none;\n }\n \n}\n.rdw-dropdown-selectedtext{\n color: ", ";\n text-decoration: none;\n}\n.rdw-block-dropdown, .rdw-dropdownoption-default{\n font-size: 14px;\n color: ", ";\n}\n\n.rdw-editor-main{\n padding: 15px;\n min-height: 20vh;\n width: 100%;\n background: ", ";\n color: ", ";\n}\n"])), function (props) {
return props.rows * 1.5;
}, function (props) {
var _props$color;
return props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color = props.color) === null || _props$color === void 0 ? void 0 : _props$color.background) || 'primary'].color;
}, function (props) {
return props.isFocused && "\n min-height: 10vh;\n max-height: 50vh;\n padding: 0.5em;\n\n overflow: auto;\n ";
}, function (props) {
return props.theme.colors.darkGrey.color;
}, function (props) {
return props.theme.colors.darkGrey.color;
}, function (props) {
var _props$color2;
return props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color2 = props.color) === null || _props$color2 === void 0 ? void 0 : _props$color2.background) || 'primary'].color;
}, function (props) {
var _props$color3;
return props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color3 = props.color) === null || _props$color3 === void 0 ? void 0 : _props$color3.text) || 'darkGrey'].color;
});
var RichTextInput = function RichTextInput(_ref) {
var value = _ref.value,
onChange = _ref.onChange,
color = _ref.color,
rows = _ref.rows,
placeholder = _ref.placeholder,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
var _useState = useState(function () {
return value ? EditorState.createWithContent(convertFromRaw(JSON.parse(value))) : EditorState.createEmpty();
}),
editorState = _useState[0],
setEditorState = _useState[1];
var _useState2 = useState(false),
isFocused = _useState2[0],
setIsFocused = _useState2[1];
var handleEditorChange = function handleEditorChange(newEditorState) {
setEditorState(newEditorState);
onChange(JSON.stringify(convertToRaw(newEditorState.getCurrentContent())));
};
var handleEditorFocus = function handleEditorFocus() {
setIsFocused(true);
};
var handleEditorBlur = function handleEditorBlur() {
setIsFocused(false);
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RichTextToolbar, {
color: color,
isFocused: isFocused,
rows: rows
}, /*#__PURE__*/React.createElement(Editor, _extends({
onFocus: handleEditorFocus,
onBlur: handleEditorBlur,
editorState: editorState,
onEditorStateChange: handleEditorChange,
placeholder: placeholder,
toolbar: {
options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded', 'emoji', 'image', 'remove', 'history'],
inline: {
inDropdown: true
},
list: {
inDropdown: true
},
textAlign: {
inDropdown: true
},
link: {
inDropdown: true
},
history: {
inDropdown: true
},
fontFamily: {
options: ['Arial', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
className: undefined,
component: undefined,
dropdownClassName: undefined
},
fontSize: {
options: [10, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96],
className: undefined,
component: undefined,
dropdownClassName: undefined
}
}
}, props))));
};
export default RichTextInput;