@gssfed/vital-ui-kit-react
Version:
Vital UI Kit for React!
215 lines (185 loc) • 8.83 kB
JavaScript
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _templateObject = _taggedTemplateLiteral(['\n font-size: 15px;\n cursor: pointer;\n margin-right: 5px;\n &:hover {\n > span:first-child {\n box-shadow: ', ';\n }\n }\n'], ['\n font-size: 15px;\n cursor: pointer;\n margin-right: 5px;\n &:hover {\n > span:first-child {\n box-shadow: ', ';\n }\n }\n']),
_templateObject2 = _taggedTemplateLiteral(['\n color: ', ';\n'], ['\n color: ', ';\n']),
_templateObject3 = _taggedTemplateLiteral(['\n box-sizing: border-box;\n position: relative;\n display: inline-block;\n width: 1.066rem;\n height: 1.066rem;\n border: ', ';\n border-radius: ', ';\n background-color: ', ';\n transition: ', ';\n margin: -2px 0.6em 0 0;\n vertical-align: middle;\n\n border-color: ', ';\n'], ['\n box-sizing: border-box;\n position: relative;\n display: inline-block;\n width: 1.066rem;\n height: 1.066rem;\n border: ', ';\n border-radius: ', ';\n background-color: ', ';\n transition: ', ';\n margin: -2px 0.6em 0 0;\n vertical-align: middle;\n\n border-color: ', ';\n']),
_templateObject4 = _taggedTemplateLiteral(['\n display: none;\n'], ['\n display: none;\n']),
_templateObject5 = _taggedTemplateLiteral(['\n text-align: center;\n width: 100%;\n height: 100%;\n position: relative;\n opacity: ', ';\n transform: ', ';\n pointer-events: none;\n transition: all 120ms ease-out;\n'], ['\n text-align: center;\n width: 100%;\n height: 100%;\n position: relative;\n opacity: ', ';\n transform: ', ';\n pointer-events: none;\n transition: all 120ms ease-out;\n']);
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
/**
*
* Copyright © 2018 Galaxy Software Services https://github.com/GSS-FED/vital-ui-kit-react
* MIT license
*/
import React, { Component } from 'react';
import styled, { withTheme } from 'styled-components';
import { rgba } from 'polished';
import CheckboxGroup from './CheckboxGroup';
import Icon from '../Icon';
var Root = styled.label(_templateObject, function (_ref) {
var theme = _ref.theme;
return '0 0 0 2px ' + rgba(theme.primary, 0.2);
});
var Label = styled.span(_templateObject2, function (_ref2) {
var theme = _ref2.theme;
return theme.checkbox.label.color;
});
var Box = styled.span(_templateObject3, function (_ref3) {
var theme = _ref3.theme;
return '1px solid ' + theme.checkbox.borderColor;
}, function (props) {
return props.isRound ? '50%' : '2px';
}, function (_ref4) {
var isChecked = _ref4.isChecked,
isRound = _ref4.isRound,
theme = _ref4.theme;
return theme.checkbox.bg(isChecked && isRound);
}, function (_ref5) {
var theme = _ref5.theme;
return theme.defaultTransition;
}, function (_ref6) {
var isChecked = _ref6.isChecked,
theme = _ref6.theme;
return isChecked ? theme.checkbox.checkedBorderColor : '';
});
var Input = styled.input(_templateObject4);
var IconWrapper = styled.div(_templateObject5, function (_ref7) {
var isChecked = _ref7.isChecked;
return isChecked ? 1 : 0;
}, function (_ref8) {
var isChecked = _ref8.isChecked;
return isChecked ? 'scale(1)' : 'scale(0)';
});
function iconColor(isRound, isDisabled, theme) {
if (isDisabled) {
return theme.checkbox.icon.disabledColor;
}
if (isRound) {
return theme.checkbox.icon.roundColor;
}
return theme.checkbox.icon.color;
}
/** @render react
* @name Checkbox
* @description Checkbox components with group
* @example
* <Checkbox.Group>
* <Checkbox
* isRound
* label="checkbox 1"
* />
* <Checkbox
* isRound
* label="checkbox 2"
* />
* <Checkbox
* isRound
* label="checkbox 3"
* />
* </Checkbox.Group>
*/
var Checkbox = function (_Component) {
_inherits(Checkbox, _Component);
function Checkbox() {
var _ref9;
var _temp, _this, _ret;
_classCallCheck(this, Checkbox);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref9 = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref9, [this].concat(args))), _this), _this.state = {
checked: 'checked' in _this.props ? _this.props.checked : _this.props.defaultChecked || false
}, _this.handleChange = function (e) {
var _this$props = _this.props,
isDisabled = _this$props.isDisabled,
props = _objectWithoutProperties(_this$props, ['isDisabled']);
if (isDisabled) return;
_this.props.onChange({
target: _extends({}, props, {
checked: e.target.checked
}),
stopPopagation: function stopPopagation() {
e.stopPopagation();
},
preventDefault: function preventDefault() {
e.preventDefault();
},
nativeEvent: e.nativeEvent
});
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Checkbox, [{
key: 'render',
value: function render() {
var _props = this.props,
label = _props.label,
defaultChecked = _props.defaultChecked,
name = _props.name,
value = _props.value,
isDisabled = _props.isDisabled,
isRound = _props.isRound,
theme = _props.theme;
return React.createElement(
Root,
this.props,
React.createElement(
Box,
{
isChecked: this.state.checked,
isDisabled: isDisabled,
isRound: isRound
},
React.createElement(
IconWrapper,
{
isChecked: this.state.checked,
isDisabled: isDisabled
},
React.createElement(Icon, {
name: 'check',
size: '12',
color: iconColor(isRound, isDisabled, theme)
})
)
),
React.createElement(
Label,
{ isChecked: this.state.checked, isDisabled: isDisabled },
React.createElement(Input, {
type: 'checkbox',
disabled: isDisabled,
checked: this.state.checked,
defaultChecked: defaultChecked,
name: name,
value: value
// onChange={() => this.handleChange}
}),
label
)
);
}
}], [{
key: 'getDerivedStateFromProps',
value: function getDerivedStateFromProps(props) {
if ('checked' in props) {
return {
checked: props.checked
};
}
return null;
}
}]);
return Checkbox;
}(Component);
Checkbox.defaultProps = {
defaultChecked: false,
isDisabled: false,
isRound: false,
onChange: function onChange() {}
};
Checkbox.Group = CheckboxGroup;
export default withTheme(Checkbox);