feat: implement OIDC settings
This commit is contained in:
Liyang Zhu
@@ -2,103 +2,106 @@ import { useState, useId } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledForm = styled.form`
|
||||
> .option {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
> input[type="radio"] {
|
||||
display: none;
|
||||
|
||||
& + .box {
|
||||
background: #ffffff;
|
||||
border: 1px solid #d0d5dd;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
|
||||
border-radius: 8px;
|
||||
transition: all ease-in-out 250ms;
|
||||
|
||||
& > label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #667085;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all ease-in-out 250ms;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
box-shadow: inset 0 0 0 4px #ffffff;
|
||||
border: 1px solid #d0d5dd;
|
||||
margin: 14px 8px 14px 14px;
|
||||
transition: all ease-in-out 500ms;
|
||||
}
|
||||
> .option {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + .box {
|
||||
background: #22ccee;
|
||||
border: 1px solid #d0d5dd;
|
||||
> input[type="radio"] {
|
||||
display: none;
|
||||
|
||||
& > label {
|
||||
color: #ffffff;
|
||||
& + .box {
|
||||
background: #ffffff;
|
||||
border: 1px solid #d0d5dd;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
|
||||
border-radius: 8px;
|
||||
transition: all ease-in-out 250ms;
|
||||
|
||||
&:before {
|
||||
background: #ffffff;
|
||||
box-shadow: inset 0 0 0 4px #22ccee;
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
& > label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #667085;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all ease-in-out 250ms;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
box-shadow: inset 0 0 0 4px #ffffff;
|
||||
border: 1px solid #d0d5dd;
|
||||
margin: 14px 8px 14px 14px;
|
||||
transition: all ease-in-out 500ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + .box {
|
||||
background: #22ccee;
|
||||
border: 1px solid #d0d5dd;
|
||||
|
||||
& > label {
|
||||
color: #ffffff;
|
||||
|
||||
&:before {
|
||||
background: #ffffff;
|
||||
box-shadow: inset 0 0 0 4px #22ccee;
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const VALUE_NOT_SET = {};
|
||||
const VALUES_NOT_SET = {};
|
||||
|
||||
export default function Radio({
|
||||
options,
|
||||
values = undefined,
|
||||
value = undefined,
|
||||
defaultValue = undefined,
|
||||
onChange = undefined
|
||||
options,
|
||||
values = VALUES_NOT_SET,
|
||||
value = VALUE_NOT_SET,
|
||||
defaultValue = undefined,
|
||||
onChange = undefined
|
||||
}) {
|
||||
const id = useId();
|
||||
const id = useId();
|
||||
|
||||
const [fallbackValue, setFallbackValue] = useState(defaultValue);
|
||||
const _value = value !== undefined ? value : fallbackValue;
|
||||
const [fallbackValue, setFallbackValue] = useState(defaultValue);
|
||||
const _value = value !== VALUE_NOT_SET ? value : fallbackValue;
|
||||
|
||||
return (
|
||||
<StyledForm>
|
||||
{options.map((item, index) => (
|
||||
<div className="option" key={index}>
|
||||
<input
|
||||
type="radio"
|
||||
checked={(values !== undefined ? values.indexOf(_value) : _value) === index}
|
||||
onChange={() => {
|
||||
const valueToSet = values === undefined ? index : values[index];
|
||||
// Set fallback value if not in controlled mode
|
||||
if (value === undefined) {
|
||||
setFallbackValue(valueToSet);
|
||||
}
|
||||
// Invoke `onChange` handler if defined
|
||||
if (onChange) {
|
||||
onChange(valueToSet);
|
||||
}
|
||||
}}
|
||||
id={`${id}-${index}`}
|
||||
/>
|
||||
<div className="box">
|
||||
<label htmlFor={`${id}-${index}`}>{item}</label>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StyledForm>
|
||||
);
|
||||
return (
|
||||
<StyledForm>
|
||||
{options.map((item, index) => (
|
||||
<div className="option" key={index}>
|
||||
<input
|
||||
type="radio"
|
||||
checked={(values !== VALUES_NOT_SET ? values.indexOf(_value) : _value) === index}
|
||||
onChange={() => {
|
||||
const valueToSet = values === VALUES_NOT_SET ? index : values[index];
|
||||
// Set fallback value if not in controlled mode
|
||||
if (value === VALUE_NOT_SET) {
|
||||
setFallbackValue(valueToSet);
|
||||
}
|
||||
// Invoke `onChange` handler if defined
|
||||
if (onChange) {
|
||||
onChange(valueToSet);
|
||||
}
|
||||
}}
|
||||
id={`${id}-${index}`}
|
||||
/>
|
||||
<div className="box">
|
||||
<label htmlFor={`${id}-${index}`}>{item}</label>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StyledForm>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -24,7 +24,10 @@ const Styled = styled.div`
|
||||
height: 20px !important;
|
||||
}
|
||||
`;
|
||||
export default function Select({ options = [], updateSelect = null }) {
|
||||
|
||||
const CURRENT_NOT_SET = {};
|
||||
|
||||
export default function Select({ options = [], updateSelect = null, current = CURRENT_NOT_SET }) {
|
||||
const [optionsVisible, setOptionsVisible] = useState(false);
|
||||
const [curr, setCurr] = useState(undefined);
|
||||
const toggleVisible = () => {
|
||||
@@ -62,7 +65,9 @@ export default function Select({ options = [], updateSelect = null }) {
|
||||
}
|
||||
>
|
||||
<Styled onClick={toggleVisible}>
|
||||
<span className="txt">{curr?.title || `Select`}</span>
|
||||
<span className="txt">
|
||||
{(current !== CURRENT_NOT_SET ? current : curr)?.title || `Select`}
|
||||
</span>
|
||||
<IconArrow className="icon" />
|
||||
</Styled>
|
||||
</Tippy>
|
||||
|
||||
+2
-6
@@ -10,12 +10,8 @@ export const isImage = (file_type = "", size = 0) => {
|
||||
return file_type.startsWith("image") && size <= FILE_IMAGE_SIZE;
|
||||
};
|
||||
export const isObjectEqual = (obj1, obj2) => {
|
||||
let o1 = Object.entries(obj1 ?? {})
|
||||
.sort()
|
||||
.toString();
|
||||
let o2 = Object.entries(obj2 ?? {})
|
||||
.sort()
|
||||
.toString();
|
||||
let o1 = JSON.stringify(obj1 ?? {});
|
||||
let o2 = JSON.stringify(obj2 ?? {});
|
||||
return o1 === o2;
|
||||
};
|
||||
export const isTreatAsImage = (file) => {
|
||||
|
||||
Reference in New Issue
Block a user