Page MenuHomePhorge
Files F32392290

D5115.1765336426.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D5115.1765336426.diff
View Options

diff --git a/web/components/checkbox.css b/web/components/checkbox.css
new file mode 100644
--- /dev/null
+++ b/web/components/checkbox.css
@@ -0,0 +1,25 @@
+.checkbox {
+ appearance: none;
+ background-color: transparent;
+ width: 24px;
+ height: 24px;
+ border: 1px solid var(--radio-border);
+ border-radius: 3.6px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.checkbox::before {
+ content: '';
+ width: 16px;
+ height: 16px;
+ border-radius: 2.4px;
+ transform: scale(0);
+ transition: 120ms transform ease-in-out;
+ background-color: var(--radio-color);
+}
+
+.checkbox:checked::before {
+ transform: scale(1);
+}
diff --git a/web/components/checkbox.react.js b/web/components/checkbox.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/checkbox.react.js
@@ -0,0 +1,23 @@
+// @flow
+import * as React from 'react';
+
+import css from './checkbox.css';
+
+type Props = {
+ +checked: boolean,
+ +readOnly?: boolean,
+};
+
+function Checkbox(props: Props): React.Node {
+ const { checked, readOnly = true } = props;
+ return (
+ <input
+ className={css.checkbox}
+ type="checkbox"
+ checked={checked}
+ readOnly={readOnly}
+ />
+ );
+}
+
+export default Checkbox;
diff --git a/web/components/enum-settings-option.css b/web/components/enum-settings-option.css
--- a/web/components/enum-settings-option.css
+++ b/web/components/enum-settings-option.css
@@ -3,6 +3,7 @@
padding: 16px 32px 16px 16px;
align-items: center;
border-radius: 8px;
+ cursor: pointer;
}
div.optionContainerSelected {
@@ -13,6 +14,18 @@
margin-right: 24px;
}
+div.optionIconTop {
+ align-self: flex-start;
+}
+
+div.optionIconCenter {
+ align-self: center;
+}
+
+div.optionIconBottom {
+ align-self: flex-end;
+}
+
div.optionContent {
display: flex;
flex-direction: column;
diff --git a/web/components/enum-settings-option.react.js b/web/components/enum-settings-option.react.js
--- a/web/components/enum-settings-option.react.js
+++ b/web/components/enum-settings-option.react.js
@@ -3,15 +3,27 @@
import classnames from 'classnames';
import * as React from 'react';
+import Checkbox from './checkbox.react';
import EnumSettingsOptionInfo from './enum-settings-option-info.react.js';
import css from './enum-settings-option.css';
import Radio from './radio.react';
+const iconPositionClassnames = {
+ top: css.optionIconTop,
+ center: css.optionIconCenter,
+ bottom: css.optionIconBottom,
+};
+
+type InputType = 'radio' | 'checkbox';
+type IconPosition = $Keys<typeof iconPositionClassnames>;
+
type Props = {
+selected: boolean,
+onSelect: () => void,
+icon: React.Node,
+title: string,
+ +type?: InputType,
+ +iconPosition?: IconPosition,
+statements: $ReadOnlyArray<{
+statement: string,
+isStatementValid: boolean,
@@ -20,7 +32,15 @@
};
function EnumSettingsOption(props: Props): React.Node {
- const { icon, title, statements, selected, onSelect } = props;
+ const {
+ icon,
+ title,
+ statements,
+ selected,
+ onSelect,
+ type = 'radio',
+ iconPosition = 'center',
+ } = props;
const descriptionItems = React.useMemo(
() =>
@@ -39,6 +59,16 @@
[selected, statements],
);
+ const inputIcon = React.useMemo(
+ () =>
+ type === 'checkbox' ? (
+ <Checkbox checked={selected} />
+ ) : (
+ <Radio checked={selected} />
+ ),
+ [type, selected],
+ );
+
const optionContainerClasses = React.useMemo(
() =>
classnames(css.optionContainer, {
@@ -46,14 +76,20 @@
}),
[selected],
);
+
+ const optionIconClasses = React.useMemo(
+ () => classnames(css.optionIcon, iconPositionClassnames[iconPosition]),
+ [iconPosition],
+ );
+
return (
<div className={optionContainerClasses} onClick={onSelect}>
- <div className={css.optionIcon}>{icon}</div>
+ <div className={optionIconClasses}>{icon}</div>
<div className={css.optionContent}>
<div className={css.optionTitle}>{title}</div>
<div className={css.optionDescription}>{descriptionItems}</div>
</div>
- <Radio checked={selected} />
+ {inputIcon}
</div>
);
}

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 10, 3:13 AM (17 h, 51 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5859210
Default Alt Text
D5115.1765336426.diff (4 KB)

Event Timeline