polestar-ui-kit
Version:
## Install
647 lines (642 loc) • 33.6 kB
Markdown
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 (
<div>
<SchemaForm
wrappedComponentRef={(form) => {
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: <Icon type="check" />,
unCheckedChildren: <Icon type="cross" />,
defaultChecked: false,
},
},
color: {
renderType: 'colorpicker',
},
color2: {
renderType: 'colorpicker',
},
remarks: {
renderType: 'textarea',
options: {
rows: 10,
},
},
},
},
}}
formData={{
userId: 'Polestar',
}}
/>
<SchemaForm
wrappedComponentRef={(form) => {
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',
}}
/>
<SchemaForm
wrappedComponentRef={(form) => {
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',
}}
/>
<div className="form-footer">
<Button icon={'plus'} onClick={this.doRegist}>등록</Button>
<Button icon={'delete'}>취소</Button>
</div>
</div>
);
}
}
export default MyComponent;
```