decentraland-ui
Version:
Decentraland's UI components and styles
96 lines (95 loc) • 7.23 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.WithWarningInfoAndErrorMessages = exports.WithAReactElementAsAMessage = exports.WithMaxLengthAndLabel = exports.WithBorders = exports.InsideAForm = exports.WithIcon = exports.Action = exports.Date = exports.Disabled = exports.Numeric = exports.Address = exports.Loading = exports.Error = exports.Message = exports.Value = exports.Placeholder = void 0;
var react_1 = __importDefault(require("react"));
var Form_1 = __importDefault(require("semantic-ui-react/dist/commonjs/collections/Form"));
var Icon_1 = __importDefault(require("semantic-ui-react/dist/commonjs/elements/Icon/Icon"));
var Field_1 = require("./Field");
var address = '0x68FFc53C43C65C8Dd778969320e21B85b10363cE';
var meta = {
title: 'Field',
component: Field_1.Field
};
exports.default = meta;
exports.Placeholder = {
render: function () { return react_1.default.createElement(Field_1.Field, { label: "Label", placeholder: "Placeholder" }); }
};
exports.Value = {
render: function () { return react_1.default.createElement(Field_1.Field, { label: "Label", value: "Input Value" }); }
};
exports.Message = {
render: function () { return (react_1.default.createElement(Field_1.Field, { label: "Label", value: "Input Value", message: "Additional comment" })); }
};
exports.Error = {
render: function () { return (react_1.default.createElement(Field_1.Field, { label: "Label", value: "Input Value", message: "Some warning", error: true })); }
};
exports.Loading = {
render: function () { return react_1.default.createElement(Field_1.Field, { label: "Label", value: "Input Value", loading: true }); }
};
exports.Address = {
render: function () { return react_1.default.createElement(Field_1.Field, { label: "Label", value: address, type: "address" }); }
};
exports.Numeric = {
render: function () { return react_1.default.createElement(Field_1.Field, { label: "Label", placeholder: "1,000", type: "number" }); }
};
exports.Disabled = {
render: function () { return react_1.default.createElement(Field_1.Field, { label: "Label", value: "This is disabled", disabled: true }); }
};
exports.Date = {
render: function () { return (react_1.default.createElement(Form_1.default, null,
react_1.default.createElement(Field_1.Field, { label: "Date input", type: "date", onChange: function (_event, props) {
console.log(props.value);
} }),
react_1.default.createElement(Field_1.Field, { label: "Date input with value pre selected", type: "date", onChange: function (_event, props) {
console.log(props.value);
}, value: '1996-12-19' }))); }
};
exports.Action = {
render: function () { return (react_1.default.createElement(Field_1.Field, { label: "Label", value: "Input value", action: "submit", onAction: function () { return alert('Action triggered!'); } })); }
};
exports.WithIcon = {
render: function () { return (react_1.default.createElement(Field_1.Field, { label: "Label", value: "Input value", action: "submit", icon: react_1.default.createElement(Icon_1.default, { name: "search" }), iconPosition: "left", onAction: function () { return alert('Action triggered!'); } })); }
};
exports.InsideAForm = {
render: function () { return (react_1.default.createElement(Form_1.default, null,
react_1.default.createElement(Field_1.Field, { label: "Label", placeholder: "Placeholder" }),
react_1.default.createElement(Field_1.Field, { label: "Label", value: "Input Value" }),
react_1.default.createElement(Field_1.Field, { label: "Label", value: "Input Value", message: "Additional comment" }),
react_1.default.createElement(Field_1.Field, { type: "address", label: "Label", value: "Input Value", message: "Some warning", error: true }),
react_1.default.createElement(Field_1.Field, { label: "Label", value: "Input Value", loading: true }),
react_1.default.createElement(Field_1.Field, { label: "Label", value: address, type: "address" }),
react_1.default.createElement(Field_1.Field, { label: "Label", placeholder: "1,000", type: "number" }),
react_1.default.createElement(Field_1.Field, { label: "Label", value: "This is disabled", disabled: true }),
react_1.default.createElement(Field_1.Field, { label: "Label", value: "Input value", action: "submit", onAction: function () { return alert('Action triggered!'); } }))); }
};
exports.WithBorders = {
render: function () { return (react_1.default.createElement(Form_1.default, null,
react_1.default.createElement(Field_1.Field, { label: "Label", placeholder: "Placeholder", kind: "full" }),
react_1.default.createElement(Field_1.Field, { label: "Label", value: "Input Value", kind: "full" }),
react_1.default.createElement(Field_1.Field, { label: "Label", value: "Input Value", message: "Additional comment", kind: "full" }),
react_1.default.createElement(Field_1.Field, { type: "address", label: "Label", value: "Input Value", message: "Some warning", kind: "full", error: true }),
react_1.default.createElement(Field_1.Field, { label: "Label", value: "Input Value", loadin: true, kind: "full" }),
react_1.default.createElement(Field_1.Field, { label: "Label", value: address, type: "address", kind: "full" }),
react_1.default.createElement(Field_1.Field, { label: "Label", placeholder: "1,000", type: "number", kind: "full" }),
react_1.default.createElement(Field_1.Field, { label: "Label", value: "This is disabled", disabled: true, kind: "full" }),
react_1.default.createElement(Field_1.Field, { label: "Label", value: "Input value", action: "submit", onAction: function () { return alert('Action triggered!'); }, kind: "full" }))); }
};
exports.WithMaxLengthAndLabel = {
render: function () { return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Field_1.Field, { maxLength: 20, value: "A value" }),
react_1.default.createElement(Field_1.Field, { label: "A label", maxLength: 20, value: "A value" }))); }
};
exports.WithAReactElementAsAMessage = {
render: function () { return (react_1.default.createElement(Field_1.Field, { label: "A label", value: "A value", message: react_1.default.createElement("label", null, "A message") })); }
};
exports.WithWarningInfoAndErrorMessages = {
render: function () { return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Field_1.Field, { label: "A label", maxLength: 20, value: "An error value", error: true, message: 'This is an error!' }),
react_1.default.createElement("br", null),
react_1.default.createElement(Field_1.Field, { label: "A label", maxLength: 20, value: "A value", warning: 'The value is duplicated' }),
react_1.default.createElement("br", null),
react_1.default.createElement(Field_1.Field, { label: "A label", maxLength: 20, value: "A value", info: 'This input can have at maximum 20 characters' }))); }
};