Skip to content

Commit

Permalink
Add primaryBackgroundStyle option to splitView (#6419)
Browse files Browse the repository at this point in the history 
This PR adds the primaryBackgroundStyle option in splitView to enable translucent sidebars when developing Mac Catalyst apps. Like splitView it's iOS only and requires iOS 13+, the moment it seems to only have an effect on Mac apps and not affect apps running on iOS, see: https://developer.apple.com/documentation/uikit/uisplitviewcontroller/3238075-primarybackgroundstyle

The following layout
```typescript
Navigation.events().registerAppLaunchedListener(() => {
    Navigation.setDefaultOptions({
        layout: {
            backgroundColor: 'transparent',
            componentBackgroundColor: 'transparent',
        },
        topBar: { 
            background: {translucent: true, blur: true},
            visible: false,
        }, 
    });
    Navigation.setRoot({
        root: {
            splitView: {
                master: {
                    stack: {
                        children: [
                            {
                                component: {
                                    name: 'Sidebar',
                                },
                            },
                        ],
                    },
                },
                detail: {
                    stack: {
                        children: [
                            {
                                component: {
                                    name: 'Main',
                                },
                            },
                        ],
                    },
                },
                options: {
                    displayMode: 'visible',
                    splitView: {
                       primaryBackgroundStyle: 'sidebar',
                    }
                },
            },
        },
    });
});
```
will produce something like this:

![Screen Shot 2020-07-22 at 17 20 09](https://user-images.githubusercontent.com/35420/88197440-c8faaa00-cc42-11ea-8dec-eab33cbb48ea.png)
  • Loading branch information
@frane
frane authored Jul 26, 2020
1 parent 2b42902 commit 9ba863a
Show file tree
Hide file tree
Showing 8 changed files with 87 additions and 51 deletions.
8 changes: 8 additions & 0 deletions lib/ios/RNNSplitViewControllerPresenter.m
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ - (void)applyOptions:(RNNNavigationOptions *)options {
[self.splitViewController rnn_setPrimaryEdge:options.splitView.primaryEdge];
[self.splitViewController rnn_setMinWidth:options.splitView.minWidth];
[self.splitViewController rnn_setMaxWidth:options.splitView.maxWidth];
[self.splitViewController rnn_setPrimaryBackgroundStyle:options.splitView.primaryBackgroundStyle];

}


Expand All @@ -26,6 +28,8 @@ - (void)applyOptionsOnInit:(RNNNavigationOptions *)initialOptions {
[self.splitViewController rnn_setPrimaryEdge:initialOptions.splitView.primaryEdge];
[self.splitViewController rnn_setMinWidth:initialOptions.splitView.minWidth];
[self.splitViewController rnn_setMaxWidth:initialOptions.splitView.maxWidth];
[self.splitViewController rnn_setPrimaryBackgroundStyle:initialOptions.splitView.primaryBackgroundStyle];

}

- (void)mergeOptions:(RNNNavigationOptions *)options resolvedOptions:(RNNNavigationOptions *)currentOptions {
Expand All @@ -43,6 +47,10 @@ - (void)mergeOptions:(RNNNavigationOptions *)options resolvedOptions:(RNNNavigat
if (options.splitView.maxWidth) {
[self.splitViewController rnn_setMaxWidth:options.splitView.maxWidth];
}
if (options.splitView.primaryBackgroundStyle) {
[self.splitViewController rnn_setPrimaryBackgroundStyle:options.splitView.primaryBackgroundStyle];
}

}

- (UISplitViewController *)splitViewController {
Expand Down
1 change: 1 addition & 0 deletions lib/ios/RNNSplitViewOptions.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@
@property (nonatomic, strong) NSString* primaryEdge;
@property (nonatomic, strong) Number* minWidth;
@property (nonatomic, strong) Number* maxWidth;
@property (nonatomic, strong) NSString* primaryBackgroundStyle;

@end
1 change: 1 addition & 0 deletions lib/ios/RNNSplitViewOptions.m
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ - (instancetype)initWithDict:(NSDictionary *)dict {
self.primaryEdge = dict[@"primaryEdge"];
self.minWidth = [NumberParser parse:dict key:@"minWidth"];
self.maxWidth = [NumberParser parse:dict key:@"maxWidth"];
self.primaryBackgroundStyle = dict[@"primaryBackgroundStyle"];
return self;
}

Expand Down
2 changes: 2 additions & 0 deletions lib/ios/UISplitViewController+RNNOptions.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,6 @@

- (void)rnn_setMaxWidth:(Number *)maxWidth;

- (void)rnn_setPrimaryBackgroundStyle:(NSString *)style;

@end
8 changes: 8 additions & 0 deletions lib/ios/UISplitViewController+RNNOptions.m
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,13 @@ - (void)rnn_setMaxWidth:(Number *)maxWidth {
}
}

- (void)rnn_setPrimaryBackgroundStyle:(NSString *)style {
if (@available(iOS 13.0, *)) {
if ([style isEqualToString:@"sidebar"]) {
[self setPrimaryBackgroundStyle:UISplitViewControllerBackgroundStyleSidebar];
}
}
}

@end

103 changes: 52 additions & 51 deletions lib/src/commands/LayoutTreeParser.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ describe('LayoutTreeParser', () => {
data: {
name: 'MyReactComponent',
options: LayoutExamples.options,
passProps: LayoutExamples.passProps
passProps: LayoutExamples.passProps,
},
children: []
children: [],
});
});

Expand All @@ -41,24 +41,24 @@ describe('LayoutTreeParser', () => {
data: {
name: 'MyReactComponent',
options: LayoutExamples.options,
passProps: LayoutExamples.passProps
passProps: LayoutExamples.passProps,
},
children: []
children: [],
});
});

