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

fix(sheet): add focus change #1500

Merged
merged 4 commits into from
Mar 7, 2024
Merged

fix(sheet): add focus change #1500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ef377a1
fix(sheet): add focus change
DR-Univer Mar 7, 2024
a7317fe
fix(editor): review update and active callback
DR-Univer Mar 7, 2024
ef73d25
docs(editor): add comment
DR-Univer Mar 7, 2024
38a19d8
fix(editor): remove console
DR-Univer Mar 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 8 additions & 0 deletions examples/src/plugins/debugger/views/test-editor/TestTextEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,14 @@ export const TestEditorContainer = () => {

const sheetId = workbook.getActiveSheet().getSheetId();

// function onActive(state: boolean) {
// console.warn('active:', state);
// }
// onActive={onActive} onValid={onValid}
// function onValid(state: boolean) {
// console.warn('valid:', state);
// }

return (
<div
style={containerStyle}
Expand Down
16 changes: 10 additions & 6 deletions packages/ui/src/components/editor/TextEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const excludeProps = new Set([
'openForSheetUnitId',
'openForSheetSubUnitId',
'onChange',
'onFocus',
'onActive',
'onValid',
]);

Expand Down Expand Up @@ -74,7 +74,7 @@ export interface ITextEditorProps {

onChange?: (value: Nullable<string>) => void; // Callback for changes in the selector value.

onFocus?: (state: boolean) => void; // Callback for editor focus.
onActive?: (state: boolean) => void; // Callback for editor active.

onValid?: (state: boolean) => void; // Editor input value validation, currently effective only under onlyRange and onlyFormula conditions.

Expand All @@ -84,7 +84,7 @@ export interface ITextEditorProps {
* The component to render toolbar item label and menu item label.
* @param props
*/
export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onChange' | 'onFocus'>): JSX.Element | null {
export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onChange' | 'onActive'>): JSX.Element | null {
const {
id,
snapshot,
Expand All @@ -106,7 +106,7 @@ export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onC

onChange,

onFocus,
onActive,

onValid,
} = props;
Expand Down Expand Up @@ -158,13 +158,17 @@ export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onC
},
editor);

const activeChange = debounce((state: boolean) => {
setActive(state);
onActive && onActive(state);
}, 10);

const focusStyleSubscription = editorService.focusStyle$.subscribe((unitId: Nullable<string>) => {
let state = false;
if (unitId === id) {
state = true;
}
setActive(state);
onFocus && onFocus(state);
activeChange(state);
});

const valueChange = debounce((editor: Readonly<Editor>) => {
Expand Down
34 changes: 26 additions & 8 deletions packages/ui/src/components/range-selector/RangeSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,16 @@ export interface IRangeSelectorProps {
id: string;
value?: string; // default values.
onChange?: (ranges: IUnitRange[]) => void; // Callback for changes in the selector value.

onActive?: (state: boolean) => void; // Callback for editor active.
onValid?: (state: boolean) => void; // input value validation
isSingleChoice?: boolean; // Whether to restrict to only selecting a single region/area/district.

openForSheetUnitId?: Nullable<string>; // Configuring which workbook the selector defaults to opening in determines whether the ref includes a [unitId] prefix.
openForSheetSubUnitId?: Nullable<string>; // Configuring the default worksheet where the selector opens determines whether the ref includes a [unitId]sheet1 prefix.
}

export function RangeSelector(props: IRangeSelectorProps) {
const { onChange, id, value = '', isSingleChoice = false, openForSheetUnitId, openForSheetSubUnitId } = props;
const { onChange, id, value = '', onActive, onValid, isSingleChoice = false, openForSheetUnitId, openForSheetSubUnitId } = props;

const [rangeDataList, setRangeDataList] = useState<string[]>(['']);

Expand Down Expand Up @@ -87,8 +88,12 @@ export function RangeSelector(props: IRangeSelectorProps) {

const [rangeValue, setRangeValue] = useState(value);

const [currentInputIndex, setCurrentInputIndex] = useState<number>(-1);

const selectorRef = useRef<HTMLDivElement>(null);

const currentInputIndexRef = useRef<number>(-1);

useEffect(() => {
const selector = selectorRef.current;

Expand Down Expand Up @@ -117,10 +122,16 @@ export function RangeSelector(props: IRangeSelectorProps) {
}

const lastRange = ranges[ranges.length - 1];
const rangeRef = serializeRange(lastRange);
if (addItemCount >= 1 && !isSingleChoice) {
addNewItem(serializeRange(lastRange));
addNewItem(rangeRef);
setCurrentInputIndex(-1);
} else {
changeLastItem(serializeRange(lastRange));
if (currentInputIndexRef.current === -1) {
changeLastItem(rangeRef);
} else {
changeItem(currentInputIndexRef.current, rangeRef);
}
}
});

Expand All @@ -131,6 +142,10 @@ export function RangeSelector(props: IRangeSelectorProps) {
};
}, []);

useEffect(() => {
currentInputIndexRef.current = currentInputIndex;
}, [currentInputIndex]);

function handleCloseModal() {
setSelectorVisible(false);
rangeSelectorService.setCurrentSelectorId(null);
Expand All @@ -148,12 +163,14 @@ export function RangeSelector(props: IRangeSelectorProps) {
setSelectorVisible(true);
}

function onFocus(state: boolean) {
function onEditorActive(state: boolean) {
setActive(state);
onActive && onActive(state);
}

function onValid(state: boolean) {
function onEditorValid(state: boolean) {
setValid(state);
onValid && onValid(state);
}

function handleConform() {
Expand All @@ -177,6 +194,7 @@ export function RangeSelector(props: IRangeSelectorProps) {

function handleAddRange() {
addNewItem('');
setCurrentInputIndex(-1);
}

function getSheetIdByName(name: string) {
Expand Down Expand Up @@ -207,7 +225,7 @@ export function RangeSelector(props: IRangeSelectorProps) {
return (
<>
<div className={sClassName} ref={selectorRef}>
<TextEditor isSingleChoice={isSingleChoice} openForSheetUnitId={openForSheetUnitId} openForSheetSubUnitId={openForSheetSubUnitId} onValid={onValid} onFocus={onFocus} onChange={handleTextValueChange} id={id} onlyInputRange={true} canvasStyle={{ fontSize: 10 }} className={styles.rangeSelectorEditor} />
<TextEditor isSingleChoice={isSingleChoice} openForSheetUnitId={openForSheetUnitId} openForSheetSubUnitId={openForSheetSubUnitId} onValid={onEditorValid} onActive={onEditorActive} onChange={handleTextValueChange} id={id} onlyInputRange={true} canvasStyle={{ fontSize: 10 }} className={styles.rangeSelectorEditor} />
<Tooltip title={localeService.t('rangeSelector.buttonTooltip')} placement="bottom">
<button className={styles.rangeSelectorIcon} onClick={handleOpenModal}>
<SelectRangeSingle />
Expand All @@ -233,7 +251,7 @@ export function RangeSelector(props: IRangeSelectorProps) {
{rangeDataList.map((item, index) => (
<div key={index} className={styles.rangeSelectorModalContainer}>
<div style={{ display: rangeDataList.length === 1 ? '220px' : '200px' }} className={styles.rangeSelectorModalContainerInput}>
<Input size="small" value={item} onChange={(value) => changeItem(index, value)} />
<Input key={`input${index}`} onClick={() => setCurrentInputIndex(index)} size="small" value={item} onChange={(value) => changeItem(index, value)} />
</div>
<div style={{ display: rangeDataList.length === 1 ? 'none' : 'inline-block' }} className={styles.rangeSelectorModalContainerButton}>
<DeleteSingle onClick={() => removeItem(index)} />
Expand Down