@lobehub/ui/es/CodeDiff/CodeDiff.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"CodeDiff.mjs","names":["Flexbox","MaterialFileTypeIcon"],"sources":["../../src/CodeDiff/CodeDiff.tsx"],"sourcesContent":["'use client';\n\nimport type { FileDiffOptions } from '@pierre/diffs';\nimport { MultiFileDiff } from '@pierre/diffs/react';\nimport { cx } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\n\nimport { headerVariants, prefix, styles, variants } from './style';\nimport type { CodeDiffProps } from './type';\n\nconst countContentChanges = (\n  oldContent: string,\n  newContent: string,\n): { additions: number; deletions: number } => {\n  const oldLines = oldContent.split('\\n');\n  const newLines = newContent.split('\\n');\n\n  const oldSet = new Set(oldLines);\n  const newSet = new Set(newLines);\n\n  let deletions = 0;\n  let additions = 0;\n\n  for (const line of oldLines) {\n    if (!newSet.has(line)) {\n      deletions++;\n    }\n  }\n\n  for (const line of newLines) {\n    if (!oldSet.has(line)) {\n      additions++;\n    }\n  }\n\n  return { additions, deletions };\n};\n\nexport const CodeDiff = memo<CodeDiffProps>(\n  ({\n    oldContent,\n    newContent,\n    language,\n    fileName,\n    viewMode = 'split',\n    showHeader = true,\n    variant = 'filled',\n    className,\n    classNames,\n    styles: customStyles,\n    actionsRender,\n    diffOptions,\n    ...rest\n  }) => {\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      if (language) return language;\n      return 'diff';\n    }, [fileName, language]);\n\n    const { additions, deletions } = useMemo(\n      () => countContentChanges(oldContent, newContent),\n      [oldContent, newContent],\n    );\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return null;\n      return actionsRender({\n        newContent,\n        oldContent,\n        originalNode: null,\n      });\n    }, [actionsRender, oldContent, newContent]);\n\n    const oldFile = useMemo(\n      () => ({\n        contents: oldContent,\n        lang: language as any,\n        name: fileName || 'file',\n      }),\n      [oldContent, language, fileName],\n    );\n\n    const newFile = useMemo(\n      () => ({\n        contents: newContent,\n        lang: language as any,\n        name: fileName || 'file',\n      }),\n      [newContent, language, fileName],\n    );\n\n    const options = useMemo<FileDiffOptions<string>>(\n      () => ({\n        diffStyle: viewMode,\n        disableFileHeader: true,\n        ...diffOptions,\n      }),\n      [viewMode, diffOptions],\n    );\n\n    return (\n      <Flexbox\n        className={cx(variants({ variant }), className)}\n        data-code-type=\"code-diff\"\n        {...rest}\n      >\n        {showHeader && (\n          <div\n            className={cx(headerVariants({ variant }), classNames?.header)}\n            style={customStyles?.header}\n          >\n            <Flexbox align=\"center\" gap={8} horizontal>\n              <MaterialFileTypeIcon filename={fileName || displayName} size={18} type=\"file\" />\n              <span>{displayName}</span>\n            </Flexbox>\n            <Flexbox align=\"center\" gap={8} horizontal>\n              {(deletions > 0 || additions > 0) && (\n                <Flexbox className={styles.stats} gap={8} horizontal>\n                  {deletions > 0 && <span className={styles.deletions}>-{deletions}</span>}\n                  {additions > 0 && <span className={styles.additions}>+{additions}</span>}\n                </Flexbox>\n              )}\n              {actions && (\n                <Flexbox align=\"center\" className={cx(`${prefix}-actions`, styles.actions)} gap={4}>\n                  {actions}\n                </Flexbox>\n              )}\n            </Flexbox>\n          </div>\n        )}\n        <div className={cx(styles.body, classNames?.body)} style={customStyles?.body}>\n          <MultiFileDiff newFile={newFile} oldFile={oldFile} options={options} />\n        </div>\n      </Flexbox>\n    );\n  },\n);\n\nCodeDiff.displayName = 'CodeDiff';\n\nexport default CodeDiff;\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,uBACJ,YACA,eAC6C;CAC7C,MAAM,WAAW,WAAW,MAAM,KAAK;CACvC,MAAM,WAAW,WAAW,MAAM,KAAK;CAEvC,MAAM,SAAS,IAAI,IAAI,SAAS;CAChC,MAAM,SAAS,IAAI,IAAI,SAAS;CAEhC,IAAI,YAAY;CAChB,IAAI,YAAY;AAEhB,MAAK,MAAM,QAAQ,SACjB,KAAI,CAAC,OAAO,IAAI,KAAK,CACnB;AAIJ,MAAK,MAAM,QAAQ,SACjB,KAAI,CAAC,OAAO,IAAI,KAAK,CACnB;AAIJ,QAAO;EAAE;EAAW;EAAW;;AAGjC,MAAa,WAAW,MACrB,EACC,YACA,YACA,UACA,UACA,WAAW,SACX,aAAa,MACb,UAAU,UACV,WACA,YACA,QAAQ,cACR,eACA,aACA,GAAG,WACC;CACJ,MAAM,cAAc,cAAc;AAChC,MAAI,SAAU,QAAO;AACrB,MAAI,SAAU,QAAO;AACrB,SAAO;IACN,CAAC,UAAU,SAAS,CAAC;CAExB,MAAM,EAAE,WAAW,cAAc,cACzB,oBAAoB,YAAY,WAAW,EACjD,CAAC,YAAY,WAAW,CACzB;CAED,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,cAAe,QAAO;AAC3B,SAAO,cAAc;GACnB;GACA;GACA,cAAc;GACf,CAAC;IACD;EAAC;EAAe;EAAY;EAAW,CAAC;CAE3C,MAAM,UAAU,eACP;EACL,UAAU;EACV,MAAM;EACN,MAAM,YAAY;EACnB,GACD;EAAC;EAAY;EAAU;EAAS,CACjC;CAED,MAAM,UAAU,eACP;EACL,UAAU;EACV,MAAM;EACN,MAAM,YAAY;EACnB,GACD;EAAC;EAAY;EAAU;EAAS,CACjC;CAED,MAAM,UAAU,eACP;EACL,WAAW;EACX,mBAAmB;EACnB,GAAG;EACJ,GACD,CAAC,UAAU,YAAY,CACxB;AAED,QACE,qBAACA;EACC,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;EAC/C,kBAAe;EACf,GAAI;aAEH,cACC,qBAAC;GACC,WAAW,GAAG,eAAe,EAAE,SAAS,CAAC,EAAE,YAAY,OAAO;GAC9D,OAAO,cAAc;cAErB,qBAACA;IAAQ,OAAM;IAAS,KAAK;IAAG;eAC9B,oBAACC;KAAqB,UAAU,YAAY;KAAa,MAAM;KAAI,MAAK;MAAS,EACjF,oBAAC,oBAAM,cAAmB;KAClB,EACV,qBAACD;IAAQ,OAAM;IAAS,KAAK;IAAG;gBAC5B,YAAY,KAAK,YAAY,MAC7B,qBAACA;KAAQ,WAAW,OAAO;KAAO,KAAK;KAAG;gBACvC,YAAY,KAAK,qBAAC;MAAK,WAAW,OAAO;iBAAW,KAAE;OAAiB,EACvE,YAAY,KAAK,qBAAC;MAAK,WAAW,OAAO;iBAAW,KAAE;OAAiB;MAChE,EAEX,WACC,oBAACA;KAAQ,OAAM;KAAS,WAAW,GAAG,GAAG,OAAO,WAAW,OAAO,QAAQ;KAAE,KAAK;eAC9E;MACO;KAEJ;IACN,EAER,oBAAC;GAAI,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;GAAE,OAAO,cAAc;aACtE,oBAAC;IAAuB;IAAkB;IAAkB;KAAW;IACnE;GACE;EAGf;AAED,SAAS,cAAc;AAEvB,uBAAe"}