@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":"AAAA,OAAO,KAAK,EAAE,EAGZ,UAAU,EACV,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAA;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAmB/C,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EACE,EAAE,EAAE,MAAM,EACV,IAAI,GAAG,cAAc,EACrB,SAAS,GAAG,EAAE,EACd,WAAW,EACX,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,KAAK,EACrB,KAAK,EACL,MAAM,EACN,OAAO,EACP,aAAa,EACb,uBAAuB,GAAG,KAAK,EAC/B,aAAa,GAAG,IAAI,EACpB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACrD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,oBAAoB,CAE5D;QACA,YAAY,EAAE,IAAI;QAClB,SAAS,EAAE,KAAK;KACjB,CAAC,CAAA;IAEF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAA;IAEnE,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,EAAE,EAAE;YAC9C,OAAO,UAAU,CAAA;SAClB;QAED,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACrC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,iBAAiB,EAAE,CAAC,CAC9D,CAAA;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,IAAI,WAAW,KAAK,IAAI,EAAE;YACxB,OAAO,WAAW,CAAA;SACnB;QAED,IAAI,aAAa,KAAK,IAAI,EAAE;YAC1B,OAAO,CACL,UAAU,CAAC,IAAI,CACb,CAAC,MAAM,EAAE,EAAE,CACT,MAAM,CAAC,KAAK,KAAK,aAAa,IAAI,MAAM,CAAC,KAAK,KAAK,aAAa,CACnE,EAAE,KAAK,IAAI,EAAE,CACf,CAAA;SACF;QAED,OAAO,EAAE,CAAA;IACX,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,aAAa,KAAK,IAAI,CAAA;IACzC,MAAM,kBAAkB,GAAG,qBAAqB,EAAE,CAAA;IAElD,MAAM,iBAAiB,GAAG,CAAC,KAAoB,EAAE,EAAE;QACjD,cAAc,CAAC,KAAK,CAAC,CAAA;QAErB,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,cAAc,CAAC,KAAK,CAAC,CAAA;SACtB;aAAM;YACL,cAAc,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAA;SAClC;IACH,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,CAAC,KAAoC,EAAQ,EAAE;QACvE,MAAM,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAA;QAC3C,iBAAiB,CAAC,SAAS,CAAC,CAAA;IAC9B,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,CAAC,SAA0B,EAAQ,EAAE;QACxD,iBAAiB,CAAC,IAAI,CAAC,CAAA;QAEvB,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;QACjC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,EAAE,KACP,UAAU;QAEd,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY;YACtD,QAAQ,IAAI,oBAAC,eAAe,IAAC,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,GAAG;YAC/D,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EACpC,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,kBAAkB,EACzB,QAAQ,EAAE,iBAAiB,EAC3B,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;oBACZ,IAAI,kBAAkB,KAAK,EAAE,EAAE;wBAC7B,cAAc,CAAC,IAAI,CAAC,CAAA;qBACrB;oBACD,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;gBACb,CAAC,GACD,CACE;QAEL,WAAW,IAAI,CACd,oBAAC,aAAa,IACZ,aAAa,EAAE,YAAY,EAC3B,QAAQ,EAAE,YAAY,EACtB,gBAAgB,EAAE,uBAAuB,EACzC,aAAa,EAAE,aAAa,GAC5B,CACH,CACK,CACT,CAAA;AACH,CAAC,CACF,CAAA"}
|
@@ -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
|