Skip to content

Commit 661398d

Browse files
ggazzoggazzo
authored
fix: Select mutations and ui-kit alerts (#263)
1 parent b1c6ef4 commit 661398d

34 files changed

+859
-525
lines changed

‎packages/fuselage-ui-kit/.eslintrc.js

+10
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,15 @@ module.exports = {
2222
'react/jsx-fragments': ['error', 'syntax'],
2323
},
2424
settings: {
25+
'import/resolver': {
26+
node: {
27+
extensions: [
28+
'.js',
29+
'.ts',
30+
'.tsx'
31+
],
32+
},
33+
},
2534
react: {
2635
version: 'detect',
2736
},
@@ -30,3 +39,4 @@ module.exports = {
3039
'jest': true,
3140
},
3241
};
42+

‎packages/fuselage-ui-kit/package.json

+9-4
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,17 @@
2828
"build": "run-p build:prod build:dev"
2929
},
3030
"peerDependencies": {
31-
"@rocket.chat/fuselage": "^0.6.1",
32-
"@rocket.chat/fuselage-hooks": "^0.6.1",
33-
"@rocket.chat/icons": "^0.6.1",
31+
"@rocket.chat/fuselage": "^0.13.0",
32+
"@rocket.chat/fuselage-hooks": "^0.13.0",
33+
"@rocket.chat/icons": "^0.13.0",
3434
"react": "^16.12.0",
3535
"react-dom": "^16.12.0"
3636
},
3737
"dependencies": {
3838
"@rocket.chat/ui-kit": "^0.13.0"
3939
},
4040
"devDependencies": {
41+
"@rocket.chat/apps-engine": "1.16.0-alpha.3466",
4142
"@babel/core": "^7.7.4",
4243
"@babel/plugin-transform-runtime": "^7.9.0",
4344
"@babel/preset-env": "^7.4.5",
@@ -59,7 +60,11 @@
5960
"@storybook/theming": "^5.3.17",
6061
"babel-loader": "^8.0.6",
6162
"react": "^16.12.0",
62-
"react-dom": "^16.12.0"
63+
"react-dom": "^16.12.0",
64+
"compression-webpack-plugin": "^3.0.0",
65+
"ts-loader": "^6.2.1",
66+
"typescript": "^3.8.3",
67+
"webpack-plugin-replace": "^1.2.0"
6368
},
6469
"publishConfig": {
6570
"access": "public"

‎packages/fuselage-ui-kit/src/Actions.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,10 @@ export const Actions = ({ blockId, appId, elements, parser }) => {
3535

3636
return (
3737
<Block>
38-
<Margins all='neg-x8'>
39-
<Flex.Container wrap='wrap'>
40-
<Box>
41-
{renderedElements}
42-
{showMoreVisible && (<Flex.Item><Button onClick={handleShowMoreClick}>Show more...</Button></Flex.Item>)}
43-
</Box>
44-
</Flex.Container>
45-
</Margins>
38+
<Box display='flex' flexWrap='wrap' m='neg-x8'>
39+
{renderedElements}
40+
{showMoreVisible && (<Button onClick={handleShowMoreClick}>Show more...</Button>)}
41+
</Box>
4642
</Block>
4743
);
4844
};

‎packages/fuselage-ui-kit/src/Image.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import React, {
44
} from 'react';
55
import {
66
Box,
7-
Flex,
87
} from '@rocket.chat/fuselage';
98
import {
109
BLOCK_CONTEXT,
@@ -93,6 +92,6 @@ const genericImage = (element, context) => {
9392
}
9493
};
9594

96-
export const ModalImage = ({ element, context }) => genericImage(element, context) || <Block><Flex.Container justifyContent='center'><Box><Media element={element}/></Box></Flex.Container></Block>;
95+
export const ModalImage = ({ element, context }) => genericImage(element, context) || <Block><Box display='flex' justifyContent='center'><Media element={element}/></Box></Block>;
9796

98-
export const MessageImage = ({ element, context }) => genericImage(element, context) || <Block><Flex.Container justifyContent='start'><Box><Media element={element}/></Box></Flex.Container></Block>;
97+
export const MessageImage = ({ element, context }) => genericImage(element, context) || <Block><Box display='flex' justifyContent='start'><Media element={element}/></Box></Block>;

‎packages/fuselage-ui-kit/src/Input.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const PlainInput = React.memo(({ element, context, index, parser }) => {
3434
return (
3535
<Component
3636
key={index}
37-
mod-loading={loading}
37+
disabled={loading}
3838
id={actionId}
3939
name={actionId}
4040
rows={6}

‎packages/fuselage-ui-kit/src/MultiSelect.js

-22
This file was deleted.

‎packages/fuselage-ui-kit/src/Overflow.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,15 @@ export const Overflow = ({ context, options, parser, ...element }) => {
4040
onBlur={hide}
4141
onKeyUp={handleKeyUp}
4242
onKeyDown={handleKeyDown}
43-
mod-loading={loading}
43+
disabled={loading}
4444
>
4545
<Icon name='kebab' size={20} />
4646
</Button>
4747
<PositionAnimated
4848
width='auto'
4949
visible={visible}
5050
anchor={ref}
51-
placement='bottom right'
51+
placement='bottom-start'
5252
>
5353
<Options
5454
onSelect={handleSelection}

‎packages/fuselage-ui-kit/src/StaticSelect.js

+7-6
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66

77
import { useBlockContext } from './hooks';
88

9-
export const StaticSelect = ({
9+
export const StaticSelect = React.memo(({
1010
options,
1111
onChange,
1212
parser,
@@ -15,17 +15,18 @@ export const StaticSelect = ({
1515
...element
1616
}) => {
1717
const [{ loading, value, error }, action] = useBlockContext(element, context);
18+
1819
return <SelectFiltered
1920
error={error}
2021
value={value}
21-
mod-loading={loading}
22+
disabled={loading}
2223
options={options.map((option) => [option.value, parser.text(option.text)])}
2324
onChange={(value) => action({ target: { value } })}
2425
placeholder={parser.text(placeholder)} />;
25-
};
26+
});
2627

2728

28-
export const MultiStaticSelect = ({
29+
export const MultiStaticSelect = React.memo(({
2930
context,
3031
options,
3132
parser,
@@ -35,9 +36,9 @@ export const MultiStaticSelect = ({
3536
const [{ loading, value, error }, action] = useBlockContext(element, context);
3637
return <MultiSelectFiltered
3738
value={value}
38-
mod-loading={loading}
39+
disabled={loading}
3940
error={error}
4041
options={options.map((option) => [option.value, parser.text(option.text)])}
4142
onChange={(value) => action({ target: { value } })}
4243
placeholder={parser.text(placeholder)} />;
43-
};
44+
});

‎packages/fuselage-ui-kit/src/Button.js ‎packages/fuselage-ui-kit/src/UIKitButton.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import {
33
Button,
4+
Throbber,
45
} from '@rocket.chat/fuselage';
56

67
import { useBlockContext, getStyle } from './hooks';
@@ -9,14 +10,13 @@ export const UIKitButton = ({ element, context, parser }) => {
910
const [{ loading }, action] = useBlockContext(element, context);
1011
return (
1112
<Button
12-
mod-mod-loading={loading}
13+
disabled={loading}
1314
{...getStyle(element.style)}
1415
small
1516
data-group={element.groupId}
1617
key={element.actionId}
17-
children={parser.plainText(element.text)}
1818
onClick={action}
1919
value={element.value}
20-
/>
20+
>{ loading ? <Throbber/> : parser.plainText(element.text)}</Button>
2121
);
2222
};

‎packages/fuselage-ui-kit/src/hooks.js

+12-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import React, { useContext, useState, useCallback } from 'react';
1+
import React, { useContext, useMemo, useState } from 'react';
2+
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
23
import {
34
BLOCK_CONTEXT,
45
} from '@rocket.chat/ui-kit';
56

67
export const defaultContext = {
78
action: (...args) => console.log(JSON.stringify(args)),
89
state: console.log,
9-
appId: '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz',
10+
appId: 'core',
1011
errors: {},
1112
};
1213

@@ -20,22 +21,25 @@ export const useBlockContext = ({ blockId, actionId, appId, initialValue }, cont
2021

2122
const error = errors && actionId && errors[actionId];
2223

23-
const actionFunction = useCallback(async ({ target: { value } }) => {
24+
const actionFunction = useMutableCallback(async ({ target: { value } }) => {
2425
setLoading(true);
26+
setValue(value);
2527
await action({ blockId, appId: appId || appIdFromContext, actionId, value, viewId });
2628
setLoading(false);
27-
}, [actionId, blockId]);
29+
});
2830

29-
const stateFunction = useCallback(async ({ target: { value } }) => {
31+
const stateFunction = useMutableCallback(async ({ target: { value } }) => {
3032
setValue(value);
3133
await state({ blockId, appId, actionId, value });
32-
}, [actionId, blockId]);
34+
});
35+
36+
const result = useMemo(() => ({ loading, setLoading, error, value }), [loading, setLoading, error, value]);
3337

3438
if ([BLOCK_CONTEXT.SECTION, BLOCK_CONTEXT.ACTION].includes(context)) {
35-
return [{ loading, setLoading, error }, actionFunction];
39+
return [result, actionFunction];
3640
}
3741

38-
return [{ loading, setLoading, value, error }, stateFunction];
42+
return [result, stateFunction];
3943
};
4044

4145
export const getStyle = (style) => {

‎packages/fuselage-ui-kit/src/index.js

+23-28
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import {
33
Divider,
4-
Flex,
54
Margins,
65
InputBox,
76
Box,
@@ -26,11 +25,15 @@ import { MessageImage, ModalImage } from './Image';
2625
import { StaticSelect, MultiStaticSelect } from './StaticSelect';
2726
import { Block } from './Block';
2827
import { Overflow } from './Overflow';
29-
import { UIKitButton } from './Button';
28+
import { UIKitButton } from './UIKitButton';
3029
import { useBlockContext } from './hooks';
3130

3231
export * from './hooks';
3332

33+
export const version = 'DEVELOPMENT';
34+
35+
console.log(`fuselage-ui-kit version: ${ version }`);
36+
3437
function mrkdwn({ text/* , type = 'plain_text'*/ } = { text: '' }) {
3538
return text;
3639
}
@@ -74,7 +77,7 @@ class MessageParser extends UiKitParserMessage {
7477
}
7578

7679
divider(_, __, key) {
77-
return <Margins block={'x24'} key={key}> <Divider /> </Margins>;
80+
return <Divider mb='x24' key={key}/>;
7881
}
7982

8083
section(args, context, index) {
@@ -95,7 +98,7 @@ class MessageParser extends UiKitParserMessage {
9598
key={key}
9699
error={error}
97100
value={value}
98-
mod-mod-loading={loading}
101+
disabled={loading}
99102
id={actionId}
100103
name={actionId}
101104
rows={6}
@@ -113,30 +116,22 @@ class MessageParser extends UiKitParserMessage {
113116
context({ elements }, context, key) {
114117
return (
115118
<Block key={key}>
116-
<Box is='div'>
117-
<Flex.Container alignItems='center'>
118-
<Margins all='neg-x4'>
119-
<Box is='div'>
120-
{elements.map((element, i) => (
121-
<Margins all='x4' key={i}>
122-
<Flex.Item>
123-
{[
124-
ELEMENT_TYPES.PLAIN_TEXT,
125-
ELEMENT_TYPES.MARKDOWN,
126-
].includes(element.type) ? (
127-
<Box is='span' fontScale='c1' color='info'>
128-
{this.renderContext(element, BLOCK_CONTEXT.CONTEXT, this)}
129-
</Box>
130-
)
131-
: this.renderContext(element, BLOCK_CONTEXT.CONTEXT, this)
132-
|| element.type
133-
}
134-
</Flex.Item>
135-
</Margins>
136-
))}
137-
</Box>
119+
<Box display='flex' alignItems='center' m='neg-x4'>
120+
{elements.map((element, i) => (
121+
<Margins all='x4' key={i}>
122+
{[
123+
ELEMENT_TYPES.PLAIN_TEXT,
124+
ELEMENT_TYPES.MARKDOWN,
125+
].includes(element.type) ? (
126+
<Box is='span' fontScale='c1' color='info'>
127+
{this.renderContext(element, BLOCK_CONTEXT.CONTEXT, this)}
128+
</Box>
129+
)
130+
: this.renderContext(element, BLOCK_CONTEXT.CONTEXT, this)
131+
|| element.type
132+
}
138133
</Margins>
139-
</Flex.Container>
134+
))}
140135
</Box>
141136
</Block>
142137
);
@@ -154,7 +149,7 @@ class MessageParser extends UiKitParserMessage {
154149
}
155150

156151
staticSelect(element, context, key) {
157-
return <StaticSelect key={key} {...element} parser={this} />;
152+
return <StaticSelect key={key} context={context} {...element} parser={this} />;
158153
}
159154

160155
// selectInput(element, context, key) {

‎packages/fuselage-ui-kit/tsconfig.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"compilerOptions": {
3+
"module": "commonjs",
4+
"target": "es5",
5+
"sourceMap": true,
6+
"lib":[
7+
"es2018"
8+
]
9+
},
10+
"exclude": [
11+
"node_modules"
12+
]
13+
}
14+

0 commit comments

Comments
 (0)