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 ApYesnoDialogStyle = React.createClass({
|
13 | propTypes: {
|
14 | style: types.object,
|
15 | buttonHeight: types.number,
|
16 | highlightColor: types.string
|
17 | },
|
18 | getDefaultProps () {
|
19 | return {
|
20 |
|
21 | style: {},
|
22 | buttonHeight: 40,
|
23 | highlightColor: '#38E'
|
24 | }
|
25 | },
|
26 | statics: {
|
27 | styleData (config) {
|
28 | let {
|
29 | buttonHeight,
|
30 | highlightColor
|
31 | } = config
|
32 | return {
|
33 | all: {
|
34 | '.ap-yesno-dialog .ap-dialog-body': {
|
35 | paddingBottom: `${buttonHeight + 8}px`
|
36 | },
|
37 | '.ap-yesno-dialog .ap-dialog-close-button-icon': {
|
38 | display: 'none'
|
39 | },
|
40 | '.ap-yesno-dialog-control': {
|
41 | display: 'flex',
|
42 | position: 'absolute',
|
43 | left: 0,
|
44 | right: 0,
|
45 | bottom: 0,
|
46 | boxSizing: 'border-box',
|
47 | overflowX: 'hidden',
|
48 | backgroundColor: 'rgba(255,255,255,0.9)'
|
49 | },
|
50 | '.ap-yesno-dialog-button': {
|
51 | display: 'block',
|
52 | flex: 1,
|
53 | width: '50%',
|
54 | textAlign: 'center',
|
55 | border: '1px solid #EEE',
|
56 | margin: '0 -1px',
|
57 | color: `${highlightColor}`
|
58 | },
|
59 | '.ap-yesno-dialog-button-text': {
|
60 | display: 'inline-block',
|
61 | width: '100%',
|
62 | boxSizing: 'border-box',
|
63 | lineHeight: `${buttonHeight}px`
|
64 | },
|
65 | '.ap-yesno-dialog-button:hover': {
|
66 | cursor: 'pointer',
|
67 | opacity: 0.9
|
68 | },
|
69 | '.ap-yesno-dialog-button:active': {
|
70 | opacity: 0.6
|
71 | }
|
72 | },
|
73 | small: {},
|
74 | medium: {},
|
75 | large: {}
|
76 | }
|
77 | }
|
78 | },
|
79 | render () {
|
80 | const s = this
|
81 | let { props } = s
|
82 |
|
83 | let { all, small, medium, large } = ApYesnoDialogStyle.styleData(props)
|
84 |
|
85 | return (
|
86 | <ApStyle data={ Object.assign(all, props.style) }
|
87 | smallMediaData={ small }
|
88 | mediumMediaData={ medium }
|
89 | largeMediaData={ large }
|
90 | >{ props.children }</ApStyle>
|
91 | )
|
92 | }
|
93 | })
|
94 |
|
95 | export default ApYesnoDialogStyle
|