decentraland-ui
Version:
Decentraland's UI components and styles
60 lines (59 loc) • 3.86 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.RangeWithState = exports.WithState = exports.RangeWithOnChange = exports.WithOnChange = exports.RangeWithOnMouseUp = exports.WithOnMouseUp = exports.RangeDefaultValue = exports.DefaultValue = exports.RangeWithMaxAndMinSet = exports.WithMaxAndMinSet = exports.WithLabel = exports.RangeSimple = exports.SliderSimple = void 0;
var react_1 = __importDefault(require("react"));
var react_2 = require("react");
var SliderField_1 = require("./SliderField");
var meta = {
title: 'SliderField',
component: SliderField_1.SliderField
};
exports.default = meta;
exports.SliderSimple = {
render: function () { return react_1.default.createElement(SliderField_1.SliderField, { header: "SliderField Simple" }); }
};
exports.RangeSimple = {
render: function () { return react_1.default.createElement(SliderField_1.SliderField, { header: "SliderField Simple Range", range: true }); }
};
exports.WithLabel = {
render: function () { return (react_1.default.createElement(SliderField_1.SliderField, { header: "SliderField Label", label: "This is a label", min: 0, max: 100 })); }
};
exports.WithMaxAndMinSet = {
render: function () { return (react_1.default.createElement(SliderField_1.SliderField, { header: "Min set at 200 and Max at 500", min: 200, max: 500 })); }
};
exports.RangeWithMaxAndMinSet = {
render: function () { return (react_1.default.createElement(SliderField_1.SliderField, { header: "Min set at 200 and Max at 500", min: 200, max: 500, range: true })); }
};
exports.DefaultValue = {
render: function () { return (react_1.default.createElement(SliderField_1.SliderField, { header: "Default value set to 70", min: 0, max: 100, defaultValue: 70 })); }
};
exports.RangeDefaultValue = {
render: function () { return (react_1.default.createElement(SliderField_1.SliderField, { header: "Default value set to 20 - 70", min: 0, max: 100, defaultValue: [20, 70], range: true })); }
};
exports.WithOnMouseUp = {
render: function () { return (react_1.default.createElement(SliderField_1.SliderField, { header: "SliderField Header", min: 0, max: 100, onMouseUp: function (_, data) { return alert(JSON.stringify(data)); } })); }
};
exports.RangeWithOnMouseUp = {
render: function () { return (react_1.default.createElement(SliderField_1.SliderField, { header: "SliderField Header", min: 0, max: 100, onMouseUp: function (_, data) { return alert(JSON.stringify(data)); }, range: true })); }
};
exports.WithOnChange = {
render: function () { return (react_1.default.createElement(SliderField_1.SliderField, { header: "Shown on console", min: 0, max: 100, onChange: function (_, data) { return console.log(data); } })); }
};
exports.RangeWithOnChange = {
render: function () { return (react_1.default.createElement(SliderField_1.SliderField, { header: "Shown on console", min: 0, max: 100, onChange: function (_, data) { return console.log(data); }, range: true })); }
};
exports.WithState = {
render: function () {
var _a = (0, react_2.useState)(10), value = _a[0], setRange = _a[1];
return (react_1.default.createElement(SliderField_1.SliderField, { header: "Shown on console", min: 0, max: 10, valueFrom: 0, valueTo: value, onChange: function (_, data) { return setRange(data[1]); } }));
}
};
exports.RangeWithState = {
render: function () {
var _a = (0, react_2.useState)([5, 10]), range = _a[0], setRange = _a[1];
return (react_1.default.createElement(SliderField_1.SliderField, { header: "Shown on console", min: 0, max: 10, valueFrom: range[0], valueTo: range[1], onChange: function (_, data) { return setRange(data); }, range: true }));
}
};