@algoux/standard-ranklist-renderer-component-react 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 algoUX
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,77 @@
+# @algoux/standard-ranklist-renderer-component-react
+
+React components for rendering Standard Ranklist data.
+
+## Install
+
+```bash
+npm i -D @algoux/standard-ranklist
+npm i -S @algoux/standard-ranklist-renderer-component-react @algoux/standard-ranklist-renderer-component-core @algoux/standard-ranklist-renderer-component-styles
+```
+
+## Main Exports
+
+- `Ranklist`
+- `ProgressBar`
+- `Modal`
+- `DefaultUserModal`
+- `DefaultSolutionModal`
+- `MarkerLabel`
+
+## Usage
+
+Import the shared stylesheet once in your app entry. `Ranklist` expects a static ranklist, so convert an SRK ranklist before rendering. User/status cell clicks are emitted as semantic payloads; use those payloads to open the default modals or your own UI.
+
+```tsx
+import { useMemo, useState } from 'react';
+import { convertToStaticRanklist } from '@algoux/standard-ranklist-renderer-component-core';
+import {
+  DefaultSolutionModal,
+  DefaultUserModal,
+  ProgressBar,
+  Ranklist,
+  type SolutionClickPayload,
+  type UserClickPayload,
+} from '@algoux/standard-ranklist-renderer-component-react';
+import '@algoux/standard-ranklist-renderer-component-styles';
+
+function Board({ ranklist }) {
+  const staticRanklist = useMemo(() => convertToStaticRanklist(ranklist), [ranklist]);
+  const [activeUser, setActiveUser] = useState<UserClickPayload | null>(null);
+  const [activeSolution, setActiveSolution] = useState<SolutionClickPayload | null>(null);
+
+  return (
+    <>
+      <ProgressBar data={ranklist} enableTimeTravel onTimeTravel={(time) => console.log(time)} />
+      <Ranklist
+        data={staticRanklist}
+        stripedRows
+        onUserClick={(payload) => {
+          setActiveUser(payload);
+          setActiveSolution(null);
+        }}
+        onSolutionClick={(payload) => {
+          setActiveSolution(payload);
+          setActiveUser(null);
+        }}
+      />
+      <DefaultUserModal
+        open={!!activeUser}
+        user={activeUser?.user}
+        markers={staticRanklist.markers}
+        onClose={() => setActiveUser(null)}
+      />
+      <DefaultSolutionModal
+        open={!!activeSolution}
+        user={activeSolution?.user}
+        problem={activeSolution?.problem}
+        problemIndex={activeSolution?.problemIndex || 0}
+        solutions={activeSolution?.solutions || []}
+        onClose={() => setActiveSolution(null)}
+      />
+    </>
+  );
+}
+```
+
+Use `Modal` directly when you want custom modal content. `Ranklist` also accepts `parts` such as `userCell` and `statusCell` when you need to replace selected table cells while keeping the rest of the renderer.

package/dist/DefaultSolutionModal.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type * as srk from '@algoux/standard-ranklist';
+import { type ModalProps } from './Modal';
+export interface DefaultSolutionModalProps extends Pick<ModalProps, 'open' | 'onClose' | 'rootClassName' | 'wrapClassName' | 'style'> {
+    user?: srk.User | null;
+    problem?: srk.Problem;
+    problemIndex: number;
+    solutions: srk.Solution[];
+    title?: ReactNode;
+    width?: number;
+}
+export declare function DefaultSolutionModal({ open, user, problem, problemIndex, solutions, title, width, onClose, rootClassName, wrapClassName, style, }: DefaultSolutionModalProps): JSX.Element | null;

package/dist/DefaultUserModal.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type * as srk from '@algoux/standard-ranklist';
+import { EnumTheme } from '@algoux/standard-ranklist-utils';
+import { type ModalProps } from './Modal';
+export interface DefaultUserModalProps extends Pick<ModalProps, 'open' | 'onClose' | 'rootClassName' | 'wrapClassName' | 'style'> {
+    user?: srk.User | null;
+    markers?: srk.Marker[];
+    theme?: EnumTheme;
+    title?: ReactNode;
+    width?: number;
+    formatSrkAssetUrl?: (url: string, field: string) => string;
+}
+export declare function DefaultUserModal({ open, user, markers, theme, title, width, formatSrkAssetUrl, onClose, rootClassName, wrapClassName, style, }: DefaultUserModalProps): JSX.Element | null;

package/dist/MarkerLabel.d.ts

@@ -0,0 +1,9 @@
+import type * as srk from '@algoux/standard-ranklist';
+import { EnumTheme } from '@algoux/standard-ranklist-utils';
+export interface MarkerLabelProps {
+    marker: srk.Marker;
+    theme: EnumTheme;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function MarkerLabel(props: MarkerLabelProps): JSX.Element | null;

package/dist/Modal.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare type ModalCloseReason = 'mask' | 'close-button' | 'escape';
+export interface ModalProps {
+    open: boolean;
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    width?: number;
+    rootClassName?: string;
+    wrapClassName?: string;
+    style?: React.CSSProperties;
+    destroyOnClose?: boolean;
+    closeOnEsc?: boolean;
+    closeOnMaskClick?: boolean;
+    onClose?: (event: React.SyntheticEvent | Event, reason: ModalCloseReason) => void;
+}
+export declare function Modal({ open, title, children, width, rootClassName, wrapClassName, style, destroyOnClose, closeOnEsc, closeOnMaskClick, onClose, }: ModalProps): JSX.Element | null;

package/dist/ProgressBar.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import type * as srk from '@algoux/standard-ranklist';
+export interface ProgressBarProps {
+    data: srk.Ranklist;
+    /** Whether to enable time travel. */
+    enableTimeTravel?: boolean;
+    /** Whether to enable live progress bar. */
+    live?: boolean;
+    /**
+     * Used for correct time diff in live mode, calculated by `localTime - serverTime` in ms.
+     * @default 0
+     */
+    td?: number;
+    /**
+     * Called when time travel is entered and the time slider is moved.
+     * @param time The selected time in ms. `null` if time travel is exited.
+     */
+    onTimeTravel?(time: number | null): void | Promise<void>;
+}
+interface State {
+    localTime: number;
+    inTimeMachine: boolean;
+    timeTravelIsChanging: boolean;
+    timeTravelCurrentValue: number;
+    timeTravelValue: number | null;
+    isMounted: boolean;
+}
+export declare class ProgressBar extends React.Component<ProgressBarProps, State> {
+    private liveInterval;
+    static getDurationMinutes(contest: srk.Contest): number;
+    static getMaxAvailableMinutes(contest: srk.Contest, localTime: number, td?: number): number;
+    constructor(props: ProgressBarProps);
+    get durationMinutes(): number;
+    get maxAvailableMinutes(): number;
+    get isEnded(): boolean;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ProgressBarProps): void;
+    componentWillUnmount(): void;
+    handleProgressTimer: () => void;
+    handleTimeTravelChange: (value: number) => void;
+    beginTimeTravel: () => void;
+    handleSliderChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    commitTimeTravel: () => void;
+    handleSliderKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    handleSliderKeyUp: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    render(): JSX.Element;
+}
+export {};

package/dist/Ranklist.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import type * as srk from '@algoux/standard-ranklist';
+import { EnumTheme } from '@algoux/standard-ranklist-utils';
+import type { RankValue, SolutionClickPayload, StaticRanklist, UserClickPayload } from '@algoux/standard-ranklist-renderer-component-core';
+import type { ProblemHeaderCellProps } from './internal/ProblemHeaderCell';
+import type { StatusCellProps } from './internal/StatusCell';
+import type { UserCellProps } from './internal/UserCell';
+export type { RankValue, StaticRanklist } from '@algoux/standard-ranklist-renderer-component-core';
+export type { ProblemHeaderCellProps } from './internal/ProblemHeaderCell';
+export type { StatusCellProps } from './internal/StatusCell';
+export type { UserCellProps } from './internal/UserCell';
+export interface RanklistComponents {
+    problemHeaderCell: React.ComponentType<ProblemHeaderCellProps>;
+    userCell: React.ComponentType<UserCellProps>;
+    statusCell: React.ComponentType<StatusCellProps>;
+}
+export interface RanklistProps {
+    data: StaticRanklist;
+    /**
+     * Theme
+     * @defaultValue 'light'
+     */
+    theme?: EnumTheme;
+    /**
+     * Enable border between rows in the table.
+     * @defaultValue false
+     */
+    borderedRows?: boolean;
+    /**
+     * Enable striped rows style in the table.
+     * @defaultValue false
+     */
+    stripedRows?: boolean;
+    formatSrkAssetUrl?: (url: string, field: string) => string;
+    onUserClick?: (payload: UserClickPayload) => void | Promise<void>;
+    onSolutionClick?: (payload: SolutionClickPayload) => void | Promise<void>;
+    components?: Partial<RanklistComponents>;
+}
+interface State {
+    marker: string;
+    error: string | null;
+}
+export declare class Ranklist extends React.Component<RanklistProps, State> {
+    static defaultProps: Partial<RanklistProps>;
+    constructor(props: RanklistProps);
+    genExternalLink(link: string, children: React.ReactNode): JSX.Element;
+    formatSrkAssetUrl: (url: string, field: string) => string;
+    renderContestBanner: () => JSX.Element | null;
+    renderSingleSeriesBody: (rk: RankValue, series: srk.RankSeries, row: srk.RanklistRow) => JSX.Element;
+    render(): JSX.Element;
+}

package/dist/index.cjs

@@ -0,0 +1,8 @@
+"use strict";var H=Object.defineProperty;var J=(e,s,t)=>s in e?H(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t;var b=(e,s,t)=>(J(e,typeof s!="symbol"?s+"":s,t),t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@algoux/standard-ranklist-renderer-component-styles");var W=require("classnames"),Y=require("react"),d=require("@algoux/standard-ranklist-utils"),u=require("@algoux/standard-ranklist-renderer-component-core"),G=require("react-dom");function U(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var M=U(W),k=U(Y),Q=U(G),P={exports:{}},E={};/** @license React v16.14.0
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var X=k.default,B=60103;E.Fragment=60107;if(typeof Symbol=="function"&&Symbol.for){var L=Symbol.for;B=L("react.element"),E.Fragment=L("react.fragment")}var Z=X.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,ee=Object.prototype.hasOwnProperty,te={key:!0,ref:!0,__self:!0,__source:!0};function j(e,s,t){var a,n={},i=null,l=null;t!==void 0&&(i=""+t),s.key!==void 0&&(i=""+s.key),s.ref!==void 0&&(l=s.ref);for(a in s)ee.call(s,a)&&!te.hasOwnProperty(a)&&(n[a]=s[a]);if(e&&e.defaultProps)for(a in s=e.defaultProps,s)n[a]===void 0&&(n[a]=s[a]);return{$$typeof:B,type:e,key:i,ref:l,props:n,_owner:Z.current}}E.jsx=j;E.jsxs=j;P.exports=E;const r=P.exports.jsx,h=P.exports.jsxs,D=P.exports.Fragment;function re({problem:e,index:s,theme:t}){const a=e.alias?e.alias:d.numberToAlphabet(s),n=e.statistics,i=n?`${n.accepted} / ${n.submitted} (${n.submitted?(n.accepted/n.submitted*100).toFixed(1):0}%)`:"",l=h(D,{children:[r("span",{className:"srk--display-block",children:a}),n?r("span",{title:i,className:"srk--display-block srk-problem-stats",children:n.accepted}):null]}),o=e.link?r("a",{href:e.link,target:"_blank",rel:"noopener noreferrer",style:{color:"unset"},children:l}):l;return r("th",{className:"srk--nowrap srk-problem-header",style:{backgroundImage:u.getProblemHeaderBackgroundImage(e.style,t)},children:o},e.alias||d.resolveText(e.title))}function se({status:e,problem:s,problemIndex:t,user:a,row:n,rowIndex:i,ranklist:l,onSolutionClick:o}){const c=(s==null?void 0:s.alias)||d.resolveText(s==null?void 0:s.title)||t,T=d.resolveText(s==null?void 0:s.title)||null,m=[...e.solutions||[]].reverse(),g=m.length>0&&!!o,N=M.default("srk-prest-status-block srk--text-center srk--nowrap",{"srk--cursor-pointer":g}),v=g?y=>{y.preventDefault(),u.captureModalTriggerPointFromMouseEvent(y.nativeEvent,{source:"status-cell",context:{rowIndex:i,problemIndex:t,problemAlias:(s==null?void 0:s.alias)||null,problemTitle:T,userId:a.id||null}}),o==null||o({user:a,row:n,rowIndex:i,problemIndex:t,problem:s,status:e,solutions:m,ranklist:l})}:void 0;return e.result==="FB"?r("td",{onClick:v,className:M.default(N,"srk-prest-status-block-fb"),children:O(e)},c):e.result==="AC"?r("td",{onClick:v,className:M.default(N,"srk-prest-status-block-accepted"),children:O(e)},c):e.result==="?"?r("td",{onClick:v,className:M.default(N,"srk-prest-status-block-frozen"),children:e.tries},c):e.result==="RJ"?r("td",{onClick:v,className:M.default(N,"srk-prest-status-block-failed"),children:e.tries},c):r("td",{},c)}function O(e){const s=u.getAcceptedStatusDetails(e);return typeof e.score=="number"?h(D,{children:[r("span",{className:"srk-prest-status-block-score",children:e.score}),r("span",{className:"srk-prest-status-block-score-details",children:s})]}):r(D,{children:s})}function ae({user:e,row:s,rowIndex:t,ranklist:a,markers:n=[],theme:i,formatSrkAssetUrl:l,onUserClick:o}){const c=d.resolveUserMarkers(e,n),T=c.map(f=>u.getMarkerPresentation(f,i)),m=d.resolveText(e.name);return r("td",{className:M.default("srk--text-left srk--nowrap srk-user-cell",{"srk--cursor-pointer":!!o}),title:"",onClick:f=>{f.preventDefault(),u.captureModalTriggerPointFromMouseEvent(f.nativeEvent,{source:"user-cell",context:{rowIndex:t,userId:e.id||null,userName:m}}),o==null||o({user:e,row:s,rowIndex:t,ranklist:a})},children:h("div",{className:"srk-user-cell-content",children:[e.avatar&&r("div",{className:"srk-user-avatar",children:r("img",{src:l(e.avatar,"user.avatar"),alt:"User Avatar"})}),h("div",{className:"srk-user-body",children:[h("div",{className:"srk-user-name-row",children:[r("span",{className:"srk-user-name-text",title:m,children:m}),r("span",{className:"srk-marker-dot-group",children:T.map((f,g)=>r("span",{className:M.default("srk-marker srk-marker-dot srk--c-tooltip",f.className),style:f.style,"data-tooltip":d.resolveText(c[g].label)},c[g].id))})]}),!!e.organization&&r("p",{className:"srk-user-secondary-text srk--text-ellipsis",title:"",children:d.resolveText(e.organization)})]})]})})}class z extends k.default.Component{constructor(t){super(t);b(this,"formatSrkAssetUrl",(t,a)=>u.resolveSrkAssetUrl(t,a,this.props.formatSrkAssetUrl));b(this,"renderContestBanner",()=>{const t=this.props.data.contest.banner;if(!t)return null;let a="",n="";typeof t=="string"?a=t:(a=t.image,n=t.link);const i=r("img",{src:this.formatSrkAssetUrl(a,"contest.banner"),alt:"Contest Banner",className:"srk--full-width"});return n?this.genExternalLink(n,i):i});b(this,"renderSingleSeriesBody",(t,a,n)=>{const i=this.props.theme,l=t.rank?t.rank:n.user.official===!1?"\uFF0A":"",c=((a.segments||[])[t.segmentIndex||t.segmentIndex===0?t.segmentIndex:-1]||{}).style;let T="",m={[d.EnumTheme.light]:void 0,[d.EnumTheme.dark]:void 0},f={[d.EnumTheme.light]:void 0,[d.EnumTheme.dark]:void 0};if(typeof c=="string")T=`srk-preset-series-segment-${c}`;else if(c){const g=d.resolveStyle(c);m=g.textColor,f=g.backgroundColor}return r("td",{className:M.default("srk--text-right srk--nowrap",T),style:{color:m[i],backgroundColor:f[i]},children:l},a.title)});this.state={marker:"all",error:null}}genExternalLink(t,a){return r("a",{href:t,target:"_blank",rel:"noopener noreferrer",style:{color:"unset"},children:a})}render(){var y,w,C;const{error:t}=this.state;if(t)return r("div",{children:h("div",{className:"srk-error",children:[h("pre",{children:["Error: ",t]}),r("p",{children:"Please wait for data correction or refresh page"})]})});const{data:a,borderedRows:n,stripedRows:i}=this.props,{type:l,version:o,problems:c,series:T,rows:m}=a,f=((y=this.props.components)==null?void 0:y.problemHeaderCell)||re,g=((w=this.props.components)==null?void 0:w.userCell)||ae,N=((C=this.props.components)==null?void 0:C.statusCell)||se;if(l!=="general")return h("div",{children:['srk type "',l,'" is not supported']});if(!u.caniuse(o))return h("div",{children:['srk version "',o,'" is not supported (current supported: ',u.srkSupportedVersions,")"]});const v=u.shouldShowTimeColumn(m);return r(D,{children:r("div",{className:"srk-common-table srk-main",children:h("table",{className:M.default({"srk-table-row-bordered":n,"srk-table-row-striped":i}),children:[r("thead",{children:h("tr",{children:[T.map(p=>r("th",{className:"srk-series-header srk--text-right srk--nowrap",children:p.title},p.title)),r("th",{className:"srk--text-left srk--nowrap",children:"Name"}),r("th",{className:"srk--nowrap",children:"Score"}),v&&r("th",{className:"srk--nowrap",children:"Time"}),c.map((p,A)=>r(f,{problem:p,index:A,theme:this.props.theme},p.alias||d.resolveText(p.title)))]})}),r("tbody",{children:m.map((p,A)=>{p.rankValues||console.warn("Rank values is not provided, you may need to pass static ranklist data generated by `convertToStaticRanklist()`");const _=p.rankValues||T.map(R=>({rank:null,segmentIndex:null}));return h("tr",{children:[_.map((R,S)=>this.renderSingleSeriesBody(R,T[S],p)),r(g,{user:p.user,row:p,rowIndex:A,ranklist:a,markers:a.markers,theme:this.props.theme,formatSrkAssetUrl:this.formatSrkAssetUrl,onUserClick:this.props.onUserClick}),r("td",{className:"srk--text-right srk--nowrap",children:p.score.value}),v&&r("td",{className:"srk--text-right srk--nowrap",children:p.score.time?d.formatTimeDuration(p.score.time,"min",Math.floor):"-"}),p.statuses.map((R,S)=>r(N,{status:R,problem:c[S],problemIndex:S,user:p.user,row:p,rowIndex:A,ranklist:a,onSolutionClick:this.props.onSolutionClick},(c[S]||{}).alias||d.resolveText((c[S]||{}).title)||S))]},p.user.id||d.resolveText(p.user.name))})})]})})})}}b(z,"defaultProps",{theme:d.EnumTheme.light,borderedRows:!1,stripedRows:!1});class I extends k.default.Component{constructor(t){super(t);b(this,"liveInterval");b(this,"handleProgressTimer",()=>{const t=Date.now();this.setState({localTime:t}),this.isEnded&&window.clearInterval(this.liveInterval)});b(this,"handleTimeTravelChange",t=>{var n,i;let a=t>=this.durationMinutes||t>=this.maxAvailableMinutes;(i=(n=this.props).onTimeTravel)==null||i.call(n,a?null:t*60*1e3),this.setState({inTimeMachine:!a,timeTravelValue:a?null:t*60*1e3,timeTravelIsChanging:!1})});b(this,"beginTimeTravel",()=>{this.setState({timeTravelIsChanging:!0,inTimeMachine:!0})});b(this,"handleSliderChange",t=>{this.setState({timeTravelCurrentValue:Number(t.target.value)})});b(this,"commitTimeTravel",()=>{this.handleTimeTravelChange(this.state.timeTravelCurrentValue)});b(this,"handleSliderKeyDown",t=>{["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)&&this.beginTimeTravel()});b(this,"handleSliderKeyUp",t=>{["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)&&this.commitTimeTravel()});const a=Date.now();this.state={localTime:a,inTimeMachine:!1,timeTravelIsChanging:!1,timeTravelCurrentValue:I.getMaxAvailableMinutes(t.data.contest,a,t.td),timeTravelValue:null,isMounted:!1}}static getDurationMinutes(t){return u.getProgressDurationMinutes(t)}static getMaxAvailableMinutes(t,a,n){return u.getProgressMaxAvailableMinutes(t,a,n)}get durationMinutes(){return I.getDurationMinutes(this.props.data.contest)}get maxAvailableMinutes(){return I.getMaxAvailableMinutes(this.props.data.contest,this.state.localTime,this.props.td)}get isEnded(){return u.isProgressEnded(this.props.data.contest,this.state.localTime,this.props.td)}componentDidMount(){this.props.live&&(this.liveInterval=window.setInterval(()=>{this.handleProgressTimer()},1e3)),this.setState({isMounted:!0})}componentDidUpdate(t){var a,n,i,l,o,c;!this.props.live&&t.live&&this.liveInterval&&window.clearInterval(this.liveInterval),this.props.live&&!t.live&&(this.liveInterval=window.setInterval(()=>{this.handleProgressTimer()},1e3)),!this.state.timeTravelIsChanging&&this.state.timeTravelCurrentValue!==this.maxAvailableMinutes&&this.state.timeTravelValue===null&&this.setState({timeTravelCurrentValue:this.maxAvailableMinutes}),JSON.stringify((n=(a=this.props.data)==null?void 0:a.contest)==null?void 0:n.title)!==JSON.stringify((l=(i=t.data)==null?void 0:i.contest)==null?void 0:l.title)&&(this.setState({timeTravelIsChanging:!1,timeTravelCurrentValue:this.maxAvailableMinutes,timeTravelValue:null,inTimeMachine:!1}),(c=(o=this.props).onTimeTravel)==null||c.call(o,null))}componentWillUnmount(){this.liveInterval&&window.clearInterval(this.liveInterval)}render(){const{data:t,enableTimeTravel:a=!1,live:n=!1,td:i=0}=this.props,l=this.state.inTimeMachine,o=u.getProgressMetrics(t,this.state.localTime,i,this.state.timeTravelCurrentValue,l);return h("div",{className:"srk-progress-bar-container",children:[h("div",{className:"srk-progress-bar",children:[h("div",{className:"srk-progress-bar-body",children:[r("div",{className:"srk-progress-bar-segment srk-progress-bar-normal",style:{width:`${o.frozenBreakpoint*100}%`},children:r("div",{className:"srk-progress-bar-fill",style:{width:`${o.normalInnerPercent}%`}})}),r("div",{className:"srk-progress-bar-segment srk-progress-bar-frozen",style:{width:`${(1-o.frozenBreakpoint)*100}%`},children:r("div",{className:"srk-progress-bar-fill",style:{width:`${o.frozenInnerPercent}%`}})})]}),a&&o.supportRegen&&this.state.isMounted&&h("div",{className:"srk-progress-slider-layer",children:[this.state.timeTravelIsChanging&&r("div",{className:"srk-progress-slider-tooltip",style:{left:`${this.durationMinutes?this.state.timeTravelCurrentValue/this.durationMinutes*100:0}%`},children:d.secToTimeStr(this.state.timeTravelCurrentValue*60)}),r("input",{"aria-label":"Time Travel",className:"srk-progress-slider",max:this.durationMinutes,min:0,onBlur:()=>{this.state.timeTravelIsChanging&&this.commitTimeTravel()},onChange:this.handleSliderChange,onKeyDown:this.handleSliderKeyDown,onKeyUp:this.handleSliderKeyUp,onMouseDown:this.beginTimeTravel,onMouseUp:this.commitTimeTravel,onTouchEnd:this.commitTimeTravel,onTouchStart:this.beginTimeTravel,step:1,title:d.secToTimeStr(this.state.timeTravelCurrentValue*60),type:"range",value:this.state.timeTravelCurrentValue})]})]}),h("div",{className:"srk-progress-secondary-area",children:[h("div",{className:"srk-progress-secondary-area-left",style:n||l?{}:{display:"none"},children:["Elapsed: ",d.secToTimeStr(Math.round(o.elapsed/1e3))]}),r("div",{className:"srk-progress-secondary-area-center",children:this.state.inTimeMachine?r("div",{className:"srk-progress-time-machine-status",children:r("div",{className:"srk-progress-time-machine-text",children:"Time Travel Mode"})}):n&&!this.isEnded?r("div",{className:"srk-progress-live-text",children:"Live"}):r("div",{style:{visibility:"hidden"},children:"SRK"})}),h("div",{className:"srk-progress-secondary-area-right",style:n||l?{}:{display:"none"},children:["Remaining: ",d.secToTimeStr(Math.round(o.remaining/1e3))]})]})]})}}function K(e){if(!e.marker)return null;const{marker:s,theme:t}=e,a=u.getMarkerPresentation(s,t);return r("span",{className:M.default(a.className,e.className),style:{...a.style,...e.style},children:d.resolveText(s.label)})}let ne=0;const le=typeof window=="undefined"?k.default.useEffect:k.default.useLayoutEffect;function V({open:e,title:s,children:t,width:a,rootClassName:n,wrapClassName:i,style:l,destroyOnClose:o=!0,closeOnEsc:c=!0,closeOnMaskClick:T=!0,onClose:m}){const f=k.default.useRef(`srk-modal-title-${++ne}`),g=k.default.useRef(null),N=k.default.useRef(null),v=k.default.useRef(null),y=k.default.useRef(null),[w,C]=k.default.useState(e||!o),[p,A]=k.default.useState(e?"pre-open":"closing"),[_,R]=k.default.useState({x:0,y:0});k.default.useEffect(()=>{u.ensureModalInteractionTracker()},[]),k.default.useEffect(()=>()=>{N.current!==null&&window.clearTimeout(N.current),v.current!==null&&window.clearTimeout(v.current),u.unregisterModalFocusScope(y.current),y.current=null},[]),k.default.useEffect(()=>{if(N.current!==null&&(window.clearTimeout(N.current),N.current=null),v.current!==null&&(window.clearTimeout(v.current),v.current=null),e){C(!0),R({x:0,y:0}),A("pre-open");return}A("closing"),o&&w&&typeof window!="undefined"&&(N.current=window.setTimeout(()=>{C(!1)},u.MODAL_ANIMATION_DURATION_MS))},[o,w,e]),k.default.useEffect(()=>{if(!e||!w||p!=="pre-open")return;const x=u.resolveModalTransformOrigin(g.current);return R(x.origin),v.current=window.setTimeout(()=>{A("opening"),v.current=null},0),()=>{v.current!==null&&(window.clearTimeout(v.current),v.current=null)}},[p,w,e]);const S=e||o&&w;k.default.useEffect(()=>{if(!!S)return u.lockModalBodyScroll(),()=>{u.unlockModalBodyScroll()}},[S]);const F=k.default.useCallback(x=>{c&&(m==null||m(x,"escape"))},[c,m]);if(le(()=>{if(e&&w){y.current=u.registerModalFocusScope(g.current,{onEscape:c?F:void 0});return}!e&&y.current!==null&&(u.unregisterModalFocusScope(y.current),y.current=null)},[c,F,w,e]),!w&&o)return null;const q={...l,width:a?`${a}px`:l==null?void 0:l.width,["--srk-modal-origin-x"]:`${_.x}px`,["--srk-modal-origin-y"]:`${_.y}px`,["--srk-modal-max-width"]:a?`${a}px`:typeof(l==null?void 0:l.width)=="string"?l.width:void 0},$=h("div",{className:M.default("srk-modal-root",u.SRK_ANIMATED_MODAL_ROOT_CLASS,"srk-react-modal-root",n),"data-srk-modal-state":p,children:[r("div",{className:"srk-modal-mask"}),r("div",{className:M.default("srk-modal-wrap",i),tabIndex:-1,onMouseDown:x=>{T&&x.target===x.currentTarget&&(m==null||m(x,"mask"))},children:r("div",{"aria-labelledby":s?f.current:void 0,"aria-modal":"true",className:"srk-modal","data-srk-modal-panel":"true",ref:g,role:"dialog",style:q,tabIndex:-1,children:h("div",{className:"srk-modal-content",children:[r("button",{"aria-label":"Close",className:"srk-modal-close",type:"button",onClick:x=>m==null?void 0:m(x,"close-button"),children:r("span",{className:"srk-modal-close-x"})}),s!==void 0&&r("div",{className:"srk-modal-header",children:r("div",{className:"srk-modal-title",id:f.current,children:s})}),r("div",{className:"srk-modal-body",children:t})]})})})]});return typeof document=="undefined"?$:Q.default.createPortal($,document.body)}function ie({user:e,userMarkers:s,theme:t,formatSrkAssetUrl:a}){const n=!!e.teamMembers&&e.teamMembers.length>0;return h("div",{className:"srk-user-modal-info",children:[r("h3",{className:"srk-user-modal-info-user-name",children:d.resolveText(e.name)}),!!e.organization&&r("p",{className:"srk-user-modal-info-user-second-name",children:d.resolveText(e.organization)}),h("div",{className:"srk-user-modal-info-labels",children:[r("span",{className:"srk-user-modal-info-labels-label srk-user-modal-info-labels-label-preset-general",children:e.official===!1?"\uFF0A \u975E\u6B63\u5F0F\u53C2\u52A0\u8005":"\u6B63\u5F0F\u53C2\u52A0\u8005"}),s.map((i,l)=>r(K,{marker:i,theme:t,className:"srk-user-modal-info-labels-label"},l))]}),n&&r("div",{className:"srk-user-modal-info-team-members",children:e.teamMembers.map((i,l)=>h("span",{children:[l>0&&r("span",{className:"srk-user-modal-info-team-members-slash",children:" / "}),r("span",{children:d.resolveText(i.name)})]},d.resolveText(i.name)))}),e.photo&&r("div",{className:"srk-user-modal-info-photo",children:r("img",{src:a(e.photo,"user.photo"),alt:"User portrait",className:"srk-user-modal-info-photo-img"})})]})}function oe({open:e,user:s,markers:t=[],theme:a=d.EnumTheme.light,title:n="User Info",width:i=420,formatSrkAssetUrl:l,onClose:o,rootClassName:c="srk-general-modal-root",wrapClassName:T="srk-user-modal",style:m}){const[f,g]=k.default.useState(s||null);return k.default.useEffect(()=>{s&&g(s)},[s]),f?r(V,{open:e,onClose:o,rootClassName:c,style:m,title:n,width:i,wrapClassName:T,children:r(ie,{user:f,userMarkers:d.resolveUserMarkers(f,t),theme:a,formatSrkAssetUrl:(N,v)=>u.resolveSrkAssetUrl(N,v,l)})}):null}function ce({result:e}){const s=u.getSolutionResultMeta(e);return r("span",{className:M.default("srk-solution-result-text",s.className),children:s.label})}function de({solutions:e}){return h("table",{className:"srk-common-table srk-solutions-table",children:[r("thead",{children:h("tr",{children:[r("th",{className:"srk--text-left",children:"Result"}),r("th",{className:"srk--text-right",children:"Time"})]})}),r("tbody",{children:e.map((s,t)=>h("tr",{children:[r("td",{children:r(ce,{result:s.result})}),r("td",{className:"srk--text-right",children:u.formatSolutionTimestamp(s)})]},`${s.result}_${s.time[0]}_${t}`))})]})}function ue({open:e,user:s,problem:t,problemIndex:a,solutions:n,title:i,width:l=320,onClose:o,rootClassName:c="srk-general-modal-root",wrapClassName:T="srk-solutions-modal",style:m}){const[f,g]=k.default.useState(s?{user:s,problem:t,problemIndex:a,solutions:n}:null);return k.default.useEffect(()=>{s&&g({user:s,problem:t,problemIndex:a,solutions:n})},[t,a,n,s]),f?r(V,{open:e,onClose:o,rootClassName:c,style:m,title:i||u.getSolutionModalTitle(f.problemIndex,f.user),width:l,wrapClassName:T,children:r(de,{solutions:f.solutions})}):null}Object.defineProperty(exports,"convertToStaticRanklist",{enumerable:!0,get:function(){return d.convertToStaticRanklist}});Object.defineProperty(exports,"caniuse",{enumerable:!0,get:function(){return u.caniuse}});Object.defineProperty(exports,"srkSupportedVersions",{enumerable:!0,get:function(){return u.srkSupportedVersions}});exports.DefaultSolutionModal=ue;exports.DefaultUserModal=oe;exports.MarkerLabel=K;exports.Modal=V;exports.ProgressBar=I;exports.Ranklist=z;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './main';