feat: Position, Modal, Options components (#116)

* first commit position * option scroll auto * fix options * update loki * Update packages/fuselage/src/components/Box/Position/index.js Co-Authored-By: Tasso Evangelista <tasso.evangelista@rocket.chat> * Update index.js * position * wip modal * Modal * feat: Modal (#117) * fix modal * Modal, uikit overflow * update loki * test * finish * sad * fix context component * fiz text * more parsers * improve modal scrolling * Update packages/fuselage-ui-kit/src/Actions.js Co-Authored-By: Tasso Evangelista <tasso.evangelista@rocket.chat> * Update AutoComplete stories * fix scroll by keyboard * update references * Add missing loki stories * Refactor Modal * Fix some Modal props and docs * update references * Refactor Modal.Stack * Disable animations when running Loki * Refactor AnimatedVisibility * Refactor Flex * Refactor Margins * fix position * fix margins * Use classes on Flex * Format JSX * fix animated class * loki update * Add Scrollable stories * Remove Position stories * Remove unused Loki references Co-authored-by: Tasso Evangelista <tassoevan7@gmail.com>
RocketChat · Jan 10, 2020 · af1916a · af1916a
1 parent 5a9aa82
commit af1916a
Show file tree

Hide file tree

Showing 117 changed files with 15,526 additions and 641 deletions.
diff --git a/packages/fuselage-ui-kit/package-lock.json b/packages/fuselage-ui-kit/package-lock.json
diff --git a/packages/fuselage-ui-kit/src/Actions.js b/packages/fuselage-ui-kit/src/Actions.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import {
   Button,
-  Grid,
+  Margins,
   Flex,
   Box,
 } from '@rocket.chat/fuselage';
@@ -16,7 +16,7 @@ const getStyle = ({ type }) => {
   case 'button':// ELEMENT_TYPES.BUTTON :
     return 'auto';
   default:
-    return '50%';
+    return '45%';
   }
 };
 
@@ -27,20 +27,22 @@ export const Actions = ({ blockId, appId, elements, parser }) => {
   const renderedElements = (showMoreVisible
     ? elements.slice(0, 5)
     : elements
-  ).map((element) => <Flex.Item basis={getStyle(element)}>{parser.renderActions({ blockId, appId, ...element }, BLOCK_CONTEXT.ACTION, parser)}</Flex.Item>);
+  ).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>);
 
   const handleShowMoreClick = () => {
     setShowMoreVisible(false);
   };
 
   return (
     <Block>
-      <Flex.Container wrap='wrap'>
-        <Box>
-          {renderedElements}
-          {showMoreVisible && (<Flex.Item><Button onClick={handleShowMoreClick}>Show more...</Button></Flex.Item>)}
-        </Box>
-      </Flex.Container>
+      <Margins all='neg-x8'>
+        <Flex.Container wrap='wrap'>
+          <Box>
+            {renderedElements}
+            {showMoreVisible && (<Flex.Item><Button onClick={handleShowMoreClick}>Show more...</Button></Flex.Item>)}
+          </Box>
+        </Flex.Container>
+      </Margins>
     </Block>
   );
 };
diff --git a/packages/fuselage-ui-kit/src/Block.js b/packages/fuselage-ui-kit/src/Block.js
@@ -4,5 +4,5 @@ import {
 } from '@rocket.chat/fuselage';
 
 export const Block = ({ children }) => (
-  <Margins blockEnd={4}>{children}</Margins>
+  <Margins blockEnd={16}>{children}</Margins>
 );
diff --git a/packages/fuselage-ui-kit/src/Demo.js b/packages/fuselage-ui-kit/src/Demo.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import {
+  Modal,
+  ButtonGroup,
+  Button,
+  AnimatedVisibility,
+} from '@rocket.chat/fuselage';
+
+const thumb = 'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
+export const Demo = ({ children, visible }) => <AnimatedVisibility visibility={visible}><Modal open={visible}>
+  <Modal.Header><Modal.Thumb url={thumb}/> <Modal.Title>Modal Header</Modal.Title><Modal.Close/></Modal.Header>
+  <Modal.Content>{children}</Modal.Content>
+  <Modal.Footer>
+    <ButtonGroup align='end'>
+      <Button>Cancel</Button>
+      <Button primary>Submit</Button>
+    </ButtonGroup>
+  </Modal.Footer>
+</Modal></AnimatedVisibility>;
diff --git a/packages/fuselage-ui-kit/src/Image.js b/packages/fuselage-ui-kit/src/Image.js
@@ -95,4 +95,4 @@ const genericImage = (element, context) => {
 
 export const ModalImage = ({ element, context }) => genericImage(element, context) || <Block><Flex.Container justifyContent='center'><Box><Media element={element}/></Box></Flex.Container></Block>;
 
-export const MessageImage = ({ element, context }) => genericImage(element, context) || <Block><Flex.Container justifyContent='flex-start'><Box><Media element={element}/></Box></Flex.Container></Block>;
+export const MessageImage = ({ element, context }) => genericImage(element, context) || <Block><Flex.Container justifyContent='start'><Box><Media element={element}/></Box></Flex.Container></Block>;
diff --git a/packages/fuselage-ui-kit/src/Input.js b/packages/fuselage-ui-kit/src/Input.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Label,
   Field,
   FieldGroup,
 } from '@rocket.chat/fuselage';
@@ -10,12 +9,14 @@ import {
 
 import { Block } from './Block';
 
-export const Input = ({ label, element, parser }) => (
+export const Input = ({ label, element, parser, index }) => (
   <Block>
     <FieldGroup>
       <Field>
-        {label && <Label text={label} />}
-        {parser.renderInputs(element, BLOCK_CONTEXT.FORM, parser)}
+        {label && <Field.Label>{label}</Field.Label>}
+        {
+          parser.renderInputs(element, BLOCK_CONTEXT.FORM, parser, index)
+        }
       </Field>
     </FieldGroup>
   </Block>

diff --git a/packages/fuselage-ui-kit/src/Overflow.js b/packages/fuselage-ui-kit/src/Overflow.js
@@ -0,0 +1,46 @@
+import React, { useRef } from 'react';
+import {
+  AnimatedVisibility,
+  Button,
+  PositionAnimated,
+  Options,
+  Icon,
+  useCursor,
+} from '@rocket.chat/fuselage';
+
+const convertOptions = (options, parser) => options.map(({ text, value }) => [value, parser(text)]);
+export const Overflow = ({ options, parser, onChange = console.log }) => {
+  const handleSelection = ([value]) => onChange({ target: { value } });
+  const convertedOptions = convertOptions(options, parser.text);
+  const [cursor, handleKeyDown, handleKeyUp, , [visible, hide, show]] = useCursor(-1, convertedOptions, (args, [, hide]) => {
+    handleSelection(args);
+    hide();
+  });
+  const ref = useRef();
+  return (
+    <>
+      <Button
+        ref={ref}
+        small
+        ghost onClick={show}
+        onBlur={hide}
+        onKeyUp={handleKeyUp}
+        onKeyDown={handleKeyDown}
+      >
+        <Icon name='menu' size={20} />
+      </Button>
+      <PositionAnimated
+        width='auto'
+        visible={visible ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN}
+        anchor={ref}
+        placement='bottom right'
+      >
+        <Options
+          onSelect={handleSelection}
+          options={convertOptions(options, parser.text)}
+          cursor={cursor}
+        />
+      </PositionAnimated>
+    </>
+  );
+};