From 74d811e4a1b6499dc788617c3473daf320d1a9fd Mon Sep 17 00:00:00 2001 From: MrBr Date: Tue, 27 Jun 2017 17:08:27 +0200 Subject: [PATCH 01/16] Create list/prefix elements --- html/elements/list/prefix/Bullet.js | 6 ++++++ html/elements/list/prefix/Number.js | 8 ++++++++ 2 files changed, 14 insertions(+) create mode 100644 html/elements/list/prefix/Bullet.js create mode 100644 html/elements/list/prefix/Number.js diff --git a/html/elements/list/prefix/Bullet.js b/html/elements/list/prefix/Bullet.js new file mode 100644 index 00000000..94967031 --- /dev/null +++ b/html/elements/list/prefix/Bullet.js @@ -0,0 +1,6 @@ +import React from 'react'; +import { Text } from '@shoutem/ui'; + +export default function ({ style }) { + return •; +} diff --git a/html/elements/list/prefix/Number.js b/html/elements/list/prefix/Number.js new file mode 100644 index 00000000..84840cef --- /dev/null +++ b/html/elements/list/prefix/Number.js @@ -0,0 +1,8 @@ +import React from 'react'; +import { View, Text } from '@shoutem/ui'; + +export default function ({ element, style }) { + const { index } = element.attributes; + + return {index}.; +}; From b6f00ea864ad26fd54be5a45653cf9165edfc383 Mon Sep 17 00:00:00 2001 From: MrBr Date: Tue, 27 Jun 2017 17:09:05 +0200 Subject: [PATCH 02/16] Register Li, Bullet, Number element --- html/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/html/index.js b/html/index.js index ff6ef9f9..ee88708b 100644 --- a/html/index.js +++ b/html/index.js @@ -20,7 +20,7 @@ import Inline, { InlineSettings } from './elements/Inline'; import Virtual from './elements/Virtual'; import Block from './elements/Block'; import Text from './elements/Text'; -import { Ul, Ol, Li } from './elements/list'; +import { Ul, Ol, Li, Bullet, Number } from './elements/list'; import Img from './elements/Img'; import A from './elements/A'; @@ -45,6 +45,9 @@ Html.registerElement('section', Virtual); // List Html.registerElement('ul', Ul); Html.registerElement('ol', Ol); +Html.registerElement('li', Li); +Html.registerElement('bullet', Bullet, { display: Display.INLINE }); +Html.registerElement('number', Number, { display: Display.INLINE }); // Text base Html.registerElement('text', Text, { display: Display.INLINE }); From a1d7d964fec460f95dd5953c11f473bf901ee5f8 Mon Sep 17 00:00:00 2001 From: MrBr Date: Tue, 27 Jun 2017 17:09:23 +0200 Subject: [PATCH 03/16] Change Text element to strip whitespace lines --- html/elements/Text.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/html/elements/Text.js b/html/elements/Text.js index 3bb04488..0a7ea3de 100644 --- a/html/elements/Text.js +++ b/html/elements/Text.js @@ -1,14 +1,27 @@ import React from 'react'; import { Text } from 'react-native'; +import _ from 'lodash'; import { ElementPropTypes, combineMappers, mapElementProps } from '../Html'; -function removeNewLines(childElements) { - return childElements.filter(child => child !== '\n'); +function isWhiteSpaceWrappedWithText(element) { + return _.size(element.childElements) === 1 && isWhiteSpaceString(element.childElements[0]); +} + +function isWhiteSpaceString(element) { + return _.isString(element) && element.trim().length === 0; +} + +function isWhiteSpace(element) { + return isWhiteSpaceString(element) || isWhiteSpaceWrappedWithText(element); +} + +export function removeWhiteSpace(childElements) { + return childElements.filter(child => !isWhiteSpace(child)); } export function TextElement(props) { - const textualChildElements = removeNewLines(props.childElements); + const textualChildElements = removeWhiteSpace(props.childElements); if (textualChildElements.length === 0) { // Even if there is no children to render, the Text must be rendered From 7a12ff57b84efce2ac8f80bc1dd54f8684bc8937 Mon Sep 17 00:00:00 2001 From: MrBr Date: Tue, 27 Jun 2017 17:10:26 +0200 Subject: [PATCH 04/16] Change Li element --- html/elements/list/Li.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/html/elements/list/Li.js b/html/elements/list/Li.js index b406ba5a..ec066d5f 100644 --- a/html/elements/list/Li.js +++ b/html/elements/list/Li.js @@ -12,15 +12,15 @@ import { Inline } from '../Inline'; * @param style {Object} * @returns {Component} */ -function Li({ childElements, renderElement, prefix, style }) { +function Li({ element, renderElement, style }) { + const { childElements, attributes: { key } } = element; return ( - - {prefix || null} - - + ); } From 3fa085b8d822b21d12d210f9babb7c485b471ff4 Mon Sep 17 00:00:00 2001 From: MrBr Date: Tue, 27 Jun 2017 17:11:04 +0200 Subject: [PATCH 05/16] Change renderItems --- html/elements/list/helpers/renderItems.js | 24 +++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/html/elements/list/helpers/renderItems.js b/html/elements/list/helpers/renderItems.js index 5016b4a2..7ac5e56e 100644 --- a/html/elements/list/helpers/renderItems.js +++ b/html/elements/list/helpers/renderItems.js @@ -1,17 +1,21 @@ import React from 'react'; import _ from 'lodash'; -export default function renderItems(Component, childElements, renderElement, prefix) { +import { createElementNode } from '../../../services/HtmlParser'; + +export default function renderItems(childElements, renderElement, createPrefixElement) { return _.reduce(childElements, (items, element, index) => { - const resolvedPrefix = _.isFunction(prefix) ? prefix(element, index) : undefined; - items.push( - - ); + const { childElements: itemChildElements } = element; + + const prefix = createPrefixElement ? createPrefixElement(element, index) : null; + const childElements = prefix ? [prefix, ...itemChildElements] : itemChildElements; + + const elem = { + ...element, + childElements, + }; + + items.push(renderElement(elem)); return items; }, []); } From 9d901f11ec148e2a768d6f108f009a3b57ec25cc Mon Sep 17 00:00:00 2001 From: MrBr Date: Tue, 27 Jun 2017 17:11:53 +0200 Subject: [PATCH 06/16] Change Ol and Ul element - Use new renderItems --- html/elements/list/Ol.js | 12 +++++++----- html/elements/list/Ul.js | 9 ++++++++- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/html/elements/list/Ol.js b/html/elements/list/Ol.js index 108df77b..2f6388e2 100644 --- a/html/elements/list/Ol.js +++ b/html/elements/list/Ol.js @@ -7,10 +7,12 @@ import pickLiChildElements from './helpers/pickLiChildElements'; import { ElementPropTypes, combineMappers, mapElementProps } from '../../Html'; import Li from './Li'; -function createPrefixCreator(type, prefixStyle) { - return function (element, index) { - // TODO (Braco) - Handle all types - return {index}; +function createNumberElement(element, index) { + return { + tag: 'number', + attributes: { + index, + }, }; } @@ -18,7 +20,7 @@ export function Ol({ style, childElements, type, renderElement }) { const liItems = pickLiChildElements(childElements); return ( - {renderItems(Li, liItems, renderElement, createPrefixCreator(type, style.prefix))} + {renderItems(liItems, renderElement, createNumberElement)} ); } diff --git a/html/elements/list/Ul.js b/html/elements/list/Ul.js index 079f4335..04fbf0f0 100644 --- a/html/elements/list/Ul.js +++ b/html/elements/list/Ul.js @@ -1,4 +1,5 @@ import React from 'react'; +import { Text } from '@shoutem/ui'; import { View } from '../../../components/View'; import { ElementPropTypes, combineMappers, mapElementProps } from '../../Html'; @@ -6,12 +7,18 @@ import renderItems from './helpers/renderItems'; import pickLiChildElements from './helpers/pickLiChildElements'; import Li from './Li'; +function createBulletElement(element, index) { + return { + tag: 'bullet', + }; +} + export function Ul({ style, childElements, renderElement }) { // TODO (Braco) - handle list-style-type from inlineStyle prop const liItems = pickLiChildElements(childElements); return ( - {renderItems(Li, liItems, renderElement)} + {renderItems(liItems, renderElement, createBulletElement)} ); } From f9e7d450d67a25f62cd46c0ff4211e7e59f1c492 Mon Sep 17 00:00:00 2001 From: MrBr Date: Tue, 27 Jun 2017 17:12:50 +0200 Subject: [PATCH 07/16] Export Bullet and Number from html/lists --- html/elements/list/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/html/elements/list/index.js b/html/elements/list/index.js index 0924eb02..b97d2412 100644 --- a/html/elements/list/index.js +++ b/html/elements/list/index.js @@ -1,9 +1,13 @@ import Ul from './Ul'; import Li from './Li'; import Ol from './Ol'; +import Bullet from './prefix/Bullet'; +import Number from './prefix/Number'; export { Ul, Ol, Li, + Bullet, + Number, }; From 52f60373bdf69f67ae19e5f91217b31934e3419b Mon Sep 17 00:00:00 2001 From: MrBr Date: Tue, 27 Jun 2017 17:13:16 +0200 Subject: [PATCH 08/16] Improve Inline element - Strip whitespace lines before rendering the content --- html/elements/Inline.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/html/elements/Inline.js b/html/elements/Inline.js index f13bbf12..325be240 100644 --- a/html/elements/Inline.js +++ b/html/elements/Inline.js @@ -3,6 +3,7 @@ import _ from 'lodash'; import { View } from '../../components/View'; import { Text } from '../../components/Text'; +import { removeWhiteSpace } from './Text'; import { TouchableOpacity } from '../../components/TouchableOpacity'; import { Display } from '../services/ElementRegistry'; import { @@ -93,7 +94,8 @@ export const Inline = function (props) { return null; } - const children = groupInlineNodes(childElements); + const trimmedChildren = removeWhiteSpace(childElements); + const children = groupInlineNodes(trimmedChildren); const renderedChildren = renderGroupedChildren(children, renderElement); if (isInline(children)) { From 1bbb70351275d8331400f004b77d71e508f756d0 Mon Sep 17 00:00:00 2001 From: MrBr Date: Tue, 27 Jun 2017 17:16:18 +0200 Subject: [PATCH 09/16] Add style for list elements change --- theme.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/theme.js b/theme.js index 1317139c..1a076e37 100644 --- a/theme.js +++ b/theme.js @@ -1983,14 +1983,23 @@ export default (variables = defaultThemeVariables) => ({ // HTML lists ul: { container: {}, - prefix: {}, // Not implemented yet }, ol: { container: {}, - prefix: {}, }, - li: { - flexDirection: 'row', + number: { + // Font should be monospace so that item content has same offset + // Can not apply width to the Text for some reason + fontFamily: Platform.OS === 'ios' ? 'Menlo-Regular' : 'monospace', + fontSize: 12, + }, + bullet: { + }, + li: { // Inline element + container: { + }, + text: { + }, }, // HTML containers From 47aad86790584db4cbe1816d2b0c3c0b23d1fe51 Mon Sep 17 00:00:00 2001 From: MrBr Date: Wed, 28 Jun 2017 10:59:55 +0200 Subject: [PATCH 10/16] Document Inline and Text element code better --- html/elements/Inline.js | 7 +++++++ html/elements/Text.js | 2 ++ 2 files changed, 9 insertions(+) diff --git a/html/elements/Inline.js b/html/elements/Inline.js index 325be240..bd43b9e5 100644 --- a/html/elements/Inline.js +++ b/html/elements/Inline.js @@ -94,8 +94,15 @@ export const Inline = function (props) { return null; } + // Remove empty white space lines used in code + // just to move new element in the new line. const trimmedChildren = removeWhiteSpace(childElements); + + // Group inline elements, such as text, so that + // it gets shown in the same line. Like concatenation. + // Block elements are standalone because they break the line. const children = groupInlineNodes(trimmedChildren); + const renderedChildren = renderGroupedChildren(children, renderElement); if (isInline(children)) { diff --git a/html/elements/Text.js b/html/elements/Text.js index 0a7ea3de..cf469ca5 100644 --- a/html/elements/Text.js +++ b/html/elements/Text.js @@ -21,6 +21,8 @@ export function removeWhiteSpace(childElements) { } export function TextElement(props) { + // Remove empty white space lines used just to move element in new line. + // Use "p" or "br" to add new line. const textualChildElements = removeWhiteSpace(props.childElements); if (textualChildElements.length === 0) { From 78ee1a0b3b732e2ac7422bf7cd3769adc11f5981 Mon Sep 17 00:00:00 2001 From: Davor Grubelic Date: Wed, 28 Jun 2017 11:10:48 +0200 Subject: [PATCH 11/16] added missing animations for NavigationBarImage --- theme.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/theme.js b/theme.js index 1317139c..a52c8a45 100644 --- a/theme.js +++ b/theme.js @@ -1482,6 +1482,21 @@ export default (variables = defaultThemeVariables) => ({ }), }; }, + boxingAnimation() { + return {}; + }, + heroAnimation() { + return {}; + }, + muteAnimation() { + return {}; + }, + turnAnimation() { + return {}; + }, + lightsOffAnimation() { + return {}; + }, position: 'absolute', right: 0, top: 0, From e3367b960a89201a6402c6ff122aa79b5c3c3cb2 Mon Sep 17 00:00:00 2001 From: Davor Grubelic Date: Wed, 28 Jun 2017 11:11:15 +0200 Subject: [PATCH 12/16] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a5d9d052..81ecf53a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@shoutem/ui", - "version": "0.16.0", + "version": "0.16.1", "description": "Styleable set of components for React Native applications", "dependencies": { "@shoutem/animation": "~0.11.0", From 2f1ee459d19946a530e18dc12947b8b51652179e Mon Sep 17 00:00:00 2001 From: MrBr Date: Wed, 28 Jun 2017 11:11:28 +0200 Subject: [PATCH 13/16] Add Br element --- html/elements/Br.js | 13 +++++++++++++ html/index.js | 2 ++ 2 files changed, 15 insertions(+) create mode 100644 html/elements/Br.js diff --git a/html/elements/Br.js b/html/elements/Br.js new file mode 100644 index 00000000..50705738 --- /dev/null +++ b/html/elements/Br.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { Text } from '@shoutem/ui'; + + +function Br() { + return ( + + {"\n"} + + ); +} + +export default Br; diff --git a/html/index.js b/html/index.js index ee88708b..119adb47 100644 --- a/html/index.js +++ b/html/index.js @@ -23,6 +23,7 @@ import Text from './elements/Text'; import { Ul, Ol, Li, Bullet, Number } from './elements/list'; import Img from './elements/Img'; import A from './elements/A'; +import Br from './elements/Br'; // Text elements with primary inline display Html.registerElement('em', Inline, InlineSettings); @@ -34,6 +35,7 @@ Html.registerElement('span', Inline, InlineSettings); // Functional Html.registerElement('a', A, InlineSettings); Html.registerElement('img', Img); +Html.registerElement('br', Br, InlineSettings); // Containers Html.registerElement('header', Virtual); From b5f930432c3b8cd7c1f6d60355816ea209776e84 Mon Sep 17 00:00:00 2001 From: Davor Grubelic Date: Wed, 28 Jun 2017 11:17:08 +0200 Subject: [PATCH 14/16] removed extra animations --- theme.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/theme.js b/theme.js index a52c8a45..1796d498 100644 --- a/theme.js +++ b/theme.js @@ -1485,18 +1485,6 @@ export default (variables = defaultThemeVariables) => ({ boxingAnimation() { return {}; }, - heroAnimation() { - return {}; - }, - muteAnimation() { - return {}; - }, - turnAnimation() { - return {}; - }, - lightsOffAnimation() { - return {}; - }, position: 'absolute', right: 0, top: 0, From 7d7012247a6c03951607de7db356110918d9289b Mon Sep 17 00:00:00 2001 From: MrBr Date: Wed, 28 Jun 2017 11:36:48 +0200 Subject: [PATCH 15/16] Improve Inline element code comment --- html/elements/Br.js | 1 - html/elements/Inline.js | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/html/elements/Br.js b/html/elements/Br.js index 50705738..57e79d35 100644 --- a/html/elements/Br.js +++ b/html/elements/Br.js @@ -1,7 +1,6 @@ import React from 'react'; import { Text } from '@shoutem/ui'; - function Br() { return ( diff --git a/html/elements/Inline.js b/html/elements/Inline.js index bd43b9e5..323e033c 100644 --- a/html/elements/Inline.js +++ b/html/elements/Inline.js @@ -94,8 +94,8 @@ export const Inline = function (props) { return null; } - // Remove empty white space lines used in code - // just to move new element in the new line. + // Browsers ignore white space (new lines) around element tags, + // we need to remove it here manually so it doesn't get rendered by RN. const trimmedChildren = removeWhiteSpace(childElements); // Group inline elements, such as text, so that From 4228afa55141ee21c0bad38317bc01a9cb715078 Mon Sep 17 00:00:00 2001 From: Davor Grubelic Date: Wed, 28 Jun 2017 13:21:32 +0200 Subject: [PATCH 16/16] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 81ecf53a..ebeef5c2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@shoutem/ui", - "version": "0.16.1", + "version": "0.17.0", "description": "Styleable set of components for React Native applications", "dependencies": { "@shoutem/animation": "~0.11.0",