Ant Design 컴포넌트 또는 Elatstic UI 같은 컴포넌트 적용방법을 알아보자.
- Ant Design 컴포넌트 적용
- Elastic UI 컴포넌트 적용
- 적용 소스
Final Form 에 Ant Design 컴포넌트 적용하기
적용하기-1 블로그에서 Antd을 설치했다. Ant Design의 Form을 사용하여 Login, SignOut, AddLink의 Input을 수정한다.
- imports/ui/sdk/antd/antd-final-input.tsx 파일 생성
-antd 의 input react 컴포넌트를 react-final-form의 input의 custom component로 설정한다. (third component support 예)
import * as React from 'react';
import { Input } from 'antd';
import { Field } from 'react-final-form';
// antd 의 react input component를 react-final-form에서 사용할 수 있는 custom component로 만듦
const AntdInput = ({input, ...rest}) => {
return (
<Input {...input} {...rest} />
)
}
// 최종 애플리케이션에서 사용할 react-final-form 컴포넌트
const AInput = (props: any) => {
return (
<Field {...props} component={AntdInput} />
);
}
export default AInput;
antd의 layout 컴포넌트은 Col, Row를 사용해서 레이아웃을 잡는다.
import { Row, Col, Button } from 'antd';
import AInput from '../sdk/antd/antd-final-input';
export default class Login extends React.Component<LoginProps, LoginState> {
...
makeForm = ({ handleSubmit, submitting, pristine }) => {
return (
<form onSubmit={handleSubmit}>
<Col span={4}><AInput name="email" type="email" placeholder="Email" /></Col>
<Col span={4}><AInput name="password" type="password" placeholder="Passowrd" /></Col>
<Col span={2}><Button type="primary" htmlType="submit" disabled={submitting || pristine}>Login</Button></Col>
</form>
);
};
public render() {
return (
<div>
<h1>Login to short Link</h1>
{this.state.error ? <p>{this.state.error} </p> : undefined}
<Row gutter={5}>
<Form onSubmit={this.onLogin} render={this.makeForm} />
</Row>
<Row gutter={5}>
<Link to="/signup">Have a account?</Link>
</Row>
</div>
);
}
}
AddLink.tsx, Signup.tsx도 동일하게 바꾸어 본다.
Final Form에 Elastic UI 적용하기
eui(Elastic UI)는 Elastic Search의 React기반 오픈소스이다. Elastic Search의 Kibana에서 사용중이다. AntD대신 Eui를 적용해 본다.
eui는 yarn install 만 지원하는 관계로 Meteor에서 yarn을 사용하기 위해서 다음 과정을 최초 한번 설정한다.
$ meteor npm i -g yarn
$ meteor yarn info
yarn info v1.12.3
$ rm -rf node_modules (MS는 윈도우 명령으로)
$ rm package-lock.json
// package.json 내용 설치
$ meteor yarn
- @elastic/eui 패키지 설치
- css 설정
// eui는 npm install을 지원하지 않는다.
$ meteor yarn add @elastic/eui
// client/main.tsx에서 import한다.
import '@elastic/eui/dist/eui_theme_light.css';
// client/theme.less 안은 import는 주석처리한다.
// @import '{}/node_modules/antd/dist/antd.less';
Lisk화면을 다음과 같이 전환한다.
react-final-form에 EuiFieldText (input tag) 컴포넌트를 적용한다.
- imports/ui/sdk/eui/eui-final-input.tsx 파일 생성
import * as React from 'react';
import { EuiFieldText } from '@elastic/eui';
import { Field } from 'react-final-form';
const EuiInput = ({ input, ...rest }) => {
return (
<EuiFieldText {...input} {...rest} />
)
}
const EInput = (props: any) => {
return (
<Field {...props} component={EuiInput} />
);
}
export default EInput;
imports/ui/Info.tsx 에서 EuiPage 관련 컴포넌트로 레이아웃을 꾸민다.
- EuiPageHeader, EuiPageContent로 나눔
- 태그안의 정렬은 FlexBox가 적용된 EuiFlexGroup과 EuiFlexItem을 사용한다.
- width, padding은 style일 직접 설정한다.
import {
EuiFlexGroup, EuiFlexItem, EuiButton, EuiPage, EuiSpacer,
EuiPageBody, EuiPageHeader, EuiPageContent, EuiPageContentBody, EuiTitle
} from '@elastic/eui';
class Info extends React.Component<InfoProps, any> {
...
render() {
return (
<EuiPage>
<EuiPageBody>
<EuiPageHeader>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={1} style={{ paddingLeft: 20 }}>
<EuiTitle size="m"><h1>Add Link & List</h1></EuiTitle>
</EuiFlexItem>
<EuiFlexItem style={{ maxWidth: 130, paddingRight: 30 }}>
<EuiButton style={{ maxWidth: 100 }} onClick={this.onLogout}>Log out</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageHeader>
<EuiPageContent>
<EuiPageContentBody>
<EuiFlexGroup direction="column" justifyContent="spaceBetween">
<EuiFlexItem style={{ maxWidth: 800 }}>
<AddLink />
</EuiFlexItem>
<EuiSpacer />
<EuiFlexItem style={{ maxWidth: 400 }}>
{this.linkList()}
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
);
}
}
imports/ui/pages/link/AddLink.tsx도 수정한다.
- EuiFlexGroup으로 레이아웃 적용: flexbox direction은 row이다.
- EInput 컴포넌트 적용
- EuiButton 적용하기: type="submit" 설정
- AntD적용 내용은 모두 주석처리한다.
import EInput from '../../sdk/eui/eui-final-input';
import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
class AddLink extends React.Component<AddLinkProps, any> {
...
makeForm = ({handleSubmit, submitting, pristine}) => {
return (
<form onSubmit={handleSubmit}>
{/* <Col span={4}><AInput name="title" component="input" type="text" placeholder="Title" /></Col>
<Col span={4}><AInput name="url" component="input" type="text" placeholder="Url" /></Col>
<Col span={2}><Button type="primary" htmlType="submit" disabled={submitting || pristine}>Add Link</Button></Col> */}
<EuiFlexGroup direction="row" gutterSize="s">
<EuiFlexItem><EInput name="title" component="input" type="text" placeholder="Title" /></EuiFlexItem>
<EuiFlexItem><EInput name="url" component="input" type="text" placeholder="Url" /></EuiFlexItem>
<EuiFlexItem style={{ maxWidth: 100 }}>
<EuiButton type="submit" fill disabled={submitting || pristine}>Add Link</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</form>
);
}
public render() {
return (
// <Row gutter={5}>
<Form onSubmit={this.handleSubmit} render={this.makeForm} />
// </Row>
);
}
}
Link.tsx도 수정한다.
- EuiButton 사이즈 small 설정
- EuiButton minWidth 적용: default가 120px 이므로 overrriding을 minWidth: 40 을 설정한다
class Link extends React.Component<LinkProps, any> {
...
public render() {
const { link } = this.props;
return (
<li key={link._id}>
<a href={link.url} target="_blank">{link.title}</a>
<EuiButton size="s" style={{minWidth: 40, marginLeft: 10}} onClick={this.deleteLink}>x</EuiButton>
</li>
);
}
}
Login.tsx, Signup.tsx도 eui 컴포넌트로 변경해 본다. 개인적으로 FlexBox를 많이 사용하는데 이에대한 컴포넌트 레벨 지원을 Eui가 제공하므로, 앞으로 Eui 컴포넌트를 사용한다. 다음은 style을 직접 적용하는 방식이 아니라 class 적용방법을 알아본다.
<참조>
- Meteor에서 yarn 사용하기 - 마지막 답변 참조
'Meteor > React + Meteor' 카테고리의 다른 글
| [React + Meteor] 개발환경 설정 - 7 (0) | 2018.12.04 |
|---|---|
| [React + Meteor] 개발환경 설정 - 5 (0) | 2018.11.30 |
| [React + Meteor] 개발환경 설정 - 4 (0) | 2018.11.28 |
| [React + Meteor] 개발환경 설정 - 3 (0) | 2018.11.22 |
| [React + Meteor] 개발환경 설정 - 2 (0) | 2018.11.16 |
