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.
@@ -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
- <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
- />
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)
@@ -7,4 +7,4 @@
7
7
 
8
8
  .is-inline {
9
9
  max-width: max-content;
10
- }
10
+ }