How to use the @uifabric/utilities.format function in @uifabric/utilities

To help you get started, we’ve selected a few @uifabric/utilities examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github microsoft / azpipelines-kubernetesUI / src / WebUI / Components / PodListComponent.tsx View on Github external
private _getReplicaSetDescription(): JSX.Element | null {
        if (this.props.replicaSet.metadata
            && this.props.replicaSet.metadata.creationTimestamp) {
            let des = "";
            const imageName = Utils.getPodImageName(this.props.replicaSet.spec && this.props.replicaSet.spec.template);
            if (imageName) {
                des = format(Resources.AgoBy, imageName)
            }

            return (
                <div>
                    {/* todo :: not good for localization */}
                    <span>{Resources.Created} </span>
                    
                    <span>{des}</span>
                </div>
            );
        }

        return null;
    }
github microsoft / azpipelines-kubernetesUI / src / WebUI / Components / DeploymentListComponent.tsx View on Github external
private _onRenderItemColumn(deployment?: IDeployment, index?: number, column?: IColumn): React.ReactNode {
        if (!deployment || !column) {
            return null;
        }

        let textToRender: string = "";
        switch (column.key) {
            case deploymentNameKey:
                textToRender = deployment.name;
                break;

            case deploymentReplicasKey:
                if (deployment.replicas && deployment.readyReplicas) {
                    textToRender = format("{0} / {1}", deployment.readyReplicas, deployment.replicas);
                }

                break;

            case deploymentStrategyKey:
                textToRender = deployment.strategy;
                break;
        }

        return ListComponent.renderColumn(textToRender, ListComponent.defaultColumnRenderer, "ddl-col-data");
    }
}
github microsoft / azpipelines-kubernetesUI / src / WebUI / WorkLoads / StatefulSetTable.tsx View on Github external
private static _renderPodsCountCell(rowIndex: number, columnIndex: number, tableColumn: ITableColumn, statefulSet: V1StatefulSet): JSX.Element {
        let statusProps: IStatusProps | undefined;
        let podString: string = "";
        if (statefulSet.status.replicas &gt; 0) {
            statusProps = Utils._getPodsStatusProps(statefulSet.status.currentReplicas, statefulSet.status.replicas);
            podString = format("{0}/{1}", statefulSet.status.currentReplicas, statefulSet.status.replicas);
        }

        const itemToRender = (
            
        );
        return BaseKubeTable.renderTableCell(rowIndex, columnIndex, tableColumn, itemToRender);
    }
github microsoft / azpipelines-kubernetesUI / src / WebUI / Components / PodListComponent.tsx View on Github external
private _getReplicaSetHeadingContent(): JSX.Element {
        const replicaSetHeading = format(Resources.ReplicaSet, this.props.replicaSet.metadata.name);

        return (
            <div>
                <div>{replicaSetHeading}</div>
                {this._getReplicaSetDescription()}
                {this._getReplicaSetLabels()}
            </div>
        );
    }
github microsoft / azpipelines-kubernetesUI / src / WebUI / Components / ReplicasetListComponent.tsx View on Github external
private _getMainHeading(): JSX.Element | null {
        if (this.props.deployment &amp;&amp; this.props.deployment.metadata) {
            const deploymentHeading = format(Resources.Deployment, this.props.deployment.metadata.name);
            return (
                <div>
                    <h2>{deploymentHeading}</h2>
                    {this._getDeploymentLabels()}
                </div>
            );
        }
        return null;
    }
github OfficeDev / office-ui-fabric-react / packages / date-time / src / components / CalendarDayGrid / CalendarDayGrid.base.tsx View on Github external
private renderRow = (
    classNames: IProcessedStyleSet,
    week: IDayInfo[],
    weekIndex: number,
    weekCorners?: IWeekCorners,
    rowClassName?: string,
    ariaRole?: string,
    ariaHidden?: boolean
  ): JSX.Element =&gt; {
    const { showWeekNumbers, firstDayOfWeek, firstWeekOfYear, navigatedDate, strings } = this.props;
    const { weeks } = this.state;
    const weekNumbers = showWeekNumbers ? getWeekNumbersInMonth(weeks!.length, firstDayOfWeek, firstWeekOfYear, navigatedDate) : null;

    const titleString = weekNumbers ? strings.weekNumberFormatString &amp;&amp; format(strings.weekNumberFormatString, weekNumbers[weekIndex]) : '';

    return (
      
        {showWeekNumbers &amp;&amp; weekNumbers &amp;&amp; (
          
            <span>{weekNumbers[weekIndex]}</span>
          
        )}
        {week.map((day: IDayInfo, dayIndex: number) =&gt; this.renderDayCells(classNames, day, dayIndex, weekIndex, weekCorners, ariaHidden))}
      
    );
  };
github OfficeDev / office-ui-fabric-react / packages / date-time / src / components / Calendar / Calendar.base.tsx View on Github external
isMonthPickerVisible: isMonthPickerVisible,
      isDayPickerVisible: isDayPickerVisible,
      monthPickerOnly: monthPickerOnly,
      showMonthPickerAsOverlay: showMonthPickerAsOverlay,
      overlayedWithButton: overlayedWithButton,
      showGoToToday: showGoToToday,
      showWeekNumbers: showWeekNumbers
    });

    let todayDateString: string = '';
    let selectedDateString: string = '';
    if (dateTimeFormatter &amp;&amp; strings!.todayDateFormatString) {
      todayDateString = format(strings!.todayDateFormatString, dateTimeFormatter.formatMonthDayYear(today!, strings!));
    }
    if (dateTimeFormatter &amp;&amp; strings!.selectedDateFormatString) {
      selectedDateString = format(strings!.selectedDateFormatString, dateTimeFormatter.formatMonthDayYear(selectedDate!, strings!));
    }
    const selectionAndTodayString = selectedDateString + ', ' + todayDateString;

    return (
      <div aria-label="{selectionAndTodayString}">
        <div aria-atomic="true" aria-live="polite">
          <span>{selectedDateString}</span>
        </div>
        {isDayPickerVisible &amp;&amp; (
          </div>
github microsoft / azpipelines-kubernetesUI / src / WebUI / WorkLoads / DeploymentsTable.tsx View on Github external
DeploymentsTable._generateDeploymentReplicaSetMap(filteredDeployments, this.state.replicaSetList).forEach((entry, index) =&gt; {
            const items = DeploymentsTable._getDeploymentReplicaSetItems(entry.deployment, entry.replicaSets);
            const key = format("workloads-d-t-{0}", index);
            const deploymentCard = (
                
                    
                        
                            
                                
                            
                            {Resources.DeploymentText}