@douyinfe/semi-foundation 2.70.1 → 2.71.0-alpha.3

package/cascader/constants.ts

@@ -18,6 +18,8 @@ const strings = {
     NONE_MERGE_TYPE: 'none',
     SEARCH_POSITION_TRIGGER: 'trigger',
     SEARCH_POSITION_CUSTOM: 'custom',
+    RELATED: 'related',
+    UN_RELATED: 'unRelated'
 } as const;
 
 const numbers = {};

package/cascader/foundation.ts

@@ -168,6 +168,7 @@ export interface BasicCascaderProps {
     enableLeafClick?: boolean;
     preventScroll?: boolean;
     virtualizeInSearch?: Virtualize;
+    checkRelation?: string;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -591,7 +592,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         }
     }
 
-    updateSearching = (isSearching: boolean)=>{
+    updateSearching = (isSearching: boolean) => {
         this._adapter.updateStates({ isSearching: false });
     }
 
@@ -772,6 +773,16 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     }
 
     _handleMultipleSelect(item: BasicEntity | BasicData) {
+        const { checkRelation } = this.getProps();
+        if (checkRelation === strings.RELATED) {
+            this._handleRelatedMultipleSelect(item);
+        } else if (checkRelation === 'unRelated') {
+            this._handleUnRelatedMultipleSelect(item);
+        }
+        this._adapter.updateStates({ inputValue: '' });
+    }
+
+    _handleRelatedMultipleSelect(item: BasicEntity | BasicData) {
         const { key } = item;
         const { checkedKeys, keyEntities, resolvedCheckedKeys } = this.getStates();
         const { autoMergeValue, max, disableStrictly, leafOnly } = this.getProps();
@@ -837,8 +848,44 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         if (curCheckedStatus) {
             this._notifySelect(curRealCheckedKeys);
         }
+    }
 
