@geoinsight/react-components 0.6.1 → 0.6.2

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.
Files changed (5) hide show
  1. package/dist/cjs/index.css +88 -0
  2. package/dist/cjs/index.js +60 -3
  3. package/dist/esm/index.css +88 -0
  4. package/dist/esm/index.js +60 -4
  5. package/package.json +1 -1
package/dist/cjs/index.css CHANGED
@@ -315,6 +315,14 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
315
315
  width: 100%;
316
316
  }
317
317
 
318
+ .input-subgroup {
319
+ display: flex;
320
+ flex-direction: column;
321
+ align-items: flex-start;
322
+ position: relative;
323
+ width: 100%;
324
+ }
325
+
318
326
  .input {
319
327
  box-sizing: border-box;
320
328
  background-color: var(--color-white);
@@ -424,6 +432,86 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
424
432
  .modal__footer {
425
433
  padding-bottom: var(--spacing-16);
426
434
  }
435
+ .select-group {
436
+ display: flex;
437
+ flex-direction: column;
438
+ align-items: flex-start;
439
+ position: relative;
440
+ width: 100%;
441
+ }
442
+
443
+ .select {
444
+ box-sizing: border-box;
445
+ background-color: var(--color-white);
446
+ border-radius: var(--spacing-8);
447
+ border: 2px solid var(--color-primary);
448
+ color: var(--color-black);
449
+ padding: var(--spacing-16) var(--spacing-24);
450
+ font-size: var(--font-size-16);
451
+ width: 100%;
452
+ }
453
+
454
+ /* .select:enabled:hover {
455
+ border: 3px solid var(--color-primary-700);
456
+ }
457
+
458
+ .select:focus {
459
+ border: 3px solid var(--color-primary-700);
460
+ outline: none;
461
+ } */
462
+
463
+ .select:disabled {
464
+ opacity: 0.5;
465
+ }
466
+
467
+ .select__arrow.input__icon {
468
+ padding: 0;
469
+ }
470
+
471
+ .select__arrow-button.button {
472
+ border-radius: 0 var(--spacing-8) var(--spacing-8) 0;
473
+ padding: 15px var(--spacing-24);
474
+ }
475
+
476
+ .select__box {
477
+ border-radius: var(--spacing-8);
478
+ border: 2px solid var(--color-primary);
479
+ box-sizing: border-box;
480
+ max-height: var(--size-m);
481
+ overflow: scroll;
482
+ position: absolute;
483
+ top: 100%;
484
+ width: 100%;
485
+ }
486
+
487
+ .select__option.button {
488
+ text-align: left;
489
+ border: none;
490
+ border-radius: 0;
491
+ width: 100%;
492
+ z-index: 999;
493
+ }
494
+
495
+ .select__option.button:last-child {
496
+ border-radius: 0 0 var(--spacing-8) var(--spacing-8);
497
+ }
498
+ .select__option.button:first-child {
499
+ border-radius: var(--spacing-8) var(--spacing-8) 0 0;
500
+ }
501
+ .select--error {
502
+ border: 3px solid var(--color-danger);
503
+ }
504
+
505
+ .select--error:focus {
506
+ border: 3px solid var(--color-danger);
507
+ outline: none;
508
+ }
509
+
510
+ .error {
511
+ font-size: 12px;
512
+ color: var(--color-danger);
513
+ }
514
+
427
515
  .textarea {
428
516
  margin-bottom: var(--spacing-8);
429
517
  position: relative;
package/dist/cjs/index.js CHANGED
@@ -224,9 +224,9 @@ function Input({ inputClassName = "", classNameGroup = "", error = {
224
224
  is: false,
225
225
  message: "",
226
226
  }, inputRef, styleGroup, placeholder = "Insert value", label, labelClass, icon, ...rest }) {
227
- return (jsxRuntime.jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), icon?.element && icon.position === "left" && (jsxRuntime.jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), jsxRuntime.jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", icon?.position === "left" && "input--icon", inputClassName), placeholder: placeholder, ...rest }), icon?.element && icon.position !== "left" && (jsxRuntime.jsx("div", { className: clsx("input__icon", "input__icon--right",
228
- // `input__icon--${icon.position || "right"}`,
229
- icon.className), children: icon.element })), error && error.is && (jsxRuntime.jsx("span", { className: "error", children: error.message }))] }));
227
+ return (jsxRuntime.jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), jsxRuntime.jsxs("div", { className: "input-subgroup", children: [icon?.element && icon.position === "left" && (jsxRuntime.jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), jsxRuntime.jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", icon?.position === "left" && "input--icon", inputClassName), placeholder: placeholder, ...rest }), icon?.element && icon.position !== "left" && (jsxRuntime.jsx("div", { className: clsx("input__icon", "input__icon--right",
228
+ // `input__icon--${icon.position || "right"}`,
229
+ icon.className), children: icon.element }))] }), error && error.is && (jsxRuntime.jsx("span", { className: "error", children: error.message }))] }));
230
230
  }
