jb-checkbox-react
Version:
react mobx checkbox
125 lines (106 loc) • 8.92 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('prop-types')) :
typeof define === 'function' && define.amd ? define(['react', 'prop-types'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.JBCheckbox = factory(global.React, global.PropTypes));
}(this, (function (React, PropTypes) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".jb-check-box-component-wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: start; }\n .jb-check-box-component-wrapper .caption {\n display: inline-block;\n padding: 0 0 0 8px;\n font-weight: 400;\n color: #535353;\n transition: all 0.3s ease-in-out; }\n .jb-check-box-component-wrapper .caption.active {\n transition: all 0.3s ease-in-out;\n font-weight: 700; }\n .jb-check-box-component-wrapper .svg-wrapper {\n width: 30px;\n height: 30px;\n margin-left: 8px; }\n .jb-check-box-component-wrapper .svg-wrapper .check-box-svg {\n width: 30px;\n height: 30px;\n cursor: pointer; }\n .jb-check-box-component-wrapper .svg-wrapper .check-box-svg.active .checkmark__cube {\n fill: #00dc55;\n transition: all 0.3s ease-in-out;\n rx: 58;\n ry: 58;\n stroke: transparent; }\n .jb-check-box-component-wrapper .svg-wrapper .check-box-svg.active .checkmark__check {\n animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards; }\n .jb-check-box-component-wrapper .svg-wrapper .check-box-svg .checkmark__cube {\n fill: #fff;\n transition: all 0.3s ease-in-out;\n stroke: #808080;\n stroke-width: 1px; }\n .jb-check-box-component-wrapper .svg-wrapper .check-box-svg .checkmark__check {\n stroke-width: 5;\n stroke: #fff;\n transform-origin: 50% 50%;\n stroke-dasharray: 48;\n stroke-dashoffset: 48; }\n\n@keyframes stroke {\n 100% {\n stroke-dashoffset: 0; } }\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkpCQ2hlY2tib3guc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIsbUJBQW1CO0VBQ25CLHNCQUFzQixFQUFFO0VBQ3hCO0lBQ0UscUJBQXFCO0lBQ3JCLGtCQUFrQjtJQUNsQixnQkFBZ0I7SUFDaEIsY0FBYztJQUNkLGdDQUFnQyxFQUFFO0lBQ2xDO01BQ0UsZ0NBQWdDO01BQ2hDLGdCQUFnQixFQUFFO0VBQ3RCO0lBQ0UsV0FBVztJQUNYLFlBQVk7SUFDWixnQkFBZ0IsRUFBRTtJQUNsQjtNQUNFLFdBQVc7TUFDWCxZQUFZO01BQ1osZUFBZSxFQUFFO01BQ2pCO1FBQ0UsYUFBYTtRQUNiLGdDQUFnQztRQUNoQyxNQUFNO1FBQ04sTUFBTTtRQUNOLG1CQUFtQixFQUFFO01BQ3ZCO1FBQ0UsbUVBQW1FLEVBQUU7TUFDdkU7UUFDRSxVQUFVO1FBQ1YsZ0NBQWdDO1FBQ2hDLGVBQWU7UUFDZixpQkFBaUIsRUFBRTtNQUNyQjtRQUNFLGVBQWU7UUFDZixZQUFZO1FBQ1oseUJBQXlCO1FBQ3pCLG9CQUFvQjtRQUNwQixxQkFBcUIsRUFBRTs7QUFFL0I7RUFDRTtJQUNFLG9CQUFvQixFQUFFLEVBQUUiLCJmaWxlIjoiSkJDaGVja2JveC5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmpiLWNoZWNrLWJveC1jb21wb25lbnQtd3JhcHBlciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogc3RhcnQ7IH1cbiAgLmpiLWNoZWNrLWJveC1jb21wb25lbnQtd3JhcHBlciAuY2FwdGlvbiB7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIHBhZGRpbmc6IDAgMCAwIDhweDtcbiAgICBmb250LXdlaWdodDogNDAwO1xuICAgIGNvbG9yOiAjNTM1MzUzO1xuICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2UtaW4tb3V0OyB9XG4gICAgLmpiLWNoZWNrLWJveC1jb21wb25lbnQtd3JhcHBlciAuY2FwdGlvbi5hY3RpdmUge1xuICAgICAgdHJhbnNpdGlvbjogYWxsIDAuM3MgZWFzZS1pbi1vdXQ7XG4gICAgICBmb250LXdlaWdodDogNzAwOyB9XG4gIC5qYi1jaGVjay1ib3gtY29tcG9uZW50LXdyYXBwZXIgLnN2Zy13cmFwcGVyIHtcbiAgICB3aWR0aDogMzBweDtcbiAgICBoZWlnaHQ6IDMwcHg7XG4gICAgbWFyZ2luLWxlZnQ6IDhweDsgfVxuICAgIC5qYi1jaGVjay1ib3gtY29tcG9uZW50LXdyYXBwZXIgLnN2Zy13cmFwcGVyIC5jaGVjay1ib3gtc3ZnIHtcbiAgICAgIHdpZHRoOiAzMHB4O1xuICAgICAgaGVpZ2h0OiAzMHB4O1xuICAgICAgY3Vyc29yOiBwb2ludGVyOyB9XG4gICAgICAuamItY2hlY2stYm94LWNvbXBvbmVudC13cmFwcGVyIC5zdmctd3JhcHBlciAuY2hlY2stYm94LXN2Zy5hY3RpdmUgLmNoZWNrbWFya19fY3ViZSB7XG4gICAgICAgIGZpbGw6ICMwMGRjNTU7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2UtaW4tb3V0O1xuICAgICAgICByeDogNTg7XG4gICAgICAgIHJ5OiA1ODtcbiAgICAgICAgc3Ryb2tlOiB0cmFuc3BhcmVudDsgfVxuICAgICAgLmpiLWNoZWNrLWJveC1jb21wb25lbnQtd3JhcHBlciAuc3ZnLXdyYXBwZXIgLmNoZWNrLWJveC1zdmcuYWN0aXZlIC5jaGVja21hcmtfX2NoZWNrIHtcbiAgICAgICAgYW5pbWF0aW9uOiBzdHJva2UgMC4zcyBjdWJpYy1iZXppZXIoMC42NSwgMCwgMC40NSwgMSkgMC4xcyBmb3J3YXJkczsgfVxuICAgICAgLmpiLWNoZWNrLWJveC1jb21wb25lbnQtd3JhcHBlciAuc3ZnLXdyYXBwZXIgLmNoZWNrLWJveC1zdmcgLmNoZWNrbWFya19fY3ViZSB7XG4gICAgICAgIGZpbGw6ICNmZmY7XG4gICAgICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2UtaW4tb3V0O1xuICAgICAgICBzdHJva2U6ICM4MDgwODA7XG4gICAgICAgIHN0cm9rZS13aWR0aDogMXB4OyB9XG4gICAgICAuamItY2hlY2stYm94LWNvbXBvbmVudC13cmFwcGVyIC5zdmctd3JhcHBlciAuY2hlY2stYm94LXN2ZyAuY2hlY2ttYXJrX19jaGVjayB7XG4gICAgICAgIHN0cm9rZS13aWR0aDogNTtcbiAgICAgICAgc3Ryb2tlOiAjZmZmO1xuICAgICAgICB0cmFuc2Zvcm0tb3JpZ2luOiA1MCUgNTAlO1xuICAgICAgICBzdHJva2UtZGFzaGFycmF5OiA0ODtcbiAgICAgICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDQ4OyB9XG5cbkBrZXlmcmFtZXMgc3Ryb2tlIHtcbiAgMTAwJSB7XG4gICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gfVxuIl19 */";
styleInject(css_248z);
function JBCheckbox(props) {
var element = React.useRef();
var onClick = function onClick() {
var value = !props.value;
var event = new CustomEvent("change", {
detail: {
oldValue: props.value,
newValue: value
},
bubbles: true,
cancelable: true
});
event.simulated = true;
var tracker = element.current._valueTracker;
if (tracker) {
tracker.setValue(value);
}
element.current.value = value;
element.current.onchange = function (e) {
return props.onChange(e);
};
element.current.dispatchEvent(event);
};
return /*#__PURE__*/React__default['default'].createElement("div", {
className: "jb-check-box-component-wrapper",
style: props.style,
ref: element
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "svg-wrapper",
onClick: onClick
}, /*#__PURE__*/React__default['default'].createElement("svg", {
className: "check-box-svg " + (props.value ? 'active' : ''),
viewBox: "0 0 52 52"
}, /*#__PURE__*/React__default['default'].createElement("defs", null, /*#__PURE__*/React__default['default'].createElement("filter", {
xmlns: "http://www.w3.org/2000/svg",
id: "dropshadow",
height: "150%"
}, /*#__PURE__*/React__default['default'].createElement("feGaussianBlur", {
"in": "SourceAlpha",
stdDeviation: "7"
}), /*#__PURE__*/React__default['default'].createElement("feOffset", {
dx: "0",
dy: "0",
result: "offsetblur"
}), /*#__PURE__*/React__default['default'].createElement("feComponentTransfer", null, /*#__PURE__*/React__default['default'].createElement("feFuncA", {
type: "linear",
slope: "0.9"
})), /*#__PURE__*/React__default['default'].createElement("feMerge", null, /*#__PURE__*/React__default['default'].createElement("feMergeNode", null), /*#__PURE__*/React__default['default'].createElement("feMergeNode", {
"in": "SourceGraphic"
})))), /*#__PURE__*/React__default['default'].createElement("rect", {
className: "checkmark__cube",
x: "0",
y: "0",
width: "52",
height: "52",
rx: "5",
ry: "5"
}), /*#__PURE__*/React__default['default'].createElement("path", {
className: "checkmark__check",
fill: "none",
d: "M14.1 27.2l7.1 7.2 16.7-16.8"
}))), /*#__PURE__*/React__default['default'].createElement("div", {
className: "caption " + (props.value ? 'active' : '')
}, props.label ? props.label : ''));
}
JBCheckbox.propTypes = {
label: PropTypes__default['default'].string,
value: PropTypes__default['default'].bool,
onChange: PropTypes__default['default'].func,
className: PropTypes__default['default'].string
};
return JBCheckbox;
})));
//# sourceMappingURL=JBCheckbox.umd.js.map