-        this._adapter.updateStates({ inputValue: '' });
+    _handleUnRelatedMultipleSelect(item: BasicEntity | BasicData) {
+        const { key } = item;
+        const { checkedKeys, keyEntities } = this.getStates();
+        const { max } = this.getProps();
+        const newCheckedKeys: Set<string> = new Set(checkedKeys);
+        let targetStatus: boolean;
+        const prevCheckedStatus = checkedKeys.has(key);
+        if (prevCheckedStatus) {
+            newCheckedKeys.delete(key);
+            targetStatus = false;
+        } else {
+            // 查看是否超出 max
+            if (isNumber(max)) {
+                if (checkedKeys.size >= max) {
+                    const checkedEntities: BasicEntity[] = [];
+                    checkedKeys.forEach(itemKey => {
+                        checkedEntities.push(keyEntities[itemKey]);
+                    });
+                    this._adapter.notifyOnExceed(checkedEntities);
+                    return;
+                }
+            }
+            newCheckedKeys.add(key);
+            targetStatus = true;
+        }
+        if (!this._isControlledComponent()) {
+            this._adapter.updateStates({
+                checkedKeys: newCheckedKeys,
+            });
+        }
+
+        this._notifyChange(newCheckedKeys);
+
+        if (targetStatus) {
+            this._notifySelect(newCheckedKeys);
+        }
     }
 
     calcNonDisabledCheckedKeys(eventKey: string, targetStatus: boolean) {

package/dragMove/foundation.ts

@@ -0,0 +1,194 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+
+export function clampValueInRange(value: number, min: number, max: number) {
+    return Math.min(Math.max(value, min), max);
+}
+
+export interface DragMoveAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getDragElement: () => HTMLElement;
+    getConstrainer: () => HTMLElement | null;
+    getHandler: () => HTMLElement;
+    notifyMouseDown?: (e: MouseEvent) => void;
+    notifyMouseMove?: (e: MouseEvent) => void;
+    notifyMouseUp?: (e: MouseEvent) => void;
+    notifyTouchStart?: (e: TouchEvent) => void;
+    notifyTouchMove?: (e: TouchEvent) => void;
+    notifyTouchEnd?: (e: TouchEvent) => void;
+    notifyTouchCancel?: (e: TouchEvent) => void
+}
+
+export default class DragMoveFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<DragMoveAdapter<P, S>, P, S> {
+    element: HTMLElement;
+    xMax: number;
+    xMin: number;
+    yMax: number;
+    yMin: number;
+    startOffsetX: number;
+    startOffsetY: number;
+
+    get constrainer() {
+        return this._adapter.getConstrainer();
+    }
+
+    get handler() {
+        return this._adapter.getHandler();
+    }
+    
+    constructor(adapter: DragMoveAdapter<P, S>) {
+        super({ ...adapter });
+    }
+
+    init() {
+        const element = this._adapter.getDragElement();
+        if (!element) {
+            throw new Error('drag element must be a valid element');
+        }
+        this.element = element;
+        this.element.style.position = 'absolute';
+        this.handler.style.cursor = 'move';
+    }
+
+    destroy() {
+        this._unRegisterEvent();
+    }
+
+    _registerDocMouseEvent = () => {
+        document.addEventListener('mousemove', this._onMouseMove);
+        document.addEventListener('mouseup', this._onMouseUp);
+    }
+
+    _unRegisterDocMouseEvent = () => {
+        document.removeEventListener('mousemove', this._onMouseMove);
+        document.removeEventListener('mouseup', this._onMouseUp);
+    }
+
+    _registerDocTouchEvent = () => {
+        document.addEventListener('touchend', this._onTouchEnd);
+        document.addEventListener('touchmove', this._onTouchMove);
+        document.addEventListener('touchcancel', this._onTouchCancel);
+    }
+
+    _unRegisterDocTouchEvent = () => {
+        document.removeEventListener('touchend', this._onTouchEnd);
+        document.removeEventListener('touchmove', this._onTouchMove);
+        document.removeEventListener('touchcancel', this._onTouchCancel);
+    }
+
+    _unRegisterEvent() {
+        this._unRegisterDocMouseEvent();
+
+        this._unRegisterDocTouchEvent();
+    }
+
+    _calcMoveRange() {
+        // Calculate the range within which an element can move
+        if (this.constrainer) {
+            let node = this.element.offsetParent as HTMLElement;
+            let startX = 0;
+            let startY = 0;
+            while (node !== this.constrainer && node !== null) {
+                startX -= node.offsetLeft;
+                startY -= node.offsetTop;
+                node = node.offsetParent as any;
+            }
+            this.xMin = startX;
+            this.xMax = startX + this.constrainer.offsetWidth - this.element.offsetWidth;
+            this.yMin = startY;
+            this.yMax = startY + this.constrainer.offsetHeight - this.element.offsetHeight;
+        }
+    }
+
+    _allowMove(e: MouseEvent | TouchEvent) {
+        const { allowMove, allowInputDrag } = this.getProps();
+        // When the clicked object is an input or textarea, clicking should be allowed but dragging should not be allowed.
+        if (!allowInputDrag) {
+            let target = (e.target as HTMLElement).tagName.toLowerCase();
+            if (target === 'input' || target === 'textarea') {
+                return;
+            }
+        }
+        if (allowMove) {
+            return allowMove(e, this.element);
+        }
+        return true;
+    }
+
+    _calcOffset = (e: Touch | MouseEvent) => {
+        this.startOffsetX = e.clientX - this.element.offsetLeft;
+        this.startOffsetY = e.clientY - this.element.offsetTop;
+    }
+
+    _preventDefault = (e: MouseEvent | TouchEvent) => {
+        // prevent default behavior, avoid other element(like img, text) be selected
+        e.preventDefault();
+    }
+
+    onMouseDown = (e: MouseEvent) => {
+        this._calcMoveRange();
+        this._adapter.notifyMouseDown(e);
+        if (!this._allowMove(e)) {
+            return;
+        }
+        this._registerDocMouseEvent();
+        // store origin offset
+        this._calcOffset(e);
+        this._preventDefault(e);
+    }
+
+    onTouchStart = (e: TouchEvent) => {
+        this._calcMoveRange();
+        this._adapter.notifyTouchStart(e);
+        if (!this._allowMove(e)) {
+            return;
+        }
+        this._registerDocTouchEvent();
+        const touch = e.targetTouches[0];
+        this._calcOffset(touch);
+        this._preventDefault(e);
+    }
+
+    _changePos = (e: Touch | MouseEvent) => {
+        const { customMove } = this.getProps();
+        let newLeft = e.clientX - this.startOffsetX;
+        let newTop = e.clientY - this.startOffsetY;
+        if (this.constrainer) {
+            newLeft = clampValueInRange(newLeft, this.xMin, this.xMax);
+            newTop = clampValueInRange(newTop, this.yMin, this.yMax); 
+        }
+
+        requestAnimationFrame(() => {
+            if (customMove) {
+                customMove(this.element, newTop, newLeft);
+                return;
+            }
+            this.element.style.top = newTop + 'px';
+            this.element.style.left = newLeft + 'px';
+        }); 
+    }
+
+    _onMouseMove = (e: MouseEvent) => {
+        this._adapter.notifyMouseMove(e);
+        this._changePos(e); 
+    }
+
+    _onTouchMove = (e: TouchEvent) => {
+        this._adapter.notifyTouchMove(e);
+        const touch = e.targetTouches[0];
+        this._changePos(touch);
+    }
+
+    _onMouseUp = (e: MouseEvent) => {
+        this._adapter.notifyMouseUp(e);
+        this._unRegisterDocMouseEvent();
+    }
+
+    _onTouchEnd = (e: TouchEvent) => {
+        this._adapter.notifyTouchEnd(e);
+        this._unRegisterDocTouchEvent();
+    }
+
+    _onTouchCancel = (e: TouchEvent) => {
+        this._adapter.notifyTouchCancel(e);
+        this._unRegisterDocTouchEvent();
+    }
+}

