1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | 'use strict'
|
7 |
|
8 | import React, {PropTypes as types} from 'react'
|
9 | import classnames from 'classnames'
|
10 | import ReactDOM from 'react-dom'
|
11 | import {ApLayoutMixin} from 'apeman-react-mixin-layout'
|
12 | import {ApUUIDMixin} from 'apeman-react-mixin-uuid'
|
13 | import {ApStyle} from 'apeman-react-style'
|
14 | import numcal from 'numcal'
|
15 |
|
16 |
|
17 | const ApFieldSet = React.createClass({
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | propTypes: {
|
24 | plain: types.bool
|
25 | },
|
26 |
|
27 | mixins: [
|
28 | ApLayoutMixin,
|
29 | ApUUIDMixin
|
30 | ],
|
31 |
|
32 | statics: {},
|
33 |
|
34 | getInitialState () {
|
35 | return {}
|
36 | },
|
37 |
|
38 | getDefaultProps () {
|
39 | return {
|
40 | plain: false
|
41 | }
|
42 | },
|
43 |
|
44 | render () {
|
45 | const s = this
|
46 | let { props, layouts, uuid } = s
|
47 |
|
48 | let style = {
|
49 | [`.ap-field-set-${uuid} .ap-field-label`]: layouts.label
|
50 | }
|
51 | return (
|
52 | <fieldset id={ props.id }
|
53 | className={ classnames('ap-field-set', {
|
54 | 'ap-field-set-plain': props.plain
|
55 | }, `ap-field-set-${uuid}`, props.className) }>
|
56 | <ApStyle className="ap-field-set-style"
|
57 | data={ style }/>
|
58 | { props.children }
|
59 | </fieldset>
|
60 | )
|
61 | },
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 | getInitialLayouts () {
|
68 | const s = this
|
69 | return {
|
70 | label: {}
|
71 | }
|
72 | },
|
73 |
|
74 | calcLayouts () {
|
75 | const s = this
|
76 | let node = ReactDOM.findDOMNode(s)
|
77 |
|
78 | let labels = node.querySelectorAll('.ap-field-label-inner')
|
79 | let labelWidth = numcal.max.apply(
|
80 | numcal, [ ...labels ].map((label) => label.getBoundingClientRect().width)
|
81 | ) || null
|
82 | return {
|
83 | label: {
|
84 | minWidth: labelWidth ? parseInt(labelWidth) : null
|
85 | }
|
86 | }
|
87 | }
|
88 | })
|
89 |
|
90 | export default ApFieldSet
|