@up-group-ui/react-controls
Version:
Up shared react controls
425 lines • 17.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var typestyle_1 = require("typestyle");
var withTheme_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/withTheme"));
var theming_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming"));
var Label_1 = (0, tslib_1.__importDefault)(require("../../Display/Label"));
var types_1 = require("../../../Common/utils/types");
var wrapperStyle = function (props) {
return (0, typestyle_1.style)({
display: 'flex',
flexDirection: 'row',
justifyContent: 'left',
alignItems: 'center',
$nest: {
'svg path': {
margin: '0px',
fill: props.theme.colorMap.primaryFg,
},
'.up-label-text': {
color: '#7f8fa4',
marginRight: '12px',
},
'.up-toggle': {
touchAction: 'pan-x',
display: 'inline-block',
position: 'relative',
cursor: 'pointer',
backgroundColor: 'transparent',
border: 0,
padding: 0,
'-webkit-touch-callout': 'none',
'-webkit-user-select': 'none',
'-moz-user-select': 'none',
'-ms-user-select': 'none',
'-webkit-tap-highlight-color': 'transparent',
},
'.up-toggle-screenreader-only': {
border: 0,
clip: 'rect(0 0 0 0)',
height: '1px',
margin: '-1px',
overflow: 'hidden',
padding: 0,
position: 'absolute',
width: '1px',
},
'.up-toggle--disabled': {
cursor: 'not-allowed',
opacity: 0.5,
'-webkit-transition': 'opacity 0.25s',
transition: 'opacity 0.25s',
},
'.up-toggle-track': {
backgroundColor: props.theme.colorMap.disabledFg,
'-webkit-transition': 'all 0.2s ease',
'-ms-transition': 'all 0.2s ease',
transition: 'all 0.2s ease',
},
'.up-toggle--checked .up-toggle-track': {
backgroundColor: props.theme.colorMap.primary,
},
'.up-toggle--checked:hover:not(.up-toggle--disabled) .up-toggle-track': {
backgroundColor: props.theme.colorMap.primaryDark,
},
'.up-toggle-track-check': {
position: 'absolute',
width: '14px',
height: '10px',
top: '0px',
bottom: '0px',
marginTop: 'auto',
marginBottom: 'auto',
lineHeight: 0,
left: '8px',
opacity: 0,
'-webkit-transition': 'opacity 0.25s ease',
'-ms-transition': 'opacity 0.25s ease',
transition: 'opacity 0.25s ease',
},
'.up-toggle--checked .up-toggle-track-check': {
opacity: 1,
'-webkit-transition': 'opacity 0.25s ease',
'-ms-transition': 'opacity 0.25s ease',
transition: 'opacity 0.25s ease',
},
'.up-toggle-track-x': {
position: 'absolute',
width: '10px',
height: '10px',
marginTop: 'auto',
marginBottom: 'auto',
lineHeight: 0,
opacity: 1,
'-webkit-transition': 'opacity 0.25s ease',
'-ms-transition': 'opacity 0.25s ease',
transition: 'opacity 0.25s ease',
},
'.up-toggle--checked .up-toggle-track-x': {
opacity: 0,
},
'.up-toggle-thumb': {
transition: 'all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms',
position: 'absolute',
borderColor: '#D7D7D7',
backgroundColor: '#FAFAFA',
'-webkit-box-sizing': 'border-box',
'-moz-box-sizing': 'border-box',
boxSizing: 'border-box',
'-webkit-transition': 'all 0.25s ease',
'-ms-transition': 'all 0.25s ease',
},
'.up-toggle--checked .up-toggle-thumb': {
left: props.size === 'normal' ? '30px' : '24px',
borderColor: props.theme.colorMap.primary,
},
'.up-toggle--focus .up-toggle-thumb': {
'-webkit-box-shadow': '0px 0px 3px 2px #0099E0',
boxShadow: '0px 0px 2px 3px #0099E0',
},
},
});
};
var DefaultChecked = function () { return ((0, jsx_runtime_1.jsxs)("svg", (0, tslib_1.__assign)({ width: "14", height: "11", viewBox: "0 0 14 11" }, { children: [(0, jsx_runtime_1.jsx)("title", { children: "switch-check" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0", fill: "#fff", fillRule: "evenodd" }, void 0)] }), void 0)); };
var DefaultUnchecked = function () { return ((0, jsx_runtime_1.jsxs)("svg", (0, tslib_1.__assign)({ width: "10", height: "10", viewBox: "0 0 10 10" }, { children: [(0, jsx_runtime_1.jsx)("title", { children: "switch-x" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M9.9 2.12L7.78 0 4.95 2.828 2.12 0 0 2.12l2.83 2.83L0 7.776 2.123 9.9 4.95 7.07 7.78 9.9 9.9 7.776 7.072 4.95 9.9 2.12", fill: "#fff", fillRule: "evenodd" }, void 0)] }), void 0)); };
var UpToggle = (function (_super) {
(0, tslib_1.__extends)(UpToggle, _super);
function UpToggle(props) {
var _this = _super.call(this, props) || this;
_this.handleClick = function (event) {
var checkbox = _this.input;
if (event.target !== checkbox && !_this.moved) {
_this.previouslyChecked = checkbox.checked;
event.stopPropagation();
event.preventDefault();
checkbox.focus();
checkbox.click();
return;
}
};
_this.handleTouchStart = function (event) {
_this.startX = _this.pointerCoord(event).x;
_this.activated = true;
};
_this.handleTouchMove = function (event) {
if (!_this.activated)
return;
_this.moved = true;
if (_this.startX) {
var currentX = _this.pointerCoord(event).x;
if (_this.state.checked && currentX + 15 < _this.startX) {
_this.setState({ checked: false });
_this.startX = currentX;
_this.activated = true;
}
else if (currentX - 15 > _this.startX) {
_this.setState({ checked: true });
_this.startX = currentX;
_this.activated = currentX < _this.startX + 5;
}
}
};
_this.handleTouchEnd = function (event) {
if (!_this.moved)
return;
var checkbox = _this.input;
event.preventDefault();
if (_this.startX) {
var endX = _this.pointerCoord(event).x;
if (_this.previouslyChecked === true && _this.startX + 4 > endX) {
if (_this.previouslyChecked !== _this.state.checked) {
_this.setState({ checked: false });
_this.previouslyChecked = _this.state.checked;
checkbox.click();
}
}
else if (_this.startX - 4 < endX) {
if (_this.previouslyChecked !== _this.state.checked) {
_this.setState({ checked: true });
_this.previouslyChecked = _this.state.checked;
checkbox.click();
}
}
_this.activated = false;
_this.startX = null;
_this.moved = false;
}
};
_this.handleFocus = function (event) {
var onFocus = _this.props.onFocus;
if (onFocus) {
onFocus(event);
}
_this.setState({ hasFocus: true });
};
_this.handleBlur = function (event) {
var onBlur = _this.props.onBlur;
if (onBlur) {
onBlur(event);
}
_this.setState({ hasFocus: false });
};
_this.handleChangeEvent = function (event) {
if (!_this.props.hasOwnProperty('checked')) {
var checked = _this.setState({
checked: event.target.checked,
});
}
if (_this.props.onChange)
_this.props.onChange(event, event.target.checked);
};
_this.getIcon = function (type) {
var icons = _this.props.icons;
if (!icons) {
return null;
}
return icons[type] === undefined ? null : icons[type];
};
_this.getTrackHeight = function () {
var height = 'auto';
switch (_this.props.size) {
case 'small':
height = '14px';
break;
case 'normal':
height = '24px';
break;
case 'large':
height = '32px';
break;
}
return height;
};
_this.getTrackWidth = function () {
var width = 'auto';
switch (_this.props.size) {
case 'small':
width = '34px';
break;
case 'normal':
width = '54px';
break;
case 'large':
width = '32px';
break;
}
return width;
};
_this.getThumbWidth = function () {
var width = 'auto';
switch (_this.props.size) {
case 'small':
width = '18px';
break;
case 'normal':
width = '22px';
break;
case 'large':
width = '10px';
break;
}
return width;
};
_this.getThumbHeight = function () {
var width = 'auto';
switch (_this.props.size) {
case 'small':
width = '18px';
break;
case 'normal':
width = '22px';
break;
case 'large':
width = '30px';
break;
}
return width;
};
_this.getTrackBorder = function () {
var border = 'auto';
switch (_this.props.size) {
case 'small':
border = '24px';
break;
case 'normal':
border = '34px';
break;
case 'large':
border = '6px';
break;
}
return border;
};
_this.getThumbBorder = function () {
var border = 'auto';
switch (_this.props.size) {
case 'small':
border = '50%';
break;
case 'normal':
border = '50%';
break;
case 'large':
border = '6px';
break;
}
return border;
};
_this.getThumbPosition = function () {
var position = {
top: '1px',
left: '1px',
};
if (_this.props.size == 'small') {
position = {
top: '-2px',
left: '-2px',
};
}
return position;
};
_this.getThumbSelectedPosition = function () {
var position = {
left: '31px',
};
if (_this.props.size == 'small') {
position = {
left: '20px',
};
}
else if (_this.props.size == 'large') {
position = {
left: '21px',
};
}
return position;
};
_this.getTrackXPosition = function () {
var position = {
top: '0px',
bottom: '0px',
right: '10px',
};
if (_this.props.size == 'large') {
position.right = '5px';
}
return position;
};
_this.getTrackCheckPosition = function () {
var position = {
top: '0px',
bottom: '0px',
left: '8px',
};
if (_this.props.size == 'large') {
position.left = '5px';
}
return position;
};
_this.previouslyChecked = !!(props.checked || props.defaultChecked);
_this.state = {
checked: !!(props.checked || props.defaultChecked),
hasFocus: false,
};
return _this;
}
UpToggle.prototype.pointerCoord = function (event) {
if (event) {
var changedTouches = event.changedTouches;
if (changedTouches && changedTouches.length > 0) {
var touch = changedTouches[0];
return { x: touch.clientX, y: touch.clientY };
}
var pageX = event.pageX;
if (pageX !== undefined) {
return { x: pageX, y: event.pageY };
}
}
return { x: 0, y: 0 };
};
UpToggle.prototype.componentWillReceiveProps = function (nextProps) {
if ('checked' in nextProps) {
this.setState({ checked: !!nextProps.checked });
}
};
UpToggle.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, onChange = _a.onChange, size = _a.size, _icons = _a.icons, children = _a.children, inputProps = (0, tslib_1.__rest)(_a, ["className", "onChange", "size", "icons", "children"]);
var classes = (0, classnames_1.default)('up-toggle', {
'up-toggle--checked': this.state.checked,
'up-toggle--disabled': this.props.disabled,
}, className);
var SizeStyle = (0, typestyle_1.style)({
$nest: {
'& .up-toggle-track': {
height: this.getTrackHeight(),
width: this.getTrackWidth(),
padding: 0,
borderRadius: this.getTrackBorder(),
},
'& .up-toggle-thumb': (0, tslib_1.__assign)({ width: this.getThumbWidth(), height: this.getThumbHeight(), border: size === 'small' && '1px solid #4D4D4D', borderRadius: this.getThumbBorder() }, this.getThumbPosition()),
'& .up-toggle-track-x': (0, tslib_1.__assign)({}, this.getTrackXPosition()),
'& .up-toggle--checked .up-toggle-thumb': (0, tslib_1.__assign)({}, this.getThumbSelectedPosition()),
'& .up-toggle-track-check': (0, tslib_1.__assign)({}, this.getTrackCheckPosition()),
},
});
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)(wrapperStyle(this.props), SizeStyle, 'up-toggle') }, (0, types_1.getTestableComponentProps)(this.props), { children: [children && (0, jsx_runtime_1.jsx)(Label_1.default, { className: (0, typestyle_1.style)({ display: 'inline-block' }), text: children }, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: classes, onClick: this.handleClick, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "up-toggle-track" }, void 0), (0, jsx_runtime_1.jsx)("div", { className: "up-toggle-thumb" }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)("input", (0, tslib_1.__assign)({}, inputProps, { onChange: this.handleChangeEvent, ref: function (ref) {
_this.input = ref;
}, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: function (event) { return event.stopPropagation(); }, className: "up-toggle-screenreader-only", type: "checkbox" }), void 0)] }), void 0));
};
UpToggle.defaultProps = {
icons: {
checked: (0, jsx_runtime_1.jsx)(DefaultChecked, {}, void 0),
unchecked: (0, jsx_runtime_1.jsx)(DefaultUnchecked, {}, void 0),
},
size: 'normal',
theme: theming_1.default,
};
return UpToggle;
}(react_1.default.PureComponent));
exports.default = (0, withTheme_1.default)(UpToggle);
//# sourceMappingURL=UpToggle.js.map