@lodev09/react-native-true-sheet 0.8.2 → 0.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -5
- package/lib/commonjs/TrueSheet.js +4 -3
- package/lib/commonjs/TrueSheet.js.map +1 -1
- package/lib/commonjs/TrueSheetGrabber.js +12 -12
- package/lib/commonjs/TrueSheetGrabber.js.map +1 -1
- package/lib/module/TrueSheet.js +4 -3
- package/lib/module/TrueSheet.js.map +1 -1
- package/lib/module/TrueSheetGrabber.js +12 -12
- package/lib/module/TrueSheetGrabber.js.map +1 -1
- package/lib/typescript/src/TrueSheet.d.ts.map +1 -1
- package/lib/typescript/src/TrueSheetGrabber.d.ts +20 -10
- package/lib/typescript/src/TrueSheetGrabber.d.ts.map +1 -1
- package/lib/typescript/src/types.d.ts +8 -1
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/TrueSheet.tsx +3 -2
- package/src/TrueSheetGrabber.tsx +34 -16
- package/src/types.ts +9 -1
package/README.md
CHANGED
|
@@ -54,7 +54,8 @@ return (
|
|
|
54
54
|
|
|
55
55
|
## Options
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
Props available for `TrueSheet`.
|
|
58
|
+
Extends `ViewProps`
|
|
58
59
|
|
|
59
60
|
| Prop | Type | Default | Description | 🍎 | 🤖 |
|
|
60
61
|
| - | - | - | - | - | - |
|
|
@@ -66,6 +67,7 @@ Extended from `ViewProps`
|
|
|
66
67
|
| FooterComponent | `ReactNode` | - | A component that floats at the bottom of the sheet. | ✅ | ✅ |
|
|
67
68
|
| dismissible | `boolean` | `true` | If set to `false`, the sheet will prevent interactive dismissal via dragging or clicking outside of it. | ✅ | ✅ |
|
|
68
69
|
| grabber | `boolean` | `true` | Shows a grabber (or handle). Native on IOS and styled `View` on Android. | ✅ | ✅ |
|
|
70
|
+
| grabberProps | [`TrueSheetGrabberProps`](#truesheetgrabberprops) | - | Overrides the grabber props for android. | | ✅ |
|
|
69
71
|
| blurTint | [`BlurTint`](#blurTint) | - | The blur effect style on iOS. Overrides `backgroundColor` if set. Example: `light`, `dark`, etc. | ✅ | |
|
|
70
72
|
| scrollRef | `RefObject<...>` | - | The main scrollable ref that Sheet should handle on iOS. | ✅ | |
|
|
71
73
|
|
|
@@ -131,18 +133,30 @@ return (
|
|
|
131
133
|
|
|
132
134
|
| Value | Description | 🍎 | 🤖 |
|
|
133
135
|
| - | - | - | - |
|
|
134
|
-
| `"large"` | Translates to 100% | ✅ | ✅ |
|
|
135
|
-
| `"medium"` | Translates to 50% | **_15+_** | ✅ |
|
|
136
136
|
| `"auto"` | Auto resize based on content height. | **_16+_** | ✅ |
|
|
137
|
-
| `"number"` | Fixed height | **_16+_** | ✅ |
|
|
138
|
-
| `${number}%` | Fixed height in % | **_16+_** | ✅ |
|
|
139
137
|
| `"small"` | Translates to 25% | **_16+_** | ✅ |
|
|
138
|
+
| `"medium"` | Translates to 50% | **_15+_** | ✅ |
|
|
139
|
+
| `"large"` | Translates to 100% | ✅ | ✅ |
|
|
140
|
+
| `number` | Fixed height | **_16+_** | ✅ |
|
|
141
|
+
| `${number}%` | Fixed height in % | **_16+_** | ✅ |
|
|
140
142
|
|
|
141
143
|
> [!NOTE]
|
|
142
144
|
> `auto` is not guaranteed to be accurate if your content depends on various rendering logic. Experiment with it and try to keep your content size as fixed as possible.
|
|
143
145
|
>
|
|
144
146
|
> Alternatively, you can programmatically call [`resize`](#methods) to adjust the sheet size on-the-fly.
|
|
145
147
|
|
|
148
|
+
### `TrueSheetGrabberProps`
|
|
149
|
+
|
|
150
|
+
Grabber props to be used for android grabber or handle.
|
|
151
|
+
|
|
152
|
+
| Prop | Type | Default | Description |
|
|
153
|
+
| - | - | - | - |
|
|
154
|
+
| visible | `boolean` | `true` | Is grabber visible. |
|
|
155
|
+
| color | `ColorValue` | `"rgba(73,69,79,0.4)"` | Grabber color according to M3 specs. |
|
|
156
|
+
| height | `DimensionValue` | `4` | Grabber height according to M3 specs. |
|
|
157
|
+
| width | `DimensionValue` | `32` | Grabber width according to M3 specs. |
|
|
158
|
+
| topOffset | `DimensionValue` | `6` | Grabber top position offset. |
|
|
159
|
+
|
|
146
160
|
### `BlurTint`
|
|
147
161
|
|
|
148
162
|
Blur tint that is mapped into native values in iOS.
|
|
@@ -90,8 +90,9 @@ class TrueSheet extends _react.PureComponent {
|
|
|
90
90
|
const {
|
|
91
91
|
sizes,
|
|
92
92
|
backgroundColor = 'white',
|
|
93
|
-
grabber = true,
|
|
94
93
|
dismissible = true,
|
|
94
|
+
grabber = true,
|
|
95
|
+
grabberProps,
|
|
95
96
|
blurTint,
|
|
96
97
|
cornerRadius,
|
|
97
98
|
maxHeight,
|
|
@@ -134,9 +135,9 @@ class TrueSheet extends _react.PureComponent {
|
|
|
134
135
|
style: contentContainerStyle
|
|
135
136
|
}, children), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
136
137
|
collapsable: false
|
|
137
|
-
}, !!FooterComponent && /*#__PURE__*/_react.default.createElement(FooterComponent, null)), _reactNative.Platform.OS === 'android' && /*#__PURE__*/_react.default.createElement(_TrueSheetGrabber.TrueSheetGrabber, {
|
|
138
|
+
}, !!FooterComponent && /*#__PURE__*/_react.default.createElement(FooterComponent, null)), _reactNative.Platform.OS === 'android' && /*#__PURE__*/_react.default.createElement(_TrueSheetGrabber.TrueSheetGrabber, _extends({
|
|
138
139
|
visible: grabber
|
|
139
|
-
})));
|
|
140
|
+
}, grabberProps))));
|
|
140
141
|
}
|
|
141
142
|
}
|
|
142
143
|
exports.TrueSheet = TrueSheet;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_TrueSheetModule","_TrueSheetGrabber","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","LINKING_ERROR","Platform","select","ios","ComponentName","TrueSheetNativeView","requireNativeComponent","Error","TrueSheet","PureComponent","displayName","constructor","props","ref","createRef","onDismiss","onPresent","onSizeChange","state","scrollableHandle","handle","nodeHandle","findNodeHandle","current","updateState","scrollRef","setState","event","nativeEvent","componentDidMount","sizes","console","warn","componentDidUpdate","present","index","TrueSheetModule","resize","dismiss","render","backgroundColor","grabber","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_TrueSheetModule","_TrueSheetGrabber","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","LINKING_ERROR","Platform","select","ios","ComponentName","TrueSheetNativeView","requireNativeComponent","Error","TrueSheet","PureComponent","displayName","constructor","props","ref","createRef","onDismiss","onPresent","onSizeChange","state","scrollableHandle","handle","nodeHandle","findNodeHandle","current","updateState","scrollRef","setState","event","nativeEvent","componentDidMount","sizes","console","warn","componentDidUpdate","present","index","TrueSheetModule","resize","dismiss","render","backgroundColor","dismissible","grabber","grabberProps","blurTint","cornerRadius","maxHeight","FooterComponent","style","contentContainerStyle","children","rest","createElement","$nativeSheet","View","collapsable","overflow","undefined","android","borderTopLeftRadius","borderTopRightRadius","OS","TrueSheetGrabber","visible","exports","position","left","zIndex"],"sourceRoot":"../../src","sources":["TrueSheet.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAWA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAAqD,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAY,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAL,CAAA,MAAAA,CAAA,GAAAM,SAAA,CAAAC,MAAA,EAAAP,CAAA,UAAAQ,MAAA,GAAAF,SAAA,CAAAN,CAAA,YAAAS,GAAA,IAAAD,MAAA,QAAAf,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAS,MAAA,EAAAC,GAAA,KAAAJ,MAAA,CAAAI,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAJ,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAJ,SAAA;AAErD,MAAMK,aAAa,GAChB,2FAA0F,GAC3FC,qBAAQ,CAACC,MAAM,CAAC;EAAEC,GAAG,EAAE,gCAAgC;EAAE3B,OAAO,EAAE;AAAG,CAAC,CAAC,GACvE,sDAAsD,GACtD,+BAA+B;AAEjC,MAAM4B,aAAa,GAAG,eAAe;AAQrC,MAAMC,mBAAmB,GAAG,IAAAC,mCAAsB,EAA2BF,aAAa,CAAC;AAE3F,IAAI,CAACC,mBAAmB,EAAE;EACxB,MAAM,IAAIE,KAAK,CAACP,aAAa,CAAC;AAChC;AAQO,MAAMQ,SAAS,SAASC,oBAAa,CAAiC;EAC3EC,WAAW,GAAG,WAAW;EAIzBC,WAAWA,CAACC,KAAqB,EAAE;IACjC,KAAK,CAACA,KAAK,CAAC;IAEZ,IAAI,CAACC,GAAG,gBAAG,IAAAC,gBAAS,EAAY,CAAC;IAEjC,IAAI,CAACC,SAAS,GAAG,IAAI,CAACA,SAAS,CAACtB,IAAI,CAAC,IAAI,CAAC;IAC1C,IAAI,CAACuB,SAAS,GAAG,IAAI,CAACA,SAAS,CAACvB,IAAI,CAAC,IAAI,CAAC;IAC1C,IAAI,CAACwB,YAAY,GAAG,IAAI,CAACA,YAAY,CAACxB,IAAI,CAAC,IAAI,CAAC;IAEhD,IAAI,CAACyB,KAAK,GAAG;MACXC,gBAAgB,EAAE;IACpB,CAAC;EACH;EAEA,IAAYC,MAAMA,CAAA,EAAW;IAC3B,MAAMC,UAAU,GAAG,IAAAC,2BAAc,EAAC,IAAI,CAACT,GAAG,CAACU,OAAO,CAAC;IACnD,IAAIF,UAAU,IAAI,IAAI,IAAIA,UAAU,KAAK,CAAC,CAAC,EAAE;MAC3C,MAAM,IAAId,KAAK,CAAE,+BAA8B,CAAC;IAClD;IAEA,OAAOc,UAAU;EACnB;EAEQG,WAAWA,CAAA,EAAS;IAC1B,MAAML,gBAAgB,GAAG,IAAI,CAACP,KAAK,CAACa,SAAS,EAAEF,OAAO,GAClD,IAAAD,2BAAc,EAAC,IAAI,CAACV,KAAK,CAACa,SAAS,CAACF,OAAO,CAAC,GAC5C,IAAI;IAER,IAAI,CAACG,QAAQ,CAAC;MACZP;IACF,CAAC,CAAC;EACJ;EAEQF,YAAYA,CAACU,KAAqC,EAAQ;IAChE,IAAI,CAACf,KAAK,CAACK,YAAY,GAAGU,KAAK,CAACC,WAAW,CAAC;EAC9C;EAEQZ,SAASA,CAACW,KAAqC,EAAQ;IAC7D,IAAI,CAACf,KAAK,CAACI,SAAS,GAAGW,KAAK,CAACC,WAAW,CAAC;EAC3C;EAEQb,SAASA,CAAA,EAAS;IACxB,IAAI,CAACH,KAAK,CAACG,SAAS,GAAG,CAAC;EAC1B;EAEAc,iBAAiBA,CAAA,EAAS;IACxB,IAAI,IAAI,CAACjB,KAAK,CAACkB,KAAK,IAAI,IAAI,CAAClB,KAAK,CAACkB,KAAK,CAAClC,MAAM,GAAG,CAAC,EAAE;MACnDmC,OAAO,CAACC,IAAI,CACV,+GACF,CAAC;IACH;IAEA,IAAI,CAACR,WAAW,CAAC,CAAC;EACpB;EAEAS,kBAAkBA,CAAA,EAAS;IACzB,IAAI,CAACT,WAAW,CAAC,CAAC;EACpB;;EAEA;AACF;AACA;AACA;EACE,MAAaU,OAAOA,CAACC,KAAa,GAAG,CAAC,EAAiB;IACrD,MAAMC,gCAAe,CAACF,OAAO,CAAC,IAAI,CAACd,MAAM,EAAEe,KAAK,CAAC;EACnD;;EAEA;AACF;AACA;AACA;EACE,MAAaE,MAAMA,CAACF,KAAa,EAAiB;IAChD,MAAM,IAAI,CAACD,OAAO,CAACC,KAAK,CAAC;EAC3B;;EAEA;AACF;AACA;EACE,MAAaG,OAAOA,CAAA,EAAkB;IACpC,MAAMF,gCAAe,CAACE,OAAO,CAAC,IAAI,CAAClB,MAAM,CAAC;EAC5C;EAEAmB,MAAMA,CAAA,EAAc;IAClB,MAAM;MACJT,KAAK;MACLU,eAAe,GAAG,OAAO;MACzBC,WAAW,GAAG,IAAI;MAClBC,OAAO,GAAG,IAAI;MACdC,YAAY;MACZC,QAAQ;MACRC,YAAY;MACZC,SAAS;MACTC,eAAe;MACfC,KAAK;MACLC,qBAAqB;MACrBC,QAAQ;MACR,GAAGC;IACL,CAAC,GAAG,IAAI,CAACvC,KAAK;IAEd,oBACEhD,MAAA,CAAAY,OAAA,CAAA4E,aAAA,CAAC/C,mBAAmB;MAClBQ,GAAG,EAAE,IAAI,CAACA,GAAI;MACdmC,KAAK,EAAEK,YAAa;MACpBlC,gBAAgB,EAAE,IAAI,CAACD,KAAK,CAACC,gBAAiB;MAC9CW,KAAK,EAAEA,KAAK,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAE;MACpCc,QAAQ,EAAEA,QAAS;MACnBC,YAAY,EAAEA,YAAa;MAC3BH,OAAO,EAAEA,OAAQ;MACjBD,WAAW,EAAEA,WAAY;MACzBK,SAAS,EAAEA,SAAU;MACrB9B,SAAS,EAAE,IAAI,CAACA,SAAU;MAC1BD,SAAS,EAAE,IAAI,CAACA,SAAU;MAC1BE,YAAY,EAAE,IAAI,CAACA;IAAa,gBAEhCrD,MAAA,CAAAY,OAAA,CAAA4E,aAAA,CAACrF,YAAA,CAAAuF,IAAI,EAAA/D,QAAA;MACHgE,WAAW,EAAE,KAAM;MACnBP,KAAK,EAAE,CACL;QACEQ,QAAQ,EAAEvD,qBAAQ,CAACC,MAAM,CAAC;UAAEC,GAAG,EAAEsD,SAAS;UAAEC,OAAO,EAAE;QAAS,CAAC,CAAC;QAChEC,mBAAmB,EAAEd,YAAY;QACjCe,oBAAoB,EAAEf,YAAY;QAElC;QACAL,eAAe,EAAEvC,qBAAQ,CAACC,MAAM,CAAC;UAC/BC,GAAG,EAAEyC,QAAQ,GAAGa,SAAS,GAAGjB,eAAe;UAC3CkB,OAAO,EAAElB;QACX,CAAC;MACH,CAAC,EACDQ,KAAK;IACL,GACEG,IAAI,gBAERvF,MAAA,CAAAY,OAAA,CAAA4E,aAAA,CAACrF,YAAA,CAAAuF,IAAI;MAACC,WAAW,EAAE,KAAM;MAACP,KAAK,EAAEC;IAAsB,GACpDC,QACG,CAAC,eACPtF,MAAA,CAAAY,OAAA,CAAA4E,aAAA,CAACrF,YAAA,CAAAuF,IAAI;MAACC,WAAW,EAAE;IAAM,GAAE,CAAC,CAACR,eAAe,iBAAInF,MAAA,CAAAY,OAAA,CAAA4E,aAAA,CAACL,eAAe,MAAE,CAAQ,CAAC,EAC1E9C,qBAAQ,CAAC4D,EAAE,KAAK,SAAS,iBAAIjG,MAAA,CAAAY,OAAA,CAAA4E,aAAA,CAACnF,iBAAA,CAAA6F,gBAAgB,EAAAvE,QAAA;MAACwE,OAAO,EAAErB;IAAQ,GAAKC,YAAY,CAAG,CACjF,CACa,CAAC;EAE1B;AACF;AAACqB,OAAA,CAAAxD,SAAA,GAAAA,SAAA;AAED,MAAM6C,YAAuB,GAAG;EAC9BY,QAAQ,EAAE,UAAU;EACpBC,IAAI,EAAE,CAAC,IAAI;EACXC,MAAM,EAAE,CAAC;AACX,CAAC","ignoreList":[]}
|
|
@@ -7,13 +7,15 @@ exports.TrueSheetGrabber = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
11
10
|
const GRABBER_WRAPPER_HEIGHT = 24;
|
|
12
11
|
const GRABBER_DEFAULT_HEIGHT = 4;
|
|
13
12
|
const GRABBER_DEFAULT_WIDTH = 32;
|
|
14
|
-
const
|
|
13
|
+
const GRABBER_DEFAULT_TOP_OFFSET = 6;
|
|
14
|
+
|
|
15
|
+
// M3 spec: #49454F 0.4 alpha
|
|
16
|
+
const GRABBER_DEFAULT_COLOR = 'rgba(73,69,79,0.4)';
|
|
15
17
|
/**
|
|
16
|
-
*
|
|
18
|
+
* Grabber component.
|
|
17
19
|
* Used by defualt for Android but feel free to re-use.
|
|
18
20
|
*/
|
|
19
21
|
const TrueSheetGrabber = props => {
|
|
@@ -22,19 +24,20 @@ const TrueSheetGrabber = props => {
|
|
|
22
24
|
color = GRABBER_DEFAULT_COLOR,
|
|
23
25
|
width = GRABBER_DEFAULT_WIDTH,
|
|
24
26
|
height = GRABBER_DEFAULT_HEIGHT,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
+
topOffset = GRABBER_DEFAULT_TOP_OFFSET,
|
|
28
|
+
style
|
|
27
29
|
} = props;
|
|
28
30
|
if (!visible) return null;
|
|
29
31
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
30
32
|
style: $wrapper
|
|
31
|
-
}, /*#__PURE__*/_react.default.createElement(_reactNative.View,
|
|
33
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
32
34
|
style: [$grabber, {
|
|
33
35
|
height,
|
|
34
36
|
width,
|
|
35
|
-
backgroundColor: color
|
|
37
|
+
backgroundColor: color,
|
|
38
|
+
top: topOffset
|
|
36
39
|
}, style]
|
|
37
|
-
}
|
|
40
|
+
}));
|
|
38
41
|
};
|
|
39
42
|
exports.TrueSheetGrabber = TrueSheetGrabber;
|
|
40
43
|
const $wrapper = {
|
|
@@ -48,9 +51,6 @@ const $wrapper = {
|
|
|
48
51
|
zIndex: 9999
|
|
49
52
|
};
|
|
50
53
|
const $grabber = {
|
|
51
|
-
|
|
52
|
-
opacity: 0.4,
|
|
53
|
-
borderRadius: GRABBER_DEFAULT_HEIGHT / 2,
|
|
54
|
-
top: 6
|
|
54
|
+
borderRadius: GRABBER_DEFAULT_HEIGHT / 2
|
|
55
55
|
};
|
|
56
56
|
//# sourceMappingURL=TrueSheetGrabber.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","obj","__esModule","default","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","obj","__esModule","default","GRABBER_WRAPPER_HEIGHT","GRABBER_DEFAULT_HEIGHT","GRABBER_DEFAULT_WIDTH","GRABBER_DEFAULT_TOP_OFFSET","GRABBER_DEFAULT_COLOR","TrueSheetGrabber","props","visible","color","width","height","topOffset","style","createElement","View","$wrapper","$grabber","backgroundColor","top","exports","position","left","right","alignSelf","alignItems","zIndex","borderRadius"],"sourceRoot":"../../src","sources":["TrueSheetGrabber.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAMqB,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAErB,MAAMG,sBAAsB,GAAG,EAAE;AACjC,MAAMC,sBAAsB,GAAG,CAAC;AAChC,MAAMC,qBAAqB,GAAG,EAAE;AAChC,MAAMC,0BAA0B,GAAG,CAAC;;AAEpC;AACA,MAAMC,qBAAqB,GAAG,oBAAoB;AAwClD;AACA;AACA;AACA;AACO,MAAMC,gBAAgB,GAAIC,KAA4B,IAAK;EAChE,MAAM;IACJC,OAAO,GAAG,IAAI;IACdC,KAAK,GAAGJ,qBAAqB;IAC7BK,KAAK,GAAGP,qBAAqB;IAC7BQ,MAAM,GAAGT,sBAAsB;IAC/BU,SAAS,GAAGR,0BAA0B;IACtCS;EACF,CAAC,GAAGN,KAAK;EAET,IAAI,CAACC,OAAO,EAAE,OAAO,IAAI;EAEzB,oBACEd,MAAA,CAAAM,OAAA,CAAAc,aAAA,CAACjB,YAAA,CAAAkB,IAAI;IAACF,KAAK,EAAEG;EAAS,gBACpBtB,MAAA,CAAAM,OAAA,CAAAc,aAAA,CAACjB,YAAA,CAAAkB,IAAI;IAACF,KAAK,EAAE,CAACI,QAAQ,EAAE;MAAEN,MAAM;MAAED,KAAK;MAAEQ,eAAe,EAAET,KAAK;MAAEU,GAAG,EAAEP;IAAU,CAAC,EAAEC,KAAK;EAAE,CAAE,CACxF,CAAC;AAEX,CAAC;AAAAO,OAAA,CAAAd,gBAAA,GAAAA,gBAAA;AAED,MAAMU,QAAmB,GAAG;EAC1BK,QAAQ,EAAE,UAAU;EACpBF,GAAG,EAAE,CAAC;EACNG,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,QAAQ;EACnBb,MAAM,EAAEV,sBAAsB;EAC9BwB,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE;AACV,CAAC;AAED,MAAMT,QAAmB,GAAG;EAC1BU,YAAY,EAAEzB,sBAAsB,GAAG;AACzC,CAAC","ignoreList":[]}
|
package/lib/module/TrueSheet.js
CHANGED
|
@@ -82,8 +82,9 @@ export class TrueSheet extends PureComponent {
|
|
|
82
82
|
const {
|
|
83
83
|
sizes,
|
|
84
84
|
backgroundColor = 'white',
|
|
85
|
-
grabber = true,
|
|
86
85
|
dismissible = true,
|
|
86
|
+
grabber = true,
|
|
87
|
+
grabberProps,
|
|
87
88
|
blurTint,
|
|
88
89
|
cornerRadius,
|
|
89
90
|
maxHeight,
|
|
@@ -126,9 +127,9 @@ export class TrueSheet extends PureComponent {
|
|
|
126
127
|
style: contentContainerStyle
|
|
127
128
|
}, children), /*#__PURE__*/React.createElement(View, {
|
|
128
129
|
collapsable: false
|
|
129
|
-
}, !!FooterComponent && /*#__PURE__*/React.createElement(FooterComponent, null)), Platform.OS === 'android' && /*#__PURE__*/React.createElement(TrueSheetGrabber, {
|
|
130
|
+
}, !!FooterComponent && /*#__PURE__*/React.createElement(FooterComponent, null)), Platform.OS === 'android' && /*#__PURE__*/React.createElement(TrueSheetGrabber, _extends({
|
|
130
131
|
visible: grabber
|
|
131
|
-
})));
|
|
132
|
+
}, grabberProps))));
|
|
132
133
|
}
|
|
133
134
|
}
|
|
134
135
|
const $nativeSheet = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","PureComponent","createRef","requireNativeComponent","Platform","findNodeHandle","View","TrueSheetModule","TrueSheetGrabber","LINKING_ERROR","select","ios","default","ComponentName","TrueSheetNativeView","Error","TrueSheet","displayName","constructor","props","ref","onDismiss","bind","onPresent","onSizeChange","state","scrollableHandle","handle","nodeHandle","current","updateState","scrollRef","setState","event","nativeEvent","componentDidMount","sizes","length","console","warn","componentDidUpdate","present","index","resize","dismiss","render","backgroundColor","grabber","
|
|
1
|
+
{"version":3,"names":["React","PureComponent","createRef","requireNativeComponent","Platform","findNodeHandle","View","TrueSheetModule","TrueSheetGrabber","LINKING_ERROR","select","ios","default","ComponentName","TrueSheetNativeView","Error","TrueSheet","displayName","constructor","props","ref","onDismiss","bind","onPresent","onSizeChange","state","scrollableHandle","handle","nodeHandle","current","updateState","scrollRef","setState","event","nativeEvent","componentDidMount","sizes","length","console","warn","componentDidUpdate","present","index","resize","dismiss","render","backgroundColor","dismissible","grabber","grabberProps","blurTint","cornerRadius","maxHeight","FooterComponent","style","contentContainerStyle","children","rest","createElement","$nativeSheet","_extends","collapsable","overflow","undefined","android","borderTopLeftRadius","borderTopRightRadius","OS","visible","position","left","zIndex"],"sourceRoot":"../../src","sources":["TrueSheet.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
1
|
import React from 'react';
|
|
3
2
|
import { View } from 'react-native';
|
|
4
3
|
const GRABBER_WRAPPER_HEIGHT = 24;
|
|
5
4
|
const GRABBER_DEFAULT_HEIGHT = 4;
|
|
6
5
|
const GRABBER_DEFAULT_WIDTH = 32;
|
|
7
|
-
const
|
|
6
|
+
const GRABBER_DEFAULT_TOP_OFFSET = 6;
|
|
7
|
+
|
|
8
|
+
// M3 spec: #49454F 0.4 alpha
|
|
9
|
+
const GRABBER_DEFAULT_COLOR = 'rgba(73,69,79,0.4)';
|
|
8
10
|
/**
|
|
9
|
-
*
|
|
11
|
+
* Grabber component.
|
|
10
12
|
* Used by defualt for Android but feel free to re-use.
|
|
11
13
|
*/
|
|
12
14
|
export const TrueSheetGrabber = props => {
|
|
@@ -15,19 +17,20 @@ export const TrueSheetGrabber = props => {
|
|
|
15
17
|
color = GRABBER_DEFAULT_COLOR,
|
|
16
18
|
width = GRABBER_DEFAULT_WIDTH,
|
|
17
19
|
height = GRABBER_DEFAULT_HEIGHT,
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
topOffset = GRABBER_DEFAULT_TOP_OFFSET,
|
|
21
|
+
style
|
|
20
22
|
} = props;
|
|
21
23
|
if (!visible) return null;
|
|
22
24
|
return /*#__PURE__*/React.createElement(View, {
|
|
23
25
|
style: $wrapper
|
|
24
|
-
}, /*#__PURE__*/React.createElement(View,
|
|
26
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
25
27
|
style: [$grabber, {
|
|
26
28
|
height,
|
|
27
29
|
width,
|
|
28
|
-
backgroundColor: color
|
|
30
|
+
backgroundColor: color,
|
|
31
|
+
top: topOffset
|
|
29
32
|
}, style]
|
|
30
|
-
}
|
|
33
|
+
}));
|
|
31
34
|
};
|
|
32
35
|
const $wrapper = {
|
|
33
36
|
position: 'absolute',
|
|
@@ -40,9 +43,6 @@ const $wrapper = {
|
|
|
40
43
|
zIndex: 9999
|
|
41
44
|
};
|
|
42
45
|
const $grabber = {
|
|
43
|
-
|
|
44
|
-
opacity: 0.4,
|
|
45
|
-
borderRadius: GRABBER_DEFAULT_HEIGHT / 2,
|
|
46
|
-
top: 6
|
|
46
|
+
borderRadius: GRABBER_DEFAULT_HEIGHT / 2
|
|
47
47
|
};
|
|
48
48
|
//# sourceMappingURL=TrueSheetGrabber.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","GRABBER_WRAPPER_HEIGHT","GRABBER_DEFAULT_HEIGHT","GRABBER_DEFAULT_WIDTH","GRABBER_DEFAULT_COLOR","TrueSheetGrabber","props","visible","color","width","height","
|
|
1
|
+
{"version":3,"names":["React","View","GRABBER_WRAPPER_HEIGHT","GRABBER_DEFAULT_HEIGHT","GRABBER_DEFAULT_WIDTH","GRABBER_DEFAULT_TOP_OFFSET","GRABBER_DEFAULT_COLOR","TrueSheetGrabber","props","visible","color","width","height","topOffset","style","createElement","$wrapper","$grabber","backgroundColor","top","position","left","right","alignSelf","alignItems","zIndex","borderRadius"],"sourceRoot":"../../src","sources":["TrueSheetGrabber.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,IAAI,QAKC,cAAc;AAErB,MAAMC,sBAAsB,GAAG,EAAE;AACjC,MAAMC,sBAAsB,GAAG,CAAC;AAChC,MAAMC,qBAAqB,GAAG,EAAE;AAChC,MAAMC,0BAA0B,GAAG,CAAC;;AAEpC;AACA,MAAMC,qBAAqB,GAAG,oBAAoB;AAwClD;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAIC,KAA4B,IAAK;EAChE,MAAM;IACJC,OAAO,GAAG,IAAI;IACdC,KAAK,GAAGJ,qBAAqB;IAC7BK,KAAK,GAAGP,qBAAqB;IAC7BQ,MAAM,GAAGT,sBAAsB;IAC/BU,SAAS,GAAGR,0BAA0B;IACtCS;EACF,CAAC,GAAGN,KAAK;EAET,IAAI,CAACC,OAAO,EAAE,OAAO,IAAI;EAEzB,oBACET,KAAA,CAAAe,aAAA,CAACd,IAAI;IAACa,KAAK,EAAEE;EAAS,gBACpBhB,KAAA,CAAAe,aAAA,CAACd,IAAI;IAACa,KAAK,EAAE,CAACG,QAAQ,EAAE;MAAEL,MAAM;MAAED,KAAK;MAAEO,eAAe,EAAER,KAAK;MAAES,GAAG,EAAEN;IAAU,CAAC,EAAEC,KAAK;EAAE,CAAE,CACxF,CAAC;AAEX,CAAC;AAED,MAAME,QAAmB,GAAG;EAC1BI,QAAQ,EAAE,UAAU;EACpBD,GAAG,EAAE,CAAC;EACNE,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,QAAQ;EACnBX,MAAM,EAAEV,sBAAsB;EAC9BsB,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE;AACV,CAAC;AAED,MAAMR,QAAmB,GAAG;EAC1BS,YAAY,EAAEvB,sBAAsB,GAAG;AACzC,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TrueSheet.d.ts","sourceRoot":"","sources":["../../../src/TrueSheet.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAWlG,OAAO,KAAK,EAAE,cAAc,EAAY,MAAM,SAAS,CAAA;AA0BvD,UAAU,cAAc;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;CAChC;AAED,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,EAAE,cAAc,CAAC;IAC1E,WAAW,SAAc;IAEzB,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAsB;gBAE9B,KAAK,EAAE,cAAc;IAcjC,OAAO,KAAK,MAAM,GAOjB;IAED,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAIjB,iBAAiB,IAAI,IAAI;IAUzB,kBAAkB,IAAI,IAAI;IAI1B;;;OAGG;IACU,OAAO,CAAC,KAAK,GAAE,MAAU,GAAG,OAAO,CAAC,IAAI,CAAC;IAItD;;;OAGG;IACU,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAIjD;;OAEG;IACU,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAIrC,MAAM,IAAI,SAAS;
|
|
1
|
+
{"version":3,"file":"TrueSheet.d.ts","sourceRoot":"","sources":["../../../src/TrueSheet.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAWlG,OAAO,KAAK,EAAE,cAAc,EAAY,MAAM,SAAS,CAAA;AA0BvD,UAAU,cAAc;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;CAChC;AAED,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,EAAE,cAAc,CAAC;IAC1E,WAAW,SAAc;IAEzB,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAsB;gBAE9B,KAAK,EAAE,cAAc;IAcjC,OAAO,KAAK,MAAM,GAOjB;IAED,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAIjB,iBAAiB,IAAI,IAAI;IAUzB,kBAAkB,IAAI,IAAI;IAI1B;;;OAGG;IACU,OAAO,CAAC,KAAK,GAAE,MAAU,GAAG,OAAO,CAAC,IAAI,CAAC;IAItD;;;OAGG;IACU,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAIjD;;OAEG;IACU,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAIrC,MAAM,IAAI,SAAS;CA2DpB"}
|
|
@@ -1,29 +1,39 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type ColorValue, type
|
|
3
|
-
export interface TrueSheetGrabberProps
|
|
2
|
+
import { type ColorValue, type ViewStyle, type DimensionValue, type StyleProp } from 'react-native';
|
|
3
|
+
export interface TrueSheetGrabberProps {
|
|
4
4
|
/**
|
|
5
|
-
* Is grabber visible
|
|
5
|
+
* Is grabber visible.
|
|
6
6
|
* @default true
|
|
7
7
|
*/
|
|
8
8
|
visible?: boolean;
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
|
|
10
|
+
* Optional style that overrides the default style.
|
|
11
|
+
*/
|
|
12
|
+
style?: StyleProp<ViewStyle>;
|
|
13
|
+
/**
|
|
14
|
+
* Grabber color according to M3 specs.
|
|
15
|
+
* @default rgba(73,69,79,0.4)
|
|
12
16
|
*/
|
|
13
17
|
color?: ColorValue;
|
|
14
18
|
/**
|
|
15
|
-
* Grabber height according to M3 specs
|
|
19
|
+
* Grabber height according to M3 specs.
|
|
16
20
|
* @default 4
|
|
17
21
|
*/
|
|
18
|
-
height?:
|
|
22
|
+
height?: DimensionValue;
|
|
23
|
+
/**
|
|
24
|
+
* Grabber top position offset.
|
|
25
|
+
*
|
|
26
|
+
* @default 6
|
|
27
|
+
*/
|
|
28
|
+
topOffset?: DimensionValue;
|
|
19
29
|
/**
|
|
20
|
-
* Grabber width according to M3 specs
|
|
30
|
+
* Grabber width according to M3 specs.
|
|
21
31
|
* @default 32
|
|
22
32
|
*/
|
|
23
|
-
width?:
|
|
33
|
+
width?: DimensionValue;
|
|
24
34
|
}
|
|
25
35
|
/**
|
|
26
|
-
*
|
|
36
|
+
* Grabber component.
|
|
27
37
|
* Used by defualt for Android but feel free to re-use.
|
|
28
38
|
*/
|
|
29
39
|
export declare const TrueSheetGrabber: (props: TrueSheetGrabberProps) => React.JSX.Element | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TrueSheetGrabber.d.ts","sourceRoot":"","sources":["../../../src/TrueSheetGrabber.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,
|
|
1
|
+
{"version":3,"file":"TrueSheetGrabber.d.ts","sourceRoot":"","sources":["../../../src/TrueSheetGrabber.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAA;AAUrB,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAA;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAA;IAE1B;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAA;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,6BAiB5D,CAAA"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Component, ComponentType, RefObject } from 'react';
|
|
2
2
|
import type { ColorValue, StyleProp, ViewProps, ViewStyle } from 'react-native';
|
|
3
|
+
import type { TrueSheetGrabberProps } from './TrueSheetGrabber';
|
|
3
4
|
export interface SizeInfo {
|
|
4
5
|
index: number;
|
|
5
6
|
value: number;
|
|
@@ -92,12 +93,18 @@ export interface TrueSheetProps extends ViewProps {
|
|
|
92
93
|
*/
|
|
93
94
|
cornerRadius?: number;
|
|
94
95
|
/**
|
|
95
|
-
* Shows native grabber (or handle) on IOS
|
|
96
|
+
* Shows native grabber (or handle) on IOS.
|
|
96
97
|
*
|
|
97
98
|
* @platform ios
|
|
98
99
|
* @default true
|
|
99
100
|
*/
|
|
100
101
|
grabber?: boolean;
|
|
102
|
+
/**
|
|
103
|
+
* Grabber props to be used for android grabber or handle.
|
|
104
|
+
*
|
|
105
|
+
* @platform android
|
|
106
|
+
*/
|
|
107
|
+
grabberProps?: TrueSheetGrabberProps;
|
|
101
108
|
/**
|
|
102
109
|
* The blur effect style on iOS.
|
|
103
110
|
* Overrides `backgroundColor` if set.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAE/D,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAA;AAE9B;;;;;GAKG;AACH,MAAM,MAAM,SAAS;AACnB;;;;;GAKG;AACD,MAAM;AAER;;;;;GAKG;GACD,MAAM;AAER;;;;;GAKG;GACD,GAAG,MAAM,GAAG;AAEd;;;;;GAKG;GACD,OAAO;AAET;;;;;GAKG;GACD,QAAQ;AAEV;;;;;GAKG;GACD,OAAO,CAAA;AAEX,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,UAAU,CAAA;IAE5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAA;IAEpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;IAEnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAE5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAEzC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAExC;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAEpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;CACxC"}
|
package/package.json
CHANGED
package/src/TrueSheet.tsx
CHANGED
|
@@ -130,8 +130,9 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
|
|
|
130
130
|
const {
|
|
131
131
|
sizes,
|
|
132
132
|
backgroundColor = 'white',
|
|
133
|
-
grabber = true,
|
|
134
133
|
dismissible = true,
|
|
134
|
+
grabber = true,
|
|
135
|
+
grabberProps,
|
|
135
136
|
blurTint,
|
|
136
137
|
cornerRadius,
|
|
137
138
|
maxHeight,
|
|
@@ -179,7 +180,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
|
|
|
179
180
|
{children}
|
|
180
181
|
</View>
|
|
181
182
|
<View collapsable={false}>{!!FooterComponent && <FooterComponent />}</View>
|
|
182
|
-
{Platform.OS === 'android' && <TrueSheetGrabber visible={grabber} />}
|
|
183
|
+
{Platform.OS === 'android' && <TrueSheetGrabber visible={grabber} {...grabberProps} />}
|
|
183
184
|
</View>
|
|
184
185
|
</TrueSheetNativeView>
|
|
185
186
|
)
|
package/src/TrueSheetGrabber.tsx
CHANGED
|
@@ -1,39 +1,60 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
View,
|
|
4
|
+
type ColorValue,
|
|
5
|
+
type ViewStyle,
|
|
6
|
+
type DimensionValue,
|
|
7
|
+
type StyleProp,
|
|
8
|
+
} from 'react-native'
|
|
3
9
|
|
|
4
10
|
const GRABBER_WRAPPER_HEIGHT = 24
|
|
5
11
|
const GRABBER_DEFAULT_HEIGHT = 4
|
|
6
12
|
const GRABBER_DEFAULT_WIDTH = 32
|
|
7
|
-
const
|
|
13
|
+
const GRABBER_DEFAULT_TOP_OFFSET = 6
|
|
8
14
|
|
|
9
|
-
|
|
15
|
+
// M3 spec: #49454F 0.4 alpha
|
|
16
|
+
const GRABBER_DEFAULT_COLOR = 'rgba(73,69,79,0.4)'
|
|
17
|
+
|
|
18
|
+
export interface TrueSheetGrabberProps {
|
|
10
19
|
/**
|
|
11
|
-
* Is grabber visible
|
|
20
|
+
* Is grabber visible.
|
|
12
21
|
* @default true
|
|
13
22
|
*/
|
|
14
23
|
visible?: boolean
|
|
15
24
|
|
|
16
25
|
/**
|
|
17
|
-
*
|
|
18
|
-
|
|
26
|
+
* Optional style that overrides the default style.
|
|
27
|
+
*/
|
|
28
|
+
style?: StyleProp<ViewStyle>
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Grabber color according to M3 specs.
|
|
32
|
+
* @default rgba(73,69,79,0.4)
|
|
19
33
|
*/
|
|
20
34
|
color?: ColorValue
|
|
21
35
|
|
|
22
36
|
/**
|
|
23
|
-
* Grabber height according to M3 specs
|
|
37
|
+
* Grabber height according to M3 specs.
|
|
24
38
|
* @default 4
|
|
25
39
|
*/
|
|
26
|
-
height?:
|
|
40
|
+
height?: DimensionValue
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Grabber top position offset.
|
|
44
|
+
*
|
|
45
|
+
* @default 6
|
|
46
|
+
*/
|
|
47
|
+
topOffset?: DimensionValue
|
|
27
48
|
|
|
28
49
|
/**
|
|
29
|
-
* Grabber width according to M3 specs
|
|
50
|
+
* Grabber width according to M3 specs.
|
|
30
51
|
* @default 32
|
|
31
52
|
*/
|
|
32
|
-
width?:
|
|
53
|
+
width?: DimensionValue
|
|
33
54
|
}
|
|
34
55
|
|
|
35
56
|
/**
|
|
36
|
-
*
|
|
57
|
+
* Grabber component.
|
|
37
58
|
* Used by defualt for Android but feel free to re-use.
|
|
38
59
|
*/
|
|
39
60
|
export const TrueSheetGrabber = (props: TrueSheetGrabberProps) => {
|
|
@@ -42,15 +63,15 @@ export const TrueSheetGrabber = (props: TrueSheetGrabberProps) => {
|
|
|
42
63
|
color = GRABBER_DEFAULT_COLOR,
|
|
43
64
|
width = GRABBER_DEFAULT_WIDTH,
|
|
44
65
|
height = GRABBER_DEFAULT_HEIGHT,
|
|
66
|
+
topOffset = GRABBER_DEFAULT_TOP_OFFSET,
|
|
45
67
|
style,
|
|
46
|
-
...rest
|
|
47
68
|
} = props
|
|
48
69
|
|
|
49
70
|
if (!visible) return null
|
|
50
71
|
|
|
51
72
|
return (
|
|
52
73
|
<View style={$wrapper}>
|
|
53
|
-
<View style={[$grabber, { height, width, backgroundColor: color }, style]}
|
|
74
|
+
<View style={[$grabber, { height, width, backgroundColor: color, top: topOffset }, style]} />
|
|
54
75
|
</View>
|
|
55
76
|
)
|
|
56
77
|
}
|
|
@@ -67,8 +88,5 @@ const $wrapper: ViewStyle = {
|
|
|
67
88
|
}
|
|
68
89
|
|
|
69
90
|
const $grabber: ViewStyle = {
|
|
70
|
-
// M3 spec for opacity
|
|
71
|
-
opacity: 0.4,
|
|
72
91
|
borderRadius: GRABBER_DEFAULT_HEIGHT / 2,
|
|
73
|
-
top: 6,
|
|
74
92
|
}
|
package/src/types.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Component, ComponentType, RefObject } from 'react'
|
|
2
2
|
import type { ColorValue, StyleProp, ViewProps, ViewStyle } from 'react-native'
|
|
3
|
+
import type { TrueSheetGrabberProps } from './TrueSheetGrabber'
|
|
3
4
|
|
|
4
5
|
export interface SizeInfo {
|
|
5
6
|
index: number
|
|
@@ -126,13 +127,20 @@ export interface TrueSheetProps extends ViewProps {
|
|
|
126
127
|
cornerRadius?: number
|
|
127
128
|
|
|
128
129
|
/**
|
|
129
|
-
* Shows native grabber (or handle) on IOS
|
|
130
|
+
* Shows native grabber (or handle) on IOS.
|
|
130
131
|
*
|
|
131
132
|
* @platform ios
|
|
132
133
|
* @default true
|
|
133
134
|
*/
|
|
134
135
|
grabber?: boolean
|
|
135
136
|
|
|
137
|
+
/**
|
|
138
|
+
* Grabber props to be used for android grabber or handle.
|
|
139
|
+
*
|
|
140
|
+
* @platform android
|
|
141
|
+
*/
|
|
142
|
+
grabberProps?: TrueSheetGrabberProps
|
|
143
|
+
|
|
136
144
|
/**
|
|
137
145
|
* The blur effect style on iOS.
|
|
138
146
|
* Overrides `backgroundColor` if set.
|