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: 'Felicidades!',
62
- subTitleAlert: 'Todo ha ido correctamente',
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
- <Select
121
- name="basic"
122
- // className="basic-single"
123
- // classNamePrefix="select"
124
- placeholder={placeholder}
125
- styles={customStyles}
126
- options={optionsSelect}
127
- defaultValue={defaultValue}
128
- value={value}
129
- isMulti={isMulti}
130
- isClearable={isClearable}
131
- isDisabled={isDisabled}
132
- isLoading={isLoading}
133
- isRtl={isRtl}
134
- isSearchable={isSearchable}
135
- onChange={onChange}
136
- onFocus={onFocus}
137
- onBlur={onBlur}
138
- closeMenuOnSelect={closeMenuOnSelect}
139
- maxMenuHeight={maxMenuHeight}
140
- autosize={true}
141
- instanceId={instanceId}
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
- <Moment format="DD/MM/YYYY">
898
- {item[itemTd.accessor]}
899
- </Moment>
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
- <Moment format="DD/MM/YYYY HH:mm">
907
- {item[itemTd.accessor]}
908
- </Moment>
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
- </tbody>
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.6",
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.3.2",
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",