mirror of
https://github.com/filecoin-project/slate.git
synced 2024-08-17 17:50:50 +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 System from "~/components/system";
|
||||
import * as Jumper from "~/components/system/components/fragments/Jumper";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as Events from "~/common/custom-events";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as MobileJumper from "~/components/system/components/fragments/MobileJumper";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
@ -22,6 +20,16 @@ const STYLES_EDIT_INFO_INPUT = (theme) => css`
|
||||
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`
|
||||
display: flex;
|
||||
position: absolute;
|
||||
@ -35,9 +43,8 @@ const STYLES_EDIT_INFO_FOOTER = (theme) => css`
|
||||
|
||||
const STYLES_EDIT_INFO_FORM = css`
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 40;
|
||||
height: 270px;
|
||||
`;
|
||||
|
||||
function UpdateFileForm({ file, isMobile, onClose }) {
|
||||
@ -46,19 +53,20 @@ function UpdateFileForm({ file, isMobile, onClose }) {
|
||||
const { getFieldProps, getFormProps, isSubmitting } = useForm({
|
||||
initialValues: {
|
||||
title: file?.name || "",
|
||||
description: file?.body || "",
|
||||
notes: file?.body || "",
|
||||
},
|
||||
onSubmit: async ({ title, description }) => {
|
||||
onSubmit: async ({ title, notes }) => {
|
||||
const response = await Actions.updateFile({
|
||||
id: file.id,
|
||||
name: title,
|
||||
body: description,
|
||||
body: notes,
|
||||
});
|
||||
onClose();
|
||||
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 form = formRef.current;
|
||||
if (!form) return;
|
||||
@ -85,13 +93,13 @@ function UpdateFileForm({ file, isMobile, onClose }) {
|
||||
</div>
|
||||
<div>
|
||||
<System.H6 as="label" color="textGray">
|
||||
Description
|
||||
Notes
|
||||
</System.H6>
|
||||
<System.Textarea
|
||||
css={STYLES_EDIT_INFO_INPUT}
|
||||
css={STYLES_EDIT_INFO_NOTES_INPUT}
|
||||
style={{ marginTop: 6 }}
|
||||
maxLength="2000"
|
||||
{...getFieldProps("description", { onChange: scrollToFormBottom })}
|
||||
{...getFieldProps("notes", { onChange: scrollToFormBottom })}
|
||||
/>
|
||||
</div>
|
||||
</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 calculateNodeHeight, { purgeCache } from "~/vendor/calculate-node-height";
|
||||
import { FocusRing } from "~/components/core/FocusRing";
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const noop = () => {};
|
||||
@ -53,14 +52,12 @@ export default class TextareaAutosize extends React.Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<FocusRing>
|
||||
<textarea
|
||||
{...props}
|
||||
css={[STYLES_TEXTAREA, css]}
|
||||
onChange={this._onChange}
|
||||
ref={this._onRef}
|
||||
/>
|
||||
</FocusRing>
|
||||
<textarea
|
||||
{...props}
|
||||
css={[STYLES_TEXTAREA, css]}
|
||||
onChange={this._onChange}
|
||||
ref={this._onRef}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user