@webiny/ui 0.0.0-unstable.9e825fd5fb → 0.0.0-unstable.aa00eecd97
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DataTable/DataTable.js +5 -2
- package/DataTable/DataTable.js.map +1 -1
- package/DataTable/styled.js +2 -2
- package/DataTable/styled.js.map +1 -1
- package/Input/Input.js +1 -1
- package/Input/Input.js.map +1 -1
- package/List/DataList/DataListModalOverlay/DataListModalOverlay.js +3 -2
- package/List/DataList/DataListModalOverlay/DataListModalOverlay.js.map +1 -1
- package/Menu/Menu.js +2 -1
- package/Menu/Menu.js.map +1 -1
- package/Tabs/Tabs.js +7 -1
- package/Tabs/Tabs.js.map +1 -1
- package/package.json +37 -37
package/DataTable/DataTable.js
CHANGED
|
@@ -29,7 +29,8 @@ var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial)
|
|
|
29
29
|
meta = column.meta,
|
|
30
30
|
_cell = column.cell,
|
|
31
31
|
_column$enableSorting = column.enableSorting,
|
|
32
|
-
enableSorting = _column$enableSorting === void 0 ? false : _column$enableSorting
|
|
32
|
+
enableSorting = _column$enableSorting === void 0 ? false : _column$enableSorting,
|
|
33
|
+
className = column.className;
|
|
33
34
|
return {
|
|
34
35
|
accessorKey: id,
|
|
35
36
|
header: function header() {
|
|
@@ -43,7 +44,9 @@ var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial)
|
|
|
43
44
|
}
|
|
44
45
|
},
|
|
45
46
|
enableSorting: enableSorting,
|
|
46
|
-
meta: meta
|
|
47
|
+
meta: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, meta), {}, {
|
|
48
|
+
className: className
|
|
49
|
+
})
|
|
47
50
|
};
|
|
48
51
|
});
|
|
49
52
|
var select = !!onSelectRow ? [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defineColumns","columns","onSelectRow","loadingInitial","useMemo","columnsList","Object","keys","map","key","id","defaults","column","header","meta","cell","enableSorting","accessorKey","info","row","original","getValue","select","table","getIsSomeRowsSelected","getIsAllRowsSelected","e","toggleAllPageRowsSelected","getCanSelect","getIsSomeSelected","getIsSelected","getToggleSelectedHandler","hasFormControl","className","defineData","data","Array","fill","ColumnDirection","direction","DataTable","stickyColumns","stickyRows","bordered","sorting","onSortingChange","React","useState","rowSelection","setRowSelection","useReactTable","getCoreRowModel","getSortedRowModel","state","enableRowSelection","selectable","onRowSelectionChange","manualSorting","useEffect","dataSelected","getSelectedRowModel","flatRows","getHeaderGroups","headerGroup","headers","isPlaceholder","getContext","columnDef","getToggleSortingHandler","getCanSort","flexRender","getIsSorted","undefined","getRowModel","rows","hasOwnProperty","index","getVisibleCells"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { ReactElement, useEffect, useMemo } from \"react\";\n\nimport {\n DataTableContent,\n DataTableHead,\n DataTableRow,\n DataTableHeadCell,\n DataTableBody,\n DataTableCell,\n DataTableCellProps\n} from \"@rmwc/data-table\";\n\nimport {\n flexRender,\n getCoreRowModel,\n useReactTable,\n ColumnDef,\n getSortedRowModel,\n OnChangeFn,\n SortingState\n} from \"@tanstack/react-table\";\n\nimport { Checkbox } from \"~/Checkbox\";\nimport { Skeleton } from \"~/Skeleton\";\n\nimport \"@rmwc/data-table/data-table.css\";\nimport { ColumnDirectionIcon, ColumnDirectionWrapper, ColumnHeaderWrapper, Table } from \"./styled\";\n\ninterface Column<T> {\n /*\n * Column header component.\n */\n header: string | number | JSX.Element;\n /*\n * Cell renderer, receives the full row and returns the value to render inside the cell.\n */\n cell?: (row: T) => string | number | JSX.Element;\n /*\n * Additional props to add to both header and row cells. Refer to RMWC documentation.\n */\n meta?: DataTableCellProps;\n /*\n * Column class names.\n */\n className?: string;\n /*\n * Enable column sorting.\n */\n enableSorting?: boolean;\n}\n\nexport type Columns<T> = {\n [P in keyof T]?: Column<T>;\n};\n\nexport type DefaultData = {\n /*\n * Define if a specific row can be selected.\n */\n selectable?: boolean;\n};\n\nexport type Sorting = SortingState;\n\nexport type OnSortingChange = OnChangeFn<Sorting>;\n\ninterface Props<T> {\n /*\n * Columns definition.\n */\n columns: Columns<T>;\n /*\n * Data to display into DataTable body.\n */\n data: T[];\n /*\n * Callback that receives the selected rows.\n */\n onSelectRow?: (rows: T[] | []) => void;\n /*\n * Render the skeleton state at the initial data loading.\n */\n loadingInitial?: boolean;\n /*\n * The number of columns to affix to the side of the table when scrolling.\n */\n stickyColumns?: number;\n /*\n * The number of rows to affix to the top of the table when scrolling.\n */\n stickyRows?: number;\n /*\n * Show or hide borders.\n */\n bordered?: boolean;\n /*\n * Sorting state.\n */\n sorting?: Sorting;\n /*\n * Callback that receives current sorting state.\n */\n onSortingChange?: OnSortingChange;\n}\n\nexport interface ColumnDirectionProps {\n direction?: \"asc\" | \"desc\";\n}\n\nconst defineColumns = <T,>(\n columns: Props<T>[\"columns\"],\n onSelectRow: Props<T>[\"onSelectRow\"],\n loadingInitial: Props<T>[\"loadingInitial\"]\n): ColumnDef<T>[] =>\n useMemo(() => {\n const columnsList = Object.keys(columns).map(key => ({\n id: key,\n ...columns[key as keyof typeof columns]\n }));\n\n const defaults: ColumnDef<T>[] = columnsList.map(column => {\n const { id, header, meta, cell, enableSorting = false } = column;\n\n return {\n accessorKey: id,\n header: () => header,\n cell: info => {\n if (cell && typeof cell === \"function\") {\n return cell(info.row.original);\n } else {\n return info.getValue();\n }\n },\n enableSorting,\n meta\n };\n });\n\n const select: ColumnDef<T>[] = !!onSelectRow\n ? [\n {\n id: \"datatable-select-column\",\n header: ({ table }) =>\n !loadingInitial && (\n <Checkbox\n indeterminate={table.getIsSomeRowsSelected()}\n value={table.getIsAllRowsSelected()}\n onChange={e => table.toggleAllPageRowsSelected(e)}\n />\n ),\n cell: info => {\n if (!info.row.getCanSelect()) {\n return <></>;\n }\n return (\n <Checkbox\n indeterminate={info.row.getIsSomeSelected()}\n value={info.row.getIsSelected()}\n onChange={info.row.getToggleSelectedHandler()}\n />\n );\n },\n meta: {\n hasFormControl: true,\n className: \"datatable-select-column\"\n },\n enableSorting: false\n }\n ]\n : [];\n\n return [...select, ...defaults].map(column => {\n if (loadingInitial) {\n return {\n ...column,\n cell: () => <Skeleton />\n };\n }\n\n return column;\n });\n }, [columns, onSelectRow, loadingInitial]);\n\nconst defineData = <T,>(\n data: Props<T>[\"data\"],\n loadingInitial: Props<T>[\"loadingInitial\"]\n): T[] => {\n return useMemo(() => {\n if (loadingInitial) {\n return Array(10).fill({});\n }\n return data;\n }, [data, loadingInitial]);\n};\n\nconst ColumnDirection = ({ direction }: ColumnDirectionProps): ReactElement | null => {\n if (direction) {\n return (\n <ColumnDirectionWrapper>\n <ColumnDirectionIcon direction={direction} />\n </ColumnDirectionWrapper>\n );\n }\n\n return null;\n};\n\nexport const DataTable = <T extends Object & DefaultData>({\n data,\n columns,\n onSelectRow,\n loadingInitial,\n stickyColumns,\n stickyRows,\n bordered,\n sorting,\n onSortingChange\n}: Props<T>) => {\n const [rowSelection, setRowSelection] = React.useState({});\n\n const table = useReactTable({\n data: defineData(data, loadingInitial),\n columns: defineColumns(columns, onSelectRow, loadingInitial),\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n state: {\n rowSelection,\n sorting\n },\n enableRowSelection: row => row.original.selectable || false,\n onRowSelectionChange: setRowSelection,\n enableSorting: !!onSortingChange,\n manualSorting: true,\n onSortingChange\n });\n\n useEffect(() => {\n if (onSelectRow && typeof onSelectRow === \"function\") {\n const dataSelected = table.getSelectedRowModel().flatRows.map(row => row.original);\n onSelectRow(dataSelected);\n }\n }, [rowSelection]);\n\n return (\n <Table stickyColumns={stickyColumns} stickyRows={stickyRows} bordered={bordered}>\n <DataTableContent>\n <DataTableHead>\n {table.getHeaderGroups().map(headerGroup => (\n <DataTableRow key={headerGroup.id}>\n {headerGroup.headers.map(\n ({ id, isPlaceholder, column, getContext }) => (\n <DataTableHeadCell key={id} {...column.columnDef.meta}>\n {isPlaceholder ? null : (\n <ColumnHeaderWrapper\n onClick={column.getToggleSortingHandler()}\n sortable={column.getCanSort()}\n >\n {flexRender(column.columnDef.header, getContext())}\n <ColumnDirection\n direction={column.getIsSorted() || undefined}\n />\n </ColumnHeaderWrapper>\n )}\n </DataTableHeadCell>\n )\n )}\n </DataTableRow>\n ))}\n </DataTableHead>\n <DataTableBody>\n {table.getRowModel().rows.map(row => (\n <DataTableRow\n key={row.id}\n selected={rowSelection.hasOwnProperty(row.index)}\n >\n {row.getVisibleCells().map(cell => (\n <DataTableCell key={cell.id} {...cell.column.columnDef.meta}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </DataTableCell>\n ))}\n </DataTableRow>\n ))}\n </DataTableBody>\n </DataTableContent>\n </Table>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["defineColumns","columns","onSelectRow","loadingInitial","useMemo","columnsList","Object","keys","map","key","id","defaults","column","header","meta","cell","enableSorting","className","accessorKey","info","row","original","getValue","select","table","getIsSomeRowsSelected","getIsAllRowsSelected","e","toggleAllPageRowsSelected","getCanSelect","getIsSomeSelected","getIsSelected","getToggleSelectedHandler","hasFormControl","defineData","data","Array","fill","ColumnDirection","direction","DataTable","stickyColumns","stickyRows","bordered","sorting","onSortingChange","React","useState","rowSelection","setRowSelection","useReactTable","getCoreRowModel","getSortedRowModel","state","enableRowSelection","selectable","onRowSelectionChange","manualSorting","useEffect","dataSelected","getSelectedRowModel","flatRows","getHeaderGroups","headerGroup","headers","isPlaceholder","getContext","columnDef","getToggleSortingHandler","getCanSort","flexRender","getIsSorted","undefined","getRowModel","rows","hasOwnProperty","index","getVisibleCells"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { ReactElement, useEffect, useMemo } from \"react\";\n\nimport {\n DataTableContent,\n DataTableHead,\n DataTableRow,\n DataTableHeadCell,\n DataTableBody,\n DataTableCell,\n DataTableCellProps\n} from \"@rmwc/data-table\";\n\nimport {\n flexRender,\n getCoreRowModel,\n useReactTable,\n ColumnDef,\n getSortedRowModel,\n OnChangeFn,\n SortingState\n} from \"@tanstack/react-table\";\n\nimport { Checkbox } from \"~/Checkbox\";\nimport { Skeleton } from \"~/Skeleton\";\n\nimport \"@rmwc/data-table/data-table.css\";\nimport { ColumnDirectionIcon, ColumnDirectionWrapper, ColumnHeaderWrapper, Table } from \"./styled\";\n\ninterface Column<T> {\n /*\n * Column header component.\n */\n header: string | number | JSX.Element;\n /*\n * Cell renderer, receives the full row and returns the value to render inside the cell.\n */\n cell?: (row: T) => string | number | JSX.Element;\n /*\n * Additional props to add to both header and row cells. Refer to RMWC documentation.\n */\n meta?: DataTableCellProps;\n /*\n * Column class names.\n */\n className?: string;\n /*\n * Enable column sorting.\n */\n enableSorting?: boolean;\n}\n\nexport type Columns<T> = {\n [P in keyof T]?: Column<T>;\n};\n\nexport type DefaultData = {\n /*\n * Define if a specific row can be selected.\n */\n selectable?: boolean;\n};\n\nexport type Sorting = SortingState;\n\nexport type OnSortingChange = OnChangeFn<Sorting>;\n\ninterface Props<T> {\n /*\n * Columns definition.\n */\n columns: Columns<T>;\n /*\n * Data to display into DataTable body.\n */\n data: T[];\n /*\n * Callback that receives the selected rows.\n */\n onSelectRow?: (rows: T[] | []) => void;\n /*\n * Render the skeleton state at the initial data loading.\n */\n loadingInitial?: boolean;\n /*\n * The number of columns to affix to the side of the table when scrolling.\n */\n stickyColumns?: number;\n /*\n * The number of rows to affix to the top of the table when scrolling.\n */\n stickyRows?: number;\n /*\n * Show or hide borders.\n */\n bordered?: boolean;\n /*\n * Sorting state.\n */\n sorting?: Sorting;\n /*\n * Callback that receives current sorting state.\n */\n onSortingChange?: OnSortingChange;\n}\n\nexport interface ColumnDirectionProps {\n direction?: \"asc\" | \"desc\";\n}\n\nconst defineColumns = <T,>(\n columns: Props<T>[\"columns\"],\n onSelectRow: Props<T>[\"onSelectRow\"],\n loadingInitial: Props<T>[\"loadingInitial\"]\n): ColumnDef<T>[] =>\n useMemo(() => {\n const columnsList = Object.keys(columns).map(key => ({\n id: key,\n ...columns[key as keyof typeof columns]\n }));\n\n const defaults: ColumnDef<T>[] = columnsList.map(column => {\n const { id, header, meta, cell, enableSorting = false, className } = column;\n\n return {\n accessorKey: id,\n header: () => header,\n cell: info => {\n if (cell && typeof cell === \"function\") {\n return cell(info.row.original);\n } else {\n return info.getValue();\n }\n },\n enableSorting,\n meta: {\n ...meta,\n className\n }\n };\n });\n\n const select: ColumnDef<T>[] = !!onSelectRow\n ? [\n {\n id: \"datatable-select-column\",\n header: ({ table }) =>\n !loadingInitial && (\n <Checkbox\n indeterminate={table.getIsSomeRowsSelected()}\n value={table.getIsAllRowsSelected()}\n onChange={e => table.toggleAllPageRowsSelected(e)}\n />\n ),\n cell: info => {\n if (!info.row.getCanSelect()) {\n return <></>;\n }\n return (\n <Checkbox\n indeterminate={info.row.getIsSomeSelected()}\n value={info.row.getIsSelected()}\n onChange={info.row.getToggleSelectedHandler()}\n />\n );\n },\n meta: {\n hasFormControl: true,\n className: \"datatable-select-column\"\n },\n enableSorting: false\n }\n ]\n : [];\n\n return [...select, ...defaults].map(column => {\n if (loadingInitial) {\n return {\n ...column,\n cell: () => <Skeleton />\n };\n }\n\n return column;\n });\n }, [columns, onSelectRow, loadingInitial]);\n\nconst defineData = <T,>(\n data: Props<T>[\"data\"],\n loadingInitial: Props<T>[\"loadingInitial\"]\n): T[] => {\n return useMemo(() => {\n if (loadingInitial) {\n return Array(10).fill({});\n }\n return data;\n }, [data, loadingInitial]);\n};\n\nconst ColumnDirection = ({ direction }: ColumnDirectionProps): ReactElement | null => {\n if (direction) {\n return (\n <ColumnDirectionWrapper>\n <ColumnDirectionIcon direction={direction} />\n </ColumnDirectionWrapper>\n );\n }\n\n return null;\n};\n\nexport const DataTable = <T extends Object & DefaultData>({\n data,\n columns,\n onSelectRow,\n loadingInitial,\n stickyColumns,\n stickyRows,\n bordered,\n sorting,\n onSortingChange\n}: Props<T>) => {\n const [rowSelection, setRowSelection] = React.useState({});\n\n const table = useReactTable({\n data: defineData(data, loadingInitial),\n columns: defineColumns(columns, onSelectRow, loadingInitial),\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n state: {\n rowSelection,\n sorting\n },\n enableRowSelection: row => row.original.selectable || false,\n onRowSelectionChange: setRowSelection,\n enableSorting: !!onSortingChange,\n manualSorting: true,\n onSortingChange\n });\n\n useEffect(() => {\n if (onSelectRow && typeof onSelectRow === \"function\") {\n const dataSelected = table.getSelectedRowModel().flatRows.map(row => row.original);\n onSelectRow(dataSelected);\n }\n }, [rowSelection]);\n\n return (\n <Table stickyColumns={stickyColumns} stickyRows={stickyRows} bordered={bordered}>\n <DataTableContent>\n <DataTableHead>\n {table.getHeaderGroups().map(headerGroup => (\n <DataTableRow key={headerGroup.id}>\n {headerGroup.headers.map(\n ({ id, isPlaceholder, column, getContext }) => (\n <DataTableHeadCell key={id} {...column.columnDef.meta}>\n {isPlaceholder ? null : (\n <ColumnHeaderWrapper\n onClick={column.getToggleSortingHandler()}\n sortable={column.getCanSort()}\n >\n {flexRender(column.columnDef.header, getContext())}\n <ColumnDirection\n direction={column.getIsSorted() || undefined}\n />\n </ColumnHeaderWrapper>\n )}\n </DataTableHeadCell>\n )\n )}\n </DataTableRow>\n ))}\n </DataTableHead>\n <DataTableBody>\n {table.getRowModel().rows.map(row => (\n <DataTableRow\n key={row.id}\n selected={rowSelection.hasOwnProperty(row.index)}\n >\n {row.getVisibleCells().map(cell => (\n <DataTableCell key={cell.id} {...cell.column.columnDef.meta}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </DataTableCell>\n ))}\n </DataTableRow>\n ))}\n </DataTableBody>\n </DataTableContent>\n </Table>\n );\n};\n"],"mappings":"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"}
|
package/DataTable/styled.js
CHANGED
|
@@ -13,13 +13,13 @@ var Table = /*#__PURE__*/(0, _styled.default)(_dataTable.DataTable, {
|
|
|
13
13
|
target: "er5nqo40"
|
|
14
14
|
})("width:100%;border-width:", function (props) {
|
|
15
15
|
return props.bordered ? "1px" : "0px";
|
|
16
|
-
}, ";th,td{vertical-align:middle;}.datatable-select-column{width:56px;}");
|
|
16
|
+
}, ";th,td{vertical-align:middle;}.datatable-select-column{width:56px !important;max-width:56px !important;}");
|
|
17
17
|
exports.Table = Table;
|
|
18
18
|
var ColumnHeaderWrapper = /*#__PURE__*/(0, _styled.default)("div", {
|
|
19
19
|
label: "ColumnHeaderWrapper",
|
|
20
20
|
target: "er5nqo41"
|
|
21
21
|
})("cursor:", function (props) {
|
|
22
|
-
return props.sortable ? "pointer" : "
|
|
22
|
+
return props.sortable ? "pointer" : "cursor";
|
|
23
23
|
}, ";display:flex;align-items:center;justify-content:start;");
|
|
24
24
|
exports.ColumnHeaderWrapper = ColumnHeaderWrapper;
|
|
25
25
|
var ColumnDirectionWrapper = /*#__PURE__*/(0, _styled.default)("span", {
|
package/DataTable/styled.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Table","styled","RmwcDataTable","props","bordered","ColumnHeaderWrapper","sortable","ColumnDirectionWrapper","ColumnDirectionIcon","ArrowDown","direction"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { ReactComponent as ArrowDown } from \"@material-design-icons/svg/outlined/arrow_downward.svg\";\nimport { DataTable as RmwcDataTable, DataTableProps } from \"@rmwc/data-table\";\nimport { ColumnDirectionProps } from \"~/DataTable/DataTable\";\n\ninterface TableProps extends DataTableProps {\n bordered?: boolean;\n}\n\nexport const Table = styled(RmwcDataTable)<TableProps>`\n width: 100%;\n border-width: ${props => (props.bordered ? \"1px\" : \"0px\")};\n\n th,\n td {\n vertical-align: middle;\n }\n\n .datatable-select-column {\n width: 56px;\n }\n`;\n\ninterface ColumnHeaderWrapperProps {\n sortable: boolean;\n}\n\nexport const ColumnHeaderWrapper = styled(\"div\")<ColumnHeaderWrapperProps>`\n cursor: ${props => (props.sortable ? \"pointer\" : \"
|
|
1
|
+
{"version":3,"names":["Table","styled","RmwcDataTable","props","bordered","ColumnHeaderWrapper","sortable","ColumnDirectionWrapper","ColumnDirectionIcon","ArrowDown","direction"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { ReactComponent as ArrowDown } from \"@material-design-icons/svg/outlined/arrow_downward.svg\";\nimport { DataTable as RmwcDataTable, DataTableProps } from \"@rmwc/data-table\";\nimport { ColumnDirectionProps } from \"~/DataTable/DataTable\";\n\ninterface TableProps extends DataTableProps {\n bordered?: boolean;\n}\n\nexport const Table = styled(RmwcDataTable)<TableProps>`\n width: 100%;\n border-width: ${props => (props.bordered ? \"1px\" : \"0px\")};\n\n th,\n td {\n vertical-align: middle;\n }\n\n .datatable-select-column {\n width: 56px !important;\n max-width: 56px !important;\n }\n`;\n\ninterface ColumnHeaderWrapperProps {\n sortable: boolean;\n}\n\nexport const ColumnHeaderWrapper = styled(\"div\")<ColumnHeaderWrapperProps>`\n cursor: ${props => (props.sortable ? \"pointer\" : \"cursor\")};\n display: flex;\n align-items: center;\n justify-content: start;\n`;\n\nexport const ColumnDirectionWrapper = styled(\"span\")`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 16px;\n width: 16px;\n margin: 0 0 0 4px;\n`;\n\nexport const ColumnDirectionIcon = styled(ArrowDown)<ColumnDirectionProps>`\n transform: ${props => (props.direction === \"asc\" ? \"rotate(180deg)\" : \"rotate(0deg)\")};\n`;\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAOO,IAAMA,KAAK,oBAAGC,eAAM,EAACC,oBAAa;EAAA;EAAA;AAAA,+BAErB,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,QAAQ,GAAG,KAAK,GAAG,KAAK;AAAA,CAAC,6GAW5D;AAAC;AAMK,IAAMC,mBAAmB,oBAAGJ,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,cACjC,UAAAE,KAAK;EAAA,OAAKA,KAAK,CAACG,QAAQ,GAAG,SAAS,GAAG,QAAQ;AAAA,CAAC,4DAI7D;AAAC;AAEK,IAAMC,sBAAsB,oBAAGN,eAAM,EAAC,MAAM;EAAA;EAAA;AAAA,4GAOlD;AAAC;AAEK,IAAMO,mBAAmB,oBAAGP,eAAM,EAACQ,8BAAS;EAAA;EAAA;AAAA,iBAClC,UAAAN,KAAK;EAAA,OAAKA,KAAK,CAACO,SAAS,KAAK,KAAK,GAAG,gBAAgB,GAAG,cAAc;AAAA,CAAC,MACxF;AAAC"}
|
package/Input/Input.js
CHANGED
|
@@ -93,7 +93,7 @@ var Input = function Input(props) {
|
|
|
93
93
|
if (typeof rest.onKeyDown === "function") {
|
|
94
94
|
return rest.onKeyDown(e);
|
|
95
95
|
}
|
|
96
|
-
}, [rest.onKeyDown]);
|
|
96
|
+
}, [rest.onKeyDown, onEnter]);
|
|
97
97
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.TextField, Object.assign({}, (0, _pick.default)(rest, rmwcProps), {
|
|
98
98
|
onKeyDown: inputOnKeyDown,
|
|
99
99
|
autoFocus: autoFocus,
|
package/Input/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["webinyInputStyles","css","rmwcProps","Input","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","validate","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","rest","inputValue","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","pick","Boolean","undefined","classNames","defaultProps"],"sources":["Input.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\n TextFieldProps & {\n // Should this input be filled with browser values\n autoComplete?: string;\n\n // If true, will pass native `event` to the `onChange` callback\n rawOnChange?: boolean;\n\n // Auto-focus input\n autoFocus?: boolean;\n\n // Input placeholder\n placeholder?: string;\n\n // Description beneath the input.\n description?: string | ReactElement;\n\n // Converts input into a text area with given number of rows.\n rows?: number;\n\n maxLength?: number;\n\n // A callback that is executed when input focus is lost.\n onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n // A callback that gets triggered when the user presses the \"Enter\" key.\n onEnter?: () => any;\n\n // CSS class name\n className?: string;\n\n // For testing purposes.\n \"data-testid\"?: string;\n };\n\n/**\n * fix label position when autofilled\n * @type {string}\n */\nconst webinyInputStyles = css`\n .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n transform: translateY(-106%) scale(0.75);\n }\n`;\n\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\n// IconProps directly passed to RMWC\nconst rmwcProps = [\n \"label\",\n \"type\",\n \"step\",\n \"disabled\",\n \"readOnly\",\n \"placeholder\",\n \"outlined\",\n \"onKeyDown\",\n \"onKeyPress\",\n \"onKeyUp\",\n \"onFocus\",\n \"rootProps\",\n \"fullwidth\",\n \"inputRef\",\n \"className\",\n \"maxLength\",\n \"characterCount\"\n];\n\nexport const Input: React.FC<InputProps> = props => {\n const onChange = useCallback(\n (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { onChange, rawOnChange } = props;\n if (!onChange) {\n return;\n }\n\n // @ts-ignore\n onChange(rawOnChange ? e : e.target.value);\n },\n [props.onChange, props.rawOnChange]\n );\n\n const onBlur = useCallback(\n async (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { validate, onBlur } = props;\n if (validate) {\n // Since we are accessing event in an async operation, we need to persist it.\n // See https://reactjs.org/docs/events.html#event-pooling.\n e.persist();\n await validate();\n }\n onBlur && onBlur(e);\n },\n [props.validate, props.onBlur]\n );\n\n const {\n autoFocus,\n value,\n label,\n description,\n placeholder,\n rows,\n validation,\n icon,\n trailingIcon,\n onEnter,\n ...rest\n } = props;\n\n let inputValue = value;\n if (value === null || typeof value === \"undefined\") {\n inputValue = \"\";\n }\n\n const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n const inputOnKeyDown = useCallback(\n e => {\n if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n onEnter();\n }\n\n if (typeof rest.onKeyDown === \"function\") {\n return rest.onKeyDown(e);\n }\n },\n [rest.onKeyDown]\n );\n\n return (\n <React.Fragment>\n <TextField\n {...pick(rest, rmwcProps)}\n onKeyDown={inputOnKeyDown}\n autoFocus={autoFocus}\n textarea={Boolean(rows)}\n value={inputValue}\n onChange={onChange}\n onBlur={onBlur}\n label={label}\n icon={icon}\n placeholder={(!label && placeholder) || undefined}\n trailingIcon={trailingIcon}\n rows={rows}\n className={classNames(\"webiny-ui-input\", webinyInputStyles)}\n data-testid={props[\"data-testid\"]}\n />\n\n {validationIsValid === false && (\n <FormElementMessage error>{validationMessage}</FormElementMessage>\n )}\n {validationIsValid !== false && description && (\n <FormElementMessage>{description}</FormElementMessage>\n )}\n </React.Fragment>\n );\n};\n\nInput.defaultProps = { rawOnChange: false };\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAoC;AAuCpC;AACA;AACA;AACA;AACA,IAAMA,iBAAiB,oBAAGC,YAAG,oIAI5B;;AAED;AACA;AACA;AACA;;AAEA;AACA,IAAMC,SAAS,GAAG,CACd,OAAO,EACP,MAAM,EACN,MAAM,EACN,UAAU,EACV,UAAU,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,YAAY,EACZ,SAAS,EACT,SAAS,EACT,WAAW,EACX,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,CACnB;AAEM,IAAMC,KAA2B,GAAG,SAA9BA,KAA2B,CAAGC,KAAK,EAAI;EAChD,IAAMC,QAAQ,GAAG,IAAAC,kBAAW,EACxB,UAACC,CAAyC,EAAK;IAC3C,IAAQF,QAAQ,GAAkBD,KAAK,CAA/BC,QAAQ;MAAEG,WAAW,GAAKJ,KAAK,CAArBI,WAAW;IAC7B,IAAI,CAACH,QAAQ,EAAE;MACX;IACJ;;IAEA;IACAA,QAAQ,CAACG,WAAW,GAAGD,CAAC,GAAGA,CAAC,CAACE,MAAM,CAACC,KAAK,CAAC;EAC9C,CAAC,EACD,CAACN,KAAK,CAACC,QAAQ,EAAED,KAAK,CAACI,WAAW,CAAC,CACtC;EAED,IAAMG,MAAM,GAAG,IAAAL,kBAAW;IAAA,kGACtB,iBAAOC,CAAyC;MAAA;MAAA;QAAA;UAAA;YACpCK,QAAQ,GAAaR,KAAK,CAA1BQ,QAAQ,EAAED,MAAM,GAAKP,KAAK,CAAhBO,MAAM;YAAA,KACpBC,QAAQ;cAAA;cAAA;YAAA;YACR;YACA;YACAL,CAAC,CAACM,OAAO,EAAE;YAAC;YAAA,OACND,QAAQ,EAAE;UAAA;YAEpBD,MAAM,IAAIA,MAAM,CAACJ,CAAC,CAAC;UAAC;UAAA;YAAA;QAAA;MAAA;IAAA,CACvB;IAAA;MAAA;IAAA;EAAA,KACD,CAACH,KAAK,CAACQ,QAAQ,EAAER,KAAK,CAACO,MAAM,CAAC,CACjC;EAED,IACIG,SAAS,GAWTV,KAAK,CAXLU,SAAS;IACTJ,KAAK,GAULN,KAAK,CAVLM,KAAK;IACLK,KAAK,GASLX,KAAK,CATLW,KAAK;IACLC,WAAW,GAQXZ,KAAK,CARLY,WAAW;IACXC,WAAW,GAOXb,KAAK,CAPLa,WAAW;IACXC,IAAI,GAMJd,KAAK,CANLc,IAAI;IACJC,UAAU,GAKVf,KAAK,CALLe,UAAU;IACVC,IAAI,GAIJhB,KAAK,CAJLgB,IAAI;IACJC,YAAY,GAGZjB,KAAK,CAHLiB,YAAY;IACZC,OAAO,GAEPlB,KAAK,CAFLkB,OAAO;IACJC,IAAI,0CACPnB,KAAK;EAET,IAAIoB,UAAU,GAAGd,KAAK;EACtB,IAAIA,KAAK,KAAK,IAAI,IAAI,OAAOA,KAAK,KAAK,WAAW,EAAE;IAChDc,UAAU,GAAG,EAAE;EACnB;EAEA,YAAmEL,UAAU,IAAI,CAAC,CAAC;IAAlEM,iBAAiB,SAA1BC,OAAO;IAA8BC,iBAAiB,SAA1BC,OAAO;EAE3C,IAAMC,cAAc,GAAG,IAAAvB,kBAAW,EAC9B,UAAAC,CAAC,EAAI;IACD,IAAI,OAAOe,OAAO,KAAK,UAAU,IAAIf,CAAC,CAACuB,GAAG,KAAK,OAAO,EAAE;MACpDR,OAAO,EAAE;IACb;IAEA,IAAI,OAAOC,IAAI,CAACQ,SAAS,KAAK,UAAU,EAAE;MACtC,OAAOR,IAAI,CAACQ,SAAS,CAACxB,CAAC,CAAC;IAC5B;EACJ,CAAC,EACD,CAACgB,IAAI,CAACQ,SAAS,CAAC,
|
|
1
|
+
{"version":3,"names":["webinyInputStyles","css","rmwcProps","Input","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","validate","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","rest","inputValue","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","pick","Boolean","undefined","classNames","defaultProps"],"sources":["Input.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\n TextFieldProps & {\n // Should this input be filled with browser values\n autoComplete?: string;\n\n // If true, will pass native `event` to the `onChange` callback\n rawOnChange?: boolean;\n\n // Auto-focus input\n autoFocus?: boolean;\n\n // Input placeholder\n placeholder?: string;\n\n // Description beneath the input.\n description?: string | ReactElement;\n\n // Converts input into a text area with given number of rows.\n rows?: number;\n\n maxLength?: number;\n\n // A callback that is executed when input focus is lost.\n onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n // A callback that gets triggered when the user presses the \"Enter\" key.\n onEnter?: () => any;\n\n // CSS class name\n className?: string;\n\n // For testing purposes.\n \"data-testid\"?: string;\n };\n\n/**\n * fix label position when autofilled\n * @type {string}\n */\nconst webinyInputStyles = css`\n .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n transform: translateY(-106%) scale(0.75);\n }\n`;\n\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\n// IconProps directly passed to RMWC\nconst rmwcProps = [\n \"label\",\n \"type\",\n \"step\",\n \"disabled\",\n \"readOnly\",\n \"placeholder\",\n \"outlined\",\n \"onKeyDown\",\n \"onKeyPress\",\n \"onKeyUp\",\n \"onFocus\",\n \"rootProps\",\n \"fullwidth\",\n \"inputRef\",\n \"className\",\n \"maxLength\",\n \"characterCount\"\n];\n\nexport const Input: React.FC<InputProps> = props => {\n const onChange = useCallback(\n (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { onChange, rawOnChange } = props;\n if (!onChange) {\n return;\n }\n\n // @ts-ignore\n onChange(rawOnChange ? e : e.target.value);\n },\n [props.onChange, props.rawOnChange]\n );\n\n const onBlur = useCallback(\n async (e: React.SyntheticEvent<HTMLInputElement>) => {\n const { validate, onBlur } = props;\n if (validate) {\n // Since we are accessing event in an async operation, we need to persist it.\n // See https://reactjs.org/docs/events.html#event-pooling.\n e.persist();\n await validate();\n }\n onBlur && onBlur(e);\n },\n [props.validate, props.onBlur]\n );\n\n const {\n autoFocus,\n value,\n label,\n description,\n placeholder,\n rows,\n validation,\n icon,\n trailingIcon,\n onEnter,\n ...rest\n } = props;\n\n let inputValue = value;\n if (value === null || typeof value === \"undefined\") {\n inputValue = \"\";\n }\n\n const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n const inputOnKeyDown = useCallback(\n e => {\n if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n onEnter();\n }\n\n if (typeof rest.onKeyDown === \"function\") {\n return rest.onKeyDown(e);\n }\n },\n [rest.onKeyDown, onEnter]\n );\n\n return (\n <React.Fragment>\n <TextField\n {...pick(rest, rmwcProps)}\n onKeyDown={inputOnKeyDown}\n autoFocus={autoFocus}\n textarea={Boolean(rows)}\n value={inputValue}\n onChange={onChange}\n onBlur={onBlur}\n label={label}\n icon={icon}\n placeholder={(!label && placeholder) || undefined}\n trailingIcon={trailingIcon}\n rows={rows}\n className={classNames(\"webiny-ui-input\", webinyInputStyles)}\n data-testid={props[\"data-testid\"]}\n />\n\n {validationIsValid === false && (\n <FormElementMessage error>{validationMessage}</FormElementMessage>\n )}\n {validationIsValid !== false && description && (\n <FormElementMessage>{description}</FormElementMessage>\n )}\n </React.Fragment>\n );\n};\n\nInput.defaultProps = { rawOnChange: false };\n"],"mappings":"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"}
|
|
@@ -41,7 +41,7 @@ var DataListModalWrapper = /*#__PURE__*/(0, _styled.default)("div", {
|
|
|
41
41
|
height: "auto",
|
|
42
42
|
maxWidth: "426px",
|
|
43
43
|
maxHeight: "520px",
|
|
44
|
-
overflow: "
|
|
44
|
+
overflow: "visible",
|
|
45
45
|
backgroundColor: "var(--mdc-theme-surface)",
|
|
46
46
|
boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.12)",
|
|
47
47
|
borderRadius: "0px 0px 4px 4px",
|
|
@@ -89,7 +89,8 @@ var DataListModalOverlay = function DataListModalOverlay(_ref3) {
|
|
|
89
89
|
},
|
|
90
90
|
showOverlay: isOpen
|
|
91
91
|
}), /*#__PURE__*/_react.default.createElement(DataListModalWrapper, {
|
|
92
|
-
showOverlay: isOpen
|
|
92
|
+
showOverlay: isOpen,
|
|
93
|
+
"data-id": "data-list-modal-wrapper"
|
|
93
94
|
}, children));
|
|
94
95
|
};
|
|
95
96
|
exports.DataListModalOverlay = DataListModalOverlay;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["SimpleOverlay","styled","showOverlay","width","height","position","top","left","backgroundColor","transition","pointerEvents","zIndex","opacity","DataListModalWrapper","maxWidth","maxHeight","overflow","boxShadow","borderRadius","transform","paddingBottom","padding","display","justifyContent","color","border","DataListModalOverlay","onDismiss","children","useContext","DataListModalOverlayContext","isOpen","setIsOpen","e","stopPropagation"],"sources":["DataListModalOverlay.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport type SimpleOverlayProps = { showOverlay: boolean };\nexport const SimpleOverlay = styled.div<SimpleOverlayProps>(({ showOverlay }) => ({\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: 0,\n backgroundColor: showOverlay ? \"rgba(0, 0, 0, 0.32)\" : \"transparent\",\n transition: \"150ms all ease-in-out\",\n pointerEvents: showOverlay ? \"auto\" : \"none\",\n zIndex: showOverlay ? 5 : -1,\n opacity: showOverlay ? 1 : 0\n}));\n\nexport interface DataListModalWrapperProps {\n showOverlay: boolean;\n}\n\nexport const DataListModalWrapper = styled.div<DataListModalWrapperProps>(({ showOverlay }) => ({\n position: \"absolute\",\n top: \"0px\",\n left: \"50%\",\n width: \"90%\",\n height: \"auto\",\n maxWidth: \"426px\",\n maxHeight: \"520px\",\n overflow: \"
|
|
1
|
+
{"version":3,"names":["SimpleOverlay","styled","showOverlay","width","height","position","top","left","backgroundColor","transition","pointerEvents","zIndex","opacity","DataListModalWrapper","maxWidth","maxHeight","overflow","boxShadow","borderRadius","transform","paddingBottom","padding","display","justifyContent","color","border","DataListModalOverlay","onDismiss","children","useContext","DataListModalOverlayContext","isOpen","setIsOpen","e","stopPropagation"],"sources":["DataListModalOverlay.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport type SimpleOverlayProps = { showOverlay: boolean };\nexport const SimpleOverlay = styled.div<SimpleOverlayProps>(({ showOverlay }) => ({\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n top: 0,\n left: 0,\n backgroundColor: showOverlay ? \"rgba(0, 0, 0, 0.32)\" : \"transparent\",\n transition: \"150ms all ease-in-out\",\n pointerEvents: showOverlay ? \"auto\" : \"none\",\n zIndex: showOverlay ? 5 : -1,\n opacity: showOverlay ? 1 : 0\n}));\n\nexport interface DataListModalWrapperProps {\n showOverlay: boolean;\n}\n\nexport const DataListModalWrapper = styled.div<DataListModalWrapperProps>(({ showOverlay }) => ({\n position: \"absolute\",\n top: \"0px\",\n left: \"50%\",\n width: \"90%\",\n height: \"auto\",\n maxWidth: \"426px\",\n maxHeight: \"520px\",\n overflow: \"visible\",\n backgroundColor: \"var(--mdc-theme-surface)\",\n boxShadow: \"0px 1px 5px rgba(0, 0, 0, 0.12)\",\n borderRadius: \"0px 0px 4px 4px\",\n transition: \"150ms opacity ease-in-out\",\n pointerEvents: showOverlay ? \"auto\" : \"none\",\n zIndex: showOverlay ? 5 : -1,\n opacity: showOverlay ? 1 : 0,\n transform: showOverlay ? \"translateX(-50%)\" : \"translateX(-1000px)\",\n\n \"& .input-wrapper\": {\n paddingBottom: \"16px\"\n },\n\n \"& .datalist-modal__footer\": {\n padding: \"24px\",\n display: \"flex\",\n justifyContent: \"space-between\",\n \"& .mdc-button\": {\n borderRadius: 4,\n padding: \"0px 32px\"\n },\n \"& .datalist-modal__footer__action--secondary\": {\n color: \"var(--mdc-theme-text-primary-on-background)\",\n border: \"1px solid var(--mdc-theme-on-background)\"\n },\n \"& .datalist-modal__footer__action--primary\": {\n backgroundColor: \"var(--mdc-theme-secondary)\"\n }\n }\n}));\n\nexport interface DataListModalOverlayProps {\n /*\n * This function is called after closing the modal overlay.\n */\n onDismiss?: (event?: React.SyntheticEvent) => void;\n}\n\nexport const DataListModalOverlay: React.FC<DataListModalOverlayProps> = ({\n onDismiss,\n children\n}) => {\n const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);\n return (\n <React.Fragment>\n <SimpleOverlay\n onClick={e => {\n e.stopPropagation();\n // Close the modal.\n setIsOpen(false);\n\n if (typeof onDismiss === \"function\") {\n onDismiss();\n }\n }}\n showOverlay={isOpen}\n />\n <DataListModalWrapper showOverlay={isOpen} data-id={\"data-list-modal-wrapper\"}>\n {children}\n </DataListModalWrapper>\n </React.Fragment>\n );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAGO,IAAMA,aAAa,oBAAGC,eAAM;EAAA;EAAA;AAAA,GAAyB;EAAA,IAAGC,WAAW,QAAXA,WAAW;EAAA,OAAQ;IAC9EC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,eAAe,EAAEN,WAAW,GAAG,qBAAqB,GAAG,aAAa;IACpEO,UAAU,EAAE,uBAAuB;IACnCC,aAAa,EAAER,WAAW,GAAG,MAAM,GAAG,MAAM;IAC5CS,MAAM,EAAET,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5BU,OAAO,EAAEV,WAAW,GAAG,CAAC,GAAG;EAC/B,CAAC;AAAA,CAAC,CAAC;AAAC;AAMG,IAAMW,oBAAoB,oBAAGZ,eAAM;EAAA;EAAA;AAAA,GAAgC;EAAA,IAAGC,WAAW,SAAXA,WAAW;EAAA,OAAQ;IAC5FG,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,KAAK;IACVC,IAAI,EAAE,KAAK;IACXJ,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,MAAM;IACdU,QAAQ,EAAE,OAAO;IACjBC,SAAS,EAAE,OAAO;IAClBC,QAAQ,EAAE,SAAS;IACnBR,eAAe,EAAE,0BAA0B;IAC3CS,SAAS,EAAE,iCAAiC;IAC5CC,YAAY,EAAE,iBAAiB;IAC/BT,UAAU,EAAE,2BAA2B;IACvCC,aAAa,EAAER,WAAW,GAAG,MAAM,GAAG,MAAM;IAC5CS,MAAM,EAAET,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5BU,OAAO,EAAEV,WAAW,GAAG,CAAC,GAAG,CAAC;IAC5BiB,SAAS,EAAEjB,WAAW,GAAG,kBAAkB,GAAG,qBAAqB;IAEnE,kBAAkB,EAAE;MAChBkB,aAAa,EAAE;IACnB,CAAC;IAED,2BAA2B,EAAE;MACzBC,OAAO,EAAE,MAAM;MACfC,OAAO,EAAE,MAAM;MACfC,cAAc,EAAE,eAAe;MAC/B,eAAe,EAAE;QACbL,YAAY,EAAE,CAAC;QACfG,OAAO,EAAE;MACb,CAAC;MACD,8CAA8C,EAAE;QAC5CG,KAAK,EAAE,6CAA6C;QACpDC,MAAM,EAAE;MACZ,CAAC;MACD,4CAA4C,EAAE;QAC1CjB,eAAe,EAAE;MACrB;IACJ;EACJ,CAAC;AAAA,CAAC,CAAC;AAAC;AASG,IAAMkB,oBAAyD,GAAG,SAA5DA,oBAAyD,QAGhE;EAAA,IAFFC,SAAS,SAATA,SAAS;IACTC,QAAQ,SAARA,QAAQ;EAER,kBAA8B,IAAAC,iBAAU,EAACC,wDAA2B,CAAC;IAA7DC,MAAM,eAANA,MAAM;IAAEC,SAAS,eAATA,SAAS;EACzB,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,aAAa;IACV,OAAO,EAAE,iBAAAC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,EAAE;MACnB;MACAF,SAAS,CAAC,KAAK,CAAC;MAEhB,IAAI,OAAOL,SAAS,KAAK,UAAU,EAAE;QACjCA,SAAS,EAAE;MACf;IACJ,CAAE;IACF,WAAW,EAAEI;EAAO,EACtB,eACF,6BAAC,oBAAoB;IAAC,WAAW,EAAEA,MAAO;IAAC,WAAS;EAA0B,GACzEH,QAAQ,CACU,CACV;AAEzB,CAAC;AAAC"}
|
package/Menu/Menu.js
CHANGED
|
@@ -70,7 +70,8 @@ var Menu = /*#__PURE__*/function (_React$Component) {
|
|
|
70
70
|
var children = _this.props.children;
|
|
71
71
|
return /*#__PURE__*/_react.default.createElement(_menu.MenuSurface, {
|
|
72
72
|
open: _this.state.menuIsOpen,
|
|
73
|
-
onClose: _this.closeMenu
|
|
73
|
+
onClose: _this.closeMenu,
|
|
74
|
+
renderToPortal: _this.props.renderToPortal
|
|
74
75
|
}, typeof children === "function" ? children({
|
|
75
76
|
closeMenu: _this.closeMenu
|
|
76
77
|
}) : children);
|
package/Menu/Menu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["style","disabledMenuItem","css","opacity","pointerEvents","Menu","menuIsOpen","setState","props","onOpen","onClose","anchor","state","className","closeMenu","onSelect","zIndex","children","Array","isArray","renderMenuWithPortal","renderCustomContent","renderMenuContent","handle","React","cloneElement","onClick","openMenu","Component","MenuDivider","MenuItem","disabled","rest","classNames"],"sources":["Menu.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Menu as BaseMenu,\n MenuProps as RmwcMenuProps,\n MenuItem as BaseMenuItem,\n MenuItemProps as BaseMenuItemProps,\n MenuSurface,\n MenuSurfaceAnchor\n} from \"@rmwc/menu\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nconst style = {\n disabledMenuItem: css({\n opacity: 0.5,\n pointerEvents: \"none\"\n })\n};\n\ntype MenuProps = RmwcMenuProps & {\n // One or more MenuItem components.\n children: React.ReactNode;\n\n // A handler which triggers the menu, eg. button or link.\n handle?: React.ReactElement;\n\n // Position the menu to one of anchor corners.\n // 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart'\n anchor?:\n | \"bottomEnd\"\n | \"bottomLeft\"\n | \"bottomRight\"\n | \"bottomStart\"\n | \"topEnd\"\n | \"topLeft\"\n | \"topRight\"\n | \"topStart\";\n\n // Class that will be added to the Menu element.\n className?: string;\n\n onOpen?: () => void;\n onClose?: () => void;\n\n // For testing purposes.\n \"data-testid\"?: string;\n};\n\ninterface MenuState {\n menuIsOpen: boolean;\n}\n\n/**\n * Use Menu component to display a list of choices, once the handler is triggered.\n */\nclass Menu extends React.Component<MenuProps, MenuState> {\n static defaultProps: Partial<MenuProps> = {\n anchor: \"topStart\"\n };\n\n public override state: MenuState = {\n menuIsOpen: false\n };\n\n private readonly openMenu = () => {\n this.setState({ menuIsOpen: true }, () => this.props.onOpen && this.props.onOpen());\n };\n\n private readonly closeMenu = () => {\n this.setState({ menuIsOpen: false }, () => this.props.onClose && this.props.onClose());\n };\n\n private readonly renderMenuWithPortal = () => {\n return (\n <BaseMenu\n anchorCorner={this.props.anchor}\n open={this.state.menuIsOpen}\n className={this.props.className}\n onClose={this.closeMenu}\n onSelect={this.props.onSelect}\n renderToPortal={true}\n style={{ zIndex: 99 }} // Fixes Menu in Drawers\n >\n {this.props.children}\n </BaseMenu>\n );\n };\n\n private readonly renderCustomContent = () => {\n const { children } = this.props;\n return (\n <MenuSurface
|
|
1
|
+
{"version":3,"names":["style","disabledMenuItem","css","opacity","pointerEvents","Menu","menuIsOpen","setState","props","onOpen","onClose","anchor","state","className","closeMenu","onSelect","zIndex","children","renderToPortal","Array","isArray","renderMenuWithPortal","renderCustomContent","renderMenuContent","handle","React","cloneElement","onClick","openMenu","Component","MenuDivider","MenuItem","disabled","rest","classNames"],"sources":["Menu.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Menu as BaseMenu,\n MenuProps as RmwcMenuProps,\n MenuItem as BaseMenuItem,\n MenuItemProps as BaseMenuItemProps,\n MenuSurface,\n MenuSurfaceAnchor\n} from \"@rmwc/menu\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nconst style = {\n disabledMenuItem: css({\n opacity: 0.5,\n pointerEvents: \"none\"\n })\n};\n\ntype MenuProps = RmwcMenuProps & {\n // One or more MenuItem components.\n children: React.ReactNode;\n\n // A handler which triggers the menu, eg. button or link.\n handle?: React.ReactElement;\n\n // Position the menu to one of anchor corners.\n // 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart'\n anchor?:\n | \"bottomEnd\"\n | \"bottomLeft\"\n | \"bottomRight\"\n | \"bottomStart\"\n | \"topEnd\"\n | \"topLeft\"\n | \"topRight\"\n | \"topStart\";\n\n // Class that will be added to the Menu element.\n className?: string;\n\n onOpen?: () => void;\n onClose?: () => void;\n\n // For testing purposes.\n \"data-testid\"?: string;\n};\n\ninterface MenuState {\n menuIsOpen: boolean;\n}\n\n/**\n * Use Menu component to display a list of choices, once the handler is triggered.\n */\nclass Menu extends React.Component<MenuProps, MenuState> {\n static defaultProps: Partial<MenuProps> = {\n anchor: \"topStart\"\n };\n\n public override state: MenuState = {\n menuIsOpen: false\n };\n\n private readonly openMenu = () => {\n this.setState({ menuIsOpen: true }, () => this.props.onOpen && this.props.onOpen());\n };\n\n private readonly closeMenu = () => {\n this.setState({ menuIsOpen: false }, () => this.props.onClose && this.props.onClose());\n };\n\n private readonly renderMenuWithPortal = () => {\n return (\n <BaseMenu\n anchorCorner={this.props.anchor}\n open={this.state.menuIsOpen}\n className={this.props.className}\n onClose={this.closeMenu}\n onSelect={this.props.onSelect}\n renderToPortal={true}\n style={{ zIndex: 99 }} // Fixes Menu in Drawers\n >\n {this.props.children}\n </BaseMenu>\n );\n };\n\n private readonly renderCustomContent = () => {\n const { children } = this.props;\n return (\n <MenuSurface\n open={this.state.menuIsOpen}\n onClose={this.closeMenu}\n renderToPortal={this.props.renderToPortal}\n >\n {typeof children === \"function\"\n ? children({ closeMenu: this.closeMenu })\n : children}\n </MenuSurface>\n );\n };\n\n private readonly renderMenuContent = () => {\n return Array.isArray(this.props.children)\n ? this.renderMenuWithPortal()\n : this.renderCustomContent();\n };\n\n public override render(): React.ReactNode {\n return (\n <MenuSurfaceAnchor data-testid={this.props[\"data-testid\"]}>\n {this.renderMenuContent()}\n {this.props.handle &&\n React.cloneElement(this.props.handle, { onClick: this.openMenu })}\n </MenuSurfaceAnchor>\n );\n }\n}\n\nconst MenuDivider: React.FC = () => {\n return <li className=\"mdc-list-divider\" role=\"separator\" />;\n};\n\ninterface MenuItemProps extends BaseMenuItemProps {\n children: React.ReactNode;\n className?: string;\n onClick?: (event: React.MouseEvent) => void;\n \"data-testid\"?: string;\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({ disabled, className, ...rest }) => {\n return (\n <BaseMenuItem\n {...rest}\n className={classNames(className, { [style.disabledMenuItem]: disabled })}\n />\n );\n};\n\nexport { Menu, MenuItem, MenuDivider };\n"],"mappings":"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"}
|
package/Tabs/Tabs.js
CHANGED
|
@@ -75,7 +75,13 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
75
75
|
}
|
|
76
76
|
}, tabs.map(function (item) {
|
|
77
77
|
if (!item.visible) {
|
|
78
|
-
return
|
|
78
|
+
return /*#__PURE__*/_react.default.createElement(_tabs.Tab, {
|
|
79
|
+
tag: "div",
|
|
80
|
+
style: {
|
|
81
|
+
display: "none"
|
|
82
|
+
},
|
|
83
|
+
key: item.id
|
|
84
|
+
});
|
|
79
85
|
}
|
|
80
86
|
var style = item.style || {};
|
|
81
87
|
if (item.disabled) {
|
package/Tabs/Tabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["disabledStyles","opacity","pointerEvents","TabsContext","createContext","undefined","Tabs","forwardRef","props","ref","useState","activeTabIndex","setActiveIndex","tabs","setTabs","activeIndex","value","activateTabIndex","useCallback","index","updateValue","useImperativeHandle","getActiveIndex","switchTab","tabIndex","useEffect","disabled","tabBar","map","tab","id","join","evt","detail","onActivate","item","visible","style","Object","assign","icon","label","content","filter","Boolean","children","
|
|
1
|
+
{"version":3,"names":["disabledStyles","opacity","pointerEvents","TabsContext","createContext","undefined","Tabs","forwardRef","props","ref","useState","activeTabIndex","setActiveIndex","tabs","setTabs","activeIndex","value","activateTabIndex","useCallback","index","updateValue","useImperativeHandle","getActiveIndex","switchTab","tabIndex","useEffect","disabled","tabBar","map","tab","id","join","evt","detail","onActivate","item","visible","display","style","Object","assign","icon","label","content","filter","Boolean","children","context","useMemo","addTab","existingIndex","findIndex","slice","removeTab","classNames","className","displayName"],"sources":["Tabs.tsx"],"sourcesContent":["import React, {\n createContext,\n forwardRef,\n PropsWithChildren,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState\n} from \"react\";\nimport classNames from \"classnames\";\nimport { TabBar, Tab as RmwcTab } from \"@rmwc/tabs\";\nimport { TabProps } from \"./Tab\";\n\nexport type TabsProps = PropsWithChildren<{\n /**\n * Append a class name.\n */\n className?: string;\n\n /**\n * Callback to execute when a tab is changed.\n */\n onActivate?: (index: number) => void;\n\n /**\n * Active tab index value.\n */\n value?: number;\n\n /**\n * Function to change active tab.\n */\n updateValue?: (index: number) => void;\n /**\n * Tab ID for the testing.\n */\n \"data-testid\"?: string;\n}>;\n\nconst disabledStyles: Record<string, string | number> = {\n opacity: 0.5,\n pointerEvents: \"none\"\n};\n\ninterface TabItem extends TabProps {\n id: string;\n}\n\ninterface TabsContext {\n addTab(props: TabItem): void;\n removeTab(id: string): void;\n}\n\nexport const TabsContext = createContext<TabsContext | undefined>(undefined);\n\nexport interface TabsImperativeApi {\n switchTab(index: number): void;\n getActiveIndex(): number;\n}\n/**\n * Use Tabs component to display a list of choices, once the handler is triggered.\n */\nexport const Tabs = forwardRef<TabsImperativeApi | undefined, TabsProps>((props, ref) => {\n const [activeTabIndex, setActiveIndex] = useState(0);\n const [tabs, setTabs] = useState<TabItem[]>([]);\n\n const activeIndex = props.value !== undefined ? props.value : activeTabIndex;\n\n const activateTabIndex = useCallback((index: number) => {\n if (typeof props.updateValue === \"function\") {\n props.updateValue(index);\n return;\n }\n\n setActiveIndex(index);\n }, []);\n\n useImperativeHandle(ref, () => ({\n getActiveIndex() {\n return activeIndex;\n },\n switchTab(tabIndex: number) {\n activateTabIndex(tabIndex);\n }\n }));\n\n /**\n * This effect will make sure that disabled tabs automatically switch to the first tab.\n */\n useEffect(() => {\n if (tabs[activeIndex]?.disabled) {\n activateTabIndex(0);\n }\n });\n\n /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */\n const tabBar = (\n <TabBar\n key={tabs.map(tab => tab.id).join(\";\")}\n className=\"webiny-ui-tabs__tab-bar\"\n activeTabIndex={activeIndex}\n onActivate={evt => {\n if (typeof props.updateValue === \"function\") {\n props.updateValue(evt.detail.index);\n } else {\n setActiveIndex(evt.detail.index);\n }\n props.onActivate && props.onActivate(evt.detail.index);\n }}\n >\n {tabs.map(item => {\n if (!item.visible) {\n return <RmwcTab tag={\"div\"} style={{ display: \"none\" }} key={item.id} />;\n }\n\n const style = item.style || {};\n if (item.disabled) {\n Object.assign(style, disabledStyles);\n }\n\n return (\n <RmwcTab\n tag={\"div\"}\n style={style}\n key={item.id}\n data-testid={item[\"data-testid\"]}\n {...(item.icon ? { icon: item.icon } : {})}\n >\n {item.label}\n </RmwcTab>\n );\n })}\n </TabBar>\n );\n\n const content = tabs.filter(Boolean).map((tab, index) => {\n if (activeIndex === index) {\n return <div key={index}>{tab.children}</div>;\n } else {\n return (\n <div key={index} style={{ display: \"none\" }}>\n {tab.children}\n </div>\n );\n }\n });\n\n const context: TabsContext = useMemo(\n () => ({\n addTab(props) {\n setTabs(tabs => {\n const existingIndex = tabs.findIndex(tab => tab.id === props.id);\n if (existingIndex > -1) {\n return [\n ...tabs.slice(0, existingIndex),\n props,\n ...tabs.slice(existingIndex + 1)\n ];\n }\n return [...tabs, props];\n });\n },\n removeTab(id) {\n setTabs(tabs => tabs.filter(tab => tab.id === id));\n }\n }),\n [setTabs]\n );\n\n return (\n <div className={classNames(\"webiny-ui-tabs\", props.className)}>\n {tabBar}\n <div className={\"webiny-ui-tabs__content mdc-tab-content\"}>{content}</div>\n <TabsContext.Provider value={context}>{props.children}</TabsContext.Provider>\n </div>\n );\n});\n\nTabs.displayName = \"Tabs\";\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/ui",
|
|
3
|
-
"version": "0.0.0-unstable.
|
|
3
|
+
"version": "0.0.0-unstable.aa00eecd97",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@babel/runtime": "7.20.13",
|
|
18
18
|
"@editorjs/editorjs": "2.26.5",
|
|
19
|
-
"@emotion/react": "11.10.
|
|
19
|
+
"@emotion/react": "11.10.8",
|
|
20
20
|
"@emotion/styled": "11.10.6",
|
|
21
21
|
"@material-design-icons/svg": "0.14.2",
|
|
22
22
|
"@rmwc/button": "7.0.3",
|
|
@@ -67,41 +67,41 @@
|
|
|
67
67
|
"shortid": "2.2.16"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
|
-
"@babel/cli": "
|
|
71
|
-
"@babel/core": "
|
|
72
|
-
"@babel/plugin-proposal-class-properties": "
|
|
73
|
-
"@babel/preset-env": "
|
|
74
|
-
"@babel/preset-typescript": "
|
|
75
|
-
"@storybook/addon-info": "
|
|
76
|
-
"@storybook/addon-knobs": "
|
|
77
|
-
"@storybook/addon-links": "
|
|
78
|
-
"@storybook/react": "
|
|
79
|
-
"@testing-library/react": "
|
|
80
|
-
"@types/nprogress": "
|
|
81
|
-
"@types/rc-tooltip": "
|
|
82
|
-
"@types/react-custom-scrollbars": "
|
|
83
|
-
"@types/react-transition-group": "
|
|
84
|
-
"@types/shortid": "
|
|
85
|
-
"@webiny/cli": "
|
|
86
|
-
"@webiny/form": "
|
|
87
|
-
"@webiny/project-utils": "
|
|
88
|
-
"@webiny/storybook-utils": "
|
|
89
|
-
"@webiny/validation": "
|
|
90
|
-
"babel-loader": "
|
|
91
|
-
"babel-plugin-emotion": "
|
|
92
|
-
"execa": "
|
|
93
|
-
"jest-dom": "
|
|
94
|
-
"ncp": "
|
|
95
|
-
"raw-loader": "
|
|
96
|
-
"react-docgen": "
|
|
97
|
-
"react-docgen-typescript-loader": "
|
|
98
|
-
"regenerator-runtime": "
|
|
99
|
-
"rimraf": "
|
|
100
|
-
"sass": "
|
|
101
|
-
"sass-loader": "
|
|
102
|
-
"ttypescript": "
|
|
70
|
+
"@babel/cli": "7.20.7",
|
|
71
|
+
"@babel/core": "7.20.12",
|
|
72
|
+
"@babel/plugin-proposal-class-properties": "7.18.6",
|
|
73
|
+
"@babel/preset-env": "7.20.2",
|
|
74
|
+
"@babel/preset-typescript": "7.18.6",
|
|
75
|
+
"@storybook/addon-info": "5.3.21",
|
|
76
|
+
"@storybook/addon-knobs": "5.3.21",
|
|
77
|
+
"@storybook/addon-links": "5.3.21",
|
|
78
|
+
"@storybook/react": "5.3.21",
|
|
79
|
+
"@testing-library/react": "12.1.5",
|
|
80
|
+
"@types/nprogress": "0.2.0",
|
|
81
|
+
"@types/rc-tooltip": "3.7.7",
|
|
82
|
+
"@types/react-custom-scrollbars": "4.0.10",
|
|
83
|
+
"@types/react-transition-group": "4.4.5",
|
|
84
|
+
"@types/shortid": "0.0.29",
|
|
85
|
+
"@webiny/cli": "0.0.0-unstable.aa00eecd97",
|
|
86
|
+
"@webiny/form": "0.0.0-unstable.aa00eecd97",
|
|
87
|
+
"@webiny/project-utils": "0.0.0-unstable.aa00eecd97",
|
|
88
|
+
"@webiny/storybook-utils": "0.0.0-unstable.aa00eecd97",
|
|
89
|
+
"@webiny/validation": "0.0.0-unstable.aa00eecd97",
|
|
90
|
+
"babel-loader": "8.3.0",
|
|
91
|
+
"babel-plugin-emotion": "9.2.11",
|
|
92
|
+
"execa": "5.1.1",
|
|
93
|
+
"jest-dom": "3.5.0",
|
|
94
|
+
"ncp": "2.0.0",
|
|
95
|
+
"raw-loader": "0.5.1",
|
|
96
|
+
"react-docgen": "5.4.3",
|
|
97
|
+
"react-docgen-typescript-loader": "3.7.2",
|
|
98
|
+
"regenerator-runtime": "0.13.11",
|
|
99
|
+
"rimraf": "3.0.2",
|
|
100
|
+
"sass": "1.58.0",
|
|
101
|
+
"sass-loader": "12.6.0",
|
|
102
|
+
"ttypescript": "1.5.15",
|
|
103
103
|
"typescript": "4.7.4",
|
|
104
|
-
"webpack": "
|
|
104
|
+
"webpack": "4.46.0"
|
|
105
105
|
},
|
|
106
106
|
"peerDependencies": {
|
|
107
107
|
"minimatch": "^5.1.0",
|
|
@@ -133,5 +133,5 @@
|
|
|
133
133
|
]
|
|
134
134
|
}
|
|
135
135
|
},
|
|
136
|
-
"gitHead": "
|
|
136
|
+
"gitHead": "aa00eecd97d16da9bdb0581f33d491487ce43ce9"
|
|
137
137
|
}
|