@cimpress/react-components
Version:
React components to support the MCP styleguide
244 lines • 10.3 kB
JavaScript
import React from 'react';
import { CodeExample } from '@cimpress/react-components';
import InlineEditCode from '!raw-loader!./inlineedit.jsx';
import InlineEditDemo from './inlineedit.jsx';
import ComponentDoc from '../../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.createElement("div", null,
"Label for an input field. Providing a label is optional, unless the field is ",
React.createElement("code", null, "required"),
".")),
},
{
name: 'placeholder',
type: 'string',
default: '',
description: React.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.createElement("div", null,
"Marks the inline edit as required. Only applicable if a ",
React.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.createElement("span", null,
"Determines the size of the input. Can be one of ",
React.createElement("code", null, "small"),
", ",
React.createElement("code", null, "default"),
", ",
React.createElement("code", null, "h1"),
",",
React.createElement("code", null, "h2"),
", ",
React.createElement("code", null, "h3"),
", ",
React.createElement("code", null, "h4"),
", ",
React.createElement("code", null, "h5"),
", or ",
React.createElement("code", null, "h6"),
".")),
},
{
name: 'type',
type: 'string',
default: 'text',
description: (React.createElement("span", null,
"Determines the",
' ',
React.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.createElement("code", null, "text"),
", ",
React.createElement("code", null, "number"),
", ",
React.createElement("code", null, "password"),
", ",
React.createElement("code", null, "url"),
",",
' ',
React.createElement("code", null, "search"),
", ",
React.createElement("code", null, "email"),
", or ",
React.createElement("code", null, "tel"),
". You can also provide ",
React.createElement("code", null, "textarea"),
" to get a textarea instead of an input element.")),
},
{
name: 'onChange',
type: 'function',
default: '',
description: (React.createElement("div", null,
React.createElement("p", null, "Callback function that is fired when the inline edit's value changes."),
React.createElement("p", null,
"Signature: ",
React.createElement("code", null,
"function(event: object) ",
'=>',
" void"),
' '),
React.createElement("p", null,
React.createElement("code", null, "event:"),
" Change event targeting the inline edit."))),
},
{
name: 'onSave',
type: 'function',
default: '',
description: (React.createElement("div", null,
React.createElement("p", null, "Callback function that is fired when a user clicks the save button or presses enter. "),
React.createElement("p", null,
"If using onSave it can be optionally paired with ",
React.createElement("code", null, "onCancel"),
". Do not use with",
' ',
React.createElement("code", null, "onChange")),
React.createElement("p", null,
"Signature: ",
React.createElement("code", null,
"function(inputTarget: object, event: object) ",
'=>',
" void"),
' '),
React.createElement("p", null,
React.createElement("code", null, "inputTarget:"),
" object containing ",
React.createElement("code", null, "value: string"),
" and ",
React.createElement("code", null, "name: string"),
"."),
React.createElement("p", null,
React.createElement("code", null, "event:"),
" keyboard event or mouse event triggered when user saves changes."))),
},
{
name: 'onCancel',
type: 'function',
default: '',
description: (React.createElement("div", null,
React.createElement("p", null, "Callback function that is fired when the cancel button is clicked. "),
React.createElement("p", null,
"This callback is optional but can be used in conjunction with ",
React.createElement("code", null, "onSuccess"),
"."),
React.createElement("p", null,
"Signature: ",
React.createElement("code", null,
"function(value: string, event: object) ",
'=>',
" void"),
' '),
React.createElement("p", null,
React.createElement("code", null, "value:"),
" The input fields value(useful if changes were made and you'd like to save a draft)."),
React.createElement("p", null,
React.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.createElement("div", null,
React.createElement("p", null, "Function that is invoked to validate the text input during edited. "),
React.createElement("p", null, "This callback is optional."),
React.createElement("p", null, "It will not be invoked if the onChange handler is provided."),
React.createElement("p", null,
"Signature: ",
React.createElement("code", null,
"function(text: string) ",
'=>',
" string | null | undefined"),
' '),
React.createElement("p", null,
React.createElement("code", null, "text:"),
" The input to be validated."),
React.createElement("p", null,
React.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.createElement("div", null,
React.createElement("p", null, "Optional callback function that is fired when the editing starts and ends."),
React.createElement("p", null,
"Signature: ",
React.createElement("code", null,
"function(isEditing: boolean) ",
'=>',
" void"),
' '))),
},
];
return (React.createElement(ComponentDoc, { name: "Inline Edit", propInfos: props },
React.createElement(InlineEditDemo, null),
React.createElement(CodeExample, { code: InlineEditCode })));
};
export default InlineEditDocs;
//# sourceMappingURL=index.js.map