react-restyle-components 0.3.9 → 0.3.11

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/src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.d.ts +3 -2
  2. package/lib/src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.d.ts.map +1 -1
  3. package/lib/src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.js +8 -5
  4. package/package.json +1 -1
package/lib/src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.d.ts CHANGED
@@ -4,10 +4,11 @@ interface CSSMultilineProps {
4
4
  placeholder?: string;
5
5
  className?: string;
6
6
  style?: any;
7
- onChange(item: any): void;
7
+ onChange?(item: any): void;
8
+ onBlur?(item: any): void;
8
9
  onReset?(item: any): void;
9
10
  onMoreInfo?(): void;
10
11
  }
11
- export declare const CSSMultiline: ({ label, defaultValue, className, style, placeholder, onChange, onReset, onMoreInfo, }: CSSMultilineProps) => import("react/jsx-runtime").JSX.Element;
12
+ export declare const CSSMultiline: ({ label, defaultValue, className, style, placeholder, onChange, onBlur, onReset, onMoreInfo, }: CSSMultilineProps) => import("react/jsx-runtime").JSX.Element;
12
13
  export {};
13
14
  //# sourceMappingURL=css-multiline-input.component.d.ts.map
package/lib/src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"css-multiline-input.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.tsx"],"names":[],"mappings":"AAQA,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,IAAI,KAAA,GAAG,IAAI,CAAC;IACrB,OAAO,CAAC,CAAC,IAAI,KAAA,GAAG,IAAI,CAAC;IACrB,UAAU,CAAC,IAAI,IAAI,CAAC;CACrB;AAWD,eAAO,MAAM,YAAY,2FAStB,iBAAiB,4CAoJnB,CAAC"}
1
+ {"version":3,"file":"css-multiline-input.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.tsx"],"names":[],"mappings":"AAQA,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,CAAC,IAAI,KAAA,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,CAAC,IAAI,KAAA,GAAG,IAAI,CAAC;IACpB,OAAO,CAAC,CAAC,IAAI,KAAA,GAAG,IAAI,CAAC;IACrB,UAAU,CAAC,IAAI,IAAI,CAAC;CACrB;AAWD,eAAO,MAAM,YAAY,mGAUtB,iBAAiB,4CA4JnB,CAAC"}
package/lib/src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.js CHANGED
@@ -15,7 +15,7 @@ const mapToArray = (arr) => {
15
15
  return res;
16
16
  };
17
17
  const data = mapToArray(propertiesObj);
18
- export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', className = '', style = {}, placeholder = "fontSize: 12,backgroundColor:'#000000'", onChange, onReset, onMoreInfo, }) => {
18
+ export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', className = '', style = {}, placeholder = "fontSize: 12,backgroundColor:'#000000'", onChange, onBlur, onReset, onMoreInfo, }) => {
19
19
  const value = useRef(defaultValue || '');
20
20
  const [properties, setProperties] = useState([]);
21
21
  const [isListOpen, setIsListOpen] = useState(false);
@@ -28,7 +28,7 @@ export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', classN
28
28
  function handleClickOutside(event) {
29
29
  if (ref.current && !ref.current.contains(event.target)) {
30
30
  setIsListOpen(false);
31
- onChange(value.current);
31
+ onChange && onChange(value.current);
32
32
  }
33
33
  }
34
34
  document.addEventListener('mousedown', handleClickOutside);
@@ -62,7 +62,7 @@ export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', classN
62
62
  const onKeyUp = (e) => {
63
63
  setIsListOpen(true);
64
64
  };
65
- return (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['w-full'], s['relative']), ref: wrapperRef, children: [_jsxs("div", { className: cn(s.flex, s.absolute, s['gap-2'], s['right-2']), children: [_jsx(Icon, { nameIcon: "MdLockReset", propsIcon: { color: '#000000', size: 24 }, onClick: () => {
65
+ return (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['w-full'], s['relative']), ref: wrapperRef, children: [_jsxs("div", { className: cn(s.flex, s.absolute, s['gap-2'], s['right-2']), children: [onReset && (_jsx(Icon, { nameIcon: "MdLockReset", propsIcon: { color: '#000000', size: 24 }, onClick: () => {
66
66
  // Remove the last CSS property (full key:value pair) from value.current
67
67
  const styles = value.current.split(',').filter(Boolean);
68
68
  if (styles.length > 0) {
@@ -73,10 +73,13 @@ export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', classN
73
73
  value.current = '';
74
74
  }
75
75
  onReset && onReset(value.current);
76
- }, tooltip: "Reset CSS" }), onMoreInfo && (_jsx(Icon, { nameIcon: "MdInfoOutline", propsIcon: { color: '#000000', size: 24 }, onClick: onMoreInfo, tooltip: "More Info" }))] }), _jsx(Form.MultilineInput, { label: label, style: { color: '#ffffff', backgroundColor: '#000000', ...style }, placeholder: placeholder, value: value.current, className: cn(className), onKeyUp: onKeyUp, onChange: (css) => {
76
+ }, tooltip: "Reset CSS" })), onMoreInfo && (_jsx(Icon, { nameIcon: "MdInfoOutline", propsIcon: { color: '#000000', size: 24 }, onClick: onMoreInfo, tooltip: "More Info" }))] }), _jsx(Form.MultilineInput, { label: label, style: { color: '#ffffff', backgroundColor: '#000000', ...style }, placeholder: placeholder, value: value.current, className: cn(className), onKeyUp: onKeyUp, onChange: (css) => {
77
77
  value.current = css;
78
78
  filter(css);
79
- } }), isListOpen && (_jsx("div", { children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['bg-black'], s['text-white'], s['overflow-y-scroll']), style: { maxHeight: 'calc(100vh - 20vh)' }, children: properties?.map((item, index) => (_jsxs("li", { className: cn(s['flex'], s['gap-4'], s['p-2']), children: [_jsx("span", { className: cn(s['underline']), children: item[0] }), item[1]?.map((prop) => (_jsxs("li", { className: cn(s['flex'], s['bg-slate-800'], s['rounded-md'], s['items-center'], s['cursor-pointer']), onClick: () => {
79
+ }, onBlur: () => {
80
+ setIsListOpen(false);
81
+ onBlur && onBlur(value.current);
82
+ } }), isListOpen && (_jsx("div", { children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['bg-black'], s['text-white'], s['overflow-y-scroll'], s['w-full']), style: { maxHeight: 'calc(100vh - 20vh)' }, children: properties?.map((item, index) => (_jsxs("li", { className: cn(s['flex'], s['gap-4'], s['p-2']), children: [_jsx("span", { className: cn(s['underline']), children: item[0] }), item[1]?.map((prop) => (_jsxs("li", { className: cn(s['flex'], s['bg-slate-800'], s['rounded-md'], s['items-center'], s['cursor-pointer']), onClick: () => {
80
83
  let existsString = value.current?.split(',');
81
84
  if (value.current.includes(',')) {
82
85
  existsString = existsString.map((item) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.3.9",
3
+ "version": "0.3.11",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {