Unverified Commit d6b38429 authored by Guilherme Gazzo's avatar Guilherme Gazzo Committed by GitHub
Browse files

feat: UiKit error states (#133)

parent c750d5a4
......@@ -9,14 +9,14 @@ import {
import { Block } from './Block';
export const Input = ({ label, element, parser, index }) => (
export const Input = ({ label, element, parser, index, error, hint }) => (
<Block>
<FieldGroup>
<Field>
{label && <Field.Label>{label}</Field.Label>}
{
parser.renderInputs(element, BLOCK_CONTEXT.FORM, parser, index)
}
{parser.renderInputs(element, BLOCK_CONTEXT.FORM, parser, index)}
{error && <Field.Error>{error}</Field.Error>}
{hint && <Field.Hint>{hint}</Field.Hint>}
</Field>
</FieldGroup>
</Block>
......
......@@ -3,7 +3,7 @@ import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
import {
Modal,
} from '@rocket.chat/fuselage';
import { UiKitModal, kitContext, defaultContext } from './';
import { UiKitModal, kitContext, defaultContext, UiKitComponent } from './';
import { Demo } from './Demo';
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
......@@ -15,17 +15,20 @@ import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
<Preview>
<Story name='Input'>
<Demo visible={boolean('visible', true) ? 1 : 0}>
{UiKitModal([{
"type": "input",
"element": {
"type": "plain_text_input"
},
"label": {
"type": "plain_text",
"text": "Label",
"emoji": true
}
}])}
<kitContext.Provider value={{...defaultContext, errors: {'input-test': text('error', 'asdas') } }}>
<UiKitComponent render={UiKitModal} blocks={[{
"type": "input",
"element": {
"type": "plain_text_input",
"actionId": "input-test",
},
"label": {
"type": "plain_text",
"text": "Label",
"emoji": true
}
}]}/>
</kitContext.Provider>
</Demo>
</Story>
</Preview>
......@@ -33,18 +36,21 @@ import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
<Preview>
<Story name='Input Multiline'>
<Demo visible={boolean('visible', true) ? 1 : 0}>
{UiKitModal([{
<kitContext.Provider value={{...defaultContext, errors: {'input-test': text('error', 'asdas') } }}>
<UiKitComponent render={UiKitModal} blocks= {[{
"type": "input",
"element": {
"type": "plain_text_input",
"multiline": true
"multiline": true,
"actionId": "input-test"
},
"label": {
"type": "plain_text",
"text": "Label",
"emoji": true
}
}])}
}]}/>
</kitContext.Provider>
</Demo>
</Story>
</Preview>
......@@ -54,23 +60,27 @@ import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
<Preview>
<Story name='Input Datepicker'>
<Demo visible={boolean('visible', true) ? 1 : 0}>
{UiKitModal([{
"type": "input",
"element": {
"type": "datepicker",
"initial_date": "1990-04-28",
"placeholder": {
"type": "plain_text",
"text": "Select a date",
"emoji": true
}
},
"label": {
"type": "plain_text",
"text": "Label",
"emoji": true
}
}])}
<kitContext.Provider value={{...defaultContext, errors: {'input-test': text('error', 'asdas') } }}>
<UiKitComponent render={UiKitModal} blocks= {[{
"type": "input",
"element": {
"type": "datepicker",
"initial_date": "1990-04-28",
"actionId": "input-test",
"placeholder": {
"type": "plain_text",
"text": "Select a date",
"emoji": true
}
},
"label": {
"type": "plain_text",
"text": "Label",
"emoji": true
}
}
]}/>
</kitContext.Provider>
</Demo>
</Story>
</Preview>
......
......@@ -35,23 +35,26 @@ export const defaultContext = {
action: (...args) => console.log(JSON.stringify(args)),
state: console.log,
appId: '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz',
errors: {}
};
export const kitContext = React.createContext(defaultContext);
const useBlockContext = ({ blockId, actionId, appId, initialValue }, context) => {
export const useBlockContext = ({ blockId, actionId, appId, initialValue }, context) => {
const [value, setValue] = useState(initialValue);
const [loading, setLoading] = useState(false);
const { action, appId: appIdFromContext, state } = useContext(kitContext);
const { action, appId: appIdFromContext, state, errors } = useContext(kitContext);
const error = errors && actionId && errors[actionId];
if ([BLOCK_CONTEXT.SECTION, BLOCK_CONTEXT.ACTION].includes(context)) {
return [{ loading, setLoading }, async ({ target: { value } }) => {
return [{ loading, setLoading, error }, async ({ target: { value } }) => {
setLoading(true);
await action({ blockId, appId: appId || appIdFromContext, actionId, value });
setLoading(false);
}];
}
return [{ loading, setLoading, value }, async ({ target: { value } }) => {
return [{ loading, setLoading, value, error }, async ({ target: { value } }) => {
setValue(value);
setLoading(true);
await state({ blockId, appId, actionId, value });
......@@ -156,11 +159,12 @@ class MessageParser extends UiKitParserMessage {
}
datePicker(element, context, key) {
const [{ loading, value }, action] = useBlockContext(element, context);
const [{ loading, value, error }, action] = useBlockContext(element, context);
const { actionId, placeholder } = element;
return (
<InputBox
key={key}
error={error}
value={value}
mod-mod-loading={loading}
id={actionId}
......@@ -244,12 +248,16 @@ class ModalParser extends UiKitParserModal {
});
}
input({ element, label, blockId, appId }, context, index) {
input({ element, label, blockId, appId, ...args }, context, index) {
const [{ loading, value, error }, action] = useBlockContext({ ...element, appId, blockId }, context);
return (
<InputLayoutBlock
error={error}
key={index}
index={index}
parser={this}
context={context}
element={{ ...element, appId, blockId }}
label={this.plainText(label)}
/>
......@@ -261,7 +269,7 @@ class ModalParser extends UiKitParserModal {
}
plainInput(element, context, index) {
const [{ loading, value }, action] = useBlockContext(element, context);
const [{ loading, value, error }, action] = useBlockContext(element, context);
const { multiline, actionId, placeholder } = element;
const Component = multiline ? TextAreaInput : TextInput;
return (
......@@ -271,6 +279,7 @@ class ModalParser extends UiKitParserModal {
id={actionId}
name={actionId}
rows={6}
error={error}
value={value}
onInput={action}
placeholder={this.plainText(placeholder)}
......@@ -288,3 +297,5 @@ export const UiKitButtons = uiKitButtons();
export const UiKitText = uiKitText(textParser);
export const UiKitMessage = uiKitMessage(messageParser);
export const UiKitModal = uiKitModal(modalParser);
export const UiKitComponent = ({render, blocks}) => render(blocks);
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment