From d1c49bcf38c993d3576e03ba9c59b3975684635c Mon Sep 17 00:00:00 2001 From: Maks Date: Mon, 31 Oct 2016 20:02:34 +0300 Subject: [PATCH 1/4] Spoiler --- src/Spoiler/Spoiler.jsx | 109 ++++++++++++++++++++++++++++++++++++++++ src/Spoiler/Spoiler.md | 26 ++++++++++ src/Spoiler/index.js | 1 + src/Spoiler/story.jsx | 25 +++++++++ 4 files changed, 161 insertions(+) create mode 100644 src/Spoiler/Spoiler.jsx create mode 100644 src/Spoiler/Spoiler.md create mode 100644 src/Spoiler/index.js create mode 100644 src/Spoiler/story.jsx diff --git a/src/Spoiler/Spoiler.jsx b/src/Spoiler/Spoiler.jsx new file mode 100644 index 0000000..b1cc652 --- /dev/null +++ b/src/Spoiler/Spoiler.jsx @@ -0,0 +1,109 @@ +'use strict'; + +import React, { PropTypes } from 'react'; + +import View from '../View'; +import Text from '../Text'; +import FontIcon from '../FontIcon'; + +import { FONT, COLOR } from '../const/theme'; + +import { StyleSheet, css } from '../helpers/styles'; + +export default class Spoiler extends React.Component { + static propTypes = { + /** + * Spoiler title + */ + title: PropTypes.string, + /** + * Spoiler text + */ + text: PropTypes.string + }; + + static defaultProps = { + title: 'Спойлер' + }; + + constructor(props) { + super(props); + + this.state = { + isOpen: false + }; + } + + render() { + const props = this.props; + const state = this.state; + + return ( + + this.setState({ isOpen: !state.isOpen })} + > + + + + + {props.title} + + + { + state.isOpen && + + + {props.text} + + + } + + ) + } +} + +const STYLE = StyleSheet.create({ + root: { + flexDirection: 'column', + alignItems: 'stretch' + }, + titleContainer: { + alignItems: 'center', + cursor: 'pointer' + }, + iconContainer: { + width: '.75rem', + height: '1.25rem', + alignItems: 'center' + }, + iconDown: { + width: '10px', + height: '10px', + border: '5px solid transparent', + borderTop: `5px solid ${COLOR.PRIMARY_MEDIUM}`, + marginTop: 5 + }, + iconRight: { + width: '10px', + height: '10px', + border: '5px solid transparent', + borderLeft: `5px solid ${COLOR.PRIMARY_MEDIUM}`, + marginLeft: 5 + }, + title: { + flex: 1, + fontSize: FONT.SIZE_TEXT, + lineHeight: '1.25rem', + color: COLOR.PRIMARY_MEDIUM + }, + textContainer: { + paddingLeft: '.75rem', + marginBottom: '.5rem' + }, + text: { + fontSize: FONT.SIZE_TEXT, + lineHeight: FONT.LINE_HEIGHT_TEXT + } +}); diff --git a/src/Spoiler/Spoiler.md b/src/Spoiler/Spoiler.md new file mode 100644 index 0000000..71cd42c --- /dev/null +++ b/src/Spoiler/Spoiler.md @@ -0,0 +1,26 @@ +### Usage + +```js +import Hint from '@roistat/ui/lib/Spoiler'; +``` +const View = require('../View').default; + +Spoiler example + + + Я сразу смазал карту будня,
+ плеснувши краску из стакана;
+ я показал на блюде студня
+ косые скулы океана.
+ На чешуе жестяной рыбы
+ прочел я зовы новых губ.
+ А вы
+ ноктюрн сыграть
+ могли бы
+ на флейте водосточных труб? + + } + /> diff --git a/src/Spoiler/index.js b/src/Spoiler/index.js new file mode 100644 index 0000000..e4722ed --- /dev/null +++ b/src/Spoiler/index.js @@ -0,0 +1 @@ +export { default } from './Spoiler.jsx'; \ No newline at end of file diff --git a/src/Spoiler/story.jsx b/src/Spoiler/story.jsx new file mode 100644 index 0000000..580c76d --- /dev/null +++ b/src/Spoiler/story.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { storiesOf, action } from '@kadira/storybook'; +import Spoiler from './Spoiler'; +import View from '../View'; + +storiesOf('Spoiler', module) + .addWithInfo('Spoiler', 'Spoiler example', () => ( + + Я сразу смазал карту будня,
+ плеснувши краску из стакана;
+ я показал на блюде студня
+ косые скулы океана.
+ На чешуе жестяной рыбы
+ прочел я зовы новых губ.
+ А вы
+ ноктюрн сыграть
+ могли бы
+ на флейте водосточных труб? + + } + /> + )); From 4a94332766e1c867e1e09311c81bf4e6d0f0c4f5 Mon Sep 17 00:00:00 2001 From: Maks Date: Mon, 31 Oct 2016 20:03:46 +0300 Subject: [PATCH 2/4] Spoiler --- src/Spoiler/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Spoiler/index.js b/src/Spoiler/index.js index e4722ed..175e6f7 100644 --- a/src/Spoiler/index.js +++ b/src/Spoiler/index.js @@ -1 +1 @@ -export { default } from './Spoiler.jsx'; \ No newline at end of file +export { default } from './Spoiler.jsx'; From 797411681e8847ecb9d942e9fc0ef32ccf7a87b2 Mon Sep 17 00:00:00 2001 From: Kanonir87 Date: Tue, 1 Nov 2016 09:06:52 +0300 Subject: [PATCH 3/4] Update Spoiler.md --- src/Spoiler/Spoiler.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Spoiler/Spoiler.md b/src/Spoiler/Spoiler.md index 71cd42c..264e01b 100644 --- a/src/Spoiler/Spoiler.md +++ b/src/Spoiler/Spoiler.md @@ -1,7 +1,7 @@ ### Usage ```js -import Hint from '@roistat/ui/lib/Spoiler'; +import Spoiler from '@roistat/ui/lib/Spoiler'; ``` const View = require('../View').default; From 8ad5ded7cd5e207ac75895b7db8e3e0dd43e9d26 Mon Sep 17 00:00:00 2001 From: Kanonir87 Date: Tue, 1 Nov 2016 09:09:19 +0300 Subject: [PATCH 4/4] Update index.js --- src/Spoiler/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Spoiler/index.js b/src/Spoiler/index.js index 175e6f7..5baae90 100644 --- a/src/Spoiler/index.js +++ b/src/Spoiler/index.js @@ -1 +1 @@ -export { default } from './Spoiler.jsx'; +export { default } from './Spoiler';