@cimpress/react-components
Version:
React components to support the MCP styleguide
249 lines • 11.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 inlineedit_jsx_1 = __importDefault(require("!raw-loader!./inlineedit.jsx"));
const inlineedit_jsx_2 = __importDefault(require("./inlineedit.jsx"));
const TabbedComponentDoc_1 = __importDefault(require("../../shared/TabbedComponentDoc"));
const InlineEditDocs = () => {
const props = [
{
name: 'name',
type: 'string',
default: '',
description: 'Name attribute for the input field',
},
{
name: 'value',
type: 'string or number',
default: '',
description: 'Input value of the input field',
},
{
name: 'label',
type: 'string',
default: '',
description: (react_1.default.createElement("div", null,
"Label for an input field. Providing a label is optional, unless the field is ",
react_1.default.createElement("code", null, "required"),
".")),
},
{
name: 'placeholder',
type: 'string',
default: '',
description: react_1.default.createElement("div", null, "Placeholder text for an input field and resting text when missing a value."),
},
{
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 inline edit as required. Only applicable if a ",
react_1.default.createElement("code", null, "label"),
" is provided")),
},
{
name: 'disabled',
type: 'boolean',
default: 'false',
description: 'Will disable the ability to interact with the inline edit',
},
{
name: 'requiredWarningMessage',
type: 'string',
default: 'This Field is Required',
description: 'This prop can be used to localize the warning to display when a field is required',
},
{
name: 'size',
type: 'sting',
default: 'default',
description: (react_1.default.createElement("span", null,
"Determines the size of the input. Can be one of ",
react_1.default.createElement("code", null, "small"),
", ",
react_1.default.createElement("code", null, "default"),
", ",
react_1.default.createElement("code", null, "h1"),
",",
react_1.default.createElement("code", null, "h2"),
", ",
react_1.default.createElement("code", null, "h3"),
", ",
react_1.default.createElement("code", null, "h4"),
", ",
react_1.default.createElement("code", null, "h5"),
", or ",
react_1.default.createElement("code", null, "h6"),
".")),
},
{
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: 'onChange',
type: 'function',
default: '',
description: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Callback function that is fired when the inline edit'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 inline edit."))),
},
{
name: 'onSave',
type: 'function',
default: '',
description: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Callback function that is fired when a user clicks the save button or presses enter. "),
react_1.default.createElement("p", null,
"If using onSave it can be optionally paired with ",
react_1.default.createElement("code", null, "onCancel"),
". Do not use with",
' ',
react_1.default.createElement("code", null, "onChange")),
react_1.default.createElement("p", null,
"Signature: ",
react_1.default.createElement("code", null,
"function(inputTarget: object, event: object) ",
'=>',
" void"),
' '),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "inputTarget:"),
" object containing ",
react_1.default.createElement("code", null, "value: string"),
" and ",
react_1.default.createElement("code", null, "name: string"),
"."),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "event:"),
" keyboard event or mouse event triggered when user saves changes."))),
},
{
name: 'onCancel',
type: 'function',
default: '',
description: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Callback function that is fired when the cancel button is clicked. "),
react_1.default.createElement("p", null,
"This callback is optional but can be used in conjunction with ",
react_1.default.createElement("code", null, "onSuccess"),
"."),
react_1.default.createElement("p", null,
"Signature: ",
react_1.default.createElement("code", null,
"function(value: string, event: object) ",
'=>',
" void"),
' '),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "value:"),
" The input fields value(useful if changes were made and you'd like to save a draft)."),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "event:"),
" Click event targeting the cancel button."))),
},
{
name: 'onFocus',
type: 'function',
default: '',
description: 'Callback function that is fired when the inline edit is focused.',
},
{
name: 'onBlur',
type: 'function',
default: '',
description: 'Callback function that is fired when the inline edit loses focus.',
},
{
name: 'validateInput',
type: 'function',
default: '',
description: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Function that is invoked to validate the text input during edited. "),
react_1.default.createElement("p", null, "This callback is optional."),
react_1.default.createElement("p", null, "It will not be invoked if the onChange handler is provided."),
react_1.default.createElement("p", null,
"Signature: ",
react_1.default.createElement("code", null,
"function(text: string) ",
'=>',
" string | null | undefined"),
' '),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "text:"),
" The input to be validated."),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "returns:"),
" The error message or null/undefined if valid."))),
},
{
name: 'minWidth',
type: 'number',
default: '130',
description: 'Specifies the minimum width of the control',
},
{
name: 'onEditStateChange',
type: 'function',
default: '',
description: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Optional callback function that is fired when the editing starts and ends."),
react_1.default.createElement("p", null,
"Signature: ",
react_1.default.createElement("code", null,
"function(isEditing: boolean) ",
'=>',
" void"),
' '))),
},
];
return (react_1.default.createElement(TabbedComponentDoc_1.default, { name: "Inline Edit", propInfos: props },
react_1.default.createElement(inlineedit_jsx_2.default, null),
react_1.default.createElement(react_components_1.CodeExample, { code: inlineedit_jsx_1.default })));
};
exports.default = InlineEditDocs;
//# sourceMappingURL=index.js.map