imbric-theme 0.9.0 → 1.0.0
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/atoms/AlertModal/AlertModal.js +2 -2
- package/atoms/Checkbox/Checkbox.js +7 -1
- package/atoms/Input/Input.js +196 -79
- package/atoms/Input/Input.module.css +5 -0
- package/atoms/Picture/Picture.js +10 -4
- package/layout/DynamicTable/DynamicTable.js +144 -48
- package/layout/DynamicTable/DynamicTable.module.css +5 -18
- package/molecules/ColumnTable/ColumnTable.js +4 -3
- package/molecules/ColumnTable/ColumnTable.module.css +1 -0
- package/molecules/DatePicker/DatePicker.js +10 -4
- package/molecules/DynamicSelect/DynamicSelect.js +126 -32
- package/molecules/DynamicSelect/DynamicSelect.module.css +1 -1
- package/molecules/RowTable/RowTable.js +613 -396
- package/package.json +3 -2
@@ -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,11 @@ export const DynamicSelect = ({
|
|
24
57
|
closeMenuOnSelect,
|
25
58
|
maxMenuHeight,
|
26
59
|
instanceId,
|
60
|
+
sortableMultiSelect,
|
61
|
+
onSortEnd,
|
62
|
+
formatGroupLabel,
|
63
|
+
hideSelectedOptions,
|
64
|
+
menuPlacement
|
27
65
|
}) => {
|
28
66
|
|
29
67
|
|
@@ -54,7 +92,7 @@ export const DynamicSelect = ({
|
|
54
92
|
boxShadow: state.isFocused ? "0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary)" : "none",
|
55
93
|
"&:hover": {
|
56
94
|
borderColor: "var(--color-primary)"
|
57
|
-
}
|
95
|
+
},
|
58
96
|
}),
|
59
97
|
input: (base) => ({
|
60
98
|
...base,
|
@@ -94,6 +132,21 @@ export const DynamicSelect = ({
|
|
94
132
|
minWidth: "100%",
|
95
133
|
}),
|
96
134
|
|
135
|
+
multiValue: (base) => ({
|
136
|
+
...base,
|
137
|
+
color: "hsl(0deg 100% 50%)",
|
138
|
+
zIndex: "40",
|
139
|
+
// width: "max-content",
|
140
|
+
// minWidth: "100%",
|
141
|
+
}),
|
142
|
+
|
143
|
+
MultiValueGeneric: (base) => ({
|
144
|
+
...base,
|
145
|
+
color: "hsl(0deg 100% 50%)",
|
146
|
+
// width: "max-content",
|
147
|
+
// minWidth: "100%",
|
148
|
+
}),
|
149
|
+
|
97
150
|
// menu: styles => ({ ...styles,
|
98
151
|
// width: '500px'
|
99
152
|
// })
|
@@ -105,41 +158,76 @@ export const DynamicSelect = ({
|
|
105
158
|
|
106
159
|
}
|
107
160
|
|
108
|
-
// const handleChange = (value) => {
|
109
|
-
// console.group('Value Changed');
|
110
|
-
// console.log(value);
|
111
|
-
// // console.log(`action: ${actionMeta.action}`);
|
112
|
-
// console.groupEnd();
|
113
|
-
// };
|
114
161
|
|
115
162
|
return (
|
116
163
|
|
117
164
|
<div className={getStyles('dynamic-select', {
|
118
165
|
'is-inline': isInline,
|
119
166
|
})}>
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
167
|
+
|
168
|
+
|
169
|
+
{sortableMultiSelect ?
|
170
|
+
<SortableSelect
|
171
|
+
useDragHandle
|
172
|
+
// react-sortable-hoc props:
|
173
|
+
axis="xy"
|
174
|
+
onSortEnd={onSortEnd}
|
175
|
+
distance={4}
|
176
|
+
// small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
|
177
|
+
getHelperDimensions={({ node }) => node.getBoundingClientRect()}
|
178
|
+
// react-select props:
|
179
|
+
styles={customStyles}
|
180
|
+
placeholder={placeholder}
|
181
|
+
isMulti={isMulti}
|
182
|
+
options={optionsSelect}
|
183
|
+
defaultValue={defaultValue}
|
184
|
+
value={value}
|
185
|
+
onChange={onChange}
|
186
|
+
components={{
|
187
|
+
MultiValue: SortableMultiValue,
|
188
|
+
MultiValueLabel: SortableMultiValueLabel
|
189
|
+
}}
|
190
|
+
isClearable={isClearable}
|
191
|
+
isDisabled={isDisabled}
|
192
|
+
isLoading={isLoading}
|
193
|
+
closeMenuOnSelect={false}
|
194
|
+
autosize={true}
|
195
|
+
instanceId={instanceId}
|
196
|
+
menuPlacement={menuPlacement}
|
197
|
+
menuPosition='fixed'
|
198
|
+
formatGroupLabel={formatGroupLabel}
|
199
|
+
hideSelectedOptions={hideSelectedOptions}
|
200
|
+
/>
|
201
|
+
:
|
202
|
+
<Select
|
203
|
+
name="basic"
|
204
|
+
// className="basic-single"
|
205
|
+
// classNamePrefix="select"
|
206
|
+
placeholder={placeholder}
|
207
|
+
styles={customStyles}
|
208
|
+
options={optionsSelect}
|
209
|
+
defaultValue={defaultValue}
|
210
|
+
value={value}
|
211
|
+
isMulti={isMulti}
|
212
|
+
isClearable={isClearable}
|
213
|
+
isDisabled={isDisabled}
|
214
|
+
isLoading={isLoading}
|
215
|
+
isRtl={isRtl}
|
216
|
+
isSearchable={isSearchable}
|
217
|
+
onChange={onChange}
|
218
|
+
onFocus={onFocus}
|
219
|
+
onBlur={onBlur}
|
220
|
+
closeMenuOnSelect={closeMenuOnSelect}
|
221
|
+
maxMenuHeight={maxMenuHeight}
|
222
|
+
autosize={true}
|
223
|
+
instanceId={instanceId}
|
224
|
+
menuPlacement={menuPlacement}
|
225
|
+
menuPosition='fixed'
|
226
|
+
formatGroupLabel={formatGroupLabel}
|
227
|
+
hideSelectedOptions={hideSelectedOptions}
|
228
|
+
/>}
|
229
|
+
|
230
|
+
|
143
231
|
</div>
|
144
232
|
|
145
233
|
)
|
@@ -163,6 +251,9 @@ DynamicSelect.propTypes = {
|
|
163
251
|
closeMenuOnSelect: PropTypes.bool,
|
164
252
|
maxMenuHeight: PropTypes.number,
|
165
253
|
instanceId: PropTypes.string,
|
254
|
+
sortableMultiSelect: PropTypes.bool,
|
255
|
+
hideSelectedOptions: PropTypes.bool,
|
256
|
+
menuPlacement: PropTypes.string,
|
166
257
|
}
|
167
258
|
|
168
259
|
DynamicSelect.defaultProps = {
|
@@ -180,7 +271,10 @@ DynamicSelect.defaultProps = {
|
|
180
271
|
onBlur: () => { },
|
181
272
|
closeMenuOnSelect: true,
|
182
273
|
maxMenuHeight: 300,
|
183
|
-
instanceId: ''
|
274
|
+
instanceId: '',
|
275
|
+
sortableMultiSelect: false,
|
276
|
+
hideSelectedOptions: true,
|
277
|
+
menuPlacement: 'auto'
|
184
278
|
}
|
185
279
|
|
186
280
|
export default withStyles(styles)(DynamicSelect)
|