decentraland-ui
Version:
Decentraland's UI components and styles
201 lines (200 loc) • 10.2 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SliderField = exports.SliderDefault = exports.SliderLastInteraction = void 0;
var React = __importStar(require("react"));
require("./SliderField.css");
var SliderLastInteraction;
(function (SliderLastInteraction) {
SliderLastInteraction[SliderLastInteraction["from"] = 0] = "from";
SliderLastInteraction[SliderLastInteraction["to"] = 1] = "to";
})(SliderLastInteraction = exports.SliderLastInteraction || (exports.SliderLastInteraction = {}));
exports.SliderDefault = {
MIN: 0,
MAX: 100,
FROM: 0,
TO: 100
};
var SliderField = /** @class */ (function (_super) {
__extends(SliderField, _super);
function SliderField() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
from: exports.SliderDefault.FROM,
to: exports.SliderDefault.TO,
lastInteraction: SliderLastInteraction.from
};
_this.handleChangeFrom = function (e) {
var input = e.target;
var _a = _this.props, onChange = _a.onChange, range = _a.range;
if (!range) {
return;
}
_this.setState(function (prevState) {
return __assign(__assign({}, prevState), { from: Math.min(Number(input.value), prevState.to), lastInteraction: SliderLastInteraction.from });
}, function () {
if (onChange) {
onChange(e, [_this.state.from, _this.state.to]);
}
});
};
_this.handleChangeTo = function (e) {
var input = e.target;
var _a = _this.props, onChange = _a.onChange, range = _a.range;
_this.setState(function (prevState) {
return __assign(__assign({}, prevState), { to: Math.max(Number(input.value), prevState.from), lastInteraction: SliderLastInteraction.to });
}, function () {
if (onChange) {
onChange(e, (range
? [_this.state.from, _this.state.to]
: _this.state.to));
}
});
};
_this.handleMouseUp = function (e) {
var _a = _this.props, onMouseUp = _a.onMouseUp, range = _a.range;
if (onMouseUp) {
onMouseUp(e, (range ? [_this.state.from, _this.state.to] : _this.state.to));
}
};
_this.getTrackStyles = function (min, max) {
var range = _this.props.range;
var _a = _this.state, from = _a.from, to = _a.to;
var diffMaxMin = max - min;
var trackLeft = range ? "".concat(((from - min) * 100) / diffMaxMin, "%") : 0;
var trackRight = range
? "".concat(((max - to) * 100) / diffMaxMin, "%")
: "".concat(100 - ((to - min) * 100) / diffMaxMin, "%");
return {
left: trackLeft,
right: trackRight
};
};
_this.getMarkStyle = function (min, max) {
var _a = _this.state, from = _a.from, to = _a.to;
var diffMaxMin = max - min;
var leftStyle = "".concat(((from - min) * 100) / diffMaxMin, "%");
var rightStyle = "".concat(((to - min) * 100) / diffMaxMin, "%");
return {
left: leftStyle,
right: rightStyle
};
};
return _this;
}
SliderField.prototype.componentDidMount = function () {
var _a = this.props, defaultValue = _a.defaultValue, min = _a.min, max = _a.max, valueFrom = _a.valueFrom, valueTo = _a.valueTo;
if (defaultValue === undefined) {
var minValue_1 = !isNaN(min) ? min : exports.SliderDefault.FROM;
var maxValue_1 = !isNaN(max) ? max : exports.SliderDefault.TO;
this.setState(function (prevState) {
return __assign(__assign({}, prevState), { from: valueFrom ? valueFrom : minValue_1, to: valueTo ? valueTo : maxValue_1 });
});
}
else {
if (Array.isArray(defaultValue)) {
this.setState({
from: defaultValue[0],
to: defaultValue[1]
});
}
else {
this.setState({
to: Number(defaultValue)
});
}
}
};
SliderField.prototype.componentDidUpdate = function (prevProps) {
var _a = this.props, valueFrom = _a.valueFrom, valueTo = _a.valueTo;
if (valueFrom !== prevProps.valueFrom || valueTo !== prevProps.valueTo) {
this.setState({
from: valueFrom !== null && valueFrom !== void 0 ? valueFrom : prevProps.valueFrom,
to: valueTo !== null && valueTo !== void 0 ? valueTo : prevProps.valueTo
});
}
};
SliderField.prototype.render = function () {
var _a, _b;
var _c = this.props, header = _c.header, className = _c.className, range = _c.range, step = _c.step, valueFrom = _c.valueFrom, valueTo = _c.valueTo, label = _c.label, labelFrom = _c.labelFrom, labelTo = _c.labelTo;
var min = this.props.min || exports.SliderDefault.MIN;
var max = this.props.max || exports.SliderDefault.MAX;
var _d = this.state, from = _d.from, to = _d.to;
var classes = ['dcl', 'sliderfield'];
if (className) {
classes.push(className);
}
var trackStyle = this.getTrackStyles(min, max);
var markStyle = this.getMarkStyle(min, max);
var fromText = (_a = labelFrom !== null && labelFrom !== void 0 ? labelFrom : valueFrom) !== null && _a !== void 0 ? _a : from;
var toText = (_b = labelTo !== null && labelTo !== void 0 ? labelTo : valueTo) !== null && _b !== void 0 ? _b : to;
return (React.createElement("div", { className: classes.join(' ') },
header && React.createElement("div", { className: "dcl sliderfield-header" }, header),
label && React.createElement("p", null, label),
React.createElement("div", { className: "dcl sliderfield-wrapper" },
range && (React.createElement("input", { type: "range", value: valueFrom !== null && valueFrom !== void 0 ? valueFrom : from, max: max, min: min, step: step || '1', onChange: this.handleChangeFrom, style: {
zIndex: this.state.lastInteraction == SliderLastInteraction.from
? 4
: 3
}, onMouseUp: this.handleMouseUp, className: "sliderfield-input-left", "aria-label": "min value", role: "slider" })),
React.createElement("input", { type: "range", value: valueTo !== null && valueTo !== void 0 ? valueTo : to, max: max, min: min, step: step || '1', onChange: this.handleChangeTo, style: {
zIndex: this.state.lastInteraction == SliderLastInteraction.to ? 4 : 3
}, onMouseUp: this.handleMouseUp, className: "sliderfield-input-right", "aria-label": "max value", role: "slider" }),
React.createElement("div", { className: "dcl sliderfield-rail" },
React.createElement("div", { className: "dcl sliderfield-track", style: { left: trackStyle.left, right: trackStyle.right } },
range && fromText !== toText && (React.createElement("span", { className: "slider-value slider-from" }, fromText)),
React.createElement("span", { className: "slider-value slider-to" }, toText)),
range && (React.createElement("span", { className: "dcl sliderfield-mark left", style: { left: markStyle.left } })),
React.createElement("span", { className: "dcl sliderfield-mark right", style: { left: markStyle.right } })))));
};
return SliderField;
}(React.PureComponent));
exports.SliderField = SliderField;