toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-09-20 07:57:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add radio group (#2572)

Browse Source
This commit is contained in:
Whitewater 2023-05-29 08:15:22 -07:00 committed by GitHub
parent 20cc082a02
commit 88eaaf9ce4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 198 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/src/components/blocksuite/block-suite-page-list/index.tsx
View File

@ -89,7 +89,6 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
if (!filter[listType](pageMeta, pageMetas)) {
return false;
}
console.log(view);
if (!view) {
return true;
}

4
apps/web/src/components/pure/workspace-list-modal/styles.ts
View File

@ -58,7 +58,7 @@ export const StyledCreateWorkspaceCard = styled('div')(() => {
background: 'var(--affine-hover-color)',
color: 'var(--affine-text-primary-color)',
'.add-icon': {
borderColor: 'var(--affine-white-color)',
borderColor: 'var(--affine-white)',
color: 'var(--affine-primary-color)',
},
},
@ -156,7 +156,7 @@ export const StyleWorkspaceAdd = styled('div')(() => {
transition: 'background .2s',
fontSize: '24px',
...displayFlex('center', 'center'),
borderColor: 'var(--affine-white-color)',
borderColor: 'var(--affine-white)',
color: 'var(--affine-primary-color)',
};
});

1
packages/component/package.json
View File

@ -37,6 +37,7 @@
"@popperjs/core": "^2.11.8",
"@radix-ui/react-avatar": "^1.0.3",
"@radix-ui/react-collapsible": "^1.0.3",
"@radix-ui/react-radio-group": "^1.1.3",
"@radix-ui/react-toast": "^1.1.4",
"@toeverything/hooks": "workspace:*",
"@toeverything/theme": "^0.6.1",

15
packages/component/src/stories/button.stories.tsx
View File

@ -5,6 +5,7 @@ import { useState } from 'react';
import { Button } from '../ui/button/button';
import { DropdownButton } from '../ui/button/dropdown';
import type { ButtonProps } from '../ui/button/interface';
import { RadioButton, RadioButtonGroup } from '../ui/button/radio';
import { Menu } from '../ui/menu/menu';
import { toast } from '../ui/toast/toast';
@ -91,6 +92,20 @@ Dropdown.args = {
onClickDropDown: () => toast('Click dropdown'),
};
export const RadioGroup: StoryFn = ({ ...props }) => {
return (
<RadioButtonGroup {...props}>
<RadioButton value="all">All</RadioButton>
<RadioButton value="page">Page</RadioButton>
<RadioButton value="edgeless">Edgeless</RadioButton>
</RadioButtonGroup>
);
};
RadioGroup.args = {
defaultValue: 'all',
onValueChange: (value: string) => toast(`Radio value: ${value}`),
};
export const Test: StoryFn<ButtonProps> = () => {
const [input, setInput] = useState('');
return (

2
packages/component/src/ui/button/dropdown.tsx
View File

@ -29,4 +29,4 @@ export const DropdownButton = forwardRef<
</button>
);
});
DropdownButton.displayName = 'SimpleDropdownButton';
DropdownButton.displayName = 'DropdownButton';

35
packages/component/src/ui/button/radio.tsx Normal file
View File

@ -0,0 +1,35 @@
import type {
RadioGroupItemProps,
RadioGroupProps,
} from '@radix-ui/react-radio-group';
import * as RadioGroup from '@radix-ui/react-radio-group';
import { forwardRef } from 'react';
import * as styles from './styles.css';
export const RadioButton = forwardRef<HTMLButtonElement, RadioGroupItemProps>(
({ children, ...props }, ref) => {
return (
<RadioGroup.Item ref={ref} {...props}>
<span className={styles.radioUncheckedButton}>{children}</span>
<RadioGroup.Indicator className={styles.radioButton}>
{children}
</RadioGroup.Indicator>
</RadioGroup.Item>
);
}
);
RadioButton.displayName = 'RadioButton';
export const RadioButtonGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
({ ...props }, ref) => {
return (
<RadioGroup.Root
ref={ref}
className={styles.radioButtonGroup}
{...props}
></RadioGroup.Root>
);
}
);
RadioButtonGroup.displayName = 'RadioButtonGroup';

40
packages/component/src/ui/button/styles.css.ts
View File

@ -52,3 +52,43 @@ export const icon = style({
},
},
});
export const radioButton = style({
fontSize: 'var(--affine-font-xs)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '75px',
height: '24px',
borderRadius: '8px',
filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1))',
whiteSpace: 'nowrap',
userSelect: 'none',
selectors: {
'&:hover': {
background: 'var(--affine-hover-color)',
},
'&[data-state="checked"]': {
background: 'var(--affine-white)',
},
},
});
export const radioUncheckedButton = style([
radioButton,
{
selectors: {
'[data-state="checked"] > &': {
display: 'none',
},
},
},
]);
export const radioButtonGroup = style({
display: 'inline-flex',
alignItems: 'flex-start',
background: 'var(--affine-hover-color)',
borderRadius: '10px',
padding: '2px',
});

104
yarn.lock
View File

@ -68,6 +68,7 @@ __metadata:
"@popperjs/core": ^2.11.8
"@radix-ui/react-avatar": ^1.0.3
"@radix-ui/react-collapsible": ^1.0.3
"@radix-ui/react-radio-group": ^1.1.3
"@radix-ui/react-toast": ^1.1.4
"@storybook/addon-actions": ^7.0.18
"@storybook/addon-coverage": ^0.0.8
@ -6606,6 +6607,21 @@ __metadata:
languageName: node
linkType: hard
"@radix-ui/react-direction@npm:1.0.1":
version: 1.0.1
resolution: "@radix-ui/react-direction@npm:1.0.1"
dependencies:
"@babel/runtime": ^7.13.10
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 5336a8b0d4f1cde585d5c2b4448af7b3d948bb63a1aadb37c77771b0e5902dc6266e409cf35fd0edaca7f33e26424be19e64fb8f9d7f7be2d6f1714ea2764210
languageName: node
linkType: hard
"@radix-ui/react-dismissable-layer@npm:1.0.0":
version: 1.0.0
resolution: "@radix-ui/react-dismissable-layer@npm:1.0.0"
@ -6815,6 +6831,63 @@ __metadata:
languageName: node
linkType: hard
"@radix-ui/react-radio-group@npm:^1.1.3":
version: 1.1.3
resolution: "@radix-ui/react-radio-group@npm:1.1.3"
dependencies:
"@babel/runtime": ^7.13.10
"@radix-ui/primitive": 1.0.1
"@radix-ui/react-compose-refs": 1.0.1
"@radix-ui/react-context": 1.0.1
"@radix-ui/react-direction": 1.0.1
"@radix-ui/react-presence": 1.0.1
"@radix-ui/react-primitive": 1.0.3
"@radix-ui/react-roving-focus": 1.0.4
"@radix-ui/react-use-controllable-state": 1.0.1
"@radix-ui/react-use-previous": 1.0.1
"@radix-ui/react-use-size": 1.0.1
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 88f7007610817ab30f471a7e1f6605e94cc507a31fb4bb218116d65cc48c9b3149fce500f386716a3ed5fb0089d65faf32d3e01971322cd4a14b51003ec82bc2
languageName: node
linkType: hard
"@radix-ui/react-roving-focus@npm:1.0.4":
version: 1.0.4
resolution: "@radix-ui/react-roving-focus@npm:1.0.4"
dependencies:
"@babel/runtime": ^7.13.10
"@radix-ui/primitive": 1.0.1
"@radix-ui/react-collection": 1.0.3
"@radix-ui/react-compose-refs": 1.0.1
"@radix-ui/react-context": 1.0.1
"@radix-ui/react-direction": 1.0.1
"@radix-ui/react-id": 1.0.1
"@radix-ui/react-primitive": 1.0.3
"@radix-ui/react-use-callback-ref": 1.0.1
"@radix-ui/react-use-controllable-state": 1.0.1
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 69b1c82c2d9db3ba71549a848f2704200dab1b2cd22d050c1e081a78b9a567dbfdc7fd0403ee010c19b79652de69924d8ca2076cd031d6552901e4213493ffc7
languageName: node
linkType: hard
"@radix-ui/react-scroll-area@npm:1.0.2":
version: 1.0.2
resolution: "@radix-ui/react-scroll-area@npm:1.0.2"
@ -7015,6 +7088,37 @@ __metadata:
languageName: node
linkType: hard
"@radix-ui/react-use-previous@npm:1.0.1":
version: 1.0.1
resolution: "@radix-ui/react-use-previous@npm:1.0.1"
dependencies:
"@babel/runtime": ^7.13.10
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 66b4312e857c58b75f3bf62a2048ef090b79a159e9da06c19a468c93e62336969c33dbef60ff16969f00b20386cc25d138f6a353f1658b35baac0a6eff4761b9
languageName: node
linkType: hard
"@radix-ui/react-use-size@npm:1.0.1":
version: 1.0.1
resolution: "@radix-ui/react-use-size@npm:1.0.1"
dependencies:
"@babel/runtime": ^7.13.10
"@radix-ui/react-use-layout-effect": 1.0.1
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 6cc150ad1e9fa85019c225c5a5d50a0af6cdc4653dad0c21b4b40cd2121f36ee076db326c43e6bc91a69766ccff5a84e917d27970176b592577deea3c85a3e26
languageName: node
linkType: hard
"@radix-ui/react-visually-hidden@npm:1.0.3":
version: 1.0.3
resolution: "@radix-ui/react-visually-hidden@npm:1.0.3"