231
231
 
232
232
  function Loading({ img, children }) {
@@ -237,6 +237,62 @@ function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = t
237
237
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "modal-overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsxRuntime.jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsxRuntime.jsx(io5.IoClose, {}) })), jsxRuntime.jsxs("div", { className: "modal__content", children: [title && (jsxRuntime.jsxs("div", { className: "modal__header", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h6", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "modal__children", children: children }), footer && jsxRuntime.jsx("div", { className: "modal__footer", children: footer })] })] })] }));
238
238
  }
239
239
 
240
+ function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, inputProps, setFormSelected, onFormBlur, ...rest }) {
241
+ const [isOpen, setIsOpen] = react.useState(false);
242
+ const [value, setValue] = react.useState(defaultValue || (options && options[0]));
243
+ const [filteredOptions, setFilteredOptions] = react.useState(options);
244
+ const { name, ...ofrest } = rest;
245
+ const handleOpen = () => {
246
+ setIsOpen(true);
247
+ };
248
+ const handleClose = () => {
249
+ setIsOpen(false);
250
+ };
251
+ const handleInputClose = () => {
252
+ if (onFormBlur) {
253
+ onFormBlur();
254
+ }
255
+ setIsOpen(false);
256
+ };
257
+ const handleToggle = () => {
258
+ setIsOpen((prev) => !prev);
259
+ };
260
+ const handleValueChange = (e) => {
261
+ const { value } = e.target;
262
+ console.log(value);
263
+ setValue(value);
264
+ // for autocomplete
265
+ // const { value } = e.target;
266
+ // setValue(value);
267
+ };
268
+ const handleSelectChange = (e) => {
269
+ const { name: value } = e.target;
270
+ if (setFormSelected) {
271
+ setFormSelected(name, value);
272
+ }
273
+ else {
274
+ setValue(value);
275
+ }
276
+ handleClose();
277
+ };
278
+ // for autocomplete
279
+ // useEffect(() => {
280
+ // if (value) {
281
+ // console.log(filteredOptions);
282
+ // setFilteredOptions((prev: string[]) => {
283
+ // return options
284
+ // .filter((option: string) => option.includes(value))
285
+ // });
286
+ // } else {
287
+ // setFilteredOptions(options)
288
+ // }
289
+ // }, [value]);
290
+ return (jsxRuntime.jsxs("div", { className: clsx("select-group", classNameGroup), style: styleGroup, children: [jsxRuntime.jsx(Input, { inputClassName: clsx("select", inputClassName), value: value, placeholder: "Select a value", icon: {
291
+ className: "select__arrow",
292
+ element: (jsxRuntime.jsx(Button, { type: "button", mode: "icon", className: "select__arrow-button", onClick: handleToggle, onBlur: handleClose, children: jsxRuntime.jsx(tfi.TfiAngleDown, { size: 24, color: "var(--color-black)" }) })),
293
+ }, onFocus: handleOpen, onBlur: handleInputClose, onChange: handleValueChange, ...rest }), isOpen && (jsxRuntime.jsx("div", { className: "select__box", children: filteredOptions.map((option, index) => (jsxRuntime.jsx(Button, { type: "button", mode: "secondary", className: "select__option", name: option, onMouseDown: handleSelectChange, children: option }, `index-${index}`))) }))] }));
294
+ }
295
+
240
296
  function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, ...rest }) {
241
297
  const ref = react.useRef();
242
298
  const [isShow, setIsShow] = react.useState(false);
@@ -390,6 +446,7 @@ exports.LoadingProvider = LoadingProvider;
390
446
  exports.Modal = Modal;
391
447
  exports.ModalContext = ModalContext;
392
448
  exports.ModalProvider = ModalProvider;
449
+ exports.Select = Select;
393
450
  exports.TextArea = TextArea;
394
451
  exports.ThemeContext = ThemeContext;
395
452
  exports.ThemeProvider = ThemeProvider;
package/dist/esm/index.css CHANGED
@@ -315,6 +315,14 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
315
315
  width: 100%;
316
316
  }
317
317
 
318
+ .input-subgroup {
319
+ display: flex;
320
+ flex-direction: column;
321
+ align-items: flex-start;
322
+ position: relative;
323
+ width: 100%;
324
+ }
325
+
318
326
  .input {
319
327
  box-sizing: border-box;
320
328
  background-color: var(--color-white);
@@ -424,6 +432,86 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
424
432
  .modal__footer {
425
433
  padding-bottom: var(--spacing-16);
426
434
  }
435
+ .select-group {
436
+ display: flex;
437
+ flex-direction: column;
438
+ align-items: flex-start;
439
+ position: relative;
440
+ width: 100%;
441
+ }
442
+
443
+ .select {
444
+ box-sizing: border-box;
445
+ background-color: var(--color-white);
446
+ border-radius: var(--spacing-8);
447
+ border: 2px solid var(--color-primary);
448
+ color: var(--color-black);
449
+ padding: var(--spacing-16) var(--spacing-24);
450
+ font-size: var(--font-size-16);
451
+ width: 100%;
452
+ }
453
+
454
+ /* .select:enabled:hover {
455
+ border: 3px solid var(--color-primary-700);
456
+ }
457
+
458
+ .select:focus {
459
+ border: 3px solid var(--color-primary-700);
460
+ outline: none;
461
+ } */
462
+
463
+ .select:disabled {
464
+ opacity: 0.5;
465
+ }
466
+
467
+ .select__arrow.input__icon {
468
+ padding: 0;
469
+ }
470
+
471
+ .select__arrow-button.button {
472
+ border-radius: 0 var(--spacing-8) var(--spacing-8) 0;
473
+ padding: 15px var(--spacing-24);
474
+ }
475
+
476
+ .select__box {
477
+ border-radius: var(--spacing-8);
478
+ border: 2px solid var(--color-primary);
479
+ box-sizing: border-box;
480
+ max-height: var(--size-m);
481
+ overflow: scroll;
482
+ position: absolute;
483
+ top: 100%;
484
+ width: 100%;
485
+ }
486
+
487
+ .select__option.button {
488
+ text-align: left;
489
+ border: none;
490
+ border-radius: 0;
491
+ width: 100%;
492
+ z-index: 999;
493
+ }
494
+
495
+ .select__option.button:last-child {
496
+ border-radius: 0 0 var(--spacing-8) var(--spacing-8);
497
+ }
498
+ .select__option.button:first-child {
499
+ border-radius: var(--spacing-8) var(--spacing-8) 0 0;
500
+ }
501
+ .select--error {
502
+ border: 3px solid var(--color-danger);
503
+ }
504
+
505
+ .select--error:focus {
506
+ border: 3px solid var(--color-danger);
507
+ outline: none;
508
+ }
509
+
510
+ .error {
511
+ font-size: 12px;
512
+ color: var(--color-danger);
513
+ }
514
+
427
515
  .textarea {
428
516
  margin-bottom: var(--spacing-8);
429
517
  position: relative;
package/dist/esm/index.js CHANGED
@@ -222,9 +222,9 @@ function Input({ inputClassName = "", classNameGroup = "", error = {
222
222
  is: false,
223
223
  message: "",
224
224
  }, inputRef, styleGroup, placeholder = "Insert value", label, labelClass, icon, ...rest }) {
225
- return (jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsx("label", { className: labelClass, children: label }), icon?.element && icon.position === "left" && (jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", icon?.position === "left" && "input--icon", inputClassName), placeholder: placeholder, ...rest }), icon?.element && icon.position !== "left" && (jsx("div", { className: clsx("input__icon", "input__icon--right",
226
- // `input__icon--${icon.position || "right"}`,
227
- icon.className), children: icon.element })), error && error.is && (jsx("span", { className: "error", children: error.message }))] }));
225
+ return (jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsx("label", { className: labelClass, children: label }), jsxs("div", { className: "input-subgroup", children: [icon?.element && icon.position === "left" && (jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", icon?.position === "left" && "input--icon", inputClassName), placeholder: placeholder, ...rest }), icon?.element && icon.position !== "left" && (jsx("div", { className: clsx("input__icon", "input__icon--right",
226
+ // `input__icon--${icon.position || "right"}`,
227
+ icon.className), children: icon.element }))] }), error && error.is && (jsx("span", { className: "error", children: error.message }))] }));
228
228
  }
