Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/mrbadri/mui-builder into fe…
Browse files Browse the repository at this point in the history 
…at(form)/password-49
  • Loading branch information
@mrbadri
mrbadri committed Jul 8, 2024
2 parents 9ec83bc + 1bebcad commit 8520b43
Show file tree
Hide file tree
Showing 14 changed files with 408 additions and 189 deletions.
275 changes: 156 additions & 119 deletions apps/docs/src/app/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,123 +9,123 @@ import Tabs, { TabData } from '@mui-builder/tab';
export function App() {
const children: BuilderProps[] = [
// Fields
{
id: 'form-field-1',
groupType: 'form',
type: 'field-text',
props: {
id: 'Field-One',
formId: '20',
label: 'Field One (Form Id: 20)',
dependesies: ['FieldTwo'],
script: `
if(formMethod.getValues()?.FieldTwo === "erfan"){
setProps('FieldTwo' , {label:'i can'});
return {};
}`,
api: {
configs: {
url: `return ("https://jsonplaceholder.typicode.com/todo8888s/" + formMethod.getValues()?.FieldTwo);`,
method: 'post',
data: {
test: '1',
},
},
queries: {
enable: `
if(formMethod.getValues()?.FieldTwo === 'api'){
return true;
}
return false;
`,
},
},
defaultValue: 'default value field one',
},
},
{
id: 'form-field-2',
groupType: 'form',
type: 'field-text',
props: {
id: 'FieldTwo',
formId: '20',
label: 'Field Two (Form Id: 20)',
},
},
// {
// id: 'form-field-1',
// groupType: 'form',
// type: 'field-text',
// props: {
// id: 'Field-One',
// formId: '20',
// label: 'Field One (Form Id: 20)',
// dependencies: ['FieldTwo'],
// script: `
// if(formMethod.getValues()?.FieldTwo === "erfan"){
// setProps('FieldTwo' , {label:'i can'});
// return {};
// }`,
// api: {
// configs: {
// url: `return ("https://jsonplaceholder.typicode.com/todo8888s/" + formMethod.getValues()?.FieldTwo);`,
// method: 'post',
// data: {
// test: '1',
// },
// },
// queries: {
// enable: `
// if(formMethod.getValues()?.FieldTwo === 'api'){
// return true;
// }
// return false;
// `,
// },
// },
// defaultValue: 'default value field one',
// },
// },
// {
// id: 'form-field-2',
// groupType: 'form',
// type: 'field-text',
// props: {
// id: 'FieldTwo',
// formId: '20',
// label: 'Field Two (Form Id: 20)',
// },
// },

{
id: 'form-field-273',
groupType: 'grid',
type: 'container',
props: {
rowSpacing: 2,
columnSpacing: 2,
children: [
{
id: 'form-field-4kldjd',
groupType: 'grid',
type: 'item',
props: {
children: {
id: 'form-field-4',
groupType: 'form',
type: 'field-text',
props: {
id: 'Field4',
formId: '20',
label: 'Field 4 (Form Id: 20)',
},
},
},
},
// {
// id: 'form-field-273',
// groupType: 'grid',
// type: 'container',
// props: {
// rowSpacing: 2,
// columnSpacing: 2,
// children: [
// {
// id: 'form-field-4kldjd',
// groupType: 'grid',
// type: 'item',
// props: {
// children: {
// id: 'form-field-4',
// groupType: 'form',
// type: 'field-text',
// props: {
// id: 'Field4',
// formId: '20',
// label: 'Field 4 (Form Id: 20)',
// },
// },
// },
// },

{
id: 'form-field-5',
groupType: 'grid',
type: 'item',
props: {
children: {
id: 'form-field-4',
groupType: 'form',
type: 'field-text',
props: {
id: 'Field4',
formId: '20',
label: 'Field 5 (Form Id: 20)',
},
},
},
},
],
},
},
// {
// id: 'form-field-5',
// groupType: 'grid',
// type: 'item',
// props: {
// children: {
// id: 'form-field-4',
// groupType: 'form',
// type: 'field-text',
// props: {
// id: 'Field4',
// formId: '20',
// label: 'Field 5 (Form Id: 20)',
// },
// },
// },
// },
// ],
// },
// },

{
id: 'form-field-3',
groupType: 'form',
type: 'field-text',
props: {
id: 'Field-Three',
formId: '21',
label: 'Field Three (Form Id: 21)',
// helperText: 'Helper Text',
rule: {
// required: {
// message: 'this is required',
// value: true,
// },
// validate: (value, formValues) => {
// if(value === 'val')
// return 'rule validate';
// },
validate: `
if(value === 'val')
return 'rule validate';
`,
},
},
},
// {
// id: 'form-field-3',
// groupType: 'form',
// type: 'field-text',
// props: {
// id: 'Field-Three',
// formId: '21',
// label: 'Field Three (Form Id: 21)',
// // helperText: 'Helper Text',
// rule: {
// // required: {
// // message: 'this is required',
// // value: true,
// // },
// // validate: (value, formValues) => {
// // if(value === 'val')
// // return 'rule validate';
// // },
// validate: `
// if(value === 'val')
// return 'rule validate';
// `,
// },
// },
// },

// Actions
{
Expand Down Expand Up @@ -171,7 +171,7 @@ export function App() {
type: 'auto-complete',
props: {
id: 'auto-complete-1',
formId: '18',
formId: '21',
options: [
{ name: 'folan lab', id: 'fo val' },
{ name: 'folan lab22', id: 'fo val22' },
Expand All @@ -190,7 +190,7 @@ export function App() {
type: 'checkbox',
props: {
id: 'checkbox-1',
formId: '18',
formId: '21',
label: 'label 1',
checkboxProps: {},
children: [
Expand Down Expand Up @@ -219,8 +219,7 @@ export function App() {
],
},
},
{
id: 'form-password-1',
{ id: 'form-password-1',
groupType: 'form',
type: 'password',
props: {
Expand All @@ -229,6 +228,44 @@ export function App() {
label: 'Password Field (Form Id: 20)',
},
},
{
id: 'select-form-1',
groupType: 'form',
type: 'select',
props: {
formId: '20',
children: 'child',
id: 'select-1',
sx: { width: '200px' },
fullWidth: true,
// multiple: true,
defaultValue: '',
inputLabelProps: {
children: 'select label',
},
options: [
{ name: 'first', id: '1' },
{ name: 'second', id: '2' },
],
},
},
// id: 'select-form-1',
// groupType: 'form',
// type: 'select',
// props:{
// formId: '18',
// variant: 'contained',
// options:[{
// title: 'menu 1',
// value: 'm1'
// }],
// formControlProps:{
// title: 'select input',
// variant: 'standard'
// },
// }
// }

];

const [tabs, setTabs] = useState<TabData[]>([
Expand All @@ -239,7 +276,7 @@ export function App() {
<div>
<div role="navigation">
----
<Tabs tabs={tabs} setTabs={setTabs} addable />
{/* <Tabs tabs={tabs} setTabs={setTabs} addable /> */}
---
<ul>
<li>
Expand Down
5 changes: 3 additions & 2 deletions packages/core/src/modules/form/src/components/fields/autoComplete/autoComplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import { Autocomplete, TextField } from '@mui/material';

import ShowIf from '@mui-builder/utils/showIf/showIf';

import { AutoCompleteOptions, AutoCompleteProps } from './autoComplete.types';
import { Option } from '../../../types/public.types';
import { AutoCompleteProps } from './autoComplete.types';

import useAutoComplete from './useAutoComplete';

const AutoComplete: FC<AutoCompleteProps<AutoCompleteOptions>> = (props) => {
const AutoComplete: FC<AutoCompleteProps<Option>> = (props) => {
const { show, getFieldProps, getInnerTextFieldProps } =
useAutoComplete(props);

Expand Down
11 changes: 3 additions & 8 deletions packages/core/src/modules/form/src/components/fields/autoComplete/autoComplete.types.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,9 @@ import {
import { Api } from '@mui-builder/types/api.types';
import { Script } from '@mui-builder/types/script.types';

import { Dependesies, FormId, Id } from '../../../types/public.types';
import { Dependesies, FormId, Id, Option } from '../../../types/public.types';
import { Rule } from '../../../types/validation.types';

export type AutoCompleteOptions = {
name: number | string;
id: number | string;
};

export type AutoCompleteProps<
Value,
Multiple extends boolean | undefined = false,
Expand All @@ -29,12 +24,12 @@ export type AutoCompleteProps<
id: Id;
formId: FormId;
script?: Script;
dependesies?: Dependesies;
dependencies?: Dependesies;
propsController?: Record<string, any>;
api?: Api;
rule?: Rule;
show?: boolean;
options: AutoCompleteOptions[];
options: Option[];
renderInput?: (params: AutocompleteRenderInputParams) => React.ReactNode;
innerTextFieldProps?: Partial<TextFieldProps>;
};
Loading

0 comments on commit 8520b43

Please sign in to comment.