@cimpress/react-components
Version:
React components to support the MCP styleguide
231 lines • 10.6 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_components_1 = require("@cimpress/react-components");
const textFieldExampleArea_jsx_1 = __importDefault(require("./textFieldExampleArea.jsx"));
const textFieldExampleArea_jsx_2 = __importDefault(require("!raw-loader!./textFieldExampleArea.jsx"));
const textFieldExampleNumber_jsx_1 = __importDefault(require("./textFieldExampleNumber.jsx"));
const textFieldExampleNumber_jsx_2 = __importDefault(require("!raw-loader!./textFieldExampleNumber.jsx"));
const textFieldExamplePattern_jsx_1 = __importDefault(require("./textFieldExamplePattern.jsx"));
const textFieldExamplePattern_jsx_2 = __importDefault(require("!raw-loader!./textFieldExamplePattern.jsx"));
const textFieldExampleSimple_jsx_1 = __importDefault(require("./textFieldExampleSimple.jsx"));
const textFieldExampleSimple_jsx_2 = __importDefault(require("!raw-loader!./textFieldExampleSimple.jsx"));
const SearchField_jsx_1 = __importDefault(require("!raw-loader!./SearchField.jsx"));
const SearchField_1 = __importDefault(require("./SearchField"));
const TabbedComponentDoc_1 = __importDefault(require("../../shared/TabbedComponentDoc"));
const TextFieldDocs = () => {
const textFieldProps = [
{
name: 'name',
type: 'string',
default: '',
description: 'Name attribute for the input field',
},
{
name: 'value',
type: 'string or number',
default: '',
description: 'Input value of the text field',
},
{
name: 'label',
type: 'string',
default: '',
description: (react_1.default.createElement("div", null,
"Floating label for an input field. Use either this or ",
react_1.default.createElement("code", null, "placeholder"),
" but not both")),
},
{
name: 'placeholder',
type: 'string',
default: '',
description: (react_1.default.createElement("div", null,
"Placeholder text for an input field. Use either this or ",
react_1.default.createElement("code", null, "label"),
" but not both")),
},
{
name: 'helpText',
type: 'node',
default: '',
description: 'Additional help text to display under the input field.',
},
{
name: 'id',
type: 'string',
default: '',
description: 'ID prop for the input field',
},
{
name: 'required',
type: 'boolean',
default: 'false',
description: (react_1.default.createElement("div", null,
"Marks the text field as required. Only applicable if a ",
react_1.default.createElement("code", null, "label"),
" is provided")),
},
{
name: 'disabled',
type: 'boolean',
default: 'false',
description: 'Marks the text field as disabled',
},
{
name: 'autoFocus',
type: 'boolean',
default: 'false',
description: 'Specifies that the text field focuses automatically',
},
{
name: 'type',
type: 'string',
default: 'text',
description: (react_1.default.createElement("span", null,
"Determines the",
' ',
react_1.default.createElement("a", { href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input", target: "_blank", rel: "noopener noreferrer" }, "HTML5 input type"),
' ',
"of the input. One of ",
react_1.default.createElement("code", null, "text"),
", ",
react_1.default.createElement("code", null, "number"),
", ",
react_1.default.createElement("code", null, "password"),
", ",
react_1.default.createElement("code", null, "url"),
",",
' ',
react_1.default.createElement("code", null, "search"),
", ",
react_1.default.createElement("code", null, "email"),
", or ",
react_1.default.createElement("code", null, "tel"),
". You can also provide ",
react_1.default.createElement("code", null, "textarea"),
" to get a textarea instead of an input element.")),
},
{
name: 'status',
type: 'string',
default: '',
description: (react_1.default.createElement("div", null,
"One of ",
react_1.default.createElement("code", null, "success"),
", ",
react_1.default.createElement("code", null, "warning"),
", or ",
react_1.default.createElement("code", null, "error"),
", provides a validation state.")),
},
{
name: 'className',
type: 'string',
default: '',
description: 'Additional classNames to be appended to the parent element of the input field',
},
{
name: 'style',
type: 'object',
default: '',
description: 'Inline styles to be applied to the root TextField div.',
},
{
name: 'inputStyle',
type: 'object',
default: '',
description: 'Styles to be applied to the input or textarea element.',
},
{
name: 'onChange',
type: 'function',
default: '',
description: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Callback function that is fired when the textfield's value changes. "),
react_1.default.createElement("p", null,
"Signature: ",
react_1.default.createElement("code", null,
"function(event: object) ",
'=>',
" void"),
' '),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "event:"),
" Change event targeting the text field."))),
},
{
name: 'onClick',
type: 'function',
default: '',
description: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Callback function that is fired when the textfield is clicked. "),
react_1.default.createElement("p", null,
"Signature: ",
react_1.default.createElement("code", null,
"function(event: object) ",
'=>',
" void"),
' '),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "event:"),
" Click event targeting the text field."))),
},
{
name: 'onKeyDown',
type: 'function',
default: '',
description: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Callback function that is fired when the textfield's key down event is fired. "),
react_1.default.createElement("p", null,
"Signature: ",
react_1.default.createElement("code", null,
"function(event: object) ",
'=>',
" void"),
' '),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "event:"),
" Change event targeting the text field."))),
},
{
name: 'onFocus',
type: 'function',
default: '',
description: 'Callback function that is fired when the is focused.',
},
{
name: 'onBlur',
type: 'function',
default: '',
description: 'Callback function that is fired when the textfield loses focus.',
},
{
name: 'rightAddon',
type: 'element',
default: '',
description: 'Adds the ability to include a button contained on the right of the text field.',
},
];
return (react_1.default.createElement(TabbedComponentDoc_1.default, { name: "Text Field", propInfos: textFieldProps },
react_1.default.createElement("h5", null, "Example of a simple Text Field"),
react_1.default.createElement(textFieldExampleSimple_jsx_1.default, null),
react_1.default.createElement(react_components_1.CodeExample, { code: textFieldExampleSimple_jsx_2.default }),
react_1.default.createElement("h5", null, "Example of a Text Field with a pattern"),
react_1.default.createElement(textFieldExamplePattern_jsx_1.default, null),
react_1.default.createElement(react_components_1.CodeExample, { code: textFieldExamplePattern_jsx_2.default }),
react_1.default.createElement("h5", null, "Example of a Text Field with a HTML5 number pattern and step increments"),
react_1.default.createElement(textFieldExampleNumber_jsx_1.default, null),
react_1.default.createElement(react_components_1.CodeExample, { code: textFieldExampleNumber_jsx_2.default }),
react_1.default.createElement("h5", null, "Example of a simple Text Field as a text area"),
react_1.default.createElement(textFieldExampleArea_jsx_1.default, null),
react_1.default.createElement(react_components_1.CodeExample, { code: textFieldExampleArea_jsx_2.default }),
react_1.default.createElement("h5", null, "Example of a Search Field using Text Field and Button"),
react_1.default.createElement(SearchField_1.default, null),
react_1.default.createElement(react_components_1.CodeExample, { code: SearchField_jsx_1.default })));
};
exports.default = TextFieldDocs;
//# sourceMappingURL=index.js.map