1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | 'use strict'
|
7 |
|
8 | import React, {PropTypes as types} from 'react'
|
9 | import {ApStyle} from 'apeman-react-style'
|
10 |
|
11 |
|
12 | const ApFormStyle = React.createClass({
|
13 | propTypes: {
|
14 | style: types.object,
|
15 | maxWidth: types.number
|
16 | },
|
17 | getDefaultProps () {
|
18 | return {
|
19 | style: {},
|
20 | errorColor: '#E11',
|
21 | errorBackgroundColor: '#FFF0F0'
|
22 | }
|
23 | },
|
24 | statics: {
|
25 | styleData (config) {
|
26 | let { errorColor, errorBackgroundColor } = config
|
27 | return {
|
28 | all: {
|
29 | '.ap-form': {
|
30 | position: 'relative',
|
31 | margin: 0
|
32 | },
|
33 | '.ap-form-centered': {
|
34 | margin: '8px auto',
|
35 | maxWidth: ApStyle.CONTENT_WIDTH
|
36 | },
|
37 | '.ap-form-dummy-input': {
|
38 | visibility: 'hidden',
|
39 | zIndex: -999,
|
40 | display: 'none',
|
41 | width: 0,
|
42 | height: 0,
|
43 | opacity: 0
|
44 | },
|
45 | '.ap-form-error-list-empty': {
|
46 | display: 'none !important'
|
47 | },
|
48 | '.ap-form-error-list': {
|
49 | fontSize: 'smaller',
|
50 | paddingLeft: '16px',
|
51 | color: errorColor
|
52 | },
|
53 | '.ap-form-error-list-item': {}
|
54 | }
|
55 | }
|
56 | }
|
57 | },
|
58 | render () {
|
59 | const s = this
|
60 | let { props } = s
|
61 |
|
62 | let { all, small, medium, large } = ApFormStyle.styleData(props)
|
63 |
|
64 | return (
|
65 | <ApStyle data={ Object.assign(all, props.style) }
|
66 | smallMediaData={ small }
|
67 | mediumMediaData={ medium }
|
68 | largeMediaData={ large }
|
69 | >{ props.children }</ApStyle>
|
70 | )
|
71 | }
|
72 | })
|
73 |
|
74 | export default ApFormStyle
|