@music-loopy/loops
Version:
A React component library for Music Loopy Applications and websites
129 lines • 6.22 kB
JavaScript
var _excluded = ["variant", "options", "name", "color"];
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 styled from 'styled-components';
import PropTypes from 'prop-types';
import React from 'react';
import Icon from '../Icon';
import Select from 'react-select';
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n align-items: center;\n border: 1px solid\n ", ";\n border-radius: 6px;\n background: ", ";\n padding: 0em;\n gap: 0.5em;\n .basic-multi-select {\n width: 100%;\n }\n input {\n border: none;\n outline: none;\n background: none;\n color: ", ";\n font-size: 1em;\n width: 100%;\n padding-left: 1em;\n padding-right: 1em;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n &::placeholder {\n color: hsl(\n from\n ", "\n h s calc(l + 20)\n );\n opacity: 1; /* Firefox */\n }\n\n &::-ms-input-placeholder {\n /* Edge 12-18 */\n color: hsl(\n from\n ", "\n h s calc(l + 20)\n );\n }\n }\n"])), 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.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;
}, 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;
}, 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) {
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 exists = function exists(icon) {
return icon && icon.name;
};
var TagInput = function TagInput(_ref) {
var _ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'dark' : _ref$variant,
options = _ref.options,
name = _ref.name,
color = _ref.color,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
var colourStyles = {
control: function control(styles, props) {
return _extends({}, styles, {
backgroundColor: 'transparent',
border: 'none',
boxShadow: 'none',
color: 'white'
});
},
clearIndicator: function clearIndicator(styles, props) {
return _extends({}, styles, {
color: 'white',
':hover': {
color: 'tomato'
}
});
},
dropdownIndicator: function dropdownIndicator(styles, props) {
return _extends({}, styles, {
color: 'white'
});
},
option: function option(styles, _ref2) {
var data = _ref2.data,
isDisabled = _ref2.isDisabled,
isFocused = _ref2.isFocused,
isSelected = _ref2.isSelected;
return _extends({}, styles, {
backgroundColor: isDisabled ? undefined : isSelected ? data.color : isFocused ? 'lightgrey' : undefined,
color: isDisabled ? '#ccc' : isSelected ? 'white' : data.color,
cursor: isDisabled ? 'not-allowed' : 'default',
':active': _extends({}, styles[':active'], {
backgroundColor: !isDisabled ? isSelected ? data.color : 'lightgrey' : undefined
})
});
},
multiValue: function multiValue(styles, _ref3) {
var data = _ref3.data;
return _extends({}, styles, {
backgroundColor: 'black',
color: 'white',
':hover': {
backgroundColor: 'tomato',
border: '1px solid white'
}
});
},
multiValueLabel: function multiValueLabel(styles, _ref4) {
var data = _ref4.data;
return _extends({}, styles, {
color: data.color
});
},
multiValueRemove: function multiValueRemove(styles, _ref5) {
var data = _ref5.data;
return _extends({}, styles, {
color: data.color,
backgroundColor: 'green',
border: 'green',
':hover': {
backgroundColor: 'tomato',
border: 'tomato',
color: 'white'
}
});
}
};
return /*#__PURE__*/React.createElement(Container, {
color: color
}, /*#__PURE__*/React.createElement(Select, _extends({
defaultValue: [],
isMulti: true,
name: name || 'basic-multi-select',
options: options,
className: "basic-multi-select",
classNamePrefix: "select",
styles: colourStyles
}, props)));
};
TagInput.propTypes = process.env.NODE_ENV !== "production" ? {
variant: PropTypes.oneOf(['primary', 'dark', 'light', 'secondary', 'danger', 'success', 'warning']),
options: PropTypes.array,
name: PropTypes.string,
color: PropTypes.shape({
background: PropTypes.oneOf(['primary', 'dark', 'light', 'secondary', 'danger', 'success', 'warning']),
text: PropTypes.oneOf(['primary', 'dark', 'light', 'secondary', 'danger', 'success', 'warning']),
border: PropTypes.oneOf(['primary', 'dark', 'light', 'secondary', 'danger', 'success', 'warning'])
})
} : {};
TagInput.defaultProps = {
variant: 'dark'
};
export default TagInput;