feat: add min presence ahead example (#2491)

* feat: add min presence ahead example * chore: add changeset
diegomura · Jan 15, 2024 · ed8524f · ed8524f
1 parent 0538bd9
commit ed8524f
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/.changeset/famous-lamps-type.md b/.changeset/famous-lamps-type.md
@@ -0,0 +1,5 @@
+---
+'@react-pdf/examples': minor
+---
+
+feat: add minPresenceAhead example
diff --git a/packages/examples/.eslintrc.js b/packages/examples/.eslintrc.js
@@ -3,5 +3,6 @@ module.exports = {
   rules: {
     'react/prop-types': 0,
     'jsx-a11y/anchor-is-valid': 0,
+    'react/jsx-one-expression-per-line': 0,
   },
 };
diff --git a/packages/examples/src/minPresenceAhead/index.jsx b/packages/examples/src/minPresenceAhead/index.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Document, Page, View, Text } from '@react-pdf/renderer';
+
+const palette = [
+  '#781c81',
+  '#521b80',
+  '#442f8b',
+  '#3f4c9f',
+  '#4069b4',
+  '#4582c1',
+  '#4e96bd',
+  '#5aa6a9',
+  '#68b090',
+  '#7ab878',
+  '#8dbc64',
+  '#a2be56',
+];
+
+const MinPresenceAhead = () => (
+  <Document>
+    <Page style={{ padding: 20 }}>
+      {palette.map((color, i) => {
+        const minPresenceAhead = i === 8 ? 82 : 0;
+
+        return (
+          <View
+            key={color}
+            wrap={false}
+            minPresenceAhead={i === 8 ? 90 : 0}
+            style={{
+              width: '100%',
+              height: 80,
+              color: 'white',
+              backgroundColor: color,
+            }}
+          >
+            <Text>Index: {i}</Text>
+            <Text>MinPresenceAhead: {minPresenceAhead}</Text>
+          </View>
+        );
+      })}
+    </Page>
+  </Document>
+);
+
+export default MinPresenceAhead;