react-restyle-components 0.2.0 → 0.2.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 (4) hide show
  1. package/lib/package.json +1 -1
  2. package/lib/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts +2 -1
  3. package/lib/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js +22 -12
  4. package/package.json +1 -1
package/lib/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.1.99",
3
+ "version": "0.2.1",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {
package/lib/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import '../../../tc.css';
3
3
  interface AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps {
4
4
  uniqueField?: string;
5
+ isSelectedStringArray?: boolean;
5
6
  loader?: boolean;
6
7
  placeholder?: string;
7
8
  data: any;
@@ -14,5 +15,5 @@ interface AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps {
14
15
  onSelect: (item: any) => any;
15
16
  onBlur?: (e: any) => void;
16
17
  }
17
- export declare const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay: ({ uniqueField, loader, placeholder, data, hasError, disable, isUpperCase, name, onFilter, onUpdate, onSelect, onBlur, }: AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps) => React.JSX.Element;
18
+ export declare const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay: ({ uniqueField, isSelectedStringArray, loader, placeholder, data, hasError, disable, isUpperCase, name, onFilter, onUpdate, onSelect, onBlur, }: AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps) => React.JSX.Element;
18
19
  export {};
package/lib/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import React, { useState, useEffect, useRef } from 'react';
3
3
  import { Icon } from '../..';
4
4
  import '../../../tc.css';
5
- export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, onFilter, onUpdate, onSelect, onBlur, }) => {
5
+ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', isSelectedStringArray = false, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, onFilter, onUpdate, onSelect, onBlur, }) => {
6
6
  const [value, setValue] = useState('');
7
7
  const [options, setOptions] = useState();
8
8
  const [originalOptions, setOriginalOptions] = useState();
@@ -35,8 +35,15 @@ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueFi
35
35
  item.selected = false;
36
36
  selectedItem && selectedItem.length > 0
37
37
  ? selectedItem.find((sItem, index) => {
38
- if (sItem[uniqueField] === item[uniqueField]) {
39
- item.selected = true;
38
+ if (isSelectedStringArray) {
39
+ if (sItem === item[uniqueField]) {
40
+ item.selected = true;
41
+ }
42
+ }
43
+ else {
44
+ if (sItem[uniqueField] === item[uniqueField]) {
45
+ item.selected = true;
46
+ }
40
47
  }
41
48
  })
42
49
  : (item.selected = false);
@@ -67,7 +74,9 @@ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueFi
67
74
  React.createElement("div", { ref: wrapperRef, className: "w-full relative" },
68
75
  React.createElement("div", { className: `flex items-center leading-4 p-2 focus:outline-none focus:ring w-full shadow-sm sm:text-base border-2 ${hasError ? 'border-red' : 'border-gray-300'} rounded-md` },
69
76
  React.createElement("input", { placeholder: placeholder, disabled: disable, name: name, value: !isListOpen
70
- ? `${(data.selected && data.selected.length) || 0} Items`
77
+ ? data?.selected?.length > 0
78
+ ? `${(data.selected && data.selected.length) || 0} Items`
79
+ : value
71
80
  : isUpperCase
72
81
  ? value?.toUpperCase()
73
82
  : value, className: `w-full focus:outline-none bg-none`, onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), onBlur: (e) => onBlur && onBlur(e) }),
@@ -79,14 +88,15 @@ export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueFi
79
88
  size: 22,
80
89
  } }))),
81
90
  options && isListOpen
82
- ? options?.length > 0 && (React.createElement("div", { className: "mt-1 absolute bg-gray-100 p-2 rounded-sm z-500", style: { zIndex: 80 } },
83
- React.createElement("ul", null, options?.map((item, index) => (React.createElement(React.Fragment, null,
84
- React.createElement("li", { key: index, className: "text-gray-400 flex items-center" },
85
- React.createElement("input", { type: "checkbox", checked: item.selected, onChange: () => onSelect(item) }),
86
- ' ',
87
- React.createElement("label", { className: "ml-2 mt-1 text-black" }, data.displayKey
88
- .map((key) => `${item[key]}
91
+ ? options?.length > 0 && (React.createElement("div", { className: "flex mt-1 absolute rounded-sm z-500 w-full", style: { zIndex: 80 } },
92
+ React.createElement("ul", { className: "flex flex-col gap-2 bg-gray-200 p-2 w-full" }, options?.map((item, index) => (React.createElement(React.Fragment, null,
93
+ React.createElement("li", { key: index, className: 'flex gap-4 p-2"' },
94
+ React.createElement("label", { className: "flex" },
95
+ React.createElement("input", { id: index?.toString(), className: "flex h-4 w-4", type: "checkbox", checked: item.selected, onChange: () => onSelect(item) }),
96
+ ' ',
97
+ React.createElement("span", { className: "flex h-4 ml-2" }, data.displayKey
98
+ .map((key) => `${item[key]}
89
99
  `)
90
- .join(' - ')))))))))
100
+ .join(' - '))))))))))
91
101
  : null)));
92
102
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {