Closed ChenShuy1 closed 2 years ago
more information: like
What version of GDG are you using?
What version of GDG are you using?
v5.0.0
Are you using a custom cell or the one from the glide-data-grid-cells package?
Also there are some fixes in the 5.1.0 alphas you should test with.
Are you using a custom cell or the one from the glide-data-grid-cells package?
totally a custom cell, with Antd Select
Can I have the source to the cell?
On Thu, Sep 8, 2022 at 6:50 PM chenshy39 @.***> wrote:
Are you using a custom cell or the one from the glide-data-grid-cells package?
totally a custom cell
— Reply to this email directly, view it on GitHub https://github.com/glideapps/glide-data-grid/issues/492#issuecomment-1241409223, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAHN24OF4B3PCXF74TVRHLV5KJX5ANCNFSM6AAAAAAQHR2H5E . You are receiving this because you commented.Message ID: @.***>
import {
CustomCell,
ProvideEditorCallback,
CustomCellRenderer,
getMiddleCenterBias,
} from '@glideapps/glide-data-grid';
import * as React from 'react';
import { Select } from 'antd';
import styles from './dropdowncell.less';
interface DropdownCellProps {
readonly kind: 'dropdown-cell';
readonly value: string;
readonly options: { value: string; label: string }[];
readonly readonly?: boolean;
}
export type DropdownCell = CustomCell<DropdownCellProps>;
const Editor: ReturnType<ProvideEditorCallback<DropdownCell>> = (p) => {
const { value: cell, onFinishedEditing, initialValue } = p;
const { options, value: valueIn } = cell.data;
const [value, setValue] = React.useState(valueIn);
return (
<div className={styles.dropdowncell}>
<Select
open
style={{ width: '100%' }}
className="glide-select"
value={value}
options={options}
getPopupContainer={() => document.getElementById('portal') || document.body}
onSelect={() => {
console.log('click');
}}
// did not emit
onChange={(value: string) => {
console.log('onChange', value);
if (value === null) return;
setValue(value);
onFinishedEditing({
...cell,
data: {
...cell.data,
value,
},
});
}}
/>
</div>
);
};
const renderer: CustomCellRenderer<DropdownCell> = {
isMatch: (c): c is DropdownCell => (c.data as any).kind === 'dropdown-cell',
draw: (args, cell) => {
const { ctx, theme, rect } = args;
const { value } = cell.data;
ctx.fillStyle = theme.textDark;
ctx.fillText(
value,
rect.x + theme.cellHorizontalPadding,
rect.y + rect.height / 2 + getMiddleCenterBias(ctx, theme),
);
return true;
},
provideEditor: () => ({
editor: Editor,
disablePadding: true,
deletedValue: (v) => ({
...v,
copyData: '',
data: {
...v.data,
value: '',
},
}),
}),
onPaste: (v, d) => ({
...d,
value: d.options.map((i) => i.value).includes(v) ? v : d.value,
}),
};
export default renderer;
try setting overlayClassName="click-outside-ignore"
on your Select.
but antd select do not support overlayClassName
props, FYI: https://ant.design/components/select/#Select-props
Sorry, popupclassname
On Thu, Sep 8, 2022 at 7:04 PM chenshy39 @.***> wrote:
but antd select do not support overlayClassName props, FYI: https://ant.design/components/select/#Select-props [image: image] https://user-images.githubusercontent.com/26213979/189256827-fc3f6e64-bb4e-4dbc-8446-0c478ed55865.png
— Reply to this email directly, view it on GitHub https://github.com/glideapps/glide-data-grid/issues/492#issuecomment-1241415465, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAHN27RV2ZVCVPEPPIIVTTV5KLMJANCNFSM6AAAAAAQHR2H5E . You are receiving this because you commented.Message ID: @.***>
Yes, it works!
Thanks a lot! 😭👍
Yup I really need to document that.
I tried to use antd Select component for custom cell render, but I found the dropdown item's click didn't work... I guess it maybe emit container's click event but not in the dropdown's
expect: 1. click the dropdown item 2. call onChange 3. emit onCellEdited event