Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: ui-kit margins warnings and unique ids #130

Merged
merged 3 commits into from
Jan 17, 2020
Merged

fix: ui-kit margins warnings and unique ids #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d55ddd8
remove visibilty on transition
ggazzo Jan 17, 2020
bb026fa
fix margins
ggazzo Jan 17, 2020
b71612b
Merge branch 'develop' into margins
ggazzo Jan 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/fuselage-ui-kit/src/Actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const Actions = ({ blockId, appId, elements, parser }) => {
const renderedElements = (showMoreVisible
? elements.slice(0, 5)
: elements
).map((element, i) => <Margins key={i} all={8}><Flex.Item basis={getStyle(element)}>{parser.renderActions({ blockId, appId, ...element }, BLOCK_CONTEXT.ACTION, parser)}</Flex.Item></Margins>);
).map((element, i) => <Margins key={i} all='x8'><Flex.Item basis={getStyle(element)}>{parser.renderActions({ blockId, appId, ...element }, BLOCK_CONTEXT.ACTION, parser)}</Flex.Item></Margins>);

const handleShowMoreClick = () => {
setShowMoreVisible(false);
Expand Down
4 changes: 2 additions & 2 deletions packages/fuselage-ui-kit/src/Block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ import {
Margins,
} from '@rocket.chat/fuselage';

export const Block = ({ children }) => (
<Margins blockEnd={16}>{children}</Margins>
export const Block = ({ children, blockEnd = 'x16' }) => (
<Margins blockEnd={blockEnd}>{children}</Margins>
);
43 changes: 23 additions & 20 deletions packages/fuselage-ui-kit/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,11 @@ class TextParser extends UiKitParserText {
}

class ButtonsParser extends UiKitParserButtons {
button(element, context) {
button(element, context, key) {
const [{ loading }, action] = useBlockContext(element, context);
return (
<Button
key={key}
mod-mod-loading={loading}
{...getStyle(element.style)}
small={context === BLOCK_CONTEXT.SECTION}
Expand All @@ -119,10 +120,11 @@ class MessageParser extends UiKitParserMessage {
return <Overflow loading={loading} {...element} onChange={action} parser={this}/>;
}

button(element, context) {
button(element, context, key) {
const [{ loading }, action] = useBlockContext(element, context);
return (
<Button
key={key}
mod-mod-loading={loading}
{...getStyle(element.style)}
small
Expand All @@ -135,8 +137,8 @@ class MessageParser extends UiKitParserMessage {
);
}

divider() {
return <Block><Divider /></Block>;
divider(_, __, key) {
return <Margins block={'x24'} key={key}> <Divider /> </Margins>;
}

section(args, context, index) {
Expand All @@ -145,18 +147,18 @@ class MessageParser extends UiKitParserMessage {
);
}

actions(args) {
actions(args, _, key) {
return (
<ActionsLayoutBlock {...args} parser={this} />
<ActionsLayoutBlock {...args} key={key} parser={this} />
);
}

datePicker(element, context, index) {
datePicker(element, context, key) {
const [{ loading }, action] = useBlockContext(element, context);
const { actionId, placeholder } = element;
return (
<InputBox
key={index}
key={key}
mod-mod-loading={loading}
id={actionId}
name={actionId}
Expand All @@ -168,19 +170,19 @@ class MessageParser extends UiKitParserMessage {
);
}

image(element, context, index) {
return <MessageImage key={index} element={element} context={context}/>;
image(element, context, key) {
return <MessageImage key={key} element={element} context={context}/>;
}

context({ elements }, context, index) {
context({ elements }, context, key) {
return (
<Block>
<Box is='div' className='TESTE'>
<Flex.Container alignItems='center' key={index}>
<Block key={key}>
<Box is='div'>
<Flex.Container alignItems='center'>
<Margins all='neg-x4'>
<Box is='div'>
{elements.map((element, i) => (
<Margins all={4} key={i}>
<Margins all='x4' key={i}>
<Flex.Item>
{[
ELEMENT_TYPES.PLAIN_TEXT_INPUT,
Expand All @@ -204,27 +206,28 @@ class MessageParser extends UiKitParserMessage {
);
}

multiStaticSelect(element, context) {
multiStaticSelect(element, context, key) {
const [{ loading }, action] = useBlockContext(element, context);
return (
<MultiStaticSelect
{...element}
key={key}
mod-loading={loading}
onChange={action}
parser={this}
/>
);
}

staticSelect(element, context) {
staticSelect(element, context, key) {
const [{ loading }, action] = useBlockContext(element, context);
return <StaticSelect {...element} mod-loading={loading} onChange={action} parser={this} />;
return <StaticSelect key={key} {...element} mod-loading={loading} onChange={action} parser={this} />;
}

selectInput(element, context) {
selectInput(element, context, key) {
const [{ loading }, action] = useBlockContext(element, context);
return (
<SelectInput onChange={action} mod-loading={loading} placeholder={element.type} disabled />
<SelectInput key={key} onChange={action} mod-loading={loading} placeholder={element.type} disabled />
);
}
}
Expand Down