@mrshmllw/smores-react 3.1.4 → 3.1.7
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/dist/ActionDropdown/ActionDropdown.js +2 -2
- package/dist/ActionDropdown/ActionDropdown.js.map +1 -1
- package/dist/Button/Button.d.ts +1 -1
- package/dist/Button/Button.js +5 -2
- package/dist/Button/Button.js.map +1 -1
- package/dist/Datepicker/Datepicker.d.ts +1 -0
- package/dist/Datepicker/Datepicker.js +17 -8
- package/dist/Datepicker/Datepicker.js.map +1 -1
- package/dist/Datepicker/Datepicker.stories.js +1 -0
- package/dist/Datepicker/Datepicker.stories.js.map +1 -1
- package/dist/IconStrict/IconStrict.d.ts +1 -1
- package/dist/IconStrict/IconStrict.js +19 -1
- package/dist/IconStrict/IconStrict.js.map +1 -1
- package/dist/Logo/Collection.d.ts +4 -0
- package/dist/Logo/Collection.js +33 -0
- package/dist/Logo/Collection.js.map +1 -0
- package/dist/Logo/Logo.d.ts +35 -0
- package/dist/Logo/Logo.js +55 -0
- package/dist/Logo/Logo.js.map +1 -0
- package/dist/Logo/Logo.stories.d.ts +13 -0
- package/dist/Logo/Logo.stories.js +28 -0
- package/dist/Logo/Logo.stories.js.map +1 -0
- package/dist/Logo/index.d.ts +1 -0
- package/dist/Logo/index.js +2 -0
- package/dist/Logo/index.js.map +1 -0
- package/dist/RadioGroup/RadioElement.d.ts +2 -1
- package/dist/RadioGroup/RadioElement.js +3 -3
- package/dist/RadioGroup/RadioElement.js.map +1 -1
- package/dist/RadioGroup/RadioGroup.d.ts +3 -1
- package/dist/RadioGroup/RadioGroup.js +3 -3
- package/dist/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/RadioGroup/RadioGroup.stories.d.ts +1 -0
- package/dist/RadioGroup/RadioItem.d.ts +2 -1
- package/dist/RadioGroup/RadioItem.js +6 -6
- package/dist/RadioGroup/RadioItem.js.map +1 -1
- package/dist/SearchInput/SearchInput.d.ts +1 -0
- package/dist/SearchInput/SearchInput.js +4 -4
- package/dist/SearchInput/SearchInput.js.map +1 -1
- package/dist/SearchInput/SearchInput.stories.js +4 -2
- package/dist/SearchInput/SearchInput.stories.js.map +1 -1
- package/dist/SearchInput/SearchOptions.d.ts +1 -0
- package/dist/SearchInput/SearchOptions.js +15 -5
- package/dist/SearchInput/SearchOptions.js.map +1 -1
- package/dist/Table/Table.d.ts +35 -0
- package/dist/Table/Table.js +49 -0
- package/dist/Table/Table.js.map +1 -0
- package/dist/Table/Table.stories.d.ts +21 -0
- package/dist/Table/Table.stories.js +169 -0
- package/dist/Table/Table.stories.js.map +1 -0
- package/dist/Table/components/RowActions.d.ts +3 -0
- package/dist/Table/components/RowActions.js +46 -0
- package/dist/Table/components/RowActions.js.map +1 -0
- package/dist/Table/components/TableHeader.d.ts +3 -0
- package/dist/Table/components/TableHeader.js +8 -0
- package/dist/Table/components/TableHeader.js.map +1 -0
- package/dist/Table/components/TableRow.d.ts +3 -0
- package/dist/Table/components/TableRow.js +65 -0
- package/dist/Table/components/TableRow.js.map +1 -0
- package/dist/Table/components/commonComponents.d.ts +5 -0
- package/dist/Table/components/commonComponents.js +101 -0
- package/dist/Table/components/commonComponents.js.map +1 -0
- package/dist/Table/helpers.d.ts +3 -0
- package/dist/Table/helpers.js +15 -0
- package/dist/Table/helpers.js.map +1 -0
- package/dist/Table/index.d.ts +2 -0
- package/dist/Table/index.js +3 -0
- package/dist/Table/index.js.map +1 -0
- package/dist/Table/storyUtils.d.ts +62 -0
- package/dist/Table/storyUtils.js +201 -0
- package/dist/Table/storyUtils.js.map +1 -0
- package/dist/Table/types.d.ts +73 -0
- package/dist/Table/types.js +2 -0
- package/dist/Table/types.js.map +1 -0
- package/dist/Tooltip/Tooltip.d.ts +2 -0
- package/dist/Tooltip/Tooltip.js +14 -5
- package/dist/Tooltip/Tooltip.js.map +1 -1
- package/dist/Tooltip/Tooltip.stories.js +1 -1
- package/dist/Tooltip/Tooltip.stories.js.map +1 -1
- package/dist/index.d.ts +10 -8
- package/dist/index.js +10 -8
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
|
-
import { useUniqueId } from '../utils/id';
|
|
4
3
|
import { theme } from '../theme';
|
|
5
|
-
import {
|
|
6
|
-
import { Text } from '../Text';
|
|
7
|
-
import { ITEM_GAP } from './constants';
|
|
4
|
+
import { useUniqueId } from '../utils/id';
|
|
8
5
|
import { Box } from '../Box';
|
|
9
6
|
import { Icon } from '../Icon';
|
|
10
|
-
|
|
7
|
+
import { Text } from '../Text';
|
|
8
|
+
import { RadioElement } from './RadioElement';
|
|
9
|
+
import { ITEM_GAP } from './constants';
|
|
10
|
+
export const RadioItem = forwardRef(function RadioItem({ name, visual, icon, iconPosition = 'center', label, value, checked, onChange, onBlur, displayType, isError, fallbackStyle, bodyCopy, }, ref) {
|
|
11
11
|
const id = useUniqueId();
|
|
12
12
|
return (React.createElement(Wrapper, { htmlFor: id, checked: checked, displayType: displayType, "data-testid": value, isError: isError, fallbackStyle: fallbackStyle },
|
|
13
13
|
visual && !icon && (React.createElement(VisualWrapper, null,
|
|
@@ -15,7 +15,7 @@ export const RadioItem = forwardRef(function RadioItem({ name, visual, icon, ico
|
|
|
15
15
|
!visual && icon && (React.createElement(IconWrapper, { iconPosition: iconPosition },
|
|
16
16
|
React.createElement(Icon, { render: icon, size: 24 }))),
|
|
17
17
|
React.createElement(Box, { flex: true, alignItems: "center" },
|
|
18
|
-
React.createElement(RadioElement, { ref: ref, name: name, id: id, value: value, checked: checked, onChange: onChange, isError: isError, mr: "8px" }),
|
|
18
|
+
React.createElement(RadioElement, { ref: ref, name: name, id: id, value: value, checked: checked, onChange: onChange, onBlur: onBlur, isError: isError, mr: "8px" }),
|
|
19
19
|
React.createElement(Box, null,
|
|
20
20
|
React.createElement(RadioText, { isError: isError }, label),
|
|
21
21
|
bodyCopy && (React.createElement(Box, null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -13,5 +13,6 @@ export interface SearchInputProps extends CommonFieldProps {
|
|
|
13
13
|
onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
|
|
14
14
|
value?: string;
|
|
15
15
|
resultsRelativePosition?: boolean;
|
|
16
|
+
resultsBorder?: boolean;
|
|
16
17
|
}
|
|
17
18
|
export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React, { forwardRef, useMemo, useState, } from 'react';
|
|
2
|
+
import { Box } from '../Box';
|
|
2
3
|
import { Field } from '../fields/Field';
|
|
4
|
+
import { Input, StyledFrontIcon } from '../fields/components/CommonInput';
|
|
3
5
|
import { useUniqueId } from '../utils/id';
|
|
4
6
|
import { useControllableState } from '../utils/useControlledState';
|
|
5
7
|
import { SearchOptions } from './SearchOptions';
|
|
6
|
-
|
|
7
|
-
import { Box } from '../Box';
|
|
8
|
-
export const SearchInput = forwardRef(function SearchInput({ id: idProp, name = 'search_input', className = '', placeholder, searchList, showIcon = false, renderAsTitle = false, value, onBlur, onFound, fallbackStyle, resultsRelativePosition = false, ...otherProps }, ref) {
|
|
8
|
+
export const SearchInput = forwardRef(function SearchInput({ id: idProp, name = 'search_input', className = '', placeholder, searchList, showIcon = false, renderAsTitle = false, value, onBlur, onFound, fallbackStyle, resultsRelativePosition = false, resultsBorder = true, ...otherProps }, ref) {
|
|
9
9
|
const id = useUniqueId(idProp);
|
|
10
10
|
const [showOptions, setShowOptions] = useState(false);
|
|
11
11
|
const [selectedValue, setSelectedValue] = useControllableState({
|
|
@@ -57,6 +57,6 @@ export const SearchInput = forwardRef(function SearchInput({ id: idProp, name =
|
|
|
57
57
|
}
|
|
58
58
|
onBlur?.(e);
|
|
59
59
|
} })),
|
|
60
|
-
showOptions && (React.createElement(SearchOptions, { displayedList: filteredList, onSelect: handleSelect, positionRelative: resultsRelativePosition }))));
|
|
60
|
+
showOptions && (React.createElement(SearchOptions, { displayedList: filteredList, onSelect: handleSelect, positionRelative: resultsRelativePosition, resultsBorder: resultsBorder }))));
|
|
61
61
|
});
|
|
62
62
|
//# sourceMappingURL=SearchInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,UAAU,EACV,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { Box } from '../Box';
|
|
3
3
|
import { Container } from './Container';
|
|
4
|
+
import { SearchInput } from './SearchInput';
|
|
4
5
|
export default {
|
|
5
6
|
title: 'Search Input',
|
|
6
7
|
component: SearchInput,
|
|
7
8
|
};
|
|
8
|
-
const Template = (props) => React.createElement(
|
|
9
|
+
const Template = (props) => (React.createElement(Box, { height: "500px", width: "100%" },
|
|
10
|
+
React.createElement(Container, { ...props })));
|
|
9
11
|
export const Default = Template.bind({});
|
|
10
12
|
export const ShowIcon = Template.bind({});
|
|
11
13
|
ShowIcon.args = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.stories.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SearchInput.stories.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,WAAW;CACvB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,CAC5C,oBAAC,GAAG,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM;IAC9B,oBAAC,SAAS,OAAK,KAAK,GAAI,CACpB,CACP,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,QAAQ,EAAE,IAAI;CACf,CAAA"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { darken } from 'polished';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import styled from 'styled-components';
|
|
3
|
+
import styled, { css } from 'styled-components';
|
|
4
|
+
import { Box } from '../Box';
|
|
4
5
|
import { theme } from '../theme';
|
|
5
|
-
|
|
6
|
-
export const SearchOptions = ({ displayedList, onSelect, positionRelative, }) => {
|
|
6
|
+
export const SearchOptions = ({ displayedList, onSelect, positionRelative, resultsBorder, }) => {
|
|
7
7
|
return (React.createElement(BoxWithPositionRelative, null,
|
|
8
8
|
React.createElement(StyledResultsContainer, { positionRelative: positionRelative },
|
|
9
|
-
React.createElement(ResultsList,
|
|
9
|
+
React.createElement(ResultsList, { resultsBorder: resultsBorder }, displayedList.length ? (displayedList.map((el, i) => (React.createElement("li", { key: i, onClick: () => onSelect(el) }, el.label)))) : (React.createElement("li", null, "No results"))))));
|
|
10
10
|
};
|
|
11
11
|
const StyledResultsContainer = styled.div `
|
|
12
12
|
box-sizing: border-box;
|
|
@@ -30,6 +30,10 @@ const ResultsList = styled.ul `
|
|
|
30
30
|
border-radius: 12px;
|
|
31
31
|
margin-top: 14px;
|
|
32
32
|
z-index: 1000;
|
|
33
|
+
${({ resultsBorder }) => resultsBorder &&
|
|
34
|
+
css `
|
|
35
|
+
border: 2px solid ${theme.colors.oatmeal};
|
|
36
|
+
`}
|
|
33
37
|
|
|
34
38
|
li {
|
|
35
39
|
padding: 16px 14px;
|
|
@@ -38,6 +42,12 @@ const ResultsList = styled.ul `
|
|
|
38
42
|
color: ${theme.colors.liquorice};
|
|
39
43
|
cursor: pointer;
|
|
40
44
|
|
|
45
|
+
${({ resultsBorder }) => resultsBorder && `border-bottom: 2px solid ${theme.colors.oatmeal};`}
|
|
46
|
+
|
|
47
|
+
&:last-child {
|
|
48
|
+
${({ resultsBorder }) => resultsBorder && `border-bottom:none`}
|
|
49
|
+
}
|
|
50
|
+
|
|
41
51
|
&:hover {
|
|
42
52
|
background-color: ${darken(0.1, theme.colors.custard)};
|
|
43
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../src/SearchInput/SearchOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../src/SearchInput/SearchOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAchC,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,aAAa,GACd,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,uBAAuB;QACtB,oBAAC,sBAAsB,IAAC,gBAAgB,EAAE,gBAAgB;YACxD,oBAAC,WAAW,IAAC,aAAa,EAAE,aAAa,IACtC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CACtB,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3B,4BAAI,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,IACpC,EAAE,CAAC,KAAK,CACN,CACN,CAAC,CACH,CAAC,CAAC,CAAC,CACF,6CAAmB,CACpB,CACW,CACS,CACD,CAC3B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAExC;;;IAGG,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC,gBAAgB,IAAI,qBAAqB;;;;;;;;CAQvE,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,CAA2C;;;;;;sBAMlD,KAAK,CAAC,MAAM,CAAC,OAAO;;;;IAItC,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;0BACmB,KAAK,CAAC,MAAM,CAAC,OAAO;KACzC;;;;;;aAMQ,KAAK,CAAC,MAAM,CAAC,SAAS;;;MAG7B,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa,IAAI,4BAA4B,KAAK,CAAC,MAAM,CAAC,OAAO,GAAG;;;QAGlE,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,aAAa,IAAI,oBAAoB;;;;0BAI1C,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;CAG1D,CAAA;AAED,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE1C,CAAA"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { TableProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.
|
|
5
|
+
*
|
|
6
|
+
* Caveats:
|
|
7
|
+
* - subRows should always have the same columns as the Parent table.
|
|
8
|
+
* - stripedColor wont be applied to subRows or subTables.
|
|
9
|
+
* - rowActions will always need an onClick, this will be automatically passed onto the ReactNode you place & will be selectable
|
|
10
|
+
* - rows will scale depending on the cell content size
|
|
11
|
+
*
|
|
12
|
+
* Improvements:
|
|
13
|
+
* - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
|
|
14
|
+
* -
|
|
15
|
+
*
|
|
16
|
+
* @template T - The type of data the table displays.
|
|
17
|
+
* @property {T[]} data - Array of data to be displayed in the table.
|
|
18
|
+
* @property {TableColumn<T>[]} columns - Array of columns to display in the table.
|
|
19
|
+
* @property {boolean} [fixedHeader=false] - If true, the table header will be fixed/sticky.
|
|
20
|
+
* @property {string} [headerHeight] - Sets the height of the header.
|
|
21
|
+
* @property {function(T): boolean} [expandable] - A function to determine if a row is expandable.
|
|
22
|
+
* @property {Color} [stripedColor] - If present, the table rows will have alternating colors.
|
|
23
|
+
* @property {Color} [headerColor='mascarpone'] - The color for the table header.
|
|
24
|
+
* @property {Color} [rowColor='custard'] - The default color for each table row.
|
|
25
|
+
* @property {Color} [rowBorderColor='oatmeal'] - The default color for each table row border.
|
|
26
|
+
* @property {ReactElement} [subTable] - A React element to show when a row is expanded.
|
|
27
|
+
* @property {Object} [subRows] - Settings for sub rows.
|
|
28
|
+
* @property {function(T): ReactElement} subRows.rows - Function that returns a React element for the sub row.
|
|
29
|
+
* @property {boolean} [subRows.showOnExpand=false] - If true, the sub rows will only be shown when the row is expanded.
|
|
30
|
+
* @property {RowAction<T>[]} [rowActions] - Array of actions that can be performed on each row.
|
|
31
|
+
* @property {string} [rowActionsMinWidth] - The minimum width for the row actions column.
|
|
32
|
+
* @property {string} [rowPadding] - The padding for each row, essentially the height.
|
|
33
|
+
* @property {string} [noDataContent] - The text to show when there is no available data to map through.
|
|
34
|
+
*/
|
|
35
|
+
export declare const Table: <T extends object>({ columns, data, fixedHeader, expandable, subTable, subRows, headerHeight, headerColor, rowColor, stripedColor, rowBorderColor, rowActions, rowActionsMinWidth, rowPadding, noDataContent, }: TableProps<T>) => JSX.Element;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Text } from '../Text';
|
|
3
|
+
import { TableHeader } from './components/TableHeader';
|
|
4
|
+
import { TableRow } from './components/TableRow';
|
|
5
|
+
import { StyledCell, StyledTable } from './components/commonComponents';
|
|
6
|
+
/**
|
|
7
|
+
* A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.
|
|
8
|
+
*
|
|
9
|
+
* Caveats:
|
|
10
|
+
* - subRows should always have the same columns as the Parent table.
|
|
11
|
+
* - stripedColor wont be applied to subRows or subTables.
|
|
12
|
+
* - rowActions will always need an onClick, this will be automatically passed onto the ReactNode you place & will be selectable
|
|
13
|
+
* - rows will scale depending on the cell content size
|
|
14
|
+
*
|
|
15
|
+
* Improvements:
|
|
16
|
+
* - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
|
|
17
|
+
* -
|
|
18
|
+
*
|
|
19
|
+
* @template T - The type of data the table displays.
|
|
20
|
+
* @property {T[]} data - Array of data to be displayed in the table.
|
|
21
|
+
* @property {TableColumn<T>[]} columns - Array of columns to display in the table.
|
|
22
|
+
* @property {boolean} [fixedHeader=false] - If true, the table header will be fixed/sticky.
|
|
23
|
+
* @property {string} [headerHeight] - Sets the height of the header.
|
|
24
|
+
* @property {function(T): boolean} [expandable] - A function to determine if a row is expandable.
|
|
25
|
+
* @property {Color} [stripedColor] - If present, the table rows will have alternating colors.
|
|
26
|
+
* @property {Color} [headerColor='mascarpone'] - The color for the table header.
|
|
27
|
+
* @property {Color} [rowColor='custard'] - The default color for each table row.
|
|
28
|
+
* @property {Color} [rowBorderColor='oatmeal'] - The default color for each table row border.
|
|
29
|
+
* @property {ReactElement} [subTable] - A React element to show when a row is expanded.
|
|
30
|
+
* @property {Object} [subRows] - Settings for sub rows.
|
|
31
|
+
* @property {function(T): ReactElement} subRows.rows - Function that returns a React element for the sub row.
|
|
32
|
+
* @property {boolean} [subRows.showOnExpand=false] - If true, the sub rows will only be shown when the row is expanded.
|
|
33
|
+
* @property {RowAction<T>[]} [rowActions] - Array of actions that can be performed on each row.
|
|
34
|
+
* @property {string} [rowActionsMinWidth] - The minimum width for the row actions column.
|
|
35
|
+
* @property {string} [rowPadding] - The padding for each row, essentially the height.
|
|
36
|
+
* @property {string} [noDataContent] - The text to show when there is no available data to map through.
|
|
37
|
+
*/
|
|
38
|
+
export const Table = ({ columns, data, fixedHeader = true, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions, rowActionsMinWidth, rowPadding, noDataContent, }) => {
|
|
39
|
+
const showActionsCell = expandable || rowActions;
|
|
40
|
+
const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
|
|
41
|
+
return (React.createElement(StyledTable, null,
|
|
42
|
+
React.createElement("thead", null,
|
|
43
|
+
React.createElement(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, subTable: subTable, headerColor: headerColor, rowActions: rowActions, expandable: expandable, rowActionsMinWidth: rowActionsMinWidth })),
|
|
44
|
+
React.createElement("tbody", null,
|
|
45
|
+
data.length === 0 && (React.createElement(StyledCell, { colSpan: expandSubProp, rowPadding: rowPadding }, noDataContent ? (noDataContent) : (React.createElement(Text, { align: "center" }, "No available data")))),
|
|
46
|
+
data.length !== 0 &&
|
|
47
|
+
data.map((row, rowIndex) => (React.createElement(TableRow, { key: rowIndex, rowData: row, rowIndex: rowIndex, columns: columns, rowActions: rowActions, stripedColor: stripedColor, subTable: subTable, subRows: subRows, rowColor: rowColor, rowBorderColor: rowBorderColor, rowPadding: rowPadding, expandable: expandable }))))));
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=Table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAGvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAmB,EACtC,OAAO,EACP,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,UAAU,EACV,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,GAAG,YAAY,EAC1B,QAAQ,GAAG,SAAS,EACpB,YAAY,EACZ,cAAc,GAAG,SAAS,EAC1B,UAAU,EACV,kBAAkB,EAClB,UAAU,EACV,aAAa,GACC,EAAE,EAAE;IAClB,MAAM,eAAe,GAAG,UAAU,IAAI,UAAU,CAAA;IAChD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAA;IAC3E,OAAO,CACL,oBAAC,WAAW;QACV;YACE,oBAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,kBAAkB,EAAE,kBAAkB,GACtC,CACI;QACR;YACG,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB,oBAAC,UAAU,IAAC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,IACvD,aAAa,CAAC,CAAC,CAAC,CACf,aAAa,CACd,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,wBAAyB,CAC9C,CACU,CACd;YACA,IAAI,CAAC,MAAM,KAAK,CAAC;gBAChB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC1B,oBAAC,QAAQ,IACP,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,GACtB,CACH,CAAC,CACE,CACI,CACf,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { TableProps } from './types';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: <T extends object>({ columns, data, fixedHeader, expandable, subTable, subRows, headerHeight, headerColor, rowColor, stripedColor, rowBorderColor, rowActions, rowActionsMinWidth, rowPadding, noDataContent, }: TableProps<T>) => JSX.Element;
|
|
6
|
+
};
|
|
7
|
+
export default _default;
|
|
8
|
+
export declare const Default: any;
|
|
9
|
+
export declare const BasicTable: any;
|
|
10
|
+
export declare const TrucateContent: any;
|
|
11
|
+
export declare const OverflowTable: any;
|
|
12
|
+
export declare const NoDataTable: any;
|
|
13
|
+
export declare const CustomNoDataTable: any;
|
|
14
|
+
export declare const StaticHeader: any;
|
|
15
|
+
export declare const ReallyLargeHeader: any;
|
|
16
|
+
export declare const RowPadding: any;
|
|
17
|
+
export declare const SubRows: any;
|
|
18
|
+
export declare const SubRowsShowOnExpand: any;
|
|
19
|
+
export declare const SubTable: any;
|
|
20
|
+
export declare const RowActions: any;
|
|
21
|
+
export declare const EverythingTable: any;
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import { Box } from '../Box';
|
|
4
|
+
import { theme } from '../theme';
|
|
5
|
+
import { Table } from './Table';
|
|
6
|
+
import { TableRow } from './components/TableRow';
|
|
7
|
+
import { columns, columnsV2, data, rowActions } from './storyUtils';
|
|
8
|
+
export default {
|
|
9
|
+
title: 'Table',
|
|
10
|
+
component: Table,
|
|
11
|
+
};
|
|
12
|
+
const Template = (props) => React.createElement(Table, { ...props });
|
|
13
|
+
const TemplateWithWrapper = (props) => (React.createElement(Wrapper, { height: "400px", mb: "64px" },
|
|
14
|
+
React.createElement(Table, { ...props })));
|
|
15
|
+
const Wrapper = styled(Box) `
|
|
16
|
+
background: ${theme.colors.blueberry};
|
|
17
|
+
overflow: scroll;
|
|
18
|
+
`;
|
|
19
|
+
export const Default = Template.bind({});
|
|
20
|
+
Default.args = {
|
|
21
|
+
rowPadding: '12px',
|
|
22
|
+
columns: columns.slice(0, 6),
|
|
23
|
+
data,
|
|
24
|
+
fixedHeader: true,
|
|
25
|
+
};
|
|
26
|
+
export const BasicTable = Template.bind({});
|
|
27
|
+
BasicTable.args = {
|
|
28
|
+
rowPadding: '12px',
|
|
29
|
+
columns: columns.slice(0, 3),
|
|
30
|
+
data,
|
|
31
|
+
};
|
|
32
|
+
export const TrucateContent = Template.bind({});
|
|
33
|
+
TrucateContent.args = {
|
|
34
|
+
rowPadding: '12px',
|
|
35
|
+
columns: columns,
|
|
36
|
+
data,
|
|
37
|
+
};
|
|
38
|
+
export const OverflowTable = TemplateWithWrapper.bind({});
|
|
39
|
+
OverflowTable.args = {
|
|
40
|
+
rowPadding: '12px',
|
|
41
|
+
columns: columns,
|
|
42
|
+
data,
|
|
43
|
+
};
|
|
44
|
+
export const NoDataTable = TemplateWithWrapper.bind({});
|
|
45
|
+
NoDataTable.args = {
|
|
46
|
+
rowPadding: '12px',
|
|
47
|
+
columns: columns.slice(0, 4),
|
|
48
|
+
data: [],
|
|
49
|
+
};
|
|
50
|
+
const BorderBox = styled(Box) `
|
|
51
|
+
border: 1px dashed ${theme.colors.oatmeal};
|
|
52
|
+
`;
|
|
53
|
+
export const CustomNoDataTable = TemplateWithWrapper.bind({});
|
|
54
|
+
CustomNoDataTable.args = {
|
|
55
|
+
rowPadding: '0px',
|
|
56
|
+
columns: columns.slice(0, 5),
|
|
57
|
+
data: [],
|
|
58
|
+
noDataContent: (React.createElement(BorderBox, { flex: true, justifyContent: "center", my: "24px", p: "48px" }, "No data")),
|
|
59
|
+
};
|
|
60
|
+
export const StaticHeader = TemplateWithWrapper.bind({});
|
|
61
|
+
StaticHeader.args = {
|
|
62
|
+
rowPadding: '12px',
|
|
63
|
+
columns: columns,
|
|
64
|
+
data,
|
|
65
|
+
fixedHeader: false,
|
|
66
|
+
};
|
|
67
|
+
export const ReallyLargeHeader = TemplateWithWrapper.bind({});
|
|
68
|
+
ReallyLargeHeader.args = {
|
|
69
|
+
rowPadding: '12px',
|
|
70
|
+
headerHeight: '120px',
|
|
71
|
+
columns: columns,
|
|
72
|
+
data,
|
|
73
|
+
fixedHeader: false,
|
|
74
|
+
};
|
|
75
|
+
export const RowPadding = Template.bind({});
|
|
76
|
+
RowPadding.args = {
|
|
77
|
+
rowPadding: '0px',
|
|
78
|
+
columns: columns.slice(0, 4),
|
|
79
|
+
data,
|
|
80
|
+
};
|
|
81
|
+
export const SubRows = Template.bind({});
|
|
82
|
+
SubRows.args = {
|
|
83
|
+
rowPadding: '12px',
|
|
84
|
+
columns: columns.slice(0, 4),
|
|
85
|
+
data,
|
|
86
|
+
subRows: {
|
|
87
|
+
rows: (row) => {
|
|
88
|
+
if (!row.subRowData)
|
|
89
|
+
return;
|
|
90
|
+
return row.subRowData.map((row, rowIndex) => {
|
|
91
|
+
return (React.createElement(TableRow, { key: rowIndex, rowIndex: rowIndex, rowData: row, columns: columns.slice(0, 4), rowColor: "chia" }));
|
|
92
|
+
});
|
|
93
|
+
},
|
|
94
|
+
showOnExpand: () => false,
|
|
95
|
+
},
|
|
96
|
+
};
|
|
97
|
+
export const SubRowsShowOnExpand = Template.bind({});
|
|
98
|
+
SubRowsShowOnExpand.args = {
|
|
99
|
+
rowPadding: '12px',
|
|
100
|
+
columns: columns.slice(0, 4),
|
|
101
|
+
data,
|
|
102
|
+
expandable: (row) => !!row.subRowData,
|
|
103
|
+
subRows: {
|
|
104
|
+
rows: (row) => {
|
|
105
|
+
if (!row.subRowData)
|
|
106
|
+
return;
|
|
107
|
+
return row.subRowData.map((row, rowIndex) => {
|
|
108
|
+
return (React.createElement(TableRow, { key: rowIndex, rowIndex: rowIndex, rowData: row, columns: columns.slice(0, 4), rowColor: "chia" }));
|
|
109
|
+
});
|
|
110
|
+
},
|
|
111
|
+
showOnExpand: () => true,
|
|
112
|
+
},
|
|
113
|
+
};
|
|
114
|
+
export const SubTable = Template.bind({});
|
|
115
|
+
SubTable.args = {
|
|
116
|
+
rowPadding: '12px',
|
|
117
|
+
columns: columns.slice(0, 4),
|
|
118
|
+
data,
|
|
119
|
+
stripedColor: 'cream',
|
|
120
|
+
expandable: () => true,
|
|
121
|
+
subTable: {
|
|
122
|
+
table: () => {
|
|
123
|
+
return (React.createElement(Table, { columns: columnsV2, data: data, headerColor: "mascarpone", rowColor: "matcha", fixedHeader: false, rowActions: rowActions }));
|
|
124
|
+
},
|
|
125
|
+
showOnExpand: () => true,
|
|
126
|
+
},
|
|
127
|
+
};
|
|
128
|
+
export const RowActions = Template.bind({});
|
|
129
|
+
RowActions.args = {
|
|
130
|
+
rowPadding: '12px',
|
|
131
|
+
columns: columns.slice(0, 4),
|
|
132
|
+
data,
|
|
133
|
+
stripedColor: 'cream',
|
|
134
|
+
expandable: () => true,
|
|
135
|
+
subTable: {
|
|
136
|
+
table: () => {
|
|
137
|
+
return (React.createElement(Table, { columns: columnsV2, data: data, headerColor: "mascarpone", rowColor: "matcha", fixedHeader: false, rowActions: rowActions }));
|
|
138
|
+
},
|
|
139
|
+
showOnExpand: () => true,
|
|
140
|
+
},
|
|
141
|
+
rowActions: rowActions,
|
|
142
|
+
};
|
|
143
|
+
export const EverythingTable = TemplateWithWrapper.bind({});
|
|
144
|
+
EverythingTable.args = {
|
|
145
|
+
columns: columns,
|
|
146
|
+
data,
|
|
147
|
+
expandable: () => true,
|
|
148
|
+
subTable: {
|
|
149
|
+
table: () => {
|
|
150
|
+
return (React.createElement(Table, { columns: columnsV2, data: data, headerColor: "mascarpone", rowColor: "matcha", fixedHeader: false, rowActions: rowActions }));
|
|
151
|
+
},
|
|
152
|
+
showOnExpand: () => true,
|
|
153
|
+
},
|
|
154
|
+
subRows: {
|
|
155
|
+
rows: (row) => {
|
|
156
|
+
if (!row.subRowData)
|
|
157
|
+
return;
|
|
158
|
+
return row.subRowData.map((row, rowIndex) => {
|
|
159
|
+
return (React.createElement(TableRow, { key: rowIndex, rowIndex: rowIndex, rowData: row, columns: columns, rowColor: "cream", rowBorderColor: "chia", rowActions: rowActions }));
|
|
160
|
+
});
|
|
161
|
+
},
|
|
162
|
+
showOnExpand: () => false,
|
|
163
|
+
},
|
|
164
|
+
rowColor: 'custard',
|
|
165
|
+
headerColor: 'mascarpone',
|
|
166
|
+
rowActions: rowActions,
|
|
167
|
+
rowPadding: '4px',
|
|
168
|
+
};
|
|
169
|
+
//# sourceMappingURL=Table.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.stories.js","sourceRoot":"","sources":["../../src/Table/Table.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import { Box } from '../../Box';
|
|
4
|
+
import { Button } from '../../Button';
|
|
5
|
+
import { IconStrict } from '../../IconStrict';
|
|
6
|
+
import { focusOutlineStyle } from '../../utils/focusOutline';
|
|
7
|
+
import { isReactElement } from '../helpers';
|
|
8
|
+
import { StyledCell } from './commonComponents';
|
|
9
|
+
export const RowActions = ({ rowData, rowActions, expandable, isExpanded, toggleExpansion, }) => {
|
|
10
|
+
return (React.createElement(StyledCell, { stickyCell: Boolean(rowActions) || Boolean(expandable) },
|
|
11
|
+
React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-end" },
|
|
12
|
+
rowActions &&
|
|
13
|
+
rowActions?.map((action, actionIndex) => {
|
|
14
|
+
if (!action.showCondition || action.showCondition(rowData)) {
|
|
15
|
+
return (React.createElement(Wrapper, { flex: true, key: actionIndex },
|
|
16
|
+
isReactElement(action.element) &&
|
|
17
|
+
React.cloneElement(action.element, {
|
|
18
|
+
onClick: () => action.onClick(rowData),
|
|
19
|
+
tabIndex: 0,
|
|
20
|
+
className: 'reactElementRowAction',
|
|
21
|
+
}),
|
|
22
|
+
action.genericButton && !isReactElement(action.element) && (React.createElement(Button, { ...action.genericButton, handleClick: () => action.onClick(rowData) }, action.genericButton.children)),
|
|
23
|
+
action.iconButton && (React.createElement(IconStrict, { ...action.iconButton, handleClick: () => action.onClick(rowData) }))));
|
|
24
|
+
}
|
|
25
|
+
return null;
|
|
26
|
+
}),
|
|
27
|
+
expandable && expandable(rowData) && (React.createElement(CaretIcon, { render: "caret", handleClick: () => toggleExpansion(), size: 36, isOpen: isExpanded, backgroundColor: "cream" })))));
|
|
28
|
+
};
|
|
29
|
+
const Wrapper = styled(Box) `
|
|
30
|
+
white-space: nowrap;
|
|
31
|
+
margin-right: 8px;
|
|
32
|
+
|
|
33
|
+
&:last-child {
|
|
34
|
+
margin-right: 0px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.reactElementRowAction {
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
${focusOutlineStyle}
|
|
40
|
+
}
|
|
41
|
+
`;
|
|
42
|
+
const CaretIcon = styled(IconStrict)(({ isOpen }) => `
|
|
43
|
+
transform: ${isOpen ? 'rotate(90deg)' : 'rotate(0deg)'};
|
|
44
|
+
transition: transform 0.3s ease;
|
|
45
|
+
`);
|
|
46
|
+
//# sourceMappingURL=RowActions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RowActions.js","sourceRoot":"","sources":["../../../src/Table/components/RowActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAmB,EAC3C,OAAO,EACP,UAAU,EACV,UAAU,EACV,UAAU,EACV,eAAe,GACI,EAAE,EAAE;IACvB,OAAO,CACL,oBAAC,UAAU,IAAC,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,UAAU,CAAC;QAChE,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,UAAU;YACpD,UAAU;gBACT,UAAU,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE;oBACtC,IAAI,CAAC,MAAM,CAAC,aAAa,IAAI,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE;wBAC1D,OAAO,CACL,oBAAC,OAAO,IAAC,IAAI,QAAC,GAAG,EAAE,WAAW;4BAC3B,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC;gCAC7B,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE;oCACjC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;oCACtC,QAAQ,EAAE,CAAC;oCACX,SAAS,EAAE,uBAAuB;iCACnC,CAAC;4BACH,MAAM,CAAC,aAAa,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAC1D,oBAAC,MAAM,OACD,MAAM,CAAC,aAAa,EACxB,WAAW,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,IAEzC,MAAM,CAAC,aAAa,CAAC,QAAQ,CACvB,CACV;4BACA,MAAM,CAAC,UAAU,IAAI,CACpB,oBAAC,UAAU,OACL,MAAM,CAAC,UAAU,EACrB,WAAW,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,GAC1C,CACH,CACO,CACX,CAAA;qBACF;oBACD,OAAO,IAAI,CAAA;gBACb,CAAC,CAAC;YACH,UAAU,IAAI,UAAU,CAAC,OAAO,CAAC,IAAI,CACpC,oBAAC,SAAS,IACR,MAAM,EAAC,OAAO,EACd,WAAW,EAAE,GAAG,EAAE,CAAC,eAAe,EAAE,EACpC,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,UAAU,EAClB,eAAe,EAAC,OAAO,GACvB,CACH,CACG,CACK,CACd,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;MAUrB,iBAAiB;;CAEtB,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,CAClC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;iBACD,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc;;GAEvD,CACF,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyledHeaderCell, StyledRow } from './commonComponents';
|
|
3
|
+
export const TableHeader = ({ columns, fixedHeader, headerColor, rowActions, headerHeight, expandable, rowActionsMinWidth, }) => {
|
|
4
|
+
return (React.createElement(StyledRow, null,
|
|
5
|
+
columns.map((column, columnIndex) => (React.createElement(StyledHeaderCell, { key: columnIndex, fixedHeader: fixedHeader, headerHeight: headerHeight, minWidth: column.minWidth, maxWidth: column.maxWidth, headerColor: headerColor }, column.name))),
|
|
6
|
+
(expandable || rowActions) && (React.createElement(StyledHeaderCell, { fixedHeader: fixedHeader, stickyCell: true, minWidth: rowActionsMinWidth, headerColor: headerColor }, "Actions"))));
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=TableHeader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/Table/components/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAEhE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAmB,EAC5C,OAAO,EACP,WAAW,EACX,WAAW,EACX,UAAU,EACV,YAAY,EACZ,UAAU,EACV,kBAAkB,GACE,EAAE,EAAE;IACxB,OAAO,CACL,oBAAC,SAAS;QACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACpC,oBAAC,gBAAgB,IACf,GAAG,EAAE,WAAW,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,WAAW,EAAE,WAAW,IAEvB,MAAM,CAAC,IAAI,CACK,CACpB,CAAC;QACD,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI,CAC7B,oBAAC,gBAAgB,IACf,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,kBAAkB,EAC5B,WAAW,EAAE,WAAW,cAGP,CACpB,CACS,CACb,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { TableRowProps } from '../types';
|
|
3
|
+
export declare const TableRow: <T extends object>({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, showActions, expandable, }: TableRowProps<T>) => JSX.Element;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { isMappedReactElement, isReactElement } from '../helpers';
|
|
3
|
+
import { RowActions } from './RowActions';
|
|
4
|
+
import { StyledCell, StyledRow } from './commonComponents';
|
|
5
|
+
export const TableRow = ({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, showActions, expandable, }) => {
|
|
6
|
+
const [expandedRows, setExpandedRows] = useState([]);
|
|
7
|
+
const toggleRowExpansion = (rowIndex) => {
|
|
8
|
+
setExpandedRows((prevState) => prevState.includes(rowIndex)
|
|
9
|
+
? prevState.filter((index) => index !== rowIndex)
|
|
10
|
+
: [...prevState, rowIndex]);
|
|
11
|
+
};
|
|
12
|
+
const subRowsData = subRows?.rows(rowData);
|
|
13
|
+
const subTableData = subTable?.table(rowData);
|
|
14
|
+
const showSubRowsOnExpand = subRows?.showOnExpand && subRows?.showOnExpand(rowData);
|
|
15
|
+
const showSubTableOnExpand = subTable?.showOnExpand && subTable?.showOnExpand(rowData);
|
|
16
|
+
const showActionsCell = expandable || rowActions;
|
|
17
|
+
const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
|
|
18
|
+
return (React.createElement(React.Fragment, null,
|
|
19
|
+
React.createElement(StyledRow, { stripedColor: stripedColor, rowColor: rowColor, rowBorderColor: rowBorderColor },
|
|
20
|
+
columns.map((column, columnIndex) => {
|
|
21
|
+
let cellContent;
|
|
22
|
+
if (column.cell) {
|
|
23
|
+
cellContent = column.cell(rowData, rowIndex, column, rowIndex);
|
|
24
|
+
}
|
|
25
|
+
return (React.createElement(StyledCell, { key: columnIndex, rowPadding: rowPadding, minWidth: column.minWidth, maxWidth: column.maxWidth, noWrapContent: column.noWrapContent, truncateContent: column.truncateContent }, cellContent));
|
|
26
|
+
}),
|
|
27
|
+
(showActionsCell || showActions) && (React.createElement(RowActions, { expandable: expandable, rowActions: rowActions, rowData: rowData, isExpanded: expandedRows.includes(rowIndex), toggleExpansion: () => toggleRowExpansion(rowIndex) }))),
|
|
28
|
+
expandedRows.includes(rowIndex) && (React.createElement(React.Fragment, null,
|
|
29
|
+
subRows &&
|
|
30
|
+
subRowsData &&
|
|
31
|
+
showSubRowsOnExpand &&
|
|
32
|
+
isReactElement(subRowsData) &&
|
|
33
|
+
React.cloneElement(subRowsData, {
|
|
34
|
+
rowPadding: rowPadding,
|
|
35
|
+
}),
|
|
36
|
+
subRows &&
|
|
37
|
+
subRowsData &&
|
|
38
|
+
showSubRowsOnExpand &&
|
|
39
|
+
isMappedReactElement(subRowsData) &&
|
|
40
|
+
subRowsData.map((row) => React.cloneElement(row, {
|
|
41
|
+
rowPadding: rowPadding,
|
|
42
|
+
showActions: showActionsCell,
|
|
43
|
+
})),
|
|
44
|
+
subTable && showSubTableOnExpand && subTableData && (React.createElement(StyledCell, { colSpan: expandSubProp }, React.cloneElement(subTableData, {
|
|
45
|
+
rowPadding: rowPadding,
|
|
46
|
+
}))))),
|
|
47
|
+
subRows &&
|
|
48
|
+
subRowsData &&
|
|
49
|
+
!showSubRowsOnExpand &&
|
|
50
|
+
isReactElement(subRowsData) &&
|
|
51
|
+
React.cloneElement(subRowsData, {
|
|
52
|
+
rowPadding: rowPadding,
|
|
53
|
+
}),
|
|
54
|
+
subRows &&
|
|
55
|
+
subRowsData &&
|
|
56
|
+
!showSubRowsOnExpand &&
|
|
57
|
+
isMappedReactElement(subRowsData) &&
|
|
58
|
+
subRowsData.map((row) => React.cloneElement(row, {
|
|
59
|
+
rowPadding: rowPadding,
|
|
60
|
+
})),
|
|
61
|
+
subTable && subTableData && !showSubTableOnExpand && (React.createElement(StyledCell, { colSpan: expandSubProp }, React.cloneElement(subTableData, {
|
|
62
|
+
rowPadding: rowPadding,
|
|
63
|
+
})))));
|
|
64
|
+
};
|
|
65
|
+
//# sourceMappingURL=TableRow.js.map
|