@music-loopy/loops
Version:
A React component library for Music Loopy Applications and websites
149 lines • 8.74 kB
JavaScript
var _excluded = ["variant", "icon", "color", "label", "maxChars", "placeholder", "rows"];
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
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 styled from 'styled-components';
import PropTypes from 'prop-types';
import React, { useRef } from 'react';
import Icon from '../Icon';
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n border: 1px solid\n ", ";\n border-radius: 6px;\n background: ", ";\n padding: 0em;\n gap: 0.5em;\n position: relative;\n overflow: hidden;\n"])), function (props) {
var _props$color;
return props.isError ? props.theme.colors['danger'].color : props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color = props.color) === null || _props$color === void 0 ? void 0 : _props$color.border) || 'primary'].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;
});
var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0.5em;\n width: 10%;\n font-size: 1em;\n color: ", ";\n"])), 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.icon) || 'darkGrey'].color;
});
var StyledInput = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n border: none;\n outline: none;\n background: none;\n color: ", ";\n font-size: 1em;\n width: 100%;\n padding: 1em;\n white-space: pre-wrap; /* Preserve line breaks */\n min-height: ", "em;\n &.empty::before {\n content: attr(data-placeholder);\n color: hsl(0, 0%, 70%);\n position: absolute;\n left: 0.8em;\n }\n"])), function (props) {
var _props$color4;
return props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color4 = props.color) === null || _props$color4 === void 0 ? void 0 : _props$color4.text) || 'darkGrey'].color;
}, function (props) {
return props.rows * 1.5;
});
var HighlightDangerSpan = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (props) {
return props.theme.colors['danger'].color;
});
var CharCount = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n width: 10%;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: 0.5em 2em;\n font-size: 1em;\n color: ", ";\n"])), function (props) {
var _props$color5;
return props.theme.colors[(props === null || props === void 0 ? void 0 : (_props$color5 = props.color) === null || _props$color5 === void 0 ? void 0 : _props$color5.text) || 'darkGrey'].color;
});
var ErrorMessage = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n color: #d66a6a;\n margin-top: 0.5em;\n"])));
var FirstRow = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 5px;\n z-index: 0;\n font-size: 1em;\n flex-direction: row;\n background: hsl(\n from ", " h\n s calc(l - 5)\n );\n ", "\n"])), function (props) {
return props.theme.colors[props.background || 'primary'].color;
}, function (props) {
return props.isError && "\n background: hsl(\n from " + props.theme.colors['danger'].color + " h s calc(l - 5)\n );\n color: " + props.theme.colors['darkGrey'].color + ";\n ";
});
var Label = styled.label(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n width: 70%;\n color: ", ";\n font-size: 1em;\n"])), function (props) {
var _props$color6;
return props.theme.colors[((_props$color6 = props.color) === null || _props$color6 === void 0 ? void 0 : _props$color6.text) || 'darkGrey'].color;
});
var exists = function exists(icon) {
return icon && icon.name;
};
var TextArea = function TextArea(_ref) {
var _ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'dark' : _ref$variant,
icon = _ref.icon,
color = _ref.color,
label = _ref.label,
_ref$maxChars = _ref.maxChars,
maxChars = _ref$maxChars === void 0 ? 200 : _ref$maxChars,
placeholder = _ref.placeholder,
_ref$rows = _ref.rows,
rows = _ref$rows === void 0 ? 10 : _ref$rows,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
var preIcon = _extends({}, icon, {
fill: (icon === null || icon === void 0 ? void 0 : icon.fill) || variant
});
var _React$useState = React.useState(0),
charCount = _React$useState[0],
setCharCount = _React$useState[1];
var _React$useState2 = React.useState(props.value || ''),
value = _React$useState2[0],
setValue = _React$useState2[1];
var _React$useState3 = React.useState(''),
extraChars = _React$useState3[0],
setExtraChars = _React$useState3[1];
var inputRef = useRef(null);
var handleChange = function handleChange(e) {
var inputValue = e.currentTarget.textContent;
if (inputValue.length > maxChars) {
setValue(inputValue.slice(0, maxChars));
setExtraChars(inputValue.slice(maxChars));
} else {
setValue(inputValue);
setExtraChars('');
}
setCharCount(inputValue.length);
if (props.onChange) {
props.onChange(e);
}
setTimeout(function () {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(inputRef.current);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}, 0);
};
React.useEffect(function () {
setCharCount(value.length);
}, [props.value]);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
color: color,
isError: extraChars.length > 0
}, /*#__PURE__*/React.createElement(FirstRow, {
background: color.background,
style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
},
isError: extraChars.length > 0
}, icon && /*#__PURE__*/React.createElement(IconContainer, {
color: color
}, /*#__PURE__*/React.createElement(Icon, preIcon)), /*#__PURE__*/React.createElement(Label, {
color: color
}, label), /*#__PURE__*/React.createElement(CharCount, {
color: color
}, charCount, "/", maxChars)), /*#__PURE__*/React.createElement(StyledInput, _extends({
ref: inputRef,
color: color,
withIcon: exists(icon)
}, props, {
onInput: handleChange,
rows: rows,
className: !value ? 'empty' : '',
"data-placeholder": placeholder,
contentEditable: "true",
dangerouslySetInnerHTML: {
__html: value + (extraChars ? "<span style=\"color:#d66a6a\">" + extraChars + "</span>" : '')
}
}))), extraChars.length > 0 && /*#__PURE__*/React.createElement(ErrorMessage, null, "You are ", extraChars.length, " characters over the limit. Please keep the text within the limit."));
};
TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
variant: PropTypes.oneOf(['primary', 'dark', 'light', 'secondary', 'danger', 'success', 'warning']),
icon: PropTypes.shape({
name: PropTypes.string.isRequired,
size: PropTypes.string,
fill: PropTypes.oneOf(['primary', 'dark', 'light', 'secondary', 'danger', 'success', 'warning'])
}),
endIcon: PropTypes.shape({
name: PropTypes.string.isRequired,
size: PropTypes.string,
fill: PropTypes.oneOf(['primary', 'dark', 'light', 'secondary', 'danger', 'success', 'warning'])
}),
maxChars: PropTypes.number,
rows: PropTypes.number,
onChange: PropTypes.func
} : {};
TextArea.defaultProps = {
variant: 'dark',
maxChars: 4
};
export default TextArea;