react-restyle-components 0.3.7 → 0.3.9

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 +1 -1
  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 +13 -2
  4. package/package.json +1 -1
package/lib/src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.d.ts CHANGED
@@ -5,7 +5,7 @@ interface CSSMultilineProps {
5
5
  className?: string;
6
6
  style?: any;
7
7
  onChange(item: any): void;
8
- onReset?(): void;
8
+ onReset?(item: any): void;
9
9
  onMoreInfo?(): void;
10
10
  }
11
11
  export declare const CSSMultiline: ({ label, defaultValue, className, style, placeholder, onChange, onReset, onMoreInfo, }: CSSMultilineProps) => import("react/jsx-runtime").JSX.Element;
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,IAAI,IAAI,CAAC;IACjB,UAAU,CAAC,IAAI,IAAI,CAAC;CACrB;AAWD,eAAO,MAAM,YAAY,2FAStB,iBAAiB,4CA4InB,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,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"}
package/lib/src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.js CHANGED
@@ -16,7 +16,7 @@ const mapToArray = (arr) => {
16
16
  };
17
17
  const data = mapToArray(propertiesObj);
18
18
  export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', className = '', style = {}, placeholder = "fontSize: 12,backgroundColor:'#000000'", onChange, onReset, onMoreInfo, }) => {
19
- const value = useRef('');
19
+ const value = useRef(defaultValue || '');
20
20
  const [properties, setProperties] = useState([]);
21
21
  const [isListOpen, setIsListOpen] = useState(false);
22
22
  useEffect(() => {
@@ -62,7 +62,18 @@ 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: [onReset && (_jsx(Icon, { nameIcon: "MdLockReset", propsIcon: { color: '#000000', size: 24 }, onClick: onReset, 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) => {
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: () => {
66
+ // Remove the last CSS property (full key:value pair) from value.current
67
+ const styles = value.current.split(',').filter(Boolean);
68
+ if (styles.length > 0) {
69
+ styles.pop();
70
+ value.current = styles.join(',') + (styles.length ? ',' : '');
71
+ }
72
+ else {
73
+ value.current = '';
74
+ }
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) => {
66
77
  value.current = css;
67
78
  filter(css);
68
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: () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.3.7",
3
+ "version": "0.3.9",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {