Updates

ui-kit/demo/assets/Page03654d607b1e49a389083dc126b5e664-C0-1xG5G.js

@@ -0,0 +1,59 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-l9Wg9Pc0.js","assets/default-highlight-B7lEcFzY.js","assets/index-DM4KduW8.js"])))=>i.map(i=>d[i]);
+import{r as o,j as e,_ as d,D as g}from"./index-DM4KduW8.js";import{S as p}from"./default-highlight-B7lEcFzY.js";import{T as u}from"./index-B_-TuVyw.js";import{I as x}from"./index-7b3wGf9w.js";import{P as m,C as j,d as f,c as y}from"./darcula-B-kkYBo3.js";import"./SearchOutlined-CrE_nQO8.js";const v={hljs:{display:"block",overflowX:"auto",padding:"0.5em",color:"#000",background:"#f8f8ff"},"hljs-comment":{color:"#408080",fontStyle:"italic"},"hljs-quote":{color:"#408080",fontStyle:"italic"},"hljs-keyword":{color:"#954121"},"hljs-selector-tag":{color:"#954121"},"hljs-literal":{color:"#954121"},"hljs-subst":{color:"#954121"},"hljs-number":{color:"#40a070"},"hljs-string":{color:"#219161"},"hljs-doctag":{color:"#219161"},"hljs-selector-id":{color:"#19469d"},"hljs-selector-class":{color:"#19469d"},"hljs-section":{color:"#19469d"},"hljs-type":{color:"#19469d"},"hljs-params":{color:"#00f"},"hljs-title":{color:"#458",fontWeight:"bold"},"hljs-tag":{color:"#000080",fontWeight:"normal"},"hljs-name":{color:"#000080",fontWeight:"normal"},"hljs-attribute":{color:"#000080",fontWeight:"normal"},"hljs-variable":{color:"#008080"},"hljs-template-variable":{color:"#008080"},"hljs-regexp":{color:"#b68"},"hljs-link":{color:"#b68"},"hljs-symbol":{color:"#990073"},"hljs-bullet":{color:"#990073"},"hljs-built_in":{color:"#0086b3"},"hljs-builtin-name":{color:"#0086b3"},"hljs-meta":{color:"#999",fontWeight:"bold"},"hljs-deletion":{background:"#fdd"},"hljs-addition":{background:"#dfd"},"hljs-emphasis":{fontStyle:"italic"},"hljs-strong":{fontWeight:"bold"}},{Title:b}=u,{TextArea:T}=x,R=()=>{const[l,r]=o.useState(""),[i,c]=o.useState(""),n=o.useCallback(a=>{r(a.target.value);const h=/(?:([a-zA-Z_]+)\s?=\s?{([а-яА-Яa-zA-Z0-9~'`"!?%@#$№^&*|[\]\\/_\-+,.:;<>=()\s\n{}]*?)}(?:\s|\/?>\s?[^{])(\/\/.*)?)|(?:\s([a-zA-Z_]+)(?:\s|\/?>\s?[^{])(\/\/.*)?[^=])/gim;let s="",t;for(;t=h.exec(a.target.value);)t[1]&&t[2]?(s=s+`
+    ${t[1]}: ${t[2]},`,t[3]&&(s=s+" "+t[3])):t[4]&&(s=s+`
+    ${t[4]}: true,`,t[5]&&(s=s+" "+t[5]));c("{"+s+`
+}`)},[]);return e.jsxs("div",{children:[e.jsx(b,{level:3,children:"Преобразование пропсов React компонента в объект"}),e.jsxs("div",{style:{display:"flex",flexDirection:"row",minHeight:"500px",maxWidth:"1600px"},children:[e.jsxs("div",{style:{flexGrow:1,flexShrink:1,width:"50%"},children:[e.jsx("p",{children:"Вставьте код компонента React"}),e.jsx(T,{style:{width:"100%",height:"100%"},onChange:n,value:l})]}),e.jsxs("div",{style:{flexGrow:1,flexShrink:1,width:"50%"},children:[e.jsx("p",{children:"Результат"}),e.jsx(p,{language:"javascript",style:v,showLineNumbers:!0,children:i})]})]})]})},w=o.lazy(()=>d(()=>import("./index-l9Wg9Pc0.js").then(l=>l.ds),__vite__mapDeps([0,1,2])).then(l=>({default:l.Prism}))),z=l=>e.jsxs(m,{children:[e.jsx("div",{children:e.jsx(R,{})}),e.jsx(g,{}),e.jsx("div",{children:e.jsx(j,{items:[{key:1,label:"Show source",children:e.jsx(o.Suspense,{fallback:e.jsx("div",{children:"Loading source..."}),children:e.jsx(w,{language:"tsx",style:l.darkMode?f:y,showLineNumbers:!0,children:`
+import React, {useCallback, useState} from 'react';
+import {Input, Typography} from 'antd';
+import {docco} from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+const {Title} = Typography;
+const {TextArea} = Input;
+export const PropsToArgs = (): React.JSX.Element => {
+    const [propsText, setPropsText] = useState('');
+    const [argsText, setArgsText] = useState('');
+    const onChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setPropsText(e.target.value);
+        // noinspection RegExpUnnecessaryNonCapturingGroup
+        const pattern =
+            /(?:([a-zA-Z_]+)s?=s?{([а-яА-Яa-zA-Z0-9~'\`"!?%@#$№^&*|[]\\/_-+,.:;<>=()s
+{}]*?)}(?:s|/?>s?[^{])(//.*)?)|(?:s([a-zA-Z_]+)(?:s|/?>s?[^{])(//.*)?[^=])/gim;
+        //const pattern = /(?:([a-zA-Z_]+)s?=s?{([а-яА-Яa-zA-Z0-9~'\`"!?%@#$№^&*|[]\\/_-+,.:;<>=()s
+{}]*?)}(?:s|/?>s?[^{]))|(?:s([a-zA-Z_]+)(?:s|/?>s?[^{])[^=])/gim;
+        let argsResult = '';
+        let match: RegExpExecArray | null;
+        while ((match = pattern.exec(e.target.value))) {
+            if (match[1] && match[2]) {
+                //usual prop
+                argsResult = argsResult + \`
+    \${match[1]}: \${match[2]},\`;
+                if (match[3]) argsResult = argsResult + ' ' + match[3]; //comment
+            } else if (match[4]) {
+                //simple boolean prop without value
+                argsResult = argsResult + \`
+    \${match[4]}: true,\`;
+                if (match[5]) argsResult = argsResult + ' ' + match[5]; //comment
+            }
+        }
+        setArgsText('{' + argsResult + '
+}');
+    }, []);
+    return (
+        <div>
+            <Title level={3}>Преобразование пропсов React компонента в объект</Title>
+            <div style={{display: 'flex', flexDirection: 'row', minHeight: '500px', maxWidth: '1600px'}}>
+                <div style={{flexGrow: 1, flexShrink: 1, width: '50%'}}>
+                    <p>Вставьте код компонента React</p>
+                    <TextArea style={{width: '100%', height: '100%'}} onChange={onChange} value={propsText} />
+                </div>
+                <div style={{flexGrow: 1, flexShrink: 1, width: '50%'}}>
+                    <p>Результат</p>
+                    <SyntaxHighlighter language="javascript" style={docco} showLineNumbers={true}>
+                        {argsText}
+                    </SyntaxHighlighter>
+                </div>
+            </div>
+        </div>
+    );
+};
+`})})}]})})]});export{z as Page03654d607b1e49a389083dc126b5e664,z as default};

ui-kit/demo/assets/Page060d27281dea4dc882afa525ca71465d-C7ld662x.js

@@ -0,0 +1,44 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-l9Wg9Pc0.js","assets/default-highlight-B7lEcFzY.js","assets/index-DM4KduW8.js"])))=>i.map(i=>d[i]);
+import{R as s,j as e,S as d,a,r,_ as p,D as m}from"./index-DM4KduW8.js";import{D as c}from"./dForm-DnIX3jkH.js";import{I as i}from"./inputField-CNhjASo3.js";import{P as h,C as f,d as u,c as F}from"./darcula-B-kkYBo3.js";import"./modal-CrAyaDCA.js";import"./index-B_-TuVyw.js";import"./index-7b3wGf9w.js";import"./SearchOutlined-CrE_nQO8.js";const x=()=>{const[o,t]=s.useState(!1),l=y(o);return e.jsxs(e.Fragment,{children:[e.jsx("h1",{children:"An example of a form with fields whose visibility depends on each other"}),e.jsx("p",{children:"While the parent field is empty, dependent fields are hidden"}),e.jsxs("div",{style:{maxWidth:500},children:[e.jsx(d,{style:{marginBottom:30},children:e.jsx(a,{checkedChildren:"Horizontal",unCheckedChildren:"Vertical",onChange:()=>t(n=>!n)})}),e.jsx(c,{...l})]})]})},y=o=>({formId:"Test form",layout:o?"horizontal":"vertical",confirmChanges:!0,fieldsProps:{field1:{component:i,label:"Field 1",placeholder:"While I am empty, other fields are not visible"},field2:{component:i,label:"Field 2 (depends on Field 1)",placeholder:"I can't be seen if Field 1 is empty. Enter something",dependsOn:["field1"]},field3:{component:i,label:"Field 3 (depends on Fields 1 and 2)",placeholder:"I am not visible if fields 1 or 2 are empty",dependsOn:["field1","field2"]}},buttons:{ok:{position:"right"}}}),b=r.lazy(()=>p(()=>import("./index-l9Wg9Pc0.js").then(o=>o.ds),__vite__mapDeps([0,1,2])).then(o=>({default:o.Prism}))),C=o=>e.jsxs(h,{children:[e.jsx("div",{children:e.jsx(x,{})}),e.jsx(m,{}),e.jsx("div",{children:e.jsx(f,{items:[{key:1,label:"Show source",children:e.jsx(r.Suspense,{fallback:e.jsx("div",{children:"Loading source..."}),children:e.jsx(b,{language:"tsx",style:o.darkMode?u:F,showLineNumbers:!0,children:`
+import React from 'react';
+import {DForm, IDFormProps} from @krinopotam/ui-kit/dForm';
+import {InputField} from @krinopotam/ui-kit/dForm/fields/input/inputField';
+import {Space, Switch} from 'antd';
+export const Example = (): React.JSX.Element => {
+    const [horizontal, setHorizontal] = React.useState(false);
+    const formProps = useFormProps(horizontal);
+    return (
+        <>
+            <div style={{maxWidth: 500}}>
+                <Space style={{marginBottom: 30}}>
+                    <Switch checkedChildren={'Horizontal'} unCheckedChildren={'Vertical'} onChange={() => setHorizontal(cur => !cur)} />
+                </Space>
+                <DForm {...formProps} />
+            </div>
+        </>
+    );
+};
+const useFormProps = (horizontal: boolean) => {
+    return {
+        formId: 'Test form',
+        layout: horizontal ? 'horizontal' : 'vertical',
+        confirmChanges: true,
+        fieldsProps: {
+            field1: {component: InputField, label: 'Field 1', placeholder: 'While I am empty, other fields are not visible'},
+            field2: {
+                component: InputField,
+                label: 'Field 2 (depends on Field 1)',
+                placeholder: 'I can't be seen if Field 1 is empty. Enter something',
+                dependsOn: ['field1'],
+            },
+            field3: {
+                component: InputField,
+                label: 'Field 3 (depends on Fields 1 and 2)',
+                placeholder: 'I am not visible if fields 1 or 2 are empty',
+                dependsOn: ['field1', 'field2'],
+            } ,
+        },
+        buttons: {ok: {position: 'right'}},
+    } satisfies IDFormProps;
+};
+`})})}]})})]});export{C as Page060d27281dea4dc882afa525ca71465d,C as default};