@streetscape.gl/monochrome
Version:
A toolkit of React components for streetscape.gl
201 lines (175 loc) • 7.67 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { withTheme, evaluateStyle } from '../theme';
import { CheckIcon, IndeterminateIcon } from '../icons';
var CHECKBOX_STATE = {
OFF: 'off',
INDETERMINATE: 'indeterminate',
ON: 'on'
};
var CheckBoxComponent = styled.div(function (props) {
return _objectSpread(_objectSpread({}, props.theme.__reset__), {}, {
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
pointerEvents: props.isEnabled ? 'all' : 'none',
color: props.isEnabled ? props.theme.textColorPrimary : props.theme.textColorDisabled
}, evaluateStyle(props.userStyle, props));
});
var CheckBoxBorder = styled.div(function (props) {
var color = props.theme.controlColorPrimary;
if (!props.isEnabled) {
color = props.theme.controlColorDisabled;
} else if (props.hasFocus) {
color = props.theme.controlColorActive;
} else if (props.isHovered) {
color = props.theme.controlColorHovered;
}
return _objectSpread({
outline: 'none',
display: 'inline-block',
position: 'relative',
width: props.size,
height: props.size,
flexGrow: 0,
flexShrink: 0,
marginRight: props.theme.spacingSmall,
borderStyle: 'solid',
borderWidth: 2,
borderColor: color,
color: color
}, evaluateStyle(props.userStyle, props));
});
var CheckBoxIcon = styled.div(function (props) {
return _objectSpread({
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%,-50%)',
width: 16,
height: 16,
textAlign: 'center',
lineHeight: '16px',
path: {
fill: 'currentColor'
}
}, evaluateStyle(props.userStyle, props));
});
var CheckBox = function (_PureComponent) {
_inherits(CheckBox, _PureComponent);
var _super = _createSuper(CheckBox);
function CheckBox() {
var _this;
_classCallCheck(this, CheckBox);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
hasFocus: false,
isHovered: false
});
_defineProperty(_assertThisInitialized(_this), "_onMouseEnter", function () {
return _this.setState({
isHovered: true
});
});
_defineProperty(_assertThisInitialized(_this), "_onMouseLeave", function () {
return _this.setState({
isHovered: false
});
});
_defineProperty(_assertThisInitialized(_this), "_onFocus", function () {
return _this.setState({
hasFocus: true
});
});
_defineProperty(_assertThisInitialized(_this), "_onBlur", function () {
return _this.setState({
hasFocus: false
});
});
_defineProperty(_assertThisInitialized(_this), "_onKeyDown", function (evt) {
if (evt.keyCode === 32) {
_this._onClick(evt);
}
});
_defineProperty(_assertThisInitialized(_this), "_onClick", function (event) {
_this.props.onChange(_this.props.value === CHECKBOX_STATE.ON ? CHECKBOX_STATE.OFF : CHECKBOX_STATE.ON);
});
return _this;
}
_createClass(CheckBox, [{
key: "render",
value: function render() {
var _this$props = this.props,
value = _this$props.value,
style = _this$props.style,
className = _this$props.className,
theme = _this$props.theme,
label = _this$props.label,
isEnabled = _this$props.isEnabled;
var _style$size = style.size,
size = _style$size === void 0 ? theme.controlSize : _style$size;
var styleProps = {
theme: theme,
value: value,
size: size,
hasFocus: this.state.hasFocus,
isHovered: this.state.isHovered,
isEnabled: isEnabled
};
return React.createElement(CheckBoxComponent, _extends({
className: className,
userStyle: style.wrapper
}, styleProps, {
onMouseEnter: this._onMouseEnter,
onMouseLeave: this._onMouseLeave,
onClick: this._onClick
}), React.createElement(CheckBoxBorder, _extends({
userStyle: style.border
}, styleProps, {
tabIndex: isEnabled ? 0 : -1,
onFocus: this._onFocus,
onBlur: this._onBlur,
onKeyDown: this._onKeyDown
}), React.createElement(CheckBoxIcon, _extends({
userStyle: style.icon
}, styleProps), value === CHECKBOX_STATE.ON && (style.iconOn || React.createElement(CheckIcon, null)), value === CHECKBOX_STATE.OFF && style.iconOff, value === CHECKBOX_STATE.INDETERMINATE && (style.iconIndeterminate || React.createElement(IndeterminateIcon, null)))), label);
}
}]);
return CheckBox;
}(PureComponent);
_defineProperty(CheckBox, "propTypes", {
value: PropTypes.oneOf([CHECKBOX_STATE.OFF, CHECKBOX_STATE.INDETERMINATE, CHECKBOX_STATE.ON]).isRequired,
onChange: PropTypes.func,
className: PropTypes.string,
label: PropTypes.node,
style: PropTypes.object,
isEnabled: PropTypes.bool
});
_defineProperty(CheckBox, "defaultProps", {
className: '',
value: CHECKBOX_STATE.OFF,
label: '',
style: {},
isEnabled: true,
onChange: function onChange() {}
});
var ThemedCheckBox = withTheme(CheckBox);
Object.assign(ThemedCheckBox, CHECKBOX_STATE);
export default ThemedCheckBox;
//# sourceMappingURL=index.js.map