it('pass props', () => {
const result = uut.parse({
component: {
name: 'MyScreen',
passProps: LayoutExamples.passProps
}
passProps: LayoutExamples.passProps,
},
});
expect(result).toEqual({
id: 'myUniqueId',
type: LayoutType.Component,
data: { name: 'MyScreen', passProps: LayoutExamples.passProps },
children: []
children: [],
});
expect(result.data.passProps).toBe(LayoutExamples.passProps);
});
Expand All @@ -68,22 +68,22 @@ describe('LayoutTreeParser', () => {
id: 'myUniqueId',
type: LayoutType.Stack,
data: {
options: LayoutExamples.options
options: LayoutExamples.options,
},
children: [
{
id: 'myUniqueId',
type: LayoutType.Component,
data: { name: 'MyReactComponent1' },
children: []
children: [],
},
{
id: 'myUniqueId',
type: LayoutType.Component,
data: { name: 'MyReactComponent2', options: LayoutExamples.options },
children: []
}
]
children: [],
},
],
});
});

Expand Down Expand Up @@ -182,64 +182,65 @@ const passProps = {
strProp: 'string prop',
numProp: 12345,
objProp: { inner: { foo: 'bar' } },
fnProp: () => 'Hello from a function'
fnProp: () => 'Hello from a function',
};

const options: Options = {
topBar: {
title: {
text: 'Hello1'
}
}
text: 'Hello1',
},
},
};

const optionsSplitView: Options = {
topBar: {
title: {
text: 'Hello1',
}
},
},
splitView: {
displayMode: 'auto',
primaryEdge: 'leading',
minWidth: 150,
maxWidth: 300
}
maxWidth: 300,
primaryBackgroundStyle: 'sidebar',
},
};

const singleComponent = {
component: {
name: 'MyReactComponent',
options,
passProps
}
passProps,
},
};

const externalComponent = {
externalComponent: {
name: 'MyReactComponent',
options,
passProps
}
passProps,
},
};

const stackWithTopBar = {
stack: {
children: [
{
component: {
name: 'MyReactComponent1'
}
name: 'MyReactComponent1',
},
},
{
component: {
name: 'MyReactComponent2',
options
}
}
options,
},
},
],
options
}
options,
},
};

const bottomTabs = {
Expand All @@ -249,26 +250,26 @@ const bottomTabs = {
stackWithTopBar,
{
component: {
name: 'MyReactComponent1'
}
}
]
}
name: 'MyReactComponent1',
},
},
],
},
};

const sideMenu = {
sideMenu: {
left: singleComponent,
center: stackWithTopBar,
right: singleComponent
}
right: singleComponent,
},
};

const topTabs = {
topTabs: {
children: [singleComponent, singleComponent, singleComponent, singleComponent, stackWithTopBar],
options
}
options,
},
};

const complexLayout: Layout = {
Expand All @@ -281,26 +282,26 @@ const complexLayout: Layout = {
stackWithTopBar,
{
stack: {
children: [singleComponent, singleComponent, singleComponent, singleComponent]
}
}
]
}
}
}
children: [singleComponent, singleComponent, singleComponent, singleComponent],
},
},
],
},
},
},
};

const splitView: Layout = {
splitView: {
master: {
stack: {
children: [singleComponent],
options
}
options,
},
},
detail: stackWithTopBar,
options: optionsSplitView
}
options: optionsSplitView,
},
};

const LayoutExamples = {
Expand All @@ -313,5 +314,5 @@ const LayoutExamples = {
topTabs,
complexLayout,
externalComponent,
splitView
splitView,
};
5 changes: 5 additions & 0 deletions lib/src/interfaces/Options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,11 @@ export interface OptionsSplitView {
* Set the maximum width of master view
*/
maxWidth?: number;
/**
* Set background style of sidebar. Currently works for Mac Catalyst apps only.
* @default 'none'
*/
primaryBackgroundStyle?: 'none' | 'sidebar';
}

export interface OptionsStatusBar {
Expand Down
10 changes: 10 additions & 0 deletions website/api/options-splitView.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,13 @@ Set the maximum width of master view.
| Type | Required | Platform |
| ------ | -------- | -------- |
| number | No | iOS |

### `primaryBackgroundStyle`

Set background style of sidebar. Currently works for Mac Catalyst apps only.
See: [Optimizing Your iPad App for Mac
](https://developer.apple.com/documentation/uikit/mac_catalyst/optimizing_your_ipad_app_for_mac#3239145)

| Type | Required | Default | Platform |
| --------------------------- | -------- | --------- | -------- |
| enum('none', 'sidebar') | No | 'none' | iOS |

0 comments on commit 9ba863a

Please sign in to comment.