SchemaForm component example: ```jsx static import React from 'react'; import { SchemaForm } from 'polestar-ui-kit'; class MyComponent extends React.Component { doRegist = () => { // console.info(this.form); this.form2.props.form.validateFields((error, value) => { console.log(error, value); }); // console.info('formValues', this.form.props.form.getFieldsValue()); console.info('formValues2', this.form2.props.form.getFieldsValue()); } render() { return (
{ this.form2 = form; }} header={{ title: 'SchemaForm 타이틀' }} schema={{ id: 'form id', fields: { properties: [ { userId: { label: '텍스트', type: 'string', defaultValue: '기본값', help: '사용자 ID는 수정할 수 없는 필드 입니다.', required: true, }, userName: { label: '텍스트(disabled)', type: 'string', // string, number, boolean, double?, float? required: true, help: '도움말 영역입니다.', }, }, { password: { label: '패스워드', type: 'string', // string, number, boolean, double?, float? required: true, help: '도움말 영역입니다.', }, confirmPassword: { label: '패스워드 확인', type: 'string', // string, number, boolean, double?, float? requried: true, }, }, { birth: { label: '날짜(YYYY-MM-DD)', type: 'string', // string, number, boolean, double?, float? required: true, }, birth2: { label: '년월(YYYY-MM)', type: 'string', }, birth3: { label: 'From~To 날짜(YYYY-MM-DD)', type: 'string', }, birth4: { label: '날짜 + 시간', type: 'string', }, birth5: { label: '시간(시분초)', type: 'string', }, birth6: { label: '시간(시분)', type: 'string', }, }, { location: { label: '셀렉트 박스', type: 'string', // string, number, boolean, double?, float? required: true, }, location1: { label: '(멀티)셀렉트 박스', type: 'string', // string, number, boolean, double?, float? defaultValue: ['daejeon', 'gyeunggi'], }, location2: { label: '(태그-입력가능)셀렉트 박스', type: 'array', required: true, }, location3: { label: '(그룹)셀렉트 박스', type: 'string', // string, number, boolean, double?, float? }, }, { location4: { label: '(서버)셀렉트 박스', type: 'string', // string, number, boolean, double?, float? }, number: { label: '넘버', type: 'number', // string, number, boolean, double?, float? defaultValue: 1, required: true, }, number2: { label: '넘버(소수점)', type: 'number', defaultValue: 0.2, }, number3: { label: '넘버(포멧)', type: 'number', defaultValue: 100, }, }, { interest: { label: '체크박스', type: 'array', defaultValue: ['apple', 'watermelon'], required: true, }, radio: { label: '(서버)라디오', type: 'string', required: true, }, }, { interest2: { label: '라디오', type: 'string', defaultValue: 'watermelon', required: true, }, interest3: { label: '라디오(버튼)', type: 'string', defaultValue: 'apple', }, interest4: { label: '라디오(Vertical)', type: 'string', }, }, { cascader: { label: 'CasCader(폭포?)', type: 'array', required: true, }, cascader2: { label: 'CasCader(Hover)', type: 'array', required: true, }, rate: { label: 'Rate', type: 'number', required: true, }, married: { label: '스위치', type: 'boolean', // string, number, boolean, double?, float? required: true, }, married2: { label: '스위치(체크)', type: 'boolean', // string, number, boolean, double?, float? required: true, }, }, { slider: { label: '슬라이더', type: 'string', required: true, placeholder: 'Slider 컴포넌트 버그로 인하여 지원중단' }, slider2: { label: '슬라이더(Range)', type: 'string', placeholder: 'Slider 컴포넌트 버그로 인하여 지원중단' }, color: { label: '컬러Pikcer', type: 'string', }, color2: { label: '컬러Pikcer(기본값)', type: 'string', defaultValue: '#4C974C', }, }, { remarks: { label: '비고', type: 'string', required: true, }, }, ], ui: { userId: { readOnly: true, }, userName: { disabled: true, }, password: { renderType: 'password', autoFocus: true, event: { onChange: this.onChange, }, }, confirmPassword: { renderType: 'password', }, birth: { renderType: 'datepicker', }, birth2: { renderType: 'monthpicker', }, birth3: { renderType: 'daterangepicker', }, birth4: { renderType: 'datepicker', options: { showTime: true, timeFormat: 'HH:mm', }, }, birth5: { renderType: 'timepicker', }, birth6: { renderType: 'timepicker', options: { format: 'HH:mm', }, }, location: { renderType: 'select', items: [{ label: '서울', value: 'seoul', }, { label: '대전', value: 'daejeon', disabled: true, }, { label: '경기', value: 'gyeunggi', }], }, location1: { renderType: 'select', items: [{ label: '서울', value: 'seoul', }, { label: '대전', value: 'daejeon', }, { label: '경기', value: 'gyeunggi', }], options: { mode: 'multiple', }, }, location2: { renderType: 'select', items: selectData, options: { mode: 'tags', }, }, location3: { renderType: 'select', groups: [{ label: '서울', items: [{ label: '강남', value: 'gangnam', }, { label: '강북', value: 'gangbook', }, { label: '경서', value: 'gangser', }], }, { label: '경기', items: [{ label: '성남', value: 'seoungnam', }, { label: '안양', value: 'anyang', }], }], options: { mode: 'multiple', }, }, location4: { renderType: 'select', options: { headers: {}, url: 'http://192.168.232.211:9999/grid/performance/getData', method: 'get', params: { start: 1, pageSize: 3, }, labelKey: 'PNU_NAME', valueKey: 'id', itemsKey: 'rows', }, }, number2: { options: { min: 0, max: 10, step: 0.1, }, on: { onChange: this.onChange, } }, number3: { options: { min: 0, max: 100, formatter(value) { return `${value}%`; }, parser(value) { return value.replace('%', ''); }, }, }, interest: { renderType: 'checkbox', items: [ { label: '사과', value: 'apple' }, { label: '배', value: 'pear' }, { label: '오렌지', value: 'orange', disabled: true }, { label: '수박', value: 'watermelon' }, ], }, radio: { renderType: 'radio', options: { headers: {}, url: 'http://192.168.232.211:9999/grid/performance/getData', method: 'get', params: { start: 1, pageSize: 3, }, labelKey: 'PNU_NAME', valueKey: 'id', itemsKey: 'rows', }, }, interest2: { renderType: 'radio', items: [ { label: '사과', value: 'apple' }, { label: '배', value: 'pear' }, { label: '오렌지', value: 'orange', disabled: true }, { label: '수박', value: 'watermelon' }, ], }, interest3: { renderType: 'radio', items: [ { label: '사과', value: 'apple' }, { label: '배', value: 'pear' }, { label: '오렌지', value: 'orange', disabled: true }, { label: '수박', value: 'watermelon' }, ], options: { radioStyle: 'button', }, }, interest4: { renderType: 'radio', items: [ { label: '사과', value: 'apple' }, { label: '배', value: 'pear' }, { label: '오렌지', value: 'orange', disabled: true }, { label: '수박', value: 'watermelon' }, ], options: { layout: 'vertical', }, }, cascader: { renderType: 'cascader', items: [{ value: 'server', label: '서버', children: [{ value: 'agroup', label: 'A 그룹', children: [{ value: 'cygnus', label: 'Cygnus 서버', }, { value: 'dca', label: 'DAC 서버', }], }], }, { value: 'network', label: '네트워크', children: [{ value: 'nanjing', label: '네트워크 A', children: [{ value: 'zhonghuamen', label: '시스코 1350', }], }], }], }, cascader2: { renderType: 'cascader', items: [{ value: 'server', label: '서버', children: [{ value: 'agroup', label: 'A 그룹', children: [{ value: 'cygnus', label: 'Cygnus 서버', }, { value: 'dca', label: 'DAC 서버', }], }], }, { value: 'network', label: '네트워크', children: [{ value: 'nanjing', label: '네트워크 A', children: [{ value: 'zhonghuamen', label: '시스코 1350', }], }], }], options: { expandTrigger: 'hover', }, }, rate: { renderType: 'rate', }, married: { options: { defaultChecked: true, }, }, married2: { options: { checkedChildren: , unCheckedChildren: , defaultChecked: false, }, }, color: { renderType: 'colorpicker', }, color2: { renderType: 'colorpicker', }, remarks: { renderType: 'textarea', options: { rows: 10, }, }, }, }, }} formData={{ userId: 'Polestar', }} /> { this.form3 = form; }} schema={{ id: 'form id', fields: { properties: [{ firstName10: { label: '셀 #1', type: 'string', defaultValue: '기본값', help: '사용자 ID는 수정할 수 없는 필드 입니다.', span: 10, }, lastName10: { label: '셀 #2', type: 'string', // string, number, boolean, double?, float? }, userName10: { label: '셀 #3', type: 'string', // string, number, boolean, double?, float? span: 3, }, }, { thirdName10: { label: '셀 #3', type: 'string', defaultValue: '기본값', help: '사용자 ID는 수정할 수 없는 필드 입니다.', }, }], ui: { firstName10: { readOnly: false, visible: 'false', }, }, }, }} formData={{ user_name1: 'Polestar', }} /> { this.form4 = form; }} schema={{ id: 'form id', fields: [[{ title: '그룹 #1', properties: [{ firstName4: { label: '셀 #1', type: 'string', defaultValue: '기본값', help: '사용자 ID는 수정할 수 없는 필드 입니다.', span: 10, }, lastName4: { label: '셀 #2', type: 'string', // string, number, boolean, double?, float? }, userName4: { label: '셀 #3', type: 'string', // string, number, boolean, double?, float? span: 3, }, }], }, { properties: [{ firstName5: { label: '셀 #4', type: 'string', defaultValue: '기본값', help: '사용자 ID는 수정할 수 없는 필드 입니다.', span: 10, }, lastName5: { label: '셀 #5', type: 'string', // string, number, boolean, double?, float? }, userName5: { label: '셀 #6', type: 'string', // string, number, boolean, double?, float? span: 3, }, }], }], [{ title: '그룹 #3', properties: [{ aaa: { label: '셀 #1', type: 'string', defaultValue: '기본값', help: '사용자 ID는 수정할 수 없는 필드 입니다.', span: 10, }, bbb: { label: '셀 #8', type: 'string', // string, number, boolean, double?, float? }, cccc: { label: '셀 #3', type: 'string', // string, number, boolean, double?, float? span: 3, }, }], }], [{ title: '그룹 #4', properties: [{ aaaaa: { label: '셀 #1', type: 'string', defaultValue: '기본값', help: '사용자 ID는 수정할 수 없는 필드 입니다.', span: 10, }, bbbbb: { label: '셀 #8', type: 'string', // string, number, boolean, double?, float? }, cccccc: { label: '셀 #3', type: 'string', // string, number, boolean, double?, float? span: 3, }, }], }]], }} formData={{ user_name1: 'Polestar', }} />
); } } export default MyComponent; ```