imbric-theme 0.1.6 → 0.1.8
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.
@@ -58,8 +58,8 @@ AlertModal.defaultProps = {
|
|
58
58
|
getStyles: () => { },
|
59
59
|
onConfirm: () => { },
|
60
60
|
// onDismiss: () => {}, // Not default for use onConfirm if is undefined
|
61
|
-
titleAlert: '
|
62
|
-
subTitleAlert: '
|
61
|
+
titleAlert: '',
|
62
|
+
subTitleAlert: '',
|
63
63
|
txtBtnAlert: 'Ok',
|
64
64
|
txtBtnAlertCancel: 'Cancelar',
|
65
65
|
iconAlert: 'success',
|
@@ -104,7 +104,7 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
|
|
104
104
|
isInline
|
105
105
|
// onChange={item => useStateDate([item.selection])}
|
106
106
|
onChange={item => { onChangeSelect(item, props.idInput) }}
|
107
|
-
optionsSelect={opSelect}
|
107
|
+
optionsSelect={opSelect || props.optionsSelect}
|
108
108
|
placeholder={props.placeholder}
|
109
109
|
maxMenuHeight={110}
|
110
110
|
/>
|
@@ -1,9 +1,42 @@
|
|
1
|
+
// import React from 'react'
|
1
2
|
import React from 'react'
|
2
|
-
import Select from 'react-select'
|
3
|
+
// import Select from 'react-select'
|
3
4
|
import PropTypes from 'prop-types'
|
4
5
|
import styles from './DynamicSelect.module.css'
|
5
6
|
import withStyles from '../../hocs/withStyles'
|
6
7
|
|
8
|
+
import Select, { components } from 'react-select'
|
9
|
+
|
10
|
+
import {
|
11
|
+
SortableContainer,
|
12
|
+
SortableElement,
|
13
|
+
sortableHandle
|
14
|
+
} from 'react-sortable-hoc'
|
15
|
+
|
16
|
+
const SortableMultiValue = SortableElement((props) => {
|
17
|
+
// this prevents the menu from being opened/closed when the user clicks
|
18
|
+
// on a value to begin dragging it. ideally, detecting a click (instead of
|
19
|
+
// a drag) would still focus the control and toggle the menu, but that
|
20
|
+
// requires some magic with refs that are out of scope for this example
|
21
|
+
const onMouseDown = (e) => {
|
22
|
+
e.preventDefault()
|
23
|
+
e.stopPropagation()
|
24
|
+
}
|
25
|
+
|
26
|
+
// const onMouseUp = (e) => {
|
27
|
+
// e.target.remove()
|
28
|
+
// }
|
29
|
+
|
30
|
+
const innerProps = { ...props.innerProps, onMouseDown };
|
31
|
+
return <components.MultiValue {...props} innerProps={innerProps} />
|
32
|
+
})
|
33
|
+
|
34
|
+
const SortableMultiValueLabel = sortableHandle((props) => (
|
35
|
+
<components.MultiValueLabel {...props} innerProps={props.innerProps} />
|
36
|
+
))
|
37
|
+
|
38
|
+
const SortableSelect = SortableContainer(Select)
|
39
|
+
|
7
40
|
|
8
41
|
export const DynamicSelect = ({
|
9
42
|
getStyles,
|
@@ -24,6 +57,10 @@ export const DynamicSelect = ({
|
|
24
57
|
closeMenuOnSelect,
|
25
58
|
maxMenuHeight,
|
26
59
|
instanceId,
|
60
|
+
sortableMultiSelect,
|
61
|
+
onSortEnd,
|
62
|
+
formatGroupLabel,
|
63
|
+
hideSelectedOptions,
|
27
64
|
}) => {
|
28
65
|
|
29
66
|
|
@@ -94,6 +131,21 @@ export const DynamicSelect = ({
|
|
94
131
|
minWidth: "100%",
|
95
132
|
}),
|
96
133
|
|
134
|
+
multiValue: (base) => ({
|
135
|
+
...base,
|
136
|
+
color: "hsl(0deg 100% 50%)",
|
137
|
+
zIndex: "40",
|
138
|
+
// width: "max-content",
|
139
|
+
// minWidth: "100%",
|
140
|
+
}),
|
141
|
+
|
142
|
+
MultiValueGeneric: (base) => ({
|
143
|
+
...base,
|
144
|
+
color: "hsl(0deg 100% 50%)",
|
145
|
+
// width: "max-content",
|
146
|
+
// minWidth: "100%",
|
147
|
+
}),
|
148
|
+
|
97
149
|
// menu: styles => ({ ...styles,
|
98
150
|
// width: '500px'
|
99
151
|
// })
|
@@ -105,41 +157,76 @@ export const DynamicSelect = ({
|
|
105
157
|
|
106
158
|
}
|
107
159
|
|
108
|
-
// const handleChange = (value) => {
|
109
|
-
// console.group('Value Changed');
|
110
|
-
// console.log(value);
|
111
|
-
// // console.log(`action: ${actionMeta.action}`);
|
112
|
-
// console.groupEnd();
|
113
|
-
// };
|
114
160
|
|
115
161
|
return (
|
116
162
|
|
117
163
|
<div className={getStyles('dynamic-select', {
|
118
164
|
'is-inline': isInline,
|
119
165
|
})}>
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
166
|
+
|
167
|
+
|
168
|
+
{sortableMultiSelect ?
|
169
|
+
<SortableSelect
|
170
|
+
useDragHandle
|
171
|
+
// react-sortable-hoc props:
|
172
|
+
axis="xy"
|
173
|
+
onSortEnd={onSortEnd}
|
174
|
+
distance={4}
|
175
|
+
// small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
|
176
|
+
getHelperDimensions={({ node }) => node.getBoundingClientRect()}
|
177
|
+
// react-select props:
|
178
|
+
styles={customStyles}
|
179
|
+
placeholder={placeholder}
|
180
|
+
isMulti={isMulti}
|
181
|
+
options={optionsSelect}
|
182
|
+
defaultValue={defaultValue}
|
183
|
+
value={value}
|
184
|
+
onChange={onChange}
|
185
|
+
components={{
|
186
|
+
MultiValue: SortableMultiValue,
|
187
|
+
MultiValueLabel: SortableMultiValueLabel
|
188
|
+
}}
|
189
|
+
isClearable={isClearable}
|
190
|
+
isDisabled={isDisabled}
|
191
|
+
isLoading={isLoading}
|
192
|
+
closeMenuOnSelect={false}
|
193
|
+
autosize={true}
|
194
|
+
instanceId={instanceId}
|
195
|
+
menuPlacement='auto'
|
196
|
+
menuPosition='fixed'
|
197
|
+
formatGroupLabel={formatGroupLabel}
|
198
|
+
hideSelectedOptions={hideSelectedOptions}
|
199
|
+
/>
|
200
|
+
:
|
201
|
+
<Select
|
202
|
+
name="basic"
|
203
|
+
// className="basic-single"
|
204
|
+
// classNamePrefix="select"
|
205
|
+
placeholder={placeholder}
|
206
|
+
styles={customStyles}
|
207
|
+
options={optionsSelect}
|
208
|
+
defaultValue={defaultValue}
|
209
|
+
value={value}
|
210
|
+
isMulti={isMulti}
|
211
|
+
isClearable={isClearable}
|
212
|
+
isDisabled={isDisabled}
|
213
|
+
isLoading={isLoading}
|
214
|
+
isRtl={isRtl}
|
215
|
+
isSearchable={isSearchable}
|
216
|
+
onChange={onChange}
|
217
|
+
onFocus={onFocus}
|
218
|
+
onBlur={onBlur}
|
219
|
+
closeMenuOnSelect={closeMenuOnSelect}
|
220
|
+
maxMenuHeight={maxMenuHeight}
|
221
|
+
autosize={true}
|
222
|
+
instanceId={instanceId}
|
223
|
+
menuPlacement='auto'
|
224
|
+
menuPosition='fixed'
|
225
|
+
formatGroupLabel={formatGroupLabel}
|
226
|
+
hideSelectedOptions={hideSelectedOptions}
|
227
|
+
/>}
|
228
|
+
|
229
|
+
|
143
230
|
</div>
|
144
231
|
|
145
232
|
)
|
@@ -163,6 +250,8 @@ DynamicSelect.propTypes = {
|
|
163
250
|
closeMenuOnSelect: PropTypes.bool,
|
164
251
|
maxMenuHeight: PropTypes.number,
|
165
252
|
instanceId: PropTypes.string,
|
253
|
+
sortableMultiSelect: PropTypes.bool,
|
254
|
+
hideSelectedOptions: PropTypes.bool,
|
166
255
|
}
|
167
256
|
|
168
257
|
DynamicSelect.defaultProps = {
|
@@ -180,7 +269,9 @@ DynamicSelect.defaultProps = {
|
|
180
269
|
onBlur: () => { },
|
181
270
|
closeMenuOnSelect: true,
|
182
271
|
maxMenuHeight: 300,
|
183
|
-
instanceId: ''
|
272
|
+
instanceId: '',
|
273
|
+
sortableMultiSelect: false,
|
274
|
+
hideSelectedOptions: true,
|
184
275
|
}
|
185
276
|
|
186
277
|
export default withStyles(styles)(DynamicSelect)
|
@@ -21,6 +21,7 @@ export const RowTable = ({
|
|
21
21
|
isClickRow,
|
22
22
|
onClickRow,
|
23
23
|
onClickActionUserView,
|
24
|
+
onClickActionFileDownload,
|
24
25
|
onClickActionListInvoice,
|
25
26
|
onClickActionListXLS,
|
26
27
|
onClickActionListCSV,
|
@@ -32,6 +33,7 @@ export const RowTable = ({
|
|
32
33
|
onClickActionClone,
|
33
34
|
onClickActionCheckbox,
|
34
35
|
txtTootipIconUserView,
|
36
|
+
txtTootipIconFileDownload,
|
35
37
|
txtTootipIconListInvoice,
|
36
38
|
txtTootipIconListListXLS,
|
37
39
|
txtTootipIconListListCSV,
|
@@ -800,6 +802,72 @@ export const RowTable = ({
|
|
800
802
|
: null}
|
801
803
|
|
802
804
|
|
805
|
+
{itemTd.viewFileDownload ?
|
806
|
+
|
807
|
+
item.viewFileDownload === undefined ?
|
808
|
+
|
809
|
+
<>
|
810
|
+
<span
|
811
|
+
data-tip
|
812
|
+
data-for='fileDownload'
|
813
|
+
onMouseEnter={handleMouseEnter}
|
814
|
+
onMouseLeave={handleMouseLeave}
|
815
|
+
>
|
816
|
+
<>
|
817
|
+
<Icon
|
818
|
+
id="fileDownload"
|
819
|
+
background="base"
|
820
|
+
name="fileDownload"
|
821
|
+
onClick={(e) => { onClickActionFileDownload(e, item) }}
|
822
|
+
/>
|
823
|
+
<Horizontal size="xs" />
|
824
|
+
</>
|
825
|
+
|
826
|
+
</span>
|
827
|
+
|
828
|
+
{isToolTipMounted ? (
|
829
|
+
<ReactTooltip id='fileDownload' type='error'>
|
830
|
+
<span>{txtTootipIconFileDownload}</span>
|
831
|
+
</ReactTooltip>
|
832
|
+
) : null}
|
833
|
+
</>
|
834
|
+
|
835
|
+
:
|
836
|
+
|
837
|
+
item.viewFileDownload ?
|
838
|
+
|
839
|
+
<>
|
840
|
+
<span
|
841
|
+
data-tip
|
842
|
+
data-for='fileDownload'
|
843
|
+
onMouseEnter={handleMouseEnter}
|
844
|
+
onMouseLeave={handleMouseLeave}
|
845
|
+
>
|
846
|
+
<>
|
847
|
+
<Icon
|
848
|
+
id="fileDownload"
|
849
|
+
background="base"
|
850
|
+
name="fileDownload"
|
851
|
+
onClick={(e) => { onClickActionFileDownload(e, item) }}
|
852
|
+
/>
|
853
|
+
<Horizontal size="xs" />
|
854
|
+
</>
|
855
|
+
|
856
|
+
</span>
|
857
|
+
|
858
|
+
{isToolTipMounted ? (
|
859
|
+
<ReactTooltip id='fileDownload' type='error'>
|
860
|
+
<span>{txtTootipIconFileDownload}</span>
|
861
|
+
</ReactTooltip>
|
862
|
+
) : null}
|
863
|
+
</>
|
864
|
+
|
865
|
+
: null
|
866
|
+
|
867
|
+
: null}
|
868
|
+
|
869
|
+
|
870
|
+
|
803
871
|
|
804
872
|
{itemTd.viewCheckbox ?
|
805
873
|
|
@@ -894,18 +962,28 @@ export const RowTable = ({
|
|
894
962
|
itemTd.typeFilterSub === 'date_only' ?
|
895
963
|
|
896
964
|
<td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
|
897
|
-
|
898
|
-
|
899
|
-
|
965
|
+
|
966
|
+
{item[itemTd.accessor] ? (
|
967
|
+
|
968
|
+
<Moment format="DD/MM/YYYY">
|
969
|
+
{item[itemTd.accessor]}
|
970
|
+
</Moment>
|
971
|
+
|
972
|
+
) : null}
|
973
|
+
|
900
974
|
</td>
|
901
975
|
|
902
976
|
:
|
903
977
|
|
904
978
|
<td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
|
905
979
|
{/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
|
906
|
-
|
907
|
-
|
908
|
-
|
980
|
+
{item[itemTd.accessor] ? (
|
981
|
+
|
982
|
+
<Moment format="DD/MM/YYYY HH:mm">
|
983
|
+
{item[itemTd.accessor]}
|
984
|
+
</Moment>
|
985
|
+
|
986
|
+
) : null}
|
909
987
|
</td>
|
910
988
|
:
|
911
989
|
|
@@ -984,8 +1062,9 @@ export const RowTable = ({
|
|
984
1062
|
))}
|
985
1063
|
</tr>
|
986
1064
|
|
987
|
-
))
|
988
|
-
|
1065
|
+
))
|
1066
|
+
}
|
1067
|
+
</tbody >
|
989
1068
|
// </table>
|
990
1069
|
|
991
1070
|
// </div>
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "imbric-theme",
|
3
|
-
"version": "0.1.
|
3
|
+
"version": "0.1.8",
|
4
4
|
"description": "Components library IMBRIC",
|
5
5
|
"private": false,
|
6
6
|
"main": "index.js",
|
@@ -60,7 +60,8 @@
|
|
60
60
|
"react-moment": "1.1.2",
|
61
61
|
"react-router": "6.3.0",
|
62
62
|
"react-router-dom": "6.3.0",
|
63
|
-
"react-select": "5.
|
63
|
+
"react-select": "5.8.0",
|
64
|
+
"react-sortable-hoc": "2.0.0",
|
64
65
|
"react-spinners": "0.13.4",
|
65
66
|
"react-tooltip": "4.4.0",
|
66
67
|
"storybook-addon-theme-changer": "0.1.2",
|