streaksheet - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

build/src/CellContainer.js

@@ -82,3 +82,3 @@ "use strict";
   var borderRight = DEFAULT_BORDER_STYLE;
-  var borderTop = DEFAULT_BORDER_STYLE; // TODO: use background and border colors specified by client
+  var borderTop = DEFAULT_BORDER_STYLE;
 
@@ -88,37 +88,37 @@ if (isSelectionStart) {
     borderBottom = borderLeft = borderRight = borderTop = 'rgb(0, 0, 0)';
-  } else if (bordersInCopiedRegion) {
+  } else if (isInCopiedRegion) {
     var borderStyle = '1px dashed rgb(0, 0, 0)';
 
-    if (bordersInCopiedRegion.includes('BOTTOM')) {
+    if (bordersInCopiedRegion === null || bordersInCopiedRegion === void 0 ? void 0 : bordersInCopiedRegion.includes('BOTTOM')) {
       borderBottom = borderStyle;
     }
 
-    if (bordersInCopiedRegion.includes('LEFT')) {
+    if (bordersInCopiedRegion === null || bordersInCopiedRegion === void 0 ? void 0 : bordersInCopiedRegion.includes('LEFT')) {
       borderLeft = borderStyle;
     }
 
-    if (bordersInCopiedRegion.includes('RIGHT')) {
+    if (bordersInCopiedRegion === null || bordersInCopiedRegion === void 0 ? void 0 : bordersInCopiedRegion.includes('RIGHT')) {
       borderRight = borderStyle;
     }
 
-    if (bordersInCopiedRegion.includes('TOP')) {
+    if (bordersInCopiedRegion === null || bordersInCopiedRegion === void 0 ? void 0 : bordersInCopiedRegion.includes('TOP')) {
       borderTop = borderStyle;
     }
-  } else if (bordersInSelection) {
+  } else if (isInSelection) {
     backgroundColor = 'rgb(240, 240, 240)';
     var _borderStyle = '1px solid rgb(0, 0, 0)';
 
-    if (bordersInSelection.includes('BOTTOM')) {
+    if (bordersInSelection === null || bordersInSelection === void 0 ? void 0 : bordersInSelection.includes('BOTTOM')) {
       borderBottom = _borderStyle;
     }
 
-    if (bordersInSelection.includes('LEFT')) {
+    if (bordersInSelection === null || bordersInSelection === void 0 ? void 0 : bordersInSelection.includes('LEFT')) {
       borderLeft = _borderStyle;
     }
 
-    if (bordersInSelection.includes('RIGHT')) {
+    if (bordersInSelection === null || bordersInSelection === void 0 ? void 0 : bordersInSelection.includes('RIGHT')) {
       borderRight = _borderStyle;
     }
 
-    if (bordersInSelection.includes('TOP')) {
+    if (bordersInSelection === null || bordersInSelection === void 0 ? void 0 : bordersInSelection.includes('TOP')) {
       borderTop = _borderStyle;
@@ -125,0 +125,0 @@ }

build/src/ColumnHeaderCellContainer.js

@@ -102,5 +102,6 @@ "use strict";
     style: styles.columnHeaderCellContainer({
-      borderColor: 'rgb(230, 230, 230)',
-      borderStyle: 'solid',
-      borderWidth: '1px',
+      borderBottom: '1px solid rgb(230, 230, 230)',
+      borderLeft: '1px solid rgb(230, 230, 230)',
+      borderRight: '1px solid rgb(230, 230, 230)',
+      borderTop: '1px solid rgb(230, 230, 230)',
       boxSizing: 'border-box',
@@ -107,0 +108,0 @@ cursor: isDragging ? 'grabbing' : 'grab',

build/src/index.js

@@ -142,5 +142,6 @@ "use strict";
         style: styles.sectionHeaderCellContainer({
-          borderColor: 'rgb(230, 230, 230)',
-          borderStyle: 'solid',
-          borderWidth: '1px',
+          borderBottom: '1px solid rgb(230, 230, 230)',
+          borderLeft: '1px solid rgb(230, 230, 230)',
+          borderRight: '1px solid rgb(230, 230, 230)',
+          borderTop: '1px solid rgb(230, 230, 230)',
           boxSizing: 'border-box',
@@ -147,0 +148,0 @@ display: 'inline-block',

package.json

 {
   "name": "streaksheet",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "author": "Chris Cowan <[e-mail]>",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -11,1 +11,72 @@ # StreakSheet
 polyfill.
+
+## Styling
+
+You can provide custom styles for most components via the `styles` prop. Each
+value of this object in an optional function. The first argument is the default
+styles and the second is an object of state values specific to that component.
+The return value is a `CSSProperties` object.
+
+```javascript
+(base: CSSProperties, state: {}) => CSSProperties;
+```
+
+You can choose to extend the default styles or replace them completely. You will
+almost always want to do the former.
+
+```javascript
+styles={{
+  columnReorderOverlay: base => ({
+    ...base,
+    backgroundColor: 'red',
+  })
+}}
+```
+
+Be careful when overriding styles completely. Many components apply rules like
+`position: absolute` that will break the component if removed.
+
+The `Styles` type indicates exactly what state values each style callback sends.
+Some components are unaffected by state, in which case the second argument is
+omitted completely.
+
+```javascript
+styles={{
+  columnResizeHandle: (base, { isDragging }) => ({
+    ...base,
+    backgroundColor: isDragging ? 'red' : 'blue',
+  })
+}}
+```
+
+This API is inspired by [React Select](https://react-select.com/styles)
+
+### Overriding Borders
+
+When applying custom border styles, it's common to want different styles for
+different edges. To make overriding default styles easier, internally we use
+`borderBottom`, `borderLeft`, `borderRight`, and `borderTop` shorthand, even
+when all four rules have the same value.
+
+```javascript
+styles={{
+  columnHeaderCellContainer: (base, { columnIndex }) => ({
+    ...base,
+    // Make border between cells 1px while keeping border on leftmost cell.
+    borderLeft: columnIndex === 0 ? '1px solid black' : 'none',
+  })
+}}
+```
+
+### Style Keys
+
+- `cell`
+- `columnHeaderCellContainer`
+- `columnHeadersContainer`
+- `columnReorderIndicator`
+- `columnReorderOverlay`
+- `columnResizeHandle`
+- `columnResizeIndicator`
+- `grid`
+- `sectionHeaderCellContainer`
+- `sectionHeadersContainer`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

286616

increased by1.1%

Lines of code

2664

increased by0.08%

Number of lines in readme file

82

increased by645.45%

No dependency changes