Skip to content

Commit c821862

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #940 from rvsia/transformCarbonToCSS
fix(carbon): transform to JSS
2 parents cc897c5 + ffc0946 commit c821862

File tree

20 files changed

+531
-295
lines changed

20 files changed

+531
-295
lines changed

‎packages/carbon-component-mapper/demo/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import FormRenderer from '@data-driven-forms/react-form-renderer';
3+
import { FormRenderer } from '@data-driven-forms/react-form-renderer';
44
import { arraySchemaDDF } from './demo-schemas/widget-schema';
55
import { componentMapper, FormTemplate } from '../src';
66
import { wizardSchema } from './demo-schemas/wizard-schema';

‎packages/carbon-component-mapper/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"peerDependencies": {},
6565
"dependencies": {
6666
"@data-driven-forms/common": "*",
67-
"prop-types": ">=15.7.2"
67+
"prop-types": ">=15.7.2",
68+
"react-jss": "^10.5.0"
6869
}
6970
}

‎packages/carbon-component-mapper/src/dual-list-select/dual-list-select.js

Lines changed: 136 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import DualListSelectCommon from '@data-driven-forms/common/dual-list-select';
44
import clsx from 'clsx';
5+
import { createUseStyles } from 'react-jss';
56

67
import { Grid, Row, Column, Button, FormGroup, Search, TooltipIcon } from 'carbon-components-react';
78
import { CheckmarkFilled16, ChevronRight32, ChevronLeft32, CaretSortDown32, CaretSortUp32 } from '@carbon/icons-react';
@@ -14,7 +15,42 @@ import {
1415
} from 'carbon-components-react/lib/components/StructuredList/StructuredList';
1516

1617
import { buildLabel } from '../prepare-props';
17-
import './dual-list-select.scss';
18+
19+
const useStyles = createUseStyles({
20+
dualList: {
21+
maxHeight: 500,
22+
overflow: 'auto',
23+
display: 'block',
24+
marginBottom: 0
25+
},
26+
dualListBody: {
27+
width: '100%',
28+
display: 'inline-table'
29+
},
30+
buttonWrapper: {
31+
flexDirection: 'column',
32+
padding: '8px !important',
33+
paddingTop: '8px !important',
34+
button: {
35+
width: '100%',
36+
maxWidth: '100%',
37+
'@media (max-width: 1055px)': {
38+
svg: {
39+
transform: 'rotate(90deg)'
40+
}
41+
}
42+
},
43+
'& button:not(:last-child)': {
44+
marginBottom: 8
45+
}
46+
},
47+
toolbar: {
48+
display: 'flex'
49+
},
50+
tooltipButton: {
51+
background: '#c2c1c1 !important'
52+
}
53+
});
1854

1955
const EmptyList = ({ message }) => (
2056
<StructuredListWrapper>
@@ -30,10 +66,12 @@ EmptyList.propTypes = {
3066
message: PropTypes.string
3167
};
3268

33-
const List = ({ options, selectedValues, handleOptionsClick, noTitle, ListProps, BodyProps }) =>
34-
options.length > 0 ? (
35-
<StructuredListWrapper selection {...ListProps} className={clsx('ddorg__carbon-dual-list', ListProps.className)}>
36-
<StructuredListBody {...BodyProps} className={clsx('ddorg__carbon-dual-list-body', BodyProps.className)}>
69+
const List = ({ options, selectedValues, handleOptionsClick, noTitle, ListProps, BodyProps }) => {
70+
const { dualList, dualListBody } = useStyles();
71+
72+
return options.length > 0 ? (
73+
<StructuredListWrapper selection {...ListProps} className={clsx(dualList, ListProps.className)}>
74+
<StructuredListBody {...BodyProps} className={clsx(dualListBody, BodyProps.className)}>
3775
{options.map(({ value, label, ListRowProps, ListCellProps, GridProps, RowProps, LabelProps, CheckmarkProps }) => (
3876
<StructuredListRow key={value} {...ListRowProps} onClick={(e) => handleOptionsClick({ ...e, ctrlKey: true }, value)}>
3977
<StructuredListCell {...ListCellProps}>
@@ -55,6 +93,7 @@ const List = ({ options, selectedValues, handleOptionsClick, noTitle, ListProps,
5593
) : (
5694
<EmptyList message={noTitle} />
5795
);
96+
};
5897

5998
List.propTypes = {
6099
options: PropTypes.array,
@@ -65,19 +104,18 @@ List.propTypes = {
65104
BodyProps: PropTypes.object
66105
};
67106

68-
const Toolbar = ({ sortTitle, onFilter, onSort, sortDirection, placeholder, ToolbarProps, SearchProps, SortProps }) => (
69-
<div {...ToolbarProps} className={clsx('ddorg__carbon-dual-list-toolbar', ToolbarProps.className)}>
70-
<Search onChange={(e) => onFilter(e.target.value)} labelText="" placeHolderText={placeholder} {...SearchProps} />
71-
<TooltipIcon
72-
onClick={onSort}
73-
tooltipText={sortTitle}
74-
{...SortProps}
75-
className={clsx('ddorg__carbon-dual-list-tooltipbutton', SortProps.className)}
76-
>
77-
{sortDirection ? <CaretSortDown32 /> : <CaretSortUp32 />}
78-
</TooltipIcon>
79-
</div>
80-
);
107+
const Toolbar = ({ sortTitle, onFilter, onSort, sortDirection, placeholder, ToolbarProps, SearchProps, SortProps }) => {
108+
const { toolbar, tooltipButton } = useStyles();
109+
110+
return (
111+
<div {...ToolbarProps} className={clsx(toolbar, ToolbarProps.className)}>
112+
<Search onChange={(e) => onFilter(e.target.value)} labelText="" placeHolderText={placeholder} {...SearchProps} />
113+
<TooltipIcon onClick={onSort} tooltipText={sortTitle} {...SortProps} className={clsx(tooltipButton, SortProps.className)}>
114+
{sortDirection ? <CaretSortDown32 /> : <CaretSortUp32 />}
115+
</TooltipIcon>
116+
</div>
117+
);
118+
};
81119

82120
Toolbar.propTypes = {
83121
sortTitle: PropTypes.string,
@@ -146,82 +184,86 @@ const DualListSelectInner = ({
146184
LeftBodyProps,
147185
RightListProps,
148186
RightBodyProps
149-
}) => (
150-
<FormGroup legendText={buildLabel(label || '', isRequired)} {...FormGroupProps}>
151-
<Grid {...GridProps}>
152-
<Row condensed {...RowProps}>
153-
<Column sm={4} md={8} lg={5} {...OptionsColumnProps}>
154-
{React.createElement(LeftTitleElement, LeftTitleProps, leftTitle)}
155-
<Toolbar
156-
onFilter={filterOptions}
157-
placeholder={filterOptionsTitle}
158-
sortDirection={state.sortLeftDesc}
159-
onSort={sortOptions}
160-
sortTitle={sortOptionsTitle}
161-
ToolbarProps={LeftToolbarProps}
162-
SearchProps={LeftSearchProps}
163-
SortProps={LeftSortProps}
164-
/>
165-
<List
166-
ListProps={LeftListProps}
167-
BodyProps={LeftBodyProps}
168-
options={leftValues}
169-
selectedValues={state.selectedLeftValues}
170-
handleOptionsClick={handleOptionsClick}
171-
noTitle={state.filterOptions ? filterOptionsText : noOptionsTitle}
172-
/>
173-
</Column>
174-
<Column sm={4} md={8} lg={2} {...ButtonColumnProps} className={clsx('ddorg__carbon-dual-list-button-wrapper', ButtonColumnProps.className)}>
175-
<Button
176-
id="move-right"
177-
renderIcon={ChevronRight32}
178-
onClick={handleMoveRight}
179-
disabled={isEmpty(state.selectedLeftValues)}
180-
{...AddButtonProps}
181-
>
182-
{moveRightTitle}
183-
</Button>
184-
<Button id="move-all-right" onClick={handleClearLeftValues} disabled={isEmpty(leftValues)} {...AddAllButtonProps}>
185-
{moveAllRightTitle}
186-
</Button>
187-
<Button id="move-all-left" onClick={handleClearRightValues} disabled={isEmpty(rightValues)} {...RemoveAllButtonProps}>
188-
{moveAllLeftTitle}
189-
</Button>
190-
<Button
191-
id="move-left"
192-
renderIcon={ChevronLeft32}
193-
onClick={handleMoveLeft}
194-
disabled={isEmpty(state.selectedRightValues)}
195-
{...RemoveButtonProps}
196-
>
197-
{moveLeftTitle}
198-
</Button>
199-
</Column>
200-
<Column sm={4} md={8} lg={5} {...ValuesColumnProps}>
201-
{React.createElement(RightTitleElement, RightTitleProps, rightTitle)}
202-
<Toolbar
203-
onFilter={filterValues}
204-
placeholder={filterValuesTitle}
205-
sortDirection={state.sortRightDesc}
206-
onSort={sortValues}
207-
sortTitle={sortValuesTitle}
208-
ToolbarProps={RightToolbarProps}
209-
SearchProps={RightSearchProps}
210-
SortProps={RightSortProps}
211-
/>
212-
<List
213-
ListProps={RightListProps}
214-
BodyProps={RightBodyProps}
215-
options={rightValues}
216-
selectedValues={state.selectedRightValues}
217-
handleOptionsClick={handleValuesClick}
218-
noTitle={state.filterValue ? filterValueText : noValueTitle}
219-
/>
220-
</Column>
221-
</Row>
222-
</Grid>
223-
</FormGroup>
224-
);
187+
}) => {
188+
const { buttonWrapper } = useStyles();
189+
190+
return (
191+
<FormGroup legendText={buildLabel(label || '', isRequired)} {...FormGroupProps}>
192+
<Grid {...GridProps}>
193+
<Row condensed {...RowProps}>
194+
<Column sm={4} md={8} lg={5} {...OptionsColumnProps}>
195+
{React.createElement(LeftTitleElement, LeftTitleProps, leftTitle)}
196+
<Toolbar
197+
onFilter={filterOptions}
198+
placeholder={filterOptionsTitle}
199+
sortDirection={state.sortLeftDesc}
200+
onSort={sortOptions}
201+
sortTitle={sortOptionsTitle}
202+
ToolbarProps={LeftToolbarProps}
203+
SearchProps={LeftSearchProps}
204+
SortProps={LeftSortProps}
205+
/>
206+
<List
207+
ListProps={LeftListProps}
208+
BodyProps={LeftBodyProps}
209+
options={leftValues}
210+
selectedValues={state.selectedLeftValues}
211+
handleOptionsClick={handleOptionsClick}
212+
noTitle={state.filterOptions ? filterOptionsText : noOptionsTitle}
213+
/>
214+
</Column>
215+
<Column sm={4} md={8} lg={2} {...ButtonColumnProps} className={clsx(buttonWrapper, ButtonColumnProps.className)}>
216+
<Button
217+
id="move-right"
218+
renderIcon={ChevronRight32}
219+
onClick={handleMoveRight}
220+
disabled={isEmpty(state.selectedLeftValues)}
221+
{...AddButtonProps}
222+
>
223+
{moveRightTitle}
224+
</Button>
225+
<Button id="move-all-right" onClick={handleClearLeftValues} disabled={isEmpty(leftValues)} {...AddAllButtonProps}>
226+
{moveAllRightTitle}
227+
</Button>
228+
<Button id="move-all-left" onClick={handleClearRightValues} disabled={isEmpty(rightValues)} {...RemoveAllButtonProps}>
229+
{moveAllLeftTitle}
230+
</Button>
231+
<Button
232+
id="move-left"
233+
renderIcon={ChevronLeft32}
234+
onClick={handleMoveLeft}
235+
disabled={isEmpty(state.selectedRightValues)}
236+
{...RemoveButtonProps}
237+
>
238+
{moveLeftTitle}
239+
</Button>
240+
</Column>
241+
<Column sm={4} md={8} lg={5} {...ValuesColumnProps}>
242+
{React.createElement(RightTitleElement, RightTitleProps, rightTitle)}
243+
<Toolbar
244+
onFilter={filterValues}
245+
placeholder={filterValuesTitle}
246+
sortDirection={state.sortRightDesc}
247+
onSort={sortValues}
248+
sortTitle={sortValuesTitle}
249+
ToolbarProps={RightToolbarProps}
250+
SearchProps={RightSearchProps}
251+
SortProps={RightSortProps}
252+
/>
253+
<List
254+
ListProps={RightListProps}
255+
BodyProps={RightBodyProps}
256+
options={rightValues}
257+
selectedValues={state.selectedRightValues}
258+
handleOptionsClick={handleValuesClick}
259+
noTitle={state.filterValue ? filterValueText : noValueTitle}
260+
/>
261+
</Column>
262+
</Row>
263+
</Grid>
264+
</FormGroup>
265+
);
266+
};
225267

226268
DualListSelectInner.propTypes = {
227269
leftValues: PropTypes.array,

‎packages/carbon-component-mapper/src/dual-list-select/dual-list-select.scss

Lines changed: 0 additions & 41 deletions
This file was deleted.

0 commit comments

Comments
 (0)