mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-20 02:37:09 +03:00
Confirmation modal updates
Converted warning and secondary buttons, added Boundary, prop updates and other fixes
This commit is contained in:
jasonleyser
parent
3c9e9cf047
commit
9c7d0bfa26
@ -193,9 +193,3 @@ export const isUnityFile = async (file) => {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const isUsernameMatch = (source, candidate) => {
|
||||
if(source == candidate) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Validations from "~/common/validations";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { useState } from "react";
|
||||
|
||||
import { ButtonPrimaryFull, ButtonDeleteFull, ButtonDeleteDisabledFull, ButtonCancelFull } from "~/components/system/components/Buttons.js";
|
||||
import { ButtonPrimaryFull, ButtonSecondaryFull, ButtonWarningFull } from "~/components/system/components/Buttons.js";
|
||||
import { Input } from "~/components/system/components/Input.js";
|
||||
import { Boundary } from "~/components/system/components/fragments/Boundary.js";
|
||||
|
||||
const STYLES_TRANSPARENT_BG = css `
|
||||
background-color: ${Constants.system.bgBlurGrayBlack};
|
||||
@ -19,9 +19,9 @@ const STYLES_TRANSPARENT_BG = css `
|
||||
`;
|
||||
|
||||
const STYLES_MAIN_MODAL = css `
|
||||
background-color: ${Constants.system.white};
|
||||
width: 380px;
|
||||
height: auto;
|
||||
background-color: ${Constants.system.white};
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@ -40,98 +40,89 @@ const STYLES_HEADER = css `
|
||||
const STYLES_SUB_HEADER = css `
|
||||
color: ${Constants.system.textGray};
|
||||
font-size: ${Constants.typescale.lvl0};
|
||||
margin-top: 16px;
|
||||
font-family: ${Constants.font.text};
|
||||
margin-top: 16px;
|
||||
`;
|
||||
|
||||
const STYLES_INPUT_HEADER = css `
|
||||
color: ${Constants.system.black};
|
||||
font-size: ${Constants.typescale.lvlN1};
|
||||
font-family: ${Constants.font.semiBold};
|
||||
font-weight: bold;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 8px;
|
||||
`;
|
||||
|
||||
export const DeleteModal = (props) => {
|
||||
let header = '';
|
||||
let subHeader = '';
|
||||
export const ConfirmationModal = (props) => {
|
||||
const [isEnabled, setIsEnabled] = useState(false);
|
||||
|
||||
if (props.data.type === 'multi') {
|
||||
header = `Are you sure you want to delete the selected ${props.data.selected} files?`;
|
||||
subHeader = 'These files will be deleted from all connected collections and your file library. You can’t undo this action.';
|
||||
}
|
||||
const lang = {
|
||||
deleteText: 'Delete',
|
||||
confirmText: 'Confirm',
|
||||
cancelText: 'Cancel'
|
||||
}
|
||||
|
||||
if (props.data.type === 'single') {
|
||||
header = `Are you sure you want to delete the file "${props.data.filename}"?`;
|
||||
subHeader = 'This file will be deleted from all connected collections and your file library. You can’t undo this action.';
|
||||
}
|
||||
|
||||
if (props.data.type === 'collection') {
|
||||
header = `Are you sure you want to delete the collection "${props.data.collection}"?`;
|
||||
subHeader = 'This collection will be deleted but all your files will remain in your file library. You can’t undo this action.';
|
||||
}
|
||||
|
||||
return (
|
||||
<div css={STYLES_TRANSPARENT_BG}>
|
||||
<div css={STYLES_MAIN_MODAL}>
|
||||
<div>
|
||||
<div css={STYLES_HEADER}>{header}</div>
|
||||
<div css={STYLES_SUB_HEADER}>{subHeader}</div>
|
||||
<ButtonCancelFull onClick={() => props.response(false)} style={{ margin: '24px 0px 8px' }}>Cancel</ButtonCancelFull>
|
||||
<ButtonDeleteFull onClick={() => props.response(true)}>Delete</ButtonDeleteFull>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const DeleteWithInputModal = (props) => {
|
||||
const [isUsernameMatch, setIsUsernameMatch] = useState(false);
|
||||
const header = `Are you sure you want to delete your account @${props.data.username}?`;
|
||||
const subHeader = 'You will lose all your files and collections. You can’t undo this action.';
|
||||
const inputHeader = 'Please type your username to confirm';
|
||||
const inputPlaceholder = 'username';
|
||||
|
||||
const _handleOnChange = (e) => {
|
||||
const match = Validations.isUsernameMatch(e.target.value, props.data.username);
|
||||
setIsUsernameMatch(match);
|
||||
}
|
||||
|
||||
let deleteButton = <ButtonDeleteDisabledFull>Delete</ButtonDeleteDisabledFull>;
|
||||
if (isUsernameMatch) {
|
||||
deleteButton = <ButtonDeleteFull onClick={() => props.response(true)}>Delete</ButtonDeleteFull>;;
|
||||
const _handleChange = (e) => {
|
||||
if (e.target.value === props.matchValue) {
|
||||
setIsEnabled(true);
|
||||
return;
|
||||
}
|
||||
setIsEnabled(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div css={STYLES_TRANSPARENT_BG}>
|
||||
let deleteButton = <ButtonWarningFull disabled={true}>{props.buttonText || lang.deleteText}</ButtonWarningFull>;
|
||||
if (isEnabled) {
|
||||
deleteButton = <ButtonWarningFull onClick={() => props.callback(true)}>{props.buttonText || lang.deleteText}</ButtonWarningFull>;
|
||||
}
|
||||
|
||||
let confirmButton = <ButtonPrimaryFull disabled={true}>{props.buttonText || lang.confirmText}</ButtonPrimaryFull>;
|
||||
if (isEnabled) {
|
||||
confirmButton = <ButtonPrimaryFull onClick={() => props.callback(true)}>{props.buttonText || lang.confirmText}</ButtonPrimaryFull>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div css={STYLES_TRANSPARENT_BG}>
|
||||
<Boundary enabled={true} onOutsideRectEvent={() => props.callback(false)}>
|
||||
<div css={STYLES_MAIN_MODAL}>
|
||||
<div>
|
||||
<div css={STYLES_HEADER}>{header}</div>
|
||||
<div css={STYLES_SUB_HEADER}>{subHeader}</div>
|
||||
<div css={STYLES_INPUT_HEADER}>{inputHeader}</div>
|
||||
<Input placeholder={inputPlaceholder} onChange={_handleOnChange} />
|
||||
<ButtonCancelFull onClick={() => props.response(false)} style={{ margin: '16px 0px 8px' }}>Cancel</ButtonCancelFull>
|
||||
{deleteButton}
|
||||
</div>
|
||||
<div css={STYLES_HEADER}>{props.header}</div>
|
||||
<div css={STYLES_SUB_HEADER}>{props.subHeader}</div>
|
||||
{props.type === "DELETE" &&
|
||||
<>
|
||||
{props.withValidation ? (
|
||||
<>
|
||||
<div css={STYLES_INPUT_HEADER}>{props.inputHeader}</div>
|
||||
<Input placeholder={props.inputPlaceholder} onChange={_handleChange} />
|
||||
<ButtonSecondaryFull onClick={() => props.callback(false)} style={{margin: '24px 0px 8px'}}>{lang.cancelText}</ButtonSecondaryFull>
|
||||
{deleteButton}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ButtonSecondaryFull onClick={() => props.callback(false)} style={{ margin: '24px 0px 8px' }}>{lang.cancelText}</ButtonSecondaryFull>
|
||||
<ButtonWarningFull onClick={() => props.callback(true)}>{props.buttonText || lang.deleteText}</ButtonWarningFull>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
|
||||
{props.type === "CONFIRM" &&
|
||||
<>
|
||||
{props.withValidation ? (
|
||||
<>
|
||||
<div css={STYLES_INPUT_HEADER}>{props.inputHeader}</div>
|
||||
<Input placeholder={props.inputPlaceholder} onChange={_handleChange} />
|
||||
<ButtonSecondaryFull onClick={() => props.callback(false)} style={{ margin: '24px 0px 8px' }}>{lang.cancelText}</ButtonSecondaryFull>
|
||||
{confirmButton}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ButtonSecondaryFull onClick={() => props.callback(false)} style={{ margin: '24px 0px 8px' }}>{lang.cancelText}</ButtonSecondaryFull>
|
||||
<ButtonPrimaryFull onClick={() => props.callback(true)}>{props.buttonText || lang.confirmText}</ButtonPrimaryFull>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</Boundary>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ConfirmModal = (props) => {
|
||||
const header = `Making this file private will remove it from the following public slates: ${props.data.username}. Do you wish to continue?`;
|
||||
const subHeader = 'Making the file private means it’s not visible to others unless they have the link.';
|
||||
|
||||
return (
|
||||
<div css={STYLES_TRANSPARENT_BG}>
|
||||
<div css={STYLES_MAIN_MODAL}>
|
||||
<div>
|
||||
<div css={STYLES_HEADER}>{header}</div>
|
||||
<div css={STYLES_SUB_HEADER}>{subHeader}</div>
|
||||
<ButtonCancelFull onClick={() => props.response(false)} style={{ margin: '16px 0px 8px' }}>Cancel</ButtonCancelFull>
|
||||
<ButtonPrimaryFull onClick={() => props.response(true)}>Confirm</ButtonPrimaryFull>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -39,6 +39,13 @@ const STYLES_BUTTON_PRIMARY = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_PRIMARY_DISABLED = css `
|
||||
${STYLES_BUTTON}
|
||||
cursor: not-allowed;
|
||||
background-color: ${Constants.system.bgBlue};
|
||||
color: ${Constants.system.white};
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_PRIMARY_TRANSPARENT = css`
|
||||
${STYLES_BUTTON}
|
||||
cursor: pointer;
|
||||
@ -71,6 +78,17 @@ export const ButtonPrimary = (props) => {
|
||||
);
|
||||
}
|
||||
|
||||
if (props.disabled) {
|
||||
return(
|
||||
<button
|
||||
css={STYLES_BUTTON_PRIMARY_DISABLED}
|
||||
style={{ width: props.full ? "100%" : "auto", ...props.style }}
|
||||
onClick={props.onClick}
|
||||
children={props.children}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
css={props.transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY}
|
||||
@ -88,12 +106,12 @@ export const ButtonPrimaryFull = (props) => {
|
||||
const STYLES_BUTTON_SECONDARY = css`
|
||||
${STYLES_BUTTON}
|
||||
cursor: pointer;
|
||||
color: ${Constants.system.brand};
|
||||
background-color: ${Constants.system.white};
|
||||
color: ${Constants.system.black};
|
||||
background-color: ${Constants.system.gray20};
|
||||
box-shadow: 0 0 0 1px ${Constants.system.bgGray} inset;
|
||||
|
||||
:hover {
|
||||
background-color: #fcfcfc;
|
||||
background-color: ${Constants.system.gray30};
|
||||
}
|
||||
|
||||
:focus {
|
||||
@ -132,7 +150,7 @@ export const ButtonSecondary = (props) => {
|
||||
htmlFor={props.htmlFor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
@ -251,12 +269,12 @@ export const ButtonDisabledFull = (props) => {
|
||||
const STYLES_BUTTON_WARNING = css`
|
||||
${STYLES_BUTTON}
|
||||
cursor: pointer;
|
||||
color: ${Constants.system.red};
|
||||
background-color: ${Constants.system.white};
|
||||
color: ${Constants.system.white};
|
||||
background-color: ${Constants.system.red};
|
||||
box-shadow: 0 0 0 1px ${Constants.system.bgGray} inset;
|
||||
|
||||
:hover {
|
||||
background-color: #fcfcfc;
|
||||
background-color: #b51111;
|
||||
}
|
||||
|
||||
:focus {
|
||||
@ -265,6 +283,14 @@ const STYLES_BUTTON_WARNING = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_WARNING_DISABLED = css`
|
||||
${STYLES_BUTTON}
|
||||
cursor: not-allowed;
|
||||
color: ${Constants.system.white};
|
||||
background-color: ${Constants.system.bgRed};
|
||||
box-shadow: 0 0 0 1px ${Constants.system.bgGray} inset;
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_WARNING_TRANSPARENT = css`
|
||||
${STYLES_BUTTON}
|
||||
cursor: pointer;
|
||||
@ -297,6 +323,17 @@ export const ButtonWarning = (props) => {
|
||||
);
|
||||
}
|
||||
|
||||
if (props.disabled) {
|
||||
return (
|
||||
<button
|
||||
css={STYLES_BUTTON_WARNING_DISABLED}
|
||||
style={{ width: props.full ? "100%" : "auto", ...props.style }}
|
||||
onClick={props.onClick}
|
||||
children={props.children}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
css={props.transparent ? STYLES_BUTTON_WARNING_TRANSPARENT : STYLES_BUTTON_WARNING}
|
||||
@ -307,142 +344,6 @@ export const ButtonWarning = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const STYLES_BUTTON_DELETE = css`
|
||||
${STYLES_BUTTON}
|
||||
cursor: pointer;
|
||||
color: ${Constants.system.white};
|
||||
background-color: ${Constants.system.red};
|
||||
box-shadow: 0 0 0 1px ${Constants.system.bgGray} inset;
|
||||
|
||||
:hover {
|
||||
background-color: #b51111;
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_DELETE_TRANSPARENT = css`
|
||||
${STYLES_BUTTON}
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
color: ${Constants.system.darkGray};
|
||||
`;
|
||||
|
||||
export const ButtonDelete = (props) => {
|
||||
if (props.loading) {
|
||||
return (
|
||||
<button
|
||||
css={props.transparent ? STYLES_BUTTON_DELETE_TRANSPARENT : STYLES_BUTTON_DELETE}
|
||||
style={{ width: props.full ? "100%" : "auto", ...props.style }}
|
||||
>
|
||||
<LoaderSpinner style={{ height: 16, width: 16 }} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
if (props.type === "label") {
|
||||
return (
|
||||
<label
|
||||
css={props.transparent ? STYLES_BUTTON_DELETE_TRANSPARENT : STYLES_BUTTON_DELETE}
|
||||
style={{ width: props.full ? "100%" : "auto", ...props.style }}
|
||||
onClick={props.onClick}
|
||||
children={props.children}
|
||||
type={props.label}
|
||||
htmlFor={props.htmlFor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
css={props.transparent ? STYLES_BUTTON_DELETE_TRANSPARENT : STYLES_BUTTON_DELETE}
|
||||
onClick={props.onClick}
|
||||
children={props.children}
|
||||
style={{ width: props.full ? "100%" : "auto", ...props.style }}
|
||||
/>
|
||||
);
|
||||
export const ButtonWarningFull = (props) => {
|
||||
return <ButtonWarning full {...props} />;
|
||||
};
|
||||
|
||||
export const ButtonDeleteFull = (props) => {
|
||||
return <ButtonDelete full {...props} />;
|
||||
};
|
||||
|
||||
const STYLES_BUTTON_DELETE_DISABLED = css`
|
||||
${STYLES_BUTTON}
|
||||
cursor: not-allowed;
|
||||
background-color: ${Constants.system.bgRed};
|
||||
color: ${Constants.system.white};
|
||||
box-shadow: 0 0 0 1px ${Constants.system.bgGray} inset;
|
||||
|
||||
:focus {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_DELETE_DISABLED_TRANSPARENT = css`
|
||||
${STYLES_BUTTON}
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
color: ${Constants.system.gray};
|
||||
`;
|
||||
|
||||
export const ButtonDeleteDisabled = (props) => {
|
||||
return (
|
||||
<button
|
||||
css={props.transparent ? STYLES_BUTTON_DELETE_DISABLED_TRANSPARENT : STYLES_BUTTON_DELETE_DISABLED}
|
||||
onClick={props.onClick}
|
||||
children={props.children}
|
||||
type={props.label}
|
||||
htmlFor={props.htmlFor}
|
||||
style={{ width: props.full ? "100%" : "auto", ...props.style }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const ButtonDeleteDisabledFull = (props) => {
|
||||
return <ButtonDeleteDisabled full {...props} />;
|
||||
};
|
||||
|
||||
const STYLES_BUTTON_CANCEL = css`
|
||||
${STYLES_BUTTON}
|
||||
cursor: pointer;
|
||||
color: ${Constants.system.black};
|
||||
background-color: ${Constants.system.gray20};
|
||||
box-shadow: 0 0 0 1px ${Constants.system.bgGray} inset;
|
||||
|
||||
:hover {
|
||||
background-color: ${Constants.system.gray30};
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_CANCEL_TRANSPARENT = css`
|
||||
${STYLES_BUTTON}
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
color: ${Constants.system.darkGray};
|
||||
`;
|
||||
|
||||
export const ButtonCancel = (props) => {
|
||||
return (
|
||||
<button
|
||||
css={props.transparent ? STYLES_BUTTON_CANCEL_TRANSPARENT : STYLES_BUTTON_CANCEL}
|
||||
onClick={props.onClick}
|
||||
children={props.children}
|
||||
style={{ width: props.full ? "100%" : "auto", ...props.style }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const ButtonCancelFull = (props) => {
|
||||
return <ButtonCancel full {...props} />;
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user