package/highlight/foundation.ts

@@ -0,0 +1,211 @@
+// Modified version based on 'highlight-words-core'
+import { isString } from 'lodash';
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+
+interface HighlightAdapter extends Partial<DefaultAdapter> {}
+
+interface ChunkQuery {
+    autoEscape?: boolean;
+    caseSensitive?: boolean;
+    searchWords: SearchWords;
+    sourceString: string
+}
+export interface Chunk {
+    start: number;
+    end: number;
+    highlight: boolean;
+    className: string;
+    style: Record<string, string>
+}
+
+export interface ComplexSearchWord {
+    text: string;
+    className?: string;
+    style?: Record<string, string>
+}
+
+export type SearchWord = string | ComplexSearchWord | undefined;
+export type SearchWords = SearchWord[];
+
+const escapeRegExpFn = (string: string) => string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+
+export default class HighlightFoundation extends BaseFoundation<HighlightAdapter> {
+
+    constructor(adapter?: HighlightAdapter) {
+        super({
+            ...adapter,
+        });
+    }
+
+    /**
+     * Creates an array of chunk objects representing both higlightable and non highlightable pieces of text that match each search word.
+     *
+        findAll ['z'], 'aaazaaazaaa'
+            result #=> [
+                { start: 0, end: 3, highlight: false }
+                { start: 3, end: 4, highlight: true }
+                { start: 4, end: 7, highlight: false }
+                { start: 7, end: 8, highlight: true }
+                { start: 8, end: 11, highlight: false }
+            ]
+
+        findAll ['do', 'dollar'], 'aaa do dollar aaa'
+            #=> chunks: [
+                    { start: 4, end: 6 },
+                    { start: 7, end: 9 },
+                    { start: 7, end: 13 },
+                ]
+            #=> chunksToHight: [
+                    { start: 4, end: 6 },
+                    { start: 7, end: 13 },
+                ]
+            #=> result: [
+                    { start: 0, end: 4, highlight: false },
+                    { start: 4, end: 6, highlight: true },
+                    { start: 6, end: 7, highlight: false },
+                    { start: 7, end: 13, highlight: true },
+                    { start: 13, end: 17, highlight: false },
+                ]
+
+    * @return Array of "chunks" (where a Chunk is { start:number, end:number, highlight:boolean })
+    */
+    findAll = ({
+        autoEscape = true,
+        caseSensitive = false,
+        searchWords,
+        sourceString
+    }: ChunkQuery) => {
+        if (isString(searchWords)) {
+            searchWords = [searchWords];
+        }
+
+        const chunks = this.findChunks({
+            autoEscape,
+            caseSensitive,
+            searchWords,
+            sourceString
+        });
+        const chunksToHighlight = this.combineChunks({ chunks });
+        const result = this.fillInChunks({
+            chunksToHighlight,
+            totalLength: sourceString ? sourceString.length : 0
+        });
+        return result;
+    };
+
+    /**
+        * Examine text for any matches.
+        * If we find matches, add them to the returned array as a "chunk" object ({start:number, end:number}).
+        * @return { start:number, end:number }[]
+    */
+    findChunks = ({
+        autoEscape,
+        caseSensitive,
+        searchWords,
+        sourceString
+    }: ChunkQuery): Chunk[] => (
+        searchWords
+            .map(searchWord => typeof searchWord === 'string' ? { text: searchWord } : searchWord)
+            .filter(searchWord => searchWord.text) // Remove empty words
+            .reduce((chunks, searchWord) => {
+                let searchText = searchWord.text;
+                if (autoEscape) {
+                    searchText = escapeRegExpFn(searchText);
+                }
+                const regex = new RegExp(searchText, caseSensitive ? 'g' : 'gi');
+
+                let match;
+                while ((match = regex.exec(sourceString))) {
+                    const start = match.index;
+                    const end = regex.lastIndex;
+                    if (end > start) {
+                        chunks.push({ 
+                            highlight: true, 
+                            start, 
+                            end, 
+                            className: searchWord.className,
+                            style: searchWord.style
+                        });
+                    }
+                    if (match.index === regex.lastIndex) {
+                        regex.lastIndex++;
+                    }
+                }
+                return chunks;
+            }, [])
+    );
+
+    /**
+   * Takes an array of {start:number, end:number} objects and combines chunks that overlap into single chunks.
+   * @return {start:number, end:number}[]
+   */
+    combineChunks = ({ chunks }: { chunks: Chunk[] }): Chunk[] => {
+        return chunks
+            .sort((first, second) => first.start - second.start)
+            .reduce((processedChunks, nextChunk) => {
+            // First chunk just goes straight in the array...
+                if (processedChunks.length === 0) {
+                    return [nextChunk];
+                } else {
+                // ... subsequent chunks get checked to see if they overlap...
+                    const prevChunk = processedChunks.pop();
+                    if (nextChunk.start <= prevChunk.end) {
+                    // It may be the case that prevChunk completely surrounds nextChunk, so take the
+                    // largest of the end indeces.
+                        const endIndex = Math.max(prevChunk.end, nextChunk.end);
+                        processedChunks.push({
+                            highlight: true,
+                            start: prevChunk.start,
+                            end: endIndex,
+                            className: prevChunk.className || nextChunk.className,
+                            style: { ...prevChunk.style, ...nextChunk.style }
+                        });
+                    } else {
+                        processedChunks.push(prevChunk, nextChunk);
+                    }
+                    return processedChunks;
+                }
+            }, []);
+    };
+
+    /**
+   * Given a set of chunks to highlight, create an additional set of chunks
+   * to represent the bits of text between the highlighted text.
+   * @param chunksToHighlight {start:number, end:number}[]
+   * @param totalLength number
+   * @return {start:number, end:number, highlight:boolean}[]
+   */
+    fillInChunks = ({ chunksToHighlight, totalLength }: { chunksToHighlight: Chunk[]; totalLength: number }): Chunk[] => {
+        const allChunks: Chunk[] = [];
+        const append = (start: number, end: number, highlight: boolean, className?: string, style?: Record<string, string>) => {
+            if (end - start > 0) {
+                allChunks.push({
+                    start,
+                    end,
+                    highlight,
+                    className,
+                    style
+                });
+            }
+        };
+
+        if (chunksToHighlight.length === 0) {
+            append(0, totalLength, false);
+        } else {
+            let lastIndex = 0;
+            chunksToHighlight.forEach(chunk => {
+                append(lastIndex, chunk.start, false);
+                append(chunk.start, chunk.end, true, chunk.className, chunk.style);
+                lastIndex = chunk.end;
+            });
+            append(lastIndex, totalLength, false);
+        }
+        return allChunks;
+    };
+
+}
+
+
+
+
+

package/jsonViewer/constants.ts

@@ -0,0 +1,7 @@
+import { BASE_CLASS_PREFIX } from "../base/constants";
+
+const cssClasses = {
+    PREFIX: `${BASE_CLASS_PREFIX}-json-viewer`,
+} as const;
+
+export { cssClasses };

package/jsonViewer/foundation.ts

@@ -0,0 +1,72 @@
+
+import { JsonViewer, JsonViewerOptions } from '@douyinfe/semi-json-viewer-core';
+import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation';
+
+export type { JsonViewerOptions };
+export interface JsonViewerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getEditorRef: () => HTMLElement;
+    getSearchRef: () => HTMLInputElement;
+    notifyChange: (value: string) => void;
+    notifyHover: (value: string, el: HTMLElement) => HTMLElement | undefined;
+    setSearchOptions: (key: string) => void;
+    showSearchBar: () => void
+}
+
+class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
+    constructor(adapter: JsonViewerAdapter) {
+        super({ ...JsonViewerFoundation, ...adapter });
+    }
+
+    jsonViewer: JsonViewer | null = null;
+
+    init() {
+        const props = this.getProps();
+        const editorRef = this._adapter.getEditorRef();
+        this.jsonViewer = new JsonViewer(editorRef, props.value, props.options);
+        this.jsonViewer.layout();
+        this.jsonViewer.emitter.on('contentChanged', (e) => {
+            this._adapter.notifyChange(this.jsonViewer?.getModel().getValue());
+            if (this.getState('showSearchBar')) {
+                this.search(this._adapter.getSearchRef().value);
+            }
+        });
+        this.jsonViewer.emitter.on('hoverNode', (e) => {
+            const el = this._adapter.notifyHover(e.value, e.target);
+            if (el) {
+                this.jsonViewer.emitter.emit('renderHoverNode', { el });
+            }
+        });
+    }
+
+    search(searchText: string) {
+        const state = this.getState('searchOptions');
+        const { caseSensitive, wholeWord, regex } = state;
+        this.jsonViewer?.getSearchWidget().search(searchText, caseSensitive, wholeWord, regex);
+    }
+
+    prevSearch() {
+        this.jsonViewer?.getSearchWidget().navigateResults(-1);
+    }
+
+    nextSearch() {
+        this.jsonViewer?.getSearchWidget().navigateResults(1);
+    }
+
+    replace(replaceText: string) {
+        this.jsonViewer?.getSearchWidget().replace(replaceText);
+    }
+
+    replaceAll(replaceText: string) {
+        this.jsonViewer?.getSearchWidget().replaceAll(replaceText);
+    }
+
+    setSearchOptions(key: string) {
+        this._adapter.setSearchOptions(key);
+    }
+
+    showSearchBar() {
+        this._adapter.showSearchBar();
+    }
+}
+
+export default JsonViewerFoundation;