@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
305 lines (296 loc) • 9.65 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/TableComponents.js";
import { useState } from 'preact/hooks';
import { LabeledButton, Table } from '../../../';
import Library from '../Library';
import { sampleTableContent } from './samples';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
const renderCallback = file => _jsxDEV(_Fragment, {
children: [_jsxDEV("td", {
children: file.displayName
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 5
}, this), _jsxDEV("td", {
children: file.updated
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 5
}, this)]
}, void 0, true);
const customizedRenderCallback = file => _jsxDEV(_Fragment, {
children: [_jsxDEV("td", {
className: "text-grey-6",
children: file.displayName
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 5
}, this), _jsxDEV("td", {
children: file.updated
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 5
}, this)]
}, void 0, true);
const {
tableHeaders,
items
} = sampleTableContent();
function TableExample() {
const [isLoading, setIsLoading] = useState(false);
const [selectedFile, setSelectedFile] = useState(
/** @type {null|object} */
null);
return _jsxDEV(Library.Example, {
title: "Basic Table",
variant: "wide",
children: [_jsxDEV("p", {
children: ["A ", _jsxDEV("code", {
children: "Table"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 11
}, this), " will fill available space if none of its ancestors apply any constraints on height or width. It will fill 100% of its available space horizontally, and take up all the vertical space it needs. In this case, it will change vertical size during loading."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 7
}, this), _jsxDEV(Library.Demo, {
children: [_jsxDEV("div", {
className: "p-5",
children: _jsxDEV(LabeledButton, {
onClick: () => setIsLoading(!isLoading),
children: "Toggle Loading"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 9
}, this), _jsxDEV(Table, {
accessibleLabel: "File list",
isLoading: isLoading,
items: items,
selectedItem: selectedFile,
onSelectItem: file => setSelectedFile(file),
onUseItem: file => alert(`Selected ${file.displayName}`),
renderItem: file => renderCallback(file),
tableHeaders: tableHeaders
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 5
}, this);
}
function ScrollboxTableExample() {
const [isLoading, setIsLoading] = useState(false);
const [selectedFile, setSelectedFile] = useState(
/** @type {null|object} */
items[items.length - 1]);
return _jsxDEV(Library.Example, {
title: "Constrained Table",
variant: "wide",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Tables"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 9
}, this), " render inside of a ", _jsxDEV("code", {
children: "Scrollbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 48
}, this), " container component, which gives the table a scroll context and allows it to scroll if it overflows. Apply height/width constraints to an appropriate parent elements to enable this. Height will not change when loading."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 7
}, this), _jsxDEV("p", {
children: ["In this example, the last item in the table is pre-selected. Also in this example: an additional style is added to the first ", _jsxDEV("code", {
children: "td"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 65
}, this), ' ', "in each row to make its foreground color different (NB: the example here would not meet ARIA contrast requirements). This demonstrates style extension/override."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 7
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: [_jsxDEV("div", {
className: "p-5",
children: _jsxDEV(LabeledButton, {
onClick: () => setIsLoading(!isLoading),
children: "Toggle Loading"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 9
}, this), _jsxDEV("div", {
className: "flex flex-col p-3",
style: "max-height:300px;height:300px;",
children: _jsxDEV(Table, {
accessibleLabel: "File list",
isLoading: isLoading,
items: isLoading ? [] : items,
selectedItem: selectedFile,
onSelectItem: file => setSelectedFile(file),
onUseItem: file => alert(`Selected ${file.displayName}`),
renderItem: file => customizedRenderCallback(file),
tableHeaders: tableHeaders
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 5
}, this);
}
function EmptyTableExample() {
const [isLoading, setIsLoading] = useState(false);
const items = [];
const [selectedFile, setSelectedFile] = useState(
/** @type {null|object} */
items[items.length - 1]);
const emptyItemsMessage = _jsxDEV("p", {
children: ["There are no files available to show.", ' ', _jsxDEV("a", {
href: "https://www.example.com",
children: "Learn more."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 5
}, this);
return _jsxDEV(Library.Example, {
title: "Constrained Table",
variant: "wide",
children: [_jsxDEV("p", {
children: ["This Table has no items (it is empty). When not in loading state, the provided ", _jsxDEV("code", {
children: "emptyItemsMessage"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 18
}, this), " will render centered in the table."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 7
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: [_jsxDEV("div", {
className: "p-5",
children: _jsxDEV(LabeledButton, {
onClick: () => setIsLoading(!isLoading),
children: "Toggle Loading"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 9
}, this), _jsxDEV(Table, {
accessibleLabel: "File list",
emptyItemsMessage: emptyItemsMessage,
isLoading: isLoading,
items: items,
selectedItem: selectedFile,
onSelectItem: file => setSelectedFile(file),
onUseItem: file => alert(`Selected ${file.displayName}`),
renderItem: file => renderCallback(file),
tableHeaders: tableHeaders
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 5
}, this);
}
export default function TableComponents() {
return _jsxDEV(Library.Page, {
title: "Table",
children: _jsxDEV(Library.Pattern, {
title: "Table",
children: [_jsxDEV(TableExample, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 9
}, this), _jsxDEV(ScrollboxTableExample, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 9
}, this), _jsxDEV(EmptyTableExample, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 153,
columnNumber: 5
}, this);
}
//# sourceMappingURL=TableComponents.js.map