@cimpress/react-components
Version:
React components to support the MCP styleguide
183 lines • 7.3 kB
JavaScript
;
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 textAreaExample_1 = __importDefault(require("./textAreaExample"));
const textAreaExample_tsx_1 = __importDefault(require("!raw-loader!./textAreaExample.tsx"));
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: '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 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 Area", propInfos: textFieldProps },
react_1.default.createElement("h5", null, "Example of a Text Area"),
react_1.default.createElement(textAreaExample_1.default, null),
react_1.default.createElement(react_components_1.CodeExample, { code: textAreaExample_tsx_1.default })));
};
exports.default = TextFieldDocs;
//# sourceMappingURL=index.js.map