229
229
 
230
230
  function Loading({ img, children }) {
@@ -235,6 +235,62 @@ function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = t
235
235
  return (jsxs(Fragment, { children: [jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
236
236
  }
237
237
 
238
+ function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, inputProps, setFormSelected, onFormBlur, ...rest }) {
239
+ const [isOpen, setIsOpen] = useState(false);
240
+ const [value, setValue] = useState(defaultValue || (options && options[0]));
241
+ const [filteredOptions, setFilteredOptions] = useState(options);
242
+ const { name, ...ofrest } = rest;
243
+ const handleOpen = () => {
244
+ setIsOpen(true);
245
+ };
246
+ const handleClose = () => {
247
+ setIsOpen(false);
248
+ };
249
+ const handleInputClose = () => {
250
+ if (onFormBlur) {
251
+ onFormBlur();
252
+ }
253
+ setIsOpen(false);
254
+ };
255
+ const handleToggle = () => {
256
+ setIsOpen((prev) => !prev);
257
+ };
258
+ const handleValueChange = (e) => {
259
+ const { value } = e.target;
260
+ console.log(value);
261
+ setValue(value);
262
+ // for autocomplete
263
+ // const { value } = e.target;
264
+ // setValue(value);
265
+ };
266
+ const handleSelectChange = (e) => {
267
+ const { name: value } = e.target;
268
+ if (setFormSelected) {
269
+ setFormSelected(name, value);
270
+ }
271
+ else {
272
+ setValue(value);
273
+ }
274
+ handleClose();
275
+ };
276
+ // for autocomplete
277
+ // useEffect(() => {
278
+ // if (value) {
279
+ // console.log(filteredOptions);
280
+ // setFilteredOptions((prev: string[]) => {
281
+ // return options
282
+ // .filter((option: string) => option.includes(value))
283
+ // });
284
+ // } else {
285
+ // setFilteredOptions(options)
286
+ // }
287
+ // }, [value]);
288
+ return (jsxs("div", { className: clsx("select-group", classNameGroup), style: styleGroup, children: [jsx(Input, { inputClassName: clsx("select", inputClassName), value: value, placeholder: "Select a value", icon: {
289
+ className: "select__arrow",
290
+ element: (jsx(Button, { type: "button", mode: "icon", className: "select__arrow-button", onClick: handleToggle, onBlur: handleClose, children: jsx(TfiAngleDown, { size: 24, color: "var(--color-black)" }) })),
291
+ }, onFocus: handleOpen, onBlur: handleInputClose, onChange: handleValueChange, ...rest }), isOpen && (jsx("div", { className: "select__box", children: filteredOptions.map((option, index) => (jsx(Button, { type: "button", mode: "secondary", className: "select__option", name: option, onMouseDown: handleSelectChange, children: option }, `index-${index}`))) }))] }));
292
+ }
293
+
238
294
  function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "Insert value", showHeight = "10rem", style = {}, textareaClassName = "", label, labelClass, ...rest }) {
239
295
  const ref = useRef();
240
296
  const [isShow, setIsShow] = useState(false);
@@ -375,4 +431,4 @@ function useModal({} = {}) {
375
431
  return context;
376
432
  }
377
433
 
378
- export { Accordion, AccordionButton, AccordionContent, AccordionItem, Button, Form, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
434
+ export { Accordion, AccordionButton, AccordionContent, AccordionItem, Button, Form, Input, Loading, LoadingContext, LoadingProvider, Modal, ModalContext, ModalProvider, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoinsight/react-components",
3
- "version": "0.6.1",
3
+ "version": "0.6.2",
4
4
  "description": "This library is the main UI component library for geoinsight",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",