Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Switch components from headlessui or radix to blueprint #745

Merged
merged 4 commits into from
Jul 31, 2024
Merged

Switch components from headlessui or radix to blueprint #745

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
11d540f
refactor: use blueprint select
wadjih-bencheikh18 Jul 11, 2024
b9266b4
refactor: gradient select
wadjih-bencheikh18 Jul 20, 2024
9f4f7d9
refactor: cleanup
wadjih-bencheikh18 Jul 30, 2024
dbb18a0
Merge remote-tracking branch 'origin/main' into select-blueprint
wadjih-bencheikh18 Jul 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 44 additions & 71 deletions src/components/color-picker/gradient-select/GradientSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import * as Select from '@radix-ui/react-select';
import { Button, MenuItem } from '@blueprintjs/core';
import { ItemRenderer, Select } from '@blueprintjs/select';
import * as scaleChromatic from 'd3-scale-chromatic';
import { FaChevronDown } from 'react-icons/fa';

Expand Down Expand Up @@ -53,86 +54,58 @@ export interface GradientSelectProps {
value: GradientScaleName;
onChange: (value: GradientScaleName) => void;
}

const renderItem: ItemRenderer<GradientScaleName> = (
option,
{ handleClick, handleFocus, modifiers },
) => {
if (!modifiers.matchesPredicate) {
return null;
}
return (
<MenuItem
active={modifiers.active}
key={option}
onClick={handleClick}
onFocus={handleFocus}
roleStructure="listoption"
text={
<div>
{option}
<GradientSelectOption>
<div style={{ height: 15 }}>
<FixedGradientPreview gradient={option} />
</div>
</GradientSelectOption>
</div>
}
/>
);
};
export function GradientSelect(props: GradientSelectProps) {
const { value, onChange } = props;
return (
<GradientSelectListbox>
<Select.Root value={value} onValueChange={onChange}>
<Select.Trigger
<Select
popoverProps={{ matchTargetWidth: true }}
activeItem={value}
onItemSelect={onChange}
items={scaleOptions}
itemRenderer={renderItem}
filterable={false}
fill
>
<Button
css={css`
width: 100%;
height: 30px;
padding: 4px;
display: block;
`}
>
<Select.Value>
<FixedGradientPreview gradient={value} />
<GradientSelectChevron />
</Select.Value>
</Select.Trigger>
<Select.Portal>
<Select.Content
position="popper"
sideOffset={10}
css={css`
background-color: white;
width: var(--radix-select-trigger-width);
border: 1px solid darkgray;
border-radius: 0.25rem;
padding: 4px;
`}
>
<Select.Viewport>
{scaleOptions.map((option) => (
<Select.Item
key={option}
value={option}
css={css`
outline: none;
padding: 8px 0 8px 0;
cursor: pointer;
margin-left: 20px;
&[data-state='checked'] {
font-weight: bold;
}
&[data-state='unchecked'] {
opacity: 1;
}

&:not([data-highlighted]) span {
margin-left: 12px;
}
&[data-highlighted] {
span {
margin-left: 4px;
}
::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 1px;
filter: brightness(60%);
background-color: dimgray;
}
}
`}
>
<Select.ItemText>
{option}
<GradientSelectOption>
<div style={{ height: 15 }}>
<FixedGradientPreview gradient={option} />
</div>
</GradientSelectOption>
</Select.ItemText>
</Select.Item>
))}
</Select.Viewport>
</Select.Content>
</Select.Portal>
</Select.Root>
<FixedGradientPreview gradient={value} />
<GradientSelectChevron />
</Button>
</Select>
</GradientSelectListbox>
);
}
Loading