@pdfme/ui 3.0.1 → 3.1.0-dev.1

package/dist/types/components/CtlBar/Pager.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-type Props = {
-    pageCursor: number;
-    pageNum: number;
-    setPageCursor: (page: number) => void;
-};
-declare const Pager: ({ pageCursor, pageNum, setPageCursor }: Props) => React.JSX.Element;
-export default Pager;

package/dist/types/components/CtlBar/Zoom.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-type Props = {
-    zoomLevel: number;
-    setZoomLevel: (zoom: number) => void;
-};
-declare const Pager: ({ zoomLevel, setZoomLevel }: Props) => React.JSX.Element;
-export default Pager;

package/dist/types/components/Divider.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const Divider: () => React.JSX.Element;
-export default Divider;

package/src/components/CtlBar/Pager.tsx

@@ -1,53 +0,0 @@
-import React, { useContext } from 'react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
-import { I18nContext } from '../../contexts';
-
-const btnStyle: React.CSSProperties = {
-  cursor: 'pointer',
-  border: 'none',
-  background: 'none',
-  display: 'flex',
-  alignItems: 'center',
-};
-
-type Props = {
-  pageCursor: number;
-  pageNum: number;
-  setPageCursor: (page: number) => void;
-};
-
-const Pager = ({ pageCursor, pageNum, setPageCursor }: Props) => {
-  const i18n = useContext(I18nContext);
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-      <button
-        style={{
-          paddingLeft: '0.5rem',
-          ...btnStyle,
-          cursor: pageCursor <= 0 ? 'not-allowed' : 'pointer',
-        }}
-        disabled={pageCursor <= 0}
-        onClick={() => setPageCursor(pageCursor - 1)}
-      >
-        <ChevronLeftIcon width={20} height={20} color={'#fff'} />
-      </button>
-      <strong style={{ color: 'white', fontSize: '0.9rem', minWidth: 45, textAlign: 'center' }}>
-        {pageCursor + 1}/{pageNum}
-      </strong>
-      <button
-        style={{
-          paddingRight: '0.5rem',
-          ...btnStyle,
-          cursor: pageCursor + 1 >= pageNum ? 'not-allowed' : 'pointer',
-        }}
-        disabled={pageCursor + 1 >= pageNum}
-        onClick={() => setPageCursor(pageCursor + 1)}
-      >
-        <ChevronRightIcon width={20} height={20} color={'#fff'} />
-      </button>
-    </div>
-  );
-};
-
-export default Pager;

package/src/components/CtlBar/Zoom.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
-
-const btnStyle: React.CSSProperties = {
-  cursor: 'pointer',
-  border: 'none',
-  background: 'none',
-  display: 'flex',
-  alignItems: 'center',
-};
-
-const zoomStep = 0.25;
-const maxZoom = 2;
-const minZoom = 0.25;
-
-type Props = {
-  zoomLevel: number;
-  setZoomLevel: (zoom: number) => void;
-};
-
-const Pager = ({ zoomLevel, setZoomLevel }: Props) => {
-  const nextZoomOut = zoomLevel - zoomStep;
-  const nextZoomIn = zoomLevel + zoomStep;
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-      <button
-        style={{
-          paddingLeft: '0.5rem',
-          ...btnStyle,
-          cursor: minZoom >= nextZoomOut ? 'not-allowed' : 'pointer',
-        }}
-        disabled={minZoom >= nextZoomOut}
-        onClick={() => setZoomLevel(nextZoomOut)}
-      >
-        <MinusIcon width={20} height={20} color={'#fff'} />
-      </button>
-      <strong style={{ color: 'white', fontSize: '0.9rem', minWidth: 50, textAlign: 'center' }}>
-        {Math.round(zoomLevel * 100)}%
-      </strong>
-      <button
-        style={{
-          paddingRight: '0.5rem',
-          ...btnStyle,
-          cursor: maxZoom < nextZoomIn ? 'not-allowed' : 'pointer',
-        }}
-        disabled={maxZoom < nextZoomIn}
-        onClick={() => setZoomLevel(nextZoomIn)}
-      >
-        <PlusIcon width={20} height={20} color={'#fff'} />
-      </button>
-    </div>
-  );
-};
-
-export default Pager;

package/src/components/CtlBar/index.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import Pager from './Pager';
-import Zoom from './Zoom';
-import { Size } from '@pdfme/common';
-
-type Props = {
-  size: Size;
-  pageCursor: number;
-  pageNum: number;
-  setPageCursor: (page: number) => void;
-  zoomLevel: number;
-  setZoomLevel: (zoom: number) => void;
-};
-
-const barWidth = 250;
-
-const CtlBar = (props: Props) => {
-  const { size, pageCursor, pageNum, setPageCursor, zoomLevel, setZoomLevel } = props;
-  const width = pageNum > 1 ? barWidth : barWidth / 2;
-  return (
-    <div style={{ position: 'absolute', top: 'auto', bottom: '6%', width: size.width }}>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: '15px',
-          position: 'relative',
-          zIndex: 1,
-          left: `calc(50% - ${width / 2}px)`,
-          width,
-          background: '#777777e6',
-          borderRadius: 2,
-          padding: '0.5rem',
-        }}
-      >
-        {pageNum > 1 && (
-          <Pager pageCursor={pageCursor} pageNum={pageNum} setPageCursor={setPageCursor} />
-        )}
-        <Zoom zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
-      </div>
-    </div>
-  );
-};
-
-export default CtlBar;

package/src/components/Divider.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const Divider = () => (
-  <div style={{ marginTop: '0.5rem', marginBottom: '0.5rem', borderBottom: '1px solid #e5e5e5' }} />
-);
-
-export default Divider;

package/webpack.config.js

@@ -1,40 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const pkg = require('./package.json');
-
-const isProduction = process.env.NODE_ENV === 'production';
-
-const BANNER = [
-  '@name ' + pkg.name,
-  '@version ' + pkg.version + ' | ' + new Date().toDateString(),
-  '@author ' + pkg.author,
-  '@license ' + pkg.license,
-].join('\n');
-
-const config = {
-  optimization: { minimize: isProduction },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js'],
-    alias: { process: 'process/browser' },
-  },
-  plugins: [
-    // new BundleAnalyzerPlugin(),
-    new webpack.ProvidePlugin({ process: 'process/browser' }),
-    new webpack.BannerPlugin({ banner: BANNER, entryOnly: true }),
-  ],
-  devtool: 'source-map',
-  entry: './src/index.ts',
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'index.js',
-    globalObject: 'this',
-    library: { type: 'umd' },
-  },
-  module: {
-    rules: [
-      { test: /\.tsx?$/, use: 'ts-loader' },
-      { test: /\.css$/i, use: ['style-loader', 'css-loader'] }
-    ]
-  },
-};
-module.exports = config;