diff --git a/package/components/dataDisplay/CoreTable.js b/package/components/dataDisplay/CoreTable.js index 2fb60b55..8a02a803 100644 --- a/package/components/dataDisplay/CoreTable.js +++ b/package/components/dataDisplay/CoreTable.js @@ -23,7 +23,7 @@ export default function CoreTable(props) { } = props; return ( - {props.children}; + props = sanitizeComponentProps(CoreTableBody, props); + return {props?.children}; } + +CoreTableBody.displayName = "CoreTableBody"; +CoreTableBody.validProps = [ + { + description: "The content of the component, normally CoreTableRow.", + name : "children", + types : [{ type: "node" }] + }, + { + description: "The component used for the root node. Either a string to use a HTML element or a component.", + name : "component", + types : [{ type: "elementType" }] + } +]; +CoreTableBody.invalidProps = []; diff --git a/package/components/dataDisplay/CoreTableCell.js b/package/components/dataDisplay/CoreTableCell.js index 773cde32..c236b255 100644 --- a/package/components/dataDisplay/CoreTableCell.js +++ b/package/components/dataDisplay/CoreTableCell.js @@ -4,6 +4,99 @@ import React from "react"; // eslint-disable-next-line import/no-unresolved import { NativeTableCell } from "@wrappid/native"; +import { sanitizeComponentProps } from "../../utils/componentUtil"; + export default function CoreTableCell(props) { + props = sanitizeComponentProps(CoreTableCell, props); return ; } + +CoreTableCell.displayName = "CoreTableCell"; + +CoreTableCell.validProps = [ + { + description: "Set the text-align on the table cell content. Monetary or generally number fields should be right aligned as that allows you to add them up quickly in your head without having to worry about decimals.", + name : "align", + types : [ + { + default : "inherit", + type : "string", + validValues: [ + "left", + "center", + "right", + "justify", + "inherit" + ] + } + ] + }, + { + description: "The content of the component.", + name : "children", + types : [{ type: "node" }] + }, + { + description: "The component used for the root node. Either a string to use a HTML element or a component.", + name : "component", + types : [{ type: "elementType" }] + }, + { + description: "Set the padding applied to the cell. By default, the Table parent component set the padding to 16px. Set padding to 'checkbox' to have padding for the checkbox.", + name : "padding", + types : [ + { + default : "normal", + type : "string", + validValues: ["normal", "checkbox", "none"] + } + ] + }, + { + description: "Set the scope attribute.", + name : "scope", + types : [{ type: "string" }] + }, + { + description: "Specify the size of the cell. The prop defaults to the value ('medium') inherited from the parent CoreTable component.", + name : "size", + types : [ + { + default : "medium", + type : "string", + validValues: ["small", "medium"] + } + ] + }, + { + description: "Set aria-sort direction.", + name : "sortDirection", + types : [ + { + type : "string", + validValues: ["asc", "desc", "false"] + }, + { + default : false, + isDefaultType: true, + type : "boolean", + validValues : [false] + } + ] + }, + { + description: "Specify the cell type. The prop defaults to the value inherited from the parent CoreTableHead, CoreTableBody, or CoreTableFooter components.", + name : "variant", + types : [ + { + default : "body", + type : "string", + validValues: ["body", "footer", "head"] + } + ] + } + +]; + +CoreTableCell.invalidProps = []; + diff --git a/package/components/dataDisplay/CoreTableContainer.js b/package/components/dataDisplay/CoreTableContainer.js index e119ea8c..e1dd0a81 100644 --- a/package/components/dataDisplay/CoreTableContainer.js +++ b/package/components/dataDisplay/CoreTableContainer.js @@ -4,6 +4,25 @@ import React from "react"; // eslint-disable-next-line import/no-unresolved import { NativeTableContainer } from "@wrappid/native"; +import { sanitizeComponentProps } from "../../utils/componentUtil"; + export default function CoreTableContainer(props) { - return {props.children}; + props = sanitizeComponentProps(CoreTableContainer, props); + return {props?.children}; } + +CoreTableContainer.displayName = "CoreTableContainer"; +CoreTableContainer.validProps = [ + { + description: "The content of the component, normally CoreTable.", + name : "children", + types : [{ type: "node" }] + }, + { + description: "The component used for the root node. Either a string to use a HTML element or a component.", + name : "component", + types : [{ type: "elementType" }] + } +]; + +CoreTableContainer.invalidProps = []; \ No newline at end of file diff --git a/package/components/dataDisplay/CoreTableFooter.js b/package/components/dataDisplay/CoreTableFooter.js index 13aea431..e3560735 100644 --- a/package/components/dataDisplay/CoreTableFooter.js +++ b/package/components/dataDisplay/CoreTableFooter.js @@ -4,6 +4,24 @@ import React from "react"; // eslint-disable-next-line import/no-unresolved import { NativeTableFooter } from "@wrappid/native"; +import { sanitizeComponentProps } from "../../utils/componentUtil"; + export default function CoreTableFooter(props) { - return {props.children}; + props = sanitizeComponentProps(CoreTableFooter, props); + return {props?.children}; } +CoreTableFooter.displayName = "CoreTableFooter"; +CoreTableFooter.validProps = [ + { + description: "The content of the component, normally CoreTableRow.", + name : "children", + types : [{ type: "node" }] + }, + { + description: "The component used for the root node. Either a string to use a HTML element or a component.", + name : "component", + types : [{ type: "elementType" }] + } +]; + +CoreTableFooter.invalidProps = []; diff --git a/package/components/dataDisplay/CoreTableHead.js b/package/components/dataDisplay/CoreTableHead.js index 8dcf09a1..ad4cfcc6 100644 --- a/package/components/dataDisplay/CoreTableHead.js +++ b/package/components/dataDisplay/CoreTableHead.js @@ -4,6 +4,25 @@ import React from "react"; // eslint-disable-next-line import/no-unresolved import { NativeTableHead } from "@wrappid/native"; +import { sanitizeComponentProps } from "../../utils/componentUtil"; + export default function CoreTableHead(props) { + props = sanitizeComponentProps(CoreTableHead, props); return {props.children}; } + +CoreTableHead.displayName = "CoreTableHead"; +CoreTableHead.validProps = [ + { + description: "The content of the component, normally CoreTableRow.", + name : "children", + types : [{ type: "node" }] + }, + { + description: "The component used for the root node. Either a string to use a HTML element or a component.", + name : "component", + types : [{ type: "elementType" }] + } +]; + +CoreTableHead.invalidProps = []; diff --git a/package/components/dataDisplay/CoreTablePagination.js b/package/components/dataDisplay/CoreTablePagination.js index a5fd14a8..f9dd4d93 100644 --- a/package/components/dataDisplay/CoreTablePagination.js +++ b/package/components/dataDisplay/CoreTablePagination.js @@ -4,9 +4,12 @@ import React from "react"; // eslint-disable-next-line import/no-unresolved import { NativeTablePagination } from "@wrappid/native"; +import CoreTableCell from "./CoreTableCell"; import { DATA_TABLE_CONST } from "../../config/dataTableConstants"; +import { sanitizeComponentProps } from "../../utils/componentUtil"; export default function CoreTablePagination(props) { + props = sanitizeComponentProps(CoreTablePagination, props); return ( ); } + +CoreTablePagination.displayName = "CoreTablePagination"; +CoreTablePagination.validProps = [ + ...CoreTableCell.validProps, + { + description: "The total number of rows. To enable server side pagination for an unknown number of items, provide -1.", + name : "count", + types : [{ type: "integer" }] + }, + { + description: `Callback fired when the page is changed. +Signature: +function(event: React.MouseEvent | null, page: number) => void + + - event The event source of the callback. + - page The page selected.`, + name : "onPageChange", + types: [{ type: "function" }] + }, + { + description: "The zero-based index of the current page.", + name : "page", + types : [{ type: "integer" }] + }, + { + decription: "The number of rows per page. Set -1 to display all the rows.", + name : "rowsPerPage", + types : [{ type: "integer" }] + }, + { + description: "The component used for displaying the actions. Either a string to use a HTML element or a component.", + name : "ActionsComponent", + types : [ + { + default: "TablePaginationActions", + type : "elementType" + } + ] + }, + { + description: "If true, the component is disabled.", + name : "disabled", + types : [ + { + default : false, + type : "boolean", + validValues: [true, false] + } + ] + }, + { + description: `Accepts a function which returns a string value that provides a user-friendly name for the current page. This is important for screen reader users. +Signature: +function(type: string) => string + + - type The link or button type to format ('first' | 'last' | 'next' | 'previous').`, + name : "getItemAriaLabel", + types: [ + { + // eslint-disable-next-line etc/no-commented-out-code + // default: "function defaultGetAriaLabel(type) { return `Go to ${type} page`; }", + type: "function", + } + ] + }, + { + description: "Customize the displayed rows label. Invoked with a { from, to, count, page } object.", + name : "labelDisplayedRows", + types : [ + { + // eslint-disable-next-line etc/no-commented-out-code + // default: "function defaultLabelDisplayedRows({ from, to, count }) { return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`; }", + type: "function" + } + ] + }, + { + description: "Customize the rows per page label", + name : "labelRowsPerPage", + types : [ + { + default: "Rows per page:", + type : "node" + } + ] + }, + { + description: `Callback fired when the number of rows per page is changed. +Signature: +function(event: React.ChangeEvent) => void + + - event The event source of the callback.`, + name : "onRowsPerPageChange", + types: [{ type: "function" }] + }, + { + description: "Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. Use -1 for the value with a custom label to show all the rows.", + name : "rowsPerPageOptions", + types : [ + { + default: DATA_TABLE_CONST.ROWS_PER_PAGE_OPTIONS, + type : "any" + } + ] + }, + { + description: "If true, show the first-page button.", + name : "showFirstButton", + types : [ + { + default : false, + type : "boolean", + validValues: [true, false] + } + ] + }, + { + description: "If true, show the last-page button.", + name : "showLastButton", + types : [ + { + default : false, + type : "boolean", + validValues: [true, false] + } + ] + }, + { + description: "The props used for each slot inside the CoreTablePagination.", + name : "slotProps", + types : [ + { + default: {}, + type : "object" + } + ] + }, + { + description: "The components used for each slot inside the CoreTablePagination. Either a string to use a HTML element or a component.", + name : "slots", + types : [ + { + default: {}, + type : "object" + } + ] + } +]; diff --git a/package/components/dataDisplay/CoreTableRow.js b/package/components/dataDisplay/CoreTableRow.js index 941a00b0..f0d4d5bc 100644 --- a/package/components/dataDisplay/CoreTableRow.js +++ b/package/components/dataDisplay/CoreTableRow.js @@ -4,6 +4,44 @@ import React from "react"; // eslint-disable-next-line import/no-unresolved import { NativeTableRow } from "@wrappid/native"; +import { sanitizeComponentProps } from "../../utils/componentUtil"; + export default function CoreTableRow(props) { + props = sanitizeComponentProps(CoreTableRow, props); return ; } + +CoreTableRow.displayName = "CoreTableRow"; +CoreTableRow.validProps = [ + { + description: "Should be valid children such as CoreTableCell.", + name : "children", + types : [{ type: "node" }] + }, + { + description: "The component used for the root node. Either a string to use a HTML element or a component.", + name : "component", + types : [{ type: "elementType" }] + }, + { + description: "If true, the table row will shade on hover.", + name : "hover", + types : [ + { + default: false, + type : "boolean" + } + ] + }, + { + description: "If true, the table row will have the selected shading.", + name : "selected", + types : [ + { + default: false, + type : "boolean", + } + ] + } +]; +CoreTableRow.invalidProps = []; diff --git a/package/components/dataDisplay/CoreTableSortLabel.js b/package/components/dataDisplay/CoreTableSortLabel.js index abe57989..a9aa6e6e 100644 --- a/package/components/dataDisplay/CoreTableSortLabel.js +++ b/package/components/dataDisplay/CoreTableSortLabel.js @@ -4,6 +4,192 @@ import React from "react"; // eslint-disable-next-line import/no-unresolved import { NativeTableSortLabel } from "@wrappid/native"; +import { sanitizeComponentProps } from "../../utils/componentUtil"; + export default function CoreTableSortLabel(props) { - return {props.children}; + props = sanitizeComponentProps(CoreTableSortLabel, props); + return {props?.children}; } + +CoreTableSortLabel.displayName = "CoreTableSortLabel"; + +CoreTableSortLabel.validProps = [ + // eslint-disable-next-line etc/no-commented-out-code + /* CoreButtonBase not available. Implementing it's props here separately. + ...CoreButtonBase.validProps, */ + + // eslint-disable-next-line etc/no-commented-out-code + // -----------------Start of CoreButtonBase.validProps----------------- + { + description: "A ref for imperative actions. It currently only supports focusVisible() action.", + name : "action", + types : [{ type: "ref" }] + }, + { + description: "If true, the ripples are centered. They won't start at the cursor interaction position.", + name : "centerRipple", + types : [ + { + default : false, + type : "boolean", + validValues: [true, false] + } + ] + }, + { + description: "The content of the component.", + name : "children", + types : [{ type: "node" }] + }, + { + description: "The component used for the root node. Either a string to use a HTML element or a component. This needs to be able to hold a ref", + name : "component", + types : [{ type: "elementType" }] + }, + { + description: "If true, the component is disabled.", + name : "disabled", + types : [ + { + default : false, + type : "boolean", + validValues: [true, false] + } + ] + }, + { + description: "If true, the ripple effect is disabled. Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class.", + name : "disableRipple", + types : [ + { + default : "false", + type : "boolean", + validValues: [true, false] + } + ] + }, + { + description: "If true, the touch ripple effect is disabled.", + name : "disableTouchRipple", + types : [ + { + default : "false", + type : "boolean", + validValues: [true, false] + } + ] + }, + { + description: "If true, the base button will have a keyboard focus ripple.", + name : "focusRipple", + types : [ + { + default : false, + type : "boolean", + validValues: [true, false] + } + ] + }, + { + description: "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a focus-visible class to other components if needed.", + name : "focusVisibleClassName", + types : [ + { + type : "string", + validValues: [] + } + ] + }, + { + description: "The component used to render a link when the href prop is provided.", + name : "LinkComponent", + types : [{ type: "elementType" }] + }, + { + description: "Callback fired when the component is focused with a keyboard. We trigger a onFocus callback too.", + name : "onFocusVisible", + types : [ + { + type : "function", + validValues: [] + } + ] + }, + { + description: "Props applied to the TouchRipple element.", + name : "TouchRippleProps", + types : [ + { + default: {}, + type : "object", + } + ] + }, + { + description: "A ref that points to the TouchRipple element.", + name : "touchRippleRef", + types : [ + { + // eslint-disable-next-line etc/no-commented-out-code + /* default: "func|{ current?: { pulsate: func, start: func, stop: func } }", + type: "function|{ current?: { pulsate: function, start: function, stop: function } }", */ + type: "function" + }, + { + default: {}, + type : "object" + } + ] + }, + // eslint-disable-next-line etc/no-commented-out-code + // ------------------End of CoreButtonBase.validProps------------------ + { + description: "If true, the label will have the active styling (should be true for the sorted column).", + name : "active", + types : [ + { + default : false, + type : "boolean", + validValues: [true, false] + } + ] + }, + { + description: "Label contents, the arrow will be appended automatically.", + name : "children", + types : [{ type: "node" }] + }, + { + description: "The current sort direction.", + name : "direction", + types : [ + { + default : "asc", + type : "string", + validValues: ["asc", "desc"] + } + ] + }, + { + description: "Hide sort icon when active is false.", + name : "hideSortIcon", + types : [ + { + default : false, + type : "boolean", + validValues: [true, false] + } + ] + }, + { + description: "Sort icon to use.", + name : "IconComponent", + types : [ + { + default: "ElementTypeArrowDownwardIcon", + type : "elementType", + } + ] + } +]; +CoreTableSortLabel.invalidProps = []; \ No newline at end of file