mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
feat(GlobalCarousel/Jumpers/EditInfo):
- remove body's overflow - close jumper when saving - change Description's label to 'Notes'
This commit is contained in:
parent
18cfa98221
commit
81073f92a4
@ -2,10 +2,8 @@ import * as React from "react";
|
|||||||
import * as Styles from "~/common/styles";
|
import * as Styles from "~/common/styles";
|
||||||
import * as System from "~/components/system";
|
import * as System from "~/components/system";
|
||||||
import * as Jumper from "~/components/system/components/fragments/Jumper";
|
import * as Jumper from "~/components/system/components/fragments/Jumper";
|
||||||
import * as SVG from "~/common/svg";
|
|
||||||
import * as Actions from "~/common/actions";
|
import * as Actions from "~/common/actions";
|
||||||
import * as Events from "~/common/custom-events";
|
import * as Events from "~/common/custom-events";
|
||||||
import * as Constants from "~/common/constants";
|
|
||||||
import * as MobileJumper from "~/components/system/components/fragments/MobileJumper";
|
import * as MobileJumper from "~/components/system/components/fragments/MobileJumper";
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
import { css } from "@emotion/react";
|
||||||
@ -22,6 +20,16 @@ const STYLES_EDIT_INFO_INPUT = (theme) => css`
|
|||||||
color: ${theme.semantic.textBlack};
|
color: ${theme.semantic.textBlack};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const STYLES_EDIT_INFO_NOTES_INPUT = (theme) => css`
|
||||||
|
width: 100%;
|
||||||
|
max-width: unset;
|
||||||
|
box-shadow: 0 0 0 1px ${theme.semantic.borderGrayLight4} inset;
|
||||||
|
border-radius: 12px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: ${theme.semantic.textBlack};
|
||||||
|
min-height: 120px;
|
||||||
|
`;
|
||||||
|
|
||||||
const STYLES_EDIT_INFO_FOOTER = (theme) => css`
|
const STYLES_EDIT_INFO_FOOTER = (theme) => css`
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -35,9 +43,8 @@ const STYLES_EDIT_INFO_FOOTER = (theme) => css`
|
|||||||
|
|
||||||
const STYLES_EDIT_INFO_FORM = css`
|
const STYLES_EDIT_INFO_FORM = css`
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-basis: 0;
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding-bottom: 40;
|
height: 270px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
function UpdateFileForm({ file, isMobile, onClose }) {
|
function UpdateFileForm({ file, isMobile, onClose }) {
|
||||||
@ -46,19 +53,20 @@ function UpdateFileForm({ file, isMobile, onClose }) {
|
|||||||
const { getFieldProps, getFormProps, isSubmitting } = useForm({
|
const { getFieldProps, getFormProps, isSubmitting } = useForm({
|
||||||
initialValues: {
|
initialValues: {
|
||||||
title: file?.name || "",
|
title: file?.name || "",
|
||||||
description: file?.body || "",
|
notes: file?.body || "",
|
||||||
},
|
},
|
||||||
onSubmit: async ({ title, description }) => {
|
onSubmit: async ({ title, notes }) => {
|
||||||
const response = await Actions.updateFile({
|
const response = await Actions.updateFile({
|
||||||
id: file.id,
|
id: file.id,
|
||||||
name: title,
|
name: title,
|
||||||
body: description,
|
body: notes,
|
||||||
});
|
});
|
||||||
|
onClose();
|
||||||
Events.hasError(response);
|
Events.hasError(response);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
//NOTE(amine): scroll to the bottom of the form every time the description's textarea resizes
|
//NOTE(amine): scroll to the bottom of the form every time the notes' textarea resizes
|
||||||
const scrollToFormBottom = () => {
|
const scrollToFormBottom = () => {
|
||||||
const form = formRef.current;
|
const form = formRef.current;
|
||||||
if (!form) return;
|
if (!form) return;
|
||||||
@ -85,13 +93,13 @@ function UpdateFileForm({ file, isMobile, onClose }) {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<System.H6 as="label" color="textGray">
|
<System.H6 as="label" color="textGray">
|
||||||
Description
|
Notes
|
||||||
</System.H6>
|
</System.H6>
|
||||||
<System.Textarea
|
<System.Textarea
|
||||||
css={STYLES_EDIT_INFO_INPUT}
|
css={STYLES_EDIT_INFO_NOTES_INPUT}
|
||||||
style={{ marginTop: 6 }}
|
style={{ marginTop: 6 }}
|
||||||
maxLength="2000"
|
maxLength="2000"
|
||||||
{...getFieldProps("description", { onChange: scrollToFormBottom })}
|
{...getFieldProps("notes", { onChange: scrollToFormBottom })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</JumperItem>
|
</JumperItem>
|
||||||
|
15
vendor/react-textarea-autosize.js
vendored
15
vendor/react-textarea-autosize.js
vendored
@ -1,7 +1,6 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
|
|
||||||
import calculateNodeHeight, { purgeCache } from "~/vendor/calculate-node-height";
|
import calculateNodeHeight, { purgeCache } from "~/vendor/calculate-node-height";
|
||||||
import { FocusRing } from "~/components/core/FocusRing";
|
|
||||||
import { css } from "@emotion/react";
|
import { css } from "@emotion/react";
|
||||||
|
|
||||||
const noop = () => {};
|
const noop = () => {};
|
||||||
@ -53,14 +52,12 @@ export default class TextareaAutosize extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FocusRing>
|
<textarea
|
||||||
<textarea
|
{...props}
|
||||||
{...props}
|
css={[STYLES_TEXTAREA, css]}
|
||||||
css={[STYLES_TEXTAREA, css]}
|
onChange={this._onChange}
|
||||||
onChange={this._onChange}
|
ref={this._onRef}
|
||||||
ref={this._onRef}
|
/>
|
||||||
/>
|
|
||||||
</FocusRing>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user