@cimpress/react-components
Version:
React components to support the MCP styleguide
81 lines • 4.49 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 select_jsx_1 = __importDefault(require("!raw-loader!./select.jsx"));
const select_jsx_2 = __importDefault(require("./select.jsx"));
const TabbedComponentDoc_1 = __importDefault(require("../../shared/TabbedComponentDoc"));
const SelectDocs = () => {
const propInfos = [
{
name: 'containerClassName',
type: 'string',
default: '',
description: 'A class name to append to the div that wraps the select component.',
},
{
name: 'label',
type: 'string',
default: '',
description: 'Label for the select field. If you provide a `placeholder` (per react-select props), it will be used as the label.',
},
{
name: 'helpText',
type: 'node',
default: '',
description: 'Additional help text to display under the select field.',
},
{
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.")),
},
];
const remarks = (react_1.default.createElement("div", null,
react_1.default.createElement("p", null,
"This select is a thin layer of interactivity layered over",
' ',
react_1.default.createElement("a", { href: "https://github.com/JedWatson/react-select", target: "_blank", rel: "noopener noreferrer" }, "react-select"),
' ',
"to provide a consistent look and feel with the rest of the component library. Refer to the",
' ',
react_1.default.createElement("a", { href: "https://github.com/JedWatson/react-select#select-props", target: "_blank", rel: "noopener noreferrer" }, "react-select props documentation"),
' ',
"for the rest of the list of props available."),
react_1.default.createElement("p", null,
react_1.default.createElement("strong", null, "Note:"),
" As of version 14.x, the ",
react_1.default.createElement("code", null, "tether"),
" prop, used for improved layering behavior of the Select's options, has been removed in preference for the ",
react_1.default.createElement("code", null, "menuPortalTarget"),
" prop supported by react-select. Please see react-select documentation for more details. If you find that the option list is hidden or covered by other elements, ",
react_1.default.createElement("code", null, "menuPortalTarget"),
" is probably the fix you're looking for."),
react_1.default.createElement("p", null,
"To keep the bundle size small, only one select has been included in this package. If you wish to use a different Select (such as",
' ',
react_1.default.createElement("a", { href: "https://github.com/bvaughn/react-virtualized-select", target: "_blank", rel: "noopener noreferrer" }, "react-virtualized-select"),
' ',
"or",
' ',
react_1.default.createElement("a", { href: "https://github.com/HubSpot/react-select-plus", target: "_blank", rel: "noopener noreferrer" }, "react-select-plus"),
") you can use the ",
react_1.default.createElement("a", { href: "#SelectWrapper" }, "SelectWrapper"),
" with another supported Select to obtain the interactivity.")));
return (react_1.default.createElement(TabbedComponentDoc_1.default, { name: "Select", propInfos: propInfos, remarks: remarks },
react_1.default.createElement(select_jsx_2.default, null),
react_1.default.createElement(react_components_1.CodeExample, { code: select_jsx_1.default })));
};
exports.default = SelectDocs;
//# sourceMappingURL=index.js.map