d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Directive, Input, OnChanges, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
import { ReplaySubject } from 'rxjs';
import { mixinUnsubscribe, MixinBase, Constructor, ThyUnsubscribe } from 'ngx-tethys/core';
import { isString } from 'ngx-tethys/util';
import { useHostRenderer } from '@tethys/cdk/dom';

export type ThyRowJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
export type ThyRowAlign = 'top' | 'middle' | 'bottom';

const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);

/**
 * 栅格行指令
 * @name thyRow
 */
@Directive({
    selector: '[thyRow]',
    host: {
        class: 'thy-row'
    },
    standalone: true
})
export class ThyRowDirective extends _MixinBase implements OnInit, OnChanges, AfterViewInit, OnDestroy {
    /**
     * 栅格的间距
     */
    @Input() thyGutter: number | { xs?: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number };

    public actualGutter$ = new ReplaySubject<[number, number]>(1);

    private hostRenderer = useHostRenderer();

    constructor() {
        super();
    }

    ngOnInit() {
        this._setGutterStyle();
    }

    ngOnChanges() {
        this._setGutterStyle();
    }

    ngAfterViewInit(): void {}

    private _setGutterStyle() {
        const [horizontalGutter, verticalGutter] = this._getGutter();
        this.actualGutter$.next([horizontalGutter, verticalGutter]);
        const renderGutter = (name: string, gutter: number) => {
            this.hostRenderer.setStyle(name, `-${gutter / 2}px`);
        };
        if (horizontalGutter > 0) {
            renderGutter('margin-left', horizontalGutter);
            renderGutter('margin-right', horizontalGutter);
        }
        if (verticalGutter > 0) {
            renderGutter('margin-top', verticalGutter);
            renderGutter('margin-bottom', verticalGutter);
        }
    }

    private _getGutter() {
        if (isString(this.thyGutter)) {
            throw Error(`thyGutter value can not be string type`);
        }
        return [this.thyGutter as number, 0];
    }

    ngOnDestroy(): void {
        super.ngOnDestroy();
    }
}

1	import { Directive, Input, OnChanges, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
2	import { ReplaySubject } from 'rxjs';
3	import { mixinUnsubscribe, MixinBase, Constructor, ThyUnsubscribe } from 'ngx-tethys/core';
4	import { isString } from 'ngx-tethys/util';
5	import { useHostRenderer } from '@tethys/cdk/dom';
6
7	export type ThyRowJustify = 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between';	1✔
8	export type ThyRowAlign = 'top' \| 'middle' \| 'bottom';
9
10	const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);
11
12	/**	1✔
13	* 栅格行指令
14	* @name thyRow	×
15	*/	×
16	@Directive({	×
17	selector: '[thyRow]',
18	host: {
19	class: 'thy-row'	×
20	},
21	standalone: true
22	})	×
23	export class ThyRowDirective extends _MixinBase implements OnInit, OnChanges, AfterViewInit, OnDestroy {
24	/**
25	* 栅格的间距
26	*/	×
27	@Input() thyGutter: number \| { xs?: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number };	×
28		×
29	public actualGutter$ = new ReplaySubject<[number, number]>(1);	×
30
31	private hostRenderer = useHostRenderer();	×
32		×
33	constructor() {	×
34	super();
35	}	×
36		×
37	ngOnInit() {	×
38	this._setGutterStyle();
39	}
40
41	ngOnChanges() {	×
42	this._setGutterStyle();	×
43	}
44		×
45	ngAfterViewInit(): void {}
46
47	private _setGutterStyle() {	×
48	const [horizontalGutter, verticalGutter] = this._getGutter();
49	this.actualGutter$.next([horizontalGutter, verticalGutter]);	1✔
50	const renderGutter = (name: string, gutter: number) => {	1✔
51	this.hostRenderer.setStyle(name, `-${gutter / 2}px`);
52	};
53	if (horizontalGutter > 0) {
54	renderGutter('margin-left', horizontalGutter);	1✔
55	renderGutter('margin-right', horizontalGutter);
56	}
57	if (verticalGutter > 0) {
58	renderGutter('margin-top', verticalGutter);
59	renderGutter('margin-bottom', verticalGutter);
60	}
61	}
62
63	private _getGutter() {
64	if (isString(this.thyGutter)) {
65	throw Error(`thyGutter value can not be string type`);
66	}
67	return [this.thyGutter as number, 0];
68	}
69
70	ngOnDestroy(): void {
71	super.ngOnDestroy();
72	}
73	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous