@readr-media/react-feedback
Version:
## Installation `yarn install`
171 lines (151 loc) • 7.81 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ThumbField;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// eslint-disable-line
var ThumbUpSvg = function ThumbUpSvg(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", { ...props,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
d: "M7 18.125C6.94922 22.8223 10.7324 26.377 16.6992 26.4277L18.4512 26.4404C20.127 26.4658 21.3457 26.3389 22.0566 26.1484C23.0469 25.8945 24.0371 25.2852 24.0371 24.0664C24.0371 23.5713 23.8975 23.2158 23.7324 22.9365C23.6309 22.7715 23.6562 22.6445 23.8086 22.5811C24.5957 22.2383 25.2686 21.502 25.2686 20.4863C25.2686 19.9023 25.0908 19.3945 24.8242 19.0264C24.6719 18.8359 24.6973 18.6709 24.9385 18.5312C25.5098 18.2012 25.9033 17.4775 25.9033 16.6396C25.9033 16.043 25.7256 15.4082 25.3701 15.0908C25.167 14.9131 25.2051 14.7861 25.4336 14.5957C25.8271 14.2529 26.0811 13.6689 26.0811 12.9453C26.0811 11.7139 25.1162 10.6982 23.834 10.6982H19.3145C18.1592 10.6982 17.3975 10.1016 17.3975 9.16211C17.3975 7.42285 19.5557 4.27441 19.5557 2.00195C19.5557 0.808594 18.7812 0.110352 17.7783 0.110352C16.8643 0.110352 16.4072 0.745117 15.9121 1.70996C14.0078 5.42969 11.4434 8.43848 9.50098 11.0156C7.85059 13.2119 7.03809 15.0908 7 18.125ZM0.90625 18.2266C0.90625 22.0352 3.25488 25.2217 6.42871 25.2217H8.92969C6.54297 23.584 5.45117 21.0322 5.50195 18.0996C5.55273 14.7861 6.80957 12.5645 7.86328 11.1807H5.95898C3.07715 11.1807 0.90625 14.2656 0.90625 18.2266Z",
fill: "currentColor"
})
});
};
ThumbUpSvg.defaultProps = {
width: "27",
height: "27",
viewBox: "0 0 27 27",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
};
var ThumbDownSvg = function ThumbDownSvg(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", { ...props,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
d: "M19.9873 8.59668C20.0381 3.89941 16.2549 0.344727 10.2881 0.293945L8.53613 0.28125C6.86035 0.255859 5.6416 0.382812 4.93066 0.573242C3.94043 0.827148 2.9502 1.43652 2.9502 2.65527C2.9502 3.15039 3.08984 3.50586 3.25488 3.78516C3.35645 3.9502 3.33105 4.07715 3.17871 4.14062C2.3916 4.4834 1.71875 5.21973 1.71875 6.23535C1.71875 6.81934 1.89648 7.32715 2.16309 7.69531C2.31543 7.88574 2.29004 8.05078 2.06152 8.19043C1.47754 8.52051 1.08398 9.24414 1.08398 10.082C1.08398 10.6787 1.27441 11.3135 1.61719 11.6309C1.82031 11.8086 1.78223 11.9355 1.56641 12.126C1.16016 12.4688 0.90625 13.0527 0.90625 13.7637C0.90625 15.0078 1.87109 16.0234 3.15332 16.0234H7.67285C8.82812 16.0234 9.58984 16.6201 9.58984 17.5596C9.58984 19.2988 7.43164 22.4473 7.43164 24.7197C7.43164 25.9131 8.20605 26.6113 9.20898 26.6113C10.123 26.6113 10.5801 25.9766 11.0752 25.0117C12.9795 21.292 15.5439 18.2832 17.4863 15.7061C19.1494 13.5098 19.9492 11.6309 19.9873 8.59668ZM26.0811 8.49512C26.0811 4.68652 23.7324 1.5 20.5586 1.5H18.0576C20.4443 3.1377 21.5361 5.67676 21.4854 8.62207C21.4346 11.9355 20.1777 14.1445 19.124 15.541H21.041C23.9102 15.541 26.0811 12.4561 26.0811 8.49512Z",
fill: "currentColor"
})
});
};
ThumbDownSvg.defaultProps = {
width: "27",
height: "27",
viewBox: "0 0 27 27",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
};
const Wrapper = _styledComponents.default.div.withConfig({
displayName: "thumb-field__Wrapper",
componentId: "sc-11ufmx8-0"
})(["display:inline-flex;flex-direction:column;align-items:center;&:last-child{margin-left:40px;}"]); // able to uncheck radio button
const ThumbMockLabel = _styledComponents.default.div.withConfig({
displayName: "thumb-field__ThumbMockLabel",
componentId: "sc-11ufmx8-1"
})(["position:relative;padding-top:60px;color:", ";font-weight:", ";line-height:", ";font-size:", ";@media ", "{font-size:", ";}"], ({
theme
}) => theme.thumbField.label.color, ({
theme
}) => theme.thumbField.label.fontWeight, ({
theme
}) => theme.thumbField.label.lineHeight, ({
theme
}) => theme.thumbField.label.mobile.fontSize, ({
theme
}) => theme.breakpoint.tablet, ({
theme
}) => theme.thumbField.label.tablet.fontSize);
const ThumbIconWrapper = _styledComponents.default.div.withConfig({
displayName: "thumb-field__ThumbIconWrapper",
componentId: "sc-11ufmx8-2"
})(["box-sizing:border-box;position:absolute;top:0;left:calc((100% - 56px) / 2);width:56px;height:56px;display:flex;justify-content:center;align-items:center;border-width:1px;border-style:solid;border-color:", ";border-radius:50%;color:", ";background-color:", ";cursor:pointer;&.disabled{cursor:not-allowed;}&:not(.disabled){&:hover{color:", ";background-color:", ";border-color:", ";}&:active,&.active{color:", ";background-color:", ";border-color:", ";}}"], ({
theme
}) => theme.thumbField.thumb.default.borderColor, ({
theme
}) => theme.thumbField.thumb.default.color, ({
theme
}) => theme.thumbField.thumb.default.backgroundColor, ({
theme
}) => theme.thumbField.thumb.hover.color, ({
theme
}) => theme.thumbField.thumb.hover.backgroundColor, ({
theme
}) => theme.thumbField.thumb.hover.borderColor, ({
theme
}) => theme.thumbField.thumb.active.color, ({
theme
}) => theme.thumbField.thumb.active.backgroundColor, ({
theme
}) => theme.thumbField.thumb.active.borderColor);
const Input = _styledComponents.default.input.withConfig({
displayName: "thumb-field__Input",
componentId: "sc-11ufmx8-3"
})(["display:none;&:checked ~ ", "{color:", ";background-color:", ";border-color:", ";}"], ThumbIconWrapper, ({
theme
}) => theme.thumbField.thumb.active.color, ({
theme
}) => theme.thumbField.thumb.active.backgroundColor, ({
theme
}) => theme.thumbField.thumb.active.borderColor);
const ThumbStatistic = _styledComponents.default.span.withConfig({
displayName: "thumb-field__ThumbStatistic",
componentId: "sc-11ufmx8-4"
})(["font-size:16px;line-height:24px;color:", ";font-weight:", ";font-size:", ";line-height:", ";@media ", "{font-size:", ";line-height:", ";}"], ({
theme
}) => theme.thumbField.statistic.color, ({
theme
}) => theme.thumbField.statistic.fontWeight, ({
theme
}) => theme.thumbField.statistic.mobile.fontSize, ({
theme
}) => theme.thumbField.statistic.mobile.lineHeight, ({
theme
}) => theme.breakpoint.tablet, ({
theme
}) => theme.thumbField.statistic.tablet.fontSize, ({
theme
}) => theme.thumbField.statistic.tablet.lineHeight);
/**
* @param {import('../../../typedef').ThumbsFieldProps} props
* @return {JSX.Element}
*/
function ThumbField({
thumbsUp,
onMouseDown,
onMouseUp,
checked,
pressing,
label,
statistic
}) {
const ThumbSVG = thumbsUp ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbUpSvg, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbDownSvg, {});
function mouseDownHandler() {
if (statistic === null) return;
onMouseDown();
}
function mouseUpHandler() {
if (statistic === null) return;
onMouseUp();
}
const iconClasses = [pressing || checked ? 'active' : '', statistic === null ? 'disabled' : ''].join(' ');
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ThumbMockLabel, {
onMouseDown: mouseDownHandler,
onMouseUp: mouseUpHandler,
children: [label, /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
type: "radio",
name: "thumbs",
onChange: () => {},
checked: checked
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbIconWrapper, {
className: iconClasses,
children: ThumbSVG
})]
}), statistic !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbStatistic, {
children: statistic
})]
});
}